/* CSS Document */

/* Nuestro nav con id #nav  lo flotaremos a la derecha*/

#header {
	height: 80px;
	background: #FFF;
	
	-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.15);
	-moz-box-shadow:    0px 3px 5px 0px rgba(50, 50, 50, 0.15);
	box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.15);
	z-index: 10000;
}

#header .logo {
	margin: 20px 0 0 10px;
	width: 200px;
}

#header .centerContainer {
	width: 100%;
}
	
#nav {
	position: relative;
	float: right;
	padding: 0;
	margin: 22px 0 0 0;
	}   

/* Quitamos estilos por defecto de el tag UL */
#nav  ul{
	position: relative;
	list-style: none;
	width: 100%;
}
        
/* Centramos y ponemos los textos en mayuscula */
#nav  li {
	position: relative;
	float: left;
	margin: 0 0 0 1px;
}	
            
/* Damos estilo a nuestros enlaces */
#nav  li a {
	position: relative;
	display: block;
	padding: 12px 10px;
	min-width: 90px;
	color: #7f8c8d;
	text-align: center;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	
	transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	-webkit-transition: all 0.1s ease-in;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	
	border: none;
}

#nav  li a:hover {
	color: #fff;	
	background: #f1c40f repeat-x top left;
	
	transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	-webkit-transition: all 0.1s ease-in;
}

#nav  li a.active {
	font-family:  Arial, Helvetica, sans-serif;
	color: #fff;
	background: #e74c3c;
	
	border: solid 2px #f2ca27;
	margin-top: -2px; 
}

#nav ul li.fb {
	background-image: url(../img/icon_facebook.png);
	background-position: top left;
	}
    
/* Estilos #nav-mobile y lo ocultamos */
#nav-mobile{
	display: none;
	background: url(../img/nav.png) #414244 no-repeat center center;
	float: right;
	width: 60px;
	height: 60px;
	position: absolute;
	right: 0;
	top:0;
	opacity: 1;
}
/* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
#nav-mobile.nav-active{
	opacity: 1;
}
/* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
a.nav-mobile.nav-active{
	opacity: 1;
}
a.nav-mobile{
	display: none;
	background: url(../img/nav.png) #414244 no-repeat center center;
	float: right;
	width: 60px;
	height: 60px;
	position: absolute;
	right: 0;
	top:0;
	opacity: 1;
}



@media (max-width: 1220px){	
	
	#nav {
		margin: 25px 5px 0 0;
		}
	
	#nav  li {
		margin: 0 0 0 3px;
	}
	
	#nav  li a {
		padding: 8px 12px;
		min-width: inherit;
		font-size: 14px;
		
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}

	}

@media (max-width: 950px){
	
	#header {
		position: fixed;
	}
	
	#header .logo {
		margin: 26px 0 0 10px;
		width: 150px;
	}
	
	#header .centerContainer {
		width: 100%;
	}	
	
	#nav {
		margin: 29px 2px 0 0;
		}
	
	#nav  li {
		margin: 0 0 0 2px;
	}
	
	#nav  li a {
		padding: 5px 10px;
		min-width: inherit;
		font-size: 12px;
		letter-spacing: normal;
		
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
	
	#nav  li a.active {
		border: none;
		margin-top: 0; 
	}

	}

@media only screen and (max-width: 820px) {
	
	#header {
		height: 60px;
	}
	
	#header .logo {
		margin: 11px 0 0 6px;
		width: 200px;
	}
    
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; }
    a.nav-mobile{ display: block; }

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #nav {
        width: 100%;
        float: none;
        padding-top: 60px;
		margin: 0;
		z-index: 10000;
		position: absolute;
		right: 0;
    }
	
	/* Convertimos nuestra lista de enlaces en un menú horizontal */
	#nav  ul{
		max-height: 0;
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
	}
	
	/* estilos para los LI del menu */
	#nav  li{
		background: #252627;
		border-bottom: 1px solid #3B3C3E;
		float: none;
		margin: 0;
	}

	/* Quitamos el borde del ultimo item del menú */
	#nav  li:last-child{ border-bottom: 0;}
	
	#nav  li a{
		padding: 15px 0;
		height: auto;
		line-height: normal;
		color:#fff;
		font-size: 18px;
		
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
	}
	
	#nav  li a:hover{background:#f1c40f;}

	/* Agregamos una animación al despligue del menú */
	#nav  ul.open-nav{
		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;
	}
}