/*CONTAINERS*/
.container-storyboard {
	max-width: 930px;
	padding: 10px;
	border: solid;
	border-width: 0px !important;
	margin: 0 auto;
}

@media(max-width: 1199.98px){
	.container-storyboard {
		max-width: 745px;
	}
}

@media(min-width: 1200px) and (max-height: 900px) {
	.container-storyboard {
		max-width: 675px;
	}
}

.svg-container-storyboard {
	display: inline-block;
	position: relative;
	width: 100%;
	overflow: hidden;
	border: solid;
	border-width: 0px !important;
}

audio {
    width: 100%;
}

/*CLASSES*/

/* Check is het een muis */
@media (hover: hover) and (pointer: fine) {
	.hover-all:hover {
			color: green;
	}
}

/* Check is het een vinger */
@media (any-pointer: coarse) {
	.hover-all:hover {
			color: blue;
	}
}

/* Show and hide mouse over */
.expert-text {
	display: none;
}

.expert-block:hover .expert-text {
	display: block;
}

.info-text {
	display: none;
}

.info-block:hover .info-text {
	display: block;
}

.diagram-text {
	display: none;
}

.diagram-block:hover .diagram-text {
	display: block;
} 


/*Slide-in top - left - right - bottom */
.slide-in-top {
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-in-left {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
		both;
	animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-in-right {
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
		both;
	animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
		both;
	animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Bounce-in top-left-right-bottom*/
.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	animation: bounce-in-top 1.1s both;
}

.bounce-in-left {
	-webkit-animation: bounce-in-left 1.1s both;
	animation: bounce-in-left 1.1s both;
}

.bounce-in-right {
	-webkit-animation: bounce-in-right 1.1s both;
	animation: bounce-in-right 1.1s both;
}

.bounce-in-bottom {
	-webkit-animation: bounce-in-bottom 1.1s both;
	animation: bounce-in-bottom 1.1s both;
}

/* Fade-in */
.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/* Heartbeat */
.heartbeat {
	/* Rechtzetten image */
	transform: scale(1);
	transform-box: fill-box;
	transform-origin: center;

	/* De animatie zelf */
	-webkit-animation: heartbeat 2s ease-in-out infinite both;
	animation: heartbeat 2s ease-in-out infinite both;
}

/*slit in*/
.slit-in-vertical {
	/* Rechtzetten image */
	transform: scale(1);
	transform-box: fill-box;
	transform-origin: center;

	/* De animatie zelf */
	-webkit-animation: slit-in-vertical 0.45s ease-out both;
	        animation: slit-in-vertical 0.45s ease-out both;
}

/*ANIMATIES*/

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-top {
	0% {
		-webkit-transform: translateY(-1000px);
		transform: translateY(-1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes slide-in-top {
	0% {
		-webkit-transform: translateY(-1000px);
		transform: translateY(-1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
	0% {
		-webkit-transform: translateX(-1000px);
		transform: translateX(-1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slide-in-left {
	0% {
		-webkit-transform: translateX(-1000px);
		transform: translateX(-1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right {
	0% {
		-webkit-transform: translateX(1000px);
		transform: translateX(1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slide-in-right {
	0% {
		-webkit-transform: translateX(1000px);
		transform: translateX(1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
	0% {
		-webkit-transform: translateY(1000px);
		transform: translateY(1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes slide-in-bottom {
	0% {
		-webkit-transform: translateY(1000px);
		transform: translateY(1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
	0% {
		-webkit-transform: translateY(-500px);
		transform: translateY(-500px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: translateY(-65px);
		transform: translateY(-65px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: translateY(-28px);
		transform: translateY(-28px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: translateY(-8px);
		transform: translateY(-8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes bounce-in-top {
	0% {
		-webkit-transform: translateY(-500px);
		transform: translateY(-500px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: translateY(-65px);
		transform: translateY(-65px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: translateY(-28px);
		transform: translateY(-28px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: translateY(-8px);
		transform: translateY(-8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}

/**
 * ----------------------------------------
 * animation bounce-in-left
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-left {
	0% {
		-webkit-transform: translateX(-600px);
		transform: translateX(-600px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: translateX(-68px);
		transform: translateX(-68px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: translateX(-28px);
		transform: translateX(-28px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	90% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: translateX(-8px);
		transform: translateX(-8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes bounce-in-left {
	0% {
		-webkit-transform: translateX(-600px);
		transform: translateX(-600px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: translateX(-68px);
		transform: translateX(-68px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: translateX(-28px);
		transform: translateX(-28px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	90% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: translateX(-8px);
		transform: translateX(-8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}

/**
 * ----------------------------------------
 * animation bounce-in-right
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-right {
	0% {
		-webkit-transform: translateX(600px);
		transform: translateX(600px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: translateX(68px);
		transform: translateX(68px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: translateX(32px);
		transform: translateX(32px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	90% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: translateX(8px);
		transform: translateX(8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes bounce-in-right {
	0% {
		-webkit-transform: translateX(600px);
		transform: translateX(600px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: translateX(68px);
		transform: translateX(68px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: translateX(32px);
		transform: translateX(32px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	90% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: translateX(8px);
		transform: translateX(8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}

/**
 * ----------------------------------------
 * animation bounce-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-bottom {
	0% {
		-webkit-transform: translateY(500px);
		transform: translateY(500px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: translateY(65px);
		transform: translateY(65px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: translateY(28px);
		transform: translateY(28px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes bounce-in-bottom {
	0% {
		-webkit-transform: translateY(500px);
		transform: translateY(500px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		-webkit-transform: translateY(65px);
		transform: translateY(65px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	72% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	81% {
		-webkit-transform: translateY(28px);
		transform: translateY(28px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	95% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	10% {
		-webkit-transform: scale(0.91);
		transform: scale(0.91);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	33% {
		-webkit-transform: scale(0.87);
		transform: scale(0.87);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	10% {
		-webkit-transform: scale(0.91);
		transform: scale(0.91);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	33% {
		-webkit-transform: scale(0.87);
		transform: scale(0.87);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}

/**
 * ----------------------------------------
 * animation slit-in-vertical
 * ----------------------------------------
 */
 @-webkit-keyframes slit-in-vertical {
	0% {
	  -webkit-transform: translateZ(-800px) rotateY(90deg);
			  transform: translateZ(-800px) rotateY(90deg);
	  opacity: 0;
	}
	54% {
	  -webkit-transform: translateZ(-160px) rotateY(87deg);
			  transform: translateZ(-160px) rotateY(87deg);
	  opacity: 1;
	}
	100% {
	  -webkit-transform: translateZ(0) rotateY(0);
			  transform: translateZ(0) rotateY(0);
	}
  }
  @keyframes slit-in-vertical {
	0% {
	  -webkit-transform: translateZ(-800px) rotateY(90deg);
			  transform: translateZ(-800px) rotateY(90deg);
	  opacity: 0;
	}
	54% {
	  -webkit-transform: translateZ(-160px) rotateY(87deg);
			  transform: translateZ(-160px) rotateY(87deg);
	  opacity: 1;
	}
	100% {
	  -webkit-transform: translateZ(0) rotateY(0);
			  transform: translateZ(0) rotateY(0);
	}
  }