/******************************
 Main
*******************************/
.index_button a{
	position:absolute;
	background-image:url(../images/index/button_bg.png);
	z-index:10;
	top:270px;
	left:805px;
	width:103px;
	height:103px;
}

.index_button a:hover{
	background-image:url(../images/index/button_bg_over.png);
}

/******************************
 About Us
*******************************/
#about .drop{
	width:17px;
	height:88px;
	background-image:url(../images/about/drop.png);
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-1215px;
	margin-left:-9px;
}

#about .circle{
	width:783px;
	height:283px;
	background-image:url(../images/about/circle.png);
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-1142px;
	margin-left:-392px;
}
#about .icon01{
	width:261px;
	height:285px;
	background-image:url(../images/about/icon01.png);
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-180px;
	margin-left:-1892px;
}
#about .icon02{
	width:261px;
	height:285px;
	background-image:url(../images/about/icon02.png);
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-1141px;
	margin-left:-131px;
}

#about .icon03{
	width:261px;
	height:285px;
	background-image:url(../images/about/icon03.png);
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-180px;
	margin-left:1631px;
}

#about .title{
	width:783px;
	height:37px;
	background-image:url(../images/about/title.png);
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-1000px;
	margin-left:-392px;
}

#about .details{
	width:830px;
	height:366px;
	background-image:url(../images/about/details.png);
	position:absolute;
	top:60%;
	left:50%;
	margin-top:-210px;
	margin-left:-415px;
	z-index:500;
}

#about .btn{
	width:830px;
	height:366px;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-1000px;
	margin-left:-415px;
	z-index:1000;
}

.balloon{
	width:289px;
	height:92px;
	background-image:url(../images/balloon.png);
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -1250px;
	margin-left:-145px;
}

/******************************
 Service
*******************************/
.s1 {
	width:881px;
	height:800px;
	background-image:url(../images/services/s1.png);
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -1620px;
	margin-left:-441px;
}

.s2 {
	width:881px;
	height:739px;
	background-image:url(../images/services/s2.png);
	position:absolute;
	top:50%;
	left:50%;
	margin-top: 2240px;
	margin-left:-441px;
}

.s3{
	width:400px;
	text-align:center;
	height:70px;
	line-height:70px;
	font-size:32px;
	color:#FFFFFF;
	font-weight:bold;
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -1170px;
	margin-left:-200px;
}

.services .icon01{
	background-image:url(../images/services/icon01.png);
	width:54px;
	height:54px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -180px;
	margin-left:-1822px;
}

.services .icon02{
	background-image:url(../images/services/icon02.png);
	width:54px;
	height:54px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -1150px;
	margin-left:-27px;
}

.services .icon03{
	background-image:url(../images/services/icon03.png);
	width:54px;
	height:54px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -180px;
	margin-left:1768px;
}

.services .cat1{
	width:140px;
	text-align:center;
	height:30px;
	line-height:30px;
	font-size:22px;
	color:#FFFFFF;
	font-weight:bold;
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -130px;
	margin-left:-1860px;
}

.services .cat2{
	width:140px;
	text-align:center;
	height:30px;
	line-height:30px;
	font-size:22px;
	color:#FFFFFF;
	font-weight:bold;
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -1100px;
	margin-left:-70px;
}

.services .cat3{
	width:140px;
	text-align:center;
	height:30px;
	line-height:30px;
	font-size:22px;
	color:#FFFFFF;
	font-weight:bold;
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -130px;
	margin-left:1730px;
}

.services .d1{
	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:22px;
	color: #ff143f;
	width:275px;
	height:130px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-10px;
	margin-left:-1913px;
}

.services .d2{
	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:22px;
	color: #FFFFFF;
	width:275px;
	height:130px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top: -1020px;
	margin-left:-138px;
}

.services .d3{
	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:22px;
	color: #2cbef7;
	width:275px;
	height:130px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-10px;
	margin-left:1637px;
}

/******************************
 Clients
*******************************/

.clients #container{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-2712px;
	margin-left:-430px;
}


.thumb2-wrapper {
	display:block;
	width:419px;
	height:419px;
}

.thumb2 img {
	width:419px;
	height:419px;
	position:absolute;
	display:block;			
}

.thumb2 .thumb2-detail {
	display:block;
	width:419px;
	height:419px;
	position:absolute;			
	background:#fff;
	font-weight:bold;
	font-size:13px;
	text-align:center;
    -moz-border-radius: 210px;
    -webkit-border-radius: 210px;
    -khtml-border-radius: 210px;
    border-radius: 210px;
    /*behavior:url(css/border-radius.htc);
    border-radius: 210px;*/
	color:#007aac;
}

.thumb2 .thumb2-detail a {
	display:block;
	width:419px;
	height:419px;
	font-weight:bold;	
	color:#333;
	text-decoration:none;		
	font-size:13px;
}		

/*
* Without CSS3
*/
.thumb2.scroll {
overflow: hidden;
}	

.thumb2.scroll .thumb2-detail {
	bottom:-419px;
}


/*
* CSS3 Flip
*/	
.thumb2.flip {
-webkit-perspective:800px;		
   -moz-perspective:800px;
	-ms-perspective:800px;		   		
	 -o-perspective:800px;
		perspective:800px;
}

.thumb2.flip .thumb2-wrapper {
	-webkit-transition: -webkit-transform 1s;
	   -moz-transition: -moz-transform 1s;
		-ms-transition: -moz-transform 1s;
		 -o-transition: -moz-transform 1s;
			transition: -moz-transform 1s;
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;			
		-ms-transform-style: preserve-3d;			
		 -o-transform-style: preserve-3d;			
			  transform-style: preserve-3d;			
}

.thumb2.flip .thumb2-detail {
	-webkit-transform: rotateY(-180deg);
	   -moz-transform: rotateY(-180deg);
		-ms-transform: rotateY(-180deg);
		 -o-transform: rotateY(-180deg);
			transform: rotateY(-180deg);			   			
}

.thumb2.flip img,
.thumb2.flip .thumb2-detail {
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		 -o-backface-visibility: hidden;
			backface-visibility: hidden;
}

.thumb2.flip .flipIt {
	-webkit-transform: rotateY(-180deg);
	   -moz-transform: rotateY(-180deg);			
		-ms-transform: rotateY(-180deg);			
		 -o-transform: rotateY(-180deg);			
			transform: rotateY(-180deg);			
}

/******************************
 portfolio
*******************************/
#portfolio{

}

#services_content{
    top:265px;
	left:50%;
	margin-left: -403px;
    width:807px;
    height:287px;
    position:absolute;
	background-image:url(../images/services/content.png);       
}

/******************************
 SLIDE 4 
*******************************/
#slide4{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-2712px;
	margin-left:-480px;
	width:980px;
	height:470px;
}

#slide4 .submenu{
	width:566px;
	height:30px;
	text-align:center;
	background-image:url(../images/portfolio/submenu_bg.png);
	margin:0 197px;	
	position:relative;
}

#slide4 .submenu a{
	font-size:18px;
	font-weight:bold;
 	font-family: 'PT Sans', sans-serif;
	color:#fff;
	width:165px;
	padding-left:12px;
	height:30px;
	line-height:30px;
	display:inline-block;
	text-decoration:none;
}

#slide4 .submenu a#tab01{
	background-image:url(../images/portfolio/icon01.png);
	background-repeat:no-repeat;
	background-position:20px 5px;
}

#slide4 .submenu a#tab02{
	background-image:url(../images/portfolio/icon02.png);
	background-repeat:no-repeat;
	background-position:20px 5px;
}

#slide4 .submenu a#tab03{
	background-image:url(../images/portfolio/icon03.png);
	background-repeat:no-repeat;
	background-position:16px 5px;
}

#slide4 .submenu a.selected, #slide4 .submenu a:hover{
	font-size:18px;
	font-weight:bold;
 	font-family: 'PT Sans', sans-serif;
	color:#006e9b;
	opacity:1;
}

.example10 {
	height:490px;
	width:980px;
	overflow:hidden;
	overflow-y-scroll:auto;
	margin:0 auto;
}


.portfolio_gallery li .new{
	position:absolute;
	z-index:100;
	margin-left:100px;
	width:40px;
	height:50px;
	background-image:url(../images/portfolio/label_new.png);
	background-repeat:no-repeat;
}

.portfolio-clogo {
	width:calc(100% - 8px);
	display:inline-block;
	position:absolute;
	left:8px;
}

.portfolio-datail {
	padding-top:145px;
	width:100%;
	display:inline-block;
}

@media screen and (min-width:768px) {

.portfolio-top {
	padding-top:75px;
}

.portfolio-clogo {
	width:125px;
}

.portfolio-datail {
	padding-top:0;
	width:calc(100% - 145px);
	padding-left:145px;
}
	
}

.portfolio-ctitle {
	font-weight:bold;
	font-size:22px;
	color:#666666;
 	font-family: 'PT Sans', sans-serif;
	border-bottom:1px solid #888888;
}

.portfolio-btn {
	float:right;
	min-width:100px;
	font-size:12px;
	font-weight:bold;
	color:#59c5f3;
	height:15px;
	text-align:right;
	margin:5px 0;
	opacity:1;
	cursor: pointer;
 	font-family: 'PT Sans', sans-serif;
	text-decoration:none;
}

.portfolio-btn img {
	vertical-align:middle;
	border:0;
	
}

.portfolio-btn:hover {
	opacity:0.8;
}

.portfolio-icon {
	width:100px;
	float:left;
}

.portfolio-icon img {
	margin-right:5px;
	margin-top:5px;
	
}

.portfolio-text {
	clear:both;
	font-size:12px;
	color:#666666;
 	font-family: 'PT Sans', sans-serif;
	line-height:20px;
}

.portfolio-text .title {
	width:65px;
	vertical-align:top;
	font-weight:bold;
 	font-family: 'PT Sans', sans-serif;
}

.portfolio-img {
	clear:both;
	margin:0 auto;
	text-align:center;
}


.portfolio-img img {
	margin-top:20px;
  	width: 100%;
  	height: auto;
}

#slideshow-webdesign,
#slideshow-multimedia,
#slideshow-programming
{
	margin:0 auto;
	width:980px;
	height:490px;
	/*background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;*/
	position:relative;
}
#slideshow-webdesign #slidesContainer-webdesign,
#slideshow-multimedia #slidesContainer-multimedia,
#slideshow-programming #slidesContainer-programming
{
  margin:0 auto;
  width:890px;
  height:490px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow-webdesign #slidesContainer-webdesign .slide-webdesign,
#slideshow-multimedia #slidesContainer-multimedia .slide-multimedia,
#slideshow-programming #slidesContainer-programming .slide-programming
{
  margin:0 auto;
  width:870px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:490ppx;
}

/** 
 * Slideshow controls style rules.
 */
.control-webdesign,
.control-multimedia,
.control-programming
{
  display:block;
  width:33px;
  height:33px;
  text-indent:-10000px;
  position:absolute;
  margin-top:230px;
  cursor: pointer;
}

#leftControl-webdesign,
#leftControl-multimedia,
#leftControl-programming
{
  top:0;
  left:0;
  background:url(../images/prev2.png) no-repeat 0 0;
  opacity:0.8;
}

#leftControl-webdesign:hover,
#leftControl-multimedia:hover,
#leftControl-programming:hover
{
  top:0;
  left:0;
  background:url(../images/prev2.png) no-repeat 0 0;
  opacity:1;
}

#rightControl-webdesign,
#rightControl-multimedia,
#rightControl-programming
{
  top:0;
  right:0;
  background:url(../images/next2.png) no-repeat 0 0;
  opacity:0.8;
}

#rightControl-webdesign:hover,
#rightControl-multimedia:hover,
#rightControl-programming:hover
{
  top:0;
  right:0;
  background:url(../images/next2.png) no-repeat 0 0;
  opacity:1;
}


/******************************
 SLIDE 5 
*******************************/
.thumb {
	display:block;
	width:150px;
	height:105px;
	position:relative;
	margin-bottom:1px;
	margin-right:1px;
	float:left;
}

.thumb-wrapper {
	display:block;
	width:150px;
	height:105px;
}

.thumb img {
	width:150px;
	height:105px;
	position:absolute;
	display:block;			
}

.thumb .thumb-detail {
	display:block;
	width:130px;
	height:85px;
	padding:10px;	
	position:absolute;			
	background:#fff;
	font-weight:bold;
	font-size:13px;
	text-align:center;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
   /* behavior:url(css/border-radius.htc);
    border-radius: 6px;*/
	color:#ff143f;
}

.thumb .thumb-detail a{
	display:block;
	width:130px;
	height:85px;
	font-weight:bold;	
	color:#ff143f;
	text-decoration:none;
	font-size:13px;
	margin-bottom:1px;
	margin-right:1px;
	background:#ffffff;

}	

.thumb .thumb-detail a:hover{
	background-position:1px 0px;
	background-image:url(../images/client/URL_bg.gif);
	background-repeat:no-repeat;
	background-color:#ff143f;
	color:#FFFFFF;
}		

/*
* Without CSS3
*/
.thumb.scroll {
overflow: hidden;
}	

.thumb.scroll .thumb-detail {
	bottom:-280px;
}


/*
* CSS3 Flip
*/	
.thumb.flip {
-webkit-perspective:800px;		
   -moz-perspective:800px;
	-ms-perspective:800px;		   		
	 -o-perspective:800px;
		perspective:800px;
}

.thumb.flip .thumb-wrapper>img,
.thumb.flip .thumb-detail {
	-webkit-transition: -webkit-transform 1s;
	   -moz-transition: -moz-transform 1s;
		-ms-transition: -ms-transform 1s;
		 -o-transition: -o-transform 1s;
			transition: transform 1s;
			
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;			
		-ms-transform-style: preserve-3d;			
		 -o-transform-style: preserve-3d;			
			transform-style: preserve-3d;			
			   			
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		 -o-backface-visibility: hidden;
			backface-visibility: hidden; 
}

.thumb.flip .thumb-wrapper>img {
	-webkit-transform: rotateY(0deg);
	   -moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		 -o-transform: rotateY(0deg);
			transform: rotateY(0deg);		
}

.thumb.flip .flipIt.thumb-wrapper>img {
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);			
		-ms-transform: rotateY(180deg);			
		 -o-transform: rotateY(180deg);			
			transform: rotateY(180deg);			
}

.thumb.flip .thumb-detail {
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		 -o-transform: rotateY(180deg);
			transform: rotateY(180deg);		
}

.thumb.flip .flipIt .thumb-detail {
	-webkit-transform: rotateY(0deg);
	   -moz-transform: rotateY(0deg);			
		-ms-transform: rotateY(0deg);			
		 -o-transform: rotateY(0deg);			
			transform: rotateY(0deg);			
}


/******************************
 SLIDE 6 
*******************************/


#contactBG1{
	background-image:url(../images/contact/bg01.png);
	background-repeat:no-repeat;
	width:374px;
	height:493px;
	left:50%;
	top:50%;
	margin-top:-1500px;
	position:absolute;
}

#contactBG2{
	background-image:url(../images/contact/bg02.png);
	background-repeat:no-repeat;
	width:599px;
	height:655px;
	top:50%;
	left:50%;
	margin-left:-535px;
	margin-top:-1730px;
	position:absolute;
}

#contactInfo{
	width:374px;
	height:293px;
	text-align:left;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	line-height:22px;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-1500px;
	margin-left:80px;
}

#contactForm{
	width:325px;
	height:235px;
	text-align:left;
	font-size:18px;
	font-weight:bold;
	position:absolute;
	top:50%;
	margin-top:-1500px;
	z-index:1000;
	left:50%;
	margin-left:-430px;
}

#contactForm .label{
	text-align:right;
	color:#FFFFFF;
	padding-right:10px;
	width:80px;
	line-height:36px;
	vertical-align:top;
}

#contactForm .field{
	background-image:url(../images/contact/field.png);
}

#contactForm .message{
	background-image:url(../images/contact/message.png);
	height:90px;
	vertical-align:top;
}

#contactForm .box01{
	width:225px;
	margin-left:5px;
	background-color:transparent;
	border:0;
	color:#FFFFFF;
}

#contactForm .box02{
	width:225px;
	margin-left:5px;
	margin-top:8px;
	height:70px;
	background-color:transparent;
	border:0;
	color:#FFFFFF;
}

#contactForm td{
	height:36px;
}

#plane{
	width:976px;
	height:356px;
	background-image:url(../images/contact/plane.png);
	position:absolute;
	top:50%;
	margin-top:1500px;
	left:50%;
	margin-left:-450px;
}

.thankyou{
	width:900px;
	height:100px;
	text-align:center;
	line-height:100px;
	font-size:100px;
	color:#FFFFFF;
	position:absolute;
	top:50%;
	margin-top:-1500px;
	left:50%;
	margin-left:-450px;
 	font-family: 'PT Sans', sans-serif;
	font-weight:bold;
}
.news{
	/*left: 13% !important;*/
    top: 18% !important;
    overflow-y: scroll;
    width: 880px;
    margin-left:-440px;
    height: 640px;
}
.news .container{
	float: left;
}
.news img{
	float: left;
	margin-bottom: 50px;
} 
.news .right{
	float: right;
	position: relative;
	width:calc(100% - 254px);
}
.news .combine{
	padding:0 50px;
}
.news .three_line{
	margin: 55px 0;
}
.news .three_line.extra{
	margin-top: 10px;
}
.news .threemore_line{
	margin: 44px 0;
}
.news .four_line{
	margin: 40px 0;
}
.news .fourmore_line{
	margin: 30px 0;
}
.news p{
	font-weight: bold;
	text-align:left;
}
.news p.year{
	font-size: 72px;
	color: #ff143f;
	font-family: Arial;
}
.news p.title{
	font-size: 22px;
	color: #3ebded;
	margin: 0 0 20px;
}
.news p.detail{
	font-size: 14px;
	color: #fff;
	margin: 10px auto;
}
.news p.detail a{
	text-decoration: underline;
}
.news p.detail a:hover{
	color: #3ebded;
}
/*::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}*/

.news .combine img{
	margin: 2px 2px 0 0;
}