* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }


.grid{max-width:100%; width: 100%; list-style:none;margin: auto;padding:0}
.grid li{display:block;float:left;padding:7px;width:50%;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;width:100%}

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