/* =========================================================================
Etty Hillesum Lyceum - Algemeen Template - 09-2019
een product van Kommotiv ~ creative communicatie
Copyright © 2019 Kommotiv
post@kommotiv.nl
https://www.kommotiv.nl
	 
Etty Hillesum Lyceum
Ontwikkeld door Kommotiv.nl
========================================================================== */

/* ======================== Algemene Stylen ==============================*/
body {
	font-family: 'Cairo', Arial; 
	font-size: 16px;
	color: #000;
	background-color:#FFF;
	background-position: right top;
    background-repeat: no-repeat;
    font-weight: 300;
}
.sk_mainwrapper {
    overflow: hidden;
}

.debug{
	display: block;
	width:100%;
	height: 25px;
	padding-left:15px;
	background:#e9ecef;
	position: fixed;
	z-index: 1000;
}

.debug p{font-size: 0.9em;}


p {
	color:#444;
	font-size: 16px;
	line-height: 170%;
	font-weight: 300;
}

ol, ol li, ul,  ul li {
	font-family: 'Cairo', Arial; 
	font-size: 15px;
	color: #444;
}

ol {
	color: #ff0000;
	padding-top:20px;
}

h1,h2,h3,h4,h5{
	font-family: 'Cairo', Serif;
	font-weight: 300;
	color: #004d71;
}

h1 {
	font-size: 36px;
	text-align: center;
}

h2 {font-size: 28px;}
h3 {font-size: 25px;}
h4 {font-size: 22px;}
h5 {font-size: 19px;}
h6 {font-size: 16px;}

a {
	color: #0074c8;
}	
a:hover {
	color: #0074c8;
	opacity: 0.7;
	text-decoration: none;
}
a:focus {
    outline: 2px solid #006080;
    outline-offset: -2px;
}
a.readmore {
	font-family: 'blambot_casualregular';
}
a.readmore img {
	height: auto;
    width: 40px;
    margin-left: 10px;
    position: relative;
}
.page-header h1 {
	color: #004d71;
	font-weight: 500;
}
#sk_home .page-header h1 {
	font-weight: 600;
}
a.skipLink {
    background-color: #D8E9F6;
    border: 0px;
    display: block;
    font-size: 1.3em;
    left: -1000em;
    padding: 0.8em;
    position: absolute;
    z-index: 10;
}
a.skipLink:focus {
    left: 50px;
    top: 100px;
    position: absolute;
    z-index: 3000;
}

a.pdf-link:before {
    content: "\f1c1";
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 5px;
}
iframe {
	border:0px;
}
a.btn-primary {
	background:url(../images/button-primary-bg.svg) no-repeat;
	background-size: auto;
	font-family: 'blambot_casualregular', Arial;
	color: white;
	border:0;
	border-radius: 0;
	font-size: 20px;
	padding: 15px 20px 15px 20px;
	background-position: center;
}
a.btn-secondary {
	background:url(../images/button-secondary-bg.svg) no-repeat;
	background-size: auto;
	font-family: 'blambot_casualregular', Arial;
	color: white;
	border:0;
	border-radius: 0;
	font-size: 20px;
	padding: 15px 20px 10px 20px;
	background-position: center;
}
a.btn-primary:hover {
	opacity: 0.7;
	background:url(../images/button-primary-bg.svg) no-repeat;
	background-size: auto;
	background-position: center;
}
a.btn-secondary:hover {
	opacity: 0.7;
	background:url(../images/button-secondary-bg.svg) no-repeat;
	background-size: auto;
	background-position: center;
}
div.kader {
	background:url(../images/kader-bg.svg) no-repeat;
	background-size: 100%;
	color: white;
	width: 100%;
	padding: 60px 60px 50px 60px;
	margin: 20px 50px;
}
div.kader h2, div.kader h3, div.kader h4, div.kader h5, div.kader h6, div.kader p {
	color: white;
}
blockquote {
	background: url(../images/quote-bg.png) no-repeat;
	background-size: 100% 100%;
	padding: 60px 80px 60px 140px;
	position: relative;
	margin: 40px 60px;
}
blockquote:before {
	content: " ";
	background: url(../images/quote-icon.svg) no-repeat;
	display: block;
	color: #004d71;
	position: absolute;
	top: 30px;
	left: 40px;
	width: 60px;
	height: 100%
}

blockquote h3{
	font-family: 'blambot_casualregular'; 
}

blockquote p {
	color: black;
}
@media (max-width: 1200px) {
	blockquote {
		margin: 0;
	}
}
@media (max-width: 767px) {
	blockquote:before {
		top: 70px;
	}
	blockquote {
		margin: 20px 0;
		padding: 80px 60px 80px 140px;
	}
}
@media (max-width: 520px) {
	blockquote {
		padding:100px 40px 120px 80px;
		margin: 20px 0;
	}
	blockquote:before {
		left: 20px;
		top:100px;
		width: 35px;
	}
}
.view{
	display: block;
	position: absolute;
	margin-top: -150px;
}

/* ======================== LOGO ==============================*/
#logo img {
	margin-top: 10px;
	width: 300px;
	height: 100%;
}
#logo {
	z-index: +1000;
	position: absolute;
	top: 5px;
	margin-left:0;
}
@media (max-width: 992px) {
	#logo img {
		margin-top: 17px;
		width: 200px;
		height: auto;
	}
	.navbar-nav {font-size: 18px !important;}
}

/* ======================== HEADER NAVI ======================== */
header {
	height: 90px;
}
header .hoek .hoek-bg {
	position: relative;
	z-index: 2000;
	width: 640px;
	pointer-events: none;
}
header .hoek .hoek-logo {
	position: absolute;
	left: 150px;
    z-index: 3000;
    width: 260px;
    height: auto;
    top: 25px;
}
header .hoek a:hover {
	opacity: 1;
}

@media (max-width: 1330px) {
	header .hoek .hoek-bg {
		width: 460px;
	}
	header .hoek .hoek-logo {
		left: 20px;
	}
}

.top-link {
    position: fixed;
    top: 0;
    padding: 4px;
    padding-right: 2.35rem;
    text-align: right;
    width: 100%;
    background: #fff;
    z-index: 1031;
    font-size: 12px;
}

.top-link a{
	color: #000 !important;	
}

.top-link a:hover{
	color: #017dbf !important;	
}

.top-link .fa {
	font-size: 14px;
	color: #000;
	position: relative;
	z-index: 2021;
	top: 2px;
	left: 4px;
}

.top-link:hover .fa {
	color: #017dbf;
}

.navbar::after {
    content: "";
    background: url(../images/header-bottom.svg) top center no-repeat;
    background-size: auto;
    position: absolute;
    left: 0;
    bottom: -3vw;
    height: 4vw;
    width: 100%;
    background-size: cover;
    z-index: -1;
}

.navbar {
	background-color: white;
	margin: 0;
	padding:1.35rem;
	padding-bottom: 0;
	/* padding-top: 2rem; AANGEPAST */
}
.navbar .navbar-brand img {
	width: 260px;
	height: auto;
}
@media (max-width: 500px) {
	header {
    	height: 75px;
	}
	.navbar .navbar-brand img {
		width: 180px;
	}
	.navbar {
		padding: 1.5rem 1.35rem 0.75rem 1.35rem;
	}
	.navbar::after {
		bottom: -2vw;
		width: 102%;
	}
}
.nav-link {
	font-family: 'Cairo', Arial;
	text-transform: uppercase;
	color: #363636;
	font-weight: 600;
}
.nav-link:hover, .dropdown-menu .nav-item a:hover {
	color: #004d71;
	opacity: 1;
}
.current.active .nav-link {
    color: #004d71;
}
.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: #004d71;
    border: 0;
    border-radius: .25rem;

}
.navbar-collapse {
    flex-grow: inherit;
    /* padding-top: 10px; AANGEPAST */
}
@media (max-width: 1200px){
	.navbar-collapse .nav-item {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
}
.dropdown-menu .nav-item a {
	font-family: 'Cairo', Arial;
	color: #363636;
	font-weight: 600;
	display: block;
	margin-left: 25px;
	position: relative;
}
.dropdown-menu {
	border-radius: 0;
	padding: 10px 15px;
	margin: 0;
	min-width: 15rem;
	border:0;
}
.dropdown-menu li.nav-item {
    padding: 3px 0px;
}
.dropdown-menu .nav-item:before {
	background: url(../images/readmore-grey.png) no-repeat;
	display: inline-block;
	position: absolute;
	content: " ";
	height: 12px;
	width: 20px;
	background-size: 100% 100%;
	margin-right: 5px;
	margin-top: 6px;
	left: 10px;
}
/*.dropdown-menu .nav-item a:hover:before {
	background: url(../images/readmore.png) no-repeat;
	display: inline-block;
	position: relative;
	content: " ";
	height: 12px;
	width: 20px;
	background-size: 100% 100%;
	margin-right: 5px;
}*/
@media (max-width: 1200px) { 
	.dropdown-menu { 
		display: none !important; 
	}
	.dropdown-menu.dropdown-menu-right.cat-drop {
    display: inherit;
}
}
.navbar-search {
	font-size: inherit;
	border:0;
	line-height: inherit;
}
.btn.nav-link.navbar-search .fa.fa-search {
	color: #004d71;
}
.btn.nav-link.navbar-search.collapsed:hover .fa.fa-search {
	color: #004d71;
}
.btn.nav-link.navbar-search.collapsed .fa.fa-search {
	color:#363636;
}
.btn.nav-link.navbar-search .fa {
	color:#363636;
}
.btn.nav-link.navbar-search:hover .fa {
	color: #004d71;
}
.collapse {
	display: none !important;
}
.collapse.show {
	display: block !important;
}
.search-collapse.collapse {
    position: absolute;
    top: 90px;
    right: 0px;
    background:white;
    padding: 20px;
    width: 420px;
    min-height: 90px;
    z-index: 1;
}
.search-collapse.collapsing {
	transition: height .1s ease;
	top: 90px;
    right: 0px;
    background:white;
    padding: 20px;
    position: absolute;
    width: 420px;
	  
}
@media (max-width: 991px) {
	.cat-drop.dropdown-menu {
		display: none !important;
	}
	.search-collapse.collapse, .search-collapse.collapsing  {
		display: none !important;
	}
}
@media (min-width: 576px){
	.nav-item:hover .cat-drop {
	    display: block;
	}
}
@media (max-width:1200px) {
	nav .collapse.show {
		width: 100%
	}
}

.nav-etty-in-beeld {
	margin: 6px 8px auto 8px;
	font-size: 0;
	width: 21px;
	height: 20px;
	background: url(../images/icon-movie-clapper.svg) no-repeat center center;
	background-size: contain;
}
.nav-etty-in-beeld:hover {
	margin: 6px 8px auto 8px;
	font-size: 0;
	width: 21px;
	height: 20px;
	background: url(../images/icon-movie-clapper-hover.svg) no-repeat center center;
	background-size: contain;
}

/* ================================== SLIDER/CAROUSEL/JUMBOTRON =================================== */
.slider {
	position: relative;
	margin-top: 0px;
	overflow: hidden;
}
#slider img {
	width: 100%;
}
#rand-navbar-bottom {
    position: fixed;
    top: 80px;
    left: 0px;
    z-index: 1500;
    width: 100%;
}
#slider .carousel-caption {
    background: url(../images/caption-blok.png) no-repeat;
    background-size: cover;
    width: 35%;
    text-align: left;
    padding: 1.5em 4em 1.5em 8em;
    z-index: 0;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 35%;
    -ms-transform: rotateZ(-5deg);
    -webkit-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg) translateY(-40vw);
    transition: transform 0.8s 0.5s;
    font-size: 18px;
    font-size: 1vw;
}
#slider .active .carousel-caption {
    transform: rotateZ(-5deg) translateY(0);
}
.text-left h1 {
	text-align: left;
}
.text-right h1 {
	text-align: right;
}
.fa {
	color:black;
}
.arrow-left, .arrow-right {
    font-size: 3em;
    color: #004d71;
    font-family: 'blambot_casualregular', Arial;
}
.carousel-item {
    height: 33vw;
}
.carousel-control-next, .carousel-control-prev {
	width: 1%;
	opacity: .3;
}
#slider .achtergrond-afbeelding {
	position: absolute;
	left: 0;
}
.voorgrond {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.6s;
    opacity: 0;
}
#slider img.voorgrond-afbeelding {
    width: 32%;
    height: auto;
    bottom: 0;
    left: 33%;
    position: absolute;
    /*-webkit-animation-name: example 6s ease-in-out 0.6s infinite; 
  	animation: example 6s ease-in-out 0.6s  infinite;*/
}
.carousel-item.active .voorgrond {
    transform: translateX(0);
    opacity: 1;
}
.carousel-caption p.title {
	font-family: 'blambot_casualregular', Arial;
    font-size: 2em;
	line-height: 140%;
	color: #004d71;
	margin: 1rem 0 1rem 2rem;
}
/*
@-webkit-keyframes example {
  0%   {transform: translateX(0) translateY(0);}
  25%  {transform: translateX(15px) translateY(20px);}
  50%  {transform: translateX(20px) translateY(0px);}
  75%  {transform: translateX(-5px) translateY(20px);}
  100% {transform: translateX(0) translateY(0);}
}
@keyframes example {
  0%   {transform: translateX(0) translateY(0);}
  25%  {transform: translateX(15px) translateY(20px);}
  50%  {transform: translateX(20px) translateY(0px);}
  75%  {transform: translateX(-5px) translateY(20px);}
  100% {transform: translateX(0) translateY(0);}
}
*/
#slider-bottom {
   	position: absolute;
	bottom: -5px;
	width: 103%;
	left: -5px;
}
/* ================================== CALL TO ACTION =================================== */
.call-to-action {
    position: absolute;
    left: 10%;
    bottom: 0px;
    max-width: 40%;
    z-index:1000;
}

.call-to-action img {
    width: 100%;
    height: auto;
}
.call-to-action-right {
    position: absolute;
	left: 75%;
	bottom: 10px;
	max-width: 20%;
	z-index: 1000;
}
.call-to-action-right img {
    width: 100%;
    height: auto;
}
.call-to-action-right a:hover {
    display: block;
    transform: rotate(3deg);
    opacity: 1;
}
.layout-ehlgroep7-8 .call-to-action {
    position: absolute;
    left: 75%;
    bottom: 0px;
    max-width: 20%;
    z-index:1000;
}

.button-global.call-to-action {
    left: 10%;
    max-width: 16%;
    transform: rotate(-3deg);
}
.button-global.call-to-action img:hover {
	opacity: 1;
	transform: rotate(-4deg);
    display: block;
}
.button-global.call-to-action a:hover {
  	opacity:1;
}

@media (max-width: 991px) { /* AANGEPAST */
	.call-to-action {
		left: 10px;
		max-width: 30%;
	}
	.button-global.call-to-action {
		max-width: 40%;
		left: 10px;
	}
	.call-to-action-right {
		left: 68%;
		max-width: 30%;
	}
}
@media (max-width: 745px) { /* AANGEPAST */
	.layout-ehlgroep7-8 .call-to-action,
	.call-to-action-right {
    	/*left: 75%;*/
    	/*max-width: 75%;*/
	}
}



/* ================================== KRUIMELPAD  ===================================== */
ul.breadcrumb {
	background: none;
	border-radius: 0;
	padding: 0;
}
ul.breadcrumb li { 
	padding-right: 10px;
}
ul.breadcrumb li:after {
	 content: "\203A";
    padding-left: 5px;
    font-size: 24px;
    line-height: 100%;
    position: relative;
    top: 2px;
    color: #909090;
    font-weight: 200;
}
ul.breadcrumb li:last-child::after {
	visibility: hidden;
}
ul.breadcrumb li a, ul.breadcrumb li  {
	color: #909090;
}




/* ================================== BLOG  ===================================== */
.blog .item-image {
	margin-bottom: 15px;
}
.blog .readmore {
	margin-top: 20px;
}
figcaption {
	color: #666;
	font-size: 14px;
	text-align: center;
	font-weight: 500;
}

figure.pull-right {
    padding-left: 20px;
    padding-bottom: 20px;
    float: right;
}
.item-page h2 {
	font-size: 28px;
	font-weight: 500;
	color: #004d71;
	line-height: 1.5;
}
.item-page h3 {
	font-size: 25px;
	color: #004d71;
	font-weight: 300;
	line-height: 1.5;
}
.item-page h4 {
	font-size: 22px;
	color: #004d71;
	font-weight: 300;
	line-height: 1.5;
}
.item-page h5 {
	font-size: 19px;
	color: #004d71;
	font-weight: 300;
	line-height: 1.5;
}
.item-page h6 {
	font-size: 16px;
	color: #004d71;
	font-weight: 300;
	line-height: 1.5;
}
.item-page p {
	font-size: 16px;
}
.item-page strong {
	font-weight: 600;
}
.item-page ul {
	list-style-type: none;
	padding: 0;
	margin: 0 0 1.75rem 1.5rem;
	font-size: 16px;
}
.itemid-117 .item-page ul {
	margin-left: 0;
}
.itemid-117 .item-page ul ul {
	margin-left: 1.5rem;
}

.item-page ul li {
    font-size: 16px;
    font-weight: 300;
}
.item-page ul li::before {
    content: "\2022";
    color: #004d71;
    display: inline-block;
    width: 1em;
    margin-left: 0;
}
.item-page ul li ul {
	margin:0 0 0 15px;
}
.item-page ul li ul li::before {
	color: #A1D3EA;
}

.itemid-117 .item-page ul li::before,
.itemid-117 .item-page ul li ul li::before {
	display: none;
}

.item-page ol {
	padding: 0;
	margin: 0 0 1.75rem 2.5rem;
	font-size: 16px;
}
.item-page ol li {
	font-size: 16px;
    font-weight: 300;
}
.item-page hr {
	background: url(../images/page-header-bg.png) no-repeat;
	height: 90px;
	background-size: 100%;
	border: 0;
	margin: 1rem 0 0;
}
@media (max-width:992px ) {
	.item-page hr {
		height: 60px;
	}
}
@media (max-width:992px ) {
	.item-page hr {
		height: 50px;
	}
}

.item-page img.float-left {
	margin: .5rem 1.25rem 1rem 0;
}
.item-page img.float-right {
	margin: .5rem 0 1rem 1.25rem;
}
.item-home > .item-image > img {height: auto;}

.item-image img {width: 100%;}

.item-page .item-image {
	width: auto;
	max-width: 33.3333%;
	margin: 0 0 8px 8px;
}


.item-page .item-image img {
	max-width: 100%;
}

/* ================================== BLOG STANDAARD ============================ */
/* Dit is de standaard blog lay-out */
.blog.standard .item  .item-image img {
    width: 100%;
}
.blog.standard .item .page-header {
	margin-bottom: 15px;
}
.blog.standard .item .page-header h2 a,
.blog .item .page-header h2 a {
	color: #004d71;
	font-weight: 500;
	hyphens: auto;
	-webkit-hyphens: auto;
  	-ms-hyphens: auto;
}
.blog.standard .item .introtext {
	margin-bottom: 15px;
}
.blog.standard .item .introtext p {
	font-size: 15px;
	font-weight: 500;
}
.blog.standard .item img.item-bg {
	width: 100%;
}
/* Subcategorie voor de standaard blog lay-out */
.subcategory.page-header h2 {
	color: #004d71;
	font-weight: 500;
	font-size: 36px;
	text-align: center;
}
.blog.standard .item .page-header h3 a {
	color: #004d71;
	font-weight: 500;
	font-size:28px;
}


/* ================================== / BLOG STANDAARD ============================ */

/* ================================== ARTIKEL ============================== */
article {
	margin: 30px 0 200px 0;
}
article .item-page .page-header img, 
article .blog .page-header img {
    width: 100%;
}
#sk_home article {
	margin: 30px 0 50px; 
}
.item-page .page-header.subtitle h2 { 
	font-size: 28px;
	font-weight: 500;
	color:#004d71; 
}
.item-page .page-header.subtitle {
	margin-bottom: 15px;
}
.item-page div[itemprop="articleBody"] {
	margin-bottom: 40px;
	/*min-height: 350px;*/
	min-height: 420px;
}
/* .item-page div[itemprop="articleBody"] ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.item-page div[itemprop="articleBody"] ul li {
	padding: 3px 0px;
	font-size: 15px;
} */
.item-page div[itemprop="articleBody"] ul li a:before {
	background: url(../images/readmore-grey.png) no-repeat;
	display: inline-block;
	position: relative;
	content: " ";
	height: 12px;
	width: 20px;
	background-size: 100% 100%;
	margin-right: 5px;
}
.item-page div[itemprop="articleBody"] ul li a:hover:before {
	background: url(../images/readmore.png) no-repeat;
	display: inline-block;
	position: relative;
	content: " ";
	height: 12px;
	width: 20px;
	background-size: 100% 100%;
	margin-right: 5px;
}

/* Reversed colours */
.itemid-117 .item-page div[itemprop="articleBody"] ul li a:before {
	background-image: url(../images/readmore.png);
}
.itemid-117 .item-page div[itemprop="articleBody"] ul li a:hover:before {
	background-image: url(../images/readmore-grey.png);
}

/* ======================== Under Content ======================== */ 

.wrapper-under-content {
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	background:#FAFAFA;
	padding: 50px 0;
}
.wrapper-under-content .card img {
	width: 100%;
}
.wrapper-under-content .card {
	height: 100%;
}

/* ============= WRAPPER - NIEUWS (homepage nieuwsblok) ================ */
#wrapper-nieuws {
	padding:35px 10px;
	background:#F5F5F5;
}

#wrapper-nieuws h3 {
	text-align: center;
	color:#004d71;
	font-weight: 700;
	font-size: 30px;
	margin-bottom: 25px;
}
.nieuws.newsflash .row .col-sm-12 {
	padding-left: 0px;
	padding-right: 0px;
}
.nieuws.newsflash .card {
	border:0px;
	border-radius: 0;
}
.nieuws.newsflash .newsflash-image {
	padding: 20px;
}
.nieuws.newsflash .newsflash-image img {
	width: 100%;
	height:auto;
}
.nieuws.newsflash .card-body {
	padding: 2.5rem;
}
.nieuws.newsflash .card-body .newsflash-title {
	font-size: 24px;
	color: #004d71;
	font-weight: 600;
}
.nieuws.newsflash .card-body p {
	font-size: 17px;
	padding-right: 150px;
}
.nieuws.newsflash .card-body .readmore {
	font-size: 15px;
}
.nieuws.newsflash .readmore.meer-nieuws {
    padding-right: 50px;
    font-size: 18px;
}
.nieuws.newsflash .card.mb-4.links {
	margin-right: 100px;
	background: url(../images/card-bg-links.svg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: cover;
}
.nieuws.newsflash .card.mb-4.rechts {
	margin-left: 100px;
	background: url(../images/card-bg-rechts.svg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
}
.nieuws.newsflash .card.mb-4.rechts .card-body {
	padding-left: 100px;
}
.nieuws.newsflash .card.mb-4.links .card-body {
	padding-right: 100px;
}
@media (max-width: 991px) {
	.nieuws.newsflash .card.mb-4.links .card-body {
		padding-right: inherit;
	}
}
@media (max-width: 767px) {
	.nieuws.newsflash .card.mb-4.links {
		margin-right:20px;
	}
	.nieuws.newsflash .card.mb-4.links  .newsflash-image {
		width: 80%;
		padding: 2.5em 0 0 2.5em;
	}
	.nieuws.newsflash .card.mb-4.rechts {
		margin-left:20px;
	}
	.nieuws.newsflash .card.mb-4.rechts  .newsflash-image {
		width: 100%;
		padding: 0 2.5em 2.5em 100px;
		
	}
	.nieuws.newsflash .card.mb-4.rechts .card-body p {
		padding-right: 0px;
	}
	.nieuws.newsflash .card.mb-4.rechts {
		margin-left:20px;
	}

}
@media (max-width: 575px) {
	.nieuws.newsflash .card.mb-4.links {
		background:#fff;
		margin-right: 0;
	}
	.nieuws.newsflash .card.mb-4.links .card-body p {
		padding-right: 0;
	}
	.nieuws.newsflash .card.mb-4.links .card-body {
		padding-right: 2.5rem;
	}
	.nieuws.newsflash .card.mb-4.rechts {
		background:#fff;
		margin-left: 0;
	}
	.nieuws.newsflash .card.mb-4.rechts .card-body p {
		padding-left: 0;
	}
	.nieuws.newsflash .card.mb-4.rechts .card-body {
		padding-left: 2.5rem;
	}
	.nieuws.newsflash .card.mb-4.rechts .newsflash-image {
		width: 80%;
		padding:0 0 2.5em 2.5em;
	}
}




/* ======================== Footer ========================= */ 
footer {
	position: relative;
	background: #004d71;
	text-align: left;
	padding: 35px 0 50px 0;
	margin-top: 100px;
}
#sk_home .footer-rand {
    background: #F5F5F5;
}
.footer-rand img {
    position: absolute;
    width: 106%;
    top: -105px;
}
footer p { 
	color: #FFF;
}

footer a, footer a.visited {
	color: #FFF !important;
}

footer a:hover, footer a:active {
	color: #FFF !important;
	opacity: 0.7;
	text-decoration: none;
}

footer h3 {
	padding-bottom: 15px;
	color: #fff;
	font-size: 18px;
	font-weight: 300;
	text-transform: uppercase;
}
footer ul {
	list-style-type: none;
	padding: 0;
	margin:0 0 1.75rem;
	font-size: 15px;
}
footer ul li {
	padding-left: 1em; 
  	text-indent: -.5em;
  	font-size: 15px;
  	font-weight: 300;
}
footer ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #A1D3EA;
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: 0;
}

footer ul > li > ul {
    margin-bottom: 0;
}

.social .fa, footer .fa {
	padding: 0 10px 0 0;
	color: #FFF;
	font-size: 1.5em;
}
.fa-at {
	font-size:1.2em;
}
@media (max-width: 992px) {
	.footer-rand img {
    	top: -80px;
	}
}
@media (max-width: 767px) {
	.footer-rand img {
    	top: -30px;
	}
}


/* ======================== HOMEPAGE BLOG BLOKKEN ======================== */ 
.homepage.blog .items-leading .leading-0 {
    text-align: center;
    margin:20px auto 40px;
}
.homepage.blog .items-leading .leading-0 p {
	color: #363636;
	font-size: 18px;
	font-weight: 500;
}
.homepage.blog .scrolldown {
	width: 65px;
    text-align: center;
    display: block;
    margin: 0 auto 50px auto;
    cursor: pointer;
}
.items-row { 	
	margin-bottom:30px;
	position: relative;
}
#homepage-blog-cards-top {
    position: absolute;
    top: -25px;
    width: 100%;
    left: 0px;
    z-index: 10; 
}
.homepage.blog .card {
	border: 0;
	width: 33.33333%;
}
.homepage.blog .card .card-footer {
	/*background: url(../images/homepage-card-footer.svg);*/
	border-top:0px;
	color: white;
	position: absolute;
	width: 100%;
	bottom: 0px;
	pointer-events: none;
	background:#004d71;
	z-index: 2;
}
#card-footer-top {
    position: absolute;
    left: 0px;
    top: -.75rem;
    width: 101%;
}
#card-footer-bottom {
    position: absolute;
    bottom: -.75rem;
    left: 0;
    width: 101%;
    z-index: -5;
}
.homepage.blog .card .card-footer h2 {
	color: white;
	text-align: center;
	font-weight: 500;
	margin-bottom: 0;
    position: relative;
}
.homepage.blog .card .card-footer h2 a {
	color: white;
}
.card-img-top {
	pointer-events: none;
	border-radius:0;
}
.card-img-overlay {
	position: absolute;
	top: inherit;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0rem;
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: height .5s ease;
	background-color: #004d71;
	z-index: 5;
}

.card-img-overlay .overlay-item {
	width: 100%;
}
.homepage.blog .card:hover .card-img-overlay {
	height: 100%;
	padding: 2rem;
}

.card-img-overlay h2 a {
	color: white;
	font-weight: 600;
}
.homepage.blog .card .card-img-overlay h2, .homepage.blog .card-img-overlay h2 a {
	color: white;
	font-weight: 600;
}
.homepage.blog .card .card-img-overlay p {
	color: white;
	font-weight: 400;
	font-size: 16px;
}
.homepage.blog .card .card-img-overlay a.readmore {
	color: white;
}
.homepage.blog .card .card-img-overlay {
	text-align: center;
}
@media (min-width: 2000px) {
	#homepage-blog-cards-top {
		top: -35px;
	}
}
@media (max-width: 1360px) {
	#homepage-blog-cards-top {
		top: -15px;
	}
}
@media (max-width: 991px) {
	.homepage.blog .card {
		width: 50%;
	}
	#homepage-blog-cards-top {
		top: -5px;
	}
}
@media (max-width: 767px) {
	.homepage.blog .card {
		width: 100%;
	}
}
/* ======================== PRAKTISCH PAGINA ======================== */ 
.blog.praktisch .accordion  {
    margin: 20px 0 30px;
}
.blog.praktisch .accordion .page-header {
	margin-top: 30px;
	margin-bottom: 15px;
}
.blog.praktisch .accordion .page-header:first-child {
	margin-top: 10px;
}
.blog.praktisch .categorie-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.blog.praktisch .accordion .introtext p {
	font-weight: 500;
	font-size: 16px;
}
.blog.praktisch .accordion .card {
    margin-bottom: 10px;
    border:0px;
    overflow: visible;
}
.blog.praktisch .accordion .card .card-header {
	border:0px;
	background-color: #f6f6f6;
	padding: 0;
}
.blog.praktisch .accordion .card .card-header a h3 {
	color: #004d71;
	font-size: 20px;
	font-weight: 500;
}
.blog.praktisch .accordion .card .card-header a {
	background: url(../images/readmore.png) 1.5% center no-repeat;
	background-size: 25px;
	font-size: 22px;
	display: block;
	padding: 20px 20px 20px 55px;
}
.blog.praktisch .accordion .card .card-header a:hover,
.blog.praktisch .accordion .card .card-header a:focus {
	background: url(../images/readmore-hover.png) 2% center no-repeat;
	background-size: 15px;
}
.blog.praktisch .accordion .card .card-header a:hover h3,
.blog.praktisch .accordion .card .card-header a:focus h3 {
	color: #444;
}
/* ======================== /PRAKTISCH PAGINA ======================== */
/* ======================== FAQ PAGINA ======================== */ 
.blog.faq .accordion  {
    margin: 20px 0 30px;
}
.blog.faq .accordion .page-header {
	margin-top: 30px;
	margin-bottom: 15px;
}
.blog.faq .accordion .page-header:first-child {
	margin-top: 10px;
}
.blog.faq .categorie-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.blog.faq .accordion .introtext p {
	font-weight: 500;
	font-size: 16px;
}
.blog.faq .accordion .card {
    margin-bottom: 10px;
    border:0px;
    overflow: visible;
}
.blog.faq .accordion .card .card-header {
	border:0px;
	background-color: #f6f6f6;
	padding: 0;
}
.blog.faq .accordion .card .card-header a h3 {
	color: #004d71;
	font-size: 20px;
	font-weight: 500;
}
.blog.faq .accordion .card .card-header a {
	background: url(../images/readmore.png) 1.5% center no-repeat;
	background-size: 25px;
	font-size: 22px;
	display: block;
	padding: 20px 20px 20px 55px;
}
.blog.faq .accordion .card .card-header a:hover,
.blog.faq .accordion .card .card-header a:focus {
	background: url(../images/readmore-hover.png) 2% center no-repeat;
	background-size: 15px;
}
.blog.faq .accordion .card .card-header a:hover h3,
.blog.faq .accordion .card .card-header a:focus h3 {
	color: #444;
}
/* ======================== /FAQ PAGINA ======================== */   

/* ========================== GROEP 7/8  ============================ */

/* Groep 7/8 Blog */
#sk_instromers.view-category {
	background:#f5f5f5;
}
#sk_instromers .slider img {
	width: 100%;
	z-index: -1;
	position: relative;
}
#sk_instromers .blog.groep-78 {
    margin-top: -50px;
}
#sk_instromers .description {
	background:url(../images/groep-78-description-bg.png) no-repeat;
	background-size: 100% 100%;
	padding: 75px 0;
	margin-bottom: 50px;
}
#sk_instromers .description .container {
	position: relative;
}
/*ORG
#sk_instromers .description .titel {
	width: 250px;
	height: auto;
	position: absolute;
	left: 0px;
	top: -150px;
	z-index: -1;
}*/

#sk_instromers .description .titel {
	width: 290px;
	height: auto;
	position: relative;
	left: 0px;
	top: -40px;
	z-index: 1;
	transform: rotate(-6deg);
}


#sk_instromers .description .category-desc p {
	color: white;
	font-size: 18px;
	padding-right: 20px;
}
#sk_instromers .description .avPlayerWrapper.avVideo {
	background:url(../images/video-bg.png) no-repeat;
	background-size: 100% 100%;
	padding: 20px;
}
#sk_instromers .groep-78-buttons img {
    width: 100%;
}
@media (max-width: 1200px) {
	#sk_instromers .description .titel {
		/*top:-28%;*/
	}
}
@media (max-width: 991px) {
	#sk_instromers .description .titel {
		/*top:-18%;*/
		width: 200px;
	}
}
@media (max-width: 767px) {
	#sk_instromers .description .titel {
		/*top:-14%;*/
		width: 190px;
	}
}
@media (max-width: 575px) {
	#sk_instromers .description .titel {
		/*top:-11%;*/
		width: 175px;
		z-index: 0;
	}
}

.blog.groep-78 .subtitel h2 {
	font-family: 'CF Green Monster', Arial;
	text-transform: uppercase;
	color: #D3232B;
	font-weight: 600;
	text-align: center;
	padding: 40px 0 10px 0;
}
.blog.groep-78 .item .odd {
	background:url(../images/groep-78-blog-item-bg-odd.png) no-repeat;
	background-size: 100% 100%;
}
.blog.groep-78 .item .odd .pull-none {
	position: relative;
}
.blog.groep-78 .item .odd .pull-none img {
	padding-left: 1px;
	padding-right: 1px;
}
.blog.groep-78 .item .odd .pull-none.item-image img.transparent {
    position: absolute;
    width: 100% !important;
    height: 100%;
    padding: 0;
    pointer-events: none;
}
.blog.groep-78 .item .odd .col-md-9 {
    display: flex;
    flex-wrap: wrap;
}
.blog.groep-78 .item .odd .inner {
	background:url(../images/groep-78-blog-item-inner-bg-odd.png) no-repeat;
	width: 100%;
	background-size: 100% 100%;
	padding:30px;
}
.blog.groep-78 .item .even {
	background:url(../images/groep-78-blog-item-bg-even.png) no-repeat;
	background-size: 100% 100%;
}
.blog.groep-78 .item .even .pull-none {
	position: relative;
}
.blog.groep-78 .item .even .pull-none img {
	padding-left: 1px;
	padding-right: 1px;
	margin-top: 30px;
}
.blog.groep-78 .item .even .pull-none.item-image img.transparent {
    position: absolute;
    width: 100% !important;
    height: 100%;
    padding:0;
    pointer-events: none;
}
.blog.groep-78 .item .even .col-md-9 {
    display: flex;
    flex-wrap: wrap;
}
.blog.groep-78 .item .even .inner {
	width: 100%;
	padding:30px;
}
.blog.groep-78 .item .odd, .blog.groep-78 .item .even {
	padding:30px 30px 40px 30px;
}
.blog.groep-78 .item .datum {
	font-family: 'CF Green Monster', Arial;
	color: black;
	font-weight: 100;
	margin-bottom: 0px;
	font-size: 16px;
}
.blog.groep-78 .item .page-header h2 {
	font-family: 'CF Green Monster', Arial;
	color: black;
}
.blog.groep-78 .item .page-header h2 {
	margin-bottom: 0;
}
.blog.groep-78 .item p {
	color: black;
	font-size: 18px;
}
.blog.groep-78 .item .odd .page-header h2,
.blog.groep-78 .item .odd p {
	color: white;
}
@media (max-width: 767px) {
	.blog.groep-78 .item .inner {
		margin-bottom:70px;
	}
	.blog.groep-78 .item .pull-none {
		margin: inherit;
	}
}

/* Module Homepage */
#wrapper-groep78 {
	background:#b2def1;
	position: relative;
	margin-top: 100px;
}
#wrapper-groep78 .col-2.header {
    position: absolute;
    z-index: 200;
}
#wrapper-groep78 .col-2.header svg {
	width: 100%;
	height: auto;
}
#wrapper-groep78 figure.newsflash-image {
    margin: 0;
}
#wrapper-groep78 .newsflash-image img {
	width: 100%;
}
#wrapper-groep78 .inner {
	padding: 100px 100px 0;
}
#wrapper-groep78 .inner p {
	color: #000;
	font-size: 18px;
}
#wrapper-groep78 a.readmore {
	color: #D42022;
}


@media (max-width: 1200px) {
	#wrapper-groep78 .inner {
   		padding: 0px 100px 0 100px;
	}
}
@media (max-width: 992px) {
	#wrapper-groep78 .inner {
   		padding: 0px 80px 0 100px;
	}
}
@media (max-width: 930px) {
	#wrapper-groep78 .inner {
		padding:15px 80px 15px 20px;
	}
}
@media (max-width: 575px) {
	#wrapper-groep78 .inner {
		padding:15px 30px;
	}
	#wrapper-groep78 .col-2.header {
	    position: relative;
	    padding-top: 10px;
	    flex: 0 0 25%;
	    max-width: 25%;
	}
	#wrapper-groep78 .newsflash-image img {
	    width: 115%;
	    left: -50px;
	    position: relative;
	}
}

.groep78-top-blokje {
    width: 200px;
    height: auto;
    position: absolute;
    top: -5.332vw;
    top: calc(-2.666vw - 60px);
    left: 100px;
}

.groep78-top {
    position: absolute;
    width: 100%;
    top: -2.666vw;
    height: auto;
    min-width: 1190px;
}

.groep78-bottom {
	width: 100%;
    min-width: 1190px;
    background: #f5f5f5;
}
@media (max-width: 1400px) {
	.groep78-top-blokje {
	    top: -80px;
	    top: calc(-2.666vw - 60px);
	}
}


@media (max-width: 992px) {
	.groep78-top-blokje {
	    top: -85px;
	}
	.groep78-top {
	    top: -25px;
	}

	.groep78-bottom {
	    bottom: -62px;
	}
	   
}


/* ========================== /GROEP 7/8  ============================ */

/* ========================== QUOTES/SUCCESVERHALEN  ============================ */
.quote-rand {
    height: 350px;
}
#wrapper-succesverhalen, #wrapper-werken-bij {
	margin-bottom: 50px;
}
#wrapper-succesverhalen h4, #wrapper-werken-bij h4 {
	font-family: 'blambot_casualregular', serif;
	color: #004d71;
	font-size: 26px;
}
#wrapper-succesverhalen p.quote-auteur, #wrapper-werken-bij p.quote-auteur {
	color:#444;
}
#wrapper-succesverhalen p, #wrapper-werken-bij p {
	color: #000;
	font-weight: 300;
	line-height: 170%;
	font-size: 18px;
}
#wrapper-werken-bij p, #wrapper-werken-bij p.quote-auteur, #wrapper-werken-bij h4 {
	padding-right: 50px;
}
#wrapper-succesverhalen .carousel-item, #wrapper-werken-bij .carousel-item {
	height: inherit;
}
@media (max-width: 575px) {
	#wrapper-succesverhalen, #wrapper-werken-bij {
		padding: 0 15px;
	}
	#wrapper-succesverhalen .quoter, #wrapper-werken-bij .quoter {
		width: auto !important;
		height: 250px;
		margin: 0 auto 20px auto;

	}
	.carousel-control-next, .carousel-control-prev {
	    bottom: inherit;
	    top: 80px;
	}
}
/* Succesverhalen artikel */
.succesverhaal-page .quote-info-wrapper img {
    width: 100%;
}
.succesverhaal-page .page-header.subtitle h2 {
    font-family: 'blambot_casualregular', serif;
}


/* ======================== Slider animatie ======================== */ 
.testdiv {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    transform: translateX(-100%);
    transition: all 0.6s;
}

.testplaatje {
    width: 200px;
    height: 100px;
    background: #5be0e0;
    top: 50px;
    left: 45%;
    position: relative;
}

.carousel-item.active .testdiv {
    transform: translateX(0);
}

/* ========================= ZOEKRESULTATEN ======================== */
article .finder .page-header img {
	width: 100%;
}
article .finder {
	color:#444;
}
.search-results {
    margin: 20px 0;
}
.search-result {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
.search-result a {
    display: block;
}
.search-result h2 {
    margin: 0 0 4px 0 !important;
    font-size: 22px;
    font-weight: 500;
    color: #004d71;
    line-height: 170%;
}
.search-result .result-url {
    font-size: 13px;
    font-weight: 500;
    color: #004d71;
    margin: 0 0 4px 0;
    line-height: 170%;
}
.search-results .result-text {
    margin-bottom: 20px;
    line-height: 170%;
}
#finder-search .inputbox, .form-search input.search-query {
	height: 40px;
	border:1px solid #909090;
	width: 300px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 0;
}
#finder-search .inputbox:focus {
	border:1px solid #4c9ed1;
}
.btn-search {
	background:#004d71;
	color: white;
	font-family: 'blambot_casualregular';
	border-radius: 0;
	height: 40px;
	border:0;
	vertical-align: bottom;
}
.btn-search:hover {
	background:#4c9ed1;
}
.form-search input.search-query {
	width: 300px;
	margin-right: 3px;
}
.form-search input.search-query:focus {
	border-color:#4c9ed1; 
}
#collapsibleNavbar .form-inline.form-search {
	margin-top: 10px;
	width: 380px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}
@media (max-width: 767px) {
	.form-search input.search-query {
		width: 200px;
	}
	#collapsibleNavbar .form-inline.form-search {
		width: 280px;
	}
}

/* ========================= /ZOEKRESULTATEN ======================== */

/* ========================= SCROLL TO TOP ========================= */
.scroll-up {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border: 0px;
    border-radius: 0;
    background: #f1f1f1;
    color: #004d71;
    width: 65px;
    padding:.75rem .75rem .375rem;
    z-index: 2000;
}
.scroll-up:hover {
	background-color: #f1f1f1;
	border: 0px;
}
.scroll-up:hover img, .scroll-up:hover span {
	opacity:0.7;
	color: #004d71;
}
.scroll-up img, .scroll-up span {
	display: block;
}
.scroll-up img {
	width: 20px;
	margin: auto;
}
/* ========================= /SCROLL TO TOP ========================= */

/* ========================= FORMULIEREN ============================ */
#userForm .form-control {
	border-radius: 0;
}
#userForm .btn {
	background: #004d71;
	color: white;
	font-family: 'blambot_casualregular';
	border-radius: 0;
	height: 40px;
	border: 0;
	vertical-align: bottom;
	padding:.375rem .75rem;
	font-size:1rem;
	line-height:1.5;
}
#userForm .btn:hover {
	background: #4c9ed1;
}
#userForm small {
	display: block;
}
.rsform-reset-button.btn.btn-danger{
	background-color: #bd3026 !important;
}
.rsform-reset-button.btn.btn-danger:hover {
	background-color: #e05a51 !important;
}
.formRed {
	color: #bd3026;
}

/* ========================= /FORMULIEREN ============================ */

/* ========================= KAART MODULE =========================== */

#wrapper-kaart {
    margin-bottom: -80px;
    margin-top: -150px;

}

/* ========================= /KAART MODULE =========================== */

/* ========================= SOCIAL MEDIA STREAM ========================= */
/* voor als de fotos niet viekant moeten zijn
.sboard .sb-item .sb-thumb {
    height: 0;
    padding-bottom: 70%;
    overflow: hidden;
}

.sboard.sb-default .sb-item .sb-container .sb-thumb img {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
*/

/* ========================= /SOCIAL MEDIA STREAM ========================= */

/* ========================= FRONTEND BEHEER ============================== */

/*************************** Frontend Editor **********************/
#adminForm #jform_catid_chzn, 
#adminForm #jform_tags_chzn,
#adminForm #jform_state_chzn,
#adminForm #jform_featured,
#adminForm #jform_publish_up_btn,
#adminForm #jform_publish_down_btn,
#adminForm #jform_publish_down-lbl,
#adminForm #jform_access_chzn,
#adminForm #jform_language_chzn {
  width: 250px !important;
}
#adminForm #jform_tags-lbl,
#adminForm #jform_created_by_alias-lbl,
#adminForm #jform_state-lbl,
#adminForm #jform_featured-lbl,
#adminForm #jform_publish_up-lbl,
#adminForm #jform_publish_down-lbl,
#adminForm #jform_access-lbl {
  display: block !important;
}
#adminForm fieldset #com-content-formTabs li a,
#adminForm label {
    display: block !important;
}
#adminForm fieldset #com-content-formTabs li a {
display: block !important;
padding: 10px 15px;
border: 1px solid #ccc;
    border-bottom-color: rgb(204, 204, 204);
    border-bottom-style: solid;
    border-bottom-width: 1px;
border-bottom: 0px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
margin-right: 10px;
}
#adminForm fieldset #com-content-formTabs li a.active {
	font-weight: bold;
}
#adminForm #com-content-formContent, #adminForm .btn-toolbar {
  padding: 0 15px;
}
#adminForm .btn-toolbar {
  margin-top: 20px;
}
.dropbtn {
  border-radius: 0px;
}
.dropbtn:hover, .dropbtn:focus {
    background: white;
  color: #E61500;
  border: 1px solid #DDDDDD;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 230px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding-bottom: 5px;
}
.dropdown-content a {
    color: black;
    padding: 8px 10px;
    text-decoration: none;
    display: block;
}
.show {
	display: block;
}
#adminForm .nav.nav-tabs li::before {
    display: none;
}
#sk_beheer article, #sk_plaats-nieuwsbericht article  {
	margin-top: 150px;
}

/* ========================= /FRONTEND BEHEER ============================== */

/* ========================= LOGIN MENU OP PAGINA ========================= */
#sk_loginmenu .item-page ul li::before {
    display: none;
}
#sk_loginmenu .item-page ul {
	margin: 0;
}
@media (min-width: 1200px) {
	.navbar-nav .nav-item.item-189 {
		display: none;
	}
}
@media (max-width: 1199px) {
	.navbar-nav .nav-item.item-189 {
		font-size: 0px;
	}
	.navbar-nav .nav-item.item-189 .nav-link:before {
		font-size: 15px;
	}
}
/* ========================= LOGIN MENU OP PAGINA ========================= */
/* ==================== Missie/Visie ==================== */
.meisje-verrekijker {
    width: 200px;
}
.missie-visie.custom {
    margin-bottom: -150px;
}
.missie-visie ul li {
    min-height: 70px;
    margin-bottom: 30px;
} 
.missie-visie ul { 
    margin-top: 40px;
    margin-left: 0px; 
    list-style:none; 
} 
.missie-visie li::before { 
    content: " " !important;
    background-image: url('../images/bullet.png') !important;
    background-size: 70px auto;
    background-repeat: no-repeat;
    width: 70px !important;
    height: 70px;
    position: absolute;
    left: -80px;
}
.missie-visie li {
    color: #004d71;
    font-size: 20px !important;
    padding-right: 250px;
    margin-left: 70px;
    position: relative;
}
@media (max-width: 767px) {
    .missie-visie li {
        padding-right: 0;
    }
}

/* ==================== Werken bij ==================== */
.boven-werken-bij {
	margin-bottom: 40px;
}

.item-page p a.readmore{
	text-decoration: none;
}

.item-page div[itemprop="articleBody"] .carousel-inner {
	margin-bottom: 20px;
    padding: 40px;
}
.item-page div[itemprop="articleBody"] .carousel-control-prev {
	-ms-flex-align: left;
    align-items: left;
    -ms-flex-pack: left;
    justify-content: left;
    text-align: left;
}
.item-page div[itemprop="articleBody"] .carousel-control-next {
	-ms-flex-align: right;
    align-items: right;
    -ms-flex-pack: right;
    justify-content: right;
    text-align: right;
}
.youtube-container {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
	margin-top: 10px;
	margin-bottom: 10px;
}
.youtube-container iframe.ytplayer {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/* Social Media Knop */
@media (max-width: 1199px){
	.socialmedia_button_position{
		display: none;
	}
}
.socialmedia_button_position{
	position:absolute;
	top: 50vh;
	z-index: 100;
}
.socialmedia_button{
	position: fixed;
}
@media (min-width: 1200px) {
	.homepage.blog .items-leading .leading-0 {
		padding: 0 50px;
	}
}

/* =================== Inloggen button voor leerlingen en medewerkers ============= */
.inloggen-uitklap {
	position: fixed;
	top: 120px;
	right: -65px;
}
.inloggen-uitklap  .inloggen-button {
	outline: none;
	opacity: 1;
}
.inloggen-uitklap  .inloggen-button:focus:after {
    content: "";
    outline: 2px solid #006080;
    outline-offset: -2px;
    position: absolute;
    width: 100%;
    height: 65px;
    top: 5px;
    left: 15px;
}
.inloggen-uitklapmenu {
    width: 225px;
    position: absolute;
    top: 45px;
}
.inloggen-uitklapmenu:after {
	content: "";
	background:url(../images/inloggen-uitklapmenu.png) no-repeat;
	background-size: 100% 100%;
    width: 225px;
    height: 100%;
    min-height: 25px;
    position: absolute;
    top: 0;
    left: 5px;
    z-index: -1;
}
.inloggen-uitklapmenu ul {
    padding: 25px 30px 30px 40px;
    margin: 0;
}

.inloggen-uitklapmenu li {
	display: block;
	pointer-events: all;
}

.inloggen-uitklapmenu li a {
	display: block;
	padding: 5px 15px;
	font-size: 18px;
}
.inloggen-uitklapmenu li a:hover,
.inloggen-uitklapmenu li a:focus {
	background: rgba(0, 0, 0, 0.15);
	opacity: 1;
}

i.inloggen-button-icoon {
	display: inline-block;
    width: 11px;
    height: 13px;
    margin-right: 8px;
    background: url(../images/inloggen-button-icoon.svg) no-repeat;
    background-size: contain;
}

.item-page ul li.nav-item::before {
	content: none;
	display: none;
}