@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

*
{
  margin:0;
  padding:0;
}

body
{
  width:100%;
  height:100%;
  font-size:100%;
  background: white;
  font-family:'Open Sans', sans-serif;
}

a
{
  font-size:1em;
}
#wokru_diakon
{
  margin:0;
  padding:0;
  display:block;
}
a:hover
{
  text-decoration:none;
  -webkit-animation: ahover 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: ahover 1s;
  -moz-animation-fill-mode: forwards;
  animation: ahover 1s;
  animation-fill-mode: forwards;
}

a:visited
{
  color:#5319ff;
}
#logo
{
  position:absolute;
  left:5px;
  height:100%;
}
img.wokru_logo_black{
  height:40px;
  cursor: pointer;
  margin-top:5px;
}
#header_wokru_logo_mobil{
  display: none;
}
#header_wokru_logo{
  z-index: 5;
}
#navigation
{
  position:fixed;
  _position:absolute; /* IE6 Hack */
  _top:expression(eval(document.body.scrollTop)); /* IE6 Hack */
  top:0;
  width:100%;
  *background-image:url(white.jpg); /* IE7 Hack */
  background-color:rgb(255,255,255);
  background-color:rgba(255,255,255,0.8);
  height:50px;
  line-height:50px;
  text-align:center;
  z-index:6;
}

#header
{
  position:relative;
  clear:both;
  width:100%;
  background-color:#e3e665;
  height:450px;
  z-index:1;
}

#content
{
  z-index:1;
  position:relative;
  clear:both;
  width:90%;
  height:auto;
  min-height:calc(100%-310px);
  background-color:rgb(255,255,255);
  background-color:rgba(255,255,255,1);
  padding-top:10px;
  margin:0 auto;
}

#footer
{
  position:relative;
  clear:both;
  width:calc(100%-100px);
  height:50px;
  background-color:#FFF;
  line-height:50px;
  padding-top:50px;
  text-align:right;
  margin:0 auto;
}

ul.subnav > li
{
  list-style-type:none;
}

ul.nav
{
  display:block;
}

li.nav
{
  position:relative;
  display:inline-block;
  list-style-type:none;
  zoom: 1;  *display: inline;  /* IE7 Hack */
  width:120px;
}

a.nav
{
  font-family:'Open Sans', sans-serif;
  font-size:1.2em;
  color:#000;
  text-decoration:none;
}
a.nav:hover
{
  text-decoration:none;
 -webkit-animation: navhover 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: navhover 1s;
  -moz-animation-fill-mode: forwards;
  animation: navhover 1s;
  animation-fill-mode: forwards;

}


ul.subnav
{
  display:none;
  position:absolute;
  top:50px;
  left:-20px;
  width:200px;
  background-image:url(black.jpg); /* IE7 Hack */
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.8);
  text-align:left;
  color:#FFF;
  padding:5px;
}



a.subnav
{
  font-family:'Open Sans', sans-serif;
  font-size:1em;
  color:#FFF;
  text-decoration:none;
}

a.subnav:hover
{
  text-decoration:none;
  -webkit-animation: subnavhover 1s;
  -webkit-animation-fill-mode: forwards;
}

img.header_wokru
{
  position:absolute;
  right:50px;
  height:100px;
  top:340px;
}

img.header
{
  width:100%;
  height:auto;
}

#image_show
{
  position:absolute;
  height:450px;
  overflow:hidden;
  top:0;
  left:10%;
  width:80%;
  z-index:2;
}

h1,h2,h3,h4
{
  font-family:Georgia, Times, serif;
  margin-bottom:10px;
  margin-top:50px;
}

img.footer_krug
{
  height:20px;
  vertical-align:middle;
}

#galleria
{
  width:100%;
  height:500px;
}

div.bilder_flex
{
  display:inline-table;
  width:150px;
  cursor:pointer;
  margin-bottom:50px;
  margin-left:50px;
  padding:5px;
}

div.presse_flex
{
  display:inline-table;
  word-wrap: break-word;
  text-align:center;
  width:150px;
  margin-bottom:50px;
  margin-left:50px;
  padding:5px;
}
div.presse_flex_table
{
  display:block;
  width:100%;
  height:40px;
  vertical-align: middle;
  margin-bottom:50px;
  margin-left:50px;
  padding:5px;
}

img
{
  border:0;
}
#mobile_nav_button{
  display: none;
}

div.bilder_flex:hover,div.presse_flex:hover
{
  background-color:#CCC;
}

@media (max-width: 900px) {
  #wokru_diakon{
    display: none;
  }
  img.header_wokru
  {
    height:50px;
    top:140px;
  }
  
  li.nav
  {
    width:15%;
    list-style-type:none;
  }
  
  a.nav
  {
    font-size:.9em;
  }
  
#header{
  margin-top:0;
  height:100px;
  position: relative;
}
#header_wokru_logo{
  display: none;
}
#header_wokru_logo_mobil{
  display: block;
  position:absolute;
  top:25px;
  left:25px;
}

img.header, #image_show{
  display: none;
}

  #navigation
  {
    height:auto;
    line-height: 30px;
    position:relative;
    clear:both;
  }
  ul.nav, #logo{
    display:none;
    width: calc(100% - 40px);
    margin-left:20px;
    margin-right:20px;
    text-align:left;
  }

  li.nav{
    display:block;
    list-style-type:none;
    width: 100%;
  }
  ul.subnav{
    display:block;
    position: relative;
    width: calc(100% - 50px);
    clear:both;
    margin: 0;
    padding: 0;
    top:0;
    padding-left:50px;
    background: none;

  }
  li.subnav{
    position: relative;;
    clear:both;
  }
  a.nav{
    height:100%;
    width:100%;
    display:block;
    font-size: 1.3em;
  }
  a.subnav{
    font-size: 1.3em;
    height:100%;
    width:100%;
    display:block; 
    color:#000;
  }

  #mobile_nav_button{
    display:block;
    position:absolute;
    top:0;
    right: 5px;
    z-index:12;
  }
  a.mobile_nav_button{
    color: black;
    font-weight: bold;
    font-size: 2.4em;
    
  }
  a.mobile_nav_button:hover{
    color:black;
    text-decoration: none;
  }
  div.bilder_flex
{
  display:inline-table;
  width:calc(50% - 20px);
  cursor:pointer;
  margin-bottom:50px;
  margin-left:5px;
  padding:5px;
}
  img.page{
    width:90%;
    height:auto;
  }

}

@-webkit-keyframes navhover 
{
from {color:black;}
to {color:#6da22a;}
}

@-webkit-keyframes ahover 
{
from {color:blue;}
to {color:#b1b1ff;}
}

@-webkit-keyframes subnavhover 
{
from {color:white;}
to {color:#757575;}
}



@-moz-keyframes navhover 
{
from {color:black;font-size:1.2em;}
to {color:#6da22a;font-size:1.25em;}
}

@-moz-keyframes ahover
{
from {color:blue;}
to {color:#b1b1ff;}
}


@keyframes navhover 
{
from {color:black;}
to {color:#6da22a;}
}

@keyframes ahover 
{
from {color:blue;}
to {color:#b1b1ff;}
}