/*Main Elements:
- Feature Blocks (Two Columns and Single Feature)
- Product Blocks (Hover and Shop Button)
- Individual Styling*/

section#basics {
  width:93%;
  margin:0 auto;
}
#basics {
  /* General Styling (Universal)*/
  h1 , h2 , h4{
    font-family:'Bogs Headline';
    text-transform:uppercase;
    font-weight:500;
    letter-spacing:0.5px;
    margin:0;
    line-height:1;
  }
  h3 {
    padding-top:1rem;
  }
  h5 {
    text-transform:uppercase;
    letter-spacing:0.5px;
  }
  img{
    width:100%;
    margin:1rem 0;
    border-radius:8px;
  }
  p , li {
    color:#000;
    line-height:1.7;
    margin:0;
  }
  ul {
    padding-left:1.2rem;
  }
  ::marker {
    font-weight:bold;
  }
  picture {
    padding:1rem 0;
  }
  .beige {
    background-color:#E3DFD5;
  }
  .grey {
    background-color:#F8F8F8;
  }
  /* Two Column Feature Block Styling (Universal)*/
  #feature-columns {
    background-color:#F8F8F8;
    border-radius:8px;
    padding:0;
  }
  #feature-columns h3 {
    padding-top:0;
  }
  #feature-columns img {
    margin:0;
    border-radius:0px;
  }
  #feature-columns .content-block {
    width:95%;
    margin:0 auto;
  }
  /* Single Feature Block Styling (Universal)*/
  #feature-single {
    display:flex;
    overflow:hidden;
    padding-right:0;
    height:100%;
  }
  #feature-single .content-block {
    align-content:center;
  }
  /* Product Block Styling (Universal)*/
  #product {
    display:flex;
  }
  #product p {
    line-height:1.4;
    margin:0;
  }
  #product .thumb , #product p {
    width:90%;
    margin:0 auto;
  }
  #product .thumb {
    background-color:#F8F8F8;
    padding:0 0 2rem;
    margin-bottom:0.85rem;
  }
  #product .thumb , #product img {
    border-radius:8px;
  }
  #product img {
    width:100%;
  }
  #product .thumb.no-button {
    transition: box-shadow 0.2s ease-in-out 0.1s;
  }
  #product .row {
    width:90%;
    margin:0 auto;
  }
  #product .col-lg-8.col-12 , #product .col-lg-4.col-12 {
    padding:0;
  }
  #product .col-lg-4.col-12 {
    display:flex;
    align-items:baseline;
  }
  #product .shop-btn {
    font-family:'Bogs Headline';
    text-transform:uppercase;
    background-color:transparent;
    border:2px solid #F07622;
    color:#F07622;
    border-radius:22px;
    text-align:center;
    align-content:center;
    padding:0;
  }
  #product .shop-btn:hover {
    background-color:#F07622;
    color:#fff;
    border:2px solid #F07622;
    transition:0.5s;
    cursor:pointer;
  }

  @media (min-width:992px) {
    /* General Styling (Desktop) */
    h1 {
      padding:2rem 0;
    }
    h2 {
      padding:1.5rem 0;
    }
    h4 {
      font-size:30px;
    }
    /* Two Column Feature Block Styling (Desktop) */
    #feature-columns {
      width:47%;
      margin:0.8rem;
    }
    #feature-columns .content-block {
      padding:3rem;
    }
    /* Single Feature Block Styling (Desktop)*/
    #feature-single {
      padding:0;
      margin-top:2rem;
      height:auto;
    }
    #feature-single .content-block {
      padding:1rem 2rem;
      border-radius:12px 0 0 12px;
    }
    #feature-single picture {
      padding:0;
    }
    #feature-single img {
      padding:0;
      margin:0;
      border-radius:0 12px 20px 0;
    }
    #feature-single h2 {
      width:75%;
      padding-top:0.5vw;
      padding-bottom:1vw;
      font-size:3vw;
    }
    #feature-single p {
      padding-bottom:0.5vw;
      font-size:1vw;
    }
    /* Product Block Styling (Desktop) */
    #product {
      margin-bottom:2rem;
    }
    #product.four {
      width:50%;
      padding:0;
    }
    #product.three {
      width:33.33%;
      padding:0;
    }
    #product .thumb.no-button:hover {
      box-shadow:0px 0px 10px 0px #AAAAAA;
      transform:translate(0, 2px);
      position:absolute;
      padding:1rem 1rem 3.5rem 1rem;
      width:23.5%;
    }
    #product .col-lg-4.col-12 {
      justify-content:end;
      height:46px;
    }
    #product .shop-btn {
      font-size:22px;
      width:8.2vw;
    }
  }

  @media (max-width:992px) {
    /* General Styling (Mobile) */
    h1 {
      font-size:2.5rem;
      padding:1.5rem 0;
    }
    h2 {
      font-size:2rem;
      padding:1rem 0;
    }
    h3 {
      font-size:1.5rem;
    }
    /* Two Column Feature Block Styling (Mobile) */
    #feature-columns {
      width:93%;
      margin:0 auto;
      margin-top:0.5rem;
      margin-bottom:1rem;
    }
    #feature-columns .content-block {
      padding:1.5rem;
    }
    /* Single Feature Block Styling (Mobile)*/
    #feature-single {
      width:97%;
    }
    #feature-single picture {
      padding:0;
      margin:0;
    }
    #feature-single img {
      padding:0;
      margin:0;
      border-radius:12px 12px 0 0;
    }
    #feature-single .content-block {
      border-radius:0 0 12px 12px;
      padding:5vw;
    }
    #feature-single p {
      padding:1vw 0;
      font-size:15px;
    }
    /* Product Block Styling (Mobile) */
    #product {
      flex-flow:inherit;
      margin-bottom:1rem;
    }
    #product p {
      font-size:14px;
    }
    #product .col-lg-4.col-12 {
      margin:8px 0 20px;
    }
    #product .shop-btn {
      width:5rem;
      font-size:18px;
      letter-spacing:0.5px;
    }
  }
  /*More specific styling for longer product names*/
  @media(max-width:600px) {
    #product p {
      font-size:2.8vw;
    }
  }
}

/*Individual Page Styling*/

/*Basics: Outsoles - Three Icon Feature*/
#iconFeature {
  background-image:url("../../landingPage/OutsoleImageBlend.png");
  background-size:cover;
  background-position:center;
  position:relative;
  width:100%;

  .col-lg-5.col-12 , .col-lg-7.col-12 {
    align-content:center;
  }
  .col-lg-7.col-12 {
    text-align:center;
  }
  h2 {
    font-family:'Bogs Headline';
    text-transform:uppercase;
    font-weight:500;
    letter-spacing:0.5px;
    margin:0;
    line-height:1;
  }
  h5 {
    font-family:'Bogs Headline';
    font-weight:100;
  }
  p {
    color:#000;
  }
  .icon:hover {
    transform:rotate(20deg) scale(1.1);
    transition:.5s ease-in-out;
  }
  @media(min-width:992px) {
    .col-lg-5.col-12 {
      padding-left:4vw;
      height:18rem;
    }
    .col-lg-7.col-12 {
      padding-right:6vw;
      margin-top:-1.5vw;
    }
    .col-lg-7.col-12 p {
      font-size:14px;
      line-height:1.4;
    }
    h2 {
      font-size:2.5rem;
      padding-bottom:18px;
    }
    h5 {
      letter-spacing:0.2px;
    }
    .icon {
      margin:0;
      width:10vw;
    }
    .icon.small {
      padding-top:1.5vw;
      padding-bottom:1.5vw;
      width:7vw;
    }
  }
  @media(max-width:992px) {
    .col-lg-7.col-12 p {
      width:80%;
      margin:0 auto;
    }
    h2 {
      padding:7vw 0 3vw;
    }
    h5 {
      font-size:24px;
    }
    .icon.small {
      margin:2rem;
    }
  }
}

/*Basics: Neo-Tech - Icon Styling*/
#basics {
  @media(min-width:992px) {
    .neo-tech_icon {
      max-width:19vw;
      margin-bottom:1vw!important;
    }
  }
  @media(max-width:992px) {
    .neo-tech_icon {
      margin-bottom:1.5vw!important;
    }
  }
}

/*Basics: Farm vs Rain - Colored Background Info Sections*/
#basics #grey-section {
  width:100%;
  background-color:#F8F8F8;
  #feature-columns {
    margin:0;
    padding:1rem;
  }
  img {
    border-radius:8px 8px 0 0;
  }
  .content-block.dark-beige {
    background-color:#e5e3df;
    width:100%;
    border-radius:0 0 8px 8px;
  }
  .content-block.darker-beige {
    background-color:#e3dfd5;
    width:100%;
    border-radius:0 0 8px 8px;
  }
  @media(min-width:1400px) {
    #feature-columns {
      width:50%;
    }
    .content-block {
      height:20rem;
    }
  }
  @media(max-width:1400px) and (min-width:992px) {
    #feature-columns {
      width:50%;
    }
    .content-block {
      height:27rem;
    }
  }
  @media(max-width:992px) {
    #feature-columns {
      width:100%;
    }
  }
}