/****************************************************************************************************************
// Job   : selectores con responsive web design implementado a través de media queries 
// Brain : Cristian Fernandez O.
// Email : cristian.fernandez@factobyte.cl
//--------------------------------------------------------------------------------------------------------------*/

/* menú móvil */

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

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

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

/**/

#cabecera-menu {
	width: 100%;
	border-bottom: 1px solid #00bbb6;

	float: left;
	box-shadow: 0px 20px 10px -20px #000;
	-webkit-box-shadow: 0px 20px 10px -20px #000;
	-moz-box-shadow: 0px 20px 10px -20px #000;
}

#cabecera-menu-content {
	width: 90%;
	max-width: 1200px;
	height: 70px;
	margin: 0 auto;
	border-top: 1px solid #ebebfc;
	display: flex;
	justify-content: center;
}

#cabecera-menu-opciones {
	/*max-width: 845px;*/
	max-width: 1100px;
	margin: 0 auto;
	margin-top: 9px;
	border: 0;

}

#cabecera-menu-opciones ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	text-align: center;

}

#cabecera-menu-opciones li {
	float: left;
}

#cabecera-menu-opciones li a {
	display: inline-block;
	font-family: "Montserrat SemiBold", "Lato", "Trebuchet MS", arial, Luxi Sans, Nimbus Sans L;
	font-size: 0.88em; 
	font-weight: normal;
	color: #00bfbb;
	text-decoration: none;
	background-color: #f6f6f6;
	margin-right: 6px;
	padding: 16px 8px;

	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;

	transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s; /* Safari */
}

#cabecera-menu-opciones li a:hover {
	color: #fff;
	background-color: #00bbb6;
}

.cabecera-navegacion-opcion {
	display: inline-block;
}

.cabecera-navegacion-opcion:hover #cabecera-navegacion-otros {
	color: #fff;
	background-color: #00bbb6;
}

.cabecera-navegacion-opcion:hover .cabecera-navegacion-opcion-content {
	display: block;
}

.cabecera-navegacion-opcion-content {
	display: none;
	position: absolute;
	padding: 5px;
	background-color: #fff;

	box-shadow: 4px 4px 4px #525252;
	-webkit-box-shadow: 4px 4px 4px #525252;
	-moz-box-shadow: 4px 4px 4px #525252;

	z-index: 150;
}

.cabecera-navegacion-table td {
	border: 0;
	margin: 0;
	padding: 0;
}

#cabecera-menu-opciones li .cabecera-navegacion-opcion-content a {
	display: block;
	font-size: 0.8em; 
	margin: 0;
	margin-top: 4px;
	margin-right: 1px;
	padding: 8px;
	border: 0;
	text-align: left;
	color: #00a6a2;
	background-color: #f3f3f3;
}

#cabecera-menu-opciones li .cabecera-navegacion-opcion-content a:hover {
	color: #fff;
  background-color: #23d9d4;
}

/**/

#cabecera-menu-movil {
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #00bbb6;
	display: none;

	position: fixed;
	z-index: 1000000;
	box-shadow: 0px 9px 12px #232323;
	-webkit-box-shadow: 0px 9px 12px #232323;
	-moz-box-shadow: 0px 9px 12px #232323;
}

#cabecera-menu-movil-content {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

#cabecera-menu-movil-logo {
	height: 55px;
	margin: 3px 0;
	float: left;
}

#cabecera-menu-movil-logo img {
	height: 100%;
}

#cabecera-menu-movil-logo a:hover {
	background-color: transparent;
	padding: 0;
}

#cabecera-menu-movil-contacto {
	float: right;
	margin-top: 13px;
	margin-right: 10px;
}

#cabecera-menu-movil-contacto h3 {
	font-size: 1em; 
	text-align: right;
	color: #484848;
}

#cabecera-menu-movil-boton {
	float: right;
	margin-top: 12px;
	cursor: pointer;
}

#cabecera-menu-movil-boton .bar1, .bar2, .bar3 {
	width: 35px;
	height: 5px;
	background-color: #00bbb6;
	margin: 6px 0;
	transition: 0.4s;
}

#cabecera-menu-movil-opciones {
	background-color: #dbfefe;
	padding: 10px 0;
	display: none;
}

#cabecera-menu-movil-opciones a {
	font-family: "Montserrat SemiBold", "Lato", "Trebuchet MS", arial, Luxi Sans, Nimbus Sans L;
	font-size: 1.1em; 
	font-weight: bold;
	color: #3d444c;
	text-decoration: none;
	text-align: center;
	padding: 7px 0;
	display: block;
}

#cabecera-menu-movil-opciones a:hover {
	color: #fff;
	background-color: #00bbb6;
}

#cabecera-menu-movil-opciones-paquetes-submenu {
	background-color: #fff;
	padding: 10px 0;
	display: none;
}

#cabecera-menu-movil-opciones-paquetes-submenu a {
	margin: 8px;
	line-height: 35px;
	display: inline;
}

#cabecera-menu-movil-opciones-paquetes-avion-submenu {
	background-color: #fff;
	padding: 10px 0;
	display: none;
}

#cabecera-menu-movil-opciones-paquetes-avion-submenu a {
	margin: 8px;
	line-height: 35px;
	display: inline;
}

#cabecera-menu-movil-opciones-otros-submenu {
	background-color: #fff;
	padding: 10px 0;
	display: none;
}

#cabecera-menu-movil-opciones-otros-submenu a {
	margin: 8px;
	line-height: 35px;
	display: inline;
}

/****************************************************************************************************************
// Job   : selectores con responsive web design implementado a través de media queries 
// Brain : Cristian Fernandez O.
// Email : cristian.fernandez@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-opciones {
		max-width: 672px;
		margin: 0 auto;
		margin-top: 9px;
	}
	
	#cabecera-menu-opciones li a {
		font-size: 0.75em; 
		font-weight: normal;
		margin-right: 4px;
		padding: 16px 4px;
	}
	
	#cabecera-menu-opciones li .cabecera-navegacion-opcion-content a {
		font-size: 0.7em; 
	}

}

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

	#cabecera-menu-movil {
		display: inline;
	}
	
	#cabecera-menu-movil-opciones span a {
		color: #00bbb6;
	}
	
}