body{
	margin:0;
	padding:0;
	background-color: black;
    -webkit-text-size-adjust: none;
}

a { 

	border: 0;
	text-decoration: none;
	font-weight: bold;
}
#main { 
	width: 100%;
	max-width: 1400px;
	margin: auto;

}

.story {

	padding: 0;
	margin: 0;
	width: 100%;

	margin: 0 auto;
	border: 0px solid red;
	position:relative;

	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;

	width: 100%;
	overflow: hidden;

	
}
.content {

	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	height: auto;
	border: 0px solid lime;
	margin: 0;
	z-index: 2;
	border: 0px solid yellow;

}

#home {

}

#wat {

}

.klein #second {
	min-height: 600px;
}

#wie {

}

#kern {

}

#hoe {

}

#contact {
	background-color: white;
	min-height: 100%;
	overflow: visible;
}

/* Introduction */

#home .mercuriuslogo {
	text-align: center;
	
	width: 100%;
	z-index: 5; 
	position: absolute;
	top: 30%;

}

.mercuriuslogo img {
	margin: 0 auto;
	width: 90%;
	max-width: 800px;
}

#home .slogan {
	width: 100%;
	text-align: center;
	margin: 0 auto;
	position: absolute;
	top: 40%;
	z-index: 5;
}
#home .slogan img {
	margin: 0 auto;
	width: 90%;
	max-width: 800px;
}






article {
	width: 100%;
	text-align: center;

}
#home article {
	background-color:#000;
	opacity:0.7;
}
#wat article {
	opacity:0.8;
}
#wie article {
	background-color:#000;
	opacity:0.7;
}
#kern article {
	background-color:#000;
	opacity:0.7;
}

#hoe article {
	background-color:#000;
	opacity:0.7;
}

#contact article {

}


.wings {
	margin:auto;
	margin-top:10px;
	width:100%;
	height:50px;	
	position: absolute;
	top: 10px;
	left: 0;
	text-align: center;
	display: block;
	border: 0px dotted red;
	z-index: 3;
}


.title {
	width:100%;
	text-align: center;
	height:35px;
	font-size:35px;
	font-family: 'Roboto', sans-serif;	
	display: block;
	margin: 0;
	border: 0px solid yellow;
	font-weight: normal;
	line-height: 47px;

}

.klein .title {
	height: 20pt;
	font-size: 20pt;
	line-height: 20pt;
}
#wat .content {
	height: 50%;
}
#wat .content h2 {
	color:#539770;
}

.klein #wat .content {
	top: 0;
	height: 12%;
}
.klein #wat .content h2 {
	position: absolute;
	bottom: 0;
}

.groot #wat .content {
	top: 47%;
}

#wie h2 {
	color:#e3b163;
}
#kern h2 {
	color:#36a096;
}
#hoe h2 {
	color:#be7467;
}
.text{
	max-width:700px;
	height:auto;24%
	margin:auto;
	color:#000;
	font-family: 'Open Sans', sans-serif;
	font-size:12pt;	
	text-align: left;
	margin: 0 auto;
	color:#FFF;

	padding:0.5em 5%;

}

.klein .text {
	font-size: 10pt;



}

#wie .text {
	color:#FFF;
}

#contactgegevens {
	width:100%;
	margin: auto;
	color:#000;
	font-family: 'Open Sans', sans-serif;
	font-size:15px;	
	text-align:left;

	text-align: center;

	margin: 0 auto;
	display: block;

}
#contactgegevens div {
	border: 0px solid red;
	width: 75%;
	max-width: 800px;
	margin: 15px auto;
	/* background: url(/Beeld/IMG_5892-vrijstaand.png); */
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100% ;
	height: 50px;

}
#contactgegevens p {
	height: 100%;
}
#contactgegevens a {
	display: inline-block;
	height: 100%;
	width: 32%;
	background-position: center center;
	background-size: contain;
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
}
#contactgegevens .facebook-icoon {
	background-image: url(/Beeld/facebook-icoon.png);
}
#contactgegevens .email-icoon {
	background-image: url(/Beeld/email-icoon.png);
}
#contactgegevens .mercurius-icoon {
	background-image: url(/Beeld/mercurius-icoon.png);
}
#contactgegevens .telefoon-icoon {
	background-image: url(/Beeld/tel-icoon1.png);
}



#animatie{
	margin-left:560px;
	margin-top:80px;
	position:absolute;	
}
#mercurius {
	max-height: 50%;
	max-width: 50%;
	position: absolute;
	right: 0;
	bottom: 50px;
	z-index: 2;

}

.klein #mercurius {
	max-height: 30%;
	max-width: 30%;

}


#video{
	width:100%;
	max-height: 50%;
	margin:auto;
	margin-top: 45px;
	margin-bottom: 20px;


}

#ytvideo{
	width:90%;
	overflow: hidden;
	padding-top: 5%;
	margin: auto;
}
#ytvideo iframe {

	width: 100%;
	height: 90%;
	margin: 0 auto 0 auto;
	display: block;

}

#video video {
	width: 75%;
	max-width: 800px;
	margin: 0 auto;
	display: block;
}

#footer {
	width:100%;
	height:50px;
	background-color:#000;
	position: relative;
	z-index: 1;
}

#footer p {
	line-height: 50px;
	text-align: right;
	font-size: 9px;
	
}

#footer * {
	color: gray;
}





.center {
	width: 100%;
	text-align: center;
	position: absolute;
	height: 100%;
	border: 0px solid lime;
	
	z-index: 5;
	top: 0;
}
.klein 	.center {
	top: 15%;
}
.neptext {
	width: 100%;
	height:100%;
	color:#000;
	font-family: 'Open Sans', sans-serif;
	font-size:15pt;	
	text-align: center;
	position:relative;
	color:#FFF;
	padding: 0;

}
.selector {
	width: 100%;
	height:100%;

}
.selector ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 0px solid white;
	height:5px;
	width: 100px;
	position: absolute;

	
}

.selector li {
	overflow: visible;
	border: 0px solid yellow;
	width: 100%;
	height: 1px;
	padding: 0;
	margin: 0;
	position: absolute;
	top:0px;

	-webkit-transform: rotate(-360deg);
	transition: all 0.8s ease-in-out;
}

.selector li div {
	border: 0px solid red;
	margin-left: -100px;
	margin-top: -40px;
	width: 142px;
	height: 73px;
	position: relative;
	transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;

}

.selector li div a {
	display: block;
	width: inherit;
	height: inherit;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

}

ul.fake {display: block;}


	.fake a.advertentiex									{ background-image: url(/iconen/icon_advertentiex_rollover.png); }
	a.advertentiex									{ background-image: url(/iconen/icon_advertentiex.png); }
	a.advertentiex:active, a.advertentiex:hover, a.advertentiex:focus 		{ background-image: url(/iconen/icon_advertentiex_rollover.png); }
	.fake a.audio 									{ background-image: url(/iconen/icon_audio_rollover.png); }
	a.audio 									{ background-image: url(/iconen/icon_audio.png); }
	a.audio:active, a.audio:hover, a.audio:focus 					{ background-image: url(/iconen/icon_audio_rollover.png); }
	.fake a.teksten 									{ background-image: url(/iconen/icon_teksten.png); }
	a.teksten 									{ background-image: url(/iconen/icon_teksten.png); }
	a.teksten:active, a.teksten:hover, a.teksten:focus 				{ background-image: url(/iconen/icon_teksten_rollover.png); }
	.fake a.huisstijl 									{ background-image: url(/iconen/icon_huisstijl_rollover.png); }
	a.huisstijl 									{ background-image: url(/iconen/icon_huisstijl.png); }
	a.huisstijl:active, a.huisstijl:hover, a.huisstijl:focus 			{ background-image: url(/iconen/icon_huisstijl_rollover.png); }
	.fake a.mediaadvies 									{ background-image: url(/iconen/icon_mediaadvies_rollover.png); }
	a.mediaadvies 									{ background-image: url(/iconen/icon_mediaadvies.png); }
	a.mediaadvies:active, a.mediaadvies:hover, a.mediaadvies:focus 			{ background-image: url(/iconen/icon_mediaadvies_rollover.png); }
	.fake a.netwerken 									{ background-image: url(/iconen/icon_netwerken_rollover.png); }
	a.netwerken 									{ background-image: url(/iconen/icon_netwerken.png); }
	a.netwerken:active, a.netwerken:hover, a.netwerken:focus 			{ background-image: url(/iconen/icon_netwerken_rollover.png); }
	.fake a.onlinemarketing 								{ background-image: url(/iconen/icon_onlinemarketing.png); }
	a.onlinemarketing 								{ background-image: url(/iconen/icon_onlinemarketing.png); }
	a.onlinemarketing:active, a.onlinemarketing:hover, a.onlinemarketing:focus 	{ background-image: url(/iconen/icon_onlinemarketing_rollover.png); }
	.fake a.strategie 									{ background-image: url(/iconen/icon_strategie_rollover.png); }
	a.strategie 									{ background-image: url(/iconen/icon_strategie.png); }
	a.strategie:active, a.strategie:hover, a.strategie:focus 			{ background-image: url(/iconen/icon_strategie_rollover.png); }
	.fake a.fotografie 									{ background-image: url(/iconen/icon_fotografie_rollover.png); }
	a.fotografie 									{ background-image: url(/iconen/icon_fotografie.png); }
	a.fotografie:active, a.fotografie:hover, a.fotografie:focus		 	{ background-image: url(/iconen/icon_fotografie_rollover.png); }
	.fake a.vormgeving 									{ background-image: url(/iconen/icon_vormgeving_rollover.png); }
	a.vormgeving 									{ background-image: url(/iconen/icon_vormgeving.png); }
	a.vormgeving:active, a.vormgeving:hover, a.vormgeving:focus 			{ background-image: url(/iconen/icon_vormgeving_rollover.png); }
	.fake a.copy 										{ background-image: url(/iconen/icon_copy_rollover.png); }
	a.copy 										{ background-image: url(/iconen/icon_copy.png); }
	a.copy:active, a.copy:hover, a.copy:focus 					{ background-image: url(/iconen/icon_copy_rollover.png); }
	a.grafisch 									{ background-image: url(/iconen/icon_grafisch.png); }
	a.grafisch 									{ background-image: url(/iconen/icon_grafisch.png); }
	a.grafisch:active, a.grafisch:hover, a.grafisch:focus 				{ background-image: url(/iconen/icon_grafisch_rollover.png); }
	.fake a.actie 									{ background-image: url(/iconen/icon_actie.png); }
	a.actie 									{ background-image: url(/iconen/icon_actie.png); }
	a.actie:active, a.actie:hover, a.actie:focus 					{ background-image: url(/iconen/icon_actie_rollover.png); }
	.fake a.sessie 									{ background-image: url(/iconen/icon_sessie_rollover.png); }
	a.sessie 									{ background-image: url(/iconen/icon_sessie.png); }
	a.sessie:active, a.sessie:hover, a.sessie:focus 				{ background-image: url(/iconen/icon_sessie_rollover.png); }

.backgrounds {

	z-index: 1;
	position: relative;
	overflow: hidden;


}
.backgrounds img {
	display: none;
width: 100%;
}
.backgrounds .background {
	height: 1000px;
}
.backgrounds div {
	height: inherit;

}
.background {
	height: inherit;
}
.background div {
	height: inherit;
	background-position: center;
	background-repeat: no-repeat;
	background-color: black;
}
.breed .background div {
	background-size: 100% 100%;
}
.hoog .background div {
	background-size: 100%;
}

.desktop .background {
	display: block;
	width: 100%;
}
.mobile .background {
	display: block;
	width: 100%
}

.background div {
	width: 100%;	
}
.background div img {
	width: 100%;	
}


	.neptext {	
		width: 100%;
		height: 100%;
		padding: 0% 0 ;
		position: absolute;
		left: 0;
		top: 0;

	}
	 .klein .neptext {	
		width: 100%;
		height: 100%;
	}

	 .klein .neptext ul {
		border: 0px solid white;
		list-style: none;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		padding: 0;
		position: relative;
		top: 0;
		
	}
	.klein .neptext .selector ul li {
		float: left;
		width: 24%;
		margin: 0;
		position: relative;
		top: auto;
		height: 17%;
		margin-bottom: 10px;
	}
	.klein .neptext ul li div {
		height: 100%;
		width: 100%;
		margin: 0;
	}
	.klein .neptext ul li div a  {
		width: 100%;
		height: 100%;
		display: block;
		border: 0px solid red;
		background-repeat: no-repeat;
		background-position: center;	
		background-size: auto 100%;	
		margin: auto;		

	}
	.neptext a:hover, .neptext a:active, .neptext a:focus {
		background-color: transparent;

	} 

.draaien {
	background-image: url(/Beeld/mobile/draaien.png);
	background-size: contain;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1000;
	display: none;
	background-repeat: no-repeat;
	background-color: rgba(0,0,0,0.8);
	background-position: center center;
}
	
.hoog .draaien {
	//display: block;
}

#strook {
	width: 100%;
	height: 100px;
	background-color: gray;
	position: fixed;
	bottom: 0;
	z-index: 999;
-webkit-box-shadow: inset 0px 16px 21px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    inset 0px 16px 21px 0px rgba(50, 50, 50, 0.75);
box-shadow:         inset 0px 16px 21px 0px rgba(50, 50, 50, 0.75);
	border-top: 1px solid black;
}

#strook p {
	width: 100%;
	margin: auto;
	color: white;
	text-align: center;
	position: absolute;
	bottom: 30%;	
}

.tesmal {
	background-image: url(/Beeld/mobile/tesmal.png);
	background-size: contain;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1000;
	display: none;
	background-repeat: no-repeat;
	background-color: rgba(0,0,0,0.8);
	background-position: center center;
}

.smal .tesmal {
	display: block;
}


.hoog .content,  .klein .content {
	
}

	.info {
		background-color: rgba(0,0,0,0.5);
		color: white;
		position: fixed;
		width: 100%;
		bottom: 0;
		text-align: center;
		z-index: 10000;
		font-size: 10pt;
		display: none;
	
	}
div {
	/* border: 1px dotted lime; */
}

/*.neptekst {width: 50%; }
.select a {display: block; width: 200px; height: 200px; border: 1px solid yellow;}
.selector.open li input + label { width: 200px; height: 200px;} 
/* .selector.open { border: 10px solid pink; display: block; height: 100%; width: 100%; margin: 0 auto;} */
/* .selector.open ul { display: block; border: 10px solid red; display: block; height: 100%; width: 100%; margin: 0; padding: 0;} */


/* vliegende vleugels */
#wingsStableContainer {
	display: block;
	text-align: center;
	width: 100%;
	z-index: 5;
	position: absolute;
	padding-left: 4%;

}
#wingsContainer {
	display: none; 

	text-align: left;
	background: transparent;
	width: 320px;
	height: 320px;
	margin: 0;
	padding: 0;
	border: 0px solid green;
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	background-color: rgba(255,255,255,0);
}

#imgWingsContainer {
	width:320px;
	height: 320px;
	display:block;
	border: 1px solid red;
	overflow:hidden;  
}

#imgContainer img {
	border: 1px solid lime;
}

.background div { background-color: gray; }
/* klein / groot */

/*	.klein .text { font-size: 11px; }
	.klein .story { height: 480px; }
	.groot #wat { height:52%; }

*/

/* orientatie */



.homepage {
	position: absolute;
	z-index: 90;
	top: 0;
	left: 0;
	width: 100%;

}
.homepage img {
	width: 100%;

}

.klein .homepage .klein, .groot .homepage .groot {
	display: block;
}
.klein .homepage .groot, .groot .homepage .klein {
	display: none;
}

.container {
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
	border: 0px solid green;
	width: 100%;
	background-color: white;
}