@import url('https://fonts.googleapis.com/css?family=Varela+Round&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;400&display=swap'); */

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

body {font-family: 'Titillium Web', 'Varela Round', sans-serif; font-size: 14px; letter-spacing: 0.2px; line-height: 130%; color: #000000; margin: 0px;
      -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: auto;}/**/
a {color: #000000; text-decoration: none;}
a:hover {text-decoration: none;}

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

.canselecttext {-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;}

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  width: 300px;
  text-align: center;
}

.tbl {display: table; table-layout: fixed; width: 100%;}
.tr {display: table-row; margin: 10px;}
.td {display: table-cell; vertical-align: middle;}

/* CORE : SPLASH */
.logo_splash {display: none; width: 300px; height: 300px; background: transparent url('/img/logo-splash.jpeg') 50% 50% no-repeat; background-size: 400px;}

.head_0 {position: fixed; top: 0px; width: 100%; height: 70px; background: #ffffff; box-shadow: 0px 0px 10px #d1d1d1; z-index: 99;}
.head_1 {display: flex; width: 100%; align-items: center; padding: 10px 20px;}

.head_logo {flex: 0 0 200px; width: 100%; height: 50px; background: transparent url('/img/logo-web.png') 50% 50% no-repeat; background-size: cover;}
.head_space_1 {flex: 1 0 auto;}
.head_menu_0 {display: flex; flex: 1 0 auto; text-align: right; justify-content: right;}
.head_menu_1 {display: flex;}
.head_menu_2 {flex: 0 0 auto; padding: 10px 10px; font-weight: bold; cursor: pointer;}
.head_menu_2:hover {border-bottom: 5px solid #d1d1d1;}
.head_menu_2_a {color: #000000; border-bottom: 5px solid #ffffff;}
.head_menu_2_b {border-bottom: 5px solid #333333;}
.head_menu_2_b:hover {border-bottom: 5px solid #333333;}
.head_menu_2_b a {color: #ff4000 !important;}

.head_menu_1_m {display: none; cursor: pointer;}
.head_menu_1_m div {height: 5px; width: 100%; margin: 0px 0px 2px 0px; background: #333333;}

.head_menu_mobile_0 {position: fixed; z-index: 98;
                     background: rgba(255,255,255,0.9); left: 100%;}
.head_menu_mobile_1 {padding: 30px;}
.head_menu_mobile_2 {padding: 10px 20px; font-weight: bold;}
.head_menu_mobile_2_a {color: #000000;}
.head_menu_mobile_2_b {color: #ff4000;}

.body_web_0 {}
.body_web_1 {display: none; width: 100%;}
.body_web_2 {display: table-cell; vertical-align: middle;}

@media screen and (orientation:portrait) {
  .head_menu_1 {display: none;}

  .head_menu_1_m {display: block; height: 30px; width: 30px; padding: 5px 5px 0px 5px; border: 1px solid #333333;}
}

/* ICON */
.icon_office {background: transparent url('/img/icon_office.png') 0% 50% no-repeat; background-size: 20px;}
.icon_wa {background: transparent url('/img/icon_wa.png') 0% 50% no-repeat; background-size: 20px;}
.icon_kontak {background: transparent url('/img/icon_kontak.png') 0% 50% no-repeat; background-size: 20px;}
.icon_ig {background: transparent url('/img/icon_ig.png') 0% 50% no-repeat; background-size: 20px;}
.icon_web {background: transparent url('/img/icon_web.png') 0% 50% no-repeat; background-size: 20px;}

/* BERANDA */
.beranda_0 {width: 100%; text-align: center;}
.beranda_1 {width: 75%; display: inline-block; font-size: 30px; font-weight: bold; margin-bottom: 20px; line-height: normal;}
.beranda_2 {width: 75%; display: inline-block; font-size: 18px; color: #555555;}

/* KONTAK */
.kontak_0 {display: flex; flex-wrap: nowrap; justify-content: center;}
.kontak_1 {flex: 1 0 25%;}
.kontak_2 {flex: 1 0 25%;}
.kontak_3 {flex: 1 0 5%;}
.kontak_4 {flex: 1 0 0%;}
.kontak_5 {flex: 1 0 20%;}

.kontak_title {font-size: 34px; font-weight: bold; margin: 0px 0px 20px 0px; line-height: normal;}
.kontak_konten {padding: 5px 5px 5px 35px;}
.kontak_data {padding-left: 10px;}

.kontak_copy {position: fixed; bottom: 0px; font-size: 10px; line-height: 110%; text-align: center;
              width: 100%; padding: 10px; z-index: 1;}

@media screen and (orientation:portrait) {
  .kontak_0 {flex-wrap: wrap;}
  .kontak_1 {flex: 1 0 80%; margin: 25px 0px;}
  .kontak_2 {flex: 1 0 20%;}
  .kontak_3 {flex: 1 0 00%;}
  .kontak_4 {flex: 1 0 20%;}
  .kontak_5 {flex: 1 0 00%;}
  .kontak_title {}
}

/* JASA */
.jasa_0 {display: flex; flex-wrap: nowrap; justify-content: center;}
.jasa_1 {flex: 1 0 50%; display: flex; flex-wrap: nowrap; justify-content: center;}
.jasa_2 {flex: 1 0 20%;}
.jasa_3 {flex: 1 0 60%;}
.jasa_4 {font-size: 30px; font-weight: bold; margin: 0px 0px 10px 0px; line-height: 100%;}
.jasa_5 {font-size: 18px; color: #555555; margin: 0px 0px 20px 0px;}
.jasa_6 {padding-left: 10px; color: #555555; font-size: 12px;}

@media screen and (orientation:portrait) {
  .jasa_0 {display: flex; flex-wrap: wrap; justify-content: center;}
  .jasa_1 {flex: 1 0 100%; margin: 20px;}
  .jasa_2 {flex: 1 0 5%;}
  .jasa_3 {flex: 1 0 80%;}
}

/* PRODUK */
.produk_0 {display: flex; flex-wrap: nowrap; justify-content: center;}
.produk_1 {flex: 1 0 20%;}
.produk_2 {flex: 1 0 60%;}
.produk_3 {display: flex; flex-wrap: nowrap; justify-content: center;}
.produk_4 {flex: 1 0 100px;}
.produk_5 {flex: 1 0 100%;}
.produk_5 a {color: #1C98D5;}
.produk_5a {margin: 0px 20px 10px 20px; font-size: 18px; font-weight: bold;}
.produk_5b {margin: 0px 20px 10px 20px;}
.produk_5c {margin: 0px 20px 0px 20px;padding-left: 30px;}

.produk_roninpos {width: 100px; height: 100px; border: 0px solid #d1d1d1;
                  background: url('/img/prod-roninpos.png') 50% 50% no-repeat; background-size: cover;}

@media screen and (orientation:portrait) {
  .produk_1 {flex: 1 0 10%;}
}

/* PORTOFOLIO */
.porto_0 {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.porto_1 {border: 0px solid #d1d1d1; margin: 5px 20px; text-align: center;}
.porto_1 img {max-width: 200px; max-height: 100px;}