#splash-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("@{assetPath}/common/splash/splash_screen_background.png");
  background-size: cover;
  background-position: 50% 52%;

  animation-name: fadeIn;
  animation-timing-function: linear;
  animation-duration: 0.2s;

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .logo {
    position: absolute;
    left: 50vw;
    transform: translateX(-49%);
    height: 21%;
    top: 5vh;
    @media @portrait {
      max-width: 100vw;
      width: 25vh;
      height: auto;
    }
  }

  .chapo {
    position: absolute;
    left: 50vw;
    top: 28vh;
    transform: translate(-50%, 0);
    height: 61%;
    max-height: 33vw;
    @media @portrait {
      visibility: hidden;
    }
    @media @landscape {
      visibility: visible;
    }
  }

  .preview-feature-1,
  .preview-feature-2 {
    position: absolute;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;

    @media @landscape {
      top: 40vh;
      transform: translate(0, -50%);
      width:70vh;
      max-width: 38vw;
    }

    @media @portrait {
      left: 50vw;
      transform: translate(-50%, 0%);
      width:35vh;
      max-width: 80vw;
    }

    &.preview-feature-1 {
      @media @landscape {
        left: 50vw;
        transform: translate(-130%, -50%);
      }
      @media @portrait {
        top: 20vh;
      }
    }
    &.preview-feature-us {
      @media @landscape {
        transform: translate(-50%, -25%);
      }
      @media @portrait {
        top: 40vh;
      }
    }

    &.preview-feature-2 {
      @media @landscape {
        right: 50vw;
        transform: translate(130%, -50%);
      }
      @media @portrait {
        top: 48vh;
      }
    }

    img {
      @media @landscape {
        width:70vh;
        max-width: 38vw;
        max-height: 55vh;
      }
      @media @portrait {
        width:35vh;
        max-width: 80vw;
      }
    }

    p {
      font-family: 'Troika', 'Arial', 'Helvetica', 'sans-serif';
      color: @ui-orange-bright;
      padding-left: 3vmin;
      padding-right: 3vmin;
      text-shadow: 0 0.5vmin 0.1vmin #301313;
      margin-top: -2vmin;
      width: 100%;
      text-align: center;
      
      @media @landscape {
        position: absolute;
        max-width: 100%;
        font-size: 5.5vmin;
      }
      @media @portrait {
        position: absolute;
        max-width: 100%;
        font-size: 3vh;
      }
    }
  }

  .continue {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Troika', 'Arial', 'Helvetica', 'sans-serif';
    color: @ui-orange-bright;
    text-shadow: 0 1vmin 0.2vmin #301313;
    text-align: center;
    cursor: pointer;
    bottom: 5vh;
    @media @landscape {
      font-size: 7vmin;
    }
    @media @portrait {
      font-size: 3vh;
      bottom: 4vh;
    }

    animation-name: glow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 0.8s;

    @keyframes glow {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.6;
      }
      100% {
        opacity: 1;
      }
    }
  }
}