@keyframes animate{
	0%,100%{opacity:1}
}
@keyframes animate-hover {
	0%{box-shadow:0 0 0 10px rgba(255,255,255,.3)}
	50%{box-shadow:0 0 0 5px rgba(255,255,255,.3)}
	100%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}
}
.box10,.box11,.box12,.box14,.box4,.box5,.box6,.box7,.box9{box-shadow:0 0 3px rgba(0,0,0,.3)}

/*********************** Demo - 6 *******************/
.box6{background:#000;position:relative}
.box6:after{background:rgba(0,0,0,.7);position:absolute;top:0;left:-30%;bottom:0;right:70%;transform:skew(20deg) translateX(-75%)}
.box6:hover:after{transform:skew(20deg) translateX(0)}
.box6 img{width:100%;height:auto}
.box6:hover img{opacity:.5}
.box6 .box-content{padding:20px;text-align:right;position:absolute;top:0;right:0;z-index:1}
.box6 .icon,.box7 .icon{padding:0;list-style:none}
.box10 .icon li a,.box11,.box12,.box13,.box14,.box6 .icon li a,.box7,.box7 .icon li a,.box8,.box8 .icon li a{text-align:center}
.box6 .title{font-size:20px;font-weight:900;color:#fff;margin:0 0 10px;transform:scale(0)}
.box6:hover .title{transform:scale(1)}
.box6 .icon li,.box6 .post{opacity:0;transform:translateX(40px);transition:all .35s ease 0s}
.box6 .post{display:block;font-size:14px;color:#fff;margin-bottom:5px}
.box6 .icon{display:inline-block;margin:0}
.box6:hover .icon li,.box6:hover .post{opacity:1;transform:translateX(0)}
.box6:hover .icon li:first-child{transition-delay:.1s}
.box6:hover .icon li:nth-child(2){transition-delay:.2s}
.box6 .icon li a{display:block;width:35px;height:35px;line-height:35px;background:#fff;font-size:18px;color:#605f5f;margin-bottom:5px;transition:all .35s ease}
.box6 .icon li a:hover{background:#605f5f;color:#fff}
@media only screen and (max-width:990px){.box6{margin-bottom:30px}
}

/*********************** Demo - 7 *******************/
.box7{position:relative}
.box7:after,.box7:before{width:100%;height:100%;background:rgba(11,33,47,.9);position:absolute;top:0;left:0;opacity:0;transition:all .5s ease 0s}
.box7:after{background:rgba(255,255,255,.3);border:2px solid #0dab76;top:0;left:170%;opacity:1;z-index:1;transform:skewX(45deg);transition:all 1s ease 0s}
.box7:hover:before{opacity:1}
.box7:hover:after{left:-170%}
.box7 img{width:100%;height:auto}
.box7 .box-content{width:100%;position:absolute;bottom:-100%;left:0;transition:all .5s ease 0s}
.box7:hover .box-content{bottom:30%}
.box7 .title{display:block;font-size:22px;font-weight:700;color:#fff;margin:0 0 10px}
.box7 .post{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:10px}
.box7 .icon{margin:0}
.box7 .icon li{display:inline-block}
.box7 .icon li a{display:block;width:35px;height:35px;line-height:35px;border-radius:50%;background:#0dab76;font-size:18px;color:#fff;margin-right:10px;transition:all .5s ease 0s}
.box8 .icon li,.box8 .title{display:inline-block}
.box7 .icon li a:hover{transform:rotate(360deg)}
@media only screen and (max-width:990px){.box7{margin-bottom:30px}
}

/*********************** Demo - 8 *******************/
.box8 .icon,.box8 .title{margin:0;position:absolute}
/*
.box8 {box-shadow:0 0 3px rgba(0,0,0,.3);position:relative;margin-bottom:25px;background:#fff url(../img/overlay.png);display: flex;justify-content: center;align-items: center;}
*/
.box8 {position:relative;margin-bottom:25px;background:#fff;display:flex;justify-content:center;align-items:center;}
.box8 img {object-fit: cover;overflow: hidden;object-position:center center;}
.box8 .box-content{width:100%;height:100%;background:rgba(0,0,0,.6);opacity:0;position:absolute;top:0;left:0;transform:perspective(400px) rotateX(-90deg);transform-origin:center top 0;transition:all .5s ease 0s;}
.box8 .icon li a,.box8 .title{background:#0d7bba;font-size:20px;color:#fff}
.box8:hover .box-content{opacity:1;transform:perspective(400px) rotateX(0)}
.box8 .title{padding:7px;border-radius:5px;font-weight:600;bottom:10px;transition:all .9s ease 0s;margin:0 auto;opacity:0.8;}
.box8 .icon li a,.box9 .box-content,.box9 .icon li,.box9 img{transition:all .35s ease 0s}
.box8:hover .title{opacity:0;}
.box8 .icon{list-style:none;padding:0;top:42%;left:0;right:0}
.box8 .icon li a{display:block;width:40px;height:40px;line-height:40px;border-radius:50%;margin-right:7px}
.box9 .icon,.box9 .title{width:100%;font-size:22px}
.box8 .icon li a:hover{background:#fff;color:#000}
@media only screen and (max-width:990px){.box8{margin-bottom:20px}
}

.box8 img  {
    opacity:1;
}

.box8 .box-content h4 {position:relative;color:#fff;padding:10px;border-radius:5px;font-weight:600;transition:all .9s ease 0s;background:#0d7bba;font-size:20px;color:#fff;width:90%;margin:10px auto 10px auto;}

.box8 .box-content a {display:inline-block;text-decoration:none;position:relative;color:#fff;margin:0 auto;padding:5px 7px;border-radius:5px;font-weight:600;transition:all .9s ease 0s;background:#0d7bba;font-size:20px;margin:10px auto 10px auto;}

.box8 .box-content a:hover {color:#0d7bba;transition:all .9s ease 0s;background:#fff;}

.box8 .box-content p {position:relative;font-size:0.9em;color:#fff;line-height:1em;padding:5px 10px 5px 10px;height:40%;width:100%;overflow:auto;}
.box8 .box-content p a {padding:0;background:none;border:none;font-size:inherit;margin:0;}
.box8 .box-content p a:hover {background:none;color:inherit;}