body {
    font-family: arial, 'Helvetica Neue LT Std', sans-serif;
    font-size: 12pt;
}

h2 {
    color: #427d30;
    font-size: 16pt;
    font-weight: normal;
}

h3 {
    color: #427d30;
    font-size: 16pt;
    font-weight: normal;
    opacity: 0.6;
}

.contentWrapper {
    width: 300px;
    margin: auto;
}

.logo {
    width: 100%;
    text-align: center;
}

nav {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: white;
    text-align: center;
    display: none;
}

    nav li {
        float: left;
        width: 100%;
    }

        nav li a {
            padding: 10px 0px;
            display: block;
            border-bottom: 1px dotted #ddd;
        }

.header {
    border-bottom: 1px solid #cacaca;
}

.bolWrapper {
    width: 100%;
    margin-top: 25px;
}

    .bolWrapper img {
        filter: gray;
        -webkit-filter: grayscale(100%);
        width: 100%;
    }

.bol {
    position: relative;
    width: 30%;
    float: left;
    margin-right: 10px;
}

.bolOverlay {
    background-image: url(../img/bolOverlay.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    min-height: 175px;
    position: absolute;
    z-index: 11;
    top: 0;
    pointer-events: none;
}

.begeleidendeText {
    font-family: arial, 'Helvetica Neue LT Std', sans-serif;
    font-size: 11pt;
    line-height: 20pt;
    color: #a7a7a7;
}

.nameBol {
    margin-top: 12px;
}

.functionBol {
    opacity: 0.5;
}

.homeText {
    text-align: center;
    padding: 10px;
}

footer {
    background: #f6f5f5;
    border-top: 2px #eae7e7 solid;
}

.niewsWrapper {
    padding: 25px 0px;
}

.nieuwsBlok {
    padding: 2%;
}

.nieuwsBlok p
{
    font-family: arial, 'Helvetica Neue LT Std', sans-serif;
    font-size: 11pt;
    line-height: 20pt;
}

#map {
    width: 100%;
    height: 200px;
}

.contactGegevens {
    width: 100%;
}

    .contactGegevens p {
        padding: 2%;
        font-family: arial, 'Helvetica Neue LT Std', sans-serif;
    font-size: 11pt;
    line-height: 20pt;
    }

p {
    color: #a7a7a7;
}

.profileCTA .afspraakCTA
{
    padding: 5% 3%;
}

.afspraakCTA {
    padding: 1% 3%;
    width: 94%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4cda1+1,aac4ad+100 */
    background: rgb(180,205,161); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(180,205,161,1) 1%, rgba(170,196,173,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(180,205,161,1)), color-stop(100%,rgba(170,196,173,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4cda1', endColorstr='#aac4ad',GradientType=1 ); /* IE6-9 */
    color: #3a772d;
}

    .afspraakCTA img {
        float: right;
    }

.fullWidth .ALContent {
    width: 90%;
    padding: 0px 5%;
}

.profile h2 {
    margin-top: 20px;
    font-size: 20pt;
}

.profile h2, .profileWrapper {
    text-align: center;
}

.profile .bolWrapper {
    margin-top: 0px;
}

.profile .bol {
    margin: auto;
    float: none;
    width: 45%;
}

.profile {
    margin-bottom: 50px;
}

select
{
    width: 101%;
    padding: 2%;
}

input, textarea {
    width: 96%;
    padding: 2%;
        font-size: 10pt;
}

.success {
    background-color: #6BCC7D;
    color: #14630E;
    padding: 10px 0px;
    text-align: center;
    list-style: none;
}

textarea {
    height: 100px;
}

input[type=reset] {
    display: none;
}

input[type=submit] {
    margin: auto;
    width: 50%;
    margin-top: 10px;
    background: rgb(180,205,161); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(180,205,161,1) 1%, rgba(170,196,173,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(180,205,161,1)), color-stop(100%,rgba(170,196,173,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4cda1', endColorstr='#aac4ad',GradientType=1 ); /* IE6-9 */
    color: white;
    border: none;
    opacity: 1;
        /*font-family: 'kraftstoffregular';*/
    color: #3a772d;
}

.control-group {
    margin-bottom: 15px;
}

input[type=checkbox], input[type=radio] {
    width: 30px;
}

.ALContent
{
    color: #a7a7a7;
}

.homeText
{
    font-family: arial, 'Helvetica Neue LT Std', sans-serif;
    font-size: 11pt;
    line-height: 20pt;
}

.openingsuren
{
        font-size: 10pt;
}

.openingsuren strong
{
        min-width: 80px;
    display: inline-block;
}

.openingsuren ul li
{
    list-style: none;
}

.mobileMenu
{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4cda1+1,aac4ad+100 */
    background: rgb(180,205,161); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(180,205,161,1) 1%, rgba(170,196,173,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(180,205,161,1)), color-stop(100%,rgba(170,196,173,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4cda1', endColorstr='#aac4ad',GradientType=1 ); /* IE6-9 */
    color: white;
    width: 100%;
        text-align: center;
    padding: 6px 0px;
    margin: 10px 0px;
    float: left;
}

nav {
        position: absolute;
        display: none;
        width: 100%;
        top: 0px;
        left: 0px;
        background-color: #eee;
        z-index: 9999;
    }

.agendaIframe
{
    width: 100%;
}

label
{
    cursor: pointer;
}

@media all and (min-width: 768px) {

    .mobileMenu
{
    width: 20%;
    float: right;
}

    .profileCTA .afspraakCTA
{
    padding: 5% 3%;
    width: 96%;
}

    form {
        width: 100%;
    }

    .slider {
        position: relative;
    }

        .slider .afspraakCTA {
            width: 22%;
            position: absolute;
            bottom: 0;
            margin-left: 36%;
            z-index: 100;
        }

    .profileDetail {
        width: 35%;
        float: left;
    }

    .profile hr {
        display: none;
    }

    .profile .bolWrapper {
        width: 65%;
    }

    .profile .bol {
        width: 100%;
    }

    .begeleidendeText {
        border-left: 1px solid #cacaca;
        width: 57%;
        float: right;
        padding-left: 5%;
    }

    .begeleidendeText h2
    {
        text-align: left;
    }

    .ALBolWrapper {
        width: 30%;
        border-right: 1px solid #cacaca;
        margin-top: 50px;
    }

    .ALContent {
        width: 65%;
        margin-top: 50px;
    }

    .ALBolWrapper .bolWrapper {
        width: 100%;
    }

    .contentWrapper {
        width: 740px;
        margin: auto;
    }

    .logo {
        width: 40%;
        text-align: left;
    }

    .bolWrapper {
        vertical-align: top;
        width: 32%;
        margin-top: 25px;
        margin-right: 1%;
    }

        .bolWrapper:nth-child(3n+0) {
            margin-right: 0%;
        }

    .homeText {
        padding: 40px 10px;
    }

    .nieuwsBlok {
        width: 42%;
        float: left;
    }

    .contactGegevens {
        width: 25%;
    }

    #map {
        width: 75%;
        height: 200px;
    }

    .bollenWrapper {
        text-align: center;
    }

    .ALContent .nieuwsBlok 
    {
        width: 100%;
    }
}

@media all and (min-width: 1200px) {

    .agendaIframe
{
    width: 80%;
}

    .mobileMenu
{
   display: none;
}

    .profileDetail {
    width: 25%;
}

    .begeleidendeText {
    width: 67%;
}

    input[type=submit] {
        opacity: 0.8;
    }

        input[type=submit]:hover {
            opacity: 1;
        }

    .slider .afspraakCTA {
        width: 15%;
        margin-left: 39.5%;
    }

    .afspraakCTA 
    {
        opacity: 0.8;
    }

    .afspraakCTA:hover
    {
        opacity: 1;
    }

    .ALBolWrapper {
        width: 25%;
    }

        .ALBolWrapper .bol {
            width: 20%;
        }

        .ALBolWrapper .bolWrapper {
            margin-top: 8px;
        }

            .ALBolWrapper .bolWrapper p {
                text-align: left;
            }


    .bolWrapper:hover img {
        -webkit-filter: grayscale(0%);
    }

    nav {
        position: relative;
        display: block;
        width: 50%;
        margin-top: 44px;
        margin-bottom: -16px;
        background-color: transparent;
    }

        nav li {
            width: auto;
        }

            nav li a {
                padding: 20px;
                border-bottom: none;
            }

                nav li a:hover {
                    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4cda1+1,aac4ad+100 */
                    background: rgb(180,205,161); /* Old browsers */
                    background: -moz-linear-gradient(left, rgba(180,205,161,1) 1%, rgba(170,196,173,1) 100%); /* FF3.6+ */
                    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(180,205,161,1)), color-stop(100%,rgba(170,196,173,1))); /* Chrome,Safari4+ */
                    background: -webkit-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* Chrome10+,Safari5.1+ */
                    background: -o-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* Opera 11.10+ */
                    background: -ms-linear-gradient(left, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* IE10+ */
                    background: linear-gradient(to right, rgba(180,205,161,1) 1%,rgba(170,196,173,1) 100%); /* W3C */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4cda1', endColorstr='#aac4ad',GradientType=1 ); /* IE6-9 */
                    color: white;
                }

    .contentWrapper {
        width: 1100px;
        margin: auto;
    }

    .bolWrapper {
        width: 15%;
        margin-top: 25px;
        margin-right: 1%;
    }

        .bolWrapper:nth-child(3n+0) {
            margin-right: 1%;
        }

        .bolWrapper:nth-child(6n+0) {
            margin-right: 0%;
        }

    .bol {
        width: 100%;
    }

    .bolWrapper p {
        width: 100%;
        text-align: center;
    }
}
