@charset "UTF-8";
/* CSS Document */


.mexicogp_black_logo {
	display: block;
}
.mexicogp_white_logo {
	display: none;
}
.hero{
	position: absolute;
	width: 100vw;
	max-width: 100%;
	background-color: #E10600;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top:110px;
	padding-top: 2vh;
	padding-bottom: 10vh;
	min-height: 100dvh;
	z-index: 2;
	transform: rotate(0deg);
	transform-origin: -100% 50%;
	transition: transform 1000ms cubic-bezier(0.600, -0.280, 0.735, 0.045), opacity 3000ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
	transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
}
.hero.out{
	/* opacity: 0; */
	pointer-events: none;
	transform: rotate(-90deg);
	opacity: 0;
}

.hero .big_title{
	font-size: 9vw;
	line-height: 7.3vw;
	margin: 0;
	padding: 0 2vw;
}

.hero .align_right{
	align-self: flex-end;
}

.hero_content{
	display: flex;
	padding: 0 10%;
	margin-top: -3vw;
	margin-bottom: 5vh;
}

.hero_content .vm_container{
	width: 70%;
	position: relative;
	z-index: 1;
}
.vm_container img{
	width: 100%;
	height: auto;
}

.hero_content .text{
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 1rem;
	line-height: 1.3rem;
}
.hero_content .start_btn{
	margin-top: 15px;
	cursor: pointer;
}

.hero_content .start_btn img{
	height: 1.3rem;

}
.white_lines{
	position: absolute;
	top:40%;
	width: 40%;
	height: 30%;
	left: 5%;
	background-image: url("../images/trivias/white_lines.svg");
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 0;
}


#register_form{
	position: relative;
	z-index: 1;
	padding-top: max(8vh, 90px);
	opacity: 1;
	transition: opacity 1000ms 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 */
	

}
#register_form.out{
	height: 100dvh;
	overflow: hidden;
	opacity: 0;
}

#register_form .title{
	font-size: 10vw;
	line-height: 10vw;
}

#register_form .frm_combo_inputs_container{
	display: block;
}


.frm_page_num_1{
	padding: 5vh 20% 10vh;
}
.form_container{
	background-color: #fff;
	transition: background-color 1000ms 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 */
}
 
.form_container.red{
	background-color: #E10600;
}

.frm_page_num_2{
	min-height: 100dvh;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.frm_page_num_2 .frm_submit.frm_flex{
	justify-content: center;
}

.frm_page_num_3{
	padding: 5vh max(5vw, 20px);
}


.frm_primary_label{
	font-family: 'futura_bold';
	text-transform: uppercase;
}
.frm_submit{
	margin-top:30px;
	justify-content: center;
}
.frm_submit button {
	background: #000;
	border: 1px solid #000;
	padding: 10px 70px;
	text-transform: uppercase;
	font-family: 'futura_bold' !important;
	border-radius: 5px;
	color: #fff;
}

.frm_error{
	color: #E10600;
	margin-bottom: 20px;
	padding-left: 20px;
	font-size: 0.9rem;
}
.frm_error_style,
.frm_error_style p{
	text-align: center;
	font-family: 'futura_bold';
	color: #E10600;
	margin-bottom: 20px;
}
.frm_error_style{
	padding-top: 3vh;
}

fieldset{
	width: 100%;
}

.frm_page_num_2 fieldset{
	text-align: center;
}

.frm_page_num_2:before{
	content: '';
	position: absolute;
	left: -10vw;
	top: 10vh;
	width: 30vw;
	height: 30vw;
	background-image: url("../images/trivias/carrete2.webp");
	background-size: contain;
	background-repeat: no-repeat;
}


.frm_quizzes_show_score__bg {
	display: none !important;
}

#register_form .frm_quizzes_show_score .title{
	font-size: 5vw;
	line-height: 5vw;
	margin-bottom: 4vh;
}

.fullsize_question{
	position: relative;
	display: none;
	flex-wrap: wrap;
	align-items: center;
	min-height: 75vh;
}
.fullsize_question.in{
	opacity: 1;
	display: flex;
}
.fullsize_question .frm_html_container,
.fullsize_question .vertical_radio{
	width: 50%;
}
.fullsize_question .vertical_radio{
	padding: 3vw;
}


.fullsize_question .button_container{
	width: 100%;
	margin-top: 20px;
}

.nextQuizz_btn{
	opacity: 0.3;
	pointer-events: none;
}

.nextQuizz_btn.in{
	opacity: 1;
	pointer-events: all;
}

.frm_quizzes_show_score{
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 100% !important;
	background-color: #E10600 !important;
	color: #fff !important;
	border-radius: 0 !important;
}
.frm_quizzes_show_score__top_text,
.frm_quizzes_show_score__score,
.frm_quizzes_show_score__message{
	opacity: 1 !important;
}

.frm_quizzes_show_score.frm_high_score {
	padding-top: 50px !important;
}

.ui-datepicker-title{
	display: flex;
}
.frm-datepicker .ui-datepicker-calendar thead th{
	color: #fff;
}
.ui-datepicker td .ui-state-default.ui-state-active{
	color: #fff;
}
.frm-datepicker .ui-datepicker-title select.ui-datepicker-month{
	text-transform: capitalize;
}

@media(max-width:1200px){
	.hero_content {
		padding: 0 3%;
	}
}


@media(max-width:992px){
	.hero_content {
		flex-direction: column;
		align-items: center;
	}
	.hero_content .text{
		width: 90%;
		text-align: center;
	}
	.frm_page_num_1{
		padding: 5vh 20px;
	}
	.fullsize_question{
		flex-direction: column;
	}
	.fullsize_question .frm_html_container,
	.fullsize_question .vertical_radio{
		width: 100%;
	}
}

@media(max-width:767px){
	.hero{
		margin-top: 80px
	}
	.hero .vm_container {
		width: 90%;
		margin-bottom: 20px;
	}
	.hero .big_title {
		font-size: 11vw;
		line-height: 10.3vw;
	}
	.white_lines {
		top: 29%;
		left: 2%;
		width: 60%;
		height: 40%;
	}
	#register_form .title{
		font-size: 14vw;
		line-height: 14vw;
		margin-bottom: 10px;
	}
	#register_form .frm_quizzes_show_score .title{
		font-size: 8vw;
		line-height: 8vw;
		margin-bottom: 4vh;
	}
	.fullsize_question{
		min-height: auto;
	}
	.frm_page_num_1 {
		padding: 2vh 20px;
	}
	.frm_page_num_2{
		padding: 0 10px;
	}
	.frm_page_num_2 .frm_html_container br,
	.frm_quizzes_show_score .title br{
		display: none;
	}
	.frm_page_num_2:before {
		content: '';
		position: absolute;
		left: 0;
		top: 110px;
		width: 100%;
		height: 20vh;
		background-image: url(../images/trivias/carrete2.webp);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}