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

@import url(https://fonts.googleapis.com/css?family=Marcellus);

html {
   --navy: #004;
	--white: #f0f0f1;
	--brightwhite: #ffffff;
	--sky: #abcdef;
	--blue: blue;
	
   --h2color: var(--white);
	--textcolor: var(--navy);
	--nav-bg: var(--navy); 
   --nav-hover: var(--brightwhite);
}

body { 
	position:absolute; 
	top:0; left:0; 
	width:100vw; 
	min-height:100%; 
	height:100%;
	background-color: var(--sky); /* light blue */
	background-image: url('../L1020364.jpg'); /* fallback - always above! */
  	background-image: -webkit-image-set(url('../L1020364.jpg') 1x, url('../L1020364_@2x.jpg') 2x);
	background-attachment:fixed;
	background-position:center;
	background-size: cover;
	background-repeat:no-repeat;
	font-family:'Marcellus', Times, serif; 
	text-align:left;
	line-height:1.5;
	letter-spacing:normal;
	vertical-align:middle;
   color: var(--navy); /* dark blue */
	overflow-x:hidden;
	overflow-y:auto;
}

/* ===============================================
	Headline auf Startpage
	===============================================*/

#headline { /* nur Startseite */
	position: relative;
	background-color: transparent; 
	text-align:center;
	max-width:100%;
	margin:12vh 1rem 0 1rem;
	}
#headline h2 { 
	color: var(--brightwhite);
	 text-transform:uppercase;
	}
		
@media screen and (min-width: 560px) {
	#headline { /* nur Startseite */
		text-align:left;
		margin-top:25vh;
		margin-left:12rem;
		max-width:65%;
		}	
}

/* ===============================================
Navigation
===============================================*/

nav { 
	position:fixed; 
	z-index:100;
	left:12rem; 
	width:calc(100% - 12rem); 
	bottom:10vh;
	background-color: var(--navy); 
	height:3rem;
	}

nav h4 { 
	position:relative; 
	left:-12rem;
	float:left; 
	text-align:right;
	background-color: var(--navy); /* dark blue */
	width:11.85rem;
	padding-right:1rem;
	height:3rem;
	}
nav h4 a { 
	display: block; 
	text-decoration:none;
	color: var(--white); 
	line-height:1;
	}
	
nav img { 
	position: absolute;
	display: inline-block;
	top:0; left:0.5rem; 
	height:100%; width:auto;
	}
	
nav div { 
	position:absolute;
	top: 0; left:5rem;
	height:3rem;
	width:calc(100% - 6rem); 
	 }

nav div a { 
	color: var(--white);
	padding: 0.5rem; margin: -.5rem;  /* increase the clickable area on links */
	text-decoration:none; 
	line-height: 3;
	}
nav div a:hover { 
	text-decoration:underline overline;
	}

.nav-flex-container {
	display: -webkit-flex;
	display: flex;
		-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
} 
.nav-space-between { 
	  -webkit-justify-content: space-between; 
	justify-content: space-between; 
}   

@media screen and (max-width: 560px) {
	nav img { display:none; }
	nav div { left:0; width:100%; padding:0 0.5rem;}
}
@media screen and (max-width: 756px) {
	nav div a { line-height: 1.5rem; }
}
@media screen and (min-width: 1240px) {
	nav div { width: 65%; } 
}

 /* ===============================================
	Content-style
	===============================================*/
#center {
	position: absolute;
	width: 800px; height: 600px;
	top: 50%; left: 50%;
	margin-top: -300px; margin-left: -400px;
	z-index: 1;
	visibility: visible;
	overflow: auto;
}

.shadowed {
-webkit-filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.75));
filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.75));
}

.box {
	position: relative;
	background-color: var(--white); 
	opacity: 0.85;
	width: min(40ch, 96% - 2rem);
	text-align: left;
	margin: auto; /* magic holygrale */
	padding: 2rem 2rem 10rem 2rem;
}

.box h3 {
	position:relative;
	text-transform:uppercase;
	font-weight: bold;
	margin:3rem 0;
}

.box div { text-align:center; } 

.box a, .box a:visited { 
	color: var(--navy); 
	/*text-decoration:none;*/
	text-decoration:dotted; 
	text-decoration-color:currentColor;  
	}

.box a:hover, .box a:active, .box a:focus { 
	color: var(--blue); 
	text-decoration:underline; 
	text-decoration-color: var(--blue); 
}

.box img { 
	margin:1rem 0.5rem 1rem 0;
	padding:0.25rem;
	width:75%; height:auto;
	border: solid 2px;
	border-color: var(--brightwhite); 
	background: var(--brightwhite);
	opacity: 100%; 
}


.widget { /* Hajoona-Logo right */
	position:absolute;
	z-index:2001;
	right:0rem;
	top:10%;
	/*	-webkit-transform: rotate(18deg); 
		-moz-transform: rotate(18deg); 
		-o-transform: rotate(18deg); 
    transform: rotate(18deg); */
	color: var(--white);
	width:140px;
	}
.widget-left { /* Hajoona-Logo*/
	position:absolute;
	z-index:2001;
	left:0;
	top:1rem;
	width:140px;
	}
.widget img {
	 height:auto; width:140px;
	}