/*
MMMMMMMMMMMMMMMdydNy:........:yNdydMMMMMMMMMMMMMMs
MMMMMMMMMMMds/-..-+ossyddddysso+-..-/sdMMMMMMMMMMs
MMMMMMMMms:..:oymmdyyssssssssyydmmyo:..:smMMsmMMMs
MMMMMMNNo.-ydNhs+////////////////+shNdy-.oNN/dMMMs
MMMMNo.:/ymho////////////////////////ohmy/:.-dMMMs
MMMh-.-yNh+////////////////////-..`` //+hNy-.-hMMs
MMh..:mmo/////////////////////`    .-////omm-..hMs
Mh../Nd+////:..``-+//////////:    `///////+d/-..hs
My-:Nm+/////.    -+/////////-.      `+/////+/h:-ys
h+-hMo//////.    -/.````-//:      `::////////dh-+:
-.-Mm//////+.    ```     :+//-    .+/////////dM-..
..oMd//////+.    .//.    .///-    .//////////dMo..
..oMd//////+.    ://-    .///-    .//////////dMo..
-.-Mm//////+.    ://-    .///-    .//////////dM-..
h+-hMo//////`    ://-    .//+-    -//////////dh-+:
My-:Nm//////`    ://-    -//+-    -//////////h:-ys
Mh../Nh////+`    .:-`   `///+-``..:////////h/-..hs
MMh..:mmo///`    .`   `-/////////////////+mm-..hMs
MMMh-.-ymy+/...--///://////////////////+ymy-.-hMMs
MMMMNo.:/ymyo////////////////////////+ymy/:.-dMMMs
MMMMMMNNo.-sddyo//////////////////oydds-.oNN/dMMMs
MMMMMMMMms:..:oyddhyss++++++ssyhddyo:..:smMM+mMMMs
MMMMMMMMMMMds/-..-+ossyddddysso+-..-/sdMMMMMMMMMMs
MMMMMMMMMMMMMMMdydNy:........:yNdydMMMMMMMMMMMMMMs
*/

/* Some Notes:

-- This website has been coded by Ben Frain as a fictional case study to accompany the book 'Responsive Web Design with HTML5 and CSS3'. What do you mean you haven't ordered it yet? Get it here: http://www.amazon.com/Responsive-Web-Design-HTML5-CSS3/dp/1849693188/ref=sr_1_8?ie=UTF8&qid=1334054932&sr=8-8;

-- I've used Lea Verou's 'prefix free' JavaScript to add vendor prefixes to all my CSS3 declarations as and when they are needed. I do this here so the code is easier to read and I can use the W3C specified declarations. This wouldn't always make the most sense in a production environment. You'd typically want to add vendor prefixes like -moz-, -webkit- etc.

-- also, as you can see if you are reading this, the CSS isn't compressed and many declarations have been written 'long hand' to aid in reading the code. This isn't best practice in a production environment.

-- some people like to alphabetize their CSS declarations. I don't, sorry.

*/

/* Here is the normalize.css courtesy of Nicholas Gallagher (he's clever by the way). This section tries to 'normalize' the behaviour of various browsers */

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	white-space: nowrap;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


/* self-clear floats - if you need them, this is my (current) favourite technique. More info: http://nicolasgallagher.com/micro-clearfix-hack/ */

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

/* wrap url's */
pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}
	


/* Now here are the @font-tace files. I used examples from font-squirrel but TypeKit and FontDeck are good solutions too. Even Google has webfonts available */
	
@font-face {
    font-family: 'BitstreamVeraSansRoman';
    src: url('../fonts/Vera-webfont.eot');
    src: url('../fonts/Vera-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Vera-webfont.woff') format('woff'),
         url('../fonts/Vera-webfont.ttf') format('truetype'),
         url('../fonts/Vera-webfont.svg#BitstreamVeraSansRoman') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeue-webfont.eot');
    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BebasNeue-webfont.woff') format('woff'),
         url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('../fonts/ColabThi-webfont.eot');
    src: url('../fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ColabThi-webfont.woff') format('woff'),
         url('../fonts/ColabThi-webfont.ttf') format('truetype'),
         url('../fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* This little bit is just for the warning message at the top of every page telling people it's a fictional website */

#book {
	display: none;
	width: 99%;
	padding: 0.5%;
	font-family: 'Verdana', serif;
	font-size: 1.4em;
	letter-spacing: 0.1em;
	color: #fff;
	text-shadow: 0px 2px 2px #000;
	display: block;
	text-align: center;
	border-bottom: 2px solid #000;
	background-color: #111;
	background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, hsla(35,94%,62%,0.8) 35px, hsla(35,94%,62%,0.5) 70px);
}	

.pimpingBook {
	max-width: 25%;
	transform: rotate(3deg);
	box-shadow: 3px 3px 6px #000;
	margin: 30px 40px 0px 0px;
	float: left;	
}

table.korting {
    font: 0.9em 'Verdana';
    border: 5px solid #CC99FF;
}
thead.korting td {
    border: 1px solid black;
    padding: 5px;
    font-size: 1.1em;
    text-align: left;
}
tbody.korting td {
    border: 1px solid black;
    padding: 15px;
}

table.prijs {
    font: 1.1em 'Verdana';
    border: 5px solid #CC99FF;
}
thead.prijs td {
    border: 1px solid black;
    padding: 5px;
    font-size: 1.1em;
    text-align: left;
}
tbody.prijs td {
    border: 1px solid black;
    padding: 15px;
}

/* This rule just sets a different selection color when you highlight text */

::selection {
	background: #ff9900;
}

/* in the book I talked about CSS patterns - this body style adds the feint grid to the body of all pages in supporting browsers */
/*  http://www.css3factory.com/linear-gradients/ */
/* 
        background-image:
	  linear-gradient(to right, #F5EBFF, #F0E0FF),
	  linear-gradient(to right, #EBD6FF, #E6CCFF),
	  linear-gradient(to right, #E0C2FF, #DBB8FF),
	  linear-gradient(to right, #D1A3FF, #CC99FF);
*/
body {
	background-color:#fff;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    right top,
	    color-stop(0, #F0E0FF),
	    color-stop(0.54, #E1C2FF),
	    color-stop(1, #CC99FF)
	);
	background-image: -o-linear-gradient(right top, #F0E0FF 0%, #E1C2FF 54%, #CC99FF 100%);
	background-image: -moz-linear-gradient(right top, #F0E0FF 0%, #E1C2FF 54%, #CC99FF 100%);
	background-image: -webkit-linear-gradient(right top, #F0E0FF 0%, #E1C2FF 54%, #CC99FF 100%);
	background-image: -ms-linear-gradient(right top, #F0E0FF 0%, #E1C2FF 54%, #CC99FF 100%);
	background-image: linear-gradient(to right top, #F0E0FF 0%, #E1C2FF 54%, #CC99FF 100%);
}

/* And this bit just makes the current page underline in the navigation on larger viewports */

#home nav[role="navigation"] li:nth-child(1),#about nav[role="navigation"] li:nth-child(2),#offline nav[role="navigation"] li:nth-child(3) {
	text-decoration: underline;
}

/* Now I want to make any inline video and img elements automatically scale to 100% of their parent container. This can be over-ridden by more specific styles as needed */

a {
	transition: all 0.7s;
}
a:hover {
	color: #000;
}

img,video { 
	max-width: 90%; height: auto; 
}
#wrapper {
	margin-right: auto;
	margin-left: auto;
	width: 96%; /* Holding outermost DIV */
	max-width: 1306px;
}
img[alt^="film"] {
	border: 3px dashed #e15f5f;
}
header {
	background-position: 0 top;
	background-repeat: repeat-x;
	margin-right: auto; /* 10 ÷ 960 */
	margin-left: auto; /* 10 ÷ 960 */
	width: 97.9166667%; /* 940 ÷ 960 */
}
header a {
	text-decoration: none;
}
#logo { 
	display: block; 
	padding-top: 75px; 
	color: #0d0c0c; 
	text-transform: uppercase; 
	font-family: 'Verdana'; 
	font-size: 3em; /* 48 ÷ 16 = 3*/
}
#logo span { 
	color: #dfdada; 
}
nav { 
	display: table; 
	margin-bottom: 25px; 
	margin-top: 26px; 
	padding-right: 1.0416667%; /* 10 ÷ 960 */ 
	padding-left: 1.0416667%; /* 10 ÷ 960 */ 
	width: 97.9166667%; /* 940 ÷ 960 */ 
	background: linear-gradient(top, hsla(0,0%,100%,0.11) 0%,hsla(0,0%,94%,0.11) 10%,hsla(0,0%,84%,0.11) 22%,hsla(0,0%,62%,0.11) 41%,hsla(0,0%,38%,0.11) 61%,hsla(0,0%,22%,0.11) 76%,hsla(0,0%,10%,0.11) 88%,hsla(0,0%,1%,0.11) 100%);
	border-bottom-color: #bfbfbf; 
	border-bottom-style: double; border-bottom-width: 4px; 
}
/* because we are using Modernizr we can provide a 'fork' style here for IE as it doesn't understand css gradients (as of v9 and below) */ 
.-ms- nav {
	padding-bottom: 25px; 
	margin-top: 26px; 
	background-repeat: repeat-x; 
	background-image: url(../img/atwiNavBg.png); 
}
nav ul {
	display: table-row;
	width: 100%;
}
nav ul li { 
	text-align: center; 
	display: table-cell;
	margin-left: 1.3%;
	margin-right: 1.3%;
}
nav ul li:last-child {
	text-align: right;
}
nav ul li:first-child {
	text-align: left;
}
nav ul li a { 
	height: 42px;
	text-decoration: none; 
	text-transform: uppercase;  
	color: black; 
	text-shadow: 0 1px 0 hsla(0, 0%, 100%, 1.0);
	font: 1.875em/42px 'Work Sans', sans-serif;
	display: block;	
}
nav ul li a:hover {
	animation: warning 1.5s infinite ease-in;
}
nav ul li:nth-child(odd) a {
	color: ffffff;
	color: hsl(0, 99%, 0);
}
nav ul li:nth-child(odd) a:hover {
	color: hsl(0, 99%, 5%);
}
#content {
	margin-top: 28px;
	margin-right: 1.0416667%; /* 10 ÷ 960 */
	float: right;
	width: 72.7083333%; /* 698 ÷ 960 */	
	height: 100%;
}
.element {
	text-shadow: 4px 8px 1px #ccc;
}
#content h1 { 
	text-transform: uppercase; 
	font-family: 'Verdana';
	font-size: 3em;  /* 102 ÷ 16 */
	text-shadow: 0px 1px white,4px 4px 0px #dad7d7 ; /* 4 ÷ 102 */
	font-weight: 200;
}
#content h1 em {
	display: block; 
	color: #504e4e; 
	text-shadow: none;
	font: .352941176em/1.052631579em 'BitstreamVeraSansRoman';
	font-weight: 400;
}
#content h2 {
	font-family: 'Verdana'; 
	font-size: 1.875em; /* 30px ÷ 16 */ 
	text-transform: uppercase;
	font-weight: 400;
	margin-top: 2%;
}
#content h2 a {
	color: #FD0105;
}
#content h3 {
	font-family: 'Verdana'; 
	font-size: 1.2em;  
	color: #bfbfbf;
	font-weight: 400;
}
#content p { 
	font-family: 'Verdana';
	line-height: 1.1em; 
	color: #757474; 
	font-size: 1.25em; /* 24px ÷ 16 */ 
}
#content p em {
	text-decoration: underline;
}
#content a.button {
	text-decoration: none;
	font: 2.25em 'Verdana'; /* 36px ÷ 16 */
	background-color: #b01c20;
	background: linear-gradient(top, rgb(241,92,96) 0%, rgb(176,28,32) 100%);
	border-radius: 8px;
	color: white;
	padding: 3%;
	float: left;
	margin-top: 30px;
	box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
	text-shadow: 0px 1px black;
	border: 1px solid #bfbfbf;
	transition-property: border, color, text-shadow;
	transition-duration: 2s, 3s, 8s; 
}
#content a.button:hover {
	border: 1px solid black;
	color: black;
	text-shadow: 0px 1px white;
	background: linear-gradient(top, rgb(145,62,56) 0%,rgb(176,28,32) 100%);	
}
#content a span {
	font-size: 1.3em;
}
#content p i {
	font-weight: normal;
	font-style: normal;
}
#content ul {
        margin-top:  8px;
        margin-left: 5%;
}
#content li {
	font: 1em 'Verdana';
	line-height: 1.8em;
}
#psgcontent li {
	margin-top: 0px;
	list-style-type: square;
}

#psgcontent li:before {
	margin-right: 1%;
}
#content table.images {
    margin-top : 2%;
    margin-bottom : 2%;
}

aside {
	border-right-color: #e8e8e8;
	border-right-style: solid;
	border-right-width: 2px;
	margin-top: 28px;
	padding-left: 1.5%; 
	padding-right: 1.0416667%; 
	margin-left: 1.0416667%; 
	float: left;
	width: 20.7083333%; 
}
aside h1 { 
	margin-bottom: 20px; 
	font-family: 'Verdana'; 
	font-size: 1.875em; /* 30px ÷ 16 */ 
}
.overHyped { 
	margin-top: 27px; 
}
.sideBlock {
	width: 100%; /* 220 */
}

/*
.moreInfo {
	padding: 5px 0px 5px 0px;
	display: block;
	text-align: center;
	margin-bottom: 20px;
	margin-top: 10px;
	font-size: 1em;
	border-radius: 8px;
	border: 1px solid #999;
	transition: all 0.7s;
}

*/

/*
 * See : http://css3buttongenerator.com
*/
.moreInfo {
  display: block;
  padding: 10px 20px 10px 20px;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #DbB8ff;
  background-image: -webkit-linear-gradient(top, #DbB8ff, #CC99FF);
  background-image: -moz-linear-gradient(top, #DbB8ff, #CC99FF);
  background-image: -ms-linear-gradient(top, #DbB8ff, #CC99FF);
  background-image: -o-linear-gradient(top, #DbB8ff, #CC99FF);
  background-image: linear-gradient(to bottom, #DbB8ff, #CC99FF);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
}
.moreInfo:hover {
  display: block;
  padding: 10px 20px 10px 20px;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
.moreInfo.paars {
	    background-color : purple;
}
.moreInfo.wit {
	    background-color : white;
}


.moreInfo:nth-child(2) {
	margin-left: 3%;
}
.moreInfo:hover {
	cursor: pointer;
	background: linear-gradient(top, hsla(0,0%,100%,0.11) 0%,hsla(0,0%,94%,0.11) 10%,hsla(0,0%,84%,0.11) 22%,hsla(0,0%,62%,0.11) 41%,hsla(0,0%,38%,0.11) 61%,hsla(0,0%,22%,0.11) 76%,hsla(0,0%,10%,0.11) 88%,hsla(0,0%,1%,0.11) 100%);
	box-shadow: 0px 3px 4px #444;
	
}
.-ms- .moreInfo {
	background-repeat: repeat-x; 
	background-image: url(../img/atwiNavBg.png); 
}
footer {
	padding-bottom: 43px;
	float: left;
	margin-top: 20px;
	padding-top: 33px;
	background-position: 0 bottom;
	background-repeat: repeat-x;
	margin-right: 1.0416667%; /* 10 ÷ 960 */
	margin-left: 1.0416667%; /* 10 ÷ 960 */
	clear: both;
	width: 97.9166667%; /* 940 ÷ 960 */
	border-top: 4px double #bfbfbf; 
}
footer p {
	margin-bottom: 38px;
	text-align: center;
	font-size: 1.125em /* 18px ÷ 16px */;
	font-family: 'Verdana';
	text-transform: uppercase;
	color: #757474;

}

p.header {
	text-align: center;
}

footer span a {
	color: #bfbfbf;
}
.sideBlock a {
	width: 100%;
	text-decoration: none;
	float: left;
}
.sideBlock img {
	box-shadow: 0px 3px 5px #444;
	margin-bottom: 5px;
}

.sideImage {
	margin-left: 3%;
}

/* These styles use transforms and also keyframe animations (animations are defined below) to alter the look of the film posters in the sidebar */

.unSung a:nth-child(odd) img {
	transform: rotate(3deg);
	animation: swing 0.1s 5 ease-in;
}
.unSung a:nth-child(even) img {
	transform: rotate(-3deg);
	animation: swing 0.1s 5 0.3s ease-in;
}
.overHyped a:nth-child(odd) img {
	transform: rotate(3deg);
	animation: swing 0.1s 5 0.2s ease-in;
}
.overHyped a:nth-child(even) img {
	transform: rotate(-3deg);
	animation: swing 0.1s 5 0.5s ease-in;
}


/* styles specific to Quiz page */
.Qcontainer { 	
  height: 100%;
  width: 28%;
  position: relative;
  perspective: 200;
  float: left;
  margin-right: 2%;
}
.film {
  width: 100%;
  height: 15em;
  transform-style: preserve-3d;
  transition: 1s;
}
.Qcontainer:hover .film {
	transform: rotateY(180deg);
}
.face {
	position: absolute;
	backface-visibility: hidden;
}
.back {
  width: 73%;
  height: 127%;
  transform: rotateY(180deg);
  background: #3b3b3b;
  background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  padding: 15%;
}
.note {
	display: none;
}
.no-csstransforms3d .note {
	display: block;
}
.front {
	z-index: 5;
}
.Qcontainer:hover .front {
	z-index: 0;
}
.back h5 {
	font-size: 4em;
	color: #f2050b;
	text-align: center;
	animation: warning 1.5s infinite ease-in;
}
#quiz #content {
	min-height: 600px;
}
#quiz p.note {
	font-size: 1em;
}
@keyframes warning {
	0% {
		text-shadow: 0px 0px 4px #000000;
	}
	50% {
		text-shadow: 0 0 40px #000000;
	}
	100% {
		text-shadow: 0 0 4px #000000;
	}
}
@keyframes swing {
	0% {
		transform: rotate(3deg);
	}
	20% {
		transform: rotate(7deg);
	}
	60% {
		transform: rotate(10deg);
	}
	80% {
		transform: rotate(7deg);
	}
	100% {
		transform: rotate(3deg);
	}
}

.polyfill-important .input-range,.polyfill-important .step-controls {
	float: right;
}

input:not([type="range"]), textarea, select {
   border: 1px solid #bfbfbf;
   padding: 0.2em;
   font-size: 1.1em;
   line-height: 1.2em;
   background: #ffffff;
   background: linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%);
   border-radius: 4px;
   appearance: none;
   box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.1);
}
/* styles for adding cross or tick to input form fields */
input:required {
	border: 1px solid rgba(253, 8, 8, 0.29);	
}
input:focus:invalid {
	background: url('../img/cross.png') no-repeat right;
	padding-right: 3px;
}
input:focus:valid {
	background: url('../img/tick.png') no-repeat right;
	padding-right: 3px;
}

/* Webkit (Chrome and Safari) make no allowance for polyfilled elements so we need to make them align left */

.-webkit- input#howYouRateThis:focus:invalid,.-webkit- input#yearOfCrime:focus:invalid {
	background: url('../img/cross.png') no-repeat left;
	padding-right: 3px;
}
.-webkit- input#howYouRateThis:focus:valid,.-webkit- input#yearOfCrime:focus:valid {
	background: url('../img/tick.png') no-repeat left;
	padding-right: 3px;
}
table.pedicure_kaart {
  font: 1em 'Verdana';
  padding: 1px;
}
table.pedicure_kaart td.labelkolom {
    width: 38%;
    text-align : right;
    padding-right: 2%;
}
table.pedicure_afspraak {
  font: 1.2em/24px 'Verdana';
  padding: 8px;
  width: 100%;
}
thead.pedicure_afspraak td {
    border: 1px solid black;
    padding: 5px;
    font-size: 1.1em;
    text-align: center;
}
table.pedicure_afspraak td.labelkolom {
    width: 40%;
    text-align : right;
    padding-right: 2%;
}
table.pedicure_afspraak td.spacebelow {
    padding-bottom: 3%;
}
table.pedicure_afspraak td.labelkolomlinks {
    width: 38%;
    text-align : left;
    padding-right: 1%;
}

/* transition everything - never recommended in the real world! */
* {
	transition: all 0.5s; 
}

/* Media Queries - I love you almost as much as a full English breakfast. Almost. */
@media screen and (min-width: 300px) and (max-width: 400px) {
	#logo {
		font-size: 1.5em;
	}
}
@media screen and (min-width: 300px) and (max-width: 600px) {
	.Qcontainer {
		width: 100%;
		clear: left;
	}
	.film {
		height: 28em;
	}
	#wrapper {
		margin: 0px;
		width: 100%;
	}
	#content li {
		margin-top: 3px;
		font: 1.25em 'Verdana';
	}
	nav ul li {
		margin: 0px;
		font-size: 0.9em;
		line-height: 0.8em;
	}
	nav ul li a {
		margin: 0px;
	}
	nav ul li a:hover {
		margin-left: 5%;
		background-color: #99ccff;
		padding-left: 2%;
	}
	#content h1 {
		font-size: 3em;
		text-shadow: 0 1px white, 2px 2px 0 #DAD7D7;
	}
	#content h2 {
		font-size: 1.2em;
	}
	#content p {
		font-size: 1.1em;
		line-height: 1.3em;
	}
	#content a.button {
		font-size: 1.2em;
		width: 94%;
		margin-top: 2%;
		text-align: center;
	}
	table.prijs {
	    font: 1em 'Verdana';
	}
}

@media screen and (min-width: 475px) and (max-width: 600px) {
	#content h1 {
		font-size: 5em;
		text-shadow: 0 1px white, 2px 2px 0 #DAD7D7;
	}
	#content h1 em {
		font-size: 0.4em;
		
	}
	#content h2 {
		font-size: 2.5em;
	}
	#content p {
		font-size: 1.25em;
		line-height: 1.3em;
	}
	#content a.button {
		font-size: 1.8em;
		width: 94%;
		margin-top: 2%;
		text-align: center;
	}
	table.prijs {
	    font: 1.1em 'Verdana';
	}
}

@media screen and (max-width: 600px) {
	
	nav {
		display: block;
		background: none;
	}
	nav ul {
		 display: block;
	}
	nav ul li {
		display: list-item;
		color: white;
		text-align: left;
	}
	nav ul li:first-child,nav ul li:last-child {
		text-align: left;
	}
	table.prijs {
	    font: 1.1em 'Verdana';
	}
}

@media screen and (max-width: 768px) {
	#body {width: 96%; margin: 2%; padding: 0px; margin-bottom: 0px;
	}	
	#logo { text-align:center; }
	
	#content,aside { margin-top: 20px; width: 96%;margin: 2%;}
	aside { border-right: none; border-top: 2px solid #e8e8e8; padding-top: 20px; margin-bottom: 20px; }
	.sideBlock { width: 96%; margin: 2%; }
	.overHyped { margin-top: 0px; }
	
}
@media screen and (min-width: 1000px) {
	#content h1 {
		font-size: 8em;
	}
	#content p {
		font-size: 1.2em;
		line-height: 1.2em;
		margin-top: 1%;
	}
}