/*
  Colors

  Body text:          #555559
  Brand blue:         #0d4291
  Brand blue darker:  #083d75
  Brand blue lighter: #1466bc
  Brand red:          #e2001a
  Brand yellow:       #ffdd00
*/

@font-face {
    font-family: 'ff-din-web';
    src: url('/apps/com.brightanswers.oha/fonts/DIN-W01-Regular/DIN-W01-Regular.eot');
    /* IE9 Compat Modes */
    src: url('/apps/com.brightanswers.oha/fonts/DIN-W01-Regular/DIN-W01-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/apps/com.brightanswers.oha/fonts/DIN-W01-Regular/DIN-W01-Regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/apps/com.brightanswers.oha/fonts/DIN-W01-Regular/DIN-W01-Regular.woff') format('woff'), /* Pretty Modern Browsers */
    url('/apps/com.brightanswers.oha/fonts/DIN-W01-Regular/DIN-W01-Regular.ttf') format('truetype');
    /* Safari, Android, iOS */
}

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

html {
    height: 100%;
    position: relative;
}

h1,
h2,
h3,
h4 {
    font-family: 'ff-din-web', sans-serif;
}

.path-projectwebsites h2 {
    margin-top: 0px;
}


.path-projectwebsites .header-component.with-image .page-header {
    padding: 0em 1em;
    width: 100%;
    text-align: left;
    padding-left: 29%;
}

.disabled {
    color: #ccc;
    text-decoration: line-through;
}

body {
    color: #555559;
    font-size: 16px;
    font-family: 'ff-din-web', 'Segoe UI', 'Source Sans Pro', arial, sans-serif;
    min-height: 100%;
}

h4 {
    font-size: 30px;
}


@media (max-width: 414px) {
    h4 {
        font-size: 24px;
    }
}

a,
.navbar-nav a,
.navbar-default .navbar-nav > li > a {
    color: #00388C;
}

// .navbar-default .navbar-nav > li.active a,
// .navbar-default .navbar-nav > li.active:hover a {
//   font-weight: bold;
//   background: transparent;
// }


select.form-control,
input.form-control,
.has-error input.form-control,
.has-success input.form-control {
    border: none;
    box-shadow: none;
    border-bottom: 1px solid lightgrey;
    border-radius: 0px;
}


/* ======================= NAVIGATION =======================
=========================================================== */

.navbar-default {
    border-color: transparent;
    background: rgba(255, 255, 255, .9);
}

.path-projectwebsites .navbar-default {
    height: 360px;
    z-index: 2;
    background: linear-gradient(270deg, transparent 73.5%, rgba(255, 255, 255, 0.7) 37%);
    border: none;
    box-shadow: none;
}

.path-projectwebsites .navbar-fixed-top {
    position: absolute;
    top: 0px;
}

.is-scrolled .navbar-default {
    box-shadow: 0 1px 15px rgba(0, 0, 0, .1);
    border-color: #ddd;
}


.path-projectwebsites .navbar-default .container {
    height: 140px;
    transition: all 0.3s ease-in;
}

.path-projectwebsites .navbar-default .container::before {
    background-image: url(/apps/com.brightanswers.oha/_afbeeldingen/deschatkamervanzuid.png);
    background-size: cover;
    background-position: -240px;
    width: 210px;
    height: 130px;
    margin-top: 0px;
    margin-right: 40px;

}


.path-projectwebsites.is-scrolled .navbar-default .container {
    height: auto;
}

.navbar-header {
    float: right;
}

.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
    margin-left: 15px;
    margin-right: 0;
}

.path-projectwebsites .navbar > .container .navbar-brand {
    display: none;
}

.header-component.with-image {
    height: 200px;
}

.header-component.with-image .page-header h1 {
    font-size: 32px;
    display: none;
}

ul.top-nav li ul.subnav,
ul.top-nav li ul.subnav li ul.subnav {
    text-align: left;
    padding: 0;
    background: white;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, .3);
}

ul.top-nav li.selected ul.subnav li a,
.navbar-default .navbar-nav > li.active ul.subnav a {
    color: #00388C;
    font-weight: normal;
}

ul.top-nav > li:last-child > a {
    border-radius: 4px;
    margin-left: 15px;
    background-color: #0d4291;
    color: white;
}

ul.top-nav > li:last-child > a:before {
    content: "\f023";
    display: inline-block;
    text-align: center;
    font-family: 'fontAwesome';
    margin-right: 7px;
}

ul.top-nav > li:last-child > a:hover {
    background-color: #1466bc;
    color: white;
}

@media (max-width: 991px) {
    ul.top-nav > li:last-child > a {
        display:inline-block;
    }
}

.navbar-default .navbar-nav > li.active ul.subnav a:hover,
.navbar-default .navbar-nav > li.active:hover a {
    background: transparent;
    color: #000;
}

.nav-sidebar .subnav {
    display: none;
}

.nav-sidebar li.active > .subnav {
    display: block;
}

/* Desktop */

@media (min-width: 991px) {

    body {
        padding-top: 143px;
    }

    .header-component.with-image {
        /*    background-size: cover;*/
        // background-position: 50% 0% !important;
    }

    .navbar-default {
        // border-bottom: 1px solid #ddd;
    }

    .navbar-collapse {
        vertical-align: bottom;
    }

    .navbar-nav {
        vertical-align: bottom;
        margin-top: 90px;
        margin-bottom: 10px;
        margin-left: -15px;
        transition: margin-top .3s ease-in-out;
    }

    .path-projectwebsites .navbar-nav {
        display: none;
    }

    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
        display: inline-block;
    }

    .navbar-right {
        // margin-right: -150px;
        float: none;
        margin: 0;
        position: absolute;
        top: 0px;
        left: initial;
        right: 0px;
        opacity: .4;
        transition: opacity .2s ease-in,
        top .8s ease-out;
        z-index: 100000;
    }
    .navbar-right:hover {
        opacity: 1;
    }

    .navbar-nav > li::before {
        color: #ccc;
        content: '|';
        float: left;
        display: inline-block;
        vertical-align: middle;
        padding: 10px 0;
    }


    .navbar-nav > li:first-child::before {
        content: none;
    }

    .navbar-nav > li:second-child {
        border-left: 0;
    }

    .navbar-brand > img {
        transition: height .3s ease-in-out;
        -webkit-transition: height .3s ease-in-out;
        -moz-transition: height .3s ease-in-out;
        -o-transition: height .3s ease-in-out;
    }

    .navbar.is-scrolled {}
    .is-scrolled .navbar-brand > img {
        height: 50px;
    }

    .is-scrolled .navbar-nav {
        margin-top: 20px;
    }
    .is-scrolled .navbar-right {
        top: 0px;
    }
    .is-scrolled .metamenu-component {
        top: -200px;
        opacity: 0;
    }

}

@media screen and (min-width: 280px) {
    body {
        padding-top: 78px;
    }

    .header-component.with-image {
        height: auto;
    }

    .navbar-toggle {
        margin-top: 22px;
        margin-bottom: 0px;
    }
    .navbar-brand > img {
        height: 48px;
        width: auto;
    }
}

.metamenu-component {
    background: transparent;
}

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

.navbar-nav.navbar-right > li {
    border: none;
}

.navbar-default .navbar-nav > li.active a,
.navbar-default .navbar-nav > li.active:hover a,
.navbar-inverse .navbar-nav > li.active > a,
.navbar-inverse .navbar-nav > li.active:hover > a,
.navbar-default .navbar-nav > li.active ul.subnav li.active > a {
    background-color: transparent;
    color: #E2001B;
    font-weight: bold;
}

ul.top-nav li:hover > ul.subnav,
ul.top-nav li ul.subnav li:hover ul.subnav,
ul.top-nav li ul.subnav li:hover > ul.subnav {
    display: none;
}

ul.top-nav li:nth-of-type(1n + 7) {
    display: none;
}

ul.top-nav li ul.subnav li {
    display: inherit;
}


/* subnav desktop */

.subnav {
    width: 100%;
    z-index: 2;
    margin-bottom: 0px;
    border-radius: 0px;
}

.navbar-inverse {
    background-color: #AA68A4;
    color: white;
}

.navbar-inverse nav {
    width: 1170px;
    margin: 0 auto;
}

.navbar-inverse nav .navbar-nav {
    width: 100%;
}

.navbar-inverse .navbar-nav > li {
    width: 25%;
    border: none;
    color: black;
}

.navbar-inverse .navbar-nav > li > a {
    color: black;
}

.navbar-inverse .navbar-nav > li::before {
    content: "\f061";
    font-family: FontAwesome;
    left: 40px;
    top: 40px;
    position: absolute;
    font-size: 20px;
    z-index: 1;
}

.navbar-inverse .navbar-nav > li:hover::before,
.navbar-inverse .navbar-nav > li.active::before {
    color: white;
}

#breadcrumbs {
    position: relative;
}

#breadcrumbs nav::after {
    display: block; // float: right;
    width: 50px;
    height: 38px;
    background: transparent;
    background: linear-gradient(to left, rgba(245, 245, 245, 1) 22%, rgba(245, 245, 245, .73) 43%, rgba(245, 245, 245, 0) 100%);
    position: absolute;
    top: 0;
    right: 0;
    content: ' ';
}

#breadcrumbs nav {
    width: 100%;
    background-color: rgba(245, 245, 245, 0.7);
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap; // position:absolute;
    // top:100px;
    // z-index:2;
}


body .breadcrumb {
    padding: 8px 20px;
    list-style: none;
    border-radius: 0px;
    max-width: 1170px;
    margin: 0 auto;
    background-color: transparent; // padding-right: 20px;
}

.breadcrumb li:last-child {
    margin-right: 45px;
}

.breadcrumb > li + li + li:before {
    content: "›";
    color: #999;
}

.breadcrumb > li + li:before {
    content: "";
}

.path-over-mijande-wonen .subnav,
.path-contact .subnav,
.path-onze-projecten .subnav {
    display: none!important;
}

@media only screen and (max-width: 415px) {
    .navbar-nav > li {
        width: 100%;
    }
}


/* ======================= END NAV =======================
=========================================================== */

/* ======================= SEARCH FIELD =======================
=========================================================== */

.siteMetaMenu {
    display: block;
    background-color: transparent;
    padding: 20px 10px 0px 0px;
    color: #ccc;
    vertical-align: middle;
}

.path-projectwebsites .siteMetaMenu {
    display: none;
}

.siteMetaMenu a {
    font-size: smaller;
    color: #777;
    display: inline-block;
    padding: 5px; // margin-top: 15px;
    // margin-left: 10px;
}

.siteMetaMenu li::before {
    content: ' | ';
}

.siteMetaMenu li:first-child::before {
    content: none;
}

.siteMetaMenu a::after {
    font-family: FontAwesome;
    content: none;
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    font-size: large;
}

.siteMetaMenu .pos-1 a::after {
    content: '\f0e8';
}

.siteMetaMenu .pos-2 a::after {
    content: '\f02f';
}

.siteMetaMenu ul {
    margin: 10px 0 0 15px;
    padding: 0;
    list-style: none;
    float: right;
}

.siteMetaMenu li {
    display: inline-block;
}

.siteMetaMenu input.search-field {
    padding: 15px;
    height: 50px;
    border: 1px solid lightgrey;
    width: 280px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    vertical-align: middle;
    font-size: 14px;
    color: #555;
}

.siteMetaMenu input.search-field:focus {
    outline: none;
    border-color: #E2001B;
}

.siteMetaMenu .search-button {
    text-indent: -1000px;
    width: 60px;
    height: 50px;
    background-image: url('app-files-client/img/search-w.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #E2001B;
    border: none;
    margin-top: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    vertical-align: middle;
}

.viernulvier {
    text-align: center;
}

.viernulvier .siteMetaMenu form {
    width: 350px;
    display: block;
    margin: 0 auto;
}

.viernulvier .siteMetaMenu .search-button {
    margin-top: -2px;
    float: left;
}

.viernulvier .siteMetaMenu input {
    float: left;
}



/* ======================= BEGIN HEADER-COMPONENT =======================
====================================================================== */

header {
    position: relative;
}


.path-projectwebsites header {
    position: absolute;
    top: 0px;
    width: 100%;
}



@media (max-width: 750px) {
    .path-projectwebsites header {
        position: relative;
        top: 40px;
        width: 100%;
        height: 240px;
        overflow: hidden;
        margin-bottom: 40px;
    }
}


.path- .header-component {
    padding-top: 20px;
}

.path- .header-component .list-group {
    margin-bottom: 0;
}

.path- .header-component.with-image {
    height: initial;
    padding-top: 0;
    padding-bottom: 0; // height: 480px;
    // padding-top: 0px;
}

.header-component.with-image .page-header h1 small {
    display: block;
    color: whitesmoke;
    width: 100%;
    margin-top: 10px;
}

.page-header-body {
    max-width: 1170px;
    margin: 0 auto;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    height: 350px;
}


.page-header-body .grid-component {
    z-index: 2;
    padding: 0px 0px;
}


/* ========== EINDE HOME-PAGE || MEER WETEN LINKS ====================
====================================================================== */

/* ==========  BEGIN NIEUWS/PROJECTEN UITGELICHT ====================
====================================================================== */

.stream-component {
    border-bottom: none;
    padding: 0px;
}

.stream-component li {
    margin: 0px 0px 20px 0px;
}

.stream-component h2 {
    display: none;
}

.stream-component .stream-block-component h2 {
    display: block;
}

.path- .stream-component {
    padding: 10px 0 30px 0;
}

.path- .stream-component li,
.path- .stream-component ol {
    margin-bottom: 0px;
}

@media (max-width: 768px) {
    .path- .stream-component li,
    .path- .stream-component ol {
        margin-top: 10px;
    }
}

.stream-block-component h2 {
    margin-top: 0px;
    margin-bottom: 40px;
}

.stream-component .highlight-content h2 {
    margin-bottom: 10px;
}

.stream-block-component {
    width: 100%;
    height: 300px;
}

/* ==========  EINDE NIEUWS/PROJECTEN UITGELICHT ====================
====================================================================== */

/* =====================  EINDE PROJECTENPAGINA ======================
====================================================================== */

/* ==========  BEGIN PICTURE COMPONENT ===============================
====================================================================== */

.picture-component {
    margin-bottom: 40px;
}

.picture-component.center {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 768px;
    text-align: center;
}

.picture-component.right {
    text-align: right;
}


@media (max-width: 415px) {
    .picture-component.center {
        text-align: left;
    }
}

/* ==========  EINDE PICTURE COMPONENT ===============================
====================================================================== */

/* ================  BEGIN GALLERY COMPONENT ===============================
====================================================================== */

.gallery-component figcaption {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 768px;
    text-align: center;
}

@media (max-width: 415px) {
    .gallery-component .col-xs-4,
    .gallery-component .col-xs-8 {
        width: 100%;
    }

    .gallery-component figcaption {
        max-width: 100%;
    }

    .gallery-component a[data-fluidbox] div.fluidbox__wrap::after {
        bottom: 45px;
        right: 20px;
    }
}

/* ================  EINDE GALLERY COMPONENT ===============================
====================================================================== */

/* ================  BEGIN YOUTUBE COMPONENT ===============================
====================================================================== */

.youtube-component {
    max-width: 100%;
}

/* ================  EINDE YOUTUBE COMPONENT ===========================
======================================================================== */

/* ==========  BEGIN OPENINGSTIJDEN COMPONENT ========================
====================================================================== */

#openingstijden {
    border-radius: 10px;
    min-height: 50px;
    color: #555559;
    background-color: grey;
    width: 100%;
    display: block;
    padding: 15px;
    position: relative;
}

#openingstijden.closed {
    background-color: #ff9999;
}

#openingstijden.open {
    background-color: #99cccc;
}

#timeDiv {
    padding: 0px 20px 0px 60px;
}

#timeDiv::before {
    content: "\f017";
    font-family: FontAwesome;
    font-size: 30px;
    color: white;
    position: absolute;
    left: 20px;
}

#openingstijden span {
    text-align: right;
    width: 100%;
    padding: 20px 0px;
    padding-right: 30px;
    display: block;
}

@media (max-width: 1024px) {
    #openingstijden span {
        bottom: 10px;
        right: 20px;
    }
}

/* ==========  EINDE OPENINGSTIJDEN COMPONENT =======================
====================================================================== */

/* ==========  BEGIN FORMULIEREN COMPONENT(EN) ========================
====================================================================== */

.app-form-component {
    width: 768px;
    margin: 0 auto;
}

.path-projectwebsites .app-form-component {
    width: 600px;
    margin: 0 0;
}

#aanhef,
#soortcontact,
#geslacht {
    width: 170px;
}

.voorletters,
.postcode {
    width: 200px;
}

.help-block {
    text-align: right;
}

.app-form-submit-component {
    text-align: right;
}


@media (max-width: 768px) {
    .app-form-component {
        width: 100%;
        margin: 0 auto;
    }
}

#form-submit {
    width: 100%;
    margin-left: 0%;
}

#form-submit .btn {
    width: 25%;
    text-align: center;
    background-color: #AA68A4;
    color: white;
}

#form-submit .btn::before {
    content: "\f017";
    font-family: FontAwesome;
    font-size: 30px;
    color: white;
    position: absolute;
    left: 20px;
    color: white;
}

/* ==========  BEGIN SOCIAL SHARE BUTTONS ============================
====================================================================== */

/* BEGIN || SOCIAL-SHARE-BUTTONS-COMPONENT */

.social-share-buttons-component {
    width: 330px;
    border-top: none;
    min-height: 150px;
    margin-top: 30px;
}

.social-share-buttons-component .btn {
    background-color: #AA68A4;
    border-color: #AA68A4;
    z-index: 2;
}

/* ==========  EINDE SOCIAL SHARE BUTTONS ============================
====================================================================== */

/* ==========  BEGIN FOOTER ========================
==================================================== */

div.main {
    // margin-bottom: 276px;
}

footer {
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 2.5rem 5px;
    color: #cde2f3;
    background-color: #0d4291; // position: absolute;
    // bottom: 0;
}


.path-projectwebsites footer {
    background-color: #691B4B;
}

footer b,
footer strong {
    color: #eee;
}

footer .container {}

// footer .grid-column-1.col-sm-9 div a.list-group-item {
//   float: left;
//   width: auto;
//   margin: 20px 0px;
//   padding: 0px 20px;
//   background-color: transparent;
//   color: white;
//   border-top: none;
//   border-bottom: none;
//   min-height: 250px;
//   margin-top: 40px;
//   position:relative;
// }
// footer div a.list-group-item:first-child {
//   border-left:none;
// }
footer .picture-component {
    // float: right;
    // margin-left: 20px;
    // width: 44px;
    // margin-top: 20px;
}

// footer .picture-component .picture {
//   width: 100%;
// }
// footer .grid-column-component:last-child {
//   // text-align: right;
// }
footer a,
footer a.list-group-item {
    color: #fff;
    opacity: .7;
}

footer a:hover,
footer a.list-group-item:hover {
    color: #fff;
    opacity: 1;
}

footer a.list-group-item:before {
    content: none;
    font-family: FontAwesome;
    display: inline-block; // padding: 10px;
    font-size: xx-large !important;
    vertical-align: middle !important;
    margin-right: 10px;
}

footer .grid-column-component:last-child a.list-group-item:nth-of-type(1)::before {
    content: '\f082'; // Facebook
}

footer .grid-column-component:last-child a.list-group-item:nth-of-type(2)::before {
    content: '\f081'; // Twitter
}

footer .grid-column-component:last-child a.list-group-item:nth-of-type(3)::before {
    content: '\f098'; // Phone
}

footer .row:last-child .picture-component:last-child {
    margin-bottom: 0;
}

footer .col-sm-3 {
    float: none;
    width: 100%;
}

/* ===================== EINDE FOOTER ===================
=========================================================

/* Carousel */

.carousel-caption {
    height: 135px;
    position: absolute;
    background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) -50%, rgba(0, 0, 0, 0.9) 99%, rgba(0, 0, 0, 0.6) 100%)!important;
    background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) -50%, rgba(0, 0, 0, 0.9) 99%, rgba(0, 0, 0, 0.6) 100%)!important!important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) -50%, rgba(0, 0, 0, 0.9) 100%, rgba(0, 0, 0, 0.6) 100%)!important;
    padding: 0 20px 20px;
    bottom: 0;
    top: auto;
    -webkit-border-radius: 0;
    text-align: left;
}

.carousel-caption h4 {
    margin: 0;
    font-weight: bold;
    font-size: large;
}

.path- .carousel-component {
    margin-bottom: 1px;
}

.carousel-component .item.fake-href {
    cursor: pointer;
}

.carousel-component .item.fake-href img {
    transition: transform .3s ease-in-out;
}

.carousel-component .item.fake-href:hover img {
    transform: scale(1.1);
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    vertical-align: middle;
}

/* Generic component stuff */

.picture-component img {
    max-width: 100%;
    height: auto;
}

.picture-component .picture.text-center {
    width: 100%;
}

.picture-component .picture.text-center .picture-content {
    display: block;
}

.page-header-body .picture-component {
    overflow: hidden;
    height: 350px;
    margin-bottom: 0px !important;
}

.page-header-body .picture-component img {
    min-width: 100%;
    height: auto;
}

@media screen and (min-width: 768px) and (max-width: 940px) {
    .page-header-body .picture-component {
        height: auto;
    }
    .page-header-body .picture-component img {
        width: auto;
        min-height: 100%;
    }
}

@media (max-width: 768px) {
    .page-header-body {
        height: 340px;
    }
    .page-header-body .picture-component {
        height: auto;
        border-bottom: 2px solid #fff;
    }
}

@media (max-width: 750px) {
    .page-header-body {
        height: auto;
    }
}

@media (max-width: 400px) {
    body .picture-component .picture {
        width: 100%;
        margin: 0 0 0 0 !important;
    }
}



.path-zoeken .main a {
    font-size: 20px;
}

.path-zoeken .main .siteMetaMenu a {
    font-size: 14px;
}

.path-zoeken .main p {
    font-size: 16px;
    margin-bottom: 15px;
    border-bottom: 1px solid lightgrey;
    padding-bottom: 15px;
}




/* =========================

  Custom misc

=========================  */

.newsItemDate {
    font-size: 12px;
    width: 75px;
    padding: 13px 10px 10px 0px!important;
    display: inline-block;
}

.app-news-overview-component {
    margin-bottom: 20px;
}

.app-news-overview-component ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-news-overview-component li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.app-news-overview-component li:first-child {
    border-left: 15px solid yellow;
    padding-left: 15px;
}

.path-projectwebsites .app-news-overview-component li:first-child {
    border-left: 15px solid #691b4b;
}

.app-news-overview-component li:after {
    display: table;
    content: ' ';
    clear: both;
}

.app-news-overview-component h3,
.app-news-overview-component p {
    margin: 0;
}

.app-news-overview-component a {
    display: block;
}

.app-news-overview-component a:hover {
    text-decoration: none;
}

.app-news-overview-component a:hover h3 {
    text-decoration: underline;
}

.app-news-overview-component a:hover img {
    background: #0d4291;
}

.app-news-overview-component img {
    max-width: 45%;
    height: auto;
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
    /*padding: 10px; */
    background: #ffdd00;
    transition: background-color .3s ease-out;
}

.path-projectwebsites .app-news-overview-component img {
    max-width: 100%;
}

.app-news-overview-component .date {
    font-size: smaller;
    margin-top: 5px;
    margin-bottom: 15px;
    color: #e2001a;
}

.app-news-overview-component .text {
    color: #555559;
}

/*
  Bootstrap override
*/

.btn-primary {
    background: #0d4291;
    border-color: #083d75;
    transition: background-color .3s ease-out;
}

.path-projectwebsites .btn-primary {
    background: #691b4b;
}


.btn-primary:hover {
    background: #1466bc;
}

/*
  Component stuff
*/

.picture-component {
    margin-bottom: 20px;
    width: 100%;
    clear: both;
}

.picture-component + a + .picture-component > h2 {
    margin-top: 0;
}


/* ===================================================

  Start page specific stuff

=================================================== */

header {
    padding-top: 0px;
}


.header-component.with-image::after {
    left: -1%;
    width: 102%;
    right: -1%;
}

.header-component.with-image {
    background-color: #f1f1f1;
    background: radial-gradient(ellipse at center, #fff 0%, #f0f0f0 100%);
}


.header-component .page-header-body .grid-column-2 {
    background: #e2001a;
    padding: 25px;
    color: white;
    /*  min-height: initial !important;*/
    text-align: center;
    width: 33, 33%;
}

.header-component .page-header-body .grid-column-2 .list-group-item::before {
    margin-top: 2px;
}

.header-component .page-header-body .grid-column-2 .list-group-item {
    background: transparent;
    border: 0;
    color: white;
    padding: 10px 10px 10px 0px;
    font-size: larger;
    text-align: left;
}

.list-group.simple a.list-group-item:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f061';
    margin-right: 10px;
    font-size: smaller;
    vertical-align: top;
}

.header-component .page-header-body .grid-column-2 .list-group-item:hover {
    opacity: .8;
}

.header-component .page-header-body .grid-column-2 .button-component {
    margin: 0 0 10px;
}


.header-component .page-header-body .grid-column-2 .button-component .btn-link {
    font-size: x-large;
    color: white;
    text-decoration: none;
    margin: 0;
    padding: 0;
    display: block;
    text-align: left;
    vertical-align: middle;
}

.header-component .page-header-body .grid-column-2 .button-component .btn-link:hover {
    opacity: .8;
}

.header-component .page-header-body .grid-column-2 .button-component .btn-link:before {
    font-size: 32px;
    font-family: FontAwesome;
    content: '\f095';
    vertical-align: middle;
    margin-right: 6px;
}


@media screen and (max-width: 1170px) {
    body .red-header-block {
        margin: auto;
        right: 0px;
        overflow: hidden;
    }
}


@media screen and (min-width: 1024px) {
    .header-component .page-header-body .grid-column-2 .button-component .btn-link {
        font-size: xx-large;
    }
    .header-component .page-header-body .grid-column-2 .button-component .btn-link::before {
        font-size: 52px;

    }
}

.header-component .page-header-body .grid-column-2 .list-group-item-heading {
    font-weight: normal;
    text-align: left;
    font-size: 24px;
}

.header-component .page-header-body .grid-column-2 .button-component .col-xs-12 {
    padding: 0;
}

.carousel-slide {
    max-height: 350px !important;
    overflow: hidden;
    position: relative;
}

.carousel-slide .item {
    max-height: 350px;
    overflow: hidden;
    background: #555;
}

.carousel-indicators {
    bottom: -5px;
}

.page-header-body .row {
    margin: 0;
}

.page-header-body .grid-column-1 {
    padding-left: 0;
    padding-right: 0;
}

.path- > .container .grid-column-component.col-sm-3.textColor {
    position: relative;
    display: block;
    height: 162px;
    margin-bottom: 20px;
}

@media screen and (min-width: 510px) {
    .path- > .container .grid-column-component.col-sm-3.textColor {
        width: 50%;
        float: left;
    }
}

@media screen and (min-width: 769px) {
    .path- > .container .grid-column-component.col-sm-3.textColor {
        width: 25%;
    }
}

.path- .grid-column-component.col-sm-3.textColor .highlight-content {
    position: absolute;
    bottom: 0;
    top: initial; // background: rgba(0, 0, 0, .7);
    color: white;
    background: #ffdd00;
    color: #000;
    opacity: .9;
    width: 100%;
    margin: 0;
    padding: 10px;
    text-align: center;
}

.path- .grid-column-component.col-sm-3.textColor a {
    padding: 0;
}

.path- .grid-column-component.col-sm-3.textColor .highlight-content h2 {
    margin: 0;
    padding: 0;
    font-size: 110%;
}

.path- .grid-column-component.col-sm-3.textColor .highlight-content p,
.path- .grid-column-component.col-sm-3.textColor .highlight-content ul,
.path- .grid-column-component.col-sm-3.textColor .highlight-content time {
    display: none;
}

.metamenu-component {
    display: none;
}

.sidebar.mobile {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.sidebar.mobile.off {
    display: none;
}

.sidebar.mobile nav {
    display: none;
}

.sidebar.mobile .nav-sidebar {
    margin: 10px -15px 0 -15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 0;
}

.sidebar.mobile button {
    width: 24px;
    height: 24px;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 5px;
    background: #f1f1f1;
    margin-right: 5px;
}

.sidebar.mobile button .icon-bar {
    height: 2px;
    margin: 2px 0 0;
    width: 100%;
    display: block;
    background: #aaa;
}

.sidebar.mobile button .icon-bar:first-child {
    margin-top: 0;
}

// .row {
//   margin-left: 0;
//   margin-right: 0;
// }
/* Needed to override default in Boostrap template */

@media (min-width: 768px) {
    .container {
        width: initial;
        max-width: 1170px;
    }

    .col-sm-3.col-md-2.sidebar {
        padding-top: 0;
        padding-bottom: 0;
        background: #E2001B;
        border: none;
    }

    .path-projectwebsites .col-sm-3.col-md-2.sidebar {
        margin-top: 143px;
    }


    .path-projectwebsites .mainPlus {
        margin-top: 230px;
    }

    .nav-sidebar {
        margin-bottom: 0;
    }
    .nav-sidebar ul > li > a {
        padding-left: 20px;
    }

    .path-projectwebsites .nav-sidebar > li > a,
    .path-projectwebsites .nav-sidebar ul > li > a {
        padding-left: 10px;
    }

    .path-projectwebsites .nav-sidebar > li > a,
    .path-projectwebsites .nav-sidebar > li.selected > a {
        background-color: #691B4B;
        border-bottom: 2px solid #691B4B;
    }

    .nav-sidebar a {
        background: transparent;
        color: #fff;
    }

    ul.top-nav li:hover > ul.subnav,
    ul.top-nav li ul.subnav li:hover > ul.subnav {
        display: block;
    }

    ul.top-nav li ul.subnav {
        border-top: 1px solid #ccc;
    }


    .nav-sidebar a:hover,
    .nav-sidebar a:active {
        background: transparent !important;
        color: rgba(255, 255, 255, .8);
    }

    .nav-sidebar li.selected > a {
        background: transparent;
        color: #fff;
        font-weight: bold;
    }

    .path-projectwebsites .nav-sidebar > li > a:hover,
    .path-projectwebsites .nav-sidebar > li.selected > a:hover {
        background-color: white!important;
        color: #691B4B;
    }

    nav > .nav > li {
        // border-bottom: solid 2px #C9091C;
    }

    nav > .nav > li ul {
        // border-bottom: 1px dashed #ccc;
        background: #FEF3F6;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    nav > .nav-sidebar > li ul a,
    nav > .nav-sidebar > li.unfolded ul a {
        color: #E2001B;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .path-projectwebsites nav > .nav-sidebar > li ul a,
    .path-projectwebsites nav > .nav-sidebar > li.unfolded ul a {
        color: #691B4B;
    }


    nav > .nav-sidebar > li ul a:hover {
        color: #C9091C;
    }
    nav > .nav-sidebar > li > a {
        background: #E2001B;
        border-bottom: 2px solid #C9091C;
    }

    footer .col-sm-3 {
        float: left;
        width: 33.33%;
    }
    footer .col-sm-3:nth-child(4) {
        width: 100%;
        margin-top: 20px;
    }

    .header-component.with-image {
        height: 350px;
    }

    .sidebar {
        margin-bottom: 40px;
    }
}


/* Override components.css */

.metamenu-component {
    right: initial;
    left: 0px;
    margin-left: 0px;
}

.metamenu-component form {
    margin-left: 0;
}

@media (min-width: 991px) {
    body {
        padding-top: 143px;
    }

    .metamenu-component {
        display: block;
        opacity: 1;
        transition: top .6s ease-out,
        opacity 1s ease-in;
    }

    .navbar-brand > img {
        height: 106px;
    }

    .path-projectwebsites .navbar-brand > img {
        height: 60px;
    }

    /*.path- .header-component .page-header-body .grid-column-2 {
    min-height: 350px !important;
  }*/
    footer .col-sm-3 {
        width: 25%;
    }
    footer .col-sm-3:nth-child(4) {
        margin-top: 0;
        width: 25%;
    }
}

@media (max-width: 990px) {
    .navbar-brand {
        float: right;
    }

    .navbar-header {
        float: none; // width: 100%;
    }
    .navbar-left,
    .navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
        float: left;
        margin-left: 15px;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav > li {
        float: none;
    }
    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in {
        display: block !important;
        overflow-y: auto !important;
    }
}


@media (min-width: 1072px) {
    body {
        padding-bottom: 276px;
    }
    footer {
        position: absolute;
        bottom: 0;
    }
}


@media (min-width: 1170px) {
    .metamenu-component {
        left: 50%;
        margin-left: -585px;
        margin-right: 0px
    }
}

@media print {
    body {
        padding: 0;
    }
    a[href]:after {
        content: none !important;
    }
    .header-component {
        padding: 0;
    }
    .header-component.with-image {
        height: auto;
        text-align: left;
    }
    .header-component.with-image .page-header {
        position: relative;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    *[class^='col-'] {
        padding: 0;
    }

    .sidebar,
    footer,
    #breadcrumbs,
    .btn,
    .highlight-page-component,
    .path- > .container .grid-column-component.col-sm-3.textColor {
        display: none !important;
    }
}

body .header-component .page-header {
    display: none!important;
}


article.highlight-page-component a {
    position: relative;
    height: 180px;
    padding: 0px;
}

article.highlight-page-component a .highlight-content {
    position: absolute;
    top: 100px;
    margin-bottom: 15px;
    margin-right: 15px;
    background-color: RGBA(244, 244, 244, 0.7);
    color: RGBA(222, 0, 25, 1);
    width: 100%;
    height: 80px;
    -webkit-transition: all .5s ease;
}

article.highlight-page-component:hover a .highlight-content {
    background-color: RGBA(222, 0, 25, 0.7);
    color: white;
}


article.highlight-page-component h2 {
    font-size: 22px;
    padding: 10px;
    margin: 0px;
}

article.highlight-page-component p {
    display: none;
}


/*****************************************
    Schatkamer van zuid specific
*****************************************/

.path-projectwebsites .header-component .page-header-body .grid-column-2 {
    background: #691b4b;
    padding: 25px;
    color: white;
    /*  min-height: initial !important;*/
    text-align: center;
    width: 33, 33%;
}

.path-projectwebsites .button-component .btn {
    float: left;
    font-size: 24px;
    background: #faa003;
    border-color: #faa003;
}

.path-projectwebsites footer {
    background-color: transparent;
    color: #333;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    font-size: 12px;
    margin-top: 30px;
}

.path-projectwebsites footer a {
    text-decoration: underline;
    color: #faa003;
}

.path-projectwebsites footer a:hover {
    text-decoration: none;
    color: #691b4b;
}


/*===========================
    Overruling bootstrap
============================*/

.path-sitemap .col-sm-9 .nav.nav-sidebar li a {
    color: black;
    font-size: 20px;
}

.path-sitemap .col-sm-9 .nav.nav-sidebar li a:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f061';
    margin-right: 10px;
    margin-top: 2px;
    font-size: smaller;
    vertical-align: top;
}

.path-sitemap .col-sm-9 .nav.nav-sidebar .nav.subnav {
    display: block;
}

.path-sitemap .col-sm-9 .nav.nav-sidebar .nav.subnav li a {
    color: #e2001b;
    padding-left: 30px;
    font-size: 16px;
}

.path-sitemap .col-sm-9 .nav.nav-sidebar .nav.subnav li a:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f061';
    margin-right: 10px;
    margin-top: 2px;
    font-size: smaller;
    vertical-align: top;
}


/*===========================
    Overruling bootstrap
============================*/

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
    background: transparent;
    color: #333;
}

.glyphicon.glyphicon-asterisk,
.fa.fa-asterisk {
    color: #e2001b;
    font-size: 8px;
    position: absolute;
    top: 1px;
}


@media print {
    .navbar-brand > img {
        display: block;
    }
    .picture-component h3{
        margin-left: 30px;
    }
    .header-component.with-image {
        display: none;
    }
    .app-form-text-component label{
        width: auto;
        margin-right: 20px;
         page-break-inside: avoid;
    }
    .app-form-text-component .form-input{
         width: 400px;
         page-break-inside: avoid;
        }
    .app-form-text-component{
        margin-left: 50px;
    }
    .app-form-text-component #opmerkingen{width: 650px;}
}

/**********************************************
***translate
***********************************************/

@media screen and (min-width:991px) {
    #lang-selector .wrapper,
    #read .wrapper {
        margin-left: 18px;
    }
    .metamenu-component .country {
        margin-left: -30px!important;
        margin-top: 12px!important;
        color: #777!important;
        font-size: 13.3333px!important;
        padding-top: 23px;
        padding-bottom: 18px;
        pointer-events: none;
        line-height: 28px;
    }
    .metamenu-component #lang-selector .country:before {
        content: '|';
        margin: 0 9px 0 9px;

        text-align: center;
        font-family: 'fontAwesome';
        font-size: 19px;
        left: -3px;
        transition: 1s all ease;
        color: #000;
        position: relative;

    }
    .metamenu-component .country:after {
        font-family: FontAwesome;
        content: '\f0ac';
        display: inline-block;
        margin-left: 5px;
        vertical-align: middle;
        font-size: large;
    }

    .metamenu-component {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    .metamenu-component #lang-selector {
        order: 2;
        flex-order: 2;
        /*        width: 1%;*/
    }

    .metamenu-component .siteMetaMenu {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        display: flexbox;
        order: 1;
        flex-order: 1;
        padding: 20px 10px 0px 0px;
    }

    .siteMetaMenu a {
        display: inline-flex;
        display: inline-flexbox;
        padding: 0;
    }

    .metamenu-component .siteMetaMenu a:first-child {
        order: 2;
        flex-order: 2;
        padding-left: 20px;
        margin-top: 16px;
        min-width: 100px;
    }

    .metamenu-component .siteMetaMenu a:nth-child(2) {
        order: 3;
        flex-order: 3;
        margin-top: 17px;
        min-width: 100px;
    }

    .metamenu-component .siteMetaMenu a:nth-child(1):after {
        font-family: FontAwesome;
        content: '\f0e8';
        display: inline-block;
        margin-left: 5px;
        vertical-align: middle;
        font-size: large;
    }

    .metamenu-component .siteMetaMenu a:nth-child(2):after {
        font-family: FontAwesome;
        content: '\f02f';
        display: inline-block;
        margin-left: 5px;
        vertical-align: middle;
        font-size: large;
    }

    .metamenu-component .siteMetaMenu a:nth-child(2):before {
        content: '|';
        margin: 0 9px 0 9px;
        pointer-events: none;
        text-decoration: none;
    }
    .metamenu-component .siteMetaMenu form {
        order: 1;
        flex-order: 1;
        display: inline-flex;
        min-width: 298px;
    }
}



/* toolbar btn hotfix overlap*/

#kb-login-home > li > a {
    display: none;
}


/*
#lang-selector{
display:none;
}
*/

.path-kennisbank {
    top: 35px !important;
}


.kb-search-box-home {
    /* overwriting the weird generic css */
    top: 0px !important;
    position: relative !important;
}

/* Index fix for long ones */

.kb-home-nav {
    margin-top: 30px !important;
}

.path-kennisbank > div.container > div > div > div.content-box {
    margin-top: 30px;
}

/* menu fixes */

.kb-home-nav ul.dropdown-menu li {
    font-size: 20px;
    font-weight: bold;
    word-wrap: break-word;
    position: relative;
}

.kb-home-nav .dropdown-submenu > .dropdown-menu {
    position: absolute;
    left: 100%;
    /* min-width: 250px; */
    width: 200%;
    min-height: 250px!important;
}

.kb-home-nav .fa.fa-chevron-right,
.kb-home-nav .fa.fa-minus {
    position: absolute;
    left: 100%;
    font-family: FontAwesome;
    color: #2c3e50;
    padding-top: 0.5%;
}

@media screen and (max-width: 767px) {
    .kb-home-nav .dropdown-submenu > .dropdown-menu {

        left: 0%;
    }
}


body.path-over-ons-huis.nav-level3 .app-news-intro-component{
    display:none;
}

ul.top-nav > li:last-child > a:hover, ul.top-nav > li:last-child > a:focus {
    background-color: #0d4291;
    color: white;
}