.grid{list-style: none;padding: 0;}
.grid li{display: block;float: left;padding:0 7px;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%;}
/* 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%;}}