/* CSS Document 

    font-family: 'Arvo', serif;
    font-family: 'Open Sans', sans-serif;

	Kleuren:

	Rood			#E2001A
	Zwart			#1A171B
	Grijs			#CBCECD
	Lichtgrijs		#F2F2F2
	Donkergrijs		#29282A

*/

html,body {
	height:100%;
	background-color:#29282A;
}
body {
	margin: 0px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color:#1A171B;
	line-height:21px;
	text-align:left;
}
a {
	color:#1A171B;
	text-decoration:none;
}
a:visited {
	text-decoration:none;
}
a:hover {
	font-weight:700;
	text-decoration: none;
	color:#E2001A;
}
a:active {
	text-decoration:none;
}
p, ul { display:block; float:left; width:100%; margin:10px 0; }
img { border:none; vertical-align:bottom; }

/* Dit zijn de div instellingen */
#centreren { position:relative; float:left; top:0; left:50%; margin-left:-600px; width:1200px; }
#content { position:relative; float:left; width:100%; background-color:#FFF; }
#boven { float:left; width:100%; height:175px; overflow:hidden; }
#woord { margin:0; position:absolute; top:50%; left:113px; transform:translate(0,-50%); width:680px; height:135px; }
#logo { margin:0; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:386px; height:100px; }
#hoofdmenu_kader { float:left; width:100%; height:60px; background-color:#1A171B; }
#hoofdmenu { position:absolute; top:175px; left:50%; margin-left:-600px; width:1200px; height:60px; }
#slider { float:left; position:relative; width:100%; padding-top:33.33%; background-color:#E2001A; }
#slider_foto { position:absolute; top:0; left:0; width:100%; height:100%; }
#slider_tekst { position:absolute; top:20%; left:50%; margin-left:-600px; font-family: 'Arvo', serif; font-size:55px; line-height:55px; color:#FFF; text-shadow: 2px 2px 3px black; letter-spacing:-1px; }
#balk_boven { position:absolute; bottom:0; left:0; width:100%; }
#balk_rood { float:left; width:100%; background-color:#E2001A; margin-top:2px; }
#teksten { position:relative; float:left; width:100%; margin:30px 0; }
#kader_links { float:left; width:44%; padding:2%; background-color:#F2F2F2; border-radius:10px; margin-top:20px; }
#kader_rechts { float:right; width:44%; padding:2%; background-color:#F2F2F2; border-radius:10px; margin-top:20px; }
#kader_titel { float:left; position:relative; left:-4.9%; padding:2%; margin:0 0 15px 0; background-color:#E2001A; color:#FFF; font-family: 'Arvo', serif; font-size:24px; line-height:27px; font-weight:700; }
#kader_midden { float:left; width:96%; padding:2%; background-color:#F2F2F2; border-radius:10px; margin-top:20px; } #kader_midden #kader_titel { left:-2.25%; padding:1%; }
#roodvlak { float:left; width:100%; padding:3% 0; background-color:#E2001A; }
#socials { float:left; width:47.5%; color:#FFF; } #socials H2 { color:#FFF; }
#adres { float:right; color:#FFF; } #adres H2 { color:#FFF; } #adres a { color:#FFF; font-weight:700; } #adres a:hover { color:#1A171B; text-decoration:underline; }
#onder { float:left; width:100%; height:40px; padding:10px 0 10px 0; background-image:url(beelden/doorloop_onder.png); }
#copyright { float:right; height:40px; font-size:11px; line-height:40px; color:#FFF; }

/* Homepage */
#casus { float:left; width:100%; padding:10% 0 5% 0; background-color:#CBCECD; }
#casus_boven { position:relative; float:left; width:100%; margin-top:30px; }
#casus_onder { float:left; width:100%; margin-bottom:30px; }
#casus_titel { position:absolute; bottom:-50px; left:50%; width:1200px; transform:translate(-50%,0); font-family: 'Arvo', serif; font-size:100px; line-height:100px; color:#FFF; font-weight:700; letter-spacing:-1px; margin:0; }
#casus_tekst { float:left; width:55%; } #casus_tekst h3 { color:#1A171B; }
#casus_fotovlak { position:relative; float:right; width:40%; padding-top:40%; margin-top:-8%; }
#casus_fotokader { position:absolute; top:0; left:0; width:100%; height:100%; }
#casus_foto {position:absolute; top:2.5%; left:2.5%; width:95%; height:95%; border-radius:25px; overflow:hidden; }

#quote { float:left; position:relative; width:100%; padding-top:33.33%; overflow:hidden; }
#quote_foto { position:absolute; top:0; left:0; width:100%; height:100%; }
#quote_kader { position:absolute; right:-20%; top:0; width:74%; height:100%; background-color:#1A171B; transform:skewX(148.5deg); opacity:0.2; FILTER:Alpha(Opacity=20); }
#quote_aanhalingstekens { position:absolute; top:25px; left:45%; width:10%; }
#quote_tekst { position:absolute; right:5%; bottom:15%; width:40%; font-family: 'Arvo', serif; font-size:24px; line-height:30px; color:#1A171B; font-weight:700; letter-spacing:-1px; text-align:justify; }

/* Tekstpaginas */
#tekst_aanhalingstekens { float:left; width:10%; padding-right:3%; }
#tekst_quote { display: inline-block; vertical-align:bottom; float:left; padding-top:3%; width:87%; font-family: 'Arvo', serif; font-size:20px; line-height:24px; color:#1A171B; font-weight:700; }

/* Referenties */
#referenties_links { float:left; width:48%; }
#referenties_rechts { float:right; width:48%; }
#referenties { float:left; width:94%; padding:3%; background-color:#F2F2F2; border-radius:10px; margin-top:20px; } #referenties #kader_titel { left:-3.25%; }

/* Tekstinstellingen */
H1 { font-family: 'Arvo', serif; font-size:40px; line-height:40px; color:#1A171B; font-weight:700; letter-spacing:-1px; margin:0 0 20px 0; }
H2 { font-family: 'Arvo', serif; font-size:28px; line-height:28px; color:#1A171B; font-weight:700; margin:0 0 20px 0; }
H3 { float:left; width:100%; font-weight:700; color:#E2001A; font-size:30px; line-height:35px; margin:0 0 20px 0; }
H4 { font-weight:700; color:#E2001A; }

/* Formulier instellingen */
.knop_formulier { float:left; margin:15px 15px 0 0; height:30px; font-size:14px; line-height:27px; color:#FFF; text-align:center; background-color:#E2001A; padding:0 14px 0 14px; border:0; border-style:none; border-radius:5px; -webkit-appearance:none; }
.knop_formulier:hover { background-color:#1A171B; color:#FFF; font-weight:bold; }
.formulier, .formulier_tekstveld { width:98%; padding:1%; height:20px; border:1px; border-style:solid; border-color:#333; color:#333; background-color:#EFEFEF; margin:5px 0 5px 0; font-family: 'Open Sans', sans-serif; font-size:12px; line-height:20px; border-radius:0; -webkit-appearance:none; }
.formulier_tekstveld { height:116px; }
.formulier_list { width:100%; height:30px; border:1px; border-style:solid; border-color:#333; color:#333; background-color:#EEE; margin:5px 0 5px 0;  font-size:12px; line-height:20px; }
.formulier:hover, .formulier_tekstveld:hover, .formulier_list:hover { border-color:#E2001A; background-color:#E3EAEF; }

/* Dit zijn de menu instellingen */
#hoofdmenu_eindlijn { float:left; width:2px; height:60px; border-left:2px #FFF solid; }

#menu { height:60px; font-size:16px; font-weight:700; }
#menu a { display:block; height:100%; line-height:60px; text-decoration:none; padding:0 30px; border-left:2px #FFF solid; color:#FFF; font-weight:700; background:inherit; }
#menu a:hover { background-color:#333; }
#menu ul { list-style-type:none; margin:0; padding:0; color:#FFF; }
#menu li { color:#FFF; float:left; }
#menu ul li ul { display:none; background-color:#FFF; padding:10px 30px; box-shadow: 0 2px 3px black; }
#menu ul li ul a { color:#1A171B; border-top:thin #1A171B solid; padding:15px 0; line-height:20px; font-weight:400; }
#menu ul li ul a:hover { color:#E2001A; background-color:#FFF; font-weight:400; }
#menu ul li ul li { float:none; color:#FFF; min-width:120px; }
#menu ul li:hover ul { display:block; }


/* Links */
a.socials { display:block; float:left; width:55px; height:55px; margin-right:15px; }
a.socials:hover { opacity:0.6; FILTER:Alpha(Opacity=60); }

a.button_rood { position:relative; float:left; margin:20px 0; padding:10px; width:320px; height:20px; font-size:16px; line-height:19px; font-weight:500; color:#FFF; background-color:#E2001A; border-radius:5px; }
a.button_rood:hover { background-color:#1A171B; }

a.button_zwart { position:relative; float:right; margin:20px 0 0 0; padding:10px; width:130px; height:20px; font-size:16px; line-height:19px; font-weight:500; color:#FFF; background-color:#1A171B; border-radius:5px; }
a.button_zwart:hover { background-color:#333; }

#pijl { float:right; width:20px; height:20px; background-image:url(beelden/pijl.png); background-repeat:no-repeat; }

a.regenmakers { display:block; float:left; padding:5px 0 5px 40px; height:30px; font-size:10px; line-height:15px; color:#FFF; font-weight:normal; background-image:url(beelden/regenmakers.png); background-repeat:no-repeat; }
a.regenmakers:hover { text-decoration:underline; font-weight:normal; color:#FFF; }

a.telefoon { margin:0; position:absolute; text-align:right; top:50%; right:0; transform:translate(0,-50%); height:35px; width:250px; line-height:35px; font-weight:normal; }

a.referenties_logo { float:left; width:13%; margin-right:1.25%; } a.referenties_logo img { filter:grayscale(100%); }
a.referenties_logo:hover img { filter:grayscale(0%); }

a.mobielmenu { display:none; position:absolute; top:175px; left:0; width:90%; padding:15px 5%; height:30px; font-size:21px; color:#FFF; line-height:30px; font-weight:normal; }
a.mobielmenu:hover { color:#E2001A; text-decoration:none; }

a.menu { float:left; display:block; padding:5%; width:90%; font-size:24px; line-height:24px; color:#E2001A; font-weight:700; border-bottom:1px #CBCECD solid; }
a.menu:hover { text-decoration:none; color:#96BF0D; background-color:#E0E1E3; }

a.submenu { float:left; display:block; padding:5% 10%; width:80%; font-size:21px; line-height:21px; color:#1A171B; font-weight:400; border-bottom:1px #CBCECD solid; }
a.submenu:hover { text-decoration:none; color:#96BF0D; background-color:#E0E1E3; }


/* MEDIA QUERIES */
@media screen and (max-width: 1400px) {
	#centreren { margin-left:-45%; width:90%; height:100%; }
	#slider_tekst { margin-left:-45%; font-size:50px; line-height:50px; }
	#casus_titel { width:90%; }
	#hoofdmenu { margin-left:-45%; width:90%; }
}
@media screen and (max-width: 1100px) {
	#quote_tekst { font-size:20px; line-height:24px; }
}
@media screen and (max-width: 900px) {
	#quote_kader { right:-10%; }
	#quote_aanhalingstekens { left:35%; }
	#quote_tekst { font-size:16px; line-height:20px; width:50%; }
	#casus_titel { bottom:-70px; }
	#referenties_links, #referenties_rechts { width:100%; }
}
@media screen and (max-width: 750px) {
	a.telefoon { display:none; }
	a.referenties_logo { display:none; }
	#quote_kader { right:-30%; }
	#quote_aanhalingstekens { display:none; }
	#quote_tekst { display:none; }
	#slider_tekst { font-size:40px; line-height:40px; }
}
@media screen and (max-width: 600px) {
	a.mobielmenu { display:block; }
	#menu { display:none; }
	#logo { width:100%; }
	#kader_links, #kader_rechts { width:90%; padding:5%; }
	#kader_titel { left:-5%; }
	#casus_tekst { width:100%; padding-top:20%; }
	#casus_fotovlak { width:100%; padding-top:100%; margin-top:20px; }
	#socials { width:100%; margin-top:20px; }
	#adres { float:left; margin-top:30px; }
	H1 { font-size:32px; line-height:32px; }
	H2 { font-size:21px; line-height:21px; }
	#slider { display:none; }
}