@font-face {
    font-family: konten;
    src: url(font/Outfit-Light.ttf);
    font-display: swap;
    font-weight: 700 !important;
}

/* ==== START GENERAL === */
html,
body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    font-family: konten;
    color: #363636;
    /* max-width: 100%; */
    /* max-height: 100%; */
    /* overflow: hidden; */
}

html {
    font-size: min(2.2vw, 16px);
    /* height: 100%; */
}

body {
    /* min-height: 100%; */
    /* display: flex;
    flex-direction: column; */
    font-weight: 700 !important;
}

p {
    font-weight: 700 !important;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
    color: #363636;
    font-family: konten;
}

a {
    cursor: pointer !important;
}

a:hover {
    color: #ffcc00 !important;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.text-underline {
    text-decoration: underline;
}

.text_dark {
    color: #363636;
}

.btn {
    background-color: #ffcc00 !important;
    color: #363636 !important;
    border-color: #ffcc00 !important;
    box-shadow: 0 3px 3px 0 #ffcc0026, 0 3px 1px -2px #ffcc0033, 0 1px 5px 0 #ffcc0026;
    border-radius: 20px;
    text-transform: none;
}

.btn-primary:hover,
.btn.bg-gradient-primary:hover {
    background-color: #ffcc00 !important;
    color: #363636 !important;
    border-color: #ffcc00 !important;
    box-shadow: 0 14px 26px -12px #ffcc0066, 0 4px 23px 0 #ffcc0066, 0 8px 10px -5px #ffcc0033 !important;
}

footer p {
    color: #585750;
    font-size: 1rem !important;
}

.rounded {
    border-radius: 20px !important;
}

#divrow {
    width: 70%;
}

#divrow h1 {
    letter-spacing: 0;
}

#divrow .row_logoKecil {
    margin-top: 10px;
}

.no_wrap {
    text-wrap: nowrap;
}

/* ==== END GENERAL === */
/* ==== START COMING SOON === */
#comingsoon {
    display: flex;
    flex-direction: column;
    /* min-height: 95vh; */
    /* min-height: 95dvh; */
    /* overflow: hidden; */
    /* overflow-x: hidden; */
}

#comingsoon #text_comingsoon {
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 1.5;
}

#comingsoon img {
    width: 95%;
}

#comingsoon .btn {
    width: 92%;
    padding: 6px 10px !important;
}

#comingsoon .btn p {
    font-size: 1.75rem;
}

#comingsoon>.container {
    min-height: 95vh;
    min-height: 95dvh;
}

.logo_branch {
    max-width: 100%;
    height: auto;
}

.logo_bk {
    max-width: 80%;
    height: auto;
}

.logo_gghype {
    max-width: 100%;
    height: auto;
}

.logo_own {
    max-width: 60%;
    height: auto;
}

.company_item {
    width: 92%;
}

.company_logo {
    border-radius: 10px;
    /* height: 5rem; */
    margin-left: auto;
    margin-right: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #d9d6b9;
}

.company_row img {
    height: auto !important;
    width: 70% !important;
    margin-bottom: auto;
    margin-top: auto;
    position: absolute;
    left: 50%;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.company_row>h2 {
    font-size: 2rem;
    white-space: nowrap;
}

.company_item h2 {
    font-family: konten;
    font-weight: 600;
    font-size: 1.3rem;
    text-decoration: none;
    color: #fff;
    margin-bottom: .25rem;
    letter-spacing: 0;
}

.company_row a {
    font-family: konten;
    font-weight: 600;
    font-size: 1.7rem;
    text-decoration: none;
    color: #fff;
}

.company_row a:hover h2,
.company_row a:active h2 {
    color: #363636 !important;
}

.vl {
    border-left: 2px white solid;
}

/* .gghype_logo img,
.satuka_logo img {
	height: 4rem !important;
	margin: .5rem 0 1.5rem 0;
} */

.bikingame_logo {}

.own_logo img {
    width: 50% !important;
}

.gghype_logo {}

/* ==== END COMING SOON === */
/* ==== START CAREER === */
#available_position {
    background-color: #f5efd9;
}

#available_position .fa-search {
    font-size: 2.5rem;
}

.career-item .icon_img,
#available_position .career-item .career-link:hover .career-hover {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: -1px -2px 8px 0px #a3987e;
}

.career-item .career-caption {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: -1px 1px 8px 0px #a3987e;
    ;
}

#header_career.d-md-none #divlogo p,
#available_position p.d-md-none {
    font-size: 1.6rem;
    line-height: 1.5;
}

@supports (-moz-appearance:none) {

    #header_career.d-md-none #divlogo p,
    #available_position p.d-md-none {
        font-size: 1.5rem;
        line-height: 1.5;
    }
}

_::-webkit-full-page-media,
_:future,
:root #header_career.d-md-none #divlogo p,
#available_position p.d-md-none {
    font-size: 1.25rem;
    line-height: 1.5;
}

.career-link {
    cursor: pointer;
}

#header_career {
    min-height: 100vh;
    min-height: 100dvh;
}

.text_mobile {
    width: 92%;
    margin: 0 auto;
}

.lang_option {
    top: 1rem;
    right: 1rem;
}

.lang_option a.active {
    text-decoration: underline;
    pointer-events: none;
}

p {
    font-size: 1.2rem;
}

.text_mobile p {
    font-size: 1.7rem;
}

.text_mobile .h1,
.text_mobile h1 {
    font-size: 1.7rem;
}

h1,
.h1 {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.career-link p {
    font-size: 1.7rem;
}

#available_position h2 {
    font-size: 2.75rem;
}

/* ==== END CAREER === */
/* =============================== */
/* ===== START CUSTOM STYLE ====== */
/* =============================== */
/* // SUPER SMALL PHONE */
@media (max-width: 320px) {

    .text_mobile .h1,
    .text_mobile h1 {
        font-size: 1.2rem;
    }

    .text_mobile p {
        font-size: 1.2rem;
    }

    .company_row>h2 {
        font-size: 1.4rem;
    }

    #comingsoon {
        max-height: 94dvh;
        max-height: 94vh;
    }

    #comingsoon #text_comingsoon {
        position: relative;
        font-size: 1.3rem;
    }

    #comingsoon #divlogo {
        /* margin-top: 2rem;
        margin-bottom: 2rem; */
        /* position: absolute;
        top: 20%;
        left: 0; */
    }

    #comingsoon>.container {
        min-height: 92vh;
    }

    #divrow {
        width: unset;
    }

    .company_row a {
        font-family: konten;
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        color: #fff;
    }

    #divbutton button {
        width: 93%;
    }

    #divbutton button p {
        font-size: 2rem;
    }

    #comingsoon .btn p {
        font-size: 1.5rem;
    }
}

/* // SMALL PHONE */
@media (min-width: 330px) {
    #divrow {
        width: unset;
    }

    #comingsoon #text_comingsoon {
        position: relative;
        font-size: 1.5rem;
    }

    #comingsoon #divlogo {
        /* margin-top: 5rem;
        margin-bottom: 5rem; */
        /* position: absolute;
        top: 20%;
        left: 0; */
    }

    #comingsoon #divtext {
        /* position: absolute;
        bottom: 12%;
        left: 0; */
    }

    #divbutton button {
        width: 93%;
    }

    #divbutton button p {
        font-size: 2rem;
    }
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    #comingsoon #text_comingsoon {
        position: relative;
        font-size: 1rem;
    }

    .company_item {
        width: 90%;
    }

    footer p {
        color: #585750;
        font-size: .6rem !important;
    }

    #comingsoon .btn {
        width: 90%;
    }
}

@media (width: 540px) and (height:720px) {
    html {
        font-size: 1.65vw;
    }
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #header_career {
        min-height: 100vh;
        min-height: 100dvh;
    }

    footer p {
        color: #847c6a;
        font-size: 0.8rem !important;
    }

    #comingsoon>.container {
        /* height: 100vh; */
        /* height: 100dvh; */
    }

    #comingsoon #text_comingsoon {
        font-size: 1rem;
        /* margin-bottom: 50px; */
    }

    #comingsoon .btn {
        width: 100%;
    }

    #comingsoon img {
        width: 100%;
    }

    #comingsoon .btn p {
        font-size: 1.2rem;
    }

    #comingsoon #divlogo {
        margin-top: unset;
        margin-bottom: unset;
        position: relative;
        top: unset;
        left: unset;
    }

    #comingsoon #divtext {
        position: relative;
        bottom: unset;
        left: unset;
    }

    #divrow .row_logoKecil {
        margin-top: unset;
    }

    .company_row>h2 {
        font-size: 2rem;
        white-space: nowrap;
    }

    .company_logo {
        border-radius: 20px;
        /* height: 5rem; */
        margin-left: auto;
        margin-right: auto;
        padding: 1.5rem 1rem;
    }

    .company_item {
        width: 100%;
    }

    .company_row a {
        font-family: konten;
        font-weight: 600;
        font-size: 1.3rem;
        text-decoration: none;
        color: #fff;
    }

}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    html {
        font-size: min(.9vw, 16px);
    }

    #divrow {
        width: 60%;
    }

    .logo_branch {
        max-width: 70%;
        height: auto;
    }

    .logo_bk {
        max-width: 70%;
        height: auto;
    }

    .logo_gghype {
        max-width: 90%;
        height: auto;
    }

    .logo_own {
        max-width: 55%;
        height: auto;
    }

    #comingsoon #text_comingsoon {
        font-size: 1rem;
        /* margin-bottom: 50px; */
    }

    #comingsoon .btn p {
        font-size: 1.2rem;
    }

    .company_row img {
        height: 3rem !important;
        margin: 1rem 0;
        width: auto !important;
        position: static;
        left: unset;
        top: unset;
        transform: unset !important;
    }

    .vl {
        border-left: unset;
    }

    .bikingame_logo img {
        height: 5rem !important;
        margin: 0;
    }

    .company_row a {
        font-family: konten;
        font-weight: 600;
        font-size: .7rem;
        text-decoration: none;
        color: #fff;
    }

    #divbutton .btn p {
        font-size: 1rem;
    }

    .company_item h2 {
        font-size: 1rem;
    }

    #available_position h2 {
        font-size: 2.25rem;
    }

    #available_position .career-item {
        max-width: 26rem;
        margin-left: auto;
        margin-right: auto;
    }

    .career-link p {
        font-size: 1.2rem;
    }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .company_row a {
        font-family: konten;
        font-weight: 600;
        font-size: .9rem;
        text-decoration: none;
        color: #fff;
    }

    #comingsoon #text_comingsoon {
        font-size: 1.2rem;
        /* margin-bottom: 50px; */
    }

    #comingsoon .btn p {
        font-size: 1.4rem;
    }
}

@media (min-width: 1400px) {
    #divrow {
        width: 75%;
    }

    #comingsoon #divlogo {
        /* margin-top: 5rem;
        margin-bottom: 5rem; */
        /* position: absolute;
        top: 20%;
        left: 0; */
    }

    #comingsoon #text_comingsoon {
        /* font-size: 14px; */
        margin-bottom: 50px;
    }

    .company_row a {
        font-family: konten;
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
        color: #fff;
    }
}

@media (min-width: 2000px) {
    #divrow {
        width: 75%;
    }

    #comingsoon>.container {
        max-width: 60%;
    }
}

@media (width: 712px) and (height:1138px) {
    .container {
        max-width: 95%;
    }

    .text_mobile .h1,
    .text_mobile h1 {
        font-size: 1.4rem;
    }

    .text_mobile p {
        font-size: 1.4rem;
    }

    html {
        font-size: min(2vw, 16px);
        /* height: 100%; */
    }

    footer p {
        font-size: 1rem !important;
    }

    #comingsoon>.container {
        min-height: 94vh;
        min-height: 94dvh;
    }
}

/* khusus ipad pro portrait */
@media (width: 1024px) and (height:1366px) and (orientation: portrait) {
    html {
        font-size: min(2.2vw, 16px);
    }

    #comingsoon>.container {
        min-height: 90vh;
        min-height: 90dvh;
    }

    #header_career {
        min-height: 100vh;
        min-height: 100dvh;
    }

    #divrow {
        width: 93%;
    }

    footer p {
        color: #847c6a;
        font-size: 1.8rem !important;
    }

    h1,
    .h1 {
        font-size: 1.7rem;
    }

    p {
        font-size: 1.7rem;
    }

    .company_item h2 {
        font-size: 1.3rem;
    }

    #comingsoon #text_comingsoon {
        font-size: 1rem;
        /* margin-bottom: 50px; */
    }

    #comingsoon .btn {
        width: 100%;
    }

    #comingsoon img {
        width: 100%;
    }

    #comingsoon .btn p {
        font-size: 1.75rem;
    }

    #comingsoon #divlogo {
        margin-top: unset;
        margin-bottom: unset;
        position: relative;
        top: unset;
        left: unset;
    }

    #comingsoon #divtext {
        position: relative;
        bottom: unset;
        left: unset;
    }

    #divrow .row_logoKecil {
        margin-top: unset;
    }

    .company_row>h2 {
        font-size: 2rem;
        white-space: nowrap;
    }

    .company_logo {
        border-radius: 20px;
        /* height: 5rem; */
        margin-left: auto;
        margin-right: auto;
        padding: 1.5rem 1rem;
    }

    .company_item {
        width: 100%;
    }

    .company_row a {
        font-family: konten;
        font-weight: 600;
        font-size: 1.7rem;
        text-decoration: none;
        color: #fff;
    }

    .lang_option {
        font-size: 2rem;
    }

    .vl {
        border-left: 2px white solid;
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 100%;
    }

    .vl.col-lg-12 {
        flex: 0 0 auto;
        width: 66.666667%;
        padding-left: 1.5rem;
    }

    .d-lg-none {
        display: block !important;
    }

    .text-lg-center {
        text-align: left !important;
    }

    .company_row img {
        height: 100% !important;
        width: auto !important;
        margin-bottom: auto;
        margin-top: auto;
        position: absolute;
        left: 50%;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .gghype_logo img {
        width: 74% !important;
        height: auto !important;
    }

    .own_logo img {
        width: 50% !important;
        height: auto !important;
    }

    .gghype_logo .mb-lg-3,
    .bikingame_logo .mb-lg-3,
    .own_logo .mb-lg-3 {
        margin-bottom: 0 !important;
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 100%;
    }

    .px-md-8 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .h2,
    h2 {
        font-size: 3.25rem;
    }

    .modal {
        font-size: 1.2rem;
    }

    footer {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    #modal_desc {
        font-size: 1.2rem;
    }

    #available_position p.d-md-block {
        font-size: 1.5rem;
    }
}

@media (width:820px) and (height:1180px) {
    .career-link p {
        font-size: 1rem;
    }
}

@media (width:768px) and (height:1024px) {
    #available_position p.d-md-block {
        font-size: 1.1rem;
    }

    .career-link p {
        font-size: 1rem;
    }
}

/* =============================== */
/* ===== END CUSTOM STYLE ====== */
/* =============================== */

#available_position .career-item {
    max-width: 39rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

#available_position .career-item .career-link {
    position: relative;
    display: block;
    margin: 0 auto;
}

#available_position .career-item .career-link .career-hover {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffcc00e0;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity ease-in-out 0.25s;
}

#available_position .career-item .career-link .career-hover .career-hover-content {
    font-size: 1.25rem;
    color: white;
}

#available_position .career-item .career-link:hover .career-hover {
    opacity: 1;
}

#available_position .career-item .career-caption {
    padding: 0.5rem;
    text-align: center;
    background-color: #fff;
}

#available_position .career-item .career-caption .career-caption-heading {
    font-size: 1.5rem;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    margin-bottom: 0;
}

#available_position .career-item .career-caption .career-caption-subheading {
    font-style: italic;
    font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.modal {
    height: 95vh !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    font-size: 1.2rem;
}

.modal-dialog {
    max-width: 85vw !important;
    margin: 1rem auto !important;
}

.modal-dialog,
.modal-content {
    height: 90vh !important;
    overflow: hidden;
}

.modal-content {
    padding: 0.5rem !important;
    border-radius: 20px;
}

.modal-header {
    border: none !important;
    padding: 1.5rem 1rem 1.5rem 1rem !important;
}

.modal-body {
    height: 90vh !important;
    overflow: auto;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

.close-modal {
    position: absolute !important;
    text-align: right;
    margin: 0;
    top: 10px !important;
    right: 15px !important;
    cursor: pointer;
    font-size: 36px;
}

.close-modal {
    max-height: 30px !important;
}

#modal_judul {
    max-width: 80%;
}

/* .career-item { */
/* box-shadow: -1px 1px 5px 1px lightgrey; */
/* } */

.list-group-item {
    display: list-item !important;
    border: none;
    padding-left: 0;
    padding-right: 0;
}