* {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
  }

body { 
	background-color: #010066;
	text-align: center;  
	margin-top: 30px;  
	font-family: arial;

}
#header, #nav, #main, #footer{
    display: block; 
  }  


#wrapper  {
	width: 72%;
	height: auto;     
	background-color: white;
	margin-left: auto;
	margin-right: auto;   
	text-align: left;
	
	


}



#header {  
background-image: url(../bilder/kopf_kanalservice.jpg);
background-position: center;
background-repeat: no-repeat;
	
width: 100%;
height: 360px;
	


    
}



#nav {
background-color: darkgrey;
width: 100%;
height: auto; 

	


}



#main {
background-color: white;
width: 100%;
height: auto;
text-align: center;
}


#footer { background-color: #36c; width: 100%; height: auto; color: white; margin-top: 100px; padding-bottom: 15px; }

h1 {
color: #010066;
font-weight: bold;
font-size: 1.3em;
/*margin-left: 30px;*/
/*margin-right: 30px;*/
margin-bottom: 30px; 
margin-top: 100px;
/*margin-left: 18%;*/
}
h2
{ color: #36c; font-weight: bold; font-size: 1.2em; margin-top: 30px; margin-bottom: 30px; }


p {
    
font-size: 1em;
color: #010066;
/*margin-left: 18%;*/
/*margin-right: 30px;*/
margin-bottom: 30px;


}
/*navigation*/

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

#nav li {
    display: inline;
}
#nav li {
    float: left;
}

#nav a {
    display: block;
    padding: 8px;
    
}

#nav ul {
    background-color: #dddddd;
}

#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: silver;
}

#nav li {
    float: left;
}

#nav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}


/* andere Fabe hover */
#nav li a:hover {
	
    background-color: #dddddd;

}
/* andere Fabe aktiveseite */
.active {
    background-color: cornflowerblue;
	
}

ul#nav li.right {float: right;}

/* Menü-Buttons normalerweise ausblenden */
.menu-toggle {
    display: none;
}
/*aufteilung footer*/
ul{
	float: left;

	margin-top: 20px;
	margin-right: 100px;
	list-style-type: none;
	
}
.adresse{ float: left; margin-top: 20px; margin-right: 8%; margin-left: 8%; list-style-type: none; text-align: left; }
.adresse2{ font-size: 0.9em; line-height: 1.3; float: left; margin-top: 20px; margin-right: 8%; list-style-type: none; text-align: left; }

.fuss { color: white; margin-bottom: 15px; font-size: 1em; margin-left: 10px; }

img { max-width: 100%; height: auto; margin-top: 20px; }
.adresse2 a{
		text-decoration: none;
		color: white;
		font-size: 1em;
	}
	.adresse2 a:hover{
		text-decoration: none;
		color: darkblue;
		font-size: 1em;
	}
#innen {
	width: 75%;
	height: auto;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
.icon { float: left; margin-top: 0; margin-left: 0; }
.titelbild { float: none; margin-top: 20px; }
.icon_rechts {  }
/*unter 1366 ipad pro flex*/
@media screen and (max-width:1366px){
	#header {
	
    height:264px;
    background-image: url(../bilder/kopf_kanalservice_pro.jpg);}
	#wrapper  {
	width: 80%;}
	#nav {
		font-size: 0.9em;
	}
	/*unter 1024 ipad air flex*/
@media screen and (max-width:1024px){
	#header {
	
    height:224px;
    background-image: url(../bilder/kopf_kanalservice600.jpg);}
	#wrapper  {
	width: 90%;}
	#nav {
		font-size: 0.9em;
	}
	#footer {
		height: auto;}
.adresse2{

	float: left;
	margin-top: 20px;
	margin-right: 10px;
	
	list-style-type: none;
	text-align: left;
	
}
		
	
img {
max-width: 100%;
	height: auto;
	margin-left: 10px;
	margin-top: 20px;
}
	ul#nav li.right {float: none;}

/*unter 600 iphone flex*/
@media screen and (max-width: 768px){
    ul#nav li .right, 
    ul#nav li {float: none;
	font-size: 1.4em
	
}
	/* Button zum Anzeigen des Menüs */
  .js .menu-toggle {display: block;
    cursor: pointer;
    color: #fff;
    border-radius: 10%;
    width: 3.5em;
    height: 2.5em;
    margin: auto;
    text-align: center;
    line-height: 2.5em;
/*	  border: 3px solid #fff;*/
    font-weight: normal; 
  }
   
	 .js  #nav ul {
    display: none;
  }
	#nav ul.toggled-on {
    display: block;
  }
	 #nav ul.toggled-on li,  .no-js  #nav  li { 
    display: block;
  }
	[data-icon]:before { 
    content: attr(data-icon); 
   display: inline-block;
    display: inline-block;
    font-size: 100%;
  }
 

	#nav li a { -webkit-box-shadow: 0 5px 5px rgba(245, 245, 245, 0.75) inset;
	box-shadow: 0 5px 5px rgba(245, 245, 245, 0.75) inset;}

    #header {
        height:150px;
        background-image: url(../bilder/logo_kanalservice_klein.jpg)}
	#wrapper  {
	width: 95%;}
	
	
	
	#footer {
		height: auto;
	
	}
	ul#nav li.right {float: none;}
	
	
	
	.adresse2{

	float: none;
	margin-top: 20px;
	margin-left: 5%;
	margin-right: 10%;
	
	
	list-style-type: none;
	text-align: left;
	
}