html{

	font-family: monospace;
	color: rgb(220,220,220);
	background: radial-gradient(circle, rgba(100,100,100), rgba(30,30,30));
	scroll-behavior: smooth;
	position: relative; 
	min-height: 100%;
}

html a{

	text-decoration: none;
	color: rgb(220,220,220);
}

html br, img, i, iframe{

	user-select: none;
}	
/*HEADER Y NAV----------------------------------------*/

header{

	width: 100%;
	height: 45px;
	margin: 0;
	background: linear-gradient(90deg, rgba(180,0,0,85%), rgba(200,0,0,70%));
	position: fixed;
	z-index: 200;
	top: 0;
}

header img{

	position: absolute;
	margin: 7px 10px;
	width: 23px;
	opacity: 85%;
}

.header-nav{

	float: right;
	display: flex;
}

.header-nav .header-resp{

	display: none;
}

.header-nav ul, li{

	list-style: none;
	display: inline-block;
	font-size: 15px;
}

.header-nav li{

	transition: all .3s;
	margin: 0;
	flex-grow: 1;
}

.header-nav a{

	margin: 0px 25px;
	font-weight: bold;
	transition: all .13s;
}

.header-nav li > ul > li:hover{

	background-color: rgba(230,0,0,70%)
}

.header-nav a:hover{

	color: white;
}

.header-nav li > ul{

	position: absolute;
	display: none;
	margin: 0;
}

.header-nav li > ul li{

	background-color: rgba(200,0,0,70%);
	margin: 0;
	position: relative;
	left: -40px;
	bottom: -13px;
	float: right;
	padding: 10px 0 10px 0;
	min-width: 210px;
}

.header-nav li:hover > ul{

	display: block;
}
/*SECTION 1----------------------------------------*/

.section-1{

	background: url(Bigfoto.png); background-position: center; background-size: cover;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-1-imgfondo{

	position: absolute;	
	margin: 0;
	top: 0; z-index: -100;
	width: 100%; height: inherit;
	opacity: 50%;
	object-fit: cover;
}

.article-1a, .article-1b{

	flex-grow: 1; padding: 130px 0;
	width: 50%;
	display: flex; align-items: center; justify-content: center;
}

.article-1a-slider{

	outline: rgba(200,0,0,80%) 3px solid;
	box-shadow: 5px 5px 25px 0 rgba(0,0,0,70%);
	width: 70%;
	height: 350px;
	display: flex;
}

.article-1a-slider img{

	object-fit: cover;
	margin: 0;
	width: 100%;
	height: 100%;
}

.article-1b p{

	width: 65%; height: 60%;
	padding: 10px;
	font-size: 18px;
	line-height: 18px;
	background: linear-gradient(45deg, rgba(50,50,50), rgba(0,0,0,0%) 70%);
	align-self: flex-start;
	opacity: 0%;	
	animation-name: bienvenida;
	animation-duration: .7s;
	animation-delay: .2s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.article-1b p span{

	font-size: 27px;
	font-weight: bold;
}

@keyframes bienvenida{

	0%{
		transform: translateY(-20px);
	}

	100%{
		opacity: 100%;
	}
}
/*SECTION 2----------------------------------------*/

.section-2{

	display: flex;
	flex-direction: column;
	padding: 25px 0 30px 0;

}

.article-2a, .article-2b, .article-2c{

	flex-grow: 1;
	width: 100%;
}

.article-2a{

	display: flex;
	flex-direction: row;
	padding: 0 0 0 0px;
	width: 100%
}

.article-2a-div-a, .article-2a-div-b{

	flex-grow: 1;
}

.article-2a-div-a{

	padding: 10px 30px 50px 75px;
}

.article-2a-div-b{

	padding: 20px 0 0 30px;
}

.article-2a-grid{

	display: grid;
	grid-template-rows: repeat(2, 215px);
	grid-template-columns: repeat(2,265px);
	grid-gap: 13px;
}

.article-2a-grid img{

	width: 250px;
	height: 200px;
	outline: 4px solid rgba(200,0,0,50%); box-shadow: 5px 5px 10px 0 rgba(0,0,0,50%);
}

.article-2a-div-b p{

	padding: 30px 200px 30px 10px;
	margin: 40px auto;
	font-size: 15px;
	line-height: 18px;
	background: linear-gradient(45deg, rgba(50,50,50), rgba(0,0,0,0%) 70%) 
}

.article-2a-div-b p span{

	font-size: 22px;
	font-weight: bold;
}

.section-2 h1{

	margin: 0 115px 25px 115px;
}

.section-2 h3{

	margin: 50px 50px 5px 50px;
}

.article-2b{

	align-self: center;
	display: flex; flex-wrap: wrap;
	justify-content: center;
	width: 95%;
}

.article-2b-item{

	flex-grow: 1;
	height: 200px;
	outline: 4px solid rgba(200,0,0,50%); box-shadow: 5px 5px 10px 0 rgba(0,0,0,50%);
	margin: 15px;
	min-width: 375px;
	max-width: 375px;
	opacity: 80%;

	transition: all .2s;
}

.article-2b-item img{

	width: 100%; height: 100%;
	object-fit: cover;
}

.article-2b-item:hover{

	position: relative;
	z-index: 100;
	transform: scale(105%); opacity: 100%;
	box-shadow: 5px 5px 10px 0 rgba(200,200,200,40%);
}

.article-2c{

	background: rgba(100,100,100,80%);
	box-shadow: 5px 5px 10px 0 rgba(0,0,0,50%); outline: 3px solid rgba(50,50,50,90%);
	width: 90%; height: 125px;
	margin: 5px auto 50px auto; padding: 25px;
	flex-grow: 1;
	display: flex;
	align-items: center;
	overflow: hidden; 
}

.article-2c ul{

	margin: 0; padding: 0;
	list-style: none;
	display: flex; position: relative;
	justify-content: space-evenly;
	width: 100%;
	left: 780px;
	animation-name: slider-b;
	animation-direction: alternate;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
	animation-delay: 2s;
}

.article-2c li{

	margin: 0 15px;
}

.article-2c img{

	width: 160px; height: 130px;
	outline: 4px solid rgba(200,0,0,50%);
	box-shadow: 5px 5px 10px 0 rgba(0,0,0,30%);
	opacity: 90%;
	object-fit: cover;
	transition: all .3s;
}

.article-2c img:hover{

	position: relative;
	transform: scale(120%); opacity: 100%;
	box-shadow: 5px 7px 15px 0 rgba(200,200,200,60%);
}


@keyframes slider-b{

	0%{

		left: 780px;
	}

	100%{

		left: -700px;
	}
}
/*SECTION 3----------------------------------------*/

.section-3{

	background: url(mapachaca.png); 
	background-position: center; 
	background-size: cover;
	display: flex; 
	flex-direction: row; 
	align-items: flex-start;
	height: 500px;

}

.article-3a, .article-3b{

	flex-grow: 1;
	width: 100%;
}

iframe{

	width: 700px; height: 475px;
	margin: 65px 50px 50px 50px;
	box-shadow: 5px 5px 10px 0 rgba(0,0,0,50%); outline: 3px solid rgba(200,0,0,90%);
}

.article-3b{

	margin: 100px auto;
}

.article-3b p span{

	font-size: 27px;
	font-weight: bold;
}

.article-3b-parrafo{

	padding: 30px 180px 30px 10px;
	font-size: 15px;
	line-height: 25px;

	background: linear-gradient(45deg, rgba(30,30,30), rgba(0,0,0,0%) 70%) 
}

.article-3b p a{

	line-height: 40px;
	font-weight: bold;
	padding: 3px 8px;
	background: rgba(150,0,0,50%);	
	outline: 3px solid rgba(200,0,0,50%);
}

.article-3b-redes{

	display: flex;
}

.article-3b-redes a, img{

	width: 50px;
	margin: 0 15px 0 0;
	opacity: 80%;
	transition: all .2s;
}

.article-3b-redes > a img:hover{

	transform: scale(110%); opacity: 100%;
	box-shadow: 5px 5px 5px 0 rgba(200,200,200,20%);	
}

.ig{

	border-radius: 25%;
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,40%);	
}

.fb{

	border-radius: 10%;
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,40%);
}

.ds{

	border-radius: 50%;
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,40%);
}

#tabla_bdd{
	color: black !important;
}
/*FOOTER----------------------------------------*/

footer{

	width: 100%; height: 75px; 
	background: rgba(40,40,40);
	text-align: center;
	position: absolute; display: flex;
	bottom: 0;
	margin: 70px 0 0 0;
}

footer p{

	color: rgba(200,200,200,70%);
	flex-grow: 1;
}