#splash-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  @media @portrait {
    background-position: center center;
  }
  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;
    background-size: contain;
    background-repeat: no-repeat;
    
    top: 2vh;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);

    width: 70vh;
    height: 70vh;
    max-width: 30%;

    @media @portrait {
      position: relative;
      background-position: center center;
      top: 0;
      height: 25%;
      max-width: 55vh;
    }
  }

  .features-container {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 70%;
    top: calc( 50vh - 45% );
    @media @portrait {
      flex-direction: column-reverse;
      height: 65%;
      top: 0vh;
      justify-content: center;
    }

    @media (max-aspect-ratio: 2/3) {
      height: 72%;
    }

    .feature-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: start;
      width: 50%;
      height: 100%;

      @media @portrait {
        width: 100%;
        height: 38%;
        top: -9%;
        position: relative;
        margin-bottom: 5%;
      }
      &:first-of-type {
        @media @landscape {
          padding-right: 5%;
        }
        @media @portrait {
          top: -6%;
        }
      }
  
      &:last-of-type {
        @media @landscape {
          padding-left: 5%;
        }
        @media @portrait {
          top: -12%;
        }
      }
      .feature-image {
        position: relative;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 24vw;
        @media @portrait {
          height: 90%;
          max-height: 90%;
        }
        text-align: center;
        vertical-align: middle;
        video {
          @media @landscape {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 13%;
            width: auto !important;
            height: 80%;
          }
          @media @portrait {
            position: relative;
            top: 8%;
            height: 87%;
            max-height: 85%;
            max-width: 86%;
          }
        }
      }

      .feature-text {
        @fontSize: 5vmin;
        font-family: @font-family;
        font-size: @fontSize;
        color: #ffc437;
        text-shadow: 2px 3px #000047;
        -webkit-text-stroke: 1px #000047;
        text-align: center;
        margin-top: 5px;
        @media @portrait {
          -webkit-text-stroke: 0px;
          margin-top: 5px;
        }
        @media @landscape {
          min-height: 90px;
        }
        @media @mobile {
          -webkit-text-stroke: 0px;
        }
        @media screen and ( max-width: 1024px ) {
          font-size: 4.7vmin;
          -webkit-text-stroke: .1px #000047;
        }
      }
    }

    .feature-divider {
      display: none;

      @media @portrait {
        top: -3%;
        position: relative;
        display: block;
        height: 3px;
        width: 80%;
        margin-left: 10%;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#ffffff), to(transparent));
        background-image: -webkit-linear-gradient(180deg, transparent, #ffffff, transparent);
        background-image: -moz-linear-gradient(180deg, transparent, #ffffff, transparent);
        background-image: -o-linear-gradient(180deg, transparent, #ffffff, transparent);
        background-image: linear-gradient(90deg, transparent, #ffffff, transparent);
      }
    }
  }

  .continue {
    @fontSize: 4vmin;
    position: absolute;
    left: 50%;
    font-weight: 500;
    transform: translateX(-50%);
    font-family: @font-family;
    font-size: @fontSize;
    color: #d2dbe4;  
    text-align: center;
    cursor: pointer;
    bottom: 6%;
    width: 100%;
    animation-name: glow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 1s;

    @keyframes glow {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }

      100% {
        opacity: 1;
      }
    }
  }
}