.content { 
	opacity: 1;
	transition: all 0.3s;
}
.content.loading { 
	opacity: 0;

}
.btn { 
	cursor: pointer;
}
.fish {
	/* filter: url(#displacementFilter)   and border radius */
	/* filter: url(#displacementFilter); */

	/* transform to skew */
	transform-box: fill-box;
	transform-origin: 50% 70%;
	
	transform: rotateY(30deg);
	animation: fishies .5s ease-in-out infinite alternate-reverse;
}

@keyframes fishies {
	0% {
		transform: rotateY(20deg);
	}
	100% {
		transform: rotateY(-20deg);
	}

}


.textwindow { 
	opacity: 1;
	transform: translateY(0);
	transition: all 0.3s;
}
.hidden { 
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
}

#animatiemask_00000054250722604463189370000009512237570781425285_{ 
	/* animation: move 4s infinite; */
}

@keyframes move {
	0% { transform: translateY(-20px); }
	100% { transform: translateY(20px); }
	
}

#bootje { 
	animation: boatmove 1.2s infinite ease-in-out alternate-reverse;
}

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



#Pijlen_Uitspoeling_x5F_02 { 
	/* display: none;  */
	animation: arrowmove 4s infinite linear;
	
}
@keyframes arrowmove {
	0% {
		transform: translateY(-10px);
		opacity: 0;
	}
	25% {
		transform: translateY(0);
		opacity: 1;
	}

	50%, 100% {
		transform: translateY(0);
		opacity: 0;
	}

}

#watermask { 
	animation: watermove 2s infinite linear;
}

@keyframes watermove {
	0% {
		transform: translateX(-7px);
		
	}
	100% {
		transform: translateX(7px);
		
	}

}


#wolk1 { 
	animation: cloud1 16s infinite linear;
	
	animation-fill-mode: both;
}
#wolk2 {
	animation: cloud1 20s infinite linear;
	
	animation-fill-mode: both;
}
#wolk3 {
	animation: cloud1 30s infinite linear;
	
	animation-fill-mode: both;
}
@keyframes cloud1 {
	0% {
		transform: translateX(0);
		
	}
	50% {
		transform: translateX(50%);
		
	}
	50.0000001% {
		transform: translateX(-50%);
		
	}
	100% {
		transform: translateX(0);
		
	}
}






#whitepill { 
	animation: whitepillmove 5s infinite linear;
	transform-origin: 23% 69%;		
}
#capsule { 
	animation: capsulemove 5s infinite linear;
	transform-origin: 23% 69%;		
}
#orangepill { 
	animation: orangepillmove 5s infinite linear;
	transform-origin: 23% 69%;		
}

@keyframes updown {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes orangepillmove {
	0%{
		transform: scale(0.6) translateX(55px) translateY(-20px);
		opacity: 0;
	}


	10% {
		transform: scale(1) translateX(55px) translateY(0);
		opacity: 100%;
	}


	90% {

		opacity: 1;
	}

	100% {
		transform: scale(1) translateX(0px) translateY(0px);
		opacity: 0;
	} 


}


@keyframes whitepillmove {
	0%, 20% {	
		transform: scale(0.6) translateX(31px) translateY(-20px) ;
		opacity: 0;
	}

	30% {	
		transform: scale(1) translateX(31px) translateY(0px);
		opacity: 100%;
	}


	90%{	
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1) translateX(0px) translateY(0px);
	}


}

@keyframes capsulemove {
	0%, 10% {
		transform: scale(0.6) translateX(39px) translateY(-10px);
		opacity: 0;
	}

	20% {
		transform: scale(1) translateX(39px) translateY(0px);
		opacity: 100%;
	}



	90% {
	
		opacity: 1;
	}
	100% {
		transform: scale(1) translateX(0px) translateY(0px);
		opacity: 0;
	}
	

}


.smoke { 
	opacity: 0;
}
.smoke-1 { 
	animation: smokeopacity 2s linear infinite, smoke1 2s linear infinite;
	animation-fill-mode: both;
}
.smoke-2 { 
	animation: smokeopacity 2s linear infinite, smoke2 2s linear infinite;
	animation-fill-mode: both;
}
.smoke-3 { 
	animation: smokeopacity 2s linear infinite, smoke3 2s linear infinite;
	animation-fill-mode: both;
}
.smoke-4 { 
	animation: smokeopacity 2s linear infinite, smoke4 2s linear infinite;
	animation-fill-mode: both;
}



@keyframes smokeopacity {
	0% {
		opacity: 0;
	}
	10%, 90% {
		
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes smoke1 {
	0% {
		transform: translateX(0) translateY(0);
	}
	50% {
		transform: translateX(0) translateY(-20px);
	}
	100% {
		transform: translateX(-10px) translateY(-20px);
	}
}

@keyframes smoke2 {
	0% {
		transform: translateX(0) translateY(0);
	}

	50% {
		transform: translateX(0) translateY(-14px);
	}

	100% {
		transform: translateX(-10px) translateY(-14px);
	}
}

@keyframes smoke3 {
	0% {
		transform: translateX(0) translateY(0);
	}

	50% {
		transform: translateX(0) translateY(-18px);
	}

	100% {
		transform: translateX(-20px) translateY(-18px);
	}
}

@keyframes smoke4 {
	0% {
		transform: translateX(0) translateY(0);
	}

	50% {
		transform: translateX(0) translateY(-15px);
	}

	100% {
		transform: translateX(-25px) translateY(-15px);
	}
}


#golfjes path {
	animation: golfmove 5s infinite ease-in-out alternate-reverse;	
}

@keyframes golfmove {
	0% {
		transform: translateX(6);
	}
	100% {
		transform: translateX(-6px);
	}
}

#clippath rect { 
	animation: clipmove 5s infinite ease-in-out alternate-reverse;
}

@keyframes clipmove {
	0% {
		transform: translateX(-0.17);
	}
	100% {
		transform: translateX(0.17px);
	}
}


#streepjesclippath_00000088108808312124046030000007330048982036626053_ { 
	animation: streepjesclipmove 1s infinite linear;
}

@keyframes streepjesclipmove {
	0% {
		transform: translateX(0) translateY(0);
	}
	100% {
		transform: translateX(-5.4px) translateY(0.7px);
	}
}