*{
    margin:0;
    padding: 0;
    box-sizing: border-box; 

}
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #4E5869;
	margin: 0;
	padding: 0;
	color: #000;

}


/* ~~ este contenedor rodea a todas las demás divs, lo que les asigna su anchura basada en porcentaje ~~ */
.container {
	width: 90%;
	background-color: #FFF;
	padding: 5px 5px;
	max-width: 1000px;
	margin: 0px auto;
}

/* ~~no se asigna una anchura al encabezado. Se extenderá por toda la anchura del diseño. Contiene un marcador de posición de imagen que debe sustituirse por su propio logotipo vinculado~~ */
.header {
	background-color: #6F7D94;
	border: 3px solid;
	padding-bottom: 5px;
	border-radius: 10px 10px 10px 10px;
	
}
.textoEncabazado{
	display: flex;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 3px solid;
	margin: 5px 5px;
    align-items: center;
    border-radius: 10px 10px 10px 10px;
}
.textoEncabazado h1{
	color: white;
	margin-left: 20%;
	border-radius: 10px 10px 10px 10px;
}

.imgh1{
	border: 3px solid;
	margin-left: 5px;
	width: 10%;
	height: 10%;
	border-radius: 10px 10px 10px 10px;
}



.slider-frame {
	width: 99%;
    height: 150px;
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
	overflow: hidden;
	border: 3px solid;
	border-radius: 10px 10px 10px 10px;
}

.slider-frame ul {
	display: flex;
	padding: 0;
	width: 1000%;
	height: 100%;
	animation: slide 20s infinite alternate ease-in-out;
}

.slider-frame li {
	width: 100%;
	height: 100%;
	list-style: none;
}

.slider-frame img {
	width: 100%;
	height: 100%;
}

@keyframes slide {
	0% {margin-left: 0;}
	10% {margin-left: 0;}
	
	11% {margin-left: -100%;}
	20% {margin-left: -100%;}
	
	21% {margin-left: -200%;}
	30% {margin-left: -200%;}
	
	31% {margin-left: -300%;}
	40% {margin-left: -300%;}

	41% {margin-left: -400%;}
	50% {margin-left: -400%;}

	51% {margin-left: -500%;}
	60% {margin-left: -500%;}

	61% {margin-left: -600%;}
	70% {margin-left: -600%;}

	71% {margin-left: -700%;}
	80% {margin-left: -700%;}

	81% {margin-left: -800%;}
	90% {margin-left: -800%;}

	91% {margin-left: -900%;}
	100% {margin-left: -900%;}
}

.content {
	padding-top: 5px;
	margin: 0;

}

/* ~~ El pie de página ~~ */
.footer {
	padding: 10px 0;
	background-color: #6F7D94;
	border: 3px solid black;
	padding-left: 10px ;
	border-radius: 10px 10px 10px 10px;
}
@media screen and (max-width:800px){
	.header{
		width: 100%;
		height: auto;
	}
	
	.textoEncabazado h1{
		margin-left: 1%;
	}
	
	.slider-frame {
		width: 97%;
	    height: 100px;
		margin-top: 5px;
		margin-left: 5px;
		margin-right: 5px;
		
	}

	.slider-frame ul {
		padding: 0;
		width: 1000%;
		height: 100%;
	}

	.slider-frame li {
		width: 100%;
		height: 100%;
	}

	.slider-frame img {
		width: 100%;
		height: 100%;
	}
	.container {
		width: 100%;
	}
	.imgh1{
		width: 50%;
		height: 50%;
	}
	.content {
		width: 100%;
		height: auto;
	}
	.Capa_1{
		width: 100%;
		height: auto;
		
	}
}