#menu { font-size: 0; }
.menu {
line-height: 50px;
font-size: 0;
}
.menu span {
vertical-align:middle;
}#posts {
+ flex-wrap: wrap;
}
+ #posts .post::after {
+ content: "";
+ display: block;
+ padding-bottom: 100%;
+ }
#posts .post {
- height: 0;
- padding-bottom: 25%;
}#video_background {
-webkit-backface-visibility: hidden !important;
}<a href="images/img3.jpg"> <--- big-img3.jpg
<img width="100%" height="100%" src="images/img3.jpg"> <-- thumb-img3.jpg
</a>.easyzoom-flyout img {
max-width: none;
}$(document).on('click', '.modal .back', function(e) {
$(this).closest('modal').fadeOut(400);
});body{
margin: 0;
padding: 0;
background: yellow;
}<div class="container">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
...
</div>.container {
column-count: N;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
}
.container img {
display: inline-block;
width: 100%,
}for (var i = 0; i < N; i++) {
for (var j = i; j < images.length; j+=N) {
<img src="images[j].src"img {
vertical-align: middle;
}<meta content="width=device-width, initial-scale=1" name="viewport">body.boxed #page-wrapper {
margin: 200px auto 0;
}#branding_link {
position: fixed;
background-size: cover;
height: 750px;
}body.boxed #page-wrapper {
position: relative;
z-index: 2;
}<header id="branding">
<div class="col-width">