section#loading {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 101;
    background-color: #F1F3F6;
}
section#loading div.circle {
    background-image: linear-gradient(90deg, #F800FF 0%, #3100FF 100%);
    width: 0vw;
    height: 0vw;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}
.fullwidth {animation: fullwidth 1.5s;-webkit-animation: fullwidth 1.5s;}
@keyframes fullwidth {
    0% {width: 20vw; height: 20vw;}
    10% {width: 100vw; height: 100vh;}
    95% {width: 100vw; height: 100vh;}
    100% {width: 0vw; height: 100vh;}
}
.j2hide {animation: j2hide 1.5s; -webkit-animation: j2hide 1.5s;}
@keyframes j2hide {
    0%, 80% {opacity: 1;}
    90%, 100% {opacity: 0;}
}
.spin {animation: spin 1s; -webkit-animation: spin 1.5s;}
@keyframes spin {
    0% {transform: rotate(0deg); border-radius: 0%; width: 20vw; height: 20vw;}
    50% {border-radius: 50%;}
    100% {transform: rotate(360deg); border-radius: 0%; width: 20vw; height: 20vw;}
}
section#loading img {
    width: 10vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 900px) {
    @keyframes fullwidth {
        0% {width: 30vw; height: 30vw;}
        10% {width: 100vw; height: 100vh;}
        95% {width: 100vw; height: 100vh;}
        100% {width: 0vw; height: 100vh;}
    }
    @keyframes spin {
        0% {transform: rotate(0deg); border-radius: 0%; width: 30vw; height: 30vw;}
        50% {border-radius: 50%;}
        100% {transform: rotate(360deg); border-radius: 0%; width: 30vw; height: 30vw;}
    }
    section#loading img {
        width: 15vw;
    }
}