body { background: white; }

main { /*height: 64rem;*/ padding: 0 4rem;  aspect-ratio: 1920 / 1180; position: relative; overflow: hidden;  }
section { max-width: 90%; margin: 0 auto; position: relative; height: 100%; }

main aside img { display: block; }


#block1 { background: url('images/new/bg1.jpg') center center no-repeat; background-size: cover; }

#block1 section {  }

.logo { height: 2.5rem; margin-top: 4rem; }

#block1 aside { position: absolute; right: 0; top: 0; width: 45%; height: 100%; }
#block1 aside img { position: absolute; right: 0; bottom: 15%; height: 66%; }


#block2 { background: url('images/new/bg2.png') top center no-repeat; background-size: cover; /*margin-top: -27%;*/ z-index: 20; position: relative; overflow: hidden; }
#block2 section { /*margin-top: 20rem;*/ height: 100%; }

#block2 article { position: absolute; right: 0; top: 0%; width: 45%; }

#block2 aside { position: absolute; left: 0; bottom: 0; width: 50%; height: 100%; }
/*#block2 aside img { height: 72%; position: absolute; left: 0; bottom: 0%; }*/

#block2 aside .poet { height: 72%; position: absolute; left: 0; bottom: 0%; aspect-ratio: 832 / 849; }
.poet_body { width: 100%; }
.poet_hand { width: 6.8%; position: absolute; left: 42%; top: 38%; z-index: 2; transform-origin: 60% 60%; animation: poema 800ms linear alternate infinite; }

@keyframes poema {
      0% { rotate: 0deg; }
      100% { rotate: 10deg; }
}

#block2 h2 { margin-bottom: 0.8rem; }
#block2 p { font-size: 1.1rem; }


#block3 { background: url('images/new/bg3.png') top center no-repeat; background-size: contain; margin-top: -26rem; z-index: 30; position: relative; aspect-ratio: 1920 / 830; }
#block3 section {  }

#block3 article { position: absolute; right: 0; top: 0%; width: 50%; z-index: 50; }

#block3 aside { position: absolute; left: 10%; bottom: 0; width: 50%; height: 100%; }
#block3 aside img { height: 58%; position: absolute; left: 0; bottom: 0.25rem; z-index: 10; }




#block3 .cloud { padding: 1.5rem; background: #F6F9FF; border-radius: 2rem; font-size: 1.1rem; }
#block3 .cloud span  { font-family: 'Normalidad Compact Light'; font-weight: normal; line-height: 120%; display: block; margin-bottom: 0.5rem; }
#block3 .cloud b { font-weight: normal; font-family: 'Normalidad Compact Medium'; }

#block3 > img { position: absolute; }

.tower { height: 58%; left: 13%; bottom: 0.25rem; z-index: 10; }
.grass1 { width: 100%; bottom: 0; left: 0; z-index: 20; }
.grass2 { width: 100%; bottom: 0.25rem; left: 0; z-index: 4; }
.grass3 { width: 49%; bottom: 1rem; right: 0; z-index: 3; }
.grass4 { width: 100%; bottom: 0.25rem; right: 0;  z-index: 2; }


.underground { position: relative; overflow: hidden; }

.ground { display: block;  background: url('images/ground2.svg') top center no-repeat; background-size: cover; aspect-ratio: 1920 / 419; position: relative; }
.bur { height: 83%; left: 20%; top: 0; z-index: 2; position: absolute; }
.neft { height: 9%; left: 23%; top: 78%; z-index: 2; position: absolute; }


.bonus { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.speech { padding: 1.5rem 2rem; 
	border: solid 1px rgba(255,255,255,0.2);
	background-color: rgba(249,249,249,0.18); 
	backdrop-filter: blur(0.2rem);     
	/*-webkit-backdrop-filter: blur(0.9rem); */
	width: 27rem; border-radius: 2rem; color: white; text-align: center;
	margin: 0 auto;
	position: relative; top: 25%; z-index: 25;
	line-height: 120%;
	font-size: 1.1rem;
}

.speech_d { filter: blur(1px); }

.kern { position: absolute; left: 50%; margin-left: 13rem; height: 78%; top: 35%; z-index: 50; display: block; }

.fix { position: absolute; bottom: 1rem; text-align: center; z-index: 1000; left: 50%; margin-left: -6rem; }
.fix form { margin: 0 auto; }
.fix form button { /*width: 12rem; height: 3.75rem; font-size: 1.2rem;*/ }

footer { display: block; position: relative; }
















@media (max-width: 1899px){
	section { max-width: 100%; }
}
@media (max-width: 1699px){
	
}
@media (max-width: 1599px), (max-height: 800px){

	
}

@media (max-width: 1399px), (max-height: 750px){

	h1 { font-size: 6rem; margin-top: 4rem; }
	
	.speech { top: 1.5rem; }
	.fix { bottom: 0.5rem; }
}

@media (max-width: 1199px), (max-height: 700px){
	main { padding: 0 2rem; }
	footer { padding: 2rem; }
}
@media (max-width: 1099px){

}
@media (max-width: 999px){

	main { padding: 0 2rem; }
	footer { padding: 2rem; }
	h1 { font-size: 5rem; }
	
	#block3 article { top: -2rem; }

	#block3 form { margin-top: 0.5rem; }
	
	/*.extra { height: 5rem; }*/
	
	.speech { top: 1rem; padding: 1rem;}
	.fix { bottom: 0rem; }
}
@media (max-width: 820px){
	.logo { margin-top: 2rem; }
	h1 { font-size: 3.5rem;  margin: 2.5rem 0 3rem 0; }
	h2 { font-size: 1.2rem; }
	footer section { flex-direction: column; gap: 2rem; }

}
@media (max-width: 700px){
	h1 { font-size: 4.5rem; }
	main { aspect-ratio: initial; /*height: 45rem;*/ padding: 0; }
	section { padding: 0 1.5rem; }

	#block1 { /*background-position: bottom left;*/ background-size: 140%;  }
	#block1 aside { position: relative; width: 100%; margin-top: 1rem; }
	#block1 aside img { height: 20rem; bottom: 0; position: relative; margin: 0 auto; }
	
	#block2 { background-position: top left; background-size: 170%; }
	#block2 section { background: url('images/new/bg2.png') bottom right no-repeat; background-size: cover; }
	#block2 article { position: relative; width: 100%;  }
	#block2 aside { position: relative; width: 100%; margin-top: 1rem; }
	/*#block2 aside img { height: 20rem; bottom: 0; position: relative; margin: 0 auto; }*/
	#block2 aside .poet { height: 20rem; bottom: 0; position: relative; margin: 0 auto; }
	
	#block3 { aspect-ratio: initial; background-size: 170%;  background-position: top right; overflow: hidden; }
	#block3 article { position: initial; width: 100%; }
	#block3 form { margin-top: 1.5rem; }
	
	#block3 > img.tower { height: 20rem; position: relative; margin-top: 2rem; }
	.grass1 { height: 4.4rem; width: auto; left: -8.6rem;  }
	.grass2 { height: 6.0rem; width: auto; left: -8.6rem;  }
	.grass3, .grass4 { display: none; }
	
	.underground { background: #333333; }
	
	.ground { height: 12.6rem; aspect-ratio: initial;  }
	.bur { height: 11.1rem; left: 13%; margin-left: 5.7rem; }
	.neft { height: 1.26rem; left: 13%; margin-left: 7.2rem; top: 10.4rem; }
	
	.bonus { position: relative; height: auto;  padding: 1px 0; }
	.speech { margin: 1.5rem; top: 0; padding: 1.5rem; width: auto; }
	.kern { position: relative; left: auto; top: auto; margin: 0 auto 0 auto; height: 10rem; }
	
	.fix { left: 0; margin-left: 1.5rem; bottom: 1.5rem; }
}

@media (max-width: 499px){
	
	

}
@media (max-width: 360px){
	h1 { font-size: 3.5rem; }
}