@keyframes highlight {
	from {
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	to {
		-webkit-transform: rotate(5deg);
		-moz-transform: rotate(5deg);
		-ms-transform: rotate(5deg);
		transform: rotate(5deg);
	}
}
@-webkit-keyframes highlight {
	from {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	to {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}
}
@-moz-keyframes highlight {
	from {
		-moz-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	to {
		-moz-transform: rotate(5deg);
		transform: rotate(5deg);
	}
}

@keyframes highlight--scaled {
	from {
		-webkit-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
		-moz-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
		-ms-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
		transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
	}
	to {
		-webkit-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
		-moz-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
		-ms-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
		transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
	}
}
@-webkit-keyframes highlight--scaled {
	from {
		-webkit-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
		transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
	}
	to {
		-webkit-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
		transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
	}
}
@-moz-keyframes highlight--scaled {
	from {
		-moz-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
		transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
	}
	to {
		-moz-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
		transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
	}
}

/**
 * Books overview
 */
.book-overview {
	background-image: url(../../images/books-overview/overview-background.jpg);
	background-repeat: repeat;
	background-position: center;
}

.book-overview__book {
	display: block;
	position: absolute;
	left: 50%;
	top: 2000px;
}
.book-overview__book--1 {
	margin-left: -370px;
	top: 30px;
}
.book-overview__book--2 {
	margin-left: 65px;
	top: 35px;
}
.book-overview__book--3 {
	margin-left: -420px;
	top: 300px;
}
.book-overview__book--4 {
	margin-left: -140px;
	top: 200px;
}
.book-overview__book--5 {
	margin-left: 140px;
	top: 290px;
}
.book-overview__book--6 {
	margin-left: -130px;
	top: 430px;
}

.book-overview__book a {
	display: block;
}

.cssanimations .book-overview__book--highlight {
	-webkit-animation: 0.5s ease-in-out infinite alternate highlight--scaled;
	-moz-animation: 0.5s ease-in-out infinite alternate highlight--scaled;
	animation: 0.5s ease-in-out infinite alternate highlight--scaled;
}

/**
 * Lessons overview
 */
.lesson-overview {
	background-repeat: repeat;
	background-position: center;
}

.lesson-overview__status {
	left: 50%;
	margin-left: -123px;
	margin-top: -132px;
	position: absolute;
	top: 350px;
}

.cssanimations .lesson-overview__status--highlight {
	-webkit-animation: 0.5s ease-in-out infinite alternate highlight;
	-moz-animation: 0.5s ease-in-out infinite alternate highlight;
	animation: 0.5s ease-in-out infinite alternate highlight;
}

.lesson-overview--lichtblauw .lesson-overview__status {
	margin-left: -153px;
	margin-top: -152px;
}

.lesson-overview__lesson {
	display: block;
	position: absolute;
	left: 50%;
}

.lesson-overview__lesson a {
	display: block;
}

.cssanimations .lesson-overview__lesson--highlight {
	-webkit-animation: 0.5s ease-in-out infinite alternate highlight--scaled;
	-moz-animation: 0.5s ease-in-out infinite alternate highlight--scaled;
	animation: 0.5s ease-in-out infinite alternate highlight--scaled;
}

/**
 * Roze
 */
.lesson-overview--roze {
	background-image: url(../../images/lessons-overview/roze-background.jpg);
}
/* Lesson position slots */
.lesson-overview--roze .lesson-overview__lesson--1 {
	margin-left: -395px;
	top: 90px;
}
.lesson-overview--roze .lesson-overview__lesson--2 {
	margin-left: -185px;
	top: 90px;
}
.lesson-overview--roze .lesson-overview__lesson--3 {
	margin-left: 35px;
	top: 90px;
}
.lesson-overview--roze .lesson-overview__lesson--4 {
	margin-left: 240px;
	top: 90px;
}
.lesson-overview--roze .lesson-overview__lesson--5 {
	margin-left: -330px;
	top: 220px;
}
.lesson-overview--roze .lesson-overview__lesson--6 {
	margin-left: 180px;
	top: 220px;
}
.lesson-overview--roze .lesson-overview__lesson--7 {
	margin-left: -395px;
	top: 360px;
}
.lesson-overview--roze .lesson-overview__lesson--8 {
	margin-left: 240px;
	top: 360px;
}
.lesson-overview--roze .lesson-overview__lesson--9 {
	margin-left: -385px;
	top: 500px;
}
.lesson-overview--roze .lesson-overview__lesson--10 {
	margin-left: -182px;
	top: 500px;
}
.lesson-overview--roze .lesson-overview__lesson--11 {
	margin-left: 40px;
	top: 500px;
}
.lesson-overview--roze .lesson-overview__lesson--12 {
	margin-left: 240px;
	top: 500px;
}

/**
 * Rood
 */
.lesson-overview--rood {
	background-image: url(../../images/lessons-overview/rood-background.jpg);
	background-size: 420px 420px;
}
/* Lesson position slots */
.lesson-overview--rood .lesson-overview__lesson--1 {
	margin-left: -385px;
	top: 65px;
}
.lesson-overview--rood .lesson-overview__lesson--2 {
	margin-left: -90px;
	top: 60px;
}
.lesson-overview--rood .lesson-overview__lesson--3 {
	margin-left: 185px;
	top: 65px;
}
.lesson-overview--rood .lesson-overview__lesson--4 {
	margin-left: -375px;
	top: 225px;
}
.lesson-overview--rood .lesson-overview__lesson--5 {
	margin-left: 200px;
	top: 235px;
}
.lesson-overview--rood .lesson-overview__lesson--6 {
	margin-left: -395px;
	top: 375px;
}
.lesson-overview--rood .lesson-overview__lesson--7 {
	margin-left: 175px;
	top: 378px;
}
.lesson-overview--rood .lesson-overview__lesson--8 {
	margin-left: -210px;
	top: 485px;
}
.lesson-overview--rood .lesson-overview__lesson--9 {
	margin-left: 30px;
	top: 485px;
}

/**
 * Lichtblauw
 */
.lesson-overview--lichtblauw {
	background-image: url(../../images/lessons-overview/lichtblauw-background.jpg);
	background-size: 600px 600px;
}
/* Lesson position slots */
.lesson-overview--lichtblauw .lesson-overview__lesson--1 {
	margin-left: -365px;
	top: 80px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--2 {
	margin-left: -175px;
	top: 70px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--3 {
	margin-left: 25px;
	top: 65px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--4 {
	margin-left: 225px;
	top: 70px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--5 {
	margin-left: -365px;
	top: 215px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--6 {
	margin-left: 135px;
	top: 205px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--7 {
	margin-left: -350px;
	top: 335px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--8 {
	margin-left: 235px;
	top: 310px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--9 {
	margin-left: -395px;
	top: 495px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--10 {
	margin-left: -225px;
	top: 450px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--11 {
	margin-left: -65px;
	top: 515px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--12 {
	margin-left: 90px;
	top: 425px;
}
.lesson-overview--lichtblauw .lesson-overview__lesson--13 {
	margin-left: 250px;
	top: 480px;
}

/**
 * Geel
 */
.lesson-overview--geel {
	background-image: url(../../images/lessons-overview/geel-background.jpg);
	background-size: 600px 600px;
}
/* Lesson position slots */
.lesson-overview--geel .lesson-overview__lesson--1 {
	margin-left: -380px;
	top: 125px;
}
.lesson-overview--geel .lesson-overview__lesson--2 {
	margin-left: -110px;
	top: 20px;
}
.lesson-overview--geel .lesson-overview__lesson--3 {
	margin-left: 175px;
	top: 140px;
}
.lesson-overview--geel .lesson-overview__lesson--4 {
	margin-left: -390px;
	top: 385px;
}
.lesson-overview--geel .lesson-overview__lesson--5 {
	margin-left: 150px;
	top: 390px;
}

/**
 * Groen
 */
.lesson-overview--groen {
	background-image: url(../../images/lessons-overview/groen-background.jpg);
	background-size: 640px auto;
}
/* Lesson position slots */
.lesson-overview--groen .lesson-overview__lesson--1 {
	margin-left: -380px;
	top: 125px;
}
.lesson-overview--groen .lesson-overview__lesson--2 {
	margin-left: -110px;
	top: 20px;
}
.lesson-overview--groen .lesson-overview__lesson--3 {
	margin-left: 175px;
	top: 140px;
}
.lesson-overview--groen .lesson-overview__lesson--4 {
	margin-left: -390px;
	top: 385px;
}
.lesson-overview--groen .lesson-overview__lesson--5 {
	margin-left: 150px;
	top: 390px;
}

/**
 * Paars
 */
.lesson-overview--paars {
	background-image: url(../../images/lessons-overview/paars-background.jpg);
	background-size: 640px auto;
}
/* Lesson position slots */
.lesson-overview--paars .lesson-overview__lesson--1 {
	margin-left: -310px;
	top: 60px;
}
.lesson-overview--paars .lesson-overview__lesson--2 {
	margin-left: -70px;
	top: 70px;
}
.lesson-overview--paars .lesson-overview__lesson--3 {
	margin-left: 165px;
	top: 70px;
}
.lesson-overview--paars .lesson-overview__lesson--4 {
	margin-left: -375px;
	top: 205px;
}
.lesson-overview--paars .lesson-overview__lesson--5 {
	margin-left: 210px;
	top: 205px;
}
.lesson-overview--paars .lesson-overview__lesson--6 {
	margin-left: -380px;
	top: 345px;
}
.lesson-overview--paars .lesson-overview__lesson--7 {
	margin-left: 200px;
	top: 360px;
}
.lesson-overview--paars .lesson-overview__lesson--8 {
	margin-left: -380px;
	top: 500px;
}
.lesson-overview--paars .lesson-overview__lesson--9 {
	margin-left: -185px;
	top: 495px;
}
.lesson-overview--paars .lesson-overview__lesson--10 {
	margin-left: 15px;
	top: 495px;
}
.lesson-overview--paars .lesson-overview__lesson--11 {
	margin-left: 210px;
	top: 510px;
}

/**
 * Exercises overview
 */
.exercise-overview {
	background-repeat: repeat;
	background-position: center;
}

.exercise-overview--roze {
	background-image: url(../../images/lessons-overview/roze-background.jpg);
}
.exercise-overview--rood {
	background-image: url(../../images/lessons-overview/rood-background.jpg);
}
.exercise-overview--lichtblauw {
	background-image: url(../../images/lessons-overview/lichtblauw-background.jpg);
}
.exercise-overview--geel {
	background-image: url(../../images/lessons-overview/geel-background.jpg);
}
.exercise-overview--groen {
	background-image: url(../../images/lessons-overview/groen-background.jpg);
}
.exercise-overview--paars {
	background-image: url(../../images/lessons-overview/paars-background.jpg);
}

.exercise-overview__list {
	background-size: 100% 100%;
	height: 463px;
	left: 50%;
	margin-left: -360px;
	margin-top: -231px;
	position: absolute;
	padding: 120px 110px;
	top: 50%;
	width: 719px;
}

.exercise-overview--roze .exercise-overview__list {
	background-image: url(../../images/exercises-overview/roze.png);
}
.exercise-overview--rood .exercise-overview__list {
	background-image: url(../../images/exercises-overview/rood.png);
}
.exercise-overview--lichtblauw .exercise-overview__list {
	background-image: url(../../images/exercises-overview/lichtblauw.png);
}
.exercise-overview--geel .exercise-overview__list {
	background-image: url(../../images/exercises-overview/geel.png);
}
.exercise-overview--groen .exercise-overview__list {
	background-image: url(../../images/exercises-overview/groen.png);
}
.exercise-overview--paars .exercise-overview__list {
	background-image: url(../../images/exercises-overview/paars.png);
}

.no-backgroundsize .exercise-overview--roze .exercise-overview__list {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/exercises-overview/roze.png', sizingMethod='scale');
}
.no-backgroundsize .exercise-overview--rood .exercise-overview__list {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/exercises-overview/rood.png', sizingMethod='scale');
}
.no-backgroundsize .exercise-overview--lichtblauw .exercise-overview__list {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/exercises-overview/lichtblauw.png', sizingMethod='scale');
}
.no-backgroundsize .exercise-overview--geel .exercise-overview__list {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/exercises-overview/geel.png', sizingMethod='scale');
}
.no-backgroundsize .exercise-overview--groen .exercise-overview__list {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/exercises-overview/groen.png', sizingMethod='scale');
}
.no-backgroundsize .exercise-overview--paars .exercise-overview__list {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/exercises-overview/paars.png', sizingMethod='scale');
}

.exercise-overview__list__a,
.exercise-overview__list__b {
	float: left;
	width: 50%;
}
.exercise-overview__list__a {
	padding-right: 2.5%;
}
.exercise-overview__list__b {
	padding-left: 2.5%;
}

.exercise-overview__list__title {
	background-color: #e5e5e4;
	border: 1px solid #000;
	border-radius: 0.5em;
	font-weight: bold;
	display: inline-block;
	padding: 0.125em 0.5em;
	margin-bottom: 1em;
}

.exercise-overview__exercise {
	display: inline-block;
	line-height: 2;
	margin-left: 1.25%;
	position: relative;
}

.exercise-overview__exercise__number {
	bottom: 0;
	color: #e5e5e4;
	display: block;
	font-weight: bold;
	left: 0;
	line-height: 50px;
	position: absolute;
	right: 0;
	top: 0;
	text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5),
		0 1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5),
		-1px 0 0 rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.5),
		0 -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5);
}

.exercise-overview__exercise__progress {
	width: calc(100% - 9px);
	position: absolute;
	height: 8px;
	background: #f8f8f8cc;
	top: 35px;
	margin-left: 4px;
	border: solid 1px #888;
	border-radius: 4px;
}
.exercise-overview__exercise__progress .progress_bar {
	background: #a1d4f3;
	height: 100%;
	min-width: 7px;
	max-width: 100%;
	border-radius: 4px;
	color: transparent;
}
/**
 * Highlight classes for JS
 */
/*.no-csstransforms .item--highlight--from {*/
/*-ms-filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=auto expand, M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455);*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=auto expand, M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455);*/
/*}*/

/*.no-csstransforms .item--highlight--to {*/
/*-ms-filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=auto expand, M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=auto expand, M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);*/
/*}*/

.csstransforms .item--highlight--from {
	-webkit-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
	-moz-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
	-ms-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
	transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(-5deg);
}

.csstransforms .item--highlight--to {
	-webkit-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
	-moz-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
	-ms-transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
	transform: scale(0.5) translate3d(-50%, -50%, 0) rotate(5deg);
}