body {
	font-family: 'Didact Gothic';
	width: 100%;
	font-size: 1.5vw;
}

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

a:hover {
	opacity: 0.5;
}

div:after {
	float: none;
}

.up {
	position: fixed;
	bottom: 5%;
	right: 3%;
	width: 3%;
	cursor: pointer;
	z-index: 999;
}

div:after {
	float: none ;
	border: none ;
	margin: 0 ;
	padding: 0 ;
}

header {
	margin:0 auto;
	width:100%;
}

.red {
	color:#973157;
	font-weight: bold;
}

.green {
	color: #0f775f;
	font-weight: bold;
}

h1 {
	width: 20%;
	float: left;
	z-index: 999;
	margin: 1%;
}

h1 img {
	width: 100%;
}

img {
	width: 100%;
}

.WA {
	position: fixed;
    right: 3%;
    bottom: 3%;
    z-index: 999;
    width: 5%;
}

.hiden {
	display: none;
	position: fixed;
	top: 5%;
}

.wraper nav {
	background :#dbf0ff;
	width: 80%;
	margin: 0 auto; 
	display: table;
}

.wraper nav ul {
	padding-top: 2.2%;
}

.wraper {
	margin: 0 auto;
	text-align: center;
	display: table;
	max-width: 100%;
	background :#dbf0ff;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 99;
}

.wraper nav li {
	float: right;
	margin: 0 3%;
}

.wraper nav li a {
	color: #0a447a;
}

.slideanim {
    visibility:hidden;
    visibility:visible\9;/*For old IE browsers IE6-8 */
}
.slideanim.slide {visibility: visible; animation:slide 1s;}
.slideanim::after {
    /* useful when its child elements are float:left; */
    content: "";
    display: table;
    clear: both;
}

@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(30%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0);
    } 
}

/*-----------------------hader----------------------------*/
.wrap {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	display: table;
	max-width: 100%;
}

.wrap1 {
	margin: 0 auto;
	text-align: center;
	display: table;
	max-width: 100%;
}

.wrap2 {
	width: 100%;
	display: table;
	background:white; 
}

.wrap3 {
	width: 90%;
	display: table;
	background:#0a447a; 
	padding: 5%;
}

.slider {
  position: relative;
  overflow: hidden;
  margin: 8% auto;
  border-radius: 4px;
  width: 60%;
}

.slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

.slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: auto;
  height: 700px;
  text-align: center;
  line-height: 300px;
}


header #head {
	margin-top: 5vh;
}

div.slider, div.slider_m { overflow: hidden; }
div.slider figure img, div.slider_m figure img { width: 20%; float: left; }
div.slider figure, div.slider_m figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

.slider_m {
	display: none;
}

.bxslider img {
	width: 100%;
	height: auto;
}

/*.bxslider li:hover {
    opacity: 60%;
}*/


.bx-wrapper {
    position: relative;
    margin: 0 auto 5%;
    zoom: 1;
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
}

.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color: #666;
    position: absolute;
    bottom: 3%;
    left: 40%;
}

.bx-viewport {
	height: 100% !important;
	width: 1200px
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: none;
}

.bx-controls-auto {
	display: none;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #666;
    text-indent: -9999px;
    display: block;
    width: 23px;
    height: 5px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 6px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #f8971d;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(../img/controls.png) no-repeat 0 1px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(../img/controls.png) no-repeat -63px 1px;
}

.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
    background-position: -63px 0px;
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 47px;
    height: 47px;
    text-indent: -9999px;
    z-index: 998;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(../images/controls.png) -86px -44px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    width: 100%;
}

/*-----------------------hader----------------------------*/

/*-----------------------about----------------------------*/

section {
	/*padding: 4% 0;*/
	display: table;
	margin :0 auto;
	width: 80%;
}

#about {
	padding-top: 4%;
	padding-bottom: 8%;
}

h2 {
	font-size: 5vw;
	text-align: center;
	margin: 0 auto;
}

#about .logo {
	width: 25%;
	margin:0 auto;
	padding: 3% 0 5%;
}

#about dl .kanan {
	float: right;
	width: 50%;
}

#about dl .kiri {
	float: left;
	width: 45%;
	padding-right: 5%;
}

.visi h3{
	color: white;
	font-size: 4vw;
	text-align: center;
	padding-bottom: 2%;
}

.visi p {
	color: white;
	text-align: center;
}

/*-----------------------about----------------------------*/


/*-----------------------product-------------------------*/

#product {
	padding: 5% 0;
}

#product ul {
	padding-top: 4%;
}

#product li {
	width: 42.5%;
	padding: 0 2.5%;
	display: inline-block;
	vertical-align: top;
}

#product li dt {
	width: 50%;
	margin: 0 auto;
}

#product li dd h4 {
	font-size: 3vw;
	padding-bottom: 3%;
}

#product li dd .desc {
	box-shadow: 2px 2px 8px #000000;
	border-radius: 30px;
	padding: 10% 5% 2% 7%;
	width: 90%;
	margin-top: -10%;
	height: 520px;
	background:white;
}

#product li dd .desc .tombol1,
#product li dd .desc .tombol2 {
	color: white;
	background: #0a447a;
	border-radius: 30px;
	padding: 1.5% 3%; 
}

#product li dd .desc .tombol1 {
	margin-top: 20% !important;
}

#product li dd .desc .tombol2 {
	margin-top: 7% !important;
}

#product li dd .desc .tombol1,
#product li dd .desc .tombol2 {
	padding: 1% 0 1%;
	width: 25%;
	margin: 0 auto; 
}

.tombol1,
.tombol2{
	cursor: pointer;
}
.menu1,
.menu2, 
.menu3,
.menu4{
	background-color: rgba(50, 50, 50, 0.9);
	width: 100%;
	height: 100%;
	z-index: 999;
	position: fixed;
	display: table;
	top: 0;
	bottom: 0;
	left:5000px;
}

.menu5, .menu6 {
	position: fixed;
	background-color: rgba(50, 50, 50, 0.9);
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	display: hidden;
}

#hide1,
#hide2,
#hide3,
#hide4 {
	width: 3%;
	position: fixed;
	top: 12%;
	right: 15%;
	cursor: pointer;
	display:none;
}

#hide1:hover,
#hide2:hover,
#hide3:hover,
#hide4:hover{
	opacity: 0.5;
}

.wrap4 {
	width: 80%;
	background: url(../img/location.jpg) no-repeat;
	padding: 8% 10%;
	margin-top: -8%;
	background-size: cover;
}

.wrap4 .sby {
	width: 50%;
	float: left;
}

.wrap4 .mks {
	width: 50%;
	float: right;
}

.wrap4 dd {
	color: white;
	text-align: center;
	margin-top: 2%;
}

.wrap4 h3 {
	font-size: 3vw;
	color: white;
	text-align: center;
}

.wrap4 h4 {
	font-size: 2vw;
	display: table;
	color: white;
	border-radius: 60px;
	padding : 2% 4%; 
	margin: 0 auto;
}

/*.wrap4 h4.gracila {
	background-color: #973157 ;
}

.wrap4 h4.coton {
	background-color: #0f775f ;
}*/

.wrap4 dl {
	padding-top: 3%;
	display: table;
	width: 100%;
}

.wrap4 dd li {
	width: 20%;
	float: left;
	color: white;
}

.wrap4 dd li h5 {
	padding-top: 3%;
}

.tombol3 {
	background: #973157;
	padding: 2% 4%;
	border-radius: 30px;
	cursor: pointer;
	display: table;
	margin: 2% auto 0; 
}

.tombol4 {
	background: #0f775f;
	padding: 2% 4%;
	border-radius: 30px;
	cursor: pointer;
	display: table;
	margin: 2% auto 0; 
}

.tombol4:hover,
.tombol3:hover {
	opacity: 0.5;
} 


/*-----------------------product-------------------------*/


/*-----------------------kontak-------------------------*/

#contact {
padding: 5% 0 3%;
}

#contact #submit_button {
	color: white;
	background: #0a447a;
	border-radius: 40px;
	padding: 1.7% 3%;
	border: none;
	cursor: pointer; 
}

#contact #submit_button:hover {
	opacity: 0.5;
}

#contact .kontak li {
	float: left;
	width: 33.3%;
}

#contact .kontak li dt {
	width: 8%;
	float: left;
	padding-left: 2%;
}

#contact .kontak li dd {
	float: left;
}

#contact .tabel {
	display: table;
	width: 100%;
	padding: 5% 0;
}

#contact .tabel input,
#contact .tabel textarea {
	width: 100%;
}

#contact .tabel .row1 {
	float: left;
	width: 47%;
}

#contact .tabel .row1 input {
	margin-bottom: 3%;
}

#contact .tabel .row2 {
	float: right;
	width: 47%;
}

#contact .tabel .row2 #submit_button{
	width: auto;
	margin-top: 3%;
	float: right;
}

#kontak {
	padding: 1.5% 0;
	margin: 0 auto;
}

.wrap5 {
	background :#323232;
}

#kontak .copy {
	color: white;
	margin: 0 auto;
}

/*-----------------------kontak-------------------------*/


/*------------------------#kontak------------------------*/


/*------------------------#kontak------------------------*/

/*-----------------------portfolio------------------------*/



/*-----------------------portfolio------------------------*/


/*--------------------1080------------------------*/

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

#product li dd .desc {
	box-shadow: 2px 2px 8px #000000;
	border-radius: 30px;
	padding: 10% 5% 2% 7%;
	width: 90%;
	margin-top: -10%;
	height: 300px;
	background:white;
}

.slider {
  position: relative;
  overflow: hidden;
  margin: 17% auto;
  border-radius: 4px;
  width: 90%;
}

.slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

.slider ul li {
  margin: 0;
  padding: 0;
  width: auto;
  height: 500px;
  background: black;
  text-align: center;
  line-height: 300px;
}

#hide1,
#hide2 {
	width: 5%;
	position: fixed;
	top: 15%;
	right: 5%;
}


}

/*--------------------1080------------------------*/


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

#product li dd .desc {
	box-shadow: 2px 2px 8px #000000;
	border-radius: 30px;
	padding: 10% 5% 7% 7%;
	width: 90%;
	margin-top: -10%;
	background:white;
}

h1 {
	width: 70%;
	float: none;
	padding: 4% 0 1%;
	margin: 0 auto;

}

section#about {
	width: 90%;
}

.wraper nav {
	background :#dbf0ff;
	width: 80%;
	margin: 0 auto; 
	display: table;
	padding-bottom: 3%;
}

.wraper nav ul {
	padding-top: 0;
}

.wraper {
	margin: 0 auto;
	text-align: center;
	display: table;
	width: 100%;
}

.wraper nav li {
	float: right;
	margin: 0 4%;
}

.WA {
	position: fixed;
    right: 3%;
    bottom: 3%;
    z-index: 999;
    width: 10%;
}

body {
	font-family: 'Didact Gothic';
	width: 100%;
	font-size: 3.5vw;
}

#about dl .kanan {
	float: none;
	width: 100%;
}

#about dl .kiri {
	float: none;
	width: 90%;
	padding: 5%;
	text-align: center;
}

.visi h3{
	font-size: 4vw;
	padding-bottom: 2%;
}

.visi p {
	text-align: center;
}

#about {
	padding-top: 15%;
	padding-bottom: 8%;
}

#product {
	padding: 15% 0 5%;
}

#product li dd .desc {
	margin-top: -10%;
	height: auto;
}

#product li {
	width: 90%;
	padding: 5%;
}

#product li dt {
	width: 50%;
	margin: 0 auto;
}

#product li dd h4 {
	font-size: 5vw;
	padding-bottom: 3%;
}

#product li dd .desc a {
	color: white;
	background: #0a447a;
	border-radius: 30px;
	padding: 1.5% 3%; 
}

#product li dd .desc .tombol {
	padding: 7% 0 10%;
}

#product li dd .desc .tombol1,
#product li dd .desc .tombol2 {
	padding: 2% 4%;
	font-size: 5vw;
}

/*#product li dd .desc .tombol1 {
	padding: 20% 0 10%;
}*/

.wrap4 h3 {
	font-size: 5vw;
	color: white;
	text-align: center;
}

.wrap4 {
	background: url(../img/location.jpg) no-repeat 60% 0;
	padding: 10%;
	margin-top: -15%;
	background-size: cover;
}
.wrap4 h4 {
	font-size: 4vw;
	text-align: center;
	margin: 0 auto; 
}

.wrap4 dl {
	padding-top: 5%;
	display: table;
	width: 100%;
}

.wrap4 dd li {
	width: 100%;
	float: none;
	color: white;
	margin: 0 auto;
	text-align: center;
}

.wrap4 dd li h5 {
	padding-top: 3%;
}

.wrap4 .sby {
	float: none;
	margin: 0 auto;
	padding-bottom: 5%;
	width: 70%;
}

.wrap4 .mks {
	float: none;
	margin: 0 auto;
	width: 70%;
}

.tombol3 {
	padding: 4% 8%;
	margin: 5% auto 0; 
	font-size: 5vw;
}

.tombol4 {
	padding: 4% 8%;
	margin: 5% auto 0;
	font-size: 5vw; 
}

#contact {
padding: 15% 0 3%;
}

#contact #submit_button {
	border-radius: 40px;
	padding: 1.7% 3%;
	border: none;
	cursor: pointer; 
}

#contact #submit_button:hover {
	opacity: 0.5;
}

#contact .kontak li {
	float: none;
	width: 70%;
	display: table;
	padding-bottom: 5%;
	margin: 0 auto; 
}

#contact .kontak li dt {
	width: 10%;
	float: left;
	padding-right: 2%;
}

#contact .kontak li dd {
	float: left;
}

#contact .tabel {
	display: table;
	width: 100%;
	padding: 5% 0;
}

#contact .tabel input,
#contact .tabel textarea {
	width: 100%;
}

#contact .tabel .row1 {
	float: none;
	width: 100%;
}

#contact .tabel .row1 input {
	margin-bottom: 3%;
}

#contact .tabel .row2 {
	float: none;
	width: 100%;
}

#contact .tabel .row2 textarea {
	margin-bottom: 5%;
}

#contact .tabel .row2 #submit_button{
	width: 50%;
	margin-top: 3%;
	float: none;
	display: table;
	margin: 0 auto;
}

#contact .kontak {
	margin-top: 5%;
}

#kontak {
	padding: 1.5% 0;
	margin: 0 auto;
}

.wrap5 {
	background :#323232;
}

#kontak .copy {
	color: white;
	margin: 0 auto;
}


.slider {
  position: relative;
  overflow: hidden;
  margin: 50% auto 0 auto;
  border-radius: 4px;
  width: 90%;
}

.slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

.slider ul li {
  position: relative;
  display: flex;
  float: left;
  margin: 0;
  padding: 0;
  /*width: 430px !important;*/
  height: 250px;
  line-height: 0;
}

.slider ul li video {
	width: 100%;
}

.bx-wrapper .bx-pager {
    position: unset;
    padding-top: 5%;
}

#hide1,
#hide2,
#hide3,
#hide4 {
	width: 30px;
	position: fixed;
	top: 21%;
	right: 5%;
	z-index: 999;
}

/*.bx-wrapper .bx-next {
    right: 65px;
    background: url(../img/controls.png) no-repeat -63px 1px;
}*/


}