.event-section {
	margin-bottom: 4em;
}

.event-section .banner {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 25%;
	margin-top: 2em;
	background: #333;
}

.event-section .banner img {
	position: absolute;
	width: 100%;
	height: 100%;
}

@media (max-width: 800px) {
	.event-section {
		position: relative;
		padding-top: 25%;
	}

	.event-section .site-section {
		position: static;
	}

	.event-section .banner {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
	}
}

.event-section .events {
	width: 33em;
}

.event-section .events.future {
	float: left;
	margin-bottom: 1em;
}

.event-section .events.past {
	clear: left;
}

.event-section .events .content {
	margin: 1em 0;
}

.event-section .events .article {
	overflow: hidden;
	margin: 3em 0;
}

.event-section .events .article + .article {
	padding-top: 3em;
	border-top: 1px solid #CCC;
}

.event-section .events .article > * {
	margin-left: 9em;
}

.event-section .events .article .title h3 {
	text-wrap: balance;
}

.event-section .events .article .title h3 + h3 {
	margin-top: .5em;
}

.event-section .events .article .title .subtitle {
	font-weight: normal;
}

.event-section .events .article .date {
	width: 6em;
	height: 9em;
	margin: -.375em 0 0;
	text-align: center;
	float: left;
	position: relative;
}

.event-section .events .date > * {
	position: absolute;
	width: 100%;
	left: 0;
	letter-spacing: -.03125em;
}

.event-section .events .date .year,
.event-section .events .date .d {
	display: none;
}

.event-section .events .date .day {
	font-size: 550%;
	top: .15em;
	line-height: 1.125;
	border-bottom: 1px solid #000;
}

.event-section .events .date .month {
	top: 0;
	font-size: 120%;
}

.event-section .events .date .weekday {
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
	font-size: 88%;
	text-transform: uppercase;
	bottom: 0;
}

.event-section .events.past .date {
	color: #999;
}

.event-section .events.past .date .day {
	border: none;
}

.event-section .events.past .date .weekday {
	display: none;
}

.event-section .events.past .date .year {
	display: block;
	bottom: 0;
	font-size: 275%;
	line-height: 1;
}

.event-section .no-results {
	text-align: center;
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
	font-size: 120%;
	margin: 2.5em 0;
}

.event-section .contact {
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
	text-align: center;
	width: 20em;
	padding: 2em 0;
	margin: 3em 0;
	background: #E7F1F3;
	float: right;
}

.event-section .contact > div {
	width: 19em;
	margin: 0 auto;
}

.event-section .contact h2 {
	font-size: 150%;
	margin-bottom: .5em;
}

.event-section .calendars > div {
	width: 20em;
	height: 40em;
	overflow: hidden;
	clear: right;
	float: right;
	position: relative;
}

.event-section .calendars input {
	display: none;
}

.event-section .calendar {
	width: 100%;
	position: absolute;
	z-index: 1;
	left: -100%;
	transition: left .2s;
}

.event-section input:checked ~ .calendar {
	left: 100%;
}

.event-section input:checked + .calendar {
	left: 0;
}

.event-section .nav {
	display: none;
}

.event-section input:checked + .calendar + .nav {
	display: block;
}

.event-section .nav label {
	position: absolute;
	z-index: 2;
	user-select: none;
	cursor: pointer;
	background: no-repeat left center url(/include/images/arrow.svg);
	background: no-repeat left center/auto 1.35em url(/include/images/arrow.svg);
	overflow: hidden;
	height: 0;
	width: 1.5em;
	padding-top: 1.35em;
}

.event-section .nav .prev {
	left: 0;
}

.event-section .nav .next {
	right: 0;
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

.event-section .calendar h2 {
	font-size: 120%;
	text-align: center;
	margin-bottom: .5em;
}

.event-section .calendar table {
	width: 100%;
	table-layout: fixed;
	text-align: center;
	border-collapse: collapse;
	position: relative;
}


.event-section .calendar th,
.event-section .calendar td > :first-child {
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
	font-weight: bold;
	font-size: 120%;
	line-height: 2;
}

.event-section .calendar td > :first-child {
	display: block;
}

.event-section .calendar a {
	text-decoration: none;
}

.event-section .calendar * {
	padding: 0;
}

.event-section .calendar th {
	color: #006C85;
}

.event-section .calendar tbody {
	border-top: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
}

.event-section .calendar td {
	border-left: 1px solid #EEE;
}

.event-section .calendar td:first-child {
	border-left: none;
}

.event-section .calendar td.event {
	background: #E7F1F3;
}

.event-section .calendar td.past.event {
	background: #EEE;
}

.event-section .calendar td.today > :first-child {
	border: 1px solid #000;
	margin: -1px;
	position: relative;
}

.event-section .calendar .info {
	display: none;
}

.event-section .calendar td:hover .info {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: no-repeat center top url(/include/images/arrow-up.svg);
	background: no-repeat center top/1.35em auto url(/include/images/arrow-up.svg);
	padding-top: 1.5em;
	margin-top: 1em;
}

.event-section .calendar td:hover .info .date ~ div {
	margin-top: .5em;
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
	font-weight: bold;
	line-height: 1.125;
}

.event-section .signup {
	width: 33em;
	box-sizing: border-box;
	clear: left;
	text-align: center;
	padding: 2em;
	padding: calc(2em - 1px);
	margin: 3em 0 4em;
}

.event-section .signup,
.event-section .signup input,
.event-section .signup button {
	border: 1px solid #006C85;
}

.event-section .signup h2 {
	color: #006C85;
	font-size: 150%;
}

.event-section .signup > p {
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
}

.event-section .signup p {
	margin: 1em 0 0;
}

.event-section .signup form p {
	display: flex;
	justify-content: center;
}

.event-section .signup input {
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
	flex-shrink: 1;
	min-width: 0;
}

.event-section .signup button {
	background: #006C85;
	color: #FFF;
	width: 6em;
	flex: none;
}

@media (max-width: 937px) {
	.event-section .events.future,
	.event-section .events.past,
	.event-section .signup,
	.event-section .contact,
	.event-section .calendars > div {
		clear: none;
		float: none;
		width: auto;
	}

	.event-section .events.future,
	.event-section .events.past,
	.event-section .contact,
	.event-section .signup,
	.event-section .calendars {
		max-width: 33em;
	}

	.event-section .calendars > div {
		max-width: 20em;
		height: 19em;
		margin: 0 auto;
	}

	.event-section .calendar td:hover .info {
		display: none;
	}
}

@media (max-width: 420px) {
	.event-section .events .article {
		margin: 2em 0;
	}

	.event-section .events .article + .article {
		padding-top: 2em;
	}

	.event-section .events .article > * {
		margin-left: 0;
	}

	.event-section .events .article .date {
		float: none;
		width: auto;
		height: auto;
		text-align: left;
		margin: 0 0 1em;
	}

	.event-section .events .date > * {
		position: static;
	}

	.event-section .events .date .year,
	.event-section .events.past .date .year,
	.event-section .events .date .d,
	.event-section .events .date .day,
	.event-section .events .date .month,
	.event-section .events .date .weekday,
	.event-section .events.past .date .weekday {
		display: inline;
		text-transform: none;
		border: none;
		font: inherit;
	}
}