.clearAll{ clear: both; font-size: 0px; width: 0px; height: 0px; margin: 0;padding: 0;}
.left{float:left;}
.right{float:right;}
/*TSL*/
#at_glance {background:#F4F4F4;width:100%;height:745px;position:relative;}
#at_glance .glance_1{height:660px;padding:85px 0 0 0;}
	#at_glance .ab_glance{position:absolute;width:168px;height:168px;display:none; z-index:201}
	#at_glance .ab_square_1{left:102px;top:309px;}
	#at_glance .ab_square_2{left:308px;top:309px;}
	#at_glance .ab_square_3{left:521px;top:309px;}
	#at_glance .ab_square_4{left:730px;top:309px;}
	.glance_content{display:none;}
	#at_glance .wrap_glance{width:1000px;margin:0 auto;position:relative;}
	#at_glance .glance_1 .top{/*background: url('../images/about/text/at_glance.png') no-repeat center top;*/height:100px;width: 700px;margin:0 auto;
		
	}
	#at_glance .box-headline{
		width: 630px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		z-index: 0;
		top: -30px;
	}

	#at_glance .box-headline span{
		font-size: 80px;
		letter-spacing: 0px;
	}

	#at_glance .box-headline img{
		margin-right: 20px;
	}

	#at_glance .des{
		width: 100%;
		margin: auto;
		font-size: 26px;
		text-align: center;
		color:#999999;
		position: relative;
		top: -32px;
	}
	
	#at_glance .box-headline2{
		width: 630px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		z-index: 0;
	}

	#at_glance .box-headline2 span{
		font-size: 80px;
		letter-spacing: 0px;
		color:#fff;
	}

	#at_glance .box-headline2 img{
		margin-right: 20px;
	}

	#at_glance .des2{
		width: 100%;
		margin: auto;
		font-size: 26px;
		text-align: center;
		color:#999999;
	}
	
    #at_glance .glance_1 .top.active{background: url('../images/about/text/at_glance_hover.png') no-repeat center top;}
	#at_glance .glance_1 .center{height:253px;width:800px;margin:124px auto 0 auto;text-align:center;position:relative;padding-left:3px;}
	#at_glance .glance_1 .center .square{width:158px;height:158px;border:5px solid #000000;float:left;margin:0 42px 0 0;position:relative;}
	#at_glance .glance_1 .center .square .svg{position:absolute;left:-4.5px;top:-5px;width:168px;height:168px;}

	#at_glance .glance_1 .center .square .text_top{font-size:60px;color:#000000;font-family: 'geosanslight';padding:20px 24px 0 0;height:75px;}
	#at_glance .glance_1 .center .square .text_bottom{font-size: 16px; letter-spacing: 0px;color:#000000;padding:0 15px 15px 15px;}
	#at_glance .glance_1 .bottom{background: url('../images/about/text/7_benefit.png') right top no-repeat; display: none; height:105px;width:396px;margin:0 auto;padding-left:1px;}
	.square_2 .span_sum{right:31px;top:31px;}
	.square_3 .span_sum{right:31px;top:31px;}
	.square_4 .span_percent{right:28px;top:20px;}
	.square_1 .text_top{padding-right:0px!important;}
	
#at_glance .glance_2{display:none; position:relative; z-index: 200;}
#at_glance .glance_2 .content{width:796px;height:100%;background: url('../images/about/text/at_glance_hidden.png') left 85px no-repeat #000000;height:745px;margin:0 auto; padding-top: 53px;}
.bg_glance_1{background:#F4F4F4;}
.bg_glance_2{background:#000000!important;}
.mask_black{width:100%;height:100%;position:fixed;background:#000000;top:0px;left:0px;z-index:190;display:none;}
.span_sum{background: url('../images/about/text/+.png') no-repeat;width:19px;height:19px;display:block;position:absolute;}
.span_percent{background: url('../images/about/text/percent.png') no-repeat;width:25px;height:27px;display:block;position:absolute;}

/*END TSL*/

/*TIEN PHAM*/

/* general */
*{ margin: 0; padding: 0; }
#loading-bar{
	background: url("../images/loading-1.jpg") center center no-repeat #000;
}

#loading-bar #loading-bar-background-1{
	background: url("../images/loading-2.jpg") top center no-repeat #000;
}
#loading-bar-background-2{
	background: url("../images/loading-3.jpg") top center no-repeat #000;
}
#loading-bar-background-3{
	background: url("../images/loading-4.jpg") top center no-repeat #000;
}
#loading-bar-background-4{
	background: url("../images/loading-5.jpg") top center no-repeat #000;
}

#loading-bar, #loading-bar .bg_loading{
	text-align: center;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
}

#loading-bar .bg_loading{
	opacity: 0;
}

.about-body-width{
    width: 100%;
    margin: auto;
    position: relative;
}
.about-main-width{
    width: 960px;
    height: 100%;
    margin: auto;
    position: relative;
}

/* slogan */
#about{
}

#about .label_text{ display: none; }

#aabout-slogan{
    padding-top: 95px;
    position: relative;
    height: 140px;
    top:-3px;
    background: url(../images/about/slogan/slogan.png) center bottom no-repeat;
}

/* banner */
#about-banner{
	width: 100%;
	margin: auto;
    margin-top: 80px;
    margin-bottom: 90px;
	position: relative;
	z-index: 0;
	height: 360px;
}

#about-banner .box-headline{
	width: 530px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 0;
	top: -26px;
}

#about-banner .box-headline span{
	font-size: 80px;
	letter-spacing: 0px;
}

#about-banner .box-headline img{
	margin-left: 20px;
}

#about-banner .des{
	width: 100%;
	margin: auto;
	font-size: 26px;
	text-align: center;
	color:#999999;
	position: relative;
	top: -32px;
}

#about-banner .wrap_banner_img_2{
	height: 100%;
	position: relative;
	z-index: 0;
}

#about-banner .about-banner{
	width: 100%;
    height: 345px;
	/* background-size: 100% 100%!important; */
}

#about-banner .banner_1{background: none; }
#about-banner .banner_2{background: url(../images/about/banner/banner_2.png) center 0 no-repeat;}
#about-banner .about-banner .img{
    width: 600px;
    height: 300px;
    padding-top: 37px;
    font-size: 16px; letter-spacing: 0px;
    margin: auto;
    text-align: center;
	line-height: 22px;
}

#about-banner .rotate_line{
	height: 10px;
	width: 1px;
	background: url(../images/about/banner/rotate_line.png) 0 0 no-repeat;
	position: absolute;
	top: 2px;
	left: 50%;
	margin-left: -0.5px;
	display: none;
}
#about-banner .bx-pager-item .bx-pager-link.active .rotate_line{
	display: block!important;
}

#about-banner .banner_shadow{
	height: 15px;
	width: 100%;
	/*background: url(../images/about/banner/banner_shadow.png) 0 0 repeat-x;*/
}

#about-banner .bx-pager{
	position: absolute;
	bottom: -67px;
	left: 50%;
}
#about-banner .bx-controls-direction{
	display: none;
}
#about-banner .bx-pager-item{
	float: left;
	margin-left: 8px;
	position: relative;
	z-index: 0;
}
#about-banner .bx-pager-item .bx-pager-link{
	height: 9px;
	width: 9px;
	background: #000;
	margin-top: 3px;
	font-size: 0;
	text-indent: -999px;
	overflow: hidden;
	display: block;
}
#about-banner .bx-pager-item .bx-pager-link.active{
	width: 14px;
	height: 14px;
	margin-top: 0;
	background: #00aeef;
}
/* what we do */
#what-we-do{
    height: 599px;
    padding-top: 75px;
    padding-bottom: 55px;
    position: relative;
    background-color: #f4f4f4;
}

#what-we-do .title{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 80px;
    position: relative;
	letter-spacing: 0px;
    font-family: 'geosanslight';
}

#what-we-do .description{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 26px;
    color: #999999;
    margin-bottom: 120px;
    position: relative;
    font-family: 'rockwell';
}

#what-we-do .list-tags{
    width: 928px;
    height: 264px;
    margin: auto;
    position: relative;
    display: none;
    background: url(../images/about/tags/bg-tag.png) no-repeat;
}

#what-we-do .list-tags .tag-min{
    font-size: 18px; letter-spacing: 0px;
    font-weight: 900;
    font-family: 'quicksandbold';
    position: absolute;
    cursor: pointer;
    color: #000;
    
}

#what-we-do .list-tags .tag-min .text{
    position: relative;
}

#what-we-do .list-tags .tag-min span{ color: #000; }

#what-we-do .list-tags .tag-min:hover span{
    color: #fff;
}

#what-we-do .list-tags .tag-min:hover{
    z-index: 195;
}

#what-we-do .bg-black{
    display: none;
    position: fixed;
    background: #000;
    z-index: 190;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

#what-we-do .list-tags .tag img{
    display: none;
    position: relative;
    z-index: 201;
}

/*Item*/
#what-we-do .list-tags .tag-wd{
    width: 175px;
    height: 20px;
    font-weight: 900;
    position: relative;
    top:-2px;
}

#what-we-do .list-tags .tag-wd:hover{
    background-position: 0 20px;
    z-index: 200;
}

#what-we-do .list-tags .tag-wd img{
    top:40px;
    left: 50px;
}

#what-we-do .list-tags .tag-wad{
    left: 413px;
    width: 264px;
    height: 20px;
    font-weight: 900;
    top:-2px;
}

#what-we-do .list-tags .tag-wad:hover{
    background-position: 0 20px;
}

#what-we-do .list-tags .tag-wad img{
    top:40px;
    left: -370px;
}

#what-we-do .list-tags .tag-games{
    right: 8px;
    width: 57px;
    height: 14px;
    font-weight: 900;
    top:-2px;
}

#what-we-do .list-tags .tag-games:hover{
    background-position: 0 14px;
}

#what-we-do .list-tags .tag-games img{
    top:40px;
    left: -824px
}

#what-we-do .list-tags .tag-soft{
    top: 100px;
    left: 0;
    width: 220px;
    height: 20px;
    font-weight: 900;
    position: relative;
}

#what-we-do .list-tags .tag-soft:hover{
    background-position: 0 20px;
}

#what-we-do .list-tags .tag-soft img{
    top:-110px;
    left: 44px;
}

#what-we-do .list-tags .tag-mobile{
    top: 117px;
    right: -7px;
    width: 169px;
    height: 20px;
    font-weight: 900;
}

#what-we-do .list-tags .tag-mobile:hover{
    background-position: 0 20px;
}

#what-we-do .list-tags .tag-mobile img{
    top:-74px;
    left: -687px;
}

#what-we-do .list-tags .tag-social{
    top: 245px;
    left: -3px;
    width: 246px;
    height: 20px;
    font-weight: 900;
}

#what-we-do .list-tags .tag-social:hover{
    background-position: 0 20px;
}

#what-we-do .list-tags .tag-social img{
    top:-260px;
    left: 38px;
}

#what-we-do .list-tags .tag-business{
    top: 244px;
    right: -7px;
    width: 241px;
    height: 14px;
    font-weight: 900;
}

#what-we-do .list-tags .tag-business:hover{
    background-position: 0 14px;
}

#what-we-do .list-tags .tag-business img{
    top:-235px;
    left: -620px;
}

/* who we do it for */
#who-we-do-it-for{
    padding-top: 75px;
    padding-bottom: 55px;
    position: relative;
    height: 644px;
}

#who-we-do-it-for .title{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 80px;
    position: relative;
	letter-spacing: 0px;
    font-family: 'geosanslight';
}

#who-we-do-it-for .description{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 26px;
    color: #999999;
    margin-bottom: 120px;
    position: relative;
    font-family: 'rockwell'
}

#who-we-do-it-for .project-show{
    display: none;
    position: relative;
}

#who-we-do-it-for .line{
    width: 780px;
    height: 1px;
	margin-left: 180px;
    position: relative;
    z-index: 200;
    z-index: 0;
    background-color: #000;
}

#who-we-do-it-for .we-work-with{
    padding-bottom: 50px;
}

#who-we-do-it-for .we-work-with .text{
    float: left;
    width: 195px;
    position: relative;
    top:3px;
    font-size: 16px; letter-spacing: 0px;
    z-index: 10;
    font-family: 'geosanslight';
}

#who-we-do-it-for .we-work-with .text-hide{
    display: none;
    color: #fff;    
}

#who-we-do-it-for .we-work-with .box-logo{
    float: left;
    position: relative;
}

#who-we-do-it-for .project-show .box-logo-1{
	height: 25px;
	position:relative;
}

#who-we-do-it-for .project-show .box-logo-2{
    display: none;
	height: 25px;
	position:relative;
}

#who-we-do-it-for .project-show .ps-prev{
    width: 38px;
    height: 28px;
    background: url(../images/about/project/btn-next.jpg) 0 0 no-repeat;
    position: absolute;
    top:62px;
    left: 140px;
    z-index: 5;
	cursor: pointer;
}

#who-we-do-it-for .project-show .ps-next{
    width: 38px;
    height: 28px;
    background: url(../images/about/project/btn-next.jpg) 0 -28px no-repeat;
    position: absolute;
    top:62px;
    right: -40px;
    z-index: 5;
	cursor: pointer;
}

#who-we-do-it-for .project-show .ps-next.active{
    background-position: -38px -28px;
}

#who-we-do-it-for .project-show .ps-prev.active{
    background-position: -38px 0px;
}

#who-we-do-it-for .we-work-with .logo{
    float: left;
}

#who-we-do-it-for .we-work-with .logo .logo-hover{ 
    position: relative;
    z-index: 0;
}

#who-we-do-it-for .we-work-with .logo .bg-black{ 
    display: none; 
    position: fixed;
    background: #000;
    z-index: 190;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

#who-we-do-it-for .we-work-with .logo .box-project{
    position: absolute;
    top:100px;
    left: 0;
    width: 770px;
    z-index: 200;
    display: none;
}

#who-we-do-it-for .we-work-with .logo .box-project .project{
    float: left;
    margin-left: 94px;
	letter-spacing: 0px;
    font-family: 'geosanslight';
}

#who-we-do-it-for .we-work-with .logo .box-project .project p{
    text-align: center;
    margin-top: 3px;
    font-size: 14px;
	letter-spacing: 0px;
    color: #999999;
}

#who-we-do-it-for .we-work-with .logo-dentsu{ position: absolute; left: 0; top: 0px; width: 110px; height: 23px; margin-right: 102px; background-image: url(../images/about/logo/logo-dentsu.png); }
#who-we-do-it-for .we-work-with .logo-bussnes{ position: absolute; left: 0; top: 0px; width: 149px; height: 23px; margin-right: 81px; background-image: url(../images/about/logo/logo-bussnes.png); }
#who-we-do-it-for .we-work-with .logo-cheil{ position: absolute; left: 0; top: 0px; width: 84px; height: 26px; margin-right: 97px; background-image: url(../images/about/logo/logo-cheil.png); }
#who-we-do-it-for .we-work-with .logo-saatchi{ position: absolute; left: 0; top: 0px; width: 127px; height: 23px; background-image: url(../images/about/logo/logo-saatchi.png); }
#who-we-do-it-for .we-work-with .logo-climax{ position: absolute; left: 0; top: -15px; width: 110px; height: 48px; margin-right: 109px; background-image: url(../images/about/logo/logo-climax.png); }
#who-we-do-it-for .we-work-with .logo-lowe{ position: absolute; left: 0; top: -23px; width: 71px; height: 69px; margin-right: 122px; background-image: url(../images/about/logo/logo-lowe.png); }
#who-we-do-it-for .we-work-with .logo-sun{ position: absolute; left: 0; top: -40px; width: 93px; height: 96px; margin-right: 139px; background-image: url(../images/about/logo/logo-sun.png); }
#who-we-do-it-for .we-work-with .logo-jwt{ position: absolute; left: 0; top: -16px; width: 111px; height: 47px; background-image: url(../images/about/logo/logo-jwt.png); }


/*----------------*/

#who-we-do-it-for .to-create-value-for{
    padding-top: 45px;
}

#who-we-do-it-for .to-create-value-for .text{
    float: left;
    width: 195px;
    position: relative;
    top:3px;
    font-size: 16px; letter-spacing: 0px;
    z-index: 10;  
    font-family: 'geosanslight';
}

#who-we-do-it-for .to-create-value-for .text-hide{
    display: none;
    color: #fff;    
}

#who-we-do-it-for .to-create-value-for .box-logo{
    float: left;
    width: 765px;
    position: relative;
}

#who-we-do-it-for .to-create-value-for .logo{
    float: left;
    margin-bottom: 40px;
}

#who-we-do-it-for .to-create-value-for .logo .logo-hover{ 
    position: relative;
    z-index: 0;
}

#who-we-do-it-for .to-create-value-for .logo .bg-black{ 
    display: none; 
    position: fixed;
    background: #000;
    z-index: 190;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

#who-we-do-it-for .to-create-value-for .logo .box-project{
    position: absolute;
    top:-200px;
    left: 0;
    width: 770px;
    z-index: 200;
    display: none;
}

#who-we-do-it-for .to-create-value-for .logo .box-project .project{
    float: left;
    margin-left: 94px;
	letter-spacing: 0px;
    font-family: 'geosanslight';
}

#who-we-do-it-for .to-create-value-for .logo .box-project .project p{
    text-align: center;
    margin-top: 3px;
    font-size: 14px;
    color: #999999;
}

#who-we-do-it-for .to-create-value-for .logo-samsung{ position: absolute; left: 0; top: 0px; width: 93px; height: 30px; margin-right: 145px; top:7px; background-image: url(../images/about/logo/logo-samsung.png); }
#who-we-do-it-for .to-create-value-for .logo-campina{ position: absolute; left: 0; top: 0px; width: 129px; height: 55px; margin-right: 120px; background-image: url(../images/about/logo/logo-campina.png); }
#who-we-do-it-for .to-create-value-for .logo-domino{ position: absolute; left: 0; top: 0px; width: 68px; height: 68px; margin-right: 110px; top:-3px; background-image: url(../images/about/logo/logo-domino.png); }
#who-we-do-it-for .to-create-value-for .logo-liberty{ position: absolute; left: 0; top: 0px; width: 100px; height: 41px; top:5px; background-image: url(../images/about/logo/logo-liberty.png); }
#who-we-do-it-for .to-create-value-for .logo-honda{ position: absolute; left: 0; top: 0px; width: 115px; height: 24px; margin-right: 135px; background-image: url(../images/about/logo/logo-honda.png); }
#who-we-do-it-for .to-create-value-for .logo-pepsi{ position: absolute; left: 0; top: 0px; width: 105px; height: 39px; margin-right: 110px; top:-10px; background-image: url(../images/about/logo/logo-pepsi.png); }
#who-we-do-it-for .to-create-value-for .logo-vinaphone{ position: absolute; left: 0; top: 0px; width: 129px; height: 31px; margin-right: 70px; top:-10px; background-image: url(../images/about/logo/logo-vinaphone.png); }
#who-we-do-it-for .to-create-value-for .logo-pg{ position: absolute; left: 0; top: 0px; width: 69px; height: 30px; top:-10px; background-image: url(../images/about/logo/logo-pg.png); }

#who-we-do-it-for .to-create-value-for .logo-coca{ position: absolute; left: 0; width: 99px; height: 32px; margin-right: 105px; top: -3px; background-image: url(../images/about/logo/logo-coca.png); }
#who-we-do-it-for .to-create-value-for .logo-microsoft{ position: absolute; left: 0; top: 5px; width: 129px; height: 28px; margin-right: 120px; background-image: url(../images/about/logo/logo-microsoft.png); }
#who-we-do-it-for .to-create-value-for .logo-nestle{ position: absolute; left: 0; width: 88px; height: 24px; margin-right: 110px; top: 7px; background-image: url(../images/about/logo/logo-nestle.png); }
#who-we-do-it-for .to-create-value-for .logo-kohler{ position: absolute; left: 0; top: 0px; width: 106px; height: 25px; top:5px; background-image: url(../images/about/logo/logo-kohler.png); }
#who-we-do-it-for .to-create-value-for .logo-nokia{ position: absolute; left: -453px; top: 34px; width: 130px; height: 20px; margin-right: 135px; background-image: url(../images/about/logo/logo-nokia.png); }
#who-we-do-it-for .to-create-value-for .logo-bp{ position: absolute; left: 229px; top: -68px; width: 66px; height: 87px; margin-right: 110px; background-image: url(../images/about/logo/logo-bp.png); }
#who-we-do-it-for .to-create-value-for .logo-sc{ position: absolute; left: 259px; top: -45px; width: 125px; height: 47px; margin-right: 110px; background-image: url(../images/about/logo/logo-sc.png); }
#who-we-do-it-for .to-create-value-for .logo-unilever{ position: absolute; left: 259px; top: -62px; width: 71px; height: 78px; margin-right: 110px; background-image: url(../images/about/logo/logo-unilever.png); }


/* 7 things section */
.seven-title {
	padding:4em 0;
}

#seventhings{
    width: 100%;
    position: relative;
    margin: auto;
}

#seventhings .seventhings-slide .text {
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	transition: all 0.2s; 
}

#seventhings .seventhings-slide section{
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
}

#seventhings .seventhings-slide .text.slide-on {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
}

#seventhings .seventhings-slide  {
	background-size: cover;
	background-position: center center;
	height: 52px;
	position: relative;
	z-index: 0;
}

#seventhings #seventhings-slide1 {
	background: url('../images/about/7things-english.jpg') center 0 repeat-y;
	z-index: 100;
	color: #fff;
	background-size: cover;
}

#seventhings #seventhings-slide2 {
	background:url('../images/about/dave-pup.jpg') center 0 repeat-y;
	z-index: 101;
	color: #fff;
	background-size: cover;
}
	
#seventhings #seventhings-slide3 {
	background:url('../images/about/7things-books.jpg') center 0 repeat-y;
	z-index: 102;
	color: #000;
	background-size: cover;
}

#seventhings #seventhings-slide4 {
	background:url('../images/about/7things-pool.jpg') center 0 repeat-y;
	z-index: 103;
	color: #fff;
	background-size: cover;
}

#seventhings #seventhings-slide5 {
	background:url('../images/about/7things-passion.jpg') center 0 repeat-y;
	z-index: 104;
	background-size: cover;
}

#seventhings #seventhings-slide6 {
	background:url('../images/about/7things-worklate.jpg') center 0 repeat-y;
	z-index: 105;
	background-size: cover;
}

#seventhings #seventhings-slide7 {
	background:url('../images/about/7things-techforgold.jpg') center 0 repeat-y;
	z-index: 106;
	background-size: cover;
}	

#seventhings .text {
	-moz-box-sizing: border-box;
	background: #000;
	background: none repeat scroll 0 0 rgba(0,0,0,0.7);
	color: #FFF;
	text-shadow:0 2px 0 rgba(0,0,0,0.2);
	line-height: 2em;
	padding: 50px;
    width: 640px;
	text-align: center;
	border-radius: 3px 3px 3px 3px;
    font-family: 'geosanslight';
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	min-height: 184px;
	margin: -140px 0 0 -370px;
}

#seventhings .text h3{
	color: #fff;
	font-size: 50px;
	font-weight: bold;
	line-height: 100px;
	text-align: center;
	margin: 0 auto;
	letter-spacing: 0px;
    font-family: 'geosanslight';
}

#seventhings p{
    font-size: 16px; letter-spacing: 0px;
	width: 450px;
	margin: auto;
}

#seventhings a {
	color: #e94f4f;
}

/*END TIEN PHAM*/
