@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Source+Sans+Pro:ital,wght@0,300;1,400&display=swap');


* {
	margin: 0;
	padding: 0;
	background-color:gray;
}

@keyframes aaa {
  0% {background-color: #4c2b2b;}
  50% {background-color: #191f28;}
  100% {background-color: #4c2b2b;}
}

body { 
	height:1200px;
	width:1000px;
	background-color:white;
	animation-name: aaa;
    animation-duration: 20s;
    animation-iteration-count: infinite;
	margin: 10px auto;
	z-index: 1;
}

#cabecera {
	background-color: #420808;
	height:20%;
	width:100%;
}

#cabecera > #logo {
	height:91.67%;
	width:22.2%;
	/*background-color: #005277;*/
	background-color: #067036;
	float: left;
	padding:1%;
	margin-left: 0.5em;
}
#logo > img {
	padding:none;
	width: 100%;
	height: 100%;
}

#cabecera > #menu {
	height:91.67%;
	width:72.2%;
	background-color: #191f28;
	float: right;
	padding:1%;
	margin-right: 0.5em;
}

#imagen {
	background-color: #4c2b2b;
	height:29%;
	width:100%;
	margin-top:1%;
	overflow: hidden;
}

#imagen ul {
	list-style-type: none;
	display:flex;
	width: 300%;
	height:100%;
	animation: movimiento 10s infinite ease-out;
	align-items: center;
	background-color: rgb(25 31 40);
	overflow:hidden;
}

#imagen img {
    max-width: 100%;
    max-height:100%;
	display: flow;
	justify-content: center;
	vertical-align: middle;
	margin: 0 auto;
	text-decoration: none;
}

@keyframes movimiento{
	0% {margin-left: 0%;}
	28% {margin-left: 0%;}
	38% {margin-left: -100%;}
	61% {margin-left: -100%;}
	71% {margin-left: -200%;}
	100% {margin-left: -200%;}
	/* pasos de 33.3% porque son 3 imagenes, 100/3
	0%
	33.3%  < se le quita 5%
	33.3%  < se le da    5%
			 para que exista pausa entre los dos

	66.6%  < lo mismo
	66.6%  < lo mismo
	100%
	*/
	
	/* ej de 8, 100/8 = 12.5%, ul{ width: 800%; }
	0%		{margin-left: 0%;}
	10.5%	{margin-left: 0%;}
	14.5%	{margin-left: -100%;}
	23%		{margin-left: -100%;}
	27%		{margin-left: -200%;}
	37.5%	{margin-left: -200%;}
	37.5%	{margin-left: -300%;}
	50%		{margin-left: -300%;}
	50%		{margin-left: -400%;}
	67.5%	{margin-left: -400%;}
	67.5%	{margin-left: -500%;}
	75%		{margin-left: -500%;}
	75%		{margin-left: -600%;}
	87.5%	{margin-left: -600%;}
	87.5%	{margin-left: -700%;}
	100%	{margin-left: -700%;}
	*/
}

#noticia {
	background-color: black;
	height:39%;
	width:100%;
	margin-top: 1%;
	display:flex;
	flex-direction: row;
}

#noticia > #izquierda {
	width:59%;
	height:100%;
	background-color: blue;
	display:flex;
	flex-direction: column;
	margin-right:1%;
}

#noticia > #izquierda > .principal {
	width:98%;
	margin-right: 1%;
	margin-left: 1%;
	height:50%;
	background-color:black;
	border-radius: 4%;
}
#noticia > #izquierda > .principal:nth-child(2) {
	height:49%;
	margin-top: 1%;
}

#noticia > #derecha {
	width:40%;
	height:100%;
	background-color: cyan;
	display:flex;
	flex-direction: column;
}

.servicios:nth-child(1) {
	margin-top: 0.4%;
}

.servicios {
	width: 98%;
	margin-right: 1%;
	margin-left: 1%;
	height: 32.9%;
	background-color: black;
	border-radius: 4%;
}

.servicios > img {
	margin-left:1.4%;
	width: 97%;
	height: 97%;
	object-fit: cover;
	object-position: 100% 34%;
	border-radius: 4%;
}

#noticia > #derecha > .servicios:nth-child(2), .servicios:nth-child(3) {
	height: 32.3%;
	margin-top: 1%;
}

#pie {
	background-color: black;
	margin-top: 1%;
	height:10%;
	width:100%;
}

#rrss {
	width:27.2%;
	height:83.34%;
	padding: 1%;
	margin-right: 0.5em; 
	/* 8px o 0.8% para width, o 0.6% para height */
	float:left;
	background-color: #a4b0bb;
	text-align: center;
	background-image: url('https://media.biobiochile.cl/wp-content/uploads/2020/01/captura.jpeg');
	background-position: center;
}

#rrss > img {
	
	height: 100%;
	width: 32%;
	object-fit: contain;
	text-align: center;
	background-color: rgba(0,0,0,0);
}

#contacto {
	height:83.34%;
	width:67.2%;
	padding: 1%;
	margin-left: 0.5em;
	float:right;
	background-color: #cfcfd4;

}


#hj2division1 {
	width:100%;
	height:29%;
	margin-top: 1%;
	background-color: #1ce64ef8;
	display:flex;
	padding-top: 1%;

}

#hj2division1 > #hj2_img {
	width: 29%;
	height: 98%;
	margin-right: 1%;

	background-color: blue;
}

#hj2division1 > #hj2_p {
	width: 69%;
	height: 98%;

	background-color: blue;
	padding-left: 1%;
}

#hj2division2 {
	width: 100%;
	height: 39%;
	margin-top: 1%;
	background-color: #10812cf8;
}

#hj2division1 > #hj2_m1, #hj2division1 > #hj2_m2 {
	display:flex;
	height: 50%;
	width: 100%;
}

#hj2_m1_a, #hj2_m1_b, #hj2_m1_c, #hj2_m1_d {
	background-color: white;
}

#hj2_m1_a {
	height: 96%;
	width: 18%;
	margin-right: 1%;
	margin-left: 1%;
	margin-top: 1%;

	float:left;
}

#hj2_m1_b, #hj2_m1_c {
	height: 48%;
	width: 39%;
	float:left;
	margin-top: 1%;
}

#hj2_m1_b {
margin-right: 1%;
}

#hj2_m1_d {
	height: 46%;
	width: 79%;
	float:left;
	margin-top: 1%;
}

#hj3division1 {
	margin-top: 1%;
	width:100%;
	/* 70 dividido en 3 es 23.3 */
	height:22.3%;
	background-color: #dfdc47f8;
}

#hj3division2 {
	margin-top: 1%;
	width: 100%;
	height: 22.3%;
	background-color: #afad34f8;
}

#hj3division3 {
	margin-top: 1%;
	width: 100%;
	height: 22.3%;
	background-color: #8f8d27f8;
}

#hj4preguntasfrecuentes {
	margin-top: 1%;
	width:100%;
	/* 42% es el 60% de 70%  */
	height:41%;
	background-color: #df6547f8;
}

#hj4formulario {
	margin-top: 1%;
	width: 100%;
	/* 28% es el 40% de 70%  */
	height: 27%;
	background-color: #af5b34f8;
}


#menu {
	color: #dae6e9;
	list-style-type: none;
	display: inline;
	text-align: center;
	background-color: white;
}

#menu p {
	width: 100%;
	float: center;
	height: 20%;
	background-color: rgba(0,0,0,0);
	color: white;
	font-size: 40px;
	line-height: 100px;
	font-family: 'Source Sans Pro', sans-serif;
}

#menu li:before{
  width: 50%;
  height: 100%;
  background: #005370;
	transform: skew(0deg, 20deg);
	overflow:hidden;
	transform-origin: 100% 0;
	z-index: -1;
}

#menu li {
	height: 80%;
	width: 25%;
	background-color: rgba(0,0,0,0);
	float:left;
	text-align: center;
	display: inline-block;
	font-family: 'Source Sans Pro', sans-serif;
	font-style: italic;
}

#menu a {
	color: inherit;
	background-color: rgba(0,0,0,0);
	display: inline-block;
	margin-top: 50%;
	font-size: 20px;
	transform: none;
	text-decoration: none;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

#menu a{
	/*
  background: 
	linear-gradient(to right, rgb(22 97 122), rgb(45 103 191)),
    linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
	*/
	background:
	linear-gradient(to right, rgb(22 97 122), rgb(45 103 191)),
    linear-gradient(to right, rgb(30 137 175), rgb(138 188 37), rgb(244 141 47));
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;

}

#menu a:hover,
#menu a:focus {
  background-size: 0 0.1em, 100% 0.1em;
}