.view-slideshow {
  color: #fff;
  img {
    width: 100%;
    height: auto;
    max-width: none;
    transform: translate(0, -13%);
  }
  .promo-container {
    position: relative;
    height: 250px !important;
    // max-width: 1680px;
  }
  .swiper-wrapper {

  }
  .swiper-slide {
    overflow: hidden;
    position: relative;
    // background-attachment: fixed;
    background-size: cover;

    .container.inner {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      height: 280px;
    }

    .overlay {
      background: rgba(4,42,76,0.5);
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#000000', endColorstr='#000000'); /* IE */
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
   // .btn-wrapper {
//      position: absolute;
//      bottom: 70px;
//      left: 0;
//      width: 100%;
//      z-index: 999;
//      text-align: center;
//
//      @include breakpoint($br2) {
//        bottom: 120px;
//      }
//
//      .btn {
//        background: #9fd2a9; /* Old browsers */
//        background: -moz-linear-gradient(top,  #9fd2a9 0%, #85af8e 100%); /* FF3.6+ */
//        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9fd2a9), color-stop(100%,#85af8e)); /* Chrome,Safari4+ */
//        background: -webkit-linear-gradient(top,  #9fd2a9 0%,#85af8e 100%); /* Chrome10+,Safari5.1+ */
//        background: -o-linear-gradient(top,  #9fd2a9 0%,#85af8e 100%); /* Opera 11.10+ */
//        background: -ms-linear-gradient(top,  #9fd2a9 0%,#85af8e 100%); /* IE10+ */
//        background: linear-gradient(to bottom,  #9fd2a9 0%,#85af8e 100%); /* W3C */
//        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9fd2a9', endColorstr='#85af8e',GradientType=0 ); /* IE6-9 */
//
//        -moz-border-radius: 8px;
//        -webkit-border-radius: 8px;
//        border-radius: 8px;
//
//        color: #fff;
//      }
//    }
//
//  }
//  .views-field-title {
//    position: absolute;
//    //bottom: 40%;
//    left: 0;
//    top: 20%;
//    width: 100%;
//    color: #fff;
//    font-size: 22px;
//    line-height: 1.4em;
//    font-weight: 500;
//    //text-align: center;
//    text-align: left;
//    text-shadow: 0 2px 5px rgba(225, 225, 225, 0.5);
//    z-index: 1;
//
//
//    @include breakpoint($br1) {
//      font-size: 30px;
//      font-weight: 500;
//      line-height: 1.3em;
//    }
//    @include breakpoint($br2) {
//      line-height: 1.5em;
//      font-weight: 500;
//    }
//    @include breakpoint($br3) {
//      font-size: 58px;
//      font-weight: 500;
//    }
//    .field-content {
//      display: block;
//      padding: 0 20px;
//      @include breakpoint($br3) {
//        max-width: 1120px;
//        margin: 0 auto;
//        padding: 0 40px;
//      }
//    }
//  }

.slideshow-text {
  position: absolute;
  top: 60px;
  width: 100%;
}


.slideshow-title {
  position: relative;
  left: 0;
  display: block;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  z-index: 1;
  .title {
    display: block;
    font-size: 22px;
    line-height: 1.2em;
    //text-shadow: 0 2px 5px rgba(225, 225, 225, 0.5);
    padding: 0 0 20px;
    font-weight: 400;
    margin: 0 auto;

    @media (min-width: 480px) {
      font-size: 32px;
    }
    @media (min-width: 768px) {
      // line-height: 1.5em;
    }
    @media (min-width: 980px) {
      //max-width: 1120px;
      margin: 0 auto;
      //padding: 0 40px 20px;
      padding: 0 30px 20px;
    }
  }
  .highlight {
    display: block;
    @media (min-width: 980px) {
      //max-width: 1120px;
      margin: 0 auto;
      //padding: 0 40px;
      padding: 0 20px;
    }
    a {
      background: rgba(92, 119, 98, 0.6);
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5c7762', endColorstr='#5c7762'); /* IE */
      border-radius: 0;
      color: #fff;
      text-transform: uppercase;
      padding: 9px 12px;
    }
  }
}
.promo-text {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  z-index: 1;
  @media (min-width: 980px) {
    padding: 0 50px;
  }
  .text {
    display: block;
    padding: 0 0 20px;
    font-size: 22px;
    line-height: 1.5em;
    font-weight: 400;
    @media (min-width: 980px) {
      margin: 20px auto;
      padding: 0 30px 20px;
    }
  }
  h2 {
    margin: 0;
    font-size: 16px;
  }
}
.promo-button {
  position: absolute;
  bottom: 60px;
  left: 0;
  display: block;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  z-index: 1;
  @media (min-width: 980px) {
    padding: 0 50px;
  }
  .button {
    display: inline-block;
    color: white;
    font-size: 15px;
    font-weight: 600;
    a {
      display: block;
      color: white;
      letter-spacing: 0px;
      padding: 8px 22px;
      border-radius: 3px;
      border: 1px solid white;
      white-space: nowrap;
      @include breakpoint($breakpoint-xs){
        display: inline-block;
      }
      &:hover,
      &:focus {
        color: $color-iota;
        background: #fff;
        border-color: white;
        text-decoration: none;
      }
      &:first-child {
        @include breakpoint($breakpoint-xs){
          margin-right: 15px;
        }
      }
      &:nth-child(2) {
        margin-top: 10px;
        @include breakpoint($breakpoint-xs){
          margin-left: 15px;
          margin-top: 0;
        }
      }
    }
  }
}


.video-embed-field-responsive-video {
  position: relative;
}

.video-embed-field-responsive-video:after {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}

.video-embed-field-responsive-video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.video-embed-field-responsive-modal {
  max-width: 100%;
}


.swiper-pagination,
.swiper-pagination-slider {
  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: $color-eta;
    position: relative;
    &:before {
      content: "";
      width: 25px;
      height: 25px;
      position: absolute;
      left: -8px;
      top: -8px;
    }

    &.swiper-pagination-bullet-active {
      &:after {
        content: "";
        border: 1px solid $color-alpha;
        width: 18px;
        height: 18px;
        position: absolute;
        border-radius: 50%;
        left: -5px;
        top: -5px;
      }
    }
  }
}