@import url('style-fonts.css');
@import url('style-grid.css');
@import url('style-alignment.css');
@import url('style-sizing.css');

/* basis */
body {
	background: #FFFFFF;
    font-family: Flanders Art Sans Regular, Verdana, Arial, Helvetica, sans-serif;
    background-image: url('backgroundx2.jpg');
    background-repeat: repeat-x;
    font-size: 10pt; 
    color: #333333;
	margin: 0;
}


.cse .gsc-control-cse, .gsc-control-cse {
    padding: 0 !important;
    border: none !important;
    margin-top: -6px;
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible {
    margin-top: 6px;
    padding: 1rem;
}
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {
    height: 28.4px;
    box-shadow: none;
    border-radius: 0;
}

.gsst_a .gscb_a {
    color: rgba(57,185,190,.5) !important;
}

.gsst_a:hover .gscb_a, .gsst_a:focus .gscb_a {
    color: rgba(57,185,190,1) !important;
}



a { color: #219A9F; text-decoration: underline; }
a:visited { color: #219A9F; }
a:active { color: #219A9F; text-decoration: underline; }
a:hover { color: #39B9BE; text-decoration: none; }

a.active { font-family: Flanders Art Sans Medium; color: #000000; text-decoration: none; }

.ovt a { color: #FFFFFF; text-decoration: none; }
.ovt a.active { color: #FFFF00 !important; }


h1, .h1 {
    font-family:Flanders Art Sans Medium, Verdana, Arial, Helvetica, sans-serif;
    text-align:left;
    margin-top:0px;
    line-height:150%;
    font-size:16pt; 
    color:#219A9F;
}


h2, .h2 {
    font-family:Flanders Art Sans Medium, Verdana, Arial, Helvetica, sans-serif;
    text-align:left;
    margin-top:0px;
    line-height:150%;
    font-size:14pt; 
    color:#666666;
}

h1 a, .h1 a, h2 a, .h2 a { text-decoration: none; }

.radius, .radius a {
    color:#fff;
    line-height: 100%;
    text-shadow: 2px 0 0 #187175, -2px 0 0 #187175, 0 2px 0 #187175, 0 -2px 0 #187175, 1px 1px #187175, -1px -1px 0 #187175, 1px -1px 0 #187175, -1px 1px 0 #187175;
}

p {
    font-family:Flanders Art Sans Regular, Verdana, Arial, Helvetica, sans-serif;
    margin-top:0px;
    line-height:150%;
    font-size:10pt; 
    color:#333333;
}

b, strong {
    font-family:Flanders Art Sans Medium, Verdana, Arial, Helvetica, sans-serif;
}

hr {
    border: 2px dotted #999999;
    border-style: none none dotted;
    margin: 20px 0;
}

ul, ol {
    line-height: 150%;
}


li.flemish-bullet {
    list-style: none;
}
li.flemish-bullet:before {
    content: '\2022';
    color: #219A9F;
    font-weight: bold;
    font-size: 1.1em;
    display: block;
    float: left;
    width: .9em;
    margin-left: -.9em;
}
ul.circle li.flemish-bullet:before {
    content: '\00B0';
    padding-top: 2px;
    font-weight: normal;
}
ul.circle li:first-of-type.flemish-bullet:before {
    padding-top: 7px;
}

ol li {
    margin-bottom: 1rem;
}



.border-radius-20 { border-radius: 20px; }
.border-green { border: 2px solid #219a9f; }
.border-white { border: 2px solid #fff; }
.border-gray { border: 2px solid #ccc; } 
.border-orange { border-color: #f60 !important; } 

.txt-black { color: #000 !important; }
.txt-white a, .txt-white { color: #fff !important; }
.txt-lightgray { color: #999 !important; }
.txt-mediumgray { color: #666 !important; }
.txt-gray { color: #333 !important; }
.txt-red { color: #f00 !important; }
.txt-orange { color: #f60 !important; }
.required { color:#219A9F; }


.bg-white { background-color: #ffffff !important; }
.bg-lightgreen { background-color: #eef7f7 !important; }
.bg-mediumgreen { background-color: #dbf2f3 !important; }
.bg-green { background-color: #219a9f !important; }
.bg-darkgreen { background-color: #187175 !important; }
.bg-gray { background-color: #f5f5f5 !important; }
.bg-yellow { background-color: #ffffcc !important; }
.bg-pattern { background: url('figs/backgrounds/background-pattern.png') repeat-x #fff; }


/* structureel */
* {
    box-sizing: border-box;
}

.container { max-width: 970px; margin: 0 auto; }

header {
    position: relative;
}

header > a > img {
    margin: 10px 0 0;
    width: 100%;
}
.breadcrumb {
    padding: 8px;
    margin: 6px 0;
    background: #F5F5F5;
}
nav {
    width: 200px;
    float: left;
}
nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav .menu-title {
    padding: 15px;
    background: #187175;
    color: #fff;
    font-family:Flanders Art Sans Medium, Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    margin-top: 1px;
}
nav .menu-title:first-child {
    margin-top: 0;
}
nav ul ul {
    padding: 15px 15px 15px 30px;
    list-style: disc;
    background: #219A9F;
    color: #fff;
}
nav ul ul .menu-title {
    padding: 0;
    background: #219A9F;
    list-style: none;
    margin-left: -15px;
    margin-top: 5px;
}
nav ul ul .menu-title:first-child {
    margin-top: 0;
}
nav .menu-item {
    line-height: 20px;
}
nav .link-item {
    color: #fff;
    text-decoration: none;
}
nav .active .link-item {
    color: #FFFF00;
}

.search {
    position: relative;
    float: right;
}
.search-input {
    border: 0;
    border-radius: 7px 0 0 7px;
    padding: 5px;
    margin-right: 0;
    width: 200px;
    float: left;
    height: 25.5px;
}
.search button {
    border: 1px solid #219A9F;
    background-color: #219A9F;
    padding: 5px;
    color: #fff;
    border-radius: 0px 7px 7px 0;
    height: 25.5px;
}
#nav .search button {
    border-color: #187175;
    background-color: #187175;
}
#nav .search button:hover,
.search button:hover {
    border-color: #39B9BE;
    background-color: #39B9BE;
}
.search-input::-ms-clear {
    display: none;
}

input:focus {
    outline: none;
}


main {
    width: calc(100% - 206px);
    margin-left: 6px;
    float: left;
}

.content {
    padding: 15px;
    background-color: #FFFFFF;
    margin-top: 6px;
}
main > div:nth-child(2):nth-last-child(1) {
    min-height: 866px;
}
.content:first-child {
    margin-top: 0;
}
.content ul { padding-left: 15px; }
.content ol { padding-left: 0; list-style-position: inside; }

.banner { display: block; margin-top: 6px; }
.banner img { padding: 0; }

footer {
    padding: 15px;
    background: #333333;
    color: #fff;
    clear: both;
    margin: 10px 0;
}
footer a {
    color: #D6F5F6;
    text-decoration: underline;
}




.input-wrapper {
    margin-bottom: 15px;
}
input.glowing-border,
select.glowing-border,
textarea.glowing-border {
    border-radius: 3px;
    padding: 2px;
    border: 1px solid #999999;
    font-size:10pt;
    width: 100%;
}

input.glowing-border:focus,
select.glowing-border:focus,
textarea.glowing-border:focus {
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
    font-size:10pt;
}

.button {
    background-color: #219A9F;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.button2 {
    background-color: #219A9F;
    border: none;
    color: white;
    padding: 10px 22px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 14px;
    height: 37px;
    box-sizing: border-box;
}

.button.small {
    padding: 4px 20px;
    border-radius: 3px;
    font-size: 10pt;
}



/* navigatie */
#nav {
    text-align: right;
    display: none;
    padding: 10px;
    background: #219A9F;
    margin-bottom: 7px;
}
#nav .icon {
    cursor: pointer;
}
.bar1, .bar2, .bar3 {
    width: 22px;
    height: 2px;
    background-color: #fff;
    margin: 3px 0;
    transition: 0.4s;
}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-3px, 7px) ;
    transform: rotate(-45deg) translate(-3px, 7px) ;
}
.change .bar2 {
    opacity: 0;
}
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(0px, -4px) ;
    transform: rotate(45deg) translate(0px, -4px) ;
}

@media only screen and (max-width:700px) {
    nav {
        display: none;
        width: 100%;
        transition: all .4s;
        transition-timing-function: cubic-bezier(1, 1, 1, 1);
    }
    nav.responsive {
        display: block;
    }
    main {
        width: 100%;
        margin: 0;
    }

    #nav {
        display: block;
    }

    .w-60p { width: 80%; }

    .breadcrumb .search {
        display: none;
    }
    .search {
        margin-top: -4px;
    }
    .search-input {
        margin: 0;
    }
}





.msg { padding: 20px; margin-bottom: 20px; background: #f5f5f5; border: 1px solid #333333; color:#333333; position: relative; }
.msg ul { padding-left: 15px; }
.msg.success { background: #d4fec7; border: 1px solid #009900; color:#009900; padding-left: 55px; }
.msg.success:before { content: ''; display: block; position: absolute; background: url('overheden/figs/check03.png') no-repeat center center / cover;  width: 33px;  height: 25px; top: 15px; left: 10px; }
.msg.error { background: #fcf3ed; border: 1px solid #ff6600; color:#ff6600; padding-left: 55px; }
.msg.error:before { content: ''; display: block; position: absolute; background: url('overheden/figs/error03.png') no-repeat center center / cover;  width: 26px;  height: 25px; top: 15px; left: 10px; }




.pagination { list-style: none; margin: 0; padding: 0; text-align: center; }
.pagination li { display: inline-block; }
.pagination li a { display: block; padding: 5px; }
.pagination li.active { background: #219a9f; }
.pagination li.active a { color: #ffffff; text-decoration: none; }











/* Persberichten */
.persberichten .bericht {
    clear: both;
    padding: 5px 0;
}
.persberichten .bericht:after {
    content: '';
    display: block;
    clear: both;
}
.persberichten .bericht .datum {
    width: 65px;
    float: left;
    margin-right: 15px;
    color: #666666;
}
.persberichten .bericht .artikel {
    width: calc(100% - 80px);
    float: left;
}
.persberichten .archief {
    margin: 30px 0 15px;
}
.persberichten .archief img {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 1px;
}

@media only screen and (max-width:500px) {
    .persberichten .bericht .datum,
    .persberichten .bericht .artikel {
        display: block;
    }
}

/* Nieuws */
.nieuws {
    padding: 7px 0;
}
.nieuws .bericht:after,
.content {
    content: '';
    display: block;
    clear: both;
}
.nieuws .bericht .afbeelding,
.content .afbeelding {
    display: block;
    float: left;
    width: 150px;
    margin: 0 7px;
}
.nieuws .bericht .afbeelding img,
.content .afbeelding img {
    width: 100%;
    margin-bottom: 10px;
}
.nieuws .bericht .artikel,
.content .artikel {
    display: block;
    float: left;
    width: calc(100% - 178px);
    padding: 0 7px;
}
.nieuws .bericht .artikel.no-img {
    width: calc(100% - 14px);
}

.img-responsive {
    max-width: 100% !important;
    height: auto !important;
}

@media only screen and (max-width:500px) {
    .nieuws .bericht .afbeelding,
    .nieuws .bericht .artikel,
    .content .afbeelding,
    .content .artikel {
        width: 100%;
        float: none;
    }

    .img-responsive {
        width: 100% !important;
        height: auto !important;
        max-width: none;
        padding: 0 0 5px 0;
        float: none;
    }
}


/* Zoeken */
.alphabet {
    list-style: none;
    margin: 0;
    padding: 0;
}
.alphabet:before {
    content: '';
    display: inline-block;
    background: url('../figs/main/icons/arrow01.gif') no-repeat center center /cover;
    width: 18px;
    height: 18px;
    margin-right: 10px;
}
.alphabet li {
    display: inline-block;
}
.alphabet li:not(:first-child):before {
    content: '-';
    display: inline-block;
    padding: 0 3.9px
}


.nested-alphabetic {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 30px;
}
.nested-alphabetic .listStyle {
    display: block;
    position: absolute;
    font-family: Flanders Art Sans Medium, Verdana, Arial, Helvetica, sans-serif;
    left: -20px;
    top: 0;
}
.nested-alphabetic .listStyle.t-12 {
    top: 12px;
}

.nested-alphabetic ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 75px;
}
.nested-alphabetic ul .listStyle {
    left: -45px;
}
.nested-alphabetic li {
    position: relative;
    margin-top: 15px;
}



/* personen vervoeren */
.pv-back {
    background: url('personenvervoer/figs/icons/back2.gif') no-repeat center center / cover;
    display: block;
    float: right;
    width: 50px;
    height: 50px;
}
.pv-arrow {
    display: inline-block;
    width: 50px;
    height: 60px;
}
.pv-arrow.up { background: url('personenvervoer/figs/icons/up.gif') no-repeat center center / cover; }
.pv-arrow.down { background: url('personenvervoer/figs/icons/down.gif') no-repeat center center / cover; }
.pv-arrow.righ { background: url('personenvervoer/figs/icons/righ.gif') no-repeat center center / cover; }
.pv-arrow.left { background: url('personenvervoer/figs/icons/left.gif') no-repeat center center / cover; }
@media only screen and (min-width:540px) {
    .pv-arrow.sm-up { background: url('personenvervoer/figs/icons/up.gif') no-repeat center center / cover; }
    .pv-arrow.sm-down { background: url('personenvervoer/figs/icons/down.gif') no-repeat center center / cover; }
    .pv-arrow.sm-right { background: url('personenvervoer/figs/icons/right.gif') no-repeat center center / cover; }
    .pv-arrow.sm-right { background: url('personenvervoer/figs/icons/right.gif') no-repeat center center / cover; }
}
@media only screen and (min-width:720px) {
    .pv-arrow.md-up { background: url('personenvervoer/figs/icons/up.gif') no-repeat center center / cover; }
    .pv-arrow.md-down { background: url('personenvervoer/figs/icons/down.gif') no-repeat center center / cover; }
    .pv-arrow.md-right { background: url('personenvervoer/figs/icons/right.gif') no-repeat center center / cover; }
    .pv-arrow.md-down { background: url('personenvervoer/figs/icons/down.gif') no-repeat center center / cover; }
}







.google-search {
    position: absolute;
    top: 172px;
    right: 10px;
    width: 450px;
    max-width: 50%;
}

@media only screen and (max-width:985px) {
    .google-search {
        top: 20px;
        right: 10px;
        width: 450px;
    }
}

@media only screen and (max-width:650px) {
    .google-search {
        left: 10px;
        width: auto;
        max-width: 100%;
    }
}


/* bereikbaarheidsgids */
.submenu {
    margin: 0 10px 0 10px;
    width: calc(100% - 20px);
}
.submenu ul {
    margin: 10px 0;
}
.submenu ul a {
    text-decoration: none;
    color: #000000;
}
.submenu .flemish-bullet a {
    color: #187175;
    font-size: 12pt;
    font-family: Flanders Art Sans Medium;
}

@media only screen and (min-width:720px) {
    .submenu {
        margin: 0 0 0 10px;
        width: calc(50% - 10px);
    }
}