:root {
    --black: #141618;
    --black-transparent: rgba(20, 22, 24, 0.75);
    --black-light-transparent: rgba(20, 22, 24, 0.25);
    --grey: rgb(119, 119, 119);
    --grey-transparent: rgba(119, 119, 119, 0.1);
    --gold: #c7b382;
    --gold-dark: #a19168;
    --green: #6f6c01;
    --white: #FFFFFF;
    --white-light-transparent: rgba(255, 255, 255, 0.25);
    --error: #e62c2c;
}

/***********************
**      Header        **
************************/
.header {
    position: absolute;
    background-color: var(--black-transparent);
    z-index: 500;
    /* width: 100vw; */
    width: 100%;
    padding: 20px 50px;
    box-sizing: border-box;
}

.header .uk-position-center-right {
    right: 50px;
}

#phoneIcon {
    color: var(--gold);
}
.uk-navbar-container:not(.uk-navbar-transparent) {
    background: #fff;
}

/***********************
**     Navigation     **
************************/

.uk-dotnav.uk-dotnav-vertical {
    z-index: 900;
}

.uk-dotnav.uk-dotnav-vertical a {
    height: 40px;
    min-width: 40px;
    text-transform: uppercase;
    border: solid 3px var(--gold);
    border-radius: 25px;
    color: transparent;
    box-shadow: 2px 2px 15px var(--white-light-transparent);
    transition-property: background-color, width, padding;
    transition: .2s ease-in-out;
}

.uk-dotnav.uk-dotnav-vertical a:active,
.uk-dotnav.uk-dotnav-vertical a:focus {
    background-color: var(--gold);
}

.uk-dotnav.uk-dotnav-vertical a.active,
.uk-dotnav.uk-dotnav-vertical a:focus,
.uk-dotnav.uk-dotnav-vertical a:hover {
    width: auto;
    /* fallback 4 old browser */
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    color: var(--white);
    background-color: var(--gold);
    text-indent: 0%;
    padding: 0 10px;
    text-decoration: none;
    border-radius: 25px;
    display: flex;
    align-items: center;
}

.uk-dotnav.uk-dotnav-vertical a:focus span,
.uk-dotnav.uk-dotnav-vertical a:hover span {
    width: auto;
}

/***********************
**   Call to action   **
************************/

.call-to-action {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 500;
    background-color: var(--green);
    color: var(--white);
    padding: 10px;
    transition: .2s ease-in-out;
    display: flex;
    align-items: center;
    cursor: pointer;
    
}

.call-to-action p {
    overflow: hidden;
    display: inline-block;
    width: 0;
    height: 0;
    opacity: 0;
    transition: .5s ease-in-out;
    max-width: 0;
    margin:0;
    font-size: 1.5rem;
    text-transform: uppercase;
    line-height:0.1;
    
}

.call-to-action:hover p {
    opacity: 1;
    width: auto;
    /* height: auto; */
    max-width: 500px;
    margin-left: 20px;
    overflow: visible;
    
}

/***********************
**      General       **
************************/

.page-wrapper {
    padding: 100px 0;
    position: relative;
}

hr.main-divider {
    border: var(--gold) 2px solid;
    position: relative;
}

hr.main-divider::after {
    content: "***";
    position: absolute;
    top: -47px;
    text-align: center;
    font-size: 80px;
    color: var(--gold);
    width: 120px;
    left: calc(50% - 60px);
    background-color: var(--white);
}

.hidden {
    display: none;
}

.bg-block {
    background-color: var(--black-transparent);
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-left: 0;
    color: var(--gold);
}

.bg-container .bg-block {
    text-shadow: none;
}

.bg-block div {
    display: inline-block;
}

.bg-block i.fa-icon::before {
    margin: auto;
    display: block;
}

.bg-block .left {
    position: relative;
    word-wrap: break-word;

    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.bg-block .left .uk-position-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bg-block .right {
    display: inline-flex;
    align-items: center;
}

.bg-block h3 {
    color: var(--gold);
    margin: 10px 0 0 0;
    text-align: center;
}

.relative {
    position: relative;
}

.background {
    z-index: -500;
}

a i.fa-icon {
    transition: 0.2s ease-in-out;
}

a i.fa-icon:hover {
    color: var(--gold-dark);
}

/***********************
**  Date Time Picker  **
************************/
.timepicker,
.datepicker {
    cursor: pointer;
}

.picker__select--month {
    box-sizing: content-box;
    padding: 5px;
    font-size: 1rem;
}

.picker__select--year {
    box-sizing: content-box;
    padding: 5px;
    font-size: 1rem;
}

/***********************
**       Home         **
************************/

.slider {
    position: relative;
    text-align: center;
}
.slider hr {
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    border-color: var(--white);
}
.slider .gold hr {
    border-color: var(--gold);
}
.slider .black hr {
    border-color: var(--black);
}

.slider h2,
.slider h3 {
    color: var(--white);
    text-shadow: 2px 2px 15px var(--black-light-transparent);
    user-select: none;
}

.slider .gold h2,
.slider .gold h3 {
    color: var(--gold);
    text-shadow: 2px 2px 15px var(--black-light-transparent);
}
.slider .black h2,
.slider .black h3 {
    color: var(--black);
    text-shadow: 2px 2px 15px var(--white-light-transparent);
}

.slider .uk-slideshow-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/***********************
**       Times        **
************************/
/* .time-table {
    width: 100%;
} */

.time-table table {
    width: 100%;
}


.time-table table td:first-child {
    text-align: left;
}

.time-table table td {
    text-align: right;
}

.time-table table tr:nth-child(2n) {
    background-color: var(--grey-transparent);
}

.time-table table tr.active {
    background-color: var(--gold);
    color: var(--white);
}

/***********************
**       Images       **
************************/
.bg-container {
    background-position: center;
    background-size: cover;
    margin-bottom: 50px;
    color: var(--gold);
    text-shadow: 2px 2px 15px var(--white-light-transparent); 
}

.bg-container h2 {
    color: var(--gold);
}

.bg-container .inverted {
    color: var(--white);
    text-shadow: 2px 2px 15px var(--black-light-transparent);
}

.bg-container .inverted h2 { 
    color: var(--white);
}

.gallery {
    margin: 5px;
}

.gallery-wrapper img {
    height: auto;
}
.gallery-wrapper .hiddenPart {
    overflow: hidden;
    margin-top: 0;
    height: 0;
}

.gallery-wrapper .hiddenPart a{ 
    margin-top:15px;
}

/* .gallery-wrapper .hiddenPart.hidden {

} */

img.uk-logo {
    /* height: auto;
    width: auto;
    max-height: 80px;
    min-height: 0;
    max-width: unset; */
    /* max-width: 40%;
    max-height: 40%; */
    max-height: 80px;
    transition: all 300ms ease-in-out;
}

/***********************
**       Text         **
************************/

html {
    font-size: 16px;
}

* {
    font-family: "Roboto";
}

h1,
h2,
h3,
h4,
h5,
h6,
a.pdf-download {
    font-family: "Playfair Display";
    font-style: italic;
}

h1 {
    font-size: 4.5rem;
}

h2 {
    font-size: 4rem;
    color: var(--grey);
}

a.pdf-download {
    font-size: 1.5rem;
    line-height: 1.4;
    color: #333;
}

a.pdf-download:hover {
    color: var(--gold);
}

/***********************
**       Slider       **
************************/

.uk-slideshow .uk-slideshow-nav.uk-dotnav a {
    height: 40px;
    min-width: 40px;
    border: solid 3px var(--gold);
    border-radius: 25px;
    color: transparent;
    transition-property: background-color, width, padding;
    transition: .2s ease-in-out;
}

.uk-slideshow .uk-slideshow-nav.uk-dotnav .uk-active a {
    background-color: var(--gold);
}


/***********************
**        Menus       **
************************/

.menu-wrapper {
    cursor: pointer;
}
.menu-wrapper i {
    background-color: var(--gold);
    color: var(--white);
    padding: 15px;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    text-align: center;
}

.pdf-download i.uk-icon-button.uk-margin-small-right {
    background-color: var(--gold);
    height: 40px;
    width: 40px;
}


i.uk-icon-button.uk-margin-small-right {
    background-size: 70%;
    background-repeat: no-repeat;
    height: 60px;
    width: 60px;
    background-position: center;
}

i.uk-icon-button.uk-margin-small-right.takeaway {
    background-size: 55%;
}


.uk-modal-container a.uk-modal-close {
    color: var(--white);
    background: var(--black-transparent);
    padding: 5px;
}

.menu-wrapper h3,
a.pdf-download {
    display: inline;
    /* margin-left: 20px; */
}

/***********************
**       Forms        **
************************/

.reserve-form .form-group {
    width: 49%;
    display: inline-block;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.reserve-form #yform-registration-table.form-group  {
    width: 100%;
}
.reserve-form .submit-button {
    margin-top: 15px;
}

.reserve-form .form-group label {
    display: block;
    color: var(--gold);
}



.reserve-form .registration_form .form-group:nth-child(2n) {
    margin-left: 0;
}
.reserve-form .registration_form .additional-person .form-group:nth-child(2n-1),
.reserve-form .registration_form .personal-info .form-group:nth-child(2n){
    margin-left: 1.5%;
}

.reserve-form #yform-mainReservation-message.form-group {
    width: 99%;
}
.reserve-form #yform-modalReservation-message.form-group {
    width: 99%;
}

.reserve-form textarea {
    width: 100%;
    border: var(--gold) 2px solid;
}

.reserve-form .uk-input {
    border: var(--gold) 2px solid;
}

.toggle-additional-person {
    margin-top: 15px;
}

.registration_form .submit-button {
    float: right;
}

#mainReservationSuccess {
    padding: 150px 0;
}

.form-group.has-error label {
    color: var(--error);
}

.form-group.has-error input{
    border-color: var(--error);
}

form .alert.alert-danger ul{
    color: var(--error);
    list-style: none;

}

#reservationModal .uk-modal-body.uk-container-small{
    max-width: 900px !important;
}

.people-count {
    width: 49%;
    display: inline-block;
    margin-left: 1.5%;
    margin-bottom: 15px;
}
.people-count .form-group {
    width: 48%;
}

/***********************
**      Buttons       **
************************/

.uk-button.uk-button-primary {
    background-color: var(--gold);
    color: var(--white);
}

/***********************
**      Footer        **
************************/

.footer {
    background-color: var(--black);
    border-top: solid var(--gold) 40px;
    color: var(--gold);
}

.footer p {
    margin: 0;
}

.footer a {
    display: block;
    color: var(--gold);
}

.footer .link-block {
    margin: 25px 0;
}

.footer a.uk-icon-button {
    display: flex;
    color: var(--gold);
    width: 70px;
    height: 70px;
}

.footer h4 {
    color: var(--gold);
    margin-bottom: 0;
}

.footer .uk-logo-footer {
    height: 300px;
}

figure.image-style-align-center {
	margin: auto;
}


/*******************************
**      responsives Zeug        **
********************************/

.hide-desktop {
    display: none;
}

#burger-menu {
    /* display: none; */
    cursor: pointer;
}

#burger-menu-m {
    display: none;
    cursor: pointer;
}




/* von mobil bis tablet */
@media screen and (max-width: 1200px) {

    .hide-desktop {
        display: initial;
    }

    .hide-mobil {
        display: none;
    }

    h2 {
        font-size: 1.5rem;
    }

.call-to-action {
    bottom: 15px;
    right: 15px;
left: 15px;
text-align: center;
}
.call-to-action p {
    opacity: 1;
    height: auto;
    width: auto;
    margin-left: auto !important;
    margin-right: auto;
}

.fa-4x.fa-icon,
.fa-bars {
    font-size: 2.5em;
    line-height: unset;
}

/* header nav */

/* .uk-navbar-container:not(.uk-navbar-transparent) {
    background: none;
} */

.uk-slideshow-items {
    margin-top: 80px;
    min-height: 270px !important;
}

.uk-navbar-container {
    padding: 0;
    top: 0;
    left: 0;
}

.uk-navbar-container .uk-navbar-item {
    padding: 15px;
}

/* ui-kit (und css) Regeln überschreiben, start: */
#reservationModal .uk-modal-body.uk-container-small{
    max-width: 90vw !important;
}

.header .uk-position-center-right {
    right: 0;
}

.uk-navbar-container:not(.uk-navbar-transparent),
.uk-navbar-left {
    background: rgb(255, 255, 255);
}
/* ui-kit Regeln überschreiben, ende */


#burger-menu-m {
    display: initial;
}

.uk-navbar-container {
    position: fixed;
}


.uk-offcanvas-bar {
    background: var(--gold);
}

a.uk-offcanvas-close {
    position: static;
    padding: 0;
}

/* buttons, burger-menu, hover */

.call-to-action .fa-4x {
    font-size: inherit;
}

.call-to-action p,
.call-to-action i {
    opacity: 1;
    height: auto;
    width: auto;
    max-width: 500px;
    margin-left: 20px;
    font-size: inherit;
    overflow: visible;

}

.uk-dotnav.uk-dotnav-vertical a {
    width: auto;
    /* fallback 4 old browser */
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    color: var(--white);
    background-color: var(--gold);
    text-indent: 0%;
    padding: 0 10px;
    text-decoration: none;
    border-radius: 25px;
    display: flex;
    align-items: center;
}

.uk-dotnav.uk-dotnav-vertical a span {
    width: auto;
}


/* reservierungen (yform) */

.reserve-form .form-group {
    width: 100%;   
}

.reserve-form .form-group:nth-child(2n) {
    margin-left: 0;
}

.footer .uk-logo-footer {
    height: auto;
}

.people-count {
    width: 100%;
    margin-left: 0;
}
.people-count .form-group {
    width: 100%;
}

}

@media screen and (max-width: 1800px) {
    img.background {
        opacity: 0.2;
    }
}