body,html{box-sizing:border-box;margin:0;padding:0;font-size:18px;font-family:"Poppins",sans-serif}.maincontent{max-width:100%;padding:0;margin:0}.maincontent_wrapper{padding-top:0}img{width:100%}.bold{font-weight:900}.ital{font-style:italic}.text-center{text-align:center}h1,h2,h3,h4,h5{padding:0;margin:5px}.highlight{color:#1439a2;text-transform:uppercase;font-style:italic}.colorBrown{color:#a37a14}.colorBlue{color:#1439a2}.gradient-divider{height:1px;z-index:5;background:#000;margin:50px auto;position:relative;max-width:50%;background:-webkit-linear-gradient(left,#fff 0%,#323232 50%,#fff 100%)}.cta-wrapper{cursor:pointer;z-index:5}.product-link{display:inline-block;margin-top:8px;color:#000;padding:0 8px;border:2px solid #1439a2;border-top:0;border-bottom:0}.product-link-mobile{max-width:30%;align-self:center;text-align:center;display:none}.product-link:hover{border:2px solid #1439a2;border-left:0;border-right:0;transition:all 1s;text-decoration:none}.cta{display:block;padding:5px 8px;background-color:#fff}a:hover{cursor:pointer}.border-gradient{border:2px solid;border-image-slice:1;border-width:2px}.border-gradient-color{border-image-source:linear-gradient(to bottom right,#1439a2,#a37a14);transition:.3s}.cta:hover{text-decoration:none;filter:drop-shadow(2px 2px 2px rgba(0,0,0,.3))}.border-gradient:hover{border:2px solid;border-image-slice:1;border-width:2px}.border-gradient-color:hover{border-image-source:linear-gradient(to top left,#1439a2,#a37a14);transition:.3s}.header-title{margin:0 auto;position:relative;max-width:80%;display:inline-block}.header-title::before,.header-title::after{content:"";position:absolute;background-color:#a37a14;width:10%;height:2px;z-index:3}.header-title::before{top:50%;left:-11%}.header-title::after{top:50%;right:-11%}.hero{height:40vw;max-height:400px;overflow:hidden;background-image:linear-gradient(rgba(0,0,0,0.3)0%, rgba(0,0,0,0.3)100%), url('/imageserver/Reusable/gutters21/aluminum-banner.jpg');background-repeat:no-repeat;background-size:cover;display:flex;align-items:center;justify-content:center}.hero-text-wrapper{color:#fff;text-align:center}.subtitle{align-self:flex-end;max-width:70%;font-size:2.5rem;color:#1439a2;background-image:linear-gradient(to right, rgba(255,255,255,1)30%, rgba(255,255,255,0)100%);padding:20px 40px;opacity:0;transform:translateX(-100%);animation:hero-subtitle 1s 1.7s forwards}.section1{margin:5% 3% 0}.sec1-header{text-align:center;max-width:1000px;margin:0 auto}.grid2{margin:4% auto;display:grid;max-width:1400px;justify-content:center;gap:4vw;grid-template-columns:.7fr 1fr}.sec1-grid-left{max-width:600px;margin:0 auto}.sec1-grid-right ul li{list-style-type:none;padding-left:4px}.sec1-grid-right ul li::marker{content:"#1";color:#1439a2;font-size:1.2rem;font-weight:500}.mini-link{color:#1439a2;font-weight:900}.sec2-wrapper{padding:0% 3%}.sec2-header{text-align:center;max-width:1000px;margin:0 auto}.sec2-grid{display:flex;flex-direction:row;justify-content:space-evenly;flex-wrap:wrap;align-items:center}.sec2-img-top{grid-column: 1/3;grid-row:1/2}.sec2-img-center{grid-column: 2/4;grid-row:2/3}.sec2-img-btm{grid-column: 1/-1;grid-row:3/4}.sec2-item{display:flex;align-items:stretch;position:relative;margin:20px auto;max-width:450px}.collage-content{position:absolute;width:100%;max-width:700px;height:100%;top:0;left:0;background:rgba(255,252,237,.8);z-index:3;opacity:0;padding:7%;display:flex;flex-direction:column;justify-content:center}.sec2-item:hover{z-index:3}.sec2-item:hover>.sec2-item-overlay{opacity:0;transition:.5s}.sec2-item img{max-width:700px;filter:drop-shadow(3px 3px 3px rgba(0,0,0,.5))}.sec2-item-overlay{position:absolute;width:100%;bottom:0;color:#a37a14;background:#fff;padding:2%;transition:.5s;text-align:left;display:flex;justify-content:space-between}.sec2-item:hover .collage-content{opacity:1;transition:.7s}img{width:100%}svg{overflow:hidden}.light{color:#fff}.color-picker-section{display:grid;grid-template-columns:repeat(2,50%);padding:2%}.my-header{text-align:center;margin-block:2%}#color-picker-grid{display:grid;max-width:600px;justify-content:center;align-items:center;margin:0 auto}#roof-desat{grid-column: 1/2;grid-row: 1/2}#roof-overlaySvg{grid-column: 1/2;grid-row: 1/2;background-color:#f2f3ec;height:100%;width:100%;mix-blend-mode:overlay;z-index:2}#house{grid-column: 1/2;grid-row: 1/2;z-index:3;filter:drop-shadow(3px 3px 3px rgba(0,0,0,.3))}.color-group{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly}.color-box{margin:.2em auto;height:85px;width:85px;border:1px solid #000}.color-item{position:relative;max-width:85px}.color-title{position:absolute;bottom:8px;left:5px;font-size:14px;margin:0 auto;opacity:0;transition:.3s}#selected-color{font-weight:400}.color-item:hover .color-title{opacity:1;transition:.3s}@media screen and (max-width:1200px){.color-picker-section{display:block}}@media screen and (max-width:992px){.subtitle{font-size:1.5rem}.grid2{display:block;margin:0 auto}.sec2-img-btm{margin:0 auto}}@media screen and (max-width:700px){.subtitle{font-size:1rem}.collage-content h3{font-size:18px;font-weight:500!important}.collage-content>p{display:none}.sec2-item-overlay h2{font-size:18px}}@media screen and (max-width:500px){.subtitle{display:none}}