/*---animation---*/
.floating{animation-name: floating; -webkit-animation-name: floating; animation-duration: 4s;	-webkit-animation-duration: 4s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;}
@keyframes floating{0% {transform: translateY(0%);} 50% {transform: translateY(20%);} 100% {transform: translateY(0%);}}
@-webkit-keyframes floating{0% {-webkit-transform: translateY(0%);} 50% {-webkit-transform: translateY(20%);}	
100% {-webkit-transform: translateY(0%);}}
.floating1{animation-name: floating1; -webkit-animation-name: floating1; animation-duration: 4s;	
-webkit-animation-duration: 4s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;}
@keyframes floating1 {0% {transform: translateY(0%);} 50% {transform: translateY(-40%);} 100% {transform: translateY(0%);}			}
@-webkit-keyframes floating1 {0% {-webkit-transform: translateY(0%);} 50% {-webkit-transform: translateY(-40%);}	
100% {-webkit-transform: translateY(0%);}}
/*---images position---*/
.bannerbg{width:95%; position:relative; margin:0 auto; text-align:center;}
.bannerbg img{max-width:100%;}
.bblogo{text-align:left; margin-bottom:50px; width:201px; height:39px; background:url(/images/health_img/bb_logo_health.png) left top no-repeat;}
.bannerbg .textbox{font-size:30px; font-family:lato; color:#373737; text-align:center; width:70%; margin:30px auto 50px; }
.applie, .heart, .tree, .cooldrink, .music, .weight, .running, .scale, .smoke, .coffee, .voice, .scope{width:10%; margin:0 1.5%; display:inline-block; height:128px;}
.clearfix{clear:both;}
img{image-rendering: auto;}
.applie{background:url(/images/health_img/applie.gif) left top no-repeat; background-size:100%;}
.heart{background:url(/images/health_img/heart.gif) left top no-repeat; background-size:100%;}	
.tree{background:url(/images/health_img/tree.gif) left top no-repeat; background-size:100%;}	
.cooldrink{background:url(/images/health_img/cooldrink.gif) left top no-repeat; background-size:100%;}	
.music{background:url(/images/health_img/music.gif) left top no-repeat; background-size:100%;}	
.weight{background:url(/images/health_img/weight.gif) left top no-repeat; background-size:100%;}	
.running{background:url(/images/health_img/running.gif) left top no-repeat; background-size:100%;}	
.scale{background:url(/images/health_img/scale.gif) left top no-repeat; background-size:100%;}	
.smoke{background:url(/images/health_img/smoke.gif) left top no-repeat; background-size:100%;}	
.coffee{background:url(/images/health_img/coffee.gif) left top no-repeat; background-size:100%;}	
.voice{background:url(/images/health_img/voice.gif) left top no-repeat; background-size:100%;}	
.scope{background:url(/images/health_img/scope.gif) left top no-repeat; background-size:100%;}	
/*Mobile Portrait View*/
@media only screen and (max-width : 360px) {
.textbox{font-size:13px!important; margin:0 auto 30px!important; width:90%!important;}
.applie, .heart, .tree, .cooldrink, .music, .weight, .running, .scale, .smoke, .coffee, .voice, .scope{
margin:0 0.5%!important; width:13%!important; height:60px!important; image-rendering: auto; }
.applie{background:url(/images/health_img/mobile/applie.gif) left top no-repeat; background-size:100%;}
.heart{background:url(/images/health_img/mobile/heart.gif) left top no-repeat; background-size:100%;}	
.tree{background:url(/images/health_img/mobile/tree.gif) left top no-repeat; background-size:100%;}	
.cooldrink{background:url(/images/health_img/mobile/cooldrink.gif) left top no-repeat; background-size:100%;}	
.music{background:url(/images/health_img/mobile/music.gif) left top no-repeat; background-size:100%;}	
.weight{background:url(/images/health_img/mobile/weight.gif) left top no-repeat; background-size:100%;}	
.running{background:url(/images/health_img/mobile/running.gif) left top no-repeat; background-size:100%;}	
.scale{background:url(/images/health_img/mobile/scale.gif) left top no-repeat; background-size:100%;}	
.smoke{background:url(/images/health_img/mobile/smoke.gif) left top no-repeat; background-size:100%;}	
.coffee{background:url(/images/health_img/mobile/coffee.gif) left top no-repeat; background-size:100%;}	
.voice{background:url(/images/health_img/mobile/voice.gif) left top no-repeat; background-size:100%;}	
.scope{background:url(/images/health_img/mobile/scope.gif) left top no-repeat; background-size:100%;}		
}
/*Mobile Landscape View*/
@media only screen and (min-width : 361px) and (max-width : 767px){
.textbox{font-size:15px!important; margin:30px auto!important; width:90%!important;}
.applie, .heart, .tree, .cooldrink, .music, .weight, .running, .scale, .smoke, .coffee, .voice, .scope{
margin:0 0.5%!important; height:60px!important; image-rendering: auto; }
.applie{background:url(/images/health_img/mobile/applie.gif) left top no-repeat; background-size:100%;}
.heart{background:url(/images/health_img/mobile/heart.gif) left top no-repeat; background-size:100%;}	
.tree{background:url(/images/health_img/mobile/tree.gif) left top no-repeat; background-size:100%;}	
.cooldrink{background:url(/images/health_img/mobile/cooldrink.gif) left top no-repeat; background-size:100%;}	
.music{background:url(/images/health_img/mobile/music.gif) left top no-repeat; background-size:100%;}	
.weight{background:url(/images/health_img/mobile/weight.gif) left top no-repeat; background-size:100%;}	
.running{background:url(/images/health_img/mobile/running.gif) left top no-repeat; background-size:100%;}	
.scale{background:url(/images/health_img/mobile/scale.gif) left top no-repeat; background-size:100%;}	
.smoke{background:url(/images/health_img/mobile/smoke.gif) left top no-repeat; background-size:100%;}	
.coffee{background:url(/images/health_img/mobile/coffee.gif) left top no-repeat; background-size:100%;}	
.voice{background:url(/images/health_img/mobile/voice.gif) left top no-repeat; background-size:100%;}	
.scope{background:url(/images/health_img/mobile/scope.gif) left top no-repeat; background-size:100%;}	
}
@media only screen and (min-width : 768px) and (max-width : 1024px){
.textbox{font-size:20px; margin:30px auto 50px; width:90%;}
.applie, .heart, .tree, .cooldrink, .music, .weight, .running, .scale, .smoke, .coffee, .voice, .scope{width:10%; image-rendering: auto; }
}
/*big desktop View*/
@media only screen and (min-width : 1025px) and (max-width : 1980px){
.textbox{font-size:30px; margin:30px auto 50px; width:70%;}
.applie, .heart, .tree, .cooldrink, .music, .weight, .running, .scale, .smoke, .coffee, .voice, .scope{width:10%; image-rendering: auto; height:185px;}
}