@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1s; }

@font-face {
    font-family: 'verlag-book';
    src: url('../fuentes/Verlag-Book.otf');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'guggen';
    src: url('../fuentes/GuggenSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'verlag-light';
    src: url('../fuentes/Verlag-Light.ttf');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'moma';
    src: url('../fuentes/moma-sans__light.woff2');
    font-weight: 400;
    font-style: normal;

}
*{-o-box-sizing:border-box;box-sizing:border-box}
  
  *:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
:root{
	--bck-color:hsl(39 40% 95% / 1); /*#eeecde*/
	--link-color:#BEC9C7;
	--link-color2:#6c95ab;
	--panoAltura:50vh;
}
body, html {
	margin: 0px; padding: 0px;

}
body {
    background: var(--bck-color);
    color: #333;
   /* font-family: Arial, Helvetica, sans-serif;*/
	font-family: guggen, Helvetica, sans-serif;
	/*font-family: moma, Helvetica, sans-serif;*/
    font-size: 0.8em;
    letter-spacing:0.02em;
	text-align:center;
    line-height: 1.2em ;
	overflow-x:hidden;
	overflow-y:scroll;
	max-width:100%;

}

::selection {background-color: rgba(217, 217, 217, 0.4); color:#444444;}	
::-moz-selection { background-color: rgba(217, 217, 217,0.4); color:#444444;}	

p{ margin:0; padding:0;}

br { clear: both;}
.curator-float br{ clear: none;}
img { padding: 0px; border: 0px currentColor;}
:focus { outline: 0px;}
.clear { clear: both;}
a{text-decoration:none; color:inherit;}
.hide, .oculto{display:none}
.pagina.oculto{display:none;}
.pagina.pano.oculto {display: inherit; height: auto;}


.visible{ display:block; opacity:1;}
.sep{clear:both; height:20px;}
.sep30{clear:both; height:30px;}
a.disabled { cursor: default !important; pointer-events: none; }
.disabled{cursor: default !important; pointer-events: none;}

#cover{
	position:fixed;
	width:100%;
	height: 100vh;
	z-index:1000; background-color:var(--bck-color);
	opacity: 1;
}	
#cover.ready{
	opacity: 0;
	transition: opacity 2s cubic-bezier(.33,0,.2,1);
}	

/**********************    header      ******************/

#header{
	display:block;
	z-index:100;
	position: absolute;
	pointer-events: none;
	width:100%;
	 color:#222;
	text-align: left; 
	cursor:default;
	padding:30px 5%;
	user-select: none;
	/*margin-top:20px;*/
	opacity:0;
	transition: opacity 3s cubic-bezier(.33,0,.2,1);

 }

 .logo-a{
	margin-top:-10px;	
	margin: 0;
	display:inline-block;
	font-size: 24px;
	 opacity: 0.8;
	 pointer-events: auto;
	text-transform: lowercase;
	letter-spacing: -1px;	
	font-family:Quicksand, Arial, Helvetica, sans-serif;
	font-weight:600;
	 transition: opacity 0.3s;
  }

#header.ready{ opacity:1; }
#header.iniciado.semitrans .logo-a{ opacity:0.1;  }
#header.iniciado.semitrans .logo-a:hover{ opacity:0.3;  }
#header.iniciado.semitrans #ludica{ opacity:0.1;  }


/*#header.iniciado.semitrans:hover{ opacity: 0.6; transition: opacity 0.5s} */

.logo-a span{position:relative; bottom:10px; }
#logo-img, #mlogo-img{
	 display:inline-block;
	 position:relative;
	 width:40px;
	 height:40px;
	 background:url(../img/logo1.png);
	 background-position:center;
	 background-size:80%;
	 background-repeat:no-repeat;
	 margin:0 ;
	 transition: transform 1s cubic-bezier(.33,0,.2,1), opacity 3s cubic-bezier(.33,0,.2,1);
 } 

.titulo{display: flex; flex-direction: row-reverse; font: normal 36px/36px verlag-light, sans-serif;  text-transform: uppercase; gap:20px; color: #666666; justify-content: flex-end; margin: 60px 5% 20px 5%; cursor: default; transform-origin: left bottom; user-select: none;}
.titulo .normal{text-transform: none; color: #999999; }
.titulo.otras, .titulo.acerca{margin-top: 60px}
.titulo.oculto{display: none}

.panorama-visible.pano-iniciado .titulo { margin: 25px 5% 15px 5%;  scale:0.8; }
.panorama-visible.pano-iniciado .btn-cont.superior{margin: 15px 5% 35px 5%;}
.panorama-visible.pano-iniciado #museo-cont{height: auto}

#ludica{position: absolute; margin-left: 212px; margin-top: -29px; width:84px; height: 16px; background-image: url(../img/ludica.png); background-position:center; background-size: 100% 100%; background-repeat:no-repeat; opacity: 0.7; transform:translateY(-300px);  transition:transform 1s linear(0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988, 1), opacity 1s ease;  }	

#ludica.ready{transform:translateY(0px);}

#menu-btn{
	display:inline-block;
	width:23px;
	height:21px;
	float:right;
	position:relative;
	pointer-events: auto;
	top:12px;
	opacity:1;
	padding:0;
	background-image: url(../img/menu20x20h4.png);
	background-position: 0 0;
	transition:opacity 0.3s, background .3s cubic-bezier(.33,0,.2,1);;
	z-index:10;
}
#menu-btn:hover{ background-position:-20px 0; }

.panorama-visible.pano-iniciado #menu-btn {top: calc(100vh - 110px); opacity: 0.8}
.panorama-visible.pano-iniciado #menu-btn:hover{ background-position:21px 0; }
/****************** menu lat *******************/

.menu{
	display: block;
	 background-color:var(--bck-color);
	 width:290px;
	 position:fixed;
	 height:100%;
	 text-align:left;
	 top:0;
	 left:105%;
	 padding:60px 0;
	 z-index:1000;
	box-shadow: rgba(20,20,20,0.1) -3px -3px 12px;
	transition: all .3s cubic-bezier(.33,0,.2,1);
}
#menu-btn2{
	display:inline-block;
	width:23px;
	height:21px;
	margin-left:30px;
	 background-image: url(../img/menu20x20h2.png);
	  background-position:23px 0;
}

.botonera{ margin-top:60px; user-select: none;}
.btn-lat{
	display:block;
	width:100%;
	line-height:22px;
	padding:10px 10px 10px 30px;
	cursor:default;
	transition: all .4s cubic-bezier(.33,0,.2,1);
}
.btn-lat:hover{
	background-color:#e2e0d3;
	transition: all .4s cubic-bezier(.33,0,.2,1);
	
}
.btn-lat.disabled{
	color:#bbb;
}
.btn-lat.disabled:hover{
	background-color: transparent;
}

/************************** botones **********************/

 .btn-cont{
	 height:auto;
	 width:auto;
	text-transform: uppercase;
	 user-select: none;
 }
.btn-cont.superior{text-align: left; margin: 25px 5%; font-family: verlag-book, Helvetica, sans-serif;}
.btn-cont.superior .btn-round {font-size: 12px; margin-left:0; margin-right:20px;}

.btn-cont.inferior{  text-align: right; margin: 40px auto; font-family: verlag-light, Helvetica, sans-serif;}

 #textoCurador .btn-cont{ 
	width:80vw; 
	clear: both;
 }
#exposiciones .btn-cont{ width: 90%}
#acerca .btn-cont{ width: 82%; }
.btn-round{
	display:inline-block;
	width:auto;
	padding-bottom:15px;
	margin-left:20px;
	color:#666;
	font-size:14px;
	transition: all .3s cubic-bezier(.33,0,.2,1);
	cursor: pointer;
}
.btn-round .normal{display: none;}
.btn-round:hover{ color:#333; }



.btn-round.oculto{display: none;}

.btn-cont.superior .btn-round.disabled{font-size: 16px; color: #95564f;}
.btn-cont.superior .fecha{font-size: 12px; margin-right: 20px; color: #86261C; cursor: default; letter-spacing: 1px; padding-left: 5px;}

.btn-footer .btn-round{font-size: 12px}
/***********************    panorama    ************************/

 #museo-cont{
 	 display:block;
	 position: relative; 
	 z-index:1;
	 height: 100vh;
	 width:100%;
	 min-height:280px;	
	 overflow:hidden;
 }

 #panorama{ width:100%; 
	height:calc(100vh - 200px); 
	min-height:270px;
	margin:auto;
	overflow:hidden;
	z-index:900;
 }
.panorama-visible.pano-iniciado #panorama{height:calc(100vh - 120px); }
#museo-cont.oculto {display: inherit; height: auto;}
#museo-cont.oculto #panorama {height: var(--panoAltura); pointer-events: none; user-select: none}
#museo-cont.oculto #panorama #panoframe {opacity: 0}

 .soporte{
	background-image: url("../img/mecenazgo-c.png"), linear-gradient(90deg,rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.6) 100%) ;
	background-position: calc(100% - 60px) center, left; background-repeat: no-repeat, no-repeat; background-size: 330px auto, 100%;
	display: block; width: 100%; height: 90px;
	 position: absolute; bottom: 0; z-index: 1;
	pointer-events:none; visibility: visible; opacity: 1;
	transition: all .5s ease-in-out; transition-delay: 0.1s;		
}
.soporte.oculto{visibility: hidden; opacity: 0; bottom: -95px; height: 10px}

 /***********************    grilla de obras    ************************/
 
#gridcontainer{
	margin: auto;
	width: 100%;
	padding: 60px 0 60px 0;
	text-align:center;
	display: block;	
}
#gridcontainer.oculto{	display: none;	}	

 #bg { 
	position: relative; z-index:10;
	opacity:0; margin:0; width:100%;
	text-align:center;	
	height:auto;
	padding:0 100px;
	overflow:visible;
} 

 #bg.bg-ready{opacity:1}	

 .bg-item,
  .bg-sizer {
	text-align:center;
	float: left; 
	width: 20%;   	 
	margin-bottom:5%;
}
.bg-item img{width:50%;
 height:auto;
 border-radius:5px;
 opacity:0;
transition: opacity .8s cubic-bezier(.33,0,.2,1), border-radius .3s cubic-bezier(.33,0,.2,1);
backface-visibility:visible ;
}
.grid-item--width2 { width: 40%; }
img.ready{ opacity:1;}
.img_cont{display:block; width:70%; height:140px; margin:auto;
 background-size:cover; background-position:center;
 border-radius:5px;
 transition: all .3s cubic-bezier(.33,0,.2,1);

}
.grid-item--width2 .img_cont { width:85%;}
.info-hover{
 display:inline-block; border-radius:20px;	
 background-color:rgba(40,20,20,0.8);/*#433;*/
 color:#ddd;
 opacity:0; width:auto; height:auto; padding:10px;
 position:absolute;
 top:0; left:0;
 z-index:1000;
 margin-bottom:20px;
 box-shadow: rgba(0,0,0,0.5) 1px 2px 6px ;
 transition: opacity .6s cubic-bezier(.33,0,.2,1); 
 font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
 font-size:11px;
}

.reel_btn{display:block; width:40px; height:40px; position:absolute; z-index:20; bottom:5px; right:25px; overflow:hidden; }
.reel_btn a{display:block; width:100%; height:100%; color:#DDDDDD; font-size:14px; font-weight:bold; line-height:40px; background-color:rgb(40,20,20); border-radius:20px; transition: all .3s cubic-bezier(.33,0,.2,1);}
.reel_btn a:hover{background-color:#11558C; border-radius:3px;}/*rgb(51,153,255)*/


/**************** texto curatorial **********************/

.nowrap { white-space: nowrap }
#textoCurador{margin: auto; padding: 60px 0 60px 0; 
	/*font: normal 17px/26px guggen, sans-serif;*/
	font: normal 22px/28px verlag-light, sans-serif;
	/*font: normal 18px/24px moma, sans-serif;*/	
	color: #555555;
}
.curatorText{
	 margin:auto;
	width:85vw; max-width:1000px;
	text-align: left;
	cursor:default;
	}
.curatorText h2, .curatorText h1{ text-transform: uppercase; font: normal  30px/34px verlag-light, sans-serif;  font-weight: 300; margin-bottom: 30px; color: #888888; }
.curatorText h1{margin-bottom: 5px;}
.curatorText h3{ font: normal 24px/30px 'verlag-book', sans-serif;
    margin-bottom: 15px; margin-top: 50px; font-weight: 300;
    color: #666666;  text-transform: lowercase;}
h1 .normal,h2 .normal,h3 .normal{text-transform: none; padding-left: 4px;}
.curatorText p{ margin-top:10px;}
#textoCurador hr{margin: 50px auto; opacity: 0.5; width: 50%}

.curatorText .sub {display: block;  margin-top:22px; margin-bottom: 40px; font-size: 18px; line-height: 20px; /*font-family: verlag-book, sans-serif; text-transform: uppercase*/ }
.curatorText h1 + .sub{margin-top:0;}
.curatorText .cita{font-size: 19px; line-height: 20px; font-style: italic; color: #666666; margin-bottom: 20px; max-width: 80%; display: block; margin-left: 20px; margin-top: 10px;}

.curatorText.primera{ padding-top: 20px; width: 80vw; max-width: 100%; font-size: 15px; color: #666666; line-height: 18px;}
.curatorText.primera p{ max-width: 500px;}
.fondo-gris {
    display: inline-block; width: auto;
    padding: 0 50px 30px 120px;	margin-top: 60px;
	font-size: 19px;
	/*background-color: #e5e6e0;
	border: solid #cccccc 1px;*/
	color: #444444;
    position: relative;
}
.grupoImagen{ margin:50px 0; display:flex; justify-content: space-evenly; width:100%; gap: 5px;}
.img-cont{display: inline-block;}
.container-float .img-cont img {width: 100%; height: auto; max-width: 100% }	

.iconSM{display: inline-block; width: 40px; height: 40px; background-size: cover; margin: 20px 20px 20px 0; opacity: 0.8; cursor: pointer}
.facebook{background-image: url("../img/iconosFB.png");}
.blogspot{background-image: url("../img/iconosBS.png");}
.instagram{background-image: url("../img/iconosINS.png");}
.bancamp{background-image: url("../img/iconosBC.png");}
.iconSM label{display: inline-block; position: absolute; opacity: 0; translate: 0 0; rotate:0deg; font-size: 15px; text-transform: lowercase; transition: all 0.3s; transform-origin: left top}

.iconSM:hover label { opacity: 1; translate: 0 40px; /*rotate:20deg;*/}

.container-epi{display: flex; gap:30px; align-items: flex-end; margin-top: 30px;}
.container-epi.ultimo{margin-bottom: 50px}
.container-epi img, .container-epi video{ max-width: 60%; height: auto}	
.epigrafe{font: normal 15px/22px guggen, sans-serif}

.img-l{float: left; margin: 0 50px 29px 0;}
.img-r{float: right; margin: 0 0 0 30px}
	
.r5px{border-radius: 5px}
.container-float{margin:0}
.container-float + .container-float{margin-top:60px;}
.container-float br { clear:none;}	

.curatorText img { max-width: 100%}
.container-float img{ max-width: 45%;}		
.container-flex { display: flex; gap:50px; margin: 0;}
.container-flex .desplace{padding-top: 8vw}
.container-flex .img-cont{width: 45%; flex-shrink: 0; float: left}
.container-flex img{object-fit: cover; height: auto; width: 100%; }
.desplace{padding-top: 160px}
.logosExt{display: flex; gap:50px; margin:50px 0; justify-content: center;}
.logosExt img {height: 40px; width: auto; /* 0; */ display:inline-block;}
.flex-container{display: flex; gap: 50px; flex-direction: row; align-items: flex-start;}
.flex-container img{width: 30%; height: auto; object-fit: cover; margin-top: 30px;}
.cont-medio{width: 80%; display: flex; margin: 60px 0; gap: 2vw; }

.view-pdf{display: flex; align-items: center; margin-top: 40px; margin-left: 10px; font: normal 14px/18px guggen, sans-serif; position: static; max-width: calc(100% - 25px); color: #666666; user-select: none;}
.view-pdf + .view-pdf{margin-top: 10px; }
.button-view { display: flex; justify-content: center; align-items: center; width: 94px; height: 27px; border-radius: 4px; background-color:var(--link-color); color: #ffffff;  transition: all 0.2s; overflow: hidden;}
.button-cont{display: flex; justify-content: center; align-items: center;letter-spacing: 0.25em;/* font-family: opensans-light,sans-serif; */font-size: 12px; scale:1; transition: scale 0.2s}
.svg-span{ margin: 0px 0px 0px 4px; fill: #FFFFFF; display: initial; width: 37px; height: 37px; transition: scale 0.2s; transform-origin: left center }
.button-view:hover{background-color:var(--link-color2);}
.button-view:hover .svg-span{scale:1.2;  }
.view-svg {  width: 80px; height: 20px; border-width: 2px; border-color: #ff3300;  text-decoration: none;}

.view-pdf a + span{margin-left: 15px}

.multiText{padding-top: 30px; display: none;}
.multiText.ready{ display: block;}

.langSel{ display: flex; user-select: none; z-index: 100; padding-top: 100px;}
.isoLang{ display: inline-block; border-radius: 1px; width: 28px; height: 19px; border: solid rgba(88,88,88,1.00) 1px; text-align: center;  line-height: 15px;font-size:10px; margin: 0 3px; font-family:futura, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; color: rgba(88,88,88,1.00); opacity: 0.6; transition: all 0.2s; letter-spacing: 1px; background-size:0% 0%; background-position:  center 0; background-repeat: no-repeat;background-origin: border-box; }
.isoLang[rel="es"]{ background-image: url("../img/isoEs.png");}
.isoLang[rel="it"]{ background-image: url("../img/isoIt.png");}
.isoLang[rel="fr"]{ background-image: url("../img/isoFr.png");}
.isoLang[rel="en"]{ background-image: url("../img/isoEn.png");}
.isoLang:hover{opacity: 0.6; color: rgba(111,110,108,0.00); background-size:105% 105%; border: solid rgba(39,39,38,0) 2px;}
.isoLang.sel{ opacity: 0.6; color: rgba(39,39,38,0);  border: solid rgba(39,39,38,0) 3px; background-size: 105% 105%;}
.isoLang.sel:hover{ color: rgba(111,110,108,0.00);}

#fondoVid{
	position:fixed;
	top: 0;
	left:0;
	width:100vw;
	height:100%;
	z-index:1000; background-color:#eeecde;
	opacity: 0;
	pointer-events:none;
}	
#fondoVid.ready{
	opacity: 0.5;
	transition: opacity 1s cubic-bezier(.33,0,.2,1);
	pointer-events: auto;
}
.videoContainer{margin: 6vh 0}/**/
.bola{display: inline-flex; width: 15vw; height:15vw; font-size: 14px; text-transform: none; background-color: #333; color:#D3D1C7; align-items: center; justify-content: center; text-align: center;  border-radius: 8vw; margin-top:2vw; background-position: center center; background-size: cover;  }
	
.bola.video{ border-radius: 4px; padding: 0; transition: opacity .3s cubic-bezier(.33,0,.2,1)}	

.cont-medio video{ position: fixed; width: 15vw; height: 15vw; left: 0; top: 0; z-index: 1010; opacity: 0; border-radius: 8px; visibility: hidden; border: solid #eeecde 10px; background-color:#eeecde; box-shadow: 3px 3px 8px  rgba(0, 0, 0, 0.5); transform-origin: center center;
transition: opacity 1s, visibility 1s, width 1s, height 1s, left 1s, top 1s ; 
transition-timing-function: cubic-bezier(.33,0,.2,1);
}

video.ready{visibility: visible; opacity: 1;  }


/********************* exposiciones ***********************/

#exposiciones{
	text-align:center;
	width:100%;
	max-width:1160px;
	margin:auto;
	margin-bottom:100px;
	padding-left:4%;
	padding-top:50px;
}

.expo-container{display: flex; flex-wrap: wrap; user-select: none;}
.expo{
	position:relative;
	height:auto;
	bottom:0; 
	width:28%;
	margin:2%;	
	border-radius:0 0 4vh 0;
	box-shadow: rgba(0,0,0,0.1) 1px 2px 12px ;
	cursor:default;
	transition: all .3s cubic-bezier(.33,0,.2,1);

}
.expo:hover{bottom:5px;}

.expo.active:hover{bottom:0px;}
.expo.active{
	 background-image:url(../img/triangulo2.png);
	 background-repeat:no-repeat;
	 background-position:bottom left;
	 }
.expo-img{
	width:100%; margin:0;
}
.expo-img img{width:100%}
.expo-data{
	margin:0;
	display:block;
	width:100%;
	padding:30px 10px;
	 color:#666;
	font: normal 19px/24px verlag-book, sans-serif;
	
	}
.expo-data span{
	 font-size:16px; color:#666;
	font: normal 17px/24px verlag-light, sans-serif;
	/* font: normal 16px/20px YanoneKaffeesatzLight, Arial, Helvetica, sans-serif;*/
	}	
.expo-data .normal{	line-height:1em;}


/***********************acerca **********************************/
.acerca-cont{width: 60vw; margin: auto;}
#acerca{
	width:100vw;
	margin: 60px auto;
	font: normal 22px/28px verlag-light, sans-serif;
	/*font: normal 17px/26px guggen, sans-serif;
	font: normal 18px/26px moma, sans-serif;*/
	color:#555555;
	text-transform:none;
	text-align:left;
	
}
#banner-acerca{display: block; position: absolute; top: 0; left: 0; width: 100%; height: var(--panoAltura);  margin-bottom: 50px; overflow: hidden; background-position: center center; background-size: cover;}
.banner-cuad{display: block; position: absolute; width: 100%; height: 100%; background-position: center center; background-size: cover; margin: 0;top: 0; left: 0; opacity: 0; transition: opacity 3s ease }
.banner-img{display:block; width: 100%; height: 100%; visibility: hidden}
.clipHidden{opacity: 0; transition: opacity 0}

.staff {
    display: inline-block;
    width: auto;
    padding: 30px 40px;	
	font-size: 16px;
	background-color: #6c95ab;
	color: #ffffff;
    margin-top: 60px;
    position: relative;
}
.como{
	display:flex;
	gap: 40px;
	width:100%;
	margin:60px auto;
	padding-left: 40px;
	}
.tarjeta{border-left: solid #cccccc 1px; padding-left: 10px}
.contribucion{
	display:block;
	width:100%;
	padding:0 0 25px 0;
	font: normal 28px/20px verlag-light, sans-serif;
	letter-spacing:0;
	color: #999999;
}
.como-text{line-height: 26px; font-size: 18px;}
.como-text a{color: #6c95ab; }
.como strong{color: #777777;}
.mtex{ 
	/*text-align:justify;*/	
	background:url("../img/logo3.png");
	background-position:center;
	background-repeat:no-repeat;
 }
 #mlogo-img{
	width:30px;
	height:30px;
	top:8px;
	margin:0 2px;
	opacity:1;
 }
 
 .mtex i{font-size:18px;}
 .logo-a.chico{ font-size: 20px; font-weight:400; margin-bottom:30px}  
 .logo-a.chico span{
	font-size: 20px;
	font-weight: 600;
	opacity:1;
	bottom:0px;
  }
   .nobr{display:inline-block;}
   
/************************ footer   *******************************/
.footer{
	display: flex; flex-direction: column; align-items: center; position: relative;
	width:100%;	overflow: hidden; color:#6A6A69; 
	/*background-color: rgb(245 244 242); banco	*/
	background-color: rgb(239 236 231);
	padding: min(4% , 50px) min(10% , 130px) min(6% , 60px) min(10% , 130px);
	user-select: none;
}
.sponsors{display: flex; width: 100%; align-items: center; justify-content:space-around;}
.sponsors img{height: 30px; width: auto; margin:0;}

.datos{
	display: flex;  align-items: center;
	min-width: 380px; padding: 20px 0 60px 0;
	/*font-family:verlag-book, Helvetica, sans-serif;*/
	font-family :guggen, Helvetica, sans-serif;
	font-size:0.8em;
	line-height:1.8em;
	text-transform: uppercase;
	letter-spacing: 1px;

}


.footer .logoMM { background-image: url('../img/logoMM1.png'); opacity: 0.9;  background-repeat: no-repeat;  background-position: center center; width: 100px; height: 45px; margin: 10px 20px; border: solid #aaaaaa 0px; background-size: 90%; cursor: pointer; transition: all 0.3s}

.footer .logoMM:hover { background-color: #EEEEEE; border-radius: 5px; filter: invert(); }

.footer .logoBanco{ background-image: url('../img/logoBA.png'); opacity: 1;  background-repeat: no-repeat;  background-position: center center; background-size: auto 100%; width: 70px; height: 45px; margin: 10px 20px; transition: all 0.3s }
.footer .logoBanco:hover { background-color: #EEEEEE; border-radius: 5px; filter: invert(); }

.copy{font-size:1em; display:inline-block; cursor:default; position: relative }

.datos .email{ display:inline-flex; align-items: center; font-size:10px; margin:10px 20px; height: 45px; padding:0 18px; color: #444444; border: solid #aaaaaa 1px; transition: all .3s cubic-bezier(.33,0,.2,1);
}	

.datos .email:hover{background-color:#222222;color: #BBBBBB; border-radius: 5px;}


#contador{
   position:absolute;
	top:0px;
	left:-90px;
	color:#999;
	opacity:0;
	z-index:1000;
	filter: invert(1);
	transition: opacity .3s;
}
#contador a{ margin:0; padding:0; cursor: default !important;
   pointer-events: none;}
.copy:hover #contador{opacity: 1;}
   
@media screen and (max-width: 380px) {
	#logo-tab{
		transform-origin:left;
		transform:scale(0.8,0.8);		
	}
	#footer .btn-round{font-size:10px;}
	.mail{letter-spacing:0}
	.como-text{padding: 20px; padding-bottom:40px}
}

@media screen and (max-width: 480px) {
	
	#header{ padding:20px 20px; }	
	.menu{padding-top:30px;}
	#footer{ font-size:12px; }
	.btn-cont{width:95vw; margin: 40px auto;}
	.btn-cont.superior .fecha{padding: 0;}
	.titulo{flex-direction: column-reverse; margin: 30px 5% 20px 6%; gap: 0px; text-align: left; font-size: 32px}
	.titulo .normal{font-size: 28px}
	.titulo.otras, .titulo.acerca{margin-top: 30px;}
	#museo-cont{height: auto; min-height: 100vh;}
	#museo-cont.oculto{min-height:auto}
	#ludica{position: absolute;right: 55px;}
	.btn-cont.superior { margin: 25px 7%;}	
	#panorama { height:calc(100vh - 250px); /*transition: all 0.1s;*/ }	
	.panorama-visible.pano-iniciado #panorama { height:calc(100vh - 250px);  }
	.panorama-visible.pano-iniciado .titulo { margin-top: 15px; scale: 0.9; justify-content: flex-end;}
	.panorama-visible.pano-iniciado #menu-btn {top: calc(100vh - 242px)}
	.soporte{background-position:  center, left;}
	#gridcontainer{margin:0; padding: 0;}
	
	#textoCurador{ padding: 0;}
	
	#textoCurador .btn-cont{width: 90%}
	#exposiciones, #acerca{padding-top: 20px; margin:auto}
	#exposiciones .btn-cont, #acerca .btn-cont{margin-top: 60px;}

	.btn-cont.inferior{width: 100%; text-align: center}
	.btn-cont.inferior:first-child{margin-left: 0}
	#bg { padding:10px;}
	.grid{ padding-top:20px;}
  	.bg-item,
    .bg-sizer {width: 33%;  margin-bottom:5%;}
	.grid-item--width2 { width: 66%; }
	.img_cont{ width:70%;}
	.acerca-cont{width: 90%}
	.como{flex-direction: column;}

	.curatorText { width:90vw; margin-top: 20px; }
	.curatorText.primera{width: 90vw;}
	.curatorText .cita{max-width: 85%;}
	.cita.ultima{margin-bottom: 0;}
	.expo{width:44%}
	.expo-data{ min-height:119px;}
	.footer{padding: 20px 40px 60px 20px;}
	.datos{padding: 20px 0; flex-direction: column;}
	.sponsors{flex-direction: column; gap:20px}
	.container-float + .container-float{margin-top: 40px;}
	.container-float img {float: none; margin: 0; margin-bottom: 10px; width: 100%}
	
	.curatorText img{ max-width: 100%; }
	.curatorText h2{margin:25px 5px 10px 0;  }
	.curatorText h1 {font-size: 28px;}
	.desplace{padding-top: 0}
	
	.container-epi{flex-direction: column; gap:0; align-items:flex-start;}
	.epigrafe{margin: 10px}
	.curatorText .epigrafe h2{display: inline; font-size: 26px; line-height: 26px;  }
	.container-epi img, .container-epi video{max-width: 100%;}
	.epigrafe .view-pdf{margin-top: 10px; margin-left: 0}
	.fondo-gris {padding: 20px;}
	.grupoImagen img {margin-bottom: 0}

	.multiText.auxiliar	{padding-top: 0;}
	.langSel{ padding-top: 0px;}
	.cont-medio{width: 100%; gap:0;}
	.bola {width: 34vw; height: 34vw; margin: 2vw; border-radius: 17vw;  padding: 10vw 0; }
	.bola.video{ border-radius: 17vw;  }
	.videoContainer{margin: 8vh 0}
	.cont-medio video{  width: 34vw; height: 34vw;}	
	
	.container-flex{flex-direction: column; gap: 20px}
	.container-flex .img-cont{width: 100%; float: none;}
	.container-flex .desplace{padding-top: 0;}

}


/*
@media screen and (max-width: 900px) and (orientation: landscape) {
.langSel{ padding-top: 100px;}
}
	
*/

@media screen and (max-height: 480px)and (orientation: landscape) {
	:root{--panoAltura:40vh;}
	#header{ height:auto; padding:26px 5%; margin:0px; }
	.menu{padding-top:36px;}
	.botonera{margin-top: 20px;}
	.btn-lat{padding: 5px 10px 5px 30px;}
	.sponsors{ padding: 0;}
	.mail{display:none;}

	.expo-titulo{position:relative; bottom:0px; }
	.titulo{
		width: 92%;
		gap: 10px;
		font-size: 32px;
		margin: 30px auto 0px auto;
		text-align: left;
		flex-wrap: wrap;
	}
	.titulo.otras, .titulo.acerca{margin-top: 25px;}
   #museo-cont{height:auto; max-width: 100%;}
	#panorama{height: calc(100vh - 135px); min-height: auto}
	.soporte{height: 60px; background-position: calc(100% - 30px) center, left;}
	.btn-cont.superior{margin: 20px 5%;}
	.panorama-visible.pano-iniciado #panorama { height:calc(100vh - 135px); }
	.panorama-visible.pano-iniciado .titulo { margin-top: 29px; scale: 0.9; transition: all 0.2s}
	.panorama-visible.pano-iniciado #menu-btn {top: calc(100vh - 120px)}

	#textoCurador .btn-cont{width:80vw; }
	#gridcontainer{margin:0; padding: 0;}
	#textoCurador{ padding: 0}
	 #acerca{margin:40px auto 0 auto}
	.acerca-cont{width: 70%}
	#exposiciones{margin: 0 auto; padding-top: 20px;}
	.desplace{padding-top: 60px}
	.img-l{margin: 0px 40px 25px 0;}
	.container-flex{gap:40px;}
	#bg { padding:10px; padding-top:10px}
	.grid{ padding-top:30px;}
 	.bg-item,
    .bg-sizer { width: 20%;  margin-bottom:5%;	}
	.img_cont{ width:60%;}
	.grid-item--width2 { width: 40%; }
	.grid-item--width2 .img_cont{ width:80%;}
	.curatorText { width:90vw;padding-left:0; padding-top: 50px;}
	.curatorText.primera{margin-bottom:0}
	.curatorText .cita{display: inline-block; max-width: 45%; margin-left: 10px;}
	.curatorText .epigrafe h2{margin: 5px 0; font-size: 26px; line-height: 26px;  }
	.curatorText .epigrafe .view-pdf{flex-wrap: wrap; margin-left: 0;}
	.expo-data{ min-height:119px;}
	
}
/*
@media screen  and (max-width: 668px){
#titulo{
display:inline-block;
width:100%;
float:none;
clear:both;
text-align:left;
position:relative;
line-height:18px;
letter-spacing:0; 
}
#titulo.ludica{margin: 0;}	
.logosExt{ margin: auto; margin-top: 30px; margin-bottom: 30px; display:block; max-width:230px; text-align: center}
.logosExt img{ margin: auto; max-width: 230px}
}
@media screen and (min-width: 668px) and (max-width: 825px){
	.logosExt.floatRight{margin-right: 0; }
}
@media screen and (min-width: 825px) and (max-width: 870px){
	#footer{margin-top:30px;}
	.mail, .tel{display:none;}
	#mail-tab{display:inline-block; text-align:center;/* margin-top:30px*/}
	.tel2{margin:0; margin-left:10px}
	#titulo.ludica{margin: 0;}
	
}
@media screen and (min-width: 825px) and (max-width: 1024px){
	.btn-footer{
	background-position:20px center;
	text-align:left;
	}
	.btn-footer .btn-round{float:none; display:block;}

}

@media screen and (min-width: 1024px) and (min-height: 1024px){
	#header{margin-top:30px;
	}
	/*#museo-cont{ height:calc(100vh - 355px); }*/
	.pagina{ min-height:calc(100vh - 490px); }
}*/

/*****************     hotspotsd panorama     *************************/	
.custom-hotspot {
	height: 50px;
	width: 50px;
	background: rgba(220,220,220,0.0);
}
.custom-spot {
	height: 22px;
	width: 22px;
	/*background-image:url(img/flecha.png);*/
	background:url(../img/flecha.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	border-radius: 15px;
	opacity:0.2;
	transition: opacity .2s cubic-bezier(.33,0,.2,1);
}
.custom-spot:hover { opacity:0.5;}	
	
.custom-spot-cuad {
	height: 22px;
	width: 22px;
		background-color: #333333;
	/*background-image:url(img/flecha.png);*/
	background:url(../img/flecha.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	border-radius: 8px;
	opacity:0.6;
	transition: opacity .2s cubic-bezier(.33,0,.2,1);
}
.custom-spot-cuad:hover { opacity:1.0;}
	
.custom-spot-CH {
	height: 19px;
	width: 19px;
		background-color: #333333;
	/*background-image:url(img/flecha.png);*/
	background:url(../img/flecha.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	border-radius: 7px;
	opacity:0.5;
	transition: opacity .2s cubic-bezier(.33,0,.2,1);
}
.custom-spot-CH:hover { opacity:1.0;}		
	
.custom-url {
	height: 22px;
	width: 22px;
	/*background-image:url(img/flecha.png);*/
	background:url(../img/flecha.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	border-radius: 15px;
	opacity:0.4;
	transition: opacity .2s cubic-bezier(.33,0,.2,1);
}
.custom-url:hover { opacity:0.7;}
.custom-spotcentral {
	height: 22px;
	width: 22px;
	/*background-image:url(img/flecha.png);*/
	background:url(../img/flecha.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	opacity:0.2;
	transition: opacity .2s cubic-bezier(.33,0,.2,1);
}
.custom-spotcentral:hover { opacity:0.5;}
div.custom-tooltip span {
	visibility: hidden;
	position: absolute;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	text-align: center;
	max-width: 220px;
	padding: 5px 10px;
	margin-left: -220px;
	cursor: default;
}
div.custom-tooltip:hover span{
	visibility: visible;
}
div.custom-tooltip:hover span:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color: rgba(0,0,0,0.5) transparent transparent transparent;
	bottom: -20px;
	left: -10px;
	margin: 0 50%;
}