@font-face {
    font-family: 'great_vibes';
    src: url('../fonts/greatvibes-regular-webfont.eot');
    src: url('../fonts/greatvibes-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/greatvibes-regular-webfont.woff2') format('woff2'),
         url('../fonts/greatvibes-regular-webfont.woff') format('woff'),
         url('../fonts/greatvibes-regular-webfont.ttf') format('truetype'),
         url('../fonts/greatvibes-regular-webfont.svg#great_vibesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sans';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* ==========================
RESET
============================= */
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* 
GreatVibes
OpenSans

merah #da281c
kuning #fdf700
wave 39x14
 */

/* ==========================
GENERAL LAYOUT
============================= */
body {
	background: #fffs;
	color: #000;
	/* font-family: 'great_vibes', sans-serif; */
	font-family: 'open_sans', sans-serif;
	font-size:14px;
	line-height:20px;
	font-weight:400;
	/* font-weight: 700;;  */
}
html, body {
	width: 100%;
	height: 100%;
}
.add_fix:after{display:block;content:"";clear:both;}
/* help 
Segoe UI
biru = 2196f3
*/

.container{
	width:1220px;
	margin: 0 auto;
	z-index:3;
	position:relative;
}
/* .section{height:100%;} */
a{color:#7f7f7f;text-decoration:none;}
a:hover{color:#da281c;}

.wrap-title{padding-top:50px;max-width:600px;text-align:center;margin:0 auto;}
	.htitlesup{font-size:16px;letter-spacing:4px;text-align:center;}
	.htitle{font-size:32px;letter-spacing:4px;text-align:center;font-weight:bold;margin:15px 0;}

.center{text-align:center;}
.mtop50{margin-top:50px;}

.btn-more{text-align:center;font-size:16px;padding:10px 30px;border:2px solid #2196f3;color:#2196f3;font-weight:bold;}
.btn-more:hover{background-color:#2196f3;color:#fff;}

.alpha0{opacity:0;}

*{box-sizing: border-box;}


	.scol-1{width:20%;float:left;}
	.scol-2{width:40%;float:left;}
	.scol-1:after, .scol-2:after{content:'';width:100%;display:block;clear:left;}
	
	.col10-1{width:20%;float:left;}
	.col10-2{width:40%;float:left;}
	.col10-3{width:60%;float:left;}
	.col10-4{width:80%;float:left;}
	
	.col12-1{width:8.33333333%;float:left;}
	.col12-2{width: 16.66666667%;float:left;}
	.col12-3{width:25%;float:left;}
	.col12-4{width:33.33333333%;float:left;}
	.col12-5{width: 41.66666667%;float:left;}
	.col12-6{width: 50%;float:left;}
	.col12-7{width: 58.33333333%;float:left;}
	.col12-8{width: 66.66666667%;float:left;}
	.col12-9{width:75%;float:left;}
	.col12-10{width: 83.33333333%;float:left;}
	.col12-11{width: 91.66666667%;float:left;}
	.col12-12{width:100%;float:left;}


h1{}	
h2{font-size:30px;line-height:40px;margin-bottom:20px;}	
h3{font-size:20px;line-height:30px;margin-bottom:20px;}	
h4{}	
h5{}	
p{margin:0 0 10px 0;font-size:15px; line-height:22px;}	
.lead{font-size:20px;font-weight:bold;}
.img-responsive{width:100%;}
.pos-absolute{position:absolute;}





hr{border-top:1px solid #df3f19;margin-top:60px;}
.round-img{border-radius: 50%;}	
.text-center{text-align: center; margin-top:61px;}
.pt100{padding-top:100px;clear:both;}
.pb100{padding-bottom:100px;clear:both;}
.pr20{padding-right:20px;clear:both;}

.c-white{color:#fff;}

.readmore{padding:40px;letter-spacing:2px;}	
.readmore a{padding:10px 20px;color:#da251c;border:1px solid #da251c;}	
.readmore a:hover{background-color: #da251c; color:#fff;}


.wave-putih{position:relative;}
	.wave-putih:before{position:absolute;top:-14px;left:0;content:'';display:block;background:url('images/wave.png') 0 -28px repeat-x;height:14px;width:100%;}
	
.wave-putih-dalam-1{position:relative;}
	.wave-putih-dalam-1:before{position:absolute;top:0;left:0;content:'';display:block;background:url('images/wave.png') 0 -42px repeat-x;height:14px;width:100%;z-index:2;}	
	
.wave-putih-dalam-2{position:relative;}
	.wave-putih-dalam-2:before{position:absolute;top:0px;left:0;content:'';display:block;background:url('images/wave.png') 0 -42px repeat-x;height:14px;width:100%;}
	.wave-putih-dalam-2:after{position:absolute;bottom:0px;left:0;content:'';display:block;background:url('images/wave.png') 0 -28px repeat-x;height:14px;width:100%;}

/* ---------------
HEADER 
------------------*/
.header{position:absolute;height:90px;background-color:rgba(255, 255, 255, 1);z-index:99;width:100%;-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;z-index:300;}
	/* .header:before{content:'';display:block;width:100%;height:2px;background-color:#28367b;} */
.header.stiky{position:fixed;
		-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
		box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
	}
	.logo{float:left;z-index:100;position: relative;margin-top:7px;}
	.logo img{height:75px;}
	.slick-dots {bottom:170px;}
	.slick-dots li {margin:0;}
	.slick-dots li button::before {font-size:10px;color:#fff;opacity:1;}
	
	.bmenu{display:none;position:absolute;right:38px;top:0px;width:77px;height:70px;background-color:#28367b;color:#fff;text-align:center;padding-top:10px;z-index: 102;}
	.bmenu p{font-size:11px;letter-spacing:2px;padding-top:5px;}
	.bg-overlay{position:fixed;width:100%;height:100%;top:0px;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.8);display:block;z-index: 100;display:none;}
	
	.navbar-wrap{float:left;
	width:90%;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;}
		.navbar-wrap.active{right:0px;}
		.ncon{position:relative;padding:50px 50px;}
	
	.bg-overlay{}
	.navbar-main{float:left;padding: 0 60px 0 0;}
	.navbar-main>li{list-style:none;float:left;}
	.navbar-main>li .caret{content:'';display: block; width:10px;height:10px;background:#da281c;margin:0 auto; margin-top: 15px; display:none;
		 -webkit-transform: rotate(45deg);
		  -ms-transform: rotate(45deg);
		  transform: rotate(45deg);
	}
	.navbar-main>li:before{content: '\2022'; font-size:16px;color: #7f7f7f; display:inline-block; }
	.navbar-main>li:first-child:before{content: ''; }
	.navbar-main>li>a{color:#7f7f7f;padding:20px 20px 20px 20px;font-size:25px;line-height:50px;height:90px;display: inline-block;}
	.navbar-main>li>a:hover{color:#da281c;}
	.navbar-main>li.active>a{color:#da281c;}
	
		.navbar-main ul.l2{display:none; background-color:#da281c;width:100%;padding:0 10%;position:absolute;left:0;text-align:left;-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
		box-shadow: 0 5px 5px rgba(0, 0, 0, .1);}
		.navbar-main ul.l2>li{display:inline-block;}
		.navbar-main ul.l2>li>a{color:#fff;padding:15px 20px;background-color:#da281c;display:inline-block;}
		.navbar-main ul.l2>li>a:hover{color:#fdf700;}
		
	.navbar-main>li:hover ul.l2{display:block;}
	.navbar-main>li:hover .caret{display:block;}
	
	.navbar{float:right;border-right:1px solid #e5e5e5;height:90px;padding-top: 22px; padding-right: 20px;}
	.navbar ul{width:600px;clear:both;margin-left:-400px;position:relative;z-index:13;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;}
	.navbar ul.klik{margin-left:0px;}
	.navbar li{list-style:none;float:left;font-size:12px;}
	.navbar li a{color:#7f7f7f;text-decoration:none;padding:10px 10px;display:inline-block;}
	.navbar li a:hover, .navbar li.active{color:#da281c;}
	.navbar li.active a{color:#da281c;}
	.navbar li .fa{font-size:24px;}
	
	.sosmed{float:right;padding-top: 32px; padding-left: 20px;}
	.sosmed li{display:inline-block;font-size:25px;color:#7f7f7f;margin:0 5px;}
	.sosmed li a{font-size:25px;color:#7f7f7f;}
	.sosmed li a:hover{color:#da281c;}
	
	
	.box-search{position: relative;width: 50px;}
	.container-2{
		width: auto;
		vertical-align: middle;
		white-space: nowrap;
		position: absolute;
		top: -3px;
		right: 0;
	}
	
	.container-2 input#search{
		width: 50px;
		height: 50px;
		
		border: none;
		font-size: 10pt;
		float: right;
		color: #262626;
		padding-left: 50px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color: #000;

		-webkit-transition: width .3s ease;
		-moz-transition: width .3s ease;
		-ms-transition: width .3s ease;
		-o-transition: width .3s ease;
		transition: width .3s ease;
	}
	
	.container-2 input#search::-webkit-input-placeholder {
	   color: #ccc;
	}
	 
	.container-2 input#search:-moz-placeholder { /* Firefox 18- */
	   color: #ccc;  
	}
	 
	.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
	   color: #ccc;  
	}
	 
	.container-2 input#search:-ms-input-placeholder {  
	   color: #ccc;  
	}
	
	.container-2 .icon{
		position: absolute;
		top: 0;
		left: 10px;
		
		margin-top: 10px;
		z-index: 1;
		color: #4f5b66;
	}
	
	.container-2 input#search:focus, .container-2 input#search:active{
		outline:none;
		width: 600px;
		background: #f3f3f3;
	}
	 
	.container-2:hover input#search{
		width: 600px;
		background: #f3f3f3;
	}
	 
	.container-2:hover .icon{
		color: #da281c;
	}
	
	
	
	
	
	
	
	/* // */
	.toggle {
	  width: 30px;
	  height: 20px;
	  display: inline-block;
	  margin: 0px;
	  position: relative;
	}
	.toggle .checker {
	  width: 40px;
	  height: 40px;
	  cursor: pointer;
	  position: absolute;
	  top: -3px;
	  left: -4px;
	  z-index: 1;
	  opacity: 0;
	}
	.toggle .checker.option-1:checked + span:after, .toggle .checker.option-1:checked + span:before {
	  width: 20px;
	}
	.toggle .checker.option-1:checked + span:before {
	  -webkit-transform: rotate(45deg) translate(-5px, 2px);
	  -ms-transform: rotate(45deg) translate(-5px, 2px);
	  transform: rotate(45deg) translate(-5px, 2px);
	}
	.toggle .checker.option-1:checked + span:after {
	  -webkit-transform: rotate(-45deg) translate(-5px, -2px);
	  -ms-transform: rotate(-45deg) translate(-5px, -2px);
	  transform: rotate(-45deg) translate(-5px, -2px);
	}
	.toggle .checker.option-2:checked + span {
	  -webkit-transform: rotate(-90deg);
	  -ms-transform: rotate(-90deg);
	  transform: rotate(-90deg);
	  background-color: transparent;
	}
	.toggle .checker.option-2:checked + span:after, .toggle .checker.option-2:checked + span:before {
	  top: 0;
	}
	.toggle .checker.option-2:checked + span:before {
	  -webkit-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  transform: rotate(45deg);
	}
	.toggle .checker.option-2:checked + span:after {
	  -webkit-transform: rotate(-45deg);
	  -ms-transform: rotate(-45deg);
	  transform: rotate(-45deg);
	}
	.toggle span {
	  width: 100%;
	  height: 2px;
	  background: #fff;
	  position: absolute;
	  top: 10px;
	  left: 0;
	  -webkit-transition: all .3s ease-in-out;
	  -ms-transition: all .3s ease-in-out;
	  transition: all .3s ease-in-out;
	}
	.toggle span:after, .toggle span:before {
	  content: "";
	  position: absolute;
	  width: 30px;
	  height: 2px;
	  background: #fff;
	  left: 0;
	  -webkit-transition: all .3s ease-in-out;
	  transition: all .3s ease-in-out;
	}
	.toggle span:before {
	  top: 8px;
	}
	.toggle span:after {
	  top: -8px;
	}
	.toggle:hover .checker + span:before {
	  top: 10px;
	}
	.toggle:hover .checker + span:after {
	  top: -10px;
	}
	.toggle:hover .checker:checked.option-1 + span:before {
	  top: 8px;
	}
	.toggle:hover .checker:checked.option-1 + span:after {
	  top: -8px;
	}
	.toggle:hover .checker:checked.option-2 + span:before {
	  top: 0;
	}
	.toggle:hover .checker:checked.option-2 + span:after {
	  top: 0;
	}
	/* // */
	
	
	
	
	
	
	.overlay-navbar{background-color:rgba(0,0,0,.3);width:100%;height:100%;display:block;position:fixed;top:0;left:0;z-index:10;display:none;}
	
	.h-kanan{position:absolute;right:40px;top:30px;letter-spacing: 4px;}
		.h-kanan .fa{margin-left: 10px;}
		
		
/* ---------------
HOMEPAGE 
------------------*/		
.banner{width:100%;/* height:100%; */background-color:#ccc;overflow:hidden; position:relative;}
	.scroll-down{position:absolute;font-size:10px;letter-spacing: 4px;color:#fff;bottom:70px;left:0;text-align:center;width:100%;z-index:99;	}
	.scroll-down p{margin:0;	}
	.scroll-down .fa{font-size:60px;line-height:20px;
	-webkit-animation: scrollanim .5s infinite;
	-moz-animation:    scrollanim .5s infinite;
	-o-animation:      scrollanim .5s infinite;
	animation:         scrollanim .5s infinite;}
	
	@-webkit-keyframes scrollanim {
		from { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
		50% { -moz-transform: translateY(5px); -webkit-transform: translateY(5px); -o-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); }
		to   { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
	}
	@-moz-keyframes scrollanim {
		from { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
		50% { -moz-transform: translateY(5px); -webkit-transform: translateY(5px); -o-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); }
		to   { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
	}
	@-o-keyframes scrollanim {
		from { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
		50% { -moz-transform: translateY(5px); -webkit-transform: translateY(5px); -o-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); }
		to   { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
	}
	@keyframes scrollanim {
		from { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
		50% { -moz-transform: translateY(5px); -webkit-transform: translateY(5px); -o-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); }
		to   { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
	}
	
	
.rotator{height: 100%;background:#fff;}
.rotator .item{height: 100%;display:block;position:relative;}

	.slick-prev, .slick-next {
		height: 90px;
		width: 30px;
	}
	
	.rotator .wrapk{width:100%;position:absolute;top:0;left:0;}
	.rotator .wrapk .text{width:50%;position:relative;margin:0 auto;text-align:center;z-index:99;padding-top:140px;}
	.rotator .wrapk .text p{background-color: rgba(255, 255, 255, .7);padding:20px 40px;font-size:15px;}
	.rotator .wrapk img{ display: inline-block; width:auto;}
	.rotator .imgbg{width:100%;height:100%; z-index:1;display:block;}
	.rotator .imgbg img{opacity:0;}
	

.rotator .slick-center .item{}
.rotator .item{opacity:1;transition:all 300ms ease;}

.slick-prev {
    left: 25px;z-index:100;
}
.slick-next {
    right: 25px;z-index:100;
}
.slick-prev:before {
    content: '\f104';
	font-family: FontAwesome;
	font-size:90px;
	text-shadow: 0 2px 2px #333333;
}
.slick-next:before {
    content: '\f105';
	font-family: FontAwesome;
	font-size:90px;
	text-shadow: 0 2px 2px #333333;
}
.slick-slider {
    margin-bottom: 0px;
}
.slick-slide img {
    display: block;
}


/* ---------------
SHORTCUT 
------------------*/
.shortcut{background-color:#da281c;padding:100px 0;position:relative;}
	.shortcut:before{position:absolute;top:-14px;left:0;content:'';display:block;background:url('images/wave.png') 0 0 repeat-x;height:14px;width:100%;}
	.shortcut:after{position:absolute;bottom:0px;left:0;content:'';display:block;background:url('images/wave.png') 0 -28px repeat-x;height:14px;width:100%;}
	.shortcut-item{text-align:center;}

	.shortcut-item img{-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-ms-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear; }
		.shortcut-item:hover img{transform: scale(1.1); opacity:.9 }
	
	
	
	
/* ---------------
TENTANG 
------------------*/
.tentang-content{padding: 50px 0 0 0;background:url('images/tentang-bg.jpg') top right repeat-y;position:relative;}
	



/* ---------------
PRODUK 
------------------*/
.produk{padding: 100px 0 0 0;background:url('images/bg-content-single.jpg') center center repeat;position:relative;}
	.produk:before{position:absolute;top:0px;left:0;content:'';display:block;background:url('images/wave.png') 0 -42px repeat-x;height:14px;width:100%;}
	/* .produk:after{position:absolute;bottom:0px;left:0;content:'';display:block;background:url('images/wave.png') 0 -28px repeat-x;height:14px;width:100%;} */
	
	.img-style-wrap{position:absolute;bottom:0;width:100%;height:54px;}
		.img-style{position:relative;width:100%;height:54px;background:url('images/img-style.png') center center no-repeat;}
		.img-style:before{content:'';width:40%;height:54px;background:#fff;position:absolute;left:0;}
		.img-style:after{content:'';width:40%;height:54px;background:#fff;position:absolute;right:0;}

	.produk-content{padding: 50px 0 0 0;background:#fff;position:relative;}

	.home-produk{position:relative;width:90%; margin:0 auto; text-align:center;background:url('images/home-produk-bg.jpg') center center no-repeat;}
		.home-produk .ribbon{position:absolute;bottom:50px;left:35px;}
	
	
	
/* ---------------
CALLOUT 
------------------*/
.callout{background-color:#ebebeb;padding:50px 0;position:relative;clear:both;}
	.callout:after{position:absolute;bottom:0px;left:0;content:'';display:block;background:url('images/wave.png') 0 0px repeat-x;height:14px;width:100%;}
.callout-item{padding-top:20px;text-align:center; width:100%;}
.callout-item  img{padding:0 40px;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-ms-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear; }
		.callout-item img:hover{transform: scale(1.1); opacity:.9 }
		

/* ---------------
SOCIAL 
------------------*/	
.social{clear:both;}	
	.page-title{padding:50px 0;background:#f6cba0 url('images/bg-page-title.png') center center no-repeat;text-align:center;}	
	
	
	.social-thumb{position:relative;overflow:hidden;}
		.social-thumb .ket{position:absolute;z-index:2;top:40px;text-align:center;color:#000;text-align:left;padding:20px 30px;}
		.social-thumb .ket b{font-size: 20px;letter-spacing: 4px;font-weight:bold;margin-bottom:20px;margin-bottom: 20px;display: block;}
		.social-thumb .ket a{color:#2196f3;margin-top:30px;display:block;font-weight:bold;}
		.social-thumb .ket a:hover{text-decoration:underline;}
	
	.social-thumb{position:relative;overflow:hidden;background:#333;}
		.social-thumb .icon{position:absolute;top:20px;left:20px;font-size:40px;color:#fff;z-index:2;}
		.social-thumb .pagex{position:absolute;top:20px;right:20px;color:#fff;font-weight:bold;font-size:20px;z-index:2;}
			.social-thumb .pagex span{font-weight:normal;}
		.social-thumb .title-bl{position:absolute;bottom:20px;left:20px;z-index:2;color:#fff;font-size:16px;}
		.social-thumb .title-br{position:absolute;bottom:20px;right:20px;text-align:right;color:#fff;z-index:2;}
		.social-thumb .title-bc{position:absolute;bottom:20px;left:0px;text-align:center;color:#d9271d;z-index:2;width:100%;}
		
		.social-thumb .ket{position:absolute;z-index:2;top:35%;text-align:center;color:#000;text-align:left;padding:0px 30px;width: 100%;}
		.social-thumb .ket .fa{width:100%;text-align:center;font-size:80px;color:#fff;}
		.social-thumb .ket p{width:100%;text-align:center;color:#fff;}
		
		.social-thumb .ket:hover .fa{color:#f00;}
		
		/* .bg-biru{background-color:#1a70ad;}
		.bg-orange{background-color:#f7882e;} */
		
		
		
		.social-thumb img{width:100%;display:block;-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear; }
		.social-thumb:hover img{transform: scale(1.1); opacity:.7 }
	
/* ---------------
SINGLE BANNER 
------------------*/
.banner-single{height:700px;}	
.wrap-single-banner{width: 60%; margin:0 auto;position:relative;padding-top:250px;text-align:center;z-index:100;}
	.wrap-single-banner img{}
	

.single-content{padding: 20px 0 0 0;}
.single-content2{padding: 50px 0 0 0;}
	.single-title{padding:50px 0 20px 0;text-align:center;}	
	.single-desc{padding:0;text-align:center;width:60%;margin:0 auto;}	
	
		
	.produk-list{padding:50px 0;}

		.isitab{display:none;}
		.produk-list .isitab:first-child{display:block;}
	
		.produk-list:after{clear:both;content:'';display:block;}	
		.produk-list .item{text-align:center;width:33.33333333%;float:left;padding:15px; }	
			.produk-list .item .gambar{position:relative;background:#e6e6e6;}	
				.produk-list .item .gambar img{width:100%;display:block;}	
			.produk-list .item .item-body{background-color:#da251c;}	
			.produk-list .item  a{color:#fff;padding:20px 0;display:block;font-size:20px;line-height:24px;}	
			.produk-list .item  a:hover{color:#fdf700;}	
		
			.nav-produk{width:100%;text-align:center; margin-top:80px;}
				.nav-produk a{padding:10px 40px;color:#da251c;border:1px solid #da251c;letter-spacing:3px;}
				.nav-produk a:hover{background-color: #da251c; color:#fff;}
				.nav-produk a.active{background-color: #da251c; color:#fff;}
		
		
		
		
		.brand-content{padding:50px 0;}
			.brand-content:after{clear:both;content:'';display:block;}
		
		.title-left{font-size:20px;padding-right:40px;line-height:30px;}
		
/* ---------------
SIDEBAR NAV
------------------*/
.sidebar-nav{background:#fbef2e;width:50px;padding:20px 0;position:fixed;top:150px;left:0;z-index:200;}
	.sidebar-nav ul{}
	.sidebar-nav ul li{position:relative;list-style:none;padding: 7px 20px;}
	.sidebar-nav ul li span{position:absolute; top:0;left:50px;background-color:#f34135;color:#fff;padding: 10px 30px; min-width: 200px;height:40px;display:none;}
	.sidebar-nav ul li:hover span{display:block;}
	.sidebar-nav ul li span:before{position: absolute;top: 7px;left: -9px;content: ''; width: 25px; height: 25px; display: inline-block; background-color:#f34135;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45sdeg);
	} 
	.sidebar-nav ul li .fa{color: #f34135;line-height: 27px;} 
	.sidebar-nav ul li.active .fa{color: #28367b;} 
	.sidebar-nav ul li .fa a{display:block;} 
	
	
	
	
	
	
	
	
	
/* ---------------
ASLI
------------------*/	
	.produk-detail{padding:20px 0;}	
		.produk-detail:after{clear:both;content:'';display:block;}	
		.produk-detail .item{text-align:center;padding:50px 0;width:100%;}	
			.produk-detail .item .gambar{position:relative;width:50%;float:right;}	
				.produk-detail .item .gambar img{border-radius:50%;}
				
				.produk-detail .item .item-lead{position:relative;}
				.produk-detail .item .t1{position:absolute;bottom:110px;left:160px;font-size:140px;font-family: 'great_vibes', sans-serif;color:#000;z-index:1;
					-moz-transform: rotate(-8deg);
					-webkit-transform: rotate(-8deg);
					-o-transform: rotate(-8deg);
					-ms-transform: rotate(-8deg);
					transform: rotate(-8deg);
				}		
				.produk-detail .item .t2{position:absolute;bottom:70px;left:260px;color:#fff;font-size:16px;    letter-spacing: 8px;z-index:2;}	
				.produk-detail .item .bgt{position:absolute;bottom: 0px; left: 100px;}	
			.produk-detail .item .item-body{position:relative;width:50%;float:left;padding:0 60px;}	
	
		.galeri-produk{padding:20px 0 20px 0;}
		.galeri-produk-desc{padding:100px 100px 20px 100px; }
		.galeri-produk-desc .readmore{text-align: right;margin-top:40px;letter-spacing: 2px; }
		.galeri-produk-desc a{padding: 10px 10px;color: #da251c;border: 1px solid #da251c; }
		.galeri-produk-desc a:hover{background-color: #da251c; color:#fff;}
	
	
/* ---------------
AHLI
------------------*/
.bgcon1{background:#fff url('images/bg-content.jpg') top center repeat-x;}	
.bgcon2{background:#fff url('images/bg-ahli-visi.jpg') bottom center repeat-x;}	

.tentang{padding:50px 0;position:relative;}
	
.visi{padding: 150px 0 50px 0;}	
	
.visi-title{padding: 100px 0 0 0;background:url('images/bg-content-single.jpg') center center repeat;position:relative;}
	.visi-title:before{position:absolute;top:0px;left:0;content:'';display:block;background:url('images/wave.png') 0 -42px repeat-x;height:14px;width:100%;}
	.visi-title:after{position:absolute;bottom:0px;left:0;content:'';display:block;background:url('images/wave.png') 0 -28px repeat-x;height:14px;width:100%;}
	

	.about-ahli{width:80%;margin:0 auto;text-align:center;padding-top:20px;}
	.about-ahli h3{font-size:15px;line-height:22px;}
	.title-ahli{font-family: 'great_vibes', sans-serif;font-size:100px;color:#df3f19;line-height:100px;}
	
	.wrap-visi{text-align:center;width:80%;margin:0 auto;}
	
		.visi-text{font-size: 22px; font-style: italic;}
		ol.list{list-style: decimal; font-size:16px; line-height:30px;padding: 0 30px 0 30px;}
		.value-text{font-size: 22px; font-style: italic;}
	
		.aksen-quote{width: 100%; height: 36px; display: block; background: url('images/quote-icon.png') center center no-repeat; padding-top: 86px;clear: both;position: relative;}
		.aksen-quote:before{content:''; width: 60%; height: 36px;border-top:1px solid #df3f19;display:block; margin: -46px auto 0 auto;}
		
		
		.value-list{}
		.value-item{padding-right:20px;margin-bottom:20px; font-size:22px;line-height:40px;}
		.value-item .highlight{font-size:30px;line-height:40px; font-weight: bold;}
	
/* ---------------
ALAMI
------------------*/	

	.proses-produksi-list{margin-top:60px;position:relative;text-align:center;}	
		.proses-produksi-list:before{content:'';width:35px;height:35px;background:url('images/alami-circle.png') center center no-repeat;display: inline-block; margin-bottom: -10px;}	
		.proses-produksi-list .item{position:relative;padding:80px 0;}	
		.proses-produksi-list .item:before{content:'';position:absolute;top:0;left:50%;display:block;width:2px;height:100%;background:#fbef2e;}	
		.proses-produksi-list .item:after{content:'';display:block;width:100%;clear:both;}	
		.proses-produksi-list .gambar img{border-radius:50%;border:10px solid #fbef2e;width:60%;}
		
		.proses-produksi-list .item .gambar{width:50%;text-align:center;padding:0 40px; text-align: center;}	
		.proses-produksi-list .item .item-body{position:relative;width:50%;padding:0 80px;}		
		.proses-produksi-list .item .icon{position:absolute;top:100px;width:65px;height:65px;border:3px solid #df3f19;border-radius:50%;background-color:#f8f8f8;text-align:center;}	
		.proses-produksi-list .item .icon img{margin:0 auto;}	
		
		.proses-produksi-list .item:nth-child(odd) .gambar{float:left;}	
		.proses-produksi-list .item:nth-child(odd) .item-body{float:left;text-align:left;}
		.proses-produksi-list .item:nth-child(odd) .icon{left:-33px;}	
		
		.proses-produksi-list .item:nth-child(even) .gambar{float:right;}	
		.proses-produksi-list .item:nth-child(even) .item-body{float:left;text-align:right;}	
		.proses-produksi-list .item:nth-child(even) .icon{right:-33px;}	
		
		
		
		.proses-produksi-list .item-body h3{font-family: 'great_vibes', sans-serif;font-size:48px;color:#df3f19;}	

	.bahan-alami{padding:200px 0;color:#fff;}	
		
.bahan-alami{position:relative;}
.bahan-alami:after{position:absolute;top:0;left:0;background:rgba(0,0,0,.5);width:100%;height:100%;z-index:1;content:"";}
		
/* ---------------
FAQ
------------------*/		
.faq-list{padding: 0 0 100px 0;}
	.faq-list .item{padding:10px 0 0 80px;background:url('images/faq-icon.png') top left no-repeat;}
	.faq-list .question{color:#da251c;margin-bottom:20px;font-size:18px;line-height:25px;}
	.faq-list .answer{}
	

		
/* ---------------
CONTACT
------------------*/	
.contact-content{padding: 100px 0;}
	.title-contact {font-family: 'great_vibes', sans-serif;font-size: 70px;color: #000;line-height: 70px; margin-bottom:20px; }
	.contact-content{}
	.contact-alamat{font-size:18px;line-height:28px;}

	.contact-form{}
	
	.contact-form .form-wrap{width:50%;float:left;padding-right:20px;}
	.contact-form .form-control input{width:100%;padding:10px 15px;margin-bottom:6px; background:#f3f3f3;border:1px solid #dddddd;height:46px;}
	.contact-form .form-control textarea{width:100%;padding:10px 15px;margin-bottom:6px; background:#f3f3f3;border:1px solid #dddddd;height:99px;}
	.contact-form .capcha{width:100%;padding:10px 15px;height:46px;text-align:center;}
	
	.form-control input{width:100%;padding:10px 15px;margin-bottom:6px; background:#f3f3f3;border:1px solid #dddddd;height:46px;}
	.contact-form button{padding: 10px 30px; color: #da251c; border: 1px solid #da251c; background:transparent;letter-spacing:3px;float:right;}
	.contact-form button:hover{background: #da251c; color:#fff;}
	
	.form-control ::-webkit-input-placeholder {
	   color: #000;
	}

	.form-control :-moz-placeholder { /* Firefox 18- */
	   color: #000;
	}

	.form-control ::-moz-placeholder {  /* Firefox 19+ */
	   color: #000; 
	}

	.form-control :-ms-input-placeholder {  
	   color: #000;  
	}
	
	
	.maps{width:100%;height:440px;}

/* ---------------
FOOTER
------------------*/
.footer{background-color:#da251c;color:#fff;text-align:center;padding:20px 0;clear:both;}
	.copyright{padding-top:5px;}
/* 14 april 2016 */
.foot_text {margin-top:0;}

/* ---------------
BACK TO TOP
------------------*/
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 50px;
  right: 10px;
  z-index: 999;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(255, 152, 0, 1) url(images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
  border-radius:50%;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #ff9800;
  opacity: 1;
}

	
	
	
/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow { width: 80%; min-width: 300px; max-width: 940px; margin: 0 auto; padding: 0; position: relative;
    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;

 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}


/* prev / next links */
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 0;  background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;}
.cycle-next { right: 0; background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;}
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }
	
	

.clearfix{clear:both;}
.clearfix:after{content:'';width:100%;display:block;}
.copyright p {display:inline-block;}
.menu_footer {display:inline-block;margin-right:20px;}	
.menu_footer li {display:inline-block;margin:0 7px;}
.menu_footer li a {color:#fff;display:block;}
.menu_footer li a:hover {color:#fdf700;}
	
@media (max-width: 1199px) {
	
}
@media (max-width: 768px) {
	
}
@media (max-width: 767px) {
	
}
@media (min-width: 768px) and (max-width: 991px) {
	
}

@media (min-width: 992px) and (max-width: 1199px) {
	
}
@media (min-width: 768px) {
  
}
@media (min-width: 800px) {
	
}
@media (min-width: 850px) {
	
}
@media (min-width: 950px) {
	
}

@media (min-width: 992px) {
	
}
@media (min-width: 1200px) {
  
}