@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;
}

body{
	color: #fff;
	background-color: #151515;
}

#main_bg_container {
	background: none;
	background-color: #151515;
}

.mexicogp_white_logo.out{
	display: none !important;
}

.mexicogp_black_logo.in{
	display: block !important;
}

#header_rss_container,
#menu_container,
#footer-container,
.cookies-footer {
	display: none !important;
}
#init_menu_mxgp {
    display: none !important;
}

.font_yellow{
	color: #FCFF00;
}

#main_logo{
	position: absolute;
	left: 5vw;
	top: 3vw;
	z-index: 20;
	width: 200px;
	opacity: 1;
	transition: opacity 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000) ; 
	transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	display: none;
}
#main_logo.out{
	opacity: 0;
}
#main_logo img{
	width: 100%;
	height: auto;
}

#social_wall{
	width: 100vw;
	max-width: 100%;
	height: 100vh;
	z-index: 1;
	background-image: url("../images/social_wall_2023/bg_03.jpg");
	background-size: cover;
}

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



.scene{
	position: absolute;
}
.scene .bg{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}
.scene .bg .img{
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
}


/* SCENE 03 */


.big_font{
	font-size: 8vw;
}
#scene_03{
	opacity: 1;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: none;
}
#scene_03 .bg{
	transform: scale(1.3);
	transition: transform 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
}
#scene_03 .bg.in{
	transform: scale(1)
}


#scene_03 .bg .img{
	 transition: height 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000), transform 15000ms cubic-bezier(0.390, 0.575, 0.565, 1.000), opacity 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); 
	transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000), cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

#scene_03 #scene_03_bg_1{
	opacity: 0;
	height: 100%;
	transform: scale(1.5);
	background-image: url("../images/social_wall_2023/bg_03.jpg")
}
#scene_03 #scene_03_bg_1.in{
	opacity: 1;
	transform: scale(1);
}


#scene_03 .text_container{
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap:3vw;
}

.text_mask{
	display: inline-block;
	overflow: hidden;
	position: relative;
}
.text.left{
	transform: translateX(100%);
}
.text.right{
	transform: translateX(-100%);
}

.text.left,
.text.right{
	transition: transform 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.text.left.in,
.text.right.in{
	transform: translateX(0);
}


#carrousel{
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 10% 0%;
}
#carrousel .splide{
	width: 100%;
	height: 100%;
}

.splide__slide{
	align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 80vh;
    padding: 10px 20px;

}

.social_photo{
	position: relative;
	width: 100%;
	height: 100%;
}
.social_photo img{
	width: 100%;
	height: 100%;
	object-fit:contain;
}