/* --------------------------------

Slider

-------------------------------- */
// colors

$color-1: #2c343b; //
$color-2: #d44457; //
$color-3: #ffffff; // White

// fonts

$primary-font: 'Open Sans', sans-serif;

// header height

$header-S: 50px;
$header-M: 70px;

// intro height

$intro-height-S: 360px;
$intro-height-M: 470px;
$intro-height-L: 595px;
.salescrowd-slider-wrapper {
  position: relative;
  @include font-smoothing;
}


.bubbles-slider {
  position: absolute;
  top: 40px;
  z-index: 200;
  right: 50px;
  width: 42px;
  height: 100px;
  i {
    z-index: 2;
    position: absolute;
    z-index: 201;
    height: 8px;
    width: 8px;
    border-radius: 16px;
    opacity: 0;
    animation: bubble-one linear 3s infinite;
  }
}

.salescrowd-nav-wrapper {
  @include outer-container;
  max-width: 68em;
  margin: 0 auto;
  position: relative;
}
.salescrowd-mobile-slide {
  h1 {
    position: absolute;
    text-align: center;
    top: -10px;
    font-size: 1.4em;
    font-weight: 600;
    color: $white;
    width: 100%;
    padding: 1em;
    color: $white;
    text-shadow: 1px 1px 1px $black;
    z-index: 1000;
    width: 100%;
  }
}

.salescrowd-static-slide {
  height: auto !important;
  padding-bottom: 0px;
  top: -40px;
  .static-image-header img {
    position: absolute !important;
  }
  h1 {
    text-align: center;
    top: 0 !important;
    margin: 0;
    margin-bottom: 0.75em;
    font-size: 1.3em;
    padding: 1em;
    line-height: 1em;
    @include clearfix;
    @include MQ(M) {
      font-size: 2.6em;
      margin-bottom: 1.6em;
    }
    @include MQ(L) {
      font-size: 4em;
      margin-bottom: 1em;
    }
    font-weight: 600;
    color: $white;
    width: 100%;
    color: $white;
    text-shadow: 1px 1px 3px $black;
    z-index: 1000;
    width: 100%;
    //box-shadow: 0px 0px 500px 500px rgba(0, 0, 0, 0.4);
    //background: rgba(0, 0, 0, 0.4);
  }
}

.salescrowd-slider {
  position: relative;
  height: $intro-height-S;
  overflow: hidden;
  background: $white;

h1 {
  position: absolute;
  text-align: center;
  top: 10px;
  font-size: 1em;
  padding: 0.5em;
  font-weight:  600;
  span {
    font-size: 0.4em;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 4px;
    &.click {
      top: 5.5em;
      position: relative;
    }
  }
  @include MQ(M) {
    top: -20px;
    font-size: 3em;
    font-weight: 600;
  }
  @include MQ(L) {
    top: 20px;
    font-size: 4em;
  }
  color: $white;
  text-shadow: 1px 1px 1px $black;
  z-index: 1000;
  width: 100%;
  //box-shadow: 0px 0px 500px 500px rgba(0, 0, 0, 0.4);
  span {
   // background: rgba(0, 0, 0, 0.4);
  }
}
  li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @include transform(translateX(100%));

    &.selected {
      /* this is the visible slide */
      position: relative;
      @include transform(translateX(0));
    }

    &.move-left {
      /* slide hidden on the left */
      @include transform(translateX(-100%));
    }

    &.is-moving,
    &.selected {
      /* the is-moving class is assigned to the slide which is moving outside the viewport */
      @include transition(transform .5s);
    }
  }

  @include MQ(M) {
    height: $intro-height-M;
  }

  @include MQ(L) {
    height: $intro-height-L;
  }
}

/* --------------------------------

Single slide style

-------------------------------- */

.salescrowd-slider {

  li {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  //li:first-of-type {
  //  background-color: $color-1;
  //}
  //
  //li:nth-of-type(2) {
  //  background-color: lighten($color-1, 8%);
  //  background-image: url('../assets/tech-1-mobile.jpg');
  //}
  //
  //li:nth-of-type(3) {
  //  background-color: lighten($color-1, 20%);
  //  background-image: url('../assets/tech-2-mobile.jpg');
  //}
  //
  //li:nth-of-type(4) {
  //  background-color: $color-1;
  //  background-image: url('../assets/video-replace-mobile.jpg');
  //}
  //
  //li:nth-of-type(5) {
  //  background-color: $color-1;
  //  background-image: url(../assets/img.jpg);
  //}

  .salescrowd-full-width,
  .salescrowd-half-width {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    /* this padding is used to align the text */
    padding-top: 100px;
    text-align: center;

    /* Force Hardware Acceleration in WebKit */
    @include backface-visibility(hidden);
    @include transform(translateZ(0));
  }

  .salescrowd-img-container {
    /* hide image on mobile device */
    display: none;

    img {
      position: absolute;
      @include center;
    }
  }

  .salescrowd-bg-video-wrapper {
    /* hide video on mobile device */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    video {
      /* you won't see this element in the html, but it will be injected using js */
      display: block;
      min-height: 100%;
      min-width: 100%;
      max-width: none;
      height: auto;
      width: auto;
      position: absolute;
      @include center;
    }
  }

  h2, p {
    text-shadow: 0 1px 3px rgba(#000, .1);
    line-height: 1.2;
    margin: 0 auto 14px;
    color: $color-3;
    width: 90%;
    max-width: 400px;
  }

  h2 {
    font-size: 2.4rem;
  }

  p {
    font-size: 1.4rem;
    line-height: 1.4;
  }

  .salescrowd-btn {
    display: inline-block;
    padding: 1.2em 1.4em;
    margin-top: .8em;
    background-color: rgba($color-2, .9);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: $color-3;
    text-transform: uppercase;
    box-shadow: 0 3px 6px rgba(#000, .1);
    @include transition(background-color .2s);

    &.secondary {
      background-color: rgba(darken($color-1, 10%), .8);
    }

    &:nth-of-type(2) {
      margin-left: 1em;
    }

    .no-touch &:hover {
      background-color: $color-2;
    }

    .no-touch &.secondary:hover {
      background-color: darken($color-1, 10%);
    }
  }

  @include MQ(M) {

    li:nth-of-type(2) {
      background-image: none;
    }

    li:nth-of-type(3) {
      background-image: none;
    }

    li:nth-of-type(4) {
      background-image: none;
    }

    .salescrowd-full-width,
    .salescrowd-half-width {
      padding-top: 150px;
    }

    .salescrowd-bg-video-wrapper {
      display: block;
    }

    .salescrowd-half-width {
      width: 45%;

      &:first-of-type {
        left: 5%;
      }

      &:nth-of-type(2) {
        right: 5%;
        left: auto;
      }
    }

    .salescrowd-img-container {
      display: block;
    }

    h2, p {
      max-width: 520px;
    }

    h2 {
      font-size: 2.4em;
      font-weight: 300;
    }

    .salescrowd-btn {
      font-size: 1.4rem;
    }
  }

  @include MQ(L) {

    .salescrowd-full-width,
    .salescrowd-half-width {
      padding-top: 220px;
    }

    h2, p {
      margin-bottom: 20px;
    }

    h2 {
      font-size: 3.2em;
    }

    p {
      font-size: 1.6rem;
    }
  }
}

/* --------------------------------

Single slide animation

-------------------------------- */

@include MQ(M) {
  .salescrowd-slider {

    .salescrowd-half-width {
      opacity: 0;
      @include transform(translateX(40px));
    }

    .move-left .salescrowd-half-width {
      @include transform(translateX(-40px));
    }

    .selected .salescrowd-half-width {
      /* this is the visible slide */
      opacity: 1;
      @include transform(translateX(0));
    }

    .is-moving .salescrowd-half-width {
      /* this is the slide moving outside the viewport
      wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
      @include transition(opacity 0s .5s, transform 0s .5s);
    }

    li.selected.from-left .salescrowd-half-width:nth-of-type(2),
    li.selected.from-right .salescrowd-half-width:first-of-type {
      /* this is the selected slide - different animation if it's entering from left or right */
      @include transition(opacity .4s .2s, transform .5s .2s);
    }

    li.selected.from-left .salescrowd-half-width:first-of-type,
    li.selected.from-right .salescrowd-half-width:nth-of-type(2) {
      /* this is the selected slide - different animation if it's entering from left or right */
      @include transition(opacity .4s .4s, transform .5s .4s);
    }

    .salescrowd-full-width h2,
    .salescrowd-full-width p,
    .salescrowd-full-width .salescrowd-btn {
      opacity: 0;
      @include transform(translateX(100px));
    }

    .move-left .salescrowd-full-width h2,
    .move-left .salescrowd-full-width p,
    .move-left .salescrowd-full-width .salescrowd-btn {
      opacity: 0;
      @include transform(translateX(-100px));
    }

    .selected .salescrowd-full-width h2,
    .selected .salescrowd-full-width p,
    .selected .salescrowd-full-width .salescrowd-btn {
      /* this is the visible slide */
      opacity: 1;
      @include transform(translateX(0));
    }

    li.is-moving .salescrowd-full-width h2,
    li.is-moving .salescrowd-full-width p,
    li.is-moving .salescrowd-full-width .salescrowd-btn {
      /* this is the slide moving outside the viewport
      wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */
      @include transition(opacity 0s .5s, transform 0s .5s);
    }

    li.selected h2 {
      @include transition(opacity .4s .2s, transform .5s .2s);
    }

    li.selected p {
      @include transition(opacity .4s .3s, transform .5s .3s);
    }

    li.selected .salescrowd-btn {
      @include transition(opacity .4s .4s, transform .5s .4s, background-color .2s 0s);
    }
  }
}

.salescrowd-slider-nav {
  position: absolute;
  width: 100%;
  bottom: 100px;
  z-index: 0;
  text-align: center;
  height: 55px;
  background-color: rgba($salescrowd-earth, .5);
  //border-radius: 3px 3px 0 0;
  ul {
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
      line-height: 55px;
      float: left;
      width: 33.33333%;
      &.selected {
        a {
          color: $white;
          background-color: rgba($salescrowd-earth, .8);
          @include transform(translate3d(0, -26px, 0));
        }
      }
      a {
        color: $salescrowd-light-orange;
        text-transform: uppercase;
        font-weight: 900;
        width: 100%;
        display: block;
        float: left;
        @include MQ(M) {
          font-size: 0.7em;
          letter-spacing: 1px;
        }
        @include MQ(L) {
          font-size: 0.9em;
        }
        height: 100%;
        padding-bottom: 60px;
        letter-spacing: 2px;
        transition: transform .2s ease-in-out;
      }
    }

  }

}

.no-js .salescrowd-slider li {
  display: none;

  &.selected {
    display: block;
  }
}

.no-js .salescrowd-slider-nav {
  display: none;
}