html, body {
    font-size:62.5%; background-color:var(--bg-color-1) !important;
}
@font-face {
    font-family:Roboto; src:url('fonts/Poppins-Light.ttf'); 
}
@font-face {
    font-family:RobotoBold; src:url('fonts/Made-Tommy.otf'); 
} 
:root{
    --primary-color:rgb(163, 126, 45); --font-color:rgb(18,18,18); --bg-color-1:white;
    --bg-color-2:rgb(245,245,245); --bg-color-3:rgb(227, 212, 178); --border-color:rgb(202,202,202);
    --shadow-color-1:rgba(170,170,170,0.2); --shadow-color-2:rgba(98, 76, 27, 0.3);
}
.loadingbox {
    width:100%; height:100vh; background-color:var(--bg-color-1); position:fixed; display:block;
    z-index:10000 !important; top:50% !important; right:50% !important; transform:translate(50%, -50%) !important;
}
.loader::after, .loader::before {
    content:''; box-sizing:border-box; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;
    border:.5rem solid; border-color: transparent transparent var(--primary-color) var(--primary-color); width:6rem; 
    height:6rem; border-radius:50%; box-sizing:border-box; animation: rotationBack 0.5s linear infinite;
}
.loader::before {
    width:3.2rem; height:3.2rem; border-color:var(--font-color) var(--font-color) transparent transparent; 
    animation: rotation 1s linear infinite;
}   
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 
@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/* NAVBAR */
.navbar {
    background-color:var(--bg-color-1); padding:0rem; box-shadow:none; transition:.4s all; 
}
.navbar.fixed {
    box-shadow:.6rem .6rem 2rem .6rem var(--shadow-color-1); transition:.4s all; 
}
.nav-item {
    padding:0rem; margin-left:3rem;
}
.active .nav-link, .nav-item:hover .nav-link, .page-footer a:hover, .page-footer .active a, .page-footer .active, 
#lokasi .konten p a:hover, .kontakkami p a:hover {
    color:var(--primary-color) !important; transition:.2s all; text-decoration:none;
}
.navmenu .nav-link {
    color:var(--font-color); font:normal 1.6rem/2.56rem 'RobotoBold'; text-decoration:none; 
    text-align:center; transition: .2s all; letter-spacing:.09rem;
}
.logoheader {
    width:24rem;
}
.logoheadermobile, .slick-slide.slick-loading img, .slick-arrow.slick-hidden {
    display:none;
}
.logoheadermobile img, #warningmodal .modal-content img {
    width:100%;
}

/* HOME SECTION 1 */
.konten {
    border-radius:0; background-color:var(--bg-color-1); padding-top:5rem; padding-bottom:5rem; height:auto; margin-top:-2rem;
}
.konten .row .joinnow hr {
    margin-left:0;
}
#kontak .konten, #karir .konten, #produkkami .konten, #tentangkami .konten, #karirdetail .konten {
    padding-top:14rem;
}
#lokasi .konten, #visimisi .konten, #katalog .konten, #loker .konten {
    position:relative !important;
}
#home .konten {
    height:100vh;
}
#home img {
    width:82rem; position:absolute; right:0; top:10%;
}
#home h1 {
    margin:20rem 0rem 2rem;
}
#prinsip .card, #visimisi .card, #loker .card, #lokasi .konten .card, #katalog .card {
    padding:2.4rem 2.4rem 2.8rem; border-radius:1.4rem; border:none; box-shadow:.8rem .8rem 3rem .6rem var(--shadow-color-1);
}
#prinsip img, #visimisi img {
    width:6rem; align-self:center; margin-bottom:3rem;
}
#principal .konten, #loker .konten, #katalog .konten, #visimisi .konten, #lokasi .konten, #lokertitle .konten {
    background-color:var(--bg-color-2);
}
#principal p, #tentangkami h1, #karir p, #produkkami p, #katalog p, #lokertitle p, #budayakerja p, 
#loker .pepepe, #prinsip p, #visimisi p {
    text-align:center;
}
#principal img, #tentangkami img, .cardproduk img, .slick-slide img,
#lokasi .konten img, .carousel, .carousel-inner {
    width:100%; align-self:center; border-radius:1.4rem;
}
#karir img {
    width:100%; align-self:center; 
}
#principal .row, #loker .card, .cardproduk, .filterdepo, .prinsip1, .prinsip2, .prinsip3, #kategoriresult .row {
    margin-bottom:2rem;
}
#joinnow .konten {
    padding-bottom:15rem; background-color:var(--bg-color-3);
}
#joinnow img {
    width:50rem; position:absolute; left:0; margin-top:-10rem;
}
#warningmodal .modal-dialog {
    top:5%;
}
#warningmodal .modal-content {
    border-radius:1.4rem;
}
#warningmodal .close {
    font-size:2.6rem; color:rgb(18,18,18); float:right; outline:none; border:none; outline:none;
}

/* TENTANG KAMI SECTION */
#visimisi .tile1 {
    position:absolute; width:100% !important; left:0; top:-3.4rem;
}
#lokasi .tile2, #katalog .tile2, #loker .tile2 {
    position:absolute; width:100% !important; left:0; bottom:-2.6rem;
}
#visimisi .tile2 {
    position:absolute; width:100% !important; left:0; bottom:-3rem;
}
.cardvisi {
    height:100%; background-color:var(--primary-color);
}
.visimisicard p .fa {
    color: var(--primary-color) !important;
}
.cardvisi p {
    color:white; 
}
#visimisi .cardvisi img {
    width:15rem;
}

/* LOKASI KAMI SECTION */
#lokasi iframe {
    width:100%; height:100%; border-radius:1.4rem; border:0;
}
.filterdepo p {
    position: absolute; margin-left:-10rem; margin-top:.2rem;
}
.filterdepo .form-control {
    width:25rem; font:normal 1.4rem/2.24rem 'Roboto'; color:var(--font-color); letter-spacing:.05rem;
    padding:0rem 2rem 0rem 1rem; border-radius:1rem; outline:none; border-color:var(--border-color);
}
.filterdepo .form-control option {
    font:normal 1.4rem/2.24rem 'Roboto'; color:var(--font-color) !important; letter-spacing:.05rem;
}
.filterdepo .form-control:focus, #karirdetail .form-control {
    outline:none !important; box-shadow:none !important; border-color:var(--border-color);
}
#lokasi .konten h5, #katalog .card .row, .visimisicard {
    margin-top:1rem;
}

/* PRODUK KAMI SECTION */
#produkkami .konten {
    height:60rem;
}
.slick-slide {
    margin:0rem 2rem;
} 
.slick-slider {
    position:relative; display:block; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; 
    -ms-user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; user-select:none; -ms-touch-action:pan-y; 
    touch-action:pan-y; -webkit-tap-highlight-color:transparent;
}
.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, .slick-loading .slick-slide {
    visibility:hidden;
}
.slick-slide {
    display:none; float:left; height:100%; min-height:.1rem;
}
[dir='rtl'] .slick-slide, .filterdepo {
    float:right;
}
.slick-slide img, .slick-initialized .slick-slide {
    display:block;
}
.slick-slide.dragging img {
    pointer-events:none;
}
.slick-vertical .slick-slide {
    display:block; height:auto; border:.1rem solid transparent;
}
#katalog .cardkatalogbox {
    margin-top:-20rem; min-height:50rem;
}
#katalog .cardproduk {
    padding:2.4rem 1.4rem; border-radius:1.4rem; border:.1rem solid var(--border-color); height:30.2rem;
}
#kategoriresult hr {
    margin-top:0; width:100%; border:.1rem solid rgb(202,202,202); margin-bottom:2rem;
}
.cardunduh {
    margin-top:3rem; padding:2rem 4rem 4rem !important;
}
.cardunduh .unduhkatalog {
    border-right:.2rem solid var(--primary-color)
}
.cardunduh .unduhkontak h4, .cardunduh .unduhkontak .btnunduh {
    margin-left:6rem;
}

/*KARIR SECTION */
.carousel-control-prev {
    margin-left:-4rem;
}
.carousel-control-next {
    margin-right:-4rem;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    padding:4rem 2.4rem;
}
#karirdetail .form-control {
    font:normal 1.4rem/2.24rem 'Roboto'; color:var(--font-color); letter-spacing:.05rem;
    padding:2rem; border-radius:1rem; outline:none; border-color:var(--border-color);
}
#karirdetail .form-group {
    margin-bottom:4rem;
}
#karirdetail .card {
    height:60rem; overflow:auto; overflow-x:hidden; padding:1.6rem; border:none;
}
#budayakerja img {
    width:26rem; align-self: center; margin-bottom:.6rem; 
}
#budayakerja .kolom {
    padding:0rem 4rem; margin-bottom:3rem; margin-top:3rem;
}

/*KONTAK SECTION */
#kontak img {
    width:62rem; position:absolute; left:0;
}
#kontak h4 {
    margin-top:3rem; margin-bottom:1.4rem;
}
.kontakkami .row {
    margin-top:1.4rem; margin-bottom:1.4rem;
}
.iconkontak {
    width:5.8rem; height:5.8rem; background-color: var(--primary-color); border-radius:50%; 
    text-align:center; vertical-align:middle; line-height:5.8rem;
}
.kontakkami .fa {
    font-size:2.4rem; color:var(--bg-color-1);
}
.kontakkami h5, .kontakkami p {
    margin-left:2.6rem;
}

/* --FOOTER-- */
.page-footer {
    background-color:var(--bg-color-1); padding-top:5rem; padding-bottom:2rem; margin-top:-2rem;
}
.page-footer h5, #joinnow h2, #lokasi .konten h5, #lokasi .konten p, #karirdetail .card h5, #visimisi .visimisicard p,
#kontak h4, #kontak h5, #kontak h2, #loker .card h5, #loker .card p, #katalog h5, .cardunduh h4, #karirdetail h2 {
    text-align:left;
}
.page-footer h6 {
    text-align:center; margin-top:2rem;
}
.page-footer a, #lokasi .konten p a, .kontakkami p a {
    color:var(--font-color); transition:.2s all;
}
.page-footer ul li a, .info .kontakfooter {
    line-height:3rem !important;
}
.page-footer .info .fa {
    margin-right:1.6rem;
}
.informasi h5 {
    text-indent:3rem;
}

/* BUTTON */
.btntop {
    position:fixed; bottom:2rem; right:-5rem; z-index:100; border-radius:.8rem; 
    color:var(--bg-color-1); border:.2rem solid var(--primary-color); outline:none; background-color:var(--primary-color); 
    padding:.6rem 1.2rem !important; box-shadow:.4rem .4rem .8rem 0rem var(--shadow-color-2); transition:.2s all;
}
.btnprimary {
    background-color: var(--primary-color); padding:1.4rem 2.6rem; border:.2rem solid var(--primary-color); outline:none;
    font:bold 1.4rem/2.24rem 'Roboto' !important; color:var(--bg-color-1); border-radius:14rem;
    box-shadow:.4rem .4rem 1.4rem .2rem var(--shadow-color-2); transition:.2s all; letter-spacing:.09rem;
}
.btnprimary:hover, .btnprimary:focus, .btntop:hover, .btntop:focus, .btnkirim:hover, .btnkirim:focus {
    background-color:transparent;  outline:none; color:var(--primary-color); box-shadow:none; transition:.2s all;
}
.btnunduh {
    background-color: transparent; padding:1rem 2.6rem; border:.2rem solid var(--primary-color); outline:none;
    font:bold 1.4rem/2.24rem 'Roboto' !important; color:var(--primary-color); border-radius:14rem;
    box-shadow:none; transition:.2s all; letter-spacing:.09rem;
}
.btnunduh:hover, .btnunduh:focus {
    background-color:var(--primary-color); border:.2rem solid var(--primary-color); outline:none; color:var(--bg-color-1); 
    box-shadow:.4rem .4rem 1.4rem .2rem var(--shadow-color-2); transition:.2s all;
}
.btnkirim {
    background-color: var(--primary-color); padding:1rem 2.6rem; border:.2rem solid var(--primary-color); outline:none;
    font:bold 1.4rem/2.24rem 'Roboto' !important; color:var(--bg-color-1); border-radius:14rem;
    box-shadow:.4rem .4rem 1.4rem .2rem var(--shadow-color-2); transition:.2s all; letter-spacing:.09rem;
}

/* FONT */
h1 {
    font:normal 4.2rem/4.6rem 'RobotoBold'; color:var(--font-color); margin-bottom: 2rem; letter-spacing:.05rem;
}
h2 {
    font:normal 3.2rem/3.84rem 'RobotoBold'; color:var(--font-color); text-align:center; margin:0rem 0rem 1rem; letter-spacing:.05rem;
}
h3 {
    font:normal 2.8rem/3.84rem 'RobotoBold'; color:var(--font-color); text-align:left; margin:0rem 0rem 1rem; letter-spacing:.05rem;
}
h4 {
    font:normal 2.4rem/2.88rem 'RobotoBold'; color:var(--font-color); text-align:center; letter-spacing:.05rem;
}
h5 {
    font:normal 1.8rem/2.88rem 'RobotoBold'; color:var(--font-color) !important; text-align:center; letter-spacing:.05rem;
}
h6 {
    font:normal 1.4rem/2.24rem 'RobotoBold' !important; color:var(--font-color) !important; letter-spacing:.07rem;
}
p, .page-footer li, #visimisi li, .page-footer h6, #karirdetail ul li {
    font:normal 1.4rem/2.24rem 'Roboto' !important; color:var(--font-color); letter-spacing:.05rem;
}
.form-group ul li {
    font:normal 1.2rem/1.92rem 'Roboto' !important; color:var(--font-color); letter-spacing:.05rem;
}
hr {
    border:.2rem solid var(--primary-color); margin-bottom:4rem; width:12rem; border-radius:.2rem;
}
@media only screen and (min-width: 1201px) and (max-width: 1400px) {
    #home h1 {
        margin-top:18rem;
    }
    #home img {
        width:70rem; top:12%;
    }
    #joinnow img {
        width:48rem; 
    }
    #kontak img {
        width:58rem; position:absolute; left:0;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    #home img {
        top:10%; width:50%;
    }
    #home h1 {
        margin-top:18rem;
    }
    #joinnow .konten, #home .konten {
        height:auto; padding-bottom:5rem;
    }
    #joinnow img {
        width:32rem; margin-top:-2rem;
    }
    #kontak img {
        width:50rem;
    }
}
@media screen and (max-width: 1023px) {
    .navbar .container {
        padding:.8rem 1.6rem;
    }
    .navbar-collapse .navmenu {
        height:100vh; padding-top:50%;
    }
    .nav-item, .carousel-control-prev {
        margin-left:0 !important
    }
    .navmenu .nav-link {
        font:normal 2.2rem/3.52rem 'RobotoBold';
    }
    .toggler {
        outline:none; border:none; background-color:transparent; padding-left:0rem;
    }
    .logoheadermobile {
        display:block;
    }
    .toggler:focus, .toggler:active {
        outline:none; 
    }
    .icon-bar {
        display:block; width:4rem; height:.4rem; background-color:rgb(18,18,18); display:block; transition:.2s all; margin:.6rem 0rem; 
    }
    .navbar-toggler .top-bar {
        transform:translateY(1rem) rotate(-45deg);
    }
    .navbar-toggler .middle-bar {
        opacity: 0; filter: alpha(opacity=0);
    }
    .navbar-toggler .bottom-bar {
        transform:translateY(-1rem) rotate(45deg);
    }
    
    .navbar-toggler.collapsed .top-bar {
        transform: rotate(0);
    }
    .navbar-toggler.collapsed .middle-bar {
        opacity: 1; filter: alpha(opacity=100);
    }
    .navbar-toggler.collapsed .bottom-bar {
        transform: rotate(0);
    }
    .navlogo {
        display:none;
    }
    .logoheadermobile {
        width:35%; 
    }
    #home img {
        top:10%; width:50%;
    }
    #home h1 {
        margin-top:8rem;
    }
    #joinnow .konten, #home .konten {
        height:auto; padding-bottom:5rem;
    }
    #joinnow img {
        width:40rem; position:absolute; margin-top:-2rem;
    }

    #lokasi .form-control, #katalog .form-control {
        width:30rem;
    }
    #visimisi .tile1 {
        top:0;
    }
    #visimisi .tile2, #lokasi .tile2, #katalog .tile2, #loker .tile2 {
        bottom:-1rem; height:60rem;
    }
    #lokasi iframe {
        width:100%; height:100%; margin-top:0rem;
    } 
    
    .carousel-control-next {
        margin-right:0rem;
    }
    .cardunduh .unduhkontak h4, .cardunduh .unduhkontak .btnunduh {
        margin-left:4rem;
    }
    #katalog .cardkatalogbox {
        min-height:60rem;
    }
    #karirdetail .card {
        height:70rem;
    }
    #kontak img {
        width:60rem; position:absolute; left:0; top:12rem;
    }
    .kontakinfo {
        margin-top:65rem;
    }
    .page-footer .informasi h5 {
        text-indent:0rem !important;
    }
    .page-footer ul, #visimisi ul {
        margin-left:-2rem;
    }  
}
@media screen and (max-width: 767px) {
    html, body {
        font-size:58%;
    }
    .navbar .container {
        padding:.8rem 2.6rem;
    }
    .logoheadermobile {
        width:50%; 
    }
    #home .konten {
        padding-top:14rem;
    }
    #home img {
        width:100%; position:absolute; left:0; top:12rem;
    }

    .page-footer .info  {
        margin:.4rem 0rem;
    }
    #joinnow img {
        width:100%; margin-top:-10rem;
    }
    #joinnow .col-lg-8, #home h1 {
        margin-top:36rem;
    }

    .prinsip5 {
        margin-top:5rem;
    }
    #visimisi .tile2, #lokasi .tile2, #katalog .tile2, #loker .tile2 {
        bottom:0rem; height:60rem;
    }
    #lokasi .konten2 .card h5, #lokasi .konten2 .card p, .page-footer h6 {
        text-align:left;
    }
    #lokasi .form-control, #katalog .form-control {
        max-width:14rem;
    }
    #lokasi iframe {
        margin-bottom:1rem; height:30rem;
    }
    .cardproduk {
        height:auto !important;
    }
    .carousel-control-prev-icon, .carousel-control-next-icon {
        padding:2rem 1.4rem;
    }
    .cardunduh .unduhkatalog {
        border-right:0;
    }
    .cardunduh .unduhkontak {
        margin-top:3rem;
    }
    .cardunduh .unduhkontak h4, .cardunduh .unduhkontak .btnunduh {
        margin-left:0rem;
    }
    #budayakerja .kolom {
        padding:1.6rem;
    }
    #karirdetail .card {
        height:60rem; margin-top:2rem;
    }
    .kontakinfo {
        margin-top:46rem;
    }
    #kontak img {
        width:100%
    }
    .kontakkami h5, .kontakkami p {
        margin-left:1rem;
    }

    .page-footer {
        padding-left:1rem; padding-right:1rem;
    }
    .page-footer .info {
        margin:0rem 0rem 3rem;
    }
    .page-footer h5 {
        text-indent: 0rem !important;
    }
    .page-footer ul, #visimisi ul {
        margin-left:-2rem;
    }    
}