.preloader{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999;
}
.logo-cont{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    width: 400px;
}
.preloader-logo{
    opacity: 0;
    width: 100%;
}
.preloader-logo.hl{
    animation: fadeinlogo 2s linear 1.3s ;
}
.preloader-logo.word{
    margin-top: 20px;
    animation: fadeinlogo 2s linear 1s ;
}
.onda1, .onda2{
    position: absolute;
    top: 0;
    width: 200%;
    height: 70%;
    animation-duration: 3.3s;
    animation-delay: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.onda1{
    /*animation: ondaRTL 3.3s linear  ;*/
    animation-name: ondaRTL;
}
.onda2{
    z-index: -1;
    /*animation: ondaLTR 3.3s linear ;*/
    animation-name: ondaLTR;
}
.onda-cont{
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 100%;
    animation: ondaBTT 3.3s linear 0.2s;
}
.bg-cont{
    position: absolute;
    width: 100%;
    height: 50vh;
    top: 100%;
    animation: bgBTT 2.3s linear  1.2s;
    z-index: -2;
}
.img-bg{
    position: absolute;
    top: 68%;
    height: 130vh;
}

.preloader-finish{
    opacity: 0;
    pointer-events: none;
}
.svg-logo{
    height: 350px;
}
@media (max-width: 992px) {
    .onda1, .onda2{
        height: 30%;
    }
    .img-bg{
        top: 29%;
    }
    @keyframes ondaBTT {
        from {
            top: 100%;
        }
        to {
            top: -10%;
        }
    }
}
@media (max-width: 450px) {
    .logo-cont{
        width: 300px;
    }
}

@keyframes ondaRTL {
    from {
        right: -100%;
    }
    to {
        right: 0%;
    }
}

@keyframes ondaLTR {
    from {
        left: -100%;
    }
    to {
        left: 0%;
    }
}


@keyframes ondaBTT {
    from {
        top: 100%;
    }
    to {
        top: -20%;
    }
}

@keyframes bgBTT {
    from {
        top: 100%;
    }
    to {
        top: 0%;
    }
}

@keyframes fadeinlogo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}