.todo{
    width: 100%;
    height: 800px;
  }
    .todo_uno{
    width: 100%;
    height: 900px;
  }
  .arriba_titulo{
    width: 100%;
    height: 50px;
    margin: 10px 0px 0px 0px;
    color:#fff;
    font-family: calibri;
    font-weight: bold;
  }
  
  .letter_title{
  	color:#eee;
  }


  .lodem{
    background-color: #ddd;
    padding: 0px 20px;
    border-radius: 8px 8px 8px;
  }
  
  .texto1 a{
    color:#bbb;
  }

  .texto1 a:hover{
    color:#fff;
  }
  a:link{
    text-decoration:none;
  }

  .rojo{
    background-color: #B40404;
    border-radius: 5px 5px 5px;
    padding: 4px;
    margin:1px 30px 1px 30px;
  }

  .oscuro{
    background-color: #000;
  }

  .verde{
    background-color: #3B8F4A;
    border-radius: 5px 5px 5px;
    padding: 4px;
    margin:1px 30px 1px 30px;
  }

  .azul{
    background-color: #0080FF;
    border-radius: 5px 5px 5px;
    padding: 4px;
    margin:1px 30px 1px 30px;
  }

  .color_info{
    color:#58D3F7;
  }

  .audTop {
    width: 100%;
  }

  .color_darky{
    color:#333;
    font-weight: bold;
  }

  .c_e{
    color:#B40404;
    font-weight: bold;
    background-color: #F8E0E0;
  }
  .c_e_{
    color:#B40404;
    font-weight: bold;
    font-size: 24px;
  }

  .c_a{
    color:#04B404;
    font-weight: bold;
    background-color: #CEF6CE;
  }
  .c_a_{
    color:#04B404;
    font-weight: bold;
    font-size: 24px;
  }


  .c_i{
    color:#2E9AFE;
    font-weight: bold;
    background-color: #E0ECF8;
  }
  .c_i_{
    color:#2E9AFE;
    font-weight: bold;
    font-size: 24px;
  }

  .c_c{
    color:#424242;
    font-weight: bold;
    background-color: #E6E6E6;
  }
  .c_c_{
    color:#424242;
    font-weight: bold;
    font-size: 24px;
  }

  .m_vacio{
    background-color: #8A0808;
    border-radius: 5px 5px 5px;
    margin: 2px 2px 2px 2px;
    padding: 4px 10px 4px 10px;
    color:#fff;
    font-size: 13px;
    font-family: calibri;
    font-weight: bold;
  }

  .bienHecho{
    color:#04B404;
    font-weight: bold;
    font-family: calibri;

  }

  .intentosHecho{
    color:#2E9AFE;
    font-weight: bold;
    font-family: calibri;

  }

  .malHecho{
    color:#B40404;
    font-weight: bold;
    font-family: calibri;

  }

  .palabra{
    color:#fff;
    font-weight: bold;
  }
  .val{
    font-weight: bolder;
  }
    .redes{
      color:#8A0808;
      font-weight: bold;
    }
    .blues{
      color:#08298A;
      font-weight: bold;
    }
    .greenes{
      color:#0B610B;
      font-weight: bold;
    }
                      /* VERBO BE*/
.tags{
  font-family: calibri;
  font-size: 18px;
  }
                      /* ENTRE JUEJO*/



                       /* VOCABULARIO */

  .letter_title{
    color:#eee;
  }

  .color_info{
    color:#58D3F7;
  }

  .color_info2{
    color:#0174DF;
    font-size: 20px;
  }


                      /* VOCABULARIO */

                        /* VERBOS */
  .titulo_dos{
    font-size: 25px;
    color:#01A9DB;
  }

    .titulo_tres{
    font-size: 20px;
    color:#2E9AFE;
  }

                          /* VERBOS */

  /*MENUS*/

  .menues{
    font-size: 18px;
  }

  .cabecera{
     font-size: 25px;
     font-family: calibri;
     color: #0174DF;
     font-weight: bold;
     text-shadow: 1px 1px 20px;

  }

button{
  background-color:#007bff;
  color:#fff;
  font-weight: bold;
  border: 0px solid White;
}



.but{
  background-color:#fff;
  font-weight: bold;
  color:#555;
  margin: 4px;
}

.mainy{
  background-image: url(../../img/aprende.jpg);
  width: 100%;
  height: auto;
  background-size: cover;
  background-attachment: fixed;
 }
 .portada{
  background-image: url(../../img/aprende.jpg);
  width: 100%;
  height: 100%;
  padding: 160px 0px;
  
 }
 .osc{
    background-color:#000;
 }
 .desvanecer{
    background-color:rgba(0.5,0.5,0.5,0.5);
 }

 .portada .texto{
  padding: 0px 20px;
 }
 .texto{
  color:#fff;
  font-weight: bolder;
 }
 .texto7{
  color:#fff;
  text-shadow: 4px 4px 4px #000;
  font-weight: bolder;
 }
  .foco{
  border: 2px solid #eee;
  border-radius: 5px 5px 5px;
  background-color:rgba(0.6,0.6,0.6,0.6);
  margin: 0px 0px;
  }
  .foco2{
  border:2px solid #fff;
  border-radius: 10px 10px 10px;
  background-color:#2E9AFE;
  margin: 20px 0px;
  }

  .tex{
    color:white;
    font-weight: bold;
    font-family: calibri;

  }
    .nop{
    color:white;
    font-weight: bold;
    font-family: calibri;

  }

 .texto1{
  color:#fff;
  text-shadow: 8px 8px 8px #111;
  opacity:1;
 }

 .rep a:hover{
  background-color: #0489B1;
 }


 .foti img{
  width: 200px;
  height: 200px;
 }

 .foti2dos img{
  width: 100px;
  height: 100px;
 }


  #blanc{
    background-color:#EEEEEE;
    color: #111111;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #000000;

  }
  #blanc:hover{
    opacity: 0.6;
    text-decoration: none;
  }


  #negr{
    background-color:#111111;
    color: #DDDDDD;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #000000;

  }
  #negr:hover{
    opacity: 0.6;
    text-decoration: none;
  }

  #ros{
    background-color:#F6CEF5;
    color: #B404AE;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #B404AE;

  }
  #ros:hover{
    opacity: 0.6;
    text-decoration: none;
  }

  #verd{
    background-color:#CEF6CE;
    color: #088A08;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #088A08;

  }
  #verd:hover{
    opacity: 0.6;
    text-decoration: none;
  }

    #azu{
    background-color:#E0E6F8;
    color: #0431B4;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #0431B4;

  }
  #azu:hover{
    opacity: 0.6;
    text-decoration: none;
  }

    #roj{
    background-color:#F6CECE;
    color: #8A0808;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #8A0808;

  }
  #roj:hover{
    opacity: 0.6;
    text-decoration: none;
  }

    #purpl{
    background-color:#E6E0F8;
    color: #3104B4;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #3104B4;

  }
  #purpl:hover{
    opacity: 0.6;
    text-decoration: none;
  }
  
  #cinco{
    background-color:#0489B1;
    color: #FFFFFF;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #000000;

  }
  #cinco:hover{
    opacity: 0.6;
    text-decoration: none;
  }

    #seis{
    background-color:#B404AE;
    color: #FFFFFF;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #000000;
    
    

  }
  #seis:hover{
    opacity: 0.6;
    text-decoration: none;
  }

  #siete{
    background-color:#8A2BE2;
    color: #FFFFFF;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #000000;

  }
  #siete:hover{
    opacity: 0.6;
    text-decoration: none;
  }
  
  #ocho{
    background-color:#6B8E23;
    color: #FFFFFF;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #000000;

  }
  #ocho:hover{
    opacity: 0.6;
    text-decoration: none;
  }

    #nueve{
    background-color:#111111;
    color: #81F781;
    font-size: 16px;
    width:102px;
    height: 50px;
    font-weight: bold;
    font-family: helvetica;
    border-radius:10px 10px 10px 10px; 
    border:2px solid #81F781;

  }
  #nueve:hover{
    opacity: 0.6;
    text-decoration: none;
  }

.comentario {
            font-weight: bold;
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            z-index: 1000;
        }