@charset "utf-8";
/***********************************************
 * 
 * @name      iqUI.css
 * @package   IntelligenceQuotientUI.Libraries
 * @copyright © 2009 - 2020, SDL888, Inc.
 * @link      https://UI.SDL888.Net
 *
***********************************************/
@import url('reset.css');
@import url('visual.css');

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

/*--- BACKGROUNDS ---*/
body#home #outer {background:url(../images/320/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%}

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

/* --- INSIDE lOGO -- */
header .logo {top:85px;right:5px;width:100px;height:75px}
header .logo img{display:none}
header .logo span{display:none}
header .logo img{width:100%}

/*--- INSIDE CONTAINER ---*/
#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-bottom:100px; height:auto; line-height:.8em}
body#contact h1{padding-top:15px}
body#serv.prepare #primary h1{margin-bottom:65px}
#primary h1 strong{font-weight:500}
body#serv #primary .cta {display:none}
body#serv section img{width:30%}

/*--- INSIDE SERVICES ---*/
body#serv section{width:90%; padding:20px 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;
}
body#serv section article{width:75%}

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

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

/* -- HOSTING --- */
body#serv section[role='hosting'] article{width:90%}
body#serv section[role='hosting'] article p{margin-bottom:25px}
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-bottom: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;
}

/*--- 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{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}

/*--- SERVICE caseS ---*/
body#serv.details aside{padding:25px 0}
body#serv.details aside h3{margin-bottom:25px}
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%}
body#serv.details .trooper {position:absolute; bottom:-5px; left:0}

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

/*--- /////  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%; background:url(../images/768/web-design-logo.png) no-repeat 0 0}
body#serv.details .icon-multi {width:100%; height:100%; background:url(../images/768/multi-logo.png) no-repeat 0 0}
body#serv.details .icon-dev {width:100%; height:100%; background:url(../images/768/web-dev-logo.png) no-repeat 0 0}
body#serv.details .icon-mobile {width:100%; height:100%; background:url(../images/768/mobile-logo.png) no-repeat 0 0}
body#serv.details .icon-cms {width:100%; height:100%; background:url(../images/768/cms-logo.png) no-repeat 0 0}
body#serv.details .icon-stats {width:100%; height:100%; background:url(../images/768/analytics-logo.png) no-repeat 0 0}
body#serv.details .icon-seo {width:100%; height:100%; background:url(../images/768/search-logo.png) no-repeat 0 0}
body#serv.details .icon-ecommerce {width:100%; height:100%; background:url(../images/768/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; margin:0 auto}
body.details #primary #service-list h3{font-size:1.3em; margin-bottom:30px}
#service-list .col {width:85%; float:none; margin:0 2.5%}
#service-list .col:last-child {padding-top:25px}
#service-list ul li{margin-bottom:15px}
.check-list {margin-bottom:15px}
.check-list li{
	font-size:1em;
	margin-bottom:5px;
	background:url(../images/visual/check-bullet.png) no-repeat 0 0;
	padding-bottom:30px;
}

/*--- SUBNAV ---*/
body#contact #subnav, body#case #subnav {display:none}
#subnav {position:absolute; width:90%; top:120px; left:25px}
#subnav li{float:left; margin-right:15px}
#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-bottom:50px;
	font-size:.85em;
	height:auto;
	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#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}

/*--- Direction Nav ---*/
#next {
	width:50px;
	height:50px;
	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;
}
#next:hover{background-position:-50px -50px}
#prev {
	width:50px;
	height:50px;
	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;
}
#prev:hover{background-position:0 -50px}

/*--- FOLIO THUMBS ---*/
.pthumbs {margin:15px auto 0 auto; width:90%; max-width:848px; padding-bottom:50px}
.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}
.pinfo .col {width:100%; margin-bottom:50px}
.pinfo .col:first-child p{margin-bottom:20px}
.pinfo h2{margin-bottom:20px; color:#70DEFE; font-weight:300}
.pinfo ul li{
	height:37px;
	line-height:30px;
	font-size:1em;
	padding-left:50px;
	margin-bottom:10px;
	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 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-bottom:35px}
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:180px;
	height:203px;
	text-indent:-999em;
	background:url(../images/768/igd-hologram.png) no-repeat 0 0;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-90px;
}
#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-bottom:25px}
body#team .content p{color:#B9B9B9; font-size:.9em}
 
/*--- FEATURED ---*/
#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);
}

/*--- HOME - SERVICES ---*/ 
#services {padding:30px 2% 0 0; width:98%}
#services section {width:100%; float:none; text-align:left}
#services p{margin-bottom:30px; 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-bottom:15px;
	float:left;
	height:120px;
}
#services h2{font-size:1.2em}

/*--- HOME - CONTAINER ---*/
#midwrap {width:100%; background:url(../images/480/midfield.jpg) repeat-x 50% 0}
#container {background:none; padding: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}

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

/*--- marketing POSTS ---*/
body#marketing h1{height:inherit; line-height:34px; margin-bottom:45px; 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}

/*---- FULL marketing POST ---*/
body#marketing.full-post .logo {display:none}
body#marketing.full-post #inside-wrap {background:none}
body#marketing.full-post #primary .marketing-post h1{
	font-size:2.2em;
	line-height:1.2em;
	padding:0 25px;
	margin-bottom:25px;
	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-bottom:25px;
	padding:10px;
}
body#marketing.full-post .marketing-post .post {margin-bottom:25px}
body#marketing.full-post .marketing-post .post .cta {float:none; width:80%; clear:both; text-align:center; margin-bottom:25px}
.marketing-post figure {margin:0 auto 25px auto; width:auto}
.marketing-post img{max-width:100%; float:none}
#prefooter .news-post {display:none}

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

/*--- PREFOOTER ---*/
#prewrap {width:100%; background:none; border:none}
#prefooter {width:100%}
#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%}
#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 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-bottom:10px;
		
	/* -- 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 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);
}

/*--- TOP NAVIGATION ---*/
nav{height:55px; background:url(../images/480/nav-bg.jpg) repeat-x 50% 0; z-index:999999999}
nav ul{width:320px; height:60px; position:relative; margin:0 auto; padding-top:8px}
nav ul li{width:52px; position:inherit; top:0; left:0; float:left; background:none}
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%; padding-bottom:50px}
body#contact #map {display:none}
body#contact h2{font-size:1.3em;line-height:1.5em}
body#contact h2 strong{font-size:1.7em}
body#contact #form h2{height:52px; background:url(../images/visual/contact-icons.png) no-repeat 0 -52px; padding-left:60px}
body#contact #info {width:auto; float:none; margin-bottom: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;
	/* -- GRADIENT -- */
	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-left:60px}

/*--- 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}