
:root {
	/*
	hamburgerknop
	*/
	--hamburgerKleur:#FFF;
	
	/*
	hoofdmenu
	*/
	--hoofdMenuMinimaleHoogte:200px;
	--hoofdMenuAchtergrondKleur:transparant;
	--hoofdMenuAchtergrondStickyKleur:#9ed4ea;
	--hoofdMenuAchtergrondStickyKleurMobiel:transparant;
	--hoofdMenuAchtergrondStickyMobielHoogte:70px;
	--hoofdMenuTekstKleur:#2a7492;
	--hoofdMenuTekstKleurMobiel:#2a7492;
	--hoofdMenuActieveTekstKleur:#509dbc;
	--hoofdMenuActieveTekstKleurMobiel:#509dbc;
	--hoofdMenuHoverTekstKleur:#509dbc;
	--hoofdMenuHoverTekstKleurMobiel:#509dbc;
	--hoofdMenuStickyLogoHoogte:50px;
	
	/*
	uitklapmenu
	*/
	--uitklapmenuTopBorderKleur:  #509dbc;
	--uitklapmenuSubMenuTekstKleur: #2a7492;
	--uitklapmenuSubMenuHoverTekstKleur: #509dbc;
	--uitklapmenuSubMenuActieveTekstKleur:#509dbc;
	--uitklapmenuSubMenuTekstKleurMobiel: #2a7492;
	--uitklapmenuSubMenuHoverTekstKleurMobiel: #509dbc;
	--uitklapmenuSubMenuActieveTekstKleurMobiel:#509dbc;
	--uitklapmenuAchtergrondMobiel:  #FFF;
	
	/*
	header
	*/
	--fullheaderAchtergrondKleur:#9ed4ea;/*hele breedte*/
	--logoBreedte:15%;
	--logoMaxBreedte:300px;
	--logoBreedteMobiel:60%;
	--logoMaxBreedteMobiel:150px;
	--tekstInspringMobiel:4%;/*om evt ruimte te geven voor logo*/
	--headerTekstAfstandTopMobiel:50px;
	--navInspring:28%;/*logoBreedte + een marge*/
	--tekstbreedte:40%;
	--tekstbreedteMobiel:60%;
	--fotobreedte:22%;
	--fotobreedteMobiel:40%;
	--fotoMaxbreedte:340px;
	
	/*
	hoofdteksten
	*/
	--standaardFont: 'Karla', Arial,sans-serif;
	--tekstKleur:#111;
	--inleidingKleur:#1b5b25;
	
	/*
	koppen
	*/
	--titelFont: 'Nunito',Arial,sans-serif;/*'Karla', Arial,sans-serif*/
	--titelWeight: 600;
	--kopKleur:#005a2d;
	--kopKleurZijkant:#FFF;
	--datumTekstKleur:#7db524;
	--NieuwsKopTekstKleur:#005a2d;
	--datumStartTekstKleur:#44CEE1;
	
	/*
	Quotes
	*/
	--quoteKleur:#7db523;
	--quoteAchtergrondKleur: #ADDF59;
	--quoteTekstKleur:#fff;
	--quotePersoonTekstKleur:#1a8121;
	
	/*
	links
	*/
	--linkKleur:#7db523;
	--linkHoverKleur:#9AD834;
	
	/*
	vlakken achter formulieren
	*/
	--formAchtergrondKleur:#f6f6f6;
	--formTekstKleur:#000;	
	
	/*
	Datum vlakjes
	*/
	--datumvakAchtergrondKleur:#7db523;
	--datumvakTekstKleur:#FFF;
	
	/*
	button
	*/
	--buttonAchtergrondKleur:#9fd2a1;
	--buttonTekstKleur:#FFF;
	--buttonHoverAchtergrondKleur:#C0e6c2;
	--buttonHoverTekstKleur:#FFF;
	
	/*
	submenu rechts
	*/
	--subMenuAchtergrondKleur:#f6ce3d;
	--subMenuTekstKleur:#000;
	--subMenuTekstActieveKleur:#FFF	;
	
	/*
	carrousel
	*/
	--bolletjeAchtergrondKleur:#FFF;
	--bolletjeAchtergrondKleurActief:#3882a1;
	
	/*
	intro gekleurd vak
	*/
	--introHomeTekstKleur:#3882a1;
	--introAchtergrondGrootte: 100%;/*100% 100% als hij horizontaal en vertikaal moet sizen, anders 100%*/
	
	/*
	tabellen
	*/
	--rijKleur1:#F3FAF3;
	--rijKleur2:#E7F3E8;
	--rijDonkereKleur:#9fd3a1;
	
	/*
	hoogtepunten kop (indien in gebruik)
	*/
	--HoogtepuntenKopKleur:#980a2c;
	--HoogtepuntenBGKleur:#efefef;
	--hoogtepuntenImageRadius:20px;
	
	
	/*
	drie kolommen kleuren (indien in gebruik, bij de componenten)
	*/
	--KolomAchtergondkleur1:#f6ce3d;
	--KolomTekstkleur1:#000;
	--KolomAchtergondkleur2:#f6ce3d;
	--KolomTekstkleur2:#000;
	--KolomAchtergondkleur3:#f6ce3d;
	--KolomTekstkleur3:#000;
	--KolomAchtergondkleur4:#f6ce3d;
	--KolomTekstkleur4:#000;
	--KolomAchtergondkleur5:#f6ce3d;
	--KolomTekstkleur5:#000;
	--KolomAchtergondkleur6:#f6ce3d;
	--KolomTekstkleur6:#000;
	--KolomAchtergondRadius: 25px;
	
	/*
	Afrondingen plaatjes en kaders
	
	*/
	--borderRadius:20px;
	--HeaderFotoborderRadius:100%;
	--MedewerkerFotoborderRadius:50%;
	
	/*
	footer
	*/
	--footerAchtergrondKleur:#A0c9a1;
	--fullfooterAchtergrondKleur:#A0c9a1;/*hele breedte*/
	--footerTekstKleur:#FFF;
	--schoolSiteBannerAchtergrondKleur:#A0c9a1;
	
}

/*
extra classes voor knoppen, die ook in de areas.css staan van de klant in de map cp/css
*/

.groeneknop, .nieuwsbericht a.groeneknop, .vacature a.groeneknop{
	background-color:#e86c26;	
	color: #FFF!important;	
	border-radius:10px;
	padding:16px 24px;
	margin-right:20px;
	margin-bottom:20px;
	text-decoration:none;
	font-weight:700;
	display: inline-block;
}
.groeneknop:hover{
	color: #FFF!important;	
	text-decoration:none;
	background-color:#EC834A;	
}
