// ***** SLIDER SECTION ***** //

.wrapper-slider{
  background-color: $color__background-dark;
  overflow: hidden;
  position: relative;
  .slide-item{
    width: 100%;
    color: $color__text-white;
    padding-top: 10%;
    padding-bottom: 8%;
    @include cover-background();
    @include small-device(){
      padding-bottom: 20%;
    }
    &:not(:first-child){
      display: none;
      visibility: hidden;
    }
    .slider-title{
      margin-bottom: 2px;
      line-height: 1;
      opacity: 0;
      @include transition(opacity 0.5s linear 1s);
      a{
        color: $color__text-white;
        font-family: $font__title;
        font-weight: 700;
        text-transform: uppercase;
        @include font-size(3);
        @include mobile-device(){
        @include font-size(1.5);
        }
        &:hover{
          color: $color__link-hover;
        }
      }
    }
    .text-content{
      line-height: $font__line-height-title;
      margin-top: 20px;
      opacity: 0;
      @include transition(opacity 0.5s linear 1.5s);
    }
    .btn-holder{
      margin-top: 40px;
      @include font-size(1.125);
      opacity: 0;
      @include transition(opacity 0.5s linear 2s);
      .button{
        display: inline-block;
      }
    }
  }
  .controls{
    bottom: 0;
    height: 110px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    width: 60px;
    z-index: 999;
    #charitize-prev,
    #charitize-next{
      display: block;
      margin: 5px 15px 5px 5px;
      @include clearfix();
      i,
      i:visited{
        color: $color__text_base_light;
        background-color: lighten($color__background_base_dark, 20%);
        padding: 10px 15px 13px;
        @include font-size(1);
        @include border-radius(2px);
        @include mf-large-device(){
          padding: 12px 20px 13px;
          @include font-size(1.5);
        }
        &:hover,
        &:focus,
        &:active{
          background-color: $color__background-primary;
        }
      }
    }
    #charitize-prev{
      @include mobile-device(){
        margin-left: 5px;
      }
    }
    #charitize-next{
      @include mobile-device(){
        margin-right: 5px;
      }
    }
  }
  #charitize-pager{
    text-align: center;
    position: absolute;
    bottom: 30px;
    z-index: 999;
    width: 100%;
    span{
      height: 5px;
      width: 40px;
      margin-left: 5px;
      margin-right: 5px;
      cursor: pointer;
      background-color: #828d91;
      display: inline-block;
      font-size: 0;
      &:hover{
        background-color: #d9dede;
        @include transition(background-color 0.5s);
      }
    }
    .cycle-pager-active{
      background-color: #d9dede;
    }
  }
}

.wrapper-slider .cycle-slide-active .slider-title,
.wrapper-slider .cycle-slide-active .btn-holder,
.wrapper-slider .cycle-slide-active .text-content{
  opacity: 1;
}
.wrapper-slider .cycle-slide-active .banner-content-holder{
  padding-left: 0;
}