@charset "UTF-8";

body {
  height: 100%;
  color: #f2f2f2;
  background: rgba(54, 54, 74, 0.5) !important;
}

/* ****************************************************************************
  header
*/
header {

}

header #company {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 150%;
}

header #logo {
  display: block;
  height: 55px;
  width: 55px;
  text-indent: -999999px;

  background-image: url('../gfx/philip_bauservice_luebeck.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

/* nav.main */
header nav.main {

}

header nav.main > ul {
  display: block;
  margin: 0 0;
  padding: 0 0;
  list-style: none;
}

header nav.main > ul > li {
  display: inline-block;
  margin: 0 0;
  padding: 0 0;
}

header nav.main > ul > li > a,
header nav.main > ul > li > a[role="button"] {
  display: block;
  padding: 6px 12px;

  color: #cdcdcd;
  font-weight: 700;
  text-decoration: none;
}

header nav.main > ul > li:last-child > a {
  padding-right: 0;
}

header nav.main > ul > li:first-child > a {
  padding-left: 0;
}

header nav.main > ul > li > a:hover,
header nav.main > ul > li.active > a {
  color: #ffffff;
}

header #slogan {
  font-family: 'Dancing Script', arial, sans-serif;
  font-weight: 500;
}

/* mobile menu */
header nav.main.mobile-menu-btn {
  display: block;
  position: relative;
  z-index: 101;
  top: -4px;
}

header nav.main .mobile-menu-btn .line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 6;
  transition: stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

header nav.main .mobile-menu-btn .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

header nav.main .mobile-menu-btn .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

header nav.main .mobile-menu-btn .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

header nav.main .mobile-menu-btn.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

header nav.main .mobile-menu-btn.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

header nav.main .mobile-menu-btn.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

/* section.banner */
header section.banner img {
  width: 100%;
}
/* ****************************************************************************
  main
*/
main {
  min-height: 500px;
}

main #about-us {
  margin-top: 100px;
  margin-bottom: 100px;
}

/* #kontakt */
main > #kontakt {
  min-height: 250px;
}

/* galerie */
main .galerie .image {
  display: block;
  position: relative;
  z-index: 5;
  overflow: hidden;

  cursor: pointer;
}

main .galerie .image::before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 6;
  content: '';

  background: rgba(0,0,0,.55);
  transition: all 0.2s ease;
  opacity: 0;
}

main .galerie .image:hover::before {
  opacity: 1;
}

/* ****************************************************************************
  footer
*/
footer.body {
  min-height: 25px;
  padding: 1rem 0;
}

footer.body #copyright {
  color: #999;
}