/*
	CSS file for 
*/



/*	General	
------------------------------*/
	
	* {
		padding: 0;
		margin: 0;
		outline: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	
	* html .clearfix,
	*:first-child+html .clearfix { 
		zoom: 1;
	}
	
	body {
		color: #7e6d4f;
		font-family: 'Plus Jakarta Sans';
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 160%;
		letter-spacing: 0.32px;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}

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

	a img {
		border: 0;
	}			
	
	a,
	svg,
	path,
	button {
		transition: all ease 0.4s;
	}

	svg {
		display: block;
	}
	
	.container {
		width: 94%;
		margin: 0 auto;
	}	
	
	
	
/*	Header
-------------------------------------------*/
	
	header {
		display: flex;
		top: 40px;
		left: 40px;
		z-index: 1000;
		width: calc(100vw - 80px);
		position: fixed;
		justify-content: space-between;
		border-radius: 16px;
		border: 1px solid #826d4c;
		padding: 24px;
		box-sizing: border-box;
		transition: all ease 0.4s 0.2s;
	}
	
		header.filled {
			background: #ffffff;
		}

		header .left {
			width: 170px;
			display: flex;
			align-items: center;
		}

			header .bars {
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				z-index: 10;
			}

				header .bars span {
					display: block;
					width: 24px;
					height: 2px;
					position: relative;
					background: #826d4c;
					transition: all ease 0.4s;
				}

				header .bars span:before,
				header .bars span:after {
					content: "";
					width: 24px;
					height: 2px;
					background: #826d4c;
					position: absolute;
					transition: all ease 0.4s;
				}

				header .bars span:before {
					top: -6px;
					left: 0px;
				}

				header .bars span:after {
					top: 6px;
					left: 0px;
				}

			header .left .social {
				display: flex;
			}

				header .left a {
					margin-left: 24px;
				}

		header .logo {

		}

			header .logo svg {
				display: block;
				height: 50px;
				margin-top: 6px;
				fill: #826d4c;
			}

		header .right {
			width: 170px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

			header .right a {
				color: #826d4c;
				font-size: 14px;
				font-weight: 700;
				line-height: 125%;
				letter-spacing: 2.8px;
				text-transform: uppercase;
			}

				header .right span {
					display: block;
					width: 1px;
					height: 13px;
					background: #826d4c;
					margin: 0 24px 0 22px;
				}

	.narrow header {
		width: calc(50% - 70px);
		transition-delay: 0s;
	}

	/*
	 *	Openings
	 */
	.openings {
		position: fixed;
		display: flex;
		top: 40px;
		right: 40px;
		z-index: 1000;
		width: calc(50% - 70px);
		height: 110px;
		position: fixed;
		align-items: center;
		justify-content: center;
		color: #826d4c;
		font-size: 16px;
		font-weight: 700;
		line-height: 160%;
		letter-spacing: 0.32px;
		border-radius: 16px;
		border: 1px solid #826d4c;
		padding: 24px;
		box-sizing: border-box;
		transition: all ease 0.4s 0s;
		opacity: 0;
		visibility: hidden;
	}

		.openings span {
			color: #826d4c;
			margin: 0 4px;
		}

		.narrow .openings {
			opacity: 1;
			visibility: visible;
			transition-delay: 0.2s;
		}


	/*
	 *	Main Menu
	 */
	.menu {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 990;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		position: fixed;
		background: #ffffff;
		text-align: center;
		opacity: 0;
		visibility: hidden;
		transition: all ease 0.6s;
	}

		.menu ul {
			text-align: center;
			list-style: none;
		}

			.menu ul li + li {
				margin-top: 18px;
			}

			.menu ul li a {
				color: #7e6d4f;
				text-align: center;
				font-size: 44px;
				font-style: normal;
				font-weight: 600;
				line-height: 125%;
				letter-spacing: 0.96px;
			}

				.menu ul li a:hover {
					color: #826d4c;
				}

		.menu .btn {
			display: inline-block;
			color: #ffffff;
			font-size: 14px;
			font-weight: 700;
			line-height: 125%;
			letter-spacing: 2.8px;
			text-transform: uppercase;
			margin-top: 32px;
			border-radius: 8px;
			background: #7e6d4f;
			padding: 16px 32px;
		}

	.narrow .menu {
		right: 50%;
	}


	/*
	 *	Openev nav
	 */
	.opened-nav header .bars span:before {
		top: 0px;
		transform-origin: center center;
		transform: rotate(-45deg);
	}

		.opened-nav header .bars span:after {
			top: 0px;
			transform-origin: center center;
			transform: rotate(45deg);
		}

		.opened-nav header .bars span {
			background: transparent !important;
		}

	.opened-nav .menu {
		opacity: 1;
		visibility: visible;
	}



/*	Footer
-------------------------------------------*/

	footer {
		display: flex;
		left: 40px;
		bottom: 40px;
		z-index: 1000;
		width: calc(100vw - 80px);
		padding: 24px;
		position: fixed;
		border-radius: 16px;
		border: 1px solid #826d4c;
		justify-content: space-between;
		box-sizing: border-box;
		transition: all ease 0.4s 0.2s;
	}
	
		footer.filled {
			background: #ffffff;
		}

		footer .col {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 13px;
			color: #826d4c;
			font-size: 14px;
			font-weight: 400;
			line-height: 160%;
			letter-spacing: 0.28px;
			text-align: center;
			box-sizing: border-box;
		}

			footer .col.social {
				width: 170px;
				min-width: 170px;
			}

			footer .col.social a + a {
				margin-left: 24px;
			}

			footer .col + .col {
				border-left: 1px solid #826d4c;
			}

			footer .col h5 {				
				font-size: inherit;
				font-weight: bold;
				line-height: inherit;
			}

			footer .col-email a {
				text-decoration: underline;
			}

	.narrow footer {
		width: calc(50% - 70px);
		transition-delay: 0s;
	}

		.narrow footer .col-opening {
			display: none;
		}

		.narrow footer .col-address span {
			display: block;
		}


/*	Landing
-------------------------------------------*/

	.page-landing {
		min-height: 100vh;
		background: #ffffff;
	}

	/*
	 *	Main
	 */
	.page-landing .main {
		display: flex;
		align-items: center;
		justify-content: center;
		top: 20px;
		margin: 0 20px 40px 20px;
		min-height: calc(100vh - 40px);
		border: 1px solid #D5C4A3;
		border-radius: 24px;
		box-sizing: border-box;
		position: relative;
	}

		.page-landing .main .content {
			width: 100%;
			max-width: 688px;
			z-index: 2;
			padding: 0 20px 240px 20px;
			position: relative;
			text-align: center;
		}

			.page-landing .main .content svg {
				display: block;
				margin: 0 auto;
			}

			.page-landing .main .content p {
				margin-top: 24px;
			}

			.page-landing .main .content .arrow {
				display: inline-block;;
				margin-top: 24px;
				font-size: 14px;
				font-weight: 700;
				line-height: 125%;
				letter-spacing: 2.8px;
				text-transform: uppercase;
			}

				.page-landing .main .content .arrow svg {
					margin-top: 24px;
				}

		.page-landing .main .img {
			width: 100%;
			height: 460px;
			bottom: 85px;
			left: 20px;
			right: 20px;
			position: absolute;
			background: url('../img/landing-img.png') no-repeat bottom center / contain;
			mix-blend-mode: multiply;
		}

		.page-landing .main .footer {
			display: flex;
			left: 20px;
			right: 20px;
			bottom: 20px;
			padding: 24px;
			position: absolute;
			border-radius: 16px;
			border: 1px solid #D5C4A3;
			justify-content: space-between;
		}

			.page-landing .main .footer .col {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 13px;
				font-size: 14px;
				font-weight: 400;
				line-height: 160%;
				letter-spacing: 0.28px;
				text-align: center;
				box-sizing: border-box;
			}

				.page-landing .main .footer .col.social {
					width: 170px;
					min-width: 170px;
				}

					.page-landing .main .footer .col.social a + a {
						margin-left: 24px;
					}

				.page-landing .main .footer .col + .col {
					border-left: 1px solid #D5C4A3;
				}

				.page-landing .main .footer .col h5 {
					font-size: inherit;
					font-weight: bold;
					line-height: inherit;
				}

				.page-landing .main .footer .col-email a {
					text-decoration: underline;
				}

	/*
	 *	Sites
	 */
	.page-landing .sites {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20px;
		padding-top: 100px;
		height: calc(100vh - 40px);
		box-sizing: border-box;
		position: relative;
	}
	
		.page-landing .sites .top {
			top: 5px;
			left: 0px;
			right: 0px;
			position: absolute;
			text-align: center;
		}
		
			.page-landing .sites .top img {
				display: block;
				margin: 0 auto;
				height: 42px;
			}
			
			.page-landing .sites .top p {
				font-size: 17px;
				font-style: italic;
				line-height: 20px;
				margin-top: 8px;
			}

		.page-landing .sites .box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: calc(33.33% - 16px);
			height: 100%;
			border-radius: 16px;
			overflow: hidden;
			position: relative;
		}

			.page-landing .sites .box .bg {
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				position: absolute;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
			}

				.page-landing .sites .box .bg:before {
					content: "";
					top: 0px;
					left: 0px;
					right: 0px;
					bottom: 0px;
					position: absolute;
					background: rgba(0, 0, 0, 0.5);
				}

			.page-landing .sites .box .content {
				z-index: 2;
				padding: 30px;
				position: relative;
				text-align: center;
			}

				.page-landing .sites .box .content .logo {
					display: block;
					width: auto;
					height: 90px;
					margin: 0 auto;
					fill: #E8E4D1;
				}

				.page-landing .sites .box .content .sep {
					display: block;
					margin: 16px auto;					
				}

				.page-landing .sites .box .content p {
					max-width: 455px;
					margin: 0 auto;
					color: #e8e4d2;
					text-align: center;
				}

				.page-landing .sites .box .content .btn {
					display: inline-block;
					color: #e8e4d2;
					font-size: 14px;
					font-weight: 700;
					line-height: 125%;
					letter-spacing: 2.8px;
					text-transform: uppercase;
					padding: 16px 32px;
					border-radius: 8px;
					border: 1px solid #7e6d4f;
					margin-top: 16px;
				}

					.page-landing .sites .box .content .btn:hover {
						color: #fff;
						background: #7e6d4f;
					}

				.page-landing .sites .box.olive .content h2,
				.page-landing .sites .box.olive .content p {
					color: #E8E4D1;
				}

	.page-landing footer {
		display: none;
	}


/*	Hero
-------------------------------------------*/

	.hero {
		height: calc(100vh - 40px);
		margin: 20px;
		border-radius: 24px;
		border: 1px solid #D5C4A3;
		box-sizing: border-box;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 6.61%, rgba(0, 0, 0, 0.00) 22.08%), linear-gradient(180deg, rgba(0, 0, 0, 0.80) 7.86%, rgba(0, 0, 0, 0.00) 27.86%), url('../img/hero-bg-kitchen1.jpg') no-repeat center center / cover;
	}
	
	.hero-2 {		
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 6.61%, rgba(0, 0, 0, 0.00) 22.08%), linear-gradient(180deg, rgba(0, 0, 0, 0.80) 7.86%, rgba(0, 0, 0, 0.00) 27.86%), url('../img/hero-bg-martys3.jpg') no-repeat center center / cover;
	}
	
	.hero-3 {		
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 6.61%, rgba(0, 0, 0, 0.00) 22.08%), linear-gradient(180deg, rgba(0, 0, 0, 0.80) 7.86%, rgba(0, 0, 0, 0.00) 27.86%), url('../img/hero-bg-martys3.jpg') no-repeat center center / cover;
	}


/*	Content Section
-------------------------------------------*/

	[data-sticky-container] {
		position: relative;
		height: calc(400vh - 20px);
	}

	.content-section {
		display: flex;
		width: 100%;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
		justify-content: space-between;
	}

		.content-section .content {
			display: flex;
			align-items: center;
			justify-content: center;
			width: calc(50% - 10px);
			padding: 20px;
			border-radius: 24px;
			border: 1px solid #826d4c;
			box-sizing: border-box;
			text-align: center;
		}

			.content-section .content h2 {
				font-size: 48px;
				font-weight: 600;
				line-height: 125%;
				letter-spacing: 0.96px;
			}

			.content-section .content .sep {
				display: block;
				margin: 16px auto;
			}

			.content-section .content p {
				max-width: 455px;
				margin: 0 auto;
			}

		.content-section .image {
			display: none;
			width: calc(50% - 10px);
			height: calc(100vh - 40px);
			border-radius: 24px;
			position: relative;
			overflow: hidden;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
		}

			.content-section .image:before {
				content: "";
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				z-index: 15;
				position: absolute;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.00) 22.19%)
			}

			.content-section .image .img {
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				z-index: 1;
				position: absolute;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
				transition: all ease 0.5s;
			}

				.content-section .image .side-img-2 {
					opacity: 0;
					z-index: 2;
				}

				.content-section .image .side-img-3 {
					opacity: 0;
					z-index: 3;
				}

				.content-section .image .side-img-4 {
					opacity: 0;
					z-index: 4;
				}

				.content-section .image .img.show {
					opacity: 1 !important;
				}


	/*
	 *	Reservation
	 */
	.content-section.section-reservation .image {
		display: block;
	}

		.section-reservation .btn {
			display: inline-block;
			font-size: 14px;
			font-weight: 700;
			line-height: 125%;
			letter-spacing: 2.8px;
			text-transform: uppercase;
			margin-top: 16px;
			border-radius: 8px;			
			border: 1px solid #7e6d4f;
			padding: 16px 32px;
		}
		
			.section-reservation .btn:hover {
				color: #ffffff;
				background: #7e6d4f;
			}


	/*
	 *	Menu
	 */
	.section-menu {

	}

		.section-menu .inner {
			width: 100%;
		}

		.section-menu .items {
			display: flex;
			justify-content: space-between;
			width: 100%;
			max-width: 452px;
			margin: 0 auto;
		}

			.section-menu .items a {
				width: calc(50% - 10px);
			}

				.section-menu .items a .img {
					border-radius: 16px;
					padding-bottom: 100%;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;
				}

				.section-menu .items a h4 {
					font-size: 25px;
					font-weight: 600;
					line-height: 125%;
					letter-spacing: 0.6px;
					margin-top: 16px;
				}
				
		.section-menu .items.three {
			max-width: 600px;
			flex-wrap: wrap;
			justify-content: center
		}		
		
			.section-menu .items.three a {
				width: calc(33.333% - 14px);
				margin: 20px 7px 0 7px;
			}
			
			.section-menu .items.three a h4 {
				font-size: 25px;	
			}


	/*
	 *	Gallery
	 */
	.section-gallery .content {
		width: calc(100vw - 40px);
	}

		.section-gallery .inner {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			height: calc(100vh - 350px);
			justify-content: space-between;
			align-items: stretch;
		}

		.section-gallery .content h2,
		.section-gallery .content .sep {
			display: none;
		}

		.section-gallery .img {
			width: calc(16.6666% - 16.666px);
			height: calc(50% - 10px);
			border-radius: 16px;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
		}

			.section-gallery .img.s1 {
				margin-bottom: 20px;
			}

			.section-gallery .img.s2 {
				width: calc(25% - 15px);
			}



/*	Responsive
-------------------------------------------*/

@media (max-width: 1280px) and (min-width: 1024px)
{
	.narrow header .left, header .right { width: 50px; }
	.narrow header .right { text-align: right; }
	.narrow header .left a { display: none; }
	.narrow header .right a:first-child { display: none; }
	.narrow header .right span { display: none; }

	.narrow footer .col-email { display: none; }

	footer .col-address span { display: block; }
}

@media (max-width: 1080px)
{
	.page-landing .main .footer .col.social { width: 120px; min-width: 120px; padding-left: 30px; box-sizing: border-box; }
	.page-landing .main .footer .col.social a + a { margin-left: 16px; }
}

@media (max-width: 1023px)
{
	body { font-size: 14px; letter-spacing: 0.28px; }

	.page-landing .main { border: none; margin: 0; min-height: 0px; padding-top: 35px; }
	.page-landing .main .img { display: none; }
	.page-landing .main .content { padding-bottom: 62px; }
	.page-landing .main .content svg { width: auto; height: 120px; }
	.page-landing .main .content .arrow { display: none; }
	.page-landing .main .footer { display: none; }
	.page-landing .sites { display: block; margin: 0 16px; height: auto; padding-top: 0px; }
	.page-landing .sites .top { position: relative; top: auto; margin-top: 25px; margin-bottom: 25px; }
	.page-landing .sites .box { width: 100%; height: auto; }
	.page-landing .sites .box + .box { margin-top: 20px; }
	.page-landing .sites .box .content { padding-top: 45px; padding-bottom: 45px; }
	.page-landing .sites .box .content .logo { max-height: 70px; }
	.page-landing .sites .box .content h2 { font-size: 48px; letter-spacing: 0.96px; }
	.page-landing .sites .box .content p { font-size: 12px; line-height: 160%; letter-spacing: 0.24px; }
	.page-landing .sites .box .bg:before { background-color: rgba(0, 0, 0, 0.6); }
	.page-landing footer { display: flex; }

	header { top: 16px; left: 16px; right: 16px; padding: 16px; width: auto !important; }
	header .left { width: 90px; }
	header .left .social { position: absolute; right: 16px; }
	header .left .social a { margin-left: 0px; }
	header .left .social a + a { margin-left: 16px; }
	header .logo svg { height: 32px; width: auto; margin-top: 8px; }
	header .right { width: 90px; }
	header .right a:first-child, header .right span { display: none; }
	header .right .lang { position: absolute; left: 60px; }

	footer { z-index: 10; position: relative; flex-wrap: wrap; width: auto !important; bottom: auto; left: auto; right: auto; margin: 30px 16px; padding: 16px; }
	footer:before { content: ""; position: absolute; top: 83px; left: 16px; right: 16px; height: 1px; background: #D5C4A3; }

		.color-olive footer:before { background: #525125; }

	footer.floating { position: absolute; top: calc(100vh - 216px); z-index: 900; }

	footer .col { width: 50%; min-height: 57px; padding: 0; font-size: 12px; line-height: 160%; letter-spacing: 0.24px; }
	footer .col:nth-child(3) { border-left: 0px; margin-top: 20px; }
	footer .col:nth-child(4) { margin-top: 20px; }
	footer .col strong { font-weight: 400; }
	footer .col span { display: block; }

	.openings { display: none !important; }

	.hero { margin: 8px; border-radius: 16px; border: 0px; height: calc(100vh - 16px); background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 6.61%, rgba(0, 0, 0, 0.00) 50.08%), linear-gradient(180deg, rgba(0, 0, 0, 0.80) 7.86%, rgba(0, 0, 0, 0.00) 27.86%), url('../img/hero-bg-martys1.jpg') no-repeat center center / cover }

	[data-sticky-container] { height: auto; }

	.content-section { display: block; padding: 8px; height: auto; }
	.content-section .content { width: 100%; min-height: 640px; padding: 24px; }
	.content-section .content h2 { font-size: 36px; line-height: 125%; }
	.content-section .content p { font-size: 14px; line-height: 160%; letter-spacing: 0.28px; }
	.content-section .image { display: block; width: 100%; height: 468px; margin-top: 16px; }

	.section-menu .items a h4 { font-size: 20px; line-height: 125%; letter-spacing: 0.4px; }
	.section-menu .items.three a h4 { font-size: 20px; line-height: 125%; letter-spacing: 0.4px; }

	.section-gallery .inner { height: auto; margin-bottom: -16px; }
	.section-gallery .content h2 { display: block; width: 100%; }
	.section-gallery .content .sep { display: block; }
	.section-gallery .img { width: calc(50% - 8px) !important; height: auto; padding-bottom: calc(50% - 8px); margin-bottom: 16px; }
	.section-gallery .img:nth-child(3n) { width: 100% !important; padding-bottom: 100%; }

	.opened-nav header { border-color: #D5C4A3 !important; }

	.menu ul li a { font-size: 36px; }
}

@media (max-width: 767px)
{
	.section-menu .items { flex-wrap: wrap; justify-content: center }
	.section-menu .items .item { width: calc(47% - 15px) !important; margin: 20px 10px 0 10px; }
	.section-menu .items a h4 { font-size: 16px !important; margin-top: 10px; }
}