html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
body{
	font-family: "Courier New", "Courier New", monospace;
	/* font-family: 'Libre Baskerville', serif;
	/* font-family: 'Cormorant Garamond', serif;
	font-family: 'Homemade Apple', cursive;
	font-family: 'Rock Salt', cursive;
	font-family: 'Reenie Beanie', cursive;
	font-family: 'Goudy Bookletter 1911', serif;
	font-family: 'Gilda Display', serif;
	font-family: 'Give You Glory', cursive;
	font-family: 'Waiting for the Sunrise', cursive;
	font-family: 'La Belle Aurore', cursive;
	font-family: 'Dawning of a New Day', cursive; */

	font-size: 11pt;
	font-weight: 400;
	text-align: center;
	background-color: #fCfCfC;
	background-color: #FFFFFF;

	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;

	margin: 0;
	padding: 0;
	width: 100%;
	
	border-top: 1px solid transparent;
	text-shadow: 1px 1px 4px #EEE;
}
body small {
	font-size: 9.5pt;
}
body big {
	font-size: 12.5pt;
}
body * {
	font-size: inherit;
}

html.home body{
	  display: flex;
    flex-direction: column;
    justify-content: center;
}

header h1{
	/* font-family: 'Libre Baskerville', serif; */
	/*	font-family: 'Gilda Display', serif;*/
	font-family: "Courier New", "Courier New", monospace;
	/*	font-size: 28pt;*/
	font-weight: 400;
	color: #434648;
	color: #212223;
	margin-top: 40pt;
	margin-bottom: 6px;
}
header h1{
	position: relative;
	/* z-index: 9999; */
	margin: 36px 0;
}




header h2, 
.main h2{
	font-family: "Courier New", "Courier New", monospace;
	/*	font-family: 'Libre Baskerville', serif;*/
	/* font-family: 'Gilda Display', serif; */
	/* font-family: 'Cormorant Garamond', serif;
	font-size: 22pt; */
	/*	font-size: 16pt;*/
	font-weight: 400;
	color: #434648;
	color: #212223;
	margin-top: 0;
}

header h2{
	position: relative;
	/* z-index: 9999; */
}
.main h2 {
	/*	font-size: 14pt;*/
    font-style: italic;
}

@media all and (max-width: 599px){
	header h1{
		/*		font-size: 22pt;*/
	}

	header h2{
		/*		font-size: 14pt;*/
	}
}


h2 small{
	font-style: italic;
}
h3{
	font-family: "Courier New", "Courier New", monospace;
	/*	font-family: 'Rock Salt', cursive;*/
	/*	margin-top: 36px;*/
	/*	font-size: 12pt;*/
	font-weight: 400;
	/*	font-size: 10pt;*/
}
a{
	color: #333;
	text-decoration: none;
	outline: 0;
}
a:hover{
	color: #555;
}
div.email{
	padding: 10px 0 10px 0;
	font-family: "Courier New", "Courier New", monospace;
	/*	font-family: 'La Belle Aurore', cursive;*/
	/*	font-size: 15pt;*/
	text-align: left;
	margin: 36px 12px 0 12px;
}
div.donate{
	padding: 0 0 40px 0;
	opacity: 0.6;
	font-variant: small-caps;
	/*	font-size: 12pt;*/
}

.img.zoom-gallery a:hover {
     /*/ cursor: auto; /*/ 
}
.img.zoom-gallery a span:hover {
    opacity: 1 !important;
    cursor: pointer;
}






html.home div.email a {
	display: block;
}
html:not(.home) div.email {
    margin: 36px 0 0 0;
}


html:not(.home) header .menu {
    margin-top: 36px;
}

html:not(.home) header .menu a {
    display: block;
    width: fit-content;
    margin: 8px 0;
}
html:not(.home) header .menu a.active {
    background: #FF9800;
    color: black;
    padding-left: 8px;
    padding-right: 8px;
}
html:not(.home) header .menu .submenu .items a {
    padding-left: 8px;
    padding-right: 8px;
}
html:not(.home) header .menu .submenu .items a.active,
html:not(.home) header .menu .submenu .items a:hover {
		background: transparent;
    color: black;
    text-decoration: underline;
}


html.home .main .menu{
	font-family: "Courier New", "Courier New", monospace;
	/*	font-family: 'Rock Salt', cursive; */
	/*display:block; 
	position:absolute; 
	bottom: 3%; 
	left: 50%; 
	margin-left: -200px;*/
	/*/margin-left: -240px; donate /*/ 
	color: white; 
	/*	font-size: 14pt; */
	color: black;
}
html.home .main .menu a{
	display: inline-block;
	/*	font-size: 12pt;*/
}
html.home .main .menu a.biography,
html.home .main .menu a.statement,
html.home .main .menu a.cv,
html.home .main .menu a.donate{
	/*	opacity: 0.4;*/
	margin-right: 20px;
}
html.home .main .menu a.works{
    background: #FF9800;
    color: black;
    padding-left: 8px;
    padding-right: 8px;
}
html.home .img img{
		max-width: 100%;
		max-height: 52vh;
		margin: 1vh auto;
}




html.portfolio body {
		display: flex;
}
html.portfolio body > header {
    flex-basis: 320px;
    padding: 36px;
    text-align: left;
    box-sizing: border-box;
}
html.portfolio body > .main {
		flex-grow: 2;
		padding-top: 36px;
		/* padding-right: 180px;*/
		box-sizing: border-box;
}
html.portfolio body > .statement {
		flex-basis: 320px;
		flex-grow: 1;
		padding: 60px 40px 0 20px;
		box-sizing: border-box;
		text-align: left;
		margin-bottom: -100%; /* Para sticky */
}
html.portfolio body > header .inner {
		position: fixed;
		width: 220px;
}
html.portfolio body > .main .inner {
		padding-bottom: 30px;
}
html.portfolio body > .statement .inner {
		position: sticky;
		top: 70px;
		padding-bottom: 30px;
		font-size: 10pt;
}
html.portfolio body > .statement .titulo {
		font-size: 11pt;
}

html.portfolio .img {
    width: 98%;
    margin: auto;
    max-width: 820px;
}
html.portfolio .img img {
    width: 100%;
}
html.portfolio .menu a {
    display: block;
    width: fit-content;
    margin: 8px 0;
}




html.biography body {
		display: flex;
}
html.biography header {
    flex-basis: 320px;
    padding: 36px;
    text-align: left;
    box-sizing: border-box;
}
html.biography .main {
    flex-grow: 2;
    padding-top: 58px;
    padding-left: 34px;
    padding-right: 180px;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.6em;
}

html.biography .img {
    width: 80%;
    margin: auto;
    max-width: 720px;
}
html.biography .img img {
    width: 100%;
}
html.biography .menu a {
    display: block;
    width: fit-content;
    margin: 8px 0;
}




html.statement body {
		display: flex;
}
html.statement header {
    flex-basis: 320px;
    padding: 36px;
    text-align: left;
    box-sizing: border-box;
}
html.statement .main {
    flex-grow: 2;
    padding-top: 58px;
    padding-left: 34px;
    padding-right: 180px;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.6em;
}

html.statement .img {
    width: 80%;
    margin: auto;
    max-width: 720px;
}
html.statement .img img {
    width: 100%;
}
html.statement .menu a {
    display: block;
    width: fit-content;
    margin: 8px 0;
}







/*
html.biography body, 
html.donate body{
	background: url(../img/fdos/bio-left.jpg), url(../img/fdos/bio-right-top.jpg), url(../img/fdos/bio-right-bottom.jpg);
    background-size: auto 100%, auto 64%, auto 36%;
    background-position: left center, right top, right bottom;
    background-repeat: no-repeat;
}

html.statement body{
    background-image: url(../img/fdos/bio-left.jpg), url(../img/fdos/statement-left.jpg), url(../img/fdos/statement-right.jpg);
    background-size: auto 81%, auto 50%, auto 106%;
    background-position: -7% -248%, left bottom, right bottom;
    background-repeat: no-repeat;
}
html:not(.ios) body{
    background-attachment: fixed, fixed, fixed;
}


html.biography header, 
html.donate header, 
html.home header {
	width: 100%;
	max-width: 540px;
	margin: auto;
	margin-bottom: -40px;
	position: relative;
	z-index: 997;
}
html.biography header img,
html.donate header img, 
html.home header img {
	width: 96%;
}


html.biography header h1 {
    text-align: right;
    max-width: 400px;
    margin: 6vh auto 2vh auto;
    font-style: italic;
}
html.statement header h1 {
	text-align: left;
    max-width: 400px;
    margin: 6vh auto 2vh auto;
}
html.biography header h1 small, 
html.statement header h1 small {
	font-style: italic;
	display: block;
	text-align: right;
}
html.biography .main, 
html.donate .main, 
html.statement .main {
	position: relative;
	max-width: 600px;
	margin: 4vh auto;
	line-height: 1.6em;
}

html.donate .donate {
	display: none;
}


html.biography .main .menu, 
html.donate .main .menu, 
html.statement .main .menu{
	font-family: "Courier New", "Courier New", monospace;
	display:block;
	color: black;
	margin-top: 7vh;
}
html.biography .main .menu a, 
html.statement .main .menu a{
	display: inline-block;
}

html .main .menu a:not(.works){
	margin-right: 8px;
}
html.biography .main .menu a:not(.biography), 
html.statement .main .menu a:not(.statement), 
html.cv .main .menu a:not(.cv), 
html.donate .main .menu a:not(.donate) {
	opacity: 0.8;
}

*/


html.home .main .menu .home {
	display: none;
}
html.home div.email{
    margin: 20px auto;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
html.home div.email small{
	  display: inline-block;
}




















/* NUEVO */
.main .menu a {
	font-family: "Courier New", "Courier New", monospace;
	/*	font-family: 'Gilda Display', serif !important;*/
	/*	font-size: 18pt !important;*/
	/*	font-variant: small-caps !important;*/
	/* vertical-align: top; */
}
.main .menu.active div.submenu {
	position: relative;
}
.main .menu:not(.active) div.submenu {
	display: inline-block;
    /* vertical-align: top; */
    text-align: left;
}
.main .menu div.submenu a {
	display: block;
}
.main .menu div.submenu div.items_hidden {
	position: absolute;
	display: none;
	background: #FFF;
	min-width: 200px;
	padding-top: 2px;
}
.main .menu div.submenu div.items_hidden a {
	/*	font-size: 16pt !important;*/
}
.main .menu div.submenu:hover div.items_hidden {
	display: block;
}

.main .menu.active div.submenu div.items_hidden {
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	background: transparent !important;
}
.main .menu.active div.submenu div.items_hidden a {
	display: inline-block !important;
	padding: 0 6px !important;
	padding-top: 14vh !important;
	background: transparent !important;
}



	/* Menu Responsive */

	.menu-trigger {
		/*/ text-align:right; 
		padding:6px 20px 0 0;/*/ 
		text-align: right;
	    padding: 3vw 6vw 0 0;
	    position: fixed;
	    right: 0;
	    top: 6px;
	    z-index: 999;
	}
	.menu-trigger div {
		display:inline-block; 
		width:30px;
		width:8vw;
		max-width: 40px;
	    cursor: pointer;
	}
	.menu-trigger div hr {
		border:2px solid #444; 
		border:2px solid #2229; 
		box-shadow:1px 1px 6px #0003; 
		margin:4px 0;
	}
	.menu-trigger.active div hr {
		border:2px solid #FFF;
	}


	html .main .menu.active{
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		margin: 0 !important;
		padding: 10vh 6vw !important;
		background: #333 !important;
		background-color: #333333c9 !important;
		z-index: 998;
	}
	html .main .menu.active a{
		display: block !important;
		margin: 0 !important;
		padding: 10vh 0 !important;
		/*		font-size: 22pt !important;*/
		background-color: white !important;
		opacity: 1 !important;
	}
	html .main .menu.active a.biography, 
	html .main .menu.active a.statement{
		 /*/ padding: 4vh 0 !important; /*/ 
	}

	html.statement .main .menu.active a.statement{
		display: none !important;
	}
	html.biography .main .menu.active a.biography{
		display: none !important;
	}
	/* Menu Responsive */






html.portfolio body > .trigger {
	display: none;
}


@media all and (max-width: 1000px) and (min-width: 599px){

	html.portfolio body > header { flex-basis: initial; width: 280px; width: 26vw; flex-grow: 1; padding-right: 10px; font-size: 10pt; }
	html.portfolio body > .main { flex-grow: 2; width: 70vw; font-size: 10pt; }
	html.portfolio body > .statement { flex-basis: initial; width: 0px; flex-grow: 1; padding: 0; overflow: hidden; font-size: 10pt; }
	html.portfolio body > .statement .titulo { font-size: 11pt; }

	html.portfolio body > .main,
	html.portfolio body > .statement { transition: width 600ms; }

	html.portfolio body > .main.active { width: 40vw; }
	html.portfolio body > .statement.active { width: 24vw; }
	
	html.portfolio body > .statement .inner { width: 22vw; padding: 0 16px; }

	html.portfolio body > .trigger { display: block; position:absolute; top: 20px; right: 20px; z-index:9; }
	html.portfolio body > .trigger span { font-size: 8pt; vertical-align:middle; }
	html.portfolio body > .trigger span.mas,
	html.portfolio body > .trigger span.menos { font-size: 12pt; }
	html.portfolio body > .trigger.active span.mas { display:none; }
	html.portfolio body > .trigger:not(.active) span.menos { display:none; }

	html.portfolio body > .statement .inner {
			font-size: 9pt;
	}
	html.portfolio body > .statement .titulo {
			font-size: 10pt;
	}

}


@media all and (max-width: 600px){

	html.biography body,
	html.statement body,
	html.portfolio body {
		flex-direction: column;
	}
	html.biography body > header .inner,
	html.statement body > header .inner,
	html.portfolio body > header .inner {
		position: relative;
		width: auto;
	}

	html .main .menu.active a{
		/*		font-size: 8vw !important;*/
	}

	header h1 {
      font-size: 13pt;
      margin: 0;
      padding: 0;
  }
  html:not(.home) header .menu {
	    margin-top: 22px;
	}
	html:not(.home) div.email {
	    margin: 16px 0 0 0;
	}

	html body > .main {
			margin-top: 0;
			padding-top: 0;
	}

	html.biography body{
			/*		background-position: -28% center, 114% top, right bottom;*/
	}
	html.statement body{
		/*background-image: url(../img/fdos/statement-left.jpg), url(../img/fdos/statement-right.jpg);
		background-size: auto 50%, auto 106%;
		background-position: left bottom, right 14vh;*/
	}
	html.biography body header, 
	html.statement body header{
		width: 90%;
		margin: auto;
	}
	html.statement header h1 small{
		/*		font-size: 22pt;*/
	}
	html.biography header h1 {
	/*		text-align: center;*/
	}
	html.biography body .main{
			padding: 0 40px;
	}

	html.home .main .menu {
		position: relative;
		margin: auto;
		left: auto;
		width: 100%;
		text-align: left;
	}
	html.home .main .menu a.biography, 
	html.home .main .menu a.statement, 
	html.home .main .menu a.cv, 
	html.home .main .menu a.donate {
		display: block;
		margin-top: 4px;
	}


	html.home .main > span {
		display: block;
    margin: auto;
    width: 50%;
	}
	html.home .main h3 {
		text-align: left;
	}
	html.home .main .menu a {
		font-size: 12pt;
	}
	html.home .main .menu a.works {
		display: inline-block;
    margin-top: 6px;
    margin-top: 12px;
	}
	.main .menu div.submenu div.items_hidden {
		position: relative;
		min-width: initial;
	}
	.main .menu div.submenu a {
		margin-top: 4px;
	}

}




/*/ EFECTO SWIPE /*/

.swipe.active {
	position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*/filter: invert(100%);/*/
    /*/display: none;/*/
    background-color: white;
}
.swipe.active div {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../img/swipe.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    background-size: 160px;
    /*/filter: invert(100%);/*/
    /*/display: none;/*/
}

.animacion div {
       /*position: absolute;*/
  opacity: 0.0;

  animation-name: parpadeo;
  animation-duration: 600ms;
  animation-timing-function: linear;
  /*/ animation-iteration-count: infinite;/*/ 

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: linear;
  /*/ -webkit-animation-iteration-count: infinite;/*/ 
}
@-moz-keyframes parpadeo{  
  0% { opacity: 0.0; }
  50% { opacity: 0.4; }
  100% { opacity: 0.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 0.0; }
  50% { opacity: 0.4; }
  100% { opacity: 0.0; }
}

@keyframes parpadeo {  
  0% { opacity: 0.0; }
  50% { opacity: 0.4; }
  100% { opacity: 0.0; }
}

.animacion {
       /*position: absolute;*/
  opacity: 1.0;

  animation-name: apagado;
  animation-duration: 1200ms;
  animation-timing-function: linear;
  /*/ animation-iteration-count: infinite;/*/ 

  -webkit-animation-name: apagado;
  -webkit-animation-duration: 1200ms;
  -webkit-animation-timing-function: linear;
  /*/ -webkit-animation-iteration-count: infinite;/*/ 
}
@-moz-keyframes apagado{  
  0% { opacity: 1.0; }
  50% { opacity: 1.0; }
  100% { opacity: 0.0; }
}

@-webkit-keyframes apagado {  
  0% { opacity: 1.0; }
  50% { opacity: 1.0; }
  100% { opacity: 0.0; }
}

@keyframes apagado {  
  0% { opacity: 1.0; }
  50% { opacity: 1.0; }
  100% { opacity: 0.0; }
}


/*/ 
@-moz-keyframes parpadeo{  
  0% { opacity: 0.4; }
  50% { opacity: 0.0; }
  100% { opacity: 0.4; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 0.4; }
  50% { opacity: 0.0; }
  100% { opacity: 0.4; }
}

@keyframes parpadeo {  
  0% { opacity: 0.4; }
  50% { opacity: 0.0; }
  100% { opacity: 0.4; }
}
/*/
/*/ EFECTO SWIPE /*/





/*/ Para PHOTOSWIPE /*/




		figure img{
			max-width: 100px;
		}

		.pswp__titulo {
			position: absolute; 
			left: 0; 
			right: 0; 
			top: 0; 
			height: 44px; 
			font-size: 13px; 
			line-height: 44px; 
			/*/ color: #FFF; /*/ 
			opacity: 0.75; 
			padding: 0 10px; 
		}
		@media all and (max-width: 599px){
			.pswp__titulo{
				display: none;
			}
		}

		.pswp__caption h3,
		.pswp__caption p{
			margin: 3px;
			padding: 3px;
		}

		.pswp__button--arrow--left,
		.pswp__button--arrow--right {
		    top: auto;
		    margin-top: auto;
		    bottom: 0;
		    width: 40px;
		}
		.pswp__button--arrow--left {
			left: auto;
		    right: 64px;
		}
		.pswp__button--arrow--right {
		    right: 20px;
		}

		.pswp__top-bar, 
		.pswp__caption {
			background: transparent !important;
		}
		.pswp__ui--idle .pswp__top-bar,
		.pswp__ui--idle .pswp__counter,
		.pswp__ui--idle .pswp__button--arrow--left, 
		.pswp__ui--idle .pswp__button--arrow--right {
		    opacity: 0.1 !important;
		}
		.pswp__ui {
		    -webkit-font-smoothing: inherit;
		}