.gal-item{
    overflow: hidden;
    padding: 1px;
}
.gal-item .box{
    height: 95%;
    overflow: hidden;
}
.gal-item:hover{
    cursor:pointer;
}
.box img{
    height: 95%;
    width: auto;
    object-fit:cover;
}

      /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.zoom {
    transition: transform .9s;
}

.zoom:hover {
    transform: scale(1.5);
}

/***********************
* Essential Structure *
***********************/
  .flexsearch--wrapper {
      height: auto;
      width: auto;
      max-width: 100%;
      overflow: hidden;
      background: transparent;
      margin: 0;
      position: static;
  }

.flexsearch--form {
    overflow: hidden;
    position: relative;
}

.flexsearch--input-wrapper {
    padding: 0 66px 0 0; /* Right padding for submit button width */
    overflow: hidden;
}

.flexsearch--input {
    width: 100%;
}

/***********************
 * Configurable Styles *
 ***********************/
.flexsearch {
    padding: 0 25px 0 200px; /* Padding for other horizontal elements */
}

.flexsearch--input {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 60px;
    padding: 0 46px 0 10px;
    border-color: #888;
    border-radius: 35px; /* (height/2) + border-width */
    border-style: solid;
    border-width: 5px;
    margin-top: 15px;
    color: #333;
    font-family: 'Helvetica', sans-serif;
    font-size: 26px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.flexsearch--submit {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    margin-top: 20px; /* margin-top + border-width */
    margin-right: 5px; /* border-width */
    background: transparent;
    color: #888;
    font-family: 'Helvetica', sans-serif;
    font-size: 40px;
    line-height: 60px;
}

.flexsearch--input:focus {
    outline: none;
    border-color: #333;
}

.flexsearch--input:focus.flexsearch--submit {
    color: #333;
}

.flexsearch--submit:hover {
    color: #333;
    cursor: pointer;
}

::-webkit-input-placeholder {
    color: #888;
}

input:-moz-placeholder {
    color: #888
}

  .overlay {
      background: rgba(0,0,0,.3);
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      align-items: center;
      justify-content: center;
      display: flex;
      visibility: hidden;
  }

.overlay.active {
    visibility: visible;
}

.popup {
    background: #d8407d;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 20px;
    text-align: center;
    width: 600px;

    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
}

.popup .btn-cerrar-popup {
    font-size: 16px;
    line-height: 16px;
    display: block;
    text-align: right;
    transition: .3s ease all;
    color: #BBBBBB;
}

.popup .btn-cerrar-popup:hover {
    color: white;
}
.popup.active {	transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .5s ease .3s forwards; }
.popup.active h4 { animation: entradaSubtitulo .5s ease .3s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs .7s linear .5s forwards; }


.popup2 {
    background: #ad4173;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 20px;
    text-align: center;
    width: 600px;

    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
}

.popup2 .btn-cerrar-popup2 {
    font-size: 16px;
    line-height: 16px;
    display: block;
    text-align: right;
    transition: .3s ease all;
    color: #BBBBBB;
}

.popup2 .btn-cerrar-popup2:hover {
    color: white;
}
.popup2.active {	transform: scale(1); opacity: 1; }
.popup2.active h3 { animation: entradaTitulo .5s ease .3s forwards; }
.popup2.active h4 { animation: entradaSubtitulo .5s ease .3s forwards; }
.popup2.active .contenedor-inputs { animation: entradaInputs .7s linear .5s forwards; }

.popup3 {
    background: #d8407d;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 20px;
    text-align: center;
    width: 600px;

    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
}

.popup3 .btn-cerrar-popup3 {
    font-size: 16px;
    line-height: 16px;
    display: block;
    text-align: right;
    transition: .3s ease all;
    color: #BBBBBB;
}

.popup3 .btn-cerrar-popup3:hover {
    color: white;
}
.popup3.active {	transform: scale(1); opacity: 1; }
.popup3.active h3 { animation: entradaTitulo .5s ease .3s forwards; }
.popup3.active h4 { animation: entradaSubtitulo .5s ease .3s forwards; }
.popup3.active .contenedor-inputs { animation: entradaInputs .7s linear .5s forwards; }

  .padding-cube{
      padding-top: 300px;
      padding-bottom: 300px
  }