/*---------------------*/
/*------standaard------*/
/*---------------------*/

html {
    height: 100%;
}

body {
    background-color: red;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

/*-------------------------------------------------*/
/*------schalen & centreren van het kunstwerk------*/
/*-------------------------------------------------*/

.schalen {
    bottom: 0;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    transform: scale(0.34, 0.34);
    transform-origin: top left;
}

.centreren {
    background-color: transparent;
    height: 30px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    transition: all 1s ease;
    width: 600px;
}

/*-----------------------*/
/*------colorpicker------*/
/*-----------------------*/

.fieldset1 {
    left: 1em;
    padding: 0;
    position: absolute;
    top: 1em;
}

#showdiv1 {
    display: none;
    left: 0.3em;
    position: absolute;
    top: 3em;
}

.achtergrond1 {
    background-color: white;
    margin: 0;
    opacity: 0.5;
    z-index: -10;
}

fieldset {
    border: none;
}

output {
    display: inline-block;
    min-width: 2.5em;
}

label,
output {
    border: 1px solid black;
    border-radius: 3px;
    color: #000;
    font-family: Roboto, sans-serif;
    font-size: 1.1em;
    padding: 2px 9px;
}

label[for=rood],
output[for=rood] {
    background-color: #f00;
}

label[for=groen],
output[for=groen] {
    background-color: #0f0;
}

label[for=blauw],
output[for=blauw] {
    background-color: #00f;
}

#hex {
    background-color: white;
    font-size: 1.37em;
    left: 10em;
    margin: 0;
    min-width: 4.5em;
    position: absolute;
    top: 2.35em;
    transform: rotate(90deg);
}

button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    outline: inherit;
    padding: 0;
}

/*--------------------*/
/*------metadata------*/
/*--------------------*/

#showdiv2 {
    display: none;
}

.tekst {
    bottom: 1em;
    color: black;
    font-family: sans-serif;
    font-size: 16px;
    left: 1em;
    margin: 0;
    position: absolute;
}

.fieldset2 {
    left: 21.7em;
    padding: 0;
    position: absolute;
    top: 1em;
}

/*--------------------*/
/*------checkboxes------*/
/*--------------------*/

.checkboxes {
    padding: 0 0 0 0.5em;
}

#showdiv3 {
    display: none;
    left: 1em;
    position: absolute;
    top: 3em;
}

.fieldset3 {
    left: 12.75em;
    padding: 0;
    position: absolute;
    top: 1em;
}

input {
    margin-right: 0.5em;
}

/*----------------------------*/
/*------toets-interactie------*/
/*----------------------------*/

.toets {
    box-shadow: 0.25em 0.5em 0.25em 0.15em rgba(0, 0, 0, .5), 1.25em 1.5em 0.5em rgba(0, 0, 0, .6);
    transform: scale(1.1) rotateX(380deg) rotateY(-15deg) rotateZ(5deg) skewX(-4deg);
    transition-duration: 0.5s;
}

/*---------------------------------------*/
/*------vormgeving van de bolletjes------*/
/*---------------------------------------*/

.style1 {
    border: 0.45em solid black;
    border-radius: 50%;
    height: 1.5em;
    opacity: 1;
    position: absolute;
    transition: 3s ease;
    width: 1.5em;
}

.style1:hover {
    background-color: white;
    border: 0.5em solid black;
    border-radius: 50%;
    height: 1.5em;
    opacity: 1;
    position: absolute;
    transform: scale(1.5);
    transform-origin: center;
    transition: 0.2s ease;
    width: 1.5em;
}

/*------------------------------------*/
/*------plaatsing van de woorden------*/
/*------------------------------------*/

.how {
    height: 11.5em;
    left: 10em;
    opacity: 1;
    position: absolute;
    top: 10em;
    transition: all 1s ease;
    width: 32em;
}

.to {
    background-color: transparent;
    height: 11.5em;
    left: 51.5em;
    opacity: 1;
    position: absolute;
    top: 10em;
    transition: all 1s ease;
    width: 19em;
}

.fix {
    background-color: transparent;
    height: 11.5em;
    left: 10em;
    opacity: 1;
    position: absolute;
    top: 27.75em;
    transition: all 1s ease;
    width: 29em;
}

.a {
    background-color: transparent;
    height: 11.5em;
    left: 48.25em;
    opacity: 1;
    position: absolute;
    top: 27.75em;
    transition: all 1s ease;
    width: 9em;
}

.broken {
    background-color: transparent;
    height: 11.5em;
    left: 10em;
    opacity: 1;
    position: absolute;
    top: 45.5em;
    transition: all 1s ease;
    width: 64.75em;
}

.heart {
    background-color: transparent;
    height: 11.5em;
    left: 10em;
    opacity: 1;
    position: absolute;
    top: 63em;
    transition: all 1s ease;
    width: 54em;
}

.and {
    background-color: transparent;
    height: 11.5em;
    left: 10em;
    opacity: 1;
    position: absolute;
    top: 81em;
    transition: all 1s ease;
    width: 32em;
}

.make {
    background-color: transparent;
    height: 11.5em;
    left: 51em;
    opacity: 1;
    position: absolute;
    top: 81em;
    transition: all 1s ease;
    width: 43em;
}

.atwee {
    background-color: transparent;
    height: 11.5em;
    left: 10em;
    opacity: 1;
    position: absolute;
    top: 98.5em;
    transition: all 1s ease;
    width: 9em;
}

.spare {
    background-color: transparent;
    height: 11.5em;
    left: 28.5em;
    opacity: 1;
    position: absolute;
    top: 98.5em;
    transition: all 1s ease;
    width: 54em;
}

.by {
    background-color: transparent;
    height: 11.5em;
    left: 10em;
    opacity: 1;
    position: absolute;
    top: 116.5em;
    transition: all 1s ease;
    width: 20em;
}

.tre {
    background-color: transparent;
    height: 11.5em;
    left: 10em;
    opacity: 1;
    position: absolute;
    top: 134em;
    transition: all 1s ease;
    width: 32em;
}

.seals {
    background-color: transparent;
    height: 11.5em;
    left: 10em;
    opacity: 1;
    position: absolute;
    top: 151.75em;
    transition: all 1s ease;
    width: 53.25em;
}

/*------------------------------------*/
/*------plaatsing van de letters------*/
/*------------------------------------*/

/*------het woord how------*/

.how-h {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 9em;
}

.how-o {
    height: 11.5em;
    left: 11.5em;
    position: absolute;
    top: 0;
    width: 9em;
}

.how-w {
    height: 11.5em;
    left: 23em;
    position: absolute;
    top: 0;
    width: 9em;
}

/*------het woord to------*/

.to-t {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 8.6em;
}

.to-o {
    height: 11.5em;
    left: 10.5em;
    position: absolute;
    top: 0;
    width: 9em;
}

/*------het woord fix------*/

.fix-f {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 9em;
}

.fix-i {
    height: 11.5em;
    left: 10.5em;
    position: absolute;
    top: 0;
    width: 6.85em;
}

.fix-x {
    height: 11.5em;
    left: 20em;
    position: absolute;
    top: 0;
    width: 8.9em;
}

/*------het woord broken------*/

.broken-b {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 8.7em;
}

.broken-r {
    height: 11.5em;
    left: 11em;
    position: absolute;
    top: 0;
    width: 8.7em;
}

.broken-o {
    height: 11.5em;
    left: 22em;
    position: absolute;
    top: 0;
    width: 9em;
}

.broken-k {
    height: 11.5em;
    left: 33.5em;
    position: absolute;
    top: 0;
    width: 8.5em;
}

.broken-e {
    height: 11.5em;
    left: 44.25em;
    position: absolute;
    top: 0;
    width: 9.2em;
}

.broken-n {
    height: 11.5em;
    left: 55.75em;
    position: absolute;
    top: 0;
    width: 8.9em;
}

/*------het woord heart------*/

.heart-h {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 9em;
}

.heart-e {
    height: 11.5em;
    left: 11em;
    position: absolute;
    top: 0;
    width: 9.2em;
}

.heart-a {
    height: 11.5em;
    left: 22.5em;
    position: absolute;
    top: 0;
    width: 9.2em;
}

.heart-r {
    height: 11.5em;
    left: 34.5em;
    position: absolute;
    top: 0;
    width: 8.7em;
}

.heart-t {
    height: 11.5em;
    left: 45em;
    position: absolute;
    top: 0;
    width: 8.6em;
}

/*------het woord and------*/

.and-a {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 9.2em;
}

.and-n {
    height: 11.5em;
    left: 11.5em;
    position: absolute;
    top: 0;
    width: 8.9em;
}

.and-d {
    height: 11.5em;
    left: 23em;
    position: absolute;
    top: 0;
    width: 8.65em;
}

/*------het woord make------*/

.make-m {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 9em;
}

.make-a {
    height: 11.5em;
    left: 11.5em;
    position: absolute;
    top: 0;
    width: 9.2em;
}

.make-k {
    height: 11.5em;
    left: 23em;
    position: absolute;
    top: 0;
    width: 8.5em;
}

.make-e {
    height: 11.5em;
    left: 33.5em;
    position: absolute;
    top: 0;
    width: 9.2em;
}

/*------het woord spare------*/

.spare-s {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 9em;
}

.spare-p {
    height: 11.5em;
    left: 11.25em;
    position: absolute;
    top: 0;
    width: 9.2em;
}

.spare-a {
    height: 11.5em;
    left: 22.5em;
    position: absolute;
    top: 0;
    width: 9.2em;
}

.spare-r {
    height: 11.5em;
    left: 34.5em;
    position: absolute;
    top: 0;
    width: 8.7em;
}

.spare-e {
    height: 11.5em;
    left: 45.5em;
    position: absolute;
    top: 0;
    width: 9.2em;
}

/*------het woord by------*/

.by-b {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 8.7em;
}

.by-y {
    height: 11.5em;
    left: 10.5em;
    position: absolute;
    top: 0;
    width: 9.4em;
}

/*------het woord tré------*/

.tre-t {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 8.6em;
}

.tre-r {
    height: 11.5em;
    left: 11em;
    position: absolute;
    top: 0;
    width: 8.7em;
}

.tre-z {
    height: 11.5em;
    left: 22.25em;
    position: absolute;
    top: 0;
    width: 9em;
}

/*------het woord seals------*/

.seals-s1 {
    height: 11.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 9.35em;
}

.seals-e {
    height: 11.5em;
    left: 11em;
    position: absolute;
    top: 0;
    width: 9.2em;
}

.seals-a {
    height: 11.5em;
    left: 22.5em;
    position: absolute;
    top: 0;
    width: 9.2em;
}

.seals-l {
    height: 11.5em;
    left: 34.5em;
    position: absolute;
    top: 0;
    width: 8em;
}

.seals-s2 {
    height: 11.5em;
    left: 44em;
    position: absolute;
    top: 0;
    width: 9.35em;
}

/*--------------------------------------*/
/*------plaatsing van de bolletjes------*/
/*--------------------------------------*/

/*------de letter h------*/

.h1 {
    left: 0;
    top: 0;
}

.h2 {
    left: 0;
    top: 2em;
}

.h3 {
    left: 0;
    top: 4.5em;
}

.h4 {
    left: 0;
    top: 6.75em;
}

.h5 {
    left: 0;
    top: 9em;
}

.h6 {
    left: 2em;
    top: 4.5em;
}

.h7 {
    left: 4.5em;
    top: 4.5em;
}

.h8 {
    left: 6.75em;
    top: 0;
}

.h9 {
    left: 6.75em;
    top: 2em;
}

.h10 {
    left: 6.75em;
    top: 4.5em;
}

.h11 {
    left: 6.75em;
    top: 6.75em;
}

.h12 {
    left: 6.75em;
    top: 9em;
}

/*------de letter o------*/

.o1 {
    left: 1em;
    top: 0;
}

.o2 {
    left: 0;
    top: 2em;
}

.o3 {
    left: 0;
    top: 4.5em;
}

.o4 {
    left: 0;
    top: 6.75em;
}

.o5 {
    left: 3.25em;
    top: 0;
}

.o6 {
    left: 5.5em;
    top: 0;
}

.o7 {
    left: 1em;
    top: 9em;
}

.o8 {
    left: 3.25em;
    top: 9em;
}

.o9 {
    left: 6.75em;
    top: 2em;
}

.o10 {
    left: 6.75em;
    top: 4.5em;
}

.o11 {
    left: 6.75em;
    top: 6.75em;
}

.o12 {
    left: 5.5em;
    top: 9em;
}

/*------de letter w------*/

.w1 {
    left: 0;
    top: 0;
}

.w2 {
    left: 0;
    top: 2em;
}

.w3 {
    left: 0;
    top: 4.5em;
}

.w4 {
    left: 0;
    top: 6.75em;
}

.w5 {
    left: 4.5em;
    top: 6.75em;
}

.w6 {
    left: 6.75em;
    top: 0;
}

.w7 {
    left: 1em;
    top: 9em;
}

.w8 {
    left: 2.25em;
    top: 6.75em;
}

.w9 {
    left: 6.75em;
    top: 2em;
}

.w10 {
    left: 6.75em;
    top: 4.5em;
}

.w11 {
    left: 6.75em;
    top: 6.75em;
}

.w12 {
    left: 5.5em;
    top: 9em;
}

.w13 {
    left: 3.5em;
    top: 4.5em;
}

/*------de letter t------*/

.t1 {
    left: 0;
    top: 0;
}

.t2 {
    left: 2em;
    top: 0;
}

.t3 {
    left: 4em;
    top: 0;
}

.t4 {
    left: 6.25em;
    top: 0;
}

.t5 {
    left: 3em;
    top: 2em;
}

.t6 {
    left: 3em;
    top: 4.5em;
}

.t7 {
    left: 3em;
    top: 6.75em;
}

.t8 {
    left: 3em;
    top: 9em;
}

/*------de letter f------*/

.f1 {
    left: 0;
    top: 0;
}

.f2 {
    left: 0;
    top: 2.25em;
}

.f3 {
    left: 0;
    top: 4.5em;
}

.f4 {
    left: 0;
    top: 6.75em;
}

.f5 {
    left: 0;
    top: 9em;
}

.f6 {
    left: 2.25em;
    top: 0;
}

.f7 {
    left: 4.5em;
    top: 0;
}

.f8 {
    left: 6.75em;
    top: 0;
}

.f9 {
    left: 2.25em;
    top: 4.5em;
}

.f10 {
    left: 4.5em;
    top: 4.5em;
}

/*------de letter i------*/

.i1 {
    left: 2.25em;
    top: 0;
}

.i2 {
    left: 2.25em;
    top: 2.25em;
}

.i3 {
    left: 2.25em;
    top: 4.5em;
}

.i4 {
    left: 2.25em;
    top: 6.75em;
}

.i5 {
    left: 2.25em;
    top: 9em;
}

.i6 {
    left: 0;
    top: 0;
}

.i7 {
    left: 4.5em;
    top: 0;
}

.i8 {
    left: 0;
    top: 9em;
}

.i9 {
    left: 4.5em;
    top: 9em;
}

/*------de letter x------*/

.x1 {
    left: 0;
    top: 0;
}

.x2 {
    left: 2em;
    top: 2.25em;
}

.x3 {
    left: 3.5em;
    top: 4.5em;
}

.x4 {
    left: 5em;
    top: 6.75em;
}

.x5 {
    left: 6.5em;
    top: 9em;
}

.x6 {
    left: 6.5em;
    top: 0;
}

.x7 {
    left: 0;
    top: 9em;
}

.x8 {
    left: 2em;
    top: 6.75em;
}

.x9 {
    left: 5em;
    top: 2.25em;
}

/*------de letter a------*/

.a1 {
    left: 2.25em;
    top: 0;
}

.a2 {
    left: 4.5em;
    top: 0;
}

.a3 {
    left: 1em;
    top: 2em;
}

.a4 {
    left: 6em;
    top: 2em;
}

.a5 {
    left: 0;
    top: 4.5em;
}

.a6 {
    left: 0;
    top: 6.75em;
}

.a7 {
    left: 0;
    top: 9em;
}

.a8 {
    left: 6.75em;
    top: 4.5em;
}

.a9 {
    left: 6.75em;
    top: 6.75em;
}

.a10 {
    left: 6.75em;
    top: 9em;
}

.a11 {
    left: 2.25em;
    top: 5.25em;
}

.a12 {
    left: 4.5em;
    top: 5.25em;
}

/*------de letter b------*/

.b1 {
    left: 0;
    top: 0;
}

.b2 {
    left: 0;
    top: 2em;
}

.b3 {
    left: 0;
    top: 4.5em;
}

.b4 {
    left: 0;
    top: 6.75em;
}

.b5 {
    left: 0;
    top: 9em;
}

.b6 {
    left: 2.25em;
    top: 0;
}

.b7 {
    left: 4.5em;
    top: 0;
}

.b8 {
    left: 2.25em;
    top: 9em;
}

.b9 {
    left: 4.5em;
    top: 9em;
}

.b10 {
    left: 2em;
    top: 4.5em;
}

.b11 {
    left: 4.5em;
    top: 4.5em;
}

.b12 {
    left: 6.25em;
    top: 2em;
}

.b13 {
    left: 6.25em;
    top: 6.75em;
}

/*------de letter r------*/

.r1 {
    left: 0;
    top: 0;
}

.r2 {
    left: 0;
    top: 2em;
}

.r3 {
    left: 0;
    top: 4.5em;
}

.r4 {
    left: 0;
    top: 6.75em;
}

.r5 {
    left: 0;
    top: 9em;
}

.r6 {
    left: 2.25em;
    top: 0;
}

.r7 {
    left: 4.5em;
    top: 0;
}

.r8 {
    left: 2em;
    top: 4.5em;
}

.r9 {
    left: 4.5em;
    top: 4.5em;
}

.r10 {
    left: 6.25em;
    top: 2.25em;
}

.r11 {
    left: 5.25em;
    top: 6.75em;
}

.r12 {
    left: 6.25em;
    top: 9em;
}

/*------de letter k------*/

.k1 {
    left: 0;
    top: 0;
}

.k2 {
    left: 0;
    top: 2em;
}

.k3 {
    left: 0;
    top: 4.5em;
}

.k4 {
    left: 0;
    top: 6.75em;
}

.k5 {
    left: 0;
    top: 9em;
}

.k6 {
    left: 2.25em;
    top: 4.5em;
}

.k7 {
    left: 4em;
    top: 2.25em;
}

.k8 {
    left: 6em;
    top: 0;
}

.k9 {
    left: 4em;
    top: 6.75em;
}

.k10 {
    left: 6em;
    top: 9em;
}

/*------de letter e------*/

.e1 {
    left: 0;
    top: 0;
}

.e2 {
    left: 0;
    top: 2.25em;
}

.e3 {
    left: 0;
    top: 4.5em;
}

.e4 {
    left: 0;
    top: 6.75em;
}

.e5 {
    left: 0;
    top: 9em;
}

.e6 {
    left: 2.25em;
    top: 0;
}

.e7 {
    left: 4.5em;
    top: 0;
}

.e8 {
    left: 6.75em;
    top: 0;
}

.e9 {
    left: 2.25em;
    top: 4.5em;
}

.e10 {
    left: 4.5em;
    top: 4.5em;
}

.e11 {
    left: 2.25em;
    top: 9em;
}

.e12 {
    left: 4.5em;
    top: 9em;
}

.e13 {
    left: 6.75em;
    top: 9em;
}

/*------de letter n------*/

.n1 {
    left: 0;
    top: 0;
}

.n2 {
    left: 0;
    top: 2.25em;
}

.n3 {
    left: 0;
    top: 4.5em;
}

.n4 {
    left: 0;
    top: 6.75em;
}

.n5 {
    left: 0;
    top: 9em;
}

.n6 {
    left: 6.5em;
    top: 0;
}

.n7 {
    left: 6.5em;
    top: 2em;
}

.n8 {
    left: 6.5em;
    top: 4.5em;
}

.n9 {
    left: 6.5em;
    top: 6.75em;
}

.n10 {
    left: 6.5em;
    top: 9em;
}

.n11 {
    left: 2em;
    top: 2.25em;
}

.n12 {
    left: 3em;
    top: 4.50em;
}

.n13 {
    left: 4em;
    top: 6.75em;
}

/*------de letter d------*/

.d1 {
    left: 0;
    top: 0;
}

.d2 {
    left: 0;
    top: 2em;
}

.d3 {
    left: 0;
    top: 4.5em;
}

.d4 {
    left: 0;
    top: 6.75em;
}

.d5 {
    left: 0;
    top: 9em;
}

.d6 {
    left: 2.25em;
    top: 0;
}

.d7 {
    left: 4.5em;
    top: 0;
}

.d8 {
    left: 2.25em;
    top: 9em;
}

.d9 {
    left: 4.5em;
    top: 9em;
}

.d10 {
    left: 6.25em;
    top: 7.25em;
}

.d11 {
    left: 6.25em;
    top: 4.5em;
}

.d12 {
    left: 6.25em;
    top: 2em;
}

/*------de letter m------*/

.m1 {
    left: 0;
    top: 0;
}

.m2 {
    left: 0;
    top: 2em;
}

.m3 {
    left: 0;
    top: 4.5em;
}

.m4 {
    left: 0;
    top: 6.75em;
}

.m5 {
    left: 0;
    top: 9em;
}

.m6 {
    left: 2em;
    top: 2.5em;
}

.m7 {
    left: 4.5em;
    top: 2.5em;
}

.m8 {
    left: 6.75em;
    top: 0;
}

.m9 {
    left: 6.75em;
    top: 2em;
}

.m10 {
    left: 6.75em;
    top: 4.5em;
}

.m11 {
    left: 6.75em;
    top: 6.75em;
}

.m12 {
    left: 6.75em;
    top: 9em;
}

.m13 {
    left: 3.5em;
    top: 4.5em;
}

/*------de letter s------*/

.s1 {
    left: 5.75em;
    top: 0;
}

.s2 {
    left: 3.75em;
    top: 0;
}

.s3 {
    left: 1.5em;
    top: 0;
}

.s4 {
    left: 0;
    top: 2.25em;
}

.s5 {
    left: 1.5em;
    top: 4.5em;
}

.s6 {
    left: 3.75em;
    top: 4.5em;
}

.s7 {
    left: 5.75em;
    top: 4.5em;
}

.s8 {
    left: 7em;
    top: 6.75em;
}

.s9 {
    left: 5.75em;
    top: 9em;
}

.s10 {
    left: 3.75em;
    top: 9em;
}

.s11 {
    left: 1.5em;
    top: 9em;
}

/*------de letter p------*/

.p1 {
    left: 0;
    top: 0;
}

.p2 {
    left: 0;
    top: 2em;
}

.p3 {
    left: 0;
    top: 4.5em;
}

.p4 {
    left: 0;
    top: 6.75em;
}

.p5 {
    left: 0;
    top: 9em;
}

.p6 {
    left: 2.25em;
    top: 0;
}

.p7 {
    left: 4.5em;
    top: 0;
}

.p8 {
    left: 2em;
    top: 5.5em;
}

.p9 {
    left: 4.5em;
    top: 5.5em;
}

.p10 {
    left: 6.75em;
    top: 1.5em;
}

.p11 {
    left: 6.75em;
    top: 4em;
}

/*------de letter y------*/

.y1 {
    left: 0;
    top: 0;
}

.y2 {
    left: 0;
    top: 2.25em;
}

.y3 {
    left: 1.75em;
    top: 4.5em;
}

.y4 {
    left: 3.75em;
    top: 6.75em;
}

.y5 {
    left: 3.75em;
    top: 9em;
}

.y6 {
    left: 5.5em;
    top: 4.5em;
}

.y7 {
    left: 7em;
    top: 2.25em;
}

.y8 {
    left: 7em;
    top: 0;
}

/*------de letter é------*/

.z1 {
    left: 6.75em;
    top: 9em;
}

.z2 {
    left: 0;
    top: 2.25em;
}

.z3 {
    left: 0;
    top: 4.5em;
}

.z4 {
    left: 0;
    top: 6.75em;
}

.z5 {
    left: 0;
    top: 9em;
}

.z6 {
    left: 2.25em;
    top: 2.25em;
}

.z7 {
    left: 4.5em;
    top: 2.25em;
}

.z8 {
    left: 6.75em;
    top: 2.25em;
}

.z9 {
    left: 2.25em;
    top: 5.5em;
}

.z10 {
    left: 4.5em;
    top: 5.5em;
}

.z11 {
    left: 2.25em;
    top: 9em;
}

.z12 {
    left: 4.5em;
    top: 9em;
}

.z13 {
    left: 2.25em;
    top: -1em;
}

.z14 {
    left: 4.5em;
    top: -2.25em;
}

/*------de letter l------*/

.l1 {
    left: 0;
    top: 0;
}

.l2 {
    left: 0;
    top: 2em;
}

.l3 {
    left: 0;
    top: 4.5em;
}

.l4 {
    left: 0;
    top: 6.75em;
}

.l5 {
    left: 1em;
    top: 9em;
}

.l6 {
    left: 3.25em;
    top: 9em;
}

.l7 {
    left: 5.5em;
    top: 9em;
}

/*------------------*/
/*------hartje------*/
/*------------------*/

.hartje {
    background-color: transparent;
    height: 58.5em;
    left: 45.5em;
    opacity: 1;
    position: absolute;
    top: 104em;
    transition: all 1s ease;
    width: 59.5em;
}

/*------------------------------------*/
/*------verplaatsen van steentje------*/
/*------------------------------------*/

#steentje1verplaatsen-drag {
    cursor: grab;
}

#steentje1verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje2verplaatsen-drag {
    cursor: grab;
}

#steentje2verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje3verplaatsen-drag {
    cursor: grab;
}

#steentje3verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje4verplaatsen-drag {
    cursor: grab;
}

#steentje4verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje5verplaatsen-drag {
    cursor: grab;
}

#steentje5verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje6verplaatsen-drag {
    cursor: grab;
}

#steentje6verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje7verplaatsen-drag {
    cursor: grab;
}

#steentje7verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje8verplaatsen-drag {
    cursor: grab;
}

#steentje8verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje9verplaatsen-drag {
    cursor: grab;
}

#steentje9verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje10verplaatsen-drag {
    cursor: grab;
}

#steentje10verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje11verplaatsen-drag {
    cursor: grab;
}

#steentje11verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje12verplaatsen-drag {
    cursor: grab;
}

#steentje12verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje13verplaatsen-drag {
    cursor: grab;
}

#steentje13verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje14verplaatsen-drag {
    cursor: grab;
}

#steentje14verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje15verplaatsen-drag {
    cursor: grab;
}

#steentje15verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje16verplaatsen-drag {
    cursor: grab;
}

#steentje16verplaatsen-drag:active {
    cursor: grabbing;
}

#steentje17verplaatsen-drag {
    cursor: grab;
}

#steentje17verplaatsen-drag:active {
    cursor: grabbing;
}

/*----------------------*/
/*------steentje 1------*/
/*----------------------*/

.steentje-een {
    background-color: transparent;
    clip-path: polygon(49% 99%, 0 71%, 0 58%, 25% 15%, 37% 8%, 41% 5%, 47% 1%, 55% 1%, 61% 4%, 63% 11%, 69% 15%, 76% 14%, 84% 18%, 85% 25%, 98% 33%, 99% 71%);
    height: 23.5em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 16.5em;
    width: 24.5em;
    z-index: 17;

}

.een-onderdeel1 {
    background-color: black;
    clip-path: polygon(0 35%, 0 20%, 100% 78%, 100% 93%);
    height: 12em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 12em;
    width: 12em;
}

.een-onderdeel2 {
    background-color: white;
    clip-path: polygon(0 31%, 0 26%, 100% 80%, 100% 85%);
    height: 12em;
    left: 0.5em;
    opacity: 1;
    position: absolute;
    top: 12.1em;
    width: 11em;
}

.een-onderdeel3 {
    background-color: black;
    clip-path: polygon(45% 21%, 98% 4%, 100% 58%, 0 98%, 0 87%);
    height: 16.5em;
    left: 11.75em;
    opacity: 1;
    position: absolute;
    top: 7em;
    width: 12em;
}

.een-onderdeel4 {
    background-color: white;
    clip-path: polygon(57% 24%, 94% 7%, 95% 57%, 5% 94%, 5% 89%);
    height: 16.5em;
    left: 11.75em;
    opacity: 1;
    position: absolute;
    top: 7em;
    width: 12em;
}

.een-onderdeel5 {
    background-color: black;
    clip-path: polygon(36% 0, 100% 40%, 67% 100%, 0 61%);
    height: 18em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 3.5em;
    width: 18.25em;
}

.een-onderdeel6 {
    background-color: white;
    clip-path: polygon(37% 5%, 98% 42%, 66% 98%, 4% 62%);
    height: 18em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 3.5em;
    width: 18em;
}

.een-onderdeel7 {
    background-color: black;
    clip-path: polygon(30% 0, 97% 40%, 67% 57%, 0% 16%);
    height: 17.5em;
    left: 6.5em;
    opacity: 1;
    position: absolute;
    top: 0.75em;
    width: 17.5em;
}

.een-onderdeel8 {
    background-color: white;
    clip-path: polygon(32% 1%, 91% 38%, 66% 54%, 4% 16%);
    height: 17.5em;
    left: 6.5em;
    opacity: 1;
    position: absolute;
    top: 1em;
    width: 17.5em;
}

.een-onderdeel9 {
    background-color: black;
    clip-path: ellipse(40% 24% at 41% 75%);
    height: 5.75em;
    left: 10.20em;
    opacity: 1;
    position: absolute;
    top: 0.5em;
    width: 5.75em;
}

.een-onderdeel10 {
    background-color: black;
    clip-path: polygon(0 25%, 80% 25%, 80% 85%, 0 85%);
    height: 5.75em;
    left: 10.25em;
    opacity: 1;
    position: absolute;
    top: 0.25em;
    width: 5.75em;
}

.een-onderdeel11 {
    background-color: black;
    clip-path: ellipse(40% 24% at 41% 25%);
    height: 5.75em;
    left: 10.25em;
    opacity: 1;
    position: absolute;
    top: 0.25em;
    width: 5.75em;
}

.een-onderdeel12 {
    background-color: white;
    clip-path: ellipse(30% 15% at 40% 75%);
    height: 5.75em;
    left: 10.15em;
    opacity: 1;
    position: absolute;
    top: 0.5em;
    width: 5.9em;
}

.een-onderdeel13 {
    background-color: white;
    clip-path: polygon(8% 25%, 72% 25%, 70% 80%, 8% 80%);
    height: 5.75em;
    left: 10.25em;
    opacity: 1;
    position: absolute;
    top: 0.25em;
    width: 5.75em;
}

.een-onderdeel14 {
    background-color: white;
    clip-path: ellipse(30% 15% at 40% 25%);
    height: 5.75em;
    left: 10.25em;
    opacity: 1;
    position: absolute;
    top: 0.25em;
    width: 5.75em;
}

.een-onderdeel15 {
    background-color: black;
    clip-path: ellipse(40% 24% at 41% 75%);
    height: 5.75em;
    left: 15.7em;
    opacity: 1;
    position: absolute;
    top: 3.75em;
    width: 5.75em;
}

.een-onderdeel16 {
    background-color: black;
    clip-path: polygon(0 25%, 80% 25%, 80% 85%, 0 85%);
    height: 5.75em;
    left: 15.75em;
    opacity: 1;
    position: absolute;
    top: 3.5em;
    width: 5.75em;
}

.een-onderdeel17 {
    background-color: black;
    clip-path: ellipse(40% 24% at 41% 25%);
    height: 5.75em;
    left: 15.75em;
    opacity: 1;
    position: absolute;
    top: 3.5em;
    width: 5.75em;
}

.een-onderdeel18 {
    background-color: white;
    clip-path: ellipse(30% 15% at 40% 75%);
    height: 5.75em;
    left: 15.65em;
    opacity: 1;
    position: absolute;
    top: 3.75em;
    width: 5.9em;
}

.een-onderdeel19 {
    background-color: white;
    clip-path: polygon(8% 25%, 72% 25%, 70% 80%, 8% 80%);
    height: 5.75em;
    left: 15.75em;
    opacity: 1;
    position: absolute;
    top: 3.5em;
    width: 5.75em;
}

.een-onderdeel20 {
    background-color: white;
    clip-path: ellipse(30% 15% at 40% 25%);
    height: 5.75em;
    left: 15.75em;
    opacity: 1;
    position: absolute;
    top: 3.5em;
    width: 5.75em;
}

/*----------------------*/
/*------steentje 2------*/
/*----------------------*/

.steentje-twee {
    background-color: transparent;
    clip-path: polygon(13% 8%, 18% 2%, 27% 0, 33% 3%, 37% 7%, 37% 11%, 44% 14%, 50% 14%, 56% 15%, 58% 20%, 58% 23%, 73% 31%, 100% 47%, 100% 53%, 49% 82%, 0 53%, 0 16%);
    height: 24em;
    left: 11.75em;
    opacity: 1;
    position: absolute;
    top: 13.25em;
    width: 24em;
    z-index: 16;
}

.twee-onderdeel1 {
    background-color: black;
    clip-path: polygon(0 15%, 73% 52%, 63% 98%, 0 61%);
    height: 19em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 1em;
    width: 19em;
}

.twee-onderdeel2 {
    background-color: white;
    clip-path: polygon(2% 18%, 60% 53%, 61% 95%, 2% 60%);
    height: 19em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 1em;
    width: 19em;
}

.twee-onderdeel3 {
    background-color: black;
    clip-path: polygon(33% 0, 100% 37%, 68% 56%, 0 16.5%);
    height: 17.5em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 1em;
    width: 17.5em;
}

.twee-onderdeel4 {
    background-color: white;
    clip-path: polygon(33% 4%, 95% 38%, 66% 55%, 5% 18%);
    height: 17.5em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 1em;
    width: 17.5em;
}

.twee-onderdeel5 {
    background-color: black;
    clip-path: polygon(46.4% 0%, 100% 33%, 100% 43%, 2% 98.5%, 0 27%);
    height: 12.25em;
    left: 11.75em;
    opacity: 1;
    position: absolute;
    top: 7.5em;
    width: 12.25em;
}

.twee-onderdeel6 {
    background-color: white;
    clip-path: polygon(44% 5%, 96% 35%, 96% 42%, 3% 94%, 2% 30%);
    height: 12.25em;
    left: 11.75em;
    opacity: 1;
    position: absolute;
    top: 7.5em;
    width: 12.25em;
}

.twee-onderdeel7 {
    background-color: transparent;
    height: 18.75em;
    left: -6.6em;
    opacity: 1;
    position: absolute;
    top: 0;
    width: 10em;
}

/*----------------------*/
/*------steentje 3------*/
/*----------------------*/

.steentje-drie {
    background-color: transparent;
    clip-path: polygon(0 68%, 0 60%, 27% 14%, 41% 7%, 47% 1%, 56% 1%, 62% 5%, 63% 11%, 71% 14%, 84% 16%, 87% 25%, 98% 32%, 99% 69%, 50% 97%);
    height: 24em;
    left: 23.5em;
    opacity: 1;
    position: absolute;
    top: 3em;
    width: 24em;
    z-index: 15;
}

/*----------------------*/
/*------steentje 4------*/
/*----------------------*/

.steentje-vier {
    background-color: transparent;
    clip-path: polygon(0 53%, 0 16%, 14% 9%, 15% 2%, 21% 1%, 28% 1%, 31% 1%, 36% 5%, 37% 9%, 40% 12%, 47% 13%, 54% 15%, 59% 18%, 60% 23%, 67% 26%, 74% 30%, 89% 39%, 100% 47%, 100% 54%, 50% 82%, 21% 66%);
    height: 24em;
    left: 35.5em;
    opacity: 1;
    position: absolute;
    top: -0.25em;
    width: 24em;
    z-index: 14;
}

/*----------------------*/
/*------steentje 5------*/
/*----------------------*/

.steentje-vijf {
    background-color: transparent;
    clip-path: polygon(28% 1%, 43% 4%, 47% 12%, 54% 18%, 63% 18%, 73% 25%, 79% 31%, 91% 38%, 91% 73%, 60% 90%, 0 56%, 0 20%, 19% 9%);
    height: 20em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 28em;
    width: 20em;
    z-index: 13;
}

.vijf-onderdeel1 {
    background-color: black;
    clip-path: polygon(0 0, 87% 53%, 87% 99%, 0 49%);
    height: 14em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 4.25em;
    width: 14em;
}

.vijf-onderdeel2 {
    background-color: white;
    clip-path: polygon(3% 6%, 85% 56%, 85% 95%, 3% 48%);
    height: 14em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 4.25em;
    width: 14em;
}

.vijf-onderdeel3 {
    background-color: black;
    clip-path: polygon(0 36%, 59% 0%, 60% 68%, 0 100%);
    height: 10em;
    left: 12em;
    opacity: 1;
    position: absolute;
    top: 8em;
    width: 10em;
}

.vijf-onderdeel4 {
    background-color: white;
    clip-path: polygon(3% 40%, 56% 9%, 57% 64%, 3% 95%);
    height: 10em;
    left: 12em;
    opacity: 1;
    position: absolute;
    top: 8em;
    width: 10em;
}

.vijf-onderdeel5 {
    background-color: black;
    clip-path: polygon(0% 18.2%, 34% 1%, 99% 39.5%, 67% 59%);
    height: 18em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 1em;
    width: 18em;
}

.vijf-onderdeel6 {
    background-color: white;
    clip-path: polygon(4% 19.5%, 35% 4%, 96% 41%, 67% 58%);
    height: 18em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 1em;
    width: 18em;
}

.vijf-onderdeel7 {
    background-color: transparent;
    height: 18.75em;
    left: -6em;
    opacity: 1;
    position: absolute;
    top: 0.5em;
    width: 10em;
}

/*----------------------*/
/*------steentje 6------*/
/*----------------------*/

.steentje-zes {
    background-color: transparent;
    clip-path: polygon(32% 25%, 36% 19%, 44% 18%, 52% 13%, 60% 7%, 69% 10%, 74% 16%, 83% 19%, 90% 25%, 100% 35%, 100% 57%, 61% 81%, 19% 57%, 19% 33%);
    height: 30em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 19em;
    width: 30em;
    z-index: 12;
}

.zes-onderdeel1 {
    background-color: black;
    clip-path: polygon(0 0, 87% 53%, 87% 99%, 0 49%);
    height: 14em;
    left: 6em;
    opacity: 1;
    position: absolute;
    top: 10em;
    width: 14em;
}

.zes-onderdeel2 {
    background-color: white;
    clip-path: polygon(3% 6%, 85% 55%, 85% 95%, 3% 48%);
    height: 14em;
    left: 6em;
    opacity: 1;
    position: absolute;
    top: 10em;
    width: 14em;
}

.zes-onderdeel3 {
    background-color: black;
    clip-path: polygon(1% 99%, 1% 50%, 84% 3%, 84% 51%);
    height: 14em;
    left: 18em;
    opacity: 1;
    position: absolute;
    top: 10em;
    width: 14em;
}

.zes-onderdeel4 {
    background-color: white;
    clip-path: polygon(3% 93%, 3% 54%, 81% 8%, 81% 48%);
    height: 14em;
    left: 18em;
    opacity: 1;
    position: absolute;
    top: 10em;
    width: 14em;
}

.zes-onderdeel5 {
    background-color: black;
    clip-path: polygon(50.1% 61.1%, 0 30%, 52% 0, 100% 31.5%);
    height: 23.75em;
    left: 6em;
    opacity: 1;
    position: absolute;
    top: 3em;
    width: 23.75em;
}

.zes-onderdeel6 {
    background-color: white;
    clip-path: polygon(50.5% 58.3%, 4% 30.5%, 52% 3%, 96.5% 32%);
    height: 23.75em;
    left: 6em;
    opacity: 1;
    position: absolute;
    top: 3em;
    width: 23.75em;
}

.zes-onderdeel7 {
    background-color: transparent;
    height: 18.75em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 5.5em;
    width: 10em;
}

.zes-onderdeel8 {
    background-color: transparent;
    height: 18.75em;
    left: 6em;
    opacity: 1;
    position: absolute;
    top: 2.5em;
    width: 10em;
}

/*----------------------*/
/*------steentje 7------*/
/*----------------------*/

.steentje-zeven {
    background-color: transparent;
    clip-path: polygon(32% 25%, 36% 19%, 44% 18%, 52% 13%, 60% 7%, 69% 10%, 74% 16%, 83% 19%, 90% 25%, 100% 35%, 100% 57%, 61% 81%, 19% 57%, 19% 33%);
    height: 30em;
    left: 11.75em;
    opacity: 1;
    position: absolute;
    top: 12.25em;
    width: 30em;
    z-index: 11;
}

/*----------------------*/
/*------steentje 8------*/
/*----------------------*/

.steentje-acht {
    background-color: transparent;
    clip-path: polygon(32% 25%, 36% 19%, 44% 18%, 52% 13%, 60% 7%, 69% 10%, 74% 16%, 83% 19%, 90% 25%, 100% 35%, 100% 57%, 61% 81%, 19% 57%, 19% 33%);
    height: 30em;
    left: 23.5em;
    opacity: 1;
    position: absolute;
    top: 5.5em;
    width: 30em;
    z-index: 10;
}

/*----------------------*/
/*------steentje 9------*/
/*----------------------*/

.steentje-negen {
    background-color: transparent;
    clip-path: polygon(28% 1%, 43% 4%, 47% 12%, 54% 18%, 63% 18%, 73% 25%, 79% 31%, 91% 38%, 91% 73%, 60% 90%, 0 56%, 0 20%, 19% 9%);
    height: 20em;
    left: 41.3em;
    opacity: 1;
    position: absolute;
    top: 4.4em;
    width: 20em;
    z-index: 9;
}

/*-----------------------*/
/*------steentje 10------*/
/*-----------------------*/

.steentje-tien {
    background-color: transparent;
    clip-path: polygon(13% 28%, 14% 21%, 21% 17%, 28% 18%, 32% 16%, 37% 12%, 38% 7%, 43% 4%, 51% 4%, 57% 6%, 63% 11%, 71% 16%, 80% 20%, 83% 27%, 100% 37%, 100% 46%, 100% 51%, 100% 68%, 69% 86%, 0 46%, 0 36%);
    height: 24em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 30em;
    width: 24em;
    z-index: 8;
}

.tien-onderdeel1 {
    background-color: transparent;
    left: 0;
    opacity: 1;
    position: absolute;
    top: -5.5em;
}

.tien-onderdeel2 {
    background-color: black;
    clip-path: polygon(50.1% 61.1%, 0 30%, 52% 0, 100% 31.5%);
    height: 23.75em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 1.8em;
    width: 23.75em;
}

.tien-onderdeel3 {
    background-color: white;
    clip-path: polygon(49.5% 58.5%, 3% 31%, 52% 2%, 96.5% 32.5%);
    height: 23.75em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 1.8em;
    width: 23.75em;
}

.tien-onderdeel4 {
    background-color: black;
    clip-path: polygon(100% 0, 100% 60%, 39% 94%, 0 72%, 0 56%);
    height: 11.75em;
    left: 11.95em;
    opacity: 1;
    position: absolute;
    top: 9.20em;
    width: 11.75em;
}

.tien-onderdeel5 {
    background-color: white;
    clip-path: polygon(96% 7%, 96% 58%, 39% 89%, 2% 67%, 2% 59%);
    height: 11.75em;
    left: 12em;
    opacity: 1;
    position: absolute;
    top: 9.25em;
    width: 11.75em;
}

.tien-onderdeel6 {
    background-color: transparent;
    height: 18.75em;
    left: -7em;
    opacity: 1;
    position: absolute;
    top: 4.5em;
    width: 10em;
}

.tien-onderdeel7 {
    background-color: transparent;
    height: 18.75em;
    left: -1em;
    opacity: 1;
    position: absolute;
    top: 1em;
    width: 10em;
}

/*-----------------------*/
/*------steentje 11------*/
/*-----------------------*/

.steentje-elf {
    background-color: transparent;
    clip-path: polygon(15% 33%, 20% 27%, 26% 27%, 30% 23%, 34% 19%, 39% 20%, 44% 16%, 48% 11%, 54% 11%, 58% 9%, 61% 5%, 67% 2%, 73% 5%, 80% 10%, 87% 13%, 99% 23%, 99% 43%, 37% 78%, 6% 59%, 5% 39%);
    height: 38em;
    left: 9.75em;
    opacity: 1;
    position: absolute;
    top: 17.2em;
    width: 38em;
    z-index: 7;
}

.elf-onderdeel1 {
    background-color: black;
    clip-path: polygon(0% 0%, 87.5% 52%, 88% 100%, 0 49%);
    height: 14.6em;
    left: 2.4em;
    opacity: 1;
    position: absolute;
    top: 14.8em;
    width: 13em;
}

.elf-onderdeel2 {
    background-color: white;
    clip-path: polygon(2% 4%, 85% 54%, 85% 95%, 2% 48%);
    height: 14.6em;
    left: 2.4em;
    opacity: 1;
    position: absolute;
    top: 14.8em;
    width: 13em;
}

.elf-onderdeel3 {
    background-color: black;
    clip-path: polygon(3% 58%, 98% 4%, 97% 32%, 3% 85.5%);
    height: 25em;
    left: 13em;
    opacity: 1;
    position: absolute;
    top: 8em;
    width: 25em;
}

.elf-onderdeel4 {
    background-color: white;
    clip-path: polygon(5% 59%, 96% 7%, 95.5% 31%, 5% 82%);
    height: 25em;
    left: 13em;
    opacity: 1;
    position: absolute;
    top: 8em;
    width: 25em;
}

.elf-onderdeel5 {
    background-color: black;
    clip-path: polygon(0 69.5%, 67% 17%, 100% 46%, 32.5% 100%);
    height: 25em;
    left: 2.4em;
    opacity: 1;
    position: absolute;
    top: -2.5em;
    width: 35.1em;
}

.elf-onderdeel6 {
    background-color: white;
    clip-path: polygon(2% 70%, 67% 19%, 98% 47%, 32.5% 98.5%);
    height: 25em;
    left: 2.4em;
    opacity: 1;
    position: absolute;
    top: -2.5em;
    width: 35.1em;
}

.elf-onderdeel7 {
    height: 25em;
    left: -4em;
    opacity: 1;
    position: absolute;
    top: 10.5em;
    width: 25em;
}

.elf-onderdeel8 {
    height: 25em;
    left: 1.75em;
    opacity: 1;
    position: absolute;
    top: 7.5em;
    width: 25em;
}

.elf-onderdeel9 {
    height: 25em;
    left: 7.5em;
    opacity: 1;
    position: absolute;
    top: 4.25em;
    width: 25em;
}

.elf-onderdeel10 {
    height: 25em;
    left: 12.75em;
    opacity: 1;
    position: absolute;
    top: 1em;
    width: 25em;
}

/*-----------------------*/
/*------steentje 12------*/
/*-----------------------*/

.steentje-twaalf {
    background-color: transparent;
    clip-path: polygon(65% 9%, 71% 6%, 74% 2%, 82% 2%, 92% 8%, 98% 13%, 99% 18%, 92% 32%, 79% 40%, 68% 33%, 64% 31%, 59% 27%, 59% 14%);
    height: 60em;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 10.1em;
    width: 60em;
    z-index: 6;
}

.twaalf-onderdeel1 {
    background-color: black;
    clip-path: polygon(0% 0%, 87.5% 52%, 88% 98.5%, 0% 49%);
    height: 15em;
    left: 35.9em;
    opacity: 1;
    position: absolute;
    top: 8.5em;
    width: 13em;
}

.twaalf-onderdeel2 {
    background-color: white;
    clip-path: polygon(2% 4%, 85% 54%, 85% 95%, 2% 48%);
    height: 14.8em;
    left: 35.9em;
    opacity: 1;
    position: absolute;
    top: 8.5em;
    width: 13em;
}

.twaalf-onderdeel3 {
    background-color: black;
    clip-path: polygon(50.1% 61.1%, 4% 28.3%, 52% 0, 100% 31.5%);
    height: 23.95em;
    left: 35em;
    opacity: 1;
    position: absolute;
    top: 1.8em;
    width: 23.75em;
}

.twaalf-onderdeel4 {
    background-color: white;
    clip-path: polygon(51.3% 58.75%, 6% 29%, 52% 2%, 96.5% 31.5%);
    height: 23.95em;
    left: 35em;
    opacity: 1;
    position: absolute;
    top: 1.8em;
    width: 23.75em;
}

.twaalf-onderdeel5 {
    background-color: black;
    clip-path: polygon(100% 0, 100% 12%, 66% 67%, 0 100%, 0 50%);
    height: 14.1em;
    left: 47.2em;
    opacity: 1;
    position: absolute;
    top: 9.2em;
    width: 11.5em;
}

.twaalf-onderdeel6 {
    background-color: white;
    clip-path: polygon(95% 5%, 95% 12%, 62% 65%, 3% 95%, 4% 51%);
    height: 14.1em;
    left: 47.2em;
    opacity: 1;
    position: absolute;
    top: 9.2em;
    width: 11.5em;
}

.twaalf-onderdeel7 {
    height: 25em;
    left: 29.2em;
    opacity: 1;
    position: absolute;
    top: 4.5em;
    width: 25em;
}

.twaalf-onderdeel8 {
    height: 25em;
    left: 34.7em;
    opacity: 1;
    position: absolute;
    top: 1em;
    width: 25em;
}

/*-----------------------*/
/*------steentje 13------*/
/*-----------------------*/

.steentje-dertien {
    background-color: transparent;
    clip-path: polygon(13% 28%, 14% 21%, 21% 17%, 28% 18%, 32% 16%, 37% 12%, 38% 7%, 43% 4%, 51% 4%, 57% 6%, 63% 11%, 71% 16%, 80% 20%, 83% 27%, 100% 37%, 100% 46%, 100% 51%, 100% 68%, 69% 86%, 0 46%, 0 36%);
    height: 24em;
    left: 5.6em;
    opacity: 1;
    position: absolute;
    top: 34em;
    width: 24em;
    z-index: 5;
}

/*-----------------------*/
/*------steentje 14------*/
/*-----------------------*/

.steentje-veertien {
    background-color: transparent;
    clip-path: polygon(32% 25%, 36% 19%, 44% 18%, 52% 13%, 60% 7%, 69% 10%, 74% 16%, 83% 19%, 90% 25%, 100% 35%, 100% 57%, 61% 81%, 19% 57%, 19% 33%);
    height: 30em;
    left: 11.3em;
    opacity: 1;
    position: absolute;
    top: 26.3em;
    width: 30em;
    z-index: 4;
}

/*-----------------------*/
/*------steentje 15------*/
/*-----------------------*/

.steentje-vijftien {
    background-color: transparent;
    clip-path: polygon(65% 9%, 71% 6%, 74% 2%, 82% 2%, 92% 8%, 98% 13%, 99% 18%, 92% 32%, 79% 40%, 68% 33%, 64% 31%, 59% 27%, 59% 14%);
    height: 60em;
    left: -6.2em;
    opacity: 1;
    position: absolute;
    top: 20.4em;
    width: 60em;
    z-index: 3;
}

/*-----------------------*/
/*------steentje 16------*/
/*-----------------------*/

.steentje-zestien {
    background-color: transparent;
    clip-path: polygon(13% 28%, 14% 21%, 21% 17%, 28% 18%, 32% 16%, 37% 12%, 38% 7%, 43% 4%, 51% 4%, 57% 6%, 63% 11%, 71% 16%, 80% 20%, 83% 27%, 100% 37%, 100% 46%, 100% 51%, 100% 68%, 69% 86%, 0 46%, 0 36%);
    height: 24em;
    left: 11.1em;
    opacity: 1;
    position: absolute;
    top: 38em;
    width: 24em;
    z-index: 2;
}

/*-----------------------*/
/*------steentje 17------*/
/*-----------------------*/

.steentje-zeventien {
    background-color: transparent;
    clip-path: polygon(65% 9%, 71% 6%, 74% 2%, 82% 2%, 92% 8%, 98% 13%, 99% 18%, 92% 32%, 79% 40%, 68% 33%, 64% 31%, 59% 27%, 59% 14%);
    height: 60em;
    left: -12.4em;
    opacity: 1;
    position: absolute;
    top: 31em;
    width: 60em;
    z-index: 1;
}

/*-------------------------*/
/*------media quaries------*/
/*-------------------------*/

/*------tablet------*/
@media screen and (min-width: 750px) {
    .centreren {
        background-color: transparent;
        height: 30px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        transition: all 1s ease;
        width: 650px;
    }

    .fix {
        background-color: transparent;
        height: 11.5em;
        left: 80em;
        opacity: 1;
        position: absolute;
        top: 10em;
        transition: all 1s ease;
        width: 29em;
    }

    .a {
        background-color: transparent;
        height: 11.5em;
        left: 10em;
        opacity: 1;
        position: absolute;
        top: 27.75em;
        transition: all 1s ease;
        width: 9.2em;
    }

    .broken {
        background-color: transparent;
        height: 11.5em;
        left: 28.5em;
        opacity: 1;
        position: absolute;
        top: 27.75em;
        transition: all 1s ease;
        width: 64.75em;
    }

    .heart {
        background-color: transparent;
        height: 11.5em;
        left: 10em;
        opacity: 1;
        position: absolute;
        top: 45.5em;
        transition: all 1s ease;
        width: 54em;
    }

    .and {
        background-color: transparent;
        height: 11.5em;
        left: 73em;
        opacity: 1;
        position: absolute;
        top: 45.5em;
        transition: all 1s ease;
        width: 32em;
    }

    .make {
        background-color: transparent;
        height: 11.5em;
        left: 10em;
        opacity: 1;
        position: absolute;
        top: 63em;
        transition: all 1s ease;
        width: 43em;
    }

    .atwee {
        background-color: transparent;
        height: 11.5em;
        left: 63em;
        opacity: 1;
        position: absolute;
        top: 63em;
        transition: all 1s ease;
        width: 9.2em;
    }

    .spare {
        background-color: transparent;
        height: 11.5em;
        left: 10em;
        opacity: 1;
        position: absolute;
        top: 81em;
        transition: all 1s ease;
        width: 54em;
    }

    .by {
        background-color: transparent;
        height: 11.5em;
        left: 75em;
        opacity: 1;
        position: absolute;
        top: 81em;
        transition: all 1s ease;
        width: 20em;
    }

    .tre {
        background-color: transparent;
        height: 11.5em;
        left: 10em;
        opacity: 1;
        position: absolute;
        top: 98.5em;
        transition: all 1s ease;
        width: 32em;
    }

    .seals {
        background-color: transparent;
        height: 11.5em;
        left: 50em;
        opacity: 1;
        position: absolute;
        top: 98.5em;
        transition: all 1s ease;
        width: 53.25em;
    }

    .hartje {
        background-color: transparent;
        height: 58.5em;
        left: 30em;
        opacity: 1;
        position: absolute;
        top: 104em;
        transition: all 1s ease;
        width: 59.5em;
        z-index: 1;
    }

}

/*------desktop------*/
@media screen and (min-width: 1024px) {
    .centreren {
        background-color: transparent;
        height: 30px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        transition: all 1s ease;
        width: 1024px;
    }

    .fix {
        background-color: transparent;
        height: 11.5em;
        left: 80em;
        opacity: 1;
        position: absolute;
        top: 10em;
        transition: all 1s ease;
        width: 29em;
    }

    .a {
        background-color: transparent;
        height: 11.5em;
        left: 120em;
        opacity: 1;
        position: absolute;
        top: 10em;
        transition: all 1s ease;
        width: 9em;
    }

    .broken {
        background-color: transparent;
        height: 11.5em;
        left: 10em;
        opacity: 1;
        position: absolute;
        top: 27.75em;
        transition: all 1s ease;
        width: 64.75em;
    }

    .heart {
        background-color: transparent;
        height: 11.5em;
        left: 85em;
        opacity: 1;
        position: absolute;
        top: 27.75em;
        transition: all 1s ease;
        width: 54em;
    }

    .and {
        background-color: transparent;
        height: 11.5em;
        left: 10em;
        opacity: 1;
        position: absolute;
        top: 45.5em;
        transition: all 1s ease;
        width: 32em;
    }

    .make {
        background-color: transparent;
        height: 11.5em;
        left: 53em;
        opacity: 1;
        position: absolute;
        top: 45.5em;
        transition: all 1s ease;
        width: 43em;
    }

    .atwee {
        background-color: transparent;
        height: 11.5em;
        left: 106em;
        opacity: 1;
        position: absolute;
        top: 45.5em;
        transition: all 1s ease;
        width: 9em;
    }

    .spare {
        background-color: transparent;
        height: 11.5em;
        left: 126em;
        opacity: 1;
        position: absolute;
        top: 45.5em;
        transition: all 1s ease;
        width: 54em;
    }

    .by {
        background-color: transparent;
        height: 11.5em;
        left: 10em;
        opacity: 1;
        position: absolute;
        top: 63em;
        transition: all 1s ease;
        width: 20em;
    }

    .tre {
        background-color: transparent;
        height: 11.5em;
        left: 40em;
        opacity: 1;
        position: absolute;
        top: 63em;
        transition: all 1s ease;
        width: 32em;
    }

    .seals {
        background-color: transparent;
        height: 11.5em;
        left: 82em;
        opacity: 1;
        position: absolute;
        top: 63em;
        transition: all 1s ease;
        width: 53.25em;
    }

    .hartje {
        background-color: transparent;
        height: 58.5em;
        left: 63em;
        opacity: 1;
        position: absolute;
        top: 90em;
        transform: scale(1.3, 1.3);
        transition: all 1s ease;
        width: 59.5em;
        z-index: 1;
    }
}