/* reset styles 
--------------------------------------------- */
	
html, body, div, 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%;
	vertical-align: baseline;
	font-weight:normal;
	line-height:1.4em;
	}
	
/* 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;
	}
	
* :focus { outline: 0; }	
	

/* clear floats */
	
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* for IE6 */ * html .group { height:1%; }
/* for IE7 */ *:first-child+html .group { min-height:1px; }


/* global rules
--------------------------------------------- */

body {
  font-family:'Open Sans', sans-serif;
  font-size:75%;
  color:#666; 
}

strong {
  font-weight:700;
  color:#333;
}

a {
  text-decoration:none;
  color:#FC2B2B;
  font-weight:700;
}

p {
  margin-bottom:1em;
}

h1 {
  font-family: 'Droid Sans', sans-serif;
  font-size:5em;
  font-weight:800;
  text-transform:none;
  line-height:.4em;
}

h2 {
  font-family: 'Droid Sans', sans-serif;
  font-size:4.1em;
  font-weight:800;
  font-style:italic;
  text-transform:none;
  line-height:.8em;
}

h3 {
  font-family: 'Droid Sans', sans-serif;
  font-size: 3.333333333em;
  font-weight:800;
  text-transform:uppercase;
  line-height:.8em;
  margin-bottom:.5em;
}

h4 {
  font-family: 'Droid Sans', sans-serif;
  font-size:2.8888888em;
  font-weight:600;
  text-transform:none;
  line-height:.8em;
}

h5 {
  font-family: 'Droid Sans', sans-serif;
  font-size:1.666666667em;
  font-weight:800;
  text-transform:uppercase;
  line-height:.8em;
}

h6 {
  font-family: 'Droid Sans', sans-serif;
  font-size: 75%;
  font-weight:800;
  text-transform:none;
  line-height:.8em;
}



/* sidebar navigatie
--------------------------------------------- */

#sidebar {
  width:960px;
  margin:0 auto;
}

#sidebar header {
  width: 225px;
  position: fixed; /*--Fix the sidenav to stay in one spot--*/
  float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
  background:url(../images/bg.png) repeat-y left top;
  height:100%;
  z-index:100;
  min-height:700px;
}

#sidebar header aside {
  position:fixed;
  bottom:0;
  text-transform:uppercase;
}

#sidebar h1 {
  margin-bottom:15px;
}

#sidebar h1 a {
  display:block;
}

#sidebar h1 img {
  display:block;
  margin:0 auto;
}

#sidebar nav {
  width:188px;
  margin:0 auto;
  border:solid #141614; /* kleur streep in sidebar */
  border-width:5px 0;
  font-family:"Open Sans";
  padding:5px 0;
}

#sidebar nav ul {		
	text-transform: uppercase;	
	font-size:13px;	
	list-style-type: none;
}

#sidebar nav li {
	text-align:right;		
	padding:.25em 0;
}

#sidebar nav li.selected { 
  padding:.5em 0; 
  border-top:2px solid #444; 
  border-bottom:2px solid #444; 
  margin:5px 0 10px;
}

#sidebar nav span.subtitle {
  font-size:11px;
  padding: 0;
}

#sidebar nav span.title {
  display:block;
  padding-bottom:.25em;
}

#sidebar nav li.selected span.title { 
  color:#f20420; font-weight:bold; /* kleur font link */ 
}

#sidebar nav li.selected span.subtitle { 
  color:#ff5fe1; /* kleur ondertitel link */
  text-transform: none;
}

#sidebar nav span.subtitle {
  display:none;
}

#sidebar nav li a {
	color: #666;
	text-decoration:none;
	display:block;
	letter-spacing:.1em;
}

#sidebar nav li a:hover {
	color: #515151;	
}

#sidebar nav li.selected span.subtitle {
  display:block;
}

#socialmedia {
  margin-top:50px;
  margin-right:20px;
  text-align:right;
}

/* content framework
--------------------------------------------- */

section.outer {
  position:relative;
  overflow:hidden;
  padding-bottom:200px;
}

.container {
  width:960px;
  margin:0 auto;
/*  background:url(../images/bg.png) repeat-y left top;
  height:100%;
*/}

.inner {
  width:720px;
  margin-left:240px;
  padding-bottom:40px;
  padding-top:10px;
  position:relative;
}

.inner img {
  position:relative;
  z-index:0;
}

.inner header.main {
  height:10px;
  padding-bottom:22px;
  margin-bottom:20px;
  background:#ffffff;
}

.inner header.placeholder {
  background:url(../images/placeholder.png) repeat-y left top;
  height:50px;
}

.inner header.main h1 {
  font-size:1em;
  font-style:italic;
  text-transform:uppercase;
  color:rgb(191,190,190);
  font-weight:600;
  padding:6px 20px;
  text-align:right;
}

.inner header.sub {
  border:2px solid #333;
  border-width:2px 0;
  margin-bottom:1em;
}
.inner header.sub h1 {
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.1em;
  line-height:2em;
  color:#484848;
  font-size:1.3333333em;
}




/* INTRO / BTWEE
--------------------------------------------- */

section#intro {
  height:1483px;
  padding-bottom:0;
  overflow:hidden;
}

div.intro p {
  font-size:1.1555555557em;
  line-height:1.55em;
}

section#intro .intro h1 {
  color:#fc2b2b;
  margin-bottom:.25em;
  letter-spacing:.1em;
  line-height:.9em;
}

section#intro .intro h5 {
  font-style: none;
  color:#151515;
  margin-bottom:.25em;
  letter-spacing:.1em;
  line-height:.9em;
}

section#intro .intro h6 {
  color:#666;
  margin-bottom:.25em;
  letter-spacing:.1em;
  line-height:.9em;
  text-transform:none;
}

section#intro .intro .description {
  margin-top:40px;
  margin-left:150px;
}

section#intro .typewriter {
  font-family: 'Special Elite', cursive;
  font-size:1em;
  line-height:1.45em;
  margin-left:150px;
  color:#666666;
}

section#intro .typewriter strong {
  font-weight:bold;
  color:#666666;
  font-size:1em;
}

section#intro .typewriterklem {
  font-weight:800;
  text-decoration:underline;
  color:#666666;
  font-family: 'Special Elite', cursive;
  font-size:1em;
  line-height:1.45em;
}

section#intro .typewritercurs {
  font-style:italic;
  color:#666666;
  font-family: 'Special Elite', cursive;
  font-size:1em;
  line-height:1.45em;
}

section#intro .strong {
	font-weight:bold;
}

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

section#projecten {
  background:#333333;
  height:1483px;
  padding-bottom:0;
  overflow:hidden;
}

section#projecten p {
  font-size:1.12222224em;
  line-height:1.55em;
  margin-left:50px;
}

section#projecten h1 {
  color:#ffffff;
  margin-bottom:.25em;
  letter-spacing:.1em;
  line-height:.9em;
}

section#projecten strong {
  font-weight:800;
  color:#fff; 
  text-decoration:underline;
}

/* projecten flip image -------- */

.projectcontainer {  
  margin-top:40px;
  margin-left:50px;
  font-size:10px;
}

ul.img-list { /* --- image styling --- */
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
 
ul.img-list li { /* --- image styling --- */
  display: inline-block;
  height: 150px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 150px;
}
span.text-content { /* --- place text over image ---*/
  background: rgba(0,0,0,0.9); /* doorkijk */
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
}
 
span.text-content span { /* --- place text over image ---*/
  display: table-cell;
  text-align: left; /* tekst uitlijning */
  vertical-align: top; /* tekst uitlijning */
  padding: 5px 5px 5px 5px;/* top; right; bottom; left */
}
span.text-content { /* --- show text on hover --- */
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  opacity: 0;
}
 
ul.img-list li:hover span.text-content { /* --- show text on hover --- */
  opacity: 1;
}
span.text-content { /* --- animatie ---*/
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

/* einde projecten flip image ---*/


/* REFERENTIES
--------------------------------------------- */

section#referenties {
  background:rgb(33,195,232);
  height:1483px;
  padding-bottom:0;
}

section#referenties .description {
  margin-top:40px;
  margin-left:100px;
  font-family: 'Tienne', serif;
  font-size:1.111117em;
  color: #FFFFFF;
}

section#referenties .subtekst {
  font-family: 'Tienne', serif;
  font-size:0.88888887em; 
  color:#666666;
}

section#referenties .text {
  width:320px;
}

section#referenties .text h1 {
  color:#fff;
  line-height:.9em;
  margin-bottom:.25em;
}

/* WEBSITES
--------------------------------------------- */

section#websites {
  background:rgb(40,208,40);
  height:1483px;
  padding-bottom:0;
}

section#websites a {
	font-style:normal;
	font-weight:normal;
	text-decoration:underline;
	color: #FFFFFF;
}
section#websites .description {
  margin-top:40px;
  margin-left:100px;
  margin-right:30px;
  font-size:1.1555555557em;
  line-height:1.55em;
  color: #FFFFFF;
}

section#websites .description strong {
  font-weight:bold;
  color:#ffffff;
}

section#websites .description ul { 
   list-style-type: circle;
   list-style-position: inside;

}
section#websites .subtekst {
  font-size:0.88888887em; 
  color:#666666;
}

section#websites .text {
  width:420px;
}

section#websites .text h1 {
  color:#fff;
  line-height:.9em;
  margin-bottom:.25em;
}

/* CONTACT
--------------------------------------------- */

section#contact {
  background:#ffffff;
  height:1483px;
  padding-bottom:0;
}


section#contact div.contact img {
  float:left;
  margin-left:100px;
  margin-top:70px;
}

section#contact div.info {
  float: left;
  margin-left:80px;
  margin-top:120px;
  text-align:left;
  font-family: 'Tienne', serif;
  font-size:1.111117em;
  color:#666666;
}

section#contact .text {
  width:420px;
}

section#contact .text h1 {
  color:#666666;
  line-height:.9em;
  margin-bottom:.25em;
}



/* content classes
--------------------------------------------- */





div.divider {
  background:url(../images/divider.png) no-repeat center bottom;
  padding-bottom:40px;
  margin-bottom:2em;
}