﻿/*https://bootsnipp.com/snippets/92e5X*/
.box16 {overflow:hidden;}
.box16 {text-align:center;color:#fff;position:relative;}
.box16 .box-content,.box16:after {width:100%;position:absolute;left:0}
.box16:after {content:"";height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.08) 69%,rgba(0,0,0,.76) 100%);top:0;transition:all .5s ease 0s}
.box16 .post, .box16 .title{transform:translateY(15px);transition:all .4s cubic-bezier(.13,.62,.81,.91) 0s}
.box16:hover:after{background:linear-gradient(to bottom,rgba(0,0,0,.01) 0,rgba(0,0,0,.09) 11%,rgba(0,0,0,.12) 13%,rgba(0,0,0,.19) 20%,rgba(0,0,0,.29) 28%,rgba(0,0,0,.29) 29%,rgba(0,0,0,.42) 38%,rgba(0,0,0,.46) 43%,rgba(0,0,0,.53) 47%,rgba(0,0,0,.75) 69%,rgba(0,0,0,.87) 84%,rgba(0,0,0,.98) 99%,rgba(0,0,0,.94) 100%)}
.box16 img{width:100%;height:auto;}
.box16 .box-content{padding:20px;margin-bottom:20px;bottom:0;z-index:1;}
.box16 .title{font-size:22px;font-weight:700;text-transform:uppercase;margin:0 0 10px}
.box16 .post{display:block;padding:8px 0;font-size:15px}
.box16 .social li a,.box17 .icon li a{border-radius:50%;font-size:20px;color:#fff}
.box16:hover .post,.box16:hover .title{transform:translateY(0)}
.box16 .social{list-style:none;padding:0 0 5px;margin:40px 0 25px;opacity:0;position:relative;transform:perspective(500px) rotateX(-90deg) rotateY(0) rotateZ(0);transition:all .6s cubic-bezier(0,0,.58,1) 0s}
.box16:hover .social{opacity:1;transform:perspective(500px) rotateX(0) rotateY(0) rotateZ(0)}
.box16 .social:before{content:"";width:50px;height:2px;background:#fff;margin:0 auto;position:absolute;top:-23px;left:0;right:0}
.box16 .social li{display:inline-block}
.box16 .social li a{display:block;width:40px;height:40px;line-height:40px;background:#6d3795;margin-right:10px;transition:all .3s ease 0s}
.box17 .icon li,.box17 .icon li a{display:inline-block}
.box16 .social li a:hover{background:#bea041}
.box16 .social li:last-child a{margin-right:0}
@media only screen and (max-width:990px){.box16{margin-bottom:30px}
}

.hoverbox1 {overflow:hidden;text-align:center;position:relative;background-color:#000;margin-bottom:30px;}
.hoverbox1 img {width:100%;height:auto;opacity:1;transition:ease-in-out .30s;}
.hoverbox1 .box-content, .hoverbox1:after {width:100%;position:absolute;left:0}
.hoverbox1 a {position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;transition: 0.1s all linear;}
.hoverbox1 .box-content {background-color:#262626;padding:0 0 20px 0;bottom:0;z-index:1;transform:translateY(60px);transition:all .2s cubic-bezier(.13,.62,.81,.91) 0s;}
.hoverbox1 .box-content h3 {color:#fff;margin:10px 0;}
.hoverbox1:hover .box-content{transform:translateY(0)}
.hoverbox1:hover img {opacity:0.8;}
.hoverbox1 span {display:inline-block;background-color:transparent;padding:4px 20px;font-size:14px;text-transform:uppercase;color:#dbdc02;font-weight:bold;border:solid 2px #dbdc02;}
.hoverbox1 span:hover {background-color:#dbdc02;color:#232323;}

.hoverbox2 {overflow:hidden;text-align:center;position:relative;background-color:#fff;margin-bottom:30px;}
.hoverbox2 p {font-size:14px;color:gray;line-height:16px;margin-top:6px;}
.hoverbox2 img {width:100%;height:auto;opacity:1;transition:ease-in-out .30s;}
.hoverbox2 a {position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;transition: 0.1s all linear;border:0;}
.hoverbox2:hover img {opacity:0.8;border:0;}
.hoverbox2:hover a {border:0;}

@media(max-width:767px) {
	.hoverbox1 .box-content h3.title {font-size:14px !important;}
	.hoverbox1 .box-content h3.title::after, .hoverbox2 p:after {content:' >';}
}
