/* @override http://localhost:8888/WebDev/Online/srilanka-2024/css/style.031.css */

/* Hide original text when hovering (simple attempt, may not work perfectly post-translation) */
/*div:hover {
    visibility: hidden;
}*/

/* @group Notes */

/* Use a value from 200 to 1000*/

.cairo {
  font-family: "Cairo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}

/* Use a value from 200 to 1000*/

.tilt-warp {
  font-family: "Tilt Warp", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "XROT" 0,
    "YROT" 0;
}

/* Use a value from 300 to 700*/

.quicksand {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Use a value from 400 to 7000*/

.noto-sans sora sompeng {
  font-family: "Noto Sans Sora Sompeng", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* @end notes */

.berkshire-swash-regular {
  font-family: "Berkshire Swash", serif;
  font-weight: 400;
  font-style: normal;
}

.aladin-regular {
  font-family: "Aladin", system-ui;
  font-weight: 400;
  font-style: normal;
}

/* @group Brand Style */

:root {
	--darkGray: #322c2c;
	--darkRed: #801214;
	--lightRed: #ad1f20;
	--darkYellow:#e39800;
	--lightYellow:#e7d39f;
	--darkGreen: #21a802;
	--lightGreen: #51fb2a;
	--orange:#fa6a29;
	--blue:#003d63;
	--purple:#bd6dba;
	--cream: #d0c9c1;
	--cairo: "Cairo", sans-serif;
	--tilt: "Tilt Warp", sans-serif;
	--quickSand: "Quicksand", sans-serif;
	--noto: "Noto Sans Sora Sompeng", sans-serif;
	--berkshire: "Berkshire Swash", serif;
	--aladin: "Aladin", system-ui;
}

html {
	font: 16px/20px var(--cairo);
	font-optical-sizing: auto;
	font-style: normal;
	-webkit-font-smoothing: subpixel-antialiased;
	text-rendering: optimizeLegibility;
	font-smooth: always;
	overflow-x: hidden;
	background-color: #ffffff;
}

body {

}

/* Every <img> has width/height attributes so its space is reserved before it downloads (lazy images
   used to start at zero height and push the pinned galleries down as they arrived). height: auto
   keeps the attribute from fixing the height wherever CSS sets only the width. */
img {
	height: auto;
}

/* Inline SVG icons from blocks/icons.php. Sized by font-size and coloured by color, like the
   Font Awesome font they replace (same height, baseline offset and proportions). */
.icon {
	display: inline-block;
	fill: currentColor;
	height: 1em;
	overflow: visible;
	vertical-align: -0.125em;
}


h1, h2, h3, h4 {
	color: var(--darkGray);
	font-family: var(--quickSand);
	/* Defensive only: a single long word (e.g. "BESTEMMINGEN" on the destination pages) has
	   nowhere else to break at narrow widths and would otherwise overflow the viewport. Existing
	   shorter headings already fit and are unaffected. */
	overflow-wrap: anywhere;
}

h1 {
	text-align: center;
	font-size: 5rem;
	font-family: var(--noto);
	font-weight: 700;
	margin: 3rem 0;
	text-transform: uppercase;
	line-height: 5rem;
	letter-spacing: 0;
}

h2 {
	font: normal normal 5rem var(--tilt)!important;
	line-height: 3rem;
	margin: 5rem 0 1rem;
	text-align: left;
	letter-spacing: .2rem;
	color: var(--darkRed);
	text-transform: uppercase;
}

h3 {
	font: normal normal 3rem var(--noto)!important;
	line-height: 3rem;
	margin: 2rem 0 1rem;
	text-align: left;
	letter-spacing: .2rem;
	color: var(--darkRed);
	text-transform: uppercase;
}

h3.mini {
	letter-spacing: 1px;
}

h4 {
	margin: 3rem 0 0;
	font-size: 2rem;
}

p,
ul li,
a {
	margin: 2rem 0;
	font: 1.5rem var(--cairo);
	line-height: 2.2rem;
	font-weight: 300;
	color: #3c3737;
}

a {
	color: var(--darkRed);
	text-decoration: none;
	margin: 0;
}

a:hover,
a.current {
	color: black;
}

a:focus {
	opacity: 0.9;
}

/* Links in running text are underlined as well as coloured: the dark red is too close to the dark
   grey text to tell them apart by colour alone (accessibility) */
p a,
li a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* @end theme */

/* @group Basic Design */

/* @group Shell */

.siteWrap {

}

.siteWrap .smooth-scroll {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
}
	
.siteWrap .smooth-scroll #smooth-scroll-content {
	
}


.siteWrap .smoothScroll {

}

header {
	height: calc(100vh - 5rem);
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

main {
	width: 100vw;
}

.bottomContent {
	position: relative;
	z-index: 2;
	background-color: white;
}

.topTitle {
}

.mobileNav {
	display: none;
}

/* @end shell*/

/* @group Header */

/* @group Top Image */
	
header .topVideo {
	flex: 1;
	width: 100%;
	position: absolute;
	inset: 0;
}
	
.topContent header .topVideo > div {
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.topContent header .topVideo .vidBack {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: all 2s ease-in-out;
	opacity: 1;
}

.topContent header .topVideo .vidBack.loaded {
	opacity: 0;
}

.topContent header .topVideo .vidBack img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	filter: blur(20px);
}

.topContent header .topVideo .vidWrap {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.topContent header .topVideo .vidWrap video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;    
}


		
.topContent header .cornerPics {
	width: 50vw;
	position: absolute;
}
	
.topContent header .cornerPics img {
	width: 100%;
}
	
.topContent header .introTop {
	top: 0;
	left: 0;
	z-index: 0;
}
	
.topContent header .introBottom {
	bottom: -0.5rem;
	right: 14px;
}
	
.topContent header .introBottom img {
		
}
	
.topContent header .topIntro {
	position: absolute;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	width: 70vw;
	margin-top: 5rem;
}
	
.topContent header .topIntro span {
	width: 100%;
}
	
.topContent header .topIntro > span img {
	width: 100%;
}
	
.topContent header .topIntro .topDec {
	width: 75%;
	margin-bottom: 2rem;
}

.topContent header .topIntro .introLogo {
	
}
	
.topContent header .topIntro .bottomDec {
	width: 50%;
	filter: drop-shadow(2px 2px 20px black);
	margin-top: 2rem;
}

.topContent header .topIntro .lang {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	margin-top: 1rem;
}

.topContent header .topIntro .lang a {
	text-transform: uppercase;
	font-weight: bold;
	background-color: rgba(255, 255, 255, 0.81);
	width: 3rem;
	height: 3rem;
	display: inline-block;
	text-align: center;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	margin-right: .5rem;
	margin-left: .5rem;
	border-radius: 100%;
	border: 1px solid var(--darkRed);
}
		
/* @end top image */
	
/* @group Top Nav */
	
.topNavTrigger {
	position: relative;
	z-index: 1000;
	overflow: hidden;
	height: 13rem;
	border-top: .5rem solid var(--darkGreen);
}

.topNav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	z-index: 2;
	background: url(../img/graphics/redPattern.webp) left bottom repeat-x;
	background-size: contain;
	border-bottom: 1px solid black;
}

.topNav .navBanner,
.topNav nav .navLogo {
	display: none;
}

.topNav nav {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 5rem;
	max-width: 1000px;
}

.topNav nav a {
	font-size: 2.2rem;
	flex: 1 0 auto; /* Example: Adjust based on your layout needs */
	text-align: center;
	position: relative;
	height: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	color: white;
	font-family: var(--aladin);
	transition: color .3s ease-in-out 0s;
	text-transform: lowercase;
	letter-spacing: 1px;
	text-shadow: 0 1px 2px black;
}

.topNav nav:hover a {
	color: silver;
}

.topNav nav:hover a::after {
	opacity: 1;
}

.topNav nav a:hover {
	color: yellow;
	opacity: 1;
}

.topNav nav a::after {
	content: "";
	position: absolute;
	top: 2.2rem;
	bottom: 2.2rem;
	width: .2rem;
	background-color: green;
	right: 0;
	transition: scale .3s ease-in-out;
	border-radius: 100%;
}

.hideLines .topNav nav a::after {
	scale: 1 0;
}

.topNav nav a:last-of-type::after {
	display: none;
}

.topNav nav div {
	
}
	
.topNav nav div img {
	display: none;
}
	
/* @end top nav */
	
/* @group Fixed Header */
	
.headFlipped .topNav {
	border-top: .2rem solid #3c3a3a;
	box-shadow: 0 .5rem 2.5rem black;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
	background-color: var(--cream);
}

.headFlipped .topNav nav {
	width: 100%;
	height: 3rem;
}

.headFlipped .topNav nav a {
	font-size: 1.7rem;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.headFlipped .navLogo {
	filter: drop-shadow(0 1rem .5rem rgba(0,0,0,0.5));
	position: relative;
	z-index: 1;
}

.headFlipped .navLogo .logoWrap {
	background-clip: padding-box;
	padding: 2rem 0rem 0rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-end;
	align-content: flex-start;
	margin: -10rem 1rem 0;
	position: relative;
	z-index: 1;
}
	
.headFlipped .navLogo .logoWrap img {
	width: 20rem;
	display: block;
	position: relative;
	top: 1.5rem;
}
	
.headFlipped .topNav .navBanner,
.headFlipped .topNav nav .navLogo {
	display: block;
}

.headFlipped .topNav .navBanner {
	width: 100%;
	height: 5rem;
	background: url(../img/graphics/border.webp) center center repeat-x yellow;
	border-bottom: 3px solid yellow;
	object-fit: cover;
	position: relative;
	z-index: 1;
}
	
.fullContentPic {
	width: calc(100% - 8rem);
	padding-top: 2rem;
}

.fullContentPic img {
	display: block;
	width: 100%;
	height: 50rem;
}

/* @end fixed header */

/* @end header */


/* @group Main */

/* @group Frame */

main .mainSection {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

main .mainSection > div {
	max-width: 1500px;
	padding-right: 10rem;
	padding-left: 10rem;
}

main .introduction {
	padding-bottom: 5rem;
}

main .introduction strong {
	font-weight: bold;
	background-color: var(--darkGray);
	display: block;
	color: var(--lightGray);
	padding: .2rem .2rem .2rem 1rem;
}

main .introduction strong span {
	display: block;
	font-weight: 100;
	font-style: italic;
	border-top-style: solid;
	margin-right: 1rem;
	border-top-width: .1rem;
}

/* @end frame */

/* @group Welcome */

.introWrap {
	height: 20rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.introWrap img {
	object-fit: cover;
	border: 2px solid var(--darkRed);
}

.introWrap img:nth-of-type(1) {
	height: 100%;
	width: auto; /* width follows the height, not the width attribute */
}

.introWrap img:nth-of-type(2) {
	height: 100%;
	width: auto; /* width follows the height, not the width attribute (which pushed the section wider than the window) */
	flex: 1;
	margin-left: 1rem;
}

.signOff {
	background-color: var(--darkRed);
	color: white;
	padding: .5rem;
	margin-top: 0;
	margin-bottom: 0;
}

.signEnd {
	background-color: var(--darkGreen);
	color: white;
	padding: .5rem;
	margin-top: 0;
	margin-bottom: 0;
	font-weight: bold;
}

.signEnd span {
	color: black;
	margin-left: 1rem;
}


/* @end welcome */

/* @group Introduction */

div {
	
}

/* @end introduction */

/* @group Tours */

/* @group Grid */

.tourExample .div1 {
	grid-area: 1 / 1 / 2 / 2;
}

.tourExample .div1 ul {
	transform: rotate(3deg);
}

.tourExample .div2 {
	grid-area: 1 / 2 / 2 / 3;
}

.tourExample .div2 ul {
	transform: rotate(1deg);
}

.tourExample .div3 {
	grid-area: 1 / 3 / 2 / 4;
}

.tourExample .div3 ul {
	transform: rotate(-1deg);
}

.tourExample .div4 {
	grid-area: 2 / 1 / 3 / 2;
}

.tourExample .div4 ul {
	transform: rotate(-2deg);
}

.tourExample .div5 {
	grid-area: 2 / 2 / 3 / 3;
}

.tourExample .div5 ul {
	transform: rotate(-1deg);
}

.tourExample .div6 {
	grid-area: 2 / 3 / 3 / 4;
}

.tourExample .div6 ul {
	transform: rotate(2deg);
}

.tourExample .div7 {
	grid-area: 3 / 1 / 4 / 2;
}

.tourExample .div7 ul {
	transform: rotate(-1deg);
}

.tourExample .div8 {
	grid-area: 3 / 2 / 4 / 3;
}

.tourExample .div8 ul {
	transform: rotate(3deg);
}

.tourExample .div9 {
	grid-area: 3 / 3 / 4 / 4;
}

.tourExample .div9 ul {
	transform: rotate(-2deg);
}

.tourExample .div10 {
	grid-area: 4 / 1 / 5 / 2;
}

.tourExample .div10 ul {
	transform: rotate(1deg);
}

/* @end grid */

.tourExample {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
}

.tourExample ul {
	margin: 0;
	padding: 1rem;
	background: url(../img/graphics/paperDark.webp);
	background-size: 100%;
	height: 100%;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.59);
}

.tourExample ul li {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font: 1.2rem var(--cairo);
	line-height: 1.6rem;
	font-weight: 500;
	border-top: 1px solid rgba(0, 0, 0, 0.17);
	padding-top: .7rem;
}

.tourExample ul li:nth-of-type(2) {
	border-top-style: none;
}

.tourExample ul li.dayTitle {
	color: var(--darkRed);
	font: 1.5rem var(--aladin);
	margin-bottom: 1rem;
	border-top-style: none;
}

/* @group Prices */

/* @group Switcher */

/* @group Frame */

.switchBox {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	padding: 2rem;
	box-shadow: 0 0 5px black;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.36);
}

.switchBox .switchBoxContentWrap {
	width: 100%;
}

.switchBox .switchBoxNav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
	margin-bottom: 2rem;
}

/* @end frame */

/* @group Switchbox Navigation */

.switchBox .switchBoxNav .switch-btn {
	font: 2rem var(--aladin);
	border-radius: 1rem;
	border: 1px solid #303030;
	padding: 1rem;
	text-transform: lowercase;
	flex: 1;
	background-color: var(--darkRed);
	cursor: pointer;
	transition: color .3s ease-in-out .1s, background-color .3s ease-in-out 0s;
	color: white;
}

.switchBox .switchBoxNav button:nth-child(2) {
	margin-right: 2rem;
	margin-left: 2rem;
}

.switchBox .switchBoxNav .switch-btn.active {
    background-color: var(--darkGreen); /* Example active button color */
    color: white;
}

.linksAnimating .switchBox .switchBoxNav .switch-btn {
	cursor: wait;
}

.switchBox .switchBoxNav .switch-btn:not(.active):hover {
    color: white;
	background-color: var(--darkGreen);
}

/* @end switchbox navigation */

/* @group Switchbox Content */

.switchBox .switchBoxContentWrap .switchBoxContent {
	display: none;
}

.switchBox .switchBoxContentWrap .switchBoxContent.current {
	display: block;
}

.switchBox .switchBoxContentWrap .switchBoxContent p {
	margin-right: 1rem;
	margin-left: 1rem;
}


/* @end switchbox content */

/* @end switcher */

/* @group Switcher Sections */


/* @end switcher sections */

/* @end prices */

/* @end tours */

/* @group Srilanka */

/* @group Landmarks */

.head {
	display: flex;
	flex-direction: row;
	height: 100vh;
	justify-content: space-around;
}

.landmarkWrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: left;
	font-size: 40px;
	width: 100%;
	height: 100vh;
}

.heading {
	opacity: 0;
	position: absolute;
	background-color: silver;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.heading#heading0 {
	opacity: 1;
}

.landmark {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 70%);
	padding: 10rem 5rem 2rem;
}

.landmark p {
	color: black;
	font-weight: 500;
	font-family: var(--quickSand);
}

.landmark h4 {
	text-align: left;
	font: normal 4rem var(--quickSand);
	text-transform: uppercase;
	margin-bottom: -1rem;
	color: #530201;
	border-bottom: 5px solid #530201;
	padding-bottom: 1rem;
}

.landmarkMore {
	display: inline-block;
	margin-top: 1rem;
	padding: .6rem 1.4rem;
	background-color: var(--darkRed);
	color: white!important;
	font-family: var(--quickSand);
	font-weight: 700;
	text-decoration: none;
	border-radius: 6px;
	letter-spacing: .03rem;
}

.landmarkMore:hover,
.landmarkMore:focus-visible {
	background-color: var(--lightRed);
}

.landmarkPic {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.landmarkPic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* @group First Intro */

.heading#heading0 .landmarkPic img {
	filter: grayscale(100%);
	filter: blur(5px);
}

.heading#heading0 .landmark {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 7rem 0 0;
	top: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.heading#heading0 .landmark h4 {
	width: 100%;
	text-align: center;
	font: 6rem var(--tilt);
}

.heading#heading0 .landmark p {
	max-width: 70rem;
	font-weight: bold;
	text-align: center;
}



/* @end first intro */

/* @end landmarks */

/* @end srilanka */

/* @group Gallery */

#panels {
	position: relative;
}

#panels #panels-container {
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	width: 500%;
	border: 3px solid yellow;
	border-left-style: none;
	border-right-style: none;
}

#panels #panels-container::before {
	content: "";
	inset: 0;	
	position: absolute;
	background-color: var(--darkRed);
	background: url(../img/graphics/greenPattern.webp) yellow;
}

#panels #panels-container .galTitle {
	position: absolute;
	top: 11rem;
	left: 4.5rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: flex-end;
	align-content: flex-start;
}

#panels #panels-container .galTitle h2 {
	color: white;
	margin: 0!important;
	line-height: 3.6rem!important;
	text-shadow: 2px 2px 3px black;
}

#panels #panels-container .galTitle .galSub {
	color: white;
	font-style: italic;
	font-family: var(--noto);
}

#panels #panels-container .panel {
	position: relative;
	width: 100%;
	height: calc(100vh - 22rem);
	overflow: hidden;
	display: flex;
	text-align: left;
	top: 5.2rem;
}

#panels #panels-container .panel .galSec {
	display: grid;
	grid-template-columns: repeat(30, 1fr);
	grid-template-rows: repeat(20, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	position: absolute;
	top: 0rem;
	bottom: 0rem;
	left: 5rem;
	right: 5rem;
	background-color: white;
	border: .2rem solid white;
}

#panels #panels-container .panel .galSec > div {
	padding: .5rem;
}

#panels #panels-container .panel .galSec > div img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.galSec .div1 {
	grid-area: 1 / 1 / 11 / 8;
}

.galSec .div2 {
	grid-area: 11 / 1 / 21 / 8;
}

.galSec .div3 {
	grid-area: 1 / 8 / 21 / 25;
}

.galSec .div4 {
	grid-area: 1 / 25 / 7 / 31;
}

.galSec .div5 {
	grid-area: 7 / 25 / 12 / 31;
}

.galSec .div6 {
	grid-area: 12 / 25 / 16 / 31;
}

.galSec .div7 {
	grid-area: 16 / 25 / 21 / 31;
}

/* @end gallery */

/* @group Reviews */

#reviews-wrapper {
	padding: 0;
}

.reviews-wrap {
	margin: 2rem 0rem;
	display: flex;
	flex-flow: row nowrap;
	gap: 1.5rem;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}

.reviews-wrap .split {
	flex: 1 1 0;
	min-width: 0;
}

.reviews-wrap .review {
	margin: 1rem 0 .5rem;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
	max-height: 11rem;
	overflow: visible;
	display: flex;
	flex-direction: column;
	transition: max-height 0.5s ease-in-out 0.7s, box-shadow 0.5s ease-in-out;
	border-radius: 10px;
	font-family: var(--noto);
	box-shadow: 1px 1px 5px black;
	background-image: url(../img/graphics/whitePaper.webp);
	background-size: 100%;
	position: relative;
}

.reviews-wrap .review .review-content {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
}

.reviews-wrap .review:hover {
	max-height: 100rem;
	box-shadow: 2px 2px 10px black;
}

.reviews-wrap .review .date {
	display: block;
	color: var(--darkGreen)!important;
	text-shadow: 1px 1px black;
}

.reviews-wrap .review .name {
	font: 1.2rem var(--tilt);
	color: var(--darkRed);
	margin-top: .2rem;
	display: block;
	margin-bottom: .5rem;
}

.reviews-wrap .review .comments {
	display: block;
	padding-top: 1rem;
	color: #5b2f20;
	font: 1.2rem var(--quickSand);
	line-height: 1.4rem;
	transition: color .5s ease-in-out .7s;
}

.reviews-wrap .review .comments p {
	margin: 0 0 0.85rem;
	color: inherit;
	font: inherit;
	line-height: inherit;	
}

.reviews-wrap .review .comments p:last-child {
	margin-bottom: 0;
}

.reviews-wrap .review .comments br + br {
	content: "";
	display: block;
	margin-top: 0.7rem;
}

.instructions {
	text-align: center;
	color: green;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding-bottom: 2rem;
}

.reviews-wrap .review .comments p,
.reviews-wrap .review .comments p * {
	background-color: transparent!important;
	box-shadow: 0 0 rgba(68, 68, 68, 0)!important;
}

#goog-gt-tt {
	display: none!important;
	opacity: 0!important;
	scale:0!important;
}

strong.green {
	color: green;
}

/* @end reviews */

/* @group Contact */

article#contact {
	padding-bottom: 10rem;
}

article.thanks {
	position: relative;
}

article.thanks > div {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.enquire {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: rgba(255, 255, 255, 0.9);
	max-width: 50rem;
	margin-top: 1rem;
	border-radius: 0 0 20px 20px;
	border: 3px solid #801214;
	padding: 1rem;
}

#end {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
	overflow: hidden;
	border-top: 3px solid #801214;
	top: 1rem;
}

#end img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.enquire .surangaPic {
	margin-top: -12rem;
}

.enquire .surangaPic img,
.liesPic img {
	width: 20rem;
	border-radius: 100%;
	border: 2px solid var(--darkRed);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.enquire .surangaInfo p {
	text-align: center;
}

.enquire .surangaInfo p.promo {
	color: maroon;
	font-weight: bold;
	font: 3rem var(--tilt);
	text-align: center;
	max-width: 50rem;
}

.footerTenure {
	color: var(--darkRed);
	font-weight: 700;
	margin-top: -0.5rem;
}

.thankYou {
	font: bold 8rem var(--tilt);
	margin-top: 5rem;
	margin-bottom: 5rem;
	text-align: center;
	color: white;	
	text-transform: uppercase;
	position: relative;
	color: transparent;
	background-image: url('../img/graphics/greenPattern.webp');
    background-size: cover;
    background-position: center;
	-webkit-background-clip: text;
    background-clip: text;
	text-transform: uppercase;
	text-shadow: 10px 6px 0px #f1efef;
}

.socialBox .icon {
	font-size: 2rem;
}

.liesPic {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.liesPic img {
	width: 12rem;
	border-radius: 100%;
}

/* @end contact */

/* @group Pic Styles */

/* @group Pics Horizontal */

.picsHorizontal {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.picsHorizontal div {
	flex: 1;
}

.picsHorizontal div:nth-of-type(2) {
	margin-right: 1rem;
	margin-left: 1rem;
}

.picsHorizontal div img {
	width: 100%;
	border-radius: 10px;
	border: 2px solid var(--darkGreen);
	height: 15rem;
	object-fit: cover;
}

/* @end pics horizontal */

/* @group Pics Vertical */

.left {
	float: left;
}

.picsVertical {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	margin: .5rem 2rem .5rem 5rem;
	width: 30vw;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.picsVertical div {
	
}

.picsVertical div:nth-of-type(2) {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.picsVertical div img {
	width: 100%;
	border-radius: 10px;
	border: 2px solid var(--darkGreen);
	height: 27rem;
	object-fit: cover
}

.picsVertical div:nth-of-type(2) img {
	height: 20rem;
}


/* @end pics vertical */

/* @group Mini Gal */

.miniGal {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Large image takes 2/3, stacked images take 1/3 */
    grid-gap: 10px; /* Adjust the gap as needed */
}

.large-image {
	background-color: red;
}

.large-image img {
	height: 100%;
	object-fit: cover;
}

.large-image,
.stacked-images {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stacked-images > div {
    flex: 1; /* This will make the two images in the stacked area equally share the available space */
}

/* Adjust the size of the images */
.miniGal img {
    width: 100%; /* Makes the image fill the container */
}


/* @end mini gal */

.small {
	width: 25vh!important;
}

.floatLeft {
	width: 50vh;
	float: left;
	box-shadow: -10px 10px 0px var(--darkRed);
	margin-top: .5rem;
	margin-right: 2rem;
	margin-bottom: 2rem;
}

.floatRight {
	width: 50vh;
	float: right;
	box-shadow: 10px 10px 0px var(--darkGreen);
	margin-top: .5rem;
	margin-left: 2rem;
	margin-bottom: 2rem;
}

img.center {
	width: 100%;
	-webkit-mask-image: url('../img/graphics/splat.webp');
    mask-image: url('../img/graphics/splat.webp');
    mask-size: cover;
    mask-repeat: no-repeat;
	mask-position: center;
}

.imageHolder img {
	margin-top: 0rem;
	border-radius: 1.5rem;
}

.leftPic img {
	float: left;
	margin-right: 3rem;
	width: 60%;
}

.rightPic img {
	float: right;
	margin-left: 3rem;
}

.centerPic img {
	width: 100%;
}

/* @end pic styles */



/* @end main */

/* @group Footer */

footer {
	background: url(../img/graphics/redPattern.webp) var(--darkRed);
	width: 100%;
	position: relative;
	z-index: 3;
	padding: .5rem;
	color: white;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	border-top: 3px solid var(--darkGreen);
	font-size: 1.5rem;
	font-family: var(--quickSand);
	font-weight: 400;
}

footer a {
	color: white;
	font-family: var(--quickSand);
	font-weight: 400;
}

footer .credit {
	flex: 1;
}

footer .privacy {
	margin-right: 4rem;
	color: white;
}

footer a:hover {
	color: red;
}

/* @end footer */

/* @end basic design */

/* @group Reusable Modules */

/* @group Book Now Fixed Footer */

.bookNowFull {
	position: fixed;
	bottom: 1.5rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	right: 0;
	left: 0;
	padding-right: 2rem;
	padding-left: 2rem;
	z-index: 3;
}


.bookNowFull .bookNow {
	width: 100%;
	max-width: 60rem;
	background: url(../img/graphics/redPattern.webp) yellow;
	align-self: stretch;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	border-radius: 10px;
	border: 2px solid black;
	position: relative;
	height: 2.5rem;
	box-shadow: 0 0 10px black;
	margin-left: 1rem;
}

.bookNowFull .bookNow::after {
	content: "";
	background: url(../img/graphics/border.webp);
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 5px;
	right: 5px;
	border-radius: 10px;
}

.bookNowFull .bookNow > div {
	width: 3rem;
}

.bookNowFull .bookNow .launchBook {
	text-align: center;
	flex: 1;
	color: white;
	font-weight: bold;
	position: relative;
	z-index: 1;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.bookNowFull .bookNow .launchBook a {
	background: url(../img/graphics/redPattern.webp) #33a702;
	font: 2rem var(--berkshire);
	padding: .5rem;
	border-radius: 10px;
	border: 2px solid green;
	text-transform: lowercase;
	box-shadow: 0 0 10px black;
	transition: all .3s ease-in-out 0s;
	cursor: pointer;
	color: white;
}

.bookNowFull .bookNow .launchBook a:hover {
	transform: scale(1.15);
	color: yellow;
}

/* @end book now fixed footer */

.horizontalWrap {
	
}

.horizontalWrap > div:first-of-type {
	margin-bottom: .8rem;
}

/* @group FAQ */

ul.faq {
	padding-top: 1rem;
	padding-left: 0;
	margin: 0;
}

ul.faq li {
	list-style: none;
	margin: 0;
}

ul.faq li:nth-child(odd) {
	font-weight: bold;
	color: var(--darkRed);
}

ul.faq li:nth-child(even) {
	margin-bottom: 2rem;
}

/* @end faq */

/* @group General Rules */

.center {
	text-align: center;
	font-weight: bold;
	margin-bottom: 5rem;
}

/* @end general rules */

/* @group Full Width */

.fullWidthQuote {
	position: relative;
	padding-bottom: 5rem;
	padding-top: 5rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.fullWidthQuote .imageSpread {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.fullWidthQuote .imageSpread img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
}

.fullWidthQuote .caption {
	z-index: 1;
	position: relative;
	background-color: rgba(0, 0, 0, 0.69);
	border: .5rem solid white;
	max-width: 1000px;
	margin-right: 5%;
	margin-left: 5%;
	padding-right: 2rem;
	padding-left: 2rem;
}

.fullWidthQuote .caption p {
	color: white;
	font-family: var(--cairo);	
}

.fullWidthQuote .caption p a {
	color: #158ae3;
	font-weight: bold;
}

.fullWidthQuote .caption p a:hover {
	text-decoration: underline;
}

/* @end full width */

/* @group Two Column */

.introContent p:first-of-type {
	margin-top: 0;
}

.introContent p:first-of-type::first-letter {
	font: 7rem/7rem var(--tilt);
	background-color: var(--darkRed);
	padding: 0.2rem 1.5rem 0;
	float: left;
	border: .2rem solid #797170;
	color: white;
	margin-top: .8rem;
	margin-right: 1rem;
	box-shadow: inset 0 0 4rem rgba(0, 0, 0, 0.35);
	margin-bottom: .1rem;
}


/* @end two column */

/* @group Custom Scroller */

.customScroll {
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: none;
}


/* Works on Chrome/Edge/Safari */
.customScroll::-webkit-scrollbar-track {
	display: none;
}

.customScroll::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.customScroll::-webkit-scrollbar-thumb {
	background-color: var(--darkGray);
	border-radius: 20px;
	transition: all 1s ease-in-out 0s;
}

/* This styles the scrollbar track */
div::-webkit-scrollbar-track {
  background-color: transparent;
}

/* This styles the scrollbar thumb */
div::-webkit-scrollbar-thumb {
  background-color: black; /* Make the thumb transparent */
  border-radius: 10px;
}

/* This styles the scrollbar itself (width, height) */
div::-webkit-scrollbar {
  width: 8px; /* Width of the vertical scrollbar */
  height: 8px; /* Height of the horizontal scrollbar */
}

/* @end custom scroller*/

/* @group Prices */

/* @group Hotel */

.prices-sub {
	margin: 2rem 1rem 0;
	position: relative;
}

.prices {
	margin-top: 2rem;
}

.hotel-rates .prices {
	display: none;
}

.hotel-rates .prices.active {
	display: block;
}

.selectWrap {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	font: 2rem var(--quickSand);
}

.selectWrap .selectIntro {
	margin-right: 1rem;
}

.selectWrap .selectSelection select {
	background: var(--darkGreen);
	border: none;
	border-radius: 10px;
	color: white;
	font: 2rem var(--quickSand);
	font-weight: 300;
}

/* @group Table */

.prices table {
	text-align: center;
	background: url(../img/graphics/redPattern.webp) red;
	width: 100%;
	padding: .5rem;
}

/* @group Table Headers */

.prices th:first-child {
	display: none;
}


/* @end table headers */

/* @group Table Cells */

.prices td {
	padding: 1rem;
}

.prices th,
.prices tr:nth-child(odd) td,
.prices tr:nth-child(even) td {
	display: none;
}

.prices table td:first-child {
	text-align: center;
	padding-right: 1rem;
	padding-left: 1rem;
	color: white;
	text-transform: capitalize;
	display: block;
	font: 1.3rem var(--noto);
}

.prices table tr:nth-child(odd) td:first-child {
	background-color: #f9db3d;
	color: black;
}

.prices table tr:nth-child(even) td:first-child {
	background-color: #f2a100;
	color: black;
}

/* @end table cells*/

/* @end table */

/* @end hotel*/

/* @group Attractions  */

.attractionsPrices {
	
}

.attractionsPrices li {
	padding-right: 0;
	margin-left: 0;
	margin-bottom: 1rem;
	margin-top: 0;
	list-style: none;
}

.attractionsPrices li::before {
	content:url('../img/graphics/lion.webp');
	margin-right: 1rem;
	border-radius: 100%;
	overflow: hidden;
}

.attractionsPrices li span {
	color: var(--darkGreen);
}


/* @end attractions */

/* @end prices */



	/* @group Dedicated Reviews Page */
	
	#translatedReviewsPage {
		background-color: white;
	}
	
	#translatedReviewsPage body {
		background-color: white;
	}
	
	#translatedReviewsPage .reviews-wrap {
		margin: 0rem;
		visibility: hidden;
		opacity: 0;
	}
	
	#translatedReviewsPage .reviews-wrap .review {
		max-height: 10000000000rem;
		overflow: visible;
		transition: none;
	}
	
	#translatedReviewsPage .reviews-wrap .review:hover {
		max-height: 100rem;
		box-shadow: 2px 2px 10px black;
	}
	
.reviewsFrame  {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: center;
		align-content: center;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(255, 255, 255, 0.73);
		backdrop-filter: blur(2px);
		visibility: hidden;
		z-index: 50;
	}

	html.reviewsPopupOpen,
	body.reviewsPopupOpen {
		overflow: hidden;
	}
	
	.reviewsFrame .reviewsFrameContent {
		width: 90vw;
		height: 90vh;
		max-height: 50rem;
		max-width: 80rem;
		box-shadow: 0 0 20px black;
	}
	
	.reviewsFrame .reviewsFrameContent .loadReviewsInto {
		width: 100%;
		height: 100%;
	}

	.reviewsFrame .reviewsFrameContent .loadReviewsInto iframe {
		width: 100%;
		height: calc(100% - 3.6rem);
		border-style: none;
	}
	
	.closeReviewsWindow {
		background-color: red;
		margin-bottom: .5rem;
		padding: 1rem;
		text-align: center;
		font-weight: bold;
		text-transform: uppercase;
		color: white;
		cursor: pointer;
	}
	
	.closeReviewsWindow:hover {
		background-color: maroon;
	}
	
	.submit {
		border-top: 2px solid var(--darkRed);
		padding-top: 2rem;
	}
	
a#loadReviews {
	text-decoration: underline;
	font-weight: 500;
}

a#loadReviews.green-link {
	color: #14752a !important;
	text-decoration: underline;
}

a#loadReviews.green-link:hover {
	color: #0f5f22 !important;
}
	
	/* @end dedicated reviews page*/

/* @end reusable modules*/
 	
 	/* @group Warning */
 	
 	/*<div class="cc_css_reboot cc_dialog light headline nl"><div><h1 class="cc_dialog_headline">Wij gebruiken cookies</h1><div><p class="cc_dialog_text">Wij maken gebruik van cookies en andere tracking-technologieën om uw surfervaring op onze website te verbeteren, om gepersonaliseerde inhoud en advertenties te tonen, om onze website trafiek te analyseren en om te begrijpen waar onze bezoekers vandaan komen. <br></p></div><div><button class="cc_b_ok">Ik ga akkoord</button><button class="cc_b_cp">Wijzig mijn voorkeuren</button></div></div></div>*/
 	
 	.cc_dialog {
 		position: fixed!important;
 		right: 10px!important;
 		max-width: 400px!important;
 		bottom: 10px!important;
 		border: 1px solid black!important;
 		border-radius: 20px!important;
 		box-shadow: 0 1px 5px black;
 		background-color: white!important;
 		color: red;
 	}
 	
 	.cc_dialog h5 {
	 	font: 3rem!important;
	 	color: red!important;
 	}
 	
 	#changePreferences {
 		position: fixed;
 		bottom: 0;
 		right: 0;
 		z-index: 10000;
 		background-color: white;
 		padding: 20px 10px 10px 20px;
 		display: flex;
 		flex-flow: column nowrap;
 		justify-content: center;
 		align-items: center;
 		align-content: center;
 		border-radius: 50px 0 0 0;
 	}
 	
 	#changePreferences i {
 		display: block;
 		font-size: 2rem;
 		color: red;
 	}
 	 	
 	/* @end warning */
 	
 	/* @group Smaller Screens */
 		
 	@media (max-width: 1400px) {
 			
 		html {
 			font-size: 15px;
 		}
 		
 	}
 	
 	@media (max-width: 1200px) {
 			
 		html {
 			font-size: 14px;
 		}
 		
 		main .mainSection > div {
			padding-right: 7rem;
			padding-left: 7rem;
		}
 		
 	}
 	 	
 	@media (max-width: 1000px) {
 			
 		html {
 			font-size: 13px;
 		}
 		
 		main .mainSection > div {
			padding-right: 2rem;
			padding-left: 2rem;
		}
		
		img.floatLeft,
		img.floatRight {
			width: 100%;
			float: none;
			box-shadow: 0px 0 0 transparent;
			margin-right: 0;
			margin-left: 0;
			border: 1px solid var(--darkRed);
		}
		
		#panels #panels-container .panel {
		    position: relative;
		    width: 100%;
		    height: calc(100vh - 22rem);
		    overflow: hidden;
		    display: flex;
		    flex-direction: column;
		    text-align: left;
		    top: 5.2rem;
		}
		
		#panels #panels-container .panel .galSec {
		    display: grid;
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    left: 5rem;
		    right: 5rem;
		    background-color: white;
		    border: .2rem solid white;
		    grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
		    grid-template-rows: repeat(3, 1fr);
		    padding: .5rem;
		    gap: 5px;
		}
		
		
		#panels #panels-container .panel .galSec > div {
		    display: flex;
		    align-items: stretch;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
		}
		
		#panels #panels-container .panel .galSec > div img {
		    width: 100%;
		    height: 100%;
		    object-fit: cover;
		}

		#panels #panels-container .panel .galSec .div1 { grid-area: 1 / 1 / 2 / 2; }
		#panels #panels-container .panel .galSec .div2 { grid-area: 1 / 2 / 2 / 3; }
		#panels #panels-container .panel .galSec .div3 { grid-area: 2 / 1 / 3 / 2; }
		#panels #panels-container .panel .galSec .div4 { grid-area: 2 / 2 / 3 / 3; }
		#panels #panels-container .panel .galSec .div5 { grid-area: 3 / 1 / 4 / 2; }
		#panels #panels-container .panel .galSec .div6 { grid-area: 3 / 2 / 4 / 3; }
		#panels #panels-container .panel .galSec .div7 { display: none;}
		
		.topContent header .cornerPics {
			width: 75vw;
		}
			
		.topContent header .introBottom {
			right: 0;
		}
			
		.topContent header .topIntro {
			width: min(34rem, calc(100vw - 2rem));
			left: 50%;
			right: auto;
			transform: translateX(-50%);
			padding-right: 0;
			padding-left: 0;
			box-sizing: border-box;
		}

		.topContent header .topIntro .introLogo {
			width: 96%;
			margin: 0 auto;
		}

		.topContent header .topIntro .introLogo img {
			display: block;
		}
						
		.topContent header .topIntro .lang a {
			width: 4rem;
			height: 4rem;
			margin-right: 1rem;
			margin-left: 1rem;
		}
 		
 	}
 	
 	
 	
 @media (max-width: 750px) {

	/* 19px bold counts as large text, which white on the brand green is readable enough for (at 18px it isn't) */
	.signEnd {
		font-size: 1.6rem;
	}

 	
 	.desktopOnly {
 		display: none;
 	}
 	
 	header {
		height: calc(100vh - 0rem);
	}
 	
 	html {
 		font-size: 12px;
 	}
 	
 	.topNavTrigger {
		position: relative;
		z-index: 1000;
		overflow: hidden;
		height: 2rem!important;
		border-top: .5rem solid var(--darkGreen);
	}
 	
 	.topNav {
 		display: none;
 	}
 	
 	h1 {
 		line-height: 4rem!important;
 		font-size: 4rem!important;
 	}
 	
 	h2 {
 		line-height: 4rem!important;
 		font-size: 4rem!important;
 	}
 	
 	h3 {
 		line-height: 3rem!important;
 		font-size: 2.5rem!important;
 	}
 	
 	img.center,
 	img.floatLeft,
 	img.floatRight {
 	/*	margin-bottom: 3rem;
		margin-top: 0rem;*/
 	}
 	
 	/* @group Mobile Nav */
 	
 	.mobileNav {
 		position: fixed;
 		right: 2rem;
 		top: 1rem;
 		z-index: 8;
 		display: block;
 		width: 300px;
 	}
 	
 	.mobileNavWrap {
 		background-color: var(--darkRed);
 		display: block;
 		border-radius: 10px;
 		padding: 1rem 2rem;
 		box-shadow: 0 1px 5px black;
 		border: 1px solid black;
 		display: none;
 		flex-flow: column wrap;
 		justify-content: space-around;
 		align-items: center;
 		align-content: center;
 		transform-origin: top right;
 		scale: 0;
 		transition: all .5s ease-in-out 0s;
 		top: 1rem;
 		right: 1rem;
 		position: relative;
 	}
 	
 	.showMobile .mobileNavWrap {
 		scale: 1;
 		translate: 0 1rem;
 	}
 		
 	.mobileNavWrap a {
 		font: 2rem var(--tilt);
 		padding: 1rem;
 		border-bottom: 1px solid white;
 		width: 100%;
 		text-align: center;
 		color: yellow;
 		text-transform: uppercase;
 		letter-spacing: 1px;
 	}
 		
 	.mobileNav a:last-child {
 		border-bottom-style: none;
 	}
 		
 	.menuWrap {
 		cursor: pointer;
 		position: absolute;
 		z-index: 40;
 		background-color: var(--darkRed);
 		right: 0;
 		top: 0;
 		padding: 1.5rem 1rem;
 		border-radius: 25px;
 		border: 1px solid black;
 		transition: all .5s ease-in-out 0s;
 	}
 	
 	.showMobile .menuWrap {
 		scale: .6;
 		translate: 2rem -1rem;
 		background-color: red;
 	}
 	
 	.burgerMenu {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-around;
 		width: 40px;
 		height: 30px;
 	}
 	
 	.burgerMenu .bar {
 		height: 4px;
 		width: 100%;
 		background-color: #fff;
 		transition: all 0.3s ease;
 	}
 	
 	.showMobile .burgerMenu .top {
 		transform: translateY(12px) rotate(45deg);
 		background-color: white;
 	}
 	
 	.showMobile .burgerMenu .middle {
 		opacity: 0;
 	}
 	
 	.showMobile .burgerMenu .bottom {
 		transform: translateY(-12px) rotate(-45deg);
 		background-color: white;
 	}
 	
 	/* @end mobile Nav*/
 	
 	.introWrap {
		height: auto;
		display: flex;
		flex-flow: column nowrap;
 	}
	
	.introWrap img {
		object-fit: cover;
		border: 2px solid var(--darkRed);
		width: 100%;
		margin-right: 0!important;
		margin-left: 0!important;
	}
	
	.introWrap img:nth-of-type(1) {
		height: auto;
		width: 100%; /* the desktop rule above sets width: auto with higher specificity */
	}
	
	.introWrap img:nth-of-type(2) {
		height: auto;
		width: 100%; /* the desktop rule above sets width: auto with higher specificity */
		flex: 1;
		margin-top: 1rem;
	}
 	
 	/* @group Tour Example */
 	
	.tourExample {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(6, auto);
		margin-bottom: 3rem;
	}
 	
 	.tourExample .div1 {
 	    grid-area: 1 / 1 / 2 / 2;
 	}
 	
 	.tourExample .div2 {
 	    grid-area: 1 / 2 / 2 / 3;
 	}
 	
 	.tourExample .div3 {
 	    grid-area: 2 / 1 / 3 / 2;
 	}
 	
 	.tourExample .div4 {
 	    grid-area: 2 / 2 / 3 / 3;
 	}
 	
 	.tourExample .div5 {
 	    grid-area: 3 / 1 / 4 / 2;
 	}
 	
 	.tourExample .div6 {
 	    grid-area: 3 / 2 / 4 / 3;
 	}
 	
 	.tourExample .div7 {
 	    grid-area: 4 / 1 / 5 / 2;
 	}
 	
 	.tourExample .div8 {
 	    grid-area: 4 / 2 / 5 / 3;
 	}
 	
	.tourExample .div9 {
	    grid-area: 5 / 1 / 6 / 3; /* Spans both columns in the last row */
	}

	.tourExample .div10 {
	    grid-area: 6 / 1 / 7 / 3; /* Spans both columns in the final row */
	}

	.tourExample .div9 ul {
	    transform: rotate(0deg);
		margin-top: 0;
	}

	.tourExample .div10 ul {
		margin-top: 0.75rem;
	}
 	
 	.tourExample div ul {
 	    transform: rotate(0deg)!important;
 	}
 	
	.tourExample ul li {
		font: 1.5rem var(--cairo);
		line-height: 1.8rem;
	}

	/* @end tour example */
 	
 	#panels #panels-container .galTitle {
		top: 2rem;
 		left: 1rem;
 	}
	
	#panels #panels-container .galTitle .galSub {
		display: none;
	}
	
	#panels #panels-container .panel {
		position: relative;
		width: 100%;
		height: calc(100vh - 10rem);
		overflow: hidden;
		display: flex;
		text-align: left;
		top: 3rem;
	}
	
	#panels #panels-container .panel .galSec {
		left: 1rem;
		right: 1rem;
	}
	
	.picsHorizontal div:last-child {
	    display: none;
	}
	
	.switchBox {
		padding: 1rem;
	}
	
	.switchBox .switchBoxNav {
		margin-bottom: 0;
	}
	
	.switchBox .switchBoxContentWrap {
		width: 100%;
	}
		
	.switchBox .switchBoxNav .switch-btn {
		padding: .5rem;
	}
	
	.switchBox .switchBoxNav button:nth-child(2) {
		margin-right: 1rem;
		margin-left: 1rem;
	}
	
	.attractionsPrices {
		padding-left: 1rem;
	}
	
	.landmarkWrap {
		overflow: hidden;
	}
	
	.landmark {
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 47.8%);
		padding: 0rem 1rem 2rem;
	}
	
	.landmarkPic {
		position: absolute;
		top: -10rem;
		bottom: 10rem;
	}
	
	.landmarkPic img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.landmark p {
		font-weight: 500;
		font-size: 1.3rem;
		line-height: 1.7rem;
		width: calc(100% - 2rem)
	}
	
	.landmark h4 {
		font: normal 2.3rem var(--tilt);
		border-bottom: 1px solid #530201;
		background-color: white;
		border-radius: 5px;
		padding: 0 1rem;
		width: calc(100% - 2rem)
	}

	.landmarkMore {
		font-size: 1.1rem;
	}

	.heading#heading0 .landmark {
		padding: 0;
	}
	
	.heading#heading0 .landmark h4 {
		font: 3.5rem var(--tilt);
		background-color: transparent;
		border-radius: 0px;
		padding: 0 1rem;
		width: calc(100% - 0rem)
		
	border-style: none;
	}
	
	.nl .heading#heading0 .landmark h4 {
		font: 2.5rem var(--tilt);
	}
	
	.heading#heading0 .landmark p {
		max-width: 30rem;
	}
	
	.prices-sub {
		margin: 2rem 0rem 0;
	}
		
	.selectWrap {
		font: 1.5rem var(--quickSand);
	}
	
	.selectWrap .selectSelection select {
		font: 1.5rem var(--quickSand);
		margin-top: 1rem;
	}
	
	#reviews-wrapper {
		padding: 0;
		height: 75vh;
		padding-right: 3rem;
		padding-left: 3rem;
		box-shadow: 0 1px 10px black;
		border-radius: 20px;
		width: 90%;
		position: relative;
	}
	
	.reviews-wrap {
		display: flex;
		flex-flow: column nowrap;
		gap: 0;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		overflow-y: auto;
		overflow-x: hidden;
		position: absolute;
		inset: 1rem;
		margin-top: 0;
		margin-bottom: 0;
		border-radius: 20px;
		padding-right: 1rem;
	}
	
	.reviews-wrap .split {
		flex: 1;
	}
	
	.reviews-wrap .review {
		transition: none;
		max-height: 100%;
		margin-bottom: 2rem;
	}
	
	.reviews-wrap .review:hover {
		max-height: 100rem;
	}
	
	.reviews-wrap .review .comments {
		padding-bottom: 1rem;
		margin-bottom: 1rem;
	}
	
	.reviews-wrap .review .comments p {
		font: 1.5rem var(--quickSand);	
		margin-bottom: 1.1rem;
	}

	.reviews-wrap .review .comments p:last-child {
		margin-bottom: 0;
	}
	
	.reviews-wrap .review:hover {
		max-height: inherit;
	}
	
	#translatedReviewsPage #reviews-wrapper {
		height: auto;
		padding-right: 1rem;
		padding-left: 1rem;
		box-shadow: 0 0 0 transparent;
		border-radius: 0px;
		width: 100%;
	}
	
	#translatedReviewsPage .reviews-wrap {
		overflow-y: visible;
		overflow-x: visible;
		position: static;
		margin-top: 0;
		margin-bottom: 0;
		border-radius: 0px;
		padding-right: 0rem;
	}
	
	.enquire {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		background-color: rgba(255, 255, 255, 0.9);
		max-width: 50rem;
		margin-top: 1rem;
		margin-right: 1rem;
		border-radius: 0 0 20px 20px;
		border: 3px solid #801214;
		padding: 1rem;
		margin-left: 1rem;
	}
	
	.enquire .surangaInfo p.promo {
		font: 2rem var(--tilt);
	}
	
	.thankYou {
		font: bold 4rem var(--tilt);
		margin-top: 5rem;
		margin-bottom: 5rem;
		text-align: center;
		color: white;	
		text-transform: uppercase;
		position: relative;
		text-shadow: 0 2px 2px black;
	}
	
	.thankYou::after {
		display: none;
	}
	
	footer {
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	
	.bookNowFull {
		padding-right: 1rem;
		padding-left: 1rem;
	}
	
	.bookNowFull .bookNow {
		width: 100%;
		max-width: 80rem;
	}
	
	.bookNowFull .bookNow > div {
		width: 3rem;
	}
	
	img.center {
		margin-bottom: 0;
	}
	
 }
 		
 		
 	/* @end smaller screens */

.guestbook-submit-wrap {
	background: rgba(255, 255, 255, 0.9);
	border: 2px solid #9a1213;
	border-radius: 14px;
	margin: 2rem auto;
	max-width: 70rem;
	padding: 2rem;
}

.guestbook-helper {
	margin-bottom: 1.4rem;
}

.guestbook-public-form {
	display: flex;
	flex-flow: column nowrap;
	gap: 1.2rem;
}

.guestbook-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guestbook-public-form label {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.5rem;
}

.guestbook-public-form label span {
	font: 600 1.5rem var(--quickSand);
}

.guestbook-privacy-note {
	font: 500 1.25rem/1.6 var(--quickSand);
	margin: 0;
}

.guestbook-privacy-note a {
	text-decoration: underline;
}

.guestbook-public-form input,
.guestbook-public-form textarea {
	border: 1px solid #8f8f8f;
	border-radius: 6px;
	font: 400 1.5rem var(--quickSand);
	padding: 0.8rem 1rem;
	width: 100%;
}

.guestbook-public-form textarea {
	min-height: 10rem;
	resize: vertical;
}

.guestbook-submit-button {
	align-self: flex-start;
	background: #9a1213;
	border: 2px solid #7e0f10;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font: 600 1.4rem var(--quickSand);
	letter-spacing: 0.02em;
	padding: 0.9rem 1.8rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.guestbook-submit-button:hover {
	background: #b01516;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
}

.guestbook-submit-button:active {
	transform: translateY(0);
}

.guestbook-submit-button:disabled {
	cursor: not-allowed;
	opacity: 0.6;
	transform: none;
}

.guestbook-form-status {
	font: 500 1.4rem var(--quickSand);
	margin: 0;
	min-height: 2rem;
}

.guestbook-form-status.error {
	color: #b40000;
}

.guestbook-share {
	border-top: 1px dashed #c2b2b2;
	margin-top: 1.8rem;
	padding-top: 1.3rem;
}

.guestbook-share-title {
	font: 600 1.5rem var(--quickSand);
	margin: 0 0 0.9rem;
}

.guestbook-share-helper {
	margin: 0 0 0.9rem;
}

.guestbook-share-helper a {
	text-decoration: underline;
}

.guestbook-share-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.guestbook-share-links a {
	align-items: center;
	background: #f9ecec;
	border: 1px solid #cc9b9b;
	border-radius: 999px;
	color: #6f1f1f;
	display: inline-flex;
	font: 600 1.3rem var(--quickSand);
	gap: 0.45rem;
	padding: 0.45rem 0.85rem;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.guestbook-share-links a .icon {
	flex-shrink: 0;
	font-size: 1.5rem;
}

.guestbook-share-links a:hover {
	background: #f6dada;
	transform: translateY(-1px);
}

.guestbook-honeypot {
	left: -9999px;
	opacity: 0;
	position: absolute;
	top: -9999px;
}

.review.pending-review {
	border-left: 4px solid #b8860b;
	padding-left: 1rem;
}

.reviews-wrap .review.admin-deletable-review .delete-live-review-button {
	align-items: center;
	background: #fff;
	border: 2px solid #b11a1a;
	border-radius: 999px;
	color: #b11a1a;
	cursor: pointer;
	display: inline-flex;
	height: 2.2rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(45%, -45%);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	width: 2.2rem;
	z-index: 5;
}

.reviews-wrap .review.admin-deletable-review .delete-live-review-button span {
	display: block;
	font: 700 1.5rem/1 var(--quickSand);
	transform: translateY(-0.04rem);
}

.reviews-wrap .review.admin-deletable-review .delete-live-review-button:hover {
	background: #b11a1a;
	border-color: #b11a1a;
	color: #fff;
}

.reviews-wrap .review.admin-deletable-review .delete-live-review-button:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.adminModeBanner {
	background: #fdf0f0;
	border: 1px solid #c83a3a;
	border-radius: 8px;
	color: #6e1b1b;
	font: 500 1.4rem var(--quickSand);
	margin: 0 0 1.2rem;
	padding: 0.8rem 1rem;
}

.adminModeBanner a {
	color: #6e1b1b;
	font-weight: 700;
	text-decoration: underline;
}

.reviews-wrap .review.pending-review .name {
	color: #6b2015;
}

.reviews-wrap .review.pending-review .comments {
	color: #4c2a1d;
}

.reviews-wrap .review.pending-review .comments p,
.reviews-wrap .review.pending-review .comments p * {
	color: #4c2a1d !important;
}

.review.pending-review .name::after {
	content: " (pending review)";
	font-size: 1.2rem;
	color: #7a5a00;
}

.nl .review.pending-review .name::after {
	content: " (in afwachting)";
}

.reviews-wrap .review.pending-review.moderation-review .name::after {
	content: "";
}

.reviews-wrap .review.pending-review.moderation-review {
	background-image: linear-gradient(rgba(255, 246, 246, 0.95), rgba(255, 246, 246, 0.95)), url(../img/graphics/whitePaper.webp);
	border: 2px solid #c43838;
	max-height: none;
	overflow: visible;
}

.reviews-wrap .review.pending-review.moderation-review .date {
	color: #8b1010 !important;
	text-shadow: none;
}

.reviews-wrap .review.pending-review.moderation-review .comments {
	color: #4c2a1d;
	display: block;
}

.reviews-wrap .review.pending-review.moderation-review .moderation-badge {
	background: #b42222;
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font: 700 1.1rem var(--quickSand);
	letter-spacing: 0.04em;
	margin-bottom: 0.6rem;
	padding: 0.3rem 0.7rem;
	text-transform: uppercase;
}

.reviews-wrap .review.pending-review.moderation-review .moderation-actions {
	display: flex;
	flex-flow: row nowrap;
	gap: 0.6rem;
	margin-top: 0.8rem;
}

.reviews-wrap .review.pending-review.moderation-review .moderation-actions button {
	border: 1px solid #9f1919;
	border-radius: 999px;
	cursor: pointer;
	font: 600 1.15rem var(--quickSand);
	padding: 0.45rem 0.9rem;
	transition: all 0.2s ease;
}

.reviews-wrap .review.pending-review.moderation-review .approve-pending-review {
	background: #f4fff4;
	border-color: #1b7f2f;
	color: #176b28;
}

.reviews-wrap .review.pending-review.moderation-review .reject-pending-review {
	background: #fff4f4;
	color: #8d1e1e;
}

.reviews-wrap .review.pending-review.moderation-review .moderation-actions button:hover {
	transform: translateY(-1px);
}

@media screen and (max-width: 700px) {
	.guestbook-grid {
		grid-template-columns: 1fr;
	}
}


/* @group Cookie Banner (blocks/consent.php, js/consent.js; only shown when tracking is set up in config.php) */

.consentBanner {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	z-index: 10000;
	box-sizing: border-box;
	width: calc(100% - 3rem);
	max-width: 56rem;
	padding: 1.5rem 2rem;
	background-color: #fbf6ee;
	border: 2px solid var(--darkRed);
	border-radius: 1rem;
	box-shadow: 0 .5rem 2.5rem rgba(0, 0, 0, .35);
	color: #3c3737;
}

.consentBanner[hidden],
.consentBanner [hidden] {
	display: none;
}

.consentBanner .consentTitle {
	margin: 0 0 .5rem;
	font: 700 1.6rem/2rem var(--quickSand);
	color: var(--darkRed);
}

.consentBanner .consentText {
	margin: 0 0 1rem;
	font: 500 1.3rem/1.9rem var(--quickSand);
	color: #3c3737;
}

.consentBanner a {
	font: inherit;
	color: var(--darkRed);
	text-decoration: underline;
}

.consentOptions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	margin: 0 0 1rem;
}

.consentOptions label {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font: 600 1.3rem var(--quickSand);
	cursor: pointer;
}

.consentOptions input {
	width: 1.8rem;
	height: 1.8rem;
	accent-color: var(--darkRed);
}

.consentButtons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .8rem;
}

/* Accept and reject look the same: refusing has to be as easy as accepting */
.consentButtons button {
	padding: .7rem 1.8rem;
	border: 2px solid var(--darkRed);
	border-radius: 999px;
	background-color: var(--darkRed);
	color: #ffffff;
	font: 700 1.3rem var(--quickSand);
	cursor: pointer;
}

.consentButtons button.consentSecondary {
	background-color: transparent;
	color: var(--darkRed);
}

.consentButtons button:hover {
	border-color: #5e0d0f;
	background-color: #5e0d0f;
	color: #ffffff;
}

.consentButtons button:focus-visible {
	outline: 3px solid var(--darkYellow);
	outline-offset: 2px;
}

@media (max-width: 750px) {

	.consentBanner {
		bottom: 1rem;
		width: calc(100% - 2rem);
		padding: 1.5rem;
	}

	.consentButtons button {
		flex: 1 1 auto;
	}

}

/* @end cookie banner */

/* @group Landmark Modals */
/* A true overlay on top of the real homepage (index.php / sri-lanka-vacations.php), not a separate
   page: every landmark's modal is always in the markup (hidden), so opening one from the Landmarks
   section (#landmarks) is instant, and each landmark also has its own crawlable URL (e.g.
   sigiriya-rondreis.php) that server-renders with that one modal already open, for anyone arriving
   from a search result. Kept outside .siteWrap in the HTML (see the comment there) so this
   fixed-position overlay stays fixed to the viewport, not to ScrollSmoother's transformed wrapper. */

.landmarkModalOverlay {
	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1000;
	overflow-y: auto;
	padding: 3rem 1.5rem;
	background-color: rgba(20, 15, 15, 0.8);
}

.landmarkModalOverlay.isOpen {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.landmarkModal {
	position: relative;
	width: 100%;
	max-width: 50rem;
	margin: auto;
	background-color: white;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

.landmarkModal[hidden] {
	display: none;
}

.modalClose {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.55);
	color: white;
	border: 1px solid white;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color .2s ease, box-shadow .2s ease;
}

/* The site-wide a:hover rule (turns link text black) would otherwise win here too, since it
   still applies to any property this rule doesn't itself set on :hover - color included. */
.modalClose:hover,
.modalClose:focus-visible {
	background-color: var(--darkRed);
	color: white;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.modalImage {
	position: relative;
	height: 18rem;
}

.modalImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.modalImage .modalCaption {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
	padding: 3rem 2rem 1.2rem;
}

.modalImage .tagline {
	color: white;
	font-family: var(--quickSand);
	font-size: 1.2rem;
	margin: .5rem 0 0;
}

.modalBody {
	padding: 2rem;
}

.landmarkModal .modalBody h3 {
	font-size: 2rem!important;
	margin-top: 2rem!important;
}

.modalCta {
	background-color: var(--lightYellow);
	border: 3px solid var(--darkRed);
	border-radius: 16px;
	margin: 2rem 0 0;
	padding: 1.5rem;
	text-align: center;
}

.modalCta .promo {
	color: maroon;
	font-weight: bold;
	font: 2rem var(--tilt);
	margin-top: 0;
}

.modalCta a {
	color: var(--darkRed);
	font-weight: bold;
}

.modalShare {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--darkRed);
}

.modalShare-title {
	font-weight: bold;
	margin: 0 0 .6rem;
}

.modalShare-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
}

.modalShare-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: white;
	border: 2px solid var(--darkRed);
	color: var(--darkRed);
	font-size: 1.15rem;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* The site-wide a:hover rule (turns link text black) would otherwise win here too, since it
   still applies to any property this rule doesn't itself set on :hover - color included. */
.modalShare-links a:hover,
.modalShare-links a:focus-visible {
	background: var(--darkRed);
	color: white;
	transform: translateY(-2px);
}

.landmarkStandaloneLink {
	margin: 1rem 0 0;
	font-size: .95rem;
}

.landmarkStandaloneLink a {
	color: var(--darkGray);
	text-decoration: none;
}

/* Locks background scrolling while a modal is open (toggled by js/landmarkModal.js, and rendered
   straight away by PHP when a landmark URL opens with its modal already up). */
body.modalOpen {
	overflow: hidden;
}

@media (max-width: 750px) {

	.landmarkModalOverlay {
		/* Always at least a small gap to the edge of the screen, rather than the modal card
		   running flush against the phone's own edge. */
		padding: .6rem;
	}

	.landmarkModal {
		border-radius: 12px;
	}

	.modalImage {
		height: 14rem;
	}

	.landmarkModal .modalImage h2 {
		font-size: 2.2rem!important;
		line-height: 2.4rem!important;
	}

	.modalBody {
		padding: 1.5rem;
	}

}

/* @end landmark modals */

/* Direct destinations use the homepage navigation and complete contact/footer section. */
.landmarkPage { margin: 0; background: white; }
.destinationNavigation { position: sticky; top: 0; z-index: 900; }
.destinationNavigation .topNavTrigger { height: auto; overflow: visible; border-top: 0; }
.destinationNavigation .topNav { width: 100%; }
.destinationMobileLogo { display: none; }
.destinationToolbar {
    max-width: 1100px; margin: 0 auto; padding: 3rem 2rem 1rem;
}
.destinationToolbar h1 {
    text-align: center;
    text-transform: none;
    font: 700 2.2rem/1.3 var(--quickSand) !important;
    color: var(--darkRed);
    margin: 0 0 1rem;
    letter-spacing: 0;
}
.destinationToolbar p {
    font-size: max(1.125rem, 16px);
    line-height: 1.75;
    color: var(--darkGray);
    margin: 0;
}
/* Same drop-cap treatment as the homepage's own opening paragraph (.introContent), so a page that
   otherwise reuses the site's typography for everything else gets this signature flourish too. */
/* Sized to sit two lines deep in this smaller paragraph (unlike the homepage's own, much larger
   opening text), and just the letter itself - no background box. */
.destinationToolbar p::first-letter {
    font: 700 3.4rem/1 var(--tilt);
    float: left;
    color: var(--darkRed);
    margin-right: .75rem;
    margin-top: 0.3rem;
}
.destinationBackLink {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    padding: .6rem 1.2rem;
    background-color: rgba(0, 0, 0, 0.55);
    color: white;
    border: 1px solid white;
    border-radius: 2rem;
    font-family: var(--quickSand);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, box-shadow .2s ease;
}
/* The site-wide a:hover rule (turns link text black) would otherwise win here too, since it
   still applies to any property this rule doesn't itself set on :hover - color included. */
.destinationBackLink:hover,
.destinationBackLink:focus-visible {
    background-color: var(--darkRed);
    color: white;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.landmarkArticle {
    width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none;
}
.landmarkArticle .modalImage { height: 32rem; }
.landmarkArticle .modalImage .modalCaption { padding-left: max(2rem, calc((100% - 1040px) / 2)); }
.landmarkArticle .landmarkCopy { max-width: 1100px; margin: 0 auto; padding: 2rem; }
.landmarkArticle .landmarkCopy h3 { font-family: var(--noto) !important; text-transform: uppercase; }
.destinationSiteFooter { padding-top: 14rem; }
.destinationSiteFooter .thanks { isolation: isolate; }
.destinationSiteFooter a { overflow-wrap: anywhere; }
.destinationSiteFooter footer { gap: 1rem; }
.destinationMobileNav { z-index: 950; }
.destinationMobileNav .burgerMenu { background: none; padding: 0; border: 0; }
.destinationMobileNav.showMobile .mobileNavWrap { display: flex; }
.destinationMobileNav .mobileNavWrap { max-height: calc(100dvh - 6rem); overflow-y: auto; }
.landmarkModal .modalImage h2 {
    font: 700 3rem/1.1 var(--quickSand) !important;
    color: white;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
.landmarkCopy {
    color: var(--darkGray);
    line-height: 1.75;
}
.landmarkCopy p {
    font-size: max(1.125rem, 16px);
    line-height: 1.75;
    font-weight: 400;
    margin: 0 0 1.25rem;
}
.landmarkArticle .landmarkCopy p { font-size: max(1.35rem, 16px); }
.landmarkCopy h3 {
    font: 700 1.6rem/1.3 var(--quickSand) !important;
    letter-spacing: 0;
    text-transform: none;
    margin: 2rem 0 .75rem;
    color: var(--darkRed);
}
.landmarkCopy .landmarkLead {
    font-size: 1.2rem;
}
.landmarkCopy .modalCta .promo {
    font: 2rem/1.3 var(--tilt);
}
.landmarkCopy .modalCta p:last-child {
    margin-bottom: 0;
}
.landmarkCopy .modalCta a {
    overflow-wrap: anywhere;
}
.landmarkRelated ul {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
}
.landmarkRelated a {
    display: inline-block;
    padding: .5rem 1rem;
    border: 1px solid var(--darkRed);
    border-radius: 2rem;
    font-weight: 600;
}
.landmarkRelated a:hover {
    background: var(--lightYellow);
}
.landmarkSources {
    border-top: 1px solid #ded8d1;
    padding-top: 1rem;
    font-size: .95rem;
}
.landmarkSources summary {
    cursor: pointer;
}
.landmarkSkip {
    position: absolute;
    top: 0;
    left: 1rem;
    z-index: 1001;
    padding: .75rem 1rem;
    background: white;
    transform: translateY(-110%);
}
.landmarkSkip:focus {
    transform: translateY(0);
}
.landmarkPage a:focus-visible,
.landmarkCopy a:focus-visible,
.landmarkSources summary:focus-visible {
    outline: 3px solid var(--darkYellow);
    outline-offset: 4px;
}
#plan-contact {
    scroll-margin-top: 1rem;
}
@media (max-width: 750px) {
    .destinationNavigation { position: relative; }
    .destinationNavigation .topNavTrigger { display: none; }
    .destinationMobileLogo {
        display: block; height: 12rem; background: url(../img/graphics/border.webp) center top repeat-x, url(../img/graphics/redPattern.webp);
        border-bottom: 3px solid var(--darkGreen); padding: 1rem 2rem;
    }
    .destinationMobileLogo img { width: 16rem; height: auto; display: block; }
    .destinationToolbar { padding: 1rem 1.5rem; }
    .destinationToolbar h1 { font-size: 1.6rem !important; }
    .destinationBackLink { font-size: .85rem; padding: .5rem .9rem; }
    /* Shares the .landmarkModal class (and its visual language) with the real pop-up, so it gets
       the same small always-there gap and rounded corners on mobile instead of running flush to
       the edge of the screen - the desktop version already reads as a page, not a modal, so this
       is mobile-only. */
    .landmarkArticle {
        width: calc(100% - 1.2rem);
        margin: .6rem;
        border-radius: 12px;
        overflow: hidden;
    }
    .landmarkArticle .modalImage { height: 24rem; }
    .modalImage .modalCaption { padding-left: 1.5rem; padding-right: 1.5rem; }
    .landmarkArticle .landmarkCopy { padding: 1.5rem; }
    .landmarkCopy h3 { font-size: 1.4rem !important; }
    .destinationSiteFooter .privacy { margin-right: 0; }
}