/* =================================================================================== */
/* == BASE */
html,
body {
    min-height: 100%;
}

body {
    font-weight: 400;
    overflow-x: hidden;
    overflow-y: auto;
    
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
}

/* =================================================================================== */
/* == TYPOGRAPHY */

h1 { font-size: 2.2em; color: #004a94; }
h2 { font-size: 1.8em; color: #004a94; }
h3 { font-size: 1.4em; color: #004a94; }


/* =================================================================================== */
/* == BOOTSTRAP EXTRAS */

.btn-portal {
    background-color: transparant;
    border-color: #fff;
    color: #fff;
    font-weight: bold;
}

.btn-portal:hover {
    background-color: transparant;
    border-color: #fdeb2f;
    color: #fdeb2f;
}

.topless {
    margin-top: 0;
}

.no-padding {
    padding: 0px;
}

.minimal-padding {
    padding: 4px;
}

.langs a { padding: 2px 3px; }
.langs .active { 
    background-color: #5380b4;
}

@media only screen and (min-width : 1200px) {
	.col-lg-2x4 {
		width: 20%;
	}
}

/* =================================================================================== */
/* == HEADER (displays only on XS) */
.header {
    background-color: #0062a5;
    color: white;
    position: relative;
    max-height: 100px;
    z-index: 250;
}

.header .navbar {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
}

.header .sidebar-toggle {
    float: right;
    background-color: transparent;
    background-image: none;
    padding: 15px;
}

.header .sidebar-toggle:focus,
.header .sidebar-toggle:active {
    background: transparent;
}

.header .logo {
    display: block;
    float: left;
    width: 180px;
    margin: 10px 0 10px 15px; 
}

.header a { color: white; }


/* =================================================================================== */
/* == MAIN WRAPPER AND SECTIONS */
.wrapper {
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.wrapper:before,
.wrapper:after {
    content: " ";
    display: table;
}

.wrapper:after {
    clear: both;
}

.content,
.footer {
    margin-left: 240px;
    z-index: 200;
}

@media (max-width: 767px) {
    .content,
    .footer {
        margin-left: 0;
    }
}

.content {
    min-height: 100%;
    background-color: #fff;
    z-index: 100;
}

.content-inner {
    min-height: 250px;
    padding: 20px 40px 50px;
    margin: 0 auto;
    overflow: hidden;
    
    /* TRANSITION EFFECT */
    -webkit-transition: padding 0.3s ease-in-out;
    -moz-transition: padding 0.3s ease-in-out;
    -o-transition: padding 0.3s ease-in-out;
    transition: padding 0.3s ease-in-out;
}

/* XS */
@media only screen and (max-width:767px)
{
    .content-inner { padding: 10px; }
}

/* SM */
@media only screen and (min-width:768px)
{
    .content-inner { padding: 20px 40px 30px; }
}

/* MD */
@media only screen and (min-width:992px)
{
    .content-inner { padding: 20px 40px 30px; }
}

/* LG */
@media only screen and (min-width:1200px)
{
    .content-inner { padding: 20px 80px 50px; }
}

.footer {
    background-color: #f5f5f5;
    padding: 15px;
    color: #444;
    border-top: 1px solid #ccc8c5;
    font-size: 13px;
}

#breadcrumbs {
    margin: 0 auto;
    overflow: hidden;
}



/* =================================================================================== */
/* == SIDEBAR (with css animations to make an 'aside' type of menu) */
.sidebar {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0062a5;
    color: white;
    min-height: 100%;
    width: 240px;
    border-right: 1px solid #ccc8c5; 
    z-index: 150;
    /* TRANSITION EFFECT */
    -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

@media (max-width: 767px) {
    .sidebar {
        -webkit-transform: translate(-240px, 0);
        -ms-transform: translate(-240px, 0);
        -o-transform: translate(-240px, 0);
        transform: translate(-240px, 0);
    }
}

@media (min-width: 768px) {
    .sidebar-collapse .sidebar {
        -webkit-transform: translate(-240px, 0);
        -ms-transform: translate(-240px, 0);
        -o-transform: translate(-240px, 0);
        transform: translate(-240px, 0);
    }
}

@media (max-width: 767px) {
    .sidebar-open .sidebar {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

/* =================================================================================== */
/* == SIDEBAR > MENU */
.sidebar-menu-wrapper {
    background-color: white;
    padding: 10px;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
}

.sidebar-menu > li > a,
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:visited {
    padding: 10px 5px 10px 20px;
    display: block;
    color: #6A9EB6;
    font-weight: 700;
    text-decoration: none;
}

.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:active,
.sidebar-menu > li.active > a:hover,
.sidebar-menu > li.active > a:active {
    color: #0062a5;
    text-decoration: none;
    background-image: url('../img/menu-indicator-full.png');
    background-position: left center;
    background-repeat: no-repeat;
}


.sidebar-menu > li.active > a {
    color: #0062a5;
    background-image: url('../img/menu-indicator-full.png');
    background-position: left center;
    background-repeat: no-repeat;
}

.menuicon {
    font-size: 10px;
    font-weight: 300;
    margin-left: 5px;
}

.sidebar-menu li.active > .submenu {
    display: block;
}

.sidebar-menu .submenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 15px;
}

.sidebar-menu .submenu .submenu {
    padding-left: 15px;
}

.sidebar-menu .submenu > li {
    margin: 0;
}

.sidebar-menu .submenu > li > a {
    padding: 6px 5px 6px 15px;
    display: block;
    text-decoration: none;
    color: #6A9EB6;
    line-height: 1.2em;
}

.sidebar-menu .submenu > li.active > a,
.sidebar-menu .submenu > li > a:hover {
    text-decoration: none;
    color: #0062a5;
}

/* =================================================================================== */
/* == SIDEBAR > OTHER */

.logo {
    max-width: 100%;
    margin: 20px;
    overflow: hidden;
}

.sidebar-inner {
    padding-bottom: 10px;
}

.sidebar-padding {
    padding: 30px 20px 0;
}

.sidebar-meta {
    font-size: 14px;
}

.sidebar-content hr {
    width: 25%;
    margin: 21px 0;
}

.sidebar-content a {
    color: #fff;
}

.sidebar-content a:hover {
    color: #fff;
}


.sidebar-form .zoekveld {
    display: inline-block;
    vertical-align: middle;
    width: 70%;
    border-color: #5380b4;
    background-color: #5380b4;
    color: white;
}

.sidebar-form .zoekknop {
    border-color: #5380b4;
    background-color: transparent;
    color: white;
}

.sidebar-form .zoekveld:focus {
    box-shadow: none;
}

.sidebar-form .zoekveld::-webkit-input-placeholder { color: #0062a5; }
.sidebar-form .zoekveld::-moz-placeholder { color: #0062a5; }
.sidebar-form .zoekveld:-ms-input-placeholder { color: #0062a5; }
.sidebar-form .zoekveld:-moz-placeholder  { color: #0062a5; }


/* =================================================================================== */
/* == BONUS NAVIGATION */
#nav {  
    overflow: hidden;
    margin: 0; 
    padding: 0; 
    border: 0;
    box-shadow: none;
    text-align: left;
}

#nav ul { margin: 0; padding: 0; list-style-type: none; overflow: hidden; }

#nav .submenulvl1 li { padding: 0; margin: 7px 0; background-color: #f5f5f5; overflow: hidden; }
#nav .submenulvl2 li { padding: 3px 0; margin: 6px 20px; overflow: visible; }
#nav .submenulvl3 { padding: 0; padding-left: 15px;  margin: 0 0 0 20px; list-style-type: disc; }
#nav .submenulvl3 li { color: #6e7377; }

.submenulvl1 a 
{ 
    display: block;
    background-color: #f5f5f5; 
    color: #0f5a9d;
    margin: 0;
    padding: 10px 20px;
    text-decoration: none;
}

.submenulvl1 .active > a { 
    background-color: #0062a5; 
    color: white; 
}

.submenulvl1 .active > a:hover,
.submenulvl1 a:hover { 
    background-color: #BBE3F9; 
    color: #0062a5;
}

.submenulvl1 span.active { display: block; padding: 10px 20px; background-color: #0062a5; color: white; }

.submenulvl2 a 
{ 
    display: inline;
    background-color: transparent;
    color: #6e7377;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.submenulvl2 a:hover, 
.submenulvl2 .active > a { background-color: transparent; color: #0062a5; }
.submenulvl2 span.active { display: block; padding: 10px 20px; background-color: transparent; color: #0062a5; }

.submenulvl3 a { padding-left: 0; }

.liststrike {
    display: none;
}

@media only screen and (max-width:767px)
{
    .tussennav { 
        background-color: #e5e5e5;
        border-bottom: 1px solid #0157a2;
        margin: -20px -15px 20px -15px;
        text-align: center;
        clear: both;
        overflow: hidden;
    }
    
    .tussennav button {
        border:0;
    }
    
    .tussennav #nav {
        margin: 0 20px;
        padding-bottom: 10px;
    }    
    
    .toggle-menu {
        background-color: rgba(255, 255, 255, 0.8);
        color: #0157a2;
        padding: 7px 10px;
        text-align: center;
        text-decoration: none;
        float: none;
    }
}  

/* =================================================================================== */
/* == ITEMS */
.filtermeta { margin-bottom: 20px; }
.filtermeta .label { display: inline-block; }

.pagination { margin: 0; }

.item {
    background-color: #BBE3F9;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 15px;
}
.item.light { 
    background-color: #f5f5f5; 
}

.item h1, .item h2, .item h3, .item p { margin: 0; }
.item h1, .item h2, .item h3 { 
    font-weight: 700; 
    margin-bottom: 10px; 
}

.item h1 small { 
    color: #0062a5; 
    line-height: 1.3em; 
    font-weight: 700; 
}

.item h1 a { 
    padding: 5px; 
    display: block; 
    background-color: #0157a2; 
    color: white; 
    text-decoration: none; 
}

.item h3 small { 
    font-weight: 700; 
    color: #000; 
}

.item h3 a { 
    text-decoration: none; 
    color: #0157a2; 
    font-size: 20px; 
}

.item h3 a:hover { 
    text-decoration: none; 
    color: #4a4a4a; 
}

.item .meta { 
    text-align: right; 
    font-size: 12px; 
    color: #4a4a4a; 
}

.itemmeta { 
    color: #4a4a4a; 
    font-size: 12px; 
}

.bg1 { background-color: #BBE3F9; color: #fff; }
.bg2 { background-color: #0062a5; color: #fff; }
.bg3 { background-color: #f1ad14; color: #fff; }
.bg4 { background-color: #e75f20; color: #fff; }
.bg5 { background-color: #2691b0; color: #fff; }
.bg6 { background-color: #b1b1b1; color: #fff; }
.bg7 { background-color: #2790ad; color: #fff; }

.bg1 .inhoud a, .bg2 .inhoud a, .bg3 .inhoud a, .bg4 .inhoud a, .bg5 .inhoud a, .bg6 .inhoud a, .bg7 .inhoud a
{ color: white; }


/* =================================================================================== */
/* == NEWS */
.news h3 { 
    margin-bottom: 0; 
}

.news .date {
    color: #7e8083;
    font-size: 13px;
    margin-top: 0;
    margin-bottom: 10px;
}

/* =================================================================================== */
/* == SUBMENUPAGINA BLOKKEN */

.menublok 
{
    margin-bottom: 30px;
}

.menublok.metwit { background-color: #f5f5f5; }

.floatfix a { display: block; position: relative; color: #4a4a4a; }
.floatfix a span { position: absolute; bottom: 10px; left: 15px; width: 80%; font-size: 20px; }

/* XS */
@media only screen and (max-width:767px)
{
    .menublok { height: auto; margin-bottom: 0; }
    .floatfix  { height: auto; padding: 10px; }
    .floatfix a { height: auto; }
    .floatfix a span { position: static; bottom: auto; left: auto; width: 80%; font-size: 20px; }
}

/* SM */
@media only screen and (min-width:768px)
{
    .menublok, .floatfix, .floatfix a { height: 100px; }
    .floatfix a span { font-size: 25px; }
}

/* MD */
@media only screen and (min-width:992px)
{
    .menublok, .floatfix, .floatfix a { height: 130px; }
    .floatfix a span { font-size: 20px; }
}

/* LG */
@media only screen and (min-width:1200px)
{
    .menublok, .floatfix, .floatfix a { height: 160px; }
    .floatfix a span { font-size: 25px; }
}


/* =================================================================================== */
/* == HOMEPAGE SPECIALS */

#fotoblok {
    height: 300px;
}

.fotoblok-inner {
    height: 400px;
    position: relative;
    background-color: #ccc8c5;
    background-image: url('../img/fotoblok.jpg');
    background-position: center;
    background-size: cover;
}

.carousel-inner {
    height: 400px;
    background-color: transparent;
}

.carousel-inner > .item {
    height: 400px;
    background-color: transparent;
    background-position: center;
    background-size: cover;
}

.slogan {
    padding: 80px 80px 0; 
    font-size: 35px;
    max-width: 700px;
    text-align: right;
    color: #6a9eb6;
    line-height: 1.2em;
    font-weight: 300;
    
    /* TRANSITION EFFECT */
    -webkit-transition: padding 0.3s ease-in-out;
    -moz-transition: padding 0.3s ease-in-out;
    -o-transition: padding 0.3s ease-in-out;
    transition: padding 0.3s ease-in-out;
}

.giantlink {
	display: block; 
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.homeblok-inner {
    padding: 0 80px; 
    
    /* TRANSITION EFFECT */
    -webkit-transition: padding 0.3s ease-in-out;
    -moz-transition: padding 0.3s ease-in-out;
    -o-transition: padding 0.3s ease-in-out;
    transition: padding 0.3s ease-in-out;
}

/* XS */
@media only screen and (max-width:767px)
{
    .homeblok-inner { padding: 0 10px; }
    .slogan { padding: 30px 50px 0 20px; text-align: left; font-size: 30px; line-height: 1.1em; }
}

/* SM */
@media only screen and (min-width:768px)
{
    .homeblok-inner { padding: 0 40px; }
    .slogan { padding: 40px 40px 0; max-width: 470px; }
}

/* MD */
@media only screen and (min-width:992px)
{
    .homeblok-inner { padding: 0 40px; }
    .slogan { padding: 80px 40px 0; max-width: 600px; }
}

/* LG */
@media only screen and (min-width:1200px)
{
    .homeblok-inner { padding: 0 80px; }
    .slogan { padding: 80px 80px 0; max-width: 700px; }
}

.homeblok-inner .item {
    margin-bottom: 0;
}

.homeblok {
	position: relative;
	min-height: 320px;
	overflow: hidden;
	width: 100%;
}

.homeblok.small {
	min-height: 10px;
	width: 100%;
}

.homeblok h2 {
	font-size: 1.4em;
	line-height: 1.1em;
	color: #fff;
}

.homeblok .inhoud p {
	font-size: 1em;
	line-height: 1.2em;
	margin: 10px 0 0 0;
}

.homeblok .icon { 
	height: 100px;
	width: 100%;
	position: absolute; 
	top: 0px;
}

.homeblok .inhoud { 
	position: absolute; 
	top: 105px;
	width: 100%;
}

.homeblok .knop { 
	height: 30px;
	width: 100%;
	position: absolute; 
	bottom: 5px;
}

#eucookielaw {
	position: fixed; 
	width: 100%; 
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFF; 
	color: #111;
	padding: 10px;
	border-top: 2px solid;
	z-index: 999;
}

#eucookielaw p {
	margin: 5px 10px;
}