*{margin:0px; padding:0px}

html{height:100%;}

body{

	width:100%;
	height:100%;

	font-family:Georgia,serif;
	font-size:1em ;

	overflow-x:hidden;

}

#wrapper{
    position:relative;
    min-height:100%;
}

a{color:#000; text-decoration:none; color:#13142c; cursor:pointer;}
.button{margin:1em 0; padding:1em; display:inline-block; border:1px solid #13142c; background:none; width:auto; cursor:pointer;}

/*Header*/
header{width:100%; transition:margin 0.8s;  position:fixed; height:4em; box-shadow:0px 0px 20px rgba(0,0,0,0.1); background:#FFF; font-family:Didot,serif; z-index:98; color:#13142c; top:0px; margin-top:-5em;}
header .logo{height:3em; float:left; padding:0.5em 1em; background:#13142c;}

header nav{display:inline; float:left; margin:1em 0; margin-left:-1px;}
header nav ul li{float:left; padding:0.5em 2em;  border-left:1px solid #13142c; list-style:none;} 

header nav ul li a:hover, header nav ul li .active{border-bottom:1px solid #13142c; cursor:pointer; position:relative;}
header nav ul li a:hover:after, header nav ul li .active:after{content:""; position:absolute; border-bottom:solid 2px #13142c; width:100%; height:100%; left:0px; top:3px;}


header .nav_toggle{display:none; margin:1em; float:left; position:relative; font-size:1.3em;}
header .nav_toggle img{float:left; margin-right:10px; height:1.2em; margin-top:0;}
header .nav_toggle:hover{cursor:pointer;}

header .subnav{float:right; margin:1em 0; margin-right:-1px; }
header .subnav li{ float:left; padding:0.5em 2em;   border-right:1px solid #13142c; list-style:none;}

.nav_mobile{display:none; width:50%; background:#13142c; position:fixed; z-index:97; padding:4em 0; left:-70%; overflow:auto;   -webkit-transition: all 0.3s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}
.nav_mobile ul li a{color:#FFF; width:80%; padding:8% 10%; display:block;  font-size:1.3em;}
.nav_mobile ul li .active{background:rgba(255,255,255,0.1);}

.languages{background:#13142c; overflow:auto; min-width:250px; position:fixed; z-index:100; right:0px; top:4em; box-shadow:10px 10px 10px rgba(0,0,0,0.1); display:none;}
.languages li{list-style: none;}
.languages li a{padding:1em 10%; width:80%; display:block; color:#FFF;}
.languages li .active, .languages li a:hover{background:rgba(255,255,255,0.1);}
.icon{height:1.4em; float:right; }



/*Body*/
section{width:100%; position:relative; overflow:hidden; font-size:1.4em; padding-top:0px;}
article{width:30%; margin:0 7%; pointer-events:all; z-index:2; position:relative;}

h1{font-family:Didot,serif; position:relative; font-size:2em; margin-bottom:0.8em; font-style:italic; border-bottom:1px solid #13142c; display:inline-block;}
h1:after{content:""; position:absolute; border-bottom:solid 2px #13142c; width:100%; height:100%; left:0px; top:3px;}

.left{float:left;}
.right{float:right;}

/* Style for SVG */
section svg {z-index: 2; width: 100%; height: 100%; left:0; position:absolute; pointer-events:none; }
section svg path { fill: #fff; pointer-events:all;}


#horseList ul{list-style:none; padding-bottom:3em;}
#horseList ul li a,#horseList ul #nohorses{display:block; color:#13142c; width:80%; padding:2em 10%; text-align:center; border-bottom:1px solid #13142c; font-family:didot,serif; font-style:italic; font-size:1.3em;}
#horseList ul li a:hover,#horseList ul #nohorses:hover{text-decoration:underline;}

#horseList ul #nohorses{margin-top:2%; border-top:1px solid #13142c; }

#horseList{display:inline-block; width:100%;}

/*Form*/
input,textarea{border-radius:0px; font-family:Georgia,serif; padding:1em 5%; border:1px solid #13142c; placeholder-color:#13142c; width:90%; margin:0.4em 0; font-size:0.8em;}
::-webkit-input-placeholder { color: #13142c; } ::-moz-input-placeholder { color: #13142c; } :-ms-input-placeholder { color: #13142c; } :-moz-input-placeholder { color: #13142c; }


.slider:after,.video:after{
  padding:25% 20%;
  vertical-align: middle;
  height: 50%;
  width:60%;
  top:0px;
  position:absolute;
  content: "Bekijk foto's";
  z-index:99;
  background:rgba(0,0,0,0.6);
  color:#FFF;
  opacity:0;
  -o-:opacity 0.5s;
  -moz-:opacity 0.5s;
  -webkit-:opacity 0.5s;
  transition:opacity 0.5s;
  font-style:italic;
}

.video:after{
	  content: "Bekijk video";
	  opacity:1 !important;
}

.video,.slider{cursor:pointer;}

section:nth-child(even) .slider:after{
  text-align:right;
}


.slider:hover:after{opacity:1; pointer-events:none;}
.slideropen:after{opacity:0 !important;}

/*Slider*/
.slider,.image{
	width:100%; 
	height:100%;
	position:absolute;
	overflow:hidden;
	background:#13142c;
	z-index:1;
	margin:0;
}

.slider div{height:100%; width:100%; overflow:hidden;}
.slider div img{width:100%; pointer-events:none; }

.image img{height:100%; width:auto;}

.slick-prev,.slick-next{margin:0 100px !important;}

svg,article{
	-o-transition:left 0.5s ease-in;
	-moz-transition:left 0.5s ease-in;
	-webkit-transition:left 0.5s ease-in;
}



footer{width:94%; padding:1em 3%; z-index:90; position:absolute; bottom:0px; margin-top:-3em; background:#FFF; box-shadow:5px 0px 10px rgba(0,0,0,0.1);}
footer a{float:right}

/*Small stuff*/
#scrollIndicator{position:fixed; text-align:center;  width:100%; bottom:20px; z-index:95; pointer-events:none; font-family:Didot,serif; }
#loader{width:100%; height:100%; background:#FFF; position:fixed; z-index:99;}
#loader div{font-family:Didot,serif; text-align:center; margin-top:20%; font-style:italic; font-size:1.2em; line-height:1.5em;}

#intro{width:80%; padding:100px 10% 30px; text-align:center; color:#13142c; border-bottom:1px solid #13142c; font-family:didot,serif; font-style:italic; font-size:1.2em;}

.open{left:0%;}
.close{left:-50%;}

.playbtn{font-family:didot,serif;  font-style:italic; font-size:1.4em; background:#FFF; text-align:center; padding:1em 1%; position:absolute;width:16%; top:40%; left:42%;}
.playbtn img{width:20px !important;}
.youtube img{height:100%; width:auto;}

#youtube{
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	position:fixed;
	z-index:98;
	top:0px;
	left:0px;
}


#video{
	width:80%;
	margin:10% auto 0;
}

#video iframe{
	width:100%;
}

.closebtn,.closesliderbtn{
	width:40px !important;
	height:40px !important;
	position:absolute;
	right:30px;
	top:100px;
	z-index:99;	
	cursor:pointer;
	opacity:0.6;
}

.closesliderbtn{
	display:none;
}

#overlay{
    position:fixed;
    background:rgba(0,0,0,0.8);
    width:100%; height:100%;
	z-index:96;
	display:none;
}

#mail_sent{
	position:fixed;
	top:20%;
	left:0px;
	z-index:99;
	width:100%;
	display:none;
}

#mail_sent p{
	margin:auto;
	width:25%;
	text-align:center;
	box-shadow:1px 1px 3px rgba(0,0,0,0.3);
	background:#13142c;
	padding:2em;
	font-size:1.2em;
	border-radius:2px;
	color:#FFF;
	font-style:italic;
}

.subtitle{
	font-size:0.6em;
	display:block;
	text-align:center;
	margin-top:1em;
}

.leftSlider{left:-25%;}
.rightSlider{left:25%;}

.hideArticle{ transform:rotateX(180deg); }

.articleOnly{margin:10% 10%;}
	

@media screen and (max-width:1500px){
	section article{font-size:0.8em;}
}

@media screen and (max-width:1300px){
	section article{font-size:0.7em;}
}

/*Media queries*/
@media screen and (max-width: 1200px){
	header .subnav a .label{display:none;}

}


@media screen and (max-width: 1050px){
	header .subnav a .label, header .subnav .social{display:none;}
	section article{font-size:0.6em;}
}


@media screen and (max-width: 900px){
	section article{width:80%; margin:25% 10% 5%;}
	section svg{display:none;}
	section{height:auto !important;}

	.slider div img,.image div img{height:100%; width:auto;}
	.image div img{width:100%;}

	.slider:after{opacity:0 !important;}

	section .slider,section .image{
		position:relative; width:100%;
/*		mask: url("media/mask_mobile.svg"); 
		-webkit-mask-image: url("media/mask_mobile.svg"); 
		-webkit-mask-size: 100% auto;*/

	}


	section .image img{
		width:100%;
	}


	.leftSlider{left:0%;}
	.rightSlider{left:0%;}

	.nav_main{display:none;}
	header .nav_toggle{display:block;}

	.logo{float:none; position:absolute;}
	.languages{width:100%; right:0px;}

	#scrollIndicator{display:none;}

	footer{text-align:center;}
	footer span, footer a{padding:1em 0; float:none; display:block;}

	.nav_mobile{display:block; height:100%;}

	.slider:after{opacity:0;}

	#wrapper{padding-bottom:25%;}

	#horseList ul{padding-bottom:0em;}

	.image img{height:auto; width:auto;}

}

@media screen and (max-width: 400px){
	header{font-size:0.8em;}
	header .logo{height:3em;}
	
	.nav_mobile{font-size:0.8em;}
	.nav_mobile ul li a{font-size:1.6em;}

	section article{font-size:0.8em; margin:25% 10% 5%;}

	
	footer{font-size:0.7em;}

	.nav_mobile{width:70%; left:-70%;}

	.open{left:0%;}
	.close{left:-70%;}
}