/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 24.02.2019, 15:46:19
    Author     : Dirk
*/
html, body {
  min-height: 100vh;
  height: 100%;
  width: 100%; }

body {
  min-height: 100%;
  width: 100%;
  background-color: #ccc;
  font-family: 'Source Sans Pro', sans-serif;
  color: #4c4c4c !important;
  font-size: 1.5em;
  background: url("../hg/body-hg.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

#wrapper {
  background: url("../hg/lilie.png") no-repeat 50px center; }

#container {
  width: 99%;
  border: 0px solid #ff0000;
  /*    min-width:1280px;
      min-height:1000px;*/
  text-align: center; }

#main {
  width: 100%;
  /*width: 980px;*/
  min-height: 1000px !important;
  position: static;
  margin: 0px auto;
  max-width: 1280px;
  float: none; }
  #main #nav {
    /*display:inline-block;*/
    width: 0;
    float: left; }
  #main .holderTop {
    width: 100%;
    margin-left: 0%;
    float: left;
    padding-top: 20px;
    padding-bottom: 20px; }
    #main .holderTop .telH {
      float: right;
      width: 29%;
      display: inline-block;
      text-align: left;
      padding-top: 10px; }
      #main .holderTop .telH span {
        display: block; }
    #main .holderTop .logoH {
      float: left;
      width: 70%;
      text-align: left; }
      #main .holderTop .logoH img {
        width: 538px; }
    #main .holderTop span.tel {
      color: #fff;
      font-size: 38px;
      line-height: 42px;
      etter-spacing: 3px; }
    #main .holderTop span.mail {
      color: #ffbdc3;
      font-size: 20px; }

#article-6 {
  position: absolute;
  left: -1000px; }

/*#######################*/
@keyframes topBar_open {
  0% {
    transform: translateY(0px) rotate(0deg);
    width: 60px; }
  10% {
    transform: translateY(-8px) rotate(0deg);
    width: 60px; }
  50% {
    transform: translateY(25px) rotate(45deg);
    width: 84px; }
  75% {
    transform: translateY(12px) rotate(45deg);
    width: 84px; }
  100% {
    transform: translateY(17px) rotate(45deg);
    width: 84px; } }
@keyframes bottomBar_open {
  0% {
    transform: translateY(0px) rotate(0deg);
    width: 60px; }
  10% {
    transform: translateY(-8px) rotate(0deg);
    width: 60px; }
  60% {
    transform: translateY(0px) rotate(-45deg);
    width: 84px; }
  75% {
    transform: translateY(-10px) rotate(-45deg);
    width: 84px; }
  100% {
    transform: translateY(-8px) rotate(-45deg);
    width: 84px; } }
@keyframes menuLabel_open {
  0% {
    transform: translateY(0px);
    opacity: 1; }
  25% {
    transform: translateY(-18px); }
  45% {
    transform: translateY(44px);
    opacity: 1; }
  48% {
    transform: translateY(50px);
    opacity: 0; }
  100% {
    transform: translateY(30px);
    opacity: 0; } }
@keyframes topBar_close {
  0% {
    transform: translateY(17px) rotate(45deg);
    width: 84px; }
  35% {
    transform: translateY(-8px) rotate(-4deg);
    width: 60px; }
  53% {
    transform: translateY(10px) rotate(3deg);
    width: 60px; }
  70% {
    transform: translateY(-6px) rotate(0deg);
    width: 60px; }
  100% {
    transform: translateY(-2px) rotate(0deg);
    width: 60px; } }
@keyframes bottomBar_close {
  0% {
    transform: translateY(-8px) rotate(-45deg);
    width: 84px; }
  35% {
    transform: translateY(-18px) rotate(6deg);
    width: 60px; }
  53% {
    transform: translateY(0px) rotate(-3deg);
    width: 60px; }
  68% {
    transform: translateY(-7px) rotate(0deg);
    width: 60px; }
  100% {
    transform: translateY(0px) rotate(0deg);
    width: 60px; } }
@keyframes menuLabel_close {
  0% {
    transform: translateY(30px);
    opacity: 0; }
  5% {
    transform: translateY(25px);
    opacity: 1; }
  25% {
    transform: translateY(-30px);
    opacity: 1; }
  37% {
    transform: translateY(-22px);
    opacity: 1; }
  45% {
    transform: translateY(-22px);
    opacity: 1; }
  58% {
    transform: translateY(8px) rotate(-10deg);
    opacity: 1; }
  83% {
    transform: translateY(-6px) rotate(0deg);
    opacity: 1; }
  100% {
    transform: translateY(0px);
    opacity: 1; } }
#menu-btn {
  display: block;
  position: absolute;
  margin: 0px 10px;
  text-align: center;
  width: 60px;
  height: 65px;
  z-index: 1234;
  top: 20px; }
  #menu-btn:before, #menu-btn:after {
    content: '';
    width: 100%;
    height: 8px;
    background-color: #FFFFFF;
    display: block;
    position: absolute;
    border-radius: 20px; }
  #menu-btn:before {
    transform-origin: left center; }
  #menu-btn:after {
    right: 0;
    top: 25px;
    transform-origin: right center; }
  #menu-btn .text {
    color: #FFF;
    font-family: "Candal", sans-serif;
    display: block;
    position: absolute;
    bottom: 0;
    font-size: 17px;
    letter-spacing: 2.5px; }
  #menu-btn:hover {
    cursor: pointer; }
  #menu-btn.open:before {
    animation: topBar_open 1s ease-in-out;
    animation-fill-mode: forwards; }
  #menu-btn.open:after {
    animation: bottomBar_open 1s ease-in-out;
    animation-fill-mode: forwards; }
  #menu-btn.open .text {
    animation: menuLabel_open 1s ease-in;
    animation-fill-mode: forwards; }
  #menu-btn.close:before {
    animation: topBar_close 1s ease-in-out;
    animation-fill-mode: forwards; }
  #menu-btn.close:after {
    animation: bottomBar_close 1s ease-in-out;
    animation-fill-mode: forwards; }
  #menu-btn.close .text {
    animation: menuLabel_close 1s ease-in;
    animation-fill-mode: forwards; }

/*# sourceMappingURL=aufbau.css.map */
