/*
Theme Name: Leylaty Group – Theme 2022
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 5.9
Tested up to: 6.1
Requires PHP: 5.6
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, accessibility-ready

Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two is distributed under the terms of the GNU GPL.
*/


@font-face {
    font-family: Canela-Thin;
    src: url(/wp-content/themes/Leylaty/fonts/Canela-Thin.woff); 
} 

@font-face {
    font-family: Canela-Regular;
    src: url(/wp-content/themes/Leylaty/fonts/Canela-Regular.otf); 
} 

@font-face {
    font-family: Moderat-Light;
    src: url(/wp-content/themes/Leylaty/fonts/Moderat-Light.ttf); 
} 

@font-face {
    font-family: GravitaGEO-Light;
    src: url(/wp-content/themes/Leylaty/fonts/GravitaGEO-Light.otf); 
} 




.viewport-header {
	position: relative;
	height: 100vh;
	padding: 0 0;
	width: 100%;
	float: left;
	overflow: hidden;
}	

.viewport-header video {
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	float: left;
	object-fit: cover;
}	

video::-webkit-media-controls {
  display:none !important;
}	


  


html {
}

body {
	background-color: #FFFDF0;
    font-family: GravitaGEO-Light;
    font-weight: normal;
	font-style: normal;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: 18px;
	line-height: 130%;
	color: #152740;
}

p {
	margin: 0;
    font-family: GravitaGEO-Light;
    font-weight: normal;
	font-style: normal;
	font-size: 18px;
	line-height: 130%;
	color: #152740;
}

p.gold {
	font-size: 80%;
	color: #C49B49;	
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

#item-type-text p.underline {
	display: block !important;          /* new line */
	width: fit-content !important;      /* text width */	
	font-size: 80%;
	color: #C49B49;
	line-height: 100%;
	margin-top: 20px;
	position: relative;
}

#item-type-text p.underline::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: #C49B49;
	transition: width 0.3s ease;
}

#item-type:hover p.underline::after {
	width: 0;
}

a {
	text-decoration: none;	
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	color: #152740;
    font-family: Canela-Thin;
    font-weight: normal;
	font-style: normal;
	padding: 0;
	margin: 0;
} 

h1 {
	font-size: 52px;
	line-height: 110%;
}

h2 {
	font-size: 40px;
	line-height: 120%;
	font-style: normal;
    font-weight: normal;
}

h3 {
	font-size: 32px;
	line-height: 120%;
}

h4 {
	font-size: 20px;
	line-height: 120%;
}

h5 {
	font-size: 25px;
	line-height: 140%;
}

h5 a {
	position: relative;
}

h5 a:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: #C49B49;
	transition: width 0.3s ease;
}

h5 a:hover:after {
	width: 0;
}

#wrapper {
	width: 100%;
	height: auto;
	float: left;
}

#header {
	width: 100%;
	height: 100px;
	position: fixed; /* must be fixed to slide */
	top: 0;
	left: 0;
	z-index: 444;
	text-align: center;
	transform: translateY(0);
	transition:
		transform 0.35s ease,
		background-color 0.25s ease;	
	background: transparent;
}

/* fully hidden off screen */
#header.is-hidden {
	transform: translateY(-100%);
}

/* Header visible AFTER scroll-up */
#header.is-scrolled {
	background-color: #152740;
}

/* Menu open = header always transparent */
.menu-open #header {
	background-color: transparent !important;
	box-shadow: none !important;
}

#logo {
	width: auto;
	height: 100px;
	line-height: 100px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transition-property: all;
	transition-duration: .55s;
	transition-timing-function: ease-in-out;
}

#logo img {
	height: 40px;
	width: auto;
	margin-top: 35px;	
	display: inline-block;
}

#header-button {
	position: relative;
	line-height: 100%;
	top: 32px;
	width: auto;
	padding: 14px 15px 10px;
	color: #152740;
	font-size: 90%;
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
	background-color: #FFFDF0;
	border-radius: 8px;
	float: right;
	margin-right: 5%;
	text-transform: uppercase;
	font-size: 80%;
}

#header-button.left {
	margin-right: 20px;
}

#header-button:hover {
	background-color: #C49B49;
	color: #FFFDF0;
}

#button {
	line-height: 100%;
	width: auto;
	padding: 14px 15px 12px;
	color: #FFFDF0;
	font-size: 90%;
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
	background-color: #C49B49;
	border-radius: 8px;
	text-transform: uppercase;
	font-size: 84%;
	display: inline-block;
}

#button:hover {
	background-color: #152740;
	color: #FFFDF0;
}

#button.blue {
	background-color: #445263;
	color: #FFFDF0;
}

#button.two {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 10px;
}

#button.two:hover {
	color: #FFFDF0;
	background-color: #825F18;
}

#button.blue.two:hover {
	background-color: #152740;
	color: #FFFDF0;
}

.enquire {
	background-color: #152740;
	color: #FFFDF0;
	position: fixed;
	bottom: 2.5vh;
	z-index: 333;
	height: auto; 
	width: auto;
	display: block;
	left: 50%;
	transform: translateX(-50%);
	padding: 12px 12px 12px 24px;
	border-radius: 16px;
	border: solid 1px #445263;
    transition: opacity 0.3s ease, pointer-events 0.3s ease;
}

.enquire.hidden {
    opacity: 0;
    pointer-events: none;
}
  
.enquire h4 {
	display: inline-block;
	vertical-align: middle;
	color: #FFFDF0;
	font-size: 22px;
	margin-right: 16px;
}

.enquire #button {
	display: inline-block;
	vertical-align: middle;
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
	cursor: pointer;
}

.enquire #button.call {
	margin-left: 12px;
	background-color: #445263;
	color: #FFFDF0;
}

.enquire #button:hover {
	background-color: #825F18;
}

#hero-wrapper {
	width: 100%;
	height: 100vh;
	float: left;
}

#hero-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	float: left;
}

#hero-wrapper-overlay {
	width: 100%;
	background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.6));	
	height: 100%;
	position: absolute;
	top: 0;
}
	
#content {
	width: 100%;
	height: auto;
	float: left;
}

#line {
	width: 100px;
	height: 1px;
	display: inline-block;
	background-color: #C49B49;
	margin: 40px 0;
}

#max {
	max-width: 1600px;
	margin: 0 auto;
}
		
#panel {
	width: 90%;
	height: auto;
	float: left;
	padding: 15vh 5%;
}

#panel.center.sixty h5 {
	padding-top: 20px;
}

#panel.image {
	width: 100%;
	height: 70vh;
	float: left;
	padding: 0;
	background-color: grey;
	position: relative;
}

#panel.image.sign {
	height: 70vh;
}

#panel.image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	float: left;	
}

#panel-image-overlay {
	width: 100%;
	background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.8));	
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 222;
}

#panel-image-overlay span {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;	
}

#panel-image-overlay h1 {
	color: #FFFDF0;
	width: 50%;
	padding: 0 25%;
	height: auto;
}

#panel-image-overlay h2 {
	color: #FFFDF0;
	width: 50%;
	padding: 0 25%;
	height: auto;
}

#panel-image-overlay p.top {
	color: #FFFDF0;
	font-size: 20px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
    font-family: GravitaGEO-Light;
	margin-bottom: 20px;
}

#panel.center {
	text-align: center;
}

#panel.zero {
	padding: 0 5%;
	position: relative;
	z-index: 222;
}

#panel.scroller {
	padding: 10vh 0;
	position: relative;
	z-index: 222;
	width: 100%;
}

#panel.blue {
	background-color: #152740;
	color: #FFFDF0;
}

#panel.blue h2 {
	color: #FFFDF0;
}

#panel.blue h3 {
	color: #FFFDF0;
}

#panel.blue h4 {
	color: #FFFDF0;
}

#panel.blue p {
	color: #FFFDF0;
}

#panel.blue p.gold {
	color: #C49B49;	
}

#panel.grey {
	background-color: #F9F9F9;
}

#panel.sixty {
	width: 60%;
	padding: 15vh 20%;
}

#panel.carousel {
	width: 100%;
	height: auto;
	float: left;
	padding: 0;
}

#panel.page h3 {
}

#panel.page h4 {
}

#panel.page p {
	padding: 10px 0;
}

#panel.news h2 {
	padding-left: 1.5%;
}

#panel.news p {
	padding-left: 1.5%;
	width: 50%;
}

#panel.news #line {
	margin-left: 1.5%;
}

#fifty {
	width: 50%;
	height: auto;
	padding: 10vh 0 0;
	display: inline-block;
	vertical-align: top;
}

#fifty h2 {
	padding: 20px 0;
	width: 80%;
}

#fifty h3 {
	padding: 20px 0;
	width: 80%;
}

#fifty p {
	padding: 0 0 20px;
	width: 80%;
}

#fifty #button {
	margin: 20px 0 0;
}

#fifty p.gold {
	font-size: 80%;
	color: #C49B49;	
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

#fifty-image {
	width: 50%;
	height: auto;
	aspect-ratio: 1/1.25;
	display: inline-block;
	vertical-align: top;
}

#fifty-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	float: left;
}

#item-type {
	width: 30%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin: 0 1.5%;
	text-align: left;
}

#item-type.events {
	width: 47%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin: 0 1.5% 5vh;
	text-align: left;
}

#panel > a:first-child .dining2 {
    width: 97%;
}
	
#item-type.dining {
	width: 47%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin: 0 1.5% 5vh;
	text-align: left;
}

#item-type.news {
	margin: 7.5vh 1.5% 0;
}

#item-type-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1.25;
	float: left;
	background-color: grey;
	overflow: hidden;
	position: relative;
}

#item-type.events #item-type-image {
	aspect-ratio: 1/1.15;
}

#item-type.dining #item-type-image {
	aspect-ratio: 1.25/1;
}

#item-type.news #item-type-image {
	aspect-ratio: 1/1;
}

#panel > a:first-child .dining2 #item-type-image {
	aspect-ratio: 2.5/1;
}

#item-type-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	float: left;
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
}

#item-type:hover #item-type-image img {
	transform: scale(1.1);
}

#item-type-image-overlay {
	width: 100%;
	background-image: linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0.2));	
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 222;
	text-align: center;
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
}

#item-type-image-overlay:hover {
	background-image: linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0.6));	
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
}

#item-type-image-overlay h2 {
	color: #FFFDF0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
	font-size: 60px;
    font-family: Canela-Regular;
}

#item-type-image-overlay p {
	color: #FFFDF0;
	font-size: 80%;
	width: 100%;
}

#item-type-image-overlay p.top {
	position: absolute;
	top: 40px;
	opacity: 0;
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
}

#item-type:hover #item-type-image-overlay p.top {
	opacity: 1;
}

#item-type-image-overlay p.bottom {
	position: absolute;
	bottom: 40px;
	text-decoration: underline;
}

#item-type-text {
	width: 100%;
	height: auto;
	float: left;
	padding: 20px 0;
}

#item-type-text h2 {
	padding: 16px 0;
	font-size: 32px;
	line-height: 120%;
}

#item-type-text h3 {
	padding: 16px 0;
}

#item-type-text h4 {
	padding: 12px 0 16px;
	font-size: 160%;
}

#item-type-text p {
	font-size: 90%;
	width: 100% !important;
	padding: 0 !important;
}

#item-type-text p.gold {
	font-size: 80%;
	color: #C49B49;	
	letter-spacing: 0.8px;
	text-transform: uppercase;
}



/* Update your custom CSS (in style.css or Additional CSS) */

#myCarousel .slide.space {
	width: 60vw;
}

/* Ensure images have fixed height for variableWidth: true */
#myCarousel .slide img {
    display: block;
    height: 60vh; /* Set a fixed height */
    width: auto;   /* Width adjusts proportionally */
}

#myCarousel .slide.space img {
    display: block;
    height: 100%; /* Set a fixed height */
    width: 100%;   /* Width adjusts proportionally */
	object-fit: cover;
}

#myCarousel .slide h3 {
    display: block;
	width: 100%;
	text-align: left;
	padding: 20px 0 10px;
}

#myCarousel .slide h3 span {
	float: right;
    font-family: GravitaGEO-Light;
	font-size: 18px;
	color: #C49B49;	
}

#myCarousel .slide p {
	width: 100%;
	text-align: left;
	font-size: 90%;
}

/* Slick uses margins to create space between slides */
#myCarousel .slick-slide {
    margin: 0 20px; /* Adjust the 10px to match your desired gutter (20px in the JS) */
    outline: none; /* Remove blue focus border that Slick can add */
}

/* Hide the native Slick arrows if they appear */
.slick-prev, .slick-next {
    display: none !important;
}

.slide-image {
	height: 60vh;
	width: 100%;
	overflow: hidden;
}

#insta-wrapper {
	width: 95%;
	height: auto;
	float: left;
	padding: 0 2.5%;
}

#insta {
	width: 17%;
	height: auto;
	float: left;
	margin: 0 1.5%;
	position: relative;
}

#insta img {
	width: 100%;
	height: auto;
	float: left;
}

#insta-wrapper h2 {
	padding-left: 1.5%;
	float: left;
	width: 97%;
	margin-bottom: 3.5vh;
}

#insta-wrapper h2 span {
	font-size: 60%;
	float: right;
}

#image-wrapper {
	width: 100%;
	height: 100vh;
	float: left;
	position: relative;
}

#image-wrapper-overlay {
	background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.8));	
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}

#image-wrapper-overlay h1 {
	color: #FFF;
	font-size: 80px;
	text-transform: uppercase;
	text-align: center;
	width: 80%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
    font-family: Canela-Regular;
	letter-spacing: 0.4vw;
	padding: 0 10%;
}

#image-wrapper-overlay h1 span {
	font-size: 20px;
    font-family: GravitaGEO-Light;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

#image-wrapper-overlay h2 {
	color: #FFF;
	font-size: 60px;
	text-align: center;
	width: 80%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transform: translateY(-50%);
    font-family: Canela-Regular;
	padding: 0 10%;
}

#image-wrapper-overlay p.bottom {
	position: absolute;
	bottom: 40px;
	z-index: 111;
	color: #FFFDF0;
	width: 100%;
	text-align: center;
}

#image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	float: left;
}

img.full {
	width: 100%;
	height: auto;
	float: left;
}
	
#team {
	width: 23%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin: 0 1%;
}

#team-image {
	width: 100%;
	height: auto;
	float: left;
	margin-bottom: 20px;
}

#team-image img {
	width: 100%;
	height: auto;
	float: left;
}

#team-text {
	width: 100%;
	height: auto;
	float: left;
}
	
#team-text h3 {
	font-size: 150%;
	padding-bottom: 5px;
}
		
#footer {
	width: 90%;
	height: auto;
	float: left;
	padding: 10vh 5%;
	background-color: #152740;
}

#footer-logo {
	width: auto;
	height: 40px;
	display: inline-block;
}

#footer-logo img {
	width: auto;
	height: 40px;
	display: inline-block;
}

#footer-social {
	width: auto;
	height: 40px;
	display: inline-block;
	float: right;
}

#footer-social p {
	width: auto;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	line-height: 40px;
	font-size: 90%;
	color: #FFFDF0;
	margin-right: 5px;
}

#footer-social #social-icon {
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	background-color: #C49B49;
	border-radius: 40px;
	margin-left: 5px;
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
	cursor: pointer;
}

#footer-social #social-icon:hover {
	background-color: #825F18;
}

#footer-social #social-icon img {
	height: 50%;
	width: 50%;
	margin: 25%;
	object-fit: contain;
}

#footer-line {
	width: 100%;
	height: 1px;
	display: inline-block;
	background-color: #C49B49;
	margin: 5vh 0;
	float: left;
}

#footer ul {
	padding: 0 80px 0 0;
	margin: 0;
	float: left;
}

#footer ul.right {
	padding: 0 0 0 0;
	margin: 0;
	float: right;
	text-align: right;
}

#footer ul.right #button {
	margin-top: 10px;
	cursor: pointer;
}

#footer ul.right #button:hover {
	background-color: #825F18;
}

#footer ul li {
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 90%;
	color: #FFFDF0;
}

#footer ul li a {
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
}

#footer ul li a:hover {
	opacity: 0.6;
}

#footer h5 {
	color: #FFFDF0;
}

#copy {
	width: 50%;
	float: left;
	font-size: 90%;
	color: #FFFDF0;
	opacity: 0.6;
}

#design {
	width: 50%;
	float: left;
	text-align: right;
	font-size: 90%;
	color: #FFFDF0;
	opacity: 0.6;
}

#design a {
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
	border-bottom: solid 1px #FFFDF0;
	opacity: 1 !important;
}

#design a:hover {
	border-bottom: solid 1px transparent;
}

.slide-out {
	width: 25%;
	height: 80vh;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 444;
	background-color: #0D1A2D;
	transform: translateX(100%);
	transition: transform 0.4s ease;
	padding: 10vh 5%;
	overflow: hidden;
	overflow-y: scroll;
}

/* visible state */
.slide-out.active {
	transform: translateX(0);
}

/* Close button */
.close-btn {
	position: absolute;
	top: 15px;
	right: 20px;
	background: none;
	border: none;
	font-size: 30px;
	cursor: pointer;
	line-height: 1;
	color: #FFFDF0;
}

.slide-out h3 {
	color: #FFFDF0 !important;
}

body.no-scroll {
	overflow: hidden;
}

.wpforms-container .wpforms-field, 
.wp-core-ui div.wpforms-container .wpforms-field {
  padding: 15px 0;
  position: relative;
  width: 20%;
  display: inline-block;
  margin: 0 10px;
}

.slide-out .wpforms-container .wpforms-field, 
.slide-out .wp-core-ui div.wpforms-container .wpforms-field {
  padding: 10px 0;
  width: 100%;
  margin: 0 0;
}

.slide-out div.wpforms-container-full .wpforms-field-label, 
.slide-out .wp-core-ui div.wpforms-container-full .wpforms-field-label
{
	color: #FFFDF0;
	font-weight: normal;
}

.slide-out div.wpforms-container-full .wpforms-field-label-inline, 
.slide-out .wp-core-ui div.wpforms-container-full .wpforms-field-label-inline
{
	color: #FFFDF0;
	font-weight: normal;	
}
		
div.wpforms-container-full input[type="submit"], 
div.wpforms-container-full button[type="submit"], 
div.wpforms-container-full .wpforms-page-button, 
.wp-core-ui div.wpforms-container-full input[type="submit"], 
.wp-core-ui div.wpforms-container-full button[type="submit"], 
.wp-core-ui div.wpforms-container-full .wpforms-page-button {
	line-height: 100%;
	width: auto;
	padding: 14px 15px 10px !important;
	color: #FFFDF0 !important;
	font-size: 90%;
	transition-property: all;
	transition-duration: .60s;
	transition-timing-function: ease-in-out;
	background-color: #C49B49 !important;
	border-radius: 8px !important;
	text-transform: uppercase;
	font-size: 84%;
	display: inline-block;
}

button.wpforms-submit:hover {
	background-color: #152740;
	color: #FFFDF0;
}







@media only screen and (max-width: 1450px) {

h2 {
}
	
h3 {
}
	
}





@media only screen and (max-width: 1024px) {

body, p {
	font-size: 16px;
}

h2 {
}
	
h3 {
}

h4 {
}
	
h5 {
}
	
#logo {
}

#panel.sixty {
	width: 80%;
	padding: 15vh 10%;
}
	
.wpforms-container .wpforms-field, 
.wp-core-ui div.wpforms-container .wpforms-field {
  width: 35%;
}
	
}







@media only screen and (max-width: 900px) {

h1 {
	font-size: 40px;
}

h2 {
	font-size: 32px;
}

h3 {
	font-size: 26px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 20px;
}

#line {
  margin: 20px 0;
}

#header-button {
}

#header-button.left {
	display: none;
}

#panel {
	padding: 10vh 5%;
}

#panel.sixty {
	width: 80%;
	padding: 10vh 10%;
}

#panel.news p {
	padding-left: 1.5%;
	width: 80%;
}

#item-type {
	width: 97%;
	margin: 2.5vh 1.5%;
}

#item-type-image {
}

#item-type.news #item-type-image {
	aspect-ratio: 1/0.75;
}

#item-type-text h2 {
	font-size: 28px;
}

#image-wrapper-overlay h1 {
	font-size: 60px;
}

#item-type-image-overlay h2 {
  font-size: 32px;
}

#panel-image-overlay h1 {
	width: 80%;
	padding: 0 10%;
}

#panel-image-overlay h2 {
	width: 80%;
	padding: 0 10%;
}

#fifty {
	width: 100%;
	height: auto;
	padding: 0 0 5vh;
	float: left;
}
	
#fifty-image {
	width: 100%;
	height: 70vh;
	float: left;
}

.viewport-header {
	position: relative;
	height: 80vh;
	padding: 0 0;
	width: 100%;
	float: left;
}	

.viewport-header video {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	float: left;
	object-fit: cover;
}	

#team {
	width: 45%;
	margin: 5vh 2.5%;
}

.slide-out {
	width: 90%;
}
		
.enquire {
	width: 85%;
	padding: 12px 12px 12px 12px;
	text-align: center;
}

.enquire h4 {
	font-size: 20px;
	margin-right: 10px;
}
	
#myCarousel .slide h3 {
	width: 100%;
}

#myCarousel .slide h3 span {
	float: left;
	width: 100%;
	font-size: 16px;
}
		
}








@media only screen and (max-width: 700px) {

body, p {
}
	
h1 {
	font-size: 32px;
}
	
h2 {
}
	
h3 {
}
	
#header {
	height: 80px;
}

#header-button {
	top: 24px;
	padding: 12px 14px 10px;
}

#header-button span {
	display: none;
}

#logo {
	height: 80px;
	line-height: 80px;
}

#logo img {
	height: 30px;
	margin-top: 30px;	
}

#hero-wrapper {
	height: 85vh;
}

#image-wrapper {
	height: 85vh;
}

#myCarousel .slide.space {
	width: 80vw;
}

#myCarousel .slide img {
    height: 30vh !important; /* Set a fixed height */
    width: auto;   /* Width adjusts proportionally */
}

#myCarousel .slick-slide {
    margin: 0 20px; /* Adjust the 10px to match your desired gutter (20px in the JS) */
    outline: none; /* Remove blue focus border that Slick can add */
}

.slide-image {
    height: 30vh !important; /* Set a fixed height */
}

#footer ul.right {
	float: left;
	text-align: left;
	width: 100%;
	margin-top: 40px;
}
	
#copy {
	width: 100%;
	float: left;
}

#design {
	width: 100%;
	float: left;
	text-align: left;
}

#image-wrapper-overlay h1 {
	font-size: 50px;
}

#item-type.events {
	width: 97%;
}

#item-type.events #item-type-image {
}

#item-type.dining {
	width: 97%;
    margin: 0 1.5% 2.5vh;
}

#item-type.dining #item-type-image {
	aspect-ratio: 2.5/1.5;
}

#panel > a:first-child .dining #item-type-image {
	aspect-ratio: 2.5/1.5;
}
	
.wpforms-container .wpforms-field, 
.wp-core-ui div.wpforms-container .wpforms-field {
  width: 90%;
}
	
#footer {
	padding: 5vh 5%;
}

#footer-logo {
	width: 100%;
	height: 40px;
	display: inline-block;
	text-align: center;
	margin-bottom: 20px;
}

#footer-social {
	width: 100%;
	float: left;
	text-align: center;
	margin-bottom: 20px;
}

#footer-social p {
	margin-right: 0;
	width: 100%;
}

#footer ul {
	padding: 0 0 0 0;
	margin: 0;
	float: left;
	text-align: center;
	width: 50%;
}

#footer ul.right {
	padding: 0 0 0 0;
	margin: 20px 0 0;
	float: left;
	text-align: center;
	width: 100%;
}

#copy {
	width: 100%;
	float: left;
	font-size: 90%;
	color: #FFFDF0;
	opacity: 0.6;
	text-align: center;
}

#design {
	width: 100%;
	float: left;
	font-size: 90%;
	color: #FFFDF0;
	opacity: 0.6;
	text-align: center;
}
	
}