:root {
    --font-lato: "Lato", sans-serif;
    --font-monster: "Montserrat", sans-serif;

    --h1: bold 2rem/1.6em var(--font-monster);
    --h2: bold 1.5rem/1.6em var(--font-monster);
    
    --p: 1rem/1.6em var(--font-lato);
    --p2: .875rem/1.6em var(--font-lato);

    --gray100: hsl(0, 0%, 100%);
    --gray70: hsl(0, 0%, 70%);
    --gray10: hsl(0, 0%, 10%);
    --gray0: hsl(0, 0%, 0%);

    --border-radius: .25rem;
    --border-radius-xl: 2rem;

    --wrapper-small: 1024px;
}

/* TEMP */
#wpadminbar {z-index: 999999;}

.wrapper.wrapper-sm {width: var(--wrapper-small); max-width: 100%;}

body {color: var(--gray10);}
h1, h2, h3, h4 {color: var(--gray10);}

h1, .h1 {font: var(--h1);}
h2, .h2 {font: var(--h2);}
p, .p {font: var(--p);}
.p2 {font: var(--p2);}
.breadcrumb a:visited, .breadcrumb a:active {color: var(--primary-color);}

.site-content a:not(.btn) {
    color: var(--primary-color);
}

.gray100 {color: var(--gray100);}
.gray70 {color: var(--gray70);}
.gray10 {color: var(--gray10);}
.gray0 {color: var(--gray0);}

/* Elements */
.fw-bold{font-weight: bold;}
.p-xxl {padding: 3rem 4rem;}
.day {display: inline-block; width: 90px;}
.shadow {box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.overflow-y-clip {overflow-y: clip;}
.fw-300 {font-weight: 300;}

.text-right {text-align: right;}

.btn {
    font: var(--p);
    color: var(--extra-color);
    background-color: var(--secondary-color);
    padding: 1rem 2rem;
    transition: .3s;
    border-radius: var(--border-radius-xl);
    display: inline-block;
    border: 1px solid var(--secondary-color);
}
.btn:hover {
    background-color: var(--primary-color);
    transition: .3s;
    cursor: pointer;
    border-color: var(--primary-color);
    color: var(--gray100);
}

#reservation-form-container .btn {
    font: var(--p);
    border: 0;
}
.frontend-reservation-form {
    padding: 3em 10em;
}
.frontend-reservation-form .form-receive-events-mail label {
    font-size: var(--p2);
}


.reservation-img-container {
    position: relative;
    flex: 1;
    display: flex;
}
.reservation-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reservation-img-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(246,243,240,.8);
    pointer-events: none;
}





.center-block {
    margin: 0 auto;
    display: block;
    float: none !important;
}

/* Menu */
nav.main-menu ul {
    float: right;
}
nav.main-menu ul li {
    position: relative;
}
nav.main-menu ul li:last-child {
    padding-right: 0;
}

nav.main-menu ul li.has-children ul.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 1em;
    width: 200px;
    background-color: var(--secondary-color);
    z-index: 999;
}

nav.main-menu ul li.has-children:hover > ul.submenu {
    display: block;
}

nav.main-menu ul li.has-children ul.submenu a {
    color: var(--extra-color);
    display: block;
    padding: 0.5em;
    text-decoration: none;
}

#display-notification .header-aanutwater:not(.fixed) {
    top: 80px;
}

.header-aanutwater {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99999;
    background-color: transparent;
}
.header-aanutwater:not(.fixed) li a,
.header-aanutwater:not(.fixed) .top-header i,
.header-aanutwater:not(.fixed) .top-header a {
    color: var(--gray100);
}

.header-aanutwater.fixed {
    background-color: var(--header-bg-color);
}


/* Homepage */
.header-img { 
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
/* Copper overlay */
.header-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(255, 255, 255, 0.15);*/
    z-index: 1;
}
.header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    /*filter: brightness(.6);*/
}
.header-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    max-width: 40%;
}
.header-content p {
    font-size: 1.4rem;
    font-weight: 300;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.header-content h1 {
    font-weight: 600;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    color: var(--gray100);
}

.gap-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.gap-col-4,
.gap-col-6 {
    flex: 1;
    padding: 20px;
}
.gap-col-4 {
    max-width: 33.333%;
}
.gap-col-6 {
    max-width: 50%;
}
.gap-col-4 .btn,
.gap-col-6 .btn {
    margin: 0 auto;
}
.flex-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.flex-col-9 {flex: 0 0 75%;}
.flex-col-8 {flex: 0 0 66.666%;}
.flex-col-7 {flex: 0 0 58.333%;}
.flex-col-5 {flex: 0 0 41.667%;}
.flex-col-4 {flex: 0 0 33.333%;}
.flex-col-3 {flex: 0 0 25%;}

.flex-equal-height-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rental-bg-img {
    background-size: cover;
    background-position: center;
    position: relative;
    display: block;
    color: var(--extra-color);
}
.rental-bg-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 1;
}
.rental-bg-img .wrapper {
    position: relative;
    z-index: 2;
}
.col-10.center-block.p-md.center-text {
    position: relative;
    z-index: 2;
    color: black;
}

/* Sidebar */
aside .h3 {
    padding-bottom: .5rem;
    color: var(--primary-color);
    font-weight: 600;
}
aside .widget {
    margin-bottom: 1em;
}

/* Footer */
footer {
    color: var(--gray10);
}
footer p, footer li {
    font: var(--p2);
}
footer a {
    color: var(--extra-color);
}
footer .contact i {
    display: inline-block;
    width: 20px;
}

.style-1 select,
.style-1 textarea,
.style-1 input:not([type="submit"]) {
    border: 1px solid var(--tertiary-color);
}


.img-block {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 12em 2em 8em 2em;
    color: white;
    position: relative;
}

.img-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(51,51,51,.5);
    z-index: 1;
}

.img-block-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.overlapping-img-block {
    margin-top: -4em;
    z-index: 3;
}

.hall-images,
.event-images {
    display: flex;
    flex-wrap: wrap;
}
.hall-images .col-3,
.event-images .col-3,
.hall-images .col-md-6,
.event-images .col-md-6 {
    display: flex;
    align-items: stretch;
}
.hall-images .image,
.event-images .image {
    display: flex;
    width: 100%;
}
.hall-images img,
.event-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Contact form */
.wpcf7 textarea, .wpcf7 input:not([type="submit"]) {
    border: 1px solid var(--tertiary-color);
    padding: .75rem;
    border-radius: .5rem;
    width: 100%;
    position: relative;
}
.wpcf7 textarea {
    height: 100px;
}


.menu-row {
    display: flex;
    gap: 1.5rem;
}
.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.menu-block {
    position: relative;
}
.menu-content {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 4rem 2rem;
}




.footer-image-row {
    display: flex;
    margin: 1rem 0 0 0;
    flex-wrap: wrap;
}

.image-col {
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
}
.image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.footer-image-row.count-2 .image-col {
    width: calc(100% / 2 - 0.50rem);
    flex: 0 0 50%;
}
.footer-image-row.count-3 .image-col {
    width: calc(100% / 3 - 0.67rem);
    flex: 0 0 33.33%;
}
.footer-image-row.count-4 .image-col {
    width: calc(100% / 4 - 0.75rem);
    flex: 0 0 25%;
}

.admin-notification {
    display: block;
}

.display-mobile {
    display: none;
}


/* Responsive */
@media screen and (max-width: 820px) {
    .header-aanutwater {
        overflow: initial !important;
        min-height: 90px;
    }
    .header-content {
        position: relative;
        max-width: 100%;
    }
    .mobile-block {
        display: block;
    }
    .header-aanutwater.fixed .top-xl {
        top: .25em;
    }
    .header-aanutwater:not(.fixed) .logo {
        margin-top: 1em;
    }

    .header-aanutwater:not(.fixed) li a,
    .header-aanutwater:not(.fixed) .top-header i,
    .header-aanutwater:not(.fixed) .top-header a {
        color: var(--gray10);
    }
	.header-aanutwater:not(.fixed) .top-header i,
	.header-aanutwater:not(.fixed) .top-header a {
		color: var(--gray100);
	}

    .header-aanutwater.fixed .menu-icon-color {
        color: var(--extra-color);
    }
    .header-aanutwater:not(.fixed) .menu-icon-color {
        color: var(--gray100);
    }

    .header-aanutwater .main-menu.mobile-menu ul {
        position: absolute;
        left: 0;
        top: 130px;
        background-color: var(--tertiary-color);
        min-width: 100vw;
        min-height: auto;
        z-index: 99999;
    }
    .header-aanutwater.fixed .main-menu.mobile-menu ul {
        top: 90px;
    }

    .main-menu.mobile-menu ul li {
        display: block;
        float: none !important;
        padding: .5em;
        text-align: center;
    }

    .flex-col-9,
    .flex-col-8,
    .flex-col-7,
    .flex-col-5,
    .flex-col-4,
    .flex-col-3 {
        flex: 0 0 100%;
    }

    .order-mobile-first {
        order: -1;
    }

    .frontend-reservation-form {
        padding: 3em;
    }

    .gap-row {
        flex-direction: column;
    }
    .gap-col-4,
    .gap-col-6 {
        max-width: 100%;
    }

    .menu-row {
        flex-direction: column;
    }
    .menu-row .col-4 {
        flex: 0 0 100%;
    }

    .open-submenu {
        position: absolute;
        right: 1em;
        top: 1.25em;
    }
    nav.main-menu ul li.has-children ul.submenu {
        position: relative;
        left: 0;
        min-height: auto;
        margin: 1em 0;
    }
}

@media (max-width: 600px) {
    .footer-block-1 {
        display: none;
    }
    .display-mobile {
        display: block;
    }
    .hide-mobile {
        display: none;
    }

    .footer-image-row.count-4 .image-col {
        flex: 0 0 50%;
    }
    .footer-image-row.count-3 .image-col {
        flex: 0 0 100%;
    }
}