﻿
/*-- common-end --*/
body{}
body.local{background-color:#fff;font-family: 'Roboto', 'Open', 'AmbleLight', 'ExistenceLight', sans-serif;  font-weight:300;
           font-size:1em; color:#555; background-image:url('../image/page/bg.png'); background-repeat:repeat; background-position:center center; }

.disclaimer {}

/* --- header ---*/
.header{}

/* --- top-message ---*/
.top-message {padding:7px;text-align:center;border-bottom: 1px ridge rgba(172, 172, 172, 0.2); color:#252525;text-shadow: 0px 1px 0px #fff;display:none;}
.top-message > .wrap > label {display:block;}
.top-message span.callnow {font-weight:400; }
.top-message .promo { text-align:center;color:#fff !important; }


/* --- top-header ---*/
.header .top-header {height:55px;z-index:20;background-color: rgba(255,255,255, 0.4);border-bottom: 1px ridge rgba(172, 172, 172, 0.2);}
.top-header .top-header-content {height:55px; }
.top-header .top-header-content.top-header-fixed { top:0px; left:0px; right:0px; position:fixed; background-color: rgba(255,255,255, 0.97);border-bottom: 1px solid rgba(123, 187, 54, 0.5); }
.top-header .top-header-fixed .authenticate {margin-right:5em;}


/******fix**********/
.top-header .top-header-fixed .authenticate {margin-right:0 !important;} /*for BBB*/


/*--- logo ---*/
.header .logo{ display: inline-block;}
.logo a{color: #fff;font-size: 2.4em; display:block; line-height:57px;}
.logo a span{color:#7BBB36;text-shadow: 0px 1px 0px #fff;}


/*--- nav---*/
.header .navcontent{float:right;position:relative;	}
.navcontent .navtop{ display:inline-block; position:relative;}

.navtop > .nav > .navbutton { display:none;line-height: 55px;text-align: left;background-color:rgba(255,255,255,0); margin-left:20px;}

.navtop > .nav > .navbutton > a {text-align: center;  background-image:url('/image/menu.png'); background-repeat:no-repeat; background-position: center center; background-size:28px auto; width:28px; height:36px; display:inline-block; cursor:pointer;position:relative; vertical-align:middle;}
.navtop > .nav > .navbutton > a > span {}
.navtop > .nav > .navbutton > label {color: #7FAA34;text-align: left;font-size:0.9em; text-shadow:0px 1px 0px rgba(255,255,255,1);cursor:pointer;position:relative; margin-left:5px;}


.navtop >  #user.nav > .navbutton > a {background-image:url('/image/user.png');}
.navtop >  #cart.nav > .navbutton > a {background-image:url('/image/cart.png');background-size:36px auto;  width:36px;}


.navtop > .nav > ul.navigation { display:block;text-transform: uppercase;}
.navtop > .nav > ul > li {display:inline-block;cursor:pointer;position:relative;line-height:55px;}
.navtop > .nav > ul > li.more {background-image:url('/image/content/icons/arrowdown.png'); background-repeat:no-repeat; background-position: 1.1em center;background-size: 10px auto;}

.navtop > .nav > ul > li.active,
.navtop > .nav > ul > li:hover {}

.navtop > .nav > ul > li > a {color: #7FAA34;display: block;padding-left:2.4em;font-size: 0.875em;}
.navtop > #cart.nav > ul > li.count > a {background-image:url('/image/cart.png');background-repeat:no-repeat; background-position: center center; background-size:36px auto; width:36px; position:relative; text-align:center; padding:0;}

.navtop >  #cart.nav > .navbutton > a > span,
.navtop > #cart.nav > ul > li.count > a > span {border-radius: 40px;padding: 0px 5px;color: rgb(68, 68, 68);background-color: rgb(255, 255, 255);font-size:1em;text-shadow:0px 1px 0px rgba(0,0,0,.5); text-align:center; }

.navtop > .nav > ul > li.active > a,
.navtop > .nav > ul > li:hover > a,
.navtop > .nav > ul > li > a:hover{color: #252525;}

.navtop > .nav > ul > li > ul { position:absolute; top:55px; left:20px; width:200px; display:none;border: 1px solid rgba(172, 172, 172, 0.2); border-top-width:0px; }
.top-header-fixed .navtop > .nav > ul > li > ul  {border-color:rgba(123, 187, 54, 0.5);}

.navtop > .nav > ul > li:last-child > ul {  left:auto; right:0px; text-align:right; }

.navtop > .nav > ul > li:hover > ul {display:block;}
.navtop > .nav > ul > li > ul > li { display:block; position:relative; background-color:rgba(255, 255, 255, 0.97);line-height: 2.5em;}
.navtop > .nav > ul > li > ul > li:first-child{ margin-top:1px;}

.navtop > .nav > ul > li > ul > li.active {background-color:#9CC93E;}
.navtop > .nav > ul > li > ul > li:hover {background-color:#7BBB36;}

.navtop > .nav > ul > li > ul > li > a{color: #252525; line-height:2em; padding-left:1em;padding-right:1em; font-size:0.7em;}
.navtop > .nav > ul > li > ul > li > a > img.full { max-width:160px; }
.navtop > .nav > ul > li > ul > li > label {padding-right: 1em;margin-top: -1.5em;display: block;text-transform: none; text-align:center;}


.navtop > .nav > ul > li > ul > li.active > a,
.navtop > .nav > ul > li > ul > li:hover > a,
.navtop > .nav > ul > li > ul > li > a:hover {color:#fff;text-shadow:0px 1px 0px rgba(0,0,0, 0.5);}

.navtop > .nav > ul > li > ul > li > span {width: 30px;display: block;position: absolute;right: 0px;top: 0px;bottom: 0px;}
.navtop > .nav > ul > li > ul > li > span > a {width: 100%; height:100%; display: block; background-image:url('/image/content/icons/arrowdown.png'); background-position:center center; background-repeat:no-repeat;background-color:#fff; background-size:10px;}
.navtop > .nav > ul > li > ul > li > span > a:hover{background-color:#9CC93E;}

.navtop > .nav > ul > li > ul > li > hr {margin: 0px;border-width: 0px;border-bottom: 1px solid rgba(172, 172, 172, 0.2);}



.navtop > #cart.nav > ul > li.count > ul.cart-content { width:240px;}
ul.cart-content .planincart { font-size: 11px; line-height:1.5em; text-align:left;}
ul.cart-content .planincart div.plancontent{padding:7px;}
ul.cart-content .planincart div.plancontent div.planremove {cursor:pointer; color:#777; }
ul.cart-content .planincart div.plancontent div.planremove:hover { color:#fff;}


.top-header-fixed .navtop > .nav > ul > li > ul > li > hr {border-color: rgba(123, 187, 54, 0.5);}
/*--------*/


/*--- content-grid ----*/
.content-grid {}
.content-grid .content-grid-text {}
.content-grid .content-grid-text p { font-size: .8em; padding-bottom:1em !important;}
.content-grid .content-grid-text p label { color: #999;}
.content-grid .content-grid-text p span { padding-left: 1em;}


/*-- header  authenticate -- 
.header .authenticate {position:absolute;z-index: 1000;font-size: 0.8em; top:0px; right:0px;margin:12px;}
.authenticate .dashboard{background-color: #FCFCFC;border-radius: 2px;border: 1px solid rgba(216, 216, 216, 1);padding: 9px 12px 9px 20px;background-image:url('/image/content/icons/arrowdown.png');background-size:9px; background-repeat: no-repeat; background-position:4px center;}
.authenticate .dashboard:hover{border-radius:2px 2px 0px 0px;}
.authenticate .dashboard span {}
.authenticate a {color:#7BBB36;}
.authenticate a:active, 
.authenticate a:hover {color:#252525;}
.authenticate ul{ display:none; text-align:center;background-color: #FCFCFC;border-radius: 0px 0px 2px 2px;border: 1px solid rgba(216, 216, 216, 1); margin-top:-1px;}
.authenticate ul li{ border-top: 1px solid #fff; border-bottom: 1px solid rgba(216, 216, 216, 1);padding:9px 0px;}
.authenticate ul li:first-child{}
.authenticate ul li:last-child{border-bottom-width: 0px;}
.authenticate:hover ul{display:block;}*/



/*-- footer-base --*/
.footer-base{}


/*footer*/
.footer{ padding: 1em 0; word-spacing: 3px;text-shadow:0px 1px 0px rgba(255,255,255,1);  box-shadow: 0px 1px 0 0 #FFF inset,0px -1px 0 0 #D8d8d8;}

.footer a, .footer span {font-size:0.75em;text-transform:uppercase;}
.footer a { text-decoration: none;color:#252525;}
.footer a:hover { color:#7BBB36;}

.footer hr {}

.footer .copyright {text-align:center;}
.footer .copyright > span {}



.footer .footer-grids{ }
.footer-grids > .footer-grid {width: 33.33%; display:inline-block;vertical-align:top; min-height:4em; margin:0 -4px;}
.footer-grids > .footer-grid > .footer-grid-content { margin:1em auto;}
.footer-grids > .footer-grid > .footer-grid-content > .grid {padding:1em;  text-align:center;max-width: 12em;margin: 0 auto;}


.footer-grids > .footer-grid > .footer-grid-content h5 {font-size: 1.2em; line-height: 1.6em; text-align:center;}

.footer-grids > .footer-grid > .footer-grid-content > .grid > a{ display:block; border-top:1px dashed #FFFFFF;border-bottom:1px dashed #D5D5D5;padding:0.75em 0; }
.footer-grids > .footer-grid > .footer-grid-content > .grid > a > img{  max-width:150px; margin-top:0.5em; }
.footer-grids > .footer-grid > .footer-grid-content > .grid > a > label{ text-align:center; display:block; text-transform:none;}

.footer-grids > .footer-grid > .footer-grid-content > .grid > a:first-child{	border-top-width:0px;}
.footer-grids > .footer-grid > .footer-grid-content > .grid > a:last-child{	border-bottom-width:0px;}
.footer-grids > .footer-grid > .footer-grid-content > .grid.flex {max-width: 100%; padding-left:0px; padding-right:0px;}


.footer-grids > .footer-grid > .footer-grid-content > .grid .subscribe { height:42px;}

.subscribe input.text {width: 60%; padding-left:8px; padding-right:8px; display:inline-block; height:100%; }
.subscribe input.text:focus {}
.subscribe input.text::-webkit-input-placeholder {color: #999;font-weight: normal;font-style: italic;}
.subscribe input.text:-moz-placeholder { color: #999; font-weight: normal; font-style: italic;}
.subscribe input.text:-ms-input-placeholder {  color: #999;  font-weight: normal;  font-style: italic;}   

.subscribe input.button{display:none;}
.subscribe button {overflow: visible; position: relative; display:inline-block; margin-left:-24px; border: 0; padding: 0; cursor: pointer; height: 104%; width: 40%; color: #fff; text-transform: uppercase; background:#7BBB36;-moz-border-radius: 0 3px 3px 0;-webkit-border-radius: 0 3px 3px 0;-o-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;padding-top:1px;}   
.subscribe button:hover{background-color: #252525;}	
.subscribe button:before { content: ''; position: absolute; border-width: 8px 8px 8px 0; border-style: solid solid solid none; border-color: transparent #7BBB36 transparent; top: 12px; left: -6px;}
.subscribe button:hover:before {border-color: transparent #252525 transparent;}

.footer-grids > .footer-grid > .footer-grid-content > .grid .unsubscribe {padding:12px; text-align:left;}
.unsubscribe input[type=checkbox] {height: 24px;width: 24px;vertical-align: middle;margin-top: 0px; margin-right:5px; margin-left:0px;}

.footer-grids > .footer-grid > .footer-grid-content > .grid .status-content .status {margin:0em;}

.footer-grids > .footer-grid > .footer-grid-content > .grid .follow { margin-top:1.5em;}
.footer-grids > .footer-grid > .footer-grid-content > .grid .followus p label{font-size:1.1em; font-weight:400;}

.footer-grids > .footer-grid > .footer-grid-content > .grid .callus { margin-top:3em; text-shadow:none;}
.footer-grids > .footer-grid > .footer-grid-content > .grid .callus > label { text-align: center; color:#7BBB36;}
.footer-grids > .footer-grid > .footer-grid-content > .grid .callus > label:last-child{ color:#252525;}
.footer-grids > .footer-grid > .footer-grid-content > .grid .callus > label span {font-size:1.2em;}


.footer-grids > .footer-grid > .footer-grid-content > .grid .wearehere .wearehere-address {text-transform: none;border: 1px solid rgb(221,221,221);
                                                                                           background-color: rgba(231, 231, 231, 0.14);font-size: 15px;}



/*----responsive-design-----*/
@media only screen and (max-width: 1440px) {}

@media only screen and (max-width: 1366px) {
	.wrap{width:89%;}
}


@media only screen and (max-width: 1280px) {
	.logo a {font-size:2.2em;}		
}
@media only screen and (max-width: 1024px) {
	.logo a {font-size:2.1em;}	
	.top-message .ui-brief{font-size:1.4em;}	
	.navtop > .nav > ul > li > a {padding-left:2em;}
	.navtop > .nav > ul > li.more {background-position: 0.9em center;}	
}

@media only screen and (max-width: 768px) {
	.logo a {font-size:2.1em;}	
	.top-message .ui-brief  {font-size:1.2em;}			
	.navtop > .nav > ul > li.more {background-position: 0.6em center;}	
}
@media only screen and (min-width: 641px) and (max-width: 768px) {		
	.navtop > .nav > ul > li > a {padding-left: 2em;font-size: 0.7em;}
}

@media only screen and (max-width: 640px)  {	
	.logo a {font-size:2em;}	
	.top-message .ui-brief  {font-size:1.1em;}
	
	.header .top-header .top-header-fixed .authenticate {margin-right:0em;}
	.header .top-header .top-header-fixed .navtop > .nav > ul > li > a  {border: 1px solid rgba(123, 187, 54, 0.5); border-top-width:0px;}
	
	.navtop > .nav > .navbutton {	display:block; }
	.navtop > .nav > ul.navigation {position:absolute;right:0px; display:none;margin-top: 1px;}
		
	/*.navtop > .nav:hover > ul.navigation {display:block;}*/
	.navtop > .nav > ul > li { display:block; line-height:45px;background-color:rgba(255, 255,255, 1);}
	.navtop > .nav > ul > li > ul { display:block; position:relative; top:auto; left:auto;}
	.navtop > .nav > ul > li:last-child > ul {  left:0; right:auto; text-align:inherit; }
	.navtop > .nav > ul > li.more {background-position: 10px 18px;} 
	
	.navtop > .nav > ul > li.active > a {background-color:#9CC93E;}
	.navtop > .nav > ul > li:hover > a {background-color:#7BBB36;}	
	
	.navtop > .nav > ul > li > a {padding-left: 2em;}	
	.navtop > #cart.nav > ul > li.count > a { display: none;}
	
	.navtop > .nav > ul > li:hover > a,
	.navtop > .nav > ul > li.active > a,
	.navtop > .nav > ul > li > a:hover{ color:#fff;text-shadow:0px 1px 0px rgba(0,0,0, 0.5);}
	
	.navtop > .nav > ul > li > ul > li:first-child{margin-top:0px;}	
	.navtop > .nav > ul > li > ul > li > a {padding-left:4em;}
	.navtop > .nav > ul > li.business > ul > li > a {padding-left:1em;}
	
	.footer-grids > .footer-grid {width:100%; margin:0; display:block;margin-bottom: 2em;}	
}
@media only screen and (max-width: 600px)  
{
    .navtop > .nav > .navbutton { margin-left: 10px;}
    .navtop > .nav > .navbutton > label { margin-left:4px;}
}
@media only screen and (max-width: 560px)  
{
    .navtop > .nav > .navbutton { margin-left: 5px;}
    .navtop > .nav > .navbutton > label { margin-left:0px;}
}
@media only screen and (max-width: 480px) {	
	.top-message .ui-brief  {font-size:0.95em;}
	.logo a {font-size:1.8em;}
	.navtop > .nav > .navbutton { margin-left:20px;}
	.navtop > .nav > .navbutton > label {display:none;}	
}
@media only screen and (max-width: 420px) {
	.navtop > .nav > .navbutton {margin-left:10px;}
}
@media only screen and (max-width: 380px) {
	.navtop > .nav > .navbutton {margin-left:5px;}
}
@media only screen and (max-width: 320px) {
	.top-message .ui-brief  {font-size:0.85em;}
	.logo a {font-size:1.6em;}
	.header .top-header .top-header-fixed .authenticate {margin-right:3em;}
	.navtop > .nav > .navbutton {margin-left:5px;}
}