@charset "ISO-8859-1"; /* CSS Document mit ASCII Code Latin 1 also Umlauten */
 /* Schrifteinbettung */
@import url(http://fonts.googleapis.com/css?family=Roboto:100,300);
body {	
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color: black;
	margin:0;
	font-size: 1em;
	background-image: url(../images/bg_kachel.jpg);
}
a {
	text-decoration:none;
	background-color: white;
	opacity: 0.85;
	filter: alpha(opacity=85); /* For IE8 and earlier */
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 5px 5px 5px;
}
h2 {
	font-weight: 100;
	letter-spacing:0.015em;
	text-shadow: 0px 3px 3px #2b2b2b;
	color: white;
}	
label {
	letter-spacing:0.015em;
	text-shadow: 0px 3px 3px #2b2b2b;
}
#wrapper {
	width: 80%;
	padding: 0;
	margin: 0 auto;		/* Layout mittig */
}
/* Spalten Definition des zweispaltigen Containers */
		#me, #leistungen, #kunden {
		padding: 2.5em;
		margin: 0;
		background-color: white;
		opacity: 0.85;
	    filter: alpha(opacity=85);
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		}
.me, .leistungen, 
.kunden, .kontakt, 
.arbeiten, .anfahrt {
	font-size: 4.1em;
	margin: 0;
	}
.arbeiten, .anfahrt 	{
		text-align: center;
		margin-top:0.2em;
		}
.blau {
		color: #376bff;
}
.impressum {
	color: white;
	margin-top: 2.5em;
}
#map_canvas {
	position: relative;
	padding-bottom: 56%;
	height: 0;
	overflow: hidden;
}
#map_canvas iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Desktops für alle Auflösungen größer als 960px*/
@media screen and (min-width: 960px)
/* Beginn des css Layouteinstellungen für min 960px Breite */
{
	.top {
		background-image: url(../images/top_bg.jpg);
	}
	.divider {
		background-image: url(../images/divider.png);
		height: 19.875em;
		position: absolute;
		top:33em;
		width: 100%;
	}
	/* Logo mittig positioniert */
	#logo {
		height: 40em;
		background-image: url(../images/Logo_SOK_Design.png);
		background-repeat:no-repeat;
		background-position: center;
	}
	
	#wrapper, #wrapper_form {			
		min-width: 60em;	/* Sollte die Breite des Browsers kleiner als 960px sein, gibt es Scrollbars. */
		max-width: 60em;	
	}
	
		
	/* zweispaltger Containers. me und leistungen  */
	#me_leistungen {
		-moz-column-count:2; /* Firefox */
		-webkit-column-count:2; /* Safari and Chrome */
		column-count:2;
		-moz-column-gap:2.5em; /* Firefox */
		-webkit-column-gap:2.5em; /* Safari and Chrome */
		column-gap:2.5em;
		margin-top: 6.25em;
	}
	/* zweispaltger Containers. kunden und kontakt */
	#kunden_kontakt {
		-moz-column-count:2; 
		-webkit-column-count:2;
		column-count:2;
		-moz-column-gap:2.5em; 
		-webkit-column-gap:2.5em;
		column-gap:2.5em;
	}
	/* Spalten Definition des zweispaltigen Containers */
		#me, #leistungen, #kunden, #kontakt {
		}

	
	#map_canvas {

	}
	
	#gallery {

	}
	
	#impressum {
		
	}
}
/* minimum iPads also 1024px zu 768px*/
@media screen and (max-width: 959px)
/* Beginn des css Layouteinstellungen für max 959px Breite bis 559px */
/* Kopie des zuvor gesehen css Codes mit leichten Anpassungen. Z.B Container ist schmaler. Einspaltig und Texpadding */
{
	.top {
		background-image: url(../images/top_bg.jpg);
	}
	.divider {
		background-image: url(../images/divider.png);
		height: 19.875em;
		position: absolute;
		top:33em;
		width: 100%;
	}
	#logo {
		height: 40em;
		background-image: url(../images/Logo_SOK_Design.png);
		background-repeat:no-repeat;
		background-position: center;
	}
	/* Container Breite ist dem iPad Screen angepasst */
	#wrapper {
		text-align: center;  /* Die Inhalte der gesamten Seite (Bilder Texte) werden mittig gesetzt. Da die Seite einsapltig ist, passt es. */
		min-width: 35em;
		max-width: 35em;
	}

	#me_leistungen {
		-moz-column-count:1; 
		-webkit-column-count:1;
		column-count:1;
		margin-top: 6.25em;
	}
	#kunden_kontakt {
		-moz-column-count:1; /* Firefox */
		-webkit-column-count:1; /* Safari and Chrome */
		column-count:1;
		margin-top: 0em;
	}
		#me, #leistungen, #kunden, #kontakt {
		padding-top: 1em;
		padding-bottom: 1em;
		}
		
	#map_canvas {

	}
	
	#gallery {
	/*margin-top: 6.25em;*/
	}
	
	#impressum {
	}
}

/* minimum Smartphones bis 480px */
@media screen and (max-width: 559px)
{


	#logo {
		background-image: url(../images/Logo_SOK_Design_klein.png);
		background-repeat:no-repeat;
		background-position: center;
	}
	.me, .leistungen, .kunden, .kontakt, .arbeiten, .anfahrt	{
		font-size: 3em;
		}

	#wrapper {
		width: 95%;
		min-width: 12.5em;
		max-width: 25em;
		padding: 0em;
		margin: 0 auto;
	}

	#me_leistungen, #kunden_kontakt {
		-moz-column-count:1; /* Firefox */
		-webkit-column-count:1; /* Safari and Chrome */
		column-count:1; 
	}
		#me, #leistungen, #kunden, #kontakt {
		padding-top: 1em;
		padding-bottom: 1em;
		}
		
	#map_canvas {

	}
	
	#gallery {
	/*margin-top: 15.25em;	*/
	}
	
	#impressum {
		
	}
}
/* Smartphones bis 480px nur Überschriften Klassen für Überschriften der Kapitel */
@media screen and (max-width: 450px)
{
	.me, .leistungen, .kunden, .kontakt, .arbeiten, .anfahrt	{
		font-size: 3em;
		}
				
	.blau {
		color: #376bff;
		font-size: 1.2em;
		line-height:1.2em
	}

}
img {
	max-width: 100%;
	height: auto;
}
/*iframe {
	width: 100%;
    padding: 0;
	border: solid 6px rgb(195,217,255); 
	-moz-border-radius: 6px;
}*/