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:420px;
    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:420px;
    box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
  -webkit-box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
  -moz-box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
    }
    
    .carousel-container:hover{
    animation-play-state: paused;
    }
.preload{
  background-image:url('/imageserver/Reusable/vinylmax2021/trends5-min.png'),url('/imageserver/Reusable/vinylmax2021/trends2-min.png'),url('/imageserver/Reusable/vinylmax2021/trends3-min.png'),url('/imageserver/Reusable/vinylmax2021/trends4-min.png');
}
@keyframes animate {
  0%,100%{
      background-image:url('/imageserver/Reusable/vinylmax2021/trends5-min.png');    
    }
    20%{
      background-image:url('/imageserver/Reusable/vinylmax2021/trends5-min.png');    
    }
    25%{
      background-image:url('/imageserver/Reusable/vinylmax2021/trends2-min.png');
    }
    45%{
      background-image:url('/imageserver/Reusable/vinylmax2021/trends2-min.png');  
    }
    50%{
      background-image:url('/imageserver/Reusable/vinylmax2021/trends3-min.png');
    }
    70%{
      background-image:url('/imageserver/Reusable/vinylmax2021/trends3-min.png');  
    }
    75%{
      background-image:url('/imageserver/Reusable/vinylmax2021/trends4-min.png');  
    }    
    95%{
      background-image:url('/imageserver/Reusable/vinylmax2021/trends4-min.png');  
    }    
}  .features-list{
    margin-top:-15%;
}
  .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{
    /* float:right; */
    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:0;
    left:12%;
  }
  #num1-content-container{
    position:absolute;
    top:-33%;
    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;
    bottom:13%;
    transition:.5s;
    right:20%;
  }
  #num2-content-container{
    position:absolute;
    bottom:15%;
    left:-40%;
    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;
    top:16%;
    left:-34%;
    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;
    bottom:1%;
    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:40%;
    left:40%;
  }
  #num5-content-container{
    position:absolute;
    top:5%;
    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:42%;
    left:60%;
  }
  #num6-content-container{
    position:absolute;
    top:9%;
    left:-50%;
    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:33%;
    left:60%;
  }
  #num7-content-container{
    position:absolute;
    top:0;
    left:-48%;
    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;
    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;
    top:4%;
    left:45%;
  }
  #num9-content-container{
    position:absolute;
    top:-30%;
    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;
    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;
    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; }
  
  .brochure{
      margin-top:10%;
  }
  
  .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:flex;
  position: relative;
  justify-content:center;
  width:100%;
  margin-top:2%;
  min-height:300px;
}
  .iglass-header{
    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:275px;
  padding:0 2%;
  height:400px;
  margin:10px 30px;
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  align-content: flex-start;
  border:1px solid black
}
  .glass p{
    display:block;
width:100%;
  }
  .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  screen and (max-width:992px) {
    .features-list{
    margin-top:2%;
  }
}

@media  screen and (max-width:800px) {
    
    #prestige{
      margin-left:-45px;
    }
}
@media  screen and (max-width:600px) {
      .cutout{
        display:none;
      } 
    .energy-efficient img{
      float:none;
    }
    .outer{
    height:220px;
   
    }
}