@media screen and (max-device-width: 768px) {.navbar li a{padding:0px 0px;}}
@media screen and (min-device-width: 768px) {.navbar li a{padding:37px 20px;}}

@media only screen and (min-width:1003px) and (max-width:1024px){
	.navbar li a{ padding:37px 12px;} 
	.circle-wrap{ width:95%; margin:0 auto;}
	.color-pink, .color-green, .color-purple, .color-blue, .color-darkblue, .color-orange, .dot{ font-size:50px;}
	.subTitle1, .subTitle5{ font-size:30px;}
	.subTitle2{ font-size:24px; line-height:30px;}
	#banner .title3{ right:160px;}
	
}

@media only screen and (min-width:768px) and (max-width:1002px) {
	#wrapper .navbar{ min-height:90px;}
	#wrapper .navbar{ position:relative;}
	#wrapper{ width:100%; position:relative; box-shadow:0 0 10px 10px rgba(0,0,0,.2); z-index:10; background:#fff;  }
	
	#mobile-menu-icon{ display:block; position:absolute; right:10px; top:30px; width:30px; height:30px; background:url(../images/nav-icon.png) no-repeat 0 0;}
	#mobile-menu{ width:250px; position:absolute; right:0; top:0; height:100%; bottom:0; display:block;}
	#mobile-menu #myNavbar{ margin:0; padding:0; }
	#mobile-menu #myNavbar .navbar-nav{ display:block; margin:0; padding:0; width:100%;}
	#mobile-menu #myNavbar .navbar-right{ float:none;} 
	#mobile-menu #myNavbar .navbar-nav > li{ float:none;}
	#myNavbar .navbar-nav{ display:none;}
	
	#banner ul li{ height:375px;}
	.navbar-header{ width:100%;}	
	.navbar li a{ padding:20px;}
	.navbar-toggle{ display:none;}
	.color-pink, .color-green, .color-purple, .color-blue, .color-darkblue, .color-orange, .dot{ font-size:40px;}
	.subTitle1, .subTitle5{ font-size:24px; line-height:30px;}
	.subTitle2{ font-size:20px; line-height:24px;}
	.product-container{ margin-top:0;}
	.circle-wrap{ width:100%; top:2px;}


	#banner .title1,#banner .title2,#banner .title3{ left:50%;  top:180px; right:0;  bottom:10px; position:absolute;  width:50%; padding:20px; word-wrap:break-word;}
	#banner .title3{ top:10px;}
	.subTitle4{ word-wrap:break-word;}

}

@media only screen and (max-width:767px) {
	
	#wrapper .navbar{ min-height:90px;}
	#wrapper .navbar{ position:relative;}
	#wrapper{ width:100%; position:relative; box-shadow:0 0 10px 10px rgba(0,0,0,.2); z-index:10; background:#fff;  }
	
	#mobile-menu-icon{ display:block; position:absolute; right:10px; top:30px; width:30px; height:30px; background:url(../images/nav-icon.png) no-repeat 0 0;}
	#mobile-menu{ width:250px; position:absolute; right:0; top:0; height:100%; bottom:0; display:block;}
	#mobile-menu #myNavbar{ margin:0; padding:0; display:block !important;}
	#mobile-menu #myNavbar .navbar-nav{ display:block; margin:0; padding:0; width:100%;}
	#mobile-menu #myNavbar .navbar-right{ float:none;} 
	#mobile-menu #myNavbar .navbar-nav > li{ float:none;}
	#myNavbar .navbar-nav{ display:none;}
	
	#banner ul li{ height:375px;}
	.navbar-header{ width:100%;}	
	.navbar li a{ padding:20px;}
	.navbar-toggle{ display:none;}
	.color-pink, .color-green, .color-purple, .color-blue, .color-darkblue, .color-orange, .dot{ font-size:30px; letter-spacing:-1px;}
	.subTitle1, .subTitle5{ font-size:20px; line-height:24px;}
	.subTitle2{ font-size:18px; line-height:22px;}
	.product-container{ margin-top:0;}
	.circle-wrap{ position:relative; width:auto;  }
	.product-circle{ position:relative;}
	.otherDetail{ padding:0;}

	#banner .title1,#banner .title2,#banner .title3{ left:50%;  top:180px; right:0;  bottom:10px; position:absolute;  width:50%; padding:20px; word-wrap:break-word;}
	#banner .title3{ top:10px;}
	.subTitle4{ word-wrap:break-word;}
	.subTitle3{ font-size:24px; line-height:30px;}
	#banner .title2{ line-height:34px;}
    .ma-content-title2{ bottom:0;}
	h1{font-size:24px;}
	.gmap{ height:400px;}
	.product-heading h2, .product-title h2{ margin:0 30px 10px 0;}
	
}


@media only screen and (max-width:640px) {
	.right-product-content{ float:left; margin:10px 0 0 0;}
	.footer{ text-align:center; padding:15px;}
	.footer .left{ float:none; display:block;} 
	.footer .right{float:none; display:block;}
	.ma-content-title1{ top:10px; font-size:12px;}
	
}


@media only screen and (min-width:320px) and (max-width:480px){
	#banner .title1,#banner .title2,#banner .title3{ left:0;  top:190px; right:0;  bottom:10px; position:absolute;  width:100%; padding:20px; word-wrap:break-word;}
	#banner .title3{ top:10px;}
	
	.subTitle4{ word-wrap:break-word;}
	.product-heading{ float:none;} 
	.nav-menu{ float:none;}
	.nav-menu ul li{ width:33.32%; border:none;}
	.nav-menu .nav > li > a{ padding:10px;}
	.nav-pills > li > a, .nav-pills > li > a:focus, .nav-pills > li > a:hover{ font-weight:normal; font-size:12px;}
	.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover{font-weight:normal; font-size:12px;}
}