body{
    height: 100vh;
  margin: 0;
}
.slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: cover;
    background-position: center;
}

.swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0);
}
#logo{
    max-width: 120px;
}
.swiper-pagination-bullet-active .path {
    display: inline-block !important;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: dash linear 120s;
    animation-iteration-count: unset;
}

.path {
    display: none;
}

.swiper-container {
    height: 100vh;
    width:100%;
}

.swiper-slide {
  overflow: hidden;
}
.swiper-pagination-bullet-active{
background-color:rgba(255, 255, 255, 0);
}


@keyframes dash {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}



.main-header .nav-links {
    font-size: 1rem;
}

.splash1{
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
    color: white;

}
.splash {
    position: absolute;
    bottom: 50%;
    left: 25%;
    justify-content: center;
    align-items: center;
    animation: bounceInUp;
    /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s;
    color: white;
    /* don't forget to set a duration! */
    font-size:1.4rem;

}

@keyframes move {
    10% {
        opacity: 5%;
    }

    50% {
        opacity: 10%;
    }

    90% {
        opacity: 30;
        transform: translate(470px, 150px)
    }

    100% {
        opacity: 100%;
        transform: translate(470px, 150px) scale(1);
    }
}

.logo {
    animation: move 2.2s ease;

}

@media (min-width: 410px) and (max-width: 767px) {

    .splash {
        font-size: 1rem;
        margin: 0 0 2% -8%;
    }

    .logo {
        animation: movemovil1 2.2s;
    }

    @keyframes movemovil1 {
        10% {
            opacity: 5%;
        }

        50% {
            opacity: 10%;
        }

        90% {
            opacity: 80%;
            transform: translate(100px, 270px)
        }

        100% {
            opacity: 100%;
            transform: translate(100px, 270px);
        }
    }

}

@media (min-width: 310px) and (max-width: 410px) {
    .splash {
        font-size: 1rem;
        margin: 0 0 2% -8%;
    }

    .logo {
        animation: movemovil 2s;
    }

    @keyframes movemovil {
        10% {
            opacity: 5%;
        }

        50% {
            opacity: 20%;
        }

        90% {
            transform: translate(100px, 170px)
        }

        100% {
            opacity: 100%;
            transform: translate(100px, 170px);
        }
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .main-header .nav-links .nav-link {
        width: 80%;
    }

    .main-header .nav-links {
        width: 40vw;
        height: 50vh;
    }

    .carousel-item {
        height: 60vh;
    }
}