/* font-family: "karmina-sans", sans-serif;
    font-weight: 700;
    font-style: normal; */

/* font-family: "karmina-sans", sans-serif;
font-weight: 700;
font-style: normal; */

  body{
    box-sizing: border-box;
    margin:0;
    padding:0;
  
}
.maincontent{
    max-width:100%;
    padding:0;
    margin:0;
}
.maincontent_wrapper{
    padding-top:0;
}
img{
    width:100%;
}

  /* ==================== */
  h1, h2{
    font-family: "karmina-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  .flex-group{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  .flex-item{
    max-width:200px;
}
.icon-flex-item{
      max-width:200px;
      text-align: center;
  }
  .icon-image-box img{
    max-width:100px;
  }
 
  /* ========================== */
  .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:center;
    max-width:750px;
  }
  .col-right50{
    width:49%;
    float:right;
  overflow-x:hidden;
  }
.my-container{
    padding:2% 6%;
    margin:0 auto;
  }
 .hero{
    height:300px;
    background-image: url('/imageserver/Reusable/pabco23/advantage-hero-min.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding:2%;
    overflow:hidden;
 }
.section1{
    padding:2% 4%;
    position: relative;

  }
  .advantage-header{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content:space-around;
    align-content:center;
    position: relative;
  
  }
  .colors{
    position: relative;
    margin-top:4%;
  }
  
  .header-text{
    max-width:1000px;
    clear:right;
    display:block;
  }
  .product-features{
    margin:0 4%;
  }
  .shape-playground-1 {
      float: left;
      margin: 30px 0 0 1px;
      shape-outside: content-box polygon( 0 0, 73.1% -1.8%, 91.3% 7.5%, 91.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-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) {
    .shape-playground-1 {
      float: left;
  }
    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-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;
      }   
    }