html {
    overflow-x: hidden;
    height: calc(100vh - 10px);
}

body {
    overflow-x: hidden;
    position: relative;
    background-color: #1c1f22;
    font-variant: small-caps;
    color: #e8e8e8;
}

article {
    padding-right: 10px;
}

h3 {
    text-align: center;
}

@media only screen and (max-width : 1920px) {
    .end-col {
        display: none;
    }
}

@media only screen and (min-width : 1920px) {
    #nav-logo {
        padding-left: calc(((100vw - 1920px) * 0.5) + 15px);
    }

    #nav-lang {
        padding-right: calc(((100vw - 1920px) * 0.5) + 85px);
    }

    .col-bcg {
        left: 14px;
    }
}

/* ************************************************ 
-----------------== Keyframes
************************************************ */
@-webkit-keyframes hex {
    from {
        opacity: 0;
    }

    20% {
        opacity: 0.75;
    }

    40% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.1;
    }

    65% {
        opacity: 1;
    }

    80% {
        opacity: 0.4;
    }

    90% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes hex {
    from {
        opacity: 0;
    }

    20% {
        opacity: 0.75;
    }

    40% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.1;
    }

    65% {
        opacity: 1;
    }

    80% {
        opacity: 0.4;
    }

    90% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes moveBCG_03 {
    from {
        left: 15px;
    }

    30%,
    50% {
        left: -12%;
    }

    to {
        left: -25%;
    }
}

@keyframes moveBCG_03 {
    from {
        left: 15px;
    }

    30%,
    50% {
        left: -12%;
    }

    to {
        left: -25%;
    }
}

@-webkit-keyframes moveBCG_05 {
    from {
        left: 15px;
    }

    40%,
    50% {
        left: 14.5%;
    }

    to {
        left: 33%;
    }
}

@keyframes moveBCG_05 {
    from {
        left: 15px;
    }

    40%,
    50% {
        left: 14.5%;
    }

    to {
        left: 33%;
    }
}

@-webkit-keyframes moveBCG_04 {
    from {
        top: 0px;
        left: 15px;
    }

    to {
        top: -17.5%;
        left: -10%;
    }
}

@keyframes moveBCG_04 {
    from {
        top: 0px;
        left: 15px;
    }

    to {
        top: -17.5%;
        left: -10%;
    }
}

@-webkit-keyframes moveBCG_08 {
    from {
        top: 0px;
        left: 15px;
    }

    to {
        top: -20%;
        left: -10%;
    }
}

@keyframes moveBCG_08 {
    from {
        top: 0px;
        left: 15px;
    }

    to {
        top: -20%;
        left: -10%;
    }
}

@-webkit-keyframes moveBCG_02 {
    from {
        top: 0px;
        right: 0px;
    }

    to {
        top: -13%;
        right: -25%;
    }
}

@keyframes moveBCG_02 {
    from {
        top: 0px;
        right: 0px;
    }

    to {
        top: -13%;
        right: -25%;
    }
}

@-webkit-keyframes moveBCG_06 {
    from {
        top: 0px;
        right: 0px;
    }

    to {
        top: 10%;
        right: -13%;
    }
}

@keyframes moveBCG_06 {
    from {
        top: 0px;
        right: 0px;
    }

    to {
        top: 10%;
        right: -13%;
    }
}

@-webkit-keyframes moveBCG_07 {
    from {
        top: 0px;
    }

    to {
        top: 14%;
    }
}

@keyframes moveBCG_07 {
    from {
        top: 0px;
    }

    to {
        top: 14%;
    }
}

@-webkit-keyframes moveBCG_01 {
    from {
        top: 0px;
        left: 15px;
    }

    to {
        top: 18%;
        left: 10%;
    }
}

@keyframes moveBCG_01 {
    from {
        top: 0px;
        left: 15px;
    }

    to {
        top: 18%;
        left: 10%;
    }
}

/* ************************************************ 
-----------------== BCG
************************************************ */
.bcg-main {
    max-width: calc(100% + 2px);
    max-height: 804px;
    margin-left: -15px;
    position: absolute;
    size: contain;
    background-repeat: no-repeat;
    top: 0;
    left: 15;
    z-index: 20;
}

.bcg-main-clear {
    max-width: calc(100% + 2px);
    max-height: 804px;
    margin-left: -15px;
    position: relative;
    size: contain;
    background-repeat: no-repeat;
    z-index: 8;
}

.bcg-main-01 {
    z-index: 19;
}

.loaded .bcg-main-01 {
    -webkit-animation: moveBCG_01 2s;
    animation: moveBCG_01 2s;
    animation-delay: 3.6s;
    -webkit-transition: transition 2s ease-in-out;
    -moz-transition: transition 2s ease-in-out;
    -o-transition: transition 2s ease-in-out;
    -ms-transition: transition 2s ease-in-out;
    transition-duration: 2s;
    animation-fill-mode: forwards;
}

.bcg-main-02 {
    z-index: 18;
}

.loaded .bcg-main-02 {
    -webkit-animation: moveBCG_02 2s;
    animation: moveBCG_02 2s;
    animation-delay: 3.3s;
    -webkit-transition: transition 2s ease-in-out;
    -moz-transition: transition 2s ease-in-out;
    -o-transition: transition 2s ease-in-out;
    -ms-transition: transition 2s ease-in-out;
    transition-duration: 2s;
    animation-fill-mode: forwards;
}

.bcg-main-03 {
    z-index: 17;
}

.loaded .bcg-main-03 {
    -webkit-animation: moveBCG_03 4s;
    animation: moveBCG_03 4s;
    animation-delay: 1.5s;
    -webkit-transition: transition 4s ease-in-out;
    -moz-transition: transition 4s ease-in-out;
    -o-transition: transition 4s ease-in-out;
    -ms-transition: transition 4s ease-in-out;
    transition-duration: 4s;
    animation-fill-mode: forwards;
}

.bcg-main-04 {
    z-index: 16;
}

.loaded .bcg-main-04 {
    -webkit-animation: moveBCG_04 2.1s;
    animation: moveBCG_04 2.1s;
    animation-delay: 3.5s;
    -webkit-transition: transition 2.1s ease-in-out;
    -moz-transition: transition 2.1s ease-in-out;
    -o-transition: transition 2.1s ease-in-out;
    -ms-transition: transition 2.1s ease-in-out;
    transition-duration: 2.1s;
    animation-fill-mode: forwards;
}

.bcg-main-05 {
    z-index: 15;
}

.loaded .bcg-main-05 {
    -webkit-animation: moveBCG_05 3.7s;
    animation: moveBCG_05 3.7s;
    animation-delay: 1.5s;
    -webkit-transition: transition 3.7s ease-in-out;
    -moz-transition: transition 3.7s ease-in-out;
    -o-transition: transition 3.7s ease-in-out;
    -ms-transition: transition 3.7s ease-in-out;
    transition-duration: 3.7s;
    animation-fill-mode: forwards;
}

.bcg-main-06 {
    z-index: 14;
}

.loaded .bcg-main-06 {
    -webkit-animation: moveBCG_06 2s;
    animation: moveBCG_06 2s;
    animation-delay: 3s;
    -webkit-transition: transition 2s ease-in-out;
    -moz-transition: transition 2s ease-in-out;
    -o-transition: transition 2s ease-in-out;
    -ms-transition: transition 2s ease-in-out;
    transition-duration: 2s;
    animation-fill-mode: forwards;
}

.bcg-main-07 {
    z-index: 13;
}

.loaded .bcg-main-07 {
    -webkit-animation: moveBCG_07 1.5s;
    animation: moveBCG_07 1.5s;
    animation-delay: 3.5s;
    -webkit-transition: transition 1.5s ease-in-out;
    -moz-transition: transition 1.5s ease-in-out;
    -o-transition: transition 1.5s ease-in-out;
    -ms-transition: transition 1.5s ease-in-out;
    transition-duration: 1.5s;
    animation-fill-mode: forwards;
}

.bcg-main-08 {
    z-index: 12;
}

.loaded .bcg-main-08 {
    -webkit-animation: moveBCG_08 2s;
    animation: moveBCG_08 2s;
    animation-delay: 3.2s;
    -webkit-transition: transition 2s ease-in-out;
    -moz-transition: transition 2s ease-in-out;
    -o-transition: transition 2s ease-in-out;
    -ms-transition: transition 2s ease-in-out;
    transition-duration: 2s;
    animation-fill-mode: forwards;
}

.bcg-main-09 {
    z-index: 11;
}

.loaded .bcg-main-09 {
    -webkit-animation: hex 10s;
    animation: hex 10s;
    -webkit-transition: transition 10s linear;
    -moz-transition: transition 10s linear;
    -o-transition: transition 10s linear;
    -ms-transition: transition 10s linear;
    transition-duration: 10s;
    animation-iteration-count: infinite;
}

.bcg-main-10 {
    z-index: 10;
}

.end-side {
    max-width: calc(((100vw - 1920px) * 0.5) + 15px);
    width: 100%;
    size: contain;
    height: 100vh;
    position: fixed;
    z-index: 22;
}

.col-bcg {
}

.end-col {
    max-width: calc(((100vw - 1920px) * 0.5) + 15px);
}

/* ************************************************ 
-----------------== Navbar and footer
************************************************ */
.navbar-logo {
    height: 60px;
    max-height: 100%;
    width: auto;
}

.nav-bar {
    box-shadow: 0px 10px 30px 4px rgba(0, 0, 0, 0.58);
    border-bottom: 2px darkgray;
    background-color: #2f353d;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.47) 52%, rgba(0, 0, 0, 0.47) 52%);
    max-height: 90px;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    z-index: 999;
    position: fixed;
    width: 100vw;
}

.navbar-texts {
    color: #cdcdcd;
    position: relative;
    right: 0;
    font-size: 14px;
}

.navbar-text {
    color: #cdcdcd;
    font-size: 14px;
}

.navbar-flags {
    height: 25px;
    width: 45px;
    border: 2px solid black;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-footer {
    z-index: 999;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    background-color: #1c1f22;
    text-align: center;
    border-top: 2px darkgray;
    box-shadow: 0px -10px 30px 4px rgba(0, 0, 0, 0.58);
    font-size: 14px;
}

/* ************************************************ 
-----------------== Rest
************************************************ */
.motto-mid {
    text-align: center;
    margin-top: 5%;
    color: #407759;
    z-index: 11;
    position: relative;
    font-size: calc(11px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

.hexa-gear-mid {
    text-align: center;
    margin-top: 20%;
    color: #407759;
    z-index: 11;
    position: relative;
    font-size: calc(11px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

.middle-container {
    padding: 15px;
    max-width: 1920px;
    background-color: #2f353d;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.23) 71.6078%, rgba(0, 0, 0, 0.23) 71.6078%);
    position: relative;
    box-shadow: 0px -3px 25px 5px rgba(0, 0, 0, 0.69);
    z-index: 20;
    height: 50vh;
}

.bottom-container {
    padding: 15px;
    max-width: 1920px;
    background-color: #2f353d;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.47) 52.4902%, rgba(0, 0, 0, 0.47) 52.4902%);
    position: relative;
    box-shadow: 0px -3px 25px 5px rgba(0, 0, 0, 0.69);
    z-index: 20;
}