.classes_container{
	position: relative;
}
.masonry{
	position: relative;
	margin: 3px 3px 0 0;
	float: left;
	overflow: hidden;
}
.masonry1 a img{
	width: 100%;
	height: 100%;
}
.masonry2 a img{
	width: 100%;
}
.masonry3 a img{
	width: 100%;
}
.masonry_hover {
	color: #fff;
	text-shadow: 0px 0px 4px #333;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 98%;
	height: 100%;
	padding: 0 1%;
	background-color: rgba(0, 0, 0, 0);
	font-size: .8em;
}
	.masonry_hover h3 {
		color: #fff;
		text-shadow: 0px 0px 4px #333;
	}
	.masonry_hover:hover {
		background-color: rgba(0, 0, 0, 0.7);
	}
.masonry1, .masonry2, .masonry3{
	height: 250px;
	left: 0;
	top: 0;
}
.masonry1{
	width: 33%;
	width: calc(33.3% - 3px);
}
.masonry2{
	width: 66%;
	width: calc(66.6% - 3px);
}
.masonry3{
	width: 100%;
	width: calc(100% - 3px);
}

/* =============================================================================
   ----------/////////  MEDIA QUERRIES  /////////------------
   ========================================================================== */
@media screen and (max-width: 1200px) {
	.masonry1, .masonry2, .masonry3{
		height: 18vw;
	}
}
@media screen and (max-width: 979px) {
	.masonry_hover {
		background-color: rgba(0, 0, 0, .4);
	}
}
@media screen and (max-width: 859px) {
	
}
@media screen and (max-width: 767px) {
	.masonry1{
		width: 50%;
		width: calc(50% - 3px);
	}
	.masonry2{
		width: 50%;
		width: calc(50% - 3px);
	}
	.masonry3{
		width: 50%;
		width: calc(50% - 3px);
	}
	.masonry1 a img{
		height: auto;
	}
	.masonry1, .masonry2, .masonry3{
		height: 25vw;
	}
}
@media screen and (max-width: 640px) {

}
@media screen and (max-width: 479px) {
	.masonry_hover {
		color: #999;
		background-color: rgba(0, 0, 0, .6);
	}
	.masonry1, .masonry2, .masonry3{
		height: 40vw;
	}
	.masonry1{
		width: 100%;
		width: calc(100% - 3px);
	}
	.masonry2{
		width: 100%;
		width: calc(100% - 3px);
	}
	.masonry3{
		width: 100%;
		width: calc(100% - 3px);
	}
}