/* === Global Reset & Font Rendering === */
*, ::before, ::after {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	max-width: 100% !important;
	box-sizing: border-box !important;
	scroll-behavior: smooth;
}

/* === Font Embeds === */
@font-face {
	font-family: 'Georgia';
	src: url('fon/Georgia/georgia.woff') format('woff'),
		 url('fon/Georgia/georgia.ttf') format('truetype');
}

@font-face {
	font-family: 'CenturySchoolbook';
	src: url('fon/CenturySchoolbook/CENSCBK.woff') format('woff'),
		 url('fon/CenturySchoolbook/CENSCBK.ttf') format('truetype');
}

@font-face {
	font-family: 'CenturySchoolbookItalic';
	src: url('fon/CenturySchoolbook/SCHLBKI.woff') format('woff'),
		 url('fon/CenturySchoolbook/SCHLBKI.ttf') format('truetype');
}

@font-face {
	font-family: 'CenturySchoolbookBold';
	src: url('fon/CenturySchoolbook/SCHLBKB.woff') format('woff'),
		 url('fon/CenturySchoolbook/SCHLBKB.ttf') format('truetype');
}

@font-face {
	font-family: 'FranklinBook';
	src: url('fon/FranklinGothicBookRegular/FRABK.woff') format('woff'),
		 url('fon/FranklinGothicBookRegular/FRABK.ttf') format('truetype');
}

@font-face {
	font-family: 'Mignon';
	src: url('fon/Mignon-Medium/Mignon-Medium.woff') format('woff'),
		 url('fon/Mignon-Medium/Mignon-Medium.otf') format('truetype');
}

/* === Global Styling === */
html {
	scroll-behavior: smooth;
}

body {
	margin: 0 !important;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}
body::-webkit-scrollbar {
	display: none;
}

/* === Block & Common Elements === */
header,
footer,
article {
	display: block;
}

div {
	max-width: 100%;
}

button {
	font-family: Georgia Pro Cond Light, georgia, serif;
	background: none;
}

a {
	background-color: transparent;
	text-decoration: none;
}

ul {
	list-style: none;
}

h1, h2, h3, h4 {
	font-weight: 400;
}

p {
	margin: 0;
}

i {
	font-style: normal;
	font-family: CenturySchoolbookItalic;
}

tr {
	position: relative;
}

/* Ornaments */
		.ornament-1 {		
			background-image: url('svg/o1.svg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			padding: 19px 47px 19px 47px;	
			margin: 4px 15px 0 0;
		}
		.ornament-2 {
			background-image: url('svg/o2.svg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			padding: 19px 47px 19px 47px;	
			margin: 4px 0 0 15px;
		}
	@media only screen and (min-width: 600.1px) and (max-width: 767.9px), (min-width: 768px) and (max-width: 992px) {
		.ornament-1, .ornament-2 {		
			padding: 10px 35px 10px 35px;	
		}
	}
	@media only screen and (max-width: 600px) {
		.ornament-1, .ornament-2 {
			display: none !important;
		}			
	}
		.ornament-3 {
			background-image: url('svg/o1.svg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			padding: 11px 27px;
		}
		.ornament-4 {
			background-image: url('svg/o2.svg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			padding: 11px 27px;
		}
		.hoverknot {
			height: 7px;
			width: 6px;
			display: inline-block;
			background-image: url('svg/hoverknot.svg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			opacity: 0;					
			margin: 0 7px 1px 7px;
		}
			.knot-transition {
				-webkit-transition: all 0.1s ease-in-out;
				-moz-transition: all 0.1s ease-in-out;
				-o-transition: all 0.1s ease-in-out;
				transition: all 0.1s ease-in-out;
			}
		.download {
			display: inline-block;
			background-image: url('svg/download.svg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			padding: 15px 15px 0 0;
		}
		.arrow-white {
			display: inline-block;		
			background-image: url('svg/arrowW_down.svg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			padding: 20px 20px 0 0;
			margin: 0 auto 0 auto;
		}	
			.arrow-white:hover {	
				opacity: 0.8;
			}
		.triangle1 {
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 105px 160px 0 160px;
			border-color: #fcfbf9 transparent transparent transparent;
			float: none;
			margin: auto;
			color: #000;
			transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-o-transform: rotate(360deg);
		}
		.triangle2 {
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 105px 160px 0 160px;
			border-color: rgba(46, 47, 40, 1) transparent transparent transparent;
			float: none;
			margin: auto;
			transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-o-transform: rotate(360deg);
		}
		
		
	/* Front header */	
	.front-header {
		padding: 15vw 16vw 30vw 16vw;
		background-image: url('afb/frontR.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;			
	}
@media only screen and (min-width: 600.1px) and (max-width: 767.9px) {
	.front-header {
		padding: 15vw 16vw 30vw 12vw;		
	}
}
@media only screen and (max-width: 600px) {	
	.front-header {
		padding: 100vw 16vw 63.8vw 16vw;
		background-image: url('afb/front_M.jpg');		
	}
}	
		.site-title {
			line-height: 36px;
		}	
			.site-title a {
				font-family: Georgia;
				font-size: 70px;
				letter-spacing: 3px;	
				-webkit-transition: all 0.5s ease;
				-moz-transition: all 0.5s ease;
				-o-transition: all 0.5s ease;
				transition: all 0.5s ease;					
			}			
				.site-title a:hover {
					letter-spacing: 3.5px;							
				}
	@media only screen and (min-width: 992.1px) and (max-width: 1199.9px) {
		.site-title {
			line-height: 45px;
			margin: 0;
		}	
			.site-title a {
				font-size: 56px;
				letter-spacing: 2.6px;				
			}	
	}
	@media only screen and (min-width: 768px) and (max-width: 992px) {
		.site-title {
			line-height: 45px;
		}	
			.site-title a {
				font-size: 50px;
				letter-spacing: 3px;				
			}			
	}
	@media only screen and (min-width: 600.1px) and (max-width: 767.9px) {
		.site-title {
			line-height: 45px;
			margin: 0;
		}	
			.site-title a {
				font-size: 42px;
				letter-spacing: 1.5px;				
			}
	}
	@media only screen and (max-width: 600px) {		
		.site-title {
			line-height: 45px;
			margin: 0;
		}			
			.site-title a {
				font-size: 40px;
				letter-spacing: 1px;							
			}
				.site-title a:hover {
					letter-spacing: 1px;							
				}
	}		
		.Hanno {
			/* color: #000; */
			color: #fff;
		}					
		.Egger {
			/* color: #79786f; */
			color: #ccc;
		}
		.undertitle {
			position: relative;			
			font-family: CenturySchoolbookItalic;
			font-size: 24px;
			font-weight: 500;
			text-align: left;
			letter-spacing: 2px;
			color: #fff;
			padding: 0 0 0 2px;
			margin: 5px auto 0 auto;
		}
	@media only screen and (min-width: 992.1px) and (max-width: 1199.9px) {
		.undertitle {
			font-size: 20px;
		}
	}
	@media only screen and (min-width: 768px) and (max-width: 992px) {
		.undertitle {
			font-size: 17px;
		}
	}
	@media only screen and (min-width: 600.1px) and (max-width: 767.9px) {
		.undertitle {
			font-size: 15px;
		}
	}
	@media only screen and (max-width: 600px) {
		.undertitle {
			font-size: 14px;
		}
	}
			
	/* Longbow */	
	.longbow {
		padding: 0 0 0 10px;
		margin: 85px auto 0 auto;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	@media only screen and (min-width: 768px) and (max-width: 992px) {
		.longbow {
			margin: 41px auto 0 auto;
		}
	}
	@media only screen and (max-width: 600px) {
		.longbow {
			padding: 0 0 0 7px;
			margin: 40px auto 0 auto;
		}
	}
	
.site_content {
	position: relative;
	background-image: url('afb/Hanno-14-VIERKANT.jpg');
	background-color: rgba(252,251,249,0.96);
	background-blend-mode: lighten;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-position: top center;
	background-attachment: fixed;
}	
	
	/* Navigation bar */
@media only screen and (min-width: 1200px), (min-width: 768px) and (max-width: 992px), (min-width: 600.1px) and (max-width: 767.9px), (min-width: 992.1px) and (max-width: 1199.9px) {
	.dropdown {
		display: none;
	}
}
@media only screen and (max-width: 600px) {
	.dropdown {
		position: sticky;
		float: right;
		background-image: url('svg/menu2.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-color: transparent;
		border: none;
		padding: 24px 22px 0 0;
		margin: 20px 10px 0 0;
		z-index: 210;
	}
		.dropdown:hover {
			opacity: 0.7;
			cursor: pointer;
		}
}	
	.navbar {
		position: fixed;
		top: 0;
		display: inline-block;
		float: none !important;
		z-index: 206;
		background-image: linear-gradient(to top right, rgba(54, 0, 0), rgba(92, 0, 0));
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
		opacity: 0;
		padding: 11px 0 11px 0;
		margin: 0 auto 0 auto;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}	
@media only screen and (min-width: 768px) and (max-width: 992px) {
	.navbar {
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
		padding: 6px 0 6px 0;
		margin: 0 auto 0 auto;
	}
}
@media only screen and (max-width: 600px) {
	.navbar {
		background-image: none;
		box-shadow: none;
		display: block;
		padding: 0 8px 0 8px;
	}
}	
	.transition {
		-webkit-transition: all 0.7s ease-in-out;
		-moz-transition: all 0.7s ease-in-out;
		-o-transition: all 0.7s ease-in-out;
		transition: all 0.7s ease-in-out;
	}
@media only screen and (max-width: 600px) {
	.transition {
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		transition: none;
	}
}	
	.site-navigation {
		float: none !important;
		line-height: 44px;
		margin: 0 auto 0 auto;
	}		
		.site-navigation ul {
			display: flex;
			justify-content: center;
			padding: 0 !important; 
			margin: 0 auto 0 auto !important;		
		}			
			.site-navigation li {
				position: relative;
				display: inline;
			}				
				.site-navigation a {
					float: none;
					display: inline-block;
					color: #fcfbf9;
					font-size: 22px;
					font-family: Mignon;
					text-align: center;
					text-decoration: none;
					letter-spacing: 2px;
					padding: 0;
				}
				.site-navigation a:hover .hoverknot {
					opacity: 1;
				}
				
			.bioli {
				padding: 0 3px 0 0;
			}
			.musli {
				padding: 0 3px 0 3px;
			}
			.ageli {
				padding: 0 3px 0 3px;
			}
			.galli {
				padding: 0 3px 0 3px;
			}
			.conli {
				padding: 0 0 0 3px;
			}		
@media only screen and (min-width: 768px) and (max-width: 992px) {								
				.site-navigation a {
					font-size: 18.3px;
					font-family: Mignon;
					letter-spacing: 1.7px;
				}	
}	
@media only screen and (max-width: 600px) {	
	.site-navigation {
		display: none;
		line-height: 35px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
		padding: 10px 0 10px 0;
	}	
		.site-navigation ul {
			text-align: center;
			display: block;
			margin: 10px auto 10px auto !important;		
		}
			.site-navigation li {
				display: block;
			}
				.site-navigation a {
					font-size: 17px;
				}					
			.bioli {
				margin-left: 34px;
			}				
}


	.section-head, .section-head-w {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 15px;
		z-index: 200;
	}
	.section-head-w {
		color: rgba(252, 251, 249, 0.8);
	}
		.section-title {
			font-size: 27px;
			line-height: 1;
			letter-spacing: 2.3px;
			text-transform: uppercase;
		}
		.section-ornament {
			font-size: 16px;
		}
		
	.content {
			position: relative;
			overflow: auto;
			text-align: center;	
			margin: 0 auto 0 auto;				
		}			
@media only screen and (max-width: 600px) {			
	.content {	
		margin: 25px 0 0 0;				
	}			
}
	#back-to-the-top {			
		position: fixed;
		bottom: 55px;
		right: 57px;
		z-index: 202;
		display: none;					
		background: none;
		background-image: url('svg/arrowB_up.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 20px 20px 0 0;
	}
@media only screen and (max-width: 600px) {	
	#back-to-the-top {	
		bottom: 20px;
		right: 25px;
	}
}
	
	/* Biography */
	#biography {
		scroll-margin-top: 67px;
	}
@media only screen and (min-width: 768px) and (max-width: 992px) {
	#biography {
		scroll-margin-top: 55px;
	}
}
@media only screen and (max-width: 600px) {
	#biography {
		scroll-margin-top: 0;
	}
}
	.biography {
		position: relative;
		background-color: rgba(252,251,249,1);
		text-align: center;
		font-family: CenturySchoolbook;
		padding: 30px 0 60px 0;
		-webkit-transition: all 0.7s ease-in-out;
		-moz-transition: all 0.7s ease-in-out;
		-o-transition: all 0.7s ease-in-out;
		transition: all 0.7s ease-in-out;
	}	
		.biography .section-head {
			top: 45px;
		}
		.bio-text {
			float: none;
			padding: 80px 200px 0 200px;
			margin: auto;
		}
		.biography p {
			font-size: 18px;
			text-align: justify;
			line-height: 30px;
		}
		.bio-down {
			font-family: FranklinBook;
			font-size: 12px;
			letter-spacing: 1px;
			text-align: left;
			text-transform: uppercase;
			line-height: 25px;
			margin-top: 10px;
		}			
			.bio-down a {
				color: #000000;
			}				
				.bio-down a:hover {
					color: #440000;
				}
@media only screen and (min-width: 992.1px) and (max-width: 1199.9px) {
		.bio-text {
			padding: 80px 45px 0 45px;
		}
		.biography p {
			font-size: 16.8px;
			line-height: 1.7;
		}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {	
		.bio-text {
			padding: 80px 0 0 0;
		}
		.biography p {
			font-size: 16.8px;
			line-height: 1.7;
		}
}
@media only screen and (min-width: 600.1px) and (max-width: 767.9px) {
	.biography {
		padding: 0 0 60px 0;
	}
		.bio-text {
			padding: 110px 25px 0 25px;
		}
		.biography p {
			font-size: 16.4px;
			line-height: 1.7;					
		}
}
@media only screen and (max-width: 600px) {	
	.biography {
		padding: 0 0 60px 0;
	}
		.bio-text {
			padding: 110px 12px 0 12px;
		}
		.biography p {
			font-size: 16.4px;
			line-height: 1.7;					
		}
}		
	
	/* Agenda */
	#agenda {
		scroll-margin-top: 67px;
	}
@media only screen and (min-width: 768px) and (max-width: 992px) {
	#agenda {
		scroll-margin-top: 55px;
	}
}
@media only screen and (max-width: 600px) {
	#agenda {
		scroll-margin-top: 0;
	}
}
	.agenda {
		position: relative;
		display: inline-block;
		float: none !important;	
		text-align: center;
		font-family: CenturySchoolbook;
		padding: 0;
		margin: 0 auto 0 auto;
		-webkit-transition: all 0.7s ease-in-out;
		-moz-transition: all 0.7s ease-in-out;
		-o-transition: all 0.7s ease-in-out;
		transition: all 0.7s ease-in-out;
	}			
	#jan, #feb, #mar, #apr, #may, #jun, #jul, #aug, #sep, #oct, #nov, #dec, #jan1, #feb1, #mar1, #apr1, #may1, #jun1, #jul1, #aug1, #sep1, #oct1, #nov1, #dec1 {
		scroll-margin-top: 67px;
	}
	.navigate {
		position: sticky;
		top: 0;
		display: inline-block;
		z-index: 200;
		margin: 0 auto 0 auto;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
		.agenda-navigation {
			float: none;
			display: flex;
			flex-wrap: wrap;
			column-gap: 20px;
			font-family: CenturySchoolbook;
			font-size: 24px;
			margin: 120px auto 100px auto;
			text-align: left;
			padding-left: 35px;
			border-left: 3px solid #d7d4cb;
		}
				.agenda-navigation span {
					color: #d7d4cb;
					width: 100%;
					flex-shrink: 0;
					margin: 10px 0 0 -18px;
				}
				.agenda-navigation a {
					font-size: 20px;
					color: #d7d4cb;
					text-align: left;
					margin: 3px 0 3px 0;
				}
					.agenda-navigation a:hover {
						color: #7e725a;
					}
	@media only screen and (min-width: 992.1px) and (max-width: 1199.9px) {
		.agenda-navigation {
			width: 25%;
			margin: 100px auto 80px auto;
		}
	}
	@media only screen and (min-width: 768px) and (max-width: 992px) {
		.agenda-navigation {
			width: 31%;
			margin: 100px auto 80px auto;
		}
	}
	@media only screen and (min-width: 600.1px) and (max-width: 767.9px) {	
		.agenda-navigation {
			display: none;
		}
	}
	@media only screen and (max-width: 600px) {
		.agenda-navigation {
			display: none;
		}
			.age-nav {
				display: none;
			}
	}
	/* events */
	.year-wrap {
		position: relative;
	}
	.year {
		position: absolute;
		top: 0;
		text-align: left;
		line-height: 0.7;
		color: #f3f1ee;
		font-size: 17vw;
		/* Improve WebKit behavior */
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		will-change: transform;
		pointer-events: none;
	}
	.month {
		position: relative;
		z-index: 2;
		top: 10px;
		color: #e0ddd7;
		text-align: left;
		font-family: Georgia;
		font-size: 54.3px;
		letter-spacing: 6px;
		padding: 0 55px 0 55px;
	}
@media only screen and (min-width: 768px) and (max-width: 992px) {
	.month {
		color: #ddddd5;
		font-size: 60.6px;
		text-transform: uppercase;
		letter-spacing: 11.1px;
		padding: 0;
	}
}
@media only screen and (max-width: 600px) {	
	.year {
		font-size: 43vw;
	}
	.month {
		top: 9px;
		color: #ddddd5;
		font-size: 40.6px;
		text-transform: uppercase;
		letter-spacing: 7.7px;
		padding: 0 0 0 5px;
	}
}		
		.events {
			position: relative;
			display: inline-block;
			border: none;
			padding: 10px 10px 0 0;
		}
	@media only screen and (min-width: 768px) and (max-width: 992px) {
		.events {
			padding: 20px 0 0 0;
		}
	}	
	@media only screen and (max-width: 600px) {	
		.events {
			padding: 0;
		}
	}	
			.happening {
				position: relative;
				text-align: center;
				padding: 0 0 0 76px;
				margin: 21px 0 29px 0;
				/* background-image: linear-gradient(to right, rgba(253, 253, 253), rgba(252, 251, 249)); */
				-webkit-transition: all 0.3s ease-in-out;
				-moz-transition: all 0.3s ease-in-out;
				-o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
			}
				.hap-text {
					font-family: CenturySchoolbook;
					text-align: left;
					padding-left: 32px;
				}
					.hap-title {
						display: inline-block;
						font-family: CenturySchoolbook;
						color: rgba(44, 31, 0, 0.8);
						font-size: 19.2px;
						letter-spacing: 0.5px;
						line-height: 1.4;
						padding: 0;
					}
						.catch {
							font-family: CenturySchoolbookItalic;
							display:inline-block;
						}
						.composer {
							font-family: CenturySchoolbookBold;
							display: inline-block;
						}	
					.date {
						font-size: 14.2px;
						padding-left: 11px;
					}	
						.date-digit {
							display: inline-block;
							color: rgba(44, 31, 0, 0.85);
							font-size: 39.3px;
							letter-spacing: 1.7px;
							margin-right: 10px;
						}
						.place-time {
							margin: auto;
							color: rgba(44, 31, 0, 0.7);
							display: inline-block;
							font-family: FranklinBook;
							text-transform: uppercase;
							letter-spacing: 1.1px;
							line-height: 1.3;
						}
							.time, .place {
								display: inline-block;
							}
					.add {
						color: rgba(65, 53, 25, 0.9);
						font-size: 16.4px;
						letter-spacing: 0.5px;	
						line-height: 1.4;
					}	
						.add a {
							color: rgba(97, 0, 0, 0.9);
							font-family: CenturySchoolbookItalic;
							margin: 4px 0 0 0;
						}								
							.add a:hover {
								border-bottom: solid  #000 1px;
							}
					.klok {
						display: inline-block;
						background-image: url('svg/klok.svg');
						background-size: contain;
						background-repeat: no-repeat;
						padding: 4.8px;
					}
					.locatie {
						display: inline-block;
						background-image: url('svg/locatie.svg');
						background-size: contain;
						background-repeat: no-repeat;
						padding: 4.8px;
					}
		@media only screen and (min-width: 768px) and (max-width: 992px) {	
			.happening {
				padding: 0 0 0 7vw;
				margin: 21px 0 39px 0;
			}
				.hap-text {
					padding-left: 0;
				}
					.hap-title {
						font-size: 16.8px;
					}	
					.date {
						font-size: 13px;
					}	
						.date-digit {
							font-size: 33px;
						}		
					.add {
						font-size: 14.5px;
					}
		}				
		@media only screen and (max-width: 600px) {	
			.happening {
				padding: 0 0 0 4.3vw;
				margin: 15px 0 29px 0;
			}
				.hap-text {
					padding-left: 0;
				}
					.hap-title {
						font-size: 16.4px;
						line-height: 1.4;
					}	
					.date {
						font-size: 12.4px;
						padding-left: 7px;
						margin: 0;
					}	
						.date-digit {
							font-size: 33px;
							letter-spacing: 0.9px;
						}
						.place-time {
							line-height: 1.3;
						}					
					.add {
						font-size: 14px;
						line-height: 1.4;
					}
		}	
	.age-link {
		font-size: 14px;
		font-family: georgia;
		letter-spacing: 1px;
		margin-top: -10px;
	}
		.age-link a {
			color: #000;
			display: inline-block;
			height: 25px;
		}
		.age-link p {
			display: inline-block;
			font-style: italic;
			padding-bottom: 1px;
			margin: 0 0 0 15px;
			-webkit-transition: all 0.4s ease-in-out;
			-moz-transition: all 0.4s ease-in-out;
			-o-transition: all 0.4s ease-in-out;
			transition: all 0.4s ease-in-out;
		}
			.age-link p:hover {
				border-bottom: solid black 1px;
				margin: 0 0 0 10px;
			}					

	/* Media */
	#media {
		scroll-margin-top: 67px;
	}
@media only screen and (min-width: 768px) and (max-width: 992px) {
	#media {
		scroll-margin-top: 55px;
	}
}
@media only screen and (max-width: 600px) {
	#media {
		scroll-margin-top: 0;
	}
}	
	.media {
		position: relative;
		text-align: center;
		font-family: CenturySchoolbook;
		transition: all 0.7s ease-in-out;  
		margin: 0;
		padding: 0;
	}
		.clip {
			background: #404435;
			background: radial-gradient(circle, rgba(55, 57, 46, 1) 33%, rgba(46, 47, 40, 1) 75%);
			clip-path: polygon(50% 105px, 60.5% 0, 100% 0, 100% 100%, 0 100%, 0 0, 39.5% 0);
		}
	@media only screen and (min-width: 992.1px) and (max-width: 1199.9px) {
		.clip {
			clip-path: polygon(50% 101px, 65% 0, 100% 0, 100% 100%, 0 100%, 0 0, 35% 0);
		}
	}
	@media only screen and (min-width: 768px) and (max-width: 992px) {
		.clip {
			clip-path: polygon(50% 105px, 69% 0, 100% 0, 100% 100%, 0 100%, 0 0, 31% 0);
		}
	}
	@media only screen and (min-width: 600.1px) and (max-width: 767.9px) {
		.clip {
			clip-path: polygon(50% 100px, 75% 0, 100% 0, 100% 100%, 0 100%, 0 0, 25% 0);
		}
	}
	@media only screen and (max-width: 600px) {
		.clip {
			clip-path: polygon(50% 105px, 98% 0, 100% 0, 100% 100%, 0 100%, 0 0, 2% 0);
		}
	}
		/* Video */
		.video {
			float: none;
			display: flex;
			flex-direction: column;
			gap: 0px;
			max-width: 1000px;
			margin: 152px auto 0 auto;
		}
		iframe {
			width: 781px; 
			height: 439px;
		}
		.video-top {
			display: flex;
			align-items: flex-start;
			gap: 20px;
		}
		.video-bottom {
			display: flex;
			flex-direction: row-reverse;
			align-items: flex-start;
		}
		.text-block {
			text-align: left;
			padding: 45px 70px 0 70px;
			line-height: 30px;
		}
		.title {
			font-family: CenturySchoolbook;
			color: rgba(252, 251, 249, 0.9);
			font-size: 28.8px;
			letter-spacing: 0.05vw;
			line-height: 2.8vw;
		}
		.video-undertitle {
			font-family: FranklinBook;
			color: rgba(252, 251, 249, 0.8);
			font-size: 18.2px;
			text-transform: uppercase;
			letter-spacing: 0.11vw;
			text-indent: 3px;
		}
	@media only screen and (min-width: 992.1px) and (max-width: 1199.9px) {
		.video {
			margin: 145px auto 45px auto;
		}
		iframe {
			width: 540px; 
			height: 335px;
		}
		.video-bottom {
			display: flex;
			flex-direction: row-reverse;
			align-items: flex-start;
		}
		.text-block {
			padding: 30px 0 0 20px;
		}
		.title {
			font-size: 29px;
			letter-spacing: 0.05vw;
			line-height: 3.7vw;
		}
		.video-undertitle {
			font-size: 18px;
			text-transform: uppercase;
			letter-spacing: 0.17vw;
		}
	}
	@media only screen and (min-width: 768px) and (max-width: 992px) {
		.video {
			margin: 145px auto 45px auto;
		}
		iframe {
			width: 410px; 
			height: 265px;
		}
		.video-bottom {
			display: flex;
			flex-direction: row-reverse;
			align-items: flex-start;
		}
		.text-block {
			padding: 30px 0 0 20px;
		}
		.title {
			font-size: 21px;
			letter-spacing: 0.05vw;
			line-height: 2.8vw;
		}
		.video-undertitle {
			font-size: 16px;
			text-transform: uppercase;
			letter-spacing: 0.11vw;
		}
	}
	@media only screen and (min-width: 600.1px) and (max-width: 767.9px) {
		.video {
			gap: 76px;
			margin: 130px auto 0 auto;
		}
		iframe {
			width: 490px; 
			height: 269px;
		}
		.video-top {
			display: flex;
			flex-wrap: wrap-reverse;
			justify-content: center;
		}
		.video-bottom {
			flex-direction: column-reverse;
		}
		.text-block {
			padding: 0 20px;
			line-height: 25px;
			text-align: center;
		}
		.title {
			color: rgba(252, 251, 249, 0.8);
			font-size: 22px;
			letter-spacing: 0.27vw;
			line-height: 1.5;
		}
		.video-undertitle {
			color: rgba(252, 251, 249, 0.7);
			font-size: 13.2px;
			letter-spacing: 0.35vw;
		}
	}
	@media only screen and (max-width: 600px) {
		.video {
			gap: 76px;
			margin: 130px auto 0 auto;
		}
		iframe {
			width: 390px; 
			height: 219px;
		}
		.video-top {
			flex-direction: column-reverse;
		}
		.video-bottom {
			flex-direction: column-reverse;
		}
		.text-block {
			padding: 0 20px;
			line-height: 25px;
		}
		.title {
			color: rgba(252, 251, 249, 0.8);
			font-size: 22px;
			letter-spacing: 0.27vw;
			line-height: 9vw;
		}
		.video-undertitle {
			color: rgba(252, 251, 249, 0.7);
			font-size: 13.2px;
			letter-spacing: 0.35vw;
		}
	}
		/* Photo */
		.photo {
			float: none;
			max-width: 900px;
			margin: 60px auto;
			position: relative;
		}
			/* New carousel container to mask overflow */
			.carousel-container {
				max-width: 900px;
				margin: 0 auto;
				overflow: hidden;
				position: relative;
			}
			/* Carousel Track */
			.carousel-track {
				display: flex;
				transition: transform 0.5s ease-in-out;
			}
			/* Buttons */	
				.carousel-buttons {
					position: absolute;
					top: 50%;
					left: 0;
					right: 0;
					display: flex;
					justify-content: space-between;
					padding: 0 24px;
					transform: translateY(-50%);
					pointer-events: none; /* Disable pointer events on container, so only buttons respond */
					z-index: 10;
					max-width: 900px;
					margin: 10px auto 20px auto;
				}

				.carousel-button-left, .carousel-button-right {
					pointer-events: auto; /* Enable pointer events on buttons */
					color: white;
					border: none;
					outline: none;
					padding: 45px 45px 0 0;
					background: none;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					cursor: pointer;
					user-select: none;
					transition: background 0.3s ease;
					opacity: 0.75;
				}
				.carousel-button-left {
					background-image: url('svg/arrowW_L.svg');
				}
				.carousel-button-right {
					background-image: url('svg/arrowW_R.svg');
				}
				.carousel-button-right:hover, .carousel-button-left:hover {
				  opacity: 1;
				}
	@media only screen and (min-width: 768px) and (max-width: 992px) {
		.photo {
			margin: 40px auto;
		}
				.carousel-buttons {
					padding: 0;
				}
	}
	@media only screen and (min-width: 600.1px) and (max-width: 767.9px) {
				.carousel-buttons {
					padding: 0 13px;
				}
				.carousel-button-left, .carousel-button-right {
					padding: 39px 39px 0 0;
				}
	}
	@media only screen and (max-width: 600px) {
		.photo {
			margin: 33px auto;
		}
				.carousel-buttons {
					padding: 0 13px;
				}
				.carousel-button-left, .carousel-button-right {
					padding: 35px 35px 0 0;
				}
	}
			/* Images */
			.image {
				flex: 0 0 calc(100% / 3);
				width: 100%;
				padding: 0 20px 0 20px;
				filter: grayscale(100%);
				-webkit-filter: grayscale(100%);
				-webkit-transition: -webkit-filter 0.3s ease, -webkit-transform 0.3s ease;
				transition: filter 0.3s ease, transform 0.3s ease;
				transition: filter 0.3s ease, transform 0.3s ease;
				cursor: pointer;
				display: block;
				height: auto;
			}
		@media only screen and (min-width: 768px) and (max-width: 992px) {
			.image {
				padding: 0 16px;
			}
		}
		@media only screen and (min-width: 600.1px) and (max-width: 767.9px) {
			.image {
			  flex: 0 0 calc(100% / 2);
			  padding: 15px 11px;
			}
		}
		@media only screen and (max-width: 600px) {
			.image {
			  flex: 0 0 calc(100% / 1);
			  padding: 15px 22px;
			}
		}
			.image:hover {
			  filter: grayscale(0%);
			  -webkit-filter: grayscale(100%);
			}
				/* Modal */
				#modal {
				  display: none;
				  position: fixed;
				  z-index: 9999;
				  left: 0;
				  top: 0;
				  width: 100vw;
				  height: 100vh;
				  background-color: rgba(0,0,0,0.85);
				  text-align: center;
				  padding-top: 60px;
				}
				#modalImg {
				  max-width: 90vw;
				  max-height: 80vh;
				  width: auto;
				  height: auto;
				  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
				  animation: zoom 0.3s ease forwards;
				  object-fit: contain;
				}
				#caption {
				  margin-top: 15px;
				  color: #ccc;
				  font-family: Georgia, serif;
				  font-size: 16px;
				  max-width: 90%;
				  margin-left: auto;
				}

	/* Contact */
	#contact {
		scroll-margin-top: 67px;
	}
@media only screen and (min-width: 768px) and (max-width: 992px) {
	#contact {
		scroll-margin-top: 55px;
	}
}
@media only screen and (max-width: 600px) {
	#contact {
		scroll-margin-top: 0;
	}
}
	.contact {
		background-color: rgba(252,251,249,1);
		position: relative;
		display: block;	
		text-align: center;
		font-family: CenturySchoolbook;		
		margin: 0 auto;
		padding: 0 0 60px 0;
		-webkit-transition: all 0.7s ease-in-out;
		-moz-transition: all 0.7s ease-in-out;
		-o-transition: all 0.7s ease-in-out;
		transition: all 0.7s ease-in-out;
	}
		.contact-me, .newsletter {
			position: relative;
		}
		.contact-me {
			font-size: 18px;
			padding: 0 30px 0 15vw;
			margin: 35px 0 0 0;
		}
		.newsletter {
			font-size: 18px;
			padding: 0 15vw 0 30px;
			margin: 35px 0 0 0;
		}
	@media only screen and (min-width: 992.1px) and (max-width: 1199.9px) {
		.contact-me {
			padding: 0 29px 0 55px;
		}
		.newsletter {
			padding: 0 55px 0 29px;
		}
	}
	@media only screen and (min-width: 768px) and (max-width: 992px) {
		.contact-me {
			padding: 0 15px 0 25px;
		}
		.newsletter {
			padding: 0 25px 0 15px;
		}
	}
	@media only screen and (min-width: 600.1px) and (max-width: 767.9px) {
		.contact-me {
			padding: 0 55px;
		}
		.newsletter {
			padding: 0 55px;
		}
	}
	@media only screen and (max-width: 600px) {
		.contact-me {
			font-size: 20px;
			padding: 0 25px;
		}
		.newsletter {
			font-size: 18px;
			line-height: 30px;
			padding: 0 25px 0 25px;
			margin: 65px 0 0 0;
		}
	}
		.contact h1 {
			border-bottom: 1px solid black;
			font-size: 28px;
			letter-spacing: 1px;
			padding: 0 0 15px 0;
			margin: 0;
		}	
			/* Contact form */
			.form {
				float: none !important;
				margin: 35px auto 0 auto;
				text-align: left;
			}
				.form input[type=text], input[type=email], textarea {
					width: 100%;
					border: none;
					border-bottom: 2px solid #DCDCDC;
					border-radius: 3px 3px 0 0;
					font-family: CenturySchoolbook;
					font-size: 16px;
					resize: none;
					overflow: auto;
					outline: none;
					-webkit-box-shadow: none;
					-moz-box-shadow: none;
					box-shadow: none;
					padding: 7px 10px 7px 10px;
					margin: 7.5px 0 29px 0;
				}									
				.form input[type=text]:focus, input[type=email]:focus, textarea:focus {
					border-bottom: 2px solid #F5F5F5;							
				}						
				.form input[type=submit] {
					background-color: rgba(77, 0, 0);
					border: none;						
					font-family: Mignon;
					font-size: 17px;
					letter-spacing: 1px;
					color: #fcfbf9;
					border-radius: 3px;
					text-decoration: none;
					box-shadow: none;					
					cursor: pointer;
					padding: 7px 15px;
					margin: 0;
				}						
					.form input[type=submit]:hover {
						text-decoration: underline;
					}					
				.form textarea {
					min-height: 5em;
					max-height: 50vh;
				}					
				.form label {
					font-size: 17px;
					letter-spacing: 0.5px;
					padding: 0 0 0 4px;
				}					
				::placeholder {
					font-family: CenturySchoolbook;
					font-size: 16px;
					color: grey;
				}					
				.form input[type=text]:focus::placeholder, input[type=email]:focus::placeholder, textarea:focus::placeholder {
					color: lightgrey;
				}
				@media only screen and (max-width: 600px) {	
					.form {
						margin: 35px auto 0 auto;
					}
						.form input[type=text], input[type=email], textarea {
							margin: 5px 0 20px 0;
						}											
						.form input[type=submit] {					
							font-size: 17px;
						}																	
						.form label {
							font-size: 16px;
							letter-spacing: 1.5px;
						}						
				}
				
			/* Newsletter */
			.information {
				margin-top: 35px;
				text-align: center;
				display: flex;
				justify-content: center;
				gap: 5px;
			}
				.information p {
					display: inline-block;
					font-size: 16.8px;
					letter-spacing: 0.9px;
					padding: 0 30px 0 10px;
				}
		@media only screen and (min-width: 1200px), (min-width: 768px) and (max-width: 992px){
				.information p {
					padding: 0 0 0 15px;
				}
		}
		@media only screen and (max-width: 600px) {	
			.information {
				text-align: left;
				line-height: 1.3;
			}
				.information p {
					padding: 0 0 0 15px;
				}
		}
				.news-arrow {
					background-image: url('svg/arrowB-R.svg');
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					padding: 11px 11px 0 0;
				}
				@media only screen and (max-width: 600px) {	
					.news-arrow {
						background-image: url('svg/arrowB_up.svg');
						padding: 16px 16px 0 0;
					}
				}

/* Footer */
	.site-footer {
		background-image: linear-gradient(to top right, rgba(54, 0, 0), rgba(92, 0, 0));
		text-align: center;	
	}
@media only screen and (min-width: 992.1px) and (max-width: 1199.9px) {
	.site-footer {
		padding: 49px 80px 40px 80px;
	}
}
@media only screen and (min-width: 1200px), (min-width: 768px) and (max-width: 992px){
	.site-footer {
		padding: 49px 80px 40px 80px;
	}
}
@media only screen and (max-width: 600px), (min-width: 600.1px) and (max-width: 767.9px) {	
	.site-footer {	
		padding: 50px 20px 40px 20px;
	}
}	
	/* Social-media */
	.social-media {
		margin-bottom: 22px;
		display: flex;
		justify-content: center;
		gap: 13px;
	}
		.link {
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			padding: 22px 22px 0 0;
		}
			.linkedin {
				display: none;
				background-image: url('svg/In.svg');					
			}				
			.instagram {
				background-image: url('svg/inst.svg');
			}				
			.facebook {
				background-image: url('svg/fb.svg');
			}				
			.spotify {
				display: none;
				background-image: url('svg/spo.svg');
			}				
			.youtube {
				background-image: url('svg/yt.svg');
			}
		
	/* Copyright */
	.copyright {
		font-family: Georgia;
		font-size: 13px;
		color: #fcfcfc;
		letter-spacing: 1.3px;
		line-height: 22px;
		display: flex;
		gap: 5px;
		justify-content: center;
	}