* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

a {
    text-decoration: none;
}

/* index */

.header {
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    background-image: linear-gradient(rgb(25, 135, 84), rgb(25, 135, 84));
    background-size: 100% 0;
    background-repeat: no-repeat;
    background-position: top;
    animation: nav-animation linear;
    animation-timeline: scroll();
    animation-range: 0 200px;
    animation-fill-mode: both;
}

.conteiner {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 10px;
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav > .conteiner-image {
    width: 50px;
    display: flex;
    align-items: center;
}

.nav > .conteiner-image > .nav-image{
    width: 50px;
}

.nav > ul {
    display: flex;
    gap: 10px;
}

.nav > ul li {
    list-style: none;
}

.nav > ul > li:first-child {
    display: none;
}

.conteiner-right > #bars {
    display: none;
}

.nav > ul li a {
    text-decoration: none;
    color: rgb(255, 255, 255);
}

.nav > ul li a span {
    background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
    background-size: 0px 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: all 500ms;
}

.nav > ul li:hover > a span {
    background-size: 100% 1px;
}

.conteiner-right {
    font-size: 15px;
    width: 230px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: rgb(255, 255, 255);
}

.conteiner-right i {
    cursor: pointer;
}

.conteiner-right > input {
    padding-left: 10px;
    border-radius: 10px;
    border: none;
    height: 100%;
    margin: o;
    position: relative;
    transform-origin: right;
    transform: scaleX(0);
    transition: all 500ms ease;
}

.conteiner-right > input:focus {
    outline: none;
}

.conteiner-right > input.show {
    transform: scaleX(100%);
}

.contenedor {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.carrusel {
    display: flex;
    width: 3000%;
    height: 500px;
    margin-left: -100%;
}

.carruselitem {
    width: 100%;
}

.item1 {
    background-image: url(img/CarruFer1.jpeg);
    background-size: cover;
}

.item2 {
    background-image: url(img/CarruFer2.jpeg);
    background-size: cover;
}

.item3 {
    background-image: url(img/CarruFer3.jpeg);
    background-size: cover;
}
.item4 {
    background-image: url(img/CarruFer4.jpeg);
    background-size: cover;
}
.item5 {
    background-image: url(img/CarruFer5.jpeg);
    background-size: cover;
}
.item6 {
    background-image: url(img/CarruFer6.jpeg);
    background-size: cover;
}
.item7 {
    background-image: url(img/CarruFer7.jpeg);
    background-size: cover;
}
.item8 {
    background-image: url(img/CarruFer8.jpeg);
    background-size: cover;
}
.item9 {
    background-image: url(img/CarruFer9.jpeg);
    background-size: cover;
}

.item10 {
    background-image: url(img/CarruFer10.jpeg);
    background-size: cover;
}

.item11 {
    background-image: url(img/CarruFer11.jpeg);
    background-size: cover;
}

.item12 {
    background-image: url(img/CarruFer12.jpeg);
    background-size: cover;
}

.item13 {
    background-image: url(img/CarruFer13.jpeg);
    background-size: cover;
}

.item14 {
    background-image: url(img/CarruFer14.jpeg);
    background-size: cover;
}

.item15 {
    background-image: url(img/CarruFer15.jpeg);
    background-size: cover;
}

.item16 {
    background-image: url(img/CarruFer16.jpeg);
    background-size: cover;
}

.item17 {
    background-image: url(img/CarruFer17.jpeg);
    background-size: cover;
}

.item18 {
    background-image: url(img/CarruFer18.jpeg);
    background-size: cover;
}

.item19 {
    background-image: url(img/CarruFer19.jpeg);
    background-size: cover;
}

.item20 {
    background-image: url(img/CarruFer20.jpeg);
    background-size: cover;
}

.item21 {
    background-image: url(img/CarruFer21.jpeg);
    background-size: cover;
}

.item22 {
    background-image: url(img/CarruFer22.jpeg);
    background-size: cover;
}

.item23 {
    background-image: url(img/CarruFer23.jpeg);
    background-size: cover;
}

.item24 {
    background-image: url(img/CarruFer24.jpeg);
    background-size: cover;
}

.item25 {
    background-image: url(img/CarruFer25.jpeg);
    background-size: cover;
}

.item26 {
    background-image: url(img/CarruFer26.jpeg);
    background-size: cover;
}

.item27 {
    background-image: url(img/CarruFer27.jpeg);
    background-size: cover;
}

.item28 {
    background-image: url(img/CarruFer28.jpeg);
    background-size: cover;
}

.item29 {
    background-image: url(img/CarruFer29.jpeg);
    background-size: cover;
}

.item30 {
    background-image: url(img/CarruFer30.jpeg);
    background-size: cover;
}

.botoncarrusel {
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    position: absolute;
    top: 0;
    color: rgba(255, 255, 255, 0.5);
}

.izquierda {
    font-size: 40px;
    left: 20px;
}

.derecha {
    font-size: 40px;
    right: 20px;
}

#izquierda {
    font-size: 40px;
    left: 20px;
    cursor: pointer;
    transition: all 300ms; 
}

#derecha {
    font-size: 40px;
    right: 20px;
    cursor: pointer;
    transition: all 300ms; 
}

#izquierda:hover {
    color: rgb(255, 255, 255);
}

#derecha:hover {
    color: rgb(255, 255, 255);
}

.contenedor-videos {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.contenedor-videos > a {
    display: none;
    width: 100%;
    transition: transform 500ms;
}
.contenedor-videos > a.show {
    display: block;
}

.contenedor-videos > a > div {
    width: 100%;
    aspect-ratio: 3/2;
    background-color: rgb(100, 100, 100);
    transition: transform 500ms;
    border-radius: 10px;
}

.contenedor-videos > a > .invisible {
    display: none;
}

.contenedor-videos > a:hover {
    transform: translateY(-10px);
}

.bienvenida {
    display: flex;
    width: 100%;
    margin-top: 0px;
    padding-inline: 80px;
}

.bienvenida.margin {
    margin-top: 40px;
}

.imagen-bienvenida {
    width: 35%;
}

.bienvenida > div {
    width: 65%;
    background-image: url(img/background.png);
    background-size: cover;
    object-fit: cover;
    padding-inline: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: rgb(255, 255, 255);
}

.titulo-bienvenida {
    text-align: center;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.texto-bienvenida {
    text-align: justify;
    font-family: "Roboto", sans-serif;
    font-style: normal;
}

.contenedor-countdown {
    width:100%;
    display: none;
    justify-content: center;
    gap: 8%;
    opacity: 0;
    animation: fade linear;
    animation-timeline: scroll();
    animation-range: entry 0% cover 10%;
    animation-fill-mode: both;
}

.contenedor-countdown > div {
    width: 18%;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
}

.contenedor-countdown > div > span {
    width: 100%;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 10%;
    aspect-ratio: 1/1;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 5dvw;
}

.contenedor-countdown > div > p {
    text-align: center;
}

.contenedor-contenedor-tarjetas {
    padding-top: 40px;
}

.contenedor-contenedor-tarjetas > h2 {
    padding-inline: 20px;
    text-align: center;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
}

.contenedor-tarjetas {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-inline: 80px;
    padding-block: 40px;
}

.tarjeta {
    position: relative;
    aspect-ratio: 1/1;
    width: 20%;
    background-color: rgb(100, 100, 100);
    transition: transform 500ms;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    text-align: center;
    padding-inline: 10px;
    color: rgb(255, 255, 255);
}

.tarjeta > img {
    height: 80px;
}

.tarjeta > .color {
    filter: invert(1) sepia(0) saturate(1000%);
}

.tarjeta > span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: end;
    justify-content: center;
}

.tarjeta.n1 {
    background-image: url(img/mecanica3.jpg);
}

.tarjeta.n2 {
    background-image: url(img/dibujo3.jpeg);
}

.tarjeta.n3 {
    background-image: url(img/informatica3.jpeg);
}

.tarjeta.n4 {
    background-image: url(img/electricidad3.jpeg);
}

.tarjeta:hover {
    transform: translateY(-10px);
}

.infocole {
    width: 100%;
    padding-inline: 80px;
    margin-bottom: 30px;
}

.infocole > img {
    width: inherit;
}

.contenedorfooter {
    background-color: rgb(25, 135, 84);
}

.footer {
    display: flex;
    gap: 80px;
    padding-inline: 150px;
    padding-block: 20px;
}

.footerizquierda {
    width: 50%;
}

.footerderecha {
    width: 50%;
}

.titulofooter {
    font-size: 20px;
    color: rgb(255, 255, 255);
    font-family: "Roboto", sans-serif;
    font-style: normal;
}

.informacionfooter {
    margin-block: 15px;
    color: rgb(220, 220, 220);
    font-family: "Roboto", sans-serif;
    font-style: normal;
    text-align: justify;
}

.informacionfooter > a {
    color: rgb(220, 220, 220);
}

.redes {
    height: 100px;
    margin-inline: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-top: 1px solid rgb(220, 220, 220);
}

.red {
    width: 40px;
    height: 40px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 300ms;
}

.red:hover {
    margin-bottom: 10px;
}

.iconosfooter {
    display: inline-block;
    text-align: left;
    height: fit-content;
    width: 25px;
}

/* todos los talleres */

.hero {
    height: 500px;
    width: 100%;
    object-fit: cover;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-title {
    text-align: center;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    color: rgb(255, 255, 255);
}

.main {
    display: grid;
    grid-template-columns: 200px auto;
    margin-block: 40px;
}

.bienvenida-taller {
    display: flex;
    width: 100%;
    padding-inline: 40px;
}

.bienvenida-taller > div {
    padding-inline: 40px;
    background-image: url(img/background.png);
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.imagen-bienvenida-taller {
    width: 35%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.titulo-taller {
    text-align: center;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    color: rgb(255, 255, 255);
}

.texto-taller {
    margin-top: 10px;
    text-align: justify;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    line-height: 22px;
    color: rgb(255, 255, 255);
}

.barra-lateral {
    max-width: 200px;
    height: fit-content;
    background-color: rgb(25, 135, 84);
}

.barra-lateral li {
    padding-block: 20px;
    padding-inline-start: 10px;
}

.barra-lateral ul > li > a {
    color: rgb(255, 255, 255);
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
    cursor: pointer;
}

.barra-lateral ul > li > a > span {
    color: rgb(255, 255, 255);
    background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: all 500ms;
}

.barra-lateral ul > .volverli {
    display: none;
}

.barra-lateral ul > li  span:hover {
    background-size: 100% 1px;
}

.contenedor-videos-especialidad {
    display: none;
    grid-template-columns: 30% 30% 30%;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    padding-inline: 40px;
}

.contenedor-videos-especialidad.sinproyectos {
    justify-content: center;
}

.contenedor-videos-especialidad > div > h3 {
    margin-top: 10px;
    text-align: center;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    color: rgb(130, 130, 130);
    width: 60%;
}

.contenedor-videos-especialidad > div {
    height: fit-content;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.contenedor-videos-especialidad > div > img {
    width: 50%;
}

.contenedor-videos-especialidad > a {
    width: 100%;
    transition: transform 500ms;
    height: fit-content;
}

.contenedor-videos-especialidad > a > div {
    width: 100%;
    aspect-ratio: 3/2;
    background-color: rgb(100, 100, 100);
    border-radius: 10px;
}

.contenedor-videos-especialidad > a:hover {
    transform: translateY(-10px);
}

.proyectos-anteriores {
    text-align: center;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    color: rgb(0, 0, 0);
    margin-left: 240px;
    margin-right: 40px;
    margin-bottom: 20px
}

.contenedor-carrusel-taller {
    margin-left: 240px;
    margin-right: 40px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.carrusel-taller {
    margin-left: -100%;
    width: 400%;
    display: flex;
}

.contenedor-carrusel-taller .item-ctaller {
    width: 100%;
    height: 450px;
    background-color: rgb(0, 0, 0);
}

.item-ctaller > img {
    width: 100%;
    opacity: 0.5;
    filter: grayscale(1);
}

.manejadores {
    height: 450px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
}

.manejadores i {
    color: rgba(255, 255, 255, 0.5);
    margin-inline: 20px;
    font-size: 30px;
    cursor: pointer;
    transition: color 300ms;
}

.manejadores i:hover {
    color: rgb(255, 255, 255);
}

/* mecanica */

.hero.hero-metalmecanica {
    background-image: url(img/mecanica3.jpg);
}

.mecanica {
    background-image: url(img/mecanicaportada.webp);
    background-size: cover;
}

.soldadura {
    background-image: url(img/soldaduraportada.webp);
    background-size: cover;
}

/* diseño */

.hero.hero-diseño {
    background-image: url(img/dibujo3.jpeg);
}

.titulo-taller.diseño {
    font-size: 35px;
}

.diseñomecanico {
    background-image: url(img/diseñomecanicoportada.webp);
    background-size: cover;
}

.diseñotopografico {
    background-image: url(img/diseñotopografico.webp);
    background-size: cover;
}

.diseñoarquitectonico {
    background-image: url(img/diseñoarquitectonico.webp);
    background-size: cover;
}

/* informatica */

.hero.hero-informatica {
    background-image: url(img/informatica3.jpeg);
}

/* electricidad */

.hero.hero-electricidad {
    background-image: url(img/electricidad3.jpeg);
}

/* tecnologia */

.imagen-bienvenida-taller.tecnologia {
    width: 50%;
}

/* sextos */

.hero.hero-sexto {
    background-image: url(img/sextohero.jpg);
}

/* septimos */

.hero.hero-septimo {
    background-image: url(img/septimohero.jpg);
}

/* octavos */

.hero.hero-octavo {
    background-image: url(img/octavohero.jpg);
}

/* proyecto */

.project-header {
    width: 100%;
    position: sticky;
    z-index: 1;
    top: 0;
    background-color: rgb(25, 135, 84);
}

.conteiner-video {
    display: flex;
    margin-inline: 20px;
    margin-top: 10px;
    margin-bottom: 40px;
}

.conteiner-video > iframe {
    width: 70%;
    height: 480px;
}

.informacionproyecto {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.informacionproyecto > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.informacionproyecto > div > h2 {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.informacionproyecto > div > p {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    text-align: center; 
}

.descripcionproyecto {
    display: flex;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 40px;
    padding-inline: 120px;
}

.imagen-descripcion {
    width: 45%;
}

.descripcionproyecto > div {
    width: 55%;
    background-image: url(img/background.png);
    background-size: cover;
    padding-inline: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    color: rgb(255, 255, 255);
}

.titulo-descripcion {
    text-align: center;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
}

.texto-descripcion {
    margin-top: 10px;
    text-align: justify;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 25px;
}

/*Para Otros dispositivos*/

@media (max-width: 900px){
    /*navbar*/

    .nav > ul {
        height: 100vh;
        width: 280px;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: start;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform ease-in-out 300ms;
        filter: blur(0);
        background-color: rgb(25, 135, 84);
    }

    .nav > ul.visible {
        transform: scaleX(100%);
    }

    .nav > ul > li {
        height: 70px;
        width: 100%;
        padding-inline: 10px;
        display: flex;
        align-items: center;
    }

    .nav > ul li:hover > a span {
        background-size: 0 1px;
    }

    .nav > ul li > a span:hover {
        background-size: 100% 1px;
    }

    .nav > ul > li:first-child {
        display: flex;
        justify-content: space-between;
        color: rgb(255, 255, 255);
        font-size: 20px;
    }

    .nav > ul > li:first-child i {
        cursor: pointer;
    }

    .conteiner-image {
        display: flex;
        align-items: center;
    }

    .nav-image {
        width: 50px;
    }

    .conteiner-right {
        width: fit-content;
        font-size: 20px;
        gap: 20px;
    }

    .conteiner-right.disapear {
        display: none;
    }

    .conteiner-right > #bars {
        display: block;
    }

    /*footer*/

    .footer {
        flex-direction: column-reverse;
        gap: 10px;
        padding-inline: 40px;
        padding-block: 20px;
    }

    .footerderecha {
        width: 100%;
    }

    .footerizquierda {
        width: 100%;
    }

    .informacionfooter {
        text-align: justify;
    }

    .redes {
        margin-inline: 40px;
    }

    /*index*/

    .contenedor-videos {
        grid-template-columns: 100%;
        padding-inline: 20px;
    }

    .contenedor-videos > a:hover {
        transform: none;
    }

    .bienvenida {
        flex-direction: column-reverse;
        padding-inline: 10px;
    }

    .bienvenida > div {
        gap: 20px;
        width: 100%;
        background-image: url(img/background2.png);
    }

    .imagen-bienvenida {
        width: 100%;
    }

    .titulo-bienvenida {
        padding-top: 20px;
    }

    .texto-bienvenida {
        font-size: 100%;
        line-height: 120%;
    }

    .contenedor-countdown {
        padding-bottom: 20px;
        animation-range: entry 20vh cover 50vh;
        justify-content: space-between;
    }

    .contenedor-tarjetas {
        padding-inline: 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .contenedor-tarjetas > .tarjeta {
        font-size: 30px;
        background-position: center;
        width: 45%;
        transform: none;
        text-align: left;
        font-family: "Lilita One", sans-serif;
        font-weight: 200;
        font-style: normal;
    }

    .infocole {
        padding-inline: 20px;
    }

    /*taller*/

    .hero-title {
        padding-inline: 40px;
    }

    .main {
        display: block;
    }

    .barra-lateral {
        margin-inline: 20px;
        max-width: none;
    }

    .barra-lateral > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .barra-lateral li {
        width: 45%;
        display: flex;
        align-items: center;
        height: 80px;
        list-style: none;
        padding-inline-start: 0;
        padding-inline: 10px;
        padding-block: 0;
    }

    .bienvenida-taller {
        flex-direction: column-reverse;
        padding-inline: 20px;
        margin-top: 30px;
    }

    .bienvenida-taller > div {
        padding-block: 40px;
    }

    .imagen-bienvenida-taller {
        width: 100%;
    }

    .contenedor-carrusel-taller {
        margin-left: 0;
        margin-inline: 20px;
    }

    .item-ctaller > img {
        height: 500px;
        object-fit: cover;
    }

    .contenedor-videos-especialidad {
        grid-template-columns: 100%;
    }

    .contenedor-videos-especialidad > a {
        width: 100%;
    }

    .contenedor-videos-especialidad > a:hover {
        transform: none;
    }

    .contenedor-videos-especialidad > a:first-child {
        margin-top: 30px;
    }

    /*metalmecanica*/

    .hero-title.metalmecanica {
        font-size: 30px;
    }

    /*proyecto*/

    .conteiner-video {
        flex-wrap: wrap;
    }

    .conteiner-video > iframe {
        width: 100%;
        height: 250px;
    }

    .informacionproyecto {
        width: 100%;
        align-items: start;
        margin-top: 10px;
    }

    .informacionproyecto > div {
        align-items: start;
    }

    .descripcionproyecto {
        flex-direction: column-reverse;
        padding-inline: 20px;
    }

    .descripcionproyecto > div {
        background-image: url(img/background2.png);
        width: 100%;
        padding: 30px;
    }

    .descripcionproyecto > .imagen-descripcion {
        width: 100%;
    }

    .imagen-bienvenida-taller.tecnologia {
        width: 100%;
    }

}

@media (max-width: 600px){
    /*navbar*/

    .nav > ul {
        height: 100vh;
        width: 280px;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: start;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform ease-in-out 300ms;
        filter: blur(0);
        background-color: rgb(25, 135, 84);
    }

    .nav > ul.visible {
        transform: scaleX(100%);
    }

    .nav > ul > li {
        height: 70px;
        width: 100%;
        padding-inline: 10px;
        display: flex;
        align-items: center;
    }

    .nav > ul li:hover > a span {
        background-size: 0 1px;
    }

    .nav > ul li > a span:hover {
        background-size: 100% 1px;
    }

    .nav > ul > li:first-child {
        display: flex;
        justify-content: space-between;
        color: rgb(255, 255, 255);
        font-size: 20px;
    }

    .nav > ul > li:first-child i {
        cursor: pointer;
    }

    .conteiner-image {
        display: flex;
        align-items: center;
    }

    .nav-image {
        width: 50px;
    }

    .conteiner-right {
        width: fit-content;
        font-size: 20px;
        gap: 20px;
    }

    .conteiner-right.disapear {
        display: none;
    }

    .conteiner-right > #bars {
        display: block;
    }

    /*footer*/

    .footer {
        flex-direction: column-reverse;
        gap: 10px;
        padding-inline: 40px;
        padding-block: 20px;
    }

    .footerderecha {
        width: 100%;
    }

    .footerizquierda {
        width: 100%;
    }

    .informacionfooter {
        text-align: justify;
    }

    .redes {
        margin-inline: 40px;
    }

    /*index*/

    .contenedor-videos {
        grid-template-columns: 100%;
        padding-inline: 20px;
    }

    .contenedor-videos > a:hover {
        transform: none;
    }

    .bienvenida {
        flex-direction: column-reverse;
        padding-inline: 10px;
    }

    .bienvenida > div {
        gap: 20px;
        width: 100%;
        background-image: url(img/background2.png);
    }

    .imagen-bienvenida {
        width: 100%;
    }

    .titulo-bienvenida {
        padding-top: 20px;
    }

    .contenedor-countdown {
        padding-bottom: 20px;
        animation-range: entry 20vh cover 50vh;
        justify-content: space-between;
    }

    .contenedor-tarjetas {
        padding-inline: 0;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .contenedor-tarjetas > .tarjeta {
        font-size: 30px;
        background-position: center;
        width: 90%;
        transform: none;
        text-align: left;
        font-family: "Lilita One", sans-serif;
        font-weight: 200;
        font-style: normal;
    }

    .infocole {
        padding-inline: 20px;
    }

    /*taller*/

    .hero-title {
        padding-inline: 40px;
    }

    .main {
        display: block;
    }

    .barra-lateral {
        margin-inline: 20px;
        max-width: none;
    }

    .barra-lateral > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .barra-lateral li {
        width: 45%;
        display: flex;
        align-items: center;
        height: 80px;
        list-style: none;
        padding-inline-start: 0;
        padding-inline: 10px;
        padding-block: 0;
    }

    .bienvenida-taller {
        flex-direction: column-reverse;
        padding-inline: 20px;
        margin-top: 30px;
    }

    .bienvenida-taller > div {
        padding-block: 40px;
    }

    .imagen-bienvenida-taller {
        width: 100%;
    }

    .proyectos-anteriores {
        margin-left: 0;
        margin-inline: 20px;
    }

    .contenedor-carrusel-taller {
        margin-left: 0;
        margin-inline: 20px;
    }

    .item-ctaller > img {
        height: 500px;
        object-fit: cover;
    }

    .contenedor-videos-especialidad {
        grid-template-columns: 100%;
    }

    .contenedor-videos-especialidad > a {
        width: 100%;
    }

    .contenedor-videos-especialidad > a:hover {
        transform: none;
    }

    .contenedor-videos-especialidad > a:first-child {
        margin-top: 30px;
    }

    .contenedor-videos-especialidad > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .contenedor-videos-especialidad > div > img {
        margin-top: 40px;
        width: 70%;
    }

    /*metalmecanica*/

    .hero-title.metalmecanica {
        font-size: 30px;
    }

    /*proyecto*/

    .conteiner-video {
        flex-wrap: wrap;
    }

    .conteiner-video > iframe {
        width: 100%;
        height: 250px;
    }

    .informacionproyecto {
        width: 100%;
        align-items: start;
        margin-top: 10px;
    }

    .informacionproyecto > div {
        align-items: start;
    }

    .descripcionproyecto {
        flex-direction: column-reverse;
        padding-inline: 20px;
    }

    .descripcionproyecto > div {
        background-image: url(img/background2.png);
        width: 100%;
        padding: 30px;
    }

    .descripcionproyecto > .imagen-descripcion {
        width: 100%;
    }

    .imagen-bienvenida-taller.tecnologia {
        width: 100%;
    }

}

@media (max-width: 500px) {
    .item1 {
        background-position: center;
    }

    .item3 {
        background-position: -250px 0;
    }

}

@media (max-width: 400px) {
    .contenedor-countdown > div > p {
        font-size: small;
    }
}

/*animaciones*/

@keyframes nav-animation {

    to {
        background-size: 100% 100%;
    }
}

@keyframes fade {
    
    to {
        opacity: 1;
    }

}