body {
height: 100%;
width: 100%;
margin: 0px;
}


img {
border-width: 0px;
}


@font-face {
    font-family: "GothamHTF-Medium";
    src: url('../font/GothamHTF-Medium.eot');
    src: url('../font/GothamHTF-Medium.eot') format('embedded-opentype'),
         url('../font/GothamHTF-Medium.woff') format('woff'),
         url('../font/GothamHTF-Medium.ttf') format('truetype'),
         url('../font/GothamHTF-Medium.svg#GothamHTF-Medium') format('svg');
}

#preload{
display: none;
}

#logo{
position: fixed;
top: 3%;
left: 5%;
width: auto;
height: 5%;
z-index: 13;
}
@media screen and (orientation:portrait) {
#logo{
top: 4.5%;
left: 8%;
}
}

#language{
position: fixed;
top: -20%;
right: 46%;
width: 4%;
height: auto;
cursor: pointer;
display: block;
z-index: 11;
}
@media screen and (orientation:portrait) {
#language{
display: none;
}
}


#language_mobile{
margin-right: 9%;
width: 22%;
height: auto;
}


#menu{
position: fixed;
top: -20%;
right: 20%;
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 0.8vw;
color: #fff;
display: block;
z-index: 11;
}
@media screen and (orientation:portrait) {
#menu{
display: none;
}
}


#menu span:hover{
text-decoration: underline;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#menu span:hover{
}
}


#menu_mobile{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 6.5vw;
line-height: 9.5vw;
text-align: right;
color: #fff;
display: none;
z-index: 12;
}


#menu_mobile span{
margin-right: 9%;
}


.menu_button{
display: none;
}
@media screen and (orientation:portrait) {
.menu_button{
position: fixed;
top: 4%;
right: 8%;
width: 11%;
height: auto;
display: block;
z-index: 13;
}
}


#close_menu{
display: none;
}


#login{
position: fixed;
top: -20%;
right: 5%;
width: 11%;
height: auto;
cursor: pointer;
display: block;
z-index: 11;
}
@media screen and (orientation:portrait) {
#login{
display: none;
}
}


#login_mobile{
display: none;
}
@media screen and (orientation:portrait) {
#login_mobile{
position: fixed;
top: 4%;
right: 22%;
width: 33%;
height: auto;
display: block;
z-index: 13;
}
}


#gradient{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 16%;
z-index: 10;
}
@media screen and (orientation:portrait) {
#gradient{
height: 20%;
}
}


#gradient_white{
position: absolute;
bottom: -1%;
right: 0px;
width: 50%;
height: 15%;
z-index: 10;
}
@media screen and (orientation:portrait) {
#gradient_white{
width: 100%;
height: 5%;
}
}


#white_bg{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
}
@media screen and (orientation:portrait) {
#white_bg{
}
}


#white_bg video{
position: absolute;
object-fit: cover;
width:100%;
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.15;
z-index: 1;
}
@media screen and (orientation:portrait) {
#white_bg video{
}
}


.section{
position: absolute;
left: 0px;
width: 100%;
overflow: hidden;
z-index: 1;
}
@media screen and (orientation:portrait) {
.section{
}
}


#section01{
top: 0px;
height: 100%;
background-color: #0F3763;
}
@media screen and (orientation:portrait) {
#section01{
}
}


#section02{
top: 100%;
height: 200%;
}
@media screen and (orientation:portrait) {
#section02{
}
}


#section03{
top: 320%;
height: 160%;
background-color: #104073; 
}
@media screen and (orientation:portrait) {
#section03{
height: 110%;
}
}

#section04{
top: 480%;
height: 32%;
background-color: #EBEBEB; 
}
@media screen and (orientation:portrait) {
#section04{
top: 420%;
height: 20%;
}
}

#videos {

    align-content: center !important;
    justify-content: center !important;
    text-align: center !important;
}

#section06{
top: 512%;
height: 82%;
background-color: #104073;
}
@media screen and (orientation:portrait) {
#section06{
top: 440%;
height: 70%;
}
}

#section05{
top: 604%;
height: 22%;
background-color: #fff;
display: flex;
align-items: center;
text-align: center;
}
@media screen and (orientation:portrait) {
#section05{
top: 510%;
height: 30%;
}
}

#section01 video{
position: absolute;
object-fit: cover;
width:100%;
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.3;
z-index: 1;
}
@media screen and (orientation:portrait) {
#section01 video{
}
}


#white{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 28%;
z-index: 2;
}
@media screen and (orientation:portrait) {
#white{
height: 15%;
}
}


#headline{
position: absolute;
top: 25%;
left: -40%;
width: 40%;
height: 50%;
z-index: 2;
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 6vw;
line-height: 5.5vw;
letter-spacing: -0.3vw;
color: #fff;
z-index: 4;
}
@media screen and (orientation:portrait) {
#headline{
top: 20%;
left: -60%;
width: 90%;
font-size: 7.5vw;
line-height: 8vw;
letter-spacing: -0.3vw;
}
}


.button{
cursor: pointer;
}
@media screen and (orientation:portrait) {
.button{
position: absolute;
top: 0px;
right: 7%;
}
}


#learnmore{
width: 28%;
height: auto;
display: none;
}
@media screen and (orientation:portrait) {
#learnmore{
top: 1%;
width: 40%;
height: auto;
}
}


#signup{
margin-top: 100px;
width: 28%;
height: auto;
display: none;
}
@media screen and (orientation:portrait) {
#signup{
top: 16%;
margin-top: inherit;
width: 40%;
height: auto;
}
}


#desktop_view{
position: absolute;
top: 16%;
right: -45%;
width: 45%;
height: auto;
z-index: 3;
}
@media screen and (orientation:portrait) {
#desktop_view{
top: 40%;
right: -90%;
width: 90%;
}
}


#mobile_view{
position: absolute;
top: 18%;
right: -39%;
width: 38.5%;
height: auto;
z-index: 4;
}
@media screen and (orientation:portrait) {
#mobile_view{
top: 40%;
right: -84%;
width: 83.5%;
}
}


.title{
position: relative;
margin-top: 7%;
margin-bottom: 5%;
margin-left: 15%;
width: 50%;
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 1.5vw;
line-height: 1.5vw;
color: #0F3763;
}
@media screen and (orientation:portrait) {
.title{
margin-left: 10%;
width: 65%;
font-size: 3.5vw;
line-height: 3.5vw;
}
}


@media screen and (orientation:portrait) {
#section03 .title{
margin-top: 13%;
}
}

@media screen and (orientation:portrait) {
#section06 .title{
margin-top: 13%;
}
}

#title_white{
color: #fff;
}
@media screen and (orientation:portrait) {
#title_white{
}
}

.title span{
font-size: 5vw;
line-height: 4.5vw;
letter-spacing: -0.3vw;
}
@media screen and (orientation:portrait) {
.title span{
font-size: 8vw;
line-height: 7.5vw;
}
}


#title_section04{
position: absolute;
top: 0px;
left: 15%;
width: 30%;
height: 100%;
display: flex;
align-items: center;
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 2.6vw;
letter-spacing: -0.1vw;
color: #0F3763;
}
@media screen and (orientation:portrait) {
#title_section04{
left: 10%;
font-size: 6.8vw;
line-height: 6.8vw;
letter-spacing: -0.3vw;
}
}


.benefits{
position: relative;
margin-top: 3%;
margin-left: 15%;
width: 60%;
height: 20%;
z-index: 1;
}
@media screen and (orientation:portrait) {
.benefits{
margin-left: 9%;
width: 80%;
height: 30%;
}
}


@media screen and (orientation:portrait) {
#whymemo{
margin-top: -10%;
}
}


.benefits img{
position: absolute;
top: 0px;
left: 0px;
max-width: 30%;
max-height: 100%;
}
@media screen and (orientation:portrait) {
.benefits img{
}
}


.benefits .description{
position: absolute;
top: 0px;
left: 35%;
height: 100%;
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 0.9vw;
line-height: 0.9vw;
color: #0F3763;
z-index: 1;
}
@media screen and (orientation:portrait) {
.benefits .description{
}
}


.description img{
position: relative;
width: 18%;
margin-right: 1%;
margin-top: 1%;
}
@media screen and (orientation:portrait) {
.description img{
width: 100% !important;
}
}


.meet_title{
font-size: 1.5vw;
line-height: 1.5vw;
letter-spacing: -0.1vw;
color: #B3B3B3;
}
@media screen and (orientation:portrait) {
.meet_title{
font-size: 6.5vw !important;
line-height: 6.5vw !important;
}
}


#title_features{
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 2.2vw;
line-height: 2.2vw;
letter-spacing: -0.1vw;
}
@media screen and (orientation:portrait) {
#title_features{
}
}


.meet_highlight{
font-size: 3vw !important;
line-height: 3vw !important;
letter-spacing: -0.1vw !important;
}
@media screen and (orientation:portrait) {
.meet_highlight{
}
}


#features{
position: relative;
margin-top: 6%;
margin-left: 20%;
margin-bottom: 30%;
width: 60%;
z-index: 1;
}
@media screen and (orientation:portrait) {
#features{
margin-top: -30%;
margin-left: 10%;
width: 80%;
}
}


@media screen and (orientation:portrait) {
#section03 #features{
margin-top: 10%;
}
}

@media screen and (orientation:portrait) {
#section06 #features{
    align-content: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 10%;
}
}

.feature{
position: relative;
width: 50%;
margin-bottom: 9%;
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 0.9vw;
line-height: 0.9vw;
color: #0F3763;
float: left;
}
@media screen and (orientation:portrait) {
.feature{
margin-bottom: 49%;
}
}


@media screen and (orientation:portrait) {
#last_feature{
margin-bottom: 70% !important;
}
}


@media screen and (orientation:portrait) {
#section03 #features .feature{
margin-bottom: 45%;
}
}

@media screen and (orientation:portrait) {
#section06 #features .feature{
margin-bottom: 10%;
}
}

.feature img{
width: 13%;
height: auto;
}
@media screen and (orientation:portrait) {
.feature img{
}
}


.description{
position: absolute;
top: 10%;
left: 18%;
width: 80%;
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 0.9vw;
line-height: 0.9vw;
color: #0F3763;
z-index: 1;
}
@media screen and (orientation:portrait) {
.description{
width: 70%;
font-size: 3.5vw !important;
line-height: 3.5vw !important;
}
}


@media screen and (orientation:portrait) {
.feature .description{
font-size: 3vw !important;
line-height: 3vw !important;
}
}


.description span{
font-size: 2vw;
line-height: 2vw;
}
@media screen and (orientation:portrait) {
.description span{
font-size: 5vw !important;
line-height: 5vw !important;
}
}


@media screen and (orientation:portrait) {
.feature .description span{
font-size: 4.5vw !important;
line-height: 4.5vw !important;
}
}


#description_white{
color: #fff;
}
@media screen and (orientation:portrait) {
#description_white{
}
}


#integrations_logos{
position: relative;
margin-left: 25%;
width: 50%;
height: auto;
}
@media screen and (orientation:portrait) {
#integrations_logos{
margin-left: 10%;
width: 80%;
}
}


#partners_logos{
position: absolute;
top: 0px;
right: 15%;
width: 40%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (orientation:portrait) {
#partners_logos{
right: 5% !important;
width: 55%;
}
}


#partners_logos img{
max-width: 90%;
max-height: 100%;
}
@media screen and (orientation:portrait) {
#partners_logos img{
}
}


#footer_logos{
position: absolute;
left: 5%;
max-width: 26%;
max-height: 78%;
}
@media screen and (orientation:portrait) {
#footer_logos{
top: 14%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
max-width: 77%;
max-height: 89%;
}
}


#footer_links{
position: absolute;
right: 5%;
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 0.9vw;
line-height: 1.1vw;
color: #636363;
text-align: right;
display: block;
}
@media screen and (orientation:portrait) {
#footer_links{
display: none;
}
}


#footer_links span:hover{
cursor: pointer;
text-decoration: underline;
}
@media screen and (orientation:portrait) {
#footer_links span:hover{
}
}


#footer_copyright{
position: absolute;
bottom: 12%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
font-family: "GothamHTF-Medium", Arial, Helvetica, sans-serif;
font-size: 0.7vw;
line-height: 0.7vw;
color: #636363;
}
@media screen and (orientation:portrait) {
#footer_copyright{
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
font-size: 3vw;
}
}