/* QB additional styles */
/*********************************************************************
DEVELOPMENT SECTION
*********************************************************************/


/*FONTS*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Work+Sans');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/*keus Biek*/
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
/* keuze ... */
@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap');
/*keus Biek*/
@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative|Paprika|Philosopher|Salsa&display=swap');

#test{
	font-family: 'Amatic SC', cursive;
	font-family: 'Kalam', cursive;
	font-family: 'Gloria Hallelujah', cursive;
	font-family: 'Philosopher', sans-serif;
	font-family: 'Cinzel Decorative', cursive;
	font-family: 'Salsa', cursive;
	font-family: 'Paprika', cursive;
}

/* foundation - overruling met FontAwesome icon ipv het 'plus en min teken' --*/
/* zie ook de font aanroep in de header van de pagina */
/* accordion met recensies */

.accordion-title {
  display: block;
  padding: 1.25rem 1rem;
  line-height: 1;
  font-size: 0.75rem;
  color: #6b9ab8;  /* logo blauw */
  position: relative;
  border-bottom: 1px solid #e6e6e6; 
	 }
  .accordion-title:hover, .accordion-title:focus {
    background-color: #6b9ab8; text-decoration:none; color:#FFF; }
  .accordion-title::before {
		font-family: 'FontAwesome';	
  	font-size: 1.5em;
    content: '\f0ab'; /*'+';*/
		position: absolute;
    right: 1rem;
    top: 50%;
    margin-top: -0.5rem; }
  .is-active > .accordion-title::before {
		font-family: 'FontAwesome';
    content: '\f0aa'; /*'-';*/
}

/* op basis van externe icon stylesheet 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
*/
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }



/*********************************************************************
GENERAL
*********************************************************************/
* {  
	/*...*/
}

body { 
	margin-top: 0px;
	background-color: #FFC; /* #FFF;*/

  background-image: url(../afbeeldingen/denim-gebroken-wit-01.jpg);
  /*
	background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;		/* Google fonts: Open Sans */
	*/
	font-family: 'Open Sans', Verdana, sans-serif;
	font-size: 16px; 	
	color:#333; 	
	
	overflow-y:scroll; /* altijd een scrollbalk forceren, ook al is het niet nodig, voorkomt verspringen pagina */

	/* volgende regel uit foundation.css eventueel overrulen
	line-height: 1.5; -> bijv 1.2
	*/
}

/* p,td {color: #333; } /*harde wit eraf halen  */

/* --- hyperlinks --- */
a:link,a:visited {
	text-decoration: none;
	color: #528b8b; /*blauwig...*/ 
	
}
a:hover {
	text-decoration: underline;
	color: #d6655a;/* terra */ 

}
a:active {
	text-decoration: none;
}

/* top menu desktop hyperlinks */
.topmenu a:link,.topmenu a:visited {
	/*font-family: 'Kalam', cursive; font-size:18px;*/
	font-family: 'Paprika', cursive;
	font-size:14px;
	text-decoration: none;
	color: #000; /*zwart*/
}

	
.topmenu a:hover {
	text-decoration: none;
	color: #72846b; /* logo groen */  
}

/* links in de footer sectie */
.footerlink a:link, .footerlink a:visited {
	color:#fefefe; 
}
.footerlink a:hover {
	text-decoration: underline;
}
.footerlink a:active {
	text-decoration: none;
}

/* links in de copyright sectie */
.copylinks a:link, .copylinks a:visited {
	color: #000; /* zwart */ 
}
.copylinks a:hover {
	text-decoration: underline;
}
.copyinks a:active {
	text-decoration: none;
}


h1 { 
	/*font-family: 'Work Sans', Verdana, sans-serif;*/
	/*font-family: 'Kalam', cursive;*/
	/*biek test */
	/*font-family: 'Philosopher', sans-serif;*/
	/*font-family: 'Cinzel Decorative', cursive;*/
	/*font-family: 'Salsa', cursive;*/
	font-family: 'Paprika';
	font-size:22px; 
	font-weight: bold;
}
h2 { 
	font-family: 'Open Sans', Verdana, sans-serif;
	font-size:20px; 
	font-weight: bold;
}
h3 { 
	font-family: 'Open Sans', Verdana, sans-serif;
	font-size:17px; 
	font-weight: bold;
}
/*overrules Foundation */
button{ color: #FFF;} 

.button.alert, .button.small {
    background-color: #6b9ab8;  /* logo blauw */
    color: #fefefe; }
    .button.alert:hover, .button.alert:focus, .button.small:hover, .button.small:focus {
		background-color: #d4c09e; /* logo beige*/
		color: #fefefe; }

.ronde-hoeken10 {border-radius: 10%;}
.ronde-hoeken100 {border-radius: 100%;}

/* class om div's of andere elementen via PHP code te verbergen*/
.verberg-deze-div{ display:none;}

/* kleuren */
.kleur-wit {color:#fff;}
.kleur-zwart {color:#000;}
/*
.kleur-logo-bruin {color:#432930;}
.kleur-logo-beige {color:#d6ccac;}
.kleur-logo-vlees {color:#dc9c76;}
.kleur-logo-terra {color:#d6655a;}
.kleur-logo-leigrijs {color:#528b8b;}
.kleur-aqua-blauw1 {color:#0197a5;}
.kleur-aqua-blauw2 {color:#01818a;}
.kleur-aqua-blauw3 {color:#3fbbba;}
.kleur-aqua-blauw3-secundair {color:#1a708e;}
.kleur-logo-lichtgroen {color:#b55b030; }
*/

/* logo kleuren */

.kleur-logo-donkergroen {color:#72846b; }
.kleur-logo-beige {color:#d4c09e;}
.kleur-logo-blauw {color:#002283; /*#6b9ab8;*/}


/* background kleuren */
.bckgrnd-kleur-leigrijs{background-color: #528b8b;}
.bckgrnd-kleur-trans{ background-color:transparent;}
.bckgrnd-kleur-roodbruin{background-color: #33;}


/* fontsize */
.font24{ font-size:24px;}
.font22{ font-size:22px;}
.font20{ font-size:20px;}
.font18{ font-size:18px;}
.font17{ font-size:17px;}
.font15{ font-size:15px;}
.font14{ font-size:14px; line-height:18px;}
.font13{ font-size:13px;}
.font12{ font-size:12px;}
.font11{ font-size:11px;}
.font10{ font-size:10px;}


.bodemruimte {padding-bottom:20px;} /* afbeeldingen */
.centreren{ text-align:center;}
.ruimte30{ padding:0 30px 0 30px;}
.ronde-hoeken10 {border-radius: 10px;}
.foto-citaat{ font-size:12px; font-style:oblique; text-align:center; }


/* marges bij losse elementen */
.marges{
	margin: 0 0 1rem 0;
  padding: 1rem;
  /*border: 1px solid rgba(10, 10, 10, 0.25);
  border-radius: 0; */
  
	/*
	position: relative;
  color: #0a0a0a;
  background-color: white;
	*/
}

/* overruled foundation css voor ontwikkelomgeving */
.callout.primary {
	background-color: #c6cde6 ;
} 

/* ivm foutmeldingen formulier*/ 
.attentie{ color:#F00;}
 /* rode Attentie */
.rood { 
	color: #F00;
}
/* rode lijntje input velden */
input.error {
	border: 1px solid #FF0000;
}

.blauwelijn { 
	/* max-width: 98%; /* overrules Foundation 75 rem */
	border: none; 
	border-top: 1px solid #528b8b;
  /* margin: 0.25rem auto;	/* overruling foundation hr css 1.25rem auto */
}

.shadow {
	-moz-box-shadow: 3px 3px 20px #222;
	-webkit-box-shadow: 3px 3px 20px #222;
	box-shadow: 3px 3px 20px #222;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#222222')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#222222');
}

.shadow-light {
	-moz-box-shadow: 1px 1px 10px #222;
	-webkit-box-shadow: 1px 1px 10px #222;
	box-shadow: 1px 1px 10px #222;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#222222')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#222222');
}


/*********************************************************************
PAGINA
*********************************************************************/

#paginacontainer { 
	margin: 0 auto;	/* is centreren */
	
	width:100%; 
	/* breedte fixeren
	/* min-width:960px;*/
	
	/* breedte fluid maken*/
	/* max-width:960px; */
	/* background-image:url(../afbeeldingen/00-background-volledige-pagina-v3.jpg ); background-attachment:fixed;
  background-size: cover;	*/

	height:auto;  
	
}
/* geen div maar class van gemaakt dd 23-11-2017*/  
.container-max-breedte{ 
	margin: 0 auto;	/* is centreren */
	/* OPTIONEEL overrulen van de .row waarde van Foundation*/ 
	/* maximale breedte instellen voor rijen welke niet over de volle breedte van het scherm gaan*/
	/* Foundation hanteert een relatieve default bij '.row' van 75rem */
	max-width: 1200px;
	
}


/*********************************************************************
TOPSECTIIE
*********************************************************************/
/* top vastzetten incl. menubalk - zie ook de eerste conten secties ivm topmarge */ 
.fixed-header {
	width:100%; 
	background-color:#FFF;
	/*background-image:url(../afbeeldingen/00-background-beige-pixel-02.png); 	*/

	/* eventueel hoger maken indien hoger */
  position:fixed;
  top:0px; z-index:99; 
	border-bottom:#6b9ab8 solid 1px;  /* logo blauw */

}


#top-sectie{ 
	padding: 0px 0 10px 0; 
	
	/*background-color:#FFF; */
	/*background-image:url(../afbeeldingen/00-background-beige-pixel-02.png); 	*/
}

/*
#top-sectie-links{ text-align:right; padding-top:40px;}
#top-sectie-midden{ padding-top:10px; text-align:center;}
#top-sectie-rechts{ text-align:left; padding-top:40px;}
*/

#top-logo-sectie{  
}

#logo{  
	/* de afbeelding met id logo krimpt bij percentage scroll - zie scripts/qb-scroll.js */
	transition: 0.2s; /* Add a transition effect (when scrolling - and image size is decreased) */
}

#top-menu-sectie{	/*background-color:#FFF;*/ border-top:#FFF solid 1px; border-bottom:#FFF solid 1px;  text-align:right;}

/* ivm dropdown menu bij 'diensten' e.d.*/
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
		text-align:left; 
    background-color: #fff; /* aqua uitgezet #3fbbba;*/
    /* min-width: 300px;																		/* wijder gemaakt om lange menu items op 1 regel te krijgen*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

#top-menu-mobiel{}

#top-banner-container{
	
	margin-top: 100px; 
	padding-top:100px;
	
}

#top-banner{
	
	margin:0px 0px;
	position:relative;  
	
	padding:400px 0px 0px 0px;		/* hoogte van bannerfoto als padding topwaarde inschakelen */
	background-color:#333;
	border-top:#6b9ab8 solid 1px;	/* logo blauw */
	
	background-image:url(../afbeeldingen/00-banner-001-1900.jpg);

	/*dd 27-1-2017 nieuwe methode om te schalen */	  
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	background-position:center;
}

/* tekst in topbanners */
.top-bannertekst{
	position: relative;
	margin-top: -200px;

	font-family: 'Work Sans',Verdana, sans-serif;
	font-size:48px; color:#fff; text-align:center;
	}
	

.carrousel-titel { 
	font-family: 'Work Sans',Verdana, sans-serif;
	font-size:48px; /*24px;*/ 
	/*font-weight: bold;*/
}

#top-blauwe-balk{ 
	padding-top:10px; 
	height: 40px; 
	background-color:#6b9ab8; /*logo blauw */
}

#top-beige-balk{  
	padding-top:10px; 
	height: 40px; 
	background-color:#d4c09e; /*logo beige */
}

#top-groene-balk{ 
	height: 40px; 
	background-color:#72846b; /*logo groen */
}



/* optioneel */
/*
#top-banner-mobiel{
	display:none;
}
*/

/* -- media queries topsectie -- */
@media screen and (min-width: 40em) {
	#top-menu{display:inline;}
/*	#top-sectie-links{display:inline;}
	#top-sectie-rechts{display:inline;} */
	#top-menu-mobiel {display:none;}
	/*
	#top-sectie-links-home{ text-align:center;}
	#top-sectie-rechts-home{ text-align:center;}
	*/
}
@media screen and (max-width: 39.9375em) {
	#top-sectie{	padding:0px 0px 0px 0px;}
	#top-logo-sectie{ text-align:center;}
	#top-menu-sectie{display:none;}
	#top-menu-mobiel {display:inline;}
	.centreren-only-for-small{ text-align:center;}

}

@media screen and (max-width: 63.9375em) {
	/*
	#top-sectie-links-home{display:none;}
	#top-sectie-rechts-home{display:none;}
	*/
	#top-banner{
		/*display:none;*/
	padding:0px 0px 0px 0px;
	background-size:  cover;
	}
	.top-bannertekst{
	padding-top: 80px;
	font-size:36px;}


	#top-menu{ text-align:center; }

}
@media screen and (min-width: 64em) {
	#top-sectie-links-home{display:inline;}		/* biek zie hide-for-portrait class in foundation */
	#top-sectie-rechts-home{display:inline;}		/* biek zie hide-for-portrait class in foundation */

	#top-sectie-links-home{ text-align:right;}
	#top-sectie-rechts-home{ text-align:left;}

}

/*------------------------------------------------- einde topsectie --------------------------*/

/*********************************************************************
CONTENT
*********************************************************************/

.pagina-header{ 
	padding:20px 0 10px 0;  /* in combo met h1 of p tag */
	color:#002283; /*#6b9ab8;*/   /* logo blauw */
}

.alinea-header{
	padding:20px 0 4px 0; /* in combi met p h2 of h3 tag */
	/*font-family: 'Kalam', cursive;*/
	font-family: 'Paprika', cursive;	font-size:16px;
	font-weight:bold; 
	color:#72846b; /*groen*/
}

#content-enkele-sectie{	padding:40px 0px 20px 0px; /* margin ivm class fixed-header */ /*margin-top: 360px;*/}	
#content-eerste-sectie{	padding:20px 0px 10px 0px;  /* margin ivm class fixed-header */ /*margin-top: 360px;*/}
#content-overige-sectie{ padding:20px 0px 10px 0px;}
#content-laatste-sectie{ padding:20px 0px 20px 0px;}

#content-enkele-sectie, #content-eerste-sectie,#content-overige-sectie, #content-laatste-sectie {	 	
	/*background-image:url(../afbeeldingen/00-background-volledige-pagina-v2.jpg);*/
  background-size: cover;	
	/*belangrijk ivm de fixed header die altijd bovenop moet liggen */
	/*position:relative;*/
	/*z-index:-1;*/
}


.home-diensten-container{}
.home-diensten-titelblok{ 	
	/*font-family: 'Kalam', cursive;*/
  font-family: 'Paprika', cursive;
	font-size:13px;
	font-weight:bold;
	color:#6b9ab8;   /* logo blauw */
}
.home-diensten-tekstblok{ 	
	font-size: 13px;
}
/* recensies onderaan diensten pagina's */
.recensie-tekst{ font-size:13px; font-style:italic; }

/* -- media queries contentsecties -- */

@media screen and (max-width: 63.9375em) {
	#content-enkele-sectie{	padding:20px 0px 20px 0px; margin-top: 20px;}
	#content-eerste-sectie{	padding:20px 0px 10px 0px; margin-top: 20px;}
	.pagina-header{ padding:10px 0 10px 0; } /* in combo met h1 tag */

}

@media screen and (max-width: 39.9375em) {
	.pagina-header{ padding:10px 0 10px 0; } /* in combo met h1 tag */
	.home-diensten-container{ text-align:center;}
}


/*********************************************************************
FOOTER
*********************************************************************/

#footer-sectie{
	padding:20px 0px 10px 0px;
	background-color:#d4c09e; /* logo beige */
	/*background-color:#6b9ab8; /* logo blauw */  
	
	color: #fff; /*#9FF; /*#009acd;*/
}	

#footerbutton{ font-family: 'Amatic SC', cursive; text-align:center;}


/* -- media queries  -- */
@media screen and (max-width: 63.9375em) {
	
	#footer-sectie{ text-align:center;}	
	
}


/*********************************************************************
COPYRIGHT
*********************************************************************/

#copyright-sectie{
	padding:5px 0px 5px 0px;
	text-align:center;
}