html, body {        
    font-family: 'Montserrat', sans-serif;
    background-color: #111;
} 
h2{
    color: #999;
}
#botonVolver{
    position: fixed;
    bottom: 20px;
    right: 20px;
}
#modificarNombre{
    padding-top: 15px;
}
#formulario{
    margin-top: 25%;
}
/* clear fix */
.section{
    margin-top: 50px;
}
.grid:after {
  content: '';
  display: block;
  clear: both;
}


/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333% !important;
  float: left;
}
.capaSuperior{
    width: 100% !important;
}
.grid-item,
.figure {
  float: left;
  overflow: hidden;
}

.galeria img {
  display: block;
  max-width: 150% !important;
}



/* ---- ----- ---- ---- -- --- --- --- */
.galeria {
  width: 100%;
  height: 364px;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}

.galeria .capaSuperior {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: -100%;
  left: 0;
  background-color: rgba(51,51,51,0.9);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.2s 0.4s ease-in-out;
  transition: all 0.2s 0.4s ease-in-out;
}

.galeria img {
   -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

.galeria h1{
  text-decoration: none;
  font-weight: bold;
  font-size: 5em;
  color: #fff;
  margin-top: 29%;

}
.galeria p{
  color: #888;

}
.galeria p:hover{
  color: white;

}

.galeria:hover .capaSuperior {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
    -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#nuevoBoton{
    margin-top: 10%;
    margin-bottom: 10%;
    font-size: 8.5vw !important;

}
.botones{
    position: relative;
    top: 10px;
    right: 10px;
}


span.glyphicon.eliminar.glyphicon-remove {
    font-size: 40px;
    position: absolute;
    right: 5px;
}   
span.glyphicon.modificar.glyphicon-star-empty {
    font-size: 40px;
    position: absolute;
    left: 25px;
}

span.glyphicon.portada.glyphicon-star {
    font-size: 40px;
    position: absolute;
    top: 10px;
    left: 25px;
    color: rgb(51, 122, 183);
}
