@charset "utf-8";
/* VISUAL HOME */
.visual-home {
	position: relative;
	margin-bottom: 55px;
	margin-bottom: 0px; /* tbv blok landingspagina's */
	width:100%;
	min-height: -moz-calc(100vh - 70px); /* Firefox */
	min-height: -webkit-calc(100vh - 70px); /* WebKit */
	min-height: calc(100vh - 70px); /* Standard */
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-position: center;
	background-position: top;
	background-color: #261f5b;
	overflow: hidden;
}

.visual-home.static {
background-image: url("../images/home/home-commercial1-small.jpg");
}
.visual-home.static.variant {
	background-image: url("../images/home/home-commercial2-small.jpg");
}
@media only screen and (min-width: 1024px) {
	.visual-home.static {
		background-image: url("../images/home/home-commercial1-medium.jpg")
	}
	.visual-home.static.variant {
		background-image: url("../images/home/home-commercial2-medium.jpg")
	}
}
@media only screen and (min-width: 1400px) {
	.visual-home.static {
		background-image: url("../images/home/home-commercial1-large.jpg");
	}
	.visual-home.static.variant {
		background-image: url("../images/home/home-commercial2-large.jpg");
	}
}

@media only screen and (min-width: 1280px) {
	.vertical-align-middle {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		/* align vertical */
		-webkit-box-align: center;
		-moz-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
}
.video {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: none; /* our video */
	background-position: center center;
	background-size: contain;
	object-fit: cover; /*cover video background */
	margin-top: 0px;
}
/*
KOLOMMEN op HOME
*/
.visual-home-kolom-links,
.visual-home-kolom-rechts {
	padding-left: 20px;
	padding-right: 20px;
}
.visual-home-kolom-links {
	padding-top: 300px;
	padding-bottom: 30px;
	position: relative;
}
.visual-home-kolom-rechts {
	padding-bottom: 80px;
}
@media only screen and (min-width: 1024px) {
	.visual-home-kolom-links {
		float: left;
		width: 45%;
		padding-left: 5%;
		padding-right: 0%;
		padding-top: 35%;
	}
	.visual-home-kolom-rechts {
		float: right;
		width: 45%;
		padding-left: 0%;
		padding-right: 5%;
		padding-top: 35%;
	}
}
@media only screen and (min-width: 1280px) {
	.visual-home-kolom-links {
		z-index: 5;
		padding-top: 0;
		width: 63%;
		padding-right: 2%;
		padding-bottom: 0px;
	}
	.visual-home-kolom-rechts {
		z-index: 5;
		padding-top: 30px;
		padding-bottom: 30px;
		width: 23%;
		padding-left: 2%;
		min-width: 350px;
	}
}
.container-panels-home {
	position: relative;
	z-index: 4;
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	padding-bottom: 10px;
	border-radius: 16px;
	-moz-box-shadow: 2px 2px 28px #000;
	-webkit-box-shadow: 2px 2px 28px #000;
	box-shadow: 2px 2px 28px #000;
}
.container-panels-home h1,
.container-panels-home h4 {
	font-size: 19px;
	margin-bottom: 20px;
	text-align: center;
	padding-bottom: 0px;
	text-align: center;
	color: #fff;
}
/* icon op panel */
.container-panels-home:after {
	position: absolute;
	font-family: "icons";
	line-height: 60px;
	top: -10px;
	right: -10px;
	color: #fff;
	background-color: #ED2A7E;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	text-align: center;
	display: none;
}
.container-panels-home.zoek:after {
	content: "\6e";
	font-size: 32px;
}
.container-panels-home.scholen:after {
	content: "\53";
	font-size: 26px;
}

/*
PANEL ZOEK SCHOOL
*/
.container-panels-home.zoek form input.text {
	background-color: #fff;
}
.container-panels-home.zoek form input.text:focus {
	background-color: #e7e7e7;
}
.container-panels-home.zoek form input.text.error:focus {
	background-color: #f5cbdb;
}
/* formulier items */
.container-panels-home.zoek .kolom-km,
.container-panels-home.zoek .kolom-submit{
	font-weight: 700;
	color: #fff;
	margin-bottom: 10px;
}
.container-panels-home.zoek .kolom-submit{
	float: right;
}
.container-panels-home.zoek .kolom-km {
	width: 100px;

}
.container-panels-home.zoek .kolom-km {
	float: left;
}
.container-panels-home.zoek .select2-container--default .select2-selection--single {
	border-radius: 7px;
}
.container-panels-home.zoek .select2-container--default .select2-selection--single .select2-selection__rendered,
.container-panels-home.zoek .select2-container--default .select2-selection--single .select2-selection__arrow::after {
	color: #fff;
}
.container-panels-home.zoek .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 10px;
	padding-right: 10px;
}
.container-panels-home.zoek .kolom-tekstveld {
	margin-bottom: 15px;
}
.container-panels-home h1 {
	padding-left: 7%;
	padding-right: 7%;
}
@media only screen and (min-width: 600px) {
	.container-panels-home h1 {
		padding-left: 12%;
		padding-right: 12%;
	}
}
@media only screen and (min-width: 1024px) {
	.container-panels-home.zoek {
		margin-top: 0px;
	}
}
@media only screen and (min-width: 1280px) {
	.container-panels-home.zoek {
	}
}

@media only screen and (min-width: 1280px) {
	.container-panels-home.zoek {
		max-width: 700px;
		padding: 30px;
		padding-bottom: 40px;
	}
	.container-panels-home.zoek .kolom-tekstveld {
		width: -moz-calc(100% - 220px); /* Firefox */
		width: -webkit-calc(100% - 220px); /* WebKit */
		width: calc(100% - 220px); /* Standard */
		float: left;
	}
	.container-panels-home.zoek .kolom-km,
	.container-panels-home.zoek .kolom-submit,
	.container-panels-home.zoek .kolom-submit input[type="submit"].submit {
		margin-left: 0px;
	}
	.container-panels-home.zoek .kolom-km,
	.container-panels-home.zoek .kolom-submit {
		margin-left: 15px;
	}
}


/*
panel school ads
*/
.ad-school {
	margin-bottom: 10px;
	border-radius: 7px;
	background-color: #fff;
}
.ad-school:hover {
	background-color: #ED2A7E;
}
.ad-school a {
	text-decoration: none;
}
.ad-school .padding-panel {
	padding: 10px;
	padding-left: 20px;
}
/* FOTO */
.ad-school .container-school-foto {
	position: relative;
	float: right;
	width: 70px;
	overflow: hidden;
	right: 10px;
	top: 10px;
	margin-bottom: 20px;
	margin-left: 30px;
	border-radius: 7px;
}
.ad-school .container-school-foto:before{
	content: "";
	display: block;
	padding-top: 70px;
}
.ad-school .school-foto {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

}
.ad-school .school-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	overflow: hidden;
}
.ad-school h3 {
	font-size: 18px;
	line-height: 20px;
	margin-bottom: 5px;
}
.home .ad-school p {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 5px;
}
.ad-school .pijltje {
	position: relative;
	float: right;
	width: 30px;
	height: 85px;
	display: none;
}
.ad-school .pijltje:after {
	position: absolute;
	content: "\65";
	font-family: "icons";
	font-size: 24px;
	top: 20px;
	left: -2px;
}
@media only screen and (min-width: 1024px) {
	.container-panels-home.scholen {
		margin-left: 20px;
		max-width: 350px;
	}
}
@media only screen and (min-width: 1280px) {
	.container-panels-home.scholen {
		max-width: 350px;
	}
}
/* landingspagina's */
.container-links-landingspagina {
	position: relative;
	padding-top: 40px;
	padding-bottom: 30px;
	padding-left: 6%;
	padding-right: 6%;
	margin-bottom: 25px;
}
.container-links-landingspagina h4  {
	font-size: 20px;
	padding-bottom: 10px;
}
.container-links-landingspagina .links {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	max-width: 1030px;
}
.container-links-landingspagina .links ul {
	-moz-column-count: 2; /* Fx */
	-webkit-column-count: 2; /* Ch, Saf, And, BB  */
	column-count: 2; /* IE 10, Op 11.1+ */
	-moz-column-gap: 10px; /* Fx */
	-webkit-column-gap: 10px; /* Ch, Saf, And, BB  */
	column-gap: 10px; /* IE 10, Op 11.1+ */
	padding-left: 50px;
	text-align: left;
	padding-bottom: 20px;
}
.container-links-landingspagina .links ul a {
	color: #222;
	text-decoration: none;
}
.container-links-landingspagina .links ul a:hover {
	color: #222;
	text-decoration: underline;
}
@media only screen and (min-width: 768px) {
	.container-links-landingspagina {
		margin-bottom: 50px;
	}
	.container-links-landingspagina .links ul {
		-moz-column-count: 4; /* Fx */
		-webkit-column-count: 4; /* Ch, Saf, And, BB  */
		column-count: 4; /* IE 10, Op 11.1+ */
	}
	.container-links-landingspagina h4  {
		font-size: 26px;
		padding-bottom: 20px;
	}
}
@media only screen and (min-width: 1024px) {
	.container-links-landingspagina .links ul {
		-moz-column-count: 5; /* Fx */
		-webkit-column-count: 5; /* Ch, Saf, And, BB  */
		column-count: 5; /* IE 10, Op 11.1+ */
		padding-left: 90px;
	}
}
/* ADS COMMERCIEEL */
.panel.commercieel {
	padding-bottom: 40px;
	margin-top: -20px;
}
.panel.commercieel a {
	display: block;
}
.panel.commercieel a:hover {
	cursor: pointer;
}
.panel.commercieel,
.panel.commercieel h3 {
	text-align: left;
}
.panel.commercieel .container-panel-foto {
	position: absolute;
	position: relative;
	float: right;
	width: 100px;
	overflow: hidden;
	right: -30px;
	top: -20px;
	margin-bottom: -20px;
}
.panel.commercieel .container-panel-foto:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.panel.commercieel .panel-foto {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

}
.panel.commercieel .panel-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	overflow: hidden;
	border-radius: 50%;
}
.panel.commercieel h3,
.panel.commercieel p {
	padding-top: 25px;
	padding-left: 30px;
	padding-right: 20px;
	padding-bottom: 18px;
	margin-bottom: 0px;
}
.panel.commercieel p {
	padding-top: 10px;
	padding-left: 30px;
	padding-right: 20px;
	padding-bottom: 30px;
}
/* RABOBANK */
.panel.commercieel.rabobank h3 {
	background-color: #2b3b93;
	border-radius: 16px 16px 0 0;
}
.panel.commercieel.rabobank {
	background-color: #ff590d;
}
.panel.commercieel.rabobank .button {
	background-color: #FFF;
	color: #222;
	margin-left: 30px;
	font-weight: 400;
}
.panel.commercieel.rabobank a:hover .button {
	background-color: #2b3b93;
	color: #fff;
}
/* centrum voor jeugd en gezin */
.panel.commercieel.centrum-voor-jeugd-en-gezin h3 {
	background-color: #522f91;
	border-radius: 16px 16px 0 0;
}
.panel.commercieel.centrum-voor-jeugd-en-gezin {
	background-color: #de007b;
}
.panel.commercieel.centrum-voor-jeugd-en-gezin .button {
	background-color: #FFF;
	color: #222;
	margin-left: 30px;
	font-weight: 400;
}
.panel.commercieel.centrum-voor-jeugd-en-gezin a:hover .button {
	background-color: #522f91;
	color: #fff;
}
/*
knop-scroll-down
*/
#container-knop-scroll-down {
	position: absolute;
	z-index: 3;
	text-align: center;
	height: 70px;
	width: 100%;
	bottom: -20px;
	text-align: center;
}
#knop-scroll-down {
	margin-right: auto;
	margin-left: auto;
	position: relative;
	display: inline-block;
}
#knop-scroll-down a {
	height: 70px;
	width: 70px;
	background-color: #FFF;
	border-radius: 50%;
	text-align: center;
	display: block;
	text-decoration: none;
}
#knop-scroll-down:hover .pijltje {
	top: 25px;
}
#container-knop-scroll-down .pijltje {
	position: relative;
	top: 20px;
	font-size: 36px;
}
/* LOGO */
#logo {
	width: 150px;
	position: absolute;
	left: 25px;
	top: 65px;
	z-index: 10;
}
@media only screen and (min-width: 500px) {
	#logo {
		width: 200px;
		left: 30px;
		top: 65px;
	}
}
@media only screen and (min-width: 1024px) {
	#logo {
		width: 240px;
		left: 30px;
		top: 75px;
	}
}
#anker {
	background-color: #F60;
	background-color:transparent;
	position: absolute;
	height: 50px;
	width: 10px;
	bottom: 0px;
}
/*
STYLING
*/
.home p {
	margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
	.page.home h2.paddingtop {
		padding-top: 20px;
	}
	.home p {
		font-size: 19px;
		line-height: 28px;
	}
}
@media only screen and (min-width: 1280px) {
	.page.home h2.paddingtop {
		padding-top: 40px;
	}
}

/*
FEATURES
*/
.home .content-wrapper.een-koloms-pagina .icon {
	position: relative;
	height: 50px;
	width: 60px;
	margin-left: -15px;
	margin-top: -15px;
	float: left;
	display: block;
	font-size: 36px;
	font-size: 40px;
	text-align: center;
	color: #ED2A7E;/*rose*/
	color: #4d9fdf;/*blauw*/
	color: #999;
	color: #222;
	line-height: 58px;
//background-color: #e7e7e7;
	border-radius: 50%;
}
.home .content-wrapper.een-koloms-pagina .icon.small {
	font-size: 30px;
}
.feature {
	padding-bottom: 30px;
	padding-top: 0px;
}
.feature:last-child {
	padding-bottom: 80px;
}
@media only screen and (min-width: 768px) {
	.feature:last-child {
		padding-bottom: 140px;
	}
}

/*
SLIDER LOGO's SCHOLEN
*/
.swiper-container.border-bottom {
	border-bottom: 50px solid #ED2A7E;
	border-bottom: 0px solid #ED2A7E;
}
.swiper-logoos-home .swiper-slide {
	width: auto;
	height: 80px;
	margin-bottom: 50px;
}
.swiper-logoos-home .swiper-slide img {
	height: 80px;
}
/* LANDINGSPAGINA */
.nieuws-container.landingspagina h4 {
	line-height: 30px;
	margin-bottom:20px;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 2px;
}
.nieuws-container.landingspagina li a {
	text-decoration: none;
	color: #FFF;
}
.nieuws-container.landingspagina li a:hover {
	text-decoration: underline;
}
.nieuws-container.landingspagina li span {
	color: #8dc1e9;
}
.page.home .landingspagina #kolom-links .icon {
	height: 30px;
	width: 20px;
	display: block;
	float: right;
	font-size: 18px;
	margin-top: 0px;
	color: #fff;
	line-height: 30px;
}