/*--------------------ANIMATIE PORTRET FOTOS---------------*/
#voor{
    animation: voor 8s infinite;
}
#achter{
    animation: achter 8s infinite;
}
@keyframes voor{
    30% {left: 0%; transform: scale(100%); transform: rotate(0deg);}
    40% {left: 30%; opacity: 1; z-index: 1; transform: scale(97%);transform: rotate(9deg);}
    50% {left: 0%; z-index: -1; opacity: 0.3; transform: scale(95%);transform: rotate(0deg);}
    51% {opacity: 1;transform: scale(100%);}
}
@keyframes achter{
    80% {left: 0%; transform: scale(100%); transform: rotate(0deg);}
    90% {left: 30%; opacity: 1; z-index: 1; transform: scale(97%);transform: rotate(9deg);}
    99% {left: 0%; z-index: -1; opacity: 0.3; transform: scale(95%);transform: rotate(0deg);}
    100% {opacity: 1;transform: scale(100%);}
}

/*--------------------ANIMATIE SKILLS (fix dit)---------------*/
#design{
    animation: proc75 1s forwards;
    animation-delay: 2s;
}
#design::before{
    content: "Design";
}
@keyframes proc75{
    0% {background-image: conic-gradient(white 0%, #F1D4DD 1% 100%);}
    10% {background-image: conic-gradient(white 9%, #F1D4DD 10% 100%);}
    20% {background-image: conic-gradient(white 19%, #F1D4DD 20% 100%);}
    30% {background-image: conic-gradient(white 29%, #F1D4DD 30% 100%);}
    40% {background-image: conic-gradient(white 39%, #F1D4DD 40% 100%);}
    50% {background-image: conic-gradient(white 49%, #F1D4DD 50% 100%);}
    60% {background-image: conic-gradient(white 59%, #F1D4DD 60% 100%);}
    70% {background-image: conic-gradient(white 69%, #F1D4DD 70% 100%);}
    80% {background-image: conic-gradient(white 74%, #F1D4DD 75% 100%);}
    100% {background-image: conic-gradient(white 74%, #F1D4DD 75% 100%);}
}

#film{
    animation: proc60 1s forwards;
    animation-delay: 2s;
}
#film::before{
    content: "Film";
}
@keyframes proc60{
    0% {background-image: conic-gradient(white 0%, #F1D4DD 1% 100%);}
    10% {background-image: conic-gradient(white 9%, #F1D4DD 10% 100%);}
    20% {background-image: conic-gradient(white 19%, #F1D4DD 20% 100%);}
    30% {background-image: conic-gradient(white 29%, #F1D4DD 30% 100%);}
    40% {background-image: conic-gradient(white 39%, #F1D4DD 40% 100%);}
    50% {background-image: conic-gradient(white 49%, #F1D4DD 50% 100%);}
    60% {background-image: conic-gradient(white 59%, #F1D4DD 60% 100%);}
    100% {background-image: conic-gradient(white 59%, #F1D4DD 60% 100%);}
}

#coderen{
    animation: proc90 1s forwards;
    animation-delay: 2s;
}
#coderen::before{
    content: "HTML & CSS";
}
@keyframes proc90{
    0% {background-image: conic-gradient(white 0%, #F1D4DD 1% 100%);}
    10% {background-image: conic-gradient(white 9%, #F1D4DD 10% 100%);}
    20% {background-image: conic-gradient(white 19%, #F1D4DD 20% 100%);}
    30% {background-image: conic-gradient(white 29%, #F1D4DD 30% 100%);}
    40% {background-image: conic-gradient(white 39%, #F1D4DD 40% 100%);}
    50% {background-image: conic-gradient(white 49%, #F1D4DD 50% 100%);}
    60% {background-image: conic-gradient(white 59%, #F1D4DD 60% 100%);}
    70% {background-image: conic-gradient(white 69%, #F1D4DD 70% 100%);}
    80% {background-image: conic-gradient(white 79%, #F1D4DD 80% 100%);}
    90% {background-image: conic-gradient(white 89%, #F1D4DD 90% 100%);}
    100% {background-image: conic-gradient(white 89%, #F1D4DD 90% 100%);}
}


/*--------------------- ANIMATIE FOTO GALLERIJ -------------------*/
.gallery > img, .gallery > video{
    animation-name: gallerij;
    animation-duration: 1.3s;
}

@keyframes gallerij{
    0% {transform: scale(1.0);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1.0);}
}

.a1{animation-delay: 1s;}
.a2{animation-delay: 1.2s;}
.a3{animation-delay: 1.4s;}
.a4{animation-delay: 1.6s;}
.a5{animation-delay: 1.8s;}
.a6{animation-delay: 2s;}
.a7{animation-delay: 2.2s;}
.a8{animation-delay: 2.4s;}
.a9{animation-delay: 2.6s;}
.a10{animation-delay: 2.8s;}


/*--------------------- ANIMATIE WERK -------------------*/
span{
    animation-name: slide;
    animation-duration: 3s;
    animation-iteration-count:infinite;
}

@keyframes slide{
    0% {margin-left: 0;}
    25% {margin-left: 0.5em;}
    50% {margin-left: 0;}
    75% {margin-left: 0.75em;}
    100% {margin-left: 0;}
}