/* Fonts */

/* Reset */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: none;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}

body {
	background: none;
}

#stage {
	width: 100%;
	height: 394px;
	background: transparant;
	position: absolute;
	cursor: pointer;
	overflow: hidden;
	font-family: co-headline, sans-serif;
	font-weight: 300;
	font-style: normal;
	line-height: 0;
}

.overlayLoad {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:white;
	transition:all .3s ease-in-out
}

body.loaded .overlayLoad {
	opacity:0
}

.hoofdtekstContainer {
	position: absolute;
	width:922px;
	top:32px;
	left:20px;
	height:49px;
	text-align: center;
	left: 50%;
    transform: translateX(-50%);
}

.hoofdtekst {
	text-align: center;
	font-family: co-headline, sans-serif;
	font-size:32px;
	font-weight: 700;
	letter-spacing: 0px;
	color: #232D3D;
	text-transform: uppercase;
	display:inline-block;
}

.beeld {
	top: 25px;
	left:22px;
	width:145px;
	height:75px;
	position: absolute;
	background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.blok {
	top: 60px;
	opacity:0;
	width: 185px;
	height: 248px;
	background: #B2DBBF 0% 0% no-repeat padding-box;
	border-radius: 7px;
	transition:all .2s ease-in-out;
	animation: .3s ease-out .2s 1 slideInFromLeft;
	animation-fill-mode: forwards;  
}

.header {
    position: absolute;
    display: block;
    margin: 0 auto;
    top: 0;
    width: calc(100% - 10px);
    height: 69px;
    max-width: 949px;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes slideInFromLeft {
    0% {
		opacity:0; 
		top:60px;
    }
    100% {
		opacity:1; 
		top:71px;
    }
}

.blok:hover {
	background:#F4E956;
}
.blok:hover .cta {
	background: #B2DBBF 0% 0% no-repeat padding-box;
	color: #232D3D;
}


.blok1 {
	animation-delay: .2s; /* how long to delay the animation from starting */
}
.blok2 {
	animation-delay: .35s; /* how long to delay the animation from starting */
}
.blok3 {
	animation-delay: .5s; /* how long to delay the animation from starting */
}
.blok4 {
	animation-delay: .65s; /* how long to delay the animation from starting */
}
.blok5 {
	animation-delay: .8s; /* how long to delay the animation from starting */
}

.copy {
	text-align: center;
	letter-spacing: 0px;
	color: #232D3D;
	font-size: 20px;
	display:inline-block;
	white-space: nowrap;
	line-height: 1;
}

.copyContainer {
    position: absolute;
    width: 172px;
    top: 126px;
    left: 6px;
    height: 42px;
    text-align: center;
    line-height: 1;
}

.subcopy {
	text-align: center;
	letter-spacing: 0px;
	color: #232D3D;
	font-size: 15px;
	display:inline-block;
	line-height: 1;
}
.subcopyContainer  {
	position: absolute;
	width:172px;
	top: 167px;
	left:6px;
	height:18px;
	text-align: center;
	line-height: 1;
}

.cta {
	position: absolute;
    top: 188px;
    left: 13px;
    width: 161px;
    height: 39px;
    background: #232D3D 0% 0% no-repeat padding-box;
    border-radius: 23px;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0px;
    color: #F4E956;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 37px;
    transition: all .2s ease-in-out;
}

.footer {
    top: 333px;
    left: 50%;
    transform: translateX(-50%);
    width: 950px;
    height: 48px;
	background: #232D3D 0% 0% no-repeat padding-box;
	border-radius: 7px;
	position: absolute;
}

.footerText {
    top: 23px;
    right: 160px;
    width: auto;
    text-align: left;
    letter-spacing: 0px;
    color: #FFFFFF;
    position: absolute;
    font-size: 20px;
    display: inline-block;
}
.footerImg {
	position: absolute;
    top: 14px;
    right: 13px;
    width: 135px;
    height: 24px;
}



/* slick */
.slide {
	margin-top: 70px;
	position: relative;
}
.slick-right {
	position: ABSOLUTE;
    z-index: 3;
    top: 50%;
	right: calc(50% - 355px);
	transform: translateY(-50%);
	width: 13px;
}

.slick-prev {
    position: ABSOLUTE;
    z-index: 3;
    top: 50%;
	left: calc(50% - 355px);
    transform: translateY(-50%);
    width: 13px;
    margin: 0 auto;
}


.slick-slide {
	margin: 0 4px;

}

.slick-list {
	height: 394px;
	width:963px;
    margin: 0 auto!important;
}
@media (max-width:963px){
	.copyContainer {
		width:155px;
		left:6px;
	}

	.subcopyContainer  {
		width:155px;
		left:6px;
	}
	.beeld {
		left:11px;
	}
	.cta {
		top: 188px;
		left: 6px;
		width: 154px;
		height: 39px;
	}
	.blok {
		width:167px;
	}
	.slick-list {
		width:722px;
	}

	.slick-right {
		right: calc(50% - 385px);
		display:block;
	}
	.slick-prev {
		left: calc(50% - 385px);
		display:block;
	}
	.footer {
		width: 710px;
	}
	.hoofdtekstContainer {
		width: 703px;
	}
}

@media (max-width:794px){
	.copyContainer {
		width:137px;
		left:6px;
	}

	.subcopyContainer  {
		width:137px;
		left:6px;
	}
	
	.cta {
		top: 188px;
		left: 6px;
		width: 136px;
		height: 39px;
	}
	.blok {
		width:149px;
	}
	.beeld {
		left: 2px;
	}
	.slick-list {
		width:481px;
	}

	.slick-right {
		right: calc(50% - 259px)
	}
	.slick-prev {
		left: calc(50% - 259px)
	}
	.footer {
		width: 469px;
	}
	.hoofdtekstContainer {
		width: 462px;
	}
	.copy {
		font-size: 20px;
	}
}


@media (max-width:542px){
	.slick-list {
		width:240px;
	}
	.copyContainer {
		width:218px;
		left:6px;
	}

	.subcopyContainer  {
		width:218px;
		left:6px;
	}
	
	.cta {
		top: 188px;
		left: 39px;
		width: 161px;
		height: 39px;
	}
	.blok {
		width:100%;
	}
	.beeld {
		left:45px;
	}
	.slick-right {
		right: calc(50% - 138px)
	}
	.slick-prev {
		left: calc(50% - 138px)
	}
	.footer {
		width: 279px;
	}
	.hoofdtekstContainer {
		width: 282px;
		top:12px;
		line-height: 1;
	}
	.footerText {
		top: 6px;
		right: 104px;
		width: 160px;
		height: 100%;
		text-align: left;
		letter-spacing: 0px;
		color: #FFFFFF;
		position: absolute;
		font-size: 16px;
		display: inline-block;
		line-height: 1;
	}
	.footerImg {
		position: absolute;
		top: 15px;
		right: 13px;
		width: 111px;
		height: auto;
	}
}