/*
Ghi chú hiệu ứng animation:
	animation:logo 5s linear 2s infinite alternate;
		logo 5s 2 : Hiệu ứng chạy 5s số lần thực hiện 2 lần.
		linear : Tuyến tính (chạy trên 1 đường thẳng nhưng mượt hơn).
		infinite : lập lại liên tục (Chạy hết 1 tiến trình rồi biến mất và chạy lại).
		alternate : Chế độ luân phiên.
	rotate : Hiệu ứng xoay theo độ.
	Thiết bị
	animation:logo-run 5s;
	-o-animation:logo-run 5s;
	-moz-animation:logo-run 5s;
	-webkit-animation:logo-run 5s;
*/

/*Logo TS 3D*/
header #container {
	position:absolute;
	left:112px;
	top: -112px;
	z-index:999;
	
	perspective: 512;
	-webkit-perspective: 512;
	perspective-origin: 50% 131px;
	-webkit-perspective-origin: 50% 131px;
}
header #stage {
	width: 100%;
	height: 100%;
	
	transition: transform 2s;
	-webkit-transition: -webkit-transform 2s;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}
header #shape {
	position: relative;
	top: 160px;
	margin: 0 auto;
	height: 52px;
	width: 52px;
	
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}
header .plane .one{
	background: url(../images/a1.png) no-repeat;
}
header .plane .two{
	background: url(../images/a2.png) no-repeat;
}
header .plane .three{
	background: url(../images/a3.png) no-repeat;
}
header .plane .four{
	background: url(../images/a4.png) no-repeat;
}
header .plane .five{
	background: url(../images/a5.png) no-repeat;
}
header .plane .six{
	background: url(../images/a6.png) no-repeat;
}
header .plane {
	position: absolute;
	height: 55px;
	width: 55px;
	background: url(../images/a1.png) no-repeat;
	opacity: 0.93;
	
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: transform 2s, opacity 2s;
	-webkit-transition: -webkit-transform 2s, opacity 2s;
	-moz-transition: -moz-transform 2s, opacity 2s;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
}

header #shape.backfaces .plane {
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-ms-backface-visibility: visible;
}
header #shape {
	animation: spin 8s infinite linear;
	-webkit-animation: spin 8s infinite linear;
	-moz-animation: spin 8s infinite linear;
	-o-animation: spin 8s infinite linear;
}
	@keyframes spin {
		from 	{transform: rotateY(0); }
		to   		{transform: rotateY(-360deg); }
	}
	@-webkit-keyframes spin {
		from 	{ -webkit-transform: rotateY(0); }
		to   		{ -webkit-transform: rotateY(-360deg); }
	}
	@-moz-keyframes spin {
		from 	{ -moz-transform: rotateY(0); }
		to   		{ -moz-transform: rotateY(-360deg); }
	}
	@-o-keyframes spin {
		from 	{transform: rotateY(0); }
		to   		{transform: rotateY(-360deg); }
	}
.cube > .one {
	transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(26px);
	-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(26px);
	-moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(26px);
	-o-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(26px);
}
.cube > .two {
	transform: scale3d(1.2, 1.2, 1.2) translateZ(26px);
	-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(26px);
	-moz-transform: scale3d(1.2, 1.2, 1.2) translateZ(26px);
	-o-transform: scale3d(1.2, 1.2, 1.2) translateZ(26px);
}
.cube > .three {
	transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(26px);
	-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(26px);
	-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(26px);
	-o-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(26px);
}
.cube > .four {
	transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(26px);
	-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(26px);
	-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(26px);
	-o-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(26px);
}
.cube > .five {
	transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(26px);
	-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(26px);
	-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(26px);
	-o-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(26px);
}
.cube > .six {
	transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(26px) rotate(180deg);
	-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(26px) rotate(180deg);
	-moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(26px) rotate(180deg);
	-o-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(26px) rotate(180deg);
}
/*Logo TS 3D*/

/*.logo{
	width:121px;
	height:21px;
	background:url(../images/logo-tsmedia.png) no-repeat;
	position:absolute;
	top:121px;
	left:71px;
}*/

/*Logo TSMedia run*/
.logos{
	position:absolute;
	z-index:998;
}
.logo .T{
	width:30px;
	height:30px;
	background:url(../images/no.png) no-repeat;
	position:absolute;
	top:121px;
	left:71px;
	animation: logo-t 1s;
	-webkit-animation: logo-t 1s;
	z-index: 999;
}
	@keyframes logo-t{
		0%		{transform: rotate(0deg);left:-120px;}
		100%	{transform: rotate(360deg);left:71px;}
	}
	@-webkit-keyframes logo-t{
		0%		{-webkit-transform: rotate(0deg);left:-120px;}
		100%	{-webkit-transform: rotate(360deg);left:71px;}
	}
.logo .S{
	width:30px;
	height:30px;
	background:url(../images/sa.png) no-repeat;
	position:absolute;
	top:121px;
	left:100px;
	animation: logo-s 1.5s;
	-webkit-animation: logo-s 1.5s;
	z-index: 999;
}
	@keyframes logo-s{
		0%		{transform: rotate(0deg);left:-120px;}
		100%	{transform: rotate(360deg);left:98px;}
	}
	@-webkit-keyframes logo-s{
		0%		{-webkit-transform: rotate(0deg);left:-120px;}
		100%	{-webkit-transform: rotate(360deg);left:98px;}
	}
.logo .M{
	width:30px;
	height:30px;
	background:url(../images/va.png) no-repeat;
	position:absolute;
	top:121px;
	left:130px;
	animation: logo-m 2s;
	-webkit-animation: logo-m 2s;
	z-index: 999;
}
	@keyframes logo-m{
		0%		{transform: rotate(0deg);left:-120px;}
		100%	{transform: rotate(360deg);left:126px;}
	}
	@-webkit-keyframes logo-m{
		0%		{-webkit-transform: rotate(0deg);left:-120px;}
		100%	{-webkit-transform: rotate(360deg);left:126px;}
	}
.logo .e{
	width:30px;
	height:30px;
	background:url(../images/aa.png) no-repeat;
	position:absolute;
	top:121px;
	left:158px;
	animation: logo-e 2.5s;
	-webkit-animation: logo-e 2.5s;
	z-index: 999;
}
	@keyframes logo-e{
		0%		{transform: rotate(0deg);left:-120px;}
		100%	{transform: rotate(360deg);left:144px;}
	}
	@-webkit-keyframes logo-e{
		0%		{-webkit-transform: rotate(0deg);left:-120px;}
		100%	{-webkit-transform: rotate(360deg);left:144px;}
	}
.logo .d{
	width:14px;
	height:17px;
	background:url(../images/logo-d.png) no-repeat;
	position:absolute;
	top:125px;
	left:157px;
	animation: logo-d 3s;
	-webkit-animation: logo-d 3s;
}
	@keyframes logo-d{
		0%		{transform: rotate(0deg);left:-120px;}
		100%	{transform: rotate(360deg);left:157px;}
	}
	@-webkit-keyframes logo-d{
		0%		{-webkit-transform: rotate(0deg);left:-120px;}
		100%	{-webkit-transform: rotate(360deg);left:157px;}
	}
.logo .i{
	width:5px;
	height:17px;
	background:url(../images/logo-i.png) no-repeat;
	position:absolute;
	top:125px;
	left:172px;
	animation: logo-i 3.5s;
	-webkit-animation: logo-i 3.5s;
}
	@keyframes logo-i{
		0%		{transform: rotate(0deg);left:-120px;}
		100%	{transform: rotate(360deg);left:172px;}
	}
	@-webkit-keyframes logo-i{
		0%		{-webkit-transform: rotate(0deg);left:-120px;}
		100%	{-webkit-transform: rotate(360deg);left:172px;}
	}
.logo .a{
	width:13px;
	height:12px;
	background:url(../images/logo-a.png) no-repeat;
	position:absolute;
	top:130px;
	left:178px;
	animation: logo-a 4s;
	-webkit-animation: logo-a 4s;
}
	@keyframes logo-a{
		0%		{transform: rotate(0deg);left:-120px;}
		100%	{transform: rotate(360deg);left:178px;}
	}
	@-webkit-keyframes logo-a{
		0%		{-webkit-transform: rotate(0deg);left:-120px;}
		100%	{-webkit-transform: rotate(360deg);left:178px;}
	}
	
/*Logo TSMedia run*/

/*Sun*/
header #sun,header #sun .sunrun{
	width:186px;
	height:186px;
	position:absolute;
	right:51px;
	top:21px;
}
header #sun{
	animation:sun 5s;
	-webkit-animation:sun 5s;
}
		@keyframes sun{
			0%		{transform: rotate(0deg); top:-200px; right:51px;}
			100%	{transform: rotate(0deg); top:21px; right:51px;}
		}
		@-webkit-keyframes sun{
			0%		{-webkit-transform: rotate(0deg); top:-200px; right:51px;}
			100%	{-webkit-transform: rotate(0deg); top:21px; right:51px;}
		}
header .sunrun{
	background:url(../images/sun.png) no-repeat;
	animation:sun-run 5s infinite alternate ;
	-webkit-animation:sun-run 5s infinite alternate;
}
		@keyframes sun-run{
			0%	{transform: rotate(0deg);}
			100%	{transform: rotate(360deg);}
		}
		@-webkit-keyframes sun-run{
			0%	{-webkit-transform: rotate(0deg);}
			100%	{-webkit-transform: rotate(360deg);}
		}
/*Sun*/	

/*Sologan - Only Support Chrome + Safari*/
.maskedcolor h1{
	font-size:51px;
	text-transform:uppercase;
	font-family: 'MyriadProCondensedbold';
}
.maskedcolor{
	display:inline-block;
	margin:10px;
	padding:10px;
	background: url(../images/paint.png) repeat #fff;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	animation: masked-color 21s linear infinite;
	-webkit-animation: masked-color 21s linear infinite;
}
	@keyframes masked-color {
		0% {background-position: left bottom;}
		100% {background-position: right bottom;}
	}
	@-webkit-keyframes masked-color {
		0% {background-position: left bottom;}
		100% {background-position: right bottom;}
	}
/*Sologan - Only Support Chrome + Safari*/
/*Sologan*/
.sologan{
	display:inline-block;
	padding:10px 20px;
	border-radius:10px;
	background: url(../images/paint.png) repeat;
	animation: masked-color 21s linear infinite;
	-webkit-animation: masked-color 21s linear infinite;
}
.sologan h1{
	margin:0;
	font-size:51px;
	text-transform:uppercase;
	font-family: 'MyriadProCondensedbold';
	color:#fff;
	text-shadow:0px 0px 0 rgb(206,206,206),-1px 1px 0 rgb(193,193,193),-2px 2px 0 rgb(181,181,181), -3px 3px 0 rgb(169,169,169),-4px 4px 3px rgba(0,0,0,0),-4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);
}
/*Sologan*/

/*Background white*/
.white-bg{
	background:url(../../tsmedia/library/images/bg_body.png) repeat #fff;
	animation: masked-bg-white 212s linear infinite;
	-webkit-animation: masked-bg-white 212s linear infinite;
}
	@keyframes masked-bg-white {
		0% {background-position: left bottom;}
		100% {background-position: right top;}
	}
	@-webkit-keyframes masked-bg-white {
		0% {background-position: left bottom;}
		100% {background-position: right top;}
	}
/*Background white*/

/*Cloud*/
#clouds{

}
.cloud{
	width:100%;
	position:absolute;
}
.cloud.x1{
	background:url(../images/cloud-01.png) no-repeat;
	height:67px;
	top:21px;
	left:0;
	animation: cloud 61s linear infinite;
	-webkit-animation: cloud 61s linear infinite;
}
.cloud.x2{
	background:url(../images/cloud-02.png) no-repeat;
	height:62px;
	top:121px;
	left:0;
	animation: cloud 21s linear infinite;
	-webkit-animation: cloud 21s linear infinite;
}
.cloud.x3{
	background:url(../images/cloud-03.png) no-repeat;
	height:30px;
	top:0;
	animation: cloud 31s linear infinite;
	-webkit-animation: cloud 31s linear infinite;
}
/*
.cloud.x4{
	background:url(../images/cloud-04.png) no-repeat;
	height:102px;
	top:12px;
	animation: cloud 71s linear infinite;
	-webkit-animation: cloud 71s linear infinite;
}

.cloud.x5{
	background:url(../images/cloud-05.png) no-repeat;
	height:93px;
	top:86px;
	animation: cloud 51s linear infinite;
	-webkit-animation: cloud 51s linear infinite;
}
*/
.cloud.x6{
	background:url(../images/cloud-06.png) no-repeat;
	height:110px;
	top:101px;
	animation: cloud 31s linear infinite;
	-webkit-animation: cloud 31s linear infinite;
}
.cloud.x7{
	background:url(../images/cloud-02.png) no-repeat;
	height:62px;
	top:-12px;
	animation: cloud 51s linear infinite;
	-webkit-animation: cloud 51s linear infinite;
}
	@keyframes cloud {
		0% 	{background-position: -500px;}
		100% 	{background-position: 2112px;}
	}
	@-webkit-keyframes cloud {
		0% 		{background-position: -500px;}
		100% 	{background-position: 2112px;}
	}
/*Cloud*/

/*Tree*/
.bg-tree{
	position:absolute;
	left:10px;
	bottom:-12px;
	z-index:112;
	background:url(../images/tree.png) no-repeat;
	width:160px;
	height:212px;
}
/*Tree*/

/*Giới thiệu*/

/*Giới thiệu*/

/*Dự án*/

/*Dự án*/

/*Công nghệ sử dụng*/
#technology {
	margin-top:86px;
	-webkit-perspective : 1000px;
	-moz-perspective    : 1000px;
	-o-perspective      : 1000px;
	-ms-perspective     : 1000px;
	perspective         : 1000px;
	
	-webkit-perspective-origin  : 50% 50%;
	-moz-perspective-origin     : 50% 50%;
	-moz-transform-origin       : 50% 50%;
	-o-perspective-origin       : 50% 50%;
	-ms-perspective-origin      : 50% 50%;
	perspective-origin          : 50% 50%;
}
.cubeanimate {
  -webkit-animation : spinningH 21s infinite linear;
  -moz-animation    : spinningH 21s infinite linear;
  -o-animation      : spinningH 21s infinite linear;
  -ms-animation     : spinningH 21s infinite linear;
  animation         : spinningH 21s infinite linear;
}
#cuboid {
  position: relative;
  margin: 0 auto;
  height: 151px;
  width: 151px;

  -webkit-transition  : -webkit-transform 2 linear;
  -moz-transition     : -moz-transform 2s linear;
  -o-transition       : -o-transform 2s linear;
  -ms-transition      : -ms-transform 2s linear;
  transition          : transform 2s linear;

  -webkit-transform-style : preserve-3d;
  -moz-transform-style    : preserve-3d;
  -o-transform-style      : preserve-3d;
  -ms-transform-style     : preserve-3d;
  transform-style         : preserve-3d;
}
	#cuboid>div {
	  position: absolute;
	  height: 171px;
	  width: 171px;
	  padding: 86px;
	  opacity: 0.86;
	  background-position:center center;
	}
	#cuboid div:nth-child(1) {
	  -webkit-transform : translateZ(86px);
	  -moz-transform    : translateZ(86px);
	  -o-transform      : translateZ(86px);
	  -ms-transform     : translateZ(86px);
	  transform         : translateZ(86px);
	  background-color  : #2E272F;
	  background-image: url(../images/cubetech/css3.jpg);
	  background-repeat : no-repeat;
	}
	#cuboid div:nth-child(2) {
	  -webkit-transform : rotateY(180deg) translateZ(86px);
	  -moz-transform    : rotateY(180deg) translateZ(86px);
	  -o-transform      : rotateY(180deg) translateZ(86px);
	  -ms-transform     : rotateY(180deg) translateZ(86px);
	  transform         : rotateY(180deg) translateZ(86px);
	  background-color  : #2D1C12;
	  background-image: url(../images/cubetech/multimedia.jpg);
	  background-repeat : no-repeat;
	}
	#cuboid div:nth-child(3) {
	  -webkit-transform : rotateY(90deg) translateZ(86px);
	  -moz-transform    : rotateY(90deg) translateZ(86px);
	  -o-transform      : rotateY(90deg) translateZ(86px);
	  -ms-transform     : rotateY(90deg) translateZ(86px);
	  transform         : rotateY(90deg) translateZ(86px);
	  background-color  : #000;
	  background-image: url(../images/cubetech/tsmedia.jpg);
	  background-repeat : no-repeat;
	}
	#cuboid div:nth-child(4) {
	  -webkit-transform : rotateY(-90deg) translateZ(86px);
	  -moz-transform    : rotateY(-90deg) translateZ(86px);
	  -o-transform      : rotateY(-90deg) translateZ(86px);
	  -ms-transform     : rotateY(-90deg) translateZ(86px);
	  transform         : rotateY(-90deg) translateZ(86px);
	  background-color  : #693C1F;
	  background-image  : url(../images/cubetech/connectivity.jpg);
	  background-repeat : no-repeat;
	}
	#cuboid div:nth-child(5) {
	  -webkit-transform : rotateX(-90deg) translateZ(86px) rotate(180deg);
	  -moz-transform    : rotateX(-90deg) translateZ(86px) rotate(180deg);
	  -o-transform      : rotateX(-90deg) translateZ(86px) rotate(180deg);
	  -ms-transform     : rotateX(-90deg) translateZ(86px) rotate(180deg);
	  transform         : rotateX(-90deg) translateZ(86px) rotate(180deg);
	  background-color  : #955122;
	  background-image  : url(../images/cubetech/device.jpg);
	  background-repeat :no-repeat;
	}
	#cuboid div:nth-child(6)  {
	  -webkit-transform : rotateX(90deg) translateZ(86px);
	  -moz-transform    : rotateX(90deg) translateZ(86px);
	  -o-transform      : rotateX(90deg) translateZ(86px);
	  -ms-transform     : rotateX(90deg) translateZ(86px);
	  transform         : rotateX(90deg) translateZ(86px);
	  background-color  : #E34C26;
	  background-image: url(../images/cubetech/html5.png);
	  background-repeat :no-repeat;
	  text-align:center;  
	}
	
		@-moz-keyframes spinningH {
		  from {
			-moz-transform: rotateX(0deg) rotateY(0deg);
		  }
		  to{
			-moz-transform: rotateX(360deg) rotateY(360deg);
		  }
		}
		@-webkit-keyframes spinningH {
		  from {
			-webkit-transform: rotateX(0deg) rotateY(0deg);
		  }
		  to{
			-webkit-transform: rotateX(360deg) rotateY(360deg);
		  }
		}
		@-o-keyframes spinningH {
		  from {
			-o-transform: rotateX(0deg) rotateY(0deg);
		  }
		  to{
			-o-transform: rotateX(360deg) rotateY(360deg);
		  }
		}
		@-ms-keyframes spinningH {
		  from {
			-ms-transform: rotateX(0deg) rotateY(0deg);
		  }
		  to{
			-ms-transform: rotateX(360deg) rotateY(360deg);
		  }
		}
		@keyframes spinningH {
		  from {
			transform: rotateX(0deg) rotateY(0deg);
		  }
		  to{
			transform: rotateX(360deg) rotateY(360deg);
		  }
		}
/*Công nghệ sử dụng*/