html,body {
    font-family: 'Inter', sans-serif;
}
h1,h2,h3,h4,h5,h6,nav,nav a {
    font-family: 'Montserrat', sans-serif;
}
/* stylelint-disable selector-list-comma-newline-after */
h1.logo {
    font-weight: lighter;
    margin: 0;
    padding: 0;
    background: url('../img/top.png') no-repeat top left;
    background-size: contain;
    display: block;
    text-indent: -10000px;
    height: 80px;
    width: 200px;
}

h1.logo a, nav a {
    text-decoration: none;
}

.searchbox-header {
    width: 80%;
}

.w-100 {
    width: 100%;
    max-width: 100%;
}
.mw-800 {
    max-width: 800px;
    margin: 0 auto;
}

.mw-960 {
    max-width: 960px;
    margin: 0 auto;
}

.mw-1320 {
    max-width: 1320px;
    margin: 0 auto;
}

.full-width {
    max-width: 100%!important;
}

.rounded {
    border-radius: 1.5rem!important;
}

.rounded-1 {
    border-radius: 2.25rem!important;
}

.rounded-full {
    border-radius: 50%;
}

.rounded-top {
    border-top-left-radius: 1.5rem!important;
    border-top-right-radius: 1.5rem!important;
}

.rounded-start {
    border-top-left-radius: 1.5rem!important;
    border-bottom-left-radius: 1.5rem!important;
}

.text-black-1 {
    color: #444444
}

.text-black-2 {
    color: #555;
}

.text-green {
    color: #089B42;
}

.bg-grey {
    background-color: #DBDBDB;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-7 {
    margin-bottom: 4.5rem;
}

.mr-1 {
    margin-right: .5rem;
}

.mr-2 {
    margin-right: 1rem;
}

.mr-3 {
    margin-right: 1.5rem;
}

.mr-4 {
    margin-right: 2rem;
}

.mr-5 {
    margin-right: 2.5rem;
}

.pl-0 {
    padding-left: 0!important;
}

.pl-3 {
    padding-left: 1.5rem!important;
}

.pl-5 {
    padding-left: 3rem!important;
}

.pr-0 {
    padding-right: 0!important;
}

.pr-3 {
    padding-right: 1.5rem!important;
}

.pr-5 {
    padding-right: 3rem!important;
}

.pt-7 {
    padding-top: 4.5rem!important;
}

.pb-7 {
    padding-bottom: 4.5rem!important;
}

.pb-10 {
    padding-bottom: 6rem!important;
}

a {
    text-decoration: none;
}

.dot {
    height: 40px;
    display: flex;
    align-items: center;
}

.fw-reguler {
    font-weight: 400;
}

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.fw-extrabold {
    font-weight: 900;
}

.text-12 {
    font-size: .75rem;
}

.text-14 {
    font-size: .875rem;
}

.contact-us .form-control {
    padding: .75rem 1rem .75rem 2.5rem;
    border-radius: .75rem;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.img-full {
    width: 100%!important;
}


.ico {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

.ico.w32 {
    width: 32px;
    height: 32px;
}

.ico.icon-facebook {
    background-image: url(../img/icon/icon-facebook.svg);
}

.ico.icon-facebook-1 {
    background-image: url(../img/icon/icon-sosmed.svg);
    background-size: cover;
    background-position: -48px 0;
}

.ico.icon-ig {
    background-image: url(../img/icon/icon-instagram.svg);
}

.ico.icon-ig-1 {
    background-image: url(../img/icon/icon-sosmed.svg);
    background-size: cover;
    background-position: 0px 0;
}

.ico.icon-phone {
    background-image: url(../img/icon/icon-telephone.svg);
}

.ico.icon-twitter {
    background-image: url(../img/icon/icon-twitter.svg);
}

.ico.icon-twitter-1 {
    background-image: url(../img/icon/icon-sosmed.svg);
    background-size: cover;
    background-position: -96px 0;
}

.ico.icon-youtube {
    background-image: url(../img/icon/icon-youtube.svg);
}

.ico.icon-youtube-1 {
    background-image: url(../img/icon/icon-sosmed.svg);
    background-size: cover;
    background-position: -144px 0;
}

.ico.icon-tiktok {
    background-image: url(../img/icon/icon-tiktok.svg);
}

.ico.icon-tiktok-1 {
    background-image: url(../img/icon/icon-sosmed.svg);
    background-size: cover;
    background-position: -192px 0;
}

.ico.icon-whatsapp {
    background-image: url(../img/icon/icon-whatsapp.png);
    background-size: contain;
}

.ico.icon-book {
    background-image: url(../img/icon/icon-book.png);
    height: 25px;
    width: 29px;
}

a:hover .ico.icon-book {
    background-image: url(../img/icon/icon-book-white.png);
}

@media (min-width: 768px) {
    .searchbox-header {
        width: 320px;
    }
}

.bd-search .ds-input {
    border-radius: 2rem;
}

.bd-search::after {
    content: "";
    position: absolute;
    top: .3125rem;
    right: .3125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: .75rem;
    color: #fff;
    background-image: url(../img/search.svg);
    border-radius: 1rem;
    background-color: #f9d14d;
    background-repeat: no-repeat;
    background-position: center;
}

.bd-search.bg-black-1::after {
    background-color: #444!important;
}

.bahasa {
    border-radius: 48px;
}

.blog-header {
    line-height: 1;
    border-bottom: 1px solid #e5e5e5;
}

.blog-header-logo {
    font-size: 2.25rem;
}

.blog-header-logo:hover {
    text-decoration: none;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    /*
    height: 2.75rem;
    overflow-y: hidden;
    */
}

.nav-scroller .nav {
    display: flex;
    /*flex-wrap: nowrap;*/
    padding-bottom: 1rem;
    margin-top: -1px;
    /*overflow-x: auto;*/
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
}

.nav-scroller .nav a:hover {
    text-decoration: underline;
}

.nav-scroller .active {
    font-weight: 700;
}

.card-img-right {
    height: 100%;
    border-radius: 0 3px 3px 0;
}

.flex-auto {
    flex: 0 0 auto;
}

.h-250 { height: 250px; }
@media (min-width: 768px) {
    .h-md-250 { height: 250px; }
}

/* Pagination */
.blog-pagination {
    margin-bottom: 4rem;
}
.blog-pagination > .btn {
    border-radius: 2rem;
}

/*
 * Blog posts
 */
.blog-post {
    margin-bottom: 4rem;
}
.blog-post-title {
    margin-bottom: .25rem;
    font-size: 2.5rem;
}
.blog-post-meta {
    margin-bottom: 1.25rem;
    color: #727272;
}

/*
 * Artis
 */

.header-detail {
    background-color: #0A9342;
    padding: 5.625rem 0 3.75rem;
}

.container.profile .photo img {
    width: 100%;
    max-width: 100%;
    margin-bottom: -2.125rem;
}

.container.profile table td:first-child {
    width: 120px;
}

.container.profile table td:nth-child(2) {
    padding: 0 10px;
}

.container.profile .socialmedia .ico {
    opacity: .8;
}

.container.profile .socialmedia .ico:hover {
    opacity: 1;
}

.container.diskografi .year {
    background: rgb(37,195,28);
    background: linear-gradient(0deg, rgba(37,195,28,1) 0%, rgba(234,244,99,1) 100%);
    width: 90px;
    height: 90px;
    min-width: 90px;
    border-radius: 45px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 767px) {
    .container.profile .photo img {
        margin-bottom: 2rem;
        padding-right: 0!important;
    }

    .container.profile .socialmedia {
        margin-bottom: 2rem;
    }
}

/*
 * Video
 */

.container.video .box-video {
    overflow: hidden;
    border-radius: 40px;
    display: block;
    position: relative;
}

.container.video .box-video img {
    width: 100%;
}

.container.video .box-video .icon-play {
    width: 80px;
    height: 80px;
    background-image: url(../img/icon/play-button.png);
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    opacity: .3;
}

.container.video .box-video:hover .icon-play {
    opacity: 1;
}

/*
 * Footer
 */

footer .nav a:hover {
    text-decoration: underline;
}

.blog-footer {
    padding: 2.5rem 0;
    color: #727272;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
    margin-bottom: 0;
}


/*
* Carousel
 */

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
    display: none;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: flex;
}

picture {
    max-width: 100%;
    display: block;
}

.carousel-item img,
.carousel-item > picture,
.carousel-item > picture img {
    min-width: 100%;
    width: 100%;
    height: auto;
}

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 5rem;
    width: 3rem;
    height: 3rem;
    background-size: 70%;
    background-position: center center;
}

h2 span {
    font-weight: 400;
    letter-spacing: .2rem;
}

h2 {
    text-transform: uppercase;
    font-weight: 800;
    max-width: 30rem;
    letter-spacing: .1rem;
}

h3 {
    font-weight: 300;
}

.card-about {
    margin-top: 3rem;
    margin-bottom: 2rem;
    border: none;
    border-radius: 2rem;
}

.slight-left {
    transform: translateX(-5.1rem);
}

@media (max-width: 640px) {
    .slight-left {
        transform: none;
    }

    .home-about h2,
    .home-about h3 {
        text-align: center;
        margin: 0 auto .5rem;
    }
}

.btn {
    border-radius: 5rem;
    padding: .4rem 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

.news-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.news-container:first-child {
    flex: 1;
}

.news {
    border-radius: 1.5rem;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    flex-direction: row;
}

.news .card-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.news-img {
    width: 43%;
}

.news-content {
    flex: 1;
    width: 57%;
    padding: 1rem;
}

.news-content .date-blog {
    padding-top: .3125rem;
}

.news-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    flex: 1;
    justify-content: space-between;
}

.news-meta {
    border-top: 1px solid #ddd;
    padding-top: .5rem;
    align-self: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.view-count {
    padding-right: .5rem;
}

.comment-link {
    text-decoration: none;
    color: lightgrey;
}

.comment-link:hover {
    color: grey;
    text-decoration: underline;
}

.news-teaser {
    max-width: 60%;
    flex: 1;
    margin-bottom: 1rem;
}

.news-teaser.full {
    max-width: 100%;
}

.news-teaser.full p.text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-small {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.news-small .news-img img{
    min-width: 100%;
    max-height: 225px;
}

.news-small h3 {
    font-size: 1.25rem;
}

.news-small .news-date {
    font-size: .8rem;
}

.list-news.widget .news-item {
    border-bottom: 1px solid #ccc;
}

.list-news.widget:last-child .news-item {
    border-bottom: 0;
}

.list-tag .tag-item {
    padding: 1rem 0;
    border-top: 1px solid #ccc;
}

@media (max-width: 900px) {

    .news-teaser {
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .news-small .news-content {
        padding: 1rem 0;
    }

}

@media (max-width: 640px) {
    .news {
        flex-direction: column;
        justify-content: flex-start;
    }

    .news-img {
        width: 100%;
    }

    .news-content {
        flex: 1;
        width: 100%;
    }

    .news-teaser {
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .news-meta {
        flex-wrap: wrap;
    }
}


@media screen and (min-width: 768px) {
    .news-small {
        width: calc(33.33% - 1rem);
        margin-right: 1rem;
    }

    .news-small:last-child {
        width: 33%;
        margin-right: 0;
    }
}

.news-small .news-img {
    width: 100%;
}

.news-small .news-content {
    width: 100%;
}

.news-small .news-teaser {
    display: none;
}


.instagram-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.instagram-container .insta {
    width: 19%;
}


.signup {
    background: #f9d14d url('../img/footer.jpg') no-repeat top left;
    background-size: 50% auto;
    height: 390px;
}

footer .nav-link {
    color: whitesmoke;
    text-decoration: none;
}

footer .nav-link:hover {
    color: white;
}

.about-container {
    background: url('../img/banner_home.jpg') no-repeat top center;
    padding-top: 11.3rem;
    background-size: contain;
    padding-left: 7.5rem;
    padding-right: 7.5rem;
    position: relative;
}

@media (max-width: 1024px) {
    .about-container {
        padding-left: 5.5rem;
        padding-right: 5.5rem;
        padding-top: 5rem;
    }
}

@media (max-width: 768px) {
    .about-container {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
        padding-top: 3rem;
    }
}

@media (max-width: 480px) {
    .about-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1rem;
    }
}

.about-point {
    padding: .5rem;
    margin: .5rem;
    width: 20%;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-top-left-radius: 5rem;
    border-top-right-radius: 5rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background: white;
    width: 11rem;
}

.about-point-content-head {
    font-size: .8rem;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: .5rem;
    padding-bottom: .2rem;
}

.about-point img {
    width: 8rem;
    height: auto;
    padding: .5rem;
}

.about-point h5 {
    font-size: 1.1rem;
}

.about-point-content .address {
    font-size: .8rem;
    color: #666;
}

.about-wrap {
    background: url('../img/gambar.jpg') no-repeat top left;
    background-size: contain;
    min-width: 100%;
    padding-top: 38.53%;
    margin-left: -.75rem;
    margin-right: -.75rem;
    text-align: center;
    width: 100%;
}

.visi {
    padding: 2rem;
    width: 80%;
    margin: auto;
}

.visi h2 {
    background: #fdbf0c;
    border-radius: 1.5rem;
    padding: .5rem 3rem;
    color: white;
    margin-bottom: 1rem;
}

.visi h3 {
    letter-spacing: .1rem;

}

.visi-item {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.offset-margin-top {
    margin-top: -6rem;
}

@media (max-width: 900px) {

    .product {
        padding: 1rem!important;
    }

    .product p {
        display: none;
    }

    .product img {
        margin: 0 auto!important;
    }
}

@media (max-width: 767px) {
    .about-wrap {
        margin: 0;
    }

    .visi {
        width: 100%;
        padding: 2rem 1rem;
    }
}



/* TIMELINE */

.timeline-wrap {
    background-color: #ce4436;
    margin-left: -.75rem;
    margin-right: -.75rem;
    padding: .75rem;
    color: white;
}

.timeline {
    width: 100%;
    padding-bottom: 5rem;
}

.timeline.timeline-one .timeline-item {
    position: relative;
    width: 50%;
    margin-left: 50%;
    padding-bottom: 1.5rem;
    padding-left: 5rem;
    text-align: left;
    padding-right: 1.5rem;
}

@media (max-width: 575.98px) {
    .timeline.timeline-one .timeline-item {
        width:100%;
        margin-left: 0;
        padding-left: 2rem;
        padding-top: 8rem;
    }
}

.timeline.timeline-one .timeline-item img {
    margin-bottom: 1.25rem
}

.timeline.timeline-one .timeline-item:before {
    content: "";
    position: absolute;
    top: 2.5rem;
    left: 0;
    width: 16px;
    height: 16px;
    margin-top: 0.425rem;
    margin-left: -0.5rem;
    border: .0625rem solid white;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .5);

}

.timeline h1 {
    font-weight: 800;
}

.timeline h3 {
    font-weight: 800;
}

.timeline-img {
    position: absolute;
    top: 2rem;
    left: 0;
    width: 8rem;
    height: 8rem;
    margin-top: 0.425rem;
    margin-left: -4rem;
    border: .0625rem solid white;
    border-radius: 50%;
    background-color: white;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.timeline.timeline-one .timeline-item:after {
    content: "";
    position: absolute;
    top: 2rem;
    left: 0;
    bottom: -3rem;
    width: .25rem;
    margin-top: 1.875rem;
    margin-left: -0.125rem;
    background-color: white;
}

.timeline.timeline-one .timeline-item:nth-child(2n+1) {
    margin-left: 0;
    padding-right: 5rem;
    padding-left: 1.5rem;
    text-align: right
}

@media (max-width: 575.98px) {
    .timeline.timeline-one .timeline-item:nth-child(2n+1) {
        padding-right:0;
        padding-left: 1.5rem;
        text-align: left
    }
}

.timeline.timeline-one .timeline-item:nth-child(2n+1):before,
.timeline.timeline-one .timeline-item:nth-child(2n+1):after,
.timeline.timeline-one .timeline-item:nth-child(2n+1) .timeline-img
{
    right: 0;
    left: auto
}

@media (max-width: 575.98px) {
    .timeline.timeline-one .timeline-item:nth-child(2n+1):before,
    .timeline.timeline-one .timeline-item:nth-child(2n+1):after,
    .timeline.timeline-one .timeline-item:nth-child(2n+1) .timeline-img {
        right:auto;
        left: 0;
    }

    .timeline.timeline-one .timeline-item .timeline-img {
        margin-left: 1rem;
        transform: none;
        margin-top: -2rem;
    }
}

.timeline.timeline-one .timeline-item:nth-child(2n+1) .timeline-img {
    margin-right: -4rem
}

.timeline.timeline-one .timeline-item:nth-child(2n+1):before {
    margin-right: -0.5rem
}

.timeline.timeline-one .timeline-item:nth-child(2n+1):after {
    margin-right: -0.0625rem
}

.timeline.timeline-one .timeline-item:last-child:after {
    display: none;
}

.timeline.timeline-one.dark .timeline-item:before {
    border: .0625rem solid #9CA3AF
}

.timeline.timeline-one.dark .timeline-item:after {
    background-color: #9CA3AF
}

/* Box generic */
.box {
    border-radius: 2rem;
}

.inline-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 1rem;
}

.inline-list li {
    margin-left: 0;
    margin-right: 2rem;
}

/* Contact */

form .icon-field {
    width: 1.5rem;
    opacity: .6;
    position: absolute;
    left: .5rem;
    top: .8125rem;
}

.socialmedia .list-item {
    display: flex;
}

.socialmedia .list-item .ico {
    margin-right: 1rem;
}

/* Pagination */
.page-link {
    padding: .375rem 0;
    width: 2.25rem;
    text-align: center;
    border-radius: 1.125rem;
    color: #555;
    border: 0;
    background-color: transparent;
}

.page-link:hover {
    color: #FFF;
    background-color: #B2B2B2;
}

.page-item:first-child .page-link, .page-item:last-child .page-link {
    border-radius: 1.125rem;
}

@media (max-width: 900px) {
    .container {
        max-width: 900px;
    }
}

@media (max-width: 600px) {
    .container.p-5 {
        padding-right: 1rem!important;
        padding-left: 1rem!important;
    }
}

.news-sidebar a div:before {
    content: ' ';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    min-height: 100%;
    min-width: 100%;
}


/* IMAGES */
.image-ratio {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.image-ratio.ratio-16-9 {
    padding-bottom: 56.25%
}

.image-ratio.ratio-4-3 {
    padding-bottom: 75%
}

.image-ratio.ratio-1-1 {
    padding-bottom: 100%
}

.article-tile__background:before {
    content: ' ';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

h1 a, h3 a,h5 a,h6 a,.news-title a {
    color: var(--bs-body-color);
}

.lazy {
    opacity: 0;
    transition: opacity .5s ease-in-out;
}
.lazy.loaded {
    opacity: 1;
}