@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,300&family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

body {
	background: #DCDFD9;
 	font-family: 'Bitter', serif;
	
	
}

.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 35vh;
	font-size: 36px;
	text-transform: uppercase;
}

.container {
	width: 90%;
	max-width: 100%;
	margin: 120px auto;
	display: flex;
	flex-direction: column;
	position: relative;
}

.container::after {
	content: "";
	width: 2px;
	height: 100%;
	position: absolute;
	top: 0;
	left: calc(50% - 1px);
	z-index: 1;
}

.evento {
	display: flex;
	justify-content: space-between;
	margin-bottom: 200px;
	position: relative;
}

.fecha {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(42% + 20px);
	
}
.fecha h3{font-size: 20px;line-height: 22px;}
.fecha p{font-size: 22px;line-height: 28px;font-family: 'Open Sans', serif;font-weight: 400;}

.foto {
	width: 42%;
	height: 100%;
	position: relative;

}

.foto::after {
	content: "";
	display: block;
	border: 20px solid transparent;
	border-left: 20px solid #39394a;
	position: absolute;
	right: -50px;
	top: calc(50% - 20px);
}

.foto img {
	width: 100%;
	vertical-align: top;
}

.evento:nth-child(even) {
	flex-direction: row-reverse;
}

.evento:nth-child(even) .fecha {
	justify-content: center;
}

.evento:nth-child(even) .foto::after {
	content: "";
	border: 20px solid transparent;
	border-right: 20px solid #39394a;
	right: initial;
	left: -50px;
}


/* Flecha scroll-down de cabecera*/
@keyframes pulse {
	0% {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
	}
	50% {
	 -webkit-transform: translate(0, 10px);
	transform: translate(0, 10px);
	}
	100% {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
	}
}

.hero__scroll .chevron {

display: block;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
color: black;
text-align: center;

}
.hero{text-align: center;}
.chevron::before {
border-style: solid;
border-width: 0.15em 0.15em 0 0;
content: '';
display: inline-block;
height: 40px;
position: relative;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
vertical-align: top;
width: 40px;
}
.chevron.bottom:before {
top: 0;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.hero__scroll {

}


	@media only screen and (min-width: 320px) and (max-width: 480px) {

	.evento{flex-direction: column;margin-bottom: 50px;}
	.foto{width: 100%;}
	.foto::after {display:none;}

	.fecha{align-items: normal;width: 100%;padding-top: 20px;}
	.evento:nth-child(even) {flex-direction: inherit;}
	.banner.style5.fullscreen {min-height: 70vh;}
	.chevron::before {		
		height: 30px;		
		width: 30px;
		}
	.small-devices {padding: 2.5rem 2rem 2.5rem;}
	.fecha p{font-size: 18px;line-height: 23px;}

	}

	@media only screen and (min-width: 480px) and (max-width: 576px) {

	.evento{flex-direction: column;margin-bottom: 50px;}
	.foto{width: 100%;}
	.foto::after {display:none;}

	.fecha{align-items: normal;width: 100%;padding-top: 20px;}
	.evento:nth-child(even) {flex-direction: inherit;}
	.banner.style5.fullscreen {min-height: 70vh;}
	.chevron::before {		
		height: 30px;		
		width: 30px;
		}
	.small-devices {padding: 2.5rem 2rem 2.5rem;}
	.fecha p{font-size: 18px;line-height: 23px;}
	}