.grid { width: 100%; padding: 0; margin: 0px auto; list-style: none; }
.grid li { width: 25%; padding: 7px; margin: 0px; display: block; float: left; opacity: 0; }
.grid li.shown, .no-js .grid li, .no-cssanimations .grid li { opacity: 1; }
.grid li a, .grid li img { max-width: 100%; display: block; border: none; outline: none; }

/* Effect 1: opacity */
.grid.effect-1 li.animate { -webkit-animation: fadeIn .65s ease forwards; animation: fadeIn .65s ease forwards; }
@-webkit-keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}
@keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}

/* Effect 2: Move Up */
.grid.effect-2 li.animate { -webkit-transform: translateY(200px); transform: translateY(200px); -webkit-animation: moveUp .65s ease forwards; animation: moveUp .65s ease forwards; }
@-webkit-keyframes moveUp {
	0% { }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes moveUp {
	0% { }
	100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@media (min-width:768px) and (max-width:991px) {
	.grid li { width: 50%; padding: 7px; margin: 0px; }
}
@media (min-width:0px) and (max-width:767px) {
	.grid li { width: 100%; padding: 7px; margin: 0px; }
}