html { width: 100%; height: 100%; }
body {   width: 100%; height: 100%; background-color: #292b2e; color:#EEE; font:normal 16px 'Source Sans Pro', sans-serif; font-weight: 300; line-height:1.8em; margin:0; overflow-x:hidden; }
div { margin:0; padding:0; }

img,
figure { display:block; border:0; margin:0; padding:0; max-width:100%; width: auto\9; height: auto !important; -ms-interpolation-mode: bicubic; }

h1,h2,h3,h4,h5,h6 { color:white; font-style:normal; font-weight:300; line-height:1.17em; margin:0 0 .3em 0; }
h1 { font-size:1.6em; }
h2 { font-size:1.6em; }
h3 { font-size:1.4em; }
h4 { font-size:1.2em; }
h5 { font-size:1em; }
h6 { font-size:0.8em; }

p { margin:0 0 10px; }
em { font-style:italic; }

ul { margin:0; padding:0; }
ul li { list-style-type:none; margin:0; }

a { color:#42b5df; cursor:pointer; text-decoration:none; margin:0; padding:0; border:0;
	-moz-transition:color .2s; -o-transition:color .2s;	-webkit-transition:color .2s; transition:color .2s;  }
a:hover { color:#FFF; }
header h1 a { color:white; }

.clearfix:after { display: table; content: ""; clear: both; }
.hidden { display: none; }



/* HEADER */
/* ---------------------------------------------------------------------------------------------------------------*/
header { padding-top:40px; text-align: center; overflow: hidden; }
header h1 { text-align: center; color:white; font-size: 28px; letter-spacing: 0.4em; margin-right:-0.4em; }
    
    
	
/* NAV */
/* ---------------------------------------------------------------------------------------------------------------*/
nav { text-align: center; font-weight: 400; width:100%; margin-top:15px; }
nav ul { width:100%; margin: 0 auto;}
nav ul li { font-size: 0.9em; text-transform: uppercase; margin-right: 20px; float:none !important; display: inline-block !important; letter-spacing: 0.1em;  }
nav ul li:last-child { margin-right: 0px !important; }
nav ul li.active a { color:white; }
nav span { color: #555; }
nav li:first-child span { margin-left: 25px; }
nav li:last-child span { margin-right: 25px; }

.hidden { display: none; }
.shown { display: block !important; }

#toggle {
  width: 24px; height: 28px; position: relative; margin: 20px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#toggle:focus { outline: 0; }
#toggle span {
  display: block; position: absolute; height: 3px; width: 100%; background: #42b5df; border-radius: 4px; opacity: 1; left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
#toggle span:nth-child(1) {
  top: 0px;
}
#toggle span:nth-child(2),
#toggle span:nth-child(3) {
  top: 10px;
}
#toggle span:nth-child(4) {
  top: 20px;
}
#toggle.open span:nth-child(1) {
  top: 10px; width: 0%; left: 50%;
}
#toggle.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#toggle.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#toggle.open span:nth-child(4) {
  top: 10px; width: 0%; left: 50%;
}


	
/* CONTENT */
/* ---------------------------------------------------------------------------------------------------------------*/
#content { overflow:hidden; position: relative; padding-top: 20px; } 
#content h1 { text-align: center; margin-top:-15px; margin-bottom:25px;}
#content .gallery p { padding:10px 15px 25px 0px; text-align: center; }
#content .gallery img { width:100%; max-width: 800px; margin: 0 auto;  }

#content.profiel { max-width: 800px !important; margin: 0 auto; padding-left:20px; padding-right: 20px; }
#content.profiel img { vertical-align: top; float:right; margin:5px 0 15px 25px; width:400px; height: 400px; }
@media (max-width: 600px) {  
	#content.profiel { width: 100% !important; margin: 0 auto; padding:20px 0 20px 0;}
	#content.profiel img { float:none; margin:0 auto 15px auto; width:100%; }
	#content.profiel p { padding: 5px 15px;  }
}


	
/* MEDIA QUERIES */
/* ---------------------------------------------------------------------------------------------------------------*/
@media (max-width: 600px) {  
	header { padding-top:25px; }
	
	nav ul { margin: 0 auto; text-align: center; }
	nav ul li { display:block !important; margin-right:auto !important; margin-bottom: 10px; margin-left: auto;  font-size: 1em; width: 120px; }
	nav ul li:last-child { margin-right: auto !important; }

	nav span { display: none; }
	nav li:first-child { border-bottom: 1px solid #444; padding-bottom: 10px; }
	nav li:last-child { border-top: 1px solid #444; padding-top: 10px; }

	nav { display: none; margin-top: 20px; }
	#toggle { display: block; } 
	
	#content.home { padding-top: 0; }
}
@media (min-width: 601px) {  
	nav { display: block; margin-bottom: 10px; }
	#toggle { display: none; } 
	
	nav li:first-child { border-right: 1px solid #444; padding-right: 25px; }
	nav li:last-child { border-left: 1px solid #444; padding-left: 25px; }
	nav span { display: none; }
	
	
	
	#content h1 {display: none; }	
}



/* FOOTER */
/* --------------------------------------------------------------------------------------------------------------- */
footer { text-align: center;  font-size: 0.8em; padding:40px 10px 50px 10px; }
footer a { font-weight: 400; }
.guardstone { margin-top:35px; font-size:0.9em; color:#666; }
.guardstone a { letter-spacing:0.2em; margin-right:-0.2em; font-size:0.9em; text-transform:uppercase; color:#666; }
.guardstone a:hover {color:white; }