.grid{margin:10px auto 10px;width:100%}.grid a{float:left;width:25%;color:#333}.grid a:nth-child(odd){margin:0}.grid figure{position:relative;overflow:hidden;margin:5px;background:#00d0ff}.grid figure div.img{position:relative;display:block;width:100%;opacity:.9;-webkit-transition:opacity .3s;transition:opacity .3s;min-height:300px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;margin-top:60px}.grid figcaption{position:absolute;top:0;z-index:11;padding:10px;width:100%;height:100%;text-align:left}.grid figcaption h2{margin:0 0 30px 0;color:#000;letter-spacing:1px;font-weight:300;font-size:1.2em;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.grid figcaption p{padding:0;color:#aaa;font-weight:300;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.grid figcaption h2,.grid figcaption p{-webkit-transform:translateY(10px);transform:translateY(10px)}.grid figure button{position:absolute;padding:4px 20px;border:none;letter-spacing:1px;font-weight:bold;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.grid figcaption,.grid figcaption h2,.grid figcaption p,.grid figure button{-webkit-backface-visibility:hidden;backface-visibility:hidden}.grid svg{position:absolute;top:-1px;z-index:10;width:100%;height:100%}.grid svg path{fill:#fff}.grid a:hover figure div.img{opacity:1}.grid a:hover figcaption h2,.grid a:hover figcaption p{-webkit-transform:translateY(0);transform:translateY(0)}.grid a:hover figcaption p{opacity:0}.catalog .grid figure button{top:50%;left:50%;border:2px solid #004b9b;background-color:#fff;color:#004b9b;text-shadow:1px 1px #fff;opacity:0;-webkit-transform:translateY(-20%) translateX(-50%) scale(.25);transform:translateY(-20%) translateX(-50%) scale(.25)}.catalog .grid a:hover figure button{opacity:1;-webkit-transform:translateY(-20%) translateX(-50%) scale(1);transform:translateY(-20%) translateX(-50%) scale(1)}@media screen and (max-width:58em){.grid a{width:25%}.grid figcaption h2{font-size:1em}.grid figcaption p{font-size:.9em}.grid a:nth-child(odd){margin:0}.grid a:nth-child(3n-1){margin:0}}@media screen and (max-width:27em){.grid figure{margin:15px 30px}.grid figure div.img{min-height:370px}.grid a{width:100%}.grid a:nth-child(even){margin:0}.grid figcaption h2{font-size:1.4em}.grid figcaption p{font-size:1.1em}}