.mb--canvas{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none

}

.mb--air-bubble{
	position:absolute;
	bottom:0;
	-webkit-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
	background-image:url(./mb_icon/bubble.png);
	background-size:100% 100%
}
@-webkit-keyframes mbBubbleRise{
0%{
	bottom:0;
	-webkit-transform:scale(0);
	transform:scale(0)
}
5%{
	bottom:0;
	-webkit-transform:scale(1);
	transform:scale(1)
}
100%{
	bottom:100%;
	-webkit-transform:scale(1.2);
	transform:scale(1.2)
}

}
@keyframes mbBubbleRise{
0%{
	bottom:0;
	-webkit-transform:scale(0);
	transform:scale(0)
}
5%{
	bottom:0;
	-webkit-transform:scale(1);
	transform:scale(1)
}
100%{
	bottom:100%;
	-webkit-transform:scale(1.2);
	transform:scale(1.2)
}

}
@-webkit-keyframes bubbleExpolre{
to{
	-webkit-transform:scale(3);
	transform:scale(3);
	opacity:.2
}

}
@keyframes bubbleExpolre{
to{
	-webkit-transform:scale(3);
	transform:scale(3);
	opacity:.2
}

}
.mb--blinkStar{
	position:absolute;
	background-color:#b6cbd4;
	border-radius:50%;
	-webkit-transform:rotate(0deg) scale(0.08);
	-ms-transform:rotate(0deg) scale(0.08);
	transform:rotate(0deg) scale(0.08);
	-webkit-animation:mbStarBlink 15s infinite ease-out;
	animation:mbStarBlink 15s infinite ease-out
}
.star--child{
	width:100%;
	height:100%;
	border-radius:50%;
	-webkit-transform:rotate(45deg) scale(0.75);
	-ms-transform:rotate(45deg) scale(0.75);
	transform:rotate(45deg) scale(0.75)
}
.mb--blinkStar .star--child:before,.mb--blinkStar:before{
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg)
}
.mb--blinkStar .star--child:after,.mb--blinkStar .star--child:before,.mb--blinkStar:after,.mb--blinkStar:before{
	content:'';
	position:absolute;
	top:-350%;
	left:45%;
	height:800%;
	width:1px;
	border-radius:50%;
	background:-webkit-linear-gradient(top,rgba(255,255,255,.1) 0,rgba(255,255,255,.7) 50%,rgba(255,255,255,.1) 100%);
	background:linear-gradient(top,rgba(255,255,255,.1) 0,rgba(255,255,255,.7) 50%,rgba(255,255,255,.1) 100%);
	z-index:1;
	box-shadow:0 0 25px #fff
}
.mb--blinkStar.navy-star:after,.mb--blinkStar.navy-star:before{
	box-shadow:0 0 25px navy
}
.mb--blinkStar.navy-star .star--child{
	box-shadow:0 0 2px 8px rgba(0,0,128,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(0,0,128,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.blue-star:after,.mb--blinkStar.blue-star:before{
	box-shadow:0 0 25px #00f
}
.mb--blinkStar.blue-star .star--child{
	box-shadow:0 0 2px 8px rgba(0,0,255,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(0,0,255,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.aqua-star:after,.mb--blinkStar.aqua-star:before{
	box-shadow:0 0 25px #0ff
}
.mb--blinkStar.aqua-star .star--child{
	box-shadow:0 0 2px 8px rgba(0,255,255,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(0,255,255,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.teal-star:after,.mb--blinkStar.teal-star:before{
	box-shadow:0 0 25px teal
}
.mb--blinkStar.teal-star .star--child{
	box-shadow:0 0 2px 8px rgba(0,128,128,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(0,128,128,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.olive-star:after,.mb--blinkStar.olive-star:before{
	box-shadow:0 0 25px olive
}
.mb--blinkStar.olive-star .star--child{
	box-shadow:0 0 2px 8px rgba(128,128,0,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(128,128,0,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.green-star:after,.mb--blinkStar.green-star:before{
	box-shadow:0 0 25px green
}
.mb--blinkStar.green-star .star--child{
	box-shadow:0 0 2px 8px rgba(0,128,0,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(0,128,0,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.lime-star:after,.mb--blinkStar.lime-star:before{
	box-shadow:0 0 25px #0f0
}
.mb--blinkStar.lime-star .star--child{
	box-shadow:0 0 2px 8px rgba(0,255,0,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(0,255,0,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.yellow-star:after,.mb--blinkStar.yellow-star:before{
	box-shadow:0 0 25px #ff0
}
.mb--blinkStar.yellow-star .star--child{
	box-shadow:0 0 2px 8px rgba(255,255,0,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(255,255,0,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.orange-star:after,.mb--blinkStar.orange-star:before{
	box-shadow:0 0 25px orange
}
.mb--blinkStar.orange-star .star--child{
	box-shadow:0 0 2px 8px rgba(255,165,0,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(255,165,0,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.red-star:after,.mb--blinkStar.red-star:before{
	box-shadow:0 0 25px red
}
.mb--blinkStar.red-star .star--child{
	box-shadow:0 0 2px 8px rgba(255,0,0,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(255,0,0,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.maroon-star:after,.mb--blinkStar.maroon-star:before{
	box-shadow:0 0 25px maroon
}
.mb--blinkStar.maroon-star .star--child{
	box-shadow:0 0 2px 8px rgba(128,0,0,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(128,0,0,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.fuchsia-star:after,.mb--blinkStar.fuchsia-star:before{
	box-shadow:0 0 25px #f0f
}
.mb--blinkStar.fuchsia-star .star--child{
	box-shadow:0 0 2px 8px rgba(255,0,255,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(255,0,255,.1),0 0 2px 16px rgba(255,255,255,.1)
}
.mb--blinkStar.purple-star:after,.mb--blinkStar.purple-star:before{
	box-shadow:0 0 25px purple
}
.mb--blinkStar.purple-star .star--child{
	box-shadow:0 0 2px 8px rgba(128,0,128,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(128,0,128,.1),0 0 2px 16px rgba(255,255,255,.1)
}
@-webkit-keyframes mbStarBlink{
0%{
	-webkit-transform:rotate(0deg) scale(0.08);
	transform:rotate(0deg) scale(0.08)
}
4%{
	-webkit-transform:rotate(-20deg) scale(0.9);
	transform:rotate(-20deg) scale(0.9)
}
50%,8%{
	-webkit-transform:rotate(-40deg) scale(0.08);
	transform:rotate(-40deg) scale(0.08)
}
52%{
	-webkit-transform:rotate(-50deg) scale(0.3);
	transform:rotate(-50deg) scale(0.3)
}
54%{
	-webkit-transform:rotate(-60deg) scale(0.08);
	transform:rotate(-60deg) scale(0.08)
}
100%{
	-webkit-transform:rotate(0deg) scale(0.08);
	transform:rotate(0deg) scale(0.08)
}

}
@keyframes mbStarBlink{
0%{
	-webkit-transform:rotate(0deg) scale(0.08);
	transform:rotate(0deg) scale(0.08)
}
4%{
	-webkit-transform:rotate(-20deg) scale(0.9);
	transform:rotate(-20deg) scale(0.9)
}
50%,8%{
	-webkit-transform:rotate(-40deg) scale(0.08);
	transform:rotate(-40deg) scale(0.08)
}
52%{
	-webkit-transform:rotate(-50deg) scale(0.3);
	transform:rotate(-50deg) scale(0.3)
}
54%{
	-webkit-transform:rotate(-60deg) scale(0.08);
	transform:rotate(-60deg) scale(0.08)
}
100%{
	-webkit-transform:rotate(0deg) scale(0.08);
	transform:rotate(0deg) scale(0.08)
}

}
.mb--cloud01-container{
	position:absolute;
	width:370px;
	height:230px
}
.mb--cloud01{
	position:absolute;
	height:120px;
	width:350px;
	top:100px;
	left:10px;
	background:-webkit-linear-gradient(top,#fff 5%,#f1f1f1 100%) #fff;
	background:linear-gradient(top,#fff 5%,#f1f1f1 100%) #fff;
	border-radius:100px;
	box-shadow:0 8px 5px rgba(0,0,0,.1)
}
.mb--cloud01:after,.mb--cloud01:before{
	position:absolute;
	z-index:-1;
	background:#fff;
	content:''
}
.mb--cloud01:before{
	border-radius:200px;
	width:180px;
	height:180px;
	right:50px;
	top:-90px
}
.mb--cloud01:after{
	border-radius:100px;
	height:100px;
	left:50px;
	top:-50px;
	width:100px
}
@-webkit-keyframes mbCloudMoveleft{
from{
	right:-1000px
}
to{
	right:100%
}

}
@keyframes mbCloudMoveleft{
from{
	right:-1000px
}
to{
	right:100%
}

}
@-webkit-keyframes mbCloudMoveright{
from{
	left:-1000px
}
to{
	left:100%
}

}
@keyframes mbCloudMoveright{
from{
	left:-1000px
}
to{
	left:100%
}

}
@-webkit-keyframes mbCloudMovetop{
from{
	bottom:-1000px
}
to{
	bottom:100%
}

}
@keyframes mbCloudMovetop{
from{
	bottom:-1000px
}
to{
	bottom:100%
}

}
@-webkit-keyframes mbCloudMovebottom{
from{
	top:-1000px
}
to{
	top:100%
}

}
@keyframes mbCloudMovebottom{
from{
	top:-1000px
}
to{
	top:100%
}

}
.mb--cloud{
	position:absolute;
	background-size:100% 100%
}
.mb--cloud-1{
	width:300px;
	height:112px;
	background-image:url(./mb_icon/c1.png)
}
.mb--cloud-2{
	width:359px;
	height:178px;
	background-image:url(./mb_icon/c2.png)
}
.mb--cloud-3{
	width:700px;
	height:300px;
	background-image:url(./mb_icon/c3.png)
}
.mb-cloud3-wrapper{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	-webkit-transition:top .5s ease-out;
	transition:top .5s ease-out;
	z-index:2
}
.air-balloon{
	position:absolute;
	bottom:100px;
	width:120px;
	height:120px;
	background-image:url(./mb_icon/air_balloon.png);
	background-size:100% 100%;
	-webkit-animation:balloon-swave 15s linear infinite;
	animation:balloon-swave 15s linear infinite;
	z-index:1
}
.air-balloon1{
	-webkit-animation:balloon-swave 15s linear infinite;
	animation:balloon-swave 15s linear infinite
}
.air-balloon2{
	-webkit-animation:balloon-swave 10s linear infinite;
	animation:balloon-swave 10s linear infinite
}
@-webkit-keyframes balloon-swave{
0%{
	-webkit-transform:translate(0px,0);
	transform:translate(0px,0)
}
25%{
	-webkit-transform:translate(0px,20px);
	transform:translate(0px,20px)
}
50%{
	-webkit-transform:translate(0px,0);
	transform:translate(0px,0)
}
75%{
	-webkit-transform:translate(0px,-20px);
	transform:translate(0px,-20px)
}
100%{
	-webkit-transform:translate(0px,0);
	transform:translate(0px,0)
}

}
@keyframes balloon-swave{
0%{
	-webkit-transform:translate(0px,0);
	transform:translate(0px,0)
}
25%{
	-webkit-transform:translate(0px,20px);
	transform:translate(0px,20px)
}
50%{
	-webkit-transform:translate(0px,0);
	transform:translate(0px,0)
}
75%{
	-webkit-transform:translate(0px,-20px);
	transform:translate(0px,-20px)
}
100%{
	-webkit-transform:translate(0px,0);
	transform:translate(0px,0)
}

}
.mb--leave{
	position:absolute;
	bottom:110%;
	width:99px
}
.mb--leave>div{
	width:100%;
	height:100%;
	-webkit-transform-origin:50% -100%;
	-ms-transform-origin:50% -100%;
	transform-origin:50% -100%
}
.mb--leave-bg-1{
	background-position:0 0
}
.mb--leave-bg-2{
	background-position:100px 0
}
.mb--leave-bg-3{
	background-position:200px 0
}
.mb--leave-1{
	height:79px
}
.mb--leave-1>div{
	background-image:url(./mb_icon/leaves_1.png)
}
.mb--leave-2{
	height:89px
}
.mb--leave-2>div{
	background-image:url(./mb_icon/leaves_2.png)
}
.mb--leave-3{
	height:89px
}
.mb--leave-3>div{
	background-image:url(./mb_icon/leaves_3.png)
}
.mb--leave-4{
	height:92px
}
.mb--leave-4>div{
	background-image:url(./mb_icon/leaves_4.png)
}
.mb--leave-5{
	height:60px
}
.mb--leave-5>div{
	background-image:url(./mb_icon/leaves_5.png)
}
@-webkit-keyframes mbFalling{
to{
	bottom:-100px
}

}
@keyframes mbFalling{
to{
	bottom:-100px
}

}
@-webkit-keyframes mbSway{
0%{
	-webkit-transform:rotate(-20deg);
	transform:rotate(-20deg)
}
100%{
	-webkit-transform:rotate(20deg);
	transform:rotate(20deg)
}

}
@keyframes mbSway{
0%{
	-webkit-transform:rotate(-20deg);
	transform:rotate(-20deg)
}
100%{
	-webkit-transform:rotate(20deg);
	transform:rotate(20deg)
}

}
@-webkit-keyframes mbSwayAndFlip{
0%{
	-webkit-transform:scale(1,1) rotate(-20deg);
	transform:scale(1,1) rotate(-20deg)
}
100%{
	-webkit-transform:scale(-1,1) rotate(20deg);
	transform:scale(-1,1) rotate(20deg)
}

}
@keyframes mbSwayAndFlip{
0%{
	-webkit-transform:scale(1,1) rotate(-20deg);
	transform:scale(1,1) rotate(-20deg)
}
100%{
	-webkit-transform:scale(-1,1) rotate(20deg);
	transform:scale(-1,1) rotate(20deg)
}

}
.mb--leave-falling1{
	-webkit-animation:mbFalling 11s linear infinite;
	animation:mbFalling 11s linear infinite
}
.mb--leave-sway1{
	-webkit-animation:mbSway 3.5s ease-in-out infinite alternate;
	animation:mbSway 3.5s ease-in-out infinite alternate
}
.mb--leave-flip1{
	-webkit-animation:mbSwayAndFlip 3.5s ease-in-out infinite alternate;
	animation:mbSwayAndFlip 3.5s ease-in-out infinite alternate
}
.mb--leave-falling2{
	-webkit-animation:mbFalling 12s linear infinite;
	animation:mbFalling 12s linear infinite
}
.mb--leave-sway2{
	-webkit-animation:mbSway 4s ease-in-out infinite alternate;
	animation:mbSway 4s ease-in-out infinite alternate
}
.mb--leave-flip2{
	-webkit-animation:mbSwayAndFlip 4s ease-in-out infinite alternate;
	animation:mbSwayAndFlip 4s ease-in-out infinite alternate
}
.mb--leave-falling3{
	-webkit-animation:mbFalling 13s linear infinite;
	animation:mbFalling 13s linear infinite
}
.mb--leave-sway3{
	-webkit-animation:mbSway 4.5s ease-in-out infinite alternate;
	animation:mbSway 4.5s ease-in-out infinite alternate
}
.mb--leave-flip3{
	-webkit-animation:mbSwayAndFlip 4.5s ease-in-out infinite alternate;
	animation:mbSwayAndFlip 4.5s ease-in-out infinite alternate
}
.mb--leave-falling4{
	-webkit-animation:mbFalling 14s linear infinite;
	animation:mbFalling 14s linear infinite
}
.mb--leave-sway4{
	-webkit-animation:mbSway 5s ease-in-out infinite alternate;
	animation:mbSway 5s ease-in-out infinite alternate
}
.mb--leave-flip4{
	-webkit-animation:mbSwayAndFlip 5s ease-in-out infinite alternate;
	animation:mbSwayAndFlip 5s ease-in-out infinite alternate
}
.mb--leave-falling5{
	-webkit-animation:mbFalling 15s linear infinite;
	animation:mbFalling 15s linear infinite
}
.mb--leave-sway5{
	-webkit-animation:mbSway 5.5s ease-in-out infinite alternate;
	animation:mbSway 5.5s ease-in-out infinite alternate
}
.mb--leave-flip5{
	-webkit-animation:mbSwayAndFlip 5.5s ease-in-out infinite alternate;
	animation:mbSwayAndFlip 5.5s ease-in-out infinite alternate
}
.mb--leave-falling6{
	-webkit-animation:mbFalling 16s linear infinite;
	animation:mbFalling 16s linear infinite
}
.mb--leave-sway6{
	-webkit-animation:mbSway 6s ease-in-out infinite alternate;
	animation:mbSway 6s ease-in-out infinite alternate
}
.mb--leave-flip6{
	-webkit-animation:mbSwayAndFlip 6s ease-in-out infinite alternate;
	animation:mbSwayAndFlip 6s ease-in-out infinite alternate
}
.mb--leave-falling7{
	-webkit-animation:mbFalling 17s linear infinite;
	animation:mbFalling 17s linear infinite
}
.mb--leave-sway7{
	-webkit-animation:mbSway 6.5s ease-in-out infinite alternate;
	animation:mbSway 6.5s ease-in-out infinite alternate
}
.mb--leave-flip7{
	-webkit-animation:mbSwayAndFlip 6.5s ease-in-out infinite alternate;
	animation:mbSwayAndFlip 6.5s ease-in-out infinite alternate
}
.mb--leave-falling8{
	-webkit-animation:mbFalling 18s linear infinite;
	animation:mbFalling 18s linear infinite
}
.mb--leave-sway8{
	-webkit-animation:mbSway 7s ease-in-out infinite alternate;
	animation:mbSway 7s ease-in-out infinite alternate
}
.mb--leave-flip8{
	-webkit-animation:mbSwayAndFlip 7s ease-in-out infinite alternate;
	animation:mbSwayAndFlip 7s ease-in-out infinite alternate
}
.mb--leave-falling9{
	-webkit-animation:mbFalling 19s linear infinite;
	animation:mbFalling 19s linear infinite
}
.mb--leave-sway9{
	-webkit-animation:mbSway 7.5s ease-in-out infinite alternate;
	animation:mbSway 7.5s ease-in-out infinite alternate
}
.mb--leave-flip9{
	-webkit-animation:mbSwayAndFlip 7.5s ease-in-out infinite alternate;
	animation:mbSwayAndFlip 7.5s ease-in-out infinite alternate
}
.mb--leave-falling10{
	-webkit-animation:mbFalling 20s linear infinite;
	animation:mbFalling 20s linear infinite
}
.mb--leave-sway10{
	-webkit-animation:mbSway 8s ease-in-out infinite alternate;
	animation:mbSway 8s ease-in-out infinite alternate
}
.mb--leave-flip10{
	-webkit-animation:mbSwayAndFlip 8s ease-in-out infinite alternate;
	animation:mbSwayAndFlip 8s ease-in-out infinite alternate
}
.mb--meteor{
	position:absolute;
	width:4px;
	background-image:-webkit-linear-gradient(top,transparent,rgba(255,255,255,.5),#fff);
	background-image:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),#fff);
	border-radius:50%;
	-webkit-transform:rotate(40deg);
	-ms-transform:rotate(40deg);
	transform:rotate(40deg);
	box-shadow:0 20px 50px 2px #fff
}
.mb--moon{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:480px
}
.mb--moon .moon--picture{
	position:absolute;
	top:20px;
	right:20px;
	width:346px;
	height:346px;
	background-image:url(./mb_icon/moon.png);
	background-size:100% 100%
}
.movingbackground{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%
}
@-webkit-keyframes mbSunshine{
0%{
	-webkit-transform:rotate(0);
	transform:rotate(0)
}
100%{
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg)
}

}
@keyframes mbSunshine{
0%{
	-webkit-transform:rotate(0);
	transform:rotate(0)
}
100%{
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg)
}

}