#loading-screens-wrapper {
    position: fixed;
    z-index: 100
}

#loading-screens-wrapper #text-wrapper {
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    color: #fff;
    font-family: Grotta-Trial-Regular;
    z-index: 102;
    font-size: 2vw;
    text-align: center;
    display: none
}

#loading-screens-wrapper #black-filler {
    background: black;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 101
}

.text-appearing-animation {
    opacity: 1;
    animation: textAppearingAniamtion 1s ease-in-out
}

@keyframes textAppearingAniamtion {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.text-disappearing-animation {
    opacity: 0;
    animation: textDisappearingAniamtion .5s ease-in-out
}

@keyframes textDisappearingAniamtion {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

#loading-screens-wrapper #loading-bar {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 6px;
    background: white;
    z-index: 102;
    animation: animateLoadingBar 8s ease-in-out
}

.animate-loading-bar {
    animation: animateLoadingBar 9s ease-in-out
}

@keyframes animateLoadingBar {
    0% {
        width: 0vw
    }

    to {
        width: 100vw
    }
}

#loading-screens-wrapper #white-filler {
    width: 100vw;
    height: 0vh;
    position: fixed;
    background: white;
    z-index: 105
}

.animate-white-filler {
    bottom: 0;
    animation: animateWhiteFiller 1.5s ease-in-out
}

@keyframes animateWhiteFiller {
    0% {
        height: 0vh
    }

    to {
        height: 100vh
    }
}

.animate-white-filler-reverse {
    top: 0;
    animation: animateWhiteFillerReverse 1.5s ease-in-out
}

@keyframes animateWhiteFillerReverse {
    0% {
        height: 100vh
    }

    to {
        height: 0vh
    }
}

@media screen and (max-width: 500px) {
    #loading-screens-wrapper #text-wrapper {
        width: 100%;
        font-size: 5vw
    }
}

@font-face {
    font-family: Grotta-Trial-Light;
    src: url(/assets/Grotta-Trial-Light-3dd2ce35.otf)
}

@font-face {
    font-family: Grotta-Trial-Medium;
    src: url(/assets/Grotta-Trial-Medium-518aa77e.otf)
}

@font-face {
    font-family: Grotta-Trial-Regular;
    src: url(/assets/Grotta-Trial-Regular-cde30d2b.otf)
}

@font-face {
    font-family: Grotta-Trial-Semibold;
    src: url(/assets/Grotta-Trial-Semibold-e8aa3f02.otf)
}

@font-face {
    font-family: Grotta-Trial-Bold;
    src: url(/assets/Grotta-Trial-Bold-f8e8d2ed.otf)
}

@font-face {
    font-family: Felixti;
    src: url(/assets/Felixti-662ac854.TTF)
}