.imgRight, .imgLeft, .imgMid, .noImg {
	float: left;
}

.imgRight:hover, .imgLeft:hover, .imgMid:hover, .noImg:hover {
	background-color: rgba(237,237,237,0.7);
	border-radius: 20px;
}

.focusArticle:hover {
	background-color: rgba(237,237,237,0.7);
	border-radius: 20px;
}

.articleText {
	padding: 5px;
}

.articleDate p {
	position: relative; 
	text-align: center;
	left: -50%;
	font-weight: 700;
	font-size: 0.7rem;
	font-style: italic;
	line-height: 1;
	text-transform: uppercase;
	background: rgba(253,194,16,0.5);
	border-radius: 40px;
	color: black;
	padding: .2rem 1rem .3rem;
	width: 102px;
}

.noImg .articleText p {
	margin-top: 25px;
}

@media screen and (max-width: 312px) {
	h2.icon {
		font-size: 12pt !important;
	}
}

@media screen and (max-width: 370px) {
	#titleBar .title {
		float: right;
		margin-right: 25px;
	}
}

@media screen and (max-width: 736px) {
	.imgRight .img, .imgLeft .img {
		width: 200px;
	}
	
	.articleText p {
		clear: none !important;
	}
	
	.articleText header {
		margin-left: 0 !important;
	}
	
	.imgRight .articleDate, .imgLeft .articleDate {
		top: 90%;
	}
}

@media screen and (min-width: 236px) {
	.articleImage {
		float:none;
		margin: 0;
	}
	.articleImage .img {
		margin: 0 auto;
	}
}

@media screen and (min-width: 480px) {
	.articleImage {
		position: relative;
	}
	
	.imgRight .articleImage {
		float: right;
		margin-left: 20px;
	}

	.imgLeft .articleImage {
		float: left;
		margin-right: 20px;
	}

	.imgMid .articleImage {
		padding-bottom: 10px;
	}

	.imgMid .articleImage .img {
		text-align: center;
	}
}

@media screen and (min-width: 737px) {
	.imgRight .articleImage .img img {
		max-width: 150px;
	}
	
	.imgLeft .articleImage .img img {
		max-width: 150px;
	}
	
	.imgMid .articleImage .img {
		text-align: center;
	}
}

@media screen and (min-width: 937px) {
	.imgMid .articleDate {
    	top: 86%;
	}
}

@media screen and (min-width: 1137px) {
	.imgRight .articleImage .img img {
		max-width: 175px;
	}
	
	.imgLeft .articleImage .img img {
		max-width: 175px;
	}
}

@media screen and (min-width: 1337px) {
	.imgMid .articleImage .img {
		text-align: left;
	}	
	
	.imgMid .articleImage .img img {
	    max-width: 850px;
	}
}