@font-face {
    font-family: 'bungeeregular';
    src: url('webfontkit/bungee-regular-webfont.woff2') format('woff2'),
         url('webfontkit/bungee-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ubuntu_monobold';
    src: url('webfontkit/ubuntumono-bold-webfont.woff2') format('woff2'),
         url('webfontkit/ubuntumono-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ubuntu_monoitalic';
    src: url('webfontkit/ubuntumono-italic-webfont.woff2') format('woff2'),
         url('webfontkit/ubuntumono-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ubuntu_monoregular';
    src: url('webfontkit/ubuntumono-regular-webfont.woff2') format('woff2'),
         url('webfontkit/ubuntumono-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html,body{
	height: 100%;
	font-family: 'ubuntu_monoregular';
	letter-spacing: 2px;
	color: #0f0022;
}

/**************Header****************/
header{
	width: 100%;
	height: 90px;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 900;
}

#logo{
	margin-top: 20px;
	display: block;
	text-decoration: none;
	width: 58px;
	height: 50px;
	margin-left: 60px;
	background-image:url(../img/logo_wit.svg);
	background-repeat:no-repeat;
	float:left;
}

#menuknop{
	display: none;
}

nav #navlist{
	display:block;
	float:right;
	margin-right: 60px;
	height:40px;
	/*width: 350px;*/
	margin-top:25px;
}

/*button .btn{
    display:block;
	float:right;
	text-decoration:none;
	color: #ffffff;
	font-family: 'ubuntu_monobold';
	font-size: 16px;
	line-height: 40px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding-left:20px;
	padding-right:20px;
	margin-left:10px;	
    border: solid 1px #FFFFFF;
}

button .btn:hover{
    background-color:#1eff64;
    color: #0f0022;
   border: solid 1px #1eff64;
}*/


#navlist li a{
	display:block;
	float:right;
	text-decoration:none;
	color: #ffffff;
	font-family: 'ubuntu_monobold';
	font-size: 16px;
	line-height: 40px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding-left:20px;
	padding-right:20px;
	margin-left:10px;	
    border: solid 1px #FFFFFF; 
}

#navlist li a:hover{
 background-color:#1eff64;
    color: #0f0022;
   border: solid 1px #1eff64;
}

#navlist li a.current{
	color:#1eff64;
}



/*pijlen*/
.pijl{
	width: 50px;
	height: 50px;
	position: fixed;
	z-index: 99;
	border: solid 1px #FFFFFF;
	cursor: pointer;
	background-color: transparent; 
	color: #FFFFFF;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
}

.pijl.omlaag{
	bottom: 60px;
	left: 50%;
	margin-left: -25px;
}

.pijl:hover{
	-webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
	background-color: #1eff64;
	border-color: #1eff64;
}

.pijl:hover .arrow{
	 -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.arrowwrapper{
	width: 50px;
	height: 50px;
	-ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Safari */
    transform: rotate(-45deg);
}

.arrow{
	width: 11px;
	height: 46px;
	left: 20px;
	
	position: absolute;
	-webkit-animation: pijldown 1.5s linear infinite;
    animation: pijldown 1.5s linear infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes pijldown {
    0% {top: -17px;}
    50% {top: -30px;}
    100% {top: -17px;}
	
}

@keyframes pijldown {
   0% {top: -17px;}
    50% {top: -30px;}
    100% {top: -17px;}
}


/*teller*/
.slideinfo{
	width: 60px;
	height: 50px;
	z-index: 9999;
	position: fixed;
	top: 50%;
	margin-top: -25px;
	left: 50px;
	color: #FFFFFF;
	font-family: 'ubuntu_monoitalic';
	letter-spacing: 2px;
}

.dividerteller{
	width: 11px;
	height: 38px;
	margin-left: 5px;
}

.huidig{
	font-size: 60px;
	font-weight: 400;
	
}

.totaal{
	font-size: 20px;
}



/*slides*/
.slide{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 100%;
	position: relative;
}

.soffree.bcg{
    background-image: url(../img/home_soffree_54.jpg);
}

.ilse.bcg{
    background-image: url("../img/home_ilse.jpg");
}

.klm.bcg{
    background-image: url("../img/home_klm.jpg");
}

.lions.bcg{
    background-image: url("../img/home_lions_advocaten.jpg");
}

.hetnieuweketelhuis.bcg{
    background-image:url("../img/home_het_nieuwe_ketelhuis.jpg")
}

.sovividly.bcg{
    background-image:url("../img/home_sovividly.jpg")
}


.slidewrapper{
    width: 980px;
	height:266px;
	position: absolute;
	top:50%;
	left:50%;
	margin-left: -490px;
	margin-top: -133px;
}

h2.titelslide{
	font-family: 'bungeeregular';
	letter-spacing: 4px;
	font-size: 38px;
	line-height: 52px;
	color: #FFFFFF;
}

.knopwrapper{
	width: 222px;
	height: 50px;
	position: relative;
	overflow: hidden;
	margin-top: 40px;
    cursor: pointer;
}

a.knop{
	display: block;
	width: 220px;
	height: 48px;
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'ubuntu_monobold';
	font-size: 18px;
	line-height: 50px;
	text-align: center;
	position: absolute;
	z-index: 99;
    cursor: pointer;
}

.rollover{
	width: 222px;
	height: 50px;
	position: absolute;
	left: -222px;
	background-color: #1EFF64;
    cursor: pointer;
}

a.knop:hover{
	border-color: #1EFF64;
	color: #0f0022;
	-webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.knopwrapper:hover .rollover{
	-webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	left: 0px;
	
}

@media screen and (min-width: 1750px) {
 .slidewrapper{
    width: 1280px;
	height:350px;
	margin-left: -640px;
	margin-top: -175px;
}

    h2.titelslide{
	font-size: 64px;
	line-height: 80px;
}
}


@media screen and (max-width: 1239px) {
 .slidewrapper{
    width: 70%;
	margin-left: -35%;
}

    .slideinfo{
	left: 30px;
}

}
@media screen and (max-width: 1024px) {
.ilse{
	background-position: 60% 50%;
}

.hetnieuweketelhuis{
	background-position: 75% 50%;
}

.sovividly{
	background-position: 60% 50%;
}
}
@media screen and (max-width: 767px) {

#logo{
	margin-left: 40px;
}

nav #navlist{
	margin-right: 40px;
}

  .dividerteller{
	display: none;
}

.huidig{
	display:none;
}

.totaal{
	display:none;
}
    
}

@media screen and (max-width: 640px) {

#logo{
	margin-left: 30px;
}

nav #navlist{
	margin-right: 30px;
}

 .slidewrapper{
    width: 80%;
	height:210px;
	margin-left: -40%;
	margin-top: -105px;
}

    h2.titelslide{
	font-size: 30px;
	line-height: 40px;
}
    

}