@font-face {
    font-family: 'headfont';
    src: url('fonts/3dumb-webfont.eot');
    src: url('fonts/3dumb-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/3dumb-webfont.woff2') format('woff2'),
         url('fonts/3dumb-webfont.woff') format('woff'),
         url('fonts/3dumb-webfont.ttf') format('truetype'),
         url('fonts/3dumb-webfont.svg#3dumbregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'titelfont';
    src: url('fonts/sling-webfont.eot');
    src: url('fonts/sling-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sling-webfont.woff2') format('woff2'),
         url('fonts/sling-webfont.woff') format('woff'),
         url('fonts/sling-webfont.ttf') format('truetype'),
         url('fonts/sling-webfont.svg#slingnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'normalfont';
    src: url('fonts/amaranth-regular-webfont.eot');
    src: url('fonts/amaranth-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/amaranth-regular-webfont.woff2') format('woff2'),
         url('fonts/amaranth-regular-webfont.woff') format('woff'),
         url('fonts/amaranth-regular-webfont.ttf') format('truetype'),
         url('fonts/amaranth-regular-webfont.svg#slingnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
	margin: 0px auto;
    background-color: #EFEFEF;
    text-align: center;
	font-family: "normalfont", Sans-Serif;
	font-size: 1.25em;
}

header, nav, footer, aside, section {
    display: block;
}

::selection {
    background: #ff0000;
    color: #fff;
}
::-moz-selection {
    background: #ff0000;
    color: #fff;
}

a {
	color: #000000;
//	background-color:#777777;
	border-bottom: 2px solid #FF0000;
	text-decoration:none;
	transition: color 0.18s;
}
a:hover {
	color: #FF0000;
	text-decoration:none;
}

section {
    text-align: left;
    margin-left: 90px;
//	border-left: 100px solid #CC9999;
    max-width: 2000px;
}

div#wrapper {
    background-color: #eeeeee;
//    max-width: 1200px;
    width: 100%;
}

div#top {
	position: fixed;
	top: 0;
	z-index: 4;

    width: 100%;
	height: 150px;
	padding-top: 10px;

	background-color: #BCBCBC;
	filter:alpha(opacity=95); /* IE */
	-moz-opacity:0.95; /* Gecko-Browser */
	opacity:0.95; /* Opera 9+ */

// 	line-height: 75px;
  	font-size:25px;
  	color: #555555;
	text-shadow: 4px 4px 2px rgba(150, 150, 150, .8);
//  	margin:auto;    
}
@media (max-width: 800px) {
div#top {
	height: 300px;}
}


.logo {
	font-family: titelfont;
  	font-size:50px;
  	color: #FF0000;
	font-weight: bold;
	text-shadow: 4px 4px 2px rgba(150, 150, 150, .8);
}	

hr {
	border: 0;
	color: #FF0000;
	border: 2px solid #FF0000;
	height: 0px;
	margin: 0px;
	padding: 0px;
}

hr.line {
	margin-bottom: 30px;
	clear: both;
}

div#navi {
	height:250px;
	width:100px;
	position:fixed;
	top: 165px;
	left: 10px;
	z-index: 5;
//	-webkit-filter: opacity(.75) saturate(1);
//	filter: opacity(.75) saturate(1);

//	filter:alpha(opacity=75);
//	opacity: 0.75;
//	-moz-opacity:0.75; 
}
div#navi:hover {
//	-webkit-filter: opacity(1) saturate(1);
//	filter: opacity(1) saturate(1);

//	-webkit-transition: 1s -webkit-filter saturate;
//	transition: 1s filter saturate;
	
//	filter:alpha(opacity=100);
//	opacity: 1.0;
//	-moz-opacity:1.0; 
}

nav ul {
	list-style:none;
	margin: 0;
	padding: 0;
}
nav li {
	list-style:none;
	margin: 0;
	padding: 0;
}

nav a {
	display:block;
	border-radius: 15px;
	width: 65px;
	height: 65px;
	background-size: 217px 65px;
	border: 2px rgb(89,89,89) solid;
	background: rgb(255,0,0);
	margin-top: 7px;
	font-size: 1px;
	color: rgb(255,0,0);
	transition: width 0.25s;
}

nav a:hover {
	width: 217px;
}

div#footer {
	height:50px;
	width:100%;
	background-color:#234885;
	position:absolute;
    border-top: 1px solid #123774;
    border-bottom: 1px solid #123774;
  	color:#FFFFFF;
}

p {
	margin:0px 50px 0px 50px;
	padding-bottom: 25px;
}

p.small {
	font-size: 0.8em;
}

h1 {
	font-family: "headfont", Sans-Serif;
	font-size: 2.5em;
	margin-top: 200px;
	margin-left: 50px;
	line-height: 80%;
	border-bottom: 4px solid #FF0000;
//	text-shadow: 0 -1px #FFF, 1px 0 #FFF, 0 1px #FFF, -1px 0 #FFF, 2px 2px #FFF, -2px 2px #FFF, 2px -2px #FFF, -2px -2px #FFF;
}
@media (max-width: 800px) {
h1 {
	margin-top: 350px;}
}

h2 {
	font-family: "headfont", Sans-Serif;
	font-size: 1.5em;
	padding-top: 40px;
	margin-left: 50px;
	line-height: 80%;
	border-bottom: 2px solid #FF0000;
	clear: both;
//	text-shadow: 0 -1px #FFF, 1px 0 #FFF, 0 1px #FFF, -1px 0 #FFF, 2px 2px #FFF, -2px 2px #FFF, 2px -2px #FFF, -2px -2px #FFF;
}

h3 {
    border-left: 45px solid #234885;
    padding-left: 10px;
	margin-right: 55px;
	clear: both;
}

section ol {
	margin:0px 35px;
	padding-bottom: 25px;
}

section ul {
	text-align: left;
	font-size: 0.80em;
	margin:10px 0px 10px 0px;
	padding: 0px 25px;
	list-style-type: square;
}

section ul.liste {
	text-align: left;
	font-size: 1em;
	margin:0px 50px 0px 150px;
	padding: 0px 0px 0px 25px;
	list-style-type: square;
}

img.left {
	border:0px;
	float: left;
//	margin-left: -55px;
	padding-right: 15px;
	padding-bottom: 15px;
}

img.right {
	border:0px;
	float: right;
//	margin-right: -55px;
	padding-left: 15px;
}

img.full {
	border:0px;
	width: 100%;
}
img.full > div#content{
	padding:25px 0px;
}

.hover-bild {
	width: 33.33333%;
//	min-width: 400px;
//	height: 500px;
	position: relative;
	overflow: hidden;
	float: left;
	text-align: left;
}

@media (max-width: 1000px) {
.hover-bild {
	width: 50%;}
}
@media (max-width: 700px) {
.hover-bild {
	width: 100%;}
}




.hover-box {
	display: none;
	width:250px;
//	height:250px;
	right:20px;
	top:20px;
	padding: 0px;
	margin: 0px;
	position: absolute;
	overflow: hidden;
	text-align: center;
	border-radius: 15px;
	background-color: rgba(255,255,255,0.8);
//	background-color: rgba(150,30,90, 0.7);
	z-index: 2;
		
	border: 2px rgb(89,89,89) solid;

	-moz-box-shadow:  6px 6px 5px 3px rgba(0,0,0,.75);
	-webkit-box-shadow:  6px 6px 5px 3px rgba(0,0,0,.75);
	box-shadow:  6px 6px 5px 3px rgba(0,0,0,.75);

	transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-o-transform:rotate(3deg);
}

a.hover-box {
	color: #fff;
	text-decoration: none;
}

.hover-box p {
	margin: 2px;
	padding: 5px;
}


.hover-bild:hover .hover-box {
	display: block;
}

div#box {
	width: 100%;
	postition relative;
}

div#box div{display:none;}

div#box:hover div {
	display:block;
	border-radius-bottom: 15px;
	width:160px;
	height:250px;
	position:fixed;
	background-color:#FFFFFF;
	bottom: 50px;
	right: 40px;
	padding: 0px;
	margin: 0px;
	z-index: 2;
	
	border: 2px rgb(89,89,89) solid;

	-moz-box-shadow:  6px 6px 5px 3px rgba(128,128,128,.5);
	-webkit-box-shadow:  6px 6px 5px 3px rgba(128,128,128,.5);
	box-shadow:  6px 6px 5px 3px rgba(128,128,128,.5);

	transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-o-transform:rotate(3deg);
}

div#box p {
	margin:2px;
	padding: 5px;
}

div#box h1 {
	display:block;
	margin:2px;
	padding: 5px;
	background-color:#FF0000;
}