@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Pacifico&family=Poiret+One&display=swap');

/*Обнуление*/
*{
	padding: 0;
	margin: 0;
	border: 0;
}
*,*:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body{
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;

	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	/*scroll-behavior: smooth;*/
}
input,button,textarea{font-family:inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}


.heading
{
	position: relative;

	width: 100%;
	aspect-ratio: 1678 / 937;

	background-image: url('../img/staik2.0.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
}


.iconAndLang
{
	display: block;
}


.Hello
{
	position: absolute;

	top: 30%;
	left: 3%;

	width: 60%;

	font-family: "Poiret One", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: white;
	font-size: 5vw;
}


.bookingButton
{
	position: absolute;
	font-family: "Poiret One", sans-serif;

	top: 52%;
	left: 4%;

	display: block;
	width: fit-content;

	padding: 0.8vw 2vw;

	border: 1px solid rgba(255, 255, 255, 0.8);
	background: rgba(0, 0, 0, 0.35);

	color: white;

	font-size: 1.3vw;

	opacity: 0;
	transform: translateY(30px);

	animation: bookingAppear 1s ease forwards;
	animation-delay: 0.8s;

	transition:
   	 	background 0.5s ease,
  		color 0.5s ease;
		font-weight: 0.5 ease;
}

.bookingButton:hover
{
	background: rgba(255, 255, 255, 0.349);
	color: rgb(0, 0, 0);
	font-weight: 600;
}

@keyframes bookingAppear
{
	from
	{
		opacity: 0;
		transform: translateY(30px);
	}

	to
	{
		opacity: 1;
		transform: translateY(0);
	}
}




.lang
{
	position: absolute;

	top: 1vw;
	right: 1vw;

	display: flex;
	gap: 3px;

	z-index: 20;
}


.ru, .kz, .en
{
	display: flex;

	width: clamp(45px, 2.2vw, 60px);
	height: clamp(32px, 2vw, 45px);

	box-sizing: border-box;

	color: white;

	border: 1px solid white;

	justify-content: center;
	align-items: center;

	font-size: clamp(12px, 0.9vw, 16px);

	font-weight: 900;

	transition: background 0.2s ease;
}

.ru
{
	border-radius: 30% 0 0 30%;
}

.kz
{
	border-radius: 0;
}

.en
{
	border-radius: 0 30% 30% 0;
}

.ru:hover,
.kz:hover,
.en:hover
{
	background: rgba(255, 255, 255, 0.2);
}



.iconCust
{
	position: fixed;

	top: 1.5vw;
	left: 2vw;

	width: 95vw;
	height: 10vw;

	z-index: 10;
}


/* ЛОГОТИП */

.restaurantLogo
{
	position: absolute;

	top: 0;
	left: 77.5vw;

	width: 5vw;
	height: 5vw;
	z-index: 3;

	transition: left 1.2s ease;
}

.restaurantLogo img
{
	width: 100%;
	height: 100%;

	object-fit: contain;

	filter: brightness(1);
	transition: filter 0.5s ease;

}


.restaurantLogo img.in-menu
{
	filter: brightness(0.25);
}

.restaurantLogo img.in-light-section
{
	filter: brightness(0.25);
}



.panel
{
	position: absolute;

	top: -0.2vw;
	left: 1.5vw;

	width: 75vw;
	height: 5.5vw;

	display: flex;

	overflow: hidden;

	background: rgba(0, 0, 0, 0.65);

	transform: skewX(10deg);

	opacity: 1;

	border: 0.1px solid rgba(255, 255, 255, 0.315);

	transition:
		width 1.2s ease,
		opacity 0.8s ease-in;
}

.panel a
{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;

	font-family: "Poiret One", sans-serif;
	font-weight: 600;
	font-size: 1.5vw;

	white-space: nowrap;

	transform: skewX(0deg);

	padding: 0 3vw;

	border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.panel a:hover, .panel a:active
{
	background: rgba(238, 234, 234, 0.15);
	transition: background 0.3s linear;
}


.panel a:last-child
{
	border-right: none;
}


.iconCust.is-open .panel
{
	width: 0;
	opacity: 0;
}


.iconCust.is-collapsed .panel
{
	width: 0;
	opacity: 0;
}


.iconCust.is-collapsed .restaurantLogo
{
	left: 0;
}







/* Ending "heading", next: "about us" */


.about {
	width: 100%;
}


.aboutBlock {
	width: 100%;
	height: 50vw;

	display: flex;
}


.aboutGray {
	background: #d5d5d5;
}


.aboutWhite {
	background: white;
}


/* ФОТО */

.aboutImage {
	width: 50%;
	height: 100%;

	overflow: hidden;
}


.aboutImage img {
	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* ТЕКСТОВАЯ ЧАСТЬ */

.aboutInfo {
	width: 50%;
	height: 100%;

	display: flex;
	flex-direction: column;

	justify-content: center;
	align-items: center;

	text-align: center;

	padding: 4vw;

	overflow: hidden;
}


/* ЦИФРА */

.aboutNumber {
	font-family: Arial, sans-serif;
	font-size: 15vw;
	font-weight: 900;
	line-height: 0.8;

	opacity: 0;
	transform: translateY(-180px);

	transition:
		opacity 1.2s ease,
		transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.aboutNumber.show {
	opacity: 0.12;
	transform: translateY(0);
}


/* ТЕКСТ */

.aboutText {
	margin-top: -2vw;

	max-width: 30vw;

	font-family: "Poiret One", sans-serif;

	font-size: 2vw;
	line-height: 1.2;

	color: #222;
}









/* Окончание "О нас", начало Меню/*








/* =========================
   МЕНЮ
========================= */

.menu
{
	width: 100%;
	min-height: 55vw;
	padding: 7vw 5vw;

	background: white;
}

.menuTitle
{
	margin-bottom: 5vw;

	font-family: "Poiret One", sans-serif;
	font-size: 5vw;
	font-weight: 400;

	text-align: center;
	color: #222;
}


/* КОНТЕЙНЕР КАТЕГОРИЙ */

.menuCategories
{
	position: relative;

	width: 100%;
	height: 40vw;
}


/* КНОПКА */

.menuCategory
{
	position: absolute;

	width: 24vw;
	height: 13vw;

	padding: 0;

	overflow: hidden;

	border: 0vw solid black;

	background: none;

	cursor: pointer;

	border-radius: 5%;
}


/* ФОТО */

.menuCategoryImage
{
	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background-image: url("#");
	background-size: cover;
	background-position: center;

	transition:
		transform 0.6s ease,
		filter 0.6s ease;
}


/* ЗАТЕМНЕНИЕ ФОТО */

.menuCategory::after
{
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: rgba(0, 0, 0, 0.25);

	transition: background 0.4s ease;

	overflow: hidden;
}


/* НАЗВАНИЕ */

.menuCategory span
{
	position: absolute;

	left: 1.5vw;
	bottom: 1.2vw;

	z-index: 2;

	font-family: "Poiret One", sans-serif;
	font-size: 2.2vw;
	font-weight: 600;

	color: white;

	transition:
		transform 0.4s ease;
}


/* НАВЕДЕНИЕ */

.menuCategory:hover .menuCategoryImage
{
	transform: scale(1.06);
}

.menuCategory:hover::after
{
	background: rgba(0, 0, 0, 0.45);
}

.menuCategory:hover span
{
	transform: translateX(0.5vw);
}


/* =========================
   РАСПОЛОЖЕНИЕ
========================= */

/* САЛАТЫ */

.menuCategory.salads
{
	top: 0;
	left: 3vw;
}


/* ГОРЯЧЕЕ */

.menuCategory.hot
{
	top: 7vw;
	left: 32.5vw;
}


/* ГАРНИРЫ */

.menuCategory.garnish
{
	top: 21vw;
	left: 8vw;
}


/* ВИНО */

.menuCategory.wine
{
	top: 21vw;
	right: 8vw;
}


/* ДЕСЕРТЫ */

.menuCategory.desserts
{
	top: 0;
	right: 3vw;
}


/* =========================
   ЗАТЕМНЕНИЕ
========================= */

.menuOverlay
{
	position: fixed;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	z-index: 100;

	display: flex;

	align-items: center;
	justify-content: center;

	background: rgba(0, 0, 0, 0.75);

	opacity: 0;
	visibility: hidden;

	transition:
		opacity 0.4s ease,
		visibility 0.4s ease;
}


/* ОТКРЫТО */

.menuOverlay.active
{
	opacity: 1;
	visibility: visible;
}


/* =========================
   ОКНО
========================= */

.menuWindow
{
	position: relative;

	width: 60vw;
	max-height: 75vh;

	padding: 4vw;

	overflow-y: auto;

	background: #f5f5f5;

	transform: translateY(40px);

	transition: transform 0.5s ease;
}

.menuOverlay.active .menuWindow
{
	transform: translateY(0);
}


/* ЗАГОЛОВОК */

.menuWindowTitle
{
	margin-bottom: 3vw;

	font-family: "Poiret One", sans-serif;
	font-size: 4vw;
	font-weight: 400;

	text-align: center;
}


/* КНОПКА ЗАКРЫТИЯ */

.menuClose
{
	position: absolute;

	top: 1vw;
	right: 1.5vw;

	width: 3vw;
	height: 3vw;

	background: none;

	font-size: 3vw;
	font-weight: 200;

	color: #222;

	cursor: pointer;
}


/* =========================
   БЛЮДА
========================= */

.menuItem
{
	display: flex;

	justify-content: space-between;
	align-items: baseline;

	padding: 1.2vw 0;

	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.menuItemInfo
{
	padding-right: 2vw;
}

.menuItemName
{
	font-family: "Poiret One", sans-serif;
	font-size: 1.8vw;
	font-weight: 600;

	color: #222;
}

.menuItemDescription
{
	margin-top: 0.5vw;

	font-family: Arial, sans-serif;
	font-size: 0.9vw;

	line-height: 1.4;

	color: #666;
}

.menuItemPrice
{
	flex-shrink: 0;

	font-family: "Poiret One", sans-serif;
	font-size: 1.2vw;
	font-weight: 900;

	color: #222;
}


.menuCategory.salads .menuCategoryImage
{
	background-image: url("../img/menu/saladas.png");
}

.menuCategory.hot .menuCategoryImage
{
	background-image: url("../img/menu/staik.png");
}

.menuCategory.desserts .menuCategoryImage
{
	background-image: url('../img/menu/tiramisu.png');
}

.menuCategory.garnish .menuCategoryImage
{
	background-image: url('../img/menu/pasta.png');
}

.menuCategory.wine .menuCategoryImage
{
	background-image: url('../img/menu/wine.png');
}







/* КОНЕЦ МЕНЮ | НАЧАЛО БРОНИМВАРОНИЯ */








/* =========================
   БРОНИРОВАНИЕ
========================= */





.booking
{
	width: 100%;
	min-height: 65vw;

	padding: 6vw 8vw;

	background: #d5d5d5;
}


.bookingTitle
{
	margin-bottom: 4vw;

	font-family: "Poiret One", sans-serif;
	font-size: 5vw;
	font-weight: 400;

	text-align: center;
	color: #222;
}

.bookingSubtitle
{
	margin-top: 0vw;
	margin-bottom: 1.5vw;

	font-family: "Poiret One", sans-serif;
	font-size: 2.3vw;
	text-align: center;

	color: #666;
}






.restaurantPlan
{
	position: relative;
	width: 70vw;
	height: 30vw;
	/* aspect-ratio: 1 / 1;*/
	margin: 0 auto;

	background: #f5f5f5;
	border: 2px solid #222;
}





/* ТУАЛЕТЫ */

.toilet
{
	position: absolute;

	top: 90%;
	left: 1%;

	width: 15%;
	height: 3vw;

	background: #e5e5e5;

	border: 1px solid #222;

	display: flex;
	align-items: center;
	justify-content: center;

	font-family: "Poiret One", sans-serif;
	font-size: 2.2vw;

	border-radius: 0.5vw 0.5vw 0 0;
}


/* БАР */

.bar
{
	position: absolute;

	top: 28%;
	left: 0%;

	width: 4.3vw;
	height: 12vw;

	background: #222;

	color: white;

	display: flex;
	align-items: center;
	justify-content: center;

	font-family: "Poiret One", sans-serif;
	font-size: 2.5vw;

	border: 1px solid black;
	border-radius: 0 0.5vw 0.5vw 0;
}


/* ВЫХОД */

.exit
{
	position: absolute;

	bottom: -2px;
	left: 17%;

	width: 15%;
	height: 2.5vw;

	background: #d5d5d5;

	border-left: 2px solid #222;
	border-right: 2px solid #222;

	display: flex;
	align-items: center;
	justify-content: center;

	font-family: "Poiret One", sans-serif;
	font-size: 2vw;
}




.table
{
	position: absolute;

	width: 6vw;
	height: 3vw;

	display: flex;
	align-items: center;
	justify-content: center;

	background: #d0d0d0;

	border: 1px solid #222;

	font-family: Arial, sans-serif;
	font-size: 0.8vw;
	color: #222;

	cursor: pointer;

	transition:
		transform 0.5s ease,
		background 0.5s ease;


	border-radius: 5%;
}


.table:hover
{
	transform: scale(1.08);

	background: #222;
	color: white;

}


.table2
{
	top: 2%;
	left: 12%;
}

.table4
{
	top: 2%;
	left:45%;

	width: 3vw;
	height: 3vw;
}

.table6
{
	top: 2%;
	right: 10%;
}

.table8
{
	top: 22%;
	left: 28%;

	width: 3vw;
	height: 3vw;
}

.table10
{
	top: 22%;
	right: 28%;
}

.table12
{
	top: 42%;
	left: 45%;
}

.table14
{
	top: 42%;
	right: 10%;

	width: 3vw;
	height: 3vw;
}

.table18
{
	bottom: 32%;
	right: 28%;
}

.table16
{
	bottom: 32%;
	left: 28%;
}
.table22
{
	bottom: 12%;
	right: 10%;

	width: 3vw;
	height: 3vw;
}
.table20
{
	bottom: 12%;
	left: 45%;
}





/* =========================
   ОКНО БРОНИРОВАНИЯ
========================= */

.bookingOverlay
{
	position: fixed;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	z-index: 100;

	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(0, 0, 0, 0.75);

	opacity: 0;
	visibility: hidden;

	transition:
		opacity 0.4s ease,
		visibility 0.4s ease;
}


.bookingOverlay.active
{
	opacity: 1;
	visibility: visible;
}


/* ОКНО */

.bookingWindow
{
	position: relative;

	width: 45vw;
	max-width: 700px;

	padding: 4vw;

	background: #f5f5f5;

	transform: translateY(40px);

	transition: transform 0.5s ease;
}


.bookingOverlay.active .bookingWindow
{
	transform: translateY(0);
}


/* ЗАГОЛОВОК */

.bookingWindowTitle
{
	margin-bottom: 1vw;

	font-family: "Poiret One", sans-serif;
	font-size: 3vw;
	font-weight: 400;

	text-align: center;

	color: #222;
}


/* ВЫБРАННЫЙ СТОЛИК */

.selectedTable
{
	margin-bottom: 2.5vw;

	font-family: Arial, sans-serif;

	font-size: 1vw;

	text-align: center;

	color: #666;
}

.selectedTableNumber
{
	color: #222;
	font-weight: 600;
}


/* ПОЛЯ */

.bookingFields
{
	display: flex;
	flex-direction: column;

	gap: 1.2vw;
}


.bookingRow
{
	display: flex;

	gap: 1.2vw;
}


.bookingField
{
	flex: 1;
}


.bookingField label
{
	display: block;

	margin-bottom: 0.5vw;

	font-family: "Poiret One", sans-serif;
	font-size: 1.1vw;
	font-weight: 600;

	color: #444444;
}


.bookingField input
{
	width: 100%;

	padding: 0.7vw 0;

	background: transparent;

	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);

	font-family: Arial, sans-serif;
	font-size: 1vw;

	color: #222;
}


.bookingField input:focus
{
	border-bottom-color: #222;
}


/* КНОПКА */

.bookingSubmit
{
	display: block;

	width: 100%;

	margin-top: 2.5vw;

	padding: 1vw;

	background: #222;

	color: white;

	font-family: "Poiret One", sans-serif;
	font-size: 1.2vw;

	border: none;

	transition:
		background 0.3s ease,
		transform 0.3s ease;
}


.bookingSubmit:hover
{
	background: #444444;

	transform: translateY(-2px);
}


/* ЗАКРЫТИЕ */

.bookingClose
{
	position: absolute;

	top: 1vw;
	right: 1.5vw;

	width: 2.5vw;
	height: 2.5vw;

	background: none;

	font-size: 2.5vw;
	font-weight: 200;

	color: #222;

	cursor: pointer;
}



.bookingComment textarea
{
	width: 100%;
	height: 5vw;

	padding: 0.7vw 0;

	resize: none;

	background: transparent;

	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);

	font-family: Arial, sans-serif;
	font-size: 1vw;

	color: #222;
}


.bookingComment textarea:focus
{
	outline: none;

	border-bottom-color: #222;
}





.bookingSubmit.success
{
	background: #222;

	animation: bookingSuccess 0.6s ease;
}


@keyframes bookingSuccess
{
	0%
	{
		transform: scale(1);
	}

	40%
	{
		transform: scale(0.97);
	}

	70%
	{
		transform: scale(1.03);
	}

	100%
	{
		transform: scale(1);
	}
}



/* Ошибка бронирования (не хватает данных) */

.bookingError
{
	position: fixed;
	right: 2vw;
	bottom: 2vw;

	padding: 1vw 1.5vw;

	background: #b3261e;
	color: white;

	font-family: Arial, sans-serif;
	font-size: 1vw;

	opacity: 0;
	transform: translateY(20px);

	pointer-events: none;

	transition:
		opacity 0.3s ease,
		transform 0.3s ease;

	border-radius: 0.5vw;

	z-index: 200;
}

.bookingError.show
{
	opacity: 0.8;
	transform: translateY(0);
}







/* Конец брони, начало контактов */






.contacts
{
	margin-top: 15vw;

	position: relative;
	width: 100%;
	height: 40vw;

	display: flex;

	background: #f5f5f52d;

	
}

.contactsInfo
{
	width: 33.333%;
	height: 40vw;
	padding: 5vw 4vw;

	display: flex;
	flex-direction: column;
	justify-content: center;

	background: white;
}

.contactsTitle
{
	margin-bottom: 4vw;

	font-family: "Poiret One", sans-serif;
	font-size: 4vw;
	font-weight: 400;

	color: #222;
}

.contactsBlock
{
	margin-bottom: 2vw;
}

.contactsLabel
{
	margin-bottom: 0.5vw;

	font-family: Arial, sans-serif;
	font-size: 0.8vw;
	font-weight: 600;

	color: #777;
	letter-spacing: 0.08em;
}

.contactsText
{
	font-family: "Poiret One", sans-serif;
	font-size: 1.5vw;
	line-height: 1.3;

	color: #222;
}

.contactsMessage
{
	margin-top: 2vw;

	font-family: "Poiret One", sans-serif;
	font-size: 1.3vw;

	color: #555;

	font-weight: 600;
}


.contactsMap
{
	width: 66.667%;
	height: 42vw;
	margin-top: -1vw;
	

	display: flex;
	align-items: center;
	justify-content: center;

	overflow: hidden;
	background: #111;
}

.mapImage
{
	position: relative;

	width: 99%;
	height: 99%;

	display: block;

	overflow: hidden;

	cursor: pointer;
}

.mapImage::after
{
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: rgba(0, 0, 0, 0);

	pointer-events: none;

	transition:
		background 0.5s ease;
}

.mapImage img
{
	width: 100%;
	height: 100%;

	object-fit: cover;

	transform: scale(1);

	transition:
		transform 0.7s ease;
}

.mapImage:hover img
{
	transform: scale(1.08);
}




/* подножка */




.footer
{
	width: 100%;
	height: 13vw;

	margin-top: 10vw;
	margin-bottom: -6vw;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	position: relative;

	background: #111;
	color: white;
}

.footerInitials
{
	margin-left: 2vw;
	font-family: 'Times New Roman', Times, serif;
	font-size: 3vw;
	font-weight: 300;
	letter-spacing: 0.15em;

	opacity: 0.9;
}

.footerLine
{
	width: 5vw;
	height: 1px;

	margin: 1vw 0;

	background: rgba(255, 255, 255, 0.5);
}

.footerRole
{
	font-family: Arial, sans-serif;
	font-size: 0.7vw;
	letter-spacing: 0.25em;

	color: rgba(255, 255, 255, 0.6);
}

.footerContacts
{
	display: flex;
	align-items: center;
	gap: 0.7vw;

	margin-top: 1.5vw;

	font-family: Arial, sans-serif;
	font-size: 0.8vw;
}

.footerContacts a
{
	color: rgba(255, 255, 255, 0.75);

	transition: color 0.3s ease;
}

.footerContacts a:hover
{
	color: white;
}

.footerContacts span
{
	color: rgba(255, 255, 255, 0.3);
}

.footerYear
{
	position: absolute;
	right: 2vw;
	bottom: 1.5vw;

	font-family: Arial, sans-serif;
	font-size: 0.65vw;

	color: rgba(255, 255, 255, 0.35);
}


html[lang="kk"] *
{
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
}


html[lang="kk"] .contactsTitle
{
	font-size: 3vw;
}

html[lang="kk"] .table span
{
	font-family: Arial, sans-serif;
}