/*
* CSS Perfonmance Industries
* Date: 23-06-2014
*/

/* RESET*/
	html, 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;}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block;}
	body{ line-height: 1;}
	blockquote, q{	quotes: none;}
	blockquote:before, blockquote:after,q:before, q:after{ content: ''; content: none;}
	table{	border-collapse: collapse; border-spacing: 0;}
	ol, ul{ list-style: none;}
	
	header, section, footer, aside, nav, main, article, figure{ display: block; }
/* END RESET */


html{ margin:0px; height:100%;}
body{ margin:0px; background:url(../images/bg.jpg) repeat-x #000; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#383838;}

a{ color:#7f644e; text-decoration:none; outline:none;}
a:hover{ color:#000;}
a img{ border:none;}

.justifyright{ text-align:right;}
.center{ text-align:center;}

b,strong{ font-weight:bold;}
i,em{ font-style:italic;}

.dvl{ float:left; width:45%;}
/* SMARTPHONE */@media screen and (max-width: 767px) {	.dvl{ float:left; width:100%;}}
.dvr{ float:right; width:45%;}
/* SMARTPHONE */@media screen and (max-width: 767px) {	.dvr{ float:left; width:100%;}}

#container{ margin:0 auto; position:relative; }
/* SMARTPHONE */@media screen and (max-width: 767px) {	#container{ width:90%;}}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){	#container{ width:740px;}}
/* DESKTOP */@media screen and (min-width: 1024px) { #container{ width:1024px;}}
		
header{ min-height:138px; overflow:hidden;padding:0px; position:relative;  }


#logo{ background:url(../images/logo.jpg) no-repeat; width:171px; height:135px; display:block; float:left; margin-top:7px;}



/* -----------------------     MENU   -------------------------- */


.menu-link { display: none;}
.menu { float: right; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}
.menu ul { padding:0px; margin:0px; margin-right:-8px; list-style:none; position:relative; display:inline-table; margin-top:45px;}
.menu > li > ul.sub-menu { min-width:10em; padding:4px 0; background-color:#f4f4f4; border:1px solid #CCC; } 
.menu ul li { padding: 0px; }
.menu > ul > li { display: inline-block; }
.menu ul li a { display:block; font-family:'Stardos Stencil', cursive; text-transform:uppercase; color:#c3c3c3; margin-left:10px; font-weight:bold; font-size:17px; }
.menu ul li a:hover, .menu ul li.active a{ color:#fcbb3f; border-bottom:4px solid #fff;}
.menu ul li > a { padding:10px 0px;  margin:8px; }

.menu ul li > ul{ display:none;}
.menu ul ul { display:none; }
.menu ul li:hover > ul { display: none; }

  .menu ul ul{ display:none;}
.menu ul ul > li { position: relative; }
.menu ul ul > li a { padding: 5px 15px 5px 10px; height: auto; background-color: #f4f4f4; }
.menu ul ul > li a:hover { background-color: #42BBA3; color: #fff; }
.menu ul ul ul { position: absolute; left: 100%; top:0; }

/* SMARTPHONE + TABLET */@media screen and (max-width: 1023px) {
  .example-header .container { width: 100%; }
  
  a.menu-link { display: block; color: #fff; background-color: #333; float: right; text-decoration: none; padding: 19px 10px;}
  .menu { clear: both; min-width: inherit; float: none; }
  .menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #1a1a1a; }
  .menu > li > ul.sub-menu { padding: 0px; border: none; }
  .menu.active, .menu > ul ul.active { max-height: 55em; }
  .menu ul { display: inline; }
  .menu > ul {  }
  .menu li, .menu > ul > li { display: block;  width:50%; float:left;}
  .menu ul li a { color: #000; display: block; position: relative; font-size:12px;color: #fff; font-family:Verdana, Geneva, sans-serif; width:50%; float:left;  }
  .menu ul li a:hover, .menu ul li.active a{ color:#fcbb3f; border-bottom:none;}
   .menu ul li > a { line-height:14px; padding: 5px 0px; margin:10px; }
  .menu li.has-submenu > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 1.5em;
    padding: 0.55em 0.5em;
  }
  .menu li.has-submenu > a.active:after {
    content: "-";
  }
  .menu ul ul{ display:none;}
  .menu ul ul > li a { background-color: #e4e4e4; height:58px; padding: 19px 18px 19px 30px; }
  .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }
}




/* -----------------------    MIDDLE  ----------------------- */



section#middle{ overflow:hidden; margin-bottom:40px; }

/* -----------------------    INTROBALK ----------------------- */
	
#introbalk{ background:#043aa6; height:317px;   overflow:hidden; margin-bottom:7px;}
/* SMARTPHONE */@media screen and (max-width: 767px) {	#introbalk{ height:auto; }}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){ 	}
/* DESKTOP */@media screen and (min-width: 1024px) { }

#introbalk #foto{  width:433px; }
/* SMARTPHONE */@media screen and (max-width: 767px) {	#introbalk #foto{ width:100%; }}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){#introbalk #foto{ float:left;} 	}
/* DESKTOP */@media screen and (min-width: 1024px) {#introbalk #foto{ float:left;}  }

#introbalk #foto img{width:100%; height:auto;}

#introbalk #intro{  }
/* SMARTPHONE */@media screen and (max-width: 767px) {	#introbalk #intro{ width:auto; padding:15px; }}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){	#introbalk #intro{ width:255px; padding:30px 20px;float:left; }}
/* DESKTOP */@media screen and (min-width: 1024px) { #introbalk #intro{ width:470px; padding:50px;float:left; }}

#introbalk #intro h1{ line-height:130%; font-weight:bold; color:#fff; text-shadow: 2px 2px #01154e;  text-transform:uppercase;}
/* SMARTPHONE */@media screen and (max-width: 767px) {	#introbalk #intro h1{ font-size:16px; }}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){	#introbalk #intro h1{ font-size:210%; }}
/* DESKTOP */@media screen and (min-width: 1024px) { #introbalk #intro h1{ font-size:400%; }}

#introbalk #intro h2{ font-size:18px; font-weight:bold; text-transform:uppercase; color:#031333; line-height:130%;}
/* SMARTPHONE */@media screen and (max-width: 767px) {#introbalk #intro h2{ font-size:14px; }	}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){	#introbalk #intro h2{ font-size:16px; }}
/* DESKTOP */@media screen and (min-width: 1024px) {}

#introbalk #intro h2 b{ font-size:23px;}
/* SMARTPHONE */@media screen and (max-width: 767px) {#introbalk #intro h2 b{ font-size:18px; }	}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){	#introbalk #intro h2 b{ font-size:20px; }}
/* DESKTOP */@media screen and (min-width: 1024px) {}

#introbalk #intro a{ float:right; color:#fff; text-transform:uppercase; font-size:10px; margin-top:15px; margin-bottom:10px;}


/* -----------------------    FB ----------------------- */

aside#fb{ color:#fff;  width:163px; float:left; text-transform:uppercase; font-size:10px; line-height:12px; margin-bottom:10px;}
/* SMARTPHONE */@media screen and (max-width: 767px) {aside#fb{ display:none;}	}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){}
/* DESKTOP */@media screen and (min-width: 1024px) {}
aside#fb h1{ background:url(../images/fb.jpg) no-repeat; width:163px; height:60px; text-indent:-999999px;}
aside#fb div{ max-height:400px; overflow:auto; overflow-x:hidden;}
/* SMARTPHONE */@media screen and (max-width: 767px) {}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){aside#fb div{ max-height:250px; overflow:auto;} }
/* DESKTOP */@media screen and (min-width: 1024px) {}
aside#fb p{ margin:15px 3px; line-height:12px;}
aside#fb a{ color:#fff; }
aside#fb a:hover{ color:#eee;}


/* -----------------------    CONTENT ----------------------- */

section#contenthome{ background:#fff; width:645px; float:left; min-height:300px; margin:0px 7px; padding:50px 30px 30px 40px;}
/* SMARTPHONE */@media screen and (max-width: 767px) { section#contenthome{ float:left; margin:0px; width:90%; padding:50px 20px 30px 20px;}	}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){	section#contenthome{ float:right; margin:0px;}}
/* DESKTOP */@media screen and (min-width: 1024px) { }

section#content{ background:#fff; width:100%; float:left; min-height:100px; margin:0px 7px; padding:50px 150px 30px 40px;}
/* SMARTPHONE */@media screen and (max-width: 767px) { section#content{ float:left; margin:0px; width:90%; padding:30px 20px;}	}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){	section#content{ float:left; margin:0px; width:90%;}}
/* DESKTOP */@media screen and (min-width: 1024px) {section#content{ float:left; margin:0px; width:90%;} }

section#contenthome h1,section#content h1{ font-weight:bold; font-size:210%; text-transform:uppercase; color:#fcbb3f; margin-bottom:20px;}
section#contenthome h2,section#content h2{ font-weight:bold; font-size:18px; text-transform:uppercase; margin-bottom:10px;}
section#contenthome h3,section#content h3{ font-weight:bold; font-size:14px; margin-bottom:10px;}
section#contenthome ul,section#content ul{ margin:0px 0px 0px 50px;}
section#contenthome li,section#content li{ list-style:url(../images/li.jpg); line-height:24px;}
p{ line-height:24px; margin:15px 0px;}
section#contenthome a,section#content a{ text-decoration:underline;}


/* -----------------------    PROJECTEN ----------------------- */

aside#projs{ float:right; width:294px;}
/* SMARTPHONE */@media screen and (max-width: 767px) {	aside#projs{ float:left; width:90%; margin-top:10px; }}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){	aside#projs{ float:left; width:163px; }}
/* DESKTOP */@media screen and (min-width: 1024px) { }

.proj{  margin-bottom:7px;}
/* SMARTPHONE 3 */@media screen and (max-width: 767px) {aside#projs .proj{ float:left; margin-right:10px;}	}

.proj .pi{ position:absolute; height:74px; width:94px; background:url(../images/projpi.png) no-repeat; margin:3px 0px 0px 198px;}
/* SMARTPHONE */@media screen and (max-width: 767px) {aside#projs .proj .pi{ margin:3px 0px 0px 110px; background-size: 50px 40px; }	}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){ aside#projs .proj .pi{ margin:3px 0px 0px 110px; background-size: 50px 40px; }}
/* DESKTOP */@media screen and (min-width: 1024px) { }

.proj .pic{ max-height:190px; overflow:hidden; min-height:100px;}
/* SMARTPHONE */@media screen and (max-width: 767px) {.proj .pic{  max-height:110px;}	}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){ .proj .pic{  max-height:110px;}}
/* DESKTOP */@media screen and (min-width: 1024px) { }

.proj img{ width:294px;}
/* SMARTPHONE */@media screen and (max-width: 767px) {aside#projs .proj img{ width:163px;}	}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){ aside#projs .proj img{ width:163px;}}
/* DESKTOP */@media screen and (min-width: 1024px) { }

.proj h1{ position:absolute; background-color:rgb(4,58,166); background-color:rgba(4,58,166,0.8); margin-top:-32px; line-height:25px; padding:0px 10px 0px 25px; width:200px; text-transform:uppercase; font-weight:bold;  overflow:hidden; height:25px;}
/* SMARTPHONE */@media screen and (max-width: 767px) {	aside#projs .proj h1{ font-size:10px; width:125px;}}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){ aside#projs .proj h1{ font-size:10px; width:125px;}}
/* DESKTOP */@media screen and (min-width: 1024px) { }

.proj a{color:#d2daeb;}
.proj a:hover{ color:#fff;}


a.allproj{ text-transform:uppercase; background:#ca9632; float:right; width:200px; line-height:44px; text-align:center; color:#fff; font-size:18px; text-shadow: 1px 2px #70531c; font-weight:bold;}
/* SMARTPHONE */@media screen and (max-width: 767px) {aside#projs a.allproj{ float:left; font-size:14px; width:163px;}	}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){ aside#projs a.allproj{ font-size:14px; width:163px;}}
/* DESKTOP */@media screen and (min-width: 1024px) { }
a.allproj:hover{ background:#a77921;}

.terug{ text-align:right;}


/* -----------------------    PROJECTEN LIJST ----------------------- */
#projlijst{ overflow:hidden;}
#projlijst .proj a h1{ color:#fff; font-size:14px; margin-top:-35px;}
#projlijst .proj{ display:block; float:left; margin-left:10px; }
.projf{ max-height:190px; overflow:hidden;}
/* SMARTPHONE */@media screen and (max-width: 767px) {.projf .pic{  max-height:190px;}	}
/* TABLET */@media screen and (min-width: 768px) and (max-width: 1023px){ .projf .pic{  max-height:190px;}}
/* DESKTOP */@media screen and (min-width: 1024px) { }
.proj img{ width:294px; height:auto;}

.photo{ display:block; float:left; margin:2px 2px; height:100px; width:150px; overflow:hidden;}
.photo img{ width:150px;}


/* -----------------------    TUNING LIJST ----------------------- */
section#tuning div{ margin-top:10px; position:relative;}
.dvl.tuning{ background:#043aa6; width:33%; min-height:250px;}
/* SMARTPHONE */@media screen and (max-width: 767px) { .dvl.tuning{ width:100%;}	}
.dvl.tuning .pad{ padding:10px 30px;}
.dvl.tuning li{ list-style:url(../images/li2.png); height:30px;}
.dvl.tuning a{ color:#fff; line-height:30px; text-transform:uppercase;}
.dvl.tuning li:hover{ }
.dvl.tuning li:hover a{ color:#ccc;}

.dvr.tuning{ background:#fff; width:66%; min-height:250px;}
/* SMARTPHONE */@media screen and (max-width: 767px) { .dvr.tuning{ width:100%;}	}
.dvr.tuning .pad{ padding:20px;}
.dvr.tuning h2{ text-transform:uppercase; font-weight:bold; margin-bottom:5px;}

.tuningpg{ min-height:110px; }


/* -----------------------    Referenties LIJST ----------------------- */ 
section#referenties{ display:block; overflow:hidden;}
.ref{ display:block; float:left; width:160px; margin:0px 20px 50px 20px;}
.ref a{}
.ref a:hover{ color:#fff;}
.ref h1{ text-transform:uppercase; margin-top:-10px;}
.ref p{ line-height:14px; font-style:italic; }

#reflink{ text-align:right; margin:0px 20px 30px 0px;}
#reflink a{ color:#ddd; font-style:italic; background:#333; padding:5px 10px;}
#reflink a:hover{ color:#ccc;}

/* -----------------------    FOOTER ----------------------- */
footer{ background:#1a1a1a; height:65px; position:relative; line-height:65px; text-align:center; color:#4f4e4e; }	
footer a{ color:#4f4e4e;}
footer a:hover{ color:#4f4e4e;}
footer a .web{ text-transform:uppercase; text-decoration:underline;}
footer a:hover .web{ color:#000;}