@keyframes loadscreenAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes loadscreenPart1Animation {
    0% {
        stroke: #AAAAAA;
    }

    20% {
        stroke: #AAAAAA;
    }

    50% {
        stroke: #ffffff;
    }

    80% {
        stroke: #AAAAAA;
    }

    100% {
        stroke: #AAAAAA;
    }
}

@keyframes loadscreenPart2Animation {
    0% {
        stroke: #AAAAAA;
    }

    20% {
        stroke: #AAAAAA;
    }

    50% {
        stroke: #ffffff;
    }

    80% {
        stroke: #AAAAAA;
    }

    100% {
        stroke: #AAAAAA;
    }
}



#loadscreen {
    text-align: center;
    padding-left: 100px;
    width: calc(100% - 100px);

}

.loadscreen-image-container {
    margin-left: 5%;
    margin-right: 5%;
    height: 100vh;
    width: 90%;
    padding-top: 50px;
    min-width: 460px;
    overflow-y: hidden;
}

.loadscreen-image {
    text-align: center;
    max-width: 90%;
    height: 80vh;


}

#loadscreen-middle-part1 {
    animation-duration: 4000ms; /* the duration of the animation */
    animation-timing-function: linear; /* how the animation will behave */
    animation-delay: 0ms; /* how long to delay the animation from starting */
    animation-iteration-count: infinite; /* how many times the animation will play */
    animation-name: loadscreenPart1Animation; /* the name of the animation we defined above */
}

#loadscreen-middle-part2 {
    animation-duration: 2000ms; /* the duration of the animation */
    animation-timing-function: linear; /* how the animation will behave */
    animation-delay: 0ms; /* how long to delay the animation from starting */
    animation-iteration-count: infinite; /* how many times the animation will play */
    animation-name: loadscreenPart2Animation; /* the name of the animation we defined above */
}

.loadscreen-fil1 {
    fill: none;
}

.loadscreen-fil2 {
    fill: none;
}

.loadscreen-str2 {
    stroke: url(#loadscreen-gradient1);
    stroke-width: 15.9992;
}

.loadscreen-str3 {
    stroke: url(#loadscreen-gradient2);
    stroke-width: 15.9992;
}

.loadscreen-str1 {
    stroke: #2D2D2D;
    stroke-width: 15.9992;
}

.loadscreen-fnt0 {
    font-family: OpenSans, Arial, tahoma, sans-serif;
    font-weight: normal;
    font-size: 750px;
    fill: #2D2D2D;
    opacity: 0.8;
}