@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'Formula1_black';
    src: url('fonts/Formula1-Display-Black.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}


/* HOME MAIN SLIDER */

#home_slider{
	position: relative;
	width: 100%;
	height: 100%;
}

/* GALLERY */
#gallery_container{
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.gallery_animation{
-webkit-transition: all 2000ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
   -moz-transition: all 2000ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
     -o-transition: all 2000ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
        transition: all 2000ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */

-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
   -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
     -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
        transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */
}


.slider_images_container{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	vertical-align: top;
	z-index: 1;
	transform-origin: center bottom;
	overflow: hidden;
}

#gallery_images_container{
	opacity: 0;
}
#gallery_images_container.in{
	opacity: 1;
}

.slider_images_container .image{
	position: absolute;
	top: 0;
	width: 0%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	overflow: hidden;
-webkit-transition: all 1500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   -moz-transition: all 1500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -o-transition: all 1500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition: all 1500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
   -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

}
.slider_images_container .image:after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 15%;
	z-index: 1;
	pointer-events: none;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+1,1+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.8) 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


.slider_images_container .image.left{
	left: 0;
}
.slider_images_container .image.right{
	right: 0;
}

.slider_images_container .image.in{
	width: 100%;
}
.slider_images_container .image.faded{
	opacity: 0;
}

#slider_buttons{
	position: absolute;
	z-index: 1000;
	right: 30px;
	bottom: 30px;
}


/*
#gallery_container .arrows{
	display: inline-block;
}
*/
#gallery_container .arrow{
	position: absolute;
	display: block;
	top:45%;
	text-align: center;
	line-height: 24px;
	cursor: pointer;
	color:#fff;
	text-shadow: 0 0 5px rgba(9, 255, 244,0);
	z-index: 100;
-webkit-transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
   -moz-transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
     -o-transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
        transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */

-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
   -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
     -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */

}

#gallery_container .arrow .icon{
	font-size: 55px;
	transform: rotate(180deg) scaleY(0.9) scaleX(1.1);
	margin-bottom: 4px;
}
#gallery_container .arrow .name{
	font-size: 11px;
}


/*
#slider_buttons .arrows .arrow:hover{
	color: #a9d8f7;
	text-shadow: 0 0 8px rgba(9, 255, 244,1);
}
*/

#gallery_container #left_arrow{
	left: -100px;
	transform: rotate(-90deg);
}
#gallery_container #right_arrow{
	right: -100px;
	transform: rotate(90deg);
}
#gallery_container #left_arrow.in{
	left: 20px;
}
#gallery_container #right_arrow.in{
	right: 20px;
}

#gallery_container .arrow:hover .icon{
	transform: rotate(180deg) scaleY(0.9) scaleX(1.1) translateY(3px);
	color: #f12d1a;
}

#gallery_container .arrow:hover .name{
	transform: scaleX(0.95);
	color: #f12d1a;
}



#slider_buttons #dots{
	display: inline-block;
	vertical-align: middle;
}
#slider_buttons #dots .dot{
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 20px;
	background-color: white;
	margin: 0 3px;
	display: inline-block;
	vertical-align: top;
	border-radius: 5px;
	cursor: pointer;

}
#slider_buttons #dots .dot:hover, #slider_buttons #dots .dot.active{
	background-color: #f12d1a;
/* 	box-shadow: 0 0 8px rgba(247, 70, 54,1); */
	transform: scaleY(1.1);
	transform-origin: center;
}

#slider_buttons #dots .dot, #gallery_container .arrow .icon, #gallery_container .arrow .name{
-webkit-transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
   -moz-transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
     -o-transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
        transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */

-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
   -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
     -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */
}



/* Main slides */

.big_slider_text{
	font-size: 70px;
	line-height: 65px;
	opacity: 0;
	transform: translateX(-150px);
	text-shadow: -4px 3px 15px rgba(0,0,0,0.7);
}
.small_slider_text{
	font-size: 40px;
	line-height: 45px;
	opacity: 0;
	transform: translateX(-150px);
	text-shadow: -4px 3px 15px rgba(0,0,0,0.7);
}

.slide_info_container{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: absolute;
	width: 100vw;
	height: 100%;
}
.slide_info_container .fullsize_link{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}


.slide_info{
	position: relative;
	display: block;
	margin-left: 10vw;
    text-align: left;
}
.slide_info  .red_button{
	margin-top: 30px;
	font-size: 20px;
}

.slide_info.in{
	opacity: 1;
	transform: translateX(0);
}

.slide_info .red_button a{
	padding: 6px 20px 8px;
}
.slide_info .animation_item{
	transform: scale(1.1);
	opacity: 0;
	transition: all 700ms cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
	transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
}
.slide_info .animation_item.in{
	opacity: 1;
	transform: scale(1);
}

.no_text_shadow{
	text-shadow: none !important;
}


@media(max-width:1500px){
	.big_slider_text{
		font-size: 5vw;
		line-height: 4.7vw;
	}
	.small_slider_text{
		font-size: 3vw;
		line-height: 2.7vw;
	}
	.slide_info  .red_button{
		font-size: 2vw;
	}
}
@media(max-width:767px){
	.slide_info_container{
		align-items: flex-end;
	}
	.slide_info{
		margin-bottom: 20vw;
		z-index: 2;
	}
	.big_slider_text{
		font-size: 7vw;
		line-height: 6.5vw;
	}	
	#gallery_container .arrow .icon{
		font-size: 36px;
		margin-bottom: 0px;
	}
	#gallery_container .arrow .name{
		font-size: 9px;
		line-height: 9px;
	}
	#gallery_container #right_arrow.in {
	    right: 0px;
	}
	#gallery_container #left_arrow.in {
	    left: 10px;
	}
	.slider_images_container .image:after {
    	height: 25%;
    }
    .slide_info .red_button {
    	margin-top: 20px;
    }
}

@media(max-width:600px){
	
	#gallery_container .arrow .name{
		display: none;
	}
	#gallery_container .arrow .icon{
		font-size: 35px;
	}
	#gallery_container .arrow{
		top: 55%;
	}
	
	#slider_buttons {
	    right: 10px;
	    left: auto;
	    bottom: -3px;
    }
    #gallery_container .arrow{
		display: none;
	}
	#slider_buttons #dots .dot {
	    position: relative;
	    width: 8px;
	    height: 8px;
    }
    .race_countdown_big_numbers {
    	font-size: 5vw;
	}
	#race_countdown table {    
	    font-size: 3vw;
    }
	
}

@media(max-width:600px){
	#gallery_images_container{
		min-height: auto;
	}
}


@media(max-width:400px){

}


/* Raceweek */

.raceweek{
	background-image: url("../images/home/slider/raceweek_16_slider_usa_desktop.jpg");
	background-position: center center !important;
}
@media(max-width:600px){
	.raceweek{
		background-image: url("../images/home/slider/raceweek_16_slider_usa_mobile.jpg");
	}
}


/* HOME 2023 */

.home2023{
	background-image: url("../images/cobertura2023/home_pitlane.jpg");
	background-position: center bottom !important;
}
.mexicogp_logo{
	width: 25vw;
	max-width: 350px;
	margin-bottom: 2vw;
}
@media(max-width:767px){
	#home2023_container{
	    align-items: center;
		justify-content: center;
	    width: 100vw;
	}
	#home2023_btn {
    	width: 60vw;
		margin-bottom: 20vw;
		margin-left: 0;
		z-index: 2;
		text-align: center;
	}
	.home2023{
		background-image: url("../images/cobertura2023/home_pitlane_mobile.jpg");
	}
	#home2023_btn .mexicogp_logo{
		width: 80%;
		margin: 0 auto 3vh;
	}
}

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


/* Racepect */

.racepect{
	background-image: url("../images/home/slider/racepect_bg.jpg");
	background-position: center center !important;
}
.racepect video{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit:cover;
}
.racepect video.hidden{
	display: none;
}

.racepect .slide_info {
    position: relative;
    display: block;
    margin-left: 0;
    width: 100%;
    text-align: center;
}
.racepect .slide_info .logo{
	width: 80%;
	max-width: 1000px;
	margin: 0 auto;
	display: block; 
}

@media(max-width:767px){
	#racepect_container{
		align-items: center;
	}
}

@media(max-width:600px){
	.racepect{
		background-image: url("../images/home/slider/racepect_bg.jpg");
	}
}

/* FANZONE */

.fanzone2023{
	background-image: url("../images/landingFanzones2023/mexicoGP_poster_2023.jpg");
	background-position: center center !important;
}

#fanzone2023_container{
	justify-content: center;
}
#fanzone2023_container .fullsize_link{
	position: absolute;
	display: block;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.2);
}
#fanzone2023_btn{
	margin-left: 0;
	margin-top: 8vh;
	z-index: 2;
	text-align: center;
}
#frame{
	position: absolute;
	z-index: 1;
	width: 95%;
	height: 95%;
	top: 6%;
	left: 2.5%;
	pointer-events: none;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("../images/landingFanzones2023/fanzone_frame_home_desktop.png");
}
#fanzone2023_container .logo {
    width: 70%;
    height: auto;
    max-width: 1000px;
    margin-bottom: -10px;
}

@media(max-width:1500px){
	#fanzone2023_btn .slide_info .red_button {
	    font-size: 20px;
	}
}

@media(max-width:1200px){
	#frame{
		background-image: url("../images/landingFanzones2023/f1_frame.png");
	}
}


@media(max-width:767px){
	#frame{
		background-image: url("../images/landingFanzones2023/f1_frame_mobile.png");
		width: 100%;
		left: 0;
	}

	#fanzone2023_01_container .fullsize_link{
		background-image: none;
	}
	
	#fanzone2023_btn{
	    padding: 5px 15px;
	    border-radius: 15px;
	    text-shadow: 0 0 36px rgb(0 0 0);
	    font-size: 25px;
	    left: 0vw;
	    right: 0;
	    position: absolute;
	    top: 45%;
	    margin: 0 auto;
	    width: 100%;
	    text-align: center;
		display: block;
	}
	#fanzone2023_btn .red_button{
		font-size: 2.5vw;
	}
	#fanzone2023_container .fullsize_link{
		background-color: rgba(0,0,0,0.1);
	}
	#fanzone2023_container .logo {
    	width: 80%;
    }
}
@media(max-width:600px){
	#frame{
		height: 80%;
		top:8vh;
	}
	#fanzone2023_btn{
		top:40%;
	}
}

/* Sostenible */

.sostenible{
	background-image: url("../images/home/slider/slider_sostenible.jpg");
	background-position: center center !important;
}
#sostenible_btn{
	width: 60%;
    max-width: 800px;	
}
#sostenible_btn .logo{
	width: 100%;
	height: auto;
}
@media(max-width:767px){
	#sostenible_container{
		    align-items: center;
			justify-content: center;
	    width: 100%;
	}
	#sostenible_btn {
	    width: 60%;
	    max-width: 800px;
	    margin-left: 0;
	    text-align: center;
	}
}

@media(max-width:600px){
	.sostenible{
		background-image: url("../images/home/slider/slider_sostenible_mobile.jpg");
	}
}

/* Hall of fame */

.hall_of_fame{
	background-image: url("../images/home/slider/muro_de_honor.jpg");
	background-position: center center !important;
}
.hall_of_fame .logo{
	width: 100%;
	height: auto;
	max-width: 150px;
	margin-bottom: 10px;
}

@media(max-width:600px){
	.hall_of_fame .logo {
	    max-width: 90px;
    }
}




/* COUNT DOWN */

#race_countdown{
	position: relative;
	text-shadow: 0px 3px 10px rgba(0,0,0,1);
}
#race_countdown  table{
	font-size: 1.5vw;
}
#race_countdown  table td{
	padding-right:1.5vw;
}
.race_countdown_big_numbers {
    font-size: 2vw;
}


@media(max-width:767px){
	#race_countdown table {
	    width: auto;
	    font-size: 3vw;
	    position: relative;
	    margin: 0 auto;
	    text-align: center;
	}
	#race_countdown table td {
    	padding: 0px 2.5vw;
	}

	.race_countdown_big_numbers {
	    font-size: 6.5vw;
	}
}

.font_f1_black{
	font-family: 'Formula1_black';
}

.font_red, .font_red a{
	color: #FF3020;
}
.font_white_stroke, .font_white_stroke a{
	color: #FFF;
	letter-spacing: 1px;
	-webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
	text-stroke: 1px #000;
}
.font_black, .font_black a{
	color: #000;
}
.font_green, .font_green a{
	color: #007149;
}

#home_coverage{
	position: relative;
/* 	padding-bottom: 100px; */
}

#news_container{
	position: relative;
	width: 100vw;
	max-width: 100%;
	height: 100vh;
	transition: height 1000ms 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 */
}
/*
#news_container.in{
	height: 75vh;
}
*/

#scroll_instruction{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	margin: 0 auto;
	z-index: 10;
	width: 500px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    line-height: 1.2rem;
    pointer-events: none;
}
#scroll_instruction .chevron{
	font-size: 1.2rem;
}

.links_container{
	position: relative;
	width: 100%;
}
.link_row, .link_page{
	position: relative;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	background-color: #fff;
	border-bottom: 2px solid #000;
	cursor: pointer;
}
.link_row:first-child{
	border-top: 2px solid #000;
}

.link_row a{
	padding: 2vh 0;
	position: relative;
    display: block;
    transition: padding 250ms 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 */
}
.link_row a:hover{
	padding: 3vh 0;
}

.link_row .phrase{
	position: relative;
	display: inline-block;
	pointer-events: none;
	font-size: 10vw;
	line-height: 9vw;
	padding-left: 2vw;
}
.link_row .phrase .name, .link_row .phrase .name_copy{
	position: relative;
	display: inline-block;
	padding-right: 5vw;
	pointer-events: none;
}
.link_row .phrase .name_copy{
	color: #eaeaea;
}
.link_row .phrase .name .fan, .link_row .phrase .name_copy .fan{
	font-size: 6.5vw;
}
.link_row .phrase .name .services, .link_row .phrase .name_copy .services{
	font-size: 6.5vw;
}
.link_row .phrase .name .transport, .link_row .phrase .name_copy .transport{
	font-size: 4.5vw;
}
.link_row .phrase .name .upperfont, .link_row .phrase .name_copy .upperfont{
	font-size: 5vw;
    position: absolute;
    top: 8px;
    line-height: 5vw;
}
.citi_logo{
	width: 40%;
	max-width: 400px;
	padding-left: 3vw;
}
.citi_logo img{
	width: 100%;
	height: auto;
}

.link_row:before, .link_row:after{
	content: 'entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar entrar ';
	font-family: 'Formula1_regular'; 
	letter-spacing: 0;
	color:#282828;
	-webkit-text-stroke: 0;
    -webkit-text-fill-color: initial;
    text-stroke: 0;
	white-space: nowrap;
	position: absolute;
	left: 0;
	display: block;
	opacity: 0;
	font-size: 1rem;
	line-height: 1rem;
	pointer-events: none;
}
.link_row:before{
	top:10px;
}
.link_row:after{
	bottom:10px;
}
.link_row:hover:before, .link_row:hover:after{
	opacity: 1;
	animation: move forwards 2s infinite;
	animation-timing-function: linear;
}
.en .link_row:before, .en .link_row:after{
	content: 'enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter enter ';
}

.en .link_row:hover:before, .en .link_row:hover:after{
	opacity: 1;
	animation: moveEN forwards 2s infinite;
	animation-timing-function: linear;
}




@keyframes move {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-80px);
  }
}

@keyframes moveEN {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-70px);
  }
}


.row_video, .link_bg_img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit:cover;
}

.link_info{
	position: relative;
	width: 100%;
	padding: 10vh 0;
}

#racepect_link{
	text-align: center;
	display: flex;
	flex-direction: column;
	gap:2vw;
}
#racepect_link .logo{
	width: 90%;
	max-width: 500px;
	
}
.link_page{
	min-height: 45vh;
}
.link_page .slide_info{
	padding-top: 10vh;
	padding-bottom: 10vh;
}

@media(max-width:767px){
/*
	#news_container{
		height: 70vh;
	}
*/
	
/*
	.link_row .phrase{
		font-size: 18vw;
		line-height: 17vw;
	}
*/
/*
	.link_row .phrase .name, .link_row .phrase .name_copy{
		padding-right: 10vw;
	}
*/
	#scroll_instruction{
		width: 100%;
		font-size: 0.6rem;
	}
	.link_page {
    	min-height: 25vh;
	}
	.link_info {
	    padding: 5vh 0;
	}
	.link_page .slide_info {
	    padding-top: 8vh;
	    padding-bottom: 5vh;
	    margin-bottom: 0;
	}
	.link_row:before, .link_row:after{
		font-size: 0.5rem;
		line-height: 0.5rem;
	}
	.link_row:before {
    	top: 3px;
	}
	.link_row:after {
    	bottom: 3px;
	}
	#news_container.in {
	    height: 80vh;
	}
}