.grid {list-style:none;margin:auto;padding: 0;}
.grid li {display:block;float:left;width:17%;margin:0 4% 50px 4%;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%;}
/* Effect 1: opacity */
.grid.effect-1 li.animate {-webkit-animation: fadeIn 0.65s ease forwards;-moz-animation: fadeIn 0.65s ease forwards;animation: fadeIn 0.65s ease forwards;}
@-webkit-keyframes fadeIn {to { opacity: 1; }}
@-moz-keyframes fadeIn {to { opacity: 1; }}
@keyframes fadeIn {to { opacity: 1; }}
/* Effect 2: Move Up */
.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; }}
/* Effect 3: Scale up */
.grid.effect-3 li.animate {-webkit-transform: scale(0.6);-moz-transform: scale(0.6);transform: scale(0.6);-webkit-animation: scaleUp 0.65s ease-in-out forwards;-moz-animation: scaleUp 0.65s ease-in-out forwards;animation: scaleUp 0.65s ease-in-out forwards;}
@-webkit-keyframes scaleUp {to { -webkit-transform: scale(1); opacity: 1; }}
@-moz-keyframes scaleUp {to { -moz-transform: scale(1); opacity: 1; }}
@keyframes scaleUp {to { transform: scale(1); opacity: 1; }}
/* Effect 4: fall perspective */
.grid.effect-4 {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}
.grid.effect-4 li.animate {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);-moz-transform: translateZ(400px) translateY(300px) rotateX(-90deg);transform: translateZ(400px) translateY(300px) rotateX(-90deg);-webkit-animation: fallPerspective .8s ease-in-out forwards;-moz-animation: fallPerspective .8s ease-in-out forwards;animation: fallPerspective .8s ease-in-out forwards;}
@-webkit-keyframes fallPerspective {100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }}
@-moz-keyframes fallPerspective {100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }}
@keyframes fallPerspective {100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }}
/* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-5 {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}
.grid.effect-5 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -300px;
	-moz-transform-origin: 50% 50% -300px;
	transform-origin: 50% 50% -300px;
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	-webkit-animation: fly .8s ease-in-out forwards;
	-moz-animation: fly .8s ease-in-out forwards;
	animation: fly .8s ease-in-out forwards;}
@-webkit-keyframes fly {100% { -webkit-transform: rotateX(0deg); opacity: 1; }}
@-moz-keyframes fly {100% { -moz-transform: rotateX(0deg); opacity: 1; }}
@keyframes fly {100% { transform: rotateX(0deg); opacity: 1; }}
/* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.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; }}
/* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-7 {-webkit-perspective: 1300px;-moz-perspective: 1300px;perspective: 1300px;}
.grid.effect-7 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-animation: helix .8s ease-in-out forwards;
	-moz-animation: helix .8s ease-in-out forwards;
	animation: helix .8s ease-in-out forwards;}
@-webkit-keyframes helix {100% { -webkit-transform: rotateY(0deg); opacity: 1; }}
@-moz-keyframes helix {100% { -moz-transform: rotateY(0deg); opacity: 1; }}
@keyframes helix {100% { transform: rotateY(0deg); opacity: 1; }}
/* 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; }}


@media screen and (max-width:1681px){}
@media screen and (max-width:1601px){}
@media screen and (max-width:1537px){}
@media screen and (max-width:1441px){}
@media screen and (max-width:1367px){}
@media screen and (max-width:1281px){}
@media screen and (max-width:1153px){}
@media screen and (max-width:1139px){}
@media screen and (max-width:1098px){.grid li {width:21%;margin:0 2% 50px 2%;}}
@media screen and (max-width:1025px){}
@media screen and (max-width:961px){}
@media screen and (max-width:901px){}
@media screen and (max-width:865px){.grid li {width:21%;margin:0 6% 50px 6%;}}
@media screen and (max-width:801px){}
@media screen and (max-width:769px){.grid li {width:25%;margin:0 4% 50px 4%;}}
@media screen and (max-width:737px){}
@media screen and (max-width:721px){.grid li {width:29%;margin:0 2% 50px 2%;}}
@media screen and (max-width:668px){}
@media screen and (max-width:641px){}
@media screen and (max-width:599px){.grid li {width:34%;margin:0 8% 50px 8%;}}
@media screen and (max-width:569px){.grid li {width:36%;margin:0 7% 50px 7%;}}
@media screen and (max-width:481px){}
@media screen and (max-width:436px){.grid li {width:40%;margin:0 5% 50px 5%;}}
@media screen and (max-width:415px){}
@media screen and (max-width:385px){.grid li {width:48%;margin:0 1% 50px 1%;}}
@media screen and (max-width:376px){}
@media screen and (max-width:361px){}
@media screen and (max-width:321px){.grid li {width:60%;margin:0 20% 50px 20%;}}