/* E-PLEX Jeffrey local override layer
   Everything else on this site is styled by css/style.css (the E-PLEX design).
   Anything that should look different here goes in this file. */

/* The JEFFREY wordmark: orange sampled from the E-PLEX logo mark. */
.jfName{color:#F8901C;}

/* Top bar "CA | IRVINE JEFFREY": JEFFREY in the same orange */
.brName .jfName{color:#F8901C;}

/* The whole top-bar wordmark links home, like the logo beside it.
   inherit keeps the pink/orange colouring instead of browser link blue. */
.brName a{color:inherit;text-decoration:none;display:inline-block;}
.brName a:hover{text-decoration:none;}

/* Quick-access banner: "BOOK A TOUR".
   Desktop keeps all five rows. On phones the bar only fits four, so TOP gives up
   its slot - iOS scrolls to the top by tapping the status bar anyway, and booking
   a tour is the one thing a parent came here to do.
   a.btnTop outranks the page's own .floatBnr .btnTop rule, which is !important. */
.floatBnr .perBnr a .ico.tours{color:#222;}
.floatBnr .perBnr a .ico.tours svg{width:100%;height:100%;display:block;}
@media (max-width:760px){
  .floatBnr .perBnr .ico.tours{color:#fff !important;}
  .floatBnr a.btnTop{display:none !important;}
}

/* With five rows the rail is 385px tall, and the page pins it at top:calc(100vh - 36%),
   so on anything shorter than ~1080px the bottom rows fell off the screen.
   Anchor it to the bottom instead - it then fits at any desktop height. */
@media (min-width:761px){
  .floatBnr{top:auto !important; bottom:48px !important;}
}