/* navigationsliste:
<li><a href="/todo">To-Do-Liste</a></li>
für die todo-liste
*/




body {
	position: relative;
	background-color: white;
	margin: 0;
	line-height: 0;
	min-height: 100vh;
	font-family: /*Century Gothic,*/ Arial;
	/*#5D6E79*/
}

body div {
	line-height: 1;
}

.mobile {
	display: none;
}

.desktop {
	display: block;
}

#Datenschutz {
	position: relative;
	font-size: 1.0vw;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 50%;
	white-space: pre-line;
}

#willkommen {
	position: relative;		/*---text unter bild anzeigen lassen....*/
	left: 25%;
	width: 50%;
	text-align: center;
	font-size: 1.5vw;

}

#impressum {
	position: relative;
	font-size: 1.3vw;
	white-space: pre;
}

#header {
	margin-bottom: 1%;
}

#headerlogo {		
	position: relative;
	text-align: center;
	font-family: /*Century Gothic, */Arial;
	font-size: 3vw; 

}

#body {
	display: inline-block;
	position: relative;
	width: 100vw;
	text-align: center;
}

#logo {
	position: relative;		
	width: 25%;
}

#portrait {
	width: 9vw;
	position: relative;
	border: 1vw solid white; 
}

#kontakt {
	position: relative;
	font-size: 1.5vw;
	line-height: 1.6vw;
}
#todo {
	position: relative;
}

/* navigation */

#navigation {
	display: inline-block;		
	position: absolute;
	z-index: 100; /* layer hervorheben test, damit navigation immer anklickbar*/
	width: 13vw;
/*	vertical-align: top;*/
/*	left: 5%; */
}

#navigation ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: relative;
	left: 2vw;
}

#navigation a {
	color: black;
	text-decoration: none;
	font-size: 1.5vw;
	line-height: 3vw;
	/* transition: 0.3s; */
}

#navigation a:hover {
	color: black;
	font-weight: bold;
 	/* font-size: 160%; */
}

#navigation a:visited {
	color: black;
}

#navigation .projects a {
	line-height: 2vw;
}

#navigation li ul {
	display: none;
	position: relative;
	left: 12%;
}

#navigation .selected > ul {
	display: inline;
}

#navigation a.selected {
	font-weight: bold;
}

.footer {
	width: 100vw;
	background-color: white;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	color: darkgray;
}

#footer {
	position: absolute;
	font-size: 1.0vw;
	bottom: 0px;
}

#evilfooter {
	position: relative;
	visibility: hidden;
}

.footer a, .footer a:visited {
	text-decoration: none;
	color: darkgray;
}

#main .imagelist {
	display: none;
}

code {
	color: blue;
}

x-important {
	color: darkred;
}

strike {
	color: gray;
}

strike x-important {
	color: gray;
}

strike:hover {
	text-decoration: none;
	color: darkgray;
}

h1 {
	display: inline-block;
}

/* ImageViewer */


.imageviewer {
	display: inline-block;
	/* -sand-transform: translate(-50%, 0%); */
	/* transform: translate(-50%, 0%); */
}

.imageviewer .mainimage {	
	overflow: hidden;
	height: 29vw;
	width: 56vw;
}


/*
	ease - specifies an animation with a slow start, then fast, then end slowly (this is default)
	linear - specifies an animation with the same speed from start to end
	ease-in - specifies an animation with a slow start
	ease-out - specifies an animation with a slow end
	ease-in-out - specifies an animation with a slow start and end
	cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
*/
.imageviewer .imagequeue {

	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-ms-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}


.imageviewer .imagelist, .imageviewer .mainimage {
	position: relative;
	width: 56vw;
	text-align: center;
}

.imageviewer .imagequeue div {
	width: 56vw;
	height: 29vw; 
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.imageviewer .imagelist div {
	width: 7.2vw;
	height: 4vw;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: inline-block;
	border: 4px solid white; 
/*	margin-left: 1vw; */
}

.imageviewer .previous, .imageviewer .next {
	visibility: hidden;
	width: 40px; 
	height: 40px;
	position: absolute; 	/*sobald relative, buttons verschwunden*/
	top: 50%;				/*selbst bei absoluter positionsangabe bleiben sie verschwunden, wenn man statt % vh nimmt.*/
/* 	transition: 1s; */
}

.imageviewer .previous:hover, .imageviewer .next:hover {
	display: inline-block;
	background-position: 0 40px; /*0 40px*/
}

.imageviewer .previous {
	left: 0%;
	-sand-transform: translate(0%, -50%);
/*	transform: translate(0%, -50%);*/
	background-image: url('/images/previous-button.png');
	
	
}

.imageviewer .next { 
	left: 100%;
	-sand-transform: translate(-100%, -50%);
/*	transform: translate(-100%, -50%);*/
	background-image: url('/images/next-button.png');
	
	
}
/*
.imageviewer .hover {		möglich den cursor beim überfahren der kleinen bildchen schon zu ändern?
	cursor: pointer;
}

.imageviewer .selected {
	border: 4px blue;
}
*/
.imageviewer .clickable {

/* http://www.w3schools.com/cssref/pr_class_cursor.asp */
	cursor: pointer;
}

.imageviewer .mainimage:hover .next, .imageviewer .mainimage:hover .previous {
	visibility: visible;
}

@-webkit-keyframes imageviewer_next {
	from { 
		left: 0%;
	}
	to {
		left: -100%;
	}
}

@-webkit-keyframes imageviewer_previous {
	from { 
		left: 0%;
	}
	to {
		left: 100%;
	}
}

@-moz-keyframes imageviewer_next {
	from { 
		left: 0%;
	}
	to {
		left: -100%;
	}
}

@-moz-keyframes imageviewer_previous {
	from { 
		left: 0%;
	}
	to {
		left: 100%;
	}
}

@-o-keyframes imageviewer_next {
	from { 
		left: 0%;
	}
	to {
		left: -100%;
	}
}

@-o-keyframes imageviewer_previous {
	from { 
		left: 0%;
	}
	to {
		left: 100%;
	}
}

@keyframes imageviewer_next {
	from { 
		left: 0%;
	}
	to {
		left: -100%;
	}
}

@keyframes imageviewer_previous {
	from { 
		left: 0%;
	}
	to {
		left: 100%;
	}
}