/* geist-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/geist-v4-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* geist-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Geist';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/geist-v4-latin-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/** 1. TYPOGRAPHY
*******************************************************************/

html,
body {
    width: 100%;
    height: 100% !important;
}

body {
    font-weight: 400;
    font-style: normal;
    overflow: hidden;
    color: #fff;
    background: #111;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Geist', sans-serif;
    font-weight: normal;
    line-height: auto;
    color: #fff;
}

h1 {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 2rem;
}
@media screen and (min-width: 1400px) {
    h1 {
        font-size: 40px;
    }
}

h2 {
    font-size: 26px;
    margin-top: 2rem;
}
@media screen and (min-width: 1400px) {
    h2 {
        font-size: 32px;
    }
}

h3 {
    font-size: 20px;
    margin-top: 2rem;
}
@media screen and (min-width: 1400px) {
    h3 {
        font-size: 24px;
    }
}

h4 {
    font-size: 18px;
    margin-top: 2rem;
}
@media screen and (min-width: 1400px) {
    h4 {
        font-size: 24px;
    }
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
}
@media screen and (min-width: 1400px) {
    p {
        font-size: 18px;
    }
}

input {
    font-size: 16px !important;
}
@media screen and (min-width: 1400px) {
    input {
        font-size: 18px !important;
    }
}

a,
a:hover,
a:focus {
    color: #001DCD;
    cursor: pointer;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    text-decoration: none;
}
a:hover,
a:focus {
    color: #07e9f5;
}


/** 2. LOADING
*****************************************************************/

#page-loader {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #111;
}

#page-loader.hide-this {
    bottom: 100%;
    -webkit-transition: all 800ms cubic-bezier(.540, .086, .000, .980) .2s;
    transition: all 800ms cubic-bezier(.540, .086, .000, .980) .2s;
}

#page-loader .spinner-container {
    position: absolute;
    z-index: 200;
    left: 50%;
    top: 50%;

    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#page-loader .spinner-container .css-spinner {
    display: block;

    width: 36px;
    height: 36px;

    -webkit-transition: all .4s cubic-bezier(.19, 1, .22, 1);
    transition: all .4s cubic-bezier(.19, 1, .22, 1);
    -webkit-animation: spinner 400ms linear infinite;
    animation: spinner 400ms linear infinite;

    opacity: 1;
    border: solid 2px transparent;
    border-top-color: #001DCD;
    border-left-color: #001DCD;
    border-radius: 100%;
}

#page-loader.hide-this .spinner-container .css-spinner {
    opacity: 0;
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}




/** 3. CONTENT
*****************************************************************/

#main {
    position: fixed;

    width: 100%;
    height: 100%;
}

#main-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    overflow: hidden;

    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.container-mid {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;

    display: block;

    width: 100%;
    height: auto;
    max-height: 100%;

    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

.hero .container-mid {
    overflow: auto;
    padding: 60px 30px;
}

.fhp-input {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.container-mid.block-overflow,
.movement-in-progress .container-mid {
    overflow: hidden;
}




/** 4. OVERLAY
*****************************************************************/

#overlay {
    position: absolute;
    z-index: -2;
    top: 0;

    overflow: hidden;

    width: 100%;
    height: 100%;

    -webkit-transition: all 800ms ease;
    transition: all 800ms ease;
    pointer-events: none;

    background: rgba(0, 0, 0, .8);
}

#overlay.open {
    pointer-events: auto;
    z-index: 40;
}

#overlay.fade-In {
    opacity: 0;
}

#overlay.open.fade-In {
    opacity: 1;
}

#overlay.slide-from-top {
    bottom: 100%;
}

#overlay.open.slide-from-top {
    bottom: 0;
}

#overlay.slide-from-bottom {
    top: 100%;
}

#overlay.open.slide-from-bottom {
    top: 0;
}

#overlay.slide-from-left {
    right: 100%;
}

#overlay.open.slide-from-left {
    right: 0;
}

#overlay.slide-from-right {
    left: 100%;
}

#overlay.open.slide-from-right {
    left: 0;
}


.overlay {
    position: absolute;
    z-index: 1;

    overflow: auto;

    width: 100%;
    height: 100%;

    -webkit-transition: all 800ms ease;
    transition: all 800ms ease;
    pointer-events: none;
}

.overlay.active {
    pointer-events: auto;
}

.overlay.fade-In {
    opacity: 0;
}

.overlay.slide-from-top {
    bottom: 100%;
}

.overlay.slide-from-bottom {
    top: 100%;
}

.overlay.slide-from-left {
    right: 100%;
}

.overlay.slide-from-right {
    left: 100%;
}

#overlay.open .overlay.active.fade-In {
    opacity: 1;
}

#overlay.open .overlay.active.slide-from-top {
    bottom: 0;
}

#overlay.open .overlay.active.slide-from-bottom {
    top: 0;
}

#overlay.open .overlay.active.slide-from-left {
    right: 0;
}


#overlay.open .overlay.active.slide-from-right {
    left: 0;
}

.up-button {
    position: absolute;
    z-index: 120;
    top: 0;
    left: 50%;
    overflow: hidden;
    width: 54px;
    height: 0;
    cursor: pointer;
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 1.00);
}

.up-button.active {
    height: 54px;
}

.up-button i {
    font-size: 16px;
    line-height: 54px;
    position: absolute;
    width: inherit;
    height: inherit;
    opacity: .8;
    -webkit-transition: none;
    transition: none;
    text-align: center;
    color: #000;
}

.up-button:hover i {
    -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1);
    transition: all 200ms cubic-bezier(1, 0, 0, 1);
}

.up-button i:first-child {
    -webkit-transform: translateY(200%);
    transform: translateY(200%);
}

.up-button:hover i:first-child {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

.up-button i:last-child {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

.up-button:hover i:last-child {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
}

.grcs_bullet_nav {
    position: fixed;
    right: -200px;
    top: 50%;
    z-index: 150;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.grcs_bullet_nav.init {
    right: 34px;
}

.grcs_bullet_nav .nav_dots {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    display: block;
    cursor: pointer;
    margin: 16px 0;
    border-radius: 100%;
    position: relative;
}

.grcs_bullet_nav .nav_dots.active:before {
    content: "";
    background: #fff;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 50%;
    margin: 0;
    padding: 0;
    top: 50%;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

body.is-mobile.merge-true #overlay.open {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

body.is-mobile.merge-true .overlay {
    position: relative;
    z-index: 1;

    width: 100vw;
    height: auto;
    min-height: 100vh;
    pointer-events: auto;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
}

body.is-mobile.merge-true .overlay .content {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

body.is-mobile.merge-true .overlay .container-mid {
    position: relative;
    top: 0;
    height: auto;

    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

@media screen and (max-width: 740px) {
    .grcs_bullet_nav.init {
        right: 14px;
    }
}

@media screen and (max-width: 540px) {
    .grcs_bullet_nav {
        display: none;
    }
}




/** 5. OVERLAY-CONTENT-ABOUT
*****************************************************************/

.subscribe-form {
    display: block;
    max-width: 470px;
    margin: 3rem auto 3rem auto;

    background: rgba(255, 255, 255, .0);
}

.subscribe-form.success .input-group {
    cursor: not-allowed;
}

.subscribe-form input {
    font-family: 'Geist', sans-serif;
    font-weight: 400;

    -webkit-transition: all .2s ease 0s;
    transition: all .2s ease 0s;
    letter-spacing: 1px;

    color: #d6d6d6;
    border: none;
    border: 1px solid #d6d6d6;
    border-right: none !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0);
    box-shadow: none;
}

.subscribe-form.error input {
    border-color: rgb(163, 40, 40) !important;
}

.subscribe-form.success input {
    border-color: rgba(6, 111, 109, 1) !important;
    background: rgba(255, 255, 255, .00) !important;
}

.subscribe-form input::-webkit-input-placeholder {
    color: #d6d6d6;
}

.subscribe-form input::-moz-placeholder {
    color: #d6d6d6;
}

.subscribe-form input:focus,
.subscribe-form input:active {
    color: #ccc;
    border-color: #d6d6d6;
    outline: none;
    background: rgba(255, 255, 255, .1);
    box-shadow: none;
}

.subscribe-form button {
    font-family: 'Geist', sans-serif;
    font-size: 12px !important;

    overflow: hidden;

    margin-left: 0 !important;
    padding: 0 40px !important;

    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #000;
    border: 0;
    border: 1px solid #d6d6d6;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 1);
    box-shadow: none;
}

.subscribe-form.success button {
    cursor: not-allowed;

    border-color: rgba(6, 111, 109, 1) !important;
    background: rgba(6, 111, 109, 1) !important;
}

.subscribe-form.error button {
    border-color: rgb(163, 40, 40) !important;
    background: rgb(163, 40, 40) !important;
}

.subscribe-form button:hover,
.subscribe-form button:focus,
.subscribe-form button:active {
    color: #000;
    border-color: #d6d6d6;
    outline: none !important;
    background: rgba(255, 255, 255, .00);
}

.subscribe-form button:hover {
    background: rgba(255, 255, 255, .00) !important;
}

.subscribe-form button:focus,
.subscribe-form button:active {
    background: rgba(255, 255, 255, 1);
}

.subscribe-form .btn-primary[disabled] {
    opacity: 1;
    color: #fff;
    border: 1px solid #fff;
    outline: none;
    background: rgba(255, 255, 255, 1);
}

.subscribe-form.error button:hover,
.subscribe-form.error button:focus,
.subscribe-form.error button:active {
    border-color: rgb(163, 40, 40);
}

.subscribe-form button::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: auto;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transition: all .2s ease 0s;
    transition: all .2s ease 0s;

    background: rgba(255, 255, 255, 1);
}

.subscribe-form.success button::before {
    background: rgba(6, 111, 109, 1) !important;
}

.subscribe-form.error button::before {
    background: rgb(163, 40, 40) !important;
}

.subscribe-form.succes button::before {
    background: rgba(255, 255, 255, 1);
}

.subscribe-form button:hover::before {
    right: 0;
    left: auto;

    width: 0;
}

.subscribe-form.success button:hover::before {
    right: auto !important;
    left: 0 !important;

    width: 100% !important;
}

.subscribe-form button i {
    position: absolute;
    top: 50%;
    left: 0;

    width: 100%;
    height: auto;

    -webkit-transition: none;
    transition: none;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

.subscribe-form button:hover i {
    -webkit-transition: all .2s ease 0s;
    transition: all .2s ease 0s;
}

.subscribe-form button i.first {
    left: -200%;

    color: #fff;
}

.subscribe-form button i.second {
    left: 0;
}

.subscribe-form button:hover i.first {
    left: 0;
}

.subscribe-form button:hover i.second {
    left: 200%;
}

.subscribe-form.error button i.second:before {
    content: "\f00d";
    color: #fff;
}

.subscribe-form.error-final button i.second:before {
    content: "\f00d";
}

.subscribe-form.success button i.second:before {
    content: "\f00c";
    color: #fff;
}

.subscribe-form.success button:hover i.first {
    left: -200%;
}

.subscribe-form.success button:hover i.second {
    left: 0;
}


/** 8. MEDIA QUERIES
*****************************************************************/

@media screen and (max-width: 1400px) {
    #overlay .container-mid .container {
        padding: 40px 40px;
    }

    .subscribe-form {
        max-width: 390px;
    }
}

@media screen and (max-width: 420px) {
    #overlay .container-mid .container {
        padding: 55px 40px;
    }
}

@media screen and (max-width: 318px) {
    .subscribe-form .input-group {
        display: block;
    }

    .subscribe-form input {
        display: block;
        text-align: center;
        border-right: 1px solid #d6d6d6 !important;
    }
}