@font-face {
 font-family: 'Special Elite'; /* Gewünschter Name */
 src: url('../fonts/SpecialElite-Regular.ttf');
           /* für IE9 */
 src: url('../fonts/SpecialElite-Regular.ttf?#iefix') 
           format('embedded-opentype'),
           /* für IE6-IE8 */
      url('../fonts/SpecialElite-Regular.ttf') 
           format('truetype');
         /* für Safari, Android, iOS */
}

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

/*allgemeine Formatierung für alle und kleine Bildschirme*/
body  {
	background-color: rgba(153, 204, 204, 0.8);
	color: #333333;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	line-height: 1.7em;
	height:100%
}
html {
	height:100%
}
a:link {
	color: #333;
	text-decoration:none;
}
a:visited {
	text-decoration: none;
	color: #333;
}
a:hover {
	text-decoration: underline;
	color: #C00;
}
a:active {
	text-decoration: none;
	color: #333;
}
h1{
	font-size:150%;
	font-weight:normal;
	text-align:center;
	font-family: 'Special Elite', cursive;
	padding:0.5em 0
}
h2{
	margin-bottom:0.8em;
	margin-top:0.5em;
	font-size:100%;
	font-weight:normal;
	color:#000
}
h3 {
	margin-top: 1.5em;
	color:#000;
	margin-bottom:0.6em;
	margin-top:0.5em;
	font-size:95%;	
}
p {
	margin-top: 0;
	padding-right: 0.5em;
	padding-left: 0.5em;
	padding-bottom:0.5em
}
div a {
	display:block;
	cursor:pointer;
	height:100%;
	width:100%;
	background-image:url(../images/audio.png);
	background-repeat:no-repeat;
}
div a:hover {
	background-color: rgba(255, 255, 255, 0.25);
}
div #b6 a {
	display:block;
	cursor:pointer;
	height:100%;
	width:100%;
	background-image:url(../images/video.png);
	background-repeat:no-repeat;
}
div #b4 a {
	display:block;
	cursor:pointer;
	height:100%;
	width:100%;
	background-image:url(../images/video.png);
	background-repeat:no-repeat;
}
div #b8_2 a {
	display:block;
	cursor:pointer;
	height:100%;
	width:100%;
	background-image:url(../images/video.png);
	background-repeat:no-repeat;
}
.nopic {
	background-image:none
}
#container {
	max-width:1250px;
	margin: 2em auto;  
	overflow:hidden;
	clear:both;
    } 
#container2 {
	max-width:1250px;
	margin: 2em auto;  
	overflow:hidden;
	clear:both;
	background-color: rgba(255, 255, 255, 0.8);
	-webkit-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.1);
	border-radius:0.5em;
    } 
.mainContent {
	margin:1em 0 2em 0;
	padding:1em 0;
	width:100%;
    } 
.box1 {
	margin:0.5em 0;
	padding:0;
	width:100%;
	height:100px;
	float:left;
}
.box2 {
	margin:0.5em 0;
	padding:0;
	width:100%;
	height:100px;
	float:left;
	display:none;
}
.box3 {
	margin:0.5em 0;
	padding:0;
	width:100%;
	height:100px;
	float:left;
	display:block;
}
.box4 {
	margin:0.5em 0;
	padding:0;
	width:100%;
	height:100px;
	float:left;
}
.box4a {
	margin:0.5em 0;
	padding:0;
	width:100%;
	height:100px;
	float:left;
	display:none
}
.box4x {
	display:none
}
.box5 {
	margin:0 0 0.6em 0;
	padding:0;
	width:100%;
	height:82px;
	display:none
}
.box5_2 {
	margin:0;
	padding:0;
	width:100%;
	height:82px;
	display:none
}

.schrift {
	font-family: 'Special Elite', cursive;
	font-size:200%;
}
.schrift1 {
	font-family: 'Special Elite', cursive;
	font-size:160%;
}
.schrift2 {
	font-family: 'Special Elite', cursive;
	font-size:120%;
}
.fuss {
	width:100%;
	padding:0.5em 0 2em 0;
	text-align:center;
	font-size:150%;
	line-height:2em
}
.fuss a {
	display:inline
}
.textbox {
	width:100%;
	padding:2em 1em 2em 0;
	float:left;
}
.textbox a {
	display:inline
}
.textbox2 {
	width:100%;
	padding:2em 0 2em 0;
	float:left;
	background-image:url(../images/str.png);
	background-repeat:no-repeat;
	background-position:37em 9em
}
.textbox2 p img {
	margin-right:1em;
	float:left;
}
.textbox3 {
	width:50%;
	padding:2em 0 2em 0;
	float:right;
}
.textbox3 p img {
	margin-left:0.2em;
	float:right;
}
.textbox4 {
	width:52%;
	padding:2em 0 2em 0;
	float:left
}
.textbox4 img {
	margin-right:1.5em;
	float:left;
	border:#FFF medium solid
}
.textbox5 {
	width:50%;
	padding:2em 0 2em 0;
	float:left;
	background-image:url(../images/06.png);
	background-repeat:no-repeat;
	background-position:right;
}
.box6 {
	margin:0 0 0.6em 0;
	padding:0;
	width:100;
	height:214px;
}
.box6_2 {
	margin:0;
	padding:0;
	width:100;
	height:72px;
}
.textbox5 img {
	margin-right:2em;
	clear:both
}
	
@media screen and (min-width:580px){
	/*mittlere Bildschirme*/
body  {
	font-size: 90%;
}
h1{
	font-size:250%;
	font-weight:normal;
	text-align:center;
	font-family: 'Special Elite', cursive;
}
p {
	margin-top: 0;
	padding-right: 2em;
	padding-left: 0.5em;
	padding-bottom:0.5em
}
.mainContent {
	margin:1em 1% 2em 1%;
	padding:1em 0;
	width:100%;
    } 

.box1 {
	margin:0.3em;
	padding:0;
	width:35%;
	height:175px;
	float:left;
	display:block
}
.box2 {
	margin:0.3em;
	padding:0;
	width:11%;
	height:175px;
	float:left;
	display:block
}
.box4 {
	margin:0.3em;
	padding:0;
	width:23%;
	height:175px;
	float:left;
	display:block
}
.box4x {
	margin:0.3em;
	padding:0;
	width:23%;
	height:175px;
	float:left;
	display:block
}

.box4a {
	margin:0.3em;
	padding:0;
	width:23%;
	height:175px;
	float:left;
	display:block;
}
.box3 {
	margin:0.3em;
	padding:0;
	width:98%;
	height:100px;
	float:left;
	background-color:#CCC;
	display:none;
}
.box5 {
	margin:0 0 0.6em 0;
	padding:0;
	width:100;
	height:82px;
	display:block
}
.box5_2 {
	margin:0;
	padding:0;
	width:100;
	height:82px;
	display:block
}
.box6 {
	margin:0 0 0.6em 0;
	padding:0;
	width:100;
	height:214px;
}
.box6_2 {
	margin:0;
	padding:0;
	width:100;
	height:72px;
}
.textbox {
	width:50%;
	padding:2em 0 2em 0;
	float:left;
}
}
@media screen and (min-width:960px){
	/*große Bildschirme*/
body  {
	font-size: 90%;
}
h1{
	font-size:350%;
	font-weight:normal;
	text-align:center;
	font-family: 'Special Elite', cursive;
	color:#333
}
.box1 {
	margin:0.3em 0.3em 0.3em 0;
	padding:0;
	width:36%;
	height:294px;
	float:left;
	
}
.box2 {
	margin:0.3em;
	padding:0;
	width:12%;
	height:294px;
	float:left;
	
}
.box4 {
	margin:0.3em;
	padding:0;
	width:24%;
	height:294px;
	float:left;	
	overflow:hidden
}
.box4x {
	margin:0.3em;
	padding:0;
	width:24%;
	height:294px;
	float:left;	
	overflow:hidden
}
.box4a {
	margin:0.3em 0.3em 0.3em 0;
	padding:0;
	width:24%;
	height:294px;
	float:left;
	overflow:hidden
}
.box5 {
	margin:0 0 0.6em 0;
	padding:0;
	width:100;
	height:143px;
}
.box5_2 {
	margin:0;
	padding:0;
	width:100;
	height:143px;
}
.box6 {
	margin:0 0 0.6em 0;
	padding:0;
	width:100;
	height:214px;
}
.box6_2 {
	margin:0;
	padding:0;
	width:100;
	height:72px;
}

.textbox {
	width:50%;
	padding:2em 0 2em 0;
	float:left;
}
}