/**  Normalize
------------------------------------------------------------------------------ */
body {
  margin: 0;
  font-size: 13px;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/** General
-------------------------------------------------------------------------------*/
/* Fonts */
@font-face {
  font-family: 'FavoritRegular';
  src: url('fonts/favorit-regular.woff') format('woff'); /* Pretty Modern Browsers */
}
@font-face {
  font-family: 'CentSchbook';
  src:url('fonts/CentSchbook.eot?#iefix');
  src:url('fonts/CentSchbook.eot') format('eot'), /* IE9 Compat Modes */
  url('fonts/CentSchbook.woff2') format('woff2'), /* Super Modern Browsers */
  url('fonts/CentSchbook.woff') format('woff'), /* Pretty Modern Browsers */
  url('fonts/CentSchbook.ttf') format('truetype'); /* Safari, Android, iOS */
}

body {
  font-family: 'FavoritRegular', Fallback, sans-serif;
}
header {
  background: white;
  margin-top: -.6rem;
  margin-bottom: -.6rem;
}
footer {
  font-family: 'CentSchbook', Fallback, serif;
}
main, footer, header {
  margin-left: .4rem;
  margin-right: .4rem;
}
h2 {
  font-size: inherit;
  font-weight: inherit;
  margin-bottom: inherit;
}
a {
  color: black;
  text-decoration: none;
}
img {
  border: 0;
  max-width: 100%;
}
footer {
  text-transform: uppercase;
  line-height: 1em;
}
.customfooter {
  background: white;
  bottom: 0;
  letter-spacing: .1em;
  padding-bottom: 0.3rem;
  position: fixed;
  width: 100%;
}
.customfooter p { /* Für einheitliche line-height im Footer */
  background-color: white;
  margin: 0;
  padding: 0;
}
.customfooter p:first-child {
  padding-top: 5px;  /*  Für Whitespace oberhalb Footer */
}
nav ul, ul.menu {
  list-style-type: none;
}
#home-menu a {
  color: black;
}
.normcontent {
  display: flex;
  line-height: 1em;
}
.contentcol {
  line-height: 1em;
}
.content p, .contentcol p {
  margin: 0;
  padding: 0;
}
.colleft {
  margin-right: 1rem;
}
.gallery {
  display: flex;
  flex-wrap: nowrap;
}
.gallerycaption {
  margin-top: -1px;
  line-height: 1em;
}


/** Media Queries (small screen)
-------------------------------------------------------------------------------*/
@media (max-width: 720px ) {
  .nomobile {
    display: none;
  }
  header {
    margin-bottom: 3rem;
  }
  main {
    margin-top: 45px;
    margin-bottom: 7rem;
  }
  #home-menu {
    font-family: 'CentSchbook', Fallback, serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: absolute;
    top: 0;
    left: -2rem;
    }
  .normcontent, .gallery {
    flex-direction: column;
  }
  .gallery-image {
    margin-bottom: 1.5rem;
  }
  .image {
    margin-bottom: 5px;
  }


  /** Smashing Mobile Navigation
  -------------------------------------------------------------------------------*/
  /** My Own Burger **/
  .burgermenu {
      width: 35px;
      height: 3px;
      background-color: black;
      margin: 5px 0;
  }

  /** Navigation Toggle Button and Closing Button **/
  .nb,
  .nc {
    font-family: sans-serif;
    position: absolute;
    right: .4rem;
    top: .1rem;
    z-index: 4;
  }

  /* Normally the closing button is hidden */
  .nc {
    display: none;
    z-index: 3;
  }

  /* and as soon as the nav is targeted we reveal it and place it on top of the menu button */
  /* WORKUNIT closing button style here */
  .nav:target + .nc {
    display: block;
    z-index: 5;
    padding: 20px;
  }

  /** Mobile Navigation Styling
   * The container is at 0 height at first
   * when receiving target everything becomes
   * visible by giving it height and display: block
   */
  .nav {
    position: absolute;
    display: block;
    width: 100%;
    height: 0px;
    max-height: 0px;
    padding-top: 0px;
    opacity: 0;
    transition: none ;
  }
  .nav ul {
    display: none;
    margin: 0;
    margin-left: -40px;
  }
  .nav li {
    line-height: 1.2em;
    padding: 0 .3275em;
  }
  .nav ul li ul li {
  margin-left: .5rem;}

  .nav ul li ul li:first-child {
    margin-top: -3rem;
  }
  .nav a {
    color: black;
    display: block;
    padding: 0;
    width: 0;
    height: 0;
  }

  /** When clicking the Menu button the nav receives :target
   */
  .nav:target {
    position: relative;
    top: -10em;
    z-index: 2;
    padding-top: 10em;
    margin-bottom: -8em;
    margin-left: 0.5em;
    height: 100%;
    max-height: 62.5em;
    opacity: 1;
    transition:
      opacity .4s ease-out,
      max-height .4s ease-out;
  }
  .nav:target ul {
    display: block;
    margin-top: 3rem;
  }
  .nav:target a {
    width: auto;
    height: 100%;
    padding: .3875em 0 .3875em .5475em;
  }

  .gmap > iframe {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    height: 70vh;
    width: 100%;
  }

}

/** Media Queries (large screen)
-------------------------------------------------------------------------------*/

@media (min-width: 721px ) {
  .mobile {
    display: none;
  }
  /* Navigation */
  header {
    display: flex;
    left: -1rem; /* Hack! */
    padding-right: 1rem; /* Hack! */
    position: fixed;
    top: 0;
    width: 100%;
  }
  #home-menu {
    font-family: 'CentSchbook', Fallback, serif;
    margin-left: -1.5rem;
    text-transform: uppercase;
    margin-bottom: .3rem;
    letter-spacing: 0.1em;
    position: relative;
  }
  #nav_main {
    margin-left: -1rem;
  }
  .nav ul {
    margin-bottom: .3rem; /* Margin unter Navi! */
  }
  .nav li {
    display: inline;
    padding: 5px;
    padding-right: 10px;
    position: relative;
  }
  .nav ul li ul {
    display: inline; /* nested list inline */
    position: absolute;
    left: 15rem;
  }
  .nav a {
    color: black;
  }
  nav ul.menu li a:hover:before, nav ul.menu li.current>a:before {
    content: "• ";
    font-size: 20px;    /* Bullet Grösse */
    position: absolute;
    top: 1px;          /* Bullet Position */
    left: -5px;
  }
  main {
    margin-bottom: 4rem;
    margin-top: 1.3rem;
  }
  .image {
    margin-right: 5px;
    height: 80vh;
  }
  .image img {
    height: 100%;
    max-width:none;
  }
  .home-image img {
    height: 93vh;
  }
  .gal1 > .gallery-image {
    margin: 5px;
    min-width: 300px;
    max-width: 33%;
    flex: 1;
  }
  .gallery-image:first-child {
    margin-left: 0;
  }
.gallery.gal2 .gallery-image img {
  height: 400px;
  margin: 5px;
  max-width: unset;
}
  .contentcol {
    display: flex;
  }
  .gmap {
    position: relative;
    margin-bottom: 1.2rem;
    top: .5rem;
  }
  .gmap > iframe {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
  }