/*
Theme Name: clean template
Theme URI: https://mediamindz.nl
Author: MediaMindz
Author URI: https://mediamindz.nl
Description: Maatwerk design en template
Version: 2.1
Text Domain: mediamindz.nl
*/

@import url("https://use.typekit.net/syu8vdg.css");

/* Basis
======================================== */

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    background-color: #105566;
    color: #fff;
    font-family: "mr-eaves-xl-sans-narrow", sans-serif;
    font-style: normal;
    font-weight: 400;
}

img {
    max-width: 100%;
}

a {
    color: #c8b28e;
}

strong,
b {
    font-weight: 700;
}

/* Scrollbalk visueel verbergen */
#container {
    scrollbar-width: none;
}

#container::-webkit-scrollbar {
    display: none;
}

/* Horizontale homepage
======================================== */

#container {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100vw;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #105566;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.page {
    position: relative;
    flex: 0 0 auto;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.galerij,
.subitems {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    width: max-content;
    height: 100vh;
}

.page-galerij {
    flex: 0 0 auto;
}

/* Header en menu
======================================== */

.logo-klein {
    position: fixed;
    top: 25px;
    left: 25px;
    width: 100px;
    z-index: 10;
}

.logo-klein img {
    display: block;
    width: 100%;
    height: auto;
}

.menu,
.return {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 12;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.menu-container {
    position: fixed;
    top: 0;
    right: 0;
    display: none;
    width: 400px;
    height: 100vh;
    margin-right: -200px;
    background-color: #105566;
    z-index: 11;
}

.menu-container ul {
    position: absolute;
    top: 50%;
    left: 0;
    width: 200px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    letter-spacing: 2px;
    list-style: none;
}

.menu-container a {
    display: block;
    width: 100%;
    color: #fff;
    font-size: 25px;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
}

/* Groot logo op de homepagina
======================================== */

.logo {
    position: absolute;
    top: 50%;
    right: 10%;
    z-index: 2;
    transform: translateY(-50%);
    text-align: center;
}

.logo > span {
    display: block;
    width: 100%;
    padding-right: 15px;
    color: #fff;
    font-family: "austin-pen", cursive;
    font-size: 50px;
    text-align: center;
}

.logo > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.date {
    width: 100%;
    margin-top: 25px;
    color: #c8b28e;
    font-size: 20px;
    line-height: 25px;
    text-align: center;
}

.date a {
    color: inherit;
    text-decoration: none;
}

/* Pagina-inhoud
======================================== */

.content {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 18px;
}

.text {
    position: absolute;
    top: 50%;
    left: 0;
    max-width: 100%;
    padding: 50px;
    transform: translateY(-50%);
    letter-spacing: 2px;
}

.text img {
    width: 100%;
    height: auto;
}

.text h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-family: "austin-pen", cursive;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 0;
    text-transform: lowercase;
}

.text ul {
    margin: 0;
    padding: 0;
}

.text li {
    font-size: 30px;
    line-height: 70px;
    list-style: none;
}

.text li::before {
    padding-right: 15px;
    font-family: "austin-pen", cursive;
    font-size: 60px;
    content: "#";
}

/* Galerij
======================================== */

.galerij {
    align-items: center;
}

.galerij > img,
.galerij > a > img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: 70vh;
    margin-top: 15vh;
    margin-right: 2.5vh;
    margin-bottom: 15vh;
    margin-left: 2.5vh;
    object-fit: contain;
}

.galerij > img:first-child,
.galerij > a:first-child > img {
    margin-left: 0;
}

.galerij > img:last-child,
.galerij > a:last-child > img {
    margin-right: 5vh;
}

.galerij > a {
    display: flex;
    flex: 0 0 auto;
    height: 100vh;
    color: inherit;
    text-decoration: none;
}

/* Tekstitems en merken
======================================== */

.subitem {
    position: relative;
    flex: 0 0 300px;
    width: 300px;
    height: 70vh;
    margin-top: 15vh;
    margin-right: 2.5vh;
    margin-bottom: 15vh;
    margin-left: 2.5vh;
    color: #fff;
    text-align: center;
}

.subitems > .subitem:first-child,
.subitems > a:first-child .subitem {
    margin-left: 0;
}

.subitems > .subitem:last-child,
.subitems > a:last-child .subitem {
    margin-right: 5vh;
}

.subitems > a {
    display: block;
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
}

.subitems > a .subitem {
    margin-top: 15vh;
}

.subitem > span {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10%;
    font-weight: 200;
    line-height: 25px;
    letter-spacing: 1px;
    text-align: left;
    overflow-y: auto;
}

.subitem span h1 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 15px;
    font-family: "austin-pen", cursive;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 0;
    text-align: center;
}

.subitem span h2 {
    margin-top: 0;
    padding-bottom: 15px;
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
}

.subitem span h3 {
    padding-bottom: 5px;
    font-size: 18px;
    font-weight: 700;
}

.subitem span img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.subitem p {
    padding-bottom: 15px;
}

.subitem .button-klein {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 25px;
    height: 25px;
}

.subitem .button-klein img {
    display: block;
    width: 100%;
    height: auto;
}

.merk-logo,
.merk-samenvatting {
    float: left;
    width: 90%;
    height: 15%;
    margin: 5%;
}

.merk-logo {
    position: relative;
    text-align: center;
}

.merk-logo img {
    position: relative;
    top: 50%;
    display: inline-block;
    width: 80%;
    height: auto;
    transform: translateY(-50%);
}

.merk-samenvatting {
    width: 80%;
    margin-right: 10%;
    margin-left: 10%;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 2px;
}

.merk-afbeelding {
    float: left;
    width: 90%;
    height: 60%;
    margin: 0 5%;
}

/* Reserveringsblok in de galerij
======================================== */

.reserveer-blok-wit {
    display: flex;
    flex: 0 0 200px;
    flex-direction: column;
    justify-content: space-between;
    width: 200px;
    height: 70vh;
    margin-top: 15vh;
    margin-right: 2.5vh;
    margin-bottom: 15vh;
    margin-left: -0.5vh;
    background-color: #fff;
    color: #333;
    overflow-y: auto;
}

.reserveer-blok-wit .reserveer-inhoud {
    display: block;
    padding: 25px;
}

.reserveer-blok-wit .reserveer-item {
    display: block;
    margin-bottom: 15px;
}

.reserveer-blok-wit .reserveer-naam,
.reserveer-blok-wit .reserveer-prijs,
.reserveer-blok-wit .reserveer-artikelnummer {
    display: block;
}

.reserveer-blok-wit .reserveer-naam {
    color: #005566;
    font-weight: 700;
}

.reserveer-blok-wit .reserveer-prijs {
    color: #333;
}

.reserveer-blok-wit .reserveer-artikelnummer {
    color: #999;
    font-size: 12px;
}

.reserveer-blok-wit .reserveer-acties {
    display: block;
    padding: 0 15px 25px;
    text-align: center;
}

.reserveer-blok-wit .reserveer-knop {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 2px;
    background-color: #145f6d;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    transition: background-color 0.3s ease;
}

.reserveer-blok-wit .reserveer-knop:hover {
    background-color: #0f4e59;
}

.reserveer-blok-wit .reserveer-telefoon {
    display: block;
    margin-top: 15px;
    color: #145f6d;
    font-size: 16px;
    font-weight: 500;
}

/* Footer
======================================== */

footer {
    position: fixed;
    right: 0;
    bottom: 15px;
    left: 0;
    z-index: 9;
    width: 100%;
    color: #ede3d3;
    letter-spacing: 2px;
    text-align: center;
    pointer-events: none;
}

footer a {
    pointer-events: auto;
}

/* Achtergrond voor overige pagina's
======================================== */

.fixed-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background:
        url("/wp-content/uploads/2018/08/Evelien-contact-foto.jpg")
        no-repeat center center;
    background-size: cover;
    z-index: -1;
}

/* Gravity Forms
======================================== */

#gform_submit_button_3,
#gform_submit_button_4 {
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background-color: #105566;
    color: #fff;
    cursor: pointer;
}

.gfield_required {
    display: none;
}

/* Tablet en mobiel
======================================== */

@media (max-width: 960px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #container {
        display: block;
        width: 100%;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .page {
        width: 100vw !important;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .page .content {
        height: auto;
        min-height: 100vh;
        padding-top: 50px;
    }

    .text {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        padding: 50px;
        transform: none;
    }

    .text h1 {
        width: 100%;
        padding-top: 40px;
        text-align: center;
    }

    .text ul {
        margin-left: -15px;
    }

    .text li {
        font-size: 25px;
        line-height: 40px;
    }

    .text li::before {
        padding-right: 15px;
        font-size: 30px;
    }

    .logo {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        float: none;
        width: 80%;
        margin: 0 10%;
        padding-top: 20%;
        padding-bottom: 20%;
        transform: none;
    }

    .logo > img {
        width: 100%;
    }

    .galerij,
    .subitems {
        display: block;
        width: 100%;
        height: auto;
    }

    .galerij > a,
    .subitems > a {
        display: block;
        width: 100%;
        height: auto;
    }

    .galerij > img,
    .galerij > a > img {
        display: block;
        width: 98%;
        max-width: 98%;
        height: auto;
        margin: 1%;
    }

    .subitem,
    .subitems > a .subitem {
        display: block;
        float: none;
        width: 98%;
        height: auto;
        min-height: 70vh;
        margin: 1%;
    }

    .subitem > span {
        height: auto;
        min-height: 70vh;
        overflow: visible;
    }

    .reserveer-blok-wit {
        display: flex;
        width: 98%;
        height: auto;
        min-height: 0;
        margin: 1%;
        overflow: visible;
    }

    .menu-container {
        width: 100%;
        margin-right: 0;
    }

    .menu-container ul {
        left: 0;
        width: 100%;
    }

    footer {
        position: relative;
        bottom: auto;
        padding: 20px;
        background-color: #105566;
    }
}

@media (max-width: 600px) {
    .logo-klein {
        top: 15px;
        left: 15px;
        width: 85px;
    }

    .menu,
    .return {
        top: 18px;
        right: 15px;
    }

    .text {
        padding: 35px 25px;
    }

    .text h1 {
        font-size: 42px;
        line-height: 44px;
    }

    .logo > span {
        padding-right: 0;
        font-size: 42px;
    }

    .date {
        font-size: 18px;
    }
}