@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600");
@import url("fontawesome-all.min.css");

/*
	JB: Other color patches
	#336699
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background-image: url("images/overlay.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65)), url("../../images/bg.jpg");
		background-image: url("images/overlay.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65)), url("../../images/bg.jpg");
		background-image: url("images/overlay.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65)), url("../../images/bg.jpg");
		background-image: url("images/overlay.png"), linear-gradient(top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65)), url("../../images/bg.jpg");
		background-position: top left, bottom left, auto;
		background-size: auto, 100% 100%, cover;
		background-attachment: fixed;
		background-repeat: repeat, no-repeat, auto;
		position: relative;
		background-color: #150C07;
		line-height: 1.75em;
		overflow-x: hidden;
		overflow-y: auto;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

		@media screen and (max-width: 1280px) {

			body {
				background-attachment: scroll;
			}

		}

		@media screen and (max-width: 736px) {

			body {
				background-attachment: scroll;
				background-size: auto, 100% 100%, 250% auto;
				background-repeat: repeat, no-repeat, no-repeat;
				background-position: top left, bottom left, 50% 0%;
			}

		}

	body, input, select, textarea {
		font-family: 'Source Sans Pro';
		font-weight: 400;
		padding: 0;
		font-size: 13pt;
		color: rgba(255, 255, 255, 0.6);
	}

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

		@media screen and (max-width: 1280px) {

			body, input, select, textarea {
				font-size: 10pt;
			}

		}

		@media screen and (max-width: 980px) {

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

	a {
		color: #fff;
		color: rgba(255, 255, 255, 0.85);
		text-decoration: none;
		-moz-transition: color 0.25s ease-in-out;
		-webkit-transition: color 0.25s ease-in-out;
		-ms-transition: color 0.25s ease-in-out;
		transition: color 0.25s ease-in-out;
	}

		a:hover {
			color: #134bf4 ;
		}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 400;
		color: #fff;
		letter-spacing: -0.05em;
	}

	strong, b {
		color: #fff;
		color: rgba(255, 255, 255, 0.85);
		font-weight: 600;
	}

/* List */

	ul.icons {
		cursor: default;
		margin: 0 0 0.5em 0;
	}

		ul.icons li {
			display: inline-block;
			font-size: 1.5em;
			margin-left: 1em;
		}

			ul.icons li span {
				display: none;
			}

			ul.icons li a {
				opacity: 0.35;
				color: #fff;
				-moz-transition: opacity 0.25s ease-in-out;
				-webkit-transition: opacity 0.25s ease-in-out;
				-ms-transition: opacity 0.25s ease-in-out;
				transition: opacity 0.25s ease-in-out;
			}

				ul.icons li a:hover {
					opacity: 1.0;
				}

			ul.icons li:first-child {
				margin-left: 0;
			}

		@media screen and (max-width: 736px) {

			ul.icons {
				margin: 0 0 2em 0;
			}

		}

/* Icons */

	.icon {
		text-decoration: none;
		position: relative;
		text-decoration: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon > .label {
			display: none;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

/* Wrapper */

	#wrapper {
		min-height: 100vh;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-transition: -moz-filter 0.5s ease-in-out;
		-webkit-transition: -webkit-filter 0.5s ease-in-out;
		-ms-transition: -ms-filter 0.5s ease-in-out;
		transition: filter 0.5s ease-in-out;
	}

		#wrapper:before {
			content: '';
			display: block;
		}

		body.is-poptrox-visible #wrapper {
			-moz-filter: blur(0.25em);
			-webkit-filter: blur(0.25em);
			-ms-filter: blur(0.25em);
			filter: blur(0.25em);
		}

		body.is-poptrox-visible #header {
		display: none;
		}

		@media screen and (max-width: 736px) {

			#wrapper {
				min-height: 0;
			}

		}
		
		/* JB: original. Next 2 blocks were added
		@media screen and (max-width: 736px) {
    		body.is-poptrox-visible .poptrox-popup {
      		width: 100vw !important;
      		height: 100vh !important;
      		max-width: 100vw !important;
        	max-height: 100vh !important;
        	top: 0 !important;
        	left: 0 !important;
    	}
    
    		body.is-poptrox-visible .poptrox-popup img {
        		max-width: 100vw;
        		max-height: 100vh;
        		width: auto !important;
        		height: auto !important;
    		}
		} */
		.poptrox-popup img {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
/* Scroll Zone */

	.scrollZone {
		position: fixed;
		width: 6rem;
		height: 100vh;
		cursor: -moz-grab;
		cursor: -webkit-grab;
		cursor: -ms-grab;
		cursor: grab;
		z-index: 10001;
	}

		.scrollZone.left {
			left: 0;
		}

		.scrollZone.right {
			right: 0;
		}

		@media screen and (max-width: 736px) {

			.scrollZone {
				display: none;
			}

		}

/* Main */

	#main {
		-moz-transition: opacity 1s ease-in-out;
		-webkit-transition: opacity 1s ease-in-out;
		-ms-transition: opacity 1s ease-in-out;
		transition: opacity 1s ease-in-out;
		-moz-transition-delay: 0.5s;
		-webkit-transition-delay: 0.5s;
		-ms-transition-delay: 0.5s;
		transition-delay: 0.5s;
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 5px;
	}

		#main .items {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			max-width: 100vw; /* Prevent horizontal overflow */
		}

			#main .items > :last-child {
				/* border-right: solid 10px #ffffff; */
				border-right: 0;
			}

		#main .item {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			margin: 5px;
			height: 16em;
			box-shadow: 0 0 0 10px #ffffff;
		}

			#main .item.span-1 {
				width: 20em;
			}

			#main .item.span-2 {
				width: 30em;
			}

			#main .item.span-3 {
				width: 40em;
			}
			/* JB changes background color of first tile
			
			Royal/deep bluish
			#0D014D 
			
			Terracota/clay
			#D97A3C
			#DB7638 (richer/warmer)
			#D0743A (earthy) 
			*/
			#main .item.intro {
				background-color: #DB7638;
				background-image: url("images/overlay.png");
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				padding: 1em 3em;
			}

			/* Morocco-specific color */
			#main .item.intro.morocco-intro {
    			background-color: #d97b3c;  /* Morocco terracotta */
			}

			/* krs-specific color */
			#main .item.intro.krs-intro {
    			background-color: #1f2c4e9e;  
			}

			/* Italy-specific color */
			#main .item.intro.italy-intro {
    			background-color: #480303;  
			}

			/* Cyprus-specific color */
			#main .item.intro.cyprus-intro {
    			background-color: #018ACE;  
			}

			/*City color */
			#main .item.intro.city-intro {
    			background-color: #2C2C2C;  
			}
			

			/*
			#018ACE - a beautiful vibrant azure/cerulean blue - very similar to a bright sky blue or corporate blue.

			Alternative representations:
			RGB: rgb(1, 138, 206)
			#008CCA - Most common color:  (slightly deeper)
			#0186C9 - Average color (very close to center)
			*/

			#main .item.intro h1 {
					font-size: 3em;
					line-height: 1em;
				}

				#main .item.intro p {
					font-size: 1.25em;
					line-height: 1.5em;
					margin: 0.5em 0 0 0;
					opacity: 0.65;
				}

			#main .item.thumb {
				display: block;
				position: relative;
				background: rgba(255, 255, 255, 0.25);
				cursor: default;
			}

				#main .item.thumb h2 {
					position: absolute;
					bottom: 0;
					left: 0;
					background: rgba(18, 21, 29, 0.85);
					width: 100%;
					padding: 1em;
					font-weight: 400;
					line-height: 1em;
					z-index: 2;
				}

				#main .item.thumb img {
					display: block;
					z-index: 1;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					-moz-object-fit: cover;
					-webkit-object-fit: cover;
					-ms-object-fit: cover;
					object-fit: cover;
					-moz-object-position: center;
					-webkit-object-position: center;
					-ms-object-position: center;
					object-position: center;
					-moz-transition: opacity 0.75s ease-in-out;
					-webkit-transition: opacity 0.75s ease-in-out;
					-ms-transition: opacity 0.75s ease-in-out;
					transition: opacity 0.75s ease-in-out;
					-moz-transition-delay: 1.25s;
					-webkit-transition-delay: 1.25s;
					-ms-transition-delay: 1.25s;
					transition-delay: 1.25s;
				}

				#main .item.thumb.delay-1 img {
					-moz-transition-delay: 1.375s;
					-webkit-transition-delay: 1.375s;
					-ms-transition-delay: 1.375s;
					transition-delay: 1.375s;
				}

				#main .item.thumb.delay-2 img {
					-moz-transition-delay: 1.5s;
					-webkit-transition-delay: 1.5s;
					-ms-transition-delay: 1.5s;
					transition-delay: 1.5s;
				}

				#main .item.thumb.delay-3 img {
					-moz-transition-delay: 1.625s;
					-webkit-transition-delay: 1.625s;
					-ms-transition-delay: 1.625s;
					transition-delay: 1.625s;
				}

				#main .item.thumb.delay-4 img {
					-moz-transition-delay: 1.75s;
					-webkit-transition-delay: 1.75s;
					-ms-transition-delay: 1.75s;
					transition-delay: 1.75s;
				}

				#main .item.thumb.delay-5 img {
					-moz-transition-delay: 1.875s;
					-webkit-transition-delay: 1.875s;
					-ms-transition-delay: 1.875s;
					transition-delay: 1.875s;
				}

				#main .item.thumb.delay-6 img {
					-moz-transition-delay: 2s;
					-webkit-transition-delay: 2s;
					-ms-transition-delay: 2s;
					transition-delay: 2s;
				}

		body.is-preload #main {
			opacity: 0;
		}

			body.is-preload #main .item.thumb img {
				opacity: 0;
			}

		@media screen and (max-width: 1680px) {

			#main .item {
				height: 14em;
			}

				#main .item.span-1 {
					width: 17em;
				}

				#main .item.span-2 {
					width: 25.5em;
				}

				#main .item.span-3 {
					width: 34em;
				}

		}

		@media screen and (max-width: 736px) {

			#main {
				width: 100%;
				overflow-x: visible; /*hidden;*/
				overflow-y: visible; /*auto;*/
				padding: 2.5px;
			}

				#main .items {
					-moz-flex-wrap: wrap;
					-webkit-flex-wrap: wrap;
					-ms-flex-wrap: wrap;
					flex-wrap: wrap;
					-moz-justify-content: center;
					-webkit-justify-content: center;
					-ms-justify-content: center;
					justify-content: center;
				}

					#main .items > :last-child {
						border-right: 0;
					}

				#main .item {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					width: calc(50vw - 15px) !important;
					margin: 2.5px;
					box-shadow: 0 0 0 5px #ffffff;
				}

					#main .item.intro {
						width: calc(100vw - 20px) !important;
						text-align: center;
						height: auto;
						padding: 3em;
					}

						#main .item.intro h1 {
							font-size: 2em;
						}

						#main .item.intro p {
							font-size: 1em;
						}

					#main .item.thumb h2 {
						display: none;
					} 

		}

		@media screen and (max-width: 480px) {

			#main .item {
				height: 10em;
			}

		}

/* Header */

	#footer {
		width: 100%;
		padding: 1.5em;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		position: relative;
		z-index: 10002;
	}

		#footer > section:first-child {
			text-align: left;
			max-width: 36em;
			padding-right: 2em;
		}

		#footer > section:last-child {
			text-align: right;
			max-width: 36em;
		}

		#footer h2 {
			font-size: 2.25em;
			margin: 0 0 1em 0;
		}

		#footer .copyright li {
			display: inline-block;
			margin-left: 1em;
			padding-left: 1em;
			border-left: solid 1px rgba(255, 255, 255, 0.25);
			line-height: 1em;
		}

			#footer .copyright li:first-child {
				border-left: 0;
				margin-left: 0;
				padding-left: 0;
			}

		@media screen and (max-width: 980px) {

			#footer {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
			}

				#footer > section:first-child {
					width: 100%;
					padding-right: 0;
				}

				#footer > section:last-child {
					text-align: left;
					margin: 1.5em 0 0 0;
					width: 100%;
				}

		}

		@media screen and (max-width: 736px) {

			#footer {
				text-align: center;
				padding: 3em;
			}

				#footer > section:first-child {
					text-align: center;
					max-width: 100%;
				}

				#footer > section:last-child {
					text-align: center;
					max-width: 100%;
				}

				#footer .copyright li {
					display: block;
					margin: 0.75em 0 0 0;
					padding-left: 0;
					border-left: 0;
				}

					#footer .copyright li:first-child {
						margin-top: 0;
					}

		}

/* Popup */

	.poptrox-popup {
		background: #1a1f2c;
		background: rgba(18, 21, 29, 0.9);
		box-shadow: 0px 0px 0px 10px #fff, 0px 10px 60px 10px rgba(8, 11, 19, 0.55);
		cursor: default;
	}

		.poptrox-popup .loader {
			display: block;
			width: 48px;
			height: 48px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -24px 0 0 -24px;
			background: url("images/loader.gif");
			opacity: 0.25;
		}

		.poptrox-popup .caption {
			position: absolute;
			bottom: 0;
			left: 0;
			background: #1a1f2c;
			background: rgba(18, 21, 29, 0.85);
			display: block;
			width: 100%;
			line-height: 75px;
			text-align: center;
			font-size: 1.25em;
			color: #fff;
		}

		.poptrox-popup .nav-next, .poptrox-popup .nav-previous {
			text-decoration: none;
			font-weight: normal;
			font-style: normal;
			-moz-transition: opacity 0.25s ease-in-out;
			-webkit-transition: opacity 0.25s ease-in-out;
			-ms-transition: opacity 0.25s ease-in-out;
			transition: opacity 0.25s ease-in-out;
			opacity: 0.35;
		}

			.poptrox-popup .nav-next:hover, .poptrox-popup .nav-previous:hover {
				opacity: 1.0;
			}

		.poptrox-popup .nav-next, .poptrox-popup .nav-previous {
			text-decoration: none;
			text-transform: none !important;
			width: 150px;
			height: 75px;
			position: absolute;
			bottom: 0;
			cursor: pointer;
			font-size: 3em;
			line-height: 75px;
		}

			.poptrox-popup .nav-next:before, .poptrox-popup .nav-previous:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

		.poptrox-popup .nav-next {
			right: 0;
			text-align: right;
			padding-right: 30px;
		}

			.poptrox-popup .nav-next:before {
				content: '\f105';
			}

		.poptrox-popup .nav-previous {
			left: 0;
			text-align: left;
			padding-left: 30px;
		}

			.poptrox-popup .nav-previous:before {
				content: '\f104';
			}

		/* JB Next line doesn't work on all sameungs/android variants*/
		/* @media screen and (max-width: 736px), screen and (max-width: 736px) and (orientation: landscape) { */

		@media screen and (max-width: 1024px) {
			.poptrox-popup {
				background: #0a0f1c;
				box-shadow: 0px 0px 30px 10px rgba(8, 11, 19, 0.85);
				border: solid 2.5px #fff;
				-moz-box-sizing: content-box;
				-webkit-box-sizing: content-box;
				-ms-box-sizing: content-box;
				box-sizing: content-box;
			}

			.poptrox-popup .caption {
				display: none !important;
			}

			.poptrox-popup .nav-next {
				display: none !important;
			}

			.poptrox-popup .nav-previous {
				display: none !important;
			}
			
			/* JB New - good, but a bit too far into the picture 
			.poptrox-popup .nav-next {
				display: block !important;
				position: absolute !important;
				top: 50% !important;
				right: 0px !important; 
				transform: translateY(-50%) !important;
				-webkit-transform: translateY(-50%) !important;
				-moz-transform: translateY(-50%) !important;
				font-size: 2.5em !important;
				width: 60px !important;
				height: 120px !important;
				line-height: 120px !important;
				color: rgba(255, 255, 255, 0.9) !important;
				text-align: center !important;
				z-index: 10005 !important;
			}

			.poptrox-popup .nav-previous {
				display: block !important;
				position: absolute !important;
				top: 50% !important;
				left: 0px !important;
				transform: translateY(-50%) !important;
				-webkit-transform: translateY(-50%) !important;
				-moz-transform: translateY(-50%) !important;
				font-size: 2.5em !important;
				width: 60px !important;
				height: 120px !important;
				line-height: 120px !important;
				color: rgba(255, 255, 255, 0.9) !important;
				text-align: center !important;
				z-index: 10005 !important;
			}
			*/
		}

/* Header */

	#header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #01011D;
		background: rgba(1, 1, 29, 0.95);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		z-index: 100000;
		border-bottom: 2px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}

		#header .header-container {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-justify-content: space-between;
			-webkit-justify-content: space-between;
			-ms-justify-content: space-between;
			justify-content: space-between;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			padding: 1em 2em;
			max-width: 100%;
		}

		#header .site-title {
			font-size: 1.5em;
			margin: 0;
			color: #fff;
			font-weight: 400;
			letter-spacing: 0.1em;
			text-transform: none; /* uppercase */
		}

		#header .nav-menu {
			position: relative;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			gap: 1.5em;
		}

		#header .hamburger {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: space-around;
			-webkit-justify-content: space-around;
			-ms-justify-content: space-around;
			justify-content: space-around;
			width: 30px;
			height: 24px;
			background: transparent;
			border: none;
			cursor: pointer;
			padding: 0;
			z-index: 10;
			-moz-transition: all 0.3s ease;
			-webkit-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}

			#header .hamburger span {
				width: 30px;
				height: 3px;
				background: #fff;
				border-radius: 3px;
				-moz-transition: all 0.3s ease;
				-webkit-transition: all 0.3s ease;
				-ms-transition: all 0.3s ease;
				transition: all 0.3s ease;
				transform-origin: center;
			}

			#header .hamburger.active span:nth-child(1) {
				-moz-transform: translateY(10.5px) rotate(45deg);
				-webkit-transform: translateY(10.5px) rotate(45deg);
				-ms-transform: translateY(10.5px) rotate(45deg);
				transform: translateY(10.5px) rotate(45deg);
			}

			#header .hamburger.active span:nth-child(2) {
				opacity: 0;
			}

			#header .hamburger.active span:nth-child(3) {
				-moz-transform: translateY(-10.5px) rotate(-45deg);
				-webkit-transform: translateY(-10.5px) rotate(-45deg);
				-ms-transform: translateY(-10.5px) rotate(-45deg);
				transform: translateY(-10.5px) rotate(-45deg);
			}

		#header .menu-items {
			position: absolute;
			top: 50px;
			right: 0;
			background: #01011D;
			background: rgba(1, 1, 29, 0.95);
			border: 1px solid rgba(255, 255, 255, 0.15);
			border-radius: 8px;
			padding: 0;
			margin: 0;
			list-style: none;
			min-width: 180px;
			opacity: 0;
			visibility: hidden;
			-moz-transform: translateY(-10px);
			-webkit-transform: translateY(-10px);
			-ms-transform: translateY(-10px);
			transform: translateY(-10px);
			-moz-transition: all 0.3s ease;
			-webkit-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			transition: all 0.3s ease;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
		}

			#header .menu-items.active {
				opacity: 1;
				visibility: visible;
				-moz-transform: translateY(0);
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
			}

			#header .menu-items li {
				margin: 0;
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			}

				#header .menu-items li:last-child {
					border-bottom: none;
				}

			#header .menu-items a {
				display: block;
				padding: 1em 1.5em;
				color: rgba(255, 255, 255, 0.85);
				text-decoration: none;
				-moz-transition: all 0.25s ease;
				-webkit-transition: all 0.25s ease;
				-ms-transition: all 0.25s ease;
				transition: all 0.25s ease;
				font-size: 0.95em;
				letter-spacing: 0.05em;
			}

				#header .menu-items a:hover {
					background: rgba(255, 255, 255, 0.1);
					color: #fff;
					padding-left: 2em;
				}

	/* Adjust wrapper for fixed header */
	body {
		padding-top: 70px;
	}

	/* Mobile adjustments */
	@media screen and (max-width: 736px) {

		#header {
			display: block !important;
			visibility: visible !important;
			opacity: 1 !important;
		}

		#header .header-container {
			padding: 0.75em 1.5em;
			display: -moz-flex !important;
			display: -webkit-flex !important;
			display: -ms-flex !important;
			display: flex !important;
		}

		#header .site-title {
			font-size: 1.2em;
			display: block !important;
		}

		#header .nav-menu {
			display: -moz-flex !important;
			display: -webkit-flex !important;
			display: -ms-flex !important;
			display: flex !important;
		}

		#header .hamburger {
			display: -moz-flex !important;
			display: -webkit-flex !important;
			display: -ms-flex !important;
			display: flex !important;
		}

		body {
			padding-top: 60px;
		}

	}

	@media screen and (max-width: 480px) {

		#header .header-container {
			padding: 0.75em 1em;
		}

		#header .site-title {
			font-size: 1em;
		}

	}

	/* Back button */
	#header .back-button {
		color: rgba(255, 255, 255, 0.85);
		text-decoration: none;
		font-size: 0.9em;
		letter-spacing: 0.05em;
		-moz-transition: color 0.25s ease;
		-webkit-transition: color 0.25s ease;
		-ms-transition: color 0.25s ease;
		transition: color 0.25s ease;
		white-space: nowrap;
	}

		#header .back-button:hover {
			color: #fff;
		}

	@media screen and (max-width: 480px) {
		#header .back-button {
			font-size: 0.8em;
		}
		
		#header .nav-menu {
			gap: 1em;
		}
	}

/* Modal (Adapted from Pixelarity Standout) */
.modal {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	pointer-events: none;
	-moz-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s;
	-webkit-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s;
	-ms-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s;
	transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s;
	background-color: rgba(0, 0, 0, 0.75);
	height: 100%;
	left: 0;
	opacity: 0;
	outline: 0;
	position: fixed;
	top: 0;
	visibility: hidden;
	width: 100%;
	z-index: 0;
}

.modal-content {
	-moz-transform: translateY(0.75rem);
	-webkit-transform: translateY(0.75rem);
	-ms-transform: translateY(0.75rem);
	transform: translateY(0.75rem);
	-moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease;
	-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
	-ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease;
	transition: opacity 0.5s ease, transform 0.5s ease;
	opacity: 0;
	background-color: #222222bf;
	padding: 2.5em;
	border-radius: 8px;
	max-width: 400px;
	width: 90%;
	aspect-ratio: 1 / 1;
	position: relative;
	box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.5);
	overflow-y: auto;
}

.modal-content:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='64px' viewBox='0 0 64 64' zoomAndPan='disable'%3E%3Cstyle%3Eline %7Bstroke: %23ffffff%3Bstroke-width: 2px%3B%7D%3C/style%3E%3Cline x1='20' y1='20' x2='44' y2='44' /%3E%3Cline x1='20' y1='44' x2='44' y2='20' /%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.5rem;
	content: '';
	cursor: pointer;
	display: block;
	height: 2.5rem;
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	width: 2.5rem;
	opacity: 0.7;
	-moz-transition: opacity 0.25s ease;
	-webkit-transition: opacity 0.25s ease;
	-ms-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}

.modal-content:hover:after {
	opacity: 1;
}

.modal-content h2 {
	margin: 0 0 1em 0;
	font-size: 2em;
	color: #fff;
}

.modal-content p {
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.75em;
	margin-bottom: 1em;
}

.modal-content p:last-child {
	margin-bottom: 0;
}

.modal-close {
	display: none;
}

.modal.visible {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	z-index: 200000;
}

.modal.visible .modal-content {
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

@media screen and (max-width: 736px) {
	.modal-content {
		padding: 2em;
		max-width: 85%;
		aspect-ratio: 1 / 1;
	}
	
	.modal-content h2 {
		font-size: 1.5em;
	}

	.modal-content:after {
		right: 0.25rem;
		top: 0.25rem;
		background-size: 1.25rem;
		height: 2rem;
		width: 2rem;
	}
}

.gallery-navigation {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    gap: 1em;
    padding: 3em 2em;
}

.nav-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    padding: 1em 2em;
    text-decoration: none;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    transition: all 0.25s ease;
    font-size: 0.9em;
    letter-spacing: 0.05em;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

@media screen and (max-width: 736px) {
    .gallery-navigation {
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.5em;
    }
    
    .nav-btn {
        width: 100%;
        text-align: center;
    }
}