body, button, select, textarea, input, h2, h3, h4, h5, h6, .h2, .h3, .h4 {
    font-family: 'Titillium Web', 'Times New Roman';
}

h1, .h1, 
.ip-widget-header h1,
.ip-widget-header h2,
.widget-titel,
.infobox .titel,
.modal-title {
    font-family: 'Titillium Web', 'Times New Roman';
}

.site-header .primair-menu {
    font-family: 'Titillium Web', 'Times New Roman';
}

body {  
    background-color: transparent;
    color: #333;
    font-size: 140%;
    font-weight: normal;
}

.main-landingspagina {
    background-color: #f2f2f2;
}

.main-landingspagina .portaal.actueel,
.main-landingspagina .portaal.dossiers,
.main-landingspagina .portaal.zoeken,
.main-overzichtspagina {
    background-color: #fff;
}

.main-detailpagina {
    background-color: #fff;
}

#hoofdinhoud.toon-achtergrondbalk::before {
    background-color: {theme.kleuren.bg-achtergrondbalk};
}



/* titels */
.startpagina .ip-widget-header h2 {
    font-family: 'Titillium Web', 'Times New Roman';
}

h1, .h1, 
.startpagina h1,
.pagina-titel,
.infobox .titel {
    color: #0F7ACB;
}
.startpagina .ip-widget-header h2,
.startpagina > .content h2 {
    color: #0F7ACB;
}

.startpagina > .content h3 {
    color: #333;
}

.startpagina > .content h4 {
    color: #333;
}

.ip-widget-header h1,
.ip-widget-header h2,
.widget-titel,
.modal-title {
    color: #002353;
}

/* linkjes */
.modal-body a,
.startpagina > .content a:not(.button):not(.pip-button):not(.knop):not(.caption) {
    color: #0F7ACB;
}

.modal-body a:hover,
.modal-body a:focus,
.startpagina > .content a:not(.button):not(.pip-button):not(.knop):not(.caption):hover,
.startpagina > .content a:not(.button):not(.pip-button):not(.knop):not(.caption):focus {
    color: inherit;
}

/* standaard widget properties */
.toon-kader,
.toon-item-kader .item > a,
.toon-item-kader .item > .item-container {
    background-color: #fff;
    color: #333;
}

.toon-item-kader.hover-kleur .item > a:hover,
.toon-item-kader.hover-kleur .item > a:focus  {
    background-color: #002353;
    color: #fff;
}

.toon-rand,
.toon-item-rand .item > a,
.toon-item-rand .item > .item-container {
    border-color: #e6e6e6;
}

.toon-item-rand.hover-kleur .item > a:hover,
.toon-item-rand.hover-kleur .item > a:focus {
    border-color: #002353;
    color: #002353;
}

.toon-achtergrond,
.toon-item-achtergrond .item > a,
.toon-item-achtergrond .item > .item-container {
    background-color: #f2f2f2;
    color: #333;
}

.toon-item-achtergrond.hover-kleur .item > a:hover,
.toon-item-achtergrond.hover-kleur .item > a:focus {
    background-color: #0086d6;
    color: #fff !important;
}

.startpagina .toon-item-kader .item > a {
    color: #333 !important;
}
.startpagina .toon-item-achtergrond .item > a {
    color: #333 !important;
}

/* stijlen combinaties */
.stijl-basis {
    background-color: #fff !important;
    color: #333 !important;
}
.stijl-neutraal-licht {
    background-color: #f2f2f2 !important;
    color: #333 !important;
}

.stijl-neutraal-medium {
    background-color: #e6e6e6 !important;
    color: #333 !important;
}

.stijl-neutraal-donker {
    background-color: #d5d5d5 !important;
    color: #333 !important;
}

.stijl-primair {
    background-color: #002353 !important;
    color: #fff !important;
}

.stijl-secundair {
    background-color: #0086d6 !important;
    color: #fff !important;
}

.stijl-accent {
    background-color: #730049 !important;
    color: #fff !important;
}



/* kleur gradaties */
.toptaken .gradaties .item:nth-child(1) a {    
    background-color: #004466;
    color: #fff;
}
.toptaken .gradaties .item:nth-child(2) a {
    background-color: #0D5173;
    color: #fff;
}
.toptaken .gradaties .item:nth-child(3) a {
    background-color: #1A5E80;
    color: #fff;
}
.toptaken .gradaties .item:nth-child(4) a {
    background-color: #266A8C;
    color: #fff;
}
.toptaken .gradaties .item:nth-child(5) a {
    background-color: #337799;
    color: #fff;
}
.toptaken .gradaties .item:nth-child(6) a {
    background-color: #2a6c8e;
    color: #fff;
}




/* button */
.startpagina .button,
.button {
    background-color: #fff;
    border-color: #002353;
    color: #002353;
}

.startpagina .button:hover,
.startpagina .button:focus,
.button:hover,
.button:focus {
    background-color: #002353;
    color: #fff
}

/* loket inlogknoppen */
.loket-inlogknoppen .knop {
    border-color: #d5d5d5;
}

.loket-inlogknoppen .knop:hover,
.loket-inlogknoppen .knop:focus {
    background-color: #0086d6;
    border-color: #0086d6;
    color: #fff !important;
}


/* theme specifieke afwijkingen van standaarden */
.twitterfeed .toon-achtergrond,
.portaal-menu .toon-achtergrond,
.uitgelicht-maxi .toon-achtergrond {
    padding-bottom: 4rem;
    padding-top: 4rem;
}

.toptaken-carousel-balk .toptaken .item .icoon {
    color: #002353;
}

.toptaken .item a:hover .icoon,
.toptaken .item a:focus .icoon {
    color: #fff;
}

.overzichtspagina.cover .inhoud {
    background-color: rgba(0, 170, 255, .97);
    color: #fff;
}

.overzichtspagina.cover .inhoud .pagina-titel {
    color: #fff;
}

.portaal-cta .toon-item-achtergrond .item-container {
    background-color: #002353; 
    color: #fff !important ; 
    opacity: .9
} 

.portaal-cta .toon-item-achtergrond .titel {
    color: #fff; 
}
.servicemenu {
    background-color: #fff;
    color: #333;
    min-height: 56px;
    width: 100%;
}

.servicemenu .row,
.servicemenu .container {
    height: 100%;
}
.servicemenu a {
    color: inherit;
}

.servicemenu .service-icoon {   
    border-left: 1px solid rgba(0,0,0, .2);
    color: #333;
    height: 100%;
    position: relative;
    text-align: center;
    z-index: 2;
}


.servicemenu .service-icoon a {    
    background-color: rgba(0,0,0, .05);    
    display: inline-block;
    height: 100%;
    line-height: 4;
    width: 100%;
}
.servicemenu .service-icoon a:hover,
.servicemenu .service-icoon a:focus,
.servicemenu .service-icoon .active {
    cursor: pointer;
    background-color: rgba(0,0,0, .15);
}


.servicemenu .zoek-icoon {   
    color: #333;
    font-size: 1.2em;
    height: 100%;
    position: relative;
    text-align: center;
    z-index: 2;
}
.servicemenu .zoek-icoon a {      
    display: inline-block;
    height: 100%;
    line-height: 3.4;
    width: 100%;
}
.servicemenu .zoek-icoon a:hover,
.servicemenu .zoek-icoon a:focus,
.servicemenu .zoek-icoon .active {
    cursor: pointer;
    background-color: rgba(0,0,0, .2);
}


.servicemenu .service-content {
    background-color: rgba(0,0,0, .2);
    border-bottom: 1px solid rgba(0,0,0, .2);
    padding-bottom: 3em;
    padding-top: 3em;
}

.servicemenu .service-content.overlay {
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.servicemenu .service-content.animate-show {
  line-height: inherit;
  opacity: 1;
}

.servicemenu .service-content.animate-show.ng-hide-add, 
.servicemenu .service-content.animate-show.ng-hide-remove {
  transition: all linear 0.5s;
}

.servicemenu .service-content.animate-show.ng-hide {
  line-height: 0;
  opacity: 0;
}

.servicemenu .service-content .btn {
    background-color: #0077C9 !important;
    
}

.servicemenu .tekstvlak {
    color: #333;
    font-weight: 300;
}

.servicemenu .tekstvlak h2 {
    margin-top: 0;
}

.servicemenu .tekstvlak p:last-of-type {
    margin-bottom: 0;
}


.servicemenu .zoekveld {
    font-size: 1.2em;
}
.servicemenu .zoekveld form {
    border-bottom: 1px solid rgba(0,0,0,.2);
    margin: 0 1em 1em;
    position: relative;
    text-align: left;
}

.servicemenu .zoekveld input {
    background-color: transparent;
    border: 0;
    color: #000;
    font-size: 1.2em;
    font-weight: 600;
    padding: 0 0 3px 5px;
    width: 80%;
}

.servicemenu .zoekveld input::-webkit-input-placeholder {
    color: rgba(0,0,0,.6);
    font-weight: 300;
}
.servicemenu .zoekveld input:-moz-placeholder {
    color: rgba(0,0,0,.6);
    font-weight: 300;
}
.servicemenu .zoekveld input::-moz-placeholder {
    color: rgba(0,0,0,.6);
    font-weight: 300;
}
.servicemenu .zoekveld input:-ms-input-placeholder {
    color: rgba(0,0,0,.6);
    font-weight: 300;
}

.servicemenu .zoekveld button {
    background-color: transparent;
    border: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.servicemenu .zoekveld .fa {
    color: #333;
}

@media screen and (max-width: 768px) {
    .servicemenu .logolink {
       text-align: center;
    }   
    
    .servicemenu .service-knoppen .container {
        padding: 0;
    }
}

@media screen and (min-width: 769px) {
    .servicemenu {
        height: auto;
    }
    .servicemenu .service-icoon:last-child {    
        border-right: 1px solid rgba(0,0,0, .2);
    }
}


#rs_1 {
    margin-top: 10px;
}
.menubalk {
    background-color: #730049;
    color: #fff;    
    margin-bottom: 0;
}

.menubalk a {
    color: inherit;
}

.menubalk .hoofdmenu ul, 
.menubalk .hoofdmenu li {
    height: 63px;
}

.menubalk .hoofdmenu li {
    border-left: 1px solid rgba(255, 255, 255, .8);
    color: inherit;
    font-size: 1.2em;
    letter-spacing: 1px;
}

.menubalk .hoofdmenu li:not(.zoekveld) {
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
	display: flex;
    overflow: hidden;
    text-align: center;
}

.menubalk .hoofdmenu li:not(.zoekveld) a {
    padding: 20px 0;
    width: 100%;
}

.menubalk .hoofdmenu li:last-of-type {
    border-right: 1px solid rgba(255, 255, 255, .8);
}

.menubalk .hoofdmenu a {
    background-color: #730049;
    border-top: 1px solid transparent;
    color: #fff;
    display: block;
    -webkit-transition: background-color 0.2s linear, color 0.2s linear;
    -moz-transition: background-color 0.2s linear, color 0.2s linear;
    -o-transition: background-color 0.2s linear, color 0.2s linear;
    transition: background-color 0.2s linear, color 0.2s linear;
}

.menubalk .hoofdmenu a:hover,
.menubalk .hoofdmenu a:focus {
    background-color: #ccc;
    color: #333;
    font-weight: 300;
    text-decoration: none;
}

.menubalk .hoofdmenu a.active {
    background-color: #fff;
    border-top: 1px dotted #ccc;
    color: #333;
    font-weight: normal;
    text-decoration: none;
}

.menubalk .hoofdmenu li.zoekveld {
    background-color: #0086d6;
    line-height: 1.6;
}

.menubalk .zoekveld form {
    border-bottom: 1px solid rgba(255,255,255,.8);
    margin: 1.2em 1em .75em;
    position: relative;
    text-align: left;
}

.menubalk .zoekveld input {
    background-color: transparent;
    border: 0;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    padding: 0 0 3px 5px;
    width: 80%;
}

.menubalk .zoekveld input::-webkit-input-placeholder {
    color: rgba(255,255,255,.8);
    font-weight: 300;
}
.menubalk .zoekveld input:-moz-placeholder {
    color: rgba(255,255,255,.8);
    font-weight: 300;
}
.menubalk .zoekveld input::-moz-placeholder {
    color: rgba(255,255,255,.8);
    font-weight: 300;
}
.menubalk .zoekveld input:-ms-input-placeholder {
    color: rgba(255,255,255,.8);
    font-weight: 300;
}

.menubalk .zoekveld button {
    background-color: transparent;
    border: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.menubalk .zoekveld .fa {
    color: #fff;
}

@media screen and (max-width: 767px) {
    .menubalk .hoofdmenu li {
        border-bottom: 1px solid rgba(255, 255, 255, .8);
    }
    .menubalk .hoofdmenu li:nth-child(odd) {
        border-left: 0;
    }
    .menubalk .hoofdmenu {
        border-top: 1px solid #fff;
        padding: 0;
    }
}

.navigatie,
.navigatie > div:not(.item):not(:last-of-type) {
    margin-bottom: 2em;
}
.portaalfooter {
    margin-top: 0;
}

.portaalfooter .contact {
    line-height: 2;
    margin-bottom: 1.5em;
}
.portaalfooter .contact h2 {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 5px;
}
.portaalfooter .contact a {
    color: inherit;
}

.portaalfooter .contact .fa {
    margin-right: 5px;
    text-align: center;
    width: 14px;
}
.portaalfooter .rechts {
    text-align: right;
}
.portaalfooter .sitelinks {
    font-size: 1.1em;
    margin: 1em 0 0;
}

.portaalfooter .sitelinks a {
    color: inherit;
}
.portaalfooter .sitelinks li:not(:first-of-type):before {
    content: " | ";
    padding-right: 10px;
}

@media screen and (min-width: 769px) {
    .portaalfooter .sitelinks {
        font-size: 1.2em;
        margin-top: 2.3em;    
    }
    
    .portaalfooter .contact {
        margin-bottom: 0;
    }
}