body {
    font-family: 'Muli', sans-serif !important;
    color: #555 !important;
}

a:hover {
    text-decoration: none !important;
    border-bottom: dotted 1px !important;
}

[role=button] {
    cursor: pointer;
}

.btn.a1 {
    color: #fff;
    background-color: #ff871a;
    font-size: 15px;
    padding: 5px 25px;
}

.btn.a1:hover {
    color: #ddd;
}

/* Secondary action*/
.a2 {
    color: #ff871a;
    font-weight: bold;
    cursor: pointer;
}

.a2:hover {
    color: #ff871a;
}

.a2 .fa-angle-right {
    font-size: 140%;
    position: relative;
    top: 2px;
    padding-left: 0.2em;
}

/* Other action*/
.ao {
    color: #555;
}

.rv .stars i {
    font-size: 20px;
    color: #f4ae01;
    -ms-transform: rotate(10deg); /* IE 9 */
    -webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
    transform: rotate(10deg);
}

.rv .info {
    margin-top: 5px;
}

.rv .text {
    margin-top: 15px;
    font-style: italic;
    color: #aaa;
}

.rv .name {
    font-size: 12px;
    margin-top: 20px;
    font-weight: bold;
}

.rv .area {
    font-size: 12px;
    color: #aaa;
}

.header {
    box-shadow: 1px 1px 5px #eee;
    padding-bottom: 5px;
}

.header .logo, .form-screen-header .logo {
    padding: 15px 0;
}

.header .logo img, .form-screen-header .logo img {
    width: 200px;
}


.header .mobile-nav {
}


.header .mobile-nav > .btn {
    font-size: 40px;
    background-color: transparent;
}

.footer {
    border-top: dashed 3px #ddd;
}

.footer .container {
    margin-left: 0;
    text-align: center;
    width: 300px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.footer .copy {
    color: #aaa;
}


.main-nav-items {
    margin-top: 30px;
}

.mobile-nav-menu {
    min-width: 200px !important;
}

.mobile-nav-menu a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.mobile-nav-menu .a2 {
    color: #ff871a !important;
}

.white-text-outline {
    text-shadow: 1px 1px 0 #fff,
    -2px 2px 0 #fff,
    2px -2px 0 #fff,
    -2px -2px 0 #fff,
    0px 2px 0 #fff,
    0px -2px 0 #fff,
    -2px 0px 0 #fff,
    2px 0px 0 #fff,
    4px 4px 0 #fff,
    -4px 4px 0 #fff,
    4px -4px 0 #fff,
    -4px -4px 0 #fff,
    0px 4px 0 #fff,
    0px -4px 0 #fff,
    -4px 0px 0 #fff,
    4px 0px 0 #fff,
    2px 4px 0 #fff,
    -2px 4px 0 #fff,
    2px -4px 0 #fff,
    -2px -4px 0 #fff,
    4px 2px 0 #fff,
    -4px 2px 0 #fff,
    4px -2px 0 #fff,
    -4px -2px 0 #fff;
}

.dropdown.natural .dropdown-toggle {
    display: inline-block;
    color: #337ab7;
    background: none;
    border: none;
    border-bottom: dashed 4px #35CBCC;
    padding-bottom: 2px;
    font-weight: 400;
    line-height: 1;
    padding-left: 4px;
    padding-right: 8px;
    background-color: #f7f6f2;
    border-radius: 3px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    white-space: nowrap;

}

.dropdown.natural .dropdown-toggle:hover {
    color: #0456BA;
}



.dropdown.natural .dropdown-menu.overlay {
    font-size: 16px;
    top: 10px;
    left: 0;
    width: 100%;
    min-width: 200px;
}

.dropdown.natural .dropdown-menu.type-dd-content {
    top: 0px;
    font-size: 100%;
}

.dropdown.natural .dropdown-menu.type-dd-content a {
    line-height: 1.2;
}


.dropdown.natural .caret {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #555;
}


.dropdown.natural .dropdown-menu a:hover, .dropdown.natural a.hack-hover {
    background-color: #35CBCC;
}

#location-toggle {
    margin-top: 15px;
}

.location-entry {
    margin-top: 15px;
    border-bottom: solid 1px #ccc;
}


div.circle-avatar{
    /* make it responsive */
    max-width: 100%;
    width:100%;
    height:auto;
    display:block;
    /* div height to be the same as width*/
    padding-top:100%;

    /* make it a circle */
    border-radius:50%;

    /* Centering on image`s center*/
    background-position-y: center;
    background-position-x: center;
    background-repeat: no-repeat;

    /* it makes the clue thing, takes smaller dimension to fill div */
    background-size: cover;

    /* it is optional, for making this div centered in parent*/
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.bg-section {
    overflow: hidden;
}

.bg-0 {
    background-color: #fff;
}

.bg-1 {
    background-color: #fff;
    /*background-image: url(/static/img/icons/activities/gray/sport.svg);*/
    background-size: 30px 30px;
}

.bg-2 {
    background-color: #f7f6f2;
}

.bg-2 h3 {
    color: #35CBCC;
}

.bg-3 {
    background-color: #35CBCC;
    color: #f7f6f2;
}

.bg-3 .a1 {
    color: #ff871a;
    background-color: #f7f6f2;
}

.bg-4 {
    background-color: #672E73;
    color: #fff;
}

.bg-top {
    background-position-y: top !important;
}


.round-bottom-1 {
    height:150px;
    border-bottom-right-radius: 50% 100%;
    border-bottom-left-radius: 50% 100%;
    margin-left: -100px;
    margin-right: -100px;
    padding-top: 150px;
    position: relative;
}

.round-top-1 {
    height:150px;
    border-top-right-radius: 50% 100%;
    border-top-left-radius: 50% 100%;
    margin-left: -100px;
    margin-right: -100px;
    padding-top: 150px;
    position: relative;
}


.round-bottom-2 {
    height: 350px;
    border-bottom-right-radius: 50% 100%;
    border-bottom-left-radius: 50% 100%;
    margin-left: -100px;
    margin-right: -100px;
    margin-top: -150px;
    padding-top: 150px;
    position: relative;
}

.round-bottom-2 > div {
    margin-left: 100px;
    margin-right: 100px;
}

.card {
    -webkit-box-shadow: 0px 1px 10px 1px rgba(207,205,207,1);
    -moz-box-shadow: 0px 1px 10px 1px rgba(207,205,207,1);
    box-shadow: 0px 1px 10px 1px rgba(207,205,207,1);
    border-radius: 5px;
    background-color: #fff;
}

.listings > div {
    padding-left: 10px; padding-right: 10px;
}

.listing-container {
    background-color: #fff;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 5px;
    border-radius: 8px;
    box-sizing: border-box;
    max-width: 250px;
    position: relative;
    overflow: hidden;
    border-bottom: solid 3px #ff9331;
    padding-bottom: 10px;
    margin: auto;
}

.listing-container:hover {
    border-color: #aaa;
}


.listing-container .image {
    width: 100%;
    height: 190px;
    overflow: hidden;
    position: relative;
}

.listing-container .image.bg {
    background-color: #35CBCC;
}

.listing-container.service .image img {
    width: 100%;
    position: relative;

}

.listing-container.ent .image {
    text-align: right;
    padding-right: 30px;
}


.listing-container.ent .image img {
    background-color: #fff;
    max-width: 150px;
    max-height: 100px;
    margin-top: 15px;
    border-radius: 8px;
    border: solid 3px #fff;
}

.listing-container .offer {
    position: absolute;
    right: 0px;
    top: 30px;
    width: 60px;
    background-color: #35cbcc;
    color: #fff;
    padding-left: 5px;
    border-bottom-left-radius: 5px;
    z-index: 1;
}

.listing-container .pckg-count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #555;
    color: #fff;
    padding: 2px 7px;
    border-bottom-left-radius: 10px;
    opacity: .9;
    z-index: 1;
}

.listing-container .info {
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 48px;
    position: relative;

}

.listing-container .info:before {
    content: "";
    width: 10px;
    height: 40px;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;

}


.listing-container .info:after {
    content: "";
    width: 10px;
    height: 40px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;

}

.listing-container .activities-list {
    border-top: dashed 1px #ccc;
    overflow: hidden;
    z-index: 0;
    padding-top: 3px;
    padding-bottom: 5px;
}


.listing-container .e1 .fa-building {
    font-size: 25px;
}

.listing-container .fa-certificate {
    color: #35CBCC;
}

.activities-list {
    line-height: 24px;
}

.activities-list > div {
    display: inline-block;
    padding: 0px 6px;
    font-size: 13px;
    color: #0456BA;
    background-color: #E4EDF7;
    border-radius: 6px;
    line-height: 20px;
}

.listing-container .c {
    font-size: 14px;
    font-weight: 300;
    height: 30px;
}

.listing-container .c .fa {
    font-size: 22px;
    color: #0456BA;
    position: relative;
    top: 3px;
    padding-right: 5px;
}

.listing-container .d {
    margin-top: 10px;
    border-top: dashed 1px #ccc;
    margin-left: 15px;
    margin-right: 15px;
    height: 70px;
}


.listing-container .d .type-label {
    position: relative;
    top: -8px;
    text-align: right;
    overflow: hidden;
}

.listing-container .d .type-label h4 {
    background-color: #fff;
    padding: 0 3px;
    font-size: 11px;
    font-weight: 300;
    color: #555;
    float: right;
    margin-right: 25px;
}


.listing-container .e .e1 {
    font-size: 25px;
    float: left;
    padding-left: 15px
}

.listing-container .f {
    font-size: 14px;
    font-weight: 300;
    position: relative;
    top: 30px;
}

.listing-container .party-name {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.listing-container .summary {
    position: relative;
    top: -2px;
    font-size: 12px;
    line-height: 18px;
    height: 88px;
    text-align: justify;
    margin: 0 1px;
}

.listing-container .party-name a {
    color: inherit !important;
}

.listing-container h3 {
    margin-top: 0px;
    color: inherit;
    font-size: 20px;
    margin-bottom: 0px;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 8px 10px;
    background: #fff;
    padding-bottom: 0;
    border: dashed 1px #ccc;
    border-bottom: none;
    min-height: 60px;
    margin-left: 15px;
    margin-right: 15px;
    box-shadow: 0px 0px 0px 3px #fff;
}

.listing-container .fa-tag {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 60px;
    z-index: 99;
}

.listing-container h4 {
    margin: 0;
}


.f-cat {
    margin-top: 20px;
}

.f-cat .fa {
    padding-right: 5px;
}

.f-cat svg {
    max-height: 25px;
    max-width: 25px;
    position: relative;
    top: 5px;
}


.f-cat > div {
    border-bottom: solid 1px #ccc;
    padding-top: 3px;
    padding-bottom: 10px;
}

.package .package-s1 > div {
    border-bottom: dashed 1px #ddd;
    padding-bottom: 6px;
}

.package .name {
    font-size: 20px;
    color: #888;
}

.package .attrs img {
    position: relative;
    top: -15px;
    margin-right: 5px;
    height: 30px;
}

.package .attrs .attr-item {
    display: inline-block;
}

/*.package .attrs .attr-item {
   border-left: dashed 1px #ddd;
}
*/
.package .bar {
    width: 100%;
    display: inline-block;
}

*[aria-expanded="true"]:not([id]) .fa-angle-down:before {
    content: "\f106";
}

*[aria-expanded="true"]:not([id]) .pull-right-when-expanded {
    float: right;
}

.package .bar .a2 {
    font-size: 25px;
    padding-left: 10px;
}

.package .attr-lg, .attr-sm {
    color: #0456BA;
    text-align: center;
}

.package .attr-lg {
    font-size: 20px;
    top: 2px;
}

.package .attr-sm {
    font-size: 12px;
}

.package .attrs .attr-sm {
    top: -6px;    
}

.package .enquire-container {
    display: inline-block;
    width: 100%;
    text-align: right;
    margin-top: 25px;
    min-height: 34px;
}

.package .enquire-container .a1 {
    font-size: 15px;
}



h1, h2, h3 {
    font-weight: 200 !important;
    line-height: 1.5 !important;
}



.home .s1 {
    min-height: 250px;
    padding-bottom: 100px;
}

/*.home .s1 h1 {
    font-size: 50px;
    margin-top: 40px;
    margin-left: 20px;
    margin-right: auto;
}
*/
.home .s2 .round-bottom-2 {
    border-bottom: dashed 4px #ddd;
}

.home .s2 .search-button {
    font-size: 30px;
}

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

.home .s3 .container {
    margin-top: 20px;
    margin-bottom: 0px;
}

.home .s3 .content {
    margin-top: 20px;
}


.home .s3 img {
    height: 150px;
    margin-bottom: 15px;
}


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

.home .s5 .container {
    margin-top: 50px;
    margin-bottom: 60px;
}

.home .s5 h3 {
    padding-bottom: 20px;
}

.home .s5 .buttons {
    margin-top: 60px;
}


.home .s5 img {
    width: 150px;
    margin-bottom: 15px;
}


.search-header .map-pin {
    font-size: 150%;
    position: relative;
    top: 3px;
    left: -3px
}

.search-header h1 {
    text-align: left;
    font-size: 30px;
    position: relative;
    top: 40px;
    margin-left: 2%;
    margin-right: 2%;
    z-index: 1;
}

.search .s2 .container{
    margin-top: 80px;
    text-align: center;
}

.search .s3 .container {
    margin-top: 60px;
}

.pf-header a {
    text-decoration: none !important;
}

.darker {
    filter: brightness(65%);
}

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

.pf-header img {
    max-height: 100px;
    max-width: 100%;
    border: solid 2px #fff;
    background: #fff;
}

.pf-header.lg-logo-header .logo {
    max-height: 150px;
}

.pf-header.lg-logo-header .round-bottom-2 {
    height: 400px;
}


.pf-header img.no-border {
    border: none;
    background: none;
    border-radius: 0 !important;
}

.pf-nav {
    font-size: 17px;
    padding-bottom: 4px;
    border-bottom: solid 1px #ddd;
}

.pf-nav > * {
    margin-right: 25px;
}

.pf-bg-1 {
    background-color: #034aa5;
    color: #fff;
}

.pf-color-1 {
    color: #034aa5;
}


.pf .sb > div {
    display: inline-block;
    width: 100%;
}

.pf .summary-container {
    margin-top: 40px;
    text-align: justify;
}

.pf .packages-section, .pf .packages-section *, .package * {
    position: relative;
}

.sb-affix {
    display: inline-block;
    width: 100%;
    background-color: #fff;
    z-index: 99;
}

.sb-affix.affix {
    outline: solid 5px #fff;
}


.pf .sb1 {
    margin-bottom: 20px;
    padding: 8px;
}

.pf .sb2 {
    margin-bottom: 20px;
}


.pf .sb3 {
    padding: 20px;
    z-index: 0;
}


.effect7
{
    background-color: #fff;
    position:relative;       
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.04) inset;
       -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.04) inset;
            box-shadow:0 1px 2px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.04) inset;
}



.pf .sb4 {
    padding: 10%;
    margin-bottom: 20px;
    z-index: 0
}

.pf .listings {
    margin-left: -6px;
    margin-right: -6px;
}

.pf .listings > div {
    padding-left: 6px;
    padding-right: 6px;
}

.pf .packages-container {
    margin: 30px 0;
    padding-bottom: 20px;
}

.pf .package {
    border-left: solid 6px #FF871A;
    background-color: #fff;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 20px 25px 20px 25px;
    margin-bottom: 20px
}

.pf .package:hover {
    border-top: solid 1px #aaa;
    border-right: solid 1px #aaa;
    border-bottom: solid 1px #aaa;
    margin: -1px -1px 19px 0;
}

.pf .features > div {
    margin-top: 5px;
}

.pf .s2 {
    background-color: #fff;
    position: relative;
    padding-top: 10px;

}

.pf .s2 .nav li > a {
    background-color: transparent;
}

.pf .s2 .offer-container {
    color: #ff871a;
    border: dashed 1px #ff871a;
}

.pf .bundle-pills a {
    background-color: #F7F7F7;
    margin-right: 5px;
    margin-top: 5px;
}


.sticker {
    position: absolute; 
    top: 0px; left: 15px; 
    background-color: #ff871a; 
    color: #fff; 
    padding: 5px; 
    text-align: center;
    opacity: 0.9;
    z-index: 1;
}


.sticker:before {
    content: "";
    width: 50%;
    height: 20px;
    transform: skewY(-10deg);
    bottom: -6px;
    position: absolute;
    left: 0;
    z-index: -1;
    background-color: inherit;
}


.sticker:after {
    content: "";
    width: 50%;
    height: 20px;
    transform: skewY(10deg);
    bottom: -6px;
    position: absolute;
    z-index: -1;
    background-color: inherit;
}

.sticker .sm {
    font-size: 12px;
}


.at-custom-side-wrapper {
    display: none;
}

.form-step {
    padding-bottom: 30px;
    margin-top: 10px;
    padding-left: 40px;
    position: relative;
}

.active.form-step {
    border-left: solid 1px #ccc;
}


.fs-label {
    position: absolute; 
    left: -15px; 
    top: -13px; 
    text-align: center; 
    background-color: #fff;
}

.fs-edit {
    font-size: 11px;
    margin-left: 10px    
}

.fs-step {
    color: #aaa; 
    font-size: 9px;
}

.complete .fs-step {
    visibility: hidden;
}

.fs-number {
    margin-top: 3px;
    padding-top: 5px;
    border: solid 1px #034aa5;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #666;
    font-size: 12px;
}

.fs-number .fa {
    color: #fff;
    padding-top: 3px;
    display: none;
}

.complete .fs-number .fa, .info .fs-number .fa {
    display: block;
}


.fc-tab {
    right: 10px !important;
}

@media (max-width: 479px) {
/* xs */

    .form-step {
        padding-left: 12px !important;
    }

    .form-step h2 {
        padding-left: 20px !important;
    }

   .form-step .divider {
        margin-left: 10px;
        margin-right: 10px;
   }
}

@media (min-width: 480px) and (max-width: 767px) {
    .listings > div {
        width: 50%;
        float: left;
    }
}

/*@media (min-width: 768px) and (max-width: 818px) {
 First 50px of sm 
    .container {
        padding-left: 50px !important;
    }
}
*/
@media (min-width: 992px) and (max-width: 1052px) {
/* First 60px of md */
    .search .container, .pf.container {
        padding-left: 50px !important;
    }
}

@media (max-width: 479px) {
/* xxs */

    .package .enquire-button {
        width: 40% !important;
    }
    .package .booking-button {
        width: 60% !important;
    }
}

@media (min-width: 480px) {
/* ad-hoc and wider (Not xs) */

    .search-header h1 {
        font-size: 40px;
        text-align: center;
    }


    .in-location {
        white-space: nowrap;
    }

    .listing-container {
        height: 415px;
    }

    .listing-container .image {
        height: 160px;
    }

    .listing-container .activities-list {
        height: 75px;
    }


    .listing-container .g {
        height: 90px;
    }

    .listing-container.ent .g {
        height: 90px;
    }
    .footer .container {
        margin-left: auto;
    }


}


@media (min-width: 768px) {
/* sm and wider */

    .search-header h1 {
        margin-left: auto;
        margin-right: auto;
        font-size: 60px;
        width: 700px;
    }

    .at-custom-side-wrapper {
        display: block;
    }

    .main-nav-items div {
        display: inline-block;
        margin-left: 20px;
    }

    .main-nav-items a:not(.a2) {
        color: inherit;
        margin-left: 30px;
        font-size: 14px;
    }

    .main-nav-items img {
        margin-right: 5px;
    }

    .pf .package {
        padding: 20px 30px 20px 40px;
    }

    .package .package-s1.sm-threshold > div {
        border-bottom: none;
    }

    .prefilled-value {
        padding-top: 8px;
    }

}


@media (min-width: 992px) {
/* md and wider */

    .package .package-s1 > div {
        border-bottom: none;
    }

    .package-s1, .package-s2 {
        display: inline-block;
        float: none !important;
        vertical-align: middle;
    }

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


    .fc-tab {
        right: 30px !important;
    }

    .listing-container .activities-list.lg {
        line-height: 33px;
    }

    .activities-list.lg > div {
        font-size: 14px;
        line-height: 28px;
    }


    .home .s1 {
        min-height: 300px;
    }

    .home .search-header h1 {
        margin-top: 50px;
    }


}

@media (min-width: 1200px) {
/* lg and wider */

    .btn.a1 {
        font-size: 18px;
    }

    .pf .container {
        width: 970px !important;
    }

    .round-bottom-2 {
        height: 300px;
        margin-left: -150px;
        margin-right: -150px;
        margin-top: -150px;
        padding-top: 150px;
        position: relative;
    }

    .round-bottom-2 > div {
        margin-left: 150px;
        margin-right: 150px;
    }


    .search-header h1 {
        font-size: 60px;
    }

    .listing-container {
    }


}