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

* {
	padding:0;
	margin:0;
	
}


#header nav {
	
	z-index:1000;
	max-width: 1500px;
	width: 100%;
	margin:5px auto;
}

#header nav ul {
	list-style:none;
	
}

#header nav ul li {
	display:inline-block;
	/*La razon por la que no usamos floar en vez de inline-block es
	porque no vamos a poder usar overflows en el header nav ul*/
	position: relative;
	margin-left:2%;
}

#header nav ul li a { /*boton normal */
	color: #FFFFFF;
	background-color: #ff0000;
	text-decoration: none;
	display: inline-block;
	padding: 15px 20px;
	font-size: 1em;
	font-weight: 700;
	-webkit-transition: border 0.5s ease-in-out;
	-moz-transition: border 0.5s ease-in-out;
	-ms-transition: border 0.5s ease-in-out;
	-o-transition: border 0.5s ease-in-out;
	transition: border 0.5s ease-in-out;
	border: 1px solid rgba(153,167,250,1.00);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	

	
	
}

#header nav ul li a:hover {
	background-color: #1418E4; /*botones en hover*/
	border: 1px solid rgba(10,65,241,1.00);
	font-weight: 700;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: border 0.5s ease-in-out;
	-moz-transition: border 0.5s ease-in-out;
	-ms-transition: border 0.5s ease-in-out;
	-o-transition: border 0.5s ease-in-out;
	transition: border 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
	
}





@media screen and (max-width:1000px) {
	
	#header nav {
	
	z-index:1000;
	max-width: 1500px;
	width: 100%;
	margin:5px auto;
}

#header nav ul {
	list-style:none;
	list-style:none;
	width:100%;

	
}

#header nav ul li {

	width:10%;
	margin-left:1%;
	/*La razon por la que no usamos floar en vez de inline-block es
	porque no vamos a poder usar overflows en el header nav ul*/
	position: relative;
	text-align:center;

}

#header nav ul li a { /*boton normal */

	text-decoration: none;
	display: inline-block;
	padding: 15px 5px;
	font-size:0.8em;
	font-weight:700;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;


	
	
}


#header nav ul li a { /*boton normal */
	display:inline-block;
	width:100%;
	height:auto;


	
}


	


	
}

@media screen and (max-width:700px) {
	
		#header nav {
	
	z-index:1000;
	max-width: 1500px;
	width: 100%;
	margin:5px auto;
}

#header nav ul {
	list-style:none;
	list-style:none;
	width:90%;
	margin:0 auto;

	
}

#header nav ul li {
	width:100%;
	/*La razon por la que no usamos floar en vez de inline-block es
	porque no vamos a poder usar overflows en el header nav ul*/
	position: relative;
	margin-left:0%;
	text-align:center;
	
}


#header nav ul li a { /*boton normal */
	display:inline-block;
	width:100%;
	margin-top:1%;
	padding: 8px 3px;
	font-size:0.8em;
	font-weight:700;

	
}



	
}