/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */


.calendarContainer * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.calendarContainer {
	position: relative;
}
.calendarContainer .calendarNav {
	overflow: hidden;
	position: relative;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: flex-end;

	padding: 0 0 4px;
	padding: 0 0 0.25rem;
}
.calendarContainer .calendarNav h3 {
	flex-grow: 1;
	flex-shrink: 1;
	padding: 0;
}
.calendarContainer .calendarNav .controls a {
	position: relative;
	float: left;
	display: block;
    margin-left: 8px;
    margin-left: 0.5rem;
}
.calendarContainer.month ul.legend {
	padding: 0;
	overflow: hidden;
}
.calendarContainer.month ul.legend li {
	list-style: none;
	float: left;
	width: 14.285%;
	padding: 2px 4px;
	padding: 0.125rem 0.25rem;
	color: #23282e;
	font-size: 12px;
	font-size: 0.75rem;
}
.calendarContainer.month ul.legend li .hideDayText {
	display: none;
}

.calendarContainer.month .itemContainer {
	margin: 0 0 24px;
	margin: 0 0 1.5rem;
	position: relative;
}


.calendarContainer.month .itemContainer .inner {
	overflow: hidden;
	border: 1px solid #222;
	border-bottom: none;
	border-right: none;

	position: relative;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: stretch;
	align-content: flex-start;
}
.calendarContainer.month .itemContainer.loading .inner {
	opacity: 0.5;
}

.calendarContainer.month .itemContainer .item {
	min-height: 40px;
	min-height: 2.5rem;
	width: 14.285%;
	border-right: 1px solid #777;
	border-bottom: 1px solid #777;
	position: relative;
	background-color: #ececec;
	color: #777;
}
.calendarContainer.month .itemContainer .item.pre,
.calendarContainer.month .itemContainer .item.post {
	background-color: #f7f7f7;
	color: #777;
}
.calendarContainer.month .itemContainer .item.hasPosts {
	background-color: #ececec;
	color: #777;
}
.calendarContainer.month .itemContainer .item.hasMultiplePosts {
	cursor: pointer;
}
.calendarContainer.month .itemContainer .item.pre.hasPosts,
.calendarContainer.month .itemContainer .item.post.hasPosts {
	background-color: #f7f7f7;
	color: #777;
}


.calendarContainer.month .itemContainer .item.hasPosts:after {
	content: '';
	display: block;
	height: 12px;
	height: 0.75rem;
	width: 12px;
	width: 0.75rem;
	border-radius: 50%;
	border: 2px solid #222;
	border: 0.125rem solid #222;
	position: relative;
	margin: 6px auto 0;
	margin: 0.375rem auto 0;
	transition: all 0.15s linear;
}
.calendarContainer.month .itemContainer .item.hasPosts.toggled:after {
	background-color: #222;
}


.calendarContainer.month .itemContainer .item .date {
	width: 100%;
	display: block;
	background-color: #ccc;
	font-size: 12px;
	font-size: 0.75rem;
	color: #222;
	padding: 2px 4px;
	padding: 0.125rem 0.25rem;
}
.calendarContainer.month .itemContainer .item:hover .date {
	background-color: #444;
	color: #fff;
}
.calendarContainer.month .itemContainer .item .date .full {
	display: none;
}
.calendarContainer.month .itemContainer .item.hasPosts ul.events {
	display: none;
}
.calendarContainer.month .itemContainer .item.hasPosts ul.events li {
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	display: block;

	border-radius: 2px;
	border-radius: 0.125rem;
	background-color: #ccc;
	margin-bottom: 4px;
	margin-bottom: 0.25rem;
	padding: 2px 4px;
	padding: 0.125rem 0.25rem;
}
.calendarContainer.month .itemContainer .item.hasPosts ul.events li:last-child {
	margin-bottom: 0;
}
.calendarContainer.month .itemContainer .item.hasPosts ul.events li a {
	color: inherit;
	text-decoration: none;
	display: block;
}
.calendarContainer.month .itemContainer .item.hasPosts ul.events li a:hover,
.calendarContainer.month .itemContainer .item.hasPosts ul.events li a:focus {
	text-decoration: underline;
}

.calendarContainer .dayFeed {
	position: relative;
}

.calendarContainer .dayFeed.loading {
	height: 60px;
	height: 3.75rem;
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}


.cal-spinner-wave {
	display: none;
	opacity: 0;

	margin: 0 auto;
	width: 120px;
	width: 7.5rem;
	height: 32px;
	height: 2rem;
	text-align: center;
	font-size: 10px;
	font-size: 0.625rem;
	z-index: 100;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}
.loading .cal-spinner-wave {
	display: block;
	opacity: 1;
}

.cal-spinner-wave div {
	background-color: #333;
	height: 100%;
	width: 8px;
	width: 0.5rem;
	display: inline-block;
	-webkit-animation: cal-waveStretchDelay 1.2s infinite ease-in-out;
	animation: cal-waveStretchDelay 1.2s infinite ease-in-out;
}
.cal-spinner-wave .cal-rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}
.cal-spinner-wave .cal-rect3 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}
.cal-spinner-wave .cal-rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}
.cal-spinner-wave .cal-rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}
@-webkit-keyframes cal-waveStretchDelay {
	0%, 40%, 100% {
		-webkit-transform: scaleY(0.4);
		transform: scaleY(0.4);
	}
	20% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
}

@keyframes cal-waveStretchDelay {
	0%, 40%, 100% {
		-webkit-transform: scaleY(0.4);
		transform: scaleY(0.4);
	}
	20% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
}




/*________ RESPONSIVE ________*/

/* 640px */
@media (min-width: 40em) {
	.calendarContainer.month ul.legend li {
		padding: 8px 4px;
		padding: 8px 0.25rem;
	}

	.calendarContainer.month ul.legend li .hideDayText {
		display: inline;
	}

	.calendarContainer.month .itemContainer .item {
		min-height: 60px;
		min-height: 3.75rem;
	}
	.calendarContainer.month .itemContainer .item.hasPosts:after {
		display: none;
	}
	.calendarContainer.month .itemContainer .item.hasPosts ul.events {
		display: block;
		padding: 8px 4px 12px;
		padding: 0.5rem 0.25rem 0.75rem;
	}

	.calendarContainer .dayFeed {
		display: none;
	}
}