// Callout
.callout {
	background: #F8F8F8;
	color: #4d4d4d;
	text-align: center;
	padding: 3em 0;

	.container {
		max-width: 900px;

		@media (min-width: $wide-container) {
			max-width: 1180px;
		}
	}

	p {
	    font-family: $header-font-family;
	    font-size: 1.8rem;
	    font-weight: 300;
		line-height: 1.4;
		margin-bottom: 0;

		@media (min-width: $medium-screen){
			font-size: 2.6em;
		}
	}

	span {
		transition: all .2s ease;
		display: block;
		color: $base-accent-color;

		@media (min-width: $large-screen){
			font-size: 1.2em;
			text-shadow: 1px 1px #ddd, 2px 2px $base-accent-color;

			&:hover {
				text-shadow: 2px 2px #ddd, 4px 4px $base-accent-color;
			}
		}

		@media (min-width: $wide-container){
			font-size: 1.4em;
		}
	}
}