/*  https://bootsnipp.com/snippets/featured/carousel-with-timer-and-caption */

@charset "utf-8";
/* CSS Document */

body, html { padding: 0; 
	         margin: 0; 
			 width: 100%;		 
} 

body { font-size: 15px; 
	   background-color: #282e9a;
	   line-height: 32px;  
	   padding: 0; 
	   /*color: #fff;*/
	   font-family: 'Poppins_Regular';
}

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

ul li { margin: 0; 
        padding: 0; 
}

@font-face {
	  font-family: 'Monstserrat_Semibold';
	  src: url('../fonts/montserrat_semibold.ttf');  
}

@font-face {
	  font-family: 'Poppins_Medium';
	  src: url('../fonts/poppins_medium.ttf');  
}

@font-face {
	  font-family: 'Poppins_Bold';
	  src: url('../fonts/poppins_bold.ttf');  
}

@font-face {
	  font-family: 'Poppins_Regular';
	  src: url('../fonts/poppins_regular.ttf');  
}

@font-face {
	  font-family: 'Poppins_ExtraLight';
	  src: url('../fonts/poppins_extralight.ttf');  
}

.content {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
textarea { resize: none; }
a { text-decoration: none; }

h1 { margin: 0; font-weight: normal; }

h1.title-yellow { color: #ffaf17; font-size: 16px; }
h1.title-blue { color: #282e96; font-family: 'Poppins_Bold'; font-size: 25px; margin-bottom: 20px; }

label.error { color: #900;
			  font-size: 11px;
			  display: block;
			  line-height: 18px;
}


/* ================================ Header ===================================== */
.company-title { font-family: 'Monstserrat_Semibold'; font-size: 20px; padding-top: 20px; padding-bottom: 20px; color: #fff; }
.col-search { display: inline-block; vertical-align: top; }
.col-search-right { border-top-left-radius: 10px; }
.col-header { display: inline-block; vertical-align: top; }
.col-header-left { width: 55%; }
.col-header-right { width: 45%; padding-top: 22px; text-align: right; }
#txtSearch { line-height: 26px; border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; width: 140px; padding-left: 7px; padding-right: 7px; }   
#btnSearch { cursor: pointer; background:url('../images/search-icon.jpg'); background-repeat: no-repeat; background-position: center; background-size: 100%; height: 28px; width: 34px; border: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

.menu { height: 55px; display: table; margin-left: auto; margin-right: auto; }
.menu li {
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    font-family: 'Poppins_Medium';
    font-size: 15px;
    line-height: 55px;
}
#header-bottom { background-color: #fff; z-index: 99; height: 55px; }


.menu-item a { color: #201f1f; display: block; text-align: center; }
.menu-item a:link { color: #201f1f; }
.menu-item a:visited { color: #201f1f; }
.menu-item { position: relative; }
.menu-item span { color: #201f1f }

.border-bottom { -ms-transform: translateX(-50%); 
				 -webkit-transform: translateX(-50%); 
				 transform: translateX(-50%); 
				 left:50%; 
				 position: absolute; 
				 width: 0%; 
				 border: 0px solid #6cc918; 
				 margin-top: -2px;
				 -webkit-transition: all 0.3s ease-in-out 0s;
	             transition: all 0.3s ease-in-out 0s;
}
.menu-item.active span { color: #383d9b; }
.menu-item.active .border-bottom { border: 1px solid #ffaf17; width: 100%; } 

.menu-mobile-dropdown {
    color: #201f1f;
    background-color: #CCC;
    font-size: 16px;
    line-height: 18px;
    width: 100%;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.2);
    display: none;
    font-family: 'Poppins_Medium';
    position: absolute;
    top: 55px;
    z-index: 9999;
}

ul.menu-mobile-dropdown li { padding-bottom: 5px; }
ul.menu-mobile-dropdown li:first-child {
    padding-top: 5px;
}
ul.menu-mobile-dropdown li a:visited { color: #201f1f; }
ul.menu-mobile-dropdown li a:link { color: #201f1f; }
ul.menu-mobile-dropdown li a { display: block }
ul.menu-mobile-dropdown li a:hover { color: #383d9b; background-color: rgb(0,0,0); /* Fallback color */
					                 background-color: rgba(255,255,255,0.3); /* Black w/ opacity */ }




/* ========================== menu mobile ============================ */
.menu-mobile { position: absolute; 
               width: 26px;
               height: 26px; 
			   /*background-color: red;*/ 
			   top: 50%;
			   -webkit-transform: translate(0, -50%);
			   -ms-transform: translate(0, -50%);
			   transform: translate(0, -50%); 
			   cursor: pointer; 
			   left: 20px; 
			   display: none; 
}
.menu-mobile-bg.open { background: url(../images/menu-mobile-open.png);
    				background-repeat: no-repeat; 
					width: 100%;
               		height: 100%; 
}
.menu-mobile-bg.close { background: url(../images/menu-mobile-close.png);
    				 background-repeat: no-repeat; 
					 width: 100%;
                     height: 100%; 
					 display: none;    
}
.menu-item2 a { display: block; line-height: 32px; font-size: 14px; }
.menu-item2-inner { padding-left: 20px; padding-right: 20px; }







/*#toggle {
  width: 28px;

    margin: 10px auto 10px;
    position: absolute;
    top: 15px;
    left: 15px;
    cursor: pointer;
    z-index: 99999;
    display: none;
}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle span:after{
  top: 9px;
}
#toggle span {
  position: relative;
  display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width: 100%;
  height: 5px;
  background-color: #888;
  transition: all 0.3s;
  backface-visibility: hidden;
  border-radius: 2px;
}*/

/* on activation */
/*#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}*/










/* ================================ Footer ===================================== */
.footer-top { overflow: hidden; margin-bottom: 30px; }
.footer-bottom { color: #babce5; 
                 font-size: 16px; /* kurangi 2 */
				 font-family: 'Poppins_ExtraLight'; 
				 text-align: center; 
				 clear: both;
}

#footer { padding-top: 60px; 
          padding-bottom: 80px; clear: both;
}

.social-media { display: table; margin: 0 auto;}
.social-media li { float: left; margin-left: 5px; margin-right: 5px; border: 1px solid #ffaf17; }
.social-media li a { display: block; cursor: pointer; }
.social-media li a img { width: 40px; }
.social-icon:hover { background-color: #ffaf17; }



/* ================================= HOME ================================= */
.home-unggul { overflow: hidden; padding-top: 70px; padding-bottom: 70px; padding-left: 10px; padding-right: 10px; color: #fff; }	
ul.unggul li { float: left; width: 30%; margin-left: 5%; margin-right: 5%;}
ul.unggul li:last-child, .unggul li:first-child  {margin-right: 0%; margin-left: 0%; }
.unggul-item { border: 1px solid #ffaf17; height: 350px; padding-left: 10px; padding-right: 10px; padding-top: 25px; padding-bottom: 20px; }
.unggul-item-logo { text-align: center; margin-bottom: 15px; }
.unggul-item-logo img { width: 55px; cursor: text; }
.unggul-item-title { font-family: font-family: 'Poppins_Medium'; font-size: 23px; text-align: center; margin-bottom: 12px; }
.unggul-item-desc { font-family: 'Poppins_Regular'; font-size: 13.5px; line-height: 22px; text-align: center; }

.home-katalog { overflow: hidden; background-color: #FFFFFF; color: #808080; text-align: center; padding-top: 50px; padding-bottom: 170px; }
.katalog-desc { font-size: 16px; margin-bottom: 35px; margin-top: 22px; }

ul.isi-katalog li { float: left; width: 32%; margin-left: 2%; margin-right: 2%; }
ul.isi-katalog li:last-child, ul.isi-katalog li:first-child  { margin-right: 0%; margin-left: 0%; }
.katalog-item-count { color: #ffaf17; font-size: 14px; }
.katalog-item-title { color: #383d9b; font-size: 18px; font-family: 'Poppins_Bold'; line-height: 19px; opacity: 0; }
.katalog-item-desc { margin-top: 15px; }
.katalog-item-img { position: relative; }


.home-slider { background-color:#FF0; }
.item {  min-height: calc(100vh - 132px); height: calc(100% - 132px); } 
.item1 {    background: url('../images/home/image_1.jpg');
			position:relative; 
			box-sizing: border-box; 
			background-repeat: no-repeat; 
			background-size: cover; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-position: center; 
			width: 100%; 
			/*height: calc(100vh - 125px);*/
			/*min-height: calc(100vh - 125px);*/
			/*height: calc(100% - 125px);*/
}
.item2 {    background: url('../images/home/image_2.jpg');
			position:relative; 
			box-sizing: border-box; 
			background-repeat: no-repeat; 
			background-size: cover; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-position: center; 
			width: 100%; 
			/*min-height: calc(100vh - 125px);*/
			/*height: calc(100% - 125px);*/
}
.item3 {    background: url('../images/home/image_3.jpg');
			position:relative; 
			box-sizing: border-box; 
			background-repeat: no-repeat; 
			background-size: cover; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-position: center; 
			width: 100%; 
			/*min-height: calc(100vh - 125px);*/
			/*height: calc(100% - 125px);*/
}
.item4 {    background: url('../images/home/image_4.jpg');
			position:relative; 
			box-sizing: border-box; 
			background-repeat: no-repeat; 
			background-size: cover; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-position: center; 
			width: 100%; 
			/*min-height: calc(100vh - 125px);*/
			/*height: calc(100% - 125px);*/
}
.item5 {    background: url('../images/home/image_5.jpg');
			position:relative; 
			box-sizing: border-box; 
			background-repeat: no-repeat; 
			background-size: cover; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-position: center; 
			width: 100%; 
			/*min-height: calc(100vh - 125px);*/
			/*height: calc(100% - 125px);*/
}

.slider-desc {  position: absolute;
			    top: 50%;
			    left: 50%;
				margin: 0;
				/*backface-visibility: hidden;*/
				-webkit-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				color: #000;
				text-align: center;
				
}



/* ==================================== timer for home ======================================= */

.transition-timer-carousel .carousel-caption {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 4%, rgba(0,0,0,0.5) 32%, rgba(0,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(4%,rgba(0,0,0,0.1)), color-stop(32%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 4%,rgba(0,0,0,0.5) 32%,rgba(0,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	width: 100%;
	left: 0px;
	right: 0px;
	bottom: 0px;
	text-align: left;
	padding-top: 5px;
	padding-left: 15%;
	padding-right: 15%;
}
.transition-timer-carousel .carousel-caption .carousel-caption-header {
	margin-top: 10px;
	font-size: 24px;
}
.transition-timer-carousel .carousel-indicators {
	bottom: 0px;
	margin-bottom: 5px;
}
.transition-timer-carousel .carousel-control {
	z-index: 11;
}
.transition-timer-carousel .transition-timer-carousel-progress-bar {
    height: 5px;
    background-color: #6cc918;
    width: 0%;
    /*margin: -5px 0px 0px 0px;*/
	margin: 0px 0px 0px 0px;
    border: none;
    z-index: 11;
    position: relative;
}
.transition-timer-carousel .transition-timer-carousel-progress-bar.animate{
    /* We make the transition time shorter to avoid the slide transitioning
    before the timer bar is "full" - change the 4.25s here to fit your
    carousel's transition time */
    -webkit-transition: width 4.25s linear;
	-moz-transition: width 4.25s linear;
	-o-transition: width 4.25s linear;
	transition: width 4.25s linear;
}

/* Arrows */
.prev1,
.next1
{
   	position: absolute;
    top: 50%;
    /*display: inline-block; */
	width: 60px; 
	height: 100px; 
	line-height: 100px; 
	margin: 0;
	backface-visibility: hidden;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
	color: white;
    overflow: hidden;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 3px;
    z-index: 4;
    opacity: 1;
	cursor: pointer;
    font-family: sans-serif;
    font-size: 11px;
    cursor: pointer;
    background-color: transparent;
    /* border: 1px solid white; */ 
}

.prev1:before,
.next1:before
{
    position: absolute;
    top: 25px;
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    border-left: 3px solid #fff;
    border-top: 3px solid #fff;
}
.prev1:before
{
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    backface-visibility: hidden;
    right: -16px;
}
.next1:before
{
	-ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    backface-visibility: hidden;
    left: -16px;
}

.prev1
{
    left: 90px;
}
[dir='rtl'] .prev1
{
    right: 90px;
    left: auto;
}
.next1
{
    right: 90px;
}
[dir='rtl'] .next1
{
    right: auto;
    left: 90px;
}








/* ============================ ABOUT US =================================== */
.aboutus-bg { background: url(../images/aboutus-bg.jpg); 
              background-repeat: no-repeat; 
              padding-top: 35%; 
			  width: 100%; 
			  background-size: cover; 
			  background-position: center; 
			  position: relative;  	
			  min-height: calc(100vh - 127px); height: calc(100% - 127px);
			  box-sizing: border-box; 		  	  
}

.aboutus-content { background-color: #fff; color: #808080; padding-top: 50px; padding-bottom: 120px; font-size: 14px;  }
.aboutus-story-col { display: inline-block; vertical-align: top; }
.aboutus-story-col-img { width: 40%; }
.aboutus-story-col-img img { width: 100%; }
.aboutus-story-col-desc { width: 60%; line-height: 24px; padding-left: 30px; box-sizing: border-box; /*padding-top: 20px;*/ }
h1.aboutus-title { line-height: 33px; color: #282e96; font-family: 'Poppins_Bold'; font-size: 20px; font-weight: normal; margin-bottom: 0; margin-top: 0; }


.aboutus-col { display: inline-block; vertical-align: top; }
.aboutus-col-visi { width: 50%; padding-right: 2%; box-sizing: border-box;  }
.aboutus-col-misi { width: 50%; }
.aboutus-line { border: 1px solid #dadada; margin-top: 45px; margin-bottom: 35px; }
ul.misi-list { list-style:disc; margin-left: 18px; list-style:outside }
ul.misi-list li { margin-bottom: 7px; }

.aboutus-content-visimisi table { color: #808080; font-size: 14px; line-height: 24px; }
.slide-text { position: absolute;
			  top: 50%;
			  left: 50%;
			  margin: 0;
			  backface-visibility: hidden;
			  -webkit-transform: translate(-50%, -50%);
			  -ms-transform: translate(-50%, -50%);
			  transform: translate(-50%, -50%); 
			  color: #fff; 
			  text-align: center; 
			  width: 80%;
}
.slide-text p { font-size: 16px; line-height: 24px; width: 40%; margin-left: auto; margin-right: auto; }

.slide-title { font-weight: normal; margin-top: 0; font-family: 'Poppins_Bold'; font-size: 35px; margin-bottom: 0;
               text-shadow: 2px 2px 4px #000000; }



/* ============================ CONTACT US =================================== */
.contactus-bg { background: url(../images/contactus-bg.jpg); 
                background-repeat: no-repeat; 
                padding-top: 35%; 
			    width: 100%; 
			    background-size: cover; 
			    background-position: center; 
				position: relative;
				min-height: calc(100vh - 127px); height: calc(100% - 127px);
			    box-sizing: border-box; 		  	  
}
.contactus-content { background-color: #fff; color: #808080; padding-top: 50px; padding-bottom: 120px; font-size: 14px;  }
.contactus-top { text-align: center; }
.contactus-desc { line-height: 24px; margin-top: 22px; width: 60%; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 55px; }

.contactus-col { display: inline-block; vertical-align: top; }
.contactus-col-form { width: 50%; }
.contactus-col-address { width: 50%; padding-left: 3%; box-sizing: border-box; } 
.row-form { margin-bottom: 20px; }
.form-field { width: 100%; padding: 10px; border: 1px solid #dbdbdb; }
.form-field::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  	color: #b6b6b6; font-size: 14px; font-family: 'Poppins_Regular';
}
.form-field:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  	color: #888888; 
}

.form-field::-moz-placeholder { /* Firefox 19+ */
  	color: #b6b6b6; font-size: 14px; font-family: 'Poppins_Regular';
}
.form-field:focus::-moz-placeholder { /* Firefox 19+ */
  	color: #888888; 
}

.form-field:-ms-input-placeholder { /* IE 10+ */
  	color: #b6b6b6; font-size: 14px; font-family: 'Poppins_Regular';
}
.form-field:focus:-ms-input-placeholder { /* IE 10+ */
  	color: #888888; 
}

.form-field:-moz-placeholder { /* Firefox 18- */
  	color: #b6b6b6; font-size: 14px; font-family: 'Poppins_Regular';
}
.form-field:focus:-moz-placeholder { /* Firefox 18- */
  	color: #888888; 
}

.form-field:hover, .form-field:focus { border: 1px solid #ffaf17; }

.form-col { display: inline-block; vertical-align: top; }
.form-col-left { width: 32%; margin-right: 2%; }
.form-col-middle { width: 32%; margin-right: 2%; }
.form-col-right { width: 32%; }


.btnOrange { background-color: #282e96; 
             border: none; 
			 padding: 8px 28px; 
			 color: #fff; 
			 font-family: 'Poppins_Regular';
			 border-radius: 3px; 
			 font-size: 12px;
			 -webkit-box-shadow: rgba(0,0,0,0.2) 0 0 8px 2px;
			 -moz-box-shadow: rgba(0,0,0,0.2) 0 0 8px 2px;
			 box-shadow: rgba(0,0,0,0.2) 0 0 0 8px 2px; 
			 cursor: pointer; 
			 float: right; 
			 font-size: 16px; margin-top: 10px;
}

.btnOrange:hover { background-color: #ffaf17; }
.btnOrange:active {
  background-color: #282e96;
  transform: translateY(2px);
}

.address-col { vertical-align: top; display: inline-block; }
.address-col-left { width: 60px; }
.address-col-right { width: calc(100% - 60px); padding-left: 4%; box-sizing: border-box; }
.address-col-left img { width: 60px; }
h2.address-title { font-size: 18px; color: #282e96; font-weight: normal; margin: 0; line-height: 18px; }
.address-desc { font-size: 14px; color: #888888; line-height: 20px; margin-top: 5px; }
.row-address { margin-bottom: 15px; }
#kode { width: 90px; }
.part-sending { text-align: center; 
                margin-top: 80px; 
				display: none; 
} 
.part-result { display: none; 
               text-align: center; 
			   font-size: 30px; 
			   font-weight: bold; 
			   margin-top: 40px;
}
.row-address-email { margin-bottom: 47px; }



/* ============================ PRODUCTS =================================== */
.products-bg { background: url(../images/products-bg1.jpg); 
                background-repeat: no-repeat; 
                padding-top: 35%; 
			    width: 100%; 
			    background-size: cover; 
			    background-position: center; 
				position: relative;
				min-height: calc(100vh - 127px); height: calc(100% - 127px);
			    box-sizing: border-box; 		  	  
}
.products-content { background-color: #fff; color: #777777; padding-top: 50px; padding-bottom: 120px; font-size: 14px; }
.products-col { display: inline-block; vertical-align: top; }
.products-col-left { width: 30%; }
.products-col-right { width: 70%; }

.products-left-box { border: 1px solid #e8e8e8; min-height: 800px; padding-top: 40px; padding-bottom: 40px; padding-left: 30px; border-radius: 8px; box-shadow: 0px 5px 5px #aaaaaa; }

.katalog-title { color: #ffaf17; font-size: 30px; font-family: 'Poppins_Bold'; margin-bottom: 30px; }
h1.products-title { color: #282e96; font-family: 'Poppins_Bold'; font-size: 22px; }
ul.subproducts-list { margin: 0; list-style-type: circle; margin-left: 20px; }
h1.subproducts-title { font-size: 17px; }
.products-row { margin-bottom: 50px; position: relative; }

.products-right-box { padding-top: 40px; margin-left: 5%; /*border: 1px solid #000*/ }
.products-right-title { color: #282e96; font-size: 18px; font-family: 'Poppins_Bold'; margin-bottom: 14px; }
.products-right-title-img { color: #282e96; font-size: 18px; font-family: 'Poppins_Bold'; margin-bottom: 14px; }

.products-right-desc { margin-bottom: 50px; }
.products-right-desc p { margin-top: 0px; line-height: 24px; font-size: 15px; margin-bottom: 18px }
.products-right-desc table{ color: #777777 }

/*.products-title-big { display: inline-block; font-family: 'Poppins_Bold'; font-size: 20px; color: #282e96; }*/
.products-subtitle-big { display: inline-block; font-size: 28px; }
.products-arrow { display: inline-block; font-size: 30px; margin-left: 15px; margin-right: 15px; font-family: 'Poppins_Regular'; }

ul.item-container { width: 100%; margin-top: 20px; overflow: hidden; }


ul.item-container li.itemk { margin-bottom: 40px; padding: 0; float: left; width: 32%; margin-right: 2%; border: 1px solid #e8e8e8; min-height: 100px;  border-radius: 8px; box-sizing: border-box; box-shadow: 0px 3px 2px #aaaaaa; }
ul.item-container li.itemk2 { margin-bottom: 40px; padding: 0; float: left; width: 32%; margin-right: 2%; border: 1px solid #e8e8e8; min-height: 100px;  border-radius: 8px; box-sizing: border-box; box-shadow: 0px 3px 2px #aaaaaa; }


ul.item-container li.itemk:nth-child(3n+0) { margin-right: 0%; }
ul.item-container li.itemk2:nth-child(3n+0) { margin-right: 0%; }


li.itemk .item-inner { padding-left: 15px; padding-right: 15px; padding-top: 15px; cursor: pointer; }
li.itemk2 .item-inner { padding-left: 15px; padding-right: 15px; padding-top: 15px; cursor: pointer; }
 
.item-title { font-family: 'Poppins_Bold'; font-size: 15px; color: #1c1a1a; text-align: center; line-height: 18px; }
.item-inner-bottom { padding-top: 5px; padding-bottom: 15px; text-align: center; }
a.item-link { color: #777777; line-height: 14px; line-height: 25px; text-decoration: underline; }
a.item-link:hover { color: #850404; font-family: 'Poppins_Bold'; }

a.products-link { color: #282e96; }
a.products-link:hover { color: #282e96; }

a.subproducts-link { color: #777777; }
a.subproducts-link:hover { color: #850404; font-family: 'Poppins_Bold'; }
a.subproducts-link.active { color: #850404; }

ul.subproducts-list li { margin-bottom: 3px; }

.line-hover { position: absolute; top: 13px; left: -31px; width: 0px; border: none; }
.line-hover.active { width: 20px; border: 2px solid #ffaf17; }
.noproduct { font-size: 18px; }


ul.isi-katalog1 { margin-top: 30px; }
ul.isi-katalog1 li { float: left; width: 35%; margin-right: 5%; margin-bottom: 40px; }
ul.isi-katalog1 li:nth-child(2n+0) { margin-right: 0%; }

.katalog1-item-img { position: relative; }
.katalog1-item-img:hover .katalog1-item-box { opacity: 1 }
.katalog1-item-box { background-color: rgb(0,0,0); 
					 background-color: rgba(0,0,0,0.7);  
					 width: 100%; position: absolute; bottom: 0; height: 40px; 
					 padding-left: 8px; padding-right: 8px; 
					 box-sizing: border-box;
					 opacity: 0;
					 transition: all 0.05s ease-in-out;
					 
}
h1.item-box-title { color: #fff; line-height: 40px; font-size: 15px; }
.item-inner-top { height: 200px; }

.logoku-container img { width: 100%; }


/*.katalog-item-count { color: #ffaf17; font-size: 14px; }
.katalog-item-title { color: #383d9b; font-size: 18px; font-family: 'Poppins_Bold'; line-height: 19px; }
.katalog-item-desc { margin-top: 15px; }*/







/* ============================ PRODUCTS POPUP =================================== */
.col-product { display: inline-block; vertical-align: top; }
.col-product-img { width: 230px; }
.col-product-desc { width: calc(100% - 230px); box-sizing: border-box; padding-left: 30px; }
.product-img-desc { padding-left: 30px; padding-right: 30px; padding-top: 20px; box-sizing: border-box; }
.product-title { font-size: 20px; color: #282e96; font-family: 'Poppins_Bold'; margin-bottom: -5px; }
.product-title-detail { font-size: 20px; color: #ffaf17; font-family: 'Poppins_Regular'; }
.product-title-line { border-bottom: 1px solid #d6d6d6; margin-top: 4px; margin-bottom: 10px; }
.spek-title { color: #777777; font-size: 15px; font-family: 'Poppins_Bold'; }
/*.col-product-img img { width: 100%; height: 200px; }*/


/* ============================= popup box ================================== */
.noscroll { overflow: hidden; position: fixed; }
.popup-close { position: absolute; top: 10px; right: 10px; }
.popup-close2 { position: absolute; top: -10px; right: -10px; }
.popup-close2 img { width: 30px; }
.popup-overlay { display: none; 
                 opacity: 0;  /* Hidden by default */
				 position: fixed; /* Stay in place */
				 z-index: 9999999; /* Sit on top */
				 top: 0; right: 0; bottom: 0; left: 0;
				 width: 100%; /* Full width */
				 height: 100%; /* Full height */
				 overflow: auto; /* Enable scroll if needed */
				 background-color: rgb(0,0,0); /* Fallback color */
				 background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
				 -webkit-transition: opacity 400ms ease-in;
				 -moz-transition: opacity 400ms ease-in;
				 transition: opacity 400ms ease-in;
}
.popup-content { position: absolute; top: 80px;
				 left: 50%; 
				 -ms-transform: translateX(-50%);
				 -webkit-transform: translateX(-50%);
				 transform: translateX(-50%); 
				 width: 50%; 
				 background-color: #fff;
}
.popup-content2 { position: absolute; top: 80px;
				 left: 50%; 
				 -ms-transform: translateX(-50%);
				 -webkit-transform: translateX(-50%);
				 transform: translateX(-50%); 
				 width: 40%; 
				 background-color: #fff;
}


.popup-inner { position: relative; /*padding-left: 30px; padding-right: 30px; padding-top: 30px;*/ padding-bottom: 30px; }
.popup-inner2 { position: relative; }
.popup-close img { width: 28px; }





/* ================================== SEARCH ====================================== */
.line-break { border-top: 2px solid #ffaf17;
			  width: 50px;
			  margin-top: 17px;
			  margin-bottom: 12px;
}
.search-title { color: #282e96; font-family: 'Poppins_Bold'; }












@media screen and (max-width : 1100px)
{
	/* Product */
	.products-content { /*background-color: purple;*/ }
	.item-inner-top { height: 160px; }
}





@media screen and (max-width : 1000px)
{
	.prev1 { left: 40px; }
	.next1 { right: 40px; }	
	.content { width: 87% }
	.contactus-content { /*background-color: #0FF;*/ }	
	
	.slide-text p { font-size: 16px;
					line-height: 24px;
					width: 50%;
					margin-left: auto;
					margin-right: auto;
	}
	
	/* Home */
	.home-katalog { /*background-color: green;*/ }
	.unggul-item-desc { font-family: 'Poppins_Regular'; font-size: 13px; line-height: 18px; text-align: center; }
	ul.unggul li { float: left;
				   width: 32%;
				   margin-left: 2%;
				   margin-right: 2%;
	}
	
	/* Product */
	.products-content { /*background-color: green;*/ }
	.products-col-left { width: 35%; }
	.products-col-right { width: 65%; }
	ul.isi-katalog1 li { width: 47%;
    					 margin-right: 5%;
    					 margin-bottom: 40px;
	}
	ul.item-container li.itemk { width: 48%; }
	ul.item-container li.itemk2 { width: 32%; }
	
	
	.popup-content2 { position: absolute; top: 80px;
					 left: 50%; 
					 -ms-transform: translateX(-50%);
					 -webkit-transform: translateX(-50%);
					 transform: translateX(-50%); 
					 width: 55%; 
					 background-color: #fff;
	}
	
}

@media screen and (max-width : 768px)
{
	.prev1 { left: 5px; }
	.next1 { right: 5px; }
	.content { width: 95% }
	/*.slide-title {
		font-size: 30px;
		text-shadow: 2px 2px 4px #000000;
	}*/
	
	/* contactus */
	.contactus-content { /*background-color: yellow;*/ }
	.contactus-desc { width: 75%; }
	.address-desc {
		font-size: 12px;
		line-height: 18px;
		margin-top: 5px;
	}
	.address-col-left { width: 35px; }
	.address-col-left img { width: 35px; }
	.address-col-right {
		width: calc(100% - 35px);
		padding-left: 4%;
		box-sizing: border-box;
	}
	.form-col-left { width: 100%; margin-bottom: 8px; }
	.form-col-middle { width: 100%; margin-bottom: 8px; }
	.form-col-right { width: 100%; margin-bottom: 0px; }
	.row-form {  margin-bottom: 8px; }
	.btnOrange {
		background-color: #282e96;
		border: none;
		padding: 5px 16px;
		color: #fff;
		font-family: 'Poppins_Regular';
		border-radius: 3px;
		font-size: 12px;
		-webkit-box-shadow: rgba(0,0,0,0.2) 0 0 8px 2px;
		-moz-box-shadow: rgba(0,0,0,0.2) 0 0 8px 2px;
		box-shadow: rgba(0,0,0,0.2) 0 0 0 8px 2px;
		cursor: pointer;
		float: right;
		font-size: 14px;
	}
	.slide-text { width: 100%; }
	
	/* AboutUs */
	.aboutus-content {  /*background-color: #FF0;*/ }
	.slide-text p { font-size: 16px;
					line-height: 24px;
					width: 70%;
					margin-left: auto;
					margin-right: auto;
	}
	
	/* Home */
	.home-katalog { /*background-color: yellow;*/ }
	.unggul-item-desc { font-family: 'Poppins_Regular'; font-size: 12px; line-height: 16px; text-align: center; }
	.unggul-item-title { font-size: 20px; line-height: 24px; }
	
	/* Product */
	.products-content { /*background-color: yellow;*/ }
	.products-col-left { width: 38%; }
	.products-col-right { width: 62%; }
	.item-title { font-size: 13px; }
	.item-inner-top { height: 130px; }
	
	.popup-content2 { position: absolute; top: 80px;
					 left: 50%; 
					 -ms-transform: translateX(-50%);
					 -webkit-transform: translateX(-50%);
					 transform: translateX(-50%); 
					 width: 70%; 
					 background-color: #fff;
	}
	
	
	
	
}


@media screen and (max-width : 560px)
{
	.home-katalog { /*background-color: black;*/ }
	.unggul-item-desc { font-family: 'Poppins_Regular'; font-size: 11px; line-height: 14px; text-align: center; }
	.unggul-item { height: 180px; }
	ul.unggul li { width: 100%; 
	               margin-left: 0%;
				   margin-right: 0%; 
	}
	
	/* Product */
	.products-content { /*background-color: black;*/ }
	
	
	.products-col-left { width: 100%; }
	.products-col-right { width: 100%; }
	.products-left-box { min-height: 600px; }
	.products-right-box { margin-left: 1%; }
	/*ul.isi-katalog1 li { width: 85%;
		                 margin-bottom: 30px; margin-right: 0;
	}
	.products-right-desc { margin-bottom: 35px; }
	h1.products-title { font-size: 18px; }
	h1.subproducts-title { font-size: 13px; }
	ul.subproducts-list li { line-height: 25px; }
	.products-left-box { padding-left: 15px; }*/
	.item-inner-top { height: 180px; }
	ul.item-container li.itemk2 { width: 48%; }
	ul.item-container li.itemk2:nth-child(3n+0) { margin-right: 2%; }
	
	/* Aboutus */
	.aboutus-content {  background-color: black; }
	
	
	/* Header */
	.menu li { font-size: 13px; }
	.company-title { font-size: 16px; }
	
	
	.popup-content2 { position: absolute; top: 80px;
					 left: 50%; 
					 -ms-transform: translateX(-50%);
					 -webkit-transform: translateX(-50%);
					 transform: translateX(-50%); 
					 width: 85%; 
					 background-color: #fff;
	}
	
	.katalog1-item-box { background-color: rgb(0,0,0); 
						 background-color: rgba(0,0,0,0.7);  
						 width: 100%; position: absolute; bottom: 0; height: 30px; 
						 padding-left: 8px; padding-right: 8px; 
						 box-sizing: border-box;
						 opacity: 0;
						 transition: all 0.05s ease-in-out;
						 
	}
	h1.item-box-title { color: #fff; line-height: 30px; font-size: 14px; }
	.katalog-desc {
		font-size: 16px;
		margin-bottom: 35px;
		margin-top: 22px;
		line-height: 25px;
	}
	.logoku-container img { width: 60%; }
	

}


@media only screen and (max-device-width: 560px) 
{
	.katalog1-item-box { opacity: 1; }
}

@media screen and (max-width : 500px)
{
	.prev1 { left: 0px; }
	.next1 { right: 0px; }	
	.content { width: 98% }
	.slide-title {
		font-size: 28px;
		text-shadow: 2px 2px 4px #000000;
	}
	
	/* contactus */
	.contactus-content { /*background-color: #633;*/ }
	.contactus-desc { width: 90%; }
	.address-desc {
		font-size: 11px;
		line-height: 14px;
		margin-top: 5px;
	}
	.form-field { padding: 7px; }
	.row-form-500 { font-size: 11px; }
	.contactus-col-address { padding-left: 2%; }
	
	.address-col-left { display: none; }
	.address-col-right { width: 100%; }
	.contactus-col-form { width: 55%; }
	.contactus-col-address { width: 45%; }
	.row-address-email { margin-bottom: 15px; }	   
	
	/* aboutus */
	.aboutus-content { /*background-color: red;*/ }
	.slide-text p { font-size: 16px;
					line-height: 24px;
					width: 85%;
					margin-left: auto;
					margin-right: auto;
	} 
	.aboutus-col-visi { width: 100%; padding-right: 15px; padding-left: 15px; box-sizing: border-box; padding-bottom: 40px; }
	.aboutus-col-misi { width: 100%; padding-right: 15px; padding-left: 15px; box-sizing: border-box; }
	.aboutus-story-col-desc { width: 100%;
							  line-height: 24px;
							  padding-left: 15px;
    						  padding-right: 15px;
							  box-sizing: border-box;
	}
	.aboutus-story-col-img { display: none; }
	
	/* Home */
	.home-katalog { /*background-color: red;*/ }
	.unggul-item-desc { font-family: 'Poppins_Regular'; font-size: 10px; line-height: 14px; text-align: center; }
	
	
	.footer-bottom { font-size: 12px; }  
	.social-media li a img { width: 35px; } 
	.home-katalog { padding-bottom: 80px; }
	.katalog-item-title { font-size: 15px;
						  line-height: 16px;
	}
	
	/* Product */
	.products-content { /*background-color: red;*/ }
	.item-inner-top { height: 150px; }
	
	/* Header */
	.menu { display: none; }
	.menu-mobile { display: block; }
	.company-title { font-size: 13px; }
	#txtSearch { width: 110px; }
	
	.popup-content2 { position: absolute; top: 80px;
				 left: 50%; 
				 -ms-transform: translateX(-50%);
				 -webkit-transform: translateX(-50%);
				 transform: translateX(-50%); 
				 width: 95%; 
				 background-color: #fff;
	}

}