body{padding:0;}
/* ESTILOS DEL MENÚ GENERAL */
header, nav{display: block;
}
/* Definimos un ancho 100% y una altura fija para nuestro menú */
#header{position: relative;width: 100%;z-index: 2; border-top:10px #C50C1D solid; float:left;
}
#logo{ position:absolute; z-index:9999; left:10%; top:30px;}
/* Nuestro nav con id #menu lo flotaremos a la derecha*/
#menu{margin:0 auto;font-family: 'Raleway', sans-serif;background:#000; position:absolute;z-index:9999;right:10%; top:30px;
}   
/* Quitamos estilos por defecto de el tag UL */
#menu ul{list-style: none;font-size: 15px;font-weight:700;text-align:center; padding:0;background:#FFF; 
}
/* Centramos y ponemos los textos en mayuscula */
#menu li{float: left;text-align: center;
}
/* Damos estilo a nuestros enlaces */
#menu li a{display: block;	
/*background-color:transparent;color: #FFFFFF;*/
text-transform:uppercase;text-decoration: none;
height: 60px;line-height: 60px;padding: 0 20px;-webkit-transition: all .15s ease-in; -moz-transition: all .15s ease-in; -o-transition: all .15s ease-in; -ms-transition: all .15s ease-in;transition: all .15s ease-in;
}
#menu li a:hover{ background-color:#C50C1D; color:#FFF;-webkit-transition: all .15s ease-in; -moz-transition: all .15s ease-in; -o-transition: all .15s ease-in; -ms-transition: all .15s ease-in;transition: all .15s ease-in;
}    
/* Estilos #nav-mobile y lo ocultamos */
#nav-mobile{display: none;float: left;width: 100%;height: 60px;position: absolute;right: 0;top:160;opacity: .8;padding:0;background:#1c2025; 
}   
/* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
#nav-mobile.nav-active{opacity: 1;
}
/* Content */
#content{width: 80%;margin: 60px 10%;text-align: center;overflow-x: hidden;padding:0;
}
#menu ul li:hover .children {display:block;
}
#menu .submenu {background-image:none;	
}
#menu ul li .children {display: none;background:#f00;position: absolute;z-index:1000;	
}
#menu ul li .children li {display:block;clear:left;width:100%;text-align:left;overflow: hidden;opacity:100;	border-bottom: 1px solid rgba(255,255,255,.5);
}
#menu ul li .children li a {display: block;background:transparent;opacity:100;
}
#menu ul li .children li a span {float: right;position: relative;top:3px;margin-right:0;margin-left:10px;
}
#menu ul li .caret {position: relative;top:3px;margin-left:10px;margin-right:0px;
}
@media only screen and (max-width: 1250px) { 
/* mostramos #nav-mobile */
#nav-mobile{display: block;padding:0;margin-top:0px; z-index:999999; position:absolute; right:5%; top:0px; width:60px;background-image: url(../jpg/nav.png);background-position:center center; background-repeat:no-repeat;
}
/* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
#menu{width: 100%;float: none; right:0%; background-color:transparent;
}
/* Convertimos nuestra lista de enlaces en un menú horizontal */
#menu ul{font-size: 14px;max-height: 0;overflow: hidden;padding:0 auto; margin-top:80px;		
}
/* estilos para los LI del menu */
#menu li{border-bottom: 0px solid #d8b402;float: none;margin:0;
}
/* Quitamos el borde del ultimo item del menú */
#menu li:last-child{border-bottom: 0;
}
#menu li a{padding: 15px 0;height: auto;line-height: normal;margin:0;border-radius:0px;opacity:0.9;
}
/* Agregamos una animación al despligue del menú */
#menu ul.open-menu{max-height: 400px;
	-webkit-transition: max-height .4s;
	-moz-transition: max-height .4s;
	-ms-transition: max-height .4s;
	-o-transition: max-height .4s;
	transition: max-height .4s;
}
#logo{left:5%;}
@media only screen and (max-width: 768px) { 
@media only screen and (max-width: 600px) {
#logo{ width:50%;}
#logo img{ width:100%; height:auto; float:left; max-width:308px;}
}