@charset "utf-8";
/* CSS Document */

/*NARRA DE NAVEGACION O MENU*/

body  {
/*	background-image:url(../imagenes/fondo.jpg);*/
background-image:url(../imagenes/fondoprin.jpg);

	background-attachment: fixed;
}
p {
font-size: 25px;
color:#000;

}

select {
	 height: 2.5em; /* for IE */
    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
	float:left;
	width:98%;
	clear:both;
background-color:#FFF;
height:auto;
 box-shadow: 5px 5px 0 #999;
 border-radius: 5px;
opacity:1; /**Clear both limpia**/
 font-size: 20px;
}


form {
	width:auto;
	max-width:99%;
	height:auto;
	border:medium;
	background-color:transparent;
 border-radius: 5px;
}

input{
    height: 2.5em; /* for IE */
    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
	float:left;
	width:98%;
	clear:both;
background-color:#FFF;
height:auto;
 box-shadow: 5px 5px 0 #999;
 border-radius: 5px;
opacity:1; /**Clear both limpia**/
 font-size: 20px;
}
table {
width:100%;
	clear:both;
	font-size: 20px;
}

tr{
font-size: 25px;
	text-align:center;
color:#000;
}
.titulo{
	float:inherit;
	width:99%;
	height:auto;
	text-align:center;
	font-size:40px;
	
	text-shadow:3px 5px 12px #FFF;
	
}
input[type=submit]{
  clear:both;
  margin-top: 10px;  /**arriba**/
  margin-right: 90px;
  margin-bottom:10px; /**abajo**/
  margin-left: 0%;/**izquierda a derecha**/
  border-radius: 5px;
  font-size: 20px;
  background-color:#F33;
  color:#000;
   box-shadow: 5px 5px 0 #000;
  }
  
input[type=submit]{
 transition:all 0.5s;
  border-radius: 8px;
  }
  
  .cuadro1{

	float:left;
	width:25%;
	height:auto;

 color:#000;
/**Clear both limpia**/
 font-size: 20px;
		}	
 .cuadro1:hover{

	float:left;

	height:auto;
	border-radius: 26px;
 box-shadow:  1px 1px  20px #F00;

 color:#000;
/**Clear both limpia**/
 font-size: 20px;
		}	


.cuadro2{

	float:left;
	width:100%;
	height:auto;

/**Clear both limpia**/
 font-size: 20px;
		}	
@media only screen and (max-width:768px){

select {
	 
 font-size: 15px;
}




input{
 
 font-size: 25px;
}
table {
width:100%;
	clear:both;
	font-size: 15px;
}

tr{
font-size: 15px;
	text-align:center;
color:#000;
}
.titulo{

	font-size:32px;
	
}
input[type=submit]{
  clear:both;
  margin-top: 10px;  /**arriba**/
  margin-right: 90px;
  margin-bottom:10px; /**abajo**/
 /** margin-left: 50%;/**izquierda a derecha**/
  border-radius: 5px;
  font-size: 15px;
  background-color:#F33;
  color:#000;
   box-shadow: 5px 5px 0 #000;
  }

.cuadro1{
	width: 100%;
	height: 100%;
	
	clear: both;
	text-align: center;		

}
.cuadro1{
	width: 100%;
	height: 100%;

	clear: both;
	text-align: center;		

}
.cuadro2{

	float:left;
	width:100%;
	height:auto;


 
		}	

}

/******************************************/
/***    DISEÑO PARA MOVILES 480        ****/
/******************************************/

@media only screen and (max-width:480px){
	select {
	 
 font-size: 10px;
}

button{
	margin-left: 38%;
 font-size: 30px;
   background-color:#F33;
  color:#000;
  box-shadow: 5px 5px 0 #000;
}



input{
 
 font-size: 20px;
}
table {
width:100%;
	clear:both;
	font-size: 15px;
}

tr{
font-size: 15px;
	text-align:center;
color:#000;
	 

}

.titulo{

	font-size:30px;
	
}
input[type=submit]{
	margin-left: 0%;
 font-size: 20px;
   background-color:#F33;
  color:#000;
  box-shadow: 5px 5px 0 #000;
}
.cuadro1{
	width: 100%;
	height: 100%;
	clear: both;
	text-align: center;		


}
.cuadro1{
	width: 100%;
	height: 100%;
	clear: both;
	text-align: center;		
	 box-shadow: 0 5px  0 #666;

}
 .cuadro2{

	float:left;
	width:100%;
	height:auto;

 
		}	
}