/* RESPONIVE */
@media (min-width:2400px) {}

@media (max-width:980px) {

    .container {
        width: 90%!important;
    }

    #header {
        margin-top: 20px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }

    #header {
        margin-top: 20px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }

    #fiestas .f1 {
        width: 100%;
        height: auto;
        min-height: 2100px;
        top: 10%;
        left: 45%;
        z-index: 2;
        animation: personAnimation 36s infinite linear, personAnimation2Resp 5s  ease-in-out;
        -webkit-animation: personAnimation 36s infinite linear, personAnimation2Resp 5s  ease-in-out;
    }
    
     .navbar label{
        padding:2px;
        border-radius:10px;
        margin-top: 5px;
        
     }
    .squares {
        top:20%;
        left: 35%;
        width: 100%;
        height: 100vh;

    }
    #fiestas h1 {
        text-transform: uppercase;
        font-size: 12vw;
        line-height: 90px;
        text-shadow: -1px 1px 8px rgba(20, 20, 20, 0.31);
        padding-top: 20vw;
        font-weight:600;
        top: 40vw;
        animation: titleResp 5s  linear, contentButtonResp 1s ease 0.4s 1 normal both;
        -webkit-animation: titleResp 5s  linear, contentButtonResp 1s ease 0.4s 1 normal both; 
    }
    
    #fiestas h1 span {
        font-weight: 600;
        color: transparent;
        -webkit-text-stroke-width: 1.3px;
        font-size: 23vw;
        -webkit-text-stroke-color: #00ffea;
        text-shadow: -1px 1px 0px rgba(255, 255, 255, 0.11);
        animation: titleSpanResp 5s  linear, contentButtonResp 1s ease 0.4s 1 normal both;
        -webkit-animation: titleSpanResp 5s  linear, contentButtonResp 1s ease 0.4s 1 normal both; 
    }
    
    #fiestas h1 span:nth-child(1) {
        font-size: 15vw;
        -webkit-text-stroke-color: #fff;
        -webkit-text-stroke-width: 1px;
        text-shadow: -1px 1px 0px rgba(226, 0, 226, 0.16);
         animation: titleSpanP 5s  linear;
        -webkit-animation: titleSpanPResp 5s  linear; 
        font-weight: 600;
    
    }
    @keyframes personAnimation2Resp {

        19.6% {
            opacity: 1;
            width: 95vw;
            min-height: 1500px;
            opacity: 1;
            transform: translateX(-40vw) translateY(0vw);
            background-image: url('../img/f1.webp');
            z-index: 4;
    
        }
    
        20% {
            width: 105vw;
            opacity: 1;
            transform: translateX(-45vw) translateY(-5vw);
            background-image: url('../img/f2.webp');
            z-index: 10;
          
        }
    
        21% {
            width: 155vw;
            opacity: 0.5;
            transform: translateX(-55vw) translateY(0px);
            background-image: url('../img/f2.webp');
            z-index: 10;
          
        }
    
        22% {
            width: 165vw;
            opacity: 1;
            transform: translateX(-65vw) translateY(0vw);
            background-image: url('../img/f2.webp');
            z-index: 10;

        }
    
        23% {
            width: 178vw;
            opacity: 0.5;
            transform: translateX(-85vw) translateY(0vw);
            background-image: url('../img/f2.webp');
            z-index: 10;
        
        }
    
        45% {
            width: 178vw;
            opacity: 1;
            transform: translateX(-85vw) translateY(0vw);
            background-image: url('../img/f2.webp');
            z-index: 10;

        }
    
        46% {
            width: 185vw;
            opacity: 1;
            transform: translateX(-95vw) translateY(-5vw);
            background-image: url('../img/f2.webp');
            z-index: 10;

        }
    
        47% {
            width: 95vw;
            opacity: 1;
            transform: translateX(-50vw) translateY(0px);
            background-image: url('../img/f1.webp');
            z-index: 1;
            min-height: 1500px;
    
        }
    
    
    }
    


@keyframes titleSpanPResp {
    0% {
        opacity: 0.2;
    }

    19.5% {
        font-size: 15vw;
        opacity: 0.2;
    }

    20% {opacity: 0.2;
        font-size: 20vw;

    }

    21% {opacity: 0.2;
        font-size: 24vw;

    }

    22% {opacity: 0.2;
        font-size: 28vw;

    }

    45% {opacity: 0.2;
        font-size: 28vw;

    }

    46% {opacity: 1;
        font-size: 15vw;

    }
}
@keyframes titleSpanResp {
    19.5% {
        font-size: 23vw;
    }

    20% {opacity: 1;
        font-size: 22vw;

    }

    21% {opacity: 0.2;
        font-size: 23vw;

    }

    22% {
        font-size: 25vw;

    }

    45% {opacity:1;
        font-size: 25vw;

    }
    46% {opacity: 0.2;
        font-size: 25vw;

    }
    47% {opacity: 1;
        font-size: 23vw;

    }
}

@keyframes titleResp {
    19.5% {
        top: 0px;
        font-size: 10vw;
    }

    20% {
        top: 0px;
        font-size: 10vw;

    }

    21% { z-index: 4;
        top: 40px;
        font-size: 12vw;

    }

    22% {top: 60px;
        font-size: 15vw;
        z-index: 99999;

    }

    45% {top: 60px;
        font-size: 15vw;
        z-index: 99999;

    }

    46% {top: 0px;
        font-size: 12vw;
        z-index: 4;

    }
}
    #hero {
        overflow: hidden;
    }

    .hero__content {
        position: relative;
        width: 100%;
        background-color: transparent;

    }

    #hero h1 {
        text-transform: uppercase;
        font-size: 38px;
        line-height: 30px;
        text-shadow: -1px 1px 8px rgba(20, 20, 20, 0.31);
        padding-top: 25vw;
        font-weight: 600;
    
    }
.patterns{
    height: 110px;
}
    #hero svg text {
        font-family: var(--font-primary);
        letter-spacing: 6px;
        stroke: #9ac9ff;
        font-size:39px;
        font-weight: 700;
        stroke-width: 1.5;
        animation: textAnimate 5s infinite alternate;
        color: transparent;
        -webkit-animation: textAnimate 5s infinite alternate;
}
    #hero .span3 {
        -webkit-text-stroke-width: 0;
        color: #fff;
        font-size: 34px;
        font-weight: 600;
        line-height:0px;
        position: relative;
        top: -20px;
        animation: none;
        -webkit-animation: none;
    }

    
    .hero__titulo span {
        font-size: 4rem;
    }
    #bgHome {
        min-width: 90%;
        width: auto;
        height: 100vh;
        position: absolute;
        top: 50%;
        left:20%;
        transform: translateX(-50%) translateY(-50%);
        opacity: 0.8;
    }
    
.hero__content::before,
.hero__mask {
    content: '';
    position: absolute;
    z-index: 1;
    top: 45vw;
    left: 0%;
    display: block;
    width: 100%;
    min-width: 900px;
    height: 100vh;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}


.hero__mask::before {

    width: 250px;
    height: 250px;

}
    .carousel-inner{
        border-radius: 0px 0px 0px 0px;
    }


    .box p {
        animation: secFadeIn 2s forwards;
        animation-delay: 1.3s;
        opacity: 0;
        font-weight: 400;
        color: #ffffff;
        font-size: 40px;
        text-transform: uppercase;
        letter-spacing: 4px;
        margin-top:30vw;
        padding-left:0px;
        z-index: 90000000000;    text-shadow: -1px 1px 8px rgba(20, 20, 20, 0.11);
    }
.cool  {
        text-align: left;
         padding-top: 40vw;
         margin-bottom: 30px;
    }
      .cool span {
        font-family: var(--font-primary);
        font-size:29px!important;
        line-height: 60px;
        margin-top: 0px;
        font-weight: 600;
        z-index: 4;
        text-transform: uppercase;
        position: relative;
        max-width: 100%;
        color: #fff;
        display: inline-block;
        position: relative;
        -webkit-text-stroke-width: 1.3px;
        -webkit-text-stroke-color: #ffffff;
        padding-top: 20px;
        text-shadow: -1px 1px 8px rgba(20, 20, 20, 0.11);

      }
   

      .cards__imagen video {
        width: 140vw;
        top: -10vw;
        left: 200px;
        position: relative;
    }
    
    #cards {
        min-height: 95vh;
        margin: 0px;
        padding-bottom: 15vw;
        padding-top: 5vw;
        position: relative;
    }
    .tab-link {
        height: 650px;
        width: 350px;
        border-radius: 40px;
        border: 1px solid #ddd;
        padding: 10px 20px;
        cursor: pointer;
        transition: background-color 0.3s;
        border-radius: 30px;
        margin: 20px auto;
        font-weight: 400;
        backdrop-filter: blur(10px);
        position: relative;
        top: 50px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-content: center;
        opacity: 0.96;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .about__photo-nofix {
        background-position: center;

    }

    .about__text {
        width: 95%;
        margin-top: 80px;
        columns: 2;
        column-gap: 100px;
        text-align: left;
    }
    .about__img {
        width: 95%;
        height: auto;
        margin-top: 0px;
    }
    .text-start .about__img:first-child{
        margin-top: 0px;
    }
    

    .cards__content {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-around;
    }

    .card {
        width: 90%;
        padding: 40px 15px;
        margin-bottom: 30px;
    }

    .cards__img {
        left: 50%;
    }
    #contact {

        border-radius: 50px 0px 0px 0px;
    }
    #contact__formulario {
        width: 100%;
    }
    form .group {
        margin: 6px;
        width: 100%;
    }
    form textarea {
        max-height: 35vw;
        border: 2px solid var(--color-th);
        border-radius: 5px;
    }
    .contact__redes {
       margin-top: 30px;
       padding-left: 10px;
       padding-bottom: 20px;
    }
    .header__nav {
        width: 50px;
    }
}

@media (max-width:574px) {
 header{
    z-index:9999999999999999999999999999999999999!important
 }
    .navbar-list {
        background: var(--color-ve);
        color: var(--color-first);
        position: absolute;
        top: 50px;
        left: -280px;
        padding:30px;
        width:100vw;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: none;
        z-index: 99999999999999999!important;
    }

    .navbar label span {
        display: block;
    }

    #toggle-menu:checked~.navbar-list {
        display: flex;
    }

    .hero__content {
        position: relative;
        width: 100%;
        height: 200px;
        padding: 10px;
        background-color: transparent;
        margin: 0 auto;
        margin-top: 20vw;
        text-align: center;
    }


    .cards__content {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-around;
    }

    .card {
        width: 90%;
        padding: 40px 15px;
        margin-bottom: 30px;
    }

    .cards__img {
        position: relative;
        left: 0%;
        margin-top: 25px;
        width: 90%;
    }

    .cards__titulo {
        padding-bottom: 0;
        margin-bottom: 6vw;
        text-align: center;
        padding-left: 0px;
    }

    .about__text {
        width: 95%;
        margin-top: 80px;
        columns: 1;
        column-gap: 100px;
        text-align: left;
    }

    .contact__content {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        margin-top: 5vw;
        flex-direction: column;
        justify-content: center;
    }

    .contact__form {
        width: 90%;
        margin-bottom: 30px;
    }

    .login__form {
        margin: 0 auto;
        text-align: center;
        width: 90%;
    }

    .login__form input {
        border: 1px solid #a4a4a4;
        border-radius: 5px;
        padding: 10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        display: block;
        width: 50%;
        padding-left: 50px;
        margin: 5px auto;
        text-align: left;
    }
 
    .login__icon {
        text-align: left;
        width: 25px;
        position: relative;
        top: 40px;
        left: -80px;
        display: inline-block;
        color: var(--color-ve);

    }

    .login__titulo {
        font-weight: 400;
        margin: 20px 0px;
        margin-top: 70px;
        font-size: var(--text-size-th);
    }

    .registro__form {
        margin: 0;
        text-align: left;
        width: 90%;
    }


    .registro__form input {
        width: 90%;
    }
    .tab-content {
        display: none;
        text-align: center;
        padding: 0px;
        background-color: #fff;
        padding: 30px 20px;
        padding-bottom: 120px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin: 6px 0px;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 98vh;
        overflow-y: auto;
        z-index: 9900;
        text-align: left;
        border-radius: 15px;
        margin-top:60px
    }
    #hero #bgHome{
        display:none
    }
    #admin-ej video {
        width: 100%;
        max-width: 100%;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
}
#tarjeta-ej iframe, #video iframe{
    width: 100%!important
}
.portada iframe {
    height: 40vh!important;
}

#video .pie iframe {
    height: 30vw;
    margin-bottom: 30px
}
#invitaciones img, #video img {
    width: 45%;
    margin: 4px 0px;
}
#hero, #fiestas, #edicion {
    min-height:80vh
}
.cards__imagen{
    overflow-x: hidden;
    left:0px;
    top:-20px

}
.cards__imagen video {
    width: 180%;
    left:-160px;
    top:0px

}
}

@media (max-width:340px) {
    .login__button {
        margin: 30px 0px;
    }
}