.overzicht-van-de-nummers-verwijzingen {
	font-size: .9em;
	line-height: 1.45em;
	margin-left: -1.2em;
	padding-left: 0;
	text-indent: 0;
	margin-bottom: 0.3em;
}

.overzicht-van-de-nummers-scheiding {
	font-size: 0.45em;
	color: #666;
	margin-left: 0.3em;
	margin-right: 0.3em;
	line-height: 0.1em;
	position: relative;
	top: -0.4em;
}
 
	/* --------------------------------------------------------------------------- */

.kwart-spatie {
	margin-right: .04em;
}

	/* --------------------------------------------------------------------------- */

.erug-knop {
	float: left;
	width: 20px;
	height: 40px;
	background: url('img/pijltjenaarlinks.svg');
	background-size: contain;
	border: 0px  solid black;
	margin-top: .35em;
	margin-left: 1em;
}

.back-button {
	height: 3.5em;
	float: left;
	margin-left: 1em;
	margin-top: .35em;
}

	/* --------------------------------------------------------------------------- */

.betaalde-versie {
	padding-top: 60px;
	padding-left: 18px;
	padding-right: 18px;
}

	/* ----------------- TABEL VOOR AANSCHAF --------------------------- */

.tabel-voor-aanschaf {
	width: 70%;
	max-width: 300px;
	border: 0!important;
	margin-left: auto!important;
	margin-right: auto!important;
	margin-top: 20px;
}

.tabel-voor-aanschaf tr {
	border: 0;
}

.tabel-voor-aanschaf a {
	color: #d3677e;
}

	/* --------------------------- FONTS --------------------------------- */
@font-face {
	font-family: 'lato';
	src: url("fonts/Lato-Regular.ttf");
	font-weight: regular;
}
@font-face {
	font-family: 'lato';
	src: url("fonts/Lato-Italic.ttf");
	font-style: italic;
	font-weight: regular;
}
@font-face {
	font-family: 'lato';
	src: url("fonts/Lato-Medium.ttf");
	font-weight: 500;
}
@font-face {
	font-family: 'lato';
	src: url("fonts/Lato-Bold.ttf");
	font-weight: bold;
}
	
	/* --------------------------- BODY --------------------------------- */

*:focus {
	outline: 0;
}

	/* voorkom highlight als er op een link wordt geklikt */
*, a {
	-webkit-tap-highlight-color:  rgba(0, 0, 0, .0); 
}

::-webkit-scrollbar {
    display: none;
}

i, em {
		/* de cursief van Lato is een beetje strak */
	word-spacing: 0.05em;
	letter-spacing: 0.015em;
}

html {
	background: #fefcf9;
}

	/* breedte dat wordt gebruikt voor de app is 550px */
body {
	display: block;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-family: "lato";
	font-size: 14px;
	color: #000;
	line-height: 1.44;
	margin-left: auto;
	margin-right: auto;
		/* achtergrond is gebroken wit */
	background: #fefcf9;
	word-spacing: 0.05em;
	letter-spacing: 0.01em;
		/* font op juiste grootte zetten op iPad */
	-webkit-text-size-adjust: none;
	margin-bottom: 0px!important;
}

@media (min-width: 600px) {
	body {
		font-size: 15px;
		line-height: 1.5;
		word-spacing: 0.07em;
}	}

@media (min-width: 700px) {
	body {
		font-size: 19px;
}	}


a {
	color: #ba024c;
	text-decoration: none;
}

p {
	padding-left: 1.3em;
	padding-right: 1em;
	margin-bottom: 1.3em;
}

sup {
	font-size: 1em;
	vertical-align: baseline;
	white-space: nowrap;
}

	/* gebruikt voor smallcaps */
small {
	font-size: .86em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 500;
}

/* ------------------- ZOEKEN IN APP ------------------------------- */

#zoekterm {
	background: #e70050!important;
	border: 0;
	height: 2em;
	border-radius: 2em;
	width: 7.85em;
	font-family: "lato";
	font-size: 1em;
	color: white;
	margin-top: .7em;
	padding: 0.14em .28em .28em 1em;
}

::placeholder {
	color: #dbb;
	opacity: .8;
}

/* ------------------- HIGHLIGHTING ------------------------------- */

		/* nummers waarnaar wordt verwezen met 'target' worden gehighlight */
:target {
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
    position: relative;
}
		/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: #e70050; color: #ffffff; }
    90%   {background: #e70050; color: #ffffff; }    
    100% {background: white; color: #000; }
}
		/* Standard syntax */
@keyframes myfirst {
    0%   {background: #e70050; color: #ffffff; }
    90%   {background: #e70050; color: #ffffff; }    
    100% {background: white; color: #000; }
}

	/* in overzicht-van-lessen.html willen we geen highlighting */
h4:target {
    -webkit-animation: 5s; /* Chrome, Safari, Opera */
    animation: 5s;
}

/* ----------------------- MENU ----------------------------------- */

.menu {
	font-size: 1.15em;
	line-height: 2.2em;
	text-align: center;
	padding-top: 0.7em;
}

.menu a {
	padding: 0.14em 1em .35em 1em; 
	background: #e70050;
	background: #d3677e;
	ackground: #fefcf9;
	color: #444!important;
	color: #fff!important;	
	border-radius: 1em;
	border: 0.5px solid #666;
	border-bottom: 0.5px solid #777;
	border-bottom: 0.5px solid #777;
}

.menu-spacer {
	margin-bottom: -.66em;
}


/* ------------------------- HEADER ------------------------------- */

.header {
		/* header is roze */
	background: #d3677e;
		/* header is rood */
	background: #e70050;
	width: 100%;
	max-width: 100%;
	height: 4.2em;
	top: 0;
	position: fixed;
	z-index: 99;
	overflow: hidden;
}

.inhoud {
	position: relative;
	top: 4em;
	padding-bottom: 0.1em;
}

.logo {
	height: 3.5em;
	padding-left: 1em;
	margin-top: 0.35em;
}

.logo {
	float: left;
}

	/* functie om ankers zichtbaar te houden, ook al is de header sticky */
.verschuif-anker {
	display: inline-block;
	scroll-margin-top: 7em;
}

@media (max-width:  410px) { .header { height:  55px; } .inhoud { top: 55px; } .logo { height:  45px; } .back-button { height:  45px; } }
@media (max-width:  370px) { .header { height:  50px; } .inhoud { top: 50px; } .logo { height:  40px; } .back-button { height:  40px; } }
@media (max-width:  330px) { .header { height:  45px; } .inhoud { top: 45px; } .logo { height:  35px; } .back-button { height:  35px; } }
@media (max-width:  290px) { .header { height:  40px; } .inhoud { top: 40px; } .logo { height:  30px; } .back-button { height:  30px; } }

.logometondertitel {
	box-sizing: border-box;
	background: #e70050;
	display: block;
	margin-left: auto;
	margin-right: auto;	
	width: 100%;
	max-width: 550px;
	padding: 0.37em 0.37em;
}

.wrapper-voor-logo-engels-met-ondertitel {
	display: block;
	width: 100%;
	background: #e70050;	
}

@media (min-width:  500px) {
	.logometondertitel {
		padding: 1.4em 0.7em;
	}
}

/* ------------------- INDEX ------------------------------- */

/* NIET MEER GEBRUIKT? */
.roze-pagina {
	background: #d3677e;
	color: white;
	height: 100vh;
}

.roze-pagina a {
	color: white;
}

.roze-pagina .header {
	border-bottom: 1px solid #ccc;
}

/* -------------------------- KOPJES -------------------------------- */

h2, h4 {
	display: block;
	margin: 0;
	font-weight: normal;
	letter-spacing: 0.02em;
	line-height: 1.25;
}

h2 {
	font-size: 1.7em;
	margin-top: 0.5em;
	margin-bottom: .5em;
	line-height: 1.2;
		/* Tijs - afhankelijk van font-size */
	padding-left: .73em;
	padding-right: .65em;
}

h4 {
	font-size: 1.25em;
	margin-top: -.2em;
	line-height: 1.3;
		/* Tijs - afhankelijk van font-size */
	padding-left: .99em;
	padding-right: 0.9em;
}

/* --------------------------- LISTS = LIJSTEN --------------------------------- */

ul {
	margin-left: 1.3em!important;
	margin-top: 0.35em!important;
	margin-bottom: 0.1em!important;
}

ul li {
	list-style: none;
	padding-right: 1.0em;
}

ul > li {
	text-indent: -1.0em;
	padding-bottom: 0.1em;
}

ul > li:before {
	content: "\2014  ";
}

ul ol {
	margin-left: 0.0em;
	margin-top: 0.4em!important;
	margin-bottom: 0.4em!important;
	font-size: .9em;
	counter-reset: step-counter 2;
}

ul ol li {
	list-style: number;
	text-indent: -18px;
}

ul ol { 
	counter-reset: item;
	list-style-type: none;
}

ul ol li {
	display: block;
}

ul ol li:before { 
	content: counter(item);
	counter-increment: item;
	margin-right: 1em;
}

.lijst-zonder-streepjes {
	margin-top: 0.0em;
	line-height: 1.43;
}

.lijst-zonder-streepjes li {
	margin-left: 3.9em;
	text-indent: -4.6em;
}

.lijst-zonder-streepjes li:before {
	content: "";
}

.overzicht-van-de-nummers ul {
	margin-top: 1.05em!important;
	margin-bottom: -0.7em!important;
	padding-left: 3.5em;
}

.overzicht-van-de-nummers ul li {
	text-indent: -3.5em;
}

/* ------------------------------------- OVERZICHT ---------------------------------- */

.info {
	font-size: 1.07em;
}

.info h4 {
	margin-top: 0.5em;
}

.onderwerpen-in-de-blokken p {
	margin-bottom: -.85em;
	text-indent: -2.8em;
	padding-left: 4.0em;
}

.onderwerpen-in-de-blokken ul {
	margin-top: 1.05em!important;
	margin-bottom: -0.7em!important;
	padding-left: 1em;
	padding-right: 1.2em;
}

.onderwerpen-in-de-blokken ul li {
	line-height: 1.45;
	text-indent: -1.06em;
	padding: 0;	
}

.opmerkingen-over-ontwikkeling-voor-op-apps-en-website {
	display: none;
}

/* ------------------------------------- SPRONG ---------------------------------- */

.sprong {
	white-space: nowrap!important;
}

.sprong:before,
.sprong-zonder-sup:before {
	content: '';
	background: url(svg/pijltjedikker.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: .95em;
	height: 0.65em;
	display: inline-block;
	position: relative;
	top: 0.04em;
	margin-left: -0.07em;
	margin-right: 0.1em;
}

.sprong-zonder-sup {
	white-space: normal!important;
}


/* -------------------------- AFBEELDINGEN VAN AKKOORDEN --------------------- */

.akkoordtab {
	position: relative;
	font-size: 1.04em;
	color:#eee;
	padding-left: 1.3em;
	border-top: 0.14em solid transparent;
	margin-bottom: -2.0em;
	z-index: 9;
}

.akkoordimg,
.woordenlijstakkoordimg {
	width: 100%!important;
	max-width: 100%!important;
		/* correctie om het toetsenbord écht in het midden te zetten */
	padding-left: 0px;
	margin-top: -0.02em;
	margin-bottom: 1em;
	background: #222;
	overflow: hidden;
	z-index: 8;
}

	/* Img klein op homepage */
.akkoordimg img,
.woordenlijstakkoordimg img {
	width: 100%;
	margin-left: 50%;
	transform: translateX(-50%);
		/* correctie, omdat het toetsenbord net niet in het midden zit */
	max-width: 450px;
	min-width: 376px;
	z-index: 8;
}

.woordenlijstakkoordimg {
	margin-top: -0.5em;
	margin-bottom: 0.5em;
}

.woordenlijstspacer {
	height: 1em;
}

/* --------------------------------------- */

@media (max-width: 550px) {
	.verschuif-naar-links {
		border-right: 20px solid #222;
	}
	.verschuif-stukje-naar-links {
		border-right: 10px solid #222;
	}
	.verschuif-stukje-naar-rechts {
		border-left: 10px solid #222;
	}	
	.verschuif-naar-rechts {
		border-left: 20px solid #222;
	}	
	.verschuif-ver-naar-rechts {
		border-left: 50px solid #222;
	}	
}

/* ----------------------------------------- MP3-PLAYER -------------------------------- */

.mp3 {
	font-size: 14px;
	display: block;
	min-height: 1em;
	padding-top: 0.07em;
	padding-bottom: 0.6em;
	padding-left: 0px;
		/* achtergrond is rood */
	background: #222;
	opacity: 1!important;
	width: 4em;
	margin: 0.6em auto 0.6em auto;
	border-radius: 1em;
	text-align: center;
}

.sm2_link {
}


/* ----------------------------- AFBEELDINGEN VAN RITMES ------------------------ */

.ritmewrapper {
	width: 100%;
	background: #eeecea;
	margin-top: -.4em;
	margin-bottom: 1.3em;
}

.ritme {
	height: 12.5em!important;
	eight: 200px!important;
	width: auto!important;
}

.ritme_twee_maten {
	height: 24.5em!important;
	width: auto!important;
}

.ritme_drie_tellen {
	height: 11em!important;
	width: auto!important;
}

.ritme, .ritme_twee_maten, ritme_drie_tellen {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------- SCHEMA MET TABS ----------------------------- */

.schema, .schema-met-toonsoort {
	background: #eeecea;
	color: #111;
	max-width: 100%;
	line-height: 2.7em;
	font-style: italic;
	letter-spacing: 0.015em;
	word-spacing: 0.1em;
		/* één pixel naar rechts verschoven */
	padding: 1.9em 0px 0.9em 1.35em;
	margin: -.2em 0 1.3em 0;
	white-space: nowrap;
}

.schema-met-toonsoort {
	padding-top: 0;
}

.schema-zonder-tekst {
	font-size: 1.06em;
	color: #e70050;
	font-style: normal!important;
	word-spacing: 1em;
		/* Tijs - afhankelijk van font-size */
	margin-top: -1.1em;
	margin-bottom: 0.3em;
	line-height: 2.2;
}

.toonsoort {
	display: block;
	font-size: .92em;
	color: #e70050;
	font-style: normal;
	text-align: right;
	margin-right: 1.4em;
	margin-bottom: -2.7em;
}

	/* we gebruiken ins voor invoegen van een tab */
ins {
	font-size: 1em;
	position: relative;
}

	/* tt staat voor tab */
tt {
	font-size: 1.02em;
	font-family: "lato";
	font-style: normal;
	text-transform: none!important;
	color: #e70050; 
	position: absolute;
	text-align: center;
	width: 5.85em!important;
	top: -1.87em;
	left: -2.3em;
}

u tt {
	text-align: left;
	left: 1.05em!important;
}

/* ---------------------- VERWIJZING NAAR DE VOLGENDE LES ------------------------------------ */


/* -------------------------- EINDE VAN DE BLOKKEN ---------------------- */

.volgende-onderwerp a,
.einde-blok a {
	display: block;
	text-align: right;
	background: #e70050;
	color: white;
	border-radius: 25px;
	text-align: right;
	margin: 23px 18px 28px 18px;
	padding: 0.03em .9em 0.2em 1.1em;
}

.volgende-onderwerp ::after,
.einde-blok ::after {
	background-image: url(svg/pijltjewit.svg);
	background-size: 1.65em;
	background-repeat: no-repeat;
	background-position: right;
	display: inline-block!important;
	width: 1.6em;
	height: .95em;
	top: 0.16em;
	content: '';
	position: relative;
	margin-left: 0.6em;
}

/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ------------------------------------- WOORDENLIJST  ---------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

.woordenlijst, .woordenlijst2 {
		/* woord is nu een inline-block, dus moet er een border-left zijn */
	padding-left: 2.6em;
		/* woord is nu een inline-block, op één of andere manier gaat deze text-indent dubbel! */
	text-indent: -1.3em;
	padding-bottom: 0.8em;
	padding-right: 1.2em;
}

.woordenlijst2 {
	text-indent: 0px;
}

.woord {
	font-size: 1.02em;
	font-weight: 700;
	margin-right: 0.4em;
	letter-spacing: 0.01em;
	display: inline-block;
	scroll-margin-top: 7em;
		/* woord is nu een inline-block, en dan moet de text-indent niet dubbel worden toegepast */
	text-indent: 0;
}
	
.nummering1, .nummering2 {
	background-size: .98em;
	background-repeat: no-repeat;
	width: .98em!important;
	height: .98em!important;
	display: inline-block;
	position: relative;
	top: 0.14em;
	margin-right: 0.5em;
	margin-left: 0.3em;
}

.nummering1 {
		background-image: url(img/nummering1.svg);
}

.nummering2 {
		background-image: url(img/nummering2.svg);
}

.alfabet {
	display: block;
	background: #eeecea;
	font-size: 1.1em;
	font-weight: bold;
	margin-top: 4px;
	margin-bottom: 12px;
	padding-left: 3.9em;
}

.woordenlijst .sprong:before {
	width: 0em;
	margin: 0em;
	padding: 0em;
	white-space: normal!important;
}

	/* Woordenlijst mét afbeeldingen heeft een grotere inspringing */
.woordenlijst-met-afbeeldingen .woordenlijst {
	padding-left: 4.3em;
	text-indent: -3em;
		/* En meer ruimte tussen de items */
	padding-bottom: 1.2em;	
}
.woordenlijst-met-afbeeldingen .woordenlijst2 {
	padding-left: 4.3em;
	text-indent: 0;
	padding-bottom: 1.2em;
}
.woordenlijst-met-afbeeldingen .alfabet {
	padding-left: 1.3em;
}

/* ----------- SPECIALE TEKENS -------------------------*/

.min {
	font-size: .95em;
	position: relative;
	top: 0em;
	margin-left: 0.015em;
	margin-right: 0.02em;
}

.kruis {
	font-size: 1.08em;
	line-height: 0.07em;
	margin-left: -0.04em;
	margin-right: -0.04em;
	position: relative;
	top: 0.02em;
}

.slash {
	font-size: 1.25em;
	position: relative;
	top: 0.04em;
	margin-left: 0.00em;
	margin-right: 0.01em;
	line-height: 0.5em;
}

.min-in-akkoord {
	font-size: .95em;
	position: relative;
	top: -0.07em;
	margin-left: 0.0em;
	margin-right: -0.004em;
}

.halfverminderd, .mol, .majeurseptiem, .majeurseptiem-rood, .majeurseptiem-wit {
	background-repeat: no-repeat;
	display: inline-block;
	position: relative;
	margin-right: 0.07em;
	margin-left: 0.0em;
	background-size: contain;
}

.verminderd {
	font-size: .95em;
	position: relative;
	top: -0.33em;
}

.halfverminderd {
	background-image: url(img/halfverminderd.svg);
	width: 0.6em!important;
	height: 0.7em!important;
	top: -0.2em;
	margin-left: 0.02em;
}

.mol {
	background-image: url(img/mol.svg);
	width: 0.48em!important;
	height: 1.1em!important;
	top: 0.1em;
}

.majeurseptiem, .majeurseptiem-rood, .majeurseptiem-wit {
	background-image: url(img/majeurseptiem.svg);
	width: 0.62em!important;
	height: 1.1em!important;
	top: 0.15em;
	margin-left: 0.005em;
}

.majeurseptiem-rood {
	background-image: url(img/majeurseptiem-rood.svg);
	margin-left: 0.0em;
}

.majeurseptiem-wit {
	background-image: url(img/majeurseptiem-wit.svg);
	margin-left: 0.02em;
}

/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ------------------------------------------ VOETER  ---------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

.voeter {
	font-size: .89em;
	display: block;
	background: #eeecea;
	height: 1em;
	overflow: hidden;
	border-radius: 1em;
	width: 9.5em;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -0.3em;
	padding-top: 0.3em;
	padding-bottom: 0.75em;
	text-align: center;
}

.voeter .blok,
.voeter .les {
	display: inline-block;
	color: #e70050;
	opacity: 1;
	margin-left: 0.55em;
	margin-right: 0.55em;
	
}

.voeter .blok:before {
	content: "Blok "
}

.voeter .les:before {
	content: '                           Les ';
}

/* ------------- TABELLEN ------------------------------ */

table, th, tr, td {
	vertical-align: center;
	border-spacing: 0;
	text-align: center;
	line-height: 1.1;
}

table {
	border-top: 0.04em solid #444!important;
	border-bottom: 0.04em solid #444!important;
}

th {
	border-bottom: 0.04em solid #444;
	line-height: 1.2;
	font-style: italic;
	font-weight: normal;
	background: #eeeeee;
	padding-top: 0.15em;
	padding-bottom: 0.3em;	
}

td {
	padding-top: 0.15em;
	padding-bottom: 0.25em;	
}

/* --------------------------------------- */

hr {
	background: #d3677e;
	height: 1.04em;
}

.toonladder {
	font-size: 1em;
	color:#eee;
	padding-left:12px;
	position: relative;
		/* margin-top werkt niet */
	border-top: 2px solid transparent;
	margin-bottom: -29px;
}

	.toonladder {
		margin-bottom: -28px;
		padding-left: 14px!important;
}	

/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------- IPAD ----------------------------------- */
/* -------------------------------------------------------------------------------------------- */


@media (min-width: 700px) {
	p {
		padding-left: 2em;
		padding-right: 1.8em;
	}
	h2 {
		padding-left: 1.15em;
		margin-top: .8em;
	}
	h4 {
		padding-left: 1.57em;
	}
	.back-button {
		margin-left: 1.55em;
	}
	.lijst-zonder-streepjes li {
		margin-left: 6em;
	}
	.onderwerpen-in-de-blokken ul {
		padding-left: 2em;
	}
	.onderwerpen-in-de-blokken p {
		margin-bottom: -.85em;
		text-indent: -1.8em;
		padding-left: 4.0em;
	}
	.overzicht-van-de-nummers ul {
			/* linkermarge wordt 0.7em groter, dus 3.5 wordt 4.2 */
		padding-left: 4.2em;
	}
	.overzicht-van-de-nummers ul li {
		text-indent: -3.5em;
	}
	.overzicht-van-de-nummers ul li ol li {
		text-indent: -3.78em;
	}
	.woordenlijst {
			/* woord is nu een inline-block, dus moet er een border-left zijn */
		padding-left: 4.0em;
			/* text-indent blijft gelijk, want is onafhankelijk van de linkermarge */
		text-indent: -2.0em;
		padding-right: 1.5em;
	}	

	.woordenlijst2 {
		padding-left: 3.3em;
		padding-right: 2em;
	}
	.alfabet {
			/* padding-left was 3.9em, komt dus ook 0.7 bij */
		padding-left: 4.6em;
	}
	.akkoordtab {
		padding-left: 2em;
	}	
	.woordenlijst-met-afbeeldingen .woordenlijst {
		padding-left: 6.0em;
		text-indent: -4.0em;
		padding-right: 2em;
	}
	.woordenlijst-met-afbeeldingen .woordenlijst2 {
		padding-left: 6.0em;
		padding-right: 2em;
	}	
	.woordenlijst-met-afbeeldingen .alfabet {
		padding-left: 1.8em;
	}	
	.voeter {
		margin-top: 1.7em;
		margin-bottom: -.6em;
	}
	.schema, .schema-met-toonsoort {
		padding-left: 2.1em;
	}

}