/** Shopify CDN: Minification failed

Line 152:5 Cannot use type selector "__wrap" directly after nesting selector "&"
Line 168:9 Cannot use type selector "--prev" directly after nesting selector "&"
Line 172:9 Cannot use type selector "--next" directly after nesting selector "&"

**/
#main {
  background: linear-gradient(to bottom, #454632, #1a1a1a 68%) top center no-repeat;
  position: relative;

  .intro-copy--product {
    padding: 60px 0 30px 0;

    @media(max-width:768px) {
      padding-bottom: 0 !important;
    }
  }

  .topo,
  &:before {
    display: none !important;
  }

  .hero--home {
    margin-bottom: 40px;
  }

  .cards-list--learn {
    padding-top: 40px;

    
  }

  .article__image {
    img {
      width: 100%;
    }
  }

  .related__heading .btn {
    @media(max-width: 768px) {
      display: none;
    }
  }

  .article__related .mobile-wrap {
    display: none;

    @media(max-width: 768px) {
      display: flex;
      justify-content: center;

      
    }
  }

  .intro-copy__inner a:not(.btn) {
    color: #dbd5cd;

    &:hover {
      color: #eaaa00;
    }
  }

  .details--product a:not(.btn) {
    color: #454632;

    &:hover {
      color: #eaaa00;
    }
  }

  .card-slider__slider {
    @media(max-width: 767px) {
      overflow: visible;
      padding: 0 25px;
    }
    

    .swiper-slide {
      
    }
  }

  .card__type{
    margin-bottom: 10px;

    @media(max-width: 768px) {
      left: 15px;
    }


    img {
      margin-right: 5px;
      margin-left: -6px;

      
    }

    h2 {
      margin: 0;
    }
  }

  .card__info {
    .eyebrow {
      padding-bottom: 10px;
    }
  }

  .image-grid {
    padding: 40px 0;

    .container {
      position: relative;
    }

    
      .arrow::before {
      content: "";
      display: block;
      width: 19px;
      height: 14px;
    }
      .arrow--yellow {
      border: 1px solid #eaaa00;
      background: #eaaa00;
    }
      .arrow--yellow.arrow--prev::before {
      background: url("icon-arrow-left-green.svg") center center no-repeat;
    }
      .arrow--yellow.arrow--next::before {
      background: url("icon-arrow-right-green.svg") center center no-repeat;
    }
      .arrow--yellow:hover {
      background: #eaaa00;
    }
      .arrow--yellow:hover.arrow--prev::before {
      background: url("icon-arrow-left-green.svg") center center no-repeat;
    }
      .arrow--yellow:hover.arrow--next::before {
      background: url("icon-arrow-right-green.svg") center center no-repeat;
    }

    .arrow {
      height: 40px;
      width: 40px;
      border-radius: 100%;
    }

    &__wrap {
      /* margin: 0 -5px; */
    }
    
    .image-grid__nav {
      margin: 0;
      @media(max-width: 768px) {
        margin-top: 15px;
      }

      .arrow {
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        z-index:99;

        &--prev {
          
        }

        &--next {
          
        }
      }

      .arrow--prev {
        left: 25px;

        @media(max-width: 768px) {
          left: 10px;
          position: static;
          transform: none;
        }
      }

      .arrow--next {
        right: 25px;

        @media(max-width: 768px) {
          right: 10px;
          position: static;
          transform: none;
          margin-left: 10px;
        }
      }
    }


    .image-group {
      margin: 0 -5px;

      @media(max-width: 768px) {
        margin: 0 -2px;
      }

      /* &:nth-child(even) {
        .main-image {
          order: 2;

          @media(max-width: 768px) {
            order: 1;
          }
        }

        .thumbs {
          order: 1;

          @media(max-width: 768px) {
            order: 2;
          }
        }
      } */

      a {
        transition: all .17s ease;

        &:hover {
          opacity: .7;
        }
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .main-image {
      width: calc(50% - 10px);
      padding: 5px;

      @media(max-width: 768px) {
        width: calc(50% - 4px);
        padding: 2px;
      }
    }

    .thumbs {
      width: calc(50% - 10px);
      /* padding: 0 5px; */

      @media(max-width: 768px) {
        width: calc(50% - 4px);
      }

      .thumb {
        width: calc(50% - 10px);
        padding: 5px;

        @media(max-width: 768px) {
          width: calc(50% - 4px);
          padding: 2px;
        }
      }
    }

    /* .image {
      width: 25%;
      padding: 5px;

      &:nth-of-type(5n+1) {
        width: 50%;
      }
    } */
  }

  .modal--gallery {
    .modal__wrap {
      max-width: 1320px;
    }

    .modal__inner {
      padding: 30px;

      @media(max-width: 568px) {
        padding: 10px;
      }

      .modal-slider__nav {
        /* margin-top: 10px; */
        
      }

      .slider-nav .nav {
        width: 100%;
        display: none;
      }

      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
      }

      .arrow--prev {
        left: 25px;

        @media(max-width: 568px) {
          left: 10px;
        }
      }

      .arrow--next {
        right: 25px;

        @media(max-width: 568px) {
          right: 10px;
        }
      }
    }
  }

}

.template__article .page__content h2{
  font-size:40px;
      line-height: normal;
}
.template__article .page__content h3{
  font-size:35px;
   line-height: normal;
}
.template__article .page__content h4{
  font-size:30px;
   line-height: normal;
}
.template__article .page__content h5{
  font-size:25px;
   line-height: normal;
}
.template__article .page__content h6{
  font-size:20px;
   line-height: normal;
}


@media (max-width: 768px) {
  .template__article .page__content h2{
  font-size:30px;
      
}
.template__article .page__content h3{
  font-size:25px;
 
}
.template__article .page__content h4{
  font-size:20px;
  
}
.template__article .page__content h5{
  font-size:20px;
  
}
.template__article .page__content h6{
  font-size:18px;

}
}

.alert-bar {
  background: #eaaa00;
  padding: 10px 0;

  p {
    line-height: 1;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 13px;

    @media( max-width: 768px) {
      line-height: 1.3;
      font-size: 12px;
    }
  }

  a{
    color: #fff;
  }

  .close--alert {
    img {
      filter: invert(1);
    }
  }
}