:root{
    --main-color:#736049;
}

body{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
body, html{
    font-size:18px;
}
.maincontent{
    max-width:100%;
    padding:0;
    margin:0;
}
.maincontent_wrapper{
    padding-top:0;
}

  h1{
    font-size:60px;
  }
  
  a:focus{
    outline:0px;
  }
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 0px solid #c5c5c5;
    background: #ececec;
  }
  .ui-widget-content a{
    color:blue;
  }
  .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border: 0;
  }
  .row {
    padding: 0 !important;
    margin: 0 !important;
  }
  img {
    width: 100%;
  }
  
  .main-hr {
    height: 0px;
    max-width: 100%;
    margin: 20px 0;
    border: 1px solid #024382;
  }
  
  .sm-hr {
    max-width: 40%;
    margin: 0 auto 50px;
    border:1px solid #024382;
  }
  .lrg-hr {
    max-width: 80%;
    margin: 50px auto 50px;
    border:1px solid #ececec;
  }
  .highlight{
    font-style: italic;
    color:#FBC50F;
  }
  .series-highlight{
    font-size:1.4rem;
    font-style: italic;
    color:#FBC50F;
  }
  /* ----------------------------------- BTN Black ------------------------------------------ */
  
  .hero{
    background:url('/imageserver/Reusable/deksmart23/hero-min.jpeg');
    background-repeat: no-repeat;
    background-size:cover;
    background-position:bottom;
    display:grid;
    grid-template-columns: 50% 50%;
  }
  .hero-content{
    padding:12% 0 12% 20%;
    grid-column:2/3;
    color:#fff;
  }
  .hero-content h2{
    padding:0 0 10px 0;
    border-bottom:2px solid #024382;
    max-width:500px;
  }
  .section-divider {
    background-image:linear-gradient(to left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.7) 100%), url('/imageserver/Reusable/deksmart23/colors-patterns-2-min.jpeg');
    color: #fff;
    text-align: center;
    padding: 1% 2% 1%;
    border: 1px solid #000;
    border-left: 0;
    border-right: 0;
    text-transform: uppercase;
  }
  
  .section-divider h2 {
    text-transform: uppercase;
    letter-spacing: .18rem;
  }
  
  .main-header{
    padding:2% 5%;
    text-align: center;
    background:#ececec;
  }
  .header-list ul li{
    display:inline-block;
    margin:0 10px;
  }
  .section1 h2{
    text-transform: uppercase;
  }
  .my-divider{
    margin:0 auto;
    text-align: center;
  }
  #tabs{
    margin:0 auto;
    width:100%;
  }
  
  #tab-list{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    filter:drop-shadow(0px 10px 5px rgba(0,0,0,0.2));
    background:#ededed;
    padding:0 5vw 50px;
    justify-content:space-evenly;
    margin:0 auto;
    align-items:center;
    text-align:center;
  }
  #tab-list li{
    margin: 5px 0;
    min-width:250px;
    list-style-type: none;
    text-align: center;
    background:#fff;
    border:1px solid #000;
    padding:10px 15px;
    font-size:1.3rem;
}
#tab-list li a{
      color: var(--main-color);
  }
  #tab-list li:hover{
    background:#ededed;
  }
  #tab-list li a:hover{
    text-decoration: none;
  }
  /* #tab-list li h2{
    padding:0;
    margin:0;
    letter-spacing:.1em;
  } */
  #tab-list li img{
    max-width:200px;
  }
  ul{
    padding:0;
  }
  .section2{
    text-align: center;
    margin-top:80px;
    margin-top:50px;
    max-width:1600px;
    margin:0 auto;
    padding:0 3%;
  }
  .icon-header{
    padding:2% 8vw;
    max-width:1600px;
    margin:0 auto;
    text-align: center;
  }
  .product-header{
    margin:2% 0 ;
    text-align: center;
  }
  .product-header p{
    margin:0 auto;
    max-width:1300px;
  }
  .icon-section {
    text-align:center;
   display:flex;
   flex-direction: row;
   justify-content: space-evenly;
   flex-wrap:wrap;
   margin:30px 0 0
  }
  .icon-card{
     min-height: 200px;
     width:300px;
     position: relative;
     margin-top:0px;
     display:inline-block;
  }
  
  .icon-card__content {
     text-align: center;
     position: relative;
     transition: transform 3s;
     transform-style: preserve-3d;
  }
  
  .icon-card:hover .icon-card__content {
     transform: rotateY(0.5turn);
  }
  
  .icon-card__front, .icon-card__back {
     position: absolute;
     display: flex;
     flex-direction: column;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     min-height: 200px;
     width: 300px;
     /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .5); */
    }
    .icon-card__front{
    justify-content: center;
  
  }

  .icon-card__back {
     transform: rotateY(0.5turn);
     padding: 4% 2% 2% 2%;
     color: #000;
  }
  
  .icon-card__title{
    padding-top:30px;
  }
  
  .icon-card p {
     font-weight: 500;
     padding: 0 5%;
  }
  
   .icon-card__front {
     background-image:  url('/imageserver/Reusable/deksmart23/waterproof-min.png');
     background-size:100px;
     background-repeat: no-repeat;
     background-position: top center;
  }
  .step2 .icon-card__front {
     background:  url('/imageserver/Reusable/deksmart23/slipproof-min.png');
     background-size:100px;
     background-repeat: no-repeat;
     background-position: top center;
  }
  .step3 .icon-card__front {
     background:  url('/imageserver/Reusable/deksmart23/splinterproof-min.png');
     background-size:100px;
     background-repeat: no-repeat;
     background-position: top center;
  }
  .step4 .icon-card__front {
     background:  url('/imageserver/Reusable/deksmart23/lowmaintenance-min.png');
     background-size:100px;
     background-repeat: no-repeat;
     background-position: top center;
  }

  .gallery{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    flex-wrap:wrap;
    align-items:center;
    padding:3% 2%;
}
.gallery-item{
    margin-bottom:15px;
    cursor:pointer;
}
.gallery-item a{
    color:#000;
    text-decoration: none;
}
.gallery img{
    max-width:200px;

}
.product-header a{
    color:#28678F;
}
  .section2-heading{
    text-align:center;
    padding:5% 20% 2%;
  }
  .section2-heading p{
    padding:2%;
  }
 
  @media screen and (max-width:1200px){
    .warranty-grid{
      grid-template-rows: auto;
      grid-template-columns: 1fr;
      margin:0;
    }
    .guarantee-text{
      grid-row:1/2;
      grid-column:1/2;
    }
  }
  @media screen and (max-width:992px){
    #guarantee-thumb{
      max-width:200px;
    }
    .hero{
      background-image:linear-gradient( rgba(255,255,255,0.5)0%, rgba(255,255,255,0.5)100%), url('/imageserver/Reusable/deksmart23/usa-single-ply.jpg');
      grid-template-columns: 1fr;
    }
    .hero-content{
      grid-column:1/2;
      text-align:center;
      padding:8% 0 8% 0;
    }
    .hero-content h2{
      margin:0 auto;
    }
  
  }
@media screen and (max-width: 1460px) and (min-width: 992px) {
    .gallery-item{
    max-width:24%;
}
  @media screen and (max-width:992px) {
     .gallery-item{
    max-width:49%;
}
  @media screen and (max-width:768px) {
    .section2-heading{
      text-align:center;
    }
    .product-header{
      padding:5% 8vw 0;
      text-align:center;
    }
    .product-descrip{
      max-width:100%;
      text-align:center;
    }
  }
  @media only screen and (max-width: 550px) {
    html, body{
      font-size:14px;
    }
}