* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body, main, header{
	width: 100%;
}

html {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888061+0,555555+40,5a453a+100&0.5+0,0.5+100 */
    background: -moz-linear-gradient(top, rgba(136,128,97,0.5) 0%, rgba(85,85,85,0.5) 40%, rgba(90,69,58,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(136,128,97,0.5) 0%,rgba(85,85,85,0.5) 40%,rgba(90,69,58,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(136,128,97,0.5) 0%,rgba(85,85,85,0.5) 40%,rgba(90,69,58,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80888061', endColorstr='#805a453a',GradientType=0 ); /* IE6-9 */
	background-color: #666;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 1000px;
}

body {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
/*--------HEADER-----------*/

header {
	height: 120px;
	display: block;
	position: absolute;
	z-index: 10090;
	background-color: #042037;
}

h4.main-header {
	font-size: 2.5em;
	font-weight: 200;
	color: #DDD;
	text-align: center;
	padding: 30px 0 0 0;
	text-shadow: 4px 4px 15px black;
}

/*----------NAVIGATION---------*/

nav {
	width: 20%;
	max-width: 250px;
	height: 100%;
	float: left;
	z-index: 10020;
	position: absolute;
}

.nav-wrapper {
	border-right: 4px solid #29506D;
	width: 20%;
	height: 100%;
	padding: 27px 0 0 0;
	background-color: #123652;
	position: fixed;
	z-index: 10000;
}

#header-hidden-wrapper { /*Platzhalter, positioniert den Header der Navigation*/
	height: 90px;
}

#header-hidden {
	display: none;
	position: absolute;
	font-size: 1.6em;
	font-weight: 100;
	width: 100%;
	color: #ddd;
	padding: 0 0 21px 10px;
	border-bottom: 4px solid #29506D;
	text-shadow: 4px 4px 15px black;
}

#leer{
	height: 0; /*Leeres erstes Listenelement. Wird für Media Query bei kleinen Bildschirmen gebraucht*/
}

.navelement, .subnavelement { /*Style für Navigationselemente und deren Submenüpunkte*/
	width: 100%;
	position: relative;
	padding: 6px;
	border-bottom: 1px solid #0E0E39;
}

.navelement:hover, .subnavelement:hover { /*Highlight beim Hovern mit der Maus*/
	background-color: #042037;
	transition: 0.2s background-color;
}

.navelementsmall { /*Style für kleines Navigationselement*/
	width: 100%;
	font-size: 0.8em;
	position: relative;
	padding: 6px;
	border-bottom: 1px solid #0E0E39;
}	
.navelementsmall:hover { /*Highlight beim Hovern mit der Maus*/
	background-color: #042037;
	transition: 0.2s background-color;
}

.subnav { /*Positioniert und gestaltet die Submenüpunkte*/
	position: absolute;
    left: 100%;
    top: 0;
    overflow: hidden;
	min-width: 200px;
	max-width: 100%;
	opacity: 0;
	transition: .4s opacity;
	background: #496D89;
	border-right: 5px solid #042037;
	border-left: 5px solid #042037;
	white-space: nowrap;
	z-index: 10020;
}

.navelement:hover > .subnav { /*Zeigt beim Hovern über ein Navigationselement dessen Submenüpunkte an*/
    opacity: 1;
	z-index: 10030;
}

.highlighted { /*Farbe beim Hovern über ein Navigationselement*/
	background-color: #042037;
}

.highlighted2 { /*Farbe des gerade aktiven Navigationselement*/
	background-color: #333;
}

/*----------HAUPTTEIL-------------*/

.text-section { /*Der Hauptteil der Seite, der den Platz neben der Navigation und unter dem Header einnimmt*/
	width: 80%;
	float: right;
	margin: 0 0 0 0;
	position: relative;
	top: -10;
	z-index: 10010;
}

h1 {/*Haupt-Überschrift einer Seite (kann auch mehrmals pro Seite eingebaut werden)*/
	font-size: 64px;
	font-weight: 100;
	color: #DDD;
	text-shadow: 4px 4px 15px black;
	width: 125%;
	display: block;
	margin: 0 0 40px 0;
	padding: 15px 0 40px 45%;
	position: relative;
	right: 25%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.6+0,0+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

h1.nobackground {
	background: none;
	margin: 40px 0 0 0;
	padding: 15px 0 40px 45%;
}

h2,h3,h4 { /*Überschrift 2 für Absatz im Text*/
	font-size: 38px;
	font-weight: 100;
	color: #DDD;
	text-shadow: 4px 4px 15px black;
	width: 60%;
	display: block;
	margin: auto;
	padding-bottom: 25px;
}

h3 { /*Überschrift 3 für Absatz im Text*/
	font-size: 28px;
	padding-bottom: 5px;
}

h4 { /*Überschrift 4 für Absatz im Text*/
	font-size: 22px;
        padding-top: 5px;
	padding-bottom: 5px;
}

p , .intext-list{ /*Style für normale Textabschnitte und Listen im Text*/
	font-size: 1.2em;
	color: #DDD;
	width: 60%;
	display: block;
	margin: auto;
	padding-bottom: 40px;
} 

.intext-list{
	list-style: none;
}

.intext-list > li {
	padding: 5px;
}

.italic { /*Macht beliebigen Text/Textabschnitt (mit <span class="italic"></span>) kursiv*/
	font-style: italic;
}

.bold { /*Macht beliebigen Text/Textabschnitt (mit <span class="bold"></span>) fett*/
	font-weight: 600;
}

.in-text-pic { /*Bindet ein Bild in den Textblock ein*/
	width: 60%;
	display: block;
	margin: auto;
}

h6.img-caption, .img-subcaption { /*Bildunterschrift für Bilder im Textblock*/
	font-size: 1.2em;
	font-weight: 400;
	color: #BBB;
	width: 100%;
	display: block;
	margin: auto;
	margin-top: 10px;
	padding: 0 15px 0 15px;
}

h6.img-subcaption { /*Sub-Bildunterschrift für Bilder im Textblock*/
	font-size: 0.8em;
	margin: 0 0 50px 0;
	padding: 10px 0 0 57px;
}

.pfeil { /*Style für die Pfeile am Anfang der Bildunterschrift im Textblock*/
	font-size: 1.6em;
	color: #333;
	text-shadow: 1px 1px 2px #BBB;	
}

.img-shadow{ /*Schatten und weitere Einstellungen für Bilder im Textblock*/
	box-shadow: 4px 4px 15px black;
	max-width: 100%;
	height: auto;
	max-height: 600px;
	border: none;
}

a:link {
	color: #66B5FF;
	text-decoration: none;
}

a:hover, a:active{
	color: #29506D;
}

a:visited {
	color: #123652;
}

/*----------LITERATURVERWEISE----------*/

a.zitat:link {
	text-decoration: none;
	font-size: inherit;
	color: #AAA;
	/*text-transform: uppercase;*/
}

a.zitat:hover {
	text-decoration: underline;
}

a.zitat:visited {
	color: #AAA;
}

a.zitat:active {
	color: #AAA;
}

.zitatbox {
	display: none;
	height: auto;
	width: 300px;
	color: #DDD;
	font-size: 12px;
	padding: 10px;
	background-color:#123652;
	list-style:none;
	z-index:10090;
	border-radius: 7px;
}


/*-----------GALERIE-------------*/

.gallery-wrap { /*Äußere Begrenzung der Galerie*/
	width: 60%;
	float: right;
	margin: 0 8% 0 60px;
	z-index: 10015;
}

.thumb-wrap { /*Äußere Begrenzung von Thumbnail und Beschriftung*/
	width: 27%;
	height: auto;
	display: inline-block;
	margin: 0 3% 0 3%;
}

img.thumbnail { /*Style für Thumbnail*/
	width: auto;
	max-width: 100%;
	max-height: 225px;
	display: block;
	margin: auto;
}

.thumb-description { /*Beschriftung unter Thumbnail*/
	font-size: 1em;
	text-align: center;
	color: #FFF;
	min-height: 100px;
	padding: 10px;
}

.thumb-highlighted { /*Für jquery, fügt Umrandung hinzu, wenn Maus über ein Thumbnail hovert*/
	border: 2px solid grey;
}


/*---------STYLES FÜR INTERAKTIVES PROFIL-----------*/


.profil-container { /*Container zum Einfügen des interaktiven Profils*/
	width: 80%;
	float: right;
}

.profil-interaktiv { /*Interaktives Profil (Nicht responsive! Festgelegte Größe!)*/
	width: 700px;
	height: 994px;
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	margin: 20px 0 50px 20% ;
}

.profil-overlay {
	width: 700px;
	height: 994px;
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
}

.abschnitte-container {
	width: 32%;
	height: 100%;
	margin-right: -31%;
	float: right;
	overflow: hidden;
}

.profilabschnitt { /*Beschriftung Profilabschnitte*/
	display: block;
	width: 100%;
	padding: 0 10px;
	background-color: #333;
	font-size: 20px;
	text-decoration: none;
	border-bottom: 2px solid rgba(0,0,0,0.2);
	border-right: 10px solid #123652;
}

.profilabschnitt:link { /*Link-Style der Profilabschnitte vor dem Anklicken*/
	color: #DDD;
	text-decoration: none;
}

.profilabschnitt:hover { /*Link-Style der Profilabschnitte beim Hovern mit der Maus*/
	color: #EEE;
	text-decoration: none;
	background-color: #123652;
}

.profilabschnitt:visited { 
	color: #AAA;
	text-decoration: none;
}

.profilabschnitt:active { 
	color: #AAA;
	text-decoration: none;
}

#oben:hover, #unten:hover {
	background-color: #333;
}

#unten {
	border-bottom: 0px;
}

/*----------LINK STYLES----------*/

a.navlink:link {
	text-decoration: none;
	font-size: 1.2em;
	color: #DDD;
}

a.navlink:visited {
	color: #DDD;
}


/*----------MEDIA QUERIES----------*/


@media screen and (max-width: 1600px) {
	a.navlink:link {
		font-size: 0.9em;
	}
	
	.navelement, .subnavelement {
		padding: 3px 6px;
	}
	
	#leer {
		height: 16px;
	}
	
	h1 {
		font-size: 3em;
	}
}

@media screen and (max-width: 1200px) {
	#header-hidden {
		font-size: 1.2em;
	}
}