.link-hover() {
  &::after {
    content : "";
    position : absolute;
    width : 100%;
    height : 3px;
    background-color: @red;
    bottom: 0;
    left: 0;
    transform : scaleX(0);
    transform-origin: bottom right;
    transition : transform 0.25s linear;
  }
  &:hover::after {
    transform-origin: bottom left;
    transform: scaleX(1);
  }
}

.box-shadow() {
  box-shadow: 1px 1px 10px grey;
}

.image-hover-effect() {
  .image-wrapper {
    position: relative;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 375px;
    min-width: 350px;

    &.--rods {
      background-image: url(img/riggingrodslarge.jpg);
    }
    &.--facets {
      background-image: url(img/product_multi-facet.jpg);
    }
    &.--heads {
      background-image: url(img/product-image_multi-head.jpg);
    }
    &.--plates {
      background-image: url(img/product_plate.jpg);
    }

    &.--home-hero {
      background-image: url(img/msp_main-hero.png);
    }

    &.--applebox {
      background-image: url(img/multis_applebox_slideshow.png);
    }
    &.--bulk {
      background-image: url(img/multis_bulk_slideshow.png);
    }
    &.--rig {
      background-image: url(img/multis_camerarig_slideshow.png);
    }
    &.--car {
      background-image: url(img/multis_car_slideshow.png);
    }

    &.--shop {
      background-image: url(img/multis_shop_slideshow.png);
    }
  }

  .image {
    display: block;
    width: 100%;
    height: auto;
  }

  .rotate {
    transform: rotate(180deg);
  }

  .image-overlay {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(49, 54, 56, .85);

    &__copy {
      font-size: 18px;
      font-family: @accent_font;
      font-weight: 300;
      padding: 0 2rem;
      color: @white;

      &.--cost {
        font-size:24px;
        text-align: center;
        padding: 0;
        margin: 0 auto;
        display: block;
      }
    }

    &__product-header {
      font-size: 24px;
      font-family: @main_font;
      font-weight: 600;
      padding: 0 0;
      margin: 10px auto;
      text-align: center;
      display: block;
      color: @red;
    }

    &__product-select  {
      font-family: @main_font;
      font-size: 16px;
      color: @bodycopy;
      padding:10px 2rem;
    }
  }

  @media only screen and (max-width: 765px) {
    .image-wrapper .image-overlay {
      opacity: 1;
    }  
  }

  .image-wrapper:hover .image-overlay {
    opacity: 1;
  }
}

@bodycopy: #313638;
@white: #FFFFFF;
@dk_grey: #313638;
@red: #AD2E24;
@main_font:'Manrope', sans-serif;
@accent_font: 'Gruppo', sans-serif;


body {
  padding: 0;
  margin:0;
  font-family: @main_font;
}

.button-default {
  color: @white;
  background: @red;
  transition: transform 300ms ease-in-out;
  border: none;
  padding: 1rem 2rem;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  &.--small {
    padding:10px 2rem;
  }

  &.--order {
    margin: 10px auto 0;
  }
  &:hover {
    transform: scale(1.05);
  }
}

.main {
  // @media only screen and (max-width: 765px) {
  //   padding-bottom: 5rem;
  // }
  .navigation {
    background-color: @dk_grey;
    font-family: @accent_font;
    color: @white;
    top:0;
    padding:10px 0;
    display: flex;
    justify-content: space-between;

    @media only screen and (max-width: 765px) {
      // flex-direction: column;
      // justify-content: center;
      padding: 10px 20px;
      height: 80px;
    }

    &__button {
      color: @red;
      font-size: 24px;
      background: none;
      border: none;
      display: none;

      @media only screen and (max-width: 765px) {
        display: block;
      }
    }

    &__logo-link {
      display: flex;
      align-items: center;

      img {
        width: 70px;
      }
    }

    &__home-link {
      margin: 0;
      padding:0;
      font-size: 30px;
      color: @white;
      text-decoration: none;

      span {
        text-decoration: underline;
        text-decoration-color: @red;
      }

      @media only screen and (max-width: 765px) {
        font-size: 22px;
        max-width: 50%;
      }
    }


    &__nav-links {
      display: flex;
      align-items: center;
      list-style-type: none;
      margin: 1rem;
      font-size: 24px;
      li {
        a {
          position : relative;
          display : inline-block;
          text-decoration: none;
          color: @white;
          .link-hover();
        }
      }
      span {
        color: @red;
      }

      @media only screen and (max-width: 765px) {
        right: -500px;
        &.active {
          display: flex;
          position: fixed;
          flex-direction: column;
          justify-content:space-evenly;
          background: @white;
          top:100px;
          z-index: 2;
          margin: 0;
          .box-shadow();

          a {
            color: @dk_grey;
            margin: 1rem 0;
            text-decoration: underline;
            text-decoration-color: @red;
          }
          span {
            display: none;
          }
        }
        display: none;
      }
    }
  }

  .home-page {
    margin: 2rem 0;
    min-height: 100vh;
    .image-hover-effect();

    &__header {
      color: @red;
    }

    &__image-wrap {
      width: 50%;
      @media only screen and (max-width: 765px) {
        width: 90%;
      }
    }

    &__hero {
      max-width: 100%;
      margin: 0 auto;
      display: block;
      margin: 1rem 0;
      .box-shadow();
    }

    &__intro {
      background-color: @red;
      margin: 2rem auto;
      width:75%;

      @media only screen and (max-width: 765px) {
        width: 90%;
      }

      &--copy {
        color: @white;
        padding: 2rem;
        margin:0 auto;
      }
    }
  }

  .products {
    margin: 5% 0;
    min-height: 90vh;

    &__card-row {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;

      @media only screen and (max-width: 765px) {
        flex-direction: column;
        justify-content: center;
      }
    }

    &__card {
      width:350px;
      max-width: 30%;
      min-width: 350px;
      align-self: center;
      .image-hover-effect();

      @media only screen and (max-width: 765px) {
        max-width: 90%;
        width: 75%;
      }

    }

    &__card-header {
      font-family:@accent_font;
      font-weight: thin;
      text-align: center;
    }

    &__card-inner {
      img{
        .box-shadow();
      }
    }
  }

  .paypal-purchase-disc {
    display:flex;
    justify-content: center;
    align-items: center;
  }

  .footer{
    background: @dk_grey;
    padding:1rem 0;
    display: flex;
    justify-content: space-between;
    width:100%;
    // position: absolute;
    bottom: 0;

    @media only screen and (max-width: 765px) {
      flex-direction: column;
      text-align: center;
      // position: relative;
    }
    &__copy {
      font-size: 14px;
      color:@white;
      padding: 0 1rem;
      margin: 0;

      a {
        color: @white;
        display : inline-block;
        text-decoration: none;
        .link-hover();
      }
    }
  }

  .slide-show{
    width: 75%;
    margin:0 auto;
    // display:flex;
    // justify-content: space-evenly;
    .box-shadow();

    .image-wrapper {
      min-width: auto;
      height: 60vh;
    }

    @media only screen and (max-width: 765px) {
      .image-wrapper .image-overlay {
        opacity: 0;
      }  
    }
  
    .slick-prev{
        display: block;
        // height: 20px;
        // width: 20px;
        position: relative;
        background: url('https://img.icons8.com/ios-filled/50/AD2E24/circled-chevron-left.png') no-repeat;
        border: none;
        
      }
  
      .slick-next{
        display: block;
        position: relative;
        // height: 20px;
        right: 0;
        // width: 20px;
        background: url('https://img.icons8.com/ios-filled/50/AD2E24/circled-chevron-right.png') no-repeat;
        border: none;
      }
  }
}