: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%;
        /* dimmed against the black backdrop so the headline and buttons on top stay readable */
        opacity: 0.45;
    }

    .landing-intro #intro-video-overlay {
        /* extra mobile dimming, on top of the video's own opacity */
        background: rgba(0, 0, 0, 0.25);
        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: 36px;
}

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: 60px;
    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 20px 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: 23%;
    }

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

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

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

    .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;
    }
}