.maincontent{
  max-width:100%;
}

html,
body {
  font-size: 18px;
}
.row{
    margin:0 auto;
}
h1 {
  font-size: calc(2vw + 1.5rem);
  font-family: antique-olive-nord, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #c59a37;
  ;
}

h2 {
  font-size: calc(1vw + 1.5rem);
  font-family: antique-olive-nord, sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #c59a37;
}

h3 {
  font-size: calc(.8vw + 1rem);
  font-family: antique-olive-nord, sans-serif;
  font-weight: 300;
  /* color:#ececec; */
}

h4 {
  font-size: 1.2rem;
  font-family: lithos-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  /* color:#ececec; */

}

h5 {
  font-size: 1rem;
  font-family: lithos-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  /* color:#ececec; */

}
p {
  font-size: 1rem;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-style: normal;
  /* color:#ececec; */
}
img {
  width: 100%;
}
.col-3{
    width:24.5%;
    float:left;
}
.hero{   
    position: relative;
}
.hero-content{
    position: absolute;
    top:0;
    left:0;
    height:100%;
}
.hero-text{
    display:flex;
    flex-direction: column;
    padding:3vw 3vw;
    height:100%;
}
.hero-text h2{
    order:1;
    padding:1vw 0;
}
.hero-text p{
    order:2;  
    padding:1vw 0;
    max-width:35vw;
}
.hero-text ol{
    order:3;  
    padding:1vw 0;
}

.accessories-list{
    font-size:.8rem;
}
.product{
    display:none;
}
.product-container{
    padding:2% 5%;
    margin:0 auto;
    width:100%;
    max-width:1700px;
}
.product-divider{
    border-top:2px solid black;
    margin:1% 2%;
}

 .product-show{
    display:block;
} 
.product-tab{
    cursor:pointer;
}
.product-box{
    margin:0 3px;
}
.product-hr{
    max-width:40%;
    border-top:1px solid #c59a37;
    margin:3px auto 2%;
}
.product-header{
    text-align:center;
}
.product-header h2{
    margin:0;
}
.col:nth-child(even){
    background-color:#ececec;
}
.col{
    border:1px solid black;
    margin:2px 6px 2px 0;
}
.product-box-inner{
    display:flex;
    flex-direction: column;
    justify-content:space-around;
    align-items:center;
    text-align:center;
}



@media screen and (max-width:1350px) {
    .col{
        width:49%;
    }
}
@media screen and (max-width:992px) {
    .col-3{
        width:100%;
    }
    .hero-text{
        justify-content:space-around;
        padding:0;
    }
    .hero-text h2{
        order:1;
    }
    .hero-text p{
        order:3; 
        max-width:100vw; 
    }
    .hero-text ol{
        order:2;  
        margin-left:3%;
    }
}
@media screen and (max-width:768px) {
    .hero-content{   
        position: relative;
    }
    .hero-text{
        flex-direction:row ;
        padding:2%;
        justify-content:space-around;
        flex-wrap:wrap;
    }
    .hero-text ol li{
        min-width:50%;  
    }
    .hero-text p{
        width:50%; 
    }
    .hero-text h2{
        margin:5% 0;
        position: absolute;
        top:-15vw;
    }
}
@media screen and (max-width:600px) {
    .hero-text ol{
        width:100%;  
    }
    .hero-text ol li{
        float:left;  
    }
    .hero-text p{
        width:100%; 
        margin:15px;
    }

    ol li{
        /* display:inline-block; */
        /* float:right; */
    }
}