div[class*='whlpart'] {
position: absolute;
animation-duration: 6s;
animation-iteration-count: infinite;
}

.whlpart1 {
scale: 5;
left: 150.0vh;
width: 51.265vh;
height: 9.798vh;
transform-origin: 100% 50%;
background-image: url(../images/bigblue_1_head.svg);
background-size: 51.265vh 9.798vh;
animation-timing-function: ease-in-out;
animation-name: whlpart1kf;
}

.whlpart2 {
top:1.44vh;
left: -3.5vh;
width: 3.555vh;
height: 7.178vh;
transform-origin: 100% 50%;
background-image: url(../images/bigblue_2_tail_1.svg);
background-size: 3.555vh 7.178vh;
animation-timing-function: ease-in-out;
animation-name: whlpart2kf;
animation-delay: -5s;
}

.whlpart3 {
top: 0.48vh;
left: -3.4vh;
width: 3.555vh;
height: 6.367vh;
transform-origin: 100% 50%;
background-image: url(../images/bigblue_3_tail_2.svg);
background-size: 3.555vh 6.367vh;
animation-timing-function: ease-in-out;
animation-name: whlpart3kf;
animation-delay: -4s;
}

.whlpart4 {
top: 0.48vh;
left: -3.5vh;
width: 3.555vh;
height: 5.480vh;
transform-origin: 100% 50%;
background-image: url(../images/bigblue_4_tail_3.svg);
background-size: 3.555vh 5.480vh;
animation-timing-function: ease-in-out;
animation-name: whlpart4kf;
animation-delay: -3s;
}

.whlpart5 {
top: 0.51vh;
left: -4.95vh;
width: 5.007vh;
height: 4.578vh;
transform-origin: 100% 50%;
background-image: url(../images/bigblue_5_tail_4.svg);
background-size: 5.007vh 4.578vh;
animation-timing-function: ease-in-out;
animation-name: whlpart5kf;
animation-delay: -2s;
}

.whlpart6 {
top: 0.28vh;
left: -8.7vh;
width: 13.475vh;
height: 5.805vh;
transform-origin: 100% 50%;
background-image: url(../images/bigblue_6_backfin.svg);
background-size: 13.47vh 5.805vh;
animation-timing-function: ease-in-out;
animation-name: whlpart6kf;
animation-delay: -1s;
}

.whlpartpect {
top: 4.88vh;
left: 21.0vh;
width: 10.007vh;
height: 7.043vh;
transform-origin: 50% 0%;
background-image: url(../images/bigblue_0_pectoralfin.svg);
background-size: 10.007vh 7.043vh;
animation-timing-function: ease-in-out;
animation-name: whlpartpectkf;
}

@keyframes whlpart1kf {
		0%, 100% {transform:skewY(-1deg);}
		50% {transform:skewY(1deg);}
}
@keyframes whlpart2kf {
		0%, 100% {transform:skewY(-5deg);}
		50% {transform:skewY(5deg);}
}
@keyframes whlpart3kf {
		0%, 100% {transform:skewY(-7deg);}
		50% {transform:skewY(7deg);}
}
@keyframes whlpart4kf {
		0%, 100% {transform:skewY(-9deg);}
		50% {transform:skewY(9deg);}
}
@keyframes whlpart5kf {
		0%, 100% {transform:skewY(-7deg);}
		50% {transform:skewY(7deg);}
}
@keyframes whlpart6kf {
		0%, 100% {transform:skewY(-2.5deg);}
		50% {transform:skewY(2.5deg);}
}
@keyframes whlpartpectkf {
		0%, 100% {transform:scale(1,0.85);}
		50% {transform:scale(1,1);}
}

/* path movement */

.whlpath {
	position: absolute;
	top: 100vh;
	left: 10vw;
	width: 75.8608vh;
	height: 11.9417vh;
	scale: 0.5;
	transform: translateZ(-800px) translateX(50vw);
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-name: whlpathkf;
}

@keyframes whlpathkf {
0%, 100% {
	transform: translateZ(-800px) translateY(-50vh) translateX(40vw);}
25% {
	transform: translateZ(-800px) translateY(10vh) translateX(40vw);}
50% {
	transform: translateZ(-800px) translateY(10vh) translateX(80vw);}
75% {
	transform: translateZ(-800px) translateY(-50vh) translateX(70vw);}
}


div[class*='bbl'] {
	border-radius: 50%;
	position: absolute;
	top: 0vh;
	left: 36.5vh;
	transform-origin: 50% 80%;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-name: bblkf;
}

.bbl1 {
	border: 0.0001vh solid rgba(255, 255, 255, 0.5);
	height: 0.5vh;
	width: 0.5vh;
	animation-delay: -0.25s;
}
.bbl2 {
	border: 0.0001vh solid rgba(255, 255, 255, 0.5);
	height: 0.55vh;
	width: 0.55vh;
	animation-delay: -0.4s;
}
.bbl3 {
	border: 0.0001vh solid rgba(255, 255, 255, 0.5);
	height: 0.3vh;
	width: 0.3vh;
	animation-delay: -0.67s;
}
.bbl4 {
	border: 0.0001vh solid rgba(255, 255, 255, 0.5);
	height: 0.45vh;
	width: 0.45vh;
	animation-delay: -0.8s;
}
.bbl5 {
	border: 0.0001vh solid rgba(255, 255, 255, 0.5);
	height: 0.35vh;
	width: 0.35vh;
	animation-delay: -0.97s;
}

@keyframes bblkf {
0%, 30%, 35%, 80%, 88%, 100% {opacity:0}
30.001% {
	opacity:1;
	background: none;
	border: 0.0001vh solid rgba(255, 255, 255, 0.5);
	transform: translateZ(-800px) translateY(0vh) translateX(0vw) scale(1,1);
	animation-timing-function: ease-in;
	}	
34.999% {
	opacity:1;
	background: none;
	border: 0.0001vh solid rgba(255, 255, 255, 0.5);
	transform: translateZ(-800px) translateY(-8vh) translateX(-3vw) scale(1,1);
	}
80.001% {
	opacity:1;
	border: none;
	background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.25), transparent);
	transform: translateZ(-800px) translateY(0vh) translateX(0vw) scale(2,10);
	animation-timing-function: ease-out;
	}
84% {
	opacity:1;
	border: none;
	background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18), transparent);
	transform: translateZ(-800px) translateY(-9vh) translateX(-3vw) scale(10,50);
	animation-timing-function: ease-in;
	}
87.999% {
	opacity:1;
	border: none;
	background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08), transparent);
	transform: translateZ(-800px) translateY(-10vh) translateX(-5vw) scale(35,25);
	}
}

.inbb {
	height: 0.2vh;
	width: 0.2vh;
	border: none;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	position: absolute;
	top: 10%;
	left: 20%;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-name: inbbkf;
}
	
@keyframes inbbkf {
	0%, 50% {opacity:1}
	50.001%, 100% {opacity:0}
}