body {
    background-color: #303030;
    margin: auto;
    padding: auto;
    width: 100%;
    font-size: 16px;
    line-height: normal;
    color: #fff;
}

@font-face {
    font-family: dinpro;
    src: url('//assets.kontan.co.id/images/fonts/DINPro/DINPro-Regular_13937.ttf');
}

@font-face {
    font-family: bebas;
    src: url('//assets.kontan.co.id/images/fonts/BebasNeue/bebas_neue.TTF');
}

h6 {
    font-size: 16px !important;
    word-spacing: 2px;
}

h5 {
    font-size: 21px !important;
    word-spacing: 2px;
}

h4 {
    font-size: 30px !important;
    word-spacing: 5px;
}

h3 {
    font-size: 34px !important;
    word-spacing: 10px;
}

.dt {
    top: 25px !important;
}

a {
    color: white;
}

hr {
    width: 1095px;
    margin-left: -13px;
}

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clear {
    clear: both;
}

.navbar-header {
    padding: 5px 110px 10px;
}

.mrtb-10 { margin: 15px 0;}

#myNavbar {
    font-family: bebas;
    word-spacing: 5px;
    padding-top: 30px;
    padding-right: 110px;
    font-size: 19px;
}

#myNavbar ul li.active {
    background: #4d4c4c;
}

div.container-fluid {
    width: 100%;
    background-color: #000;
    border-bottom: 2px solid #f5ab07;
}

.container {
    max-width: 1100px;
    margin: auto;
}

.text-content {
    font-family: Arial, sans-serif;
    font-size: 18px;
    word-spacing: normal;
    line-height: 1.5px;
}

p {
    margin: 25px 0;
    line-height: normal;
}

.subjudul-atas {
    color: #febe14;
    font-family: bebas;
    font-size: 14px;
    word-spacing: 5px;
}

.subjudul-bawah {
    font-size: 12px;
    padding-bottom: 10px;
}

.share-btn {
    font-family: bebas;
}

.total-count {
    color: #fbbc14;
    font-size: 36px;
    margin-bottom: 20px;
    padding-left: 15px;
}

.facebook,
.twitter,
.google {
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
}

.socmed {
    margin-top: -35px;
    padding-left: 75px;
    position: absolute;
}

.fa-facebook {
    background-color: #3B5998;
    padding: 5px 10px;
}

.fa-twitter {
    background-color: #5bc0de;
    padding: 5px 10px;
}

.fa-google-plus {
    background-color: #d9534f;
    padding: 5px 10px;
}

.r1 {
    position: relative;
    float: right;
    clear: right;
    width: 300px;
    height: 250px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin: 3px !important;
}

.r2 {
    position: relative;
    float: right;
    clear: right;
    width: 300px;
    height: 250px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin: 3px !important;
}


.col-sm-2{
    padding-left: 4px;
    padding-right: 4px;   
}

.col-sm-3 {
    padding-left: 5px;
    padding-right: 5px;
}

.col-sm-4 {
/*    padding-left: 3px;
    padding-right: 3px;
    margin-top: -5px;*/
}

.col-sm-6 {
    padding-left: 3px;
    padding-right: 3px;
/*    margin-top: -10px;
    margin-bottom: 3px;*/
}

.col-sm-8 {
/*    padding-left: 3px;
    padding-right: 3px;
    margin-top: -10px;*/
}


.penampang_paging {
    background-color: #000  !important;
    width: 100%;
    height: 30px;
    margin-top: 25px;
    margin-bottom: 13px;
}

.penampang_paging_dut {
    background-color: #000;
    width: 102%;
    height: 30px;
    margin-top: 25px;
    margin-bottom: 13px;
    margin-left: -10px;
}

.terbaru{
    width:100%;
    height:230px;
}

.title {
    margin: 0 0 1em 0;
    font-family: bebas;
    font-size: 40px;
}

.title-left {
    font-family: bebas;
    font-size: 40px;
}

.fleft {
    float: left;
    padding-top: 25px;
    margin-left: -12px;
}

.fright {
    float: right;
    padding-top: 15px;
    margin-top: 40px;
    margin-right: -15px;
}

.section {
    padding-top: 50px;
    line-height: 0.1;
    text-align: center;
}

.section span {
    display: inline-block;
    position: relative;
}

.section span:before,
.section span:after {
    content: "";
    position: absolute;
    height: 5px;
    border-top: 1px solid white;
    top: 0;
    width: 300px;
}

.section span:before {
    right: 100%;
    margin-right: 15px;
}

.section span:after {
    left: 100%;
    margin-left: 15px;
}

.item {
    padding-bottom: 5px;
    position: relative;
}

.item a img {
    width: 100%; 
    height: 130px;
     object-fit: cover;
}

.image-caption {
    width: 100%;
    background-color: #000;
    opacity: 0.85;
    filter: alpha(opacity=60);
    position: absolute;
    text-align: left !important;
    font-family: dinpro;
    padding-left: 10px;
    float: none;
    position: absolute;
    bottom: 5px;
}

.image-caption-ps {
    width: 361px;
    background-color: #000;
    position: absolute;
    text-align: left !important;
    color: #fff;
    margin-top: -37px;
    padding-left: 10px;
    float: none;
}

.image-caption-ps-8 {
    width: 727px;
    background-color: #000;
    position: absolute;
    text-align: left !important;
    color: #fff;
    margin-top: -43px;
    padding-left: 10px;
    float: none;
}

.image-caption-8 {
    width: 750px;
    background-color: #000;
    opacity: 0.6;
    filter: alpha(opacity=60);
    position: absolute;
    text-align: left !important;
    color: #fff;
    margin-top: -65px;
    padding-left: 10px;
    float: none;
}

.image-caption-6 {
    width: 578px;
    background-color: #000;
    opacity: 0.6;
    filter: alpha(opacity=60);
    position: absolute;
    text-align: left !important;
    color: #fff;
    margin-top: -40px;
    padding-left: 10px;
    float: none;
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    margin-bottom: -15px;
    left: 0 !important;
    right: 0 !important;
    text-align: left !important;
    padding-left: 15px;
    float: none;
    width: auto;
}

.carousel-caption-dt {
    font-family: dinpro;
    font-size: 16px;
    margin-bottom: -20px;
    margin-top: 20px;
    left: 0 !important;
    right: 0 !important;
    text-align: left !important;
    float: none;
    width: auto;
}

.carousel-caption-dt>h5 {
    font-family: dinpro;
    font-size: 20px;
    font-weight: bold;
}

#myCarousel {
    width: 790px;
    height: 510px;
}

.carousel-inner img {
    width: 100%;
    /* Set width to 100% */
    min-height: 200px;
}

.carousel-inner>.item>a>img {
    height: 510px!important;
}

.ft,
.kb,
.kd,
.pst {
    margin-left: 140px !important;
    width: 75% !important;
}

.dut {
    width: 600px;
    margin-top: 50px;
    padding-right: 100px;
}


/* carousel */

.media-carousel {
    margin-bottom: 0;
    padding: 0;
    margin-top: 15px;
}


/* Previous button  */

.media-carousel .carousel-control.left {
    left: 0;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.5) 100%);
    background-repeat: repeat-x;
    height: 410px;
    width: 95px;
    margin-top: -10px;
}


/* Next button  */

.media-carousel .carousel-control.right {
    right: 0;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.5) 100%);
    background-repeat: repeat-x;
    height: 410px;
    width: 95px;
    margin-top: -10px;
}


/* Changes the position of the indicators */

.media-carousel .carousel-indicators {
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-right: -19px;
}


/* Changes the colour of the indicators */

.media-carousel .carousel-indicators li {
    background: #c0c0c0;
}

.media-carousel .carousel-indicators .active {
    background: #333333;
}

.media-carousel img {
    width: 500px;
    height: auto;
}


/* End carousel */

.carousel-control-hd {
    height: 52px;
    font-size: 17px;
    position: absolute;
    text-align: center;
    top: 220px;
    width: 52px;
    margin-left: 20px;
    margin-right: 20px;
}

.carousel-control-hd.hdright {
    right: 0;
}

.carousel-control-hd.hdleft {
    left: 0;
}

.carousel-control-dt-kb.dtright {
    background-color: rgba(0, 0, 0, 0.3);
    right: 20px;
    width: 75px;
    height: 75px;
}

.carousel-control-dt-kb.dtleft {
    background-color: rgba(0, 0, 0, 0.3);
    left: 20px;
    width: 75px;
    height: 75px;
}

.carousel-control-dt.dtright {
    background-color: rgba(0, 0, 0, 0.3);
    right: 20px;
    width: 75px;
    height: 75px;
}

.carousel-control-dt.dtleft {
    background-color: rgba(0, 0, 0, 0.3);
    left: 20px;
    width: 75px;
    height: 75px;
}

.carousel-control-dut.dutright {
    background-color: rgba(0, 0, 0, 0.3);
    right: 20px;
    width: 75px;
    height: 75px;
    margin-top: 120px;
}

.carousel-control-dut.dutleft {
    background-color: rgba(0, 0, 0, 0.3);
    left: 20px;
    width: 75px;
    height: 75px;
    margin-top: 120px;
}

.carousel-control-dtps.dtright {
    background-color: rgba(0, 0, 0, 0.3);
    right: 20px;
    width: 75px;
    height: 75px;
}

.carousel-control-dtps.dtleft {
    background-color: rgba(0, 0, 0, 0.3);
    left: 20px;
    width: 75px;
    height: 75px;
}

.carousel-control-dt {
    background-color: rgba(0, 0, 0, 0);
    bottom: 335px;
    color: #fff;
    font-size: 25px;
    opacity: 100%;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    top: 260px;
    width: 8%;
}

.carousel-control-dt-kb {
    background-color: rgba(0, 0, 0, 0);
    bottom: 335px;
    color: #fff;
    font-size: 25px;
    opacity: 100%;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    top: 260px;
    width: 8%;
}

.carousel-control-dut {
    background-color: rgba(0, 0, 0, 0);
    bottom: 335px;
    color: #fff;
    font-size: 25px;
    opacity: 100%;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    top: 260px;
    width: 8%;
}

.carousel-control-dtps {
    background-color: rgba(0, 0, 0, 0);
    bottom: 460px;
    color: #fff;
    font-size: 25px;
    opacity: 100%;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    top: 260px;
    width: 8%;
}

#pageCarousel {
    background-color: #444444;
    padding-top: 30px;
    padding-bottom: 30px;
}

#pageCarousel1 {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 30px;
}

footer {
    width: 100%;
    background-color: #000;
    padding: 25px;
    font-size: 12px;
    border-top: 2px solid #f5ab07;
}

.policy {
    float: left;
    padding-left: 113px;
}

.copyright {
    float: right;
    padding-right: 113px;
}

#owl-demo .item {
    padding: 30px 0;
    margin: 5px;
}

#owl-demo .item img {
    -webkit-box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
}

#owl-demo .item p {
    font-size: 18px;
}

.owl-pagination {
    display: none;
}

.owl-theme .owl-controls .owl-buttons div {
    background: #000 none repeat scroll 0 0!important;
}

.owl-prev {
    position: absolute;
    padding: 98px 30px!important;
    left: -1px;
    top: 30px;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.5) 100%) !important;
    background-repeat: repeat-x!important;
    border-radius: 0!important;
    font-size: 50px!important
}

.owl-prev>.fa {
    color: #fff !important;
}

.owl-next {
    position: absolute;
    padding: 98px 30px!important;
    right: -1px;
    top: 30px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.5) 100%) !important;
    background-repeat: repeat-x!important;
    border-radius: 0!important;
    font-size: 50px!important
}

.owl-next>.fa {
    color: #fff !important;
}

@media screen and (max-width: 800px) {
    h6 {
        font-size: 11px !important;
        word-spacing: 2px;
    }
    h5 {
        font-size: 20px !important;
        word-spacing: 2px;
    }
    h4 {
        font-size: 26px !important;
        word-spacing: 5px;
    }
    h3 {
        font-size: 28px !important;
        word-spacing: 10px;
    }
    .r1,
    .r2 {
        padding: 20px!important;
        margin-right: 188px!important;
    }
    .dt {
        top: 20px !important;
    }
    .subjudul-atas {
        padding-top: 15px;
    }
    .navbar-header {
        padding: 5px 10px 10px;
        width: auto;
        height: auto;
    }
    .navbar-toggle {
        margin: 25px 5px 0;
        padding: 10px;
    }
    #myNavbar {
        width: auto;
        padding-right: 20px;
        padding-top: 27px;
        padding-bottom: 0;
        font-size: 14px;
        word-spacing: 3px;
    }
    .nav > li > a {
        padding-left: 10px!important;
        padding-right: 10px!important;
    }
    div.container-fluid {
        width: 100%;
        background-color: #000;
        border-bottom: 3px solid #f68d21;
        margin-bottom: auto;
    }
    .fleft {
        margin-left: -10px;
    }
    .fright {
        margin-right: -10px;
        padding-top: 16px;
    }
    hr {
        width: auto;
        margin-left: -10px;
    }
    .section span:before,
    .section span:after {
        width: 200px;
    }
    #myCarousel {
        height: auto;
        width: auto;
        padding: 25px;
        /*margin-left: -28px;*/
    }
    .carousel-inner>.item>a>img {
        height: auto!important;
        width: 100%;
    }
    .carousel-control-dt-kb.dtright,
    .carousel-control-dtps.dtright,
    .carousel-control-dt.dtright {
        right: 15px;
    }
    .carousel-control-dt-kb.dtleft,
    .carousel-control-dtps.dtleft,
    .carousel-control-dt.dtleft {
        left: 15px;
    }
    .carousel-control-hd.hdright {
        right: 10px;
    }
    .carousel-control-hd.hdleft {
        left: 10px;
    }
    .carousel-control.right {
        left: auto;
        right: 119px;
        margin-top: 20px;
    }
    .carousel-control.left {
        margin-top: 20px;
    }
    .carousel-control-dt,
    .carousel-control-dtps {
        top: 190px;
    }
    .carousel-control-dt-kb {
        top: 155px;
    }
    .carousel-control-dut {
        top: 130px;
    }
    .carousel-caption {
        right: 0 !important;
    }
    .carousel-caption-dt {
        padding-left: 0;
    }
    .col-sm-4 {
        padding-left: 5px;
        padding-right: 5px;
        margin-top: -4px;
    }
    .col-sm-8 {
        padding-left: 5px;
        padding-right: 5px;
        margin-top: -4px;
    }
    .ft,
    .kb,
    .kd,
    .pst {
        margin-left: 90px !important;
        width: 75% !important;
    }
    .dut {
        margin-top: 0;
        width: auto;
    }
    .image-caption {
        width: 100%;
        margin-top: -32px;
        padding-left: 10px;
        float: none;
    }
    .image-caption-ps {
        margin-top: -32px;
        width: 100%;
    }
    .image-caption-ps-8 {
        width: 490px;
        margin-top: -42px;
    }
    .policy {
        float: left;
        padding-left: 15px;
    }
    .copyright {
        float: right;
        padding-right: 15px;
    }
    .terbaru{
        width:100%;
    }
    .penampang_paging {
        width: 740px;
        margin-left: 5px;
    }
    .penampang_paging_dut {
        width: 740px;
        margin-left: -10px;
    }
    .media-carousel img {
        width: 800px;
        height: 300px;
    }
    .media-carousel .carousel-control.left {
        left: 0;
        height: 310px;
        width: 80px;
        margin-top: -4px;
    }
    .media-carousel .carousel-control.right {
        right: 0;
        height: 310px;
        width: 80px;
        margin-top: -4px;
    }
    .owl-prev,
    .owl-next {
        padding: 75px 25px!important;
    }
}


/* Hide the carousel text when the screen is less than 600 pixels wide */

@media screen and (max-width: 600px) {
    h6 {
        font-size: 16px !important;
        word-spacing: 2px;
    }
    .r1,
    .r2 {
        margin-right: 175px!important;
    }
    .dt {
        top: 15px !important;
    }
    .navbar-header {
        padding: 5px 0 10px;
    }
    .navbar-toggle {
        margin: 25px 0 0;
    }
    .section span:before,
    .section span:after {
        width: 125px;
    }
    .fleft {
        margin-left: 0;
    }
    .fright {
        margin-right: 0;
    }
    hr {
        margin-left: 0;
        width: 570px;
    }
    .penampang_paging {
        margin-left: 15px;
        margin-right: 15px;
        width: calc(100% - 30px);
    }
    .penampang_paging_dut {
        margin-left: 0;
        width: 570px;
    }
    .col-sm-4,
    .col-sm-8 {
        padding-left: 15px;
        padding-right: 15px;
    }
    #myCarousel {
        width: 600px;
        padding: 15px;
        margin-left: -15px;
    }
    .carousel-inner>.item>a>img {
        height: auto!important;
    }
    .carousel-control-hd {
        width: 5%;
    }
    .carousel-control-hd.hdleft {
        left: 10px;
    }
    .carousel-control-hd.hdright {
        right: 30px;
    }
    .carousel-control-dt-kb,
    .carousel-control-dt,
    .carousel-control-dtps,
    .carousel-control-dut {
        top: 35%;
    }
    .carousel-control-dt-kb.dtleft,
    .carousel-control-dtps.dtleft,
    .carousel-control-dt.dtleft {
        left: 10px;
    }
    .carousel-control-dt-kb.dtright,
    .carousel-control-dtps.dtright,
    .carousel-control-dt.dtright {
        right: 10px;
    }
    .ft,
    .kb,
    .pst {
        padding: 10px;
        margin-left: 0 !important;
        width: 100% !important;
    }
    .kd {
        padding: 35px;
        margin-left: 50px !important;
        width: 100% !important;
    }
    .image-caption,
    .image-caption-ps,
    .image-caption-ps-8 {
        width: 100%;
        margin-top: -37px;
    }
    .carousel-caption {
        display: none;
    }
    .media-carousel .carousel-control.left {
        left: 0;
    }
    .media-carousel .carousel-control.right {
        right: 0;
    }
    .policy {
        display: none;
    }
    .copyright {
        padding: 5px 178px 5px;
    }
    .owl-prev,
    .owl-next {
        padding: 67px 25px!important;
    }
}

@media screen and (max-width: 480px) {
    p {
        font-size: 14px;
    }
    .section span:before,
    .section span:after {
        width: 75px;
    }
    .r1,
    .r2 {
        margin-right: 82px!important;
        /*margin: 0 auto!important;*/
    }
    .ft,
    .kb,
    .pst {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .kd {
        margin-left: 50px !important;
        padding: 10px;
        width: 100% !important;
    }
    .col-sm-4,
    .col-sm-8 {
        padding-left: 10px;
        padding-right: 10px;
    }
    .fleft {
        margin-left: -4px;
    }
    .fright {
        margin-right: -4px;
    }
    hr {
        margin-left: -4px;
        width: 459px;
    }
    .penampang_paging {
        margin-left: 10px;
        width: 460px;
    }
    .penampang_paging_dut {
        margin-left: -5px;
        width: 460px;
    }
    #myCarousel {
        width: auto;
        margin-left: 0px;
    }
    .carousel-control-hd.hdleft {
        top: 114px;
        left: 10px;
    }
    .carousel-control-hd.hdright {
        top: 114px;
        right: 35px;
    }
    .carousel-control-dt-kb.dtleft,
    .carousel-control-dtps.dtleft,
    .carousel-control-dut.dutleft,
    .carousel-control-dt.dtleft {
        height: 55px;
        width: 55px;
        left: 10px;
    }
    .carousel-control-dut.dutright,
    .carousel-control-dt.dtright,
    .carousel-control-dt-kb.dtright,
    .carousel-control-dtps.dtright {
        height: 55px;
        width: 55px;
        right: 10px;
    }
    .carousel-control-dt,
    .carousel-control-dtps,
    .carousel-control-dt-kb {
        top: 35%;
    }
    .carousel-control-dut {
        top: 20%;
    }
    .image-caption,
    .image-caption-ps,
    .image-caption-ps-8 {
        width: 100%;
    }
    .carousel-caption-dt>p {
        width: 90%;
    }
    .copyright {
        padding: 5px 86px;
    }
    .owl-prev,
    .owl-next {
        padding: 45px 20px!important;
    }
}


@media screen and (max-width: 400px) {
    p {
        font-size: 14px;
    }
    .section span:before,
    .section span:after {
        width: 75px;
    }
    .r1,
    .r2 {
        margin-right: 55px!important;
        /*margin: 0 auto!important;*/
    }
    .ft,
    .kb,
    .pst {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .kd {
        margin-left: 50px !important;
        padding: 10px;
        width: 100% !important;
    }
    .col-sm-4,
    .col-sm-8 {
        padding-left: 10px;
        padding-right: 10px;
    }
    .fleft {
        margin-left: -4px;
    }
    .fright {
        margin-right: -4px;
    }
    hr {
        margin-left: -4px;
        width: 459px;
    }
    .penampang_paging {
        margin-left: 15px;
        margin-right: 15px;
        width: calc(100% - 30px);
    }
    .penampang_paging_dut {
        margin-left: -5px;
        width: 460px;
    }
    #myCarousel {
        width: auto;
        margin-left: 0px;
    }
    .carousel-control-hd.hdleft {
        top: 114px;
        left: 10px;
    }
    .carousel-control-hd.hdright {
        top: 114px;
        right: 35px;
    }
    .carousel-control-dt-kb.dtleft,
    .carousel-control-dtps.dtleft,
    .carousel-control-dut.dutleft,
    .carousel-control-dt.dtleft {
        height: 55px;
        width: 55px;
        left: 10px;
    }
    .carousel-control-dut.dutright,
    .carousel-control-dt.dtright,
    .carousel-control-dt-kb.dtright,
    .carousel-control-dtps.dtright {
        height: 55px;
        width: 55px;
        right: 10px;
    }
    .carousel-control-dt,
    .carousel-control-dtps,
    .carousel-control-dt-kb {
        top: 35%;
    }
    .carousel-control-dut {
        top: 20%;
    }
    .image-caption,
    .image-caption-ps,
    .image-caption-ps-8 {
        width: 100%;
    }
    .carousel-caption-dt>p {
        width: 90%;
    }
    .copyright {
        padding: 5px 66px;
    }
    .owl-prev,
    .owl-next {
        padding: 45px 20px!important;
    }
}

@media screen and (max-width: 360px) {
    h6 {
        font-size: 12px !important;
        word-spacing: 2px;
    }
    h5 {
        font-size: 14px !important;
        word-spacing: 2px;
    }
    h4 {
        font-size: 18px !important;
        word-spacing: 5px;
    }
    h3 {
        font-size: 22px !important;
        word-spacing: 5px;
    }
    .r1,
    .r2 {
        margin-right: 50px !important;
    }
    .r1 {
        margin-top: 70px !important;
    }
    .r2 {
        margin-top: 25px !important;
    }
    .subjudul-atas {
        font-size: 12px;
    }
    .subjudul-bawah {
        font-size: 10px;
    }
    hr {
        width: 300px;
    }
    .section span:before,
    .section span:after {
        width: 60px;
    }
    .col-sm-4,
    .col-sm-8 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .total-count {
        font-size: 20px !important;
    }
    .share-btn {
        font-size: 14px !important;
    }
    .facebook,
    .twitter,
    .google {
        padding-left: 0;
        padding-right: 0;
    }
    .socmed {
        padding-left: 70px;
    }
    .fa-facebook>span {
        display: none;
    }
    .fa-twitter>span {
        display: none;
    }
    .fa-google-plus>span {
        display: none;
    }
    .ft,
    .kb,
    .pst {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .kd {
        margin-left: 50px !important;
        width: 100% !important;
    }
    .penampang_paging {
        margin-left: 10px;
        width: 340px;
    }
    .penampang_paging_dut {
        margin-left: -5px;
        width: 340px;
    }
    #myCarousel {
        width: 360px;
        padding: 5px;
        margin-left: -5px;
    }
    .carousel-inner > .item > a > img {
        height: auto !important;
    }
    .image-caption,
    .image-caption-ps,
    .image-caption-ps-8 {
        width: 350px;
        margin-top: -33px;
    }
    .carousel-control-hd.hdright {
        right: 35px;
    }
    .carousel-control-hd {
        top: 185px;
    }
    .carousel-control-dt,
    .carousel-control-dtps {
        top: 130px;
    }
    .carousel-control-dt-kb {
        top: 125px;
    }
    .carousel-control-dut {
        top: 40px;
    }
    .carousel-control-dut.dutright,
    .carousel-control-dt.dtright,
    .carousel-control-dt-kb.dtright,
    .carousel-control-dtps.dtright {
        height: 55px;
        width: 55px;
        right: 10px;
    }
    .carousel-control-dut.dutleft,
    .carousel-control-dt.dtleft,
    .carousel-control-dt-kb.dtleft,
    .carousel-control-dtps.dtleft {
        height: 55px;
        width: 55px;
        left: 10px;
    }
    .copyright {
        padding: 5px 55px;
    }
    .owl-prev,
    .owl-next {
        padding: 72px 15px!important;
    }
}

@media screen and (max-width: 320px) {
    .r1,
    .r2 {
        margin-right: 30px!important;
    }
    .section span:before,
    .section span:after {
        width: 45px;
    }
    .penampang_paging {
        margin-left: 5px;
        width: 310px;
        font-size: 12px;
    }
    .penampang_paging_dut {
        margin-left: -10px;
        width: 310px;
        font-size: 12px;
    }
    .pst,
    .kb,
    .ft {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 5px;
    }
    .kd {
        margin-left: 25px !important;
        width: 100% !important;
        padding: 5px;
    }
    .dut {
        padding-right: 60px;
        padding-left: 10px;
    }
    #myCarousel {
        width: 320px;
    }
    .carousel-inner img {
        width: 100%;
    }
    .carousel-inner>.item>a>img {
        height: auto!important;
    }
    .carousel-control-hd {
        top: 150px;
    }
    .carousel-control-hd.hdleft {
        left: -15px;
        top: 100px;
    }
    .carousel-control-hd.hdright {
        right: 20px;
        top: 100px;
    }
    .carousel-control-dtps.dtleft,
    .carousel-control-dt-kb.dtleft,
    .carousel-control-dt.dtleft {
        height: 50px;
        width: 50px;
        left: 5px;
    }
    .carousel-control-dut.dutleft {
        height: 50px;
        width: 50px;
        left: 0;
    }
    .carousel-control-dtps.dtright,
    .carousel-control-dt-kb.dtright,
    .carousel-control-dt.dtright {
        height: 50px;
        width: 50px;
        right: 5px;
    }
    .carousel-control-dut.dutright {
        height: 50px;
        width: 50px;
        right: 0;
    }
    .carousel-control-dut {
        top: 30px;
    }
    .media-carousel .carousel-control.right {
        width: 35px;
    }
    .media-carousel .carousel-control.left {
        width: 35px;
    }
    .image-caption,
    .image-caption-ps,
    .image-caption-ps-8 {
        width: 310px;
        margin-top: -33px;
    }
    .copyright {
        padding: 5px 39px;
    }
    .owl-prev,
    .owl-next {
        padding: 58px 15px!important;
    }
}





 


/*------------------------------------
    update: 2020-November-03
    home-detail kontan images
------------------------------------*/




body{font-family: Roboto; 
        display: flex; min-height: 100vh;  flex-direction: column;}
main{flex: 1;background-color: black;}
.wrap-bgblack{background-color: #000;height: 100vh; width: 100%;
    position: absolute;z-index: -1;top: 0px;}
a, a:hover{cursor: pointer;}
a, a:hover, a:visited, a:active{text-decoration: none;}


.mr-t-5{margin-top: 5px;}
.mr-t-20{margin-top: 20px;}
.mr-b-20{margin-bottom: 20px}
.pd-t-20{padding-top: 20px;}
.spaceD{height: 10px;}
.space20{height: 20px;}
.no-padding{padding-left: 0px;padding-right: 0px;}
.row {margin-right: 0px;margin-left: 0px;}

/*---------- header---------------------------------*/
.navbar-header{padding-right: 0px;}

/*---------- HOME---------------------------------*/
.kelompokft{margin: 25px auto ;}
.kelompokft.ftharini{margin-top: 0px;}
.kelompokft .wrap-title{display: flex; line-height: normal !important;}
.kelompokft .wrap-title h2{font-family: 'Raleway', sans-serif; font-weight: 700;
    text-align: left; margin-top: 0px; margin-bottom: 10px;}
h2.titlekel a{text-decoration: none;} 
.kelompokft .wrap-title .indeksft{text-align: right;}
.indeksft a{font:500 24px Raleway, sans-serif; }
.indeksft i.fa{font-size: 20px;}

h2.titlekel a:hover, .indeksft a:hover{color: #f5ab07;}


.kelompokft .item img{width: 100%; height: 140px; object-fit: cover;}
.kelompokft img.duitto{width: 100%; height: 245px; object-fit: cover; border: 1px solid #ddd;
border-radius: 6px;padding: 8px 3px 3px 3px; background-color: white;}
.kelompokft h6.titleft a{font: 700 18px/23px Raleway, sans-serif; text-align: left;}
.kelompokft.ftduitto h6.titleft a{font: 700 14px/17px Raleway, sans-serif;}
.kelompokft .tglft{font:500 10pt/19pt Raleway,sans-serif; color: #b2b2b2;}

.col-sm-6.wrap-big1{padding-right: 0px;}
.ftstory .col-sm-6 a img.big1{width:100%; height: 330px; object-fit: cover;}
.ftb .col-sm-6 a img.big1{width:100%; height: 317px; object-fit: cover;}
.col-sm-6 a img.big2{width:100%; height: 140px; object-fit: cover;}
.ftb .col-sm-6 a img.big2{height: 156px;}

.kelompokft.ftstory .wrap-big1 h6.titleft{margin-top: 8px;}
.kelompokft.ftstory h6.titleft.big2txt{margin-top: 6px;}
.kelompokft h6.titleft.big2txt a{font: 600 14px/17px Raleway, sans-serif;}


.nopad-l, 
.kelompokft.ftduitto .col-sm-2:first-child,
.kelompokft.ftharini .col-sm-3:first-child,
.kelompokft.ftstory .col-sm-6.wrap-big1:first-child{padding-left: 0px;}

.nopad-r,
.kelompokft.ftduitto .col-sm-2:last-child,
.kelompokft.ftharini .col-sm-3:last-child{padding-right: 0px;}


.image-caption.gradient{background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 39%, rgba(7,7,7,0) 100%); 
bottom: 0px; padding: 10px 0px 0px 12px; }
.image-caption.gradient h1{font: 600 16px/20px Raleway, sans-serif;}
.image-caption.gradient h2{font: 600 14px/17px Raleway, sans-serif;}



.headlineslider{margin-top: 0px}
.headlineslider .wrap-txtheadline{position: absolute; top: 35%; text-align: center;padding: 0px 6%}
.headlineslider .wrap-txtheadline a.title_fhi{font-size: 12px; font-family: 'Raleway', sans-serif; font-weight: 700;
    padding: 5px 8px; background-color: black; color: #f5ab07; border-radius: 4px;}
.headlineslider .wrap-txtheadline h1.title_fhi2{font-size: 38px;  font-family: 'Raleway', sans-serif; font-weight: 700;
    text-shadow: 4px 4px 10px black; margin-top: 8px;} 
.headlineslider .wrap-txtheadline h1.title_fhi2 a:hover{color: #f5ab07;}
.headlineslider .wrap-txtheadline h1.title_fhi2 a:visited,
.headlineslider .wrap-txtheadline h1.title_fhi2 a:active{text-decoration: none;}

.rsDefault.headlineslider .rsBullets{background: transparent; bottom: 15px;}


.gradient-headline{width: 100%;height: 240px;position: absolute;bottom: 0px;
 background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 14%, rgba(0,0,0,0.6) 39%, rgba(7,7,7,0) 100%); }

.gradient-black-grey1{background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(34,34,34,1) 0%, rgba(0,0,0,1) 100%);}

.gradient-grey1-lightgrey{background: rgb(51,51,51);
background: linear-gradient(0deg, rgba(51,51,51,1) 0%, rgba(23,23,23,1) 100%);}

.gradient-darker-lightgrey{background: rgb(52,52,52);
background: linear-gradient(0deg, rgba(52,52,52,1) 0%, rgba(31,31,31,1) 100%);}

.gradient-darker-black{ background: rgb(7,7,7);
background: linear-gradient(0deg, rgba(7,7,7,1) 0%, rgba(42,42,42,1) 47%, rgba(67,67,67,1) 100%); }





/*----------pindahan dari theme---------*/


@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,700;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');
    /*---------- detail---------------------------------*/
   
    .wrap-photoslider{height: 100%; position: static; padding: 0px;}
    .metaphoto{height: 100%; overflow-y: scroll;  background-color: black;}

    .judul h1{font-family: "Roboto", serif; font-weight: 500; }
    .subjudul-atas{font: 700 19px/19px Source Sans Pro, sans-serif; margin-bottom: 0px;}
    h6 {font-size: 13px !important; word-spacing: 2px; letter-spacing: 0px;}
    .text-content p{font: normal 15px/22px Source Sans Pro,sans-serif;}
    h4.title-section a{font: 700 19px/19px Source Sans Pro, sans-serif !important;color: #febe14; word-spacing: normal;}
    .image-caption{padding-left: 5px; font-family: Roboto; }


    .socmed{margin-top: 0px; padding-left: 0px;}
    .socmed .facebook {padding-left: 0px;}

    
    .item a img {width: 100%; height: 130px;object-fit: cover;}


    #gallery-2 {width: 100%;}
    .royalSlider{width: 100%;}
    .rsGCaption{position: absolute; bottom: 60px; font-size: 14px;width: 100%; padding: 0px 10px;
        background-color: rgba(0,0,0,.6);}
    p.caption_album{margin-top: 5px;}
    .wrap-btn-index{align-content: center; justify-content: center; display: flex;}
    .btn-index{padding: 10px 20px; background-color: #febe14; color: black; font-weight: bold; font-size: 15px; letter-spacing: -0.25pt;margin: 20px auto;-webkit-transition: background 2s;}
    .btn-index:hover{color: #febe14; background-color: #1F1F1F; text-decoration: none;-webkit-transition: background 1s;}

    .button-share{height: 20px;}

    


    /*----------kartun_benny & duitto---------------------------------*/
    #pageCarousel1 {background-color: transparent; padding-top: 0px; padding-bottom: 0px;}
    .carousel-control-dut.dutleft, .carousel-control-dut.dutright{margin-top: 0px;}
    .carousel-control-dut{top: 210px;}
    .kben .carousel-caption-dt{text-align: center !important;}
    .wrap-photoslider .kd .item,
    .wrap-photoslider .kben .item{width: 100%}    
    .wrap-photoslider .kd img.imej,
    .wrap-photoslider .kben img.imej{width: 100%; object-fit: contain;height: 100%;}
    


    /*---------- all---------------------------------*/
    .carousel-caption-dt{position: absolute; z-index: 999; bottom:0px; 
        margin-bottom: 0px!important; margin-top: 0px!important;
        background-color: rgba(0,0,0,.6);font-size: 14px;line-height: 18px;
        width: 100%; padding: 10px 15px;}
    .carousel-caption-dt p{margin-top: 10px; margin-bottom: 10px;}


    #pageCarousel{background-color: #444; padding-top: 0px; padding-bottom: 0px; }


    .wrap-detailphoto, .royalSlider,
    #pageCarousel, .wrap-photoslider .ft,
    .wrap-photoslider .kd{height: 500px !important; }

    .wrap-photoslider .ft, .wrap-photoslider .kd{margin-left: auto !important; width: auto!important;}
    .wrap-photoslider .ft .item.active,
    .wrap-photoslider .kd .item.active{height: 100%; padding-bottom: 0px!important; padding-top: 0px;
        display: flex; justify-content: space-between; align-items: center;}
    .wrap-photoslider .carousel-control-dt{top: 182px;}
    .carousel-control-dt-kb{top: 225px;}
    #pageCarousel, .wrap-photoslider .ft, .wrap-photoslider .kd{background-color: black;}






@media only screen and (max-width: 1300px) {
    .navbar-header{padding-left: 3%;}
    #myNavbar{padding-right: 2.5%;}
}

@media only screen and (max-width: 1200px) {
    .navbar-header{padding-left: 2%;}
    #myNavbar{padding-right: 2%;}
}


@media only screen and (max-width: 1100px) {
    .wrap-detailphoto, .royalSlider,
    #pageCarousel, .wrap-photoslider .ft,
    .wrap-photoslider .kd{height: 470px !important; }
}


@media only screen and (max-width: 991px) {
    .wrap-detailphoto {display: block;}
    .wrap-detailphoto .col-md-8{display: flex; justify-content: center; flex-direction: row; }
    .wrap-detailphoto .col-md-4{height: auto; overflow: auto; }
    .metaphoto{padding-top: 20px;}
    .metaphoto .col-xs-6{width:20%;}
    .wrap-detailphoto, .royalSlider, .wrap-detailphoto .col-md-8,
    #pageCarousel, .wrap-photoslider .ft,
    .wrap-photoslider .kd{height: 450px !important; }    

    #myNavbar {font-size: 14px;word-spacing: 3px;}

    .wrap-photoslider .kd .item,
    .wrap-photoslider .kben .item{width: 650px;}

}
@media only screen and (max-width: 768px) {
    .metaphoto .col-xs-6{width:33.3%;}
    .wrap-photoslider .kd .item,
    .wrap-photoslider .kben .item{width: 500px;}
}

@media only screen and (max-width: 500px) {
    .wrap-detailphoto .col-md-8,
    #pageCarousel, .wrap-photoslider .ft{height: 500px !important;}
    .wrap-photoslider .kd, .wrap-photoslider .kben,
    .wrap-photoslider.pstory, .wrap-photoslider.wrap-kben, .wrap-photoslider.kduitto,
    .royalSlider{width: 100%; height: 400px!important}
    /*.wrap-photoslider.fhariini{height: 500px !important;}*/

    .carousel-control-dt-kb{top: 154px;}
    .carousel-control-dt-kb .dt{top: 20px !important;}


    p.caption_album{display: none;}
    .wrap-detailphoto .carousel-caption-dt p.caption_album{display: block;}
    .rsFullscreen p.caption_album{display: block;}
    .metaphoto{padding-top: 0px;}
    .metaphoto .col-xs-6{width:50%;}

    .wrap-photoslider .carousel-control-dt{top: 100px;}
    .wrap-photoslider .carousel-control-dt .dt{top: 25px!important;}

    #pageCarousel, .wrap-photoslider .ft{height: auto; background-color: rgba(0,0,0,1);}
    .carousel-caption-dt{position: relative; float: left; padding: 0px 1%;}
    .wrap-photoslider .ft .item.active{flex-direction: column;}
    .carousel-caption-dt p{padding-top: 0px; padding-bottom: 0px; margin-top: 10px; margin-bottom: 0px;
        width: 100%;}


    .wrap-photoslider .kd .item,
    .wrap-photoslider .kben .item{width: 400px;}
}

@media only screen and (max-width: 362px) {
    .metaphoto .col-xs-6{width:100%;}
    .wrap-photoslider.pstory,
    .royalSlider{width: 100%; height: 350px!important}

    .wrap-photoslider .kd .item,
    .wrap-photoslider .kben .item{width: 325px;}
    .carousel-control-dt-kb .dt{top: 0px !important;}
}



/*-----update 2020-11nov-03-----*/