/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;900&display=swap'); */

@font-face { font-family: roboto-regular; 
    src: url('font/Roboto-Regular.ttf'); 
} 

@font-face { font-family: roboto-black; 
    src: url('font/Roboto-Black.ttf'); 
} 

@font-face { font-family: roboto-medium; 
    src: url('font/Roboto-Medium.ttf'); 
} 

@font-face { font-family: roboto-light; 
    src: url('font/Roboto-Light.ttf'); 
} 

@font-face { font-family: roboto-thin; 
    src: url('font/Roboto-Thin.ttf'); 
} 


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'Roboto', sans-serif;
}

ul,
li {
    padding: 0;
    margin: 0;

}

li {
    margin-bottom: 1vh;
}

html,
body {
    background: #E6E6E6;
    /* background-image: url(img/BG.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; */
}

button {
    background: none;
}

.firstPage {
    z-index: 10000;
    position: absolute;
    width: 100%;
    margin: auto;
    top: 3vh;
    background: #7BB6C1;
    height: 90vh;
    animation: flyIn 0.4s linear;

}


.firstPage .third {
    font-size: 3vh;
    line-height: 3.6vh;
    width: 100%;
    padding: 5vh 12vw;
    position: relative;
}

.firstPage .first {
    padding: 3vh 10vw;
    font-size: 4vh;
    line-height: 4.6vh;
    height: auto;

}

.startBtn {
    width: 100%;
    bottom: 0;
    font-size: 4vh;
    color: #fff;
    padding: 1vh;
    background: #008047;
    transition: 0.5s ease-out;
    cursor: pointer;
}

.startBtn:hover {
    background: #183A38;
}


.mainDiv {
    position: relative;
    padding-top: 1px;
    margin: auto;
    bottom: 0;
    width: 97vw;
    height: calc(97vw / 1.777);
    max-width: 97vw;
    max-height: 97vh;
}

header {
    position: absolute;
    width: 100%;
    height: 6.5vw;
    background: #EFEFED;
    color: #3D3935;
    font-size: 1.4vw;
    line-height: 1.4vw;
    z-index: 9;
    -webkit-box-shadow: 0px 1px 15px 2px #333232; 
box-shadow: 0px 1px 15px 2px #333232;
}

#firstHalf {
    display: inline-block;
    width: 35%;
    background: linear-gradient(44deg, rgba(80,63,129,1) 0%, rgba(151,63,158,1) 100%);
    height: 6.5vw;
    float: left;
    padding: 1.4% 1.7% 1.4% 3.7%;
    color: #FFF;
    font-size: 1.9vw;
    line-height: 1.8vw;
    font-weight: 900;
    letter-spacing: 1.7px;
}

#SecondHalf {
    display: inline-block;
    width: 54%;
    height: 6.5vw;
    padding: 1.1% 3.5%;
    font-weight: 100;

}

#linksTag {
    display: block;
    width: 7.2%;
    /* background: linear-gradient(44deg, rgba(80,63,129,1) 0%, rgba(151,63,158,1) 100%); */
    background: linear-gradient(153deg, rgba(80,63,129,1) 0%, rgba(151,63,158,1) 100%);
    height: 9vw;
    float: right;
    padding: 3.4% 1%;
    color: #FFF;
    font-size: 1.7vw;
    line-height: 2.6vw;
    margin-right: 1.2%;
    margin-top: -1%;
    -webkit-box-shadow: -6px 5px 1px 1px rgba(0,0,0,0.2);
    box-shadow: -6px 5px 1px 1px rgb(0 0 0 / 20%);
    text-align: center;
    font-weight: 100;
    cursor: pointer;
}

#linkIcon {
    background-image: url(img/2x/link.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 2.4vw;
    width: 4.8vw;
    margin-left: auto;
    margin-right: auto;
}

.contDiv {
    position: relative;
    padding: 1px;
    margin: auto;
    bottom: 0;
    width: calc(97vh * 2);
    height: 97vh;
    background-image: url(img/BG2.png);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    font-weight: 100;
}


/************ steps btns **************/

a {
    text-decoration: none;
}

.steps {
    position: absolute;
    width: 7.7%;
    height: 13%;
    background: #503F81;
    font-size: 2vh;
    color: #fff;
    text-align: left;
    line-height: 2vh;
    cursor: pointer;
    transition: all 0.5s ease-out;
    padding: 0.4%;
}

/* .steps:hover {
    background: #2AD2C9;
    color: #3D3935;
} */

.steps:active {
    border: none;
}

.steps:nth-child(1) {
    left: 19.7%;
    top: 25%;
    background: #2AD2C9;
    color: #3D3935;
}

.steps:nth-child(1) #cube_pic1 {
    background-image: url(img/2x/pic1.svg);
    background-size: 65%;
    background-position: center;
    background-repeat: no-repeat;
    height: 137%;
    margin-top: -60%;
}

.steps:nth-child(2) {
    left: 45.5%;
    top: 25%;
    background: #2AD2C9;
    color: #3D3935;
}

.steps:nth-child(2) #cube_pic2 {
    background-image: url(img/2x/pic2.svg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 137%;
    margin-top: -60%;
}

.steps:nth-child(3) {
    left: 71.3%;
    top: 25%;
}

.steps:nth-child(3) #cube_pic3 {
    background-image: url(img/2x/pic3.svg);
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
    height: 157%;
    margin-top: -77%;
}

.steps:nth-child(4) {
    left: 74.1%;
    top: 46.1%;
}

.steps:nth-child(4) #cube_pic4 {
    background-image: url(img/2x/pic4.svg);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    height: 137%;
    margin-top: -60%;
}

.steps:nth-child(5) {
    left: 48.4%;
    top: 46.1%;
}

.steps:nth-child(5) #cube_pic5 {
    background-image: url(img/2x/pic5.svg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 137%;
    margin-top: -60%;
}

.steps:nth-child(6) {
    left: 22.6%;
    top: 46.1%;
}

.steps:nth-child(6) #cube_pic6 {
    background-image: url(img/2x/pic6.svg);
    background-size: 85%;
    background-position: top;
    background-repeat: no-repeat;
    height: 157%;
    margin-top: -62%;
}

.steps:nth-child(7) {
    left: 32.4%;
    top: 65.9%;
}

.steps:nth-child(7) #cube_pic7 {
    background-image: url(img/2x/pic7.svg);
    background-size: 85%;
    background-position: top;
    background-repeat: no-repeat;
    height: 138%;
    margin-top: -46%;
}

.steps:nth-child(8) {
    left: 42.2%;
    top: 87%;
}

.steps:nth-child(8) #cube_pic8 {
    background-image: url(img/2x/pic8.svg);
    background-size: 80%;
    background-position: top;
    background-repeat: no-repeat;
    height: 120%;
    margin-top: -60%;
}

.steps:nth-child(9) {
    left: 70.1%;
    top: 75.3%;
    width: 7.85%;
}

.steps:nth-child(9) #cube_pic9 {
    background-image: url(img/2x/pic9.svg);
    background-size: 65%;
    background-position: center;
    background-repeat: no-repeat;
    height: 125%;
    margin-top: -50%;
}




/************ cubes explanations **************/

.cube_exp {
    position: absolute;
    left: 113%;
    top: 10%;
    color: #503F81;
    font-size: 2.1vh;
    width: 110%;
    pointer-events: none;
}

#cube7_exp {
    left: 110%;
}


/************ links popup **************/

.popUps {
    display: none;
    opacity: 0;
}

.closeBtn {
    float: left;
    background: #09819C;
    cursor: pointer;
    font-size: 2vw;
    width: 2.5vw;
    border-radius: 70px;
    margin-left: 0.5vw;
    margin-top: 0.4vw;
}

.closeBtn:hover {
    background: #055D6B;

}

#linksTag2 {
    display: block;
    width: 45%;
    background: linear-gradient(153deg, rgba(80,63,129,1) 0%, rgba(151,63,158,1) 100%);
    height: 9vw;
    float: right;
    padding: 3.4vw 1%;
    color: #FFF;
    font-size: 1.7vw;
    line-height: 2.6vw;
    margin-right: 7.5%;
    margin-top: -1vw;
    -webkit-box-shadow: -6px 5px 1px 1px rgba(0,0,0,0.2);
    box-shadow: -6px 5px 1px 1px rgb(0 0 0 / 20%);
    text-align: center;
    font-weight: 100;
    cursor: pointer;
}

.in {
    animation: flyIn 0.4s ease-in-out;
    position: absolute;
    right: 0;
    width: 16vw;
    /* height: 86%; */
    height: 40vw;
    background: #efefed;
    display: block;
    z-index: 100;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
    background-image: url(img/LinksBG.png);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    top: 0;
}

.out {
    animation: flyOut 0.4s ease-in-out;
    position: absolute;
    right: 0;
    width: 16vw;
    /* height: 86%; */
    height: 40vw;
    background: #efefed;
    display: block;
    z-index: -100;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
    background-image: url(img/LinksBG.png);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    top: 0;
    opacity: 0;
}

.first {
    padding-left: 1vw;
    margin-top: 11vw;
    display: block;
    font-size: 2.8vh;
    line-height: 4.5vh;
}

.first a {
    color: #503F81;
    font-weight: 300;
}

.first a:hover {
    color: #3D3935;
    font-weight: 500;
}

@keyframes flyIn {
    0% {
        /* top: -100vh; */
        opacity: 0;
    }
    50% {
        /* top: 1vh; */
        opacity: 0.25;
    }
    75% {
        /* top: -1vh; */
        opacity: 0.5;
    }
    100% {
        /* top: 0vh; */
        opacity: 1;
    }
}

@keyframes flyOut {
    0% {
        opacity: 1;
        /* height: 160px; */
        z-index: 100;
    }

    25% {
        opacity: 0.75;
        /* height: 160px; */
        z-index: 100;
    }

    50% {
        opacity: 0.5;
        /* height: 160px; */
        z-index: 100;
    }

    75% {
        opacity: 0.25;
        /* height: 160px; */
        z-index: 100;
    }

    99.999999999% {
        opacity: 0;
        /* height: 160px; */
        z-index: 100;
    }

    100% {
        opacity: 0;
        /* height: 0; */
        z-index: -100;
    }

}