.mexicogp_white_logo {
  display: none;
}

.mexicogp_black_logo {
  display: block;
}


#init_menu_mxgp #open_menu_mxgp {
  filter: invert(1);
}

#footer-container {
  display: none;
}




canvas:focus,
canvas:focus-visible,
.openseadragon-canvas:focus,
.openseadragon-canvas:focus-visible {
  outline: none !important;
}

.openseadragon-canvas {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.openseadragon-canvas:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}


#map_container{
	position: relative;
	width: 100vw;
	max-width: 100%;
	height: 100vh;
	z-index: 2;	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,d3d3d3+72,aaaaaa+100 */
	background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(240,240,240,1) 72%,rgba(170,170,170,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */


}

#map{
  height: 100vh;
  width: 100%;
  background-image: url("../images/cobertura2025/map_page_bg.webp");
  background-size: cover;
}

#mc-zoom-controls {
    position: absolute !important;
    display: flex;
    right: 5%;
    bottom: 5%;
    width: 10rem;
    z-index: 12;
    display: flex;
    gap:10px;
}
#mc-zoom-controls .option{
	background-color: #254782;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	width: 55px;
	aspect-ratio:1;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	cursor: pointer;
}
#mc-zoom-controls .option img{
	width: 100%;
	height: auto;
	filter: invert(1);
}


#map_info{
	position: absolute;
	left: 20px;
	top: 100px;
	width: auto;
	max-width: 568px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap:2vh;
	padding: min(2vw, 35px);
	border-radius: min(1vw, 50px);
	overflow: hidden;
	color: #fff;
	
	z-index: 3;
}
#map_info .bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #254782;
	background-image: url("../images/cobertura2025/app_bg.webp");
	background-size: cover;
	background-position: top center;
	opacity: 0.95;
	z-index: 0;
}

#map_info .title{
	position: relative;
	z-index: 1;
	font-size: 2.5rem;
	line-height:2.5rem;
}
#map_info .menu{
	position: relative;
	margin-top: 20px;
	flex-grow: 1;
	display: flex;
	gap:10px;
	flex-wrap: wrap;
	z-index: 1;
}
#map_info .menu .option{
	font-size: 1rem;
}
#map_info .menu .option a{
	color: #000;
	background-color: #fff;
	border-radius: 50px;
	padding: 5px 20px;
	display: inline-block;
}
#map_info .menu .option a:hover,
#map_info .menu .option.active a{
	color: #fff;
	background-color: #f12d1a;
	text-decoration: none;
}
#map_info .menu .option img{
	width: 35px;
	height: 35px;
	object-fit:contain;
}

.map_help{
	position: absolute;
	bottom: 100px;
	z-index: 4;
	left: 20px;
}
.map_help .option{
	background-color: #254782;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	width: 55px;
	aspect-ratio:1;
	margin-bottom: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	cursor: pointer;
}
.map_help .option img{
	width: 100%;
	height: auto;
	filter: invert(1);
}

.map_icons{
	position: absolute;
	left: -1200px;
	bottom: 5%;
	max-width: 1000px;
	z-index: 5;
	padding: 43px 10px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	transition: all 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 */
}
.map_icons img{
	width: 100%;
	height: auto;
}
.map_icons.in{
	left: 3%;
}

.map_icons .mobile{
	display: none;
}

.map_icons .close{
	position: absolute;
	right: 10px;
    top: 12px;
    font-size: 0.8rem;
    cursor: pointer;
    color:#000;
	
}

@media(max-width:1500px){
	#map_info .title {
		font-size: 2rem;
		line-height: 2rem;
	}
	#map_info{
		max-width: 420px;
		gap: 2vh;
	}
	#map_info .menu{
		flex-direction: column;
	}
	#map_info .menu .option a {
		padding: 3px 15px;
		font-family: 'Formula1_bold';
	}
	
}
@media(max-width:1200px){
	#map_info .title {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	#map_info{
		max-width: 380px;
		gap: 1vh;
	}
	#map_info .menu .option {
		font-size: 0.9rem;
	}
	.map_help .option{
		width: 45px;
	}
}


@media(max-width:768px){
	#menu_helper_bg {    
		height: 100px;
		display: none;
	}
	#menu_helper_bg .art_pattern {
	    height: 15px;
	}
	#map_info{
		top:80px;
		height: auto;
		border-radius: 20px;
		max-width: calc(100% - 20px);
		left: 10px;
		gap:0px;
		padding: 14px;
	}
	#map_info .title {
		font-size: 1.2rem;
		line-height: 1.2rem;
	}
	
	#map_info .menu{
		margin-top: 10px;
		flex-direction: row;
	}
	#map_info .menu .option {
		font-size: 0.75rem;
	}
	#map_info .menu .option a{
		padding: 2px 10px;
	}
	
	#map_info .map_help{
		position: fixed;
	    bottom: 30px;
	    display: flex;
	    gap: 10px;
	}
	#map_info .map_help .option,
	#mc-zoom-controls .option{
		width: 40px;
		margin: 0;
		display: flex !important;
	}
	#mc-zoom-controls{
	   bottom: 30px;
	   position: fixed !important;
	   width: auto;
	}
	.mexicogp_white_logo{
		display: none;
	}	
	.mexicogp_black_logo{
		display: block;
	}
	.map_icons .mobile{
		display: block;
	}
	.map_icons .desktop{
		display: none;
	}
	
	.map_icons{
		position: absolute;
		bottom: auto;
		top:80px;
		padding: 40px 15px 15px;
		max-width: 500px;
		width: 90%;
	}
	
	.map_help .option{
		width: 40px;
	}
	
}