#hero {
    width: 100%;

    }

body {
    overflow: hidden;
}

.img-logo {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 2vw;
    z-index: 99;
}

.colored {
    background-image: linear-gradient(90deg, rgb(41, 192, 252) 49%, pink 51%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    }
    

.gradiente {
    width: 110vw;
    height: 110vh;
    background: linear-gradient(135deg, rgb(113, 212, 252) 0%, pink 100%);
    overflow: hidden;
}



.contenedor-hero {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: absolute;
    top: -2vh;
    right: -5vw;
}


.slider {
    overflow: hidden;
    height: 120vh;
}

.slider .slide-track {
    display: flex;
    flex-direction: column;
    animation: scroll 40s linear infinite;
    -webkit-animation: scroll 40s linear infinite;
    height: calc(200px * 5);
}

 .slider .slide-trackRes {
    animation: scroll 40s linear infinite !important;
    flex-direction: column !important;
}

@keyframes scroll {

    0% {
        transform: translateY(0);
        -webkit-transform: translateY(0) ;
    }
    100% {
        transform: translateY(calc(-200px * 5));
        -webkit-transform: translateY(calc(-200px * 5)) ;
    }
    
}



.slider .slide-track2 {
    display: flex;
    flex-direction: column-reverse;
    animation: desplazarse 40s linear infinite;
    -webkit-animation: desplazarse 40s linear infinite;
    height: calc(200px * 5);
}


@keyframes desplazarse {

    0% {
        transform: translateY(0);
        -webkit-transform: translateY(0) ;
    }
    100% {
        transform: translateY(calc(200px * 5));
        -webkit-transform: translateY(calc(200px * 5)) ;
    }
    
}

.slider .slide img {
    width: 100%;
}

.col2, .col3 {
    width: 18vw;
    margin-right: 1vw;
}



.col2 img {
    object-fit: cover;
    width: 100%;
    height: 476px;
    border-radius: 15px;
    margin-bottom: 15px;
}

.col3 img {
    object-fit: cover;
    width: 100%;
    height: 476px;
    border-radius: 15px;
    margin-bottom: 15px;
}

.hide-res {
    display: flex;
}

.show-res {
    display: none;
}

/* ------------------Carrusel Responsivo----------------------------- */

@media (min-width:300px) and (max-width:1365.8px) {


    .contenedor-hero {
        display: flex;
        justify-content: start;
        flex-wrap: nowrap;
        width: 100vw;
        margin-top: 3vh;
    }
    
    
    .slider {
        overflow: hidden;
        height: 98vh;
    }

    .col2, .col3 {
        width:43vw;
        margin-right: 4vw;
    }

    .hide-res {
        display: none;
    }
    
    .show-res {
        display: flex;
    }

    .col12 img {
        height: 300px;
    }
    
}



/* -----------------------------------INVITACION------------------------------- */

.contenedor-invitacion {
    position: absolute;
    top: 12vh;
    left: 5vw;
    width: 35vw;
    height: 70vh;
    border-radius: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000;
}

.poppins {
    font-family: 'Poppins', sans-serif;
}

.ttl-inv {
    margin: -0vh 0 0 0;
    font-size: clamp(1.5rem, 1.3148rem + 0.9877vw, 2.5rem);
}

.cursive {
    font-family: 'Marck Script', cursive;
}

.te-invitamos {
    margin: 2vh 0 0 0;
    font-size: clamp(1.0625rem, 1.0278rem + 0.1852vw, 1.25rem);
}

.te-invitamos2 {
    font-size: clamp(1.0625rem, 1.0278rem + 0.1852vw, 1.25rem);
}

.altair {
    margin: 2vh 0 0 0;
    font-size: clamp(2.9375rem, 2.8449rem + 0.4938vw, 3.4375rem);
}

.fecha {
    display: flex;
    align-items: center;
    margin: 4vh 0 0 0;
}

.mes {
    
   margin-top: -0.5vh;
   margin-bottom: 0;
}
.numero {
    margin: -1.5vh 0 0 0;
    font-size:40px;
}

.txt-fecha {
    margin: 0;
    font-size: 30px;
    margin: 0 2vw;
}

.line {
    height: 2px;
    width: 10vw;
    background: #000;
    margin: 0 1vw;
    } 

.año {
    margin: -1vh 0 0 0;
}

.espacio {
    margin: 4vh 0 0 0;
}

.espacio2 {
    margin: 4vh 0 0 0;
}

.btn-inv {
    text-decoration: none;
    padding: 1vh 2vw;
    background: linear-gradient(90deg,rgb(113, 212, 252) 0%, pink 100%);
    border-radius: 20px;
    color: #777777;
}
.btn-inv:hover {
    color: #303030;
    background: rgb(113, 212, 252);
    
}

.btn-inv2 {
    text-decoration: none;
    background: linear-gradient(90deg,rgb(113, 212, 252) 0%, pink 100%);
    border-radius: 20px;
    color: #777777;
    display: flex;
    padding: 0 1vw;
    justify-content: center;
    align-items: center;
}

.btn-inv2:hover {
    color: #303030;
    background: rgb(113, 212, 252);
    transition: 0.5s;
    
}

.img-inv {
    font-size: 80px;
    color: #000;
    margin-bottom: 3vh;
}

.bottom-inv {
    display: flex;
    justify-content: space-around;
    width: 90%;
    margin-top: 6vh;
}

/* .music {
    padding: 1vh 0vw 1vh 0;
} */


/* ---------------------INVITACION RESPONSIVA ----------------------- */

@media (min-width:300px) and (max-width:1365.8px) {

    .contenedor-invitacion {
        position: absolute;
        top: 15vh;
        left: 5vw;
        width: 90vw;
        height: 80vh;
        border-radius: 15px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

    
    .mes {
        margin-top: -0.5vh;
        margin-bottom: 0;
     }
     .numero {
         margin: -1.5vh 0 0 0;
         font-size: 35px;
     }
     
     .txt-fecha {
         margin: 0;
         font-size: 20px;
         margin: 0 2vw;
     }
     
     .line {
         height: 2px;
         width: 30vw;
         background: #fff;
         margin: 0 1vw;
         } 

    .fecha {
        margin: 0vh 0 0 0;
    }

    .img-inv {
        font-size: 60px;
        color: #fff;
        margin-bottom: 3vh;
        }

        
    .espacio {
    margin: 0vh 0 0 0;
    }

    .espacio2 {
    margin: 0vh 0 0 0;
    }

    .bottom-inv {
        display: flex;
        justify-content: space-around;
        width: 90%;
        height: 35%;
        padding: 0;
        margin: 3vh 0 0 0;
    }
    
    .music {
        padding: 2.5vh 2vw 2.5vh 0vw;
        width: 100%;
    }

    .btn-inv {
        text-decoration: none;
        background: linear-gradient(90deg,rgb(113, 212, 252) 0%, pink 100%);
        border-radius: 20px;
        color: #777777;
        font-size: 12px;
        margin: 2.5vh 0 10vh 0;
        display: flex;
        padding: 10px 4vw;
        justify-content: center;
        align-items: center;
        height: 35px;
    }

    .btn-inv2 {
        text-decoration: none;
        background: linear-gradient(90deg,rgb(113, 212, 252) 0%, pink 100%);
        border-radius: 20px;
        color: #777777;
        display: flex;
        padding: 10px 1vw;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        margin: 2.5vh 0 10vh 0;
        height: 35px;
    }
    
}


@media (min-width:600px) and (max-width:1200.8px) {

.contenedor-invitacion {
    height: 100vh;
}

.fecha {
    font-size: 40px;
}

.numero {
    font-size: 40px;
}

.txt-fecha {
    font-size: 40px;
}

}


.icono-home2 {
    font-size: 30px;
    color: #fff;
    background:  pink 100%;
    position: absolute;
    z-index: 9999999;
    border-radius: 10px;
    left: 2vw;
    top: 2vh; 
    display: inline-block;
    padding: 5px 10px;
}