/* Topic header ------------------------------------------------------------ */

i {
	margin: 5px;
	vertical-align: baseline;
	text-align: center;
}

.section_header {
	display: inline-block;
	font: 400 17px 'Roboto', sans-serif;
	text-transform: uppercase;
	color: #FF6600;
	position: relative;
	z-index: 0;
	background: #2f2f2f;
	padding: 17px;
	margin-bottom: 5px;
	width: auto;
}

.section_header span {
	font: 1000 17px 'Roboto', sans-serif;
}

.section_header:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: #2f2f2f;
	z-index: -1;
	display: none;
}

.section_header:before {
	position: absolute;
	content: '';
	top: 0;
	right: -17px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 55px 17px 0 0;
	border-color: #2f2f2f transparent transparent transparent;
}


/* Topic source and date -------------------------------------------------- */

.topic_source {
	position: relative;
	display: inline-block;
	font: 700 17px 'Roboto', sans-serif;
	text-align: right;
	border-radius: 10px 0 0 10px;
	vertical-align: middle;
	width: auto;
	line-height: 25px;
	float: right;
	padding: 5px 5px 5px 15px;
	margin-bottom: 7px;
	color: #fff;
	background: #333;
}

.topic_source:hover {
	color: var(--main-color);
}

.topic_date {
	position: relative;
	display: inline-block;
	font: 300 17px 'Raleway', sans-serif;
	text-align: left;
	border-radius: 0 10px 10px 0;
	vertical-align: middle;
	width: auto;
	line-height: 25px;
	float: left;
	padding: 5px 15px 5px 5px;
	margin-bottom: 7px;
	color: #FF6600;
	background: #333;
}


/* Box header -------------------------------------------------------------- */

.box_header {
	display: table-cell;
	text-transform: uppercase;
	position: relative;
	z-index: 0;
	color: #2f2f2f;
	background: #fff;
	width: auto !important;
	font: 500 14px 'Roboto', sans-serif;
	padding: 10px;
	height: 16px !important;
	clear: both;
}

.box_header span {
	font: 1000 14px 'Roboto', sans-serif;
}

.box_header:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -1;
	display: none;
	background: #fff;
}

.box_header:before {
	position: absolute;
	content: '';
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #fff transparent transparent transparent;
	border-width: 36px 10px 0 0;
	right: -10px;
}


/* Timeline ---------------------------------------------------------------- */

.timeline {
	position: relative;
	display: block;
	height: auto;
}

.timeline div {
	display: table;
	height: 100%;
	width: 100%;
}

.timeline ul {
	max-height: 500px;
	width: 100%;
	overflow: auto;
}

.timeline ul li {
	border-bottom: 1px solid #ddd !important;
	margin: 5px;
}

.timeline ul li:last-child {
	border-bottom: none !important;
	margin: 5px;
}

.timeline ul li div:first-child {
	font: 15px 'Roboto Light', sans-serif;
	vertical-align: middle;
	padding-left: 10px;
	color: #fff;
	width: unset !important;
	height: 50px !important;
	display: table-cell;
}

.timeline ul li div:last-child {
	font: 14px 'Roboto', sans-serif;
	display: table-cell;
	vertical-align: middle;
	width: 280px !important;
	padding: 9px 0px 10px 10px;
}

@media (max-width: 1250px) {

	.timeline ul {
		max-height: 400px;
	}

	.timeline ul li div:last-child {
		width: 210px !important;
	}

}

@media (max-width: 1000px) {

	.timeline ul {
		height: auto !important;
		max-height: none;
		overflow: hidden !important;
	}

	.timeline ul li div:last-child {
		width: auto !important;
	}

}


/* Headline ---------------------------------------------------------------- */

.headline {
	position: relative;
	display: block;
	min-height: 450px;
}

.headline .image  {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 450px;
	padding-top: 10px;
}

.headline .title {
	bottom: 0px;
	position: absolute;
	display: block;
	width: 100%;
	font: 1000 38px 'Raleway', sans-serif;
	background-color:rgba(0, 0, 0, 0.7);
	color: #fff;
}

.headline .title div:last-of-type {
	padding: 10px !important;
}

.headline .title:hover {
	color: var(--main-color) !important;
	background-color: rgba(0, 0, 0, 0.5);
}

.headline p {
	padding: 10px 10px 10px 0px;
	color: #bbb;
}

@media (max-width: 1250px) {

	.headline .image {
		height: 330px;
	}

	.headline .title {
		font: 1000 30px 'Raleway', sans-serif;
	}

}

@media (max-width: 1000px) {

	.headline {
		min-height: unset;
	}

	.headline .image {
		height: calc(100vw * 0.7);
	}

	.headline .title {
		font: 1000 24px 'Raleway', sans-serif;
	}

	.headline p {
		padding: 10px 5px 10px 5px;
	}


}


/* Primary ----------------------------------------------------------------- */

.article_primary .image {
	padding-top: 10px;
	position: relative;
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 270px;
}

.article_primary .title {
	padding: 10px;
	display: block;
	bottom: 0px;
	position: absolute;
	font: 1000 24px 'Raleway', sans-serif;
	color: #fff;
	background-color:rgba(0, 0, 0, 0.7);
}

.article_primary .title:hover {
	color: var(--main-color);
	background-color: rgba(0, 0, 0, 0.5);
}

.article_primary p {
	padding: 10px 10px 10px 0px;
	color: #bbb;
}

@media (max-width: 1250px) {

	.article_primary .image {
		height: 220px;
	}

}

@media (max-width: 1000px) {

	.article_primary .image {
		height: calc(100vw * 0.6);
	}

	.article_primary p {
		padding: 10px 5px 10px 5px;
		color: #bbb;
	}

}


/* latest grid ------------------------------------------------------------ */

.latest_grid {
	margin-top: 5px;
}

.latest_grid .latest {
	border-top: 2px dotted #333;
	margin-top: 3px;
	padding-top: 5px;
}

.article_latest_section .row:first-child .latest {
	margin-top: unset;
	padding-top: unset;
}

.latest_grid .latest .topic_date, .latest_grid .latest .topic_location {
	display: block;
	font: 700 14px 'Roboto', sans-serif;
	border: unset;
	border-radius: unset;
	width: auto;
	float: unset;
	padding: unset;
	background: unset;
}

.latest_grid .latest .topic_location {
	font: 14px 'Roboto', sans-serif;
	margin-bottom: 5px;
	color: #fff;
}

.latest_grid .latest .topic_source {
	position: relative;
	display: inline-block;
	font: unset;
	border: unset;
	border-radius: unset;
	width: auto;
	line-height: unset;
	padding: unset;
	background: unset;
}

.latest_grid .latest p {
	color: #bbb;
}

.latest_grid .latest .title {
	margin: 10px 0 10px 0;
	display: block;
	bottom: 0px;
	font: 1000 18px 'Raleway', sans-serif;
	color: #fff;
}

.latest_grid .latest .title:hover {
	color: var(--main-color);
}

@media (max-width: 1000px) {

	.latest_grid {
		padding: 0 10px 0 10px;
	}

	.article_latest_section .row:first-child .latest {
		border-top: 2px dotted #333;
		margin-top: 3px;
		padding-top: 5px;
	}

	.article_latest_section .row:first-child .latest:first-child {
		border: none;
		margin-top: unset;
		padding-top: unset;
	}

}


/* Older ------------------------------------------------------------------ */

.article_older_section {
	position: relative;
	display: block;
	height: auto;
}

.article_older_section>ul>li {
	border-bottom: 1px solid #ddd !important;
	margin: 10px 0 10px 0;
	font: 16px 'Roboto', sans-serif;
	display: block;
}

.article_older_section>ul>li:last-child {
	border-bottom: none !important;
}

.article_older_section>ul>li>div:first-of-type>i {
	margin-left: 0px;
}


.article_older_section>ul>li>div:first-of-type {
	font: 700 14px 'Roboto', sans-serif;
	color: #FF6600;
	display: block;
	vertical-align: middle;
	padding: unset;
}

.article_older_section>ul>li>div:first-of-type>span {
	display: inline-block;
	float: right;
	color: #fff;
}

.article_older_section>ul>li>div {
	padding: 10px 0 10px 0;
	font: 1000 18px 'Raleway', sans-serif;
	color: #fff;
}

.article_older_section ul li div:last-of-type {
	padding: 0 0 10px 0;
	font: 400 18px 'Raleway', sans-serif;
	color: #fff;
}

@media (max-width: 1000px) {


	.article_older_section>ul {
		padding: 0 10px 0 10px;
	}

}


/* Article ----------------------------------------------------------------- */

.page {
	position: relative;
	display: block;
	min-height: calc(100vh - 450px)
}

.page .title {
	display: block;
	margin: 10px 0 20px 0;
	width: 100%;
	font: 1000 45px 'Raleway', sans-serif;
	color: #fff;
}

.page .description {
	font: 25px 'Raleway', sans-serif;
	border: 1px solid #333;
	padding: 20px;
}

.page .description p {
	padding: 0 0 20px 0;
}

.page .description p:last-of-type {
	padding: 0;
}

.article {
	position: relative;
	display: block;
	min-height: 400px;
}

.article .title {
	display: block;
	margin: 10px 0 20px 0;
	width: 100%;
	font: 1000 45px 'Raleway', sans-serif;
	color: #fff;
}

.article .image img {
	width: 100%;
}

.article .video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}

.article .video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.article .date {
	font: 400 30px 'Raleway', sans-serif;
	background: #999;
	padding: 10px;
	margin-bottom: 10px;
	color: #333;
	text-align: left;
}

.article .date span:nth-of-type(1){
	font-weight: 1000;
}

.article .date span:nth-of-type(2){
	font-weight: 1000;
	color: #fff;
}

.article .description {
	font: 25px 'Raleway', sans-serif;
	border: 3px dotted #333;
	padding: 20px;
}

.article .description .tags {
	font: 1000 30px 'Raleway', sans-serif;
	padding: 20px 0 5px 0;
}

.article .description p {
	padding: 0 0 20px 0;
}

.article .description p:last-of-type {
	padding: 0;
}

.article .footer {
	background: #bbb;
	padding: 10px;
	margin-top: 10px;
	color: #333;
	font: 400 30px 'Raleway', sans-serif;
}

.article .footer .source {
	float: right;
}

.article .footer :hover {
	color: #fff;
}

.article .footer span {
	font-weight: 1000;
}

@media (max-width: 1250px) {

	.page {
		min-height: calc(100vh - 410px);
	}

}

@media (max-width: 1000px) {

	.page {
		min-height: unset;
	}

	.page .title {
		display: block;
		margin: 5px 10px 20px 10px;
		width: auto;
		font: 1000 25px 'Raleway', sans-serif;
		color: #fff;
	}

	.page .description {
		font: 18px 'Raleway', sans-serif;
		border: none;
		padding: 10px;
	}

	.page .description p {
		padding: 0 0 10px 0;
	}

	.article .title {
		display: block;
		margin: 5px 10px 20px 10px;
		width: auto;
		font: 1000 25px 'Raleway', sans-serif;
		color: #fff;
	}

	.article .date {
		font: 1000 20px 'Raleway', sans-serif;
	}

	.article .footer {
		font: 400 16px 'Raleway', sans-serif;
	}

	.article .footer i {
		display: unset;
	}

	.article .description .tags {
		font: 1000 20px 'Raleway', sans-serif;
	}

	.article .description {
		font: 18px 'Raleway', sans-serif;
		border: none;
		padding: 10px;
	}

	.article .description p {
		padding: 0 0 10px 0;
	}

}


/* Event highlight grid ---------------------------------------------------- */

.event_grid {

}

.event_grid .event {
	display: table;
	padding: 10px 0px 10px 0;
	font: 15px 'Roboto Light', sans-serif;
}

.event_grid .event .date {
	display: table-cell;
	width: auto;
	text-align: center;
	padding: 0 20px 0 10px;
	color: #FF6600;
	font: 1000 30px 'Raleway', sans-serif;
}

.event_grid .event .date span:first-child {
	font: 1000 40px 'Raleway', sans-serif;
}

.event_grid .event .date span:last-child {
	font: 1000 25px 'Raleway', sans-serif;
}

.event_grid .event .date span:first-child:after,
.event_grid .event .date span:last-child:before {
	content: "\A";
	white-space: pre;
}

.event_grid .event .title {

	font: 1000 20px 'Roboto', sans-serif;
	padding-bottom: 5px;
	color: #FF6600;
	padding-right: 10px;

}

.event_grid .event .location {

	font: 1000 15px 'Roboto', sans-serif;
	padding-bottom: 5px;
	color: #fff;
	padding-right: 10px;

}

.event_grid .event .description {
	padding-right: 10px;
}


/* YouTube grid ------------------------------------------------------------ */

.video_grid {
	width: 100%;
	display: block;
}

.youtube {
	width: auto;
	height: auto;
	display: inline-block;
	position: relative;
	margin: auto auto;
	text-align: center;
	padding-top: 10px;
}

.youtube .media i {
	color: #fff;
}

.youtube .media {
	position: relative;
	text-align: right;
	--media-width: 220px;
	height: calc(var(--media-width) * 0.5);
	margin: auto auto;
	border: 0px;
	border-radius: 7px;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	color: #333;
	font-size: 20px;
}

.youtube .media {
	width: var(--media-width);
}

.youtube .source {
	position: relative;
	display: inline-block;
	font: 700 14px 'Roboto', sans-serif;
	text-align: right;
	border-radius: 7px 0 0 7px;
	display: inline-block;
	line-height: 25px;
	width: 220px;
	margin-bottom: 7px;
	color: #fff;
}

.youtube .source:hover {
	color: var(--main-color);
}

.youtube .title {
	font: 15px 'Roboto Light', sans-serif;
	text-align: left;
	display: inline-block;
	width: 220px;
	padding: 10px 10px 10px 10px;
}

.youtube a:hover .media {
	opacity: 0.5;
}

@media (max-width: 1250px) {

	.youtube .media {
		--media-width: 180px;
	}

	.youtube .source {
		width: 180px;
	}

	.youtube .title {
		width: 180px;
	}

}

@media (max-width: 1000px) {

	.youtube {
		left: 0;
		padding-top: 10px;
	}

	.youtube .source {
		width: calc(100vw * 0.8);
	}

	.youtube .media {
		--media-width: calc(100vw * 0.8);
	}

	.youtube .title {
		width: calc(100vw * 0.8);

	}

}

@media (max-width: 400px) {

	.youtube .source {
		width: 300px;
	}

	.youtube .media {
		width: 300px;
		height: 165px;
	}

	.youtube .title {
		width: 300px;

	}

}


/* Event page -------------------------------------------------------------- */

.searchhits {
	position: relative;
	display: block;
	min-height: calc(100vh - 490px);
	border: none !important;
}

.morehits {
	text-align: center;
	padding-top: 20px;
}

.searchform {
	margin-top: 10px !important;
}

.datefield {
	font: 1000 25px 'Raleway', sans-serif;
}

.datefield:first-of-type {
	text-align: right;
}

.datefield:last-of-type {
	text-align: left;
}

.searchfield {
	text-align: right;
	font: 1000 25px 'Raleway', sans-serif;
}

.datepicker {
	font: 1000 30px 'Raleway', sans-serif;
	width: 160px;
}

.textinput {
	width: 250px;
}

.datefield .label,.searchfield .label {
	display: inline-block;
	padding-right: 10px;
	vertical-align: baseline;
}

.buttonfield {
	display: inline-block;
	text-align: left;
	width: auto;
	font: 1000 20px 'Raleway', sans-serif;
}

.buttonfield button {
	top: -2px;
}

@media (max-width: 1250px) {

	.searchform {
		margin-top: unset !important;
	}

	.datefield,.searchfield {
		font: 1000 20px 'Raleway', sans-serif;
		padding-top: 10px;
	}

	.datepicker {
		font: 1000 20px 'Raleway', sans-serif;
		width: 110px;
	}

	.textinput {
		font: 1000 20px 'Raleway', sans-serif;
		width: 200px;
	}

	.buttonfield {
		padding-top: 10px;
		font: 1000 15px 'Raleway', sans-serif;
	}

}

@media (max-width: 1000px) {

	.searchhits {
		position: relative;
		display: block;
		min-height: unset;
	}

	.datefield .label {
		width: 120px;
	}

	.datefield {
		text-align: center !important;
	}

	.buttonfield {
		text-align: center;
	}

	.searchfield {
		text-align: center;
	}

}