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

nav {
	transition: opacity 1.5s ease;
}

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

header {
	height: 155px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto }

footer {
	padding: 1.0%;
	clear: left;
	height: 60px; 
}
nav {
	width: 16.86746988%;
	float:left;
	box-shadow: none;
    overflow: hidden; /* clearing für die floatenden LIs */
}
.main {
	width: 100%;
	float: left;
	background-color: #b2e6e2; 
    overflow: hidden; /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
    padding-top:20px; 
}
.mainContent {
	width: 100%;
	float: left;
	
	-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 {		
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #b2e6e2;
	margin-top:10px; 
	color: #fff;
}



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

body {
  background: #fff;
}

.nav ul {
  list-style: none;
  text-align: center;
  padding: 0 auto;
  height: 100px; 
  margin: 0;
  color: #fff;
}

.nav li {
	width: 100px;
  font-family: 'helvetica', sans-serif;
  font-size: 1em;
  height: 24px; 
  line-height: 20px;
  text-align: center;
  padding: 0 auto;
  marging-top: 5px; 
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}

.nav a {
  text-decoration: none;
  height: 22px; 
  display: block;
  transition: .3s background-color;
  text-align: center;
  color: #fff;
}

.nav a:hover {
  background-color: #cdbd86;
  color: #83a5a9;
}

.nav a.active {
  background-color: #cdbd86;
  color: #fff;
  cursor: default;
}

/* Sub Menus */
.nav li li {
  font-size: 0.8em;
  padding-top: 4px; 
  padding-bottom: 4px;
  text-align: center; 
  font: Helvetica; 
  color: #fff;
  background-color: #cdbd86;
}

/* Sub Menus */
  .nav li ul {
    position: absolute;
	background-color: #cdbd86;
	height: 24px; 
    display: none;
    width: inherit;
	color: #fff;
  }

  .nav li:hover ul {
    display: block;
	background-color: #cdbd86;
	color: #fff;
  }
/*******************************************
   Style menu for larger screens

   Using 480px (120px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 480px) {
    
	.main {
	width: 100%;
	float: left;
	background-color: #b2e6e2; 
    overflow: hidden; /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
    padding-top:40px; 
}
    
	.nav ul {
  list-style: none;
  text-align: center;
  padding: 0 auto;
  height: 24px; 
  margin: 0;
  color: #fff;
}
  .nav li {
    width: 105px;
    border-bottom: none;
    height: 24px;
    line-height: 20px;
    font-size: 1em;
    display: inline-block;
	color: #fff;
	margin-right: 10px;
  }

  .nav a {
    border-bottom: none;
  }
  
  .nav a:hover {
  height: 24px;
}

.nav a.active {
  background-color: #cdbd86;
  color: #fff;
  height: 24px;
  cursor: default;
}

  .nav > ul > li {
    text-align: center;
	color: #fff;
  }

  .nav > ul > li > a {
    padding-left: 0;
	color: #fff;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
	color: #fff;
  }
  
  .nav li li {
  font-size: 0.8em;
  padding-top: 4px; 
  text-align: center; 
  font: Helvetica; 
  color: #fff;
}

  .nav li:hover ul {
    display: block;
	background-color: #ccc;
  }
  
  .nav li:active ul {
    display: block;
	background-color: #fff;
  }

  .nav li ul li {
    display: block;
	color: #fff;
	background-color: #cdbd86;
  }
  
  header {
	padding: 0 1.606425703%;
    margin-top: 25px;
	height: 170px;
}

footer {
	padding: 1.606425703%;
	clear: left;
	max-height: 50px; 
}
}

/* ----------------------------------------------------------------------------- * 
 *                             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: 0px;
}

.box.teaser {
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 408px;
    overflow: auto;
}

.teaser p {
    font-size: 0.8em; /* 16 px */
    line-height: 1.4em;
}

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

/* ----------------------------------------------------------------------------- * 
 *                                Media Queries                                  *
 * ----------------------------------------------------------------------------- */
 
/* ab einer Breite von 1230px ist die Website-Breite begrenzt auf 1230px und wird zentriert */
@media only screen and (min-width: 1230px) {
    .page-wrapper {
        width: 100%;
        margin: 0 auto;
    }
}


@media only screen and (max-width : 505px ){
    .box.teaser {
        float: none;
        margin: 0 0 1em 0;
        width: 100%;
		padding: 10px 40px;
    }
	
    .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;
    }

}