.boxes {
	text-align:center;
}

.boxesWrap {
	display: -webkit-flex; /* Safari */
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.box {
	opacity: 1;
	float: left; /* IE8 */
	margin:2% 1.5%; /* IE8 */
	text-align: center;
	transform: scale(1);
	transition: 0.5s all linear;
}

.boxPopReveal .box.boxPopHide {
	opacity: 0;
	transform: scale(1.2);
	transition: 0.5s all linear;
}

.boxFadeReveal .box.boxFadeHide {
	opacity: 0;
	transition: 1s all linear;
}

.boxFadeReveal .box {
	opacity: 1;
	transition: 1s all linear;
}

.box img {
	display: block;
	transform: scale(1);
	transition:0.5s all linear;
	width:100%;
}

.box.circularImage img.boxImageMedium,
.box img.boxImageMedium{
	display: none;
}

.box.circularImage img {
	border-radius: 50%;
	overflow: hidden;
	margin:auto;
}

.box:hover img {
	transform: scale(1.1);
	transition:0.5s all linear;
}

.box h3 {
	margin:5% 0 0 0;
}

.box h3 a {
	text-decoration:none;
}

.box p {
	margin:0;
}

/* 4 Columns box */

.boxesFourCols .box {
	width:22%;
}

/* 3 Columns box */

.boxesThreeCols .box {
	padding:0 2%;
	width:30%;
}

/* 2 Column box */

.boxesTwoCols .box {
	width:47%;
}

.cleared {
	clear:both;
}



/* max 767px */
@media screen and (max-width: 767px) {
	
	.boxes {
		padding:0 3%;
	}
		
	.boxes .box {
		margin:5% auto;
		padding:0 5%;
		width:80%;
	}
	
	.box img.boxImageLarge	{
		display: none;
	}
	
	.boxes .box img.boxImageMedium {
		display: block;
	}
	
	.box h3 {
		font-size:1.2em;
	}
	
}


@media screen and (min-width: 481px) and (max-width: 767px) {
	
	.boxes .box {
		padding:3%;
	}

	.boxesModWrap .boxes .box {
		float: none;
		margin: 5% auto 0 auto;
		width: 50%;
	}

}

/* 768 - 959px */
@media screen and (min-width: 768px) and (max-width: 959px) {
	
	.box h3 {
		font-size:1.2em;
	}
	
	.boxesFourCols .box {
		width:22%;
	}
	
	.boxesThreeCols .box {
		width:30%;
	}
	
	.boxesTwoCols .box {
		width:47%;
	}
	
	.boxesTwoCols .box img.boxImageMedium {
		display: none;
	}
	
	.boxesTwoCols .box img.boxImageLarge {
		display: block;
	}
	
	

}


/* 960 - 1200px */
@media screen and (min-width: 960px) and (max-width: 1200px) {
	
	.boxesWrap .box {
		margin:2%;
	}
	
	.boxesFourCols .box,
	.boxesFourCols .boxesWrap .box:nth-child(4n) {
		width: 20.9%;
	}
	
	.boxesThreeCols .box,
	.boxesThreeCols .boxesWrap .box:nth-child(3n) {
		padding:0;
		width: 29%;
	}
	
	.boxesTwoCols .box {
		width: 45.95%;
	}
	
	.box h3 {
		font-size:1.3em;
	}

}