.desktop.banner {
	padding-top: 60%;
}

.desktop.banner .center-center {
	width: 70%;
	height: auto;
	margin-top: 50%;
	z-index: 1;
}

.desktop.banner .bottom-left {
	height: 42%;
	z-index: 2;
}

.desktop.banner .bottom-center {
	z-index: 3;
}
.desktop.banner .bottom-right {
	height: 48%;
}

.things-to-do-block.padded {
	padding-top: 0;
}
.things-to-do {
	margin-left: -10px;
}
.things-to-do-cards .card-bottom-bar {
	height: 0.5em;
}

.quote {
	background-image: url(/images/destination-discovery/advice-from-locals-bg.jpg);
}
.quote-outer {
	background-color: unset;
}
.quote-background {
	background-color: #131313cc;
	pointer-events: none;
	padding: 8px;
	border-radius: 3px;
}
.flourish.advice-secrete {
}

.flourish.advice-secrete {
	transform: rotate(-21deg);
	pointer-events: all;
	cursor: pointer;
	z-index: -1;
	position: absolute;
}

@media (max-width: 768px) {
	.flourish.advice-secrete {
		width: 22%;
		top: 3%;
		right: 7%;
	}
}
@media (min-width: 769px) {
	.flourish.advice-secrete {
		width: 10%;
		top: 3%;
		right: 3%;
	}
}

.flourish.advice-secrete:hover,
.flourish.advice-secrete:focus {
	animation: advice-wiggle 0.5s ease;
}

@keyframes advice-wiggle {
	0%,
	100% {
		transform: rotate(-21deg);
	}
	25% {
		transform: rotate(-31deg);
	}
	50% {
		transform: rotate(-11deg);
	}
	75% {
		transform: rotate(-31deg);
	}
}

@media (max-width: 768px) {
	.things-to-do-title-block.padded {
		padding: 0 10% 0 10%;
	}
}
@media (min-width: 769px) {
	.things-to-do-title-block.padded {
		padding: 0 10% 0 10%;
	}
}

/* things to do scroller with 4 items ------------------------------ */

.things-to-do-block.padded {
	padding: 0 0 5% 10%;
}

.things-to-do .scroll-container {
	width: 100%;
	padding: 0 10% 5% 1%;
}

.things-to-do .attraction-cards:not(.swiper-wrapper) {
	gap: 20px !important;
}

@media (max-width: 768px) {
	.things-to-do-cards.scroll-content {
		width: 400%; /* this will vary by item count */
	}
}
@media (min-width: 769px) {
	.things-to-do-cards.scroll-content {
		width: 140%; /* this will vary by item count */
	}
}
.things-to-do .attraction-card .card-bottom-bar {
	line-height: 7px;
}

/* solution 9 form ------------------------------ */

button#openFormButton {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: transparent;
	color: #00000000;
	user-select: none;
	cursor: pointer;
}

#passwordForm {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	align-items: center;
	justify-content: center;
	line-height: initial;
	color: var(--white);
	display: none;
}
#passwordForm:not(.hidden) {
	display: flex;
}
#innerForm {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 70%;
	height: 43%;
	top: 0;
	left: 0;
	background-color: #322c41ee;
	border-radius: 4px;
	margin-top: -10%;
	padding: 0 2em;
}

@media (max-width: 768px) {
	#innerForm {
		width: 90%;
		height: 63%;
		padding: 1em 1.5em;
	}
}
@media (min-width: 769px) {
	#innerForm {
		width: 85%;
		height: 63%;
	}
}

#formTitle {
	margin-bottom: 0.5em;
	white-space: nowrap;
}
@media (max-width: 768px) {
	#formTitle {
		font-size: 1.1em;
	}
}
@media (min-width: 769px) {
	#formTitle {
		font-size: 1.25em;
	}
}

#submitFormButton {
	padding: 0.5em 4em;
	border-radius: 3px;
	cursor: pointer;
	background-color: #7e4ce8;
	color: var(--white);
	font-size: 0.8em;
	text-transform: uppercase;
}
#closeFormButton {
	position: absolute;
	top: 5%;
	right: 5%;
	border: none;
	border-radius: 3px;
	background-color: white;
	user-select: none;
	cursor: pointer;
	color: #ffffff;
	background-color: #000000;
	border-radius: 4px;
	width: 25px;
	height: 25px;
	z-index: 2;
}
#closeFormButton:hover {
	background-color: var(--blue);
	color: black;
}
#closeFormButton:after {
	content: "\02715";
	color: var(--white);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-48%, -54%);
	font-weight: 700;
	font-family: monospace;
	font-size: 20px;
}

#passwordInput {
	padding: 0.5em;
	text-align: center;
	font-size: 1em;
	border-radius: 4px;
	width: 100%;
	-webkit-text-security: disc;
	text-security: disc;
}

.error-container {
	height: 2em;
	margin-top: 0.25em;
}
#errorMsg {
	color: var(--white);
	font-size: 0.7em;
}

.flourish.dirigible-flowers {
	position: absolute;
	bottom: -2px;
	width: 48%;
	left: 2%;
}
.flourish.dirigible-secrete {
	transform: rotate(-21deg);
	pointer-events: all;
	cursor: pointer;
	z-index: -1;
	position: absolute;
}

@media (max-width: 768px) {
	.flourish.dirigible-secrete {
		width: 10%;
		bottom: 17%;
		left: 23%;
		z-index: 2;
	}
}
@media (min-width: 769px) {
	.flourish.dirigible-secrete {
		width: 10%;
		bottom: 17%;
		left: 23%;
		z-index: 2;
	}
}

.flourish.dirigible-secrete:hover,
.flourish.dirigible-secrete:focus {
	animation: dirigible-wiggle 0.5s ease;
}

@keyframes dirigible-wiggle {
	0%,
	100% {
		transform: rotate(-21deg);
	}
	25% {
		transform: rotate(-31deg);
	}
	50% {
		transform: rotate(-11deg);
	}
	75% {
		transform: rotate(-31deg);
	}
}

main {
	background-color: white;
}

body.solution9 {
	background-color: #14161d;
}

body.solution9 footer {
	background-color: unset;
}

body.solution9 #page {
	background-color: #14161d;
	transform: rotate(0.25deg);
	animation: body-wiggle 0.25s ease;
}
@keyframes body-wiggle {
	0%,
	100% {
		transform: rotate(-0.25deg);
	}
	25% {
		transform: rotate(0.25deg);
	}
	50% {
		transform: rotate(-0.25deg);
	}
	75% {
		transform: rotate(0.25deg);
	}
}

#solution9er {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 2;
	transition: opacity 0.3s ease;
	opacity: 0;
	pointer-events: none;
}

body.solution9er #solution9er {
	opacity: 1;
}

#solution9est {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	opacity: 0;
	pointer-events: none;

	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	top: 50%;
	left: 50%;
	height: auto;
	width: auto;
	object-fit: cover;
	transform: translate(-50%, -50%);
}

body.solution9est #solution9est {
	animation: pattern-fade 8s ease;
}
@keyframes pattern-fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
}

#solution9overlay {
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	opacity: 0;
}
body.solution9 #solution9overlay {
	position: fixed;
	z-index: 9999;
	opacity: 0;
	mix-blend-mode: multiply;
	object-fit: cover;
	animation: video-fade 2s ease;

	min-height: 100vh;
	min-width: 100vw;
	/* width: 100vw;
	height: 100vh; */

	top: 50%;
	left: 50%;
	height: auto;
	width: auto;
	object-fit: cover;
	transform: translate(-50%, -50%);
}
@keyframes video-fade {
	0%,
	100% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
}

#denied.active {
	animation: form-denied 0.25s ease;
}
@keyframes form-denied {
	0%,
	100% {
		transform: rotate(-0.25deg);
	}
	25% {
		transform: rotate(0.25deg);
	}
	50% {
		transform: rotate(-0.25deg);
	}
	75% {
		transform: rotate(0.25deg);
	}
}