/* header Section
-------------------------------------- */
.sticky-search.glued.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
}

.header-bottom {
    height: 0;
}

/*
.sticky-search.glued.fixed + .header-bottom {
    padding-top: 52px;
}
*/

.search-panel .visible-sticky {
    display: none;
}

.search-panel .hidden-sticky {
    display: inline-block;
}

.search-panel .visible-sticky.scroll-top {
    position: fixed;
    bottom: -32px;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    -webkit-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

    .search-panel .visible-sticky.scroll-top button {
        border-radius: 12px 12px 0 0;
        font-size: 1.4em;
        border-top: none;
        min-width: 4em;
    }


    .sticky-search .visible-sticky.call {
        text-align: right;
        padding-top: 6px;
        font-size: 1.2em;
        font-weight: 600;
    }

.sticky-search .visible-sticky.call a {
    padding-right: 42px;
    color: #ffffff;
}


@media only screen and (min-width:994px) {
    .sticky-search.glued.fixed .visible-sticky {
        display: inline-block;
    }

    .sticky-search.glued.fixed .visible-sticky.scroll-top {
        bottom: 0;
    }

    .sticky-search.glued.fixed .hidden-sticky {
        display: none;
    }

    /*.sticky-search.glued.fixed + .header-bottom.holiday,
    .sticky-search.glued.fixed + .header-bottom.hotel,
    .sticky-search.glued.fixed + .header-bottom.journeys {
        padding-top: 223px;
    }*/

    .sticky-search.glued.fixed + .header-bottom.cruise {
        padding-top: 273px;
    }
}

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

    /*.sticky-search.glued.fixed + .header-bottom.holiday,
    .sticky-search.glued.fixed + .header-bottom.hotel,
    .sticky-search.glued.fixed + .header-bottom.journeys {
        padding-top: 128px;
    }*/
    
    .sticky-search.glued.fixed + .header-bottom.cruise {
        padding-top: 178px;
    }
}

    /*sales banner*/
    .sales--banner {
        background-image: linear-gradient(-90deg, #711BE0 0%, #5FDFC1 100%);
        background-size: 100%;
        color: #fff;
        font-size: 1em;
        letter-spacing: 1px;
        text-align: center;
        text-transform: uppercase;
        padding: 0.5em 0;
    }

    @media only screen and (min-width : 768px) {
        .sales--banner {
            font-size: 1.25em;
        }
    }

    #header {
        background: #1f1f1f;
        font-family: 'Gibson-SemiBold', Arial, sans-serif;
    }

    #logo img {
        float: left;
        margin: 15px 0 0 13px;
    }


    @media only screen and (max-width:900px) {
        #header #logo img {
            margin: 23px 0 23px 10px;
            max-width: 150px;
        }
    }

    @media only screen and (max-width:360px) {
        #header #logo img {
            width: 40%;
        }
    }

    .cta-bar span.description {
        /*text-transform: uppercase;*/
        font-size: 14px;
        font-family: 'Lato';
        font-weight: 300;
    }

    .cta-bar span {
        font-size: 0.75em;
        text-transform: uppercase;
    }

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

        .menu-icon-wrap {
            margin: 0.9em !important; /*again hacky positioning the menu span*/
        }
    }


    /*#signUpForm > div.fbContainer.text-center > div > button > span {
    padding-left: 40px;
}*/

    .xxs-contact span {
        display: block;
    }

    .chat {
        margin-top: 5px;
        float: left;
        font-size: 0.75em;
        text-transform: uppercase;
    }

        .chat:after {
            content: "";
            border-radius: 50%;
            background-color: #6eec44;
            width: 6px;
            height: 6px;
            margin: 6px 0 0 4px;
            position: absolute;
        }

    #header .container {
        padding: 0;
    }

    .cta-bar {
        float: right;
        text-align: right;
        margin: 0;
    }

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

        .cta-bar li:first-of-type {
            width: 121px;
        }
    }


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

        .cta-bar span .description {
            font-size: 12px;
        }

        .cta-bar li:first-of-type {
            width: 150px;
        }

        #logo img {
            margin: 15px 0 0 15px;
        }
    }

    #header.booking-header ul.cta-bar {
        margin-right: 5px;
    }


    .cta-bar li {
        float: left;
    }

        .cta-bar li a, .cta-bar li .fakea {
            display: block;
            text-align: center;
            position: relative;
            height: 75px;
            padding: 20px 0 0 8px;
        }

            .cta-bar li a.xs-button span {
                padding-top: 26px;
                display: inline-block;
            }

        .cta-bar li search-icon {
            fill: #fff;
        }

    .cta-bar img,
    .cta-bar .sprite-icon {
        height: 18px;
    }

        .cta-bar .sprite-icon.footer-contact-icon,
        .cta-bar .sprite-icon.chat-icon {
            margin: 4px 0 0 20px;
        }

        .cta-bar .sprite-icon.my-destinology-icon {
            margin-top: 2px;
        }

        .cta-bar .sprite-icon.chat-icon {
            margin: 4px 0 0 8px;
        }

    .cta-bar .mobile--quote {
        padding: 15px;
    }


    .cta-bar .mobile-quoteref {
        display: none;
    }

    #header .mobile-quoteref-small {
        display: block;
        text-align: right;
        font-size: 11px;
        color: #6EC200;
        float: right;
        padding: 0 10px 5px 0;
    }

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

        .fakea {
            width: 180px;
        }

        .cta-bar .mobile-quoteref {
            display: block;
        }

        #header .mobile-quoteref-small {
            display: none;
        }

        .cta-bar img,
        .cta-bar .sprite-icon {
            float: left;
        }
    }

    .cta-bar .owl-page span {
        display: none;
    }

    .cta-bar strong {
        display: block;
        font-family: 'Gibson-Regular', Arial, sans-serif;
        font-weight: 300;
        color: #fff;
        font-size: 18px;
        text-align: right;
    }

    .cta-bar .opening--times {
        font-size: 11px;
        font-family: 'Gibson-Regular', Arial, sans-serif;
        text-transform: none;
        text-align: left;
    }

        .cta-bar .opening--times.mobile {
            color: #5FDFC1;
            margin: 4px 4px;
        }

    /* ===========  
    menu icon 
=============*/


    /* hacky fix to position the menu icon span - fix me l8r <3*/
    .menu-icon-wrap {
        margin: 1.1em;
    }

    .menu-icon i {
        position: relative;
        width: 18px;
        height: 2px;
        background-color: #e6e6e6;
        top: 10px;
    }

    a.menu-icon, a.menu-icon:hover, a.menu-icon:visited {
        color: #ffffff;
    }

    .menu-icon span {
        padding-top: 14px;
    }

    .menu-icon i:before,
    .menu-icon i:after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background-color: #e6e6e6;
        border-radius: 10px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

    .menu-icon i:after {
        margin-top: -3px;
    }

    .menu-icon i:before {
        margin-top: 3px;
    }

    .menu-icon i:before {
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
        -o-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    .menu-icon i:after {
        -webkit-transform: translateY(8px);
        -moz-transform: translateY(8px);
        -ms-transform: translateY(8px);
        -o-transform: translateY(8px);
        transform: translateY(8px);
    }
    /* OPENED */

    .menu-icon.open i {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

        .menu-icon.open i:before {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
            margin-top: 0;
        }

        .menu-icon.open i:after {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
            margin-top: 0;
        }
    /* ========================= Nav Styles ========================= */

    #nav {
        position: relative;
        top: 0;
        width: 100%;
        height: auto;
    }

    @media (min-width:768px) {
        ul.nav li.dropdown:hover > ul.dropdown-menu {
            display: block;
        }

        ul.nav li.dropdown.hide-dd:hover > ul.dropdown-menu {
            display: none;
        }
    }

    .navbar {
        margin-bottom: 0;
    }

    #nav.navbar {
        background: #1f1f1f;
        border-radius: 0;
        border-top: solid 1px #9A60CF;
        min-height: 0;
    }

    @media screen and (min-width:768px) {
        .nav-wrap {
            height: 52px;
            background: #1f1f1f;
            padding: 0 1em;
        }
    }

    #nav .navbar-nav li {
        display: block;
        text-align: center;
    }

    @media only screen and (min-width:768px) {
        #nav .navbar-nav li {
            display: inline-block;
            font-size: 1em;
        }
    }

    #nav .navbar-nav li a {
        display: block;
        padding: 16px 9px 16px 8px;
        text-transform: none;
        color: #fff;
        font-family: 'Gibson-Regular';
        font-size: 0.93em;
        letter-spacing: 0;
    }

    @media (min-width: 1200px) {
        #nav .navbar-nav li a {
            padding-right: 38px;
        }
    }

    #nav .navbar-nav li .quick-search input {
        float: left;
        margin-left: 20px;
        line-height: 18px;
        vertical-align: top;
    }

    #nav .navbar-nav li a.classy-button {
        display: block;
        padding: 9px;
        color: #bb95df;
        font-size: 10px;
        margin-right: 20px;
    }

    span.search a {
        display: inline-block;
        float: right;
        padding: 17px 10px;
        height: 52px;
        width: 140px;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        font-size: 12px;
        background: url("https://res.cloudinary.com/destinology/v1/cn_images/website/holidaysearch-icon-lg.svg") no-repeat 50% #9544eb;
    }

    @media only screen and (min-width:992px) {
        span.search a {
            width: 140px;
            padding: 16px 10px;
        }
    }

    #nav .navbar-nav span a:hover {
        background: url("https://res.cloudinary.com/destinology//v1/cn_images/website/holidaysearch-icon-lg.svg") no-repeat 50% #652ea0;
    }

    #nav .navbar-nav .dropdown-menu {
        border: 1px solid #ccc;
        border-radius: 0;
        padding: 0;
        background: #fff;
        color: #000;
    }

        #nav .navbar-nav .dropdown-menu:before {
            content: '';
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #fff;
            position: absolute;
            top: -8px;
            left: 10%;
            z-index: 99999;
        }

    #nav .navbar-nav .dropdown.open .dropdown-menu:before {
        content: '';
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #ccc;
        position: relative;
        top: -26px;
        left: 10%;
        z-index: 99999;
    }

    #nav .navbar-nav .dropdown-menu li a {
        font-family: 'Gibson-Regular';
        font-size: 1em;
        color: #212529;
    }

    #nav .navbar-nav .dropdown-menu li {
        display: block;
        text-align: center;
    }

    @media only screen and (min-width:768px) {
        #nav .navbar-nav .dropdown-menu li {
            text-align: left;
        }
    }

    #nav .navbar-nav ul.destinations-menu li a, #nav ul.holiday-types-dropdown li a {
        padding: 0;
    }

    .nav #breadcrumb {
        border-bottom: 1px solid #333;
    }
    /*-- Mobile Nav --*/

    #nav .navbar.navbar-inverse {
        height: 0;
    }

    #nav .navbar-inverse .navbar-collapse,
    #nav .navbar-inverse .navbar-form {
        border: none;
        box-shadow: none;
    }

    #nav .container > .navbar-collapse {
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }


    @media (max-width:767px) {
        nav[sticky].top-nav {
            height: 0 !important;
            top: -1px !important;
        }
    }

    #nav .navbar-nav {
        margin: 0 0 0 -10px;
        font-family: 'Gibson-SemiBold', Arial, sans-serif;
    }

    .navbar-nav ul {
        padding: 0;
    }

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

        #nav .navbar-nav {
            overflow-y: scroll;
            padding-bottom: 40px;
            overflow-x: hidden;
        }

        #nav .navbar-collapse {
            box-shadow: none;
            border-top: 1px solid #9544eb;
            background: #fff;
            box-shadow: 0px 16px 67px -12px rgba(0,0,0,0.75);
        }
    }

    /*@media (max-width: 994px) and (min-width: 768px) {
        .hidden-sm {
            display: none !important;
        }
    }*/


    @media (max-width:767px) {
        #search-panel .modal-search {
            width: 80%;
            margin: 0 auto;
        }
    }

    @media (max-width:360px) {
        #search-panel .modal-search {
            width: 90%;
        }
    }

    .mobile-panel {
        display: table;
        width: 100%;
        margin: 0;
    }

    /*[data-page-type="holidayresults"] div.mobile-panel {
        display: none !important;
    }*/

    @media only screen and (max-width:767px) {
        div.mobile-panel {
            display: table !important;
        }
    }

    @media only screen and (min-width:768px) and (max-width:992px) {
        div.mobile-panel {
            display: table !important;
        }

            div.mobile-panel span.search a {
                width: 100% !important;
            }
    }

    @media (max-width:767px) {
        #nav .navbar-nav li a {
            color: #000;
        }
    }

    .mobile-panel span.glyphicon {
        margin-left: 10px;
    }

    .mobile-panel .search {
        display: block;
    }

        .mobile-panel .search a.edit-search .glyphicon {
            transition: all 0.5s;
        }

        .mobile-panel .search a.edit-search.collapsed .glyphicon {
            transform: rotate(180deg);
            transition: all 0.5s;
        }

        .mobile-panel .search a {
            display: block;
            width: 100%;
        }

    .mobile-panel .my-account a {
        display: block;
        padding: 16px 25px 14px;
        position: relative;
    }

        .mobile-panel .my-account a:hover {
            background: #000000;
        }

    .circle {
        color: #ffffff;
        font-size: 10px;
        padding-top: 3px;
        padding-right: 2px;
        text-align: center;
        display: block;
        position: absolute;
        z-index: 999;
        border-radius: 50%;
        background: #f5a623;
        width: 19px;
        height: 19px;
        top: -6px;
        right: -6px;
    }



    .my-destinology {
        border-radius: 50%;
        border: solid 1px #9544eb !important;
        width: 40px;
        height: 40px !important;
        position: relative;
        margin: 20px 0 0 16px;
        display: block;
        padding: 0;
    }

    /*removes bootstrap white background*/
    #nav .nav .open > a,
    #nav .nav .open > a:hover,
    #nav .nav .open > a:focus {
        background: none;
    }

    .my-destinology-mobile {
        width: 100%;
        position: relative;
        margin: 0 auto;
        height: 50px;
    }

    .my-destinology-icon {
        position: absolute;
        left: 2px;
        top: 7px;
    }

    .fbLoginBtn {
        background-color: #3B5998;
    }

        .fbLoginBtn:hover {
            -ms-opacity: 0.6;
            opacity: 0.6;
            color: white !important;
        }


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

        .my-destinology {
            margin: 0;
        }

        .circle {
            right: -80px;
            top: -16px;
            margin: 0 auto;
            position: relative;
            margin-bottom: -20px;
        }

            .circle.inline {
                display: inline-block;
                position: relative;
                top: 0;
                right: 0;
            }

        .tab-content.mobile {
            width: 80%;
            margin: 20px auto;
            overflow: hidden;
            padding: 20px 0;
            max-height: 20em;
            overflow-y: scroll;
        }

        /*.tab-content .btn {
            width: 200px;
            margin: 0 auto;
        }*/
    }

    .active-dot {
        border-radius: 50%;
        background-color: #6eec44;
        width: 6px;
        height: 6px;
        margin-left: 7px;
        position: relative;
        vertical-align: middle;
        top: -1px;
    }


    .quoteId {
        font-size: 10px;
        font-family: 'Gibson-SemiBold', Arial, sans-serif;
        color: #b2b2b2;
    }