@charset "utf-8";
/* CSS Thinkingpipe by Aldy */



@font-face {
         font-family: "NeoSans-Medium";
         src: url('../font/NeoSans-Medium.otf');
         }

@font-face {
         font-family: "neo_sans_light";
         src: url('../font/neo_sans_light.ttf');
         }

@font-face {
         font-family: "NeoSansStd";
         src: url('../font/NeoSansStd-Regular.otf');
         }
		 
body{

	font-family: 'Helvetica', arial, sans-serif;
	font-size: 15px;
}


.container { width:100%;
			 max-width:1680px; 
			 background:#FFF; 
			 overflow: hidden;
			 margin:auto;
			 position:relative;
			 left:0;
			 z-index:2;
			 top:0;
	
			}


.container .one	{ width:455.3px; float:left; }
.container .two 	{ width:910.6px; float:left; }
.container .three	{ width:1366px; } 


.header { width:555px; height:100px; }
.header img{
	padding: 0px;
	float:right;
}

#top-bar{

	margin:0 auto;

	padding:0;
	
	width:910px;
	
	height:10px;
	
	float:right;
	

}

	#top-bar ul { margin:-65px 0 0; padding:0; list-style:none; float:right; position:relative; right:270px; display:inline; }

	#top-bar ul li{ float:left;}
	
	#top-bar ul li a{

		padding:12px 20px 3px;

		float:left;
		
		font-size:18px;
		
		text-decoration:none;
		
		color:#00b1e2;
		
			font-weight:100;

	font-family:"NeoSansStd";
	
	display:block;
		
		
	}
	

#top-bar ul li a:hover, #top-bar ul li:hover > a, #top-bar ul li a.on{ font-weight:bold; }



.banner { width:100%; background:url(../img/banner.png); height:500px; margin: 0 auto; bottom:10px; position:relative; }

@font-face {
  font-family: 'flexslider-icon';
  src: url('../font/flexslider-icon.eot');
  src: url('../font/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../font/flexslider-icon.woff') format('woff'), url('../font/flexslider-icon.ttf') format('truetype'), url('../font/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.flex-container a:hover,
.flex-slider a:hover,
.flex-container a:focus,
.flex-slider a:focus {
  outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  
}
.flex-pauseplay span {
  text-transform: capitalize;
}
/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {
  margin: 0;
  padding: 0;
}
.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
  width: 512px;
  height:160px;
  margin:10px 0 0;

}

.flexslider .slides li p { text-align:center; font-size:14px; font-family:NeoSansStd; font-style:italic; color:#FFFFFF; position:relative; margin:20px 0 0; }
.flexslider .slides li p.welcome { text-align:center; font-size:33px; font-family:NeoSansStd; color:#FFFFFF; font-style:normal; position:relative; bottom:20px; }
.flexslider .slides li p.route { text-align:center; font-size:26px; font-family:NeoSansStd; color:#FFFFFF; font-style:normal; position:relative; bottom:15px; }
.flexslider .slides li p.pipes { text-align:center; font-size:26px; font-family:NeoSansStd; color:#FFFFFF; font-style:normal; position:relative; bottom:15px; }
.flexslider .slides li p.sign { text-align:right; font-size:14px; font-family:NeoSansStd; font-style:italic; color:#FFFFFF; margin:-10px 60px 0; }

.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides {
  display: block;
}
* html .flexslider .slides {
  height: 1%;
}
.no-js .flexslider .slides > li:first-child {
  display: block;
}
/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
  margin: 80px 580px 0px;


  position: relative;
  zoom: 1;
  width:512px;
  height:245px;
  top:80px;

  float:left;
 
}
.flexslider .slides {
  zoom: 1;
}
.flexslider .slides img {
  height: auto;
}

.carousel li {
  margin-right: 5px;
}
.flex-direction-nav {
  *height: 0;
}
.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 50px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  font-size: 20px;
  color:#FFF;

  content: '\f001';

}
.flex-direction-nav a.flex-next:before {
  content: '\f002';
}
.flex-direction-nav .flex-prev {
  left: 50px;
}
.flex-direction-nav .flex-next {
  right: 50px;
  text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}
.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;


}
.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}
.flex-pauseplay a:before {
  font-family: "flexslider-icon";
  font-size: 20px;
  display: inline-block;
  content: '\f004';
}
.flex-pauseplay a:hover {
  opacity: 1;
}
.flex-pauseplay a .flex-play:before {
  content: '\f003';
}
.flex-control-nav {
  width: 512px;
  position: absolute;
  bottom: -40px;
  text-align: center;
}
.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background:#FFF;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.flex-control-paging li a:hover {
  background: #fff;

}
.flex-control-paging li a.flex-active {
  background: #fff;

  cursor: default;
}
.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}
.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}
.flex-control-thumbs img {
  width: 512px;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.flex-control-thumbs img:hover {
  opacity: 1;
}
.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}




.bawah { width:100%; background:url(../img/footer.png); height:300px; margin: 0 auto; top:10px; position:relative; clear:both; }
.one-four { width: 190px; height:250px; margin-left:60px; position:relative; left:300px; float:left;}
.one-four img{ margin-left:auto; margin-right:auto; display:block; margin:10px auto; } 
.one-four p { font-family:"NeoSansStd"; font-size:12px; line-height:20px; text-align:center; bottom:10px;  position:relative; color:#959595; }
.one-four h6 { font-family:"NeoSansStd"; font-size:18px; font-weight:200; text-align:center; color:#29c5f6; bottom:20px; position:relative; }

.footer { width:410px; height:10px; float:right; font-size: 12px; font-weight: bold; font-family:"NeoSansStd"; color:#29c5f6; position:relative;
	 clear:both; top:10px; right:0px; }
	 
	 
/* About Us */

#fullpage { width:100%; max-width:1680px; margin:auto; height:auto; }
img{
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
	}
	
.section{
		text-align:center;
		overflow:hidden;
	}
/* Section 0
	* --------------------------------------- */
	#section0{
		padding: 0px 0;
	}
	#section0 img{
		position:relative;
		left: 40px;
		top: 0px;
	}
	
	#section0 .imgsContainer{
		display: block;
		position: absolute;
		z-index: 1;
		top: 42%;
		left: 58%;
		margin-top: -325px;
		margin-left: -747px;
		width: 1180px;
		height: 696px;
	}
	#key{ margin:auto; width:100%; height:630px; display:block; position:relative; right:100px;  }

	#key img { width:225px; height:355px; }
	
	#pipe{ margin:auto; width:100%; height:auto; display:block; position:relative; right:100px;  }
	
	#pipe img { width:865px; height:145px; }
	
	
	
.wrap1{
		width: 100%;
		height: 820px;
		background:url('../img/back1.png')no-repeat;
		margin:0 auto;
		position: relative;

	}
	
.wrap{
		width: 100%;
		height: 820px;
		background:url('../img/back.png');
		margin:0 auto;
		position: relative;
	}
	
	
	
	* --------------------------------------- */
	#section1 img{
		position:absolute;
		left: 40px;
		top: 0px;
	}

	#section1 .imgsContainer{
		display: block;
		position: absolute;
		z-index: 1;
		top: 42%;
		left: 58%;
		margin-top: -325px;
		margin-left: -747px;
		width: 1180px;
		height: 696px;
	}
	
	#poison { margin:0 auto; width:100%; height:auto; display:block; position:relative; top:230px; }

	#poison img { width:653px; height:220px;  }
	
	#iphone3 { margin:0 auto; width:100%; height:auto; display:block; position:relative; bottom:200px; }

	#iphone3 img { width:591px; height:188px; }
	
	#iphone3.active{
	
		transform: translate3d(0px, 155px, 0px);
	}
	
	#keyboard { margin:0 auto; width:100%; height:auto; display:block; position:relative; top:200px; right:15px; }

	#keyboard img { width:193px; height:90px; }
	
	#keyboard.active{
	
		transform: translate3d(0px, -240px, 0px);
	}
	
	#kopi { margin:0 auto; width:100%; height:auto; display:block; position:relative; bottom:93px; right:440px;  }

	#kopi img { width:75px; height:60px; }
	
	#kopi.active{
	
		transform: translate3d(360px, 0px, 0px);
	}
	
	#mouse { margin:0 auto; width:100%; height:auto; display:block; position:relative; bottom:115px; left:435px;   }

	#mouse img { width:64px; height:78px; }
	
	#mouse.active{
	
		transform: translate3d(-370px, 0px, 0px);
	}
	
.wrap2{
		width: 100%;
		height: 820px;
		background:url('../img/back3.png');
		margin:0 auto;
		position: relative;
	}
	
	#section2 img{
		position:absolute;
		left: 40px;
		top: 0px;
	}

	#section2 .imgsContainer{
		display: block;
		position: absolute;
		z-index: 1;
		top: 42%;
		left: 58%;
		margin-top: -325px;
		margin-left: -747px;
		width: 1180px;
		height: 696px;
	}
	
	#head { margin:0 auto; width:100%; height:auto; display:block; position:relative;     }
	#head object { width:800px; height:600px; }
	
	#open { margin:0 auto; width:100%; height:auto; display:block; position:relative; top:100px;    }
	#open img { width:478px; height:50px; }
	
.wrap3{
		width: 100%;
		height: 820px;
		background:url('../img/back4.png');
		margin:0 auto;
		position: relative;
	}
	
	#word { margin:auto; width:100%; height:201px; display:block; position:relative; right:50px; top:20px;  }

	#word img { width:1164px; height:201px; }
	
	#pensil { margin:auto; width:100%; height:250px; display:block; position:relative; top:397px; right:500px;  }

	#pensil img { width:225px; height:221px; }
	
	#spidol { margin:auto; width:100%; height:328px; display:block; position:relative; top:40px; left:590px;  }

	#spidol img { width:416px; height:328px; }
	 
	#lamp { margin:auto; width:100%; height:572px; display:block; position:relative; bottom:532px;  }

	#lamp img { width:848px; height:572px; }
	
.wrap4{
		width: 100%;
		height: 820px;
		background:url('../img/back5.png') no-repeat;
		margin:0 auto;
		position: relative;
	}
	
	#just { margin:auto; width:100%; height:516px; display:block; position:relative; top:80px; right:350px;   }

	#just img { width:528px; height:516px; }
	
	#mission { margin:auto; width:100%; height:106px; display:block; position:relative; left:350px; bottom:420px;   }

	#mission img { width:544px; height:106px; }
	
	#pipa { margin:auto; width:100%; height:820px; display:block; position:relative; bottom:622px; left:299px;   }

	#pipa img { width:1002px; height:820px; }
	 
/*Portofoio*/

.porto { width:100%; height:348px; margin:0 auto; clear:both; display:block; }
.porto img{ width:1366px; height:348px; margin: 0 auto;  display:block; position:relative; bottom:20px; }
.client {

	padding:0;


	font-family:"NeoSansStd";
	
	width:100%;
	
	margin:0 auto;
	
	margin-bottom:10px;
	
	clear:both;
	
	position:relative;
	
	bottom:20px;
    
}

.client ul { padding:0; list-style:none; margin:auto;  }

.client ul li { float:left; position:relative; left:400px;   }
.client ul li a {
		font-family:"NeoSansStd";
		padding:12px 30px 3px;
		
		color:#00b2e3;

		float:left;
		
		font-weight:100;
		
		text-decoration:none;
		
		margin:auto;
		
		display:block;
	}
	
.client ul li a:hover, .client ul li:hover > a, .client ul li a.on{ font-weight:bold; }
	
.our img { width: 75%;  height:auto; margin: 0 auto; display:block; clear:both; position:relative; bottom:40px;  }
.web { width:1366px; height:auto; margin:10px auto;  float:left; position:relative; left:160px;  }
.satu-empat { width: 310px; height:300px;  margin-right:10px; margin-left:10px; margin-bottom:20px; float:left; position:relative; left:20px;  }
.satu-empat img{ margin-left:auto; margin-right:auto; display:block; margin:20px auto; } 
.satu-empat img:hover { opacity: 0.4; filter: alpha(opacity=40); }



@media screen and (max-width: 1366px) {
	
	.container { max-width:1366px; }
	
	.header { width:455.3px; }
	
	#top-bar ul { right:150px; }
	
	.banner { width:100%; height:350px; }
	
	.bawah { width:100%; height:227px; }
	
	.flexslider { margin: 5px 400px 0px; }
	
	.flex-control-nav {  bottom: 20px; }
	
	.bawah { width:100%; height:227px; }
	
	.one-four { width: 190px; height:185px; left:140px;}
	.one-four img{ margin-left:auto; margin-right:auto; display:block; width:35%; margin:10px auto; }
	.one-four h6 { font-size:14px; }
	.one-four p { font-size:10px; }
	.footer { font-size:10px; }
	
	.porto { width:100%; height:302px; }
	.porto img{ width:1180px; height:302px; }
	
	.client { font-size:14px; }
	.client ul li a { right:103px; position:relative; }
	
	.web { width:1180px; left:80px; position:relative; float:left; bottom:20px; }
	.satu-empat { width:265px; height:270px; }
	.satu-empat img{ width:95%; }
	
	#fullpage { width:100%; max-width:1366px; margin:auto; height:auto; }
	
	.wrap1{
		width: 100%;
		height: 567px;
		background:url('../img/back1-1.png')no-repeat;
		margin:0 auto;
		position: relative;

	}
	#key{ margin:auto; width:100%; height:auto; display:block; position:relative; right:100px;  }

	#key img { width:188px; height:284px; }
	
	#pipe{ margin:auto; width:100%; height:auto; display:block; position:relative; right:100px; top:130px;  }
	
	#pipe img { width:680px; height:124px; }
	
	
	.wrap{
		width: 100%;
		height: 567px;
		background:url('../img/back-1.png');
		margin:0 auto;
		position: relative;
	}
	
	#poison { margin:0 auto; width:100%; height:auto; display:block; position:relative; top:170px; }

	#poison img { width:520px; height:155px;  }
	
	#iphone3 { margin:0 auto; width:100%; height:auto; display:block; position:relative; bottom:195px; }

	#iphone3 img { width:473px; height:151px; }
	
	#iphone3.active{
	
		transform: translate3d(0px, 155px, 0px);
	}
	
	#keyboard { margin:0 auto; width:100%; height:auto; display:block; position:relative; top:200px; right:15px; }

	#keyboard img { width:154px; height:74px; }
	
	#keyboard.active{
	
		transform: translate3d(0px, -240px, 0px);
	}
	
	#kopi { margin:0 auto; width:100%; height:auto; display:block; position:relative; bottom:93px; right:440px;  }

	#kopi img { width:65px; height:57px; }
	
	#kopi.active{
	
		transform: translate3d(360px, 0px, 0px);
	}
	
	#mouse { margin:0 auto; width:100%; height:auto; display:block; position:relative; bottom:115px; left:435px;   }

	#mouse img { width:63px; height:76px; }
	
	#mouse.active{
	
		transform: translate3d(-370px, 0px, 0px);
	}

	.wrap2{
		width: 100%;
		height: 567px;
		background:url('../img/back3-1.png');
		margin:0 auto;
		position: relative;
	}
	
	#head { margin:0 auto; width:100%; height:auto; display:block; position:relative;     }
	#head object { width:700px; height:450px; }
	
	#open { margin:0 auto; width:100%; height:auto; display:block; position:relative; top:50px; right:20px;    }
	#open img { width:388px; height:39px; }
	
	.wrap3{
		width: 100%;
		height: 567px;
		background:url('../img/back4-1.png');
		margin:0 auto;
		position: relative;
	}
	
	#word { margin:auto; width:100%; height:auto; display:block; position:relative; right:50px; top:10px;  }

	#word img { width:941px; height:169px; }
	
	#pensil { margin:auto; width:100%; height:auto; display:block; position:relative; top:207px; right:500px;  }

	#pensil img { width:182px; height:190px; }
	
	#spidol { margin:auto; width:100%; height:auto; display:block; position:relative; left:475px; top:-28px;  }

	#spidol img { width:333px; height:236px; }
	 
	#lamp { margin:auto; width:100%; height:auto; display:block; position:relative; bottom:436px;  }

	#lamp img { width:705px; height:408px; }
	
	.wrap4{
		width: 100%;
		height: 567px;
		background:url('../img/back5-1.png') no-repeat;
		margin:0 auto;
		position: relative;
	}
	
	#just { margin:auto; width:100%; height:auto; display:block; position:relative; top:80px; right:350px;   }

	#just img { width:415px; height:391px; }
	
	#mission { margin:auto; width:100%; height:auto; display:block; position:relative; left:300px; bottom:320px;   }

	#mission img { width:393px; height:82px; }
	
	#pipa { margin:auto; width:100%; height:auto; display:block; position:relative; bottom:472px; left:247px;   }

	#pipa img { width:791px; height:575px; }
	
}