.loadcontainer {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;}

        .loadsvg {
            max-width:100px;
            width: 70%;
            height: auto;
            fill: none;
            stroke: white;
            stroke-width: 40;
            transition:.2s;
            margin-left:0px;
            -webkit-transition:.2s;
            -moz-transition:.2s;
            -ms-transition:.2s;
            -o-transition:.2s;
}
            
        .loadsvg path {
                stroke-dasharray: 3500;
                stroke-dashoffset:-3500;
                fill-opacity: 0;
                animation: loaddraw 4s forwards ease-in-out;
                -webkit-animation: loaddraw s forwards ease-in-out;
}
        
    @keyframes loaddraw {
        50%{fill-opacity: 0;}
        55%{stroke-dashoffset: 0;}
        60%{fill-opacity: .5;}
        63%{fill-opacity: 0;}
        65%{fill-opacity: 1;}
        67%{fill-opacity: 0;}
        90%{fill-opacity: 1; stroke-dashoffset: 0;}
        100%{stroke-width: 0; fill-opacity: 1; stroke-dashoffset: 0;}
    }
#preloader{
    display: grid;
    place-items: center;
    color: aliceblue;
    font-size: 40px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    z-index: 999999999;
}

@-webkit-keyframes fadeUp {
    0% {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}
100% {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
}
@-moz-keyframes fadeUp {
    0% {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}
100% {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
}
@-ms-keyframes fadeUp {
    0% {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}
100% {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
}
@keyframes fadeUp {
    0% {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}
100% {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
}
@-webkit-keyframes fadeUp2 {
    0% {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}
100% {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    -moz-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    -o-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}
}
@-moz-keyframes fadeUp2 {
    0% {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}
100% {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    -moz-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    -o-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}
}
@-ms-keyframes fadeUp2 {
    0% {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}
100% {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    -moz-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    -o-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}
}
@keyframes fadeUp2 {
    0% {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}
100% {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    -moz-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    -o-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}
}
@-webkit-keyframes fadeInLeft {
    0% {
       opacity: 0;
       -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
    }
    100% {
       opacity: 1;
       -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
       -ms-transform: translateX(0);
       -o-transform: translateX(0);
       transform: translateX(0);
       transform: translateX(0);
    }
 }   
 @-moz-keyframes fadeInLeft {
    0% {
       opacity: 0;
       -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
    }
    100% {
       opacity: 1;
       -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
       -ms-transform: translateX(0);
       -o-transform: translateX(0);
       transform: translateX(0);
       transform: translateX(0);
    }
 }   
 @-ms-keyframes fadeInLeft {
    0% {
       opacity: 0;
       -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
    }
    100% {
       opacity: 1;
       -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
       -ms-transform: translateX(0);
       -o-transform: translateX(0);
       transform: translateX(0);
       transform: translateX(0);
    }
 }   
@keyframes fadeInLeft {
    0% {
       opacity: 0;
       -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
    }
    100% {
       opacity: 1;
       -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
       -ms-transform: translateX(0);
       -o-transform: translateX(0);
       transform: translateX(0);
       transform: translateX(0);
    }
 }  
 @-webkit-keyframes fadeInRight {
    100% {
       opacity: 1;
       -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    }
    0% {
       opacity: 0;
       -webkit-transform: translateX(50px);
       -moz-transform: translateX(50px);
       -ms-transform: translateX(50px);
       -o-transform: translateX(50px);
       transform: translateX(50px);
       transform: translateX(50px);
    }
 }   
 @-moz-keyframes fadeInRight {
    100% {
       opacity: 1;
       -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    }
    0% {
       opacity: 0;
       -webkit-transform: translateX(50px);
       -moz-transform: translateX(50px);
       -ms-transform: translateX(50px);
       -o-transform: translateX(50px);
       transform: translateX(50px);
       transform: translateX(50px);
    }
 }   
 @-ms-keyframes fadeInRight {
    100% {
       opacity: 1;
       -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    }
    0% {
       opacity: 0;
       -webkit-transform: translateX(50px);
       -moz-transform: translateX(50px);
       -ms-transform: translateX(50px);
       -o-transform: translateX(50px);
       transform: translateX(50px);
       transform: translateX(50px);
    }
 }   
@keyframes fadeInRight {
    100% {
       opacity: 1;
       -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    }
    0% {
       opacity: 0;
       -webkit-transform: translateX(50px);
       -moz-transform: translateX(50px);
       -ms-transform: translateX(50px);
       -o-transform: translateX(50px);
       transform: translateX(50px);
       transform: translateX(50px);
    }
 } 
.test {
      -webkit-animation-name: fadeUp;
    -moz-animation-name: fadeUp;
    -ms-animation-name: fadeUp;
    -o-animation-name: fadeUp;
    animation-name: fadeUp;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: visible;
}
.preloadingUp{
    opacity: 0;
}
.preloadingUp2{
    opacity: 0;
}
.preloadingRight{
    opacity: 0;
}
.preloadingLeft{
    opacity: 0;
}
.preloadFadeUp {
    -webkit-animation-name: fadeUp;
    -moz-animation-name: fadeUp;
    -ms-animation-name: fadeUp;
    -o-animation-name: fadeUp;
    animation-name: fadeUp;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: visible;
}
.preloadFadeUp2 {
    -webkit-animation-name: fadeUp2;
    -moz-animation-name: fadeUp2;
    -ms-animation-name: fadeUp2;
    -o-animation-name: fadeUp2;
    animation-name: fadeUp2;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: visible;
}
.preloadFadeinRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -ms-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: visible;
}
.preloadFadeinLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -ms-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: visible;
}