@media screen {

		body, html{
			min-height:101%;
		}

		body {
			background-image: url(ximg/bg.gif);
			background-position: top;
			background-repeat: repeat-x;
			background-color: #fff;
			margin: 0px;
			font-family: Georgia, serif;
			font-size: 11pt;
			}
		#container {
			width: 980px;
			height: auto;
			margin-left: auto;
			margin-right: auto;
			position: relative;
			}
		#head {
			background-image: url(ximg/motoo-logo.jpg);
			background-repeat: no-repeat;
			width: 320px;
			height: 120px;
			display: block;
			margin: 0 0 0 86px;
			background-position:0 30px;
			}
		#nav {
			position: absolute;
			top: 116px;
			left: 38px;
			font-size: 14pt;
			width: 900px;
			height: 20px;
			z-index: 10;
		}
		#nav a {
			padding-left: 48px;
			text-transform: uppercase;
			font-weight: bold;
			}

		#nav a span {
			font-size: 8pt;
			display: inline-block;
			width: 100px;
			vertical-align: bottom;
		}

		#main {padding: 45px 0 20px 88px;}

		a {
			color: #578A38;
			text-decoration: none;
			}
		a:hover {
			color: #DF6C26;
			}
		h1 {
			font-size: 1.2em;
			color: #DF6C26;
			}

		ul {text-transform: uppercase;
			color: #c00;
			list-style: none;
			}
		li {
		float: left;
			}
		li a{

			}
		#left {
			width: 470px;
			}

		#left.musik { height: 880px; }

		#left.bob { height: 780px; }

		#right {
			position: absolute;
			top: 180px;
			left: 560px;
			width: 450px;
			padding-left: 18px;
			padding-bottom: 20px;
			}
		#ausgabe {
			border: 1px dotted #c00;
			}
		.imgleft {
			background-image: url(ximg/instrument.jpg);
			background-position: right bottom;
			background-repeat: no-repeat;
			}

		.imgright {
			background-image: url(ximg/cheer.jpg);
			background-repeat: no-repeat;
			background-position: 140px 0;
			z-index: 1;
			}

		td {
			padding: 4px;
			vertical-align: top;
		}
		form, input {
		  	font-family: georgia;
		  	font-size: 13px;
			  line-height: 20px;
		}

		input.sizetext { width: 220px; }
		input.sizestk { width: 16px; }

		.submit {
		  	background-color: #cc9;
		  	border: 2px solid #fff;
		  	text-transform: uppercase;
		  	font-size: 13px;
		}
		form {
		  	color: #fff;
		  	background-color: #578A38;
		  	padding: 10px;
			width: 380px;
			margin-top: 16px;
		}
		input, textarea {
		  	padding: 2px 2px 2px 3px;
		  	vertical-align: top;
		}
		.feldnamen {
		  	width: 30px;
		  	float: left;
		  	clear: left;
		}
		#spam {
		  	color: #000;
		  	background-color: #fff;
		  	font-size: 9pt;
		  	border: 2px double #c00;
		  	padding: 10px;
		}

		p { text-align: justify; line-height: 1.4em; }

		.d { padding-right: 80px;
			color: #DF6C26;	}

		.f {color: #578A38;}

		p.texte { font-size: 14px; color: #578A38; }

		span.writer { display: block; font-style:italic; font-size: 11px; }
		span.title { font-size: 15px; font-weight:bold; color: #DF6C26; }

		.e {padding-right: 80px;
			color: #578A38;	}

		.g { padding-right: 120px;
			color: #DF6C26; }

		.h {padding-right: 120px;
			color: #578A38;	}

		.error {
			border: 2px dotted yellow;
			width: 352px;
			padding: 10px;
			font-size: 12pt;
			line-height: 1.3em;
			}
		.emailversand {
			width: 351px;
			color: green;
			background-color: #fff;
			font-size: 15pt;
			padding: 10px;
			border-bottom: 4px solid orange;
			text-align: center;
			}
		.current { color: #DF6C26;}

		p#player3 { margin-top: 40px; }

		.movie { margin-top: 14px; }

		.musik img { margin-top: 20px; }

		.audio { margin-bottom: 40px; width: 778px; line-height: 1em; min-height: 380px; }
		.audio h1 { color: #DF6C26; margin: 0; }
		.audio h2 { color: #578A38; font-size: 1em;}

		.audio-1, .audio-2, .audio-3 { border: 1px solid #578A38; padding: 10px; }

		.musik{ float: left; }
		.audioimg { margin-left: 450px; }

		p.download {
			width: 324px;
			height: 80px;
			background-color: #578A38;
			margin: 40px 0;
			text-align: center;
			display: block;
		}

		p.top { margin-top: 0; }

		p.download a {
			color: #FFF;
			text-transform: uppercase;
			font-weight: bold;
		}

		p.download a:hover {
			color: #DF6C26;
		}

		p.assets { margin-top: 30px; }
		p.assets a { display: inline-block; margin-right: 16px; }

		.mbottom { padding-bottom: 240px; }
		.imgbottom { margin-top: 12px; }

		.responsive { display: none; }

		ul.cd li { float: none; line-height: 2rem; text-transform: none; }
}

/*@media only screen
and (min-width: 0px)
and (max-width: 1024px)*/

@media only screen
and (min-device-width: 0px)
and (max-device-width: 1024px)
{

	#container, #head, #nav { width: 100%; }
	#main { padding: 45px 0 20px 0; margin: 0 0 0 4%; }
	#nav { left: 0; }

	#nav a.first { padding-left: 4%; }
	#head, #main > h1 { margin-left: 4%;  }
	#left {	width: 90%; margin: 0 0 0 4%; }
	#right { position: relative; left: 0;	top: 10px; width: 90%; margin: 0 0 0 4%; padding: 0; }
	.movie { width: 90%; margin-left: 4%; }

	.musik { height: auto; }
	#left.bob { height: auto; }
	.imgleft { background-image: none; }
	.mbottom { padding-bottom: 0; }

	.audio { width: 90%; margin: 0 auto 20px auto; }
	.audioimg { margin-left: 50%; }

}

/*@media only screen
and (min-width : 375px)
and (max-width : 667px)
and (orientation : portrait)*/

@media only screen
and (min-device-width : 0px)
and (max-device-width : 812px)
and (orientation : portrait)
/*@media screen and (max-width: 414px) and (orientation: portrait)*/ {
	body {overflow-x: hidden}
	.audio { width: 90%; }
	.audioimg { margin:0; }
	.audioimg img { position: relative; margin-top: 20px; }
  	audio { width: 100%;  }

	.movie { width: 100%; margin-left:-10px; }
	.musik { height: auto; float: none; }

	#head { z-index: 99; }
	#main { z-index: 1; margin-top: 100px; }

	p.texte {}

	#nav { display: none; background-color: #FFF; height: 85vH; top: 106px; padding-top: 80px; }
	#nav a { display: block; padding-left: 4%; background: #fff; line-height: 1.8em; font-size: 2em; }

	#nav a span { line-height: 1.1em; font-size: 10pt; vertical-align: baseline; }

	.responsive { display: block; position: absolute; top: 120px; left: 0; background-color: #578A38; width: 30%; height: 50px; color: #fff; font-size: 2em; font-weight: bold; padding-left: 4%; padding-top: 10px; cursor: pointer; z-index: 999; }

	#left, form { width: 100%; }
	form { font-size: 1.6em; }
	#contact #left { margin-left: 0; }
	audio { height:100px; }
	.audioimg img { width: 100%; }

	#right, p.download, #right img { width: 90%; }
	#right p { font-size: 14pt; }

}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 736px)
and (orientation: landscape)
{
	.audioimg img { width: 100%; }
	audio { height:60px; }
	.audio { min-height: 460px; }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	.audioimg img { width: 100%; }
	audio { height:60px; }
	.audio { min-height: 460px; }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	.audio { width: 670px; margin: 0 0 20px 4%; }
}

@media only screen
and (max-width: 320px)
and (orientation: portrait) {
	p.download { width: 280px; }
	img, form { width: 280px; }
	form img { width: 240px; }
	textarea { width: 200px; }
	p#spam { width: 260px; }
	input.sizetext { width: 180px; }
}
