/****************************************************************************************************************
// job    : selectores con media queries para responsive web design
// brain  : FactoByte SpA
// e-mail : ventas@factobyte.cl
//--------------------------------------------------------------------------------------------------------------*/

#cabecera-menu {
	width: 80%;
	margin-top: 5px;
	float: left;
}

#cabecera-menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
}

#cabecera-menu li {
	float: right;
}

#cabecera-menu li a {
	display: inline-block;
	font-family: "Asap", "Sans serif", "Verdana", "Nimbus Sans L";
	font-size: 1em; 
	/* background-color: #00418b; */
	color: #fff;
	text-decoration: none;
	padding: 11px 18px;
	margin-left: 6px;
	border: 0;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
  
	transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
}

#cabecera-menu li a:hover {
	background-color: #36a5e7;
}

/**/

/* menú móvil */

.bar1, .bar2, .bar3 {
    width: 37px;
    height: 6px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
	transform: rotate(-50deg) translate(-9px, 9px);
	-webkit-transform: rotate(-50deg) translate(-9px, 9px);
}

/* Fade out the second bar */
.change .bar2 {
	opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
	transform: rotate(50deg) translate(-8px, -8px);
	-webkit-transform: rotate(50deg) translate(-8px, -8px);
}

/**/

#cabecera-menu-movil-button {
	margin-top: 3px;
	display: none;
	float: right;
	cursor: pointer;
}

#cabecera-menu-movil {
	display: none;
/*	background-color: #004da5; */
}

#cabecera-menu-movil-content {
	width: 90%;
	margin: 0 auto;
	border-top: 1px solid #fff;
	padding: 10px 0;
}

#cabecera-menu-movil-content h3 {
	font-weight: normal;
	color: #36a5e7;
	text-align: center;
}

#cabecera-menu-movil-content a {
	width: 100%;
	font-weight: bold;
 	color: #fff;
	text-align: center;
	padding: 5px 0;
	display: inline-block;
}

#cabecera-menu-movil-content a:hover {
	background-color: #36a5e7;
}

/****************************************************************************************************************
// job    : media queries para responsive web design 
// brain  : FactoByte SpA
// e-mail : ventas@factobyte.cl
//--------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 1600px) {
	/* propiedades CSS a aplicar en desktops con resolución de 1600px mínimo o mas */
	
}

@media screen and (min-width: 1025px) and (max-width: 1599px) {
	/* propiedades CSS a aplicar en notebooks y netbooks con resolución de 1024px mínimo y 1599px máximo */
	
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	/* propiedades CSS a aplicar en tablets con resolución de 768px mínimo y 1023px máximo */

	#cabecera-menu {
		display: none;
	}

	#cabecera-menu-movil-button {
		display: inline;
	}

}

@media screen and (max-width: 767px) {
	/* propiedades CSS a aplicar en smartphones con resolución de 767px máximo */

	#cabecera-menu {
		display: none;
	}

	#cabecera-menu-movil-button {
		display: inline;
	}

}