:root {
  --landingOtherwiseOpacity: 0.0;
  --hex1Top: -50px;
  --hex2Top: 200px;
  --hex3Top: 500px;
  --hex4Top: 600px;
  --hex5Top: 950px;
  --hex6Top: 1500px;
  --hex8Top: 1400px;
  --hex9Top: 750px;
  --hex10Top: 900px;
  --genesisOpacity: 0;
  --orbitRotation: -40deg;
}

#program-otherwise {
  opacity: var(--landingOtherwiseOpacity);
  will-change: opacity;
}


.landing-intro {
  height: 741px;
  background: linear-gradient(#333, #000000);
  width: 100%;
  color: #FFF;
  padding-left: 5%;
}

  .landing-intro #landing-intro-video {
    position: absolute;
    top: 0;
    right: -50%;
    height: 70%;
  }

  .landing-intro #intro-video-overlay {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 5;
  }

  .landing-intro .btn-synthiam {
    font-size: 25px;
    padding: 20px;
  }

  .landing-intro .back-left {
    background-position: right;
    width: 100%;
    height: 741px;
    position: absolute;
    left: 0;
    top: 50px;
    overflow: hidden;
    z-index: 2;
  }


  .landing-intro .back-right {
    background-image: url('/images/Landing/HexagonCluster2.png');
    background-position: right;
    width: 100%;
    max-width: 377px;
    height: 741px;
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 1;
  }

  .landing-intro .back-all {
    background-image: url('/images/Landing/Top Robot.jpg');
    background-position: right;
    width: 100%;
    height: 741px;
    position: absolute;
    left: 0;
    top: 50px
  }

  .landing-intro #spink1 {
    position: absolute;
    top: 340px;
    right: 50%;
    width: 73px;
    height: 64px;
    background-image: url('/images/landing/hex/spink.png');
  }

  .landing-intro h1 {
    text-transform: uppercase;
  }

  .landing-intro h1, h2 {
    color: #FFF;
  }

  .landing-intro .intro-message {
    padding-left: 0;
    padding-right: 10%;
    padding-top: 15%;
    width: 100%;
    z-index: 10;
  }

.display-4 {
  font-size: 2.5rem;
}

.display-3 {
  font-size: 3.5rem;
}

h1.main {
  font-size: 43px;
}

h2.sub {
  font-size: 25px;
}

.landing-features {
  width: 100%;
  background: black;
}

.landing-feature {
  width: 100%;
  text-align: center;
  height: 386px;
  background-size: cover;
  color: #FFF;
  padding: 100px 20px 0 20px;
  font-size: 25px;
}

  .landing-feature:hover {
    color: #fff;
  }

  .landing-feature.vision {
    background-image: url('/images/landing/features/Computer Vision block.jpg');
  }

  .landing-feature.gait {
    background-image: url('/images/landing/features/Movement Gaits.jpg');
  }

  .landing-feature.ai {
    background-image: url('/images/landing/features/Machine Learning block.jpg');
  }

  .landing-feature.speech {
    background-image: url('/images/landing/features/Speech Block.jpg');
  }

  .landing-feature.mobile {
    background-image: url('/images/landing/features/Controls Landing.jpg');
  }

  .landing-feature.navi {
    background-image: url('/images/landing/features/Navigation.jpg');
  }

.landing-target {
  background: black;
  background-position: top right;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 150px;
  background-image: url('/images/landing/HexagonCluster1.png');
}

.target-audiences article {
  width: 90%;
  background: none;
}

#landing-inTogether {
  width: 100%;
  position: relative;
}

  #landing-inTogether .message {
    top: 100px;
    padding: 100px 5% 20px 5%;
    width: 100%;
    font-size: 30px;
    z-index: 310;
  }

    #landing-inTogether .message h2 {
      color: #ce3991;
      font-size: 50px;
      /*text-transform: uppercase;*/
      width: 95%;
    }

.landing-join .stats {
  width: 100%;
  background-color: #000000;
  padding: 0px 0px 50px 0px;
  z-index: 410;
}

  .landing-join .stats .stat {
    padding: 10px 10px 20px 10px;
    font-size: 15px;
    color: #FFF;
    margin-right: 20px;
    margin-top: 5px;
    background-color: #3E2A55;
    text-align: center;
    width: 350px;
  }

    .landing-join .stats .stat .count {
      font-size: 65px;
      font-weight: bold;
    }

    .landing-join .stats .stat .label {
      font-size: 25px;
    }

#landing-genesis-container {
  height: 1475px;
  padding-top: 200px;
}

#landing-genesis {
  background-image: url('/images/Landing/Genesis back.jpg');
  background-position-x: center;
  background-position-y: center;
  width: 100%;
  height: 1275px;
  position: relative;
  opacity: var(--genesisOpacity);
  will-change: opacity;
}

  #landing-genesis .Heading {
    position: absolute;
    top: 280px;
    right: 10%;
    font-size: 40px;
    text-transform: uppercase;
    text-align: right;
  }

    #landing-genesis .Heading .heading-light {
      color: #FFF;
    }

  #landing-genesis .orbit {
    background-image: url('/images/Landing/Synth orbit.png');
    background-position-x: center;
    background-position-y: center;
    height: 581px;
    width: 538px;
    margin: 0 auto;
    top: 270px;
    position: relative;
    transform: rotate(var(--orbitRotation));
  }

    #landing-genesis .orbit .system {
      color: #FFF;
      position: absolute;
    }

      #landing-genesis .orbit .system h3 {
        color: #FFF;
      }

    #landing-genesis .orbit #Components {
      top: 50px;
      left: -170px;
      text-align: right;
    }

    #landing-genesis .orbit #Research {
      top: -80px;
      left: 210px;
      text-align: right;
    }

    #landing-genesis .orbit #Inspiration {
      top: 50px;
      left: 500px;
    }

    #landing-genesis .orbit #Manufacturer {
      top: 450px;
      left: 550px;
    }

    #landing-genesis .orbit #Product {
      top: 450px;
      left: -150px;
      text-align: right;
    }

    #landing-genesis .orbit #Showcase {
      top: 600px;
      left: 210px;
    }

    #landing-genesis .orbit #synthiam-dev {
      top: 800px;
      left: 500px;
      width: 300px;
      color: #FFF;
    }

  #landing-genesis .theS {
    background-image: url('/images/Landing/S logo.png');
    background-position-x: center;
    background-position-y: center;
    height: 213px;
    width: 213px;
    margin: 0 auto;
    top: 660px;
    position: relative;
  }

#wachyawaitingfor {
  width: 100%;
  min-height: 1200px;
  background-image: url('/images/Landing/WhatAreYouWaitingFor_Back.jpg');
  background-position-x: right;
  background-repeat: no-repeat;
  background-color: #110125;
  padding-top: 40px;
}

  #wachyawaitingfor h3 {
    color: #eeeeee;
  }

  #wachyawaitingfor h4 {
    color: #ce3991;
  }

  #wachyawaitingfor h2 {
    color: #FFF;
    font-size: 45px;
    max-width: 900px;
    text-transform: uppercase;
    padding: 0 1% 0 1%;
    width: 98%;
  }

  #wachyawaitingfor p {
    font-size: 1.3rem;
  }

  #wachyawaitingfor > p {
    color: #EEE;
    font-size: 24px;
    max-width: 900px;
    padding: 10px 0 0 10px;
  }

    #wachyawaitingfor > p a {
      max-width: 200px;
      padding: 10px;
      margin-top: 20px;
    }

@media (min-width: 576px) {

  .landing-intro #landing-intro-video {
    left: 0;
    height: 100%;
  }

  #landing-genesis .Heading {
    font-size: 70px;
    top: 180px;
  }
}

@media (min-width: 992px) {

  .landing-intro .back-left {
    z-index: 0;
  }

  .display-3 {
    font-size: 4.5rem;
  }

  .display-4 {
    font-size: 3.5rem;
  }

  .target-audiences article {
    width: 30%;
  }

  .landing-intro .intro-message {
    padding-left: 20%;
    padding-top: 5%;
  }

  h1.main {
    font-size: 85px;
  }

  h2.sub {
    font-size: 35px;
  }

  .landing-feature {
    width: 50%;
    min-width: 475px;
  }


  .landing-worksall .message {
    font-size: 30px;
    z-index: 200;
    width: 35%;
    padding-top: 30px;
  }

    .landing-worksall .message h2 {
      font-size: 50px;
    }

  .landing-worksall .back-right {
    width: 30%;
  }

  .landing-worksall .hardware-list {
    margin: 20px 200px 0 150px;
  }

  #landing-inTogether .message {
    top: 150px;
    padding-left: 30%;
    padding-bottom: 400px;
    font-size: 40px;
  }

    #landing-inTogether .message h2 {
      width: 100%;
    }


  #hex-5 {
    left: 10%;
  }

  #hex-2 {
    left: 70%;
  }

  #hex-3 {
    left: 40%;
  }

  #hex-4 {
    left: 65%;
  }

  #hex-1 {
    left: 5%;
  }

  #hex-6 {
    left: 15%;
  }

  #hex-8 {
    left: 65%;
  }

  #hex-9 {
    left: 12%;
  }

  #hex-10 {
    left: 60%;
  }

  #wachyawaitingfor h2 {
    padding: 100px 0 0 100px;
    font-size: 50px;
  }

  #wachyawaitingfor > p {
    padding: 20px 0 0 100px;
    width: 100%;
  }

  #wachyawaitingfor .target-audiences {
    padding: 20px 100px 0 100px;
  }

  #wachyawaitingfor h2 {
    font-size: 80px;
  }

  #wachyawaitingfor p {
    font-size: 25px;
  }
}

@media (min-width: 1200px) {

  .landing-intro .intro-message {
    padding-left: 43%;
  }

  .landing-feature {
    width: 33.33%;
    min-width: 400px;
  }
}

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    opacity: 0;
  }
}

@-webkit-keyframes blink-animation {
  to {
    opacity: 1;
  }
}