#preloader{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
#preloader img{
    position: relative;
    animation-name: blinking;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: ease-in;
}
#preloader.active img{
    animation-name: hide;
}
#preloader.active{
    animation-name: hidebg;
}
#preloader.displayNone{
    display: none;
}
@keyframes blinking{
    0%{
        opacity: 0.5;
    }50%{
        opacity: 1;
    }100%{
        opacity: 0.5;
    }
}
@keyframes hide{
    0%{
        opacity: 1;
        top: 0;
    }100%{
        top: -80px;
        opacity: 0;
    }
}
@keyframes hidebg{
    0%{
        opacity: 1;
    }100%{
        opacity: 0;
    }
}