.ce-lana-slider{    

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

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

    .image-wrapper{

      position:absolute;
      top:50%;
      left:50%;
      @include transform(translate(-50%, -50%) scale(0.8, 0.8));
      @include transition(all 0.5s);
      width:1170px;
      height:705px;
      max-height:100%;
      max-width:80%;

      opacity:0;

      img{
        object-fit:cover;
        width:100%;
        height:100%;
        position:relative;
      }

      .overlay{
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background:rgba(0,0,0,0.2);
      }
    }

    .title{
      
       @include xl{
        position:absolute;
        left:75px;
        top:50%;
        @include transform(translateY(-50%));
      }
     
      z-index:999;
      h2{
        font-size:160px;
        line-height:140px;
        font-weight:500;
        letter-spacing: -0.04em;
        
        word-break: break-word;
        max-width: 760px;
        @media (max-width:768px){
          font-size: 48px;
          line-height:60px;
        }
        opacity:0;
        @include transform(translateY(20px));
        @include transition(all 0.5s);
        transition-delay: 0.3s;

        a{
          color: #FFFFFF;
        }

        a:hover{
          color:#ffffff !important;
        }
      }
    }

    .desc{
      
      @include xl{
        position: absolute;
        bottom: 100px;
        right: 275px;
        width: 370px;
      }
     
      font-size: 20px;
      line-height: 32px;

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

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

    
  }
  .project-number{
    @include xl{
      position:absolute;
      bottom:40px;
      right:75px;
    }
    @media (max-width:1199px){
      position: absolute;
      bottom: 15px;
      right: 15px;
    }
    font-weight: 500;
    font-size: 36px;
    line-height: 42px;
    color:#fff;
    text-align: right;
    @include transition(all 0.3s);
    
    z-index:999;
    .text{
      display:block;
    }
  }

  .navigation{
    position:absolute;
    @include xl{
      
      top:50%;
      @include transform(translateY(-50%));
      right:75px;
    }
    @media (max-width:1199px){
      position: absolute;
      bottom: 15px;
      left: 15px;
      text-align:left !important;
    }
    font-weight: 500;
    font-size: 36px;
    line-height: 42px;
    text-align: right;
    z-index:999;
    
    a{
      display:block;
      color:#fff;
      @include transition(all 0.3s);
    }
  }

  .ce-lana-slider--skin-dark &{
    .desc{

      p{
        color:#000;
      }
    }

    .title h2 a{
      color:#000;
      &:hover{
        color:#000 !important;
      }
    }

    .image-wrapper .overlay{
      background:rgba(255,255,255,0.2);
    }

    .project-number{
      color:#000;
    }

    .navigation{
      a{
        color:#000;
      }
      
    }
  }

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

  .content-wrapper{
    @media (max-width:1199px){
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 60px;
      text-align: center;

      h2 p{
        padding:0;
        margin:0;
      }

      .desc{
        margin-top:20px;
      }
    }
  }
}