@font-face {
    font-family: 'Apercu Pro';
    src: url(./font/apercu-condensed-bold-pro_0.ttf);
    /* font-weight: ; */
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: default;
}

*::-webkit-scrollbar {
    display: none;
}

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

#main {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#main #pages {
    width: 100%;
    height: 100%;
}

#pages #page1 {
    width: 100vw;
    height: 100vh;
    /* background-color: #FADB21; */
    /* position: absolute; */
    bottom: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
}

#pages #nav {
    position: fixed;
    background-color: #FADB21;
    top: 0;
    z-index: 2;
    width: 100vw;
    height: 9.5%;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: transparent; */
}

#nav #icon {
    width: 14%;
    height: 100%;
    padding-left: 3.5vw;
}

#icon img{
    cursor: pointer;
    width: 100%;
    height: 100%;
}

#page1 #mid {
    width: 100vw;
    height: 60.5%;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#page1 #btm {
    width: 100vw;
    height: 30%;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.sw {
    width: 20%;
    height: 100%;
}

.ctr {
    width: 60%;
    height: 100%;
}

#mid #ml {
    background-color: #8594E5;
    overflow: hidden;
}

#mid #mctr {
    background-color: rgb(0, 206, 124);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* z-index: -1; */
}

#mid #mr {
    background-color: #EE3C38;
    overflow: hidden;
}

#btm #bl {
    background-color: #3080C3;
}

#btm #bctr {
    background-color: #FADB21;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

#btm #br {
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#nav #btns {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-right: 20px;
}

#btns .btn {
    border-radius: 12.17857vh;
    transform: translate(0px, 0%);
    cursor: pointer;
}

.btn::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12.17857vh;
    border: 2px solid black;
    background: #fff;
    transform: translate(3px,3px);
}

.btn::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12.17857vh;
    border: 2px solid #000;
    background: #FFDD00;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    /* z-index: 1; */
}

.btnsize {
    width: 25.5%;
    height: 40%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0px 20px;
}

.btnsize h2 {
    padding-bottom: 1px;
    font-family: 'Apercu Pro';
    text-transform: uppercase;
    font-size: 18px;
    /* position: relative; */
    z-index: 1;
    cursor: pointer;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#lang {
    margin-left: 20px;
    width: 7%;
    height: 40%;
}

#lang h2 {
    font-family: 'Apercu Pro';
    text-transform: uppercase;
    font-size: 18px;
    position: absolute;
    top: 62%;
    left: 76%;
    transform: translate(-50%, -50%);
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#insta {
    width: 7%;
    height: 40%;
    margin: 0px 20px;
}

#insta i {
    position: absolute;
    top: 55%;
    left: 55%;
    transform: translate(-50%, -50%);
    z-index: 1;
    cursor: pointer;
    font-size: 20px;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#insta::before {
    background-color: #F04DB4;
}

#btns .btn:hover::after {
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    transform: translate(3px,3px);
}

#btns .btn:hover h2 {
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    transform: translate(3px, 3px);
}

#btns #lang:hover h2{
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    transform: translate(-50%, -50%) translate(3px, 3px);
}

#btns #insta:hover i{
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    transform: translate(-50%, -50%) translate(3px, 3px);
}

#btns .btn:nth-child(1):hover:after {
    background-color: #EE3C38;
}

#btns .btn:nth-child(2):hover:after {
    background-color: #8594E5;
}

#btns .btn:nth-child(3):hover:after {
    background-color: #fff;
}

#btns .btn:nth-child(4):hover:after {
    background-color: #fff;
}

#btns .btn:nth-child(5):hover:after {
    background-color: #F04DB4;
}

#mctr h1 {
    font-family: "Apercu Pro" ,'-apple-system','blinkmacsystemfont','sans-serif';
    text-transform: uppercase;
    font-size: 225px;
    line-height: 195px;
    font-weight: 700;
    color: black;
    text-align: left;
    width: 95%;
    letter-spacing: normal;
    /* background-color: red; */
    text-align: center;
}

#mctr h1:nth-child(1) {
    margin: 0.2em 1em 0 0;
}

#container {
    opacity: 0; 
    margin-left: 10px;
    position: absolute;
    top: 7%;
    left: 50%;
    width: 28%;
    height: 41%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
    /* background-color: red; */
}

#shoecontainer {
    opacity: 0;
    position: absolute;
    top: 6%;
    left: 67%;
    width: 40%;
    height: 90%;
    /* background-color: red; */
}

#bctr h1 {
    letter-spacing: normal;
    font-family: "Apercu Pro" ,'-apple-system','blinkmacsystemfont','sans-serif';
    text-transform: uppercase;
    font-size: 225px;
    font-weight: 700;
    /* vertical-align: baseline; */
    color: black;
    margin: 5px 40px 0px 0px;
    text-align: left;
}

#bl #twanim {
    width: 85%;
    height: 90%;
    /* background-color: red; */
    opacity: 0;
}

#twanim img {
    width: 100%;
    height: 100%;
}

#twanim #cloudcontainer {
    position: absolute;
    top: 60%;
    left: 49%;
    transform: translate(-50%, -50%);
    width: 65%;
    height: 80%;
    /* background-color: red; */
}

#ml #limgs {
    opacity: 0;
    margin-top: 12px;
    width: 450%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%) translateX(-0%);
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
    padding-left: 140%;
}

#mr #rimgs {
    opacity: 0;
    margin-top: 12px;
    width: 450%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%) translateX(-0%);
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
    padding-left: 145%;
    will-change: transform;
}

#ml #limgs .fimg:nth-child(n) {
    width: 22%;
}

#mr #rimgs .cimg:nth-child(n) {
    width: 22%;
}   

#limgs img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#rimgs img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#br #arrow {
    opacity: 0;
    width: 55%;
    height: 60%;
}

#arrow img {
    width: 100%;
    will-change: transform;
}