/* Customized CSS */
/* koho-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'KoHo';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/koho-v16-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* koho-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'KoHo';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/koho-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* koho-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'KoHo';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/koho-v16-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* koho-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'KoHo';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/koho-v16-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* koho-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'KoHo';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/koho-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html, body {
  font-family: 'KoHo' !important;
}
h1, h2, h3, h4, h5, h6, a {
  font-family: 'KoHo' !important;
}
body {
  background: white;
  color: #1a171b !important;
  padding: 0 !important;
  margin: 0 !important;
}
.container-fluid {
    padding: 0 !important;
}
.container {
  max-width: 940px !important;
}
header {
   padding: 0;
}
.s-index {
  height: 0 !important;
}
.bg-green {
  background: #004621;
}
.text-green {
  color: #004621;
}
.bg-yellow {
  background: #fee9c4;
}
.bg-brown {
  background: #3e211c;
}
.text-brown {
  color: #3e211c;
}
a.nav-link {
  padding: .25rem 1.0rem !important;
  line-height: .7rem !important;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: white !important;
}
a.nav-link:hover, a.nav-link.active {
  font-weight: 600 !important;
}
#logo-top {
  width: 500px;
  height: 500px;
  position: absolute;
  background: rgba(255, 255, 255, .9);
  border-radius: 50%;
  top: -220px;
}
#logo-top img {
  max-width: 63%;
}
.titels {
  max-height: 100px;
  min-height: 70px;
}
.start-galerie img:hover {
  transition: linear .8s;
  filter: brightness(60%);
}
.modal {
  background: rgba(0, 0, 0, .4) !important;
}
.btn-close {
  opacity: 1 !important;
  filter: invert(100%);
}
p.p-right, p.p-left {
  position: relative;
}
p.p-right::before, p.p-left::after {
  position: absolute;
  width: 1.0rem;
  height: 100%;
  top: 0;
  content: "";
  background: #fee9c4;
}
p.p-right::before {
  left: -1.0rem;
}
p.p-left::after {
  right: -1.0rem;
}

footer a.nav-link {
  font-size: .9rem;
}
footer img {
  max-width: 257px;
  width: auto;
}
/* ----- Taste scroll-Top ----- */
.scrollup {
    position: fixed;
    bottom: 20px;
    right: 30px;
    background: rgba(0, 0, 0, .5) !important;
    color: rgb(255, 255, 255);
    cursor: pointer;
    z-index: 1540;
}

@media screen and (max-width: 992px){
  .navbar-toggler-icon {
    filter: invert(100%);
  }
  #offcanvasDarkNavbar {
    background-color: #004621 !important;
  }
  #offcanvasDarkNavbar .nav-link {
    padding: 1.0rem !important;
    border: none !important;
  }
  #logo-top {
    width: 320px;
    height: 320px;
    top: -120px;  
  }

}

@media screen and (max-width: 780px){
  #logo-top {
    width: 270px;
    height: 270px;
    top: -100px;  
  }
  p.p-right::before, p.p-left::after {
    width: 0;
  }
}

@media screen and (max-width: 580px){
  #logo-top {
    width: 220px;
    height: 220px;
    top: -90px;  
    margin-left: 20% !important;
  }
}

@media screen and (max-width: 420px) {
  #logo-top {
    width: 160px;
    height: 160px;
    top: -60px;
    
  }
}