@charset "utf-8";
/* CSS Document */

/* Backgrounds */
.background-blue .post-callout-inner {
	background-color: var(--blue);
}

.background-light-blue .post-callout-inner {
	background-color: var(--light_blue);	
}

.background-light-gray .post-callout-inner {
	background-color: var(--light_gray);	
}

.post-callout-content {
	padding: 40px 20px;	
}
/* Sections without a background color don't need any bottom padding */
.background-none .post-callout-content {
	padding-bottom: 0;	
}


.post-callout-title {
	margin: 0;
	color: inherit;	
}

.background-none .post-callout-title,
.background-light-gray .post-callout-title {
	color: var(--blue);	
}

.post-callout-title a {
	text-decoration: none;
	color: inherit;	
}


.post-callout .text-above-title {
	font-size: 0.8888em; /* Always stays 16px? */
	font-weight: bold;
	text-transform: uppercase;
	color: var(--yellow);
	margin-bottom: 0.5em;	
}
.background-light-blue .text-above-title {
	color: #fff;	
}
.post-callout .text-above-title a {
	text-decoration: none;
}

.post-callout-content-link {
	margin-top: 1em;	
}


.post-callout.style-simple-callout {
	color: #fff;	
}
.post-callout.style-simple-callout .button {
	background-color: #fff;
	color: var(--blue);
}


/* 11-28-18 We now can show these with gray background and no button */
.background-light-gray .text-above-title {
	color: var(--light_blue);	
}
.post-callout.style-simple-callout.background-light-gray {
	color: inherit;	
}
.post-callout.style-simple-callout.background-light-gray .button {
	background-color: var(--light_blue);
	color: #fff;
}



@media (min-width: 48em) {
	
	/* More padding aroun the content */
	.post-callout-content {
		padding: 60px;	
	}
	
	/* Full-width sections get bigger titles to match heros */
	.post-callout.width-full .post-callout-title {
		font-size: 2em; /* 40px */
		line-height: 1.25;	
	}
	
	/* Made smaller due to increased body font-size rule */
	.post-callout .text-above-title {
		font-size: 0.8em;	
	}
	
}







/* At some point Media/Content style post callouts will go to two columns */
@media (min-width: 64em){
	
	
	
	/* media/content style starts to have image on left, content on right */	
	.style-media-content .post-callout-wrapper {
		display: flex;
		align-items: center;	
	}
	.style-media-content .post-callout-media {
		width: 50%;
	}
	.style-media-content .post-callout-content {
		padding-top: 0;
		padding-bottom: 0;
		width: 50%;	
	}
	
	/* simple callout style starts to have content on left, link on right */
	.style-simple-callout .post-callout-content {
		display: flex;
		align-items: center;
		max-width: 900px;
		margin: 0 auto;
	}
	.style-simple-callout .post-callout-content-text {
		padding-right: 70px;
		margin-bottom: -1em;
	}
	.style-simple-callout .no-link .post-callout-content-text {
		padding-right: 0;
	}
	.style-simple-callout .post-callout-content-link {
		margin-top: 0;	
	}
	
	.style-simple-callout .post-callout-content-link a {
		white-space: nowrap;	
	}
	
	
}


@media (min-width: 90em){
	
	/* 1440 */
	
	.style-media-content .post-callout-content {
		padding: 80px;	
	}
	.style-media-content.width-full .post-callout-content {
		padding-left: 120px;
		padding-right: 120px;	
	}
	
	/* Full-width sections get bigger titles to match heros */
	.post-callout.width-full .post-callout-title {
		font-size: 2.4em; /* 48px */	
	}
	
	
	
	
	
	
	
	
	
	
}