/*
    Template: HOME
    Author: M4verick
    Developer by: ETransact Sdn Bhd
    Email : erwanhafizi@gmail.com
    Website : www.backpackers.my
    Version :COVID19#SOCIALDISTANCING 23022021
*/

/* Main Page*/
main[role=main] {
    margin: 0 auto;
    background: #fff
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0
}

    .map-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute
    }

/** search bar */
.search-tabs-container {
    position: relative
}

.search-trip-wrapper {
    width: 100%;
    margin: 0 auto
}

/* tab */
.tabs-container {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    background: #3c3c3b
}

.tabs-title ul {
    display: flex;
    flex-flow: row wrap
}

    .tabs-title ul li {
        position: relative;
        z-index: 1;
        display: block;
        margin: 0;
        text-align: center;
        padding: 0 1em
    }

        .tabs-title ul li.active, .tabs-title ul li.active a {
            cursor: default
        }

        .tabs-title ul li.active, .tabs-title ul li:hover {
            background: #fff
        }

            .tabs-title ul li.active a, .tabs-title ul li:hover a, .tabs-title ul li.active a svg path, .tabs-title ul li:hover a svg path {
                color: #3c3c3b;
                fill: #3c3c3b
            }

            .tabs-title ul li.active:before, .tabs-title ul li:hover:before {
                position: absolute;
                top: -14px;
                left: 0;
                width: 100%;
                height: 6px;
                background: #fff;
                content: '';
                -webkit-transition: -webkit-transform .3s;
                transition: transform .3s;
                -webkit-transform: translate3d(0,150%,0);
                transform: translate3d(0,150%,0)
            }

    .tabs-title ul a {
        position: relative;
        display: block;
        white-space: nowrap;
        line-height: 2.5;
        color: #fff
    }

        .tabs-title ul a span {
            vertical-align: middle;
            font-size: 1rem;
            margin-left: .5em
        }

.tabs-title svg {
    width: 25px
}

    .tabs-title svg path {
        fill: #fff
    }

/** slide */
.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: -26px;
    position: relative
}

.pkp {
    background-image: url(/Styles/css/images/Main/slider/web-header-pkp.jpg)
}

#slider1_container {
    display: none;
    position: relative;
    overflow: hidden;
    visibility: hidden;
    margin: 0 auto;
    width: 1300px;
    height: 500px
}

.slides-container {
    position: absolute;
    overflow: hidden
}

.jssorl-004-double-tail-spin img {
    animation-name: jssorl-004-double-tail-spin;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes jssorl-004-double-tail-spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

#progress-element {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 5px;
    background-color: rgba(255,255,255,.7);
    z-index: 100
}

.carousel-caption h1, .carousel-caption p {
    color: #fff;
    line-height: 1em
}

.carousel-caption h1 {
    font-family: "Work Sans",sans-serif;
    line-height: 1
}

.carousel-caption p {
    font: 400 21px Roboto,sans-serif
}

.carousel-caption h1, .carousel-caption p {
    text-shadow: 0 1px 2px #1d1d1d
}

.btn-banner, .btn-banner:focus {
    background-color: transparent;
    min-width: 106px;
    padding: 8px 16px;
    border: 1px solid #fff;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    margin-top: 1em;
    box-shadow: none
}

    .btn-banner:hover {
        background: #fff
    }

        .btn-banner:active:focus, .btn-banner:hover:focus {
            color: #252525
        }

    .btn-banner:active:focus, .btn-banner:active:hover {
        box-shadow: inset 0 3px 5px rgba(0,0,0,.25)
    }
/* image grid; content overlay */
.content-details {
    position: absolute;
    text-align: center;
    width: 100%;
    left: 50%;
    -webkit-transform: translate(-50%,-100%);
    -moz-transform: translate(-50%,-100%);
    transform: translate(-50%,-100%);
    -webkit-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.content:hover .content-details {
    top: 50%;
    left: 50%;
    opacity: 1
}

.content-details h3 {
    color: #fff;
    letter-spacing: .15em;
    margin: 0;
    text-transform: uppercase; /*background:rgba(33,33,33,.7);*/
    padding-right: .5em; /*text-align:right;*/
    font-size: 1em
}

.fadeIn-bottom {
    top: 116%
}

.fadeIn-center {
    top: 50%
}

/** content body */
.top-content .head h2 {
    text-transform: capitalize
}

.container-fluid .text-content h2 {
    text-align: left
}

.top-content h4 {
    font-weight: 700
}

.articles-content .card {
    margin-bottom: 2rem
}

.articles-content button {
    float: right
}

.operator-content img, .amenities-content a {
    margin-bottom: 1em
}

.operator-content .card, .operator-content .card .row {
    margin-bottom: 1em
}

.operator-content address {
    font-size: .75em
}

.buschedule-content .container {
    min-height: 400px
}

.faq-content .panel-heading {
    padding: 15px 16px;
    background-color: #f6f6f6
}

.faq-content .panel-default {
    border: 1px solid rgba(0,0,0,.125);
    margin-bottom: 1em;
    box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15)
}

    .faq-content .panel-default .panel-body {
        padding: 1em
    }

    .faq-content .panel-default p:last-child {
        margin: 0
    }

    .faq-content .panel-default .panel-title a:after {
        font-family: 'FontAwesome';
        font-style: normal;
        font-size: 1rem;
        content: "\f106";
        color: #1f7de2;
        float: right
    }

    .faq-content .panel-default .panel-title a.collapsed:after {
        content: "\f107"
    }

.faq-content h4, .faq-content h5 {
    text-transform: none;
    margin: 0
}

.newsletter {
    padding: 80px 0;
    background: #34C0D2
}

.newsletter-content .card {
    padding: 30px 0;
    background: #19beda
}

.newsletter-content .content {
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2
}

    .newsletter-content .content h2 {
        color: #243c4f;
        margin-bottom: 20px
    }

    .newsletter-content .content .form-control {
        height: 50px;
        border-color: #fff;
        border-radius: 0
    }

        .newsletter-content .content.form-control:focus {
            box-shadow: none;
            border: 2px solid #243c4f
        }

    .newsletter-content .content .btn {
        min-height: 50px;
        border-radius: 0;
        background: #243c4f;
        color: #fff;
        font-weight: 600
    }

.term-content {
    color: #444
}

    .term-content h5 {
        text-decoration: underline
    }

    .term-content p:first-child {
        padding-top: 0
    }

    .term-content p {
        padding: .5em 0;
        margin-bottom: 0
    }

        .term-content p:last-child {
            margin-bottom: 1em
        }

    .term-content ul {
        padding-left: 1em;
        margin-bottom: 1em
    }

        .term-content ul li, .promo-content ol li {
            list-style: decimal;
            padding-left: 1em
        }

.head-wrapper {
    margin-bottom: 1.875rem
}

    .head-wrapper svg {
        height: 30px
    }

    .head-wrapper .head p {
        font-size: 16px;
        margin: 0
    }

.promo-content {
}

/**/
.info-box {
    background-color: #fff2d8;
    padding: 1em
}

.ib-content {
    display: flex
}

.ib-image {
    width: 14%
}

    .ib-image img {
        width: 100%
    }

.ib-info {
    padding: 0 0 0 1em;
    font-size: 14px;
    width: 100%
}

    .ib-info h4 {
        color: #212121
    }

    .ib-info span:after {
        content: "\2022";
        margin: 0 .5em;
        color: #282828;
        font-size: .875rem
    }

    .ib-info span:last-child:after {
        content: "";
        margin: 0
    }

/* bus list */
.container-fluid .head {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.bl-list-content {
    display: flex;
    margin: 0 0 1rem;
    background-color: #f1f2f8;
    box-shadow: 0 0 0 1px #dddde5;
    -webkit-transform: translateY(0);
    -webkit-transition: all .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all .6s cubic-bezier(0.165, 0.84, 0.44, 1)
}

    .bl-list-content:hover {
        -webkit-transform: scale(1.15, 1.15);
        transform: scale(1.15, 1.15);
        ;
        position: relative;
        z-index: 10
    }

.bl-image {
    max-width: 50%
}

    .bl-image img {
        width: 100%
    }

.bl-info {
    font-size: 11px;
    padding: 0 0 0 1em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center
}

    .bl-info li {
        float: left
    }

        .bl-info li:after {
            content: "\2022";
            margin: 0 .5em;
            color: #ff7b59;
            font-size: .875rem
        }

        .bl-info li:last-child:after {
            content: ""
        }

        .bl-info li a:hover {
            text-decoration: underline !important
        }

        .bl-info li a {
            color: #ff7b59
        }

    .bl-info h5 {
        margin: 0
    }

.more-links a {
    color: #FCB722
}

    .more-links a:hover {
        text-decoration: underline !important
    }

    .more-links a svg {
        fill: #FCB722;
        display: inline-block;
        vertical-align: middle;
        background-position: 3px 0;
        width: 1.125rem;
        height: 1.125rem
    }

.buslist-content .more-links {
    margin-bottom: .5em
}

.buslist-content.home ul {
    display: none
}

.busfilter {
    display: table
}

    .busfilter input {
        background: none;
        border: none;
        outline: none;
        width: 28px;
        min-width: 0;
        padding: 0;
        z-index: 1;
        position: relative;
        line-height: 18px;
        margin: 5px 0;
        font-size: 14px;
        -webkit-appearance: none;
        -webkit-transition: all .6s ease;
        transition: all .6s ease;
        cursor: pointer;
        color: #ff7b59
    }

        .busfilter input + div {
            position: relative;
            height: 28px;
            width: 100%;
            margin: -28px 0 0
        }

            .busfilter input + div svg {
                display: block;
                position: absolute;
                height: 28px;
                width: 160px;
                right: 0;
                top: 0;
                fill: none;
                stroke: #ff7b59;
                stroke-width: 1.5px;
                stroke-dashoffset: 271.908;
                stroke-dasharray: 59 212.908;
                -webkit-transition: all .6s ease;
                transition: all .6s ease
            }

        .busfilter input:not(:placeholder-shown), .busfilter input:focus {
            width: 160px;
            padding: 0 4px;
            cursor: text
        }

            .busfilter input:not(:placeholder-shown) + div svg, .busfilter input:focus + div svg {
                stroke-dasharray: 150 212.908;
                stroke-dashoffset: 300
            }


/** timeline */
#timeline {
    list-style: none;
    position: relative
}

    #timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 2px;
        background-color: #4997cd;
        left: 50%;
        margin-left: -1.5px
    }

    #timeline .clearFix {
        clear: both;
        height: 0
    }

    #timeline .timeline-badge {
        color: #fff;
        width: 50px;
        height: 50px;
        font-size: 1.2em;
        text-align: center;
        position: absolute;
        top: 20px;
        left: 50%;
        margin-left: -25px;
        background-color: #4997cd;
        z-index: 100;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%
    }

        #timeline .timeline-badge span.timeline-balloon-date-day {
            font-size: 1.4em
        }

        #timeline .timeline-badge span.timeline-balloon-date-month {
            font-size: .8em;
            position: relative;
            top: -17px
        }

        #timeline .timeline-badge.timeline-filter-movement {
            background-color: #fff;
            font-size: 1.7em;
            height: 35px;
            margin-left: -18px;
            width: 35px;
            top: 40px
        }

            #timeline .timeline-badge.timeline-filter-movement a span {
                color: #4997cd;
                font-size: 1.3em;
                top: -1px
            }

        #timeline .timeline-badge.timeline-future-movement {
            background-color: #fff;
            height: 35px;
            width: 35px;
            font-size: 1.7em;
            top: -16px;
            margin-left: -18px
        }

            #timeline .timeline-badge.timeline-future-movement a span {
                color: #4997cd;
                font-size: .9em;
                top: 2px;
                left: 1px
            }

    #timeline .timeline-movement {
        border-bottom: dashed 1px #4997cd;
        position: relative
    }

        #timeline .timeline-movement.timeline-movement-top {
            height: 60px
        }

        #timeline .timeline-movement .timeline-item {
            padding: 20px 0
        }

            #timeline .timeline-movement .timeline-item .timeline-panel {
                border: 1px solid #d4d4d4;
                border-radius: 3px;
                background-color: #fff;
                color: #666;
                padding: 10px;
                position: relative;
                -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
                box-shadow: 0 1px 6px rgba(0,0,0,0.175)
            }

                #timeline .timeline-movement .timeline-item .timeline-panel .timeline-panel-ul {
                    list-style: none;
                    padding: 0;
                    margin: 0
                }

                #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul {
                    text-align: right
                }

                    #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li {
                        color: #666
                    }

                        #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li span.importo {
                            color: #468c1f;
                            font-size: 1.3em
                        }

                #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul {
                    text-align: left
                }

                    #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul span.importo {
                        color: #e2001a;
                        font-size: 1.3em
                    }

/**/
[class^="imghvr-"] {
    margin-bottom: .5em
}

    [class^="imghvr-"], [class^='imghvr-'] figcaption {
        background-color: #282828;
        z-index: 2
    }

        [class^='imghvr-'] figcaption {
            padding: 20px
        }

            [class^='imghvr-'] figcaption > a {
                position: relative;
                display: block;
                color: #fcb722;
                margin-top: 1em
            }

                [class^='imghvr-'] figcaption > a:hover {
                    text-decoration: underline !important
                }

        [class^="imghvr-"] div { /*position:absolute;z-index:1;bottom:0;background-color:#282828;width:100%;*/
            padding: .5em
        }

        [class^='imghvr-'] a.links-attraction {
            z-index: 4
        }

        [class^='imghvr-'] .top-destination {
            background-color: #fcb722;
            text-align: center;
            color: #3c3c3b
        }

/**/
.contact-box-wrapper {
    top: -30px;
    position: relative
}

.contact-box:first-child {
    margin-bottom: 20px
}

.contact-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 40px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px 0 rgba(27,27,27,.1),0 4px 8px 0 rgba(27,27,27,.1);
    border-radius: 5px
}

.contact-box-item {
    max-width: 100%;
    margin-bottom: 24px;
    color: #212121
}

    .contact-box-item.logo {
        height: 50px;
        width: 50px
    }

    .contact-box-item.title {
        font-weight: 600
    }

    .contact-box-item a {
        color: #fcb722
    }

        .contact-box-item a:hover {
            text-decoration: underline !important
        }

/* tnc */
.term-content {
    color: #212121
}

    .term-content ol {
        padding-left: 20px
    }

        .term-content ol li {
            list-style: decimal;
            padding-left: 20px
        }

.policy-content ol {
    counter-reset: item;
    padding: 0
}

    .policy-content ol > li {
        margin-bottom: 1em
    }

    .policy-content ol li {
        padding-left: 0
    }

        .policy-content ol li ol {
            padding-left: 20px
        }

        .policy-content ol li:before {
            content: counters(item, ".") " ";
            counter-increment: item;
            margin-right: .5em
        }





.toast__container {
    position: fixed;
    z-index: 99999999999999999;
    animation: 3s ease-out 1s 1 slideIn
}

.toast__svg {
    fill: #fff
}

.toast {
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2)
}

.toast__type {
    color: #3e3e3e;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px
}

.toast__message {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
    color: #878787
}

.toast__close {
    position: absolute;
    right: 12px;
    top: 7%;
    width: 14px;
    cursor: pointer;
    height: 14px;
    fill: #282828;
    transform: translateY(-50%)
}

@keyframes slideIn {
    0% {
        transform: translateX(106%);
    }

    100% {
        transform: translateX(0);
    }
}

.titlebg-refund {
    bottom: unset !important;
    top: 313px ;
}
.img-refund-protect{
    width: 50%;
}

.rolling-animation {
    animation-name: rolling;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 2;
}

@keyframes rolling {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.bouncing-animation {
    animation-name: bouncing;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 3;
}

@keyframes bouncing {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.check .but-submit {
    
    width: auto;
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    border: transparent;
    border-radius: 10px;
    background: #ffa400;
    padding: 10px;
}

.check .but-submit:hover {
    background-color: #ff7f00;
}

.tooltip-img {
    position: absolute;
    display: none;
    width: 70%;
    right: -50%;
    margin: 20px;
    border-radius: 20px !important;
    box-shadow: 1px 1px 10px #aaaaaa;
}

.page-wrapper {
    min-height: 810px;
}

.check {
   
}

.check_hero {
    position: relative;
    display: flex;
    justify-content: center;
    flex-flow: column;
    margin: 0 auto;
    height: 700px;
}

.check_steps{
    position: absolute;
    right: 15%;
    top: 15%;
}

.check_form {
    position: absolute;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 5%;
    padding-bottom: 2%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2;
    border-radius: 10px;
    box-shadow: 1px 1px 30px #aaaaaa;
    margin-top: -10%;
    background-color: white;
    width: 35%;
}

.formRef , .formEmail {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.GetCheckBookingModal {
    position: absolute;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 5%;
    padding-bottom: 2%;
    background-color: white;
    z-index: 2;
    border-radius: 10px;
    box-shadow: 1px 1px 30px #aaaaaa;
    margin-top: -21%;
    width: 30%;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container-btn-dwnld {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.journey-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.journey-table th,
.journey-table td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}


.fade-in-right {
    opacity: 0;
    transform: translateX(100%);
    animation: fadeInRight 0.5s forwards;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(10%);
    }
}

.input_info {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
}

    .input-group-addon i {
        margin-right: 5px;
    }

.tooltip-img {
    display: none;
    position: absolute;
    top: -50%;
    left: 170%;
    transform: translateX(-50%);
    width: 150%;
    z-index: 9999;
}

.input-group-tooltip:hover .tooltip-img {
    display: block;
}

.loader {
    border: 10px solid #f3f3f3;  /*Light grey*/ 
    border-top: 10px solid #3498db;  /*Blue*/ 
    border-radius: 50%;
    width: 46px;
    height: 46px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}