:root {
	--corporate-color : rgba(11,75,61,255);
	--text-color : rgba(11,75,61,255);
	--hijau : rgb(0, 204, 68);
}

body{
	margin:0;
	padding:0;
	background-color:white;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:14px;
	color:var(--corporate-color);
  }

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
}

.flex-item {
  display: flex;                /* create nested flex container */
  justify-content: center;      /* center text horizontally */
  align-items: center;          /* center text vertically */
  background: #323232;
  padding: 5px;
  
  color: white;
  font-weight: bold;
  
}

.flex-item-translate {
  display: flex;                /* create nested flex container */
  justify-content: center;      /* center text horizontally */
  align-items: center;          /* center text vertically */
  background: #323232;
  padding: 5px;
  
  color: white;
  font-weight: bold;
  
}
a.menu {
	color:var(--corporate-color);
	cursor:pointer;
	text-decoration:none;
}


a.footer {
	color:white;
	cursor:pointer;
	text-decoration:none;
}

a.ndtgroup {
	color:var(--corporate-color);
	background:white;
	font-weight:bold;
}
a.ndtgroup:hover {
	color:white;
	background:var(--corporate-color);
	font-weight:bold;
}

a.link-cabang {
	color:white;
	background:rgba(0,76,66,255);
	font-weight:bold;
}

a.link-cabang:hover {
	color:rgba(0,76,66,255);
	background:white;
	font-weight:bold;
}


	.flex-item-header {
		display: flex;                /* create nested flex container */
		justify-content: center;      /* center text horizontally */
		align-items: center;          /* center text vertically */
		background: #323232;
		padding: 5px;
		
		color: black;
		font-weight: bold;
		
	}

	.flex-item-header2 {
		display: flex;                /* create nested flex container */
		justify-content: bottom;      /* center text horizontally */
		align-items: bottom;          /* center text vertically */
		background: #323232;
		padding: 5px;
		
		color: black;
		font-weight: bold;
		
	}

	.center {
		margin: auto;
		/*width: 60%;*/
	}

	a.sosmed:link {color:White;background-color: var(--corporate-color);text-decoration: none;}
	a.sosmed:hover {color:var(--corporate-color);background-color: White;text-decoration: none;}

	a.link-intl {
	color:var(--corporate-color);
	background:white;
	font-weight:bold;
	}

	a.link-intl:hover {
	color:white;
	background:var(--hijau);
	font-weight:bold;
	}

	.round5 {
		border-radius: 5px;
	}

	.round10 {
		border-radius: 10px;
	}

/* Dragable Carousel */

  .carouselOfImages{
  position: relative;
  margin: auto;
  overflow: visible;
  width: 100%;
}
.gradient-left{
  display: block;
  position: relative;
  background-image: linear-gradient(to right, whitesmoke, transparent 100%);
    margin-top: -270px;
  height: 150px;
  width: 8%;
  content: '';
}
.gradient-right{
  display: block;
  position: relative;
  float: right;
  right:0;
  background-image: linear-gradient(to left, whitesmoke, transparent 100%);
      margin-top: -150px;
  height: 150px;
  width:8%;
  content: '';
}

.carouselImage {
    position: relative;
    width: 20%;
    height: 45px;
    padding: 24px;
    border: 1.5px solid black;
    margin-right: 33px;
    margin-top: 70px;
    margin-bottom: 50px;
    counter-increment: carousel-cell;
    text-align: center;
    vertical-align: center;
    transition: transform 0.5s;
    font-size: 1.2em;
  }

 

  @media only screen and (max-width: 600px) {
	.carouselImage{
       
		height:100px;
        padding: 15px;
    }
	.web-content {
		margin-left:15px;
		margin-right:10px;

	}
	.head-top {
		margin-left:15px;
		margin-right:15px;

	}
	.head-logo {
		height:45px;
	}
	#you-can-rely{
		font-size:3em;
	}

  }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.carouselImage{
       
		height:100px;
        padding: 15px;
    }
	.web-content {
		margin-left:30px;
		margin-right:30px;
	}
	.head-top {
		margin-left:30px;
		margin-right:30px;
	}
	.head-logo {
		height:45px;
	}
	.you-can-rely{
		font-size:3em;
	}

	
	}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.web-content {
		margin-left:50px;
		margin-right:50px;
	}	
	.head-top {
		margin-left:50px;
		margin-right:50px;
	}
	.head-logo {
		height:60px;
	}
	.you-can-rely{
		font-size:4em;
	}

	
	}
	

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	
	}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.web-content {
		margin-left:50px;
		margin-right:50px;

	}
	.NandD {
		padding-left:15px;
		padding-right:5px;
	}

	.head-logo {
		height:60px;
	}
	#you-can-rely{
		font-size:5em;
	}
	
	}

/*  

@media only screen and (max-width: 1300px){
    .carouselImage{
        width: 30%;
    }
	.web-content {
		margin-left:10px;
		margin-right:10px;

	}
}
@media only screen and (max-width: 773px){
    .carouselImage{
        width: 50%;
    }

}
@media only screen and (max-width: 490px){
    .carouselImage{
        width: 50%;
        padding: 15px;
    }

}
*/

.carouselImage.is-selected {

border: 1.5px solid #00ADEE;
color:#00ADEE;
  z-index:10;
  transform: scale(1);
}
.carouselImage.nextToSelectedLeft, .carouselImage.nextToSelectedRight {
  transform: scale(1);
  z-index:5;
}

/*! Flickity v2.0.5
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

/* .flickity-enabled:focus { outline: none; } */

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
/*           tap-highlight-color: transparent; */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.flickity-viewport {
    margin: 0px;
    width: 100%;
    margin-bottom: 100px;
}

/* end of Dragable Carousel */


.MultiCarousel { 
	float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; 
	
  
}
    .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
        .MultiCarousel .MultiCarousel-inner .item { float: left;}
        .MultiCarousel .MultiCarousel-inner .item > div { text-align: left; padding:15px; margin:10px; background:#f1f1f1; color:#666;}
    .MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
    .MultiCarousel .leftLst { left:5px; }
    .MultiCarousel .rightLst { right:5px; }
    
        .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; color:var(--corporate-color);opacity:0.3; }
	.pad15 {
		cursor:pointer;
		height:330px;
		
		
	}
	.pad15.card:hover{
		box-shadow: 0px 4px 8px 0px rgb(255, 255, 51,0.8); /*rgba(0,0,0,0.2);*/
		
	} 

	.zoom {
		/*padding: 50px;
		background-color: green;*/
		transition: transform .2s; /* Animation */
		cursor:pointer;
		box-shadow: 0px 4px 8px #888888;
		
	/*	width: 200px;
		height: 200px;
		margin: 0 auto;*/
	}
	
	.zoom:hover {
		transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
		box-shadow: 0px 4px 8px 0px rgb(255, 255, 51,0.8); /*rgba(0,0,0,0.2);*/
	}

	div.sticky {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		background-color: yellow;
		padding: 50px;
		font-size: 20px;
	}

	.title28 {
		font-size:28px;
		color: var(--corporate-color);
	}

	.title24 {
		font-size:24px;
		color: var(--corporate-color);
	}

	.title20 {
		font-size:20px;
		color: var(--corporate-color);
	}

	.title18 {
		font-size:18px;
		color: var(--corporate-color);
	}

	a{color:var(--corporate-color);}

	.titleCorp18 {
		font-size:18px;
		background: var(--corporate-color);
		color:white;
	}

	.titleCorp16 {
		font-size:16px;
		background: var(--corporate-color);
		color:white;
	}

	.titleCorp14 {
		font-size:14px;
		background: var(--corporate-color);
		color:white;
	}

	.titleCorp20 {
		font-size:20px;
		background: var(--corporate-color);
		color:white;
	}

	#topButton {
		display: none;
		position: fixed;
		bottom: 20px;
		right: 30px;
		z-index: 99;
		font-size: 24px;
		border: none;
		outline: none;
		color: var(--corporate-color);
		cursor: pointer;
		padding: 15px;
		opacity:0.5;
	}
	
	#topButton:hover {
		background-color: none;
		opacity:1;
	}

	#sosmedButtonON{
		display:block;
		position: fixed;
		top: 150px;
		right: -40px;
		z-index: 99;
/*		font-size: 24px;
		border: none;
		outline: none;
		color: var(--corporate-color);*/
		cursor: pointer;
		padding: 0px;
		background:yellow;
		
		/*opacity:0.5;*/
	}

	#sosmedButton {
		
		position: fixed;
		top: 150px;
		right: -3px;
		z-index: 99;
/*		font-size: 24px;
		border: none;
		outline: none;
		color: var(--corporate-color);*/
		cursor: pointer;
		padding: 0px;
		
		/*opacity:0.5;*/
	}
	a.sosmed {
		color:white;
	}
	
	.stk{
		display:none;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		width:100%;
/*		font-size: 24px;
		border: none;
		outline: none;
		color: var(--corporate-color);*/
		
		padding: 0px;
		background:white;

	}
	
	.stk-contact2{
		display:none;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		width:25%;
		padding: 0px;
		background:white;

	}
	
	.stk-contact{
    	position: absolute;
        
        top: 0px;
        
        
        padding-right: 150px;
        z-index: 1;
        
        /* overflow: hidden; */
        /*width: 100%;*/
        height:0;
        transition: .5s ease;
    }

	.stk-search{
		display:block;
		position: fixed;
		
		top: -85px;
		z-index: 99;
		width:50%;

		left: 50%;
    	transform: translate(-50%, 0);
		border-radius:0px 0px 15px 15px;

/*		font-size: 24px;
		border: none;
		outline: none;
		color: var(--corporate-color);
		
		padding: 0px;*/
		background:var(--corporate-color);

	}
	


	#_sticky {
		display: none;
		position: fixed;	
		z-index: 99;
		/*top:0px;
		left:0px;
		
		padding: 0px;
		*/
	}


	.shape {
		width:300px;
			height:100px;
			background:green;
			color:white;
			display: flex;
			justify-content: left;
			align-items: center;
			font-size: 25px;
			
			
			}
	
			.half-circle {
				display: inline-block;
				width: 81px;
				height: 50px;
				top:48px;
				background-color: green;
				border-top-left-radius: 110px;
				border-top-right-radius: 110px;
				border: 10px solid green;
				border-bottom: 0;
				position: absolute;
				transform: rotate(90deg);
		}

	.half-circle2 {
			/*display: inline-block;*/
			margin-left: 275px;
			width: 81px;
			height: 50px;
			background-color: green;
			border-top-left-radius: 110px;
			border-top-right-radius: 110px;
			border: 10px solid green;
			border-bottom: 0;
			position: absolute;
			transform: rotate(90deg);
	}
	/*
	-> sample Shape
		<div class="shape" style="background:green;">
				<div style="margin-left: 50px;">
					test 1234567890 
				</div>
				<span class="half-circle"></span>
		</div>
	*/
	
	
.ovl {
	height: 100%;
	width: 100%;
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.9);
  }
  
  .ovl-content {
	top:10px;
	left:0px;
	width: 100%;
	text-align: center;
	height:100vh;
	
  }
  
  
  .ovl a {
	padding: 0px;
	text-decoration: none;
	font-size: 36px;
	color: #818181;
	display: block;
	transition: 0.3s;
  }
  
  .ovl a:hover, .ovl a:focus {
	color: #f1f1f1;
  }
  
  .ovl .closebtn {
	position: absolute;
	top: 0px;
	right: 45px;
	font-size: 60px;
	
	z-index:99991;
  }
  
  .ovl .closebtn:hover {
	color:red;
  }

  img.zoom_pic {
	top:100px;
  }
  
  @media screen and (max-height: 450px) {
	.ovl a {font-size: 20px}
	.ovl .closebtn {
	font-size: 40px;
	top: 0px;
	right: 35px;
	}
  }