.grid{list-style:none;margin:30px auto;padding:0}
.grid li{display:block;float:left;padding:7px;width:33.33333%;opacity:0}
.grid li img{width:100%}
.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%}
.grid.effect-1 li.animate{-webkit-animation:fadeIn .65s ease forwards;animation:fadeIn .65s ease forwards}
@-webkit-keyframes fadeIn {
100%{opacity:1}
}
@keyframes fadeIn {
100%{opacity:1}
}
.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 {
100%{-webkit-transform:translateY(0);opacity:1}
}
@keyframes moveUp {
100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
}
.grid.effect-3 li.animate{-webkit-transform:scale(0.6);transform:scale(0.6);-webkit-animation:scaleUp .65s ease-in-out forwards;animation:scaleUp .65s ease-in-out forwards}
@-webkit-keyframes scaleUp {
100%{-webkit-transform:scale(1);opacity:1}
}
@keyframes scaleUp {
100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
}
.grid.effect-4{-webkit-perspective:1300px;perspective:1300px}
.grid.effect-4 li.animate{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(400px) translateY(300px) rotateX(-90deg);transform:translateZ(400px) translateY(300px) rotateX(-90deg);-webkit-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}
}
@keyframes fallPerspective {
100%{-webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg);transform:translateZ(0px) translateY(0px) rotateX(0deg);opacity:1}
}
.grid.effect-5{-webkit-perspective:1300px;perspective:1300px}
.grid.effect-5 li.animate{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:50% 50% -300px;transform-origin:50% 50% -300px;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-animation:fly .8s ease-in-out forwards;animation:fly .8s ease-in-out forwards}
@-webkit-keyframes fly {
100%{-webkit-transform:rotateX(0deg);opacity:1}
}
@keyframes fly {
100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);opacity:1}
}
.grid.effect-6{-webkit-perspective:1300px;perspective:1300px}
.grid.effect-6 li.animate{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotateX(-80deg);transform:rotateX(-80deg);-webkit-animation:flip .8s ease-in-out forwards;animation:flip .8s ease-in-out forwards}
@-webkit-keyframes flip {
100%{-webkit-transform:rotateX(0deg);opacity:1}
}
@keyframes flip {
100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);opacity:1}
}
.grid.effect-7{-webkit-perspective:1300px;perspective:1300px}
.grid.effect-7 li.animate{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-animation:helix .8s ease-in-out forwards;animation:helix .8s ease-in-out forwards}
@-webkit-keyframes helix {
100%{-webkit-transform:rotateY(0deg);opacity:1}
}
@keyframes helix {
100%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);opacity:1}
}
.grid.effect-8{-webkit-perspective:1300px;perspective:1300px}
.grid.effect-8 li.animate{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:scale(0.4);transform:scale(0.4);-webkit-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}
}
@keyframes popUp {
70%{-webkit-transform:scale(1.1);transform:scale(1.1);opacity:.8;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
}
@media screen and (max-width: 900px) {
.grid li{width:50%}
}
@media screen and (max-width: 600px) {
.grid li{width:100%;padding:0;margin:0 0 15px}
.grid{margin:15px auto}
}