@import url(http://fonts.googleapis.com/css?family=Inder);

/* color palette
		dark-orange : #C9650A; 
		purple: #3F0091; 
		cream: #F2BE84;
		cream-more: #EFC9A3
		orange: rgba(201,101,10,0.5)
		blue-calm: #578;
		gold: #F26D00
		body: #E7E7E7
		bluewhite: #DDDDDD;
*/

body.produk {
  width: 100%;
  height: 3200px;
  /* background: #DDD; */
}

#global-container_products {
  position: relative;
  width: 1200px;
  height: 2730px;
  margin: 0 auto;
}

nav#nav-products {
  background-color: #c9650a;
  position: fixed;
  top: 0px;
  width: 1200px;
  height: 62px;
  z-index: 10;
  overflow: hidden;
  box-shadow: 0px -3px 25px #000;
}

.nav-ext_products {
  position: fixed;
  width: 100%;
  height: 58px;
  background: #c9650a;
  box-shadow: 0px -3px 10px #000;
  top: 0;
  z-index: 100;
}

#center {
  position: relative;
  margin: auto;
  width: 1350px;
  height: 100%;
  top: 0px;
  overflow: hidden;
}

#product-bg-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
}

#products-bg-mask {
  position: absolute;
  width: 1347px;
  height: 567px;
  background: rgba(0, 0, 0, 0.5);
  top: 0px;
  margin: auto;
}

#product-bg-wrapper {
  position: absolute;
  width: 1347px;
  height: 570px;
  top: 55px;
}

#product-bg-wrapper img {
  position: relative;
  width: 100%;
  top: -115px;
  z-index: -999;
  left: 0px;
}

/* PORTFOLIO */

#kolom-portfolio {
  position: absolute;
  width: 1200px;
  height: 1200px;
  top: 621px;
  padding-top: 13px;
}

.fa-location-arrow {
  color: #c9650a;
  padding-right: 40px;
  padding-left: 20px;
}

li:hover .fa-location-arrow {
  text-shadow: 3px 2px 10px #999;
  transform: rotate(20deg);
  -webkit-transform: rotate(10deg);
}

li.product,
li.service,
p {
  list-style-type: none;
  font-family: Inder, sans-serif;
}

p {
  text-indent: 50px;
}

/* SERVICES */
.portfolio-service {
  position: relative;
  width: 1200px;
  height: 1550px;
  /* background: #abc3ff; */
  background: #dddddd;
  box-shadow: 0px 20px 20px #555;
  top: -17px;
}

.title-service {
  position: absolute;
  top: -63px;
  left: -100px;
}

.title-service img {
  width: 750px;
}

.kolom-ext_service {
  position: absolute;
  height: 1000px;
  width: 100%;
  top: 622px;
  background: #aaa;
  z-index: -100;
}

/* PRODUCT */

.title-product {
  position: absolute;
  top: 1478px;
  left: -100px;
}

.title-product img {
  width: 850px;
}

.portfolio-product {
  position: relative;
  width: 1200px;
  height: 1000px;
  background: #f2be84;
  top: -17px;
  box-shadow: 5px 5px 10px #555;
}

.product-canvas {
  position: absolute;
  width: 1155px;
  height: 100%;
  margin-top: 25px;
  margin-left: 25px;
  font-size: 23px;
  letter-spacing: 2px;
  padding: 10px;
}

li.product {
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
}

li.service {
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
}

li.service:hover {
  /* background: #F2BE84; */
  background: #fff;
}

li.product:hover {
  background: #ddd;
}

.kolom-ext_product {
  position: absolute;
  height: 1000px;
  width: 100%;
  top: 1620px;
  background: #aa8b68;
  z-index: -100;
}

#footer-ext_products {
  position: absolute;
  width: 100%;
  height: 115px;
  background: #c9650a;
  top: 3100px;
}