.maincontent{
  max-width:100%;
  background:#ececec;
}
html {
    margin:0;
    padding:0;
    color: #000;
    font-size:18px;
    background:#ececec;
}
 h1 {
    font-size:3.2rem;
    font-family: 'Arvo', serif;
}
 h2 {
    font-size:2.5rem;
    font-family: 'Arvo', serif;
}
 h3 {
    font-size:2rem;
    font-family: 'Arvo', serif;
}
 h4 {
    font-size:1.5rem;
    font-family: 'Arvo', serif;
}
 h5{
    font-size:1.2rem;
    font-family: 'Raleway', sans-serif;
}
 p{
    font-size:1rem;
    font-family: 'Raleway', sans-serif;
}

.rButton-dark {
	background-color:#B4BAB1;
    text-transform: uppercase;
	border-radius:28px;
    display:inline;
	border:1px solid #996E42;
	cursor:pointer;
	color: #996E42;
    font-family: 'Arvo', serif;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
    margin:0;
    z-index:10;
    /* max-width:120px; */
}
.rButton-dark:hover {
	background-color:#415437;
    color:white;
}
.rButton-dark:active {
	position:relative;
}



.col-left50{
  width:49%;
  float:left;
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  margin:0 auto;
  justify-content:space-around;
  max-width:750px;
}
.col-right50{
  width:49%;
  float:right;
overflow-x:hidden;
}
.top-section{
  padding:2% 4%;
  background:url(/imageserver/Reusable/azek2021/azek-type-min.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center right;
}
.landmark-header{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content:space-around;
  align-content:center;
  position: relative;

}
.colors{
  position: relative;
  margin-top:6%;
}

.header-text{
  max-width:1000px;
  clear:right;
  display:block;
}
.product-features{
  margin:2% 4%;
}
.shape-playground-1 {
	float: left;
	margin: 30px 0 0 1px;
	shape-outside: content-box polygon( 0 0, 73.1% -1.8%, 93.3% 7.5%, 95.3% 64.5%, 82.1% 97%, 69.7% 120.5%, 0 100% );
}

.selected-color {
  margin-top:20px;
}

.product-header{
  margin-top:3%;
  height:200px;
}

.colors{
  display:flex;
  flex-wrap:wrap;
}

.colors p{
  margin:5px;
}

#product-list{
  list-style: none;
  margin:0;
  padding:0;
}


.product-right-col{
  position:relative;
  width:50%;
  float:right;
}

.product-left-col{
  position:relative;
  width:50%;
  float:left;
}


.product-section{
  padding:0 5%;
  margin:0;
}

.product-features{
  min-height:600px;
}

 .play-lifetime{
      transform: translateX(600px) scale(0);
      -webkit-animation: anim 3.5s linear 2s  1 forwards;
    animation: anim 1.5s linear 1s  1 forwards;
  }
  
  .play-year-50{
      transform: translateX(600px) scale(0);
      -webkit-animation: anim 3.5s linear 2s  1 forwards;
    animation: anim 1.5s linear 1.5s  1 forwards;
  }
  
  .play-armor {
      transform: translateX(600px) scale(0);
      -webkit-animation: anim 3.5s linear 2s  1 forwards;
    animation: anim 1.5s linear .5s  1 forwards;
  }

@-webkit-keyframes anim {
    0% {
     
    }
    
    100% {
      transform: translateX(0) scale(1);
      
    }
  }
@media screen and (max-width:1200px) {
  .section2-left-text h5{
    padding: 10px 10px 15px 0; 
  }
  .section2-left-text ul{
    max-width:100%;
  }
  .section2-left-img{
    grid-column: 2/5;
    grid-row:5/8;
  }
  .multi-width-text{
    grid-column: 1/-1;
    grid-row:8/10
  }
  .multi-width-list{
    grid-row:10/12;
    grid-column: 1/-1;
    max-width:1550px;
  }
  .multi-planks{
    grid-row:12/14;
    grid-column: 2/5;
  }
  .multi-planks img{
    max-width:90%;
  }
  .multi-width-list ul{
    padding:0;
    margin:0;
  }
  .collage-right{
    grid-column:1/5;
    grid-row:10/15;
    
  } 
  .collage-logo{
    grid-row:15/17;
  }
}



@media screen and (max-width: 992px) {
  html{
   font-size:14px;
  }
    .shape-playground-1 {
	float: none;
}
     .hero-bg{
       grid-column:1 / -1;
       height:45vh;
  }
     .hero-header{
       grid-column:2/5;
     } 
     .header-logo{
       height:45vh;
     }
     .hero-grain{
      grid-column: 1/-1;
      grid-row:5/7 ;
      width:100%;
      text-align: center;  
      padding:8px 0 15px 0;
      max-width:100%;
    }
    #samples{
      max-width:300px;
      bottom:50%;
    }
    .hero-grain-text p{
      margin:0;
    }
    .grain-btn{
      grid-column: auto;
      grid-row:2
    }
    .section2-left-text ul{
      max-width:1000px;
    }
    .section2-left-col{
      width:100%;
      float:none;
    }
    .section2-right-col{
      width:100%;
      float:none;
    }
    .section2-collage-grid{
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:center;
    }
    .col-left50{
      width:98%;
      float:none;
    }
    .col-right50{
      width:98%;
      float:none;
    }
     .top-section{
        text-align:center;
        background-position: bottom;
      }
        .shape-playground-1 {
        float: none;
            display:grid;
            margin:0 auto;
            padding:0 5%;
      }
    
}
 
  @media (max-width: 768px) {
      .hero-bg{
        height:35vh;
      }
      .card-section{
        height:1300px;
      }
      .hero-header{
        display:none;
      }
      #samples{
        display:none;
      }
      .hero-grain{
        grid-row:6/8;
        padding:25px 0; 
      }  
  }

  @media screen and (max-width: 600px) {
   html{
     font-size:13px;
   } 
   .hero-bg{
    grid-row:1/3; 
    height:150px; 
  }
  .rButton{
    margin:10px 0;
    padding:10px 20px;
  }
  .hero-grain{
    grid-row:2/3;
    padding:10px 0;
  }
    .hero-grain-text p{
      display:none;
    }
    .header-logo{
      border:0;
    }
  }
  @media screen and (max-width: 400px) {
    .hero-grain-text{
      display:none;
    }   
  }