p, h1, h2, h3, h4, h5, h6, ul, li, a, button, input {
font-family: 'Fira Sans Condensed', sans-serif;
}

video{
padding-bottom: 100px;
}

p{
font-size: calc(14px + (19 - 14) * ((100vw - 330px) / (1920 - 330)));
line-height: 120%;
margin:0px;
}

.heading-large-pep{
font-family: 'Fira Sans Condensed', sans-serif;
}

h1{
font-weight: 900;
padding-left: 0px;
font-size: calc(36px + (100 - 36) * ((100vw - 330px) / (1920 - 330)));
line-height: 98%;
}

h2{
font-size: calc(26px + (32 - 26) * ((100vw - 330px) / (1920 - 330)));
font-weight: 700;
margin-bottom:5px;
margin-top:20px;
}

h3{
margin-bottom:10px;
margin-top: 30px;
line-height:100%;
font-weight: 700;
font-size: calc(18px + (24 - 18) * ((100vw - 330px) / (1920 - 330)));
color: rgba(37, 57, 73, 1);
}

h4{
font-size: calc(15px + (20 - 15) * ((100vw - 330px) / (1920 - 330)));
margin-top: 0px;
margin-bottom: 0px;
}

h5{
font-size: calc(13px + (16 - 13) * ((100vw - 330px) / (1920 - 330)));
margin-bottom: 0px;
}

h6{
font-size: calc(18px + (32 - 18) * ((100vw - 330px) / (1920 - 330)));
font-weight: 700;
margin-bottom:5px;
margin-top:20px;
}

footer a{
font-size: calc(13px + (16 - 13) * ((100vw - 330px) / (1920 - 330)));
margin-top:0px;
margin-bottom: 0px;
}

.pep-width-1600{
width:40%;
margin-left:auto;
margin-right: auto;
}

.pep-textwidth-1600{
width:60%;
margin-left:auto;
margin-right: auto;
}

.text-groot-pep{
font-size: calc(32px + (60 - 32) * ((100vw - 330px) / (1920 - 330)));
margin-top: 50px;
line-height: 98%;
padding-bottom: 150px;
}

.text-midden-pep{
font-size: calc(17px + (30 - 17) * ((100vw - 330px) / (1920 - 330)));
margin-top: -150px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 100px;
}

.pep-button-contactheader {
margin-top: 25px;
border-radius: 8px;
background-color: rgba(149, 198, 158, 0);
padding: 0 40px;
margin-right: 25px;
border: solid white 2px;
}

.pep-button-contactheader a{
color: rgba(255, 255, 255, 1);
font-weight: 700;
font-size: 16px;
}

.pep-button-contactheader:hover {
margin-top: 25px;
border-radius: 8px;
background-color:rgba(37, 57, 73, 1);
border: solid rgba(37, 57, 73, 1) 2px;
filter: drop-shadow(4px 4px 5px gray);
transition: 0.3s linear;
transition-property: background-color filter;
}

.pep-button-contactheader:hover a{
color: white;
text-decoration: none;
}

.pep-button-contact{
margin-top: 25px;
border-radius: 8px;
background-color: rgba(149, 198, 158, 1);
padding: 0 40px;
margin-right: 25px;
border: solid white 2px;
filter: drop-shadow(0px 0px 0px black);
}

.pep-button-contact a{
color: rgba(37, 57, 73, 1);
font-weight: 700;
font-size: 16px;
}

.pep-button-contact:hover {
margin-top: 25px;
border-radius: 8px;
background-color:rgba(37, 57, 73, 1);
border: solid rgba(37, 57, 73, 1) 2px;
filter: drop-shadow(4px 4px 5px gray);
transition: 0.3s linear;
transition-property: background-color filter;
}

.pep-button-contact:hover a{
color: white;
text-decoration: none;
}

.pep-button-onoffbro {
margin: auto;
width:77%;
position: absolute;
bottom:30px;
left:0px;
right:0px;
}

.uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle{
font-family: 'Fira Sans Condensed', sans-serif;
}

.pep-ani-text2{
width:55%;
}

.pep-ani-text2 p{
font-size: calc(18px + (32 - 18) * ((100vw - 330px) / (1920 - 330)));
text-align: left;
color: white;
font-weight: 400;
width:100%;
padding-top: 15px;
}

.padding-top-pep{
padding-top: 30px;
}

.anicontainer-pep{
position:absolute;
top:165px;
left:56%;
width: 44%;
height:600px;
z-index: 105;
overflow: hidden;
}

.computer-pep{
background-image: url("../assets/computergrijs.svg");
width: 100%;
height: 435px;
background-repeat: no-repeat;
}

.computerscherm{
position:absolute;
top:24px;
left:24px;
width:477px;
height:267px;
z-index: 105;
overflow: hidden;
}

.auto-pep{
background-image: url("../assets/autorood.svg");
width: 380px;
height: 380px;
position:absolute;
top:35px;
left:56px;
background-repeat: no-repeat;
animation-name: headeranimation01;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes headeranimation01 {
0%  {opacity: 0; left:56px;}
5%  {opacity: 0; left:56px;}
10%  {opacity: 1; left:56px;}
20%  {opacity: 1; left:56px;}
25%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}
@-webkit-keyframes  headeranimation01 {
0%  {opacity: 0; left:56px;}
5%  {opacity: 0; left:56px;}
10%  {opacity: 1; left:56px;}
20%  {opacity: 1; left:56px;}
25%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}

.wielrood1{
background-image: url("../assets/wielrood.svg");
width: 66px;
height: 66px;
position:absolute;
top:106px;
left:36px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wielrood;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes wielrood {
0%  {opacity: 0; transform: rotate(0deg)}
5%  {opacity: 0; transform: rotate(0deg)}
10%  {opacity: 1; transform: rotate(0deg)}
20%  {opacity: 1; transform: rotate(0deg)}
25%  {opacity: 1; transform: rotate(720deg)}
100% {opacity: 1;  transform: rotate(720deg)}
}
@-webkit-keyframes  wielrood {
0%  {opacity: 0; transform: rotate(0deg)}
5%  {opacity: 0; transform: rotate(0deg)}
10%  {opacity: 1; transform: rotate(0deg)}
20%  {opacity: 1; transform: rotate(0deg)}
25%  {opacity: 1; transform: rotate(720deg)}
100% {opacity: 1;  transform: rotate(720deg)}
}

.wielrood2{
background-image: url("../assets/wielrood.svg");
width: 66px;
height: 66px;
position:absolute;
top:106px;
left:273px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wielrood;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes wielrood {
0%  {opacity: 0; transform: rotate(0deg)}
5%  {opacity: 0; transform: rotate(0deg)}
10%  {opacity: 1; transform: rotate(0deg)}
20%  {opacity: 1; transform: rotate(0deg)}
25%  {opacity: 1; transform: rotate(720deg)}
100% {opacity: 1;  transform: rotate(720deg)}
}
@-webkit-keyframes  wielrood {
0%  {opacity: 0; transform: rotate(0deg)}
5%  {opacity: 0; transform: rotate(0deg)}
10%  {opacity: 1; transform: rotate(0deg)}
20%  {opacity: 1; transform: rotate(0deg)}
25%  {opacity: 1; transform: rotate(720deg)}
100% {opacity: 1;  transform: rotate(720deg)}
}

.horloge-pep{
background-image: url("../assets/horlogekleur.svg");
width: 334px;
height: 170px;
position:absolute;
top:35px;
left:70px;
transform: rotate(7deg);
background-repeat: no-repeat;
background-size: contain;
animation-name: headeranimation02;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes headeranimation02 {
0%  {opacity: 0; left:70px;}
25%  {opacity: 0; left:70px;}
30%  {opacity: 0; left:70px;}
35%  {opacity: 1; left:70px;}
45%  {opacity: 1;  left:70px;}
50%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}
@-webkit-keyframes  headeranimation02 {
0%  {opacity: 0; left:70px;}
25%  {opacity: 0; left:70px;}
30%  {opacity: 0; left:70px;}
35%  {opacity: 1; left:70px;}
45%  {opacity: 1;  left:70px;}
50%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}

.wijzer{
background-image: url("../assets/wijzer.svg");
width: 15px;
height: 90px;
position:absolute;
top:31px;
left:162px;
background-repeat: no-repeat;
background-size: contain;
-ms-transform: rotate(0deg); /* IE 9 */
-ms-transform-origin: 7px 60px; /* IE 9 */
transform: rotate(0deg);
transform-origin: 7px 60px;
animation-name: wijzer;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes wijzer {
100%{
transform: rotate(360deg)
}
}
@-webkit-keyframes  wijzer {
100%{
transform: rotate(360deg)
}
}

.boot-pep{
background-image: url("../assets/bootblauw.svg");
width: 360px;
height: 250px;
position:absolute;
top:5px;
left:60px;
background-repeat: no-repeat;
background-size: contain;
animation-name: headeranimation03;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes headeranimation03 {
0%  {opacity: 0; left:60px;}
50%  {opacity: 0; left:60px;}
55%  {opacity: 0; left:60px;}
60%  {opacity: 1; left:60px;}
70%  {opacity: 1;  left:60px;}
75%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}
@-webkit-keyframes  headeranimation03 {
0%  {opacity: 0; left:60px;}
50%  {opacity: 0; left:60px;}
55%  {opacity: 0; left:60px;}
60%  {opacity: 1; left:60px;}
70%  {opacity: 1;  left:60px;}
75%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}

.vlag{
background-image: url("../assets/vlag.svg");
width: 30px;
height: 30px;
position:absolute;
top:55px;
left:235px;
background-repeat: no-repeat;
background-size: contain;
animation-name: vlag;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlag {
0%  {opacity: 0; top:105px;}
50%  {opacity: 0; top:105px;}
60%  {opacity: 0; top:105px;}
65%  {opacity: 0.5; top:105px;}
70%  {opacity: 0.5; top:55px;}
75%  {opacity: 0.5; top:55px;}
100% {opacity: 0.5; top:55px;}
}
@-webkit-keyframes  vlag {
0%  {opacity: 0; top:105px;}
50%  {opacity: 0; top:105px;}
60%  {opacity: 0; top:105px;}
65%  {opacity: 0.5; top:105px;}
70%  {opacity: 0.5; top:55px;}
75%  {opacity: 0.5; top:55px;}
100% {opacity: 0.5; top:55px;}
}

.laptop-pep{
background-image: url("../assets/laptopgrijs.svg");
width: 290px;
height: 400px;
position:absolute;
top:30px;
left:70px;
background-repeat: no-repeat;
animation-name: headeranimation04;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes headeranimation04 {
0%  {opacity: 0; left:85px;}
75%  {opacity: 0; left:85px;}
80%  {opacity: 0; left:85px;}
85%  {opacity: 1; left:85px;}
95%  {opacity: 1;  left:85px;}
100% {opacity: 1;  left:105%;}
}
@-webkit-keyframes  headeranimation04 {
0%  {opacity: 0; left:85px;}
75%  {opacity: 0; left:85px;}
80%  {opacity: 0; left:85px;}
85%  {opacity: 1; left:85px;}
95%  {opacity: 1;  left:85px;}
100% {opacity: 1;  left:105%;}
}

.roodscherm{
background-image: url("../assets/roodscherm.svg");
width: 173px;
height: 130px;
position:absolute;
top:6px;
left:104px;
background-repeat: no-repeat;
background-size: contain;
animation-name: roodschermani;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes roodschermani {
0%  {opacity: 0;}
85%  {opacity: 0;}
88%  {opacity: 1;}
100% {opacity: 1;}
}
@-webkit-keyframes  roodschermani {
0%  {opacity: 0;}
85%  {opacity: 0;}
88%  {opacity: 1;}
100% {opacity: 1;}
}

.wifi{
background-image: url("../assets/logoNotarieelBetalenscherm.svg");
width: 70px;
height: 70px;
position:absolute;
top:19px;
left:155px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wifiani;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes wifiani {
0%  {opacity: 0;}
75%  {opacity: 0;}
85%  {opacity: 0;}
88%  {opacity: 1;}
90%  {opacity: 0;}
92%  {opacity: 1;}
94%  {opacity: 0;}
96%  {opacity: 1;}
98%  {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes  wifiani {
0%  {opacity: 0;}
75%  {opacity: 0;}
85%  {opacity: 0;}
88%  {opacity: 1;}
90%  {opacity: 0;}
92%  {opacity: 1;}
94%  {opacity: 0;}
96%  {opacity: 1;}
98%  {opacity: 0;}
100% {opacity: 1;}
}

.buyknop{
background-color: white;
width: 40px;
height: 14px;
padding-top:7px;
position:absolute;
border-radius: 4px;
border: 1px solid grey;
top:240px;
animation-name: buyknop;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes buyknop {
0%  {background-color: white; border: 1px solid grey;}
19%  {background-color: white; border: 1px solid grey;}
20%  {background-color: yellowgreen; border: 1px solid yellowgreen;}
21%  {background-color: white; border: 1px solid grey;}
44%  {background-color: white; border: 1px solid grey;}
45%  {background-color: yellowgreen; border: 1px solid yellowgreen;}
46%  {background-color: white; border: 1px solid grey;}
69%  {background-color: white; border: 1px solid grey;}
70%  {background-color: yellowgreen; border: 1px solid yellowgreen;}
71%  {background-color: white; border: 1px solid grey;}
94%  {background-color: white; border: 1px solid grey;}
95%  {background-color: yellowgreen; border: 1px solid yellowgreen;}
96%  {background-color: white; border: 1px solid grey;}
100% {background-color: white; border: 1px solid grey;}
}
@-webkit-keyframes  buyknop {
0%  {background-color: white; border: 1px solid grey;}
19%  {background-color: white; border: 1px solid grey;}
20%  {background-color: yellowgreen; border: 1px solid yellowgreen;}
21%  {background-color: white; border: 1px solid grey;}
44%  {background-color: white; border: 1px solid grey;}
45%  {background-color: yellowgreen; border: 1px solid yellowgreen;}
46%  {background-color: white; border: 1px solid grey;}
69%  {background-color: white; border: 1px solid grey;}
70%  {background-color: yellowgreen; border: 1px solid yellowgreen;}
71%  {background-color: white; border: 1px solid grey;}
94%  {background-color: white; border: 1px solid grey;}
95%  {background-color: yellowgreen; border: 1px solid yellowgreen;}
96%  {background-color: white; border: 1px solid grey;}
100% {background-color: white; border: 1px solid grey;}
}

.uk-navbar-toggle {
    color: #fff;
}

.uk-navbar-container:not(.uk-navbar-transparent) {
background: rgba(37, 57, 73, 1);
}

.uk-logo-logo{
background-image: url("../assets/nblogogrw.svg");
width: 225px;
height: 100%;
background-size: 100%;
background-position: 0% 40%;
background-repeat: no-repeat;
}

.uk-logo-white {
background-image: url("../assets/nblogow.svg");
width: 225px;
height: 100%;
background-size: 100%;
background-position: 0% 40%;
background-repeat: no-repeat;
}

.pep-background01{
background-image: linear-gradient(to right, rgba(147, 191, 42, 1), rgba(149, 198, 158, 1));
}

.pep-background02{
background-color: rgba(37, 57, 73, 1);
}

.pep-backgroundgrijsgroen{
background-image: linear-gradient(to bottom right, rgba(149, 198, 158, 1), rgba(121, 211, 139, 1));
}

.pep-backgroundoranje{
background-image: linear-gradient(to bottom right, rgb(245, 173, 35), rgb(255, 216, 30));
}

.bureau-illu{
background-image: url("../assets/bureau.svg");
height:500px;
width:525px;
background-repeat: no-repeat;
background-size:contain;
}

.wolkje1{
background-image: url("../assets/wolkje1.svg");
height:50px;
width:50px;
position: absolute;
top:100px;
left:345px;
background-repeat: no-repeat;
background-size:contain;
animation-name: wolkje1;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes wolkje1 {
0%  {opacity: 0; top:100px;}
50%  {opacity: 0.6; top:50px;}
100%  {opacity: 0; top:-20px;}
}
@-webkit-keyframes  wolkje1 {
0%  {opacity: 0; top:100px;}
50%  {opacity: 0.6; top:50px;}
100%  {opacity: 0; top:-20px;}
}

.wolkje2{
background-image: url("../assets/wolkje2.svg");
height:70px;
width:60px;
position: absolute;
top:85px;
left:335px;
background-repeat: no-repeat;
background-size:contain;
animation-name: wolkje1;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.wolkje3{
background-image: url("../assets/wolkje3.svg");
height:75px;
width:50px;
position: absolute;
top:5px;
left:342px;
background-repeat: no-repeat;
background-size:contain;
animation-name: wolkje1;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoecontainer{
height:270px;
}

.hoe1{
background-image: url("../assets/hoe1.svg");
height:170px;
width:100%;
margin-bottom:0px;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.hoe2{
background-image: url("../assets/hoe2.svg");
height:170px;
width:100%;
margin-bottom:0px;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.hoe3{
background-image: url("../assets/hoe3.svg");
height:170px;
width:100%;
margin-bottom:0px;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.hoe4{
background-image: url("../assets/hoe4.svg");
height:170px;
width:100%;
margin-bottom:0px;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.hoe5{
background-image: url("../assets/hoe5.svg");
height:170px;
width:100%;
margin-bottom:0px;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.hoecirkel1{
width:170px;
height: 170px;
position: absolute;
top:0px;
left:35px;
background-color:rgba(205, 171, 183, 1);
border-radius: 50%;
animation-name: hoecirkel1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoecirkel1 {
0%  {background-color:rgba(205, 171, 183, 0);}
19%  {background-color:rgba(205, 171, 183, 0);}
20%  {background-color:rgba(205, 171, 183, 1);}
100%  {background-color:rgba(205, 171, 183, 1);}
}
@-webkit-keyframes  hoecirkel1 {
0%  {background-color:rgba(205, 171, 183, 0);}
19%  {background-color:rgba(205, 171, 183, 0);}
20%  {background-color:rgba(205, 171, 183, 1);}
100%  {background-color:rgba(205, 171, 183, 1);}
}

.hoecirkel2{
width:170px;
height: 170px;
position: absolute;
top:0px;
left:35px;
background-color:rgba(167, 213, 161, 1);
border-radius: 50%;
animation-name: hoecirkel2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoecirkel2 {
0%  {background-color:rgba(167, 213, 161, 1);}
19%  {background-color:rgba(167, 213, 161, 1);}
20%  {background-color:rgba(167, 213, 161, 0);}
39%  {background-color:rgba(167, 213, 161, 0);}
40%  {background-color:rgba(167, 213, 161, 1);}
100%  {background-color:rgba(167, 213, 161, 1);}
}
@-webkit-keyframes  hoecirkel2 {
0%  {background-color:rgba(167, 213, 161, 1);}
19%  {background-color:rgba(167, 213, 161, 1);}
20%  {background-color:rgba(167, 213, 161, 0);}
39%  {background-color:rgba(167, 213, 161, 0);}
40%  {background-color:rgba(167, 213, 161, 1);}
100%  {background-color:rgba(167, 213, 161, 1);}
}

.hoecirkel3{
width:170px;
height: 170px;
position: absolute;
top:0px;
left:35px;
background-color:rgba(126, 107, 137, 1);
border-radius: 50%;
animation-name: hoecirkel3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoecirkel3 {
0%  {background-color:rgba(126, 107, 137, 1);}
39%  {background-color:rgba(126, 107, 137, 1);}
40%  {background-color:rgba(126, 107, 137, 0);}
59%  {background-color:rgba(126, 107, 137, 0);}
60%  {background-color:rgba(126, 107, 137, 1);}
100%  {background-color:rgba(126, 107, 137, 1);}
}
@-webkit-keyframes  hoecirkel3 {
0%  {background-color:rgba(126, 107, 137, 1);}
39%  {background-color:rgba(126, 107, 137, 1);}
40%  {background-color:rgba(126, 107, 137, 0);}
59%  {background-color:rgba(126, 107, 137, 0);}
60%  {background-color:rgba(126, 107, 137, 1);}
100%  {background-color:rgba(126, 107, 137, 1);}
}

.hoecirkel4{
width:170px;
height: 170px;
position: absolute;
top:0px;
left:35px;
background-color:rgba(212, 96, 128, 1);
border-radius: 50%;
animation-name: hoecirkel4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoecirkel4 {
0%  {background-color:rgba(212, 96, 128, 1);}
59%  {background-color:rgba(212, 96, 128, 1);}
60%  {background-color:rgba(212, 96, 128, 0);}
79%  {background-color:rgba(212, 96, 128, 0);}
80%  {background-color:rgba(212, 96, 128, 1);}
100%  {background-color:rgba(212, 96, 128, 1);}
}
@-webkit-keyframes  hoecirkel4 {
0%  {background-color:rgba(212, 96, 128, 1);}
59%  {background-color:rgba(212, 96, 128, 1);}
60%  {background-color:rgba(212, 96, 128, 0);}
79%  {background-color:rgba(212, 96, 128, 0);}
80%  {background-color:rgba(212, 96, 128, 1);}
100%  {background-color:rgba(212, 96, 128, 1);}
}

.hoecirkel5{
width:170px;
height: 170px;
position: absolute;
top:0px;
left:35px;
background-color:rgba(114, 170, 206, 1);
border-radius: 50%;
animation-name: hoecirkel5;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoecirkel5 {
0%  {background-color:rgba(114, 170, 206, 1);}
79%  {background-color:rgba(114, 170, 206, 1);}
80%  {background-color:rgba(114, 170, 206, 0);}
100%  {background-color:rgba(114, 170, 206, 0);}
}
@-webkit-keyframes  hoecirkel5 {
0%  {background-color:rgba(114, 170, 206, 1);}
79%  {background-color:rgba(114, 170, 206, 1);}
80%  {background-color:rgba(114, 170, 206, 0);}
100%  {background-color:rgba(114, 170, 206, 0);}
}

.hk1{
color:rgba(197, 131, 153, 1);
animation-name: hk1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hk1 {
0%  {color:rgba(197, 131, 153, 1);}
19%  {color:rgba(197, 131, 153, 1);}
20%  {color:rgba(197, 131, 153, 0);}
100%  {color:rgba(197, 131, 153, 0);}
}
@-webkit-keyframes  hk1 {
0%  {color:rgba(197, 131, 153, 1);}
19%  {color:rgba(197, 131, 153, 1);}
20%  {color:rgba(197, 131, 153, 0);}
100%  {color:rgba(197, 131, 153, 0);}
}

.hk2{
color:rgba(121, 184, 169, 1);
animation-name: hk2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hk2 {
0%  {color:rgba(121, 184, 169, 0);}
19%  {color:rgba(121, 184, 169, 0);}
20%  {color:rgba(121, 184, 169, 1);}
39%  {color:rgba(121, 184, 169, 1);}
40%  {color:rgba(121, 184, 169, 0);}
100%  {color:rgba(121, 184, 169, 0);}
}
@-webkit-keyframes  hk2 {
0%  {color:rgba(121, 184, 169, 0);}
19%  {color:rgba(121, 184, 169, 0);}
20%  {color:rgba(121, 184, 169, 1);}
39%  {color:rgba(121, 184, 169, 1);}
40%  {color:rgba(121, 184, 169, 0);}
100%  {color:rgba(121, 184, 169, 0);}
}

.hk3{
color:rgba(122, 163, 182, 1);
animation-name: hk3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hk3 {
0%  {color:rgba(122, 163, 182, 0);}
39%  {color:rgba(122, 163, 182, 0);}
40%  {color:rgba(122, 163, 182, 1);}
59%  {color:rgba(122, 163, 182, 1);}
60%  {color:rgba(122, 163, 182, 0);}
100%  {color:rgba(122, 163, 182, 0);}
}
@-webkit-keyframes  hk3 {
0%  {color:rgba(122, 163, 182, 0);}
39%  {color:rgba(122, 163, 182, 0);}
40%  {color:rgba(122, 163, 182, 1);}
59%  {color:rgba(122, 163, 182, 1);}
60%  {color:rgba(122, 163, 182, 0);}
100%  {color:rgba(122, 163, 182, 0);}
}

.hk4{
color:rgba(202, 158, 171, 1);
animation-name: hk4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hk4 {
0%  {color:rgba(202, 158, 171, 0)}
59%  {color:rgba(202, 158, 171, 0)}
60%  {color:rgba(202, 158, 171, 1)}
79%  {color:rgba(202, 158, 171, 1)}
80%  {color:rgba(202, 158, 171, 0)}
100%  {color:rgba(202, 158, 171, 0)}
}
@-webkit-keyframes  hk4 {
0%  {color:rgba(202, 158, 171, 0)}
59%  {color:rgba(202, 158, 171, 0)}
60%  {color:rgba(202, 158, 171, 1)}
79%  {color:rgba(202, 158, 171, 1)}
80%  {color:rgba(202, 158, 171, 0)}
100%  {color:rgba(202, 158, 171, 0)}
}

.hk5{
color:rgba(229, 190, 96, 1);
animation-name: hk5;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hk5 {
0%  {color:rgba(229, 190, 96, 0)}
79%  {color:rgba(229, 190, 96, 0)}
80%  {color:rgba(229, 190, 96, 1)}
100%  {color:rgba(229, 190, 96, 1)}
}
@-webkit-keyframes  hk5 {
0%  {color:rgba(229, 190, 96, 0)}
79%  {color:rgba(229, 190, 96, 0)}
80%  {color:rgba(229, 190, 96, 1)}
100%  {color:rgba(229, 190, 96, 1)}
}

.hoekopje1{
position: absolute;
top:70px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoekopje2{
position: absolute;
top:70px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoekopje3{
position: absolute;
top:70px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoekopje4{
position: absolute;
top:70px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoekopje5{
position: absolute;
top:70px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext5;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoetext1{
position: absolute;
top:135px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoetext1 {
0%  {color:rgba(0, 0, 0, 1);}
19%  {color:rgba(0, 0, 0, 1);}
20%  {color:rgba(0, 0, 0, 0);}
100%  {color:rgba(0, 0, 0, 0);}
}
@-webkit-keyframes  hoetext1 {
0%  {color:rgba(0, 0, 0, 1);}
19%  {color:rgba(0, 0, 0, 1);}
20%  {color:rgba(0, 0, 0, 0);}
100%  {color:rgba(0, 0, 0, 0);}
}

.hoetext2{
position: absolute;
top:135px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoetext2 {
0%  {color:rgba(0, 0, 0, 0);}
19%  {color:rgba(0, 0, 0, 0);}
20%  {color:rgba(0, 0, 0, 1);}
39%  {color:rgba(0, 0, 0, 1);}
40%  {color:rgba(0, 0, 0, 0);}
100%  {color:rgba(0, 0, 0, 0);}
}
@-webkit-keyframes  hoetext2 {
0%  {color:rgba(0, 0, 0, 0);}
19%  {color:rgba(0, 0, 0, 0);}
20%  {color:rgba(0, 0, 0, 1);}
39%  {color:rgba(0, 0, 0, 1);}
40%  {color:rgba(0, 0, 0, 0);}
100%  {color:rgba(0, 0, 0, 0);}
}

.hoetext3{
position: absolute;
top:135px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoetext3 {
0%  {color:rgba(0, 0, 0, 0);}
39%  {color:rgba(0, 0, 0, 0);}
40%  {color:rgba(0, 0, 0, 1);}
59%  {color:rgba(0, 0, 0, 1);}
60%  {color:rgba(0, 0, 0, 0);}
100%  {color:rgba(0, 0, 0, 0);}
}
@-webkit-keyframes  hoetext3 {
0%  {color:rgba(0, 0, 0, 0);}
39%  {color:rgba(0, 0, 0, 0);}
40%  {color:rgba(0, 0, 0, 1);}
59%  {color:rgba(0, 0, 0, 1);}
60%  {color:rgba(0, 0, 0, 0);}
100%  {color:rgba(0, 0, 0, 0);}
}

.hoetext4{
position: absolute;
top:135px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoetext4 {
0%  {color:rgba(0, 0, 0, 0)}
59%  {color:rgba(0, 0, 0, 0)}
60%  {color:rgba(0, 0, 0, 1)}
79%  {color:rgba(0, 0, 0, 1)}
80%  {color:rgba(0, 0, 0, 0)}
100%  {color:rgba(0, 0, 0, 0)}
}
@-webkit-keyframes  hoetext4 {
0%  {color:rgba(0, 0, 0, 0)}
59%  {color:rgba(0, 0, 0, 0)}
60%  {color:rgba(0, 0, 0, 1)}
79%  {color:rgba(0, 0, 0, 1)}
80%  {color:rgba(0, 0, 0, 0)}
100%  {color:rgba(0, 0, 0, 0)}
}

.hoetext5{
position: absolute;
top:135px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext5;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoetext5 {
0%  {color:rgba(0, 0, 0, 0)}
79%  {color:rgba(0, 0, 0, 0)}
80%  {color:rgba(0, 0, 0, 1)}
100%  {color:rgba(0, 0, 0, 1)}
}
@-webkit-keyframes  hoetext5 {
0%  {color:rgba(0, 0, 0, 0)}
79%  {color:rgba(0, 0, 0, 0)}
80%  {color:rgba(0, 0, 0, 1)}
100%  {color:rgba(0, 0, 0, 1)}
}

.onlineillu{
background-image: url("../assets/onlineillu.svg");
height:100px;
width:100%;
margin-bottom:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.offlineillu{
background-image: url("../assets/offlineillu.svg");
height:100px;
width:100%;
margin-bottom:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.brokerillu{
background-image: url("../assets/brokerillu.svg");
height:100px;
width:100%;
margin-bottom:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.illugarage{
background-image: url("../assets/garage.svg");
height:400px;
width:100%;
margin-bottom:90px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.cirkelverloop{
background-image: url("../assets/cirkelverloop.svg");
position: absolute;
top:35px;
right:41%;
height:400px;
width:400px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: cirkelverloop;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes cirkelverloop {
0%  {opacity:0.0;}
25%  {opacity:0.0;}
37.5%  {opacity:1.0;}
50%  {opacity:0.0;}
100%  {opacity:0.0;}
}
@-webkit-keyframes cirkelverloop {
0%  {opacity:0.0;}
25%  {opacity:0.0;}
37.5%  {opacity:1.0;}
50%  {opacity:0.0;}
100%  {opacity:0.0;}
}

.carnextillu{
background-image: url("../assets/carnextilluvrij.png");
position: absolute;
top:200px;
height:190px;
width:450px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: carnexttest;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes carnexttest {
0%  {right:-450px;}
25%  {right:40%;}
75%  {right:40%;}
100%  {right:110%;}
}
@-webkit-keyframes  carnexttest {
0%  {right:-450px;}
25%  {right:40%;}
75%  {right:40%;}
100%  {right:110%;}
}

.frontwheel{
background-image: url("../assets/wiel.png");
position: absolute;
top:106px;
right:325px;
height:78px;
width:78px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: wiel;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes wiel {
0%{
transform: rotate(0deg)
}
25% {
transform: rotate(-1440deg)
}
75% {
transform: rotate(-1440deg)
}
100%{
transform: rotate(-2880deg)
}
}
@-webkit-keyframes  wiel {
0%{
transform: rotate(0deg)
}
25% {
transform: rotate(-1440deg)
}
75% {
transform: rotate(-1440deg)
}
100%{
transform: rotate(-2880deg)
}
}

.backwheel{
background-image: url("../assets/wiel.png");
position: absolute;
top:106px;
right:45px;
height:78px;
width:78px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: wiel;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.armpjeillu{
background-image: url("../assets/armpje.svg");
position: absolute;
top:15px;
right:50.7%;
height:60px;
width:60px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
-ms-transform: rotate(-5deg); /* IE 9 */
-ms-transform-origin: 98% 93%; /* IE 9 */
transform: rotate(-5deg);
transform-origin: 98% 93%;
animation-name: armpje;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes armpje {
0%  {opacity:0.0;}
40%  {opacity:0.0;}
41%  {opacity:1.0;transform: rotate(-5deg);}
48%  {opacity:1.0;transform: rotate(25deg);}
55%  {opacity:1.0;transform: rotate(-5deg);}
63%  {opacity:1.0;transform: rotate(25deg);}
70%  {opacity:1.0;transform: rotate(-5deg);}
71%  {opacity:0.0;}
100%  {opacity:0.0;}
}
@-webkit-keyframes armpje {
0%  {opacity:0.0;}
40%  {opacity:0.0;}
41%  {opacity:1.0;transform: rotate(-5deg);}
48%  {opacity:1.0;transform: rotate(25deg);}
55%  {opacity:1.0;transform: rotate(-5deg);}
63%  {opacity:1.0;transform: rotate(25deg);}
70%  {opacity:1.0;transform: rotate(-5deg);}
71%  {opacity:0.0;}
100%  {opacity:0.0;}
}

.textwolkje{
background-image: url("../assets/vtje.svg");
position: absolute;
top:50px;
right:50%;
height:160px;
width:160px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: textwolkje;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes textwolkje {
0%  {opacity:0.0;}
40%  {opacity:0.0;}
41%  {opacity:1.0;}
70%  {opacity:1.0;}
71%  {opacity:0.0;}
100%  {opacity:0.0;}
}
@-webkit-keyframes textwolkje {
0%  {opacity:0.0;}
40%  {opacity:0.0;}
41%  {opacity:1.0;}
70%  {opacity:1.0;}
71%  {opacity:0.0;}
100%  {opacity:0.0;}
}

.landschap{
background-image: url("../assets/landschap.svg");
height:400px;
width:100%;
margin-bottom:90px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.vuur{
background-image: url("../assets/vuur.svg");
position: absolute;
top:305px;
right:-233px;
height:150px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.vlam1{
background-image: url("../assets/vlam1.svg");
position: absolute;
top:340px;
right:-215px;
height:70px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam1;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam1 {
0%  {opacity: 0; top:340px;}
25%  {opacity: 1; top:329px;}
50%  {opacity: 0.7; top:308px;}
75%  {opacity: 0.9; top:297px;}
100%  {opacity: 0; top:285px;}
}
@-webkit-keyframes  vlam1 {
0%  {opacity: 0; top:340px;}
25%  {opacity: 1; top:329px;}
50%  {opacity: 0.7; top:308px;}
75%  {opacity: 0.9; top:297px;}
100%  {opacity: 0; top:285px;}
}

.vlam2{
background-image: url("../assets/vlam2.svg");
position: absolute;
top:315px;
right:-225px;
height:70px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam2;
animation-duration: 0.9s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam2 {
0%  {opacity: 0; top:320px;}
25%  {opacity: 1; top:310px;}
50%  {opacity: 0.7; top:300px;}
75%  {opacity: 0.9; top:290px;}
100%  {opacity: 0; top:280px;}
}
@-webkit-keyframes  vlam2 {
0%  {opacity: 0; top:320px;}
25%  {opacity: 1; top:310px;}
50%  {opacity: 0.7; top:300px;}
75%  {opacity: 0.9; top:290px;}
100%  {opacity: 0; top:280px;}
}

.vlam3{
background-image: url("../assets/vlam3.svg");
position: absolute;
top:305px;
right:-237px;
height:70px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam3;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam3 {
0%  {opacity: 0; top:335px;}
25%  {opacity: 1; top:315px;}
50%  {opacity: 0.7; top:295px;}
75%  {opacity: 1; top:275px;}
100%  {opacity: 0; top:255px;}
}
@-webkit-keyframes  vlam3 {
0%  {opacity: 0; top:335px;}
25%  {opacity: 1; top:315px;}
50%  {opacity: 0.7; top:295px;}
75%  {opacity: 1; top:275px;}
100%  {opacity: 0; top:255px;}
}

.vlam4{
background-image: url("../assets/vlam4.svg");
position: absolute;
top:340px;
right:-245px;
height:70px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam4;
animation-duration: 1.3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam4 {
0%  {opacity: 0; top:340px;}
25%  {opacity: 1; top:330px;}
50%  {opacity: 0.7; top:320px;}
75%  {opacity: 1; top:310px;}
100%  {opacity: 0; top:300px;}
}
@-webkit-keyframes  vlam4 {
0%  {opacity: 0; top:340px;}
25%  {opacity: 1; top:330px;}
50%  {opacity: 0.7; top:320px;}
75%  {opacity: 1; top:310px;}
100%  {opacity: 0; top:300px;}
}

.camper{
background-image: url("../assets/camper.svg");
position: absolute;
top:130px;
left:-140px;
height:250px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.schermslot{
background-image: url("../assets/schermslot.svg");
width: 100%;
height: 450px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.headerschuin01{
position:relative;
top:-80px;
width:100%;
height:850px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 53% 93%, 50% 100%, 47% 94%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 53% 93%, 50% 100%, 47% 94%, 0% 100%);
background: linear-gradient(to bottom right, rgba(150, 198, 159, 1), rgba(125, 195, 139, 1), rgba(131, 178, 79, 1), rgba(115, 181, 103, 1), rgba(125, 195, 148, 1));
background-size: 1000% 1000%;
-webkit-animation: AnimationName 18s ease infinite;
-moz-animation: AnimationName 18s ease infinite;
animation: AnimationName 18s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}
}
@keyframes AnimationName {
0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}
}

.headerschuin02{
position:relative;
top:-80px;
width:100%;
height:850px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 53% 93%, 50% 100%, 47% 94%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 53% 93%, 50% 100%, 47% 94%, 0% 100%);
background: linear-gradient(to bottom right, rgba(150, 198, 159, 1), rgba(109, 189, 124, 1), rgba(127, 185, 99, 1), rgba(117, 185, 144, 1), rgba(107, 171, 189, 1));
background-size: 1000% 1000%;
-webkit-animation: AnimationName 18s ease infinite;
-moz-animation: AnimationName 18s ease infinite;
animation: AnimationName 18s ease infinite;
}

.headerschuin03{
position:relative;
top:-80px;
width:100%;
height:850px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 53% 93%, 50% 100%, 47% 94%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 53% 93%, 50% 100%, 47% 94%, 0% 100%);
background: linear-gradient(to bottom right, rgba(150, 198, 159, 1), rgba(109, 185, 188, 1), rgba(109, 179, 139, 1), rgba(125, 191, 103, 1), rgba(118, 174, 177, 1));
background-size: 1000% 1000%;
-webkit-animation: AnimationName 18s ease infinite;
-moz-animation: AnimationName 18s ease infinite;
animation: AnimationName 18s ease infinite;
}

.headerschuin04{
position:relative;
top:-80px;
width:100%;
height:850px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 53% 93%, 50% 100%, 47% 94%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 53% 93%, 50% 100%, 47% 94%, 0% 100%);
background: linear-gradient(to bottom right, rgba(150, 198, 159, 1), rgba(124, 197, 210, 1), rgba(125, 179, 142, 1), rgba(133, 200, 158, 1), rgba(124, 197, 210, 1));
background-size: 1000% 1000%;
-webkit-animation: AnimationName 18s ease infinite;
-moz-animation: AnimationName 18s ease infinite;
animation: AnimationName 18s ease infinite;
}

.headerschuinonder{
position:absolute;
top:0px;
width:100%;
height:850px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 95%);
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 95%);
background: linear-gradient(to bottom right, rgba(44, 133, 190, 1), rgba(60, 126, 200, 1), rgba(69, 134, 156, 1), rgba(69, 97, 156, 1), rgba(37, 57, 73, 1));
background-size: 1000% 1000%;
z-index: -100;
-webkit-animation: AnimationName 18s ease infinite;
-moz-animation: AnimationName 18s ease infinite;
animation: AnimationName 18s ease infinite;
}

.headerschuinonder2{
position:absolute;
top:0px;
width:100%;
height:450px;
-webkit-clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 0% 100%);
background: linear-gradient(to bottom right, rgba(44, 133, 190, 1), rgba(60, 126, 200, 1), rgba(69, 134, 156, 1), rgba(69, 97, 156, 1), rgba(37, 57, 73, 1));
background-size: 1000% 1000%;
z-index: -200;
-webkit-animation: AnimationName 18s ease infinite;
-moz-animation: AnimationName 18s ease infinite;
animation: AnimationName 18s ease infinite;
}

.headerschuinonder3{
position:absolute;
top:0px;
width:100%;
height:450px;
-webkit-clip-path: polygon(0% 0%, 100% 8%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 8%, 100% 100%, 0% 100%);
background: linear-gradient(to bottom right, rgba(44, 133, 190, 1), rgba(60, 126, 200, 1), rgba(69, 134, 156, 1), rgba(69, 97, 156, 1), rgba(37, 57, 73, 1));
background-size: 1000% 1000%;
z-index: -200;
-webkit-animation: AnimationName 18s ease infinite;
-moz-animation: AnimationName 18s ease infinite;
animation: AnimationName 18s ease infinite;
}

.headerschuinonder4{
position:absolute;
bottom:0px;
width:100%;
height:650px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0% 100%);
background: linear-gradient(to bottom right, rgba(44, 133, 190, 1), rgba(60, 126, 200, 1), rgba(69, 134, 156, 1), rgba(69, 97, 156, 1), rgba(37, 57, 73, 1));
background-size: 1000% 1000%;
z-index: -100;
-webkit-animation: AnimationName 18s ease infinite;
-moz-animation: AnimationName 18s ease infinite;
animation: AnimationName 18s ease infinite;
}

.pep-background05 {
background: linear-gradient(to bottom right, rgba(150, 198, 159, 1), rgba(109, 185, 188, 1), rgba(109, 179, 139, 1), rgba(125, 191, 103, 1), rgba(118, 174, 177, 1));
background-size: 1000% 1000%;
-webkit-animation: AnimationName 18s ease infinite;
-moz-animation: AnimationName 18s ease infinite;
animation: AnimationName 18s ease infinite;
}

.pep-background06 {
background: linear-gradient(to bottom right, rgba(150, 198, 159, 1), rgba(124, 197, 210, 1), rgba(125, 179, 142, 1), rgba(133, 200, 158, 1), rgba(124, 197, 210, 1));
background-size: 1000% 1000%;
width: 100%;
height: 100%;
-webkit-animation: AnimationName 18s ease infinite;
-moz-animation: AnimationName 18s ease infinite;
animation: AnimationName 18s ease infinite;
}


.vorm-pep01{
-webkit-clip-path: polygon(0% 10%, 100% 0%, 100% 93%, 53% 93%, 50% 100%, 47% 93%, 0% 93%);
clip-path: polygon(0% 10%, 100% 0%, 100% 93%, 53% 93%, 50% 100%, 47% 93%, 0% 93%);
padding-top: 120px;
padding-bottom: 120px;
position:relative;
}

.vorm-pep02{
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
position:relative;
}

.vorm-pep03{
-webkit-clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 100%);
padding-top: 100px;
padding-bottom: 50px;
position:relative;
}

.schaduw-pep{
filter: drop-shadow(8px 8px 10px gray);
}

.flow-card-pep{
height:300px;
width:22%;
background-color:red;
-webkit-clip-path: polygon(0% 0%, 85% 0%, 85% 40%, 100% 50%, 85% 60%, 85% 100%, 0% 100%);
clip-path: polygon(0% 0%, 85% 0%, 85% 40%, 100% 50%, 85% 60%, 85% 100%, 0% 100%);
padding-left: 40px;
padding-right: 80px;
margin-right:3%;
margin-top:60px;
margin-bottom:0px;
}

.flow-card-pep p{
margin-top:6px;
}

.pep-cirkel p{
font-size: 16px;
}

.pep-cirkel{
position: relative;
border-radius: 50%;
border-color: white;
border-style: solid;
border-width: 2px;
top:10px;
width:30px;
height:30px;
margin-left: 39%;
margin-right: 71%;
}

.pep-borderblauw{
border-color:rgba(37, 57, 73, 1);
}

.flow-text-pep{
padding-top: 20px;
line-height:120%;
font-weight: 600;
font-size: calc(15px + (19 - 15) * ((100vw - 330px) / (1920 - 330)));
color: rgba(37, 57, 73, 1);
}

.pep-line{
border-width: 2px;
border-color: rgba(37, 57, 73, 1);
width:95%;
}

.pep-backgroundcolor-koper{
background-color: rgba(37, 57, 73, 1);
}

.pep-backgroundcolor-verkoper{
background-color: rgba(144, 191, 42, 1);
}

.pep-backgroundcolor-makelaar{
background-color: rgba(234, 147, 0, 1);
}

.pep-backgroundcolor-notbet{
background-color: rgba(150, 198, 158, 1);
}

.pep-backgroundcolor-fm{
background-color: rgba(110, 110, 110, 1);
}

.card-pep{
height:550px;
width:355px;
background-color:white;
-webkit-clip-path: polygon(0% 0%, 85% 0%, 85% 40%, 100% 50%, 85% 60%, 85% 100%, 0% 100%);
clip-path: polygon(0% 0%, 85% 0%, 85% 40%, 100% 50%, 85% 60%, 85% 100%, 0% 100%);
margin-top:20px;
margin-bottom:120px;
}

.card-pep-groot{
height:350px;
width:100%;
background-color:white;
-webkit-clip-path: polygon(0% 0%, 95% 0%, 95% 40%, 100% 50%, 95% 60%, 95% 100%, 0% 100%);
clip-path: polygon(0% 0%, 95% 0%, 95% 40%, 100% 50%, 95% 60%, 95% 100%, 0% 100%);
margin-top:90px;
margin-bottom:120px;
}

.iphonecontainer{
transform: rotate(4deg);
width:500px;
height:100%;
position: relative;
}

.iphone{
background-image: url("../assets/iphoneachter.svg");
position: absolute;
top:10px;
height:500px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.iphonescherm{
background-image: url("../assets/iphonegroen.svg");
position: absolute;
top:10px;
height:478px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: iphonescherm;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes iphonescherm {
0%  {background-image: url("../assets/iphonegroen.svg");}
33%  {background-image: url("../assets/iphonegroen.svg");}
34%  {background-image: url("../assets/iphoneoranje.svg");}
66%  {background-image: url("../assets/iphoneoranje.svg");}
67%  {background-image: url("../assets/iphonegrijsgroen.svg");}
100% {background-image: url("../assets/iphonegrijsgroen.svg");}
}
@-webkit-keyframes  iphonescherm {
0%  {background-image: url("../assets/iphonegroen.svg");}
33%  {background-image: url("../assets/iphonegroen.svg");}
34%  {background-image: url("../assets/iphoneoranje.svg");}
66%  {background-image: url("../assets/iphoneoranje.svg");}
67%  {background-image: url("../assets/iphonegrijsgroen.svg");}
100% {background-image: url("../assets/iphonegrijsgroen.svg");}
}

.iphoneglans{
background-image: url("../assets/iphoneglans.svg");
position: absolute;
top:10px;
height:478px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.illucontainer{
position: absolute;
left:140px;
top:10px;
height:478px;
width:220px;
overflow: hidden;
}

.illubestelling{
background-image: url("../assets/betalingeuro.svg");
position: absolute;
top:220px;
left:0px;
height:120px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 50px 0px;
animation-name: illubestelling;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes illubestelling {
0%  {background-image: none; background-position: -150px 0px;}
15%  {background-image: url("../assets/betalingeuro.svg"); background-position: -150px 0px;}
20%  {background-image: url("../assets/betalingeuro.svg"); background-position: 50px 0px;}
33%  {background-image: url("../assets/betalingeuro.svg"); background-position: 50px 0px;}
34%  {background-image: none; background-position: 50px 0px;}
100%  {background-image: none; ;background-position: 50px 0px;}
}
@-webkit-keyframes  illubestelling {
0%  {background-image: none; background-position: -150px 0px;}
15%  {background-image: url("../assets/betalingeuro.svg"); background-position: -150px 0px;}
20%  {background-image: url("../assets/betalingeuro.svg"); background-position: 50px 0px;}
33%  {background-image: url("../assets/betalingeuro.svg"); background-position: 50px 0px;}
34%  {background-image: none; background-position: 50px 0px;}
100%  {background-image: none; ;background-position: 50px 0px;}
}

.illulevering{
background-image: url("../assets/leveringauto.svg");
position: absolute;
top:245px;
left:0px;
height:65px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 33px 0px;
animation-name: leveringauto;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes leveringauto {
0%  {background-image: none; background-position: 33px 0px;}
52%  {background-image: none; background-position: 33px 0px;}
53%  {background-image: url("../assets/leveringauto.svg");background-position: 33px 0px;}
60%  {background-image: url("../assets/leveringauto.svg");background-position: 33px 0px;}
66%  {background-image: url("../assets/leveringauto.svg");background-position: 450px 0px;}
67%  {background-image: none; background-position: 33px 0px;}
100%  {background-image: none; background-position: 33px 0px;}
}
@-webkit-keyframes  leveringauto {
0%  {background-image: none; background-position: 33px 0px;}
52%  {background-image: none; background-position: 33px 0px;}
53%  {background-image: url("../assets/leveringauto.svg");background-position: 33px 0px;}
60%  {background-image: url("../assets/leveringauto.svg");background-position: 33px 0px;}
66%  {background-image: url("../assets/leveringauto.svg");background-position: 450px 0px;}
67%  {background-image: none; background-position: 33px 0px;}
100%  {background-image: none; background-position: 33px 0px;}
}

.illubetaling{
background-image: url("../assets/betalingvierkant.svg");
position: absolute;
top:220px;
left:0px;
height:120px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 52px 0px;
animation-name: betalingvierkant;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes betalingvierkant {
0%  {background-image: none;}
85%  {background-image: none;}
86%  {background-image: url("../assets/betalingvierkant.svg")}
99%  {background-image: url("../assets/betalingvierkant.svg")}
100%  {background-image: none;}
}
@-webkit-keyframes  betalingvierkant {
0%  {background-image: none;}
85%  {background-image: none;}
86%  {background-image: url("../assets/betalingvierkant.svg")}
99%  {background-image: url("../assets/betalingvierkant.svg")}
100%  {background-image: none;}
}

.illubetalingvtje{
background-image: url("../assets/betalingvtje.svg");
position: absolute;
top:175px;
left:0px;
height:170px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 70px 0px;
animation-name: betalingvtje;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes betalingvtje {
0%  {background-image: none;}
90%  {background-image: none;}
91%  {background-image: url("../assets/betalingvtje.svg");}
99%  {background-image: url("../assets/betalingvtje.svg");}
100%  {background-image: none;}
}
@-webkit-keyframes  betalingvtje {
0%  {background-image: none;}
90%  {background-image: none;}
91%  {background-image: url("../assets/betalingvtje.svg");}
99%  {background-image: url("../assets/betalingvtje.svg");}
100%  {background-image: none;}
}

.iphonetext{
background-image: url("../assets/bestelling.svg");
position: absolute;
top:100px;
height:25px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: iphonetext;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes iphonetext {
0%  {background-image: none;}
5%  {background-image: url("../assets/bestelling.svg");}
33%  {background-image: url("../assets/bestelling.svg");}
34%  {background-image: none;}
39%  {background-image: url("../assets/levering.svg");}
66%  {background-image: url("../assets/levering.svg");}
67%  {background-image: none;}
72%  {background-image: url("../assets/betaling.svg");}
100% {background-image: url("../assets/betaling.svg");}
}
@-webkit-keyframes  iphonetext {
0%  {background-image: none;}
5%  {background-image: url("../assets/bestelling.svg");}
33%  {background-image: url("../assets/bestelling.svg");}
34%  {background-image: none;}
39%  {background-image: url("../assets/levering.svg");}
66%  {background-image: url("../assets/levering.svg");}
67%  {background-image: none;}
72%  {background-image: url("../assets/betaling.svg");}
100% {background-image: url("../assets/betaling.svg");}
}

.iphoneonderschrift{
background-image: url("../assets/betaald.svg");
position: absolute;
top:138px;
height:18px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: iphoneonderschrift;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes iphoneonderschrift {
0%  {background-image: none;}
20%  {background-image: url("../assets/betaald.svg");}
33%  {background-image: url("../assets/betaald.svg");}
34%  {background-image: none;}
54%  {background-image: url("../assets/geaccepteerd.svg");}
66%  {background-image: url("../assets/geaccepteerd.svg");}
67%  {background-image: none;}
87%  {background-image: url("../assets/ontvangen.svg");}
100% {background-image: url("../assets/ontvangen.svg");}
}
@-webkit-keyframes  iphoneonderschrift {
0%  {background-image: none;}
20%  {background-image: url("../assets/betaald.svg");}
33%  {background-image: url("../assets/betaald.svg");}
34%  {background-image: none;}
54%  {background-image: url("../assets/geaccepteerd.svg");}
66%  {background-image: url("../assets/geaccepteerd.svg");}
67%  {background-image: none;}
87%  {background-image: url("../assets/ontvangen.svg");}
100% {background-image: url("../assets/ontvangen.svg");}
}

.kluiscontainer{
width: 100%;
height: 430px;
position: absolute;
top:0px;
left:100px;
overflow: hidden;
}

.kluis{
background-image: url("../assets/kluis.svg");
width: 100%;
height: 430px;
background-repeat: no-repeat;
position: absolute;
top:0px;
left:-1px;
}

.kluisdeur{
background-image: url("../assets/kluisdeur.svg");
width: 100%;
height: 380px;
background-repeat: no-repeat;
position: absolute;
top:20px;
left:122px;
}

.bootautocamper{
background-image: url("../assets/bootcon.svg");
width: 310px;
height: 100%;
position:absolute;
top:130px;
right:-310px;
opacity: 100%;
background-repeat: no-repeat;
animation-name: bootautocamper;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes bootautocamper {
0%  {background-image: url("../assets/bootcon.svg");right:-310px;opacity: 0%;}
12%  {background-image: url("../assets/bootcon.svg");right:-310px;opacity: 100%;}
20%  {background-image: url("../assets/bootcon.svg");right:590px;opacity: 100%;}
21%  {background-image: url("../assets/bootcon.svg");right:590px;opacity: 0%;}
34%  {background-image: none;}
35%  {background-image: url("../assets/autocon.svg");right:-310px;opacity: 0%;}
45%  {background-image: url("../assets/autocon.svg");right:-310px;opacity: 100%;}
53%  {background-image: url("../assets/autocon.svg");right:590px;opacity: 100%;}
54%  {background-image: url("../assets/autocon.svg");right:590px;opacity: 0%;}
67%  {background-image: none;}
68%  {background-image: url("../assets/campercon.svg");right:-310px;opacity: 0%;}
76%  {background-image: url("../assets/campercon.svg");right:-310px;opacity: 100%;}
86%  {background-image: url("../assets/campercon.svg");right:590px;opacity: 100%;}
87%  {background-image: url("../assets/campercon.svg");right:590px;opacity: 0%;}
100%  {background-image: url("../assets/campercon.svg");right:590px;opacity: 0%;}
}
@-webkit-keyframes  bootautocamper {
0%  {background-image: url("../assets/bootcon.svg");right:-310px;opacity: 0%;}
10%  {background-image: url("../assets/bootcon.svg");right:-310px;opacity: 100%;}
20%  {background-image: url("../assets/bootcon.svg");right:590px;opacity: 100%;}
21%  {background-image: url("../assets/bootcon.svg");right:590px;opacity: 0%;}
34%  {background-image: none;}
35%  {background-image: url("../assets/autocon.svg");right:-310px;opacity: 0%;}
43%  {background-image: url("../assets/autocon.svg");right:-310px;opacity: 100%;}
53%  {background-image: url("../assets/autocon.svg");right:590px;opacity: 100%;}
54%  {background-image: url("../assets/autocon.svg");right:590px;opacity: 0%;}
67%  {background-image: none;}
68%  {background-image: url("../assets/campercon.svg");right:-310px;opacity: 0%;}
76%  {background-image: url("../assets/campercon.svg");right:-310px;opacity: 100%;}
86%  {background-image: url("../assets/campercon.svg");right:590px;opacity: 100%;}
87%  {background-image: url("../assets/campercon.svg");right:590px;opacity: 0%;}
100%  {background-image: url("../assets/campercon.svg");right:590px;opacity: 0%;}
}

.euroblauw{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 100px;
position:absolute;
top:155px;
left:0px;
opacity: 100%;
background-repeat: no-repeat;
animation-name: euroblauw;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes euroblauw {
0%  {left:0px; opacity: 0%;}
2%  {left:0px; opacity: 100%;}
10%  {left:150px; opacity: 100%;}
22%  {left:150px; opacity: 100%;}
26%  {left:150px; opacity: 100%;}
33%  {left:750px; opacity: 0%;}
34%  {left:0px; opacity: 0%;}
36%  {left:0px; opacity: 100%;}
44%  {left:150px; opacity: 100%;}
55%  {left:150px; opacity: 100%;}
59%  {left:150px; opacity: 100%;}
66%  {left:750px; opacity: 0%;}
67%  {left:0px; opacity: 0%;}
69%  {left:0px; opacity: 100%;}
77%  {left:150px; opacity: 100%;}
88%  {left:150px; opacity: 100%;}
92%  {left:150px; opacity: 100%;}
99%  {left:750px; opacity: 0%;}
100%  {left:0px; opacity: 0%;}
}
@-webkit-keyframes  euroblauw {
0%  {left:0px; opacity: 0%;}
2%  {left:0px; opacity: 100%;}
10%  {left:150px; opacity: 100%;}
22%  {left:150px; opacity: 100%;}
26%  {left:150px; opacity: 100%;}
33%  {left:750px; opacity: 0%;}
34%  {left:0px; opacity: 0%;}
36%  {left:0px; opacity: 100%;}
44%  {left:150px; opacity: 100%;}
55%  {left:150px; opacity: 100%;}
59%  {left:150px; opacity: 100%;}
66%  {left:750px; opacity: 0%;}
67%  {left:0px; opacity: 0%;}
69%  {left:0px; opacity: 100%;}
77%  {left:150px; opacity: 100%;}
88%  {left:150px; opacity: 100%;}
92%  {left:150px; opacity: 100%;}
99%  {left:750px; opacity: 0%;}
100%  {left:0px; opacity: 0%;}
}

.kluisdraaislot{
background-image: url("../assets/kluisdraaislot.svg");
width: 100%;
height: 70px;
position:absolute;
top:60px;
left:230px;
background-repeat: no-repeat;
}

.kluisslot{
background-image: url("../assets/kluisslot.svg");
width: 100%;
height: 210px;
position:absolute;
top:165px;
left:158px;
-ms-transform: rotate(0deg); /* IE 9 */
-ms-transform-origin: 105px 103px; /* IE 9 */
transform: rotate(0deg);
transform-origin: 105px 103px;
background-repeat: no-repeat;
animation-name: kluisslot;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes kluisslot {
0%  {transform: rotate(0deg);}
10%  {transform: rotate(0deg);}
14%  {transform: rotate(360deg);}
15%  {transform: rotate(360deg);}
20%  {transform: rotate(360deg);}
24%  {transform: rotate(720deg);}
25%  {transform: rotate(720deg);}
33%  {transform: rotate(720deg);}
43%  {transform: rotate(720deg);}
47%  {transform: rotate(1080deg);}
48%  {transform: rotate(1080deg);}
53%  {transform: rotate(1080deg);}
57%  {transform: rotate(1440deg);}
58%  {transform: rotate(1440deg);}
66%  {transform: rotate(1440deg);}
76%  {transform: rotate(1440deg);}
80%  {transform: rotate(1800deg);}
81%  {transform: rotate(1800deg);}
86%  {transform: rotate(1800deg);}
90%  {transform: rotate(2160deg);}
91%  {transform: rotate(2160deg);}
100%  {transform: rotate(2160deg);}
}
@-webkit-keyframes  kluisslot {
0%  {transform: rotate(0deg);}
10%  {transform: rotate(0deg);}
14%  {transform: rotate(360deg);}
15%  {transform: rotate(360deg);}
20%  {transform: rotate(360deg);}
24%  {transform: rotate(720deg);}
25%  {transform: rotate(720deg);}
33%  {transform: rotate(720deg);}
43%  {transform: rotate(720deg);}
47%  {transform: rotate(1080deg);}
48%  {transform: rotate(1080deg);}
53%  {transform: rotate(1080deg);}
57%  {transform: rotate(1440deg);}
58%  {transform: rotate(1440deg);}
66%  {transform: rotate(1440deg);}
76%  {transform: rotate(1440deg);}
80%  {transform: rotate(1800deg);}
81%  {transform: rotate(1800deg);}
86%  {transform: rotate(1800deg);}
90%  {transform: rotate(2160deg);}
91%  {transform: rotate(2160deg);}
100%  {transform: rotate(2160deg);}
}

.kettingachter{
width: 350px;
height: 350px;
border-radius: 50%;
position: relative;
margin-top: 70px;
}

.ketting{
background-image: url("../assets/autocon.svg");
width: 375px;
height: 375px;
background-repeat: no-repeat;
background-size: 65% 65%;
background-position: 50px 50px;;
}

.ketting2{
background-image: url("../assets/bootcon.svg");
width: 375px;
height: 375px;
background-repeat: no-repeat;
background-size: 65% 65%;
background-position: 50px 50px;;
}

.appphonecontainer{
width: 355px;
height: 400px;
position: relative;
top:-30px;
transform: rotate(4deg);
}

.appphone{
background-image: url("../assets/appphone.svg");
width: 350px;
height: 600px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: top;;
}

.appa{
background-image: url("../assets/appa.svg");
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:148px;
left:80px;
animation-name: appa;
animation-duration: 16s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes appa {
0%  {background-image: none;}
12%  {background-image: url("../assets/appa.svg");opacity: 100%;}
90%  {background-image: url("../assets/appa.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  appa {
0%  {background-image: none;}
12%  {background-image: url("../assets/appa.svg");opacity: 100%;}
90%  {background-image: url("../assets/appa.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.appb{
background-image: url("../assets/appb.svg");
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:148px;
left:114px;
animation-name: appb;
animation-duration: 16s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes appb {
0%  {background-image: none;}
24%  {background-image: url("../assets/appb.svg");opacity: 100%;}
90%  {background-image: url("../assets/appb.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  appb {
0%  {background-image: none;}
24%  {background-image: url("../assets/appb.svg");opacity: 100%;}
90%  {background-image: url("../assets/appb.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.appc{
background-image: url("../assets/appc.svg");
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:148px;
left:147px;
animation-name: appc;
animation-duration: 16s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes appc {
0%  {background-image: none;}
36%  {background-image: url("../assets/appc.svg");opacity: 100%;}
90%  {background-image: url("../assets/appc.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  appc {
0%  {background-image: none;}
36%  {background-image: url("../assets/appc.svg");opacity: 100%;}
90%  {background-image: url("../assets/appc.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.app1{
background-image: url("../assets/app1.svg");
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:148px;
left:177px;
animation-name: app1;
animation-duration: 16s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes app1 {
0%  {background-image: none;}
48%  {background-image: url("../assets/app1.svg");opacity: 100%;}
90%  {background-image: url("../assets/app1.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  app1 {
0%  {background-image: none;}
48%  {background-image: url("../assets/app1.svg");opacity: 100%;}
90%  {background-image: url("../assets/app1.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.app2{
background-image: url("../assets/app2.svg");
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:148px;
left:213px;
animation-name: app2;
animation-duration: 16s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes app2 {
0%  {background-image: none;}
60%  {background-image: url("../assets/app2.svg");opacity: 100%;}
90%  {background-image: url("../assets/app2.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  app2 {
0%  {background-image: none;}
60%  {background-image: url("../assets/app2.svg");opacity: 100%;}
90%  {background-image: url("../assets/app2.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.app3{
background-image: url("../assets/app3.svg");
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:148px;
left:247px;
animation-name: app3;
animation-duration: 16s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes app3 {
0%  {background-image: none;}
72%  {background-image: url("../assets/app3.svg");opacity: 100%;}
90%  {background-image: url("../assets/app3.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  app3 {
0%  {background-image: none;}
72%  {background-image: url("../assets/app3.svg");opacity: 100%;}
90%  {background-image: url("../assets/app3.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.apphand{
background-image: url("../assets/apphand.svg");
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:200px;
left:85px;
animation-name: apphand;
animation-duration: 16s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes apphand {
0%  {background-image: none;}
84%  {background-image: url("../assets/apphand.svg");opacity: 100%;}
90%  {background-image: url("../assets/apphand.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  apphand {
0%  {background-image: none;}
84%  {background-image: url("../assets/apphand.svg");opacity: 100%;}
90%  {background-image: url("../assets/apphand.svg");opacity: 100%;}
95%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.appballon{
background-image: url("../assets/vtje.svg");
width: 245px;
height: 245px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;;
position: absolute;
top:-100px;
left:-65px;
filter: drop-shadow(4px 4px 10px grey);
transform: rotate(-4deg);
animation-name: appballon;
animation-duration: 16s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes appballon {
0%  {background-image: none;}
94%  {background-image: url("../assets/vtje.svg");opacity: 100%;}
95%  {background-image: url("../assets/vtje.svg");opacity: 100%;}
99%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  appballon {
0%  {background-image: none;}
94%  {background-image: url("../assets/vtje.svg");opacity: 100%;}
95%  {background-image: url("../assets/vtje.svg");opacity: 100%;}
99%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.weegschaalachter{
width: 300px;
height: 300px;
border-radius: 50%;
position: relative;
margin-top: -35px;
}

.weegschaal{
background-image: url("../assets/weegschaal.svg");
width: 320px;
height: 320px;
background-repeat: no-repeat;
background-size: 65% 65%;
background-position: 55px 50px;
}

.euroblauwcontainer{
width: 180px;
height: 270px;
position:absolute;
top:10px;
left:0px;
opacity: 100%;
overflow: hidden;
}

.euroblauw2{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 105px;
position:absolute;
top:100px;
left:0px;
opacity: 100%;
background-repeat: no-repeat;
animation-name: euroblauw2;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes euroblauw2 {
0%  {left:0px; opacity: 0%;}
5%  {left:0px; opacity: 100%;}
20%  {left:0px; opacity: 100%;}
30%  {left:200px; opacity: 100%;}
31%  {left:200px; opacity: 0%;}
100%  {left:200px; opacity: 0%;}
}
@-webkit-keyframes  euroblauw2 {
0%  {left:0px; opacity: 0%;}
5%  {left:0px; opacity: 100%;}
20%  {left:0px; opacity: 100%;}
30%  {left:200px; opacity: 100%;}
31%  {left:200px; opacity: 0%;}
100%  {left:200px; opacity: 0%;}
}

.eurogroencontainer{
width: 100%;
height: 270px;
position:absolute;
top:30px;
left:145px;
}

.eurogroen{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 100px;
position:absolute;
top:30px;
left:0px;
opacity: 100%;
background-repeat: no-repeat;
animation-name: eurogroen;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes eurogroen {
0%  {left:0px; opacity: 0%;}
35%  {left:0px; opacity: 0%;}
36%  {left:0px; opacity: 100%;}
71%  {left:760px; opacity: 100%;}
100%  {left:760px; opacity: 0%;}
}
@-webkit-keyframes  eurogroen {
0%  {left:0px; opacity: 0%;}
35%  {left:0px; opacity: 0%;}
36%  {left:0px; opacity: 100%;}
71%  {left:760px; opacity: 100%;}
100%  {left:760px; opacity: 0%;}
}

.eurogroen2{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 100px;
position:absolute;
top:140px;
left:300px;
opacity: 100%;
background-repeat: no-repeat;
animation-name: eurogroen2;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes eurogroen2 {
0%  {left:0px; opacity: 0%;}
35%  {left:0px; opacity: 0%;}
36%  {left:0px; opacity: 100%;}
75%  {left:760px; opacity: 100%;}
100%  {left:760px; opacity: 0%;}
}
@-webkit-keyframes  eurogroen2 {
0%  {left:0px; opacity: 0%;}
35%  {left:0px; opacity: 0%;}
36%  {left:0px; opacity: 100%;}
75%  {left:760px; opacity: 100%;}
100%  {left:760px; opacity: 0%;}
}

.grijsvlak{
background-image: url("../assets/grijsvlak.svg");
width: 100%;
height: 320px;
position:absolute;
top:10px;
left:145px;
background-repeat: no-repeat;
}

.kettingblauw{
background-image: url("../assets/ketting.svg");
width: 100%;
height: 160px;
position:absolute;
top:70px;
left:111px;
background-repeat: no-repeat;
}

.kettinggroen{
background-image: url("../assets/kettinggroen.svg");
width: 100%;
height: 160px;
position:absolute;
top:70px;
left:111px;
opacity: 0%;
background-repeat: no-repeat;
animation-name: kettinggroen;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes kettinggroen {
0%  {opacity: 0%;}
30%  {opacity: 0%;}
35%  {opacity: 100%;}
40%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  kettinggroen {
0%  {opacity: 0%;}
30%  {opacity: 0%;}
35%  {opacity: 100%;}
40%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.kyccontainer{
width: 300px;
height: 400px;
position: relative;
top:30px;
}

.blauwvierkant{
background-image: url("../assets/blauwvierkant.svg");
width: 300px;
height: 400px;
background-repeat: no-repeat;
background-position: top;;
}

.vingerafdruk{
background-image: url("../assets/vingerafdruk.svg");
width: 130px;
height: 130px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:80px;
left:85px;
animation-name: vingerafdruk;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vingerafdruk {
0%  {opacity: 0%;}
2%  {opacity: 100%;}
25%  {opacity: 100%;}
26%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  vingerafdruk {
0%  {opacity: 0%;}
2%  {opacity: 100%;}
25%  {opacity: 100%;}
26%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.kycvtje{
background-image: url("../assets/betalingvtje.svg");
width: 175px;
height: 175px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:40px;
left:80px;
animation-name: kycvtje;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes kycvtje {
0%  {opacity: 0%;}
25%  {opacity: 0%;}
27%  {opacity: 100%;}
50%  {opacity: 100%;}
51%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  kycvtje {
0%  {opacity: 0%;}
25%  {opacity: 0%;}
27%  {opacity: 100%;}
50%  {opacity: 100%;}
51%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.kyceuro{
background-image: url("../assets/euroteken.svg");
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:100px;
left:95px;
animation-name: kyceuro;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes kyceuro {
0%  {opacity: 0%;}
50%  {opacity: 0%;}
52%  {opacity: 100%;}
75%  {opacity: 100%;}
76%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  kyceuro {
0%  {opacity: 0%;}
50%  {opacity: 0%;}
52%  {opacity: 100%;}
75%  {opacity: 100%;}
76%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.spacer{
height:60px;
}

.spacerklein{
height:12px;
}

.spacerklein2{
height:40px;
}

.text-card-pep{
margin:30px;
margin-top: 25px;
margin-right:90px;
height: 525px;
}

.pep-centreer{
margin-left: 50%;
margin-right: 50%;
}

.uk-background-muted {
background-color: rgb(235,235,235);
}

.uk-navbar-nav > li > a{
font-size:16px;
color:white;
}

.uk-nav-header {
font-size: 16px;
}

.pep-text-white{
color:white;
}

.text-groen-pep{
color:rgba(150,198,159, 1);
}

.footer {
display: block;
width: 100%;
background: rgba(37, 57, 73, 1);
}

.pep-border-bottom{
border-bottom: 1px solid white;
}

.pep-padding{
padding-top: 70px;
}

.pep-position-relative{
position: relative;
}

.pep-overflow{
overflow: hidden;
}

.pep-padding-bottom{
padding-bottom: 140px;
}

.pep-margin-top{
margin-top:30px;
padding-bottom:70px;
}

.pep-margin01{
  margin-left:0px;
}