/*CSS Document*/
/*IMAGE WIDTH SIZESMATCH BOOTSTRAP BFEAKPOINTS*/
/*MAIN: SM 576px - MD 992px - LG 1400px - XL 1920px - Photoshop quality level 4-5*/
/*3 GRID: 500px width x 750px height - some square 500x500px - Photoshop quality level 4*/
:root {
  --White: #FFF;
	--Aubergine: #2E283D; /*background*/
	--Cream: #fcf8e3;
	--Purple: #5B4F82;
	--DuckEgg: #A6D5CB; /*original link and signature colour*/
	--NeonPink: #FA0053;
	--LogoDark: #333333;
  --LogoLight: #7a7a7a;
	--Mint: #2ec194; /*used for self-colour photo frame*/
	--ReceptionWallPaint: #84B59C;
	--ReceptionDeskPigeon: #AFB5BD; /*Reception Desk Farrow & Ball: Pigeon | #A1A093 too green! rgb (161, 160, 147)*/ 
	--SkyBlue: #536dfe;
	--WarmLight: #f3e3bf; /*used for brand icons (from Reception Desk light around logo)*/
}
html {
	max-width: 100% !important; /*VITAL to keep page width right up to scrollbar*/
	scroll-behavior: smooth;
	overflow-x: hidden !important; /*VITAL hides bottom scrollbar*/
}
body {
	/*SCROLLBAR REQUIREMENTS to sit over body content*/
	overflow-y: scroll !important; /*VITAL ensures scrollbar is visible*/
	/*overflow: overlay !important;  /*VITAL ensures scrollbar OVERLAYS content and removes gutter (overlay DEPRACATED in most browsers see scrollbar-gutter)*/
	scrollbar-gutter: stable both-edges; /*VITAL*/
	height: 100%;
	max-width: 100%;
	overflow-x: hidden !important; /*VITAL hides bottom scrollbar*/
	/*end of scrollbat requirements*/
	margin: 0 auto;
	font-family: "Noto Sans", sans-serif;
	font-optical-sizing: auto;
	font-size: 1.2rem !important;
	font-weight: 400 !important;
	background-color: #2E283D;
}
.container-fluid { /*requird for full width images*/
	margin: 0;
	padding: 0;
}
#main {
  background-color: #FFF !important;
}
section {
	padding-top: 25px;
	padding-bottom: 25px;
	text-align: center;
}
/*TEXT*/
h1,h2,h3,h4,h5,h6 {
  color: #5a5a5a;
  font-weight: 300 !important;
	margin: 20 0;
  text-transform: uppercase !important;
  text-align: center;
}
h1 	{
	margin-top: 0 !important;
	padding-top: 50px;
  font-size: 3.25rem;
  font-weight: bold;
}
h2 	{font-size: 2.75rem !important;}
h3 {font-size: 2.5rem;}
h4 {font-size: 2rem;}
h5 {font-size: 1.5rem;}
h6 {font-size: 1rem;}
p {
  color: #333333 !important;
	text-align: left;
	margin: 0 50 0 50 !important;
}
/*COLOURS*/
/*Text colours*/
.Aubergine {color: #2F293E;}
.GreyDark {color: #333333 !important;}
.GreyLight {color: #7a7a7a !important;}
.Cream {color: #fcf8e3;}
.Mint {color: #2ec194;}
.NeonPink {color: #FA0053;}
.SkyBlue {color: #536dfe;}
.WarmLight {color: #f3e3bf !important;}
.SkyBlue {color: #536dfe;}
/*Background colours*/
.bg-Aubergine {background-color: #2F293E;}
.bg-Cream {background-color: #fcf8e3;}
.bg-DuckEgg {background-color: #A6D5CB;}
.bg-GreyDark {background-color: #333333;}
.bg-GreyLight {background-color: #7a7a7a}
.bg-Mint {background-color: #2ec194;}
.bg-NeonPink {background-color: #FA0053;}
.bg-Pigeon {background-color: #AFB5BD;}/*Desk paint colour, Farrow & Ball Pigeon*/
.bg-Purple {background-color: #5B4F82;}
.bg-SkyBlue {background-color: #536dfe;}
.bg-WallPaint {background-color: #84B59C;}
.bg-WarmLight {background-color: #f3e3bf;}
.bg-DresserWall {background-color: #cfcac4;}/*Food Display Dresser Wall Colour*/
.bg-food-turkey {background-color: #DD892F;}
.bg-food-salmon {background-color: #DD7067;}
.bg-food-light {background-color:#7EAEBD;}
.bg-food-senior {background-color: #233259;}
.bg-food-small {background-color:#A2CA4D;}
.bg-food-large-adult {background-color:#D92454;}
.bg-food-large-puppy {background-color:#839EBE;}
/*LISTS.*/
li::marker {color: #A6D5CB;}
/*TABLES*/
table {font-size: 0.75rem !important;}
th,thead {
	background-color: black !important;
	color: white !important;
	white-space: nowrap !important;
	text-transform: uppercase !important;}
thead,th,tr,td { /*centre all table text*/
  text-align: center !important;
}
/*FONTS*/
/*NOTO SANS FONT*/
@font-face {
  font-display: swap; /*Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options.*/
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/noto-sans-v42-latin-regular.woff2') format('woff2'); /*Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+*/
}
/*MEOW SCRIPT FONT (matches real life neon sign font)*/
@font-face {
  font-display: swap; /*Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options.*/
  font-family: 'Meow Script';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/meow-script-v6-latin-regular.woff2') format('woff2'); /*Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+*/
}
.NeonText {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #FA0053,
    0 0 82px #FA0053,
    0 0 92px #FA0053,
    0 0 102px #FA0053,
    0 0 151px #FA0053;
}
.NeonSignIveStayedAtTheGrove {
		font-family: "Meow Script", cursive;
		/*Font size in Media Classes*/
    color: #fff !important;
    text-shadow: 0 0 5px #FA0053, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e; /*#ff005e = original*/
		z-index: 2;
		/*neonText*/
		text-shadow:
			/*neon white glow*/
			0 0 7px #fff,0 0 10px #fff,0 0 21px #fff,
			/*neon pink glow*/
			0 0 42px #FA0053,0 0 82px #FA0053,0 0 92px #FA0053,0 0 102px #FA0053,0 0 151px #FA0053;
}
.NeonSignReception {
		font-family: "Meow Script", cursive;
		/*Font size in Media Classes*/
    color: #fff !important;
    text-shadow: 0 0 5px #FA0053, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e; /*#ff005e = original*/
}
.Fancy {
  font-family: "Meow Script", cursive;
  font-weight: 300;
  /* [disabled]font-style: normal;*/
  text-transform: capitalize !important;
  margin-bottom: 0;
}
.FancySignature {
	font-size: 3.25rem !important;
  font-family: "Meow Script", cursive;
  font-weight: 500;
  text-transform: capitalize !important;
  margin-bottom: 0;
	color:#5B4F82 !important;/*Purple*/
	text-shadow: 2px 1px 0px rgba(122,122,122,0.25);
}
.Spacious {
	letter-spacing: 3px !important;
}
.Lichfield {
  font-size: 2rem !important;
  letter-spacing: 1px !important;
	text-transform: uppercase;
	text-align: center;
}
/*PAPER CUT-OUT TEXT USED ON NAV & FOOTER LINKS*/
.PaperText {
	color: #fff;
	font-size: max(12vw, 30px);
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
	margin-top: 0;
}
/*NAVIGATION*/
.navbar {
	z-index: 100;
	margin: 0px;
	padding: 20 20 10 20;
	justify-content: center !important;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	text-transform: uppercase;
	display: flex !important;
	overflow-x: hidden !important; /*VITAL hides bottom scrollbar*/
}
#navbarSupportedContent {
	overflow: hidden; /*!important = hidden as this hides the MovingLines class*/
}
.navbar-brand {	
	letter-spacing: 0.2em;
	font-size: 1rem !important;
  font-style: bold;
  font-weight: 600;
}
/*CHANGE NAVBAR COLOUR ON SCROLL*/
#NAVBAR {
 background: transparent;
 transition: background  1000ms ease-in; /*duration of fade transition*/
}
#NAVBAR.scrolled {
 background: rgba(46,40,61,0.90); /*Aubergine gradient*/
}
/*end of change navbar colour on scroll*/
.nav-item {margin: 15;}
.nav-link { /*see font sizes & wights in Media Classes*/
font-size: 1rem !important;
text-transform: uppercase;
padding-right: 10px;
/*PAPERTEXT*/
color: #fff;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
margin-top: 0;
}
.icon-svg-nav {
	min-height: 50px; /*tappable*/
	height: 3rem;
	width: 3rem;
	margin: 25 0;
	padding: 12px;
	text-decoration: none !important;
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}
/*CURSORS POINTERS*/
.cursor-external-link {cursor: alias !important; }/*Cursor pointer North East arrow used for external links*/
.cursor-grab {cursor: -webkit-grab; cursor: grab;}
.cursor-grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.Cursor-None {cursor: none;}
.Cursor-Logo-32 {cursor: url(/images/cursor-logo-32px.png),auto;}
.Cursor-Logo-128 {cursor: url(/images/cursor-logo-128px.png),auto;}
/*BUTTONS*/
.btn {
	cursor: pointer;
	text-transform: uppercase;
	text-decoration: none !important;
}
.btn-outline-secondary {
	background-color: #FFF;
	margin: 3px 0px;
}
.btn.btnContact {/*TOP NAV BAR BUTTON MD LG XL DEVICES*/
	width: 175px;
	border: 1px solid #fcf8e3;
	border-radius: 24px;
	box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
	padding: 10px 24px;
	background-color: rgba(255, 255, 255, 0.1);
	transform: scale(0.7);
	margin-right: -40px;
	font-size: 1.1rem;
	/*PAPER TEXT*/
	color: #fff;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
	margin-top: 0;
}
.btn.btnContact:hover {/*pressed effect = inset shadow*/
	box-shadow: inset 0 6px 6px rgba(0, 0, 0, 0.6);
	background-color: rgba(255,255,255,0.32);
}
.btn.btnBookNow {/*TOP NAV BAR BUTTON MD LG XL DEVICES*/
	width: 175px;
	border: 1px solid #fcf8e3;
	border-radius: 24px;
	box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
	padding: 10px 24px;
	background: #FC0441;  /*fallback for old browsers*/
	background: -webkit-linear-gradient(to right, #FC0441, #F62DA8);  /*Chrome 10-25, Safari 5.1-6*/
	background: linear-gradient(to right, #FC0441, #F62DA8); /*W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+*/
	transform: scale(0.7);
	margin-right: -25px;
	font-size: 1.1rem;
	/*PAPER TEXT*/
	color: #fff;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
	margin-top: 0;
}
.btn.btnBookNow:hover {/*pressed effect = inset shadow and reversing gradient*/
	box-shadow: inset 0 6px 6px rgba(0, 0, 0, 0.6);
	background: -webkit-linear-gradient(to right, #F62DA8, #FC0441);  /*Chrome 10-25, Safari 5.1-6*/
	background: linear-gradient(to right, #F62DA8, #FC0441); /*W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+*/
}
.btn-PinkButton {/*GENERAL USE PAGE BUTTONS*/
	/*e.g. <a href="#" class="btn btn-PinkButton d-block" role="button">ButtonText</a>*/
	font-size: 1.75rem !important;
	min-width: 300px; /*width = causes button to be aligned left, so change containing div class to: d-flex justify-contnet-center*/
	padding: 20 24;
	border: 1px solid #fcf8e3;
	/*border-radius: 24px;*/
	box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
	transform: scale(0.7);
	background: #FA0053;  /*fallback for old browsers*/
	background: -webkit-linear-gradient(to right, #FC0441, #F62DA8);  /*Chrome 10-25, Safari 5.1-6*/
	background: linear-gradient(to right, #FC0441, #F62DA8); /*W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+*/
	/*PAPER TEXT*/
	color: #fff;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
	margin-top: 0;
}
.btn-PinkButton:hover {/*pressed effect = inset shadow and reversing gradient*/
	box-shadow: inset 0 6px 6px rgba(0, 0, 0, 0.6);
	background: -webkit-linear-gradient(to right, #F62DA8, #FC0441);  /*Chrome 10-25, Safari 5.1-6*/
	background: linear-gradient(to right, #F62DA8, #FC0441); /*W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+*/
}
/*HOVER*/
a:hover {
	color: #FFF !important;
 	text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 30px #fff,
  0 0 40px #fff;
}
.navIcon { /*Image-Glow recreates text link a:hover (white neon glow) on images*/
	border-radius: 50%;
}
.ImageGlowIcon:hover {
	color: #fff;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 30px #fff,
  0 0 40px #fff;}
/*Image-Glow recreates text link a:hover (white neon glow) on images*/
.ImageGlow {
	border-radius: 10%;
}
.ImageGlow:hover {
	color: #fff;
	background: #fff;
	box-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 30px #fff,
  0 0 40px #fff;
}
/*Multicolour neon glow for divs*/
 .FeatureGlow {
	 height: 100%;
   width: 100%;
 }
.MultiColoursNeonGlow {
 box-sizing: border-box;
 box-shadow: inset 0 0 50px #fff, inset 20px 0 60px violet,
   inset -20px 0 60px #0ff, inset 20px 0 300px violet, inset -20px 0 300px #0ff,
   0 0 50px #fff, -10px 0 60px violet, 10px 0 60px #0ff;
}
.LightColoursNeonGlow { /*Matches White, Cream & WarmLight colours*/
	min-width: 30%;
 box-sizing: border-box;
 box-shadow: inset 0 0 50px #fff, inset 20px 0 60px #fcf8e3,
   inset -20px 0 60px #f3e3bf, inset 20px 0 300px #fcf8e3, inset -20px 0 300px #f3e3bf,
   0 0 50px #fff, -10px 0 60px #fcf8e3, 10px 0 60px #f3e3bf;
}
.LightColoursNeonGlowCircle { /*Matches White, Cream & WarmLight colours*/
	min-width: 30%;
 	box-sizing: border-box;
	  border-radius: 50%;
 	box-shadow: inset 0 0 50px #fff, 
	 inset 20px 0 60px #fcf8e3,
   inset -20px 0 60px #f3e3bf, 
	 inset 20px 0 300px #fcf8e3, 
	 inset -20px 0 300px #f3e3bf,
   0 0 50px #fff, -10px 0 60px #fcf8e3, 10px 0 60px #f3e3bf;
}
/*MOVING LINES ON NAVBAR LINKS*/
/*LINKS Active current links are underlined matching the same distance as MovingLines class*/
.active {
	color: #FFF;
	text-shadow: 3px 3px 0 #000000;
	text-shadow: 0px 0px 10px #FFF, 0px 0px 20px #fff; /*white light neon glow*/
	text-underline-offset: 13px;
  text-decoration-thickness: 2px !important;
	text-decoration: underline;
	text-align: center !important;
}
/*HOVER ON TOP NAV MovingLines = Moving Lines above and below link*/
.MovingLines {
  color: #FFF;
  position: relative;
  display: inline-block!important;
	text-align: center !important;
}
.MovingLines::after,
.MovingLines::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #fff, #f3e3bf);
  bottom: -1px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}
.MovingLines::before {
  top: -1px;
  transform-origin: left;
}
.MovingLines:hover::after,
.MovingLines:hover::before {
  transform: scaleX(1);
}
/*SHADOWS*/
.TextShadow {
  text-shadow: 0 2px 0 #333333;
}
.NoTextShadow {
  text-shadow: None;
}
.TextShadowWhite {
  text-shadow: 0 2px 0 #fff;
}  
.ShadowInset {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.ShadowButton {
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.ImageShadow {
  -webkit-filter: drop-shadow(5px 5px 5px #7a7a7a);
  filter: drop-shadow(5px 5px 5px #7a7a7a);
}
.ImageShadowWhite {
  -webkit-filter: drop-shadow(5px 5px 5px #FFF);
  filter: drop-shadow(5px 5px 5px #FFF);
}
.ImageShadowPink {
  -webkit-filter: drop-shadow(5px 5px 5px #FA0053);
  filter: drop-shadow(5px 5px 5px #FA0053);
}
.ImageShadowAubergine {
  -webkit-filter: drop-shadow(5px 5px 5px #2E283D);
  filter: drop-shadow(5px 5px 5px #2E283D);
}
.ShadowLarge {/*Same as Bootstrap shadow-lg*/
	-webkit-box-shadow:0 1rem 3rem rgba(0,0,0,0.175) !important;
	box-shadow:0 1rem 3rem rgba(0,0,0,0.175) !important;
}
/*GLASS EFFECTS*/
/*GlassDark used for top nav LG & XL Media Classes only*/
.GlassPanel {/*ORIGINAL GLASS PANEL*/
	/*e.g. Glass around nav, logos, buttons & added to LG & XL Media Classes (so doesn't surround XS SM MD too)*/
	background: rgba(255,255,255,0.07);	
	padding: 100;
  box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2), 15px 15px 15px rgba(0, 0, 0, 0.1),
    -5px -5px 5px rgba(255, 255, 255, 0.2) inset, 5px 5px 5px rgba(0,0,0,0.1) inset;
}
.GlassDark {
background: rgba(46, 40, 61, 0.70);
padding: 100;
margin: 50;
/*border-radius: 16px;*/
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(46, 40, 61, 0.3);
padding: 50;
box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2), 15px 15px 15px rgba(0, 0, 0, 0.1),
    -5px -5px 5px rgba(255, 255, 255, 0.2) inset, 5px 5px 5px rgba(0,0,0,0.1) inset;
}
/*ANIMATIONS*/
.GroovyWall { /*Neon animated background*/
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 20s ease infinite; /*35s original*/
	padding: 100 0;
	}
	@keyframes gradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
.EntranceAnimation { /*Hero logo/images scales up in 3 seconds from small to large*/
	animation: EntranceAnimation 5s ease-in-out 0s 1 normal forwards;}
	@keyframes EntranceAnimation {
	0% {transform: scale(0.5);}
	100% {transform: scale(1);}
}
.OverlayAnimation { /*Hero logo/text scales up in 3 seconds from small to large*/
	animation: OverlayAnimation 3s ease-in-out 0s 1 normal forwards;}
	@keyframes OverlayAnimation {
	0% {transform: scale(0.5);}
	100% {transform: scale(1);}
}
/*CAR ANIMATION used on the Reviews Hero for Pomeranian in car*/
.CarAnimation {
  overflow:visible;
  height: 400px;
	animation-delay: 2s;
}
.CarAnimation > .Car {
  position: relative;
  display: inline-block;
  animation: linear 1;
  animation-name: run;
  animation-duration: 25s;
}
@keyframes run {
  0% {
    transform: rotateY(180deg);
    left: -100px;
  }
  50% {
    transform: rotateY(180deg);
    left: 100%;
  }
  51% {
    transform: rotateY(0deg);
    left: calc(100% + 100px);
  }
  100% {
    transform: rotateY(0deg);
    left: -100px;
  }
}
/*BELL RINGS Footer Desk (shake top) ON HOVER & ANSWERED WITHIN 3 RINGS!*/
.RingBell:hover {
	animation: RingBell 2s ease-in-out 0s 1 normal forwards;}
@keyframes RingBell {
	0%,
	100% {transform: rotate(0deg);transform-origin: 50% 0;}
	10% {transform: rotate(2deg);}
	20%,40%,60% {transform: rotate(-4deg);}
	30%,50%,70% {transform: rotate(4deg);}
	80% {transform: rotate(-2deg);}
	90% {transform: rotate(2deg);}
}
/*PHONE RINGS Footer Desk (shake from bottom) ON HOVER & ANSWERED WITHIN 3 RINGS!*/
.RingPhone:hover {
	animation: RingPhone 2s ease-in-out 0s 1 normal forwards;
	}
	@keyframes RingPhone {
	0%,
	100% {transform: rotate(0deg);transform-origin: 50% 100%;}
	10% {transform: rotate(2deg);}
	20%,40%,60% {transform: rotate(-4deg);}
	30%,50%,70% {transform: rotate(4deg);}
	80% {transform: rotate(-2deg);}
	90% {transform: rotate(2deg);}
}
/*NEON & NEON ANIMATIONS*/
.NeonStatic 	{
	text-transform: uppercase;
	font-weight:100;
	text-shadow: 2px 2px 5px #CCCCCC;
	/*neonText*/
  color: #fff;
  text-shadow:
    /*neon white glow*/
    0 0 7px #fff,0 0 10px #fff,0 0 21px #fff,
    /*neon pink glow*/
    0 0 42px #FA0053,0 0 82px #FA0053,0 0 92px #FA0053,0 0 102px #FA0053,0 0 151px #FA0053;
}
/*NEON SIGN ANIMATION - Footer neon signs book now & call us*/
.NeonSignGlowing {
	 	font-family: "Meow Script", cursive;
		/*Google font Meow Script*/
		/*Font size in Media Classes*/
    color: #fff !important;
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    animation: glow 1.5s infinite alternate;
}
@keyframes glow {
    0% {
        text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    }
    100% {
        text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff;
    }
}
/*NEON BAR SEPARATOR USED ABOVE FOOTER*/
.NeonBarSeparatorWrapper {
  width: 100%;  
  .NeonBarSeparator {
    width: 100%;
    height: 5px;
    animation: rotate 3s infinite linear;
    -webkit-animation: rotate 3s infinite linear;}
}
.NeonBarSeparatorGradient {
  background: rgb(48,255,144); /*Old browsers*/
	background: -moz-linear-gradient(left,  rgba(48,255,144,1) 0%, rgba(237,45,237,1) 25%, rgba(201,152,38,1) 50%, rgba(48,255,230,1) 75%, rgba(48,255,144,1) 100%); /*FF3.6+*/
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(48,255,144,1)), color-stop(25%,rgba(237,45,237,1)), color-stop(50%,rgba(201,152,38,1)), color-stop(75%,rgba(48,255,230,1)), color-stop(100%,rgba(48,255,144,1))); /*Chrome,Safari4+*/
	background: -webkit-linear-gradient(left,  rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /*Chrome10+,Safari5.1+*/
	background: -o-linear-gradient(left,  rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /*Opera 11.10+*/
	background: -ms-linear-gradient(left,  rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /*IE10+*/
	background: linear-gradient(to right,  rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /*W3C*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30ff90', endColorstr='#30ff90',GradientType=1 ); /*IE6-9*/
}
/*PICTURE FRAMES*/
/*BLACK PICTURE FRAME (LOGO, 5 STARS & FEES FRAMES TOP/BOTTOM OF PAGES*/ 
.FrameBlack {
  background-color:blue;
  min-width: 50%;
	margin:40px;
  border:black solid 40px;
  -webkit-box-shadow: 4px 13px 59px 8px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 13px 59px 8px rgba(0,0,0,0.75);
	box-shadow: 4px 13px 59px 8px rgba(0,0,0,0.75);}
.FrameBlackGlass {
  background-color:#d3d3d3;
  height:100%;
  -webkit-box-shadow: inset 10px 10px 37px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 10px 10px 37px 0px rgba(0,0,0,0.75);
	box-shadow: inset 10px 10px 37px 0px rgba(0,0,0,0.75);}
.FrameBlackImage {
  width:80%;
  margin:10% 10% 10% 10%;
}
/*SILVER PICTURE FRAME (FOOD PAGE LOGO, MIMICS WALL FRAMES NEAR DRESSER IN RECEPTION*/ 
.FrameSilver {
  background-color:white;
  min-width: 50%;
	margin:40px;
  border:silver solid 40px;
  -webkit-box-shadow: 4px 13px 59px 8px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 13px 59px 8px rgba(0,0,0,0.75);
	box-shadow: 4px 13px 59px 8px rgba(0,0,0,0.75);}
.FrameSilverGlass {
  background-color:#d3d3d3;
  height:100%;
  -webkit-box-shadow: inset 10px 10px 37px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 10px 10px 37px 0px rgba(0,0,0,0.75);
	box-shadow: inset 10px 10px 37px 0px rgba(0,0,0,0.75);}
.FrameSilverImage {
  width:80%;
  margin:10% 10% 10% 10%;
}
/*FOOTER*/
#footer {
	max-width: 100vw;
	padding: 50 0;
	background-color: #2E283D; /*Aubergine*/
}
#ReceptionWallArt {
	/*Background image in Media Classes*/
	background-position: bottom center !important; 
	background-repeat: no-repeat;
}
.icon-svg-footer {
	height: 2rem;
	padding: 0 5px;
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}
/*RECEPTION DESK*/
.Desk {
	background-color: #8C94A0;
	min-height: 300px;
	border: 0.1px solid #333333;
	/*box-shadow: 0 14px 28px rgba(0,0,0,0.56), 0 10px 10px rgba(0,0,0,0.22);*/
	margin-bottom: 0px;
}
.DeskCounterTop {
	background-color: #8C94A0;
	height: 15px;
	border: 0.1px solid #333333;
	box-shadow: 0 14px 28px rgba(0,0,0,0.56), 0 10px 10px rgba(0,0,0,0.22);
	margin-bottom: 0px;
}
.DeskSides {
	border-left: 1px solid #7a7a7a;
	border-right: 1px solid #7a7a7a;
	background-color: #8C94A0;
	box-shadow: 0 14px 28px rgba(0,0,0,0.56), 0 10px 10px rgba(0,0,0,0.22);
}
/*DESK PANELS*/
.DeskPanel {
  min-height: 350px !important;
  /* [disabled]margin-bottom: 15px;*/
  padding: 5;
	z-index: 2;
}
.DeskPanelFrame {
  height: 100% !important;
  border: 1px solid #757466;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	z-index: 5;
}
.DeskPanelShadow {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.DeskKickBoard {
  width: 99%;
  height: 25px;
	margin: 50 0 0 0;
	background-color: #AFB5BD;
  border-top: 5px solid #fff;
	border-left: 1px solid #AFB5BD;
  border-right: 1px solid #AFB5BD;
  border-bottom: 4px solid #fff;
  border-bottom: 3px solid #f3e3bf;
	border-bottom: 2px solid #fff;
	border-bottom: 1px solid #fcf8e3;
	box-shadow: -5px        	1px       10px       5px 	#fff;
	box-shadow: -10px         5px       40px       10px 	#fff;
	box-shadow: -10px         5px       50px       10px 	#fff;
	box-shadow: 5px 					10px 			50px 				10px 	#fff;
	box-shadow: 5px 					10px 			25px 				5px 	#fff;
	box-shadow: 5px 					10px 			25px 				15px 	#fff;
	box-shadow: 5px 					10px 			40px 				20px 	#fff;
	box-shadow: 10px 					5px 			30px 				50px 	#fff;
	box-shadow: 15px 					5px 			20px 				40px 	#fff;
	box-shadow: 20px 					5px 			10px 				30px 	#fff;
	box-shadow: 30px 					5px 			50px 				20px 	#fff;
	box-shadow: 20px 					10px 			50px 				10px 	#fff;
  /*in order: x offset,  y offset,  blur size, spread size, color*/
  /*blur size and spread size are optional (they default to 0)*/
		/*--Cream: #fcf8e3;
	--WarmLight: #f3e3bf;*/
	}
.Copyright {
	/*background-images in Media Classes below*/
	background-position: center center !important; 
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #AFB5BD; /*Pigeon desk paint colour*/
	margin: 0;
	padding: 0;
	text-align: center !important;
}
.NeonWhite {
		box-shadow: 0px 0px 5px #FFF, 0px 0px 10px #fff, 0px 0px 15px #fff, 0px 0px 20px #fff, 0px 0px 25px #fff; /*white light neon glow*/
}
.NeonWhiteInset {
		box-shadow: inset 0px 0px 5px #FFF, 0px 0px 10px #fff, 0px 0px 15px #fff, 0px 0px 20px #fff, 0px 0px 25px #fff; /*white light neon glow*/
}
.NeonCream {
		box-shadow: 0px 0px 5px #fcf8e3, 0px 0px 10px #fcf8e3, 0px 0px 15px #fcf8e3, 0px 0px 20px #fcf8e3, 0px 0px 25px #fcf8e3; /*white light neon glow*/
}
.NeonCreamInset {
		box-shadow: inset 0px 0px 5px #fcf8e3, 0px 0px 10px #fcf8e3, 0px 0px 15px #fcf8e3, 0px 0px 20px #fcf8e3, 0px 0px 25px #fcf8e3; /*white light neon glow*/
}
/*IMAGES*/
/*1x = standard resolotion, 2x = retina resolution:*/
/*HEADERS & HEROES*/
header {
  /*Background image in Media Classes*/
	min-height: 100vh;
  width: 100vw;
	margin: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /*contain = full image width. cover = scale to fit screen (cropping may occur)*/
  position: relative;
  top: 0;
  left: 0;
  background-color: #2E283D; /*Aubergine*/
}
#Logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
	z-index: 5;
}
#Overlay {/*H1 full page background image overlay*/
  position: relative; /*Sit on top of the page content*/
	min-height: 25%; /*100% = Full height (cover the whole page)*/
  min-width: 40%;  /*100% = Full width (cover the whole page)*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(46,40,61,0.50); /*Aubergine background with opacity*/
  z-index: 2; /*Specify a stack order in case you're using a different order for other elements*/
}
.OverlayOpacity{
	background-color: rgba(46,40,61,0.40); /*Aubergine background with opacity*/
}
#HeroHome {
	height: 100vh;
}
#HeroReflection {
  /*Background image in Media Classes*/
	background-color: #2E283D; /*Aubergine*/
	transform: rotateX(180deg); /*required to revert div to normal rotation (when background image is rotated)*/
	min-height: 100vh;
  width: 100vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /*contain = full image width. cover = scale to fit screen (cropping may occur)*/
  position: relative;
  top: 0;
  left: 0;
  /*background-color: #2E283D;*/
	/*WATER RIPPLES ANIMATIONS*/
	/*Required for Water Ripples effecct:*/
  /*width: 100vw; duplicated*/
  margin: 0;
  padding: 0;
  /*if float disabled as creates white space above nav bar*/
  /* [disabled]float: left;*/
}
#HeroReflectionContent {
	height: 90%;
	width: 100%;
  margin-right: auto;
  margin-left: auto;
	margin-top: 0;
  margin-bottom: 0; /*required for centring horizontally*/
  /* [disabled]width: 80% !important;*/ /*WAS required for centring vertically but caused this div to overflow its container*/
  /*Background image in Media Classes*/
  transform: rotateX(180deg); /*required to revert text div to normal rotation (when background image is rotated)*/
  background: linear-gradient(180deg,rgba(47, 41, 62, 0.01) 10%, rgba(47, 41, 62, 1) 35%, rgba(47, 41, 62, 1) 50%, rgba(47, 41, 62, 1) 100%);
}
#HeroAboutReflection {
  /*Background image in Media Classes*/
	background-color: #2E283D; /*Aubergine*/
	transform: rotateX(180deg); /*required to revert div to normal rotation (when background image is rotated)*/
	min-height: 100vh;
  width: 100vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /*contain = full image width. cover = scale to fit screen (cropping may occur)*/
  position: relative;
  top: 0;
  left: 0;
  /*background-color: #2E283D;*/
	/*WATER RIPPLES ANIMATIONS*/
	/*Required for Water Ripples effecct:*/
  /*width: 100vw; duplicated*/
  margin: 0;
  padding: 0;
  /*if float disabled as creates white space above nav bar*/
  /* [disabled]float: left;*/
}
#HeroSuitesReflection {
  /*Background image in Media Classes*/
	background-color: #2E283D; /*Aubergine*/
	transform: rotateX(180deg); /*required to revert div to normal rotation (when background image is rotated)*/
	min-height: 100vh;
  width: 100vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /*contain = full image width. cover = scale to fit screen (cropping may occur)*/
  position: relative;
  top: 0;
  left: 0;
  /*background-color: #2E283D;*/
	/*WATER RIPPLES ANIMATIONS*/
	/*Required for Water Ripples effecct:*/
  /*width: 100vw; duplicated*/
  margin: 0;
  padding: 0;
  /*if float disabled as creates white space above nav bar*/
  /* [disabled]float: left;*/
}
#HeroReflection {
  /*Background image in Media Classes*/
	background-color: #2E283D; /*Aubergine*/
	transform: rotateX(180deg); /*required to revert div to normal rotation (when background image is rotated)*/
	min-height: 100vh;
  width: 100vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: 0;
  left: 0;
  /*background-color: #2E283D;*/
	/*WATER RIPPLES ANIMATIONS*/
	/*Required for Water Ripples effecct:*/
  /*width: 100vw; duplicated*/
  margin: 0;
  padding: 0;
  /*if float disabled as creates white space above nav bar*/
  /* [disabled]float: left;*/
}
/*MEDIA CLASSES - RESPONSIVE CHANGES DEPENDING ON SCREEN SIZE BREAKPOINTS BOOTSTRAP MEDIA SIZES*/

/*XS MOBILE DEVICES (portrait phones, less than 576px)*/
/*No media query for `xs` since this is the default in Bootstrap*/
/*@media (max-width: 575px) { ... }*/     
/*SM MOBILE STYLES*/
		/*OLD DMX: @media only screen and (max-width: 767px) {*/
		/*Small devices (landscape phones, 576px and up)*/
@media (max-width: 767px) {
	body::-webkit-scrollbar-track {display: none !important; /*VITAL hides bottom scrollbar*/}
.Fancy {
  font-size: 4.75rem !important;
	line-height: 4.75rem;
}
	/*NAVIGATION*/
	#NAVBAR {/*padding applies to SM devices only)*/
		padding-bottom: 20px !important;
	}
		navbar {
	/*GLASS DARK*/
		padding-bottom: 12px;
		background: rgba(47, 41, 62, 0.32);
		border-radius: 0px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		-webkit-backdrop-filter: blur(15px);
		backdrop-filter: blur(5px);
		border: 1px solid rgba(47, 41, 62, 0.3);
	/*GLASS PANEL*/
		/*e.g. Glass around nav, logos, buttons & added to LG & XL Media Classes (so doesn't surround XS SM MD too)*/
		padding: 100;
		box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2), 15px 15px 15px rgba(0, 0, 0, 0.1),
			-5px -5px 5px rgba(255, 255, 255, 0.2) inset, 5px 5px 5px rgba(0,0,0,0.1) inset;
}
	#navbarSupportedContent {
	/*Nav Background blur Glass Panel & white neon border only shown on SM & MD*/
  height: 100%;
	padding: 100;
	margin-top: 30px !important;
	padding-top: 20px;
	padding-bottom: 25px;
  box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.2), 15px 15px 15px rgba(0, 0, 0, 0.1),
    -5px -5px 5px rgba(255, 255, 255, 0.2) inset, 5px 5px 5px rgba(
        0,
        0,
        0,
        0.1
      ) inset;
	background: rgba(255,255,255,0.34);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	border-radius: 10px;
	/*Neon White light only shown on SM*/	
	box-shadow: 0px 0px 5px #FFF, 0px 0px 10px #fff, 0px 0px 15px #fff, 0px 0px 20px #fff, 0px 0px 25px #fff; /*white light neon glow*/
	}
	.nav-link {
	font-size: 1.25rem !important;
	}
/*HEADERS*/
	header > div {
	bottom: 50px;
	background-position: center center !important; 
	margin-left: 0%;
	margin-right: 0%;
	}
  #HeroHome {
  background-image: url(/images/hero-tropical-p-sm.jpg);
  }  
	#HeroReflection {
  background-image: url(/images/hero-tropical-p-sm.jpg);
  transform: rotateX(180deg);
  background-size: cover;
	}
	#HeroAbout {
  background-image: url(/images/hero-about-5-star-sign-p-sm.jpg);
  }
	#HeroAboutReflection {
  background-image: url("/images/hero-about-5-star-sign-p-sm.jpg");
	transform: rotateX(180deg);
	}
	#HeroSuites {
  background-image: url(/images/hero-suites-hallway-p-sm.jpg);
  }
	#HeroSuitesReflection {
  background-image: url(/images/hero-suites-hallway-p-sm.jpg);
	transform: rotateX(180deg);
	}
	#HeroActivities {
  background-image: url(/images/hero-activities-p-sm.jpg);
  }
	#HeroActivitiesReflection {
  background-image: url(/images/hero-activities-p-sm.jpg);
	transform: rotateX(180deg);
	}
	#HeroSalon {
  background-image: url(/images/hero-salon-shih-tzu-p-sm.jpg);
  }
	#HeroSalonReflection {
  background-image: url(/images/hero-salon-shih-tzu-p-sm.jpg);
	transform: rotateX(180deg);
	}
	#HeroFood {
  background-image: url(/images/hero-food-bags-p-sm.jpg);
  }
	#HeroFoodReflection {
  background-image: url(/images/hero-food-bags-p-sm.jpg);
	transform: rotateX(180deg);
	}
	#HeroReviews {
  background-image: url(/images/hero-reviews-reception-desk-lights-p-sm.jpg);
  }
	.CarAnimation {animation: linear 2 !important;}

	#HeroReviewsReflection {
  background-image: url(/images/hero-reviews-reception-desk-lights-p-sm.jpg);
	transform: rotateX(180deg);
	}
	#HeroTerms {
  background-image: url(/images/hero-terms-entrance-doors-p-sm.jpg);
  }
	#HeroTermsReflection {
  background-image: url(/images/hero-terms-entrance-doors-p-sm.jpg);
	transform: rotateX(180deg);
	}
	#HeroContact {
  background-image: url(/images/hero-contact-reception-p-sm.jpg);
  }
	#HeroContactReflection {
  background-image: url(/images/hero-contact-reception-p-sm.jpg);
	transform: rotateX(180deg);
	}
	#HeroBooking {
  background-image: url(/images/hero-booking-entrance-flowerbeds-p-sm.jpg);
  }
	#HeroBookingReflection {
  background-image: url(/images/hero-booking-entrance-flowerbeds-p-sm.jpg);
	transform: rotateX(180deg);
	}
	
	#ReceptionWallArt {
  background-image: url("/images/wall-art-500.png");
	background-position: top center !important; 
  }
	.Copyright {
  background-image: url(/images/reception-floor-640sm.jpg);
  }
	.NeonSignIveStayedAtTheGrove {
	font-size: 4.5rem !important;
	line-height: 4.5rem;
	}
	.NeonSignReception {
	font-size: 5.5rem !important;
	}
	.NeonSignGlowing {
	font-size: 2.5rem !important;
	}
  #LINKS {
  font-size: 1.1rem;
  }
} /*LEAVE THIS FINAL BRACKET HERE!*/

/*MD TABLET STYLES*/
/*DMX @media only screen and (min-width: 768px) and (max-width: 991px) {*/
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.Fancy {
  font-size: 5.75rem !important;
	line-height: 5.75rem;
}	
/*NAVIGATION*/
	#navbarSupportedContent {
	/*Nav Background blur Glass Panel & white neon border only shown on SM*/
	}
/*HEADERS*/
	header > div {
	bottom: 60px;
	margin-left: 0%;
	margin-right: 0%;
	}
  #HeroHome {
  background-image: url(/images/hero-tropical-l-md.jpg);
  }
	#HeroReflection {
  background-image: url(/images/hero-tropical-l-md.jpg);
  transform: rotateX(180deg);
	}
	#HeroAbout {
  background-image: url(/images/hero-about-5-star-sign-l-md.jpg);
  }
	#HeroAboutReflection {
  background-image: url(/images/hero-about-5-star-sign-l-md.jpg);
	transform: rotateX(180deg);
	}
	#HeroSuites {
  background-image: url(/images/hero-suites-hallway-l-md.jpg);
  }
	#HeroSuitesReflection {
  background-image: url(/images/hero-suites-hallway-l-md.jpg);
	transform: rotateX(180deg);
	}
	#HeroActivities {
  background-image: url(/images/hero-activities-l-md.jpg);
  }
	#HeroActivitiesReflection {
  background-image: url(/images/hero-activities-l-md.jpg);
	transform: rotateX(180deg);
	}
	#HeroSalon {
  background-image: url(/images/hero-salon-shih-tzu-l-md.jpg);
  }
	#HeroSalonReflection {
  background-image: url(/images/hero-salon-shih-tzu-l-md.jpg);
	transform: rotateX(180deg);
	}
	#HeroFood {
  background-image: url(/images/hero-food-bags-l-md.jpg);
  }
	#HeroFoodReflection {
  background-image: url(/images/hero-food-bags-l-md.jpg);
	transform: rotateX(180deg);
	}
	#HeroReviews {
  background-image: url(/images/hero-reviews-reception-desk-lights-l-md.jpg);
  }
	#HeroReviewsReflection {
  background-image: url(/images/hero-reviews-reception-desk-lights-l-md.jpg);
	transform: rotateX(180deg);
	}
	#HeroTerms {
  background-image: url(/images/hero-terms-entrance-doors-l-md.jpg);
  }
	#HeroTermsReflection {
  background-image: url(/images/hero-terms-entrance-doors-l-md.jpg);
	transform: rotateX(180deg);
	}
	#HeroContact {
  background-image: url(/images/hero-contact-reception-l-md.jpg);
  }
	#HeroContactReflection {
  background-image: url(/images/hero-contact-reception-l-md.jpg);
	transform: rotateX(180deg);
	}
	#HeroBooking {
  background-image: url(/images/hero-booking-entrance-flowerbeds-l-md.jpg);
  }
	#HeroBookingReflection {
  background-image: url(/images/hero-booking-entrance-flowerbeds-l-md.jpg);
	transform: rotateX(180deg);
	}
	
	#ReceptionWallArt {
  background-image: url(/images/wall-art-500.png);
  }
	.Copyright {
  background-image: url(/images/reception-floor-960md.jpg);
  }
	.NeonSignIveStayedAtTheGrove {
	font-size: 5rem !important;
	line-height: 5rem;
	}
	.NeonSignReception {
	font-size: 7rem !important;
	}
	.NeonSignGlowing {
	font-size: 3.5rem !important;
	}
	.Footer-Link {
		font-size: 1rem;
		line-height: 5rem !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
	}
	.Footer-Email {
		font-size: 0.5rem !important;
	}
.PalmTree {/*only shows on MD LG XL on the 2 sections: Fees & Bookings and  the Need Help (just above the footer)*/
  background-image: url(/images/palm-tree-indoor.jpg);
  background-repeat: no-repeat;
  background-attachment:scroll;
  background-position: right bottom;
  background-size: 250px 200px;
}
} /*LEAVE THIS FINAL BRACKET HERE!*/

/*LG LAPTOP STYLES*/
/*OLD DMX: @media only screen and (min-width: 992px) and (max-width: 1199px) {*/
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
/*SCROLLBAR 5 GOLD STARS - LG & XL ONLY*/
body::-webkit-scrollbar {
	width: 1em;
	overflow-y: scroll;
	/*AUTO GUTTER*/
	/*overflow: auto !important;*/
	padding-right: 0;
	background: linear-gradient(180deg,rgba(47, 41, 62, 0.01) 10%, rgba(47, 41, 62, 1) 35%, rgba(47, 41, 62, 1) 50%, rgba(15,13,19,1.00) 100%);
	}
	body::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: transparent !important;
	}
	body::-webkit-scrollbar-thumb {
	overflow: visible; /*allow image to fill scrollbar track*/
	background-image: url("https://www.grovekennels.co.uk/images/5-gold-stars-scrollbar.png"),
		linear-gradient(100deg, transparent, transparent) !important;
	background-position: center bottom, center -40px;
	background-repeat: no-repeat, no-repeat;
	background-size: contain, contain;
	background-color: transparent !important;
	}
	/*end of scrollbar 5 gold stars*/
.Fancy {
  font-size: 6.75rem !important;
	line-height: 6.75rem;
}
/*HEADERS*/
	header > div {
	bottom: 60px;
	margin-left: 0%;
	margin-right: 0%;
	}
  #HeroHome {
   background-image: url(/images/hero-tropical-l-lg.jpg);
  }
	#HeroReflection {
  background-image: url(/images/hero-tropical-l-lg.jpg);
	transform: rotateX(180deg);
	} 
	#HeroAbout {
  background-image: url(/images/hero-about-5-star-sign-l-lg.jpg);
  }
	#HeroAboutReflection {
  background-image: url(/images/hero-about-5-star-sign-l-lg.jpg);
	transform: rotateX(180deg);
	}
	#HeroSuites {
  background-image: url(/images/hero-suites-hallway-l-lg.jpg);
  }
	#HeroSuitesReflection {
  background-image: url(/images/hero-suites-hallway-l-lg.jpg);
	transform: rotateX(180deg);
	}
	#HeroActivities {
  background-image: url(/images/hero-activities-l-lg.jpg);
  }
	#HeroActivitiesReflection {
  background-image: url(/images/hero-activities-l-lg.jpg);
	transform: rotateX(180deg);
	}
	#HeroSalon {
  background-image: url(/images/hero-salon-shih-tzu-l-lg.jpg);
  }
	#HeroSalonReflection {
  background-image: url(/images/hero-salon-shih-tzu-l-lg.jpg);
	transform: rotateX(180deg);
	}
	#HeroFood {
  background-image: url(/images/hero-food-bags-l-lg.jpg);
  }
	#HeroFoodReflection {
  background-image: url(/images/hero-food-bags-l-lg.jpg);
	transform: rotateX(180deg);
	}
	#HeroReviews {
  background-image: url(/images/hero-reviews-reception-desk-lights-l-lg.jpg);
  }
	#HeroReviewsReflection {
  background-image: url(/images/hero-reviews-reception-desk-lights-l-lg.jpg);
	transform: rotateX(180deg);
	}
	#HeroTerms {
  background-image: url(/images/hero-terms-entrance-doors-l-lg.jpg);
  }
	#HeroTermsReflection {
  background-image: url(/images/hero-terms-entrance-doors-l-lg.jpg);
	transform: rotateX(180deg);
	}
	#HeroContact {
  background-image: url(/images/hero-contact-reception-l-lg.jpg);
  }
	#HeroContactReflection {
  background-image: url(/images/hero-contact-reception-l-lg.jpg);
	transform: rotateX(180deg);
	}
	#HeroBooking {
  background-image: url(/images/hero-booking-entrance-flowerbeds-l-lg.jpg);
  }
	#HeroBookingReflection {
  background-image: url(/images/hero-booking-entrance-flowerbeds-l-lg.jpg);
	transform: rotateX(180deg);
	}
	
	#ReceptionWallArt {
  background-image: url(/images/wall-art-500.png);
  }
	.Copyright {
  background-image: url(/images/reception-floor-1440lg.jpg);
  }
	.NeonSignIveStayedAtTheGrove {
	font-size: 5.5rem !important;
	line-height: 5.5rem;
	}
	.NeonSignReception {
	font-size: 7.5rem !important;
	}
	.NeonSignGlowing {
	font-size: 4rem !important;
	}
.PalmTree {/*only shows on MD on the 2 sections: Fees & Bookings and  the Need Help (just above the footer)*/
  background-image: url(/images/palm-tree-indoor.jpg);
  background-repeat: no-repeat;
  background-attachment:scroll;
  background-position: right bottom;
  background-size: 300px 275px;
}
} /*LEAVE THIS FINAL BRACKET HERE!*/

/*XL DESKTOP STYLES*/
/*OLD DMX: @media only screen and (min-width: 1200px) {*/
/*XL DEVICES (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
/*SCROLLBAR*/
	/*scrollbar flows from LG*/
/*HEADERS*/
	header > div {
	bottom: 40px;
	}
 	#HeroHome {
  background-image: url(/images/hero-tropical-l-xl.jpg);
  }
	#HeroReflection {
  background-image: url(/images/hero-tropical-l-xl.jpg);
	transform: rotateX(180deg);
	}
	#HeroAbout {
  background-image: url(/images/hero-about-5-star-sign-l-xl.jpg);
  }
	#HeroAboutReflection {
  background-image: url(/images/hero-about-5-star-sign-l-xl.jpg);
	transform: rotateX(180deg);
	}
	#HeroSuites {
  background-image: url(/images/hero-suites-hallway-l-xl.jpg);
  }
	#HeroSuitesReflection {
  background-image: url(/images/hero-suites-hallway-l-xl.jpg);
	transform: rotateX(180deg);
	}
	#HeroActivities {
  background-image: url(/images/hero-activities-l-xl.jpg);
  }
	#HeroActivitiesReflection {
  background-image: url(/images/hero-activities-l-xl.jpg);
	transform: rotateX(180deg);
	}
	#HeroSalon {
  background-image: url(/images/hero-salon-shih-tzu-l-xl.jpg);
  }
	#HeroSaloReflection {
  background-image: url(/images/hero-salon-shih-tzu-l-xl.jpg);
	transform: rotateX(180deg);
	}
	#HeroFood {
  background-image: url(/images/hero-food-bags-l-xl.jpg);
  }
	#HeroFoodReflection {
  background-image: url(/images/hero-food-bags-l-xl.jpg);
	transform: rotateX(180deg);
	}
	#HeroReviews {
  background-image: url(/images/hero-reviews-reception-desk-lights-l-xl.jpg);
  }
	#HeroReviewsReflection {
  background-image: url(/images/hero-reviews-reception-desk-lights-l-xl.jpg);
	transform: rotateX(180deg);
	}
	#HeroTerms {
  background-image: url(/images/hero-terms-entrance-doors-l-xl.jpg);
  }
	#HeroTermsReflection {
  background-image: url(/images/hero-terms-entrance-doors-l-xl.jpg);
	transform: rotateX(180deg);
	}
	#HeroContact {
  background-image: url(/images/hero-contact-reception-l-xl.jpg);
  }
	#HeroContactReflection {
  background-image: url(/images/hero-contact-reception-l-xl.jpg);
	transform: rotateX(180deg);
	}
	#HeroBooking {
  background-image: url(/images/hero-booking-entrance-flowerbeds-l-xl.jpg);
  }
	#HeroBookingReflection {
  background-image: url(/images/hero-booking-entrance-flowerbeds-l-xl.jpg);
	transform: rotateX(180deg);
	}
	
	#ReceptionWallArt {
  background-image: url(/images/wall-art-750.png);
	background-position: center center !important; 
  }
	.Copyright {
  background-image: url(/images/reception-floor-1920xl.jpg);
  }
	.NeonSignIveStayedAtTheGrove {
	font-size: 6rem !important;
	}
	.NeonSignReception {
	font-size: 7rem !important;
	}
	.NeonSignGlowing {
	/*flows from LG*/
	}
.PalmTree {/*only shows on MD on the 2 sections: Fees & Bookings and  the Need Help (just above the footer)*/
  background-image: url(/images/palm-tree-indoor.jpg);
  background-repeat: no-repeat;
  background-attachment:scroll;
  background-position: right bottom;
  background-size: 580px 500px !important;
}
} /*LEAVE THIS FINAL BRACKET HERE!*/