@media only screen and (min-width: 350px) and (max-width: 1000px) {

#main {
    width: 650px;
} 
body {
	padding:2%;

}

.left{
    float:none;
}
h1{
    font-size:2em; 
    margin-bottom:7px;
    margin:2%
}
p{
 margin:2%
}

.img1{
  width:96%; 
  min-height:80px;
  margin:2%;
}
/*ul#navigation li {  
    width:100px;  
    padding: 5px;
} */    

/* Content */
    
.desktop {
  display:none;
}

.mobilmenu{ 

	position:fixed;/*absolute relative static */
	left:0px; top:0px; width:100%; height:50px;
	border:1px rgba(255, 255, 255,0.99) solid;
	border-radius: 2px;
	background-color:rgba(255, 255, 255,1.0);
	text-align:center;
	font-size: 16px;
	line-height: 26px;
	margin:0;
	padding: 0;
	z-index:100;
	}
.mobilmenu ul{
	background-color: rgba(0, 76, 102,0.99);
	height:40px;
	list-style:none;
	margin: 0 0px;
	padding:2px;
	}
	.mobilmenu li{
	  	margin:3px 1px;
		background-color: rgba(0, 76, 102,0.99);
		border: 1px solid black;
		border-radius: 2px;
		text-align:center;
		}
	.mobilmenu li a{
		color:	#ffffff;
		display:block;
		font-weight:bold;
		line-height:33px;
		padding:0px 10px;
		text-align:center;
		text-decoration:none;
		}
		.mobilmenu li a:hover{
			background:rgba(47,79,79,0.99);
			text-decoration:none;
			}
	.mobilmenu li ul{
		background: rgba(255, 255, 255,0.8);
		border:2px rgba(0, 76, 102,0.99) solid;
		border-radius: 2px;
		display:none;
		height:auto;
		opacity:0.95;
		position:absolute;
		width:98%;
		z-index:100;
		/*text-shadow:2px 2px 2px navy;*/
		font-weight: 900;
		/* These three lines are for transparency in all browsers. */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		filter: alpha(opacity=50);
		opacity:1;
		}
	.mobilmenu li:hover ul{
		display:block;
		}
	.mobilmenu li li {
		margin:0 auto;
		
		display:block;
		border-radius: 2px;
		float:none;
		padding:3px;
		width:98%;
		}
	.mobilmenu li ul a{
		display:block;
		text-align:center;
		font-size:18px;
		font-style:normal;
		padding:0px 10px 0px 5px;
		}
		.mobilmenu li ul a:hover{
			background-color:rgba(255, 255, 255,1.0);
			color:rgba(51, 51, 51,0.99);
			border-radius: 2px;
			opacity:1.0;
			filter:alpha(opacity=100);
			}
	.mobilmenu p{
		clear:left;
		}	
	.mobilmenu #current{
		color:#ffffff;
		}
	.mobilmenu #current a :hover{
		color:blue;
		text-decoration:none;
		
		}


/* Menue code*/

.video	{
  width:96%; 
  min-height:80px;
  margin:2%;
  
}
#kontaktf form {

  	max-width:85%;

}
#kontaktf table{

	max-width:99%;
}
#kontaktf{
min-width:85%;
margin:2px;
}
 #kontaktf input {

	max-width: 85%;
}

} /*Klammer der Media Queries wird zugemacht! */

/*Eine Version für das Smartphone / iPhone

Bei einem Ausgabemedium wie dem iPhone muss man natürlich Bedenken, dass hier andere Gesetze für die grafische Gestaltung gelten, als für einen Desktop Monitor der auf euerem Schreibtisch steht. So hat sich auf Smartphones Blocksatz und Weiß als Schriftfarbe auf schwarzem Hintergrund bewährt. Zusätzlich machen wir die Buchstaben größer und erhöhen ein bisschen mit der Anweisung line-height:1.2 die Zeilenhöhe. Wer tiefer in die Materie "Lesbarkeit auf dem iPhone" einsteigen will wird in der aktuellen Ausgabe der Typo Page fündig.

Desweiteren haben wir es auch mit einem Touchscreen und dem Portrait Format zu tun. Wir müssen also dafür sorgen, dass man das Menü bequem mit den Fingern bedienen kann. Die CSS Pseudoklasse :hover hätte in diesem Anwendungsfall also keinen Sinn. */

@media all and (max-width: 350px) {   
    
    /* Allgemein */
    
    body{
        font-size:24px; 
        line-height: 1.2;
    }
    
    #main {
        padding: 0px;
        width:95%;
        float:left;
    }
    
    #header{
        margin:0 auto;
    }
/*Hier wieder ein paar zusätzliche Anpassungen an den Content, damit das Layout weiterhin stimmig bleibt. Auch die oben genannten Farbändernungen werden jetzt durchgeführt.*/    
    
h1{
        font-size:18px; 

    }
    
    .left{
        width:100%;
        float:none;
	text-align:justify;
    }

    
    .main-img{
        margin: 0 0 5px 0;  
    }

.fewoimg{
  width:80%; 
  height:180px;
  margin:3%;
}
.gmaps{
  width:95%; 
  height:490px;
  overflow: hidden;
}
.desktop {
  display:none;
}


.mobilmenu{ 

	position:fixed;/*absolute relative static */
	left:0px; top:0px; width:100%; height:50px;
	border:1px rgba(255, 255, 255,0.99) solid;
	border-radius: 2px;
	background-color:rgba(255, 255, 255,1.0);
	text-align:center;
	font-size: 16px;
	line-height: 26px;
	margin:0;
	padding: 0;

	}
.mobilmenu ul{
	background-color: rgba(0, 76, 102,0.99);
	height:40px;
	list-style:none;
	margin: 0 0px;
	padding:2px;
	}
	.mobilmenu li{
	  	margin:3px 1px;
		background-color: rgba(0, 76, 102,0.99);
		border: 1px solid black;
		border-radius: 2px;
		text-align:center;
		}
	.mobilmenu li a{
		color:	#ffffff;
		display:block;
		font-weight:bold;
		line-height:33px;
		padding:0px 10px;
		text-align:center;
		text-decoration:none;
		}
		.mobilmenu li a:hover{
			background:rgba(47,79,79,0.99);
			text-decoration:none;
			}
	.mobilmenu li ul{
		background: rgba(255, 255, 255,0.8);
		border:2px rgba(0, 76, 102,0.99) solid;
		border-radius: 2px;
		display:none;
		height:auto;
		opacity:0.95;
		position:absolute;
		width:98%;
		z-index:100;
		/*text-shadow:2px 2px 2px navy;*/
		font-weight: 900;
		/* These three lines are for transparency in all browsers. */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		filter: alpha(opacity=50);
		opacity:1;
		}
	.mobilmenu li:hover ul{
		display:block;
		}
	.mobilmenu li li {
		margin:0 auto;
		
		display:block;
		border-radius: 2px;
		float:none;
		padding:3px;
		width:98%;
		}
	.mobilmenu li ul a{
		display:block;
		text-align:center;
		font-size:18px;
		font-style:normal;
		padding:0px 10px 0px 5px;
		}
		.mobilmenu li ul a:hover{
			background-color:rgba(255, 255, 255,1.0);
			color:rgba(51, 51, 51,0.99);
			border-radius: 2px;
			opacity:1.0;
			filter:alpha(opacity=100);
			}
	.mobilmenu p{
		clear:left;
		}	
	.mobilmenu #current{
		color:#ffffff;
		}
	.mobilmenu #current a :hover{
		color:blue;
		text-decoration:none;
		
		}


/* Menue code*/
#kontaktf textarea {

	max-width: 90%;
	height:100px;
} 

}   /*Klammer der Media Queries wird zugemacht!*/ */

     #slides {
      display: none;
    }

    .slidercontainer {
      margin: 0 auto;
    }

    /* For tablets & smart phones */
    @media (max-width: 767px) {
      body {
        padding-left: 0px;
        padding-right: 0px;
      }
      .container {
        width: auto;
      }
    }

    /* For smartphones */
    @media (max-width: 480px) {
      .container {
        width: auto;
      }
    }

    /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 979px) {
      .container {
        width: 724px;
      }
    }

    /* For larger displays */
    @media (min-width: 1200px) {
      .mobilmenu { display:none; }
      .container {
        width: 1170px;
      }
    }