body {
	background: #F3F3F3;
	margin: 0;
	text-align: center;
	color: #3A3A3A;
	font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 1.0em;
	text-decoration: none;} 

    a:link {
	color: #688092;
	font-weight: bolder;
	text-decoration: none;}
    a:visited {
	color:#688092;
	font-weight: bolder;
	text-decoration: none;}
    a:hover {
	color:#688092;
	font-weight: bolder;
	background: #E0E5E9;
	text-decoration: underline;}

	p{
	color: #3A3A3A;
	font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
	text-decoration: none;}	
	
	h3 {
	font-weight: bold;}

	h1 {
	font-size: 1.6em;
	font-weight: bolder;
	text-align: left;
	vertical-align: middle;
	padding: 0% 0% 2% 0%;}
	
	h2 {
	font-weight: bold;}
	
    .oneColLiqCtrHdr #container {
	width: 100%;  
	background: #F3F3F3;
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
	text-align: left; /* esto anula text-align: center en el elemento body. */}
	
    .oneColLiqCtrHdr #header {
   	background: #0075bb; 
   	padding: 2% 3% 2% 3%;}
	
    .oneColLiqCtrHdr #mainContent {
   	padding: 2% 3% 2% 3%; /* recuerde que el relleno es el espacio situado dentro del cuadro div y que el margen es el espacio situado fuera del cuadro div */
   	background: #FFFFFF;}
	
	.oneColLiqCtrHdr #contenedor {
   	padding: 2% 8% 2% 8%; 
   	background: #F3F3F3;}
	
    .oneColLiqCtrHdr #footer {
	padding: 0 2%; /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen por encima de él. */
	background:#F3F3F3;
	font: 95% Arial, Verdana, sans-serif;
	font-weight: bold;}
	 
    .oneColLiqCtrHdr #footer p {
    margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
    padding: 1%; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */}

	.selecciona {
		display: inline;
	}
		
	.aviso {
	font: Arial, Verdana, sans-serif;
	font-size: 90%;}
    
    .zona {
	font-weight: bold;}


	.cajetin {
  	font: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
   	color: #00533F;
	font-size: 0.8em;}
	
	.curso {
   	background: #006698;
	color: #FFFFFF;
	font-weight: bolder;
	text-decoration: none;}
	
	.bot {text-align: center; margin: 2%;}

    .boton 
    {
    font-size: 100%;    
    }
    
	#redessociales {
    margin-top: .0.2%;
    margin-bottom: 0.5%;
    text-align: center;
    display: block;}
	

	 
    
   	@media only screen and (max-width: 500px) and (max-height: 749px){

	 img{
	     width: 55%;
		 text-align: left;
	     height: auto;
	     display: block;
         margin: 0.5% 0.5% 0.5% 0.5%;
	 }
	 
	 #redes {
	  width: 30%;
	  height: auto;  
	  text-align: center;
	  height: auto;
	  display: block;
      margin-left: auto;
      margin-right: auto;
	 }
	 body  {
	   font-size: 0.8em;;  
	   background: #FFFFFF;
	 }
	 .cajetin{
		 font-size: 0.7em;
	 }	 
	.oneColLiqCtrHdr #contenedor, .oneColLiqCtrHdr #container,.oneColLiqCtrHdr #footer, .oneColLiqCtrHdr #contenedor {
		background: #FFFFFF;
	}
	.oneColLiqCtrHdr #header {
   	padding: 2% 5% 2% 5%;}
	.selecciona	{
		display: block;
	}
	}

   	@media only screen and (max-width: 500px) and (min-height: 750px){

	 img{
	     width: 55%;
		 text-align: left;
	     height: auto;
	     display: block;
         margin-left: 0.5%;
	 }
	 
	 #redes {
	  width: 30%;
	  height: auto;  
	  text-align: center;
	  height: auto;
	  display: block;
      margin-left: auto;
      margin-right: auto;
	 }
	 body  {
	   font-size: 0.85em;;  
	   background: #FFFFFF;
	 }
	 .cajetin{
		 font-size: 0.7em;
	 }
	 h1 {
		 
	 }
	 
	.oneColLiqCtrHdr #contenedor, .oneColLiqCtrHdr #container,.oneColLiqCtrHdr #footer, .oneColLiqCtrHdr #contenedor {
		background: #FFFFFF;
	}
	.oneColLiqCtrHdr #header {
   	padding: 2% 7% 2% 7%;}
	}
	.selecciona	{
		display: block;
	}
	}