/*
==========================================================
  STYLE-CBC-CUSTOM.CSS
==========================================================
*/

/* ----- COLORS --------------------------------------------------------------------------------------------
body            {color: #a5a5a5;}        medium grey      
.bg_light       {background: #f6f6f6;}   light grey       
.bg_grey        {background: #ebeff2;}   light grey       
.bg_dark        {background: #384141;}   very dark grey   
.darkcolor      {color: #384141;}        very dark grey   
.color          {color: #4fb8aa;}        teal blue        
.whitecolor     {color: #fff;}           white            
.primarycolor   {color: #b2cb20;}        yellowish green  
.secondrycolor  {color: #4fb8aa;}        teal blue        
.dangercolor    {color: #e84455;}        orange red       
.bg_secondry    {background: #4fb8aa;}   teal blue        

/* ----- CBC Colours --------------------------------------------------------------------------------------/*
.primarycolor   {color: #1a4972;}        Avalon    
.secondrycolor  {color: #2698ba;}        Aurora    
.dangercolor    {color: #ce7f92;}        Atlantis  






/* ----- GENERAL STYLING ------------------------------------------------------------------------------------------------- */
body {
   padding: 0;
   margin: 0;
   color: #9a9a9a;                                  /*----- was [#a5a5a5] line 38, darken body text -----*/
   font-size: 14px;
   overflow-x: hidden;
   font-family: 'Raleway', sans-serif;              /*----- was [Open Sans, sans-serif] line 38 -----*/
   direction: ltr;
}
h1, h2, h3, h4, h5 {
   font-family: 'Raleway', sans-serif;              /*----- was [Poppins, sans-serif] line 65 -----*/
}
p {
   font-family: 'Raleway', sans-serif;              /*----- was [Open Sans, sans-serif] line 38 -----*/
   font-size: 18px;                                 /*----- was [14px] line 90, increase to make easier to read on desktop and mobile  -----*/
}



/*----- FONTS --------------------------------------------------------------------------------------------------------------*/
/*  Custom Font:   Vonder-Clean Regular                                    
|   Used in:       main heading home page                                  
|                  name of cottages in Page Header on:                     
|                       aurora-cottage.html                                
|                       avalon-cottage.html                                
|                       atlatnis-cottage.html                              
|   Source:        https://www.1001fonts.com/vonder-clean-font.html -----*/     
@font-face {
    font-family: 'vonder_cleanregular';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/vonder_cleanregular.woff2') format('woff2'),
         url('fonts/vonder_cleanregular.woff') format('woff');
}
h1, .title {
    font-family: "vonder_cleanregular", Helvetica, Arial, sans-serif;
}



/* ----- HELPER CLASSES ------------------------------------------------------------------------------------------------------*/ 
/*       - start line 122                        
         - add space above and below images in:  
             aurora-cottage.html                 
             avalon-cottage.html                 
             atlantis-cottage.html               
*/ 
.heading_space_top {
   margin-bottom: 2.375rem;                        /*----- same as source -----*/
   margin-top: 0;                                  /*----- added -----*/
}
.heading_space_top_bottom {
   margin-bottom: 2.375rem;                        /*----- same as source -----*/
   margin-top: 4.375rem;                           /*----- added -----*/
} 
.desktop_div_hidden {                              /*----- added to hide extra spaces on desktop view -----*/
   display:none;
}
.bottom60 {
   margin-bottom: 60px;
}



/* ----- BACK-TO-TOP Button ------------------------------------------------------------------------------------------------- */
.scrollToTop {
   background: #4fb8aa;                             /* now green, was [#b2cb20] line 492 -----*/
}
.scrollToTop:hover {
   background: #e84455;                             /* now orante-red, was [#4fb8aa] line 508  -----*/
}



/* ----- COMMAND BUTTONS ----------------------------------------------------------------------------------------------------*/
/*       - from line 288 onwards*/
.btn_dark , .btn_border {
   border: 1px solid #384141;
   color: #384141;
}



/* ----- TRANSPARENT BUTTONS --------------------------------------------------------------------------------------------------*/
/*       - added to enable buttons on white background to be visible -----*/
.black_transparent {
   background: #4fb8aa;
   border: 1px solid #fff !important;
}
.black_transparent:hover,
.black_transparent:focus {
   background: #b2cb20;
   color: #000;
}
.black_transparent,
.btn_primary,
.btn_secondry,
.btn_danger,
.btn_primary:hover,
.btn_primary:focus,
.btn_secondry:hover,
.btn_secondry:focus,
.btn_border:hover,
.btn_border:focus,
.btn_danger:hover,
.btn_danger:focus{
   color: #fff;
}



/* ----- HEADING STYLE ---------------------------------------------------------------------------------------------------*/
/*       - from line 221 
         - change underline highlight to orange-red -----*/
.heading .divider-left,
.heading .divider-center {
   background: #4fb8aa;                             /*----- was [#b2cb20]  -----*/
}



/* ----- NAVIGATION -------------------------------------------------------------------------------------------------------*/ 
/*       - start line 537
         - increase font size, reduce font weight of main navbar & side navbar 
*/ 
.navbar-nav .nav-link {                             /*----- line 647 -----*/
   font-size: 18px;                                 /*----- was [14px] -----*/
}
/*       - increase logo size for main navbar and side navbar 
*/
.navbar-brand {                                     /*----- line 605 -----*/
   width: 250px;                                    /*----- was [130] -----*/
}
/*       - grouped menu bar options closer together after adding new Main Menu option "Guest Reviews" 
*/
.navbar-nav .nav-item {                             /*----- line 636 -----*/
   margin: 12px 0.75rem;                            /*----- was [1.25rem] -----*/
}




/* ----- FEATURES & SERVICES --------------------------------------------------------------------------------------------- */
.icon_box:hover {
   background: #4fb8aa;                             /*----- was [#b2cb20] line 1853  */
}
.icon_box i {
   color: #4fb8aa;                                  /*----- was [#b2cb20] line 1858  */
}
.icon_wraper [class^="col"]:nth-child(2n) .icon_box i {
   color: #13129a;                                  /*----- was [#4fb8aa]   */ /* change to match AVALON colour */
}
.icon_wraper [class^="col"]:nth-child(3n) .icon_box i {
   color: #e84455;                                  /*----- change to match ATLANTIS colour */
}
.icon_wraper [class^="col"]:nth-child(2) .icon_box:hover {
   background: #13129a;                             /*----- change to match AVALON colour */
}
.icon_wraper [class^="col"]:nth-child(3) .icon_box:hover {
   background: #e84455;                             /*----- change to match ATLANTIS colour */
}


/* ----- GUEST REVIEWS (Testimonials Section) --------------------------------------------------------------------------------
         - STYLE.CSS  
         - change background colour  
         - make border darker -----*/
.testimonial-wrapp .testimonial-text {
   background: #f6f6f6;                             /*----- was [#dfe2e4] line 2080 -----*/
   padding: 4.25rem 2.5rem;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   border: 1px solid #dadada;                       /*----- was [#f9f9f9] line 2084 -----*/
}
/*       - BOOTSTRAP.MIN.CSS
/*       - refer to Bootstrap.min.beautify.css line 158
/*       - increase font size for Guest Review date & booking source -----*/
small{font-size:100%}                               /*----- was [80%] line 158 -----*/


/* ----- HOME HERO BOOKING WIDGET ------------------------------------------------------------------------------------------*/
.home-hero-border {
    background-color: #fff;
    border-color: #384141;                          /*----- WeBox [darkcolor] -----*/
    border-style: solid;
    border-width: 1px;
    padding: 4% 1% 2% 1%;
 }
.home-hero-link {
    font-weight: 500;
    text-decoration: underline;
}
.desktop_display_home_hero {
   display: inline;		   	   						/*----- added -----*/
}
.tablet_display_home_hero {
   display: none;		   	   						/*----- added -----*/
}
.mobile_display_home_hero {
   display: none;		   	   						/*----- added -----*/
}



/* ----- WEBSITE & SHOW MORE LINKS -------------------------------------------------------------------------------------------*/
.show-more-link {
    color: #4fb8aa;                                 /*----- added 'secondrycolour (teal blue) -----*/
    font-weight: 500;                               /*----- added -----*/
    text-decoration: underline;                     /*----- added -----*/
}
.show-more-link:hover {
    color: #e84455;                                 /*----- added 'dangercolor (orange-red) -----*/
    text-decoration: underline;                     /*----- added -----*/
}



/* ----- GOOGLE MAPS LINKS --------------------------------------------------------------------------------------------------*/
/*       - for cottage addresses on home pagea -----*/
.google-maps-link {
    color: #384141;                                 /*----- added 'darkcolor' to match text -----*/
    text-decoration: underline;                     /*----- added -----*/
 }
.google-maps-link:hover {
    color: #e84455;                                 /*----- added 'dangercolor (orange-red) -----*/
    text-decoration: underline;                     /*----- added -----*/
}



/* ----- GALLERY FILTER BUTTONS ----------------------------------------------------------------------------------------------*/
/*       - reverse button colors to match elsewhere
         - green is default, red is hover
/*       - from STYLE.CSS line 1716 -----*/
.cbp-l-filters .cbp-filter-item:hover span,
.cbp-l-filters .cbp-filter-item-active {            /*----- added -----*/
   background: #e84455;
   border: 1px solid #e84455;                       /*----- red -----*/
   color: #fff;
}
/*       - line 1721 -----*/
.cbp-l-filters .cbp-filter-item-active span,
.cbp-l-filters .cbp-filter-item:focus span,
.cbp-filter-item.cbp-filter-item-active,            /*----- added -----*/
.cbp-l-filters .cbp-filter-item-active {            /*----- added -----*/
   background: #4fb8aa;
   border: 1px solid #4fb8aa;                       /*----- teal -----*/
   color: #fff;
}
/*       - from CUBEPORTFOLIO.CSS line 1054 -----*/
cbp-l-filters-alignCenter {
   color: #DADADA;
   font: 400 12px/21px sans-serif;
   margin-bottom: 130px;
   text-align: center;
}
.cbp-l-filters-alignCenter .cbp-filter-item {
   color: #949494;
   cursor: pointer;
   display: inline-block;
   font: 400 16px/21px "Raleway", sans-serif;        /*----- was [400 16px/21px "Open Sans"] -----*/
   margin: 0 0 10px;
   padding: 0 12px;
   position: relative;
   overflow: visible;
   transition: color .3s ease-in-out;
   -webkit-transition: color .3s ease-in-out;
   -o-transition: color .3s ease-in-out;
}
.cbp-l-filters-alignCenter .cbp-filter-item:hover {
   background-color: #b2cb20;                       /*----- added -----*/
   border: 1px solid #b2cb20;                       /*----- added -----*/
   color: #000;                                     /*----- was[2D2C2C] -----*/
}
.cbp-l-filters-alignCenter .cbp-filter-item.cbp-filter-item-active {
   color: #fff;                                     /*----- was [2D2C2C] -----;*/
   cursor: default;
}
.cbp-l-filters-alignCenter .cbp-filter-counter {
   background-color: #b2cb20;                       /*----- was [626161] -----*/
   color: #000;                                     /*----- added -----;*/
}
.cbp-l-filters-alignCenter .cbp-filter-counter:after {
   border-top: 4px solid #b2cb20;                   /*----- was [626161] -----*/
}



/* ----- TESTIMONIALS -----------------------------------------------------------------------------------------------------*/
/*       - line 2056 -----*/
.testimonial-wrapp .testimonial-photo {
   height: 100px;                                   /*----- was [100px]  to remove place holder for image of guest reviewer -----*/
   width: 100px;                                    /*----- was [100px]  to remove place holder for image of guest reviewer -----*/
}



/* ----- PARALLAX IMAGES -------------------------------------------------------------------------------------------------------*/
/*       - refer to STYLE.CSS line 2000
/* ----- "HOME PAGE" -----*/
#parallax-bg {
   background: url(../images/cbc-parallax1-home.webp) no-repeat;
}
#parallax-bg,
#parallax-bg.parallax-two,
#parallax-bg.parallax-three,
#parallax-bg.parallax-four,
#parallax-bg.parallax-five,
.banner-fullscreen,
#simple-banner,
#fading-banner,
.bg-crypto {
   background-attachment: fixed;
   background-position: center center;
   background-size: cover;
   width: 100%;
   -webkit-background-size: cover;
}
/* ----- "ESCAPE TO CLEAR AIR" -----*/
#parallax-bg.parallax-two {
   background: url(../images/cbc-parallax2-home.webp) no-repeat;         
   background-attachment: fixed;
   background-position: center center;
   background-size: cover;
   width: 100%;
   -webkit-background-size: cover;
}
/* ----- "COTTAGES BY THE NUMBERS" -----*/
#parallax-bg.parallax-three {
   background: url(../images/cbc-parallax3-home.webp) no-repeat;
   background-attachment: fixed;
   background-position: center center;
   background-size: cover;
   width: 100%;
   -webkit-background-size: cover;
}
/* ----- "GOOGLE MAPS" -----*/
#parallax-bg.parallax-four {
   background: url(../images/cbc-parallax4-home.webp) no-repeat;
   background-attachment: fixed;
   background-position: center center;
   background-size: cover;
   width: 100%;
   -webkit-background-size: cover;
}



/* ----- PAGE HEADER IMAGES - ALL PAGES ----------------------------------------------------------------------------------------*/
/*       - start line 2898
         - STYLE.CSS line 2000
         - page header background image for these pages:
             - cottages
             - book now
             - gallery
             - what to do
         - image for desktop screens  - Banner 5  
         - media modificattions
             - image for notebook screens - Page Header 6 (see @media (max-width:992px
             - image for notebook screens - Page Header 7 (see @media (max-width:768px
             - image for mobile screens   - Page Header 8 (see @media (max-width:560px)-----*/
.page_header {
   background: url(../images/cbc-page-header5-cottages.webp) no-repeat;  /*----- was [/images/page-title.jpg]  line 2888 -----*/
   -webkit-background-size: cover;                  /*----- line 2894 -----*/
   background-size: cover;
   width: 100%;
   background-position: right center;               /*----- was [center center] -----*/
   position: relative;
}



/* ----- JQUERY.FANCYBOX.MIN.CSS ---------------------------------------------------------------------------------------------------*/
/*       - overlay controls for CubePortfolio overaly when displaying enlarged images 
         - change underline highlight to orange-red
         - see JQUERY.FANCYBOX.BEAUTIFY.CSS for line numbers
*/

/* line 86 - image counter in top left corner */
.fancybox-infobar {
	font-size: 15px;                                /*----- was [13px] -----*/
}
/* line 203 - border around enlarged image*/
.fancybox-slide .fancybox-image-wrap {
	border: 3px solid #fff;                         /*----- was [0px] -----*/
}
/* line 361 - previous/next arrow colour*/
.fancybox-navigation button {
    color: #fff;                                    /*----- was [#ccc] -----*/
}
/* ----- JQUERY.FANCYBOX.MIN.CSS line 470 - caption text below image -------------------------------------------------------------*/
.fancybox-caption {
	margin-left: 20%;                               /*----- added -----*/
	margin-right: 20%;                              /*----- added -----*/
	padding: -30% 0% 0% 0%;                         /*----- was [30px 0] -----*/
	border-top: 0px solid hsla(0, 0%, 100%, .4);    /*----- was [1px] -----*/
	font-size: 20px;                                /*----- was [14px] -----*/
    text-align: center;                             /*----- added -----*/
	color: #fff;                                    /*----- was [#ccc] -----*/
	line-height: 25px;                              /*----- was [20px] -----*/
	-webkit-text-size-adjust: none
}


/* ----- JQUERY.FANCYBOX.MIN.JS ---------------------------------------------------------------------------------------------------*/
/*       - FANCYBOX image viewer used to show enlarged images in display format
/*       - Javascript controls for FANCYBOX overaly the website when displaying enlarged images 
/*
/* CODE CHANGES for CBC website  25-Aug-2023
         - line 44:  button "Share" removed
         - line 46:  idleTime increased to 100 [was 3]
         - line 145: changed ToolTip to "Next Image" [was "Next"]
         - line 146: changed ToolTip to "Previous Image" [was "Previous"]
         - line 151: changed ToolTip to "View Thumbnails" [was "Thumbnails"]
/*----------------------------------------------------------------------------------------------------------------------------------*/



/* ----- BOOK NOW SIDE BUTTON ------------------------------------------------------------------------------------------------*/ 
/*       - permanently visible expanding side button on:
              - home page
              - cottage pages (Aurora, Avalon, Atlantis)
              - galleries
              - things to do             
         - source code from https://codepen.io/gleamland/pen/aYWaNY  -----*/
.BookNowSideButton {
    top: 30%; 
    background-color: #4fb8aa;
}
#fixedMenu a {
    border-radius: 5px 5px 0 0;
    color: #fff; 
    font-size: 15px; 
    font-weight: bold;  
    position: fixed; 
    right: -80px;
    padding: 5px 0 85px 0;
    text-align: center;
    text-decoration: none;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transition: .3s;
    width: 112px;
    z-index: 1000;
}
#fixedMenu a:hover {
    background-color: #b2cb20;
    color: #000;
    font-size: 20px;
    right: 0px;
}
#fixedMenu a i {
    float:right; 
    padding-top:4px;
}
@media (max-width: 768px) {
   #fixedMenu a {
      font-size: 15px;
   }
   #fixedMenu a:hover {
      font-size: 18px;
   }
}



/* ----- TESTIMONIALS --------------------------------------------------------------------------------------------*/
.testimonial-wrapp .quoted {
   background: #2698BA;                             /*----- was [#4fb8aa], now Aurora colour -----*/
}
/* Avalon colour */
#testimonial-slider .owl-item:nth-child(2n) .testimonial-wrapp .quoted,
#testimonial-grid .cbp-item:nth-child(2n) .testimonial-wrapp .quoted,
#testimonial-slider .owl-item:nth-child(2n) .testimonial-wrapp:hover .testimonial-text,
#testimonial-grid .cbp-item:nth-child(2n) .testimonial-wrapp:hover .testimonial-text {
   background: #1A4972;                             /*----- was [#b2cb20] -----*/
}
/* Atlantis colour */
#testimonial-slider .owl-item:nth-child(3n) .testimonial-wrapp .quoted,
#testimonial-grid .cbp-item:nth-child(3n) .testimonial-wrapp .quoted,
#testimonial-slider .owl-item:nth-child(3n) .testimonial-wrapp:hover .testimonial-text,
#testimonial-grid .cbp-item:nth-child(3n) .testimonial-wrapp:hover .testimonial-text {
   background: #e84455;                             /*----- no change from original colour -----*/
}
/* Aurora colour */
.testimonial-wrapp:hover .testimonial-text,
.testimonial-wrapp:hover .quoted{
   background: #2698BA;                             /*----- was [#4fb8aa] -----*/
   color: #fff;
}
/* ----- Testimonials ends ----- */



/* ----- MEDIA SCREEN SIZE MODIFICATIONS ------------------------------------------------------------------------------------*/
/* DESKTOP */
@media (max-width:1200px) {
   .mobile_div_hidden {
      display: none;
   }
   .desktop_div_hidden {
      display: none;                                /*----- added -----*/
   }
   .tablet_display_home_hero {
      display: none;
   }
   .mobile_display_home_hero {
      display: none;
   }
   .fancybox-caption {
	  margin-left: 10%;                             /*----- added -----*/
	  margin-right: 10%;                            /*----- added -----*/fs
   }
}

/* TABLET - LANDSCAPE */
@media (max-width:982px) {
   .page_header .page-content .page_nav {
      padding: 18px 30px 10px;
      float: none;
      width: 100%;
   }
   .desktop_div_heading_hidden {
      display: none;                                /*----- added -----*/
   }
   .desktop_display_home_hero {
      display: none;
   }
   .tablet_display_home_hero {
      display: inline;
   }
   .mobile_display_home_hero {
      display: none;
   }
   .fancybox-caption {
	  margin-left: 3%;                              /*----- added -----*/
	  margin-right: 3%;                             /*----- added -----*/
   }
}

/* TABLET - PORTRAIT */
@media (max-width:768px) {
   .page_header .page-content .page_nav {
      padding: 18px 16px 10px;
      float: none;
      width: 100%;
   }
   h2 {
      font-size: 2.2rem;
   }
   h3 {
      font-size: 1.875rem;                           /*----- was [1.375rem] -----*/
   }
   h4 {
      font-size: 1.115rem;
   }
   .btn_common {
      font-size: 12px;
      padding: 10px 2.2rem;
   }
   .mobile_div_heading_hidden {
      display: none;
   }
   .desktop_div_hidden {
      display: inline;
   }
   .desktop_display_home_hero {
      display: none;
   }
   .tablet_display_home_hero {
      display: inline;
   }
   .mobile_display_home_hero {
      display: none;
   }
   .page_header {
      background: url(../images/cbc-page-header7-cottages.webp) no-repeat;  /*----- was [/images/page-title.jpg]  line 2888 -----*/
      -webkit-background-size: cover;               /*----- line 2894 -----*/
      background-size: cover;
      width: 100%;
      background-position: center center;
      position: relative;
   }
   .fancybox-caption {
	  margin-left: 3%;                              /*----- added -----*/
	  margin-right: 3%;                             /*----- added -----*/
   }
}

/* MOBILE PHONE */
@media (max-width:560px) {
   .btn_common {
      font-size: 11px;
      padding: 8px 2rem;
   }
   .mobile_div_heading_hidden {
      display: none;
   }
   .desktop_display_home_hero {
      display: none;
   }
   .tablet_display_home_hero {
      display: none;
   }
   .mobile_display_home_hero {
      display: inline;
   }
   .page_header {
      background: url(../images/cbc-page-header8-cottages.webp) no-repeat;  /*----- was [/images/page-title.jpg]  line 2888 -----*/
      -webkit-background-size: cover;               /*----- line 2894 -----*/
      background-size: cover;
      width: 100%;
      background-position: center center;
      position: relative;
   }
   .fancybox-caption {
	  font-size: 16px;                              /*----- was [14px] -----*/
   }
   .fancybox-slide .fancybox-image-wrap {
	  border: 1px solid #ccc;                       /*----- was [0px] -----*/
   }
   .fancybox-caption {
	  margin-left: 3%;                              /*----- added -----*/
	  margin-right: 3%;                             /*----- added -----*/
   }

   /* "overlay display none" prevents display of enlarged landscape images        */
   /* see "Gallery Mobile" below for code to enable portrait enlarged images      
   .overlay{
      display: none;                                /*----- added -----*/
   }

   /* GALLERY MOBILE                                  ----- added -----*/
   /* [overlay-mobile] enables portrait images on a mobile vs landscape images on */
   /* a desktop, when enlarged image is selected                                  
   .cbp-l-filters .cbp-filter-item span,
   .overlay, .overlay-mobile .opens {
      -webkit-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
   }
   .overlay-mobile {
      background-color: rgba(79, 184, 170, 0.75);
      padding-bottom: 10px;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      position: absolute;
      opacity: 0;
      /*visibility: hidden;
	  visibility:visible;
      z-index: 99;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
   }
   .cbp-item:hover .overlay-mobile {
      opacity: 1;
      visibility: visible; 
   }
   .overlay-mobile .opens {
      height: 70px;
      width: 70px;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      display: inline-block;
      background: #b2cb20;
      color: #fff;
      font-size: 28px;
      text-align: center;
      line-height: 72px;
      -ms-transform: rotate(50deg) scale(1.5);
      -o-transform: rotate(50deg) scale(1.5);
      -webkit-transform: rotate(50deg) scale(1.5);
      transform: rotate(50deg) scale(1.5);
   }
   .overlay-mobile .opens:hover,
   .overlay-mobile .opens:focus {
      background: #e84455;
   }
   .cbp-item:hover .overlay-mobile .opens {
      -ms-transform: rotate(0) scale(1);
      -o-transform: rotate(0) scale(1);
      -webkit-transform: rotate(0) scale(1);
      transform: rotate(0) scale(1);
   }
   .overlay-mobile  h4 > a:hover,
   .overlay-mobile  h4 > a:focus {
      color: #fff;
   }
   /* GALLERY MOBILE ends */
}