html{
	font-size: .5208333333vw;
}
#backgroundVideo,#backgroundVideoGIT,#backgroundVideoHIW,#smallerLineHeight,*,.allPages,.animationAppear,.animationAppearFast,.animationAppearLastSection,.animationAppearOpacity,.animationCardAppear,.animationDisappear,.animationDisappearFast,.animationDisappearLong,.animationDisappearOpacity,.blueAppear,.card1,.card2,.cards,.cardsContainerMain,.changeBackToBlack,.changeBackToWhite,.changeBackToWhiteReverse,.changeWrapperToBlack,.changeWrapperToWhite,.desktop,.disabled,.disabledButtonOp,.e-icon,.fp-watermark,.fullpage,.getInTouch,.header,.header__burger,.header__buttons,.header__logo,.howItWorks1,.howItWorks2,.howItWorks3,.imageContainer,.introPage,.landingIndexPage,.link-1,.mainSectionText,.mainSectionText1-5,.mainSectionText2,.mainSectionText3,.mainSectionText4,.mobile,.overlay,.planetAppear,.plug,.stage1,.stage2,.stage3,.status,.terms,.textAppear,.textDisappear,.videoContainer,a,body,h1,h2,h3,h4,h5,h6,html,input,textarea,video {
    margin: 0;
    padding: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-text-decoration: 0;
    text-decoration: 0;
    border: 0
}

.link-1 {
    color: #e23781!important
}

.link-1:hover {
    background: -webkit-linear-gradient(90deg,#00f 2.53%,#ff00d3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@font-face {
    font-family: Proxima Nova;
    font-style: normal;
    src: local("Proxima Nova"),url(../fonts/ProximaNovaT-Thin.woff) format("woff")
}

@font-face {
    font-family: Proxima-Nova-Font;
    font-style: normal;
    src: local("Proxima-Nova-Font"),url(../fonts/Proxima-Nova-Font.woff) format("woff")
}

@font-face {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    src: local("Neue Haas Grotesk Display Light"),url(../fonts/NeueHaasDisplay-Light.woff) format("woff")
}

@font-face {
    font-family: Neue Haas Grotesk Display Medium;
    font-style: normal;
    src: local("Neue Haas Grotesk Display Medium"),url(../fonts/NeueHaasDisplay-Mediu.woff) format("woff")
}

@font-face {
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    src: local("Neue Haas Grotesk Display Thin"),url(../fonts/NeueHaasDisplay-Thin.woff) format("woff")
}

a {
    text-decoration: none;
    text-decoration: initial;
    color: #000;
    color: initial
}

.e-icon,h1,h2,h3,h4,h5,h6,input,textarea {
    margin: 0;
    margin: initial
}

input,textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

::-webkit-media-controls-panel,::-webkit-media-controls-play-button {
    display: none!important;
    -webkit-appearance: none
}

::-webkit-media-controls,::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none
}

html {
    font-size: .5208333333vw;
}

@media (max-width: 500px) {
    html {
        font-size:2.2222222222vw
    }
}

body {
    background-color: #d7d9d6;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.getInTouch {
    padding-top: 38.917rem;
    padding-left: 23.6rem;
    padding-right: 25.048rem;
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

@media (max-width: 500px) {
    .getInTouch {
        padding:16.2rem 2.4rem 5.2rem;
        height: var(--app-height)
    }
}

.getInTouch #backgroundVideoGIT {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}

.getInTouch #backgroundVideoGIT,.getInTouch .container {
    opacity: 0;
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

.getInTouch .container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #fff;
    position: relative
}

@media (max-width: 500px) {
    .getInTouch .container {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 100%
    }
}

.getInTouch .container .textContainer {
    margin-top: 6.562rem;
    color: inherit
}

@media (max-width: 500px) {
    .getInTouch .container .textContainer {
        margin-top:0
    }
}

.getInTouch .container .textContainer .title {
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    font-weight: 400;
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: .01em;
    color: inherit
}

@media (max-width: 500px) {
    .getInTouch .container .textContainer .title {
        font-size:6rem;
        line-height: 6.3rem;
        width: 34.4rem
    }
}

.getInTouch .container .textContainer .subtitle {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    width: 24rem;
    margin-top: 2.58rem;
    color: inherit
}

@media (max-width: 500px) {
    .getInTouch .container .textContainer .subtitle {
        font-size:1.6rem;
        line-height: 2.1rem;
        width: 18.5rem
    }
}

.getInTouch .container .form {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 43.586rem;
    color: inherit;
    border-color: #fff
}

@media (max-width: 500px) {
    .getInTouch .container .form {
        width:100%
    }
}

.getInTouch .container .form input {
    width: 100%;
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    background-color: transparent;
    padding-bottom: .855rem;
    outline: none;
    color: inherit;
    border-bottom: 1px solid;
    border-color: inherit
}

@media (max-width: 500px) {
    .getInTouch .container .form input {
        padding-bottom:1.3rem
    }
}

.getInTouch .container .form input::-webkit-input-placeholder {
    color: inherit
}

.getInTouch .container .form input::-moz-placeholder {
    color: inherit
}

.getInTouch .container .form input:-ms-input-placeholder,.getInTouch .container .form input::-ms-input-placeholder {
    color: inherit
}

.getInTouch .container .form input::placeholder {
    color: inherit
}

.getInTouch .container .form input+input {
    margin-top: 5.4rem
}

@media (max-width: 500px) {
    .getInTouch .container .form input+input {
        margin-top:2.8rem
    }
}

.getInTouch .container .form .shadowInput {
    height: 0;
    width: 0;
    opacity: 0
}

.getInTouch .container .form p {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    margin-top: 4.379rem;
    color: inherit;
    cursor: pointer
}

@media (max-width: 500px) {
    .getInTouch .container .form p {
        margin-top:2.917rem
    }
}

.getInTouch .container .form button {
    width: 16.441rem;
    height: 6.621rem;
    -webkit-box-shadow: 0 0 15px rgba(155,255,237,.5);
    box-shadow: 0 0 15px rgba(155,255,237,.5);
    background: -webkit-linear-gradient(171.75deg,#62ffff -4.48%,#a2ffff 16.74%,#c3ffed 114.96%);
    background: -o-linear-gradient(171.75deg,#62ffff -4.48%,#a2ffff 16.74%,#c3ffed 114.96%);
    background: linear-gradient(278.25deg,#62ffff -4.48%,#a2ffff 16.74%,#c3ffed 114.96%);
    -webkit-border-radius: 1.1rem;
    border-radius: 1.1rem;
    font-family: Proxima-Nova-Font;
    font-style: normal;
    font-weight: 400;
    font-size: 2.64828rem;
    line-height: 3.7rem;
    margin-top: 9.51rem;
    cursor: pointer;
    color: #000;
    -webkit-transform: translate3d(0);
    transform: translate3d(0);
    -webkit-transition: -webkit-transform .15s ease-out;
    transition: -webkit-transform .15s ease-out;
    -o-transition: transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out,-webkit-transform .15s ease-out;
    -webkit-overflow: hidden;
    -webkit-transform: translateZ(0)
}

@media (max-width: 500px) {
    .getInTouch .container .form button {
        margin-top:6rem;
        width: 12.4rem;
        height: 4.8rem;
        font-size: 2rem;
        line-height: 2.8rem
    }
}

.getInTouch .container .form button:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02)
}

.getInTouch .container .form button:active {
    -webkit-transform: scale(.98);
    -ms-transform: scale(.98);
    transform: scale(.98)
}

.getInTouch .container .form .doneMessage {
    position: relative;
    font-family: Proxima-Nova-Font;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.8rem;
    letter-spacing: -.03em;
    margin-top: 9.51rem;
    display: none;
    -webkit-animation: appearDone .4s;
    animation: appearDone .4s
}

.getInTouch .container .form .doneMessage:after {
    content: "";
    position: absolute;
    left: 5.5rem;
    top: 50%;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    width: 1.4rem;
    height: 1.4rem;
    background-image: url(/common/images/doneMark.svg);
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%
}

.getInTouch .container .form .commentInput {
    display: none
}

.terms {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .05em;
    color: #545454;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05rem;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    position: absolute;
    bottom: 3.7rem;
    right: 8rem;
    color: #fff;
    opacity: 0;
    text-underline-offset: .5rem;
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease;
    -webkit-transition-delay: 0s!important;
    -o-transition-delay: 0s!important;
    transition-delay: 0s!important;
    z-index: 11
}

@media (max-width: 500px) {
    .terms {
        bottom:6.5rem;
        right: 2.4rem
    }
}

@-webkit-keyframes appearDone {
    0% {
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes appearDone {
    0% {
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

.howItWorks1 {
    padding: 15.2rem 7.6rem 6.028rem 10.041rem;
    height: 100vh;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-transform: translate3d(0,1rem,0);
    transform: translate3d(0,1rem,0);
    opacity: 0;
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

@media (max-width: 500px) {
    .howItWorks1 {
        padding-top:12.2rem;
        padding-left: 0;
        padding-right: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: baseline;
        -webkit-justify-content: baseline;
        -ms-flex-pack: baseline;
        justify-content: baseline;
        height: var(--app-height)
    }
}

.howItWorks1 .cardsContainer::-webkit-scrollbar,.howItWorks1 .cardsContainerMobile::-webkit-scrollbar {
    width: 0;
    display: none
}

.howItWorks1 .contentContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

@media (max-width: 500px) {
    .howItWorks1 .contentContainer {
        height:100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.howItWorks1 .cardsContainerMobile {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    width: 100%;
    overflow: hidden
}

@media (max-width: 500px) {
    .howItWorks1 .cardsContainerMobile {
        display:-webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        overflow-x: scroll;
        padding-right: 2.2rem;
        padding-left: 2.2rem
    }
}

.howItWorks1 .cardsContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    width: 100%;
    overflow: hidden
}

@media (max-width: 500px) {
    .howItWorks1 .cardsContainer {
        display:none
    }
}

.howItWorks1 .cardsTop {
    width: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.876rem
}

@media (max-width: 500px) {
    .howItWorks1 .cardsTop {
        margin-right:1rem;
        margin-bottom: 0
    }
}

.howItWorks1 .cardsBottom {
    width: auto
}

.howItWorks1 .card,.howItWorks1 .cardsBottom {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.howItWorks1 .card {
    width: 30.234rem;
    height: 35.2rem;
    border: 1px solid #000;
    -webkit-border-radius: 2.24139rem;
    border-radius: 2.24139rem;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

@media (max-width: 500px) {
    .howItWorks1 .card {
        width:21.4rem;
        height: 24.915rem
    }
}

.howItWorks1 .card #descriptionWhite {
    color: #fff
}

.howItWorks1 .card .count {
    margin-top: 3.31rem;
    margin-left: 2.648rem;
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 11rem;
    line-height: 11rem
}

@media (max-width: 500px) {
    .howItWorks1 .card .count {
        font-size:7.8rem;
        line-height: 7.8rem
    }
}

.howItWorks1 .card .description {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    color: #000;
    margin-left: 3.752rem;
    margin-bottom: 2.966rem
}

@media (max-width: 500px) {
    .howItWorks1 .card .description {
        font-size:1.6rem;
        line-height: 1.8rem
    }
}

.howItWorks1 .card:nth-child(2) {
    margin-left: 2.538rem
}

@media (max-width: 500px) {
    .howItWorks1 .card:nth-child(2) {
        margin-left:1rem
    }
}

.howItWorks1 .card:nth-child(4) {
    margin-left: 2.538rem
}

@media (max-width: 500px) {
    .howItWorks1 .card:nth-child(4) {
        margin-left:1rem
    }
}

.howItWorks1 #imageCard {
    background-image: url(../common/images/section/card.png);
    -webkit-background-size: 105% 105%;
    background-size: 105%;
    background-repeat: no-repeat;
    background-position: 50%
}

.howItWorks1 .black {
    background-color: #000
}

.howItWorks1 .black .count {
    color: #fff
}

.howItWorks1 .black .description {
    color: #e3e3e3
}

.howItWorks1 .textContainer {
    margin-top: 5.977rem
}

@media (max-width: 500px) {
    .howItWorks1 .textContainer {
        margin-top:0;
        padding-left: 2.2rem
    }
}

.howItWorks1 .textContainer .title {
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    font-weight: 400;
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: .01em;
    width: 91rem;
    margin-bottom: 4.644rem
}

@media (max-width: 500px) {
    .howItWorks1 .textContainer .title {
        font-size:6rem;
        line-height: 6.3rem;
        width: 34.4rem;
        margin-bottom: 1.9rem
    }
}

.howItWorks1 .textContainer .subtitle {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454
}

@media (max-width: 500px) {
    .howItWorks1 .textContainer .subtitle {
        font-size:1.6rem;
        line-height: 2.1rem;
        width: 24.4rem
    }
}

.howItWorks2 {
    padding-bottom: 14.562rem;
    padding-left: 91.4rem;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    opacity: 0;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

@media (max-width: 500px) {
    .howItWorks2 {
        -webkit-box-pack:start;
        -webkit-justify-content: start;
        -ms-flex-pack: start;
        justify-content: start;
        padding-top: 15.2rem;
        padding-left: 2.2rem;
        height: var(--app-height)
    }
}

.howItWorks2 .title {
    position: relative;
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    font-weight: 400;
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: .01em;
    width: 93.7rem;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media (max-width: 500px) {
    .howItWorks2 .title {
        font-size:6rem;
        line-height: 6.3rem;
        width: 34.4rem
    }
}

.howItWorks2 .subtitle {
    position: relative;
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    width: 31.443rem;
    margin-top: 7.7rem;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media (max-width: 500px) {
    .howItWorks2 .subtitle {
        font-size:1.6rem;
        margin-top: 2.3rem;
        line-height: 2.1rem;
        width: 19.5rem
    }
}

.imageContainer {
    width: 100%;
    height: 100%;
    position: fixed;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}

.howItWorks3 {
    padding-top: 35.641rem;
    padding-left: 9.931rem;
    padding-right: 19.531rem;
    height: 100vh;
    width: 100vw;
    background-color: #222325!important;
    position: relative;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: opacity .5s ease,background-color .5s linear,-webkit-transform .5s ease;
    transition: opacity .5s ease,background-color .5s linear,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease,background-color .5s linear;
    transition: transform .5s ease,opacity .5s ease,background-color .5s linear;
    transition: transform .5s ease,opacity .5s ease,background-color .5s linear,-webkit-transform .5s ease
}

@media (max-width: 500px) {
    .howItWorks3 {
        height:var(--app-height);
        padding: 16.2rem 3.7rem 5.6rem 2.2rem
    }
}

.howItWorks3 .containerHIW3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    opacity: 0;
    color: #fff;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: opacity .5s ease,color .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,color .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease,color .5s ease;
    transition: transform .5s ease,opacity .5s ease,color .5s ease;
    transition: transform .5s ease,opacity .5s ease,color .5s ease,-webkit-transform .5s ease
}

@media (max-width: 500px) {
    .howItWorks3 .containerHIW3 {
        height:100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.howItWorks3 .containerHIW3 .textContainer .title {
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    font-weight: 400;
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: .01em;
    width: 86.29rem;
    color: inherit
}

@media (max-width: 500px) {
    .howItWorks3 .containerHIW3 .textContainer .title {
        font-size:6rem;
        line-height: 6.3rem;
        width: 33.8rem
    }
}

.howItWorks3 .containerHIW3 .textContainer .subtitle {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    width: 28.9rem;
    margin-top: 5.58rem;
    color: inherit
}

@media (max-width: 500px) {
    .howItWorks3 .containerHIW3 .textContainer .subtitle {
        font-size:1.6rem;
        line-height: 2.1rem;
        width: 19.1rem
    }
}

.howItWorks3 .containerHIW3 .colomnMain {
    margin-top: 1.876rem;
    width: 31.448rem
}

@media (max-width: 500px) {
    .howItWorks3 .containerHIW3 .colomnMain {
        display:-webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.howItWorks3 .containerHIW3 .colomnMain .colomn {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2.2069rem;
    line-height: 4rem;
    letter-spacing: .05em;
    color: inherit
}

@media (max-width: 500px) {
    .howItWorks3 .containerHIW3 .colomnMain .colomn {
        width:auto;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: 2.9rem
    }
}

@media (max-width: 500px) {
    .howItWorks3 .containerHIW3 .colomnMain .colomn+.colomn {
        margin-right:1.8rem;
        width: 18.8rem
    }
}

.howItWorks3 .containerHIW3 .colomnMain .subText {
    position: relative;
    font-family: Proxima-Nova-Font;
    font-style: normal;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 2.9rem;
    margin-top: 3.341rem;
    -webkit-transform: translateY(5px),translateZ(0);
    transform: translateY(5px),translateZ(0);
    opacity: 0;
    -webkit-transition-duration: .4s;
    -o-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transition-property: opacity,-webkit-transform;
    transition-property: opacity,-webkit-transform;
    -o-transition-property: transform,opacity;
    transition-property: transform,opacity;
    transition-property: transform,opacity,-webkit-transform
}

@media (max-width: 500px) {
    .howItWorks3 .containerHIW3 .colomnMain .subText {
        display:none
    }
}

.howItWorks3 .containerHIW3 .colomnMain .subText .point {
    position: absolute;
    background-color: #000;
    width: 4.9px;
    height: 4.9px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    top: 1rem;
    left: -1.49rem
}

.howItWorks3 .planetsBlack {
    position: absolute;
    background-image: url(../images/section/planetsBlack.png);
    -webkit-background-size: 100% 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    width: 81.434rem;
    height: 101.793rem;
    left: 55.283rem;
    top: 7.172rem;
    mix-blend-mode: lighten;
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: opacity .25s linear,-webkit-transform .5s ease;
    transition: opacity .25s linear,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .25s linear;
    transition: transform .5s ease,opacity .25s linear;
    transition: transform .5s ease,opacity .25s linear,-webkit-transform .5s ease
}

@media (max-width: 500px) {
    .howItWorks3 .planetsBlack {
        width:46.434rem;
        height: 89.793rem;
        left: 0;
        top: -11.828rem
    }
}

.howItWorks3 .planetsWhite {
    position: absolute;
    background-image: url(../common/images/section/planetsWhite.png);
    -webkit-background-size: 100% 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    width: 81.434rem;
    height: 101.793rem;
    left: 55.283rem;
    top: 7.172rem;
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: opacity .3s linear .5s,-webkit-transform .5s ease;
    transition: opacity .3s linear .5s,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .3s linear .5s;
    transition: transform .5s ease,opacity .3s linear .5s;
    transition: transform .5s ease,opacity .3s linear .5s,-webkit-transform .5s ease
}

@media (max-width: 500px) {
    .howItWorks3 .planetsWhite {
        width:46.434rem;
        height: 89.793rem;
        left: 0;
        top: -11.828rem
    }
}

.howItWorks3 .bluePlanet {
    position: absolute;
    background-image: url(../common/images/section/bluePlanet.png);
    -webkit-background-size: 100% 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 19.826rem;
    height: 19.826rem;
    left: 85.281rem;
    top: 76.068rem;
    -webkit-transform: rotate(-61.42deg);
    -ms-transform: rotate(-61.42deg);
    transform: rotate(-61.42deg)
}

@media (max-width: 500px) {
    .howItWorks3 .bluePlanet {
        width:10.926rem;
        height: 9.726rem;
        left: 17.2rem;
        top: 43.3rem
    }
}

.howItWorks3 .scaleTransition {
    -webkit-transform: scale(1.04);
    -ms-transform: scale(1.04);
    transform: scale(1.04);
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    -o-transition: transform .4s;
    transition: transform .4s;
    transition: transform .4s,-webkit-transform .4s;
    width: 100%;
    height: 100%;
    position: relative
}

.planetAppear {
    -webkit-animation-name: planetAppear;
    animation-name: planetAppear;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes planetAppear {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes planetAppear {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.blueAppear {
    -webkit-animation-name: blueAppear;
    animation-name: blueAppear;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes blueAppear {
    0% {
        -webkit-transform: scale(1.2) translateY(5rem);
        transform: scale(1.2) translateY(5rem)
    }

    to {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }
}

@keyframes blueAppear {
    0% {
        -webkit-transform: scale(1.2) translateY(5rem);
        transform: scale(1.2) translateY(5rem)
    }

    to {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }
}

#smallerLineHeight {
    line-height: 2.2rem
}

.introPage {
    padding-left: 7.7rem;
    padding-bottom: 4.976rem;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

@media (max-width: 500px) {
    .introPage {
        padding-left:2.4rem;
        height: var(--app-height);
        padding-bottom: 2.6rem
    }
}

.introPage .logoContainer {
    width: auto;
    height: 14.271rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

@media (max-width: 500px) {
    .introPage .logoContainer {
        height:6.337rem
    }
}

.introPage .logoContainer .letterContainer {
    margin: 0 2.379rem 0 1.73rem;
    border: 2.1rem solid #000;
    height: -webkit-calc(100% - 3.46rem);
    height: calc(100% - 3.46rem);
    min-width: 19.46rem;
    margin-top: 3.46rem;
    -webkit-border-top-left-radius: 3.5rem;
    border-top-left-radius: 3.5rem;
    -webkit-border-bottom-left-radius: 3.5rem;
    border-bottom-left-radius: 3.5rem
}

@media (max-width: 500px) {
    .introPage .logoContainer .letterContainer {
        border:1.1rem solid #000;
        margin: 0 1.071rem 0 .787rem;
        margin-top: 1.356rem;
        min-width: 8.8rem;
        height: -webkit-calc(100% - 1.356rem);
        height: calc(100% - 1.356rem)
    }
}

.introPage .logoContainer .animationLetter {
    -webkit-animation: letterExtend 1.8s;
    animation: letterExtend 1.8s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@media (max-width: 500px) {
    .introPage .logoContainer .animationLetter {
        -webkit-animation:letterExtendMobile 1.8s;
        animation: letterExtendMobile 1.8s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards
    }
}

.introPage .logoContainer img {
    height: 100%;
    width: auto
}

.introPage .logoContainer img:first-child {
    height: -webkit-calc(100% - 3.46rem);
    height: calc(100% - 3.46rem);
    margin-top: 3.46rem
}

@media (max-width: 500px) {
    .introPage .logoContainer img:first-child {
        margin-top:1.356rem;
        height: -webkit-calc(100% - 1.356rem);
        height: calc(100% - 1.356rem)
    }
}

.introPage .loading {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 3.8rem;
    line-height: 3.8rem
}

@media (max-width: 500px) {
    .introPage .loading {
        font-size:2rem;
        line-height: 2rem
    }
}

@-webkit-keyframes letterExtend {
    0% {
        min-width: 19.46rem
    }

    to {
        min-width: 100%
    }
}

@keyframes letterExtend {
    0% {
        min-width: 19.46rem
    }

    to {
        min-width: 100%
    }
}

@-webkit-keyframes letterExtendMobile {
    0% {
        min-width: 8.8rem
    }

    to {
        min-width: 100%
    }
}

@keyframes letterExtendMobile {
    0% {
        min-width: 8.8rem
    }

    to {
        min-width: 100%
    }
}

.mainSectionText1-5 {
    padding-top: 37.745rem;
    padding-left: 11.069rem;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    opacity: 0;
    -webkit-transition: opacity .3s ease,-webkit-transform .3s ease;
    transition: opacity .3s ease,-webkit-transform .3s ease;
    -o-transition: transform .3s ease,opacity .3s ease;
    transition: transform .3s ease,opacity .3s ease;
    transition: transform .3s ease,opacity .3s ease,-webkit-transform .3s ease
}

@media (max-width: 500px) {
    .mainSectionText1-5 {
        padding-top:22.7rem;
        padding-left: 2.4rem;
        height: var(--app-height)
    }
}

.mainSectionText1-5 .title {
    margin-bottom: 3.406rem;
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    font-weight: 400;
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: .01em;
    width: 64.864rem
}

@media (max-width: 500px) {
    .mainSectionText1-5 .title {
        font-size:6rem;
        line-height: 6rem;
        width: 36.4rem
    }
}

.mainSectionText1-5 .subTitle p {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    width: 37.7rem
}

@media (max-width: 500px) {
    .mainSectionText1-5 .subTitle p {
        font-size:1.6rem;
        line-height: 2.1rem;
        width: 19.4rem
    }
}

.mainSectionText {
    padding-top: 25.612rem;
    padding-left: 11.168rem;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    opacity: 0;
    -webkit-transition: opacity .3s ease,-webkit-transform .3s ease;
    transition: opacity .3s ease,-webkit-transform .3s ease;
    -o-transition: transform .3s ease,opacity .3s ease;
    transition: transform .3s ease,opacity .3s ease;
    transition: transform .3s ease,opacity .3s ease,-webkit-transform .3s ease
}

@media (max-width: 500px) {
    .mainSectionText {
        padding-top:34.7rem;
        padding-left: 2.5rem;
        height: var(--app-height)
    }
}

.mainSectionText .title {
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    font-weight: 400;
    font-size: 22.0738rem;
    line-height: 22.1rem;
    line-height: 16.1rem
}

@media (max-width: 500px) {
    .mainSectionText .title {
        font-size:6.4rem;
        line-height: 6.4rem
    }
}

.mainSectionText .titleOfset {
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    font-weight: 400;
    font-size: 22.0738rem;
    line-height: 22.1rem;
    margin-left: 38.077rem;
    margin-bottom: 2.979rem
}

@media (max-width: 500px) {
    .mainSectionText .titleOfset {
        font-size:6.4rem;
        line-height: 6.4rem;
        margin-bottom: 2.2rem;
        margin-left: 6.6rem
    }
}

.mainSectionText .subTitle {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    margin-left: 39.332rem;
    width: 40rem;
    margin-top: 5.73rem;
}

.mainSectionText .preTitle {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 800;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    margin-left: 1.332rem;
    width: 24.4rem;
    margin-top: 5.73rem;
	margin-bottom: 4rem;
}

@media (max-width: 500px) {
    .mainSectionText .subTitle {
        font-size:1.6rem;
        line-height: 2.1rem;
        margin-left: 6.6rem;
        margin-top: 0;
        width: 20rem
    }
}

.mainSectionText button {
    display: none;
    width: 15.8rem;
    height: 4.8rem;
    -webkit-box-shadow: 0 0 15px rgba(155,255,237,.5);
    box-shadow: 0 0 15px rgba(155,255,237,.5);
    background: -webkit-linear-gradient(171.75deg,#a2ffff -4.48%,#c3ffed 114.96%);
    background: -o-linear-gradient(171.75deg,#a2ffff -4.48%,#c3ffed 114.96%);
    background: linear-gradient(278.25deg,#a2ffff -4.48%,#c3ffed 114.96%);
    -webkit-border-radius: 1.1rem;
    border-radius: 1.1rem;
    color: #000;
    font-family: Proxima-Nova-Font;
    font-style: normal;
    margin-left: 6.6rem;
    margin-top: 5.8rem;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.8rem;
    letter-spacing: .01em;
    cursor: pointer;
    -webkit-transition: color .4s;
    -o-transition: color .4s;
    transition: color .4s;
    -webkit-transition: background-color .4s;
    -o-transition: background-color .4s;
    transition: background-color .4s;
    -webkit-transform: translate3d(0);
    transform: translate3d(0);
    -webkit-transition: -webkit-transform .15s ease-out;
    transition: -webkit-transform .15s ease-out;
    -o-transition: transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out,-webkit-transform .15s ease-out;
    -webkit-overflow: hidden;
    -webkit-transform: translateZ(0)
}

@media (max-width: 500px) {
    .mainSectionText button {
        display:block
    }
}

.mainSectionText button:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02)
}

.mainSectionText button:active {
    -webkit-transform: scale(.98);
    -ms-transform: scale(.98);
    transform: scale(.98)
}

.mainSectionText2 {
    padding-top: 30.893rem;
    padding-left: 10.564rem;
    position: relative;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    opacity: 0;
    -webkit-transition: opacity .3s ease,-webkit-transform .3s ease;
    transition: opacity .3s ease,-webkit-transform .3s ease;
    -o-transition: transform .3s ease,opacity .3s ease;
    transition: transform .3s ease,opacity .3s ease;
    transition: transform .3s ease,opacity .3s ease,-webkit-transform .3s ease
}

@media (max-width: 500px) {
    .mainSectionText2 {
        padding-top:21.3rem;
        padding-left: 2.4rem
    }
}

.mainSectionText2 .pageCountBlock {
    margin-left: .5rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.mainSectionText2 .pageCountBlock .currentPage {
    width: 6.62rem;
    height: 6.62rem;
    border: 1px solid #000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 1.434rem;
    position: relative
}

.mainSectionText2 .pageCountBlock .currentPage .pageNumber {
    position: absolute;
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 2.6rem;
    letter-spacing: -.02em;
    color: #000;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

@media (max-width: 500px) {
    .mainSectionText2 .pageCountBlock .currentPage .pageNumber {
        font-size:1.6rem;
        line-height: 1.6rem
    }
}

@media (max-width: 500px) {
    .mainSectionText2 .pageCountBlock .currentPage {
        width:4.233rem;
        height: 4.233rem
    }
}

.mainSectionText2 .pageCountBlock .allPages {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 2.6rem;
    letter-spacing: -.02em;
    color: #000
}

@media (max-width: 500px) {
    .mainSectionText2 .pageCountBlock .allPages {
        font-size:1.6rem;
        line-height: 1.6rem
    }
}

.mainSectionText2 .title {
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    font-weight: 400;
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: .01em;
    margin: 6.399rem 0 5.879rem
}

@media (max-width: 500px) {
    .mainSectionText2 .title {
        font-size:6rem;
        line-height: 6rem;
        margin: 2.067rem 0 2.4rem
    }
}

.mainSectionText2 .subTitle {
    margin-left: .5rem
}

.mainSectionText2 .subTitle p {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    width: 42rem;
    -webkit-transition: color .4s;
    -o-transition: color .4s;
    transition: color .4s;
    color: #9a9a9a
}

@media (max-width: 500px) {
    .mainSectionText2 .subTitle p {
        width:29rem;
        font-size: 1.6rem;
        line-height: 2.1rem
    }
}

.mainSectionText2 .subTitle p:first-child {
    color: #000
}

@media (max-width: 500px) {
    .mainSectionText2 .subTitle p:first-child {
        width:29rem;
        font-size: 1.6rem;
        line-height: 2.1rem;
        display: block
    }
}

@media (max-width: 500px) {
    .mainSectionText2 .subTitle {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.mainSectionText3 {
    padding-top: 41.346rem;
    padding-left: 10.202rem;
    padding-bottom: 8.8rem;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    opacity: 0;
    -webkit-transition: opacity .3s ease,-webkit-transform .3s ease;
    transition: opacity .3s ease,-webkit-transform .3s ease;
    -o-transition: transform .3s ease,opacity .3s ease;
    transition: transform .3s ease,opacity .3s ease;
    transition: transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

@media (max-width: 500px) {
    .mainSectionText3 {
        height:var(--app-height);
        padding-top: 15.9rem;
        padding-left: 2.5rem
    }
}

.mainSectionText3 .pageCountBlock {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.mainSectionText3 .pageCountBlock .currentPage {
    width: 6.62rem;
    height: 6.62rem;
    border: 1px solid #000;
    margin-right: 1.434rem;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: relative
}

.mainSectionText3 .pageCountBlock .currentPage .pageNumber {
    position: absolute;
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 2.6rem;
    letter-spacing: -.02em;
    color: #000;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

@media (max-width: 500px) {
    .mainSectionText3 .pageCountBlock .currentPage .pageNumber {
        font-size:1.6rem;
        line-height: 1.6rem
    }
}

@media (max-width: 500px) {
    .mainSectionText3 .pageCountBlock .currentPage {
        width:4.233rem;
        height: 4.233rem
    }
}

.mainSectionText3 .pageCountBlock .allPages {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 2.6rem;
    letter-spacing: -.02em;
    color: #000
}

@media (max-width: 500px) {
    .mainSectionText3 .pageCountBlock .allPages {
        font-size:1.6rem;
        line-height: 1.6rem
    }
}

.mainSectionText3 .textContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 7.733rem;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

@media (max-width: 500px) {
    .mainSectionText3 .textContainer {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 0;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.mainSectionText3 .textContainer .subBlock {
    height: 18rem
}

.mainSectionText3 .textContainer .dotsContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 4.336rem
}

.mainSectionText3 .textContainer .dotsContainer .dot {
    width: .9rem;
    height: .9rem;
    background-color: #000;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

@media (max-width: 500px) {
    .mainSectionText3 .textContainer .dotsContainer .dot {
        width:.6rem;
        height: .6rem
    }
}

.mainSectionText3 .textContainer .dotsContainer .dot:first-child {
    margin-right: .345rem
}

.mainSectionText3 .textContainer .dotsContainer .dot:last-child {
    margin-left: .345rem
}

.mainSectionText3 .textContainer .dotsContainer #activeDot {
    margin-left: 2.252rem;
    margin-right: 0;
    -webkit-transition: margin .4s;
    -o-transition: margin .4s;
    transition: margin .4s
}

.mainSectionText3 .textContainer .title {
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    font-weight: 400;
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: .01em;
    margin-right: 7.7rem
}

@media (max-width: 500px) {
    .mainSectionText3 .textContainer .title {
        font-size:6rem;
        line-height: 6rem;
        margin: 2.067rem 0 4.4rem
    }
}

.mainSectionText3 .textContainer .subTitle h4 {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2.20666rem;
    line-height: 2.6rem
}

@media (max-width: 500px) {
    .mainSectionText3 .textContainer .subTitle h4 {
        font-size:1.8rem;
        line-height: 2.1rem
    }
}

.mainSectionText3 .textContainer .subTitle p {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    color: #9a9a9a
}

@media (max-width: 500px) {
    .mainSectionText3 .textContainer .subTitle p {
        font-size:1.6rem;
        line-height: 2.1rem
    }
}

.mainSectionText3 .textContainer #stage4text1 {
    display: block;
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

.mainSectionText3 .textContainer #stage4text1 h4 {
    margin-bottom: 2.2rem
}

.mainSectionText3 .textContainer #stage4text2 {
    display: none;
    opacity: 0;
    -webkit-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

.mainSectionText3 .textContainer #stage4text2 h4 {
    margin-bottom: 2rem
}

.mainSectionText3 .textContainer #stage4text3 {
    display: none;
    opacity: 0;
    -webkit-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

.mainSectionText3 .textContainer #stage4text3 h4 {
    margin-bottom: 2.5rem
}

.textAppear,.textDisappear {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.mainSectionText4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-bottom: 8.8rem;
    padding-left: 10.483rem;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    opacity: 0;
    -webkit-transition: opacity .3s ease,-webkit-transform .3s ease;
    transition: opacity .3s ease,-webkit-transform .3s ease;
    -o-transition: transform .3s ease,opacity .3s ease;
    transition: transform .3s ease,opacity .3s ease;
    transition: transform .3s ease,opacity .3s ease,-webkit-transform .3s ease
}

@media (max-width: 500px) {
    .mainSectionText4 {
        padding-top:18.4rem;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        height: var(--app-height);
        padding-left: 2.5rem
    }
}

.mainSectionText4 .pageCountBlock {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.mainSectionText4 .pageCountBlock .currentPage {
    width: 6.62rem;
    height: 6.62rem;
    border: 1px solid #000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 1.434rem;
    position: relative
}

.mainSectionText4 .pageCountBlock .currentPage .pageNumber {
    position: absolute;
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 2.6rem;
    letter-spacing: -.02em;
    color: #000;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

@media (max-width: 500px) {
    .mainSectionText4 .pageCountBlock .currentPage .pageNumber {
        font-size:1.6rem;
        line-height: 1.6rem
    }
}

@media (max-width: 500px) {
    .mainSectionText4 .pageCountBlock .currentPage {
        width:4.233rem;
        height: 4.233rem
    }
}

.mainSectionText4 .pageCountBlock .allPages {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 2.6rem;
    letter-spacing: -.02em;
    color: #000
}

@media (max-width: 500px) {
    .mainSectionText4 .pageCountBlock .allPages {
        font-size:1.6rem;
        line-height: 1.6rem
    }
}

.mainSectionText4 .title {
    font-family: Neue Haas Grotesk Display Thin;
    font-style: normal;
    font-weight: 400;
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: .01em;
    width: 92.5rem;
    margin-top: 31.295rem
}

@media (max-width: 500px) {
    .mainSectionText4 .title {
        font-size:6rem;
        width: 33rem;
        line-height: 6rem;
        margin-top: 2.967rem
    }
}

.header {
    position: fixed;
    width: -webkit-calc(100% - 14.8rem);
    width: calc(100% - 14.8rem);
    margin: 3.353rem 7.4rem;
    top: 0;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    /* -webkit-box-align:center; */
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0;
    z-index: 4;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
    display: none;
    -webkit-transition-delay: 0s!important;
    -o-transition-delay: 0s!important;
    transition-delay: 0s!important
}

@media (max-width: 500px) {
    .header {
        margin:2.1rem 2.4rem;
        width: -webkit-calc(100% - 4.8rem);
        width: calc(100% - 4.8rem)
    }
}

.header__logo {
    -webkit-filter: invert(0);
    filter: invert(0);
    width: 25rem;
	/*height: 1.969rem;*/
    -webkit-transition: -webkit-filter .3s;
    transition: -webkit-filter .3s;
    -o-transition: filter .3s;
    transition: filter .3s;
    transition: filter .3s,-webkit-filter .3s
}

@media (max-width: 500px) {
    .header__logo {
        width:10.802rem;
        /*height: 1.939rem*/
    }
}

.header__logo img {
    width: 100%;
    height: 100%
}

.header__buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.header__buttons button {
    width: 21.412rem;
    height: 6.622rem;
    background: #000;
    -webkit-border-radius: 1.1rem;
    border-radius: 1.1rem;
    color: #fff;
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 3.6rem;
    letter-spacing: .03em;
    -webkit-transform: translate3d(0);
    transform: translate3d(0);
    -webkit-transition: background-color .4s,color .4s,-webkit-transform .15s;
    transition: background-color .4s,color .4s,-webkit-transform .15s;
    -o-transition: transform .15s,background-color .4s,color .4s;
    transition: transform .15s,background-color .4s,color .4s;
    transition: transform .15s,background-color .4s,color .4s,-webkit-transform .15s;
    -webkit-overflow: hidden;
    -webkit-transform: translateZ(0)
}

.header__buttons button:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02)
}

.header__buttons button:active {
    -webkit-transform: scale(.98);
    -ms-transform: scale(.98);
    transform: scale(.98)
}

.header__buttons a {
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 3.6rem;
    letter-spacing: .03em;
    -webkit-transition: color .4s;
    -o-transition: color .4s;
    transition: color .4s;
    margin-right: 6.291rem;
    position: relative
}

.header__buttons a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    -webkit-transition: -webkit-transform .25s;
    transition: -webkit-transform .25s;
    -o-transition: transform .25s;
    transition: transform .25s;
    transition: transform .25s,-webkit-transform .25s;
    background-color: var(--border-color);
    left: 0;
    bottom: -.15rem
}

.header__buttons a:hover:before {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left
}

.header__buttons .active {
    pointer-events: none
}

.header__buttons .active:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1)
}

@media (max-width: 500px) {
    .header__buttons {
        display:none
    }
}

.header__burger {
    display: none;
    width: 2.6rem;
    height: 1.4rem;
    position: relative
}

@media (max-width: 500px) {
    .header__burger {
        display:-webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

.header__burger div {
    width: 100%;
    height: 3px;
    background-color: #000;
    -webkit-transition-duration: .4s;
    -o-transition-duration: .4s;
    transition-duration: .4s;
    position: absolute
}

.header__burger .line2 {
    bottom: 0
}

.header .active.line1 {
    width: 2.3rem;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    bottom: 50%
}

.header .active.line2 {
    width: 2.3rem;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    bottom: 50%
}

menu>li,ul li {
    list-style-type: none
}

:root {
    --app-height: 100%;
    --border-color: #000
}

.videoContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media (max-width: 500px) {
    .videoContainer {
        height:var(--app-height)
    }
}

.plug {
    display: none
}

video {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

#backgroundVideoHIW {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

#backgroundVideoGIT,#backgroundVideoHIW {
    width: 100%;
    height: 100%;
    will-change: auto;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0;
    pointer-events: none
}

#backgroundVideoGIT {
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s
}

#backgroundVideo {
    width: 100%;
    height: 100%;
    will-change: auto;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    z-index: 0
}

@media (max-width: 500px) {
    .allPages {
        display:none
    }
}

.cardsContainerMain {
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: none;
    width: 100%;
    height: 100%;
    z-index: 1
}

.status {
    position: absolute;
    background: hsla(0,0%,85%,.01);
    border: 1px solid #000;
    -webkit-border-radius: 22px;
    border-radius: 22px;
    font-family: Neue Haas Grotesk Display Light;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: .05em;
    color: #545454;
    font-size: 20px;
    line-height: 26px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    letter-spacing: .01em
}

@media (max-width: 500px) {
    .status {
        font-size:16px;
        line-height: 19px
    }
}

.status span {
    color: #000
}

.stage1,.stage2,.stage3 {
    opacity: 0;
    -webkit-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s
}

.cards {
    position: absolute;
    width: 100%;
    height: 100%;
    will-change: auto;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
    transition: opacity .5s ease,-webkit-transform .5s ease;
    -o-transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease;
    transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease
}

.desktop {
    display: block
}

@media (max-width: 500px) {
    .desktop {
        display:none
    }
}

.mobile {
    display: none
}

@media (max-width: 500px) {
    .mobile {
        display:block
    }
}

.card1,.card2 {
    opacity: 0
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background: hsla(0,0%,91%,.8);
    border: .1rem solid #000;
    border-top: none;
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    -webkit-border-radius: 0 0 2.4rem 2.4rem;
    border-radius: 0 0 2.4rem 2.4rem;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 27rem;
    padding-left: 8.9rem
}

@media (max-width: 500px) {
    .overlay {
        display:-webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

.overlay button {
    width: 15.8rem;
    height: 4.8rem;
    background: -webkit-linear-gradient(171.75deg,#a2ffff -4.48%,#c3ffed 114.96%);
    background: -o-linear-gradient(171.75deg,#a2ffff -4.48%,#c3ffed 114.96%);
    background: linear-gradient(278.25deg,#a2ffff -4.48%,#c3ffed 114.96%);
    -webkit-border-radius: .814433rem;
    border-radius: .814433rem;
    color: #000;
    -webkit-box-shadow: 0 0 15px rgba(155,255,237,.5);
    box-shadow: 0 0 15px rgba(155,255,237,.5);
    font-family: Proxima-Nova-Font;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.8rem;
    cursor: pointer;
    -webkit-transition: color .4s;
    -o-transition: color .4s;
    transition: color .4s;
    -webkit-transition: background-color .4s;
    -o-transition: background-color .4s;
    transition: background-color .4s;
    -webkit-transform: translate3d(0);
    transform: translate3d(0);
    -webkit-transition: -webkit-transform .15s ease-out;
    transition: -webkit-transform .15s ease-out;
    -o-transition: transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out,-webkit-transform .15s ease-out;
    -webkit-overflow: hidden;
    -webkit-transform: translateZ(0)
}

.overlay button:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02)
}

.overlay button:active {
    -webkit-transform: scale(.98);
    -ms-transform: scale(.98);
    transform: scale(.98)
}

.overlay a {
    font-family: Neue Haas Grotesk Display Thin;
    font-weight: 400;
    font-size: 6.4rem;
    line-height: 9rem;
    letter-spacing: .01em;
    margin-bottom: 6.291rem
}

.disabled {
    display: none
}

.disabledButtonOp {
    opacity: .5;
    pointer-events: none
}

.landingIndexPage {
    height: 100%
}

.landingIndexPage:first-child {
    height: 100vh
}

.landingIndexPage:nth-child(2),.landingIndexPage:nth-child(3),.landingIndexPage:nth-child(4),.landingIndexPage:nth-child(5),.landingIndexPage:nth-child(6) {
    height: 100%
}

.landingIndexPage:nth-child(7),.landingIndexPage:nth-child(8) {
    height: 100%;
    background-color: #d7d9d6
}

.landingIndexPage:nth-child(10) {
    height: 100%;
    background-color: #222325
}

.fp-watermark {
    display: none!important
}

.fullpage {
    z-index: 2
}

.animationCardAppear {
    -webkit-transition-delay: .35s;
    -o-transition-delay: .35s;
    transition-delay: .35s
}

.animationAppear,.animationCardAppear {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
}

.animationAppear {
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s
}

.animationAppearFast {
    opacity: 1
}

.animationAppearFast,.animationAppearLastSection {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.animationAppearLastSection {
    opacity: 1!important;
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s
}

.animationDisappear,.animationDisappearFast,.animationDisappearLong {
    opacity: 0
}

.animationAppearOpacity {
    opacity: 1;
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s
}

.animationDisappearOpacity {
    opacity: 0
}

.changeBackToBlack {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
    color: #fff
}

.changeBackToWhite {
    color: #000
}

.changeWrapperToWhite {
    background-color: #e1e4e2!important
}

.changeWrapperToBlack {
    background-color: #222325
}

.changeBackToWhiteReverse {
    background-color: #e1e4e2;
    color: #000;
    opacity: 0
}