/* ---------- CSS RESET ---------*/
html, text, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ---------- HIER BEGINT MIJN CSS ---------*/



@font-face {font-family: 'conduit'; src: url('Conduit ITC.otf'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'conduit'; src: url('Conduit ITC Bold.otf'); font-weight: bold; font-style: normal;}

@font-face {font-family: aller; src: url(Aller_Rg.ttf); font-weight: normal; font-style: normal;}
@font-face {font-family: aller; src: url(Aller_Bd.ttf); font-weight: bold; font-style: normal;}
@font-face {font-family: aller; src: url(Aller_It.ttf); font-weight: normal; font-style: italic;}
@font-face {font-family: aller; src: url(Aller_BdIt.ttf); font-weight: bold; font-style: italic;}

@font-face {font-family: calibri; src: url(calibri-webfont.woff); }
@font-face {font-family: calibri; font-weight:bold; src: url(calibrib-webfont.woff); }
@font-face {font-family: calibri; font-style:italic; src: url(calibrii-webfont.woff); }



html, body {height: 100%; width: 100%; font-family : conduit, aller, Calibri, Tahoma,  Verdana; font-size : 20px; line-height: 28px; color: #fff; background: #fff; }

p {}
h1 {font-family: conduit; font-size: 32px; color: #fff;  padding-bottom: 20px; padding-top: 30px; font-weight: bold; font-style: normal; text-transform:uppercase;}
h2 {font-family: conduit; font-size: 28px; color: #fff;  padding-bottom: 10px; padding-top: 30px; font-weight: bold; font-style: normal; text-transform:uppercase;}
h3 {font-family: conduit; font-size: 18px; color: #fff;  font-weight: bold; font-style: normal; text-transform:uppercase;}


a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}

.clear { clear: both; }

/* ---------- BASIS ---------*/


#totalWrapper {margin: auto;}
#totalWrapper div .content {margin: 0 auto;  width:940px; min-height: 30px; padding: 0 20px;}

.wit, .lichtgrijs {color: #4b575f;}
.wit h1, .lichtgrijs h1 {color: #4b575f;}

.lichtgrijs {background: #e9ebed;}
.donkergrijs {background: #97b7a5;}
.groen {background: #b7a997;}
.wit {background: #fff;}

.lichtgrijs a {color: #88ba14;}
.lichtgrijs h1 a {color: #4b575f; text-decoration: none;}
.donkergrijs a {color: #88ba14;}
.donkergrijs h1 a {color: #fff; text-decoration: none;}
.groen a {color: #fff;}
.groen h1 a {text-decoration: none;}
.wit a {color: #88ba14;}
.wit h1 a {color: #4b575f; text-decoration: none;}


/* ---------- HEADER ---------*/
#header {height: 175px;}
#header h1 {font-weight: normal;}
#header #logo {background: url(../images/quingo-logo.png) no-repeat 0px 0px; margin-top: 47px; margin-left: 0px;  width:200px; height: 64px; position: absolute;}
#header #scootmobiel {margin-top: 40px; margin-left: 209px;  width:285px; height: 30px; position: absolute;}
#header #scootmobiel h1 {font-size: 36px;}
#header #veilig {margin-top: 100px; margin-left: 317px;  width:450px; height: 25px; position: absolute; z-index:999;}
#header #veilig h1 {font-size: 22px;}
#header #img {background: url(../images/quingo-scootmobiel.png) no-repeat 0px 0px; margin-top: 0px; margin-left: 510px;  width:430px; height: 150px; position: absolute;}

/* ---------- FACEBOOK ---------*/
#facebook {height: 147px;}
#facebook h3 {color: #4b575f;}
#facebook #gijsPijl {background: url(../images/gijs-pijl-facebook.png) no-repeat 0px 0px; margin-top: 20px; margin-left: 68px;  width:70px; height: 50px; position: absolute;}
#facebook #gijs {background: url(../images/gijs-facebook.png) no-repeat 0px 0px; margin-top: -50px; margin-left: 98px;  width:288px; height: 197px; position: absolute;}
#facebook #tekst {margin-top: 40px; margin-left: 396px;  width: 215px; height: 88px; position: absolute;}
#facebook #pijl {background: url(../images/pijl-facebook.png) no-repeat 0px 0px; margin-top: 54px; margin-left: 623px;  width:32px; height: 18px; position: absolute;}
#facebook #facebookButton {margin-top: 55px; margin-left: 690px;  width:236px; height: 104px; position: absolute;}


/* ---------- MENU ---------*/
#menu {height: 40px;}
#menu li {float: left; margin-right: 30px; padding: 6px 0;}
#menu li a {color: #bcc2c7;}
#menu li a:hover {color: #88ba14;}


/* ---------- BROCHURE ---------*/
.groen #broImg {background: url(../images/quingo-scootmobiel-brochure.png) no-repeat 0px 0px; width: 450px; height: 485px; margin-top: 150px; margin-left: 490px; position: absolute;}
.groen #counter {background: #e9ebed; width: 320px; margin-top: 30px; margin-left: 550px; padding: 15px 30px; position: absolute; color: #4b575f; font-weight: bold; font-size: 22px; border-radius: 0px 40px 0px 40px;}
.groen #counter .count {color: #88ba14; font-size: 30px;}

#brochureWrapper {width: 360px; min-height: 200px; margin: 20px 0px; padding: 0 20px; position: relative; float: left; background: #4b575f; border-radius: 0px 40px 0px 40px;}
#brochure {width: 360px; min-height: 200px; padding: 50px 0;}
#brochure .veld1 {width: 130px; height: 30px;  float: left; position: relative; padding: 5px 0;}
#brochure .veld2 {width: 180px; height: 40px; float: left; position: relative;}
#brochure .veld3 {width: 180px; height: 30px;  float: left; position: relative;}
#brochure .veld4 {background: url(../images/check.png) no-repeat 0px 0px; width:30px; height: 30px; float: left; margin-left:10px; margin-top:5px; position: relative;}
#brochure .verzenden_wrapper {width: 300px; margin: 30px 0 0 0px;}
#brochure .verzenden {width: 220px; margin-left: 50px; background: #97bf0d; text-align: center; border:0; font-family: conduit; font-size: 32px; color: #fff;  padding: 8px; font-weight: bold; font-style: normal;}
#brochure .verzenden:hover {background: #fff; color: #97bf0d; cursor:pointer;}
#brochure .verzenden h1 {padding:10px;}
#brochure .elle {background: url(../images/elle.png) no-repeat 0px 0px; width:320px; height: 373px; margin-bottom: -50px;}
#brochure .elle .pijl {background: url(../images/elle-pijl.png) no-repeat 0px 0px; width:70px; height: 21px; position: absolute; margin-left: 240px; margin-top: 15px;}


/* ---------- VERBETERD ---------*/

#verbeterd .gerard {background: url(../images/gerard-verbeterd.png) no-repeat 0px 0px; background-position: right bottom; left: 305px; top: 230px; width:250px; height: 550px; position: absolute; z-index: 99999;}
#verbeterd .gerardPijl {background: url(../images/gerard-pijl.png) no-repeat 0px 0px; margin-left: 410px; margin-top: 170px; width:105px; height: 40px; position: absolute;}
#verbeterd .tekst {width:500px; position: relative; float: left; min-height: 700px;}
#verbeterd .tekst .small {width:300px; position: relative; float: left; margin-top: 20px;}

#verbeterd {padding-bottom: 30px; padding-top: 20px; width:540px; float: left; position: relative;}
#verbeterd ul {padding: 30px 25px; list-style-image: url(../images/check.png); font-size: 24px; color: #fff;  padding-bottom: 20px; padding-top: 30px; font-weight: bold; font-style: normal; text-transform:uppercase;}
#verbeterd ul li a {color: #fff; }
#verbeterd ul li a:hover {color: #4b575f; text-decoration: none;}



/* ---------- SERIE ---------*/
#scootmobielen {width: 940px; }
#scootmobielen div {width: 134px; height: 320px; float: left; position: relative; margin-bottom: 40px;  cursor:pointer;}


#scootmobielen .compact {background: url(../images/scootmobielen/compact-scootmobiel.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .compact:hover {background: url(../images/scootmobielen/compact-scootmobiel-hover.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .air {background: url(../images/scootmobielen/air-scootmobiel.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .air:hover {background: url(../images/scootmobielen/air-scootmobiel-hover.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .classic {background: url(../images/scootmobielen/classic-scootmobiel.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .classic:hover {background: url(../images/scootmobielen/classic-scootmobiel-hover.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .plus {background: url(../images/scootmobielen/plus-scootmobiel.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .plus:hover {background: url(../images/scootmobielen/plus-scootmobiel-hover.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .vitess {background: url(../images/scootmobielen/vitess-scootmobiel.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .vitess:hover {background: url(../images/scootmobielen/vitess-scootmobiel-hover.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .toura {background: url(../images/scootmobielen/toura-scootmobiel.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .toura:hover {background: url(../images/scootmobielen/toura-scootmobiel-hover.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .flyte {background: url(../images/scootmobielen/flyte-scootmobiel.png) no-repeat 0px 0px; background-position: center bottom;}
#scootmobielen .flyte:hover {background: url(../images/scootmobielen/flyte-scootmobiel-hover.png) no-repeat 0px 0px; background-position: center bottom;}



/* ---------- DETAILS ---------*/

.nellekePijl {background: url(../images/nelleke-pijl.png) no-repeat 0px 0px; margin-left: 300px; margin-top: 200px; width:68px; height: 60px; position: absolute; z-index:999999999;}
.nellekeDetail {background: url(../images/details/nelleke.png) no-repeat 0px 0px; margin-left: 0px; margin-top: 0px; width:489px; height: 653px; position: absolute; z-index:0;}

#imgnav {width: 570px; min-height: 920px; float: left; position: relative;}
#imgnav .img_field {width: 410px; float: left; position: relative; padding-top: 60px;}


#bt1a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt1a #bt1 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt1a:hover > #bt1 {   display: block;}
#bt1a:hover {   opacity: 1;}

#bt1a {left: 50px; top: 236px;}
#bt1 {left: 10px; top: -130px; background: url(../images/details/stoel.png) no-repeat 0px 0px; width: 233px; height: 394px;  z-index:0;}


#bt2a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt2a #bt2 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt2a:hover > #bt2 {   display: block;}
#bt2a:hover {   opacity: 1;}

#bt2a {left: 184px; top: 276px;}
#bt2 {background: url(../images/details/stuurgrepen.png) no-repeat 0px 0px; width: 178px; height: 30px; z-index:2;}


#bt3a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt3a #bt3 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt3a:hover > #bt3 {   display: block;}
#bt3a:hover {   opacity: 1;}

#bt3a {left: 69px; top: 316px;}
#bt3 {left: -20px; top: -5px; background: url(../images/details/armleuning.png) no-repeat 0px 0px; width: 221px; height: 165px; z-index:2;}


#bt4a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt4a #bt4 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt4a:hover > #bt4 {   display: block;}
#bt4a:hover {   opacity: 1;}

#bt4a {left: 136px; top: 521px;}
#bt4 {left: -100px; top: -200px; background: url(../images/details/gewicht.png) no-repeat 0px 0px; width: 433px; height: 304px; z-index:1;}


#bt5a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt5a #bt5 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt5a:hover > #bt5 {   display: block;}
#bt5a:hover {   opacity: 1;}

#bt5a {left: 278px; top: 240px;}
#bt5 {left: -30px; top: 6px; background: url(../images/details/display.png) no-repeat 0px 0px; width: 106px; height: 67px; z-index:1;}


#bt6a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt6a #bt6 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt6a:hover > #bt6 {   display: block;}
#bt6a:hover {   opacity: 1;}

#bt6a {left: 312px; top: 278px;}
#bt6 {left: -80px; top: 0px; background: url(../images/details/verlichting.png) no-repeat 0px 0px; width: 235px; height: 341px; z-index:1;}


#bt7a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt7a #bt7 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt7a:hover > #bt7 {   display: block;}
#bt7a:hover {   opacity: 1;}

#bt7a {left: 403px; top: 460px;}
#bt7 {left: -100px; top: -50px; background: url(../images/details/mandje.png) no-repeat 0px 0px; width: 169px; height: 132px; z-index:1;}


#bt8a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt8a #bt8 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt8a:hover > #bt8 {   display: block;}
#bt8a:hover {   opacity: 1;}

#bt8a {left: 359px; top: 667px;}
#bt8 {left: -340px; top: -120px; background: url(../images/details/wielen.png) no-repeat 0px 0px; width: 454px; height: 145px; z-index:1;}


#bt9a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt9a #bt9 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt9a:hover > #bt9 {   display: block;}
#bt9a:hover {   opacity: 1;}

#bt9a {left: 130px; top: 180px;}
#bt9 {left: 0px; top: -90px; background: url(../images/details/zithouding.png) no-repeat 0px 0px; width: 249px; height: 402px; z-index:1; }


#bt10a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt10a #bt10 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt10a:hover > #bt10 {   display: block;}
#bt10a:hover {   opacity: 1;}

#bt10a {left: 473px; top: 610px;}
#bt10 {left: -180px; top: 0px; background: url(../images/details/bumper.png) no-repeat 0px 0px; width: 190px; height: 48px; z-index:1;}


#bt11a { position: absolute; opacity: 0.5; cursor:pointer; background: url(../images/vergrootglas.png) no-repeat 0px 0px; width: 30px; height: 30px; z-index:3;}
#bt11a #bt11 { position: absolute; opacity: 0.5; cursor:pointer; display: none; }
#bt11a:hover > #bt11 {   display: block;}
#bt11a:hover {   opacity: 1;}

#bt11a {left: 232px; top: 520px;}
#bt11 {left: -20px; top: -20px; background: url(../images/details/voetsteunen.png) no-repeat 0px 0px; width: 244px; height: 105px; z-index:1;}

.targetDiv {width: 370px; float: left; position: relative; padding-top: 100px; padding-bottom: 40px;}
.targetDiv h3 {font-family: conduit; font-size: 30px; color: #4b575f;  font-weight: bold; font-style: normal; text-transform:uppercase; margin-bottom: 20px;}
.targetDiv b {font-family: conduit; font-weight: bold; font-style: normal;}
.targetDiv p {margin-bottom: 20px;}



/* ---------- VOORDELEN ---------*/

#voordelen {min-height: 500px;}

#voordelen a, #voordelen a h1  {text-decoration: none;}

#voordelen .rudi {background: url(../images/rudi.png) no-repeat 0px 0px; width: 361px; height: 500px; margin-top: 0px; margin-left: 450px; position: absolute;}
#voordelen .rudiPijl {background: url(../images/rudi-pijl.png) no-repeat 0px 0px; margin-left: 730px; margin-top: 30px; width:48px; height: 56px; position: absolute;}


#voordelen ul {padding: 30px 25px; list-style-image: url(../images/check.png); font-size: 24px; color: #fff;  padding-bottom: 20px; padding-top: 30px; font-weight: bold; font-style: normal; text-transform:uppercase;}
#voordelen ul li {color: #fff; padding-bottom: 20px; }
#voordelen ul li:hover {color: #4b575f; text-decoration: none;}
#voordelen a:hover {text-decoration: none;}


/* ---------- ANWB ---------*/


#anwb .anita {background: url(../images/anita.png) no-repeat; background-position: left bottom; width:400px; height: 810px; position: relative; float: left;}
#anwb .logo {background: url(../images/ANWB.png) no-repeat 0px 0px; margin-top: 30px; width:200px; height: 103px; position: absolute;}
#anwb .anitaPijl {background: url(../images/anita-pijl.png) no-repeat 0px 0px; margin-left: 270px; margin-top: 170px; width:93px; height: 25px; position: absolute;}
#anwb .tekst {position: relative; float: left; width:400px;}
#anwb ul {padding: 30px 25px; list-style-image: url(../images/check.png); font-size: 22px; color: #fff;  padding-bottom: 20px; padding-top: 30px; font-weight: bold; font-style: normal; text-transform:uppercase;}
#anwb ul li {color: #fff; padding-bottom: 20px;}
#anwb ul li:hover {color: #4b575f; text-decoration: none;}
#anwb a:hover {text-decoration: none;}

/* ---------- LOGO ---------*/

#logopag {padding: 50px 0px;}
#logopag .blok {width: 350px; position: relative; float: left; background: #fff; border-radius: 0px 60px 0px 60px; margin: 0px 30px 50px 30px; padding: 30px;}
#logopag .blok h2 {color: #4b575f; padding-top: 0px;}
#logopag a {color: #4b575f;}
#logopag .blok .text { padding-top: 15px;}

#logopag .blok:hover {background: #b7a997; color: #fff;}
#logopag .blok:hover > .text ul li span {color: #4b575f;}

#logopag ul {padding-bottom: 20px; padding-top: 30px; }
#logopag li {background-image: url(../images/star.png); background-repeat: no-repeat; background-position: 0px 0px; padding: 10px 0px 10px 55px; font-size: 24px;}
#logopag .blok .text ul li span {font-weight: bold; font-size: 20px; color: #88ba14;}


#logopag .logoFra {background: url(../images/logo/frazer-nash.png) no-repeat 0px 0px; width: 350px; height: 140px;}
#logopag .logoAwa {background: url(../images/logo/succesaward.png) no-repeat 0px 0px; width: 350px; height: 190px;}
#logopag .logoFac {background: url(../images/logo/succesfactor.png) no-repeat 0px 0px; width: 350px; height: 100px;}
#logopag .logoRtl {background: url(../images/logo/rtl7.png) no-repeat 0px 0px; width: 350px; height: 140px;}
#logopag .logoReh {background: url(../images/logo/rehacare.png) no-repeat 0px 0px; width: 350px; height: 120px;}



/* ---------- PROEFRIT ---------*/

#ritWrapper {height: 245px;}
#busgijs {height: 245px; width:377px; position: relative; float: left;}
#rittekst {height: 245px; width:560px; position: relative; float: left;}


#busgijs #bus {background: url(../images/rit-bus.png) no-repeat 0px 0px; margin-top: 55px; margin-left: 10px;  width:213px; height: 167px; position: absolute;}
#busgijs #gijspijl {background: url(../images/rit-gijs-pijl.png) no-repeat 0px 0px; margin-top: 30px; margin-left: 100px;  width:81px; height: 21px; position: absolute;}
#busgijs #gijs {background: url(../images/rit-gijs.png) no-repeat 0px 0px; margin-top: 12px; margin-left: 180px;  width:254px; height: 233px; position: absolute;}