* {
	box-sizing: border-box;
}
html {
	height: 100%; 
	max-height: 100%; 
	padding: 0; 
	margin: 0; 
	border: 0; 
	overflow: hidden; 
	background: #e1e1e1;
    color: #000;
    font-family: "Open Sans", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 100%;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	max-height: 100%;
	overflow: auto;
	border: 0;
	background-image: url(../img/back_gr.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ol {
	padding-left: 1rem;
}

sup {
    vertical-align: text-top;
    position: relative;
    top: -3px;
}

.input {
	padding: 0.5rem;
    width: 20rem;
    margin: 0.25rem 0;
    border: 0.25rem solid #235023;
    border-radius: 1rem;
    font-family: "Open Sans", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 100%;
}

h1, h2, h3 {
	margin-top: 0;
}

h4 {
	margin: 0;
}

.name, .id {
	display: none;
}

.content {
	text-align: center;
	margin-top: -0.5rem;
    padding-right: 2rem;
}

.container {
	position: relative;
    left: 3rem;
    top: 1.5rem;
    padding: 3rem 2rem 1rem;
    max-width: 95%;
    background: #d5f9fd;
    min-height: 36.5rem;
    height: auto !important;
    overflow: hidden !important;
}

.header {
	position: relative;
    width: 100%;
    height: 8rem;
    background: #235023;
	border-bottom: 0.25rem solid #fff;
    box-shadow: #373737 0 0.1rem 0.5rem 0.1rem;
}

.logo {
	position: absolute;
	left: 4.5rem;
	z-index: 3;
}

.logo img {
	width: 11rem;
	height: auto;
}

.workingtitle {
	font-size: 130%;
    color: #fff;
    padding: 1rem;
    border: #fff solid 0.3rem;
    border-radius: 2rem;
    position: absolute;
    left: 16.5rem;
    top: 1rem;
}

.message {
	position: absolute;
    top: 2.45rem;
    left: 33rem;
    color: #fff;
    font-size: 130%;
}

.colors {
	float: right;
	margin-top: 1rem;
	margin-right: 1rem;
	position: relative;
}

.colors div {
	width: 1.5rem;
	height: 1.5rem;
	display: inline-block;
	margin-right: 0.5rem;
	border: 0.15rem solid #fff;
	cursor: pointer;
}

.popup {
    position: absolute;
    z-index: 999;
    width: 70%;
    padding: 1rem;
    background: #f0ffe1;
    font-size: 90%;
    right: 0.75rem;
    top: 0.75rem;
    border: 0.25rem solid #235023;
    border-radius: 1rem;
    box-shadow: #373737 0 0.1rem 0.5rem 0.1rem;
    color: #000;
	display: none;
}

.hide {
	display: none;
}

.startpage h4 {
	margin-top: 0;
	margin-bottom: 0.25em;
	text-align: left;
}

.startpage ul {
	border-top: 0.125rem solid #646464;
	margin-top: 0.5rem;
	padding-top: 1.5rem;
}

.startpage ul li {
	background: url(../img/note.png);
    background-size: cover;
    padding: 1.5rem 1rem;
    cursor: pointer;
    display: inline-block;
    width: 7.5rem;
    height: 7.5rem;
    margin-right: 1rem;
	font-size: 95%;
}

.startpage ul li.demo {
	background: url(../img/note1.png);
	background-size: cover;
}

.startpage ul li:hover {
	background-color: #9ccd74;
}

.startpage ul li p {
	padding: 0;
    margin: 0;
    word-break: break-word;
    height: 3em;
    width: 7em;
    display: table-cell;
}

.count {
	font-size: 1.5em;
	display: block;
}

.workspace, .tabel {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    text-align: left;
}

.column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
	z-index: 2;
}

.workspace ul {
	padding-right: 2rem;
}

.workspace ul li, .workspace .circle-single {
	padding: 0.15rem 0.5rem;
    cursor: pointer;
    border: 0.25rem solid transparent !important;
}

.workspace ul li:hover, .workspace .circle-single:hover {
    background: #9ece74;
    border: 0.25rem solid #9ccc73;
    border-radius: 1rem;
}

.workspace ul li.current, .workspace .circle-single.current {
	background: #729b3f;
    border: 0.25rem solid #235023;
    border-radius: 1rem;
    color: #fff;
}

.workspace .subjects ul li, .workspace .subjects .circle-single {
	display: inline-block;
}

.workspace .text {
	margin-bottom: 1rem;
}

#yellow {
	background: #ffeb3b;
	color: #000;
	border-radius: 1rem;
}

.workspace .phone {
	position: relative;
}

.workspace .newsitem {
	position: absolute;
    top: 7.5rem;
    left: 2rem;
    font-size: 85%;
    max-width: 11rem;
}

.workspace .newsitem img {
	width: 175px;
}

.workspace .query {
	margin-right: 1rem;
	width: 40%;
}

.workspace .query span {
	font-size: 120%;
	font-weight: bold;
}

.workspace .question {
	display: inline-block;
	margin-bottom: 2rem;
}

.workspace .question h3 {
	margin-top: 0;
}

.workspace .answers {
	display: inline-block;
	margin-left: 2rem;
}

.workspace .subjects {
	max-width: 30%;
}

.workspace .reply {
	margin-top: 1.5rem;
	margin-bottom: 2rem;
	position: relative;
}

.grass {
	border: 0.25rem solid #235023;
    width: 100%;
    height: 250px;
    background: url(../img/gras.jpg) no-repeat;
	background-color: #237d19;
	display: none;
}

.grass .lightgreen {
	background: rgba(0, 255, 8, 0.7);
}

.grass div {
	display: inline-block;
	border: 1px solid #235023;
}

.backyard {
    background: url(../img/gras.jpg) repeat;
    background-size: contain;
	background-color: #237d19;
    position: relative;
    margin-top: 2rem;
    margin-left: 3rem;
}

.backyard div {
    position: absolute;
}

.backyard .num-left {
    left: -3rem;
}

.backyard .num-top {
    top: -2rem;
}

.pond {
    background: url(../img/pond.png) no-repeat;
    background-size: cover;
    width:  115px;
    height: 115px;
}

.circle  {
	border-radius: 50%;
    display: inline-block;
    margin-bottom: 0.25rem;
    margin-right: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 0.15rem solid #235023;
    padding: 0.3rem;
    text-align: center;
    font-weight: 700;
    vertical-align: middle;
}

.circle-item, .circle-single {
	display: inline-block;
}

.cir-grey, .cir-yellow, .cir-red, .cir-green {
	color: #000;
}

.cir-grey {	
    background-image: -moz-radial-gradient(0.75rem 0.75rem 45deg, circle cover, #f0f0f0 0%, #9b9b9b 100%, black 95%);
    background-image: -webkit-radial-gradient(0.75rem 0.75rem, circle cover, #f0f0f0, #9b9b9b);
    background-image: radial-gradient(0.75rem 0.75rem 45deg, circle cover, #f0f0f0 0%, #9b9b9b 100%, black 95%);
}

.cir-yellow {	
    background-image: -moz-radial-gradient(0.75rem 0.75rem 45deg, circle cover, yellow 0%, orange 100%, red 95%);
    background-image: -webkit-radial-gradient(0.75rem 0.75rem, circle cover, yellow, orange);
    background-image: radial-gradient(0.75rem 0.75rem 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}

.cir-red {	
    background-image: -moz-radial-gradient(0.75rem 0.75rem 45deg, circle cover, #ffbebe 0%, #c80000 100%, brown 95%);
    background-image: -webkit-radial-gradient(0.75rem 0.75rem, circle cover, #ffbebe, #c80000);
    background-image: radial-gradient(0.75rem 0.75rem 45deg, circle cover, #ffbebe 0%, #c80000 100%, brown 95%);
}

.cir-green {	
    background-image: -moz-radial-gradient(0.75rem 0.75rem 45deg, circle cover, #6eff6e 0%, #235023 100%, black 95%);
    background-image: -webkit-radial-gradient(0.75rem 0.75rem, circle cover, #6eff6e, #235023);
    background-image: radial-gradient(0.75rem 0.75rem 45deg, circle cover, #6eff6e 0%, #235023 100%, black 95%);
}

.cir-blue {	
    background-image: -moz-radial-gradient(0.75rem 0.75rem 45deg, circle cover, #f0f0f5 0%, #142dbe 100%, black 95%);
    background-image: -webkit-radial-gradient(0.75rem 0.75rem, circle cover, #f0f0f5, #142dbe);
    background-image: radial-gradient(0.75rem 0.75rem 45deg, circle cover, #f0f0f5 0%, #142dbe 100%, black 95%);
	color: #fff;
}

.button {
	padding: 0.5rem 1rem;
    display: inline-block;
    background: #729b3f;
    border: 0.25rem solid #235023;
    border-radius: 1rem;
    color: #fff;
    cursor: pointer;
    text-align: center;
    font-weight: 700;
}

.button:hover {
	background: #beff6e;
	color: #000;
}

.button .oke {
    letter-spacing: 2;
}

#previous, #info, #help {
	position: absolute;
    top: 2.5rem;
    right: 0rem;
    padding: 0.325rem 0.5rem;
    height: 2.5rem;
    font-weight: normal;
    width: 7.5rem;
}

#previous {
    right: 3.5rem;
}

#info {
	right: 12rem;
}

#help {
    width: 2.5rem;
    border-radius: 50%;
    font-size: 150%;
    line-height: 1;
    right: 0rem;
}

.submit {
	margin-top: 1rem;
	font-family: "Open Sans", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 120%;
    font-weight: normal;
}

#logout, #closeinfo {
    position: absolute;
    font-weight: normal;
    font-size: 120%;
    z-index: 5;
}

#closeinfo {
	right: 1rem;
}

#logout {
    font-size: 100%;
}

.article {
	margin-right: 5rem;
    min-width: 270px;
}

.article img {
	height: 270px;
	width: auto;
}

.pie {
	width: 14rem;
    padding: 0.1rem 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 1rem;
}

ul.pie-answers, ul.four-answers {
	border-spacing: 1rem;
}

ul.pie-answers li div, ul.four-answers li div {
	display: inline-block;
    vertical-align: top;
}

ul.pie-answers li, ul.four-answers li {
	display: table-cell;
}

.cirkel {
	position: relative;
	margin-top: 2rem;
}

.fractionchart {
	position: absolute;
    top: 0;
}

.pier {
	border: 2px solid #729b3f;
}

.fractionchart .pier {
	border: 2px solid #3F51B5;
}

.reaction {
	float: left;
    margin-top: 3rem;
    padding-left: 1rem;
    font-size: 120%;
	max-width: 50%;
}

.timeman {
	display: inline-block;
    float: right;
	margin-top: 1rem;
}

.barholder {
	margin-top: 1rem;
    display: inline-block;
    width: 90%;
}

#progressBar {
    height: 3rem;
    background-color: #235023;
    border: 4px solid #235023;
    border-radius: 0.5rem;
}

#progressBar div {
    height: 100%;
    max-width: 100%;
    background-color: #5ffa5f;
}

.banner {
	background: url(../img/supporters.jpg) no-repeat;
    background-size: cover;
    width: 16.875rem;
    height: 18.75rem;
    margin-top: 2rem;
    position: relative;
}

.club1, .club2 {
	position: absolute;
	font-weight: bold;
	text-align: center;
	width: 5rem;
}

.club1 {
	top: 2.75rem;
    left: 1.4rem;
}

.club2 {
	top: 7.75rem;
    left: 10rem;
}

.digibord {
	background: url(../img/digibord.png) no-repeat;
    background-size: cover;
    width: 21.875rem;
    height: 15.625rem;
    margin-top: 2rem;
    position: relative;
}

.pic {
	margin-top: 2rem;
	text-align: center;
}

.image {
	margin-top: 3rem;
    text-align: center;
}

.som {
	position: absolute;
    top: 3rem;
    left: 4rem;
    font-size: 140%;
}

.table {
	max-width: 25rem;
    margin-top: 1rem;
    padding: 0.65rem;
    border: 0.5rem solid #729b3f;
    border-radius: 1rem;
    background: #fff;
    box-shadow: black 1px 2px 5px 0px;
}

.narrow {
	font-size: 90%;
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	padding: 0.1rem;
}

.row-line {
	margin-top:3rem;
	border-bottom:3px solid #4150b4;
}

.fraction-row {
	height:2rem;
	margin-top: 0.35rem;
}

.before-table {
	display: inline-block;
	vertical-align: text-bottom;
    text-align: center;
}

.col {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
}

.col-line {
	margin-bottom: -1.6rem;
	margin-left: -0.15rem;
}

.col1 {
	max-width: 25%;
    text-align: right;
    margin-right: 10%;
}

.col2 {
	max-width: 30%;
}

.col3 {
	min-width: 25%;
}

#crates {
    margin-top: 1rem;
}

#crates .col, #crates .col1 {
	max-width: 12%;
    height: 2rem;
    background: #ffeb3c;
    border: 1px solid #000;
    margin-top: 0;
	-moz-box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .4), inset -1px -1px 1px rgba(0, 0, 0, .4);
    -webkit-box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .4), inset -1px -1px 1px rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .4), inset -1px -1px 1px rgba(0, 0, 0, .4);
	cursor: pointer;
}

#crates .col:hover, #crates .col1:hover { 
    background: #ff9b00;
}

#crates .col1 {
	width: 8%;
    margin-right: 0;
}

#crates .row {
	padding: 0;
}

#crates .red {
	background: #f02323;
	max-width: 8%;
}

#crates .yellow {
	max-width: 8%;
}

.small {
	max-width: 10%;
    text-align: right;
}

.toprow {
	border-bottom: 0.15rem solid #729b3f;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
	font-weight: 600;
}

.card {
	width: 250px;
	height: 300px;
	background:url(../img/card.png) no-repeat;
	background-size: cover;
	position: relative;
	margin-top: 2rem;
	padding: 1rem 1.5rem;
}

.watch {
	width: 300px;
	height: 270px;
	background:url(../img/watch.png) no-repeat;
	background-size: cover;
	position: relative;
	margin-top: 2rem;
}

.big {
	font-size: 150%;
}

.bigger {
	font-size: 110%;
    text-align: center;
    margin-top: 0.5rem;
}

.larger {
	font-size: 200%;
    text-align: center;
    font-weight: bold;
	margin-top: 2rem;
}

.smaller {
	font-size: 90%;
}

.announce {
	text-align: center;
    margin-top: 2rem;
	font-weight: bold;
}

.kmteller {
	width: 300px;
    height: 280px;    
	background:url(../img/kmteller.png) no-repeat;
	background-size: cover;
	position: relative;
	margin-top: 2rem;
}

.kmteller div {
	position: absolute;
    font-size: 120%;
    color: #fff;
    top: 92px;
    left: 104px;
    letter-spacing: 4px;
    font-family: 'Orbitron', sans-serif;
}

.alarmclock {
	width: 320px;
	height: 275px;
	background:url(../img/alarmclock.png) no-repeat;
	background-size: cover;
	position: relative;
}

.alarmclock div {
	position: absolute;
    font-size: 280%;
    color: #87ff00;
    top: 100px;
    left: 63px;
    letter-spacing: 10px;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
}

.spoor {
	width: 320px;
	height: 260px;
	background:url(../img/spoor.jpg) no-repeat;
	background-size: cover;
	position: relative;
	margin-top: 2rem;
}

.spoor .city, .spoor .num, .spoor .time {
	position: absolute;
    font-size: 120%;
    color: #052d7d;
    top: 35px;
    left: 20px;
    letter-spacing: 1px;
	font-weight: bold;
}

.spoor .city {
	left: 86px;
}

.spoor .num {
	left: 292px;
    top: 31px;
	font-size: 150%;
}

#numberedline, #present {
	margin-top: 2rem;
    border: 0.5rem solid #729b3f;
    border-radius: 0.5rem;
    height: 10.5rem;
    padding: 0.5rem 1rem;
	position: relative;
	background: #f5faff;
	box-shadow: black 1px 2px 5px 0px;
}

#numberedline .holder, #present .holder {
	position: relative;
}

#numberedline .point {
	position: absolute;
    top: 4.25rem;
    width: 0.25rem;
    height: 0.75rem;
    background: red;
}

#numberedline .dots {
	position: relative;
	top: 3.35rem;
}

[class*="point-answer"], [class*="point-normal"] {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    padding-top: 0.5rem;
    border: 2px solid #4150b4;
    border-radius: 50%;
    background: #ffdc9b;
    text-align: center;
    font-size: 120%;
    font-weight: bold;
    margin-right: 8.05%;
    vertical-align: top;
    cursor: pointer;
	color: #fff;
    text-shadow: #000 1px 1px 2px;	
}

[class*="point-normal"] {
	cursor: default;
}

[class*="point-normal"][class*="-yellow"] {
	background: #FF3;
}

[class*="point-normal"][class*="-green"] {
	background: #6C3;
}

[class*="point-answer"][class*="-purple"] {
	background: #F6C;
}

[class*="point-answer"][class*="-red"] {
	background: #F30;
}

[class*="point-answer"][class*="-blue"] {
	background: #06C;
}

[class*="point-answer"][class*="-grey"] {
	background: #999;
}

#numberedline .actual-line {
    border-bottom: 0.25rem solid #4150b4;
    top: 4.5rem;
    height: 0.5rem;
    position: absolute;
    width: 100%;
}

#numberedline .number {
	position: absolute;
	font-size: 90%;
	top: 2.5rem;
}

#numberedline .thenumber {
	top: 1rem;
	font-weight: bold;
}

#numberedline .lower {
	top: 5.5rem;
    text-align: center;
    line-height: 85%;
    font-size: 70%;
}

#numberedline .lower .frac {
	font-size: 100%;
}

#numberedline .ruler-line {
    border-top: 0.25rem solid #795548;
    height: 2rem;
    left: 0;
    position: absolute;
    width: 100%;
    bottom: 2rem;
    background: #ffc107;
}

#numberedline .rulerpoint {
    position: absolute;
    bottom: 1.75rem;
    width: 0.25rem;
    height: 2rem;
    background: #795548;
}

#numberedline .rulernumber {
    bottom: 0.25rem;
    position: absolute;
}

#present .number {
	position: absolute;
    font-size: 200%;
    font-weight: bold;
    top: 2.75rem;
    padding: 0.1rem 0.2rem;
}

#present .chosen {
	background: rgba(255, 235, 0, 1);
    border: 0.1rem solid #000;
}

#present .scale {
	position: relative;
    top: 1rem;
    font-size: 110%;
}

#present .scale div {
	position: absolute;
	color: #9b28af;
}

#numberedline .thepoint {
	left: 50%;
    background: #FFC107;
    height: 2.5rem;
    top: 2.5rem;
}

.left {
	position: absolute;
    left: 1.5%;
}

.right {
	position: absolute;
    right: 5.5%;
}

.comma {
	width: 100px;
}

.line-under {
	position: absolute;
    border-top: 0.2rem solid #000;
    width: 60px;
    bottom: 0.715rem;
    right: 1rem;
}

.align-right {
	text-align: right;
	width: 30px;
	display: inline-block;
}

.align-left {
	text-align: left;
	width: 24px;
	display: inline-block;
}

#calc {
	position: relative;
    display: inline-block;
    padding-top: 1rem;
    text-align: right;
}

#calc .upper {
	font-size: 90%;
	font-weight: bold;
}

#calc .box {
	border-bottom: 0.25rem solid #000;
}

ul.four-answers #calc .box {
    width: 3.3rem;
    margin: 0 2rem 1rem;
}

ul.four-answers #calc .box-dec {
	margin: 0 1rem 1rem;
	width:auto;
	border: none;
}

#calc .min, #calc .plus, #calc .keer, #calc .pluslaag {
	position: absolute;
    top: 2.7rem;
    right: -1rem;
    font-weight: bold;
    font-size: 160%;
}

#calc .plus {
	top: 4.15rem;
    right: -0.5rem;
}

#calc .plus-dec {
	top: 3.15rem;
}

#calc .keer {
	top: 3.6rem;
    right: -1.5rem;
}

#calc .pluslaag {
	top: 8.25rem;
    right: -1.35rem;
}

#calc .space {
	width: 0.525rem;
}

.equals {
	display: inline-block;
    font-weight: bold;
    color: #729b3f;
}

.outcome {
	display: inline-block;
}

#present .rack {
	position: absolute;
    width: 1.5rem;
    height: 9rem;
    background: #ffeb3b;
    border: 0.1rem solid #000;
    top: 2.5rem;
    display: none;
}

.asksmiley {
	display: inline-block;
	vertical-align: middle;
}

.asksmiley img {
	width: 35px;
}

#fraction {
	display: inherit;
    position: relative;
    height: 3rem;
    text-align: center;
}

.one {
}
.above, .under {
	display: inline-block;
	padding: 0 0.25rem;
	position: absolute;
}

.above {
	border-bottom: 2px solid #000;
}

.under {
	top: 1.5rem;
}

#rekenmachine, .get-calculator {
	position: relative;
    display: inline;
    color: #1976D2;
    font-weight: bold;
	padding: 0.2rem 0.1rem;
	cursor: pointer;
}

#rekenmachine:hover, .get-calculator:hover {
	background: #FC3;
}

#pop {
	font-size: 90%;
    position: absolute;
    background: #d2faff;
    color: #000;
    padding: 0.75rem 1rem 1rem;
    z-index: 5;
    border-radius: 10px;
    border: 1px solid #000;
    box-shadow: 2px 2px 2px #795548;
    top: 1.25rem;
    font-weight: normal;
}

.ober {
	background: url(../img/ober.png) no-repeat;
	background-size: cover;
	position: relative;
	height: 300px;
	width: 300px;
}

.price {
	position: absolute;
    top: 133px;
    left: 65px;
    color: #3F51B5;
    font-weight: bold;
}

img.eurocent {
	display: inline;
    vertical-align: middle;
    width: 80px;
    height: 80px;
}

img.euro {
	width: 95px;
    margin: 1rem 0.5rem 1rem;
    display: inline;
    vertical-align: middle;
}

#valuta {
	font-size: 90%;
	background: #ffffe4;
	max-width: 100%;
}

#valuta .col1 {
	max-width: 20%;
}

#shop {
     margin-top: 1rem;
}

#shop div {
    display: inline-block;
    width: 20%;
}

#shop .img {
	position: relative;
}

#shop .img img {
	width: 160%;
}

#shop .img img.soda {
	width: 90%;
}

#shop .price {
	position: absolute;
    top: 5rem;
    left: 1rem;
    width: 90%;
    padding: 0.25rem 0.5rem;
    background: #fff27d;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 2px #000;
    color: #000;
	text-align: center;
}

#sims {
	background:url(../img/sims.png) no-repeat;
	background-size: cover;
	width: 320px;
	height: 300px;
	position: relative;
}

#sims div {
	position: absolute;
    top: 1rem;
    right: 0rem;
    width: 55%;
    font-size: 125%;
}

#tol {
	font-size: 130%;
    font-weight: bold;
	margin-top: 1rem;
}

#tol img {
	width: 70px;
}

#tol .no-margin {
	margin: 0;
}

.story {
	position: absolute;
    top: 1.75rem;
    left: 3.25rem;
    width: 70%;
    text-align: left;
}
.bike {
	background:url(../img/bikecomputer.png) no-repeat;
	background-size: cover;
	width: 320px;
	height: 300px;
	position: relative;
}

.bike1 {
	background:url(../img/bikecomputer1.png) no-repeat;
    background-size: cover;
}

.bike div {
	position: absolute;
    top: 9rem;
    font-size: 110%;
    font-weight: bold;
    letter-spacing: 0.5rem;
}

.bike div:nth-child(1) {
	left: 13rem;
}

.bike div:nth-child(2) {
	left: 3.15rem;
}

#snail {
	left: -7rem;;
    bottom: -0.55rem;
    position: absolute;
}

.jungle {
	position: absolute;
    background: url(../img/jungle.png) center bottom / cover no-repeat;
    width: 100%;
    height: 100%;
    top: 30%;
    left: 0;
}

#decorator {
	position: relative;
	margin-top: 0.5rem;
}

#decorator img {
	position: absolute;
	top: 0;
	left: 0;
	width: 320px;
	height: auto;
}

#shapes {
	position: relative;
}

#shapes div {
	position: absolute;
}

#shapes .bottom1, #shapes .bottom2 {
	bottom: 0;
}

#shapes .left1 {
	left: 1.5rem;
}

#shapes .shape, #shapes .square, #shapes .rectangleplus {
	bottom: 1.5rem;
	border: 2px solid #000;
}

#shapes .shape {
    left: 2.95rem;
	background: #4CAF50;
	z-index: 2;	
}

#shapes .L-shape {
	left: 3.05rem;
}

#shapes .square {
	background: #a5e15a;
    border-left: none;
	z-index: 2;
}

#shapes .red {
	color: #ff0000;
	font-weight: bold;
}

.red {
	color: #ff0000;
}

.green {
	color: green;
}

.up {
	padding-top: 4px;  
}

.big-up {
	margin-top: -12px;
}

.bigger-fraction .big-fraction .big-up {
    margin-top: -14px;
}

.fraction {
    display: inline-block;
    text-align: center;
    position: relative;
    margin: -6px 2px 18px 2px;
    vertical-align: middle;
    font-size: 90%;
}

.big-fraction {
	font-size: 70%;
	margin-left: 5px;
}

.under {
    border-top: 1px solid #000;
    display: block;
}

.big-under {
	border-top: 3px solid #000;
}

.chemglass {
	position: relative;
	height: 317px;
	width: 216px;
	margin-top: 1rem;
}

.chemglass .filling, .chemglass .fillings {
	position: absolute;
	z-index:2;
	background: #F44336;
    bottom: 20px;
	left: 22px;
	width: 155px;
}

.chemglass .fillings {
    z-index: 1;
}

.chemglass img {
	position: absolute;
	top: 0;
	left: 0;
	z-index:5;
}

.stripes {
	position: relative;
	z-index: 6;
	height: 280px;
    margin-top: 5px;
}

.stripe {
	position: absolute;
	height: 5px;
	width: 30px;
	background: #000;
	left: 23px;
}

.black {
	color: #000;
}

.bigger-fraction {
	text-align: center;
	font-size:220%;
	margin-top:2rem;
	font-weight:bold;
}

.bold {
	font-weight: bold;
}

.tree-effect {
    position: absolute;
    top: 10rem;
    left: 4rem;
    font-size: 130%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: #000000b0;
    text-shadow: #bf9587de 1px 2px 1px;
}

.tree {
	background: url(../img/tree.png) no-repeat;
    background-size: cover;
    height: 340px;
    width: 328px;
    position: relative;
}

.bacteria {
	margin-top: 1rem;
}

.bacteria div {
	display: inline-block;
}

.very-big-dot {
	font-size: 350%;
    color: #00BCD4;
    text-shadow: black 1px 1px 1px;
    line-height: 0;
    vertical-align: unset;
    top: -1rem;
    position: absolute;
}

.very-big-green-dot {
	font-size: 90%;
    padding: 0px 1rem;
    border: 2px solid #729b3f;
    border-radius: 50%;
    background: #fcefed;
}

.wooden-sign {
	background: url(../img/wooden-sign.png) no-repeat;
    background-size: cover;
    width: 300px;
    height: 300px;
    position: relative;
}

.wooden-sign .equals {
    position: absolute;
    top: 132px;
    left: 50px;
    font-size: 260%;
}

.farmer {
	margin-top: 1rem;
}

.farmer div {
	font-size: 90%;
}

.garden {
	display: inline-block;
    vertical-align: middle;
    margin-left: 0.75rem;
    margin-bottom: 0.5rem;
	background: url(../img/tuin.jpg) no-repeat;
    background-size: cover;
    border: 0.15rem dashed #235023;
}

.num-left {
	display: inline-block;
}

.grass .num-left, .grass .num-top {
    position: absolute;
}


.fishtank {
	position: relative;
	background: url(../img/fishtank.png) no-repeat;
	background-size: cover;
	height: 250px;
	width: 320px;
	margin-top: 1rem;
}

.fishtank div {
	position: absolute;
	font-size: 90%;
	left: 15px;
}

.fishtank .num-left1 {
	top: 92px;
}

.fishtank .num-left2 {
	top: 195px;
}

.fishtank .num-bottom {
	top: 180px;
	left: 200px;
}

.paintbucket {
	position: relative;
	background: url(../img/paintbucket.png) no-repeat;
	background-size: cover;
	height: 280px;
	width: 300px;
	margin-top: 1rem;
}

.paintbucket div {
	position: absolute;
	top: 145px;
    left: 35px;
    font-size: 200%;
}

.house {
	position: relative;
	background: url(../img/house.png) no-repeat;
	background-size: cover;
	height: 300px;
	width: 300px;
	margin-top: 1rem;
}

.house .num-left {
	position: absolute;
	top: 245px;
    left: 10px;
}

.house .num-bottom {
	position: absolute;
	top: 255px;
    left: 215px;
}

#three-blocks {
	margin-top: 1rem;
}

.three-blocks {
	display: inline-block;
	max-width: 120px;
    margin-right: 1rem;
}

.three-blocks div {
	height: 40px;
	width: 40px;
	border: 1px solid black;
	background: #969696;
	display: inline-block;
}

.three-blocks .filled {
	background: #8cf50f;
	border: none;
}

.three-blocks .caption {
	width: 120px;
    text-align: center;
    background: transparent;
    border: none;
}

.gridholder {
	border: 1px solid #000;
	background: #fffff5;
	padding: 20px;
	margin-top: 1rem;
}

.grid {
    width: 97.65%;
    min-height: 323px;
	padding: 20px 0 0 20px;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 19px, #CCC 19px, #CCC 20px),
        repeating-linear-gradient(-90deg, transparent, transparent 19px, #CCC 19px, #CCC 20px);
    background-size: 20px 20px;
}

.gridholder img {

}

.gridholder div {
    font-size: 90%;
    margin-right: 20px;
    margin-bottom: 21px;
    display: inline-block;
    text-align: center;
}

.forsale {
	position: relative;
	background: url(../img/forsale.png) no-repeat;
	background-size: cover;
	height: 300px;
	width: 300px;
	margin-top: 1rem;
}

.forsale div {
	position: absolute;
    top: 205px;
    left: 121px;
    font-size: 140%;
    font-weight: bold;
    letter-spacing: 1;
    transform: rotate(-1deg);
}
.barn {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 19px, #CCC 19px, #CCC 20px),
        repeating-linear-gradient(-90deg, transparent, transparent 19px, #CCC 19px, #CCC 20px);
    background-color: #ebe605;
    position:  absolute;
    border: 1px solid #b4b4b4;
}

.helpline {
    position: absolute;
    width: 3px;
    background: black;
}

.circle-radius {
	position: relative;
	background: url(../img/circle_radius.png) no-repeat;
	background-size: cover;
	height: 280px;
	width: 280px;
	margin-top: 1rem;
}

.circle-radius div {
	position: absolute;
    top: 100px;
    left: 140px;
    font-size: 130%;
    font-weight: bold;
}

.onpond{
    position: relative;
	background: url(../img/onpond.png) no-repeat;
	background-size: cover;
    z-index: 2;
}

.onpond div {
    position: absolute;
    font-size: 120%;
}

.fence-ad {
	position: relative;
	background: url(../img/fence_ad.png) no-repeat;
	background-size: cover;
	height: 300px;
	width: 280px;
	margin-top: 1rem;
}

.fence-ad div {
	position: absolute;
    top: 55px;
    left: 49px;
    font-size: 105%;
    font-weight: bold;
    text-align: center;
}

.cylinder{
    position:relative;
    top: 2.5rem;
}

.cylinder .cyl-middle{
    width:120px;
    height:180px;
    background: #52a1ff;
    background: linear-gradient(90deg, #f2f2ed 1%, #52a1ff 40%, #f2f2ed 100%);
    position:absolute;
    border: 1px solid #333;
    border-top: none;
} 

.cylinder .cyl-top{
    width: 120px;
    height: 50px;
    background: #52a1ff;
    background: linear-gradient(90deg, #f2f2ed 1%, #52a1ff 40%, #f2f2ed 100%);
    -moz-border-radius: 60px / 25px;
    -webkit-border-radius: 60px / 25px;
    border-radius: 60px / 25px;
    position:absolute;
    top:-25px;
    box-shadow:0px 0px 0px 1px #333333;
}

.cylinder .cyl-bottom{
    width: 120px;
    height: 50px;
    background: rgb(207,207,207);
    background: linear-gradient(90deg, rgba(207,207,207,1) 1%, rgba(242,242,242,1) 50%, rgba(207,207,207,1) 100%);
    -moz-border-radius: 60px / 25px;
    -webkit-border-radius: 60px / 25px;
    border-radius: 60px / 25px;
    position:absolute;
    top:155px;
    box-shadow:0px 0px 0px 1px #333333;
}

.tube {
    background: #94c4fe;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#94c4fe), color-stop(100%,#d3f6fe));
    background: -webkit-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%);
    background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
    background: -o-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%);
    background: -ms-linear-gradient(top, #94c4fe 31%,#d3f6fe 100%);
    background: linear-gradient(to bottom, #94c4fe 31%,#d3f6fe 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe',GradientType=0 );
    position: relative;
    border: 1px solid #333;
    margin-top: 1rem;
}

.desk {
    position: relative;
    margin-top: 3rem;
}

.desk .halfcircle1, .desk .halfcircle2 {
    border: 2px solid brown;
    background: url(../img/riet.jpg) repeat;
}

.chair {
    background: url(../img/chair.png) no-repeat;
    background-size: cover;
    width: 80px;
    height: 65px;
    position: absolute;
}

.plant {
    background: url(../img/plant.png) no-repeat;
    background-size: cover;
    width: 50px;
    height: 50px;
    position: absolute;
}

.pizzaslice {
    position: relative;
    height: 200px;
    width: 300px;
    margin-top: 2rem;
}

.pizzaslice div {
    font-size: 95%;
    position: absolute;
}

.pizzaslice .pizza {
    background: url(../img/pizzaslice.png) no-repeat;
    width: 280px;
    height: 150px;
    top: 25px;
    right: 0;
}

.pizzaslice .num-left {
    top: 30px;
    left: 30px;
}

.pizzaslice .num-top {
    right: 40px;
    top: 70px;
}

.pizzaslice .num-bottom {
    left: 110px;
    bottom: 30px;
}

.track-outer {
    position: relative;
    display: inline-block;
    margin-top: 2rem;
    height: 13rem;
}

.track-outer div {
    position: absolute;
    font-size: 90%;
    color: #ffffff;
}

.track-outer .line-above {
    width: 120px;
    height: 98px;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    top: 46px;
    left: 87px;
}

.track-outer .line-down {
    height: 1px;
    border-bottom: 1px solid #ffffff;
    width: 109px;
    top: 130px;
    left: 92px;    
}

.track-outer .num-right {
    left: 195px;
    top: 84px;
    padding: 1px 4px;
    background: #2eb035;
}

.track-outer .num-bottom {
    left: 130px;
    top: 120px;
    background: #2eb035;
    padding: 0 5px;
}

.track { 
    border: 10px solid #B27569;
    background: #ffffff;
}

/*  position changes by 11px every track, size changes by 22, border-rad by 10 */

.track1 {
  height: 190px;
  width: 300px;
  border-radius: 100px;
  left:0;
  top:0;
}

.track2 {
  height: 168px;
  width: 278px;
  border-radius: 90px;  
  left:11px;
  top:11px;
}

.track3 {
  height: 146px;
  width: 256px;
  border-radius: 80px;  
  left:22px;
  top:22px;
}

.track4 {
    height: 124px;
    width: 234px;
    border-radius: 70px;
    background: url(../img/gras.jpg) repeat;
    background-size: contain;
    left:33px;
    top:33px;
}

.frog-in-pond {
    background: url(../img/frogandduck.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 2rem;
    width: 400px;
    height: 240px;
}

.frog-in-pond div {
    position: absolute;    
}

.frog-in-pond .line {
    top: 110px;
    left: 190px;
    width: 1px;
    height: 100px;
    background: #000;
}

.frog-in-pond .num-center {
    font-size: 95%;
    top: 145px;
    left: 190px;
    color: #000;
}

.calc-holder {
    padding: 40px 10px 10px;
    position: absolute;
    z-index: 5;
    background: #00BCD4;
    border-radius: 10px;
    border: 1px solid #4150b4;
    box-shadow: 2px 2px 10px #000;
    display: none;
}

.calculator-off {
    position: absolute;
    top: 8px;
    right: 15px;
    font-family: sans-serif;
    font-size: 150%;
    cursor: pointer;
}

.calculator-off:hover {
    color: #FFFFFF
}
.brick-garden {
    background: url(../img/garden.jpg) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 1rem;
    width: 300px;
    height: 320px;
    
}

.brick-garden div {
    position: absolute;
    top: 85px;
    left: 123px;
    padding: 1px 2px;
    background: #F0F0F0;
}

.people {
    padding: 1rem;
    border: 0.5rem solid #f33e65;
    border-radius: 0.5rem;
    background: rgba(60, 55, 65, 1);
    margin-top: 1rem;
    box-shadow: black 1px 2px 5px 0px;
}

.people div {
    display: inline-block;
    background-size: cover;
}

.people .person {
    background: url(../img/person.png) no-repeat;
    width: 50px;
    height: 60px;
}

img.person-img {
    vertical-align: middle;
    background: #3c3741;
    padding: 0.25rem;
    border-radius: 0.5rem;
    border: 2px solid #f33e65;
    margin-right: 0.25rem;
}

.people .person-half {
    background: url(../img/person_half.png) no-repeat;
    width: 27px;
    height: 60px;
}

.symbols {
    padding: 1rem;
    border: 0.5rem solid rgb(130, 0, 75);
    border-radius: 0.5rem;
    background: #ffffdc;
    box-shadow: black 1px 2px 5px 0px;
    margin-top: 1rem;
}

.symbols div {
    display: inline-block;
    background-size: contain;
}

.symbols .symbol-line {
    display: block;
    margin-bottom: 1rem;
}

.symbols .auto {
    background: url(../img/symbol_auto.png) no-repeat;
    width: 60px;
    height: 48px;
}

.symbols .auto-half {
    background: url(../img/symbol_auto_half.png) no-repeat;
    width: 31px;
    height: 48px;
}

.symbols .bus {
    background: url(../img/symbol_bus.png) no-repeat;
    width: 60px;
    height: 64px;
}

.symbols .bus-half {
    background: url(../img/symbol_bus_half.png) no-repeat;
    width: 31px;
    height: 64px;
}

.symbols .voetganger {
    background: url(../img/symbol_voetganger.png) no-repeat;
    width: 43px;
    height: 64px;
}

.symbols .voetganger-half {
    background: url(../img/symbol_voetganger_half.png) no-repeat;
    width: 26px;
    height: 64px;
}

.symbols .fiets {
    background: url(../img/symbol_fiets.png) no-repeat;
    width: 60px;
    height: 43px;
}

.symbols .fiets-half {
    background: url(../img/symbol_fiets_half.png) no-repeat;
    width: 31px;
    height: 43px;
}


#chartContainer {
    height: 280px;
    width: 100%;
    margin-top: 0.5rem;
    border: #5f559b 0.5rem solid;
    border-radius: 0.5rem;
    box-shadow: black 1px 2px 5px 0px;
}
ul.four-answers li img {
    width: 90px;
}

.small-square {
    width: 20px;
    height: 20px;
    margin-bottom: 1px;
    display: inline-block;
    margin-right: 1rem;
    vertical-align: text-bottom;
    border: 1px solid black;
}

#charts-holder {
    margin-top: 1rem;
}

#charts-holder .chart-pie {
    float:  left;
    text-align: center;
    font-size: 90%;
}

.legend {
    font-size: 90%;
    display: inline-block;
    margin-right: 4.25rem;
    margin-top: 2.5rem;
    float: right;
}

.bar-chart {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.roadsign {
    background: url(../img/roadsign.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 1rem;
    width: 280px;
    height: 300px;
    
}

.roadsign div {
    position: absolute;
    font-size: 180%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: #ffffffb0;
    text-shadow: #000000 1px 2px 1px;
    letter-spacing: 1;
}

.roadsign .num-first {   
    top: 38px;
    left: 85px;
    transform: rotate(-2.65deg);
}

.roadsign .num-second {   
    top: 125px;
    left: 85px;
    transform: rotate(5deg);
}

.coloredlist {
    text-align: center;
    padding: 1rem 1rem 0rem;
    border: 0.5rem solid #795548;
    border-radius: 1rem;
    background: #fff;
    font-weight: bold;
    font-size: 115%;
    margin-top: 1rem;
    margin-right: 2rem;
    text-shadow: 0px 1px 0px #000;
    box-shadow: black 1px 2px 5px 0px;
}

.tag {
    font-size: 50%;
    font-weight: normal;
    float: left;
    margin-top: 2rem;
    padding: 0.2rem 0.4rem;
    background: #c0ebff;
    border: 1px solid #000;
    border-radius: 0.25rem;
    box-shadow: 1px 1px 2px #000;
}

.tag1 {
    background: #f5c3ff;
}

.eq-sign {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5rem;
}

.map {
    background: url(../img/map.jpg) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 1rem;
    width: 320px;
    height: 250px;    
}

.map div {
    position: absolute;
}

.scale-img {
    position: absolute;
    bottom: 4rem;
    left: 5%;
}

.scale-img img {
    position:  absolute;
    bottom: 1%;
}

.parent, .parent1 {
  display: flex;
  position:relative;
}

.parent1 {
    left: 5rem;
}

.gear, .gear1 {
    position: relative;
    width: 100px;
    height: 100px;
    margin: auto;
    background: #4650b4;
    border-radius: 50%;
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border: 1px solid black;
}

.gear1 {
    height: 120px;
    width: 120px;
    background: #F44333;
    animation-name: spin1;
}

.tooth {
    position: absolute;
    top: -12.5px;
    left: 40px;
    z-index: 1;
    width: 25px;
    height: 125px;
    background: #4650b4;
    border-radius: 50%;
}

.tooth1 {
    position: absolute;
    top: -15px;
    left: 55px;
    z-index: 10;
    width: 25px;
    height: 150px;
    background: #f44336;
    border-radius: 50%;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin1 {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.fuelsign {
	width: 170px;
    height: 185px;    
	background:url(../img/fuelsign.png) no-repeat;
	background-size: cover;
	position: relative;
	margin-top: 1rem;
}

.fuelsign div {
	position: absolute;
    font-size: 120%;
    color: #fff;
    letter-spacing: 5px;
    font-family: 'Orbitron', sans-serif;
    left: 80px;
}

.fuelsign .div1 {
    top: 104px;
}

.fuelsign .div2 {
    top: 148px;
}

.cartonbox, .object, .object1 {
    background: url(../img/box.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 2rem;
    width: 320px;
    height: 250px;    
}

.object {
    background: url(../img/object.png) no-repeat;
}

.object1 {
    background: url(../img/object1.png) no-repeat;
}

.cartonbox div, .object div, .object1 div {
    position: absolute;
    font-weight: bold;
}

.cartonbox .num-left, .object .num-left , .object1 .num-left {
    top: 95px;
    left: 38px;
}

.cartonbox .num-bottom, .object .num-bottom, .object1 .num-bottom {
    top: 187px;
    left: 110px;
}

.cartonbox .num-right, .object .num-right, .object1 .num-right  {
    top: 170px;
    left: 262px;
}

.bigscale {
    background: url(../img/bigscale.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 1rem;
    width: 300px;
    height: 280px;    
}

.bigscale div {
    position: absolute;
    font-weight: bold;
    font-size: 180%;
    color: #000;
    letter-spacing: 1px;
    font-family: 'Orbitron', sans-serif;
    left: 85px;
    top: 32px;
}

.wastebin {
    background: url(../img/wastebin.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 1rem;
    width: 270px;
    height: 300px;    
}

.wastebin div {
    position: absolute;
    font-weight: bold;
    font-size: 110%;
    color: #000;
}

.wastebin .numtop {
    left: 132px;
    top: 5px;
}

.wastebin .numleft {
    left: 32px;
    top: 159px;
}

.wrap-weight-scale {
    position: relative;
    height: 200px;
    width: 300px;
}

.wrap-weight-scale div {
    position: absolute;
}

.weight-scale {
    width: 320px;
    height: 200px;
    background: url('../img/weegschaal.png');
}

.weight-scale1 {
    width: 320px;
    height: 200px;
    background: url('../img/weegschaal1.png');
}

.weight-scale .needle, .weight-scale1 .needle {
    height: 2px;
    width: 126px;
    bottom: 40px;
    left: 33px;
    background: url(../img/needle.png);
    transform-origin: bottom right;
    transition: transform 1.5s linear;
    transform-style: preserve-3D;
    transform: rotate(-5deg);
}

.weight-scale .center, .weight-scale1 .center {
    width: 40px;
    height: 40px;
    left: 140px;
    bottom: 18px;
    background: black;
    border-radius: 50%;
}

.weight-scale .center-lifted, .weight-scale1 .center-lifted {
    width: 20px;
    height: 20px;
    left: 150px;
    bottom: 28px;
    background: black;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 2px #ffffa8;
    z-index: 2;
}

.weight-scale .max, .weight-scale1 .max {
    left: 118px;
    top: 70px;
    font-size: 110%;
}

.wine, .beer, .cocktail {
    background-size: cover;
    position: relative;
    margin-top: 2rem;
    width: 300px;
    height: 300px; 
    font-size: 110%;
}

.wine div, .beer div, .cocktail div {
    position: absolute;
}

.wine {
    background: url(../img/wine.png) no-repeat;
}

.wine div {
    top: 160px;
    left: 176px;
    font-size: 100%;
}

.beer {
    background: url(../img/beer.png) no-repeat;
}

.beer div {
    top: 200px;
    left: 80px;
}
.cocktail {
    background: url(../img/cocktail.png) no-repeat;
}

.cocktail div {
    top: 173px;
    left: 155px;
    color: white;
    font-size: 120%;
}

.gasmeter {
    background: url(../img/gasmeter.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 1rem;
    width: 250px;
    height: 183px;
}

.gasmeter div {
    position: absolute;
    font-size: 105%;
    color: #fff;
    font-family: 'Orbitron', 'monospace', sans-serif;
    left: 61px;
    top: 85px;
}

.gasmeter div:nth-child(2) {
    left: 81px;
}

.gasmeter div:nth-child(3) {
    left: 103px;
}

.gasmeter div:nth-child(4) {
    left: 125px;
}

.lampholder {
    width: 300px;
    height: 330px;
}

.blue-lamp, .blue-lamp-on {
    background: url(../img/blue-lamp.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 1rem;
    width: 300px;
    height: 330px;
}

.blue-lamp-on {
    background: url(../img/blue-lamp-on.png) no-repeat;
}

.blue-lamp div {
    background: red;
    position: absolute;
    height: 32px;
    width: 32px;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid black;
    top: 295px;
    left: 1px;
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out;
}

.blue-lamp div:hover {
    background: yellow;
}

.gasbill {
    background: url(../img/gasnota.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 1rem;
    width: 300px;
    height: 300px;
}

.gasbill div {
    position: absolute;
    font-size: 95%;
    top: 115px;
    left: 30px;
}

.bread-add {
    background: url(../img/bread-add.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 1rem;
    width: 300px;
    height: 250px;
}

.bread-add div {
    position: absolute;
    font-size: 105%;
    top: 45px;
    left: 45px;
}

.watermeter {
    background: url(../img/watermeter.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 0.5rem;
    width: 216px;
    height: 180px;
}

.watermeter div {
    position: absolute;
    font-size: 95%;
    color: #fff;
    font-family: 'PT Mono', monospace;
    left: 68px;
    top: 106px;
    letter-spacing: 2.7;
}

.bottles {
    background: url(../img/bottles.png) no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 1rem;
    width: 300px;
    height: 260px;
}

.bottles div {
    position: absolute;
    font-size: 130%;
    color: black;
    left: 85px;
    top: 70px;
    transform: rotate(48deg);
}

@media screen and (max-width: 1200px) {
	html {
		font-size: 98%;
	}
	.larger {
		margin-top: 2rem;
		font-size: 160%;
	}
	.tree-effect {
		font-size: 130%;
	}
	.som {
		top: 2rem;
	}
	#decorator img {
		width: 300px;
	}
	.bike div {
		top: 9.25rem;
	}
	.bike div:nth-child(2) {
		left: 3.15rem;
	}
	.bike div:nth-child(1) {
		left: 13.35rem;
	}
	.jungle {
		background-size: cover;
	}
	.reaction {
		font-size: 100%;
		padding-left: 0;
		margin-top: 1rem;
	}
	.timeman img {
		width: 90px;
	}
	#shop .img img {
		width: 200%;
	}
	#shop .img img.soda {
		width: 130%;
	}
	#shop .price {
		font-size: 75%;
	}
	#tol img {
		width: 60px;
	}
	#crates .red, #crates .yellow {
		max-width: 12%;
	}
	.bigger-fraction {
		font-size: 180%;
	}
	.big-up {
		margin-top: -6px;
	}
    .bigger-fraction .big-fraction .big-up {
        margin-top: -8px;
    }
	#numberedline .point, #numberedline .rulerpoint {
		width: 0.2rem;
	}
	[class*="point-answer"], [class*="point-normal"] {
		display: inline-block;
		width: 2rem;
		height: 2rem;
		padding-top: 0;
	}
	#numberedline .dots {
		top: 3.85rem;
	}
	.col-line {
		margin-bottom: -1.25rem;
	}
	.right {
		right: 5%;
	}
	.left {
		left: 1%;
	}
	#calc .plus-dec {
		top: 3.25rem;
	}
	.line-under {
		width: 55px;
	}
	.three-blocks {
		max-width: 84px;
        margin-right: 0.75rem;
	}
	.three-blocks div {
		height: 28px;
		width: 28px;
	}
	.three-blocks .caption {
		max-width: 84px;
	}
    .legend {
        margin-top: 1.5rem;
        float: left;
    }
    .bar-chart {
        float: none;
    }
}
@media screen and (max-width: 1000px) {
	html {
		font-size: 95%;
	}
	.som {
		top: 0;
	}
	#decorator img {
		width: 260px;
	}
	.bike {
		width: 300px;
		height: 280px;
	}
	.bike div {
		top: 8.9rem;
	}
	.bike div:nth-child(1) {
		left: 12.75rem;
	}
	.bike div:nth-child(2) {
		left: 3rem;
	}
	.pic img {
		width: 60%;
	}
	#snail img {
		width: 140px;
	}
	.jungle {
		background-size: contain;
	}
	.larger {
		font-size: 150%;
	}
	.tree-effect {
		font-size: 130%;
	}
	.bigger-fraction {
		font-size: 175%;
	}
	.big-up, .bigger-fraction .big-fraction .big-up {
		margin-top: -8px;
	}    
	.right {
		right: 6%;
	}
	#calc .plus-dec {
		top: 3rem;
	}
	.line-under {
		width: 55px;
	}
	.three-blocks {
		max-width: 72px;
        margin-right: 0.5rem;
	}
	.three-blocks div {
		height: 24px;
		width: 24px;
	}
	.three-blocks .caption {
		max-width: 72px;
	}
	#shapes .shape {
		left: 3.05rem;
	}
	#shapes .L-shape {
		left: 3.15rem;
	}
    ul.four-answers li img {
        width: 85px;
    }
@media screen and (max-width: 900px) {
	html {
		font-size: 92%;
	}
    .message {
        top: 5.65rem;
        left: 18rem;
        font-size: 120%;
    }
	#decorator img {
		width: 250px;
	}
	.digibord {
		width: 18.875rem;
		height: 12.625rem;
	}
	.som {
		top: 2rem;
		left: 4rem;
	}
	.bike {
		width: 235px;
		height: 195px;
	}
	.bike div:nth-child(1) {
		left: 10.25rem;
	}
	.bike div:nth-child(2) {
		left: 2.25rem;
	}
	.bike div {
		top: 7.05rem;
		font-size: 100%;
		letter-spacing: 0.4rem;
	}
	#snail img {
		width: 130px;
	}
	.larger {
		font-size: 160%;
		margin-top: 2rem;
	}
	.tree-effect {
		font-size: 140%;
	}
	img.eurocent {
	  width: 75px;
	  height: 75px;
	}
	img.euro {
	  width: 90px;
	}
	#sims div {
		font-size: 110%;
	}
	#tol img {
		width: 40px;
	}
	.bigger-fraction {
		font-size: 140%;
	}
	.big-up {
		margin-top: -4px;
	}
    .bigger-fraction .big-fraction .big-up {
        margin-top: -2px;
    }
	#numberedline .dots {
		top: 3.95rem;
	}
	[class*="point-answer"], [class*="point-normal"] {
		width: 1.75rem;
		height: 1.75rem;
		padding-top: 0.05rem;
		border: 1.5px solid #4150b4;
		font-size: 100%;
	}
	.col-line {
		margin-bottom: -1rem;
	}
	#calc .plus-dec {
		top: 3.15rem;
	}
	.three-blocks {
		max-width: 66px;
	}
	.three-blocks div {
		height: 22px;
		width: 22px;
	}
	.three-blocks .caption {
		max-width: 66px;
	}
	#shapes .shape {
		left: 3.15rem;
	}
    .frog-in-pond {
        width: 300px;
        height: 190px;
        background-size: contain;
    }
    .frog-in-pond .line {
        top: 83px;
        left: 140px;
        width: 1px;
        height: 74px;
    }
    .frog-in-pond .num-center {
        font-size: 90%;
        top: 110px;
        left: 139px;
    }
    ul.four-answers li img {
        width: 80px;
    }
}
@media screen and (max-width: 812px) {
    html {
     font-size: 90%;
    }
    .message {
    top: 5rem;
    left: 15.5rem;
    }
    .workingtitle {
    font-size: 120%;
    padding: 0.5rem 1rem;
    left: 14rem;
    }
    .container {
    left: 1rem;
    padding: 3rem 1rem 1rem;
    max-width: 99%;
    }
    .logo {
    left: 3rem;
    }
    .workspace ul {
    padding-right: 1rem;
    font-size: 95%;
    }
    .workspace .subjects ul li {
      margin-top: 0.175rem;
    }
    .workspace .question {
      font-size: 95%;
    }
    .workspace .answers {
    margin-left: 0;
    }
    .column {
    flex: 1
    }
    #sims {
    width: 250px;
    height: 240px;
    }
    #sims div {
      font-size: 105%;
    }
    #shop div {
    width: 21%;
    }
    .bike div {
    letter-spacing: 0.4rem;
    top: 7.35rem;
    }
    .bike div:nth-child(1) {
    left: 10.45rem;
    }
    .bike div:nth-child(2) {
      left: 2.35rem;
    }
    #decorator img {
      width: 220px;
      height: auto;
    }
    .resp-height {
      height: 220px;
    }
    .digibord {
      width: 17.875rem;
      height: 11.625rem;
    }
    .larger {
      margin-top: 2rem;
      font-size: 140%;
    }
    .som {
      top: 2rem;
      left: 3rem;
    }
    .story {
      left: 3rem;
    }
    .bigger {
      font-size: 120%;
    }
    .pic {
        text-align: left;
    }
    .pic img {
      width: 80%;
    }
    #snail img {
      width: 120px;
    }
    img.eurocent {
      width: 70px;
      height: 70px;
    }
    img.euro {
      width: 85px;
    }
    #shop .img img {
      width: 250%;
    }
    #shop .img img.soda {
      width: 150%;
    }
    .bigger-fraction {
      font-size: 130%;
    }
    .big-up {
      margin-top: -7px;
    }
    .big-under {
      border-top: 2px solid #000;
    }
    #calc .plus-dec {
        top: 3.05rem;
    }
    .line-under {
      width: 50px;
    }
    .tree {
      height: 240px;
      width: 268px;
    }
    .tree-effect {
      margin-top: 0;
      top: 10rem;
      left: 2.9rem;
      font-size: 120%;
    }
    .three-blocks {
      max-width: 60px;
    }
    .three-blocks div {
      height: 20px;
      width: 20px;
    }
    .three-blocks .caption {
      max-width: 60px;
    }
    #shapes .shape {
      left: 3.25rem;
    }
    #shapes .L-shape {
      left: 3.3rem;
    }
    .track-outer {
        margin-top: 1rem;
    }
}
@media screen and (max-width: 680px) {
    body {
      background-repeat-y: repeat;
    }
    .popup {
      width: 100%;
      top: 0;
      right: 0;
    }
    .logo {
    left: 0;
    }
    .logo img {
    width: 8rem;
    }
    .circle {
    width: 2rem;
    height: 2rem;
    padding: 0.15rem;
    }
    .workingtitle {
    font-size: 105%;
    left: 8rem;
    top: 0.25rem;
    border-radius: 0;
    padding: 0;
    border: none;
    }
    .message {
    top: 1.5rem;
    left: 8rem;
    font-size: 105%;
    }
    #previous, #info {
    top: 2.5rem;
    height: 2.5rem;
    right: 4rem;
    }
    #info {
    right: 13rem;
    }
    #logout {
    border: 0.15rem solid #235023;
    }
    .colors {
    margin-top: 1rem;
    }
    .container {
    left: 1rem;
    max-width: none;
    padding: 1rem 1.5rem 1rem;
    }
    .workspace ul {
    padding-right: 0;
    max-width: none;
    }
    .workspace .question {
    margin-bottom: 0;
    margin-top: 1rem;
    }
    .workspace .column {
    flex: unset;
    }
    .workspace .query {
    margin-top: 1rem;
    margin-right: 0;
    width: 100%;
    }
    .workspace .phone {
    text-align: unset;
    }
    h2 {
    margin-top: 1rem;
    font-size: 100%;
    }
    .grass {
    width: 100%;
    height: 200px;
    display: flex;
    }
    .barholder {
    margin-top: 1rem;
    width: 100%;
    }
    .reaction {
    margin-top: 1rem;
    font-size: 100%;
    }
    .timeman img {
    height: 150px;
    }
    .digibord {
    width: 320px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    }
    #numberedline, #present {
     height: 8rem;
     margin-top: 1rem;
    }
    .larger {
    margin-top: 2rem;
    }
    .bigger {
      font-size: 110%;
      margin-top: 2rem;
    }
    .som {
    top: 2rem;
    left: 4rem;
    }
    .resp-height {
    height: 230px;
    }
    .circle-item {
    min-width: 290px;
    }
    .circle {
      cursor: default;
    }
    #snail img {
      width: 110px;
    }
    .pic {
      margin-top: 0;
      text-align: center;
    }
    .pic img {
      width: 40%;
    }
    img.eurocent {
      width: 60px;
      height: 60px;
    }
    img.euro {
    width: 75px;
    }
    #shop {
      margin-top: 1rem;
    }
    #shop .img img {
      width: 110%;
    }
    #shop .img img.soda {
      width: 70%;
    }
    #crates .red, #crates .yellow {
      max-width: 6%;
    }
    .bigger-fraction {
      font-size: 200%;
      margin-top: 1.25rem;
    }
    .big-up {
      margin-top: -8px;
    }
    .bigger-fraction .big-fraction .big-up {
		margin-top: -12px;
	}
    .big-under {
      border-top: 3px solid #000;
    }
    [class*="point-answer"], [class*="point-normal"] {
      width: 1.5rem;
      height: 1.5rem;
      padding-top: 0;
    }
    .right {
      right: 5%
    }
    .col-line {
      margin-bottom: -0.9rem;
    }
    .row-line {
      border-bottom: 2px solid #4150b4;
    }
    ul.four-answers #calc .box-dec {
      width: 130px;
    }
    ul.four-answers li {
      display: block;
    }
    ul.four-answers.graphics li {
      display: table-cell;
    }
    .cirkel {
      margin: 0;
    }
}
@media screen and (max-width: 360px) {
    h3 {
        font-size: 99%;
    }
    .logo {
      left: 0;
    }
    .logo img {
      width: 8rem;
    }
    .workingtitle {
      font-size: 105%;
      left: 8rem;
      top: 0.1rem;
      border-radius: 0;
      padding: 0;
      border: none;
    }
    .message {
      top: 1.25rem;
      left: 8rem;
      font-size: 105%;
    }
    .colors {
      margin-top: 3rem;
      margin-right: 0.5rem;
    }
    #previous, #info, #help {
        position: absolute;
        top: 2rem;
        padding: 0.25rem;
        height: 2.2rem;
        width: 90px;
    }
    #previous {
        right: 3rem;
    }
    #help {
        width: 2.5rem;
    }
    #info {
        right: 10rem;
        z-index: 99;
    }
    .container {
      left: 1rem;
      max-width: none;
      padding: 1rem 1rem 1rem;
    }
    .workspace ul {
      padding-right: 0;
      max-width: none;
    }
    .workspace .question {
      margin-bottom: 0;
      margin-top: 1rem;
    }
    .workspace .column {
      flex: unset;
    }
    .workspace .query {
      margin-top: 1rem;
      margin-right: 0;
      width: 100%;
    }
    .workspace .phone {
      text-align: left;
    }
    .workspace .newsitem {
      left: 2.5rem;
      top: 8rem;
    }
    .pic img {
        width: 50%;
    }
    h2 {
      margin-top: 1rem;
      font-size: 100%;
    }
    .grass {
      width: 100%;
      height: 200px;
      display: flex;
    }
    .barholder {
      margin-top: 1rem;
      width: 100%;
    }
    .reaction {
      margin-top: 1rem;
      font-size: 100%;
    }
    .timeman img {
      height: 150px;
    }
    .digibord {
      width: 100%;
      margin-top: 1rem;
      background-size: contain;
    }
    .som {
      top: 1.5rem;
      left: 2.75rem;
      font-size: 115%;	
    }
    .larger {
      margin-top: 1.5rem;
      font-size: 140%;
    }
    #decorator img {
      width: 90%;
      height: auto;
    }
    .story {
      width: 50%;	  
    }
    .bike {
      width: 210px;
      height: 170px;
    }
    .bike div {
      letter-spacing: 0.3rem;
      top: 6.55rem;
      font-size: 90%;
    }
    .bike div:nth-child(1) {
      left: 9.5rem;
    }
    .bike div:nth-child(2) {
      left: 2.25rem;
    }
    #present .number {
      font-size: 170%;
    }
    img.eurocent {
      width: 50px;
      height: 50px;
    }
    img.euro {
    width: 65px;
    }
    #crates .red, #crates .yellow {
      max-width: 12%;
    }
    .big {
      font-size: 110%;
    }
    .bigger-fraction {
      font-size: 160%;
      margin-top: 1.5rem;
    }
    .big-up {
      margin-top: -6px;
    }
    .big-under {
      border-top: 2px solid #000;
    }
    #numberedline .dots {
      top: 4.15rem;
    }
    [class*="point-answer"], [class*="point-normal"] {
      width: 1.25rem;
      height: 1.25rem;
      padding-top: 0;
      font-size: 80%;  
    }
    .right {
      right: 3%
    }
    .col-line {
      margin-bottom: -0.8rem;
    }
    .row-line {
      border-bottom: 2px solid #4150b4;
      margin-top: 2rem;
    }
    .announce {
      margin-top: 1rem;
    }
    .watch {
      width: 270px;
    }
    .kmteller {
      width: 270px;
      height: 250px;
    }
    .kmteller div {
      top: 5.7rem;
      left: 6.35rem;
    }
    .alarmclock {
      width: 280px;
      height: 235px;
      margin-top: 0;
    }
    .alarmclock div {
      font-size: 250%;
      top: 6.5rem;
      left: 4.25rem;
      letter-spacing: 8px;
    }
    .spoor {
      width: 260px;
      height: 200px;
    }
    .spoor div {
      top: 2rem;
    }
    .ober {
      height: 280px;
      width: 280px;
    }
    .price {
      top: 8.75rem;
      left: 4rem;
    }
    .resp-height {
      height: 260px;
    }
    .tree-effect {
     font-size: 115%;
     left: 3rem;
    }
    .map, .map img {
        width: 280px;
        height: 227px;
    }
  }
}