/* 30 jun 2021 */
/** Proyecto Portafolio Personal 
** SECCIONES 
*** Reset & Global
*** Main elements
*** Projects
*** Animations
**/
html, body {
	margin:0; padding: 0}
li, ul {
	line-height: inherit; list-style: none;
	margin:0; padding: 0}
body {
	font: normal 16px arial,sans-serif;
}
a {
	color: #193054;
	text-decoration: none;
	transition: .2s ease-out;
}
a:hover {
	color: #224c91;
}
img {max-width: 100%}
/*  Estado (Sin uso: borrar)  */
body.estatico #forma-pantalla {position:relative !important; top:0px !important; height: 500px !important}
body.estatico #content {position:relative !important; top:0px !important; margin-top:-200px !important}
body.estatico #works {position:relative !important; top:0px !important;}
body.estatico #menu button {right:-30px !important;}
/*G*/
#footer {
	width: 100%; height:2em; color: #fff; text-align: center; font:normal 10px arial,sans-serif; opacity: 0.8; position: fixed; left: 0px; bottom:0px; display: none;
}
.wrapper {
	margin: 0 auto;
	max-width: 960px;
	position: relative; 
}
#forma-pantalla {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	transition: height .2s;
	z-index: 1;
}
body.blog {background: #ddd;}
#forma-1 {background:url(forma-2.png); height: 870px; width: 774px; position: absolute; top:0px; left: 0px; }
#forma-2 {background:url(forma-2.png); height: 870px; width: 774px; position: absolute; top:0px; right: 0px;}

header {
	width:594px;
	height:366px;
	position: absolute;
	left: 183px;
	top:45%;
	left:50%;
	margin-left: -297px;
	margin-top: -183px;
	text-align:center;
	color:#fff;
	-webkit-perspective: 1500px;
	perspective: 1500px;
	-webkit-perspective-origin: 50% 35%;
	perspective-origin: 50% 35%;
}
header span {
	display:block; text-indent: -9999px
}
header h1 {
	margin: 0;
	height: 118px;
	font: italic 32px arial,sans-serif;
	cursor: pointer;
}
header p {
	font-size: 26px;
	font-family: pnlightitalic,arial, sans-serif;
	color: #fff;
	color: rgba(255, 255, 255, 0);
	text-shadow: 0px 0px 0px #fff;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
@media (min-height: 600px) {
	header p {
		font-size: 30px;
	}
}
@media (min-height: 900px) {
	header p {
		font-size: 36px;
	}
}
header p em {
	display: block;
}
#content {
	position: fixed;
	width: 100%;
	height: 500px;
	margin-bottom:500px;
	left: 0px;
	top: 100%;
	background: transparent;
	overflow: hidden;
	z-index: 1;
}
body.openproject  {
	overflow: hidden
}
body.openproject #content {
	display: none
}
body.openproject header button, body.openproject #topbar h1 {
	opacity:0
}
/* .nav: son los logos de wordpress, jquery, etc */
.nav {
	position:absolute;
	display: block;
	top: 70px;
	left: 50%;
	width:700px;
	height:130px;
	text-align: center;
	margin: 00px -350px	-130px;
}
.nav a {
	display: block;
	float: left;
	width: 33.3%;
}
.nav a img {
	width:121px;
	height:auto;
}
.nav span {display: none}
#nav-word {float:left}
#nav-html {float:right}
#nav-jque {position: relative; top: 8px}
.nav a:hover img {
	-webkit-animation: circPop .5s ease-out;
	-moz-animation: circPop .5s ease-out;
	animation: circPop .5s ease-out;
}
@-webkit-keyframes circPop {
0% {-webkit-transform: rotateY(0deg) translateY(0px) scale(1)}
50% {-webkit-transform: rotateY(180deg) rotateZ(20deg) translateY(-3px) scale(1.0); opacity:0.8}
100% {-webkit-transform: rotateY(360deg) translateY(0px) scale(1)}
}
@-moz-keyframes circPop {
0% {-moz-transform: rotateY(0deg) translateY(0px) scale(1)}
50% {-moz-transform: rotateY(180deg) rotateZ(20deg) translateY(-3px) scale(1.0); opacity:0.8}
100% {-moz-transform: rotateY(360deg) translateY(0px) scale(1)}
}
@keyframes circPop {
0% {transform: rotateY(0deg) translateY(0px) scale(1)}
50% {transform: rotateY(180deg) rotateZ(20deg) translateY(-3px) scale(1.0); opacity:0.8}
100% {transform: rotateY(360deg) translateY(0px) scale(1)}
}
#menu {display: block; position: fixed;
	top:0; right:0;
	z-index:3; }
#menu button {
	width: 60px;
	height: 60px;
	background:url(menu-bot.png) center no-repeat;
	background-size: 17px;
	border: 0px;
	position: fixed;
	outline: 0;	
	top: 0px;
	right: 0px;
	cursor: pointer;
}
#menu ul {position:absolute; top:0px; right:60px;
	width: 500px; text-align:right}
#menu li {display: inline; line-height:60px; margin-right: 10px}
#menu ul a {color: white}
body.openproject #menu button {
	background: none;
}
#menu button:hover {
	opacity:0.9
}

/** Portfolio **/
#works {
	height: 100%;
	position: fixed;
	overflow: auto;
	top: 80px;
	left: 0px;
	width: 100%;
	-webkit-perspective: 1500px;
	-moz-perspective: 1500px;
	perspective: 1500px;
	z-index: 1;
}
.phone #works .col img { max-width: 40%; height: auto}
#works  .col span { display: block; padding: 0.2em; color: #fff; text-transform: capitalize; background: rgba(0,0,0,.3); margin-bottom: 2px; /*box-shadow: inset -10px 0px 40px rgb(0, 107, 211);*/}
#works  .col span img { margin-right: 10px; vertical-align: middle; transition: .2s ease-out }
#works  .col span:hover {transition: .1s ease-out; -webkit-transform-origin: left; transform-origin: left; -webkit-transform: scale(.90); transform: rotateY(10deg)}

/*
#works  .col span:hover img {opacity: 0.8; -webkit-transform: scale(1.05); transform: scale(1.05)}
#works  .col span:hover img:hover {opacity: 0.5; transition: .1s ease-out; -webkit-transform: scale(.90); transform: scale(.90)}*/
.phone #topbar ul {display: none}
.phone #works  #col4 { padding-bottom: 80px }
.phone #project .slider {
  position: absolute;
  top: -100px;
  left: 5%;
  width: 90%;
  height: auto;
  padding-bottom: 50%;
  overflow: hidden;
}
.phone #project .copy {
	width: 100%;right: 0px;border-radius: 0;
	padding-top: 70px;
}

#project {
	width: 100%;
	position: fixed; 
	padding:1px 0;
	top: 0px;
	left: 0px;
	overflow: hidden;
	display: none;
	z-index: 2;
}
#project.open {
	display:block;
	opacity: 1;
	overflow-y: scroll;
}
#project .spot {
	display: block;
	position: fixed;
	width: 60%;
	height:250px;
	border-radius: 50%;
	background-color: rgba(128, 0, 128,0.5);
	color: rgba(128, 0, 128,0.5);
	box-shadow: 0px 0px 75px 100px;
	transition: all .5s;
	user-select: none;
}
#project #spot-top {
	top:-205px;
	right: -75%;
}
#project #spot-bottom {
	bottom:-155px;
	left: -75%;
}
#project.elementsIn #spot-top {
	right: -25%;
}
#project.elementsIn #spot-bottom {
	left: -25%;
}
#project .logo {
	position: fixed;
	top:10px;
	right: 32px;
	opacity: 0;
	transition: .2s ease-in; 
}
#project.elementsIn .logo {
	opacity: 1
}
#project .wrapper {
	margin-top:180px;
	border-radius: 5px;
}
@media (min-width: 1000px) {
	#project .wrapper {
		max-width: 80vw;
	}
}
#project .close {
	position: absolute; 
	top: 4px;
	top: -150px;
	left: 32px;
	height: 20px;
	line-height:20px;
	padding:0;
	background: transparent;
	color: #666;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	z-index: 10;
	width: 20px;
	border: 1px solid #666;
	border-width: 0px 0px 1px 1px;
	transform: rotate(45deg);
	outline: none !important;
}
#project .close::after {
}
#works .wrapper.transition {
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	transition: all .5s ease-out;
}
body.openproject #works .wrapper {
	-webkit-transform: translateZ(-620px) translateX(500px) rotateX(-10deg) rotateY(-70deg) !important;
	-moz-transform: translateZ(-620px) translateX(500px) rotateX(-10deg) rotateY(-70deg) !important;
	transform: translateZ(-620px) translateX(500px) rotateX(-10deg) rotateY(-70deg) !important;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	transition: all .5s ease-out;
}
body.openproject-components header h1 {
    transform: scale(.5);
    transform-origin: top;
}
body.openproject #works img.openImg {
	opacity:0
}
body.openproject #works img {
	opacity:0.3
}
#project .copy {
	position: absolute;
	top: 0px;
	right: 10px;
	background: transparent;
	width: 50%;
	border-radius:3px;
	z-index: 2;
}
#project .copy {
	transition: .2s ease-out;
	transform: translateX(-20px);
	opacity: 0;
}
#project.elementsIn .copy {
	transition: .2s .4s linear;
	transform: translateY(0px);
	opacity: 1;
}

#project .copy .article {
	display: block;
	margin: 5px auto;
	text-align: center;
	float: none !important;
}
#project .copy .article strong {
	margin: 10px 0 5px 0;
	display: block;
}
#project .copy li {
	margin-left: 2em;
	list-style: disc;
	color: rgb(43, 43, 43);
}
#project .copy a {
	display: block;
	text-align: center;
}
#project .diapo {
	background: rgba(255,255,255,.5);
	margin: .5em 0;
	padding: .5em 1em; 
}
.diapo.off * {
	display: none;
} 
#project .diapo .dkey {
	display: block;
	float: left; margin-right: 8px;
	line-height: 16px; width: 16px;
	font-size: smaller;
	text-align: center;
	background: #ddd;
	border-radius: 50%;
	cursor: pointer;
}
#project .diapo .dkey:hover {
	background: #eee;
}
#project .diapo h2 {
	display: block;
	margin: 0;
}
#project .editlink {
	position: fixed;
	bottom: 1em; right: 2em;
	font-size: 8px;
	opacity: 0;
}
#project .editlink:hover {
	opacity: 1;
}
#project .copy .project-content {
	padding: 1em 1em 1em 2em;
	color: #444;
}
#keywords {margin: 1.5em 1em; font-style: italic }
#project .slider {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 50%;
	height: 200px;
	z-index: 1;
}
#project .slider ul,#project .slider li {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}
#project .slider a {
	display:block;
	width: 100%;
	max-width: 100%;
}
#project .slider img {
	display:block;
	width: 100%;
	max-width: 100%;
	transition: .2s ease-out;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;
	/* cursor: -webkit-zoom-in;cursor: -moz-zoom-in; */
	pointer-events: none;
}
#project.elementsIn .slider img {
	transition: .5s ease-out;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
#project li.actual {
	z-index: 3;
	animation: simgIn .2s linear;
}
@keyframes simgIn {
	0% {opacity: 0}	100% {opacity: 1}
}
#project li.anterior {
	z-index: 2;
	opacity: 0;
	transition: opacity .3s .02s ease-in;
}
#project li.inactiva {
	z-index: 1;
	opacity: 0;
}

.azul a {display: block; padding: 1.5em 2em; border-radius: 3px; transition: all .3s; text-align: center; 
	background: rgba(240,199,255,0.8); text-shadow: 1px 1px pink; font-weight: bold; color: #483D8B;}
.azul a:hover {background: rgba(235,255,190,0.8); color: DarkGreen;}
.azul.img a {padding: 0 1.5em 0 0; display: flex !important; flex-direction: row; align-items: center }
.azul.img a img {margin-right: 1.5em; width: auto; border-radius: 3px 0 0 3px;}
.azul.img.reverse a {padding: 0 0 0 1.5em; flex-direction: row-reverse;}
.azul.img.reverse a img {margin: 0 0 0 1.5em; border-radius: 0 3px 3px 0;}

/* Blog */
.noticia {border: 1px solid #f3f3f3; transition: .3s ease-out; margin:  1em; padding: 1em 1em; background: #eee; position: relative}
.noticia:hover {border-color: #fcfcfc}
.noticia h1 { margin: 0; color: #19bc58; cursor: default}
.noticia a {color: #19bc58}
.noticia a:hover {color: #1edf68}
.subtitulo {opacity: 0.5; margin: 0 0 0.5em; font-size: 90%}
.comentarios {position: absolute; bottom: .5em; right: 1em }


@font-face {
    font-family: 'pnlightitalic';
    src: url('pnlightitalic.eot');
    src: url('pnlightitalic.eot?#iefix') format('embedded-opentype'),
         url('pnlightitalic.woff') format('woff'),
         url('pnlightitalic.ttf') format('truetype'),
         url('pnlightitalic.svg#proxima_novalight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*clearfix*/
.group {
 *zoom: 1;
}
.group:before, .group:after {
	display: table;
	content: "";
	line-height: 0;
}
.group:after {
	clear: both;
}
/*/clearfix*/

/* Phone site */
#works {
	transition: .3s 0s ease-out;
}
header p {
	transition: .3s .2s ease-out;
}
header button {
	border: none;
	background: rgba(0,0,0,0.3);
	color: #fff;
	border-radius: 5px;	
	padding: .5em 1em;
	margin: 0.6em 0 0;
	outline: none !important;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-moz-tap-highlight-color: rgba(0, 0, 0, 0); 
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
	-webkit-tap-highlight-color: transparent;
}
header button::before {
	content: 'See Projects';
}
header button:active {
	outline: none !important;
	background: rgba(0,0,0,0.5);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-moz-tap-highlight-color: rgba(0, 0, 0, 0); 
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
	-webkit-tap-highlight-color: transparent;
}
.phone-projects #works {
	transition: .3s .2s ease-out;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
}
.phone-projects header p {
	-webkit-transition: .3s 0s ease-out;
	transition: .3s 0s ease-out;
	-webkit-transform: translate3d(-200%,0,0);
	transform: translate3d(-200%,0,0);
}
.phone main {display: none}
.phone header, .phone h1 img {
	transition: .10s .15s ease-out;
}
.phone-projects h1 img {
	transition: .2s .05s ease-out;
}
.phone-projects header {
	top:0%;
	margin-top:0px;
	transition: .2s .2s ease-out;
}
.phone-projects header {
	top:0%;
	margin-top:0px;
}
.phone-projects h1 img {
	transform: scale(0.5);
}
.phone-projects header button {
	position: absolute; 
	top: 0; left: 0;
	width: 100%; height: 70px;
	border-radius: 50%;
	background: none;
}
.phone-projects header button::before {
	content: '';
}
.phone-projects.openproject h1 img {
	opacity:0
}

@media (max-width: 600px) {
	header { width: 90%;height: auto;left: 0;left: 0%;margin-left: 5%;}
	header p em {display: inline}
}
@media (max-height: 500px) {
	header { top: 30px; margin-top: 0px;}
}
@media (max-height: 600px) {
	header p { margin: 0 0 20px;}
}

/** /font-icons if you are not using font icons you can just remove this part/**/
@font-face {
	font-family: 'Slide-icons';
	src: url('../fonts/Slide-icons.eot');
}
@font-face {
	font-family: 'Slide-icons';
	src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAWcAAsAAAAACSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAm4AAAQxqzjSYEZGVE0AAAN4AAAAGgAAABxmWaSOR0RFRgAAA5QAAAAdAAAAIAAzAARPUy8yAAADtAAAAEsAAABgL/bcQGNtYXAAAAQAAAAAPQAAAVLgL/LNaGVhZAAABEAAAAAuAAAANv3vdhloaGVhAAAEcAAAAB4AAAAkBBD/5GhtdHgAAASQAAAAEgAAABIFOwBxbWF4cAAABKQAAAAGAAAABgAGUABuYW1lAAAErAAAAOEAAAGw7pftcnBvc3QAAAWQAAAADAAAACAAAwAAeJx9VE1oE1EQnpfsJutmSWNMQoUoWxB/qmIKnkKJWKvXQlOwhx5E7SEo9WCEHNKAJqVbn8RLzvEgKEUPCgoiIi3YHkWw2mO9CBb8O1SzurXjvLfrJiqEhXkzwzffm/nee8tAUYAxZuQvFs5PHi6cuzR1GVgAGORsM2D3Be1ehRtBbii7ddiZjyPnvmOE+QW7YRfVNNzpSQPE0vBwexqMtNIbh7Dg0KAHUrAL9sARyF6ZKpzKZDK0nMwMHHeXIXc54S7DHU109gPAZpnF5th1xiEkiANgsFpgNDATPB3ldlHZbNiNcBTZ/JNRZBPFZ0nE6mw/GT6MUC6tiPCgihA6Vkb8sXCNI35bGxRuTcYa4vqZIWlUP1sVoCx3Yyqd1gTNIUH4RhJ6rILAxw9yN/bwghVSt56rLoCyFY6gmy8kwENJwjYrlItPVauOuDWyhqDEzlKFIuvIIrAHfTJbr2uSWpgFOVvFHVDQc5dftK751P3CeyuNp8Uf/DL3tal5rFKLuiX2MxGdL00azJHKOWLcrZF3MmtZWhThNRWwx62XSYTF/d8Rc6sR2iFyNYS4MWNSzaeJA+RWfkqjCYBO5tV71bIkjTssUVe5bykrhrXqWqnZ1m9a6rfk61emfu+Px8iIA8zf/SrDNr4s8csd+Gbzn+mXOtWK3rPHkqbeGkuZuvNIGudo9wRdvDkald0Yj9HFy89vtvsgjw7/Pxm9Kf+SEfGj86HU/frlVn6RwgP7CLVRTZDCFZt6j99edcWGSPmz5h4BLO5d73bIzVL7OdTkc8j6O5MIdiPBkzcNnZ7zDvF/2OYkWvSFI78BSE0QpgAAeJxjYGBgZACCk535hiD6XIbUOhgNAD+3BfAAAHicY2BkYGDgA2IJBhBgYmAEQlYgZgHzGAAEgQA4AAAAeJxjYGZiYJzAwMrAwejDmMbAwOAOpb8ySDK0MDAwMbAyM8CBAILJEJDmmsLg8EDqAwPjg/8PGPQYHzAoNDAwMMIVKAAhIwATaAw5AHicY2BgYGaAYBkGRgYQ8AHyGMF8FgYDIM0BhEwgiQeyHxj+/wezpCAs+RcCjFBdYMDIxoDMHZEAAP1aCcoAAAB4nGNgZGBgAGLNvbqy8fw2Xxm4mRhA4FyG1DoE/f8BEwPjAyCXgwEsDQAB0gmnAAB4nGNgZGBgfPD/AYMeEwMDwz8GIAkUQQHMAG3nA/YAAAIAAAAAAAAAAgAAUQClACAAlgAAAABQAAAGAAB4nI2PMW7CQBBFn8FGIkQpo5RbIFHZsjciEhyAMg0SFwALrYS8kuEMOQLH4BgcgGPkAKnz7UxBkYKVVvPmz5/ZWeCZMwndSZjwZjwgozQeMuPLOJXnapyJv41HTJIXOZN0LOW17+p4wBNT4yGffBin8lyMM/HNeCT+Yc2BwI6aXHFLpOEI60PY1XnYxkbJnW7Kqs9PfWzZq9vhKfQPx1L3/6l/Nc9c6kLXy1/xrnGxOa1iu6+dL0q3dHevK/PzfJH7spLxkW03qrZSQ191eqHbi03dHkNsXFWUD835BcvqQqwAAAB4nGNgZsALAAB9AAQ=) format('woff'), url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
	font-weight: normal;
	font-style: normal;
}
[data-icon]:before {
	font-family: 'Slide-icons';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/** / End of font-icons /**/

/* Loading animation */
.preload body::before {
	content: " "; 
	background: white; position: fixed; top: 0; bottom: 0; left: 0; right: 0;
}
.preload.loadedBg body::before {
	animation: fadeInBg .7s linear forwards; 
}

.preload header h1 { animation: fadeInDown .4s .3s ease-out both; }
.nav a:nth-child(1) {animation: fadeInUp .4s .7s ease-out both;}
.nav a:nth-child(3) {animation: fadeInUp .4s .8s ease-out both;}
.nav a:nth-child(2) {animation: fadeInUp .4s .9s ease-out both;}
.js header p.notinit {opacity: 0; text-shadow: 0 0 transparent !important;}
.preload.loadedBg header p {animation: fadeInDown .4s .4s ease-out both;}
.preload header p em,.loadedBg header p em {
	display: block;
	max-height: 0px;
	transition: .15s ease-out;
	overflow: hidden;
	position: relative;
}
@keyframes fadeInBg {
	from {opacity: 1} to {opacity: 0}
}
@keyframes fadeIn {
	from {opacity: 0} to {opacity: 1}
}
@keyframes fadeInDown {
	from {opacity: 0; transform: translate3d(0,-.5em,0.01em)} to {opacity: 1; transform: translate3d(0,0em,0.01em)}
}
@keyframes fadeInUp {
	from {opacity: 0; transform: translate3d(0,1em,0.01em)} to {opacity: 1; transform: translate3d(0,0em,0.01em)}
}

header img {animation: fadeInUp .5s .2s ease-out backwards;}
header p em.last-line {
	color: transparent;
	text-shadow: 0 0 transparent;
}
header p em.last-line::after {
	display: inline-block;
	color: white;
	content: "›";
	position: relative;
	transform: rotate(90deg);
	font-style: normal;
	font-family: serif;
	position: absolute;
	bottom: 0; left: 50%;
	animation: goDown 2s .1s ease-out infinite backwards;
}
@keyframes goDown {
	0%		{opacity: 0; transform: translateY(0) rotate(90deg)}
	10%		{opacity: 1;}
	50%		{opacity: 1;}
	60%		{opacity: 0; transform: translateY(20px) rotate(90deg)}
	100%	{opacity: 0;}
}

.content {background: transparent;}
.content.filling {min-height: 60dvh !important;}
.pin-spacer {user-select: none; pointer-events: none; z-index: 2 !important}
.pin-spacer .grid__img {
	user-select: auto; pointer-events: auto !important; cursor: pointer;
	box-shadow: 0 0 0 #fff0; 
	transition: box-shadow .3s .2s ease-in, filter .25s .05s;
}
.grid__img:hover {
	/* box-shadow: 0 0 10px 3px #93dde3aa; */
	transition: box-shadow .5s ease-out, filter .5s ease-in;
	filter: brightness(1.35);
}
.grid__img.openImg { transform: scale(1.4) !important; opacity: 0 !important; z-index: 1;
	transition: transform .25s ease-out, opacity 0.1s 0.15s ease-in !important;}
	.grid__img.openImg.reduceImg {transform: scale(1) !important; opacity: 1 !important;transition:0.20s ease-in !important}
	.grid__img.openImg #tooltip {opacity:0;transition: .15s}

.overlay {
	position: fixed;
	left: 0; top: 0;
	width: 100%; height: 100%;
	z-index: 10;
}
#project.overlay .wrapper {
	background: #000a;
	border: 1px solid black;
	position: relative;
	margin: 20px 10%;
	width: 80%; height: auto;
	box-sizing: border-box;
	padding: 30px;
	color: white;
	opacity: 0;
	height: auto !important;
}
@media (min-height: 500px) {
	#project.overlay .wrapper {margin-top: 80px}
}
#project.overlay {overflow: auto;}
#project.overlay.open {transition: .1s ease-out;  overscroll-behavior: contain; padding-bottom: 30px !important}
#project.overlay.elementsIn {background: #0006; transition: background .3s ease-out}
#project.overlay.elementsIn .wrapper {opacity: 1; transition: .2s ease-out;}
#project.overlay .close {top: -50px !important;}

.overlay #project .copy .project-content, .overlay #project .copy li {color: white;}

#tooltip {
	background:#0006; background: linear-gradient(#0008, #0006, transparent);
	text-transform: uppercase; font-size: 12px; }
	.grid__img #tooltip {padding:2px 5px 10px;}

#project.overlay .copy {position: static !important; box-sizing: content-box; padding-left: 50%;}
#project.overlay .copy .project-content,#project.overlay .copy li {color: white}
#project.overlay .copy .project-content h1, #project.overlay .copy .project-content h2,
	#project.overlay .copy .project-content h3 {margin-top: 0}
#project .copy .project-content { padding-top: 0 !important; }
#project.overlay .azul a {background: #03A9F4; color: #004a76; text-shadow: 1px 1px #4FC3F7}
#project.overlay .azul a:hover {background: #4FC3F7; text-decoration: none}
#project.overlay .loading{width:30px; height:30px;border-radius:50%;
	border:4px dotted #999; margin: 5px auto; animation: loadSpin 4s linear infinite}
	@keyframes loadSpin { to {  transform: rotate(360deg); }}


/* Mobile corrections */
@media (max-aspect-ratio: 9 / 12) {
    .grid:not(.grid--zoomed) {
        aspect-ratio: 9 / 12 !important; 
		grid-template-columns: repeat(3, 1fr);
   		grid-template-rows: repeat(7, 1fr);
    }
}

@media (max-width: 600px) {/* Narrow screen mode */
	#project.overlay .slider {position: static; width: 100%; height: auto;}
	#project.overlay .slider ul{ position: relative; padding-bottom: 66%; width: 100%; overflow: hidden;}
	#project.overlay .slider li{ width: 100%; height: 100%; position: absolute; top:0; left:0}
	#project.overlay .slider img{ width: 100%; height: 100%; object-fit: contain;}
	/* #project.overlay .slider ul, #project.overlay .slider li {position: static; opacity: 1 !important} */
	#project.overlay .wrapper {padding: 10px}
	#project.overlay .copy {padding: 0;  width: auto;}
	#project.overlay .project-content {padding: 0;}
}
/* Slider vertical interactive dots */
.indicadores {position: absolute; left: -20px; top: 0px; z-index: 999; color: #666; width: 20px}
.indicadores b:before {content: "•";}
.indicadores b {position: relative; width: 20px; text-align: center; display: block; line-height: 20px; transition: .2s}
.indicadores b:hover {transform: scale(1.3);}
.indicadores b.actual{color: white;}
#project.overlay .close {left: -10px; border-radius: 0; transition: .2s}
#project.overlay .close:hover {border-color: white}

/* Checkboard project text */
.checkerboard {background: #0001; display: flex; flex-flow: row wrap; padding: 5px; margin-bottom: 5px}
.checkerboard figure, .checkerboard .text {box-sizing: border-box; padding: 5px; margin: 0}
.checkerboard figure {width: 49%;} .checkerboard figure img {width: 100%; height: auto; display:block}
.checkerboard .text:nth-child(2) {width: 49%; margin: 0 0 0 1%}
.checkerboard.right {flex-flow: row-reverse wrap;}
.checkerboard.right .text:nth-child(2) { margin: 0 1% 0 0}