@charset "utf-8";


.c-preview {
  background:none;
  background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #000 75%, #000 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #000 75%, #000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #000 75%, #000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 400% 400%;
  background-repeat: no-repeat;
  display: flex;
 width:590px; 
 height:302px;
  max-width: 100vw;
  max-height: 100vh;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: relative;
  cursor: pointer;
  transition: .5s all;
  margin:auto;

}
.c-preview__img {
  position: absolute;
  left: 0;
  top: 0;
  background:url(../images/p1.jpg) no-repeat top center;
  background-size: cover;
 width:590px; 
 height:302px;
 
  z-index: 1;
  opacity: 1;
  mix-blend-mode: screen;
}

.c-preview__title {
  position: relative;
  z-index: 10;
  letter-spacing:0em;
  font-weight:normal;
  color:#FFFFFF; font-size:25px; line-height:50px; text-align:center;
}

.c-preview:hover {
  background-position: 100% 100%;
}
.c-preview:hover__title {
  text-shadow: 0 0 20px black;
}



.c-preview1 {
  background:none;
  background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #000 75%, #000 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #000 75%, #000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #000 75%, #000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 400% 400%;
  background-repeat: no-repeat;
  display: flex;
 width:590px; 
 height:302px;
  max-width: 100vw;
  max-height: 100vh;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: relative;
  cursor: pointer;
  transition: .5s all;
  margin:auto;
}

.c-preview1__img1 {
  position: absolute;
  left: 0;
  top: 0;
  background:url(../images/p2.jpg) no-repeat top center;
  background-size: cover;
 width:590px; 
 height:302px;
  z-index: 1;
  opacity: 1;
  mix-blend-mode: screen;
}

.c-preview1__title {
  position: relative;
  z-index: 10;
  letter-spacing:0em;
  font-weight:normal;
  color:#FFFFFF; font-size:35px; line-height:35px; text-align:center; padding-top:30px;
}
.c-preview1__title  span{
  position: relative;
  z-index: 10;
  letter-spacing:0em;
  font-weight:normal;
  color:#FFFFFF; font-size:25px; font-family:Arial, Helvetica, sans-serif
}

.c-preview1:hover {
  background-position: 100% 100%;
}
.c-preview1:hover__title {
  text-shadow: 0 0 20px black;
}