/* Desktop Styles */

#badge-container {
	display: block;
	width: 35%;
	padding: 1%; 
	float: right;
	border-radius: 12px;
	margin: 0 0 1em 1em;
}

#badge-container p {
	text-align: center;
	display: block;
	margin: 1em 0;
}

#badge-container p img {
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}

#CS-Downloads {
	display: grid;
	grid-template-rows: minmax(min-content, 4em);
	grid-template-columns: 40% 30% 30%;
	row-gap: 1em;
	grid-template-areas: 'box-1 box-2 box-3';
	align-items: center;
}

#CS-Downloads:hover {
	background-color: #f8f6ce;
}

#CS-Downloads .CS-Header:hover {
	background-color: #fff !important;
}

.cs-grid-item { 
	display: block;
	padding: 0;
}

.CS-Header {
	font-weight: bold;
	font-size: 20px;
	line-height: 1em;
	padding: .5em 0;
	grid-template-rows: 1.5em !important;
}

.CS-Header:hover {
	background-color: #FFF !important;
}

.cs-justify {
	margin: 0 auto;
}

.cs-download, .cs-coming-soon {
	display: block;
	padding: 10px;
	text-align: center;
	color: #FFF !important;
	font-weight: 500;
	border-radius: 12px;
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
	background-color: #86a730;
}

.cs-download:after {
	content: "Download PDF";
}

.cs-coming-soon:after {
	content: "Coming Soon";
}

.cs-download:hover, .cs-coming-soon:hover {
	background-color: #6f8536;
	text-decoration: none !important;
}

.cs-callout {
	padding: 1%;
	margin: 2em 0 1em 0;
	border-radius: 12px;
}

.cs-callout h3 {
	text-align: center !important;
}

.client-images {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin: 1em 0;
}

.client-images div {
	padding: 2%;
}

.client-images img {
	width: 100%;
	border-radius: 12px;
}

/* Mobile Styles */

@media screen and (max-width:600px) {
	
	#badge-container {
		clear: both;
		float: none;
		width: 88%;
		margin: 0 auto;
		margin-bottom: 1em;
	}
	
	#badge-container p {
		padding: 5%;
	}
	
	#CS-Downloads {
		display: block;
		width: 88%;
		text-align: center;
		background-color: #f8f6ce;
		border-radius: 12px;
		margin: 0 auto;
		margin-bottom: 1em;
		padding:2%;
	}
	
	#CS-Downloads:hover {background-color: #f8f6ce;}
	
	.cs-coming-soon, .cs-download {
		margin-top: 1em;
		margin-bottom: .5em;
	}
	
	.CS-Header {
		display: none !important;
	}
	
	.client-images {
		flex-direction: column;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	
	.client-images div {padding-bottom: 0; padding: 4%;}
	
}

/* Widescreen */

@media screen and (min-width:1500px) {
	#badge-container {
		width: 30%;
	}
}