@charset "utf-8";

.wrap-grandi {margin:10px 0}
.wrap-grandi:after {display:block;visibility:hidden;clear:both;content:""}

.bx-grandi{font-family:'Source Sans Pro',Arial,sans-serif;position:relative;float:left;overflow:hidden;margin:10px 5px;min-width:290px;
               max-width:290px;height:190px;width:100%;color:#fff;text-align:center;font-size:16px}
.bx-grandi *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .35s ease;transition:all .35s ease}
.bx-grandi img{max-width:100%}
.bx-grandi:after,.bx-grandi:before,.bx-grandi figcaption:after,
.bx-grandi figcaption:before{background:#0a0a0a;height:25%;
    position:absolute;content:'';opacity:0;
	z-index:1;left:50%;right:50%}
.bx-grandi:before{top:0;-webkit-transition-delay:0;transition-delay:0}
.bx-grandi:after{top:25%;-webkit-transition-delay:0;transition-delay:0}
.bx-grandi figcaption:before{top:50%;z-index:-1}
.bx-grandi figcaption:after{top:75%;-webkit-transition-delay:.00001s;transition-delay:.00001s;z-index:-1}
.bx-grandi figcaption{position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;padding:0px;}
.bx-grandi h2,.bx-grandi p,.bx-grandi .icons{margin:0;width:100%;opacity:0}
.bx-grandi h2{font-weight:500;text-transform:uppercase}
.bx-grandi p{margin-top:80px;font-size:15px;font-family:'GmarketSansBold',Dotum,Verdana,applegothic;letter-spacing:-0.1px;font-weight:400;text-align:center;}
.bx-grandi .icons{position:absolute;bottom:20px;left:0;width:100%}
.bx-grandi i{padding:0 10px;display:inline-block;font-size:24px;color:#fff;text-align:center;opacity:.8;text-decoration:none}
.bx-grandi i:hover{opacity:1}
.bx-grandi:hover:after,
.bx-grandi.hover:after,
.bx-grandi:hover:before,
.bx-grandi.hover:before,
.bx-grandi:hover figcaption:after,
.bx-grandi.hover figcaption:after,
.bx-grandi:hover figcaption:before,
.bx-grandi.hover figcaption:before{left:0;right:0;opacity:.75}

.bx-grandi:hover figcaption h2,
.bx-grandi.hover figcaption h2,
.bx-grandi:hover figcaption p,
.bx-grandi.hover figcaption p,
.bx-grandi:hover figcaption .icons,
.bx-grandi.hover figcaption .icons{-webkit-transition-delay:0.0001s;transition-delay:0.0001s}
.bx-grandi:hover figcaption h2,
.bx-grandi.hover figcaption h2,
.bx-grandi:hover figcaption .icons,.bx-grandi.hover figcaption .icons{opacity:1}
.bx-grandi:hover figcaption p,.bx-grandi.hover figcaption p{opacity:.7}