.gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gallery img {
  height: 250px;
  width: 250px;
  -o-object-fit: cover;
     object-fit: cover;
}

.gallery a {
  margin: 5px;
  position: relative;
}

@media screen and (min-width: 1170px) {
  .gallery {
    margin: 0 5vw;
  }
}

@media screen and (min-width: 640px) {

  .gallery a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background-color: black;
    /*padding: 125px;*/
    padding: 50%;
    opacity: 0.5;
    width: 0;
    line-height: 0;


    opacity: 0;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }

  .gallery a::after {
    /*content: "+";*/
    
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    /*content: "\f31e";*/
    content: "\f065";
    opacity: 0.5;

    color: white;
    position: absolute;
    font-size: 1.5em;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  /*  top: 125px;
    left: 125px;*/
    top: 50%;
    left: 50%;


    opacity: 0;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }

  .gallery a:hover::after {
    opacity: 0.5;
  }

  .gallery a:hover::before {
    opacity: 0.5;
  }

}

@media screen and (max-width: 790px) {
  .gallery {
    /*justify-content: flex-start;*/
  }

  .gallery img {
  /*
    height: 23vw;
    width: 23vw;*/
    height: 200px;
    width: 200px;
  }
}

@media screen and (max-width: 640px) {
  .gallery {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .gallery img {
    height: auto;
    width: 90vw;

    -o-object-fit: contain;

       object-fit: contain;
  }

  .gallery a {
    width: 100%;
    margin: 0;
    text-align: center;

    pointer-events: none;
    cursor: default;
  }

  .gallery .vertical img {
    height: 90vw;
    width: auto;
    margin: 0;
  }

}

/*============================================================================*/

main {
  margin-top: 78.5px;
  min-height: calc(100vh - 78.5px - 7vh)
}

@media screen and (max-width: 774px) {
  main {
    margin-top: 35.6333px;
  }
}

#pictures {
  padding: 25px 0;
}