@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=GFS+Didot&subset=greek');

@font-face {
    font-family: 'Avenir LT Std Book';
    src: url('fonts/AvenirLTStd-Book.eot');
    src: url('fonts/AvenirLTStd-Book.eot?#iefix') format('embedded-opentype'), url('fonts/AvenirLTStd-Book.woff2') format('woff2'), url('fonts/AvenirLTStd-Book.woff') format('woff'), url('fonts/AvenirLTStd-Book.ttf') format('truetype'), url('fonts/AvenirLTStd-Book.svg#AvenirLTStd-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir LT Std Roman';
    src: url('fonts/AvenirLTStd-Roman.eot');
    src: url('fonts/AvenirLTStd-Roman.eot?#iefix') format('embedded-opentype'), url('fonts/AvenirLTStd-Roman.woff2') format('woff2'), url('fonts/AvenirLTStd-Roman.woff') format('woff'), url('fonts/AvenirLTStd-Roman.ttf') format('truetype'), url('fonts/AvenirLTStd-Roman.svg#AvenirLTStd-Roman') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir LT Std Black';
    src: url('fonts/AvenirLTStd-Black.eot');
    src: url('fonts/AvenirLTStd-Black.eot?#iefix') format('embedded-opentype'), url('fonts/AvenirLTStd-Black.woff2') format('woff2'), url('fonts/AvenirLTStd-Black.woff') format('woff'), url('fonts/AvenirLTStd-Black.ttf') format('truetype'), url('fonts/AvenirLTStd-Black.svg#AvenirLTStd-Black') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir LT Std Medium';
    src: url('fonts/AvenirLTStd-Medium.woff2') format('woff2'),
        url('fonts/AvenirLTStd-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir LT Std Heavy';
    src: url('fonts/AvenirLTStd-Heavy.woff2') format('woff2'),
        url('fonts/AvenirLTStd-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'latomedium';
    src: url('fonts/lato-medium-webfont.woff2') format('woff2'),
        url('fonts/lato-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('fonts/SourceSansPro-Bold.woff2') format('woff2'),
        url('fonts/SourceSansPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


.cl-black {
    color: #000;
}


.bg-putihabu{
    background-color:#f6f6f6;
}

.top-content h3 {
    line-height: 1.4;
    font-family: 'Avenir LT Std Black';
    font-weight: 300;
}

.search-job h4 {
    font-family: "Avenir LT Std Black";
    color: #fff;
    font-weight: 900;
    letter-spacing: normal;
    text-align: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.group-search .text-search-career,
.group-search .input-group-text,
.select-jobs {
    height: 41px;
    font-family: "Avenir LT Std Book";
    font-size: 16px;
    background: #f6f6f6;
}

.group-search .text-search-career::placeholder {
    color: #9b9b9b;
}

.group-search .input-group-text {
    background: #f6f6f6;
}

.custom-select.select-jobs {
    background: #f6f6f6 url('../img/angle-down.jpg') no-repeat;
    background-position-x: right;
}

.btn-search-jobs {
    font-family: 'Source Sans Pro', sans-serif;
    color: #fff;
    width: 154px;
    height: 41px;
    font-size: 14px;
    opacity: 0.87;
    border-radius: 21.9px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(to bottom, #fcd43c, #f8aa1c);
}

.nav-tabs.nav-career .nav-link {
    font-family: "Avenir LT Std Medium";
    color: #4a4a4a;
    font-size: 20px;
    width: 50%;
    text-align: center;
    border: none;
    border-radius: 7px 7px 0px 0px;
    padding: 15px 15px;
}

.nav-tabs.nav-career .nav-link.active {
    font-family: "Avenir LT Std Black";
    box-shadow: 0 -10px 11px 0 rgba(0, 0, 0, 0.08);
}

.nav-tabs.nav-dis .nav-link{
    font-family: "Avenir LT Std Medium";
    color: #4a4a4a;
    font-size: 20px;
    /*width: 50%;*/
    text-align: center;
    border: none;
    /*width:15%;*/
    padding: 15px 15px;
    box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.08);
    border-radius: 7px 0px 0px 7px;
}
.nav-tabs.nav-dis .nav-link:nth-child(2){
    border-radius: 0px 7px 7px 0px;
}
.nav-tabs.nav-dis .nav-link.active{
    font-family: "Avenir LT Std Black";
    /* box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.08); */
}

.content-jobs {
    background: #fff;
}

.content-jobs h3 {
    font-family: "Avenir LT Std Heavy";
    font-size: 25px;
    margin-bottom: 15px;
}

.content-jobs p {
    font-family: 'Avenir LT Std Roman';
    font-size: 16px;
    margin-bottom: 5px;
}

.content-jobs .tab-pane {
    border-radius: 0px 0px 7px 7px;
    box-shadow: 0 -2px 11px 0 rgba(0, 0, 0, 0.08);
}
.content-peta .tab-pane{
    border-radius: 0px 0px 7px 7px;
}

.img-list-job {
    width: 100%;
    max-width: 210px;
    height: 118px;
    object-fit: contain;
}

.desc-list-jobs h5 {
    font-family: "Avenir LT Std Heavy";
    font-size: 18px;
    margin-bottom: 15px;
}

.desc-list-jobs h4 {
    font-family: "Avenir LT Std Heavy";
    font-size: 20px;
}

.desc-list-jobs ul,
.desc-list-jobs ol {
    padding-left: 13px;
}

.w-84 {
    width: 84%;
}

.rowlistjob {
    margin-bottom: 20px;
    border-bottom: 1px solid #dee2e6;
}

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

.desc-list-jobs .detail {
    color: #f5a623;
    font-family: "Avenir LT Std Book";
}

.line-short {
    width: 26px;
    height: 3px;
}

.hidden {
    display: none;
}

.desc_content h5 {
    font-size: 16px;
    font-family: "Avenir LT Std Heavy";
    color: #000;
}

.desc_content p {
    font-family: 'Avenir LT Std Roman';
    font-size: 16px;
    color: #686868;
}

.apply-cv {
    background-color: #fffbf4;
    line-height: 1.69;
    font-family: 'Avenir LT Std Roman';
    font-size: 16px;
    color: #686868;
}

.apply-cv b,
.apply-cv strong {
    font-family: "Avenir LT Std Heavy";
    color: #000;
}

.line-short-black {
    width: 76px;
    height: 6px;
    background-color: #000000;
}

.form-question {
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.11);
    background-color: #ffffff;
}

.head-question {
    width: 100%;
    height: 100px;
    border-radius: 13px 13px 0px 0px;
    background-color: #f53f55;
    border-bottom: 9px solid #f1223c;
}

.foot-question {
    border-radius: 0px 0px 13px 13px;
}

.head-question.redbg {
    border-bottom: 9px solid #c20118;
}

.head-question h4 {
    font-family: "Avenir LT Std Black";
    font-size: 25px;
    color: #fff;
    letter-spacing: 0.54px;
    line-height: 27px;
    margin-bottom: 0px;
}

.label-form {
    font-size: 20px;
    font-family: "latomedium";
    color: #4a4a4a;
    letter-spacing: 0.4px;
}

.label-form img {
    margin-right: 5px;
    width: 26px;
    height: 25px;
    object-fit: contain;
    vertical-align: sub;
    margin-bottom: 0px;
    border:none;
}

.txt-form,
.select-form {
    width: 100%;
    border: none;
    border-bottom: 1px solid #eaeaea;
    padding: 7px 10px;
    margin-top: 10px;
    font-family: "latomedium";
    font-size: 16px;
}

.btn-quis {
    font-family: "Source Sans Pro";
    font-size: 14px;
    color: #fff;
    width: 185.5px;
    height: 43.7px;
    opacity: 0.87;
    border-radius: 21.9px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
    background: #fcd43c;
    background: -moz-linear-gradient(top,  #fcd43c 0%, #f8aa1c 100%);
    background: -webkit-linear-gradient(top,  #fcd43c 0%,#f8aa1c 100%);
    background: linear-gradient(to bottom,  #fcd43c 0%,#f8aa1c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd43c', endColorstr='#f8aa1c',GradientType=0 );
    border: none;
}

.btn-quis-prev {
    font-family: "Source Sans Pro";
    font-size: 14px;
    color: #fff;
    width: 185.5px;
    height: 43.7px;
    opacity: 0.87;
    border-radius: 21.9px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
    background-color: #686868;
}

.container-select label.select_ques {
    border: 1px solid #d7d7d7;
    border-radius: 23.5px;
    font-family: "Avenir LT Std Book";
    font-size: 20px;
    color: #686868;
    padding: 10px;
    width: 100%;
    position: relative;
    cursor: pointer;
}

.container-select input[type="radio"]:checked+label.select_ques {
    background-color: #5cac00;
    color: #fff;
    font-family: "Avenir LT Std Heavy";
}

.select_ques i {
    display: none;
}

.container-select input[type="radio"]:checked+label.select_ques i {
    display: block;
    float: right;
    line-height: 30px;
}

.container-select label.select_circle {
    width: 150px;
    height: 150px;
    border: solid 1px #d7d7d7;
    font-family: "Avenir LT Std Book";
    font-size: 20px;
    color: #686868;
    position: relative;
    cursor: pointer;
    padding: 15px
}

.container-select input[type="radio"]:checked+label.select_circle {
    background-color: #5cac00;
    border: solid 1px #5cac00;
    color: #fff;
    font-family: "Avenir LT Std Heavy";
}


.box-btn {
    left: 0px;
    bottom: -22px;
}

.prod-result {
    width: 187px;

}

.prod-result img {
    width: 187px;
    height: 277px;
    object-fit: contain;
    margin-bottom: 10px;
    border:none;
}

.title-prod-result {
    font-family: "Avenir LT Std Black";
    font-size: 20px;
    color: #fff;
    height: 60px;
}

.box-all-result {
    height: 300px;
}

.box-prod {
    bottom: 17px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 7px;
}

.box-prod a{

}


.box-prod::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

.box-prod::-webkit-scrollbar
{
    width: 3px;
    background-color: #F5F5F5;
    height: 6px;
}

.box-prod::-webkit-scrollbar-thumb
{
    background-color: #F5A623;
    border: 1px solid #F5A623;
}

.btn-search-dis{
    font-family: "Source Sans Pro";
    letter-spacing: 0.68px;
    font-size: 16px;
    color: #fff;
    width: 154px;
    border-radius: 5px;
    background-color: #f5a623;
}

.txt-search{
    font-family: "Avenir LT Std Book";
    font-size: 16px;
    height: 55px;
}
.txt-search::placeholder{
    color:#9b9b9b;
}

.bx-info{
    top:0px;
    bottom:0px;
}

.info-dis{
    font-family: 'Avenir LT Std Medium';
    font-size:20px;
    color:#4a4a4a;
}

.lbl-filter{
    width:134px;
    font-size:20px;
    font-family: 'Avenir LT Std Medium';
    color:#9b9b9b;
}
.select-filter{
    width:30%;
}

.title-item-dis{
    font-family: "Avenir LT Std Black";
    font-size: 20px;
    height: 82px;
    color:#000;
    line-height: normal;
}
.bx-distributor{
    border-radius: 3px;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.06);
    background-color: #ffffff;
}

.map-dis{
    height: 500px;
}

.lbl-dis{
    font-family: "Avenir LT Std Heavy";
    font-size:18px;
    color:#f53f55;
}

.isi-dis{
    font-family: 'Avenir LT Std Roman';
    font-size: 16px;
    color: #686868;
    height: 72px;
    overflow: hidden;
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
    .map-dis{
        height: 300px;
    }
    .nav-tabs.nav-dis .nav-link{
        font-size: 16px;
    }
    .info-dis{
        font-size: 16px;
    }
    .select-filter{
        width: 100%;
    }
    .txt-search{
        font-size: 14px;
        height: 40px;
    }
    .btn-search-dis{
        width: 80px;
    }
    .bg-red span img{
        height: 15px;
        width: auto;
    }
    .top-content h3{
        font-size: 24px;
    }
    .isi-dis{
        height: auto;
    }
    .title-item-dis{
        height: auto;
    }
    .head-question{
        padding-left: 1em;
        padding-right: 1em;
    }
    .head-question h4{
        font-size: 18px;
        text-align: center;
    }
    .label-form{
        font-size: 16px;
    }
    .label-form img{
        width: 20px;
        height: 18px;
    }
    .txt-form, .select-form{
        font-size: 14px;
    }
    .btn-quis, .btn-quis-prev{
        width: 150px;
        height: 35px;
        font-size: 12px;
    }
    .container-select label.select_ques{
        font-size: 14px;
    }
    .container-select input[type="radio"]:checked+label.select_ques i{
        line-height: 20px;
    }
    .container-select label.select_circle{
        width: 130px;
        height: 130px;
        font-size: 14px;
    }
    .w-84{
        width: 100%;
    }
    .nav-tabs.nav-career .nav-link{
        font-size: 14px;
        text-align: left;
    }
    .apply-cv{
        font-size: 14px;
    }
}