@font-face {
    font-family: MontserratLight;
    src: url('../../../fonts/Montserrat/Montserrat-Light.otf') format('truetype');
}

@font-face {
    font-family: MontserratRegular;
    src: url('../../../fonts/Montserrat/Montserrat-Regular.otf') format('truetype');
}

@font-face {
    font-family: MontserratSemiBold;
    src: url('../../../fonts/Montserrat/Montserrat-SemiBold.otf') format('truetype');
}

@font-face {
    font-family: MontserratBold;
    src: url('../../../fonts/Montserrat/Montserrat-Bold.otf') format('truetype');
}

@font-face {
    font-family: Avenir-Book;
    src: url('../../../fonts/Avenir/Avenir-Book.ttf') format('truetype');
}

img {
    max-width: 100%;
}

.mobile {
    display: none;
}

body,
html {
    height: 100%;
}

div {
    position: relative;
}

html,
body {
    margin: 0;
    padding: 0;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.pull-right {
    float: right;
}

.text-bold {
    font-family: MontserratBold;
}

.pull-left {
    float: left;
}

.bestie-stories {
    background-color: #ffe4dd;
}

.bestie-stories * {
    font-family: MontserratRegular;
}

.bs-mobile {
    display: none !important;
}

.bs-section {
    padding-bottom: 45px;
}

.bs-masthead {
    position: relative;
    width: 100%;
    text-align: center;
    padding-top: 45px;
    margin-bottom: 45px;
}

.bs-masthead-image {
    position: relative;
    z-index: 2;
    width: 80%;
    margin: auto;
}

.bs-sand,
.bs-line-tl,
.bs-line-tr,
.bs-line-inspiration,
.bs-line-quiz {
    position: absolute;
    width: auto;
}

.bs-sand {
    top: 0;
    left: 0;
    width: 55%;
}

.bs-line-tl {
    left: 0;
    top: 9.75vw;
    width: 27vw;
}

.bs-line-tr {
    right: 0;
    bottom: -27vw;
    width: 27vw;
}

.bs-masthead-text {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 30px;
    align-items: center;
    text-align: left;
    width: 55%;
}

.bs-masthead-title {
    line-height: 1.2;
    font-size: 2vw;
    font-family: MontserratBold;
    color: #0bb8c6;
}

.bs-masthead-desc {
    font-size: 0.96vw;
    line-height: 1.8;
}

.bs-masthead-desc strong {
    font-family: MontserratBold;
}

.bs-container {
    z-index: 5;
}

.bs-title {
    text-align: center;
    position: relative;
    z-index: 99;
}

.bs-title p {
    text-align: center;
    font-size: 16px;
    font-family: MontserratSemiBold;
    line-height: 1.2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.bs-voting {
    width: 960px;
    margin: auto;
    padding-bottom: 80px;
}

.bs-line-voting {
    position: absolute;
    bottom: -210px;
    left: -125px;
}

.bs-voting-content {
    text-align: center;
}

.bs-voting-item-list {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 15px;
}

.bs-voting-item {
    width: 33.33%;
}

.bs-vote-button, .bs-voting-desc {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bs-vote-button {
    bottom: 0;
}

.bs-voting-frame {
    margin: 0 22.5px;
    padding: 30px 20px 15px;
    background: #fff;
    border-radius: 4px;
    z-index: 2;
}

.bs-voting-frame img {
    width: 100%;
}

.bs-voting-caption {
    font-size: 14px;
    padding-top: 10px;
    line-height: 1.2;
}

.bs-voting-caption strong {
    font-family: MontserratSemiBold;
}

.bs-voting-text {
    z-index: 1;
    margin-top: -25px;
}

.bs-voting-text a,
.bs-voting-text a:hover {
    font-family: MontserratSemiBold;
    color: #000;
    text-decoration: unset;
    position: relative;
    top: 10px;
}

.bs-voting-desc {
    /* top: 62.5%; */
    top: 11.5%;
    width: 80%;
    font-size: 14px;
    transform: translate(-50%, 0);
    line-height: 1.2;
}

.bs-button-image {
    background: transparent;
    border: none;
    cursor: pointer;
}

.bs-button-image:hover img {
    transform: rotate(-3.33deg);
}

.bs-more-stories {
    margin: 20px 0 30px;
}

.bs-inspiration {
    width: 1180px;
    margin: auto;
    padding-bottom: 110px;
}

.bs-line-inspiration {
    right: -50px;
    bottom: -310px;
}

.bs-inspiration-content {
    display: flex;
    gap: 30px;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    margin: 30px 0;
}

.bs-inspiration-item {
    width: calc(33% - 30px);
    background: #fff;
    border: none;
    padding: 15px;
    text-align: center;
    box-shadow: 0px 0px 15px 2px rgb(0 0 0 / 10%);
}

.bs-inspiration-item img {
    width: 100%;
}

.bs-inspiration-desc {
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.5;
}

.bs-inspiration-desc strong {
    font-family: MontserratSemiBold;
}

.bs-read-more {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -10%);
}

.bs-line-quiz {
    bottom: -210px;
    left: 15px;
    display: none;
}

.bs-quiz-content {
    margin: auto;
    width: 940px;
    margin-top: 30px;
    margin-bottom: 60px;
    background-color: #f5f0ee;
    box-shadow: 0px 0px 15px 2px rgb(0 0 0 / 10%);
}

.bs-quiz-item {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    min-height: 460px;
}

.bs-quiz-image {
    position: absolute;
    top: -22px;
    left: 15px;
}

.bs-quiz-image img {
    width: 105%;
    max-width: unset;
}

.bs-quiz-question {
    width: 100%;
    padding: 40px 40px 30px 40px;
    padding-left: 45%;
}

.bs-quiz-question-text {
    font-size: 16px;
    line-height: 2;
    padding-top: 15px;
    font-family: MontserratSemiBold;
}

.bs-quiz-answer {
    font-size: 16px;
    line-height: 2;
}

.bs-quiz-answer-item {
    margin: 30px 0;
    display: flex;
    gap: 15px;
}

.bs-quiz-answer-item.selected * {
    font-family: MontserratSemiBold;
}

.bs-quiz-answer-item label {
    cursor: pointer;
    z-index: 3;
}

.bs-vote-button input[type=radio],
.bs-quiz-answer-item input[type=radio] {
    position: absolute;
    opacity: 0;
    z-index: -999;
}

.bs-quiz-answer textarea {
    margin-top: 30px;
    border: 1px solid #ddd;
    background: #fff;
    padding: 15px;
    width: calc(100% - 30px);
    font-size: 16px;
    resize: unset;
}

.bs-next-button { 
    /* text-align: right; */
    /* width: 100%; */
    /* padding: 0 40px; */
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 10;
}

.bs-next-button button {
    background: #fff;
    border: 1px solid #000;
    cursor: pointer;
    text-transform: uppercase;
    padding: 10px 40px;
    font-family: MontserratBold;
}

.bs-next-button:hover button,
#bs-submit-button:hover {
    background: #efa09f;
    border: 1px solid #efa09f;
    color: #fff;
}

.bs-quiz-number {
    position: absolute;
    top: 45px;
    right: -59px;
}

.bs-quiz-number img {
    width: auto;
}

.bs-quiz-number div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 42px;
}

.bs-submission {

}

.bs-form {
    width: 940px;
    margin: auto;
    margin-top: -100px;
}

.bs-form-bg {
    width: 100%;
}

.bs-form-container {
    position: absolute;
    left: 50%;
    top: 57%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 77.5%;
}

.bs-form-field {
    width: 45%;
}

.bs-form-tnc {
    width: 100%;
}

.bs-form-control {
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    margin-bottom: 20px;
    border-radius: 0;
    border: 1px solid #000;
    color: #000;
    font-size: 16px;
    padding: 10px 20px;
}

.bs-form-control::placeholder {
    color: #000;
}

#alamat {
    height: 79px;
}

textarea {
    resize: unset;
}

.bs-form-button {
    text-align: center;
    margin-top: 30px;
}

#bs-submit-button {
    background: #fff;
    border: 1px solid #000;
    cursor: pointer;
    text-transform: uppercase;
    padding: 10px 75px;
    font-family: MontserratBold;
    font-size: 16px;
}

.bs-footer {
    text-align: center;
    margin-top: -170px;
    line-height: 0;
    z-index: 1;
}

.bs-footer img {
    line-height: 0;
    width: 100%;
}

.bs-footer p {
    position: absolute;
    left: 50%;
    bottom: 30%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-family: MontserratBold;
}


/* custom radio button */
.radiobutton:checked,
.radiobutton:not(:checked) {
    position: absolute;
    opacity: 0;
    z-index: 9999;
    cursor: pointer;
}

.radiobutton:checked+label,
.radiobutton:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 1;
    display: inline-block;
}

.radiobutton:checked+label:before,
.radiobutton:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 11px;
    height: 11px;
    border: 2px solid #c21456;
    border-radius: 100%;
    background: transparent;
}

.radiobutton:checked+label:before {
    background: transparent;
}

.radiobutton:checked+label:after,
.radiobutton:not(:checked)+label:after {
    content: '';
    width: 5px;
    height: 5px;
    background: #c21456;
    color: #c21456;
    position: absolute;
    top: 4px;
    left: 5px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.radiobutton:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.radiobutton:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* end custom radio button */

/* TNC =================================================================================== */
#agree {
    cursor: pointer;
}

.check-box {
    /* padding: 20px 0; */
    padding-top: 15px;
    text-align: center;
}

.tnc {
    vertical-align: middle;
    -webkit-appearance: none;
    border: 1px solid #000;
    background-color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 6px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

.tnc:checked {
    background-color: #000;
    border: 1px solid #000;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}

.tnc:checked:after {
    content: '\2714';
    font-size: 10px;
    position: absolute;
    top: 0px;
    left: 2px;
    color: #ffffff;
}

.text-tnc:hover {
    color: #000;
    text-decoration: underline;
}

.text-tnc,
.text-tnc:hover {
    outline: none;
    vertical-align: middle;
}

.text-tnc {
    position: relative;
    top: 0;
    font-family: MontserratRegular;
    font-size: 14px;
    color: #000;
}

.tncTitle,
.tandc-text {
    font-family: MontserratRegular;
}

.tandc-text a,
.tandc-text a:hover {
    color: #000;
    font-family: MontserratSemiBold;
}

.tandc-text strong {
    font-family: MontserratSemiBold;
}

.tncTitle {
    font-size: 18px;
    text-align: center;
    padding-bottom: 3%;
}

.tandc-text {
    overflow-y: scroll;
    height: 310px;
    font-size: 14px;
    text-align: left;
}

#tnc,
#success_popup,
#failed_popup,
#end_popup,
#alert_popup,
#next_popup,
#answer_popup,
#qna_alert_popup {
    line-height: 22px;
    background: #fff;
    max-width: 630px;
    margin: 40px auto;
    padding: 25px;
    border-radius: 10px;
}

.tandc-text ul li {
    list-style-type: decimal;
    margin-left: 24px;
    margin-right: 3%;
    padding-left: 2%;
    text-align: left;
}

.tandc-text ol li {
    list-style-type: lower-alpha;
}

.hastag_tnc,
.link_tnc {
    font-family: MontserratBold;
}

.link_tnc:hover {
    color: blue;
    text-decoration: underline;
}

/* END TNC ================================================================================ */

/* SOSMED ================================================================================== */
.sosmed_title {
    padding-top: 100px;
    padding-bottom: 40px;
    color: #021c66;
    font-family: 'Avenir-Black';
    font-size: 45px;
    text-align: center;
}

.sosmed {
    padding: 4vw 0;
    text-align: center;
    background-color: #a7cbf3;
}

.sosmed-fb,
.sosmed-twitter,
.sosmed-ig,
.sosmed-brand {
    width: auto;
    padding-right: 20px;
    padding-left: 20px;
    margin: 0;
    height: auto;
    display: inline-block;
    font-family: 'Avenir-Medium';
    font-size: 1.05vw;
    line-height: 1.5;
    color: #2d3062;
    border: none;
}

.sosmed-fb {
    border-right: 2px solid #2d3062;
}

.sosmed-fb:hover,
.sosmed-twitter:hover,
.sosmed-ig:hover,
.sosmed-brand:hover {
    color: #ffffff;
    background-color: transparent;
    transition: none !important;
}

.sosmed-fb:hover .blue-circle,
.sosmed-ig:hover .blue-circle {
    background-color: #ffffff;
}

.sosmed-fb:hover .fa,
.sosmed-ig:hover .fa {
    background-color: #ffffff;
    color: #000;
    border: 1px solid #a7cbf3;
}

.sosmed-brand {
    font-size: 1.5vw;
}

.bestie-stories .fa,
.bestie-stories .fab {
    position: relative;
    background-color: transparent;
    color: #000;
    width: auto;
    height: auto;
    display: inline-block;
}

.fa:before,
.fab:before {
    position: relative;
}

/* END SOSMED ================================================================================== */

*:focus {
    outline: 0;
    outline: none;
}

.ok-button-end,
.ok-button-success,
.ok-button-fail,
.ok-button-tnc,
.ok-button-alert,
.ok-button-next,
.ok-button-answer,
.ok-button-qna-alert {
    font-size: 16pt;
    width: 90px;
    height: 35px;
    font-family: JosefinSans-Regular;
    border-color: #040b29;
    border-width: 1px;
    border-style: solid;
    background-color: #040b29;
    color: #ffffff;
    border-radius: 20px;
    opacity: 0.9;
    cursor: pointer;
}

.ok-button-end:hover,
.ok-button-success:hover,
.ok-button-fail:hover,
.ok-button-tnc:hover,
.ok-button-alert:hover,
.ok-button-next:hover,
.ok-button-answer:hover,
.ok-button-qna-alert:hover {
    opacity: 1;
}

.bs-voting-item-2 {
    display: none;
}

@media only screen and (min-width: 1440px) {}

@media only screen and (max-width: 1024px) {}

@media only screen and (max-width: 768px) {
    .wrapper_menu {
        display: none;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .main-wrapper {
        width: 100%;
    }

    .mean-container .mean-bar {
        display: none;
    }

    header.sticky-header {
        padding: 15px 30px !important;
        position: unset;
    }

    #wrapper-navigation-bar,
    #wrapper-navigation-bar-revamp-hidden {
        display: none;
    }

    .formError {
        left: unset !important;
        right: 10px !important;
    }

    section[role=footer-mobile] {
        display: none;
    }

    .bs-desktop {
        display: none;
    }

    .bs-mobile {
        display: block !important;
    }

    .bs-masthead-image {
        width: 100%;
    }

    .bs-sand {
        width: 90%;
    }

    .bs-line-tl,
    .bs-line-tr,
    .bs-line-voting,
    .bs-line-inspiration,
    .bs-line-quiz {
        display: none;
    }

    .bs-masthead-text {
        top: 65%;
        width: 100%;
        display: block;
        left: unset;
        bottom: unset;
        transform: unset;
        text-align: center;
    }

    .bs-masthead-title {
        font-size: 7vw;
        margin-bottom: 15px;
    }

    .bs-masthead-desc {
        font-size: 4vw;
        line-height: 2.2;
    }

    .bs-voting {
        width: 100%;
    }

    .bs-more-stories {
        display: none;
    }

    .bs-title-bg {
        content: url(https://cimg.zettecdn.com/img/fbp/bestie-stories/mobile/title_bg.png);
    }

    .bs-title p {
        font-size: 4.25vw;
    }

    .bs-voting-item {
        width: 100%;
    }

    .bs-voting-frame {
        margin: 0 30px;
    }

    .bs-voting-text {
        margin-top: -40px;
    }

    .bs-voting-paper {
        width: 100%;
    }

    .bs-voting-caption {
        font-size: 3.66vw;
    }

    .bs-voting-desc {
        font-size: 3.66vw;
        line-height: 1.75;
        top: 13.25%;
    }

    .bs-vote-button {
        width: 40%;
    }

    .bs-vote-button img {
        max-width: unset;
        width: -moz-available;          /* WebKit-based browsers will ignore this. */
        width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
        width: fill-available;
    }

    .bs-inspiration {
        width: 100%;
    }

    .bs-inspiration-content {
        display: block;
        width: 90%;
        margin: auto;
    }

    .bs-inspiration-item {
        width: calc(90% - 30px);
        margin: auto;
        margin-bottom: 60px;
    }

    .bs-inspiration-desc {
        font-size: 3.66vw;
    }

    .bs-read-more {
        width: 40%;
    }

    .slick-prev, 
    .slick-next {
        opacity: 0;
        position: absolute;
        z-index: -99999;
    }

    .bs-quiz-content {
        width: 100%;
        margin-bottom: 0;
    }

    .bs-quiz-item {
        margin-top: 60px;
    }

    .bs-quiz-image {
        text-align: center;
        position: relative;
        left: unset;
        top: unset;
        width: 100%;
        margin-top: -60px;
    }
    
    .bs-quiz-image img {
        width: 60%;
    }

    .bs-quiz-number {
        top: -20px;
        right: 15px;
        z-index: 2;
    }

    .bs-quiz-question {
        padding: 0 20px 20px;
    }

    .bs-quiz-question-text {
        font-size: 4vw;
        text-align: center;
    }

    .bs-quiz-answer textarea {
        font-size: 4vw;
    }

    .bs-next-button {
        position: relative;
        right: unset;
        bottom: unset;
        text-align: center;
        width: 100%;
        padding: 0 0 40px;
    }
    
    .bs-submission .bs-title-bg {
        content: url(https://cimg.zettecdn.com/img/fbp/bestie-stories/mobile/title_bg_form.png);
    }

    .bs-form {
        width: 100%;
        margin: auto;
        background-image: url(https://cimg.zettecdn.com/img/fbp/bestie-stories/mobile/bg_form.png);
        background-size: cover;
        margin-top: -100px;
        padding-top: 125px;
        padding-bottom: 40px;
    }

    .bs-form-bg {
        display: none;
    }

    .bs-form-container {
        position: relative;
        top: unset;
        left: unset;
        width: 100%;
        display: flex;
        justify-content: center;
        transform: unset;
        flex-wrap: wrap;
    }

    .bs-form-field {
        width: 80%;
        margin: auto;
    }

    .bs-form-control {
        font-size: 4vw;
    }

    .text-tnc {
        font-size: 3.33vw;
    }

    .bs-form-tnc {
        width: 100%;
    }

    .bs-footer {
        margin: 0;
        line-height: 1.5;
        background-image: url(https://cimg.clozette.co.id/img/fbp/bestie-stories/footer_bg.png);
        background-size: cover;
        background-repeat: no-repeat;
        padding: 60px 0;
    }

    .bs-footer img {
        display: none;
    }

    .bs-footer p {
        position: relative;
        left: unset;
        bottom: unset;
        transform: unset;
        font-size: 3.66vw;
        top: 20px;
    }

    #cz-scroll-top {
        right: 25px;
    }
    
    .bestie-stories .slick-dots {
        display: block;
        background-image: url(https://cimg.zettecdn.com/img/fbp/bestie-stories/mobile/tape.png);
        background-size: 100% 100%;
        padding: 30px 0;
        position: relative;
        bottom: unset;
        width: 85vw;
        margin: auto;
    }

    .bestie-stories .slick-dots li button:before {
        font-size: 3vw;
    }

}

@media only screen and (max-width: 425px) {}

@media(max-width: 414px) {}

@media(max-width: 375px) {}

@media(max-width: 360px) {}

@media(max-width: 320px) {}