* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
/* body { font-family: sans-serif; } */

body{
	color: #0D0D17;
}
.menu_helper{
	position: relative;
	/*height: 100px;*/
}

.font_white{
	color: #F8F4F1;
}
.font_black{
	color: #0D0D17;
}

.red_bg{
	background-color: #E10600;
}
.black_bg{
	background-color: #0D0D17;
}
.white_bg{
	background-color: #F8F4F1;
}

.round_button{
	position: relative;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-content: center;
	background-color: #000;
	border-radius: 100%;
	padding: 18px;
	cursor: pointer;
}
.active .round_button img{
	display: block;
	transform: rotate(180deg);
}


/* Text animation */

.phrase{
	display: inline-block;
}
.phrase .word{
	display: inline-block;
}

.phrase .word .letter_mask{
	display: inline-block;
	overflow: hidden;
}

.phrase .word .letter_mask .letter{
	transform: translateY(11vw);
	display: inline-block;
	transition: all 800ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
	transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
}

.phrase .word .letter_mask .in.letter{
	transform: translateY(0vw);
}


.volunteers_menu{
	position: relative;
	display: flex;
	justify-content: center;
	gap:15px;
	padding-bottom: 5vh;
	z-index: 4;
	opacity: 0;
}
.volunteers_menu.in{
	opacity: 1;
}

.volunteers_menu .white_button{
	background-color: #E3E1E0
}
.white_button a, .white_button a:visited {
	color: #6B696E;
}
.volunteers_menu .white_button.active{
	background-color: #6B696E;
}
.volunteers_menu .white_button.active a{
	color:#fff;
}


.animation_item{
	transition: all 800ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
	transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
}

@media(max-width:992px){
	body{
		font-size: 14px;
	}
	.volunteers_menu{
		flex-wrap: wrap;
	}
	.volunteers_menu .white_button{
		width: 30%;
		text-align: center;
	}
}

@media(max-width:767px){
	.mexicogp_white_logo {
		display: none;
	}
	.mexicogp_black_logo {
		display: block;
	}
	.fa-bars:before {
		content: "\f0c9";
		color: #000;
	}
}

@media(max-width:600px){
	body{
		font-size: 12px;
	}
	.volunteers_menu{
		gap:10px;
	}
	.volunteers_menu .white_button {
		width: 40%;
		font-size: 0.6rem;
	}

	.round_button {
		width: 34px;
		height: 34px;
		padding: 12px;
	}
}

/* HOME */

.page-template-temp_voluntarios_2025_home .mexicogp_white_logo {
	display: none;
}
.page-template-temp_voluntarios_2025_home .mexicogp_black_logo {
	display: block;
}

#voluntarios_grid .grid_container{
	position: relative;
	display: flex;
	width: 100%;
	margin-top: 30px;
	font-size: 1.3rem;
	line-height: 1.4rem;
}
#voluntarios_grid .grid_container .cell{
	position: relative;
	width: 25%;
	padding: 10px;
}
#voluntarios_grid .grid_container.three_cols .cell{
	width: 33%;
}

#voluntarios_grid .grid_container .cell:hover{
	width: 33%;
}
#voluntarios_grid .grid_container.three_cols .cell:hover{
	width: 40%;
}

#voluntarios_grid .grid_container .cell .cell_content{
	position: relative;
	border-radius: 30px;
	overflow: hidden;
}
#voluntarios_grid .grid_container .cell .image{
	position: relative;
	width: 100%;
	height: 70vh;
	z-index: 1;
}
#voluntarios_grid .grid_container .cell .image img{
	position: relative;
	width: 100%;
	height: 100%;
	object-fit:cover;
}
#voluntarios_grid .grid_container .cell .info{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 25px;
}

#voluntarios_grid .grid_container .cell .info .data{
	position: relative;
	opacity: 1;
	z-index: 1;
	width: 20vw;
}
#voluntarios_grid .grid_container .cell:hover .info .data{
	opacity: 0;
}


#voluntarios_grid .grid_container .cell  .number{
	font-size: 60px;
	line-height: 60px;
}

#voluntarios_grid .grid_container .cell .info_hover{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 25px;
}
#voluntarios_grid .grid_container .cell .info_hover:after{
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #f12d1a;
	opacity: 0;
	z-index: 0;
}
#voluntarios_grid .grid_container .cell:hover .info_hover:after{
	opacity: 0.9;
}
#voluntarios_grid .grid_container .cell .info_hover .data{
	position: relative;
	z-index: 1;
	opacity: 0;
	width: 20vw;
}
#voluntarios_grid .grid_container .cell:hover .info_hover .data{
	opacity: 1;
}

#voluntarios_grid .grid_container .cell .info_hover .data .number,
#voluntarios_grid .grid_container .cell .info_hover .data .title,
#voluntarios_grid .grid_container .cell .info_hover .data .extract{
	margin-bottom: 15px;
}
#voluntarios_grid .grid_container .cell .info_hover .data .button{
	margin-bottom: 50px;
}
#voluntarios_grid .grid_container .cell .info_hover .data .extract{
	font-size: 1rem;
	line-height: 1.2rem;
	margin-bottom: 25px;
}

.grid_cell_animation,
#voluntarios_grid .grid_container .cell .info_hover:after,
.tab_block .accordion .accordion_body .cell .role_card:after{
	transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
	transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

@media(max-width:1300px) {

	#voluntarios_grid .grid_container{
		flex-wrap: wrap;
	}
	#voluntarios_grid .grid_container .cell{
		position: relative;
		width: 50%;
	}
	#voluntarios_grid .grid_container.three_cols .cell{
		width: 33.3%;
	}

	#voluntarios_grid .grid_container .cell:hover{
		width: 50%;
	}
	#voluntarios_grid .grid_container.three_cols .cell:hover{
		width: 33.3%;
	}
	#voluntarios_grid .grid_container .cell .image{
		height: 45vh;
	}


	#voluntarios_grid .grid_container .cell:hover .image{
		transform: scale(1.1);
	}

	#voluntarios_grid .grid_container .cell .info .data,
	#voluntarios_grid .grid_container .cell .info_hover .data{
		width: 100%;
	}

}

@media(max-width:768px) {

	#voluntarios_grid .grid_container .cell{
		position: relative;
		width: 100%;
	}

	#voluntarios_grid .grid_container.three_cols .cell{
		width: 100%;
	}

	#voluntarios_grid .grid_container .cell:hover{
		width: 100%;
	}
	#voluntarios_grid .grid_container.three_cols .cell:hover{
		width: 100%;
	}
	#voluntarios_grid .grid_container .cell .image{
		height: 55vh;
	}

	#voluntarios_grid .grid_container .cell .number {
		font-size: 45px;
		line-height: 45px;
	}
	#voluntarios_grid .grid_container .cell .info_hover .data .button{
		margin-bottom: 30px;
	}
}



/* HERO */

.hero{
	position: relative;
	width: 100vw;
	max-width: 100%;
	height: auto;
}
.hero:after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #F8F4F1;
	z-index: 20;
}
.in.hero:after{
	display: none;
	pointer-events: none;
	width: 0%;
	height: 0%;
}

.hero .text-content{
	position: relative;
	z-index: 1;
}
.page-template-temp_voluntarios_2025_conocenos .hero{
	height: 100vh;
}
.page-template-temp_voluntarios_2025_conocenos .hero .text-content{
	padding: 20vh 0 5vh;
	text-align: center;
	height: 85%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-template-temp_voluntarios_2025_conocenos .hero .title{
	font-size: 10vw;
	line-height: 10vw;
	color:#F8F4F1;
}

.hero .hero_image{
	position: absolute;
	z-index: 0;
}
.page-template-temp_voluntarios_2025_conocenos .hero .hero_image{
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.page-template-temp_voluntarios_2025_conocenos .hero .hero_image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero .items-container{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}
.hero .items-container .star{
	position: absolute;
	width: 5vw;
	max-width: 180px;
	height: auto;
	transform: scale(0);
}
.hero .items-container .star.in{
	transform: scale(1);
}

.page-template-temp_voluntarios_2025_conocenos .hero .star:nth-child(1){
	left: 5%; top: 15%;
}
.page-template-temp_voluntarios_2025_conocenos .hero .star:nth-child(2){
	left: 85%; top: 19%;
}
.page-template-temp_voluntarios_2025_conocenos .hero .star:nth-child(3){
	left: 75%; top: 60%;
}

@media (max-width:767px) {
	.page-template-temp_voluntarios_2025_conocenos .hero .text-content{
		height: 80%;
	}
	.page-template-temp_voluntarios_2025_conocenos .hero{
		height: 90vh;
	}

	.hero .items-container .star{
		width: 15vw;
	}
}


#carAnimation{
	position: relative;
	padding: 10vh 5vw;
}
#carAnimation .bg{
	position: absolute;
	background-color: #F8F4F1;
	z-index: 0;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
}
#carAnimation .bg.in{
	background-color: black;
}
#carAnimation.in{
	background-color: #000;
}

#carAnimation .text-content{
	opacity: 0;
}
#carAnimation .text-content.in{
	opacity: 1;
}
#carAnimation .text-content:nth-child(2){
	position: absolute;
	height: 70%;
	display: flex;
	align-items: center;
	left: 0;
	top: 0;
	justify-content: center;
	z-index: 1;
}
#carAnimation .text-content .title{
	font-size: 10vw;
	line-height: 10vw;

}
#carAnimation .text-content:nth-child(3){
	position: relative;
	display: flex;
	justify-content: flex-end;
	z-index: 3;
	padding: 20vh 0 10vh;
}

#carAnimation .text-content .desc{
	font-size: 6vw;
	line-height: 6vw;
	width: 60%;
}
#carAnimation .car{
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 70%;
	top: 0;
	left: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
}
#carAnimation .car .car_animation{
	position: relative;
	left: calc( 100% + 300px);
	transition: all 2000ms cubic-bezier(0.455, 0.030, 0.515, 0.955); /* easeInOutQuad */

	transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); /* easeInOutQuad */
}
#carAnimation .car .car_animation.in{
	left: -100vw;
}

#carAnimation .car img{
	width: 100%;
	height: auto;
}
#carAnimation .note{
	position: absolute;
	bottom: 17%;
	left: 5vw;
	width: 80%;
	max-width: 400px;
}

@media(max-width:992px){
	#carAnimation .text-content .desc {
		font-size: 8vw;
		line-height: 8vw;
		width: 75%;
	}
	#carAnimation .note{
		position: absolute;
		bottom: 14%;
		left: 28%;
		width: auto;
		max-width: 400px;
	}
}

@media(max-width:600px){
	#carAnimation .note{
		padding-right: 10px;
	}
}

#videoPlayerContainer{
	position: relative;
	width: 100%;
	overflow: hidden;
}
#videoPlayerContainer video, #videoPlayerContainer img{
	position: relative;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

#playVideoBtn{
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 3vw;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	left: 0;
	top: 0;
	cursor: pointer;
	background-color: rgba(0,0,0,0.5)
}
#playVideoBtn .play-icon{
	width: 30%;
	max-width: 130px;
}

#playVideoBtn .play-icon img{
	width: 100%;
	height: auto;
}

@media(max-width:600px){
	#playVideoBtn{
		display: none;
	}
}


#missionContainer{
	position: relative;
	padding: 35vh 5vw 10vh;
	font-size: 8vw;
	line-height: 8vw;
	overflow: hidden;
}

#missionContainer .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
#missionContainer .bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.2);
}
#missionContainer .text-content{
	position: relative;
	z-index: 1;
}

#visionContainer{
	position: relative;
	padding: 10vh 5vw;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap:5vh;
}

#visionContainer .medal{
	position: absolute;
	left: 10vw;
	top: 8.5vh;
	width: 18vw;
	z-index: 0;
}
#visionContainer .medal img{
	width: 100%;
	height: auto;
}
#visionContainer .text-content{
	position: relative;
	z-index: 1;
	width: 90%;
	font-size: 6vw;
	line-height: 6vw;
}

#visionContainer .note{
	width: 80%;
	max-width: 450px;
	opacity: 0;
}
#visionContainer .note.in{
	opacity: 1;
}

#history{
	position: relative;
	padding: 10vh 5vw 0;
	text-align: center;
	overflow: hidden;
}
#stickyHistory{
	position: relative;
	z-index: 3;
}
#history .title{
	font-size: 6vw;
	line-height: 6vw;
	margin-bottom: 5vh;
}
#history .subtitle{
	font-size: 1.4vw;
}
#history .note{
	font-size: 1.4rem;
}

#history .ranges-container{
	padding: 0vh 0 10vh;
	position: relative;
}
#history .range{
	position: relative;
	display: flex;
	justify-content: center;
	font-size: 4vw;
	margin-bottom: 0vh;
	width: 100%;
	gap:1vw;
}
#history .range div:nth-child(2){
	width: 15%;
}

#history .range img{
	width: 100%;
	height: auto;
}

.history-volunteers{
	position: relative;
	width: 100%;
}
.history-volunteers img{
	width: 100%;
	height: auto;
}
@media(max-width:1200px){

	#history .note{
		font-size: 1.2rem;
	}

}
@media(max-width:600px){
	#history .range{
		font-size: 9vw;
	}
}

#participants{
	display: inline-block;
	width: 25vw;
}

.carousel-container {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

.carousel-track {
	display: flex;
	transition: transform 0.5s ease;
	will-change: transform;
}

.slide {
	flex-shrink: 0;
	width: 100%;
	/* height: 150px; */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: bold;
}

.carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.carousel-dots .dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #333;
	transition: background 0.3s;
}

.carousel-dots .dot.active {
	background: #E10600;
}

#benefits{
	position: relative;
	padding: 30vh 3vw;
	text-align: center;

}
#benefits .text-content{
	font-size: 8vw;
}
@media(max-width:600px){
	#benefits .text-content {
		font-size: 11vw;
	}
}

#certificate{
	position: relative;
}
#certificate .image{
	position: relative;
	width: 100%;
	z-index: 2;
	background-color: #f8f4f0;
}
#certificate .certificate_image_bg .image{
	position: relative;
	display: block;
}

#certificate .image img{
	width: 100%;
	height: auto;
}
#certificate .text-content{
	position: absolute;
	top:0;
	left: 0;
	padding: 5vw;
	z-index: 2;
}
#certificate .text-content .desc{
	font-size: 6.7vw;
	line-height: 6.7vw;
	margin-bottom: 5vh;
}
#certificate .text-content .note{
	width: 80%;
	max-width: 800px;
	opacity: 0;
}
#certificate .text-content .note.in{
	opacity: 1;
}
#certificate .items-container{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
#certificate .items-container .star{
	position: absolute;
	width: 8vw;
	max-width: 180px;
	height: auto;
	transform: scale(1);
}
#certificate .items-container .star.in{
	transform: scale(1);
}

#certificate .items-container  .star:nth-child(1){
	left: 85%; top: 5%;
}
#certificate .items-container  .star:nth-child(2){
	left: 42%; top: 38%;
}

#certificate .certificate-container{
	position: relative;
	padding: 0 0 30vh;
	display: flex;
	justify-content: center;
	z-index: 4;
	background-color: #f8f4f0;
}
#certificate .certificate-container .paper{
	width: 80%;
	max-width: 800px;
	border-radius: 30px;
	padding: 8vw 2vw;
	transform: rotate(-3.5deg);
	background-image: url(../images/voluntary2025/paper.webp);
	background-size: cover;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	text-align: center;
}
#certificate .certificate-container .paper .title{
	font-size: 4vw;
	line-height: 4vw;
	margin-bottom: 5vh;
}
#certificate .certificate-container .paper .note{
	position: relative;
	width: 70%;
	margin: 0 auto;
}
#certificate .certificate-container .ribbon{
	position: absolute;
	z-index: 2;
	width: 80%;
	max-width: 800px;
	left: 0; right: 0;
	top:-6vw;
	margin: 0 auto;
	text-align: right;
}
#certificate .certificate-container .ribbon img{
	width: 20%;
	max-width: 500px;
	margin-right: -5vw;
}
@media(max-width:768px){
	#certificate .text-content .note {
		width: 80%;
		max-width: 300px;
	}
}
@media(max-width:600px){
	#certificate .text-content .desc {
		font-size: 6vw;
		line-height: 6vw;
	}
	#certificate .text-content .desc{
		margin-bottom: 2vh;
	}
	#certificate .text-content .note {
		width: 43%;
	}
	#certificate .certificate-container .paper .title {
		font-size: 7vw;
		line-height: 7vw;
		margin-bottom: 1vh;
	}
	#certificate .certificate-container .paper .note {
		position: relative;
		width: 85%;
	}
	#certificate .certificate-container .paper {
		width: 89%;
	}
	#certificate .certificate-container .ribbon img {
		margin-right: -8vw;
	}
	#certificate .certificate-container .ribbon{
		top: -8vw;
	}
}


#kit{
	position: relative;
	padding: 10vh 0 20vh;
	display: flex;
	align-items: flex-end;
}
#kit .left{
	position: relative;
	width: 40%;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	padding: 0 2vw;
}

#kit .left .image{
	position: relative;
	width: 80%;
	max-width: 500px;
}
#kit .left .image img{
	width: 100%;
	height: auto;
}
#kit .right{
	width: 60%;
	position: relative;
	z-index: 1;
	padding: 0 2vw;
}
#kit .right .note{
	position: relative;
	width: 100%;
	max-width: 400px;
}

#kit .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	z-index: 0
}
#kit .bg .title{
	font-size: 8vw;
	/* word-break: keep-all;
	white-space: nowrap; */
}

@keyframes slides {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

#kit .bg .title {
	overflow: hidden;
	padding: 30px 0px;
	width: 100%;
	white-space: nowrap;
	position: relative;
}

.title-line {
	display: inline-block;
}
.is-inview .title-line{
	animation: 25s slides infinite linear;
}

.title-line div {
	display: inline-block;
	padding: 0 1vw;
}
@media(max-width:600px){
	#kit {
		padding: 10vh 0 10vh;
	}
	#kit .bg .title{
		margin-bottom: 13vh;
		font-size: 13vw;
	}
}


#volunteersImage02{
	position: relative;
	width:100%;
	display: block;
	overflow: hidden;
}
#volunteersImage02 .image-container{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#volunteersImage02 img{
	width: 100%;
	height: auto;

}

#networking{
	position: relative;
	padding: 30vh 0;
	display: flex;
	justify-content: center;
	text-align: center;
}
#networking .title{
	font-size: 6vw;
}
#networking .note{
	position: relative;
	margin: 0 auto;
	width: 80%;
	max-width: 800px;
	opacity: 0;
}
#networking .note.in{
	opacity: 1;
}
@media(max-width:600px){
	#networking .title {
		font-size: 9vw;
	}
}
#food{
	position: relative;
	padding: 10vh 0 20vh;
	display: flex;
	flex-wrap: wrap;
}
#food .title_container{
	width: 100%;
	font-size: 8vw;
	text-align: center;
	margin-bottom: 3vh;
}
#food .left{
	position: relative;
	width: 40%;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	padding: 0 2vw;
}
#food .left .image{
	position: relative;
	width: 80%;
	max-width: 400px;
	top:-10vh;
}
#food .left .image img{
	width: 100%;
	height: auto;
}
#food .right{
	width: 60%;
	position: relative;
	z-index: 1;
	padding: 3vh 20vw 0 5vw;
	display: flex;
	justify-content: flex-end;
}
#food .right .note{
	position: relative;
	width: 100%;
	max-width: 400px;
	opacity: 0;
}
#food .right .note.in{
	opacity: 1;
}
@media (max-width:600px) {
	#food .title_container {
		font-size: 11vw;
	}
	#food .left .image{
		top:0;
	}
}

#skills{
	position: relative;
	overflow: hidden;
}
#skills .image{
	position: relative;
	z-index: 0;
	width: 100%;
	transform: rotate(11deg);
	transform-origin: right center;
	opacity: 0;
}
#skills .image.in{
	transform: rotate(0deg);
	opacity: 1;
}
#skills .image img{
	width: 100%;
	height: auto;
}
#skills .text-content{
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 5vw;
}
#skills .text-content .title{
	font-size: 8vw;
	line-height: 8vw;
	margin-bottom: 3vh;
	transform: translateX(5vw);
	opacity: 0;
}
#skills .text-content .title.in{
	transform: translateX(1vw);
	transition-delay: 300ms;
	opacity: 1;
}
#skills .text-content .note{
	width: 80%;
	max-width: 600px;
	opacity: 0;
}
#skills .text-content .note.in{
	opacity: 1;
	transition-delay: 500ms;
}
@media(max-width:767px){
	#skills .text-content .title {
		font-size: 6vw;
		line-height: 6vw;
		margin-bottom: 1vh;
	}
	#skills .text-content .note {
		width: 80%;
		max-width: 350px;
		opacity: 0;
	}
}
@media(max-width:600px){
	#skills .image img{
		transform:scale(1.1);
		transform-origin: left;
	}
	#skills .text-content .title {
		font-size: 5vw;
		line-height: 5vw;
	}
	#skills .text-content .note {
		width: 60%;
		font-size: 0.7rem;
	}
}

#conditions{
	position: relative;
}
#conditions .image{
	position: relative;
	z-index: 0;
	width: 100%;
	z-index: 1;
}
#conditions .image img{
	width: 100%;
	height: auto;
}
#conditions .title-container{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 30vh;
	margin-bottom: 10vh;
	padding: 5vh 0;
	z-index: 0;
	overflow: hidden;
}
#conditions .title{
	position: relative;
	font-size: 7vw;
	background-color: #fff;
	transform: rotate(-9deg) translateX(-5vw) translateY(1vw);
	text-align: center;
	opacity: 0;
}
#conditions .title.in{
	transform: rotate(-9deg) translateX(0) translateY(0);
	opacity: 1;
}

#conditions .text-content{
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 5vw;
	z-index: 2;
}

#conditions .text-content .text{
	position: relative;
	width: 50%;
	opacity: 0;
}
#conditions .text-content .text.in{
	opacity: 1;
}
#conditions .text-content .text .subtitle{
	font-size: 1.3rem;
}
@media(max-width:992px){
	#conditions .title.in {
		transform: rotate(-9deg) translateX(13vw) translateY(-1vw);
	}
}
@media(max-width:767px){
	#conditions .text-content .text {
		position: relative;
		width: 55%;
		padding-top: 6vh;
	}
}
@media(max-width:600px){
	#conditions .title.in {
		transform: rotate(-9deg) translateX(7vw) translateY(0vw);
	}
	#conditions .image {
		position: absolute;
		z-index: 0;
		width: 100%;
		z-index: 1;
		padding:0 0px;
		height: 100%;
	}
	#conditions .image img{
		height: 100%;
		object-fit: cover;
	}
	#conditions .title {
		font-size: 8vw;
	}
	#conditions .text-content {
		position: relative;
		padding: 6vh 5vw;
	}
	#conditions .text-content .text{
		padding-top: 8vh;
	}
}

#volunteers03{
	position: relative;
	font-size: 7vw;
	line-height: 7vw;
	padding: 5vw;
}

#track,
#trackAnimation{
	position: relative;
	/* font-size: 7vw;
	line-height: 7vw;
	padding: 5vw; */
}

.lottie-sticky-wrapper {
  height: 500vh; /* duration of sticky */
  position: relative; /* required for sticky targeting */
}

#lottie-animation {
  height: 100vh;
  width: 100%;
}


#testimony{
	position: relative;
	width: 100%;
	padding: 10vh 5vw;
}
#testimony .title{
	margin-bottom: 10vh;
	font-size: 6vw;
	text-align: center;
}
#testimony .testimony-items-container{
	position: relative;
	display:flex;
	gap:2vw;
}
#testimony .testimony-items-container .item{
	border-radius: 20px;
	padding: 5vh 5vw;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap:2vh;
	transform: scale(0.5);
	opacity: 0;
}
#testimony .testimony-items-container .item.in{
	transform: scale(1);
	opacity: 1;
}
#testimony .testimony-items-container .item .image{
	text-align: center;
}
#testimony .testimony-items-container .item .image img{
	position: relative;
	width: 30%;
	height: auto;

}
#testimony .testimony-items-container .item .name{
	font-size: 1.3rem;
}
#testimony .testimony-items-container .item .text{
	font-style: italic;
}
@media(max-width:767px){
	#testimony .testimony-items-container {
		flex-direction: column;
	}
}
@media(max-width:600px){
	#testimony .title {
		font-size: 10vw;
		margin-bottom: 5vh;
	}
}

#attitude{
	position: relative;
	padding: 40vh 10vw;
	font-size: 8vw;
	line-height: 8vw;
	text-align: center;
}
#attitude .text-content{
	position: relative;
	z-index: 1;
}
#attitude .images{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
#attitude .images .image{
	position: absolute;
	border-radius: 20px;
	overflow: hidden;
}
#attitude .images .image:nth-child(1){
	left: 10%;
	top:10%;
	width: 40%;
	transform: rotate(-6deg);
}
#attitude .images .image:nth-child(2){
	left: 9%;
	top:44%;
	width: 24%;
	transform: rotate(-3deg);
}
#attitude .images .image:nth-child(3){
	left: 75%;
	top:58%;
	width: 20%;
	transform: rotate(6deg);
}
#attitude .images .image img{
	width: 100%;
	height: auto;
}
@media(max-width:600px){
	#attitude{
		padding: 30vh 10vw;
	}
	#attitude .images .image:nth-child(1) {
		left: 10%;
		top: 20%;
		width: 45%;
	}
	#attitude .images .image:nth-child(2){
		width: 30%;
	}
	#attitude .images .image:nth-child(3){
		width: 25%;
	}
}

#call{
	position: relative;
	padding: 10vh 5vw;
	text-align: center;
}
#call .title{
	font-size: 7.5vw;
	line-height: 7vw;

}
#call .title a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap:2vw;
	color:#fff;
	text-decoration: none;
}
#call .title a:hover{
	text-decoration: none;
}

#call .title .round_button img{
	transform: rotate(-90deg);
}

@media(max-width:767px) {

}


.page_content{
	position: relative;
	width: 100%;
}


/* Convocatoria */
.page-template-temp_voluntarios_2025_participa .hero .title{
	font-size: 8vw;
	line-height: 7.6vw;
	width: 80%;
	padding: 100px 5vw;
}
.page-template-temp_voluntarios_2025_participa .hero .hero_image{
	right: 5%;
	bottom: 0;
	width: 38vw;
}
.page-template-temp_voluntarios_2025_participa .hero .hero_image img{
	width: 100%;
	height: auto;
}
.page-template-temp_voluntarios_2025_participa .hero .items-container .star{
	width: 8vw;
}

.page-template-temp_voluntarios_2025_participa .hero .items-container .star:nth-child(1){
	left: 87%;
	top: 20%;
}
.page-template-temp_voluntarios_2025_participa .hero .items-container .star:nth-child(2){
	left: 50%;
	top: 67%;
}

.participate_content{
	display: flex;
}
.participate_content .left,
.participate_content .right{
	width: 50%;
}
.participate_content .left{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 6vw;
	line-height: 6vw;
}
.participate_content .left .title{
	width: 80%;
}

.participate_content .right{
	position: relative;
	padding: 10vh 3vw;
}
.race_countdown_big_numbers{
	font-size: 3vw;
}

.with_frm_style .frm_primary_label,
.with_frm_style .frm_radio label, .with_frm_style .frm_checkbox label,
.frm_style_formidable-style.with_frm_style div.frm_description,
select{
	font-family: 'futura_bold' !important;
	text-transform: uppercase;
	color: #000;
}

input[type=text], input[type=email], input[type=date],  input[type=tel], textarea, select, .custom-file-label {
	border-radius: 5px !important;
	border: 2px solid #979797 !important;
	padding: 15px 20px !important;
	margin: 0;
	font-size: 1rem !important;
	line-height: 1rem !important;
	height: auto !important;
}

.frm_style_formidable-style.with_frm_style .frm_submit button{
	background: #000;
	border: 1px solid #000;
	padding: 10px 70px;
	text-transform: uppercase;
	font-family: 'futura_bold' !important;
}
.frm_style_formidable-style.with_frm_style .frm_submit button:hover {
	background: #f22e1a;
	border-color: #f22e1a;
	color: #fff;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
	width: 34% !important;
}
.frm_style_formidable-style.with_frm_style .form-field {
	margin-bottom: 30px;
}
.frm_conf_field{
	margin-top: -15px;
}

@media(max-width:1200px){
	.page-template-temp_voluntarios_2025_participa .hero .hero_image {
		width: 45vw;
	}
}

@media(max-width:992px){
	.participate_content {
		flex-direction: column;
	}
	.participate_content .left, .participate_content .right {
		width: 100%;
	}
	.participate_content .left .title {
		width: 100%;
		text-align: center;
		padding: 10vh 0;
	}
	.race_countdown_big_numbers{
		font-size: 9vw;
	}
}

@media(max-width:600px){

	.page-template-temp_voluntarios_2025_participa .hero .hero_image {
		right: 0%;
		bottom: 0;
		width: 70vw;
	}
	.page-template-temp_voluntarios_2025_participa .hero .title {
		font-size: 10vw;
		line-height: 10vw;
		width: 90%;
		padding: 100px 5vw;
	}
	.participate_content .left{
		font-size: 8vw;
		line-height: 8vw;
	}
	.page-template-temp_voluntarios_2025_participa .hero .items-container .star{
		width: 12vw;
	}
}


/* Roles */
.page-template-temp_voluntarios_2025_roles .hero .title{
	font-size: 9vw;
	line-height: 9vw;
	width: 80%;
	padding: 120px 5vw;
}
.page-template-temp_voluntarios_2025_roles .hero .hero_image{
	right: 5%;
	top: 0;
	width: 24vw;
}
.page-template-temp_voluntarios_2025_roles .hero .hero_image img{
	width: 100%;
	height: auto;
}
.page-template-temp_voluntarios_2025_roles .hero .items-container .star{
	width: 8vw;
}

.page-template-temp_voluntarios_2025_roles .hero .items-container .star:nth-child(1){
	left: 87%;
	top: 20%;
}
.page-template-temp_voluntarios_2025_roles .hero .items-container .star:nth-child(2){
	left: 50%;
	top: 67%;
}

.page-template-temp_voluntarios_2025_roles .roles_content{
	width: 70%;
	position: relative;
	margin: 0 auto;
	padding: 20vh 5vw;
}

.tab_block .accordion.active .accordion_head .title{
	color: #E10600;
}
.tabs_container{
	position: relative;
	font-size: 3vw;
	line-height: 3vw;
	display: flex;
	justify-content: center;
	gap:2vw;
	margin-bottom: 5vh;
}
.tabs_container .option{
	color:#F8F4F1;
	cursor: pointer;

}
.tabs_container .option.active{
	color:#E10600;
}
.tab_block{
	position: relative;
	width: 100%;
}
.tab_block .accordion{
	position: relative;
	width: 100%;
	padding: 30px 20px;
	border:2px solid #D8D8D8;
	border-radius: 8px;
	margin-bottom: 20px;
	overflow: hidden;
	height: 100px;
	display: none;
	background-color: #fff;
}
.tab_description{
	display: none;
	font-size: 1.2rem;
	line-height: 1.3rem;
	margin-bottom: 5vh;
	text-align: center;
}
.tab_block .accordion.visible,
.tab_description.visible{
	display: block;
}
.tab_block .accordion .accordion_head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-size: 1.2rem;
}
/* .round_button{
	position: relative;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-content: center;
	background-color: #000;
	border-radius: 100%;
	padding: 18px;
	cursor: pointer;
}
.active .round_button img{
	display: block;
	transform: rotate(180deg);
} */

.tab_block .accordion .accordion_body{
	position: relative;
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.accordion_body .description{
	margin-bottom: 20px;
	width: 100%;
}

.tab_block .accordion .accordion_body .cell{
	width: 16.66%;
	padding: 5px;
}
.tab_block .accordion .accordion_body .cell .role_card{
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
}
.tab_block .accordion .accordion_body .cell .role_card .image{
	position: relative;
	width: 100%;
	aspect-ratio:1/1.5;
}
.tab_block .accordion .accordion_body .cell:hover .role_card .image{
	transform: scale(1.1);
}
.tab_block .accordion .accordion_body .cell .role_card .image img{
	width: 100%;
	height: 100%;
	object-fit:cover;
}
.tab_block .accordion .accordion_body .cell .role_card .info{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 35px 25px;
	color: #fff;
	z-index: 2;
	background: linear-gradient(0deg,  rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.3) 82%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.tab_block .accordion .accordion_body .cell .role_card:after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #f12d1a;
	opacity: 0;
	z-index: 0;
}
.tab_block .accordion .accordion_body .cell:hover .role_card:after{
	opacity: 0.8;
}
.tab_block .accordion .accordion_body .cell .role_card .info .button{
	position: absolute;
	right: 25px;
	bottom: 35px;
	opacity: 1;
}
.tab_block .accordion .accordion_body .cell:hover .role_card .info .button{
	opacity: 1;
}

.tab_block .accordion .accordion_body .cell .role_card .info .button .border_button.white_border {
	border: 2px solid #fff;
	background-color: #fff;
}
.tab_block .accordion .accordion_body .cell .role_card .info .button .border_button.white_border span {
	color: #f12d1a;
}

.volunteer_popup{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.3);
	opacity: 0;
	pointer-events: none;
}
.volunteer_popup.active{
	opacity: 1;
	pointer-events: all;
}
.volunteer_popup .popup_frame{
	width: 90%;
	height: 45vh;
	min-height: 350px;
	max-width: 1200px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
	transform: translateY(0);
}
.volunteer_popup.active .popup_frame{
	transform: translateY(5vh);
}

.volunteer_popup .popup_frame .popup_content{
	display: flex;
	height: 100%;
}
.volunteer_popup .popup_frame .popup_content .image{
	width: 30%;
	height: 100%;
}
.volunteer_popup .popup_frame .popup_content .image img{
	position: relative;
	width: 100%;
	height: 100%;
	object-fit:cover;
}
.volunteer_popup .popup_frame .popup_content .info{
	width: 70%;
	padding: 3vw;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.volunteer_popup .popup_frame .popup_content .info .title{
	font-size: 1.5rem;
	line-height: 1.6rem;
	margin-bottom: 20px;
}
.close_container {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
	position: absolute;
	right: 30px;
	top: 30px;
}
.volunteer_close_btn{
	position: relative;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-content: center;
	background-color: #fff;
	border-radius: 100%;
	border:2px solid #000;
	padding: 14px;
	cursor: pointer;
}

@media(max-width:1300px){
	.tab_block .accordion .accordion_body .cell{
		width: 33.3%;
	}

	.page-template-temp_voluntarios_2025_roles .hero .hero_image {
		width: 28vw;
	}

	.page-template-temp_voluntarios_2025_roles .roles_content {
		width: 100%;
	}
}
@media(max-width:768px){
	.tab_block .accordion .accordion_body .cell {
		width: 50%;
	}

	.volunteer_popup .popup_frame .popup_content {
		flex-direction: column;
	}

	.volunteer_popup .popup_frame .popup_content .info {
		width: 100%;
		height: 100%;
		padding: 30px;
	}

	.volunteer_popup .popup_frame .popup_content .image {
		display: none;
	}

	.tab_block .accordion {
		padding: 25px 20px;
		height: 85px;
	}
	.tabs_container {
		position: relative;
		font-size: 1.6rem;
		line-height: 1.6rem;
	}

	.tab_description {
		font-size: 1rem;
		line-height: 1.3rem;
	}

	.tab_block .accordion .accordion_body .cell .role_card .info {
		padding: 25px 10px;
	}

	.volunteer_popup .popup_frame {
		height: 70vh;
	}

  	.page-template-temp_tm_safetix .tab_block .accordion .accordion_head{
		font-size: 16px;
	}
	.page-template-temp_tm_safetix .tab_description {
		font-size: 18px;
		line-height: 26px;
	}

	.page-template-temp_voluntarios_2025_roles .hero .title{
		padding: 100px 5vw 20vw;
	}

	.page-template-temp_voluntarios_2025_roles .hero .hero_image {
		width: 32vw;
	}
	.page-template-temp_voluntarios_2025_roles .roles_content {
		padding: 10vh 5vw;
	}
	.page-template-temp_voluntarios_2025_roles .hero .items-container .star{
		width: 12vw;
	}
	.page-template-temp_voluntarios_2025_roles .hero .items-container .star:nth-child(1){
		left: 85%;
	}
	.page-template-temp_voluntarios_2025_roles .hero .items-container .star:nth-child(2) {
		left: 43%;
		top: 47%;
	}
}
@media(max-width:600px){
	.tab_block .accordion .accordion_body .cell{
		width: 100%;
	}
	.tab_block .accordion {
		padding: 25px 10px;
	}
	.tab_block .accordion .accordion_head{
		font-size: 1.1rem;
	}
	.page-template-temp_tm_safetix .tab_block .accordion .accordion_head{
		font-size: 12px;
	}
	.page-template-temp_tm_safetix .tab_description {
		font-size: 14px;
		line-height: 20px;
	}
	.page-template-temp_voluntarios_2025_roles .hero .hero_image {
		width: 42vw;
		right: 0;
	}
}


/* FAQS */
.page-template-temp_voluntarios_2025_faqs .hero .title{
	font-size: 8.5vw;
	line-height: 8.5vw;
	width: 95%;
	padding: 120px 5vw 10vw;
}
.page-template-temp_voluntarios_2025_faqs .hero .hero_image{
	right: 5%;
	bottom: 0;
	width: 30vw;
}
.page-template-temp_voluntarios_2025_faqs .hero .hero_image img{
	width: 100%;
	height: auto;
}
.page-template-temp_voluntarios_2025_faqs .hero .items-container .star{
	width: 8vw;
}

.page-template-temp_voluntarios_2025_faqs .hero .items-container .star:nth-child(1){
	left: 87%;
	top: 50%;
	max-width: 160px;
}
.page-template-temp_voluntarios_2025_faqs .hero .items-container .star:nth-child(2){
	left: 68%;
	top: 64%;
	max-width: 130px;
}
.page-template-temp_voluntarios_2025_faqs .hero .title .hero-text{
	font-size: 1rem;
	line-height: 1rem;
	margin-top:2vh;
}

.faqs-content{
	position: relative;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 10vh 5vw;
}
.wp-block-heading{
	font-family: 'futura_bold';
}

h2.wp-block-heading{
	font-family: 'Formula1_bold';
	text-transform: uppercase;
	font-size: 2.3rem;
}

h3.wp-block-heading {
	font-size: 1.2rem;
	text-transform: uppercase;
	margin-top: 3vh;
}

@media(max-width:1300px){
	.page-template-temp_voluntarios_2025_faqs .hero .hero_image{
		right: 0%;
		width: 60vw;
	}
	.page-template-temp_voluntarios_2025_faqs .hero .title {
		padding: 120px 5vw 15vw;
	}
}

@media(max-width:767px){
	.page-template-temp_voluntarios_2025_faqs .hero .hero_image{
		right: 0%;
		width: 80vw;
		overflow: hidden;
	}
	.page-template-temp_voluntarios_2025_faqs .hero .hero_image img {
		width: 100%;
		height: auto;
		position: relative;
		left: 19vw;
	}
	h3.wp-block-heading {
		font-size: 1rem;
	}
	h2.wp-block-heading {
		font-size: 1.5rem;
	}
	.page-template-temp_voluntarios_2025_faqs .hero .title{
		font-size: 9vw;
		line-height: 9vw;
		width: 100%;
		padding: 100px 5vw 20vw;
	}
	.page-template-temp_voluntarios_2025_faqs .hero .title .hero-text {
		font-size: 0.8rem;
		line-height: 1rem;
		width: 60%;
	}
	.page-template-temp_voluntarios_2025_faqs .hero .items-container .star{
		width: 12vw;
	}
	.page-template-temp_voluntarios_2025_faqs .hero .items-container .star:nth-child(1) {
		left: 81%;
		top: 32%;
		max-width: 160px;
	}
	.page-template-temp_voluntarios_2025_faqs .hero .items-container .star:nth-child(2) {
		left: 41%;
		top: 54%;
		max-width: 40px;
	}
}

/*CONTACTO */

.page-template-temp_voluntarios_2025_contacto .hero{
	height: 90vh;
	min-height: 740px;
}

.page-template-temp_voluntarios_2025_contacto .hero .title{
	font-size: 10vw;
	line-height: 10vw;
	width: 95%;
	padding: 120px 5vw;
}

.phrase .word:nth-last-child(1) .letter_mask:nth-last-child(1){
	transform: translateX(-1.5vw);
}


.page-template-temp_voluntarios_2025_contacto .hero .hero_image{
	right: 0;
	bottom: 0;
	width: 50vw;
	z-index: 3;
}
.page-template-temp_voluntarios_2025_contacto .hero .hero_image img{
	width: 100%;
	height: auto;
}
.page-template-temp_voluntarios_2025_contacto .hero .items-container .star{
	width: 8vw;
}

.page-template-temp_voluntarios_2025_contacto .hero .items-container .star:nth-child(1){
	left: 90%;
	top: 10%;
	max-width: 160px;
}
.page-template-temp_voluntarios_2025_contacto .hero .items-container .star:nth-child(2){
	left: 45%;
	top: 49%;
	max-width: 130px;
}
.page-template-temp_voluntarios_2025_contacto .hero .title .hero-text{
	font-size: 1rem;
	line-height: 1rem;
	width: 70%;
	max-width: 500px;
	margin-bottom: 5vh;
}
.page-template-temp_voluntarios_2025_contacto .page-content{
	position: relative;
	width: 50%;
	max-width: 500px;
	z-index: 3;
	font-size: 1rem;
	line-height: 1.3rem;
}

.page-template-temp_voluntarios_2025_contacto .hero .text-content{
	height: 90%;
}

.page-template-temp_voluntarios_2025_contacto .hero .items-container{
	z-index: 4;
}



@media(max-width:767px){
	.page-template-temp_voluntarios_2025_contacto .hero .title {
		padding: 100px 5vw 20px;
		width: 100%;
		font-size: 11vw;
		line-height: 11vw;
	}
	.page-template-temp_voluntarios_2025_contacto .page-content {
		position: relative;
		width: 70%;
		bottom: auto;
	}
	.page-template-temp_voluntarios_2025_contacto .hero .hero_image {
		width: 65vw;
	}
	.page-template-temp_voluntarios_2025_contacto .hero .text-content {
		height: auto;
	}
	.page-template-temp_voluntarios_2025_contacto .volunteers_menu{
		position: absolute;
		bottom: 0;
	}
	.page-template-temp_voluntarios_2025_contacto .hero .items-container .star{
		width: 12vw;
	}

	.page-template-temp_voluntarios_2025_contacto .hero .items-container .star:nth-child(1){
		left: 70%;
		top: 21%;
		max-width: 160px;
	}
	.page-template-temp_voluntarios_2025_contacto .hero .items-container .star:nth-child(2){
		left: 25%;
		top: 50%;
		max-width: 130px;
	}
}

@media(max-width:600px){
	.page-template-temp_voluntarios_2025_contacto .hero .hero_image {
		width: 65vw;
	}
	.page-template-temp_voluntarios_2025_contacto .hero .hero_image {
		width: 100%;
	}
}