@charset "UTF-8";

@media ( max-width: 900px ) {
	
	body { font-size: 1.4rem;}

	.header { left: 1.5rem; top: 1.5rem;}
	.header h3 { font-size: 1rem;}
	.header h3:before, .header h3:after { width: 1rem; height: 1rem;}
	.header h2 { font-size: 3.2rem;}
	.header h2, .header h3 { padding: .5rem 0;}
	
	.menu { top: 1.5rem; right: 1.5rem;}
	.menu .idioma { display: none;}
	.menu a[data-layer] { font-size: 2.2rem; display: block;}
	.menu a[data-layer] svg { display: none;}
	.menu a[data-layer] span { position: static;}
	.menu a[data-layer].active{ color: #000;}

	.menu li + li:before { content: none; display: block;}
	.menu li:last-child:before { content: ''; display: block; width: 1rem; height: 1rem; margin: 0 .5rem; background: url(../img/icon-star-b.svg); background-size: contain;	}

	.footer { bottom: 0; left: 0; right: 0; height: 7rem; padding: 0 1.5rem;}
	.footer nav { display: block; font-size: 1.3rem;}
	.footer .link-film { padding: 0; background: none;}
	.footer .link-cm { padding: 0; background: none;}
	.footer .link-film img { width: 3rem; height: auto;}
	.footer .link-cm img { width: 3rem; height: auto;}

	.pop-up { height: calc( 100% - 6rem); right: 0; top: calc(100% + 8rem);}
	.pop-up:after { box-shadow: 0 0 8rem 0 #000 !important;}
	.pop-up.active { top: 6rem; z-index: 30;}
	.pop-up .btn-close { top: 1rem; right: .5rem;}
	.pop-up .pop-up-in { padding: 6rem 1.5rem;}
	.pop-up[data-layer=punto] { left: 0;}

	.txt h1,
	.txt h2,
	.txt h3 { font-size: 2.2rem; max-width: 100%;}
	.pop-up[data-layer=punto] .box-peliculas ul,
	.pop-up.ruta-info a { font-size: 2rem; line-height: 1.5em;}


	.pop-up[data-layer=rutas] { color: #000;}
	.pop-up[data-layer=rutas] h1 { position: relative; mix-blend-mode: multiply; color: #4f3526; background: transparent; }
	.pop-up[data-layer=rutas] h1:before { display: none; }

	.pop-up[data-layer=rutas] nav { margin-bottom: 3rem;}
	.pop-up[data-layer=rutas] a:before,
	.pop-up[data-layer=punto] a.link-ruta:before,
	.pop-up.ruta-info a:before { width: 1rem; height: 1rem;}
	
	.pop-up .slider-item img { height: 16rem;}

	#map .punto0, #map .punto1, #map .punto2, #map .punto3 { width: 1.8rem; height: 1.8rem;}
	.mapboxgl-ctrl-top-right { top: 50%; right: 0; transform: translateY(-50%);}
}

@media ( max-width: 430px ) {
	.header h2 { font-size: 2rem;}
	.header h3 { font-size: .8rem;}
	.header h3:before, .header h3:after { display: none;}
	.header h2, .header h3 { padding: .3rem 0;}

	.menu a[data-layer] { font-size: 1.3rem;}
	.menu a[data-layer] svg { display: none;}
	.menu a[data-layer] span { position: static;}
	.menu a[data-layer].active{ color: #000;}
}