@charset "utf-8";

/* ===
theme: ELEMENTS
datum: juli 2016
autor: sun
=== */



/* ===
			ALLGEMEINE ELEMENTE ========================================
=== */

/* googlefonts import */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

/* typo allgemein */
body { 
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	color: rgba(129,131,135,1);
}

/* ueberschrift 01 */
h1 {
	position: relative;
	clear: both;
	padding: 5px 0px 0px 15px;
	font-size: 30px;
	font-weight: 600;
	line-height: 150%;
}

/* ueberschrift 02 */
h2 {
	position: relative;
	clear: both;
	padding: 0px 0px 0px 0px;
	font-size: 20px;
	font-weight: 600;
	line-height: 150%;
}

/* ueberschrift 03 */
h3 {
	position: relative;
	clear: both;
	padding: 0px 0px 0px 0px;
	font-size: 15px;
	font-weight: 600;
	line-height: 150%;
}

/* bildunterschrift */
h4 {
	position: relative;
	clear: both;
	padding: 10px 15px 10px 15px;
	font-size: 15px;
	font-weight: 400;
	line-height: 150%;
}

/* link impressum */
h5 {
	font-size: 12px;
	font-weight: 600;
}

/* fließtext */
p {
	position: relative;
	clear: both;
	padding: 0px 60px 0px 60px;
	font-size: 20px;
	font-weight: 400;
	line-height: 150%;
}

a { 
	text-decoration: none;
	outline: none;
}

ul { list-style-type: none; }

li { 
	font-size: 15px;
	font-weight: 400;
}

.fett01 { font-weight: 600; }

.fett02 { font-weight: 600; font-size: 25px; margin-right: 30px; }

.fett03 { font-weight: 600; margin-right: 30px; }

/* ===
			LAYOUT ELEMENTE ========================================
=== */

/* logo */
#logo a img {
	position: absolute;
	width: 130px;
	height: 130px;
	top: 20px;
	right: 20px;
	z-index: 10;
}

/* ===== navigation start */

#header li {
	float:left;
	margin: 30px 0 0 15px;
	font-size: 15px;
	font-weight: 600;
	z-index: 10; 
}

#header li a {
	padding: 30px 4px 2px 4px;
	color: #ffffff;
	background-color: rgba(0,0,0,0.3);
	box-shadow: -5px -5px 15px rgba(0,0,0,0.2);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
}
	
#header li a.sie-sind-hier { background-color: rgba(86,206,231,1); } /* petrol */

#header li a.top-link { background-color: rgba(0,0,0,0.8); } /* black */

#header li a:hover { background-color: rgba(86,206,231,1); } /* petrol */

/* ===== navigation ende */

/* back-button */
#back a img {
	position: fixed;
	width: auto;
	height: 30px;
	top: 155px;
	left: 0px;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	z-index: 10;
}

#back a img:hover { opacity: 0.8; }

/* top-button */
#top a img {
	position: absolute;
	width: 30px;
	height: auto;
	bottom: 0px;
	left: 935px;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	z-index: 10;
}

#top a img:hover { opacity: 0.8; }

/* link impressum */	
#footer h5 a {
	position: absolute;
	bottom: 10px;
	left: 80px;
	color: rgba(129,131,135,0.8);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;	
}

#footer h5 a:hover { color: rgba(129,131,135,1); }



/* ===
			SONSTIGE ELEMENTE ========================================
=== */

.spacer01 {
	position: relative;
	height: 90px;
	clear: both;
}

.spacer02 {
	position: relative;
	height: 60px;
	clear: both;
}

.spacer03 {
	position: relative;
	height: 30px;
	clear: both;
}

.spacer04 {
	position: relative;
	height: 15px;
	clear: both;
}

/* clear float */
.clear { clear: both; }