.splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 200;
    text-align: center;
    color: white;
    
}

.splash.display-none {
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: -20;
    text-align: center;
    color: white;
    transition: all 2s;
    
}


@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeIn-fadeout {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
    
}

.fadeIn-fadeout {
    position: absolute;
    top: 50%;
    left: 45%;
    opacity: 0;
    animation: fadeIn-fadeout 2s ease-in forwards;
}

.splash-1 {
    position: absolute;
    top: 3%;
    left:0.5%;
    width: 100px;
    height: 100px;
    animation-name: move-back;
    animation-duration: 3s;
}

.splash2 {
    position: absolute;
    width: 100px;
    height: 100px;
    animation-name: move-back-2;
    animation-duration: 3s;
    
   
}
@media only screen and (min-width:1200px) {
    .splash-1 {
        position: absolute;
        top: 3%;
        left:0.5%;
        width: 100px;
        height: 100px;
        animation-name: move-back;
        animation-duration: 3s;
    }
@keyframes move-back {
    0% {
        left:38%;
        top: 40%;
    }

    50% {
        left:38%;
        top: 40%;
    }


    100% {
        left:0.5%;
        top:3%;
        
    }
}

@keyframes move-back-2 {
    0% {
        left: 41%;
        top: 45%;
    }

    100% {
        left: 41%;
        top:45%;
    }
}
}

@media only screen and (max-width:1025px) {
    .splash-1 {
        position: absolute;
        top: 4%;
        left:0.1%;
        width: 100px;
        height: 100px;
        animation-name: move-back;
        animation-duration: 3s;
    }

    @keyframes move-back {
        0% {
            left: 35%;
            top: 35%;
        }

        50% {
            left: 35%;
            top: 35%;
        }

        100% {
            top: 4%;
        left:0.1%;
        }
    }
    @keyframes move-back-2 {
        0% {
            left: 41%;
            top: 45%;
        }
    
        100% {
            left: 41%;
            top:45%;
        }
    }

    
}


@media only screen and (max-width:576px) {
    .splash-1 {
        position: absolute;
        top: 1.3rem;
        left:-2.9rem;
        width: 100px;
        height: 100px;
        animation-name: move-back;
        animation-duration: 3s;
    }
    @keyframes move-back {
        0% {
            left:0%;
            top: 40%;
        }

        50% {
            left:0%;
            top: 40%;
        }

        100% {
            left: -2.9rem;
            top: 1.3rem;
        }
    }

    @keyframes move-back-2 {
        0% {
            left: 17%;
            top: 45%;
        }

        100% {
            left:17%;
            top: 45%;
        }
    }
}



.zoom-in-zoom-out {
    animation: zoom-in-zoom-out 3s ease-in forwards;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(3, 3);
    }

    75% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}