body{
background-color:#bbbbbb;
font-size:100%;
margin:0em;
padding:0em;
}

h1 {
	font-size:2.5em;
	line-height:1.8em;
    font-family:'Cinzel', sans-serif;
    font-weight:100;
    color: #414141;
    margin:0em;
    padding:0.5em;
    text-align:center;
}

.headline {
    color: #007a33;
}

h2 {
	font-size:1.5em;
	line-height:1.8em;
    font-family:'Raleway', sans-serif;
    font-weight:lighter;
    color: #414141;
    margin:0em;
    padding:1.25em;
    text-align:left;
}

h3 {
	font-size:1.5em;
	line-height:1.8em;
    font-family:'Raleway', sans-serif;
    font-weight:lighter;
    color: #414141;
    margin:0em;
    padding:1em;
    text-align:center;
}

p {
	line-height:1.25em;
    font-family:'Libre Baskerville', Helvetica;
    font-weight:lighter;
    color: #414141;
    margin:0em;
    padding:1.25em;
    text-align:justify;
    
}

.home-list {
    margin-left: 30px;
    margin-right: 10px;
}

::selection {background: #035e009d; color: #ffffff;}
::-moz-selection {background: #035e009d; color: #ffffff;}

ul {
	margin:0px;
    padding:0px;
    
}

li {
    list-style: square;
	font-family:'Libre Baskerville', Helvetica;
    font-weight:lighter;
    color: #414141;
    line-height:1.25em;
    margin:0.31em 0em 0.31em 0em;
    padding:0em;
    text-align: left;
}


img {
	width:90%;
	height:auto;
	max-width:100%;
}

a {
	text-decoration:none;
}


/** Header**/

    header {
        display:block;
        background:#ffffff;
        text-align:center;
    }
    
    header img {
        max-width:500px;
    }

/** Navigation **/

    .topnav {
        background-color: rgb(255, 255, 255);
        overflow: hidden;
        border-top:2px black;
    }
    
    .topnav a {
        font-family:'Raleway', sans-serif;
        float: left;
        display: block;
        color: #007a33;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        border-top:2px black;
    }
    
    .topnav .icon {
        display: none;
    }
    
    .dropdown {
        font-family:'Raleway', sans-serif;
        float: left;
        overflow: hidden;
    }
    
    .dropdown .dropbtn {
        font-size: 17px; 
        border: none;
        outline: none;
        color: #007a33;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a {
        font-family:'Raleway', sans-serif;
        float: none;
        color: #007a33;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    .topnav a:hover, .dropdown:hover .dropbtn {
        background-color: #007a33;
        color: white;
    }
    
    .dropdown-content a:hover {
        background-color: #007a33;
        color: white;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /** Main**/

#main{
	display:block;
	width:96%;
	max-width:980px;
	margin:1.25em auto;
    padding:0em;
    
}

#main article {
	display:inline-block;
	width:65%;
	background:#FFFFFF;
	vertical-align:top;
	margin:0em;
	padding:0em;
	text-align:center;
    box-shadow: rgba(0, 0, 0, 0.39) 10px 10px 10px;
    border-bottom: 0.2em solid #007a33;
}

#main aside {
	display:inline-block;
	width:30.5%;
	margin-left:3%;
	padding:0em;
	vertical-align:top;
	
}

#main aside section {
	margin-bottom:1.5em;
	background: #FFFFFF;
	border-bottom: 0.2em solid #007a33;
	box-shadow: rgba(0, 0, 0, 0.39) 10px 10px 10px;
}

#main aside #schulleitung {
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.39) 10px 10px 10px;
}

#main aside section ul {
	padding:0em 1.875em 1.25em 2.5em;
}

#main aside section ul li {
	list-style:none;
	line-height: 1.6em;
	font-size: 0.9em
}

#main aside section img {
	max-width:200px;
	box-shadow:0px 0px 10px -5px #4C4948;
	border-radius:5px;
}

/** Bilder**/

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    }
  
.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
    }
  
  .rslides li:first-child {
    position: relative;
    display: block;
    float: left;
    }
  
  .rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
    }

/** FOOTER **/

    footer{
        display:block;
        background:#ffffff;
        text-align:center;
    }
    
    footer ul {
        display:block;
        width:100%;
        max-width:980px;
        text-align:left;
        margin:0px auto;
    }
    
    footer ul li {
        display:inline;
        font-size:0.8em;
        line-height:2.8em;
        color:#007a33;
        padding:0em 0.625em 0em 0.625em;
    }
    
    footer ul li a {
        color:#007a33;
    }

/** responsiv **/

@media screen and (max-width: 670px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
    #schulleitung{
        display: none;
    }
  }
  
  @media screen and (max-width: 670px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  
  @media screen and (max-width:900px) {
      h1 {
          font-size:2.2em;
      }
      h2 {
          font-size:1.3em;
      }
  }
  
  @media screen and (max-width:768px) {
      body {
          font-size: 90%;
      }
      
  }
  
  @media screen and (max-width:670px) {
      #main aside, #main article {
          width:100%;
          display:block;
          margin:0.625em 0em 0.625em 0em;
      }
      #schulleitung{
          display: none;
      }
  }
  
  
  @media screen and (max-width:600px) {
      body {
          font-size:85%;
      }
      #schulleitung{
          display: none;
      }
  }