/* 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:900px) {.grid li {	width:50%;}}
@media screen and (max-width:400px) {.grid li {	width:100%;}}