/* @override http://localhost:8888/WebDev/Online/srilanka-2024/css/style.001.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);
}

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%;
	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 100%);
	padding: 10rem 5rem 2rem;
}

.landmark p {
	color: black;
	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;
}

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

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