html{
    --primary-color: #48A850;
    --secondary-color: #48821C;
    --third-color: #a1cd7f;

    --primary-grey:#f5f5f5;
    --secondary-grey:#c2c2c2; 
    --third-grey:#555555;
    --fourth-grey:#313437;
    --black: #000000;
      
    --price-color: #0B7958;

    --main-bg: var(--primary-grey);
    --secondary-bg: var(--primary-grey);
    --footer-signup: var(--fourth-grey);

    --footer-svg-fill-light: var(--third-color);
    --footer-svg-fill-medium: var(--primary-color);
    --footer-svg-fill-dark: var(--secondary-color);
}


.main,
.main.product-display{
  background: var(--secondary-bg);
}
.main.index{
  background: var(--white);
}

a{
    color:var( --black);
    text-decoration:none !important;
  }
  a:hover,
  a:active{
    color:var(--primary-color);
    text-decoration:none
  }
  .rounded{
    border-radius:.5rem !important
  }
  a img:hover,
  a img:active{
    opacity:.84
  }
  .xs-small{
    text-align: center;
    padding-top: 4px;
    font-size: 8px;
    line-height: 0.6rem;
  }
  .collection-1{
    letter-spacing:.3rem
  }
  .btn-index-size{
    background-color:var(--primary-grey);
    border:1px solid var(--primary-grey);
    border-radius:1.5rem;
    color:var(--black);
    font-size:1.2rem;
    padding:1rem 2rem;
  }
  .btn-index-size:hover,
  .btn-index-size:active{
    text-decoration:none;
    background-color:var(--primary-color);
    border-color:var(--primary-color);
    color:var( --white);
  }
  a.btn-index-size:hover{
    color: var(--white) !important;
  }
  .btn-heritage{
    background:var(--black);
    color:var(--white);
    border-radius:0;
    padding:.5rem 1rem;
    text-decoration:underline;
  }
  .btn-heritage:active,
  .btn-heritage:hover{
      background-color:var(--primary-color);
      color:var(--white);
  }
  a.btn-heritage:hover{
    color: white !important;
  }
  .trending em{
    font-weight:100;
    text-decoration:underline
  }
  .handknotted-box{
    position:absolute;
    bottom:25%;
    left:10%;
    right:10%;
    background:rgba(255,255,255,.9);
    color:var(--black);
    border-radius:0;
    padding:15px 10px 5px 10px;
    font-size:1.2rem;
  }
  .handknotted-box p.underline{
    text-decoration:underline;
    font-size:1rem;
  }
  .handknotted-box em{
    text-decoration:none
  }
  .trending a:hover strong,
  .trending a:active strong{
    text-decoration:none
  }
  .heritage-overlay{
    position:absolute;
    top:38%;
    left:0;
    right:0;
    font-size:1.2rem
  }
  .heritage-box{
    position:absolute;
    top:52%;
    left:20%;
    right:20%;
    background:var(--white);
    opacity:.9;
    color:var(--black);
    border-radius:0;
    padding:15px 10px 8px 10px;
    font-size:1.2rem;
  }
  .conf-img{
    width:220px
  }
  .heritage-box p{
    font-size:1rem
  }
  .heritage img{
    min-height:270px;
  }
  .img.new-arrivals{
    min-height:270px
  }
  .img.clearance{
    min-height:390px
  }
  .outdoor img{
    min-height:370px
  }
  .handknotted img{
    min-height:250px
  }
  .brooklyn-img-1{
    border-radius: 0
  }
  .brooklyn-img-2{
    border-radius: 0 0 .5rem .5rem
  }
@media only screen and (min-width:768px) /* large screen adjustments */
{
  .col-md-3b {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .col-md-2b {
    flex: 0 0 11%;
    max-width: 11%;
  }
  .perfect-pattern{
    font-size:20px;
    font-weight:600;
    letter-spacing:.05rem
  }
  .perfect-pattern a{
    font-size:.7rem;
  }
  .bg-hor{
    background:var(--third-grey);
    width:100%;
    height:120px;
    z-index:-1;
    position:absolute;
    bottom:0px;
  }
  .heritage-overlay{
    position:absolute;
    top:initial;
    bottom:0;
    right:initial;
    left:0px;
    width:300px;
    font-size:1.2rem;
    display:flex;
    justify-content:center;
    flex-direction:column;
    height:auto;
  }
  .heritage-overlay .h2{
    font-size:1.2rem
  }
  .heritage-box{
    position:absolute;
    left:initial;
    right:10%;
    background:var(--white);
    opacity:.9;
    color:var( --black);
    border-radius:0;
    padding:20px 20px 10px 20px;
    font-size:1.2rem;
  }
  .handknotted-box{
      bottom:14%;
      left:10%;
      right:10%;
      padding:15px 15px 5px 15px;
    }
    .heritage img,
    .new-arrivals img,
    .outdoor img{
      min-height:280px
    }
    .brooklyn-img-1{
      border-radius: 0 .5rem  0 0.5rem 
    }
    .brooklyn-img-2{
      border-radius: 0 .5rem .5rem 0
    }
  }
@media only screen and (min-width:1024px){
  .col-lg-3b {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .conf-img{
    width:140px
  }
  .heritage-overlay{
    bottom:10px;
    width:390px;
  }
  .heritage-box{
    padding:10px 10px 0 10px;
    width:40%;
    right:30%;
    top:0
  }
  .bg-hor{
    width:100%;
    height:180px;
  }
  .handknotted-box{
    position:absolute;
    bottom:25%;
    left:10%;
    right:10%;
    background:rgba(255,255,255,.9);
    color:var( --black);
    border-radius:0;
    padding:15px 10px 5px 10px;
    font-size:1.2rem;
  }
  .handknotted-box p.underline{
    text-decoration:underline;
    font-size:1rem;
  }
  .handknotted-box{
    bottom:10%;
    left:33%;
    right:33%;
    padding:30px 30px 20px 30px;
    }
    .perfect-pattern a{
    font-size:1rem;
  }
  .heritage img,
  .new-arrivals img,
  .outdoor img{
    min-height:430px
  }
}
@media only screen and (min-width:1200px){
  .heritage-overlay{
    bottom:20px;
    width:420px;
  }

  .handknotted-box{
    bottom:18%;
  }
  .row-neg-marg{
    margin: 0 -25px 0 -15px
  }
}