/*
 * version: 1.23
 */

@font-face {
	font-family: 'DIN Pro';
	src: url('DINPro.eot');
	src: local('DIN Pro'), local('DINPro'),
	url('DINPro.eot?#iefix') format('embedded-opentype'),
	url('DINPro.woff2') format('woff2'),
	url('DINPro.woff') format('woff'),
	url('DINPro.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
html {
	display: grid;
	padding: 0px;
	margin: 0px;
	height: 100vh;
	width: 100vw;
	justify-items: stretch;
	align-items: stretch;
	justify-content: stretch;
	align-content: stretch;
}
body {
	position: relative;
	display: grid;
	grid-template-columns: [begin-bar] 41px [end-bar start-main] 1fr [end-main];
	grid-template-rows: 1fr;
	grid-template-areas:
		"sidebar main";
	gap: 0px;
	justify-items: stretch;
	align-items: stretch;
	justify-content: stretch;
	align-content: stretch;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	font-family: 'DIN Pro' !important;
	font-weight: normal;
	font-style: normal;
	font-size: 1rem;
	color: #666666;
}
#logo {
	grid-column: 3/6;
	grid-row: 1/2;
	justify-self: end;
	align-self: center;
	max-width:35vw;
	z-index: 1;
}
#logo img {
	width: 100%;
	cursor: pointer;
}
.panner {
	display: block;
	position: relative;
	align-self: center;
	width: 26px;
	cursor: pointer;
}
.panner img {
	position: relative;
	display: block;
}
#left {
	grid-area: left;
	justify-self: end;
}
#right {
	grid-area: right;
	justify-self: start;
}
#lateral {
	position: relative;
	/* as child */
	grid-area: sidebar;
	/* as parent */
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: [begin-button] 41px [end-button] 0.95fr [begin-lang] 50px [end-lang] 1.05fr;
	grid-template-areas:
		"menu"
		"title"
		"lang"
		"desc";
	gap: 0px;
	justify-items: stretch;
	align-items: stretch;
	outline: #666666 solid 1px;
	background-color: #CCCCCC;
}
main {
	grid-area: main;
	display: grid;
	grid-template-columns: [begin-left] 40px 40px [end-left start-center] 1fr [end-center begin-right] 60px 40px [end-right];
	grid-template-rows: [begin-logo] 60px [end-logo] 1fr [begin-counter] 30px [end-counter begin-nav] 25px [end-nav begin-footer] 20px [end-footer];
	grid-template-areas:
		"menu menu logo logo logo"
		"left center center center right"
		"counter counter other hashtag hashtag"
		"nav nav nav nav nav"
		"footer footer footer footer footer";
	gap: 0px;
	justify-items: stretch;
	align-items: stretch;
	justify-content: stretch;
	align-content: stretch;
	width: 100%;
	overflow: hidden;
	background-color: black;
}
#button:hover > div {
	display: block;
}
#button > a {
	width: 100%;
	height: 100%;
	display: block;
	background-image: url("/images/menu_icon.svg");
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
	outline: #666666 solid 1px;
}
#menu {
	margin: 0px;
	padding: 0px;
	position: fixed;
	top: 0px;
	left: 41px;
	border: #CCCCCC solid 1px;
	z-index: 5;
}
#menu div {
	display: block;
	margin: 0px;
	padding: 0px;
	height: 41px;
	list-style: none;
	border-top: #14FF64 solid 1px;
	background-color: #666666;
	overflow: hidden;
}
#menu div:first-child {
	border-top: #CCCCCC solid 0px;
}
#menu div.active {
	background-color: #666666;
}
a.nav-link, a.nav-link:visited {
	display: inline-block;
	margin: auto;
	width: inherit;
	height: inherit;
	color: #14FF64;
	background-color: #666666;
	text-decoration: none;
	padding: 0.4em;
	font-size: 1.2rem;
	vertical-align: middle;
}
a.nav-link:hover {
	width: 100%;
	height: 100%;
	color: #14FF64;
	background-color: #666666;
	text-decoration: line-through;
}
#menu div:first-child a {
	display: block;
	color: #14FF64;
	background-image: url("/images/logo_dark.svg");
	background-color: #14FF64;
	background-size: inherit;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
}
#languages {
	/* as child */
	grid-area: lang;
	/* as parent */
	display: grid;
	grid-auto-flow: row;
	place-items: stretch stretch;
/*	outline: #666666 solid 1px;*/
	width: 100%;
}
#languages a {
	display: block;
	color: #666666;
	background-color: #CCCCCC;
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 0px;
	text-align: center;
	font-size: 1.3em;
	text-decoration: none;
	outline: #666666 solid 1px;
}
#languages a:hover {
	background-color: #14FF64 !important;
}
#title {
	position: relative;
	/* as child */
	grid-area: title;
	transform: rotate(270deg);
	transform-origin: center;
	position: relative;
	width: 40vh;
	height: 41px;
	top: 20vh;
	left: 20px;
	margin: -20px 0 0 -20vh;
/*	outline: orange solid 1px !important;*/
}
#title h1 {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: auto;
	font-size: 3ex;
	text-align: center;
/*	outline: cyan none 1px !important;*/
}
#description {
	position: relative;
	/* as child */
	grid-area: desc;
	transform: rotate(270deg);
	transform-origin: center;
	position: relative;
	width: 42vh;
	height: 41px;
	top: 21vh;
	left: 20.5px;
	margin: -20.5px 0 0 -21vh;
/*	outline: orange solid 1px !important;*/
}
#description h2 {
	position: absolute;
	width: 100%;
	margin: auto;
	top: 33%;
	transform: translate(0, -50%);
	text-align: center;
	letter-spacing: 0.1ex;
	font-size: 2.7ex;
}
#description h3 {
	position: absolute;
	width: 100%;
	margin: auto;
	top: 70%;
	transform: translate(0, -50%);
	text-align: center;
	letter-spacing: 0.3ex;
	font-size: 1.8ex;
}
#foto {
	grid-column: 1/6;
	grid-row: 1/5;
	display: block;
	position: relative;
	border: orange dashed 0px;
	width: 100%;
	height: 100%;
	cursor: grab;
}
#navigator {
	display: block;
	width: 94.5vw;
	border: black solid 2px;
	outline: white solid 1px;
}
#counter {
	grid-area: counter;
	align-self: end;
	justify-self: center;
	display: block;
	z-index: 1;
	width: 80px;
	margin: auto;
	padding: 2px;
	font-size: 0.5rem;
	color: #14FF64;
}
#counter > p {
	margin: auto;
	padding: 0px;
	text-align: center;
}
#counter > p > span {
	font-size: 0.6rem;
	background-color: #14FF64;
	color: #666666;
	border: 1px solid transparent;
	padding: 2px;
	margin: 1px;
}
#btn-bar {
	/* as child */
	grid-area: right;
	justify-self: start;
	align-self: end;
	/* as parent */
	display: grid;
	grid-auto-flow: row;
	place-items: stretch stretch;
	gap: 3px;
	width: 26px;
}
#btn-bar > div {
	text-align: center;
	z-index: 1;
	width: 26px;
}
#btn-bar a {
	width: 100%;
	border-radius: 50%;
	font-size: 0em;
}
#btn-bar a:hover {
	border: #666666 solid 1px;
}
#btn-bar a > img {
	width: inherit;
}
.social-ht {
	grid-area: hashtag;
	color:white;
	z-index: 1;
	align-self: end;
}
.collapse {
	display: none;
}
.lightbox {
	position: relative;
	grid-area: main;
	background-color: #666666;
	border: 2px solid #14FF64;
	border-radius: 3px;
/*	width: fit-content;*/
	margin: auto;
	place-items: center center;
	z-index: 4;
}
.lightbox nav {
	border-radius: 3px;
}
.lightbox button {
	color: #14FF64;
	display: inline-block;
	background-color: transparent;
	border: 1px none #CCCCCC;
	text-transform: uppercase;
	height: 100%;
	vertical-align: middle;
	float: right;
	font-size: 2em;
	margin-bottom: -0.3em;
	cursor: pointer;
}
.lightbox section {
	position: relative;
	box-sizing: border-box;
	width: fit-content;
	max-height: 83vh;
	max-width: 80vw;
	margin: 1.2rem;
	overflow-y: auto;
	padding-right: 2em;
}
.lightbox section > div {
	display: inline-block;
	position: relative;
	top: 0px;
	padding: 2%;
}
.lightbox section > div > h1 {
	margin-top: 0em;
}
.lcct-section {
	color: #14FF64;
}
.project {
	font-size: 1em;
}
.project > section {
	border-radius: 3px;
}
.project > section > p {
	margin: 1.5em;
}
.sheet {
	border: #14FF64 solid 2px;
	margin: 3em;
	padding: 1em;
	width: 68%;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.9rem;
}
.sheet {
	margin-top: 0px;
}
.sheet dt {
	color: #CCCCCC;
}
.sheet > img {
	width: 80%;
	margin-left: 10%;
}
p.signature {
	text-align:right;
}
.contact h1 {
	font-size: 1.5em;
	width: 5.5em;
	background-image: url("/images/envelope.svg");
	background-position: right;
	background-repeat: no-repeat;
	background-size: 25%;
}
.map {
	grid-column: 1/3;
	grid-row: 1/2;
	position: relative;
	align-self: center;
	justify-self: center;
	background-color: black;
	width: 100vw;
	min-height: 100vh;
	z-index: 9;
/*	outline: white solid 1px;*/
	cursor: pointer;
}
.map button {
	position: absolute;
	top: 0px;
	right: 0px;
	color: #14FF64;
	display: none /*inline-block*/;
	background-color: transparent;
	border: 1px none #CCCCCC;
	font-size: 2rem;
/*	padding: 0.5rem 1.1rem 0.5rem 1.1rem;*/
	cursor: pointer;
}
.map img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
a.nav-contact {
	color: #666666;
	background-color: #14FF64;
	font-size: 1em;
	text-decoration: none;
	padding: 0.3em;
	border-radius: 0.2em;
}
a.social-ig img {
	width: 2.5em;
}
img.social-logo {
	margin-left: 0.5em;
	width: 2.5em;
}
.contact a.nav-contact, #contacto a.nav-contact, #contact a.nav-contact {
	padding: 0.5em;
}
.notes, #notas, #notes {
	font-size: 1em;
}
.notes ul, #notas ul, #notes ul {
	list-style: "\2731";
	column-count: 2;
	column-gap: 15px;
	margin-block-end: 1.5em;
}
.notes ul li, #notas ul li, #notes ul li {
	padding-left: 5px;
}
a.note-link, a.note-link:visited {
	display: block;
	margin: 0px;
	width: 100%;
	height: 100%;
	color: #14FF64;
	background-color: #666666;
	text-decoration: none;
}
a:hover.note-link {
	text-decoration: line-through;
}
.notes .nav-note, #notas .nav-note, #notes .nav-note {
	padding: 12pt;
	margin-right: 20px;
	color: #666666;
	background-color: #14FF64;
	border-radius: 0.5em;
}
.notes .nav-note h2, #notas .nav-note h2, #notes .nav-note h2 {
	margin-top: 0em;
}
footer {
	grid-area: footer;
	outline: #666666 solid 1px;
	display: block;
	height: 100%;
	width: 100%;
	font-size: 6pt;
	color: white;
	background-color: black;
}
footer > p {
	position: fixed;
	right: 0px;
	margin: 2px;
	margin-right: 5px;
	padding: 0px;
	text-align: right;
}
footer+div {
	grid-area: nav;
}
.active {
	background-color: #14FF64 !important;
}
/*
 * Puntos
 */
.lcct-point {
	top: -14.5px;
	left: -14.5px;
	width: 58px;
	height: 58px;
	cursor: pointer;
	display:block;
	overflow: visible;
	border-radius: 58px;
}
.lcct-point div.mask {
	display: none;
	position: fixed;
	top: 0px;
	left: 41px;
	height: 100vh;
	width: 100vw;
	background-color: black;
	opacity: 0.80;
}
.lcct-point div.laser {
	display: none;
	pointer-events: none;
	overflow: visible;
}
.lcct-point div.laser img {
	position: relative;
	width: 5760px;
	height: 3600px;
	margin-left: 31px;
	margin-top: 17px;
	left: -2880px;
	top: -1800px;
	z-index: 3;
}
.lcct-point div.asterisk {
	position: absolute;
	top: 14.5px;
	left: 14.5px;
	width: 29px;
	height: 29px;
	background: url('/images/asterisk.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}
/*
 * Notas
 */
.lcct-note {
	font-size: 0.8em;
	color: white;
}
.lcct-note pre {
	font-family: 'DIN Pro';
	margin-right: 1em;
}
.lcct-note > section > p {
	max-width: 30rem;
}
.lcct-note > section > div > p {
	max-width: 30vw;
}
#N09 section > ul {
	margin: 0em;
	padding: 0px;
	list-style-type: none;
	font-size: 0.6rem;
	color: #CCCCCC;
}
#N20 div {
	column-count: 3;
	column-gap: 1em;
}
#N25 div {
	column-count: 2;
	column-gap: 15px;
}
#N25 h4:first-child {
	margin-top: 0px;
}
#N34 {
	text-align: center;
}
#N40 p:first-child {
	color: #14FF64;
}
#N40 p:first-child+pre {
	color: #14FF64;
}
#N40 p:first-child+pre+p {
	margin-top:3em;
}
#N41 p:first-child {
	color: #14FF64;
}
#Epilogo h3:first-child {
	color: #14FF64;
}
#Epilogo ol {
	width: 35vw;
	margin: 1em;
	padding: 0px;
	font-size: 0.6rem;
	color: #CCCCCC;
}
#Epilogo sup {
	font-size: 0.5rem;
}
#N39 h3:first-child, #N42 h3:first-child {
	color: #14FF64;
}
#N40 a {
	font-size: 0.7rem;
	padding: 0px;
}
p.author {
	color: #14FF64;
}
#lasers {
	display: none;
	background-color: transparent;
	background-repeat: no-repeat;
}
#mask {
	grid-area: main;
	display: none;
	z-index: 2;
	background-color: black;
	opacity: 0.80;
}
#warn {
	display: none;
}

/*
 * MEDIA ADJUSTMENTS
 */
/* ----------- iPad Pro 12.9" ----------- */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
	and (min-device-width: 1366px)
	and (max-device-width: 1366px)
	and (orientation: landscape)
	and (-webkit-min-device-pixel-ratio: 2) {

}
/* ----------- iPad Pro 10.5" ----------- */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
  and (min-device-width: 1112px)
  and (max-device-width: 1112px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {

}
/* ----------- Laptop Non-Retina Screens ----------- */
@media screen
  and (min-device-width: 1200px)
  and (max-device-width: 1600px)
  and (-webkit-min-device-pixel-ratio: 1) {
	#title h1 {
		font-size: 1.8ex;
	}
	#description h2 {
		font-size: 2ex;
	}
	#description h3 {
		font-size: 1.5ex;
	}
}
/* ----------- Laptop Retina Screens ----------- */
@media screen
  and (min-device-width: 1200px)
  and (max-device-width: 1600px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) {
	#title h1 {
		font-size: 1.8ex;
	}
	#description h2 {
		font-size: 2ex;
	}
	#description h3 {
		font-size: 1.5ex;
	}
}
/* ---- Default height 768 ---- */
@media only screen
	and (max-device-height: 768px)
	and (orientation: landscape ) {
	#title h1 {
		font-size: 1.8ex;
	}
	#description h2 {
		font-size: 2ex;
	}
	#description h3 {
		font-size: 1.5ex;
	}
}
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
@media only screen
	and (min-device-height: 768px)
 	and (max-device-width: 1024px)
 	and (orientation: landscape)
 	and (-webkit-min-device-pixel-ratio: 2) {
	#title h1 {
		font-size: 2.3ex;
	}
	#description h2 {
		font-size: 2.6ex;
	}
	#description h3 {
		font-size: 1.7ex;
	}
}
/* ----------- iPad 1, 2, Mini and Air ----------- */
@media only screen
	and (min-device-height: 768px)
	and (max-device-width: 1024px)
	and (orientation: landscape)
	and (-webkit-min-device-pixel-ratio: 1) {
	#title h1 {
		font-size: 2.3ex;
	}
	#description h2 {
		font-size: 2.6ex;
	}
	#description h3 {
		font-size: 1.7ex;
	}
}
/* ---- Default height 720 ---- */
@media only screen
	and (max-device-height: 720px)
	and (orientation: landscape) {
	#title h1 {
		font-size: 2.0ex;
	}
	#description h2 {
		font-size: 1.8ex;
	}
	#description h3 {
		font-size: 1.1ex;
	}
}
/* ---- Default height 411 ---- */
@media only screen
	and (max-device-height: 411px)
	and (orientation: landscape) {
	#title {
		width: 32vh;
		height: 41px;
		top: 17vh;
		left: 20px;
		margin: -20px 0 0 -16vh;
	}
	#description {
		width: 36vh;
		height: 41px;
		top: 19vh;
		left: 20.5px;
		margin: -20.5px 0 0 -18.5vh;
	}
	#title h1 {
		font-size: 1.6ex;
	}
	#description h2 {
		top: 50%;
		font-size: 1.5ex;
	}
	#description h3 {
		display: none;
	}
	#zoom-in, #zoom-out, #counter {
		display: none !important;
	}
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
@media only screen
	and (min-device-height: 414px)
	and (max-device-width: 736px)
	and (-webkit-min-device-pixel-ratio: 3)
	and (orientation: landscape) {
	#title h1 {
		font-size: 1.6ex;
	}
	#description h2 {
		top: 50%;
		font-size: 1.5ex;
	}
	#description h3 {
		display: none;
	}
}
/* ---- Default height 375 ---- */
@media only screen
	and (max-device-height: 375px)
	and (orientation: landscape) {
	#title h1 {
		font-size: 1.45ex;
	}
	#description h2 {
		font-size: 1.4ex;
	}
	#description h3 {
		display: none;
	}
	#zoom-in, #zoom-out, #counter {
		display: none !important;
	}
}
/* ----------- iPhone X ----------- */
@media only screen
	and (max-device-height: 375px)
	and (max-device-width: 812px)
	and (-webkit-min-device-pixel-ratio: 3)
	and (orientation: landscape) {
	#title h1 {
		font-size: 1.5ex;
	}
	#description h2 {
		top: 50%;
		font-size: 1.4ex;
	}
	#description h3 {
		display: none;
	}
	#zoom-in, #zoom-out, #counter {
		display: none !important;
	}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
@media only screen
	and (min-device-height: 375px)
 	and (max-device-width: 667px)
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: landscape) {
	#title h1 {
		font-size: 1.8ex;
	}
	#description h2 {
		top: 50%;
		font-size: 1.7ex;
	}
	#description h3 {
		display: none;
	}
	#zoom-in, #zoom-out, #counter {
		display: none !important;
	}
}
/* ---- Default height 350 ---- */
@media only screen
	and (max-device-height: 350px)
	and (orientation: landscape) {
	#title h1 {
		font-size: 1.4ex;
	}
	#description h2 {
		font-size: 1ex;
	}
	#description h3 {
		display: none;
	}
}
/* ---- Default height 320 ---- */
@media only screen
	and (max-device-height: 320px)
	and (orientation: landscape) {
	#title h1 {
		font-size: 1.3ex;
	}
	#description h2 {
		font-size: 1ex;
	}
	#description h3 {
		display: none;
	}
	#zoom-in, #zoom-out, #counter {
		display: none !important;
	}
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
@media only screen
	and (min-device-height: 320px)
	and (max-device-width: 568px)
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: landscape) {
	#title h1 {
		font-size: 1.3ex;
	}
	#description h2 {
		top: 50%;
		font-size: 1.1ex;
	}
	#description h3 {
		display: none;
	}
	#zoom-in, #zoom-out, #counter {
		display: none !important;
	}
}
/* ----------- iPhone 4 and 4S ----------- */
@media only screen
	and (min-device-height: 320px)
.  and (max-device-width: 480px)
.  and (-webkit-min-device-pixel-ratio: 2)
.  and (orientation: landscape) {
	#title h1 {
		font-size: 1.3ex;
	}
	#description h2 {
		font-size: 1.1ex;
	}
	#description h3 {
		display: none;
	}
	#zoom-in, #zoom-out, #counter {
		display: none !important;
	}
}
/* ---- Default height 279 ---- */
@media only screen
	and (max-device-height: 279px)
	and (orientation: landscape) {
	#title h1 {
		font-size: 1.3ex;
	}
	#description h2 {
		font-size: 0.9ex;
	}
	#description h3 {
		font-size: 0.6ex;
	}
}

/* Columns of note 20 */
@media only screen and (max-device-width: 640px) {
	#N20 div {
		column-count: 2;
	}
}

/* Portrait Warning */
@media only screen and (orientation:portrait) {
	#warn {
		grid-column: 1/3;
		grid-row: 1/2;
		display: block;
		position: relative;
		top: 0px;
		left: 0px;
		width: 100vw;
		height: 100vh;
		background-color: black;
		background-image: url("/images/logo.png");
		background-repeat: no-repeat;
		background-position-x: center;
		background-size: contain;
		color: #14FF64;
		z-index: 10;
	}
	#warn h1 {
		font-size: 1.5rem;
		padding: 10%;
		margin: 0%;
	}
	#warn h1:first-child {
		margin-top: 25%;
	}
	#warn img {
		display: block;
		position: relative;
		margin: 0 auto;
		width: 30vw;
	}
	#warn h1:last-child {
		color: #FFF79D;
	}
}