html {
	font-size: 16px;
}
body {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	color: #fff;
	position: relative;
    font-family: "Yantramanav", sans-serif;
  font-weight: 300;
  font-style: normal;
	background: #111 url(../img/body_bg.png) repeat 0 0;
	background-size: 150px;
   
}

:root {
	--ff-script: "Herr Von Muellerhoff", arial, sans-serif;
	--ff-sans:  "Yantramanav", "Open Sans", system-ui, sans-serif;
	--ff-posterama: "posterama-2001", sans-serif;

	--color-mauve: #91606e;

	--width-container-max: 1200px;
	--width-content-max: 800px;

	--height-header: 6rem;
	--height-header-mobile: 5rem;

	--ease-power-out: cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

a {
    color: var(--color-mauve);
}

a:link {
	text-decoration: none;
        color: var(--color-mauve);

}

a:visited {
	text-decoration: none;
        color: var(--color-mauve);

	
}
a:hover {
	text-decoration: none;
        color: var(--color-mauve);

}

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,svg {
	max-width: 100%;
	height: auto;
}


.header {
	width: 100%;
	position: sticky;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,.65);
	backdrop-filter: blur(30px);
	height: var(--height-header);
    text-align: center;
    z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
}


.branding {
	width: 9.75rem;
    position: absolute;
    left: 50%;
   transform: translateX(-50%);
}



.branding svg {
	fill: var(--color-mauve);
	transition: fill .65s ease;
}

.branding a:hover svg {
fill: #fff;
}

.branding * {
	margin: 0;
	padding: 0;
	display: block;
}


.navigation {
	display: flex;
	width: 100%;
	height: var(--height-header);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500;
	align-items: center;
}

.navigation nav {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.navigation ul {
    text-align: center;
	display: flex;
	justify-content: center;
	width: calc(50% - 5.5rem);
	gap: 2rem;
}

.navigation li {
	text-align: center;
	font-family: var(--ff-posterama);
	text-transform: uppercase;
    letter-spacing: 3px;
font-size: .75rem;
	font-weight: 300;
}

.navigation li a {
	color: #ddd;
}

.social-navigation {
	right: 2rem;
	top: 0;
	bottom: 0;
	position: fixed;
	height: 100vh;
	display: flex;
	align-items: center;
	z-index: 100;
}

.social-navigation ul {
	margin: 0;
	padding: 2rem 1rem;
	background-color: rgba(0,0,0,.5);
	backdrop-filter: blur(10px);
	border-radius: 9999px;
	

}

.social-navigation li {
	width: 1rem;
	margin: 0 0 1rem 0;
	list-style: none;
	padding: 0;
}

.social-navigation li:last-child {
	margin-bottom: 0;
}

.social-navigation li a {
	display: block;
}

.social-navigation li a svg {
	display: block;
	fill: var(--color-mauve);
	transition: fill .5s ease;
}

.social-navigation li a:hover svg {
	fill: #fff;
}


/* MOBILE MENU BUTTON */

.menu-button {
	display: none;

}


.featured-image img {
	filter: blur(30px);
	transform: scale(1.4);
	transform-origin: 50% 50%;
	transition: filter 1s ease, transform 2s ease;
}

.is-loaded .featured-image img {
	filter: blur(0px);
	transform: scale(1);
}




.page-container::before {
	content: "";
	border: 1px solid var(--color-mauve);
	inset: 1rem;
	position: absolute;
	pointer-events: none;
}

.page-title {
    text-align: center;
font-size: clamp(5rem, -3.8889rem + 18.5185vw, 10rem);
    font-family: "Herr Von Muellerhoff", arial, sans-serif;
   	color: var(--color-mauve);
    font-weight: normal;
    width: 100%;
	text-shadow: 2px 5px 5px rgba(0, 0, 0, .15);
line-height: 1cap;
margin: 4rem 0;
}



h3 {
	color: #111;
	text-transform: uppercase;
}

.page-container h2 {
	font-weight: 300;
	font-size: 2rem;
	color: var(--color-mauve);
	margin: 2rem 0 1rem;
	line-height: 1.1;
	font-family: var(--ff-posterama);
	text-transform: uppercase;
}

.page-container p {
	margin-bottom: 1.5rem;
}

.text--large {
	font-size: 2.5rem;
	color: var(--color-mauve);
	line-height: 1.1;
	font-family: var(--ff-posterama);
	text-transform: uppercase;
	margin-bottom: 2rem;
}

.page-container img:not(.signature img) {
	padding: .5rem;
	border: 1px solid var(--color-mauve);
	background-color: transparent;
}
	
.page-container {
    max-width: var(--width-container-max);
	background: transparent url(../img/body_bg_393939.png) repeat 0 0;
	background-size: 150px;
    margin: 0 auto !important;
    position: relative;
    padding: 3rem 6rem 5rem;
	margin-bottom: 0;
    z-index: 200;
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
	transform: translateY(-8rem);
	
}

.page-container p {
margin-bottom: 1rem;
}

.container--text {
	width: 90%;
	max-width: var(--width-content-max);
	margin: 0 auto;
}

.img-row {
	margin-block: 4rem;
}


p.intro, h4 {
	text-transform: uppercase;
	font-weight: normal;
	font-size: 28px;
	color: var(--color-mauve);
	line-height: 1.8rem;
}

h5 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 22px;
	color: #fff;
}

.section-content ul {
	margin: 0 0 30px 15px;
}

.section-content ul li {
	list-style: square;
	padding-left: 15px;
	line-height: 1.5rem;
	margin-bottom: 15px;
}


.wp-block-table table {
	width: 100%;
	margin-bottom: 2rem;
	line-height: 1.3;
}

.wp-block-table table thead {
	border: 0;
}

.wp-block-table table thead td,
.wp-block-table table thead th {
	color: var(--color-mauve);
	font-size: .85rem;
	padding: 1rem .5rem;
	border: 0;
	border-bottom: 1px solid var(--color-mauve);
	font-weight: normal;
		font-family: var(--ff-posterama);
	text-transform: uppercase;
}


.wp-block-table table tbody td, 
.wp-block-table table td, 
.wp-block-table table th {
	padding: 1rem .5rem;
	border: 0;
	border-bottom: 1px solid #444;
}

.wp-block-table table tbody th {
	font-weight: normal;
}

.wp-block-table table tfoot td {
	padding: 15px 0;
	border-bottom: 0;
	text-align: center;
}

/* GALLERY */

.wp-block-gallery {
	columns: 3;
	column-width: 300px;
	display: block;
	column-gap: 1rem !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: 100% !important;
	margin-bottom: 1rem !important;
}

.fancybox__backdrop {
	background-color: rgba(0,0,0,.65);
	backdrop-filter: blur(30px);
}
/* FAQ */

.faqs {
	max-width: 900px;
	margin: 0 auto;
}

.faq {
    margin: 5rem 0;
	gap: 0;
}

.faq__question {
	border: 1px solid #777;
	padding: 2rem;
	color: #fff;
	text-transform: none;
	margin: 0;
	font-size: 2rem;
	line-height: 1.2;
	font-weight: 300;
}

.faq__answer:before,
.faq__question:before {
	content: "Question";
	font-family: "Rajdhani", arial, sans-serif;
	color: #777;
	text-transform: uppercase;
	font-size: .85rem;
	display: block;
	margin-bottom:  1rem;
	letter-spacing: 3px;
	line-height: 1rem;
}

.faq__answer:before {
	content: "Answer";
	color: var(--color-mauve);
}

.faq__answer {
	padding: 3rem 2rem;
	margin-top: -.65rem;
    border: 1px solid var(--color-mauve);
}

.faq__answer p:last-child {
	margin-bottom: 0;
}




.no-wrap {
	white-space: nowrap;
}


/* FOOTER */

.footer {
	padding: 4rem 0 10rem;
	font-size: .85em;
    text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #666;
	font-weight: 300;
	line-height: 1.1rem;
	
}

.footer .logo {
	display: block;
	width: 180px;
	margin: 0 auto 20px;
}

.footer .logo img {
	padding: 1.2rem 1.4rem;
	border: 1px solid #1d191a;
}

.footer .site-credit {
	display: block;
}


/* CONSIDERATION */

.rates-table {
	margin-bottom: 50px;
}

.rates-table table {
	margin-bottom: 20px;
}

.rates-table p.notation {
	text-align: center;
}

.travel-cancellation .travel {
	padding-right: 30px;
}

.travel-cancellation #cancellation {
	padding-left: 30px;
	border-left: 1px solid var(--color-mauve);
	
}

/* RESERVATION */

.section-content p.signature {
	font-family: "Great Vibes", cursive, sans-serif;
	font-size: 50px;
	color: var(--color-mauve);
	margin-bottom: 50px;

}

/* HOME */

.home .featured-image {
	width: 100%;
	height: 100vh;
	z-index: 0;
	position: fixed;
	inset: 0;
}

.home .featured-image img {
	width: 100%;
	height: 100%;
	display: flex;
	object-fit: cover;
	object-position: center center;
}

.home .content {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.home .page-container {
	padding-inline: 5rem;
	--width-content-max: 600px;
	transform: none;
	padding-top: 4rem;
	padding-bottom: 4rem;
	max-width: var(--width-content-max);
		background: #111 url(../img/body_bg.png) repeat 0 0;
	background-size: 150px;
}

.home .home-branding {
	width: 18rem;
	margin: 0 auto 1rem;
}

.home .home-branding svg {
	fill: #fff;
}

.home .wp-block-buttons {
	margin-top: 2rem;
}

.home .button--continue {
	margin: 0 auto;
	display: flex !important;
	justify-content: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .85em;

}

.home .button--continue .wp-block-button__link {
	background-color: var(--color-mauve);
	color: #fff;
	padding: .85rem 4rem;
	display: inline-block;
	border-radius: 0;
	width: auto;
	transition: box-shadow .65s ease;
	box-shadow: inset 0px 0px 0px 10rem rgba(255,255,255,0);
}

.home .button--continue .wp-block-button__link:hover {
	box-shadow: inset 0px 0px 0px 10rem rgba(255,255,255,.1);
}



/* LOADER */




.loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height:  100vh;
    z-index: 9999;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.loader__wrapper {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
	margin: -4rem 0 0 -4rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-mauve);
    animation: spin 2s linear infinite; 
    z-index: 1005;
}

.loader__logo {
    width: 50%;
    margin: 0 auto;

}

    .loader__wrapper::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: var(--color-mauve);
        animation: spin 3s linear infinite; 
    }

    .loader__wrapper::after {
        content: "";
        position: absolute;
        inset: 1rem;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: var(--color-mauve);
          animation: spin 1.5s linear infinite; 
    }


    @keyframes spin {
        0%   { 
            transform: rotate(0deg); 
        }
        100% {
            transform: rotate(360deg); 
        }
    }

    .loader .loader__panel {
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        background: #090909;
        transform: translateX(0);  
    }

    .loader .loader__panel--left {
        left: 0;
		 z-index: 1000;
    }

    .loader .loader__panel--right {
        right: 0;
		 z-index: 1001;
    }

     .is-loaded  .loader .loader__panel--left {
                transform: translateX(-100%);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .is-loaded  .loader .loader__panel--right {
                transform: translateX(100%); 
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    

     .is-loaded .loader__wrapper {
		opacity: 0;
    	transition: opacity 0.3s ease-out;
    }
    
    /* JavaScript Turned Off */
    .no-js .loader__wrapper {
        display: none;
    }




    /* MOBILE STYLES */

    /* Smartphones (portrait) ----------- */
@media only screen and (max-width: 767px) {

	body {
		overflow-x: hidden;
	}

	.loader__wrapper {
	margin: -3rem 0 0 -3rem;
    width: 6rem;
    height: 6rem;

}

	.header {
		height: var(--height-header-mobile);
	}

	.featured-image img {
		display: block;
	}
    
    .branding {
		width: 8rem;
	}

	.branding svg {
		fill: #fff;
	}

	.page-title {
		margin: 2rem 0;
	}

	.page-container {
		transform: translate(0);
		padding: 2rem 1rem;
		background: #111 url(../img/body_bg.png) repeat 0 0;
	background-size: 150px;
	}

	.menu-button {
		width: calc(var(--height-header-mobile) + 1rem);
		height: var(--height-header-mobile);
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		z-index: 1010;
	
	}

		.menu-button .bars {
					width: 1.5rem;
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
	flex-direction: column;
	height: 1.25rem;
		}

	.menu-button .bar {
		display: block;
		width: 100%;
		height: 2px;
		background-color: var(--color-mauve);
		transition: transform .33s var(--ease-power-out), opacity .1s var(--ease-power-out);
		transform-origin: 50% 50%;
		margin-bottom: .35rem;
	}

	.mobile-navigation-active .menu-button .bar {
		position: absolute;
		margin-bottom: 0;
	}

	.mobile-navigation-active .menu-button .bar--1 {
		transform: rotate(45deg);
	}

	.mobile-navigation-active .menu-button .bar--2 {
		transform: rotate(-45deg);
	}

	.menu-button .bar--3 {
		margin-bottom: 0;
		width: 50%;
	}

	.mobile-navigation-active .menu-button .bar--3 {
		opacity: 0;
		position: absolute;
	}

	.container--text {
		width: 100%;
	}

	.page-container::before {
		display: none;
	}

	.navigation {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.65);
		backdrop-filter: blur(20px);
		inset: 0;
		position: fixed;
		flex-direction: column;
		transition: clip-path .65s var(--ease-power-out);
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

	}

	.navigation nav {
		flex-direction: column;
		width: 100%;
		transition: transform .85s ease-out;
		transition-delay: .1s;
		transform: translateY(25%);
	}

		
	.mobile-navigation-active .navigation nav {
		transform: translateY(0%);
	}

		.navigation ul:first-child {
			margin-bottom: 1rem;
		}

	.navigation ul {
		flex-direction: column;
		width: 100%;
		gap: 1rem;
	}
	.navigation ul li {
		font-size: 1.4rem;
	}
	.mobile-navigation-active .navigation {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);



	}

	.footer {
		padding-block: 4rem;
	}
}