#product{background:#000;position:relative;overflow:hidden}#product .white{position:relative;width:calc(100% + 200px);height:50px;top:0;left:-100px;background:#000}#product .divisor{background:#3498db;position:absolute;z-index:1;top:0;font-size:3rem;width:0;height:100px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}#product .divisor span{color:#fff;text-transform:uppercase;width:100%;text-align:center;margin:auto;margin-top:20px;opacity:0}#product .divisor.show{-webkit-animation:divisor-show 1s ease forwards;animation:divisor-show 1s ease forwards}#product .divisor.show span{-webkit-animation:divisor-span-show 1s 1s ease forwards;animation:divisor-span-show 1s 1s ease forwards}@-webkit-keyframes divisor-span-show{to{opacity:1}}@keyframes divisor-span-show{to{opacity:1}}@-webkit-keyframes divisor-show{to{width:35%}}@keyframes divisor-show{to{width:35%}}#product .content{width:100%;height:160%;background:#fff;position:absolute;top:-190px;left:-125%;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}#product .content.show{-webkit-animation:content-show 1s ease 1s forwards;animation:content-show 1s ease 1s forwards}@-webkit-keyframes content-show{100%{left:-31%}}@keyframes content-show{100%{left:-31%}}#product .content-card{width:100%;height:calc(100% - 150px);position:inherit;padding:50px 0}#product .content-card .row{float:left;width:calc(50% - 10px);height:calc(100% - 50px);margin:50px 20px 50px 0;overflow:hidden;position:relative}#product .content-card .row .content-row{width:100%;height:110%;background-position:center !important;background-size:auto 100% !important;transition:-webkit-transform .55s;-webkit-transition:-webkit-transform .55s;-o-transition:transform .55s;transition:transform .55s;transition:transform .55s,-webkit-transform .55s}#product .content-card .row .mask{width:100%;height:100%;position:absolute;z-index:1;background:#000;opacity:0;-webkit-transition:opacity .55s;-o-transition:opacity .55s;transition:opacity .55s}#product .content-card .row .content-text{position:absolute;bottom:-270px;width:100%;height:calc(100% - 130px);padding:40px 0;-webkit-transition:bottom .55s,background-image .55s;-o-transition:bottom .55s,background-image .55s;transition:bottom .55s,background-image .55s;z-index:1;background-image:-o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 11.7%, rgba(0, 0, 0, 0.3) 22.1%, rgba(0, 0, 0, 0.4) 31.2%);background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(11.7%, rgba(0, 0, 0, 0.2)), color-stop(22.1%, rgba(0, 0, 0, 0.3)), color-stop(31.2%, rgba(0, 0, 0, 0.4)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 11.7%, rgba(0, 0, 0, 0.3) 22.1%, rgba(0, 0, 0, 0.4) 31.2%)}#product .content-card .row .content-text span{width:100%;text-align:center;font-size:2rem;color:#fff}#product .content-card .row .content-text p{margin:10% 10% 0 10%;text-align:center;color:#fff;font-weight:400;opacity:0;-webkit-transition:opacity .55s;-o-transition:opacity .55s;transition:opacity .55s}#product .content-card .row .content-text a{background:#000;padding:10px;margin:10%;color:#fff;text-decoration:none;text-transform:uppercase;font-size:.8rem;display:block;text-align:center}#product .content-card .row .content-text a:hover{color:#000;background:#fff}#product .content-card .row:last-child{margin-right:0}#product .content-card .row:hover .mask{opacity:.7}#product .content-card .row:hover .content-row{-webkit-transform:translateY(-4%);-ms-transform:translateY(-4%);transform:translateY(-4%)}#product .content-card .row:hover .content-text{bottom:0;background-image:none}#product .content-card .row:hover .content-text p{opacity:1}@media only screen and (max-width: 450px){#product{height:350%;width:calc(100% - 100px);padding:0 50px}#product .white{width:calc(100% + 100px);left:-50px}#product .divisor{font-size:2.5rem}#product .divisor.show{-webkit-animation:divisor-show 1s ease forwards;animation:divisor-show 1s ease forwards}#product .divisor.show span{margin-top:24px}@-webkit-keyframes divisor-show{to{width:60%}}@keyframes divisor-show{to{width:60%}}#product .content-card .row{height:20%;width:100%}#product .content-card .row .content-text{bottom:-60%}@-webkit-keyframes divisor-show{to{width:80%}}@keyframes divisor-show{to{width:80%}}}@media only screen and (min-width: 451px)and (max-width: 700px){@-webkit-keyframes divisor-show{to{width:50%}}@keyframes divisor-show{to{width:50%}}}@media only screen and (min-width: 451px)and (max-width: 999px){#product .divisor span{margin-top:22px}#product .divisor.show span{font-size:2.5rem}#product .content-card{height:calc(80% - 150px);padding:100px 0}#product .content-card .row .content-text{bottom:-50%}#product .content-card .row .content-text span{font-size:1.5rem}#product .content-card .row .content-text p{font-size:.8rem}#product .content-card .row:hover .content-text{bottom:15%}}@media only screen and (min-width: 1000px)and (max-width: 1200px){#product .content-card{height:calc(80% - 150px);padding:100px 0}}@media only screen and (min-width: 1000px)and (max-width: 1200px)and (max-height: 750px){#product .content-card .row .content-text{bottom:-150px}#product .content-card .row:hover .content-text{bottom:55px}}@media only screen and (min-width: 1367px)and (max-width: 1920px){#product .divisor span{margin-top:22px}#product .divisor.show span{font-size:2.5rem}#product .content-card{height:calc(80% - 150px);padding:100px 0}#product .content-card .row .content-text{bottom:-54%}#product .content-card .row .content-text span{font-size:3rem}#product .content-card .row .content-text p{font-size:1.2rem}#product .content-card .row .content-text a{font-size:1.2rem}#product .content-card .row:hover .content-text{bottom:5%}}@media only screen and (min-width: 1921px){#product .divisor{height:200px}#product .divisor span{margin-top:55px}#product .divisor.show span{font-size:4.5rem}#product .content-card{height:calc(80% - 150px);padding:200px 0}#product .content-card .row .content-text{bottom:-75%}#product .content-card .row .content-text span{font-size:10rem}#product .content-card .row .content-text p{font-size:4rem}#product .content-card .row .content-text a{font-size:4rem}#product .content-card .row:hover .content-text{bottom:-5%}}/*# sourceMappingURL=product.min.css.map */