.maincontent{
  max-width:100%;
  background:#ececec;
}

.reusable,p,a{
font-size:18px;
}
.rButton {
	background-color:transparent;
    text-transform: uppercase;
	border-radius:2em;
    display:inline;
	border:1px solid #B4BAB1;
	cursor:pointer;
	color:#B4BAB1;
    font-family: 'Arvo', serif;
	font-size:1em;
	padding:1em 1.5em;
	text-decoration:none;
    margin:0;
    z-index:10;
    /* max-width:120px; */
}
.rButton:hover {
	background-color:#424E63;
    color:white;
}
.rButton:active {
	position:relative;
}
.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;
}
.row{
  margin:0 !important;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, auto));
  grid-template-rows: repeat(auto-fill, minmax(100px, 150px));
  position:relative;
}

.hero-bg{
  grid-column:3 / -1;
  grid-row: 1/ 7;
  height:67vh;
  width:100%;
  background-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0.25) 100%), url(/imageserver/Reusable/azek2021/hero-bg-min.png);
  background-size:cover;
  background-position: top;
  background-repeat: no-repeat;
}
.hero-header{
  position: relative;
  grid-column:1 / -1 ;
  grid-row:2 / 3;
  text-align:center;
  margin-top:5%;
  text-transform: uppercase;
}
.hero-header h1{
  color:#B4BAB1;
  -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-shadow: 1px 3px 5px rgba(34,34,34,0.28);
}

.hero-grain{
  grid-column:1 / 6;
  grid-row:4/8;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
  justify-self:center;
  width:70vw;
  max-height:200px;
  background-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0.5) 100%),url(/imageserver/Reusable/azek2021/deck-bg-min.png);
  background-repeat: no-repeat;
  background-size: cover;  
  color:#B4BAB1;
  padding:2% 4%; 
  position:relative;
  overflow:hidden; 
  border-top:1px solid #000;
  border-bottom:1px solid #ddd;
}
.hero-grain: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); 
}
.hero-grain: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);
}

.hero-grain-text{
  grid-column: 1;
  align-self: center;
}
.hero-grain-text h4{
  margin:0;
  padding:0;
}
.hero-grain-text p{
  padding:5px 0;
  margin:0 0 0 15%;
  font-size:1.3em;
}
.grain-btn{
  grid-column: 2;
  place-self: center;
}
.header-logo{
  grid-column:1/3 ;
  grid-row:1/-1 ;
  background:transparent;
  height:67vh;
  border:3px solid #545454;
  border-right:0;
  border-left:0;
}


#header-logo {
  margin:5% 0 0 5%;
  position:relative;
}
#samples{
 position:absolute;
 max-width:600px;
  transform:rotate(345deg);
  bottom:8%;
  left:1%;

}


/* ---------------------------------------- Section 2 -------------------------------- */

.section2{
padding:0 3%;
margin-top:5%;
  display:grid;
  grid-template-columns: repeat(2,49%);
}
.section2-left-col{
position:relative;
margin:0 auto;
padding:0 2%;
}
.section2-right-col{
  padding:0 2%;
  display:flex;
  justify-content:center;
  margin:0 auto;
}

.section2-grid-left{
display: grid;
position:relative;
grid-template-columns:repeat(5, 1fr );

}
.section2-grid img{
object-fit:contain;
}

.section2-left-text{
grid-column: 1/-1;
grid-row:1/4;
position:relative;
}
.section2-left-text h5{
  padding: 10px 50px 15px 0; 
  margin:0;
  }
.section2-left-text ul{
padding:0;
margin:0;
list-style: none;
max-width:48%;
}
.section2-left-text h3{
margin-top:30px;

}
.section2-left-img{
grid-column: 3/-1;
grid-row:2/5;
justify-self:center;
}
.section2-left-img img{

object-fit:cover;
}
.multi-width-text{
margin-top:0%;
grid-column: 1/-1;
grid-row:5/8;
position:relative;

}

.multi-width-list{
grid-column: 3/-1;
grid-row:8/11;
text-align:left;
}
.multi-width-list ul{
list-style: none;
text-align:left;
}
.multi-planks{
grid-row:8/11;
grid-column: 1/4;
justify-self:center;
}
.multi-planks img{
position:relative;
max-width:74%;
}


.section2-collage-grid{
position:relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 75px));
align-self:center;
margin:20px 0;
}
.section2-collage-grid img:not(p){
border:4px solid #424E63;
}
.collage-logo{
grid-column: 1/6;
grid-row:12/13;

}

.collage-left{
grid-column:1 / 5;
grid-row: 4/9;
position: relative;
margin-top:15px;
} 
.collage-right{
grid-column:6 / 13;
grid-row: 5/10;
position:relative;
margin-top:15px;
} 
.collage-top{
  grid-column:4 /8;
  grid-row: 1/6;
margin-top:15px;
} 

.collage-bottom{
grid-column:4 / 8;
grid-row: 7 / 12;
position:relative;
margin-top:15px;

}


/* --------------------------  Center Divider --------------------------- */

.center-divider{
padding:3%;
color:#d4d4d4;
background:#424E63;
text-align: center;
position:relative;
overflow:hidden; 
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}

.center-divider: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); 
}
.center-divider: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);
}

/* --------------------------  Card Section --------------------------- */

.card-section{
margin-top:5%;

position:relative;
background-image:linear-gradient(180deg,rgba(236,236,236,1) 0%,rgba(0,0,0,.5) 100%),url(/imageserver/Reusable/azek2021/deck-bg-min.png), url(/imageserver/Reusable/azek2021/azek-type-min.png);
background-repeat: no-repeat;
background-size:cover, cover, 75%;
background-position:center, bottom, right;
}
.space{
min-height:300px;
}

.product-card__content {
text-align: center;
position: relative;
transition: transform 3s;
transform-style: preserve-3d;
}

.product-card:hover .product-card__content {
transform: rotateY(0.5turn);
}

.product-card__front,
.product-card__back {
position:absolute;
display:flex;
flex-direction: column;
justify-content: center; 
/* flex-wrap:wrap; */
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
/* transform-style: preserve-3d; */
height:325px;
width:250px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.5);

}

.product-card__back {
transform: rotateY(0.5turn);
padding:2%;
color:white;
}

.product-card {
margin:0 auto;
max-width:250px;
transition: 0.3s;
}


.landmark .product-card__front {
background-image:radial-gradient(ellipse at left, rgba(255,255,255,.4), transparent),radial-gradient(ellipse at right, rgba(255,255,255,.4), transparent), url(/imageserver/Reusable/azek2021/landmark.png);
background-size: cover;
}
.landmark .product-card__back {
background-color: var(--clr);
background-image: url(/imageserver/Reusable/azek2021/castle-gray-lg-min.jpg);
background-size: cover;
background-blend-mode: overlay;
}

.harvest .product-card__front {
background: radial-gradient(ellipse at left, rgba(255,255,255,.5), transparent),radial-gradient(ellipse at right, rgba(255,255,255,.5), transparent), url(/imageserver/Reusable/azek2021/harvest.png);
background-size: cover;
}
.harvest .product-card__back {
background-color: var(--clr);
background-image: url(/imageserver/Reusable/azek2021/kona-lg-min.png);
background-size: cover;
background-blend-mode: overlay;
}

.vintage .product-card__front {
background:radial-gradient(ellipse at left, rgba(255,255,255,.5), transparent),radial-gradient(ellipse at right, rgba(255,255,255,.5), transparent),url(/imageserver/Reusable/azek2021/vintage.png);
background-size: cover;
}
.vintage .product-card__back {
background-color: var(--clr);
background-image: url(/imageserver/Reusable/azek2021/vintage-min.png);
background-size: cover;
background-blend-mode: overlay;
}


/* --------------------------  Designer Section --------------------------- */


.designer-section{
margin-top:100px;
padding:5%;
min-height:500px;
color:#d4d4d4;
}
.devices{
margin-top:-50px;
}




/* ----------------------------------------  Animations -------------------------------------- */

.call-collage-top{
    transform: translate(30px,142px) scale(0);
}
.call-collage-right{
    transform: translate(-200px,0px) scale(0);
}
.call-collage-bottom{
    transform: translate(0px,-266px) scale(0);
}
.call-collage-left{
    transform: translate(210px,-70px) scale(0);
}
.call-logo{
    transform: translate(410px,0px) scale(0);
}
.call-wood-fail{
    transform: translate(-50px,0px) scale(0);
}
.call-multi-planks{
    transform: translate(-50px,0px) scale(0);
}
.landmark{
    transform: translate(0px,200px) scale(1);
    
}
.harvest{
    transform: translate(0px,200px) scale(1);
    
}
 .vintage{
    transform: translate(0px,200px) scale(1);

} 


.play-collage-top{  
    animation:collage-anim 2s  linear  .2s forwards;
}

.play-collage-right{
    animation:collage-anim 2s linear 0.6s forwards;
}

.play-collage-bottom{
    animation:collage-anim 2s linear 1s forwards;  
}

.play-collage-left{
    animation:collage-anim 2s linear .5s forwards;
}
.play-logo{
    animation:collage-anim 5s linear  forwards;
}
.play-wood-fail{
    animation:collage-anim 3s linear  forwards;
}
.play-multi-planks{
    animation:collage-anim 3s linear  forwards;
}
.play-harvest{
    animation:card-anim 1s linear .3s forwards;
}
.play-vintage{
    animation:card-anim 1s linear .6s forwards;
}
.play-landmark{
    animation:card-anim 1s linear  forwards;
}

.hero-header{
    opacity:0;
    animation: slidein 3s ease-out 1s forwards;
    
}

@keyframes slidein {
    0% {
      margin-left: -10%;
      width: 100%;
      opacity:.7;
     transform:scale(0.7)
    }
    
   
  
    100% {
      margin-left: 0%;
      width: 100%;
      opacity:1;
    }
  }

@keyframes collage-anim {
    from {      
    }
    to {
        transform: translate(0px, 0px) scale(1); 
    }
}

@keyframes card-anim {
    from {      
    }
    to {
        transform: translate(0px, 0px) scale(1); 
    }
}

/* ------------------------------------------Media Queries ----------------------------------------------- */

@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;
  }
     .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{
    display:block;
  }
    .section2-left-text ul{
      max-width:1000px;
    }
  
    .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;
    }
    
}
 
  @media (max-width: 768px) {
      .hero-bg{
        height:35vh;
      }
      .card-section{
        min-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;
    }   
  }