@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-display: swap;

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

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

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

}
@font-face {
  font-family: "roboto";
  src: url("../fuentes/Roboto-Light.ttf");
  font-style: normal; font-weight: 200; 
  font-display: swap;
}
*{-o-box-sizing:border-box;box-sizing:border-box}
  
/*  *:before,*:after{box-sizing:inherit}*/
  *:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
:root{
	--bck-color: #f7f4ed; /*#eeecde*/
}
body, html {
	margin: 0px; padding: 0px; user-select: none;
}
body {
    background: var(--bck-color);
    color: #333;
     font-family: roboto, Helvetica, sans-serif;
	/*font-family: guggen, Helvetica, sans-serif;*/
	/*font-family: moma, Helvetica, sans-serif;*/
    font-size: 14px;
	text-align:center;
	overflow-x:hidden;
	overflow-y:scroll !important;
	width:100%;
	min-height:100vh;
}


::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;}
img { padding: 0px; border: 0px currentColor;}
:focus { outline: 0px;}
.clear { clear: both;}
a{text-decoration:none; color:inherit;}


.nobr{display:inline-block;}
.hide, .oculto{display:none}
visible{ display:block; opacity:1;}
.sep{clear:both; height:20px;}
.sep30{clear:both; height:30px;}


/**********************     portada      ******************/

 #portada{
	display:flex;
	align-items: center;
	justify-content: center;
	position: relative; 
	z-index:1;
	height:100vh;
	width:100%;
	margin:  auto;
	background-size: cover;
	cursor:default;	 
 }

#portada .fondo{ background-size: cover; display: block; width: 100%; height: 100%; position: absolute; z-index: 1; opacity: 0;
transition: opacity 2s 0.5s, background 1s ease 0.5s;	 background-position:center -180px;} 

 #portada.ready { height:45vh; transition: height 0.5s ;
 }
#portada.ready .fondo{ opacity: 1; background-position: center center } 
.main-titulo{
	display: flex;
	align-items: center;
	position: absolute; z-index: 5;
	font-size: 28px;
	color: #6f6058;
	letter-spacing: -2px;	
	font-family:Quicksand, Arial, Helvetica, sans-serif;
	font-weight:600;
	transition: opacity 0.3s ;
	opacity: 0;

}
.main-titulo.ready{opacity: 1}
#portada.ready .main-titulo{ opacity: 0}

  .main-titulo span{position:relative; opacity:0;  transition: opacity 2s ;}
  .main-titulo span.ready { opacity:0.8}

  #titulo-img{
	 display:inline-block;
	 width:36px;
	 height:37px;
	 background:url(../img/logo1b.png);
	 background-position:center;
	 background-size:86%;
	 background-repeat:no-repeat;
	 opacity:0;
	 transition: opacity 2s, rotate 1s;/* cubic-bezier(.33,0,.2,1)*/
 }

  #titulo-img.ready { opacity:0.8}
.main-titulo:hover  #titulo-img{ rotate:180deg}

h1{ 
	display: flex;
	align-items: flex-start;
    font: normal 36px/36px verlag-light, sans-serif;
    text-transform: uppercase;
    gap: 20px;
    color: #666666;
    margin: 60px 5% 20px 5%;
    cursor: default;
	
}

h1 span{text-transform: none; color: #888888}

/**************************listado de exposiciones *******************/  
.listado{
	width:100%;
	max-width:1160px;
	margin:90px auto 60px auto;
	padding-left:3%;
}
.expo, .banco{
	position:relative;
	display: flex;
	padding: 0;
	height:auto; 	
	border-radius:0 0 4vh 0;
	overflow: hidden;
	box-shadow: rgba(0,0,0,0.1) 1px 2px 12px ;
	cursor:default;

}

.gutter-sizer { width: 5%; }
.grid-sizer,
.grid-item {
     /*width: 28.5%; */	
	 width: 44.8%; 
	 margin-bottom: 3.5%;	

}
grid-item--width2 {
    width: 44.8%;
}

.expo-img{width: 55%; margin: 0; padding: 0; margin-bottom: -5px;}
.cont-expo-data{width: 45%; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center;}
.expo-img img{width:100%; height: auto; object-fit: contain; margin: 0; padding: 0;}

.expo-data{
	margin:0;
	display:block;
	width:100%;
	padding:15px;
	 color:#666;
	font: 19px / 24px verlag-book, sans-serif;
	
	}
.expo-data span{
	margin: 5px 0;
	color: rgb(102, 102, 102);
    font: 17px / 20px verlag-light, sans-serif;
	display: block;
	}	
 .soporte{
	background-image: url("../img/soporte2.png");
	background-repeat: no-repeat; 
	background-position: 95% bottom;
	background-size: 80%;
 }
 .soporte .expo-data{margin-top:-50px;}	
.link{
	 position:absolute;
	 left:calc(55% - 45px);
	 top:calc(50% - 45px);
	 width:90px; height:90px;
	 background-color: rgba(255,255,255,0.65);
	font-family:verlag-book, Helvetica, sans-serif;
	font-size: 16px;
	 color:#555555;
	 text-align:center;
	 line-height:90px; 
	 letter-spacing:1px;
	 border-radius:45px;
	 z-index:100;
	 cursor:pointer;
	 opacity:0;
	 transition: all .4s cubic-bezier(.33,0,.2,1);
 }

 .main-titulo.chico{ font-size: 20px; font-weight:400; margin-bottom:30px; bottom:0;}  
 .main-titulo.chico span{
	 font-size: 20px;
	 font-weight: 600;
	  opacity:1;
  bottom:0px;
  }
 /*******acerca de mm ****************/
 .mtex{ 
	text-align:justify;	
	font-size:18px;
	line-height:24px;
	font-weight: normal;
	background:url(../img/logo3.png);
	background-position:center;
	background-repeat:no-repeat;
 }
 #mtitulo-img{
	width:30px;
	height:30px;
	top:8px;
	margin:0 2px;
	opacity:1;
 }
 
 .mtex i{font-size:18px;}
   
/************************ footer   *******************************/
.footer{
	display: flex; flex-direction: column; align-items: center; position: relative;
	width:100%;	overflow: hidden; color:#636362;  gap:40px;
	/*background-color: rgb(245 244 242); banco	*/
	background-color: rgb(239 236 231);
	padding: min(6% , 60px) min(12% , 130px) min(6% , 70px) min(12% , 130px);
}
.pieTex{ padding: 0; text-align: justify; font-weight: 400; font-size: 14px; cursor: default; width: 100%; line-height:1.4em;}
.contribucion, .lista-amigos{
	width: 100%;
	margin:auto;
	text-align: left;
	padding:  0;
	font-size: 14px;
	line-height:1.4em;
}


.datos{
	display: flex;  align-items: center;
	min-width: 380px; padding:  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 .firma{text-align: right}
.staff {
    display: inline-block;
    width: auto;
    padding: 30px 40px;	
	font-size: 14px;
	text-align: left;
	background-color: #6c95ab;
	color: #ffffff;
    margin-top: 40px;
    position: relative;
}

.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(); }
.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: auto; transition: all 0.3s }
.footer .logoBanco{ width: 70px; height: 45px; margin: 10px 20px;}
.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;}

.sponsors{display: flex; width: 100%; align-items: center; justify-content:space-around; margin-top: 20px}
.sponsors img{height: 30px; width: auto; margin:0;}

#contador{
   position:absolute;
	top:0px;
	left:-90px;
	color:#999;
	opacity:0;
	z-index:1000;
	filter: invert(1);
	transition: opacity .3s cubic-bezier(.33,0,.2,1);
}
#contador a{ margin:0; padding:0; cursor: default !important;
   pointer-events: none;}
.copy:hover #contador{opacity: 1;}


@media screen and (max-width: 480px) {

	#portada.ready{
	 height:120px;
 	}
	#portada .fondo{background-position: center -20px;}
 	.main-titulo { margin-top: -50px;}

	h1{flex-direction: column; gap:0}
	.listado{ padding-left:5%; margin-top: 60px }

	.gutter-sizer { width: 3%; }
	.grid-sizer,
	.grid-item { width: 90%; margin-bottom: 3.5%;	}
	.grid-item--width2 {width: 90%;}
	.expo{border-radius: 0 0 3vh 0;}
	.footer{padding: 50px 5% 70px 5%;}
	.staff { padding: 25px 25px;}
	.datos{ flex-direction: column}
	.sponsors{ flex-direction: column; gap:30px; margin-top: 0;}
	#datos .email{margin:10px auto;}
	
}
@media screen and (max-width: 320px) {
	
	#datos .email {letter-spacing:0;}
	#datos{padding:25px 0 33px 0;}
}
@media screen and (max-height: 480px)and (orientation: landscape) {

	#portada.ready{
	 height:100px;
 	}
	#portada.ready .main-titulo{
		transform:scale(0.7,0.7)
	}
	.listado{ margin-top: 60px }
	.grid-item--width2 {width: 93.5%;}
	.curatorText{
	width:90vw;
	padding-left:8px;
	}
	#datos .email{margin-right:10px;}

}
@media screen and (min-height: 1275px) {
	#footer{top:calc(15vh - 116px);}
}