/* Layout www.schmidt-marketing.cc  */

/*
Farbton (Hintergrund): #
Farbton (): #
Farbton (): # 
Farbton (): # 
*/


 /* ----------------------------------------------------------------------------- */
*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */


/* LAYOUTELEMENTE
--------------------------------------------------------------------------------------- */


.page-wrapper {
margin: 0;   /* width: 1245px; */
}

@media only screen and (min-width: 960px) {  
  .page-wrapper {
	  width: 960px;
	  margin: 0 auto;
	    
  }
}

/* IE 7 */
* + html .page-wrapper 
		{width: 960px;
		margin: 0 auto;
		}
/* IE 8 */
    @media \0screen {  
      .page-wrapper {width: 960px;
		margin: 0 auto;
		}  
    }  

/* base styles */
.box.teaser {
	transition: all 1.5s ease;
}

.logo {
	transition: height 1.5s ease;
}


#header {
height: 6.25em;
margin: 0 0 0 0;
}


.logo {
float: left;
width:25%;
	height: auto;
}



#navigation {
	width: 73%;
	float:right;
	margin: 60px 0 0 0;
	padding: 0 0 0 0;
	box-shadow: none;
    overflow: hidden; /* clearing für die floatenden LIs */
    border-top: 2px #a03232 solid;

     }

#wrapper {
	width: 100%;
	overflow: hidden; /* clearing für die floatenden gleichlangen Spalten (.main und .aside) */
	
}

#teaser {
	height: 17em;
	vertical-align:middle;
}

.main {
	width: 70.68273092%;
	clear:both;
	float: left;
    margin-bottom: 0.625em;
  

}



.mainContent {
	width: 100%;
	float: left;
	padding: 0 1.136363636% 1em 2.272727273%;
	margin-right: 2.272727273%;
	margin-top: 1em;

}


#sidebar {
	float:right;
	width: 24.89959839%;
	height: 100%;
	margin-left: 4.417670683%;
	padding-right: 1.606425703%;
	padding-top: 1em;
	padding-left: 3.212851406%;
	display: table;
	margin-bottom: -99999px !important; /* gleichlange Spalten  - dazu gehört ein overflow: hidden für den umgeb. Container */
    padding-bottom: 99999px !important; /* gleichlange Spalten */


}


.aside_box {
	clear: both;
	float: right;
	display: table-cell;
	vertical-align: bottom;
	text-align: right;
}



#footer {
		clear: both;
		height: 15em;
		}

.footerContent {
	  width: 960px;
	  margin: 0 auto;
}

.section {
	padding: 0;
    /* overflow: auto; clearing für die floatenden article */
}

article {
	margin: 0 0 2em 0;
	padding: 0.625em 10px 0 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
		
}



/* Bildergalerie */

.galerie ul {
	list-style: none;
	margin: 0;
	
}
.galerie li {
	float: left;
	margin: 0 30px 10px 0px;
	-webkit-box-shadow: 2px 2px 2px rgba(128,128,128,0.6);
	-moz-box-shadow: 2px 2px 2px rgba(128,128,128,0.6);
	box-shadow: 2px 2px 2px rgba(128,128,128,0.6);
	list-style: none;
	border: 1px #FFF solid;

}
.galerie li a {
	margin: 0;
	width: 150px;
	padding: 0;
	display: block;
}

.galerie li a:hover {
	padding: 0;
	border: 1px #a03232 solid;
	}

.galerie a:hover img {
	opacity: 0.7;
}


/* ----------------------------------------------------------------------------- * 
 *                             Bildauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
 
figure {
float:left;
margin-right: 2.985074627%;
}

img {
	/* width: 670px; */
	max-width: 100%;
	height: auto;
	
}

.imgborder {
	border: 2px #A13131 solid;
	float:left;
	margin: 0 20px 0 0;
}


.imgTeaser {height: 15.5em;}
.imgTeaserKontakt {	height: 10em; margin-top:3em;}
.imgTeaserImpressum {height: 10em; margin-top:3em;}



img-left {
	/* width: 670px; */
	max-width: 100%;
	height: auto;
	float:left;
	margin-right: 1.492537313%;
	
}

.imgleft {
	clear:both;
	float:left;
	margin: 0 50px 1.25em 0;
}



	
.img_aside {
	/* width: 670px; */
	max-width: 100%;
	height: auto;
	vertical-align:bottom;
	float:right;
	margin-bottom: 1em;
}

.slides {
	margin: 2.816901408% 0;
}


/* ----------------------------------------------------------------------------- * 
 *                  Teaserboxen mit Bild und Text .box.teaser                    *
 * ----------------------------------------------------------------------------- */



.teaser {
	margin-top: 1em;
	margin-bottom: 2em;
	padding: 10px;
	border: 1px solid rgba(255,255,255,0.2);
}


.box.teaser {
	float: left;
	margin-right: 2.985074627%;
    width: 48.50746269%;
	overflow: auto;
}

h3.box {
	margin-top:0em;
}


.teaser p {
	font-size: 0.75em; /* 12 px */
	line-height: 1.25em; /* 22 px */

}

.box.teaser:nth-of-type(2n+2) {
 margin-right: 0;
}


/* Listen*/



/* ====================================================================================================================================== * 
 *                                Media Queries  max-width: 820px = 51.25em                                                               *
 * ====================================================================================================================================== */
@media only screen and (max-width: 51.25em) {  

.box.teaser {float: none; margin: 0 0 1em 0; width: 100%;}
.box.teaser figure { width: 30%; height: 30%; float: left; margin: 0 2% 2% 0;}
	



#header {height: 0.75em; margin: 0 0 0 0;}



.logo {
width:30%;
height: auto;
margin-left: 2.43902439%;

}


#navigation {
		width: 65%;
		height: 2.5em;
}



.main {
	width: 100%;
}

.subNav {
	width: 22.82608696%;
	clear: both;
	float:left;
	padding-top: 1.875em;
	box-shadow: none;
    overflow: hidden; /* clearing für die floatenden LIs */
    list-style-type: none;    
}



#sidebar {
	clear:both;
	float: left;
	height:auto;
	width:100%;
	margin:0;
	padding:0;
}


.aside_box {
	clear:none;
	float: left;
	margin-left: 2.43902439%;
	margin-right: 2.43902439%;
	height: auto;
}








/* ====================================================================================================================================== * 
 *                                Media Queries  max-width: 480px                                                                         *
/* ====================================================================================================================================== */
 


@media only screen and (max-width: 34em) {  
  .box.teaser {
	float: none;
	margin: 1em 0 1em 0;
  	width: 100%;
  }


.box.teaser figure {
	  width: 30%;
	  height: 30%;
	  float: left;
	  margin: 0 2% 2% 0;
	}
	

#header {
	height:6.25em;
}

.logo {
	height: 1em;
	width:auto;
	margin-left: 2.43902439%;
	margin-bottom: 0.25em;
	text-align:center;
}


#navigation {
clear:both;		
	width: 100%;
	height:4.25em;
	margin: 0;
	}


#teaser {
	height: 6em;
	
}

.imgTeaser {height: 7em;}
.imgTeaserKontakt {	height: 5em; margin-top:1em; margin-left: 10px;}
.imgTeaserImpressum {height: 4em; margin-top:1em; margin-left: 10px;}
.imgTeaserHome {height: 4em; margin-top:1em; margin-left: 10px;}




.main {
	width: 100%;
	 margin-top: 1em;
}

.mainContent {
	width: 100%;
	padding: 0 4.166666667% 0 4.166666667%;
}


#sidebar {
	clear:both;
}


h3 {margin: 2em 0 0.6em 0;}
 p {margin-bottom: 0;}