/*
rojo      be1d2c
celeste   24aae1
naranja   fbb03f

*/
#nav-trigger {
	 display: none;
	 text-align: center; 
 }
 #nav-trigger span {
	 display: inline-block;
	 padding: 10px 30px;
	 background-color: #be1d2c;
	 color: #FFF;
	 cursor: pointer;
	 text-transform: uppercase; 
	font-weight:bold;
 }
 #nav-trigger span:after {
	 display: inline-block;
	 margin-left: 10px;
	 width: 35px;
	 height: 10px;
	 content: "";
	 border-left: solid 10px transparent;
	 border-top: solid 10px #fff;
	 border-right: solid 10px transparent; 
 }
 #nav-trigger span:hover {
 	background-color: #24aae1; 
 }
 #nav-trigger span.open:after {
	 border-left: solid 10px transparent;
	 border-top: none;
	 border-bottom: solid 10px #fff;
	 border-right: solid 10px transparent; 
 }
 
 /************************/
 /* CSS Mobile
 /************************/

nav#nav-mobile {
	 position: relative;
	 display: none; 
 }
 nav#nav-mobile ul {
	 display: none;
	 list-style-type: none;
	 position: absolute;
	 left: 0;
	 right: 0;
	 margin-left: auto;
	 margin-right: auto;
	 text-align: left;
	 background-color: #24aae1;
	 width:100%; 

 }
 nav#nav-mobile li {
	 display: block;
	 padding: 5px 0;
	 margin: 0 5px;
 }
 
 nav#nav-mobile li ul li {
	display:none;
	
}
 nav#nav-mobile li:hover ul li{
	display:table;
	margin-left:10px;
}

 nav#nav-mobile li:hover ul li a:hover {
	text-decoration:none;
	display:block;
	background-color:#FFF;
	color:#24aae1;
}


 nav#nav-mobile a {
	 display: block;
	 color: #fff;
	 padding: 10px 30px; 
	 text-decoration:none;
 }
 nav#nav-mobile a:hover {
	 background-color: #FFF;
	 color: #be1d2c;
  }
  
  nav#nav-mobile li:last-child {
 	border-bottom: none; 
 }
 
 /************************/
 /* CSS PC
 /************************/

nav {
	margin: 10px; 
	font-size:110%;
	font-weight:bold;
}

nav#nav-main {
	background-color: #FFF;

}
 nav#nav-main ul {
	 list-style-type: none;
	 margin: 0;
	 padding: 0;
	 text-align: center; 
 }
 nav#nav-main li {
	 display: inline-block;
 }
 nav#nav-main li:last-child {
 	border-right: none; 
 }
 nav#nav-main a {
	 display: block;
	 color: #be1d2c;
	 padding: 10px 20px; 
	 text-decoration:none;
 }
 nav#nav-main a:hover {
	 background-color: #24aae1;
	 color: #FFF; 
 }
 
 nav#nav-main li ul {
	display:none;
	position:absolute;
	list-style:none;
	color:#FFF;
	width:150px;
	padding:5px;
		 -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
	box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
}
 nav#nav-main li:hover ul {
	text-decoration:none;
	background-color:#F7F7F7;
	color:#FFF;
	display:block;
}

 nav#nav-main li:hover ul li a:hover {
	text-decoration:none;
	display:block;
	background-color:#24aae1;
	color:#FFF;
	width:auto;
}
 
 
 
 
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 500px) {
 #nav-trigger {
 display: block; }

 nav#nav-main {
 display: none; }

 nav#nav-mobile {
 display: block; }
}