:root {
    --main-color: #007cba;
    --main-color-light: #42c3dd;
    --secondary-color: #006ba1;
    --secondary-color-darker: #005a87;
    --background-white: #f1f1f1;

    --form-color-background-input: #e3e3e3;
    --form-color-background-input-light: #f1f1f1;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    color: #333;

}

ul li {
    padding: 0;
    margin: 0;
}

/* Larger than phablet */
@media (min-width: 550px) {

    .back01 {

        /*background-image: url('/theme/logopedie/images/background01.jpg');*/
        background: var(--background-white);
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position: relative;
    }
}

.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.sticky-container {
    height: 100%;
    position: relative;
    /*overflow: hidden;*/

}

.header > .branding {
    background-color: var(--background-white);
    /*background: #ff0000;*/
    height: 70px;
    /*line-height: 70px;*/

}


.header > .branding > .identity {
    background-image: url('/theme/logopedie/images/logopedie_50px.png');
    background-repeat: no-repeat;
    background-position: 0 10px;
    padding-left: 60px;

    padding-top:10px;

}

.header > .navigation {
    /*background: #00ff00;*/
    background-color: var(--main-color);
    color: var(--background-white);
    font-size: 16px;
    min-height: 45px;
    line-height: 45px;
}

.header {
    width: 100%;
    position: fixed;
    z-index: 8000;

    backface-visibility: hidden;
    left: 0;
    /*min-width: 710px;*/
    top: 0;
}

.header .navigation .menu {
    display: none;
}

.footer {
    /*background: url('/theme/logopedie/images/footer-gradient.png') top left repeat-x;*/
    /*background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%);*/
    /*background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%);*/
    /*background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%);*/
    /*background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%);*/
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%);*/
    background: var(--secondary-color-darker);

    color: var(--background-white);
    width: 100%;
    position: relative;
    bottom: 0;
    /*height: 250px;*/
    padding-top: 10px;

    /*text-shadow: 1px 1px #333;*/
}

.footer h5 {
    /*text-shadow: 1px 1px #333;*/

}

.footer a {
    color: inherit;
}

.footer p {
    margin: 0;
}

.footer li {
    list-style: none;
}

.nav ul {
    list-style: none;
    margin: 0;
}

.nav li {

    border-bottom: none;
    display: inline-block;
    margin: 0;
}

.nav > li {
    padding-right: 15px;
}

.nav a {
    border-bottom: none;
    text-decoration: none;
    color: inherit;
}

.nav a:hover {
    text-decoration: underline;
}

.nav > ul > li {
    text-align: center;
}

.nav > ul > li > a {
    padding-left: 0;
}

ul.nav {
    margin: 0;
}

/* Sub Menus */
.nav li ul {
    position: absolute;
    display: none;
    width: inherit;
    background-color: var(--secondary-color-darker);
    padding: 0;

}

.nav li ul li:hover {
    background-color: var(--secondary-color);
}

.nav li:hover ul {
    display: block;
}

.nav li ul li {
    display: block;
    margin: 0;
}

.nav li ul li a {
    padding: 0 20px;
    line-height: 45px;
    display: block;
}

.container.content {
    padding-top: 150px;
    /* Firefox */
    min-height: -moz-calc(100% - 210px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
    /* WebKit */
    min-height: -webkit-calc(100% - 210px);
    /* Opera */
    min-height: -o-calc(100% - 210px);
    /* Standard */
    min-height: calc(100% - 210px);

}

.header .identity .button-aanmelden {
}

.header .navigation .button-aanmelden {

    display: none;

    background-color: var(--secondary-color-darker);
    border-color: var(--secondary-color-darker);

}

a {
    color: #175F76;
}

h1 {

}

h2 {
    font-size: 3.2rem;
    color: var(--secondary-color-darker);
}

h3 {
    font-size: 2.2rem;
    margin-bottom: 4px;
    color: var(--secondary-color);
    /*font-style: italic;*/
}

.footer img.gzc-logo-grayscale {
    width: 80%;
}

.anchor {
    display: block;
    height: 115px; /*same height as header*/
    margin-top: -115px; /*same height as header*/
    visibility: hidden;
}

.button-aanmelden {
    color: var(--background-white);
    background-color: var(--main-color);
    font-size: 16px;
    border-radius: 4px;
    border: none;
    /*border-color: var(--main-color);*/
}

.button-aanmelden:hover {
    color: var(--background-white);
    background-color: var(--secondary-color-darker);
    /*border-color: var(--main-color);*/
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
    color: var(--form-color-background-input);
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover {
    color: var(--form-color-background-input);
    background-color: var(--main-color-light);
    border-color: var(--main-color-light);
}

.grid-form input[type="text"], 
.grid-form input[type="email"], 
.grid-form input[type="tel"],
.grid-form input[type="date"], 
.grid-form textarea {
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid var(--secondary-color-darker);
    background: var(--form-color-background-input);
    padding: 0 10px;
}

.grid-form input[type="text"]:focus, 
.grid-form input[type="email"]:focus, 
.grid-form input[type="tel"]:focus, 
.grid-form input[type="date"]:focus, 
.grid-form textarea:focus {
    border-bottom: 2px solid var(--main-color);
    background: var(--form-color-background-input);
}

.grid-form textarea {
     border: 0;
     background: var(--form-color-background-input);
     padding: 10px;
     height: 200px;
 }

.grid-form textarea:focus {
    background: var(--form-color-background-input);
    border-bottom: 2px solid var(--main-color);
}

.grid-form label {
    margin: 0;
}

.grid-form label input[type="checkbox"],
.grid-form label input[type="radio"] {

    margin-right: 10px;
}

.grid-form input.captcha {
    width: 200px;
    /*position: absolute;*/
    /*margin-left: 10px;*/
}

/*.grid-form .required input {*/
/*    background-color: var(--secondary-color);*/
/*}*/

.grid-form .error input {
    background-color: #F9B09E;
}

.grid-form [data-row-span],
.grid-form [data-row-span] [data-field-span] {
    border: 0;
}

.grid-form input[type="submit"].button-primary {
    border-radius: 4px;
    border: none;
}

.required label:not(.label-radio)::after {
    content: "* (Verplicht Veld)";
    color: #BC0000;
}

.page-aanmelden .button-aanmelden {
    display: none !important;
}

@media screen and (max-width: 800px) {
    img, iframe {
        max-width: 90%;
    }
}

@media screen and (max-width: 550px) {
    body {
        /*background-color: lightblue;*/
    }

    .header > .branding > .identity {
        margin-left: 10px;

    }

    ul.nav ul {
        display: none;
    }

    .nav li:hover ul {
        display: none;
    }

    .nav li {
        display: block;
        padding: 0;
        margin: 0;
    }

    .nav > li > a {
        line-height: 45px;
        display: block;
        padding: 0 10px;
    }

    .nav > li > a:hover {
        /*background-color: #fafcc0;*/
    }

    .navigation .container {
        padding: 0;
        width: 100%;
    }

    /*Default hide*/
    .navigation ul.nav {
        display: none;
    }

    .header .navigation .menu {
        background-image: url('/theme/logopedie/images/menu.svg');
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 25px;
        padding-left: 45px;
        display: block;
    }

    ul.nav {
        position: absolute;
        top: 45px;

        background-color: var(--secondary-color-darker);
        padding: 0;
        width: 100%;
    }

    .footer {
        display: none;
    }

    .header .identity .button-aanmelden {
        display: none;
    }

    .header .navigation .button-aanmelden {
        display: block;
        margin: 0;
        margin-top: 3px;
        margin-right: 3px;
    }

    .grid-form input[type="text"], 
	.grid-form input[type="email"], 
	.grid-form input[type="tel"],
	.grid-form input[type="date"], 
	.grid-form textarea {

        border: solid #333 1px;
    }
	
	.grid-form input[type="submit"], #captcha {
        width: 100%;
        float: none;
    }
}

.profile {
    width: 300px;
    float: right;
    margin-left: 10px;
    border-radius: 50%;
}

/* Larger than mobile */
@media (max-width: 400px) {}

/* Larger than tablet */
@media (max-width: 750px) {
    .profile {
        width: 200px;
    }
	
	.grid-form input[type="submit"], #captcha {
        width: 100%;
        float: none;
    }
}

@media (max-width: 550px) {
    .profile {
        max-width: unset;
        width: 100%;
        margin: 0 10px;
        float: unset;
    }
}