@font-face{ 
	font-family: 'Circular';
	src: url('font/CircularPro-Book.otf');
}
@font-face{ 
	font-family: 'CircularBlack';
	src: url('font/CircularPro-Black.otf');
}
@font-face{ 
	font-family: 'CircularBold';
	src: url('font/CircularPro-Bold.otf');
}
@font-face{ 
	font-family: 'CircularMedium';
	src: url('font/CircularPro-Medium.otf');
}
@font-face{ 
	font-family: 'CircularItalic';
	src: url('font/CircularPro-BookItalic.otf');
}



body { width: 100%; height: 100%; margin: 0; font-family: "CircularMedium", Helvetica, Arial, sans-serif; }
html { height: 100%;  box-sizing:border-box;  -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%;  --scroll-behavior: smooth; scroll-behavior: smooth;  }


*, :after,:before{box-sizing:inherit}

.nodisp_small {}
.disp_small { display: none; }
.nodisp_tablet { }
.disp_tablet { display: none; }
.nodisp_phone {}
.disp_phone { display: none; }
.br_phone {}

@media screen and (max-width: 1259px) {
	.nodisp_small { display: none; }
}
@media screen and (max-width: 960px) {
	.nodisp_tablet { display: none; }
	.disp_tablet { display: block; }
}
@media screen and (max-width: 680px) {
	.nodisp_phone { display: none; }
	.disp_phone { display: block; }
}


/* *********************************
Typography
********************************* */

h1, h2, h3, p { margin: 0; padding: 0; }

p { font-size: 1.2rem; line-height: 1.3; color: #555; }

/* *********************************
Header
********************************* */


#hero { position: relative; width: 100%; height: 87.5%; min-height: 700px; background-color: #2a41b5; }

#header { position: relative; height: 100%;}
#header-back, #header-front { position: absolute; top: 0px; height: 100%; width: 100%;  }
#header-back-phone { display: none;  }

#header-back { display: flex; flex-direction: row;  }
.headercol { display: flex; width: 25%; height: 100%; padding-left: 0; align-items: flex-end;  }
.headercol img { width: 100%; height: auto; }
#headerback1 { width: 100%; height: 51.4%; background: url('../img/header_1_ret.jpg') center center no-repeat; background-size: cover; } 
#headerback2 { width: 100%; height: 100%; background: url('../img/header_2_ret.jpg') center center no-repeat; background-size: cover; } 
#headerback3 { width: 100%; height: 68.6%; background: url('../img/header_3_ret.jpg') center center no-repeat; background-size: cover; } 
#headerback4 { width: 100%; height: 49.6%; background: url('../img/header_4_ret.jpg') 20% center no-repeat; background-size: cover; } 
#headerback5 { width: 100%; height: 100%; background: url('../img/header_2_ret.jpg') center center no-repeat; background-size: cover; } 
#headerback6 { width: 100%; height: 72%; background: url('../img/header_1_ret.jpg') center center no-repeat; background-size: cover; } 


#kop { position: absolute; left: 10%; bottom: 12%; width: 725px; padding-left: 0; }
#kop h1 { font-family: "CircularBlack", Helvetica, Arial, sans-serif; font-size: 3.3rem; line-height: 1.1; color: #fff; }

#logo { position: absolute; left: 0px; top: 0px; width: 100%; height: 275px; padding: 0; }
#logo div { position: absolute; padding: 0; overflow: hidden; margin-top: 0; transition: all 5s;  }
#logo div img { width: 100%; height: auto; }
#logo-m { left: 2.5%; top: 16px; width: 90px; height 258px; color: #000; } 
#logo-u { left: 12.5%; top: 96px; width: 78px; height: 178px; color: #00a867; } 
#logo-z { left: 37.5%; margin-left: -60px; top: 16px; width: 79px; height 258px; color: #e6420e; } 
#logo-m2 { left: 50%; margin-left: 24px; top: 16px; width: 90px; height 258px; color: #fff; } 
#logo-sub { position: absolute; left: 25%; margin-left: -11.5rem; top: 16px; color: #fff;  font-family: "CircularMedium", Helvetica, Arial, sans-serif; font-size: 1.25rem; line-height: .8; }

body.hakkerig #logo div { transition: none; }


#nav { position: absolute; left: 75%; top: 16px; width: 25%; padding: 0; display: flex; }
#nav ul { list-style: none; margin: 0; padding: 0; width: 100%; }
#nav ul li { display: inline-block; width: 30%; }
#nav ul li a { position: absolute; top: 0px; display: inline-block; color: #fff; text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid #2a41b5;  overflow: hidden;  }
#nav ul li a:hover { border-bottom: 2px solid #e6420e;}


@media screen and (min-width: 1261px) {
	#kop { width: 850px; }
	#kop h1 { font-size: 3.65rem;  }
}
@media screen and (min-width: 1440px) {
	#kop { width: 900px; }
	#kop h1 { font-size: 4rem;  }
}
@media screen and (min-width: 1600px) {
	#kop { width: 960px; }
	#kop h1 { font-size: 4.4rem;  }
}
@media screen and (min-width: 1800px) {
	#kop { width: 1100px; }
	#kop h1 { font-size: 5rem;  }
}
@media screen and (min-width: 1960px) {
	#kop { width: 1260px; }
	#kop h1 { font-size: 5.5rem;  }
}



@media screen and (max-width: 1199px) {
	#hero {  height: 75%; min-height: 500px; }
	#kop { width: 700px; }
	#kop h1 { font-size: 3rem;  }
}
@media screen and (max-width: 1099px) {
	#kop { width: 650px; }
	#kop h1 { font-size: 2.7rem;  }
}
@media screen and (max-width: 960px) {
	#logo-m { top: 56px;  } 
	#logo-u { left: 17%;  } 
	#logo-z { top: 56px;  } 
	#logo-m2 { top: 56px; } 
	#kop { width: 570px; }
	#kop h1 { font-size: 2.4rem;  }
	#logo-sub { margin-left: -9.2rem; font-size: 1rem;  }
}
@media screen and (max-width: 840px) {
	#kop { width: 510px; }
	#kop h1 { font-size: 2.1rem;  }
}
@media screen and (max-width: 680px) {

	#hero { height: 605px; }
	#logo { width: 50%; }
	#logo-m, #logo-u, #logo-z, #logo-m2 { top: 14px;  } 
	#logo-m { left: 2%; width: 23%;  } 
	#logo-u { left: 29%; width: 19%;  } 
	#logo-z { left: 52%; width: 19%; margin-left:0;  } 
	#logo-m2 { left: 77%; width: 22%; margin-left:0;} 
	
	#logo-sub { left: 50%; margin-left: -8.65rem; top: 130px; font-size: 1rem;  }
	
	#header-back { display: none; }
	#header-front { height: 605px; }
	#header-back-phone { display: flex; position: absolute; top: 155px; height: 450px; width: 100%;  }
	#header-back-phone .headercol { width: 50%; }
	
	#nav { left: 100%; margin-left: -90px; width: 90px; display: block; }
	#nav ul { width: 90px; }
	#nav ul li { display: block; width: 90px;  }
	#nav ul li a { position: relative; font-size: 1.2rem;  }
	
	#kop { left: 5%; width: 80%; bottom: 30px; }
	#kop h1 { font-family: "CircularBold", Helvetica, Arial, sans-serif; font-size: 2.3rem;  }	
}
@media screen and (max-width: 440px) {
	#kop {  width: 86%;  }
}

@media screen and (max-width: 410px) {
	#kop h1 { font-size: 2.1rem;   }
}


/* *********************************
Lead
********************************* */

#lead_outer { width: 100%; background-color: #fff; }
#lead { padding: 68px 120px; }
#lead p { margin: 0; font-size: 2.05rem; line-height: 1.35; color: #00bd74; letter-spacing: .5px; }

@media screen and (min-width: 1600px) {
	#lead { padding: 90px 120px 110px 120px; }
	#lead p { font-size: 2.5rem;  max-width: 1400px; }
}
@media screen and (min-width: 1960px) {
	#lead { padding: 110px 120px 130px 120px; }
	#lead p { font-size: 2.8rem; max-width: 1700px; }
}
@media screen and (max-width: 1199px) {
	#lead { padding: 68px 100px; }
	#lead p { font-size: 1.9rem;   }
}
@media screen and (max-width: 960px) {
	#lead { padding: 68px 75px; }
}
@media screen and (max-width: 680px) {
	#lead { padding: 50px 5%; }
	#lead p { font-size: 1.3rem;   }
}
/* *********************************
About
********************************* */


#about_outer { width: 100%; background-color: #f1f1f1; }
#missievisie { padding: 73px 120px; display: flex; }
#missievisie div, #krachtvanmuziek > div {  width: 50%; }

#missievisie h3 { width: 100%; font-family: "CircularBold", Helvetica, Arial, sans-serif; font-size: 1.7rem; margin-bottom: .7rem; }
#missievisie p { padding-right: 30px; letter-spacing: .2px;  }
#missievisie div:first-child p { padding-right: 68px; }

#krachtvanmuziek { display: flex; background-color: #1d37b8; }
#krachtvanmuziek div:first-child { padding: 73px 100px 73px 120px; }
#krachtvanmuziek h3 { width: 100%; font-family: "CircularBold", Helvetica, Arial, sans-serif; font-size: 1.85rem; margin-bottom: .8rem; color: #fff; }
#krachtvanmuziek p { color: #fff;  }


.half {  display: flex; }
#half_1 { width: 50%; height: 100%; background: #fff url('../img/half_1_ret.jpg') center center no-repeat; background-size: cover; }
#half_2 { width: 50%; height: 100%; background: #fff url('../img/half_2_ret.jpg') bottom center no-repeat; background-size: contain; }
#half_3 { width: 100%; height: 50%; min-height: 350px; background: #fff url('../img/half_1.jpg') top center no-repeat; background-size: cover; }
#half_4 { width: 100%; height: 50%; min-height: 350px; background: #fff url('../img/half_2.jpg') center center no-repeat; background-size: cover; }


@media screen and (min-width: 1400px) {
	#krachtvanmuziek { min-height: 500px; }
	#krachtvanmuziek div:first-child { padding: 75px 80px 80px 120px; }
	#krachtvanmuziek h3 { font-size: 2.3rem;  }
	#krachtvanmuziek p { font-size: 1.5rem; padding-right: 70px;  }
}
@media screen and (min-width: 1600px) {
	#missievisie { padding: 90px 120px;  }
	#missievisie h3 { font-size: 2rem;  }
	#missievisie p { font-size: 1.5rem;  }
	#missievisie div:first-child p { padding-right: 120px; }
	#missievisie div:last-child p { padding-right: 100px; }
}
@media screen and (min-width: 1960px) {
	#missievisie { padding: 100px 120px;  }
	#missievisie h3 { font-size: 2.1rem;  }
	#missievisie p { font-size: 1.8rem;  }
	#missievisie div:first-child p { padding-right: 180px; }
	#missievisie div:last-child p { padding-right: 150px; }
	#krachtvanmuziek { min-height: 600px; }
	#krachtvanmuziek div:first-child { padding: 113px 80px 113px 120px; }
	#krachtvanmuziek h3 { font-size: 2.6rem;  }
	#krachtvanmuziek p { font-size: 2rem; padding-right: 40px;  }
}
@media screen and (min-width: 2300px) {
	#half_2 { background-size: cover;  }
}

@media screen and (max-width: 1199px) {
	#missievisie { padding: 90px 100px;  }
	#missievisie div:first-child p { padding-right: 80px; }
	#krachtvanmuziek div:first-child { padding: 75px 70px 80px 100px; }
}
@media screen and (max-width: 960px) {
	#half_1 { display: none; }
	#half_2 { width: 100%; }
	#half_3 { display: block; }
	#missievisie { padding: 90px 75px;  }
}
@media screen and (min-width: 930px) and (max-width: 960px) {
	#half_2 { width: 100%; height: 100%; background: #fff url('../img/half_2_ret.jpg') bottom center no-repeat; background-size: cover; }
}

@media screen and (max-width: 680px) {
	#lead { padding: 50px 5%; }
	#lead p { font-size: 1.3rem;   }

	#missievisie, #krachtvanmuziek { display: block; padding: 50px 4% 0 5%; }
	#missievisie div, #krachtvanmuziek > div {  display: block; width: 100%;  }
	#missievisie > div { margin-bottom: 50px; }
	#missievisie h3 { font-size: 1.3rem; margin-bottom: 1rem;  }
	#missievisie p { font-size: 1rem;  }
	#missievisie div:first-child p, #missievisie div:last-child p { padding-right: 5%; }

	#krachtvanmuziek div:first-child { padding: 0 5% 50px 0; }
	#krachtvanmuziek h3 { font-size: 1.3rem; margin-bottom: 1rem;  }
	#krachtvanmuziek p { font-size: 1rem;  }

	#half_3 { width: 100%; height: 260px; min-height: 260px; background: #fff url('../img/half_1_phone.jpg') top center no-repeat; background-size: cover; }
	#half_4 { width: 100%; height: 260px;  min-height: 260px;background: #fff url('../img/half_2_phone.jpg') center center no-repeat; background-size: cover; }

}



/* *********************************
Payoff
********************************* */


#payoff_outer { width: 100%; background-color: #fff; }
#payoff {  display: flex; justify-content: flex-end; padding: 70px 95px 60px 0; }
#payoff h2 { max-width: 850px; font-family: "CircularBold", Helvetica, Arial, sans-serif; font-size: 4.5rem; line-height: 1.18; color: #e6420e; }

@media screen and (min-width: 1600px) {
	#payoff h2 { max-width: 1050px; font-size: 5.3rem; margin-right: 80px; }
}
@media screen and (min-width: 1960px) {
	#payoff h2 { max-width: 1250px; font-size: 6rem; margin-right: 100px; }
}
@media screen and (max-width: 1199px) {
	#payoff h2 { max-width: 650px; font-size: 3.6rem; margin-right: 40px; }
}
@media screen and (max-width: 680px) {
	#payoff {  padding: 50px 10%; }
	#payoff h2 { max-width: 100%; font-size: 2.7rem; margin-right: 0px; }
}


/* *********************************
Locatie
********************************* */

#locatie_outer { width: 100%; background-color: #00bd74; }

#locatie_top { position: relative; width: 100%; height: 87.5%; min-height: 700px; background: #8d9088 url('../img/locatie_ret.jpg') center center no-repeat; background-size: cover; }

#locatie_bot { padding: 73px 120px 77px 120px; }
#locatie_bot h3 { width: 100%; font-family: "CircularBold", Helvetica, Arial, sans-serif; font-size: 1.9rem;  }
#locatie_bot p { margin: 0; font-size: 1.9rem; line-height: 1.3; color: #fff; letter-spacing: .2px; }

@media screen and (min-width: 1600px) {
	#locatie_top { min-height: 800px;  }
	#locatie_bot { max-width: 1300px; }
}
@media screen and (min-width: 1960px) {
	#locatie_top { min-height: 900px;  }
	#locatie_bot h3 { font-size: 2rem; }
	#locatie_bot p { font-size: 2rem; max-width: 1400px; }
}
@media screen and (max-width: 1199px) {
	#locatie_top { height: 75%; min-height: 500px;  }
	#locatie_bot h3 { font-size: 1.6rem; }
	#locatie_bot p { font-size: 1.5rem;  }
}
@media screen and (max-width: 680px) {
	#locatie_top { height: 260px; min-height: 260px;  }
	#locatie_bot { padding: 50px 5%; }
	#locatie_bot h3 { font-size: 1.3rem; }
	#locatie_bot p { font-size: 1.2rem;  }
}


/* *********************************
Contact
********************************* */


#contact_outer { width: 100%; background-color: #f1f1f1; }
#contact {  height: 400px;  display: flex; }
#contact div {  width: 50%; }

#contact h3 { width: 100%; font-family: "CircularBold", Helvetica, Arial, sans-serif; font-size: 1.7rem; margin-bottom: .7rem; }
#contact div p { letter-spacing: .2px;   }
#contact div a, #contact div a:hover { text-decoration: none; color: #1e38b8;  }



#contact div:first-child { padding: 73px 120px; }
#contact div:last-child { background: #f0f0f0 url('../img/contact_ret.jpg') center center no-repeat; background-size: cover; }

@media screen and (min-width: 1600px) {
	#contact { height: 500px; }
	#contact div p { font-size: 1.55rem; }
}
@media screen and (min-width: 1960px) {
	#contact { height: 600px; }
	#contact div p { font-size: 1.7rem; }
}
@media screen and (max-width: 1199px) {
	#contact { height: 450px; }
	#contact div p { font-size: 1.1rem; }
}
@media screen and (max-width: 680px) {
	#contact_outer { background-color: #fff; }
	#contact {  display: block; height: auto; }
	#contact div {  display: block; width: 100%; }
	#contact div:first-child { padding: 50px 5%; }
	#contact div:last-child { height: 240px; }
	#contact h3 { width: 100%; font-family: "CircularMedium", Helvetica, Arial, sans-serif; font-size: 1.2rem; margin-bottom: 0; }
	#contact div p { font-size: 1.2rem;  }

}
/* *********************************
Footer
********************************* */

#footer_outer { width: 100%; background-color: #fff; }
#footer { position: relative; width: 100%; height: 130px; display: flex; align-items: center; }
#footer div { width: 50%; }
#footer div:first-child { padding-left: 120px; }
#footer div p { color: #000; font-size: .82rem; line-height: 1.3;  }

@media screen and (max-width: 680px) {
	#footer { height: 95px; align-items: top; }
	#footer div:first-child { padding-left: 5%; }
	#footer img { width: 126px; height: auto; margin-top: -10px;}
	#footer div p { font-size: .7rem;   }
}



/* *********************************
Font
********************************* */

@media screen and (min-width: 1200px) {
	#kop h1 { font-family: "CircularBold", Helvetica, Arial, sans-serif; }
	#missievisie h3, #krachtvanmuziek h3, #payoff h2, #locatie_bot h3, #contact h3 { font-family: "CircularMedium", Helvetica, Arial, sans-serif; }
	#logo-sub, #nav ul li a, #lead, #locatie_bot p { font-family: "Circular", Helvetica, Arial, sans-serif; }

}