.bubble_wrap{
    height: 360px;
    right: 15px;
    position: absolute;
    bottom: 0px;
    width: 80px;
}
.bubbles{
    background-color: rgb(244 201 58 / 46%);
    border: 0px solid #585858;
    border-radius: 100px 100px 100px 100px;
    -moz-border-radius: 100px 100px 100px 100px;
    -webkit-border-radius: 100px 100px 100px 100px;
    -o-border-radius: 100px 100px 100px 100px;
    -ms-border-radius: 100px 100px 100px 100px;
    height: 20px;
    right: 60px;
    position: absolute;
    top: 80px;
    width: 20px;
}
.b2 {
    right: 100px;
    top: 230px;
}
.b3 {
    right: 100px;
    top: 260px;
}
.b4 {
    right: 90px;
    top: 260px;
}
.b5 {
    right: 140px;
    top: 260px;
}

/*start of bubble animations*/
.b0{
	animation-name:bubbles;
	animation-delay:2s;
	animation-duration:4s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-delay:2s;
	-moz-animation-duration:4s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-delay:2s;
	-webkit-animation-duration:4s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
		top:260px;
		left:33px;
	}
	50%{
		left:39px;
	}
	to{
		top:0px;
		left:33px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:260px;
		left:33px;
	}
	50%{
		left:39px;
	}
	to{
		top:0px;
		left:33px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:260px;
		left:33px;
	}
	50%{
		left:39px;
	}
	to{
		top:0px;
		left:33px;
	}
}
.b1{
	animation-name:bubbles;
	animation-duration:7s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-duration:7s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-duration:7s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
.b2{
	animation-name:bubbles;
	animation-delay:1s;
	animation-duration:4s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-delay:1s;
	-moz-animation-duration:4s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-delay:1s;
	-webkit-animation-duration:4s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
.b3{
	animation-name:bubbles;
	animation-delay:3s;
	animation-duration:3s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-delay:3s;
	-moz-animation-duration:3s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-delay:3s;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
		top:260px;
		left:60px;
	}
	25%{
		left:30px;
	}
	50%{
		left:58px;
	}
	75%{
		left:37px;
	}
	to{
		top:0px;
		left:60px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:260px;
		left:60px;
	}
	25%{
		left:30px;
	}
	50%{
		left:58px;
	}
	75%{
		left:37px;
	}
	to{
		top:0px;
		left:60px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:260px;
		left:60px;
	}
	25%{
		left:30px;
	}
	50%{
		left:58px;
	}
	75%{
		left:37px;
	}
	to{
		top:0px;
		left:60px;
	}
}
.b4{
	animation-name:bubbles;
	animation-duration:6s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-duration:6s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-duration:6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
.b5{
	animation-name:bubbles;
	animation-duration:5s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-duration:5s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-duration:5s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
/*tail bubbles*/
.b6,.b7,.b8{
	opacity:0;
}
.b6,.b8{
	transform:scale(0.5);
	-moz-transform:scale(0.5);
	-webkit-transform:scale(0.5);
	-ms-transform:scale(0.5);
	-o-transform:scale(0.5);
}
.b7{
	transform:scale(0.8);
	-moz-transform:scale(0.8);
	-webkit-transform:scale(0.8);
	-o-transform:scale(0.8);
	-ms-transform:scale(0.8);
}
.bw2{
	width:80px;
	animation-name:tail_bubbles;
	animation-duration:10s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:tail_bubbles;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:tail_bubbles;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes tail_bubbles{
	from{
		left:30px;
	}
	48%{
		left:30px;
	}
	50.5%{
		left:760px;
	}
	65%{
		left:760px;
	}
	70.5%{
		left:30px;
	}
	78%{
		left:30px;
	}
	82.5%{
		left:720px;
	}
	92%{
		left:720px;
	}
	to{
		left:30px;
	}
}
@-moz-keyframes tail_bubbles{
	from{
		left:30px;
	}
	48%{
		left:30px;
	}
	50.5%{
		left:760px;
	}
	65%{
		left:760px;
	}
	70.5%{
		left:30px;
	}
	78%{
		left:30px;
	}
	82.5%{
		left:720px;
	}
	92%{
		left:720px;
	}
	to{
		left:30px;
	}
}
@-webkit-keyframes tail_bubbles{
	from{
		left:30px;
	}
	48%{
		left:30px;
	}
	50.5%{
		left:760px;
	}
	65%{
		left:760px;
	}
	70.5%{
		left:30px;
	}
	78%{
		left:30px;
	}
	82.5%{
		left:720px;
	}
	92%{
		left:720px;
	}
	to{
		left:30px;
	}
}
.b6{
	
	animation-name:tail_bubble1;
	animation-duration:30s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:tail_bubble1;
	-moz-animation-duration:30s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:tail_bubble1;
	-webkit-animation-duration:30s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes tail_bubble1{
	from{
		left:30px;
		top:205px;
	}
	20.5%{
		opacity:0;
	}
	21%{
		left:30px;
		top:205px;
		opacity:1;
	}
	26%{
		opacity:1;
		left:60px;
		top:105px;
	}
	26.3%{
		opacity:0;
	}
	40%{
		left:60px;
		top:205px;
	}
	50%{
		opacity:0;
	}
	50.5%{
		opacity:1;
		left:60px;
		top:205px;
	}
	54.3%{
		opacity:0;
	}
	55%{
		left:60px;
		top:105px;
	}
	65%{
		left:60px;
	}
	70%{
		opacity:0;
	}
	70.5%{
		opacity:1;
		left:30px;
		top:210px;
	}
	73.3%{
		opacity:0;
	}
	73%{
		left:30px;
		top:105px;
	}
	78%{
		left:30px;
	}
	82.3%{
		opacity:0;
	}
	82.5%{
		opacity:1;
		left:20px;
		top:150px;
	}
	86.3%{
		opacity:0;
	}
	87%{
		left:20px;
		top:30px;
	}
	92%{
		left:20px;
	}
	to{
		left:30px;
	}
}
@-moz-keyframes tail_bubble1{
	from{
		left:30px;
		top:205px;
	}
	20.5%{
		opacity:0;
	}
	21%{
		left:30px;
		top:205px;
		opacity:1;
	}
	26%{
		opacity:1;
		left:60px;
		top:105px;
	}
	26.3%{
		opacity:0;
	}
	40%{
		left:60px;
		top:205px;
	}
	50%{
		opacity:0;
	}
	50.5%{
		opacity:1;
		left:60px;
		top:205px;
	}
	54.3%{
		opacity:0;
	}
	55%{
		left:60px;
		top:105px;
	}
	65%{
		left:60px;
	}
	70%{
		opacity:0;
	}
	70.5%{
		opacity:1;
		left:30px;
		top:210px;
	}
	73.3%{
		opacity:0;
	}
	73%{
		left:30px;
		top:105px;
	}
	78%{
		left:30px;
	}
	82.3%{
		opacity:0;
	}
	82.5%{
		opacity:1;
		left:20px;
		top:150px;
	}
	86.3%{
		opacity:0;
	}
	87%{
		left:20px;
		top:30px;
	}
	92%{
		left:20px;
	}
	to{
		left:30px;
	}
}
@-webkit-keyframes tail_bubble1{
	from{
		left:30px;
		top:205px;
	}
	20.5%{
		opacity:0;
	}
	21%{
		left:30px;
		top:205px;
		opacity:1;
	}
	26%{
		opacity:1;
		left:60px;
		top:105px;
	}
	26.3%{
		opacity:0;
	}
	40%{
		left:60px;
		top:205px;
	}
	50%{
		opacity:0;
	}
	50.5%{
		opacity:1;
		left:60px;
		top:205px;
	}
	54.3%{
		opacity:0;
	}
	55%{
		left:60px;
		top:105px;
	}
	65%{
		left:60px;
	}
	70%{
		opacity:0;
	}
	70.5%{
		opacity:1;
		left:30px;
		top:210px;
	}
	73.3%{
		opacity:0;
	}
	73%{
		left:30px;
		top:105px;
	}
	78%{
		left:30px;
	}
	82.3%{
		opacity:0;
	}
	82.5%{
		opacity:1;
		left:20px;
		top:150px;
	}
	86.3%{
		opacity:0;
	}
	87%{
		left:20px;
		top:30px;
	}
	92%{
		left:20px;
	}
	to{
		left:30px;
	}
}
.b7{
	animation-name:tail_bubble2;
	animation-duration:30s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:tail_bubble2;
	-moz-animation-duration:30s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:tail_bubble2;
	-webkit-animation-duration:30s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes tail_bubble2{
	from{
		left:30px;
		top:205px;
	}
	20.5%{
		opacity:0;
	}
	21%{/*turn one*/
		opacity:1;
		left:30px;
		top:205px;
	}
	25.5%{
		opacity:0;
	}
	26%{
		left:-30px;
		top:105px;
	}
	40%{
		left:30px;
		top:205px;
	}
	49.5%{
		opacity:0;
	}
	50%{
		opacity:1;
		left:30px;
		top:205px;
	}
	53%{
		left:70px;
		top:80px;
	}
	54.3%{
		opacity:0;
	}
	65%{
		left:30px;
	}
	69.5%{
		opacity:0;
	}
	70.5%{
		opacity:1;
		left:30px;
		top:210px;
	}
	73%{
		left:70px;
		top:55px;
	}
	73.5%{
		opacity:0;
	}
	78%{
		left:30px;
	}
	82%{
		opacity:0;
	}
	82.5%{
		opacity:1;
		left:50px;
		top:150px;
	}
	86.3%{
		opacity:0;
	}
	87%{
		left:-20px;
		top:30px;
	}
	92%{
		left:20px;
	}
	to{
		left:30px;
	}
}
@-moz-keyframes tail_bubble2{
	from{
		left:30px;
		top:205px;
	}
	20.5%{
		opacity:0;
	}
	21%{/*turn one*/
		opacity:1;
		left:30px;
		top:205px;
	}
	25.5%{
		opacity:0;
	}
	26%{
		left:-30px;
		top:105px;
	}
	40%{
		left:30px;
		top:205px;
	}
	49.5%{
		opacity:0;
	}
	50%{
		opacity:1;
		left:30px;
		top:205px;
	}
	53%{
		left:70px;
		top:80px;
	}
	54.3%{
		opacity:0;
	}
	65%{
		left:30px;
	}
	69.5%{
		opacity:0;
	}
	70.5%{
		opacity:1;
		left:30px;
		top:210px;
	}
	73%{
		left:70px;
		top:55px;
	}
	73.5%{
		opacity:0;
	}
	78%{
		left:30px;
	}
	82%{
		opacity:0;
	}
	82.5%{
		opacity:1;
		left:50px;
		top:150px;
	}
	86.3%{
		opacity:0;
	}
	87%{
		left:-20px;
		top:30px;
	}
	92%{
		left:20px;
	}
	to{
		left:30px;
	}
}
@-webkit-keyframes tail_bubble2{
	from{
		left:30px;
		top:205px;
	}
	20.5%{
		opacity:0;
	}
	21%{/*turn one*/
		opacity:1;
		left:30px;
		top:205px;
	}
	25.5%{
		opacity:0;
	}
	26%{
		left:-30px;
		top:105px;
	}
	40%{
		left:30px;
		top:205px;
	}
	49.5%{
		opacity:0;
	}
	50%{
		opacity:1;
		left:30px;
		top:205px;
	}
	53%{
		left:70px;
		top:80px;
	}
	54.3%{
		opacity:0;
	}
	65%{
		left:30px;
	}
	69.5%{
		opacity:0;
	}
	70.5%{
		opacity:1;
		left:30px;
		top:210px;
	}
	73%{
		left:70px;
		top:55px;
	}
	73.5%{
		opacity:0;
	}
	78%{
		left:30px;
	}
	82%{
		opacity:0;
	}
	82.5%{
		opacity:1;
		left:50px;
		top:150px;
	}
	86.3%{
		opacity:0;
	}
	87%{
		left:-20px;
		top:30px;
	}
	92%{
		left:20px;
	}
	to{
		left:30px;
	}
}
.b8{
	animation-name:tail_bubble3;
	animation-duration:30s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:tail_bubble3;
	-moz-animation-duration:30s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:tail_bubble3;
	-webkit-animation-duration:30s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes tail_bubble3{
	from{
		left:50px;
		top:205px;
	}
	20.5%{
		opacity:0;
	}
	21%{
		opacity:1;
		left:30px;
		top:205px;
	}
	25.5%{
		opacity:0;
	}
	26%{
		left:30px;
		top:105px;
	}
	40%{
		left:30px;
		top:205px;
	}
	49.5%{
		opacity:0;
	}
	50.5%{
		opacity:1;
		left:50px;
		top:205px;
	}
	53%{
		left:40px;
		top:80px;
	}
	54.3%{
		opacity:0;
	}
	65%{
		left:40px;
	}
	69.5%{
		opacity:0;
	}
	70.5%{
		opacity:1;
		left:40px;
		top:210px;
	}
	73%{
		left:-20px;
		top:55px;
	}
	73.5%{
		opacity:0;
	}
	78%{
		left:40px;
	}
	82%{
		opacity:0;
	}
	82.5%{
		opacity:1;
		left:20px;
		top:150px;
	}
	86.3%{
		opacity:0;
	}
	87%{
		left:60px;
		top:30px;
	}
	92%{
		left:30px;
	}
	to{
		left:30px;
	}
}
@-moz-keyframes tail_bubble3{
	from{
		left:50px;
		top:205px;
	}
	20.5%{
		opacity:0;
	}
	21%{
		opacity:1;
		left:30px;
		top:205px;
	}
	25.5%{
		opacity:0;
	}
	26%{
		left:30px;
		top:105px;
	}
	40%{
		left:30px;
		top:205px;
	}
	49.5%{
		opacity:0;
	}
	50.5%{
		opacity:1;
		left:50px;
		top:205px;
	}
	53%{
		left:40px;
		top:80px;
	}
	54.3%{
		opacity:0;
	}
	65%{
		left:40px;
	}
	69.5%{
		opacity:0;
	}
	70.5%{
		opacity:1;
		left:40px;
		top:210px;
	}
	73%{
		left:-20px;
		top:55px;
	}
	73.5%{
		opacity:0;
	}
	78%{
		left:40px;
	}
	82%{
		opacity:0;
	}
	82.5%{
		opacity:1;
		left:20px;
		top:150px;
	}
	86.3%{
		opacity:0;
	}
	87%{
		left:60px;
		top:30px;
	}
	92%{
		left:30px;
	}
	to{
		left:30px;
	}
}
@-webkit-keyframes tail_bubble3{
	from{
		left:50px;
		top:205px;
	}
	20.5%{
		opacity:0;
	}
	21%{
		opacity:1;
		left:30px;
		top:205px;
	}
	25.5%{
		opacity:0;
	}
	26%{
		left:30px;
		top:105px;
	}
	40%{
		left:30px;
		top:205px;
	}
	49.5%{
		opacity:0;
	}
	50.5%{
		opacity:1;
		left:50px;
		top:205px;
	}
	53%{
		left:40px;
		top:80px;
	}
	54.3%{
		opacity:0;
	}
	65%{
		left:40px;
	}
	69.5%{
		opacity:0;
	}
	70.5%{
		opacity:1;
		left:40px;
		top:210px;
	}
	73%{
		left:-20px;
		top:55px;
	}
	73.5%{
		opacity:0;
	}
	78%{
		left:40px;
	}
	82%{
		opacity:0;
	}
	82.5%{
		opacity:1;
		left:20px;
		top:150px;
	}
	86.3%{
		opacity:0;
	}
	87%{
		left:60px;
		top:30px;
	}
	92%{
		left:30px;
	}
	to{
		left:30px;
	}
}
@media (min-width:320px) and (max-width:1023px){
	.bubble_wrap{
		display: none;
	}
}
@media (min-width:1400px) and (max-width:3000px){
	.bubble_wrap {
			bottom: 0px;
				right: 205px;
		}
	}