/*für Smartphones im Hochformat */

@media screen and (max-device-width:760px) and (orientation: portrait) {

  body {
    font-family:'Source Sans Pro', sans-serif ,"Myriad Pro", "Helvetica", "Arial", "Lucida Grande"; 
    color:#222222; 
    background-color:#FCFCFD; 
    font-size:1.2em; 
    font-weight:lighter;
    width:100%
  }

  img {
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:40%;
    height:auto;
    position:relative;
  }

  header {
    max-width:100%;
    max-height:auto;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    text-align:center;
    display:none;
  }

  aside {
    display:none; 
  }

  article {
    font-weight:lighter;
    background-color:#FCFCFD;
    max-width:60%;
    margin-left:auto;
    margin-right:auto;
    text-align:justify;
    position:inherit;
    padding-top:1%;
  }

  .fussnote {
    overflow:hidden;
    font-weight:lighter;
    font-style:italic;
    font-size:0.8em;
    height:auto;
    margin-left:15%
  }

  footer {
    font-size:0.7em;
    background-color:#FCFCFD;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0.5em;
    text-align:center;
  }

  footer > a {
    color:#4d4d4d;
  }

  .headline {
    text-align:center;
  }

  #menu {
    font-size:1.1em; 
  }

  #menu ul {
    position:relative;
    list-style-type:none;
    list-style-image:none;
    margin-top:17px;
    margin-left:-40px;
    z-index:500;
  }

  #menu li.topmenu {
    margin-top:5px;
    list-style-type:none;
    list-style-image:none;
    position:fixed;
    float:left;
    z-index:500;
  }

  .topmenu a {
    float:left;
    width:75%;
    height:auto;
    text-align:center;
    text-transform:auto;
  }

  .topmenu ul{
    display:none;
  }

  .topmenu a {
    padding:14px;
    color:black;
    font-weight:lighter;
    text-decoration:none;
    color:white;
    background-color:#4d4d4d;
    opacity:0.8; 
  }

  #menu a:hover, .topmenu.on a {
    color:#333333;
    background-color:#2ba6cb;
  }

  .topmenu:hover ul {
    display:block;  
  }

  .break-word {
  word-wrap: break-word;
}

}


/*für Smartphones im Querformat */

@media screen and (max-device-width:760px) and (orientation: landscape) {

body {
  font-family:'Source Sans Pro', sans-serif ,"Myriad Pro", "Helvetica", "Arial", "Lucida Grande"; 
  color:#222222; 
  background-color:#FCFCFD; 
  font-size:1.3em; 
  font-weight:lighter; 
  width:174%;
}

img.center {
  display:block;
  margin-right:auto;
  margin-left: auto;
  max-width:50%;
  height:auto;
  position:relative;
}

img.leftcenter {
  display:block;
  position:relative; 
  width:20%;
  height:auto; 
  float:left; 
  left:15%; 
  padding-bottom: 1%;
} 

img.rightcenter {
  display:block;
  position:relative; 
  width: 20%;
  height:auto; 
  float:right; 
  right:15%; 
  padding-bottom: 1%;
}

img.left {
  display:block;
  position:relative; 
  width:40%;
  height:auto; 
  float:left; 
  left: 2%; 
  padding-bottom: 1%;
} 

img.right {
  display:block;
  position:relative; 
  width: 30%;
  height:auto; 
  float:right; 
  right:2%; 
  padding-bottom: 1%;
}

img.rightportale1 {
           display:block;
           position:relative; 
           width: 25%;
           height:auto; 
           float:right; 
           right:12%; 
           margin-top:1.5%;    
         }

 img.rightportale2 {
           display:block;
           position:relative; 
           width: 25%;
           height:auto; 
           float:right; 
           right:12%; 
           margin-top:0.3%;    
         }

header {
  max-width:100%;
  max-height:auto;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  text-align:center;
}

aside {
  display:none; 
  color:#E6E6E6;
  opacity:0.4;
  width:auto;
  position:relative;
  height:auto;
  margin-left:0%;
  font-weight:lighter;
  top:35%;
}

article {
  overflow:hidden;
  font-weight: lighter;
  background-color:#FCFCFD;
  max-width:50%;
  margin-left:auto;
  margin-right:auto;
  text-align:justify;
  position:relative;
  padding-top:1%;
}

.mastercontainer {
  position:relative;
  max-width:90%;
  overflow:hidden;
}

.containerleft {
  display:block;
  position:relative;
  max-width:45%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:left;
  left:2%;
  padding-bottom: 1%;
}

.containerright {
  display:block;
  position:relative;
  max-width:45%;
  overflow:visible;
  font-weight:lighter;
  height:auto;
  float:right;
  right:2%;
  padding-bottom: 1%;
}

.containercenter {
  display:block;
  position:relative;
  max-width:45%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:center;
  margin-left:auto;
  margin-right:auto;
   padding-bottom: 1%;
}

.containerleftportale {
  display:block;
  position:relative;
  max-width:45.5%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:left;
  left:12%;
}


.fussnote {
  max-width:60%;
  overflow:hidden;
  font-weight:lighter;
  font-style:italic;
  font-size:0.8em;
  height:auto;
  margin-left:auto;
  margin-right:auto
}

footer {
  font-size:0.7em;
  background-color:#FCFCFD;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:0.5em;
  margin-top:5%;
  text-align:center;
}

footer > a {
  color:#4d4d4d;
}

.headline {
  text-align:center;
}

.menu-off {display:none;
} 

#menu li {
  list-style-type:none;
  list-style-image:none;
  text-align:center;
}

.nav-bar  {
  top:-22px;
  width:98%;
  background:#4d4d4d;
  display:block;
  position:fixed;
  margin-left:-2%;
  margin-right:auto;
  opacity:0.9;
  z-index:999;
}


.nav-bar > li {
  display:inline-block;
  position:relative;
  line-height:30px;
}

.nav-bar > li.active {
  background:#2ba6cb;
}

.nav-bar > li.active:hover {
  background:#2ba6cb;
  cursor:default;
}

.nav-bar > li:hover {
  background:#333333; 
}

.nav-bar > li > a:first-child {
  color:#E6E6E6;
  position:inherit;
  margin-left:auto;
  margin-right:auto;
  padding-right:5px;
  padding-left:5px;
  display:inline-block;
  text-decoration:none;
  font-size:0.5em;
}

.nav-bar > li.active > a  {
  color:black;
  cursor:default;
}

.break-word {
  word-wrap: break-word;
}

}


/* Für Tablets im Hochformat */
@media screen and (min-device-width: 760px) and (max-device-width: 980px) and (orientation: portrait) {

  body {
    font-family:'Source Sans Pro', sans-serif ,"Myriad Pro", "Helvetica", "Arial", "Lucida Grande"; 
    color:#222222; 
    background-color:#FCFCFD; 
    font-size:1.2em; 
    font-weight:lighter;
    width:100%
  }

  img {
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:40%;
    height:auto;
    position:relative;
  }

  header {
    max-width:100%;
    max-height:auto;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    text-align:center;
    display:none;
  }

  aside {
    display:none; 
  }

  article {
    font-weight:lighter;
    background-color:#FCFCFD;
    max-width:60%;
    margin-left:auto;
    margin-right:auto;
    text-align:justify;
    position:inherit;
    padding-top:1%;
  }

  .fussnote {
    overflow:hidden;
    font-weight:lighter;
    font-style:italic;
    font-size:0.8em;
    height:auto;
    margin-left:15%
  }

  footer {
    font-size:0.7em;
    background-color:#FCFCFD;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0.5em;
    text-align:center;
  }

  footer > a {
    color:#4d4d4d;
  }

  .headline {
    text-align:center;
  }

  #menu {
    font-size:1.1em; 
  }

  #menu ul {
    position:relative;
    list-style-type:none;
    list-style-image:none;
    margin-top:17px;
    margin-left:-40px;
    z-index:500;
  }

  #menu li.topmenu {
    margin-top:5px;
    list-style-type:none;
    list-style-image:none;
    position:fixed;
    float:left;
    z-index:500;
  }

  .topmenu a {
    float:left;
    width:75%;
    height:auto;
    text-align:center;
    text-transform:auto;
  }

  .topmenu ul{
    display:none;
  }

  .topmenu a {
    padding:14px;
    color:black;
    font-weight:lighter;
    text-decoration:none;
    color:white;
    background-color:#4d4d4d;
    opacity:0.8; 
  }

  #menu a:hover, .topmenu.on a {
    color:#333333;
    background-color:#2ba6cb;
  }

  .topmenu:hover ul {
    display:block;  
  }

  .break-word {
  word-wrap: break-word;
}

}


/* Für Tablets im Querformat */
@media screen and (min-device-width: 760px) and (max-device-width: 980px) and (orientation: landscape) {

body {
  font-family:'Source Sans Pro', sans-serif ,"Myriad Pro", "Helvetica", "Arial", "Lucida Grande"; 
  color:#222222; 
  background-color:#FCFCFD; 
  font-size:1.3em; 
  font-weight:lighter; 
  width:100%;
}

img.center {
  display:block;
  margin-right:auto;
  margin-left: auto;
  max-width:50%;
  height:auto;
  position:relative;
}

img.leftcenter {
  display:block;
  position:relative; 
  width:20%;
  height:auto; 
  float:left; 
  left:15%; 
  padding-bottom: 1%;
} 

img.rightcenter {
  display:block;
  position:relative; 
  width: 20%;
  height:auto; 
  float:right; 
  right:15%; 
  padding-bottom: 1%;
}

img.left {
  display:block;
  position:relative; 
  width:40%;
  height:auto; 
  float:left; 
  left: 2%; 
  padding-bottom: 1%;
} 

img.right {
  display:block;
  position:relative; 
  width: 30%;
  height:auto; 
  float:right; 
  right:2%; 
  padding-bottom: 1%;
}

img.rightportale1 {
           display:block;
           position:relative; 
           width: 25%;
           height:auto; 
           float:right; 
           right:12%; 
           margin-top:1.5%;    
         }

 img.rightportale2 {
           display:block;
           position:relative; 
           width: 25%;
           height:auto; 
           float:right; 
           right:12%; 
           margin-top:0.3%;    
         }

header {
  max-width:100%;
  max-height:auto;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  text-align:center;
}

aside {
  display:none; 
  color:#E6E6E6;
  opacity:0.4;
  width:auto;
  position:relative;
  height:auto;
  margin-left:0%;
  font-weight:lighter;
  top:35%;
}

article {
  overflow:hidden;
  font-weight: lighter;
  background-color:#FCFCFD;
  max-width:50%;
  margin-left:auto;
  margin-right:auto;
  text-align:justify;
  position:relative;
  padding-top:1%;
}

.mastercontainer {
  position:relative;
  max-width:90%;
  overflow:hidden;
}

.containerleft {
  display:block;
  position:relative;
  max-width:45%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:left;
  left:2%;
  padding-bottom: 1%;
}

.containerright {
  display:block;
  position:relative;
  max-width:45%;
  overflow:visible;
  font-weight:lighter;
  height:auto;
  float:right;
  right:2%;
  padding-bottom: 1%;
}

.containercenter {
  display:block;
  position:relative;
  max-width:45%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:center;
  margin-left:auto;
  margin-right:auto;
   padding-bottom: 1%;
}

.containerleftportale {
  display:block;
  position:relative;
  max-width:45.5%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:left;
  left:12%;
}

.fussnote {
  max-width:60%;
  overflow:hidden;
  font-weight:lighter;
  font-style:italic;
  font-size:0.8em;
  height:auto;
  margin-left:auto;
  margin-right:auto
}

footer {
  font-size:0.7em;
  background-color:#FCFCFD;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:0.5em;
  margin-top:5%;
  text-align:center;
}

footer > a {
  color:#4d4d4d;
}

.headline {
  text-align:center;
}

.menu-off {display:none;
} 

#menu li {
  list-style-type:none;
  list-style-image:none;
  text-align:center;
}

.nav-bar  {
  top:-22px;
  width:98%;
  background:#4d4d4d;
  display:block;
  position:fixed;
  margin-left:-2%;
  margin-right:auto;
  opacity:0.9;
  z-index:999;
}

.nav-bar > li {
  display:inline-block;
  position:relative;
  line-height:40px;
}

.nav-bar > li.active {
  background:#2ba6cb;
}

.nav-bar > li.active:hover {
  background:#2ba6cb;
  cursor:default;
}

.nav-bar > li:hover {
  background:#333333; 
}

.nav-bar > li > a:first-child {
  color:#E6E6E6;
  position:inherit;
  margin-left:auto;
  margin-right:auto;
  padding-right:10px;
  padding-left:10px;
  display:inline-block;
  text-decoration:none;
  font-size:0.8em;
}

.nav-bar > li.active > a  {
  color:black;
  cursor:default;
}

.break-word {
  word-wrap: break-word;
}

}


/*für alle Auflösungen unter dieser Grenze */

@media screen and (max-width:760px) and (min-device-aspect-ratio: 1/1) {

  body {
    font-family:'Source Sans Pro', sans-serif ,"Myriad Pro", "Helvetica", "Arial", "Lucida Grande"; 
    color:#222222; 
    background-color:#FCFCFD; 
    font-size:1.2em; 
    font-weight:lighter;
    width:100%
  }

  img {
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:40%;
    height:auto;
    position:relative;
  }

  header {
    max-width:100%;
    max-height:auto;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    text-align:center;
    display:none;
  }

  aside {
    display:none; 
  }

  article {
    font-weight:lighter;
    background-color:#FCFCFD;
    max-width:60%;
    margin-left:auto;
    margin-right:auto;
    text-align:justify;
    position:inherit;
    padding-top:1%;
  }

  .fussnote {
    overflow:hidden;
    font-weight:lighter;
    font-style:italic;
    font-size:0.8em;
    height:auto;
    margin-left:15%
  }

  footer {
    font-size:0.7em;
    background-color:#FCFCFD;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0.5em;
    text-align:center;
  }

  footer > a {
    color:#4d4d4d;
  }

  .headline {
    text-align:center;
  }

  #menu {
    font-size:1.1em; 
  }

  #menu ul {
    position:relative;
    list-style-type:none;
    list-style-image:none;
    margin-top:17px;
    margin-left:-40px;
    z-index:500;
  }

  #menu li.topmenu {
    margin-top:5px;
    list-style-type:none;
    list-style-image:none;
    position:fixed;
    float:left;
    z-index:500;
  }

  .topmenu a {
    float:left;
    width:75%;
    height:auto;
    text-align:center;
    text-transform:auto;
  }

  .topmenu ul{
    display:none;
  }

  .topmenu a {
    padding:14px;
    color:black;
    font-weight:lighter;
    text-decoration:none;
    color:white;
    background-color:#4d4d4d;
    opacity:0.8; 
  }

  #menu a:hover, .topmenu.on a {
    color:#333333;
    background-color:#2ba6cb;
  }

  .topmenu:hover ul {
    display:block;  
  }

  .break-word {
  word-wrap: break-word;
}

}


/* Normale große Monitore */
@media screen and (min-width: 761px) and (max-width: 1280px) and (min-device-aspect-ratio: 1/1){

body {
  font-family:'Source Sans Pro', sans-serif ,"Myriad Pro", "Helvetica", "Arial", "Lucida Grande"; 
  color:#222222; 
  background-color:#FCFCFD; 
  font-size:1.3em; 
  font-weight:lighter; 
  width:100%;
}

.balkenlinks {
  display:block;
  position:fixed;
  top:40px;
  background-color:#2ba6cb;
  width:5%;
  height:100%;
  left:-1%;
}

.balkenrechts {
  display:block;
  position:fixed;
  top:40px;
  background-color:#2ba6cb;
  width:5%;
  height:100%;
  right:-1%;
}

img.center {
  display:block;
  margin-right:auto;
  margin-left: auto;
  max-width:50%;
  height:auto;
  position:relative;
}

img.leftcenter {
  display:block;
  position:relative; 
  width:20%;
  height:auto; 
  float:left; 
  left:15%; 
  padding-bottom: 1%;
} 

img.rightcenter {
  display:block;
  position:relative; 
  width: 20%;
  height:auto; 
  float:right; 
  right:15%; 
  padding-bottom: 1%;
}

img.left {
  display:block;
  position:relative; 
  width:45%;
  height:auto; 
  float:left; 
  left: 2%; 
  padding-bottom: 1%;
} 

img.right {
  display:block;
  position:relative; 
  width: 45%;
  height:auto; 
  float:right; 
  right:2%; 
  padding-bottom: 1
  }

  img.rightportale1 {
           display:block;
           position:relative; 
           width: 25%;
           height:auto; 
           float:right; 
           right:12%; 
           margin-top:1.5%;    
         }

 img.rightportale2 {
           display:block;
           position:relative; 
           width: 25%;
           height:auto; 
           float:right; 
           right:12%; 
           margin-top:0.3%;    
         }

header {
  max-width:100%;
  max-height:auto;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  text-align:center;
}

aside {
  display:none; 
  color:#E6E6E6;
  opacity:0.4;
  width:auto;
  position:relative;
  height:auto;
  margin-left:0%;
  font-weight:lighter;
  top:35%;
}

article {
  overflow:hidden;
  font-weight: lighter;
  background-color:#FCFCFD;
  max-width:50%;
  margin-left:auto;
  margin-right:auto;
  text-align:justify;
  position:relative;
  padding-top:1%;
}

.mastercontainer {
  position:relative;
  max-width:90%;
  overflow:hidden;
}

.containerleft {
  display:block;
  position:relative;
  max-width:45%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:left;
  left:2%;
  padding-bottom: 1%;

}

.containerright {
  display:block;
  position:relative;
  max-width:45%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:right;
  right:2%;
  padding-bottom: 1%;

}

.containercenter {
  display:block;
  position:relative;
  max-width:45%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:center;
  margin-left:auto;
  margin-right:auto;
   padding-bottom: 1%;
}

.containerleftportale {
  display:block;
  position:relative;
  max-width:45.5%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:left;
  left:12%;
}

.fussnote {
  max-width:60%;
  overflow:hidden;
  font-weight:lighter;
  font-style:italic;
  font-size:0.8em;
  height:auto;
  margin-left:auto;
  margin-right:auto
}

footer {
  font-size:0.7em;
  background-color:#FCFCFD;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:0.5em;
  margin-top:5%;
  text-align:center;
}

footer > a {
  color:#4d4d4d;
}

.headline {
  text-align:center;
}

.menu-off {display:none;
}

#menu li {
  list-style-type:none;
  list-style-image:none;
  text-align:center;
}

.nav-bar  {
  top:-22px;
  width:98%;
  background:#4d4d4d;
  display:block;
  position:fixed;
  margin-left:-1%;
  margin-right:auto;
  opacity:0.9;
  z-index:999;
}

.nav-bar > li {
  display:inline-block;
  position:relative;
  line-height:40px;
}

.nav-bar > li.active {
  background:#2ba6cb;
}

.nav-bar > li.active:hover {
  background:#2ba6cb;
  cursor:default;
}

.nav-bar > li:hover {
  background:#333333; 
}

.nav-bar > li > a:first-child {
  color:#E6E6E6;
  position:inherit;
  margin-left:auto;
  margin-right:auto;
  padding-right:10px;
  padding-left:10px;
  display:inline-block;
  text-decoration:none;
  font-size:0.8em;
}

.nav-bar > li.active > a  {
  color:black;
  cursor:default;
}

.break-word {
  word-wrap: break-word;
}

}


/*Ab diesem Wert ändert sich nix mehr, responsive wird statisch */
@media screen and (min-width:1281px) {

 body {
  font-family:'Source Sans Pro', sans-serif ,"Myriad Pro", "Helvetica", "Arial", "Lucida Grande"; 
  color:#222222; 
  background-color:#FCFCFD; 
  font-size:1.3em; 
  font-weight:lighter; 
  width:100%;
}

.balkenlinks {
  display:block;
  position:fixed;
  top:40px;
  background-color:#2ba6cb;
  width:5%;
  height:100%;
  left:-1%;
}

.balkenrechts {
  display:block;
  position:fixed;
  top:40px;
  background-color:#2ba6cb;
  width:5%;
  height:100%;
  right:-1%;
}

img {
  max-width: 650px;
}

img.center {
  display:block;
  margin-right:auto;
  margin-left: auto;
  max-width:650px;
  height:auto;
  position:relative;
}

img.leftcenter {
  display:block;
  position:relative; 
  width:20%;
  height:auto; 
  float:left; 
  left:15%; 
  padding-bottom: 1%;
} 

img.rightcenter {
  display:block;
  position:relative; 
  width: 20%;
  height:auto; 
  float:right; 
  right:15%; 
  padding-bottom: 1%;
}

img.left {
  display:block;
  position:relative; 
  width:45%;
  height:auto; 
  float:left; 
  left: 2%; 
  padding-bottom: 1%;
} 

img.right {
  display:block;
  position:relative; 
  width: 45%;
  height:auto; 
  float:right; 
  right:2%; 
  padding-bottom: 1%;
}

img.rightportale1 {
           display:block;
           position:relative; 
           width: 25%;
           height:auto; 
           float:right; 
           right:12%; 
           margin-top:1.5%;    
         }

 img.rightportale2 {
           display:block;
           position:relative; 
           width: 25%;
           height:auto; 
           float:right; 
           right:12%; 
           margin-top:0.3%;    
         }

header {
  max-width:100%;
  max-height:auto;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  text-align:center;
}

aside {
  display:none; 
  color:#E6E6E6;
  opacity:0.4;
  width:auto;
  position:relative;
  height:auto;
  margin-left:0%;
  font-weight:lighter;
  top:35%;
}

article {
  overflow:hidden;
  font-weight: lighter;
  background-color:#FCFCFD;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  text-align:justify;
  position:relative;
  padding-top:1%;
}

.mastercontainer {
  position:relative;
  max-width: 1150px;
  overflow:hidden;
}

.containerleft {
  display:block;
  position:relative;
  max-width:45%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:left;
  left:2%;
  padding-bottom: 1%;
}

.containerright {
  display:block;
  position:relative;
  max-width:45%;
  overflow:visible;
  font-weight:lighter;
  height:auto;
  float:right;
  right:2%;
  padding-bottom: 1%;
}

.containercenter {
  display:block;
  position:relative;
  max-width:45%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:center;
  margin-left:auto;
  margin-right:auto;
   padding-bottom: 1%;
}

.containerleftportale {
  display:block;
  position:relative;
  max-width:45.5%;
  overflow:hidden;
  font-weight:lighter;
  height:auto;
  float:left;
  left:12%;
}

.fussnote {
  max-width:60%;
  overflow:hidden;
  font-weight:lighter;
  font-style:italic;
  font-size:0.8em;
  height:auto;
  margin-left:auto;
  margin-right:auto
}

footer {
  font-size:0.7em;
  background-color:#FCFCFD;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:0.5em;
  margin-top:5%;
  text-align:center;
}

footer > a {
  color:#4d4d4d;
}

.headline {
  text-align:center;
}

.menu-off {display:none;
} 

#menu li {
  list-style-type:none;
  list-style-image:none;
  text-align:center;
}

.nav-bar  {
  top:-22px;
  width:99%;
  background:#4d4d4d;
  display:block;
  position:fixed;
  margin-left:-1%;
  margin-right:auto;
  opacity:0.9;
  z-index:999;
}

.nav-bar > li {
  display:inline-block;
  position:relative;
  line-height:40px;
}

.nav-bar > li.active {
  background:#2ba6cb;
}

.nav-bar > li.active:hover {
  background:#2ba6cb;
  cursor:default;
}

.nav-bar > li:hover {
  background:#333333; 
}

.nav-bar > li > a:first-child {
  color:#E6E6E6;
  position:inherit;
  margin-left:auto;
  margin-right:auto;
  padding-right:10px;
  padding-left:10px;
  display:inline-block;
  text-decoration:none;
  font-size:0.8em;
}

.nav-bar > li.active > a  {
  color:black;
  cursor:default;
}
}

.break-word {
  word-wrap: break-word;
}