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;
}
#reusable h1{
    font-size:48px;
}

#reusable img {
    width: 100%;
}
p{
    line-height:1.5rem;
}
.r-hr{
  max-width:50%;
  margin:0 auto;
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}
.pdf-icon{
  max-width:22px;
}
.r-container{
    max-width:1400px;
    padding-inline:2%;
    padding-block:5%;
    margin:0 auto;
}

.r-header{
    max-width:1000px;
    padding:2%;
    margin:0 auto;
    text-align: center;
}
.heavy{
    font-weight:700;
    text-transform: uppercase;
}
.thin{
    font-weight:200;
    text-transform: uppercase;
}
.r-hero{
  position: relative;
  max-height:100vh;
  overflow: hidden;
  display:grid;
}
.r-hero-bg{
  grid-column:1/2;
  grid-row:1/2;
}
.r-hero-content{
  grid-column:1/2;
  grid-row:1/2;
  position: relative;
  max-height:100vh;
}
#r-hero-logo{
  position: absolute;
  top:5%;
  left:5%;
  max-width:clamp(50px, 15vw, 400px);
  background-color:#fff;
  padding:.5%;
}
#hero-text{
  top:35%;
  left:5%;
  position: absolute;
  color:#fff;
}
.title-box{
  overflow:hidden;
}
.subtitle-box{
  overflow:hidden;
}
.r-hero-title{
  text-transform: uppercase;
  font-weight:700;
  transform:translateY(110%);
  margin-top:0;
}
.subtitle{
  opacity:0;
  font-style:italic;
}
.main-text{
  max-width:600px;
}
#main-img{
  filter:drop-shadow(3px 3px 3px rgba(0,0,0.3));
}
.product-card{
  margin-block:10px;
}
.card-grid{
  display:grid;
  border:1px solid #000;
  overflow:hidden;

}
.card-grid:hover .card-content{
  opacity:1;
  transition:.3s;
  transform:translateY(0);
  /* height:100%; */
}
.card-image{
  grid-row:1/2;
  grid-column:1/2;
}
.card-content{
  grid-row:1/2;
  grid-column:1/2;
  align-self:flex-end;
  background-color:#fff;
  text-align: center;
  opacity:0;
  transition:.3s;
  transform:translateY(100px);
  cursor:pointer;
}
.card-content img{
  max-width:200px;
}

.r-container{
    max-width:1400px;
    padding-inline:2%;
    margin:0 auto;
}

.r-header{
    max-width:1000px;
    padding:2%;
    margin:0 auto;
    text-align: center;
}

.products{
  margin-top:50px;
}
.color-group{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: flex-start;
}
.color{
  margin:1%;
}
.color-box{
  width:150px;
  height:100px;
}
#white{
  background-color:#F5F5F5;
}
#tan{
  background-color:#D3C19D;
}
.styles-group{
  display:flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap:wrap;
}
.style{
  text-align: center;
  margin:2px;
  /* max-width:300px; */
}
.window-style{
  max-width:300px;
}
.flex-group{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
}
.flex-item img{
  max-height:200px;
}

.product-logo{
  max-width:200px;
}
.logo{
display:flex;
justify-content: space-around;
flex-direction: row;
max-width:50%;
padding:2%;
}

#reusable p{
  margin-bottom:5px;
}
.color-group{
  margin-bottom:10px;
}

.colors-section{
  max-width:1200px;
  margin:0 auto;
  padding:2%;
}

.window{
  background-color:rgba(246,244,224,0.2);
  background-image:linear-gradient(to bottom, #fff 0%, rgba(246,244,224,0.4) 50%, #fff 100%);
  margin-block:1%;
}
.window-container{
  max-width:1400px;
  margin:0 auto;
  padding:3%;
}

.dets-list li{
  list-style-type: decimal;
}
.options-container ul li{
  margin-left:5%;
}
.options-container ul li p{
  margin:1% 0;
  padding:0;
  text-align: left;
}

/* ------------------------------------------ Media Queries -------------------------------------------------------- */

@media  screen and (min-width:1560px) {
  .center-divider{
    margin:25% 5% 5% 5%;
}
}
@media  screen and (max-width:1560px) {
    .window-styles-group{       
        grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
    }
}
@media  screen and (max-width:1350px) {
    .window-styles-group{       
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .warranty-header{
      bottom: -65%; 
    }
}
@media  screen and (min-width:1350px) {
  .warranty-div{
     height:60vh;
  }
     .warranty-header{
      bottom: -65%; 
    }
  }
@media  screen and (max-width:1200px) {
    .window-styles-group{       
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .center-divider{
        margin:40% 5% -5% 5%;
    }
    .series-section{
        margin-top:-25%;
    }
    .warranty-header{
      bottom: -55%; 
    }
}
@media  screen and (max-width:1250px) and (min-width:1200px) {
  .window-styles-group{       
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}
@media  screen and (max-width:1100px) {
  .center-divider{
    margin:55% 5% -15% 5%;
  }
}
@media  screen and (max-width:1050px) and (min-width:1000px) {
  .window-styles-group{       
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}
@media  screen and (max-width:1000px) {
    html{
        font-size:16px;
    }
    .window-styles-group{       
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
    .center-divider{
        margin:65% 5% -35% 5%;
    }
    .section1-grid{  
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: auto;
        place-self:center;
      }
      .sec1-img-horizontal{
        grid-column: 3/7;
        grid-row:3/5;
        order:2;
      }
      .sec1-img-vertical{
        grid-column: 1/5;
        grid-row:1/5;
       
      }
      .sec1-logo{
        grid-column: 1/4;
        grid-row:5/6;
      }
      .sec1-text-content{
        grid-column: 3/8;
        grid-row:1/3;
        margin-top:0px;
        padding:5%;
      }
}
@media (max-width:981px) {
  a.btn.collapsed:before {
      margin-top: 0 !important;
  }
  a.btn:before {
      margin-top: 0 !important;
  }
.features-list{
    margin-top:1%;
  }
}
@media  screen and (max-width:900px) {
  .center-divider{
    margin:60% 5% -35% 5%;
  }
  .warranty-div{
    height:50vh;
 }
  
}
@media  screen and (max-width:800px) {
    .window-styles-group{       
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .sec1-img-horizontal{
        grid-column: 1/-1;
        grid-row:auto;
        
      }
      .sec1-img-vertical{
        display:none; 
      }
      .sec1-logo{
        display:none;
      }
      .sec1-text-content{
        grid-column: 1/-1;
        grid-row:auto;
        margin-top:0px;
        padding:5%;
      }
      .warranty-header{
        bottom: -55%; 
      }
      .warranty-header-wrapper h3{
        font-size:3rem;
        font-weight:700;
      }
      .warranty-header-wrapper p{
          line-height:22px;
      }
      .warranty img{
        float:none;
      }
      header{
        height:55vh;
      }
      .center-divider{
        margin:85% 5% -40% 5%;
    }
    #prestige{
      margin-left:-45px;
    }
    .warranty-div{
      height:45vh;
  }
}
@media  screen and (max-width:700px) {
  .center-divider{
    margin:85% 5% -55% 5%;
  }
  .warranty-div{
    height:40vh;
}
}
@media  screen and (max-width:620px) and (min-width:600px) {
  .center-divider{
    margin:105% 5% -85% 5%;
    }
  }
@media  screen and (max-width:600px) {
  .center-divider{
    margin:85% 5% -5% 5%;
}
}
@media  screen and (max-width:600px) {
    header{
        height:60vh;
      }
      .warranty-img{
        bottom:-10%;
      }
      .warranty-header{
       display:none;
      }
      .warranty-para{
        position:absolute;
        bottom:-15%;
      }
    #hero-header h1{
        font-size:3rem;
    }
    .window-style-desc{       
        display:none;
    }
    .center-divider{
        margin:110% 5% -75% 5%;
    }
    .energy-efficient img{
      float:none;
    }
    
}
@media  screen and (max-width:500px) {
    .center-divider{
        margin:140% 5% -105% 5%;
    }
    .window-styles-group{       
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}