/* case studies */

/* header */
.singular.page .hentry {
	padding: 0;
}
#main .case-studies ul.cs-data li a {
	font-weight: normal;
}

.cs-data a.active {
	text-decoration: underline;
}

/* sort */
.case-studies ul {
	list-style: none;
	margin: 0;
}
.case-studies ul.cs-data li,
.case-studies ul.cs-data li div {
	display: inline-block;
	margin: 0 5px;
}

/* cards */
.case-studies ul.cards {
	margin: 1.28571429rem 0 1.625rem 0;
}
.card {
	display: inline-block;
	position: relative;
	width: calc(25% - 13px);
	height: 16.7%;
	margin: 5px;
	vertical-align: top;
}
.front {
	width: 100%;
	height: 0;
	padding-top: 66.7%;
	display: inline-block;
	vertical-align: top;
}
.back {
	display: none;
	width: 100%;
	height: 0;
	padding-top: 66.7%;
	background-color: #e6eced;
	vertical-align: top;
}
.back .content {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	color: #4d868e;
	padding: 15px;
}
.back .content,
#main .back a {
	font-size: 85%;
	line-height: 1.4;
	font-weight: normal;
}

.card-caption{
	position: absolute;
    color: white;
    bottom: 5px;
    right: 5px;
    text-shadow: 2px 2px black;
}

/* 3 across */
@media all and (max-width: 925px) {

	.card {
		width: calc(33% - 11px);
	}

}

/* 2 across */
@media all and (max-width: 725px) {

	.card {
		width: calc(50% - 12px);
	}

}

/* 1 across */
@media all and (max-width: 500px) {
	
	.cards {
		text-align: center;
	}
	.card {
		display: block;
		width: 100%;
		margin: 10px 0;
	}
	.back {
		text-align: left;
	}
	.back .content {
		padding: 20px;
	}
	.back .content,
	#main .back a {
		font-size: 100%;
		line-height: 1.6;
	}

}