#app_album {
	margin-bottom: 20px;
}
#app_album ul#images{
	position: relative;
	list-style: none;
	margin: 0;
	padding:0;
}

#app_album ul#images li{
	display: inline-block;
	width: 16.6%;
}

#app_album ul#images li picture{
	position: relative;
	width: 100%;
	height: 100%;
}

#app_album ul#images li picture img,#app_album ul#images li picture source{
	display: block;
	max-width: 100%;
	height: auto;
	box-shadow: 2px 2px 5px #2D2D2D;
	-webkit-box-shadow: 2px 2px 5px #2D2D2D;
	-moz-box-shadow: 2px 2px 5px #2D2D2D;
	filter: shadow(color=#2D2D2D, direction=135, strength=2);
}
.tit_galeria{
	padding: 3px 5px 3px 6px;
	color: #fff;
	background-color: #454545;
}

#app_album ul#images h3{
	word-wrap: break-word;
}

#app_album img {
  display: block;
  max-width: 100%;
  height: auto;
/*   box-shadow: 10px 10px 20px #444444; */
  box-shadow: 2px 2px 5px #444444;
/*   transform: rotate(5deg); */
/*   -ms-transform: rotate(5deg); IE 9 */
/*   -webkit-transform: rotate(5deg); Safari 3-8 */
}

div#ucm_galery h2.des_galeria{
	margin: 0 0 10px 0;
	padding: 6px 10px 10px 10px;
	font-size: 1.15em;
	text-align: justify;
    border-bottom: 4px solid #EFEFEF;
    word-wrap: break-word;
}

div.clasico ul{
	word-wrap: break-word;
	list-style: none;
	margin: 0;
	padding: 0;
}
div.clasico ul li{
	display: inline-block;
	width: 33%;
	vertical-align: top;
	padding: 1%;
}
div.clasico ul li figure img{
	margin: 0 auto;
}
div.clasico ul li figure p{
	margin: 0;
	padding: 8px 4px 8px 4px;
	font-size: 0.9em;
	text-align: center;
}
div#ucm_pie{
	margin: 20px 0px 10px 0px;
	padding: 8px 10px 8px 10px;
	border: 1px solid #EAEAEA;
	background-color: #fafafa;
	font-size: 0.9em;
}

div#ucm_imagen{
	margin: 0;
	padding:0;
}
.vista_0{
	text-align: center;
	word-wrap: break-word;
}
.vista_0 h2{
	font-size: 2em;
	font-weight: bold;
}
.vista_0 h3{
	font-size: 1.2em;
}
.vista_0 picture{
	width: 100%;
	text-align: center;
}	
.vista_0 picture img{
	margin: 20px auto;
}	
.vista_0 div.img_autor{
	margin-top: 20px;
}
.vista_0 div.img_autor ul{
	list-style: none;
	margin: 0;
	padding: 0;
}	
.vista_0 div.img_autor li{
	display: inline;
	padding-right: 3px;
}	
.vista_0 div.img_autor li::after{
	content: '|';
	margin-left: 3px;
	color: #eeeeee;
}	
.vista_0 div.img_autor li:last-child::after{
	content: '';
	margin: 0;
}
.vista_0 div.img_datos ul{
	list-style: none;
	margin: 10px auto;
	padding: 10px;
	border-top: 2px solid #EEEEEE;
	border-bottom: 2px solid #EEEEEE;
	width: 60%;
}
.vista_0 div.img_gal{
	margin: 20px auto;
	width: 60%;
}
.vista_0 div.img_gal h4{
	background: #fafafa none repeat scroll 0 0;
	border-bottom: 2px solid #ececec;
	border-top: 2px solid #ececec;
	color: #454545;
	padding: 2px 0 2px 3px;
}
.vista_0 div.img_gal ul{
	list-style: none;
	margin: 10px auto;
	padding: 10px;
}
.galeria {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.galeria__item {
  width: 80%;
  cursor: pointer;
}


.modal {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  top: 0;
  left: 0;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__img {
  width: 70%;
  max-width: 700px;
}

.modal__boton {
  width: 50px;
  height: 50px;
  color: #fff;
  font-weight: bold;
  font-size: 25px;
  font-family: monospace;
  line-height: 50px;
  text-align: center;
  background: red;
  border-radius: 50%;
  cursor: pointer;
  
  position: absolute;
  right: 10px;
  top: 10px;
}

.visor-galerias{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 24%;
	word-wrap: break-word;
	background: #fafafa;
	background-clip: border-box;
	float: left;
	margin: 5px;
	text-align:center;
}
.visor-galerias figure {
    margin: 0;
    height: 150px;
    overflow: hidden;
    background: #fafafa;
    margin: 10px auto 0px auto;
    max-height: 400px;
    padding: 15px;

}

#app_album .visor-galerias img {
  display: block;
  max-width: 150px;
  height: auto;
  box-shadow: 10px 10px 20px #444444;
  transform: rotate(5deg);
  -ms-transform: rotate(5deg); /*IE 9*/
  -webkit-transform: rotate(5deg); /*Safari 3-8*/
}

.visor-galerias a, .visor-galerias a:hover {
	color:#454545;
	font-weight:bold;
	text-decoration: none;
}
.visor-img-top {
    max-width: 100%;
    vertical-align: middle;
}
.visor-titulo {
flex: 1 1 auto;
padding:3px 1px 1px 12px;
border-top: solid 5px #f9f9f9;
background: #fff;
height: 55px;
}
.visor-menu {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 1em;
font-weight: bold;
line-height: 1;
color: #454545;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #fff;
border-radius: 5px;
}
.visor-menu a:hover{
	text-decoration:none;
	
}
.visor-menu span{
	font-size:0.9em;
}
.visor-menu:hover span{
	color: #e74a5a;
}

.visor-galerias-marco{
/* 	border:2px dashed #f9d9d9; */
/* 	#f8c1c1; */
	margin:3px;
	padding: 2px;
}
.visor-galerias-marco:hover{
/* 	background: #afe7e74d; */
/* 	border:2px dashed #454545; */
	margin:3px;
	box-shadow: 2px 2px 5px #2D2D2D;
	-webkit-box-shadow: 2px 2px 5px #2D2D2D;
	-moz-box-shadow: 2px 2px 5px #2D2D2D;
}
.visor-icono-galeria{
    max-width: 30px !important;
    position: absolute;
    bottom: 16px;
    left: 12px;
}
span.visor-icono-top {
    padding: 20px;
    font-size: 6.3em;
    font-weight: normal;
    text-align: center;
    color: #b5b5b5;
    background: #fafafa;
    height: 150px;
}
.visor-icono-galeria{
    max-width: 30px !important;
    position: absolute;
    bottom: 16px;
    left: 12px;
    box-shadow:none !important;
}

.visor_fila{
  display: flex;
  flex-wrap: wrap;
  border-bottom: 4px solid #EFEFEF;
  padding-bottom:15px;
  justify-content: flex-start;
}
.visor_fila > div {
  background-color: none;
  width: 100px;
  height: 65px;
  overflow:hidden;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  border-top: 2px solid #454545;
  border-bottom: 2px solid #454545;
  box-shadow: 5px 5px 15px #454545;
}

.visor_circulo{
  display: flex;
  flex-wrap: wrap;
  border-bottom: 4px solid #EFEFEF;
  padding-bottom:15px;
  justify-content: flex-start;
}
.visor_circulo > div {
  background-color: #454545;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  overflow:hidden!important;
  margin: 10px;
  border: 2px solid #454545;
  box-shadow: 10px 10px 15px -5px #454545;
}
.visor_circulo > div > figure > a > img{
	display: flex !important;
    flex-direction: column;
    max-width: 150% !important;
    align-items: center;
    align-content: center;
    position: relative !important;
    left: -25% !important;
}




/* Portada avanzada CSS GRID*/
/* ordenacion por semantica*/
.grid-container {
  display:grid;
  /*grid-template-columns: 120px auto auto 120px;*/
  grid-template-areas: "item-0 item-1 item-2 item-3"
                       "item-4 item-5 item-6 item-7";
/*                       "portada portada item-3 item-4";*/
  grid-gap: 4px;
  justify-items: center; 
/*  align-items:center;*/
}
.grid-container_2 {
  margin-top: 4px;
  grid-template-areas: "item-5 item-6 item-7";
  display: grid;
  grid-gap: 4px;
}
.grid-container_3 {
  margin-top: 4px;
  grid-template-areas: "item-a item-b item-c";
  display: grid;
  grid-gap: 4px;
}
.g-portada { 
  grid-area:portada; 
  align-items: center;
  justify-content: center;
  max-width:400px;   
 }
.g-item-0 { grid-area:item-0; max-height:200px;  overflow:hidden;}
.g-item-1 { grid-area:item-1; max-height:200px;  overflow:hidden;}
.g-item-2 { grid-area:item-2; max-height:200px;  overflow:hidden;}
.g-item-3 { grid-area:item-3; max-height:200px;  overflow:hidden;}
.g-item-4 { grid-area:item-4; max-height:200px;  overflow:hidden;}
.g-item-5 { grid-area:item-5; max-height:200px;  overflow:hidden;}
.g-item-6 { grid-area:item-6; max-height:200px;  overflow:hidden;}
.g-item-7 { grid-area:item-7; max-height:200px;  overflow:hidden;}

.g-item-a { grid-area:item-a; max-height:200px; max-width:100%;   overflow:hidden;}
.g-item-b { grid-area:item-b; max-height:200px; max-width:100%;  overflow:hidden;}
.g-item-c { grid-area:item-c; max-height:200px; max-width:100%;  overflow:hidden;}

.grid-container figure img, .grid-container_2 figure img, .grid-container_3 figure img {
  width: 100%;
/*   height: auto; */
  min-height: 200px;
}
 .location-listing {
  position: relative;
}
.location-title {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background:    rgba(90,0,10,0.4);  
  /* typographic styles */
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;  
  /* position the text centrally*/
  display: flex;
  align-items: center;
  justify-content: center;
  /* ocultamos el titulo por defecto, en hover mostrar */
opacity: 0;
transition: opacity .5s;
  z-index: 1;
}
.location-title p{
	display: none;
}

.location-listing:hover .location-title {
  opacity: 1;
}

.location-image {
  line-height: 0;
}
.location-dates{
	opacity: 0.8;
	position:absolute;
	top:0px;
	width:100%;
	background-color: #424242;
	color:#fff;
	line-height: 0.5em;
	font-size: 0.9em;
	font-weight:bold;
	padding:10px 1px 5px 10px;
}
.location-dates h1{
	font-size: 1.25em;
}
.location-dates h2{
	font-size: 0.75em;
	overflow: hidden;
}
.location-dates span{
font-size: 0.8em;
float:right;	
}
/* filtro de desenfoque a la imagen también. Comenzaremos estableciendo el filtro de desenfoque en el estado normal, para darnos algo de qué hacer la transición. Luego desenfocaremos las cosas en 2px para el estado de desplazamiento
*/
/*Arreglar el borde borroso es un poco más complicado. Para empezar, escalamos la imagen para hacerla un poco más grande, y luego la colocamos overflow: hidden;en el contenedor de imágenes ( .location-listing) de modo que cuando la imagen más grande se desenfoca, sus bordes se recortan de manera efectiva*/
.location-image figure img {
  filter: blur(0px);
  transition: filter 0.3s ease-in;
  transform: scale(1.1);
}
 .location-listing {
  position: relative;
  overflow: hidden;
}
.location-listing:hover .location-image figure img {
  filter: blur(2px);
}
/* for touch screen devices
Dentro de estas llaves, pondríamos cualquier estilo que queramos aplicar a un navegador que no pueda manejar :hover. Hagamos eso: afirmaremos que para los dispositivos en los que no se puede desplazar el mouse o es un inconveniente, la imagen en miniatura siempre estará borrosa y el título siempre estará visible*/
@media (hover: none) { 
  .location-title {
    opacity: 1;
  }
  .location-image figure img {
    filter: blur(2px);
  }
}
/* definir CSS grid*/

@media (max-width: 768px) {
	div.clasico ul li{
		width: 49%;
	}
	.visor-galerias{
		width: 49%;
	}
}
@media (max-width: 550px) {
	div.clasico ul li{
		width: 99%;
	}
	div#ucm_galery h1.tit_galeria{
	font-size: 1.4em;
	}
	div#ucm_galery h2.des_galeria{
		font-size: 0.9em;
	}
	.visor-galerias{
		width: 99%;
	}
}
@media (min-width:480px) {
  .galeria__item {
    width: 48%;
    margin: 5px;
  }
}
@media (min-width:768px) {
  .galeria__item {
    width: 30%;
  }
}
@media (min-width:1024px) {
  .galeria__item {
    width: 20%;
    margin: 15px;
  }
}