:root{

    --primario: #ff1207;

    --primarioOscuro: #c00a00;

    --secundario: #095375;

    --secundarioClaro: #00A8D9;

}



/* Global */

body{

    color: white;

    background-color: black;

    font-family: 'Open Sans', sans-serif !important;

    /*

    background-image: url('../img/characters/templario.png');

    background-position: center;

    background-size: cover;

  

    background-attachment: fixed;

    background-position: center;

    background-size: cover;*/

}



.bg-primary{

    background-color: black !important;

}



a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus{

    background-color:  rgba(255,255,255,0.1) !important;

}



.bg-claro{

    background-color: rgba(255,255,255,0.1) !important;

}



.bg-claro-gradient{

    background: linear-gradient( rgba(255,255,255,0.1), 60%, black);

}



.bg-alt{

    /*background-color: #D0BF8B;*/

    background: rgb(235,227,218);

    background: radial-gradient(circle, rgba(235,227,218,1) 16%, rgba(201,185,135,1) 100%);

}



.texto-cartel{

    color: #A17757;

    font-weight: 500;

}





.bg-rojo{

    background-color: var(--primario);

}



.bg-rojo-gradiente{

    background: rgb(255,109,101);

    background: linear-gradient(90deg, rgba(255,109,101,1) 0%, rgba(200,67,40,1) 70%);

}



.sombra-rojo{

    -webkit-box-shadow: -3px 3px 1px 1px #C00A00; 

    box-shadow: -3px 3px 1px 1px #C00A00;

}



.bg-rojoOscuro{

    background-color: var(--primarioOscuro);

}



.bg-azul{

    background-color: var(--secundario);

}



.bg-azul-gradiente{

    background: rgb(134,196,198);

    background: linear-gradient(90deg, rgba(134,196,198,1) 0%, rgba(58,188,191,1) 70%);

}



.sombra-azul{

    -webkit-box-shadow: -3px 3px 1px 1px #073e57; 

    box-shadow: -3px 3px 1px 1px #073e57;

}



.titulos{

    color: white;

    font-family: 'luchitapayol', sans-serif;

    text-align: center;

    letter-spacing: 2px;

}



.titulos h2{

    background-color: var(--primario);

    border-radius: 2rem;

    font-size: 1.3rem;

}



.titulos span{

    border-bottom: 3px solid white;

    border-radius: 3px;

    width: 50px;

    margin: 3px auto;

    display: block;

}





@media only screen and (min-width: 768px){

    .titulos{

        letter-spacing: 10px;

    }



    .titulos h2{

        font-size: 1.8rem;

    }

}



.text-primary{

    color: var(--primario) !important;

}



.text-secondary{

    color: #0082b3 !important;

    /*color: var(--secundario) !important;*/

}



.boton{

    background-color: var(--secundario) !important;

    color: white !important;

}



.boton-spotify{

    background-color: #1DB954 !important;

    color: white !important;

}



.boton-spotify:hover,

.boton-spotify:active{

    background-color: #1ED760 !important;

}



.boton:hover,

.boton:active{

    background-color: var(--primarioOscuro) !important;

}



/*Header*/



.enlace-header{

    border-bottom: 1px solid white;

    font-size: 1.2rem;

    letter-spacing: 3px;

    font-family: 'luchitapayol', sans-serif;



}



@media only screen and (min-width: 768px){

    .enlace-header{

        border: none;

    }

}



.enlace-header:hover,

.enlace-header:active,

.activo{

    color: var(--primario) !important;

}



.barra{

    box-shadow: 0 2px 5px 0 rgba(136, 136, 136, 0.2), 0 2px 10px 0 rgba(141, 141, 141, 0.19);

}



.linea-sombra{

    box-shadow: 0 2px 5px 0 rgba(136, 136, 136, 0.2), 0 2px 10px 0 rgba(141, 141, 141, 0.19);

    display: block;

    border: 1px solid rgba(255,255,255,0.5);

}



/*Hero*/



.hero{

    background-position: center;

    background-size: cover;

    border: none;

}



.redes-sociales{

    text-align: center;

    padding-top: 1rem;

}

  

.redes-sociales a{

    background-color: var(--primario);

    color: white;

    display: inline-block;

    border-radius: 30px;

    height: 50px;

    width: 50px;

    font-size: 2rem !important;

    text-align: center;

    transition: all 0.2s ease-in-out;

}



.redes-sociales a:hover, .redes-sociales a:active{

    background-color: var(--secundarioClaro);

}



.icono-stream{

    position: absolute;

}



.icono-stream p{

    position: absolute;

    margin-bottom: 5rem;

}



.icono-stream i{

    font-size: 4rem !important;

    color: rgba(255,255,255,0.5);

    position: relative;

}



@media only screen and (min-width: 768px){

    .icono-stream i{

        font-size: 9rem !important;

    }

    .icono-stream p{

        margin-bottom: 12rem;

        font-size: 1.8rem;

    }

}



/*Logo*/



.contenedor-logo{

    position: relative;

    margin-top: 6rem;

}



.logo{

    color: var(--primario) !important;

    font-family: 'luchitapayol', sans-serif;

    line-height: 0.7;

    letter-spacing: 3px;

}



.logo-hero{

    font-size: 4rem !important;

}



.logo span{

    color: var(--secundario) !important;

    font-family: 'Equinox', sans-serif;

}



.slogan{

    font-size: 1.3rem;

    font-family: 'Equinox', sans-serif;

    color: var(--secundarioClaro);

}



@media only screen and (min-width: 768px){



    .contenedor-logo{

        margin-top: 12rem;

    }

    .logo{

        line-height: 0.7;

    }



    .logo-hero{

        font-size: 8rem !important;

    }



    .slogan{

        font-size: 2.6rem;

    }

}



/*Index*/



.icono-seccion{

    height: 80px;

    width: 80px;

    border: 5px solid var(--secundario);

    border-radius: 5rem;

    transition: all 0.2s ease-in-out;

    color: var(--secundarioClaro);

}



.icono-seccion i{

    font-size: 1.5rem;

}



@media only screen and (min-width: 768px){

    .icono-seccion{

        height: 140px;

        width: 140px;

    }

    .icono-seccion i{

        font-size: 3rem;

    }

}



.icono-seccion:hover,

.icono-seccion:active,

.programa-lista:hover img{

   border-color: var(--primario);

   color: var(--secundario);

   cursor: pointer;



   border-radius: 50%;

    -webkit-box-shadow: -1px 0px 20px -7px rgb(201, 245, 5);

    -moz-box-shadow: -1px 0px 20px -7px rgb(201, 245, 5);

    box-shadow: -1px 0px 20px -7px rgb(201, 245, 5);

}



/*Programas*/



.programa-lista img{

    transition: all 0.2s ease-in-out;

}



.img-programa{

    height: 200px;

    width: 200px;

}



.locutor-programa{

    height: 150px;

    width: 150px;

    background-size: cover;

    background-position: center;

}



@media only screen and (min-width: 768px){

    .img-programa{

        height: 150px;

        width: 150px;

    }

}



.lista-grabaciones{

    list-style-type: none;

    padding: 0;

    max-height: 380px;

    overflow: scroll;

}





.lista-grabaciones {

    scrollbar-width: thin;

    scrollbar-color: var(--secundario) transparent;

}

  /* Works on Chrome/Edge/Safari */

.lista-grabaciones::-webkit-scrollbar {

    width: 12px;

}

.lista-grabaciones::-webkit-scrollbar-track {

    background: transparent;

}

.lista-grabaciones::-webkit-scrollbar-thumb {

    background-color: var(--secundario);

    border-radius: 20px;

    border: 3px solid transparent;

}



/*Audio Controls*/



.audio-transport button{

    height: 60px;

    width: 60px;

}



.boton-audio{

    font-size: 2rem;

}



.container-progress{

    height: 4px;

    background-color: rgba(255,255,255,0.1);

}



.bar-progress{

    background-color: var(--primarioOscuro);

    height: 4px;

}



.container-track{

    margin-top: -14px;

}



.audio-cursor{

    height: 25px;

    -webkit-appearance: none;

    width: 100%;

}

.audio-cursor:focus{

    outline: none;

}

.audio-cursor::-webkit-slider-runnable-track {

    width: 100%;

    height: 5px;

    cursor: pointer;

    transition: all 0.2s ease-in;

    box-shadow: 0px 0px 0px #000000;

    background: transparent;

    border-radius: 1px;

    border: 0px solid #000000;

}

.audio-cursor::-webkit-slider-thumb {

    box-shadow: 0px 0px 0px #000000;

    border: 1px solid transparent;

    height: 18px;

    width: 18px;

    border-radius: 25px;

    background: var(--primario);

    cursor: pointer;

    -webkit-appearance: none;

}

.audio-cursor:focus::-webkit-slider-runnable-track {

    background: transparent;

}

.audio-cursor::-moz-range-track {

    width: 100%;

    height: 5px;

    cursor: pointer;

    transition: all 0.2s ease-in;

    box-shadow: 0px 0px 0px #000000;

    background: transparent;

    color: green;

    border-radius: 1px;

    border: 0px solid #000000;

}

.audio-cursor::-moz-range-thumb {

    box-shadow: 0px 0px 0px #000000;

    border: 1px solid transparent;

    height: 18px;

    width: 18px;

    border-radius: 25px;

    background: var(--primario);

    cursor: pointer;

}

.audio-cursor::-ms-track {

    width: 100%;

    height: 5px;

    cursor: pointer;

    transition: all 0.2s ease-in;

    background: transparent;

    border-color: transparent;

    color: transparent;

}

.audio-cursor::-ms-fill-lower {

    background: transparent;

    border: 0px solid #000000;

    border-radius: 2px;

    box-shadow: 0px 0px 0px #000000;

}

.audio-cursor::-ms-fill-upper {

    background: transparent;

    border: 0px solid #000000;

    border-radius: 2px;

    box-shadow: 0px 0px 0px #000000;

}

.audio-cursor::-ms-thumb {

    margin-top: 1px;

    box-shadow: 0px 0px 0px #000000;

    border: 1px solid transparent;

    height: 18px;

    width: 18px;

    border-radius: 25px;

    background: var(--primario);

    cursor: pointer;

}

.audio-cursor:focus::-ms-fill-lower {

    background: transparent;

}

.audio-cursor:focus::-ms-fill-upper {

    background: transparent;

}



.track-activo{

    background-color: var(--secundario) !important;

}



.audio-track:hover{

    cursor: pointer;

}



/*Eventos*/



.evento-principal{

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    max-height: 400px;

}



.evento-principal:hover, .evento-secundario:hover{

    cursor: pointer;

}



.evento-secundario{

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

}



.evento-pasado{

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    height: 180px;

}



.evento-pasado-text{

    color: white;

    transition: all ease-in-out 0.3s;

}



.evento-pasado-text:hover{

    color: var(--primarioOscuro);

}



@media only screen and (min-width: 768px){



    .evento-principal{

        height: 400px;

    }   

    .evento-secundario{

        height: 250px;

    }

    .evento-pasado{

        height: 250px;

    }

}



/*cartel*/



.fuente-cartel{

    font-family: 'luchitapayol', sans-serif;

}



.fuente-anuncios{

    font-family: 'Equinox', sans-serif;;

}



.sombra-cartel{

    /*-webkit-box-shadow: inset 3px 10px 30px -7px rgb(43, 43, 43);

    -moz-box-shadow: inset 3px 10px 30px -7px rgb(43, 43, 43);

    box-shadow: inset 3px 10px 30px -7px rgb(43, 43, 43);*/



    -webkit-box-shadow: 0px 0px 8px 0px rgba(255,255,255,1);

    -moz-box-shadow: 0px 0px 8px 0px rgba(255,255,255,1);

    box-shadow: 0px 0px 8px 0px rgba(255,255,255,1);

}



.evento-cartel{

    transition: all 0.3s ease-in-out;

}



.evento-cartel:hover{

    color: var(--secundarioClaro);

    cursor: pointer;

}



/*Lista cartel*/



.lista-cartel{

    list-style-type: none;

    padding: 0;

    max-height: 300px;

    overflow: scroll;

}





.lista-cartel {

    scrollbar-width: thin;

    scrollbar-color: var(--primarioOscuro) transparent;

}

  /* Works on Chrome/Edge/Safari */

.lista-cartel::-webkit-scrollbar {

    width: 12px;

}

.lista-cartel::-webkit-scrollbar-track {

    background: transparent;

}

.lista-cartel::-webkit-scrollbar-thumb {

    background-color: var(--secundario);

    border-radius: 20px;

    border: 3px solid transparent;

}



/*Evento*/



.autor p {

    font-size: 0.8rem;

}





/*Cuadrilla*/



table td, table th{

    border-top: none !important;

    

}



table thead th{

    border: none !important;

}



.contenedor-cartel{

    max-height: 50vh;

}



.contenedor-cartel {

    scrollbar-width: thin;

    scrollbar-color: var(--primarioOscuro) transparent;

}

  /* Works on Chrome/Edge/Safari */

.contenedor-cartel::-webkit-scrollbar {

    width: 12px;

}

.contenedor-cartel::-webkit-scrollbar-track {

    background: transparent;

}

.contenedor-cartel::-webkit-scrollbar-thumb {

    background-color: var(--secundario);

    border-radius: 20px;

    border: 3px solid transparent;

}





/*Aliados*/


@media only screen and (min-width: 768px){

    .aliados .carousel-item .row{

        height: 300px;

    }

}


.aliados .carousel-inner,

.otrosProgramas .carousel-inner{

    width: 80%;

    text-align: center;

    margin: 0 auto;

}



.carousel-control-prev,

.carousel-control-next{

    width: 10%;

}



/*Contacto*/



.mapa{

    height: 350px;

    background-color: #cccccc;

}



.ubicacion .direccion{

    letter-spacing: 2px;

}





/*Sociales*/



.enlaces-footer a{

    color: white;

}



.enlaces-footer a:hover{

    color: var(--secundarioClaro) !important;

}