@font-face {
    font-family: 'Lowdrag';
    src: url('../font/Lowdrag-Regular.otf');
    src: url('../font/Lowdrag-Regular.woff2') format('woff2'),
        url('../font/Lowdrag-Regular.woff') format('woff');
    font-style: normal;
	font-weight: 400;
}

@font-face {
    font-family: 'Lowdrag';
    src: url('../font/Lowdrag-Narrow.otf');
    src: url('../font/Lowdrag-Narrow.woff2') format('woff2'),
        url('../font/Lowdrag-Narrow.woff') format('woff');
    font-style: normal;
	font-weight: 300;
}

@font-face {
    font-family: 'Lowdrag';
    src: url('../font/Lowdrag-Wide.otf');
    src: url('../font/Lowdrag-Wide.woff2') format('woff2'),
        url('../font/Lowdrag-Wide.woff') format('woff');
    font-style: normal;
	font-weight: 700;
}

@font-face {
    font-family: 'Lowdrag';
    src: url('../font/Lowdrag-Extended.otf');
    src: url('../font/Lowdrag-Extended.woff2') format('woff2'),
        url('../font/Lowdrag-Extended.woff') format('woff');
    font-style: normal;
	font-weight: 900;
}

body {
	font-family: marion-standard, sans-serif;
	font-weight: 400;
	font-style: normal;
	background-color: #0A332D;
	font-size: 24px;
	line-height: 120%;
	letter-spacing: 0;
	overflow-x: hidden;
}

@media (max-width: 767px) {
	.container-fluid {
		padding-left: 35px;
		padding-right: 35px;
	}
}

.title {
	font-family: 'Lowdrag';
	font-weight: 300;
	color: #C58D3A;
	font-size: 46px;
	line-height: 46px;
	letter-spacing: 0;
	text-transform: uppercase;
}

.subtitle {
	font-family: trade-gothic-next-condensed, sans-serif;
	color: #C58D3A;
	font-size: 32px;
	line-height: 32px;
	letter-spacing: 10%;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.text {
	font-family: marion-standard, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	line-height: 120%;
	letter-spacing: 0;
}

@media (max-width: 767px) {
	.title {
		font-size: 40px;
		line-height: 40px;
		text-align: center;
	}
	
	.subtitle {
		font-weight: 700;
		font-size: 30px;
		line-height: 30px;
		letter-spacing: 10%;
		text-align: center;
	}
	
	.text {
		font-size: 20px;
		line-height: 120%;
		letter-spacing: 0;
		font-weight: 400;
	}
}

.title-device {
	display: none;
}

@media (max-width: 991px) {
	.title-device {
		display: block;
		font-size: 40px;
		line-height: 40px;
		text-align: center;
		font-family: 'Lowdrag';
		font-weight: 300;
		color: #C58D3A;
		letter-spacing: 0;
		text-transform: uppercase;
	}
}

.button {
	display: inline-block;
	color: #C58D3A;	
	font-family: gill-sans-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 15px;
	line-height: 15px;
	letter-spacing: 10%;
	text-transform: uppercase;
	border: 1px solid #C58D3A;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 16px;
	padding-right: 16px;
	text-align: center;
	transition: all 0.3s ease;
}

.button:hover, .button:active {
	color: #F8EDDA;
	background-color: #C58D3A;
}

@media (max-width: 767px) {
	.button {
		font-size: 14px;
		padding-top: 14px;
		padding-bottom: 14px;
	}
}

#nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9;
}

@media (max-width: 991px) {
	#nav {
		position: fixed;
	}	
}

#nav-logo {
	position: absolute;
	top: 20px;
	left: 20px;
}

#nav-logo a img {
	height: 56px;
}

#nav-menu {
	position: absolute;
	width: 100%;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	top: 30px;
}

@media (max-width: 991px) {
	#nav-menu {
		display: none;
	}	
}

#nav-menu ul {
	margin-left: 0;
	padding-left: 0;
}

#nav-menu ul li {
	display: inline-block;
	list-style-type: none;
	font-family: gill-sans-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 15px;
	line-height: 15px;
	letter-spacing: 10%;
	text-transform: uppercase;
	margin-left: 12px;
	margin-right: 12px;
	transition: all 0.3s ease;
}

#nav-menu ul li a {	
	font-family: gill-sans-nova, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 15px;
	line-height: 15px;
	letter-spacing: 10%;
	text-transform: uppercase;
	color: #F8EDDA;
	cursor: pointer;
	transition: all 0.3s ease;
}

#nav-menu ul li a:hover, #nav-menu ul li a:active {
	color: #C58D3A;
	text-decoration: none;
} 

#nav-menu ul li img {
	height: 15px;
}

#nav-booking {
	position: absolute;
	top: 20px;
	right: 20px;
}

#nav-booking a {
	transition: all 0.3s ease;
}

@media (max-width: 1315px) {
	#nav-booking {
		display: none;
	}
}

.hamburger {
	display: none;	
}

@media (max-width: 991px) {
	.hamburger {
		position: absolute;
		top: 34px;
		right: 20px;
		width: 40px;
		height: 24px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		cursor: pointer;
	}
}

.hamburger span {
  	display: block;
 	width: 40px;
  	height: 1px;
  	background-color: #C58D3A;
  	transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) {
	transform: translateY(11.5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform: translateY(-11.5px) rotate(-45deg);
}

#nav-device {
	display: none;
	transition: margin 0.3s ease;
}

@media (max-width: 991px) {
	#nav-device {
		display: block;
		position: fixed;
		margin-top: -110vh;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #0A332D;
		background-image: url(../img/monogram-bg.svg);
		background-size: cover;
		background-position: bottom;
		z-index: 7;
		transition: margin 0.7s ease;
	}
	
	#nav-device.active {
		margin-top: 0;
		transition: margin 0.7s ease;
	}
}

#nav-device-menu {
	position: relative;
	margin-top: 100px;
	width: 100%;
}

#nav-device-menu ul {
	margin-left: 0;
	padding-left: 0;
}

#nav-device-menu ul li {
	display: block;
	list-style-type: none;
	font-family: gill-sans-nova, sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 10%;
	text-align: center;
	text-transform: uppercase;
	color: #F8EDDA;
	margin-bottom: 30px;
	transition: all 0.3s ease;
}

#nav-device-menu ul li a {
	color: #F8EDDA;
	cursor: pointer;
	transition: all 0.3s ease;
}

#nav-device-menu ul li a:hover, #nav-device-menu ul li a:active {
	color: #C58D3A;
	text-decoration: none;
} 

#nav-device-menu ul li img {
	height: 20px;
}

#nav-device-social {
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 30px;
}

#nav-device-social ul {
	display: flex;
  	align-items: center;
	justify-content: center;
	margin-left: 0;
	padding-left: 0;
	height: 30px;
}

#nav-device-social ul li {
	display: inline-block;
	list-style-type: none;
	margin-left: 10px;
	margin-right: 10px;
	height: 30px;
	transition: all 0.3s ease;
}

#nav-device-social ul li a img {
	height: 30px;
	transition: all 0.3s ease;
}

#nav-device-social .subtitle {
	font-size: 30px;
	line-height: 30px;
	letter-spacing: 10%;
}

#nav-device-signup {
	position: relative;
	width: 100%;
	text-align: center;
}

#nav-device-signup a .button {
	margin-left: 30px;
	margin-right: 30px;
	width: calc(100% - 60px);
	transition: all 0.3s ease;
}

#home-header {
	position: relative;
	height: 100vh;
	color: #F8EDDA;
	background-image: url(../img/monogram-bg.svg);
	background-size: cover;
	background-position: bottom;
	text-align: center;
}

#home-logo {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

@media (max-width: 767px) {
	#home-logo {
		width: calc(100% - 40px);
		padding-left: 20px;
		padding-right: 20px;
	}
}

#home-logo img {
	width: 100%;
	max-width: 578px;
}

#home-scroll {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
}

#home-scroll div {
	display: block;
	cursor: pointer;
}

#home-scroll div img {
	height: 35px;
	margin-top: 15px;
	animation: bounce 2s infinite;
}

@media (max-width: 767px) {
	#home-scroll div img {
		height: 30px;
		margin-top: 10px;
	}
}

@keyframes bounce {
	0%, 100% {
    	transform: translateY(0);
  	}
  	30% {
  		transform: translateY(8px);
  	}
  	50% {
    	transform: translateY(0);
  	}
  	70% {
    	transform: translateY(4px);
  	}
}

#home-about {
	position: relative;
	background-color: #F8EDDA;
	padding-top: 190px;
	padding-bottom: 120px;
	text-align: left;
	color: #000000;
}

@media (max-width: 991px) {
	#home-about {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

@media (max-width: 991px) {
	#home-about .title {
		display: none;
	}
	
	#home-about .title-device {
		margin-bottom: 60px;
	}
	
	#home-about .img-fluid {
		margin-bottom: 60px;
	}
}

#home-about .text {
	max-width: 450px;
}

@media (max-width: 991px) {
	#home-about .text {
		max-width: none;
	}
}

#home-whatson {
	position: relative;
	padding-top: 120px;
	padding-bottom: 120px;
	text-align: left;
	color: #C58D3A;
	background-color: #0A332D;
}

@media (max-width: 991px) {
	#home-whatson {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

#home-bookings {
	position: relative;
	background-color: #F8EDDA;
	padding-top: 0px;
	padding-bottom: 120px;
	text-align: left;
	color: #000000;
}

#home-bookings .title {
	width: 100%;
}

@media (max-width: 991px) {
	#home-bookings {
		padding-top: 0px;
		padding-bottom: 60px;
	}
	
	#home-bookings .title {
		text-align: center;
	}
}

#whatson {
	position: relative;
	padding-top: 140px;
	padding-bottom: 0px;
	text-align: left;
	color: #C58D3A;
	background-color: #0A332D;
}

@media (max-width: 991px) {
	#whatson {
		padding-top: 120px;
	}
}

#monogram {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -50%;
	z-index: 3;
}

@media (max-width: 1199px) {
	#monogram {
		left: -20%;
	}
}

@media (max-width: 991px) {
	#monogram img {
		width: 60%;
	}
}

@media (max-width: 767px) {
	#monogram {
		top: 50%;
		transform: translateY(-50%);
		left: -35px;
	}
	
	#monogram img {
		width: 50%;
	}
}

ul.button-list {
	margin-left: 0;
	padding-left: 0;
	margin-top: 40px;
}

ul.button-list li {
	display: inline-block;
	list-style-type: none;
	margin-right: 8px;
	margin-top: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
}

@media (max-width: 767px) {
	ul.button-list {
		margin-top: 50px;	
	}
	
	ul.button-list li {
		display: block;
		width: 100%;
		margin-right: 0px;
		margin-top: 20px;
	}
	
	ul.button-list li .button {
		width: 100%;
	}
}

#footer {
	padding-top: 150px;
	color: #F8EDDA;
	text-align: center;
	font-family: marion-standard, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	line-height: 150%;
	letter-spacing: 0;
}

@media (max-width: 991px) {
	#footer {
		padding-top: 60px;
	}	
}

@media (max-width: 767px) {
	#footer {
		font-size: 20px;
		line-height: 150%;
		letter-spacing: 0;
	}
}

#footer a {
	color: #F8EDDA;
	transition: all 0.3s ease;
}

#footer a:hover, #footer a:active {
	color: #C58D3A;
	text-decoration: none;
	transition: all 0.3s ease;
}

#footer .title {
	width: 100%;
	text-align: center;
}

@media (max-width: 991px) {
	#footer .subtitle {
		margin-top: 50px;
	}
}

#footer-social {
	text-align: center;
	margin-bottom: 40px;
}

#footer-social ul {
	margin-left: 0;
	padding-left: 0;
}

#footer-social ul li {
	display: inline-block;
	list-style-type: none;
	padding-left: 12px;
	padding-right: 12px;
	transition: all 0.3s ease;
}

#footer-social ul li a img {
	height: 30px;
	transition: all 0.3s ease;
}

#footer-monogram {
	position: relative;
	width: 100%;
	text-align: center;
}

@media (max-width: 991px) {
	#footer-monogram {
		margin-top: 50px;
	}
}

#footer-monogram img {
	height: 159px;
}

#footnote {
	font-family: gill-sans-nova, sans-serif;
	font-weight: 600;
	font-size: 11px;
	line-height: 150%;
	letter-spacing: 10%;
	text-transform: uppercase;
	color: #C58D3A;
	margin-top: 90px;
	margin-bottom: 20px;
}

@media (max-width: 991px) {
	#footnote {
		margin-top: 50px;
	}	
}

@media (max-width: 767px) {
	#footnote {
		line-height: 200%;
	}
}

#dice-event-list-widget, #dice-event-list-widget * {
	color: #C58D3A !important;
	font-family: gill-sans-nova, sans-serif !important;
}

#dice-event-list-widget button, #dice-event-list-widget a[class*="button"], #dice-event-list-widget a[class*="Button"], .dice_book-now {
	color: #C58D3A !important;
	font-family: gill-sans-nova, sans-serif !important;
	font-weight: 600 !important;
	font-style: normal !important;
	font-size: 15px !important;
	line-height: 15px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	border: 1px solid #C58D3A !important;
	padding: 16px !important;
	text-align: center !important;
	background-color: #0A332D !important;
	transition: all 0.3s ease !important;
}

#dice-event-list-widget button:hover, #dice-event-list-widget a[class*="button"]:hover, .dice_book-now:hover {
	color: #0A332D !important;
	text-decoration: none !important;
}

#ot-reservation-widget, #ot-reservation-widget.arialBlack {
	font-family: gill-sans-nova, sans-serif;
}

.ot-dtp-picker, .ot-dtp-picker.ot-standard.tall {
	width: 100% !important;
}

.ot-standard .ot-title {
	display: none;
}

.ot-dtp-picker-form {
	font-size: 18px !important;
}
