@charset "UTF-8";
/* --------------------------------------------------
        General basic settings                           
 ----------------------------------------------------*/
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit; 
}
body {
   color: #1d2731;            /* Ivory Black*/
   background-color: #efefef; /* Neutral */
   font-family: Georgia; 
}
ul {
  padding: 0;
}
.wrapper {
   background-color: #ff3b3f; /* Watermelon */
}
/* ------------------------------------------------------------------
     CSS properties for mobile devices (smaller than 640 px)            
       + Arrange everything in one column below each other                                              
-------------------------------------------------------------------- */
.header {
   text-align: center;
   background-color: #07889b; /* Teal */
   color: #efefef;            /* Neutral */  
   border-bottom: 1px solid #efefef;
}
.aside {
  border-top: 1px solid #a9a9a9;
  padding-top: 0.5em;
}
.footer {
   background-color: #a9a9a9; /* Carbon */
   color: #efefef;            /* Neutral */
   padding: 1em;
   text-align: center; 
   border-top: 1px solid #efefef;
}
.nav-ul {
   background-color: #ff383f; /* Watermelon */
   margin:0;
}
.nav-li {
   list-style: none;
   margin-left: 0;
   border-bottom: 1px solid #efefef;
}
.nav-li-a {
    padding: 0.6em 2rem;
    display: block; 
}
.nav-ul a:link {
    text-decoration: none; 
}
.nav-ul a:link, .nav-ul a:visited {
   color: #fff; /* white*/
}
.nav-ul a:hover, .nav-ul a:focus, .nav-ul a:active {
   background-color: #000; /* Black */
   color: #efefef; /* Neutral */
}
.nav-active {
   color: #000; /* Black */
   background-color: #fff; /* White */
}
.container {
   background-color: #fff; /* weiss */
   padding: 2em 2rem;
}
.img-art {
  float: left;
  margin: 0 1em 0.2em 0;
  max-width: 40%;
  height: auto;
}
.img-side {
  float: left;
  margin: 0.1em 1em 0.2em 0.2em;
  max-width: 40%;
  height: auto;
}
.img-logo {
  display:none;
}
/*-----------------------------------------------------   
     Tablet version from 640 pixels                          
       640px / 16px/em = 40em  
       + 2 columns
         - Header and navigation on top below each other
		    - Main content and sidebar next to each other
		     Footer at the bottom
------------------------------------------------------*/
@media screen and (min-width: 40em) {
  .header {
    text-align: left; 
  }
  .container {
    padding: 3rem 0;
    display: block;
    overflow: auto; 
  }
  .content {
    display: block;
    float: left;
    width: 65%;
    padding: 0 1rem 0 2rem; 
  }
  .aside {
    display: block;
    margin: 0 0 0 65%;
    width: 35%;
    padding: 0 2rem 0 2rem;
    border-top: none; 
  }
  .nav-ul {
    padding: 0 2rem;
    overflow: hidden;	
  }
  .nav-li {
      float: left;
      display: inline-block;
      border: none;
      width: auto; 
   }
   .nav-li-a {
     padding: 0.7em 1.2rem;
     display: inline-block;
    }
	.img-logo {
      display: block;
      max-width: 100%;
      height: auto;
    }
} 
/*------------------------------------------------------------------
    Screens from 1024 pixels                         
      1024px / 16px/em = 64em
      + 3 columns
        - Header on top
        - Navigation, main content and sidebars next to each other
        - Footer below		
 ------------------------------------------------------------------- */
@media screen and (min-width: 64em) {
  .container {
    width: 85%;
    padding: 0;
    margin-left: 15%;
  }
  .content {
    width: 70%;
    padding: 1em 1.5em;
  }
  .aside {
    width: 30%;
    padding: 1em 1.5em;
    margin: 0 0 0 70%;
  }
  .nav-ul {
    width: 15%;
    float: left;
    box-shadow: none;
    margin: 1em 0;
    padding:0;
  }
  .nav-li {
    width: 100%;
    float: none;
    text-align: center;
  }
  .nav-li-a {
    padding: 0.5em 3rem;
    display: block;
  }
  .img-logo {
    display: block;
    max-width: 100%;
    height: auto;
  }
}	    
/*------------------------------------------------------------------- 
    Large screens (>1280 pixels) 
      1280px / 16px/em = 80em
	    + 3 columns
          - Header on top
          - Navigation, main content and sidebars next to each other
			* Two articles in main content next to each other
          - Footer at the bottom	
  -------------------------------------------------------------------- */
@media screen and (min-width: 80em) {
	.wrapper {
		margin: 0 auto;
		max-width: 80em;
	}
	.article {
	  display: block;
      width: 50%;
      float:left;
      padding: 0 1rem 0 1rem;
	}
    .clear { clear: both; }
	.img-logo {
	  display: block;
      max-width: 100%;
      height: auto;
   }
}