/* peelgemeenten.css */

:root {
    /* defaults */
    --default-color: #5CADC7;
    --default-font-family: "Segoe UI", Arial, Arial, Helvetica, sans-serif, sans-serif;
    /* font */
    --text-color: #000000;
    --text-size: 1rem; /* 16px */
    --text-font-weight: normal;
    --line-height: normal;
    /* h1 */
    --h1-color: #1572B8;
    --h1-text-size: 2rem; /* 32px */
    --h1-font-weight: 600;
    /* h2 */
    --h2-color: #1572B8;
    --h2-text-size: 1.625rem; /*26px*/
    --h2-font-weight: 600;
    /* h3 */
    --h3-color: #1572B8;
    --h3-text-size: 1.375rem; /*22px*/
    --h3-font-weight: 600;
    /* h4 */
    --h4-color: #1572B8;
    --h4-text-size: 1.25rem; /*20px*/
    --h4-font-weight: 600;
    /* h5 */
    --h5-color: #1572B8;
    --h5-text-size: 1.125rem; /*18px*/
    --h5-font-weight: 600;
    /* link */
    --link-color: #1572B8;
    --link-hover-color: #1572B8;
    --link-font-weight: 600;
    /* button */
    --button-text-color: #FFF;
    --button-text-size: 1rem; /* 16px */
    --button-font-weight: 600;
    --button-height: 2rem; /* 32px */
    --button-padding: 4px 10px;
    --button-border-radius: 0px;
    --button-background-color: #1572B8;
    --button-hover-text-color: #FFF;
    --button-hover-background-color: #1572B8;
    /* logo */
    --logo-width: 525px;
    --logo-margin: 5px 0;
    /* menu */
    --menu-text-color: #FFF;
    --menu-background-color: var(--default-color);
    /* footer */
    --footer-text-color: #FFF;
    --footer-icon-color: #FFF;
    --footer-background-color: var(--default-color);
}


body .znButtonWrapper .znButton:focus-visible,
body .znButtonWrapper .znButton:hover,
body .znButtonWrapper .znButton:active,
body .znFileUpload input::file-selector-button:focus-visible,
body .znFileUpload input::file-selector-button:hover,
body .znFileUpload input::file-selector-button:active,
body .znFileUpload input::file-selector-button:focus {
    opacity: .9;
}


body .container .header .headerinner {
    flex-direction: column;
}

    body .container .header .headerinner .logo a img {
        max-height: none;
        max-width: var(--logo-width);
    }

    body .container .header .headerinner .logo a:after {
        display: inline-block;
        width: 425px;
        height: 134px;
        content: "";
        background-image: url(../images/logo-peel-2.png);
        background-repeat: no-repeat;
        background-size: 425px;
    }

@media (max-width: 500px) {
    body .container .header .headerinner .logo a img {
        max-width: 100%;
    }
}

/* peelgemeenten.css */