@charset "UTF-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CSS resert*/
*{
	box-sizing: border-box;
}


body p{
	font-family: 'Domine', serif;
	font-size: 18pt;
	line-height: 30px;
	
}

h1, h2, h3, h4, h5,h6, h7, h8{
	font-family: 'Francois One', sans-serif;
	
}
h1{
	line-height: 70px;
}
body{
	overflow-x: hidden;
}

h1{
	font-size: 44pt;
}
h2, h3, h4, h5,h6, h7, h8{
	font-size: 54pt;
}
img{
	max-width: 100%;
	overflow: hidden;
	
}
#cabeza{
	position: relative;
	
}

#cabeza img{
	height: 250px;
}

#pleca1 img{
	height: 40px;
}

#logoexp{
	background-image: url("images/lgo-50-exp.png");
	width: 25%;
	height: 250px;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
    top:0;
	
}

#titulo{
	width: 50%;
	background-image: url("images/titulo.png");
	height: 287px;
	position: absolute;
	float: left;
	top: 0;
	background-size: contain;
	background-repeat: no-repeat;
    margin: 30px 250px 0px 470px; 
}

#logohers{
	width: 15%;
	height: 220px;
	background-image: url("images/lgo-50-her.png");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
    float: right;
	right: 0;
	margin-top: -250px
	
	
}
#pleca1{
	margin-top: -3px;
}

#hero{
	margin-top: -3px;
}
#modulo1{
	
	position: relative;
	overflow: hidden;
}
#txt1{
	
	width: 50%;
	padding: 50px;
	float: left;
	margin-top: 300px;
}

#img1{
	 
	width: 50%;
	height: auto;
    float: left;
	margin-right: auto;
	background-size: contain;
	background-repeat: no-repeat;
}

#modulo2{
	position: relative;
	overflow: hidden;
}

#img2{
	width: 50%;
	float: left;
}

#txt-2{
	width: 50%;
	
	padding: 50px;
	float: left;
	margin-top: 150px;
}

h1{
	position: relative;
	margin-top: 80px;
	margin-left: 50px;
	
}

#date1{
	position: relative;
}
#info1{
	
	margin-top: 50px;
	width: 60%;
	float: left;
	overflow: hidden;
}
h2{
	position: absolute;
	z-index: 1;
	top:100px;
	margin-left: 150px;	
}
.timeline{
	overflow: hidden;
}
#info1  p{
	
	margin-left: 50px;
	margin-top: 50px
}

#img-3{
	
	width:40%;
	float: left;
	margin-top: 140px;
}

#img-4{
	width: 40%;
	float: left;
}
#date2{
	position: relative;
	
}

#date2 p{
	margin-top: 150px;
	padding: 50px;
}
#info2{
	width: 60%;
	float: left;
	
}

h3{
	margin-left: 250px;
	margin-top: -150px	
}

#date3{
	position: relative;
	
}

#info-3{
	width: 60%;
	float: left;
}

h4{
	margin-top: -180px;
	margin-left: 50px;	
}

#info-3 p{
	padding: 50px;
	margin-top: 100px;
}

#img-5{
	width: 40%;
	float: left;
	margin-top: 100px;
}

#img-6{
	width: 40%;
	float: left;
	margin-top: 100px;
}

#info4{
	width: 60%;
	float: left;
	
}

h5{
	margin-left: 250px;
	margin-top: -150px;
}

#info4 p{
	padding: 50px;
	margin-top: 100px;
}

h6{
	margin-left: 50px;
	margin-top: -180px;
}

#info5{
	width: 60%;
	float: left;
	
}

#info5 p{
	padding: 50px;
	margin-top: 200px;
}

#img7{
	width: 40%;
	float: left;
	margin-top: 100px;
}

#fecha6{
	margin-top: 150px;
}

#img8{
	width: 40%;
	float: left;
	
}

#info6{
	width: 60%;
	
	float: left;
}

#info6 p{
	padding: 50px;
	margin-left: 200px;
	margin-top: 100px;
}

h7{
	position: absolute;
	margin-left: 250px;
	margin-top: -150px;
}

h8{
	position: absolute;
	margin-top: -125px;
	margin-left: 50px;
}
#info7{
	width: 35%;
	float: left;
}

#info7 p{
	padding: 50px;
	margin-top: 170px;
}

#img-9{
	width: 65%;
	float: left;
	margin-top: 150px;
}

footer img{
	height: 40px;
	margin-top: -3px;
}

/*Responsive*/

@media screen and (max-width: 1440px){
	
	#titulo{
		margin-left: 380px;
	}
	
	#txt-2{
		margin-top: 50px;
	}
	
	h2{
		margin-top: -20px;
	}
	
	h3{
		margin-top: -140px;
	}
	
	h4{
		margin-top: -170px;
	}
	
	h5{
		
		margin-top: -140px;
	}
	
	h6{
		margin-top: -165px;
	}
	
	h8{
		font-size: 45pt;
		margin-top: -105px
	}
}

@media screen and (max-width: 1340px){
	#logoexp{
		
		margin-top: -5px;
		height: 250px;
	}
	
	#titulo{
		
		margin-left: 300px;
	}
	
	#txt1{
		
		margin-top: 230px;
	}
	
	#txt-2{
		margin-top: 40px;
	}
	h2{
		margin-top: -20px;
	}
	h3{
		
		margin-top: -135px;
	}
	
	h4{
		margin-top: -155px;
      }
	
	h5{
		
		margin-top: -135px;
	}

	h6{
		margin-top: -155px;
	}
	
	h7{
		margin-top: -135px;
	}
	
	h8{
		
		margin-top: -102px
	}

}

@media screen and (max-width: 1250px){
	
	#txt-2{
		
		margin-top: 20px;
	}
	
	h8{
		margin-top: -97px
	}
}

@media screen and (max-width: 1210px){
	
	h2, h3, h4 ,h5, h6,  h7{
		
		font-size: 50pt;
	}
}
@media screen and (max-width: 1030px){
	
	#titulo{
		
		margin-left: 250px;
		margin-top: 50px;
	}
	
	body p{
		
		font-size: 13pt;
	}
	
	h2, h3, h4, h5, h6, h7, h8 {
		font-size: 35pt;
	}
	
	#logoexp{
		
		margin-top: -5px;
	}
	
	#logohers{
		width: 220px;
	}
	
	#txt1{
		
		margin-top: 30px;
	}
	
	#txt-2{
		
		margin-top: -20px;
	}
	
	#info5 p{
		margin-top: 80px;
	}
	
	h1{
		font-size: 40pt;
		
	
}
	
	h2{
		margin-top: -35px;
	}
	
	h3{
		margin-top: -100px;
	}
	
	h4{
		margin-top: -120px;
	}
	
	h5{
		margin-top: -100px;
	}
	
	h6{
		margin-top: -115px;
	}
	
	h7{
		margin-top: -100px;
	}
	
	h8{
		margin-top: -79px;
	}
}

@media screen and (max-width: 775px){
	
	#titulo{
		
		margin-left: 180px;
	}
	
	body p{
		
		font-size: 10pt;
		line-height: 17px
	}
	h1{
		font-size: 35pt;
	}
	h2, h3, h4 , h5, h6, h7, h8{
		
		font-size: 22pt;
	}
	
	#txt1{
		margin-top: 20px;
	}
	
	#txt-2{
		margin-top: -20px;
	}
	
	h2{
		margin-top: -50px;
	}
	
	h3{
		margin-top: -70px;
	}
	
	#info2 p {
		margin-top: 70px;
	}
	
	h4{
		
		margin-top: -85px;
		
	}
	
	#info-3 p{
		margin-top: 50px;
	}
	
	h5{
		
		margin-top: -70px;
	}
	
	#info4 p{
		
		margin-top: 50px;
	}
	
	h6{
		
		margin-top: -85px;
	}
	
	#info5 p{
		margin-top: 80px;
	}
	
	h7{
		margin-top: -70px;
	}
	
	#info6 p{
		padding: 15px;
	}
	
	h8{
		margin-top: -55px;
	}
	
	#info7 p{
		margin-top: 100px;
	}
}

@media screen and (max-width: 420px){
	.timeline{
		overflow: visible;
	}
	
	#cabeza img {
	height: 120px;
	}
	
	#pleca1 img{
		height: 25px;
	}
	
	footer img{
		height: 30px;
	}
	
	#titulo{
		margin-left: 85px;
	}
	
	#logohers{
		width: 100px;
		margin-top: -120px;
	}
	#titulo{
		margin-left: 100px;
		margin-top: 20px;
		}
	
	#txt1{
		float: none;
		width: 100%
	}
	#modulo2{
		overflow: visible;
	}
	#img1{
		float: none;
		width: 100%;
	}
	
	#img2{
		
		float: none;
		width: 100%;
		
	}
	
	#img2 img{
		
		margin-top: 300px
	}
	
	#txt-2{
		float: none;
		width: 100%;
		margin-top: -550px
	}
	
	h1{
		font-size: 22pt;
		margin-top: 280px;
		margin-left: 30px;	
	}
	
	h2{
		margin-top: -70px
	}
	
	h3{
		margin-top: -57px;
	}
	
	#info1{
		float: none;
		width: 93%;
	}
	
	#img-3{
		
		float: none;
		width: 100%;
		margin-top: 50px;
	}
	
	h2{
		margin-top: -65px;
	}
	
	#info2{
		float: none;
		width: 93%;
		margin-left: 27px;
		margin-top: -590px	
	}
	
	#info2 p{
		margin-top: 15px;
	}
	
	#img-4{
		float: none;
		width: 100%;
		margin-top: 200px;
	}
	
	h3{
		margin-left: 90px;
		margin-top: -60px
	}
	
	#info-3{
		
		float: none;
		width: 93%;
		margin-top: 350px
	}
	
	#img-5{
		float: none;
		width: 100%;
		margin-top: 40px;
	}
	
	h4{
		margin-top: -70px
	}
	
	#info4{
		float: none;
		width: 93%;
		margin-left: 27px;
		margin-top: -620px
	}
	
	#img-6{
		float: none;
		width: 100%;
		margin-top: 380px
	}
	h5{
		margin-left: 95px;
		margin-top: -60px;
	}
	
	#info5{
		
		float: none;
		width: 93%;
		margin-top: 270px
	}
	#img7{
		float: none;
		width: 100%;
		margin-top: -10px
	}
	
	h6{
		margin-top: -70px
	}
	
	#info6{
		float: none;
		width: 93%;
		margin-top: -650px;
		margin-left: 30px;
	}
	
	#info6 p{
		width: 95%;
		margin-left: 30px;
		margin-top: 20px
	}
	
	#img8{
		float: none;
		width: 40%;
		margin-left: 140px;
		margin-top: 150px
	}
	
	h7{
		margin-left: 100px;
		margin-top: -60px
	}
	
	#info7{
		float: none;
		width: 93%;
		margin-top: 350px;
	}
	
	#info7 p{
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40px
	}
	
	#img-9{
		float: none;
		width: 100%;
		margin-top: 50px
	}
	
	h8{
		margin-top: -70px;
	}
	
	footer img{
		height: 30px;
	}
}
	@media screen and (max-width: 330px){
		
		
		#logoexp{
			margin-top: 7px;
		}
		#titulo{
			margin-left: 68px;
		}
		
		h1{
			font-size: 16pt;
			line-height: 28px;	
		}
		
		h2{
			margin-top: -75px;
		}
		#info2{
			margin-top: -520px;
		}
		h3{
			margin-top: -50px;
			margin-left: 60px;
		}
		h4{
			margin-top: -60px;
			margin-left: 40px;
		}
		
		#info4{
			margin-top: -550px;
			margin-left: 50px;
		}
		h5{
			margin-left: 60px;
			margin-top: -52px;
		}
		
		#info5{
			margin-top: 170px;
		}
		
		h6{
			margin-top: -60px;
		}
		
		#info6{
			margin-top: -620px;
		}
		h7{
			margin-left: 55px;
			margin-top: -52px;
		}
		
		#img8 img{
			margin-top: 60px;
			margin-left: -30px;
		}
		
		h8{
			
			margin-top: -60px;
		}
	}