@charset "UTF-8";
/* CSS Document */

html, body{
	height:100%;
	width:100%;
	font-family:"Times New Roman", Times, serif;
	font-family:"Helvetica Neue", Times, serif;
	font-size:30px;
	line-height:35px;
	letter-spacing:0.5px;
	margin:0px;
	padding:0px;
}

html {
	--scrollbarBG: #fff;
	--thumbBG: #38FF00;
  }
  body::-webkit-scrollbar {
	width: 16px;
  }
  body {
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
  }
  body::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
  }
  body::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG) ;
	border-radius: 2px;
	border: 3px solid var(--scrollbarBG);
  }

a{
	cursor:pointer;
	color:#000;
	text-decoration:none;
}
a:focus{
	outline: 0;	
}
a:hover{
	color: #38FF00;
}

p {
	font-size: 22px;
}

.color, .color a{
	color:#000;
}

.collapsible {
	cursor: pointer;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
}		

.active, .collapsible:hover {
	color: #38FF00;
}

.content {
	padding: 5px 18px;
	display: none;
	overflow: hidden;
	color: #38FF00;
	
}

#editor{
	position:fixed;	
	width:100%;
	z-index:10000;
	text-align:center;
	padding-top:20px;
}
#editor a{
	font-size:16px;
	padding:10px 15px;
	background:rgba(255,255,0,0.5);
	border:2px solid #000;
	margin:0px auto;
	text-decoration: none;
}
#marion{
	position:fixed;	
	z-index:999;
	margin: 25px 0px -1px;
	text-align:left;
	padding-left:250px;
}

#nav{
	position:fixed;
	top:0px;
	left:0px;
	z-index:1000;
	margin: 25px 40px;
	line-height:32px;
}
#nav.accordion{
	display: flex;
    height: calc(100vh - 50px);
    flex-direction: column;
    justify-content: space-between;
}
#nav.accordion #burger{
	display: none;
}
@media (max-width: 429px){
	#nav.accordion{
		height: fit-content;
		gap: 20px;
	}
}
.muestras{
	position: absolute;
	top: 35px;
	width: max-content;
	height: 100%;
    z-index: 2;
    margin: 10px 15px;
	margin-right: 0;
    line-height: 30px;
    font-size: 22px;
    font-weight: 400;
    text-align: right;
	display: flex;
	align-items:flex-end;
	color: #000;
}

#nav ul{
	margin:0px;
	padding:0px;
	list-style:none;
}
#nav li{
	padding-bottom:3px;
}
#nav li.on{
	line-height:32px;
}
#nav li.space{
	margin-top:40px;	
}
#nav li.on > a span{
	display:inline-block;
	margin-bottom:-3px;
	/*border-bottom:3px solid #000;*/
	text-decoration: none;
}

.navi{
	display:inline;
}
#top{
	
	position:fixed;
	z-index:1000;
	padding:25px 40px;
	right:0px;
	text-align:right;
}
#top ul{
	list-style:none;
	margin:0px;
	padding:0px;
}

#top li{
	line-height:32px;
	display:inline-block;
	padding:0px;
	margin:0px;
	font-size: 26px;
}
#top li.on{
	margin-bottom:-3px;
	border-bottom:3px solid #000;
	/*
	-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
*/
}
#projects{
	z-index:100;
	width:100%;
	height:100%;

	padding:0px 0px;
}
.line{
	position:absolute;
	height:1px;
    background-color:rgba(0,0,0,0.2);
}

.row>* {padding-right: calc(var(--bs-gutter-x)/ 5);
    padding-left: calc(var(--bs-gutter-x)/ 5);}

#contents{
	
	position:absolute;
	width:100%;
	height:100%;
	background:rgba(0,0,255,0.3);
	background:rgba(255,255,255,1);
	z-index:200;
}
#contents .inner{
	display:block;
	position:absolute;
	margin:25px 50px 0px 410px;
	top:0px;
	width:70vw;
	font-size:20px;
	line-height:25px;
	min-height:100%;
	padding:0px 0px 105px 0px;
}

#contents .inner.bio{
	width:70vw;
	margin:25px 50px 0px 410; 
}
#contents .inner h1{
	font-size:30px;
	line-height:35px;
	letter-spacing:0.5px;
	margin:25px 0px 0px;
	padding:0px;
	font-weight:normal;
}
#contents .inner h2, #contents .inner h3{
	font-size:30px;
	line-height:35px;
	letter-spacing:0.5px;
	margin:0px;
	padding:0px;
	font-weight:normal;
	margin-bottom:0px;
}
#contents .inner h3, #contents .inner h3 p {
	font-size: 24px !important;
	line-height: 30px !important;
	font-family: inherit !important;
}
#contents .inner table{
	margin-bottom:25px;
}
#contents sup{
	font-size:12px;
}
#contents u{
	text-decoration:none;
	white-space: nowrap;
}
#contents .br2{
	margin-top:12px;
}

#contents span{
	display:block;
	font-size:12px;
	line-height:15px !important;
	margin-left:20px;
	margin-bottom:-20px;
	margin-top:-23px;
}

#contents .inner p{
	margin:0px 0 50px 0px;
	padding:0px;
	
}
#contents .inner h3 p, #contents .inner h3 span{
	font-size: 30px;
    line-height: 35px;
    letter-spacing: 0.5px;
    margin: 0px;
    padding: 0px;
    font-weight: normal;
    margin-bottom: 0px;
}
#contents .inner p b{
	display:block;
	font-weight:normal;
	text-align: justify;
	margin:0px 0px 0px 50px;
}

#contents table{
	width:100%;
	table-layout:fixed;
	border-collapse:separate;
	border-spacing:0px;
}
#contents table td{
	vertical-align:top;
}
#contents table td:first-child{
	width:20%;
	padding-right:10px;
}
#contents a{
	/*border-bottom:1px solid #000;*/
	color: #38FF00;
}
#contents .inner a{
	color: #000000;
}
#contents .inner a:hover{
	color: #38FF00;
}
#contents .nospace{
	padding:0px !important;
	margin:0px!important;
}
/* iamges */
.images{
	width:100%;
}
.images .img{
	width:150px;
	height:150px;
	float:left;
	margin:0px 20px 20px 0px;

}
.images .imgx{
	margin:0px 20px 0px 0px;
	display:inline-block;
	
}
.images .imgx img{
	display:block;
	vertical-align:top;
	max-width:100%;
}
.images .img.large{
	width:100%;
	height:auto;
	margin:0px 00px 20px 0px;
	padding-right:20px;
}
.images .img.large img{
	width:100%;	
}
.images .img.small.portrait img{
    position: absolute;
	/* center images
	left: -9999px;
    right: -9999px;
    margin: auto;
	*/
	height:100%;
}
.images .img.small.landscape{
	display: table-cell;
	vertical-align: middle;
}
.images .img.small.landscape img{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	
}
.images .play{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

/* idea */
#overview {
	width:8000px;
	height:4000px;
}
#overview2 {
	width:8000px;
	height:3000px;
}
#overview3 {
	width:100%;
	height:1000px;
}
#overview.edit {
	background:rgba(255,255,0,0.5);	
}
#overview.list {
	padding:63px 48px 48px 240px;
	width:100%;
	height:auto;	
}
.item{
	position:absolute;
	z-index:1000;
	cursor:pointer;
}
	
.item.list{
	position:relative;
	float:left;	
	width:200px;
	height:200px;
	margin:10px 10px 40px 10px;
}
.item.list .in{
	width:100%;
	height:100%;
}

.item .title{
	text-align:center;
	margin-top:10px;
	font-size:20px;
	line-height:25px;	
	height:40px;
	overflow:hidden;
}
.item.on .title{
	border-bottom:3px solid #000;
}
.item .img{
	width:100%;
	height:100%;
	overflow:hidden;
	background:rgba(0,0,0,0.1);
}
.item .img img{
	position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
	height:100%;
}

/* layout */
div{
	position:relative;
	display:block;
}

#lang{
	position:fixed;
	lefT:0px;
	bottom:0px;
	padding:25px 40px;
	z-index:5000;
}

.nextitle{
	position:absolute;
	bottom:0px;
	height:40px;
	overflow:hidden;
	padding-top:15px;
	font-style:italic;
}
.projecthead{
	margin-bottom:20px;
	/*
	padding-top:42px;
	position:fixed;
	z-index:100;
	width:680px;
	*/
}
.projectcontent{
	/*
	padding-top:180px;
	z-index:50;
	*/
}

.fotos  { position: absolute; display: flex;}
.fotos.available  { position: relative;
    display: flex;
    width: auto;}
.fotos  img { max-width: 400px;     max-height: 500px;}

.fotos_estudio  { position: absolute;}
.fotos_estudio  img { max-width: 350px;     max-height: 350px;}

.foto1  {  top: 0; left: 3%;}
.foto1 img { width: 500px;}
.foto2  { position: absolute; top: 10%; left: 13%;}
.foto2 img { width: 500px;}
.foto3  { position: absolute; top: 20%; left: 23%;}
.foto3 img { width: 500px;}
.foto4  { position: absolute; top: 30%; left: 33%;}
.foto4 img { width: 500px;}
.foto5  { position: absolute; top: 40%; left: 43%;}
.foto5 img { width: 500px;}
.foto6  { position: absolute; top: 50%; left: 53%;}
.foto6 img { width: 500px;}
.foto7  { position: absolute; top: 60%; left: 63%;}
.foto7 img { width: 500px;}

.subrayado {border-bottom: 3px solid;}

.top10 { margin-top: 10px; display: block;}
.top20 { margin-top: 20px;}
.top30 { margin-top: 30px;}
.top40 { margin-top: 40px;}
.top50 { margin-top: 50px;}


.fancybox-button {
    background: rgb(255 255 255 / 60%);
}

.fancybox-button, .fancybox-button:link, .fancybox-button:visited {
    color: #000;
}
#individual .annie-about{padding-top: 22px;}
.indi { padding: 15px 0 0 10px;}

.dscrp { max-width: 70%;}   
.fancybox-button:hover {color: #000;
    background: none;}

    .fancybox-button  {background: none !important;}

	.fancybox-bg {    background: #f9f9f9;}
.fancybox-button {
    background: rgb(255 255 255 / 60%);}


.fancybox-is-open .fancybox-bg { opacity: 1;}
.fancybox-navigation { height: 100vh;}
.fancybox-show-caption .fancybox-caption { background: transparent; text-align: left; }
.fancybox-caption__body { color: black; margin-left: 14.5vw;}

.parrafochico p { font-size: 14px; line-height: 18px;}



@media (max-width: 429px) { 
#contents .inner {
    display: block;
    position: relative;
    margin: 25px 20px 0px 40px;
    top: 0px;
    width: 80vw;
    font-size: 20px;
    line-height: 25px;
    min-height: 100%;
    padding: 0px 0px 105px 0px;
}
.col-1 {
    flex: 0 0 auto;
    width: 7.85%;
}
#contents {/*  overflow-x: hidden;*/}
.obras #contents {  overflow-x: visible;}
.obras #contents .inner {overflow-y: hidden;}
#contents .inner h2, #contents .inner h3 {
    font-size: 24px;}
#nav { position: relative;}
.contacto h3 {font-size: 18px !important;}
.home  #nav { position: fixed;}
#contents .inner.bio {
    width: 80vw;}


}

.fotos:hover a h2.muestras{
	visibility: visible !important;
}
.video-fancybox:hover{
	color: #000 !important;
}
.row {
	display: flex;
	flex-direction: column;
	gap: 30px; /* Espacio entre cada obra, ajustable */
  }