/* FONTS */

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

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

/* STYLES */

html {
	height: 100%;
}
body {
    font-size: 1em;
    line-height: 1.4;
    background: #000;
    position: relative;
    min-height: 100%;
    text-align: center;
    overflow-y: scroll;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

#background {
	position: fixed;
	top: 0; left: 0;
	z-index: -2;
	width: 100%; height: 100%;
	background: url('../images/background.jpg') no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/background.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/background.jpg', sizingMethod='scale')";
}

#splash {
	position: absolute;
	left: 50%; top: 50%;
	width: 529px; height: 287px;
	margin: -181px 0 0 -264px;
	z-index: 2;
	text-align: center;
	color: #e5e5e5;
	font: 30px 'daxlight',sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	
	-webkit-font-smoothing: antialiased;
	
	display: none;
}
#printlogo { display: none; }

.splash #splash {
	display: block;
	
	visibility:visible;
	
	animation-duration: 2s;
	animation-name: splash;
	animation-fill-mode: forwards;
	
	-moz-animation-duration: 2s;
	-moz-animation-name: splash;
	-moz-animation-fill-mode: forwards;
	
	-o-animation-duration: 2s;
	-o-animation-name: splash;
	-o-animation-fill-mode: forwards;
	
	-webkit-animation-duration: 2s;
	-webkit-animation-name: splash;
	-webkit-animation-fill-mode: forwards;
}

#splash strong {
	display: block;
	height: 212px;
	background: url('../images/splashlogo.png') no-repeat;
	overflow: hidden;
	text-indent: -999em;
	margin-top: 40px;
}

#wrapper {
	width: 926px; height: 685px;
	position: absolute;
	top: 29px; left: 50%;
	margin: 0 0 0 -463px;
	text-align: left;
	z-index: 2;
	
	-webkit-font-smoothing: antialiased;
}
.splash #wrapper {
	display: none;
	
	animation-duration: 0.6s;
	animation-name: zoomIn;
	animation-fill-mode: forwards;
	
	-moz-animation-duration: 0.6s;
	-moz-animation-name: zoomIn;
	-moz-animation-fill-mode: forwards;
	
	-o-animation-duration: 0.6s;
	-o-animation-name: zoomIn;
	-o-animation-fill-mode: forwards;
	
	-webkit-animation-duration: 0.6s;
	-webkit-animation-name: zoomIn;
	-webkit-animation-fill-mode: forwards;
	
	animation-delay:1.7s;
	-moz-animation-delay:1.7s;
	-webkit-animation-delay:1.7s;
	-o-animation-delay:1.7s;
}
.csstransitions .splash #wrapper {
	display: block;
	visibility: hidden;
}

h1 {
	width: 207px; height: 83px;
	display: block;
	margin: 0 0 50px;
}
h1 a {
	width: 207px; height: 83px;
	display: block;
	overflow: hidden;
	text-indent: -999em;
	background: url('../images/logo.png') no-repeat;
}

nav ul {
	display: block;
	margin: 0 0 22px -13px; padding: 0;
	height: 18px;
	width: 960px;
	text-align: center;
}

nav li {
	font: 16px 'daxlight',sans-serif;
	padding: 0 11px 0 0;
	display: inline-block;
}
nav li + li {
	padding-left: 11px;
	border-left: 1px solid #fff;
}
nav li a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	-webkit-font-smoothing: subpixel-antialiased;
}
nav li a:hover, nav li.active a {
	color: #da1523;
}

#main {
	border: 2px solid #fff;
	position: relative;
	box-shadow: 0 3px 20px #000;
}

#main .images {
	position: relative;
	width: 922px; height: 463px;
}
#main .images img {
	position: absolute;
	top: 0; left: 0;
	z-index: 1;
}
#main .images img.active {
	z-index: 3;
}
#main .images img.last-active {
	z-index: 2;
}

.banners {
	position: absolute;
	top: 0; right: 0;
	height: 463px; width: 215px;
	overflow: hidden;
	z-index: 5;
}
.banners .banner {
	height: 463px; width: 215px;
	background: url('../images/bannerbg.png') repeat-x top;
	overflow: hidden;
	
	-webkit-font-smoothing: subpixel-antialiased;
}
.banners h2 {
	color: #e5e5e5;
	background: #e6382f;
	font: 14px/34px 'daxmedium';
	height: 34px;
	padding-left: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
}
.banners p {
	font: 11px/14px 'Verdana',sans-serif;
	color: #535353;
}
.banners .banner.sierlijk p {
	font: italic 24px/24px 'Times',serif;
	margin-top: 10px;
}
.banners .banner.sierlijk p span.year {
	font-size: 48px; line-height: 48px;
}
.banners strong {
	margin-bottom: 6px;
	display: block;
}
.banners p {
	padding: 15px 20px 0; margin: 0;
}
.banners a {
	color: #535353;
	text-decoration: underline;
}
.banners a:hover {
	color: #da1523;
}
.banners .banner.normaal p, .banners .banner.vakantie p {
	font-weight: bold;
}
.banners .banner.vakantie p {
	padding-bottom: 200px;
	background: url('../images/vakantie.png') bottom no-repeat;
}

footer {
	padding-top: 20px;
	padding-bottom: 40px;
}
footer .details {
	color: #808080;
	font: 10px/14px 'Verdana',sans-serif;
	float: right;
}
footer a {
	text-decoration: none;
	color: #808080;
}
footer a:hover {
	text-decoration: none;
	color: #da1523;
}
footer .hmodh {
	color: #fff;
	font: 14px/14px 'daxlight',sans-serif;
	text-transform: uppercase;
	position: relative;
	float: left;
	padding-left: 40px;
}
footer .hmodh .icon {
	position: absolute;
	width: 43px; height: 79px;
	background: url('../images/hmodh-line.png') top no-repeat;
	left: 0; bottom: -13px;
	z-index: 5;
}
footer .hmodh .icon .dot {
	position: absolute;
	width: 36px; height: 36px;
	background: url('../images/hmodh-dot.png');
	left: 0; bottom: 0;
	
	-webkit-transition: -webkit-transform 0.1s linear;
	-moz-transition: -moz-transform 0.1s linear;
	-o-transition: -o-transform 0.1s linear;
	transition: transform 0.1s linear;
}
footer .hmodh:hover .icon .dot {
	transform: scale(1.3);
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-o-transform: scale(1.3);
}

@media screen and (min-height: 840px) {
	body {
    	overflow-y: hidden;
	}
	#wrapper {
		width: 926px; height: 685px;
		position: absolute;
		top: 50%; left: 50%;
		margin: -387px 0 0 -463px;	
	}
}

/* ANIMATIONS */

@keyframes splash {
	0% {
		opacity:0;
		transform: rotate(3deg) scale(1.15);
		visibility:hidden;
	}
	25% {
		opacity: 1;
		visibility:visible;
	}
	75% {
		opacity: 1;
		transform: rotate(0deg) scale(1);
		visibility:visible;
	}
	100% {
		opacity:0;
		transform: rotate(-1deg) scale(1.15);
		visibility:hidden;
	}
}

@-moz-keyframes splash
{
	0% {
		opacity:0;
		-moz-transform: rotate(3deg) scale(1.15);
		visibility:hidden;
	}
	25% {
		opacity: 1;
		visibility:visible;
	}
	75% {
		opacity: 1;
		-moz-transform: rotate(0deg) scale(1);
		visibility:visible;
	}
	100% {
		opacity:0;
		-moz-transform: rotate(-1deg) scale(1.15);
		visibility:hidden;
	}
}

@-webkit-keyframes splash
{
	0% {
		opacity:0;
		-webkit-transform: rotate(3deg) scale(1.15);
		visibility:hidden;
	}
	25% {
		opacity: 1;
		visibility:visible;
	}
	75% {
		opacity: 1;
		-webkit-transform: rotate(0deg) scale(1);
		visibility:visible;
	}
	100% {
		opacity:0;
		-webkit-transform: rotate(-1deg) scale(1.15);
		visibility:hidden;
	}
}

@-o-keyframes splash
{
	0% {
		opacity:0;
		-o-transform: rotate(3deg) scale(1.15);
		visibility:hidden;
	}
	25% {
		opacity: 1;
		visibility:visible;
	}
	75% {
		opacity: 1;
		-o-transform: rotate(0deg) scale(1);
		visibility:visible;
	}
	100% {
		opacity:0;
		-o-transform: rotate(-1deg) scale(1.15);
		visibility:hidden;
	}
}

@keyframes bgZoomIn {
	from {
		opacity:0.5;
		transform: scale(1);
	}
	to {
		opacity:1;
		transform: scale(1.05);
	}
}

@-moz-keyframes bgZoomIn
{
	from {
		opacity:0.5;
	}
	to {
		opacity:1;
	}
}

@-webkit-keyframes bgZoomIn
{
	from {
		opacity:0.5;
		-webkit-transform: rotate(-1.5deg) scale(1);
	}
	to {
		opacity:1;
		-webkit-transform: rotate(0deg) scale(1.05);
	}
}

@-o-keyframes bgZoomIn
{
	from {
		opacity:0.5;
		-o-transform: scale(1);
	}
	to {
		opacity:1;
		-o-transform: scale(1.05);
	}
}

@keyframes zoomIn {
	from {
		opacity:0;
		transform: scale(0.9);
		visibility: hidden;
	}
	to {
		opacity:1;
		transform: scale(1);
		visibility: visible;
	}
}

@-moz-keyframes zoomIn
{
	from {
		opacity:0;
		visibility: hidden;
	}
	to {
		opacity:1;
		visibility: visible;
	}
}

@-webkit-keyframes zoomIn
{
	from {
		opacity:0;
		-webkit-transform: rotate(2deg) scale(0.9);
		visibility: hidden;
	}
	to {
		opacity:1;
		-webkit-transform: rotate(0deg) scale(1);
		visibility: visible;
	}
}

@-o-keyframes zoomIn
{
	from {
		opacity:0;
		-o-transform: scale(0.9);
		visibility: hidden;
	}
	to {
		opacity:1;
		-o-transform: scale(1);
		visibility: visible;
	}
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}