
{
   margin:0;*/
    padding:0;*/
}
html{
    height: 100%;
    margin: 0;
}
body{
    background-color: #f2f2f2;
    height: 100%;
    margin: 0;
}
ul{
    list-style:none;
    margin:0;
    padding:0;
}
#contenedor{
    /*width:960px;*/
    width: 75%;
    max-width: 960px;
    /*height: auto;*/
    overflow: hidden;
    /*margin:0 auto;*/
    background-color: white;
    
    min-height: 100%;     
    height: auto !important;     
    height: 100%;     
    margin: 0 auto -70px; /* el magin-bottom es el valor negativo de la altura del footer incluyendo el margin superior */ 
}

#header{
	position: fixed;
    width: 100%;
	z-index:9999;             /*para que se superponga al resto de contenido, la publicidad aparecía por encima del header */
	max-width: 960px;
    /*width:960px;*/
	overflow: hidden;
    height:76px;
    background-color:#00BFFF;  
    font-size:40px;
    font-family:"Trebuchet MS";
    line-height:70px;
	
}
.progress-container {
	/*width:960px;*/
    width: 100%;
    max-width: 960px;
    /*height: auto;*/
    overflow: hidden;
    /*margin:0 auto;*/
  margin-top:70px;
  height: 6px;
  background: #868686;
}
.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}
.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}
#logo{
    width: 20%;
    /*width:200px;*/
    float:left;
    text-align:center;
    font-size:60px;
}
#logo a{
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
}
#logo:hover{
    background-color: #5d9fff;
}
.t{
    color:blue;
}
.d{
    color:#006a13;
}
.o{
    color:red;
}
#titulo{
    width: 80%;
    float: left;
    padding-left: 18%;
    box-sizing: border-box;         /*hace que no sea necesario restar el padding del width*/   
}
/*.tituloweb{*/
/*    width: 50%;*/
/*    padding-left: 20%;*/
/*    background-color: red;*/
/*}*/


#menu{
	width: 100%;
	max-width: 960px;
	margin-top: 76px; 
    height:auto;
    background-color:#c3c3c3;
    /*margin-bottom:40px;*/
    text-align: center;
}
#menu ul{
    /*margin:0 auto;*/
    display:inline-block;
    
}
#menu ul li{
    float:left;
    height:auto;
    margin-left:0px;
    margin-right:0px;
}

#menu ul li:hover{
        background-color:#868686;
}
#menu ul li a{
    text-decoration:none;
    color:#000000;
    font-weight:bold;
    padding:5px 8px;
    font-size:15px;
    line-height:30px;
    text-align:center;
}
#menu ul li:hover a{
    color: #ffffff;
}
#sub_menu{
    height: 5px;
    background-color: #868686;
	margin-bottom:30px;
}	

#centro{
    width: 70%;
    /*width:670px;*/
    padding-left: 20px;
    margin-bottom: 130px;
    float:left;
    box-sizing: border-box;         /*hace que no sea necesario pasar el padding a porcentaje*/
    /*text-align : justify;*/
    /*background-color: grey;*/
}
#centroportada{             /*en sumario de las leyes*/
    width: 70%;
    /*margin-left: 5%;*/
    padding-left: 20px;
    /*margin-top: 20px;*/
    margin-bottom: 130px;
    box-sizing: border-box;
    float:left;
}
#indiceportada_izquierda{        /*en index*/
   width: 33.3%;
   float: left;
}
#indiceportada_centro{         /*en index*/
   width: 33.3%;
   float: left;
}
#indiceportada_derecha{        /*en index*/
   width: 33.3%;
   float: left;
}
.indiceportada{             /*en index*/
    /*width: 31.3%;*/
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 20px;
    margin-bottom: 100px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    /*float:left;*/
    background-color: #d7d7d7;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;         /*hace que no sea necesario pasar el padding a porcentaje*/
}
.nombreley{
    text-align: center;
    text-decoration: underline;
    /*color: #ff7480;*/
}
.nombreley a{
    color: #000000;
}
.nombreley a:hover{
    color: #cc2f00;
}
.nombreley2{
    font-size: 22px;
    padding-right: 15px;
    padding-bottom: 20px;
    color: #3876ff;
}
#columna{
    width: 30%;
    /*width:240px;*/
    float:left;
    padding-left: 20px;
    padding-right: 15px;
    margin-bottom: 130px;
    box-sizing: border-box;
}
#columna ul{
    margin-bottom: 20px;
}
#columna ul li{
    background-color:#C7C7C7;
    border-bottom:1px solid #9D9D9D;
}
#columna ul li:hover{
    background-color:#E3E3E3;
}
#columna ul li a{
    text-decoration:none;
    color:black;
    font-size:16px;
    font-weight:bold;
    line-height:40px;
    padding-left:40px;
    display:block;
}
#columna ul li.seccion{
    line-height:40px;
    background-color:#00BFFF;
    text-align:center;
    color:white;
    font-size:16px;
    font-weight:bold;
    border-bottom:none;
	border-radius: 15px 15px 0px 0px;
}
#columna ul li.seccion a{
    margin-left:0px;
}
.enlace_test{
    font-weight:bold;
    font-size:18px;
    color: #007bf2;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 15px;
}
.enlace_test:hover{
    text-decoration: underline;
    color: #ffb047;
}
.parrafo{
    font-weight:bold;
    font-size:18px;
    color:red;
    margin-left: 20px;
}
.caja_test{
    width:240px;
    height:40px;
    background-color:#65ff8d;
    text-decoration:none;
    color:black;
    font-weight:bold;
    font-size:20px;
    display: block;
    margin-left: 20px;
    margin-bottom: 10px;
    text-align: center;
    line-height:40px;
}
.caja_test:hover{
    width:250px;
    height:50px;
    margin-left: 15px;
    line-height:50px;
    background-color:#00e298;
}
.caja_test_2{
    width:85%;
    height:35px;
    background-color:#00BFFF;
    text-decoration:none;
    color:black;
    font-weight:bold;
    font-size:18px;
    display: block;
    margin-left: 20px;
    margin-bottom: 15px;
    text-align: center;
    line-height:35px;
}
.caja_test_2:hover{
    background-color:#00d5c1;
}
#listado{
    margin-top:20px;
    margin-left:10px;                          
    box-sizing: border-box;
}
#listado li{
    font-size:18px;
    font-weight:bold;
    width: 100%;
    /*width:650px;*/
}
#listado li ul li{
    margin-top:10px;
    margin-bottom:20px;
}
/*#listado li ul li div{*/
.normal,.correcto,.resto{
    padding:6px 10px;
    margin:7px 20px;
    cursor:pointer;
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
    border:1px solid black;  
    box-shadow: 3px 3px 0 #333;
   -webkit-box-shadow: 3px 3px 0 #333;
  /* -moz-box-shadow: 3px 3px 0 #333;    */
    color:black;
    font-size:16px;
    font-weight:normal;
    box-sizing: border-box;
}
.normal,.correcto{
    background-color:#FFDD9F;   
}
.resto{
    background-color:#E8E8E8; 
}
.seleccionado{
    background-color:orange;
}
.acertado,.acertado_usuario{
    background-color:#63ffa6;
    padding:6px 10px;
    margin:7px 20px;
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
    border:1px solid black;  
    box-shadow: 3px 3px 0 #333;
   -webkit-box-shadow: 3px 3px 0 #333;
  /* -moz-box-shadow: 3px 3px 0 #333;    */
    color:black;
    font-size:16px;
    font-weight:normal;
    box-sizing: border-box;
}
.fallado{
    background-color:#ff8367;
    padding:6px 10px;
    margin:7px 20px;
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
    border:1px solid black;  
    box-shadow: 3px 3px 0 #333;
   -webkit-box-shadow: 3px 3px 0 #333;
  /* -moz-box-shadow: 3px 3px 0 #333;    */
    color:black;
    font-size:16px;
    font-weight:normal;
    box-sizing: border-box;
}

.articulo{
    display:none;
    font-weight:bold;
    color:red;
    padding:6px 10px;
    margin:14px 20px;
    /*border:none;
    box-shadow:none;
    -webkit-box-shadow:none;*/
}

#resultado_a{
    /*margin-left:40px;*/
    /*padding:10px;*/
    margin-top: 10px;
    font-weight:bold;
    color:green;
    float:left;
    /*height: 30px;*/
    width: 33.3%;
    box-sizing: border-box;
    padding-left: 30px;
}
#resultado_b{
    /*margin-left:40px;*/
    /*padding:10px;*/
    margin-top: 10px;
    font-weight:bold;
    color:red;
    float:left;
    /*height: 30px;*/
    width: 33.3%;
    box-sizing: border-box;
    padding-left: 30px;
}
#resultado_c{
    margin-top: 10px;
    font-weight:bold;
    color:#ce4c00;
    float:left;
    /*height: 30px;*/
    width: 33.3%;
    margin-bottom: 30px;
    box-sizing: border-box;
    padding-left: 30px;
}
#ad_enlaces_abajo{
    padding-left: 20px;
    margin-top: 30px;
}
#separador9{
    height: 55px; width: 100%;
}
.volver{
    margin-top: 20px;
    margin-left: 30px;
    margin-bottom: 10px;
}
.volver a{
    text-decoration: none;
    font-weight: bold;
}
.volver a:hover{
    text-decoration: underline;
}
#foot{
    width: 100%;
    max-width: 960px;
    height: 35px;
    text-align: center;
    position: relative;
    clear: both;
    /*margin-bottom: 20px;*/
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #c3c3c3;
    border-top: 5px;
    border-top-color: #868686;
    border-top-style: solid;
    /*display: none;*/
}
#foot ul{
    display:inline-block;
}
#foot ul li{
   float: left;
   margin-right: 15px;
   height: 30px;
}
#foot ul li:hover{
    background-color:#868686;
}
#foot ul li a{
    text-decoration:none;
    color: black;
    font-weight:bold;
    line-height:30px;
    display:block;
    padding-left: 10px;
    padding-right: 10px;
}
#foot ul li:hover a{
    color:white;
}
#avisocookies{
    margin-top: 0;
    background-color: #D395FF;
}
#bannerhorizontal{
    text-align: center;
	/* margin-top:20px; */
    margin-bottom: 20px;
}



/*/ RESPONSIVE*/
   /*========================================================================= /*/
/*/ Móviles en vertical*/
@media (min-width: 10px) and (max-width: 559px){
    #contenedor{
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }
    #centro{
        width: 95%;
        margin-right: 5%;
    }
    #columna{
        display: none;
    }
    #header{
        font-size:30px;
    }
    #logo{
        font-size:40px;
    }
    #menu{
        height: 90px;
    }
    #menu ul li{
        margin-left:0px;
        margin-right:0px;
    }
   #menu ul li.menu_abajo_2{
        float: none;
        overflow: hidden;
    }
 
    #menu ul li a{
      font-size: 14px;
    }
    #titulo{
        padding-left: 5%; 
    }
    /*.indiceportada{*/
    /*    width: 98%;*/
    /*    float: none;  */
    /*}*/
   #indiceportada_izquierda{        /*en index*/
      width: 100%;
      float: none;
   }
   #indiceportada_centro{         /*en index*/
      width: 100%;
      float: none;
   }
   #indiceportada_derecha{        /*en index*/
      width: 100%;
      float: none;
   }
    
    #centroportada{
        width: 98%;
    }
    .nombreley2{
       font-size: 20px;
    }
    #resultado_a{
        float: none;
        width: 80%;
    }
    #resultado_b{
        float: none;
        width: 80%;
    }
    #resultado_c{
        float: none;
        width: 80%;
        margin-bottom: 10px;
    }
    #separador9{
    height: 0px;
   }
}
/*/ Móviles en horizontal o tablets en vertical*/
@media (min-width: 560px) and (max-width: 767px){
    #contenedor{
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }
    #centro{
        width: 95%;
        margin-right: 5%
    }
    #columna{
        display: none;
    }
    /*.indiceportada{*/
    /*    width: 80%;*/
    /*    float: none;*/
    /*    margin-left: 10%;*/
    /*    margin-right: 10%;*/
    /*}*/
   #indiceportada_izquierda{        /*en index*/
      width: 100%;
      float: none;
   }
   #indiceportada_centro{         /*en index*/
      width: 100%;
      float: none;
   }
   #indiceportada_derecha{        /*en index*/
      width: 100%;
      float: none;
   }
    
    #centroportada{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
    #menu{
        height: 60px;
    }
	#menu ul li{    
        margin-left:5px;
        margin-right:5px;
   }
    #menu ul li.menu_abajo{
        float: none;
        overflow: hidden;
    }
    
   
}
/*/ Tablets en horizonal y escritorios normales*/
@media (min-width: 768px){
    #contenedor{
        width: 100%;
    }  
}
