@font-face {
	font-family: "Roboto-r";
	src: url("../assets/fonts/Roboto/Roboto-Regular.ttf");
}

@font-face {
	font-family: "Poppins-r";
	src: url("../assets/fonts/Poppins/Poppins-Regular.ttf");
}

@font-face {
	font-family: "Raleway-b";
	src: url("../assets/fonts/Raleway/Raleway-Bold.ttf");
}


* {
	font-family: 'Roboto-r';
}



.navbar {
	padding: 8px 1rem;
	background-color: transparent !important;
	/*background-color: white !important;*/
	z-index: 2;
	/*position: relative;*/
	transition: .3s;
	border-bottom: 1px solid #ccc;
}

.fixed-top {
	top: 40px !important;
}

.logo-sertifikasi img {
	height: 130px;
	height: 150px;
	display: block;
	/*margin: 0 28px;*/
}

/* NAVBAR DARK IN 200 SCROLLTOP */


.navbar.fixed-top.dark {
	top: 0 !important;
	padding: 1.5rem 1rem;
    box-shadow: 10px 2px 4px rgba(0, 0, 0, .1);
    /*background-color: black !important;*/
	background-color: #0000009e !important;
}

.navbar.fixed-top.dark .navbar-brand {
	color: white !important;
}

.navbar.fixed-top.dark .nav-link {
	color: white !important;
}

.navbar.dark .navbar-brand img {
	width: 40px;
}
/* NAVBAR DARK IN 200 SCROLLTOP */

.navbar-brand img {
	width: 80px;
	transform: translateY(-4px);
	transition: .3s ease;
}

.navbar-brand {
	font-family: 'Aquino', sans-serif;
	font-size: 28px;
	flex-direction: row-reverse !important;
	color: #4b539c !important;
	transition: .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

#navbarSupportedContent {
	flex-grow: 0;
}


.nav-item .nav-link {
	/*color: #0035cc !important;*/
	position: relative;
}




.nav-item .nav-link::before {
	position: absolute;
	content: "";
	width: 0px;
	height: 3px;
	background-color: #0035cc;
	background-color: #40bcfc;
	top: 34px;
	left: 50%;
	transform: translateX(50%);
	transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
	opacity: 0;
}



.nav-link:hover {
	color: #3ab54b !important;
}

.nav-link {
	color: black !important;
	padding-left: 1.5rem !important;
	font-weight: 600;
	font-size: 18px !important;
	transition: .3s;
}

.dropdown-item:focus, .dropdown-item {
	transition: .3s;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #16181b;
    color: white;
    text-decoration: none;
    background-color: #f8f9fa;
    background-color: #3c5db9;
    display: inline-block;
}

.dropdown-item:focus, .dropdown-item:hover div {
	transform: translateX(4px);
}




/* SECTION CONTAINER */

.about.section, .hero.section, .section {
	padding: 52px 0;
}

/* END SECTION CONTAINER */



/* HERO - IN INDEXHTML */

/* IMAGE BOX */
.con-item-slide {
	position: relative;
} 

.img-thumbnail {
	border: none;
	padding: 0;
}

.con-img img  {
	display: inline-block;
	transition: .3s ease-in-out;
	padding: 8px;
}

.con-img img:hover {
	box-shadow: 2px 8px 18px rgba(0,0,0,.1);
	transform: scale(1.05);
	border: 1px solid black;
}

.con-item-slide h2 {
	position: absolute;
	bottom: -10px;
	background-color: rgba(0,0,0,.5);
	padding: 8px 14px;
	color: white;
	font-size: 18px;
	left: 0;
	right: 0;

}

/* END IMAGE BOX */










/* header section */




.section .header {
	text-align: center;
	margin-bottom: 40px !important;
}

.section .header h1 {
	padding: 18px;
	text-align: center;
	/*background-color: red;*/
	position: relative;
	display: inline-block;
}

.section .header h1::before {
	margin: 0;
	position: absolute;
	content: "";
	width: 120%;
	left: -10%;
	top: 100%;
	height: 3px;
	background-color: #62afff;
}


/* ABOUT US */

.misi {
	background-color: #9dcfec;
	background-color: #e4e4e43b;
}

.misi .card:hover {
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.misi .card::before {
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(1.05) rotateZ(-6deg);
	border: 2px solid transparent;
	position: absolute;
	transition: .3s;
	opacity: .8;
}

.misi .card {
	z-index: 1;
	background: linear-gradient(45deg, white, white);
	transition: background 4s;
	position: relative;
	font-size: 14px;
	min-height: 180px;
	transition: .3s;
	margin-bottom: 14px;
}

.misi .card:hover {
	/*transform: scale(1.003);*/
	color: black !important;
}

/*.misi .card::after {
	width: 100%;
	height: 100%;
	position: absolute;
	  content: "";
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-image: linear-gradient( to bottom, #6ef2b3, #9df1dd );
	background-image: linear-gradient( to bottom, #c32ac5, #c23434 );
	  z-index: -1;
	  transition: opacity 0.5s linear;
	  opacity: 0;
}

.misi .card:hover::after {
	opacity: 1;
}*/

.misi .card:hover::before {
	/*background-color: ;*/
	transform: scale(.94) rotateZ(0);
	border-color: green;
}

.our-culture div {
	/*font-size: 14px;*/
	margin-bottom: 4px;
}

.misi .card-title {
	font-weight: bold;
}





.expr {
	text-align: center;
	background-color: #39b54a;
	background-color: #23408f;
	background: linear-gradient(45deg, #53c763, #3962ad);
	padding: 10px 18px 14px;
	color: white;
}


.expr .angka {
	display: inline-block;
	font-family: "Raleway-b";
	font-size: 1.4rem !important;
	margin-right: 8px;
	transform: translateY(-2px);
}

.expr .hrf {
	display: inline-block;
	font-size: 1.4rem !important;
	font-weight: bold;
}


.lab .card {
	position: relative;
}

.lab .card .ket {
	position: relative;
}


.lab .card .text {
	position: absolute;
	bottom: 0;
	margin: 0;
	left: 0;
	right: 0;
	color: white;
	font-size: 12px;
	padding: 8px 0;
	text-align: left;
	padding-left: 8px;
	background-color: rgba(0,0,0,.4);
}














/* PRODUCT */

.bg-box {
	width: 100%;
	height: 450px;
	/*border: 2px solid black;*/
	overflow: hidden;
	position: relative;
	/*box-shadow: 0px 4px 18px rgba(0,0,0,.4);*/
}

.bg-box:hover {
	/*border: 4px solid #ccc;*/
	/*box-shadow: 0px 4px 18px rgba(0,0,0,.4);*/
}

.bg-box:hover .bg {
	transform: scale(1.1);
}

.bg-box .bg {
	background-size: cover;
	width: 100%;
	height: 100%;
	transition: .5s;
}

.bg-box .bg.bg1 {
	background-image: url('../assets/images/Produk/DSCF2497.jpg');
	background-repeat: no-repeat;
}

.bg-box .bg.bg2 {
	background-image: url('../assets/images/Produk/DSCF2589.jpg');
	background-repeat: no-repeat;
}

.bg-box .bg.bg3 {
	background-image: url('../assets/images/Produk/DSCF2597.jpg');
	background-repeat: no-repeat;
}

.product.label .bg1 {
	background-image: url('../assets/images/Produk/DSCF2497.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	/*background-position: 0px -200px;*/
}

.product.label .bg2 {
	background-image: url('../assets/images/Produk/DSCF2589.jpg');
	background-repeat: no-repeat;
}


.product.food .bg1 {
	background-image: url('../assets/images/Produk/DSCF2821_500x600.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-size: 690px 500px;
	/*background-position: 0px -200px;*/
}

.product.food .bg2 {
	background-image: url('../assets/images/Produk/DSCF2869.jpg');
	background-repeat: no-repeat;
}



.product.food .bg3 {
	background-image: url('../assets/images/Produk/DSCF2883.jpg');
	background-repeat: no-repeat;
}

.product.food .bg4 {
	background-image: url('../assets/images/Produk/DSCF2529.jpg');
	background-repeat: no-repeat;
}

.product.food .bg5 {
	background-image: url('../assets/images/Produk/DSCF2842.jpg');
	background-repeat: no-repeat;
}

.product.construction .bg1 {
	background-image: url('../assets/images/Produk/DSCF2537.jpg');
	background-size: cover;
	background-position: bottom;
}


.product.construction .bg2 {
	background-image: url('../assets/images/Produk/DSCF3060.jpg');
	background-repeat: no-repeat;
}

.product.industrial .bg1 {
	background-image: url('../assets/images/Produk/DSCF2528.jpg');
	background-repeat: no-repeat;
}

.product.industrial .bg2 {
	background-image: url('../assets/images/Produk/DSCF3066.jpg');
	background-repeat: no-repeat;
}


.product.industrial .bg3 {
	background-image: url('../assets/images/Produk/DSCF2839.jpg');
	background-repeat: no-repeat;
}

.product.industrial .bg4 {
	background-image: url('../assets/images/Produk/DSCF2853.jpg');
	background-repeat: no-repeat;
}

.product.industrial .bg5 {
	background-image: url('../assets/images/Produk/DSCF2890.jpg');
	background-repeat: no-repeat;
}

.product.industrial .bg6 {
	background-image: url('../assets/images/Produk/DSCF2565.jpg');
	background-repeat: no-repeat;
}

.product.industrial .bg7 {
	background-image: url('../assets/images/Produk/DSCF2647.jpg');
	background-repeat: no-repeat;
}

.product.other_application .bg1 {
	background-image: url('../assets/images/Produk/DSCF2829_400x400.jpg');
	background-repeat: no-repeat;
}

.product.other_application .bg2 {
	background-image: url('../assets/images/Produk/DSCF2770.jpg');
	background-repeat: no-repeat;
}

.product.customer .bg1 {
	background-image: url('../assets/images/Produk/DSCF2935.jpg');
	background-repeat: no-repeat;
}

.product.customer .bg2 {
	background-image: url('../assets/images/Produk/DSCF2962.jpg');
	background-repeat: no-repeat;
}

.product.customer .bg3 {
	background-image: url('../assets/images/Produk/DSCF2973.jpg');
	background-repeat: no-repeat;
}

.product.customer .bg4 {
	background-image: url('../assets/images/Produk/DSCF3035.jpg');
	background-repeat: no-repeat;
}

.product.customer .bg5 {
	background-image: url('../assets/images/Produk/DSCF2983.jpg');
	background-repeat: no-repeat;
}

.product.customer .bg6 {
	background-image: url('../assets/images/Produk/DSCF3015.jpg');
	background-repeat: no-repeat;
}

.product.customer .bg7 {
	background-image: url('../assets/images/Produk/DSCF3029.jpg');
	background-repeat: no-repeat;
}

.product.customer .bg8 {
	background-image: url('../assets/images/Produk/DSCF2979.jpg');
	background-repeat: no-repeat;
}

.product.customer .bg9 {
	background-image: url('../assets/images/Produk/DSCF2907.jpg');
	background-repeat: no-repeat;
}

.product.customer .bg10 {
	background-image: url('../assets/images/Produk/DSCF2955.jpg');
	background-repeat: no-repeat;
}

.bg-box .text {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,.7);
	color: white;
	/*height: 60px;*/
	/*line-height: 60px;*/
	/*padding-left: 14px;*/
	font-family: 12px;
	word-wrap: break-word;
}


.product.food .bg-box-l.bg-box {
	/*min-height: 280px;*/
}

/*.product.label .bg-box {
	height: 300px;
}
*/




/* PRODUCT INDUSTRIAL */
.industrial .box-con {
	width: 100%;
	height: 500px;
	/*background-color: red;*/
}

.gutter-custom {
	padding: 0 7px;
}


.footer {
}

.footer p {
	padding: 12px 0;
	background-color: #264391;
	color: white;
	text-align: center;
	margin: 0;
}




@media screen and (max-width: 768px) {
	.product p {
		margin-bottom: 0px;
		line-height: 16px;
		padding: 8px;
		text-align: left !important		;
		font-size: 14px !important;
	}
}


@media screen and (min-width: 768px) {
	.misi .card {
		min-height: 310px;
		margin-bottom: 0;
	}

	.product.other_application .bg1 {
		background-image: url('../assets/images/Produk/DSCF2829.jpg');
		background-repeat: no-repeat;
	}

	.nav-item:hover .nav-link:before {
		opacity: 1;
		background-color: #385ab7 !important;
		transform: translateX(-50%);
		transform: scale(1.1);
		width: 18px;
	}

	.nav-item.active:hover .nav-link:before {
		background-color: black !important;
		transform: scale(1.1);
	}
	.nav-item.active .nav-link::before {
		background-color: #385ab7;
		width: 18px;
		left: 50%;
		transform: none;
		opacity: 1;
	} 

	.food.section .bg-box-1 {
		height: 500px;
	}

}


/* Laptop */
@media screen and (min-width: 920px) {
	
	.text-idex {
		width: 50%;
	}
	
	.product.label .bg-box-l.bg-box {
		/*min-height: 525px;*/
	}

	.product.label .bg-box {
		/*height: 250px;*/
	}


	.navbar-brand img {
		width: 130px;
		width: 110px;
 	}

 	.expr {
 		padding: 10px 18px 14px;
 		margin-top: 18px;
 		line-height: 80px;
 	}


 	.expr .angka {
 		font-size: 1.8rem;
 		margin-right: 8px;
 		transform: translateY(-2px);
 	}

 	.expr .hrf {
 		font-size: 1.8rem;
 	}
	
	.logo-sertifikasi img {
		height: 130px;
		height: 230px;
		display: block;
		/*margin: 0 28px;*/
	}
	
	.margincustom {
		margin-bottom: 130px !important;
	}


 	/* kotak experiance */
}
.contact ul, .contact .li {
	margin: 0 inherit !important;
	padding: 0;
	padding-left: 8px;
	list-style: none;
}