/*	B1.CSS
	Copyright © 2026 Taalwerkplaats, Amsterdam. Alle rechten voorbehouden. | All rights reserved.

	Kleuren:
	Bordeaurood		: #951c36 | 149.28.54	[koppen + knop Meer weten + alertkader]
	Okergeel		: #ddca00 | 221.202.0	[menustreep + knop Contact]
	Lichtblauw		: #deeeff | 222.238.255	[kleur van B1 op lichtlichtblauw + accordionbalk]
	Lichtlichtblauw	: #eef7ff | 238.247.255	[achtergrond home + formulier overig + kader]
	Crème			: #f9f5e6 | 249.245.230	[achtergrond vervolgpagina + formulier home]
	Lichtcrème		: #fdfbf6 | 253.251.246 [B1 op crème]
	Lichtroze		: #f7eff0 | 247.239.240
	Lichtlichtroze	: #fbf8f8 | 251.248.248
	Donkerblauw		: #004b8b | 0.75.139	[knop Offerte + tekst op accordionpanel]
*/


/* Opmaak lopende tekst, koppen, rijhoogte, beeld enzovoort */

html
{
	width			: 100%;
	height			: 100%;
}
@media ( min-width	: 1200px )
{
	.container
	{
		width		: 1000px;					/* Gedeelte met tekst horizontaal comprimeren */
	}
}
body
{
	width			: 100%;
	height			: 100%;
	font-family		: verdana, geneva, tahoma, sans-serif;
	font-size		: 14px;
   	color			: #000000;
   	background-color: #ffffff;
	line-height		: 1.6;						/* 1.6 keer de lettergrootte */
}
h1
{
	font-size		: 32px;
	color			: #951c36;
	padding-bottom	: 10px;
}
h2
{
	font-size		: 24px;
	color			: #951c36;
}
p
{
	padding-bottom	: 5px;
}
.br-l											/* Bordeauxrode vette B1 in het logo */
{
	color			: #951c36;
	font-size		: 40px;
	font-weight		: bold;
}
.br-m											/* Idem in het hoofdmenu */
{
	color			: #951c36;
	font-weight		: bold;
}
.b1-vet											/* Vette, blauwe letter */
{
	color			: #004b8b;
	font-weight		: bold;
}
.b1-r											/* Boreauxrood */
{
	color			: #951c36;
	font-weight		: bold;
}
.lijn-l											/* Lijnen: links (-l), midden (-m) en rechts (-r): */
{
	text-align		: left;
}
.lijn-m
{
	text-align		: center;
}
.lijn-r
{
	text-align		: right;
}
.txt-knoppen									/* Tekst op de beelden op de homepage */
{
	position		: absolute;
	top				: 90%;
	left			: 50%;
	transform		: translate( -50%, -50% );
	font-weight		: bold;
	color			: #ffffff;
}
.kader											/* Kadertekst */
{
	padding-top		: 15px;
	padding-right	: 50px;
	padding-bottom	: 5px;						/* Rekening houdend met padding bij <p> */
	padding-left	: 50px;
	background		: #eef7ff;
}
.a-kader										/* Alertkader */
{
	padding-top		: 15px;
	padding-right	: 50px;
	padding-bottom	: 5px;
	padding-left	: 50px;
	color			: #951c36;
	background		: #ffffff;
}
.voettekst										/* Copyrightregel */
{
	margin-top		: 25px;
	font-size		: 12px;
}
.img-midden										/* Beeld centreren */
{
	margin			: auto;
}
.schaduw										/* Schaduw rond beeld */
{
	box-shadow		: 0 4px 8px 0 rgba( 0, 0, 0, 0.2 ), 0 6px 20px 0 rgba( 0, 0, 0, 0.19 );
}


/* Fade-in van tekst */

.tag
{
	opacity			: 0;
	transform		: translate( 0, 100vh );
	transition		: all 1s;					/* Vertraging (fade-in) in seconden */
}
.tag.visible
{
	opacity			: 1;
	transform		: translate( 0, 0 );
}
.sectie1,										/* Sectienummer voor tag ('class="tag sectie1"' enzovoort) */
.sectie2,
.sectie3,
.sectie4
{
	/* leeg */
}


/* Navigatie */

@media ( max-width: 1200px )					/* Breekpunt voor collaps vervroegen voor tablet */
{
	.navbar-header
	{
		float			: none;
	}
    .navbar-left, .navbar-right
	{
		float			: none !important;
	}
    .navbar-toggle
	{
		display			: block;
	}
    .navbar-collapse
	{
		margin-top		: 5px;					/* Dropdown bovenaan lijnen met hoofdmenu */
		width			: 300px; 				/* Breedte van menu - buitenkant (zie ook hierna) | in html met 'pull-right' naar rechts getrokken */
	}
    .navbar-collapse.collapse
	{
		display			: none !important;
	}
    .navbar-nav
	{
		float			: none !important;
        margin-top		: 5px;					/* Dropdown lijnen (zie hierboven) */
	}
    .navbar-nav > li
	{
		float			: none;
	}
    .navbar-nav > li > a
	{
		padding-top		: 10px;
		padding-bottom	: 10px;
	}
    .collapse.in
	{
		display			: block !important;
	}
}
.navbar											/* Inklapbaar menu */
{
	height				: 85px;					/* Ruimte onder 'B1' (8 mm; zie ook hierna de padding bij sectie Home) */
	padding-top			: 25px;					/* 25px boven menu (+ 5px boven logo) */
	background-color	: #ffffff;
	z-index				: 9999;
	border				: 0px;
	border-radius		: 0px;					/* Anders spatiëren? Dan: 'letter-spacing: ...px;' toevoegen */
}
.navbar li a, .navbar
{
	border-bottom		: 0px;
	color				: #000000 !important;
	text-decoration		: none;
}
.navbar-nav li a:hover
{
	border-bottom		: 5px solid #ddca00;
	color				: #000000 !important;
	background-color	: #ffffff !important;
	text-decoration		: none;
}
.navbar-nav li.active a
{
	border-bottom		: 5px solid #ddca00;
	color				: #000000 !important;
	background-color	: #ffffff !important;
	text-decoration		: none;
}
.navbar-default .navbar-toggle
{
	border-color		: transparent;
	background-color	: #ffffff !important;
	margin-top			: -6px;					/* Hamburger lijnen op onderkant 'B1-tekstschrijver' */
}
.navbar-default .navbar-toggle .icon-bar
{
	background-color	: #ffffff;
}
.navbar-brand
{
	padding-top			: 5px;					/* 5px boven logo (+ 25px boven menu) */
	color				: #000000 !important;
}
@media only screen and ( max-width: 1200px )	/* Verander de kleuren van het uitgeklapte menu op kleine schermen >> 1200 ipv 767 voor tablet */
{
	.collapsing, .in
	{
		background-color: #ddca00;
		overflow		: hidden;
	}
	.collapsing ul li a, .in ul li a
	{
		color			: #000000 !important;
		border-bottom	: 0px !important;
	}
	.collapsing ul li a:hover, .in ul li a:hover
	{
		color			: #000000 !important;
		border-bottom	: 0px !important;
		width			: 300px; 				/* Breedte van menu - binnenkant (zie ook hiervoor) */
	}
}
.streep1, .streep2, .streep3		 			/* Navigatie: wissel tussen hamburger en X (werkt alleen met Sluiten in b1.js) */
{
	width				: 25px;
	height				: 3px;
	background-color	: #ddca00;
	margin				: 6px 0;
	transition			: 0.4s;
}
.verander .streep1
{
	-webkit-transform	: rotate(-45deg) translate(-5px, 5px);
	transform			: rotate(-45deg) translate(-5px, 5px);
}
.verander .streep2
{
	opacity				: 0;
}
.verander .streep3
{
	-webkit-transform	: rotate(45deg) translate(-8px, -8px);
	transform			: rotate(45deg) translate(-8px, -8px);
}


/* Hyperlinks en knoppen */

a:link, a:visited, a:active
{
	outline			: 0;
	text-decoration	: none;
	color			: #000000;
	border-bottom	: 2px dotted #951c36;
}
a:hover
{
	outline			: 0;
	text-decoration	: none;
	color			: #951c36;
	border-bottom	: 0px;
}
a.kdr:link,										/* Link in a-kader */
a.kdr:visited,
a.kdr:active
{
	outline			: 0;
	text-decoration	: none;
	color			: #951c36;
	border-bottom	: 2px dotted #951c36;
}
a.kdr:hover
{
	outline			: 0;
	text-decoration	: none;
	color			: #000000;
	border-bottom	: 0px;
}
.btn-meer-h:link,								/* Knop Meer weten op home*/
.btn-meer-h:visited,
.btn-meer-h:active,
.btn-meer-h:focus
{
	outline			: 0;
	border-radius	: 0px;						/* Ronde hoeken recht maken */
	text-decoration	: none;
	background-color: #ffffff;
	font-weight		: bold;
	color			: #951c36;
	width			: 250px;
	height			: 40px;
	padding			: 10px;
	border			: 1px solid #f7eff0;		/* Dun, lichtroze kader om de knop te accentueren vanwege de lichte achtergrond */
}
.btn-meer-h:hover
{
	background-color: #951c36;
	color			: #ffffff;
	border			: 1px solid #951c36;
}
.btn-meer:link,									/* Knop Meer weten op de overige pagina's */
.btn-meer:visited,
.btn-meer:active,
.btn-meer:focus
{
	margin-top		: 10px;
	outline			: 0;
	border-radius	: 0px;
	text-decoration	: none;
	background-color: #951c36;
	font-weight		: bold;
	color			: #ffffff;
	width			: 250px;
	height			: 40px;
	padding			: 10px;
	border			: 0px;
}
.btn-meer:hover
{
	background-color: #ffffff;
	color			: #951c36;
}
.btn-cont:link,									/* Knop Contact */
.btn-cont:visited,
.btn-cont:active,
.btn-cont:focus
{
	margin-top		: 10px;
	outline			: 0;
	border-radius	: 0px;
	text-decoration	: none;
	background-color: #ddca00;
	font-weight		: bold;
	color			: #ffffff;
	width			: 250px;
	height			: 40px;
	padding			: 10px;
	border			: 0px;
}
.btn-cont:hover
{
	background-color: #ffffff;
	color			: #ddca00;
}
.btn-off:link,									/* Knop Offerte */
.btn-off:visited,
.btn-off:active,
.btn-off:focus
{
	margin-top		: 10px;
	outline			: 0;
	border-radius	: 0px;
	text-decoration	: none;
	background-color: #004b8b;
	font-weight		: bold;
	color			: #ffffff;
	width			: 250px;
	height			: 40px;
	padding			: 10px;
	border			: 0px;
}
.btn-off:hover
{
	background-color: #ffffff;
	color			: #004b8b;
}
.btn-ok,										/* Knop Verzenden op formulier en Ik weet genoeg in modal */									
.btn-ok:active,
.btn-ok:visited,
.btn-ok:focus
{
	border-radius	: 0px;
    background-color: #951c36;
    border-color	: #951c36;
    color			: #ffffff;
}
.btn-ok:hover
{
    background-color: #004b8b;
    border-color	: #004b8b;
    color			: #ffffff;
}
a.beeld:link,									/* Beeldlink met veranderende opaciteit bij mouseover */
a.beeld:visited,
a.beeld:active 
{
	outline			: 0;
	text-decoration	: none;
	border-bottom	: 0px;
}
a.beeld:hover
{
	outline			: 0;
	text-decoration	: none;
	color			: #ffffff;
	opacity			: 0.6;
}
a.back-to-top									/* Pijl om terug naar boven te gaan (zie ook b1.js) */
{
	display					: none;
	width					: 60px;
	height					: 60px;
	text-indent				: -9999px;
	position				: fixed;
	z-index					: 999;
	right					: 20px; 			/* Right en bottom: positie vanuit rechteronderhoek */
	bottom					: 20px;				/* Percentage in background: positie van het beeld in de cirkel */
	background				: #ddca00 url('../../beeld/_pijl.png') no-repeat center 50%;
	-webkit-border-radius	: 30px;
	-moz-border-radius		: 30px;
	border-radius			: 30px;
}


/* Lijsten */

ul.opsom-v										/* Opsomming met vinkjes */
{
	list-style		: none;
	margin-left		: 5px;						/* lijnen met de alinea's */
	padding-left	: 1em;
	text-indent		: -16px;					/* lijnen van ingesprongen tekst in de opsomming */
}
ul.opsom-v li:before
{
	content			: "\2713 \0020"; 			/* Hex voor vinkje + spatie */
	color			: #951c36;
}
ul.opsom										/* Opsomming met punthaken */
{
	list-style		: none;
	margin-left		: 5px;
	padding-left	: 1em;
	text-indent		: -16px;
}
ul.opsom li:before
{
	content			: "\003E \0020"; 			/* Hex voor punthaak (>) + spatie */							
	color			: #951c36;
}


/* Modal */

.modal
{
	margin-top		: 65px;
	overflow		: scroll;					/* Voorkomen dat menu en achtergrond in Chrome en Firefox verschuiven bij openen modal (kijk ook bij body hiervoor) */
	overflow-x		: hidden;
	overflow-y		: show;
}
.modal-open
{
	overflow		: scroll;
	overflow-x		: hidden;
	overflow-y		: show;
}
.modal-open[style]
{
	padding-right	: 0px !important;
}
.modal-header, .modal-footer, .featurette-divider
{
	border			: 2px #ffffff solid !important;
}
.modal-content
{
	background-color: #eef7ff;
	color			: #000000;
	text-align		: left;
}
.close											/* X in modal */
{
	color			: #951c36;
	font-size		: 25px; 
	opacity			: 1;
}


/* Formulier */

input[type=text], input[type=email]
{
	border			: 0px;
	border-radius	: 0px !important;
	background-color: #ffffff !important;
	color			: #000000 !important;
}
textarea
{
	border			: 0px !important;
	border-radius	: 0px !important;
	background-color: #ffffff !important;
	color			: #000000 !important;
}
select
{
	border			: 0px !important;
	border-radius	: 0px !important;
	background-color: #ffffff !important;
	color			: #494949 !important;
}
.form-control-m
{
	opacity					: 0;
	position				: absolute;
	top						: 0;
	left					: 0;
	height					: 0;
	width					: 0;
	z-index					: -1;
}
.well											/* Transparant kader om formulier om inhoud verticaal te lijnen met het hoofdmenu */
{
	background		: transparent;
	border			: 0px transparent hidden;
	box-shadow		: none;
}
.f-ag-h											/* Lichtroze formulier voor op de homepage (laatste getal: opaciteit 0 <> 1) */
{
	background		: rgba( 247, 239, 240, .9 );
}
.f-ag-o											/* Lichtlichtblauw formulier voor op de overige pagina's ) */
{
	background		: rgba( 238, 247, 255, .9 );
}


/* Opmaak Google reCAPTCHA-badge (v3); bepaal de positie ervan met div class grebadge */

.grecaptcha-badge
{
	visibility		: hidden;
}
.grebadge
{
	color			: #004b8b;					/* Blauw */
	display			: inline;
}
.grebadge label
{
	font-size		: 0.9em;
	padding-left	: 10px;
	font-weight		: normal;
}
.grebadge label a
{
	outline			: 0;
	text-decoration	: none;
	color			: #004b8b;
	border-bottom	: 2px dotted #004b8b;
}
.grebadge label a:hover
{
	text-decoration	: none;
	color			: #deeeff;					/* Lichtblauw */
	border-bottom	: 0px;
}
.grebadge img
{
	width			: 35px;
	float			: left;
}


/*	Sectie */

.homesectie
{
	display					: table;
	width					: 100%;
	height					: 100%;
	padding					: 90px 0px;				/* Positie tussen menu en beginkapitaal waarmee de sectie begint (dezelfde afstand als van 'B1' tot menurand onder'; 8 mm) */
	text-align				: left;
	background				: #deeeff url('../../beeld/ag_home.jpg') no-repeat fixed center top;	/* fixed, scroll of cover */
	-webkit-background-size	: cover;
	-moz-background-size	: cover;
	-o-background-size		: cover;
	background-size			: cover;
}
.overigsectie
{
	display					: table;
	width					: 100%;
	height					: 100%;
	padding					: 90px 0px;
	text-align				: left;
	background				: #f9f5e6 url('../../beeld/ag_overig.jpg') no-repeat fixed center top;
	-webkit-background-size	: cover;
	-moz-background-size	: cover;
	-o-background-size		: cover;
	background-size			: cover;
}


/* EOF */