/* 
	CSS Document 

	### FONTS ###
    font-family: 'Open Sans', sans-serif;
    font-family: 'Montserrat', sans-serif;

	### KLEUREN ###
	Rood		#C21625
	Lichtgrijs	#F2F1F0
	Blauw		#0095D6

*/

html,body {
	height:100%;
	background-color:#29282A;
}
body {
	margin: 0px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color:#000;
	line-height:21px;
	text-align:justify;
}
a {
	color:#000;
	text-decoration:none;
}
a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration: none;
	color:#C21625;
}
a:active {
	text-decoration:none;
}

p { display:block; float:left; width:100%; margin:10px 0; }
img { border:none; vertical-align:bottom; }

/** LIGHTBOX MARKUP **/
.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.85);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width:90%;
	max-height:80%;
	margin-top:10%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

/* Dit zijn de div instellingen */
#content { float:left; width:100%; background-color:#F2F1F0; }
#boven { float:left; width:90%; padding:0 5%; height:190px; background-color:white; }
#logo-iolo { float:left; margin:30px 15px 0 0; width:126px; height:60px; background-image:url("beelden/logo-iolo.png"); background-size:contain; }
#logo-dpi { float:left; margin:35px 15px 0 0; width:166px; height:50px; background-image:url("beelden/logo-dpi.png"); background-size:contain; }
#hoofdmenu { position:absolute; left:0; top:120px; height:35px; width:90%; padding:17.5px 5%; background-color:#C21625; }
#slider_kader { float:left; position:relative; width:100%; padding-top:45%; overflow:hidden; }
#slider_foto { position:absolute; top:0; left:0; width:100%; height:100%; background-size:contain; background-repeat:no-repeat; }
#slider_tekst { position:absolute; top:0; left:2%; padding:4% 0 0 5%; width:33%; font-family: 'Montserrat', sans-serif; font-weight:700; font-size:40px; line-height:45px; color:#FFF; text-shadow: 3px 3px 2px #333; text-align:left; }
#slider_onder { position:absolute; bottom:0; left:0; width:100%; height:21.296%; background-image:url("beelden/slider_onder.png"); background-size:contain; }
#slider_box { position:absolute; right:8%; bottom:5%; width:280px; height:320px; background-size:contain; }
#slider_logo { position:absolute; left:7%; bottom:10%; width:25%; padding-top:15%; }
#carousel_foto { float:left; width:100%; }
#carousel_tekst { float:left; padding:5%; width:90%; margin-top:-15px; }
#carousel_box { float:left; padding:0 20%; width:60%; }
#carousel_box_tekst { float:left; padding:200px 5% 5% 5%; margin-top:-175px; width:90%; background-color:#FFF; box-shadow: 0 0 7px #999; }
#teksten { float:left; position:relative; padding:3.5% 5% 5% 5%; width:90%; }
#recensie { float:left; width:100%; background:white; box-shadow: 0 0 7px #999; }
#recensie_banner { float:left; width:75%; }
#recensie_logo { float:left; width:25%; text-align:center; }
#home { float:left; width:100%; }
#home_foto { position:relative; float:left; width:50%; padding-top:50%; background-image:url("beelden/testfoto4.jpg"); background-size:cover; margin-top:-25%; transform:translate(0,50%); }
#home_tekst { position:relative; float:right; width:56%; padding:2%; background-color:white; box-shadow: 0 0 7px #999; transform:translate(0,-50%); } #home_tekst a.leesmeer { float:right; margin-right:0; }
#abonneer { position:relative; float:left; margin:20px 0; padding:2% 40% 2% 2%; width:58%; background-color:#C21625; color:#FFF; box-shadow: 0 0 7px #999; } #abonneer a.abonneernu { position:absolute; top:50%; right:2%; transform:translate(0,-100%); }
#roodvlak { position:relative; float:left; padding:5%; width:90%; background-color:#C21625; }
#submenu { position:relative; float:left; width:200px; margin-right:15px; font-size:14px; line-height:24px; color:#FFF; } #submenu a { display:block; width:100%; color:#FFF; text-align:left; } #submenu a:hover { color:#333; font-weight:bold; }
#payoff { position:absolute; bottom:0; right:0; padding:5%; font-size:24px; line-height:40px; color:#FFF; text-align:right; }
#systemmechanic { position:absolute; right:5%; top:-150px; width:220px; height:345px; background-image:url("beelden/test-systemmechanic.png"); background-size:contain; }
#onder { float:left; width:100%; height:40px; padding:10px 0 10px 0; background-image:url(beelden/doorloop_onder.png); }
#copyright { float:right; margin-right:5%; height:40px; font-size:11px; line-height:40px; color:#FFF; } #copyright a { color:#FFF; } #copyright a:hover { color:#FFF; text-decoration:underline; }
a.foto { float:left; width:32%; margin:20px 1.7% 20px 0; border:0.5px #000 solid; } a.foto img { width:100%; }
a.foto:hover img { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
#spacer { float:left; width:100%; padding-top:2%; }
#menu_rechtsboven { position:absolute; right:5%; top:0; }

#support { float:left; width:100%; position:relative; padding-top:5%; }
#support_submenu { position:relative; float:left; width:24%; font-size:21px; line-height:24px; } #support_submenu a { float:right; width:100%; margin:10px 0; text-align:right; } #support_submenu a.downloadnu { text-align:left; width:70%; margin-top:30px; }
#support_tekst { float:right; width:72%; }
#rodelijn { position:absolute; display:block; left:26%; top:5%; margin-left:-3px; width:6px; height:95%; background-color:#C21625; }
a.foto_support { float:left; width:49%; margin:20px 0; } a.foto_support img { width:100%; }
a.foto_support:hover img { -webkit-filter: grayscale(100%); filter: grayscale(100%); }

/* PRODUCTEN */
#producten { float:left; width:100%; padding-top:40px; margin-top:40px; border-top:1px #000 solid; }
#producten_boxshot { float:left; width:15%; margin-right:5%; }
#producten_tekst { float:left; width:80%; }

/* WINKELWAGEN */
#winkelwagen { float:left; width:100%; padding:30px 0; }
#winkelwagen_foto { float:left; width:10%; margin-right:2.5%; }
#winkelwagen_tekst { float:left; width:75%; }
#winkelwagen_prijs { float:right; width:10%;  color:#000; text-align:center; font-size:18px; line-height:21px; font-weight:bold; }
#winkelwagen_onder { float:left; width: 87.5%; height:35px; line-height:35px; text-align:right; font-weight:bold; }
#winkelwagen_totaal { float:right; width:10%; height:35px; background-color:green; color:#FFF; text-align:center; font-size:21px; line-height:35px; font-weight:bold; border-radius:7px; }
#winkelwagen_kortingonder { float:left; width:87.5%; padding-right:2.5%; height:35px; margin-bottom:15px; line-height:35px; text-align:right; font-weight:bold; background-color:#E3E3E3; color:#0095D6; }
#winkelwagen_korting { float:right; width:10%; height:35px; margin-bottom:15px; background-color:#E3E3E3; color:#0095D6; text-align:center; font-size:21px; line-height:35px; font-weight:bold; }

/* Tekstinstellingen */
H1 { float:left; width:100%; font-family: 'Montserrat', sans-serif; font-weight:700; font-size:45px; line-height:50px; color:#C21625; margin:0 0 20px 0; text-align:center; }
H2 { float:left; width:100%; font-family: 'Montserrat', sans-serif; font-weight:700; font-size:23px; line-height:28px; color:#C21625; margin:0 0 10px 0; text-align:left; }
H3 { float:left; width:100%; font-family: 'Montserrat', sans-serif; font-weight:700; font-size:18px; line-height:24px; color:#FFF; margin:0; text-transform:uppercase; text-align:left; }
H4 { float:left; width:100%; font-family: 'Open Sans', sans-serif; font-size:18px; line-height:24px; font-weight:700; margin:10px 0; }
.rood { font-weight:700; color:#80180E; }
.blauw { color:#0095D6; }
.cursief { font-style:italic; }

/* Formulier instellingen */
.knop_formulier { float:left; margin:15px 15px 0 0; height:40px; font-size:18px; line-height:18px; font-weight:700; color:#FFF; background-color:#C21625; padding:0 20px; border:0; border-radius:5px; -webkit-appearance:none; text-transform:uppercase; }
.knop_formulier:hover { background-color:#000; color:#FFF; font-weight:700; }
.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:14px; line-height:20px; border-radius:0; -webkit-appearance:none; }
.formulier_tekstveld { height:116px; }
.formulier_list { width:100%; height:40px; border:1px; border-style:solid; border-color:#333; color:#333; background-color:#EEE; margin:5px 0 5px 0;  font-size:14px; line-height:40px; text-indent:0.4%; }
.formulier:hover, .formulier_tekstveld:hover, .formulier_list:hover { border-color:#C21625; background-color:#E3EAEF; }

/* Dit zijn de menu instellingen */
a.submenu { display:block; float:left; height:25px; padding:0 10px; border-left:1px #80180E solid; font-size:13px; line-height:25px; text-transform:uppercase; }
a.submenu:hover { color:#80180E; }

a.hoofdmenu { display:block; float:left; margin-right:15px; padding:5px 0; font-size:18px; line-height:25px; font-weight:bold; text-transform:uppercase; }
a.hoofdmenu:hover { color:#80180E; }

#menu { display:block; float:left; height:35px; font-size:18px; font-weight:700; text-transform:uppercase; }
#menu a { display:block; height:100%; line-height:25px; text-decoration:none; margin-right:30px; padding:5px 0; color:#FFF; font-weight:700; background:inherit; }
#menu a:hover { color:#000; }
#menu ul { list-style-type:none; margin:0; padding:0; color:#FFF; }
#menu li { color:#000; 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:#000; padding:10px 0; line-height:18px; font-weight:400; font-size:15px; text-transform:none; }
#menu ul li ul a:hover { color:#C21625; 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; }

#taalmenu { display:block; position:absolute; top:34px; left:20px; width:80px; height:50px; }
#taalmenu a { display:block; height:100%; line-height:25px; text-decoration:none; margin-right:30px; padding:5px 0; color:#FFF; font-weight:700; background:inherit; }
#taalmenu a:hover { color:#000; }
#taalmenu ul { list-style-type:none; margin:0; padding:0; color:#FFF; }
#taalmenu li { color:#000; float:left; }
#taalmenu ul li ul { display:none; background-color:#FFF; padding:10px 30px; box-shadow: 0 2px 3px black; }
#taalmenu ul li ul a { color:#000; padding:10px 0; line-height:18px; font-weight:400; font-size:15px; text-transform:none; }
#taalmenu ul li ul a:hover { color:#C21625; background-color:#FFF; font-weight:400; }
#taalmenu ul li ul li { float:none; color:#FFF; } /* min-width:120px; } */
#taalmenu ul li:hover ul { display:block; }

/* Links */
a.inloggen { float:right; margin:35px 0 0 15px; padding:15px; height:20px; line-height:20px; background-color:#0095D6; color:white; font-size:16px; font-weight:700; text-transform:uppercase; border-radius:10px; } a.inloggen img { margin-right:10px; }
a.inloggen:hover { background-color:#333; }

a.shop { float:right; margin:34px 0 0 15px; padding:12.5px 15px; height:25px; line-height:25px; color:#C21625; font-size:16px; font-weight:700; text-transform:uppercase; border:1px #DEDEDE solid; border-radius:10px; } a.shop img { margin-right:10px; }
a.shop:hover { background-color:#E5E5E5; }

a.taal { float:right; margin:34px 0 0 15px; padding:15px; width:50px; height:20px; line-height:20px; color:#C21625; font-size:16px; font-weight:700; text-transform:uppercase; border:1px #DEDEDE solid; border-radius:10px; } a.taal img { margin-left:10px; }
a.taal:hover { background-color:#E5E5E5; }

a.systemcheck { float:left; margin:0 0 40px 50%; transform:translate(-50%,0); padding:15px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:24px; line-height:24px; color:#FFF; background-color:#7CC623; box-shadow:5px 5px 0 #000; border-radius:7px; text-transform:uppercase; }
a.systemcheck:hover { background-color:#C21625; }

a.support_rood { color:#C21625; float:right; width:100%; margin:10px 0; text-align:right; }

a.verwijderen { float:left; margin-top:10px; font-size:12px; line-height:10px; padding:5px; border-left:1px #C72C22 dashed; border-top:1px #C72C22 dashed; color:#C72C22; font-weight:normal; text-align:center; }
a.verwijderen:hover { font-weight:normal; text-decoration:none; color:#0397D6; border-top-color:#0397D6; border-left-color:#0397D6; }

a.plus { margin-left:5px; padding:0 5px; height:12px; line-height:11px; text-align:center; color:#FFF; background-color:#C21625; }
a.plus:hover { background-color:#0397D7; }

a.terug { float:left; margin:15px 15px 0 0; height:40px; font-size:18px; line-height:40px; font-weight:700; color:#FFF; background-color:#0095D6; padding:0 20px; border:0; border-radius:5px; text-transform:uppercase; }
a.terug:hover { background-color:#000; color:#FFF; font-weight:700; }

a.button { float:left; margin:15px 15px 0 0; height:40px; font-size:18px; line-height:40px; font-weight:700; color:#FFF; background-color:#C21625; padding:0 20px; border:0; border-radius:5px; text-transform:uppercase; }
a.button:hover { background-color:#000; color:#FFF; font-weight:700; }

a.linkedin { display:block; float:right; margin-left:25px; width:40px; height:40px; background-image:url("beelden/linkedin.png"); background-repeat:no-repeat; }
a.twitter { display:block; float:right; margin-left:5px; width:40px; height:40px; background-image:url("beelden/twitter.png"); background-repeat:no-repeat; }
a.facebook { display:block; float:right; margin-left:5px; width:40px; height:40px; background-image:url("beelden/facebook.png"); background-repeat:no-repeat; }
a.linkedin:hover, a.twitter:hover, a.facebook:hover { opacity:0.35; }

a.leesmeer, a.koopnu, a.abonneernu, a.downloadnu { float:left; display:block; margin:15px 10px 0 0; padding:10px 50px 10px 15px; border-radius:10px; font-size:18px; line-height:20px; font-weight:400; color:#FFF; background-color:#C21625; text-shadow:none; 
background-image:url("beelden/pijlen.png"); background-repeat:no-repeat; background-position:95% 10px; text-transform:uppercase; }
a.koopnu { background-color:#0095D6; text-transform:uppercase; box-shadow:3px 3px 0 #000; font-weight:700; }
a.abonneernu { background-color:#7CC623; text-transform:uppercase; box-shadow:3px 3px 0 #000; font-weight:700; }
a.downloadnu { background-color:#C21625; text-transform:uppercase; box-shadow:3px 3px 0 #000; font-weight:700; }
a.leesmeer:hover, a.koopnu:hover, a.abonneernu:hover, a.downloadnu:hover { background-color:#333; }

a.regenmakers { display:block; float:left; margin-left:5%; 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; }