@font-face {
	font-family: Trek;
	src: url(FinalFrontierOldStyle-8Pg.ttf);
}
@font-face {
	font-family: Trek2;
	src: url(Stardate81316-aolE.ttf);
}

html, body {
	padding: 0;
	margin: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Poppins', sans-serif;
	padding: 20px;
	color: #FFF;
	background-color: #000;
	background-image: url('./bg.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: 50%;
}

body:before {
	content: "";
	z-index: -1;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}

body, body * {
	box-sizing: border-box;
}

.cf:before, .cf:after {
	content: " ";
	display: table;
}

.cf:after {
	clear: both;
}

.cf {
	*zoom: 1;
}

.container {
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
}

.loading {
	text-align: center;
	font-size: 24px;
	font-weight: 100;
	letter-spacing: 0.05em;
}


/*****************************/
/*********** FONTS ***********/
/*****************************/

h1 {
	font-family: Trek;
	font-weight: 300;
	margin: 0.2em 0 0.1em;
	text-align: center;
}

h2 {
	margin: 0 0 0.4em;
	font-weight: 300;
	text-transform: capitalize;
	line-height: 1.2em;
}

h3 {
	margin: 0;
}

p.pre-title {
	text-align: center;
	line-height: 1em;
	margin-bottom: 0.4em;
}

@media screen and (min-width: 600px) {
	h1 {
		font-size: 4em;
		margin: 0 0 0.1em
	}
}

p {
	margin: 0;
	font-size: 0.8em;
}

a {
	color: #ffff00;
}

a:visited {
	color: #ffff00;
}

a[href^="#"] {
	color: #FFF;
}

a[href^="#"]:after {
	content: " »";
}


/***************************************/
/*********** HEADER & FOOTER ***********/
/***************************************/

header {
	max-width: 1000px;
	margin: 0 auto;
	margin-bottom: 2.5em;
}

header p {
	font-size: 0.75em;
	text-align: center;
	margin: revert;
}

#last-update {
	color: #ffff00;
}

.footer {
	max-width: 500px;
	margin: 300px auto 100px;
}

.footer p {
	font-size: 0.75em;
	margin: revert;
}


/****************************/
/*********** GRID ***********/
/****************************/

.events {
	margin-top: 2em;
}

.no-events {
	text-align: center;
}

.no-events h2 {
	font-size: 3em;
}

.no-events p {
	font-size: 1.5em;
	font-weight: 300;
}

.singleEvent {
	display: grid;
	grid-template-columns: 24px 1fr;
	grid-column-gap: 16px;
	grid-row-gap: 0px;
}

.singleEvent.excluded {
	border: solid 5px #F00;
}

.singleEvent .timeline_markers {
	grid-column: 1;
	grid-row-start: 1;
	grid-row-end: 4;
	overflow: hidden;
}

.singleEvent .heading,
.singleEvent .highlight,
.singleEvent .detail {
	grid-column: 2;
}

.singleEvent .highlight {
	margin-bottom: 1rem;
}

.singleEvent .detail {
	margin-bottom: 60px;
}

.singleEvent .detail .viewFullSummary {
	margin: 0.6em 0 0;
}

.singleEvent .heading {
	grid-row-start: 1;
}

.singleEvent .heading-desktop {
	display: none;
	position: relative;
}

.singleEvent .heading {
	position: relative;
}

.singleEvent .subtitle {
	margin: -0.4rem 0 0.4rem 0;
	font-weight: 500;
	font-size: 16px;
}

.singleEvent .readMore {
	margin: 1em 0 0;
}

.singleEvent .readMore a[target="_blank"]::after {
	content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwLDAsMjU2LDI1NiIgd2lkdGg9IjEycHgiIGhlaWdodD0iMTJweCI+PGcgZmlsbD0iI2ZmZmYwMCIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0iIiBzdHJva2UtZGFzaG9mZnNldD0iMCIgZm9udC1mYW1pbHk9Im5vbmUiIGZvbnQtd2VpZ2h0PSJub25lIiBmb250LXNpemU9Im5vbmUiIHRleHQtYW5jaG9yPSJub25lIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6IG5vcm1hbCI+PGcgdHJhbnNmb3JtPSJzY2FsZSgxMC42NjY2NywxMC42NjY2NykiPjxwYXRoIGQ9Ik0xOS45ODA0NywyLjk5MDIzYy0wLjAzNzI2LDAuMDAxMTggLTAuMDc0NDMsMC4wMDQ0NCAtMC4xMTEzMywwLjAwOTc3aC00Ljg2OTE0Yy0wLjM2MDY0LC0wLjAwNTEgLTAuNjk2MDgsMC4xODQzOCAtMC44Nzc4OSwwLjQ5NTg3Yy0wLjE4MTgxLDAuMzExNSAtMC4xODE4MSwwLjY5Njc2IDAsMS4wMDgyNWMwLjE4MTgxLDAuMzExNSAwLjUxNzI1LDAuNTAwOTcgMC44Nzc4OSwwLjQ5NTg3aDIuNTg1OTRsLTkuMjkyOTcsOS4yOTI5N2MtMC4yNjEyNCwwLjI1MDgyIC0wLjM2NjQ3LDAuNjIzMjcgLTAuMjc1MTEsMC45NzM3MWMwLjA5MTM2LDAuMzUwNDQgMC4zNjUwMywwLjYyNDExIDAuNzE1NDcsMC43MTU0N2MwLjM1MDQ0LDAuMDkxMzYgMC43MjI4OSwtMC4wMTM4OCAwLjk3MzcxLC0wLjI3NTExbDkuMjkyOTcsLTkuMjkyOTd2Mi41ODU5NGMtMC4wMDUxLDAuMzYwNjQgMC4xODQzOCwwLjY5NjA4IDAuNDk1ODcsMC44Nzc4OWMwLjMxMTUsMC4xODE4MSAwLjY5Njc2LDAuMTgxODEgMS4wMDgyNSwwYzAuMzExNSwtMC4xODE4MSAwLjUwMDk3LC0wLjUxNzI1IDAuNDk1ODcsLTAuODc3ODl2LTQuODczMDVjMC4wNDAzMSwtMC4yOTE0MSAtMC4wNDk3MywtMC41ODU3OSAtMC4yNDYxNSwtMC44MDQ3OWMtMC4xOTY0MywtMC4yMTkgLTAuNDc5MzEsLTAuMzQwNDIgLTAuNzczMzgsLTAuMzMxOTJ6TTUsM2MtMS4wOTMwNiwwIC0yLDAuOTA2OTQgLTIsMnYxNGMwLDEuMDkzMDYgMC45MDY5NCwyIDIsMmgxNGMxLjA5MzA2LDAgMiwtMC45MDY5NCAyLC0ydi02YzAuMDA1MSwtMC4zNjA2NCAtMC4xODQzOCwtMC42OTYwOCAtMC40OTU4NywtMC44Nzc4OWMtMC4zMTE1LC0wLjE4MTgxIC0wLjY5Njc2LC0wLjE4MTgxIC0xLjAwODI1LDBjLTAuMzExNSwwLjE4MTgxIC0wLjUwMDk3LDAuNTE3MjUgLTAuNDk1ODcsMC44Nzc4OXY2aC0xNHYtMTRoNmMwLjM2MDY0LDAuMDA1MSAwLjY5NjA4LC0wLjE4NDM4IDAuODc3ODksLTAuNDk1ODdjMC4xODE4MSwtMC4zMTE1IDAuMTgxODEsLTAuNjk2NzYgMCwtMS4wMDgyNWMtMC4xODE4MSwtMC4zMTE1IC0wLjUxNzI1LC0wLjUwMDk3IC0wLjg3Nzg5LC0wLjQ5NTg3eiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+);
	margin: 0 0 0 0.2em;
}

@media screen and (min-width: 600px) {
	.singleEvent {
		grid-template-columns: 1fr 24px 1fr;
		grid-template-rows: 1fr 80px;
		grid-column-gap: 20px;
		grid-row-gap: 0px;
	}
	.singleEvent .heading-desktop {display: block;}
	.singleEvent .heading {display: none;}

	.singleEvent .highlight {
		grid-column: 1;
		grid-row-start: 1;
	}
	.singleEvent .detail {
		grid-column: 3;
		grid-row-start: 1;
		margin-bottom: 0;
	}
	.singleEvent .timeline_markers {
		grid-column: 2;
		grid-row-start: 1;
		grid-row-end: 3;
	}
}


/*********************************/
/*********** TIME SKIP ***********/
/*********************************/

.time_skip {
	text-align: left;
	line-height: 0em;
	position: relative;
}

.time_skip h2 {
	transform: translate(0, -50%);
	position: absolute;
	top: 40%;
	text-align: center;
	width: 100%;
	line-height: 1em;
	font-weight: 400;
}

.time_skip svg {
	width: 24px;
}

@media screen and (min-width: 600px) {
	.time_skip {
		text-align: center;
	}
	.time_skip h2 {
		transform: translate(-50%, -50%);
		left: 50%;
		padding: 4px;
		width: auto;
	}
	.time_skip h2:before {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background: linear-gradient(0deg, rgba(0,0,0,0) 10%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0) 90%);
	}
	.time_skip svg {
		width: 80px;
	}
}





/*******************************/
/*********** FILTERS ***********/
/*******************************/

.controls_expander {
	border: solid 1px #FFF;
	padding: 8px;
	cursor: pointer;
	background: #171841;
	display: none;
}

.controls_expander h3 {
	margin: 0;
}

.controls_expander_icon {
	display: inline-block;
	transition: transform 0.3s;
}

.controls_expander .controls_expander_icon.opened {
	transform: rotate(90deg);
}

.controls {
	text-align: center;
	border: solid 1px #FFF;
	border-top: none;
	padding: 1em;
	background: rgba(0, 0, 0, 0.5);
	display: none;
}

.controls * {
	margin: 0 auto;
}

.controls hr {
	margin: 1em 0;
}


/*********** BY EVENT LEVEL ***********/

.controls__event-Level {
	width: 90%;
}

#eventLevelRange {
	width: 100%;
}



/*********** BY TIME ***********/

.controls__time {
	width: 90%;
	position: relative;
}

.controls__time .lowerLabel,
.controls__time .upperLabel {
	position: absolute;
}

.controls__time .lowerLabel {left: 0;}
.controls__time .upperLabel {right: 0;}
.controls__time .midLabel {
	font-size: 1.5em;
	line-height: 1em;
}


.multi-range {
	position: relative;
	height: 50px;
}

.multi-range input[type=range] {
	position: absolute;
	left: 0;
	box-sizing: border-box;
	appearance: none;
	width: 100%;
	margin: 0;
	padding: 0 2px;
	/* Add some L/R padding to ensure box shadow of handle is shown */
	overflow: hidden;
	border: 0;
	border-radius: 1px;
	outline: none;
	background: linear-gradient(grey, grey) no-repeat center;
	/* Use a linear gradient to generate only the 2px height background */
	background-size: 100% 2px;
	pointer-events: none;
}

.multi-range input[type=range]:active,
.multi-range input[type=range]:focus {
	outline: none;
}


.multi-range input[type=range]::-webkit-slider-thumb {
	height: 28px;
	width: 28px;
	border-radius: 28px;
	background-color: #fff;
	position: relative;
	margin: 5px 0;
	/* Add some margin to ensure box shadow is shown */
	cursor: pointer;
	appearance: none;
	pointer-events: all;
	box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);
}


.multi-range input[type=range]::-webkit-slider-thumb::before {
	content: ' ';
	display: block;
	position: absolute;
	top: 13px;
	left: 100%;
	width: 2000px;
	height: 2px;
}


.multi-range input[type=range]:nth-child(1)::-webkit-slider-thumb::before {
	background-color: red;
}

.multi-range input[type=range]:nth-child(2) {
	background: none;
}

.multi-range input[type=range]:nth-child(2)::-webkit-slider-thumb::before {
	background-color: grey; 
}






/*********** BY SHOW ***********/

.controls__show {
}

.filter-show-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, 30%);
	grid-column-gap: 4%;
	grid-row-gap: 2%;
}

@media screen and (min-width: 450px) {
	.filter-show-list {
		/*grid-template-columns: repeat(auto-fit, 15%);
		grid-column-gap: 2%;
		grid-row-gap: 16px;*/

		grid-template-columns: repeat(auto-fit, 12.5%);
		grid-column-gap: 2%;
		grid-row-gap: 20px;
	}
}

@media screen and (min-width: 900px) {
	.controls__show {
		max-width: 70%;
	}

	.filter-show-list {
		grid-template-columns: repeat(auto-fit, 12.5%);
		grid-column-gap: 2%;
		grid-row-gap: 20px;
	}
}

.filter-show-list .filter-show-option {
	display: block;
	width: 100%;
	font-size: 0.75em;
	line-height: 1.1em;
	cursor: pointer;
}

.filter-show-list .filter-show-option .showFilter_bg {
	display: block;
	border: solid 1px #FFF;
	background-size: cover;
	background-position: 50% 30%;
	padding: 25% 0%;
}


@media screen and (min-width: 450px) {
	.filter-show-list .filter-show-option {
		font-size: 0.5em;
	}

	.filter-show-list .filter-show-option .showFilter_bg {
		padding: 70% 0%;
		background-position: 50%;
	}
}

@media screen and (min-width: 600px) {
	.filter-show-list .filter-show-option {
		font-size: 0.75em;
	}
}


.filter-show-list .filter-show-option[data-state="inactive"] {
	opacity: 0.5;
}

.filter-show-list .filter-show-option#filter-TOS .showFilter_bg {background-image: url('./images/TOS.jpg');}
.filter-show-list .filter-show-option#filter-TAS .showFilter_bg {background-image: url('./images/TAS.jpg');}
.filter-show-list .filter-show-option#filter-TNG .showFilter_bg {background-image: url('./images/TNG.jpg');}
.filter-show-list .filter-show-option#filter-DS9 .showFilter_bg {background-image: url('./images/DS9.jpg');}
.filter-show-list .filter-show-option#filter-VOY .showFilter_bg {background-image: url('./images/VOY.jpg');}
.filter-show-list .filter-show-option#filter-ENT .showFilter_bg {background-image: url('./images/ENT.jpg');}
.filter-show-list .filter-show-option#filter-DIS .showFilter_bg {background-image: url('./images/DIS.jpg');}
.filter-show-list .filter-show-option#filter-PIC .showFilter_bg {background-image: url('./images/PIC.jpg');}
.filter-show-list .filter-show-option#filter-LDX .showFilter_bg {background-image: url('./images/LDX.jpg');}
.filter-show-list .filter-show-option#filter-PRO .showFilter_bg {background-image: url('./images/PRO.jpg');}
.filter-show-list .filter-show-option#filter-SNW .showFilter_bg {background-image: url('./images/SNW.jpg');}
.filter-show-list .filter-show-option#filter-SFA .showFilter_bg {background-image: url('./images/SFA.jpg');}
.filter-show-list .filter-show-option#filter-extras .showFilter_bg {background-image: url('./images/SHO.jpg');}
.filter-show-list .filter-show-option#filter-films .showFilter_bg {background-image: url('./images/FC.jpg');}


@media screen and (max-width: 450px) {
	.filter-show-list .filter-show-option#filter-TOS .showFilter_bg {background-position-y: 3%;}
	.filter-show-list .filter-show-option#filter-TNG .showFilter_bg {background-position-y: 6%;}
	.filter-show-list .filter-show-option#filter-DS9 .showFilter_bg {background-position-y: 15%;}
	.filter-show-list .filter-show-option#filter-VOY .showFilter_bg {background-position-y: 40%;}
	.filter-show-list .filter-show-option#filter-ENT .showFilter_bg {background-position-y: 20%;}
	.filter-show-list .filter-show-option#filter-DIS .showFilter_bg {background-position-y: 8%;}
	.filter-show-list .filter-show-option#filter-PIC .showFilter_bg {background-position-y: 18%;}
	.filter-show-list .filter-show-option#filter-LDX .showFilter_bg {background-position-y: 76%;}
	.filter-show-list .filter-show-option#filter-SNW .showFilter_bg {background-position-y: 33%;}
	.filter-show-list .filter-show-option#filter-SFA .showFilter_bg {background-position-y: 58%;}
	.filter-show-list .filter-show-option#filter-PRO .showFilter_bg {
		background-position-y: 54%;
		background-size: 130%;
	}
}




/*******************************/
/*********** CONTENT ***********/
/*******************************/

.singleEvent .bullet {
	border: solid 2px #ffff00;
	border-radius: 50%;
	width: 24px;
	height: 24px;
}

.singleEvent .line_bottom {
	height: 100%;
	background: linear-gradient(#ffff00, #ffff00) no-repeat center/2px 100%;
}

.singleEvent:last-child .line_bottom {
	background: none;
}

.date {
	margin: 0;
	color: #ffff00;
	font-size: 1em;
}

.stardate {
	display: block;
	font-size: 0.7em;
	color: #ffff00;
	opacity: 0.75;
}

.eventId {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	font-family: monospace;
	color: #FF0;
	font-size: 1.2em;
}

.universe {
	text-transform: uppercase;
	display: inline-block;
	line-height: 1em;
	font-weight: 600;
	font-size: 0.6em;
	border-radius: 6px;
	margin: 0;
	padding: 0.2em 0.4em;
	background: #817300;
	color: #FFF;
	position: relative;
	top: -0.25em;
}

.universe.mirror {
	background: #c20000;
}

.stardate .dev {
	color: #a3d7ff;
}

.singleEvent .description {
	font-size: 0.8rem;
}

.singleEvent .description p {
	font-size: 0.8rem;
}

.singleEvent .description strong {
	color: #a2edff;
}

.singleEvent .highlight .image {
	width: 100%;
	height: 120px;
	border: solid 1px #AAA;
	border-bottom-right-radius: 40px;
	border-top-left-radius: 40px;
	background-size: cover;
	background-position: 50% 35%;
}

.highlight .caption {
	font-style: italic;
	line-height: 1.1em;
	font-size: 0.7em;
	margin: 0.3em 0 1em;
}

@media screen and (min-width: 600px) {
	.singleEvent .highlight .image {
		height: 240px;
		background-position: 50% 50%;
	}
	.highlight .caption {
		margin-bottom: 0;
	}
}






/************************************/
/*********** SOURCE MEDIA ***********/
/************************************/

.media {
	padding-top: 20px;
}

#fullSummary .media {
	padding-top: 0;
}

.media .ref-list {
	color: #FFF;
}

.media .ref-item {
	color: #FFF;
	font-weight: 400;
	font-size: 0.6em;
	text-decoration: none;
	display: inline-block;
	margin: 0 0 0.5em;
	position: relative;
}

.ref-item .media-image {
	display: none;
}

.ref-item .showTitle {
	position: relative;
	padding: 1px 4px;
	border: solid 1px rgb(255 255 255 / 50%);
	z-index: 1;
}

.media .ref-item .showTitle:before {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.ref-item .fullTitle {
	display: none;
}

.ref-item .abbr {
	font-weight: 600;
}


@media screen and (min-width: 600px) {
	.media .ref-list.grid {
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
	}

	.media .ref-item.full {
		color: #FFF;
		background: #000;
		min-height: 100px;
		font-size: 0.8em;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
		border: solid 1px #FFF;
	}

	.ref-item.full .fullTitle {
		display: initial;
	}

	.ref-item.full .abbr {
		display: none;
	}

	.ref-item.full .epTitle {
		display: block;
	}

	.media .ref-item.full .media-image {
		display: block;
		height: 60px;
		font-weight: 600;
		font-size: 0.8em;
		background-size: cover;
		background-position-x: 50%;
		background-position-y: 20%;
	}

	.media .ref-item.film.full .media-image {
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		width: 50%;
		transform: translateX(-50%);
		background-position-y: 50%
	}

	.media .ref-item.full .showTitle {
		display: block;
		position: relative;
		font-size: 0.75em;
		padding: 4px 2px;
		line-height: 1.2em;
		border: none;
	}

	.media .ref-item.full .showTitle span,
	.media .ref-item.full .seasonEpisode span {
		position: relative;
	}

	.media .ref-item.full .seasonEpisode {
		display: block;
		position: relative;
		padding: 2px 0;
		width: 100%;
		font-size: 0.75em;
	}

	.media .ref-item.full .showTitle:before,
	.media .ref-item.full .seasonEpisode:before {
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
}

@media screen and (min-width: 1000px) {
	.media .ref-list.grid {
		grid-template-columns: repeat(3, 1fr);
	}
}


.media .ref-item .showTitle:before,
.media .ref-item .seasonEpisode:before {background-color: rgb(0 0 0 / 70%);}

.media .ref-item .showTitle.TOS:before {background-color: rgb(0 0 0 / 70%);}
.media .ref-item .showTitle.ENT:before {background-color: rgb(104 79 132 / 90%);}
.media .ref-item .showTitle.VOY:before {background-color: rgb(160 0 13 / 70%);}
.media .ref-item .showTitle.DIS:before {background-color: rgb(0 55 97 / 80%);}
.media .ref-item .showTitle.DIS {color: #fff2ce;}
.media .ref-item .showTitle.PIC {color: #ffe59e;}
.media .ref-item .showTitle.PRO {color: #df46fb;}
.media .ref-item .showTitle.LDX {color: #00fffd;}
.media .ref-item .showTitle.LDX {color: #f7c246;}
.media .ref-item .showTitle.TNG {color: #2a79d4;}
.media .ref-item .showTitle.TNG:before {background-color: rgb(0 0 0 / 90%);}
.media .ref-item .showTitle.TAS {color: #ed9144;}
.media .ref-item .showTitle.SNW {color: #fffed1;}
.media .ref-item .showTitle.DS9 {color: #f7c246;}




/************************************/
/*********** SOURCE MEDIA ***********/
/************************************/

#fullSummary_container {
	transition: all 0.3s;
}

#fullSummary_container.hidden {
	opacity: 0;
	pointer-events: none;
}


#fullSummary {
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	max-width: 600px;
	padding: 20px;
	background: #0b1823;
	z-index: 1;
	border-radius: 0.5em;
	border: solid 1px #FFF;
	opacity: 1;
	transition: all 0.3s;
}

#fullSummary_container.hidden #fullSummary {
	top: 60px;
	pointer-events: none;
}

#fullSummary__header {

}

#fullSummary__header:after {
	display: block;
	content: "";
	width: 100%;
	height: 1px;
	background: #AAA;
	margin-top: 0.5em;
}

#fullSummary__body_refs:before {
	display: block;
	content: "";
	width: 100%;
	height: 1px;
	background: #AAA;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
}

#fullSummary h4 {
	margin: 0;
	font-weight: 500;
}

#fullSummary__eventTitle {
	line-height: 1.2em;
}

#fullSummary__body {
	max-height: 50vh;
	overflow-y: auto;
	padding-top: 1em;
	padding-right: 8px;
}

#fullSummary__body::-webkit-scrollbar {
	background-color: #0b1823;
	width: 6px;
}

#fullSummary__body::-webkit-scrollbar-thumb {
	background-color: #FFF;
	border-radius: 6px;
}

#fullSummary__body_image {
	height: 50px;
	border: solid 1px #CCC;
	padding: 10% 0;
	margin-bottom: 1em;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: 50%;
}

#fullSummary__body_text {
	font-size: 0.8rem;
}

#fullSummary__body_text p {
	font-size: 0.8rem;
	margin-bottom: 1em;
}

#fullSummary__body_text p:last-of-type {
	margin-bottom: 0;
}

#fullSummary__body_text p strong {
	color: #a2edff;
}

#fullSummary__body_text figure {
	max-width: 100%;
	margin: 0 auto 1em;
}

@media screen and (min-width: 600px) {
	#fullSummary__body_text figure {
		max-width: 80%;
	}
}

#fullSummary__body_text figure img {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

#fullSummary__body_text figure figcaption {
	color: #AAA;
	font-size: 0.85em;
	font-style: italic;
}

#fullSummary__body_text img {
	max-width: 80%;
	margin: 0 auto 1em;
	display: block;
	border: solid 1px #888;
}

#fullSummary__close {
	width: 2em;
	height: 2em;
	position: absolute;
	top: -0.7em;
	right: -0.7em;
	border: solid 1px #FFF;
	background: #0b1823;
	border-radius: 50%;
	font-weight: 900;
	cursor: pointer;
	text-align: center;
	line-height: 1em;
	padding-top: 0.4em;
}

#fullSummary__citation {
	margin: 1em 0 0 0;
	font-size: 0.6em;
	text-align: right;
}

#fullSummary__citation:before {
	content: "- via ";
}

#shadowbox_bg {
	position: fixed;
	opacity: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.7);
	transition: opacity 0.3s;
}

#shadowbox_bg.hidden {
	opacity: 0;
	pointer-events: none;
}