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

.grid li {
	display: block;
	float: left;
	padding: 15px;
	width: 33%;
	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%;
	width: 100%;
	transition: all .3s ease-in-out;
}

/* .grid li img:hover {
    opacity: .5;
} */




/* Effect 2: Move Up */
.grid.effect-2 li.animate {
	-webkit-transform: translateY(350px);
	transform: translateY(350px);
	-webkit-animation: moveUp 15s ease forwards;
	animation: moveUp 15s ease forwards;
	animation-duration: 15000ms;
	opacity: 0;
}

@-webkit-keyframes moveUp {
	0% {opacity: 0;}
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	0% {opacity: 0;}
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}




@media screen and (max-width: 1200px) {
    .grid li {
      width: 33%;
    }
  }
  @media screen and (max-width: 800px) {
    .grid li {
      width: 50%;
    }
  }
  @media screen and (max-width: 500px) {
    .grid li {
      width: 100%;
    }
  }