/* -- Main - core -- */

svg#Laag_1{
  max-width: 150px;
  margin: 0 auto;
  cursor: default;
	transition: all 0.2s;
  background: #d7fae2;
  padding: 0.4rem;
  transition: all 0.5s;
}


svg#Laag_1:hover{
  background: #c6fdd7;
}


svg#Laag_xtra{
  max-width: 150px;
  margin: 0 auto;
  cursor: default;
	transition: all 0.2s;
  background: #d7fae2;
  padding: 0.8rem;
  transition: all 0.5s;
}

svg#Laag_xtra:hover{
  background: #c6fdd7;
}

.cls-4 {
  fill: #fff;
  stroke: #494848;
  stroke-miterlimit: 10;
  stroke-width: 0.5px;
}

.cls-2 {
  fill: #494848;
}

.cls-3 {
  fill: #c6c6c68c;
}

.cls-5 {
  fill: #a2def6;
  stroke: #36a2cc;
  stroke-width: 0.5px;
}

/* -- Web content migraties (1) -- */  

.ag-paper {
  stroke-width: 1px;
  fill: white;
  stroke: #494848;
  stroke-dasharray: 3;
}

#Laag_1:hover rect.cls-4.first-page {
  animation: firstpage 4s;
  animation-iteration-count: 1;
  transition: all 0.5s;  

}

@keyframes firstpage {
	0% {transform: translateX(0px);}
	10% {transform: translate(26px, -6.5px);}
	60% {transform: translate(26px, -6.5px);}
	100% {transform: translateX(0px);}
}

.check {
  opacity: 0;
  transition: all 0.5s;
  fill: #a2def6;
}

#Laag_1:hover .streep_1 {
  animation: fadeIn 1.5s;
  animation-iteration-count: 1;
  transition: all 0.5s;
  animation-delay: 0.75s;
}

@keyframes fadeIn {
  0% { opacity: 0;}
  50% { opacity: 1;}
  60% { opacity: 1;}
  100% { opacity: 0;}
}

#Laag_1:hover .streep_2 {
  animation: fadeIn 1.5s;
  animation-iteration-count: 1;
  transition: all 0.5s;
  animation-delay: 1s;
}

@keyframes fadeIn {
  0% { opacity: 0;}
  50% { opacity: 1;}
  60% { opacity: 1;}
  100% { opacity: 0;}
}

#Laag_1:hover .streep_3 {
  animation: fadeIn 1.5s;
  animation-iteration-count: 1;
  transition: all 0.5s;
  animation-delay: 1.25s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  50% { opacity: 1;}
  60% { opacity: 1;}
  100% { opacity: 0;}
}

#Laag_1:hover .pijl {
  animation: fadeIn 1.5s;
  animation-iteration-count: 1;
  transition: all 1.5s;
  animation-delay: 1.5s;
}

@keyframes fadeIn {
  0% { opacity: 0;}
  50% { opacity: 1;}
  60% { opacity: 1;}
  100% { opacity: 0;}
}

#Laag_1:hover .ag-paper {
  animation: fadeOut 4s;
  animation-iteration-count: 1;
  animation-delay: 0.5s;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  15% { opacity: 0;}
  65% { opacity: 0;}
  100% { opacity: 1; }
}

/* -- Website development (2) -- */  
#Laag_xtra:hover .pijl_rechts{
  animation-name: moving-right;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

#Laag_xtra:hover .pijl_rechts{
  transition: all .25s ease-in-out;
}

@keyframes moving-right  {
	100% {transform: translateX(0);}
	0% {transform: translateX(15px);}
}

#Laag_xtra:hover .pijl_links {
  animation-name: moving-left;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
  transition: all .25s ease-in-out;

}
@keyframes moving-left  {
	100% {transform: translateX(0);}
	0% {transform: translateX(-15px);}
}

#Laag_xtra:hover .bol-1  {
  animation-name: moving-bol-1;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

@keyframes moving-bol-1 {
  100% {transform: translateY( 0px);}
  50% {transform: translateY(-2px);}
  0% {transform: translateY(2px);}
  100% {transform: translateY( 0px);}
}

#Laag_xtra:hover .bol-2  {
  animation-name: moving-bol-2;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
  animation-delay: 1s;
}

@keyframes moving-bol-2 {
  100% {transform: translateY( 0px);}
  50% {transform: translateY(-3px);}
  0% {transform: translateY(3px);}
  100% {transform: translateY( 0px);}
}

#Laag_xtra:hover .bol-3  {
  animation-name: moving-bol-1;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
  animation-delay: 2s;
}

@keyframes moving-bol-3 {
  100% {transform: translateY( 0px);}
  50% {transform: translateY(-2px);}
  0% {transform: translateY(2px);}
  100% {transform: translateY( 0px);}
}

.cls-1 {
  fill: #a2def6;
  stroke: #36a2cc;
  stroke-width: 0.5px;
}

.searchbar {
  stroke-width: 0.5px;
  stroke: #494848;
  fill: white;
}

/*
#Laag_1:hover .slash {
  transform-origin: 50% 50%;
  animation: spin 3s ease;
  -webkit-transition-delay: now;
  animation-iteration-count: 1;
}

@keyframes spin {
  100% {transform: rotate(360deg);}
}
  */

.bottom-block {
  stroke-width: 0.75px;
}


/* -- (Online) Implementaties (3) -- */

line.cls-3.lijn-1 {
  stroke: #494848;
  stroke-width: 0.5px;
}


circle.cls-1.m-circle {
  stroke: #494848;
  stroke-width: 2px;
  fill: white;
}

line.cls-1.l-check {
  stroke: #494848;
  stroke-width: 1px;
}

#Laag_1:hover .cls-5 {
  fill: #a2def6;
  stroke: #36a2cc;
  stroke-width: 0.5px;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: spin 3s infinite;
  -webkit-transition-delay: now;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@keyframes spin {
  100% {transform: rotate(360deg);}
}

/*
.cls-5, .cls-6 {
  stroke-width: 0px;
}
*/

.arrow {
  fill: #36a2cc;
  opacity: 0;
}

#Laag_1:hover .arrow {
  fill: #36a2cc;
  transform-origin: 50% 50%;
  animation: spin 3s infinite;
  -webkit-transition-delay: now;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  opacity: 1;
}

@keyframes spin {
  100% {transform: rotate(360deg);}
}


#Laag_1:hover .left {
  animation: left;
	animation-duration: 3s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}

@keyframes left {
  0% {transform: translateX(0px);}
  50% {transform: translateX(21px);}
  60% {transform: translate(21px, -15px);}
  70% {transform: translate(21px);}
  100% {transform: translateX(0px);}
  }

#Laag_1:hover .right {
  animation-name: moving;
	animation-duration: 3s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}

@keyframes moving {
	0% {transform: translateX(0px);}
	50% {transform: translateX(-24px);}
	60% {transform: translate(-24px, -15px);}
  70% {transform: translate(-24px);}
	100% {transform: translateX(0px);}
}


#Laag_1:hover line.cls-3.lijn-1 {
  animation: filled-line 1s;
  animation-duration: 3s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}

@keyframes filled-line {
  0% {transform: scaleX(1)}
  50% {transform: scaleX(0)}
  80% {transform: scaleX(0)}
  100% {transform: scaleX(1)}
}

#Laag_1:hover circle.cls-1.m-circle {
  animation: midden-circle;
	animation-duration: 3s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}

@keyframes midden-circle {
	0% {transform: translateY(0px);}
	50% {transform: translateY(-21px);}
  100% {transform: translateY(0px);}
}

#Laag_1:hover line.cls-1.l-check {
  animation: mid-line 1s;
  animation-duration: 3s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}

@keyframes mid-line {
	0% {transform: translateY(0px);}
	50% {transform: translateY(-15px);}
  100% {transform: translateY(0px);}
}

rect.cls-2.cms-part.cms-vlak-klein {
  stroke-width: 0.5px;
  fill: rgb(239, 239, 239);
}

/* -- Email HTML templates (4) -- */

.top .bottom {
  fill: white;
}

.phonebody {
    fill: rgb(239, 239, 239);
}

.env {
  stroke-width: 1px;
}
 
rect.cls-4.bl1 {
  fill: #494848;
}

#Laag_1:hover .env {
  animation: shake 0.5s;
  animation-iteration-count: 3;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* -- Content coördinatie (5) -- */
polyline.cls-2.long-line {
  stroke: #494848;
  stroke-width: 1px;
  fill: white;
}     

path.main-line {
  stroke: #494848;
  stroke-width: 0.5px;
}

circle.cls-1.inline-circle {
  stroke: #494848;
  stroke-width: 1px;
  fill: white;
}

line.cls-1.line-steel {
  stroke: #494848;
  stroke-width: 1px;
}

.first-cicrle {
  fill: #d7fae2;
  stroke-width: 0.5px;

}

circle.cls-3.first-cicrle {
  stroke: #36a2cc;
  fill: white;
}

path.frist-cicle {
  transition:0.5s;
}

#Laag_1:hover .first-cicrle {
  stroke: #36a2cc;
  fill: white;
  stroke-width: 1px;
  offset-path: path('M99.2 22.2 42.7 22.2 42.7 6.3 9 35.7 42 64.4 42 48.7 105.9 48.7 105.9 33 139.4 61.4 107.7 91 107.7 75.7 49.3 75.7');
  offset-distance: 0%;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: blue-ball 5s linear alternate infinite;
  display: inline-block;
  position: absolute;
  transition:0.5s;
}

@keyframes blue-ball {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

rect.cls-2.vlak-1, rect.cls-2.vlak-2 {
  stroke:#494848;
}

.vlak-1 {
  stroke-width: 0.5px;
  fill:white;

}

.vlak-2 {
stroke-width: 0.5px;
fill: rgb(239, 239, 239);
}


#Laag_1:hover .vlak-1 {
  animation: vlak-een 1.5s ease infinite;
  transition: all 2.4s;


}

@keyframes vlak-een {
  0% {
    width: 75%;
  }

  30% {
    width: 32%
  }

  60% {
    width: 32%
  }

  65% {
    width: 32%
  }
 
  100% {
    width: 75%;
  }
}

#Laag_1:hover .vlak-2 {
  animation: vlak-twee 1.5s ease infinite;
  transition-timing-function: linear;
  animation-delay: 0.1s;
}

@keyframes vlak-twee {
  0% { transform : translateY(0em) }
  50%  { transform : translateY(2.9em) }
  80%  { transform : translateY(0em) }
  100%  { transform : translateY(0em) }

}

#Laag_1:hover .copy-line {
  animation: copy-lines 1.5s ease infinite;
  transition: all 2.4s;
  animation-delay: 0.2s;
}

@keyframes copy-lines {
  0% {
    width: 37%;
  }

  50% {
    width: 75%
  }

  64% {
    width: 37%;
  }

  100% {
    width: 37%;
  }
}


/* -- CMS kennis (6) -- */
rect.cls-2.cms-part, 
path.cls-2.cms-part {
  stroke: #494848;
  fill: white;
  stroke-width: 0.5px;
}

path.cls-1.gear-1 {
  fill: #36a2cc;
}

#Laag_1:hover path.cls-1.gear-1 {
  fill: #36a2cc;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gear-cms-1 3s infinite;
  -webkit-transition-delay: now;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@keyframes gear-cms-1 {
100% {
  transform: rotate(360deg);}
}

path.cls-3.gear-2 {
  fill: #a2def6;
  stroke: #36a2cc;
  stroke-width: 1px;
}

#Laag_1:hover path.cls-3.gear-2 {
  fill: #a2def6;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gear-cms-2 3s infinite;
  -webkit-transition-delay: now;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

#Laag_1:hover .cms-part {
  transition: 1s ease-in-out;
}

@keyframes gear-cms-2 {
  100% {
    transform: rotate(-360deg);
  }
}