@charset "UTF-8";

::selection { background: #EEEEEE; color: #000;}
::-moz-selection { background: #EEEEEE; color: #000;}
::-webkit-selection { background: #EEEEEE; color: #000;}

::scrollbar { width: 9px;}
::scrollbar-track { background: transparent;}
::scrollbar-thumb { border-radius: 6px; background: url(../img/bg-scroll.png) repeat-y center;}
::scrollbar:hover { cursor: pointer; background-color: rgba(0,0,0,.1);}
::-webkit-scrollbar { width: 9px;}
::-webkit-scrollbar-track { background: transparent;}
::-webkit-scrollbar-thumb { border-radius: 6px; background: url(../img/bg-scroll.png) repeat-y center;}
::-webkit-scrollbar:hover { cursor: pointer; background-color: rgba(0,0,0,.1);}


html, body { font-family: 'Roboto Condensed', sans-serif; height: 100%;}
html { font-size: 10px;}
body { font-size: 1.8rem; line-height: 1.222em; color: #FFF;}

main { width: 100%; height: 100%; position: relative; overflow: hidden;}

.header, .menu, .footer { position: absolute; z-index: 2;}
.header { top: 5rem; left: 5rem;}
.menu { top: 5rem; right: 5rem;}
.footer { bottom: 5rem; left: 5rem; right: 5rem;}

a { color: #FFF; text-decoration: none;}
a polygon { fill: #7112A3;}
a.active polygon,
a:hover polygon { fill: #E55B39;}

h1, h2, h3 { font-family: 'Holtwood One SC', serif;}

.header { mix-blend-mode: multiply; color: #000; background: #FFF;}
.header:before { content: ''; display: block; position: absolute; z-index: 2; background: url(../img/bg-textured-b.jpg); background-size: cover; mix-blend-mode: screen; width: 100%; height: 100%; pointer-events: none;}
.header h3 { font-family: 'Holtwood One SC', serif; font-size: 1.3rem; line-height: 1em; display: flex; justify-content: space-between; align-items: center; border-top: 4px solid #000;}
.header h3:before,
.header h3:after { content: ''; display: block; width: 1.4rem; height: 1.4rem; background: url(../img/icon-star-b.svg); background-size: contain;}
.header h2 { font-size: 4rem; line-height: 1em; border-top: 4px solid #000; border-bottom: 4px solid #000;}
.header h2,
.header h3 { padding: .5rem 0 .7rem 0;}

.menu { mix-blend-mode: multiply; color: #000; background: #FFF; padding: .9rem 0 1.1rem 0;}
.menu:after { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-top: 4px solid #000; border-bottom: 4px solid #000; box-sizing: border-box;}
.menu:before { content: ''; display: block; position: absolute; z-index: 2; top: 0; left: 0; background: url(../img/bg-textured-b.jpg); background-size: cover; mix-blend-mode: screen; width: 100%; height: 100%; pointer-events: none;}
.menu ul,
.menu li { display: flex; align-items: center;}
.menu li + li:before { content: ''; display: block; width: 1.4rem; height: 1.4rem; margin: 0 1.2rem; background: url(../img/icon-star-b.svg); background-size: contain;}
.menu .idioma { font-family: 'Holtwood One SC', serif; font-size: 1.3rem; line-height: 1em;}
.menu .idioma span { margin: 0 1rem;}
.menu a { color: #000;}
.menu a.active,
.menu a:hover { opacity: 0.5;}
.menu a[data-layer] { font-family: 'Holtwood One SC', serif; font-size: 3rem; line-height: 1em; text-transform: lowercase;}

.footer { pointer-events: none;}
.footer a { pointer-events: all;}
.footer nav { font-family: 'Holtwood One SC', serif; font-size: 1.3rem; line-height: 1em; display: none;}
.footer nav a { margin: 0 .5rem; color: #000;}
.footer nav a.active { opacity: 0.5;}

.txt img { max-width: 100%; margin: 1.222em 0;}
.txt p { max-width: 52rem; margin-bottom: 1.222em;}
.txt h1,
.txt h2,
.txt h3 { font-size: 3rem; line-height: 1.133em; max-width: 52rem;}
.txt ul { list-style: none;}
.txt h1,
.txt h2 { border-top: 4px solid; border-bottom: 4px solid; padding: 0.7rem 0 0.9rem 0; margin-bottom: 1.333em;}
.txt h1 { text-align: center;}



/* Popups */

.pop-up { position: absolute; z-index: 10; width: 100%; height: calc(100% - 4rem); max-width: 72rem; right: 4rem; top: calc(100% + 4rem);  box-shadow: -20px 20px 0 0 rgba(0,0,0,0.09);}
.pop-up.active { top: 4rem;}

.pop-up .btn-close { position: absolute; top: 3rem; right: 3rem; z-index: 20; padding: 1rem;}
.pop-up .pop-up-in { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; padding: 8rem 4rem; z-index: 10; overflow: auto; -webkit-overflow-scrolling: touch; overflow-x: hidden;}
.pop-up:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; z-index: 0; top: 0; left: 0;}

.pop-up[data-layer=punto] { right: auto; left: 4rem; color: #FFF;}
.pop-up[data-layer=punto] a { color: #FFF;}
.pop-up[data-layer=punto] a.link-ruta { font-family: 'Holtwood One SC', serif; font-size: 1.3rem; line-height: 1em; display: flex; max-width: 52rem; align-items: center; border-top: 4px solid; padding: .5rem 0; text-transform: uppercase;}
.pop-up[data-layer=punto] a.link-ruta:before { content: ''; display: inline-block; width: 1.4rem; height: 1.4rem; margin-right: 1rem; background: url(../img/icon-star-w.svg) no-repeat center; background-size: auto;}
.pop-up[data-layer=punto] a.link-ruta:after { content: ''; display: inline-block; width: 1.4rem; height: 1.4rem; margin-left: 1rem; background: url(../img/icon-arrow-w.svg) no-repeat center; background-size: auto;}
.pop-up[data-layer=punto] a.link-ruta strong { font-weight: 400;}
.pop-up[data-layer=punto] h1 { text-align: left;}
.pop-up[data-layer=punto] .box-peliculas { margin: 4rem 0;}
.pop-up[data-layer=punto] .box-peliculas p { margin-bottom: .5rem;}
.pop-up[data-layer=punto] .box-peliculas ul { font-size: 2.4rem; line-height: 1.222em;}

.pop-up[data-layer=punto] a.link-tag { display: inline-block; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1.4rem; color: #FFFFFF; line-height: 1.4rem; padding: .3rem .5rem; background-color: rgba(0,0,0,.2);}
.pop-up[data-layer=punto] a:hover { opacity: .5;}
.pop-up[data-layer=punto] h1 a.link-tag { vertical-align: .2em;}

.pop-up.punto0:after { background: #FFFFFF;}
.pop-up.punto1:after { background: #883B03;}
.pop-up.punto2:after { background: #BE5817;}
.pop-up.punto3:after { background: #A11410;}
.pop-up.punto4:after { background: #FD611C;}

.pop-up.punto0 { color: #000;}
.pop-up.punto0 a { color: #000;}
.pop-up.punto0 a.link-tag { background-color: rgba(0,0,0,.6);}
.pop-up.punto0 polygon { fill: #000;}


.pop-up[data-layer=rutas] { color: #000;}
.pop-up[data-layer=rutas] .pop-up-in { background-color: #EED7BA; background-image: url(../img/bg-textured-w.png); background-repeat: no-repeat; background-position: center; background-size: cover;}
.pop-up[data-layer=rutas] .pop-up-in > * { position: relative; z-index: 1;}
.pop-up[data-layer=rutas] h1 { position: relative; mix-blend-mode: multiply; color: #000; background: #FFF; }
.pop-up[data-layer=rutas] h1:before { content: ''; display: block; position: absolute; z-index: 2; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/bg-textured-b.jpg); background-size: cover; mix-blend-mode: screen; pointer-events: none;}
.pop-up[data-layer=rutas] h2 { margin-bottom: 0;}
.pop-up[data-layer=rutas] nav { margin-bottom: 5rem;}
.pop-up[data-layer=rutas] li { margin-bottom: .5rem;}
.pop-up[data-layer=rutas] a { white-space: nowrap; display: inline-flex; align-items: center;}
.pop-up[data-layer=rutas] a :first-child { margin-right: 1rem;}
.pop-up[data-layer=rutas] a :last-child { margin-left: 1rem;}
.pop-up[data-layer=rutas] a:hover { opacity: .5;}
.pop-up[data-layer=rutas] a.link-ruta1 { color: #883B03;}
.pop-up[data-layer=rutas] a.link-ruta2 { color: #BE5817;}
.pop-up[data-layer=rutas] a.link-ruta3 { color: #A11410;}
.pop-up[data-layer=rutas] a.link-ruta4 { color: #FD611C;}
.pop-up[data-layer=rutas] a.link-ruta1 polygon { fill: #883B03;}
.pop-up[data-layer=rutas] a.link-ruta2 polygon { fill: #BE5817;}
.pop-up[data-layer=rutas] a.link-ruta3 polygon { fill: #A11410;}
.pop-up[data-layer=rutas] a.link-ruta4 polygon { fill: #FD611C;}


.pop-up.ruta-info { z-index: 30; color: #FFF;}
.pop-up.ruta-info a { position: relative; color: #FFF; font-size: 2.4rem; line-height: 1.222em; white-space: nowrap;}
.pop-up.ruta-info a:hover { opacity: .5;}  
.pop-up.ruta-info a:before { content: ''; display: inline-block; width: 1.4rem; height: 1.4rem; margin-right: 1rem; background: url(../img/icon-star-w.svg) no-repeat center; background-size: auto;}
.pop-up.ruta-info a:after { content: ''; display: inline-block; width: 1.4rem; height: 1.4rem; margin-left: 1rem; background: url(../img/icon-arrow-w.svg) no-repeat center; background-size: auto;}
.pop-up.ruta-info[data-layer=ruta-info-1]:after { background: #883B03;}
.pop-up.ruta-info[data-layer=ruta-info-2]:after { background: #BE5817;}
.pop-up.ruta-info[data-layer=ruta-info-3]:after { background: #A11410;}
.pop-up.ruta-info[data-layer=ruta-info-4]:after { background: #FD611C;}
.pop-up.ruta-info .box-ruta p { margin-bottom: .5rem;}


.pop-up[data-layer=info] h1 { /* color: #DFC29C; */ color: #FFF;}
.pop-up[data-layer=info] polygon { /* fill: #DFC29C; */ fill: #FFF;}
.pop-up[data-layer=info]:after { background-image: url(../img/bg-textured-b-2.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
/* .pop-up[data-layer=info]:before { background-color: #000; content: ''; display: block; width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; opacity: 0.35;} */


/* Sliders */

.pop-up .slider { position: relative; width: 100%; padding-bottom: 5rem;}
.pop-up .slider .flickity-viewport { overflow: visible;}
.pop-up .slider-item { display: block; margin-right: 2rem;}
.pop-up .slider-item img { height: 20rem; width: auto;}
.pop-up .slider button { position: absolute; top: auto; bottom: 0; transform: translateY(0);}
.pop-up .slider button:hover { opacity: 0.5;}
.pop-up .slider button[disabled] { opacity: 0.25;}
.pop-up .slider .flickity-prev-next-button.previous { left: 0; background: url(../img/icon-l.svg) no-repeat center left;}
.pop-up .slider .flickity-prev-next-button.next { right: 0; background: url(../img/icon-r.svg) no-repeat center right;}

.pop-up.punto0 .slider .flickity-prev-next-button.previous { left: 0; background: url(../img/icon-l-b.svg) no-repeat center left;}
.pop-up.punto0 .slider .flickity-prev-next-button.next { right: 0; background: url(../img/icon-r-b.svg) no-repeat center right;}



/* Mapa */

#map { width: 100%; height: 100%; position: absolute; z-index: 1;}

#map .punto0, 
#map .punto1, 
#map .punto2, 
#map .punto3,
#map .punto4 { cursor: pointer; width: 2rem; height: 2rem; border-radius: 50%;}
#map .punto0 span, 
#map .punto1 span, 
#map .punto2 span, 
#map .punto3 span, 
#map .punto4 span { display: none; position: absolute; white-space: nowrap; top: 120%; left: 50%; transform: translateX(-50%); font-size: 1.6rem; font-family: 'Roboto Condensed', sans-serif; background-color: #DFC29DDD; padding: .3rem 1rem; border-radius: 1rem;}
#map .punto0:hover, 
#map .punto1:hover, 
#map .punto2:hover, 
#map .punto3:hover,
#map .punto4:hover { cursor: pointer; width: 3rem; height: 3rem; background-color: #DFC29D; z-index: 3; opacity: 1;}
#map .punto0:hover span, 
#map .punto1:hover span, 
#map .punto2:hover span, 
#map .punto3:hover span, 
#map .punto4:hover span, 
#map .punto5:hover span { display: block; }

#map .punto0 { border: 3px solid #FFFFFF; color:  #FFFFFF; background: #FFFFFF; opacity: .5;}
#map .punto1 { border: 3px solid #883B03; color:  #883B03; background: #883B03;}
#map .punto2 { border: 3px solid #BE5817; color:  #BE5817; background: #BE5817;}
#map .punto3 { border: 3px solid #A11410; color:  #A11410; background: #A11410;}
#map .punto4 { border: 3px solid #FD611C; color:  #FD611C; background: #FD611C;}

.mapboxgl-ctrl-compass { display: none !important;}


/* Animation - Transition */

a, a *, 
.pop-up { transition: all .4s ease;} 
#map .punto0, #map .punto1, #map .punto2, #map .punto3, #map .punto4, :after { transition: width .4s ease, height .4s ease, background-color .4s ease;} 

@keyframes fadein 			{ from { opacity: 0;} to { opacity: 1;} }
@-moz-keyframes fadein 		{ from { opacity: 0;} to { opacity: 1;} }
@-webkit-keyframes fadein 	{ from { opacity: 0;} to { opacity: 1;} }
@-o-keyframes fadein 		{ from { opacity: 0;} to { opacity: 1;} }