/*!
 * IE10 viewport hack for Surface/desktop Windows 8 bug
 * Copyright 2014-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*
 * See the Getting Started docs for more information:
 * http://getbootstrap.com/getting-started/#support-ie10-width
 */
@-webkit-viewport { width: device-width; }
@-moz-viewport    { width: device-width; }
@-ms-viewport     { width: device-width; }
@-o-viewport      { width: device-width; }
@viewport         { width: device-width; }

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local(''),
       url('../fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('../fonts/open-sans-v34-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* neuton-200 - latin */
@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: 200;
  src: local(''),
       url('../fonts/neuton-v18-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/neuton-v18-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* neuton-regular - latin */
@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/neuton-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/neuton-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* neuton-300 - latin */
@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/neuton-v18-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/neuton-v18-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* neuton-italic - latin */
@font-face {
  font-family: 'Neuton';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/neuton-v18-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/neuton-v18-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* neuton-700 - latin */
@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/neuton-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/neuton-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* neuton-800 - latin */
@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../fonts/neuton-v18-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/neuton-v18-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height 
  margin-bottom: 180px;*/
  background-color: #f3f2ee;
}
@media (min-width: 768px) {
body {
  background-color: #f3f2ee;
  }
}

body.imprint {
  padding-top:50px;
  background-color: #f3f2ee;
  }

.distancetop {
    height: 80px;
}
@media (min-width: 768px) {
.distancetop {
    height: 270px;
  }
}

h1 {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 3em;
    font-weight:600;
    padding-top: 0px;
    padding-bottom: 10px;
    color: #333333;
}
h2,
h3,
h4
  {
    font-family: "Neuton",Times,"Times New Roman",sans-serif;
    font-size: 2.2em;
    padding-top: 34px;
    padding-bottom: 20px;
    font-weight:400;
    color: #000000;
}
h5,
h6
  {
    font-family: "Neuton",Times,"Times New Roman",sans-serif;
    font-size: 2.2em;
    padding-top: 24px;
    padding-bottom: 10px;
    font-weight:400;
    color: #000000;
}

@media (min-width: 768px) {
  h1 {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 4.7em;
    font-weight:600;
    padding-top: 0px;
    padding-bottom: 10px;
    color: #333333;
  }
  h2,
  h3,
  h4
    {
    font-family: "Neuton",Times,"Times New Roman",sans-serif;
    font-size: 2.6em;
    padding-top: 130px;
    padding-bottom: 40px;
    font-weight:700;
    color: #000000;
  }
  h5
    {
    font-family: "Neuton",Times,"Times New Roman",sans-serif;
    font-size: 2.6em;
    padding-top: 80px;
    padding-bottom: 20px;
    font-weight:700;
    color: #000000;
  }
    h6
    {
    font-family: "Neuton",Times,"Times New Roman",sans-serif;
    font-size: 1.8em;
    padding-top: 20px;
    padding-bottom: 0px;
    font-weight:700;
    color: #000000;
  }
}

a {
  color: #333333;
}

a:hover {
  color: #333333;
}

a:active {
  color: #333333;
}

a:visited {
  color: #333333;
}

p {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.2em;
    line-height: 1.4;
    padding-bottom: 10px;
}
@media (min-width: 768px) {
  p {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.4em;
    line-height: 1.6;
    padding-bottom: 10px;
  }
}

ul {
    margin: 0;
    padding-bottom: 20px;
}

.small {
    font-size: 1em;
    line-height: 1.4;
}

.smallzitat {
    font-size: 0.6em;
    line-height: 1.4;
}

.fett {
    font-weight: 700;
}

.fettkursiv {
    font-weight: 700;
    font-style: italic;
}

.kursiv {
    font-style: italic;
}

.zitat {
    font-family: "Neuton",Times,"Times New Roman",sans-serif;
    font-size: 1.5em;
    line-height: 1.3;
    font-weight: 700;
}
.zitatweiss {
    font-family: "Neuton",Times,"Times New Roman",sans-serif;
    font-size: 1.5em;
    line-height: 1.3;
    font-weight: 400;
    padding-top:10px;
    padding-bottom: 6px;
    color:#ffffff;
}

@media (min-width: 768px) {
.zitat {
    font-family: "Neuton",Times,"Times New Roman",sans-serif;
    font-size: 1.8em;
    line-height: 1.5;
    font-weight: 700;
}
.zitatweiss {
    font-family: "Neuton",Times,"Times New Roman",sans-serif;
    font-size: 1.8em;
    line-height: 1.5;
    font-weight: 400;
    padding-top:15px;
    padding-bottom: 10px;
    color:#ffffff;
}
}

.impressum {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1em;
    line-height: 1.;
    font-weight: 400;
    padding-top: 10px;
    padding-bottom: 0px;
    color:#ffffff;
}

.impressum a{
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1em;
    line-height: 1.5;
    font-weight: 400;
    padding-top: 10px;
    padding-bottom: 0px;
    color:#ffffff;
}

.distancestart {
    padding-bottom: 190px;
}


img.distance {
    padding-top: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
}

@media (min-width: 768px) {
img.distance {
    padding-top: 6px;
    padding-bottom: 40px;
    padding-left: 40px;
}
}

hr {
    padding-top: 10px;
    padding-bottom: 10px;
    border-color: #ffffff;
    border-style: dashed;
}

.fade {
    opacity: 0.7;
} 



/* ------------- Hintergründe ------------- */
.navigation {
    background-color:#333333;
}

.weiss {
    padding-bottom: 80px;
    background-color:#ffffff;
}

.weisslast {
    background-color:#ffffff;
}

.graulast {
    padding-bottom: 80px;
    background-color:#dfdeda;
}

.malspiel {
    padding-bottom: 80px;
    background-color:#eceae6;
}

.arnostern {
    padding-bottom: 80px;
    background-color:#f6f5f1;
}

.dienende {
    padding-bottom: 80px;
    background-color:#cfcecc;
}

.johanneswettengel {
    padding-bottom: 80px;
    background-color:#dfdeda;
}


/* ------------- Schriften Angaben ------------- */
.nav_font {
    text-transform: uppercase;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1em;
    font-weight: 400;
    border-bottom: 1px dashed;
}
@media (min-width: 768px) {
.nav_font {
    text-transform: uppercase;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    border-right: 1px solid;
    border-bottom: none;
  }
}
@media (min-width: 992px) {
.nav_font {
    text-transform: uppercase;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.3em;
    font-weight: 400;
    border-right: 1px solid;
    border-bottom: none;
  }
}


/* ------------- Smartphone-Navigation Angaben ------------- */
.container_nav {
    margin-left: -15px;
    padding-bottom: 0px;
}
@media (max-width: 767px) {
.container_nav {
    margin-left: -6px;
    padding-bottom: 0px;
  }
}

.navbar-default {
  background-color: #333333;
}

.navbar-default .navbar-nav > li > a {
  color: #f3f2ee;
  background-color: #333333;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333333;
  background-color: #f3f2ee;
}

.navbar-nav {
  margin: 0px -15px;
}
.navbar-nav > li > a {
  padding-top: 0px;
  padding-left: 15px;
  padding-bottom: 0px;
  line-height: 20px;
}


/* ------------- Bildschirm-Navigation Angaben ------------- */
@media (min-width: 768px) {
.nav_small {
    display: none;
  }
}

@media (max-width: 767px) {
.nav_big {
    display: none;
  }
}

#stickytop{
  left: 0;
  top: 0;
  width: 100%;
  position: fixed;
  z-index: 999;
}

#navi_rahmen {
  width: 100%;
  position: absolute;
  top: 0px;
  padding-left: 30px;
  background-color: #333333
}

#navi_rahmen #navi {
  position: relative;
  height: 100px;
  border-bottom: 1px solid #f3f2ee;
}

#navi a {
  position: absolute;
  padding: 0px 4px 6px 6px;
  display: block;
  border: 1px solid #f3f2ee;
}

#navi_list {
  position: relative;
}

 #navi_list a {
  position: absolute;
  padding: 0px 4px 6px 6px;
  display: block;
  text-decoration: none;
  color: #f3f2ee;
  background-color: none;
  border: 1px solid #f3f2ee;
  -webkit-transition: ease 0.3s;
  -o-transition: ease 0.3s;
  transition: ease 0.3s;
}

#navi_list a:hover {
  color: #333333 !important;
  background-color: #f3f2ee;
  --webkit-transition: none;
  -o-transition: none;
  transition: none;
}


a#malort {
  top: 0;
  left: 0;
  width: 110px;
  height: 75px;
  padding-top:48px;
}
@media (min-width: 992px) {
a#malort {
  top: 0;
  left: 0;
  width: 150px;
  height: 75px;
  padding-top:48px;
  }
}

a#malspiel {
  top: 74px;
  left: 0;
  width: 110px;
  height: 26px;
}
@media (min-width: 992px) {
a#malspiel {
  top: 74px;
  left: 0;
  width: 150px;
  height: 26px;
  }
}

a#arnostern {
  top: 0px;
  left: 109px;
  width: 190px;
  height: 50px;
  padding-top:24px;
}
@media (min-width: 992px) {
a#arnostern {
  top: 0px;
  left: 149px;
  width: 230px;
  height: 50px;
  padding-top:24px;
}
}

#rolle {
  height: 26px;
  width: 190px;
  top: 49px;
  left: 109px;
}
@media (min-width: 992px) {
#rolle {
  height: 26px;
  width: 230px;
  top: 49px;
  left: 149px;
}
}

#johannes {
  top: 74px;
  left: 109px;
  width: 190px;
  height: 26px;
}
@media (min-width: 992px) {
#johannes {
  top: 74px;
  left: 149px;
  width: 230px;
  height: 26px;
}
}

a#termine {
  top: 0px;
  left: 298px;
  width: 110px;
  height: 75px;
  padding-top:48px;
}
@media (min-width: 992px) {
a#termine {
  top: 0px;
  left: 378px;
  width: 150px;
  height: 75px;
  padding-top:48px;
}
}

#kosten {
  top: 74px;
  left: 298px;
  width: 110px;
  height: 26px;
}
@media (min-width: 992px) {
#kosten {
  top: 74px;
  left: 378px;
  width: 150px;
  height: 26px;
}
}

a#besichtigung {
  top: 0px;
  left: 407px;
  width: 150px;
  height: 50px;
  padding-top:24px;
}
@media (min-width: 992px) {
a#besichtigung {
  top: 0px;
  left: 527px;
  width: 170px;
  height: 50px;
  padding-top:24px;
}
}

#gespraech {
  height: 26px;
  width: 150px;
  top: 49px;
  left: 407px;
}
@media (min-width: 992px) {
#gespraech {
  height: 26px;
  width: 170px;
  top: 49px;
  left: 527px;
}
}

#anmeldung {
  top: 74px;
  left: 407px;
  width: 150px;
  height: 26px;
}
@media (min-width: 992px) {
#anmeldung {
  top: 74px;
  left: 527px;
  width: 170px;
  height: 26px;
}
}

a#aktuelles {
  top: 0px;
  left: 556px;
  width: 110px;
  height: 50px;
  padding-top:24px;
}
@media (min-width: 992px) {
a#aktuelles {
  top: 0px;
  left: 696px;
  width: 150px;
  height: 50px;
  padding-top:24px;
}
}

#links {
  height: 26px;
  width: 110px;
  top: 49px;
  left: 556px;
}
@media (min-width: 992px) {
#links {
  height: 26px;
  width: 150px;
  top: 49px;
  left: 696px;
}
}

#kontakt {
  top: 74px;
  left: 556px;
  width: 110px;
  height: 26px;
}
@media (min-width: 992px) {
#kontakt {
  top: 74px;
  left: 696px;
  width: 150px;
  height: 26px;
}
}


/* ------------- Button ------------- */

.btn {
  display: inline-block;
  padding: 2px 20px;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

@media (min-width: 768px) {
.btn {
  display: inline-block;
  padding: 8px 50px;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
}

.btn-warning {
  color: #333333;
  background-color: #f59204;
}

.btn-warning:hover {
  color: #333333;
  background-color: #f58104;
}

.btn-warning:visited {
  color: #333333;
  background-color: #f59204;
}


/* ------------- footer Angaben ------------- */
.footer {
  position: absolute;
  width: 100%;
  margin-top:20px;
  padding-top:10px;
  /* Set the fixed height of the footer here 
  height: 180px; */
  background-color: #333333;
}