#splash-screen {

  @shadowColor: #36200d;
  @strokeColor: #a33800;
  @defaultYellowColor: #fef736;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("../assets/common/splash/splash_bkg.png");
  background-size: cover;
  background-position: center;

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

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

    100% {
      opacity: 1;
    }
  }

  #logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: auto;

    @media @landscape {
      top: 6%;
      max-width: 45vw;
      max-height: 33vh;
    }

    @media @portrait {
      top: 5%;
      max-width: 90vw;
      max-height: 24vh;
    }
  }

  #win_cap_info {

    .top, .middle, .bottom {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-family: @font-family;
      text-align: center;

      @media @landscape {
        top: 52%;
        font-size: 2.8vmax;
        word-wrap: break-word;
        max-width: 18vw;
        @media (min-aspect-ratio: 5/2) {
          font-size: 2.5vmax;
          max-width: 30vw;
        }
      }
  
      @media @portrait {
        top: 32%;
        font-size: 7.5vw;
        width: 80%;
        max-width: 80vw;
        @media (min-aspect-ratio: 1/2) {
          font-size: 5.5vw;
        }
      }
    }
    
    .top {
      background-image: -webkit-linear-gradient(#fcea40, #dc9223);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .middle {
      -webkit-text-stroke: 0.5vmin @strokeColor;
    }    

    .bottom {
      margin-top: 0.2vh;
      -webkit-text-stroke: 0.8vmin @shadowColor;
    } 
  }

  #continue {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: @font-family;
    font-size: 4vmin;
    color: @defaultYellowColor;
    text-shadow: 0vmin 0.5vmin 0.5vmin @shadowColor;
    text-align: center;
    cursor: pointer;

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

    @keyframes glow {
      0% {
        color: @defaultYellowColor;
      }
      25% {
        color: #feffcc;
      }
      100% {
        color: @defaultYellowColor;
      }
    }
  }

  #base_feature, #bonus_feature {
    transition: left 0.5s;
    position: absolute;
    width: 100%;
    height: 64%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    max-height: 55vw;
    
    @media @portrait {
      max-height: none;
      height: 48%;
    }
  }

  #base_feature {
    background-image: url("../assets/common/splash/base_feature.png");
    @media @landscape {
      left: -21%;
      top: 36%;
    }
    @media @portrait {
      //background-image: url("../assets/common/splash/base_feature_portrait.png");
      bottom: 8%;
    }
  }

  #bonus_feature {
    background-image: url("../assets/common/splash/bonus_feature.png");
    @media @landscape {
      left: 25%;
      top: 36%;
    }
    @media @portrait {
      //background-image: url("../assets/common/splash/bonus_feature_portrait.png");
      bottom: 8%;
    }
  }

  .controls {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 84%;
    width: 85%;
    left:7.5%;
    
    [class^="arrow-"] {
      font-family: @font-family;
      font-size: 12vmin;
      color: @defaultYellowColor;
      -webkit-text-stroke: 0.2vmin#feffcc;
      text-shadow: 0.4vmin 0.6vmin 0.25vmin @shadowColor;
      text-align: center;
      cursor: pointer;
      padding: 2vw;
      -webkit-user-drag: none;
      @media @landscape {
        display: none;
      }
    }
  }
}