html, body {
	height: 100%;
}

body {
	background: black;
	min-height: 100%;
	overflow: hidden;
}

@keyframes move {
	0% {
		transform: translate3d(0, 0, -10000px);
	}
}

.container {
	position: relative;
	width: 100%;
	min-height: 100%;
	transform-style: preserve-3d;
}

.bubble-wrap {
	margin: 0 auto;
width: 100vw;
height: 100vh;
	transform-style: preserve-3d;
	transform-origin: center center;
	perspective: 10000px;
}

.bubble {
	position: absolute;
/* 	background: black; */
	opacity: .4;
	
	animation: move 20s infinite;
	background-image: url(hase.svg);
}

.bubble:nth-child(1) {
	height: 20px;
	width: 20px;
	animation-delay: -0.2s;
	transform: translate3d(512px, 492px, 1171px);
	
}


.bubble:nth-child(2) {
	height: 19px;
	width: 19px;
	animation-delay: -0.4s;
	transform: translate3d(813px, 528px, 222px);
	
}

.bubble:nth-child(3) {
	height: 7px;
	width: 7px;
	animation-delay: -0.6s;
	transform: translate3d(619px, 277px, 620px);
	
}

.bubble:nth-child(4) {
	height: 15px;
	width: 15px;
	animation-delay: -0.8s;
	transform: translate3d(145px, 988px, 1623px);
	
}

.bubble:nth-child(5) {
	height: 14px;
	width: 14px;
	animation-delay: -1s;
	transform: translate3d(368px, 800px, 1778px);
	
}

.bubble:nth-child(6) {
	height: 7px;
	width: 7px;
	animation-delay: -1.2s;
	transform: translate3d(472px, 751px, 1548px);
	
}

.bubble:nth-child(7) {
	height: 16px;
	width: 16px;
	animation-delay: -1.4s;
	transform: translate3d(71px, 877px, 1141px);
	
}

.bubble:nth-child(8) {
	height: 16px;
	width: 16px;
	animation-delay: -1.6s;
	transform: translate3d(996px, 710px, 1343px);
	
}

.bubble:nth-child(9) {
	height: 4px;
	width: 4px;
	animation-delay: -1.8s;
	transform: translate3d(174px, 200px, 1618px);
	
}

.bubble:nth-child(10) {
	height: 24px;
	width: 24px;
	animation-delay: -2s;
	transform: translate3d(382px, 641px, 1535px);
	
}

.bubble:nth-child(11) {
	height: 3px;
	width: 3px;
	animation-delay: -2.2s;
	transform: translate3d(964px, 691px, 1980px);
	
}

.bubble:nth-child(12) {
	height: 11px;
	width: 11px;
	animation-delay: -2.4s;
	transform: translate3d(904px, 307px, 255px);
	
}

.bubble:nth-child(13) {
	height: 22px;
	width: 22px;
	animation-delay: -2.6s;
	transform: translate3d(354px, 524px, 742px);
	
}

.bubble:nth-child(14) {
	height: 27px;
	width: 27px;
	animation-delay: -2.8s;
	transform: translate3d(707px, 875px, 215px);
	
}

.bubble:nth-child(15) {
	height: 14px;
	width: 14px;
	animation-delay: -3s;
	transform: translate3d(137px, 30px, 1988px);
	
}

.bubble:nth-child(16) {
	height: 22px;
	width: 22px;
	animation-delay: -3.2s;
	transform: translate3d(495px, 349px, 48px);
	
}

.bubble:nth-child(17) {
	height: 23px;
	width: 23px;
	animation-delay: -3.4s;
	transform: translate3d(863px, 621px, 76px);
	
}

.bubble:nth-child(18) {
	height: 19px;
	width: 19px;
	animation-delay: -3.6s;
	transform: translate3d(968px, 936px, 1066px);
	
}

.bubble:nth-child(19) {
	height: 21px;
	width: 21px;
	animation-delay: -3.8s;
	transform: translate3d(174px, 982px, 1217px);
	
}

.bubble:nth-child(20) {
	height: 6px;
	width: 6px;
	animation-delay: -4s;
	transform: translate3d(877px, 837px, 1988px);
	
}

.bubble:nth-child(21) {
	height: 5px;
	width: 5px;
	animation-delay: -4.2s;
	transform: translate3d(840px, 280px, 1168px);
	
}

.bubble:nth-child(22) {
	height: 12px;
	width: 12px;
	animation-delay: -4.4s;
	transform: translate3d(866px, 31px, 1563px);
	
}

.bubble:nth-child(23) {
	height: 29px;
	width: 29px;
	animation-delay: -4.6s;
	transform: translate3d(249px, 823px, 1207px);
	
}

.bubble:nth-child(24) {
	height: 17px;
	width: 17px;
	animation-delay: -4.8s;
	transform: translate3d(686px, 310px, 441px);
	
}

.bubble:nth-child(25) {
	height: 22px;
	width: 22px;
	animation-delay: -5s;
	transform: translate3d(326px, 587px, 381px);
	
}

.bubble:nth-child(26) {
	height: 11px;
	width: 11px;
	animation-delay: -5.2s;
	transform: translate3d(716px, 174px, 1385px);
	
}

.bubble:nth-child(27) {
	height: 6px;
	width: 6px;
	animation-delay: -5.4s;
	transform: translate3d(763px, 609px, 1101px);
	
}

.bubble:nth-child(28) {
	height: 26px;
	width: 26px;
	animation-delay: -5.6s;
	transform: translate3d(194px, 549px, 1552px);
	
}

.bubble:nth-child(29) {
	height: 20px;
	width: 20px;
	animation-delay: -5.8s;
	transform: translate3d(609px, 964px, 1665px);
	
}

.bubble:nth-child(30) {
	height: 13px;
	width: 13px;
	animation-delay: -6s;
	transform: translate3d(674px, 767px, 1478px);
	
}

.bubble:nth-child(31) {
	height: 13px;
	width: 13px;
	animation-delay: -6.2s;
	transform: translate3d(972px, 990px, 1002px);
	
}

.bubble:nth-child(32) {
	height: 7px;
	width: 7px;
	animation-delay: -6.4s;
	transform: translate3d(557px, 727px, 241px);
	
}

.bubble:nth-child(33) {
	height: 22px;
	width: 22px;
	animation-delay: -6.6s;
	transform: translate3d(427px, 509px, 893px);
	
}

.bubble:nth-child(34) {
	height: 26px;
	width: 26px;
	animation-delay: -6.8s;
	transform: translate3d(726px, 124px, 1769px);
	
}

.bubble:nth-child(35) {
	height: 22px;
	width: 22px;
	animation-delay: -7s;
	transform: translate3d(365px, 93px, 1462px);
	
}

.bubble:nth-child(36) {
	height: 23px;
	width: 23px;
	animation-delay: -7.2s;
	transform: translate3d(481px, 678px, 30px);
	
}

.bubble:nth-child(37) {
	height: 11px;
	width: 11px;
	animation-delay: -7.4s;
	transform: translate3d(620px, 150px, 1104px);
	
}

.bubble:nth-child(38) {
	height: 29px;
	width: 29px;
	animation-delay: -7.6s;
	transform: translate3d(289px, 57px, 343px);
	
}

.bubble:nth-child(39) {
	height: 1px;
	width: 1px;
	animation-delay: -7.8s;
	transform: translate3d(209px, 595px, 434px);
	
}

.bubble:nth-child(40) {
	height: 12px;
	width: 12px;
	animation-delay: -8s;
	transform: translate3d(452px, 559px, 46px);
	
}

.bubble:nth-child(41) {
	height: 29px;
	width: 29px;
	animation-delay: -8.2s;
	transform: translate3d(443px, 189px, 1299px);
	
}

.bubble:nth-child(42) {
	height: 19px;
	width: 19px;
	animation-delay: -8.4s;
	transform: translate3d(808px, 630px, 1074px);
	
}

.bubble:nth-child(43) {
	height: 6px;
	width: 6px;
	animation-delay: -8.6s;
	transform: translate3d(468px, 259px, 1505px);
	
}

.bubble:nth-child(44) {
	height: 21px;
	width: 21px;
	animation-delay: -8.8s;
	transform: translate3d(716px, 515px, 154px);
	
}

.bubble:nth-child(45) {
	height: 3px;
	width: 3px;
	animation-delay: -9s;
	transform: translate3d(136px, 388px, 879px);
	
}

.bubble:nth-child(46) {
	height: 14px;
	width: 14px;
	animation-delay: -9.2s;
	transform: translate3d(146px, 817px, 184px);
	
}

.bubble:nth-child(47) {
	height: 2px;
	width: 2px;
	animation-delay: -9.4s;
	transform: translate3d(175px, 336px, 152px);
	
}

.bubble:nth-child(48) {
	height: 13px;
	width: 13px;
	animation-delay: -9.6s;
	transform: translate3d(826px, 601px, 1189px);
	
}

.bubble:nth-child(49) {
	height: 5px;
	width: 5px;
	animation-delay: -9.8s;
	transform: translate3d(75px, 311px, 1409px);
	
}

.bubble:nth-child(50) {
	height: 9px;
	width: 9px;
	animation-delay: -10s;
	transform: translate3d(500px, 401px, 413px);
	
}

.bubble:nth-child(51) {
	height: 23px;
	width: 23px;
	animation-delay: -10.2s;
	transform: translate3d(607px, 349px, 1559px);
	
}

.bubble:nth-child(52) {
	height: 12px;
	width: 12px;
	animation-delay: -10.4s;
	transform: translate3d(736px, 537px, 646px);
	
}

.bubble:nth-child(53) {
	height: 16px;
	width: 16px;
	animation-delay: -10.6s;
	transform: translate3d(557px, 123px, 1418px);
	
}

.bubble:nth-child(54) {
	height: 16px;
	width: 16px;
	animation-delay: -10.8s;
	transform: translate3d(579px, 312px, 576px);
	
}

.bubble:nth-child(55) {
	height: 23px;
	width: 23px;
	animation-delay: -11s;
	transform: translate3d(565px, 358px, 1559px);
	
}

.bubble:nth-child(56) {
	height: 26px;
	width: 26px;
	animation-delay: -11.2s;
	transform: translate3d(224px, 456px, 1663px);
	
}

.bubble:nth-child(57) {
	height: 24px;
	width: 24px;
	animation-delay: -11.4s;
	transform: translate3d(425px, 797px, 914px);
	
}

.bubble:nth-child(58) {
	height: 2px;
	width: 2px;
	animation-delay: -11.6s;
	transform: translate3d(13px, 475px, 221px);
	
}

.bubble:nth-child(59) {
	height: 6px;
	width: 6px;
	animation-delay: -11.8s;
	transform: translate3d(792px, 249px, 1140px);
	
}

.bubble:nth-child(60) {
	height: 25px;
	width: 25px;
	animation-delay: -12s;
	transform: translate3d(65px, 133px, 974px);
	
}

.bubble:nth-child(61) {
	height: 26px;
	width: 26px;
	animation-delay: -12.2s;
	transform: translate3d(959px, 383px, 775px);
	
}

.bubble:nth-child(62) {
	height: 20px;
	width: 20px;
	animation-delay: -12.4s;
	transform: translate3d(825px, 50px, 1676px);
	
}

.bubble:nth-child(63) {
	height: 8px;
	width: 8px;
	animation-delay: -12.6s;
	transform: translate3d(347px, 404px, 1539px);
	
}

.bubble:nth-child(64) {
	height: 27px;
	width: 27px;
	animation-delay: -12.8s;
	transform: translate3d(313px, 55px, 988px);
	
}

.bubble:nth-child(65) {
	height: 21px;
	width: 21px;
	animation-delay: -13s;
	transform: translate3d(681px, 622px, 410px);
	
}

.bubble:nth-child(66) {
	height: 7px;
	width: 7px;
	animation-delay: -13.2s;
	transform: translate3d(296px, 186px, 1374px);
	
}

.bubble:nth-child(67) {
	height: 3px;
	width: 3px;
	animation-delay: -13.4s;
	transform: translate3d(440px, 224px, 772px);
	
}

.bubble:nth-child(68) {
	height: 21px;
	width: 21px;
	animation-delay: -13.6s;
	transform: translate3d(9px, 922px, 319px);
	
}

.bubble:nth-child(69) {
	height: 13px;
	width: 13px;
	animation-delay: -13.8s;
	transform: translate3d(259px, 156px, 1382px);
	
}

.bubble:nth-child(70) {
	height: 24px;
	width: 24px;
	animation-delay: -14s;
	transform: translate3d(401px, 195px, 1152px);
	
}

.bubble:nth-child(71) {
	height: 5px;
	width: 5px;
	animation-delay: -14.2s;
	transform: translate3d(867px, 475px, 1977px);
	
}

.bubble:nth-child(72) {
	height: 27px;
	width: 27px;
	animation-delay: -14.4s;
	transform: translate3d(327px, 280px, 260px);
	
}

.bubble:nth-child(73) {
	height: 1px;
	width: 1px;
	animation-delay: -14.6s;
	transform: translate3d(565px, 114px, 1395px);
	
}

.bubble:nth-child(74) {
	height: 26px;
	width: 26px;
	animation-delay: -14.8s;
	transform: translate3d(726px, 698px, 633px);
	
}

.bubble:nth-child(75) {
	height: 23px;
	width: 23px;
	animation-delay: -15s;
	transform: translate3d(298px, 403px, 1243px);
	
}

.bubble:nth-child(76) {
	height: 30px;
	width: 30px;
	animation-delay: -15.2s;
	transform: translate3d(332px, 151px, 1699px);
	
}

.bubble:nth-child(77) {
	height: 21px;
	width: 21px;
	animation-delay: -15.4s;
	transform: translate3d(88px, 306px, 744px);
	
}

.bubble:nth-child(78) {
	height: 7px;
	width: 7px;
	animation-delay: -15.6s;
	transform: translate3d(485px, 589px, 844px);
	
}

.bubble:nth-child(79) {
	height: 25px;
	width: 25px;
	animation-delay: -15.8s;
	transform: translate3d(301px, 494px, 1203px);
	
}

.bubble:nth-child(80) {
	height: 1px;
	width: 1px;
	animation-delay: -16s;
	transform: translate3d(267px, 279px, 1432px);
	
}

.bubble:nth-child(81) {
	height: 30px;
	width: 30px;
	animation-delay: -16.2s;
	transform: translate3d(6px, 122px, 169px);
	
}

.bubble:nth-child(82) {
	height: 9px;
	width: 9px;
	animation-delay: -16.4s;
	transform: translate3d(197px, 210px, 1684px);
	
}

.bubble:nth-child(83) {
	height: 3px;
	width: 3px;
	animation-delay: -16.6s;
	transform: translate3d(96px, 856px, 1532px);
	
}

.bubble:nth-child(84) {
	height: 12px;
	width: 12px;
	animation-delay: -16.8s;
	transform: translate3d(80px, 40px, 954px);
	
}

.bubble:nth-child(85) {
	height: 14px;
	width: 14px;
	animation-delay: -17s;
	transform: translate3d(745px, 519px, 966px);
	
}

.bubble:nth-child(86) {
	height: 15px;
	width: 15px;
	animation-delay: -17.2s;
	transform: translate3d(858px, 6px, 1086px);
	
}

.bubble:nth-child(87) {
	height: 5px;
	width: 5px;
	animation-delay: -17.4s;
	transform: translate3d(707px, 29px, 63px);
	
}

.bubble:nth-child(88) {
	height: 29px;
	width: 29px;
	animation-delay: -17.6s;
	transform: translate3d(971px, 144px, 1242px);
	
}

.bubble:nth-child(89) {
	height: 21px;
	width: 21px;
	animation-delay: -17.8s;
	transform: translate3d(107px, 570px, 1464px);
	
}

.bubble:nth-child(90) {
	height: 6px;
	width: 6px;
	animation-delay: -18s;
	transform: translate3d(146px, 159px, 1665px);
	
}

.bubble:nth-child(91) {
	height: 28px;
	width: 28px;
	animation-delay: -18.2s;
	transform: translate3d(906px, 386px, 187px);
	
}

.bubble:nth-child(92) {
	height: 10px;
	width: 10px;
	animation-delay: -18.4s;
	transform: translate3d(825px, 513px, 1196px);
	
}

.bubble:nth-child(93) {
	height: 10px;
	width: 10px;
	animation-delay: -18.6s;
	transform: translate3d(118px, 139px, 1848px);
	
}

.bubble:nth-child(94) {
	height: 29px;
	width: 29px;
	animation-delay: -18.8s;
	transform: translate3d(544px, 467px, 1156px);
	
}

.bubble:nth-child(95) {
	height: 7px;
	width: 7px;
	animation-delay: -19s;
	transform: translate3d(309px, 576px, 1095px);
	
}

.bubble:nth-child(96) {
	height: 5px;
	width: 5px;
	animation-delay: -19.2s;
	transform: translate3d(273px, 720px, 356px);
	
}

.bubble:nth-child(97) {
	height: 23px;
	width: 23px;
	animation-delay: -19.4s;
	transform: translate3d(459px, 855px, 1859px);
	
}

.bubble:nth-child(98) {
	height: 24px;
	width: 24px;
	animation-delay: -19.6s;
	transform: translate3d(639px, 137px, 1328px);
	
}

.bubble:nth-child(99) {
	height: 16px;
	width: 16px;
	animation-delay: -19.8s;
	transform: translate3d(67px, 490px, 431px);
	
}

.bubble:nth-child(100) {
	height: 14px;
	width: 14px;
	animation-delay: -20s;
	transform: translate3d(293px, 10px, 1639px);
	
}