body {
    background-color: #000;
    line-height: normal;
    margin: 0;
    padding: 0;
    font-family: 'Barlow Condensed', sans-serif;
}

h2 {
    font-family: 'Fugaz One', sans-serif;
    font-size: 44px;
    font-weight: 200;
    line-height: 60px;
    letter-spacing: 0.05ch;
    text-transform: uppercase;
    margin-bottom : 20px;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 50px;
    text-transform: uppercase;
}

h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 50px;
    text-transform: uppercase;
}

h5 {
    font-family: 'Oxygen Mono', monospace;
    font-size: 20px;
    font-weight: 100;
    text-transform: uppercase;
}

p {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
}

li {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    list-style: disc;
}

ul {
    margin-left: 4vw;
}

ul li ul {
    margin-left : 8vw;
}

a {
    text-decoration: underline;
    color : #000000;
}

/* GENERIC CLASSES */
.section {
    width: 80vw;
    padding: 10vh 10vw 10vh 10vw;
    background-color : #fff;
    color : #000;
    display: flex;
    flex-flow: row wrap;
    align-items : stretch;
}

.col1 {
    width: 8vw;
}

.col2 {
    width: 16vw;
}

.col3 {
    width: 24vw;
}

.col4 {
    width: 32vw;
}

.col5 {
    width: 40vw;
}

.col6 {
    width: 48vw;
}

.col10 {
    width: 80vw;
}

#quandoo-booking-widget {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    height : auto;
    width : auto;
}

.quandoo-widget-builder {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 50px;
    text-transform: uppercase;
    text-align: left;
}

.hidden {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    visibility: hidden;
    width : 0;
    height : 0;
}

#banner {
    overflow: hidden;
}

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: block;
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

#banner p {
    color: #fff;
    height: 60px;
    line-height: 60px;
    width: 6220px;
    font-family: 'Oxygen Mono', monospace;
    font-size: 20px;
    margin: 0;

    /* https://www.quackit.com/html/codes/html_marquee_code.cfm */
    /* Starting position */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    /* Apply animation to this element */
    -moz-animation: example1 15s linear infinite;
    -webkit-animation: example1 15s linear infinite;
    animation: example1 80s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes example1 {
    0% {
        -moz-transform: translateX(100%);
    }

    100% {
        -moz-transform: translateX(-500px);
    }
} 

@-webkit-keyframes example1 {
    0% {
        -webkit-transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-500px);
    }
}

@keyframes example1 {
    0% {
        -moz-transform: translateX(100%);
        /* Firefox bug fix */
        -webkit-transform: translateX(100%);
        /* Firefox bug fix */
        transform: translateX(0);
    }

    100% {
        -moz-transform: translateX(-100%);
        /* Firefox bug fix */
        -webkit-transform: translateX(-100%);
        /* Firefox bug fix */
        transform: translateX(-100%);
    }
}

/* COOKIES DISCLAIMER */
#cookies_disclaimer{
    background : #fff;
    color : #000;
    position: fixed;
    bottom : 0;
    padding : 20px;
    display : flex;
    justify-content: space-between;
    align-items: center;
    flex-direction : row;
    border : none;
    border-top : 4px solid #FFF000;
} 

#cookies_disclaimer p {
    width : 80%;
    font-family : "Chewy", sans-serif;
    font-size : 22px;
}

#cookies_disclaimer button {
    font-family : "Chewy", sans-serif;
    width : 10%;
    background-color: #000;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}



/* MAIN STAGE */

#stage {
    width: 100vw;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100vh - 60px);
    height: calc(100vh - 60px);
    margin: 0;
    padding: 0;
    border: none;
    background-size: cover;
    background-position: center center;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

#simbiosalogo {
    width: 94vw;
    margin : 3vw;
    height : 20vh;
    background-image: url("img/shop_button.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
}

#kaparalogo {
    margin : 3vw;
    width: 94vw;
    height: 40vh;
    background-image: url("img/Kapara_logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

#stagetext {
    margin : 0;
    width: 100vw;
    height: 40vh;
    text-align: bottom;
    color : #fff;
    bakground : #000;
} 

#stagetext a {
    color : #fff;
}

.stage_bg_1 { background-image: url("img/stage_background.jpg");}

/* INTRODRUCTION */

#intro {
    background-color: #FFF000;
 
}

#intro h2 {
    color: #FFF000;
}

/* MENU */
.menu_entry {
    width : 100%;
    margin-bottom: 4vh;
}

.menu_entry_details {
    display : flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
}

.menu_entry_description {
    width : 75%;
}

.menu_entry_description p {
    font-size: 28px;
    font-weight: 400;
}

.menu_entry_price {
    width : 15%;
    text-align: right; 
}

.menu_entry_price p {
    font-family: 'Oxygen Mono', monospace;
    font-size: 22px;
    font-weight: 100;
    line-height: 30px;
    text-transform: uppercase;
}

/* FOOTER */


#footer {
    background-image: url("img/kapara_footer.png");
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.footer_button {
    width : 100%;
    text-align: center;
    margin-bottom : 2vh;
}

#dsgvo {
    width: 24vw;
    float: right;
}

#social {
    width : 24vw;
    float: left;
}

.footer_button a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

/* PHONE ADAPTIONS */

@media (max-device-width: 1023px) {
    .section {
        padding : 7vh 5vw 7vh 5vw;
        width : 90vw;
    }

    .col1 {
        width: 27vw;
    }
    
    .col2 {
        width: 90vw;
    }
    
    .col3 {
        width: 90vw;
    }
    
    .col4 {
        width: 90vw;
    }
    
    .col5 {
        width: 90vw;
    }
    
    .col6 {
        width: 90vw;
    }
    
    .col10 {
        width: 90vw;
    }

    
    #dsgvo {
        width: 30vw;
        float: right;
    }
    
    #social {
        width : 24vw;
        float: left;
    }

    iframe {
        margin-bottom : 20px;
    }

    .menu_entry {
        width : 100%;
        margin-bottom: 4vh;
    }

    .menu_entry_description {
        width : 85%;
    }
    
    .menu_entry_description p {
        font-size: 25px;
        font-weight: 400;
        line-height : 33px;
    }
    
    .menu_entry_price {
        width : 15%;
        text-align: right; 
    }
    
    .menu_entry_price p {
        font-family: 'Oxygen Mono', monospace;
        font-size: 18px;
        font-weight: 100;
        line-height: 30px;
        text-transform: uppercase;
    }
}

@media (max-device-width: 799px) {
    h3 {
        font-size: 30px;
        line-height: 40px;
    }

    #cookies_disclaimer {
        flex-direction : column;
    }

    #cookies_disclaimer p {
        width : 100%;
        font-size : 20px;
    }
    
    #cookies_disclaimer button {
        width : 40%;
    }

    #stage {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    
    #simbiosalogo {
        width: 30vw;
        margin-top : 3vw;
        height : 30%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
    
    #kaparalogo {
        width: 60vw;
        height: 60%;
        margin-left : 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top center;
    }
}