@charset "UTF-8";
/* broezels | CSS for desktop */


/* Header */
#header_master {
    width: 100%;
    height: 65px;
    position: fixed;
    top: 0px;
    z-index: 100;
    background-color: hsla(0,0%,100%,0.95);
}

#header_master_trans { /*transparante header*/
    width: 100%;
    height: 65px;
    position: fixed;
    top: 0px;
    z-index: 100;
}

#header {
    width: 1240px;
    margin: 0px auto 0px auto;
}

#header_logo {
    width: 205px;
    height: 47px;
    float: left;
    margin-top: 10px;    
}

#header_menu {
    width: 36px;
    height: 31px;
    float: right;
    margin: 15px -15px 0px 0px;   
}


/* Animatie voor elke pagina */
#animatie {
    width: 1240px;
    height: 425px;
    margin: 0px auto 0px auto;
    margin-top: 65px;
}


/* Subnavigatie voor de boerderij, het bos, de savanne of het strand */
#subnav {
    width: 1240px;
    height: 220px;
    margin: 15px auto 15px auto;
}

/*de boerderij*/
#db_kleuren {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 0px 30px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #95C11F;
    background-image: url(../images/knop_kleur_w.png);
    cursor: pointer;
}
#db_kleuren:hover {
    color: #009640;
}

#db_spel {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 30px 0px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #009640;
    background-image: url(../images/knop_spel_w.png);
    cursor: pointer;
}
#db_spel:hover {
    color: #95C11F;
}

#db_verhaal {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 0px 30px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #584744;
    background-color: #FFD500;
    background-image: url(../images/knop_verhaal_gr.png);
    cursor: pointer;
}
#db_verhaal:hover {
    color: #FFFFFF;
}

#db_video {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 30px 0px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #004899;
    background-image: url(../images/knop_video_w.png);
    cursor: pointer;
}
#db_video:hover {
    color: #009FE3;
}

/*het bos*/
#hb_kleuren {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 0px 30px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #009640;
    background-image: url(../images/knop_kleur_w.png);
    cursor: pointer;
}
#hb_kleuren:hover {
    color: #95c11f;
}

#hb_spel {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 30px 0px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #95c11f;
    background-image: url(../images/knop_spel_w.png);
    cursor: pointer;
}
#hb_spel:hover {
    color: #009640;
}

#hb_verhaal {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 0px 30px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #a99893;
    background-image: url(../images/knop_verhaal_w.png);
    cursor: pointer;
}
#hb_verhaal:hover {
    color: #584744;
}

#hb_video {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 30px 0px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #584744;
    background-color: #ffd500;
    background-image: url(../images/knop_video_gr.png);
    cursor: pointer;
}
#hb_video:hover {
    color: #FFFFFF;
}

/*de savanne*/
#ds_kleuren {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 0px 30px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #F39200;
    background-image: url(../images/knop_kleur_w.png);
    cursor: pointer;
}
#ds_kleuren:hover {
    color: #e30613;
}

#ds_spel {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 30px 0px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #e30613;
    background-image: url(../images/knop_spel_w.png);
    cursor: pointer;
}
#ds_spel:hover {
    color: #f39200;
}

#ds_verhaal {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 0px 30px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #D7007F;
    background-image: url(../images/knop_verhaal_w.png);
    cursor: pointer;
}
#ds_verhaal:hover {
    color: #951B81;
}

#ds_video {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 30px 0px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #584744;
    background-color: #ffd500;
    background-image: url(../images/knop_video_gr.png);
    cursor: pointer;
}
#ds_video:hover {
    color: #FFFFFF;
}

/*het strand*/
#hs_kleuren {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 0px 30px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #009fe3;
    background-image: url(../images/knop_kleur_w.png);
    cursor: pointer;
}
#hs_kleuren:hover {
    color: #004899;
}

#hs_spel {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 30px 0px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #584744;
    background-color: #ffd500;
    background-image: url(../images/knop_spel_gr.png);
    cursor: pointer;
}
#hs_spel:hover {
    color: #FFFFFF;
}

#hs_verhaal {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 0px 30px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #004899;
    background-image: url(../images/knop_verhaal_w.png);
    cursor: pointer;
}
#hs_verhaal:hover {
    color: #009fe3;
}

#hs_video {
    width: 220px;
    height: 190px;
    border-radius: 30px 30px 30px 0px;
    margin: 0px 15px 0px 0px;
    padding: 15px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #a99893;
    background-image: url(../images/knop_video_w.png);
    cursor: pointer;
}
#hs_video:hover {
    color: #584744;
}

#terug {
    width: 150px;
    height: 95px;
    border-radius: 30px;
    padding: 110px 15px 15px 15px;
    float: left;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #009FE3;
    background-image: url(../images/knop_terug_w.png);
    cursor: pointer;
}
#terug:hover {
    color: #004899;
}


/* Tekst vlak voor algemene pagina's */
#tekst {
    width: 800px;
    margin: 0px auto 0px auto;
    margin-top: 120px;
    color: #584744;
    line-height: 26px; 
}

h1 {
    letter-spacing: 1px;
    color: #009FE3;
}

h2 {
    letter-spacing: 1px;
    color: #009FE3;
}


/* Voor kleuren, spelletjes, verhaaltjes of video */
#interactie_g { /*geel*/
    background-color: #ffd500;
    width: 100%;
    height: 670px;
    margin-top: 65px;
}

#interactie_o { /*oranje*/
    background-color: #f39200;
    width: 100%;
    height: 670px; 
    margin-top: 65px;
}

#interactie_r { /*rood*/
    background-color: #e30613;
    width: 100%;
    height: 670px;   
    margin-top: 65px;
}

#interactie_m { /*magenta*/
    background-color: #d7007f;
    width: 100%;
    height: 670px;
    margin-top: 65px;
}

#interactie_lgr { /*licht grijs*/
    background-color: #a99893;
    width: 100%;
    height: 670px;
    margin-top: 65px;
}

#interactie_lg { /*licht groen*/
    background-color: #95c11f;
    width: 100%;
    height: 670px;
    margin-top: 65px;
}

#interactie_dg { /*donker groen*/
    background-color: #009640;
    width: 100%;
    height: 670px;
    margin-top: 65px;
}

#interactie_lb { /*licht blauw*/
    background-color: #009FE3;
    width: 100%;
    height: 670px;
    margin-top: 65px;
}

#interactie_db { /*donker blauw*/
    background-color: #004899;
    width: 100%;
    height: 670px;
    margin-top: 65px;
}


#interactie_box {
    width: 1240px;
    height: 650px;
    margin: 15px auto 15px auto;
}

#interactie_box_knutsel {
    width: 1240px;
    height: 650px;
    margin: 15px auto 15px auto;
    background-image: url(../images/background_knutselen.png);
}

/*interactie basis elementen*/
#int_titel {
    width: 100%;
    height: 80px;
    z-index: 50;
    font-size: 60px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    margin: 15px auto 0px auto;
    padding-top: 40px;
}

#int_titel_dg {
    width: 100%;
    height: 80px;
    z-index: 50;
    font-size: 60px;
    letter-spacing: 1px;
    text-align: center;
    color: #584744;
    margin: 15px auto 0px auto;
    padding-top: 40px;
}

#int_subtitel {
    width: 100%;
    height: 40px;
    z-index: 49;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
}

#int_subtitel_dg {
    width: 100%;
    height: 40px;
    z-index: 49;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: center;
    color: #584744;
}

#int_kleuren {
    width: 383px;
    height: 270px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0px 10px 5px hsla(0,0%,0%,0.10);
    box-shadow: 0 0px 10px 5px hsla(0,0%,0%,0.10);
    transform: rotate(-6deg);
    z-index: 15;
    float: left;
    position: absolute;
    margin: 130px auto 0px 90px;
}

#int_knutselen {
    width: 270px;
    height: 383px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0px 10px 5px hsla(0,0%,0%,0.10);
    box-shadow: 0 0px 10px 5px hsla(0,0%,0%,0.10);
    z-index: 10;
    float: left;
    position: absolute;
    margin: 70px auto 0px 472px;
}

#int_spel {
    width: 383px;
    height: 270px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0px 10px 5px hsla(0,0%,0%,0.10);
    box-shadow: 0 0px 10px 5px hsla(0,0%,0%,0.10);
    transform: rotate(6deg);
    z-index: 5;
    float: left;
    position: absolute;
    margin: 130px auto 0px 740px;
}

#int_animatie {
    width: 1240px;
    height: 650px;
    top: 85px;
    position: absolute;
}

#int_video {
    width: 746px;
    height: 418px;
    margin: 30px auto 0px auto;
}

#fout {
	width: 100%;
	top: 150px;
	position: absolute;
}



/*intro & eiland & checkpage*/
#interactie_intro {
    width: 100%;
    height: 650px;    
}

#interactie_introbox {
    width: 1240px;
    height: 650px;
    margin: 15px auto 15px auto;
}

#interactie_check {
    width: 100%;
    height: 650px;   
	text-align: center;
}

#naar_eiland {
    width: 250px;
    height: 70px;
    z-index: 99;
    border-radius: 30px 30px 30px 0px;
    padding: 30px 10px 30px 30px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    bottom: 40px;
    font-size: 22px;
    letter-spacing: 1px;
    text-align: left;
    color: #FFFFFF;
    background-color: #95C11F;
    cursor: pointer;
    background-image: url(../images/knop_t_terug_w.png);
    background-repeat: no-repeat;
    background-position: 140px 0%;
}
#naar_eiland:hover {
    color: #009640;
}

#naar_webshop {
    width: 250px;
    height: 70px;
    z-index: 99;
    border-radius: 30px 30px 30px 0px;
    padding: 30px 10px 30px 30px;
    position: absolute;
    left: 50%;
    margin-left: 0px;
    bottom: 40px;
    font-size: 22px;
    letter-spacing: 1px;
    text-align: left;
    color: #FFFFFF;
    background-color: #009FE3;
    cursor: pointer;
    background-image: url(../images/knop_shop_w.png);
    background-repeat: no-repeat;
    background-position: 140px 0%;
}
#naar_webshop:hover {
    color: #004899;
}


/*intro 3x CTA: Eiland + webshop + Doeboek*/
#naar_eiland_3 {
	width: 110px;
	height: 100px;
    z-index: 99;
    border-radius: 30px 30px 30px 0px;
 	padding: 10px 10px 10px 10px;
    position: absolute;
    left: 50%;
    margin-left: -205px;
    bottom: 40px;
    font-size: 22px;
    line-height: 32px;
	letter-spacing: 1px;
	text-align: center;
	color: #FFFFFF;
	background-color: #95C11F;
	cursor: pointer;
	background-image: url(../images/knop_t_terug_w.png);
	background-repeat: no-repeat;
	background-position: 18px 0%;
	background-size: 75% auto;
}
#naar_eiland_3:hover {
    color: #009640;
}

#naar_webshop_3 {
	width: 110px;
	height: 100px;
    z-index: 99;
    border-radius: 30px 30px 30px 0px;
	padding: 10px 10px 10px 10px;
    position: absolute;
    left: 50%;
	margin-left: -65px;
    bottom: 40px;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFFFFF;
    background-color: #009FE3;
    cursor: pointer;
    background-image: url(../images/knop_shop_w.png);
    background-repeat: no-repeat;
 	background-position: 20px 0%;
	background-size: 70% auto;
}
#naar_webshop_3:hover {
    color: #004899;
}
#naar_doeboek_3 {
	width: 110px;
	height: 100px;
    z-index: 99;
    border-radius: 30px 30px 30px 0px;
	padding: 10px 10px 10px 10px;
    position: absolute;
    left: 50%;
 	margin-left: 75px;
    bottom: 40px;
    font-size: 22px;
    line-height: 32px;
	letter-spacing: 1px;
	text-align: center;
	color: #FFFFFF;
	background-color: #004899;
	cursor: pointer;
	background-image: url("../images/knop_kleur_intro_w.png");
	background-repeat: no-repeat;
	background-position: 14px 0;
	background-size: 80% auto;
}
#naar_doeboek_3:hover {
    color: #009FE3;
}


/* Het colofon */
#colofon {
    width: 100%;
    height: 30px;
    background-color: #FFFFFF;
    font-size: 11px;
    letter-spacing: 0px;
    padding-top: 10px; 
    color: #584744;
    z-index: 99;    
}

#colofon_box {
    width: 1240px;
    margin: 0px auto 0px auto;
    height: 30px;    
}

#colofon_right {
	width: 400px;
	float: right;
	text-align: right;
	margin-right: 30px;
}