:root{
    --main-blue: #144390;
    --light-blue: #4369a6;
    --dark-blue: #002653;
    --grey-1-6: #909598;
    --grey-2-6: #818689;
    --grey-3-6: #72777a;
    --grey-4-6: #676b6e;
    --grey-5-6: #55595c;
    --grey-6-6: #404040;
    --red: #ea5045;
}


* {
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
}

body {
    font-family: sans-serif;
    color: white;
    overflow: hidden;
}

.main-menu {
    position: fixed;
    width: 100%;
    background-color: #144390;
    height: 5vh;
    z-index: 100;
    border-bottom: 2px #002653 solid;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.main-menu img{
    margin-left: 5vw;
}

.main-menu .menu-buttons{
    min-width: 20%;
    display: flex;
    justify-content: space-between;
}

.menu-buttons .active{
    color: #144390;
    background-color: white;
}

.main-menu button{
    color: white;
    background-color: transparent;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 50px;
    border: 0px;
    cursor: pointer;
    margin: 10px 20px;
}

.main-menu button:hover{
        background-color: #4369a6;
        transition-duration: 500ms;
}

.scroll-dots {
    color: black;
    display: flex;
    position: fixed;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: center;
    z-index: 100;
    font-size: 20px;
    background-color: #00000088;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.scroll-dots .smaller {
    line-height: 14px;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#first.container{
    bottom: 0;
}

.container {
    position: absolute;
    width: 100vw;
    height: 95vh;
    bottom: -100vh;
}

.slide-in-from-top {
    animation: slide-in-from-top;
    animation-duration: 700ms;
    top: 5vh;
}

.slide-in-from-bottom {
    animation: slide-in-from-bottom;
    animation-duration: 700ms;
    bottom: 0;
}

.slide-out-from-top {
    animation: slide-out-from-top;
    animation-duration: 700ms;
}

.slide-out-from-bottom {
    animation: slide-out-from-bottom;
    animation-duration: 700ms;
}


.black-to-white {
    animation: black-to-white;
    animation-duration: 700ms;
    color: white;
}

.white-to-black {
    animation: white-to-black;
    animation-duration: 700ms;
    color: black;
}

.blue-to-white {
    animation: blue-to-white;
    animation-duration: 700ms;
}

.white-to-blue {
    animation: white-to-blue;
    animation-duration: 700ms;
}

@keyframes slide-in-from-bottom {
    0% {
        bottom: -95vh;
    }

    100% {
        bottom: 0;
    }
}

@keyframes slide-in-from-top {
    0% {
        top: -90vh;
    }

    100% {
        top: 5vh;
    }
}

@keyframes slide-out-from-bottom {
    0% {
        bottom: 0;
    }

    100% {
        bottom: -95vh;
    }
}

@keyframes slide-out-from-top {
    0% {
        top: 5vh;
    }

    100% {
        top: -90vh;
    }
}

@keyframes black-to-white {
    0% {
        color: black;
    }

    100% {
        color: white;
    }
}

@keyframes white-to-black {
    0% {
        color: white;
    }

    100% {
        color: black;
    }
}

@keyframes blue-to-white {
    0% {
        background-color: transparent;
        color: white;
    }

    100% {
        background-color: white;
        color: #144390;
    }
}

@keyframes white-to-blue {
    0% {
        background-color: white;
        color: #144390;
    }

    100% {
        background-color: transparent;
        color: white;
    }
}


@media only screen and (max-width: 1000px){

    .main-menu .menu-buttons{
        display: none;
    }

    .main-menu button{
        margin: 5px;
    }

    .scroll-dots{
        display: none;
    }

    body{
        overflow: auto;
    }
}