@import url('/web/20161019215305cs_/http://jhgoogle.com/style/css/reset.css');
@import url('/web/20161019215305cs_/http://jhgoogle.com/style/css/visual.css');

body {background: url(../../style/css/img/mobile-pattern.jpg) repeat-y 50% 0% #1A1B1E}
#loadInfo {display: none;}
#liulanqi, #woai, #qqhao, #dianhua {display: none}


body#home #outer {background: url(../../style/css/img/field.jpg) repeat-x 50% 0}
#outer {background: url(../../style/css/img/nav-bg.jpg) repeat-x 50% 0;}

#inner {background: none;}
#deeper {background: none;}
#container {width: 98%}
#prefooter {width: 98%}
#footwrap {width: 93%}
#services {width: 95%;}
#services p { padding: 0; }


header#masthead {height: 70px; position: relative;}
body#home header .logo {
	top: 90px; left: 50%;
	width: 174px;
	margin-left: -87px;
	background: none;; 
	padding: 0;
}
body#home header .logo img {display: block;}


header .logo {top: 85px; right: 5px; width: 100px; height: 75px; background: url(../../style/css/img/logo.png) no-repeat 0 0;}
header .logo img {display: none;}

header .logo span {display: none;}
header .logo:hover {padding: 0}
header .logo img {width: 100%;}
 
 




#inside-wrap {width: 100%; background-position: 0 -35px; min-height: 500px;}

#primary h1 {font-size: 3.5em; padding: 15px 0 0 20px; text-align: left;  margin: 0 0 100px; height: auto; line-height: .8em;}

body#contact h1 {padding: 15px 0 0 0;}

body#serv.prepare #primary h1 {margin: 0 0 65px 0}
#primary h1 strong {font-weight: 800;}


body#serv #primary .cta {display: none;}
body#serv section img {width: 30%;}



body#serv section {width: 90%; padding: 20px 0}
body#serv .mobi a {display: block; background: url(../../style/css/img/innovate-mobile.png) no-repeat; width: 200px; height: 206px; text-indent: -999em; margin: 25px auto;}
body#serv .screens a {display: block; background: url(../../style/css/img/innovate-screen.png) no-repeat; width: 280px; height: 185px; text-indent: -999em; margin: 0 auto;}
body#serv section article {width: 75%}



body#serv section[role='seo'] {margin: 0 0 25px 0}


body#serv section[role='ecommerce'] .serv-icon {height: 160px; top: -25px; position: relative; margin: 0 20px 0 0}



body#serv section[role='hosting'] article {width: 90%;}
body#serv section[role='hosting'] article p {margin: 0 0 25px 0}
body#serv #primary section[role='hosting'] article .cta {
	display: block; width: 120px; margin: 0 auto 15px auto; text-align: center;
}
body#serv section[role='hosting'] h2 { text-transform: uppercase; font-size: 1.2em; line-height: 2em; margin: 0 0 10px;}
body#serv section[role='hosting'] h2 strong {display: block; font-size: 3.5em; letter-spacing: -2px; color: #fff;}
body#serv section[role='hosting'] h2 em {font-family: 'Calligraffitti'; color: #6CDFFF; font-size: 1.8em; text-transform: lowercase; line-height: 1.8em}





body#serv .twins a {display: block; background: url(../../style/css/img/prepare-twins.png) no-repeat; width: 200px; height: 212px; position: inherit; text-indent: -999em; margin: 0 auto;}


body#serv .spaceboy a {display: none}

body#serv aside {width: 80%; margin: 0 auto;}




/*-------------------------------------------    
   //// DETAIL ////  SERVICES & PAGES
-------------------------------------------*/
body.details .trooper {display: none; }
body.details #primary section {padding: 0; width: 90%; float: none; margin: 0 auto;}
body.details #primary #secondary {width: 90%; position: relative; margin: 0 auto;}
body.details #primary #secondary .cta {float: none}
body#serv.details #primary {
	height: auto;
}




body#serv.details aside {padding: 25px 0;}
body#serv.details aside h3 {margin: 0 0 25px 0}
body#serv.details aside p {font-size: 1em;}



body#serv.details .marketing-post {width: 45%; float: left; margin: 0 2.5%}
body#serv.details .brands {width: 100%;}
body#serv.details .trooper {position: absolute; bottom: -5px; left: 0;}


body#marketing.full-post .marketing-post ul {margin: 0 0 35px 0}


/* --- /////  SERVICE LOGOS  ///// ---- */
body#serv.details #primary .serv-icon {
	position: relative; width: 100px; height: 100px; margin: 0 20px 10px 0;
}

body#serv.details .serv-icon a {width: 100%; height: 100%; right: 0; position: relative;}
body#serv.details .icon-web-design {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../../style/css/img/web-design-logo.png) no-repeat 0 0
}
body#serv.details .icon-multi {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../../style/css/img/multi-logo.png) no-repeat 0 0
}
body#serv.details .icon-dev {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../../style/css/img/web-dev-logo.png) no-repeat 0 0
}
body#serv.details .icon-mobile {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../../style/css/img/mobile-logo.png) no-repeat 0 0
}
body#serv.details .icon-cms {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../../style/css/img/cms-logo.png) no-repeat 0 0
}
body#serv.details .icon-stats {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../../style/css/img/analytics-logo.png) no-repeat 0 0
}
body#serv.details .icon-seo {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../../style/css/img/search-logo.png) no-repeat 0 0
}
body#serv.details .icon-ecommerce {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../../style/css/img/commerce-logo.png) no-repeat 0 0
}


/* --- /// SERVICE FOOT LINKS //// --- */
body.details #primary #service-list {
	width: 90%; height: auto; position: inherit; top: 0; left: 0; padding: 0; margin: 0 auto;
}
body.details #primary #service-list h3 {font-size: 1.3em; margin: 0 0 30px 0}
#service-list .col {width: 85%; float: none; margin: 0 2.5%}
#service-list .col:last-child {padding: 25px 0 0 0;}
#service-list ul li {margin: 0 0 15px}


.check-list {margin: 0 0 15px 0}
.check-list li {font-size: 1em; margin: 0 0 5px 0; background: url(../../style/css/img/check-bullet.png) no-repeat 0 0; padding: 0 0 0 30px;}





body#contact #subnav, body#case #subnav {display: none;}

#subnav { position: absolute; width: 90%; top: 120px; left: 25px}
#subnav li {
	float: left; margin: 0 15px 0 0;
}
#subnav li a {
	text-align: center; text-transform: uppercase;
	background: #000; display: block; padding: 0 25px; line-height: 2.5em;
	text-shadow: 0 2px 2px rgba(0,0,0,0.6); margin: 0 0 50px 0;	font-size: .85em;
	height: auto; margin: 0; font-weight: 600;
		
	
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	-o-border-radius: 18px;
	border-radius: 18px;
	
	background: rgba(0,0,0,.5); color: #6CDFFF;
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;

}
#subnav li a:hover,#subnav .active a {
	
	color: #fff;
	background: #14B1DE; 
	
	
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	
	
	
	background-image: linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -o-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -moz-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -webkit-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -ms-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(16,167,213)),
		color-stop(0, rgb(13,121,164))
	);
}





body#home #next, body#home #prev {display: none;}
body#news #inner {
	background: none;
}
body#news #primary {display: none;}
body#news #primary h1 {display: none;}
body#news .logo {display: none;}



#next {width: 50px; height: 50px; margin: 0; display: block; background: url(../../style/css/img/mini-arrows.png) no-repeat -50px 0; position: absolute; top: 200px; right: 0; cursor: pointer; text-indent: -9999px; z-index: 999}
#next:hover {background-position: -50px -50px}

#prev {width: 50px; height: 50px; margin: 0; display: block; background: url(../../style/css/img/mini-arrows.png) no-repeat 0 0; position: absolute; top: 200px; left: 0; cursor: pointer; text-indent: -9999px; z-index: 999;}
#prev:hover {background-position: 0 -50px}




.pthumbs {
	margin: 15px auto 0 auto; width: 90%; max-width: 848px; 
	padding: 0 0 50px 0;
}

.pthumbs li {float: left; height: auto;}

.pthumbs li.pA {display: none}
.pthumbs li.pB {width: 100%; margin: 0 auto; max-width: 480px}
.pthumbs li.pC {display: none}

.pthumbs li img {padding: 5px; background: #000; max-width: 100%;}

.pinfo {width: 90%; max-width: 930px; color: #fff; margin: 0 auto; padding: 0}
.pinfo .col {width: 100%; margin: 0 0 50px}
.pinfo .col:first-child p {margin: 0 0 20px 0; padding: 0}

.pinfo h2 {margin: 0 0 20px 0; color: #70DEFE; font-weight: 300}
.pinfo ul li {height: 37px; line-height: 30px; font-size: 1em; padding: 0 0 0 50px; margin: 0 0 10px 0; font-weight: normal; text-shadow: 1px 1px 0 #000;}

.pinfo .cta {margin: 0;}





body#news aside blockquote p {background: url(../../style/css/img/quote.png) no-repeat 5% 5% rgba(0,0,0,0.75); border: none;}

body#team aside {margin: 0}
body#team aside blockquote p {background: url(../../style/css/img/quote.png) no-repeat 5% 5% rgba(0,0,0,0.75); border: none;}




body#team h1 {margin: 0 0 35px 0;}
body#team aside {display: none;}
body#team #subnav {display: none;}
body#team .team-wires {display: none;}

body#team .troopers_box {display: none;}


body#team #igd_btn {display: block; width: 180px; height: 203px; text-indent: -999em; background: url(../../style/css/img/igd-hologram.png) no-repeat 0 0; position: absolute; bottom: 0; left: 50%; margin-left: -90px;}

#team-content {padding: 0; margin: 0;}
#team-content section {width: 90%; margin: 0 auto 20px auto; border: 1px solid #333; background-color: rgba(0,0,0,.4)}
#team-content .colB {margin: 0 auto 200px auto;}

body#team .content {padding: 25px;}
body#team .content h3 {font-size: 1em; margin: 0 0 25px 0}
body#team .content p {color: #B9B9B9; font-size: .9em;}
 



 
 

#slidenav {display: none;}

#featured {height: 410px;  position: relative;}

#featured h1, #featured h2 { margin: 200px 0 50px 0; }
#featured h1 b, #featured h2 b { text-shadow: 2px 2px 3px #000; font-weight: 600 }
#featured h1 strong, #featured h2 strong {
	font-size: 3em; letter-spacing: -1px; line-height: 1.1em; color: #fff;
	text-shadow: 6px 6px 0 rgba(0,0,0,.3);
}
#featured span {display: none;}



.panel a, .cta {
	font-size: .85em;  padding: 0 30px; line-height: 2.5em;
	text-shadow: 0 2px 2px rgba(0,0,0,0.6);
}

 
#services {padding: 30px 2% 0 0; width: 98%;}
#services section {
	width: 100%;
	margin: 0;
	float: none;
	text-align: left;
	padding: 0;
}

#services p {padding: 0; margin: 0 0 30px 0; line-height: 1.3em;}
#services section .serv-cta {display: none;}

body#home #services .serv-icon {
	max-width: 100%; 
	background: none; position: inherit; top: 0; 
	left:0; margin: 0 0 15px 0; float: left; padding: 0;
	height: 120px;
}
#services h2 {font-size: 1.2em;}





#midwrap {
	width: 100%; 
	background: url(../../style/css/img/midfield.jpg) repeat-x 50% 0; 
}
#container {background: none; padding: 20px 0 20px 0;}
#container section {
	width: 50%;
	padding: 75px 0 0 3%;
}
#container h2 {
	width: 50%; 
	font-size: 1.5em; letter-spacing: normal; position: absolute; top: 10px; left: 10px;
}
#container .sub-aside {display: none;}
#container section p {font-size: 1em; line-height: 1.4em;}
#container aside {
	display: none;
}
#container .brand-logos {display: none;}
#container h4 {display: none;}
#container .cta {font-size: .8em; padding: 0 20px; margin: 0;}



#tab-container {min-height: 340px;}
aside .tabs li a {font-size: .9em; line-height: 1.3em}
.folio-btn {position: absolute; bottom: -20px; left: 0; }



body#marketing h1 {
	padding: 0; margin: 0; height: inherit; line-height: 34px; margin: 0 0 45px 0;
	position: relative; left: -20px; top: -5px;
}
body#marketing h1 img {float: left; margin: 12px 15px 0 0}
body#marketing #primary {width: 90%}
body#marketing section {width: 100%;}
body#marketing aside {display: none;}



body#marketing.full-post .logo {display: none;}
body#marketing.full-post #inside-wrap {background: none; padding: 0;}
body#marketing.full-post #primary {padding: 0;}
body#marketing.full-post #primary .marketing-post h1 {font-size: 2.2em; line-height: 1.2em; padding: 0 25px; margin: 0 0 25px 0; font-weight: 300; letter-spacing: normal;}

body#marketing.full-post h2 {font-size: 1.3em;}
body#marketing.full-post .marketing-post img {border: 1px solid #666; float: none;}
body#marketing.full-post .marketing-post blockquote {
	font-size: 1em; border: 1px solid #333; float: none; width: 80%; margin: 0 0 25px 0; padding: 10px;
}



body#marketing.full-post .marketing-post .post {margin: 0 0 25px 0;}
body#marketing.full-post .marketing-post .post .cta {float: none; width: 80%; clear: both; text-align: center; margin: 0 0 25px 0}


.marketing-post figure {margin: 0 auto; margin: 0 0 25px 0; width: auto}
.marketing-post img {max-width: 100%; margin: 0; float: none;}
#prefooter .news-post {display: none;}


#search {
	display: none;
}



#prewrap {width: 100%; background: none; border: none; margin: 0;}
#prefooter {width: 100%; margin: 0;}

#prefooter aside {width: 90%; float: none; margin: 0 auto; padding: 25px 0; border-top: 1px solid #37383C; border-bottom: 1px solid #37383C}
#prefooter aside blockquote {width: 100%; margin: 0;}
#prefooter aside blockquote p {font-size: 1.1em; text-indent: 2.5em; padding: 25px;  background: url(../../style/css/img/quote.png) no-repeat 5% 20% rgba(0,0,0,1);}
#prefooter aside blockquote .author {padding: 40px 0 0 35px; font-size: 13px;background: url(../../style/css/img/case-arrow.png) no-repeat 90px 0;}



#foot-nav {display: none;}
footer {width: 100%; height: 200px; float: none; text-align: center; font-size: 0.9em;}
footer .cta {margin: 0 0 15px;}
footer .social {width: 180px; margin: 0 auto;}
footer .social li a {opacity: 1;}

footer h2 .cta {

	font-size: 1.1em; text-transform: uppercase; color: #fff; 
	background: #14B1DE; display: inline-block; padding: 0 50px; line-height: 2.2em;
	text-shadow: 0 2px 2px rgba(0,0,0,0.6); margin: 0 0 10px 0;
		
	
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	-o-border-radius: 18px;
	border-radius: 18px;
	
	
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	
	
	
	background-image: linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -o-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -moz-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -webkit-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image: -ms-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(16,167,213)),
		color-stop(0, rgb(13,121,164))
	);
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;

}
footer h2 .cta:hover {
	padding: 0 50px;
	color: #6CDFFF;
	background: rgba(0,0,0,.5); color: #6CDFFF;
	-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
}



nav {height: 55px; background: url(../../style/css/img/nav-bg.jpg) repeat-x 50% 0; z-index: 999999999;}

nav ul {width: 320px; height: 60px; position: relative; margin: 0 auto; padding: 8px 0 0 0}
nav ul li {
	width: 52px;
	position: inherit; top: 0; left: 0;
	float: left;
	background: none;
	margin: 0;
}
nav ul li a {
	font-size: 1em;
	background: url(../../style/css/img/mobile-nav.png) no-repeat 0 0;
}
nav ul li a span {display: none;}

nav ul .n-services {left: 0;}
nav ul .n-news {left: 0;}
nav ul .n-team {left: 0;}
nav ul .n-marketing {right: 0;}
nav ul .n-contact {right: 0;}
nav ul .n-case {right: 0;}

nav ul li:hover {background: none;}

nav ul .n-services a {background-position: 0 0;}
nav ul .n-services a:hover  {
	background-position: -55px 0;
}

nav ul .n-news a {background-position: 0 -55px;}
nav ul .n-news a:hover  {
	background-position: -55px -55px;
}

nav ul .n-team a {background-position: 0 -110px;}
nav ul .n-team a:hover  {
	background-position: -55px -110px;
}

nav ul .n-marketing a {background-position: 0 -165px;}
nav ul .n-marketing a:hover  {
	background-position: -55px -165px;
}

nav ul .n-contact a {background-position: 0 -275px;}
nav ul .n-contact a:hover  {
	background-position: -55px -275px;
}

nav ul .n-case a {background-position: 0 -220px;}
nav ul .n-case a:hover  {
	background-position: -55px -220px;
}




body#serv nav ul .n-services a {
	background-position: -55px 0;
}

body#news nav ul .n-news a {
	background-position: -55px -55px;
}
body#case nav ul .n-case a {
	background-position: -55px -220px;
}
body#team nav ul .n-team a {
	background-position: -55px -110px;
}
body#marketing nav ul .n-marketing a {
	background-position: -55px -165px;
}
body#contact nav ul .n-contact a {
	background-position: -55px -275px;
}




body#contact #primary {width: 90%; padding: 0 0 50px 0}
body#contact #map {display: none;}


body#contact h2 {font-size: 1.3em; padding: 0; line-height: 1.5em}
body#contact h2 strong {font-size: 1.7em}

body#contact #form h2 {height: 52px; background: url(../../style/css/img/contact-icons.png) no-repeat 0 -52px; padding: 0 0 0 60px}

body#contact #info {width: auto; float: none; margin: 0 0 40px}
body#contact #form {width: 100%; float: none;}

body#contact #form button {float: none; margin: 0 auto; width: 150px;}

body#contact #info {background: rgba(0,0,0,0.3); padding: 10px;}

body#contact #info article {padding: 25px;
	
	background-image: linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -o-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -moz-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -webkit-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -ms-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.02, rgb(8,47,82)),
		color-stop(0.92, rgb(44,120,158))
	);
}

body#contact #info ul li {padding: 0 0 0 60px}





#quote-form fieldset select {position: relative; top: 0; right: 0; z-index: 9999; text-transform: none; width: 100%; }
#quote-form .dropdown {display: none;}

footer {position: relative;}

.igd-icon {
	position: absolute; left: 50%; right: auto; margin-left: -66px; top: 140px;
}

.pinfo .soon {display: none}
#social_btn {display: none;}