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

img {
    width: 100%;
}
.maincontent{
    max-width:100%;
  }
 
  .row{
      margin:0;
      padding:0;
  }

.title{
    font-weight:700;
    /* color:#286090; */
}
.ital{
    font-style: italic;
}
.name{
    color:#4D7BA2;
    font-weight:700;
}
.highlight{
    position: relative;
    transform:scale(1.2);
    color:#B86235;
    border-bottom: 1px solid #B86235;
    transition:.3s;
}

/* ============== */
.my-header{
  text-align: center;
  margin-block:20px;
}
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.exterior-colors{
  display:flex;
  flex-direction:row;
  justify-content: space-evenly;
  flex-wrap:wrap;
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
#myImage{
  max-width:400px;
}
.flex-group-options{
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap:wrap;
  cursor:pointer;
  padding-top:10px;
}
.flex-item{
  text-align: center;
  display:inline-grid;
  color:#000;
  margin-block:10px;
  width:105px;
}
.flex-item p{
  font-size:.8rem;
}
.colors .flex-item{
  cursor:pointer;
}
.color-circle{
  height:75px;
  width:75px;
  border-radius: 50%;
  border:1px solid #000;
  margin:0 auto;
  /* padding:5%; */
  overflow:hidden;
}

.grill-image-box img{
  max-width:93px;
}
.hardware img{
  max-width:100px;
}
.glass-option{
  text-align:left;
  border:2px solid #000;
  padding:10px;
  margin-block:10px;
  /* max-height:75px; */
}
.glass-flex-group{
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap:wrap;
}
.bay-flex-group{
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap:wrap;
}
.bay-flex-item{
  text-align: center;
  max-width:300px;
}
.colors p{
  font-size:.8rem;
}
.white{
  background-color:#F3EFEA;
}
.black{
  background-color:#323433;
}
.dbronze{
  background-color:#49403F;
}
.sandtone{
  background-color:#AFA297;
}
.terratone{
  background-color:#776A61;
}
.fgreen{
  background-color:#284B41;
}
.canvas{
  background-color:#F9EFD8;
}
.pgrass{
  background-color:#CFB498;
}
.dgray{
  background-color:#B9BBB9;
}
.cbean{
  background-color:#614C42;
}
.rrock{
  background-color:#80514A;
}
.bbark{
  background-color:#F6F8EA;
}
.primed{
  background-color:#D9D9C3;
}
.abalone{
  background-color:#E9E3DE;
}
.bwhite{
  background-color:#EEE8D8;
}
.msyrup{
  background-color:#F9EAC9;
}
.hgold{
  background-color:#F4D9A7;
}
.flagstone{
  background-color:#DBD1C0;
}
.ptan{
  background-color:#A69788;
}
.caramel{
  background-color:#A18578;
}
.hchocolate{
  background-color:#715E51;
}
.bourbon{
  background-color:#644E33;
}
.acorn{
  background-color:#5D4C37;
}
.coffee{
  background-color:#604739;
}
.sbronze{
  background-color:#4B443E;
}
.ccanyon{
  background-color:#954335;
}
.cardinal{
  background-color:#CF1B2E;
}
.bcherry{
  background-color:#BD1F25;
}
.fered{
  background-color:#000000;
}
.ctoast{
  background-color:#682226;
}
.olive{
  background-color:#8F9B87;
}
.sage{
  background-color:#80815F;
}
.bgreen{
  background-color:#526D50;
}
.moss{
  background-color:#504D3A;
}
.mgreen{
  background-color:#0D3B37;
}
.spearmint{
  background-color:#CCE9E5;
}
.aquamarine{
  background-color:#7ABFC4;
}
.patina{
  background-color:#298884;
}
.skyblue{
  background-color:#B3CED7;
}
.ctryblue{
  background-color:#7995A1;
}
.bdenim{
  background-color:#618EA3;
}
.wblue{
  background-color:#5F8DA6;
}
.cblue{
  background-color:#BEBFB8;
}
.slate{
  background-color:#536768;
}
.mblue{
  background-color:#185660;
}
.sblue{
  background-color:#134465;
}
.hmist{
  background-color:#A09FA3;
}
.ypewter{
  background-color:#7C7F85;
}
.sgray{
  background-color:#81817D;
}
.mgray{
  background-color:#766E6D;
}
.darkash{
  background-color:#514C50;
}
.clanodized{
  background-color:#DBDEDF;
}
.chanodized{
  background-color:#C8BC9E;
}
.lbanodized{
  background-color:#9B814C;
}
.mbanodized{
  background-color:#9B751C;
}
.coanodized{
  background-color:#8A5A4A;
}
.dbanodized{
  background-color:#543B28;
}
.banodized{
  background-color:#323333;
}
.sanodized{
  background-color:#BEBFB8;
}
.glass .glass-option{
  max-width:500px;
}
/* =========== */
.colors .flex-group{
  border-top:1px solid #000;
}

.flex-group-options{
  border-top:1px solid #000;
}
.active{
  color:#B86235 !important;
  border-bottom:1px solid #B86235;
}
.showSingle:hover{
    text-decoration:none;
    cursor:pointer;
    transition:.3s;
    border-bottom:1px solid #286090;
}
.showSingle{
  transition:.3s;
    margin:5px 20px;
    color:#286090;
    font-size:1.4rem;
    min-height:40px;
}
.showSingleCase{
  transition:.3s;
    margin:5px 20px;
    color:#286090;
    font-size:1.4rem;
    height:40px;
  }
  .showSingleCase:hover{
  cursor:pointer;

}
.showSingleOption{
  transition:.3s;
  color:#286090;
}
.showSingleOption:hover{
  transition:.3s;
  cursor:pointer;
  border-bottom:1px solid #286090;
}
.divider-p{
    color:#000; 
    font-weight:500;
    text-align:center;
    font-size:22px;
    max-width:80%;
    margin:75px auto;
}

.divider-decoration{
    position: relative;
    width:220px;
    height:50px;
}
.divider-decoration::before{
    position: absolute;
    content:"";
    background:url('/imageserver/Reusable/viwinco-windows21/fancy-dividerx150Y.png');
    background-size:100%;
    background-repeat:no-repeat;
    top:30%;
    width:220px;
    height:15px;
}

.fancy-divider{
    text-align:center;
    margin:100px 0;
}

#product-header{
    margin:5% 10% 0;
    position: relative;
    text-align:right;
}

  .section2{
      padding:0 2%;
      position: relative;
  }
  .sec2-title-top{
      background-color:#fcf8e3;
      position: absolute;
      top:-5%;
      left:5%;
      min-height:75px;
      width:30vw;
      color:#286090;
      padding:15px 0 15px 35px;
  }
  .sec2-title-btm{
    background-color:#286090;
    /* position: absolute; */
    margin:10% 0 0 -10%;
    width:80%;
    color:#fcf8e3;
    padding:15px 0 15px 35px;
}
  .sec2-grid{
      max-width:1600px;
      margin:3% auto;
      display:grid;
      gap:30px;
      grid-template-columns:1fr 1fr;
  }
  .sec2-grid-img{
      text-align:center;
      
  }
  .install-grid{
    display:grid;
    grid-template-columns: 1fr .5fr 2fr;
    gap:2%;
}
#edgemont, #cambridge{
    width:45%;
    min-width:400px;
}

  #main-img{
    max-width:650px;
    -webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.59); 
box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.59);
  }
  .available-window-styles {
    margin:30px auto;
    text-align:center;
  }
  .menu{
    padding:1.5% 8%;
    background-color: #f5f5f5;
    border-top:1px solid #000;
    border-bottom:1px solid #000;

  }
  .available-window-styles ul{
      display:flex;
      flex-direction:row;
      justify-content: flex-start;
      flex-wrap:wrap;
      
    }
    .available-window-styles ul li{
      min-width:200px;
      margin:3px 15px;
      list-style-type:none;

  }
  
  
  .details-list-title{
      font-weight:700;
      position: relative;
      display:inline-block;
      margin-top:20px;
  }
  .details-list-title::before{
      position: absolute;
      content:"";
      top:50%;
      right:-25px;
      height:2px;
      width:20px;
      background:#B86235;
  }
 
  .window-styles-link{
      position: relative;
      display:block;
  }
  .window-styles-link::before{
      position: absolute;
      content:"";
      background:url('/imageserver/Reusable/viwinco-windows21/check-blue.png');
      background-size:30px;
      background-repeat: no-repeat;
      top:-5px;
      left:-30px;
      height:40px;
      width:50px;
  }
  .sec2-grid-text p{
      margin-left:8px;
  }

  .sec3-header{
    background:linear-gradient(rgba(255,255,255,1)0%,rgba(255,255,255,.6)50%, rgba(255,255,255,1)100%),url('/imageserver/Reusable/andersen-windows22/100-center.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
    padding:7% 10%;
    color:#434E6E; 
   
}
#header-h3-top{
    display:inline;
    position: relative;
    font-weight:500;
    text-transform:uppercase;
    max-width:700px;
    
}
#header-h3-top::before{
    display:inline;
    position: absolute;
      content:"";
      top:50%;
      right:-27%;
      height:3px;
      width:25%;
      background:#B86235;
}
#header-h3-btm{
    position: relative;
    display:inline;
    float:right;
    font-weight:500;
    text-transform:uppercase;
}
#header-h3-btm::before{
    display:inline;
    position: absolute;
      content:"";
      top:50%;
      left:-27%;
      height:3px;
      width:25%;
      background:#B86235;
}
.sec3-grid{
    display:grid;
    grid-template-columns: 2fr  4fr;
    max-width:1500px;
    padding:0 4%;
    margin:25px auto;
}
.sec3-grid-bay{
    display:grid;
    grid-template-columns: 3fr  3fr;
    max-width:1500px;
    padding:0 4%;
    margin:25px auto;
}
.sec3-grid-left{
    grid-column: 1/2;
    grid-row:1/2;
    /* place-self:center; */
    
}
.sec3-grid-left img{
    max-width:500px;
}
#bay{
  max-width:600px;
}
.sec3-grid-right-text{
    grid-column: 2/4;
    grid-row:1/2;
    align-self:flex-start;
    justify-self: center;
    max-width:700px;
    margin-top:35px;
    padding-inline:2%;
}

.sec3-grid-icons{
    margin:30px auto 100px;
    font-weight:800;
}
.sec3-grid-icons .menu{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-evenly;
}
#targetDiv-section{
   margin:50px 0 100px;
   min-height:465px;
   overflow:hidden;
}
.targetDiv{
  min-height:465px;
}
.product-image{
    position: relative;
    text-align:center;
}
.install-type-details-text{
    padding:0 1%;
    margin:0 auto;
    /* width:90%; */
    /* max-width:1600px; */
}
.type-options-grid{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    flex-wrap:wrap;
}
.type-options-grid div{
    /* min-width:600px; */
    margin:0 50px;
}
.colors-img{
    max-width:400px;
    max-height:350px;
}

.glass{
  padding-inline:4%;
}

@media screen and (max-width:1100px) {
    .section2{
        margin:15% 0 0;
    }
    .sec2-title-top{
        background-color:#fcf8e3;
        position: absolute;
        top:-5%;
        left:5%;
        min-height:75px;
        width:60%;
    }
    .sec2-title-btm{
        background-color:#286090;
        /* position: absolute; */
        margin:10% 0 0 0;
        width:80%;
        color:#fcf8e3;
        padding:15px 0 15px 35px;
    }
    .sec2-grid{
        max-width:1600px;
        margin:6% auto;
        display:block;
        gap:30px;
        grid-template-columns:1fr 1fr;
    }
}
@media screen and (max-width:992px) {
    .sec3-grid{
        display:block;
    }
    #targetDiv-section{
        height:auto;
     }
     .sec3-grid-bay{
      display:block;
  }
}

@media screen and (max-width:900px) {
    #header-h3-top{
        display:block;
        text-align:center;        
    }
    #header-h3-top::before{
          height:0px;
    }
    #header-h3-btm{
        display:block;
        text-align:center;
        float:none;
    }
    #header-h3-btm::before{
          height:0px;
    }
    .sec3-header{
        padding:1% ;
    }
.install-type-details-text {
    padding: 0;
}
#product-header::before{
    width:0;
}
}
@media screen and (max-width:768px) {
    .sec2-title-top{
        width:80vw;
    }
    #product-header{
        margin:5% 0;
        text-align:center;
    }
}