.maincontent{
    max-width:100%;
  }
  html {
      margin:0;
      padding:0;
      font-size:18px;
      box-sizing:border-box;
  }
  
   h1 {
      font-size:3.2rem;
      font-family: 'Play', sans-serif;}
   h2 {
      font-size:2.5rem;
      font-family: 'Play', sans-serif;}
   h3 {
      font-size:1.5rem;
      font-family: 'Play', sans-serif;}
   h4 {
      font-size:1.3rem;
      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 14px -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 {
      background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
      background-color:#408c99;
  }
  .rButton:active {
      position:relative;
      top:1px;
  }
  
  
  .section1{
    padding:0 0 7%;
  }
  
  .dropdown-menu {
      width: 600px !important;
      height: auto;
    padding: 20px;
    }
    .color-options p{
        border:2px solid white;
    }
    .logo{
    display:flex;
    justify-content: space-around;
    flex-direction: row;
    max-width:50%;
    padding-top:3%;
    }
    
    /* .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:20%;
      background-image:url('/imageserver/Reusable/edco-roof2021/infiniti-shake-min.png');
      margin-top:20px;
      max-width:600px;
      max-height:400px;
      min-height:400px;
      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:600px;
      height:400px;
      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);
      }
    .color-options img{
        width:100%;
        max-width:75px;
    }
    
    .carousel-container:hover{
    animation-play-state: paused;
    }
    .preload{
      background-image:url('/imageserver/Reusable/edco-roof2021/ultramaxx-featureshot3-min.jpg'),url('/imageserver/Reusable/edco-roof2021/ultramaxx-featureshot4-min.jpg'),url('/imageserver/Reusable/edco-roof2021/Alside_UltraMaxx-min.jpg'),url('/imageserver/Reusable/edco-roof2021/featureshot-4-min.jpg');
    }
    @keyframes animate {
      0%,100%{
          background-image:url('/imageserver/Reusable/edco-roof2021/ultramaxx-featureshot3-min.jpg');    
        }
        20%{
          background-image:url('/imageserver/Reusable/edco-roof2021/ultramaxx-featureshot3-min.jpg');    
        }
        25%{
          background-image:url('/imageserver/Reusable/edco-roof2021/ultramaxx-featureshot4-min.jpg');
        }
        45%{
          background-image:url('/imageserver/Reusable/edco-roof2021/ultramaxx-featureshot4-min.jpg');  
        }
        50%{
          background-image:url('/imageserver/Reusable/edco-roof2021/Alside_UltraMaxx-min.jpg');
        }
        70%{
          background-image:url('/imageserver/Reusable/edco-roof2021/Alside_UltraMaxx-min.jpg');  
        }
        75%{
          background-image:url('/imageserver/Reusable/edco-roof2021/featureshot-4-min.jpg');  
        }    
        95%{
          background-image:url('/imageserver/Reusable/edco-roof2021/featureshot-4-min.jpg');  
        }    
    }
    .features-list {
      margin-left:30px;
      max-width:850px;
    }
    
    .laminated-colors{
      margin-top:4%;
      display:flex;
    }
    .laminated-colors img{  
      display:inline;
    }
    .colors-container{
      padding:4% 3%;
    }
    .colors{
      border:1px solid black;
      display:inline-block;
      cursor:pointer;
    }
    .color-box{
      height:75px;
       width:75px;
    }
    .white{
      background:#fff;
    }
    .beige{
      background:#D7D3C4;
    }
    .black{
      background:#000;
    }
    .bronze{
      background:#37322A;
    }
    .terra{
      background:#725B46;
    }
    .khaki{
      background:#AA9884;
    }
    .clay{
      background:#CCC0AA;
    }
    .sand{
      background:#F3E3BE;
    }
    .red{
      background:#832E20;
    }
    .green{
      background:#365342;
    }
    .silver{
      background:#8D9091;
    }
    .grey{
      background:#C0C3BB;
    }
    .ww{
      background:url('/imageserver/Reusable/edco-roof2021/whitewoodgrain-min.jpg');
      background-size:75%;
    }
    .mw{
      background:url('/imageserver/Reusable/edco-roof2021/richmaplewoodgrain-min.jpg');
      background-size:75%;
    }
    .low{
      background:url('/imageserver/Reusable/edco-roof2021/lightoakwoodgrain-min.jpg');
      background-size:75%;
    }
    .dow{
      background:url('/imageserver/Reusable/edco-roof2021/darkoak-min.jpg');
      background-size:75%;
    }
    .fw{
      background:url('/imageserver/Reusable/edco-roof2021/foxwood-min.jpg');
      background-size:75%;
    }
    .cw{
      background:url('/imageserver/Reusable/edco-roof2021/cherry-min.jpg');
      background-size:75%;
    }
    .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;
    }
    
    #prestige{
      margin-left:0px;
    }
    
    .energy-efficient img{
      float:left;
      padding:0.5em;
      clear:both;
    }
    
    .brochure{
        margin-top:10%;
    }
    
    .options-container{
      padding:0 3%;
      width:100%;
    }
    
    .collapse{
      /* text-align:center; */
      margin:4% 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:3%;
      min-height:300px;
      justify-items:center;
    }
    .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: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  screen and (max-width:600px) {
       .carousel-container{
    width:300px;
    max-height:200px;
     min-height:200px;
  
    }
    .outer{
    width:300px;
    height:200px;
    }
  }