#galeria {
 background-color:#fcf3cf;
 background: rgba(0,0,0,0.1); padding: 2%; width: 96%;
  height: 100%;
  text-align: center;
  float: left;  margin-top: 0;
 margin-left: 0px; }
.galeria {
  max-width       : 96%;
  line-height     : 0;
  padding         : var(--separa);
  padding-right   : 0;
  display         : flex;
  flex-wrap       : wrap;
  justify-content : space-around;
}
.item {
  padding: var(--separa);
  width: 33%;
}
.item img {
  max-width : 80%;
  height    : auto;
  opacity   : 0.8;
  outline   : 3px solid #fff;
}
.item img:hover {
  opacity : 1;
  cursor  : pointer;
}
.modal {
  display: none;
}
.modal:target {
  display          : block;
  position         : fixed;
  top              : 0;
  left             : 0;
  width            : 100%;
  height           : 100%;
  display          : flex;
  background:	   rgba(0,0,0,0.9)
  

}
.imagen {
  margin          : auto;
  width           : 50%;
  display         : flex;
  justify-content : center;
  align-items     : center;
  opacity: 1;
}
@keyframes zoom {
  0%   { opacity: 0.2; transform: scale(0.5); }
  100% { opacity: 0.4; transform: scale(1);}
}
.imagen a { margin: 0 4px; }
.imagen img {
  max-width : 100%;
  width     : 80vw;
  height    : auto;
  border    : 8px solid #fff;
  animation : zoom 0.5s ease-in-out;
  position  : relative;
}
.imagen a:nth-child(2)::after {
  content       : "X";
  width         : 80px; height: 80px;
  line-height   : 80px;
  text-align    : center;
  font-size     : 4em;
  border-radius : 50%;
  border        : 2px solid hsla(0, 0%, 0%, 0.3);
  background    : hsla(0, 0%, 0%, 0.5);
  color         : hsla(0, 100%, 50%, 0.5);
  position      : absolute;
  top           : 20%;right: 5%;
  z-index       : 200;
}
.imagen a:nth-child(2):hover::after {
  border        : 2px solid hsla(0, 0%, 100%, 0.6);
}
.imagen a:nth-child(2) {
  margin : 0;
  height : 100%;
}
.ant,.sig {
  width  : 0px; height: 0px;
  border : 80px solid transparent;
}
.ant { border-right: 40px solid hsla(0, 100%, 100%, 0.8); }
.sig { border-left: 40px solid hsla(0, 100%, 100%, 0.8); }
.ant:hover { border-right: 40px solid hsla(0, 100%, 50%, 0.8); }
.sig:hover { border-left: 40px solid hsla(0, 100%, 50%, 0.8); }