@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');

/*colores institucionales
azul: #011671
rgba(1, 22, 113, 0.5);

rojo: #AA001B
rgba(170, 0, 27, 0.5);
*/

/*
fuentes

font-family: 'Open Sans', sans-serif;
font-family: 'Bebas Neue', cursive;
font-family: 'Reenie Beanie', cursive;

*/

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

h1,h2,h3,h4,h5,h6{
    font-family: 'Bebas Neue', cursive;
}

.logo{
    width:220px; 
    height:auto;
}

.logoSmall{
    width:200px;
    height:auto;
}

.barraMenu{
    text-align:right;
}

.linkBlanco{
            text-decoration:none;
            margin:10px;
            color:#fff;
            font-weight:bold;
            /*font-family: 'Bebas Neue', cursive;*/
        }

body{
    font-family: 'Open Sans', sans-serif;
    background-color:#f2f2f2;
}

.linkSubMenu{
    margin:10px;
}

.tableDevocional{
    width: 100%;
    border-collapse: collapse;
    font-size:0.9em;
}

.tableDevocional th{
    text-align:left;
    border: 1px solid #a4a4a4;
    background-color:#a4a4a4;
    padding: 5px;
}

.tableDevocional td{
    border: 1px solid #a4a4a4;
    padding: 5px;
}

.tableDevocional tr:hover{
    background-color:#fff;
    border: 1px solid #fff;
}

.linkDevocional{
    font-weight:bold;
    text-decoration:none;
    margin:10px;
    display:inline-block;
    color:#fff;
    background-color:rgba(170, 0, 27, 1);
    padding:4px;
    border-radius:4px;
}

.genDiv{
    margin:1px;
    padding:10px;
    background-color:white;
}

.contenido{
    background-color:rgba(255,255,255,0.7); 
    padding:10px;
    margin:5px;
}

label{
    font-size:0.9em;
}

.inputFormularioNormal{
    width:200px;
    height:30px;
    margin-bottom:3px;
    border:1px solid rgba(1, 22, 113, 0.5);
    padding:2px;
}

.botonFormularioAzul{
    width:200px;
    padding:7px;
    text-align:center;
    margin-bottom:3px;
    color:#fff;
    background-color:#011671;
    border:1px solid #011671;
    cursor:pointer;
    border-radius:4px;
}

.botonFormularioRojo{
    width:200px;
    padding:7px;
    text-align:center;
    margin-bottom:3px;
    color:#fff;
    background-color:#AA001B;
    border:1px solid #AA001B;
    cursor:pointer;
    border-radius:4px;
}

.spinner {
   width: 36px;
   height: 36px;
   animation: spinner-c601d3 1s infinite;
   background-color: #AA001B;
   border-radius: 50%;
   margin:auto;
}

.spinnerWhite {
   width: 36px;
   height: 36px;
   animation: spinner-c601d3 1s infinite;
   background-color: #fff;
   border-radius: 50%;
   margin:auto;
}


/*loader libro*/
.spinnerBook {
   position: relative;
   width: 33.6px;
   height: 33.6px;
   perspective: 67.2px;
}

.spinnerBook div {
   width: 100%;
   height: 100%;
   background: #ffffff;
   position: absolute;
   left: 50%;
   transform-origin: left;
   animation: spinnerBook-16s03x 2s infinite;
}

.spinnerBook div:nth-child(1) {
   animation-delay: 0.15s;
}

.spinnerBook div:nth-child(2) {
   animation-delay: 0.3s;
}

.spinnerBook div:nth-child(3) {
   animation-delay: 0.45s;
}

.spinnerBook div:nth-child(4) {
   animation-delay: 0.6s;
}

.spinnerBook div:nth-child(5) {
   animation-delay: 0.75s;
}

@keyframes spinnerBook-16s03x {
   0% {
      transform: rotateY(0deg);
   }

   50%, 80% {
      transform: rotateY(-180deg);
   }

   90%, 100% {
      opacity: 0;
      transform: rotateY(-180deg);
   }
}
/*fin loader libro*/


@keyframes spinner-c601d3 {
   0% {
      opacity: 0;
      transform: scale(0) translateX(-300%);
   }

   50% {
      opacity: 1;
      transform: scale(1.25) translateX(0);
   }

   100% {
      opacity: 0;
      transform: scale(0) translateX(300%);
   }
}

@media screen and (max-width: 1000px) {
    .inputFormularioNormal {
        width:250px;
    }
    
    .barraMenu{
        font-size:0.8em;
    }
    
    .logo{
        width:180px; 
    }
    
    .linkDevocional{
        margin:5px;
    }
}