/*=========================================================================================================================*/
/*   SCC WEB COLOR GUIDES                                                                                                  */
/*   --------------------                                                                                                  */
/*   bright blue  :  cmyk 71 15 0 0    :  rgb 37 170 225  :  hex #25aae1  :  ( primary blue )                              */
/*   dark blue    :  cmyk 97 87 35 26  :  rgb 34 51 95    :  hex #22335f  :  ( contrast blue )                             */
/*   gold         :  cmyk 40 39 67 8   :  rgb 152 137 98  :  hex #988962  :  ( cruisestay / exclusive gold )               */
/*   orange       :  cmyk 6 61 98 0    :  rgb 232 126 40  :  hex #e87e28  :  ( highlight / features orange )               */
/*   charcoal     :  cmyk 71 65 64 67  :  rgb 41 41 41    :  hex #292929  :  ( base grey )                                 */
/*   green        :  cmyk 77 1 86 0    :  rgb 41 179 96   :  hex #29b360  :  ( call to action green )                      */
/*                                                                                                                         */
/*   SCC WEB INTERFACE EXTRAS                                                                                              */
/*   ------------------------                                                                                              */
/*   bright blue shadow  :  cmyk 77 28 7 0   :  rgb 32 149 199   :  hex #2095c7  :  ( for contrast against bright blue )   */
/*   green shadow        :  cmyk 82 15 91 2  :  rgb 35 153 82    :  hex #239952  :  ( for contrast against green )         */
/*   orange shadow       :  cmyk 11 67 100 1 :  rgb 217 112 35   :  hex #d97023  :  ( for contrast against orange )        */
/*   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: Georgia, serif; (not in use)                      */
/*==================================================================*/
/*   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 )                       */
/*==================================================================*/

/*==================================================================*/
/*   Responsive Grid 1200px + (for desktop)                         */
/*==================================================================*/

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


/*--- 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%;}


/*==================================================================*/
/*   MODAL BOX                                                      */
/*==================================================================*/
/* css copied from original file jquery.flex-modal.css and brought into this css file for editing instead */
/* SEE https://github.com/floriancapelle/jquery-flex-modal */
/* set this class to hide modals on pageload */ /* use your existing modifiers if you can */

html.modal-open {overflow: hidden; padding-right: 16px;} /* Prevents background scrolling while modal is open */

.flex-modal-hide {display: none;}
.flex-modal-item {position: fixed; left: 0; top: 0; right: 0; bottom: 0; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.4); z-index: 20000; opacity: 0; display: none; transition: opacity .1s; /* make sure to use at least tiny transition-duration so a transitionend event can fire */}
.flex-modal-item--ready {display: flex;}
.flex-modal-item--visible {opacity: 1;}
.flex-modal-item__content {box-sizing: border-box; position: relative; padding: 0px; border-radius: 3px; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); background: #fff;}
.flex-modal-item__content h2 {margin-bottom: 0px;}
.flex-modal-item__content h2:first-child {margin-top: 0px;}
.flex-modal-scrollable__content {box-sizing: border-box; padding: 20px; max-width: 60vw; max-height: 90vh; overflow: auto;}
.flex-modal-item__close {position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; z-index: 100000;}
.flex-modal-item__close svg {width: 20px; height: 20px;}
.flex-modal-item__close svg polygon {fill: #343f48; transition: all .3s ease;}
.flex-modal-item__close:hover svg polygon {fill: #019e6c;}

/*--- Add this class to a modal div if you want them to animate ----*/
.modal-animate {transition: opacity .4s;}
.modal-animate .flex-modal-item__content {transition: transform .5s cubic-bezier(0.610, 0.405, 0.325, 1.165); transform: translateY(-200px);}
.modal-animate.flex-modal-item--visible .flex-modal-item__content {transform: translateY(0);}

.modal-expert {padding: 0px 0px 20px 0px;}
.modal-expert-wrap {display: flex;}
.modal-expert-box {flex: 1; box-sizing: border-box; margin: 0px 10px; padding: 15px 20px 15px 90px; border: solid 1px rgba(132,147,158,0.3); position: relative; transition: all .3s ease;}
.modal-expert-box:first-child {margin-left: 0px;}
.modal-expert-box:last-child {margin-right: 0px;}
.modal-expert-box h3 {font-size: 1.4rem; font-weight: 600; text-transform: uppercase; text-align: left; color: #988962; margin: 0px;}
.modal-expert-box p {font-size: 2.4rem; margin: 0px;}
.modal-expert-box svg {width: 40px; height: 40px; position: absolute; top: 20px; left: 20px;}
.modal-expert-box svg path, .modal-expert svg circle {fill: #25aae1;}
/*--- For devices who auto change phone numbers to links -----------*/
.modal-expert-box a, .modal-expert-box a:visited, .modal-expert-box a:hover, .modal-expert-box a:active, .modal-expert-box .phoneexpert {color: #343f48 !important; text-decoration: none;}

.modal-enquiry input[type="text"], .modal-enquiry input[type="tel"], .modal-enquiry input[type="email"], .modal-enquiry input[type="submit"], .modal-enquiry select, .modal-enquiry textarea {width: 100%;}
.modal-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;}
.modal-enquiry-title svg {width: 40px; height: 40px; position: absolute; top: 20px; left: 20px;}
.modal-enquiry-title svg path, .modal-enquiry-title svg circle {fill: #25aae1;}
.modal-enquiry-title h3 {font-size: 1.4rem; font-weight: 600; text-transform: uppercase; text-align: left; color: #988962; margin: 0px;}
.modal-enquiry-title p {font-size: 2.4rem; margin: 0px;}
.modal-enquiry-title-no-svg {padding-left: 20px;}

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





.contact-enquiry-wrap .field-manual a:hover, .modal-enquiry-wrap .field-manual a:focus {text-decoration: none;}




/*OWL CAROUSEL PAGE BUILDER */
.owl-theme-pagebuilder {position: relative;}

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

.owl-theme-pagebuilder .owl-nav {display: flex; width: 100%; height: 44px; margin: 0px; position: absolute; top: 120px; left: 0px;}
.owl-theme-pagebuilder .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-pagebuilder .owl-nav [class*='owl-']:hover {color: #29b360; text-decoration: none;}
.owl-theme-pagebuilder .owl-nav .owl-prev {flex: 0 1 auto; position: relative; top: 0px; left: -20px; border-radius: 50%; padding-left: 12px;}
.owl-theme-pagebuilder .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-pagebuilder .owl-nav .disabled {opacity: 0.5; cursor: default;}
.owl-theme-pagebuilder .owl-nav svg {width: 20px; height: 20px;}
.owl-theme-pagebuilder .owl-nav svg > * {fill: #22335f; transition: all .3s ease;}
.owl-theme-pagebuilder .owl-nav [class*='owl-']:hover svg > * {fill: #29b360;}
.owl-theme-pagebuilder .owl-nav.disabled + .owl-dots {margin-top: 10px;}
.owl-theme-pagebuilder .owl-dots {text-align: center; -webkit-tap-highlight-color: transparent; margin-top: 10px;}
.owl-theme-pagebuilder .owl-dots .owl-dot {display: inline-block; zoom: 1; *display: inline;}
.owl-theme-pagebuilder .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-pagebuilder .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #869791;}






/*==================================================================*/
/*   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;}

}

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


/*--- 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;}

}
	
/*==================================================================*/
/*   Responsive Grid lt 720px / Mobile (mediaqueries)               */
/*==================================================================*/
@media only screen and (max-width: 719px) {

/*--- 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;}



}

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



.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;}



}

/*==================================================================*/
/*    SUBSCRIBE POPUP                                                    */
/*==================================================================*/
.flex-modal-item__close_popup_subscribe {position: absolute; top: 40px; right: 40px; width: 20px; height: 20px; z-index: 100000;}
.flex-modal-item__close_popup_subscribe svg {width: 20px; height: 20px;}
.flex-modal-item__close_popup_subscribe svg polygon {fill: #FFFFFF; transition: all .3s ease;}
.flex-modal-item__close_popup_subscribe:hover svg polygon {fill: #019e6c;}

.popup-header {width: 100%; height: auto; margin: 0px; padding: 0px; background-color: #d02b0f;}
.popup-header div.logo {box-sizing: border-box; height: 80px; margin-top: 0px; padding: 20px 0px 10px 20px; position: relative; top: 0px; /*border: solid 1px #ff0000;*/}
.popup-header div.logo h2 {font-size: 4.8rem; text-transform: none; margin: 0px; /*border: solid 1px #00ff00;*/}
.popup-header div.logo h2 a {color: #ffffff; text-decoration: none;}
.popup-header div.logo img {width: 121px; height: 46px;}
.popup-header div.logo svg {width: 121px; height: 46px;}
/*.popup-header div.logo svg.logo-desktop {display: block;}
.popup-header div.logo svg.logo-device {display: none;}
.popup-header div.logo svg path {fill: #ffffff;}*/

.register-thanks-popup {font-size: 2.2rem; font-weight: 400; margin: 20px; text-align: center;}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
.popup-header div.logo {height: 80px; top: 0px; padding: 16px 0px 18px 20px;}
.popup-header div.logo h2 {font-size: 3.0rem;}
.popup-header div.logo svg {width: 121px; height: 46px;}
/*.popup-header div.logo svg.logo-desktop {display: none;}
.popup-header div.logo svg.logo-device {display: block;}*/
}


@media only screen and (min-width: 720px) and (max-width: 959px) {
.popup-header div.logo {height: 76px; top: 0px; padding: 14px 0px 16px 20px;}
.popup-header div.logo h2 {font-size: 3.0rem;}
.popup-header div.logo svg {width: 121px; height: 46px;}
/*.popup-header div.logo svg.logo-desktop {display: none;}
.popup-header div.logo svg.logo-device {display: block;}*/
}

@media only screen and (max-width: 719px) {
.popup-header div.logo {height: 76px; top: 0px; padding: 14px 0px 16px 20px;}
.popup-header div.logo h2 {font-size: 3.0rem;}
.popup-header div.logo svg {width: 121px; height: 46px;}
/*.popup-header div.logo svg.logo-desktop {display: none;}
.popup-header div.logo svg.logo-device {display: block;}*/
}

@media only screen and (max-width: 354px) {
.popup-header div.logo svg {width: 84px; height: 32px;}
}