@charset "utf-8";

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Reset */

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

/* HTML5 for old browsers */

header, section, footer, aside, nav, article, figure {
	display: block;
} 

/* Body */

html {
	overflow: -moz-scrollbars-vertical; overflow-y: scroll;
}
body {
	background-color: #ddd;
}

/* Typography */

body, p, td, li {
	font-family: open_sansregular, Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 20px;
	color: #000;
}

/* Headings */

h1 {font-size: 24px;}
h2 {font-size: 22px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}
h1, h2, h3, h4, h5, h6 {
	margin-bottom: 10px;
	font-weight: normal;
	line-height: normal;
	color: #0c0;
}

/* Anchors */

a img {
	border: 0px;
	text-decoration: none;
}
a:link, a:visited {
	color: #00f;
	text-decoration: none;
}
a:hover, a:active {
	color: #00c;
	text-decoration: underline;
}

/* Paragraphs */

p {margin-bottom: 10px;}
p:last-child {margin-bottom: 0;}

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

::-moz-selection {background: #09c; color: #fff;}
::selection {background: #09c; color: #fff;}

/* Lists */

ul {
	list-style: outside disc;
	margin: 0 0 10px 20px;
}
ol {
	list-style: outside decimal;
	margin: 0 0 10px 20px;
}

dl {margin: 0 0 10px 0;}
dt {font-weight: bold;}
dd {margin: 0 0 0 20px;}

/* Quotes */

blockquote {font-style: italic;}
cite {}
q {}

/* Tables */

table {border-spacing: 0;}
thead th {}
thead td {}
tbody th {}
tbody td {}
tfoot th {}
tfoot td {}

/* Forms */

fieldset {}
legend {}

button,
input,
select,
textarea {
	margin: 0;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
button,
input {
	*overflow: visible;
	line-height: normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid #09c;
	padding: 4px;
	background-color: #0cf;
	color: #fff;
}
label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
	cursor: pointer;
}

input[type="text"],
input[type="password"] {
	border: 1px solid #999;
	padding: 4px;
	background-color: #fff;
	color: #000;
}

input[type="radio"],
input[type="checkbox"] {
	margin: 0 4px 0 0;
}
label {
	margin: 0 4px 0 0;
}

select {}

textarea {
	overflow: auto;
	vertical-align: top;
}

input[type="radio"] {vertical-align:baseline;}
input[type="checkbox"] {vertical-align: baseline;}

.inputErr,
input[type="text"].inputErr,
input[type="password"].inputErr,
input[type="checkbox"].inputErr,
input[type="radio"].inputErr {
	border: dashed 1px #f00;
}
.requiredField {
	display: none;
}
input[type="button"].submitLoader,
input[type="button"].submitLoader:hover,
input[type="submit"].submitLoader,
input[type="submit"].submitLoader:hover,
a.button.submitLoader,
a.button.submitLoader:hover {
	color: rgba(0,0,0,0);
	background: url('../images/submitLoader.gif') no-repeat center;
}

/* Layout */

#page-1,
#page-2,
#page-3,
#page-4,
#page-5,
#page-6 {
	position: relative;
	height: 800px;
}
#page-1 {background-color: #fdc70b;}
#page-2 {background-color: #48c8eb;}
#page-3 {background-color: #c3d004;}
#page-4 {background-color: #b084c1;}
#page-5 {background-color: #388d94;}
#page-6 {background-color: #f9b000;}

/* Menu */

.menu {
	position: absolute;
	top: 680px;
}
#page-6 .menu {
	top: 820px;
}
.menu.top {
	top: 100px;
	width: 960px;
	text-align: center;
}
.menu.left,
.menu.right {
	width: 400px;
}
.menu.left {
	left: 0;
	text-align: left;
}
.menu.right {
	right: 75px;
	text-align: right;
}

.menu ul {
	margin: 0;
}
.menu ul li {
	display: inline-block;
	list-style-type: none;
	color: #fff;
}
.menu.top ul li {
	color: #000;
}
.menu ul li a {
	margin: 0 5px 0 7px;
	font-family: open_sanssemibold, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
}
.menu.top ul li a {
	margin: 0 4px 0 8px;
	font-size: 13px;
	color: #000;
}
.menu ul li:before {content: '|';}
.menu ul li:first-child:before {content: normal;}

#page-1 .menu ul li a.active {color: #000;}
#page-2 .menu ul li a.active {color: #47c7ea;}
#page-3 .menu ul li a.active {color: #7b9f2f;}
#page-4 .menu ul li a.active {color: #916d97;}
#page-5 .menu ul li a.active {color: #368788;}
#page-6 .menu ul li a.active {color: #348636;}

/* Up and down buttons */

.page-up,
.page-down {
	position: absolute;
	top: 650px;
	left: 445px;
	display: inline-block;
	width: 70px;
	height: 70px;
	background-image: url("../images/buttons-up-down.png");
	background-repeat: no-repeat;
}
.page-up span,
.page-down span {
	display: none;
}
#page-1 .page-up,
#page-3 .page-up,
#page-5 .page-up,
#page-6 .page-up {
	background-position: -140px 0;
}
#page-1 .page-up:hover,
#page-3 .page-up:hover,
#page-5 .page-up:hover,
#page-6 .page-up:hover {
	background-position: -140px -70px;
}
#page-2 .page-up,
#page-4 .page-up {
	background-position: -210px 0;
}
#page-2 .page-up:hover,
#page-4 .page-up:hover {
	background-position: -210px -70px;
}
#page-1 .page-down,
#page-3 .page-down,
#page-5 .page-down,
#page-6 .page-down {
	background-position: 0 0;
}
#page-1 .page-down:hover,
#page-3 .page-down:hover,
#page-5 .page-down:hover,
#page-6 .page-down:hover {
	background-position: 0 -70px;
}
#page-2 .page-down,
#page-4 .page-down {
	background-position: -70px 0;
}
#page-2 .page-down:hover,
#page-4 .page-down:hover {
	background-position: -70px -70px;
}
#page-6 .page-down {
	top: 790px;
}

/* Social media */

.social ul {
	margin: 0;
}
.social ul li {
	float: left;
	list-style-type: none;
	margin: 0 0 0 10px;
}
.social a span {
	display: none;
}
.social a.twitter,
.social a.pinterest,
.social a.facebook {
	display: block;
	width: 24px;
	height: 24px;
	background-image: url("../images/social-media.png");
}
.social a.twitter {
	width: 29px;
}
.social a.twitter {background-position: 0 -40px;}
.social a.pinterest {background-position: -40px -40px;}
.social a.facebook {background-position: -80px -40px;}
#page-1 .social a.twitter {background-position: 0 0;}
#page-1 .social a.pinterest {background-position: -40px 0;}
#page-1 .social a.facebook {background-position: -80px 0;}

#page-1 .social {
	position: absolute;
	top: 98px;
	right: 0;
}
#page-2 .social,
#page-3 .social,
#page-4 .social,
#page-5 .social {
	position: absolute;
	top: 680px;
	right: 0;
}
#page-6 .social {
	position: absolute;
	top: 820px;
	right: 0;
}

/* Content */

.content-center {
	position: relative;
	margin: 0 auto;
	width: 960px;
}

/* Patterns */

.brown-ground {
	position: absolute;
	left: 0;
	top: 500px;
	width: 100%;
	height: 200px;
	background: url("../images/bruine-grond.png") center center repeat-x;
}
#page-1 .grass {
	position: absolute;
	left: 0;
	top: 642px;
	width: 100%;
	height: 58px;
	background: url("../images/gras-p1.png") center center repeat-x;
}
#page-3 .grass {
	position: absolute;
	left: 0;
	top: 627px;
	width: 100%;
	height: 58px;
	background: url("../images/gras-p3.png") center center repeat-x;
}
#page-4 .grass {
	position: absolute;
	left: 0;
	top: 627px;
	width: 100%;
	height: 58px;
	background: url("../images/gras-p4.png") center center repeat-x;
}
.stones {
	position: absolute;
	left: 0;
	top: 700px;
	width: 100%;
	height: 100px;
	background: url("../images/steentjes.png") center center repeat-x;
}
.waves {
	position: absolute;
	left: 0;
	top: 615px;
	width: 100%;
	height: 185px;
	background: url("../images/golven.png") center center repeat-x;
}
.craters {
	position: absolute;
	left: 0;
	top: 628px;
	width: 100%;
	height: 72px;
	background: url("../images/kraters.png") center center repeat-x;
}

/* Visuals */

#page-1 .visual {
	position: absolute;
	left: 5px;
	top: 193px;
	width: 843px;
	height: 528px;
	background: url("../images/visual-p1.png") 0 0 no-repeat;
}
#page-2 .visual {
	position: absolute;
	left: 11px;
	top: 90px;
	width: 883px;
	height: 553px;
	background: url("../images/visual-p2.png") 0 0 no-repeat;
}
#page-3 .visual {
	position: absolute;
	left: 0;
	top: 330px;
	width: 100%;
	height: 339px;
	background: url("../images/visual-p3.png") center center no-repeat;
}
#page-4 .visual {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 685px;
	background: url("../images/visual-p4.png") center center no-repeat;
}
#page-5 .visual {
	position: absolute;
	left: 0;
	top: 25px;
	width: 100%;
	height: 585px;
	background: url("../images/visual-p5.png") center center repeat-x;
}

/* Elements */

.burst {
	position: absolute;
	left: 0;
	top: 126px;
	width: 100%;
	height: 530px;
	background: url("../images/straling.png") center center no-repeat;
}
.whale {
	position: absolute;
	left: -30px;
	top: 540px;
	width: 100%;
	height: 307px;
	background: url("../images/walvis.png") center center no-repeat;
}
.planets {
	position: absolute;
	left: -59px;
	top: 355px;
	width: 292px;
	height: 163px;
	background: url("../images/planeten.png") 0 0 no-repeat;
}
.astronaut {
	position: absolute;
	left: -17px;
	top: 461px;
	width: 171px;
	height: 193px;
	background: url("../images/astronaut.png") 0 0 no-repeat;
}

#page-1 .gmp-logo {
	position: absolute;
	left: 0;
	top: 733px;
	width: 200px;
	height: 28px;
}
#page-1 .gmp-logo a {
	display: block;
	width: 200px;
	height: 28px;
	background: url("../images/gmp-logo.png") 0 0 no-repeat;
}

#page-1 a.webshop {
	position: absolute;
	left: 22px;
	top: 423px;
	width: 160px;
	height: 60px;
}
#page-3 a.webshop {
	position: absolute;
	left: 169px;
	top: 501px;
	width: 180px;
	height: 70px;
}

#page-3 a.button-smartphone {
	position: absolute;
	left: 4px;
	top: 96px;
	width: 224px;
	height: 296px;
	background: url("../images/button-p3-smartphone.png") 0 0 no-repeat;
}
#page-3 a.button-cards {
	position: absolute;
	left: 279px;
	top: 115px;
	width: 332px;
	height: 277px;
	background: url("../images/button-p3-kaarten.png") 0 0 no-repeat;
}
#page-3 a.button-canvas {
	position: absolute;
	left: 647px;
	top: 113px;
	width: 326px;
	height: 280px;
	background: url("../images/button-p3-canvas.png") 0 0 no-repeat;
}
#page-4 a.button-preview {
	position: absolute;
	left: -5px;
	top: 96px;
	width: 279px;
	height: 220px;
	background: url("../images/button-p4-inkijk-exemplaar.png") 0 0 no-repeat;
}
#page-4 a.button-order {
	position: absolute;
	left: 16px;
	top: 444px;
	width: 209px;
	height: 31px;
	background: url("../images/button-p4-bestel.png") 0 0 no-repeat;
}
#page-5 a.button-masks {
	position: absolute;
	left: 226px;
	top: 153px;
	width: 495px;
	height: 463px;
	background: url("../images/button-p5-maskers.png") 0 0 no-repeat;
}
#page-5 a.button-coloring-pictures {
	position: absolute;
	left: -18px;
	top: 111px;
	width: 326px;
	height: 271px;
	background: url("../images/button-p5-kleurplaten.png") 0 0 no-repeat;
}
#page-5 a.button-photo-frames {
	position: absolute;
	left: 703px;
	top: 102px;
	width: 271px;
	height: 256px;
	background: url("../images/button-p5-fotoframes.png") 0 0 no-repeat;
}
#page-5 a.button-3d {
	position: absolute;
	left: 737px;
	top: 370px;
	width: 192px;
	height: 237px;
	background: url("../images/button-p5-3d.png") 0 0 no-repeat;
}

/* Animation */

#page-1 .ani-bird {
	position: absolute;
	left: 110px;
	top: 293px;
	width: 116px;
	height: 61px;
	background: url("../images/ani-p1-vogeltje.png") 0 0 no-repeat;
}
#page-1 .ani-worm {
	position: absolute;
	left: 848px;
	top: 463px;
	width: 34px;
	height: 57px;
	background: url("../images/ani-p1-worm.png") 0 0 no-repeat;
}
#page-1 .ani-worm-2 {
	position: absolute;
	left: 848px;
	top: 502px;
	width: 34px;
	height: 18px;
	background: url("../images/ani-p1-worm-2.png") 0 0 no-repeat;
}
#page-1 .ani-crocodile {
	position: absolute;
	left: 501px;
	top: 582px;
	width: 463px;
	height: 94px;
	background: url("../images/ani-p1-krokodil.png") 0 0 no-repeat;
}
#page-1 .ani-crocodile-2 {
	position: absolute;
	left: 497px;
	top: 521px;
	width: 467px;
	height: 155px;
	background: url("../images/ani-p1-krokodil-2.png") 0 0 no-repeat;
}
#page-1 .ani-motor {
	position: absolute;
	left: 394px;
	top: 221px;
	width: 234px;
	height: 263px;
	background: url("../images/ani-p1-motor.png") 0 0 no-repeat;
}
#page-2 .ani-bird {
	position: absolute;
	left: 14px;
	top: 110px;
	width: 116px;
	height: 61px;
	background: url("../images/ani-p2-vogeltje.png") 0 0 no-repeat;
}
#page-2 .ani-whale {
	position: absolute;
	left: 630px;
	top: 520px;
	width: 220px;
	height: 125px;
}
#page-2 .ani-water {
	position: absolute;
	left: 455px;
	top: 240px;
	width: 317px;
	height: 241px;
	background: url("../images/ani-p2-water.png") 0 0 no-repeat;
}
#page-3 .ani-snake {
	position: absolute;
	left: 13px;
	top: 357px;
	width: 167px;
	height: 181px;
	background: url("../images/ani-p3-slang.png") 0 0 no-repeat;
}
#page-3 .ani-tail {
	position: absolute;
	left: 808px;
	top: 373px;
	width: 133px;
	height: 118px;
	background: url("../images/ani-p3-staart.png") 0 0 no-repeat;
}
#page-3 .ani-snake-head {
	position: absolute;
	left: -20px;
	top: 359px;
	width: 270px;
	height: 306px;
	background: url("../images/ani-p3-slangenkop.png") 0 0 no-repeat;
}
#page-4 .ani-bird {
	position: absolute;
	left: 316px;
	top: 170px;
	width: 79px;
	height: 74px;
	background: url("../images/ani-p4-vogel.png") 0 0 no-repeat;
}
#page-4 .ani-bird-droppings-1 {
	position: absolute;
	left: 350px;
	top: 397px;
	width: 11px;
	height: 17px;
	background: url("../images/ani-p4-vogelpoep-1.png") 0 0 no-repeat;
}
#page-4 .ani-bird-droppings-2 {
	position: absolute;
	left: 322px;
	top: 512px;
	width: 96px;
	height: 51px;
	background: url("../images/ani-p4-vogelpoep-2.png") 0 0 no-repeat;
}
#page-4 .ani-layar {
	position: absolute;
	left: 602px;
	top: 352px;
	width: 119px;
	height: 155px;
	background: url("../images/ani-p4-layar.png") 0 0 no-repeat;
}
#page-4 .ani-layar-2 {
	position: absolute;
	left: 565px; /* 572 */
	top: 270px;
	width: 293px;
	height: 383px;
	background: url("../images/ani-p4-layar-2.png") 0 0 no-repeat;
}

/* Under construction */

.under-construction {
	position: absolute;
	left: 0;
	top: 85px;
	width: 960px;
	height: 530px;
	background-color: rgba(255, 255, 255, 0.9);
}
.under-construction .bengel {
	position: absolute;
	left: 200px;
	top: 25px;
	width: 274px;
	height: 489px;
	background: url("../images/under-construction.png") 0 0 no-repeat;
}
.under-construction .text {
	position: absolute;
	left: 530px;
	top: 100px;
	width: 270px;
	height: 390px;
}
.under-construction .text h1 {
	font-size: 50px;
	line-height: 60px;
	color: #e30613;
}
.under-construction .text p {
	margin: 30px 0 0 0;
	font-size: 30px;
	line-height: 40px;
	color: #000;
}

/* Page 6 - General */

#page-6 {
	height: 900px;
}

/* Page 6 - Patterns */

#page-6 .ground {
	position: absolute;
	left: 0;
	top: 438px;
	width: 100%;
	height: 362px;
	background: #683c10 url("../images/p6-grond.png") center top repeat-x;
}
#page-6 .grass {
	position: absolute;
	top: 686px;
	left: 0;
	width: 100%;
	height: 214px;
	background: url("../images/p6-gras.png") center top repeat-x;
}

/* Page 6 - Objects */

#page-6 .sun {
	position: absolute;
	top: 206px;
	left: 190px;
	width: 609px;
	height: 232px;
	background: url("../images/p6-zon.png") center center no-repeat;
}
#page-6 .text {
	position: absolute;
	top: 60px;
	left: 34px;
	width: 916px;
	height: 116px;
	background: url("../images/p6-tekst.png") center center no-repeat;
}
#page-6 .bengels {
	position: absolute;
	top: 37px;
	left: 136px;
	width: 828px;
	height: 511px;
	background: url("../images/p6-bengels.png") center center no-repeat;
}

/* Page 6 - Buttons */

#page-6 .signs,
#page-6 .more-info,
#page-6 .sticker-1,
#page-6 .sticker-2,
#page-6 .sticker-3,
#page-6 .sticker-4,
#page-6 .sticker-5 {
	display: block;
	position: absolute;
	background-position: center center;
	background-repeat: no-repeat;
}
#page-6 .signs {
	top: 208px;
	left: -5px;
	width: 248px;
	height: 230px;
	background-image: url("../images/p6-borden.png");
}
#page-6 .more-info {
	top: 567px;
	left: 208px;
	width: 701px;
	height: 24px;
	background-image: url("../images/p6-meer-info.png");
}
#page-6 .sticker-1 {
	top: 554px;
	left: 3px;
	width: 209px;
	height: 221px;
	background-image: url("../images/p6-sticker-1.png");
}
#page-6 .sticker-2 {
	top: 633px;
	left: 248px;
	width: 109px;
	height: 141px;
	background-image: url("../images/p6-sticker-2.png");
}
#page-6 .sticker-3 {
	top: 601px;
	left: 389px;
	width: 238px;
	height: 174px;
	background-image: url("../images/p6-sticker-3.png");
}
#page-6 .sticker-4 {
	top: 633px;
	left: 675px;
	width: 82px;
	height: 142px;
	background-image: url("../images/p6-sticker-4.png");
}
#page-6 .sticker-5 {
	top: 632px;
	left: 809px;
	width: 145px;
	height: 143px;
	background-image: url("../images/p6-sticker-5.png");
}

/* Page 6 - Bengelborden */

#page-6 .bord-1,
#page-6 .bord-2,
#page-6 .bord-3,
#page-6 .bord-4,
#page-6 .bord-5,
#page-6 .bord-6 {
	position: absolute;
	background-position: 0 0;
	background-repeat: no-repeat;
    display:none;
}
#page-6 .bord-1 {
	top: 337px;
	left: -50px;
	width: 344px;
	height: 449px;
	background-image: url("../images/p6-bord-1.png");
}
#page-6 .bord-2 {
	top: 339px;
	left: 190px;
	width: 287px;
	height: 447px;
	background-image: url("../images/p6-bord-2.png");
}
#page-6 .bord-3 {
	top: 395px;
	left: 238px;
	width: 491px;
	height: 391px;
	background-image: url("../images/p6-bord-3.png");
}
#page-6 .bord-4 {
	top: 339px;
	left: 608px;
	width: 208px;
	height: 446px;
	background-image: url("../images/p6-bord-4.png");
}
#page-6 .bord-5 {
	top: 344px;
	left: 764px;
	width: 372px;
	height: 441px;
	background-image: url("../images/p6-bord-5.png");
}
#page-6 .bord-6 {
	display: none;
	top: 34px;
	left: 419px;
	width: 197px;
	height: 761px;
	background-image: url("../images/p6-bord-6.png");
}