@font-face{
	font-family:'Bahnschrift';
	src:url('/wp-content/fonts/Bahnschrift.woff2');
}

@font-face{
	font-family:'TheBoldFont';
	src:url('/wp-content/fonts/TheBoldFont-Bold.woff2');
}

*{
	color:white;
	font-family:'Bahnschrift';
}

html :where(p.has-background){
	padding:0 !important;
}

body{
	background-color:#000000;
}


h2,h1,h4,p{
font-family:'Bahnschrift';
animation: popP 1s linear forwards;
margin:12px;
}

p{
	color:white;
}

h1,h2,h3,h4,strong{
	color:#869c37;
}


a{
	color:#b9c68b;
	margin: 0 3px;
	font-family:'Bahnschrift';
}

.nav-previous,.nav-next{
display:none;
}

/*Contenedor de texto (abajo)*/

.text{
	width:100%;
	margin-top:20px;
	padding:2% 12%;
	box-sizing:border-box;
}

.text h3{
margin: 0.7em;
margin-left:2em;
}

/*ocultar comentarios*/

#comments {
display:none;
}

/*Contenedor de arriba */

.media {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 65vh;
	/* margin-top:10px; */
}
.media .extracto{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	height: 100%;
	background-color: #859b36;
	padding: 7%;
	box-sizing: border-box;
}

.media .extracto h1, .media .extracto h2, .media .extracto p {
	color: white;
	text-align: left;
	margin: 10px;
	animation: textpopUp 0.7s ease-in-out forwards;
}

.media .extracto h1, .media .extracto p{
	font-family:'Bahnschrift';
}

.media .extracto h2{
	font-family:'TheBoldFont';	
}

.media .imagenContainer{
	width: 50%;
	height: 100%;
	overflow: clip;
}

.media .imagenContainer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: imgpopUp 0.7s ease-in-out forwards;
}

.extracto {
    filter: drop-shadow(0px -1px 2px rgba(0,0,0,0.2));
}

@keyframes textpopUp {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes imgpopUp {
	0% {
		transform: translateX(35%);
		opacity: 0.25;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}

}


@keyframes popP {

	0%{
		transform:translateY(130px);
	}
	100%{
		transform:translateY(0px);
	}
}

@media screen and (max-width:850px){
	h1{
		font-size:28px;
	}
	h2{
		font-size:20px;
	}
	p{
		font-size:13px;
	}
	.media {
		flex-direction: column-reverse;
		height: auto;
	}

	.media .extracto, .media .imagenContainer {
		width: 100%;
		height: 300px;
	}

	.media .extracto h1 {
		font-size: 24px;
	}
	
	.media .extracto h2 {
		font-size:19px;
	}

	.media .extracto p {
		font-size: 16px;
	}
	.text{
		padding: 2% 5%;
	}
}

/*padding 1% en movl
mtad margin
*/



@media screen and (max-width:600px){

	h1{
		font-size:25px;
	}
	
	h2{
		font-size:18px;
	}
	
	h3{
		font-size:1em
	}
	
	p{
		font-size:13px;
	}
	.media .extracto h1{
		font-size: 18px;
	}
	
	.media .extracto h2 {
		font-size:15px;
	}

	.media .extracto p {
		font-size: 12px;
	}
	
	.text{
		padding: 2% 1%;
	}
	
	.text h3{
		margin-left:1.25rem;
	}
	
}