﻿/*
Template: Responsive OTS
Author: M4verick
Developer by: ETransact Sdn Bhd
Email : erwanhafizi@gmail.com
Website : www.backpackers.my
Version :COVID19#SOCIALDISTANCING 23022021

*/
/* minimum resolution - 1024x768. according to w3schools (jan 2014) - 99% of visitors have a resolution 1024 x 768 pixels or higher */
@media print {
}


@media only screen and (max-width: 320px) {
.search-trip-container {
position: relative !important
}

.table-trip td.upper-deck {
margin-left: 0 !important
}

.table-trip .trip-item td > div {
font-size: .857em !important
}
}
@media only screen and (max-width: 375px) {
    /*expresscheckin*/
    .payment-expresscheckin-logo {
        position: absolute;
        top: 7px;
        left: 302px;
        opacity: 80%;
        width: 55px !important;
        height: 55px !important;
    }

    .payment-expresscheckin-title {
        position: absolute;
        font-family: 'Montserrat', sans-serif;
        padding-left: 12px;
        color: #404040;
        font-size: 35px !important;
        top: -12px;
    }

    .payment-expresscheckin-title2 {
        position: absolute;
        font-family: 'Montserrat', sans-serif;
        padding-left: 12px;
        color: #fff;
        font-size: 35px !important;
        top: 29px;
    }

    .payment-expresscheckin-subtitle {
        position: absolute;
        font-family: 'Montserrat', sans-serif;
        padding-left: 12px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        top: 71px;
    }

    .payment-expresscheckin .qr-depart {
        position: absolute;
        top: 121px;
        left: 52px;
    }

    .payment-expresscheckin .qr-return {
        position: absolute;
        top: 121px;
        left: 203px;
    }

    .payment-expresscheckin .qr-depart, .payment-expresscheckin .qr-return {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        background-color: #2f2f2f;
        border-radius: 15px;
        height: 35px;
        width: 126px;
        color: #fff;
        font-size: 18px;
        padding-left: 21px;
        padding-top: 5px;
    }

    .payment-expresscheckin .small-text-trip-alert {
        position: absolute;
        color: #000;
        padding-left: 35px;
        top: 161px;
    }


    /*Carousel Current Info*/
    /*.figure-img {
        width: 118px;
        height: 101px;
    }*/

    .figure-news figcaption span:nth-child(2) {
        font-size: 18px !important;
    }

    /* basic styling */
    .figure-news {
        width: 37% !important;
        height: 162px !important;
        box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.4);
        border-radius: 8px;
        position: relative;
        pointer-events: none;
        background: #ecf0f1;
        transition: 0.3s ease-in-out;
        margin-left: 5px;
        margin-right: 5px;
    }
    /*tawaran 1*/
    .figure-img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px 8px 0 0;
        transition: transform 0.3s ease-in-out;
    }


    .figure-news .img1:after,
    .figure-news .img2:after,
    .figure-news .img3:after,
    .figure-news .img4:after,
    .figure-news .img5:after,
    .figure-news .img6:after,
    .figure-news .img7:after,
    .figure-news .img8:after,
    .figure-news .img9:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 109px !important;
        background: linear-gradient(transparent, #ecf0f1 44%);
        border-radius: 0 0 8px 8px;
    }

    .figure-news figcaption {
        margin-top: 9px;
        height: 13px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
        overflow: visible;
        background: #ecf0f1;
        border-radius: 0 0 8px 8px;
    }
    /* Apply hover animation to figcaption */
    .figure-news:hover .figcaption {
        transform: translateY(-10px);
        transition: transform 0.3s ease-in-out;
    }

    .figure-news figcaption span:nth-child(1) {
        position: absolute;
        font-family: Poppins, sans-serif;
        font-size: 13px !important;
        top: 0;
        opacity: 0;
        left: 0;
        color: #2c3e50;
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    }

    .figure-news figcaption span:nth-child(2) {
        font-family: Poppins, sans-serif;
        font-size: 11px !important;
        overflow: visible;
        position: absolute;
        top: -44px !important;
        left: 10px !important;
        white-space: nowrap;
        color: #2c3e50;
        z-index: 10;
        transform: rotate(-2deg);
        text-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
        transition: top 0.3s ease-in-out;
    }

    .figure-news figcaption span:nth-child(3) {
        font-family: Poppins, sans-serif;
        font-weight: 300;
        font-size: 14px;
        opacity: 0;
        padding: 0 20px;
        height: 20px;
        overflow: hidden;
        cursor: text;
        display: none;
        position: absolute;
    }

    .figure-news button {
        position: absolute;
        bottom: -10px;
        width: 77px !important;
        left: calc(50% - 38px) !important;
        background: #f3aa05fc;
        color: #fff;
        border: 0;
        height: 30px !important;
        border-radius: 4px;
        transform: rotate(1deg);
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
        cursor: pointer;
        pointer-events: auto;
        transition: 0.3s ease-in-out;
        overflow: hidden;
        z-index: 20;
    }

        .figure-news button:focus {
            outline: 0;
        }

        .figure-news button:before {
            content: "More";
            position: absolute;
            top: 4px !important;
            left: 21px !important;
            opacity: 1;
            transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
            color: #2e2b2b;
        }

        .figure-news button:after {
            content: "Back";
            opacity: 0;
            top: 4px !important;
            left: 24px !important;
            position: absolute;
            transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
            color: #2e2b2b;
        }

    .figure-news #button-news1-more:after,
    .figure-news #button-news3-more:after,
    .figure-news #button-news5-more:after,
    .figure-news #button-news6-more:after,
    .figure-news #button-news7-more:after,
    .figure-news #button-news8-more:after {
        content: "More" !important;
        opacity: 1;
        top: 4px !important;
        left: 20px !important;
        position: absolute;
        transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
        color: #2e2b2b;
    }

    .figure-news.open #button-news1,
    .figure-news.open #button-news3,
    .figure-news.open #button-news5,
    .figure-news.open #button-news6,
    .figure-news.open #button-news7,
    .figure-news.open #button-news8 {
        transform: translateX(40px) !important;
    }

    .figure-news.open #button-news1-more,
    .figure-news.open #button-news3-more,
    .figure-news.open #button-news5-more,
    .figure-news.open #button-news6-more,
    .figure-news.open #button-news7-more,
    .figure-news.open #button-news8-more {
        color: #2e2b2b;
        transform: translateX(-43px) !important;
    }

    .figure-news:hover {
        transition: 0.3s ease-in-out;
        transform: rotateX(-2deg);
        box-shadow: 3px -3px 6px 0 rgba(0, 0, 0, 0.4);
    }

        .figure-news:hover button {
            background: #dfb453fc;
            bottom: -13px;
            transition: 0.3s ease-in-out;
        }

        .figure-news:hover span:nth-child(2) {
            top: -39px;
            transition: top 0.3s ease-in-out;
        }

    .figure-news .img1,
    .figure-news .img2,
    .figure-news .img3,
    .figure-news .img4,
    .figure-news .img5,
    .figure-news .img6,
    .figure-news .img7,
    .figure-news .img8,
    .figure-news .img9 {
        width: 100%;
        height: 84% !important;
    }

    /*.figure-news .img1, .figure-news .img2, .figure-news .img3, .figure-news .img4, .figure-news .img5, .figure-news .img6, .figure-news .img7, .figure-news .img8, .figure-news .img9 {
        width: 198px !important;
        height: 140px !important;
    }*/

    .figure-news.open .img1,
    .figure-news.open .img2,
    .figure-news.open .img3,
    .figure-news.open .img4,
    .figure-news.open .img5,
    .figure-news.open .img6,
    .figure-news.open .img7,
    .figure-news.open .img8,
    .figure-news.open .img9 {
        height: 0;
    }

    .figure-news.open figcaption {
        height: 158px !important;
        border-radius: 8px;
        margin-top: -142px;
    }

        .figure-news.open figcaption span:nth-child(1) {
            top: -25px;
            opacity: 1;
            left: 84px;
        }

        .figure-news.open figcaption span:nth-child(2) {
            top: -3px !important;
        }

        .figure-news.open figcaption span:nth-child(3) {
            height: 100%;
            opacity: 1;
            padding-top: 42px;
            display: block;
            font-size: 8px;
            margin-top: -8px;
        }

    .figure-news.open button:before {
        opacity: 0;
        left: 100%;
    }

    .figure-news.open button:after {
        opacity: 1;
        left: 45px;
    }

    .figure-news.open:hover figcaption span:nth-child(2) {
        top: -144px;
        transition: top 0.3s ease-in-out;
    }
}

@media only screen and (max-width:418px) {
.tabs-title ul li {
padding: 0 .5em !important
}

.tabs-title svg {
width: 15px !important
}

.search-trip-container {
position: relative !important
}

.brand-logo {
width: 120px
}

.seatlayout-container {
padding: 0
}

.seatlayout-design {
padding: 1rem
}

.ots-search-button {
}

.ots-ddate, .ots-rdate {
width: 100%;
float: none
}

.table-trip .trip-logo {
height: 25px !important;
width: 63px !important
}

.table-trip .trip-item {
height: 3em !important
}

.table-trip .trip-price {
font-weight: 700
}

.table-trip .trip-price, .table-trip .trip-time {
font-size: .9em !important;
font-weight: 700
}

.table-trip .trip-no {
font-size: .85em
}

.table-curved tr:last-child td:first-child {
margin: 0
}
/*expresscheckin*/
.payment-expresscheckin-logo {
    position: absolute;
    top: 7px;
    left: 272px;
    opacity: 80%;
    width: 50px !important;
    height: 50px !important;
}

.payment-expresscheckin-title {
    position: absolute;
    font-family: 'Montserrat', sans-serif;
    padding-left: 16px;
    color: #404040;
    font-size: 35px !important;
    top: -12px;
}

.payment-expresscheckin-title2 {
    position: absolute;
    font-family: 'Montserrat', sans-serif;
    padding-left: 14px;
    color: #fff;
    font-size: 35px !important;
    top: 29px;
}

.payment-expresscheckin-subtitle {
    position: absolute;
    font-family: 'Montserrat', sans-serif;
    padding-left: 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    top: 71px;
}
.payment-expresscheckin .qr-depart {
    position: absolute;
    top: 121px;
    left: 36px;
}
.payment-expresscheckin .qr-return {
    position: absolute;
    top: 121px;
    left: 177px;
}
.payment-expresscheckin .qr-depart, .payment-expresscheckin .qr-return {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    background-color: #2f2f2f;
    border-radius: 15px;
    height: 35px;
    width: 126px;
    color: #fff;
    font-size: 18px;
    padding-left: 21px;
    padding-top: 5px;
}
.payment-expresscheckin .small-text-trip-alert {
    position: absolute;
    color: #000;
    padding-left: 19px;
    top: 161px;
}
}

@media only screen and (max-width: 488px) {
.destination-input, .calendar-input {
display: block
}

.destination-arrow {
display: none !important
}

.search-from, .search-to, .ots-ddate, .ots-rdate {
width: 100% !important
}

body .search-trip-wrapper section div.checkbox {
top: 0;
background-color: transparent !important
}

.search-to .select2-selection__rendered, .search-to label {
padding-left: 0 !important
}

div.search-to .select2-selection {
border-left: 1px solid #dee2ee !important;
border-top: none !important
}

.ots-rdate {
border: 1px solid #dee2ee;
border-top: none
}

.container-secondary section .wrapper {
padding-top: 40px !important
}

.imghvr-blur figcaption { /*opacity:1*/
}

[class^='imghvr-'] figcaption {
padding: 8px !important;
font-size: 13px
}
}

@media only screen and (min-width:489px) {
.search-to .select2-selection__rendered {
padding-left: .9em !important
}

.destination-input, .calendar-input, .destination-label {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex
}

}

@media only screen and (max-width:576px) {
    .image-retina-bm, .image-retina-en, .image-retina-contact-bm, .image-retina-contact-en, .promo-deals {
        background: none
    }

    .toast__container {
        bottom: 10px;
        right: 0;
        left: 0
    }

    .toast {
        max-width: 100%
    }

    .check {
        font-size: 12px !important
    }

    .check_hero {
        height: 892px !important;
    }

    .check_steps {
        top: 50% !important;
        right: 10% !important;
    }

    .check_form {
        width: 80% !important;
        margin-top: -120% !important;
    }

    .GetCheckBookingModal {
        width: 80% !important;
        margin-top: 5% !important;
        left: 0 !important;
    }

    .tooltip-img {
        display: none;
        position: absolute;
        top: -50%;
        left: 50% !important;
        transform: translateX(-50%);
        width: 180% !important;
        z-index: 9999;
    }

    .input-group-tooltip:hover .tooltip-img {
        display: block;
    }

    .formRef, .formEmail {
        font-size: 11px;
    }

}
@media only screen and (max-width:540px) and (min-width:426px) {
    /*.figure-img {
        width: 118px;
        height: 101px;
    }*/

    .figure-news figcaption span:nth-child(2) {
        font-size: 18px !important;
    }

    /* basic styling */
    .figure-news {
        width: 37% !important;
        height: 162px !important;
        box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.4);
        border-radius: 8px;
        position: relative;
        pointer-events: none;
        background: #ecf0f1;
        transition: 0.3s ease-in-out;
        margin-left: 5px;
        margin-right: 5px;
    }
    /*tawaran 1*/
    .figure-img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px 8px 0 0;
        transition: transform 0.3s ease-in-out;
    }


    .figure-news .img1:after,
    .figure-news .img2:after,
    .figure-news .img3:after,
    .figure-news .img4:after,
    .figure-news .img5:after,
    .figure-news .img6:after,
    .figure-news .img7:after,
    .figure-news .img8:after,
    .figure-news .img9:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 109px !important;
        background: linear-gradient(transparent, #ecf0f1 44%);
        border-radius: 0 0 8px 8px;
    }

    .figure-news figcaption {
        margin-top: 9px;
        height: 13px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
        overflow: visible;
        background: #ecf0f1;
        border-radius: 0 0 8px 8px;
    }
    /* Apply hover animation to figcaption */
    .figure-news:hover .figcaption {
        transform: translateY(-10px);
        transition: transform 0.3s ease-in-out;
    }

    .figure-news figcaption span:nth-child(1) {
        position: absolute;
        font-family: Poppins, sans-serif;
        font-size: 13px !important;
        top: 0;
        opacity: 0;
        left: 0;
        color: #2c3e50;
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    }

    .figure-news figcaption span:nth-child(2) {
        font-family: Poppins, sans-serif;
        font-size: 11px !important;
        overflow: visible;
        position: absolute;
        top: -44px !important;
        left: 10px !important;
        white-space: nowrap;
        color: #2c3e50;
        z-index: 10;
        transform: rotate(-2deg);
        text-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
        transition: top 0.3s ease-in-out;
    }

    .figure-news figcaption span:nth-child(3) {
        font-family: Poppins, sans-serif;
        font-weight: 300;
        font-size: 1.4em;
        opacity: 0;
        padding: 0 20px;
        height: 20px;
        overflow: hidden;
        cursor: text;
        display: none;
        position: absolute;
    }

    .figure-news button {
        position: absolute;
        bottom: -10px;
        width: 77px !important;
        left: calc(50% - 38px) !important;
        background: #f3aa05fc;
        color: #fff;
        border: 0;
        height: 30px !important;
        border-radius: 4px;
        transform: rotate(1deg);
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
        cursor: pointer;
        pointer-events: auto;
        transition: 0.3s ease-in-out;
        overflow: hidden;
        z-index: 20;
    }

        .figure-news button:focus {
            outline: 0;
        }

        .figure-news button:before {
            content: "More";
            position: absolute;
            top: 4px !important;
            left: 21px !important;
            opacity: 1;
            transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
            color: #2e2b2b;
        }

        .figure-news button:after {
            content: "Back";
            opacity: 0;
            top: 4px !important;
            left: 24px !important;
            position: absolute;
            transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
            color: #2e2b2b;
        }

    .figure-news #button-news1-more:after,
    .figure-news #button-news3-more:after,
    .figure-news #button-news5-more:after,
    .figure-news #button-news6-more:after,
    .figure-news #button-news7-more:after,
    .figure-news #button-news8-more:after {
        content: "More" !important;
        opacity: 1;
        top: 4px !important;
        left: 20px !important;
        position: absolute;
        transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
        color: #2e2b2b;
    }

    .figure-news.open #button-news1,
    .figure-news.open #button-news3,
    .figure-news.open #button-news5,
    .figure-news.open #button-news6,
    .figure-news.open #button-news7,
    .figure-news.open #button-news8 {
        transform: translateX(40px) !important;
    }

    .figure-news.open #button-news1-more,
    .figure-news.open #button-news3-more,
    .figure-news.open #button-news5-more,
    .figure-news.open #button-news6-more,
    .figure-news.open #button-news7-more,
    .figure-news.open #button-news8-more {
        color: #2e2b2b;
        transform: translateX(-43px) !important;
    }

    .figure-news:hover {
        transition: 0.3s ease-in-out;
        transform: rotateX(-2deg);
        box-shadow: 3px -3px 6px 0 rgba(0, 0, 0, 0.4);
    }

        .figure-news:hover button {
            background: #dfb453fc;
            bottom: -13px;
            transition: 0.3s ease-in-out;
        }

        .figure-news:hover span:nth-child(2) {
            top: -39px;
            transition: top 0.3s ease-in-out;
        }

    .figure-news .img1,
    .figure-news .img2,
    .figure-news .img3,
    .figure-news .img4,
    .figure-news .img5,
    .figure-news .img6,
    .figure-news .img7,
    .figure-news .img8,
    .figure-news .img9 {
        width: 100%;
        height: 84% !important;
    }

    /*.figure-news .img1, .figure-news .img2, .figure-news .img3, .figure-news .img4, .figure-news .img5, .figure-news .img6, .figure-news .img7, .figure-news .img8, .figure-news .img9 {
        width: 198px !important;
        height: 140px !important;
    }*/

    .figure-news.open .img1,
    .figure-news.open .img2,
    .figure-news.open .img3,
    .figure-news.open .img4,
    .figure-news.open .img5,
    .figure-news.open .img6,
    .figure-news.open .img7,
    .figure-news.open .img8,
    .figure-news.open .img9 {
        height: 0;
    }

    .figure-news.open figcaption {
        height: 158px !important;
        border-radius: 8px;
        margin-top: -142px;
    }

        .figure-news.open figcaption span:nth-child(1) {
            top: -25px;
            opacity: 1;
            left: 84px;
        }

        .figure-news.open figcaption span:nth-child(2) {
            top: -3px !important;
        }

        .figure-news.open figcaption span:nth-child(3) {
            height: 100%;
            opacity: 1;
            padding-top: 42px;
            display: block;
            font-size: 8px;
            margin-top: -8px;
        }

    .figure-news.open button:before {
        opacity: 0;
        left: 100%;
    }

    .figure-news.open button:after {
        opacity: 1;
        left: 45px;
    }

    .figure-news.open:hover figcaption span:nth-child(2) {
        top: -144px;
        transition: top 0.3s ease-in-out;
    }

    .usecode {
        font-size: 9px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -19px !important;
    }

    .promocode {
        font-size: 15px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        border: none;
        border-radius: 10px;
        background: #007bff;
        color: #fff;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.3s ease;
        margin-top: -9px !important;
    }

        .promocode:hover {
            background: #0056b3;
        }


}



@media only screen and (max-width:576px) and (min-width:376px) {
    /*expresscheckin*/
    .payment-expresscheckin-logo {
        position: absolute;
        top: 10px;
        left: 283px;
        opacity: 80%;
        width: 55px !important;
        height: 55px !important;
    }

    .payment-expresscheckin-title {
        position: absolute;
        font-family: 'Montserrat', sans-serif;
        padding-left: 19px;
        color: #404040;
        font-size: 37px !important;
        top: -12px;
    }
    .payment-expresscheckin-title2 {
        position: absolute;
        font-family: 'Montserrat', sans-serif;
        padding-left: 19px;
        color: #fff;
        font-size: 35px !important;
        top: 29px;
    }

    .payment-expresscheckin-subtitle {
        position: absolute;
        font-family: 'Montserrat', sans-serif;
        padding-left: 20px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        top: 71px;
    }

    .payment-expresscheckin .qr-depart {
        position: absolute;
        top: 121px;
        left: 36px;
    }

    .payment-expresscheckin .qr-return {
        position: absolute;
        top: 121px;
        left: 185px;
    }

    .payment-expresscheckin .qr-depart, .payment-expresscheckin .qr-return {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        background-color: #2f2f2f;
        border-radius: 15px;
        height: 35px;
        width: 126px;
        color: #fff;
        font-size: 18px;
        padding-left: 20px;
        padding-top: 5px;
    }

    .payment-expresscheckin .small-text-trip-alert {
        position: absolute;
        color: #000;
        padding-left: 46px;
        top: 161px;
    }


    /*Carousel Current Info*/
    /*.figure-img {
        width: 118px;
        height: 101px;
    }*/

    .figure-news figcaption span:nth-child(2) {
        font-size: 18px !important;
    }

    /* basic styling */
    .figure-news {
        width: 37% !important;
        height: 162px !important;
        box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.4);
        border-radius: 8px;
        position: relative;
        pointer-events: none;
        background: #ecf0f1;
        transition: 0.3s ease-in-out;
        margin-left: 5px;
        margin-right: 5px;
    }
    /*tawaran 1*/
    .figure-img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px 8px 0 0;
        transition: transform 0.3s ease-in-out;
    }


    .figure-news .img1:after,
    .figure-news .img2:after,
    .figure-news .img3:after,
    .figure-news .img4:after,
    .figure-news .img5:after,
    .figure-news .img6:after,
    .figure-news .img7:after,
    .figure-news .img8:after,
    .figure-news .img9:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 109px !important;
        background: linear-gradient(transparent, #ecf0f1 44%);
        border-radius: 0 0 8px 8px;
    }

    .figure-news figcaption {
        margin-top: 9px;
        height: 13px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
        overflow: visible;
        background: #ecf0f1;
        border-radius: 0 0 8px 8px;
    }
    /* Apply hover animation to figcaption */
    .figure-news:hover .figcaption {
        transform: translateY(-10px);
        transition: transform 0.3s ease-in-out;
    }

    .figure-news figcaption span:nth-child(1) {
        position: absolute;
        font-family: Poppins, sans-serif;
        font-size: 13px !important;
        top: 0;
        opacity: 0;
        left: 0;
        color: #2c3e50;
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    }

    .figure-news figcaption span:nth-child(2) {
        font-family: Poppins, sans-serif;
        font-size: 11px !important;
        overflow: visible;
        position: absolute;
        top: -44px !important;
        left: 10px !important;
        white-space: nowrap;
        color: #2c3e50;
        z-index: 10;
        transform: rotate(-2deg);
        text-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
        transition: top 0.3s ease-in-out;
    }

    .figure-news figcaption span:nth-child(3) {
        font-family: Poppins, sans-serif;
        font-weight: 300;
        font-size: 14px;
        opacity: 0;
        padding: 0 20px;
        height: 20px;
        overflow: hidden;
        cursor: text;
        display: none;
        position: absolute;
    }

    .figure-news button {
        position: absolute;
        bottom: -10px;
        width: 77px !important;
        left: calc(50% - 38px) !important;
        background: #f3aa05fc;
        color: #fff;
        border: 0;
        height: 30px !important;
        border-radius: 4px;
        transform: rotate(1deg);
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
        cursor: pointer;
        pointer-events: auto;
        transition: 0.3s ease-in-out;
        overflow: hidden;
        z-index: 20;
    }

        .figure-news button:focus {
            outline: 0;
        }

        .figure-news button:before {
            content: "More";
            position: absolute;
            top: 4px !important;
            left: 21px !important;
            opacity: 1;
            transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
            color: #2e2b2b;
        }

        .figure-news button:after {
            content: "Back";
            opacity: 0;
            top: 4px !important;
            left: 24px !important;
            position: absolute;
            transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
            color: #2e2b2b;
        }

    .figure-news #button-news1-more:after,
    .figure-news #button-news3-more:after,
    .figure-news #button-news5-more:after,
    .figure-news #button-news6-more:after,
    .figure-news #button-news7-more:after,
    .figure-news #button-news8-more:after {
        content: "More" !important;
        opacity: 1;
        top: 4px !important;
        left: 20px !important;
        position: absolute;
        transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
        color: #2e2b2b;
    }

    .figure-news.open #button-news1,
    .figure-news.open #button-news3,
    .figure-news.open #button-news5,
    .figure-news.open #button-news6,
    .figure-news.open #button-news7,
    .figure-news.open #button-news8 {
        transform: translateX(40px) !important;
    }

    .figure-news.open #button-news1-more,
    .figure-news.open #button-news3-more,
    .figure-news.open #button-news5-more,
    .figure-news.open #button-news6-more,
    .figure-news.open #button-news7-more,
    .figure-news.open #button-news8-more {
        color: #2e2b2b;
        transform: translateX(-43px) !important;
    }

    .figure-news:hover {
        transition: 0.3s ease-in-out;
        transform: rotateX(-2deg);
        box-shadow: 3px -3px 6px 0 rgba(0, 0, 0, 0.4);
    }

        .figure-news:hover button {
            background: #dfb453fc;
            bottom: -13px;
            transition: 0.3s ease-in-out;
        }

        .figure-news:hover span:nth-child(2) {
            top: -39px;
            transition: top 0.3s ease-in-out;
        }

    .figure-news .img1,
    .figure-news .img2,
    .figure-news .img3,
    .figure-news .img4,
    .figure-news .img5,
    .figure-news .img6,
    .figure-news .img7,
    .figure-news .img8,
    .figure-news .img9 {
        width: 100%;
        height: 84% !important;
    }

    /*.figure-news .img1, .figure-news .img2, .figure-news .img3, .figure-news .img4, .figure-news .img5, .figure-news .img6, .figure-news .img7, .figure-news .img8, .figure-news .img9 {
        width: 198px !important;
        height: 140px !important;
    }*/

    .figure-news.open .img1,
    .figure-news.open .img2,
    .figure-news.open .img3,
    .figure-news.open .img4,
    .figure-news.open .img5,
    .figure-news.open .img6,
    .figure-news.open .img7,
    .figure-news.open .img8,
    .figure-news.open .img9 {
        height: 0;
    }

    .figure-news.open figcaption {
        height: 158px !important;
        border-radius: 8px;
        margin-top: -142px;
    }

        .figure-news.open figcaption span:nth-child(1) {
            top: -25px;
            opacity: 1;
            left: 84px;
        }

        .figure-news.open figcaption span:nth-child(2) {
            top: -3px !important;
        }

        .figure-news.open figcaption span:nth-child(3) {
            height: 100%;
            opacity: 1;
            padding-top: 42px;
            display: block;
            font-size: 8px;
            margin-top: -8px;
        }

    .figure-news.open button:before {
        opacity: 0;
        left: 100%;
    }

    .figure-news.open button:after {
        opacity: 1;
        left: 45px;
    }

    .figure-news.open:hover figcaption span:nth-child(2) {
        top: -144px;
        transition: top 0.3s ease-in-out;
    }

}

        @media only screen and (min-width:576px) {
            .toast__container {
                bottom: 20px;
                right: 20px
            }

            .table-curved tr:last-child td:first-child {
                margin-right: 1rem
            }

            .toast {
                max-width: 500px
            }
        }

        @media only screen and (min-width:669px) and (max-width:699px) {
            #home-slide .carousel-caption {
                height: 330px
            }
        }

        @media only screen and (max-width:699px) {
            .navbar-logo {
                margin: 0 auto
            }
            /*body .brand-logo path{fill:#fff}*/
        }

        @media only screen and (max-width:754px) {
            .ruang-imej, .ruang-imej-profile, .ruang-imej-contact, .ruang-imej-dasar, .ruang-imej-promo, .ruang-imej-bus, .ruang-imej-refund {
                background-color: #FCB722;
                min-height: 102px
            }

            [class|="ruang"] .titlebg {
                padding-left: 1em !important;
                top: 14px;
            }
        }

        @media (max-width: 754px) {
            .ruang-imej-refund .title-refund-text {
                display: none;
            }

            .footer-social .footer-social-child {
                flex-wrap: nowrap;
            }

            .img-refund-protect {
                width: 70% !important;
            }
        }

        @media (max-width: 986px) {

            .footer-social .footer-social-child {
                flex-wrap: nowrap;
            }
        }

        @media only screen and (min-width:700px) and (max-width:754px) {
            header.header {
                box-shadow: none
            }

            #home-slide .carousel-caption {
                height: 330px
            }
            /*.navbar.container{background:#ff7b59}*/
        }

        @media only screen and (min-width:755px) {
            .ruang-imej, .ruang-imej-profile, .ruang-imej-contact, .ruang-imej-dasar, .ruang-imej-promo, .ruang-imej-bus, .ruang-imej-refund, .check_hero {
                height: 400px
            }

            .ruang-imej-download {
            }

            .ruang-imej-profile {
                background: url('../images/Main/slider/profil_bg.jpg');
                background-size: cover;
                background-position: center
            }

            .ruang-imej-contact {
                background: url('../images/Main/slider/contact_bg.jpg');
                background-size: cover;
                background-position: right
            }

            .ruang-imej-dasar {
                background: url('../images/Main/slider/privacy_bg.jpg');
                background-size: cover;
                background-position: center
            }

            .ruang-imej-promo {
                background: url('../images/Main/slider/promo_bg.jpg');
                background-size: cover;
                background-position: center
            }

            .ruang-imej-refund {
                background: url('../images/Main/slider/refund_bg.png');
                background-size: cover;
                background-position: center
            }

            .ruang-imej-bus {
                background: url('../images/Main/slider/bus_bg.jpg');
                background-size: cover;
                background-position: center
            }

            .check_hero {
                background: url('../images/Main/slider/checkbook_bg.png');
                background-size: cover;
                background-position: center
            }

            .title-refund-text {
                text-align: center;
                padding: 140px;
                font-size: 80px;
                font-weight: bold;
                color: white;
                -webkit-text-stroke: 2px black;
            }
        }

        @media only screen and (max-width: 767px) and (min-width:755px) {
            #home-slide .carousel-caption {
                height: 330px
            }
        }
        @media only screen and (max-width: 767px) and (min-width:541px) {
            /*.figure-img {
                width: 153px !important;
                height: 101px !important;
            }*/

            .figure-news figcaption span:nth-child(2) {
                font-size: 18px !important;
            }

            /* basic styling */
            .figure-news {
                width: 30% !important;
                height: 162px !important;
                box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.4);
                border-radius: 8px;
                position: relative;
                pointer-events: none;
                background: #ecf0f1;
                transition: 0.3s ease-in-out;
                margin-left: 5px;
                margin-right: 5px;
            }
            /*tawaran 1*/
            .figure-img {
                width: 100% !important;
                height: 49% !important;
                border-radius: 8px 8px 0 0;
                transition: transform 0.3s ease-in-out;
            }


            .figure-news .img1:after,
            .figure-news .img2:after,
            .figure-news .img3:after,
            .figure-news .img4:after,
            .figure-news .img5:after,
            .figure-news .img6:after,
            .figure-news .img7:after,
            .figure-news .img8:after,
            .figure-news .img9:after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 109px !important;
                background: linear-gradient(transparent, #ecf0f1 44%);
                border-radius: 0 0 8px 8px;
            }

            .figure-news figcaption {
                margin-top: -32px;
                height: 0px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                position: relative;
                overflow: visible;
                background: #ecf0f1;
                border-radius: 0 0 8px 8px;
                font-size: 13px !important;
            }
            /* Apply hover animation to figcaption */
            .figure-news:hover .figcaption {
                transform: translateY(-10px);
                transition: transform 0.3s ease-in-out;
            }

            .figure-news figcaption span:nth-child(1) {
                position: absolute;
                font-family: Poppins, sans-serif;
                font-size: 13px !important;
                top: 0;
                opacity: 0;
                left: 0;
                color: #2c3e50;
                text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            }

            .figure-news figcaption span:nth-child(2) {
                font-family: Poppins, sans-serif;
                font-size: 11px !important;
                overflow: visible;
                position: absolute;
                top: -44px !important;
                left: 10px !important;
                white-space: nowrap;
                color: #2c3e50;
                z-index: 10;
                transform: rotate(-2deg);
                text-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
                transition: top 0.3s ease-in-out;
            }

            .figure-news figcaption span:nth-child(3) {
                font-family: Poppins, sans-serif;
                font-weight: 300;
                font-size: 14px;
                opacity: 0;
                padding: 0 20px;
                height: 20px;
                overflow: hidden;
                cursor: text;
                display: none;
                position: absolute;
            }

            .figure-news button {
                position: absolute;
                bottom: -10px;
                width: 77px !important;
                left: calc(50% - 38px) !important;
                background: #f3aa05fc;
                color: #fff;
                border: 0;
                height: 30px !important;
                border-radius: 4px;
                transform: rotate(1deg);
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
                cursor: pointer;
                pointer-events: auto;
                transition: 0.3s ease-in-out;
                overflow: hidden;
                z-index: 20;
            }

                .figure-news button:focus {
                    outline: 0;
                }

                .figure-news button:before {
                    content: "More";
                    position: absolute;
                    top: 4px !important;
                    left: 21px !important;
                    opacity: 1;
                    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                    color: #2e2b2b;
                }

                .figure-news button:after {
                    content: "Back";
                    opacity: 0;
                    top: 4px !important;
                    left: 24px !important;
                    position: absolute;
                    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                    color: #2e2b2b;
                }

            .figure-news #button-news1-more:after,
            .figure-news #button-news3-more:after,
            .figure-news #button-news5-more:after,
            .figure-news #button-news6-more:after,
            .figure-news #button-news7-more:after,
            .figure-news #button-news8-more:after {
                content: "More" !important;
                opacity: 1;
                top: 4px !important;
                left: 20px !important;
                position: absolute;
                transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                color: #2e2b2b;
            }

            .figure-news.open #button-news1,
            .figure-news.open #button-news3,
            .figure-news.open #button-news5,
            .figure-news.open #button-news6,
            .figure-news.open #button-news7,
            .figure-news.open #button-news8 {
                transform: translateX(40px) !important;
            }

            .figure-news.open #button-news1-more,
            .figure-news.open #button-news3-more,
            .figure-news.open #button-news5-more,
            .figure-news.open #button-news6-more,
            .figure-news.open #button-news7-more,
            .figure-news.open #button-news8-more {
                color: #2e2b2b;
                transform: translateX(-43px) !important;
            }

            .figure-news:hover {
                transition: 0.3s ease-in-out;
                transform: rotateX(-2deg);
                box-shadow: 3px -3px 6px 0 rgba(0, 0, 0, 0.4);
            }

                .figure-news:hover button {
                    background: #dfb453fc;
                    bottom: -13px;
                    transition: 0.3s ease-in-out;
                }

                .figure-news:hover span:nth-child(2) {
                    top: -39px;
                    transition: top 0.3s ease-in-out;
                }

            /*.figure-news .img1,
            .figure-news .img2,
            .figure-news .img3,
            .figure-news .img4,
            .figure-news .img5,
            .figure-news .img6,
            .figure-news .img7,
            .figure-news .img8,
            .figure-news .img9 {
                width: 311px;
                height: 210px;
            }*/

            .figure-news .img1, .figure-news .img2, .figure-news .img3, .figure-news .img4, .figure-news .img5, .figure-news .img6, .figure-news .img7, .figure-news .img8, .figure-news .img9 {               
                height: 120% !important;
            }

            .figure-news.open .img1,
            .figure-news.open .img2,
            .figure-news.open .img3,
            .figure-news.open .img4,
            .figure-news.open .img5,
            .figure-news.open .img6,
            .figure-news.open .img7,
            .figure-news.open .img8,
            .figure-news.open .img9 {
                height: 0;
            }

            .figure-news.open figcaption {
                height: 158px !important;
                border-radius: 8px;
                margin-top: -142px;
            }

                .figure-news.open figcaption span:nth-child(1) {
                    top: -25px;
                    opacity: 1;
                    left: 84px;
                }

                .figure-news.open figcaption span:nth-child(2) {
                    top: -3px !important;
                }

                .figure-news.open figcaption span:nth-child(3) {
                    height: 100%;
                    opacity: 1;
                    padding-top: 42px;
                    display: block;
                    font-size: 8px;
                    margin-top: -8px;
                }

            .figure-news.open button:before {
                opacity: 0;
                left: 100%;
            }

            .figure-news.open button:after {
                opacity: 1;
                left: 45px;
            }

            .figure-news.open:hover figcaption span:nth-child(2) {
                top: -144px;
                transition: top 0.3s ease-in-out;
            }

            .usecode {
                font-size: 9px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: -19px !important;
            }

            .promocode {
                font-size: 15px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 20px;
                border: none;
                border-radius: 10px;
                background: #007bff;
                color: #fff;
                text-align: center;
                text-decoration: none;
                cursor: pointer;
                transition: background 0.3s ease;
                margin-top: -9px !important;
            }

                .promocode:hover {
                    background: #0056b3;
                }
            .payment-expresscheckin-logo {
                position: absolute;
                top: 29px;
                left: 355px;
                opacity: 80%;
                width: 126px !important;
                height: 144px !important;
            }

        }
        @media only screen and (max-width: 767px) and (min-width: 577px) {

            .payment-expresscheckin-title {
                position: absolute;
                font-family: 'Montserrat', sans-serif;
                padding-left: 45px;
                color: #404040;
                font-size: 36px !important;
                top: -12px;
            }
            .payment-expresscheckin-title2 {
                position: absolute;
                font-family: 'Montserrat', sans-serif;
                padding-left: 43px;
                color: #fff;
                font-size: 37px !important;
                top: 29px;
            }
        }
        @media only screen and (max-width: 767px) and (min-width: 570px) {
            .payment-expresscheckin-logo {
                position: absolute;
                top: 26px;
                left: 358px;
                opacity: 80%;
                width: 150px !important;
                height: 159px !important;
            }
        }


        @media only screen and (max-width: 767px) {
            div.search-to .select2-selection {
                border-bottom: 1px solid #dee2ee
            }
            /* remove padding / margin. fixed for small device and below*/
            .row-no-padding-margin {
                margin: 0
            }

                .row-no-padding-margin > [class*="col-"] {
                    padding-left: 0 !important;
                    padding-right: 0 !important
                }
        }
        @media only screen and (min-width: 768px) and (max-width: 910px) {
            
            .figure-news .img1, .figure-news .img2, .figure-news .img3, .figure-news .img4, .figure-news .img5, .figure-news .img6, .figure-news .img7, .figure-news .img8, .figure-news .img9 {
                width:111px !important;
                height: 140px !important;
            }
            .figure-img {
                width: 210px !important;
                height: 101px !important;
            }
            .figure-news figcaption span:nth-child(2) {
                font-size: 18px !important;
            }

            /* basic styling */
            .figure-news {
                width: 100% !important;
                height: 162px !important;
                box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.4);
                border-radius: 8px;
                position: relative;
                pointer-events: none;
                background: #ecf0f1;
                transition: 0.3s ease-in-out;
                margin-left: 10px;
                margin-right: 10px;
            }
            /*tawaran 1*/
            .figure-img {
                width: 100%;
                height: 200px;
                border-radius: 8px 8px 0 0;
                transition: transform 0.3s ease-in-out;
            }


            .figure-news .img1:after,
            .figure-news .img2:after,
            .figure-news .img3:after,
            .figure-news .img4:after,
            .figure-news .img5:after,
            .figure-news .img6:after,
            .figure-news .img7:after,
            .figure-news .img8:after,
            .figure-news .img9:after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 109px !important;
                background: linear-gradient(transparent, #ecf0f1 44%);
                border-radius: 0 0 8px 8px;
            }

            .figure-news figcaption {
                margin-top:9px;
                height: 13px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                position: relative;
                overflow: visible;
                background: #ecf0f1;
                border-radius: 0 0 8px 8px;
            }
            /* Apply hover animation to figcaption */
            .figure-news:hover .figcaption {
                transform: translateY(-10px);
                transition: transform 0.3s ease-in-out;
            }

            .figure-news figcaption span:nth-child(1) {
                position: absolute;
                font-family: Poppins, sans-serif;
                font-size: 13px !important;
                top: 0;
                opacity: 0;
                left: 0;
                color: #2c3e50;
                text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            }

            .figure-news figcaption span:nth-child(2) {
                font-family: Poppins, sans-serif;
                font-size: 16px !important;
                overflow: visible;
                position: absolute;
                top: -44px !important;
                left: 10px !important;
                white-space: nowrap;
                color: #2c3e50;
                z-index: 10;
                transform: rotate(-2deg);
                text-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
                transition: top 0.3s ease-in-out;
            }

            .figure-news figcaption span:nth-child(3) {
                font-family: Poppins, sans-serif;
                font-weight: 300;
                font-size: 14px;
                opacity: 0;
                padding: 0 20px;
                height: 20px;
                overflow: hidden;
                cursor: text;
                display: none;
                position: absolute;
            }

            .figure-news button {
                position: absolute;
                bottom: -10px;
                width: 77px !important;
                left: calc(50% - 38px) !important;
                background: #f3aa05fc;
                color: #fff;
                border: 0;
                height: 30px !important;
                border-radius: 4px;
                transform: rotate(1deg);
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
                cursor: pointer;
                pointer-events: auto;
                transition: 0.3s ease-in-out;
                overflow: hidden;
                z-index: 20;
            }

                .figure-news button:focus {
                    outline: 0;
                }

                .figure-news button:before {
                    content: "More";
                    position: absolute;
                    top: 4px !important;
                    left: 21px !important;
                    opacity: 1;
                    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                    color: #2e2b2b;
                }

                .figure-news button:after {
                    content: "Back";
                    opacity: 0;
                    top: 4px !important;
                    left: 24px !important;
                    position: absolute;
                    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                    color: #2e2b2b;
                }

            .figure-news #button-news1-more:after,
            .figure-news #button-news3-more:after,
            .figure-news #button-news5-more:after,
            .figure-news #button-news6-more:after,
            .figure-news #button-news7-more:after,
            .figure-news #button-news8-more:after {
                content: "More" !important;
                opacity: 1;
                top: 4px !important;
                left: 20px !important;
                position: absolute;
                transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                color: #2e2b2b;
            }

            .figure-news.open #button-news1,
            .figure-news.open #button-news3,
            .figure-news.open #button-news5,
            .figure-news.open #button-news6,
            .figure-news.open #button-news7,
            .figure-news.open #button-news8 {
                transform: translateX(40px) !important;
            }

            .figure-news.open #button-news1-more,
            .figure-news.open #button-news3-more,
            .figure-news.open #button-news5-more,
            .figure-news.open #button-news6-more,
            .figure-news.open #button-news7-more,
            .figure-news.open #button-news8-more {
                color: #2e2b2b;
                transform: translateX(-43px) !important;
            }

            .figure-news:hover {
                transition: 0.3s ease-in-out;
                transform: rotateX(-2deg);
                box-shadow: 3px -3px 6px 0 rgba(0, 0, 0, 0.4);
            }

                .figure-news:hover button {
                    background: #dfb453fc;
                    bottom: -13px;
                    transition: 0.3s ease-in-out;
                }

                .figure-news:hover span:nth-child(2) {
                    top: -39px;
                    transition: top 0.3s ease-in-out;
                }

            .figure-news .img1,
            .figure-news .img2,
            .figure-news .img3,
            .figure-news .img4,
            .figure-news .img5,
            .figure-news .img6,
            .figure-news .img7,
            .figure-news .img8,
            .figure-news .img9 {
                width: 311px;
                height: 210px;
            }

            .figure-news.open .img1,
            .figure-news.open .img2,
            .figure-news.open .img3,
            .figure-news.open .img4,
            .figure-news.open .img5,
            .figure-news.open .img6,
            .figure-news.open .img7,
            .figure-news.open .img8,
            .figure-news.open .img9 {
                height: 0;
            }

            .figure-news.open figcaption {
                height: 158px !important;
                border-radius: 8px;
                margin-top: -142px;
            }

                .figure-news.open figcaption span:nth-child(1) {
                    top: -25px;
                    opacity: 1;
                    left: 84px;
                }

                .figure-news.open figcaption span:nth-child(2) {
                    top: -3px !important;
                }

                .figure-news.open figcaption span:nth-child(3) {
                    height: 100%;
                    opacity: 1;
                    padding-top: 42px;
                    display: block;
                    font-size: 9px;
                    margin-top:-8px;
                }

            .figure-news.open button:before {
                opacity: 0;
                left: 100%;
            }

            .figure-news.open button:after {
                opacity: 1;
                left: 45px;
            }

            .figure-news.open:hover figcaption span:nth-child(2) {
                top: -144px;
                transition: top 0.3s ease-in-out;
            }

            .usecode {
                font-size: 9px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: -19px !important;
            }

            .promocode {
                font-size: 15px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 20px;
                border: none;
                border-radius: 10px;
                background: #007bff;
                color: #fff;
                text-align: center;
                text-decoration: none;
                cursor: pointer;
                transition: background 0.3s ease;
                margin-top: -9px !important;
            }

            .promocode:hover {
                background: #0056b3;
            }


        }
        @media only screen and (max-width: 768px) {
            .links-effect {
                display: none
            }

            .navbar-brand {
                margin: 0;
                padding: 0
            }

            .top-menu-nav {
                text-align: center !important;
                overflow: visible !important;
                transition: all 2s linear;
            }

                .top-menu-nav a {
                    font-size: 12px !important
                }
            /* top menu */
            .responsive-menu-container .checkbox-toggle, .responsive-menu-container .hamburger {
                right: 0
            }

            .top-menu-nav li {
                display: none;
                opacity: 0
            }

            .top-menu-nav .fulscreen-menu li {
                opacity: 1
            }
            /* heading text*/
            .deals-container h2, .campaign-container h2 {
                text-align: center
            }

            .payment-partner > div > div > div > div > div {
                margin: .25em !important
            }

            .seatlayout-container .seat {
                width: 30px;
                height: 30px;
                padding: 3px 1px 0 0
            }

            .seatlayout-container .legend-list span::after {
                background-size: 20px !important
            }

            .seatlayout-container .legend-list li {
                margin: 0 .5em !important
            }
        }

        @media screen and (min-width: 769px) {

            .navbar-logo {
                padding-left: 0
            }

            .responsive-menu-container {
                display: none
            }

            .seatlayout-container .seat {
                width: 27px;
                height: 27px
            }

                .seatlayout-container .seat::after {
                    background-size: cover
                }
        }

        @media only screen and (max-width:991px) and (min-width:419px) {
            .navbar.container {
                padding: 0 .5em
            }

            .search-from, .ots-ddate {
                width: 50%;
                display: inline-block
            }

            .search-to, .ots-rdate {
                width: 50%;
                float: right
            }
        }

        @media (max-width: 991px) {
            #landing {
                text-align: center
            }

                #landing .download-btn + .download-btn {
                    margin: 0 10px
                }

                #landing .landing-img {
                    text-align: center
                }

                    #landing .landing-img img {
                        width: 60%
                    }
        }

        @media (max-width: 768px) {
            #landing h1 {
                font-size: 28px;
                line-height: 36px
            }

            #landing h2 {
                font-size: 18px;
                line-height: 24px;
                margin-bottom: 30px
            }

            #landing .landing-img img {
                width: 70%
            }
        }

        @media (max-width: 575px) {
            #landing .landing-img img {
                width: 80%
            }
        }

        @media only screen and (max-width:991px) and (min-width:768px) {
            /*expresscheckin*/
            .payment-expresscheckin-logo {
                position: absolute;
                top: 2px !important;
                left: 297px !important;
                opacity: 80%;
                width: 74px !important;
                height: 74px !important;
            }

            .payment-expresscheckin-title {
                position: absolute;
                font-family: 'Montserrat', sans-serif;
                padding-left: 32px;
                color: #404040;
                font-size: 35px !important;
                top: -12px;
            }

            .payment-expresscheckin-title2 {
                position: absolute;
                font-family: 'Montserrat', sans-serif;
                padding-left: 32px;
                color: #fff;
                font-size: 35px !important;
                top: 29px;
            }

            .payment-expresscheckin-subtitle {
                position: absolute;
                font-family: 'Montserrat', sans-serif;
                padding-left: 32px;
                color: #fff;
                font-size: 14px;
                font-weight: 400;
                top: 71px;
            }

            .payment-expresscheckin .qr-depart {
                position: absolute;
                top: 121px;
                left: 52px;
            }

            .payment-expresscheckin .qr-return {
                position: absolute;
                top: 121px;
                left: 203px;
            }

            .payment-expresscheckin .qr-depart, .payment-expresscheckin .qr-return {
                font-family: 'Montserrat', sans-serif;
                font-weight: 400;
                background-color: #2f2f2f;
                border-radius: 15px;
                height: 35px;
                width: 126px;
                color: #fff;
                font-size: 18px;
                padding-left: 21px;
                padding-top: 5px;
            }

            .payment-expresscheckin .small-text-trip-alert {
                position: absolute;
                color: #000;
                padding-left: 35px;
                top: 161px;
            }

        }

        @media only screen and (max-width:991px) {
            main .container-fluid {
                width: auto;
                padding: 0
            }

            .ots-search-button {
                margin-top: 10px
            }

            div.search-from .select2-selection, div.search-to .select2-selection {
                border: 1px solid #dee2ee
            }

            div.search-to .select2-selection {
                border-left: none
            }

            .ots-ddate, .ots-rdate {
                border-bottom: 1px solid #dee2ee
            }

            .ots-rdate {
                border-right: 1px solid #dee2ee
            }

            .main-search-bar .checkbox {
                text-align: left !important
            }

            .deals-container .content, .campaign-container .content {
                margin: 1em 0
            }
        }

        @media only screen and (min-width: 992px) {
            #home-slide .carousel-caption {
                height: 400px
            }

            .ots-search-button {
            }

            .ots-search-box {
                box-shadow: 0 2px 6px 0 rgba(0,0,0,.12);
                border: 1px solid #ddd
            }

            .table-trip .trip-time {
                float: left;
                margin-right: 1rem
            }

            .seatlayout-container .seat {
                padding: 3px 3px 0 0
            }

            .table-curved tr:last-child td:first-child {
                margin-right: 2rem
            }
        }

        @media only screen and (min-width: 992px) and (max-width:1199px) {
            .campaign-container .card-body h4.card-title {
                font-size: .65em !important
            }

            .figure-news .img1, .figure-news .img2, .figure-news .img3, .figure-news .img4, .figure-news .img5, .figure-news .img6, .figure-news .img7, .figure-news .img8, .figure-news .img9 {
                width: 230px !important;
                height: 140px !important;
            }

            .figure-img {
                width: 288px !important;
                height: 127px !important;
            }

            .figure-news figcaption span:nth-child(2) {
                font-size: 18px !important;
            }

            /* basic styling */
            .figure-news {
                width: 31% !important;
                height: 190px !important;
                box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.4);
                border-radius: 8px;
                position: relative;
                pointer-events: none;
                background: #ecf0f1;
                transition: 0.3s ease-in-out;
                margin-left: 5px;
                margin-right: 5px;
            }
            /*tawaran 1*/
            .figure-img {
                width: 100%;
                height: 200px;
                border-radius: 8px 8px 0 0;
                transition: transform 0.3s ease-in-out;
            }


            .figure-news .img1:after,
            .figure-news .img2:after,
            .figure-news .img3:after,
            .figure-news .img4:after,
            .figure-news .img5:after,
            .figure-news .img6:after,
            .figure-news .img7:after,
            .figure-news .img8:after,
            .figure-news .img9:after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 109px !important;
                background: linear-gradient(transparent, #ecf0f1 44%);
                border-radius: 0 0 8px 8px;
            }

            .figure-news figcaption {
                margin-top: 9px;
                height: 13px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                position: relative;
                overflow: visible;
                background: #ecf0f1;
                border-radius: 0 0 8px 8px;
            }
            /* Apply hover animation to figcaption */
            .figure-news:hover .figcaption {
                transform: translateY(-10px);
                transition: transform 0.3s ease-in-out;
            }

            .figure-news figcaption span:nth-child(1) {
                position: absolute;
                font-family: Poppins, sans-serif;
                font-size: 13px !important;
                top: 0;
                opacity: 0;
                left: 0;
                color: #2c3e50;
                text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            }

            .figure-news figcaption span:nth-child(2) {
                font-family: Poppins, sans-serif;
                font-size: 22px !important;
                overflow: visible;
                position: absolute;
                top: -44px !important;
                left: 10px !important;
                white-space: nowrap;
                color: #2c3e50;
                z-index: 10;
                transform: rotate(-2deg);
                text-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
                transition: top 0.3s ease-in-out;
            }

            .figure-news figcaption span:nth-child(3) {
                font-family: Poppins, sans-serif;
                font-weight: 300;
                font-size: 14px;
                opacity: 0;
                padding: 0 20px;
                height: 20px;
                overflow: hidden;
                cursor: text;
                display: none;
                position: absolute;
            }

            .figure-news button {
                position: absolute;
                bottom: -10px;
                width: 77px !important;
                left: calc(50% - 38px) !important;
                background: #f3aa05fc;
                color: #fff;
                border: 0;
                height: 30px !important;
                border-radius: 4px;
                transform: rotate(1deg);
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
                cursor: pointer;
                pointer-events: auto;
                transition: 0.3s ease-in-out;
                overflow: hidden;
                z-index: 20;
            }

                .figure-news button:focus {
                    outline: 0;
                }

                .figure-news button:before {
                    content: "More";
                    position: absolute;
                    top: 4px !important;
                    left: 21px !important;
                    opacity: 1;
                    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                    color: #2e2b2b;
                }

                .figure-news button:after {
                    content: "Back";
                    opacity: 0;
                    top: 4px !important;
                    left: 24px !important;
                    position: absolute;
                    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                    color: #2e2b2b;
                }

            .figure-news #button-news1-more:after,
            .figure-news #button-news3-more:after,
            .figure-news #button-news5-more:after,
            .figure-news #button-news6-more:after,
            .figure-news #button-news7-more:after,
            .figure-news #button-news8-more:after {
                content: "More" !important;
                opacity: 1;
                top: 4px !important;
                left: 20px !important;
                position: absolute;
                transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                color: #2e2b2b;
            }

            .figure-news.open #button-news1,
            .figure-news.open #button-news3,
            .figure-news.open #button-news5,
            .figure-news.open #button-news6,
            .figure-news.open #button-news7,
            .figure-news.open #button-news8 {
                transform: translateX(40px) !important;
            }

            .figure-news.open #button-news1-more,
            .figure-news.open #button-news3-more,
            .figure-news.open #button-news5-more,
            .figure-news.open #button-news6-more,
            .figure-news.open #button-news7-more,
            .figure-news.open #button-news8-more {
                color: #2e2b2b;
                transform: translateX(-43px) !important;
            }

            .figure-news:hover {
                transition: 0.3s ease-in-out;
                transform: rotateX(-2deg);
                box-shadow: 3px -3px 6px 0 rgba(0, 0, 0, 0.4);
            }

                .figure-news:hover button {
                    background: #dfb453fc;
                    bottom: -13px;
                    transition: 0.3s ease-in-out;
                }

                .figure-news:hover span:nth-child(2) {
                    top: -39px;
                    transition: top 0.3s ease-in-out;
                }

            .figure-news .img1,
            .figure-news .img2,
            .figure-news .img3,
            .figure-news .img4,
            .figure-news .img5,
            .figure-news .img6,
            .figure-news .img7,
            .figure-news .img8,
            .figure-news .img9 {
                width: 311px;
                height: 210px;
            }

            .figure-news.open .img1,
            .figure-news.open .img2,
            .figure-news.open .img3,
            .figure-news.open .img4,
            .figure-news.open .img5,
            .figure-news.open .img6,
            .figure-news.open .img7,
            .figure-news.open .img8,
            .figure-news.open .img9 {
                height: 0;
            }

            .figure-news.open figcaption {
                height: 158px !important;
                border-radius: 8px;
                margin-top: -142px;
            }

                .figure-news.open figcaption span:nth-child(1) {
                    top: -25px;
                    opacity: 1;
                    left: 84px;
                }

                .figure-news.open figcaption span:nth-child(2) {
                    top: -3px !important;
                }

                .figure-news.open figcaption span:nth-child(3) {
                    height: 100%;
                    opacity: 1;
                    padding-top: 42px;
                    display: block;
                    font-size: 11px;
                    margin-top: -8px;
                }

            .figure-news.open button:before {
                opacity: 0;
                left: 100%;
            }

            .figure-news.open button:after {
                opacity: 1;
                left: 45px;
            }

            .figure-news.open:hover figcaption span:nth-child(2) {
                top: -144px;
                transition: top 0.3s ease-in-out;
            }

            .usecode {
                font-size: 9px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: -11px !important;
            }

            .promocode {
                font-size: 15px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 20px;
                border: none;
                border-radius: 10px;
                background: #007bff;
                color: #fff;
                text-align: center;
                text-decoration: none;
                cursor: pointer;
                transition: background 0.3s ease;
                margin-top: -9px !important;
            }

                .promocode:hover {
                    background: #0056b3;
                }
            /* Booking Area*/
            .payment-expresscheckin-logo {
                position: absolute;
                top: 7px;
                left: 434px !important;
                opacity: 80%;
                width: 183px !important;
                height: 183px !important;
            }
        }

        @media only screen and (max-width:991px) and (min-width:769px) {
            .figure-news .img1, .figure-news .img2, .figure-news .img3, .figure-news .img4, .figure-news .img5, .figure-news .img6, .figure-news .img7, .figure-news .img8, .figure-news .img9 {
                width: 230px !important;
                height: 140px !important;
            }

            .figure-img {
                width: 207px !important;
                height: 101px !important;
            }

            .figure-news figcaption span:nth-child(2) {
                font-size: 18px !important;
            }

            /* basic styling */
            .figure-news {
                width: 30% !important;
                height: 162px !important;
                box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.4);
                border-radius: 8px;
                position: relative;
                pointer-events: none;
                background: #ecf0f1;
                transition: 0.3s ease-in-out;
                margin-left:5px;
                margin-right:5px;
            }
            /*tawaran 1*/
            .figure-img {
                width: 100%;
                height: 200px;
                border-radius: 8px 8px 0 0;
                transition: transform 0.3s ease-in-out;
            }


            .figure-news .img1:after,
            .figure-news .img2:after,
            .figure-news .img3:after,
            .figure-news .img4:after,
            .figure-news .img5:after,
            .figure-news .img6:after,
            .figure-news .img7:after,
            .figure-news .img8:after,
            .figure-news .img9:after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 109px !important;
                background: linear-gradient(transparent, #ecf0f1 44%);
                border-radius: 0 0 8px 8px;
            }

            .figure-news figcaption {
                margin-top: 9px;
                height: 13px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                position: relative;
                overflow: visible;
                background: #ecf0f1;
                border-radius: 0 0 8px 8px;
            }
            /* Apply hover animation to figcaption */
            .figure-news:hover .figcaption {
                transform: translateY(-10px);
                transition: transform 0.3s ease-in-out;
            }

            .figure-news figcaption span:nth-child(1) {
                position: absolute;
                font-family: Poppins, sans-serif;
                font-size: 13px !important;
                top: 0;
                opacity: 0;
                left: 0;
                color: #2c3e50;
                text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            }

            .figure-news figcaption span:nth-child(2) {
                font-family: Poppins, sans-serif;
                font-size: 16px !important;
                overflow: visible;
                position: absolute;
                top: -44px !important;
                left: 10px !important;
                white-space: nowrap;
                color: #2c3e50;
                z-index: 10;
                transform: rotate(-2deg);
                text-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
                transition: top 0.3s ease-in-out;
            }

            .figure-news figcaption span:nth-child(3) {
                font-family: Poppins, sans-serif;
                font-weight: 300;
                font-size: 14px;
                opacity: 0;
                padding: 0 20px;
                height: 20px;
                overflow: hidden;
                cursor: text;
                display: none;
                position: absolute;
            }

            .figure-news button {
                position: absolute;
                bottom: -10px;
                width: 77px !important;
                left: calc(50% - 38px) !important;
                background: #f3aa05fc;
                color: #fff;
                border: 0;
                height: 30px !important;
                border-radius: 4px;
                transform: rotate(1deg);
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
                cursor: pointer;
                pointer-events: auto;
                transition: 0.3s ease-in-out;
                overflow: hidden;
                z-index: 20;
            }

                .figure-news button:focus {
                    outline: 0;
                }

                .figure-news button:before {
                    content: "More";
                    position: absolute;
                    top: 4px !important;
                    left: 21px !important;
                    opacity: 1;
                    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                    color: #2e2b2b;
                }

                .figure-news button:after {
                    content: "Back";
                    opacity: 0;
                    top: 4px !important;
                    left: 24px !important;
                    position: absolute;
                    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                    color: #2e2b2b;
                }

            .figure-news #button-news1-more:after,
            .figure-news #button-news3-more:after,
            .figure-news #button-news5-more:after,
            .figure-news #button-news6-more:after,
            .figure-news #button-news7-more:after,
            .figure-news #button-news8-more:after {
                content: "More" !important;
                opacity: 1;
                top: 4px !important;
                left: 20px !important;
                position: absolute;
                transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
                color: #2e2b2b;
            }

            .figure-news.open #button-news1,
            .figure-news.open #button-news3,
            .figure-news.open #button-news5,
            .figure-news.open #button-news6,
            .figure-news.open #button-news7,
            .figure-news.open #button-news8 {
                transform: translateX(40px) !important;
            }

            .figure-news.open #button-news1-more,
            .figure-news.open #button-news3-more,
            .figure-news.open #button-news5-more,
            .figure-news.open #button-news6-more,
            .figure-news.open #button-news7-more,
            .figure-news.open #button-news8-more {
                color: #2e2b2b;
                transform: translateX(-43px) !important;
            }

            .figure-news:hover {
                transition: 0.3s ease-in-out;
                transform: rotateX(-2deg);
                box-shadow: 3px -3px 6px 0 rgba(0, 0, 0, 0.4);
            }

                .figure-news:hover button {
                    background: #dfb453fc;
                    bottom: -13px;
                    transition: 0.3s ease-in-out;
                }

                .figure-news:hover span:nth-child(2) {
                    top: -39px;
                    transition: top 0.3s ease-in-out;
                }

            .figure-news .img1,
            .figure-news .img2,
            .figure-news .img3,
            .figure-news .img4,
            .figure-news .img5,
            .figure-news .img6,
            .figure-news .img7,
            .figure-news .img8,
            .figure-news .img9 {
                width: 311px;
                height: 210px;
            }

            .figure-news.open .img1,
            .figure-news.open .img2,
            .figure-news.open .img3,
            .figure-news.open .img4,
            .figure-news.open .img5,
            .figure-news.open .img6,
            .figure-news.open .img7,
            .figure-news.open .img8,
            .figure-news.open .img9 {
                height: 0;
            }

            .figure-news.open figcaption {
                height: 158px !important;
                border-radius: 8px;
                margin-top: -142px;
            }

                .figure-news.open figcaption span:nth-child(1) {
                    top: -25px;
                    opacity: 1;
                    left: 84px;
                }

                .figure-news.open figcaption span:nth-child(2) {
                    top: -3px !important;
                }

                .figure-news.open figcaption span:nth-child(3) {
                    height: 100%;
                    opacity: 1;
                    padding-top: 42px;
                    display: block;
                    font-size: 9.5px;
                    margin-top: -8px;
                }

            .figure-news.open button:before {
                opacity: 0;
                left: 100%;
            }

            .figure-news.open button:after {
                opacity: 1;
                left: 45px;
            }

            .figure-news.open:hover figcaption span:nth-child(2) {
                top: -144px;
                transition: top 0.3s ease-in-out;
            }

            .usecode {
                font-size: 9px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: -19px !important;
            }

            .promocode {
                font-size: 15px !important;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 20px;
                border: none;
                border-radius: 10px;
                background: #007bff;
                color: #fff;
                text-align: center;
                text-decoration: none;
                cursor: pointer;
                transition: background 0.3s ease;
                margin-top: -9px !important;
            }

                .promocode:hover {
                    background: #0056b3;
                }

        }

        @media only screen and (min-width:1085px) {
        }

        @media only screen and (min-width:1115px) {
        }

        @media only screen and (min-width:1135px) {
        }

        @media only screen and (min-width: 1195px) {
        }

        @media only screen and (min-width:1200px) {
        }

        @media only screen and (min-width: 1365px) {
        }

        @media only screen and (min-width: 1679px) {
        }
        /* retina */
        /*@media only screen and (min-width: 320px) {
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {
}

@media only screen and (min-width: 700px) {
.image-retina-bm{background-image:url(/Styles/css/images/Main/slider/sliderBM.png)}
.image-retina-en{background-image:url(/Styles/css/images/Main/slider/sliderEN.png)}
.image-retina-contact-bm{background-image:url(/Styles/css/images/Main/slider/contactBM.png)}
.image-retina-contact-en{background-image:url(/Styles/css/images/Main/slider/contactEN.png)}
.promo-deals{background-image:url(/Styles/css/images/Main/tawaran/malaysia-deals.png)}
.merdeka-63{background-image:url(/Styles/css/images/Main/slider/merdeka-63.png)}

}*/

        @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min-resolution: 192dpi) and (min-width: 700px), only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
            .promo-deals {
                background-image: url(/Styles/css/images/Main/slider/merdeka-deals.png)
            }
        }

        @media only screen and (min-width: 1300px) {
            /* Large screen, non-retina */
        }

        @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min-resolution: 192dpi) and (min-width: 1300px), only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
            .promo-deals {
                background-image: url(/Styles/css/images/Main/slider/merdeka-deals.png)
            }
        }
        /* responsive menu */
        .responsive-menu-container {
top: -16px;
position: absolute;
right: 10px
}

.responsive-menu-container .checkbox-toggle {
position: absolute;
right: 0;
z-index: 2;
cursor: pointer;
width: 35px;
height: 33px;
opacity: 0
}

.responsive-menu-container .checkbox-toggle:checked + .hamburger > div {
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}

.responsive-menu-container .checkbox-toggle:checked + .hamburger > div:before, .responsive-menu-container .checkbox-toggle:checked + .hamburger > div:after {
top: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}

.responsive-menu-container .checkbox-toggle:checked + .hamburger > div:after {
opacity: 0
}

.responsive-menu-container .checkbox-toggle:checked ~ .fulscreen-menu {
pointer-events: auto;
visibility: visible
}

.responsive-menu-container .checkbox-toggle:checked ~ .fulscreen-menu > div {
-webkit-transform: scale(1);
transform: scale(1);
transition-duration: .75s
}

.responsive-menu-container .checkbox-toggle:checked ~ .fulscreen-menu > div > div {
opacity: 1;
transition: opacity .4s ease .4s
}

.responsive-menu-container .checkbox-toggle:checked:hover + .hamburger > div {
-webkit-transform: rotate(225deg);
transform: rotate(225deg)
}

.responsive-menu-container .hamburger {
position: absolute;
right: 10px;
z-index: 1;
width: 35px;
height: 33px;
padding: .5em;
background: #fcb722;
border-radius: 0 .12em .12em 0;
cursor: pointer;
transition: box-shadow .4s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center
}

.responsive-menu-container .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #FEFEFE;
transition: all .4s ease;
display: flex;
align-items: center;
justify-content: center
}

.responsive-menu-container .hamburger > div:before, .responsive-menu-container .hamburger > div:after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
left: 0;
width: 100%;
height: 2px;
background: inherit;
transition: all .4s ease
}

.responsive-menu-container .hamburger > div:after {
top: 10px
}

.responsive-menu-container .fulscreen-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
outline: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center
}

.responsive-menu-container .fulscreen-menu > div {
width: 400vw;
height: 400vw;
color: #FEFEFE;
background: rgba(252,183,34,0.97);
border-radius: 50%;
transition: all .4s ease;
flex: none;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center
}

.responsive-menu-container .fulscreen-menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 200vh;
opacity: 0;
transition: opacity .4s ease;
overflow-y: auto;
flex: none;
display: flex;
align-items: center;
justify-content: center
}

.responsive-menu-container .fulscreen-menu > div > div > ul {
list-style: none;
padding: 0 1em;
margin: 0;
display: block;
max-height: 100vh
}

.responsive-menu-container .fulscreen-menu > div > div > ul > li {
padding: 0;
font-size: 24px;
display: block;
overflow: hidden
}

.responsive-menu-container .fulscreen-menu > div > div > ul > li > a {
position: relative;
display: inline;
cursor: pointer;
transition: color .4s ease;
font-size: .75em !important;
color: #fff
}

.responsive-menu-container .fulscreen-menu > div > div > ul > li > a:hover {
color: #e5e5e5
}

.responsive-menu-container .fulscreen-menu > div > div > ul > li > a:hover:after {
    width: 100%
}

.responsive-menu-container .fulscreen-menu > div > div > ul > li > a:after {
content: '';
position: absolute;
z-index: 1;
bottom: -.15em;
left: 0;
width: 0;
height: 2px;
background: #e5e5e5;
transition: width .4s ease
}
