.grid {
  max-width: 89em;
  list-style: none;
  margin: 30px auto;
  padding: 0;
}

.grid li {
  display: block;
  float: left;
  padding: 0.8em;
  padding-top: 0;
  padding-bottom: 0.8em;
  width: 25%;
  opacity: 0;
}

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
  opacity: 1;
}

.grid li a,
.grid li img {
  outline: none;
  border: none;
  display: block;
  max-width: 100%;
}

.image {
  vertical-align: top;
  display: inline-block;
  text-align: right;
}

.location {
  display: block;
  padding-top: 0.1em;
  font-family: "circular";
  font-size: 0.7em;
  color: #94969a;
}

/* Effect 1: opacity */
.grid.effect-1 li.animate {
  -webkit-animation: fadeIn 0.65s ease forwards;
  animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
  0% {
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
  }
  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 1500px) {
  .grid li {
    max-width: 69em;
    width: 33%;
  }
}

@media screen and (max-width: 840px) {
  .grid li {
    width: 50%;
  }
  .location {
    font-size: 0.5em;
  }
}

@media screen and (max-width: 350px) {
  .grid li {
    width: 100%;
  }
  .location {
    font-size: 0.5em;
  }
}