#articles {
	color: #0cc;
	padding-top: 60px;
	padding-bottom: 60px;
	text-align: center;
}
	#articles h1 {
		margin-bottom: 15px;
	}
	#articles .article {
		cursor: pointer;
		height: 270px;
	}
		#articles .article>a {
			display: block;
		}
			#articles .article-content {

			}
				#articles .article-cover-outer {
					margin: 0 auto 10px;
					width: 100%;
					max-width: 180px;
					background-color: #ccc;
					border: 5px solid #9900cc;
				}
					#articles .article-cover {
						width: 100%;
						padding-bottom: 100%;
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
						opacity: .9;
					}
					#articles .article a:hover .article-cover,
					#articles .article a:focus .article-cover {
						outline: 10px solid #9900cc;
						transform: scale(1.05);
						-webkit-transform: scale(1.05);
						-moz-transform: scale(1.05);
						-o-transform: scale(1.05);
						opacity: 1;
					}
					#articles .article a:hover .article-cover-outer {
						border: 0;
					}
				#articles .article-text {
					
				}
				#articles .article-date {
					font-style: italic;
					font-size: 0.8em;
				}

@media ( max-width: 768px ) {
	#articles .article {
		height: 230px;
	}
}