@import url('https://fonts.googleapis.com/css?family=Open+Sans|Oswald');
@import url(arriba.css);
@import url(banner_primario.css);
@import url(green.css);
@import url(top_movil.css);
@import url(opciones.css);
@import url(info.css);
@import url(mapa.css);

html, body {
  overflow-x: hidden;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	position: relative;
}

header {
	width: 100%;
	background: #eaeaea;
	position: fixed;
	z-index: 100;
}

.contenedor {
	width: 99%;
	margin: auto;
	background-color: #fff;
}

#espacio_extra {
	width: 100%;
	height: 88px;
	background-color: #eaeaea;
}
#espacio_blanco {
	width: 50%;
	height: 88px;
	background-color: #fff;
}

#topper2 {
	display: none;
	width: 100%;
	height: 120px;
	position: fixed;
	z-index: 150;
}

header nav {
	display: none;
	/*font-family: 'Oswald', sans-serif;*/
}

.menu {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style: none;
	background: #fff;
}

.menu li img {
	display: none;
	width: 50%;
	height: auto;
	padding-top: 20px;
}

.menu li {
	border-bottom: 1px solid rgba(000,000,000,.1);
}

.menu li a {
	color: #0375bc;
	text-decoration: none;
	line-height: 2.9;
	display: block;
	padding-left: .7em;
	font-size: 1em;
}

.menu li a:hover {
	color: #6fbd4d;
}

header .contenedor .menu_bar {
	display: block;
	width: 100%;
	background: #ccc;
}

header .contenedor .menu_bar .bt-menu {
	display: block;
	padding: 20px;
	background: #0375bc;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.menu_bar span {
	float: right;
	font-size: 22px;

}

#logan {
	margin-top: 3%;
	margin-left: 1%;
}
/*MAPA DE GOOGLE*/

#map {
	margin-top: 0px;
	margin-bottom: 0px;
	
	font-family: 'Play', sans-serif;
}

#map .contenedor {
	color: #fff;
}

#map .mapwrapper{
	position: relative;
	/*
	Do math with the weight of your inframe divided by the whidth, then converted to percent
	In this example the height is 400 and the whidth is 600
	400 / 600 = 66.6666667
	which is 66.6666667% */
	/*padding-bottom: 66.6666667%;
	height: 0;*/
	padding-bottom: 1%;
	height: auto;
	background-color: #f9f9f9;
}

#map .mapwrapper inframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-bottom: 0px !important;
}

/*PIE DE PAGINA*/
footer {
	background: #fff;
}

footer .contenedor {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 5px;
}
#derechos {
	margin-top: 0;
	/*display: flex;
	flex: auto;*/
}
#derechos .copy {
	font-size: .7em;
	color: red;
	padding-left: 0%;
}
#derechos img {
	padding-left: 25%;
	max-height: 48px;
	background-color: #fff;
}

.sociales {
	width: 100%;
	font-size: 1.6em;
	text-align: center;
	margin-bottom: 20px;
}

.sociales a {
	margin: 0px 10px;
	color: #fff;
	text-decoration: none;
}

.sociales #politica {
	margin: 0px 20px;
	margin-top: 10px;
	font-size: .5em;
	color: #fff;
	text-decoration: none;
}

/* Media Querys */
@media screen and (min-width: 480px) {

	#topper2 {
		display: block;
		height: 520px;
	}
}

@media screen and (min-width: 600px) {

	#topper2 {
		display: block;
		height: 120px;
	}

	#logan {
		display: none;
	}

	header .contenedor .menu_bar {
		display: block;
	}

	.menu li img {
		display: block;
		padding-left: 20%;
		width: 60%;
		height: auto;
		padding-top: 5px;
	}
}
@media screen and (min-width: 768px) {

	.contenedor {
		width: 100%;
	}

	header nav {
		display: block;
	}

	header .contenedor .menu_bar {
		display: none;
	}

	.menu {
		display: flex;
	}

	.menu li {
		flex: auto;
		text-align: center;
		/*border-bottom: 0;*/
	}
	.menu li a {
		padding-left: 0;
		line-height: 6;
		font-size: .9em;
	}

}

@media (min-width: 1280px) {

	.contenedor {
		width: 1280px;
	}
	header nav {
		display: block;
	}

	header .contenedor .menu_bar {
		display: none;
	}

}