@charset "utf-8";
/* CSS Document written by protolan.be */
/*        ALL RIGHTS RESERVED          */
/*      NO MODIFICATION ALLOWED        */

/*-- HTML ELEMENTS --*/
html{
	font-size: 14px; /* base */
}
body{
	margin: 0 auto;
	/*font-family: 'Merienda One', cursive;*/
	font-family: 'Josefin Sans', sans-serif;
	background:#ffff;
	width: 100%;
}

h1, h2, h3, h4, p{color:#FFF; text-align:center; width: 100%; margin: 0px; padding: 0px; float: left; word-break:break-all;}

h1, h2, h3, h4{text-transform:uppercase;font-family: 'Merienda One', cursive;}

p{
	font-weight: 400;
	position:relative;
	font-size: 1em;
	text-transform:none;
}

h1{font-size: 4em;}
h2{font-size: 3em;}
h3{font-size: 2em; font-weight: 700;}
h4{font-size: 1.5em; font-weight: 700;}

a:link, a:visited, .subfont:link{ color:#FFF; text-decoration: none;}
a:hover, a:active, .subfont:hover{ color:#FF0000; text-decoration: none;}

/*-- GENERAL ELEMENTS --*/
.fullwidth{
	width: 100%;
	float: left;
	margin: 0px;
	padding: 0px;
	position:relative;
	overflow:hidden;
}
.strong{font-weight: 700;}
.light{font-weight: 300;}

/*-- LOGO --*/
.logo{display: block; margin: 0 auto;}
#logo{opacity:0; filter: alpha(opacity=0); padding: 40px 0px 20px 0px; z-index: 10; position:relative;}
#footer .logo-bullit{padding: 0;}

/*-- VEHICLE REGISTRATION --*/
#registration{ background: #f0e915; text-align: center;}
#registration a:link, #registration a:visited{color: #000;}

/*-- STYLING MENU --*/
.menu-basic{ position: relative; top: 0; z-index:100;} /*-- TO KEEP MENU ON TOP SIDE --*/
.menu-top{ position: fixed; top: 0; z-index:100;} /*-- TO KEEP MENU ON TOP SIDE --*/
#navigatie{z-index:7000; opacity:0; filter: alpha(opacity=0);}
#navigatie a:link, #navigatie a:visited{ font-size: 0.9em; text-transform:uppercase; color:#FFF; text-decoration: none;}
#navigatie a:hover, #navigatie a:active{ color:#FFFFFF; }

/*-- TABLE TO ALIGN VERTICALLY --*/
.table-outer{display: table; position: absolute; height: 100%; width: 100%;}
.table-middle{display: table-cell; vertical-align: middle;}
.table-inner{margin-left: auto; margin-right: auto; width: 100%;}

/*-- LANGUAGE SELECTION --*/
.languages{ position:absolute; right: 0; float: right; top: 200px; background:#FFFFFF; color:#000000; width: 45px; z-index:999;}
.languages a{ float: left; padding: 0px 10px 0px 10px; font-size:20px; text-transform: uppercase; width: 94%; color:#000;}
.languages a:hover, .languages a:active{color:#FF0000;}

/*-- HOME --*/
#home{ width: 100%; min-height: 100vh; background: #000000 url(../htmimg/band01.jpg) top center repeat-x; overflow:hidden;}
#home #bgimage{position: absolute; z-index:1; width: auto; height: 100vh; display:none; /*margin: 0 auto;*/}
/*#home #scooter{position: absolute; z-index:-5; width: auto; height: 100%; display:none;}*/
#home #intro{display:none; z-index:10;}
#home h1{margin-top: 100px; overflow:hidden; color:#FFF; z-index:10;}
#home p{ font-weight: bold; margin-bottom: 100px; color:#FFF; z-index:10;}
#logo-header{ width: 50%; height: auto; float: left; margin: 100px 0 100px 25%;}

/*-- MODELLEN --*/
.modellen{ background:#FFFFFF; overflow:hidden; padding: 100px 0px 100px;}
.modellen h1{color:#000;}
.modellen .instafilter, .instafilter{ position:absolute; top: 0; left: 0; bottom: 0; right: 0; z-index:20; width:100%; height: 100%; margin-top: 0px;}
.modellen .wrapper{float: left; overflow:hidden; width: 100%;}
.modellen .wrapper .inner{float: left; margin-left: 25vw; white-space:nowrap; display:inline-block;}
.modellen .model{width:50vw; display:inline-block; padding: 0; margin: 0; position:relative; /*z-index:10;*/}
.modellen .model img{width: 100%; height: auto; float: left; position:relative; z-index: 10;}
.modellen .model .info{ padding: 0.5em; position:absolute; bottom: 0; left: 0; background:#000; z-index: 10; max-width:30vw;}
.modellen .model .info h2{color:#fff; font-size:0.7em; max-width: 30vw; white-space:normal; display:block; position:relative;}
.modellen .model .info p{color:#fff; font-size:0.5em;}
.modellen #info{text-align: center; position:relative; z-index: 100; float: left; padding-top: 20px; margin-top: 20px; border-top: 5px solid #000;}
.modellen .model a{position:absolute; top: 0; bottom: 0; left: 0; right: 0; float: left; z-index: 30;}
.modellen .arrow-left{position:relative; width: 10vw; height: auto; z-index: 40; float: left;}
.modellen .arrow-right{position:relative; width: 10vw; height: auto; z-index: 40; float: right;}
.modellen .arrow-left img, .modellen .arrow-right img{width: 100%; float: left; height: auto; border: 0; opacity:0.8;}
.modellen .arrow-left img:hover, .modellen .arrow-right img:hover{opacity:1;}
.modellen a:link, .modellen a:visited{color:#000;}
.modellen a:hover, .modellen a:active{color:#F00;}

/*-- DETAILS --*/
#details{background:url(../htmimg/band07.jpg) top center repeat; padding-bottom:100px;}
#details h1{ margin-top: 150px;}
#details p{ margin-bottom: 50px; }
.detail img{width: 100%; height: auto; margin: 0; padding: 0; border: 0;}

/*-- GALLERY --*/
#gallery{background:#051417; overflow:hidden;}
#gallery a{float: left; position:relative;}
#gallery img, #gallery img:link{float: left; width: 200px; height: 200px; border: 0; margin: 0; padding: 0; position:relative;}


/*-- YOUTUBE --*/
#youtube{background:#000000; position:relative; height: 0; padding-bottom: 60%;}
#youtube #video{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/*-- DEALERS --*/
#dealers{background:#000000;}
#map-canvas{width: 100%; float: left; height: 500px;}

/*-- NIEUWS --*/
#nieuws{padding-top: 150px; padding-bottom: 150px; background:url(../htmimg/band03.jpg) top center repeat;}
#nieuws .nieuwsitem p{text-align:left; font-weight:300; }
#nieuws .nieuwsitem a:link{text-decoration: underline; width: 100%; float: left; margin-bottom: 50px;}
#nieuws #meernieuws{ border-top: 1px solid #000000; }
#nieuws #meernieuws a{margin: 0 auto; display:table; position:relative; background:#000000; color:#000000; padding: 10px; font-size: 1.3em;}
.nieuwsitem img{width: 100%; height: auto; margin: 0; padding: 0; border: 0;}

/*-- DOWNLOADS --*/
#downloads a:link, #downloads a:visited{font-size: 1em; text-decoration: none; color:#000;}

/*-- CONTACT
#contact{background: url(../htmimg/band04.jpg) right top repeat-x; padding-top: 150px; padding-bottom: 150px;}
#contact p{font-weight: 300; }
#contact a:link{text-decoration: underline; width: 100%; float: left; text-align:center;}
#contact .labels{ width: 100%; float: left; background: none; border: 1px solid #FFF; color:#FFF; text-transform:uppercase; font-size: 1em; font-family: 'Josefin Sans', sans-serif;}
#contact .buttons{background:#FFF; color:#000; padding:10px; margin: 0 auto; border-radius: 4px;}
#contact .buttons:link{text-decoration: none;}
#contact .buttons:hover{text-decoration: none; background:#CCCCCC;}
#frmWait{display:none;}
#frmSucces{display:none;}--*/

/*-- CONTACT NEW --*/
#contact{background: url(../htmimg/band04.jpg) right top repeat-x; padding-top: 150px; background-size: auto 100%; padding-bottom: 150px;}
#contact .box{float:left;}
#contact h1{margin-bottom: 50px;}
#contact h3{font-weight:100; word-break:normal;}
#contact p{font-weight:100; word-break:normal; font-size: 1em;}
#contact #step01 #left, #contact #step01 #right{float: left; padding: 2%}
#contact #step01 h3{ text-align: center; }
#contact #step01 #arrow{float: left; margin-top: 20px; margin-bottom: 20px; width: 40%; margin-left: 30%;}
#contact #step01 #arrow:hover{opacity: 0.7; filter: alpha(opacity=70); /* For IE8 and earlier */}
#contact #step02 .box{float:left; padding: 2%;}
#contact h3{text-align:left; font-weight: bold; font-family: 'Josefin Sans', sans-serif; font-size: 1.5em;}
#contact p{text-align:left;}
#contact label{width: 100%; float: left; color:#FFF; font-family: 'Josefin Sans', sans-serif; font-size: 1.2em; font-weight: 100;}
#contact input[type=text], #contact textarea{padding: 2%; width: 96%; float: left; background:#e5e5e5; color:#000;}
#contact .buttons{background:#FFFFFF; color:#000000; padding:10px; margin: 0 auto; border-radius: 4px;}
#contact .buttons:link{text-decoration: none;}
#contact .buttons:hover{text-decoration: none; background:#CCCCCC;}
#contact #step03 #wrapper{width: 100%; height: 5em; float: left; position:relative;}
#contact #step03 #wrapper #textbox{position: absolute; top: 0; bottom: 0; left: 0; right: 0; font-weight: bold; font-size: 1.5em;}
#contact #step03 #wrapper #btn{position: absolute; top: 20px; right: 20px; z-index:500;}
#contact #step03 #wrapper #btn:link, #contact #step03 #wrapper #btn:visited{color:#000;}
#contact #step03 #wrapper #btn:hover, #contact #step03 #wrapper #btn:active{color:#ccc;}
#contact #step03 .result{float: left; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #fff;}
#contact #step03 .result a:link{font-size: 1em;}

/*-- FILTERS --*/
.filter{background:#000000; position:absolute; top: 0; bottom: 0; width: 100%; float: left; opacity:0; filter: alpha(opacity=0); float: left;}

/*-- PAGE NEWS --*/
#nieuwsheader{background:url(../htmimg/band03.jpg) top center repeat; position:relative;}
#nieuwsheader .content{float: left; width: 100%; margin-top: 100px;}
#nieuwsheader h1{text-align: left; }
#nieuwspagina{padding: 100px 0px 100px 0px;}
#nieuwspagina p{font-weight: 300; text-align:left }

/*-- PAGE MODEL --*/
#modelheader{background:url(../htmimg/band05.jpg) top center repeat; position:relative;}
#modelheader .content{width: 100%; float: left; margin-top: 100px; margin-bottom: 50px;}
#technisch{background:url(../htmimg/band06.jpg) top center repeat; padding: 150px 0px 150px 0px;}
.spacer{float: left; height: 1px; width: 100%; background:#000000; margin: 50px 0px 50px 0px;}
#technisch .light{margin-bottom: 20px;}

/*-- FOOTER --*/
#footer{padding-top: 150px;}
#footer p{font-weight: 300; font-size: 12px; color:#000;}
#footer a:link, #footer a:visited{font-size: 1em; text-decoration: underline; color:#000;}
#footer .icons{width:43px; height: 44px; margin: 5px;}
#footer .centered{display: table; text-align:center; padding-bottom: 20px;}