.ce-banas-slider {
  background-color:#000;  

  .cl-slide{
    height:100vh;
    width:100%;

    .admin-bar &{
      height: calc(100vh - 32px);
    }



    .image-wrapper{
      position:absolute;
      top:50%;
      right:20%;
      @include transform(translateY(-50%) scale(0.8, 0.8));
      @media (max-width:991px){
        right:auto;
        left:30%;
      }
      @media (max-width:767px){
        right:auto;
        left:0%;
      }

      
      @include transition(all 0.5s);

      img{
        max-width:970px;
        max-height:645px;
      }
      .overlay{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
      }
    }

    .content{
      position:absolute;
      left:20%;
      top:50%;
      @include transform(translateY(-50%));
      z-index:999;
      @media (max-width:991px){
        left:10%;
        width:90%;
      }
      h2{
        font-weight: 500;
        font-size: 120px;
        line-height: 100px;
        letter-spacing: -0.02em;
        
        word-break: break-word;
        max-width: 770px;

        opacity:0;
        @include transform(translateY(20px));
        @include transition(all 0.5s);
        transition-delay: 0.2s;

        @media (max-width:767px){
          font-size:54px;
          line-height:68px;
        }

        a{
          color: #FFFFFF;
        }

        a:hover{
          color:inherit;
        }
      }

      .view-project{
        margin-top:64px;
        font-weight: 500;
        font-size: 16px;
        line-height: 26px;
        color: rgba(255,255,255,0.8);
        text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);   
        display:block;
        
        opacity:0;
        @include transform(translateY(20px));
        @include transition(all 0.5s);
        transition-delay: 0.8s;
        &:hover{
          color: rgba(255,255,255,1) !important;
        }
        i{
          margin-left:5px;
        }
        svg{
          margin-left:5px;
        }
      }
    }

    .desc{
      max-width:370px;
      font-weight: normal;
      font-size: 16px;
      line-height: 26px;
      margin-top:40px;
      color: #FFFFFF;

      text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
      opacity:0;
      @include transform(translateY(20px));
      @include transition(all 0.5s);
      transition-delay: 0.4s;

      p{
        margin:0;
        color:#fff;
      }
    }



    
  }
  

  .navigation{
    
  }

  .swiper-slide.start-anim{
    .content h2{
      
      opacity:1;
      @include transform(translateY(0));
    
    }
    .image-wrapper{
      opacity:1;
      @include transform(translateY(-50%) scale(1.0, 1.0));
    }
    .content .desc{
      opacity:1;
      @include transform(translateY(0));
    }

    .content .view-project{
      opacity:1;
      @include transform(translateY(0));
    }
  }

  .scroll{
    position:absolute;
    top:50%;
    left:75px;
    height:80px;
    width:36px;
    z-index:9999;
    opacity:1;
    @include transition( opacity 0.3s );
    @media (max-width:991px){
      display:none;
    }
    @include transform( translateY(-50%) );
    span{
      font-size:16px;
      line-height:28px;
      width:36px;
      color:#fff;
      position:absolute;
      text-align:center;
      @include transform( rotate(-90deg) );
    }
    svg{
      position: absolute;
      bottom: -4px;
      right: 10px;
    }
  }

  .pagination{
    position:absolute;
    top:50%;
    @include transform(translateY(-50%) rotate(90deg));
    color: #fff;
    z-index: 999;
    right: 0px;
    width:484px;
    overflow:hidden;
    @media (max-width:991px){
      display:none;
    }
    a{
      font-size: 20px;
      line-height: 32px;
      background:none;
      color: #FFFFFF;

      opacity: 0.5;
      text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
      position:relative;
      margin:0 65px;
      @include transition(all 0.3s);
      &:hover{
        opacity:1;
      }
      &:before{
        content: "";
        height: 2px;
        top: 12px;
        position: absolute;
        left: -30px;
        background: #fff;
        opacity: 0.5;
        @include transition(all 0.3s);
      }

      &.current{
        opacity:1;
        &:before{
          width: 20px;
        }
      }

      &.next:before{
        width: 40px;
        left:-50px;
      }
    }


  }
}