html {
    margin:0;
    padding:0;
    color: #000;
    font-size:18px;
    box-sizing:border-box;
}
.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/vinylmax2021/product-bg-btm.png'), url('/imageserver/Reusable/vinylmax2021/product-bg-top.png');
background-position: top, bottom;
background-size: 100%;
background-repeat: no-repeat;
}

.carousel-container{
position: relative;
margin:0 auto;
left:0;
top:15%;
max-width:600px;
max-height:65%;
height:100%;
animation:animate 40s linear infinite;
background-size:cover;
background-repeat: no-repeat;
background-position: center;

}
.outer{
position:relative;
left:0;
top:0;
width:100%;
height:500px;
}

.carousel-container:hover{
animation-play-state: paused;
}
.preload{
  background-image:url('/imageserver/Reusable/vinylmax2021/newton-house1.jpg'),url('/imageserver/Reusable/vinylmax2021/newton-house2.jpg'),url('/imageserver/Reusable/vinylmax2021/newton-house3.jpg'),url('/imageserver/Reusable/vinylmax2021/newton-house4.jpg');
}
@keyframes animate {
  0%,100%{
      background-image:url('/imageserver/Reusable/vinylmax2021/newton-house1.jpg');
  }
  20%{
      background-image:url('/imageserver/Reusable/vinylmax2021/newton-house1.jpg');
  }
  25%{
      background-image:url('/imageserver/Reusable/vinylmax2021/newton-house2.jpg');
  }
  45%{
      background-image:url('/imageserver/Reusable/vinylmax2021/newton-house2.jpg');
  }
  50%{
      background-image:url('/imageserver/Reusable/vinylmax2021/newton-house3.jpg');
  }
  70%{
      background-image:url('/imageserver/Reusable/vinylmax2021/newton-house3.jpg');
  }
  75%{
      background-image:url('/imageserver/Reusable/vinylmax2021/newton-house4.jpg');
  }    
  95%{
      background-image:url('/imageserver/Reusable/vinylmax2021/newton-house4.jpg');
  }    
  /* 60%{
      background-image:url(/imageserver/Reusable/vinylmax2021/newton-house5.jpg);
  }
  75%{
      background-image:url(/imageserver/Reusable/vinylmax2021/newton-house6.jpg);
  }     */
}
.features-list{
  margin-top:-10%;
}
.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/vinylmax2021/check.png');
  position:absolute;
  left:20px;
  top:-5px;
}

.energy-list p:not(#prestige)::before{
  content:url('/imageserver/Reusable/vinylmax2021/check.png');
  position:absolute;
  left:-5px;
  top:-5px;
}
.energy-efficient img{
  float:left;
  padding:0.5em;
  clear:both;
}

.cutout-details-container{
  margin:65px auto;
  width:90%;
}
.cutout-details{
  min-width:308px;
  display:inline-block;
  position: relative;
  text-align:center;
}
.number{
  font-size:1rem;
  background:lightblue;
  border-radius:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  height:30px;
  width:30px;
  cursor:pointer;
  z-index:2;
}
.tooltip-text{
  position: absolute;
  top:30px;
  left:0;
  padding:15px;
  max-width:400px;
}
.tooltip-text-sm{
  position: absolute;
  top:40px;
  left:0;
  padding:15px;
  max-width:350px;
}
.tooltip-text-lg{
  position: absolute;
  top:30px;
  left:0;
  padding:15px;
  max-width:450px;
}
svg{
  height:250px;
  width:410px;
}
svg.small{
  height:250px;
  width:400px;
}
svg.large{
  height:275px;
  width:475px;
}
.tooltip-rotate{
  transform:rotateY(180deg);
  transform-origin:center;
}
.tooltip-noFill {
  fill: #fff;
  stroke: #1F140F;
  stroke-width: 3;
}
.tooltip-fill {
  fill: #1F140F;
  stroke: #1F140F;
  stroke-width: 1;
}

.st0{
  stroke-width:9;
}

.st1{
  stroke-width:3;
}


#num1{
  position: absolute;
  transition:.5s;
  top:-5%;
  left:12%;
}
#num1-content-container{
  position:absolute;
  width:550px;
  top:-37%;
  left:-30%;
  text-align:left; 
  display:none;
  transition: all .4s ease-out;
}
#num1:hover ~ #num1-content-container{
  transform:scale(1);
  display:block;
}

#num2{
  position: absolute;
  top:-20px;
  transition:.5s;
  right:35px;
}
#num2-content-container{
  position:absolute;
  width:550px;
  top:-36%;
  left:-32%;
  text-align:left; 
  display:none;
  transition: all .4s ease-out; 
}
#num2:hover ~ #num2-content-container{
  transform:scale(1);
  display:block;
}

#num3{
  position: absolute;
  transition:.5s;
  top:50%;
  left:10%;
}
#num3-content-container{
  position:absolute;
  width:550px;
  top:18%;
  left:-32%;
  text-align:left; 
  display:none;
  transition: all .4s ease-out; 
}
#num3:hover ~ #num3-content-container{
  transform:scale(1);
  display:block;
}



#num4{
  position: absolute;
  transition:.5s;
  bottom:0;
  left:10%;  
}
#num4-content-container{
  position:absolute;
  width:550px;
  bottom:4%;
  left:-46%;
  text-align:left; 
  display:none;
  transition: all .4s ease-out; 
}
#num4:hover ~ #num4-content-container{
  transform:scale(1);
  display:block;
}



#num5{
  position: absolute;
  transition:.5s;
  top:70%;
  left:40%;
}
#num5-content-container{
  position:absolute;
  top:35%;
  left:-23%;
  text-align:center; 
  display:none;
  transition: all .4s ease-out; 
}
#num5:hover ~ #num5-content-container{
  transform:scale(1);
  display:block;
}


#num6{
  position: absolute;
  transition:.5s;
  top:33%;
  left:60%;
}
#num6-content-container{
  position:absolute;
  width:550px;
  top:1%;
  left:-45%;
  text-align:left; 
  display:none;
  transition: all .4s ease-out; 
}
#num6:hover ~ #num6-content-container{
  transform:scale(1);
  display:block;
}


#num7{
  position: absolute;
  transition:.5s;
  top:40%;
  left:40%;
}
#num7-content-container{
  position:absolute;
  width:550px;
  top:7%;
  left:-70%;
  text-align:left; 
  display:none;
  transition: all .4s ease-out; 
}
#num7:hover ~ #num7-content-container{
  transform:scale(1);
  display:block;
}


#num8{
  position: absolute;
  transition:.5s;
  top:55%;
  left:68%;
}
#num8-content-container{
  position:absolute;
  width:550px;
  top:22%;
  left:-36%;
  text-align:left; 
  display:none;
  transition: all .4s ease-out; 
}
#num8:hover ~ #num8-content-container{
  transform:scale(1);
  display:block;
}


#num9{
  position: absolute;
  transition:.5s;
  bottom:4%;
  left:45%;
}
#num9-content-container{
  position:absolute;
  bottom:5%;
  left:-17%;
  text-align:center; 
  display:none;
  transition: all .4s ease-out; 
}
#num9:hover ~ #num9-content-container{
  transform:scale(1);
  display:block;
}


#num10{
  position: absolute;
  transition:.5s;
  top:90%;
  left:75%;
}
#num10-content-container{
  position:absolute;
  width:550px;
  top:57%;
  left:-30%;
  text-align:left; 
  display:none;
  transition: all .4s ease-out; 
}
#num10:hover ~ #num10-content-container{
  transform:scale(1);
  display:block;
}


#num11{
  position: absolute;
  top:10%;
  left:65%;
}
#num11-content-container{
  position:absolute;
  width:550px;
  top:-23%;
  left:-39%;
  text-align:left; 
  display:none;
  transition: all .4s ease-out; 
}
#num11:hover ~ #num11-content-container{
  transform:scale(1);
  display:block;
} 




.sibling-fade { visibility: hidden; }

.sibling-fade > * { visibility: visible; }

.sibling-fade > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }

.sibling-fade:hover .number  { opacity: 0; transform: scale(0.9); }

.sibling-fade .number:hover  { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }


.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;
    
}

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));
    }
}