@media  (min-width: 1px) and (max-width: 639px) {

video{
padding-bottom: 25px;
}

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

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

h3{
margin-bottom:10px;
margin-top: 10px;
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(14px + (32 - 14) * ((100vw - 330px) / (1920 - 330)));
font-weight: 700;
margin-bottom:5px;
margin-top:5px;
}

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

.pep-width-639{
width:95%;
margin-left:auto;
margin-right: auto;
}

.pep-textwidth-639{
width:90%;
margin-left:auto;
margin-right: auto;
}

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

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

.pep-button-contactheader {
border-radius: 8px;
background-color: rgba(149, 198, 158, 0);
padding:10px;
padding-top: 15px;
padding-bottom: 15px;
line-height: 5px;
margin-right: 10px;
margin-top: 0px;
border: solid white 2px;
}

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

.pep-button-contactheader:hover {
margin-top: 0px;
border-radius: 8px;
line-height: 5px;
padding-top: 15px;
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: 13px;
}

.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;
}

#sidebar{
  width: 100%;
  top: 80px;
  height: 340px;
}

.pep-navbar-klein{
  height:80px;
  width:100%;
  position:relative;
}

.pep-toggle-position{
  right:0px;
  position:absolute;
}

.pep-logo-klein{
  height:40px;
  width:190px;
  background-image: url("../assets/nblogow.svg");
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
}

.pep-offcanvas-bar{
  background-color: rgba(37, 57, 73, 1);
  height:340px;
  width:100%;
  padding-left: 45px;
  padding-top: 65px;
  top:-80px;
}

.pep-button-onoffbro {
display: none;
}

.card-pep{
height:235px;
width:100%;
background-color:white;
-webkit-clip-path: polygon(0% 0%, 96% 0%, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0% 100%);
clip-path: polygon(0% 0%, 96% 0%, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0% 100%);
margin-top:0px;
margin-bottom:30px;
margin-left:auto;
margin-right:auto;
}

.text-card-pep{
margin-left:20px;
margin-right:30px;
height: 235px;
}

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

.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: 9px;
}

.padding-top-pep{
padding-top: 20px;
padding-right: 0px;
}

.anicontainer-pep{
display:none;
}

.computer-pep{
display:none;
}

.computerscherm{
display:none;
}

.auto-pep{
display:none;
}

.wielrood1{
display:none;
}

.wielrood2{
display:none;
}

.horloge-pep{
display:none;
}

.wijzer{
display:none;
}

.boot-pep{
display:none;
}

.vlag{
display:none;
}

.laptop-pep{
display:none;
}

.roodscherm{
display:none;
}

.wifi{
display:none;
}

.buyknop{
display:none;
}

.uk-logo-logo{
background-image: url("../assets/logoNotarieelBetalennieuwwit.png");
width: 120px;
min-height: 44px;
margin-top: 15px;
background-size: 100%;
background-repeat: no-repeat;
}

.pep-flex-mob{
flex-direction: column;
}

.pep-flex-mob-rev{
flex-direction: column-reverse;
position:relative;
top:-40px;
}

.pep-float-mob{
float: none;
margin-left: 0px;
margin-right: 0px;
}

.bureau-illu{
background-image: url("../assets/bureau.svg");
height:300px;
width:300px;
top:0px;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.wolkje1{
background-image: url("../assets/wolkje1.svg");
height:30px;
width:30px;
position: absolute;
top:35px;
left:220px;
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:60px;}
50%  {opacity: 0.6; top:40px;}
100%  {opacity: 0; top:-10px;}
}
@-webkit-keyframes  wolkje1 {
0%  {opacity: 0; top:60px;}
50%  {opacity: 0.6; top:40px;}
100%  {opacity: 0; top:-10px;}
}

.wolkje2{
background-image: url("../assets/wolkje2.svg");
height:40px;
width:40px;
position: absolute;
top:35px;
left:218px;
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:35px;
width:35px;
position: absolute;
top:35px;
left:213px;
background-repeat: no-repeat;
background-size:contain;
animation-name: wolkje1;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoecontainer{
height:210px;
width:100%;
display:block;
margin-left: auto;
margin-right: auto;
padding-bottom: 0px;
}

.hoe1{
background-image: url("../assets/hoe1.svg");
height:200px;
width:200px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: hoe1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoe1 {
0%  {opacity: 100%;}
19%  {opacity: 100%;}
20%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  hoe1 {
0%  {opacity: 100%;}
19%  {opacity: 100%;}
20%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.hoe2{
background-image: url("../assets/hoe2.svg");
height:200px;
width:100%;
margin-bottom:0px;
position: absolute;
top:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: hoe2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoe2 {
0%  {opacity: 0%;}
19%  {opacity: 0%;}
20%  {opacity: 100%;}
39%  {opacity: 100%;}
40%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  hoe2 {
0%  {opacity: 0%;}
19%  {opacity: 0%;}
20%  {opacity: 100%;}
39%  {opacity: 100%;}
40%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.hoe3{
background-image: url("../assets/hoe3.svg");
height:200px;
width:100%;
margin-bottom:0px;
position: absolute;
top:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: hoe3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoe3 {
0%  {opacity: 0%;}
39%  {opacity: 0%;}
40%  {opacity: 100%;}
59%  {opacity: 100%;}
60%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  hoe3 {
0%  {opacity: 0%;}
39%  {opacity: 0%;}
40%  {opacity: 100%;}
59%  {opacity: 100%;}
60%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.hoe4{
background-image: url("../assets/hoe4.svg");
height:200px;
width:100%;
margin-bottom:0px;
position: absolute;
top:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: hoe4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoe4 {
0%  {opacity: 0%;}
59%  {opacity: 0%;}
60%  {opacity: 100%;}
79%  {opacity: 100%;}
80%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  hoe4 {
0%  {opacity: 0%;}
59%  {opacity: 0%;}
60%  {opacity: 100%;}
79%  {opacity: 100%;}
80%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.hoe5{
background-image: url("../assets/hoe5.svg");
height:200px;
width:100%;
margin-bottom:0px;
position: absolute;
top:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: hoe5;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoe5 {
0%  {opacity: 0%;}
79%  {opacity: 0%;}
80%  {opacity: 100%;}
100%  {opacity: 100%;}
}
@-webkit-keyframes  hoe5 {
0%  {opacity: 0%;}
79%  {opacity: 0%;}
80%  {opacity: 100%;}
100%  {opacity: 100%;}
}

.cirkelcontainer{
width:640;
display:block;
margin-left: auto;
margin-right: auto;
position: relative;
}

.hoecirkel1{
display:none;
}

.hoecirkel2{
display:none;
}

.hoecirkel3{
display:none;
}

.hoecirkel4{
display:none;
}

.hoecirkel5{
display:none;
}

.hk1{
color:rgba(197, 131, 153, 1);
animation-name: hk1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk2{
color:rgba(121, 184, 169, 1);
animation-name: hk2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk3{
color:rgba(122, 163, 182, 1);
animation-name: hk3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk4{
color:rgba(202, 158, 171, 1);
animation-name: hk4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk5{
color:rgba(229, 190, 96, 1);
animation-name: hk5;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

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

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

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

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

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

.onlineillu{
display: none;
}

.offlineillu{
display: none;
}

.brokerillu{
display: none;
}

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

.cirkelverloop{
background-image: url("../assets/cirkelverloop.svg");
position: absolute;
top:60px;
right:35%;
height:200px;
width:200px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: cirkelverloop;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.carnextillu{
background-image: url("../assets/carnextilluvrij.png");
position: absolute;
top:135px;
height:170px;
width:220px;
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:-225px;}
25%  {right:25%;}
75%  {right:25%;}
100%  {right:110%;}
}
@-webkit-keyframes  carnexttest {
0%  {right:-225px;}
25%  {right:25%;}
75%  {right:25%;}
100%  {right:110%;}
}

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

.backwheel{
background-image: url("../assets/wiel.png");
position: absolute;
top:89px;
right:21px;
height:41px;
width:41px;
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:45px;
right:49.7%;
height:30px;
width:30px;
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;
}


.textwolkje{
background-image: url("../assets/vtje.svg");
position: absolute;
top:80px;
right:45%;
height:100px;
width:100px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: textwolkje;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.pep-button-onoffbro {
margin: auto;
padding:5px;
line-height: 15px;
width:80%;
position: absolute;
bottom:25px;
left:0px;
right:0px;
}

.landschap{
background-image: url("../assets/landschap.svg");
height:200px;
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:140px;
right:-115px;
height:105px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.vlam1{
background-image: url("../assets/vlam1.svg");
position: absolute;
top:150px;
right:-110px;
height:49px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam1kl;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam1kl {
0%  {opacity: 0; top:150px;}
25%  {opacity: 1; top:145px;}
50%  {opacity: 0.7; top:140px;}
75%  {opacity: 0.9; top:135px;}
100%  {opacity: 0; top:130px;}
}
@-webkit-keyframes  vlam1kl {
0%  {opacity: 0; top:150px;}
25%  {opacity: 1; top:145px;}
50%  {opacity: 0.7; top:140px;}
75%  {opacity: 0.9; top:135px;}
100%  {opacity: 0; top:130px;}
}

.vlam2{
background-image: url("../assets/vlam2.svg");
position: absolute;
top:252px;
right:-115px;
height:49px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam2kl;
animation-duration: 0.9s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam2kl {
0%  {opacity: 0; top:155px;}
25%  {opacity: 1; top:149px;}
50%  {opacity: 0.7; top:143px;}
75%  {opacity: 0.9; top:137px;}
100%  {opacity: 0; top:131px;}
}
@-webkit-keyframes  vlam2kl {
0%  {opacity: 0; top:155px;}
25%  {opacity: 1; top:149px;}
50%  {opacity: 0.7; top:143px;}
75%  {opacity: 0.9; top:137px;}
100%  {opacity: 0; top:131px;}
}

.vlam3{
background-image: url("../assets/vlam3.svg");
position: absolute;
top:245px;
right:-120px;
height:49px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam3kl;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam3kl {
0%  {opacity: 0; top:149px;}
25%  {opacity: 1; top:143px;}
50%  {opacity: 0.7; top:137px;}
75%  {opacity: 1; top:131px;}
100%  {opacity: 0; top:125px;}
}
@-webkit-keyframes  vlam3kl {
0%  {opacity: 0; top:149px;}
25%  {opacity: 1; top:143px;}
50%  {opacity: 0.7; top:137px;}
75%  {opacity: 1; top:131px;}
100%  {opacity: 0; top:125px;}
}

.vlam4{
background-image: url("../assets/vlam4.svg");
position: absolute;
top:238px;
right:-125px;
height:49px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam4kl;
animation-duration: 1.3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam4kl {
0%  {opacity: 0; top:155px;}
25%  {opacity: 1; top:148px;}
50%  {opacity: 0.7; top:141px;}
75%  {opacity: 1; top:134px;}
100%  {opacity: 0; top:127px;}
}
@-webkit-keyframes  vlam4kl {
0%  {opacity: 0; top:155px;}
25%  {opacity: 1; top:148px;}
50%  {opacity: 0.7; top:141px;}
75%  {opacity: 1; top:134px;}
100%  {opacity: 0; top:127px;}
}

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

.schermslot{
display: none;
}

.headerschuin01{
position:relative;
top:-80px;
width:100%;
height:490px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 56% 95%, 50% 100%, 44% 97%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 56% 94%, 50% 100%, 44% 95.5%, 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:490px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 56% 95%, 50% 100%, 44% 97%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 56% 94%, 50% 100%, 44% 95.5%, 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:490px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 56% 95%, 50% 100%, 44% 97%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 56% 94%, 50% 100%, 44% 95.5%, 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:490px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 56% 95%, 50% 100%, 44% 97%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 56% 94%, 50% 100%, 44% 95.5%, 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:490px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 92%);
clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 92%);
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% 5%, 100% 0%, 100% 97%, 55% 97%, 50% 100%, 45% 97%, 0% 97%);
clip-path: polygon(0% 5%, 100% 0%, 100% 97%, 56% 97%, 50% 100%, 44% 97%, 0% 97%);
padding-top: 60px;
padding-bottom: 60px;
position:relative;
}

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

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

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

.flow-card-pep{
height:255px;
width:23%;
background-color:red;
-webkit-clip-path: polygon(0% 0%, 92% 0%, 92% 46%, 100% 50%, 92% 54%, 92% 100%, 0% 100%);
clip-path: polygon(0% 0%, 92% 0%, 92% 46%, 100% 50%, 92% 54%, 92% 100%, 0% 100%);
padding-left: 13px;
padding-right: 25px;
margin-right:1%;
margin-top:35px;
margin-bottom:0px;
}

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

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

.pep-cirkel{
position: relative;
border-radius: 50%;
border-color: white;
border-style: solid;
border-width: 2px;
top:8px;
width:25px;
height:25px;
margin-left: 37%;
margin-right: 63%;
}

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

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

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

.card-pep-groot{
height:210px;
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:50px;
margin-bottom:60px;
}

.iphonecontainer{
display:none;
}

.iphone{
display:none;
}

.iphonescherm{
display:none;
}

.iphoneglans{
display:none;
}

.illucontainer{
display:none;
}

.illubestelling{
display:none;
}

.illulevering{
display:none;
}

.illubetaling{
display:none;
}

.illubetalingvtje{
display:none;
}

.iphonetext{
display:none;
}

.iphoneonderschrift{
display:none;
}

.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);
}

.kluiscontainer{
display:none;
}

.kluis{
display:none;
}

.kluisdeur{
display:none;
}

.bootautocamper{
display:none;
}

.euroblauw{
display:none;
}

.kluisdraaislot{
display:none;
}

.kluisslot{
display:none;
}

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

.kettingachter{
width: 250px;
height: 250px;
border-radius: 50%;
position: relative;
margin-top: 50px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}

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

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

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

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

.appa{
background-image: url("../assets/appa.svg");
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:62px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:90px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:117px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:142px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:172px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:198px;
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: 170px;
height: 170px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:170px;
left:65px;
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: 170px;
height: 170px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;;
position: absolute;
top:-45px;
left:-55px;
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{
display:none;
}

.weegschaal{
display:none;
}

.euroblauwcontainer{
display:none;
}

.euroblauw2{
display:none;
}

.eurogroencontainer{
display:none;
}

.eurogroen{
display:none;
}

.eurogroen2{
display:none;
}

.grijsvlak{
display:none;
}

.kettingblauw{
display:none;
}

.kettinggroen{
display:none;
}

.kyccontainer{
width: 220px;
height: 220px;
position: relative;
top:5px;
margin-bottom: 40px;
}

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

.vingerafdruk{
background-image: url("../assets/vingerafdruk.svg");
width: 90px;
height: 90px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:62px;
left:65px;
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: 100px;
height: 120px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:30px;
left:75px;
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: 72px;
height: 72px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:72px;
left:72px;
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:5px;
}

.spacerklein2{
height:20px;
}

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

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

.uk-navbar-nav > li > a{
display:none;
}

.uk-navbar-right{
display:none;
}


.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: 90px;
}

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

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

}






@media  (min-width: 640px) and (max-width: 959px) {

video{
padding-bottom: 50px;
}

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

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

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;
}

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

.pep-width-959{
width:80%;
margin-left:auto;
margin-right: auto;
}

.pep-textwidth-959{
width:85%;
margin-left:auto;
margin-right: auto;
}

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

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

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

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

.pep-button-contactheader:hover {
margin-top: 10px;
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: 13px;
}

.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;
}

#sidebar{
position:relative;
width:100%;
height:340px;
}

.pep-navbar-klein{
  height:80px;
  width:100%;
  position:relative;
}

.pep-toggle-position{
  right:0px;
  position:absolute;
}

.pep-logo-klein{
  height:40px;
  width:190px;
  background-image: url("../assets/nblogow.svg");
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
}

.pep-offcanvas-bar{
  background-color: rgba(37, 57, 73, 1);
  height:340px;
  width:100%;
  padding-left: 45px;
  padding-top: 65px;
  top:-80px;
}

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

.card-pep{
height:275px;
width:100%;
background-color:white;
-webkit-clip-path: polygon(0% 0%, 96% 0%, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0% 100%);
clip-path: polygon(0% 0%, 96% 0%, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0% 100%);
margin-top:0px;
margin-bottom:30px;
margin-left:auto;
margin-right:auto;
}

.text-card-pep{
  margin-left:auto;
  margin-right:auto;
height: 250px;
}

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

.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: 9px;
}

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

.anicontainer-pep{
position:absolute;
top:125px;
left:57%;
width: 43%;
height:400px;
z-index: 105;
overflow: hidden;
}

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

.computerscherm{
position:absolute;
top:12px;
left:11px;
width:220px;
height:122px;
z-index: 105;
overflow: hidden;
}

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

.wielrood1{
background-image: url("../assets/wielrood.svg");
width: 32px;
height: 32px;
position:absolute;
top:49px;
left:15px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wielrood;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.wielrood2{
background-image: url("../assets/wielrood.svg");
width: 32px;
height: 32px;
position:absolute;
top:49px;
left:124px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wielrood;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.horloge-pep{
background-image: url("../assets/horlogekleur.svg");
width: 155px;
height: 157px;
position:absolute;
top:17px;
left:30px;
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:30px;}
25%  {opacity: 0; left:30px;}
30%  {opacity: 0; left:30px;}
35%  {opacity: 1; left:30px;}
45%  {opacity: 1;  left:30px;}
50%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}
@-webkit-keyframes  headeranimation02 {
0%  {opacity: 0; left:30px;}
25%  {opacity: 0; left:30px;}
30%  {opacity: 0; left:30px;}
35%  {opacity: 1; left:30px;}
45%  {opacity: 1;  left:30px;}
50%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}

.wijzer{
background-image: url("../assets/wijzer.svg");
width: 7px;
height: 50px;
position:absolute;
top:14px;
left:75px;
background-repeat: no-repeat;
background-size: contain;
-ms-transform: rotate(0deg); /* IE 9 */
-ms-transform-origin: 3px 28px; /* IE 9 */
transform: rotate(0deg);
transform-origin: 3px 28px;
animation-name: wijzer;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.boot-pep{
background-image: url("../assets/bootblauw.svg");
width: 165px;
height: 110px;
position:absolute;
top:0px;
left:32px;
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:32px;}
50%  {opacity: 0; left:32px;}
55%  {opacity: 0; left:32px;}
60%  {opacity: 1; left:32px;}
70%  {opacity: 1;  left:32px;}
75%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}
@-webkit-keyframes  headeranimation03 {
0%  {opacity: 0; left:32px;}
50%  {opacity: 0; left:32px;}
55%  {opacity: 0; left:32px;}
60%  {opacity: 1; left:32px;}
70%  {opacity: 1;  left:32px;}
75%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}

.vlag{
background-image: url("../assets/vlag.svg");
width: 18px;
height: 18px;
position:absolute;
top:19px;
left:100px;
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:40px;}
50%  {opacity: 0; top:40px;}
60%  {opacity: 0; top:40px;}
65%  {opacity: 0.5; top:40px;}
70%  {opacity: 0.5; top:19px;}
75%  {opacity: 1; top:19px;}
100% {opacity: 1; top:19px;}
}
@-webkit-keyframes  vlag {
0%  {opacity: 0; top:40px;}
50%  {opacity: 0; top:40px;}
60%  {opacity: 0; top:40px;}
65%  {opacity: 0.5; top:40px;}
70%  {opacity: 0.5; top:19px;}
75%  {opacity: 1; top:19px;}
100% {opacity: 1; top:19px;}
}

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

.roodscherm{
background-image: url("../assets/roodscherm.svg");
width: 72px;
height: 60px;
position:absolute;
top:4px;
left:43px;
background-repeat: no-repeat;
background-size: contain;
animation-name: roodschermani;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.wifi{
background-image: url("../assets/logoNotarieelBetalenscherm.svg");
width: 30px;
height: 30px;
position:absolute;
top:10px;
left:64px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wifiani;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.buyknop{
background-color: white;
width: 22px;
height: 10px;
padding-top:7px;
position:absolute;
border-radius: 4px;
border: 1px solid grey;
top:110px;
animation-name: buyknop;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.uk-logo-logo{
background-image: url("../assets/logoNotarieelBetalennieuwwit.png");
width: 140px;
min-height: 48px;
margin-top: 15px;
background-size: 100%;
background-repeat: no-repeat;
}

.bureau-illu{
background-image: url("../assets/bureau.svg");
height:190px;
width:190px;
top:15px;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.wolkje1{
background-image: url("../assets/wolkje1.svg");
height:20px;
width:20px;
position: absolute;
top:35px;
left:131px;
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:60px;}
50%  {opacity: 0.6; top:20px;}
100%  {opacity: 0; top:-20px;}
}
@-webkit-keyframes  wolkje1 {
0%  {opacity: 0; top:60px;}
50%  {opacity: 0.6; top:20px;}
100%  {opacity: 0; top:-20px;}
}

.wolkje2{
background-image: url("../assets/wolkje2.svg");
height:30px;
width:30px;
position: absolute;
top:35px;
left:140px;
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:25px;
width:25px;
position: absolute;
top:35px;
left:136px;
background-repeat: no-repeat;
background-size:contain;
animation-name: wolkje1;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoecontainer{
height:185px;
width:100%;
display:block;
margin-left: auto;
margin-right: auto;
}

.hoe1{
background-image: url("../assets/hoe1.svg");
height:200px;
width:200px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: hoe1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoe1 {
0%  {opacity: 100%;}
19%  {opacity: 100%;}
20%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  hoe1 {
0%  {opacity: 100%;}
19%  {opacity: 100%;}
20%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.hoe2{
background-image: url("../assets/hoe2.svg");
height:200px;
width:100%;
margin-bottom:0px;
position: absolute;
top:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: hoe2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoe2 {
0%  {opacity: 0%;}
19%  {opacity: 0%;}
20%  {opacity: 100%;}
39%  {opacity: 100%;}
40%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  hoe2 {
0%  {opacity: 0%;}
19%  {opacity: 0%;}
20%  {opacity: 100%;}
39%  {opacity: 100%;}
40%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.hoe3{
background-image: url("../assets/hoe3.svg");
height:200px;
width:100%;
margin-bottom:0px;
position: absolute;
top:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: hoe3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoe3 {
0%  {opacity: 0%;}
39%  {opacity: 0%;}
40%  {opacity: 100%;}
59%  {opacity: 100%;}
60%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  hoe3 {
0%  {opacity: 0%;}
39%  {opacity: 0%;}
40%  {opacity: 100%;}
59%  {opacity: 100%;}
60%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.hoe4{
background-image: url("../assets/hoe4.svg");
height:200px;
width:100%;
margin-bottom:0px;
position: absolute;
top:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: hoe4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoe4 {
0%  {opacity: 0%;}
59%  {opacity: 0%;}
60%  {opacity: 100%;}
79%  {opacity: 100%;}
80%  {opacity: 0%;}
100%  {opacity: 0%;}
}
@-webkit-keyframes  hoe4 {
0%  {opacity: 0%;}
59%  {opacity: 0%;}
60%  {opacity: 100%;}
79%  {opacity: 100%;}
80%  {opacity: 0%;}
100%  {opacity: 0%;}
}

.hoe5{
background-image: url("../assets/hoe5.svg");
height:200px;
width:100%;
margin-bottom:0px;
position: absolute;
top:0px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: hoe5;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes hoe5 {
0%  {opacity: 0%;}
79%  {opacity: 0%;}
80%  {opacity: 100%;}
100%  {opacity: 100%;}
}
@-webkit-keyframes  hoe5 {
0%  {opacity: 0%;}
79%  {opacity: 0%;}
80%  {opacity: 100%;}
100%  {opacity: 100%;}
}

.cirkelcontainer{
width:640;
display:block;
margin-left: auto;
margin-right: auto;
position: relative;
}

.hoecirkel1{
display:none;
}

.hoecirkel2{
display:none;
}

.hoecirkel3{
display:none;
}

.hoecirkel4{
display:none;
}

.hoecirkel5{
display:none;
}

.hk1{
color:rgba(197, 131, 153, 1);
animation-name: hk1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk2{
color:rgba(121, 184, 169, 1);
animation-name: hk2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk3{
color:rgba(122, 163, 182, 1);
animation-name: hk3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk4{
color:rgba(202, 158, 171, 1);
animation-name: hk4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk5{
color:rgba(229, 190, 96, 1);
animation-name: hk5;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoekopje1{
position: absolute;
top:40px;
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:40px;
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:40px;
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:40px;
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:40px;
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:85px;
left:20px;
right:20px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

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

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

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

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

.onlineillu{
display: none;
}

.offlineillu{
display: none;
}

.brokerillu{
display: none;
}

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

.cirkelverloop{
background-image: url("../assets/cirkelverloop.svg");
position: absolute;
top:35px;
right:33%;
height:350px;
width:350px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: cirkelverloop;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.carnextillu{
background-image: url("../assets/carnextilluvrij.png");
position: absolute;
top:200px;
height:170px;
width:375px;
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:-375px;}
25%  {right:24%;}
75%  {right:24%;}
100%  {right:110%;}
}
@-webkit-keyframes  carnexttest {
0%  {right:-375px;}
25%  {right:24%;}
75%  {right:24%;}
100%  {right:110%;}
}

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

.backwheel{
background-image: url("../assets/wiel.png");
position: absolute;
top:94px;
right:37px;
height:66px;
width:66px;
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:12px;
right:49.7%;
height:55px;
width:55px;
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;
}


.textwolkje{
background-image: url("../assets/vtje.svg");
position: absolute;
top:50px;
right:45%;
height:144px;
width:144px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: textwolkje;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.landschap{
background-image: url("../assets/landschap.svg");
height:280px;
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:216px;
right:-164px;
height:105px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.vlam1{
background-image: url("../assets/vlam1.svg");
position: absolute;
top:238px;
right:-167px;
height:49px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam1kl;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam1kl {
0%  {opacity: 0; top:238px;}
25%  {opacity: 1; top:227px;}
50%  {opacity: 0.7; top:216px;}
75%  {opacity: 0.9; top:205px;}
100%  {opacity: 0; top:194px;}
}
@-webkit-keyframes  vlam1kl {
0%  {opacity: 0; top:238px;}
25%  {opacity: 1; top:227px;}
50%  {opacity: 0.7; top:216px;}
75%  {opacity: 0.9; top:205px;}
100%  {opacity: 0; top:194px;}
}

.vlam2{
background-image: url("../assets/vlam2.svg");
position: absolute;
top:252px;
right:-159px;
height:49px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam2kl;
animation-duration: 0.9s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam2kl {
0%  {opacity: 0; top:242px;}
25%  {opacity: 1; top:232px;}
50%  {opacity: 0.7; top:222px;}
75%  {opacity: 0.9; top:212px;}
100%  {opacity: 0; top:202px;}
}
@-webkit-keyframes  vlam2kl {
0%  {opacity: 0; top:242px;}
25%  {opacity: 1; top:232px;}
50%  {opacity: 0.7; top:222px;}
75%  {opacity: 0.9; top:212px;}
100%  {opacity: 0; top:202px;}
}

.vlam3{
background-image: url("../assets/vlam3.svg");
position: absolute;
top:245px;
right:-168px;
height:49px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam3kl;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam3kl {
0%  {opacity: 0; top:245px;}
25%  {opacity: 1; top:225px;}
50%  {opacity: 0.7; top:205px;}
75%  {opacity: 1; top:185px;}
100%  {opacity: 0; top:165px;}
}
@-webkit-keyframes  vlam3kl {
0%  {opacity: 0; top:245px;}
25%  {opacity: 1; top:225px;}
50%  {opacity: 0.7; top:205px;}
75%  {opacity: 1; top:185px;}
100%  {opacity: 0; top:165px;}
}

.vlam4{
background-image: url("../assets/vlam4.svg");
position: absolute;
top:238px;
right:-153px;
height:49px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: vlam4kl;
animation-duration: 1.3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes vlam4kl {
0%  {opacity: 0; top:238px;}
25%  {opacity: 1; top:228px;}
50%  {opacity: 0.7; top:218px;}
75%  {opacity: 1; top:208px;}
100%  {opacity: 0; top:198px;}
}
@-webkit-keyframes  vlam4kl {
0%  {opacity: 0; top:238px;}
25%  {opacity: 1; top:228px;}
50%  {opacity: 0.7; top:218px;}
75%  {opacity: 1; top:208px;}
100%  {opacity: 0; top:198px;}
}

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

.schermslot{
display: none;
}

.headerschuin01{
position:relative;
top:-80px;
width:100%;
height:555px;
-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:555px;
-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:555px;
-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:555px;
-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:555px;
-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% 95%, 55% 95%, 50% 100%, 45% 95%, 0% 95%);
clip-path: polygon(0% 10%, 100% 0%, 100% 95%, 55% 95%, 50% 100%, 45% 95%, 0% 95%);
padding-top: 90px;
padding-bottom: 90px;
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: 70px;
padding-bottom: 30px;
position:relative;
}

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

.flow-card-pep{
height:255px;
width:23%;
background-color:red;
-webkit-clip-path: polygon(0% 0%, 92% 0%, 92% 46%, 100% 50%, 92% 54%, 92% 100%, 0% 100%);
clip-path: polygon(0% 0%, 92% 0%, 92% 46%, 100% 50%, 92% 54%, 92% 100%, 0% 100%);
padding-left: 13px;
padding-right: 25px;
margin-right:1%;
margin-top:35px;
margin-bottom:0px;
}

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

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

.pep-cirkel{
position: relative;
border-radius: 50%;
border-color: white;
border-style: solid;
border-width: 2px;
top:8px;
width:25px;
height:25px;
margin-left: 37%;
margin-right: 63%;
}

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

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

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

.card-pep-groot{
height:270px;
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:50px;
margin-bottom:60px;
}

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

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

.iphonescherm{
background-image: url("../assets/iphonegroen.svg");
position: absolute;
top:8px;
height:308px;
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;
}

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

.illucontainer{
position: absolute;
left:66px;
top:8px;
height:308px;
width:143px;
overflow: hidden;
}

.illubestelling{
background-image: url("../assets/betalingeuro.svg");
position: absolute;
top:160px;
left:0px;
height:70px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 35px 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: 35px 0px;}
33%  {background-image: url("../assets/betalingeuro.svg"); background-position: 35px 0px;}
34%  {background-image: none; background-position: 35px 0px;}
100%  {background-image: none; ;background-position: 35px 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: 35px 0px;}
33%  {background-image: url("../assets/betalingeuro.svg"); background-position: 35px 0px;}
34%  {background-image: none; background-position: 35px 0px;}
100%  {background-image: none; ;background-position: 35px 0px;}
}

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

.illubetaling{
background-image: url("../assets/betalingvierkant.svg");
position: absolute;
top:155px;
left:0px;
height:80px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 34px 0px;
animation-name: betalingvierkant;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.illubetalingvtje{
background-image: url("../assets/betalingvtje.svg");
position: absolute;
top:135px;
left:0px;
height:104px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 45px 0px;
animation-name: betalingvtje;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.iphonetext{
background-image: url("../assets/bestelling.svg");
position: absolute;
top:50px;
left:8px;
height:16px;
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:75px;
left:7px;
height:12px;
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");}
}

.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);
}

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

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

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

.bootautocamper{
background-image: url("../assets/bootcon.svg");
width: 150px;
height: 100%;
position:absolute;
top:90px;
right:-210px;
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:-210px;opacity: 0%;}
12%  {background-image: url("../assets/bootcon.svg");right:-210px;opacity: 100%;}
20%  {background-image: url("../assets/bootcon.svg");right:390px;opacity: 100%;}
21%  {background-image: url("../assets/bootcon.svg");right:390px;opacity: 0%;}
34%  {background-image: none;}
35%  {background-image: url("../assets/autocon.svg");right:-210px;opacity: 0%;}
45%  {background-image: url("../assets/autocon.svg");right:-210px;opacity: 100%;}
53%  {background-image: url("../assets/autocon.svg");right:390px;opacity: 100%;}
54%  {background-image: url("../assets/autocon.svg");right:390px;opacity: 0%;}
67%  {background-image: none;}
68%  {background-image: url("../assets/campercon.svg");right:-210px;opacity: 0%;}
76%  {background-image: url("../assets/campercon.svg");right:-210px;opacity: 100%;}
86%  {background-image: url("../assets/campercon.svg");right:390px;opacity: 100%;}
87%  {background-image: url("../assets/campercon.svg");right:390px;opacity: 0%;}
100%  {background-image: url("../assets/campercon.svg");right:390px;opacity: 0%;}
}
@-webkit-keyframes  bootautocamper {
0%  {background-image: url("../assets/bootcon.svg");right:-210px;opacity: 0%;}
10%  {background-image: url("../assets/bootcon.svg");right:-210px;opacity: 100%;}
20%  {background-image: url("../assets/bootcon.svg");right:390px;opacity: 100%;}
21%  {background-image: url("../assets/bootcon.svg");right:390px;opacity: 0%;}
34%  {background-image: none;}
35%  {background-image: url("../assets/autocon.svg");right:-210px;opacity: 0%;}
43%  {background-image: url("../assets/autocon.svg");right:-210px;opacity: 100%;}
53%  {background-image: url("../assets/autocon.svg");right:390px;opacity: 100%;}
54%  {background-image: url("../assets/autocon.svg");right:390px;opacity: 0%;}
67%  {background-image: none;}
68%  {background-image: url("../assets/campercon.svg");right:-210px;opacity: 0%;}
76%  {background-image: url("../assets/campercon.svg");right:-210px;opacity: 100%;}
86%  {background-image: url("../assets/campercon.svg");right:390px;opacity: 100%;}
87%  {background-image: url("../assets/campercon.svg");right:390px;opacity: 0%;}
100%  {background-image: url("../assets/campercon.svg");right:390px;opacity: 0%;}
}

.euroblauw{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 55px;
position:absolute;
top:90px;
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:110px; opacity: 100%;}
22%  {left:110px; opacity: 100%;}
26%  {left:110px; opacity: 100%;}
33%  {left:450px; opacity: 0%;}
34%  {left:0px; opacity: 0%;}
36%  {left:0px; opacity: 100%;}
44%  {left:110px; opacity: 100%;}
55%  {left:110px; opacity: 100%;}
59%  {left:110px; opacity: 100%;}
66%  {left:450px; opacity: 0%;}
67%  {left:0px; opacity: 0%;}
69%  {left:0px; opacity: 100%;}
77%  {left:110px; opacity: 100%;}
88%  {left:110px; opacity: 100%;}
92%  {left:110px; opacity: 100%;}
99%  {left:450px; opacity: 0%;}
100%  {left:0px; opacity: 0%;}
}
@-webkit-keyframes  euroblauw {
0%  {left:0px; opacity: 0%;}
2%  {left:0px; opacity: 100%;}
10%  {left:110px; opacity: 100%;}
22%  {left:110px; opacity: 100%;}
26%  {left:110px; opacity: 100%;}
33%  {left:450px; opacity: 0%;}
34%  {left:0px; opacity: 0%;}
36%  {left:0px; opacity: 100%;}
44%  {left:110px; opacity: 100%;}
55%  {left:110px; opacity: 100%;}
59%  {left:110px; opacity: 100%;}
66%  {left:450px; opacity: 0%;}
67%  {left:0px; opacity: 0%;}
69%  {left:0px; opacity: 100%;}
77%  {left:110px; opacity: 100%;}
88%  {left:110px; opacity: 100%;}
92%  {left:110px; opacity: 100%;}
99%  {left:450px; opacity: 0%;}
100%  {left:0px; opacity: 0%;}
}

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

.kluisslot{
background-image: url("../assets/kluisslot.svg");
width: 100%;
height: 105px;
position:absolute;
top:105px;
left:77px;
-ms-transform: rotate(0deg); /* IE 9 */
-ms-transform-origin: 105px 103px; /* IE 9 */
transform: rotate(0deg);
transform-origin: 53px 51px;
background-repeat: no-repeat;
animation-name: kluisslot;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

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

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

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

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

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

.appa{
background-image: url("../assets/appa.svg");
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:62px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:90px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:117px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:142px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:172px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:198px;
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: 170px;
height: 170px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:170px;
left:65px;
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: 170px;
height: 170px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;;
position: absolute;
top:-45px;
left:-55px;
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: 190px;
height: 190px;
border-radius: 50%;
position: relative;
margin-top: 5px;
}

.weegschaal{
background-image: url("../assets/weegschaal.svg");
width: 290px;
height: 290px;
background-repeat: no-repeat;
background-size: 45% 45%;
background-position: 25px 30px;
}

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

.euroblauw2{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 45px;
position:absolute;
top:50px;
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: 243px;
position:absolute;
top:30px;
left:130px;
}

.eurogroen{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 35px;
position:absolute;
top:15px;
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:500px; opacity: 100%;}
100%  {left:500px; opacity: 0%;}
}
@-webkit-keyframes  eurogroen {
0%  {left:0px; opacity: 0%;}
35%  {left:0px; opacity: 0%;}
36%  {left:0px; opacity: 100%;}
71%  {left:500px; opacity: 100%;}
100%  {left:500px; opacity: 0%;}
}

.eurogroen2{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 35px;
position:absolute;
top:60px;
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:500px; opacity: 100%;}
100%  {left:500px; opacity: 0%;}
}
@-webkit-keyframes  eurogroen2 {
0%  {left:0px; opacity: 0%;}
35%  {left:0px; opacity: 0%;}
36%  {left:0px; opacity: 100%;}
75%  {left:500px; opacity: 100%;}
100%  {left:500px; opacity: 0%;}
}

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

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

.kettinggroen{
background-image: url("../assets/kettinggroen.svg");
width: 100%;
height: 60px;
position:absolute;
top:40px;
left:60px;
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: 180px;
height: 180px;
position: relative;
top:45px;
}

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

.vingerafdruk{
background-image: url("../assets/vingerafdruk.svg");
width: 75px;
height: 75px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:52px;
left:53px;
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: 80px;
height: 100px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:22px;
left:65px;
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: 60px;
height: 60px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:57px;
left:60px;
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:5px;
}

.spacerklein2{
height:20px;
}

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

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

.uk-navbar-nav > li > a{
font-size:11px;
color:white;
padding-right: 6px;
padding-left: 6px;
}

.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: 90px;
}

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

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

}







@media  (min-width: 960px) and (max-width: 1199px) {

video{
padding-bottom: 50px;
}

h2{
font-size: calc(24px + (32 - 24) * ((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;
}

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

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

.pep-textwidth-1199{
width:75%;
margin-left:auto;
margin-right: auto;
}

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

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

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

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

.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: 14px;
}

.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:100%;
position: absolute;
bottom:30px;
left:0px;
right:0px;
}

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

.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:135px;
left:53%;
width: 47%;
height:500px;
z-index: 105;
overflow: hidden;
}

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

.computerscherm{
position:absolute;
top:19px;
left:20px;
width:360px;
height:204px;
z-index: 105;
overflow: hidden;
}

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

.wielrood1{
background-image: url("../assets/wielrood.svg");
width: 48px;
height: 48px;
position:absolute;
top:75px;
left:25px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wielrood;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.wielrood2{
background-image: url("../assets/wielrood.svg");
width: 48px;
height: 48px;
position:absolute;
top:75px;
left:193px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wielrood;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.horloge-pep{
background-image: url("../assets/horlogekleur.svg");
width: 260px;
height: 157px;
position:absolute;
top:28px;
left:51px;
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:51px;}
25%  {opacity: 0; left:51px;}
30%  {opacity: 0; left:51px;}
35%  {opacity: 1; left:51px;}
45%  {opacity: 1;  left:51px;}
50%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}
@-webkit-keyframes  headeranimation02 {
0%  {opacity: 0; left:51px;}
25%  {opacity: 0; left:51px;}
30%  {opacity: 0; left:51px;}
35%  {opacity: 1; left:51px;}
45%  {opacity: 1;  left:51px;}
50%  {opacity: 1;  left:105%;}
100% {opacity: 1;  left:105%;}
}

.wijzer{
background-image: url("../assets/wijzer.svg");
width: 11px;
height: 65px;
position:absolute;
top:27px;
left:126px;
background-repeat: no-repeat;
background-size: contain;
-ms-transform: rotate(0deg); /* IE 9 */
-ms-transform-origin: 4px 44px; /* IE 9 */
transform: rotate(0deg);
transform-origin: 4px 44px;
animation-name: wijzer;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.boot-pep{
background-image: url("../assets/bootblauw.svg");
width: 260px;
height: 200px;
position:absolute;
top:5px;
left:52px;
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: 23px;
height: 23px;
position:absolute;
top:36px;
left:170px;
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:80px;}
50%  {opacity: 0; top:80px;}
60%  {opacity: 0; top:80px;}
65%  {opacity: 0.5; top:80px;}
70%  {opacity: 0.5; top:36px;}
75%  {opacity: 1; top:36px;}
100% {opacity: 1; top:36px;}
}
@-webkit-keyframes  vlag {
0%  {opacity: 0; top:80px;}
50%  {opacity: 0; top:80px;}
60%  {opacity: 0; top:80px;}
65%  {opacity: 0.5; top:80px;}
70%  {opacity: 0.5; top:36px;}
75%  {opacity: 1; top:36px;}
100% {opacity: 1; top:36px;}
}

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

.roodscherm{
background-image: url("../assets/roodscherm.svg");
width: 129px;
height: 100px;
position:absolute;
top:6px;
left:77px;
background-repeat: no-repeat;
background-size: contain;
animation-name: roodschermani;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.wifi{
background-image: url("../assets/logoNotarieelBetalenscherm.svg");
width: 54px;
height: 54px;
position:absolute;
top:17px;
left:113px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wifiani;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.buyknop{
background-color: white;
width: 28px;
height: 12px;
padding-top:7px;
position:absolute;
border-radius: 4px;
border: 1px solid grey;
top:190px;
animation-name: buyknop;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.uk-logo-logo{
background-image: url("../assets/logoNotarieelBetalennieuwwit.png");
width: 225px;
min-height: 65px;
margin-top: 15px;
background-size: 100%;
background-repeat: no-repeat;
}

.bureau-illu{
background-image: url("../assets/bureau.svg");
height:400px;
width:420px;
left:25px;
top:15px;
position: relative;
background-repeat: no-repeat;
background-size:contain;
}

.wolkje1{
background-image: url("../assets/wolkje1.svg");
height:40px;
width:40px;
position: absolute;
top:100px;
left:298px;
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:56px;
width:48px;
position: absolute;
top:85px;
left:300px;
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:60px;
width:40px;
position: absolute;
top:5px;
left:296px;
background-repeat: no-repeat;
background-size:contain;
animation-name: wolkje1;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoecontainer{
height:215px;
}

.hoe1{
background-image: url("../assets/hoe1.svg");
height:130px;
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:130px;
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:130px;
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:130px;
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:130px;
width:100%;
margin-bottom:0px;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.cirkelcontainer{
width:910px;
margin-left: auto;
margin-right: auto;
}

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

.hoecirkel2{
width:130px;
height:130px;
position: absolute;
top:0px;
left:27px;
background-color:rgba(167, 213, 161, 1);
border-radius: 50%;
animation-name: hoecirkel2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoecirkel3{
width:130px;
height:130px;
position: absolute;
top:0px;
left:27px;
background-color:rgba(126, 107, 137, 1);
border-radius: 50%;
animation-name: hoecirkel3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoecirkel4{
width:130px;
height:130px;
position: absolute;
top:0px;
left:27px;
background-color:rgba(212, 96, 128, 1);
border-radius: 50%;
animation-name: hoecirkel4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

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

.hk1{
color:rgba(197, 131, 153, 1);
animation-name: hk1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk2{
color:rgba(121, 184, 169, 1);
animation-name: hk2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk3{
color:rgba(122, 163, 182, 1);
animation-name: hk3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk4{
color:rgba(202, 158, 171, 1);
animation-name: hk4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk5{
color:rgba(229, 190, 96, 1);
animation-name: hk5;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoekopje1{
position: absolute;
top:40px;
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:40px;
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:40px;
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:40px;
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:40px;
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:105px;
left:0px;
right:0px;
color:rgba(0, 0, 0, 1);
animation-name: hoetext1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

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

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

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

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

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

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

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

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

.cirkelverloop{
background-image: url("../assets/cirkelverloop.svg");
position: absolute;
top:35px;
right:41%;
height:360px;
width:360px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: cirkelverloop;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.carnextillu{
background-image: url("../assets/carnextilluvrij.png");
position: absolute;
top:200px;
height:170px;
width:405px;
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:-405px;}
25%  {right:33%;}
75%  {right:33%;}
100%  {right:110%;}
}
@-webkit-keyframes  carnexttest {
0%  {right:-405px;}
25%  {right:33%;}
75%  {right:33%;}
100%  {right:110%;}
}

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

.backwheel{
background-image: url("../assets/wiel.png");
position: absolute;
top:93px;
right:40px;
height:71px;
width:71px;
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:12px;
right:50.7%;
height:55px;
width:55px;
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;
}


.textwolkje{
background-image: url("../assets/vtje.svg");
position: absolute;
top:50px;
right:45%;
height:144px;
width:144px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: textwolkje;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.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: 350px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.headerschuin01{
position:relative;
top:-80px;
width:100%;
height:675px;
-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:675px;
-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:675px;
-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:675px;
-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:675px;
-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%, 55% 93%, 50% 100%, 45% 93%, 0% 93%);
clip-path: polygon(0% 10%, 100% 0%, 100% 93%, 55% 93%, 50% 100%, 45% 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: 70px;
padding-bottom: 30px;
position:relative;
}

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

.flow-card-pep{
height:285px;
width:22%;
background-color:red;
-webkit-clip-path: polygon(0% 0%, 88% 0%, 88% 42%, 100% 50%, 88% 58%, 88% 100%, 0% 100%);
clip-path: polygon(0% 0%, 88% 0%, 88% 42%, 100% 50%, 88% 58%, 88% 100%, 0% 100%);
padding-left: 18px;
padding-right: 39px;
margin-right:2%;
margin-top:55px;
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%;
}

.card-pep{
height:500px;
width:355px;
background-color:white;
-webkit-clip-path: polygon(0% 0%, 90% 0%, 90% 45%, 100% 50%, 90% 55%, 90% 100%, 0% 100%);
clip-path: polygon(0% 0%, 90% 0%, 90% 45%, 100% 50%, 90% 55%, 90% 100%, 0% 100%);
margin-top:20px;
margin-bottom:50px;
}

.card-pep-groot{
height:300px;
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:50px;
margin-bottom:60px;
}

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

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

.iphonescherm{
background-image: url("../assets/iphonegroen.svg");
position: absolute;
top:10px;
height:380px;
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;
}

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

.illucontainer{
position: absolute;
left:137px;
top:10px;
height:370px;
width:176px;
overflow: hidden;
}

.illubestelling{
background-image: url("../assets/betalingeuro.svg");
position: absolute;
top:190px;
left:0px;
height:95px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 37px 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: 37px 0px;}
33%  {background-image: url("../assets/betalingeuro.svg"); background-position: 37px 0px;}
34%  {background-image: none; background-position: 37px 0px;}
100%  {background-image: none; ;background-position: 37px 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: 37px 0px;}
33%  {background-image: url("../assets/betalingeuro.svg"); background-position: 37px 0px;}
34%  {background-image: none; background-position: 37px 0px;}
100%  {background-image: none; ;background-position: 37px 0px;}
}

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

.illubetaling{
background-image: url("../assets/betalingvierkant.svg");
position: absolute;
top:190px;
left:0px;
height:97px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 39px 0px;
animation-name: betalingvierkant;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.illubetalingvtje{
background-image: url("../assets/betalingvtje.svg");
position: absolute;
top:165px;
left:0px;
height:130px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 55px 0px;
animation-name: betalingvtje;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.iphonetext{
background-image: url("../assets/bestelling.svg");
position: absolute;
top:60px;
left:22px;
height:20px;
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:90px;
left:20px;
height:15px;
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");}
}

.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);
}

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

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

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

.bootautocamper{
background-image: url("../assets/bootcon.svg");
width: 250px;
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:490px;opacity: 100%;}
21%  {background-image: url("../assets/bootcon.svg");right:490px;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:490px;opacity: 100%;}
54%  {background-image: url("../assets/autocon.svg");right:490px;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:490px;opacity: 100%;}
87%  {background-image: url("../assets/campercon.svg");right:490px;opacity: 0%;}
100%  {background-image: url("../assets/campercon.svg");right:490px;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: 82px;
position:absolute;
top:140px;
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:650px; 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:650px; 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:650px; 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:650px; 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:650px; 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:650px; opacity: 0%;}
100%  {left:0px; opacity: 0%;}
}

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

.kluisslot{
background-image: url("../assets/kluisslot.svg");
width: 100%;
height: 160px;
position:absolute;
top:155px;
left:138px;
-ms-transform: rotate(0deg); /* IE 9 */
-ms-transform-origin: 105px 103px; /* IE 9 */
transform: rotate(0deg);
transform-origin: 80px 78px;
background-repeat: no-repeat;
animation-name: kluisslot;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.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:0px;
transform: rotate(4deg);
}

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

.appa{
background-image: url("../assets/appa.svg");
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:62px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:90px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:117px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:142px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:172px;
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: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:121px;
left:198px;
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: 170px;
height: 170px;
background-repeat: no-repeat;
background-size: 90% 90%;
background-position: center;;
position: absolute;
top:170px;
left:65px;
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: 170px;
height: 170px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;;
position: absolute;
top:-45px;
left:-55px;
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: 290px;
height: 290px;
border-radius: 50%;
position: relative;
margin-top: -35px;
}

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

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

.euroblauw2{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 75px;
position:absolute;
top:90px;
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: 243px;
position:absolute;
top:30px;
left:130px;
}

.eurogroen{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 60px;
position:absolute;
top:35px;
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: 60px;
position:absolute;
top:120px;
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: 245px;
position:absolute;
top:10px;
left:100px;
background-repeat: no-repeat;
}

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

.kettinggroen{
background-image: url("../assets/kettinggroen.svg");
width: 100%;
height: 120px;
position:absolute;
top:60px;
left:88px;
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: 300px;
position: relative;
top:55px;
}

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

.vingerafdruk{
background-image: url("../assets/vingerafdruk.svg");
width: 105px;
height: 105px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:69px;
left:73px;
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: 150px;
height: 150px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:22px;
left:70px;
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: 80px;
height: 80px;
background-repeat: no-repeat;
background-position: center;;
position: absolute;
top:80px;
left:83px;
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:25px;
margin-top: 25px;
margin-right:55px;
height: 475px;
}

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

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

.uk-navbar-nav > li > a{
font-size:14px;
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: 90px;
}

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

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

}






@media  (min-width: 1200px) and (max-width: 1599px) {

video{
padding-bottom: 100px;
}

h2{
font-size: calc(24px + (32 - 24) * ((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;
}

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

.pep-width-1599{
width:50%;
margin-left:auto;
margin-right: auto;
}

.pep-textwidth-1599{
width:65%;
margin-left:auto;
margin-right: auto;
}

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

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

.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: 14px;
}

.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:80%;
position: absolute;
bottom:30px;
left:0px;
right:0px;
}

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

.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:53%;
width: 47%;
height:600px;
z-index: 105;
overflow: hidden;
}

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

.computerscherm{
position:absolute;
top:22px;
left:23px;
width:428px;
height:238px;
z-index: 105;
overflow: hidden;
}

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

.wielrood1{
background-image: url("../assets/wielrood.svg");
width: 60px;
height: 60px;
position:absolute;
top:95px;
left:32px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wielrood;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.wielrood2{
background-image: url("../assets/wielrood.svg");
width: 60px;
height: 60px;
position:absolute;
top:95px;
left:245px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wielrood;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.horloge-pep{
background-image: url("../assets/horlogekleur.svg");
width: 300px;
height: 157px;
position:absolute;
top:32px;
left:70spx;
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: 12px;
height: 70px;
position:absolute;
top:34px;
left:145px;
background-repeat: no-repeat;
background-size: contain;
-ms-transform: rotate(0deg); /* IE 9 */
-ms-transform-origin: 7px 47px; /* IE 9 */
transform: rotate(0deg);
transform-origin: 7px 47px;
animation-name: wijzer;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.boot-pep{
background-image: url("../assets/bootblauw.svg");
width: 324px;
height: 225px;
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: 27px;
height: 27px;
position:absolute;
top:48px;
left:210px;
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:110px;}
50%  {opacity: 0; top:110px;}
60%  {opacity: 0; top:110px;}
65%  {opacity: 0.5; top:110px;}
70%  {opacity: 0.5; top:48px;}
75%  {opacity: 1; top:48px;}
100% {opacity: 1; top:48px;}
}
@-webkit-keyframes  vlag {
0%  {opacity: 0; top:110px;}
50%  {opacity: 0; top:110px;}
60%  {opacity: 0; top:110px;}
65%  {opacity: 0.5; top:110px;}
70%  {opacity: 0.5; top:48px;}
75%  {opacity: 1; top:48px;}
100% {opacity: 1; top:48px;}
}

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

.roodscherm{
background-image: url("../assets/roodscherm.svg");
width: 156px;
height: 117px;
position:absolute;
top:6px;
left:93px;
background-repeat: no-repeat;
background-size: contain;
animation-name: roodschermani;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.wifi{
background-image: url("../assets/logoNotarieelBetalenscherm.svg");
width: 63px;
height: 63px;
position:absolute;
top:19px;
left:141px;
background-repeat: no-repeat;
background-size: contain;
animation-name: wifiani;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.buyknop{
background-color: white;
width: 34px;
height: 13px;
padding-top:7px;
position:absolute;
border-radius: 4px;
border: 1px solid grey;
top:220px;
animation-name: buyknop;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.uk-logo-logo{
background-image: url("../assets/logoNotarieelBetalennieuwwit.png");
width: 225px;
min-height: 65px;
margin-top: 15px;
background-size: 100%;
background-repeat: no-repeat;
}

.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:155px;
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:155px;
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:155px;
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:155px;
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:155px;
width:100%;
margin-bottom:0px;
position: relative;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.cirkelcontainer{
width:1055px;
margin-left: auto;
margin-right: auto;
}

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

.hoecirkel2{
width:155px;
height: 155px;
position: absolute;
top:0px;
left:29px;
background-color:rgba(167, 213, 161, 1);
border-radius: 50%;
animation-name: hoecirkel2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoecirkel3{
width:155px;
height: 155px;
position: absolute;
top:0px;
left:29px;
background-color:rgba(126, 107, 137, 1);
border-radius: 50%;
animation-name: hoecirkel3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hoecirkel4{
width:155px;
height: 155px;
position: absolute;
top:0px;
left:29px;
background-color:rgba(212, 96, 128, 1);
border-radius: 50%;
animation-name: hoecirkel4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

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

.hk1{
color:rgba(197, 131, 153, 1);
animation-name: hk1;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk2{
color:rgba(121, 184, 169, 1);
animation-name: hk2;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk3{
color:rgba(122, 163, 182, 1);
animation-name: hk3;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk4{
color:rgba(202, 158, 171, 1);
animation-name: hk4;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.hk5{
color:rgba(229, 190, 96, 1);
animation-name: hk5;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

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

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

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

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

.cirkelverloop{
background-image: url("../assets/cirkelverloop.svg");
position: absolute;
top:35px;
right:41%;
height:360px;
width:360px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: cirkelverloop;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.carnextillu{
background-image: url("../assets/carnextilluvrij.png");
position: absolute;
top:200px;
height:170px;
width:405px;
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:-405px;}
25%  {right:35%;}
75%  {right:35%;}
100%  {right:110%;}
}
@-webkit-keyframes  carnexttest {
0%  {right:-405px;}
25%  {right:35%;}
75%  {right:35%;}
100%  {right:110%;}
}

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

.backwheel{
background-image: url("../assets/wiel.png");
position: absolute;
top:93px;
right:40px;
height:71px;
width:71px;
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:12px;
right:50.7%;
height:55px;
width:55px;
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;
}


.textwolkje{
background-image: url("../assets/vtje.svg");
position: absolute;
top:50px;
right:45%;
height:144px;
width:144px;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
animation-name: textwolkje;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.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:775px;
-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:775px;
-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:775px;
-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:775px;
-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:775px;
-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: 32px;
padding-right: 64px;
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%;
}

.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:50px;
}

.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:450px;
height:100%;
position: relative;
}

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

.iphonescherm{
background-image: url("../assets/iphonegroen.svg");
position: absolute;
top:10px;
height:430px;
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:430px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: center;
}

.illucontainer{
position: absolute;
left:126px;
top:10px;
height:410px;
width:198px;
overflow: hidden;
}

.illubestelling{
background-image: url("../assets/betalingeuro.svg");
position: absolute;
top:220px;
left:0px;
height:108px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 39px 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: 39px 0px;}
33%  {background-image: url("../assets/betalingeuro.svg"); background-position: 39px 0px;}
34%  {background-image: none; background-position: 39px 0px;}
100%  {background-image: none; ;background-position: 39px 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: 39px 0px;}
33%  {background-image: url("../assets/betalingeuro.svg"); background-position: 39px 0px;}
34%  {background-image: none; background-position: 39px 0px;}
100%  {background-image: none; ;background-position: 39px 0px;}
}

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

.illubetaling{
background-image: url("../assets/betalingvierkant.svg");
position: absolute;
top:220px;
left:0px;
height:108px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 44px 0px;
animation-name: betalingvierkant;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.illubetalingvtje{
background-image: url("../assets/betalingvtje.svg");
position: absolute;
top:175px;
left:0px;
height:153px;
width:100%;
background-repeat: no-repeat;
background-size:contain;
background-position: 60px 0px;
animation-name: betalingvtje;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.iphonetext{
background-image: url("../assets/bestelling.svg");
position: absolute;
top:100px;
left:30px;
height:23px;
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;
left:30px;
height:17px;
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");}
}

.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);
}

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

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

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

.bootautocamper{
background-image: url("../assets/bootcon.svg");
width: 279px;
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: 90px;
position:absolute;
top:148px;
left:=140px;
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: 63px;
position:absolute;
top:63px;
left:206px;
background-repeat: no-repeat;
}

.kluisslot{
background-image: url("../assets/kluisslot.svg");
width: 100%;
height: 179px;
position:absolute;
top:160px;
left:147px;
-ms-transform: rotate(0deg); /* IE 9 */
-ms-transform-origin: 105px 103px; /* IE 9 */
transform: rotate(0deg);
transform-origin: 89px 88px;
background-repeat: no-repeat;
animation-name: kluisslot;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.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: 290px;
height: 290px;
border-radius: 50%;
position: relative;
margin-top: -35px;
}

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

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

.euroblauw2{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 95px;
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: 243px;
position:absolute;
top:30px;
left:130px;
}

.eurogroen{
background-image: url("../assets/euroblauw.svg");
width: 100%;
height: 90px;
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: 90px;
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: 290px;
position:absolute;
top:10px;
left:130px;
background-repeat: no-repeat;
}

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

.kettinggroen{
background-image: url("../assets/kettinggroen.svg");
width: 100%;
height: 144px;
position:absolute;
top:70px;
left:100px;
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:25px;
margin-top: 25px;
margin-right:87px;
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:15px;
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;
}

}