@import url('https://fonts.googleapis.com/css?family=PT+Sans');



:root {

	--org-clr: #e45c0a;

	/* --theme-blue: #12436f; */

	--theme-blue: #2e3386;

	--theme-d-blue: #252a77;

	--theme-org: #e87031;

	--theme-d-org: #c55419;

	--alt-fonts: 'PT Sans', sans-serif;

}



.container {

	width: calc(100% - 20px);

	max-width: 1000px;

	margin-left: auto;

	margin-right: auto;

}



.para {

	text-align: justify;

	line-height:  1.5em;

	font-family: var(--alt-fonts);

}

.para img {
    max-width: 250px;
    float: left;
    margin-right:  20px;
}



.para li {

	margin-left:  20px;

	text-align: justify;

	font-family: var(--alt-fonts);

}





.yellow {background: #fbce1b;}

.gray {background: #222222;}

.gray2 {background: #272727;}

.dgray-txt {color: #171717;}

.lgray-txt {color: #7f7e7e;}



* {

	font-family: 'Bree Serif', serif;

	color: #444;

}



.ylw-line {

	border-bottom: 1px solid var(--theme-org);

}



.ft-anton {

	font-family: 'Anton', sans-serif;

	letter-spacing: 0px;

}



.ft-source {

	font-family: var(--alt-fonts);

}



.org-txt {

	color: var(--org-clr);

}



.link:hover {

	text-decoration: underline;

}



.org-btn {

	border: none;

    text-transform:  uppercase;

    background: var(--org-clr);

    color: #fff;

    padding: 8px 15px;

    display: inline-block;

    border-radius: 3px;

	font-size: 16px;

	cursor: pointer;

	-webkit-transition: .2s;

	-o-transition: .2s;

	transition: .2s;

}



.org-btn:hover {

	box-shadow: 0px 1px 3px 1px rgba(0,0,0,.4); 

}



/**********/

/* header */

/**********/



.header {

	position: fixed;

	width: 100%;

	z-index: 100;

	box-shadow: 0px 0px 10px rgba(0,0,0,.2);

}

.hide {
  width: 50%;   
  /*border: 1px solid #000;
  background: red;*/
  max-height: 99em;
  opacity: 1;
  height: auto;
  overflow: hidden;
  transition: opacity 1.5s linear, max-height 1.5s linear;
}
.hide p {
  padding: 10px;
  margin: 0;
}
.hide ul {
  list-style-type: circle;
}
/* example 3 */
.ex3 .hide3 {

  display: table;
  height: 150px; /* any arbitrary height but best at the minimum initial height you would want. */
  overflow: hidden;
  transition: all 0.5s ease;
  border-bottom: 1px solid #f9f9f9;
}
.inner3 {
  padding: 10px;
}
.inner3 ul{
  list-style: circle;
  margin-left: 20px;
}
.inner3 ul li{
  margin-bottom: 5px;
}



.logo-nav {

	position: absolute;

	left: 50%;

	-webkit-transform: translateX(-50%);

	-ms-transform: translateX(-50%);

	-o-transform: translateX(-50%);

	transform: translateX(-50%);

	border-radius: 0 0 30% 30%;

	overflow: hidden;

	display: flex;

	width: 150px;

	height: 125px;

	z-index: 10;

	background: #fff;

	box-shadow: 0px 0px 10px rgba(0,0,0,.2);

}



.logo-nav img {

    width:  100%;

    height:  100%;

    padding: 5px 15px 15px;

}



.header .top-nav {

	background: #c55419;

	height: 8px;

}



.header .top-nav .container {

	height: 100%;

}



.header .top-nav a {

	display: flex;

	display: -moz-flex;

	display: -webkit-flex;

	align-items: center;

	-moz-align-items: center;

	-webkit-align-items: center;

	height: 22px;

	padding-left: 10px;

}



.bot-nav {

	background: #222222;

	background: -moz-linear-gradient(top, #222222 0%, #222222 50%, #272727 51%, #272727 100%);

	background: -webkit-linear-gradient(top, #222222 0%,#222222 50%,#272727 51%,#272727 100%);

	background: linear-gradient(to bottom, #222222 0%,#222222 50%,#272727 51%,#272727 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#272727',GradientType=0 );

	background: repeating-linear-gradient(    135deg,    #2e3386,    #2e3386 6px,    #252a77 6px,    #252a77 12px  );

	height: 90px;

	font-size: 12px;

	font-weight: bold;

	/* position:  relative; */

}



.bot-nav-ovlay {

    height:  100%;

    width:  100%;

    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 67%, rgba(0,0,0,0.2) 68%, rgba(0,0,0,0.2) 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 67%,rgba(0,0,0,0.2) 68%,rgba(0,0,0,0.2) 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 67%,rgba(0,0,0,0.2) 68%,rgba(0,0,0,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=0 ); /* IE6-9 */

}



.bot-nav-ovlay .container {

    height:  100%;

}



.nav-l {

    width: calc(50% - 90px);

    height: 100%;

	position: relative;

}



.nav-l div.nav-menu {

	height: 100%;

	width: 100%;

}



.nav-l div.nav-menu > a {

    width:  25%;

    text-align:  center;

    display:  block;

    position:  relative;

}



.nav-l div.nav-menu > a > p {

    position:  absolute;

    bottom: 0px;

    height:  30px;

    width:  100%;

    color: #2a82b8;

}



.nav-l div.nav-menu > a > p::before {

    content:  "";

    width: 65%;

    border-top: 1px solid #245892;

    position:  absolute;

    top: 1px;

}



.nav-menu svg {

    width: 30px;

    height: 61px;

	fill: #2579af;

	display: inline-block;

}



.nav-menu a, .nav-menu a * {

	transition: all .2s ease-in-out;

	-o-transition: all .2s ease-in-out;

	-ms-transition: all .2s ease-in-out;

	-moz-transition: all .2s ease-in-out;

	-webkit-transition: all .2s ease-in-out;

}



.nav-l div.nav-menu > a:hover::before, .nav-l div.nav-menu > a.active::before {

    content: "";

    left: 0;

    top: -8px;

    height: 8px;

    width: 100%;

    background: #e87031;

    position: absolute;

}



.nav-l div.nav-menu > a:hover, .nav-l div.nav-menu > a.active {

    background: rgba(0,0,0,.2);

}



.nav-l div.nav-menu > a:hover p, .nav-l div.nav-menu > a.active p {

    color: #fff;

}



.nav-l div.nav-menu > a:hover svg path, .nav-l div.nav-menu > a.active svg path {

    fill: #fff;

}



.nav-r {

    width: calc(50% - 110px);

    height: 100%;

}



.nav-r-search {

    height: 35px;

    width: 100%;

}



.nav-r-search form input::placeholder {

	color: #2a82b8;

	

}



.nav-r-search form {

    margin-top: 26px;

    height: 35px;

    border-bottom: 1px solid #245892;

}



.nav-r-search form input {

    width: calc(100% - 34px);

    background: transparent;

    border: none;

    outline: none;

    color: #fff;

    height:  100%;

    padding-left: 8px;

}



.nav-r-search form input, .nav-r-search form input + a {	

	transition: background .2s ease-in-out;

	-o-transition: background .2s ease-in-out;

	-ms-transition: background .2s ease-in-out;

	-moz-transition: background .2s ease-in-out;

	-webkit-transition: background .2s ease-in-out;

}



.nav-r-search form a i {

    width: 34px;

    text-align: right;

    font-size: 23px;

    color: #fff;

    height: 35px;

}



.nav-r-bot {

    height: 30px;

    padding: 8px 0px;

}



.nav-r-bot a, .nav-r-bot a i, .nav-r-bot span {

    color: #2a82b8;

	transition: all .2s ease-in-out;

	-o-transition: all .2s ease-in-out;

	-ms-transition: all .2s ease-in-out;

	-moz-transition: all .2s ease-in-out;

	-webkit-transition: all .2s ease-in-out;

}



.nav-r-bot a:hover, .nav-r-bot a:hover i {

	color: #fff;

}



.nav-r-bot > div > a {

    padding: 15px;

}



.nav-r-bot > div > a i {

    margin-right: 5px;

}



.nav-r-bot > div > a:last-child {

    padding-right: 0px;

}

span.lang-choose a {
    padding:  0 5px;
    position:  relative;
    margin:  0 3px;
}

span.lang-choose a.active {
    color: #fff;
}

span.lang-choose {
    margin-right: 13px;
}

span.lang-choose a, span.lang-choose span {
	color: #2a82b8;
}

.sm-lang {
    position:  absolute;
    height:  100%;
    width: 85px;
    left:  40px;
    padding: 0 5px;
    z-index:  10;
}




.header-bot {

    height:  98px;

}



.nav-r-search form input:focus, .nav-r-search form input:focus + a {

    background: rgba(0,0,0,.15);

}











/**********/

/* footer */

/**********/



.footer {

	padding-top: 40px;

	margin-bottom: 50px;

}



.footer-links-div {

    font-size:  13px;

}



.footer-links {

	line-height: 1.7em;

}



span.new-prod {

    color:  red;

    font-size:  10px;

    margin-left: 3px;

}



.foot-logo img {

	max-width: calc(100% - 20px);

}



.foot-banner {

	width: 100%;

	margin-bottom: 50px;

}



.foot-banner img {

	width: 100%;

	height: 100%;

}



.foot-banner a h4 {

	font-size: 15px;

}



.foot-sosmed a:not(:last-child){

	margin-right: 15px;

	padding: 0px 2px;

}



.foot-sosmed i {

	font-size: 20px;

}



.foot-sosmed a:hover i {

	color: #fbce1b;

}



.cprt {

    font-size: 11px;

    letter-spacing: 0px;

    color: #aaa;

    margin-top:  20px;

}



.foot-subs div {

	line-height: 23px;

}



.foot-subs form {

    border: 1px solid #ccc;

    border-radius: 4px;

    overflow: hidden;

}



.foot-subs form input {

    border: none;

    background: #fff;

    padding:  10px;

}



.foot-subs form input[type="submit"] {

    border-left:  1px solid #ccc;

    padding-left:  10px;

    font-weight:  bold;

    color: #02a657;

	cursor: pointer;
}

.foot-subs form input[type="submit"]:hover {
	background: #f0f0f0;
}

.logo-foot img {
    max-width:  100%;
}

.footer-links-div a:hover {
    color: var(--theme-org);
}

.foot-visit div {
    line-height:  1.1em;
    text-align:  center;
}

.foot-visit div:last-child {
    font-size:  0.8em;
}







/********/

/* home */

/********/



.home-text {

    font-size:  .8em;

}

.slick-prev:before, .slick-next:before {
    z-index: 60;
    font-size: calc(5vw + 2em);
    font-family: 'FontAwesome';
}

.slick-prev, .slick-next {
    z-index: 60;
    width: 6vw;
    height: 100%;
}

.slick-next {
    right: 0;
}

.slick-prev {
    left: 0;
}

.slick-next:before {
    content: '\f105';
}

.slick-prev:before {
    content: '\f104'
}

.slick-dots {
    bottom: 1vw;
}

.slick-dots li button {
    padding: 0;
    width: calc(1vw + 1em);
    height: calc(1vw + 1em);
}

.slick-dots li {
    text-align: center;
    width: calc(1vw + 0.3em);
    height: calc(1vw + 0.3em);
    margin: 0 calc(0.2vw + 0.1em);
}

.slick-dots li button:before {
    background: #fff;
    content:  "";
    width: calc(0.8vw + 1em);
    height: calc(0.8vw + 1em);
    max-width: 14px;
    max-height: 14px;
    border-radius: 50%;
    opacity:  .4;
}

.slick-dots li.slick-active button:before {
    opacity:  .8;
}

.index-slider-text-div {
    position:  absolute;
    z-index: 100;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6vw;
    width: 40vw;
    left: 5vw;
    font-size: calc(2.5vw + 0.2em);
    text-align: center;
    line-height: 1.15em;
}

.index-slider-text-div div:first-child {
    color: var(--slide-text-col);
    /* text-shadow: 0px 2px 10px rgba(0,0,0,.2); */
}

.index-slider-text-div div:first-child.txt-col1 {
	--slide-text-col: #fff;
}

.index-slider-text-div div:first-child.txt-col2 {
	--slide-text-col: var(--theme-d-blue);
}

.index-slider-text-div .index-slider-logo {
    text-align: center;
    width: 100%;
    margin: 2.5vw 0 0px;
    padding: 0px 7%;
}

.index-slider-text-div .index-slider-logo img {
    height: 5.5vw;
    width: auto;
    display: inline-block;
    /* box-shadow: 0px 2px 10px rgba(0,0,0,.2); */
    margin: 0.6vw 2% 0;
    /* padding:  1.5%; */
    /* background: rgba(255,255,255,0.3); */
}

.index-slider-text-div.right {
    right: 5vw;
    left: unset;
}




/**********/

/* slider */

/**********/



.index-slider {

    width: 100%;

    height:  0;

    padding-bottom:  36.68%;

    overflow:  hidden;

}



.index-slider-div {width: 100%;overflow: hidden;object-fit: cover;position:  relative;}



.index-slider-div img {

    height: 100%;

    width: 100%;

}





/**************/

/* breadcrumb */

/**************/



.breadcrumb {

	list-style-type: none;

	text-transform: uppercase;

	font-size: 10px;

	font-weight:  bold;

	padding: 20px 0 10px;

}



.breadcrumb * {

	color: var(--theme-org);

}



.breadcrumb li {

	display: inline-block;

}



.breadcrumb li:not(:last-child)::after {

	content: ">";

	margin: auto 3px auto 7px;

}



.breadcrumb li:last-child {color: #333;}



.breadcrumb a:hover {

	text-decoration: underline;

}





/***********/

/* product */

/***********/



.prod-card {

	width: calc(25% - 10px);

	text-transform: uppercase;

	text-align: center;

	font-size: 13px;

	display: block;

	padding: 0px 0 10px;

	margin-left: 5px;

	margin-right: 5px;

	margin-bottom: 10px;

	position: relative;

}



.prod-card:hover {

    outline: 2px solid var(--theme-org);

}



.prod-list .prod-card:hover::after {

    content: "\f067";

    font-family:  fontawesome;

    font-size: 15px;

    top: 0;

    right: 0;

    position:  absolute;

    padding: 4px 6px;

    background:  #fbce1b;

}



.prod-card .ylw-line {

	margin: 5px 0 10px;

	width: 40px;

	display:  inline-block;

}



.prod-card h4 {

    font-size:  1.1em;

}



.prod-card-desc .prod-brand {

    font-size: .9em;

}



.prod-card * {

	color: #6d6d6d;

}



.prod-img-div {

    width: 100%;

    height: 0;

    padding-bottom: 100%;

    position: relative;

}



.prod-img-div img {

    width: 100%;

    position: absolute;

    left: 50%;

    top: 50%;

    /* max-width: 170px; */

    height: auto;

    transform: translate(-50%, -50%);

}



.load-more {

	width: 100%;

	display: block;

	color: var(--theme-org);

	border: 1px solid #aaa;

	padding: 10px;

	font-size: 12px;

	font-weight: bold;

	text-align: center;

	border-radius: 2px;

	-webkit-transition: .2s;

	-o-transition: .2s;

	transition: .2s;

}



.load-more:hover {

	border-color: var(--theme-org);

	background: var(--theme-org);

	color: #fff;

	box-shadow: 0px 2px 3px 1px rgba(50,50,50,.3);

}



.ylw-select {

	width: 100%;

}



.ylw-btn {

	background: #ffea00;

	color: #a1900b;

	padding: 8px 15px;

	display: block;

	border-radius: 3px;

}



.ylw-btn i {

	color: #a1900b;

}



.org-btn {

	background: var(--theme-org);

	color: #fff;

	padding: 8px 15px;

	display: block;

	border-radius: 3px;

}



.org-btn i {

	color: #fff;

}



.prod-pg-cat {

    position: sticky;

    top: 161px;

}



.cat-btn {

    margin-bottom: 7px;

    cursor: pointer;

}



.cat-btn p {

	transition: .2s;

	-o-transition: .2s;

	-ms-transition: .2s;

	-moz-transition: .2s;

	-webkit-transition: .2s;

	color: #aaa;

	border-bottom: 1px solid #f1f1f1;

	padding-bottom:  7px;

}



.cat-btn:hover p, .cat-btn.active p {

    font-weight:  bold;

    color: var(--theme-org);

    border-bottom-color:  var(--theme-blue);

}



.prod-pg-cat .cat-btn::before {

    content: "";

    width: 5px;

    height: 4px;

    background:  #bbb;

    margin-right: 7px;

    margin-top: -6px;

    transition: .2s;

    -o-transition: .2s;

    -ms-transition: .2s;

    -moz-transition: .2s;

    -webkit-transition: .2s;

}



.prod-pg-cat .cat-btn.active::before {

    width:  10px;   

}



.cat-btn:hover::before, .cat-btn.active::before {

    background: var(--theme-org);

}



.prod-pg-sect {

    margin-bottom: 50px;

}



.prod-pg-sect h3 {

    margin-bottom: 15px;

    font-size: 1.7em;

    color: var(--theme-blue);

}



.prod-pg-sect .prod-sect-desc {
    margin: 10px;
    line-height:  1.4em;
    padding: 0 30px;
    font-family: var(--alt-fonts);
    text-align: justify;
}



.prod-pg-sect .prod-sect-desc li {

    margin-left:  20px;

    text-align:  left;

}



.prod-pg-sect .img-div {

    margin-bottom: 15px;

    text-align:  center;

}



.icon-group .img-div img {

    width: 75px;

}



.prod-pg-sect .sub-text {font-size: 0.8em;margin: 7px 0 10px;font-family: var(--alt-fonts);text-align: justify;}
.prod-pg-sect h4 { margin-bottom: 10px; }






/******************/

/* product detail */

/******************/



.prod-brand {

	padding: 5px 12px;

	background:  var(--theme-org);

	display:  inline-block;

	text-transform:  uppercase;

	color:  #fff;

	margin-bottom: 10px;

	font-size: 1.1em;

}



.prod-name {

	text-transform: uppercase;

	margin-bottom: 30px;

	line-height:  1.4em;

	font-size: 1.9em;

}



.prod-description {

	margin-bottom: 30px;

	text-align:  justify;

	line-height:  1.35em;

	font-family:  var(--alt-fonts);

}



table.spec-table {

    width:  100%;

    border-collapse:  collapse;

    font-size:  .9em;

    border-color: #bbb;

}



table.spec-table td {

	padding: 7px 10px;

    vertical-align:  top;

}



table.spec-table * {

	font-family: var(--alt-fonts);

}



table.spec-table td:first-child {

    background:  #f0f0f0;

    font-weight:  bold;

    width: 140px;

}



.product-img-lg {

	margin: 0px 1px 5px 3px;

}



.product-img-nav .img-div {

	margin: 0px 3px;

	/* width: calc(33.33% - 5px); */

	/* padding: 0px 3px; */

}





/*********/

/* login */

/*********/



.input-row {

	font-size: 12px;

	margin-bottom: 20px;

	position: relative;

}



.input-row input, .input-row textarea {

	margin-top: 5px;

	width: 100%;

	padding: 12px 8px;

	border: none;

	background: #eee;

	font-size: 15px;

	resize: none;

}



.captcha {

	width: 100%;

	padding: 50px 0;

	border: 1px solid #eee;

	text-align: center;

	margin-bottom: 20px;

}





/********/

/* news */

/********/



.news-list > a h4 {

    font-size: 15px;

    height: 45px;

    line-height: 1.5em;

    overflow: hidden;

	transition: all .2s ease-in-out;

	-o-transition: all .2s ease-in-out;

	-ms-transition: all .2s ease-in-out;

	-moz-transition: all .2s ease-in-out;

	-webkit-transition: all .2s ease-in-out;

}



.news-list > a {

    margin-bottom: 23px;    

}



.news-list > a:hover img {

	box-shadow: 0px 1px 10px rgba(0,0,0,.6);

}



.news-list > a:hover h4 {

    color: #12436f ;

}



.news-list img {

    width:  100%;

    height:  100%;

	transition: all .2s ease-in-out;

	-o-transition: all .2s ease-in-out;

	-ms-transition: all .2s ease-in-out;

	-moz-transition: all .2s ease-in-out;

	-webkit-transition: all .2s ease-in-out;

}



/***************/

/* news detail */

/***************/



.news-container {

	max-width: 600px;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 30px;

}



.news-title {

    font-size:  1.7em;

}



p.news-date {

    font-size:  .9em;

    color:  #888;

}



.news-cont {

	text-align:  justify;

	line-height: 1.5em;

	font-size: .9em;

}



.img-div img {

	width: 100%;

}







/*********/

/* about */

/*********/



h3.pg-title {

	text-transform: uppercase;

	margin-bottom: 10px;

}



.submenu a {

    padding: 7px 10px;

    width:  100%;

    text-align:  center;

    border-bottom: 1px solid #e0e0e0;

    text-transform: capitalize;

}



.submenu a:first-child {

    /* border-left: 1px solid var(--theme-blue); */

}



.submenu a.active {

    /* font-weight:  bold; */

    /* background: var(--theme-blue); */

    /* color:  #fff; */

    border-bottom: 3px solid var(--theme-org);

}





/**************/

/* sertifikat */

/**************/



.sertif-card {

    padding:  5px;

    margin-bottom: 25px;

}



.sertif-img {

	max-width: 300px;

	width: 35%;

	height: 300px;

	min-width: 100px;

	/* border: 1px solid #e9e9e9e9; */

	/* background: #f1f1f1; */

}



.sertif-img img {

	width: 100%;

	height: 100%;

	object-fit: contain;

	object-position:  top;

	/* border: 1px solid #ddd; */

}



.sertif-desc {

    padding: 1px 5px 10px 30px;

    text-align:  justify;

    width: 65%;

    /* min-width: calc(100% - 300px); */

    /* height:  300px; */

    /* overflow:  hidden; */

}



.sertif-desc > h4 {

    font-size: 1em;

    margin-bottom:  15px;

}



.sertif-desc-det {

    font-size: .9em;

    line-height: 1.5em;

    font-family:  var(--alt-fonts);

}



.sertif-desc-det * {

    margin-bottom: 13px;

}



.sertif-desc-det li {

    margin-bottom: 1px;

    margin-left:  17px;

}







/*************/

/* milestone */

/*************/



.timeline {

    position: relative;

    max-width: 680px;

    margin: 0 auto;

}



/* The actual timeline (the vertical ruler) */

.timeline::after {

    content: '';

    position: absolute;

    width: 6px;

    background-color: var(--theme-blue);

    top: 0;

    bottom: 0;

    left: 50%;

    margin-left: -3px;

}



/* Container around content */

.timeline-cont {

    padding: 10px 40px;

    position: relative;

    background-color: inherit;

    width: 50%;

}



/* The circles on the timeline */

.timeline-cont::after {

    content: '';

    position: absolute;

    width: 25px;

    height: 25px;

    right: -17px;

    background-color: white;

    border: 4px solid #FF9F55;

    top: 15px;

    border-radius: 50%;

    z-index: 1;

}



.timeline .content * {

	color: #333;

	text-align: center;

}



.timeline .content h2 {

    margin-bottom: 5px;

}



.timeline p {

    font-family:  var(--alt-fonts);

}



/* Place the container to the left */

/* .left {

    left: 0;

} */



/* Place the container to the right */

/* .right {

    left: 50%;

} */



.timeline-cont:nth-child(odd) {

    left: 0;

}



.timeline-cont:nth-child(even) {

    left: 50%;

}



/* Add arrows to the left container (pointing right) */

.timeline-cont:nth-child(odd)::before {

    content: " ";

    height: 0;

    position: absolute;

    top: 22px;

    width: 0;

    z-index: 1;

    right: 30px;

    border: medium solid rgba(0,0,0,0.05);

    border-width: 10px 0 10px 10px;

    border-color: transparent transparent transparent rgba(0,0,0,0.05);

}



/* Add arrows to the right container (pointing left) */

.timeline-cont:nth-child(even)::before {

    content: " ";

    height: 0;

    position: absolute;

    top: 22px;

    width: 0;

    z-index: 1;

    left: 30px;

    border: medium solid rgba(0,0,0,0.05);

    border-width: 10px 10px 10px 0;

    border-color: transparent rgba(0,0,0,0.05) transparent transparent;

}



/* Fix the circle for containers on the right side */

.timeline-cont:nth-child(even)::after {

    left: -16px;

}



/* The actual content */

.content {

    padding: 20px 20px;

    background-color: rgba(0,0,0,0.05);

    position: relative;

    border-radius: 3px;

}





.animation-element .content {

	opacity: 0;

	position: relative;

  }

  /*animation element sliding left*/

  

  .animation-element.left .content {

	opacity: 0;

	-moz-transition: all 500ms linear;

	-webkit-transition: all 500ms linear;

	-o-transition: all 500ms linear;

	transition: all 500ms linear;

	-moz-transform: translate3d(-100px, 0px, 0px);

	-webkit-transform: translate3d(-100px, 0px, 0px);

	-o-transform: translate(-100px, 0px);

	-ms-transform: translate(-100px, 0px);

	transform: translate3d(-100px, 0px, 0px);

  }

  

  .animation-element.left.in-view .content {

	opacity: 1;

	-moz-transform: translate3d(0px, 0px, 0px);

	-webkit-transform: translate3d(0px, 0px, 0px);

	-o-transform: translate(0px, 0px);

	-ms-transform: translate(0px, 0px);

	transform: translate3d(0px, 0px, 0px);

  }

  /*animation slide left styled for testimonials*/

  

  /* .animation-element.left.testimonial {

	float: left;

	width: 47%;

	margin: 0% 1.5% 3% 1.5%;

	background: #F5F5F5;

	padding: 15px;

  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);

	border: solid 1px #EAEAEA;

  }

   */



  /* right */

  .animation-element.right .content {

	opacity: 0;

	-moz-transition: all 500ms linear;

	-webkit-transition: all 500ms linear;

	-o-transition: all 500ms linear;

	transition: all 500ms linear;

	-moz-transform: translate3d(100px, 0px, 0px);

	-webkit-transform: translate3d(100px, 0px, 0px);

	-o-transform: translate(100px, 0px);

	-ms-transform: translate(100px, 0px);

	transform: translate3d(100px, 0px, 0px);

  }

  

  .animation-element.right.in-view .content {

	opacity: 1;

	-moz-transform: translate3d(0px, 0px, 0px);

	-webkit-transform: translate3d(0px, 0px, 0px);

	-o-transform: translate(0px, 0px);

	-ms-transform: translate(0px, 0px);

	transform: translate3d(0px, 0px, 0px);

  }

  /*animation slide right styled for testimonials*/

  

  /* .animation-element.right.testimonial {

	float: right;

	width: 47%;

	margin: 0% 1.5% 3% 1.5%;

	background: #F5F5F5;

	padding: 15px;

  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);

	border: solid 1px #EAEAEA;

  } */



/* Media queries - Responsive timeline on screens less than 600px wide */



/***********/
/* contact */
/***********/

.contact-form .input-group {
    margin-bottom:  15px;
}

.contact-form .input-group input, .contact-form .input-group textarea {
	width: 100%;
	margin-top:  5px;
	padding: 5px 10px;
	background: #fafafa;
	border: 1px solid #ccc;
	resize: vertical;
}


/************/
/* 404 page */
/************/

.vid-container.eror-404 {
    background:  transparent;
    text-align:  center;
}

.vid-container.eror-404 h1 {
    position:  absolute;
    left:  50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    font-size: calc(6vw / 2 + 1em);
    width: calc(100% - 30px);
}



@media only screen and (max-width: 780px) {

	

	/**********/

	/* header */

	/**********/

	

	.logo-nav img {

		padding: 3px 0px 5px;

	}

	

	.header-bot {

		height: 48px;

	}

	

	.bot-nav-ovlay {

		background:  transparent;

	}



	.nav-r-search form {

		/* padding:  7px 0; */

		margin-top: 0px;

	}

	

	.nav-l div.nav-menu {position: absolute;top: 100%;height: auto;z-index: 200;background: #12436f;background: -moz-repeating-linear-gradient( 135deg, #12436f, #12436f 6px, #0f406f 6px, #0f406f 12px);background: -webkit-repeating-linear-gradient(135deg, #12436f,#12436f 6px,#0f406f 6px,#0f406f 12px);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12436f', endColorstr='#0f406f',GradientType=0 );background: repeating-linear-gradient(     135deg,     #12436f,     #12436f 6px,     #0f406f 6px,     #0f406f 12px   );display:  none;width:  150px;}

	

	.nav-l div.nav-menu > a img {

		display:  none;

	}

	

	.nav-menu a svg {

		display:  none;

	}



	.nav-l div.nav-menu > a:hover::before, .nav-l div.nav-menu > a.active::before {

		display: none;

	}



	.logo-nav {

		width: 80px;

		height: 63px;

		border-radius:  0 0 25% 25%;

	}



	.bot-nav {

		height: 40px;

	}





	.nav-l div.nav-menu > a {

		width:  100%;

		background: rgba(0,0,0,.2);

	}



	.nav-l div.nav-menu > a > p {

		position:  relative;

		height: 35px;

		padding:  0px 15px;

		bottom:  unset;

	}



	.nav-l {

		width: 40px;

	}



	.nav-l div.nav-menu > a > p::before {

		display: none;

	}



	.nav-r {

		width: calc(50% - 70px);

		position:  relative;

	}



	.nav-r-search {

		height: calc(100% - 6px);

	}



	.nav-r-search form input {

		width: calc(100% - 20px);

	}



	.nav-r-search form a i {

		width: 25px;

		font-size: 18px;

	}

	

	.nav-l div.nav-menu > a:hover p, .nav-l div.nav-menu > a.active p {

		background: rgba(0,0,0,0.1);

		color:  #fff;

	}

	

	.nav-menu-btn {

		height: 100%;

		width: 40px;

	}



/*	.nav-menu-btn:hover, */

	.nav-menu-btn.open, .nav-search-btn.open {

		background: rgba(0,0,0,.2);

		position:  relative;

	}

	

	.nav-menu-btn a, .nav-search-btn a {

		height:  100%;

	}



	.nav-menu-btn a i, .nav-search-btn a i {

		color:  #fff;

		font-size:  20px;

	}

	

/*	.nav-menu-btn:hover::before, */

	.nav-menu-btn.open::before, .nav-search-btn.open a::before {

		content: "";

		position:  absolute;

		border-top: 8px solid var(--theme-org);

		width: 100%;

		top: -8px;

	}

	

	

	

	

	

	

	/**********/

	/* footer */

	/**********/

	

	.foot-banner {

		margin-bottom: 30px;

	}

	

	.foot-banner a h4 {

		font-size: 13px;

	}

	

	/***********/

	/* product */

	/***********/

	

	.cprt {

		font-size:  10px;

	}

	

	.prod-card {

		width: calc(50% - 10px);

	}

	

	.prod-list .prod-card {

		width: calc(33.33% - 10px);

	}

	

	.prod-card-desc {

		font-size: 12px;

	}

	



	.prod-pg-cat {

		top: 90px;

	}







	/***************/

	/* news detail */

	/***************/



	.news-title {

		font-size: 1.5em;

	}

	

	p.news-date {

		font-size:  .8em;

	}

	

	.news-cont {

		line-height: 1.4em;

		font-size: .85em;

	}





	/**************/

	/* sertifikat */

	/**************/



	.sertif-img {

		height: 210px;

		width:  30%;

	}



	.sertif-desc {

		width:  70%;

		padding-left: 20px;

		font-size:  15px;

		height:  210px;

		overflow:  hidden;

	}

	



	/*************/

	/* milestone */

	/*************/

	

	/* Place the timelime to the left */

	.timeline::after {

	left: 25px;

	width:  4px;

	}

	

	/* Full-width containers */

	.timeline-cont {

	width: 100%;

	padding-left: 53px;

	padding-right: 15px;

	}

	

	/* Make sure that all arrows are pointing leftwards */

	.timeline-cont::before {
		left: 43px !important;
		top: 32px !important;
		border: medium solid rgba(0,0,0,.05)!important;
		border-width: 10px 10px 10px 0 !important;
		border-color: transparent rgba(0,0,0,.05) transparent transparent !important;
	}


	/* Make sure all circles are at the same spot */
	.timeline-cont:nth-child(odd)::after, .timeline-cont:nth-child(even)::after {
		left: 12px;
		width:  15px;
		height: 15px;
		top: 30px;
	}

	

	/* Make all right containers behave like the left ones */
	.timeline-cont:nth-child(even) {
		left: 0%;
	}
}




@media only screen and (max-width: 490px) {
	
	/**********/
	/* header */
	/**********/
	
	.nav-r-search {
		position: fixed;
		top: 48px;
		right:  0;
		width: 100%;
		background: #0c345a;
		height: 50px;
		padding: 5px 15px;
		display:  none;
	}
	
	.nav-search-btn {
		height:  100%;
		width:  40px;
		margin-left:  auto;
	}

	.nav-r {
		width:  100%;
	}
	
	.nav-r-search form {
		margin-top:  5px;
	}
	

	
	
	
	/**********/
	/* footer */
	/**********/	

	.foot-subs form input {
		width: calc(100% - 80px);
	}

	.foot-subs form input[type="submit"] {
		width: 80px;
	}
	
	.footer-links-div {
		font-size: 11px;
	}
	
	
	/***********/
	/* product */
	/***********/
	
	

	/*********/
	/* about */
	/*********/

	.submenu a {
		font-size: 0.7em;
		padding: 5px 3px;
	}


	/*************/
	/* milestone */
	/*************/

	.content {
		padding: 15px;
		font-size: 13px;
	}
}