style.css

body {
    font-family: 'Roboto', sans-serif;
    margin:0;
    padding: 0;
    background-color: #161616;
    color: white;
    scroll-behavior:smooth;
    position: relative;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
nav{
    background: #161616;
    width: 100%;
    height: 9vh;
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition:all 0.5s ease;
    
}
nav h1{
    margin: 0 20px;
    font-size: 2em;
    font-family: 'Pacifico','cursive';
    font-weight: 100;

}
nav ul{
    display: flex;
    list-style: none;
    justify-content: space-around;
    width: 30%;
    margin: 20px;

}
nav ul li{
    padding:5px 10px;
    transition: all 0.3s ease;
    color: rgb(150, 150, 150);
    opacity: 0;
}
nav ul li a{
    color: inherit;
    text-decoration: none;
    font-family: inherit;
}
nav ul li:hover{
    color: white;
}
.nav-active{
    color: white;
    text-shadow: 0 0 5px white;
}
nav .login-container{
    padding-bottom:5px;
}
nav .login{
    border: 1px solid white;
    background-color: white;
    color: black;
    border-radius: 5px;
    position: relative;
    min-width: 80px;
    text-align: center;
    padding: 3px 2px;
}
nav .login:hover{
    box-shadow: 0 0 15px white;
    color: black;
}
.login ul{
    position: absolute;
    top:calc( 100% - 3px );
    left:0px;
    /* transform: translateX(-50%); */
    display: flex;
    flex-direction: column;
    /* min-width: 90px; */
    width: 100%;
    text-align: center;
    align-items: center;
    margin:0;
    font-size:15px ;
    pointer-events: none;
} 
.login ul li{
    text-align: center;
    width: 100%;
    padding: 10px 0;
    background-color: white;
    color:black;
    transform:translateX(20px);
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
}
.login ul li:hover{
    background-color: rgb(228, 225, 225);
    color: black;
}
.login ul li.login-drop{
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    transform: translateX(-20px);
    
}
.login a + ul{
    pointer-events: none;
}

.login-container:hover>.login a + ul>li, .login-container ul:hover>li{
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
}

.hamburger{
    height: 2.2vh;
    /* margin:2.4vh 10px; */
    position: absolute;
    top:2.4vh;
    right:10px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.hamburger .line1{
    width: 23px;
    height: 2px;
    background-color: white;
    border-radius: 30%;
    transition: all 0.5s ease;
}
.hamburger .line2{
    width: 15px;
    height: 2px;
    background-color: white;
    border-radius: 30%;
    transition: all 0.5s ease;
}
.hamburger .line3{
    width: 10px;
    height: 2px;
    background-color: white;
    border-radius: 30%;
    transition: all 0.5s ease;
}
.modal{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    z-index: 99 ;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.modal-active{
    opacity: 1;
    pointer-events: all;
}
section{
    height: 100vh;
    position: relative;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
    background: white;
}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, a.active span {
    box-shadow: 0 0 10px white;
}
.cranes {
    width: 52em;
    height: 50em;
    font-size: 7px;
    color: white;
    position:absolute;
    top:50%;
    right:10%;
    transform: translate(15px,-50%);
    opacity: 0;
    /* animation:craneMove 0.5s ease infinite; */
    transform: translate(15px,-50%);
    opacity: 0;
    transition: all 0.7s ease 0.8s;
    animation: craneMove 1s ease infinite;
    
}

.cranes span {
    border-left: calc(var(--left) * 1em) solid transparent;
    border-right: calc(var(--right) * 1em) solid transparent;
    border-bottom: calc(var(--bottom) * 1em) solid;
    position: absolute;
    transform: rotate(calc(var(--rotation) * 1deg));
    left: calc(var(--x) * 1em);
    top: calc(var(--y) * 1em);
    filter: opacity(0.6);
    
}
.crane-start{
    opacity: 1;
    transform: translate(0,-50%);
    animation: craneMove 0.7s ease forwards 0.8;
}
.head {
    --left: 13;
    --right: 6;
    --bottom: 2;    
    --x: 0;
    --y: 21;
    --rotation: -5;
}

.neck {
    --left: 6;
    --right: 6;
    --bottom: 12;
    --x: 14;
    --y: 19;
    --rotation: 75;
}

.side {
    --left: 1.5;
    --right: 11.5;
    --bottom: 20;
    --x: 18.8;
    --y: 15.1;
    --rotation: 20;
}

.wing {
    --left: 18.7;
    --right: 30;
    --bottom: 8;
    --x: 6.7;
    --y: 9.2;
    --rotation: -41.9;
    animation:wingMove 1s ease infinite;
    transition: all 0.5s ease;
}
.crane-start .wing{
    animation:wingMove 0.7s ease forwards 0.8s;
}
.tail {
    --left: 18.6;
    --right: 7.7;
    --bottom: 3.9;
    --x: 19.6;
    --y: 38.1;
    --rotation: -126.5;
}

.belly {
    --left: 6.2;
    --right: 1.8;
    --bottom: 11.5;
    --x: 17.5;
    --y: 27.8;
    --rotation: -99;
}

@keyframes wingMove{
    0%{
        transform: rotate(-41.9deg)
                     translate(0px)
                     translateY(0px);
    }
    50%{
        transform: rotate(-32deg)
                 translateX(10px)
                 translateY(30px);
    }
    100%{
        transform: rotate(-41.9deg)
                 translate(0px)
                 translateY(0px);;
    }
}
@keyframes craneMove{
    0%{
        transform:  translateY(calc(-50%));
    }
    50%{
        transform: translateY(calc(-50% - 30px));;
    }
    100%{
        transform: translateY(calc(-50%));
    }
}

#home h1{
    position: relative;
    margin-left:10% ;
    padding-top:10% ;
}

#home h1 span{
    display: block;
    line-height: 1.5;
    font-family: 'Quicksand','sans-serif';
    font-weight: 100;
    font-size: 0.9em;
    opacity: 0;
    transform: translateY(-15px);
}
#home h1 .head-h1{
    font-size: 3.5em;
    opacity: 0;
    transform: translateY(-15px);
}

#home button{
    margin:30px 0;
    padding:10px;
    width: 220px;
    border:1px solid white;
    background-color: #161616;
    font-size: 30px;
    color: white;
    font-family: 'Quicksand','sans-serif';
    font-weight: 100;
    font-size: 1.7em;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateX(-15px);
}
@keyframes start{
    from{

    }
    to{
        opacity: 1;
        transform: translate(0,0);
    }
}
@keyframes startLink{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
#home button:hover{
    box-shadow: 0 0 20px white;
    background-color:white ;
    color: #161616;
    outline: none;
}


.paper-container{
    width:500px;
    height: 400px;
    margin:12vh auto;
    position: relative;
}
.paper{
    width: 100%;
    height: 100%;
    position: relative;
}
.paper-upper{
    width:100%;
    height: 50%;
    position: absolute;
    top:0;
    left:0;
    transition: all 1s ease;
    transform-style: preserve-3d;
    transform-origin:bottom ;
    z-index: 20;
    box-shadow: 0 0 7px white;
    perspective: 800px;
    backface-visibility:visible ;
    -moz-backface-visibility:visible ;
    -webkit-backface-visibility:visible ;
}
.paper-upper-front{
    width:100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    transition: all 0.7s ease;
    transform-style: preserve-3d;
    border-bottom: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: box-shadow 0.3s ease-in-out;
}
.paper-upper-back{
    width:100%;
    height: 100%;
    position: absolute;
    transform: rotateY(180deg);
    background-color:rgba(255, 255, 255, 0.9);
    transition: transform 0.7s ease;
    transform-style: preserve-3d;
    border-bottom: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: box-shadow 0.3s ease-in-out;

}
.paper-lower{
    box-shadow: 0 0 7px white;
    border-top: none;
    width:100%;
    height: 50%;
    position: absolute;
    top:50%;
    left:0;
    background-color: rgba(255, 255, 255, 0.9);
    transition: all 0.7s ease;
    transition: box-shadow 0.3s ease-in-out;
}
.effect{
    transform: rotateX(180deg);
    background-color:rgba(255, 255, 255, 0.9);
}

.card-text{
    padding:17.5% 0;
    text-align: center;
    color: black;
    font-family: 'Quicksand','sans-serif';
    font-size: 200%;
}
.semi{
    transition: all 0.7s ease;
    transform-origin: right;
}
.semi div{
    position: absolute;
    bottom: 0;
    right: 0;
    border-top-left-radius: 100%;
}
.semi .semi1{
    /* width:250px;
    height: 250px; */
    background-color: rgba(255, 255, 255, 0.41);
    animation: semi1A 0.5s ease-in forwards 1s;
}
.semi .semi2{
    /* width:200px;
    height: 200px; */
    background-color: rgba(255, 255, 255, 0.2);
    animation: semi2A 0.5s ease-in forwards 1s;
}
.semi .semi3{
    /* width:150px;
    height: 150px; */
    background-color: rgba(255, 255, 255, 0.2);
    animation: semi3A 0.5s ease-in forwards 1s;
}
@keyframes semi1A{
        0%{
            width:0px;
            height: 0px;
        }
        50%{
            width:280px;
            height: 280px;
        }
        75%{
            width:230px;
            height: 230px;
        }
        100%{
            width:250px;
            height: 250px;
        }
}
@keyframes semi2A{
        0%{
            width:0px;
            height: 0px;
        }
        50%{
            width:230px;
            height: 230px;
        }
        75%{
            width:170px;
            height: 170px;
        }
        100%{
            width:200px;
            height: 200px;
        }
}
@keyframes semi3A{
        0%{
            width:0px;
            height: 0px;
        }
        50%{
            width:180px;
            height: 180px;
        }
        75%{
            width:120px;
            height: 120px;
        }
        100%{
            width:150px;
            height: 150px;
        }
}
.arrow .line{
    position: absolute;
    top: 81%;
    left:50%;
    border: none;
    width: 1px;
    height: 0%;
    background-color: white;
    transition: all 0.5s ease 1s;
}

.arrow .head .right,
.arrow .head .left{
    width:0px;
    background-color: white;
    position: absolute;
    bottom:calc(2% + 0.5px);
    height: 1px;
}
.arrow .head .right{
    left: calc(50% - 1.5px);
    transform: rotateZ(-45deg);
    transition: all 0.3s ease 1.8s;
}
.arrow .head .left{
    left: calc(50% - 8.5px);
    transform: rotateZ(45deg);
    transition: all 0.3s ease 1.5s;
}
.ar-active .line{
    height: 17%;
}
.ar-active .head .right,
.ar-active .head .left{
    width: 10px;
}
.paper-lower input{
    margin:auto;
    display: block;
    width:70%;
    background: none;
    text-align: center;
    font-family: 'quickSand','sans-serif';
    border: none;
    border-bottom: 1px solid rgb(51, 50, 50) ;
    margin-top: 11%;
    height: 30px;
    font-size: 20px;
    padding: 5px;
    outline: none;
    color:black;
    transition: all 0.3s;
}
.paper-lower input:focus{
    border-bottom: 1px solid black;
}
.paper-lower button{
    display: block;
    margin: 30px auto;
    padding: 10px 10px;
    width: 250px;
    border: 1px solid black;
    background-color: black;
    color: white;
    font-family: 'quickSand','sans-serif';
    font-size: 20px;
    transition: all 0.3s ease-in;

}
.paper-lower button:hover{
    transform: scale(1.05);
}

#knowMore .info{
    width:60%;
    margin:20px 5% 20px 35%;
    position: relative;
    height: 200px;
}
svg{
    position: absolute;
    height: 65vh;
    width: 30%;
}
.info .img{
    display: inline-block;
    width:200px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 5px white;
    position: absolute;
    top:0;
}
.info .cont{
    width:80%;
    display: inline-block;
    font-size: 25px;
    font-family: 'quickSand','sans-serif';
    font-weight: 200;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    top:50%;
    transform: translate(0,-50%);
    
}
.left .cont{
    left:0%;
    text-align: left;
    transform: translateX(-10px);
    opacity: 0;
    transition: all 0.5s ease 1s;
}

.right .cont{
    right:0px;
    text-align: right;
    transform: translateX(10px);
    transition: all 0.5s ease 1s;
    opacity: 0;
}
.left .img{
    right:0%;
}

.right .img{
    left:0%;
}

.bar-graph,.manage{
    height: 100%;
    width: 100%;
    position: relative;
}
.bar-graph .horizon{
    position: absolute;
    bottom: 20%;
    width: 0%;
    height: 1px;
    background-color: rgb(51, 50, 50);
    margin: 0 5%;
    transition: all 0.4s ease 1s;
}
.bar-graph .bar1{
    position: absolute;
    bottom: 20%;
    left: 10%;
    width: 20%;
    height: 0%;
    background-color: rgb(51, 50, 50);
    transition: all 0.7s ease 1s;
}
.bar-graph .bar2{
    position: absolute;
    bottom: 20%;
    left: 39%;
    width: 20%;
    height: 0%;
    background-color: rgb(51, 50, 50);
    transition: all 0.7s ease 1.2s;
}
.bar-graph .bar3{
    position: absolute;
    bottom: 20%;
    left: 69%;
    width: 20%;
    height: 0%;
    background-color: rgb(51, 50, 50);
    transition: all 0.6s ease 1.4s;
}
.bg-active .horizon{
    width:90%;
}
.bg-active  .bar1{
    height: 30%;
}
.bg-active  .bar2{
    height: 50%;
}
.bg-active  .bar3{
    height: 70%;
}
.manage .block{
    position: absolute;
    width:40%;
    height: 10%;
    background-color: rgb(51, 50, 50);
    /* transition: all 0.5s ease 1s; */
}
.block:nth-child(odd){
    left:10%;
    /* transform: translateX(-50%); */
}
.block:nth-child(even){
    right: 10%;
    /* transform: translateX(50%); */
}
.ma-active .block:nth-child(odd){
    left:50%;
    transform: translateX(-50%);
}
.ma-active .block:nth-child(even){
    right: 50%;
    transform: translateX(50%);
}
.block:nth-child(1){
    top:15%;
    transition: all 0.5s ease 1s;
}
.block:nth-child(2){
    top:35%;
    transition: all 0.5s ease 1.2s;
}
.block:nth-child(3){
    top:55%;
    transition: all 0.5s ease 1.3s;
}
.block:nth-child(4){
    top:75%;
    transition: all 0.5s ease 1.5s;
}
.info .cont-active{
    opacity: 1;
    transform: translateX(0);
}
.ham-active.hamburger .line1{
    transform:translate(0px,1vh) rotateZ(45deg);
    width: 23px;
    background-color: black;
}
.ham-active.hamburger .line2{
    opacity: 0;
}
.ham-active.hamburger .line3{
    width: 23px;
    transform:translate(0px,-1vh) rotateZ(-45deg) ;
    background-color: black;
}
#Vector_2{
    transition: 1s;
    transform-box: fill-box;
    transform-origin: bottom right;
}
#Vector_21,#Vector_22{
    opacity: 0;
}
@keyframes slideLink{
    from{
        opacity: 0;
        transform: translate(0,-5px);
    }
    to{
        opacity: 1;
        transform: translate(0);
    }
}
@keyframes V2{
    0%{
        transform: rotateZ(0deg);
    }
    50%{
        transform: rotateZ(-30deg);
    }
    100%{
        transform: rotateZ(0deg);
    }
}
@media screen and (max-width:1200px){
    .info .cont{
        font-size:20px;
    }
}
@media screen and (max-width:1100px){
    #home h1{
        margin-left:2% ;
    }
    .cranes{
        right:2%;
    }
}
@media screen and (max-width:1000px){
    .info .cont{
        font-size:23px;
    }
    svg{
        display: none;
    }
    #knowMore .info{
        width:80%;
        margin:20px auto;
    }
} 
@media screen and (max-width:900px){
    #home h1 span{
        font-size: 1em;
    }
}
@media screen and (max-width:800px){
    .info .cont{
        font-size:18px;
    }
}
@media screen and (max-width:700px){
    nav{
        overflow: hidden;
    }
    nav h1{
        position: absolute;
        top: 0;
        left:20px;
    }
    .cranes{
        display: none;
    }
    #home h1{
        margin-left:10% ;
    }
    .paper-container{
        width: 330px;
        height: 330px;
    }
    #fp-nav ul{
        display: none;
    }
    .info .img, .info .cont{
        position: relative;
        display: inline-block;
        top:0;
        text-align: center;
        /* transform: translateY(0); */
        font-size: 15px;
        width: 100%;
    }
    .info .img{
        height: 150px;
        width: 150px;
        margin: 5px calc((100% - 150px) / 2);
    }
    .arrow .line{
        top:84%;
        height: 0;
    }
    .ar-active .line{
        height: 14%;
    }
    .hamburger{
        display: flex;
    }
    nav ul{
        position: absolute;
        right: 0;
        top: 9vh;
        margin: 0;
        flex-direction: column;
        width:100%;
        height: 40vh;
        /* background-color:white; */
        color: black;
        align-items: center;
        transition: all 0.5s ease;
    }
    
    #knowMore .info{
        height: auto;
    }
    nav ul li{
        opacity: 0;
        transform: translate(5px);
        padding:5px 10px;
        transition: all 0.3s ease;
        color: black;
        border-radius: 5px;
    }
    nav ul li:hover{
        color: black;
    }
    .nav-active{
        color: black;
        border:1px solid black;
        text-shadow: none;
    }
    .nv-active{
        height: 49vh;
        color: black;
        background-color: white;
        border-bottom-right-radius: 10%;
        border-bottom-left-radius: 10%;
    }
    .nv-active-login{
        height: 55vh;
        border-bottom-right-radius: 0%;
        border-bottom-left-radius: 0%;
    }
    nav .login{
        border: 1px solid white;
        background-color: black;
        color: white !important;
    }
    nav .login:hover{
        box-shadow: 0 0 10px white;
        color: black;
    }
    nav .login ul{
        height: 6vh;
        position: absolute;
        margin-top:4.1vh ;
        left:-webkit-calc(-50vw + 50%);
        left:-moz-calc(-50vw + 50%);
        left:calc(-50vw + 50%);
        width: 100vw;
        background-color: rgb(30, 30, 30);
        flex-direction: row;
    }
    nav .login ul li{
        background-color: transparent;
        color: white;
    }
    .login a + ul{
        pointer-events: all;
    }
    .login ul{
        pointer-events: all;
    }
}