@import url('reset.css');
@import url('visual.css');

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

/*-------------------------------------------    
   BACKGROUNDS
-------------------------------------------*/
body#home #outer {background: url(../images/480/field.jpg) repeat-x 50% 0}
#outer {background: url(../images/480/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
-------------------------------------------*/
header#masthead {height: 70px;}
body#home header .logo {
	top: 90px;
	width: 174px;
	margin-left: -87px;
	background: none;; 
	padding: 0;
}
body#home header .logo { left: 50%; width: 174px; margin-left: -87px; top: 90px;}

/* --- INSIDE lOGO -- */
header .logo {top: 95px; right: 20px; width: 130px;}

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


/*-------------------------------------------    
   INSIDE CONTAINER
-------------------------------------------*/
#primary h1 {font-size: 5em; padding: 25px 0 0 20px; text-align: left;  margin: 0 0 65px; line-height: .7em; letter-spacing: -3px;}
#primary h1 strong {font-weight: 800; letter-spacing: normal;}


body#serv #primary .cta {display: none;}


/*-------------------------------------------    
   INSIDE SERVICES
-------------------------------------------*/
body#serv section {width: 90%; padding: 15px 0}
body#serv .mobi a {display: block; background: url(../images/480/innovate-mobile.png) no-repeat; width: 200px; height: 206px; text-indent: -999em; margin: 25px auto;}
body#serv .screens a {display: block; background: url(../images/480/innovate-screen.png) no-repeat; width: 280px; height: 185px; text-indent: -999em; margin: 0 auto;}


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

/* -- ECOMMERCE -- */
body#serv section[role='ecommerce'] .serv-icon {height: 120px; top: -25px; position: relative;}


/* -- HOSTING --- */
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; font-weight: 800;}
body#serv section[role='hosting'] h2 em {font-family: 'Calligraffitti'; color: #6CDFFF; font-size: 1.8em; text-transform: lowercase; line-height: 1.8em}



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

/* -- SPACEBOY -- */
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: 20px; width: 90%; float: none;}
body.details #primary #secondary {width: 90%; position: relative;}
body.details #primary #secondary .cta {float: none}
body#serv.details #primary {
	height: auto;
}



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


/* --- SERVICE marketing POSTS ---- */
body#serv.details .marketing-post {width: 45%; float: left; margin: 0 2.5%}
body#serv.details .brands {width: 100%;}

/* ---- FULL marketing POST ----- */
body#marketing.full-post #primary .marketing-post h1 {font-size: 2.2em; line-height: 1.2em; padding: 0; margin: 0 0 25px 0; font-weight: 300; letter-spacing: normal;}

body#marketing.full-post .logo {display: none;}

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

body#marketing.full-post #inside-wrap {background: none; padding: 0;}
body#marketing.full-post #primary {padding: 0;}
body#marketing.full-post .marketing-post .post {margin: 0 0 25px 0;}

body#marketing.full-post .marketing-post img {float: none; width: 100%; margin: 0 25px 10px 0;}

/* --- POST LIST --- */
body#marketing.full-post .marketing-post ul {margin: 0 0 35px 50px}


body#serv.details .trooper {position: absolute; bottom: -5px; left: 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(../images/768/web-design-logo.png) no-repeat 0 0
}
body#serv.details .icon-multi {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/multi-logo.png) no-repeat 0 0
}
body#serv.details .icon-dev {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/web-dev-logo.png) no-repeat 0 0
}
body#serv.details .icon-mobile {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/mobile-logo.png) no-repeat 0 0
}
body#serv.details .icon-cms {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/cms-logo.png) no-repeat 0 0
}
body#serv.details .icon-stats {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/analytics-logo.png) no-repeat 0 0
}
body#serv.details .icon-seo {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/search-logo.png) no-repeat 0 0
}
body#serv.details .icon-ecommerce {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/commerce-logo.png) no-repeat 0 0
}


/* --- /// SERVICE FOOT LINKS //// --- */
body.details #primary #service-list {width: 90%; height: 230px; position: relative; padding: 50px 0 0 0; margin: 0 auto;}
body.details #primary #service-list h3 {font-size: 1.3em; margin: 0 0 30px 0}
#service-list .col {width: 45%; float: left; margin: 0 2.5%}
#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(../images/visual/check-bullet.png) no-repeat 0 0; padding: 0 0 0 30px;}



/*-------------------------------------------    
   SUBNAV
-------------------------------------------*/
body#contact #subnav, body#case #subnav {display: none;}
#subnav { position: absolute; top: 150px; left: 30px;}
#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: 1em;
	height: auto; margin: 0;
	font-weight: 600;
		
	/* -- RADIUS -- */
	-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; 
	
	/* -- SHADOW -- */
	-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);
	
	
	/* -- GRADIENT -- */
	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))
	);
}



/*-------------------------------------------    
   PORTFOLIO
-------------------------------------------*/
body#news #inner {
	background: none;
}
body#news #primary {height: auto;}
body#news #primary h1 {display: none;}
body#news .logo {display: none;}


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

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

/* Direction Nav */
body#home #next {width: 52px; height: 101px; margin: 0; display: block; background: url(../images/visual/bg_direction_nav.png) no-repeat -52px 0; position: absolute; top: 250px; right: 10px; cursor: pointer; text-indent: -9999px; z-index: 999}
body#home #next:hover {background-position: -52px -101px}

body#home #prev {width: 52px; height: 101px; margin: 0; display: block; background: url(../images/visual/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 250px; left: 10px; cursor: pointer; text-indent: -9999px; z-index: 999}
body#home #prev:hover {background-position: 0 -101px}



/* -- FOLIO THUMBS -- */
.pthumbs {
	margin: 20px auto 0 auto; width: 90%; max-width: 848px; 
	background: none; 
	padding: 0;
}

.pthumbs li {float: none; height: auto; margin: 0}

.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%; margin:0;}

.pthumbs li:first-child img {padding: 5px 0 5px 5px}
.pthumbs li:last-child img {padding: 5px 5px 5px 0}
.pthumbs li:first-child, .pthumbs li:last-child {margin: 8% 0 0 0}

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

.pinfo h2 {margin: 0 0 20px 0; color: #fff; 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;}



/*-------------------------------------------    
   caseS
-------------------------------------------*/
body#news aside blockquote p {background: url(../images/visual/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(../images/visual/quote.png) no-repeat 5% 5% rgba(0,0,0,0.75); border: none;}



/*-------------------------------------------    
   TROOPERS
-------------------------------------------*/
body#team h1 {margin: 0 0 15px 0;}
body#team aside {display: none;}
body#team #subnav {display: none;}
body#team .team-wires {display: none;}

body#team .troopers_box {display: none;}

/*-- IGD LINK --*/
body#team #igd_btn {display: block; width: 289px; height: 326px; text-indent: -999em; background: url(../images/visual/igd-hologram.png) no-repeat 0 0; position: absolute; bottom: 70px; left: 50%; margin-left: -144px;}

#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 420px 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;}
 
 
 
/*-------------------------------------------    
   FEATURED
-------------------------------------------*/
#slidenav {display: none;}

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


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

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

/*-------------------------------------------    
   HOME - SERVICES
-------------------------------------------*/ 
#services {padding: 30px 2% 0 0; width: 98%;}
#services section {
	width: 50%;
	margin: 0;
	float: left;
	text-align: left;
	padding: 0;
}
#services p {padding: 0; margin: 0 0 30px 0}
#services section .serv-cta {display: none;}
#services figure {
	display: block;
	max-width: 100%;
	background: none; position: inherit; top: 0; 
	left:0; margin: 0 0 50px; float: left; padding: 0; 
}

#services h2 {font-size: 1.4em; font-weight: 300}


/* --- //// INNNER MEDIA QUERY //// --- */
@media screen and (max-width: 600px) {

	#services section {
		width: 100%;
		float: none;
	}
	
	#services figure {
		max-width: 100%; margin: 0;
	}
	
}


/*-------------------------------------------    
   HOME - CONTAINER
-------------------------------------------*/
#midwrap {
	width: 100%; 
	background: url(../images/480/midfield.jpg) repeat-x 50% 0; 
}
#container {background: none; padding: 20px 0 20px 0;}
#container section {
	width: 65%;
	padding: 0 0 0 3%;
}
#container .sub-aside {display: none;}
#container aside {
	display: none;
}
#container .brand-logos {display: none;}
#container h2,#container h3 {
	font-size: 1.5em; letter-spacing:  normal;
}
#container .cta {font-size: .8em; padding: 0 20px; margin: 0;}



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


/*-------------------------------------------    
  marketing POSTS
-------------------------------------------*/
body#marketing h1 { 
	font-size: 4em;
	padding: 0; margin: 0; height: inherit; line-height: 40px; margin: 0 0 45px 0
}
body#marketing h1 span {padding: 0 0 0 70px; font-size: .3em;}
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;}

.marketing-post img {width: 35%; margin: 0 1.5em 1.5em 0}

#prefooter .news-post {display: none;}

/*-------------------------------------------    
  SEARCH
-------------------------------------------*/
#search {display: none;}





/*-------------------------------------------    
  PREFOOTER
-------------------------------------------*/
#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(../images/visual/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(../images/visual/case-arrow.png) no-repeat 90px 0;}

/*-------------------------------------------    
  FOOT NAV
-------------------------------------------*/
#foot-nav {display: none;}
footer {width: 100%; height: 200px; float: none; text-align: center; font-size: 0.9em;}
footer .cta {margin: 0 0 5px;}
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 80px; line-height: 2.2em;
	text-shadow: 0 2px 2px rgba(0,0,0,0.6); margin: 0 0 10px 0;
		
	/* -- RADIUS -- */
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	-o-border-radius: 18px;
	border-radius: 18px;
	
	/* -- SHADOW -- */
	-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);
	
	/* -- GRADIENT -- */
	
	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 80px;
	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);
}


/*-------------------------------------------    
  TOP NAVIGATION
-------------------------------------------*/
nav {height: 55px; background: url(../images/480/nav-bg.jpg) repeat-x 50% 0; z-index: 999999999;}

nav ul {width: 450px; height: 60px; position: relative; margin: 0 auto; padding: 8px 0 0 0}
nav ul li {
	width: 55px;
	position: inherit; top: 0; left: 0;
	float: left;
	background: none;
	margin: 0 10px;
}
nav ul li a {
	font-size: 1em;
	background: url(../images/visual/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;
}

/*-------------------------------------------    
  ACTIVE MENU ITEMS
-------------------------------------------*/
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;
}




/*-------------------------------------------    
  CONTACT
-------------------------------------------*/
body#contact #primary {width: 90%; margin: 0 0 25px 0}
body#contact h1 {padding: 25px 0 0 0;}
body#contact h2 {font-size: .9em; padding: 0; background: none; line-height: 1.5em}
body#contact h2 strong {font-size: 1em}
body#contact #info {width: 50%;}
body#contact #form {width: 45%;}

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


/*-------------------------------------------    
  case FORM
-------------------------------------------*/
/* -- CUSTOM SELECT --- */
#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;}