.box1{
     background-color: #774691;
     font-family: 'Raleway', sans-serif;
     overflow: hidden;
     position: relative;
 }
.efc{
    left: 0;position:absolute;text-align:center;top: 20px;width: 100%; font-size:23px; font-weight:600
}
.box1:hover .efc{
    display: none;
}
 .box1:before,
 .box1:after{
     content: '';
     background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
     height: 50%;
     width: 100%;
     opacity: 0.8;
     position: absolute;
     top: -50%;
     left: 0;
     z-index: 1;
     transition: all 0.3s ease-in 0s;
 }
 .box1:after{
     top: auto;
     bottom: -50%;
 }
 .box1:hover:before{ top: 0; }
 .box1:hover:after{ bottom: 0; }
 .box1 img{
     width: 100%;
     height: auto;
 }
 .box1 .box1-content{
     color: #fff;
     text-align: center;
     width: 100%;
     opacity: 0;
     position: absolute;
     top: 40%;
     left: 0;
     z-index: 2;
     transition: all 0.3s ease-out 0.1s;
 }
 .box1:hover .box1-content{
     opacity: 1;
     top: 5%;
     padding: 5px;
 }

 .box1 .title{
     font-size: 25px;
     font-weight: 700;
     letter-spacing: 0.5px;
     
     margin: 0;
 }
 .box1 .title:after{
     content: '';
     height: 2px;
     color: white;
     width: 70px;
     border-top: 2px dashed rgba(255,255,255,0.7);
     margin: 7px auto 10px;
     display: block;
     clear: both;
 }
 .box .post{
     color: rgba(255,255,255,0.8);
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 3px;
     text-transform: uppercase;
     display: block;
 }
 .box1 .icon{
     padding: 0;
     margin: 0;
     list-style: none;
     opacity: 0;
     transform: translateX(0%);
     position: absolute;
     left: 14%;
     bottom: 40%;
     z-index: 2;
     transition: all 0.3s ease-out 0.1s;
 }
 .box1:hover .icon{
     opacity: 1;
     bottom: 5%;
 }
 .box1 .icon li{
     margin: 0 0px;
     display: inline-block;
 }
.box1 .icon li img{
    width:60px;
}
 .box1 .icon li a{
     color: #444;
     background-color: #fff;
     font-size: 15px;
     text-align: center;
     line-height: 36px;
     height: 35px;
     width: 35px;
     border-radius: 10px;
     display: block;
     transition: all 0.3s ease 0s;
 }
.imgw{
    width: 60px;
}
 @media screen and (max-width:990px){
     .box1{ margin: 0 0 30px; }
     .img1{width: 60px;}
 }
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {width:450px}   
    .box1 {width: 450px; overflow: hidden;
     position: relative;}
    .img1{width: 60px;}
}
@media only screen and (min-width: 367px) and (max-width: 480px) {
.container {width:380px}   
    .box1 { overflow: hidden;
     position: relative;}
    .img1{width: 60px;}
}
@media only screen and (min-width: 240px) and (max-width: 367px) {
.container {width:360px}   
    .box1 { overflow: hidden;
     position: relative;}
    .img1{width: 25px;}
}