a, body, h1, h2, h3, h4, h5, h6, p {
    font-family: Roboto,sans-serif;
    color: #fff
}

html {
    font-size: 10px !important
}

body {
    font-weight: 300;
    font-style: normal;
    overflow: hidden;
    background: #000;
    -webkit-font-smoothing: antialiased
}

a, h1, h2, h3, h4, h5, h6, p {
    font-weight: 400
}

.popup .card i, h1 {
    font-size: 6rem
}

h2 {
    font-size: 5rem
}

h3 {
    font-size: 4rem
}

h4 {
    font-size: 3rem
}

h5 {
    font-size: 2rem
}

h6 {
    font-size: 1.8rem
}

p {
    font-size: 1.4rem
}

a, a:focus, a:hover {
    cursor: pointer;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    text-decoration: none
}

    a:hover {
        color: #fff
    }

@media (max-width:700px) {
    html {
        font-size: 8px !important
    }
}

@media (max-width:500px) {
    html {
        font-size: 6px !important
    }
}

@media (max-width:350px) {
    html {
        font-size: 5px !important
    }
}

.preloader {
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2707eb
}

    .preloader.preloader-hidden {
        height: 0;
        -webkit-transition: .5s .3s;
        -o-transition: .5s .3s;
        transition: .5s .3s
    }

    .preloader .spinner {
        position: absolute;
        top: 50%;
        width: 100%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
        opacity: 1
    }

.hero, .hero .background-content, .hero .front-content {
    top: 0;
    height: 100%;
    position: absolute;
    left: 0;
    width: 100%
}

.preloader.preloader-hidden .spinner {
    opacity: 0;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.preloader .spinner > div {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 6px;
    -webkit-animation: 1.4s ease-in-out infinite both spinner-bounce;
    animation: 1.4s ease-in-out infinite both spinner-bounce;
    border-radius: 100%;
    background-color: #fff
}

.preloader .spinner .bounce-1 {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s
}

.preloader .spinner .bounce-2 {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s
}

@-webkit-keyframes spinner-bounce {
    0%,100%,80% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1)
    }
}

@keyframes spinner-bounce {
    0%,100%,80% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.hero, .hero .background-content {
    z-index: 1
}

    .hero .animation-container {
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s
    }

        .hero .animation-container.animation-fade {
            opacity: 0
        }

            .hero .animation-container.animation-fade.run-animation {
                opacity: 1
            }

        .hero .animation-container.animation-fade-up {
            -webkit-transform: translateY(10vh);
            -ms-transform: translateY(10vh);
            transform: translateY(10vh);
            opacity: 0
        }

            .hero .animation-container.animation-fade-down.run-animation, .hero .animation-container.animation-fade-up.run-animation {
                -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                transform: translateY(0);
                opacity: 1
            }

        .hero .animation-container.animation-fade-down {
            -webkit-transform: translateY(-10vh);
            -ms-transform: translateY(-10vh);
            transform: translateY(-10vh);
            opacity: 0
        }

        .hero .animation-container.animation-fade-left {
            -webkit-transform: translateX(10vh);
            -ms-transform: translateX(10vh);
            transform: translateX(10vh);
            opacity: 0
        }

            .hero .animation-container.animation-fade-left.run-animation, .hero .animation-container.animation-fade-right.run-animation, .popup .card .subscribe-form button:hover i {
                -webkit-transform: translateX(0);
                -ms-transform: translateX(0);
                transform: translateX(0);
                opacity: 1
            }

        .hero .animation-container.animation-fade-right {
            -webkit-transform: translateX(-10vh);
            -ms-transform: translateX(-10vh);
            transform: translateX(-10vh);
            opacity: 0
        }

    .hero .front-content {
        z-index: 2
    }

        .hero .front-content .container-mid {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            text-align: center
        }

            .hero .front-content .container-mid img.logo {
                display: block;
                margin: 0 auto
            }

            .hero .front-content .container-mid h1 {
                font-weight: 700;
                line-height: 1.1em;
                margin-top: .5em;
                margin-bottom: .46em;
                letter-spacing: .025em
            }

            .hero .front-content .container-mid p.subline {
                font-size: 3rem;
                line-height: 1.4em;
                max-width: 18em;
                margin-right: auto;
                margin-bottom: 1.3em;
                margin-left: auto;
                letter-spacing: .025em
            }

            .hero .front-content .container-mid .open-popup {
                font-size: 2.2rem;
                font-weight: 500;
                line-height: 2.6em;
                position: relative;
                display: inline-block;
                overflow: hidden;
                padding: 0 2.6em;
                cursor: pointer;
                -webkit-transition: .1s linear;
                -o-transition: .1s linear;
                transition: .1s linear;
                letter-spacing: .025em;
                color: #fff;
                border: 3px solid #fff;
                border-radius: 4em;
                background: 0 0
            }

                .hero .front-content .container-mid .open-popup:hover {
                    color: #111;
                    background: #fff
                }

        .hero .front-content .footer {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center
        }

            .hero .front-content .footer p {
                font-size: 1.3rem;
                letter-spacing: .025em;
                opacity: .85
            }

                .hero .front-content .footer p a {
                    font-weight: 700
                }

    .hero .background-content.parallax-on {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        width: 110%;
        height: 110%;
        -webkit-transform: translate3d(-50%,-50%,0) !important;
        transform: translate3d(-50%,-50%,0) !important
    }

    .hero .background-content .background-img, .popup, .popup .backface, .popup .card:after {
        width: 100%;
        height: 100%;
        left: 0
    }

    .hero .background-content .background-overlay {
        position: absolute;
        z-index: 50;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .7;
        background: #020026
    }

    .hero .background-content .background-img {
        position: absolute;
        z-index: 1;
        top: 0;
        background: url(../img/background.jpg) 0 0/cover no-repeat
    }

.popup {
    position: fixed;
    z-index: -100;
    top: 0;
    overflow-y: auto;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    pointer-events: none;
    opacity: 0;
    background: rgba(5,5,5,.5)
}

    .popup.show {
        z-index: 100;
        pointer-events: all;
        opacity: 1
    }

    .popup .backface {
        position: absolute;
        z-index: 0;
        top: 0
    }

    .popup .card {
        position: relative;
        z-index: 5;
        top: 60%;
        left: 50%;
        max-width: 410px;
        padding: 90px 46px;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        text-align: center;
        opacity: 0;
        border: 5px solid #fff;
        background: url(../img/card-background.jpg) center/cover red
    }

    .popup.show .card {
        top: 50%;
        -webkit-transition: .4s;
        -o-transition: .4s;
        transition: .4s;
        opacity: 1
    }

    .popup .card:after {
        position: absolute;
        z-index: -2;
        top: 0;
        content: '';
        opacity: .4;
        background: #111
    }

    .popup .card .close-button {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 20px;
        height: 20px;
        cursor: pointer
    }

        .popup .card .close-button:before {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            content: '';
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            background: #fff
        }

        .popup .card .close-button:after {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            content: '';
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            background: #fff
        }

    .popup .card h3 {
        margin-top: .5em;
        margin-bottom: .8em
    }

    .popup .card p.subline {
        font-size: 1.6rem;
        max-width: 19em;
        margin-right: auto;
        margin-bottom: 2.4em;
        margin-left: auto;
        letter-spacing: .025em
    }

    .popup .card .subscribe-form button, .popup .card .subscribe-form input {
        font-size: 1.6rem;
        font-weight: 400;
        display: block;
        height: 3.2em;
        letter-spacing: .03em;
        outline: 0 !important;
        text-align: center
    }

    .popup .card .subscribe-form {
        position: relative;
        width: 100%
    }

        .popup .card .subscribe-form .fhp-input {
            display: none;
            pointer-events: none;
            opacity: 0
        }

        .popup .card .subscribe-form input {
            line-height: 3.2em;
            margin-bottom: 20px;
            border: none;
            border-radius: 6px;
            background: #fff;
            -webkit-box-shadow: none;
            box-shadow: none
        }

        .popup .card .subscribe-form button {
            line-height: 3.2em !important;
            position: relative;
            padding: 0;
            -webkit-transition: .1s;
            -o-transition: .1s;
            transition: .1s;
            border: none;
            border-radius: 6px;
            background: #2707eb;
            -webkit-box-shadow: none !important;
            box-shadow: none !important
        }

            .popup .card .subscribe-form button[disabled] {
                cursor: not-allowed;
                opacity: 1
            }

            .popup .card .subscribe-form button span {
                font-size: inherit;
                line-height: inherit;
                position: absolute;
                z-index: 100;
                top: 0;
                left: 0;
                width: 100%;
                text-align: center;
                color: #fff !important;
                border: none !important;
                outline: 0 !important
            }

            .popup .card .subscribe-form button i {
                font-size: 1.4em;
                line-height: inherit;
                position: absolute;
                z-index: 100;
                top: 0;
                right: 5%;
                width: auto;
                -webkit-transform: translateX(-15px);
                -ms-transform: translateX(-15px);
                transform: translateX(-15px);
                text-align: center;
                opacity: 0;
                color: #fff !important
            }

            .popup .card .subscribe-form button[disabled] i {
                display: none !important
            }

        .popup .card .subscribe-form .error-message, .popup .card .subscribe-form .success-message {
            font-weight: 500;
            position: absolute;
            bottom: -36px;
            left: 0;
            width: 100%;
            text-align: center;
            letter-spacing: .02em;
            opacity: 0
        }

        .popup .card .subscribe-form.form-error .error-message, .popup .card .subscribe-form.form-success .success-message {
            -webkit-transition: .3s;
            -o-transition: .3s;
            transition: .3s;
            opacity: 1
        }

        .popup .card .subscribe-form.form-success .success-message {
            -webkit-animation-name: form_success_animation;
            animation-name: form_success_animation;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            color: #7cfc00
        }

        .popup .card .subscribe-form.form-error .error-message {
            -webkit-animation-name: form_error_animation;
            animation-name: form_error_animation;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            color: red
        }

@-webkit-keyframes form_success_animation {
    from,to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    50% {
        -webkit-transform: scale3d(1.08,1.08,1.08);
        transform: scale3d(1.08,1.08,1.08)
    }
}

@keyframes form_success_animation {
    from,to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    50% {
        -webkit-transform: scale3d(1.08,1.08,1.08);
        transform: scale3d(1.08,1.08,1.08)
    }
}

@-webkit-keyframes form_error_animation {
    from,to {
        -webkit-transform: none;
        transform: none
    }

    15% {
        -webkit-transform: translate3d(-10%,0,0) rotate3d(0,0,1,-5deg);
        transform: translate3d(-10%,0,0) rotate3d(0,0,1,-5deg)
    }

    30% {
        -webkit-transform: translate3d(8%,0,0) rotate3d(0,0,1,3deg);
        transform: translate3d(8%,0,0) rotate3d(0,0,1,3deg)
    }

    45% {
        -webkit-transform: translate3d(-6%,0,0) rotate3d(0,0,1,-3deg);
        transform: translate3d(-6%,0,0) rotate3d(0,0,1,-3deg)
    }

    60% {
        -webkit-transform: translate3d(4%,0,0) rotate3d(0,0,1,2deg);
        transform: translate3d(4%,0,0) rotate3d(0,0,1,2deg)
    }

    75% {
        -webkit-transform: translate3d(-2%,0,0) rotate3d(0,0,1,-1deg);
        transform: translate3d(-2%,0,0) rotate3d(0,0,1,-1deg)
    }
}

@keyframes form_error_animation {
    from,to {
        -webkit-transform: none;
        transform: none
    }

    15% {
        -webkit-transform: translate3d(-10%,0,0) rotate3d(0,0,1,-5deg);
        transform: translate3d(-10%,0,0) rotate3d(0,0,1,-5deg)
    }

    30% {
        -webkit-transform: translate3d(8%,0,0) rotate3d(0,0,1,3deg);
        transform: translate3d(8%,0,0) rotate3d(0,0,1,3deg)
    }

    45% {
        -webkit-transform: translate3d(-6%,0,0) rotate3d(0,0,1,-3deg);
        transform: translate3d(-6%,0,0) rotate3d(0,0,1,-3deg)
    }

    60% {
        -webkit-transform: translate3d(4%,0,0) rotate3d(0,0,1,2deg);
        transform: translate3d(4%,0,0) rotate3d(0,0,1,2deg)
    }

    75% {
        -webkit-transform: translate3d(-2%,0,0) rotate3d(0,0,1,-1deg);
        transform: translate3d(-2%,0,0) rotate3d(0,0,1,-1deg)
    }
}

@media (orientation:landscape) and (max-height:420px) {
    html {
        font-size: 8px !important
    }

    .hero .front-content .footer {
        display: none
    }

    .popup .card {
        -webkit-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
        transform: translate(-50%,0)
    }

    .popup.show .card {
        top: 0
    }
}