body {
    margin: 0;
    background: #fff;
}











h1 {
    font-family: 'Oswald';
    font-size: 35px;
    font-weight: 300;
    text-align: center;
    color: #000;
    width: 100%;    
}

h2 {
    font-family: 'Oswald';
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    color: #000;
    width: 100%;  
}

h3 {
    font-family: 'Oswald';
    font-size: 20px;
    font-weight: 300;
    color: #000;
}

h4{
    font-family: 'Oswald';
    font-size: 14px;
    font-weight: 300;
    color: #000;
}

p {
    font-family: 'Noto Sans';
    font-size: 15px;
    font-weight: 300;
    color: #000;
}

a {
    cursor: pointer;
    text-decoration: none;
}

.overlay {
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0);
    display: none;
}

.overlay.active {
    background: rgba(0,0,0,0);
    display: block;
}










#myModal,
#problemModal{
    display: none;
    z-index: 105;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
}

.modal-dialog {
    z-index: 106;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    
    background: rgba(255,255,255,.7);
    padding: 20px;
    border-radius: 6px;
    color: #818181;
    
    border-radius: 0;
    
    animation:fadeIn .3s;
}

#myModal button,
#problemModal button {
    border: 1px solid #7e7e7e;
    background: transparent;
    border-radius: 0;
    padding: 10px;
    width: 100px;
    
    float: left;
    margin-left: calc(50% - 50px);
}

#myModal button:hover,
#problemModal button:hover{
    background: #fff;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 100%}
}








#menu-main {
    z-index: 101;
    position: fixed;
    width: 100%;
    height: 100px;
    color: #fff;
    transition: 1s;
    
    background: rgba(0,0,0,.5);
}

#menu-main.scrolled { background: #000; }

.c-hamburger {
    cursor: pointer;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 25px;
    left: calc(80% - 50px);
}

.c-hamburger span {
    position: relative;
    background: #fff;
    width: 40px;
    height: 2px;
    top: 24px;
    left: 5px;
    display: block;
}

.c-hamburger span::before,
.c-hamburger span::after {
    position: absolute;
    background: #fff;
    width: 40px;
    height: 2px;
    display: block;
    content: "";
}

.c-hamburger span::before { top: -12px; }

.c-hamburger span::after { bottom: -12px; }

#dropdown {
    display: inline-block;
    z-index: 103;
    position: fixed;
    top: 100px;
    right: 20%;
    background: rgba(0,0,0,0.5);
    transition: 1s;
}

#dropdown.scrolled {
    background: #000;
}

#dropdown ul li {
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 0;
    overflow: hidden;
    -webkit-transition:height .3s ease-in-out;
    -moz-transition:height .3s ease-in-out;
    -o-transition:height .3s ease-in-out;
    transition:height .3s ease-in-out;
}

#dropdown ul li.open {
    height: 50px;
}

#dropdown ul {
    float: right;
    list-style-type: none;
    margin: 0;
}

#dropdown ul li:hover h2 {
    color: #a0a0a0;
}

#dropdown ul li h2 {
    text-align: right;
    color: #fff;
    width: 150px;
    padding: 10px;
    padding-right: 20px;
    margin: 0;
}

#logo {
    z-index: 98;
    position: absolute;
    max-height: 400px;
    width: 90%;
    height: 90%;
    background: url(../images/Flag_of_Europe_02.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: 1s;
    
    -webkit-animation: fadeIn 3s;
    animation: fadeIn 3s;
}

#logo.scrolled {
    z-index: 102;
    position: fixed;
    max-height: 80px;
    width: 150px;
    left: 20%;
    top: 10px;
    transform: translate(0,0);
}

@media screen and (max-width:960px) {
    .c-hamburger {
        left: calc(100% - 70px);
    }
    
    #dropdown {
        width: 100%;
        right: 0px;
    }
    
    #logo.scrolled {
        left: 0;
    }
}








#hero-wrapper {
    position: relative;
    float: left;
    width: 100%;
    height: 100vh;
    background: #000;
}

.fa-angle-down:before {
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
    color: #fff;
    content: "\f107";
    font-size: 60px;
    font-weight: 100;
}

@media screen and (max-width: 1048px) {
    #hero-wrapper {
        background-size: 80%, cover, cover;
    }
}

/* SLIDER */

.slider {
    width: 100%;
    height: 100vh;
    position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
    float: none;
    position: absolute;
    width: 100%;
    height: 100%;
}
.slide1 {
    background: url(../images/ss3.jpg)no-repeat center;
    background-size: cover;
    background-position: center;
    animation:fade 8s infinite;
    -webkit-animation:fade 12s infinite;
} 
.slide2 {
    background: url(../images/ss1.jpg)no-repeat center;
    background-size: cover;
    background-position: left;
    animation:fade2 8s infinite;
    -webkit-animation:fade2 12s infinite;
}
.slide3 {
    background: url(../images/ss2.jpg)no-repeat center;
    background-size: cover;
    background-position: center;
    animation:fade3 8s infinite;
    -webkit-animation:fade3 12s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

/* SLIDER */













section {
    position: relative;
    float: left;
    width: 100%;
    padding-bottom: 20px;
}










.section-1 {}

.inner-wrapper-0 {
    max-width: 350px;
    width: calc(100% - 40px);
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

.delivery {
    width: 100%;    
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}











.section-1 {
    background: #525252;
}

.section-1 h1,
.section-1 h2 {
    color: #fff;
}

.inner-wrapper-1 {
    max-width: 350px;
    width: calc(100% - 40px);
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

.times {
    width: 100%;
}












.section-2 {    
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0, rgba(255,255,255,0) 150px), url('../images/P1060163_2.jpg');
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,1), color-stop(150px, rgba(255,255,255,0) ))), url('../images/P1060163_2.jpg');
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0, rgba(255,255,255,0) 150px), url('../images/P1060163_2.jpg');
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0, rgba(255,255,255,0) 150px), url('../images/P1060163_2.jpg');
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0, rgba(255,255,255,0) 150px), url('../images/P1060163_2.jpg');
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0, rgba(255,255,255,0) 150px), url('../images/P1060163_2.jpg');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 40px;
}

.inner-wrapper-2 {
    width: 800px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

ul.tab {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(255,255,255,.4);
}

/* Float the list items side by side */
ul.tab li {
    float: left;
    width: 12.5%;
}

/* Style the links inside the list items */
ul.tab li a {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
    color: black;
    font-family: 'Oswald';
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: rgba(255,255,255,.7);}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: rgba(255,255,255,.7);}

/* Style the tab content */
.tabcontent {
    font-family: 'Oswald';
    display: none;
    padding: 6px 12px;
    background: rgba(255,255,255,.8);
}

.tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect .5s; /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.speisekarte { border-collapse: collapse; }

.speisekarte tr:nth-child(1) { border: none }

.speisekarte tr { border-top: 1px solid #c6c6c6 }

.speisekarte tr td:nth-child(2) h3,
.speisekarte tr td:nth-child(3) h3,
.speisekarte tr td:nth-child(4) h3{
    text-align: right;
}

sup {
    font-size: 12px;
}

.inhaltsstoffe {
    width: auto;
    background: rgba(255,255,255,.8);
    padding: 6px 12px;
    border-top: 1px solid #c6c6c6
}

@media screen and (max-width: 960px){
    .inner-wrapper-2 {
        max-width: 100%;
        width: calc(100% - 40px);
    }
    
    ul.tab li {
        width: 25%;
    }
}










.section-3 {
    width: 100%;
    padding-bottom: 30px;
}

.maps {
    max-width: 800px;
    max-height: 500px;
    width: calc(100% - 40px);
    position: relative;
    left: 50%;
    transform: translate(-50%);
    
    border: none;
    box-shadow: 0 0 10px #6a6a6a;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media screen and (max-width:960px) {
    .maps {
        max-width: 100%;
    }
}








.footer {
    padding: 0;
}

.wrapper-upper-footer {
    width: 100%;
    background: #bcbcbc;
}

.footer ul {
    width: 150px;
    font-size: 0;
    list-style-type: none;
    margin-left: 50%;
    transform: translate(-50%);
}

.footer li {
    margin-left: -40px;
}

.footer li:nth-child(1) h2 {
    color: rgb(59,89,152);
}

.footer h2 {
    margin: 0;
    width: 11
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 400;
}

.wrapper-lower-footer {
    width: 100%;
    height: 300px;
    background: #525252;
}

#copyright {
    position: absolute;
    font-family: 'Arial';
    font-weight: 800;
    color: #767676;
    top: 60%;
}











/* IMPRESSUM */














#logo-2 {
    z-index: 105;
    position: fixed;
    max-height: 80px;
    width: 90%;
    height: 90%;
    background: url(../images/Flag_of_Europe_02.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 150px;
    left: 20%;
    top: 10px;
}

#imp-back {
    position: fixed;
    color: #fff;
    text-align: right;
    margin-top: 50px;
    right: 20%;
}

#imp-back:hover { color: #a0a0a0 }

@media screen and (max-width:1048px) {
    #logo-2 {
        left: 0;
    }
    
    #imp-back {
        right: 20px;
    }
}

.impressum {
    margin-top: 100px;
}

.impressum h1,
.impressum h2,
.impressum p {
    float: left;
    max-width: 1000px;
    width: calc(100% - 40px);
    margin-left: 50%;
    transform: translate(-50%);
    text-align: left;
}

.impressum a {
    color: brown;
}

@media screen and (max-width:960px) {
    .impressum h1,
    .impressum h2,
    .impressum p {    }
}

strong {
    color: #882525;
    font-weight: 700;
}