@charset "utf-8";
/* CSS Document */

		/*styles*/
        html, body,.full {width: 100vw; height: 100vh; max-width: 100vw;}
        body {margin: 0; border: none; overflow: hidden; overflow-y: visible; overflow-x: hidden; background-color: #fffff8;}
		body {}
		
		article {width: 100%;}
		a {text-decoration: none; position: relative;}
		img {border: none;}
		p {margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0;}
		
        /* #bg {position: fixed; bottom: 0; left: 0; height: 100%; width: 100%; overflow:hidden; z-index:100;} */
			/* #bg>.dropShadow {background-image: url(/images/bg-medium.png); background-size: auto 60%; bottom: 0; top: auto; background-position: bottom left;} /*background-size: 40% auto; background-position: bottom right;*/
		
		/* Class not ID used here for css priority supercedance. The full header syle from the home page will not be applied to desktop view, only mobile (see below). */
		.header { position: relative; display: inline-block; top: -7vh; left: 0; height: 107vh; width: 100.2%; overflow:hidden; margin: 0 0 0 0; background-size: cover; background-position: center 25%; background-repeat: no-repeat; clear: both; background-image: url(/images/cover-medium.jpg); }	
		
		.page-image {position: relative; display: inline-block; top: 0; left: 0; height: 90vmin; width: 99%; overflow:hidden; float: left; margin: 0 2% 2% 0; background-size: contain; background-position: top center; background-repeat: no-repeat; clear: both;} 
			
		
		
		/* consider using the aspect-ratio: property rather than orientation: to trim out screens that allow the logo/pagetitle to overlap the content. If you do this you must also update your javascript media queries as well! */
		@media only screen and (orientation: portrait) {
			.page-image {height: 90vmin; background-size: cover; background-position: center center;}
			/* ID not class used here for css priority. The full header style from the home page only applies to the mobile view. */
			.header:first-of-type {width: 100vw; height: 108vh; left: -5vw; top: -25vw; margin: 0 0 3vmin 0; background-image: url(/images/cover-small.jpg);}
		} 
		.page-sidebar {display:inline-block; width: 46%; position: relative; vertical-align: text-top; overflow: hidden;}
		.page-content-sidebar {margin-left: 2%;}
		@media only screen and (orientation: portrait) {
			.page-sidebar {width: 99%;} 
		}
		.page-image-about {background-image: url(/images/about-small.jpg) !important}
		.page-image-contact {background-image: url(/images/contact-small.jpg) !important; }
			.page-contact p {font-size: 2.5vmin; text-align: center; margin: 19vw auto;}
			.page-contact img {position: relative; width: 30vmin;}
		@media only screen and (orientation: portrait) {
			.page-contact p {font-size: 4.5vw;}
			.page-contact img {width: 60vw;}
		}
		.page-image-calendar{background-image: url(/images/horizontal.png) !important; background-size: contain; height: 66vmin;}
		@media only screen and (orientation: portrait) {
			.page-image-calendar{height: 54vmin;}
		}


		@media only screen and (orientation: portrait) {
			/* #bg>.dropShadow {background-image: url(/images/bg-small.png); height: 50%; background-size: contain;} */
			
		}
			#bg>img {position: absolute; top: 0; height: 100%;}
			img.grade {position: absolute; top: 0; height: 150vh; left: 0; width: 14%; z-index: 50;}
		
		/*artifact, grayscale logo see site-title*/
        #logo {position: fixed; bottom: 5%; left: 2%; width: 43%; z-index: 1000;}
		
		
        #menu {position:fixed; top: 0; left: 2%; width: 18%; height: 100%; text-align: left; z-index: 100;}
            #menu>ul {list-style:none; padding: 0; width: 100%; top: 0; position: relative; display: inline-block; clear: both; margin-top: 1vmax; background-color: #fffff8; z-index:100}
			
			#menu .button {position: relative; top:0; left: 0; width: 7vmax; height: 7vmax; margin: 1vh -5vw 1vh 5vw; overflow: hidden; border-radius: 75%; z-index: 500;}
			/*hide menu button by default */
			#menu .button {display: none;}
			
			#menu .button>div:first-of-type{ margin-top: 2vmax;} 
			#menu .button>div {
				top: 0;
				left: 0;
				margin: 0.6vmax auto;
				height: 0.6vmax;
				width: 4vmax;
				background-color: #FFF;
				border-radius: 10%;
			}
			
			
			#site-title {position: relative; display: inline-block; width: 100%; font-size: 6vmin; margin-bottom: 0.5vmin; cursor: context-menu; overflow: visible; line-height: 5vmin; margin-top: 5vmin; margin-left: 0; z-index: 1000;}
			
				#site-title>div {position: relative; display: inline-block; font-size: 300%; height: 11vmin;}
		#content {position: relative; width: 80%; padding: 2vh 0 60vh 0; top: 5vmin; left: 20%; z-index: 50; text-align: left;}
		.link-image {position: relative; top: 0; left: 0; height: 3vmax; width: auto; margin: 0.5vmax;} 	
		.link-image-medium {height: 14vmax; margin: 0 0 0 1vmin;}
		@media only screen and (orientation: portrait) { 
			#content {
				width: 90vw;
				left: 0;
				padding: 25vw 0 100px 0;
				text-align: center;
				margin: 0 auto;
				top: 0;
			}
			
			/* determine if the page starts with an image or video. If not, add extra top margin to prevent visual conflict with text on load. */
			#content:not(:has(.page-image)):not(:has(#content-wrapper>div>article:first-child div.dropShadow)):not(:has(#content-wrapper>div> iframe:first-child)){
				padding-top: 37vw;
			}
			
			/* any h1-3 header which is the first child of content-wrapper should have extra margin on mobile, because the radial menu button makes less sense over text */
			#content-wrapper>h1:first-child, #content-wrapper>h2:first-child, #content-wrapper h3:first-child{
				/*text-indent: 8vmax;*/
			}
			.link-image {height: 10vmax;}
			#menu {
				left: 0;
				width: 100vw;
				height: 22vmin;
				top: 0;
				background-color: #fffff8;
				margin: 0;
			}
			#menu>div { margin-left: 5vw;}
			#menu>ul {
				position: relative;
				left: -1%;
				width: 102%;
				height: 100vh;
				overflow:hidden;
				margin: -10vh 0 0 0;
				padding: 0;
			}
			#menu>ul>li:first-of-type {margin-top:11vh;}
			#menu>ul>li {
				position: relative;
				display: inline-block;
				width: 100%;
				margin: 0 0 0 0;
				text-align: center;
			}
		}
		
		.contact-img {
			position: relative;
			width: 99%;
			top: -2vh;
			left: 0;
			
		}
		
		img.lucy-float {
			position: fixed;
			top: 12vh;
			right: 5vw;
			height: 76vh;
		}
		@media only screen and (orientation: portrait) {
			img.lucy-float {
				top: 30vh;
				right: 1vw;
				height: 40vh;
			}
		}
			/*
		#content {z-index: 50;}
        #content, #drop {overflow: hidden; position: fixed; width: 66%; height: 100%; right: 0; top: 0; text-align: right;}
			#content-inner { position: absolute; overflow: scroll; width: 104%; height: 104%; top: 0; left: 0; }
				#content-scroll {position: relative; padding: 3% 3% 100px 3%; top: 0; left: 0; }		
				*/
		#drop {
			position: fixed;
			top: 0;
			right: 0;
			height: 100%;
			width: 85%;
			z-index: -10; 
			overflow: visible; 			
			zoom: 1;
		}
				
					
			#drop>div {
				position: absolute; width: 21%; height: 100%; top: -100%; left: 85%; overflow: visible;
				background-color: transparent;
				background-repeat: no-repeat;
				background-attachment: local;
				background-position: left top;
				background-size: 100% auto;
				}
				@media only screen and (orientation: portrait) {
					#drop>div {background-size: auto 100%; width: 100%; height: 21%;}
				}
				#drop>div>img { top: 0; left: 0; width: 100%;}
					#drop>div>img.hint { width: 20%;}
			
		#bg {
				z-index: -50;
		}
		.dropShadow {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -10;
			background-position: center 34%;
			background-size: cover;
			background-repeat: no-repeat;
			/*
			zoom: 1;
			filter: alpha(opacity=50);
			opacity: 0.5;
			*/
		}
		.bg {background-color: #666; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60); filter: alpha(opacity=60); opacity: .60;}
		
		.center-wrapper {
			position: relative;
			width: 100%;
			display: inline-block;
			margin: 0;
			padding: 0;
		}
		
		/*page content*/
		.horizontal-menu {
			height: 10vmin;
			text-align: left;
		}
			
		/*music*/
		#music-slider {clear: both;}
		iframe#music-player { position: fixed; top: 0; right: 2%; height: 100%; width: 45%;}
		
		/*contact*/
		input, textarea, .textarea {background-color: #333; color: #eee; border: none; margin-bottom: 2px; }
		
		/*footer*/
		/*#footer {text-align: center; position: fixed; bottom: 0; left: 0; width: 100vw; height: 5vh; font-size: 2vh; background-color: #fffff8; top: auto; z-index: 100; color: #989898;}*/
		#footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 5vh;
			background-color: #fffff8;
			color: #989898;
			font-size: 2vh;
			z-index: 100;
			display: flex;
			flex-direction: row;
			align-items: flex-start;      /* vertical centering */
			justify-content: space-between;
			padding: 0.5vh 0;          /* optional */
		}	
		/* Perfectly centered middle element */
		#footer .center {
			position:absolute;
			left: 50%;
			transform: translateX(-50%);
			white-space: nowrap;     
		}
		
		#footer .left, 	#footer .right {
			flex: 0 0 auto;           /* prevents stretching */
		}		
		.horizontal-menu nav, .horizontal-menu ul, .horizontal-menu li, .horizontal-menu a {
			top:0;
			margin: 0;
			padding: 0;
		}
		.horizontal-menu ul {
			display: flex;            /* horizontal icon row */
			gap: 0.5rem;              /* spacing between icons */
			align-items: center;      /* vertical alignment of icons inside ul */
			list-style: none;		
		}
		.horizontal-menu a {display:block; z-index:100;}
		.horizontal-menu img { display:block; height:auto; max-height: 5vh;}
		
		.column {display:inline-block; position: relative; top: 0; left: 0; margin: 0 auto; padding: 0; vertical-align: text-top; overflow: hidden; width: auto; height: auto;}
		.two-column {width: 48%;}
		.three-column {min-width: 1vw; max-width:33vw; overflow: visible; text-wrap: none;}
				
		.noselect {
			-webkit-touch-callout: none; /* iOS Safari */
			-webkit-user-select: none; /* Safari */
			-khtml-user-select: none; /* Konqueror HTML */
			-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
		}
		
		div.copyright {
			position: absolute;
			display: block;
			bottom: 14%;
			right: 2%;
			width: 20vh;
			height: 86%;
			float: left;
			text-align: right;
			color: #fffff8;
			writing-mode: vertical-rl;
		}	
		.header:first-of-type div.copyright {
			bottom: 34%;
		}
		@media only screen and (orientation: portrait) {
		div.copyright {font-size: 3.5vmin;}
		}