@charset "utf-8";
/* CSS Document */
body {
	font-family: georgia, times, serif;
	color: #333;
	font-size:1.2rem;
	line-height: 1.4em;	 /* interlineado*/
	margin:0;
}
h1 {
	font-size:2rem;
	line-height: 1.3rem;
}
p {
	margin-bottom: 1.6em;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.container { 
width: 85%;
max-width: 85%px;
margin:0 auto;
}

.header {
	background:white;
	color:#333;
	padding: 2rem 0;
	position:fixed;
	left:0;
	top: 0;
	right:0;

}

.header a {
	color:#333;
	text-decoration: none;
	background:white;
	
}
.logo-nav-container {
	display:flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap:wrap; /*si un elemento tiene un mas ancho del que le permite para estar al lado de otro, le fuerza a bajar abajo*/
}

.logo {
	letter-spacing:15px;
	font-size: 1.3;
}

.menu-icon {
	display:none;
}

.navigation ul {
	margin:0;
	padding:0;
	list-style: none; /* para quitar la lista */
}

.navigation ul li {
	display:inline-block;
}
	.navigation ul li a {
		display:block;
		padding: 0.5rem 1rem;
		transition: all 0.4s linear;
		border-radius: 30px;
	}
.navigation ul li a:hover {
	background:#018fcc;
	color:white;
	border-radius: 30px;
	/*f2f2f2*/
}

.footer {
	background:#018fcc;
	color:white;
	padding:4rem 0;
	text-align:center;
	align-content:stretch;
	
}

.main { 
padding-top:12rem;
column-count: 1;
}
/*.main ul {list-style: none;
}*/

.bloque {
	padding: 3em 2em;
	display: none;
}
	
	.visible {
		display:block;
	}


.contenido {
  /* Por defecto en modo fila, uno al lado del otro */
  display: flex;
  flex-flow: row;
}

	.item {
	flex: 1 1 auto;
	}

/* PARA RESPONSIVE */
@media only screen and (max-width: 767px) {
	
	.menu-icon {
		display:block;
		cursor:pointer;
	}
	
	.navigation {
		width: 100%;
		margin-top: 1rem;
		
	}
	
	.navigation ul {
		display:none;
		
	}
	
	.navigation ul.show {
		display:block;
		
	}
	
		.navigation ul li {
		display:block;
			
		}
	
	
		.navigation ul li a {
			display:block;
			padding: 0.5rem 0;
			transition: all 0.4s linear;
			border-radius: 0px;
			}	
				.navigation ul li a:hover {
				background:#018fcc;
				color:white;
				border-radius: 0px; /* Para que en responsive el efecto de sombreado se le quite el redondeo*/
				}	
	
	.main img {width: 300px;
	}
	
	.main iframe {width: 300px;}
	.br {display: none;}
	
	.contenido {flex-flow: column;
	}
	

	
	
	/*.main td {width: 300px;
	flex-wrap: wrap;}*/
}
	
 .hr1 {
    color: blue;
	border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
		

  	/* 
========================
      CSS de BANNER
========================
*/		
			
		
			.banner {
				width:100%;
				height:400px;
				background-color: white;
			}
			.img_banner {
				display:block;
				margin:auto;
				width: 100;
				max-width: 1200px;
				min-width: 600px;
			}