/* 
font-family: 'Acme', sans-serif;
font-family: 'Alata', sans-serif;
font-family: 'Cinzel', serif;
font-family: 'Poppins', sans-serif;
 */


 :root{
    --main-color:#1B375D;
    --secondary-color:#3AAE29;
  }
  
  body, html{
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-size:18px;
  }
  .maincontent{
    max-width:100%;
    padding:0;
    margin:0;
    background:#ececec;
  }
  .maincontent_wrapper{
    padding-top:0;
  }
  .maincontent{
    max-width:100%;
  }
  img{
    width:100%;
  }
  
  h1{
    font-size:clamp(32px, 3.5vw, 58px);
    font-family: 'Cinzel', serif; 
    font-weight:600;
  }
  h2{
    font-size:clamp(22px, 2vw, 50px);
    font-family: 'Cinzel', serif; 
    font-weight:600;
  }
  h3{
    font-size:clamp(18px, 1.6vw, 42px);
    font-family: 'Cinzel', serif; 
    font-weight:600;
  }
  p{
    font-family: 'Poppins', sans-serif;
    font-weight:200;
  }
.my-hr{
    border: 0; 
    height: 1px; 
    width:70%;
    margin:4% auto;
    text-align: center;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}
hr{
  border-top:1px solid #000;
}
 .my-header{
    text-align: center;
    max-width:1200px;
    padding:2%;
    margin:0 auto;
 }
 .highlight{
    font-weight:500;
 }
 .grid{
  display:grid;
  grid-template-columns: repeat(2, 50%);
  padding:0 3%;
}
.product-main-wrapper{
  margin-bottom:5%;
}
.features{
  max-width:1200px;
  padding:2%;
  margin:0 auto;
}
#features-list-header{
  font-size:1.4rem;
  max-width:700px;
  font-weight:300;
}
 .flex-group{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    align-items:flex-start;
    flex-wrap:wrap;
    margin:2% auto;
    max-width:1000px;
    padding:0 2%;
 }
 .flex-group img{
    max-width:100px;
 }
.flex-item{
    display:flex;
    flex-direction:column;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.flex-item img{
  max-width:75px;
}

.logo{
    margin:2%;
}
.features-list{
  padding:0 3%;
}
.features-list ul{
  margin-left:30px;
  max-width:750px;
}

.my-grid{
    display:grid;
    grid-template-columns: 40% 60%;
}
.selected-color{
    font-size:clamp(18px, 2vw, 48px);
    margin-bottom:2%;
    display:inline-block;
}
.swatches{
    place-self: center;
    padding:0 5%;
}
.colors-container{
  padding:0 3%;
  margin:2% auto;
}
.colors{
  border:1px solid black;
  height:75px;
  width:75px;
  max-width:75px;
  display:inline-block;
  cursor:pointer;
}
.color-type{
    display:block;
}
.color-options p{
  display:inline;
  max-width:50px;
}
.window{
    align-self: center;
}
.window-cp-bg{
    background-image:url('/imageserver/Reusable/paradigm23/casement-cp.png');
    position: relative;
    height:46vw;
    width:30vw;
    max-width:363px;
    max-height:755px;
    margin:0 auto;
    background-size:100%;
    background-repeat: no-repeat;
}
  .window-cp-overlay{
    background-color:#EDE3CC;
    height:100%;
    width:100%;
    mix-blend-mode: overlay;
  }

.options-container{
  padding:0 3%;
  width:100%;
  margin-bottom:3%;
}
.title{
    display:inline-block;
    margin-top:10px;
}
.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;   
}
.disclaimer{
  text-align: center;
}

/* ------------------------------------------ Media Queries -------------------------------------------------------- */
@media screen and (max-width:992px) {
    .my-grid, .grid{
        display:block;
        text-align: center;
    }
    ul li{
      list-style: none;
    }
ul{
padding:0;
}
    #features-list-header{
      font-size:1.2rem;
      max-width:100%;
      font-weight:300;
    }
}