@font-face {
    font-family: "Calibri_Light";
    src: url("../fuentes/calibril.ttf");
}

@font-face {
    font-family: "Cardo";
    src: url('../fuentes/Cardo-Bold.ttf'), url('../fuentes/Cardo-Italic.ttf'), url('../fuentes/Cardo-Regular.ttf');
}

html,body{
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
}
.contenedor{
    width: 100%;
}
.pantalla{
    width: 100%;
    height: 225px;
    background-color: chartreuse;
    position:fixed;
    font-family: 'Calibri_Light';
    overflow: hidden;
    z-index: 2;
    /*box-shadow: 10px 1px 1px 1px #212e6c;*/
}

.pantalla_biblia{
    width: 100%;
    height: 225px;
    background-color: rgb(226, 193, 8);
    position:fixed;
    overflow: auto;
    z-index: 3;
    top: 0px;
    left: 0px;
    background-image : url(../img/img-noise-361x370.png);
}

#btn_fijar_pantalla{
    position: absolute;
    z-index: 9;
    
}

#biblia_live div{
    font-family: 'Cardo';
    font-size: 30px;
    text-align: center;
    /*filter: drop-shadow(1px 1px 1px black);*/
    text-shadow: 1px 1px 6px rgb(255, 255, 255);
    color: rgb(56, 56, 56);
    padding: 20px;
    /*background-color: #000e5c;*/
    background-image : url(../img/img-noise-361x370.png);
    border: 6px double rgb(116, 76, 2);
    display: none;
  }

  #biblia_live h1_{
    color:rgb(255, 153, 0);
  }

.pantalla_biblia div{
    background: none !important;
    font-size: 20px !important;
    border:none !important;
  }

.cont_cuentaatras{
    font-size: 100px;
    font-family: 'Calibri_Light';
    color: #fff;
    filter: drop-shadow(2px 2px 4px black);
}

.contenedor_barra{
    padding-top: 47px;
    padding-left: 73px;
    position: relative;
    line-height: normal;
    display: none;
    width: 1350px;
    overflow: hidden;
    height: 225px;
    /*filter: drop-shadow(2px 4px 6px black);*/
}

.cont_info_principal{
    position: relative;
    left:0px;
    z-index: 1;
    float: left;
}

.franja_principal{
    width: 1240px;
    height: 60px;
    /*background: rgb(30,38,99);
    background: linear-gradient(0deg, rgba(30,38,99,1) 0%, rgba(47,85,151,1) 50%, rgba(30,38,99,1) 100%);*/
    position: relative;
    color: white;
    overflow: hidden;
    padding-left: 194px;
}


.franja_principal txt{
    font-size: 44px;
    position: relative;
    float: left;
    white-space: nowrap;
    /*left: 194px;*/
    /*animation: marquee 5s linear infinite;*/
}

.cont_logo{
    width: 220px;
    position: absolute;
    z-index: 2;
    top: -60px;
    left: -39px;
    scale: 100%;
}

.cont_is_inferior{
    position: relative;
    float: left;
    width: 1240px;
}

.cont_info_secundaria{
    width: 774px;
    height: 43px;
    /*background-color: rgb(231, 230, 230);*/
    position: relative;
    padding-left: 195px;
    color:  rgb(30, 38, 99);
    font-size: 28px;
    font-weight: normal;
    border-radius: 0px 0px 109px 0px;
    /*box-sizing: unset;*/
    left:0px;
    overflow: hidden;
    float: left;
}

.cont_info_secundaria txt{
    white-space: nowrap;
    position: relative;
    display:inline-block;

    /*estilo para aplicar marquee
    padding-left: 100%;
    will-change: transform;
    animation: marquee_sec 7s linear infinite;
    */
}

.cont_reloj{
    color: #212e6c;
    background-color: #fbfbfb;
    position: absolute;
    z-index: 1;
    right: 2px;
    /* top: 96px; */
    font-size: 24px;
    font-weight: bold;
    width: 95px;
    text-align: center;
    /* opacity: 0.7; */
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}


.cont_redes_sociales{
    width: 770px;
    height: 35px;
    /*background-color: rgb(255, 255, 255);*/
    position: relative;
    left: 370px;
    float: left;
    scale: 1;
}

.cont_rrss{
    background-color: rgb(255, 255, 255);
    height: 100%;
    width: 100%;
    float: left;
    position: relative;
}

.ico_rrss{
    float: left;
    position: relative;
    bottom: 25px;
    left: -34px;
    width: 60px;
}

.ico_rrss img{
    width: 100%;
}

.txt_rrss{
    position: relative;
    float: left;
    font-size: 24px;
    /*color: #6f6f6f;*/
    right: 25px;
    width: 221px;
}

.cont_envivo{
    width: 100px;
    height: 100%;
    background-color: red;
    color: white;
    float: right;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    right: -100px;
    padding-top: 3px;
}


.ani_izq{
    animation: kf_izq 1.5s cubic-bezier(0.6, -0.04, 0.58, 1);
    animation-fill-mode: forwards;
}
.ani_der{
    animation: kf_der 1.5s cubic-bezier(0.6, -0.04, 0.58, 1);
    animation-fill-mode: forwards;
}

.brillo{
    position: absolute;
    top: 2px;
    width: 125px;
    height: 1px;
    background-color: #ffffffa6;
    z-index: 1;
    filter: blur(1px);
    animation: ani_brillo 2.5s cubic-bezier(0.6, -0.04, 0.58, 1) infinite;
}

.cont_brillo{
    height: 6px;
    position: absolute;
    overflow: hidden;
    width: 1240px;
}

.color_al_aire{
    /*animation: lista_al_aire 1.2s linear alternate-reverse infinite;*/
    background-color: lightcoral;
}

.color_al_aire:hover{
    background-color:rgb(243, 169, 169) !important; 
}

.color_tem_select{
    background-color: rgb(165, 236, 143);
}

.color_tem_select:hover{
    background-color: rgb(201, 253, 185) !important;
}

.fondo_login{
    background-image: url(../img/studio3.jpg);
    background-size: cover;
}

/*Estilos para drop (para sorttable)*/
#tb_lista_barra .seleccionado{
    transform: scale(1.02);
    background-color: rgb(255, 227, 104);
}

#tb_lista_barra .fantasma{
    /*opacity: 1;
    background-color: lawngreen;*/
}
.mover{
    cursor: move;
}


#tb_lista_barra .drag{
    background-color: lightcoral;
    opacity: 0;
}

@keyframes ani_brillo{
    to { transform: translateX(1240px); }
}
@keyframes lista_al_aire{
    0%{background-color:rgba(255, 0, 0, 0.534)}

    100%{background-color:rgba(255, 0, 0, 0)}
}

@keyframes marquee_sec__ {
from  { text-indent:  100% }
to    { text-indent: -100% }
}

@keyframes marquee_sec {
0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}




@keyframes kf_izq_s {
    
    to     { transform: translateX(-2500px); }
 }
 @keyframes kf_der_s {
    
    to    { transform: translateX(+2500px); }
 }

 @keyframes kf_izq_e {
    from   { transform: translateX(-2500px); }
    to     { transform: translateX(0px); }
 }
 @keyframes kf_der_e {
    from    { transform: translateX(+2500px);}
    to      { transform: translateX(0px); }
 }

 .alert_css{
    position: fixed;
    z-index: 10;
    display: none;
    margin: 0.5%;
    width: 99%;
 }

 .icon-m{
    width: 50px;
    text-align: center;
 }