.splash {
  font-family: @font-family;
  position: absolute;
  z-index: 1000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  background-image: url("assets/common/splashAndLoading/bg.webp");
  height: 100%;

  .logo-container {
    flex: 1.3;
    display: flex;
    align-items: end;
    height: 100%;
    min-height: 0;

    @media @portrait {
      transform: scale(0.8);
    }

    img {
      width: 100%;
      object-fit: contain;
      max-width: 235px;
      margin: 0 auto;
    }
  }

  .text-container {
    flex: 0.6;
    font-size: 5.0vmin;
    color: #cce7f2;
    text-align: center;

    span {
      background-image: linear-gradient(180deg, #FFC102 0%, #FEE94F 50%, #FFC102 50%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-box-decoration-break: clone;
      background-clip: text;
      box-decoration-break: clone;
    }
  }

  .video-container {
    z-index: 3000;
    flex: 3;
    min-height: 0;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: stretch;
    margin: 6vh auto auto;
    max-width: 780px;
    position: relative;
    @media @portrait {
      margin-bottom: 12vw;
    }

    .video-box {
      display: inline-flex;
      position: relative;
      text-align: center;
      width: 100%;
      height: 100%;
      min-height: 0;
      max-width: 580px;


      & > div {
        margin: 0 auto;
        position: relative;
        height: 100%;
        
      }
      @media @landscape {
        div:first-child {
          height: 100%;
        }
      }

      img {
        height: 100%;
        width: 100%;
        object-fit: contain;
      }

      video {
        position: absolute;
        top: 201px;
        left: 15px;
        width: calc(100% - 28px);
      }

      .video-title{
        position: absolute;
        top: 149.5px;
        display: flex;
        align-items: center;
        font-size: 1.4rem;
        color: #0F0;
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: 9;

        @media @portrait {
          font-size: 1.6rem;
        }
        &.small {
          top: 155.5px;
          font-size: 1rem;
        }
        &.medium {
          top: 154.5px;
          font-size: 0.85rem;
        }
      }

      .video-description {
        position: absolute;
        bottom: 35px;
        align-items: center;
        font-size: 1.1rem;
        color: #0F0;
        width: 100%;
        display: flex;
        justify-content: center;
        max-width: calc(100% - 30px);
        left: 15px;
        right: auto;
        &.small{
          font-size: 0.92rem;
          bottom: 38px;
        }
        &.medium{
          font-size: 0.8rem;
        }
        &.large{
          font-size: 0.76rem;
        }
        &.extralarge{
          font-size: 0.7rem;
        }
      }
    }
  }
  .custom-arrow {
    position: absolute;
    top: 67%;
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    @media @portrait{
      top: auto;
      bottom: clamp(max(-23%, -90px), calc(0.9 * (55vh - 54vw) - 308px), 150px);
    }
  }
  .custom-arrow.left {
    left: calc(50% - min(100vw / 2 - 10px, 335px));
   @media @portrait{
      left: calc(50% - min(100vw - 95px, 60px));
    }
  }
  
  .custom-arrow.right {
    right: calc(50% - min(100vw / 2 - 10px, 335px));
    @media @portrait{
      right: calc(50% - min(100vw - 95px, 60px));
    }
  }
  
  .custom-arrow img {
    width: 50px;
    height: auto;
    max-width: min(10vw, 9vh);
  }
  .continue-container {
    flex: 0.8;
    display: flex;
    align-items: center;
    font-size: 4.0vmin;
    color: white;
    text-shadow: 0px 0.5vmin 0px black;
    animation: clickToContinueIdle 2s forwards infinite;
    transition: 0.1s;
    scale: 1;
    margin: 0 auto;
    cursor: pointer
  }

  .continue-container:hover {
    animation: none;
    scale: 1.05;
  }

  // Styling for slider

  .awssld {
    height: 100%;
    width: 100%;
  }

  .awssld__content {
    background: none;
    width: 100%;
    height: 100%;
  }

}

@keyframes clickToContinueIdle {
  0% {
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  
  50% {
    animation-timing-function: ease-in-out;
    opacity: 0.5;
  }

  100% {
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
}

.km_KH .splash .video-container .video-box .video-title{
  top: 150.5px;
  font-size: 1.1rem;
}
.km_KH .splash .video-container .video-box .video-description{
  font-size: 1rem;
}