:root{
    --principal: #222222;
    --secundario: #2866c9;
    --negro: black;
    --blanco: white;
    --fuente1: 'Krub';
    --fuente2: 'Poppins';
    --fuente3: 'DynaPuff';
    --fuente4: 'Montserrat';
    --fuente5: 'Anton';
}


.carousel__contenedor{
    position: relative;
    padding: 7rem;
    margin-top: 5rem;
}

.carousel{
    display: unset !important;
}

.flecha-previo,
.carousel__siguiente{
    position: absolute;
    display: block;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: none;
    top: calc(55% - 35px);
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    background: none;
    color: black;
    opacity: 58%;
}

.flecha-previo:hover,
.carousel__siguiente:hover{
    opacity: 100%;
}

.flecha-previo{/*Flechita - atrás*/
    left: 0rem;
    font-size: 2.5rem;
    color: rgb(7, 7, 7) !important;
    background-color: #ffffffb2 !important;
    border-radius: 1rem 0rem 0rem 1rem !important;
}

.carousel__siguiente{/*Flechita siguiente*/
    right: 8%;
    font-size: 2.5rem;
    color: rgb(7, 7, 7) !important;
    background-color: #ffffff9a !important;
    border-radius: 0rem 1rem 1rem 0rem !important;
}

.carousel__lista{/*Conjunto completo de los elementos*/
    margin: 2rem 2rem 1rem 2rem;
}

.glider-track{
    padding: 2rem 0rem;/*Aumenta el grosor del contenedor de elementos*/
}

.carousel__link--show{
    text-decoration: none;
    margin: 0rem 0.5rem;/*Separación entre cada elemento*/
}

.carousel__elemento{/*Diseño de elementos de carrusel*/
    margin: 0rem 0.4rem;
    text-align: center;
    padding: 4rem 0.5rem 0rem 0.5rem;
    background-color: var(--blanco);
    border-radius: 2rem;
    width: 100%;
    transform: scale(0.92);
    transition: all ease 0.3s;
}

#ceb1{/*Terroreciclado*/
    background-image: linear-gradient(to top, #657c67 0%, white 145%);
}
#ceb2{/*Donando Sonrisas*/
    background-image: linear-gradient(to top, #ffdb9a 0%, white 145%);
}
#ceb3{/*LDM*/
    background-image: linear-gradient(to top, #0400ff 0%, white 145%);
}

#ceb4{/*Donando Sonrisas 2*/
    background-image: linear-gradient(to top, #ffdb9a 0%, white 145%);
}

#ceb5{/*Reforestación*/
    background-image: linear-gradient(to top, #319b00 0%, white 145%);
}

.carousel__elemento:hover{
    transform: scale(1.00000002);/*Agrande elemento al pasar el mouse*/
}

.carousel__elemento--imagen{/*Diseño de imagen de carrusel*/
    width: 25rem;
    height: 25rem;
    border-radius: 2rem 2rem 2rem 2rem;
}

.carousel__elemento--nombre{/*Diseño del nombre del show*/
    margin: 1rem auto 0rem auto;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 2rem;
    /*padding: 1rem;*/
    color: var(--blanco);
    /*color: var(--negro);*/
}

/*.logo_show--carousel{
    width: 18rem;
    height: 8rem;
}*/

.div__masinfo{/*Div de mas información*/
    display: flex;
    justify-content: center;
    margin: 1.5rem -0.5rem 0rem -0.5rem;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 0rem 0rem 2rem 2rem;
}

#diveb1{/*Color de fondo div más información TERRORECICLADO*/
    background-color: rgb(69, 87, 70);
}

#diveb2{/*Color de fondo div más información Donando Sonrisas*/
    background-color: #7e6230;
}

#diveb3{/*Color de fondo div más información LDM*/
    background-color: #0400ff;
}

#diveb4{/*Color de fondo div más información Donando Sonrisas*/
    background-color: #7e6230;
}

#diveb5{/*Color de fondo div más información LDM*/
    background-color: #1a8300;
}


.i-icon{/*ícono i más información*/
    width: 1.3rem;
    height: 1.3rem;
    margin: 0.8rem 0.5rem 0rem 0rem;
    color: var(--blanco);
}

.mas-informacion{/*Texto de más información*/
    color: var(--blanco);
    margin: 0.3rem 0rem 0rem 0.5rem;
    font-family: var(--fuente2);
    font-size: 1.5rem;
    font-weight: 200;
}

.carousel__indicadores .glider-dot{/*Indicadores de parte de abajo*/
    background-color: rgb(1, 179, 185);
    margin: -3rem 0.5rem 4rem 0.5rem;
    opacity: .2;
    border-radius: 50;
}

.carousel__indicadores .glider-dot:hover{
    opacity: .5;
}

.carousel__indicadores .glider-dot.active{
    opacity: 1;
}

@media(min-width: 0px) and (max-width: 550px){
    .carousel__contenedor{
        width: 100%;
        padding: 4rem 3rem 4rem 1rem;
        margin: 0rem auto;
    }

    .flecha-previo{/*Flechita - atrás*/
        left: 3rem;
    }

    .carousel__videos--siguiente{/*Flechita siguiente*/
        right: 3rem;
    }

    .carousel__videos__lista{/*Conjunto completo de los elementos*/
        margin: 0rem 0.2rem;
    }

    .carousel__bordes{/*Bordes del carousel de Música*/
        width: 100%;
        margin: 0.5rem 0.2rem;
        border-radius: 2rem;
    }
    
    .borders2{
        width: 100%;
        margin: -0.7rem 2rem -0.6rem -0.7rem;
    }

    .carousel__videos__elemento{/*Diseño de elementos de carrusel*/
        width: 100%;
    }
}


/*Carousel Hero*/

.carousel__hero__contenedor{
    position: relative;
    padding: 0rem;
    max-width: 145rem;
    margin: 0rem auto;
}

.carousel__hero--flechaprevio,
.carousel__hero--siguiente{
    position: absolute;
    display: block;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: none;
    top: calc(55% - 35px);
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    background: none;
    color: black;
    opacity: 58%;
}

.carousel__hero--flechaprevio:hover,
.carousel__hero--siguiente:hover{
    opacity: 100%;
}

.carousel__hero--flechaprevio{/*Flechita - atrás*/
    left: 2rem;
    font-size: 4rem;
    color: rgb(236, 236, 236);
}

.carousel__hero--siguiente{/*Flechita siguiente*/
    right: 2rem;
    font-size: 4rem;
    color: rgb(255, 255, 255);
}

.carousel__hero__lista{/*Conjunto completo de los elementos*/
    margin: 0rem 0rem 1rem 0rem;
}

.glider-track{
    padding: 5rem 0rem;/*Aumenta el grosor del contenedor de elementos*/
}

.carousel__hero__elemento{/*Diseño de elementos de carrusel*/
    text-align: center;
    background-color: var(--blanco);
    border-radius: 2rem;
    margin-top: 2rem;
    position: relative;
}

.carousel__hero__elemento--imagen{/*Diseño de imagen de carrusel*/
    width: 100%;
    height: 58.8rem;
}

.carousel__hero--informacion{/*Div de mas información*/
    display: flex;
    justify-content: center;
    margin: 1rem -0.5rem 0rem -0.5rem;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 0rem 0rem 2rem 2rem;
}

.carousel__hero__informacion--informaciontxt{/*Texto de más información*/
    color: var(--negro);
    margin: -1.3rem 0rem -3rem 0.5rem;
    font-family: 'Comforta';
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
}

.carousel__hero__indicadores .glider-dot{/*Indicadores de parte de abajo*/
    background-color: rgb(255, 255, 255);
    margin: -12rem 0.5rem -5rem 0.5rem;
    opacity: .2;
    border-radius: 50;
    z-index: 10;
    width: 1.5rem;
    height: 1.5rem;
}

.carousel__hero__indicadores .glider-dot:hover{
    opacity: .5;
}

.carousel__hero__indicadores .glider-dot.active{
    opacity: 1;
}

@media(min-width: 0px) and (max-width: 650px){
    .carousel__hero__elemento--imagen{/*Diseño de imagen de carrusel*/
        width: 100%;
        height: 28.8rem;
    }
}

@media(min-width: 651px) and (max-width: 768px) {
    .carousel__videos__contenedor{
        width: 100%;
    }
    
    .carousel__videos__lista{/*Conjunto completo de los elementos*/
        margin: 0rem 0rem 1rem 2rem;
    }
    
    .carousel__bordes{
        width: 70%;
        margin: 0.5rem 2rem;
        border-radius: 2rem;
    }
    
    .borders2{
        width: 100%;
        margin: -0.7rem -2rem -0.6rem -0.7rem;
    }
    
    .carousel__videos__elemento{/*Diseño de elementos de carrusel*/
        width: 97%;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .carousel__videos__contenedor{
        width: 100%;
    }
    
    .carousel__videos__lista{/*Conjunto completo de los elementos*/
        margin: 0rem 0rem 1rem 0.7rem;
    }
    
    .carousel__bordes{
        width: 100%;
        margin: 0.5rem 2rem;
        border-radius: 2rem;
    }
    
    .borders2{
        width: 100%;
        margin: -0.7rem -2rem -0.6rem -0.7rem;
    }
    
    .carousel__videos__elemento{/*Diseño de elementos de carrusel*/
        width: 97%;
    }
}

/*Carousel fotos*/

.carousel__fotos__contenedor{

    position: relative;
    padding: 2rem;
    margin-top: 2rem;
}

.carousel__fotos__flecha-previo,
.carousel__fotos__siguiente{
    position: absolute;
    display: block;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: none;
    top: calc(55% - 35px);
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    background: none;
    color: black;
    opacity: 58%;
}

.carousel__fotos__flecha-previo:hover,
.carousel__fotos__siguiente:hover{
    opacity: 100%;
}

.carousel__fotos__flecha-previo{/*Flechita - atrás*/
    left: 4rem;
    top: 18rem;
    font-size: 2.5rem;
    color: rgb(8, 8, 8);
    background-color: rgb(211, 211, 211);
    height: 7rem;
    width: 4rem;
    border-radius: 1rem 0rem 0rem 1rem
}

.carousel__fotos__siguiente{/*Flechita siguiente*/
    right: 4.5rem;
    top: 18rem;
    font-size: 2.5rem;
    color: rgb(0, 0, 0);
    background-color: rgb(214, 214, 214);
    height: 7rem;
    width: 4rem;
    border-radius: 0rem 1rem 1rem 0rem;
}

.carousel__fotos__lista{/*Conjunto completo de los elementos*/
    margin: 0 auto;
    width: 90%;
}

.glider-track{
    padding: 2rem 2rem;/*Aumenta el grosor del contenedor de elementos*/
}

.carousel__link--show{
    text-decoration: none;
    margin: 0rem 0.5rem;/*Separación entre cada elemento*/
}

.carousel__fotos__elemento{/*Diseño de elementos de carrusel*/
    margin: 0rem 1rem;
    text-align: center;
    width: 10rem;
    height: 15rem;
    background-color: var(--blanco);
    border-radius: 1rem;
    transform: scale(0.9);
}

.videoo{
    width: 100%;
    height: 100%;
}

.carousel__fotos__elemento:hover{
    transform: scale(0.93);
    transition: all 0.5s ease;
}

.carousel__fotos__elemento--imagen{/*Diseño de imagen de carrusel*/
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}

.carousel__fotos__indicadores .glider-dot{/*Indicadores de parte de abajo*/
    background-color: rgb(36, 53, 197);
    margin: 2rem 0.2rem 0rem 0.2rem;
    opacity: .2;
    border-radius: 50;
}

.carousel__fotos__indicadores .glider-dot:hover{
    opacity: .5;
}

.carousel__fotos__indicadores .glider-dot.active{
    opacity: 1;
}


/*Carousel Fotos causas*/


.carousel__fotoscausa__contenedor{
    position: relative;
    padding: 2rem;
    margin-top: 2rem;
}

.carousel__fotoscausa__flecha-previo,
.carousel__fotoscausa__siguiente{
    position: absolute;
    display: block;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: none;
    top: calc(55% - 35px);
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    background: none;
    color: black;
    opacity: 58%;
}

.carousel__fotoscausa__flecha-previo:hover,
.carousel__fotoscausa__siguiente:hover{
    opacity: 100%;
}

.carousel__fotoscausa__flecha-previo{/*Flechita - atrás*/
    left: 4rem;
    top: 18rem;
    font-size: 2.5rem;
    color: rgb(252, 51, 51);
    background-color: rgb(211, 211, 211);
    height: 7rem;
    width: 4rem;
}

.carousel__fotoscausa__siguiente{/*Flechita siguiente*/
    right: 4.5rem;
    top: 18rem;
    font-size: 2.5rem;
    color: rgb(255, 0, 0);
    background-color: rgb(214, 214, 214);
    height: 7rem;
    width: 4rem;
}

.carousel__fotoscausa__lista{/*Conjunto completo de los elementos*/
    margin: 0 auto;
    width: 90%;
}

.glider-track{
    padding: 2rem 2rem;/*Aumenta el grosor del contenedor de elementos*/
}

.carousel__link--show{
    text-decoration: none;
    margin: 0rem 0.5rem;/*Separación entre cada elemento*/
}

.carousel__fotoscausa__elemento{/*Diseño de elementos de carrusel*/
    margin: 0rem auto;
    text-align: center;
    width: 5rem;
    height: 10rem;
    background-color: var(--blanco);
    border-radius: 1rem;
    transform: scale(0.9);
}

.videoo{
    width: 100%;
    height: 100%;
}

.carousel__fotoscausa__elemento:hover{
    transform: scale(0.93);
    transition: all 0.5s ease;
}

.carousel__fotoscausa__elemento--imagen{/*Diseño de imagen de carrusel*/
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}

.carousel__fotoscausa__indicadores .glider-dot{/*Indicadores de parte de abajo*/
    background-color: rgb(253, 30, 0);
    margin: 2rem 0.5rem 4rem 0.5rem;
    opacity: .2;
    border-radius: 50;
}

.carousel__fotoscausa__indicadores .glider-dot:hover{
    opacity: .5;
}

.carousel__fotoscausa__indicadores .glider-dot.active{
    opacity: 1;
}

/*Carousel Donaciones*/

.carousel__dona__contenedor{
    position: relative;
    padding: 0rem;
}


.flecha-previo,  /*MODIFICACION*/
.flecha-previo1,
.flecha-previo2,
.carousel__dona__siguiente, 
.carousel__dona1__siguiente,
.carousel__dona2__siguiente{
    position: absolute;
    display: block;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: none;
    top: calc(55% - 35px);
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    background: none;
    color: black;
    opacity: 58%;
}

.flecha-previo:hover, /*MODIFICACION*/
.carousel__dona__siguiente:hover,
.flecha-previo1:hover,
.carousel__dona1__siguiente:hover,
.flecha-previo2:hover,
.carousel__dona2__siguiente:hover{
    opacity: 100%;
}

.flecha-previo{/*Flechita - atrás*/
    left: 9rem;
    font-size: 2.5rem;
    color: rgb(11, 0, 75);
    background-color: #ffffff;
    border-radius: 0rem 0.5rem 0.5rem 0rem;
} 

.flecha-previo1, /*MODIFICACION*/
.flecha-previo2{
    left: 0rem;
    font-size: 2.5rem;
    color: rgb(11, 0, 75);
    background-color: #ffffff;
    border-radius: 0rem 0.5rem 0.5rem 0rem;
}

.carousel__dona__siguiente,
.carousel__dona1__siguiente,   /*MODIFICACION*/
.carousel__dona2__siguiente{/*Flechita siguiente*/ 
    right: 0rem;
    font-size: 2.5rem;
    color: rgb(11, 0, 75);
    background-color: #ffffff;
    border-radius: .5rem 0rem 0rem .5rem;
}

.carousel__dona__lista{/*Conjunto completo de los elementos*/
    margin: 0rem;
}

.glider-track{
    padding: 0rem 0rem;/*Aumenta el grosor del contenedor de elementos*/
}

.carousel__dona__elemento{/*Diseño de elementos de carrusel*/
    border-radius: 2rem;
    width: 100%;
}

.carousel__dona__elemento--imagen{/*Diseño de imagen de carrusel*/
    width: 100%;
    height: 100%;
    border-radius: 2rem 2rem 0rem 0rem;
}

.carousel__dona__indicadores .glider-dot{/*Indicadores de parte de abajo*/
    background-color: rgb(1, 4, 185);
    margin: -3rem 0.5rem 4rem 0.5rem;
    opacity: .2;
    border-radius: 50;
}

.carousel__dona__indicadores .glider-dot:hover{
    opacity: .5;
}

.carousel__dona__indicadores .glider-dot.active{
    opacity: .5;
}

@media(min-width: 0px) and (max-width: 550px){
    .carousel__dona__contenedor{
        width: 100%;
        padding: 4rem 3rem 4rem 1rem;
        margin: 0rem auto;
    }

    .flecha-previo{/*Flechita - atrás*/
        left: 3rem;
    }

    .carousel__dona__videos--siguiente{/*Flechita siguiente*/
        right: -1rem;
    }

    .carousel__dona__videos__lista{/*Conjunto completo de los elementos*/
        margin: 0rem 0.2rem;
    }

    .carousel__dona__bordes{/*Bordes del carousel__dona de Música*/
        width: 100%;
        margin: 0.5rem 0.2rem;
        border-radius: 2rem;
    }
    
    .borders2{
        width: 100%;
        margin: -0.7rem 2rem -0.6rem -0.7rem;
    }

    .carousel__dona__videos__elemento{/*Diseño de elementos de carrusel*/
        width: 100%;
    }
}

/*CAROUSEL DE GANADORES*/

.fotosgan{
    padding: 5rem;
}

.carousel__fotos2__contenedor{

    position: relative;
    padding: 10rem;
    margin-top: -5rem;
}

.carousel__fotos2__flecha-previo,
.carousel__fotos2__siguiente{
    position: absolute;
    display: block;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: none;
    top: calc(55% - 35px);
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    background: none;
    color: black;
    opacity: 58%;
}

.carousel__fotos2__flecha-previo:hover,
.carousel__fotos2__siguiente:hover{
    opacity: 100%;
}

.carousel__fotos2__flecha-previo{/*Flechita - atrás*/
    left: 4rem;
    top: 35rem;
    font-size: 2.5rem;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 173, 165);
    height: 7rem;
    width: 4rem;
    border-radius: 1rem 0rem 0rem 1rem
}

.carousel__fotos2__siguiente{/*Flechita siguiente*/
    right: 4.5rem;
    top: 35rem;
    font-size: 2.5rem;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 173, 165);
    height: 7rem;
    width: 4rem;
    border-radius: 0rem 1rem 1rem 0rem;
}

.carousel__fotos2__lista{/*Conjunto completo de los elementos*/
    margin: 0 auto;
    width: 100%;
}

.glider-track{
    padding: 1rem;/*Aumenta el grosor del contenedor de elementos*/
}

.carousel__link--show{
    text-decoration: none;
    margin: 0rem 0.5rem;/*Separación entre cada elemento*/
}

.carousel__fotos2__elemento{/*Diseño de elementos de carrusel*/
    margin: 0rem 1rem;
    text-align: center;
    background-color: var(--blanco);
    border-radius: 2rem;
}

.carousel__fotos2__elemento--imagen{/*Diseño de imagen de carrusel*/
    width: 100%;
    height: 100%;
    border-radius: 2rem;
}

.carousel__fotos2__indicadores .glider-dot{/*Indicadores de parte de abajo*/
    background-color: rgb(36, 53, 197);
    margin: -2rem 0.2rem 3rem 0.2rem;
    opacity: .2;
    border-radius: 50;
}

.carousel__fotos2__indicadores .glider-dot:hover{
    opacity: .5;
}

.carousel__fotos2__indicadores .glider-dot.active{
    opacity: 1;
}


@media(min-width: 0px) and (max-width: 550px){
    .carousel__fotos2__contenedor{

        position: relative;
        padding: 0rem;
        margin-top: 2.5rem;
    }

    .carousel__fotos2__flecha-previo{/*Flechita - atrás*/
        left: -3rem;
        top: 5rem;
        transform: scale(0.7);
    }

    .carousel__fotos2__siguiente{/*Flechita siguiente*/
        right: -3rem;
        top: 5rem;
        transform: scale(0.7);
    }

    .glider-track{
        padding: 0rem;/*Aumenta el grosor del contenedor de elementos*/
    }

    .carousel__fotos2__elemento{/*Diseño de elementos de carrusel*/
        margin: 0rem;
    }

    .carousel__fotos2__indicadores .glider-dot{/*Indicadores de parte de abajo*/
        background-color: rgb(36, 53, 197);
        margin: 3rem 0.2rem 2rem 0.2rem;
        opacity: .2;
        border-radius: 50;
    }
}