/* DEFAULT CSS */
body, html {
	font-family: 'Roboto',Arial,sans-serif;
	padding: 0;	
	margin: 0;	
	font-size: 100%;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}
img {border:none}
.wrap {width:980px; margin:0 auto; padding:0 20px;}
.kolom {float:left; display:block;}
.clear {clear:both}
.clear.nav {padding-bottom:30px}
.divider {background:url(../_image/section_divider.png) no-repeat 50% 0; height:53px;}
.divTop {background:url(../_image/divider_top.png) no-repeat 50% 0; height:53px;}
.pinbb {padding:5px; border:1px solid #666}
.tengah {text-align:center}


/* Main Style */
a, a:visited {color: #333; text-decoration: none;}
a:hover, a:active {	color: #333;}
h1, h2, h3 {font-family: 'Roboto',Arial,sans-serif;}
h1 { font-size: 2.5em; font-weight: 300; }
h2 { font-size: 1.5em; font-weight: 300; }
h3 { font-size: 1.2em; font-weight: 400; }
p {font-size: 16px; font-weight: 100;}

/* NAVIGATION */
nav {
	background: rgba(250, 230, 2, 0.6);
	text-transform: uppercase;
	font-size: 0.7em;
	line-height: 2.6;
	height: 36px;
	margin-bottom: 0; 
}
nav a {
	padding: 0.41em 1em;
	letter-spacing: 0.1em;
	color: #444;
	display: inline-block;
}
nav a:hover {background: rgba(255,255,255,0.95);color: #333;}
nav span.right {float: right;}
nav span.right a {float: left;display: block;}
nav .logo {float:left;}
nav .logo a:hover {background: none;}
body nav span.right a, body nav .secNav a  {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
.right .active {background-color: #A54932;; color:white;}

.secNav {clear:right; background-color: #A54932; margin-left:280px; border-radius:5px; border:1px solid #A54932}
.secNav ul {list-style:none; margin-top:5px;}
.secNav li {display:inline-block;}
.secNav a {color:#fff; background-color:#A54932; }
ul.jar {margin-top:-13px; }
.jar li span, .refill li span {
	font-size:1.5em;
	color:rgba(250, 230, 2, 0.6);
	vertical-align: middle;
}
ul.refill {margin-top:-18px; }

/* BUTTON */
.menu {	display: block;padding: 2em 0;margin-bottom: 3em;}
.menu a {
	border: 4px solid rgba(255, 0, 0, 1);
    border-radius: 5px;
    background: rgba(255, 0, 0, 1);
    display: inline-block;
    font-size: 1em;
    line-height: 100%;
	text-transform:uppercase;
    margin: 0 5px;
    padding: 0.7em;
    text-decoration: none;
	text-shadow: 3px 2px 3px rgba(0,0,0,0.3);
    opacity: 0.7;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
	color:#F8CD9F;
}
.menu a.active, .menu a:hover {opacity: 1; color:#FFF}
a.blue {background:blue;border: 4px solid blue;}


/* FOOTER */
footer {margin: 18px auto 0; padding-bottom:30px;}
footer .right {float:right;}
footer .bottom {border-top: 1px solid #ddd;}
footer p {float:left; font-size: .8em;}
footer a {color:#08c; padding: 0 0 0 1.5em}
footer .right a {color:#F00; text-transform:uppercase;}
footer .right a:hover {color: #333;}
.copyright {float:left; padding-top:7px; width:inherit;}


/* MAIN CONTENT */
#teaser, #minyak {position:relative; float:left;}
.kolom.px{width:50%; padding-top:100px;}
.kolom.px h1{ letter-spacing: -1px;  font-weight: 100;  font-size: 40px; white-space:nowrap;}
.kolom.px p {  line-height: 160%;  font-size: 18px;  font-weight: 400; color: #888;}
.kolom.iRight {float:right; position:relative; z-index:-1}
.kolom.iRight img {margin-right: -25px;}
.center {text-align:center}
.center .wrap p {margin-top: -25px;	margin-bottom: 70px;}

/* KELEBIHAN GOLCO */
#golcoPlus {text-align:center}
#golcoPlus h1 {color:rgb(180, 108, 0)}
#golcoPlus h1 span {font-size:18px; color:#888; display:block; width:690px; margin:0 auto;}

#proses { background:url(../_image/palm/proses-penyaringan.webp) no-repeat 50% 0; min-height:527px; width:1280px; margin: 0 auto; border-top: 2px solid rgb(248, 248, 248);
border-bottom: 2px solid rgb(248, 248, 248);padding:3px 0;
;}
#proses h2 {color:#FFF; float:right; width:400px; padding: 40px 80px 0 0; font-size:2em; text-shadow:1px 1px 1px black}
#proses h2 span {font-size:18px; color:#fff; display:block; width:300px; padding-top:25px;}

#kemasan .kolom.px {padding-top:0;}
#kemasan .kolom.px p {width:440px;}	

#ukuran .kolom.krImg {width:450px; text-align:center;}
#ukuran .kolom.iText {width:455px; float:right; }
#ukuran .kolom.iText p {line-height: 160%;font-size: 18px;
font-weight: 400;color: #888; width:390px;}


/* ABOUT US */
#about {background:url(../_image/about/pabrik-golco.webp) no-repeat 50% 0; min-height:450px; margin-top: -50px; margin-bottom:50px;}
#about h1 {color:#FFF; text-shadow:1px 1px 1px black; padding-top:190px; padding-left: 50px;font-size: 5em;}
#about h1 span {display:block; font-size:18px; width:377px; padding-top:20px; color:rgb(180, 108, 0); text-shadow:none;}
.kolom.us {float:right; width: 390px; padding-right:95px; box-shadow: -1px 0 0 #ddd; min-height:475px;}

#about p {padding-left:50px;line-height: 160%;font-weight: 400;color: #888; width:377px;}
.Amap {padding:10px; background:#FFF; border:1px solid #e1e1e1;}
.quote { font-size:2em; font-weight:100; padding:20px 50px; margin:0 auto; display:block; width:100%; text-align:center;}


/* FITUR HOMEPAGE */
#fitur {font-size: 0.8571em;}
#fitur ul {list-style:none}
#fitur .kolom {
	width: 200px;
	padding: 0px 19px 0;
	border-right: solid #e5e5e5 1px;
	text-align: center;
}
#fitur .kolom h4 {
	font-size: .9em;
	line-height: 1.3888em;
	font-weight: 400;
	color: #888;
}
#fitur .kolom.first {padding-left:0px}
#fitur .kolom.last {border-right:0px;}
.roundImg {border: 1px solid #e5e5e5 ; border-radius:5px}


/* VIDEO HOMEPAGE*/
#review {margin-top:40px;}
.video { padding:15px;; border:1px solid #D3D3D3; display:inline-block; background:rgb(240, 240, 240); width:480px}
.kolom.kanan {float:right; width:390px;}
.kolom.kanan h2 {font-size:2em;}
.kolom.kanan p {line-height: 160%;font-size: 16px;font-weight: 400;color: #888; width:86%;}
.kolom.home img{padding-top:40px;}


/* PRODUCT */
#topTeaser{
	background: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	overflow: hidden;
	-webkit-box-shadow: -1px 0 0 0 #d2d2d2, -1px 0 0 0 #e6e6e6, 1px 0 0 0 #d2d2d2, 2px 0 0 0 #e6e6e6, 0 -1px 0 0 #e8e8e8, 0 2px 0 0 rgba(241, 241, 241, 0.3), 0 1px 0 0 #b1b1b1;
	-moz-box-shadow: -1px 0 0 0 #d2d2d2, -1px 0 0 0 #e6e6e6, 1px 0 0 0 #d2d2d2, 2px 0 0 0 #e6e6e6, 0 -1px 0 0 #e8e8e8, 0 2px 0 0 rgba(241, 241, 241, 0.3), 0 1px 0 0 #b1b1b1;
	box-shadow: -1px 0 0 0 #d2d2d2, -1px 0 0 0 #e6e6e6, 1px 0 0 0 #d2d2d2, 2px 0 0 0 #e6e6e6, 0 -1px 0 0 #e8e8e8, 0 2px 0 0 rgba(241, 241, 241, 0.3), 0 1px 0 0 #b1b1b1;
	-ie7-8-border: 1px solid #dedede;
	border: 1px solid #dedede \9;
	position: relative;
	margin-bottom: 25px;
}

#topTeaser .kolom.left {width:625px; padding:  0 10px; }
#topTeaser .kolom.left img {position:absolute}
.leftText {
	float: right;
	text-align: left;
	width: 300px;
	padding: 0px 25px 60px;
	z-index: 1;
	position: relative;
}
.leftText h2, .kolom.right h2 {text-align:center; color:#A54932; font-weight:400;}
.leftText p, .kolom.right p {text-align:center; font-size:.9em}
#topTeaser .kolom.left .leftText h2 a {color:#A54932;}

#topTeaser .kolom.right {width:325px; height:277px;border-left: 1px solid #dadada; overflow:hidden; padding-bottom:0;}
.kolom.right img {position:absolute; bottom:inherit;} 

#midTeaser {padding-left:60px}
#midTeaser h1 {font-size:3.2em;}
#midTeaser h1 span {font-size:18px;font-weight:100;display:block; width:510px; line-height:140%; color:#888; padding-top:7px;}
#midTeaser img {float:right; margin-top:-325px; padding-right:40px;}
#midTeaser .menu {padding:0; margin-bottom:0;}
#kemasanJurigen {padding-bottom:25px}
.jText { color: #D51313;letter-spacing: 1px;background: rgba(250, 230, 2, 0.6);display: block;padding: 8px ;
width: 170px; text-align:center; font-weight:400;}


/* PRODUCT DETAIL */
#minyak .kolom.px h1 {width:980px;margin-top: -75px;}
.spek {margin-top:40px; padding-top:30px;white-space:nowrap; border-top: solid #e5e5e5 1px;}
.spek img {display:block; float:left; padding-right:20px;border-right: solid #e5e5e5 1px;}
#minyak .kolom.iRight {padding-right: 50px;}
.halal {position:relative; z-index:10; padding-bottom:25px;}
.jerigen {float:right;}
.jerigen img {float:right; position:absolute;}
.jerigen .halal {top:0; right:25px}
.jerigen .jar {bottom:0; right:25px;}

#other ul {list-style:none}
#other .wrap h2 {
	font-size: 30px;
	text-align:center;
	font-weight:100;
	color:rgb(180, 108, 0);
	padding-bottom: 15px;
	margin-top:inherit;
}

#other h2 span {display:block; font-size:16px; font-weight:400; color:#888; width:80%; margin:0 auto; padding-top:7px; line-height:150%; color:#888;}
#other .wrap ul .kolom img {height: auto;width: 173px; display:block; overflow:hidden;border: 1px solid #e5e5e5 ; border-radius:5px; margin:0 auto;}

#other .kolom {
	width: 200px;
	padding: 0px 19px 0;
	border-right: solid #e5e5e5 1px;
	text-align: center;
}
#other .kolom h4 {
	font-size: .9em;
	line-height: 1.3888em;
	font-weight: 400;
	color: #888;
}
#other .kolom.first {padding-left:0px}
#other .wrap ul .kolom a:hover h4, #other .wrap ul .kolom a:hover img {
	color: rgb(180, 108, 0);
	border-color: rgb(180, 108, 0);
}
#other .kolom.last {border-right:0px;}
.wrap ul#jerigen .kolom img{border-color: #FFF;}


#kelebihan {position:relative;}
#kelebihan h2 {color:rgb(180, 108, 0); font-size:30px;}
#kelebihan h2 span {display:block;font-size:.52em; padding-left:81px; color:#999; width: 50%; font-weight:400;}
#kelebihan .menu {float:right; padding-right:60px; margin-top:-110px;}
#kelebihan h2:before {
	content:'';
	border-bottom: 1px solid #fe0f00;
	height: 31px;
	padding-left:50px;
	margin-right:30px;
	display:inline-block;
}

/* TANYA JAWAB */
#faq span {display: block;font-size: 1.5em; font-weight: 100; color:#F00; margin-top:19px;padding-right: 50px; width:360px; float:left}
#faq p {display:block; float:left; width:560px; line-height:200%; border-bottom: 1px solid #EBEBEB; padding-bottom: 50px;}
#faq h1 {text-align:center; color:rgb(180, 108, 0)}
#faq hr {clear:both; border:none; margin:30px;}
#faq p.last {border:none}


/* RESOURCES */
#resources {margin-top:50px}
#resources h1, #resources h2 {font-family: 'Alegreya Sans', sans-serif; color:rgb(180, 108, 0); font-weight:400; margin:0}
#resources h2 {font-size:1.7em; padding-top:45px;}
.resNav {width:250px; float:left; display:block; padding-top:50px}
.resContent .bTop {
	font-size: small;
	color:rgb(255, 176, 139);
}

.resNav ul li {
	font-size: 14px;
	font-family: 'Alegreya Sans', sans-serif;
	margin: 10px 0 10px -20px;
	letter-spacing: 1px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(250, 190, 2, 1);
	width: 150px;
	list-style: none;
}


.resContent {width:700px; line-height:1.7; display:block; float:left; border-top:1px solid rgba(250, 190, 2, 1); padding:30px 0;}
.resContent p {margin-bottom:25px}
.resContent img {margin:20px 0}
.resContent .imgLeft {margin: 5px 45px 10px 0; float:left;}

.resContent .quote {width: 600px;
border-top: 1px solid rgb(214, 214, 214);
border-bottom: 1px solid rgb(214, 214, 214);
margin: 50px 0;
padding: 25px 50px;
color:rgb(180, 108, 0);
font-family:'Alegreya Sans', sans-serif; 
font-weight:400;}
.resContent p a:visited {color: #08c;}


/* ----- PRODUCT */
/* General grid styles */
.cbp-ig-grid {
	list-style: none;
	padding: 0 0 50px 0;
	margin: 0;
}

/* Clear floats */
.cbp-ig-grid:before, 
.cbp-ig-grid:after { 
	content: " "; 
	display: table; 
}
.cbp-ig-grid:after {clear: both;}

/* grid item */
.cbp-ig-grid li {
	width: 33%;
	float: left;
	text-align: center;
	border-top: 1px solid #ddd;
}

/* we are using a combination of borders and box shadows to control the grid lines */
.cbp-ig-grid li:nth-child(-n+3){border-top: none;}

.cbp-ig-grid li:nth-child(3n-1),
.cbp-ig-grid li:nth-child(3n-2) {
	box-shadow: 1px 0 0 #ddd;
}

/* anchor style */
.cbp-ig-grid li > a {
	display: block;
	height: 100%;
	color: black;
	-webkit-transition: background 0.2s;
	-moz-transition: background 0.2s;
	transition: background 0.2s;
}

/* title element */
.cbp-ig-grid .cbp-ig-title {
	margin: 20px 0 10px 0;
	padding: 20px 0 0 0;
	font-size: 18px;
	position: relative;
	-webkit-transition: -webkit-transform 0.2s;
	-moz-transition: -moz-transform 0.2s;
	transition: transform 0.2s;
}

.cbp-ig-grid .cbp-ig-title:before {
	content: '';
	position: absolute;
	background: #ddd;
	width: 230px;
	height: 1px;
	top: 0px;
	left: 41.5%;
	margin: -10px 0 0 -80px;
	-webkit-transition: margin-top 0.2s; /* top or translate does not seem to work in Firefox */
	-moz-transition: margin-top 0.2s;
	transition: margin-top 0.2s;
}

.cbp-ig-grid .cbp-ig-category {
	text-transform: uppercase;
	display: inline-block;
	font-size: 1em;
	letter-spacing: 1px;
	color: #FFF;
	-webkit-transform: translateY(10px);
	-moz-transform: -moz-translateY(10px);
	-ms-transform: -ms-translateY(10px);
	transform: translateY(10px);
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	-webkit-transition: transform 0.3s, opacity 0.2s;
}

.cbp-ig-grid li:hover .cbp-ig-category,
.touch .cbp-ig-grid li .cbp-ig-category {
	opacity: 1;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	transform: translateY(-10px);
}

/* Hover styles */
.cbp-ig-grid li > a:hover {
	background-image: url(../_image/ekonomis/hover.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
}
.cbp-ig-grid li > a:hover .cbp-ig-title {
	color: #fff;
}

.cbp-ig-grid li > a:hover .cbp-ig-title {
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);
}

.cbp-ig-grid li > a:hover .cbp-ig-title:before {
	background: #fff;
	margin-top: 55px;
}


/* RESPONSIVE */


@media screen and (max-width: 62.75em) {
	.cbp-ig-grid li {
		width: 50%;
	}

	/* reset the grid lines */
	.cbp-ig-grid li:nth-child(-n+3){
		border-top: 1px solid #ddd;
	}

	.cbp-ig-grid li:nth-child(3n-1),
	.cbp-ig-grid li:nth-child(3n-2) {
		box-shadow: none;
	}

	.cbp-ig-grid li:nth-child(-n+2){
		border-top: none;
	}

	.cbp-ig-grid li:nth-child(2n-1) {
		box-shadow: 1px 0 0 #ddd;
	}


@media screen and (max-width: 41.6em) { 
	.cbp-ig-grid li {
		width: 100%;
	}

	.cbp-ig-grid li:nth-child(-n+2){
		border-top: 1px solid #ddd;
	}

	.cbp-ig-grid li:nth-child(2n-1) {
		box-shadow: none
	}

	.cbp-ig-grid li:first-child {
		border-top: none;
	}
}

@media screen and (max-width: 25em) { 
	.cbp-ig-grid {
		font-size: 80%;
	}

	.cbp-ig-grid .cbp-ig-category {
		margin-top: 20px;
	}
}


@media (min-width: 320px) and (max-width: 481px) {
	#teaser, #minyak {padding-top: 450px}
	img {width:100%; height:auto}
	.wrap {width:100%; padding:0;}
	.right.produk { float:left; clear:right; position:relative;  top:98px; left:15px;}
	.clear.nav {padding-bottom:51px}
	nav .logo {position:relative; top:-41px;}
	nav a {letter-spacing: inherit}
	.secNav {margin-left:0; position:relative; top:-11px; clear:both;}
		.secNav ul {clear:both; padding:5px 0 0; line-height:1}
		.secNav a {padding:5px; font-size:10px;}
	#midTeaser {padding-left:inherit}
		#midTeaser h1 {font-size: 2.5em; float:left; position:relative; padding:440px 20px 0;}
		#midTeaser h1 span {width:100%; font-size:14px;}
		#midTeaser img {margin-top:-679px; padding-right:inherit;}
		#midTeaser .menu {padding:0 0 40px 15px}
		footer {padding-right:5px;}
		footer a {padding-left:1em;}

/* PRODUK PAGE */
	.cbp-ig-grid li { width:50%;}
	.cbp-ig-grid li:nth-child(-n+2) {border-top:none}
	.cbp-ig-grid .cbp-ig-title {font-size:16px; margin:10px 0}
	.cbp-ig-grid li > a:hover .cbp-ig-title {
		-webkit-transform: translateY(-18px);
	-moz-transform: translateY(-18px);
	-ms-transform: translateY(-18px);
	transform: translateY(-18px);
	}
	.kolom.px {padding:80px 0 30px; width:100%;}
	#minyak .kolom.px h1 {width:inherit; margin-top:inherit; padding:0 6px; white-space:normal;}
		.kolom.px p {font-size:14px; padding:0 6px; width:85%;}
	.spek {padding-top:0}
		.spek img {width:25%; padding-right:10px;}
	#minyak .kolom.iRight {padding-right:inherit; position:	absolute; top:0}			
		.kolom.iRight img {width:inherit; margin-right:inherit;}
		.jerigen .halal { bottom:0; left:0; top:0; right:0; padding-top:182px;}
	#other .wrap ul .kolom img {width:100%}
	#other .kolom {width:44%; border-right:none; padding:0 10px 0 0; margin-left:-3px;}
	#kelebihan h2 { font-size:30px; padding:0 13px;}
		#kelebihan h2:before {display:none}
		#kelebihan h2 span {font-size:13px; padding:20px 0 0; width:65%;}
		#kelebihan .menu {padding-right: 0; margin-top:-116px; }
		
		
/* HOMEPAGE */	
	#fitur .kolom {width:45%; padding:0 25px 0 0; border-right:none; margin-left:-10px}
	.video {width:100%; padding:0; border:none;}
	.kolom.kanan {width:100%;}
	#faq { margin-top:75px;}
		#faq span {padding-left:10px; margin-top:0;}
		#faq p {width:90%; padding:0 10px 20px; font-size:12px; line-height:150%;}
	
/* ABOUT US  */	
		#about h1 {padding-left:15px}
		#about h1 span { width:85%; background-color:rgba(255, 255, 255, 0.92); font-size:15px; padding:11px;}
		#about p { width:100%; padding:0 10px;}
	.kolom.us {width:100%; padding:0;}
	.quote { padding:20px 41px;}
	
/* RESOURCES  */	
	.resNav {display:none}
	.resContent {width:100%; margin-top:45px;}
	#resources h1, #resources h2 {line-height:normal}
	.resContent p { padding:0 10px;}
	.resContent .quote { width:100%; padding:25px 0; line-height:normal; font-weight:normal;}
	
/* DAFTAR PRODUK */	
	#resources {margin-top:0}
	#topTeaser {margin-top:100px;}
	.leftText { width:100%; padding:0px 10px 60px}
	.leftText p, .kolom.right p {font-size:12px;}
	#topTeaser .kolom.right { width:100%;}
	#topTeaser .kolom.left {width:100%;  border-bottom:1px solid #e6e6e6;}	
		#topTeaser .kolom.left img {width:50%; top:80px;left:60%;}
	
}