/* PAGE LAYOUT */

html {
	position: relative;
	width: 100%;
}

html,body {
	margin: 0;
	padding: 0;
	font-family: "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Gotham, Arial, "sans-serif";
	position: relative;
	background-color: white;
	/*overflow-x: hidden;*/
}

/* TEXT FORMATTING */

/* links navigatiebar */

a {
	color: #666;
	text-decoration: none;
}

#active{
	color: #000;
}

a:visited {
	color: #666;
	text-decoration: none;
}
a:hover {
	color: #000;
}

/* links projectenlijst */

a.project {
	color: #000;
	text-decoration: none;
}

a.project:visited {
	color: #000;
	text-decoration: none;
}
a.project:hover {
	color: #666;
}

/* tektsstijl */

h1 {
	font-family: "Baskerville Old Face", "Baskerville", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Gotham, Arial,  "sans-serif";
	margin: 0;
	color: #000;
	text-align:left;
}

h2 {
	font-family: "Baskerville Old Face", "Baskerville", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Gotham, Arial,  "sans-serif";
	color: #000;
	margin: 0;
	text-align:left;
	margin-bottom:-8px;
}

p {
	color: #000;
	text-align:left;
	white-space: normal;
}

#p1 {
	color: #666;
}

#p12 {
	color: #666;
	text-align:right;
}

#p2 {
	color: #666;
	text-align: center;
}

#description {
	color: #666;
	text-align: center;
	margin-bottom: 0;
}

#copyright {
	color: #666;
	text-align: center;
	margin-top: 0;
}

#p3 {
	color: #000;
	text-align: right;
}

#italic{
	font-style: italic;
}

/* NAVIGATIE */

nav {
	z-index:1;
	top:0;
	position: fixed;
	width:100%;
}

nav .container{
	width: 100%;
	text-align: center;
}

nav .menu{
	display: block;	
}

nav ul {
	list-style: none;
	padding:0;
}

nav ul li{
	display: inline;
	padding: 0;
	margin: 10px;
}

/* BEELDEN */

swipe .container {
    z-index:0;
	white-space: nowrap;
	text-align: center;
	margin-left: 50%;
	
}

swipe img {
	height: 100%;
}

swipe ul {
  margin: 0;
  padding: 0;
}

swipe li {
  display: inline-block;
  vertical-align:top; 
}

#half300 img {
	object-fit: cover;
}

/* INDEX */

index .container {
    z-index:0;
	text-align: center;
}

index ul {
  margin: 0;
  padding: 100px;
}

index li {
  display: inline-block;
}

index img,
index video {
	height: 100%;
}

/* LOGO */

logo {
	z-index:1;
	bottom:0;
	position:fixed;
	width:100%;
}

logo .container{
  	margin:auto;
	text-align:center;
}

logo .logo{
	display: block;
}

logo ul {
	list-style: none;
	margin:0;
	padding:10px;
}

logo ul li{
	display: inline;
	padding: 10px;
}

@media (min-height: 0px) and (max-height: 599px) and (orientation: landscape){

/* TEKST */

h1 {
	font-size: 0.9em;
}

h2 {
	font-size: 0.7em;
}

p {
	font-size: 0.5em;
}

#p1, #p12, #p2, #italic {
	font-size: 0.4em;
}

#p3 {
	font-size: 0.5em;
}
	
#description {
	max-width: 150px;
}

/* NAVIGATIE */

nav .menu{
	font-size: 0.6em;
}

nav ul {
	margin-top: 48px;
}

/* BEELDEN */

swipe .container {
	padding: 80px;
	
}

swipe li {
  height: 200px;
  margin-right: 40px;
}

/* POSITIE */

#half480{
   margin-left: -390px;
}

#half300 {
   margin-left: -290px;
}
	
#half300 img {
	width: 150px;
}

#marge{
	margin-right:10px;
}

#bureau{
	margin-left:-340px;
	height: 200px;
}

#landscapetop{
 	height: 150px;
}

#landscapebottom{
 	height: 150px;
	margin-top: 50px;
}

/* TEKST */

#project {
	width: 360px;

}
/* INDEX */

index li {
  height: 240px;
}

/* LOGO */

logo .container{
	height: 50px;
}

logo img {
	max-height: 35px;
}
}

@media (min-height: 600px) and (orientation: landscape){

/* TEKST */

h1 {
	font-size: 1.1em;
}

h2 {
	font-size: 0.9em;
}

p {
	font-size: 0.7em;
}

#p1, #p2, #p12, #italic {
	font-size: 0.6em;
}

#description {
	max-width: 300px;
}
#p3 {
	font-size: 0.7em;
}

/* NAVIGATIE */

nav .menu{
	font-size: 0.8em;
}

nav ul {
	margin-top: 58px;
}

/* BEELDEN */

swipe .container {
	padding: 100px;
	
}

swipe li {
  height: 400px;
  margin-right: 80px;
}

/* POSITIE */

#half480{
   margin-left: -620px;
}

#half300{
   margin-left: -440px;
}

#half300 img {
	width: 300px;
}

#marge{
	margin-right:10px;
}

#bureau{
	height: 250px;
	margin-left: -390px;
}

#landscapetop{
 	height: 300px;

}

#landscapebottom{
 	height: 300px;
	margin-top: 100px;
}

/* TEKST */

#project {
	width: 480px;
	
}
/* INDEX */

index li {
  height: 480px;
}

/* LOGO */

logo .container{
	height: 70px;

}

logo img {
	max-height: 50px;
}

}

@media (min-height: 800px) and (orientation: landscape){

/* TEKST */

h1 {
	font-size: 1.3em;
}

h2 {
	font-size: 1.1em;
}

p {
	font-size: 0.9em;
}

#p3 {
	font-size: 0.9em;
}
	
#p1, #p2, #p12, #italic {
	font-size: 0.8em;
}

#description {
	max-width: 450px;
}

/* NAVIGATIE */

nav .menu{
	font-size: 1em;
}

nav ul {
	margin-top: 72px;
}

/* BEELDEN */

swipe .container {
	padding: 120px;
	
}

swipe li {
  height: 600px;
  margin-right: 120px;
}

/* POSITIE */

#half480{
   margin-left: -860px;
}

#half300{
   margin-left: -590px;
}

#half300 img {
	width: 450px;
}
	
#marge{
	margin-right:10px;
}

#bureau{
	height: 300px;
	margin-left: -440px;
}

#landscapetop{
 	height: 450px;

}

#landscapebottom{
 	height: 450px;
	margin-top: 150px;
}

/* TEKST */

#project {
	width: 600px;
	
}
/* INDEX */

index li {
  height: 720px;
}

/* LOGO */

logo .container{
	height: 100px;

}

logo img {
	max-height: 70px;
}

}

@media (min-width: 200px) 
  and (max-width: 700px)
  and (orientation: landscape)
{
	
/* TEKST */

h1 {
	font-size: 0.8em;
}

h2 {
	font-size: 0.8em;
}

p {
	font-size: 0.5em;
}

#p3 {
	font-size: 0.5em;
	text-align:center;
}

#p1, #p2, #p12, #italic {
	font-size: 0.5em;
}

#description {
	max-width: 150px;
}
	
/* NAVIGATIE */

nav .menu{
	font-size: 0.8em;
}

nav ul {
	margin-top: 10px;
}

/* BEELDEN */

swipe .container {
	padding: 40px;
	
}

swipe li {
  height: 200px;
  margin-right: 40px;
}

/* POSITIE */

#half480{
   margin-left: -140px;
}

#half300{
   margin-left: -100px;
}
	
#marge{
	margin-right:10px;
}

#bureau{
	margin-left:-120px;
	height: 200px;
}

#landscapetop{
 	height: 200px;
}

#landscapebottom{
 	height: 200px;
	margin-top: 0px;
}

/* TEKST */

#project {
	width: 300px;

}

/* INDEX */

index li {
  height: 240px;
}

/* LOGO */

logo .container{
	height: 60px;

}

logo img {
	max-height: 30px;
}

}

@media (min-width: 200px) 
  and (max-width: 700px)
   and (orientation: portrait)
{
	
/* TEKST */

h1 {
	font-size: 0.8em;
}

h2 {
	font-size: 0.8em;
}

p {
	font-size: 0.5em;
}

#p1, #p2, #p12, #italic {
	font-size: 0.5em;
}

#p3 {
	font-size: 0.5em;
	text-align:center;
}

#description {
	max-width: 150px;
}

/* NAVIGATIE */

nav .menu{
	font-size: 0.8em;
}

nav ul {
	margin-top: 10px;
}

/* BEELDEN */

swipe .container {
	padding: 40px;
	
}

swipe li {
  height: 300px;
  margin-right: 60px;
}

/* POSITIE */

#half480{
   margin-left: -215px;
}

#half300{
   margin-left: -150px;
}
	
#marge{
	margin-right:10px;
}

#bureau{
	margin-left: -135px;
	height: 200px;
}

#landscapetop{
 	height: 300px;
}

#landscapebottom{
 	height: 300px;
	margin-top: 0px;
}

/* TEKST */

#project {
	width: 300px;

}

/* INDEX */

index li {
  height: 240px;
}

/* LOGO */

logo .container{
	height: 70px;
}

logo ul li{
	vertical-align:top; 
}


logo img {
	max-height: 40px;
}

}