@charset "utf-8";

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

.bx-grandi{position:relative;float:left;overflow:hidden;margin:5px;width:calc(33.333% - 10px);color:#fff;text-align:center;font-size:1.2em}
.bx-grandi *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.2s;transition:all 0.2s}
.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;-webkit-transition:all .2s steps(10);transition:all .2s steps(10);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:.1s;transition-delay:.1s}
.bx-grandi figcaption:before{top:50%;-webkit-transition-delay:.2s;transition-delay:.2s;z-index:-1}
.bx-grandi figcaption:after{top:75%;-webkit-transition-delay:.3s;transition-delay:.3s;z-index:-1}
.bx-grandi figcaption{position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;padding:30px}
.bx-grandi h2,.bx-grandi p,.bx-grandi .icons{margin:0;width:100%;opacity:0}
.bx-grandi h2{font-weight:700;text-transform:uppercase ;}
.bx-grandi p{margin-top:10px;font-size:1em;letter-spacing:-1px;}
.bx-grandi .icons{position:absolute;bottom:30px;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:.8}
.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:.25s;transition-delay:.25s}
.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}
@media (max-width:600px) {
.bx-grandi{width:calc(50% - 10px);font-size:1em}
}