.grid {

	

	list-style: none;

	margin:5px auto 0px;

	padding: 0;

}



.grid li {

	display: block;

	float: left;

	padding: 10px 8px 10px 8px;

	width:31.3%;

	opacity: 0;

	margin:0px 1%;



}



.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%;

}



/* Effect 8:  */

.grid.effect-8 {

	-webkit-perspective: 1300px;

	-moz-perspective: 1300px;

	perspective: 1300px;

}



.grid.effect-8 li.animate {

	-webkit-transform-style: preserve-3d;

	-moz-transform-style: preserve-3d;

	transform-style: preserve-3d;

	-webkit-transform: scale(0.4);

	-moz-transform: scale(0.4);

	transform: scale(0.4);

	-webkit-animation: popUp .8s ease-in forwards;

	-moz-animation: popUp .8s ease-in forwards;

	animation: popUp .8s ease-in forwards;

}



@-webkit-keyframes popUp {

	70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }

	100% { -webkit-transform: scale(1); opacity: 1; }

}



@-moz-keyframes popUp {

	70% { -moz-transform: scale(1.1); opacity: .8; -moz-animation-timing-function: ease-out; }

	100% { -moz-transform: scale(1); opacity: 1; }

}



@keyframes popUp {

	70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }

	100% { transform: scale(1); opacity: 1; }

}

.grid.effect-6 {

	-webkit-perspective: 1300px;

	-moz-perspective: 1300px;

	perspective: 1300px;

}



.grid.effect-6 li.animate {

	-webkit-transform-style: preserve-3d;

	-moz-transform-style: preserve-3d;

	transform-style: preserve-3d;

	-webkit-transform-origin: 0% 0%;

	-moz-transform-origin: 0% 0%;

	transform-origin: 0% 0%;

	-webkit-transform: rotateX(-80deg);

	-moz-transform: rotateX(-80deg);

	transform: rotateX(-80deg);

	-webkit-animation: flip .8s ease-in-out forwards;

	-moz-animation: flip .8s ease-in-out forwards;

	animation: flip .8s ease-in-out forwards;

}



@-webkit-keyframes flip {

	100% { -webkit-transform: rotateX(0deg); opacity: 1; }

}



@-moz-keyframes flip {

	100% { -moz-transform: rotateX(0deg); opacity: 1; }

}



@keyframes flip {

	100% { transform: rotateX(0deg); opacity: 1; }

}







.grid.effect-2 li.animate {

	-webkit-transform: translateY(200px);

	-moz-transform: translateY(200px);

	transform: translateY(200px);

	-webkit-animation: moveUp 0.65s ease forwards;

	-moz-animation: moveUp 0.65s ease forwards;

	animation: moveUp 0.65s ease forwards;

}



@-webkit-keyframes moveUp {

	to { -webkit-transform: translateY(0); opacity: 1; }

}



@-moz-keyframes moveUp {

	to { -moz-transform: translateY(0); opacity: 1; }

}



@keyframes moveUp {

	to { transform: translateY(0); opacity: 1; }

}



/*@media screen and (max-width: 900px) {

	.grid li {

		width: 50%;

	}

}



@media screen and (max-width: 400px) {

	.grid li {

		width: 100%;

	}

}

*/

@media screen and (max-width:640px) {
	.grid li{width:100%; margin-left:0}	
}