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

.html ,body{
    font-size:18px !important;
}

.row{
    margin:0 !important;
}
.product-box .col-md-3{
    padding:0;
}
h1, h2, h3, h4, a{
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1.1px;
}
p, h5{
    font-family: 'Poppins', sans-serif;
}
a:focus{
    outline:0;
}
 .nav-link.active {
    color: #ececec;
    background-color: transparent !important;
    border: none ;
  }
  .nav-link{
      color:#ececec !important;
      padding:0;
  }
  .nav-link:hover{
      border:none;
  }
.nav > li{
    display:flex;
  }
  .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
       background-color: transparent !important; 
       border:none !important; 
  }
  .nav > li > a:hover, .nav > li > a:focus {
      text-decoration: none;
      background-color: transparent;
  }
  .myButton {
    position: relative;
    margin: 20px auto;
	background-color:#f2dfce;
	border-radius:28px;
	border:1px solid #402c1a;
    display:block;
    max-width:230px;
	cursor:pointer;
	color:#402c1a;
    font-family: 'Acme', sans-serif;
	font-size:1.2rem;
    letter-spacing:1.2px;
	padding:14px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #fff;
    text-align:center;
    
}
.myButton:hover {
	background-color:#402c1a;
    color:#fff;
    text-shadow:0px 0px 0px #fff;
    font-weight:300;
}
.myButton:active {
	position:relative;
	top:1px;
    background:transparent;
}

.row{
    margin:0;
    padding:0;
}


.hero-container{
    position: relative;
}

.hero-text-box{
    position: absolute;
    bottom:0;
    left:0;
    background:rgba(0,0,0,0.6);
    padding:3% 5%;
    color:#fff;
}
.main-header{
    text-align: center;
    padding:5% 0;
    text-align: center;
    position:relative;
    overflow:hidden; 
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}
.main-header:before {
    content: ""; 
    position:absolute; 
    z-index: 1; 
    width:96%;  
    top: -10px; 
    height: 10px; 
    left: 2%; 
    border-radius: 100px / 5px; 
    box-shadow:0 0 18px rgba(0,0,0,0.6); 
    }
    .main-header:after {
    content: "";
    position:absolute;
    z-index: 1;
    width:96%; 
    bottom: -10px;
    height: 10px;
    left: 2%;
    border-radius: 100px / 5px;
    box-shadow:0 0 18px rgba(0,0,0,0.6);
    }

img{
    width:100%;
    
}
  .main-header .text-box{
      height:100%;
   
      text-align:center;
      display:flex;
      flex-direction: column;
      align-items:stretch;
      justify-content: start;
      margin-top:15px;
  }
  .main-banner{
    background-image:radial-gradient(circle farthest-side, rgba(0,0,0,.5), rgba(0,0,0,0.3)), url('/imageserver/Reusable/pella-windows2021/defender-series-feature-banner-kitchen-min.png');     background-attachment: fixed;
      padding:8% 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    
      display:flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
  }

 
  .main-banner-container{
      width:90%;
      height:100%;
      margin:0 auto;
  }
  .main-banner-text{
      display:grid;
      height:100%;
      grid-gap:30px;
      grid-template-columns: repeat(2, minmax(400px, 1fr));
      color:#ececec;
      justify-content: center;
      align-items: flex-start;
      text-align: center;
  }
  .main-banner-text .box{
    flex: 300px 0 1;
    text-align: center;
    padding:0 10%;
  }
.options-wrapper{
    margin:0 auto;
}

.tab-column{
    width:100%;   
}
.nav{
    align-items:center;
}

.tab-column .nav .tab{
    width:25%;
    height:100px;
    border:.5px solid black;
    border-bottom:0;
    display:flex;
    flex-direction: column;
    background:url('/imageserver/Reusable/pella-windows2021/frame-top.png');
    text-align: center;
    background-size:100% 25%;
    background-repeat:no-repeat;
    background-blend-mode: soft-light;
    background-color:#A69C86;
    justify-content: space-around;
    align-items:center;
    position: relative;
    padding:0 10px;
}

.tab::after,
.tab::before {
  position: absolute; 
  content: '';
  transition:.5s;
  z-index: -1;
  height: 50%;
  width: 52%;
  background: #A69C86;
  bottom: 0;
}
.tab::before{
    left:-1px;
  }
  .tab::after{
    right:-1px;
  }
  .activeTab::before {
    left: .5%;
    bottom:-1.1vw;
    width: 49.3%;
    transform: skew(10deg) rotate(10deg);
  }
  .activeTab::after {
    right: .5%;
    bottom:-1.1vw;
    width: 49.3%;
    transform: skew(-10deg) rotate(-10deg);
  }


.tab a{
    font-size:1.5rem;
    color:#ececec;
    text-decoration: none; 
}
.product-box{
    min-height:100vh;
    background-position: center;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5); 
box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2);
}
.FeatureDescript{
    padding:3vw 0;
}
.colors{
    padding:0 2vw 0 8vw;
}
#myImage2{
    width:100%;
    max-width:300px;
    max-height:300px;
    margin:0 auto;
    text-align:center;
}
#contImage2{
    width:100%;
    max-width:300px;
    max-height:300px;
    margin:0 auto;
}
.window-color{
    display:inline-block;
}
.window-color img{
    border:1px solid black;
}
.details-tab ul li{
    margin:7px 0 0 20px;
}
.details-img{
    height:400px;
    text-align:center;
}

.window-style{
    display:inline-block;
   
    margin:5px;
}
.closing{
    background:url('/imageserver/Reusable/pella-windows2021/defender-closing.png');
    background-repeat: no-repeat;
    background-size:cover;
}
.closing-box{
    position: relative;
    padding:12% 5%;
    color:#ececec;
    background:rgba(0,0,0,0.5);
}
.closing-box-text{
    position: relative;
    max-width:600px;
    height:100%;
    width:100%;
    
}
.closing-box-text::after{
    content:"";
    position: absolute;
    top:-2%;
    left:-3%;
    height:110%;
    width:2px;
    border-left:2px solid #FDDE01;
}
.colors-bottom{
    margin-top:40px;
}

.whyChoose::after{
    content:"";
    position: absolute;
    top:0;
    left:-1%;
    height:80%;
    width:2px;
    border-left:2px solid #FDDE01;
}

.changeStyleGroup{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    align-items:center;
    text-align:center;
    padding:0 5% 2%;
    
}

.underline{
    position:relative;
}
.underline::after{
    content:"";
    position: absolute;
    bottom:5%;
    left:0;
    width:100%;
    height:3px;
    background:#FDDE01;
    animation: underline .3s linear; 
}
@keyframes underline {
    0%{
        transform:scaleX(0);
    }
}

#traditionalBtn{
    cursor:pointer;
}
#contemporaryBtn{
    cursor:pointer;
}
.visualizer{
    padding:0 5vw 0 8vw;
}
  .inspiration-img{
      width:100%;
      max-width:300px;
      text-align: center;
      filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
      margin:40px auto 0;
  }
  #window-combo-options{
      width:100%;
      text-align:center;
  }
#jq-tabs{
    padding-top:50px;
}

  #jq-tabs ul li a{
    color:#000;
    text-decoration: none;
    font-size:1.3rem;
    text-align: center;
  }
  #jq-tabs ul li a:hover{
    border-bottom:2px solid #FDDE01;
  }
  #jq-tabs ul li a:focus{
    border-bottom:2px solid #FDDE01;
  }
  #jq-tabs ul li{
    display:inline-block;
    text-align: center;
    /* margin:0 30px; */
    width:260px;
  }
  #jq-tabs-hr{
    border:2px solid #000;
    width:80%;
    margin:0 auto;
  }
 
#jq-combos{
    padding:0 20px;
    text-align:center;
  }
  #jq-patterns{
    padding:0 20px;
    text-align:center;
  }
  #jq-shapes{
    padding:0 20px;
    text-align:center;
  }
  #jq-profiles{
    padding:0 20px;
    text-align:center;
  }
  .combo-img{
    width:100%;
    max-height:150px;
    text-align: center;
    max-width:200px;
   
  }
  .pattern-img{
    width:100%;
    margin:0 auto;
    max-width:100px;
    max-height:150px;
    text-align: center;
  }
  .pattern-img-lg{
    width:100%;
    max-width:155px;
    max-height:150px;
    text-align: center;
    margin-left:13px;
  }
  #jq-tabs .col-lg-2{
    height:200px;
  }
  .options-disclaimer{
    text-align:center;
    margin:20px 0 20px 40px;
    font-weight:500;
    letter-spacing:.1rem;
  }
  #jq-profiles img{
    width:100%;
    max-width:125px;
  }
  #inspiration p{
  max-width:600px;
}
.inspiration-btn{
    float:left;
}
/* ====================================== Media Queries =========================================== */

@media screen and (max-width:1100px){
    .nav{
        min-height: auto;
    }
    .product-box .col-md-3{
        width:100%;
        float:none;
    }
    .product-box .col-md-9{
        width:100%;
        float:none;
    }
    
    .main-banner-text{
        display:block;
    }
    .colors-align{
        text-align: center;
    }
    .profiles-align{
        text-align: center;
    }
  
    .tab a{
        font-size:1rem;
    }
}
@media screen and (max-width:992px) {
    
 .tab-column{
        display:block;
        justify-content:center;
        align-items:stretch;
        width:100%;
    }  
    #inspiration{
   text-align:center;
}
   #inspiration p{
   max-width:100%;
}
   .inspiration-btn{
    text-align:center;
    float:none;
}
}
@media screen and (max-width:800px){
    #myImage2{
        width:100%;
        max-width:200px;
        max-height:300px;
        margin:0 auto;
    }
    #contImage2{
        width:100%;
        max-width:200px;
        max-height:300px;
        margin:0 auto;
    }
    .product-box{
        height:100%;
    }
}

@media screen and (max-width:700px){

    .options-wrapper{
        width:100%;
    }
    .product-box{
        width:100%;
    }
    .main-banner{
        height:100%;
    }
    .main-banner-container{
        width:100%;
    }
}
@media screen and (max-width:600px){
    .tab-column .nav .tab{
        width:100%;
        height:50px;
    }
    .tab::after,
    .tab::before {
        display: none;
    } 

}
@media screen and (max-width:400px){
    
}