/* Set column width via: masonry2col, masonry3col, masonry4col, masonry5col,- does not work  */
/* Link: http://w3bits.com/css-masonry/ */

img, iframe {
max-width: 100%;
height: auto;
display: block;
}

.masonryWrapper {
    width: 95%;
    margin: 1.5em auto;
}


.masonry2col {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.masonry3col {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.masonry4col {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.masonry5col {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
    font-size: .85em;
}


.masonryItem {
	display: inline-block;
	background: #fff;
	padding-top: 4px;
	padding-right: 4px;
	padding-left: 4px;
	padding-bottom: 4px;
	margin: 0 0 1.5em;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius: 5px;
	-moz-border-radius: 5px;
	/* [disabled]border: 1px solid #000; */
	-webkit-border-radius: 5px;
	/* [disabled]-webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.5); */
	-moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.5);
	/* [disabled]box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.5); */
}

.title, .footer {
text-align: center;
}

.title {
font-size: 1.75em;
margin: .25em 0;
}

.title a {
display: inline-block;
padding: .75em 1.25em;
color: #888;
border: 2px solid #aaa;
margin: .25em 1em 1em;
text-decoration: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}

.title {
color: #666;
}

.title a:hover {
color: #666;
border-color: #888;
}


.share-link,
.article-link {
color: #888;
}


/* --------- 2 Columns ---------------------------------------------- */
@media only screen and (min-width: 400px) {
    .masonry2col {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry2col {
        -moz-column-count: ;
        -webkit-column-count: ;
        column-count: ;
    }
}

@media only screen and (min-width: 900px) {
    .masonry2col {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry2col {
        -moz-column-count: ;
        -webkit-column-count: ;
        column-count: ;
    }
}





/* --------- 3 Columns ---------------------------------------------- */
@media only screen and (min-width: 400px) {
    .masonry3col {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry3col {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry3col {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry3col {
        -moz-column-count: ;
        -webkit-column-count: ;
        column-count: ;
    }
}





/* --------- 4 Columns ---------------------------------------------- */
@media only screen and (min-width: 400px) {
    .masonry4col {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry4col {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry4col {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry4col {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}



/* --------- 5 Columns ---------------------------------------------- */
@media only screen and (min-width: 400px) {
    .masonry5col {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry5col {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry5col {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry5col {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}



/* --------------------------------------- */
@media only screen and (min-width: 1280px) {
    .masonryWrapper {
        width: 1260px;
    }
}