@font-face {
    font-family: 'VTF Redzone Classic-Oblique';
    src: local('VTF Redzone Classic Oblique'), local('VTF-Redzone-Classic-Oblique'),
        url('VTFRedzone-ClassicOblique.woff2') format('woff2'),
        url('VTFRedzone-ClassicOblique.woff') format('woff'),
        url('VTFRedzone-ClassicOblique.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    size-adjust: 100%;
}

@font-face {
    font-family: 'VTF Redzone Classic';
    src: local('VTF Redzone Classic Classic'), local('VTF-Redzone-Classic-Classic'),
        url('VTFRedzone-Classic.woff2') format('woff2'),
        url('VTFRedzone-Classic.woff') format('woff'),
        url('VTFRedzone-Classic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.center-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    /****** center box
	width: 300px;
	height: 300px;
	border: solid 1px #aaa;
	******/
}

body {
    background-color: #202628;
}

#preloader {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #262D66;
    /* background-color: #202628; */
    z-index: 400;
    position: fixed;
}

.box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 700px;
    height: 300px;
}

.box h2,
.box h3 {
    font-size: 5rem;
    color: white;
    letter-spacing: 0.1em;
    font-family: 'VTF Redzone Classic-Oblique', sans-serif;
    /* text-shadow: 0 0 10px #9bc6ba,
        0 0 20px #9bc6ba,
        0 0 40px #9bc6ba; */
    /* 0 0 80px #9bc6ba,
        0 0 100px #9bc6ba; */
}

.text-loader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}


.lightbar {
    position: absolute;
    top: 40px;
    left: 0;
    width: 5px;
    height: 70%;
    border-radius: 20px;
    z-index: 6;
    background: white;
    text-shadow: 0 0 10px #9bc6ba,
        0 0 20px #9bc6ba,
        0 0 40px #9bc6ba,
        0 0 80px #9bc6ba,
        0 0 100px #9bc6ba;
    animation: animatelightbar 5s linear infinite;
}

@keyframes animatelightbar {

    0%,
    5% {
        transform: scaleY(0) translateX(0);
    }

    10% {
        transform: scaleY(1) translateX(0);
    }

    90% {
        transform: scaleY(1) translateX(calc(700px - 5px));
    }

    95%,
    100% {
        transform: scaleY(0) translateX(calc(700px - 5px));
    }
}

.toplayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #262D66;
    animation: animatetopLayer 10s linear infinite;
    z-index: 3;
}

@keyframes animatetopLayer {

    0%,
    2.5% {
        transform: translateX(0);
    }

    5% {
        transform: translateX(0);
    }

    45% {
        transform: translateX(100%);
    }

    47.5%,
    50% {
        transform: translateX(100%);
    }

    50.001%,
    52.5% {
        transform: translateX(-100%);
    }

    55% {
        transform: translateX(-100%);
    }

    95% {
        transform: translateX(0%);
    }

    97.5%,
    100% {
        transform: translateX(0%);
    }
}

.box h3 {
    font-size: 3rem;
    color: white;
    font-family: 'VTF Redzone Classic-Oblique', sans-serif;
}

.loader-square-42 {
    width: 50px;
    height: 50px;
    background-color: #F15A22;
    animation: anm-SL-42-move 2s linear infinite both;
    margin-bottom: 4rem;
}

@keyframes anm-SL-42-move {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    2.15% {
        transform: matrix3d(0.589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4.3% {
        transform: matrix3d(0.297, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    6.46% {
        transform: matrix3d(0.158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    8.61% {
        transform: matrix3d(0.125, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    14.16% {
        transform: matrix3d(0.183, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    19.72% {
        transform: matrix3d(0.205, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    24.9% {
        transform: matrix3d(0.201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    25% {
        transform: matrix3d(0.201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    27.15% {
        transform: matrix3d(0.2, 0, 0, 0, 0, 0.589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.3% {
        transform: matrix3d(0.2, 0, 0, 0, 0, 0.297, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    30.83% {
        transform: matrix3d(0.2, 0, 0, 0, 0, 0.185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    31.46% {
        transform: matrix3d(0.2, 0, 0, 0, 0, 0.158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    33.61% {
        transform: matrix3d(0.2, 0, 0, 0, 0, 0.125, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    39.16% {
        transform: matrix3d(0.2, 0, 0, 0, 0, 0.183, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    41.99% {
        transform: matrix3d(0.2, 0, 0, 0, 0, 0.201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    44.72% {
        transform: matrix3d(0.2, 0, 0, 0, 0, 0.205, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    49.9% {
        transform: matrix3d(0.2, 0, 0, 0, 0, 0.201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    50% {
        transform: matrix3d(0.2, 0, 0, 0, 0, 0.201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    52.15% {
        transform: matrix3d(0.611, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    54.3% {
        transform: matrix3d(0.903, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    55.83% {
        transform: matrix3d(1.015, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    56.46% {
        transform: matrix3d(1.042, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    58.61% {
        transform: matrix3d(1.075, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    64.16% {
        transform: matrix3d(1.017, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    66.99% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    69.72% {
        transform: matrix3d(0.995, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    74.9% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    75% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    76.9% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.629, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    77.85% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.79, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    78.78% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    79.73% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    80.68% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.03, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    80.83% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    82.56% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    87.56% {
        transform: matrix3d(1, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    91.99% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    92.57% {
        transform: matrix3d(1, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}