.header-logo-portones{max-width:80%!important;height:auto!important}@media (max-width:600px){.header-logo-portones{max-width:60%!important;padding-top:10px;padding-bottom:10px}}.sticky-header-shrink .header-logo-portones{max-width:60%!important}.owl-item a img{max-height:594px}.footer-text-color{color:rgba(255,255,255,0.4)}.si-colored.si-instagram,.si-instagram:hover{background:-o-radial-gradient(30% 107%,circle,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);BORDER:0}.float{position:fixed;width:60px;height:60px;bottom:40px;right:40px;background-color:#25d366;color:#FFF;border-radius:50px;text-align:center;font-size:30px;z-index:100}.my-float{margin-top:9px}.bounce{-webkit-animation:bounce 2s infinite;animation:bounce 2s infinite}@-webkit-keyframes bounce{0%,25%,50%,75%,to{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}60%{-webkit-transform:translateY(-12px);transform:translateY(-12px)}}@keyframes bounce{0%,25%,50%,75%,to{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}60%{-webkit-transform:translateY(-12px);transform:translateY(-12px)}}@media (max-width:992px){.phone-menu-hidden{display:none}}@media (min-width:993px){.phone-menu-mobile-hidden{display:none}}.dark .menu-item.current>.menu-link,.dark .menu-item:hover>.menu-link{color:red}.sub-menu-container{border-top-color:red!important}.sub-menu-container .menu-item:hover>.menu-link{color:red!important}.mega-menu-content{border-top-color:red!important}.menu-container{border:0!important}.title-patch h1{color:#444;font-weight:600;line-height:1.5;margin:0 0 30px 0;font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:bold;margin-bottom:0}@media (max-width:600px){.title-patch h1{font-size:1rem}}.title-patch p{display:block;color:#444;font-weight:300;font-size:1.125rem;margin-top:6px}@media (max-width:600px){.title-patch p{font-size:1rem;margin-bottom:10px}}@media (max-width:600px){.boton-instalaciones{margin-top:5px!important}}.title-margin-patch .p-5{padding:1rem!important}@media (max-width:600px){.title-box{margin-bottom:40px!important}}@media (min-width:600px){.square-image-patch{-o-object-fit:cover;object-fit:cover;max-width:207px;max-height:155px}}@media (max-width:768px){.square-image-patch{-o-object-fit:cover;object-fit:cover;max-width:260px;max-height:260px;margin:auto}}.price-block span{display:inline-block}.price-block .before-price{font-size:70%;text-decoration:line-through}.price-block .actual-price{font-size:90%;font-weight:bold;margin-left:10px;color:red}@media (max-width:600px){.content-wrap-patch{padding-top:30px}}@media (max-width:600px){.promo-block-patch{padding:2rem!important;margin-bottom:10px!important}}.slider-element .owl-dots .owl-dot.active{background-color:red!important}.owl-dots button{border:1px solid black!important}@media (max-width:767px){#page-title .breadcrumb{margin-top:0px!important}}@media (max-width:767px){.fix-vista-producto .content-wrap{padding:20px 0!important}}.productos-relacionados-h3-patch{font-size:1rem!important}.product-title-patch{padding:0px 5px!important}.product-relacionados-img-patch{-o-object-fit:cover;object-fit:cover;width:260px!important;text-align:center;margin:auto;height:260px!important}.productos-image-carousel-patch img{height:100%!important;-o-object-fit:contain!important;object-fit:contain!important}.grid{position:relative;margin:0 auto;padding:1em 0 4em;list-style:none;text-align:center}.grid figure{position:relative;float:left;overflow:hidden;margin:10px 1%;min-width:320px;width:48%;background:#3085a3;text-align:center;cursor:pointer;height:360px}.grid figure img{position:relative;display:block;min-height:100%;max-width:100%;opacity:0.8}.grid figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}.grid figure figcaption:after,.grid figure figcaption:before{pointer-events:none}.grid figure figcaption,.grid figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%}.grid figure figcaption>a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}.grid figure h2{word-spacing:-0.15em;font-weight:300;color:white}.grid figure h2 span{font-weight:800}.grid figure h2,.grid figure p{margin:0}.grid figure p{letter-spacing:1px;font-size:68.5%}figure.effect-lily img{max-width:none;width:calc(100% + 50px);opacity:0.7;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}figure.effect-lily figcaption{text-align:left}figure.effect-lily figcaption>div{position:absolute;bottom:0;left:0;padding:2em;width:100%;height:50%}figure.effect-lily h2,figure.effect-lily p{-webkit-transform:translate3d(0,40px,0);transform:translate3d(0,40px,0)}figure.effect-lily h2{-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s}figure.effect-lily p{color:rgba(255,255,255,0.8);opacity:0;-webkit-transition:opacity 0.2s,-webkit-transform 0.35s;transition:opacity 0.2s,-webkit-transform 0.35s;-o-transition:opacity 0.2s,transform 0.35s;transition:opacity 0.2s,transform 0.35s;transition:opacity 0.2s,transform 0.35s,-webkit-transform 0.35s}figure.effect-lily:hover img,figure.effect-lily:hover p{opacity:1}figure.effect-lily:hover h2,figure.effect-lily:hover img,figure.effect-lily:hover p{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-lily:hover p{-webkit-transition-delay:0.05s;-o-transition-delay:0.05s;transition-delay:0.05s;-webkit-transition-duration:0.35s;-o-transition-duration:0.35s;transition-duration:0.35s}figure.effect-sadie figcaption:before{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear,left top,left bottom,from(rgba(72,76,97,0)),color-stop(75%,rgba(72,76,97,0.8)));background:-o-linear-gradient(top,rgba(72,76,97,0) 0%,rgba(72,76,97,0.8) 75%);background:linear-gradient(to bottom,rgba(72,76,97,0) 0%,rgba(72,76,97,0.8) 75%);content:'';opacity:0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}figure.effect-sadie h2{position:absolute;top:50%;left:0;width:100%;color:#484c61;-webkit-transition:-webkit-transform 0.35s,color 0.35s;-webkit-transition:color 0.35s,-webkit-transform 0.35s;transition:color 0.35s,-webkit-transform 0.35s;-o-transition:transform 0.35s,color 0.35s;transition:transform 0.35s,color 0.35s;transition:transform 0.35s,color 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}figure.effect-sadie figcaption:before,figure.effect-sadie p{-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s}figure.effect-sadie p{position:absolute;bottom:0;left:0;padding:2em;width:100%;opacity:0;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}figure.effect-sadie:hover h2{color:#fff;-webkit-transform:translate3d(0,-50%,0) translate3d(0,-40px,0);transform:translate3d(0,-50%,0) translate3d(0,-40px,0)}figure.effect-sadie:hover figcaption:before,figure.effect-sadie:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-roxy{background:-o-linear-gradient(45deg,#ff89e9 0%,#05abe0 100%);background:linear-gradient(45deg,#ff89e9 0%,#05abe0 100%)}figure.effect-roxy img{max-width:none;width:calc(100% + 60px);-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}figure.effect-roxy figcaption:before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:'';opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}figure.effect-roxy figcaption{padding:3em;text-align:left}figure.effect-roxy h2{padding:30% 0 10px 0}figure.effect-roxy p{opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}figure.effect-roxy:hover img{opacity:0.7;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-roxy:hover figcaption:before,figure.effect-roxy:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-bubba{background:#9e5406}figure.effect-bubba img{opacity:0.7;-webkit-transition:opacity 0.35s;-o-transition:opacity 0.35s;transition:opacity 0.35s}figure.effect-bubba:hover img{opacity:0.4}figure.effect-bubba figcaption:after,figure.effect-bubba figcaption:before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;content:'';opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s}figure.effect-bubba figcaption:before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-ms-transform:scale(0,1);transform:scale(0,1)}figure.effect-bubba figcaption:after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-ms-transform:scale(1,0);transform:scale(1,0)}figure.effect-bubba h2{padding-top:30%;-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}figure.effect-bubba p{padding:20px 2.5em;opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}figure.effect-bubba:hover figcaption:after,figure.effect-bubba:hover figcaption:before{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}figure.effect-bubba:hover h2,figure.effect-bubba:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-romeo{-webkit-perspective:1000px;perspective:1000px}figure.effect-romeo img{-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,0,300px);transform:translate3d(0,0,300px)}figure.effect-romeo:hover img{opacity:0.6;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-romeo figcaption:after,figure.effect-romeo figcaption:before{position:absolute;top:50%;left:50%;width:80%;height:1px;background:#fff;content:'';-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}figure.effect-romeo:hover figcaption:before{opacity:0.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(45deg);transform:translate3d(-50%,-50%,0) rotate(45deg)}figure.effect-romeo:hover figcaption:after{opacity:0.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(-45deg);transform:translate3d(-50%,-50%,0) rotate(-45deg)}figure.effect-romeo h2,figure.effect-romeo p{position:absolute;top:50%;left:0;width:100%;-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s}figure.effect-romeo h2{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-150%,0);transform:translate3d(0,-50%,0) translate3d(0,-150%,0)}figure.effect-romeo p{padding:0.25em 2em;-webkit-transform:translate3d(0,-50%,0) translate3d(0,150%,0);transform:translate3d(0,-50%,0) translate3d(0,150%,0)}figure.effect-romeo:hover h2{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-100%,0);transform:translate3d(0,-50%,0) translate3d(0,-100%,0)}figure.effect-romeo:hover p{-webkit-transform:translate3d(0,-50%,0) translate3d(0,100%,0);transform:translate3d(0,-50%,0) translate3d(0,100%,0)}figure.effect-layla{background:#18a367}figure.effect-layla img{height:390px}figure.effect-layla figcaption{padding:3em}figure.effect-layla figcaption:after,figure.effect-layla figcaption:before{position:absolute;content:'';opacity:0}figure.effect-layla figcaption:before{top:50px;right:30px;bottom:50px;left:30px;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-ms-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}figure.effect-layla figcaption:after{top:30px;right:50px;bottom:30px;left:50px;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-ms-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}figure.effect-layla h2{padding-top:26%;-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s}figure.effect-layla p{padding:0.5em 2em;text-transform:none;opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}figure.effect-layla h2,figure.effect-layla img{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}figure.effect-layla figcaption:after,figure.effect-layla figcaption:before,figure.effect-layla img,figure.effect-layla p{-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s}figure.effect-layla:hover img{opacity:0.7;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-layla:hover figcaption:after,figure.effect-layla:hover figcaption:before{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}figure.effect-layla:hover h2,figure.effect-layla:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-layla:hover figcaption:after,figure.effect-layla:hover h2,figure.effect-layla:hover img,figure.effect-layla:hover p{-webkit-transition-delay:0.15s;-o-transition-delay:0.15s;transition-delay:0.15s}figure.effect-honey{background:#4a3753}figure.effect-honey img{opacity:0.9;-webkit-transition:opacity 0.35s;-o-transition:opacity 0.35s;transition:opacity 0.35s}figure.effect-honey:hover img{opacity:0.5}figure.effect-honey figcaption:before{position:absolute;bottom:0;left:0;width:100%;height:10px;background:#fff;content:'';-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}figure.effect-honey h2{position:absolute;bottom:0;left:0;padding:1em 1.5em;width:100%;text-align:left;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}figure.effect-honey h2 i{font-style:normal;opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}figure.effect-honey figcaption:before,figure.effect-honey h2{-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s}figure.effect-honey:hover figcaption:before,figure.effect-honey:hover h2,figure.effect-honey:hover h2 i{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-oscar{background:-o-linear-gradient(45deg,#22682a 0%,#9b4a1b 40%,#3a342a 100%);background:linear-gradient(45deg,#22682a 0%,#9b4a1b 40%,#3a342a 100%)}figure.effect-oscar img{opacity:0.9;-webkit-transition:opacity 0.35s;-o-transition:opacity 0.35s;transition:opacity 0.35s}figure.effect-oscar figcaption{padding:3em;background-color:rgba(58,52,42,0.7);-webkit-transition:background-color 0.35s;-o-transition:background-color 0.35s;transition:background-color 0.35s}figure.effect-oscar figcaption:before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:''}figure.effect-oscar h2{margin:20% 0 10px 0;-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}figure.effect-oscar figcaption:before,figure.effect-oscar p{opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}figure.effect-oscar:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-oscar:hover figcaption:before,figure.effect-oscar:hover p{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}figure.effect-oscar:hover figcaption{background-color:rgba(58,52,42,0)}figure.effect-oscar:hover img{opacity:0.4}figure.effect-marley figcaption{text-align:right}figure.effect-marley h2,figure.effect-marley p{position:absolute;right:30px;left:30px;padding:10px 0}figure.effect-marley p{bottom:30px;line-height:1.5;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}figure.effect-marley h2{top:30px;-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}figure.effect-marley:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-marley h2:after{position:absolute;top:100%;left:0;width:100%;height:4px;background:#fff;content:'';-webkit-transform:translate3d(0,40px,0);transform:translate3d(0,40px,0)}figure.effect-marley h2:after,figure.effect-marley p{opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s}figure.effect-marley:hover h2:after,figure.effect-marley:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-ruby{background-color:#17819c}figure.effect-ruby img{opacity:0.7;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15)}figure.effect-ruby:hover img{opacity:0.5;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}figure.effect-ruby h2{margin-top:20%;-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}figure.effect-ruby p{margin:1em 0 0;padding:3em;border:1px solid #fff;opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,20px,0) scale(1.1);transform:translate3d(0,20px,0) scale(1.1)}figure.effect-ruby:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-ruby:hover p{opacity:1;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)}figure.effect-milo{background:#2e5d5a}figure.effect-milo img{max-width:none;width:calc(100% + 60px);opacity:1;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(-30px,0,0) scale(1.12);transform:translate3d(-30px,0,0) scale(1.12);-webkit-backface-visibility:hidden;backface-visibility:hidden}figure.effect-milo:hover img{opacity:0.5;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)}figure.effect-milo h2{position:absolute;right:0;bottom:0;padding:1em 1.2em}figure.effect-milo p{padding:0 10px 0 0;width:50%;border-right:1px solid #fff;text-align:right;opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}figure.effect-milo:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-dexter{background:-webkit-gradient(linear,left top,left bottom,from(#258dc8),to(#683c13));background:-o-linear-gradient(top,#258dc8 0%,#683c13 100%);background:linear-gradient(to bottom,#258dc8 0%,#683c13 100%)}figure.effect-dexter img{-webkit-transition:opacity 0.35s;-o-transition:opacity 0.35s;transition:opacity 0.35s}figure.effect-dexter:hover img{opacity:0.4}figure.effect-dexter figcaption:after{position:absolute;right:30px;bottom:30px;left:30px;height:calc(50% - 30px);border:7px solid #fff;content:'';-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}figure.effect-dexter:hover figcaption:after{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-dexter figcaption{padding:3em;text-align:left}figure.effect-dexter p{position:absolute;right:60px;bottom:60px;left:60px;opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}figure.effect-dexter:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-sarah{background:#42b078}figure.effect-sarah img{max-width:none;width:calc(100% + 20px);-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}figure.effect-sarah:hover img{opacity:0.4;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-sarah figcaption{text-align:left}figure.effect-sarah h2{position:relative;overflow:hidden;padding:0.5em 0}figure.effect-sarah h2:after{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#fff;content:'';-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}figure.effect-sarah:hover h2:after{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-sarah p{padding:1em 0;opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}figure.effect-sarah:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-zoe figcaption{top:auto;bottom:0;padding:1em;height:3.75em;background:#fff;color:#3c4a50;-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}figure.effect-zoe h2{float:left}figure.effect-zoe p.icon-links a{float:right;color:#3c4a50;font-size:1.4em}figure.effect-zoe:hover p.icon-links a:focus,figure.effect-zoe:hover p.icon-links a:hover{color:#252d31}figure.effect-zoe p.description{position:absolute;bottom:8em;padding:2em;color:#fff;text-transform:none;font-size:90%;opacity:0;-webkit-transition:opacity 0.35s;-o-transition:opacity 0.35s;transition:opacity 0.35s;-webkit-backface-visibility:hidden}figure.effect-zoe h2,figure.effect-zoe p.icon-links a{-webkit-transition:-webkit-transform 0.35s;transition:-webkit-transform 0.35s;-o-transition:transform 0.35s;transition:transform 0.35s;transition:transform 0.35s,-webkit-transform 0.35s;-webkit-transform:translate3d(0,200%,0);transform:translate3d(0,200%,0)}figure.effect-zoe p.icon-links a span:before{display:inline-block;padding:8px 10px;font-family:'feathericons';speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-eye:before{content:'\e000'}.icon-paper-clip:before{content:'\e001'}.icon-heart:before{content:'\e024'}figure.effect-zoe h2{display:inline-block}figure.effect-zoe:hover p.description{opacity:1}figure.effect-zoe:hover figcaption,figure.effect-zoe:hover h2,figure.effect-zoe:hover p.icon-links a{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-zoe:hover h2{-webkit-transition-delay:0.05s;-o-transition-delay:0.05s;transition-delay:0.05s}figure.effect-zoe:hover p.icon-links a:nth-child(3){-webkit-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s}figure.effect-zoe:hover p.icon-links a:nth-child(2){-webkit-transition-delay:0.15s;-o-transition-delay:0.15s;transition-delay:0.15s}figure.effect-zoe:hover p.icon-links a:first-child{-webkit-transition-delay:0.2s;-o-transition-delay:0.2s;transition-delay:0.2s}figure.effect-chico img{-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s;-webkit-transform:scale(1.12);-ms-transform:scale(1.12);transform:scale(1.12)}figure.effect-chico:hover img{opacity:0.5;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}figure.effect-chico figcaption{padding:3em}figure.effect-chico figcaption:before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:'';-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}figure.effect-chico figcaption:before,figure.effect-chico p{opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,-webkit-transform 0.35s;-o-transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s;transition:opacity 0.35s,transform 0.35s,-webkit-transform 0.35s}figure.effect-chico h2{padding:20% 0 20px 0}figure.effect-chico p{margin:0 auto;max-width:200px;-webkit-transform:scale(1.5);-ms-transform:scale(1.5);transform:scale(1.5)}figure.effect-chico:hover figcaption:before,figure.effect-chico:hover p{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}@media screen and (max-width:50em){.content{padding:0 10px;text-align:center}.grid figure{display:inline-block;float:none;margin:10px auto;width:100%}}.codrops-header{margin:0 auto;padding:4em 1em;text-align:center}.codrops-header h1{margin:0;font-weight:800;font-size:4em;line-height:1.3}.codrops-header h1 span{display:block;padding:0 0 0.6em 0.1em;color:#74777b;font-weight:300;font-size:45%}.codrops-demos{clear:both;padding:1em 0 0;text-align:center}.content+.codrops-demos{padding-top:5em}.codrops-demos a{display:inline-block;margin:0 5px;padding:1em 1.5em;text-transform:uppercase;font-weight:bold}.codrops-demos a.current-demo,.codrops-demos a:focus,.codrops-demos a:hover{background:#3c414a;color:#fff}.codrops-top{width:100%;text-transform:uppercase;font-weight:800;font-size:0.69em;line-height:2.2}.codrops-top a{display:inline-block;padding:1em 2em;text-decoration:none;letter-spacing:1px}.codrops-top span.right{float:right}.codrops-top span.right a{display:block;float:left}.codrops-icon:before{margin:0 4px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased}.codrops-icon-drop:before{content:"\e001"}.codrops-icon-prev:before{content:"\e004"}.related{clear:both;padding:6em 1em;font-size:120%}.related>a{display:inline-block;margin:20px 10px;padding:25px;border:1px solid #4f7f90;text-align:center}.related a:hover{border-color:#39545e}.related a img{max-width:100%;opacity:0.8}.related a:active img,.related a:hover img{opacity:1}.related a h3{margin:0;padding:0.5em 0 0.3em;max-width:300px;text-align:left}@media screen and (max-width:25em){.codrops-header{font-size:75%}.codrops-icon span{display:none}}