body{
    /* overflow: hidden; */
}
.landing{
    /* z-index: 99999; */
    /* height: 100vh; */
    width: 100vw;
    background-color: #212326;
    position: fixed;
    height: 100vw;
    transform: translate(0, -50%);
    top: 50%;
    /* clip-path: polygon(0% 0%, 0 100%, 100% 100%, 100% 0, 89.5% 0, 15.5% 100%, 15.5% 100%, 15.5% 100%, 89.5% 0); */
    /* clip-path: polygon(0% 0%, 0 100%, 100% 100%, 100% 0, 31.2% 0, 74.2% 100%, 73.7% 100%, 73.7% 100%, 30.7% 0); */
    /* -webkit-clip-path: url(#clipping-with-text);
    clip-path: url(#clipping-with-text); */
    /* -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath); */
    --clip-path: polygon(
        /* left Trapezoid, starting at top left */
        /* 0% 0%, 0 100%, 15% 100%, 89.5% 0, 0% 0%, */

        /* top rectangle, starting at top left */
        /* 0% 0%, 0 49.5%, 100% 49.5%, 100% 0, 0% 0%, */

        /* right Trapezoid, starting at top right */
        100% 100%, 100% 0, 90% 0, 16% 100%, 100% 100%,

        /* bottom rectangle, starting at bottom left */
        100% 100%, 100% 50.5%, 0% 50.5%, 0% 100%, 100% 100%
      );
    /* -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path); */
}
/* #svgPath text{
    transform: translate(calc(50vw + 0px), calc(50vh - 0px)) scale(1);
} */
.landing_line{
    position: absolute;
    top: 50%;
    left: 52.5%;
    transform: translate(-50%, -50%) rotate(36.5deg);
    background-color: #ffffff;
    height: 0vh;
    width: 1px;
    transition: all 1s linear;
}
.landing.open .landing_line{
    height: 125vh;
}
.landing.open1{
    /* clip-path: polygon(0% 0%, 0 100%, 100% 100%, 100% 0, 100% 0, 100% 100%, 0% 100%, 0% 0); */
    animation-delay: 1.1s;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-name: landingOpen;
    animation-fill-mode: forwards;
}
@keyframes landingOpen {
    0% {clip-path: polygon(0% 0%, 0 100%, 100% 100%, 100% 0, 89.5% 0, 15.5% 100%, 15.5% 100%, 15.5% 100%, 89.5% 0);}
    25% {clip-path: polygon(0% 0%, 0 100%, 100% 100%, 100% 0, 100% 0, 25.5% 100%, 0% 100%, 0% 100%, 74.0% 0);}
    100% {clip-path: polygon(0% 0%, 0 100%, 100% 100%, 100% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%, 0% 0);}
}
.landing-logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background: blue; */
}
.landing-logo > .logo_mask{
    width: 40vw;
}
.landing-logo > .logo_mask{
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
    /* clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); */
    animation-delay: 0s;
    /* animation-duration: .8s; */
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-name: landingOpen1;
    animation-fill-mode: forwards;
}
.landing-logo > .logo_mask:nth-child(2){
    clip-path: polygon(69% 0%, 63% 100%, 100% 100%, 100% 0);
    position: absolute;
    top: 0;
    left: 0;
    /* animation-delay: .7s;
    animation-duration: .5s; */
    animation-delay: 0.9s;
    animation-duration: .7s;
    animation-name: landingOpen2;
}
.landing-logo > .logo_mask > img{
    width: 100%;
}
@keyframes landingOpen1 {
    0% {clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);}
    16% {clip-path: polygon(0 0, 0 100%, 10% 100%, 20% 0);}
    /* 30% {clip-path: polygon(0 0, 0 100%, 33% 100%, 5% 0);} */
    25% {clip-path: polygon(0 0, 0 100%, 33% 100%, 24% 0);}
    32% {clip-path: polygon(0 0, 0 100%, 15% 100%, 44% 0);}
    40% {clip-path: polygon(0 0, 0 100%, 42% 100%, 44% 0);}
    60% {clip-path: polygon(0 0, 0 100%, 73% 100%, 72% 0);}
    80% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);}
    100% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);}
    /* 100% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);} */
}
@keyframes landingOpen2 {
    0% {clip-path: polygon(69% 0%, 63% 100%, 100% 100%, 100% 0);}
    100% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);}
}



.center-bot,.center-bot::before,.center-bot::after{
    content: "";
    display: inline-block;
    background-color: white;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
    opacity: 0;
}
.center-bot::before{
    height: 100vh;
    width: 1px;
}
.center-bot::after{
    width: 100vw;
    height: 1px;
}

/* .landing{
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#clip-path-before);
} */
/* #svgPath {
    transform: scale(0.01);
    transition: all 1s linear;
    /* transform: translate(calc(50vw + 0px), calc(50vh - 0px));
} */

.overflow{
    position: relative;
    height: 100vh;
    overflow: hidden;
}
header{
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: -2.5%;
    top: calc(50vw - 50vh);
}
.cover-menu {
    position: absolute !important;
}
#main_content{
    width: 100vw;
    position: absolute;
    top: 50%;
    left: -2.5%;
    transform: translate(0, -50%);
}
.home_main{
    height: 100vw;
    width: 100vw;
    position: absolute;
    top: 50%;
    left: 2.5%;
    transform: translate(0, -50%);
    /* clip-path:polygon(0 0, 0 1%, 1% 1%, 1% 0, 0 0); */
    /* clip-path: url(#clip-path-before); */
    /* clip-path: polygon(56.5% 45.5%, 56.5% 45.5%, 48.5% 54.5%, 48.5% 54.5%); */
    /* clip-path: polygon(55.7% 44.7%, 57.3% 44.7%, 49.5% 55.1%, 47.9% 55.1%); */
    /* clip-path: polygon(53.2% 44.7%, 54.8% 44.7%, 47% 55.1%, 45.4% 55.1%); */
    /* clip-path: polygon(-2.5% 0%, 100% 0%, 100% 100%, -2.5% 100%); */
    clip-path: polygon(50% 50%, 50% 50%,50% 50%, 50% 50%);
    /* animation-delay: 1s;
    animation-duration: 1.2s; */
    animation-delay: 1.5s;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-name: landingOpen3;
    animation-fill-mode: forwards;
}
@keyframes landingOpen3 {
    0% {clip-path: polygon(53.2% 44.7%, 54.8% 44.7%, 47% 55.1%, 45.4% 55.1%);}
    /* 0% {clip-path: polygon(55.7% 45.5%, 55.7% 45.5%, 49.5% 54.3%, 49.5% 54.3%);} */
    /* 20% {clip-path: polygon(53.2% 44.7%, 54.8% 44.7%, 47% 55.1%, 45.4% 55.1%);} */
    30% {clip-path: polygon(53% 44.4%, 55.2% 44.4%, 47% 55.2%, 45.2% 55.2%);}
    /* 100% {clip-path: polygon(83.2% 0%, 92% 0%, 17.3% 100%, 8.6% 100%);} */
    /* 75% {clip-path: polygon(75.2% 0%, 100% 0%, 28.4% 100%, -2.5% 100%);} */
    /* 100% {clip-path: polygon(75.2% 0%, 100% 0%, 28.4% 100%, -2.5% 100%);} */
    /* 100% {clip-path: polygon(-2.5% 0%, 100% 0%, 100% 100%, -2.5% 100%);} */
/*    100% {clip-path: polygon(367.5% -540%, 548.9% -540%, -301.8% 640%, -483.2% 640%);}*/

	100% {clip-path: polygon(735% -1080%, 1098% -1080%, -606% 1280%, -966% 1280%);}

}


.slash{
    /* height: 100vh;
    position: fixed;
    top: calc(50vw - 50vh);
    left: 0;
    transform: translate(-32%, 0); */
    height: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(7.2vw, 0);
}