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

nav {
	transition: opacity 1.5s ease;
}

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

header {
	padding: 0 1.606425703%;
}

footer {
	padding: 1.606425703%;
	clear: left;
}
nav {
	width: 16.86746988%;
	float:left;
	box-shadow: none;
    overflow: hidden; /* clearing für die floatenden LIs */
}
.main {
	width: 83.13253012%;
	float: left;
    overflow: hidden; /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
}
.mainContent {
	width: 68.59903382%;
	float: left;
	padding:1.93236715%;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
	-moz-box-sizing: border-box;    /* Firefox, andere Gecko-Browser */
	box-sizing: border-box;         /* W3C */
}
aside {
	width: 31.40096618%;
	margin-left: 68.59903382%;
	padding: 1.93236715%;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
    margin-bottom: -99999px !important; /* Trick für gleichlange Spalten  - dazu gehört ein overflow: hidden für den umgeb. Container */
    padding-bottom: 99999px !important; /* Trick für gleichlange Spalten */
}

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

article {
	margin: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(25, 25, 25, 0.2);
		
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



/* ----------------------------------------------------------------------------- * 
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */

nav ul {
	margin: 9.523809524% 0 0;
}
nav ul > li {
	width: 100%;
}
nav ul > li > a {
	padding: 0.8em 9.523809524%;
	display: inline-block;
}


/* ----------------------------------------------------------------------------- * 
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */

h1 {
	margin: 0;
}
h2 {
	margin: 0.3em 0;
}
p.teasertext {
	margin: 0.8em 0;
}
ul, ol {
	padding: 0;
	margin: 0 0 0.625em 1.125em;
}


/* ----------------------------------------------------------------------------- * 
 *                             Bildauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
 
img {
	/* width: 670px; */
	max-width: 100%;
	height: auto;
}
.slides {
	margin: 2.816901408% 0;
}


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

.teaser {
	margin-bottom: 2em;
	padding: 20px;
	border: 1px solid rgba(133,165,204,0.2);
}

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

.teaser p {
	font-size: 1em; /* 16 px */
}

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

/* ----------------------------------------------------------------------------- * 
 *                                Media Queries                                  *
 * ----------------------------------------------------------------------------- */
 
@media only screen and (min-width: 1230px) {  
  .page-wrapper {
	  width: 1230px;
	  margin: 0 auto;
  }
}


@media only screen and (max-width: 820px) {  
  .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;
	}

nav {
		opacity: 0;
		width: 0;
	}

.main {
	width: 100%;
}

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