@import "foundation.css";

@font-face {
	font-family: "brown-reg";
	font-style: normal;
	src: url("../font/regular/Brown-Regular.woff2") format("woff2"), url("../font/regular/Brown-Regular.woff") format("woff"), url("../font/regular/Brown-Regular.ttf") format("ttf"), url("../font/regular/Brown-Regular.svg") format("svg"), url("../font/regular/Brown-Regular.eot") format("eot"), url("../font/regular/Brown-Regular.otf") format("otf")
}

@font-face {
	font-family: "brown-bold";
	src: url("../font/bold/Brown-Bold.eot") format("eot"), url("../font/bold/Brown-Bold.woff2") format("woff2"), url("../font/bold/Brown-Bold.woff") format("woff"), url("../font/bold/Brown-Bold.ttf") format("ttf"), url("../font/bold/Brown-Bold.svg") format("svg");
	font-weight: bold;
	font-style: normal
}

body {
	overflow-x: hidden
}

body .mfp-bg {
	background: unset;
	opacity: unset
}

body div.text-block {
	background-color: #fff;
	position: relative;
	margin: 91px auto 91px auto;
	box-shadow: 3px 3px 40px rgba(0, 0, 0, 0.25)
}


body div.text-block div.grid-x {
	padding: 75px 68px 75px 73px
}

@media (max-width:1024px) {
	body div.text-block div.grid-x {
		padding: 10px
	}
}

body div.text-block div.grid-x div.margin {
	margin-top: 60px
}

@media (max-width:768px) {
	body div.text-block div.grid-x div.margin {
		margin-top: 10px
	}
}

body div.text-block div.grid-x div a {
	color: #000
}

body div.text-block div.grid-x div a:hover {
	color: #000
}

body div.text-block h1 {
	text-transform: uppercase;
	margin-bottom: unset;
	font-family: "brown-bold"
}

body div.text-block p {
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.02em;
	font-family: "brown-reg"
}

body button.mfp-close {
	opacity: unset
}

body button.mfp-close:before {
	display: inline-block;
	content: "";
	width: 30px;
	height: 2px;
	background-color: #EA513F;
	transform: rotate(45deg);
	position: absolute;
	left: 0;
	top: 25px
}

body button.mfp-close:after {
	display: inline-block;
	content: "";
	width: 30px;
	height: 2px;
	background-color: #EA513F;
	transform: rotate(-45deg);
	position: absolute;
	left: 0;
	top: 25px
}

body main section.main img.arm-top {
	position: absolute;
	top: 43px;
	right: -28px;
	max-width: 693px;
	height: 277px
}

@media (max-width:1500px) {
	body main section.main img.arm-top {
		right: -80px
	}
}

@media (min-width:1024px) and (max-height:700px) {
	body main section.main img.arm-top {
		top: -100px
	}
}

@media (max-width:1024px) and (max-height:1024px) {
	body main section.main img.arm-top {
		max-width: 400px;
		right: 0;
		height: auto;
		top: 20px
	}
}

@media (max-width:667px) {
	body main section.main img.arm-top {
		max-width: 365.99px;
		height: auto;
		top: 0;
		right: 0
	}
}

body main section.main img.main-svg {
	position: absolute;
	left: 51%;
	transform: translate(-50%, -50%);
	top: 50%
}

@media (max-width:1440px) {
	body main section.main img.main-svg {
		max-width: 500px
	}
}

.button-reserve {
	position: absolute;
	left: 51%;
	transform: translate(-50%, -50%);
	top: 62%; 
}

@media (max-width:1440px) {
	.button-reserve {
		top:65%;
		max-width: 500px
	}
}

@media (max-width:768px) {
	.button-reserve {
		top:62%;
		max-width: 500px
	}
} 

body main section.main img.arm-bottom {
	position: absolute;
	left: -5px;
	bottom: 10px;
	max-width: 535.68px;
	height: 526.45px
}

@media (min-width:1024px) and (max-height:700px) {
	body main section.main img.arm-bottom {
		bottom: -80px
	}
}

@media (max-width:1024px) and (max-height:1024px) {
	body main section.main img.arm-bottom {
		max-width: 350px;
		height: auto;
		bottom: 40px
	}
}

@media (max-width:667px) {
	body footer {
		text-align: center
	}
}

body footer section.footer {
	position: fixed;
	bottom: 63px
}

@media (min-width:1024px) and (max-height:700px) {
	body footer section.footer {
		bottom: 0px
	}
}

@media (max-width:1024px) and (max-height:768px) {
	body footer section.footer {
		bottom: 73px
	}
}

body footer section.footer.left {
	left: 134px
}

body footer section.footer.right {
	right: 144px
}

body footer section.footer ul {
	list-style: none;
	margin: unset
}

body footer section.footer ul li {
	display: inline-block;
	font-size: 12px;
	line-height: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase
}

body footer section.footer ul li:not(:first-of-type) {
	margin-left: 18.9px
}

@media (max-width:768px) {
	body footer section.footer ul li {
		font-size: 11px
	}
}

body footer section.footer ul li a {
	color: #000;
	font-family: "brown-reg"
}

body footer section.footer ul li a:hover {
	color: #000
}

body footer section.footer-mobile {
	position: absolute;
	bottom: 49px;
	left: 50%;
	transform: translateX(-50%)
}

@media (max-width:480px) {
	body footer section.footer-mobile {
		position: relative;
		bottom: 10px;
	}

	footer{
		margin-top: 170%;
	}
}

body footer section.footer-mobile ul {
	list-style: none;
	margin: unset
}

body footer section.footer-mobile ul li a {
	font-size: 12px;
	line-height: 22px;
	letter-spacing: 0.2em;
	color: #000;
	font-family: "brown-reg";
	text-transform: uppercase
}

body footer section.footer-mobile ul li a:hover {
	color: #fff
}





body,
.navbar,
.menu-items {
	animation: colorchange 10s linear 1s infinite;
	-webkit-animation: colorchange 10s linear 0s infinite alternate;
}

@keyframes colorchange {
	0% {
		background: #fef9f2;
	}

	25% {
		background: #fdebea;
	}

	50% {
		background: #e8e9ea;
	}

	75% {
		background: #d0e9e6;
	}

	100% {
		background: #f3f4d6;
	}
}

@-webkit-keyframes colorchange {
	0% {
		background: #fef9f2;
	}

	25% {
		background: #fdebea;
	}

	50% {
		background: #e8e9ea;
	}

	75% {
		background: #d0e9e6;
	}

	100% {
		background: #f3f4d6;
	}
}


@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Poppins", sans-serif;
}

.container {
	max-width: 1050px;
	width: 90%;
	margin: auto;
}

.navbar {
	width: 100%;
	box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 62px;
	z-index: 999;
}

.navbar .menu-items {
	display: flex;
}

.navbar .nav-container li {
	list-style: none;
}

.navbar .nav-container a {
	text-decoration: none;
	color: #0e2431;
	font-weight: 500;
	font-size: 1.2rem;
	padding: 0.7rem;
}

.navbar .nav-container a:hover {
	font-weight: bolder;
}

.nav-container {
	display: block;
	position: relative;
	height: 60px;
}

.nav-container .checkbox {
	position: absolute;
	display: block;
	height: 32px;
	width: 32px;
	top: 20px;
	left: 20px;
	z-index: 5;
	opacity: 0;
	cursor: pointer;
}

.nav-container .hamburger-lines {
	display: block;
	height: 26px;
	width: 32px;
	position: absolute;
	top: 17px;
	left: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.nav-container .hamburger-lines .line {
	display: block;
	height: 4px;
	width: 100%;
	border-radius: 10px;
	background: #0e2431;
}

.nav-container .hamburger-lines .line1 {
	transform-origin: 0% 0%;
	transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
	transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
	transform-origin: 0% 100%;
	transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
	padding-top: 120px;
	height: 100vh;
	width: 100%;
	transform: translate(-150%);
	display: flex;
	flex-direction: column;
	margin-left: -40px;
	padding-left: 50px;
	transition: transform 0.5s ease-in-out;
	text-align: center;
	font-family: "brown-reg";
}

.navbar .menu-items li {
	margin-bottom: 1.2rem;
	font-size: 1.5rem;
	font-weight: 500;
}

.logo {
	position: absolute;
	right: 5px;
	top: -15px;
	width: 40%;
}

@media(min-width:1280px) {
	.logo {
		position: absolute;
		right: 20px;
		top: -1px;
		width: 15%;
	}
}

@media(min-width:960px) {
	.logo {
		position: absolute;
		right: 20px;
		top: -15px;
		width: 15%;
	}
}

@media(max-width:768px) {
	.logo {
		position: absolute;
		right: 50px;
		top: -10px;
		width: 20%;
	}
}

@media(max-width:480px) {
	.logo {
		position: absolute;
		right: 0px;
		top: -15px;
		width: 40%;
	}
}

@media(max-width:320px) {
	.logo {
		position: absolute;
		right: 0px;
		top: -15px;
		width: 50%;
	}
}


.nav-container input[type="checkbox"]:checked~.menu-items {
	transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line1 {
	transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line2 {
	transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line3 {
	transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked~.logo {
	display: none;
}

.nav-logo {
	justify-self: center;
	display: flex;
	width: 30%;
	margin-top: 20rem;
}

@media(max-width:960px) {
	.nav-logo {
		width: 60%;
		margin-top: 15rem;
	}
}

.img-div {
	display: flex;
	justify-content: center;
}


.marmell-menu {
	display: flex;
	justify-content: center;
	padding: 5% 10%;
}

@media(max-width:960px) {
	.marmell-menu {
		display: flex;
		padding: 2% 0;
	}
}

.menu-main {
	position: absolute;
}

.btn {
	height: 45px;
	background: #ffffff0d;
	border-radius: 8px;
	border: 2px solid #444;
	font-size: 15px;
	color: #444;
	-webkit-transition: 0.5s all ease;
	transition: 0.5s all ease;
	position: relative;
	overflow: hidden;
	padding: 10px 25px;
	z-index: 1;
	width: 260px;
  }
  
 .btn:hover{
	background-color: #444;
	color:#fff;
 }

 section li {
	margin: 2rem;
 }