/* breakpoint Navbar */
@media screen and (min-width:48em) {
  .menu { display: none; }
  .Navigation { float: right; display: unset; }
  .Navigation ul { list-style: none; padding: 0; }
  .Navigation li { float: left; }
  .Navigation a {
    display: block;
	  padding: 13px 15px 5px 15px;
    text-decoration: none;
    color: white;
    position: relative;
  }
  .Navigation a::after {
    content: '';
    height: 2px;
    width: 0;
    background-color: #ffcc00;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .Navigation a:hover::after { width: 100%; }
  .navchild { display: none; font-style: normal; }
  .dropdown-content {
    margin-top: 10px;
    display: none;
    position: absolute;
    background-color: #7fb344;;
    min-width: 160px;
    box-shadow: 7px 7px 7px #888888;
    z-index: 1;
    font-style: normal;
  }
  .dropdown-content a {
    color: white;
    text-decoration: none;
    text-align: left;
    background-color: #7fb344;
  }
  .dropdown:hover .dropdown-content { display: block; }
}

/* breakpoint Sidebar & Content */
@media screen and (min-width:75em) {
  .Content {
    width:75%;
    float: left;
    padding-left: 2em;
    border-color: red;
    border-radius: 2px;;
  }
  .Sidebar {
    width:15em;
    float: left;
    display: unset;
  }
  .sidemenu { display: none; }

  .footer { clear: both; } /* clear float of content & sidebar, footer = float behind content */
}

/* breakpoints Content */
@media screen and (min-width:80em) { .Content { width:76%; } }
@media screen and (min-width:85em) { .Content { width:77%; } }
@media screen and (min-width:90em) { .Content { width:78%; } }
@media screen and (min-width:95em) { .Content { width:79%; } }
@media screen and (min-width:100em) { .Content { width:80%; } }
@media screen and (min-width:105em) { .Content { width:81%; } }
@media screen and (min-width:110em) { .Content { width:82%; } }
@media screen and (min-width:115em) { .Content { width:83%; } }
@media screen and (min-width:120em) { .Content { width:84%; } }
@media screen and (min-width:125em) { .Content { width:85%; } }

/* breakpoint Footer */
@media screen and (min-width:71em) {
  .box {
    float: left;
    position: relative;
    left: -50%;
    width: 21em;
    height: 15em;
  }
  .footer { clear: both; float: left; position: relative; left: 50%;}
}

/* Breakpoint Impressum*/
@media screen and (min-width:87em) {
  .ImpressumBox {
    float: left;
    position: relative;
    left: -50%;
    width: 21em;
    height: 15em;
  }
  .Impressum { clear: both; float: left; position: relative; left: 50%; }
  .ImpressumUnten { clear: both; }
  .buttonI {float: left; position: relative; }
  .ImpressumBoxOben {
    float: left;
    position: relative;
    left: -50%;
  }
  .ImpressumOben { clear: both; float: left; position: relative; left: 50%; }
  .GSOS { margin-top: 5em; }
}


/* Breakpoint Home */
@media screen and (min-width:60em) {
  .imagebox {
    float: left;
    position: relative;
    left: -50%;
  }

  .homebox {float: left; position: relative; left: 50%;}
  .footer { clear:both; }
}

/*Fade in Footer*/
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}