/* set html5 elements to block */
article { 
    display: block;
}

#pagewrap {
	width: 960px;
	max-width: 96%;
	margin: 0 auto;
}
.wrapper {
	overflow: hidden;
}

/************************************************************************************
COLUMN
*************************************************************************************/
.col {
	float: left;
	margin-left: 3.2%;
	margin-bottom: 30px;
	/*background: #eee;*/
}
.fullwidth .col {
	float: none;
	margin-left: 0;
}
/* grid4 col */
.grid4 .col {
	width: 22.6%;
	/*margin-bottom: 0px;*/
}

.grid5 .col {
	width: 19.2%;
	margin-left: 1%;
	margin-bottom: 1%;
}

.grid7 .col {
	width: 12%;
	margin-left: 1%;
	margin-right: 1%;
}

/* grid3 col */
.grid3 .col {
	width: 31.2%;
}

/* grid2 col */
.grid2 .col {
	width: 48.4%;
	text-align:left;
	margin-bottom: 0px;
}

/* clear col */
.grid4 .col:nth-of-type(4n+1),
.grid5 .col:nth-of-type(5n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* reset cols to 3-column */
@media screen and (max-width: 800px) {
	/* grid4 */
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
		
	.grid5 .col {
		width: 24.1%;
	}
	.grid5 .col:nth-of-type(5n+1) {
		margin-left: 1.3%;
		clear: none;
	}
	.grid5 .col:nth-of-type(4n+1) {
		margin-left: 0;
		clear: left;
	}
	
	.grid7 .col {
		width: 18.1%;
	}
	.grid7 .col:nth-of-type(6n+1) {
		margin-left: 1.3%;
		clear: none;
	}
	.grid7 .col:nth-of-type(5n+1) {
		margin-left: 0;
		clear: left;
	}
	
	
	
}


@media screen and (max-width: 720px) {
	.grid7 .col {
		width: 22.6%;
	}
	.grid7 .col:nth-of-type(5n+1) {
		margin-left: 1.3%;
		clear: none;
	}
	.grid7 .col:nth-of-type(4n+1) {
		margin-left: 0;
		clear: left;
	}
	
	
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
	
}


@media screen and (max-width: 640px) {
	.grid7 .col {
		width: 31.2%;
	}
	.grid7 .col:nth-of-type(4n+1) {
		margin-left: 1.3%;
		clear: none;
	}
	.grid7 .col:nth-of-type(3n+1) {
		margin-left: 0;
		clear: left;
	}
	
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
	
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
	
}


/* reset cols to 2-column */
@media screen and (max-width: 480px) {
	/* grid4 */
	/*.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}*/
	
	.grid7 .col {
		width: 48.2%;
	}
	.grid7 .col:nth-of-type(3n+1) {
		margin-left: 1.3%;
		clear: none;
	}
	.grid7 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	
	.grid5 .col {
		width: 49.2%;
	}
	.grid5 .col:nth-of-type(3n+1) {
		margin-left: 1.4%;
		clear: none;
	}
	.grid5 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* grid3 */
	/*.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}*/
	
	
	.grid4 .col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
	
	.grid3 .col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
	
	.grid2 .col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
	
	
	.grid7xx .col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
		
}

/* reset cols to fullwidth */
@media screen and (max-width: 400px) {
	/* grid4 */
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}
























.item img {
max-width: 100%;
height: auto;
display: block;
}

.wrapper2 {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 20px 0;
    padding: 0;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #000;
    padding: 20px;
    margin: 0 0 20px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	text-align:left;
}


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

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

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

@media only screen and (min-width: 1000px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
	.wrapper2 {
        width: 960px;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper2 {
        width: 960px;
    }
}