/* FONTS */

@import 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';

@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP200.woff') format('woff'), url('../fonts/ASSP200.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP200I.woff') format('woff'), url('../fonts/ASSP200I.ttf') format('truetype');
	font-weight: 200;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP300.woff') format('woff'), url('../fonts/ASSP300.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP300I.woff') format('woff'), url('../fonts/ASSP300I.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP400.woff') format('woff'), url('../fonts/ASSP400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP400I.woff') format('woff'), url('../fonts/ASSP400I.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP600.woff') format('woff'), url('../fonts/ASSP600.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP600I.woff') format('woff'), url('../fonts/ASSP600I.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP700.woff') format('woff'), url('../fonts/ASSP700.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP700I.woff') format('woff'), url('../fonts/ASSP700I.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP900.woff') format('woff'), url('../fonts/ASSP900.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'ASSP';
	src: url('../fonts/ASSP900I.woff') format('woff'), url('../fonts/ASSP900I.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL100.woff') format('woff'), url('../fonts/AL100.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL100I.woff') format('woff'), url('../fonts/AL100I.ttf') format('truetype');
	font-weight: 100;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL300.woff') format('woff'), url('../fonts/AL300.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL300I.woff') format('woff'), url('../fonts/AL300I.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL400.woff') format('woff'), url('../fonts/AL400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL400I.woff') format('woff'), url('../fonts/AL400I.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL700.woff') format('woff'), url('../fonts/AL700.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL700I.woff') format('woff'), url('../fonts/AL700I.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL800.woff') format('woff'), url('../fonts/AL800.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}

@font-face {
	font-family: 'AL';
	src: url('../fonts/AL800I.woff') format('woff'), url('../fonts/AL800I.ttf') format('truetype');
	font-weight: 800;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL900.woff') format('woff'), url('../fonts/AL900.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}
@font-face {
	font-family: 'AL';
	src: url('../fonts/AL900I.woff') format('woff'), url('../fonts/AL900I.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
	font-stretch: normal;
	unicode-range: U+0008-25CA;
}

/**
 * Article intro
 */

.article {
	box-sizing: border-box;
}

	.article * {
		box-sizing: inherit;
	}

	.article a:hover {
		border: 0 !important;
	}

.article-header {
	color: #48683e;
	clear: both;
	float: left;
	font-size: 18px;
	width: 100%;
}

	@media(min-width: 900px) {
		.article-header {
			margin-bottom: 30px;
		}
	}

	.article-header-tags,
	.article-header-reading-time,
	.article-header-time-ago {
		float: left;
		margin-right: 10px;
		width: auto;
	}

	@media(min-width: 900px) {
		.article-header-tags,
		.article-header-reading-time,
		.article-header-time-ago {
			margin-right: 20px;
		}
	}

	/* tags */

	.article-header-tags a {
		background-color: #47673d;
		border: none !important;
		color: #fff;
		float: left;
		font-family: 'ASSP', serif;
		font-weight: 400 !important;
		margin: 0 10px 10px 0;
		padding: 10px 20px;
		text-transform: lowercase;
	}

		.article-header-tags a:hover {
			background-color: #57b25b;
		}

		.article-header-tags a:last-of-type {
			margin-right: 0;
		}

	.article-header-time-ago,
	.article-header-reading-time {
		font-style: italic;
		margin-top: 10px;
		line-height: 32px; /* same height as tags */
	}

	@media(min-width: 900px) {
		.article-header-time-ago,
		.article-header-reading-time {
			line-height: 42px; /* same height as tags */
		}
	}

	/* reading time */

	.article-header-reading-time {
		clear: left;
		color: #999;
	}

	/* time ago */

	.article-header-time-ago:before {
		background-color: #999;
		content: '';
		float: left;
		height: 32px;
		margin-right: 10px;
		width: 1px;
	}

	@media(min-width: 900px) {
		.article-header-time-ago:before {
			margin-right: 20px;
			height: 42px; /* same height as tags */
		}
	}
	
/**
 * Article
 */

.article {
	clear: both;
	color: #000;
	float: left;
	width: 100%;
}
	
	/* full width text-elements */
	
	.article-box,
	.article-credits,
	.article-header,
	.article-heading,
	.article-intro,
	.article-heading,
	.article-chapeau,
	.article-big-photo,
	.article-small-photo,
	.article-streamer-small,
	.article-streamer-big,
	.article-text {
		font-family: 'AL', serif;
		float: left;
		margin-bottom: 15px;
		width: 100%;
	}

		@media(min-width: 900px) {
			.article-box,
			.article-credits,
			.article-header,
			.article-heading,
			.article-intro,
			.article-heading,
			.article-chapeau,
			.article-big-photo,
			.article-small-photo,
			.article-streamer-small,
			.article-streamer-big,
			.article-text {
				margin-bottom: 30px;
			}
		}

	/* text elements with green color */

	.article-heading,
	.article-chapeau,
	.article-streamer-small,
	.article-streamer-big {
		color: #45663c;
	}
	
	/* photo blocks */
	
	.article-small-photo,
	.article-big-photo {
		color: #8ea79c;
		font-family: 'ASSP', sans-serif;
		font-size: 14px;
		font-weight: 700;
		position: relative;
	}
		
		.article-small-photo a,
		.article-big-photo a {
			color: inherit;
			text-decoration: underline;
		}

		.article-small-photo img,
		.article-big-photo img {
			display: block;
			margin-bottom: 15px;
			max-width: 100%;
		}

			@media(min-width: 900px) {
				.article-small-photo img,
				.article-big-photo img {
					margin-bottom: 0;
				}
			}

		/* style credits */

		.article-photo-photographer {
			margin-bottom: 10px;
		}

		@media(min-width: 900px) {
			.article-photo-description {
				margin-top: 10px;
			}

			.article-photo-photographer {
				text-align: right;
			}
		}

	/* small photo */
	
	@media(min-width: 900px) {
		.article-small-photo {
			padding-right: 30px;
			width: 50%;
		}
	}

		/* small photo's inside wrapper (as seen on koersplatform pages) */

		@media(min-width: 900px) {
			.article-small-photo {
				margin-bottom: 30px;
			}

			.article-small-photo:first-of-type {
				padding-right: 30px;
			}

			.article-small-photo:last-of-type {
				padding-left: 30px;
				padding-right: 0;
			}
		}

		/* slightly different offset small image when in streamer */
		
		@media(min-width: 900px) {
			.article-streamer-small-wrap .article-small-photo {
				padding-right: 0;
				transform: translateX(-30px);
			}

			.article-streamer-small-wrap .article-small-photo img {
				max-width: calc(100% + 15px);
			}

			.article-streamer-small-wrap .article-photo-description {
				margin-left: 30px;
			}
		}

	/* header */

	.article-header {
		font-size: 14px;
	}

		@media(min-width: 900px) {
			.article-header {
				font-size: 18px;
			}
		}

	/* intro */
	
	.article-intro {
		font-size: 20px;
		line-height: 1.35em;
	}

		@media(min-width: 900px) {
			.article-intro {
				font-size: 34px;
				width: 60%;
			}
		}

	/* heading */

	.article-heading {
		font-style: italic;
		font-weight: 600;
	}

	/* float (hoofdkop 1) */

	.article-heading-float {
		font-size: 21px;
		font-style: italic;
		font-weight: 600;
		line-height: 1.5em;
	}

		@media(min-width: 900px) {
			.article-heading-float {
				font-size: 42px;
				line-height: 1.25em;
				padding-left: 30%;
			}
		}

		@media(min-width: 1200px) {
			.article-heading-float {
				font-size: 84px;
				line-height: 1em;
			}
		}

	/* big (hoofdkop 2) */

	.article-heading-big {
		font-size: 28px;
		font-style: italic;
		font-weight: 600;
		line-height: 1.5em;
	}

		@media(min-width: 900px) {
			.article-heading-big {
				font-size: 56px;
				line-height: 1.25em;
			}
		}

		@media(min-width: 1200px) {
			.article-heading-big {
				font-size: 115px;
				line-height: 1em;
			}
		}

	/* chapeau */

	.article-chapeau {
		font-size: 20px;
		font-weight: 700;
		line-height: 1.35em;
	}

		@media(min-width: 900px) {
			.article-chapeau {
				float: right;
				font-size: 30px;
				width: 60%;
			}
		}

	/* text */

	.article-text {
		font-size: 16px;
	}

		@media(min-width: 900px) {
			.article-text {
				font-size: 22px;
				padding-left: 30%;
				width: 100%;
			}
		}

		.article h1,
		.article h2, 
		.article h3, 
		.article h4 {
			color: #000;
			font-size: 20px;
			font-weight: 700;
			margin-bottom: 5px;
		}

		@media(min-width: 900px) {
			.article h1,
			.article h2, 
			.article h3, 
			.article h4 {
				font-size: 24px;
			}
		}

		.article p, 
		.article ul,
		.article ol {
			margin-bottom: 30px;
		}

		.article li,
		.article p {
			line-height: 1.5em;
		}

		.article p:last-of-type {
			margin-bottom: 0;
		}

		/* article text intro */

		.article-text-intro {
			font-weight: 700;
		}

			.article-text-intro strong {
				font-weight: 900;
			}

	/* infocard */

	.article-infocard {
		display: inline-block;
		height: 10px;
		width: 20px;
	}

		/* button (hexagon) */

		.article-infocard-button {
			background-color: #dbe8bc;
			display: inline-block;
			cursor: pointer;
			height: 12px;
			position: relative;
			margin-right: 5px;
			width: 20px;
		}

			.article-infocard-button:before {
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 5px solid #dbe8bc;
				content: '';
				height: 0;
				left: 0;
				position: absolute;
				top: -5px;
				width: 0;
			}

			.article-infocard-button:after {
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-top: 5px solid #dbe8bc;
				bottom: -5px;
				content: '';
				height: 0;
				left: 0;
				position: absolute;
				width: 0;
				-webkit-transition: height 0.15s;
				transition: height 0.15s;
			}

		/* bar */

		.article-infocard-button-inner:after {
			background-color: #dbe8bc;
			content: '';
			display: block;
			height: 0;
			width: 20px;
			z-index: 1;
		}

		.opened .article-infocard-button-inner:after {
			height: 40px;
		}

		/* directional glyph */

		.article-infocard-button-inner:before {
			color: #48683e;
			content: '\f077';
			font-family: FontAwesome;
			font-size: 12px;
			left: 4px;
			line-height: 13px;
			position: absolute;
			transform: rotate(180deg);
			transition: transform 0.3s;
			z-index: 1;
		}

		.opened .article-infocard-button-inner:before {
			transform: rotate(0);
		}

		/* popout */

		.article-infocard-popout {
			background-color: #dbe8bc;
			display: none;
			float: left;
			font-style: italic;
			left: 0;
			padding: 30px;
			pointer-events: none;
			position: absolute;
			transform: translateY(20px);
			width: 100%;
			z-index: 10;
		}

		@media(min-width: 900px) {
			.article-infocard-popout {
				left: 30%;
				width: 70%;
			}
		}

	/* article link */

	.article-link {
		color: #57b25b;
		display: block;
		font-size: 14px;
		line-height: 1.5em;
		margin-bottom: 30px;
		position: relative;
		transition: none !important;
	}

		@media(min-width: 900px) {
			.article-link {
				left: 0;
				margin-top: -40px;
				position: absolute;
				width: 25%;
			}
		}

		.article-link:hover {
			color: #47673d;
		}

		/* icons */

		.article-link.heart:before,
		.article-link.book:before,
		.article-link.globe:before {
			background-size: contain;
			background-position: top left;
			background-repeat: no-repeat;
			content: '';
			display: block;
			height: 30px;
			width: 30px;
		}

			/* heart */

			.article-link.heart:before {
				background-image: url('../image/web/heart@2x.png');
			}

				.article-link.heart:hover:before {
					background-image: url('../image/web/heart-hover@2x.png');
				}

			/* book */

			.article-link.book:before {
				background-image: url('../image/web/book@2x.png');
			}

				.article-link.book:hover:before {
					background-image: url('../image/web/book-hover@2x.png');
				}

			/* globe */

			.article-link.globe:before {
				background-image: url('../image/web/globe@2x.png');
			}

				.article-link.globe:hover:before {
					background-image: url('../image/web/globe-hover@2x.png');
				}
	
	/* streamer */

	.article-streamer-small,
	.article-streamer-big {
		font-style: italic;
	}

		/* streamer small */

		.article-streamer-small {
			font-size: 24px;
			line-height: 1.35em;
		}

		@media(min-width: 900px) {
			.article-streamer-small {
				font-size: 28px;
				padding: 10% 0 0 30px;
				width: 50%;
			}

			.no-image .article-streamer-small {
				padding-top: 0;
			}
		}

		@media(min-width: 1100px) {
			.article-streamer-small {
				font-size: 38px;
			}		
		}

		/* streamer big */

		.article-streamer-big {
			font-size: 24px;
			line-height: 1.35em;
		}

			@media(min-width: 900px) {
				.article-streamer-big {
					font-size: 55px;
					width: 70%;
				}
			}

	/* article streamer small wrap */

	.article-streamer-small-wrap {
		float: left;
		clear: both;
		position: relative; /* <- needed for alignment streamer */
		width: 100%;
	}

	/* article box wrap */
	
	@media(min-width: 900px) {
		.article-box-wrap {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}
	}

	/* article box */

	.article-box {
		background-color: #ebf2da; 
		border-top: 2px solid #45663c;
		color: #45663c;
		padding: 30px;
	}

		.article-box h1, 
		.article-box h2, 
		.article-box h3, 
		.article-box h4 {
			color: inherit;
			font-size: 18px;
			font-weight: 700;
			margin-bottom: 15px;
		}

		.article-box p {
			color: inherit;
			font-size: 16px;
			margin-bottom: 15px;
		}

			.aticle-box p:last-of-type {
				margin-bottom: 0;
			}

		@media(min-width: 900px) {
			.article-box {
				margin-right: 30px;
				width: calc(50% - 15px);
			}

			.article-box + .article-box {
				margin-right: 0;
			}
		}

	/* credits */

	.article-credits {
		color: #7b4f95;
		font-family: 'ASSP', serif;
		line-height: 1.5em;
	}

		.article-credits a {
			color: #7b4f95;
		}

	@media(min-width: 900px) {
		.article-credits {
			padding-left: 30%;
			width: 100%;
		}
	}

/**
 * Overview
 */

.article-box-magazine {
	float: left;
	margin-bottom: 15px;
	width: 100%;
}

.article-box-magazine .box-magazine-image {
	display: none;
}

@media(min-width: 600px) {
	.article-box-magazine .box-magazine-image {
		display: block;
    	max-height: 205px;
    	max-width: 50%;
	}
}

/**
 * Article legend
 */

.article-legend {
	background-color: #48683e;
	color: #fff;
	height: auto;
	min-height: 210px;
	padding: 10px 5px;
	position: absolute;
	right: -40px;
	width: 40px;
}

	.article-legend ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.article-legend li {
		display: block;
		text-align: center;
	}

	.article-legend-location-internal:before,
	.article-legend-location-external:before,
	.article-legend-required:before,
	.article-legend-not-required:before,
	.article-legend-visible:before,
	.article-legend-invisible:before {
		font-family: FontAwesome;
		display: inline-block;
	}

	.article-legend-location-internal:before {
		content: '\f14c';
		transform: rotate(90deg);
	}

	.article-legend-location-external:before {
		content: '\f08e';
	}

	.article-legend-not-required:before {
		content: '\f09c';
	}

	.article-legend-required:before {
		content: '\f023';
	}

	.article-legend-invisible:before {
		content: '\f070';
	}

	.article-legend-visible:before {
		content: '\f06e';
	}

	.article-legend-intro-correct,
	.article-legend-intro-incorrect {
		font-size: 12px;
		font-weight: 700;
		line-height: 20px;
	}

	.article-legend-intro-incorrect {
		color: #8a1414;
	}