/*
 *   Estilos generales
 */
/*
*{
   padding: 0 0 0 0;
   marging: 0 0 0 0;
   border: 0;

}
*/
body{
   margin:0;
   font-family: Arial, Helvetica, sans-serif;
   background-color:#f0f0f0;
   font-size:100%;
   margin:0;
   padding:0;
   border:0;
}
.col-sm-2{
   padding-left:0;
   }
h1, h2 {
   font-family: 'Lobster', cursive;
}
h1 a {
   color: #FCA205;
   font-family: 'Lobster';
}
h2 a {
   color: #FCF000;
   font-family: 'Lobster';
}
a {
  color: black;
}
a:hover {
  color: white;
}
.page-header {
   background-color: #ff9400;
   margin-top: 0;
   color:#ffffff;
   font-size: 4em;
   padding:0px 0px 0px 0px;
   font-family:Lobster;
   text-align:center;
   text-decoration: none;
   margin: 0 0 0 0;
   border-bottom: 0;
   border-radius: 7rem 7rem 0 0;
   x_background: linear-gradient(0, #ff9400 10%, white 90%);
   background: linear-gradient(0,#eeddcc 10%,#ff9400 90%);
   background: linear-gradient(0,#ddccbb 10%,#ff9400 90%);
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, page-header h1 a:active {
   color:#ffffff;
   font-size: 36pt;
   text-decoration: none;
}
footer{
   bottom:0;
   x_position:absolute;
}
/*
 *   Estilos TopDown
 */
.topnav{
   overflow:hidden;
   background-color:#333;
   z-index:1;
   position:relative;
   font-size:13px;
}
.topnav a{
   float:left;
   display:block;
   color:#f2f2f2;
   text-align:center;
   padding:2px 2px 2px 8px;
   text-decoration:none;
}
.topnav a:hover{
   background-color:#ddd;
   color:black;
}
.topnav a:active{
   background-color:#04AA6D;
   color:white;
}
.topnav .icon{
   display:none;
}

.buscar{
   x_position:absolute;
   x_right:0;
   position:relative;
}
.contacto{
   position:relative;
   x_float:right;
}


@media screen and (max-width:600px){
   .topnav a:not(:first-child) {display:none;}
   .topnav a.icon{
      float:right;
      display:block;
   }
   .buscar{
   position:relative;
   x_left:0;
   x_right:0;
   }
   .contacto{
      position:relative;
      float:right;
   }
}
@media screen and (max-width:600px){
   .topnav.responsive {position:relative;}
   .topnav.responsive a{
      float:none;
      display:block;
      text-align:left;
   }
   .topnav.responsive .icon{
      position:absolute;
      display:block;
      top:0;
      right:0;
   }
}
/*
 *   Estilos DropDown
 */
.dropbtn{
   x_background-color:#04AA6D;
   background-color:#d1e1fe;
   x_color:white;
   color:black;
   font-size:10px;
   border:none;
   position:relative;
   float:right;
   padding:1px 5px;
   z-index:2;
}
.dropdown{
   position:relative;
   right:0;
   z-index:2;
   float:right;
   top:0;
   x_border-radius: 0 0 1rem 1rem;
}
.dropdown-content{
   display:none;
   position:relative;
   x_background-color:#f1f1f1;
   x_background-color:#d1e1fe;
   z-index:2;
   top:16px;
   x_border-radius: 2rem 2rem 2rem 2rem;
}
.dropdown-content a{
   color:black;
   x_background-color:#7BD98A;
   background-color:#d1e1fe;
   padding:3px 3px;
   display:block;
   z-index:2;
   position:sticky;
   text-align:center;
}
.dropdown-content a:hover{
   x_background-color:#ddd;
   x_background-color:#d1e2ff;
   x_color:black;
}
.dropdown:hover .dropdown-content{
   display:block;
}
.dropdown:hover .dropbtn{
   x_background-color:#3e8e41;
   x_background-color:#d5effe;
}
.titulo_pag{
   font-family:Lobster;
   color:#000000;
   z-index:1;
   position:relative;
   text-align:center;
   font-size:2.5em;
   padding-top:0.5em;
}
#pagina{
   width:100%;
   margin: 0 auto;
   position:absolute;
}
#contenido{
   width:80%;
   margin: 0 auto;
   background-color:white;
   #background-color:#9FCA55;
   x_border-color:black;
   x_border-style:double;
   x_border-radius: 3rem 3rem 3rem 3rem;
   border-radius: 5rem;
}
section{
   #border-color:black;
   #border-style:double;
   #border-radius: 5rem 5rem 5rem 5rem;
   x_border-radius: 5rem 5rem 5rem 5rem;
   }
article{
   x_-webkit-box-sizing:border-box;
   x_-moz-box-sizing:border-box;
   x_box-sizing:border-box;
   float:left;
   height:100%;
   width:100%;
   padding:0px;
   text-align:center;
   x_border-color:red;
   x_border-style:double;
   background-color:#9FCA55;
   border-radius: 5rem 5rem 5rem 5rem;
}
#refranes{
   width:33.33%;
   x_background-color:#dfe43d;
   x_font-size:80%;
}
#proverbios{
   width:33.33%;
   x_background-color:#84e4a0;
   x_font-size:80%;
}
#frases{
   width:33.33%;
   x_background-color:#699cdd;
   x_font-size:80%;
}
#creados{
   width:100%;
   x_background-color:#bde2d9;;
}
#aldia{
   width:100%;
   padding: 5px 5px;
   x_background-color: #ff9400;
   border-color: #000000;
   background: linear-gradient(0,white 10%,#ff9400 90%);
   border-radius: 7rem 7rem 0 0;
}
#aldia a{
   color: black;
}
#aldia a:link {
   color: black;
}
#aldia a:visited {
   color: black;
}
#aldia a:focus {
   color: black;
}
#aldia a:hover {
   color: black;
}
#aldia a:active {
   color: black;
}
#alzas{
   width:100%;
   background-color:grey;
   background-color:white;
   border-color: #ff9333;
   border-style:dotted;
}
#funciones{
   width:100%;
   x_padding: 5px 5px;
   x_background-color:green;
   border-color: #00ff94;
   x_border-style:dotted;
   position:relative;
   x_position:absolute;
}
#funciones_pie{
   width:100%;
   padding: 5px 5px;
   background-color:grey;
   x_border-color: #00ff94;
   x_border-style:dotted;
   position:relative;
   x_position:absolute;
   bottom:3;
}
#visitas{
   width:100%;
   x_background-color:#e15252;
   padding: 1 35px;
   background-color:#f0f0f0;
}
.pie{
   x_text-align:right;
   x_padding: 0px 23px;
   x_width:100%;
   x_background-color:#0f0f0f;
   x_position:fixed;
   x_bottom:1px;
}
#pie{
   text-align:right;
   padding:7px 11px 13px 0px;
   width:100%;
   background: linear-gradient(0, #ff9400 10%, white 90%);
   x_background: linear-gradient(0, #ff9400 10%, #ddccbb 90%);
   border-radius: 0 0 5rem 5rem;
}
#pagination{
   width:100%;
   text-align:center;
   x_background-color:#F0E68C;
   x_border-radius: 2rem;
}
.page-links{
   width:100%;
   text-align:center;
   background-color:#F0E68C;
   border-radius: 2rem;
   padding:10px;
}
.page-links a:hover{
  color: black;
}
.page-links a:active{
  color: blue;
}
notas{
   font-family: 'Lobster';
   font-size: 13pt;
   width: 80%;
   text-align:center;
   float: inherit;
}
#notas{
   width: 70%;
   align:center;
}
.refran {
   margin-top: 10px;
   margin-botton: 15px;
   font-family: 'Lobster';
   font-size: 18pt;
}
a.refran_cnt {
   #background-color: red;
   #color: red;
}
a.refran_cnt:hover{
#  color: black;
}
a.refran_cnt:active{
#  color: blue;
}
.proverbio {
   margin-top: 10px;
   margin-botton: 15px;
   font-family: 'Lobster';
   font-size: 18pt;
}
a.proverbio_cnt {
   #color: gold;
   #color: darkorange;
}
a.proverbio_cnt:hover{
  #color: black;
}
a.proverbio_cnt:active{
  #color: blue;
}
.frase {
   margin-top: 10px;
   margin-botton: 15px;
   font-family: 'Lobster';
   font-size: 15pt;
}
a.frase_cnt {
   #color: darkorchid;
   #color: darkmagenta;
}
a.frase_cnt:hover{
  #color: black;
}
a.frase_cnt:active{
  #color: blue;
}
.palabra {
   margin-top: 5px;
   margin-botton: 5px;
   font-family: 'Lobster';
   font-size: 15pt;
}
.origen {
   margin-top: 10px;
   margin-botton: 15px;
   font-size: 16pt;
}
.letra {
   margin-top: 10px;
   margin-botton: 15px;
   font-family: 'Lobster';
   font-size: 16pt;
}
h3 .palabra{
   font-size: 20pt;
}
h3 .letra{
   font-size: 18pt;
}

@media screen and (max-width:600px){
   .refran {
      margin-top: 8px;
      margin-botton: 10px;
      font-family: 'Lobster';
      font-size: 14pt;
   }
   .proverbio {
      margin-top: 8px;
      margin-botton: 10px;
      font-family: 'Lobster';
      font-size: 14pt;
   }
   .frase {
      margin-top: 8px;
      margin-botton: 10px;
      font-family: 'Lobster';
      font-size: 14pt;
   }
   .palabra {
      margin-top: 3px;
      margin-botton: 3px;
      font-family: 'Lobster';
      font-size: 12pt;
   }
   .origen {
      margin-top: 8px;
      margin-botton: 12px;
      font-size: 13pt;
   }
   .letra {
      margin-top: 8px;
      margin-botton: 13px;
      font-family: 'Lobster';
      font-size: 12pt;
   }
   .filtro_letras{
      x_background-color:white;
      line-height: 1.5em;
      position:relative;
      z-index:1;
      width:80%;
      padding-top:0;
   }
   .letra_fltr {
      margin-top: 10px;
      margin-botton: 15px;
      align:center;
   }
}
.filtro_palabras{
   x_background-color:white;
   height:23em;
   line-height: 1em;
   overflow-x: hidden;
   overflow-y: scroll;
   width:100%;
   border:0px;
   position:relative;
   z-index:1;
}
.filtro_letras{
   x_background-color:white;
   #height:10em;
   line-height: 2em;
   overflow-x: hidden;
   overflow-y: hidden;
#   overflow-y: scroll;
   width:100%;
   border:0px;
   position:relative;
   z-index:1;
   padding-top:58px;
}
#tbl_letras{
   background-color:#9FCA55;
   border-radius: 2rem 2rem 2rem 2rem;
}
.letra_fltr{
   margin-top: 10px;
   margin-botton: 15px;
   font-family: 'Lobster';
   font-size: 11pt;
}
.palabra_fltr {
   margin-top: 5px;
   margin-botton: 5px;
   font-family: 'Lobster';
   font-size: 9pt;
}
#tbl_palabras{
   background-color:#9FCA55;
   border-radius: 1rem;
}
/*
figcaption{
   display:none;
   transition: all .5s;
}
figure:hover > figcaption {
   display:block;
   transition: all .5s;
}
*/
/*
[data-title]:hover:after{
   opacity:1;
   transition: all 0.1s ease 0.5s;
   visibility:visible;
}
[data-title]:after{
   content: attr(data-title);
   background-color:#333;
   color:#fff;
   font-size:14px;
   x_position:absolute;
   padding:3px 20px;
   x_bottom: -1.6em;
   left:100%;
   white-space:nowrap;
   box-shadow:1px 1px 3px #222222;
   opacity:0;
   border: 1px solid #111111;
   z-index:99999;
   visibility:hidden;
   border-radius:6px;
}
[data-title]{
   position:relative;
}
*/
.blink{
   x_width:200px;
   x_height: 50px;
   x_background-color: magenta;
   x_color: magenta;
   x_padding: 15px;	
   text-align: center;
   line-height: 23px;
}
.blink span{
   font-size: 19px;
   font-family: cursive;
   x_color: white;
   color: magenta;
   animation: blink 1s linear infinite;
}
@keyframes blink{
   0%{opacity: 0;}
   50%{opacity: .5;}
   100%{opacity: 1;}
}

/*
 *   Fin de Estilos
 */