/* CSS RESET --> in 'all.css' is een kleine CSS reset opgenomen die je naar eigen voorkeur kunt aanvullen of uitkleden */

/* BLOKJES --> Elk blokje (article) heeft een ID, die je kunt gebruiken als "namespace" om CSS alleen voor dat blokje te laten gelden */


/*************/
/* ANIMATIES */
/*************/

/* ALGEMENE CSS */
.animation-basis > div {
   position:absolute;
   width:20%; height:20%;
   padding:2%;
   font-size:.66em;
   line-height:1em;
   display:flex;
   align-items:center;
   justify-content:center;
   text-align:center;
   background-color:dodgerblue;
   border-radius:30%;
}


/*************************/
/* ID = simpele-animatie */
/*************************/
#simpele-animatie div {
	left:10%; top:40%;
}

#simpele-animatie:hover div{
	/* your code */
	animation-name:naar-rechts;
	animation-duration: 1s;
}

@keyframes naar-rechts {
 	/* your code */
	from {left:10%;}
  	to {left:70%;}
}


/******************/
/* ID = herhalend */
/******************/
#herhalend div:nth-of-type(1){
	left:10%; top:25%;
}

#herhalend div:nth-of-type(2){
	left:10%; top:55%;
}

#herhalend:hover div:nth-of-type(1){
	/* your code */
	animation-name:naar-rechts;
	animation-duration: 1s;
	animation-iteration-count:infinite;
}

#herhalend:hover div:nth-of-type(2){
	/* your code */
	animation-name:naar-rechts;
	animation-duration: 1s;
	animation-iteration-count:3;
}


/*****************/
/* ID = pauzeren */
/*****************/
#pauzeren div{
   left:10%; top:40%;
   /* your code */
   animation-name:naar-rechts;
   animation-duration: 1s;
   animation-iteration-count:infinite;
   animation-play-state: paused;
}

#pauzeren:hover div {
   /* your code */
   animation-play-state: running;
}

#pauzeren div::before {
   content:"paused";
}

#pauzeren:hover div::before {
   content:"running";
}


/*********************/
/* ID = heen-en-weer */
/*********************/
#heen-en-weer div {
   left:10%;
   /* your code */
   animation-name:naar-rechts;
   animation-duration: 1s;
   animation-iteration-count:infinite;
   animation-play-state: paused;
}

#heen-en-weer div:nth-of-type(1){
   top:25%;
   /* your code */
   animation-direction:alternate;
}

#heen-en-weer div:nth-of-type(2){
   top:55%;
   /* your code */
   animation-direction:alternate-reverse;
}

#heen-en-weer:hover div {
   /* your code */
   animation-play-state: running;
}


/***************/
/* ID = easing */
/***************/
#easing div {
   left:10%;
   /* your code */
   animation-name:naar-rechts;
   animation-duration:3s;
   animation-iteration-count:infinite;
   animation-play-state:paused;
}

#easing div:nth-of-type(1){
   top:4%;
   /* your code */
   animation-timing-function:ease-in;
}
#easing div:nth-of-type(2){
   top:28%;
   /* your code */
   animation-timing-function:ease-in-out;
}
#easing div:nth-of-type(3){
   top:52%;
   /* your code */
   animation-timing-function:linear;
}
#easing div:nth-of-type(4){
   top:76%;
   /* your code */
   animation-timing-function:ease-out;
}

#easing:hover div {
   /* your code */
   animation-play-state:running;
}


/******************/
/* ID = vertraagd */
/******************/
#vertraagd div {
   left:10%;
   /* your code */
   animation-name:naar-rechts;
   animation-duration: 1s;
   animation-iteration-count:infinite;
   animation-play-state:paused;
}

#vertraagd div:nth-of-type(1) {
	top:25%;
}

#vertraagd div:nth-of-type(2) {
   top:55%;
   /* your code */
   animation-delay:1s;
}

#vertraagd:hover div {
   /* your code */
   animation-play-state:running;
}


/*******************************/
/* ID = blijf-op-eind-of-start */
/*******************************/
#blijf-op-eind-of-terug-naar-start div:nth-of-type(1){
	left:10%; top:25%;
}

#blijf-op-eind-of-terug-naar-start div:nth-of-type(2){
	left:10%; top:55%;
}

#blijf-op-eind-of-terug-naar-start:hover div:nth-of-type(1){
   /* your code */
   animation-name:naar-rechts;
   animation-duration:1s;
   animation-fill-mode:backwards;
}

#blijf-op-eind-of-terug-naar-start:hover div:nth-of-type(2){
	/* your code */
	animation-name:naar-rechts;
	animation-duration:1s;
	animation-fill-mode:forwards;
}


/**************/
/* ID = steps */
/**************/
#steps div{
   left:10%; top:40%;
   /* your code */
   animation-name:naar-rechts;
   animation-duration: 2s;
   animation-iteration-count:infinite;
   animation-timing-function: steps(5);
   animation-timing-function: steps(5, jump-none);
   animation-play-state: paused;
}

#steps:hover div {
   /* your code */
   animation-play-state: running;
}


/******************/
/* ID = shorthand */
/******************/
#shorthand div{
   left:10%; top:40%;
   /* your code */
   animation:naar-rechts 1s infinite ease-in-out alternate paused;
}

#shorthand:hover div{
	/* your code */
	animation-play-state:running;
}


/********************/
/* ID = alles-samen */
/********************/
#alles-samen div:nth-of-type(1){
   left:10%; top:25%;
   /* your code */
   animation:naar-rechts 1s infinite ease-in-out alternate paused;
}

#alles-samen div:nth-of-type(2){
   left:10%; top:55%;
   /* your code */
   animation:naar-rechts 1s infinite ease-in-out alternate-reverse paused forwards;
}

#alles-samen:hover div {
	/* your code */
	animation-play-state:running;
}


/***********************/
/* ID = negative-delay */
/***********************/
#negative-delay div {
   /* your code */
   animation:naar-rechts 1s ease-in-out infinite alternate paused;
}

#negative-delay div:nth-of-type(1){
   left:10%; top:25%;
   /* your code */
   animation-delay:0;
}

#negative-delay div:nth-of-type(2){
   left:10%; top:55%;
   /* your code */
   animation-delay:-.5s;
}

#negative-delay:hover div {
   /* your code */
   animation-play-state:running;
}


/***********************/
/* ID = meer-keyframes */
/***********************/
@keyframes rondje-lopen {
	0% { left:10%; top:10%; }
  	25% { left:70%; top:10%; }
	50% { left:70%; top:70%; }
	75% { left:10%; top:70%; }
	100% { left:10%; top:10%; }
}

#meer-keyframes div{
   left:10%; top:10%;
   /* your code */
   animation:rondje-lopen 2s infinite linear paused;
}

#meer-keyframes:hover div{
	/* your code */
	animation-play-state:running;
}


/***********************/
/* ID = meer-elementen */
/***********************/
#meer-elementen div {
   left:10%; top:10%;
   /* your code */
   animation:rondje-lopen 4s infinite linear paused;
}

#meer-elementen div:nth-of-type(1) { 
	/* your code */
	animation-delay:0;
}

#meer-elementen div:nth-of-type(2) { 
	/* your code */
	animation-delay:-1s; 
}

#meer-elementen div:nth-of-type(3) { 
	/* your code */
	animation-delay:-2s; 
}

#meer-elementen div:nth-of-type(4) { 
	/* your code */
	animation-delay:-3s; 
}

#meer-elementen:hover div {
	/* your code */
	animation-play-state:running;
}


/************************/
/* ID = meer-properties */
/************************/
#meer-properties div{
   left:10%; top:10%;
   /* your code */
   animation:raar-rondje 4s infinite linear paused;
}

#meer-properties:hover div{
	/* your code */
	animation-play-state:running;
}

@keyframes raar-rondje {
	/* your code */
	0% {
      left:10%; top:10%;
      font-size:.66em;
      background-color:dodgerblue;
      transform:rotate(0deg);
	}
  	25% {
	  	left:60%; top:10%;
		background-color:yellowgreen;
		border-radius:50% 50% 0 50%;
	}
	50% {
      width:40%; height:40%;
      left:50%; top:50%;
      font-size:1.8em;
      line-height:1em;
      background-color:gold;
      border-radius:0 50% 50% 50%;
	}
	75% {
		left:10%; top:60%;
		background-color:crimson;
		border-radius:50% 50% 0 50%;
	}
	100% {
	  	left:10%; top:10%;
		font-size:.66em;
		background-color:dodgerblue;
		transform:rotate(-360deg);
	}
}


/************************/
/* ID = rondom-een-hoek */
/************************/
#rondom-een-hoek div {
	left:30%; top:30%;
	border-radius:30% 30% 0 30%;
	/* your code */
	transform-origin:right bottom;
	animation:rondom-een-hoek 2s linear infinite paused;
}

#rondom-een-hoek:hover div {
	/* your code */
	animation-play-state:running;
}

@keyframes rondom-een-hoek {
   /* your code */
   from { transform:rotate(0deg); }
   to { transform:rotate(360deg); }
}


/***************/
/* ID = cirkel */
/***************/
#cirkel div {
   left:40%; top:40%;    
   /* your code */
   animation:cirkel 2s linear infinite paused;
}

#cirkel:hover div {
   /* your code */
   animation-play-state:running;
}

@keyframes cirkel {
      /* your code */
      from { transform:rotate(0deg) translateY(150%); }
      to { transform:rotate(360deg) translateY(150%); }
}


/* spoor */
#cirkel::before {
   content:"";
   position:absolute;
   width:62.5%; height:62.5%;
   left:18.75%; top:18.75%;
   border-style:solid;
   border-width:.2em .4em .6em 0;
   border-color:grey grey transparent transparent; 
   border-radius:50% 50% 50% 0;
   opacity:0;
   transition:.5s;
   animation:spoor 2s linear infinite paused;
}

#cirkel:hover::before {
   opacity:.125;
   transition:3s;
   animation-play-state:running;
}

@keyframes spoor {
   from { transform:rotate(43deg) scale(1.03); }
   to { transform:rotate(403deg) scale(1.03); }
}


/***********************/
/* ID = rechtop-cirkel */
/***********************/
#rechtop-cirkel > div {
   /* your code */
   left:40%; top:40%;
   animation:rechtop-cirkel 2s linear infinite paused;
}

#rechtop-cirkel:hover > div {
   /* your code */
   animation-play-state:running;
}

@keyframes rechtop-cirkel {
   /* your code */
   from { transform:rotate(0turn) translateY(150%)  rotate(1turn); }
   to { transform:rotate(1turn) translateY(150%)  rotate(0turn); }
}

/* spoor */
#rechtop-cirkel::before {
   content:"";
   position:absolute;
   width:62.5%; height:62.5%;
   left:18.75%; top:18.75%;
   border-style:solid;
   border-width:.2em .4em .6em 0;
   border-color:grey grey transparent transparent; 
   border-radius:50% 50% 50% 0;
   opacity:0;
   transition:.5s;
   animation:spoor 2s linear infinite paused;
}

#rechtop-cirkel:hover::before {
   opacity:.125;
   transition:3s;
   animation-play-state:running;
}


/*******************/
/* ID = drieD-flip */
/*******************/
#drieD-flip div {
   left:40%; top:40%;
   /* your code */
   animation:drieD-flip 1.5s linear infinite paused;
}

#drieD-flip:hover div {
   /* your code */
   animation-play-state:running;
}

@keyframes drieD-flip {
   /* your code */
   from { transform:perspective(12.5em) rotateX(0); }
   to { transform:perspective(12.5em) rotateX(360deg); }
}


/**************************/
/* ID = drieD-bottom-flip */
/**************************/
#drieD-bottom-flip div {
	left:40%; top:30%;
	border-radius:30% 30% 0 0;
	/* your code */
	transform-origin:center bottom;
	animation:drieD-flip 1.5s linear infinite paused;
}

#drieD-bottom-flip:hover div {
   /* your code */
   animation-play-state:running;
}


/*****************************/
/* ID = drieD-diagonale-flip */
/*****************************/
#drieD-diagonale-flip div {
	left:40%; top:40%;
	border-radius:0 30%;
	/* your code */
	animation:drieD-diagonale-flip 1.5s linear infinite paused;
}

#drieD-diagonale-flip:hover > div {
    /* your code */
	animation-play-state:running;
}

@keyframes drieD-diagonale-flip {
	/* your code */
	from { transform:perspective(12.5em) rotate3d(1, 1, 0, 0); }
	to { transform:perspective(12.5em) rotate3d(1, 1, 0, 360deg); }
}


/*********************/
/* ID = translate-in */
/*********************/
/* soms (vaak) heb je alleen een transform (bijv. translateY) nodig voor een animatie */
#translate-in div {
	/* your-code */
	transition:.5s;
	transition-timing-function:ease-in;
}

#translate-in div:nth-of-type(1) {
	left:30%; top:30%;
	border-radius:30% 0 0 0;
	/* your-code */
	transform:translate(-50%, -50%);
}

#translate-in div:nth-of-type(2) {
	left:50%; top:30%;
	border-radius:0 30% 0 0;
	/* your-code */
	transform:translate(50%, -50%);
}

#translate-in div:nth-of-type(3) {
	left:30%; top:50%;
	border-radius:0 0 0 30%;
	/* your-code */
	transform:translate(-50%, 50%);
}

#translate-in div:nth-of-type(4) {
	left:50%; top:50%;
	border-radius:0 0 30% 0;
	/* your-code */
	transform:translate(50%, 50%);
}

/* hover effect */
#translate-in:hover div {
	transform:none;
}


/******************/
/* ID = rotate-in */
/******************/
#rotate-in div {
	/* your-code */
	transition:.5s;
	transition-timing-function:ease-in;
	transform:rotate(-270deg);
}

#rotate-in div:nth-of-type(1) {
	left:30%; top:30%;
	border-radius:0 30% 30% 30%;
	/* your-code */
	transform-origin:left top;
}

#rotate-in div:nth-of-type(2) {
	left:50%; top:30%;
	border-radius:30% 0 30% 30%;
	/* your-code */
	transform-origin:right top;
}

#rotate-in div:nth-of-type(3) {
	left:30%; top:50%;
	border-radius:30% 30% 30% 0;
	/* your-code */
	transform-origin:left bottom;
}

#rotate-in div:nth-of-type(4) {
	left:50%; top:50%;
	border-radius:30% 30% 0 30%;
	/* your-code */
	transform-origin:right bottom;
}

/* hover effect */
#rotate-in:hover div {
	transform:none;
}


/**************************/
/* ID = delayed-rotate-in */
/**************************/
#delayed-rotate-in div {
	/* your-code */
	transition:.5s;
	transition-timing-function:ease-in;
	transform:rotate(-270deg);
}

#delayed-rotate-in div:nth-of-type(1) {
	left:30%; top:30%;
	border-radius:0 30% 30% 30%;
	/* your-code */
	transform-origin:left top;
	transition-delay:0s;
}

#delayed-rotate-in div:nth-of-type(2) {
	left:50%; top:30%;
	border-radius:30% 0 30% 30%;
	/* your-code */
	transform-origin:right top;
	transition-delay:.25s;
}

#delayed-rotate-in div:nth-of-type(3) {
	left:30%; top:50%;
	border-radius:30% 30% 30% 0;
	/* your-code */
	transform-origin:left bottom;
	transition-delay:.5s;
}

#delayed-rotate-in div:nth-of-type(4) {
	left:50%; top:50%;
	border-radius:30% 30% 0 30%;
	/* your-code */
	transform-origin:right bottom;
	transition-delay:.75s;
}

/* hover effect */
#delayed-rotate-in:hover div {
	transform:none;
}


/*********************************/
/* ID = delayed-rotate-to-square */
/*********************************/
#delayed-rotate-to-square div {
	/* your-code */
	transition:.5s;
	transition-timing-function:ease-in;
	transform:rotate(-270deg);
}

#delayed-rotate-to-square div:nth-of-type(1) {
	left:30%; top:30%;
	border-radius:0 30% 30% 30%;
	/* your-code */
	transform-origin:left top;
	transition-delay:0s;
}

#delayed-rotate-to-square div:nth-of-type(2) {
	left:50%; top:30%;
	border-radius:30% 0 30% 30%;
	/* your-code */
	transform-origin:right top;
	transition-delay:.25s;
}

#delayed-rotate-to-square div:nth-of-type(3) {
	left:30%; top:50%;
	border-radius:30% 30% 30% 0;
	/* your-code */
	transform-origin:left bottom;
	transition-delay:.5s;
}

#delayed-rotate-to-square div:nth-of-type(4) {
	left:50%; top:50%;
	border-radius:30% 30% 0 30%;
	/* your-code */
	transform-origin:right bottom;
	transition-delay:.75s;
}

#delayed-rotate-to-square:hover div {
	/* your-code */
	transform:none;
}

#delayed-rotate-to-square:hover div:nth-of-type(1) {
	/* your-code */
	border-radius:0 0 30% 0;
}

#delayed-rotate-to-square:hover div:nth-of-type(2) {
	/* your-code */
	border-radius:0 0 0 30%;
}

#delayed-rotate-to-square:hover div:nth-of-type(3) {
	/* your-code */
	border-radius:0 30% 0 0;
}

#delayed-rotate-to-square:hover div:nth-of-type(4) {
	/* your-code */
	border-radius:30% 0 0 0;
}


/*********************/
/* ID = choreografie */
/*********************/
#choreografie div {
   width:20%; height:20%;
   animation:2s ease-out infinite alternate paused;
}

#choreografie div:nth-of-type(1) {
   animation-name:blok1;
}
#choreografie div:nth-of-type(2) {
   animation-name:blok2;
}
#choreografie div:nth-of-type(3) {
   animation-name:blok3;
}
#choreografie div:nth-of-type(4) {
   animation-name:blok4;
}

#choreografie:hover div {
   animation-play-state:running;
}

@keyframes blok1 {    
   0%, 55% { left:10%; top:10%; }
   90%, 100% { left:10%; top:40%; }

   0%, 10% { border-radius:30%;}
   45%, 100% { border-radius:0;}

   0%, 100% { background-color:dodgerblue; }
}

@keyframes blok2 {
   0%, 10% { left:70%; top:10%; }
   45%, 55% { left:30%; top:10%; }
   90%, 100% { left:30%; top:40%; }

   0%, 10% { border-radius:30%; }
   45%, 100% { border-radius:0;}

   0%, 10% { background-color:dodgerblue; }
   45%, 100% { background-color:yellowgreen; }
}

@keyframes blok3 {
   0%, 10% { left:10%; top:70%; }
   45%, 55% { left:50%; top:70%; }
   90%, 100% { left:50%; top:40%; }

   0%, 10% { border-radius:30%;}
   45%, 100% { border-radius:0;}

   0%, 10% { background-color:dodgerblue; }
   45%, 100% { background-color:gold; }
}

@keyframes blok4 {
   0%, 10% { left:70%; top:70%; }
   45%, 55% { left:70%; top:70%; }
   90%, 100% { left:70%; top:40%; }

   0%, 10% { border-radius:30%;}
   45%, 100% { border-radius:0;}

   0%, 10% { background-color:dodgerblue; }
   45%, 100% { background-color:crimson; }
}


/****************/
/* ID = move-in */
/****************/
#move-in {
	padding:0;
	overflow:hidden;
}

/* artikelnaam */
#move-in h2 {
	position:absolute;
	left:0; right:0; top:0;
	margin:0; padding:0 1rem;
	line-height:3rem;
	background-color:dodgerblue;
	z-index:1;
	/* your code */
	transform:translateY(-100%);
	transition:.75s;
}

#move-in:hover h2 {
	/* your code */
	transform:translateY(0);
}

/* plaatje */
#move-in img {
	display:block;
	width:100%;
}

/* omschrijving */
#move-in p {
	position:absolute;
	left:0; right:0; top:3rem; bottom:0;
	margin:0; padding:.5rem 1em;
	background-color:rgba(255,255,255,.75);
	/* your code */
	transform:translateY(100%);
	transition:.75s;
}

#move-in:hover p  {
	/* your code */
	transform:translateY(0);
}

/* rating */
#move-in a {
	position:absolute;
	left:1em; bottom:.5em;
	line-height:1em;
	text-decoration:none;
	/* your code */
	transform:translateX(calc(-100% - 1em));
	transition:.75s;
}

#move-in:hover a  {
	/* your code */
	transform:translateX(0);
}

#move-in a span {
	display:block;
	font-size:.66em;
	text-decoration:underline;
}

/* koopknop */
#move-in button {
	position:absolute;
	line-height:2em;
	right:1em; bottom:.5em;
	margin:0;
	font-size:1em;
	color:var(--main-color);
	background-color:dodgerblue;
	border:none;
	border-radius:.5em;
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
	/* your code */
	transform:translateX(calc(100% + 1em));
	transition:.75s;
}

#move-in:hover button  {
	/* your code */
	transform:translateX(0);
}


/**********************/
/* ID = fancy-move-in */
/**********************/
#fancy-move-in {
	padding:0;
	overflow:hidden;
}

/* artikelnaam */
#fancy-move-in h2 {
	position:absolute;
	left:0; right:0; top:0;
	margin:0; padding:0 1rem;
	line-height:3rem;
	background-color:dodgerblue;
	z-index:1;
	transform-origin:right top;
	transform:rotate(90deg);
	transition:.5s;
}

#fancy-move-in:hover h2 {
	transform:rotate(0);
	transition:.5s ease-in;
}

/* plaatje */
#fancy-move-in img {
	display:block;
	width:100%; height:100%;
}

/* omschrijving */
#fancy-move-in p {
	position:absolute;
	left:0; right:0; top:3rem; bottom:0;
	margin:0; padding:.5rem 1em;
	background-color:rgba(255,255,255,.75);
	transform-origin:left bottom;
	transform:rotate(90deg);
	transition:.5s;
}

#fancy-move-in:hover p  {
	transform:rotate(0);
	transition:.5s ease-in;
}

/* rating */
#fancy-move-in a {
	position:absolute;
	left:1em; bottom:.5em;
	line-height:1em;
	text-decoration:none;
	transform-origin:-1em -.5em;
	transform:rotate(90deg);
	transition:.5s;
}

#fancy-move-in:hover a  {
	transform:rotate(0);
	transition:.5s .25s ease-in;
}

#fancy-move-in a span {
	display:block;
	font-size:.66em;
	text-decoration:underline;
}

/* koopknop */
#fancy-move-in button {
	position:absolute;
	line-height:2em;
	right:1em; bottom:.5em;
	margin:0;
	font-size:1em;
	color:var(--main-color);
	background-color:dodgerblue;
	border:none;
	border-radius:.5em;
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
	transform-origin:calc(100% + 1em) -.5em;
	transform:rotate(-90deg);
	transition:.5s;
}

#fancy-move-in:hover button  {
	transform:rotate(0);
	transition:.5s .25s ease-in;
}


/**********************/
/* ID = drieD-move-in */
/**********************/
#drieD-move-in {
	padding:0;
	overflow:hidden;
	perspective:20em;
}

/* artikelnaam */
#drieD-move-in h2 {
	position:absolute;
	left:0; right:0; top:0;
	margin:0; padding:0 1rem;
	line-height:3rem;
	background-color:dodgerblue;
	z-index:1;
	transform-origin:center top;
	transform:rotateX(-180deg);
	transition:.5s;
}

#drieD-move-in:hover h2 {
	transform:rotateX(0);
	transition:.75s ease-in;
}

/* plaatje */
#drieD-move-in img {
	display:block;
	width:100%; height:100%;
}

/* omschrijving */
#drieD-move-in p {
	position:absolute;
	left:0; right:0; top:3rem; bottom:0;
	margin:0; padding:.5rem 1em;
	background-color:rgba(255,255,255,.75);
	transform-origin:center bottom;
	transform:rotateX(180deg);
	transition:.5s;
}

#drieD-move-in:hover p  {
	transform:rotateX(0);
	transition:1s .25s ease-in;
}

/* rating */
#drieD-move-in a {
	position:absolute;
	left:1em; bottom:.5em;
	line-height:1em;
	text-decoration:none;
	transform-origin:-1em calc(100% + .5em);
	transform:rotateY(-180deg) rotateX(-180deg);
	transition:.5s;
}

#drieD-move-in:hover a  {
	transform:rotateY(0) rotateX(0);
	transition:.75s .75s ease-in;
}

#drieD-move-in a span {
	display:block;
	font-size:.66em;
	text-decoration:underline;
}

/* koopknop */
#drieD-move-in button {
	position:absolute;
	line-height:2em;
	right:1em; bottom:.5em;
	margin:0;
	font-size:1em;
	color:var(--main-color);
	background-color:dodgerblue;
	border:none;
	border-radius:.5em;
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
	transform-origin:calc(100% + 1em) calc(100% + .5em);
	transform:rotateY(180deg) rotateX(-180deg);
	transition:.5s;
}

#drieD-move-in:hover button  {
	transform:rotateY(0) rotateX(0);
	transition:.75s .75s ease-in;
}


/****************************/
/* ID = fancy-drieD-move-in */
/****************************/
#fancy-drieD-move-in {
	padding:0;
	overflow:hidden;
	perspective:20em;
}

/* artikelnaam */
#fancy-drieD-move-in h2 {
	position:absolute;
	left:0; right:0; top:0;
	margin:0; padding:0 1rem;
	line-height:3rem;
	background-color:dodgerblue;
	z-index:1;
	transform-origin:center top;
	transform:rotateX(-180deg);
	transition:.5s;
}

#fancy-drieD-move-in:hover h2 {
	transform:rotateX(0);
	transition:.75s cubic-bezier(0.500, 0.000, 0.500, 1.650);
}

/* plaatje */
#fancy-drieD-move-in img {
	display:block;
	width:100%; height:100%;
}

/* omschrijving */
#fancy-drieD-move-in p {
	position:absolute;
	left:0; right:0; top:3rem; bottom:0;
	margin:0; padding:.5rem 1em;
	background-color:rgba(255,255,255,.75);
	transform-origin:center bottom;
	transform:rotateX(180deg);
	transition:.5s;
}

#fancy-drieD-move-in:hover p  {
	transform:rotateX(0);
	transition:1s .25s cubic-bezier(0.500, 0.000, 0.500, 1.650);
}

/* rating */
#fancy-drieD-move-in a {
	position:absolute;
	left:1em; bottom:.5em;
	line-height:1em;
	text-decoration:none;
	transform-origin:-1em calc(100% + .5em);
	transform:rotateY(-180deg) rotateX(-180deg);
	transition:.5s;
}

#fancy-drieD-move-in:hover a  {
	transform:rotateY(0) rotateX(0);
	transition:.75s .75s cubic-bezier(0.500, 0.000, 0.500, 1.650);
}

#fancy-drieD-move-in a span {
	display:block;
	font-size:.66em;
	text-decoration:underline;
}

/* koopknop */
#fancy-drieD-move-in button {
	position:absolute;
	line-height:2em;
	right:1em; bottom:.5em;
	margin:0;
	font-size:1em;
	color:var(--main-color);
	background-color:dodgerblue;
	border:none;
	border-radius:.5em;
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
	transform-origin:calc(100% + 1em) calc(100% + .5em);
	transform:rotateY(180deg) rotateX(-180deg);
	transition:.5s;
}

#fancy-drieD-move-in:hover button  {
	transform:rotateY(0) rotateX(0);
	transition:.75s .75s cubic-bezier(0.500, 0.000, 0.500, 1.650);
}


/*******************/
/* ID = off-canvas */
/*******************/
#off-canvas {
	overflow:hidden;
}

/* het menu */
#off-canvas div {
	position:absolute;
	with:100%; height:100%;
	left:0; top:0;
	padding:10%;
	background-color:dodgerblue;
	transform:translateX(-100%);
	transition:.5s;
}

#off-canvas div:hover  {
	transform:translateX(0);
}

/* het menu knopje */
#off-canvas div::before {
   content:"menu";
   position:absolute;
   width:1.5em; height:4.5em;
   right:-1.5em; top:calc(50% - 2.25em);
   font-size:1em;
   writing-mode:vertical-lr;
   background-color:inherit;
   border-radius:0 45% 45% 0 / 0 15% 15% 0;
   display:flex;
   justify-content:center;
   align-items:center;
}

/* het sluiten knopje */
#off-canvas div::after {
	content:"sluiten";
	position:absolute;
	height:1.5em;
	right:.5em; top:.5em;
	text-decoration:underline;
}


/*************************/
/* ID = fancy-off-canvas */
/*************************/
#fancy-off-canvas {
	overflow:hidden;
}

/* het menu */
#fancy-off-canvas div {
	position:absolute;
	with:100%; height:100%;
	left:0; top:0;
	padding:10%;
	background-color:dodgerblue;
	
	transform:rotate(90deg);
	transform-origin:top left;
	transition:.5s;
}

#fancy-off-canvas div:hover  {
	transform:rotate(0deg);
}

/* het menu knopje */
#fancy-off-canvas div::before {    
   content:"menu";
   position:absolute;
   width:4.5em; height:1.5em;
   left:calc(50% - 2.25em); top:-1.5em;
   font-size:1em;
   background-color:inherit;
   border-radius:15% 15% 0 0 / 45% 45% 0 0;
   display:flex;
   justify-content:center;
   align-items:center;
}

/* het sluiten knopje */
#fancy-off-canvas div::after {
   content:"sluiten";
   position:absolute;
   height:1.5em;
   right:.5em; top:.5em;
   text-decoration:underline;
}


/**********************/
/* ID = floating-menu */
/**********************/
#floating-menu nav {
   position:absolute;
   width:20%; height:20%;
   right:10%; bottom:10%;
}

/* menu items */
#floating-menu ul,
#floating-menu ul::after,
#floating-menu li,
#floating-menu a {
   position:absolute;
   left:0; right:0; top:0; bottom:0;
   border-radius:50%;
}

#floating-menu ul {
	--translateY:0;
   padding:0;
   list-style:none;
}

/* menu knop & item */
#floating-menu ul::after,
#floating-menu li {
   background-color:dodgerblue;
   transition:.75s;
}

#floating-menu li:nth-of-type(1) {
   /* your code */
   transform:rotate(7.5deg) translateY(var(--translateY)) rotate(-7.5deg);
}
#floating-menu li:nth-of-type(2) {
   /* your code */
   transform:rotate(-27.5deg) translateY(var(--translateY)) rotate(27.5deg);
}
#floating-menu li:nth-of-type(3) {
   /* your code */
   transform:rotate(-62.5deg) translateY(var(--translateY)) rotate(62.5deg);
}
#floating-menu li:nth-of-type(4) {
   /* your code */
   transform:rotate(-97.5deg) translateY(var(--translateY)) rotate(97.5deg);
}

#floating-menu:hover ul {
   --translateY:-150%;
}

/* menu knop en link */
#floating-menu ul::after,
#floating-menu a {
   color:var(--main-color);
   display:flex;
   justify-content:center;
   align-items:center;
}

#floating-menu ul::after {
	content:"menu";
}


/****************************/
/* ID = fancy-floating-menu */
/****************************/
#fancy-floating-menu nav {
   position:absolute;
   width:20%; height:20%;
   right:10%; bottom:10%;
}

/* menu items */
#fancy-floating-menu ul,
#fancy-floating-menu ul::after,
#fancy-floating-menu li,
#fancy-floating-menu a {
   position:absolute;
   left:0; right:0; top:0; bottom:0;
   border-radius:50%;
}

#fancy-floating-menu ul {
	--translateY:0;
   padding:0;
   list-style:none;
}

/* menu knop & item */
#fancy-floating-menu ul::after,
#fancy-floating-menu li {
   background-color:dodgerblue;
   transition:.75s;
}

#fancy-floating-menu li {
 transform:rotate(-135deg) scale(.1);
}

#fancy-floating-menu:hover li:nth-of-type(1) {
   /* your code */
  	transform:rotate(7.5deg) translateY(-150%) rotate(-7.5deg);
   transition:.75s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}
#fancy-floating-menu:hover li:nth-of-type(2) {
   /* your code */
   transform:rotate(-27.5deg) translateY(-150%) rotate(27.5deg);
   transition:.625s .125s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}
#fancy-floating-menu:hover li:nth-of-type(3) {
   /* your code */
   transform:rotate(-62.5deg) translateY(-150%) rotate(62.5deg);
   transition:.5s .25s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}
#fancy-floating-menu:hover li:nth-of-type(4) {
   /* your code */
   transform:rotate(-97.5deg) translateY(-150%) rotate(97.5deg);
   transition:.375s .375s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}

/* menu knop en link */
#fancy-floating-menu ul::after,
#fancy-floating-menu a {
   color:var(--main-color);
   display:flex;
   justify-content:center;
   align-items:center;
}

#fancy-floating-menu ul::after {
	content:"menu";
}

/* kruisje */
#fancy-floating-menu nav::before,
#fancy-floating-menu nav::after {
   content:"";
   position:absolute;
   width:12px; height:2px;
   left:calc(50% - 6px); top:calc(50% - 1px);
   background-color:var(--main-color);

   transform: translateY(8px);
   transition:.375s;
	z-index:10;
}

#fancy-floating-menu:hover nav::before {
   transform: translateY(12px) rotate(45deg);
   transition:.5s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}
#fancy-floating-menu:hover nav::after {
   transform: translateY(12px) rotate(-45deg);
   transition:.5s cubic-bezier(0.000, 0.000, 0.333, 1.500);
}


/**************/
/* ID = rotor */
/**************/
#rotor {
   display:grid;
   grid-template-columns:1fr 1fr;
}
#rotor ul {
   position:relative;
   width:50%; height:50%; 
   margin:0; padding:0;
   justify-self:center;
   align-self:center;
   list-style:none;
}

#rotor ul::after {
   content:attr(class);
   position:absolute;
   left:50%; top:110%;
   font-size:.66em;
   white-space:nowrap;
   transform:translateX(-50%);
}

#rotor li {
   position:absolute;
   width:20%; height:20%;
   left:80%; top:40%;
   background-color:dodgerblue;
   border-radius:50%;
   transform-origin:-150% center;
   opacity: calc(1 - (var(--rotor-number) - 1) / 10);
}

#rotor li:nth-of-type(1) { --rotor-number:1 }
#rotor li:nth-of-type(2) { --rotor-number:2 }
#rotor li:nth-of-type(3) { --rotor-number:3 }
#rotor li:nth-of-type(4) { --rotor-number:4 }
#rotor li:nth-of-type(5) { --rotor-number:5 }

#rotor li:nth-of-type(6) { --rotor-number:6 }
#rotor li:nth-of-type(7) { --rotor-number:7 }
#rotor li:nth-of-type(8) { --rotor-number:8 }
#rotor li:nth-of-type(9) { --rotor-number:9 }
#rotor li:nth-of-type(10) { --rotor-number:10 }

#rotor ul:nth-of-type(1) li {
   animation:rotor 2s infinite linear paused;
}
#rotor ul:nth-of-type(2) li {
   animation:rotor 2s infinite steps(10) paused;
}
#rotor ul:nth-of-type(3) li {
   animation:rotor 2s infinite steps(8) paused;
}
#rotor ul:nth-of-type(4) li {
   animation:rotor 2s infinite steps(12) paused;
}

#rotor:hover ul li {
   animation-play-state:running;
}

@keyframes rotor {
   from{ transform:rotate( calc( 1turn + (var(--rotor-number) - 1) / 10 * 1turn ) ); }
   to{ transform:rotate( calc( (var(--rotor-number) - 1) / 10 * 1turn ) ); }  
}


/************************/
/* ID = draaiende-kubus */
/************************/
@keyframes draaiende-kubus {
	from{transform:rotateY(0turn) translateZ(calc(var(--maat) / 2));}	
	to{transform:rotateY(1turn) translateZ(calc(var(--maat) / 2));}	
}

#draaiende-kubus > div {
	--maat:6em;
	--draaiTijd:10s;
   position: absolute;
   width:var(--maat); height:var(--maat);
   left:calc(50% - var(--maat) / 2 ); top:calc(50% - var(--maat) / 2 );
	perspective-origin:center calc(var(--maat) / -2 );
	perspective:calc(var(--maat) * 3 );
	transform-style:preserve-3d;
}

#draaiende-kubus div div {
	position:absolute;
	width:100%; height:100%;
	background-image:linear-gradient(135deg,#1E90FF99 25%,#0059b399 75%);
	animation:draaiende-kubus var(--draaiTijd) linear infinite paused;
}

#draaiende-kubus div div:nth-of-type(1) {
	animation-delay:calc(var(--draaiTijd) / -4 * 0);
}
#draaiende-kubus div div:nth-of-type(2) {
	animation-delay:calc(var(--draaiTijd) / -4 * 1);
}
#draaiende-kubus div div:nth-of-type(3) {
	animation-delay:calc(var(--draaiTijd) / -4 * 2);
}
#draaiende-kubus div div:nth-of-type(4) {
	animation-delay:calc(var(--draaiTijd) / -4 * 3);
}

#draaiende-kubus:hover div div {
	animation-play-state:running;
}


/******************************/
/* ID = fancy-draaiende-kubus */
/******************************/
@keyframes fancy-draaiende-kubus {
	0%{perspective-origin:center calc(var(--maat) / -2 );}	
	100%{perspective-origin:center calc(100% + var(--maat) / 2 );}	
}

#fancy-draaiende-kubus > div {
	--maat:6em;
	--draaiTijd:10s;
   position: absolute;
   width:var(--maat); height:var(--maat);
   left:calc(50% - var(--maat) / 2 ); top:calc(50% - var(--maat) / 2 );
	perspective-origin:center calc(var(--maat) / -2 );
	perspective:calc(var(--maat) * 3 );
	transform-style:preserve-3d;
	animation:fancy-draaiende-kubus calc(var(--draaiTijd) / 3) ease-in-out infinite alternate paused;
}

#fancy-draaiende-kubus div div {
	position:absolute;
	width:100%; height:100%;
	background-image:linear-gradient(135deg,#1E90FF99 25%,#0059b399 75%);
	animation:draaiende-kubus var(--draaiTijd) linear infinite paused;
}

#fancy-draaiende-kubus div div:nth-of-type(1) {
	animation-delay:calc(var(--draaiTijd) / -4 * 0);
}
#fancy-draaiende-kubus div div:nth-of-type(2) {
	animation-delay:calc(var(--draaiTijd) / -4 * 1);
}
#fancy-draaiende-kubus div div:nth-of-type(3) {
	animation-delay:calc(var(--draaiTijd) / -4 * 2);
}
#fancy-draaiende-kubus div div:nth-of-type(4) {
	animation-delay:calc(var(--draaiTijd) / -4 * 3);
}

#fancy-draaiende-kubus:hover div {
	animation-play-state:running;
}


/******************************/
/* ID = draaiende-drieD-kubus */
/******************************/
@keyframes draaiende-drieD-kubus {
	0%{transform:rotateY(0turn) rotateX(0turn) rotateX(0turn);}	
	100%{transform:rotateY(1turn) rotateX(2turn) rotateX(3turn);}	
}

#draaiende-drieD-kubus {
	--maat:6em;
	--draaiTijd:10s;
	perspective-origin:center center;
	perspective:calc(var(--maat) * 3 );
	transform-style:preserve-3d;
}

#draaiende-drieD-kubus > div {
   position: absolute;
   width:var(--maat); height:var(--maat);
   left:calc(50% - var(--maat) / 2 ); top:calc(50% - var(--maat) / 2 );
	animation:draaiende-drieD-kubus calc(var(--draaiTijd) * 2) linear infinite paused;
	transform-style:preserve-3d;
}

#draaiende-drieD-kubus div div {
	position:absolute;
	width:100%; height:100%;
	background-image:linear-gradient(135deg,#1E90FF99 25%,#0059b399 75%);
	animation:draaiende-kubus var(--draaiTijd) linear infinite paused;
}

#draaiende-drieD-kubus div div:nth-of-type(1) {
	animation-delay:calc(var(--draaiTijd) / -4 * 0);
}
#draaiende-drieD-kubus div div:nth-of-type(2) {
	animation-delay:calc(var(--draaiTijd) / -4 * 1);
}
#draaiende-drieD-kubus div div:nth-of-type(3) {
	animation-delay:calc(var(--draaiTijd) / -4 * 2);
}
#draaiende-drieD-kubus div div:nth-of-type(4) {
	animation-delay:calc(var(--draaiTijd) / -4 * 3);
}

#draaiende-drieD-kubus:hover > div {
	animation-play-state:running;
}


/*******************************/
/* ID = draaiende-drieD-cirkel */
/*******************************/
@keyframes draaiende-drieD-cirkel {
	from{ transform:rotateY(0turn) translateZ(calc(var(--maat) * 2.25)); }
	to{ transform:rotateY(-1turn) translateZ(calc(var(--maat) * 2.25)); }
}

#draaiende-drieD-cirkel {
	padding:0;
}

#draaiende-drieD-cirkel > div {
	--maat:3.375em;
	--duur:8s;
   position: relative;
   width:100%; height:100%;
	perspective-origin:center calc(50% - var(--maat) * 3);
	perspective:calc(var(--maat) * 6);
	transform-style:preserve-3d;
}

#draaiende-drieD-cirkel div div {
   position: absolute;
   width:var(--maat); height:var(--maat);
	left:calc(50% - var(--maat) / 2); top:calc(50% - var(--maat) / 2 - var(--maat) * .5);
	border-radius:calc(var(--maat) * .3);
	
	display:flex;
	justify-content:center;
	align-items:center;
	animation: draaiende-drieD-cirkel var(--duur) linear infinite paused;
}

#draaiende-drieD-cirkel:hover div div {
	animation-play-state:running;
}

#draaiende-drieD-cirkel div div:nth-of-type(3n+1) { background-color:dodgerblue; }
#draaiende-drieD-cirkel div div:nth-of-type(3n+2) { background-color:dodgerblue; }
#draaiende-drieD-cirkel div div:nth-of-type(3n+3) { background-color:#0059b3; }

#draaiende-drieD-cirkel div div:nth-of-type(1) { animation-delay:calc(var(--duur) / -12 * 12); }
#draaiende-drieD-cirkel div div:nth-of-type(2) { animation-delay:calc(var(--duur) / -12 * 11); }
#draaiende-drieD-cirkel div div:nth-of-type(3) { animation-delay:calc(var(--duur) / -12 * 10); }
#draaiende-drieD-cirkel div div:nth-of-type(4) { animation-delay:calc(var(--duur) / -12 * 9); }
#draaiende-drieD-cirkel div div:nth-of-type(5) { animation-delay:calc(var(--duur) / -12 * 8); }
#draaiende-drieD-cirkel div div:nth-of-type(6) { animation-delay:calc(var(--duur) / -12 * 7); }
#draaiende-drieD-cirkel div div:nth-of-type(7) { animation-delay:calc(var(--duur) / -12 * 6); }
#draaiende-drieD-cirkel div div:nth-of-type(8) { animation-delay:calc(var(--duur) / -12 * 5); }
#draaiende-drieD-cirkel div div:nth-of-type(9) { animation-delay:calc(var(--duur) / -12 * 4); }
#draaiende-drieD-cirkel div div:nth-of-type(10) { animation-delay:calc(var(--duur) / -12 * 3); }
#draaiende-drieD-cirkel div div:nth-of-type(11) { animation-delay:calc(var(--duur) / -12 * 2); }
#draaiende-drieD-cirkel div div:nth-of-type(12) { animation-delay:calc(var(--duur) / -12 * 1); }


/*************************************/
/* ID = draaiende-drieD-cirkel-recht */
/*************************************/
@keyframes draaiende-drieD-cirkel-recht {
	from{ transform:rotateY(0turn) translateZ(calc(var(--maat) * 2.25)) rotateY(-1turn); }
	to{ transform:rotateY(-1turn) translateZ(calc(var(--maat) * 2.25)) rotateY(0turn); }
}

#draaiende-drieD-cirkel-recht {
	padding:0;
}

#draaiende-drieD-cirkel-recht > div {
	--maat:3.375em;
	--duur:8s;
   position: relative;
   width:100%; height:100%;
	perspective-origin:center calc(50% - var(--maat) * 3);
	perspective:calc(var(--maat) * 6);
	transform-style:preserve-3d;
}

#draaiende-drieD-cirkel-recht div div {
   position: absolute;
   width:var(--maat); height:var(--maat);
	left:calc(50% - var(--maat) / 2); top:calc(50% - var(--maat) / 2 - var(--maat) * .5);
	border-radius:calc(var(--maat) * .3);
	
	display:flex;
	justify-content:center;
	align-items:center;
	animation: draaiende-drieD-cirkel-recht var(--duur) linear infinite paused;
}

#draaiende-drieD-cirkel-recht:hover div div {
	animation-play-state:running;
}

#draaiende-drieD-cirkel-recht div div:nth-of-type(3n+1) { background-color:dodgerblue; }
#draaiende-drieD-cirkel-recht div div:nth-of-type(3n+2) { background-color:dodgerblue; }
#draaiende-drieD-cirkel-recht div div:nth-of-type(3n+3) { background-color:#0059b3; }

#draaiende-drieD-cirkel-recht div div:nth-of-type(1) { animation-delay:calc(var(--duur) / -12 * 12); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(2) { animation-delay:calc(var(--duur) / -12 * 11); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(3) { animation-delay:calc(var(--duur) / -12 * 10); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(4) { animation-delay:calc(var(--duur) / -12 * 9); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(5) { animation-delay:calc(var(--duur) / -12 * 8); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(6) { animation-delay:calc(var(--duur) / -12 * 7); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(7) { animation-delay:calc(var(--duur) / -12 * 6); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(8) { animation-delay:calc(var(--duur) / -12 * 5); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(9) { animation-delay:calc(var(--duur) / -12 * 4); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(10) { animation-delay:calc(var(--duur) / -12 * 3); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(11) { animation-delay:calc(var(--duur) / -12 * 2); }
#draaiende-drieD-cirkel-recht div div:nth-of-type(12) { animation-delay:calc(var(--duur) / -12 * 1); }


/******************/
/* ID = stuiteren */
/******************/
#stuiteren div {
   position:absolute;
   background-color:dodgerblue;
   /* your code */
   animation:stuiteren 1s infinite alternate -1.5s paused;
}

#stuiteren:hover > div {
   /* your code */
   animation-play-state:running;
}

@keyframes stuiteren {
  	/* your code */
	from {
	  	width:45%; height:25%;
		left:27.5%; top:65%;
		border-radius:50%;
	}
  	to {
	  	width:32.5%; height:37.5%;
		left:33.75%; top:10%;
		border-radius:50%/45% 45% 55% 55%;
	}
}

/************************/
/* ID = fancy-stuiteren */
/************************/
/* bal */
#fancy-stuiteren div:last-child {
   position:absolute;
   width:35%; height:35%;
   left:32.5%;
   background-color:dodgerblue;

   transform-origin:center bottom;
   animation:fancy-stuiteren 1s infinite alternate -1.5s paused;
}

#fancy-stuiteren:hover > div:last-child {
	animation-play-state:running;
}

@keyframes fancy-stuiteren {
   0%, 4% { border-radius:50% 50% 5% 5% / 85% 85% 15% 15%; }
   25%, 100% { border-radius:50% / 45% 45% 55% 55%; }

   0%, 10% { bottom:10%; }
   92%, 100% { bottom:55%; }

   0%, 4% { transform:scale(1.4, .5); }
   25% { transform:scale(1, 1); }
   100% { transform:scale(.95, 1.05); }
}

/* schaduw */
#fancy-stuiteren div:first-child {
   content:"";
   position:absolute;
   width:47.5%; height:4%;
   left:26.25%; bottom:9.5%;
   background-color:black;
   border-radius:50%;
   filter:blur(5px);

   transform-origin:center bottom;
   animation:fancy-shadow 1s infinite alternate -1.5s paused;
}

#fancy-stuiteren:hover > div:first-child {
   animation-play-state:running;
}

@keyframes fancy-shadow {
   0% { transform:scale(1.1); }
   10% { transform:scale(.9); }
   100% { transform:scale(.5); }

   0% { opacity:.25;}
   100% { opacity:.1;}
}


/*****************/
/* ID = hartslag */
/*****************/
#hartslag > div {
   position:absolute;
   left:32.5%; right:32.5%; top:32.5%; bottom:32.5%;
   /* your code */
   animation:hartslag 1s infinite linear paused;
}

#hartslag div::before,
#hartslag div::after {
	position:absolute;
	content:"";
	width:60%; height:90%;
	left:50%; bottom:0;
	background-color:dodgerblue;
	border-radius:10em 10em 0 0;
	transform:rotate(-45deg);
	transform-origin:0 100%;
}

#hartslag div::after {
	left:-10%;	
	transform:rotate(45deg);
	transform-origin:100% 100%;
}

#hartslag:hover div {
	/* your code */
	animation-play-state:running;
}

@keyframes hartslag {
	/* your code */
	0% {
		transform:scale(1);
	}
	5% {
		transform:scale(.85);
	}
	15% {
		transform:scale(1.5);
	}
	25% {
		transform:scale(.7);
	}
	35% {
		transform:scale(1.2);
	}
	45% {
		transform:scale(.85);
	}
	50%, 100% {
		transform:scale(1);
	}
}


/**********************/
/* ID = rad-voor-ogen */
/**********************/
#rad-voor-ogen > div {
	position:absolute;
	left:32.5%; right:32.5%; top:32.5%; bottom:32.5%;
	background-color:dodgerblue;
	border-radius:10em 10em 0 0;
}

/* ogen */
#rad-voor-ogen > div div {
	position:absolute;
	width:40%; height:0;
	padding-bottom:40%;
	top:30%;
	background-color:white;
	border-radius:50%;
	box-shadow:inset .1em .1em 0 .2em rgb(0, 89, 179);
	/* your code */
	animation:draaiend-oog infinite linear paused;
}

/* links */
#rad-voor-ogen > div div:nth-of-type(1) {
	left:8%;
	/* your code */
	animation-duration:1s;
}

/* rechts */
#rad-voor-ogen > div div:nth-of-type(2) {
	right:8%;
	/* your code */
	animation-duration:.8s;
}

#rad-voor-ogen:hover > div div {
	/* your code */
	animation-play-state:running;
}

@keyframes draaiend-oog {
	/* your code */
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}

/* pupillen */
#rad-voor-ogen > div div::after {
	content:"";
	position:absolute;
	width:50%; height:50%;
	left:10%; top:10%;
	background-color:var(--main-color);
	border-radius:50%;
}


/*****************/
/* ID = kiekeboe */
/*****************/
#kiekeboe {
	overflow:hidden;
}

/* lijf */
#kiekeboe > div {
	position:absolute;
	width:35%; height:70%;
	left:32.5%; top:95%;
	background-color:dodgerblue;
	border-radius:10em 10em 0 0;
	transform-origin:50% bottom;
	animation:wiebelend-lijf 1s infinite alternate ease-in-out;
}

#kiekeboe:hover > div {
	top:32.5%;
}

@keyframes wiebelend-lijf {
	from { transform:rotate(-2deg); }
	to { transform:rotate(2deg); }
}

/* ogen */
#kiekeboe > div div {
	position:absolute;
	width:40%; height:0;
	padding-bottom:40%;
	top:2em;
	background-color:white;
	border-radius:50%;
	box-shadow:inset .1em .1em 0 .2em rgb(0, 89, 179);
	animation:draaiend-oog infinite linear paused;
}

/* links */
#kiekeboe > div div:nth-of-type(1) {
	left:8%;
	animation-duration:1s;
}

/* rechts */
#kiekeboe > div div:nth-of-type(2) {
	right:8%;
	animation-duration:.8s;
}

#kiekeboe:hover > div div {
	animation-play-state:running;
}

/* pupillen */
#kiekeboe > div div::after {
	content:"";
	position:absolute;
	width:50%; height:50%;
	left:10%; top:10%;
	background-color:var(--main-color);
	border-radius:50%;
}


/*****************************/
/* ID = scrolling-background */
/*****************************/
#scrolling-background div {
	position:absolute;
	left:10%; right:10%; top:10%; bottom:10%;
	/* your code */
	background-image: linear-gradient(
		rgb(0, 89, 179),
		dodgerblue,
		rgb(0, 89, 179),
		dodgerblue
		);
	background-size:100% 300%;
	animation:scrolling-background 2s linear infinite paused;
}
	
#scrolling-background:hover div {
	/* your code */
	animation-play-state:running;
}

@keyframes scrolling-background {
  	/* your code */
	0% { background-position:center bottom; }
 	100% { background-position:center top; }
}

/************************************/
/* ID = scrolling-scheve-background */
/************************************/
#scrolling-scheve-background div {
	position:absolute;
	left:10%; right:10%; top:10%; bottom:10%;
	/* your code */
	background-image: linear-gradient(
		45deg,
		rgb(0, 89, 179),
		dodgerblue,
		rgb(0, 89, 179),
		dodgerblue
		);
	background-size:300% 300%;
	animation:scrolling-scheve-background 2s linear infinite paused;
}
	
#scrolling-scheve-background:hover div {
	/* your code */
	animation-play-state:running;
}

@keyframes scrolling-scheve-background {
  	/* your code */
	0% { background-position:left bottom; }
  	100% { background-position:right top; }
}


/***************************/
/* ID = scrolling-progress */
/***************************/
#scrolling-progress div {
	position:absolute;
	left:10%; right:10%; top:40%; bottom:40%;
	background-color:dodgerblue;
	border-radius:5em;
	/* your code */
	background-image: repeating-linear-gradient(
		45deg,
		rgb(0, 89, 179), rgb(0, 89, 179) 5%,
		dodgerblue 5%, dodgerblue 10%
		);
	background-size:200% 200%;
	animation:scrolling-stripes 4s linear infinite paused;
}
	
#scrolling-progress:hover div {
	/* your code */
	animation-play-state:running;
}

@keyframes scrolling-stripes {
	/* your code */
 	0% { background-position:left bottom; }
 	100% { background-position:right top; }
}


/**************************/
/* ID = scrolling-stripes */
/**************************/
#scrolling-stripes {
	padding:0;
	display:flex;
	justify-content:center;
	align-content:center;
	flex-wrap:wrap;
}

#scrolling-stripes div {
	width:80%; height:20%;
	/* your code */
	background-image: repeating-linear-gradient(
		45deg,
		rgb(0, 89, 179), rgb(0, 89, 179) 5%,
		dodgerblue 5%, dodgerblue 10%
		);
	background-size:200% 200%;
	animation:scrolling-stripes 4s linear infinite paused;
}
	
#scrolling-stripes div:nth-of-type(even) {
	/* your code */
	animation-direction: reverse;
}

#scrolling-stripes:hover div {
	/* your code */
	animation-play-state:running;
}


/*******************/
/* ID = fill-it-up */
/*******************/
/* de goot */
#fill-it-up > div {
   position:absolute;
   left:10%; right:10%; top:40%; bottom:40%;

   background-color:rgb(210,204,198);
   box-shadow:
      inset -.25em -.25em .5em rgba(255,255,255,.75),
      inset .25em .25em .5em rgba(0,0,0,.5);
   overflow:hidden;
   display:flex;
   align-items:center;
   border-radius:5em;
}

/* gaatje in de goot */
#fill-it-up > div::before {
	content:"";
	position:absolute;
	width:2.5%; height:10%;
	left:-1px;
	border-radius:50%;
	box-shadow:
		inset -.1em -.1em .1em rgba(255,255,255,.75),
		inset .1em .1em .1em rgba(0,0,0,.75);
}

/* de vulling */
#fill-it-up > div div {
	background-image: repeating-linear-gradient(
		45deg,
		rgb(0, 89, 179), rgb(0, 89, 179) 5%,
		dodgerblue 5%, dodgerblue 10%
		);
	background-size:200% 200%;
	box-shadow:
		inset .25em .25em .5em rgba(255,255,255,.875),
		inset -.25em -.25em .5em rgba(0,0,0,.625);
	z-index:10;
	
	animation:
		scrolling-stripes 4s linear infinite paused,
		scrolling-progress 6s linear infinite alternate paused;
}

#fill-it-up:hover > div div {
	animation-play-state:running;
}

@keyframes scrolling-progress {
	0%, 10% {
		width:0%; height:0%;
		border-radius:30% 70% 70% 30% / 50%;
	}
	25% {
		border-radius:40% 60% 60% 40% / 50%;
	}
	25%{
		height:100%;
	}
	40% {
		border-radius:5rem;
	}
  	90%, 100% {
	  	width:100%; height:100%;
		border-radius:5rem;
	}
}


/*********************/
/* ID = outline-ster */
/*********************/
/* buitenste ster */
#outline-ster div {
	position:absolute;
	background-color:dodgerblue;
	left:30%; right:30%; top:30%; bottom:30%;
	-webkit-clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
	clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
}

/* binnenste ster */
#outline-ster div::after {
	content:"";
	position:absolute;
	width:calc(100% - 24px); height:calc(100% - 24px);
	left:12px; top:12px;
	background-image:linear-gradient(to left, white 40%, dodgerblue 60%);
	background-size: 250% 100%;
	background-position:right top;
	-webkit-clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
	clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
	transition:1s;
}

#outline-ster:hover div::after {
	background-position:left top;
}


/***********************/
/* ID = outline-hartje */
/***********************/
/* buitenste hartje */
#outline-hartje > div {
	position:absolute;
	left:32.5%; right:32.5%; top:32.5%; bottom:32.5%;
}

#outline-hartje div::before,
#outline-hartje div::after {
	position:absolute;
	content:"";
	width:60%; height:90%;
	left:50%; bottom:0;
	background-color:dodgerblue;
	border-radius:10em 10em 0 0;
	transform:rotate(-45deg);
	transform-origin:0 100%;
}

#outline-hartje div::after {
	left:-10%;	
	transform:rotate(45deg);
	transform-origin:100% 100%;
}

/* binnenste hartje */
#outline-hartje > div > div {
	position:absolute;
	width:100%; height:100%;
	z-index:10;
}

#outline-hartje div div::before,
#outline-hartje div div::after {
	width:calc(60% - 8px); height:calc(90% - 8px);
	bottom:5.65685424949238px;
	background-color:white;
	background-image:linear-gradient(45deg, white 50%, dodgerblue 50%);
	background-size: 400% 100%;
	background-position:left top;
	transition:1s;
}

#outline-hartje div div::after {
	left:calc(-10% + 8px);
	background-image:linear-gradient(315deg, white 50%, dodgerblue 50%);
	background-size: 400% 100%;
	background-position:right top;
}

#outline-hartje:hover div div::before {
	background-position:right top;
}
#outline-hartje:hover div div::after {
	background-position:left top;
}


/******************/
/* ID = hourglass */
/******************/
/* de hele zandloper */
#hour-glass > div {
   position: relative;
   width:50%; height:50%;
   margin:25%;
   animation: hour-glass 2.5s infinite linear paused;
}

#hour-glass:hover > div {
   animation-play-state:running;
}

/* de twee helften */
#hour-glass > div div{
   position: absolute;
   width:52.5%; height:42%;
   left:23.75%; top:10%;
   background:dodgerblue;
   border-radius:0 0 50% 50% / 0 0 100% 100%;
}

#hour-glass > div div:last-child{
   top:48%;
   transform:scaleY(-1);
}

/* de boven- en onderrand */
#hour-glass > div div::before{
   content:"";
   position: absolute;
   width:110%; height:23.8095238095238%;
   left:-5%; bottom:99.5%;
   background: inherit;
   border-radius: 4.5454545454545% / 50%;
}

/* de binnenkanten */
#hour-glass > div div::after{
   content:"";
   position: absolute;
   width:78%; height:90%;
   left:11%; top:0;
   background-color: rgba(255,255,255,.5);
   background-size:500% 220%;
   background-repeat: no-repeat;
   border-radius:inherit;
}

#hour-glass > div div:first-child::after{
   background-image:radial-gradient(ellipse at center bottom, rgb(0, 89, 179) 35.35%, transparent 35.35%);
   background-position: center 6%;
   animation:hour-glass-upper 2.5s infinite linear paused;
}

#hour-glass > div div:last-child::after{
   background-image:radial-gradient(ellipse at center top, rgb(0, 89, 179) 35.35%, transparent 35.35%);
   background-position: center 40%;
   animation:hour-glass-lower 2.5s infinite linear paused;
}

#hour-glass:hover > div div:first-child::after{
   animation-play-state:running;   
}

#hour-glass:hover > div div:last-child::after{
   animation-play-state:running;  
}

@keyframes hour-glass {
   0% { transform: rotate(360deg); }
   10% { transform: rotate(0deg); }
   100% { transform: rotate(0deg); }
}

@keyframes hour-glass-upper {
   0% { background-position: center 6%; }
   5%, 15% { background-position: center 72%; }
   80%, 100% { background-position: center 6%; }
}

@keyframes hour-glass-lower {
   0% { background-position: center 40%; background-size:500% 220%; }
   5%, 15% { background-position: center 91%; background-size:200% 220%; }
   80%, 100% { background-position: center 40%; background-size:500% 220%; }
}


/******************************/
/* ID = basis-clip-path-morph */
/******************************/
#basis-clip-path-morph div {
	position:absolute;
	left:30%; right:30%; top:30%; bottom:30%;
	background-color:dodgerblue;
	-webkit-clip-path:polygon(
		50% 0,
		61.2% 34.5%,
		97.6% 34.5%,
		68.2% 55.9%,
		79.4% 90.4%,
		50% 69%,
		20.6% 90.4%,
		31.8% 55.9%,
		2.4% 34.5%,
		38.8% 34.5%,
		50% 0
	);
	clip-path:polygon(
		50% 0,
		61.2% 34.5%,
		97.6% 34.5%,
		68.2% 55.9%,
		79.4% 90.4%,
		50% 69%,
		20.6% 90.4%,
		31.8% 55.9%,
		2.4% 34.5%,
		38.8% 34.5%,
		50% 0
	);
	transition:1s;
}

#basis-clip-path-morph:hover div {
	/* de nieuwe shape moet preceis evenveel punten hebben */
	/* your code */
	-webkit-clip-path:polygon(
		50% 0,
		100% 0,
		100% 34.5%,
		100% 55.9%,
		100% 100%,
		50% 100%,
		0 100%,
		0 55.9%,
		0 34.5%,
		0 0,
		50% 0
	);
	clip-path:polygon(
		50% 0,
		100% 0,
		100% 34.5%,
		100% 55.9%,
		100% 100%,
		50% 100%,
		0 100%,
		0 55.9%,
		0 34.5%,
		0 0,
		50% 0
	);
}

/************************/
/* ID = clip-path-morph */
/************************/
#clip-path-morph div {
	position:absolute;
	left:30%; right:30%; top:30%; bottom:30%;
	background-color:dodgerblue;
	/* your code */
	animation:clip-path-morph 1.5s ease-in-out alternate infinite paused;
}

#clip-path-morph:hover div {
	/* your code */
	animation-play-state:running;
}

@keyframes clip-path-morph {
	/* your code */
	0%, 10% {
		-webkit-clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
		clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
	}
	90%, 100% {
		-webkit-clip-path:polygon(60% 5%, 60% 80%, 70% 80%, 70% 90%, 30% 90%, 30% 80%, 40% 80%, 40% 25%, 30% 25%, 30% 20%, 60% 5%);
		clip-path:polygon(60% 5%, 60% 80%, 70% 80%, 70% 90%, 30% 90%, 30% 80%, 40% 80%, 40% 25%, 30% 25%, 30% 20%, 60% 5%);
	}
}


/******************************/
/* ID = fancy-clip-path-morph */
/******************************/
#fancy-clip-path-morph div {
	position:absolute;
	left:30%; right:30%; top:30%; bottom:30%;
	background-color:dodgerblue;
	/* your code */
	animation:fancy-clip-path-morph 2s ease-in-out alternate infinite paused;
}

#fancy-clip-path-morph:hover div {
	/* your code */
	animation-play-state:running;
}

@keyframes fancy-clip-path-morph {
	/* your code */
	0%, 10% {
		-webkit-clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
		clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
	}
	50% {
		-webkit-clip-path:polygon(60% 5%, 60% 40%, 70% 60%, 70% 90%, 30% 90%, 30% 60%, 30% 60%, 40% 40%, 40% 40%, 40% 15%, 60% 5%);
		clip-path:polygon(60% 5%, 60% 40%, 70% 60%, 70% 90%, 30% 90%, 30% 60%, 30% 60%, 40% 40%, 40% 40%, 40% 15%, 60% 5%);
	}
	90%, 100% {
		-webkit-clip-path:polygon(60% 5%, 60% 80%, 70% 80%, 70% 90%, 30% 90%, 30% 80%, 40% 80%, 40% 25%, 30% 25%, 30% 20%, 60% 5%);
		clip-path:polygon(60% 5%, 60% 80%, 70% 80%, 70% 90%, 30% 90%, 30% 80%, 40% 80%, 40% 25%, 30% 25%, 30% 20%, 60% 5%);
	}
}	


/****************/
/* ID = in-love */
/****************/
#in-love {
	overflow:hidden;
}

/* achtergrond */
#in-love {
	background-image:
		radial-gradient(ellipse at center center, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 70% ),
		radial-gradient(ellipse at bottom center, yellowgreen 0%, green 70%, transparent 70% ),
		radial-gradient(ellipse at center, 
			transparent 40%, 
			DarkOrchid 40%, DarkOrchid 45%, 
			dodgerblue 45%, dodgerblue 50%, 
			yellowgreen 50%, yellowgreen 55%,
			Gold 55%, Gold 60%,
			DarkOrange 60%, DarkOrange 65%,
			crimson 65%, crimson 70%,
			transparent 70%), 
		linear-gradient(var(--main-color), MidnightBlue 25%, crimson 50%, dodgerblue 75%, LightSkyBlue 87.5%);
	background-repeat:no-repeat;
	background-size:50% 50%, 250% 40%, 90% 90%, 100% 400%;
	background-position:25% 25%, 50% bottom, center 200%, center bottom;
	transition:3s;
}

#in-love:hover {
	background-position:25% 25%, center bottom, center 200%, center top;
	transition:30s;
}

/* lijf */
#in-love > div {
	position:absolute;
	width:35%; height:70%;
	left:32.5%; top:95%;
	background-color:dodgerblue;
	border-radius:10em 10em 0 0;
	box-shadow:0 0 1.5em .2em rgba(255,255,255,.5); 
	transform-origin:50% bottom;
	animation:wiebelend-lijf 1s infinite alternate ease-in-out;
}

#in-love:hover > div {
	top:32.5%;
}

/* ogen */
#in-love > div > div:not(:last-of-type) {
	position:absolute;
	width:40%; height:0;
	padding-bottom:40%;
	top:2em;
	background-color:white;
	border-radius:50%;
	box-shadow:inset .1em .1em 0 .2em rgb(0, 89, 179);
	animation:draaiend-oog infinite linear paused;
}
#in-love > div > div:nth-of-type(1) {
	left:8%;
	animation-duration:1s;
}
#in-love > div > div:nth-of-type(2) {
	right:8%;
	animation-duration:.8s;
}

#in-love:hover > div > div {
	animation-play-state:running;
}

/* pupillen */
#in-love > div div::after {
	content:"";
	position:absolute;
	width:50%; height:50%;
	left:10%; top:10%;
	background-color:var(--main-color);
	border-radius:50%;
}

/* hart */
#in-love > div > div:last-of-type {
	position:absolute;
	width:40%; height:0;
	padding-bottom:40%;
	right:10%; top:60%;
	filter:drop-shadow(1px 1px 5px var(--main-color));
	animation:in-love 1s infinite linear paused;
}

#in-love > div > div:last-of-type::before,
#in-love > div > div:last-of-type::after {
	position:absolute;
	content:"";
	width:60%; height:90%;
	left:50%; bottom:0;
	background-color:crimson;
	border-radius:5em 5em 0 0;
	transform:rotate(-45deg);
	transform-origin:0 100%;
}

#in-love > div > div:last-of-type::after {
	left:-10%;	
	transform:rotate(45deg);
	transform-origin:100% 100%;
}

#in-love:hover > div > div:last-of-type {
	animation-play-state:running;
}

@keyframes in-love {
	0%   { transform:rotate(10deg) scale(1); }
	5%   { transform:rotate(12deg) scale(.85); }
	15%  { transform:rotate(15deg) scale(1.5); }
	25%  { transform:rotate(18deg) scale(.7); }
	35%  { transform:rotate(15deg) scale(1.2); }
	45%  { transform:rotate(12deg) scale(.85); }
	50%,
	100% { transform:rotate(10deg) scale(1); }
}