@font-face {
    font-family: "Oswald-Bold";
    src: url(../fonts/oswald/Oswald-Bold.otf);
    format: "otf";
}

@font-face {
    font-family: "Montserrat-Bold";
    src: url(../fonts/montserrat/Montserrat-Bold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-Light";
    src: url(../fonts/poppins/Poppins-Light.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-BoldItalic";
    src: url(../fonts/poppins/Poppins-BoldItalic.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-Bold";
    src: url(../fonts/poppins/Poppins-Bold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-Italic";
    src: url(../fonts/poppins/Poppins-Italic.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-SemiBoldItalic";
    src: url(../fonts/poppins/Poppins-SemiBoldItalic.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-SemiBold";
    src: url(../fonts/poppins/Poppins-SemiBold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-Medium";
    src: url(../fonts/poppins/Poppins-Medium.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-Regular";
    src: url(../fonts/poppins/Poppins-Regular.ttf);
    format: "ttf";
}

@font-face {
    font-family: "PT Sans Reguler";
    src: url(../fonts/ptsans/pt-sans-reguler.ttf);
    format: "ttf";
}

@font-face {
    font-family: "PT Sans Bold";
    src: url(../fonts/ptsans/pt-sans-bold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Roboto-Italic";
    src: url(../fonts/roboto/Roboto-Italic.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Roboto-Regular";
    src: url(../fonts/roboto/Roboto-Regular.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Roboto-Bold";
    src: url(../fonts/roboto/Roboto-Bold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Roboto-Medium";
    src: url(../fonts/roboto/Roboto-Medium.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Opensans Reguler";
    src: url(../fonts/opensans/OpenSans-Regular.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Opensans Light";
    src: url(../fonts/opensans/OpenSans-Light.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Opensans Semibold";
    src: url(../fonts/opensans/OpenSans-Semibold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Opensans Bold";
    src: url(../fonts/opensans/OpenSans-Bold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Opensans Italic";
    src: url(../fonts/opensans/OpenSans-Italic.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Myriad";
    src: url(../fonts/myriad/Myriad-Pro-Regular.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Myriad Bold";
    src: url(../fonts/myriad/Myriad-Bold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "GoodTimes Bold";
    src: url(../fonts/goodtimes/good-times.ttf);
    format: "ttf";
}

body {
    margin: 0;
    overflow-x: hidden;
}

strong {
    font-family: "Opensans Bold";
}

em {
    font-family: "Opensans Italic";
}

.img {
    display: block;
    width: 100%;
}

.ul {
    padding: 0;
    margin: 0;
}

a, a:hover, a:focus {
    text-decoration: none;
    outline: none;
}

.full-row {
    margin-right: 0px !Important;
    margin-left: 0px !Important;
}

.full-col {
    padding-right: 0px !Important;
    padding-left: 0px !Important;
}

.row-item {
    margin-right: -10px;
    margin-left: -10px;
    font-size: 0px;
}

.col-item {
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    width: 50%;
    font-size: 14px;
}

.pointer {
    cursor: pointer;
}


/* ----- STYLE WEBSITE ----- */
#welcome{
    background: url(background/welcome.png)no-repeat;
    padding-top: 90px;
    padding-bottom: 50px;
    /* height: 35em; */
    background-position: center;
    background-attachment: fixed;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    width: 100%;
}

/*warna button welcome*/
.warna {
    background-color: #156c43;
}

#slide {
    padding-top: 90px;
    padding-bottom: 230px;
    background: url(background/atas.png)no-repeat;
    /* height: 35em; */
    width: 25%;
    height: 700px;
    /* position: absolute; */
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid #7fbd40;
    float: right;
}

header {
    position: relative;
    z-index: 999;
}


.header {
    /* padding: 20px 16px; */
    padding-top: 5px;
    padding-bottom: 0px;
    background: #000;
    color: #828282;
    position: relative;
    /*position: fixed;*/
    width: 100%;
    border-bottom: 2px #3F3F3F solid;
}

.top-header {
    border-bottom: 1px solid #DDD;
    overflow: hidden;
}

.top-header .menu-top-header li {
    display: inline-block;
    /* position: relative;  */
}

.top-header .menu-top-header li:before {
    /* position: absolute; */
    content: '';
    top: 0;
    right: 0;
    width: 1px;
    height: 50px;
    background: #DDD;
}

.top-header .menu-top-header li:last-child:before {
    display: none;
}

.top-header .menu-top-header li a {
    display: block;
    padding: 5px 10px;
    font-family: "Opensans Reguler";
    font-size: 13px;
    color: #666;
}

.top-header .menu-top-header li a:hover {
    color: #888;
}

.top-header .menu-top-header li a .fa {
    margin-right: 3px;
}

.konten-header {
    padding-top: 20px;
}

.tbl-header {
    display: table;
    width: 100%;
}

.tbl-header .tr-header {
    display: table-row;
}

.tbl-header .tr-header .td-header {
    display: table-cell;
    vertical-align: middle;
}

.tbl-header .tr-header.bg-tr-header {
    background: #5599bf;
}

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

.menu ul li {
    display: inline-block;
}

.td-header .kia {
    padding: 20px 20px 20px 20px;
}

.menu ul li a {
    display: block;
    /*padding: 10px 20px 10px 20px;*/
    padding: 20px 20px 20px 20px;
    font-family: "Montserrat-Bold";
    font-size: 17px;
    color: #6E6E6E;
    text-transform: uppercase;
}

.menu ul li a.active {
    color: #F7D069;
    border-bottom: 0px solid #F7D069;
    font-family: "Montserrat-Bold";
    padding-bottom: 25px;
}

.menu ul li a.active:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: #F7D069;
}

.menu ul li a:hover {
    color: #F7D069;
    font-size: 17px;
    font-family: "Montserrat-Bold";
}

.menu ul li a .fa-search {
    border-left: 0px #dddd solid;
    padding-left: 0px;
    padding-right: 0px;
}

.telepon {
    font-family: "Opensans Bold";
    font-size: 20px;
    color: #FF0000;
}

.telepon .fa {
    max-height: 5px;
}

.konten-item-header {
    margin-top: 20px;
}

.konten-menu {
    position: relative;
    /*overflow: hidden;*/
    margin-bottom: -22px;
}

.kategori-menu {
    position: relative;
    width: 250px;
}

.cart-menu {
    width: 300px;
}

.box-kategori-menu {
    padding: 12px;
    background: #333;
    font-family: "Opensans Bold";
    font-size: 14px;
    color: #FFF;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-kategori-menu .fa {
    margin-right: 10px;
    margin-left: 5px;
}

/*** MENU BAR ***/
.menu-topbar {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 999;
}

.menu-topbar li {
    display: block;
}

.menu-topbar li a {
    display: block;
    padding: 7px 15px;
    background: #222;
    font-family: "Opensans Reguler";
    font-size: 13px;
    color: #FFF;
    border-bottom: 1px solid #333;
}

.menu-topbar li a:hover {
    background: #353535;
}

.menu-topbar li a .fa {
    margin-top: 3px;
}
/*** END MENU BAR ***/

#banner {
    position: relative;
    margin-top: -25px;
    z-index: 99;
}

.box-banner {
    margin-right: -5px;
    margin-left: -5px;
    font-size: 0px;
}

.box-banner .item-banner {
    margin-bottom: 10px;
    vertical-align: top;
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    width: 50%;
    font-size: 14px;
}

.box-banner .item-banner-full {
    margin-bottom: 10px;
    vertical-align: top;
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    width: 100%;
    font-size: 14px;
}

/*.tag-konten {
    position: relative;
    margin-bottom: 30px;
    text-align: center;
}*/

/*.tag-konten:before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #DDD;
    transform: translate(0, -50%);
}*/

/*.tag-konten .nama-tag-konten {
    position: relative;
    display: inline-block;
    font-family: "Opensans Bold";
    font-size: 28px;
    color: #4C4C4C;
    z-index: 2;
}*/

/*.tag-konten .nama-tag-konten:before {
    position: absolute;
    content: '';
    left: 50%;
    top: 50%;
    width: 140%;
    height: 2px;
    background: #FFF;
    transform: translate(-50%, -50%);
    z-index: -1;
}*/

.page-top {
    position: relative;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    border: 1px solid #DDD;
}

.page-top .item-hal {
    display: inline-block;
    font-family: "Opensans Reguler";
    font-size: 13px;
    vertical-align: middle;
}

.page-top .item-hal.tag {
    margin-right: 3px;
    font-family: "Opensans Bold";
}

.page-top .item-hal .drop-hal {
    padding: 3px;
    margin-right: 3px;
}

.menu-merk {
    display: none;
    position: absolute;
    left: -1px;
    top: 100%;
}

.menu-merk li {
    display: block;
    width: 100%;
    min-width: 180px;
}

.menu-merk li a {
    display: block;
    padding: 7px 10px;
    background: #5599bf;
    font-family: "Opensans Reguler";
    font-size: 13px;
    color: #FFF;
    border-bottom: 1px solid #5d9ec3;
}

.menu-merk li a:hover {
    background: #75b9df;
}

.sidebar-produk .panel {
    padding: 20px;
    margin-bottom: 20px;
    border: none;
    border: 1px solid #DDD;
    border-radius: 0px;
    box-shadow: none;
}

.sidebar-produk .panel:last-child {
    margin-bottom: 0px;
}

.sidebar-produk .panel-heading {
    padding: 0px;
    background: #FFF;
    font-family: "Opensans Reguler";
    color: #e51d15;
    border: none;
}

.sidebar-produk .panel-heading .panel-title {
    padding-left: 10px;
    font-size: 14px;
    border-left: 3px solid #e51d15;
}

.sidebar-produk .panel-heading .panel-title a {
    display: block;
}

.sidebar-produk .panel-body {
    padding: 0px;
    padding: 10px 15px;
    border: none !Important;
}

.sidebar-produk .sidebar-menu li {
    display: block;
}

.sidebar-produk .sidebar-menu li a {
    display: block;
    padding: 5px 0px;
    font-family: "Opensans Reguler";
    font-size: 12px;
    color: #4c4c4c;
}

.sidebar-produk .sidebar-menu li a:hover {
    color: #5d9ec3;
}

.banner-tiga {
    padding-top: 15px;
}

.box-info-footer .nama-pt {
    margin-bottom: 20px;
    font-family: "Opensans Bold";
    font-size: 25px;
}

.box-info-footer .item-alamat {
    font-family: "Opensans Reguler";
    font-size: 12px;
    color: #747474;
}

.box-info-footer .item-alamat .subitem-alamat {
    margin-bottom: 3px;
}

.box-menu-footer {
    margin-right: -10px;
    margin-left: -10px;
    font-size: 0px;
}

.box-menu-footer .item-menu-footer {
    vertical-align: top;
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    width: 33.33333%;
    font-size: 14px;
}

.box-menu-footer .item-menu-footer .tag-menu-footer {
    margin-bottom: 15px;
    font-family: "Opensans Reguler";
    font-size: 18px;
}

.box-menu-footer .item-menu-footer .menu-footer li {
    display: block;
}

.box-menu-footer .item-menu-footer .menu-footer li a {
    display: block;
    padding: 5px 0px;
    font-family: "Opensans Reguler";
    font-size: 13px;
    color: #747474;
}

.map-halaman {
    padding: 3px 0px;
    border-bottom: 1px solid #DDD;
}

.map-halaman .breadcrumb {
    margin-bottom: 0px;
    font-family: "Opensans Reguler";
    font-size: 13px;
    background: #FFF;
}

.map-halaman .breadcrumb li.active {
    color: #F00;
}

.map-halaman .breadcrumb a {
    color: #333;
}

.map-halaman .breadcrumb a .fa {
    font-size: 16px;
}

.map-khusus {
    padding-top: 30px;
    border-top: 1px solid #EEE;
    border-bottom: none;
}

.map-khusus .breadcrumb {
    padding-bottom: 10px;
    border-bottom: 1px solid #EEE;
    border-radius: 0px;
}

#konten {
    padding-top: 30px;
    padding-bottom: 30px;
}

#kontent {
    padding-top: 1em;
    padding-bottom: 1em;
}

#kontens {
    padding: -top: 30px;
    padding-bottom: 30px
}

.konten-produk .sidebar-produk {
    float: left;
    margin-right: 20px;
    width: 240px;
}

.konten-produk .box-produk {
    float: left;
    width: calc(100%);
    /* width: calc(100% - 360px);  */
}

.tag-produk {
    font-family: "Opensans Reguler";
    font-size: 25px;
    color: #333;
    text-transform: uppercase;
}

.subtag-produk {
    font-family: "Opensans Reguler";
    font-size: 13px;
    color: #a3a3a3;
    text-transform: capitalize;
}

.detail-pro {
    padding-bottom: 30px;
}

.detail-pro .nama-produk {
    margin: 0;
    margin-bottom: 20px;
    font-family: "Opensans Reguler";
    font-size: 30px;
    color: #4c4c4c;
}

.detail-pro .box-katpro {
    padding-left: 13px;
    /* border-left: 5px solid #DDD; */
    margin-bottom: 25px;
}

.detail-pro .box-katpro table {
    margin-bottom: 5px;
}

.detail-pro .box-katpro table td {
    padding: 5px;
    font-family: "Opensans Reguler";
    font-size: 13px;
}

.detail-pro .box-katpro .label-stok {
    display: inline-block;
    padding: 2px 5px;
    margin-left: 5px;
    font-family: "Opensans Bold";
    font-size: 13px;
    color: #FFF;
    background: #5599bf;
    border-radius: 3px;
}

.detail-pro .item-detail-pro {
    padding: 17px 0px;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
}

.detail-pro .item-detail-pro .subisi-produk {
    margin-bottom: 20px;
    font-family: "Opensans Reguler";
    font-size: 13px;
    color: #4e4e4e;
}

.detail-pro .item-detail-pro .harga-produk {
    font-family: "Opensans Bold";
    font-size: 25px;
    color: #d50c03;
}

.detail-pro .box-qty-pro {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #DDD;
}

.detail-pro .qty-left {
    width: 200px;
}

.detail-pro .qty-left .input-group-addon {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right: 5px !important;
    font-size: 14px;
    background: #FFF;
    border-color: transparent;
}

.detail-pro .qty-left .input-group-btn {
    padding-left: 5px;
    padding-right: 5px;
}

.detail-pro .qty-left .input-group-btn .btn {
    border-radius: 0px;
    background: #DDD;
}

.detail-pro .qty-right .share-sosmed li {
    display: inline-block;
    margin-left: 2px;
}

.detail-pro .qty-right .share-sosmed li a {
    display: block;
    padding: 4px 10px;
    font-family: "Opensans Light";
    color: #555;
    border: 1px solid #DDD;
}

.detail-pro .qty-right .share-sosmed li a .fa {
    margin-right: 3px;
}

.detail-pro .qty-right .share-sosmed li a .fa.twt {
    color: #2aaae0;
}

.detail-pro .qty-right .share-sosmed li a .fa.fb {
    color: #3c5a99;
}

.detail-pro .qty-right .share-sosmed li a .fa.gp {
    color: #d62223;
}

.detail-pro .btn-beli-pro {
    display: inline-block;
    padding: 10px 20px;
    font-family: "Opensans Bold";
    font-size: 16px;
    color: #FFF;
    /* background: #333; */
    background: #6fa61f;
    /* border: 1px solid #222; */
    border: 1px solid #6fa61f;
    border-radius: 5px;
}

.detail-pro .btn-beli-pro:hover {
    background: #555;
    border: 1px solid #444;
}

.detail-pro .btn-beli-pro .fa {
    margin-right: 5px;
    font-size: 20px;
}

.detail-pro .btn-beli-pro.active {
    color: #666;
    background: #DDD;
    border: 1px solid #CCC;
}

.box-deskripsi {
    padding: 25px;
    font-family: "Opensans Reguler";
    font-size: 13px;
    border: 5px solid #DDD;
}

.box-deskripsi .tag-deskripsi {
    margin-bottom: 20px;
    font-family: "Opensans Bold";
    font-size: 15px;
    color: #4c4c4c;
}

.box-deskripsi .isi-deskripsi {
    line-height: 22px;
    color: #4e4e4e;
}

.img-produk {
    margin-bottom: 20px;
}

.nama-produk-res {
    margin: 0;
    margin-bottom: 20px;
    font-family: "Opensans Reguler";
    font-size: 30px;
    color: #4c4c4c;
}

/*** KERANJANG ***/
.box-keranjang {
    padding: 20px;
    border: 3px solid rgba(204, 204, 204, 0.5);
}

.box-keranjang .table {
    margin-bottom: 0px;
}

.box-keranjang thead {
    font-family: "Opensans Bold";
    color: #FFF;
    background: #75b9df;
    font-weight: normal;
    border: none !important;
}

.box-keranjang thead th {
    border-bottom: none !important;
}

.box-keranjang tbody td {
    font-family: "Opensans Light";
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    border-top: none !important;
    border-bottom: 1px solid #DDD;
}

.box-keranjang tbody tr:last-child td {
    border-bottom: none;
}

.box-keranjang .detil-pro {
    font-family: "Opensans Reguler";
    font-size: 13px;
}

.vmiddle {
    vertical-align: middle !important;
}

.detail-bayar {
    padding-top: 10px;
    border-top: 2px solid #EEE;
}

.detail-bayar table {
    width: 100%;
}

.detail-bayar table td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border-bottom: none;
}

.detail-bayar table th {
    padding-top: 15px;
    border-top: 1px solid #EEE;
}

.box-cart {
    padding-top: 20px;
}

/*** KERANJANG ***/
/*** LOGIN ***/
.box-login {
    padding: 20px;
    border: 3px solid #DDD;
}

.box-login .tag-login {
    padding-bottom: 15px;
    margin-bottom: 15px;
    font-family: "Opensans Bold";
    color: #444;
    border-bottom: 1px solid #EEE;
}

.box-login label {
    font-family: "Opensans Bold";
    color: #555;
}

.box-login .form-control {
    border-radius: 0px;
    box-shadow: none;
}

.box-login .btn-login {
    width: 100%;
    font-family: "Opensans Bold";
}

.box-login .text-daftar {
    font-family: "Opensans Reguler";
    font-size: 13px;
    color: #666;
}

/*** END LOGIN ***/
/*** MEMBER ***/
.sidebar-member {
    margin-bottom: 30px;
}

.sidebar-member li {
    display: block;
}

.sidebar-member li a {
    display: block;
    padding: 10px 15px;
    font-family: "Opensans Reguler";
    border: 1px solid rgba(204, 204, 204, 0.7);
    border-top: none;
}

.sidebar-member li a:hover {
    color: #FFF;
    background: #5599bf;
    border: 1px solid #5d9ec3;
    border-top: none;
}

.sidebar-member li:first-child a {
    border-top: 1px solid rgba(204, 204, 204, 0.7);
}

.sidebar-member li:first-child a:hover {
    border-top: 1px solid #5599bf;
}

.sidebar-member li.active a {
    color: #FFF;
    background: #5599bf;
    border: 1px solid #5d9ec3;
    border-top: none;
}

.sidebar-member li.active:first-child a {
    border-top: 1px solid #5599bf;
}

.sidebar-member li .fa {
    margin-top: 3px;
}

.sidebar-member ul {
    padding: 0;
}

.tag-konten-member {
    margin-bottom: 8px;
    font-family: "Opensans Light";
    font-size: 22px;
    color: #444;
}

.tagline-konten-member {
    margin-bottom: 25px;
    font-family: "Opensans Reguler";
    font-size: 14px;
    color: #777;
}

.box-item-sorkat {
    margin-bottom: 30px;
}

.item-sorkat {
    display: block;
    padding: 30px 10px;
    background: rgba(204, 204, 204, 0.4);
}

.item-sorkat:hover {
    background: #5599bf;
    transition: 0.2s;
}

.item-sorkat:hover .glyphicon, .item-sorkat:hover .jud-item-sorkat {
    color: #FFF;
    transition: 0.2s;
}

.item-sorkat .glyphicon {
    margin-bottom: 10px;
    font-size: 30px;
    color: #777;
}

.item-sorkat .jud-item-sorkat {
    font-family: "Opensans Light";
    font-size: 22px;
    color: #444;
}

.table-member thead {
    color: #FFF;
    background: #5599bf;
}

.table-member th {
    font-family: "Opensans Semibold";
    border-bottom: none !important;
}

.table-member td {
    font-family: "Opensans Reguler";
}

.bold-idorder {
    font-family: "Opensans Semibold";
    color: #5599bf;
}

.label {
    font-family: "Opensans Reguler";
    font-size: 13px;
    font-weight: normal;
}

.head-invoice {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid rgba(204, 204, 204, 0.6);
}

.tabel-invoice-member {
    margin-bottom: 0px;
    font-family: "Opensans Reguler";
    font-size: 13px;
}

.tabel-invoice-member th, .tabel-invoice-member td {
    font-family: "Opensans Reguler";
    color: #666;
    border: none !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.tabel-invoice-member th {
    font-family: "Opensans Semibold";
    font-weight: normal;
}

.body-invoice table th {
    font-size: 13px;
    font-family: "Opensans Semibold";
}

.body-invoice table td {
    font-size: 13px;
    font-family: "Opensans Reguler";
}

.tag-review {
    margin-bottom: 10px;
    font-family: "Opensans Bold";
    font-size: 24px;
    color: #5599bf;
}

.tag-idorder {
    font-family: "Opensans Reguler";
    font-size: 16px;
    color: #444;
}

.tag-idorder strong {
    font-family: "Opensans Bold";
    font-size: 16px;
    color: #C10000;
}

.text-review {
    margin-bottom: 25px;
    font-family: "Opensans Reguler";
    font-size: 14px;
}

.table-review thead {
    background: #75b9df;
}

.table-review thead th {
    font-family: "Opensans Bold";
    font-size: 18px;
    color: #FFF;
    border-bottom: none !important;
}

.review-nama {
    font-size: 16px;
}

.review-harga {
    font-family: "Opensans Bold";
    font-size: 14px;
    color: #555;
}

.list-review {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid rgba(204, 204, 204, 0.5);
}

.list-review li {
    display: block;
    padding: 10px 15px;
    font-family: "Opensans Light";
    font-size: 18px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.5);
}

.list-review li:last-child {
    border-bottom: none;
}

.list-review li strong {
    font-family: "Opensans Bold";
}

.box-tab {
    padding-top: 30px;
}

.box-logo-bank {
    padding-top: 10px;
}

.box-logo-bank img {
    margin-bottom: 10px;
}

.tag-review-info {
    font-family: "Opensans Bold";
    color: #444;
    margin-bottom: 5px;
}

.list-bank {
    margin-bottom: 15px;
}

.list-bank li {
    padding: 5px 0px;
}

.list-bank li .fa {
    margin-right: 5px;
}

.free-text {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: "Opensans Bold";
}

.alert-payment {
    position: fixed;
    top: 15px;
    left: 50%;
    width: 80%;
    padding: 10px 0;
    color: #0a7f04;
    text-align: center;
    background: #d8fbce;
    border: 1px solid #b2f79f;
    border-radius: 3px;
    transform: translate(-50%, 0);
    z-index: 9999;
}

.text-review-info {
    font-family: "Opensans Reguler";
    font-size: 14px;
    color: #333;
    line-height: 23px;
}

.btn-login {
    width: 100%;
    font-size: 16px;
    padding: 8px 25px;
}

.text-daftar {
    font-family: "Opensans Semibold";
    color: #555;
}

/*** END MEMBER ***/
/*** HUBUNGI KAMI ***/
.box-form label {
    font-family: "OpenSans Bold";
    font-size: 14px;
    color: #5E5E5E;
    font-weight: normal;
}

.box-form .form-control {
    border: 2px solid #E1E3E4;
    box-shadow: none;
    border-radius: 4px;
}

.box-form .form-control:focus {
    border: 2px solid #75b9df;
    transition: 0.2s;
}

.btn-kontak {
    width: 100%;
    padding: 10px 10px;
    font-family: "Opensans Bold";
    color: #FFF;
    background: #5599bf;
    border-color: #5d9ec3;
}

.btn-kontak:hover, .btn-kontak:focus {
    background: #5d9ec3 !important;
    border-color: #5599bf !important;
}

.peta {
    border-bottom: 0px solid rgba(204, 204, 204, 0.5);
    padding-bottom: 0px;
    background: #f2f2f2;
}

.peta iframe {
    display: block;
    pointer-events: none;
}

.tag-kontak {
    font-family: "Opensans Bold";
    font-size: 23px;
    color: #444;
}

.subtag-kontak {
    font-family: "Opensans Reguler";
    font-size: 13px;
    margin-bottom: 15px;
}

.subtag-servis {
    font-family: "Opensans Semibold";
    font-size: 13px;
    margin-bottom: 15px;
    line-height: 22px;
}

.item-kontak {
    margin-bottom: 10px;
}

.tag-item-kontak {
    font-family: "Roboto Reguler";
    font-size: 13px;
}

.isi-item-kontak {
    font-family: "Roboto Reguler";
    font-size: 13px;
    color: #555;
}

/*** END HUBUNGI KAMI ***/
.font-20 {
    font-size: 20px !important;
}

.tgl-picker {
    background: #FFF !important;
}

.control-label {
    font-family: "Opensans Bold";
    color: #666;
}

.detail-alamat {
    margin-bottom: 15px;
}

/*** RESPONSIVE STYLE ***/
/* TOP HEADER */
.top-header-rs {
    padding: 12px 0px;
    background: #191919;
}

.box-header-rs {
    display: block;
    padding: 0px !important;
    margin-bottom: -6px;
}

.ikon-bar {
    display: inline-block;
    width: 35px;
}

.bar {
    display: block;
    width: 100%;
    height: 3px;
    margin-bottom: 4px;
    background: #FFF;
}

.bar:last-child {
    margin-bottom: 0px;
}

/* END TOP HEADER */
/* SIDE MENU */
#side-menu {
    visibility: hidden;
    position: fixed;
    left: -100%;
    top: 0;
    width: 250px;
    height: 100%;
    background: #000;
    z-index: 9999;
    transition: 0.5s;
}

#side-menu:hover {
    overflow-y: scroll;
}

.tag-side-menu {
    padding: 9.5px 15px;
    font-size: 16px;
    color: #ffffff;
    font-family: "Poppins-Regular";
    border-bottom: 2px solid #ffffff;
    cursor: pointer;
}

.tag-side-menu .fa {
    margin-top: 2px;
    font-size: 18px;
}

.info-side-menu {
    padding: 0;
    background: #000;
    border-bottom: 1px solid #ffffff;
}

.info-side-menu li {
    display: block;
}

.info-side-menu li a {
    display: block;
    padding: 8px 15px;
    font-family: "Poppins-Regular";
    font-size: 14px;
    color: #ffffff;
}

.info-side-menu li a .fa {
    margin-right: 5px;
}

.list-side-menu {
    padding: 0;
}

.list-side-menu li {
    display: block;
}

.list-side-menu li.menu-sparate {
    height: auto;
    padding: 8px 15px;
    font-family: "Poppins-Italic";
    font-size: 15px;
    background: #5599bf;
}

.list-side-menu li a {
    display: block;
    padding: 10px 15px;
    color: #FFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.list-side-menu li a.active {
    color: #ffff00;
} 

.list-side-menu li a:hover,
.list-side-menu li a:focus {
    background: #5599bf;
}

.list-side-menu li a .fa {
    margin-right: 5px;
}

/* END SIDE MENU */
/*
    - lg = min-width : 1200px
    - md = min-width : 992px  <> max-width : 1199px;
    - sm = min-width : 768px  <> max-width : 991px;
    - xs = max-width : 767px;
*/
@media (max-width: 1024px) {
    .logo img {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 991px) {
    .logo {
        padding-top: 15px;
        padding-bottom: 15px;
        text-align: center;
    }
    
    .logo img {
        width: 100%;
        max-width: 380px;
    }

    .box-cart-menu {
        font-size: 0px;
    }
    
    .box-cart-menu .ikon-cart {
        margin-right: 0px;
    }

    .kategori-menu {
        width: 45px;
    }

    .cart-menu {
        width: 48px;
    }

    .box-kategori-menu .fa {
        margin-right: 5px;
        margin-left: 5px;
    }

    .menu-topbar {
        width: auto;
        min-width: 220px;
    }
    
    .menu-topbar li {
        display: block;
    }
    
    .menu-topbar li a {
        white-space: nowrap;
    }
    
    .menu-topbar li a .fa {
        display: none;
    }

    .konten-produk .sidebar-produk {
        display: none;
    }

    .konten-produk .box-produk {
        float: none;
        width: 100%;
    }

    .box-pro .item-pro {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 25%;
        font-size: 14px;
    }
}
/* END 991 */

@media (max-width: 768px) {
    .img-list-berita {
        margin-bottom: 15px;
    }
}

@media (max-width: 600px) {
    .box-banner .banner-main {
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
        width: 100%;
        font-size: 14px;
    }

    .box-pro .item-pro {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 33.33333%;
        font-size: 14px;
    }

    .boxpro .item-pro {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 33.33333%;
        font-size: 14px;
    }

    .box-info-footer {
        margin-bottom: 15px;
    }
}

@media (max-width: 534px) {
    .box-pro .item-pro {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 33.33333%;
        font-size: 14px;
    }

    .boxpro .item-pro {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 33.33333%;
        font-size: 14px;
    }

    .tag-konten .nama-tag-konten {
        font-size: 18px;
    }
    
    .tag-konten .nama-tag-konten:before {
        width: 120%;
    }

    .box-testi-home {
        padding: 20px;
    }

    .box-testi-home .tag-testi-home {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .font-20 {
        font-size: 16px !important;
    }

    .box-pro .item-pro {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 50%;
        font-size: 14px;
    }

    .boxpro .item-pro {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 50%;
        font-size: 14px;
    }

    .box-berita {
        margin-right: -15px;
        margin-left: -15px;
        font-size: 0px;
    }
    
    .box-berita .item-berita {
        margin-bottom: 20px;
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 100%;
        font-size: 14px;
    }
    
    .box-berita .item-berita .judul-item-berita {
        font-size: 16px;
    }

    .nama-produk-res {
        font-size: 24px;
    }
}

@media (max-width: 320px) {
    .hidden-320 {
        display: none;
    }

    .box-pro .item-pro {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 100%;
        font-size: 14px;
    }

    .tag-produk {
        font-size: 18px;
    }

    .boxpro .item-pro {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 100%;
        font-size: 14px;
    }
    
    .boxpro .item-pro .judul-pro {
        margin-bottom: 5px;
        height: auto;
        overflow: visible;
    }

    .nama-produk-res {
        font-size: 20px;
    }

    .box-menu-footer .item-menu-footer {
        margin-bottom: 15px;
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 100%;
        font-size: 14px;
    }
    
    .box-menu-footer .item-menu-footer .tag-menu-footer {
        margin-bottom: 8px;
        font-family: "Opensans Reguler";
        font-size: 16px;
    }
}

/* @media (min-width: 992px){
  .konten-image {
    width: 100%;
    background-image: url(background/image.png) no-repeat center center fixed;
  }
} */
/*** END RESPONSIVE STYLE ***/

/*# sourceMappingURL=lwd.style.css.map */
/* tambahan untuk pop up*/
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #fff;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 2;
    /* bottom: 125%; */
    left: 50%;
    /* margin-left: -80px; */
    margin-left: 0px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    /* border-style: solid; */
    border-color: #555 transparent transparent transparent;
}


/*tambahan*/
.dropdown-menu {
    /* position: absolute; */
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    /*min-width: 160px;*/
    min-width: 0px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #000;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.menu .dropdown-menu li {
    width: 100%;
}

.menu .dropdown-menu li a {
    /*display: block;*/
    display: inline-block;
    /*padding: 20px 15px;*/
    padding: 10px 15px;
    clear: both;
    font-family: "Montserrat-Bold";
    font-size: 17px;
    line-height: 1.42857143;
    color: #6E6E6E;
    background: #000;
    white-space: nowrap;
    /*width: 65px;*/
    width: 100%;
}

.menu ul li .dropdown-menu li a:hover {
    background: green;
    color: #F7D069;
}

.menu .dropdown-menu li.active {
    border-bottom: 2px solid #F7D069;
}

.menu ul li .dropdown-menu li a.active {
    color: #F7D069;
    padding: 10px 15px;
    border-bottom: 0px solid #F7D069;
}

.dropdown-menu li .lang {
    display: block;
    padding: 0px 22px;
    clear: both;
    font-weight: 400;
    line-height: 0.428;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu li .flugs {
    margin-right: 0px;
    width: 100%;
}

/*.dropdown-menu li a img, .lang {
    width: 100%;
}*/

/* .dropdown-menu>li>a:hover {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #fff;
    white-space: nowrap;
} */


/*star css-tambahan-13-feb-2019*/
.menu {
    display: flex;
    float: right;
}
.menu li {
    position: relative;
}

/*.menu li:hover > a {
    color: #66b3e3;
}*/

.menu li:hover .submenu {
    visibility: visible;
    top: 100%;
    opacity: 1;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.submenu li a:hover {
    color: #000;
}

.menu li a img {
    margin-right: 3px;
    width: 15px;
}

/* tambahan ade*/
.menu li a img, .icon {
    margin-right: 0px;
    width: 50%;
}

.menu li a .img-search {
    /*max-width: 100%;*/
    width: 100%;
}

.submenu {
    position: absolute;
    visibility: hidden;
    top: 150px;
    left: 0;
    opacity: 0;
    min-width: 100%;
    background: #5c8e5f;
    /* border-top: 5px solid #cf7f40; */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 99;
}

.submenu li:last-child a {
    border-bottom: none;
}

.submenu li a {
    display: block;
    padding: 10px 25px !important;
    font-size: 14px;
    color: #fff;
    text-align: left;
    text-transform: capitalize;
    margin-left: 5px;
    border-bottom: 0px solid #fff;
    white-space: nowrap;
}

.submenu li a:hover {
    background: #5c8e5f;
}
/*end css-tambahan-13-feb-2019*/

/*star css-tambahan-15-feb-2019*/
.ul {
    padding: 0;
    margin: 0;
}

.ul li {
    list-style: none;
}

.ul-inline li {
    display: inline-block;
}


@media (max-width: 1024px) {
    .menu ul li a {
        display: block;
        padding: 20px 20px 20px 20px;
        /*padding: 10px 10px;*/
        text-transform: uppercase;
    }
}


/*star-about-home*/
#about-home {
    padding-top: 60px;
    padding-bottom: 0px;
}

.about-home-one {
    font-size: 12px;
    color: #BB8732;
    font-family: "Poppins-Regular";
    text-transform: uppercase;
    letter-spacing: 3px;
    padding-bottom: 10px;
}

.about-home-one img {
    padding-right: 10px;
    max-width: 100%;
}

.about-home-two {
    font-size: 30px;
    color: #00AB95;
    font-family: "Poppins-Bold";
    padding-bottom: 25px;
    width: 86%;
}

.about-home-trhee {
    font-size: 18px;
    font-family: "Poppins-Regular";
    color: #383838;
    padding-bottom: 30px;
    line-height: 30px;
}


.button-homemore {
    padding: 10px 0px;
    background: none;
    border: none;
    position: relative;
    text-transform: capitalize;
    cursor: pointer;
    height: 50px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.button-homemore span {
    color: #BB8732;
    font-size: 15px;
    font-family: "Roboto-Medium";
    margin-left: 30px;
    position: relative;
    z-index: 999;
}

.button-homemore img {
    max-width: 100%;
    padding-left: 10px;
}

.button-homemore:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: hidden;
    width: 100%;
    border-radius: 50px;
    transition: all .3s ease;
}

.button-homemore:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /*border: 1px solid green;*/
    /*border: 1px solid #ffffff;*/
    background: #E8CA9A;
    transition: transform 0.2s;
    width: 50px;
    border-radius: 50%;
}

.button-homemore:after {
    /*transform: translate(3px, 3px);*/
    transform: inherit;
}

.button-homemore:before {
    transform: translate(-3px, -3px);
}

.button-homemore:hover:after {
    transform: translate(0);
    border: hidden;
    background: no-repeat;
}

.button-homemore:hover span {
    margin-left: 0;
    padding: 10px 15px;
}

.button-homemore:hover:before {
    transform: translate(0);
    /*border: 1px solid #ffffff;*/
    background: #E8CA9A;
    margin-left: 0;
}
/*end-about-home*/

/*star-footer*/
#provide{
    background: url(background/banner-footer.png);
    /* height: 35em; */
    /*background-position: center;
    background-size: 100% 100%;*/
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    /*width: 100%;*/
    /*height: 350px;*/
    background-repeat:no-repeat;
    /*background-size:100% 100%;*/
    /*background-position:center;*/
    /*padding: 5%;*/
    /*background-size: auto;*/
    padding-top: 5%;
    padding-bottom: 5%;
}

.footer-your {
    font-family: "PT Sans Bold";
    font-size: 18px;
    color: #ffffff;
    padding-top: 7%;
    padding-bottom: 5px;
    display: block;
    text-align: center;
    text-transform: uppercase;
}


@media only screen and (max-width: 991px) and (min-width: 320px)  {
    #provide {
        background: url(background/banner-footer.png);
        background-repeat:no-repeat;
        background-size: auto !important;
        padding-top: 5% !important;
        padding-bottom: 5% !important;
    }
}

@media only screen and (max-width: 480px) {
    .footer-your {
        font-family: "PT Sans Bold";
        font-size: 18px;
        color: #ffffff;
        padding-top: 37% !important;
        padding-bottom: 5px;
        display: block;
        text-align: center;
        text-transform: uppercase;
    }
}

@media only screen and (max-width: 767px) {
    .footer-your {
        font-family: "PT Sans Bold";
        font-size: 18px;
        color: #ffffff;
        padding-top: 25% !important;
        padding-bottom: 5px;
        display: block;
        text-align: center;
        text-transform: uppercase;
    }
}


.text-email-footer {
    font-family: "PT Sans Reguler";
    font-size: 14px;
    color: #ffffff;
    padding-top: 5px;
    padding-bottom: 15px;
    display: block;
    text-align: center;
}

div.col-sm-8 .form-search {
    border: 1px solid #e5e5e5;
    /* padding: 10px; */
    padding: 15px;
    border-radius: 20px;
    position: relative;
    background: #fff;
}

div.col-sm-8 .form-search input[type="email"] {
    border-style: none;
    width: 100%;
    background: #ffffff;
    color: #bebebe;
    font-size: 14px;
    font-family: "Roboto Reguler";
}

div.col-sm-8 .form-search .input-search {
    border-radius: 20px;
    padding: 13px 15px;
    background-color: #059ff8;
    position: absolute;
    right: 3px;
    top: 3px;
}

div.col-sm-8 .form-search .input-search button {
    background-color: transparent;
    border-style: none;
    color: #ffffff;
    font-family: "Roboto Bold";
    font-size: 12px;
    text-transform: uppercase;
}

.footer-alamat {
    font-family: "Roboto Reguler";
    font-size: 13px;
    color: #fffefe;
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    text-align: center;
}
/*end-footer*/

/*star-text-contact*/
.text-contact {
    padding-top: 10px;
    text-align: center;
    font-size: 50px;
    color: #923677;
    font-family: "Roboto Bold";
}

@media only screen and (max-width: 480px) {
    .text-contact {
        font-size: 45px;
    }
}

.question-contact {
    font-size: 18px;
    font-family: "Roboto Reguler";
}
/*end-text-contact*/


/*star-bread-info*/
.text-page-info {
    padding-top: 10px;
    text-align: left;
    font-size: 50px;
    color: #923677;
    font-family: "Roboto Bold";
}

.map-khusus-info {
    padding-top: 0px;
    border-top: 1px solid #f2f2f2;
    border-bottom: none;
}

.map-halaman-info {
    padding: 3px 0px;
    border-bottom: 1px solid #f2f2f2;
}

.breadcrumb-info {
    padding: 8px 0px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: left;
}

.breadcrumb-info>li {
    display: inline-block;
}

.map-khusus-info .breadcrumb-info {
    padding-bottom: 10px;
    border-bottom: 0px solid #f2f2f2;
    border-radius: 0px;
}

.map-halaman-info .breadcrumb-info {
    margin-bottom: 0px;
    font-family: "Opensans Reguler";
    font-size: 13px;
    background: #f2f2f2;
}

.map-halaman-info .breadcrumb-info a {
    color: #a2a2a2;
    font-size: 13px;
    font-family: "Roboto Reguler";
}

.breadcrumb-info>li+li:before {
    padding: 0 5px;
    color: #a2a2a2;
    content: "/\00a0";
}
/*end-bread-info*/

/*star-box-info*/
.box-info {
    margin-right: -15px;
    margin-left: -15px;
    font-size: 0px; }
    .item-info {
    margin-bottom: 30px;
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    width: 33.33333%;
    font-size: 14px;
    vertical-align: top;
}

.i-info {
    background: #f2f2f2;
}

.konten-item-info {
    padding: 0px;
}

.judul-item-info {
    margin-bottom: 20px;
    margin-top: 10px;
    /*min-height: 100px;*/
}

.judul-item-info a {
    font-family: "Roboto Bold";
    font-size: 22px;
    color: #3a3a3a;
    font-feature-settings: "salt";
    -webkit-font-feature-settings: "salt";
    -o-font-feature-settings: "salt";
    -moz-font-feature-settings: "salt";
    -ms-font-feature-settings: "salt";
}

.tool-item-info {
    margin-bottom: 0px;
    padding-top: 15px;
}

.tool-item-info li {
    margin-right: 10px;
    font-family: "Roboto Reguler";
    font-size: 13px;
    color: #a2a2a2;
}

.tool-item-info li:last-child {
    margin-right: 0;
}

.tool-item-info li .fa {
    margin-right: 5px;
}

.summary-info {
    font-size: 16px !important;
    color: #313131 !important;
    font-family: "Roboto Reguler";
    text-align: justify;
}


/*star @media*/
@media only screen and (max-width: 767px) {
    .item-info {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 50%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 480px) {
    .item-info {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 991px) {
    .judul-item-info {
        margin-bottom: 15px;
        margin-top: 10px;
    }

    .judul-item-info a {
        font-size: 14px;
    }

    .tool-item-info li {
        margin-right: 5px;
        font-size: 12px;
    }
    
    .tool-item-info li .fa {
        margin-right: 3px;
    }
    .summary-info {
        font-size: 13px !important;
        color: #313131 !important;
        font-family: "Roboto Reguler";
        text-align: justify;
    }
}
/*end-box-info*/

/*star-info-detail*/
.text-area-info {
    text-align: justify;
    display: inline-block;
    font-family: "Opensans Reguler";
    font-size: 16px;
}
/*end-info-detail*/

/*star-pagination*/
/*** PAGINATION ***/
.box-page {
    /*margin-bottom: 20px;*/
    padding-bottom: 70px;
    clear: both;
    text-align: center;
}

.box-page .pagination {
    font-size: 0px;
    margin: 0px !Important;
}

.box-page li {
    float: none;
    display: inline-block;
}

.box-page li a {
    display: block;
    margin-right: 10px;
    font-family: "Opensans Reguler";
    font-size: 13px;
    border-radius: 3px;
}

.page-produk {
    padding-top: 20px;
    margin-top: 10px;
    /* border-top: 4px solid #DDD;  */
}

/*** END PAGINATION ***/
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 2;
    color: #303030;
    cursor: default;
    background-color: #F7D069;
    border-color: #F7D069;
    font-family: "Poppins-Regular";
    font-size: 13px;
    border-radius: 50%;
}

.pagination>li.active:first-child>a, .pagination>li.active:first-child>span {
    border-radius: 50%;
}

.pagination>li.active:last-child>a, .pagination>li.active:last-child>span {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-radius: 50%;
}

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #DFDFDF;
    text-decoration: none;
    background-color: #000;
    border: 0px solid #ddd;
    font-family: "Poppins-Regular";
    font-size: 13px;
}

.pagination>li>a:hover, .pagination>li>a:focus {
    background: transparent;
    color: #DFDFDF;
}
/*end-pagination*/

/*star-text-discover*/
.judul-area {
    text-align: center;
}

.container .judul-area p {
    margin-bottom: 0px;
    padding-bottom: 25px;
    /*border-bottom: 1px solid #dadada;*/
    font-size: 40px;
    font-weight: bold;
    color: #8f3870;
    font-family: "Raleway Bold";
    text-transform: uppercase;
}

.container .judul-area .after {
    position: absolute;
    content: "";
    top: -70px;
    height: 4px;
    left: 50%;
    /*width: 30%;*/
    /*background: #565656;*/
    text-transform: capitalize;
    /*z-index: -99;*/
    z-index: 3;
    display: inline;
    opacity: 0.5;
    color: #22222226;
    font-size: 11.5rem;
    font-family: "Roboto Bold";
    transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}


@media only screen and (max-width: 480px) {
    .container .judul-area p {
        margin-bottom: 0px;
        padding-bottom: 25px;
        /* border-bottom: 1px solid #dadada; */
        font-size: 20px;
        font-weight: bold;
        color: #626063;
        font-family: "Raleway Bold";
        text-transform: uppercase;
    }
    .container .judul-area .after {
        position: absolute;
        content: "";
        top: -30px;
        height: 4px;
        left: 50%;
        /*width: 30%;*/
        /*background: #565656;*/
        text-transform: uppercase;
        /*z-index: -99;*/
        z-index: 3;
        display: inline;
        opacity: 0.5;
        color: #22222226;
        font-size: 5.5rem;
        font-family: "Roboto Bold";
        transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
    }
}

@media only screen and (max-width: 600px) {
    .container .judul-area p {
        margin-bottom: 0px;
        padding-bottom: 25px;
        /* border-bottom: 1px solid #dadada; */
        font-size: 20px;
        font-weight: bold;
        color: #626063;
        font-family: "Raleway Bold";
        text-transform: uppercase;
    }
    .container .judul-area .after {
        position: absolute;
        content: "";
        top: -30px;
        height: 4px;
        left: 50%;
        /*width: 30%;*/
        /*background: #565656;*/
        text-transform: uppercase;
        /*z-index: -99;*/
        z-index: 3;
        display: inline;
        opacity: 0.5;
        color: #22222226;
        font-size: 5.5rem;
        font-family: "Roboto Bold";
        transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
    }
}

@media only screen and (max-width: 767px) {
    .container .judul-area p {
        margin-bottom: 0px;
        padding-bottom: 25px;
        /* border-bottom: 1px solid #dadada; */
        font-size: 20px;
        font-weight: bold;
        color: #626063;
        font-family: "Raleway Bold";
        text-transform: uppercase;
    }
    .container .judul-area .after {
        position: absolute;
        content: "";
        top: -30px;
        height: 4px;
        left: 50%;
        /*width: 30%;*/
        /*background: #565656;*/
        text-transform: uppercase;
        /*z-index: -99;*/
        z-index: 3;
        display: inline;
        opacity: 0.5;
        color: #22222226;
        font-size: 5.5rem;
        font-family: "Roboto Bold";
        transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
    }
}


.btn-read-follow {
    color: #464646;
    background-color: #f2f2f2;
    border-color: #f2f2f2;
    margin-top: 16px;
    font-family: "PT Sans Bold";
}

.btn-follow {
    display: inline-block;
    padding: 10px 50px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #464646;
    border-radius: 15px;
}
/*end-text-discover*/

/*star-text-kat*/
.text-kat {
    display: block;
    color: #923677;
    font-size: 30px;
    font-family: "Roboto Bold";
    padding-top: 15px;
    /*text-align: center;*/
    text-transform: capitalize;
}

.text-kat-detail {
    display: block;
    color: #923677;
    font-size: 30px;
    font-family: "Roboto Bold";
    padding-top: 15px;
    text-align: center;
    text-transform: capitalize;
}

.text-related {
    display: block;
    color: #923677;
    font-size: 30px;
    font-family: "Roboto Bold";
    padding-top: 15px;
    text-transform: capitalize;
}
/*star-text-kat*/


#modal-search .modal-header {
    background-color: #0095d4 !important;
    color: white;
}

/*css whatsapp scrollTop*/
.scrolltop {
    position: fixed;
    left: 0px;
    bottom: 15px;
    /* bottom: 0px; */
    color: #fff;
    /* background: #33b323; */
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 7px 7px 7px 7px;
    z-index: 99999999;
}

@media only screen and (max-width: 1024px) {
    .scrolltop {
        position: fixed;
        left: 0px;
        bottom: 15px;
        /* bottom: 0px; */
        color: #fff;
        /* background: #33b323; */
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-top: 5px;
        border-radius: 7px 7px 7px 7px;
        z-index: 99999999;
    }
}
/*css whatsapp scrollTop*/


/* Toggle this class - hide and show the popup */
/*.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}*/

/* Add animation (fade in the popup) */
/*@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}*/

/*@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}*/
/* tambahan untuk pop up*/
/* The Modal (background) */
/*.modal {
   display: none;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
}*/

/* Modal Content/Box */
/*.modal-content {
     background-color: #fefefe;
     margin: 15% auto;
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
}*/

/* The Close Button */
/*.close {
     color: #aaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
}

.close:hover,
.close:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
}

.open>.dropdown-menu {
    display: flex;
}*/

.slider{
    position:relative;
}
.slide-helpext {
    position: absolute;
    top: 30%;
    /*left: 60px;*/
    left: 12%;
    color: #ffffff;
    font-size: 50px;
    z-index: 999999;
    font-family: "Roboto Bold";
}

.slide-helpext p {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 26px;
    font-family: "PT Sans Reguler";
    width: 35%;
    text-align: justify;
}


@media (max-width: 399px) and (min-width: 320px) {
    .slide-helpext {
        position: absolute !important;
        top: 5% !important;
        /* left: 60px; */
        left: 12% !important;
        color: #ffffff !important;
        font-size: 25px !important;
        z-index: 999999 !important;
        font-family: "Roboto Bold";
    }
    .slide-helpext p {
        font-size: 10px !important;
        color: #ffffff !important;
        margin-bottom: 10px !important;
        line-height: 15px !important;
        font-family: "PT Sans Reguler";
        width: 80% !important;
        text-align: justify !important;
        z-index: 999999 !important;
    }
}

@media (max-width: 600px) and (min-width: 400px) {
    .slide-helpext {
        position: absolute !important;
        top: 10% !important;
        left: 12% !important;
        color: #ffffff !important;
        font-size: 30px !important;
        z-index: 999999 !important;
        font-family: "Roboto Bold";
    }
    .slide-helpext p {
        font-size: 12px !important;
        color: #ffffff !important;
        margin-bottom: 10px !important;
        line-height: 20px !important;
        font-family: "PT Sans Reguler";
        width: 80% !important;
        text-align: justify!important;
    }
}

/*@media screen and (max-width: 600px) {
  .slide-helpext {
      position: absolute;
      top: 10% !important;
      left: 12%;
      color: #ffffff;
      font-size: 36px;
      z-index: 999999;
      font-family: "Roboto Bold";
  }
}*/

@media (max-width: 768px) {
    .slide-helpext {
        position: absolute;
        /*top: 5%;*/
        top: 10%;
        left: 12%;
        color: #ffffff;
        font-size: 36px;
        z-index: 999999;
        font-family: "Roboto Bold";
    }
    .slide-helpext p {
        font-size: 16px;
        color: #ffffff;
        margin-bottom: 10px;
        line-height: 20px;
        font-family: "PT Sans Reguler";
        width: 80%;
        text-align: justify;
    }
}

@media (max-width: 991px) and (min-width: 769px)  {
    .slide-helpext {
        position: absolute;
        top: 15%;
        left: 12%;
        color: #ffffff;
        font-size: 38px;
        z-index: 999999;
        font-family: "Roboto Bold";
    }
    .slide-helpext p {
        font-size: 20px !important;
        color: #ffffff !important;
        margin-bottom: 10px !important;
        line-height: 26px !important;
        font-family: "PT Sans Reguler";
        width: 80% !important;
        text-align: justify !important;
        z-index: 999999 !important;
    }
}

@media (max-width: 600px) {}

/*.open>.dropdown-menu {
    display: flex;
}*/

/*.wrap-banner .home-carve .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: green;
    font-size: 30px;
}*/

/*tabulasi-detail*/
#konten-fitur {
    background: #f2f2f2;
    padding-top: 25px;
    padding-bottom: 25px;
}

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

@media only screen and (max-width: 480px) {
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
        font-size: 14px !important;
    }

    .nav-tabs>li>a {
        font-size: 14px !important;
    }
}

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

/**/
.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid #653a3a00;
    border-radius: 4px 4px 0 0;
    background: #f2f2f2;
    color: #000;
    font-family: "Roboto Bold";
    font-size: 20px;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #923677;
    cursor: default;
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
    border-bottom-color: transparent;
    font-weight: bold;
    font-family: "Roboto Bold";
    font-size: 20px;
    /*border-bottom: 3px #923677 solid;*/
}

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: #fff;
    background-color: #000;
    color: #fff;
}

.nav-tabs {
    border-bottom: 0px solid #ddd;
}

.konten-tabulasi {
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 25px;
    font-family: "Roboto Reguler";
    font-size: 18px;
}
/*tabulasi-detail*/

/*star-subcat-page*/
.menusubnav {
    padding: 0px;
}

.menusubnav li {
    margin-top: 0px;
    padding: 0;
    list-style: none;
}

.menusubnav a {
    margin-left: 0px;
    margin: 0px;
    padding: 10px;
    display: block;
    border-bottom: 1px solid #e0e0e0;
    font-family: "Roboto Bold";
    font-size: 16px;
    text-decoration: none;
    color: #3a3a3a;
}

.menusubnav a:hover{
    background-color:#af8dd8;
}

.menusubnav .active {
    outline:none;
    color: #ffffff;
    border-color:#cda2bb;
    background-color: #cda2bb;
    /*box-shadow:0 0 10px #923677;*/
}

@media only screen and (max-width: 480px) {
    .menusubnav a {
        font-size: 12px !important;
    }
}
/*star-subcat-page*/

/*a-hover-layanan-kami*/
/*.lay-kami {
    padding-top: 0px;
    font-size: 26px;
    color: #ffffff;
    padding-bottom: 10px;
}*/

.lay-industri-atas {
    padding-top: 0px;
    font-size: 15px;
    color: #00AB95;
    padding-bottom: 10px;
    font-family: "Poppins-SemiBold";
}

.lay-industri {
    padding-bottom: 7px;
}

.lay-industri a {
    display: contents;
    color: #828282;
    font-size: 14px;
    margin-left: 20px;
    /*line-height: 30px;*/
    font-family: "Poppins-Regular";
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.lay-industri a:hover{
    color : #828282;
}

.lay-lingkup-atas {
    padding-top: 0px;
    font-size: 26px;
    color: #000;
    padding-bottom: 10px;
}

.lay-lingkup a {
    display: list-item;
    color: #000;
    font-size: 16px;
    margin-left: 20px;
    line-height: 30px;
    font-family: "Roboto Light";
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.lay-lingkup a:hover{
    /*background-color: #2cb742;*/
    color : yellow;
}

#collapseExamplex:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}

#collapseExamples:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}

#collapseExamplex {
    width: 100%;
    height: auto;
    background: #ffffff;
    /*display: none;*/
    position: absolute;
    /*opacity: 80%;*/
}

#collapseExamples {
    width: 100%;
    height: auto;
    background: #b34788;
    display: none;
    position: absolute;
    opacity: 80%;
}

#contains {
    display:none;
    width: 100%;
    height: 293px;
    position: absolute;
    background: #ffffff;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/*#contains:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}*/

.well {
    min-height: 20px;
    padding: 19px 0px 19px 0px;
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.05);
    box-shadow: inset 0 0px 0px rgba(0,0,0,.05);
    margin-top: 35px;
}
/*a-hover-layanan-kami*/

/*star-slider-carousel*/
.carousel-caption {
    position: absolute;
    bottom: 43%;
    text-align: center;
    z-index: 10;
    color: #ffffff;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.carousel-caption .cartext {
    font-size: 60px;
    color: #ffffff;
    font-family: "Oswald-Bold";
    text-transform: uppercase;
    padding-bottom: 10px;
    line-height: 65px;
}

.carousel-caption .cardesc {
    font-size: 16px;
    font-family: "Oswald-Bold";
}

@media screen and (min-width: 1366px) {
    .carousel-caption {
        bottom: 43%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 60px;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        color: #ffffff;
    }
    .carousel-caption .cardesc {
        font-size: 20px;
        font-family: "Oswald-Bold";
    }
}

@media screen and (min-width: 1200px) {
    .carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 1200px) {
    .carousel-caption {
        bottom: 43%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 35px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 40px;
    }
}

@media (max-width: 1024px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 40%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 35px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 40px;
    }
}

@media (max-width: 991px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 38%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 35px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 40px;
    }
}

@media (max-width: 950px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 38%;
        text-align: center;
    }

    .carousel-caption .cartext {
        font-size: 35px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 40px;
    }
}

@media (max-width: 900px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 38%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 30px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 34px;
    }
}

@media (max-width: 850px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 37%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 30px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 34px;
    }
}

@media (max-width: 800px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 39%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 30px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 34px;
    }
}

@media (max-width: 750px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 37%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 30px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 34px;
    }
}

@media (max-width: 700px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 37%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 30px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 34px;
    }
}

/*@media (max-width: 650px) {
    .carousel-caption {
        display: none;
    }
}*/

@media (max-width: 650px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 35%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 30px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 34px;
    }
}

@media (max-width: 600px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 35%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 25px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 28px;
    }
}

@media (max-width: 550px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 33%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 25px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 28px;
    }
}

@media (max-width: 500px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 33%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 25px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 28px;
    }
}

@media (max-width: 480px) {
    .carousel-caption {
        /*bottom: 43%;*/
        bottom: 33%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 25px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 28px;
    }
}

@media (max-width: 450px) {
    .carousel-caption {
        bottom: 29%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 22px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 35px;
    }
}

@media (max-width: 400px) {
    .carousel-caption {
        bottom: 26%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 18px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 35px;
    }
}

@media (max-width: 375px) {
    .carousel-caption {
        bottom: 26%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 17px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 35px;
    }
}

@media (max-width: 320px) {
    /*.carousel-caption {
        display: none;
    }*/
    .carousel-caption {
        bottom: 23%;
        text-align: center;
    }
    .carousel-caption .cartext {
        font-size: 16px;
        color: #ffffff;
        font-family: "Oswald-Bold";
        padding-bottom: 10px;
        line-height: 35px;
    }
}
/*end-slider-carousel*/

/*star-carier-title*/
/*.panel-default>.panel-heading {
    color: #ffffff;
    background-color: #923677;
    border-color: #923677;
    font-family: "Roboto Reguler";
}

.panel-heading {
    padding: 13px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #f2f2f2;
}

.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: 1px solid #f2f2f2;
    background: #f2f2f2;
}

.panel-body p {
    font-size: 15px;
    line-height: 26px;
    color: #5a6169;
    font-family: "Roboto Reguler";
}

.alert-dangers {
    color: #ffffff;
    background-color: #923677;
    border-color: #923677;
}

.alert-carier {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}*/
/*end-carier-title*/

/*star-tabs-carier*/
/*.tabs-cv ul {
    border: none;
}

.tabs-cv ul li {
    margin-right: 5px;
}

.tabs-cv ul li:hover, .tabs-cv ul li.active {
    border-bottom: 5px solid #923677;
}

.tabs-cv ul li a {
    display: inline-block;
    padding: 10px;
    text-decoration: none;
    color: black;
}

.tabs-cv ul li a:hover {
    background: #923677;
}

.mb-4, .my-4 {
    margin-bottom: 30px!important
}

.mb-3, .my-3 {
    margin-bottom: 1rem!important;
    padding-left: 0px;
    padding-right: 0px;
}

.mt-4, .my-4 {
    margin-top: 1.5rem!important;
}

.cv-box {
    padding: 10px;
    border: 1px dashed #50599a;
}

.cv-box h4 {
    padding-bottom: 10px;
    border-bottom: 1px dashed #50599a;
}

.cv-box .form-control {
    border-radius: 0px;
    border: 1px solid #923677;
    background: #f2f2f2;
}

.cv-box label {
    color: black;
    font-family: "Roboto Bold";
    font-size: 15px;
    display: inline-block;
}

.btn-ungu {
    color: #fff;
    background-color: #923677;
    border-color: #923677;
}

.butons {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 7px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-grape {
    background-color: #923677 !important;
    color: white !important;
    border-radius: 17px !important;
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
}

.btn-grape.flat {
    border-radius: 7px !important;
}

.form-inlines {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

textarea.form-control {
    height: auto;
}*/
/*end-tabs-carier*/

/*star-karir*/
#karir {
    padding-top: 30px;
    padding-bottom: 30px;
}

.karirteks {
    font-size: 25px;
    color: #2A1616;
    font-family: "Poppins-Bold";
}

.borderkarir {
    border-bottom: 1px #C1C1C1 solid;
    padding-top: 30px;
    padding-bottom: 20px;
}

.borderkarir:last-child {
    border-bottom: none;
}

.karir-teks1 {
    font-size: 25px;
    color: #00AB95;
    font-family: "Poppins-SemiBold";
    line-height: 28px;
    padding-bottom: 5px;
}

.karir-teks2 {
    font-size: 15px;
    color: #8A8A8A;
    font-family: "Roboto-Italic";
    padding-bottom: 5px;
}

.karir-teks3 {
    color: #313131;
    font-size: 16px;
    font-family: "Poppins-Regular";
    line-height: 26px;
}

.karir-teks3 p {
    color: #313131;
    font-size: 16px;
    font-family: "Poppins-Regular";
    margin-bottom: 5px;
    line-height: 26px;
}

#karirs-info {
    background: url(background/karir-img.png) no-repeat;
    padding-top: 0px;
    padding-bottom: 0;
    background-position: center;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    width: 100%;
    height: auto;
    background-size: cover;
}

#karirs-info .karir-info {
    padding-top: 35px;
    padding-bottom: 35px;
    color: #ffffff;
    width: 80%;
    font-size: 20px;
    font-family: "Poppins-Italic";
}

.karir-info span {
    color: #ffffff;
    font-size: 20px;
    font-family: "Poppins-BoldItalic";
}

#karirs-info .karir-info span.ingredient {
    color: #ffffff;
    font-size: 20px;
    font-family: "Poppins-BoldItalic";
}

#karirs-info .karir-info  a {
    color: #ffffff;
    font-size: 20px;
    font-family: "Poppins-BoldItalic";
}


@media (max-width: 400px) {
    #karirs-info .karir-info {
        width: 100%;
        font-size: 16px;
    }

    #karirs-info .karir-info  a {
        font-size: 16px;
    }
}

@media (max-width: 375px) {
    #karirs-info .karir-info {
        width: 100%;
        font-size: 15px;
    }

    #karirs-info .karir-info  a {
        font-size: 15px;
    }
}

@media (max-width: 365px) {
    #karirs-info .karir-info {
        width: 100%;
        font-size: 15px;
    }

    #karirs-info .karir-info  a {
        font-size: 15px;
    }
}

@media (max-width: 320px) {
    #karirs-info .karir-info {
        width: 100%;
        font-size: 15px;
    }

    #karirs-info .karir-info  a {
        font-size: 15px;
    }
}
/*end-karir*/

.pull-right-btn {
    float: right;
    text-align: right;
}

.float-right {
    float: right !important;
}

/*==================slider-css===================================
/*===============================================================*/

/* =========================================================================
  2.SITE PRELOADER & TOOLS
============================================================================ */
/* ==========================================================================
  3. HEADER STYLE.
============================================================================= */

/*********************************************
  Custom slider options
**********************************************/

@-webkit-keyframes bounce {
    0% {
        transform:translateY(0%);
    }
    50% {
        transform:translateY(-30%);
    }
    100% {
        transform:translateY(0);
    }
}

/* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
    0% {
        transform:translateY(0%);
    }
    50% {
        transform:translateY(-30%);
    }
    100% {
        transform:translateY(0);
    }
}

/* Opera 12.0 */
@-o-keyframes bounce {
    0% {
        transform:translateY(0%);
    }
    50% {
        transform:translateY(-30%);
    }
    100% {
        transform:translateY(0);
    }
}

/* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
    0% {
        transform:translateY(0%);
    }
    50% {
        transform:translateY(-30%);
    }
    100% {
        transform:translateY(0);
    }
}
/*==================slider-css===================================*/


/*star-bread-kontak*/
.map-khusus-kontak {
    padding-top: 0px;
    border-top: 1px solid #f2f2f2;
    border-bottom: none;
}

.map-halaman-kontak {
    padding: 5px 0px;
    border-bottom: 1px solid #EEEEEE;
}

.breadcrumb-kontak {
    padding: 8px 0px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: left;
}

.breadcrumb-kontak>li {
    display: inline-block;
}

.breadcrumb-kontak>li.active a {
    color: #BB8732;
}


.map-khusus-kontak .breadcrumb-kontak {
    padding-bottom: 10px;
    border-bottom: 0px solid #f2f2f2;
    border-radius: 0px;
}

.map-halaman-kontak .breadcrumb-kontak {
    margin-bottom: 0px;
    font-family: "Poppins-Regular";
    font-size: 12px;
    background: #ffffff;
}

.map-halaman-kontak .breadcrumb-kontak a {
    color: #CCCCCC;
    font-size: 12px;
    font-family: "Poppins-Regular";
    /*letter-spacing: 5px;*/
}

.breadcrumb-kontak>li+li:before {
    padding: 0 0px;
    color: #C1C1C1;
    content: "/\00a0";
}
/*end-bread-kontak*/

/*star-box-kontaks*/
.box-kontak label {
    font-size: 15px;
    color: #383838;
    font-family: "Poppins-Regular";
    font-weight: normal;
    padding: 10px 0px;
}

.box-kontak .form-controls {
    display: block;
    width: 100%;
    padding: 10px 0px;
    font-size: 16px;
    line-height: 1.5;
    color: #777777;
    background-color: transparent;
    background-clip: padding-box;
    /*border: 1px solid #efefef;*/
    border-bottom: 2px solid #EFEFEF;
    /*border-radius: 10px;*/
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-family: "Poppins-Light";
}

.kontak-touch {
    font-size: 25px;
    color: #2A1616;
    font-family: "Poppins-Bold";
    padding-bottom: 30px;
}

.kontak-please {
    font-size: 16px;
    color: #383838;
    font-family: "Poppins-Regular";
    width: 88%;
    padding-bottom: 45px;
}

.contact-almt {
    padding-bottom: 10px;
    color: #383838;
    font-family: "Poppins-Regular";
    font-size: 16px;
}

.contact-text-almt {
    text-transform: inherit;
    padding-bottom: 15px;
    color: #383838;
    font-size: 22px;
    font-family: "Poppins-Regular";
}

.box-kontaks {
    margin-right: -15px;
    margin-left: -15px;
    font-size: 0px;
    padding-top: 0px;
}

.item-kontaks {
    margin-bottom: 5px;
    display: inline-block;
    width: 100%;
    font-size: 14px;
    vertical-align: top;
}

.i-kontaks {
    display: block;
    padding: 10px;
    border: 0px solid #EEE;
}

/*.i-kontaks:hover {
    border-color: #de1a32;
    box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.2);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}*/

.i-kontaks:hover h4 {
    color: #0b3277;
}

.i-kontaks img {
    float: left;
    width: 50px;
}

.i-kontaks .img {
    float: left;
    /* width: 100px; */
    width: 50px;
    height: 50px;
    border: 1px #ddd solid;
    border-radius: 50%;
    margin-top: 5px;
}

.i-kontaks .img .fa-phone {
    padding: 17px 17px 17px 17px;
    color: #00AB95;
}

.i-kontaks .img .fa-fax {
    padding: 17px 17px 17px 17px;
    color: #00AB95;
}

.i-kontaks .img .fa-envelope {
    padding: 17px 17px 17px 17px;
    color: #00AB95;
}

.konten-item-kontaks {
    float: left;
    margin-left: 20px;
    /*width: calc(100% - 120px);*/
    width: calc(100% - 75px);
}

.konten-item-kontaks h4 {
    margin-bottom: 5px;
    font-family: "Poppins-Regular";
    color: #383838;
    font-size: 13px;
}

.konten-item-kontaks span {
    display: block;
    margin-bottom: 3px;
    font-family: "Poppins-Medium";
    font-size: 20px;
    color: #00AB95;
}

.konten-item-kontaks span:last-child {
    margin-bottom: 0;
}

.konten-item-kontaks span .fa {
    margin-right: 5px;
}


@media only screen and (max-width: 1199px) {
    .i-kontaks {
        padding: 10px;
    }
  
    .i-kontaks img {
        width: 50px;
    }

    .konten-item-kontaks {
        margin-left: 15px;
        width: calc(100% - 90px);
    }
    
    .konten-item-kontaks h4 {
        margin-bottom: 5px;
        font-size: 13px;
    }

    .konten-item-kontaks span {
        font-size: 12px;
    }
}


@media only screen and (max-width: 991px) {
    .item-kontaks {
        display: inline-block;
        /*padding-right: 15px;*/
        /*padding-left: 15px;*/
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 600px) {
    .box-kontaks {
        margin-right: -5px;
        margin-left: -5px;
        font-size: 0px;
        padding-bottom: 10px;
    }

    .item-kontaks {
        margin-bottom: 10px;
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
        /*width: 50%;*/
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 480px) {
    .item-kontaks {
        margin-bottom: 15px;
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 320px) {
    .i-kontaks img {
        width: 60px;
    }

    .konten-item-kontaks {
        width: calc(100% - 80px);
    }
    
    .konten-item-kontaks h4 {
        margin-bottom: 5px;
        font-size: 12px;
    }
}
/*end-box-kontaks*/

/*star-button-abouthome*/
.button-abouthome {
    padding: 10px 0px;
    background: none;
    border: none;
    position: relative;
    text-transform: capitalize;
    cursor: pointer;
    height: 50px;
    margin-top: 35px;
    margin-bottom: 35px;
}

.button-abouthome span {
    color: #BB8732;
    font-size: 15px;
    font-family: "Roboto-Medium";
    margin-left: 30px;
    position: relative;
    z-index: 999;
}

.button-abouthome:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: hidden;
    width: 100%;
    border-radius: 50px;
    transition: all .3s ease;
}

.button-abouthome:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /*border: 1px solid green;*/
    /*border: 1px solid #E8CA9A;*/
    background: #E8CA9A;
    transition: transform 0.2s;
    width: 50px;
    border-radius: 50%;
}

.button-abouthome:after {
    /*transform: translate(3px, 3px);*/
    transform: inherit;
}

.button-abouthome:before {
    transform: translate(-3px, -3px);
}

.button-abouthome:hover:after {
    transform: translate(0);
    border: hidden;
    background: no-repeat;
}

.button-abouthome:hover span {
    margin-left: 0;
    padding: 10px 15px;
}

.button-abouthome:hover:before {
    transform: translate(0);
    /*border: 1px solid yellow;*/
    background: #E8CA9A;
    margin-left: 0;
}
/*end-button-abouthome*/

/*star-bread-about*/
.map-khusus-about {
    padding-top: 0px;
    border-top: 1px solid #f2f2f2;
    border-bottom: none;
}

.map-halaman-about {
    padding: 5px 0px;
    border-bottom: 1px solid #EEEEEE;
}

.breadcrumb-about {
    padding: 8px 0px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: left;
}

.breadcrumb-about>li {
    display: inline-block;
}

.breadcrumb-about>li.active a {
    color: #BB8732;
}

.map-khusus-about .breadcrumb-about {
    padding-bottom: 10px;
    border-bottom: 0px solid #f2f2f2;
    border-radius: 0px;
}

.map-halaman-about .breadcrumb-about {
    margin-bottom: 0px;
    font-family: "Poppins-Regular";
    font-size: 12px;
    background: #ffffff;
}

.map-halaman-about .breadcrumb-about a {
    color: #CCCCCC;
    font-size: 12px;
    font-family: "Poppins-Regular";
}

.breadcrumb-about>li+li:before {
    padding: 0 0px;
    color: #C1C1C1;
    content: "/\00a0";
}
/*end-bread-about*/

/*star-bread-career*/
.map-khusus-career {
    padding-top: 0px;
    border-top: 1px solid #f2f2f2;
    border-bottom: none;
}

.map-halaman-career {
    padding: 5px 0px;
    border-bottom: 1px solid #EEEEEE;
}

.breadcrumb-career {
    padding: 8px 0px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: left;
}

.breadcrumb-career>li {
    display: inline-block;
}

.breadcrumb-career>li.active a {
    color: #BB8732;
}

.map-khusus-career .breadcrumb-career {
    padding-bottom: 10px;
    border-bottom: 0px solid #f2f2f2;
    border-radius: 0px;
}

.map-halaman-career .breadcrumb-career {
    margin-bottom: 0px;
    font-family: "Poppins-Regular";
    font-size: 12px;
    background: #ffffff;
}

.map-halaman-career .breadcrumb-career a {
    color: #CCCCCC;
    font-size: 12px;
    font-family: "Poppins-Regular";
}

.breadcrumb-career>li+li:before {
    padding: 0 0px;
    color: #C1C1C1;
    content: "/\00a0";
}
/*end-bread-career*/

/*star-bread-search*/
.map-khusus-search {
    padding-top: 0px;
    border-top: 1px solid #f2f2f2;
    border-bottom: none;
}

.map-halaman-search {
    padding: 5px 0px;
    border-bottom: 1px solid #EEEEEE;
}

.breadcrumb-search {
    padding: 8px 0px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: left;
}

.breadcrumb-search>li {
    display: inline-block;
}

.breadcrumb-search>li.active a {
    color: #BB8732;
}

.map-khusus-search .breadcrumb-search {
    padding-bottom: 10px;
    border-bottom: 0px solid #f2f2f2;
    border-radius: 0px;
}

.map-halaman-search .breadcrumb-search {
    margin-bottom: 0px;
    font-family: "Poppins-Regular";
    font-size: 12px;
    background: #ffffff;
}

.map-halaman-search .breadcrumb-search li {
    color: #BB8732;
    font-size: 12px;
    font-family: "Poppins-Regular";
}

.map-halaman-search .breadcrumb-search a {
    color: #CCCCCC;
    font-size: 12px;
    font-family: "Poppins-Regular";
}

.breadcrumb-search>li+li:before {
    padding: 0 0px;
    color: #C1C1C1;
    content: "/\00a0";
}
/*end-bread-search*/

/*star-bread-produk*/
.map-khusus-produk {
    padding-top: 0px;
    border-top: 1px solid #f2f2f2;
    border-bottom: none;
}

.map-halaman-produk {
    padding: 5px 0px;
    border-bottom: 1px solid #EEEEEE;
}

.breadcrumb-produk {
    padding: 8px 0px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: left;
}

.breadcrumb-produk>li {
    display: inline-block;
}

.breadcrumb-produk>li.active a {
    color: #BB8732;
}

.map-khusus-produk .breadcrumb-produk {
    padding-bottom: 10px;
    border-bottom: 0px solid #f2f2f2;
    border-radius: 0px;
}

.map-halaman-produk .breadcrumb-produk {
    margin-bottom: 0px;
    font-family: "Poppins-Regular";
    font-size: 12px;
    background: #ffffff;
}

.map-halaman-produk .breadcrumb-produk a {
    color: #CCCCCC;
    font-size: 12px;
    font-family: "Poppins-Regular";
}

.breadcrumb-produk>li+li:before {
    padding: 0 0px;
    color: #C1C1C1;
    content: "/\00a0";
}
/*end-bread-produk*/

/*star-prodsub*/
.prodsub {
    font-size: 35px;
    color: #00AB95;
    font-family: "Poppins-Bold";
    padding-bottom: 25px;
    text-align: center;
}

.prodsub-text {
    font-size: 16px;
    color: #383838;
    font-family: "Poppins-Regular";
    padding-bottom: 10px;
    text-align: center;   
}


.wrap-news-home {
    margin-top: 40px;
}

.item-news-home {
    display: block;
    margin-bottom: 15px;
    width: 100%;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-news-home:hover img {
    opacity: .8;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-news-home a {
    display: block;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.wrap-news {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px;
    margin-top: 40px;
}

.item-news {
    display: block;
    padding: 0 15px 15px 15px;
    width: calc(100% / 2);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    position: relative;
}

/*.item-news:hover img {
    opacity: .8;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}*/

.item-news a {
    display: grid;
    /*box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);*/
}

.img-item-news {
    position: relative;
}

.img-item-news span {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 0;
    padding-left: 25px;
    width: 90%;
    font-size: 0.8125rem;
    color: #1d4286;
    background: #fff;
}

.content-item-news {
    /*padding: 15px 25px;*/
    padding-top: 15px;
    padding-bottom: 15px;
    background-image: linear-gradient(to left, #00AB95, #6884D2);
    /*height: 70px;*/
}

.content-item-news .news-text {
    font-family: "Poppins-Bold";
    font-size: 20px;
    color: #ffffff;
    padding-top: 5px;
}

.content-item-news .news-text .left {
    /*display: contents;*/
    float: right;
}

.content-item-news .news-text .left .fa-file-pdf-o {
    padding-right: 10px;
}

@media (max-width: 1024px) {
    .content-item-news .news-text .left {
        float: none;
    }
}

.left .btn-primary {
    color: #fff;
    background-color: transparent;
    border-color: #ffffff;
}

.left .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 15px;
    font-family: "Poppins-Regular";
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #ffffff;
    border-radius: 10px;
}

.cta {
    position: relative;
    margin: auto;
    /*padding: 7px 22px;*/
    padding: 10px 12px 10px 15px;
    transition: all .2s ease;
    height: 40px;
    float: right;
}

.cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 50%;
    /*background: #A6DEEF;*/
    border: 1px solid #7AD6CB;
    width: 40px;
    height: 40px;
    transition: all .3s ease;
}
 
/*.cta span {
    position: relative;
    font-size: 15px;
    line-height: 18px;
    text-transform: capitalize;
    vertical-align: middle;
    color: #282A75;
    font-family: "Roboto-Medium";
}*/

.cta .fa-long-arrow-right {
    position: relative;
    color: #7AD6CB;
}

/*.cta:hover {
    width: 55%;
    background: #A6DEEF;
    border-radius: 50px;
    display: inline-block;
}*/

@media (max-width: 991px) {
    .item-news {
        width: calc(100% / 2);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 20px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 900px) {
    .item-news {
        width: calc(100% / 2);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 20px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 850px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 20px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 800px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 20px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 700px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 20px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 650px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 20px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 600px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 550px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 500px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 375px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 365px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

@media (max-width: 320px) {
    .item-news {
        width: calc(100% / 1);
        padding-bottom: 25px;
    }

    .content-item-news {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content-item-news .news-text {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .cta {
        padding: 5px 10px 5px 10px;
        float: none;
    }

    .cta:before {
        width: 30px;
        height: 30px;
    }

    .cta .fa-long-arrow-right {
        font-size: 13px;
    }
}

.cta:active {
    transform: scale(.96);
}
/*end-prodsub*/

/*star-subprodsub*/
.subprodsub {
    font-size: 25px;
    color: #2A1616;
    font-family: "Poppins-Bold";
    padding-top: 30px;
    padding-bottom: 20px;
}

.subprodsub-text {
    font-size: 16px;
    color: #383838;
    font-family: "Poppins-Regular";
    padding-bottom: 25px;
}

.subprodsub-text p {
    font-size: 16px;
    color: #383838;
    font-family: "Poppins-Regular";
    margin: revert;
    line-height: 28px;
}


.table-responsive {
    min-height: .01%;
    overflow-x: auto;
    padding-bottom: 30px;
}

.table>thead>tr>th {
    background-color: #00AB95;
    border-bottom: 0px solid #ddd;
    color: #ffffff;
    font-size: 16px;
    font-family: "Poppins-SemiBold";
    padding: 20px;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th, .table>thead>tr>td {
    padding: 20px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 0px solid #ddd;
    color: #2A1616;
    font-size: 16px;
    font-family: "Poppins-Regular";
}

.table-responsive .btn-info {
    color: #828282;
    background-color: transparent;
    border-color: #828282;
}

.table-responsive .btn:hover {
    background-image: linear-gradient(to left, #BB8732, #E8CA9A);
    border: hidden;
    color: #ffffff;
}

.table-responsive .btn {
    display: inline-block;
    padding: 12px 12px 12px 12px;
    margin-bottom: 0;
    font-size: 16px;
    font-family: "Poppins-Regular";
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #828282;
    border-radius: 20px;
}

.table-responsive .btn .fa-long-arrow-right {
    padding-left: 15px;
}  
/*end-subprodsub*/

/*star-prod-detail*/
#prod-detail {
    padding-top: 20px;
    padding-bottom: 45px;
}

.prod-range {
    float: right;
    padding-bottom: 20px;
}

.prod-detail-one {
    font-size: 25px;
    color: #2A1616;
    font-family: "Poppins-Bold";
    padding-bottom: 20px;
}

.prod-detail-two {
    font-size: 16px;
    color: #343B42;
    font-family: "Poppins-SemiBold";
    padding-top: 10px;
    padding-bottom: 10px;
}

.prod-detail-trhee {
    font-size: 16px;
    color: #2A1616;
    font-family: "Poppins-Regular";
    padding-top: 10px;
    padding-bottom: 10px;
}

.btnrange-info {
    color: #2F2F2F;
    background-color: #ffffff;
    border-color: #ffffff;
    text-transform: uppercase;
}

.btnrange {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 15px;
    font-family: "Poppins-Light";
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btnrange .fa-long-arrow-left {
    padding-right: 15px;
    color: #00AB95;
}

.prod-further {
    font-size: 16px;
    color: #383838;
    font-family: "Poppins-Regular";
    padding-top: 30px;
}

.prod-further a {
    font-size: 16px;
    color: #00AB95;
    font-family: "Poppins-SemiBoldItalic";
}


@media (max-width: 991px) {
    .prod-range {
        float: left;
    }
}

@media (max-width: 900px) {
    .prod-range {
        float: left;
    }
}

@media (max-width: 800px) {
    .prod-range {
        float: left;
    }
}

@media (max-width: 700px) {
    .prod-range {
        float: left;
    }
}

@media (max-width: 600px) {
    .prod-range {
        float: left;
    }
}

@media (max-width: 500px) {
    .prod-range {
        float: left;
    }
}

@media (max-width: 400px) {
    .prod-range {
        float: left;
    }
}

@media (max-width: 375px) {
    .prod-range {
        float: left;
    }
}

@media (max-width: 365px) {
    .prod-range {
        float: left;
    }
}

@media (max-width: 320px) {
    .prod-range {
        float: left;
    }
}

/**/
.item-fitur {
    margin-bottom: 0px;
    display: inline-block;
    width: 100%;
    font-size: 14px;
    vertical-align: top;
}

.i-fitur {
    display: block;
    padding: 10px 10px 10px 0px;
    border: 0px solid #EEE;
}

.i-fitur:hover h4 {
    color: #0b3277;
}

.i-fitur img {
    float: left;
    width: 50px;
}

.i-fitur .img {
    float: left;
    /* width: 100px; */
    width: 42px;
    height: 42px;
    border: 2px #00AB95 solid;
    border-radius: 50%;
    margin-top: 5px;
}

.i-fitur .img .fa-file-pdf-o {
    padding: 7px 9px 9px 10px;
    color: #00AB95;
    font-size: 24px;
}

.i-fitur .img .fa-fax {
    padding: 17px 17px 17px 17px;
    color: #00AB95;
}

.i-fitur .img .fa-envelope {
    padding: 17px 17px 17px 17px;
    color: #00AB95;
}

.konten-item-fitur {
    float: left;
    margin-left: 20px;
    /*width: calc(100% - 120px);*/
    width: calc(100% - 75px);
}

.konten-item-fitur span {
    display: block;
    margin-bottom: 3px;
    font-family: "Poppins-SemiBold";
    font-size: 16px;
    padding-top: 15px;
    color: #00AB95;
}

.konten-item-fitur span:last-child {
    margin-bottom: 0;
}

.konten-item-fitur span .fa {
    margin-right: 5px;
}


@media only screen and (max-width: 1199px) {
    .i-fitur {
        padding: 10px;
    }
  
    .i-fitur img {
        width: 50px;
    }

    .konten-item-fitur {
        margin-left: 15px;
        width: calc(100% - 90px);
    }

    .konten-item-fitur span {
        font-size: 12px;
    }
}

@media only screen and (max-width: 991px) {
    .item-fitur {
        display: inline-block;
        /*padding-right: 15px;*/
        /*padding-left: 15px;*/
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 600px) {
    .box-fitur {
        margin-right: -5px;
        margin-left: -5px;
        font-size: 0px;
        padding-bottom: 10px;
    }

    .item-fitur {
        margin-bottom: 10px;
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
        /*width: 50%;*/
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 480px) {
    .item-fitur {
        margin-bottom: 15px;
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 320px) {
    .i-fitur img {
        width: 60px;
    }

    .konten-item-fitur {
        width: calc(100% - 80px);
    }
    
    .konten-item-fitur h4 {
        margin-bottom: 5px;
        font-size: 12px;
    }
}
/**/
/*end-prod-detail*/

/*star-minHeight*/
.container.minHeight:after, .minHeight .row:after {
    clear: none;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, 
.col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, 
.col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, 
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, 
.col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, 
.col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        min-height: 0;   
}

@media (max-width: 1124px) {
    .container.minHeight:after, .container.minHeight:before, .minHeight .row:after {
        clear: none;
        min-height: 0;
    }
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
    }
    .container.minHeight:after, .minHeight .row:after {
        clear: none;
        min-height: 0;
    }
}

@media (max-width: 991px) {
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
    }
    .container.minHeight:after, .minHeight .row:after {
        clear: none;
    }
}

@media (max-width: 900px) {
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
    }
    .container.minHeight:after, .minHeight .row:after {
        clear: none;
    }
}

@media (max-width: 800px) {
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
    }
    .container.minHeight:after, .minHeight .row:after {
        clear: none;
    }
}

@media (max-width: 700px) {
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
    }
    .container.minHeight:after, .minHeight .row:after {
        clear: none;
    }
}

@media (max-width: 600px) {
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
    }
    .container.minHeight:after, .minHeight .row:after {
        clear: none;
    }
}

@media (max-width: 500px) {
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
    }
    .container.minHeight:after, .minHeight .row:after {
        clear: none;
    }
}

@media (max-width: 400px) {
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
    }
    .container.minHeight:after, .minHeight .row:after {
        clear: none;
    }
}

@media (max-width: 375px) {
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
    }
    .container.minHeight:after, .minHeight .row:after {
        clear: none;
    }
}

@media (max-width: 365px) {
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
    }
    .container.minHeight:after, .minHeight .row:after {
        clear: none;
    }
}

@media (max-width: 320px) {
    .container.minHeight .col-md-1, .container.minHeight .col-md-10 {
        min-height: 0;
        clear: none;
    }
    .container.minHeight:after, .container.minHeight .row:after, .container.minHeight .row:before {
        clear: none;
    }
}
/*end-minHeight*/

/*star-prodkat*/
.i-prodkat div img {
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    padding-bottom: 25px;
}

.i-prodkat div img {
    height: auto;
    padding-top: 35px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}

.i-prodkat div img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

#prodkat {
    padding-top: 10px;
    padding-bottom: 100px;
    background: #000;
}

.prodkat {
    margin-bottom: 20px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    /*width: 33.33333%;*/
    width: 31%;
    vertical-align: top;
    text-align: center;
    border: 1px solid #707070;
}

.prodkat:hover {
    color: #F7D069;
    border: 1px solid #F7D069;
}

.i-prodkat {
    /*display: block;*/
    display: inline-block;
    padding: 20px;
    /*min-height: 70px;*/
    color: #ffffff;
    font-size: 18px;
    font-family: "Poppins-Bold";
    border: 0px solid #EEE;
    /*background-image: linear-gradient(to left, #00AB95, #6884D2);*/
}

.i-prodkat:hover {
    color: #F7D069;
    border-color: #F7D069;
    box-shadow: 0px 3px 13px rgb(0 0 0 / 20%);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

@media (max-width: 1200px) {
    .prodkat {
        width: 30%;
    }
}

@media (max-width: 1024px) {
    .prodkat {
        width: 30%;
    }
}

@media (max-width: 991px) {
    .prodkat {
        width: 46%;
    }
}

@media (max-width: 900px) {
    .prodkat {
        width: 46%;
    }
}

@media (max-width: 850px) {
    .prodkat {
        width: 46%;
    }
}

@media (max-width: 800px) {
    .prodkat {
        width: 46%;
    }
}

@media (max-width: 750px) {
    .prodkat {
        width: 46%;
    }
    .i-prodkat div img {
        width: 55%;
    }
}

@media (max-width: 700px) {
    .prodkat {
        width: 46%;
    }
    .i-prodkat div img {
        width: 55%;
    }
}

@media (max-width: 650px) {
    .prodkat {
        width: 46%;
    }
    .i-prodkat div img {
        width: 55%;
    }
}

@media (max-width: 600px) {
    .prodkat {
        width: 55%;
    }
    .i-prodkat div img {
        width: 55%;
    }
}

@media (max-width: 550px) {
    .prodkat {
        width: 60%;
    }
    .i-prodkat div img {
        width: 55%;
    }
}

@media (max-width: 500px) {
    .prodkat {
        width: 70%;
    }
    .i-prodkat div img {
        width: 55%;
    }
    .i-prodkat {
        font-size: 15px;
    }
}

@media (max-width: 468px) {
    .prodkat {
        width: 90%;
    }
    .i-prodkat div img {
        width: 55%;
    }
    .i-prodkat {
        font-size: 15px;
    }
}

@media (max-width: 450px) {
    .prodkat {
        width: 90%;
    }
    .i-prodkat div img {
        width: 55%;
    }
    .i-prodkat {
        font-size: 11px;
    }
}

@media (max-width: 400px) {
    .prodkat {
        width: 90%;
    }
    .i-prodkat div img {
        width: 55%;
    }
    .i-prodkat {
        font-size: 11px;
    }
}

@media (max-width: 375px) {
    .prodkat {
        width: 95%;
    }
}

@media (max-width: 365px) {
    .prodkat {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .i-prodkat {
        font-size: 15px;
    }
}

@media (max-width: 320px) {
    .prodkat {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .i-prodkat {
        font-size: 15px;
    }
}
/*end-prodkat*/

/*star-prodSub*/
.i-prodSub div img {
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  padding-bottom: 25px;
}

.i-prodSub div img {
    height: auto;
    padding-top: 35px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}

.i-prodSub div img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}

#prodSub {
    padding-top: 30px;
    padding-bottom: 25px;
    background: #000;
}

.prodSub {
    margin-bottom: 20px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    /*width: 33.33333%;*/
    width: 31%;
    vertical-align: top;
    text-align: center;
    border: 1px solid #707070;
}

.prodSub:hover {
    color: #F7D069;
    border: 1px solid #F7D069;
}

.i-prodSub {
    /*display: block;*/
    display: inline-block;
    padding: 20px;
    /*min-height: 70px;*/
    font-size: 14px;
    font-family: "Poppins-Bold";
    border: 0px solid #EEE;
    color: #D2D3D3;
    /*background-image: linear-gradient(to left, #00AB95, #6884D2);*/
}

.i-prodSub:hover {
    color: #F7D069;
    border-color: #F7D069;
    box-shadow: 0px 3px 13px rgb(0 0 0 / 20%);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

@media (max-width: 1200px) {
    .prodSub {
        width: 30%;
    }
}

@media (max-width: 1024px) {
    .prodSub {
        width: 30%;
    }
}

@media (max-width: 991px) {
    .prodSub {
        width: 46%;
    }
}

@media (max-width: 900px) {
    .prodSub {
        width: 46%;
    }
}

@media (max-width: 850px) {
    .prodSub {
        width: 46%;
    }
}

@media (max-width: 800px) {
    .prodSub {
        width: 46%;
    }
}

@media (max-width: 750px) {
    .prodSub {
        width: 46%;
    }
    .i-prodSub div img {
        width: 55%;
    }
}

@media (max-width: 700px) {
    .prodSub {
        width: 46%;
    }
    .i-prodSub div img {
        width: 55%;
    }
}

@media (max-width: 650px) {
    .prodSub {
        width: 46%;
    }
    .i-prodSub div img {
        width: 55%;
    }
}

@media (max-width: 600px) {
    .prodSub {
        width: 45%;
    }
    .i-prodSub div img {
        width: 55%;
    }
}

@media (max-width: 550px) {
    .prodSub {
        width: 45%;
    }
    .i-prodSub div img {
        width: 55%;
    }
}

@media (max-width: 500px) {
    .prodSub {
        width: 44%;
    }
    .i-prodSub div img {
        width: 55%;
    }
    .i-prodSub {
        font-size: 15px;
    }
}

@media (max-width: 468px) {
    .prodSub {
        width: 44%;
    }
    .i-prodSub div img {
        width: 55%;
    }
    .i-prodSub {
        font-size: 15px;
    }
}

@media (max-width: 450px) {
    .prodSub {
        width: 43%;
    }
    .i-prodSub div img {
        width: 55%;
    }
    .i-prodSub {
        font-size: 11px;
    }
}

@media (max-width: 400px) {
    .prodSub {
        width: 43%;
    }
    .i-prodSub div img {
        width: 55%;
    }
    .i-prodSub {
        font-size: 11px;
    }
}

@media (max-width: 375px) {
    .prodSub {
        width: 43%;
    }
}

@media (max-width: 365px) {
    .prodSub {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .i-prodSub {
        font-size: 15px;
    }
}

@media (max-width: 320px) {
    .prodSub {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .i-prodSub {
        font-size: 15px;
    }
}
/*end-prodSub*/

/*star-prodFound*/
#prodFound {
    background: #000;
}

.container.prodFounds {
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #707070;
}

.prodFound {
    color: #C2C2C2;
    font-family: "Poppins-Regular";
    font-size: 15px;
}

.prodFound span {
    color: #C2C2C2;
    font-family: "Poppins-Bold";
    font-size: 15px;
}
/*end-prodFound*/

/*star-dropbtn*/
.dropbtn {
    background-color: #000;
    color: #F7D069;
    padding: 0px 16px 0px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-family: "Poppins-Regular";
}

.dropbtn .fa-plus {
    padding-left: 15px;
    font-size: 12px;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #000;
}

.dropdown {
    position: relative;
    display: inline-block;
    float: right;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 37px;
    background-color: #ffffff;
    min-width: 310px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: #040404;
    font-size: 15px;
    font-family: "Poppins-Medium";
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #707070;
}

.dropdown a:hover {
    background-color: #F7D069;
    color: #040404;
}

.show {
    display: block;
}

@media (max-width: 991px) {
    .dropdown {
        float: none;
        padding-top: 15px;
    }
    .prodFound {
        padding-left: 16px;
    }
    .dropdown-content {
        top: 52px;
    }
}

@media (max-width: 900px) {
    .dropdown {
        float: none;
    }
}

@media (max-width: 800px) {
    .dropdown {
        float: none;
    }
}

@media (max-width: 700px) {
    .dropdown {
        float: none;
    }
}

@media (max-width: 600px) {
    .dropdown {
        float: none;
    }
}

@media (max-width: 500px) {
    .dropdown {
        float: none;
    }
}

@media (max-width: 4000px) {}

@media (max-width: 375px) {}

@media (max-width: 365px) {
    .dropbtn {
        font-size: 14px;
    }
    .dropdown-content {
        top: 52px;
        min-width: 303px;
    }
}

@media (max-width: 320px) {
    .prodFound {
        font-size: 14px;
        padding-right: 16px;
    }
    .dropbtn {
        font-size: 13px;
    }
    .dropdown-content {
        top: 52px;
        min-width: 270px;
    }
}
/*end-dropbtn*/

/*star-contSub*/
.contSub {
    position: relative;
    text-align: center;
    color: white;
}

.contSub .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #3F3F3F;
    font-size: 20px;
    font-family: "Poppins-Light";
    text-transform: uppercase;
}

.contSub .centered p {
    color: #3F3F3F;
    font-family: "Poppins-Bold";
    font-size: 40px;
    padding-top: 5px;
}

@media (max-width: 800px) {
    .contSub .centered {
        font-size: 16px;
    }
    .contSub .centered p {
        font-size: 26px;
        line-height: 30px;
    }
}

@media (max-width: 750px) {
    .contSub .centered {
        font-size: 16px;
    }
    .contSub .centered p {
        font-size: 26px;
        line-height: 30px;
    }
}

@media (max-width: 700px) {
    .contSub .centered {
        font-size: 16px;
    }
    .contSub .centered p {
        font-size: 26px;
        line-height: 30px;
    }
}

@media (max-width: 650px) {
    .contSub .centered {
        font-size: 16px;
    }
    .contSub .centered p {
        font-size: 26px;
        line-height: 30px;
    }
}

@media (max-width: 600px) {
    .contSub .centered {
        font-size: 16px;
    }
    .contSub .centered p {
        font-size: 26px;
        line-height: 30px;
    }
}

@media (max-width: 550px) {
    .contSub .centered {
        font-size: 16px;
    }
    .contSub .centered p {
        font-size: 26px;
        line-height: 30px;
    }
}

@media (max-width: 500px) {
    .contSub .centered {
        font-size: 16px;
    }
    .contSub .centered p {
        font-size: 26px;
        line-height: 30px;
    }
}

@media (max-width: 450px) {
    .contSub .centered {
        display: none;
    }
}

@media (max-width: 400px) {
    .contSub .centered {
        display: none;
    }
}

@media (max-width: 375px) {
    .contSub .centered {
        display: none;
    }
}

@media (max-width: 365px) {
    .contSub .centered {
        display: none;
    }
}

@media (max-width: 320px) {
    .contSub .centered {
        display: none;
    }
}
/*end-contSub*/

/*star-alerts*/
.alerts-danger {
    color: #000;
    background: #bbb8b8;
    border-color: #bbb8b8;
}

.alerts {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-family: "Poppins-Medium";
}
/*end-alerts*/

/*star-prodsearch*/
.prodsearch {
    margin-bottom: 30px;
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    /*width: 33.33333%;*/
    width: 33%;
    vertical-align: top;
}

.prodsearch a {
    font-size: 14px;
    color: #ffffff;
    font-family: "Poppins-Regular";
}

.i-prodsearch {
    display: block;
    padding: 20px;
    min-height: 80px;
    /*border: 1px solid #EEE;*/
    background-image: linear-gradient(to left, #00AB95, #6884D2);
}

.i-prodsearch:hover {
    border-color: #ffffff;
    box-shadow: 0px 3px 13px rgb(0 0 0 / 20%);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}


@media (max-width: 991px) {
    .prodsearch {
        width: 49%;
    }
}

@media (max-width: 900px) {
    .prodsearch {
        width: 49%;
    }
}

@media (max-width: 850px) {
    .prodsearch {
        width: 49%;
    }
}

@media (max-width: 800px) {
    .prodsearch {
        width: 49%;
    }
}

@media (max-width: 750px) {
    .prodsearch {
        width: 49%;
    }
}

@media (max-width: 700px) {
    .prodsearch {
        width: 49%;
    }
}

@media (max-width: 650px) {
    .prodsearch {
        width: 49%;
    }
}

@media (max-width: 600px) {
    .prodsearch {
        width: 100%;
    }
}

@media (max-width: 550px) {
    .prodsearch {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .prodsearch {
        width: 100%;
    }
}

@media (max-width: 450px) {
    .prodsearch {
        width: 100%;
    }
}

@media (max-width: 375px) {
    .prodsearch {
        width: 100%;
    }
}

@media (max-width: 365px) {
    .prodsearch {
        width: 100%;
    }
}

@media (max-width: 320px) {
    .prodsearch {
        width: 100%;
    }
}
/*end-prodsearch*/

/*star-prodshow*/
.prodshow-text {
    font-size: 16px;
    color: #BB8732;
    font-family: "Poppins-Regular";
    padding-bottom: 10px;
    text-align: center;
}

.prodshow {
    text-align: center;
    padding-bottom: 40px;
}

.btnshow-primary {
    color: #fff;
    background-color: #BB8732;
    border-color: #BB8732;
}

.btnshow-primary:hover {
    color: #fff;
}

.btnshow {
    display: inline-block;
    padding: 10px 15px 10px 15px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 50%;
}
/*end-prodshow*/

/*star-prodfilter*/
.prodfilter .contain-chk {
    /*display: block;*/
    display: inline-block;
    position: relative;
    padding-left: 35px !important;
    margin-bottom: 12px;
    padding-bottom: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: normal;
    color: #535353;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    /*width: 100px;*/
    width: 15%;
}


@media only screen and (max-width: 1365px) and (min-width: 1025px)  {
    .prodfilter .contain-chk {
        width: 23%;
    }
}

@media (max-width: 1024px) {
    .prodfilter .contain-chk {
        width: 35%;
    }
}

@media (max-width: 550px) {
    .prodfilter .contain-chk {
        width: 48%;
    }
}

@media (max-width: 500px) {
    .prodfilter .contain-chk {
        width: 48%;
    }
}

@media (max-width: 450px) {
    .prodfilter .contain-chk {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .prodfilter .contain-chk {
        width: 100%;
    }
}

@media (max-width: 320px) {
    .prodfilter .contain-chk {
        width: 100%;
    }
}


.prodfilter .contain-chk a {
    color: #2A1616;
    font-size: 16px;
    font-family: "Poppins-Regular";
}

.prodfilter .contain-chk input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.prodfilter .checkmark.active {
    position: absolute;
    top: -2px;
    left: 0;
    height: 25px;
    width: 25px;
    /* background-color: #000; */
    border: 2px #000 solid;
    cursor: pointer;
    text-align: center;
}

.prodfilter .checkmark {
    position: absolute;
    top: -2px;
    left: 0;
    height: 25px;
    width: 25px;
    /* background-color: #eee; */
    border: 2px #ddd solid;
    cursor: pointer;
}

/* On mouse-over, add a grey background color */
.prodfilter .contain-chk:hover input ~ .prodfilter .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.prodfilter .contain-chk input:checked ~ .prodfilter .checkmark {
    background-color: #30beca;
}

/* Create the checkmark/indicator (hidden when not checked) */
.prodfilter .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.prodfilter .contain-chk input:checked ~ .prodfilter .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.prodfilter .contain-chk .checkmark:after {
    left: 8px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*end-prodfilter*/

/*star-aboutus*/
.aboutus {
    font-size: 25px;
    color: #2A1616;
    font-family: "Poppins-Bold";
    padding-top: 30px;
    padding-bottom: 20px;
}

.aboutus-one {
    font-size: 16px;
    color: #383838;
    font-family: "Poppins-Regular";
    padding-bottom: 10px;
}

.aboutus-one p {
    font-size: 16px;
    color: #383838;
    font-family: "Poppins-Regular";
    padding-bottom: 10px;
    line-height: 28px;
    margin: 0 0 10px;
}

.aboutus-img {
    display: block;
    padding-bottom: 15px;
}

.aboutus-img img {
    max-width: 100%;
}
/*end-aboutus*/

/*star-visimisi*/
#visimisi {
    padding-top: 10px;
    padding-bottom: 10px;
}

.aboutvisi {
    font-size: 25px;
    color: #2A1616;
    font-family: "Poppins-Bold";
    padding-bottom: 10px;
}

.aboutvisi-text {
    font-size: 20px;
    color: #383838;
    font-family: "Poppins-Regular";
    padding-bottom: 10px;
    width: 80%;
}

.aboutmisi {
    font-size: 25px;
    color: #2A1616;
    font-family: "Poppins-Bold";
    padding-bottom: 10px;
}

.aboutmisi-text {
    font-size: 20px;
    color: #383838;
    font-family: "Poppins-Regular";
    padding-bottom: 10px;
    width: 80%;
}
/*end-visimisi*/

/*star-customer*/
#customer {
    padding-top: 55px;
    padding-bottom: 30px;
}

.ourcustomer {
    font-size: 25px;
    color: #383838;
    font-family: "Poppins-Bold";
    padding-bottom: 25px;
    text-align: center;
}

.morecustomer {
    font-size: 30px;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Poppins-Bold";
    text-shadow: 1px 1px 2px #6884d24a, 0 0 25px #a2e2da05, 5px 7px 5px #00ab954a;
    background-color: #00AB95;
    background-image: linear-gradient(244deg, #00AB95 30%, #6884D2 87%);
    padding-bottom: 60px;
}

.imgcustomer {
    display: block;
    padding-bottom: 30px;
}

.imgcustomer img {
    max-width: 100%;
}
/*star-customer*/

/*star-box-hospital*/
#box-hospital {
    padding-top: 20px;
    padding-bottom: 20px;
}

.box-hospital {
    margin-right: -15px;
    margin-left: -15px;
    font-size: 0px;
    text-align: center;
}

.item-hospital {
    margin-bottom: 30px;
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    width: 33.33333%;
    font-size: 14px;
    vertical-align: top;
}

.i-hospital {
    background: #ffffff;
}

.i-hospital img {
    /*display: block;*/
    max-width: 100%;
}

.i-hospital .abstop {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 40px);
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.i-hospital .vertborder {
    padding-top: 20px;
}

.vertborder .konten-item-hospital {
    font-size: 20px;
    color: #383838;
    font-family: "Poppins-SemiBold";
}


@media only screen and (max-width: 767px) {
    .item-hospital {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 50%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 480px) {
    .item-hospital {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}
/*end-box-hospital*/


/*star-kontak-home*/
#kontak-home {
    background: url(background/kontak-home.png) no-repeat;
    padding-top: 11%;
    padding-bottom: 11%;
    background-position: center;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    width: 100%;
    height: auto;
}

.great {
    color: #ffffff;
    font-family: "Poppins-Regular";
    font-size: 35px;
    width: 50%;
    line-height: 45px;
    padding-bottom: 40px;
}

.footer-track.btn-track {
    color: #ffffff;
    border-color: transparent;
    background-image: linear-gradient(to right, #56D670, #51E9C4);
}

.footer-track .fa-envelope-o {
    padding-left: 70px;
}

.footer-track {
    display: inline-block;
    padding: 12px 25px;
    margin-bottom: 0;
    font-size: 25px;
    font-family: "Poppins-Regular";
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 20px;
}

@media (max-width: 700px) {
    .great {
        font-size: 25px;
        line-height: 32px;
        width: 65%;
    }
    .footer-track {
        font-size: 16px;
    }
}

@media (max-width: 650px) {
    .great {
        font-size: 20px;
        line-height: 25px;
        width: 65%;
    }
    .footer-track {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .great {
        font-size: 20px;
        line-height: 25px;
        width: 65%;
    }
    .footer-track {
        font-size: 14px;
    }
}

@media (max-width: 550px) {
    .great {
        font-size: 20px;
        line-height: 25px;
        width: 65%;
    }
    .footer-track {
        font-size: 14px;
    }
}

@media (max-width: 500px) {
    .great {
        font-size: 20px;
        line-height: 25px;
        width: 65%;
    }
    .footer-track {
        font-size: 14px;
    }
}

@media (max-width: 450px) {
    .great {
        font-size: 20px;
        line-height: 25px;
        width: 100%;
    }
    .footer-track {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .great {
        font-size: 20px;
        line-height: 25px;
        width: 100%;
    }
    .footer-track {
        font-size: 14px;
    }
}

@media (max-width: 375px) {
    .great {
        font-size: 20px;
        line-height: 25px;
        width: 100%;
    }
    .footer-track {
        font-size: 14px;
    }
}

@media (max-width: 365px) {
    .great {
        font-size: 20px;
        line-height: 25px;
        width: 100%;
    }
    .footer-track {
        font-size: 14px;
    }
}

@media (max-width: 320px) {
    .great {
        font-size: 20px;
        line-height: 25px;
        width: 100%;
    }
    .footer-track {
        font-size: 14px;
    }
}
/*end-kontak-home*/

/*star-container.arts*/
.container.arts {
    padding-top: 25px;
    padding-bottom: 25px;
}

.container.arts .posted {
    color: #6E6E6E;
    font-size: 13px;
    font-family: "Poppins-Italic";
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding-top: 15px;
}

.container.arts .posted .reguler {
    font-family: "Poppins-Regular";
}

.container.arts .posted span {
    color: #B1B1B1;
    font-size: 13px;
    font-family: "Poppins-Italic";
}

.container.arts .titles {
    color: #DFDFDF;
    font-size: 25px;
    font-family: "Poppins-Bold";
    width: 93%;
    padding-top: 5px;
    padding-bottom: 20px;
}

.container.arts .readmore {
    color: #B1B1B1;
    font-size: 15px;
    font-family: "Poppins-Regular";
}

@media (max-width: 1124px) {
    .container.arts .titles {
        line-height: 30px;
        font-size: 20px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 900px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 850px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 800px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 750px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 700px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 650px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 600px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 550px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 500px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 450px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 400px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 375px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 365px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}

@media (max-width: 320px) {
    .container.arts .titles {
        line-height: 30px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
    }
    .btns {
        padding-bottom: 50px;
    }
}
/*end-container.arts*/

/*star-artikel*/
#artikel {
    background: #000;
}

.img-artikel {
    position: relative;
    margin-left: 20px;
    margin-bottom: 80px;
}

.img-artikel img {
    position: relative;
    z-index: 2;
}

.img-artikel:before {
    position: absolute;
    content: "";
    top: 15px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 1px solid #3F3F3F;
    z-index: 1;
}

@media (max-width: 991px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 900px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 850px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 800px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 750px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 700px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 650px){
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 600px){
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 550px){
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 500px){
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 450px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 400px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 375px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 365px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}

@media (max-width: 320px) {
    .img-artikel:before {
        left: -20px;
    }
    .container.arts .img-artikel {
        margin-bottom: 35px;
    }
}
/*end-artikel*/

/*star-button-artikel*/
.btns-artikel {
    color: #F7D069;
    background-color: transparent;
    border-color: transparent;
}

.btns-artikel:hover {
    color: #F7D069;
}

.btns {
    display: inline-block;
    padding-top: 20px;
    margin-bottom: 0;
    font-size: 15px;
    font-family: "Poppins-Bold";
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
/*end-button-artikel*/

/*star-artHome*/
#artHome {
    padding-top: 100px;
    padding-bottom: 165px;
    background: #000;
}

.artHome {
    position: relative;
    margin-left: 0px;
    margin-bottom: 30px;
}

.artHome img {
    position: relative;
    z-index: 2;
}

.artHome:before {
    position: absolute;
    content: "";
    top: -50px;
    left: -50px;
    width: 100%;
    height: 100%;
    /*border: 1px solid #303030;*/
    background: #303030;
    z-index: 1;
}

@media (max-width: 991px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 900px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 850px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 800px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 750px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 700px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 650px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 600px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 550px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 500px){
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 450px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 400px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 375px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 365px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}

@media (max-width: 320px) {
    .artHome:before {
        left: -50px;
    }
    .artHome {
        margin-bottom: 35px;
    }
}
/*end-artHome*/

/*star-artHome-happiness*/
#artHome .padLeft {
    padding-left: 25px;
    padding-top: 130px;
}

@media (max-width: 1200px) {
    #artHome .padLeft {
        padding-top: 70px;
    }
}

@media (max-width: 1024px) {
    #artHome .padLeft {
        padding-top: 70px;
    }
}

@media (max-width: 700px) {
    #artHome .padLeft {
        padding-top: 35px;
        padding-left: 5px;
    }
}

@media (max-width: 400px) {}

@media (max-width: 375px) {}

@media (max-width: 365px) {}

@media (max-width: 320px) {}

.artHome-happiness {
    font-size: 33px;
    color: #D9D9D9;
    font-family: "Poppins-Medium";
    width: 69%;
}

.artHome-happiness span {
    color: #F7D069;
    font-size: 33px;
    font-family: "Poppins-Medium";
}

#artHome .inspire {
    font-size: 20px;
    color: #B1B1B1;
    font-family: "Poppins-Regular";
    padding-top: 45px;
    padding-bottom: 45px;
}

#artHome .people {
    color: #B1B1B1;
    font-size: 25px;
    font-family: "Poppins-Regular";
    text-align: center;
    padding-top: 65px;
}
/*end-artHome-happiness*/

/*star-button--pan*/
@keyframes loaderAnim {
    to {
        opacity: 1;
        transform: scale3d(0.5, 0.5, 1);
    }
}

.button {
    pointer-events: auto;
    cursor: pointer;
    background: #F7D069;
    border: none;
    padding: 13px 30px 15px 30px;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
}

.button::before,
.button::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.button--pan {
    font-family: "Poppins-Bold";
    font-size: 15px;
    border: 1px solid #F7D069;
    border-radius: 0px;
    overflow: hidden;
    color: #F7D069;
}

.button--pan span {
    position: relative;
    /*mix-blend-mode: difference;*/
}

.padLeft a:hover {
    color: #000;
}

.button--pan::before {
    content: '';
    background: #000;
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.button--pan:hover::before {
    transform: translate3d(0,-100%,0);
}

@keyframes MoveUpInitial {
    to {
        transform: translate3d(0,-105%,0);
    }
}

@keyframes MoveUpEnd {
    from {
        transform: translate3d(0,100%,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}

@keyframes marquee {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
    }

    100% {
        transform: translate3d(var(--move-final), 0, 0);
    }
}

@keyframes MoveRightInitial {
    to {
        transform: translate3d(105%,0,0);
    }
}

@keyframes MoveRightEnd {
    from {
        transform: translate3d(-100%,0,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}

@keyframes MoveScaleUpInitial {
    to {
        transform: translate3d(0,-105%,0) scale3d(1,2,1);
        opacity: 0;
    }
}

@keyframes MoveScaleUpEnd {
    from {
        transform: translate3d(0,100%,0) scale3d(1,2,1);
        opacity: 0;
    }
    to {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@keyframes slotMachine {
    50% {
        transform: translate3d(0,100%,0);
        opacity: 0;
    }
    51% {
        transform: translate3d(0,-100%,0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@keyframes rotateIt {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes blinkHide {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
}

@keyframes blinkShow {
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
}
/*end-button--pan*/

/*star-partner*/
.tag-konten {
    margin: 0;
    margin-bottom: 55px;
    font-family: "Poppins-SemiBold";
    font-size: 30px;
    color: #333;
    text-transform: capitalize;
    font-feature-settings: "salt";
    -webkit-font-feature-settings: "salt";
    -o-font-feature-settings: "salt";
    -moz-font-feature-settings: "salt";
    -ms-font-feature-settings: "salt";
}

.tag-konten.tag-center {
    text-align: center;
}

.tag-konten.tag-white {
    color: #383838;
}

.wrap-partner {
    padding-top: 85px;
    padding-bottom: 30px;
    border-top: 0px solid rgba(7, 30, 72, 0.3);
}


@media (max-width: 991px) {
    .wrap-partner {
        padding-top: 0px;
    }
}

@media (max-width: 900px) {
    .wrap-partner {
        padding-top: 0px;
    }
}

@media (max-width: 800px) {
    .wrap-partner {
        padding-top: 0px;
    }
}

@media (max-width: 700px) {
    .wrap-partner {
        padding-top: 0px;
    }
}

@media (max-width: 600px) {
    .wrap-partner {
        padding-top: 0px;
    }
}

@media (max-width: 500px) {
    .wrap-partner {
        padding-top: 0px;
    }
}

@media (max-width: 400px) {
    .wrap-partner {
        padding-top: 0px;
    }
}

@media (max-width: 375px) {
    .wrap-partner {
        padding-top: 0px;
    }
}

@media (max-width: 365px) {
    .wrap-partner {
        padding-top: 0px;
    }
}

@media (max-width: 320px) {
    .wrap-partner {
        padding-top: 0px;
    }
}


.box-partner {
    text-align: center;
    margin-right: -10px;
    margin-left: -10px;
}

.item-partner {
    margin-bottom: 20px;
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    width: 26%;
    font-size: 14px;
    vertical-align: top;
}

.item-partner a {}

.item-partner img {
    max-width: 100%;
    margin-bottom: 30px;
}

.item-partner.item-full {
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    width: 16.66667%;
    font-size: 14px;
    vertical-align: top;
}

.item-partner.item-full figure {
    border: 1px solid #EEE;
}

.item-partner.item-full figure:hover {
    border-color: #de1a32;
    box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.2);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}


@media (max-width: 991px) {
    .item-partner {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 26%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media (max-width: 767px) {
    .item-partner {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 26%;
        font-size: 14px;
        vertical-align: top;
    }
    
    .item-partner.item-full {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 20%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media (max-width: 600px) {
    .item-partner {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 25%;
        font-size: 14px;
        vertical-align: top;
    }
    
    .item-partner.item-full {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 25%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media (max-width: 480px) {
    .item-partner {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 33.33333%;
        font-size: 14px;
        vertical-align: top;
    }
    
    .item-partner.item-full {
        display: inline-block;
        padding-right: 10px;
        padding-left: 10px;
        width: 33.33333%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media (max-width: 320px) {
    .box-partner {
        margin-right: -5px;
        margin-left: -5px;
        font-size: 0px;
    }

    .item-partner {
        margin-bottom: 10px;
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
        width: 33.33333%;
        font-size: 14px;
        vertical-align: top;
    }
    
    .item-partner.item-full {
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
        width: 33.33333%;
        font-size: 14px;
        vertical-align: top;
    }
}
/*end-partner*/

/*star-footer*/
footer .second-footer {
    padding: 5px 0;
    background-color: #040404;
}

.copyright {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
    color: #4E4E4E;
    font-family: "Poppins-Regular";
}

@media (max-width: 800px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 700px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 600px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 500px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 400px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 320px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.top-footer {
    padding-top: 0px;
    padding-bottom: 0px;
}
  
.item-footer .tag-item-footer {
    margin-bottom: 10px;
    font-family: "Poppins-Bold";
    font-size: 13px;
    color: #000000;
    text-transform: inherit;
}


@media (max-width: 991px) {}

@media (max-width: 900px) {}

@media (max-width: 800px) {}

@media (max-width: 700px) {}

@media (max-width: 600px) {}

@media (max-width: 550px) {}

@media (max-width: 500px) {}

@media (max-width: 450px) {}

@media (max-width: 400px) {}

@media (max-width: 375px) {}

@media (max-width: 365px) {}

@media (max-width: 320px) {}


.item-footer p {
    font-size: 13px;
    color: #FFF;
}

.item-footer ul li {
    margin-bottom: 10px;
}

.item-footer ul li:last-child {
    margin-bottom: 0;
}

.item-footer ul li a {
    position: relative;
    display: block;
    font-size: 13px;
    color: #FFF;
}

.item-footer ul li a .fa {
    margin-right: 5px;
}

.item-kontak-footer {
    margin-bottom: 15px;
}

.item-nav-footer {
    margin-bottom: 10px;
}

.item-info-footer {
    margin-bottom: 5px;
}

.item-almt-footer {
    margin-bottom: 5px;
}

.item-kontak-footer .tag-kontak-footer {
    font-family: "OpenSans Bold";
    font-size: 13px;
    color: #FFF;
    text-transform: uppercase;
}

.item-nav-footer .tag-nav-footer a {
    font-family: "Poppins-Regular";
    font-size: 15px;
    color: #656565;
    text-transform: inherit;
}

.item-info-footer .tag-info-footer {
    font-family: "OpensansReguler";
    font-size: 13px;
    color: #a9d8ff;
    text-transform: capitalize;
}

.item-almt-footer .tag-almt-footer {
    font-family: "OpensansReguler";
    font-size: 13px;
    color: #a9d8ff;
    text-transform: capitalize;
}

.item-kontak-footer span {
    display: block;
    font-size: 13px;
    color: #FFF;
}

.medsos-footer {
    padding-top: 5px;
}

.medsos-footer li {
    display: inline-block;
    margin-right: 10px;
}

.medsos-footer li a {
    display: block;
    /*width: 40px;
    height: 40px;*/
    /*background: #E6E6E6;
    border-radius: 50%;*/
}

.medsos-footer li a .instagram {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    width: auto;
    height: 15px;
    color: #0a1019;
}

.medsos-footer li a .facebook {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    width: auto;
    height: 15px;
    color: #0a1019;
}

.medsos-footer li a .twitter {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    width: auto;
    height: 15px;
    color: #0a1019;
}

.medsos-footer li a .youtube {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    width: auto;
    height: 15px;
    color: #0a1019;
}

@media only screen and (max-width: 1024px) {
    .item-footer {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 991px) {
    .copy {
        text-align: center;
    }
}

@media (max-width: 991px) {}

@media (max-width: 900px) {}

@media (max-width: 800px) {}

@media (max-width: 700px) {}

@media (max-width: 600px) {}

@media (max-width: 500px) {}

@media (max-width: 400px) {}

@media (max-width: 375px) {}

@media (max-width: 365px) {}

@media (max-width: 320px) {}

@media only screen and (max-width: 320px) {
    .item-footer .tag-item-footer {
        margin-bottom: 15px;
        font-size: 14px;
    }

    .item-footer p {
        font-size: 12px;
        line-height: 20px;
        text-align: justify;
    }
    
    .item-footer ul li a {
        font-size: 12px;
    }

    .item-kontak-footer .tag-kontak-footer {
        font-size: 12px;
    }

    .item-nav-footer .tag-nav-footer a {
        font-size: 12px;
    }

    .item-info-footer .tag-info-footer {
        font-size: 12px;
    }

    .item-almt-footer .tag-almt-footer {
        font-size: 12px;
    }
  
    .item-kontak-footer span {
        font-size: 12px;
    }

}
/*end-footer*/


/*star-kategorihome*/
#contents {
    background-image: linear-gradient(to right, #6884D2 , #00AB95);
    padding-bottom: 45px;
}

.provide-home {
    font-size: 30px;
    color: #ffffff;
    font-family: "Poppins-SemiBold";
    padding-top: 120px;
    /*padding-top: 30px;*/
    padding-bottom: 20px;
    text-align: center;
}

.provide-loremhome {
    font-size: 16px;
    color: #ffffff;
    font-family: "Poppins-Regular";
    padding-bottom: 10px;
    text-align: center;
}

.grid {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    max-width: 100%;
    list-style: none;
    text-align: center;
}

/* Common style */
.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    /*min-width: 320px;
    max-width: 480px;
    max-height: 360px;*/
    width: 100%;
    /*width: 31%;*/
    background: transparent;
    text-align: center;
    cursor: pointer;
}

.grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h2 {
    word-spacing: 0;
    font-size: 25px;
    color: #383838;
    font-family: "Roboto-Medium";
    text-transform: capitalize;
}

.grid figure h2 span {
    font-weight: 800;
}

.grid figure h2,
.grid figure p {
    margin: 0;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}

/* Individual effects */

/*---------------*/
/***** Lily *****/
/*---------------*/

figure.effect-lily img {
    max-width: none;
    width: -webkit-calc(100% + 50px);
    width: calc(100% + 50px);
    /*opacity: 0.7;*/
    opacity: 2;
    /*-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0, 0);
    transform: translate3d(-40px,0,0);*/
}

figure.effect-lily figcaption {
    text-align: left;
}

figure.effect-lily figcaption > div {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    /*height: 50%;*/
    height: 100%;
    background: no-repeat;
}

figure.effect-lily h2 {
    -webkit-transform: translate3d(0,335px,0);
    transform: translate3d(0,335px,0);
}

figure.effect-lily p {
    -webkit-transform: translate3d(0,340px,0);
    transform: translate3d(0,340px,0);
}

figure.effect-lily h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-lily p {
    font-size: 16px;
    color: #ffffff;
    font-family: "Poppins-Regular";
    text-transform: capitalize;
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
    transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily p .fa {
    padding-left: 5px;
}

figure.effect-lily figcaption > div:hover {
    background: #bb87328c;
}

figure.effect-lily:hover img {
    opacity: 1;
}

figure.effect-lily:hover p {
    opacity: 1;
}

figure.effect-lily:hover img {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-lily:hover h2 {
    -webkit-transform: translate3d(0,300px,0);
    transform: translate3d(0,300px,0);
    color: #ffffff;
    font-size: 25px;
    font-family: "Roboto-Medium";
}

figure.effect-lily:hover p {
    -webkit-transform: translate3d(0,305px,0);
    transform: translate3d(0,305px,0);
}

figure.effect-lily:hover p {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}


@media (max-width: 1300px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,265px,0);
        transform: translate3d(0,265px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,210px,0);
        transform: translate3d(0,210px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,215px,0);
        transform: translate3d(0,215px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 30px;
    }
}

@media (max-width: 1024px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,290px,0);
        transform: translate3d(0,290px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,250px,0);
        transform: translate3d(0,250px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,255px,0);
        transform: translate3d(0,255px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 30px;
    }
}

@media (max-width: 1002px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,345px,0);
        transform: translate3d(0,345px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,300px,0);
        transform: translate3d(0,300px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,305px,0);
        transform: translate3d(0,305px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 30px;
    }
}

@media (max-width: 991px) {
    #ournews {
        padding-top: 20px;
    }

    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,240px,0);
        transform: translate3d(0,240px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,205px,0);
        transform: translate3d(0,205px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,210px,0);
        transform: translate3d(0,210px,0);
    }
}

@media (max-width: 900px) {
    #ournews {
        padding-top: 20px;
    }

    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,295px,0);
        transform: translate3d(0,295px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,255px,0);
        transform: translate3d(0,255px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,260px,0);
        transform: translate3d(0,260px,0);
    }
}

@media (max-width: 850px) {
    #ournews {
        padding-top: 20px;
    }

    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,295px,0);
        transform: translate3d(0,295px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,255px,0);
        transform: translate3d(0,255px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,260px,0);
        transform: translate3d(0,260px,0);
    }
}

@media (max-width: 800px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,295px,0);
        transform: translate3d(0,295px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,255px,0);
        transform: translate3d(0,255px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,260px,0);
        transform: translate3d(0,260px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 750px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,295px,0);
        transform: translate3d(0,295px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,255px,0);
        transform: translate3d(0,255px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,260px,0);
        transform: translate3d(0,260px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 700px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,275px,0);
        transform: translate3d(0,275px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,245px,0);
        transform: translate3d(0,245px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,250px,0);
        transform: translate3d(0,250px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 650px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,250px,0);
        transform: translate3d(0,250px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,215px,0);
        transform: translate3d(0,215px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,220px,0);
        transform: translate3d(0,220px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 600px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,415px,0);
        transform: translate3d(0,415px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,390px,0);
        transform: translate3d(0,390px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,395px,0);
        transform: translate3d(0,395px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 550px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,415px,0);
        transform: translate3d(0,415px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,350px,0);
        transform: translate3d(0,350px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,355px,0);
        transform: translate3d(0,355px,0);
    }

    figure.effect-lily figcaption > div {
        padding: 0px 10px 0px 15px;
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 500px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,420px,0);
        transform: translate3d(0,420px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,395px,0);
        transform: translate3d(0,395px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,400px,0);
        transform: translate3d(0,400px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 450px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,400px,0);
        transform: translate3d(0,400px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,350px,0);
        transform: translate3d(0,350px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,355px,0);
        transform: translate3d(0,355px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 400px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,340px,0);
        transform: translate3d(0,340px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,295px,0);
        transform: translate3d(0,295px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,300px,0);
        transform: translate3d(0,300px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 375px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,340px,0);
        transform: translate3d(0,340px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,290px,0);
        transform: translate3d(0,290px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,295px,0);
        transform: translate3d(0,295px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 365px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,300px,0);
        transform: translate3d(0,300px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,250px,0);
        transform: translate3d(0,250px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,255px,0);
        transform: translate3d(0,255px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}

@media (max-width: 340px) {
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px 5px;
        width: 100%;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,250px,0);
        transform: translate3d(0,250px,0);
    }

    .grid figure.effect-lily:hover h2 {
        -webkit-transform: translate3d(0,210px,0);
        transform: translate3d(0,210px,0);
    }

    .grid figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,215px,0);
        transform: translate3d(0,215px,0);
    }

    .grid {
        padding: 1em 0 0px;
    }

    #ournews {
        padding-top: 25px;
    }
}
/*end-kategorihome*/


/*star-youtube-home*/
.youtube-home {
    padding-top: 0;
    background: #ffffff;
}

.youtube-home .contact-youtube {
    background-color: transparent;
    z-index: 3;
    position: relative;
    bottom: -60px;
    left: -115px;
    color:white !important
}

.embed-home-video {
    display: block;
}

.embed-home-video img {
    max-width: 100%;
}

.youtube-home .contact-youtube a {
    font-size: 18px;
    vertical-align: bottom;
    color:white;
}


@media (max-width: 991px) {
    .youtube-home .contact-youtube {
        left: -120px;
    }
}

@media (max-width: 950px) {
    .youtube-home .contact-youtube {
        left: -105px;
    }
}

@media (max-width: 900px) {
    .youtube-home .contact-youtube {
        left: -80px;
    }
}

@media (max-width: 870px) {
    .youtube-home .contact-youtube {
        left: -66px;
    }
}

@media (max-width: 830px) {
    .youtube-home .contact-youtube {
        left: -45px;
    }
}

@media (max-width: 800px) {
    .youtube-home .contact-youtube {
        left: -30px;
    }
}

@media (max-width: 750px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}

@media (max-width: 700px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}

@media (max-width: 650px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}

@media (max-width: 600px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}

@media (max-width: 550px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}

@media (max-width: 500px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}

@media (max-width: 450px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}

@media (max-width: 400px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}

@media (max-width: 375px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}

@media (max-width: 365px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}

@media (max-width: 320px) {
    .youtube-home .contact-youtube {
        left: -15px;
    }
}
/*end-youtube-home*/


/*star-service*/
#service {
    padding-top: 90px;
    padding-bottom: 30px;
}


@media (max-width: 991px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }
}

@media (max-width: 950px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }
}

@media (max-width: 900px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }
}

@media (max-width: 850px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }
}

@media (max-width: 800px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }
}

@media (max-width: 750px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }
}

@media (max-width: 700px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }
}

@media (max-width: 650px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }
}

@media (max-width: 600px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }

    #service .service-two {
        width: 90%;
    }

    #service .column:nth-child(2) img {
        margin-top: 15px;
    }

    #service .column:last-child img {
        margin-top: 15px;
    }

    #service .column {
        padding: 0;
    }
}

@media (max-width: 550px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }

    #service .service-two {
        width: 90%;
    }

    #service .column:nth-child(2) img {
        margin-top: 15px;
    }

    #service .column:last-child img {
        margin-top: 15px;
    }

    #service .column {
        padding: 0;
    }
}

@media (max-width: 500px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }

    #service .service-two {
        width: 90%;
    }

    #service .column:nth-child(2) img {
        margin-top: 15px;
    }

    #service .column:last-child img {
        margin-top: 15px;
    }

    #service .column {
        padding: 0;
    }
}

@media (max-width: 450px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }

    #service .service-two {
        width: 90%;
    }

    #service .column:nth-child(2) img {
        margin-top: 15px;
    }

    #service .column:last-child img {
        margin-top: 15px;
    }

    #service .column {
        padding: 0;
    }
}

@media (max-width: 400px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }

    #service .service-two {
        width: 90%;
    }

    #service .column:nth-child(2) img {
        margin-top: 15px;
    }

    #service .column:last-child img {
        margin-top: 15px;
    }

    #service .column {
        padding: 0;
    }
}

@media (max-width: 375px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }

    #service .service-two {
        width: 90%;
    }

    #service .column:nth-child(2) img {
        margin-top: 15px;
    }

    #service .column:last-child img {
        margin-top: 15px;
    }

    #service .column {
        padding: 0;
    }
}

@media (max-width: 365px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }

    #service .service-two {
        width: 90%;
    }

    #service .column:nth-child(2) img {
        margin-top: 15px;
    }

    #service .column:last-child img {
        margin-top: 15px;
    }

    #service .column {
        padding: 0;
    }
}

@media (max-width: 320px) {
    #service {
        padding-top: 0px;
    }

    #service .col-md-5.servicetop {
        padding-top: 50px;
    }

    #service .service-two {
        width: 90%;
    }

    #service .column:nth-child(2) img {
        margin-top: 15px;
    }

    #service .column:last-child img {
        margin-top: 15px;
    }

    #service .column {
        padding: 0;
    }
}


#service .servicetop {
    padding-top: 80px;
}

.service-one {
    font-size: 12px;
    color: #BB8732;
    font-family: "Poppins-Regular";
    padding-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.service-one img {
    max-width: 100%;
    padding-right: 10px;
}

.service-two {
    font-size: 30px;
    color: #00AB95;
    font-family: "Poppins-SemiBold";
    padding-bottom: 10px;
    width: 51%;
}

.service-trhee {
    font-size: 16px;
    color: #343B42;
    font-family: "Poppins-Regular";
    padding-bottom: 10px;
    line-height: 27px;
}

.rows {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 4px 30px 0px;
}

.column {
    -ms-flex: 50%;
    flex: 50%;
    /*padding: 0 4px;*/
    padding: 0 4px 0 15px;
}

.column:last-child img {
    margin-top: 70px;
}


.column:nth-child(2) img {
    margin-top: 70px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

.column span {
    font-size: 16px;
    color: #343B42;
    font-family: "Poppins-Medium";
    padding-left: 15px;
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}
/*end-service*/


/*star-page-detailartikel*/
.detail-artikel > img {
    margin-bottom: 25px;
    width: 100%;
}

#page-detailartikel {
    padding-top: 45px;
    padding-bottom: 60px;
    background: #000;
}

.page-artikel .posted {
    color: #6E6E6E;
    font-size: 13px;
    font-family: "Poppins-Italic";
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding-top: 15px;
}

.page-artikel .title {
    color: #DFDFDF;
    font-size: 25px;
    font-family: "Poppins-Bold";
    padding-top: 10px;
    padding-bottom: 25px;
    width: 73%;
}

.page-artikel .posted span {
    color: #B1B1B1;
    font-size: 13px;
    font-family: "Poppins-Italic";
}

.page-artikel .posted .reguler {
    font-family: "Poppins-Regular";
}

.page-artikel .paragraf {
    color: #B1B1B1;
    font-size: 15px;
    font-family: "Poppins-Regular";
    line-height: 27px;
    padding-bottom: 25px;
}

@media (max-width: 800px) {}

@media (max-width: 700px) {}

@media (max-width: 600px) {}

@media (max-width: 500px) {}

@media (max-width: 400px) {}

@media (max-width: 375px) {
    #page-detailnews {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

@media (max-width: 365px) {
    #page-detailnews {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

@media (max-width: 320px) {
    #page-detailnews {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}
/*end-page-detailnews*/

/*star-artic*/
.img-artic {
    position: relative;
    margin-left: 25px;
    margin-bottom: 10px;
}

.img-artic img {
    position: relative;
    z-index: 2;
}

.img-artic:before {
    position: absolute;
    content: "";
    top: 10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border: 1px solid #3F3F3F;
    z-index: 1;
}

@media (max-width: 991px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 900px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 850px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 800px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 750px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 700px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 650px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 600px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 550px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 500px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 450px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 400px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 375px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 365px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 320px) {
    .img-artic:before {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 10px;
    }
}
/*end-artic*/

/*star-demof*/
#border-artic {
    border-left: 1px solid #3F3F3F;
    border-radius: 0px;
    /*box-shadow: 0 3px 15px rgb(0 0 0 / 8%);*/
}

.demof {
    border: 0px solid #E5E5E5;
    margin: 20px 0;
    min-height: 115px;
    padding-left: 15px;
    padding-right: 15px;
}

.demo2 {
    /*max-height: 765px;*/
    max-height: 900px;
}

.demof ul {
    padding: 0;
    list-style: none;
}

.demof li a .posted {
    color: #6E6E6E;
    font-size: 13px;
    font-family: "Poppins-Italic";
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding-top: 15px;
    padding-left: 15px;
}

.demof li a .posted .reguler {
    font-family: "Poppins-Regular";
}

.demof li a span {
    color: #B1B1B1;
    font-size: 13px;
    font-family: "Poppins-Italic";
}

.demof li a .span {
    color: #DFDFDF;
    font-size: 16px;
    font-family: "Poppins-Bold";
    padding-top: 5px;
    padding-bottom: 25px;
    padding-left: 15px;
}

.artic-lain {
    font-size: 20px;
    color: #F7D069;
    font-family: "Poppins-Bold";
    text-transform: capitalize;
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 15px;
}

@media (max-width: 991px) {
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}

@media (max-width: 974px) {
    #border-artic {
        border: 1px solid #3F3F3F;
    }
}

@media (max-width: 900px) {
    #border-artic {
        border: 1px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}

@media (max-width: 800px) {
    #border-artic {
        border: 1px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}

@media (max-width: 700px) {
    #border-artic {
        border: 1px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}

@media (max-width: 600px) {
    #border-artic {
        border: 1px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}

@media (max-width: 500px) {
    #border-artic {
        border: 1px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}

@media (max-width: 400px) {
    #border-artic {
        border: 1px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}

@media (max-width: 375px) {
    #border-artic {
        border: 1px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}

@media (max-width: 365px) {
    #border-artic {
        border: 1px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}

@media (max-width: 320px) {
    #border-artic {
        border: 1px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}
/*end-demof*/

/*star-contain-abs*/
.contain-abs {
    position: relative;
    text-align: center;
}

.contain-abs .centered {
    position: absolute;
    bottom: 0;
    /*top: 50%;*/
    left: 50%;
    transform: translate(-50%, -50%);
    color: #D2D3D3;
    font-family: "Poppins-SemiBold";
    font-size: 38px;
}

.contain-abs .centered p {
    color: #D2D3D3;
    font-family: "Poppins-Medium";
    font-size: 14px;
    margin: 0 0 10px;
    padding-top: 10px;
    line-height: 25px;
}

@media (max-width: 991px) {
    .contain-abs .centered {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #D2D3D3;
        font-family: "Poppins-SemiBold";
        font-size: 40px;
    }
    .contain-abs .centered p {
        color: #D2D3D3;
        font-family: "Poppins-Medium";
        font-size: 14px;
        margin: 0 0 10px;
    }
}

@media (max-width: 900px) {
    .contain-abs .centered {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #D2D3D3;
        font-family: "Poppins-SemiBold";
        font-size: 40px;
    }
    .contain-abs .centered p {
        color: #D2D3D3;
        font-family: "Poppins-Medium";
        font-size: 14px;
        margin: 0 0 10px;
    }
}

@media (max-width: 850px) {
    .contain-abs .centered {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #D2D3D3;
        font-family: "Poppins-SemiBold";
        font-size: 40px;
    }
    .contain-abs .centered p {
        color: #D2D3D3;
        font-family: "Poppins-Medium";
        font-size: 14px;
        margin: 0 0 10px;
    }
}

@media (max-width: 800px) {
    .contain-abs .centered {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #D2D3D3;
        font-family: "Poppins-SemiBold";
        font-size: 36px;
    }
    .contain-abs .centered p {
        color: #D2D3D3;
        font-family: "Poppins-Medium";
        font-size: 14px;
        margin: 0 0 10px;
    }
}

@media (max-width: 750px) {
    .contain-abs .centered {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #D2D3D3;
        font-family: "Poppins-SemiBold";
        font-size: 36px;
    }
    .contain-abs .centered p {
        color: #D2D3D3;
        font-family: "Poppins-Medium";
        font-size: 14px;
        margin: 0 0 10px;
    }
}

@media (max-width: 700px) {
    .contain-abs .centered {
        display: none;
    }
}

@media (max-width: 650px) {
    .contain-abs .centered {
        display: none;
    }
}

@media (max-width: 600px) {
    .contain-abs .centered {
        display: none;
    }
}

@media (max-width: 550px) {
    .contain-abs .centered {
        display: none;
    }
}

@media (max-width: 500px) {
    .contain-abs .centered {
        display: none;
    }
}

@media (max-width: 450px) {
    .contain-abs .centered {
        display: none;
    }
}

@media (max-width: 400px) {
    .contain-abs .centered {
        display: none;
    }
}

@media (max-width: 375px) {
    .contain-abs .centered {
        display: none;
    }
}

@media (max-width: 365px) {
    .contain-abs .centered {
        display: none;
    }
}

@media (max-width: 320px) {
    .contain-abs .centered {
        display: none;
    }
}
/*end-contain-abs*/

/*star-belive*/
#belive {
    background: #000;
    padding-top: 65px;
}

.belive {
    font-size: 33px;
    color: #D9D9D9;
    font-family: "Poppins-Medium";
    line-height: 40px;
    padding-bottom: 30px;
}

.belive span {
    font-size: 33px;
    color: #F7D069;
    font-family: "Poppins-Medium";
}

.design {
    font-size: 20px;
    color: #B1B1B1;
    font-family: "Poppins-Regular";
}
/*end-belive*/

/*star-contain-arts*/
.contain-arts {
    position: relative;
    text-align: center;
}

.contain-arts .centered {
    position: absolute;
    bottom: 0;
    /*top: 50%;*/
    left: 50%;
    transform: translate(-50%, -50%);
    color: #D2D3D3;
    font-family: "Poppins-SemiBold";
    font-size: 40px;
    text-transform: uppercase;
}

.contain-arts .centered p {
    color: #D2D3D3;
    font-family: "Poppins-Medium";
    font-size: 16px;
    margin: 10px 0 10px;
    text-transform: initial;
}

@media (max-width: 991px) {
    .contain-arts .centered {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #D2D3D3;
        font-family: "Poppins-SemiBold";
        font-size: 40px;
    }
    .contain-arts .centered p {
        color: #D2D3D3;
        font-family: "Poppins-Medium";
        font-size: 14px;
        margin: 0 0 10px;
    }
}

@media (max-width: 900px) {
    .contain-arts .centered {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #D2D3D3;
        font-family: "Poppins-SemiBold";
        font-size: 40px;
    }
    .contain-arts .centered p {
        color: #D2D3D3;
        font-family: "Poppins-Medium";
        font-size: 14px;
        margin: 0 0 10px;
    }
}

@media (max-width: 850px) {
    .contain-arts .centered {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #D2D3D3;
        font-family: "Poppins-SemiBold";
        font-size: 40px;
    }
    .contain-arts .centered p {
        color: #D2D3D3;
        font-family: "Poppins-Medium";
        font-size: 14px;
        margin: 0 0 10px;
    }
}

@media (max-width: 800px) {
    .contain-arts .centered {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #D2D3D3;
        font-family: "Poppins-SemiBold";
        font-size: 36px;
    }
    .contain-arts .centered p {
        color: #D2D3D3;
        font-family: "Poppins-Medium";
        font-size: 14px;
        margin: 0 0 10px;
    }
}

@media (max-width: 750px) {
    .contain-arts .centered {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #D2D3D3;
        font-family: "Poppins-SemiBold";
        font-size: 36px;
    }
    .contain-arts .centered p {
        color: #D2D3D3;
        font-family: "Poppins-Medium";
        font-size: 14px;
        margin: 0 0 10px;
    }
}

@media (max-width: 700px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 650px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 600px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 550px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 500px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 450px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 400px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 375px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 365px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 320px) {
    .contain-arts .centered {
        display: none;
    }
}
/*end-contain-arts*/

/*star-swipe*/
/*end-swipe*/


/*star-slick-slide*/
.gallery-wrap .slide.slick-slide {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 998;
    opacity: 0;
    transition: opacity 250ms linear 0s;
}

.slick-slider {
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.botles-carousel {
    position: relative;
    display: list-item;
    padding-top: 20px;
}

.info {
    position: absolute;
    width: 80%;
    max-width: 500px;
    bottom: 0px;
    right: 5%;
    pointer-events: none;
}

.info:before {
    content: "";
    position: absolute;
    width: 65%;
    height: 80%;
    top: 0;
    left: 0;
    -webkit-transform: translate(-10px, -10px);
    -ms-transform: translate(-10px, -10px);
    -o-transform: translate(-10px, -10px);
    transform: translate(-10px, -10px);
    background: #F7D069;
}

.inner {
    position: relative;
    padding: 30px 30px 30px 30px;
    background: #FFFFFF;
}

.inner h3 {
    color: #040404;
    font-family: "Poppins-Medium";
    font-size: 25px;
    margin-top: 0px;
}

.inner p {
    color: #040404;
    font-family: "Poppins-Regular";
    font-size: 15px;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: "";
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir="rtl"] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

@media (max-width: 700px) {
    .slick-slide img {
        display: block;
        max-width: 100%;
    }
    .botles-carousel {
        position: relative;
        display: list-item;
        padding-top: 155px;
    }
}

@media (max-width: 650px) {
    .slick-slide img {
        display: block;
        max-width: 100%;
    }
    .botles-carousel {
        position: relative;
        display: list-item;
        padding-top: 155px;
    }
}

@media (max-width: 600px) {
    .slick-slide img {
        display: block;
        max-width: 100%;
    }
    .botles-carousel {
        position: relative;
        display: list-item;
        padding-top: 155px;
    }
}

@media (max-width: 550px) {
    .slick-slide img {
        display: block;
        max-width: 100%;
    }
    .botles-carousel {
        position: relative;
        display: list-item;
        padding-top: 190px;
    }
}

@media (max-width: 500px) {
    .slick-slide img {
        display: block;
        max-width: 100%;
    }
    .botles-carousel {
        position: relative;
        display: list-item;
        padding-top: 205px;
    }
}

@media (max-width: 450px) {
    .slick-slide img {
        display: block;
        max-width: 100%;
    }
    .botles-carousel {
        position: relative;
        display: list-item;
        padding-top: 210px;
    }
}

@media (max-width: 400px) {
    .slick-slide img {
        display: block;
        max-width: 100%;
    }
    .botles-carousel {
        position: relative;
        display: list-item;
        padding-top: 250px;
    }
}

@media (max-width: 375px) {
    .slick-slide img {
        display: block;
        max-width: 100%;
    }
    .botles-carousel {
        position: relative;
        display: list-item;
        padding-top: 265px;
    }
}

@media (max-width: 365px) {
    .slick-slide img {
        display: block;
        max-width: 100%;
    }
    .botles-carousel {
        position: relative;
        display: list-item;
        padding-top: 265px;
    }
}

@media (max-width: 320px) {
    .slick-slide img {
        display: block;
        max-width: 100%;
    }
    .botles-carousel {
        position: relative;
        display: list-item;
        padding-top: 345px;
    }
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list {
    background: #fff url("./ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  font-weight: normal;
  font-style: normal;

  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"),
    url("./fonts/slick.woff") format("woff"),
    url("./fonts/slick.ttf") format("truetype"),
    url("./fonts/slick.svg#slick") format("svg");
}

/* Arrows */
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-top: -10px; /*lte IE 8*/
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
    font-family: "slick";
    font-size: 40px;
    line-height: 1;
    opacity: 0.75;
    color: red;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
    position: absolute;
}

[dir="rtl"] .slick-prev {
    right: -25px;
    left: auto;
}

.slick-prev:before {
    content: "←";
}

/**/
.slick-prev:before {
    content: "→";
    cursor: pointer;
}

.slick-next {
    right: -25px;
    position: absolute;
}

[dir="rtl"] .slick-next {
    right: auto;
    left: -25px;
}

.slick-next:before {
    content: "→";
}

/**/
.slick-next:before {
    content: "←";
    cursor: pointer;
}

.gallery-wrap {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 90px;
    padding-bottom: 90px;
}

.slide {
    width: 240px;
}

a.buton {
    pointer-events: auto;
    cursor: pointer;
    border: none;
    padding-top: 15px;
    font-size: 15px;
    font-family: "Poppins-Bold";
    color: #F10A37;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
}

/*img {
      display: inline-block;
}*/

/*h3, p {
    text-align: left;
}*/

/*.slick-arrow {
    position: absolute;
    top: 137px;
    transform: translateY(-50%);
    z-index: 99999;
}*/
.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}
/*end-slick-slide*/