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 img {
    width: 100%;
}

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

.r-header{
    max-width:1000px;
    padding:2%;
    margin:0 auto;
    text-align: center;
}
.maincontent{
    max-width:100%;
  }
  html {
    margin:0;
    padding:0;
    color: #000;
    font-size:18px;
    box-sizing:border-box;
}
.my-hr{
  margin-block:20px 30px;
  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); 
}
.color-group{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: flex-start;
}
.color{
  height:50px;
  width:50px;
  margin:5px;
  border:1px solid #000;
}
.flex-group{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
}
.flex-item img{
  max-height:200px;
}
.row{
    margin:0;
    padding:0;
}
 h1 {
    font-size:3.2rem;
    font-family: 'Play', sans-serif;}
 h2 {
    font-size:2.5rem;
    font-family: 'Play', sans-serif;}
 h3 {
    font-size:2rem;
    font-family: 'Play', sans-serif;}
 h4 {
    font-size:1.5rem;
    font-family: 'Josefin Sans', sans-serif;}
 h5{
    font-size:1.2rem;
    font-family: 'Josefin Sans', sans-serif;}
 p{
    font-size:1rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight:300;}
.rButton {
	box-shadow: 0px 10px 7px -7px #276873;
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	background-color:#599bb3;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.rButton:hover {
   box-shadow: 0px 10px 14px -7px #276873;
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
   color:#F3EFE6;
}
.rButton:active {
	position:relative;
	top:1px;
}
.maincontent{
  max-width:100%;

}

.dropdown-menu {
  width: 600px !important;
  height: auto;
padding: 20px;
}

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

.product-main-wrapper{
background: url('/imageserver/Reusable/quaker-windows/product-bg-btm.png'), url('/imageserver/Reusable/quaker-windows/product-bg-top.png');
background-position: top, bottom;
background-size: 100%;
background-repeat: no-repeat;
}

#reusable{
  margin-top:5%;
}
#reusable p{
  margin-bottom:0;
}
.color-group{
  margin-bottom:10px;
}
.features-list ul{
  margin-left:30px;
  max-width:750px;
}

.laminated-colors{
  margin-top:4%;
  display:flex;
}
.laminated-colors img{  
  display:inline;
}
.colors-container{
  padding:4% 3%;
}
.colors{
  border:1px solid black;
}
.color-options p{
  display:inline;
  max-width:50px;
}
.warranty img{
  padding:0.5em;
}
.energy-efficient{
  padding:4% 10%;
  margin-top:3%;
  width:90vw;
  margin:0 auto;
}
.energy-list{
  text-align: center;
  display:flex;
  flex-direction: row;
  justify-content:space-evenly;
  align-items:center;
  flex-wrap:wrap;
}
.energy-list div{
  margin:10px 0;
}
.energy-list p{
  position: relative;
  min-width:260px;
  font-size:1.2rem;
}

#prestige{
  margin-left:0px;
}

#prestige::before{
  content:url('/imageserver/Reusable/quaker-windows/check.png');
  position:absolute;
  left:20px;
  top:-5px;
}

.energy-list p:not(#prestige)::before{
  content:url('/imageserver/Reusable/quaker-windows/check.png');
  position:absolute;
  left:-5px;
  top:-5px;
}
.energy-efficient img{
  float:left;
  padding:0.5em;
  clear:both;
}
.colors-section{
  max-width:1200px;
  margin:0 auto;
  padding:5% 2%;
}



.options-container{
  padding:0 3%;
  width:100%;
}

.collapse{
  text-align:center;
  margin:5% 0;
}
.btn:hover,
.btn:focus,
.btn.focus {
    color: #d71920;
}



button.btn {
    font-size: 1.5rem;
    color: #000;
    font-family: 'Play', sans-serif;
    letter-spacing: 2px;
    width: 100%;
    text-align: left;
    outline: none;
    padding: 20px;
    background: transparent;
    border-bottom:2px solid black;
}

button.btn:hover {
    color: #d71920;
    
}

button.btn.collapsed:before {
    content: "+";
    float: right !important;
    padding-right: 5px;
    font-size: 2rem;
    color: #000;
    margin-top: -5px;
    outline: none;
    
}
.highlight{
  font-weight:700;
  margin:0;
}
.black-color li{
  font-size:.7rem;
}
.window-container{
  max-width:1400px;
  margin:0 auto;
  padding:3%;
}

button.btn:before {
    content: "-";
    float: right !important;
    padding-right: 5px;
    font-size: 20px;
    color: #d71920;
    margin-top: -5px;
    outline: none;
}

.btn {
    white-space: inherit !important;   
}

.intelliglass-grid{
  display:grid;
  position: relative;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows:repeat(auto-fit, minmax(200px, 1fr));
  width:100%;
  margin-top:-15%;
  min-height:300px;
  justify-items:center;
}
.iglass-header{
  height:45vh;
  width:90%;
  margin:0 auto;
}
.climate-zones{
  padding:3% 0;
}
.climate-zones p{
  margin:0;
  padding:0;
}
.iglass{
  padding:3%;
  border-bottom:1px solid black;
  margin-bottom:5%;
}
.glass{
  max-width:225px;
  margin-bottom:10px;
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  align-content: flex-start;
  border:1px solid black
}
.glass p{
  display:block;
}
.glass:nth-child(odd){
  background-color:#ececec;
}
.glass:nth-child(even){
  background-color:#fff;
}

.patterns-grid{
  display:grid;
  position: relative;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows:repeat(2, minmax(200px, 1fr));
  place-items:center;
  width:100%;
  min-height:300px;
  margin-top:-15%;
}
.patterns-container{
  margin:3% auto;
  text-align: center;
}
.patterns-grid img{
  grid-row:2/3;
}
.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));
    }
}