@charset "utf-8";

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

.bx-grandi{font-family:'Raleway',Arial,sans-serif;color:#fff;position:relative;float:left;overflow:hidden;margin:10px 1%;min-width:230px;max-width:405px;height: 275px;width:100%;background:#333;color:#fff;text-align:left}
.bx-grandi *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .6s ease;transition:all .6s ease}
.bx-grandi img{opacity:.8;height:100%;vertical-align:top;-webkit-transition:opacity .35s;transition:opacity .35s}
.bx-grandi figcaption{position:absolute;bottom:0;left:0;width:100%;height:100%}
.bx-grandi figcaption>div{height:50%;overflow:hidden;width:100%;position:relative}
.bx-grandi h2,.bx-grandi h3{margin:0;position:absolute;left:0;padding:0 30px;font-size:16px;}
.bx-grandi h2{font-weight:900;top:0}
.bx-grandi h3{font-size:1em;bottom:0;font-weight:500}
.bx-grandi h3:nth-of-type(2){opacity:0;-webkit-transform:translateY(150%);transform:translateY(150%)}
.bx-grandi a{left:0;right:0;top:0;bottom:0;position:absolute}
.bx-grandi:hover img,.bx-grandi.hover img{opacity:.3;-webkit-filter:grayscale(100%);filter:grayscale(100%)}
.bx-grandi:hover figcaption h3:first-of-type,.bx-grandi.hover figcaption h3:first-of-type{-webkit-transform:translateY(150%);transform:translateY(150%);opacity:0}
.bx-grandi:hover figcaption h3:nth-of-type(2),.bx-grandi.hover figcaption h3:nth-of-type(2){opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}