@charset "UTF-8";.MainWrapper{position:relative;background-color:#e7e7e7;padding-top:105px}.MainWrapper .angledLines{position:absolute;top:0;left:0;width:100%}.MainWrapper h2{text-align:center;color:#022e53}.MainWrapper .filter-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:clamp(30px, 3vw, 50px)}@media screen and (max-width:1050px){.MainWrapper .filter-select>div{width:calc((100% / 3) - (50px));white-space:nowrap;-ms-flex-negative:0;flex-shrink:0}}@media screen and (max-width:720px){.MainWrapper .filter-select>div{width:calc((100% / 2) - 25px)}}.MainWrapper .filter-select input[type=radio]{display:none}.MainWrapper .filter-select input[type=radio]:checked~label{color:#022e53}.MainWrapper .filter-select input[type=radio]:checked~label:before{background-color:#022e53;-webkit-transform:translateX(0) scale(1);-ms-transform:translateX(0) scale(1);transform:translateX(0) scale(1);opacity:1}.MainWrapper .filter-select label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;padding:10px;font-size:20px;font-size:clamp(18px, 1.5vw, 20px);text-transform:uppercase;color:#949494;-webkit-transition:0.3s all ease;-o-transition:0.3s all ease;transition:0.3s all ease;cursor:pointer}.MainWrapper .filter-select label:hover{color:#7b7b7b}.MainWrapper .filter-select label:hover:before{opacity:0.7;-webkit-transform:translateX(0) scale(0.8);-ms-transform:translateX(0) scale(0.8);transform:translateX(0) scale(0.8)}.MainWrapper .filter-select label:before{content:"";position:relative;height:18px;width:18px;background-color:#949494;opacity:0;-webkit-transform:translateX(-10px) scale(0.7);-ms-transform:translateX(-10px) scale(0.7);transform:translateX(-10px) scale(0.7);-webkit-clip-path:polygon(55% 0, 100% 50%, 55% 99%, 0 100%, 0 0);clip-path:polygon(55% 0, 100% 50%, 55% 99%, 0 100%, 0 0);-webkit-transition:0.3s all ease;-o-transition:0.3s all ease;transition:0.3s all ease}.MainWrapper .swatch-wrap{--grid-col:5;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[var(--grid-col)];grid-template-columns:repeat(var(--grid-col), 1fr);grid-gap:10px;margin-top:45px}@media screen and (max-width:1600px){.MainWrapper .swatch-wrap{--grid-col:4}}@media screen and (max-width:1200px){.MainWrapper .swatch-wrap{--grid-col:3}}@media screen and (max-width:800px){.MainWrapper .swatch-wrap{--grid-col:2}}.MainWrapper .swatch-wrap .swatch{position:relative;overflow:hidden;aspect-ratio:1;cursor:pointer;isolation:isolate}.MainWrapper .swatch-wrap .swatch:hover span{-webkit-transform:translate(-50%, 200%) scale(0);-ms-transform:translate(-50%, 200%) scale(0);transform:translate(-50%, 200%) scale(0);opacity:0}.MainWrapper .swatch-wrap .swatch:hover small{-webkit-transform:translate(-50%, 0%) scale(1);-ms-transform:translate(-50%, 0%) scale(1);transform:translate(-50%, 0%) scale(1);opacity:1}.MainWrapper .swatch-wrap .swatch:hover .main{opacity:0}.MainWrapper .swatch-wrap .swatch:hover .active{opacity:1;scale:1.05}.MainWrapper .swatch-wrap .swatch:before{content:"";position:absolute;inset:0;height:100%;width:100%;background:-webkit-gradient(linear, left bottom, left top, from(black), color-stop(6%, rgba(0, 0, 0, 0.314146)), to(rgba(0, 212, 255, 0)));background:-webkit-linear-gradient(bottom, black 0%, rgba(0, 0, 0, 0.314146) 6%, rgba(0, 212, 255, 0) 100%);background:-o-linear-gradient(bottom, black 0%, rgba(0, 0, 0, 0.314146) 6%, rgba(0, 212, 255, 0) 100%);background:linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.314146) 6%, rgba(0, 212, 255, 0) 100%);z-index:2}.MainWrapper .swatch-wrap .swatch span{position:absolute;color:white;font-size:18px;font-weight:bold;bottom:16px;left:50%;-webkit-transform:translate(-50%, 0%);-ms-transform:translate(-50%, 0%);transform:translate(-50%, 0%);-webkit-transition:0.5s all ease;-o-transition:0.5s all ease;transition:0.5s all ease;z-index:3;text-align:center}.MainWrapper .swatch-wrap .swatch small{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:10px;position:absolute;color:white;font-size:18px;font-weight:bold;bottom:16px;left:50%;-webkit-transform:translate(-50%, 200%);-ms-transform:translate(-50%, 200%);transform:translate(-50%, 200%);-webkit-transition:0.5s all ease;-o-transition:0.5s all ease;transition:0.5s all ease;z-index:4;opacity:0}.MainWrapper .swatch-wrap .swatch small img{position:relative;inset:unset;height:auto;width:auto;-o-object-fit:unset;object-fit:unset}.MainWrapper .swatch-wrap .swatch img{position:absolute;inset:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.MainWrapper .swatch-wrap .swatch img.main{opacity:1;z-index:0;-webkit-transform:translateY(0%);-ms-transform:translateY(0%);transform:translateY(0%);-webkit-transition:0.5s all ease;-o-transition:0.5s all ease;transition:0.5s all ease}.MainWrapper .swatch-wrap .swatch img.hover-img{opacity:0;z-index:-1;-webkit-transition:0.5s all ease;-o-transition:0.5s all ease;transition:0.5s all ease;scale:1}.MainWrapper .swatch-wrap .swatch img.active{opacity:1;-webkit-transition:0.5s all ease;-o-transition:0.5s all ease;transition:0.5s all ease}
/*# sourceMappingURL=roofingColors.css.map */