﻿/* ###################################### */
/* # Travel.co.za                       # */
/* # Developed by Freshive              # */
/* ###################################### */

/* GENERAL */
body {
    /* background-color: #e2e1e0; */
    color: #343a40;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

button:active,
button:focus,
input:active,
input:focus,
select:active,
select:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* #################### */
/* HEADER */
#headerBar {
    position: relative;
    margin-top: 71px;
}

/* CAROUSEL */

#landingCarousel {
    z-index: 1;
}

#landingCarousel .w-100 {
    height: 500px;
    width: 100%;
}

#landingCarousel .carousel-control-prev,
#landingCarousel .carousel-control-next {
    z-index: 5;
    opacity: 0.5 !important;
}

.carousel-control-prev-icon {
    background-image: url('../../Images/Icons/left-carousel-arrow.png');
    height: 40px;
}

.carousel-control-next-icon {
    background-image: url('../../Images/Icons/right-carousel-arrow.png');
    height: 40px;
}

#landingCarousel .carousel-control-prev:hover,
#landingCarousel .carousel-control-next:hover {
    opacity: 1 !important;
}


/* TOP BAR */
#topBar {
    background-color: #fff;
    border-bottom: 1px solid rgba(52, 58, 64, 0.1);
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    padding-bottom: 10px;
    padding-top: 10px;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    z-index: 10;
}

#topBar .logo {
    border: 0px;
    height: 60px;
    width: auto;
}

#navbarMobile {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
}

/* CONTACT INFORMATION */
#topBar #contactInfo {
    padding-left: 0px;
}

#topBar #contactInfo ul {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0px 0px;
}

#topBar #contactInfo ul li {
    float: left;
    margin: 10px 0px;
    padding: 6px 10px;
}

#topBar #contactInfo ul li:first-child {
    border-right: 1.5px solid #343a40;
    padding-left: 0px;
}

#topBar #contactInfo ul li a,
#topBar #contactInfo ul li a:visited {
    color: #343a40;
    display: block;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.7;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#topBar #contactInfo ul li a:hover,
#topBar #contactInfo ul li a:active {
    opacity: 1;
    text-decoration: none;
}

#topBar #contactInfo img {
    margin-right: 10px;
    height: auto;
    width: 16px;
}

#topBar .separator {
    border-bottom: 1px solid #343a40;
}

/* NAVIGATION BAR */
#topBar #navColumn {
    padding-left: 0px;
}

#topBar #navColumn .navbar {
    margin-top: 5px;
    padding-left: 0px;
}

#topBar #navColumn .navbar a,
#topBar #navColumn .navbar a:visited {
    color: #343a40;
    font-size: 12px;
    font-weight: 500;
    margin-right: 30px;
    opacity: 0.7;
    padding: 0px;
    text-decoration: none;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

#topBar #navColumn .navbar a:hover,
#topBar #navColumn .navbar a:focus {
    opacity: 1;
}

#topBar #navColumn .navbar .active a {
    font-weight: 700 !important;
    opacity: 1;
}

#topBar #navColumn .navbar a:first-child {
    padding-left: 0px;
}

#topBar #navColumn .navbar-brand {
    opacity: 1 !important;
}

/* SEARCH BAR */
#topBar #navbarSearch {
    padding-right: 0px;
}

#topBar #navbarSearch .input-group {
    display: flex;
    position: relative;
}

#topBar #navbarSearch .navBtnSearch {
    color: #fff;
    position: absolute;
    top: 4px;
    right: 5px;
    z-index: 1000;
}

#searchDest {
    background-color: rgba(52, 58, 64, 0.4);
    border: none;
    border-radius: 25px !important;
    color: #fff;
    font-size: 10px;
    margin-right: 0px;
    padding: 15px 20px;
    width: 200px;
    position: relative !important;
    float: right;
}

#topBar #navbarSearch  #searchDest::-webkit-input-placeholder { /* Edge */
    color: #fff;
}

#topBar #navbarSearch  #searchDest:-ms-input-placeholder { /* Internet Explorer */
    color: #fff;
}

#topBar #navbarSearch  #searchDest::placeholder {
    color: #fff;
}

#topBar #navbarSearch .form-control:focus {
    border: none !important;
    box-shadow: none !important;
}

ul.ui-autocomplete {
    list-style: none;
    border: none;
    border-radius: 25px !important;
    background-color: rgba(52, 58, 64, 0.4);
    width: 200px;
    margin: 0px !important;
    font-size: 10px;
    color: #fff;
    position: fixed;
    padding: 10px 0px;
}

li.ui-menu-item {
    background: none !important;
    border: none;
    margin: 0px !important;
    margin-bottom: 0px !important;
}

.ui-menu-item-wrapper {
    padding: 5px 20px !important;
}

.ui-state-highlight, 
.ui-widget-content .ui-state-highlight, 
.ui-widget-header .ui-state-highlight {
    border: 1px solid #c5c5c5 !important;
    background: #f6f6f6 !important;
    color: #454545 !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background: #25bcde !important;
    border: 0px !important;
    font-weight: normal !important;
    color: #fff;
}



.ui-datepicker .ui-datepicker-prev {
    left: 1px !important;
}

.ui-datepicker .ui-datepicker-next {
    right: 1px !important;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
    margin: 0px !important;
}





/* CAROUSEL TEXTS */

#headerBar #carouselText {
    position: absolute;
    top: 170px;
    right: 0px;
    left: 0px;
    text-align: center;
    z-index: 5;
}

#headerBar #carouselText h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 900;
}

#headerBar #carouselText h2 {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

#headerBar #carouselText p {
    background-color: #9ec63b;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    text-align: center;
    display: table;
}

#headerBar #carouselText p span {
    font-size: 12px;
    font-weight: 700;
}

#headerBar #carouselText a,
#headerBar #carouselText a:visited {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
}

#headerBar #carouselText a:hover,
#headerBar #carouselText a:focus {
    text-decoration: none;
}

#headerBar #carouselText a img {
    height: 10px;
    font-weight: normal;
    margin-top: -2px;
    margin-left: 8px;
    transform: translateX(0px);
    transition: transform .3s ease-in-out;
}

#headerBar #carouselText a:hover img {
    transform: translateX(5px);
    transition: transform .3s ease-in-out;
}

/* SEARCH TABS */
#searchTabs {
    margin-top: 50px;
}

#searchTabs .searchTabsFloater {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    padding: 0px !important;
}

#searchTabs #myTabContent {
    background-color: rgba(255, 255, 255, 0.90);
    padding: 25px 25px;
}

#searchTabs #myTabContent .col-md-3 {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

#searchTabs #myTab img {
    height: 26px;
    margin-right: 14px;
}

.iconActive {
    display: none;
}

#searchTabs .nav-link {
    background-color: #cacdcd;
    border: 0px;
    border-radius: 0px;
    color: #666666;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 16px;
}

#searchTabs .nav-tabs .nav-link {
    border-right: 2px solid #7d7d7d;
}

#searchTabs .nav-tabs .nav-item:last-child .nav-link {
    border-right: none;
}

#searchTabs .nav-item .active {
    background-color: #fff;
    box-shadow: 5px 0 5px -4px #333;
    border-right: none;
    color: #343a40;
    position: relative;
    z-index: 5;
}

#searchTabs .nav-item:last-child .active {
    border-left: none;
    box-shadow: -5px 0 5px -4px #333;
}

#searchTabs .form-control,
.filterSearch .form-control,
#content .searchResults .form-control,
#content .enquire .form-control {
    border: 1px solid #cccccc;
    border-radius: 0px;
    color: #ccc;
    font-size: 12px;
    height: 50px;
    margin-top: 10px;
    width: 190px;
}

#searchTabs .form-control {
    width: 100% !important;
}

#myTabContent button,
#myTabContent button:visited,
.filterSearch button,
.filterSearch button:visited,
#content .enquire button,
#content .enquire button:visited {
    border: none;
    border-radius: 25px;
    background-color: #25bcde;
    font-size: 12px;
    font-weight: bold;
    height: 50px;
    margin-top: 10px;
    transition: background-color .3s ease-in-out;
    width: 190px;
}

#myTabContent button,
#myTabContent button:visited {
    width: 100% !important;
}

#myTabContent button:hover,
#myTabContent button:active,
.filterSearch button:hover,
.filterSearch button:active,
#content .enquire button:hover,
#content .enquire button:active {
    background-color: #11a8ca;
    transition: background-color .3s ease-in-out;
}

#myTabContent button img,
.filterSearch button img,
#content .enquire button img {
    height: 12px;
    margin-top: -2px;
    margin-left: 20px;
}
/* #################### */

/* #################### */
/* CONTENT */
#content{
    padding: 0px 50px;
    margin: 0 auto;
}

#content h2 {
    font-size: 30px;
    font-weight: bold;
    margin-top: 40px;
}

#content h3 {
    font-size: 14px;
    margin-top: 5px;
}

#content h4 {
    color: #bfbfbf;
    font-size: 11px;
    font-weight: 500;
}

#content h5 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;

}

#content p {
    font-size: 12px;
    padding: 0px 5px;
    text-align: justify;
}

#content .card {
    margin-top: 20px;
}

#content .card-body {
    padding: 0px;
    padding-top: 5px;
}

#content .card-img-top {
    border-radius: 15px;
    width: 100%;
    height: 120px;
    object-fit: cover;
}

#content .sectionTwoImage {
    width: 100%;
    height: 50px !important;
    object-fit: cover;
}

#content .sectionThreeImage {
    width: 100%;
    height: 320px !important;
    object-fit: cover;
    border-radius: 15px;
}


/* SPECIAL OFFERS */
#specialOffers .card,
#doItYourself .card {
    border-radius: 10px;
    border: 0px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    padding: 20px;
}

#specialOffers .card {
    position: relative;
}

#specialOffers .card:hover .offerTags {
    transition: width .3s ease-in-out;
    width: 90px;
}


.locationBlock {
    font-size: 11px;
    margin-bottom: 15px;
}

.locationBlock img {
    display: inline-block;
    float: left;
    margin-right: 15px;
    vertical-align: middle;
    width: 10px;
}

#specialOffers .specialOfferFrontHeader {
    height: 34px !important;
    overflow: hidden;
}

#specialOffers .specialOfferPrice h5 {
    font-size: 15px;
    display: inline;
}

#specialOffers h4 {
    display: inline-block;
    margin-bottom: 0px;
    vertical-align: middle;
}

#specialOffers .offerTags {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 10px 0px;
    position: absolute;
    top: 40px;
    left: 0;
    text-align: center;
    text-transform: uppercase;
    transition: width .3s ease-in-out;
    width: 85px;
}

#specialOffers .starRating {
    height: 20px;
}

#specialOffers .starRating img,
.packageInfo .starRating img {
    height: auto;
    width: 14px;
}

#specialOffers hr {
    border-top: 1px solid #343a40;
    margin: 10px 0;
}

#specialOffers .specialOfferPrice p {
    display: inline;
}

#specialOffers a,
#specialOffers a:visited,
#specialOffers .viewNowBtn,
#specialOffers .viewNowBtn:visited,
.noSearchResults a,
.noSearchResults a:visited {
    border: none;
    border-radius: 25px;
    bottom: 20px;
    background-color: #25bcde;
    color: #fff;
    font-size: 10px;
    font-weight: normal;
    padding: 6px 14px;
    position: absolute;
    right: 20px;
    transition: background-color .3s ease-in-out;
}

#specialOffers a:hover,
#specialOffers a:active,
#specialOffers .viewNowBtn:hover,
#specialOffers .viewNowBtn:active,
.noSearchResults a:hover,
.noSearchResults a:active {
    background-color: #11a8ca;
    text-decoration: none;
    transition: background-color .3s ease-in-out;
}

#specialOffers p {
    margin-bottom: 30px;
    height: 134px;
}

#specialOffers .savings {
    font-size: 13px;
    color: #bfbfbf;
    font-weight: 500;
    margin-bottom: 10px;
}

#specialOffers .savings .originalPrice {
    text-decoration: line-through;
}

#specialOffers .savings .saveValue {
    color: #343A40;
}

/* DO IT YOURSELF */
#doItYourself .card:hover .card-body img {
    margin-right: 0px;
    transition: margin-right .3s ease-in-out;
}

#doItYourself img {
    display: block;
    float: left;
}

#doItYourself h5 {
    font-size: 15px;
    height: auto !important;
    overflow: unset !important;
}

#doItYourself h4 {
    font-weight: bold;
}

#doItYourself p {
    color: #bfbfbf;
    padding: 0px;
    height: 34px;
}

#doItYourself .fromPrice {
    color: #9ec63b;
    margin: 0px;
}

#doItYourself .card-body img {
    float: right;
    height: auto;
    margin-right: 5px;
    width: 10px;
    transition: margin-right .3s ease-in-out;
}

#doItYourself .card-body a,
#doItYourself .card-body a:visited {
}

#doItYourself .card-body a:hover,
#doItYourself .card-body a:active {
    text-decoration: none;
}

/* DISCOVERY DESTINATIONS */
#discoveryDest .card:hover .card-body img {
    visibility: visible;
    transform: translateX(10px);
    transition: all .3s ease-in-out;
}

#discoveryDest .card-body img {
    visibility: hidden;
    transform: translateX(0px);
    transition: all .3s ease-in-out;
    width: 6px;
}

#discoveryDest h5 {
    font-size: 16px;
    height: auto !important;
    overflow: unset !important;
}

#discoveryDest p {
    margin-bottom: 5px;
    padding: 0px;
    height: 40px;
    overflow: hidden;
}

#discoveryDest a,
#discoveryDest a:visited {
    color: #343a40;
    font-size: 10px;
    font-weight: bold;
}

#discoveryDest a:hover,
#discoveryDest a:active {
    text-decoration: none;
}

#content .card {
    border: 0px;
}

#discoveryDest .card-body {
    padding: 0px;
}


/* #################### */
/* PRE FOOTER */

#preFooter {
    padding: 90px 0px;
}

#preFooter h2 {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}

#preFooter h5 {
    text-align: center;
    font-size: 15px;
    height: auto !important;
    overflow: unset !important;
}

#preFooter .contactDetails a,
#preFooter .contactDetails a:visited{
    text-align: center;
    width: 220px;
    height: 50px;
    font-size: 12px;
    padding: 14px 0px;
    display: inline-block;
    border: 0px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    line-height: 26px;
    color: red;
}

#preFooter .contactDetails a:hover,
#preFooter .contactDetails a:active {
    text-decoration: none;
}

#preFooter .contactDetails a:first-child {
    margin-right: 5px;
}

.contactDetails span {
    vertical-align: middle;
}

.contactDetails .fas {
    margin-right: 5px;
    font-size: 14px;
    padding-top: 6px;
}

.contactDetails .emailText {
    position: relative;
    top: 15px;
}

.contactDetails .phoneText {
    position: relative;
    top: 15px;
}

.contactDetails {
    text-align: center;
    padding: 25px 0px;
}





/* #################### */
/* FOOTER */
footer {
    display: inline-block;
    margin-top: 64px;
    padding: 0px !important;
    position: relative;
}

footer::before {
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #a1a1a1;
    content: '';
    display: inline-block;
    margin: auto;
    position: absolute;
    height: 0;
    width: 0;
    top: -40px;
    right: 0;
    left: 0;
}

footer #social {
    background-color: #a1a1a1;
    padding: 20px 0px;
}

footer #social ul,
footer #legal ul {
    list-style-type: none;
    margin: 0px;
    overflow: hidden;
    padding: 5px 0px;
    text-align: center;
}

footer #social ul li {
    display: inline;
}

footer #social ul li a,
footer #social ul li a:visited {
    text-decoration: none;
}

footer #social .fab {
    color: #a1a1a1;
    transition: color .3s ease-in;
}

footer #social .fas {
    color: #505050;
    transition: color .3s ease-in;
}

footer #social a:hover .fab {
    color: #a5a6ae;
    transition: color .3s ease-in;
}

footer #social a:hover .fas {
    color: #d0d0d0;
    transition: color .3s ease-in;
}

footer #legal {
    background-color: #707070;
    padding: 25px 0px;
    text-align: center;
}

footer #legal ul li {
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    border-right: 3px solid #b8b8b8;
}

footer #legal ul li:first-child {
    padding-left: 0px;
}

footer #legal ul li:last-child {
    padding-right: 0px !important;
    padding-left: 5px !important;
    border-right: 0px !important;
}

footer #legal ul li a,
footer #legal ul li a:visited {
    color: #b8b8b8;
    display: block;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    transition: color .3s ease-in-out;
}

footer #legal ul li a:hover,
footer #legal ul li a:active {
    color: #fff;
    transition: color .3s ease-in-out;
}

footer #legal p {
    color: #b8b8b8;
    font-weight: normal;
    font-size: 10px;
    margin: 0px;
    margin-top: 25px;
    padding: 0px;
}

/* SEARCH RESULTS PAGE */

.filterSearch {
    margin: 0px;
    padding: 0px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(52, 58, 64, 0.1);
}

.filterSearch .col-6,
.packageInfo .enquire .col-6,
.packageInfo .enquire .col-4,
.packageInfo .enquire .col-12,
.packageInfo .enquire .col-lg-4,
.packageInfo .enquire .col-lg-6 {
    padding: 0px;
}

.filterSearch .col-6:first-child,
.packageInfo .enquire .col-6:first-child,
.packageInfo .enquire .col-4:first-child,
.packageInfo .enquire .col-lg-4:first-child,
.packageInfo .enquire .col-lg-6:first-child {
    padding-right: 2px;
}

.filterSearch .col-6:last-child,
.packageInfo .enquire .col-6:last-child,
.packageInfo .enquire .col-4:last-child,
.packageInfo .enquire .col-lg-4:last-child,
.packageInfo .enquire .col-lg-6:last-child {
    padding-left: 2px;
}

.filterSearch .form-control {
    height: 42px;
    width: 100% !important;
    margin-top: 0px;
}
.enquire label.error{
    color:red!important;
}
.filterSearch label,
#content .searchResults,
.packageInfo .enquire label {
    color: #343a40;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 0px;
    margin-top: 0;
}

.filterSearch button,
.filterSearch button:visited,
#content .enquire button,
#content .enquire button:visited {
    font-size: 12px;
    height: 40px;
    margin-top: 14px;
    width: 100%;
}

#content #specialOffers h3 {
    color: #343a40;
    font-size: 14px;
    font-weight: bold;
    margin-top: 20px;
}

#content #specialOffers h3 span {
    border-left: 2px solid #343a40;
    font-size: 10px;
    font-weight: normal;
    line-height: 14px;
    padding-left: 5px;
}

#content .searchResults .form-control {
    height: 42px;
    width: 170px !important;
    margin-top: 0px;
}

#content .searchResults {
    position: relative;
}

#content .searchResults .sortBy {
    position: absolute;
    top: 25px;
    right: 20px;
}

.form-row {
    margin-left: 0px;
    margin-right: 0px;
}

.searchBanner {
    background-image: url('../../Images/Banners/search-result-banner-1.jpg');
    background-size: cover;
    height: 150px;
    margin-top: 71px;
}

.searchBanner h1,
.packageDetails h1 {
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    text-align: center;
    margin-top: 80px;
}

.packageDetails {
    background-image: url('../../Images/Banners/package-banner-1.jpg');
    background-size: cover;
    height: 150px;
    margin-top: 71px;
}

.packageInfo img {
    border-radius: 15px;
}

.packageInfo .packageTitle h5 {
    font-size: 18px !important;
}

.packageInfo .packageTitle h4 {
    margin-bottom: 0px !important;
}

.packageInfo .pricingDisplay h5 {
    font-size: 24px !important;
    text-align: right;
    height: 60px !important;
}

.packageInfo .pricingDisplay h5 span {
    color: #a1a1a1;
    display: block;
    font-size: 12px;
    font-weight: 400;
}

.packageInfo hr {
    border-top: 1px solid #343a40;
    margin-bottom: 25px;
}

.packageInfo .packageImageOne {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.packageInfo .packageImageTwo {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.packageInfo .packageImageThree {
    height: 150px;
    width: 100%;
    padding-bottom: 5px;
    object-fit: cover;
}

.packageInfo .packageImageFour {
    height: 150px;
    width: 100%;
    padding-top: 5px;
    object-fit: cover;
}

.packageInfo .imageThreeFour {
    padding-left: 0px;
    object-fit: cover;
}

#packageDescriptionHeadings .nav-item.show .nav-link,
#packageDescriptionHeadings .nav-link.active {
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 0px;
}

#packageDescriptionHeadings .nav-item {
    background-color: #ebebeb;
    border-radius: 0px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

#packageDescriptionHeadings .nav-item:first-child {
    border-left: 1px solid #ccc;
}

#packageDescriptionHeadings .nav-link {
    color: #a1a1a1;
    font-weight: 700;
    font-size: 10px;
    padding: 10px 0px;
    border: none;
}

#packageDescription h5 {
    color: #343a40;
    font-size: 12px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 5px;
    height: auto;
}

#packageDescription p,
#packageDescription ul li{
    color: #a1a1a1;
    font-size: 12px;
    font-weight: 400;
    padding: 0px;
}

#packageDescription ul {
    padding-left: 15px;
}

.packageInfo .enquireTitle {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    border-radius: 15px;
    padding: 20px 30px;
}

.packageInfo .enquireTitle h5 {
    font-size: 24px !important;
    margin-bottom: 0px !important;
    height: 60px !important;
}

.packageInfo .enquireTitle h5 span {
    color: #a1a1a1;
    font-size: 12px;
    font-weight: 400;
    display: block;
}

#content .enquire .form-control {
    height: 42px;
    width: 100% !important;
    margin-top: 3px;
}

#content .enquireTitle hr {
    margin-bottom: 5px !important;
}

#content .enquire .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ccc;
    opacity: 1; /* Firefox */
}

#content .enquire .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ccc;
}

#content .enquire .form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: #ccc;
}


/* LEGAL PAGES */
.legalBanner {
    margin-top: 100px;
    padding: 100px 80px;
    background-image: linear-gradient(to right, #17839b, #25bcde);
}
.legalBanner h1{
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    text-align: center;
}

.legalContent p {
    margin-bottom: 0px !important;
}


/* NO SEARCH RESULTS */

.noSearchResultsTitle{
    color: #000;
    font-size: 16px;
    font-weight: 700;
    margin-top: 15px;
}

.noSearchResultsSubtitle {
    color: #a1a1a1;
    font-size: 12px;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 30px;
}

.noSearchResults a,
.noSearchResults a:visited,
.noSearchResults a:hover,
.noSearchResults a:active {
    float:none !important
}


/* PAGINATION */

.paginate-pagination {
    margin: 50px 0 !important;
}

.paginate-pagination ul {
    list-style: none;
    margin: 0px;
    display: inline-block;
    line-height: 39px
}

.paginate-pagination ul:after {
    content: ' ';
    display: table;
    clear: both;
}

.paginate-pagination {
    text-align: center;
    clear: both;
}

.paginate-pagination ul li {
    display: inline-block;
}

.paginate-pagination ul li a,
.paginate-pagination ul li a:visited {
    border: none !important;
    color: #fff !important;
    padding: 12px 13px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    position: relative !important;
    bottom: 0px !important;
    border-radius: 0px !important;
    background-color: #25bcde !important;
}

.paginate-pagination ul li a.active,
.paginate-pagination ul li a:hover {
    background-color: #11a8ca !important;
}


/* SEARCH FILTER */
.fa-calendar {
    color: #fff !important;
}

.input-group-append {
    position: absolute !important;
    right: 0px !important;
    border: 0px !important;
}

.input-group-append .btn {
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
}

.gj-datepicker-bootstrap [role=right-icon] button {
    height: 42px !important;
}

.input-group>.input-group-append>.btn {
    border-radius: 0px !important;
}


/* PRICE SLIDER */
.slider {
    width: 100% !important;
}

#sliderOne .slider-selection,
#sliderTwo .slider-selection {
    background: #11a8ca;
}

#sliderOne .slider-handle,
#sliderTwo .slider-handle {
    background: #25bcde;
}

.minPriceWrap,
.maxPriceWrap {
    margin-top: 11px;
    padding: 0px 9px;
}

#minPriceDisplay,
#maxPriceDisplay 
{
    color: #cccccc !important;
}


/* ERROR PAGE 404 */
#errorWrap {
    background: rgb(37,188,222);
    background: linear-gradient(135deg, rgba(37,188,222,1) 10%, rgba(151,57,145,1) 80%);
    padding-top: 170px;
    padding-bottom: 100px;
}

#errorWrap .errorBox {
    background-color: #fff;
    padding: 40px 10px;
    text-align: center;
}

#errorWrap .errorBoxHeading {
    color: #25bcde;
    font-size: 120px;
    font-weight: bold;
    letter-spacing: 2px;
}

#errorWrap .errorBoxSubHeading {
    color: #343a40;
    font-size: 20px;
    font-weight: bold;
    margin-top: -20px;
}

#errorWrap .errorBoxMessage {
    color: #343a40;
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 60px;
}

#errorWrap .errorButton,
#errorWrap .errorButton:visited {
    border: none;
    border-radius: 25px;
    bottom: 20px;
    background-color: #25bcde;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 14px;
    position: relative;
    transition: background-color .3s ease-in-out;
}

#errorWrap .errorButton:hover,
#errorWrap .errorButton:active {
    background-color: #11a8ca;
    text-decoration: none;
    transition: background-color .3s ease-in-out;
}


/* PRODUCT PAGE EXTRAS*/
.productWrap {
    overflow: hidden;
}

.productWrap .table {
    margin-top: 20px;
}

.productWrap .table tr,
.productWrap .table td {
    font-size: 12px !important;
}


.expandArrow {
    text-align: center;
}

.expandArrow a,
.expandArrow a:visited {
    color: #000;
    text-decoration: none;
    font-size: 24px;
    text-align: center;
    display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.expandArrow a:hover,
.expandArrow a:active {
    color: #000;
    text-decoration: none;
    font-size: 24px;
    text-align: center;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
}

.expandArrow .lessContent:hover,
.expandArrow .lessContent:active {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

.travelingDates .input-group-append {
    position: absolute !important;
    top: 3px !important;
    border: 0px !important;
}

.travelingDates .input-group-append .btn {
    padding: 6px 12px !important;
}

.validationMessageProduct {
    color: red;
    font-size: 10px;
}


/* THANK YOU PAGE */
#thanksWrap {
    /*background: rgb(37,188,222);
    background: linear-gradient(135deg, rgba(37,188,222,1) 10%, rgba(151,57,145,1) 80%);
    padding-top: 170px;
    padding-bottom: 100px;
    margin-bottom: -70px;*/
}

#thanksWrap .thanksBox {
    background-color: #fff;
    padding: 40px 10px;
    text-align: center;
}

#thanksWrap .thanksBoxHeading {
    color: #25bcde;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 2px;
}

#thanksWrap .thanksBoxMessage {
    color: #343a40;
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 60px;
}

#thanksWrap .thanksButton,
#thanksWrap .thanksButton:visited {
    border: none;
    border-radius: 25px;
    bottom: 20px;
    background-color: #25bcde;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    padding: 6px 14px;
    position: relative;
    transition: background-color .3s ease-in-out;
}

#thanksWrap .thanksButton:hover,
#thanksWrap .thanksButton:active {
    background-color: #11a8ca;
    text-decoration: none;
    transition: background-color .3s ease-in-out;
}

.thanksButtonOne {
    float: right;
}

.thanksButtonTwo {
    float: left;
}


/* MEDIA QUERIES */
@media only screen and (max-width: 992px) {

    .hideMobile {
        display: none;
    }

    #topBar #navColumn .navbar {
        margin-top: 0px;
        padding: 0px;
    }

    #topBar #navColumn .navbar .navbar-toggler-icon {
        color: #343a40 !important;
    }

    #topBar #navColumn .navbar-toggler-icon {
        width: auto;
        height: auto;
    }

    #topBar #navColumn .navbar-brand .logo {
        width: 150px;
        padding: 6px 0px;
    }

    #headerBar,
    .searchBanner,
    .packageDetails {
        margin-top: 62px;
    }

    .navbar-toggler span {
        display: block;
        width: 25px;
        height: 2px;
        margin: 3px auto;
        background: #343a40;
        transition: all .6s cubic-bezier(0.250, 0.100, 0.250, 1.000);
        float: left;
        clear: left;
    }

        .navbar-toggler span:nth-child(2) {
            width: 20px !important;
        }

        .navbar-toggler span:nth-child(3) {
            width: 15px !important;
        }

    /* rotate first span */
    .navbar-toggler[aria-expanded="true"] span:first-of-type {
        transform: rotate(45deg) translate(6px, 6px);
    }

    /* hide second span */
    .navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
        opacity: 0;
    }

    /* rotate third span */
    .navbar-toggler[aria-expanded="true"] span:last-of-type {
        transform: rotate(-45deg) translate(5px, -5px);
        width: 25px !important;
    }

    .navbar-toggler[aria-expanded="false"] span {
        transform: none;
        opacity: 1;
    }

    .navbar-collapse {
        background-color: #fff;
        border-top: 5px solid #25bcde;
        border-right: 1px solid rgba(52, 58, 64, 0.1);
        position: fixed;
        top: 0px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 70%;
        height: 100%;
        z-index: 999;
    }

        .navbar-collapse.collapsing {
            left: -75%;
            transition: height 0s ease;
        }

        .navbar-collapse.show {
            left: 0;
            transition: left 300ms ease-in-out;
        }

    .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: left 500ms ease-in-out;
    }

    .navbar-collapse .navbar-nav {
        margin-top: 15px;
        margin-left: 15px;
    }

    #topBar #navColumn .navbar .navbar-collapse a,
    #topBar #navColumn .navbar .navbar-collapse a:visited {
        font-size: 14px;
        padding: 8px 5px !important;
    }

    #topBar #navColumn .navbar a:hover,
    #topBar #navColumn .navbar a:focus {
        opacity: 1;
    }

    #topBar #navColumn .navbar .active a {
        font-weight: 700 !important;
        opacity: 1;
    }

    .packageInfo .enquire .col-12,
    .packageInfo .enquire .col-md-12 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .packageTitle h5 {
        height: 65px !important;
    }
}

@media only screen and (max-width: 992px) and (min-width: 540px) {
    #searchTabs {
        padding: 0px;
        margin-top: 50px;
        margin-bottom: 60px;
    }

    #searchTabs #myTab img {
        margin-right: 0px !important;
        margin-bottom: 5px;
    }

    #searchTabs #myTab span {
        display: block;
    }

    .navbar-collapse {
        width: 40%;
    }
}

@media only screen and (max-width: 541px) {
    .packageInfo .pricingDisplay h5 {
        text-align: left !important;
    }

    #packageDescriptionHeadings .nav-item {
        width: 100% !important;
        border-left: 1px solid #ccc;
    }

    #searchTabs {
        margin-top: 0px !important;
        text-align: center;
    }

    #searchTabs .searchTabsFloater {
        box-shadow: none !important;
        padding: 0px !important;
    }

    #searchTabs #myTabContent {
        background-color: #ececec;
        padding: 25px 25px;
    }

    #searchTabs .nav-link img {
        margin-right: 0px !important;
    }

    #searchTabs .nav-link span {
        display: none;
    }

    #searchTabs .nav-tabs {
        border: none !important;
    }

    #searchTabs .nav-tabs .nav-item:last-child .nav-link {
        border-right: none !important;
        border-bottom: none !important;
    }

    #searchTabs .form-control {
        width: 100% !important;
    }

    #landingCarousel .w-100 {
        height: 500px;
        width: 100%;
    }

    .carousel-item img {
        object-fit: cover !important;
    }

    .filterSearch {
        margin-top: 0px;
    }

    #content .searchResults .sortBy {
        position: absolute;
        top: 30px;
        left: 15px;
    }

    #content #specialOffers h3 {
        margin-top: 130px;
        margin-bottom: -10px;
    }

    #content .searchResults .form-control {
        width: 100% !important;
    }

    .paginate-pagination ul li a,
    .paginate-pagination ul li a:visited {
        padding: 8px 9px !important;
    }

    #errorWrap {
        padding-top: 170px;
        padding-bottom: 100px;
    }

    #errorWrap .errorBox {
        padding: 40px 10px;
    }

    #errorWrap .errorBoxHeading {
        font-size: 70px;
    }

    #errorWrap .errorBoxSubHeading {
        font-size: 20px;
        margin-top: -10px;
    }

    #errorWrap .errorBoxMessage {
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 60px;
        padding: 0px 10px;
    }


    #thanksWrap {
        /*padding-top: 170px;
        padding-bottom: 100px;
        margin-bottom: -70px;*/
    }

    #thanksWrap .thanksBox {
        padding: 40px 10px;
    }

    #thanksWrap .thanksBoxHeading {
        font-size: 28px;
    }

    #thanksWrap .thanksBoxMessage {
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 60px;
        padding: 0px 10px;
    }

    .thanksButtonOne {
        float: none;
    }

    .thanksButtonOneWrap {
        margin-bottom: 30px;
    }

    .thanksButtonTwo {
        float: none;
    }

    #preFooter .contactDetails a:first-child {
        margin-bottom: 20px;
        margin-right: 0px !important
    }


}

