main {
	position: relative;
    z-index: 9;
    background: white;
    padding-top: 3em;
}

a {
    color: #0b4c47;
    text-decoration: none;
}

.events-nav {
	margin: 2em 0 ;
}
	.year {
		position: relative;
	}
	.events-nav h3 {
		font: 1.6em montserrat, helvetica, arial, sans-serif;
	    background: #0b2d4c;
	    color: white;
	    width: 4em;
	    padding: 0.75em;
	    text-align: center;
	    float: left;
	    margin: 0;
	}
	.events-nav ul {
		margin: 0 -0.2em;
		font: 1.6em montserrat, helvetica, arial, sans-serif;
		position: absolute;
		right: 0;
		left: 4em;
		top: 0;
	}
		.events-nav li {
			display: inline-block;
			float: left;
			width: 8.3%;
			padding: 0.75em;
			background: #ebebeb;
		}
			.events-nav li a {
				background: #89bbe8;
				padding: 0.75em;
				margin: -0.7em;
				display: block;
				transition: all 0.5s ease-in-out;
				-moz-transition: all 0.5s ease-in-out;
				-webkit-transition: all 0.5s ease-in-out;
			}
			.events-nav li a:hover {
				background: white;
			}

.cards {
	margin: 0 -1em;
}
	.cards li {
		padding: 1em;
		min-height: 10em;
	}
	.cards li:nth-of-type(2n+1) {
		clear: left;
	}
		.cards li .h-event {
			padding: 0;
			box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.1);
			-moz-box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.1);
			-webkit-box-shadow: 0 0 0.5em 0 rgba(0,0,0,0.1);
			transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-webkit-transition: all 0.5s ease-in-out;
			 background: white;
			 margin-top: 1em;
   			 margin-bottom: 2em;
		}
	.cards li:hover .h-event {
		box-shadow: 0 0 1em 0 rgba(0,0,0,0.1);
		-moz-box-shadow: 0 0 1em 0 rgba(0,0,0,0.1);
		-webkit-box-shadow: 0 0 1em 0 rgba(0,0,0,0.1);
	}
			.cards li .h-event h2 {
				margin: 0;
				font-size: 1em;
				font-weight: lighter;
				background: #0b2d4c;
				color: white;
				padding: 1.1111em;
			}
			.cards li .h-event .event-date {
				background: #0b2d4c;
			    color: white;
			    padding: 1.2em 1.2em 1.2em 3em;
			    position: relative;
			    font: lighter 1em montserrat, helvetica, arial, sans-serif;
			    text-transform: uppercase;
			    font-size: 0.9em;
			}
			.cards li .h-event .event-date:before {
				content: "\f073";
				font: 1em fontawesome;
				color: white;
				position: absolute;
				left: 1em;
				top: 50%;
				height: 1em;
				margin-top: -0.4em;
			}
			.cards li .h-event ul {
				padding: 1em 0 0 0;
				margin: 0;
				font: lighter 0.9em montserrat, helvetica, arial, sans-serif;
			}
				.cards li .h-event ul li {
					padding: 1.11111em 4.11111em 1.11111em 3em;
					border-bottom: solid 1px #ebebeb;
					position: relative;
					opacity: 0.8;
					min-height: 0;
					word-break: break-all;
					transition: all 0.3s ease-in-out;
					-moz-transition: all 0.3s ease-in-out;
					-webkit-transition: all 0.3s ease-in-out;
					 font-size: 0.9em;

				}
					.cards li .h-event ul li p {
						margin: 0;
					}
			.add-to-calendar {
				background: white;
			    padding: 1.2em;
			    font: 1em montserrat, helvetica, arial, sans-serif;
			}
				.add-to-calendar span {
					padding: 0.75em 2.5em 0.75em 0.75em;
				    background: orange;
				    position: relative;
				    display: inline-block;
				    cursor: pointer;
				    border-radius: 0.2em;
				    -moz-border-radius: 0.2em;
				    -webkit-border-radius: 0.2em;
				    transition: all 0.3s ease-in-out;
				    -moz-transition: all 0.3s ease-in-out;
				    -webkit-transition: all 0.3s ease-in-out;
				}
				.add-to-calendar label:after {
					content: "\f271";
					font: 0.9em fontawesome;
					color: #0b2d4c;
					position: absolute;
					right: 0.5em;
					top: 50%;
					height: 1em;
					margin-top: -0.5em;
					transition: all 0.3s ease-in-out;
				    -moz-transition: all 0.3s ease-in-out;
				    -webkit-transition: all 0.3s ease-in-out;
				}
				.add-to-calendar span:hover {
					background: #0b2d4c;
					color: white;
				}
				.add-to-calendar span:hover:after {
					color: white;
				}
.org:before {
	content: "\f1ad";
    font: 1em fontawesome;
    color: #0b2d4c;
    position: absolute;
    left: 1em;
    top: 1.8em;
    height: 1em;
    margin-top: -0.5em;
    opacity: 0.2;
}
.p-location:before {
	content: "\f041";
	font: 1em fontawesome;
    color: #0b2d4c;
    position: absolute;
    left: 1em;
    top: 1.8em;
    height: 1em;
    margin-top: -0.5em;
    opacity: 0.2;
}
.contact-email:before {
	content: "\f0e0";
	font: 1em fontawesome;
    color: #0b2d4c;
    position: absolute;
    left: 1em;
    top: 1.8em;
    height: 1em;
    margin-top: -0.5em;
    opacity: 0.2;
}
.contact-url:before {
	content: "\f08e";
	font: 1em fontawesome;
    color: #0b2d4c;
    position: absolute;
    left: 1em;
    top: 1.8em;
    height: 1em;
    margin-top: -0.5em;
    opacity: 0.2;
}

.submit-event {
	background: #0b2d4c;
	padding: 3em;
	margin-top: 2em;
	box-shadow: 0 24px 42px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0,0,0,0.22);
	display: block;
	max-width: 360px;
	float: right;
}
	.submit-event p {
		margin: 0;
		color: #89bbe8;
		font: lighter 1.6em/1 montserrat, helvetica, arial, sans-serif;
	}
	.submit-event .cta-button {
		display: block;
		margin: 0.5em 0 1.5em 0;
	}
	.submit-event .cta-button a {
		background: orange;
		color: #0b2d4c;
		padding: 0.5em 2.5em 0.5em 0.5em;
		position: relative;
		transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
	}
	.submit-event .cta-button a:hover {
		background: white;
	}
	.submit-event .cta-button a:after {
		content: "\f271";
		font: 1em fontawesome;
		color: #0b2d4c;
		position: absolute;
		right: 0.5em;
		top: 50%;
		height: 1em;
		margin-top: -0.5em;
	}

@media (max-width: 768px) {
	.year {
		margin-bottom: 2em;
		padding-bottom: 5em;
	}
	.events-nav h3 {
		margin: 0 0 2.8em 0;
		    margin-bottom: 5.5em;
	}
	.events-nav ul {
		top: auto;
		left: 0;
		bottom: 0;
		margin: 0;
	}
	.events-nav li span {
		display: none;
	}
}
@media (max-width: 460px) {
	.events-nav li {
		width: 16.6%;
		float:none;
	}
}
@media (min-width: 768px) {
	.primary-content {
		padding-right: 3em;
	}
}
@media (max-width: 1340px) {
	main {
		padding: 2em;
	}
}


.cards li .h-event h2 {
		 margin: 0;
	   font-size: 1.2em;
	   background: #0b2d4c;
	   color: white;
	   font-family: 'Montserrat';
	   padding: 1.5em 1em 0.8em 1em;
	   font-weight: 300;
}


.featured-event {
    width: 14em;
    text-align: center;
    position: relative;
    margin-top: -0.5em;
    padding: 1em;
    font-size: 1.2em;
    font-family: 'Montserrat';
    text-transform: uppercase;
    margin-bottom: -0.3em;
    z-index: -1;
    font-weight: bold;
    border: 1px solid;
}

.h-event img {
	padding: 2em;
}

.featured .h-event {
    border: 1px solid;
    box-shadow: none !IMPORTANT;
    background: white;
}

.events-list .alpha_letter {
    font-family: 'Montserrat';
    font-size: 1.4em;
    padding-top: 1em;
}

.fix-submit {
    position: fixed;
    top: 0;
    width: 35.5em;
}

.category-header h1 {
    font-size: 4em;
    font-family: 'Lora';
    font-weight: 300;
    z-index: 9;
    position: relative;
    text-align: center;
}

.category-header {
    padding: 3em;
    border-bottom: solid 1px #ebebeb;
    position: relative;
    background-image: url(../new_statesman_events.html);
    color: white;
    background-size: cover;
    background-position: 50%;
}
.category-header:after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
        background: rgba(0, 0, 0, 0.77);
            top: 0;
    left: 0;
    z-index: 1;
}

.add-to-calendar {
    padding: 1em 0.8em;
    font: 1em montserrat, helvetica, arial, sans-serif;
    width: 13em;
    position: relative;
}

.add-to-calendar label {
    border: 1px solid orange;
    font-size: 0.86em;
    background: orange;
    color: #0b2d4c;
    padding: 0.5em 0.5em 0.5em 0.5em;
}

.add-to-calendar-checkbox:checked ~ a {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-top: 1em;
    transition: 1s;
    font-size: 0.8em;
    color: #0a0a0a;
}



.featured-event {
    width: 14em;
    text-align: center;
    position: absolute;
    margin-top: -0.5em;
    padding: 1em;
    font-size: 1.3em;
    font-family: 'Montserrat';
    text-transform: uppercase;
    z-index: 1;
    font-weight: bold;
    border: 1px solid;
    background: whitesmoke;
}

.featured h2 {
    padding-top: 2em !important;
    padding-bottom: 1em !important;
    font-size: 1.2em;
}

#mobile-menu {
	z-index: 0;
}