/*====================================================================================================================*/
/*   MCT WEB COLOR GUIDES                                                                                             */
/*   --------------------                                                                                             */
/*   red          :  cmyk 12 96 100 3   :  rgb 208 43 15    :  hex #d02b0f  :  ( primary red )                        */
/*   blue         :  cmyk 89 44 30 5    :  rgb 2 116 146    :  hex #027492  :  ( primary blue )                       */
/*   dark blue    :  cmyk 100 92 36 40  :  rgb 0 32 80      :  hex #002050  :  ( contrast blue )                      */
/*   green        :  cmyk 77 1 86 0     :  rgb 41 179 96    :  hex #29b360  :  ( call to action green )               */
/*   charcoal     :  cmyk 71 65 64 67   :  rgb 41 41 41     :  hex #292929  :  ( base grey )                          */
/*   light grey   :  cmyk 4 2 2 0       :  rgb 240 243 245  :  hex #f0f3f5  :  ( for contrast against white )         */
/*   border 100%  :  cmyk 52 35 31 1    :  rgb 132 147 158  :  hex #84939e  :  ( border original without opacity )    */
/*   border 30%   :  cmyk 13 8 7 0      :  rgb 218 222 226  :  hex #dadee2  :  ( border 30% of original )             */
/*====================================================================================================================*/
/*   FONT STYLES                                                                                                      */
/*   font-family: 'Open Sans', sans-serif;                                                                            */
/*   font-family: 'Nunito', sans-serif;                                                                               */
/*   font-family: 'Montserrat', sans-serif;                                                                           */
/*   font-family: 'Rubik', sans-serif;                                                                                */
/*   font-family: 'Playfair Display', serif;                                                                          */
/*   font-family: Georgia, serif; (not in use)                                                                        */
/*====================================================================================================================*/
/*   FONT COLOR GENERAL                                                                                               */
/*   color: #343F48;	                                                                                              */
/*====================================================================================================================*/
/*   FONT SIZES ( add the % method to html/body css )                                                                 */
/*   100% method: ( ???px / 16 = ???rem ) ( eg. 20 / 16 = 1.25rem )                                                   */
/*   62.5% method: ( 1.6rem is same as 16px )                                                                         */
/*====================================================================================================================*/



/*====================================================================================================================*/
/*                                                                                                                    */
/*   CONTENTS                                                                                                         */
/*                                                                                                                    */
/*   1. Responsive Fixed Width Grid...............................................(TIDIED AND RESPONSIVE)             */
/*   2. Responsive Fluid 90% Width Grid...........................................(TIDIED AND RESPONSIVE)             */
/*   3. Responsive Fluid 100% Width Grid..........................................(TIDIED AND RESPONSIVE)             */
/*   4. Page General                                                                                                  */
/*   4. Trip Overview.............................................................(TIDIED AND RESPONSIVE)             */
/*   4. What's Included...........................................................(PROBABLY NOT NEEDED)               */
/*   4. Trip Option...............................................................(IN PROGRESS)                       */
/*   4. Staff Pick - What Our Canada Experts Say..................................(IN PROGRESS)                       */
/*   4. Itinerary With Accordion..................................................(IN PROGRESS)                       */
/*   5. Page Header - Fullwidth...................................................(IN PROGRESS)                       */
/*   6. Page Footer...............................................................(TIDIED AND RESPONSIVE)             */
/*   7. Hero Video Homepage                                                                                           */
/*   7. Owl Carousel                                                                                                  */
/*   8. Introduction Page (general page intro) IF NOT IN USE THEN DELETE                                              */
/*   8. Hero Image - With Text (text aligned bottom left)                                                             */
/*   8. Hero Image - With Text (text aligned center center)                                                           */
/*   8. Hero Image - Collage Version..............................................(TIDIED AND RESPONSIVE)             */
/*   8. Hero Image - Media Buttons................................................(TIDIED AND RESPONSIVE)             */
/*   8. Intro Page (blue title, dark grey text, white background).................(NEEDS NO ADJUSTMENT)               */
/*   8. Intro Page (white title, white text, blue background).....................(NEEDS NO ADJUSTMENT)               */
/*   8. Intro Page - Details......................................................(TIDIED AND RESPONSIVE)             */
/*   8. Intro Page - Tooltip For Summary..........................................(NEEDS NO ADJUSTMENT)               */
/*   8. Intro Page - Breadcrumbs..................................................(NEEDS NO ADJUSTMENT)               */
/*   10. Welcome                                                                                                      */
/*   11. Register (Slim)..........................................................(IN PROGRESS)                       */
/*   11. Register (Big)                                                                                               */
/*   12. Photo Offers / Deals                                                                                         */
/*   13. Offers / Deals                                                                                               */
/*   14. Flex Tabs                                                                                                    */
/*   15. Sticky Flex Tabs                                                                                             */
/*   17. Search Results (NEW)                                                                                         */
/*   18. Search Details (NEW)                                                                                         */
/*   19. Cruise Line Details                                                                                          */
/*   20. Contact Us                                                                                                   */
/*   21. Speak To An Expert                                                                                           */
/*   22. Proposition Blocks                                                                                           */
/*   23. Tooltip (Stewart Travel Family)                                                                              */
/*   24. Information Plus Other General Classes Marty Added                                                           */
/*   25. Destination Tiles........................................................(TIDIED AND RESPONSIVE)             */
/*   26. Resorts                                                                                                      */
/*   28. Category Page Content                                                                                        */
/*   29. Tiles ( tilex1 single height / tilex2 double height / widths are controlled by the grid )                    */
/*                                                                                                                    */
/*====================================================================================================================*/

/* --------------------- COLOURS CS -----------------------------------*/

.call-expert div.propblock-box-enquire p a, .submit-newsletter-button input, div.brochure-request div.propblock-box a, div.submit-enquiry-button input, .search-result-price p.more-button a, a.go-call:link, a.go-call:visited, a.go-call:hover, a.go-call:active  {
    background-color: #339966;
}

.call-expert div.propblock-box-enquire p a:hover, .submit-newsletter-button input:hover, div.brochure-request div.propblock-box a:hover, div.submit-enquiry-button input:hover {
    background-color: #deb506;
}

div.dest-tile div.dest-tile-btn p {
    background-color: #477673;
}

.search-result-info div.itinerary svg, .search-result-info div.itinerary svg * {
    fill: #deb506;
}

.search-result-info .includes li, .search-result-info .includes svg {
   color: #477673;
   fill: #477673;
}

.modal-expert-box h3, .modal-enquiry-title h3 {
   color: #deb506;
}

.modal-enquiry-title svg path, .modal-enquiry-title svg circle, .modal-expert-box svg path, .modal-expert svg circle {
   fill: #477673;
}

.modal-enquiry-wrap a, .modal-enquiry-wrap .field-manual a {
    color: #477673;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

div.submit-enquiry-button input:hover, div.submit-enquiry-button input:focus {
    border: 1px solid #deb506;
}

.photo-offers .offer {
    border-bottom: solid 4px #deb506;
}

.search-result-price p.more-button a:hover {
    background-color: #deb506;
}

/* .search-sortby select, .search-filterby select, .search-page-x-of-x select, .search-pagination li:last-child a {
    background: #477673;
    color: #FFF;
} */

header div.mobile-menu a:active svg *, 
header div.mobile-menu a:hover svg *, {
  fill: #3d3d3b !important;
}

.expert-general-box, .expert-general span, .offer-summary-enquire-button a {
    background-color: #339966;
}

.expert-general p {
  color: #FFF;
}

.sticky-tab-links ul li a.sticky-tab-enquire {
  background: #396;
  border-bottom: solid 4px #396;
}

.accordion h3.accordion-toggle strong>svg {
 fill: #deb506;
}

.tick-list svg * {
 fill: #477673;
}

.sticky-tabs {
 background: #477673;
}



header div.mobile-menu a:active svg *, header div.mobile-menu a:focus svg *, header div.mobile-menu a:hover svg *, .menuopen a svg *, header div.phone-btn a:active svg *, header div.phone-btn a:focus svg *, header div.phone-btn a:hover svg * {
  fill: #477673 !important;
}

header div.mobile-menu a:link svg * {
  fill: #FFF;
}

.no-scroll header div.phone-btn a:link svg * {
  fill: #3d3d3b;
}

.text-snippet .more-button a, .trip-option .trip-option-btn a {
    background: #396;
}

.text-snippet .more-button a:hover, .text-snippet .more-button a:hover span:nth-child(2) {
    background: #deb506;
}

.owl-theme-pagebuilder .owl-nav [class*=owl-]:hover svg>* {
    fill: #3d3d3b;
}

div.intro-page-breadcrumbs-builder {
    background-color: #3d3d3b;
    margin: 0px;
    padding: 20px 0px 20px 0px;
}


h1, h2, h3, h4, h5, p {
    color: #3d3d3b;
}

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

    header div.header-menu nav > ul > li > a {

        color: #3d3d3b;

    }

    .no-scroll header div.mobile-menu, .no-scroll header div.phone-btn {
        border: 1px solid black;
    }

    .no-scroll header div.phone-btn a:link svg * {
      fill: black;
    }

    .no-scroll #header-logo-black {
        display: block;
    }

    .no-scroll #header-logo {
        display: none;
    }

}

#header-logo-black {
    display: none;
}


div.jackson-mississippi, #jackson-mississippi, #michigan-holidays {
    display: none !important;
}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   1. RESPONSIVE FIXED WIDTH GRID                                                                                   */
/*                                                                                                                    */
/*====================================================================================================================*/

/*== Responsive Fixed Width Grid 1200px + (for desktop) ==============================================================*/
.container-12 {margin: 0px auto; max-width: 1180px; padding: 0px 10px 0px 10px;}
.container-12 [class*='grid-'] {display: inline; float: left; margin: 0px 10px 20px 10px;}
.container-12 .grid-1 {width: 78.3px;}
.container-12 .grid-2 {width: 176.6px;}
.container-12 .grid-3 {width: 274.9px;}
.container-12 .grid-4 {width: 373.2px;}
.container-12 .grid-5 {width: 471.5px;}
.container-12 .grid-6 {width: 570px;}
.container-12 .grid-7 {width: 668.5px;}
.container-12 .grid-8 {width: 766.8px;}
.container-12 .grid-9 {width: 865.1px;}
.container-12 .grid-10 {width: 963.4px;}
.container-12 .grid-11 {width: 1061.7px;}
.container-12 .grid-12 {width: 1160px;}

/*== Responsive Fixed Width Grid 960px-1199px (for large tablet) =====================================================*/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
.container-12 {width: 960px;}
.container-12 .grid-1 {width: 60px;}
.container-12 .grid-2 {width: 140px;}
.container-12 .grid-3 {width: 220px;}
.container-12 .grid-4 {width: 300px;}
.container-12 .grid-5 {width: 380px;}
.container-12 .grid-6 {width: 460px;}
.container-12 .grid-7 {width: 540px;}
.container-12 .grid-8 {width: 620px;}
.container-12 .grid-9 {width: 700px;}
.container-12 .grid-10 {width: 780px;}
.container-12 .grid-11 {width: 860px;}
.container-12 .grid-12 {width: 940px;}
/* vvv To overide the original grid if a grid size change is necessary for large tablet vvv */
.container-12 .grid-1-tl {width: 60px;}
.container-12 .grid-2-tl {width: 140px;}
.container-12 .grid-3-tl {width: 220px;}
.container-12 .grid-4-tl {width: 300px;}
.container-12 .grid-5-tl {width: 380px;}
.container-12 .grid-6-tl {width: 460px;}
.container-12 .grid-7-tl {width: 540px;}
.container-12 .grid-8-tl {width: 620px;}
.container-12 .grid-9-tl {width: 700px;}
.container-12 .grid-10-tl {width: 780px;}
.container-12 .grid-11-tl {width: 860px;}
.container-12 .grid-12-tl {width: 940px;}
}

/*== Responsive Fixed Width Grid 720px-959px (for small tablet) ======================================================*/
@media only screen and (min-width: 720px) and (max-width: 959px) {
.container-12 {width: 720px;}
.container-12 .grid-1 {width: 40px;}
.container-12 .grid-2 {width: 100px;}
.container-12 .grid-3 {width: 160px;}
.container-12 .grid-4 {width: 220px;}
.container-12 .grid-5 {width: 280px;}
.container-12 .grid-6 {width: 340px;}
.container-12 .grid-7 {width: 400px;}
.container-12 .grid-8 {width: 460px;}
.container-12 .grid-9 {width: 520px;}
.container-12 .grid-10 {width: 580px;}
.container-12 .grid-11 {width: 640px;}
.container-12 .grid-12 {width: 700px;}
/* vvv To overide the original grid if a grid size change is necessary for small tablet vvv */
.container-12 .grid-1-ts {width: 40px;}
.container-12 .grid-2-ts {width: 100px;}
.container-12 .grid-3-ts {width: 160px;}
.container-12 .grid-4-ts {width: 220px;}
.container-12 .grid-5-ts {width: 280px;}
.container-12 .grid-6-ts {width: 340px;}
.container-12 .grid-7-ts {width: 400px;}
.container-12 .grid-8-ts {width: 460px;}
.container-12 .grid-9-ts {width: 520px;}
.container-12 .grid-10-ts {width: 580px;}
.container-12 .grid-11-ts {width: 640px;}
.container-12 .grid-12-ts {width: 700px;}
}

/*== Responsive Fixed Width Grid 0px-719px (for mobile) ==============================================================*/
@media only screen and (max-width: 719px) {
.container-12 {width: 90%;}
.container-12 [class*='grid-'] {width: 100%; margin-left: 0px; margin-right: 0px;}
}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   2. RESPONSIVE FLUID 90% WIDTH GRID                                                                               */
/*                                                                                                                    */
/*====================================================================================================================*/

.container-fluid90 {max-width: 90%; margin: 0 5%; padding: 0;}
.container-fluid90 [class*='grid-'] {box-sizing: border-box; float: left; margin: 0; padding: 10px; width: 100%; /*background-color: rgba(0,0,0,0.1); border: solid 1px #0000ff;*/}
.container-fluid90 .clear-grid {margin: 0; padding: 0; clear: both; float: inherit;}
.container-fluid90 .grid-12 {width: 100%;}
.container-fluid90 .grid-11 {width: 91.666663%;}
.container-fluid90 .grid-10 {width: 83.33%;}
.container-fluid90 .grid-9 {width: 74.999997%;}
.container-fluid90 .grid-8 {width: 66.66666664%;}
.container-fluid90 .grid-7 {width: 58.333%;}
.container-fluid90 .grid-6 {width: 50%;}
.container-fluid90 .grid-5 {width: 41.6665%;}
.container-fluid90 .grid-4 {width: 33.33%;}
.container-fluid90 .grid-3 {width: 24.99%;}
.container-fluid90 .grid-2 {width: 16.66666%;}
.container-fluid90 .grid-1 {width: 8.33%;}

/*== Responsive Fluid 90% Width Grid 0px-719px (for tablet) ==========================================================*/
@media only screen and (min-width: 720px) and (max-width: 959px) {
/* vvv To overide the original grid if a grid size change is necessary for small tablet vvv */
.container-fluid90 .grid-12-ts {width: 100%;}
.container-fluid90 .grid-11-ts {width: 91.666663%;}
.container-fluid90 .grid-10-ts {width: 83.33%;}
.container-fluid90 .grid-9-ts {width: 74.999997%;}
.container-fluid90 .grid-8-ts {width: 66.66666664%;}
.container-fluid90 .grid-7-ts {width: 58.333%;}
.container-fluid90 .grid-6-ts {width: 50%;}
.container-fluid90 .grid-5-ts {width: 41.6665%;}
.container-fluid90 .grid-4-ts {width: 33.33%;}
.container-fluid90 .grid-3-ts {width: 24.99%;}
.container-fluid90 .grid-2-ts {width: 16.66666%;}
.container-fluid90 .grid-1-ts {width: 8.33%;}
}

/*== Responsive Fluid 90% Width Grid 0px-719px (for mobile) ==========================================================*/
@media only screen and (max-width: 719px) {
.container-fluid90 {width: 90%;}
.container-fluid90 [class*='grid-'] {width: 100%; padding-left: 0px; padding-right: 0px;}
}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   3. RESPONSIVE FLUID 100% WIDTH GRID                                                                              */
/*                                                                                                                    */
/*====================================================================================================================*/

.container-fluid100 {max-width: 100%; margin: 0 0; padding: 0;}
.container-fluid100 [class*='grid-'] {box-sizing: border-box; float: left; margin: 0; padding: 15px 20px; width: 100%; /*background-color: rgba(0,0,0,0.1); border: solid 1px #0000ff;*/}
.container-fluid100 .clear-grid {margin: 0; padding: 0; clear: both; float: inherit;}
.container-fluid100 .grid-12 {width: 100%;}
.container-fluid100 .grid-11 {width: 91.666663%;}
.container-fluid100 .grid-10 {width: 83.33%;}
.container-fluid100 .grid-9 {width: 74.999997%;}
.container-fluid100 .grid-8 {width: 66.66666664%;}
.container-fluid100 .grid-7 {width: 58.333%;}
.container-fluid100 .grid-6 {width: 50%;}
.container-fluid100 .grid-5 {width: 41.6665%;}
.container-fluid100 .grid-4 {width: 33.33%;}
.container-fluid100 .grid-3 {width: 24.99%;}
.container-fluid100 .grid-2 {width: 16.66666%;}
.container-fluid100 .grid-1 {width: 8.33%;}

/*== Responsive Fluid 100% Width Grid 720px-959px (for tablet) =======================================================*/
@media only screen and (min-width: 720px) and (max-width: 959px) {
/* vvv To overide the original grid if a grid size change is necessary for small tablet vvv */
.container-fluid100 .grid-12-ts {width: 100%;}
.container-fluid100 .grid-11-ts {width: 91.666663%;}
.container-fluid100 .grid-10-ts {width: 83.33%;}
.container-fluid100 .grid-9-ts {width: 74.999997%;}
.container-fluid100 .grid-8-ts {width: 66.66666664%;}
.container-fluid100 .grid-7-ts {width: 58.333%;}
.container-fluid100 .grid-6-ts {width: 50%;}
.container-fluid100 .grid-5-ts {width: 41.6665%;}
.container-fluid100 .grid-4-ts {width: 33.33%;}
.container-fluid100 .grid-3-ts {width: 24.99%;}
.container-fluid100 .grid-2-ts {width: 16.66666%;}
.container-fluid100 .grid-1-ts {width: 8.33%;}
}

/*== Responsive Fluid 100% Width Grid 0px-719px (for mobile) =========================================================*/
@media only screen and (max-width: 719px) {
/*.container-fluid100 {width: 90%;}*/
.container-fluid100 [class*='grid-'] {width: 100%; padding-left: 0px; padding-right: 0px;}
}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   4. PAGE GENERAL                                                                                                  */
/*                                                                                                                    */
/*====================================================================================================================*/

html {font-size: 62.5%; /* set the base rem font size */}
body {margin: 0px; padding: 0px; font-family: 'Open Sans', sans-serif; font-size: 1.6rem; color: #000000; background-color: #ffffff;}
/*body.head-space {padding-top: 60px;}*//* for pages other than homepage when the transparent header over homepage hero image was in use, now no longer in use */
body.no-scroll {overflow: hidden;}

/*--- Corrects `block` display not defined in IE 8/9 ---------------*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display: block;}

/* are you using section??? if not then delete it */
section {width: 100%; padding: 20px 0px 20px 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3);}
section > h2 {font-size: 4.0rem; font-weight: 300; margin-bottom: 0px; color: #0e6b94;}

pre {overflow: hidden;}

/*--- Image Styles ---------------------------------------------------------------------------------------------------*/
img {border: none;}

/*--- Link Styles ----------------------------------------------------------------------------------------------------*/
a[href^=tel] {color: inherit; text-decoration: none;} /* Helps stop iOS from default styling phone numbers */

/*--- Text Styles ----------------------------------------------------------------------------------------------------*/
h1 {font-size: 4.0rem; font-weight: 300;}
h2 {font-size: 3.6rem; font-weight: 300;}
h3 {font-size: 2.4rem; font-weight: 400;}
h4 {font-size: 2.0rem; font-weight: 400;}
p {font-size: 1.6rem; font-weight: 400;}
ul, ol, dl {font-size: 1.6rem; font-weight: 400;}
th, td {font-size: 1.6rem; font-weight: 400;}
strong {font-weight: 600;}

/*--- Text Align -----------------------------------------------------------------------------------------------------*/
.align-left {text-align: left !important;}
.align-right {text-align: right !important;}
.align-center {text-align: center !important;}

/*--- Separate Content -----------------------------------------------------------------------------------------------*/
hr {margin: 50px 0px 40px 0px; padding: 0px; border: none; border-bottom: solid 1px rgba(132,147,158,0.3);}

/*--- Form Styles ----------------------------------------------------------------------------------------------------*/
form {margin: 0px; padding: 0px;}
label {font-size: 1.6rem;}
fieldset {border: 0px; margin: 0px; padding: 0px;}
input, select, textarea {font-family: 'Open Sans', sans-serif; font-size: 1.6rem; border: solid 1px #ced4d8; border-radius: 3px; background-color: #ffffff; padding: 10px 20px; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
input::-ms-expand, select::-ms-expand, textarea::-ms-expand {display: none;}
select {background: url('/images/select-field-arrow.png') right center no-repeat transparent; background-color: #ffffff; padding: 10px 50px 10px 20px;}
button {cursor: pointer; cursor: hand; color: #ffffff; font-size: 1.6rem; font-weight: 400; text-transform: uppercase; padding: 10px 20px; border: solid 1px #29b360; border-radius: 3px; background-color: #29b360; box-sizing: border-box; transition: all .3s ease;}
button:hover, button:focus {border: solid 1px #e87e28; background-color: #e87e28;}
button:focus {}
input[type="text"] {}
input[type="text"]:checked {}
input[type="radio"] {-webkit-appearance: radio;}
input[type="radio"]:checked {}
input[type="checkbox"] {-webkit-appearance: checkbox; -moz-appearance: checkbox; padding: 0px !important; width: 18px; height: 18px; position: relative; top: 1px;}
input[type="checkbox"]:checked {}
input[type="submit"] {cursor: pointer; cursor: hand; color: #ffffff; font-size: 1.6rem; font-weight: 400; text-transform: uppercase; border: solid 1px #29b360; background-color: #29b360; box-sizing: border-box; transition: all .3s ease;}
input[type="submit"]:hover, input[type="submit"]:focus {border: solid 1px #e87e28; background-color: #e87e28;}
input[type="submit"]:focus {}
input[type="reset"] {cursor: pointer; cursor: hand; color: #757575; font-size: 1.6rem; font-weight: 400; text-transform: uppercase; border: solid 1px #5c5c5c; background-color: #363636; box-sizing: border-box; transition: all .3s ease;}
input[type="reset"]:hover, input[type="reset"]:focus {color: #8f8f8f; border: solid 1px #757575; background-color: #424242;}
input[type="reset"]:focus {}
.svg-reset {display: block; border: solid 1px #019e6c; background-color: #292929; box-sizing: border-box; border-radius: 3px; padding: 10px 15px; cursor: pointer; cursor: hand; transition: all .3s ease;}
.svg-reset:hover {color: #8f8f8f; border: solid 1px #369095; background-color: #292929;}
.svg-reset input[type="reset"] {display: none !important;}
.svg-reset svg {width: 18px; height: 18px; position: relative; top: 2px;}
.svg-reset svg path {fill: #019e6c; transition: all .3s ease;}
.svg-reset:hover svg path {fill: #369095;}
.shift-label label {position: absolute; bottom: 100000px; left: 0px;}

/*--- Clear Fix ------------------------------------------------------------------------------------------------------*/
.clearfix {background: transparent; clear: both; font-size: 0em;}

/*--- Single Element Alignment ---------------------------------------------------------------------------------------*/
.left {float: left;}
.right {float: right;}

/*--- Giving a clickable div a pointer -------------------------------------------------------------------------------*/
.a-link, .modal-link, .js-link {cursor: pointer;}

/*--- Boxes ----------------------------------------------------------------------------------------------------------*/
.section20 {width: 100%; padding: 20px 0px 20px 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3);}
.section40 {width: 100%; padding: 40px 0px 40px 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3);}
.section-flex > div {display: flex; flex-wrap: wrap;} /* To allow divs which are contained in a wrapping div to stretch to 100% height of this container */

.fullwidth-bg-green {width: 100%; padding: 20px 0px 20px 0px; text-align: left; background-color: #29b360; color: #ffffff; border-bottom: none;}
.fullwidth-bg-dblue {width: 100%; padding: 20px 0px 20px 0px; text-align: left; background-color: #22335f; color: #ffffff; border-bottom: none;}
.fullwidth-bg-lblue {width: 100%; padding: 20px 0px 20px 0px; text-align: left; background-color: #25aae1; color: #ffffff; border-bottom: none;}
.fullwidth-bg-dgrey {width: 100%; padding: 20px 0px 20px 0px; text-align: left; background-color: #292929; color: #ffffff; border-bottom: none;}
.fullwidth-bg-lgrey {width: 100%; padding: 20px 0px 20px 0px; text-align: left; background-color: #f0f3f5; border-bottom: none;}
.fullwidth-bg-orange {width: 100%; padding: 20px 0px 20px 0px; text-align: left; background-color: #e87e28; color: #ffffff; border-bottom: none;}

.bg-green {background-color: #29b360; color: #ffffff; border-bottom: none;}
.bg-dblue {background-color: #22335f; color: #ffffff; border-bottom: none;}
.bg-lblue {background-color: #25aae1; color: #ffffff; border-bottom: none;}
.bg-dgrey {background-color: #292929; color: #ffffff; border-bottom: none;}
.bg-lgrey {background-color: #f0f3f5; border-bottom: none;}
.bg-orange {background-color: #e87e28; color: #ffffff; border-bottom: none;}

.search-details-flex > div {display: flex; flex-wrap: wrap;} /* To allow divs which are contained in a wrapping div to stretch to 100% height of this container */
.flex-group > div {display: flex; flex-wrap: wrap;} /* To allow divs which are contained in a wrapping div to stretch to 100% height of this container */

/*--- Buttons ------------------------------------------------------*/
.button-blue {display: inline-block; color: #ffffff; font-size: 1.4rem; font-weight: 400; background-color: #0e6b94; border-radius: 3px; padding: 10px 20px 10px 20px; text-align: center; text-decoration: none; text-transform: uppercase; transition: all .3s ease;}
.button-blue i {margin-left: 10px; font-size: 1.0rem; position: relative; top: -1px;}
.button-blue:hover {background-color: #094661;}

.button-ghost-light {display: inline-block; color: #ffffff; font-size: 1.4rem; font-weight: 400; background-color: rgba(255,255,255,0.1); border-radius: 3px; padding: 10px 20px 10px 20px; text-align: center; text-decoration: none; text-transform: uppercase; transition: all .3s ease;}
.button-ghost-light i {margin-left: 10px; font-size: 1.0rem; position: relative; top: -1px;}
.button-ghost-light:hover {background-color: #0e6b94;}

.button-ghost-dark {display: inline-block; color: #ffffff; font-size: 1.4rem; font-weight: 400; background-color: rgba(0,0,0,0.2); border-radius: 3px; padding: 10px 20px 10px 20px; text-align: center; text-decoration: none; text-transform: uppercase; transition: all .3s ease;}
.button-ghost-dark i {margin-left: 10px; font-size: 1.0rem; position: relative; top: -1px;}
.button-ghost-dark:hover {background-color: #0e6b94;}

/*--- Back To Top Scroll Button ------------------------------------*/
a.go-top {display: none; position: fixed; bottom: 20px; right: 20px; text-decoration: none; text-align: center; color: #ffffff; background-color: rgba(0,0,0,0.3); font-size: 1.6rem; padding: 10px 20px 15px 20px; border-radius: 3px;}
a.go-top:link, a.go-top:visited {background-color: rgba(0,0,0,0.3); color: #ffffff;}
a.go-top:hover, a.go-top:active {background-color: rgba(0,0,0,0.6); color: #ffffff;}

/*--- Scroll Call Button --------------------------------*/
a.go-call {display: none; position: fixed; bottom: 0px; /*left: 10px;*/ left: 0px; z-index: 9000; width: 100%; height: auto; text-decoration: none; text-align: center; color: #ffffff; background-color: #29b360; font-size: 1.6rem; padding: 15px; border-radius: 0%;}
a.go-call:link, a.go-call:visited, a.go-call:hover, a.go-call:active {background-color: #29b360; color: #ffffff;}
a.go-call svg {width: 18px; height: 18px; position: relative; top: 3px;}
a.go-call > svg {display: none;}
a.go-call path, a.go-call polygon, a.go-call circle, a.go-call square {fill: #ffffff;}
a.go-call span {margin-left: 10px;}
a.go-call span strong {font-weight: 600; font-size: 1.8rem;}

/*--- Responsive Youtube / iframe videos ---------------------------*/
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.videoWrapperBx {position: relative; /* 16:9 */ height: 300px; min-height: 300px;}
.videoWrapperBx iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/*--- Brochure Issuue Embed ----------------------------------------*/
.issuuembed {width: 100%; /*height: 600px;*/ height: 60vh; margin: 0px; padding: 20px 0px 0px 0px;}

/*--- LIVE Chat Takeover Attempt -----------------------------------*/
#srLaunchContainer {right: 20px !important; bottom: 20px !important; z-index: 9100 !important;}

/*--- Quotes ---*/
.staff-quote {margin-bottom: 20px;}
.staff-quote p {margin: 0px;}
blockquote {position: relative; margin: 0; padding: 30px 60px; font-size: 2.0rem; font-weight: 600; font-style: italic; color: #d02b0f; border-top: solid 1px #d02b0f; border-bottom: solid 1px #d02b0f;}
blockquote:before, blockquote:after {position: absolute; width: auto; height: 60px; padding: 0px 10px; font-size: 7.0rem; /*background-color: rgba(0,0,0,0.1);*/ font-style: normal; font-weight: 800; font-family: Helvetica, Arial, sans-serif;}
blockquote:before {top: 0; left: 0; content: "\201C"; /*content: "\00275d";*/ text-align: right; line-height: 118%;}
blockquote:after {bottom: 0; right: 0; content: "\201D"; /*content: "\00275e";*/ text-align: left; line-height: 104%;}

/*--- Extras for now ---*/
.staff-pick {background-color: rgba(2,116,146,0.2);}

.staff-pick .title {display: flex; padding: 10px 20px; background-color: #027492;}
.staff-pick .title .staff-photo {background-color: #ffffff; width: 50px; height: 50px; margin-right: 10px;}
.staff-pick .title h3 {margin: 0px; color: #ffffff;}
.staff-pick .title h3 span {display: block; font-size: 1.6rem; margin-top: 5px;}

.staff-pick .content {padding: 20px;}
.staff-pick .content h4 {color: #027492; font-size: 1.8rem; font-weight: 600;}
.staff-pick .content h4:first-of-type {margin-top: 0px;}
.staff-pick .content p:first-of-type {margin-top: 0px;}
.staff-pick .content p:last-of-type {margin-bottom: 0px;}

.dest-highlights {background-color: #fae2d6; padding: 0px 0px; margin-bottom: 20px;}
.dest-highlights h3 {color: #ffffff; margin: 0px; padding: 10px 20px; background-color: #d02b0f; border-bottom: solid 2px #ffffff;}
.dest-highlights h4 {color: #027492; font-size: 1.8rem; font-weight: 600; margin: 0px;}
.dest-highlights ul {list-style: none; margin: 0px; padding: 15px 20px 15px 37px;}
.dest-highlights ul li {margin-bottom: 10px; position: relative; background-color: rgba(0,0,0,0.0);}
.dest-highlights ul li:before {content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background-color: #d02b0f; position: absolute; top: 11px; left: -17px;}
.dest-highlights strong {display: block; color: #d02b0f; font-size: 2.0rem; font-weight: 400;}
.dest-highlights > div {padding: 15px 20px;}

.dest-map {margin-bottom: 20px;}
.dest-map img {width: 100%; height: auto;}

.tourist-attractions {list-style: none; margin: 0px; padding: 0px;}
.tourist-attractions li {box-sizing: border-box; height: 250px; position: relative; background: url("http://media.stewarttravel.co.uk/cruise/images/destination/dest-hpb-south-africa.jpg") center center no-repeat #000; background-size: cover;}
.tourist-attractions a {font-size: 1.8rem; font-weight: 800; margin: 0px; padding: 20px 20px; position: absolute; right: 0px; bottom: 0px; left: 0px; color: #ffffff; background-color: rgba(2,116,146,0.8); text-decoration: none; transition: padding .3s ease;}
.tourist-attractions a span {display: block; font-size: 1.2rem; font-weight: 600; color: rgba(255,255,255,0.7); text-transform: uppercase;}
.tourist-attractions li:hover a {padding-bottom: 30px;}

/* trialing new grid here */
.section-intro {padding: 40px 0px 0px 0px; /*border-bottom: solid 1px rgba(132,147,158,0.3);*/}
.section-intro h2:first-of-type {margin-top: 0px;}
.section-intro h2 {font-size: 5.0rem; font-weight: 800; margin-bottom: 0px; color: #292929; /*font-family: 'Playfair Display', serif;*/}
.section-intro h3 {font-size: 2.6rem; font-weight: 400; margin-bottom: 0px; color: #027492;}
.section-intro h2 + h3, .section-intro h2 + p, .section-intro h3 + p {margin-top: 10px;}
.section-intro p {column-count: 2; column-gap: 40px;}

/* trialing new grid here */
.welcome-to-canada {width: 100%; margin: 0px 0px 20px 0px; padding: 0px 0px 0px 0px; color: #21292e;}
.welcome-to-canada > div {display: flex; flex-wrap: wrap;} /* to maintain equal height on all boxes */
.welcome-to-canada > div > div {flex: 0 0 auto;} /* to stop the boxes width being controlled by flexbox */
.welcome-to-canada > div > .clear-grid {flex: 0 0 auto; width: 100%;}
.welcome-to-canada .canada-intro-txt {box-sizing: border-box; height: 100%; border-bottom: solid 4px rgba(132,147,158,0.3); margin-bottom: 20px;}
.welcome-to-canada .canada-intro-txt h3 {/*font-size: 3.6rem;*/ font-size: 3.0rem; font-weight: 800; margin-bottom: 0px; /*color: #027492;*/ color: #292929; /*font-family: 'Playfair Display', serif;*/}
.welcome-to-canada .canada-intro-txt h3 + p {margin-top: 10px;}
.welcome-to-canada .canada-intro-img {min-height: 300px;}

/* trialing new grid here */
.why-book-with-us {width: 100%; margin: 0px; padding: 40px 0px; /*color: #21292e;*/ color: #ffffff; background-color: #027492;}
.why-book-with-us > div {display: flex; flex-wrap: wrap;} /* to maintain equal height on all boxes */
.why-book-with-us > div > div {flex: 0 0 auto;} /* to stop the boxes width being controlled by flexbox */
.why-book-with-us > div > .clear-grid {flex: 0 0 auto; width: 100%;}
.why-book-with-us .title {}
.why-book-with-us .title h2 {margin: 0px; text-align: center; font-size: 3.6rem; font-weight: 600; /*font-family: 'Playfair Display', serif;*/}
.why-book-with-us .title h2:after {content: ''; display: block; width: 120px; height: 0px; margin: 20px auto 10px auto; border-bottom: solid 4px rgba(255,255,255,0.4);}
.why-book-with-us .section1 {box-sizing: border-box; height: 100%; text-align: center;}
.why-book-with-us .section1 div {display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 60px; height: 60px; margin: 0px auto 20px auto; padding: 0px; border-radius: 50%; background-color: #ffffff;}
.why-book-with-us .section1 div svg {flex: 0 0 auto; width: 30px; height: 30px;}
.why-book-with-us .section1 div svg * {fill: #027492;}
.why-book-with-us .section1 h3 {font-size: 2.6rem; font-weight: 600; margin: 0px; /*font-family: 'Playfair Display', serif;*/}
.why-book-with-us .section1 h3 + p {margin-top: 10px;}
.why-book-with-us .section2 {box-sizing: border-box; height: 100%; padding: 0px 20px 0px 75px; text-align: left; position: relative;}
.why-book-with-us .section2 div {display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 60px; height: 60px; position: absolute; top: 15px; left: 0px; margin: 0px auto 20px auto; padding: 0px; border-radius: 50%; background-color: rgba(255,255,255,0.1);}
.why-book-with-us .section2 div svg {flex: 0 0 auto; width: 30px; height: 30px;}
.why-book-with-us .section2 div svg * {fill: #ffffff;}
.why-book-with-us .section2 h3 {font-size: 2.4rem; font-weight: 400; margin: 10px 0px 0px 0px; /*font-family: 'Playfair Display', serif;*/}
.why-book-with-us .section2 h3 + p {margin-top: 10px;}

/* trialing new grid here */
.speak-to-us {padding: 20px 0px; /*border: solid 1px #0000ff;*/ border-bottom: solid 1px rgba(132,147,158,0.3);}
.speak-to-us-title {text-align: center; /*border: solid 1px #ff0000;*/}
.speak-to-us-title h2 {font-weight: 600; margin: 0px; /*border: solid 1px #00ff00;*/}
.speak-to-us-box {text-align: center; /*color: #ffffff;*/ /*padding: 20px 20px 20px 20px !important;*/ /*border: solid 1px #ff0000;*/ /*border-right: solid 1px rgba(132,147,158,0.3);*/}
/*.speak-to-us-box:nth-child(1) {background-color: rgba(2,116,146,0.7);}
.speak-to-us-box:nth-child(2) {background-color: rgba(2,116,146,0.8);}
.speak-to-us-box:nth-child(3) {background-color: rgba(2,116,146,0.9);}*/
.speak-to-us-box:nth-child(4) {/*background-color: rgba(2,116,146,1.0);*/ border-right: none;}
.speak-to-us-box h3 {text-transform: uppercase; font-size: 1.4rem; font-weight: 600; margin: 10px 0px 0px 0px;}
.speak-to-us-box p {font-size: 2.6rem; margin: 0px; /*font-family: 'Playfair Display', serif; font-weight: 600;*/}
.speak-to-us-box span svg {}
.speak-to-us-box svg {width: 40px; height: 40px;}
.speak-to-us-box svg * {/*fill: #ffffff;*/ fill: #292929;}

/* trialing new grid here */
.speak-to-us2 {width: 100%; margin: 0px; padding: 100px 0px 40px 0px; /*color: #21292e;*/ color: #ffffff; background-color: #027492;}
.speak-to-us2 > div {display: flex; flex-wrap: wrap;} /* to maintain equal height on all boxes */
.speak-to-us2 > div > div {flex: 0 0 auto;} /* to stop the boxes width being controlled by flexbox */
.speak-to-us2 > div > .clear-grid {flex: 0 0 auto; width: 100%;}
.speak-to-us2 .title {}
.speak-to-us2 .title h2 {margin: 0px; text-align: center; font-size: 3.6rem; font-weight: 800;}
.speak-to-us2 .title h2:after {content: ''; display: block; width: 120px; height: 0px; margin: 20px auto 10px auto; border-bottom: solid 4px rgba(255,255,255,0.4);}
.speak-to-us2 .section1 {box-sizing: border-box; height: 100%; text-align: center;}
.speak-to-us2 .section1 div {display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 60px; height: 60px; margin: 0px auto 15px auto; padding: 0px; border-radius: 50%; background-color: rgba(255,255,255,0.1);}
.speak-to-us2 .section1 div svg {flex: 0 0 auto; width: 30px; height: 30px;}
.speak-to-us2 .section1 div svg * {fill: #ffffff;}
.speak-to-us2 .section1 h3 {font-size: 1.4rem; font-weight: 600; margin: 0px; text-transform: uppercase;}
.speak-to-us2 .section1 h3 + p {font-size: 2.6rem; margin-top: 0px;}
.speak-to-us2 .section2 {box-sizing: border-box; height: 100%; padding-left: 75px; text-align: left; position: relative;}
.speak-to-us2 .section2 div {display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 60px; height: 60px; position: absolute; top: 15px; left: 0px; margin: 0px auto 20px auto; padding: 0px; border-radius: 50%; background-color: rgba(255,255,255,0.1);}
.speak-to-us2 .section2 div svg {flex: 0 0 auto; width: 30px; height: 30px;}
.speak-to-us2 .section2 div svg * {fill: #ffffff;}
.speak-to-us2 .section2 h3 {font-size: 1.4rem; font-weight: 300; margin: 10px 0px 0px 0px; text-transform: uppercase;}
.speak-to-us2 .section2 h3 + p {font-size: 2.2rem; font-weight: 400; margin-top: 0px;}

.details-fixed-summary {width: 200px; position: fixed; bottom: 20px; right: 20px; z-index: 10000; background-color: #ffffff; box-shadow: 0 0 8px rgba(0,0,0,0.5);}
.details-fixed-summary div.details-fixed-summary-img {height: 140px; box-sizing: border-box;}
.details-fixed-summary div.details-fixed-summary-txt {height: 170px; box-sizing: border-box; padding: 15px 20px;}
.details-fixed-summary div.details-fixed-summary-txt h2 {margin: 0px 0px; font-size: 1.4rem; font-weight: 600;}
.details-fixed-summary div.details-fixed-summary-txt p {margin: 10px 0px; font-size: 1.4rem;}
.details-fixed-summary div.details-fixed-summary-txt a {display: block; background-color: #29b360; font-size: 1.4rem; text-transform: uppercase; padding: 10px 20px; text-align: center; color: #ffffff; text-decoration: none; border-radius: 3px;}

.about-us-contact-details {box-sizing: border-box; padding: 30px; background-color: rgba(132,147,158,0.2);}
.about-us-contact-details h3 {/*font-family: 'Playfair Display', serif;*/ font-size: 2.4rem; font-weight: 800;}
.about-us-contact-details h3:first-of-type {margin-top: 0px;}
.about-us-contact-details p.about-us-opening-title {margin-bottom: 0px;}
.about-us-contact-details ul {list-style: none; margin: 0px; padding: 0px;}
.about-us-contact-details ul li {display: flex; padding: 4px 0px; border-bottom: dotted 1px rgba(0,0,0,0.3);}
.about-us-contact-details ul li span {flex: 0 0 auto; margin-left: auto;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   4. TRIP OVERVIEW                                                                                                 */
/*                                                                                                                    */
/*====================================================================================================================*/

.trip-overview-title {margin-bottom: 0px;}
.trip-overview-title h2 {margin-bottom: 0px; font-weight: 800;}

.trip-overview p:first-of-type {margin-top: 0px;}

.recommended-for h3 {font-size: 1.6rem; font-weight: 600;}
.recommended-for ul {display: flex; flex-wrap: wrap; list-style: none; margin: 0px; padding: 0px;}
.recommended-for ul li {flex: 0 0 auto; display: flex; justify-content: center; align-items: center; margin: 0px 20px 10px 0px; /*width: 40px; height: 40px;*/ width: 50px; height: 50px; border-radius: 50%; background-color: rgba(2,116,146,1.0);}
.recommended-for ul li svg {width: 25px; height: 25px;}
.recommended-for ul li svg * {fill: #ffffff; /*fill: #027492;*/}
.recommended-for ul li img {width: 30px; height: 30px;}
.recommended-for ul li.fly-drive {display: inline-block; position: relative;}
.recommended-for ul li.fly-drive img {width: 20px; height: 20px;}
.recommended-for ul li.fly-drive img:first-of-type {position: absolute; top: 8px; left: 8px;}
.recommended-for ul li.fly-drive img:last-of-type {position: absolute; bottom: 8px; right: 8px;}
.recommended-for ul li.tooltip[data-tooltip]::before {white-space: nowrap;}/* we don't want the text to wrap here */

.tick-list h3 {margin-top: 0px; padding-left: 40px; font-size: 1.8rem; font-weight: 700;}
.tick-list ul {list-style: none; margin: 0px; padding: 0px 0px 0px 40px; /*column-count: 2;*/}
.tick-list ul li {/*margin-bottom: 20px;*/ margin-bottom: 10px; padding-left: 40px; position: relative;}
.tick-list svg {width: 20px; height: 20px; position: absolute; top: 0px; left: 0px;}
.tick-list svg * {fill: #9CC1EC;}

/*== 4. TRIP OVERVIEW : Media Queries min-width 0px max-width 719px (Mobile) =========================================*/
@media only screen and (min-width: 0px) and (max-width: 719px) {

.tick-list h3 {padding-left: 0px;}
.tick-list ul {padding-left: 0px;}

}

/*====================================================================================================================*/
/*                                                                                                                    */
/*   4. WHAT'S INCLUDED (PROBABLY NOT NEEDED)                                                                         */
/*                                                                                                                    */
/*====================================================================================================================*/

.whats-included-title {margin-bottom: 0px; border: solid 1px #ff0000;}
.whats-included-title h2 {margin-bottom: 0px; font-weight: 800;}
.whats-included-flex {display: flex; clear: both;}
.whats-included.tick-list {flex: 1 1 auto; border: solid 1px #05BA32; box-sizing: border-box; padding: 20px; background-color: rgba(5,186,50,0.1);}
.whats-included.tick-list:nth-child(2) {border: solid 1px #c69a51; background-color: rgba(198,154,81,0.1);}
.whats-included.tick-list h3 {margin: 0px 0px 20px 0px; font-size: 2.2rem; font-weight: 600;}
.whats-included.tick-list ul {list-style: none; margin: 0px; padding: 0px 0px 0px 20px;}
.whats-included.tick-list ul li {margin-bottom: 20px; padding-left: 40px; position: relative;}
.whats-included.tick-list svg {width: 20px; height: 20px; position: absolute; top: 0px; left: 0px;}
.whats-included.tick-list svg * {fill: #d02b0f;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   4. TRIP OPTION                                                                                                   */
/*                                                                                                                    */
/*====================================================================================================================*/

.trip-option {display: flex;}
.trip-option div {flex: 0 0 auto;}
.trip-option div h2:first-of-type {font-weight: 800; margin: 0px;}

.trip-option .trip-option-img {}

.trip-option .trip-option-info {background-color: #ffffff; padding-top: 40px; padding-bottom: 40px;}

.trip-option .trip-option-logo {max-width: 150px; height: auto; margin-bottom: 20px;}

.trip-option .trip-option-btn a {display: inline-block; box-sizing: border-box; padding: 10px 20px; color: #ffffff; font-size: 1.4rem; font-weight: 600; background-color: green; text-align: center; text-transform: uppercase; text-decoration: none;}

/*== 4. STAFF PICK - WHAT OUR CANADA EXPERTS SAY : Media Queries min-width 0px max-width 719px (Mobile) ===========*/
@media only screen and (min-width: 0px) and (max-width: 719px) {

.trip-option {flex-direction: column;}

.trip-option .trip-option-img {height: 40vh;}

.trip-option .trip-option-info {width: 90%; margin-left: auto; margin-right: auto; /*these 3 added to line up the content with the fixed grid elements on mobile */}

.trip-option .trip-option-logo {display: block; max-width: 100px; margin: 0px auto 20px auto !important;}

.trip-option .trip-option-btn a {width: 100%;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   4. STAFF PICK - WHAT OUR CANADA EXPERTS SAY...                                                                   */
/*                                                                                                                    */
/*====================================================================================================================*/

.staff-pick3 {padding: 40px 0px;}

.staff-pick3 .staff-pick3-title {box-sizing: border-box; padding: 0px;}
.staff-pick3 .staff-pick3-title h2 {margin: 0px; font-weight: 800;}

.staff-pick3 .staff-pick3-info {}
.staff-pick3 .staff-pick3-info > div {margin-bottom: 0px;}
.staff-pick3 h3 {margin: 0px; color: #027492; padding-bottom: 0px;}
.staff-pick3 h3 span {display: block; font-size: 1.6rem; color: #343f48; font-weight: 600;}

.staff-pick3 .staff-pick3-photo {}
.staff-pick3 .staff-pick3-photo > img {min-width: 80%; height: auto; border-radius: 50%; border: solid 6px rgba(132,147,158,0.3); box-sizing: border-box;}

/*== 4. STAFF PICK - WHAT OUR CANADA EXPERTS SAY : Media Queries min-width 0px max-width 719px (Mobile) ==============*/
@media only screen and (min-width: 0px) and (max-width: 719px) {

.staff-pick3 h3 {margin: 0px; color: #027492; padding: 10px 0px 10px 100px;}

.staff-pick3 .staff-pick3-photo {position: relative;}
.staff-pick3 .staff-pick3-photo > img {width: 80px; min-width: 80px; height: auto; border-radius: 50%; border: solid 6px rgba(132,147,158,0.3); position: absolute; top: 0px; left: 0px;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   4. ITINERARY WITH ACCORDION                                                                                      */
/*                                                                                                                    */
/*====================================================================================================================*/

.details-itinerary {display: flex; align-items: stretch;}
.accordion {flex: 0 0 auto; position: relative; height: 60vh; overflow: auto;}
.accordion h2 {font-weight: 800;}
.accordion .accordion-all {display: inline-block; margin: 0px; position: absolute; top: 50px; right: 20px;}
.accordion .accordion-all a {display: inline-block; box-sizing: border-box; padding: 5px 20px; border: solid 2px rgba(132,147,158,0.3); border-radius: 20px; text-decoration: none; font-size: 1.4rem; font-weight: 600; color: #027492; transition: all .3s ease;}
.accordion .accordion-all a:hover {}
.accordion .accordion-all a.btn-swap {display: none;}
.accordion .show-all {}
.accordion .hide-all {}

.accordion-map {flex: 0 0 auto; display: flex; justify-content: center; align-items: stretch; padding: 0px !important; height: 60vh;}
/*.accordion-map.stickymap-scrolled {position: fixed; top: 60px; right: 0px; z-index: 100000;}*/
.accordion-map img {flex: 0 0 auto; width: auto; height: 100%;}

.accordion-timeline-wrap {position: relative;}
.accordion-timeline-wrap:before {content: ''; border-left: dotted 2px rgba(132,147,158,0.3); position: absolute; top: 5px; bottom: 5px; left: 6px;}

.accordion h3.accordion-toggle {margin: 0px; padding: 15px 0px 15px 0px; font-size: 1.6rem; cursor: pointer; position: relative;}
.accordion h3.accordion-toggle:before {content: ''; border-top: solid 1px rgba(132,147,158,0.3); position: absolute; top: 0px ; left: 24px; right: 0px;}
.accordion h3.accordion-toggle:first-of-type {padding-top: 0px;}
.accordion h3.accordion-toggle:first-of-type:before {border-top: none;}
.accordion h3.accordion-toggle:last-of-type {padding-bottom: 0px;}
.accordion h3.accordion-toggle strong {display: inline-block; position: relative; margin-left: 24px; display: inline-block;}
.accordion h3.accordion-toggle strong > svg {width: 20px; height: 20px; fill: #9CC1EC; position: absolute; top: 3px; left: -27px; background-color: #ffffff;}
.accordion h3.accordion-toggle span {padding: 0px 10px; display: inline-block; padding-left: 10px;}
.accordion h3.accordion-toggle > svg {width: 12px; height: 12px; margin: 8px 0px 0px 20px; transition: all .5s ease; transform: rotate(0deg); position: absolute; top: 12px; right: 0px;}
.accordion h3.accordion-toggle:first-of-type > svg {width: 12px; height: 12px; margin: 8px 0px 0px 20px; transition: all .5s ease; transform: rotate(0deg); position: absolute; top: -3px; right: 0px;}
.accordion h3.accordion-toggle.selected > svg {transform: rotate(180deg);}

.accordion .accordion-panel {padding: 0px 0px 15px 24px;}
.accordion .accordion-panel > p:first-of-type {margin-top: 0px;}

.accordion p.itin-location {margin: 0px 0px 20px 0px; font-size: 1.4rem;}
.accordion p.itin-location svg {width: 14px; height: 14px; margin-right: 4px; position: relative; top: 1px;}
.accordion p.itin-location svg * {fill: #292929;}

.accordion .itin-info {display: flex;}
.accordion .itin-info div {flex: 1 1 50%; min-height: 150px; padding-left: 20px; position: relative;}
.accordion .itin-info div a {display: inline-block; box-sizing: border-box; position: absolute; top: 0px; left: 0px; padding: 5px 20px 5px 15px; color: #ffffff; text-transform: uppercase; text-decoration: none; font-size: 1.4rem; font-weight: 600; background-color: #027492;}
.accordion .itin-info div a svg {width: 12px; height: 12px; margin-right: 4px; position: relative; top: 1px;}
.accordion .itin-info div a svg * {fill: #ffffff;}
.accordion .itin-info div p:first-of-type {margin-top: 0px;}

.accordion .itin-stay {display: flex; flex-wrap: wrap; margin-top: 20px;}
.accordion p.itin-stay-title {flex: none; width: 100%; margin: 0px 0px 10px 0px;}
.accordion .itin-stay-option {flex: 1 1 33.3333%; display: flex; flex-direction: column; box-sizing: border-box; max-width: 33.3333%; padding: 10px 10px 0px 0px;}
.accordion .itin-stay-option div {flex: 0 0 auto; height: 80px;}
.accordion .itin-stay-option p {flex: 1 0 auto; font-size: 1.3rem; font-weight: 600; margin: 0px; padding: 10px 10px; background-color: rgba(0,0,0,0.1);}
.accordion .itin-stay-option p a {color: #343f48; text-decoration: none;}

/*== 4. ITINERARY WITH ACCORDION : Media Queries min-width 0px max-width 1200px (Small Desktop) ======================*/
@media only screen and (max-width: 1200px) {

.accordion .itin-stay-option {flex: 1 1 50%; max-width: 50%;}

}

/*== 4. ITINERARY WITH ACCORDION : Media Queries min-width 0px max-width 719px (Mobile) ==============================*/
@media only screen and (max-width: 719px) {

.details-itinerary {flex-direction: column;}

.details-itinerary .accordion {order: 2; width: 90%; height: auto; margin-left: auto; margin-right: auto; overflow: visible;}
.details-itinerary .accordion .accordion-all {right: 0px;}

.details-itinerary .accordion-map {order: 1; height: 40vh;}

}

/*== 4. ITINERARY WITH ACCORDION : Media Queries min-width 0px max-width 380px (Small Mobile) ========================*/
@media only screen and (max-width: 380px) {

.accordion h2 {margin-bottom: 20px;}
.accordion .accordion-all {display: block; margin-bottom: 20px; position: static;}
.accordion .accordion-all a {display: block; width: 100%; text-align: center;}

}



/*====================================================================================================================*/
/*                                                                                                                    */
/*   4. ITINERARY WITH ACCORDION 2 (SCROLLING VERSION)                                                                */
/*                                                                                                                    */
/*====================================================================================================================*/

.accordion-map2-end {/*border: solid 1px #ff0000;*/ width: 100%;}

.details-itinerary2 {display: flex; align-items: stretch; /*border: solid 1px #ff0000;*/ position: relative;}
.accordion.accordion2 {flex: 0 0 auto; position: relative; height: auto; overflow: visible; /*border: solid 1px #00ff00;*/}
.accordion2 h2 {font-weight: 800;}
.accordion2 .accordion-all {display: inline-block; margin: 0px; position: absolute; top: 50px; right: 20px;}
.accordion2 .accordion-all a {display: inline-block; box-sizing: border-box; padding: 5px 20px; border: solid 2px rgba(132,147,158,0.3); border-radius: 20px; text-decoration: none; font-size: 1.4rem; font-weight: 600; color: #027492; transition: all .3s ease;}
.accordion2 .accordion-all a:hover {}
.accordion2 .accordion-all a.btn-swap {display: none;}
.accordion2 .show-all {}
.accordion2 .hide-all {}

.accordion-map2 {flex: 0 0 auto; display: flex; justify-content: center; align-items: stretch; padding: 0px !important; /*height: 60vh;*/ height: calc(100vh - 60px); /*border: solid 1px #0000ff;*/}
.accordion-map2.stickymap-scrolled {position: fixed; top: 60px; right: 0px; z-index: 9999;}
.accordion-map2.stickymap-absolute {position: absolute !important; top: auto !important; bottom: 0px !important; right: 0px !important; z-index: 9999;}
.accordion-map2 img {flex: 0 0 auto; width: auto; height: 100%;}

.accordion-timeline-wrap {position: relative;}
.accordion-timeline-wrap:before {content: ''; border-left: dotted 2px rgba(132,147,158,0.3); position: absolute; top: 5px; bottom: 5px; left: 6px;}

.accordion2 h3.accordion-toggle {margin: 0px; padding: 15px 0px 15px 0px; font-size: 1.6rem; cursor: pointer; position: relative;}
.accordion2 h3.accordion-toggle:before {content: ''; border-top: solid 1px rgba(132,147,158,0.3); position: absolute; top: 0px ; left: 24px; right: 0px;}
.accordion2 h3.accordion-toggle:first-of-type {padding-top: 0px;}
.accordion2 h3.accordion-toggle:first-of-type:before {border-top: none;}
.accordion2 h3.accordion-toggle:last-of-type {padding-bottom: 0px;}
.accordion2 h3.accordion-toggle strong {display: inline-block; position: relative; margin-left: 24px; display: inline-block;}
.accordion2 h3.accordion-toggle strong > svg {width: 20px; height: 20px; fill: #027492; position: absolute; top: 3px; left: -27px; background-color: #ffffff;}
.accordion2 h3.accordion-toggle span {padding: 0px 10px; display: inline-block; padding-left: 10px;}
.accordion2 h3.accordion-toggle > svg {width: 12px; height: 12px; margin: 8px 0px 0px 20px; transition: all .5s ease; transform: rotate(0deg); position: absolute; top: 12px; right: 0px;}
.accordion2 h3.accordion-toggle:first-of-type > svg {width: 12px; height: 12px; margin: 8px 0px 0px 20px; transition: all .5s ease; transform: rotate(0deg); position: absolute; top: -3px; right: 0px;}
.accordion2 h3.accordion-toggle.selected > svg {transform: rotate(180deg);}

.accordion2 .accordion-panel {padding: 0px 0px 15px 24px;}
.accordion2 .accordion-panel > p:first-of-type {margin-top: 0px;}

.accordion2 p.itin-location {margin: 0px 0px 20px 0px; font-size: 1.4rem;}
.accordion2 p.itin-location svg {width: 14px; height: 14px; margin-right: 4px; position: relative; top: 1px;}
.accordion2 p.itin-location svg * {fill: #292929;}

.accordion2 .itin-info {display: flex;}
.accordion2 .itin-info div {flex: 1 1 50%; min-height: 150px; padding-left: 20px; position: relative;}
.accordion2 .itin-info div a {display: inline-block; box-sizing: border-box; position: absolute; top: 0px; left: 0px; padding: 5px 20px 5px 15px; color: #ffffff; text-transform: uppercase; text-decoration: none; font-size: 1.4rem; font-weight: 600; background-color: #027492;}
.accordion2 .itin-info div a svg {width: 12px; height: 12px; margin-right: 4px; position: relative; top: 1px;}
.accordion2 .itin-info div a svg * {fill: #ffffff;}
.accordion2 .itin-info div p:first-of-type {margin-top: 0px;}

.accordion2 .itin-stay {display: flex; flex-wrap: wrap; margin-top: 20px;}
.accordion2 p.itin-stay-title {flex: none; width: 100%; margin: 0px 0px 10px 0px;}
.accordion2 .itin-stay-option {flex: 1 1 33.3333%; display: flex; flex-direction: column; box-sizing: border-box; max-width: 33.3333%; padding: 10px 10px 0px 0px;}
.accordion2 .itin-stay-option div {flex: 0 0 auto; height: 80px;}
.accordion2 .itin-stay-option p {flex: 1 0 auto; font-size: 1.3rem; font-weight: 600; margin: 0px; padding: 10px 10px; background-color: rgba(0,0,0,0.1);}
.accordion2 .itin-stay-option p a {color: #343f48; text-decoration: none;}

/*== 4. ITINERARY WITH ACCORDION : Media Queries min-width 0px max-width 1200px (Small Desktop) ======================*/
@media only screen and (max-width: 1200px) {

.accordion2 .itin-stay-option {flex: 1 1 50%; max-width: 50%;}

}

/*== 4. ITINERARY WITH ACCORDION : Media Queries min-width 0px max-width 719px (Mobile) ==============================*/
@media only screen and (max-width: 719px) {

.details-itinerary2 {flex-direction: column;}

.details-itinerary2 .accordion2 {order: 2; width: 90%; height: auto; margin-left: auto; margin-right: auto; overflow: visible;}
.details-itinerary2 .accordion2 .accordion-all {right: 0px;}

.details-itinerary2 .accordion-map2 {order: 1; height: 40vh;}
.details-itinerary2 .accordion-map2.stickymap-scrolled {position: static; top: 0px; right: 0px;}
.details-itinerary2 .accordion-map2.stickymap-absolute {position: static !important; top: 0px !important; bottom: 0px !important; right: 0px !important;}

}

/*== 4. ITINERARY WITH ACCORDION : Media Queries min-width 0px max-width 380px (Small Mobile) ========================*/
@media only screen and (max-width: 380px) {

.accordion2 h2 {margin-bottom: 20px;}
.accordion2 .accordion-all {display: block; margin-bottom: 20px; position: static;}
.accordion2 .accordion-all a {display: block; width: 100%; text-align: center;}

}



/*====================================================================================================================*/
/*                                                                                                                    */
/*   5. PAGE HEADER - FULLWIDTH                                                                                       */
/*                                                                                                                    */
/*====================================================================================================================*/

/*.sticky {} not in use */
/*.sticky-header {} used on sticky header and secondary nav in js */
.sticky-scrolled {position: fixed; top: 0; left: 0; width: 100%; z-index: 100000;} /* used on sticky header and secondary nav in js */

/*--- Header Containers / Wraps ---------------------------------------------*/
header {box-sizing: border-box; width: 100%; height: auto; margin: 0px; padding: 0px; /*position: fixed; top: 0px; left: 0px;*/ z-index: 10000; background-color: #deb506; /*background-color: rgba(0,32,80,0.4);*/ /* background-color: #d02b0f; */ /*border-bottom: solid 1px rgba(255,255,255,0.4);*/ transition: background-color .3s ease, height .3s ease;}
header.sticky-scrolled {background-color: rgba(255,255,255,1.0); height: 60px; border-bottom: solid 1px rgba(132,147,158,0.3);}/* when scrolled changes the header background to white */
header.sticky-stop {height: 60px;}
header [class*='grid-'] {/*border: solid 1px #00ff00;*/ padding-top: 0px !important; padding-bottom: 0px !important;}

header .header {box-sizing: border-box; display: flex; justify-content: space-around; align-items: center; height: 100%; /*padding: 0px 20px;*/ /*position: relative;*/}

/*--- Logo ---------------------------------------------*/
header .header-logo {flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; box-sizing: border-box; margin: 0px 20px 0px 0px; /*padding: 0px 20px;*/ /*border: solid 1px #ff0000;*/}
header .header-logo h2 {margin: 0px; padding: 0px; line-height: 0px;}
header .header-logo h2 a {color: #ffffff; text-decoration: none;}
header .header-logo svg {/*width: 200px; height: 60px;*/ width: 250px; /*height: 70px;*/ /*margin: 5px 0px;*/ margin: 10px 0px; transition: width .3s ease, height .3s ease;}
/* header .header-logo svg * {fill: #ffffff;} */
header.sticky-scrolled .header-logo svg {width: 134px; height: 40px;}
header.sticky-scrolled .header-logo svg * {fill: #cc0000;}
header.sticky-stop .header-logo svg {width: 134px; height: 40px;}

/*--- Phone ---------------------------------------------*/

header .header-phone {flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; margin: 0px 0px 0px 20px; /*padding: 0px 20px;*/ text-align: right; color: #FFF; /*border: solid 1px #ff0000;*/}
header .header-phone p {flex: 0 0 auto; margin: 0px; font-size: 1.6rem; line-height: 1.6rem; color: #FFF; /*position: relative;*/}
header .header-phone span.header-phone-call {display: inline-block; padding-left: 28px; font-size: 1.4rem; font-weight: 600; text-transform: uppercase; /*text-align: left;*/ text-align: right; position: relative; /*border: solid 1px #00ff00;*/}
header .header-phone span.header-phone-call strong {display: block; font-size: 2.4rem; margin-top: 5px;}
header .header-phone span.header-phone-call svg {/*display: none;*/ width: 20px; height: 20px; position: absolute; bottom: -2px; left: 0px;}
header .header-phone span.header-phone-call svg * {fill: #ffffff;}
header .header-phone span.header-phone-times {display: block; font-size: 1.3rem; margin-top: 5px; /*border: solid 1px #0000ff;*/}
header.sticky-scrolled .header-phone {color: #027492;}
header.sticky-scrolled .header-phone span.header-phone-call {padding-left: 24px;}
header.sticky-scrolled .header-phone span.header-phone-call span {display: none;}
header.sticky-scrolled .header-phone span.header-phone-call strong {font-size: 1.8rem;}
header.sticky-scrolled .header-phone span.header-phone-call svg {width: 16px; height: 16px; position: absolute; bottom: 0px; left: 0px;}
header.sticky-scrolled .header-phone span.header-phone-call svg * {fill: rgba(0,0,0,0.3);}
header.sticky-scrolled .header-phone span.header-phone-times {display: none;}

/*header .header-phone {flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; margin: 0px; padding: 0px 20px; text-align: right; color: #ffffff; border: solid 1px #ff0000;}
header.sticky-scrolled .header-phone {color: #027492;}
header .header-phone p {flex: 0 0 auto; margin: 0px; font-size: 1.6rem; line-height: 1.6rem; position: relative;}
header.sticky-scrolled .header-phone p {padding-left: 24px; font-size: 1.4rem; font-weight: 600; text-transform: uppercase;}
header .header-phone p strong {font-size: 2.4rem; font-weight: 600;}
header.sticky-scrolled .header-phone p strong {font-size: 1.8rem;}
header .header-phone p svg {display: none; width: 16px; height: 16px; position: absolute; top: 0px; left: 0px;}
header.sticky-scrolled .header-phone p svg {display: inline;}
header .header-phone p svg * {fill: #ffffff;}
header.sticky-scrolled .header-phone p svg * {fill: rgba(0,0,0,0.3);}
header .header-phone span {display: block; font-size: 1.4rem; font-weight: 600; text-transform: uppercase; margin-bottom: 5px;}
header .header-phone span.header-phone-times {display: block; font-size: 1.3rem; text-transform: none; color: rgba(255,255,255,0.8); margin-top: 5px;}
header.sticky-scrolled .header-phone span {display: none;}*/

/*--- Navigation ---------------------------------------------*/
header .header-menu {flex: 0 0 auto; align-self: stretch; display: flex; margin: 0px; /*margin: 0px 0px 0px auto;*/ /*border: solid 1px #ff0000;*/ /*position: relative;*/}
header .header-menu nav > ul {flex: 0 0 auto; display: flex; height: 100%; list-style: none; margin: 0px; padding: 0px;}
header .header-menu nav > ul > li {flex: 0 0 auto; display: flex; margin: 0px; padding: 0px; float: left;}
header .header-menu nav > ul > li > a {flex: 0 0 auto; display: flex; align-items: center; text-transform: uppercase; text-decoration: none; font-size: 1.4rem; font-weight: 600; color: #FFF; /*height: 100px;*/ padding: 0px 25px; transition: background .3s ease;}
header.sticky-scrolled .header-menu nav > ul > li > a {color: #027492; height: 60px;}
header .header-menu nav > ul > li:hover > a {background-color: rgba(255,255,255,1.0); color: #3d3d3b;} /*putting the hover on the li instead of the a allows the menu button to stay highlighted when the cursor is over the dropdown panel*/
/*header.sticky-scrolled .header-menu nav > ul > li > a:hover {background-color: rgba(0,0,0,0.04); color: #cc0000;}*/
header.sticky-scrolled .header-menu nav > ul > li:hover > a {background-color: rgba(0,0,0,0.04); color: #cc0000;}

header .header-menu nav > ul > li.desk-nav-search {flex: 0 0 auto; display: flex; margin: 0px; padding: 0px; float: left;}
header .header-menu nav > ul > li.desk-nav-search > a {flex: 0 0 auto; display: flex; align-items: center; text-transform: uppercase; text-decoration: none; font-size: 1.4rem; font-weight: 600; color: #ffffff; /*height: 100px;*/ padding: 0px 25px; transition: background .3s ease;}
header.sticky-scrolled .header-menu nav > ul > li.desk-nav-search > a {color: #027492; height: 60px;}
header .header-menu nav > ul > li.desk-nav-search:hover > a {background-color: rgba(255,255,255,0.0);} /*putting the hover on the li instead of the a allows the menu button to stay highlighted when the cursor is over the dropdown panel*/
header.sticky-scrolled .header-menu nav > ul > li.desk-nav-search:hover > a {background-color: rgba(0,0,0,0.0);}

header .header-menu nav > ul > li.desk-nav-search a svg {
    position: relative;
	top:2px;
	width: 15px;
    height: 15px;
	margin-right: 10px;
    transition: all .3s ease;
    fill: #ffffff;
}


/*--- Dropdowns ---------------------------------------------*/
header .header-menu li.dropdown-fullwidth {}
header .header-menu li.dropdown-fullwidth .dropdown {display: none; position: absolute; top: 70px; left: 0px; z-index: 20000; width: 100%; box-sizing: border-box; padding: 0px; background-color: #ffffff; border: solid 1px rgba(132,147,158,0.3); border-top: 0px;}
header.sticky-scrolled .header-menu li.dropdown-fullwidth .dropdown {position: absolute; top: 60px; left: 0px;}
header .header-menu li:hover.dropdown-fullwidth .dropdown {display: block;}

header .dropdown-fullwidth .container-12 {padding-top: 20px;}
header .dropdown-provinces {box-sizing: border-box; background-color: rgba(132,147,158,0.2); padding: 15px 20px;}
header .dropdown-cities {box-sizing: border-box; padding: 15px 20px;}
header .dropdown-cities ul {column-count: 4; column-gap: 20px;}
header .dropdown-provinces h3, header .dropdown-cities h3 {margin: 0px 0px 10px 0px; padding-bottom: 5px; border-bottom: solid 4px rgba(132,147,158,0.3); font-size: 1.6rem; text-transform: uppercase; font-weight: 600;}
header .dropdown-fullwidth ul {list-style: none; margin: 0px; padding: 0px;}
header .dropdown-fullwidth ul li {}
header .dropdown-cities ul li.all-cities {column-span: all;}
header .dropdown-cities ul li.all-cities a {box-sizing: border-box; width: 100%; border: solid 1px #027492; background-color: #027492; color: #ffffff; margin-top: 20px; padding: 10px 20px; text-align: center; transition: all .3s ease;}
header .dropdown-cities ul li.all-cities a:hover {background-color: #ffffff; color: #027492;}
header .dropdown-provinces a, header .dropdown-cities a {display: inline-block; text-decoration: none; padding: 5px 0px; text-transform: uppercase; font-size: 1.4rem; color: #292929;}
header .dropdown-provinces a:hover, header .dropdown-cities a:hover {color: #027492;}

header .dropdown-holidaytypes {padding: 30px 0px 15px 0px;}
header .dropdown-holidaytypes ul {display: flex;}
header .dropdown-holidaytypes ul li {flex: 1 1 10%; text-align: center;}
header .dropdown-holidaytypes ul li a {display: inline-block; font-weight: 400; color: #292929; font-size: 1.4rem; text-decoration: none; text-transform: uppercase; transition: all .3s ease;}
header .dropdown-holidaytypes ul li a:hover {color: #027492;}
header .dropdown-holidaytypes ul li a span {display: block; width: 120px; height: 120px; box-sizing: border-box; margin: 0px auto 20px auto; border-radius: 50%; position: relative;}
header .dropdown-holidaytypes ul li a span:before {content: ''; display: block; width: 132px; height: 132px; box-sizing: border-box; border-radius: 50%; border: solid 6px rgba(132,147,158,0.3); position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; transition: all .3s ease;}
header .dropdown-holidaytypes ul li a:hover span:before {border: solid 6px #027492;}

header .header-device-btns {flex: 0 0 auto; align-self: stretch; display: flex; margin: 0px 0px 0px auto; /*border: solid 1px #ff0000;*/}

/*--- Phone Button -------------------------------------------------*/
header div.phone-btn {display: none; flex: 0 0 auto; align-self: center; /*margin-left: auto;*/ margin-left: 10px; box-sizing: border-box; border: solid 1px #FFF; border-radius: 3px;}
header div.phone-btn a {display: inline-block; padding: 10px 12px 10px 12px; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; line-height: 0px; transition: all .3s ease;}

header div.phone-btn a:link, header div.phone-menu a:visited {background-color: rgba(255,255,255,0.0); color: #ffffff;}
header div.phone-btn a:hover, header div.phone-menu a:active, header div.phone-menu a:focus {background-color: rgba(255,255,255,1.0); color: #9CC1EC;}

header div.phone-btn a svg {width: 20px; height: 20px; transition: all .3s ease; fill: #ffffff;}
header div.phone-btn a:link svg * {fill: #fff;}
header div.phone-btn a:visited svg * {fill: #FFF;}
header div.phone-btn a:hover svg * {fill: #9CC1EC;}
header div.phone-btn a:active svg * {fill: #9CC1EC;}
header div.phone-btn a:focus svg * {fill: #9CC1EC;}
header div.phone-btn a span {margin-left: 5px; display: none; position: relative; top: -4px;}

/*--- Phone Button Scrolled ----------------------------------------*/
header.sticky-scrolled div.phone-btn {border: solid 1px #d02b0f;}

header.sticky-scrolled div.phone-btn a:link, header.sticky-scrolled div.phone-menu a:visited {background-color: rgba(255,255,255,0.0); color: #ffffff;}
header.sticky-scrolled div.phone-btn a:hover, header.sticky-scrolled div.phone-menu a:active, header div.phone-menu a:focus {background-color: rgba(255,255,255,1.0); color: #d02b0f;}

header.sticky-scrolled div.phone-btn a:link svg * {fill: #9CC1EC;}
header.sticky-scrolled div.phone-btn a:visited svg * {fill: #9CC1EC;}
header.sticky-scrolled div.phone-btn a:hover svg * {fill:  #9CC1EC;}
header.sticky-scrolled div.phone-btn a:active svg * {fill: #9CC1EC;}
header.sticky-scrolled div.phone-btn a:focus svg * {fill: #9CC1EC;}
header.sticky-scrolled div.phone-btn a span {color: #9CC1EC;}



/*--- Search Button -------------------------------------------------*/
header div.search-btn {display: none; flex: 0 0 auto; align-self: center; margin-left: auto; box-sizing: border-box; border: solid 1px #ffffff; border-radius: 3px;}
header div.search-btn a {display: inline-block; padding: 10px 12px 10px 12px; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; line-height: 0px; transition: all .3s ease;}

header div.search-btn a:link, header div.search-menu a:visited {background-color: rgba(255,255,255,0.0); color: #ffffff;}
header div.search-btn a:hover, header div.search-menu a:active, header div.search-menu a:focus {background-color: rgba(255,255,255,1.0); color: #d02b0f;}

header div.search-btn a svg {width: 20px; height: 20px; transition: all .3s ease; fill: #ffffff;}
header div.search-btn a:link svg * {fill: #ffffff;}
header div.search-btn a:visited svg * {fill: #ffffff;}
header div.search-btn a:hover svg * {fill: #d02b0f;}
header div.search-btn a:active svg * {fill: #d02b0f;}
header div.search-btn a:focus svg * {fill: #d02b0f;}
header div.search-btn a span {margin-left: 5px; display: none; position: relative; top: -4px;}

/*--- Search Button Scrolled ----------------------------------------*/
header.sticky-scrolled div.search-btn {border: solid 1px #d02b0f;}

header.sticky-scrolled div.search-btn a:link, header.sticky-scrolled div.search-menu a:visited {background-color: rgba(255,255,255,0.0); color: #ffffff;}
header.sticky-scrolled div.search-btn a:hover, header.sticky-scrolled div.search-menu a:active, header div.search-menu a:focus {background-color: rgba(255,255,255,1.0); color: #d02b0f;}

header.sticky-scrolled div.search-btn a:link svg * {fill: #d02b0f;}
header.sticky-scrolled div.search-btn a:visited svg * {fill: #d02b0f;}
header.sticky-scrolled div.search-btn a:hover svg * {fill: #d02b0f;}
header.sticky-scrolled div.search-btn a:active svg * {fill: #d02b0f;}
header.sticky-scrolled div.search-btn a:focus svg * {fill: #d02b0f;}
header.sticky-scrolled div.search-btn a span {color: #d02b0f;}












/*--- Hamburger Menu Button ----------------------------------------*/
header div.mobile-menu {display: none; flex: 0 0 auto; align-self: center; margin-left: 10px; box-sizing: border-box; border: solid 1px #FFF; border-radius: 3px;}
header div.mobile-menu a {display: inline-block; padding: 10px 12px 10px 12px; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; line-height: 0px; transition: all .3s ease;}

header div.mobile-menu a:link, header div.mobile-menu a:visited {background-color: rgba(255,255,255,0.0); color: #ffffff;}
header div.mobile-menu a:hover, header div.mobile-menu a:active, header div.mobile-menu a:focus {background-color: rgba(255,255,255,1.0); color: #9CC1EC;}

header div.mobile-menu a svg {width: 20px; height: 20px; transition: all .3s ease; fill: #FFF;}
header div.mobile-menu a:link svg * {fill: black;}
header div.mobile-menu a:visited svg * {fill: #FFF;}
header div.mobile-menu a:hover svg * {fill: #9CC1EC;}
header div.mobile-menu a:active svg * {fill: #9CC1EC;}
header div.mobile-menu a:focus svg * {fill: #9CC1EC;}
header div.mobile-menu a svg:nth-child(1) {display: inline-block;}
header div.mobile-menu a svg:nth-child(2) {display: none;}
header div.mobile-menu a span {margin-left: 5px; display: none; position: relative; top: -4px;}

/*--- Hamburger Menu Button Scrolled -------------------------------*/
header.sticky-scrolled div.mobile-menu {border: solid 1px #d02b0f;}

header.sticky-scrolled div.mobile-menu a:link, header.sticky-scrolled div.mobile-menu a:visited {background-color: rgba(255,255,255,0.0); color: #ffffff;}
header.sticky-scrolled div.mobile-menu a:hover, header.sticky-scrolled div.mobile-menu a:active, header div.mobile-menu a:focus {background-color: rgba(255,255,255,1.0); color: 9BC2E9;}

header.sticky-scrolled div.mobile-menu a:link svg * {fill: #d02b0f;}
header.sticky-scrolled div.mobile-menu a:visited svg * {fill: #d02b0f;}
header.sticky-scrolled div.mobile-menu a:hover svg * {fill: #d02b0f;}
header.sticky-scrolled div.mobile-menu a:active svg * {fill: #d02b0f;}
header.sticky-scrolled div.mobile-menu a:focus svg * {fill: #d02b0f;}
header.sticky-scrolled div.mobile-menu a span {color: #d02b0f;}

/*--- Hamburger Menu Button Switch Icon ----------------------------*/
.menuopen a {background-color: rgba(255,255,255,1.0) !important;}
.menuopen a svg * {fill:#9CC1EC !important;}
.menuopen a svg:nth-child(1) {display: none !important;} /* On activation of the menu button .menuopen is added to the .mobile-menu div via javascript to hide the hamburger icon... */
.menuopen a svg:nth-child(2) {display: inline-block !important;} /* ...and reveal the close icon using these 2 lines of css */

/*== 5. PAGE HEADER - FULLWIDTH : Media Queries min-width 1200px max-width 1400px (for Small Desktop) ================*/
@media only screen and (min-width: 1200px) and (max-width: 1400px) {

/*--- Navigation ---------------------------------------------*/
header .header-menu nav > ul > li > a {padding: 0px 15px;} /* needed to prevent the nav from squishing logo and phone number off the screen on smaller desktops */

}

/*== 5. PAGE HEADER - FULLWIDTH : Media Queries min-width 960px max-width 1199px (for Large Tablet) ==================*/


/*== 5. PAGE HEADER - FULLWIDTH : Media Queries min-width 720px max-width 959px (for Small Tablet) ===================*/


/*== 5. PAGE HEADER - FULLWIDTH : Media Queries min-width 0px max-width 1199px (Mobile to Large Tablet) ==============*/
@media only screen and (min-width: 0px) and (max-width: 1199px) {

/*--- Header Containers / Wraps ---------------------------------------------*/
header {box-sizing: border-box; width: 100%; margin: 0px; padding: 0px; /*position: fixed; top: 0px; left: 0px; z-index: 10000;*/ /*background-color: rgba(0,32,80,0.4);*/ /* background-color: #d02b0f; */ /*border-bottom: solid 1px rgba(255,255,255,0.4);*/ transition: background-color .3s ease, height .3s ease;}
/*header.menuopen-changebg {background-color: rgba(0,32,80,0.9); height: 100vh;}*//*added whole section*/
header.sticky-scrolled {background-color: #ffffff; height: 60px; border-bottom: solid 1px rgba(132,147,158,0.3); z-index: 10000;}/* when scrolled changes the header background to white */
/*header.sticky-scrolled.menuopen-changebg {background-color: #ffffff;}*//*added whole section*/
header.sticky-stop {height: 60px;}
header [class*='grid-'] {padding-top: 0px !important; padding-bottom: 0px !important;}

header .header {box-sizing: border-box; display: flex; flex-wrap: wrap;/*added*/ justify-content: space-around; align-items: center; height: 100%; /*padding: 0px 20px;*/ /*position: relative;*/}

/*--- Logo ---------------------------------------------*/
header .header-logo {flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; box-sizing: border-box; margin: 0px; position: relative; z-index: 10000;}
header .header-logo h2 {margin: 0px; padding: 0px; line-height: 0px;}
header .header-logo h2 a {color: #ffffff; text-decoration: none;}
header .header-logo svg {width: 167px; margin: 10px 0px; transition: width .3s ease, height .3s ease;}
header .header-logo svg * {/*fill: #ffffff;*/}
header.sticky-scrolled .header-logo svg {width: 134px; height: 40px;}
header.sticky-scrolled .header-logo svg * {fill: #cc0000;}
header.sticky-stop .header-logo svg {width: 134px; height: 40px;}

/*--- Phone Number -------------------------------------------------*/
header .header-phone {display: none;}

/*--- Phone Button -------------------------------------------------*/
header div.phone-btn {display: inline-block; position: relative; z-index: 10000;}
header div.phone-btn a span {display: inline-block;}

/*--- Search Button -------------------------------------------------*/
header div.search-btn {display: inline-block; position: relative; z-index: 10000;}
header div.search-btn a span {display: inline-block;}



/*--- Hamburger Menu Button ----------------------------------------*/
header div.mobile-menu {display: inline-block; position: relative; z-index: 10000;}
header div.mobile-menu a span {display: inline-block;}

/*--- Header Navigation --------------------------------------------*/
header .header-menu {flex: none; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 9999 !important; background-color: rgba(255, 255, 255, 0.9); display: none;/* will change to display: block; in javascript */}
header.sticky-scrolled .header-menu {position: fixed;/* require position fixed instead of position absolute because of the relative parent when the site is scrolled */ z-index: 9999 !important; background-color: rgba(0,32,80,0.9);}
header .header-menu nav {display: flex; align-items: center; height: 100%;}
header .header-menu nav > ul {flex: 1 0 auto; flex-direction: column; height: auto;}
header .header-menu nav > ul > li {flex: 1 0 auto; float: none;}
header .header-menu nav > ul > li > a {flex: 1 0 auto; justify-content: center; padding: 20px 0px; font-size: 1.8rem; text-align: center;}
header.sticky-scrolled .header-menu nav > ul > li > a {color: #ffffff; height: auto;}
header.sticky-scrolled .header-menu nav > ul > li:hover > a {background-color: rgba(255,255,255,1.0); color: #027492;}


header .header-menu nav > ul > li.desk-nav-search {display:none;}
header.sticky-scrolled .header-menu nav > ul > li.desk-nav-search {display:none;}


/*--- DropDowns Test -----------------------------------------------*/
header nav ul > li, header nav ul > li.dropdown-smallwidth, header nav ul > li.dropdown-fullwidth {float: none;}
header nav ul > li .dropdown {display: none; position: static; top: 0px; left: 0px; z-index: 10000; width: 100%;}
header nav ul > li:hover.dropdown-smallwidth .dropdown, header nav ul > li:hover.dropdown-fullwidth .dropdown {display: none;}

}

/*== 5. PAGE HEADER - FULLWIDTH : Media Queries max-width 719px (for Mobile) =========================================*/
@media only screen and (max-width: 719px) {

/*--- Phone Button -------------------------------------------------*/
header div.phone-btn a span {display: none;}

/*--- Search Button -------------------------------------------------*/
header div.search-btn a span {display: none;}



/*--- Hamburger Menu Button ----------------------------------------*/
header div.mobile-menu a span {display: none;}

}

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

	header .header-logo svg {width: 130px;}

}



/*====================================================================================================================*/
/*                                                                                                                    */
/*   6. PAGE FOOTER                                                                                                   */
/*                                                                                                                    */
/*====================================================================================================================*/

footer {width: 100%; box-sizing: border-box; margin: 0px; padding: 20px 0px 20px 0px; color: #343f48; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3);}

footer .foot-list h3 {text-transform: uppercase; text-align: left; color: black; font-size: 1.6rem; font-weight: 600; border-bottom: solid 4px rgba(132,147,158,0.3); padding-bottom: 5px;}
footer .foot-list h4 {text-transform: uppercase; text-align: left; color: #343F48; margin-bottom: 5px; font-size: 1.4rem;}

footer .foot-list a {color: #343f48; text-decoration: none; transition: all .3s ease;}
footer .foot-list a:link, footer .foot-list a:visited {}
footer .foot-list a:hover, footer .foot-list a:active {color: #292929;}

footer .foot-list ul {list-style: none; margin: 0px; padding: 0px;}
footer .foot-list ul li {display: block; padding-bottom: 5px; margin: 0px; font-size: 1.4rem;}
footer .foot-list ul li a {padding: 0px;}

/*--- Copyright ----------------------------------------------------*/
footer .copyright {padding: 0px; font-size: 1.4rem;}

/*--- Associations -------------------------------------------------*/
footer .associations {padding: 0px;}
footer .associations svg {display: inline-block; margin: 0px 20px 0px 0px;}
footer .associations .abta-logo {width: 94px; height: 37px;}
footer .associations .atol-logo {width: 55px; height: 55px;}
footer .associations img {display: inline-block; margin: 0px 20px 0px 0px;}

/*--- Social Media -------------------------------------------------*/
footer .social {padding: 0px;}
footer .social a {margin-right: 10px;}
footer .social a:last-child {margin-right: 0px;}
footer .social a span {position: absolute; bottom: 100000px; left: 0px;}
footer .social svg {width: 40px; height: 40px;}


/*== 6. PAGE FOOTER : Media Queries max-width 959px (Mobile and Tablet) ==============================================*/
@media only screen and (max-width: 959px) {

footer > div {}
footer > div [class*='grid-'] {margin: 0; padding: 10px;}
footer .foot-list h3 {margin: 0px 0px 5px 0px;}
footer .foot-list h3:nth-of-type(2) {margin-top: 20px !important;}
footer .foot-list ul {/*margin: 0px;*/ column-count: 2;}
footer .foot-list ul li {padding-bottom: 0px;}
footer .foot-list ul li a {display: block; padding: 5px 0px 5px 0px;}
footer .copyright, footer .associations, footer .social {margin: 0px; padding: 5px 0px 5px 0px;}
footer .associations {display: flex; align-items: center;}
footer .associations a {flex: 0 0 auto;}
footer .associations svg {display: block;}
footer .social {display: flex;}
footer .social a {flex: 0 0 auto;}
footer .social svg {display: block;}

}



/*====================================================================================================================*/
/*                                                                                                                    */
/*   7. HERO VIDEO HOMEPAGE                                                                                           */
/*                                                                                                                    */
/*====================================================================================================================*/

.herovideo-homepage {width: 100%; box-sizing: border-box; height: 50vh; min-height: 300px; /*display: none;*/ position: relative; border: solid 1px #ff0000;}
.herovideo-container {position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; border: solid 1px #00ff00;}
.herovideo-container video {width: 100%; height: 100%; border: solid 1px #0000ff;}
/*.herovideo-container iframe {width: 100%; height: 100%; border: solid 1px #0000ff;}*/


/* Style the video: 100% width and height to cover the entire window */
/*#myVideo {position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%;}*/

/* Add some content at the bottom of the video/page */
/*#myVideo + div.content {position: fixed; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px;}*/

/* Style the button used to pause/play the video */
/*#myBtn {width: 200px; font-size: 18px; padding: 10px; border: none; background: #000; color: #fff; cursor: pointer;}
#myBtn:hover {background: #ddd; color: black;}*/



/*====================================================================================================================*/
/*                                                                                                                    */
/*   7. OWL CAROUSEL : HERO IMAGE THEME                                                                               */
/*                                                                                                                    */
/*====================================================================================================================*/

.heroimg-slider {width: 100%; box-sizing: border-box; height: 50vh; min-height: 300px; /*display: none;*/}

.owl-theme-heroimg .item:not(:first-child) {
    display: none;
}
.owl-theme-heroimg .item:first-child {
    /*padding: 200px 20px;*/
}

.owl-theme-heroimg {position: relative; height: 50vh; min-height: 300px;}
.owl-theme-heroimg .item {box-sizing: border-box; height: 50vh; min-height: 300px;}

.owl-theme-heroimg .owl-nav {width: 100%; margin: 0px; position: relative;}
.owl-theme-heroimg .owl-nav [class*='owl-'] {cursor: pointer; box-sizing: border-box; margin: 0px; padding: 10px; color: #29b360; font-size: 1.4rem; transition: all .3s ease;}
.owl-theme-heroimg .owl-nav [class*='owl-']:hover {color: #29b360; text-decoration: none;}
.owl-theme-heroimg .owl-nav .owl-prev {position: absolute; top: calc(-25vh - 50px); left: 0px;}
.owl-theme-heroimg .owl-nav .owl-next {position: absolute; top: calc(-25vh - 50px); right: 0px;}
.owl-theme-heroimg .owl-nav .disabled {opacity: 0.5; cursor: default;}
.owl-theme-heroimg .owl-nav svg {width: 80px; height: 80px;}
.owl-theme-heroimg .owl-nav svg > * {fill: rgba(255,255,255,0.5); transition: all .3s ease;}
.owl-theme-heroimg .owl-nav [class*='owl-']:hover svg > * {fill: rgba(255,255,255,1.0);}
.owl-theme-heroimg .owl-nav.disabled + .owl-dots {margin-top: 10px;}
.owl-theme-heroimg .owl-dots {text-align: center; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: 0px; position: absolute; right: 0px; bottom: 10px; left: 0px;}
.owl-theme-heroimg .owl-dots .owl-dot {display: inline-block; zoom: 1; *display: inline;}
.owl-theme-heroimg .owl-dots .owl-dot span {width: 10px; height: 10px; margin: 5px 7px; background: #292929; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px;}
.owl-theme-heroimg .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #ffffff;}

.heroimg-slider-promo-txt {display: flex; align-items: stretch; box-sizing: border-box; height: 50vh; min-height: 300px;}
.heroimg-slider-promo-txt .container-12 {display: flex; align-items: stretch;}
.heroimg-slider-promo-txt .grid-12 {display: flex; align-items: stretch; box-sizing: border-box; margin-bottom: 0px;}
.heroimg-slider-promo-txt.slide-offer-left > div > div {justify-content: flex-start;}
.heroimg-slider-promo-txt.slide-offer-right > div > div {justify-content: flex-end;}
.heroimg-slider-promo-txt.slide-offer-centre > div > div {justify-content: center;}
.heroimg-slider-promo-txt .promo-content {width: 30%; padding: 20px 40px; background-color: rgba(34,51,95,0.9); color: #ffffff;}
.heroimg-slider-promo-txt .promo-content .promo-cruiselogo {max-width: 180px; max-height: 40px; width: auto; height: auto; margin-bottom: 20px;}
.heroimg-slider-promo-txt .promo-content .promo-ribbon {display: inline-block; box-sizing: border-box; height: 32px; margin: 0px; padding: 5px 20px 5px 40px; font-size: 1.6rem; white-space: nowrap; background-color: #CC0000; position: relative; left: -40px; font-weight: 600; text-transform: uppercase;}
.heroimg-slider-promo-txt .promo-content .promo-ribbon:after {display: block; content: ''; width: 0px; height: 0px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 16px solid #CC0000; border-bottom: 16px solid #CC0000; position: absolute; bottom: 0px; right: -20px;}
.heroimg-slider-promo-txt .promo-content .promo-txt {font-size: 3.0rem; margin: 20px 0px 0px 0px;}
.heroimg-slider-promo-txt .promo-content .promo-txt-resize {font-size: 2.4rem; margin: 20px 0px 0px 0px;}

.heroimg-slider-promo-img {display: flex; align-items: stretch; box-sizing: border-box; height: 50vh; min-height: 300px;}
.heroimg-slider-promo-img .container-12 {display: flex; align-items: stretch;}
.heroimg-slider-promo-img .grid-12.promo-content {display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box; margin-bottom: 0px; padding: 20px 0px;}
.heroimg-slider-promo-img .grid-12.promo-content img {flex: 0 0 auto;}

/*--- Adjust the carousel to full height when this class is present ---*/
.heroimg-slider.full-height {height: 70vh !important;}
.heroimg-slider.full-height .owl-theme-heroimg {height: 70vh !important;}
.heroimg-slider.full-height .owl-theme-heroimg .item {height: 70vh !important;}
.heroimg-slider.full-height .owl-theme-heroimg .owl-nav .owl-prev {top: calc(-35vh - 50px);}
.heroimg-slider.full-height .owl-theme-heroimg .owl-nav .owl-next {top: calc(-35vh - 50px);}
.heroimg-slider.full-height .heroimg-slider-promo-txt {height: 70vh !important;}
.heroimg-slider.full-height .heroimg-slider-promo-img {height: 70vh !important;}
.heroimg-slider.full-height .intro-page-w-img {height: 70vh !important;}
.heroimg-slider.full-height .intro-page-w-img .intro-content {margin-bottom: 100px;}
.heroimg-slider.full-height .intro-page-w-img2 {height: 70vh !important;}
.heroimg-slider.full-height .intro-page-w-img3 {height: 70vh !important;}

@media only screen and (max-width: 959px) and (orientation: landscape) {

.heroimg-slider.full-height .intro-page-w-img .intro-content {margin-bottom: 20px;}

}

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

.heroimg-slider.full-height .intro-page-w-img .intro-content {margin-bottom: 20px;}

}



/*====================================================================================================================*/
/*                                                                                                                    */
/*   7. OWL CAROUSEL : CRUISE AND STAY THEME                                                                          */
/*                                                                                                                    */
/*====================================================================================================================*/

.search-details-gallery [class*='grid-'] {margin-bottom: 0px;}/*--?????--*/
.owl-theme-panels {position: relative;}

.owl-theme-panels {position: relative;}
.owl-theme-panels .item {display: flex; flex-direction: column; box-sizing: border-box; height: 300px;}
.owl-theme-panels .item-img {flex: 1 0 auto;}
.owl-theme-panels .item-info {background-color: #f0f3f5; margin-top: auto; padding: 15px 20px;}
.owl-theme-panels .item-info p {margin: 0px; font-size: 2.0rem; color: #22335f;}
.owl-theme-panels .owl-nav {width: 100%; margin: 0px;}
.owl-theme-panels .owl-nav [class*='owl-'] {display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; width: 50px; height: 50px; margin: 0px; border-radius: 50%; color: #29b360; font-size: 1.4rem; background-color: #ffffff; box-shadow: 0 8px 10px -2px rgba(0,0,0,0.2); transition: all .3s ease;}
.owl-theme-panels .owl-nav [class*='owl-']:hover {color: #29b360; text-decoration: none;}
.owl-theme-panels .owl-nav .owl-prev {position: absolute; top: calc(50% - 25px); left: -25px; padding-right: 2px;}
.owl-theme-panels .owl-nav .owl-next {position: absolute; top: calc(50% - 25px); right: -25px; padding-left: 2px;}
.owl-theme-panels .owl-nav .disabled {opacity: 0.5; cursor: default;}
.owl-theme-panels .owl-nav svg {width: 20px; height: 20px;}
.owl-theme-panels .owl-nav svg > * {fill: rgba(0,32,80,0.5); transition: all .3s ease;}
.owl-theme-panels .owl-nav [class*='owl-']:hover svg > * {fill: rgba(0,32,80,1.0);}
.owl-theme-panels .owl-nav.disabled + .owl-dots {margin-top: 10px;}
.owl-theme-panels .owl-dots {text-align: center; -webkit-tap-highlight-color: transparent; margin-top: 10px;}
.owl-theme-panels .owl-dots .owl-dot {display: inline-block; zoom: 1; *display: inline;}
.owl-theme-panels .owl-dots .owl-dot span {width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px;}
.owl-theme-panels .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #869791;}

/*====================================================================================================================*/
/*                                                                                                                    */
/*   7. OWL CAROUSEL : FULL WIDTH SLIDING PANELS THEME (USED ON HOTEL / CITY SLIDERS)                                 */
/*                                                                                                                    */
/*====================================================================================================================*/

/*.owl-theme-fwpanels {position: relative; width: 100%; overflow: hidden;}
.owl-theme-fwpanels .owl-stage-outer {max-width: 1160px; margin: 0px auto; overflow: visible;}
.owl-theme-fwpanels .owl-stage-outer:before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: -100%; background-color: rgba(255,255,255,0.8); z-index: 1;}
.owl-theme-fwpanels .owl-stage-outer:after {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; right: -100%; background-color: rgba(255,255,255,0.8); z-index: 1;}
.owl-theme-fwpanels .item {box-sizing: border-box; width: 580px; height: 300px; border-left: solid 1px #ffffff; border-right: solid 1px #ffffff;}
.owl-theme-fwpanels .item-img {display: flex; justify-content: center; align-items: center; height: 100%;}
.owl-theme-fwpanels .item-info {flex: 0 0 auto; box-sizing: border-box; width: 60%; padding: 20px 20px; background-color: rgba(0,32,80,0.9); text-align: center;}
.owl-theme-fwpanels .item-info h3 {margin: 0px; color: #ffffff; font-weight: 800;}
.owl-theme-fwpanels .item-info h3 span {display: block; font-size: 1.2rem; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; color: rgba(255,255,255,0.7);}
.owl-theme-fwpanels .item-info p {margin: 15px 0px 0px 0px; font-size: 1.6rem; color: #ffffff;}
.owl-theme-fwpanels .item-info .item-more {display: none;}
.owl-theme-fwpanels .item-info .item-more a {display: inline-block; color: #ffffff; font-size: 1.4rem; margin: 0px auto; padding: 5px 20px; text-transform: uppercase; text-decoration: none; border: solid 1px #ffffff;}
.owl-theme-fwpanels .owl-nav {width: 100%; margin: 0px;}
.owl-theme-fwpanels .owl-nav [class*='owl-'] {display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; width: 50px; height: 50px; margin: 0px; border-radius: 50%; color: #29b360; font-size: 1.4rem; background-color: #ffffff; box-shadow: 0 8px 10px -2px rgba(0,0,0,0.2); transition: all .3s ease;}
.owl-theme-fwpanels .owl-nav [class*='owl-']:hover {color: #29b360; text-decoration: none;}
.owl-theme-fwpanels .owl-nav .owl-prev {position: absolute; top: calc(50% - 25px); left: calc(50% - 580px - 25px); padding-right: 2px;}
.owl-theme-fwpanels .owl-nav .owl-next {position: absolute; top: calc(50% - 25px); right: calc(50% - 580px - 25px); padding-left: 2px;}
.owl-theme-fwpanels .owl-nav .disabled {opacity: 0.5; cursor: default;}
.owl-theme-fwpanels .owl-nav svg {width: 20px; height: 20px;}
.owl-theme-fwpanels .owl-nav svg > * {fill: rgba(0,32,80,0.5); transition: all .3s ease;}
.owl-theme-fwpanels .owl-nav [class*='owl-']:hover svg > * {fill: rgba(0,32,80,1.0);}
.owl-theme-fwpanels .owl-nav.disabled + .owl-dots {margin-top: 10px;}*//* check if you need this if dots removed????? */

/*--- Full Width Sliding Panels ------------------------------------*//* USED ON HOTEL CITY SLIDERS */
.owl-theme-fwpanels {overflow: hidden;}
.owl-theme-fwpanels .owl-stage-outer {margin: 0px auto; overflow: visible; position: relative;} /* javascript generated */
.owl-theme-fwpanels .owl-stage-outer:before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: -100%; background-color: rgba(255,255,255,0.8); z-index: 1;}
.owl-theme-fwpanels .owl-stage-outer:after {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; right: -100%; background-color: rgba(255,255,255,0.8); z-index: 1;}
.owl-theme-fwpanels .owl-stage {} /* javascript generated */
.owl-theme-fwpanels .owl-item {} /* javascript generated *//* !important required to overrule the inline javascript generated width: auto; */

.owl-theme-fwpanels .item {box-sizing: border-box; width: 100%;}
.owl-theme-fwpanels .item.gallery-tile {height: 400px;}
.owl-theme-fwpanels .item-video {box-sizing: border-box; width: 100%; position: relative;}
.owl-theme-fwpanels .item-video.gallery-tile {height: 400px;}
.owl-video-tn {background-size: cover !important;}

.owl-theme-fwpanels .active .item {} /* javascript generated */
.owl-theme-fwpanels .active .item-video {} /* javascript generated */

.owl-theme-fwpanels .item-video .vr-enabled {border: solid 1px #ffffff; padding: 5px 10px; color: #ffffff; font-size: 1.6rem; font-weight: 700; position: absolute; top: 20px; left: 20px; z-index: 10000;}

.owl-theme-fwpanels .item .gallery-description {box-sizing: border-box; display: inline-block; /*max-width: 539px;*/ max-width: calc(100% - 40px); margin: 0px; background-color: rgba(0,0,0,0.6); color: #fff; font-size: 1.4rem; padding: 10px 20px; position: absolute; bottom: 20px; left: 20px; z-index: 10000;}

.owl-theme-fwpanels .owl-nav {width: 100%; margin: 0px;}
.owl-theme-fwpanels .owl-nav [class*='owl-'] {display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; width: 50px; height: 50px; margin: 0px; border-radius: 50%; color: #29b360; font-size: 1.4rem; background-color: #ffffff; box-shadow: 0 8px 10px -2px rgba(0,0,0,0.2); transition: all .3s ease;}
.owl-theme-fwpanels .owl-nav [class*='owl-']:hover {color: #29b360; text-decoration: none;}
.owl-theme-fwpanels .owl-nav .owl-prev {position: absolute; top: calc(50% - 25px); z-index: 2; padding-right: 2px;}
.owl-theme-fwpanels .owl-nav .owl-next {position: absolute; top: calc(50% - 25px); z-index: 2; padding-left: 2px;}
.owl-theme-fwpanels .owl-nav .disabled {opacity: 0.5; cursor: default;}
.owl-theme-fwpanels .owl-nav svg {width: 20px; height: 20px;}
.owl-theme-fwpanels .owl-nav svg > * {fill: rgba(0,32,80,0.5); transition: all .3s ease;}
.owl-theme-fwpanels .owl-nav [class*='owl-']:hover svg > * {fill: rgba(0,32,80,1.0);}
.owl-theme-fwpanels .owl-nav.disabled + .owl-dots {margin-top: 10px;}/* check if you need this if dots removed????? */

@media only screen and (min-width: 1200px) {
.owl-theme-fwpanels .owl-stage-outer {width: 100%; max-width: 1160px;}
.owl-theme-fwpanels .owl-item {width: 100% !important; max-width: 579px !important;}
.owl-theme-fwpanels .owl-nav .owl-prev {left: calc(50% - 580px - 25px - 1px);}
.owl-theme-fwpanels .owl-nav .owl-next {right: calc(50% - 580px - 25px - 1px);}
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
.owl-theme-fwpanels .owl-stage-outer {width: 100%; max-width: 940px;}
.owl-theme-fwpanels .owl-item {width: 100% !important; max-width: 469px !important;}
.owl-theme-fwpanels .owl-nav .owl-prev {left: calc(50% - 470px - 25px - 1px);}
.owl-theme-fwpanels .owl-nav .owl-next {right: calc(50% - 470px - 25px - 1px);}
}
@media only screen and (min-width: 720px) and (max-width: 959px) {
.owl-theme-fwpanels .owl-stage-outer {width: 100%; max-width: 700px;}
.owl-theme-fwpanels .owl-item {width: 100% !important; max-width: 349px !important;}
.owl-theme-fwpanels .owl-nav .owl-prev {left: calc(50% - 350px - 25px - 1px);}
.owl-theme-fwpanels .owl-nav .owl-next {right: calc(50% - 350px - 25px - 1px);}
}
@media only screen and (max-width: 719px) {
.owl-theme-fwpanels .owl-stage-outer {}
.owl-theme-fwpanels .owl-item {}
.owl-theme-fwpanels .owl-nav .owl-prev {left: 0%;}
.owl-theme-fwpanels .owl-nav .owl-next {right: 0%;}
}



/*====================================================================================================================*/
/*                                                                                                                    */
/*   7. OWL CAROUSEL : FULL WIDTH SLIDING OFFERS THEME (USED ON PHOTO OFFERS SLIDERS)                                 */
/*                                                                                                                    */
/*====================================================================================================================*/

/*.owl-theme-fwoffers {position: relative; width: 100%; overflow: hidden;}
.owl-theme-fwoffers .owl-stage-outer {max-width: 1160px; margin: 0px auto; overflow: visible;}
.owl-theme-fwoffers .owl-stage-outer:before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: -100%; background-color: rgba(255,255,255,0.8); z-index: 1;}
.owl-theme-fwoffers .owl-stage-outer:after {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; right: -100%; background-color: rgba(255,255,255,0.8); z-index: 1;}
.owl-theme-fwoffers .item {box-sizing: border-box; width: 367px; margin: 0px 10px;}
.owl-theme-fwoffers .owl-nav {width: 100%; margin: 0px;}
.owl-theme-fwoffers .owl-nav [class*='owl-'] {display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; width: 50px; height: 50px; margin: 0px; border-radius: 50%; color: #29b360; font-size: 1.4rem; background-color: #ffffff; box-shadow: 0 8px 10px -2px rgba(0,0,0,0.2); transition: all .3s ease;}
.owl-theme-fwoffers .owl-nav [class*='owl-']:hover {color: #29b360; text-decoration: none;}
.owl-theme-fwoffers .owl-nav .owl-prev {position: absolute; top: calc(50% - 25px); left: calc(50% - 580px - 25px); padding-right: 2px;}
.owl-theme-fwoffers .owl-nav .owl-next {position: absolute; top: calc(50% - 25px); right: calc(50% - 580px - 25px); padding-left: 2px;}
.owl-theme-fwoffers .owl-nav .disabled {opacity: 0.5; cursor: default;}
.owl-theme-fwoffers .owl-nav svg {width: 20px; height: 20px;}
.owl-theme-fwoffers .owl-nav svg > * {fill: rgba(0,32,80,0.5); transition: all .3s ease;}
.owl-theme-fwoffers .owl-nav [class*='owl-']:hover svg > * {fill: rgba(0,32,80,1.0);}
.owl-theme-fwoffers .owl-nav.disabled + .owl-dots {margin-top: 10px;}*//* check if you need this if dots removed????? */

/*--- Sliding Offers Test ------------------------------------*//* USED ON PHOTO OFFERS SLIDERS */
.owl-theme-fwoffers {overflow: hidden;}
.owl-theme-fwoffers .owl-stage-outer {margin: 0px auto; overflow: visible; position: relative;} /* javascript generated */
.owl-theme-fwoffers .owl-stage-outer:before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: -100%; background-color: rgba(255,255,255,0.8); z-index: 1;}
.owl-theme-fwoffers .owl-stage-outer:after {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; right: -100%; background-color: rgba(255,255,255,0.8); z-index: 1;}
.owl-theme-fwoffers .owl-stage {} /* javascript generated */
.owl-theme-fwoffers .owl-item {} /* javascript generated *//* !important required to overrule the inline javascript generated width: auto; */
.owl-theme-fwoffers .item {box-sizing: border-box; width: 100%;}
.owl-theme-fwoffers .active .item {} /* javascript generated */

.owl-theme-fwoffers .owl-nav {width: 100%; margin: 0px;}
.owl-theme-fwoffers .owl-nav [class*='owl-'] {display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; width: 50px; height: 50px; margin: 0px; border-radius: 50%; color: #29b360; font-size: 1.4rem; background-color: #ffffff; box-shadow: 0 8px 10px -2px rgba(0,0,0,0.2); transition: all .3s ease;}
.owl-theme-fwoffers .owl-nav [class*='owl-']:hover {color: #29b360; text-decoration: none;}
.owl-theme-fwoffers .owl-nav .owl-prev {position: absolute; top: calc(50% - 25px); z-index: 2; padding-right: 2px;}
.owl-theme-fwoffers .owl-nav .owl-next {position: absolute; top: calc(50% - 25px); z-index: 2; padding-left: 2px;}
.owl-theme-fwoffers .owl-nav .disabled {opacity: 0.5; cursor: default;}
.owl-theme-fwoffers .owl-nav svg {width: 20px; height: 20px;}
.owl-theme-fwoffers .owl-nav svg > * {fill: rgba(0,32,80,0.5); transition: all .3s ease;}
.owl-theme-fwoffers .owl-nav [class*='owl-']:hover svg > * {fill: rgba(0,32,80,1.0);}
.owl-theme-fwoffers .owl-nav.disabled + .owl-dots {margin-top: 10px;}/* check if you need this if dots removed????? */

@media only screen and (min-width: 1200px) {
.owl-theme-fwoffers .owl-stage-outer {width: 100%; max-width: 1160px;}
.owl-theme-fwoffers .owl-item {width: 100% !important; max-width: 373px !important;}
.owl-theme-fwoffers .owl-nav .owl-prev {left: calc(50% - 580px - 25px - 10px);}
.owl-theme-fwoffers .owl-nav .owl-next {right: calc(50% - 580px - 25px - 10px);}
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
.owl-theme-fwoffers .owl-stage-outer {width: 100%; max-width: 940px;}
.owl-theme-fwoffers .owl-item {width: 100% !important; max-width: 300px !important;}
.owl-theme-fwoffers .owl-nav .owl-prev {left: calc(50% - 470px - 25px - 10px);}
.owl-theme-fwoffers .owl-nav .owl-next {right: calc(50% - 470px - 25px - 10px);}
}
@media only screen and (min-width: 720px) and (max-width: 959px) {
.owl-theme-fwoffers .owl-stage-outer {width: 100%; max-width: 700px;}
.owl-theme-fwoffers .owl-item {width: 100% !important; max-width: 340px !important;}
.owl-theme-fwoffers .owl-nav .owl-prev {left: calc(50% - 350px - 25px - 10px);}
.owl-theme-fwoffers .owl-nav .owl-next {right: calc(50% - 350px - 25px - 10px);}
}
@media only screen and (max-width: 719px) {
.owl-theme-fwoffers .owl-stage-outer {}
.owl-theme-fwoffers .owl-item {}
.owl-theme-fwoffers .owl-nav .owl-prev {left: 0%;}
.owl-theme-fwoffers .owl-nav .owl-next {right: 0%;}
}

/*--- Sliding Offers Test ------------------------------------*//* USED ON PHOTO OFFERS SLIDERS */
.owl-theme-fwofferstest {background-color: rgba(0,0,0,0.1); overflow: hidden;}
.owl-theme-fwofferstest .owl-stage-outer {background-color: rgba(255,0,0,0.2); border: solid 1px #0000ff; /*width: 100%; max-width: 1160px;*/ margin: 0px auto; overflow: visible; position: relative;} /* javascript generated */
.owl-theme-fwofferstest .owl-stage-outer:before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: -100%; background-color: rgba(255,255,255,0.6); z-index: 1;}
.owl-theme-fwofferstest .owl-stage-outer:after {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; right: -100%; background-color: rgba(255,255,255,0.6); z-index: 1;}
.owl-theme-fwofferstest .owl-stage {background-color: rgba(0,0,0,0.1); /*border: solid 1px #00ff00;*/} /* javascript generated */
.owl-theme-fwofferstest .owl-item {/*width: 100% !important; max-width: 373px !important;*/} /* javascript generated *//* important required to overrule the inline javascript generated width: auto; */
.owl-theme-fwofferstest .item {box-sizing: border-box; width: 100%; background-color: rgba(0,0,0,0.1); height: 300px; padding: 20px; /*opacity: 0.4;*/}
.owl-theme-fwofferstest .active .item {background-color: rgba(255,0,0,0.1); /*opacity: 1;*/} /* javascript generated */
.owl-theme-fwofferstest .item h2 {margin: 0px;}

.owl-theme-fwofferstest .owl-nav {width: 100%; margin: 0px;}
.owl-theme-fwofferstest .owl-nav [class*='owl-'] {display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; width: 50px; height: 50px; margin: 0px; border-radius: 50%; color: #29b360; font-size: 1.4rem; background-color: #ffffff; box-shadow: 0 8px 10px -2px rgba(0,0,0,0.2); transition: all .3s ease;}
.owl-theme-fwofferstest .owl-nav [class*='owl-']:hover {color: #29b360; text-decoration: none;}
.owl-theme-fwofferstest .owl-nav .owl-prev {position: absolute; top: calc(50% - 25px); z-index: 2; /*left: calc(50% - 580px - 25px - 10px);*/ padding-right: 2px;}
.owl-theme-fwofferstest .owl-nav .owl-next {position: absolute; top: calc(50% - 25px); z-index: 2; /*right: calc(50% - 580px - 25px - 10px);*/ padding-left: 2px;}
.owl-theme-fwofferstest .owl-nav .disabled {opacity: 0.5; cursor: default;}
.owl-theme-fwofferstest .owl-nav svg {width: 20px; height: 20px;}
.owl-theme-fwofferstest .owl-nav svg > * {fill: rgba(0,32,80,0.5); transition: all .3s ease;}
.owl-theme-fwofferstest .owl-nav [class*='owl-']:hover svg > * {fill: rgba(0,32,80,1.0);}
.owl-theme-fwofferstest .owl-nav.disabled + .owl-dots {margin-top: 10px;}/* check if you need this if dots removed????? */

@media only screen and (min-width: 1200px) {
.owl-theme-fwofferstest .owl-stage-outer {width: 100%; max-width: 1160px;}
.owl-theme-fwofferstest .owl-item {width: 100% !important; max-width: 373px !important;}
.owl-theme-fwofferstest .owl-nav .owl-prev {left: calc(50% - 580px - 25px - 10px);}
.owl-theme-fwofferstest .owl-nav .owl-next {right: calc(50% - 580px - 25px - 10px);}
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
.owl-theme-fwofferstest .owl-stage-outer {width: 100%; max-width: 940px;}
.owl-theme-fwofferstest .owl-item {width: 100% !important; max-width: 300px !important;}
.owl-theme-fwofferstest .owl-nav .owl-prev {left: calc(50% - 470px - 25px - 10px);}
.owl-theme-fwofferstest .owl-nav .owl-next {right: calc(50% - 470px - 25px - 10px);}
}
@media only screen and (min-width: 720px) and (max-width: 959px) {
.owl-theme-fwofferstest .owl-stage-outer {width: 100%; max-width: 700px;}
.owl-theme-fwofferstest .owl-item {width: 100% !important; max-width: 340px !important;}
.owl-theme-fwofferstest .owl-nav .owl-prev {left: calc(50% - 350px - 25px - 10px);}
.owl-theme-fwofferstest .owl-nav .owl-next {right: calc(50% - 350px - 25px - 10px);}
}
@media only screen and (max-width: 719px) {
.owl-theme-fwofferstest .owl-stage-outer {/*width: auto; max-width: auto;*/}
.owl-theme-fwofferstest .owl-item {/*width: auto; max-width: auto;*/}
.owl-theme-fwofferstest .owl-nav .owl-prev {left: 0%;}
.owl-theme-fwofferstest .owl-nav .owl-next {right: 0%;}
}



/*====================================================================================================================*/
/*                                                                                                                    */
/*   7. OWL CAROUSEL : ORIGINAL THEME                                                                                 */
/*                                                                                                                    */
/*====================================================================================================================*/

.owl-theme .owl-nav {text-align: center; -webkit-tap-highlight-color: transparent;}
.owl-theme .owl-nav [class*='owl-'] {color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px;}
.owl-theme .owl-nav [class*='owl-']:hover {background: #869791; color: #FFF; text-decoration: none;}
.owl-theme .owl-nav .disabled {opacity: 0.5; cursor: default;}
.owl-theme .owl-nav.disabled + .owl-dots {margin-top: 10px;}
.owl-theme .owl-dots {text-align: center; -webkit-tap-highlight-color: transparent;}
.owl-theme .owl-dots .owl-dot {display: inline-block; zoom: 1; *display: inline;}
.owl-theme .owl-dots .owl-dot span {width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #869791;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   8. INTRODUCTION PAGE (general page intro)                                                                        */
/*                                                                                                                    */
/*   THESE CLASSES ARE COMMENTED OUT RIGHT NOW TO HELP CHECK IF THEY ARE STILL IN USE                                 */
/*   IF NOT IN USE THEN DELETE                                                                                        */
/*                                                                                                                    */
/*====================================================================================================================*/

/*.intro-page-badge {display: inline-block; box-sizing: border-box; margin-bottom: 10px !important; padding: 5px 20px; background-color: #9f222e; font-weight: 600; text-shadow: none !important; text-transform: uppercase;}*/

/*.section-title {text-align: left;}
.section-title h2 {font-size: 3.0rem; margin: 20px 0px; color: #22335f;}*/

/*.section-title2 {text-align: center;}*/ /* normally applied to a grid-12 for a title and intro on a white bg */
/*.section-title2 h2 {font-size: 3.0rem; margin-bottom: 0px; color: #22335f;}
.section-title2 p {}*/

/*.section-title-center-lrg {margin-top: 40px;}
.section-title-center-lrg h2 {display: flex; justify-content: center; align-items: center; margin: 0px; font-size: 4.0rem; font-weight: 300; color: #002050; text-align: center; position: relative;}
.section-title-center-lrg h2:before {content: ''; display: block; border-top: solid 1px #988962; margin-top: 4px; position: absolute; top: 50%; right: 0px; bottom: 50%; left: 0px; z-index: 10; font-size: 0px; line-height: 0px;}
.section-title-center-lrg h2 span {display: inline-block; padding: 0px 20px; background-color: #ffffff; position: relative; z-index: 20;}
.section-title-center-lrg p {text-align: center;}
.section-title-center-lrg p:first-of-type {margin-top: 0px;}*/


/*====================================================================================================================*/
/*                                                                                                                    */
/*   8. HERO IMAGE - WITH TEXT (text aligned bottom left)                                                             */
/*                                                                                                                    */
/*====================================================================================================================*/

.intro-page-w-img {display: flex; align-items: flex-end; box-sizing: border-box; width: 100%; height: 50vh; min-height: 300px; margin: 0px; padding: 30px 0px 30px 0px; color: #ffffff; position: relative; /*border: solid 1px #ff0000;*/}
/*.intro-page-w-img:before {content: ''; position: absolute; width: inherit; height: inherit; min-height: 300px top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.0));}*/ /*- use for adding an transparent overlay colour to an image */
.intro-page-w-img .intro-content {margin-bottom: 20px; position: relative; /*border: solid 1px #00ff00;*/}
.intro-page-w-img h1 {font-size: 6.5rem; color: #ffffff; margin: 0px; font-weight: 700; text-shadow: 0px 1px 2px #000000, 0px 0px 10px #000000, 0px 0px 40px #000000;}
.intro-page-w-img p {font-size: 1.8rem; margin: 0px; color: #ffffff; font-weight: 600; text-shadow: 0px 1px 2px #000000, 0px 0px 10px #000000, 0px 0px 20px #000000;}

/*@media only screen and (min-width: 720px) and (max-width: 959px) {

.intro-page-w-img {min-height: 200px;}
.intro-page-w-img h1 {font-size: 4.5rem;}
.intro-page-w-img p {font-size: 1.8rem;}

}*/

@media only screen and (max-width: 959px) and (orientation: landscape) {

.intro-page-w-img {min-height: 200px;}
.intro-page-w-img h1 {font-size: 3.5rem;}
.intro-page-w-img p {font-size: 1.8rem;}

}

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

.intro-page-w-img {min-height: 200px;}
.intro-page-w-img h1 {font-size: 3.5rem;}
.intro-page-w-img p {font-size: 1.8rem;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   8. HERO IMAGE - WITH TEXT (text aligned center center)                                                           */
/*                                                                                                                    */
/*====================================================================================================================*/

.intro-page-w-img2 {display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 50vh; min-height: 300px; margin: 0px; padding: 30px 0px 30px 0px; color: #ffffff; position: relative;}
/*.intro-page-w-img2:before {content: ''; position: absolute; width: inherit; height: inherit; min-height: 300px top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, rgba(0,32,80,1.0), rgba(0,32,80,0.0));}*/ /*- use for adding an transparent overlay colour to an image */
.intro-page-w-img2 .intro-content {margin-bottom: 0px; position: relative; text-align: center;}
.intro-page-w-img2 h1 {font-size: 6.5rem; color: #ffffff; margin: 0px 0px 10px 0px; font-weight: 700; text-shadow: 0px 1px 2px #000000, 0px 0px 10px #000000, 0px 0px 40px #000000;}
.intro-page-w-img2 h2 {font-size: 6.5rem; color: #ffffff; margin: 0px 0px 10px 0px; font-weight: 700; text-shadow: 0px 1px 2px #000000, 0px 0px 10px #000000, 0px 0px 40px #000000;}
.intro-page-w-img2 p {font-size: 1.8rem; margin: 0px; color: #ffffff; font-weight: 600; text-transform: uppercase; text-shadow: 0px 1px 2px #000000, 0px 0px 10px #000000, 0px 0px 20px #000000;}

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

.intro-page-w-img2 {min-height: 200px;}
.intro-page-w-img2 h1 {font-size: 3.5rem;}
.intro-page-w-img2 h2 {font-size: 3.5rem;}
.intro-page-w-img2 p {font-size: 1.6rem;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   8. HERO IMAGE - COLLAGE VERSION                                                                                  */
/*                                                                                                                    */
/*====================================================================================================================*/

.intro-page-w-collage {display: flex; box-sizing: border-box; width: 100%; height: 50vh; min-height: 300px; background-color: #ffffff; margin: 2px 0px;}
.collage-area-1 {flex: 3; box-sizing: border-box; height: 100%; border-right: solid 1px #ffffff;}
.collage-area-1 .collage-img-1 {box-sizing: border-box; height: 100%;}
.collage-area-2 {flex: 2; display: flex; flex-direction: column; box-sizing: border-box; height: 100%; border-left: solid 1px #ffffff; border-right: solid 1px #ffffff;}
.collage-area-2a {flex: 1; box-sizing: border-box; height: 50%;}
.collage-area-2a .collage-img-2 {box-sizing: border-box; height: 100%; border-bottom: solid 1px #ffffff;}
.collage-area-2b {flex: 1; display: flex; box-sizing: border-box; height: 50%;}
.collage-area-2b .collage-img-3 {flex: 1; box-sizing: border-box; height: 100%; border-top: solid 1px #ffffff; border-right: solid 1px #ffffff;}
.collage-area-2b .collage-img-4 {flex: 1; box-sizing: border-box; height: 100%; border-top: solid 1px #ffffff; border-left: solid 1px #ffffff;}
.collage-area-3 {flex: 1; box-sizing: border-box; height: 100%; border-left: solid 1px #ffffff;}
.collage-area-3 .collage-img-5 {box-sizing: border-box; height: 100%;}


/*== 8. HERO IMAGE - COLLAGE VERSION : Media Queries max-width 959px (Mobile and Tablet) =============================*/
@media only screen and (max-width: 959px) {

.intro-page-w-collage {height: 40vh; min-height: auto;}
.collage-area-2 {border-right: none;}
.collage-area-3 {display: none;}

}

/*== 8. HERO IMAGE - COLLAGE VERSION : Media Queries max-width 719px (Mobile) ========================================*/
@media only screen and (max-width: 719px) {

.intro-page-w-collage {min-height: 200px;}
.collage-area-2b .collage-img-3 {border-right: none;}
.collage-area-2b .collage-img-4 {display: none;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   8. HERO IMAGE - MEDIA BUTTONS                                                                                    */
/*                                                                                                                    */
/*====================================================================================================================*/

.media-btn-container > div {margin-bottom: 0px; height: 0px; position: relative;}
.media-btns {position: absolute; bottom: 2px; right: 0px;}
.media-btns a {display: inline-block; box-sizing: border-box; margin-left: 10px; padding: 10px 40px; background-color: #9CC1EC; color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 1.4rem; font-weight: 600; transition: background-color .3s ease;}
.media-btns a:hover {background-color: #ffffff; color: #027492;}

/*== 4. STAFF PICK - WHAT OUR CANADA EXPERTS SAY : Media Queries min-width 0px max-width 719px (Mobile) ===========*/
@media only screen and (min-width: 0px) and (max-width: 719px) {

.media-btns a {padding: 10px 20px;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   8. INTRO PAGE (blue title, dark grey text, white background)                                                     */
/*                                                                                                                    */
/*====================================================================================================================*/

.intro-page {width: 100%; margin: 0px; /*padding: 30px 0px 40px 0px;*/ padding: 0px 0px 40px 0px; color: #21292e; border-bottom: solid 1px rgba(132,147,158,0.3);}
.intro-page [class*='grid-'] {margin-bottom: 0px;}
.intro-page .intro-content {/*margin-bottom: 0px;*/ padding-top: 30px;}
.intro-page .intro-page-breadcrumbs + div .intro-content {padding-top: 0px;} /* removes the top padding from intro-content if intro-page-breadcrumbs is present */
.intro-page h1 {font-size: 4.0rem; color: #027492; margin: 0px 0px 10px 0px; font-weight: 700; text-transform: capitalize;}
.intro-page p.subtitle {margin: 0px 0px 0px 0px; font-size: 1.6rem; font-weight: 600; text-transform: uppercase;}
.intro-page p {font-size: 1.8rem; color: #21292e; font-weight: 300;}
.intro-page p:first-of-type {margin-top: 0px;}
.intro-page p:last-of-type {margin-bottom: 0px;}

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

.intro-page h1 {font-size: 3.0rem;}
.intro-page p {font-size: 1.6rem;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   8. INTRO PAGE (white title, white text, blue background)                                                         */
/*                                                                                                                    */
/*====================================================================================================================*/

.intro-page2 {width: 100%; margin: 0px; padding: 0px 0px 40px 0px; color: #ffffff; background-color: #3d3d3b;}
.intro-page2 [class*='grid-'] {margin-bottom: 0px;}
.intro-page2 .intro-content {padding-top: 30px;}
.intro-page2 .intro-page-breadcrumbs + div .intro-content {padding-top: 0px;} /* removes the top padding from intro-content if intro-page-breadcrumbs is present */
.intro-page2 h1 {font-size: 4.0rem; color: #ffffff; margin: 0px 0px 10px 0px; font-weight: 700; text-transform: capitalize;}
.intro-page2 h2 {font-size: 3.0rem; color: #ffffff; margin: 0px 0px 10px 0px; font-weight: 700; text-transform: capitalize;}
.intro-page2 p.subtitle {margin: 0px 0px 0px 0px; font-size: 1.6rem; font-weight: 600; text-transform: uppercase;}
.intro-page2 p {font-size: 1.8rem; color: #ffffff; font-weight: 300;}
.intro-page2 p:first-of-type {margin-top: 0px;}
.intro-page2 p:last-of-type {margin-bottom: 0px;}

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

.intro-page2 h1 {font-size: 3.0rem;}
.intro-page2 p {font-size: 1.6rem;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   8. INTRO PAGE - DETAILS                                                                                          */
/*                                                                                                                    */
/*====================================================================================================================*/

.intro-page-details {width: 100%; margin: 0px; padding: 0px 0px 20px 0px; color: #21292e; background-color: #3d3d3b;}
.intro-page-details .intro-content {margin-bottom: 0px;}
.intro-page-details h1 {color: #ffffff; margin: 0px 0px 10px 0px; font-weight: 700; text-transform: capitalize;}
.intro-page-details p {font-size: 1.8rem; color: #ffffff; font-weight: 300;}
.intro-page-details ul.intro-summary {display: inline-block; list-style: none; margin: 0px; padding: 10px 20px; border-radius: 50px; color: #ffffff; background-color: rgba(0,0,0,0.05);}
.intro-page-details ul.intro-summary li {display: inline-block; font-size: 1.6rem; text-transform: uppercase; font-weight: 400; margin-right: 40px;}
.intro-page-details ul.intro-summary li:last-of-type {margin-right: 0px;}
.intro-page-details ul.intro-summary li strong { font-weight: 600;}
.intro-page-details ul.intro-highlight {list-style: none; margin: 0px; padding: 0px; color: #ffffff;}
.intro-page-details ul.intro-highlight li {display: inline-block; margin-right: 20px; padding: 5px 20px; border-radius: 50px; font-size: 1.6rem; background-color: rgba(255,255,255,0.1);}

.intro-page-itinerary3 {margin-bottom: 20px; padding: 0px;}
.intro-page-itinerary3 svg {width: 13px; height: 13px; margin-right: 5px; position: relative; top: 1px;}
.intro-page-itinerary3 svg * {fill: #ffffff;}
.intro-page-itinerary3 ul {display: inline; list-style: none; margin: 0px; padding: 0px;}
.intro-page-itinerary3 ul li {display: inline; color: #ffffff; margin: 0px; padding: 0px; font-size: 1.4rem; text-transform: uppercase;}
.intro-page-itinerary3 ul li:after {content: ' -'; padding: 0px 5px; position: relative; top: -1px;}
.intro-page-itinerary3 ul li:last-child:after {display: none;}


.offer-summary2 {border: solid 1px rgba(132,147,158,0.3); margin: 0px; padding: 15px 20px; box-shadow: 0 8px 20px -2px rgba(0,0,0,0.2); background-color: rgba(255,255,255,0.1);}
.offer-summary2 ul {list-style: none; margin: 0px; padding: 0px;}
.offer-summary2 ul li {margin-bottom: 10px; color: #ffffff;}
.offer-summary2 ul li:last-of-type {margin-bottom: 0px;}
.offer-summary2 ul li.nights {font-size: 2.4rem; font-weight: 600;}

.offer-summary2 ul li.price {font-weight: 400; color: #ffffff;}
.offer-summary2 ul li.price strong {font-size: 4.4rem; font-weight: 700; /*font-family: 'Nunito', sans-serif;*/ line-height: 4.0rem;}
.offer-summary2 ul li.price span {display: block; font-size: 1.6rem; font-weight: 600;}
.offer-summary2 ul li.price span:last-of-type {margin-bottom: 10px;}

.offer-summary2 ul li.highlight {font-weight: 300;}

.offer-summary-enquire-button {margin: 20px 0px 0px 0px;}
.offer-summary-enquire-button a {display: block; box-sizing: border-box; padding: 15px 20px; color: #ffffff; background-color: #05BA32; /*background-color: #29b360;*/ text-decoration: none; text-align: center; text-transform: uppercase; font-size: 1.8rem; font-weight: 600;}

.offer-summary2 p.small-print {font-size: 1.2rem;}
.offer-summary2 p.small-print a {color: #ffffff;}

div.offer-summary2 ul.includes li {color: #477693;}
.offer-summary2 .includes {box-sizing: border-box; list-style: none; margin: 10px 0px 0px 0px; padding: 10px; color: #477693; text-align: left; font-size: 1.4rem; font-weight: 700; background-color: rgba(255,255,255,0.9);}
.offer-summary2 .includes li {margin: 5px 0px 0px 0px; padding: 0px 0px 0px 22px; position: relative;}
.offer-summary2 .includes li:first-of-type {margin-top: 0px;}
.offer-summary2 .includes svg {width: 14px; height: 14px; fill: #477693; position: absolute; top: 3px; left: 0px;}

/*====================================================================================================================*/
/*                                                                                                                    */
/*   8. INTRO PAGE - TOOLTIP FOR SUMMARY                                                                              */
/*                                                                                                                    */
/*====================================================================================================================*/

.tooltip[data-tooltip] {position: relative;}
.tooltip[data-tooltip]::before, .tooltip[data-tooltip]::after {position: absolute; z-index: 1000; display: none; opacity: 0.85;}
.tooltip[data-tooltip]::before {content: attr(data-tooltip); background: #000; color: #fff; font-size: 1.4rem; padding: 10px 20px; border-radius: 3px; white-space: wrap; text-decoration: none;}/* using data-tooltip instead of title so we don't have the real tooltip overlapping *//* we don't want the text to wrap */
.tooltip[data-tooltip]::after {width: 0; height: 0; border: 6px solid transparent; content: '';}
.tooltip[data-tooltip]:hover::before, .tooltip[data-tooltip]:hover::after {display: block;}

/** positioning for tooltip **/

/* left tooltip */
.tooltip[data-tooltip][data-placement="left"]::before {top: -25%; right: 100%; margin-right: 10px;}
.tooltip[data-tooltip][data-placement="left"]::after {border-left-color: #000; border-right: none; top: 50%; right: 100%; margin-top: -6px; margin-right: 4px;}

/* right tooltip */
.tooltip[data-tooltip][data-placement="right"]::before {top: -25%; left: 100%; margin-left: 10px;}
.tooltip[data-tooltip][data-placement="right"]::after {border-right-color: #000; border-left: none; top: 50%; left: 100%; margin-top: -6px; margin-left: 4px;}

/* top tooltip */
.tooltip[data-tooltip][data-placement="top"]::before {bottom: 100%; left: 0; margin-bottom: 10px;}
.tooltip[data-tooltip][data-placement="top"]::after {border-top-color: #000; border-bottom: none; bottom: 100%; left: 10px; margin-bottom: 4px;}

/* bottom tooltip */
.tooltip[data-tooltip][data-placement="bottom"]::before {top: 100%; left: 0; margin-top: 10px;}
.tooltip[data-tooltip][data-placement="bottom"]::after {border-bottom-color: #000; border-top: none; top: 100%; left: 10px; margin-top: 4px;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   8. INTRO PAGE - BREADCRUMBS                                                                                      */
/*                                                                                                                    */
/*====================================================================================================================*/

.intro-page-breadcrumbs {margin-bottom: 20px; padding: 20px 0px; background-color: rgba(0,0,0,0.05);}
.intro-page-breadcrumbs div div {margin-bottom: 0px !important;}
.intro-page-breadcrumbs div div p {margin: 0px; font-size: 1.4rem; color: #ffffff;}
.intro-page-breadcrumbs div div p a {color: #ffffff;}
.intro-page-breadcrumbs div div p span {display: inline-block; margin: 0px 10px 0px 10px;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   10. WELCOME                                                                                                      */
/*                                                                                                                    */
/*====================================================================================================================*/

.welcome {width: 100%; padding: 40px 0px 40px 0px; text-align: center; border-bottom: solid 1px rgba(132,147,158,0.3); background-color: #ffffff;}
.welcome h1 {font-size: 4.0rem; margin: 0px; font-weight: 300; color: #0e6b94; text-transform: none;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   11. REGISTER (SLIM)                                                                                              */
/*                                                                                                                    */
/*====================================================================================================================*/

.register {width: 100%; padding: 20px 0px 20px 0px; text-align: center; /* background-color: #027492; */ background-color: #3d3d3b;}
.register .container-12 .grid-12 {margin-bottom: 0px;}
.register form {flex: 1; display: flex; justify-content: space-between; align-items: center;}
.register h2 {flex: 0 0 auto; font-size: 2.1rem; font-weight: 400; color: #ffffff; margin: 0px; padding: 0px 10px 0px 0px; box-sizing: border-box; text-align: left;}
.register label {display: inline-block; padding: 10px 10px 10px 0px;}
.register div.shift-label label {position: absolute; bottom: 100000px; left: 0px;}
.register div.field {flex: 1 0 auto; margin: 0px; padding: 0px 10px 0px 10px; float: left; box-sizing: border-box;}
.register div.submit {flex: 0 1 20%; margin: 0px 0px 0px auto; padding: 0px 0px 0px 10px; float: left; box-sizing: border-box;}
.register input {width: 100%; border: none;}
.register input[type="submit"] {width: 100%; border: none;}
.register input[type="submit"]:hover {border: none;}
.register p.register-thanks {font-size: 2.2rem; font-weight: 400; font-style: italic; color: #fba91c; margin: 0px; text-align: center;}


/*== 11. REGISTER (SLIM) : Media Queries min-width 720px max-width 959px (for Small Tablet) ==========================*/


/*== 11. REGISTER (SLIM) : Media Queries min-width 720px max-width 959px (Tablet) ====================================*/
@media only screen and (min-width: 720px) and (max-width: 959px) {

.register form {flex-wrap: wrap;}
.register h2 {flex: 1 0 100%; font-size: 2.0rem; padding: 0px; text-align: center;}
.register div.field {padding: 10px 10px 0px 0px;}
.register div.submit {flex: 0 1 40%; padding: 10px 0px 0px 10px;}

}

/*== 11. REGISTER (SLIM) : Media Queries min-width 0px max-width 719px (Mobile) ======================================*/
@media only screen and (min-width: 0px) and (max-width: 719px) {

.register form {flex-direction: column;}
.register h2 {width: 100%; padding-right: 0px; text-align: center;}
.register div.field {width: 100%; padding: 10px 0px 0px 0px;}
.register div.submit {flex: 1 0 auto; width: 100%; padding: 10px 0px 0px 0px;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   11. REGISTER (BIG)                                                                                               */
/*                                                                                                                    */
/*====================================================================================================================*/

/*.register2 {width: 100%; padding: 80px 0px 80px 0px; text-align: center; background-color: #027492;}
.register2 .container-12 .grid-12 {margin-bottom: 0px;}
.register2 form {}
.register2 h2 {color: #ffffff; margin-top: 0px; padding: 0px; box-sizing: border-box; text-align: center; font-size: 3.6rem; font-weight: 600;}
.register2 label {display: inline-block; padding: 10px 10px 10px 0px;}
.register2 .shift-label label {position: absolute; bottom: 100000px; left: 0px;}
.register2 div.field {display: flex; justify-content: center; margin: 40px 0px;}
.register2 input {flex: 0 0 auto; width: 40%; border: none;}
.register2 input[type="submit"] {flex: 0 0 auto; width: 20%; border: none; margin-left: 20px; background-color: #019e6c;}
.register2 input[type="submit"]:hover {border: none;}
.register2 p {font-size: 1.8rem; color: #ffffff; text-align: center;}
.register2 p.register-thanks {font-size: 2.2rem; font-weight: 400; font-style: italic; color: #fba91c; margin: 0px; text-align: center;}*/

.register3 {width: 100%; padding: 80px 0px 80px 0px; text-align: center; background-color: rgba(132,147,158,0.2);}
.register3 .container-12 .grid-12 {margin-bottom: 0px;}
.register3 form {}
.register3 h2 {/*font-size: 3.0rem; font-weight: 400;*/ /*color: #ffffff;*/ margin-top: 0px; padding: 0px; box-sizing: border-box; text-align: center; font-size: 3.6rem; font-weight: 800; /*font-family: 'Playfair Display', serif;*/}
.register3 label {display: inline-block; padding: 10px 10px 10px 0px;}
.register3 .shift-label label {position: absolute; bottom: 100000px; left: 0px;}
.register3 div.field {display: flex; justify-content: center; margin: 40px 0px;}
/*.register3 div.submit {}*/
.register3 input {flex: 0 0 auto; width: 40%; /*border: none;*/ border: solid 1px rgba(132,147,158,0.3);}
.register3 input[type="submit"] {flex: 0 0 auto; width: 20%; border: none; margin-left: 20px; background-color: #05BA32;}
.register3 input[type="submit"]:hover {border: none;}
.register3 p {/*font-size: 1.8rem; color: #ffffff;*/ text-align: center;}
.register3 p.register-thanks {font-size: 2.2rem; font-weight: 400; font-style: italic; color: #fba91c; margin: 0px; text-align: center;}

/*== 11. REGISTER (BIG) : Media Queries min-width 720px max-width 959px (Tablet) =====================================*/
@media only screen and (min-width: 720px) and (max-width: 959px) {

.register3 input {width: 50%;}
.register3 input[type="submit"] {width: 30%;}

}

/*== 11. REGISTER (BIG) : Media Queries min-width 0px max-width 719px (Mobile) =======================================*/
@media only screen and (min-width: 0px) and (max-width: 719px) {

.register3 div.field {flex-direction: column; margin: 40px 0px 20px 0px;}
.register3 input {width: 100%; margin-bottom: 20px;}
.register3 input[type="submit"] {width: 100%; margin-left: 0px;}

}

/*====================================================================================================================*/
/*                                                                                                                    */
/*   12. PHOTO OFFERS / DEALS                                                                                         */
/*                                                                                                                    */
/*====================================================================================================================*/

.photo-offers {width: 100%; padding: 20px 0px 20px 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3);}
.photo-offers.photo-offers-carousel {width: 100%; padding: 0px; text-align: left; border-bottom: none;}
.photo-offers .grid-12 h2 {font-size: 4.0rem; font-weight: 300; margin-bottom: 0px; color: #027492;}
.photo-offers .offers {display: flex; flex-wrap: wrap;}
.photo-offers .offer {flex: 0 1 auto; display: flex; flex-direction: column; min-height: 400px; box-sizing: border-box; color: #ffffff; position: relative; border-bottom: solid 4px #027492;}
.photo-offers .offer:before {content: ''; position: absolute; width: inherit; height: inherit; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.0));}
.photo-offers .offer h2 {margin: 0px; padding: 20px; text-shadow: 0px 1px 2px #000000; color: #FFF; /*font-size: 3.6rem;*/ font-size: 3.2rem; font-weight: 800; z-index: 1000;}
.photo-offers .offer p.offer-subtitle {margin: 0px; padding: 30px 20px 0px 20px; text-shadow: 0px 1px 2px #000000; color: #FFF; font-size: 1.4rem; font-weight: 600; z-index: 1000; text-transform: uppercase;}
.photo-offers .offer p.offer-subtitle + h2 {padding-top: 0px;}
.photo-offers .offer ul {list-style: none; margin: 0px; padding: 0px 20px 20px 20px; font-weight: 600; z-index: 1000;}
.photo-offers .offer ul li {text-shadow: 0px 1px 2px #000000;}
.photo-offers .offer .durdate {display: flex;}
.photo-offers .offer .durdate li {flex: 0 0 auto; margin-right: 30px;}
.photo-offers .offer .itinerary {margin: 0px; margin-left: 18px; padding: 0px; position: relative;}
.photo-offers .offer .itinerary svg {width: 13px; height: 13px;}
.photo-offers .offer .itinerary svg * {fill: #ffffff;}
.photo-offers .offer .itinerary ul {display: inline; list-style: none; margin: 0px; padding: 0px; font-weight: 400; font-size: 1.6rem;}
.photo-offers .offer .itinerary ul li {display: inline; margin: 0px; padding: 0px; /*white-space: nowrap;*/}
.photo-offers .offer .itinerary ul li:after {content: ' -'; padding: 0px 5px; position: relative; top: -1px;}
.photo-offers .offer .itinerary ul li:last-child:after {display: none;}
.photo-offer-price {display: flex; align-items: center; margin: auto 0px 0px 0px; padding: 20px 20px 10px 20px; background-color: rgba(255,255,255,0.7); z-index: 1000; color: #002050;}
.photo-offer-price p {margin: 0px; font-weight: 600;}
.photo-offer-price div {margin-left: auto; padding-left: 10px;}
.photo-offer-price strong {font-size: 3.6rem; font-weight: 800;}
.photo-offer-price svg {width: 20px; height: 20px;}
.photo-offer-price svg > * {fill: #002050;}

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

.photo-offers .offer h2 {font-size: 2.6rem;}

}

/*====================================================================================================================*/
/*                                                                                                                    */
/*   13. OFFERS / DEALS                                                                                               */
/*                                                                                                                    */
/*====================================================================================================================*/

.offers-list {width: 100%; padding: 20px 0px 20px 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3);}
.offers-list .grid-12 h2 {font-size: 4.0rem; font-weight: 300; margin-bottom: 0px; color: #22335f;}
.offers-list .offers {display: flex; flex-wrap: wrap;}
.offers-list .offer {flex: 0 1 auto; display: flex; flex-direction: column; box-sizing: border-box;} /* Also added to this using grid-4... display: inline; float: left; margin: 0px 10px 20px 10px; width: 373.2px; */

.offers-carousel-container {/*padding: 40px 0px;*/ border-bottom: solid 1px rgba(132,147,158,0.3);}

.offers-carousel {width: 100%; padding: 20px 0px 20px 0px; text-align: left; /*border-bottom: solid 1px rgba(132,147,158,0.3);*/}
.offers-carousel .grid-12 h2 {font-size: 4.0rem; font-weight: 300; margin-bottom: 0px; color: #22335f;}
/*.offers-carousel .offers {display: flex;}*/ /* if carousel is used then have to apply display flex to owl-stage instead to make the offers all keep the same height */
.offers-carousel .offers .owl-stage {display: flex;} /* if carousel is used then have to apply display flex to owl-stage instead to make the offers all keep the same height */
.offers-carousel .offers .owl-stage .owl-item {flex: 0 0 auto; display: flex;} /* if carousel is used then have to apply display flex to owl-stage instead to make the offers all keep the same height */

.offers-carousel .offer {flex: 0 1 auto; display: flex; flex-direction: column; box-sizing: border-box; background-color: #ffffff;} /* Also added to this using grid-4... display: inline; float: left; margin: 0px 10px 20px 10px; width: 373.2px; */
.offers-carousel-title {}
.offers-carousel-title h2 {font-size: 3.6rem; font-weight: 800; margin-bottom: 0px;}

.offer-list-img {flex: 0 1 auto; height: 240px; position: relative;}
.offer-list-img .offer-title {display: block; box-sizing: border-box; padding: 30px 20px; position: absolute; right: 0px; bottom: 0px; left: 0px;}
.offer-list-img .offer-title h2 {font-size: 2.6rem; font-weight: 800; margin: 0px 0px 0px 0px; color: #ffffff; line-height: 2.8rem; text-shadow: 0px 1px 2px #000000;}
.offer-list-img .offer-title p {font-size: 1.4rem; font-weight: 600; color: #ffffff; text-transform: uppercase; margin: 0px 0px 5px 0px; text-shadow: 0px 1px 2px #000000;}
.offer-list-img .special-ribbon {display: inline-block; box-sizing: border-box; height: 28px; margin: 0px; padding: 5px 15px 5px 20px; font-size: 1.4rem; color: #ffffff; background-color: #9e232c; position: absolute; top: 15px; left: 0px; font-weight: 600; text-transform: uppercase;}
.offer-list-img .special-ribbon:after {display: block; content: ''; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid #9e232c; border-bottom: 14px solid #9e232c; position: absolute; bottom: 0px; right: -10px;}

.offer-itinerary {margin: 0px; padding: 15px 20px; position: relative; border: solid 1px rgba(132,147,158,0.3); border-top: 0px; border-bottom: 0px;}
.offer-itinerary svg {width: 13px; height: 13px;}
.offer-itinerary svg * {fill: #027492;}
.offer-itinerary ul {display: inline; list-style: none; margin: 0px; padding: 0px; font-weight: 400; font-size: 1.6rem;}
.offer-itinerary ul li {display: inline; margin: 0px; padding: 0px; white-space: nowrap;}
.offer-itinerary ul li:after {content: ' -'; padding: 0px 5px; position: relative; top: -1px;}
.offer-itinerary ul li:last-child:after {display: none;}

.offer-list-info {flex: 1 0 auto; display: flex; flex-direction: column; box-sizing: border-box; border: solid 1px rgba(132,147,158,0.3); border-top: 0px; border-bottom: 0px; padding: 15px 20px; position: relative;}
.offer-itinerary + .offer-list-info {padding: 0px 20px 15px 20px;}
.offer-list-info h2 {font-size: 2.4rem; font-weight: 800; margin: 0px 0px 10px 0px; /*color: #002050; text-align: center;*/}
.offer-list-info p.subhead {font-size: 1.2rem; font-weight: 600; color: grey; text-transform: uppercase; margin: 0px 0px 0px 0px;}
.offer-list-info p {margin: 0px;}
.offer-list-info ul.durdate {display: flex; justify-content: space-around; margin: 0px; padding: 0px;}
.offer-list-info ul.durdate li {flex: 0 1 auto; box-sizing: border-box; list-style: none; margin: 0px; padding: 10px 5px; padding: 0px; font-size: 1.4rem;}
.offer-list-info ul.durdate li:first-child {padding-left: 0px;}
.offer-list-info ul.durdate li:last-child {word-wrap: break-word; padding-right: 0px;}
.offer-list-info ul.durdate li svg {width: 16px; height: 16px; color: #ffd700; margin-right: 4px; position: relative; top: 3px; left: 0px;}

.offer-list-info .offerinfo {font-size: 1.4rem; margin: 10px 0px 0px 0px; padding: 0px;}

.offer-list-info .special {box-sizing: border-box; list-style: none; margin: 10px 0px 0px 0px; padding: 0px; color: #22335f; text-align: left; font-size: 1.4rem;}
.offer-list-info .special li {margin: 5px 0px 0px 0px; padding: 0px 0px 0px 26px; position: relative;}
.offer-list-info .special svg {width: 17px; height: 17px; fill: #22335f; position: absolute; top: 2px; left: 0px;}

.offer-list-price {box-sizing: border-box; margin: 0px; /*background-color: #f0f3f5;*/ border: solid 1px rgba(132,147,158,0.3); border-top: 0px; padding: 0px 20px 20px 20px; text-align: left;}

.offer-price-from {margin: 0px 0px 15px 0px; padding: 5px 20px; box-sizing: border-box; background-color: #f0f3f5; font-size: 1.6rem; font-weight: 600; /*line-height: 2.6rem;*/ text-align: right;}
.offer-price-from span {/*display: block;*/ font-size: 1.2rem; font-weight: 600; /*text-transform: uppercase; line-height: 1.2rem;*/ margin-top: 4px;}
.offer-price-from strong {margin-left: 5px; font-size: 3.6rem; font-weight: 800; /*font-family: 'Nunito', sans-serif; color: #22335f;*/}

.offer-list-price2 {display: flex; align-items: baseline; box-sizing: border-box; margin: 0px; padding: 5px 20px; background-color: #027492; /* rgb 2 116 146 hex #027492 */ color: #ffffff; border: solid 1px rgba(132,147,158,0.3); border-top: 0px; border-bottom: 0px; text-align: left;}
.offer-list-price2 .offer-price-from {flex: 0 0 auto; margin: 0px; margin-left: auto; padding: 0px; background-color: transparent; color: #fff;}
.offer-list-price2 .offer-price-from strong {margin-left: 5px; font-size: 2.6rem; font-weight: 800; /*font-family: 'Nunito', sans-serif; color: #22335f;*/}
.offer-list-price2 .offer-includes {flex: 0 0 auto; margin: 0px; font-weight: 600; color: #fff;}
.offer-list-price2 .offer-includes svg {width: 20px; height: 20px; margin-right: 10px;}
.offer-list-price2 .offer-includes svg * {fill: #ffffff;}

.offer-list-button {margin: auto 0px 0px 0px;}
.offer-list-button a {flex: 0 1 auto; display: flex; box-sizing: border-box; color: #ffffff; background-color: #339966; /*background-color: #29b360;*/ text-decoration: none; text-transform: uppercase; font-size: 1.4rem; font-weight: 600;}
.offer-list-button span {display: inline-block; box-sizing: border-box; padding: 15px 20px;}
.offer-list-button span:nth-child(2) {margin-left: auto; padding: auto 20px; background-color: #339966; /*background-color: #239952;*/ line-height: 0px;}
.offer-list-button svg {width: 20px; height: 20px; fill: #ffffff;}
.offer-list-button svg polygon {fill: #ffffff;}

/*------------------------------------------------------------------*/

.offer-summary {border: solid 1px rgba(132,147,158,0.3); margin-bottom: 20px; padding: 15px 20px; box-shadow: 0 8px 20px -2px rgba(0,0,0,0.2);}
.offer-summary ul {list-style: none; margin: 0px; padding: 0px;}
.offer-summary ul li {margin-bottom: 10px;}
.offer-summary ul li:last-of-type {margin-bottom: 0px;}
.offer-summary ul li.nights {font-size: 2.4rem; font-family: 'Open Sans', sans-serif; font-weight: 800;}

.offer-summary ul li.price {font-family: 'Open Sans', sans-serif; font-weight: 400;}
.offer-summary ul li.price strong {font-size: 4.4rem; line-height: 4.0rem;}
.offer-summary ul li.price span {display: block; font-size: 1.6rem; font-weight: 800;}
.offer-summary ul li.price span:last-of-type {margin-bottom: 10px;}

.offer-summary ul li.highlight {}

.small-print {font-size: 1.2rem;}

.offer-whatsinc ul {list-style: none; margin: 0px; padding: 0px;}
.offer-whatsinc ul li {margin-bottom: 10px; padding-left: 30px; position: relative;}
.offer-whatsinc svg {width: 20px; height: 20px; position: absolute; top: 0px; left: 0px;}




/*====================================================================================================================*/
/*                                                                                                                    */
/*   14. FLEX TABS                                                                                                    */
/*                                                                                                                    */
/*====================================================================================================================*/

/*----- Flex Tabs Container -----*/
.flex-tabs {}
.flex-tabs-homepage {padding-top: 20px !important;}

/*----- Flex Tab Links -----*/
.flex-tab-links {margin-bottom: 30px !important;}
.flex-tab-links:after {display: block; clear: both; content: '';} /* Clearfix */
.flex-tab-links ul {display: flex; margin: 0px; padding: 0px;}
.flex-tab-links ul li {flex: 1; display: flex; list-style: none; margin: 0px; padding: 0px; border: solid 1px #25aae1; border-right-width: 0px;}
.flex-tab-links ul li:last-child {border-right-width: 1px;}
.flex-tab-links ul li a {flex: 1; display: flex; justify-content: center; align-items: center; padding: 15px 20px 15px 20px; font-weight: 400; text-align: center; text-transform: uppercase; text-decoration: none; color: #25aae1; position: relative; transition: all linear 0.15s; font-size: 1.4rem;}
.flex-tab-links ul li a:hover {background-color: #25aae1; color: #ffffff;}
.flex-tab-links ul li.active a {background-color: #25aae1; color: #ffffff;}
.flex-tab-links ul li.active a:after {display: block; content: ''; width: 0px; height: 0px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 15px solid #25aae1; position: absolute; bottom: -15px; left: calc(50% - 20px);}

/*----- Content of Flex Tabs -----*/
.flex-tab-content {padding: 0px;}
.flex-tab-content .flex-tab {display: none;}
.flex-tab-content .flex-tab.active {display: block;}
.flex-tab-content .flex-tab > div > h2 {font-size: 3.0rem; color: #22335f; font-weight: 300; /*text-transform: capitalize;*/}
.flex-tab-content .flex-tab > div > h2:first-of-type {margin-top: 0px;}

/* Use this to remove bottom borders etc from sections which normally have full screen width but have been dumped into the flex tabs */
.flex-tab-content .photo-offers {border-bottom: none;}
.flex-tab-content .tiles {border-bottom: none;}
.flex-tab-content .search-results-list2 {border-bottom: none;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   15. STICKY FLEX TABS                                                                                             */
/*                                                                                                                    */
/*====================================================================================================================*/

/*----- Sticky Tab Links -----*/
.sticky-tabs {box-sizing: border-box; background-color: #ffffff; width: 100%; height: 60px; border-bottom: solid 1px rgba(132,147,158,0.3);}
.sticky-tab-links {margin-bottom: 0px !important;}
.sticky-tab-links ul {display: flex; margin: 0px; padding: 0px; /*overflow: auto;*/}
.sticky-tab-links ul li {flex: 1 0 auto; display: flex; list-style: none; margin: 0px; padding: 0px;}
.sticky-tab-links ul li a {flex: 1 0 auto; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 20px 20px 16px 20px; border-bottom: solid 4px #477673; font-weight: 600; text-align: center; text-transform: uppercase; text-decoration: none; color: #FFF; position: relative; transition: background-color .3s ease, color .3s ease; font-size: 1.4rem;}

.sticky-tab-links ul li a:hover {border-bottom: solid 4px #fff;}
.sticky-tab-links ul li a.active {border-bottom: solid 4px #fff;}
.sticky-tab-links ul li a.sticky-tab-enquire {background-color: #9CC1EC; border-bottom: solid 4px #9CC1EC; color: #ffffff;}
.sticky-tab-links ul li a.sticky-tab-enquire:hover, .sticky-tab-links ul li a.sticky-tab-enquire.active {border-bottom: solid 4px rgba(0,0,0,0.2);}

.sticky-tabs span.detailsbuttons-open {display: none;}
.sticky-tabs span.detailsbuttons-background {display: none;}

.sticky-tab-links div.clearfix {}

.sticky-stop {position: absolute; top: 0; left: 0; width: 100%; z-index: 100000;}/*used for secondary nav in js*/
.is-fixed-stop {position: absolute !important; top: 0; left: 0; height: 60px; width: 100%; z-index: 100000;}/*commented out in secondary nav in js, keep just incase*/
.has-top-margin {/*animation: animate-margin-top 0.3s;*/ margin-top: 60px;}/*used for secondary nav in js*/ /* this class is given - using jQuery - to the .cd-main-content following the .cd-secondary-nav when it becomes fixed */
/*@keyframes animate-margin-top {
	0% {margin-top: 100px;}
	100% {margin-top: 60px;}
}*/
.is-fixed {position: fixed; left: 0; top: 0px; z-index: 10000; height: 60px; width: 100%;}/*used for secondary nav in js*/ /* on Firefox CSS transition/animation fails when parent element changes position attribute*/ /* so we defined to diffent classes: .is-fixed to change the position value and .is-animated to change childrens' attributes (padding and opacity)*/

/*----- Content of Sticky Tabs Sections -----*/
.sticky-section-content {} /* .cd-main-content */
.cd-main-content {}
.sticky-section-content .sticky-section {} /* .cd-main-content .cd-section */
.cd-main-content .cd-section {border-bottom: solid 1px rgba(132,147,158,0.3);}
.sticky-section-content-end {}
.cd-main-content-end {}


/*== 15. STICKY FLEX TABS : Media Queries max-width 959px (for Mobile and Small Tablet) =============================*/
@media only screen and (max-width: 959px) {

.sticky-tabs {/*border: solid 1px #ff0000 !important;*/}
.sticky-tabs > .container-12 {box-sizing: border-box; width: 100%; padding: 0px;}
.sticky-tabs > .container-12 > .grid-12 {box-sizing: border-box; position: relative; width: 100%; height: 60px; margin: 0px;} /* .sticky-tab-links */

.sticky-tab-links ul {flex-direction: column; width: 100%; height: 60px; position: absolute; top: 0px; left: 0px; z-index: 9000; /*border: solid 1px #00ff00;*/ background-color: #ffffff;} /* .detailsbuttons */
.sticky-tab-links ul:after {}
.sticky-tab-links ul li {flex: none; display: block; background-color: #ffffff;}
.sticky-tab-links ul li a {flex: none; /*display: none;*/ padding: 0px; height: 60px; border-bottom: solid 1px rgba(132,147,158,0.3); color: #477673;}
.sticky-tab-links ul li a:hover {border-bottom: solid 1px rgba(132,147,158,0.3);}
.sticky-tab-links ul li a.active {color: #ffffff; background: url('/images/select-field-arrow.png') right center no-repeat #477673; border-bottom: solid 1px rgba(132,147,158,0.3);}
.sticky-tab-links ul li.inactive a {background: url('/images/select-field-arrow.png') right center no-repeat #477673; color: #FFF;}
.sticky-tab-links ul li a.sticky-tab-enquire {background-color: #d02b0f; border-bottom: solid 1px rgba(132,147,158,0.3); color: #ffffff;}
.sticky-tab-links ul li a.sticky-tab-enquire:hover, .sticky-tab-links ul li a.sticky-tab-enquire.active {border-bottom: solid 1px rgba(132,147,158,0.3);}

.sticky-tabs span.detailsbuttons-open {display: block; width: 100%; height: 60px; position: absolute; top: 0px; left: 0px; z-index: 10000; background-color: transparent;}/* overlay layer for sticky dropdown when closed, it activates the expanded class in the js, and prevents the page jumping about between sections initially before the dropdown opens because the links are initially covered by this overlay */
.sticky-tabs span.detailsbuttons-open.hide {display: none;}

.sticky-tabs span.detailsbuttons-background {display: none; width: 100%; height: 100%; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 8000; background-color: rgba(0,0,0,0.2);}
.sticky-tabs span.detailsbuttons-background.show {display: block;}

.sticky-tabs .detailsbuttons li a {display: none;}
.sticky-tabs .detailsbuttons li.inactive a {display: flex;}
.sticky-tabs .detailsbuttons li a.active {display: flex;}
.sticky-tabs .detailsbuttons.expanded li a {display: flex;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   17. SEARCH RESULTS (NEW)                                                                                         */
/*                                                                                                                    */
/*====================================================================================================================*/

.search-results-options {width: 100%; padding: 20px 0px 20px 0px; background-color: #ffffff;}
.search-results-list + .search-results-options {border-bottom: solid 1px rgba(132,147,158,0.3);}/* to target only the filter options row directly after the search results */
.search-results-options [class*='grid-'] {margin-bottom: 0px !important;}

.search-filter-overlay {height: 100%; width: 0; position: fixed; z-index: 100000; top: 0; left: 0; background-color: #343f48; overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; transition: opacity 1s;}
.search-filter-sidenav {height: 100%; width: 0; box-sizing: border-box; position: fixed; top: 0; left: -1px; z-index: 110000; background-color: #ffffff; border-right: solid 1px rgba(132,147,158,0.3); overflow-x: hidden; transition: 0.5s; padding: 20px 0px 20px 0px;}
.search-filter-sidenav.sidenav-open {width: 400px;}
.search-filter-sidenav.sidenav-close {width: 0px;}
.search-filter-sidenav::-webkit-scrollbar {width: 6px;}
.search-filter-sidenav::-webkit-scrollbar-track {border-radius: 3px; background-color: rgba(132,147,158,0.2);}
.search-filter-sidenav::-webkit-scrollbar-thumb {border-radius: 3px; background-color: rgba(41,41,41,0.4);}
.search-filter-sidenav .closebtn {display: inline-block; text-decoration: none; color: rgba(41,41,41,0.5); transition: 0.3s; position: absolute; top: 10px; right: 30px; font-size: 3.6rem;}
.search-filter-sidenav .closebtn:hover {color: rgba(41,41,41,1.0);}
.search-filter-sidenav h2 {margin: 0px; padding: 0px 30px 20px 30px; font-size: 2.4rem; font-weight: 800;}
.search-filter-sidenav select {width: 100%;}
.search-filter-sidenav ul, .search-filter-sidenav ul li {list-style: none; margin: 0px; padding: 0px; box-sizing: border-box;}
.search-filter-sidenav > ul {}
.search-filter-sidenav > ul > li {padding: 10px 30px; position: relative;}
.search-filter-sidenav a.clear {text-decoration: none; font-weight: 600; font-size: 1.2rem; color: #027492; position: absolute; top: 14px; right: 30px;}
.search-filter-sidenav a.clear:hover, .search-filter-sidenav a.clear:active, .search-filter-sidenav a.clear:focus {text-decoration: underline;}
.search-filter-sidenav > ul > li > ul {margin-top: 5px;}
.search-filter-sidenav > ul > li > ul > li.search-filter-select {}
.search-filter-sidenav ul.found-reset {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 10px 20px; font-size: 1.6rem; background-color: #027492; color: #ffffff;}
.search-filter-sidenav ul.found-reset li {box-sizing: border-box; padding: 10px;}
.search-filter-sidenav ul.found-reset a.clear-all {display: inline-block; padding: 5px 20px; border: solid 2px rgba(255,255,255,0.5); border-radius: 20px; color: #ffffff; text-decoration: none; font-size: 1.4rem; font-weight: 600; transition: all .3s ease;}
.search-filter-sidenav ul.found-reset a.clear-all:hover, .search-filter-sidenav ul.found-reset a.clear-all:active, .search-filter-sidenav ul.found-reset a.clear-all:focus {/*text-decoration: underline;*/ background-color: #ffffff; color: #027492;}
.search-filter-sidenav div.SumoSelect {width: 100%; box-sizing: border-box;}
.search-filter-sidenav div.SumoSelect .select-all {height: 35px; box-sizing: border-box;}
.search-filter-sidenav p.CaptionCont {padding: 10px 20px; border: solid 1px #ced4d8; border-radius: 3px;}
.search-filter-sidenav p.CaptionCont > label > i {background: url('/images/select-field-arrow.png') left center no-repeat transparent !important; width: 30px; height: auto;}
.search-filter-sidenav div.optWrapper {top: 100% !important; margin-bottom: 40px;}
.search-filter-sidenav div.optWrapper p.select-all {padding-top: 6px; padding-right: 6px; padding-bottom: 6px;}
.search-filter-sidenav div.optWrapper p.select-all span {}
.search-filter-sidenav div.optWrapper p.select-all span i {}
.search-filter-sidenav div.optWrapper p.select-all label {display: block;}
.search-filter-sidenav div.optWrapper ul.options {}
.search-filter-sidenav div.optWrapper ul.options li {}
.search-filter-sidenav div.optWrapper ul.options li span {}
.search-filter-sidenav div.optWrapper ul.options li span i {}
.search-filter-sidenav div.optWrapper ul.options li label {}

.search-sortby-area {display: flex !important;/* must be conflicting with another display from the grid, so use important */ box-sizing: border-box;}
.search-sortby-area select {border-radius: 0px;}
.search-sortby {flex: 0 1 auto; padding: 0px 10px 0px 0px;}
.search-filterby {flex: 0 1 auto; padding: 0px 0px 0px 10px;}
.search-filterby button {cursor: pointer; cursor: hand; color: #343f48; font-size: 1.6rem; font-weight: 400; text-transform: capitalize; text-align: left; padding: 12px 50px 12px 20px; border: solid 1px #ced4d8; border-radius: 0px; background: url('/images/select-field-arrow.png') right center no-repeat transparent; background-color: #ffffff; box-sizing: border-box; transition: all .3s ease; position: relative;}
.search-filterby button span {display: none; box-sizing: border-box; width: 18px; height: 18px; padding: 1px 0px 0px 0px; border-radius: 50%; background-color: #05BA32; position: absolute; bottom: 12px; right: 18px; font-size: 0px; line-height: 0px;}
.search-filterby button span svg {width: 10px; height: 10px; fill: #ffffff; position: relative; top: 3px; left: 4px;}
.search-filterby button.filters-applied {border: solid 1px #05BA32; background-image: none;}
.search-filterby button.filters-applied span {display: inline-block;}

.search-pagination-area {display: flex !important;/* must be conflicting with another display from the grid, so use important */ box-sizing: border-box;}
.search-pagination-area select {border-radius: 0px;}
.search-pagination {display: flex; margin: 0px 0px 0px auto; padding: 0px; list-style: none;}
.search-pagination li {flex: 0 1 auto; padding: 0px 10px;}
.search-pagination li:first-child {padding-left: 0px;}
.search-pagination li:last-child {padding-right: 0px;}
.search-pagination a {display: inline-block; box-sizing: border-box; white-space: nowrap; border: solid 1px #ced4d8; text-align: center; padding: 10px 20px 10px 20px; color: #343f48; text-decoration: none;}
.search-pagination svg {width: 12px; height: 12px;}
.search-pagination svg > * {fill: #343f48;}

.search-results-list {width: 100%; padding: 40px 0px 40px 0px; text-align: left; background-color: rgba(132,147,158,0.2);}
.search-results-list > div:after {content: ''; display: block; clear: both; font-size: 0rem;} /* use this instead of clearfix to allow ability to target last search result div in the below css line */
.search-results-list > div > div:last-child {margin-bottom: 0px;}

.search-result {box-sizing: border-box; border: solid 1px rgba(132,147,158,0.3); background-color: #ffffff;}
.search-result-content {display: flex; box-sizing: border-box;}

.search-result-img {flex: 1 1 25%; min-height: 200px; box-sizing: border-box; position: relative;}
.search-result-img .supplier-logo {padding: 15px 10px 5px 10px; position: absolute; top: 0px; left: 20px; background-color: #ffffff; box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.2);}
.search-result-img .supplier-logo img {max-width: 100px; max-height: 30px; width: auto; height: auto;}

.search-result-info {flex: 1 1 50%; min-height: 200px; padding: 30px 20px; box-sizing: border-box;}
.search-result-info h2 {font-size: 3.0rem; margin: 0px 0px 20px 0px; padding: 0px; font-weight: 800;}
.search-result-info .durdate {display: flex; justify-content: flex-start; align-items: center; list-style: none; margin: 0px; padding: 0px;}
.search-result-info .durdate li {flex: 1 1 auto; margin-right: 20px; position: relative;}
.search-result-info .durdate li:last-child {margin-right: 0px;}

.search-result-info .itinerary {margin: 20px 0px 0px 0px; padding: 0px; position: relative;}
.search-result-info .itinerary svg {width: 13px; height: 13px; margin-right: 5px; position: absolute; top: 5px;}
.search-result-info .itinerary svg * {fill: #027492;}
.search-result-info .itinerary ul {display: block; list-style: none; margin: 0px; padding: 0px 0px 0px 18px;}
.search-result-info .itinerary ul li {display: inline; margin: 0px; padding: 0px; white-space: nowrap;}
.search-result-info .itinerary ul li:after {content: ' -'; padding: 0px 5px; position: relative; top: -1px;}
.search-result-info .itinerary ul li:last-child:after {display: none;}

.search-result-info ul, .search-result-info ul li {margin: 0px; padding: 0px; list-style: none;}
.search-result-info .includes {box-sizing: border-box; list-style: none; margin: 20px 0px 0px 0px; padding: 10px 20px; color: #d02b0f; text-align: left; font-size: 1.4rem; font-weight: 600; background-color: rgba(198,154,81,0.2);}
.search-result-info .includes li {margin: 5px 0px 0px 0px; padding: 0px 0px 0px 27px; position: relative;}
.search-result-info .includes li:first-of-type {margin-top: 0px;}
.search-result-info .includes svg {width: 14px; height: 14px; fill: #d02b0f; position: absolute; top: 3px; left: 0px;}

.search-result-price {flex: 1 1 25%; display: flex; flex-direction: column; justify-content: center; min-height: 200px; padding: 30px 20px; box-sizing: border-box; border-left: solid 1px rgba(132,147,158,0.3);}
.search-result-price .price-from {flex: 1 1 100%; display: flex; flex-direction: column; justify-content: center; margin: 0px 0px 0px 0px; padding: 20px 0px; font-weight: 600; text-align: center;}
.search-result-price .price-from strong {display: block; padding: 0px 0px; font-size: 4.0rem; font-weight: 800; text-align: center;}
.search-result-price .price-from strong span {font-size: 2.6rem; font-weight: 800;}
.search-result-price .price-from-call {flex: 1 1 100%; display: flex; flex-direction: column; justify-content: center; margin: 0px 0px 0px 0px; padding: 20px 0px; font-weight: 600; text-align: center;}
.search-result-price .price-from-call strong {display: block; padding: 0px 0px; font-size: 2.6rem; font-weight: 800; text-align: center;}
.search-result-price .prices-unavailable {flex: 1 1 100%; display: flex; flex-direction: column; justify-content: center; margin: 0px 0px 0px 0px; padding: 20px 0px; font-weight: 600; text-align: center;}
.search-result-price p.more-button {flex: 0 0 auto; margin: 0px;}
.search-result-price p.more-button a {display: flex; box-sizing: border-box; color: #ffffff; background-color: #05BA32; text-decoration: none; text-transform: uppercase; font-size: 1.4rem; transition: all .3s ease;}
.search-result-price p.more-button a:hover {background-color: #A63C06;}
.search-result-price p.more-button span {display: inline-block; box-sizing: border-box; padding: 15px 20px; white-space: nowrap;}
.search-result-price p.more-button span:nth-child(2) {margin-left: auto; padding: auto 20px; background-color: rgba(0,0,0,0.08); line-height: 0px; transition: all .3s ease;}
.search-result-price p.more-button svg {width: 20px; height: 20px; fill: #ffffff;}
.search-result-price p.more-button svg polygon {fill: #ffffff;}

/*=====================================================================================*/
/*   17. SEARCH RESULTS : Media Queries min-width 720px and max-width 959px (Tablet)   */
/*=====================================================================================*/
@media only screen and (min-width: 720px) and (max-width: 959px) {

.search-results-list > div {display: flex; flex-wrap: wrap;}
.search-results-list > div > div:last-child {margin-bottom: 20px;}

}

/*============================================================================*/
/*   17. SEARCH RESULTS : Media Queries max-width 959px (Mobile and Tablet)   */
/*============================================================================*/
@media only screen and (max-width: 959px) {

.search-filter-sidenav.sidenav-open {width: 95%; max-width: 400px;}

.search-sortby-area {}
.search-sortby {flex: 1 1 50%;}
.search-sortby select {width: 100%;}
.search-filterby {flex: 1 1 50%;}
.search-filterby button {width: 100%; white-space: nowrap;}
.search-results-options .search-pagination-area {margin-top: 20px;}

.search-pagination {margin: 0px 0px 0px 0px; width: 100%;}
.search-pagination li {flex: 1 0 auto;}
.search-pagination li:not(.search-page-x-of-x) {flex: 0 1 auto}
.search-pagination li.search-page-x-of-x {flex: 1 0 auto}
.search-pagination li select {border-radius: 0px; width: 100%;}
.search-pagination a span {display: none;}

.search-result-content {flex-direction: column;}

.search-result-img {flex: 1 1 100%;}

.search-result-info {flex: 1 1 100%; min-height: auto;}
.search-result-info .durdate {flex-wrap: wrap;}
.search-result-info .durdate li {flex: 0 1 auto;}
.search-result-info .durdate li:first-child {flex: 1 0 100%; margin-right: 0px;}

.search-result-price {flex: 1 1 100%; min-height: auto; padding: 0px 20px 30px 20px; border-left: none;}
.search-result-price .price-from {padding: 0px 0px 20px 0px;}
.search-result-price .price-from-call {padding: 0px 0px 20px 0px;}
.search-result-price .prices-unavailable {padding: 0px 0px 20px 0px;}

}

/*=======================================================================*/
/*   17. SEARCH RESULTS : Media Queries max-width 354px (Small Mobile)   */
/*=======================================================================*/
@media only screen and (max-width: 354px) {

.search-filter-sidenav.sidenav-open {width: 100%; max-width: 400px;}

.search-pagination li.search-page-x-of-x {flex: 1 1 auto}
.search-pagination a {padding: 10px 15px 10px 15px;}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   18. SEARCH DETAILS (NEW)                                                                                         */
/*                                                                                                                    */
/*====================================================================================================================*/

ul.search-details-summary {margin: 20px 0px 0px 0px; padding: 0px; display: flex; justify-content: space-between;}
ul.search-details-summary li {box-sizing: border-box; list-style: none; min-height: 50px; margin: 0px; padding: 0px; position: relative;}
ul.search-details-summary li.summary-date {padding: 5px 0px 0px 60px; font-size: 1.6rem; color: #ffffff;}
ul.search-details-summary li.summary-date strong {display: block; font-size: 1.4rem; font-weight: 700; color: #988962;}
ul.search-details-summary li.summary-date span {display: inline-block; box-sizing: border-box; width: 50px; height: 50px; padding: 10px; border-radius: 50%; background-color: #25aae1; color: #ffffff; position: absolute; top: 0px; left: 0px;}
ul.search-details-summary li.summary-date span svg {width: 30px; height: 30px; fill: #ffffff;}
ul.search-details-summary li.more-button {margin: auto 0px 0px 0px;}
ul.search-details-summary li.more-button a {display: flex; box-sizing: border-box; color: #ffffff; background-color: #29b360; white-space: nowrap; text-decoration: none; text-transform: uppercase; font-size: 1.4rem; transition: all .3s ease;}
ul.search-details-summary li.more-button a:hover {background-color: #e87e28;}
ul.search-details-summary li.more-button span {display: inline-block; box-sizing: border-box; padding: 15px 20px;}
ul.search-details-summary li.more-button span:nth-child(2) {margin-left: auto; padding: auto 20px; background-color: #239952; line-height: 0px; transition: all .3s ease;}
ul.search-details-summary li.more-button a:hover span:nth-child(2) {background-color: #d97023;}
ul.search-details-summary li.more-button svg {width: 20px; height: 20px; fill: #ffffff;}
ul.search-details-summary li.more-button svg polygon {fill: #ffffff;}

.search-details-itinsummary {display: flex; box-sizing: border-box; margin-bottom: 0px; padding-left: 60px; position: relative;}
.search-details-itinsummary div.itinerary-icon {display: inline-block; box-sizing: border-box; width: 50px; height: 50px; padding: 10px; border-radius: 50%; background-color: #25aae1; color: #ffffff; position: absolute; top: 0px; left: 0px;}
.search-details-itinsummary div.itinerary-icon svg {width: 30px; height: 30px; fill: #ffffff;}
.search-details-itinsummary h2 {font-size: 1.4rem; font-weight: 700; margin: 5px 0px 0px 0px; color: #988962;}
.search-details-itinsummary ul {margin: 0px; padding: 0px;}
.search-details-itinsummary li {display: inline-block; float: left; box-sizing: border-box; list-style: none; margin: 0px; padding: 0px 30px 0px 24px; position: relative;}
.search-details-itinsummary li svg {width: 16px; height: 16px; position: absolute; top: 3px; left: 0px;}
.search-details-itinsummary ul.itinerary-list {}
.search-details-itinsummary ul.itinerary-list li {padding: 0px 0px 0px 0px;}
.search-details-itinsummary ul.itinerary-list li:after {content: '\279D';/*&#10141*/ padding: 0px 15px;}
.search-details-itinsummary ul.itinerary-list li:last-child:after {content: ''; padding: 0px;}
.search-details-itinsummary p.more-button {margin: 0px 0px 0px auto;}
.search-details-itinsummary p.more-button a {display: flex; box-sizing: border-box; color: #ffffff; background-color: #29b360; white-space: nowrap; text-decoration: none; text-transform: uppercase; font-size: 1.4rem;}
.search-details-itinsummary p.more-button span {display: inline-block; box-sizing: border-box; padding: 15px 20px;}
.search-details-itinsummary p.more-button span:nth-child(2) {margin-left: auto; padding: auto 20px; background-color: #239952; line-height: 0px;}
.search-details-itinsummary p.more-button svg {width: 20px; height: 20px; fill: #ffffff;}
.search-details-itinsummary p.more-button svg polygon {fill: #ffffff;}

.search-details-description {box-sizing: border-box; margin-bottom: 0px;}

.search-details-highlights {box-sizing: border-box; background-color: #25aae1; color: #ffffff; margin-bottom: 0px; padding: 15px 20px;}
.search-details-highlights h2 {margin: 0px; font-size: 2.2rem; text-transform: uppercase; color: #ffffff;}
.search-details-highlights ul {margin: 0px; padding: 0px;}
.search-details-highlights li {list-style: none; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 28px; position: relative;}
.search-details-highlights svg {width: 18px; height: 18px; fill: #ffffff; position: absolute; top: 0px; left: 0px;}

.search-details-whatsinc {box-sizing: border-box; margin-bottom: 0px; padding-right: 10px; position: relative;}
.search-details-whatsinc h2 {/*font-weight: 300;*/ margin: 0px 0px 15px 0px; color: #22335f;}
.search-details-whatsinc ul {margin: 0px; padding: 0px;}
.search-details-whatsinc li {list-style: none; box-sizing: border-box; margin: 10px 0px 0px 0px; padding-left: 35px; position: relative;}
.search-details-whatsinc svg {width: 20px; height: 20px; fill: #988962; position: absolute; top: 0px; left: 0px;}
.search-details-whatsinc:after {content: ''; border-right: solid 1px rgba(132,147,158,0.3); position: absolute; top: 0px; bottom: 0px; right: -11px;} /* to add a central border separator between 2x grid-6 */

.search-details-pricebox {box-sizing: border-box; margin-bottom: 0px; padding-left: 10px;}
.search-details-pricebox h2 {/*font-weight: 300;*/ margin: 0px 0px 15px 0px; color: #22335f;}
.search-details-pricebox p {font-size: 1.4rem;}
.search-details-pricebox p:last-of-type {margin-bottom: 0px;}
.search-details-pricebox table {width: 100%; box-sizing: border-box; margin-top: 10px;}
.search-details-pricebox th {box-sizing: border-box; padding: 10px; font-weight: 600; color: #22335f; border-right: solid 1px rgba(0,0,0,0.1); border-bottom: solid 1px rgba(0,0,0,0.1); border-left: solid 1px rgba(0,0,0,0.1);}
.search-details-pricebox .pricebox-head th {background-color: #25aae1; color: #ffffff; border-right: solid 1px rgba(255,255,255,0.3); border-bottom: none; border-left: none; text-align: center;}
.search-details-pricebox .pricebox-head th:last-child {border-right: none;}
.search-details-pricebox td {box-sizing: border-box; padding: 10px; border-right: solid 1px rgba(0,0,0,0.1); border-bottom: solid 1px rgba(0,0,0,0.1); text-align: center;}
.search-details-pricebox td:first-child {border-left: solid 1px rgba(0,0,0,0.1);}

.search-details-agentquote {display: flex; box-sizing: border-box; padding-right: 20px;}
.search-details-agentquote .agent-photo {flex: 0 0 auto; width: 160px; height: 160px; border-radius: 50%; margin-right: 40px; background: url('http://www.golfkings.co.uk/images/team/team_maggie-ohare.jpg') center center / cover no-repeat #019e6c;}
.search-details-agentquote .agent-quote {flex: 0 1 auto;}
.search-details-agentquote h2 {/*font-weight: 300;*/ margin: 0px 0px 20px 0px; color: #22335f;}
.search-details-agentquote p {margin: 40px 0px 0px 0px;}
.search-details-agentquote q {quotes: "\201C" "\201D" "\2039" "\203A"; display: inline-block; padding: 0px 50px; position: relative;}
.search-details-agentquote q:before {display: inline-block; font-family: Georgia, serif; margin: 0px; padding: 0px; color: #988962; font-size: 10.0rem; position: absolute; top: 30px; left: -2px; line-height: 0px;}
.search-details-agentquote q:after {display: inline-block; font-family: Georgia, serif; margin: 0px; padding: 0px; color: #988962; font-size: 10.0rem; position: absolute; bottom: -14px; right: -2px; line-height: 0px;}
.search-details-agentquote p.agent-name {text-align: right; margin: 10px 0px 20px 0px;}
.search-details-agentquote p.agent-name:last-child {margin: 10px 0px 0px 0px;}
.search-details-agentquote span {font-weight: 600; color: #292929;}

.search-details-recommendedexp {box-sizing: border-box; background-color: #25aae1; color: #ffffff; margin-bottom: 0px; padding: 15px 20px;}
.search-details-recommendedexp h2 {font-size: 2.2rem; margin: 0px; text-transform: uppercase;}
.search-details-recommendedexp ul {margin: 0px; padding: 0px; column-count: 1;}
.search-details-recommendedexp li {list-style: none; box-sizing: border-box; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 35px; position: relative;}
.search-details-recommendedexp svg {width: 20px; height: 20px; fill: #ffffff; position: absolute; top: 0px; left: 0px;}

.search-details-ship-spotlight3 {display: flex; width: 100%; min-height: 40vh; padding: 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3);}
.search-details-ship-spotlight3 .search-details-ship-img3 {flex: 1 0 auto; box-sizing: border-box; width: 50%; min-height: 40vh; padding: 40px 10px;}
.search-details-ship-spotlight3 .search-details-ship-options {flex: 1 0 auto; box-sizing: border-box; width: 50%; min-height: 40vh; padding: 40px 10px; display: flex; justify-content: flex-end; align-items: center; background-color: #f0f3f5;}
.search-details-ship-spotlight3 .search-details-ship-options > div {width: 570px/*width same as grid-6 - adjust in media queries to respond*/; box-sizing: border-box; padding-right: 30px;}
.search-details-ship-spotlight3 .supplier-logo {display: inline-block; background-color: #ffffff; padding: 10px 15px; line-height: 0px; border: solid 1px rgba(132,147,158,0.3);}
.search-details-ship-spotlight3 .supplier-logo img {max-width: 120px; max-height: 30px; width: auto; height: auto;}
.search-details-ship-spotlight3 h2 {font-size: 4.0rem; margin: 20px 0px 0px 0px; color: #22335f; font-weight: 600; /*text-transform: capitalize;*/}
.search-details-ship-spotlight3 p {font-size: 1.8rem; margin: 0px 0px 0px 0px; font-weight: 600;}
.search-details-ship-spotlight3 p.ship-spotlight-also {font-size: 1.6rem; margin: 20px 0px 0px 0px; font-weight: 400;}
.search-details-ship-spotlight3 p.ship-spotlight-also a {display: inline-block; color: #22335f; margin: 10px 10px 0px 0px; padding: 2px 10px; border-radius: 3px; font-weight: 600; background-color: #ffffff; border: solid 1px rgba(132,147,158,0.3); text-decoration: none; transition: all .3s ease;}
.search-details-ship-spotlight3 p.ship-spotlight-also strong {font-weight: 600;}
.search-details-ship-spotlight3 p.ship-spotlight-also a:hover {color: #988962;}
.search-details-ship-spotlight3 .ship-spotlight-buttons {display: block; margin-top: 20px; z-index: 1000000;}
.search-details-ship-spotlight3 .ship-spotlight-buttons a, .search-details-ship-spotlight3 .ship-spotlight-buttons a:visited {display: inline-block; padding: 10px 20px; background-color: #29b360; color: #ffffff; text-decoration: none; margin-right: 20px; transition: all .3s ease;}
.search-details-ship-spotlight3 .ship-spotlight-buttons a:hover, .search-details-ship-spotlight3 .ship-spotlight-buttons a:focus, .search-details-ship-spotlight3 .ship-spotlight-buttons a:active {color: #988962; background-color: #ffffff;}

.search-details-ship-spotlight4 {margin-top: 20px;}
.search-details-ship-spotlight4 .container-12 {}
.search-details-ship-spotlight4 .grid-12 {display: flex; min-height: 40vh;}
.search-details-ship-spotlight4 .search-details-ship-img4 {flex: 1 0 auto; box-sizing: border-box; width: 50%; min-height: 40vh; padding: 40px 10px;}
.search-details-ship-spotlight4 .search-details-ship-options {flex: 1 0 auto; display: flex; align-items: center; box-sizing: border-box; width: 50%; min-height: 40vh; padding: 40px 20px; background-color: #f0f3f5;}
.search-details-ship-spotlight4 .search-details-ship-options > div {}
.search-details-ship-spotlight4 .supplier-logo {display: inline-block; background-color: #ffffff; padding: 10px 15px; line-height: 0px; border: solid 1px rgba(132,147,158,0.3);}
.search-details-ship-spotlight4 .supplier-logo img {max-width: 120px; max-height: 30px; width: auto; height: auto;}
.search-details-ship-spotlight4 h2 {font-size: 4.0rem; margin: 20px 0px 0px 0px; color: #22335f; font-weight: 600; /*text-transform: capitalize;*/}
.search-details-ship-spotlight4 p {font-size: 1.8rem; margin: 0px 0px 0px 0px; font-weight: 600;}
.search-details-ship-spotlight4 p.ship-spotlight-also {font-size: 1.6rem; margin: 20px 0px 0px 0px; font-weight: 400;}
.search-details-ship-spotlight4 p.ship-spotlight-also a {display: inline-block; color: #22335f; margin: 10px 10px 0px 0px; padding: 2px 10px; border-radius: 3px; font-weight: 600; background-color: #ffffff; border: solid 1px rgba(132,147,158,0.3); text-decoration: none; transition: all .3s ease;}
.search-details-ship-spotlight4 p.ship-spotlight-also strong {font-weight: 600;}
.search-details-ship-spotlight4 p.ship-spotlight-also a:hover {color: #988962;}
.search-details-ship-spotlight4 .ship-spotlight-buttons {display: block; margin-top: 20px; z-index: 1000000;}
.search-details-ship-spotlight4 .ship-spotlight-buttons a, .search-details-ship-spotlight4 .ship-spotlight-buttons a:visited {display: inline-block; padding: 10px 20px; background-color: #29b360; color: #ffffff; text-decoration: none; margin-right: 20px; transition: all .3s ease;}
.search-details-ship-spotlight4 .ship-spotlight-buttons a:hover, .search-details-ship-spotlight4 .ship-spotlight-buttons a:focus, .search-details-ship-spotlight4 .ship-spotlight-buttons a:active {color: #988962; background-color: #ffffff;}

.search-details-map {/*inline css*/}

.search-details-itinerary-scrollable {height: 50vh; min-height: 300px; overflow: auto; box-sizing: border-box; margin-bottom: 0px; padding-right: 20px;}
.search-details-itinerary-scrollable::-webkit-scrollbar {width: 6px;}
.search-details-itinerary-scrollable::-webkit-scrollbar-track {border-radius: 3px; background-color: rgba(132,147,158,0.2);}
.search-details-itinerary-scrollable::-webkit-scrollbar-thumb {border-radius: 3px; background-color: #292929;}

.search-details-itinerary {box-sizing: border-box; padding-left: 47px; padding-bottom: 0px; border-bottom: 0px; position: relative;} /* Section20 also appled to this too *//* This class name has been removed from same div as grid-12 onto a seperate div because the margin-left was offsetting the div on grid-12 as it has a fixed size */
.search-details-itinerary:before {content: ''; border-left: dotted 2px rgba(132,147,158,0.3); position: absolute; top: 0px; bottom: 0px; left: 14px;}
.search-details-itinerary-item {display: flex; padding-bottom: 20px; margin-bottom: 20px; border-bottom: solid 1px rgba(132,147,158,0.3);}
.search-details-itinerary-item:last-child {padding-bottom: 0px; margin-bottom: 0px; border-bottom: none;}
.search-details-itinerary-info {flex: 2; box-sizing: border-box;}
.search-details-itinerary-info h2 {margin: 0px 0px 5px 0px; position: relative; font-size: 2.2rem; color: #22335f; /*font-weight: 300;*/ /*text-transform: capitalize;*/}
.search-details-itinerary-info h2 svg {width: 40px; height: 40px; padding: 5px 0px; position: absolute; top: -6px; left: -52px; background-color: #ffffff;}
.search-details-itinerary-info h2 svg path {fill: #988962;}
.search-details-itinerary-info p:last-of-type {margin-bottom: 0px;}
.search-details-itinerary-photo {flex: 1; min-height: 200px; background-size: cover !important; margin-left: 20px;}
.search-details-itinerary-more a {display: block; box-sizing: border-box; padding: 5px 20px; border-radius: 3px; background-color: #f0f3f5; color: #29b360; text-align: center; text-decoration: none;}

.search-details-cabins-flex {display: flex; flex-wrap: wrap;}
.search-details-cabin {flex: 0 1 auto; box-sizing: border-box; border: solid 1px rgba(132,147,158,0.3);}
.search-details-cabin-img {height: 180px;}
.search-details-cabin-info {padding: 15px 20px;}
.search-details-cabin-info h2 {margin-top: 0px; font-size: 1.6rem;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   19. CRUISE LINE DETAILS (NEW)                                                                                    */
/*                                                                                                                    */
/*====================================================================================================================*/

.cruise-line-summary ul {display: flex; align-items: center; margin: 0px; padding: 0px;}
.cruise-line-summary ul li {flex: 1 1 auto; box-sizing: border-box; list-style: none; margin: 20px 20px 10px 0px; padding: 0px 0px 0px 45px; font-size: 1.6rem; font-weight: 600; text-align: left; position: relative;}
.cruise-line-summary ul li:last-of-type {margin-right: 0px;}
.cruise-line-summary span {display: inline-block; box-sizing: border-box; width: 30px; height: 30px; padding: 5px 0px 0px 5px; border-radius: 50%; background-color: #25aae1; position: absolute; top: calc(50% - 15px); left: 0px;}
.cruise-line-summary svg {width: 15px; height: 15px; fill: #ffffff; position: absolute; top: 8px; left: 7px;}

.cruise-line-details {box-sizing: border-box;}
.cruise-line-item {display: flex; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; border-bottom: solid 1px rgba(132,147,158,0.3);}
.cruise-line-item:last-of-type {padding-bottom: 0px; margin-bottom: 0px; border-bottom: none;} /* In my test page this works, however in Martys php version there is a clearfix present stopping this from being the last of type */
.cruise-line-item:nth-last-child(2) {padding-bottom: 0px; margin-bottom: 0px; border-bottom: none;} /* Use this version instead if there is a clearfix present allowing it to jump to the previous element */
.cruise-line-item-fullwidth {display: flex; flex-direction: column; padding-bottom: 20px; margin-bottom: 20px; border-bottom: solid 1px rgba(132,147,158,0.3);}
.cruise-line-item-fullwidth:last-of-type {padding-bottom: 0px; margin-bottom: 0px; border-bottom: none;} /* In my test page this works, however in Martys php version there is a clearfix present stopping this from being the last of type */
.cruise-line-item-fullwidth:nth-last-child(2) {padding-bottom: 0px; margin-bottom: 0px; border-bottom: none;} /* Use this version instead if there is a clearfix present allowing it to jump to the previous element */
.cruise-line-info {flex: 1; box-sizing: border-box;}
.cruise-line-info-fullwidth {flex: 1 0 auto; box-sizing: border-box;}
.cruise-line-info h2, .cruise-line-info-fullwidth h2 {margin: 0px 0px 5px 0px; position: relative; font-size: 3.0rem; color: #22335f; font-weight: 300; /*text-transform: capitalize;*/}
.cruise-line-info p:last-of-type, .cruise-line-info-fullwidth p:last-of-type {margin-bottom: 0px;}
.cruise-line-photo {flex: 1; max-width: 40%; min-height: 200px; background-size: cover !important; margin-left: 20px;}
.cruise-line-gallery {flex: 1; max-width: 40%; min-height: 200px; background-size: cover !important; margin-left: 20px;}
.cruise-line-gallery-fullwidth {flex: 1 0 auto; min-width: 100%; min-height: 200px; background-size: cover !important;}
.cruise-line-gallery-fullwidth .section20 {border-bottom: none; padding-bottom: 0px;} /* section20 shouldn't be within this in the html but Marty can't remove it so hide the border etc with css */
.cruise-line-general {flex: 1; max-width: 40%; min-height: 200px; background-size: cover !important; margin-left: 20px;}
.cruise-line-viewgallery {flex: 1; display: flex; justify-content: center; align-items: center; max-width: 40%; min-height: 200px; background-size: cover !important; margin-left: 20px;}
.cruise-line-viewgallery a {display: inline-block; padding: 15px 30px; background-color: #ffffff; color: #29b360; font-size: 1.8rem; font-weight: 600; text-decoration: none; transition: all .3s ease;}
.cruise-line-viewgallery a:hover, .cruise-line-viewgallery a:active, .cruise-line-viewgallery a:focus {color: #e87e28;}

/* Owl Carousel Cruise Line Theme */
.owl-theme-cruiseline {position: relative;}

.owl-theme-cruiseline .item {display: flex; flex-direction: column; box-sizing: border-box; height: 300px;}
.owl-theme-cruiseline .item-img {flex: 1 0 auto;}
.owl-theme-cruiseline .item-info {background-color: #f0f3f5; margin-top: auto; padding: 15px 20px;}
.owl-theme-cruiseline .item-info p {margin: 0px; font-size: 2.0rem; color: #22335f;}

.owl-theme-cruiseline .owl-nav {display: flex; width: 100%; height: 44px; margin: 0px; position: absolute; top: 120px; left: 0px;}
.owl-theme-cruiseline .owl-nav [class*='owl-'] {display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; width: 44px; margin: 0px; color: #29b360; font-size: 1.4rem; background-color: #ffffff; transition: all .3s ease;}
.owl-theme-cruiseline .owl-nav [class*='owl-']:hover {color: #29b360; text-decoration: none;}
.owl-theme-cruiseline .owl-nav .owl-prev {flex: 0 1 auto; position: relative; top: 0px; left: -20px; border-radius: 50%; padding-left: 12px;}
.owl-theme-cruiseline .owl-nav .owl-next {flex: 0 1 auto; margin-left: auto; position: relative; top: 0px; right: -20px; border-radius: 50%; padding-right: 12px;}
.owl-theme-cruiseline .owl-nav .disabled {opacity: 0.5; cursor: default;}
.owl-theme-cruiseline .owl-nav svg {width: 20px; height: 20px;}
.owl-theme-cruiseline .owl-nav svg > * {fill: #22335f; transition: all .3s ease;}
.owl-theme-cruiseline .owl-nav [class*='owl-']:hover svg > * {fill: #29b360;}
.owl-theme-cruiseline .owl-nav.disabled + .owl-dots {margin-top: 10px;}
.owl-theme-cruiseline .owl-dots {text-align: center; -webkit-tap-highlight-color: transparent; margin-top: 10px;}
.owl-theme-cruiseline .owl-dots .owl-dot {display: inline-block; zoom: 1; *display: inline;}
.owl-theme-cruiseline .owl-dots .owl-dot span {width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px;}
.owl-theme-cruiseline .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #869791;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   20. CONTACT US                                                                                                   */
/*                                                                                                                    */
/*====================================================================================================================*/

.contact-info {width: 100%; padding: 20px 0px 20px 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3); background-color: #ffffff;}
.contact-info-wrap {display: flex; flex-wrap: wrap;}

.contact-expert {display: flex; flex-direction: column; box-sizing: border-box; padding: 0px;}
.contact-expert-box {flex: 1 0 auto; box-sizing: border-box; margin: 20px 0px 0px 0px; padding: 15px 20px 15px 20px; position: relative; transition: all .3s ease; text-align: center; border: solid 1px rgba(132,147,158,0.3);}
.contact-expert-box:first-child {margin-top: 0px;}
.contact-expert-box .phoneexpert {font-size: 2.4rem; margin: 0px 0px 0px 0px;}
.contact-expert-box .emailexpert{font-size: 1.4rem; margin: 0px; word-wrap: break-word;}
.contact-expert-box .branchexpert{font-size: 1.4rem; margin: 10px 0px 0px 0px; word-wrap: break-word;}
.contact-expert-box h3 {font-size: 1.4rem; font-weight: 600; text-transform: uppercase; color: #988962; margin: 30px 0px 0px 0px;}
.contact-expert-box h3:first-of-type {margin-top: 0px;}
.contact-expert-box p {font-size: 2.4rem; margin: 0px;}
.contact-expert-box ul {margin: 10px 0px 0px 0px; padding: 5px 0px 0px 0px;}
.contact-expert-box ul li {display: flex; box-sizing: border-box; list-style: none; margin: 0px; padding: 0px 0px 10px 0px; font-size: 1.4rem; text-align: right;}
.contact-expert-box ul li strong {flex: 0; display: inline-block; box-sizing: border-box; width: 40%; margin-right: auto; padding-right: 20px; text-align: left;}
.contact-expert-box svg {width: 40px; height: 40px; position: static; margin-bottom: 10px;}
.contact-expert-box svg path, .contact-expert svg circle {fill: #9CC1EC;}
/*--- For devices who auto change phone numbers to links -----------*/
.contact-expert-box a, .contact-expert-box a:visited, .contact-expert-box a:hover, .contact-expert-box a:active, .contact-expert-box .phoneexpert {color: #292929 !important; text-decoration: none;}

.contact-info-map {box-sizing: border-box; height: 40vh; min-height: 300px; width: 100%; padding: 0px;}

.contact-enquiry {}
.contact-enquiry input[type="text"], .contact-enquiry input[type="tel"], .contact-enquiry input[type="email"], .contact-enquiry input[type="submit"], .contact-enquiry select, .contact-enquiry textarea {width: 100%;}
.contact-enquiry-title {flex: 1; box-sizing: border-box; padding: 15px 20px 15px 90px; position: relative; border: solid 1px rgba(132,147,158,0.3); border-bottom: none;}
.contact-enquiry-title svg {width: 40px; height: 40px; position: absolute; top: 20px; left: 20px;}
.contact-enquiry-title svg path, .contact-enquiry-title svg circle {fill: #25aae1;}
.contact-enquiry-title h3 {font-size: 1.4rem; font-weight: 600; text-transform: uppercase; text-align: left; color: rgba(0,0,0,0.6); margin: 0px;}
.contact-enquiry-title p {font-size: 2.4rem; margin: 0px;}

.contact-enquiry-wrap {display: flex; flex-flow: row wrap; box-sizing: border-box; padding: 0px 10px 20px 10px; border: solid 1px rgba(132,147,158,0.3); border-top: none;}
.contact-enquiry-wrap p {margin: 0px;}
.contact-enquiry-wrap .field-2 {flex-basis: auto; display: flex; flex-wrap: wrap; box-sizing: border-box; width: 50%; padding: 0px 10px 20px 10px;}
.contact-enquiry-wrap .field-1 {flex-basis: auto; display: flex; flex-wrap: wrap; box-sizing: border-box; width: 100%; padding: 0px 10px 20px 10px;}
.contact-enquiry-wrap label {flex-basis: auto; width: 100%; padding-bottom: 10px;}
.contact-enquiry-wrap .field-w-titlename select {flex: 1; margin-right: 20px;}
.contact-enquiry-wrap .field-w-titlename input {flex: 3;}
.contact-enquiry-wrap .field-w-callback select {flex: 1; margin-left: 20px;}
.contact-enquiry-wrap .field-w-callback input {flex: 3;}
.contact-enquiry-wrap .field-w-btn input {flex: 2;}
.contact-enquiry-wrap .field-w-btn button {flex: 1; font-size: 1.4rem; margin-left: 20px;}
.contact-enquiry-wrap .field-manual {margin-left: auto; padding-bottom: 10px;}
.contact-enquiry-wrap .field-manual p {position: relative; top: -10px; text-align: right; width: 100%;}
.contact-enquiry-wrap .field-manual a {text-decoration: underline; color: #343f48;}
.contact-enquiry-wrap .field-manual a:hover, .modal-enquiry-wrap .field-manual a:focus {text-decoration: none;}

.modal-enquiry-wrap .field-w-subscribeby span {flex: 1; display: inline-block; margin-right: 20px;}
.modal-enquiry-wrap .field-w-subscribeby span:last-of-type {margin-right: 0px;}
.modal-enquiry-wrap .field-w-subscribeby label {display: inline-block; padding: 0px 0px 5px 0px; font-weight: 600;}

/*====================================================================================================================*/
/*                                                                                                                    */
/*   21. SPEAK TO AN EXPERT                                                                                           */
/*                                                                                                                    */
/*====================================================================================================================*/

.expert {background: linear-gradient(rgba(8, 61, 84, 0.8), rgba(8, 61, 84, 0.8)), url("/images/experts-bg.jpg") center 65% no-repeat #292929 !important; background-size: cover !important; color: #ffffff; padding: 50px 0px 60px 0px;}
.expert-title {}
.expert-wrap {display: flex;}
.expert-box {flex: 1; box-sizing: border-box; margin-bottom: 0px; padding: 15px 20px 15px 110px; background-color: rgba(0,32,80,0.6); position: relative;}
.expert h2 {font-size: 2.4rem; text-transform: uppercase; text-align: center; color: #ffffff; font-weight: 600; margin: 0px;}
.expert h3 {font-size: 1.4rem; font-weight: 600; text-transform: uppercase; text-align: left; color: rgba(255,255,255,0.6); margin: 0px;}
.expert p {font-size: 2.4rem; margin: 0px;}
.expert svg {width: 40px; height: 40px; position: absolute; top: 20px; left: 40px;}
.expert svg path, .expert svg circle {fill: #ffffff;}
/*--- For devices who auto change phone numbers to links -----------*/
.expert a, .expert a:visited, .expert a:hover, .expert a:active {color: #ffffff; text-decoration: none;}

.expert-general {background-color: #ffffff; padding: 50px 0px 60px 0px; border-bottom: solid 1px rgba(132,147,158,0.3);}
.expert-general-title {}
.expert-general-wrap {display: flex;}
.expert-general-box {flex: 1; box-sizing: border-box; margin-bottom: 0px; padding: 15px 20px 15px 100px; color: #ffffff; background-color: #29b360; position: relative;}
.expert-general span:not(.ruler-main) {display: flex; align-items: center; height: 100%; box-sizing: border-box; padding: 15px 20px; background-color: #05BA32; position: absolute; top: 0px; left: 0px;}
.expert-general svg {width: 40px; height: 40px;}
.expert-general svg path, .expert-general svg circle, .expert-general svg polygon {fill: #ffffff;}
.expert-general h2 {font-size: 2.4rem; text-transform: uppercase; text-align: center; color: #002050; font-weight: 600; margin: 0px;}
.expert-general h3 {font-size: 1.4rem; font-weight: 600; text-transform: uppercase; color: #ffffff; text-align: left; margin: 0px;}
.expert-general p {font-size: 2.0rem; margin: 0px;}
/*--- For devices who auto change phone numbers to links -----------*/
.expert-general a, .expert-general a:visited, .expert-general a:hover, .expert-general a:active {color: #ffffff; text-decoration: none;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   22. PROPOSITION BLOCKS                                                                                           */
/*                                                                                                                    */
/*====================================================================================================================*/

.stretch-boxes, .stretch-boxes > div {display: flex;} /* make all boxes within this container the same height on each row (might only work for container-fluid grids) */

.probblock1 {}
.call-expert {padding: 40px 0px 60px 0px; background-color: #ffffff; border-bottom: solid 1px rgba(132,147,158,0.3);}
.call-expert > div {}
.call-expert .propblock-title {box-sizing: border-box;}
.call-expert .propblock-title h2 {margin: 0px 0px 40px 0px; text-align: center; font-weight: 800;}
.call-expert .propblock-wrap {display: flex; justify-content: center; align-items: center;}
.call-expert .propblock-box {flex: 1 1 auto; box-sizing: border-box; padding: 0px 10px;}
.call-expert .propblock-box:first-child {padding-left: 0px;}
/*.call-expert .propblock-box a {text-decoration: none; color: #027492; font-weight: 600; transition: color .3s ease;}
.call-expert .propblock-box a:hover {}*/
.call-expert .propblock-box img {box-sizing: border-box; min-width: 100px; /*max-width: 263px;*/ max-width: 180px; width: 100%; height: auto; border-radius: 50%; border: solid 5px rgba(0,0,0,0.1); /*transition: border .3s ease;*/}
/*.call-expert .propblock-box a:hover img {border: solid 5px rgba(0,0,0,0.1);}*/
.call-expert .propblock-box span {display: block; min-width: 100px; /*max-width: 263px;*/ max-width: 180px; width: 100%; text-align: center; color: #3d3d3b; font-weight: 600;}
.call-expert .propblock-box-enquire {flex: 1 1 auto; box-sizing: border-box; width: 30%; padding: 0px 40px; text-align: center;}
/*.call-expert .propblock-box-enquire:last-child {padding-right: 0px;}*/
.call-expert .propblock-box-enquire p {margin: 0px; font-weight: 600;}
.call-expert .propblock-box-enquire p strong {display: block; font-size: 3.6rem; font-weight: 800;}
.call-expert .propblock-box-enquire p a {display: block; box-sizing: border-box; width: 100%; margin: 20px auto 0px auto; padding: 15px 20px;  background-color: #29b360; /* background-color: #05BA32; */  border-radius: 3px; color: #ffffff; font-weight: 600; text-decoration: none; transition: background-color .3s ease;}
.call-expert .propblock-box-enquire p a:hover {background-color: #9CC1EC;}


/*== 22. PROPOSITION BLOCKS : Media Queries min-width 960px max-width 1199px (for Large Tablet) ======================*/
@media only screen and (min-width: 960px) and/* (max-width: 1199px)*/ (max-width: 1281px) {

.call-expert .propblock-box-enquire {width: 50%; padding: 0px 20px;}
.call-expert .propblock-box-enquire p strong {font-size: 3.2rem;}

}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 720px max-width 959px (Tablet) =================================*/
@media only screen and/* (min-width: 720px) and*/ (max-width: 959px) {

.call-expert .propblock-title h2 {margin: 0px 0px 20px 0px;}
.call-expert .propblock-wrap {flex-wrap: wrap;}
.call-expert .propblock-box {flex: 0 1 calc(20% + 2px); padding: 0px 0px 20px 10px;}
.call-expert .propblock-box:first-child {flex: 0 1 calc(20% - 10px); padding-left: 0px;}
.call-expert .propblock-box img {min-width: 100%; max-width: 100%;}
.call-expert .propblock-box span {min-width: 100%; max-width: 100%;}
.call-expert .propblock-box-enquire {width: 100%; padding: 20px 40px; margin-top: 20px; background-color: rgba(132,147,158,0.2);}
.call-expert .propblock-box-enquire:last-child {padding-right: 40px;}
.call-expert .propblock-box-enquire p {font-size: 2.2rem; font-weight: 400;}
.call-expert .propblock-box-enquire p a {font-size: 1.6rem;}

}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 0px max-width 719px (Mobile) ===================================*/
@media only screen and (max-width: 719px) {

.call-expert .propblock-box {flex: 0 1 33.33333%; padding: 0px 5px 20px 5px;}
.call-expert .propblock-box:first-child {flex: 0 1 33.33333%; padding-left: 5px;}
.call-expert .propblock-box-enquire p {font-size: 1.8rem;}

}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 0px max-width 380px (Small Mobile) =============================*/
@media only screen and (max-width: 380px) {

.call-expert .propblock-box {flex: 0 1 33.33333%; padding: 0px 5px 20px 5px;}
.call-expert .propblock-box:first-child {flex: 0 1 33.33333%; padding-left: 5px;}
.call-expert .propblock-box-enquire {padding: 20px 20px;}
.call-expert .propblock-box-enquire:last-child {padding-right: 20px;}
.call-expert .propblock-box-enquire p {font-size: 1.6rem;}
.call-expert .propblock-box-enquire p strong {font-size: 3.0rem;}

}

.probblock2 {}
.reasons-to-book {padding: 40px 0px 60px 0px; background-color: rgba(132,147,158,0.2);}
.reasons-to-book .propblock-title {flex: none; box-sizing: border-box;}
.reasons-to-book .propblock-title h2 {margin: 0px 0px 50px 0px; text-align: center; font-weight: 800;}
.reasons-to-book .propblock-box {flex: 1 1 auto; box-sizing: border-box; background-color: #ffffff;}
.reasons-to-book .propblock-box h2 {margin: 0px; padding: 15px 20px; font-size: 1.6rem; font-weight: 600; color: #ffffff; text-transform: uppercase; background-color: #d02b0f;}
.reasons-to-book .propblock-box ul {list-style: none; margin: 0px; padding: 30px 30px;}
.reasons-to-book .propblock-box ul li {margin-bottom: 30px; padding-left: 30px; position: relative;}
.reasons-to-book .propblock-box ul li svg {width: 20px; height: 20px; position: absolute; top: 0px; left: 0px;}
.reasons-to-book .propblock-box ul li svg * {fill: #8cc63e;}

.reasons-to-book2 {padding: 60px 0px 40px 0px; background-color: #ffffff;}
.reasons-to-book2 .propblock-title {flex: none; box-sizing: border-box;}
.reasons-to-book2 .propblock-title h2 {margin: 0px 0px 40px 0px; text-align: center; font-weight: 800;}
.reasons-to-book2 .propblock-title h2 span {position: absolute; bottom: 100000px; left: 0px;}
.reasons-to-book2 .propblock-title h2 svg {display: inline; width: 50px; height: 50px; margin: 0px 5px; position: relative; top: 10px;}
.reasons-to-book2 .propblock-title h2 svg * {fill: #d02b0f;}
.reasons-to-book2 > div > div [class*='grid-'] {border-right: solid 1px rgba(132,147,158,0.3);}
.reasons-to-book2 > div > div [class*='grid-']:last-of-type {border-right: none;}
.reasons-to-book2 .propblock-box {flex: 1 1 auto; box-sizing: border-box; background-color: #ffffff;}
.reasons-to-book2 .propblock-box h2 {margin: 0px; padding: 0px 20px 10px 20px; font-size: 2.4rem; font-weight: 700; text-transform: uppercase; text-align: center;}
.reasons-to-book2 .propblock-box h2 svg {display: inline-block; width: 60px; height: 60px; margin: 0px auto 0px auto;}
.reasons-to-book2 .propblock-box h2 svg * {fill: #343f48;}
.reasons-to-book2 .propblock-box ul {list-style: none; margin: 0px; padding: 0px 30px 0px 30px;}
.reasons-to-book2 .propblock-box ul li {margin-top: 20px; padding-left: 40px; position: relative;}
.reasons-to-book2 .propblock-box ul li svg {width: 20px; height: 20px; position: absolute; top: 0px; left: 0px;}
.reasons-to-book2 .propblock-box ul li svg * {fill: #3d3d3b;}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 960px max-width 1199px (for Large Tablet) ======================*/
@media only screen and (min-width: 960px) and/* (max-width: 1199px)*/ (max-width: 1281px) {

.reasons-to-book2 .propblock-box h2 svg {margin-bottom: 0px;}

}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 720px max-width 959px (Tablet) =================================*/
@media only screen and/* (min-width: 720px) and*/ (max-width: 959px) {

.reasons-to-book2 .propblock-box h2 svg {margin-bottom: 0px;}
.reasons-to-book2 .propblock-box ul {padding: 0px 0px 0px 0px;}
.reasons-to-book2 .propblock-box ul li {padding-left: 26px;}
.reasons-to-book2 .propblock-box ul li svg {width: 16px; height: 16px; top: 3px;}

}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 0px max-width 719px (Mobile) ===================================*/
@media only screen and (max-width: 719px) {

.reasons-to-book2 {padding: 60px 0px 40px 0px;}
.reasons-to-book2 .stretch-boxes, .reasons-to-book2 .stretch-boxes > div {display: block;}
.reasons-to-book2 > div > div [class*='grid-'] {width: 100%; border-right: none; padding: 15px 20px;}
.reasons-to-book2 .propblock-box {flex: none;}

}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 0px max-width 380px (Small Mobile) =============================*/
@media only screen and (max-width: 380px) {

.reasons-to-book2 > div > div [class*='grid-'] {border-right: none;}

}

.probblock3 {}
.brochure-request {padding: 0px 0px 40px 0px; background-color: #ffffff; border-bottom: solid 1px rgba(132,147,158,0.3);}
.brochure-request > div {display: flex;}
.brochure-request .propblock-box {flex: 1 1 auto; box-sizing: border-box; max-width: 500px; margin: 0 auto;}
.brochure-request .propblock-box a {display: block; box-sizing: border-box; margin: 0px; padding: 20px 20px; position: relative; text-align: center; font-weight: 600; color: #ffffff; text-transform: uppercase; text-decoration: none; background-color: #29b360; transition: background-color .3s ease;}
.brochure-request .propblock-box a:hover {background-color: #9BC2E9;}
.brochure-request .propblock-box a svg {width: 20px; height: 20px; position: absolute; top: 20px; right: 20px;}
.brochure-request .propblock-box a svg * {fill: #ffffff;}
.brochure-request .propblock-box a img {position: absolute; bottom: 0px; left: 20px;}

.reasons-to-book + .brochure-request {padding: 0px 0px 40px 0px;}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 960px max-width 1199px (for Large Tablet) ======================*/
@media only screen and (min-width: 960px) and/* (max-width: 1199px)*/ (max-width: 1281px) {



}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 720px max-width 959px (Tablet) =================================*/
@media only screen and/* (min-width: 720px) and*/ (max-width: 959px) {



}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 0px max-width 719px (Mobile) ===================================*/
@media only screen and (max-width: 719px) {

.brochure-request {padding: 0px 0px 40px 0px;}
.brochure-request > div {display: block;}
.brochure-request .propblock-box {flex: none;}
}

/*== 22. PROPOSITION BLOCKS : Media Queries min-width 0px max-width 380px (Small Mobile) =============================*/
@media only screen and (max-width: 380px) {



}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   23. TOOLTIP (Stewart Travel Family)                                                                              */
/*                                                                                                                    */
/*====================================================================================================================*/

.tooltip-wrap {position: relative; z-index: 999;}
.tooltip-wrap .tooltip-item {display: inline-block; position: relative; z-index: 998; font-weight: 700; text-decoration: none; color: #008add;}
.tooltip-wrap:hover .tooltip-item {color: #ffffff;}
.tooltip-wrap .tooltip-content {display: none; box-sizing: border-box; /*opacity: 0;*/ width: 360px; padding: 15px; border: solid 1px rgba(0,0,0,0.3); border-top: solid 50px #292929; background-color: #ffffff; font-size: 1.2rem; text-align: left; position: absolute; top: -15px; left: calc(50% - 180px); z-index: 997; box-shadow: 2px 4px 10px rgba(0,0,0,0.5); /*transition: opacity .3s ease;*/}
.tooltip-wrap:hover .tooltip-content {display: inline-block; /*opacity: 1;*/}
.tooltip-content-columns {display: block; column-count: 2; margin-top: 5px; clear: both;}
.tooltip-content-columns a {display: inline-block; margin-top: 5px; text-decoration: none; color: #008add;}
.tooltip-content-columns a:hover {display: inline-block; margin-top: 5px; text-decoration: none; color: #fba91c;}

@media only screen and (max-width: 719px) {
.tooltip-wrap-device {position: relative;}/* on small device make this relative instead of tooltip-wrap to allow the content box to be full width */
.tooltip-wrap {position: static;}
.tooltip-wrap:hover .tooltip-item {width: 100%; position: absolute; top: 0px; right: 0px; left: 0px;}
.tooltip-wrap .tooltip-content {width: 100%; position: absolute; top: -15px; right: 0px; left: 0px;}
}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   24. INFORMATION PLUS OTHER GENERAL CLASSES MARTY ADDED                                                           */
/*                                                                                                                    */
/*====================================================================================================================*/

.info {width: 100%; padding: 20px 0px 20px 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3); background-color: #ffffff;}
.info h1 {font-size: 4.0rem; color: #22335f; font-weight: 300; /*text-transform: capitalize;*/}
.info h2 {font-size: 2.6rem; color: #22335f; font-weight: 300; /*text-transform: capitalize;*/}
.info h3 {font-size: 2.0rem; color: #22335f; font-weight: 300; /*text-transform: capitalize;*/}
.info h4 {font-size: 1.6rem; color: #22335f; font-weight: 300; /*text-transform: capitalize;*/}
.info h1:first-of-type, .info h2:first-of-type {margin-top: 0px;}
.info h1 strong, .info h2 strong, .info h3 strong, .info h4 strong {font-weight: 400;}
.info p:last-of-type {margin-bottom: 0px;}
.info a {margin-bottom: 0px;}

/* Other General Info Classes Marty Added */
.text-snippet {}
.text-snippet h1 {font-size: 4.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.text-snippet h2 {font-size: 3.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.text-snippet h3 {font-size: 2.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.text-snippet h4 {font-size: 1.6rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.text-snippet h1:first-of-type {margin-top: 0px;}
.text-snippet h1 strong, .text-snippet h2 strong, .text-snippet h3 strong, .text-snippet h4 strong {font-weight: 400;}
.text-snippet h2.with-icon {padding-left: 70px; position: relative;}
.text-snippet h2.with-icon img {position: absolute; top: -5px; left: 0px;}
.text-snippet p:last-of-type {margin-bottom: 0px;}
.text-snippet table {border-top: solid 1px rgba(132,147,158,0.3); border-right: none; border-bottom: none; border-left: solid 1px rgba(132,147,158,0.3);}
.text-snippet table th, .text-snippet table td {border-top: none; border-right: solid 1px rgba(132,147,158,0.3); border-bottom: solid 1px rgba(132,147,158,0.3); border-left: none; padding: 10px 20px; vertical-align: top;}
.text-snippet table td a {word-break: break-all;}
.text-snippet .more-button {display: inline-block; margin: auto 0px 0px 0px;}
.text-snippet .more-button a {display: flex; box-sizing: border-box; color: #ffffff; background-color: #339966; white-space: nowrap; text-decoration: none; text-transform: uppercase; font-size: 1.4rem; transition: all .3s ease;}
.text-snippet .more-button a:hover {background-color: #e87e28;}
.text-snippet .more-button span {display: inline-block; box-sizing: border-box; padding: 15px 20px;}
.text-snippet .more-button span:nth-child(2) {margin-left: auto; padding: auto 20px; background-color: #239952; line-height: 0px; transition: all .3s ease;}
.text-snippet .more-button a:hover span:nth-child(2) {background-color: #d97023;}
.text-snippet .more-button svg {width: 20px; height: 20px; fill: #ffffff;}
.text-snippet .more-button svg polygon {fill: #ffffff;}

.destination-discover h1 {font-size: 4.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.destination-discover h2 {font-size: 3.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.destination-discover h3 {font-size: 2.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.destination-discover h4 {font-size: 1.6rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.destination-discover h1 strong, .destination-discover h2 strong, .destination-discover h3 strong, .destination-discover h4 strong {font-weight: 400;}

.customer-note {}
.customer-note h1 {font-size: 4.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.customer-note h2 {font-size: 3.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.customer-note h3 {font-size: 2.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.customer-note h4 {font-size: 1.6rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.customer-note h1:first-of-type, .customer-note h2:first-of-type {margin-top: 0px;}
.customer-note h1 strong, .customer-note h2 strong, .customer-note h3 strong, .customer-note h4 strong {font-weight: 400;}
.customer-note p:last-of-type {margin-bottom: 0px;}

.customer-note-footer {margin-bottom: 0px;}
.customer-note-footer h1 {font-size: 4.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.customer-note-footer h2 {font-size: 3.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.customer-note-footer h3 {font-size: 2.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.customer-note-footer h4 {font-size: 1.6rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.customer-note-footer h1:first-of-type {margin-top: 0px;}
.customer-note-footer h1 strong, .customer-note-footer h2 strong, .customer-note-footer h3 strong, .customer-note-footer h4 strong {font-weight: 400;}
.customer-note-footer p:last-of-type {margin-bottom: 0px}

.job-details > div {display: flex; align-content: flex-start;}
.job-detail {border: solid 1px rgba(132,147,158,0.3); padding: 30px; box-sizing: border-box;}
.job-detail h1 {font-size: 4.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.job-detail h2 {font-size: 3.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.job-detail h2:first-child {margin-top: 0px;}
.job-detail h3 {font-size: 2.0rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.job-detail h4 {font-size: 1.6rem; color: #22335f; font-weight: 400; /*text-transform: capitalize;*/}
.job-detail h1:first-of-type {margin-top: 0px;}
.job-detail h1 strong, .job-detail h2 strong, .job-detail h3 strong, .job-detail h4 strong {font-weight: 400;}
.job-detail p:last-of-type {margin-bottom: 0px}
.job-details .more-button {margin: 30px 0px 0px 0px;}
.job-details .more-button a {display: flex; box-sizing: border-box; color: #ffffff; background-color: #29b360; white-space: nowrap; text-decoration: none; text-transform: uppercase; font-size: 1.4rem; transition: all .3s ease;}
.job-details .more-button a:hover {background-color: #e87e28;}
.job-details .more-button span {display: inline-block; box-sizing: border-box; padding: 15px 20px;}
.job-details .more-button span:nth-child(2) {margin-left: auto; padding: auto 20px; background-color: #239952; line-height: 0px; transition: all .3s ease;}
.job-details .more-button a:hover span:nth-child(2) {background-color: #d97023;}
.job-details .more-button svg {width: 20px; height: 20px; fill: #ffffff;}
.job-details .more-button svg polygon {fill: #ffffff;}

.client-testimonials > div {display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 0px;}
.client-testimonial {flex: 1 0 auto; box-sizing: border-box; padding: 15px 20px 15px 68px; position: relative; border: solid 1px rgba(132,147,158,0.3);}
.client-testimonial:before {content: '\201C'; display: inline-block; font-family: Georgia, serif; margin: 0px; padding: 0px; color: #988962; font-size: 10.0rem; position: absolute; top: 4px; left: 17px;}
.testimonial-name-date {text-align: right; margin-bottom: 0px; font-size: 1.4rem; font-weight: 600;}
.testimonial-name-date-separate {display: inline-block; padding: 0px 5px;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   25. DESTINATION TILES                                                                                            */
/*                                                                                                                    */
/*====================================================================================================================*/

div.intro-page2 + div > div > div.dest-tile-filter {padding-top: 20px;}
.dest-tile-filter {/*padding-bottom: 20px;*/ display: flex;}
.dest-tile-filter > p {flex: 0 0 auto; display: inline-block; box-sizing: border-box; text-transform: uppercase; text-decoration: none; font-size: 1.4rem; margin: 0px 20px 0px 0px; padding: 10px 0px 6px 0px; border-bottom: solid 4px rgba(132,147,158,0.3);}
.dest-tile-filter > p strong {font-weight: 700;}
.dest-tile-filter > div {flex: 0 0 auto; margin: 0px; padding: 0px; display: flex;/*not needed but added to remove extra space at bottom of div created by font size*/} /*div added to allow functionality on mobile for change to dropdown*/
.dest-tile-filter ul {display: inline-block; list-style: none; margin: 0px; padding: 0px; flex: 0 0 auto;/*not needed but added to remove extra space at bottom of div created by font size*/}
.dest-tile-filter ul:after {content: ''; display: block; clear: both;}
.dest-tile-filter ul > li {margin: 0px; padding: 0px; float: left;}
.dest-tile-filter ul > li > a {display: inline-block; box-sizing: border-box; text-transform: uppercase; text-decoration: none; font-size: 1.4rem; font-weight: 600; margin-right: 20px; padding: 10px 20px; color: #027492; border: solid 1px rgba(132,147,158,0.3); transition: background-color .3s ease, color .3s ease;}
.dest-tile-filter ul > li > a:hover {color: #d02b0f;}
.dest-tile-filter ul > li > a.selected {color: #ffffff; background-color: #A63C06;}
.dest-tile-filter ul > li:last-of-type a {margin-right: 0px;}

.filterthese .filterhide {display: none;}

.dest-tiles {width: 100%; padding: 20px 0px 20px 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3); background-color: #ffffff;}

.dest-tile {position: relative; overflow: hidden; min-height: 400px;}
.dest-tile.short {height: 320px; min-height: 320px;}
.dest-tile img {position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translateX(-50%) translateY(-50%) scale(1); transition: 2.0s ease-in-out;}
.item.dest-tile img {width: 100% !important; height: auto !important;/* add !important here to prevent image squishing when dest-tiles are used within carousel as general carousel has img width 100% */}

.dest-tile a:hover img {transform: translateX(-50%) translateY(-50%) scale(1.1);}
.dest-tile-overlay {width: inherit; height: 60%; position: absolute; top: 40%; right: 0; bottom: 0; left: 0; z-index: 100; background: linear-gradient(to top, rgba(0,32,80,1.0), rgba(0,32,80,0.0));}

.dest-tile .dest-tile-subtitle {position: absolute; top: 0px; right: 0px; left: 0px; text-align: center;}
.dest-tile .dest-tile-subtitle strong {display: inline-block; padding: 10px 20px; background-color: rgba(166,60,6,0.6); color: #ffffff; font-size: 1.4rem; font-weight: 600; text-transform: uppercase;}

.dest-tile .dest-tile-title {z-index: 2000; box-sizing: border-box; width: 100%; position: absolute; bottom: 0px; left: 0px; padding: 15px 20px 40px 20px; text-align: center; transition: bottom .5s ease;}
.dest-tile .dest-tile-title h2 {color: #ffffff; margin: 0px; text-shadow: 0px 1px 2px #000000; font-size: 3.0rem; font-weight: 800;}
.dest-tile .dest-tile-title h2:after {content: ''; display: block; box-sizing: border-box; width: 30%; height: 2px; margin: 10px auto; background-color: #ffffff;}
.dest-tile .dest-tile-title h3 {color: #ffffff; margin: 0px; text-shadow: 0px 1px 2px #000000; font-size: 1.4rem; font-weight: 600; text-transform: uppercase;}
.dest-tile .dest-tile-title p {margin: 0px; color: #ffffff; text-shadow: 0px 1px 2px #000000;}

.dest-tile a:hover .dest-tile-title {bottom: 60px;}

.dest-tile .dest-tile-btn {z-index: 2000; box-sizing: border-box; width: 100%; position: absolute; bottom: -60px; left: 0px; padding: 15px 20px 40px 20px; text-align: center; opacity: 0; transition: all .5s ease;}
.dest-tile a:hover .dest-tile-btn {bottom: 0px; opacity: 1;}
.dest-tile .dest-tile-btn p {display: inline-block; margin: 0px; padding: 10px 20px; /* background-color: #d02b0f; */ background-color: #A63C06; color: #ffffff; border-radius: 3px; font-size: 1.4rem; text-transform: uppercase;}

/*== 25. DESTINATION TILES : Media Queries min-width 960px max-width 1199px (for Large Tablet) =======================*/
@media only screen and (min-width: 960px) and (max-width: 1199px) {

.dest-tile-filter ul > li > a {margin-right: 10px;/*changed*/ padding: 10px 15px;/*changed*/}

.item.dest-tile img {width: auto !important; height: 100% !important;}/* for dest-tile within carousel */

}

/*== 25. DESTINATION TILES : Media Queries max-width 959px (for Mobile and Small Tablet) =============================*/
@media only screen and (max-width: 2959px) {

.dest-tile-filter {}
.dest-tile-filter > p {}
.dest-tile-filter > div {flex: 1 1 auto; position: relative;}
.dest-tile-filter ul {display: flex; flex-direction: column; width: 100%; background-color: #ffffff; border-top: solid 1px rgba(132,147,158,0.3); position: absolute; top: 0px; right: 0px; z-index: 9000;  max-width: 250px;}
.dest-tile-filter ul > li {}
.dest-tile-filter ul > li > a {display: block; margin-right: 0px; border-top: none;}
.dest-tile-filter ul > li > a.selected {background: url('/images/select-field-arrow.png') right center no-repeat #027492;}

.filterbuttons .filterall, .filterbuttons .filter {display: none;}
.filterbuttons .selected {display: block;}
.filterbuttons.expanded .filterall, .filterbuttons.expanded .filter {display: block;}

.item.dest-tile img {width: auto !important; height: 100% !important;}/* for dest-tile within carousel */

}

@media only screen and (min-width: 440px) and (max-width: 719px) { /* extra breakpoint for Mobile */

.dest-tile img {height: 160%;/*to cover the extra width needed on images within destination tiles on wider phone screens*/}
.item.dest-tile img {height: 160% !important;/*to cover the extra width needed on images within destination tiles on wider phone screens*/}

}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   26. RESORTS                                                                                                      */
/*                                                                                                                    */
/*====================================================================================================================*/

.resorts {width: 100%; padding: 20px 0px 20px 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3); background-color: #ffffff;}
.resorts .resort-container {height: 400px; position: relative;}
.resorts .resort-img {height: 200px; box-sizing: border-box;}
.resorts .resort-intro {font-weight: 800; height: 200px; padding: 10px 20px 10px 20px; border: solid 1px rgba(132,147,158,0.3); border-top: 0px; box-sizing: border-box;}
.resorts .resort-intro h3 {color: #ffffff; display: inline-block; margin: 0px; padding: 10px 20px 10px 20px; position: relative; top: 0px; left: -20px; font-style: italic;}

.resorts a {display: inline-block; width: 100%; height: 400px; text-align: center; position: absolute; top: 0px; left: 0px; text-decoration: none; color: #ffffff; background-color: #000000; opacity: 0; transition: all .3s ease;}
.resorts a:hover {opacity: 0.5;}
.resorts a i {font-size: 6.4rem; display: block; margin-top: 80px;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   28. CATEGORY PAGE CONTENT                                                                                        */
/*                                                                                                                    */
/*====================================================================================================================*/

.category-content {width: 100%; padding: 20px 0px 20px 0px; text-align: center; border-bottom: solid 1px rgba(132,147,158,0.3); background-color: #ffffff;}
.category-content img {width: 100%; height: auto;}


/*====================================================================================================================*/
/*                                                                                                                    */
/*   29. Tiles ( tilex1 single height / tilex2 double height / widths are controlled by the grid )                    */
/*                                                                                                                    */
/*====================================================================================================================*/

.tiles {width: 100%; padding: 20px 0px 20px 0px; text-align: left; border-bottom: solid 1px rgba(132,147,158,0.3); background-color: #ffffff;}

/*.tiles div.grid-12:not(.section-title-center-lrg) h2 {font-size: 4.0rem; font-weight: 300; margin-bottom: 0px; color: #25aae1; text-align: center;}*/

.tiles .tilex1 {height: 274px; background-size: cover; position: relative;}
.tiles .tilex2 {height: 568px; background-size: cover; position: relative;}

.tiles .tilex1 h3, .tiles .tilex2 h3 {background-color: rgba(2,116,146,0.8) !important; font-size: 2.0rem; color: #ffffff; display: block; box-sizing: border-box; width: 100%; margin: 0px; padding: 10px 20px 10px 20px;}
.tiles .tilex1 svg, .tiles .tilex2 svg {font-weight: normal; width: 20px; height: 20px; position: relative; top: 3px; left: 0px; margin-right: 4px;}
.tiles .tilex1 svg path, .tiles .tilex2 svg path {fill: #ffffff !important;}
.tiles .tilex1 svg polygon, .tiles .tilex2 svg polygon {fill: #ffffff !important;}
.tiles .tilex1 svg circle, .tiles .tilex2 svg circle {fill: #ffffff !important;}
.tiles .tilex1 svg rect, .tiles .tilex2 svg rect {fill: #ffffff !important;}

.tiles .tilex1 a, .tiles .tilex2 a {display: flex; justify-content: center; align-items: center; width: 100%; position: absolute; top: 0px; left: 0px; text-decoration: none; text-transform: uppercase; font-weight: 600; color: #ffffff; background-color: rgba(0,0,0,0.0); opacity: 0; transition: all .3s ease;}
.tiles .tilex1 a {height: 274px;}
.tiles .tilex2 a {height: 568px;}
.tiles .tilex1 a span, .tiles .tilex2 a span {display: inline-block; box-sizing: border-box; padding: 10px 20px; border: solid 3px #ffffff; max-width: 80%; text-align: center;}
.tiles .tilex1 a:hover, .tiles .tilex2 a:hover {background-color: rgba(0,0,0,0.5); opacity: 1;}

/*==================================================================*/
/*   Responsive Grid 1366px (mediaqueries) (only to adjust banner for smaller desktop) */
/*==================================================================*/
@media only screen and (min-width: 1200px) and (max-width: 1400px) {}

/*==================================================================*/
/*   Responsive Grid 960px (mediaqueries)                           */
/*==================================================================*/
@media only screen and (min-width: 960px) and (max-width: 1199px) {

/*--- Modal Box ----------------------------------------------------*/ /* CHECKED */
.flex-modal-item__content {max-width: 90vw; max-height: 90vh;}
.flex-modal-scrollable__content {max-width: 90vw; max-height: 90vh;}

.modal-expert {padding-bottom: 0px;}
.modal-expert-wrap {flex-direction: column;}
.modal-expert-box {margin: 0px 0px 20px 0px;}
.modal-enquiry {padding-top: 0px; border-top: none;}
.modal-enquiry-wrap {flex-flow: column nowrap; padding-bottom: 10px;}
.modal-enquiry-wrap .field-2 {width: 100%;}
.modal-enquiry-wrap .field-w-btn input {flex: 1;}

/*--- Search Details (NEW) -----------------------------------------*/ /* CHECKED */
.search-details-ship-spotlight3 {min-height: 40vh;}
.search-details-ship-spotlight3 .search-details-ship-options > div {width: 460px/*width same as grid-6 - adjust in media queries to respond*/; padding-right: 10px;}
.search-details-ship-spotlight3 h2 {font-size: 3.0rem;}
.search-details-ship-spotlight3 p {font-size: 1.6rem; font-weight: 400;}

.search-details-ship-spotlight4 .search-details-ship-img4 {min-height: 200px; height: auto;}
.search-details-ship-spotlight4 .search-details-ship-options {height: auto; padding: 20px 20px;}
.search-details-ship-spotlight4 .supplier-logo {width: auto;}
.search-details-ship-spotlight4 h2 {font-size: 3.0rem; margin: 10px 0px 0px 0px;}
.search-details-ship-spotlight4 p {font-size: 1.6rem; font-weight: 400;}

}

/*==================================================================*/
/*   Responsive Grid 720px (mediaqueries)                           */
/*==================================================================*/
@media only screen and (min-width: 720px) and (max-width: 959px) {

/*--- Text Styles --------------------------------------------------*/
h1 {font-size: 3.0rem;}
h2 {font-size: 2.6rem;}
h3 {font-size: 2.0rem;}
h4 {font-size: 1.6rem;}

/*--- Brochure Issuue Embed ----------------------------------------*/ /* CHECKED */
.issuuembed {height: 70vh;}

/*--- Modal Box ----------------------------------------------------*/ /* CHECKED */
.flex-modal-item__content {max-width: 90vw; max-height: 90vh;}
.flex-modal-scrollable__content {max-width: 90vw; max-height: 90vh;}

.modal-expert {padding-bottom: 0px;}
.modal-expert-wrap {flex-direction: column;}
.modal-expert-box {margin: 0px 0px 20px 0px;}
.modal-enquiry {padding-top: 0px; border-top: none;}
.modal-enquiry-wrap {flex-flow: column nowrap; padding-bottom: 10px;}
.modal-enquiry-wrap .field-2 {width: 100%;}
.modal-enquiry-wrap .field-w-btn input {flex: 1;}

/*--- Owl Carousel -------------------------------------------------*/ /* CHECKED */
.owl-theme-heroimg .owl-nav .owl-prev {top: calc(-20vh - 40px);}
.owl-theme-heroimg .owl-nav .owl-next {top: calc(-20vh - 40px);}
.owl-theme-heroimg .owl-nav svg {width: 60px; height: 60px;}

.heroimg-slider-promo-txt .promo-content {width: 50%;}

/*--- Search Details (NEW) -----------------------------------------*/ /* CHECKED */
ul.search-details-summary {flex-wrap: wrap;}
ul.search-details-summary li {flex: 1 0 100%; min-height: auto;}
ul.search-details-summary li.summary-date {display: flex; padding: 0px 0px 10px 28px;}
ul.search-details-summary li.summary-date strong {flex: 1; display: inline-block; margin-right: 10px; font-size: 1.6rem;}
ul.search-details-summary li.summary-date span {width: 18px; height: 18px; padding: 0px; border-radius: 0%; background-color: transparent; top: 2px;}
ul.search-details-summary li.summary-date span svg {width: 18px; height: 18px; fill: rgba(255,255,255,0.7);}
ul.search-details-summary li.more-button {flex: 0 1 auto; margin: 20px 0px 0px auto;}

.search-details-itinsummary {padding-left: 28px;}
.search-details-itinsummary div.itinerary-icon {width: 18px; height: 18px; padding: 0px; border-radius: 0%; background-color: transparent; top: 2px;}
.search-details-itinsummary div.itinerary-icon svg {width: 18px; height: 18px; fill: #292929;}
.search-details-itinsummary h2 {font-size: 1.6rem; margin: 0px 0px 0px 0px;}
.search-details-itinsummary ul.itinerary-list li:after {padding: 0px 8px; font-size: 1.2rem; position: relative; top: -1px;}

.search-details-highlights {margin-top: 10px;}
.search-details-highlights:first-child {margin-top: 0px;}

.search-details-whatsinc {padding-right: 0px;}
.search-details-whatsinc:after {border-right: none; right: 0px;}

.search-details-pricebox {margin-top: 40px; padding: 0px;}
.search-details-pricebox:first-child {margin-top: 0px;}

.search-details-recommendedexp {margin-top: 10px;}
.search-details-recommendedexp:first-child {margin-top: 0px;}

.search-details-ship-spotlight3 {min-height: 30vh;}
.search-details-ship-spotlight3 .search-details-ship-options > div {width: 340px/*width same as grid-6 - adjust in media queries to respond*/; padding-right: 10px;}
.search-details-ship-spotlight3 h2 {font-size: 3.0rem;}
.search-details-ship-spotlight3 p {font-size: 1.6rem; font-weight: 400;}

.search-details-ship-spotlight4 .search-details-ship-img4 {min-height: 200px; height: auto;}
.search-details-ship-spotlight4 .search-details-ship-options {height: auto; padding: 20px 20px;}
.search-details-ship-spotlight4 .supplier-logo {width: auto;}
.search-details-ship-spotlight4 h2 {font-size: 3.0rem; margin: 10px 0px 0px 0px;}
.search-details-ship-spotlight4 p {font-size: 1.6rem; font-weight: 400;}

/*--- Cruise Line Details ------------------------------------------*/ /* CHECKED */
.cruise-line-summary ul {flex-wrap: wrap; align-items: flex-start;}
.cruise-line-summary ul li {flex: 1 1 50%; margin: 10px 0px 10px 0px;}

/*--- Speak to an Expert -------------------------------------------*/ /* CHECKED */
.expert-box {padding: 15px 20px 15px 20px; text-align: center;}
.expert h3 {text-align: center; margin: 5px 0px 0px 0px;}
.expert p {font-size: 2.0rem;}
.expert svg {position: static;}

.expert-general-box {padding: 70px 20px 15px 20px; text-align: center;}
.expert-general span:not(.ruler-main) {justify-content: center; width: 100%; height: auto; padding: 15px 20px 0px 20px; background-color: #29b360;}
.expert-general h3 {text-align: center;}

/*--- Category Page Content ----------------------------------------*/ /* IS THIS NEEDED? */
.category-content .page-content-block-cruise- .grid-6 {width: 700px;}

}
	
/*==================================================================*/
/*   Responsive Grid lt 720px / Mobile (mediaqueries)               */ /* NEED TO RECHECK ALL THIS CODE AGAINST DESKTOP VERSION */
/*==================================================================*/
@media only screen and (max-width: 719px) {

/*--- Text Styles --------------------------------------------------*/ /* CHECKED */
h1 {font-size: 3.0rem;}
h2 {font-size: 2.6rem;}
h3 {font-size: 2.0rem;}
h4 {font-size: 1.6rem;}

/*--- Brochure Issuue Embed ----------------------------------------*/ /* CHECKED */
.issuuembed {height: 70vh;}

/*--- Scroll Call Button For Mobile --------------------------------*/ /* This was used to adjust the sticky call us banner on desktop to a circle button on mobile, however when the live chat was added for mobile instead we had to remove this round call button without removing the desktop banner. Because the javascript is controlling the css display it might be best offsetting this call button for mobile only offscreen, hence the position absolute in use */
a.go-call {display: none; position: fixed; bottom: 20px; left: 20px; /*position: absolute; bottom: 10000px; right: 10000px;*/ z-index: 10000; width: 40px; height: 40px; text-decoration: none; text-align: center; color: #ffffff; background-color: #29b360; font-size: 1.6rem; padding: 15px; border-radius: 50%;}
a.go-call svg {width: 40px; height: 40px; position: relative; top: 0px;}
a.go-call > svg {display: block;}
a.go-call span {display: none;}
a.go-call.go-call-hide {position: absolute; bottom: 10000px; right: 10000px;}

/*--- Modal Box ----------------------------------------------------*/ /* CHECKED */
.flex-modal-item__content {max-width: 90vw; max-height: 90vh;}
.flex-modal-scrollable__content {max-width: 90vw; max-height: 90vh;}

.modal-expert {padding-bottom: 0px;}
.modal-expert-wrap {flex-direction: column;}
.modal-expert-box {margin: 0px 0px 20px 0px;}
.modal-enquiry {padding-top: 0px; border-top: none;}
.modal-enquiry-wrap {flex-flow: column nowrap; padding-bottom: 10px;}
.modal-enquiry-wrap .field-2 {width: 100%;}
.modal-enquiry-wrap .field-w-btn input {flex: 1;}

/*--- Owl Carousel -------------------------------------------------*/ /* CHECKED */
.heroimg-slider {min-height: 200px;}
.owl-theme-heroimg {min-height: 200px;}
.owl-theme-heroimg .item {min-height: 200px;}
.owl-theme-heroimg .owl-nav .owl-prev {top: calc(-20vh - 30px); /* here it uses the minimum 300px height instead of the 40vh virtual height */}
.owl-theme-heroimg .owl-nav .owl-next {top: calc(-20vh - 30px); /* here it uses the minimum 300px height instead of the 40vh virtual height */}
.owl-theme-heroimg .owl-nav svg {width: 40px; height: 40px;}

.heroimg-slider-promo-txt {min-height: 200px;}
.heroimg-slider-promo-txt .promo-content {width: 100%;}
.heroimg-slider-promo-txt .promo-content .promo-cruiselogo {max-width: 120px; max-height: 30px; margin-bottom: 10px;}
.heroimg-slider-promo-txt .promo-content .promo-ribbon {padding: 6px 20px 6px 40px; font-size: 1.4rem;}
.heroimg-slider-promo-txt .promo-content .promo-txt {font-size: 2.2rem; margin-top: 10px;}
.heroimg-slider-promo-txt .promo-content .promo-txt br {content: " ";}
.heroimg-slider-promo-txt .promo-content .promo-txt br:after {content: " ";}
.heroimg-slider-promo-txt .promo-content .promo-txt-resize {font-size: 2.0rem;}
.heroimg-slider-promo-txt .promo-content .promo-txt-resize br {content: " ";}
.heroimg-slider-promo-txt .promo-content .promo-txt-resize br:after {content: " ";}

.heroimg-slider-promo-img {min-height: 200px;}

/*.section-title {text-align: left; position: relative;}
.section-title h2 {font-size: 2.6rem; margin: auto 0px 0px 0px; color: #22335f;}*/

/*.section-title2 {text-align: center;}*/ /* normally applied to a grid-12 for a title and intro on a white bg */
/*.section-title2 h2 {font-size: 2.6rem; margin-bottom: 0px; color: #22335f;}
.section-title2 p {}*/

/*.section-title-center-lrg:before {margin-top: 2px;}
.section-title-center-lrg h2 {font-size: 3.0rem; margin: 0px 20%; padding: 0px 15px;}*/
/*.section-title-center-lrg h2 {font-size: 3.0rem;}
.section-title-center-lrg h2:before {margin-top: 2px;}*/


/*--- Flex Tabs ----------------------------------------------------*/ /* CHECKED */

/*--- Flex Tab Links ---*/
/*.flex-tab-links ul {flex-direction: column;}
.flex-tab-links ul li {border-bottom-width: 0px; border-right-width: 1px;}
.flex-tab-links ul li:last-child {border-bottom-width: 1px;}*/

/*--- Content of Flex Tabs ---*/
/*.flex-tab-content .flex-tab > div > h2 {font-size: 2.6rem;}
.flex-tab-content .customer-note *:first-child {margin-top: 0px;}
.flex-tab-content .customer-note h2 {font-size: 3.0rem;}
.flex-tab-content .customer-note-footer {}
.cruise-cabins-flex > div > h2 {font-size: 2.6rem;}
.cruise-cabin-info h2 {font-size: 2.2rem; font-weight: 600;}*/


/*--- Search Details (NEW) -----------------------------------------*/ /* CHECKED */
ul.search-details-summary {flex-wrap: wrap;}
ul.search-details-summary li {flex: 1 0 100%; min-height: auto;}
ul.search-details-summary li.summary-date {display: flex; padding: 0px 0px 10px 28px;}
ul.search-details-summary li.summary-date strong {flex: 1; display: inline-block; margin-right: 10px; font-size: 1.6rem;}
ul.search-details-summary li.summary-date span {width: 18px; height: 18px; padding: 0px; border-radius: 0%; background-color: transparent; top: 2px;}
ul.search-details-summary li.summary-date span svg {width: 18px; height: 18px; fill: rgba(255,255,255,0.7);}
ul.search-details-summary li.more-button {margin: 20px 0px 0px 0px;}

.search-details-itinsummary {padding-left: 28px;}
.search-details-itinsummary div.itinerary-icon {width: 18px; height: 18px; padding: 0px; border-radius: 0%; background-color: transparent; top: 2px;}
.search-details-itinsummary div.itinerary-icon svg {width: 18px; height: 18px; fill: #292929;}
.search-details-itinsummary h2 {font-size: 1.6rem; margin: 0px 0px 0px 0px;}
.search-details-itinsummary ul.itinerary-list li:after {padding: 0px 8px; font-size: 1.2rem; position: relative; top: -1px;}

.search-details-highlights {margin-top: 20px;}

.search-details-whatsinc {padding-right: 0px;}
.search-details-whatsinc h2 {font-weight: 400;}
.search-details-whatsinc li {padding-left: 28px;}
.search-details-whatsinc svg {width: 18px; height: 18px; top: 2px;}
.search-details-whatsinc:after {border-right: none; right: 0px;}

.search-details-pricebox {margin-top: 40px; padding-left: 0px;}
.search-details-pricebox h2 {font-weight: 400;}
.search-details-pricebox table, .search-details-pricebox tbody, .search-details-pricebox tr, .search-details-pricebox td {display: block; box-sizing: border-box; width: 100%;}
.search-details-pricebox thead, .search-details-pricebox tr.pricebox-head {position: absolute; top: -9999px; left: -9999px;}
.search-details-pricebox tr {border: solid 1px rgba(0,0,0,0.1); border-bottom: none; padding: 10px 20px 9px 10px;}
.search-details-pricebox tr:last-child {border-bottom: solid 1px rgba(0,0,0,0.1);}
.search-details-pricebox td {display: flex; align-items: baseline; padding: 0px 0px 1px 0px; border-right: none; border-bottom: none; text-align: left;}
.search-details-pricebox td:before {content: attr(data-th)": "; display: inline-block; flex: 0 1 47%; font-weight: 400; color: #ffffff; padding: 5px 10px; margin-right: 20px; background-color: #25aae1;}
.search-details-pricebox td:first-child {border-left: none;}

.search-details-agentquote {padding-right: 0px;}
.search-details-agentquote h2 {font-weight: 400;}
.search-details-agentquote p {margin: 0px;}
.search-details-agentquote q {padding: 0px 30px;}
.search-details-agentquote q:before {font-size: 5.0rem; top: 18px; left: -1px;}
.search-details-agentquote q:after {font-size: 5.0rem; bottom: 4px; right: -1px;}

.search-details-recommendedexp {margin-top: 20px;}

.search-details-ship-spotlight3 {flex-direction: column; width: auto; min-height: auto;}
.search-details-ship-spotlight3 .search-details-ship-img3 {order: 1; width: 100%; min-height: 200px; height: auto;}
.search-details-ship-spotlight3 .search-details-ship-options {order: 2; width: 100%; height: auto; padding: 20px 20px;}
.search-details-ship-spotlight3 .search-details-ship-options > div {width: 100%/*width same as grid-6 - adjust in media queries to respond*/; padding-right: 0px;}
.search-details-ship-spotlight3 h2 {font-size: 3.0rem; margin: 10px 0px 0px 0px;}
.search-details-ship-spotlight3 p {font-size: 1.6rem; font-weight: 400;}

.search-details-ship-spotlight4 .grid-12 {flex-direction: column;}
.search-details-ship-spotlight4 .search-details-ship-img4 {order: 1; width: 100%; min-height: 200px; height: auto;}
.search-details-ship-spotlight4 .search-details-ship-options {order: 2; width: 100%; height: auto; padding: 20px 20px;}
.search-details-ship-spotlight4 .supplier-logo {width: auto;}
.search-details-ship-spotlight4 h2 {font-size: 3.0rem; margin: 10px 0px 0px 0px;}
.search-details-ship-spotlight4 p {font-size: 1.6rem; font-weight: 400;}

.search-details-itinerary {padding-left: 28px;}
.search-details-itinerary:before {left: 9px;}
.search-details-itinerary-item {flex-direction: column;}
.search-details-itinerary-info {flex: 1;}
.search-details-itinerary-info h2 svg {width: 28px; height: 28px; top: 0px; left: -32px;}
.search-details-itinerary-info .cruise-arrdep span {display: block;}
.search-details-itinerary-info .cruise-arrdep span.cruise-arrdep-separate {display: none;}
.search-details-itinerary-photo {margin: 20px 0px 0px 0px;}

/*--- Cruise Line Details ------------------------------------------*/ /* CHECKED */
.cruise-line-summary ul {flex-direction: column; align-items: flex-start;}
.cruise-line-summary ul li {flex: 1 0 auto; margin: 10px 0px 10px 0px;}

.cruise-line-item {flex-direction: column; flex-wrap: nowrap;}
.cruise-line-info-fullwidth {flex: 1 0 auto; box-sizing: border-box;}
.cruise-line-info h2, .cruise-line-info-fullwidth h2 {font-size: 2.6rem; font-weight: 400;}
.cruise-line-info p:last-of-type, .cruise-line-info-fullwidth p:last-of-type {}
.cruise-line-photo {max-width: 100%; margin: 20px 0px 0px 0px;}
.cruise-line-gallery {max-width: 100%; margin: 20px 0px 0px 0px;}
.cruise-line-gallery-fullwidth {flex: 1 0 auto;}
.cruise-line-general {max-width: 100%; margin: 20px 0px 0px 0px;}
.cruise-line-viewgallery {max-width: 1000%; margin: 20px 0px 0px 0px;}

/*--- Speak to an Expert -------------------------------------------*/ /* CHECKED */
.expert-wrap {flex-direction: column;}
.expert-box {margin-bottom: 20px;}
.expert-box:last-child {margin-bottom: 0px;}

.expert-general-wrap {flex-direction: column;}
.expert-general-box {margin-bottom: 20px;}
.expert-general-box:last-child {margin-bottom: 0px;}

/*--- Information Plus Other General Classes Marty Added -----------*/ /* YOU ARE HERE WITH CODE TIDY */
.info h1 {font-size: 3.0rem;}
.info h2 {font-size: 2.6rem;}
.info h3 {font-size: 2.0rem;}
.info h4 {font-size: 1.6rem;}

.text-snippet h1 {font-size: 3.0rem;}
.text-snippet h2 {font-size: 2.6rem;}
.text-snippet h3 {font-size: 2.0rem;}
.text-snippet h4 {font-size: 1.6rem;}
.text-snippet h1:first-of-type {margin-top: 0px;}
.text-snippet h2.with-icon {padding-left: 70px; position: relative;}
.text-snippet h2.with-icon img {position: absolute; top: -5px; left: 0px;}

.destination-discover h1 {font-size: 3.0rem;}
.destination-discover h2 {font-size: 2.6rem;}
.destination-discover h3 {font-size: 2.0rem;}
.destination-discover h4 {font-size: 1.6rem;}

.customer-note h1 {font-size: 3.0rem;}
.customer-note h2 {font-size: 2.6rem !important;}
.customer-note h3 {font-size: 2.0rem;}
.customer-note h4 {font-size: 1.6rem;}

.customer-note-footer h1 {font-size: 3.0rem;}
.customer-note-footer h2 {font-size: 2.6rem;}
.customer-note-footer h3 {font-size: 2.0rem;}
.customer-note-footer h4 {font-size: 1.6rem;}

/*--- Hide Live Chat On Phone Temporarily --------------------------*/ /* Marty has found a jquery solution */
/*#srContent, #srLaunchContainer {display: none !important;}*/

a#srLaunch {
    right: -34px !important;
    bottom: 0px !important;
    width: 72px !important;
    height: 72px !important;
	}

a#srLaunch img {
    /* ORIGINAL ICON
	width: 42px !important;
    height: 42px !important;
	*/

    /* UPDATED ICON */
	width: 72px !important;
    height: 72px !important;

    margin: 0px auto !important;
}


}

/*==================================================================*/
/*   Odd Extras (small phone)                                       */
/*==================================================================*/
@media only screen and (max-width: 354px) {

/*--- Scroll Call Button For Mobile --------------------------------*/ /* This was used to adjust the sticky call us banner on desktop to a circle button on mobile, however when the live chat was added for mobile instead we had to remove this round call button without removing the desktop banner. Because the javascript is controlling the css display it might be best offsetting this call button for mobile only offscreen, hence the position absolute in use */
a.go-call {display: none; position: fixed; bottom: 20px; left: 20px; /*position: absolute; bottom: 10000px; right: 10000px;*/ z-index: 10000; width: 30px; height: 30px; text-decoration: none; text-align: center; color: #ffffff; background-color: #29b360; font-size: 1.6rem; padding: 12px; border-radius: 50%;}
a.go-call svg {width: 30px; height: 30px; position: relative; top: 0px;}
a.go-call > svg {display: block;}
a.go-call span {display: none;}
a.go-call.go-call-hide {position: absolute; bottom: 10000px; right: 10000px;}

.modal-expert-box p {font-size: 2.0rem;}
.modal-enquiry-title p {font-size: 2.0rem;}
.modal-enquiry-wrap .field-w-titlename select {flex: none; margin: 0px 0px 20px 0px; display: block;}
.modal-enquiry-wrap .field-w-titlename input {flex: none; display: block;}

/*--- Owl Carousel -------------------------------------------------*/
.heroimg-slider-promo-txt .promo-content .promo-txt {font-size: 1.8rem; margin-top: 10px;}
.heroimg-slider-promo-txt .promo-content .promo-txt-resize {font-size: 1.6rem; margin-top: 10px;}

/*.section-title-center-lrg h2 {font-size: 2.6rem;}*/

/*--- Search Details (NEW) -----------------------------------------*/ /* CHECKED */
ul.search-details-summary li.summary-date {display: block;}
ul.search-details-summary li.summary-date strong {display: block;}

/*--- Speak to an Expert -------------------------------------------*/
.expert h2 {font-size: 2.0rem;}
.expert p {font-size: 1.8rem;}
.expert-general h2 {font-size: 2.0rem;}
.expert-general p {font-size: 1.8rem;}

a#srLaunch {
    right: -34px !important;
    bottom: 0px !important;
    width: 55px !important;
    height: 55px !important;
	}

a#srLaunch img {
    width: 32px !important;
    height: 32px !important;
    margin: 12px auto !important;
}


}

/*==================================================================*/
/*   Responsive Image                                               */
/*==================================================================*/
img.scale, img.responsive {max-width: 100%; height: auto;}


/*==================================================================*/
/*    Form Error                                                    */
/*==================================================================*/
.FormErrorClass {background: #ffcccc;}

.cmw {
    max-width: 1160px;
    margin: 0 auto;
}

/*==================================================================*/
/*    Mapbox interactive map                                        */
/*==================================================================*/


.mapboxgl-marker {
    z-index : 999997;
    height : 36px;
}

.mapboxgl-marker.isSelected {
    z-index : 999998;
}

.mapboxgl-marker.isSelected .marker-text-container {

    display: flex;
    align-items: center;
    justify-content: center;

}

.mapboxgl-marker .marker-text-container {
    position : absolute;
    top : 100%;
    font-weight : 700;
    display : none;
    width: 200px;
    text-align: center;
    left: -85px;
}

.mapboxgl-marker .marker-text {
   
    padding: 10px;
    background-color : rgba(255,255,255,.9);
    font-size:12px;
    border : 1px solid #988962;
    border-radius : 10px;
    display: block;
}

.details-itinerary.mapbox .accordion-map{ order : 2;}
.details-itinerary.mapbox .accordion{ order : 1;}


@media only screen and (max-width: 719px){
  .map-itinerary {
    display : block;
  }
    .details-itinerary.mapbox .accordion-map { 
        position: -webkit-sticky; 
        position : sticky; 
        order : 1;
        top : 60px; 
        z-index: 9999;
        height : auto;
        
    }
    .details-itinerary.mapbox .accordion-map .mapboxgl-map {position : relative;}
    .details-itinerary.mapbox .accordion{ order : 2; z-index: 9998;}
}

.container {
    position : relative; 
    margin: 0 auto;
    max-width: 1180px;
    padding: 0;}
/*
  .items {
    display : flex; 
    flex-direction : column; 
    scroll-snap-type: y mandatory;}

  .item {
    padding-left : 10px;
    scroll-snap-align: center; 
    position : relative; }
*/

  .map-itinerary {
    display : flex;
  }
  @media only screen and (max-width: 719px){
    .map-itinerary {
      display : block;
    }}

  .map-itinerary #map { order : 2 }

  #map { 
    position: -webkit-sticky;
    position : sticky;
    width : 100%; 
    height : 435px; 
    top : 60px; 
    z-index : 8999; 
    border-bottom : 30px solid #fff;}

  .mapboxgl-canvas-container {
    position : relative; 
    margin: 0 auto;
    max-width: 1180px;
    padding: 0;}

    @media only screen and (max-width: 719px){
      #map{height : 200px; border-bottom : 20px solid #fff;}
    }

  @media only screen and (min-width: 720px) and (max-width: 1000px){
    #map{height : 400px; }
  }

  .itinerary-marker { width : 33px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2px' height='6px' viewBox='0 0 2 6' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Ccircle cx='1' cy='1' r='1' style='fill:%23ab8c08;fill-opacity:0.66;'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: repeat-y;
    text-align : center;
  }

  .itinerary-content {
    max-width : 96%;
    flex-grow : 1;
    display : flex;
    flex-wrap : wrap;
    justify-content: space-between;
    border-bottom : 1px solid #ab8c08;
    padding-bottom : 25px;
    margin-bottom : 25px;
  }
  .itinerary-item:last-child .itinerary-content {
    border-bottom : none;
    padding-bottom : 0px;
    margin-bottom : 50px;
  }


  .itinerary-item {
    display : flex;
    flex-wrap : wrap;
    justify-content: space-between;

  }

  .itinerary-title { width : 100%; margin : 10px 0 0;font-size : 1.8rem;font-weight : 700;}

  .itinerary-info,
  .itinerary-hotels { /*width : 50%;*/ width : 100%;flex-grow : 1;}

  .itinerary-info {/* width : 45%;*/ width : 100%; padding-right : 30px; line-height : 1.5;}

  .itinerary-hotels {display : flex;flex-direction : column;}

  .hotels-section {
    display : flex;
    flex-wrap : wrap;
    justify-content: space-between;
  }

  .hotels-section--title {
    font-size : 1.4rem;
    font-weight : 700;
    margin : 15px 0 10px;
    width : 100%;
  }

  .itinerary-hotel {
    /*flex-grow : 1;*/
     /*max-width : 48%; */
    width : 290px;
    display : flex;
    align-items: flex-end;
    margin-bottom : 10px;
	margin-right : 10px;
    cursor : pointer;
    text-decoration : none;
  }

  .itinerary-hotel--list{ flex-direction : column;}
  .itinerary-hotel--image { max-width : 100%; display: block;}
  .itinerary-hotel--title {
    background-color: #eee; 
    margin : 120px 0 0; 
    padding : 10px ; 
    font-size : 1.3rem; 
    font-weight : 700;
    color :  #343f48;
    width : 100%;
  }

  @media only screen and (max-width: 760px){
    .itinerary-marker{display : none;}
    .itinerary-content { max-width : 100%;}
    .hotels-section,.itinerary-hotels { flex-direction : column;}
    .itinerary-hotel { max-width : 100%;}
  }
  @media only screen and (min-width: 760px) and (max-width: 1000px){
    .itinerary-content { max-width : 94%; }
  }

  @media only screen and (max-width: 960px){
    .call-expert .propblock-wrap{ flex-wrap: wrap;}
	  
  }
  @media only screen and (min-width: 961px) and (max-width: 1480px){
    .call-expert .propblock-wrap{ flex-wrap: wrap;}
    .call-expert .propblock-box-enquire {
    width: 75%;
    padding: 20px 40px;
    margin-top: 20px;
    background-color: rgba(132,147,158,0.2);
}
  }

  @media only screen and (min-width: 1200px){
  /*.itinerary-hotels {flex-direction : row;}*/
  .itinerary-hotel--list{ flex-direction : row;}
  }

 /* callback button removed as per simons email 07/04/2020 */

 .modal-expert-box:last-child, .expert-general-wrap .modal-link:nth-child(0) {
    display: none;
}

   /* Remove phone numbers as per discussion with Grahame 2020-04-16 */

/*header .header-phone, a.go-call, .modal-expert-box:first-child, .expert-general-box:first-child, .propblock-box-enquire p:first-child, .propblock-box-enquire p:nth-child(2), header div.phone-btn {display: none !important;}*/

/*====================================================================================================================*/
/*       INFO BANNER		                                                                                          */
/*====================================================================================================================*/

.info-banner-slider {background-color: #fff; padding : 20px 0 0;}
.info-banner--wrapper {float : none !important;}
  .info-banner {

    width : 100%;
    background-color: #fff;
    color : #666;
  }
.info-banner-item { padding : 0 40px;}

.info-banner-item--icon { width : 50px; max-height: 50px; margin-right : 10px;}
.info-banner-item .atol-logo { height: 80px;}

 .info-banner-item  svg {max-width : 50px; max-height : 50px; width : 50px; }
.info-banner-item--icon:only-child  { width : 100%; max-height : 50px; }
.info-banner-item--icon:only-child svg { max-width : 100%; max-height : 50px;  width : auto;}
 
.info-banner-slider .owl-nav {display : flex; justify-content: center; margin-top : 20px;}
 .info-banner-slider .owl-next, .owl-prev { width : 20px; margin : 0 20px;}


.info-banner-item--text,
.info-banner-item--text a{ font-weight : 400; color : #000; text-decoration : none;}
.info-banner-item--text a:hover { text-decoration : underline;}

@media only screen and (max-width: 720px) {
.info-banner-item--icon:only-child  { text-align : center; }
.info-banner-item {justify-content: center;}
}


/* #region OBJECTS */
/******************************/

.o-flex
{

    display: flex;

    -webkit-justify-content: space-between;
	justify-content: space-between;

}

.o-flex__v-center { align-items : center;}
.o-flex__v-end { align-items : flex-end;}
.o-flex__v-top { align-items : flex-start;}
.o-flex__v-stretch { align-items : stretch;}
.o-flex__h-center { justify-content : center;}
.o-flex__h-left { justify-content : flex-start;}
.o-flex__h-between { justify-content : space-between;}
.o-flex__h-right { justify-content : flex-end;}

.o-flex__vh-center { align-items : center; justify-content : center}

.o-flex__row 
{
	-webkit-flex-direction: row;
	flex-direction: row;
}

.o-flex__col 
{
	-webkit-flex-direction: column;
	flex-direction: column
}

.o-flex__wrap { flex-wrap : wrap;}


.o-clearfix:after { /* https://css-tricks.com/snippets/css/clear-fix/ */
  content: "";
  display: table;
  clear: both;
}


/* #endregion */

/*--- RULER ANALYTICS ----------------------------------*/
span.ruler-click-main, span.ruler-main {padding: 0px !important; margin: 0px !important;}

 /* pca postcodeanywhere loqate fix */
.pca .pcaautocomplete .pcalist {max-width: 70vw !important;}