
body{position: relative; font: 16px/20px 'Mulish'; height: 100%; min-width: 340px; color: #3b261f; font-weight: 400;
color: #000;}
#container{min-height: 100%; padding-bottom: 360px; position: relative;}
#header{height: 130px; z-index: 10; position: relative;}
#footer{position: absolute; left: 0; bottom: 0; width: 100%; height: 360px; background: #000; color: #fff;}
#overlay{background: #333; opacity: 0.7; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%;
display: none;}
h1{font-size: 40px; line-height: 50px; font-weight: 900; text-transform: uppercase; text-align: center;
margin-bottom: 30px;}
div.inner{max-width: 1600px; margin: 0 auto;}
div.default-center{max-width: 800px; margin: 0 auto; position: relative;}
div.default-center.regular{max-width: 1060px; min-height: 36vw;}
.button{height: 48px; display: flex; justify-content: center; align-items: center; border: none;
background: #55bdbc; border-radius: 4px; cursor: pointer; padding: 0 20px; font-size: 18px; color: #fff;
transition: all 0.5s ease; font-weight: 900; line-height: 25px; font-family: 'Mulish';}
.button:hover{background-color: #339f9e !important;}
.button:active{background-color: #228988 !important;}
.button.red{background: #90071f;}
.button.red:hover, .button.red:active{background-color: #d02429 !important;}
.button.red.ok{width: 240px; margin: 50px auto 0 auto;}
.button.last{margin: 0  auto 40px auto; width: fit-content;}
button:disabled{cursor: default; opacity: 0.35;}
button:disabled:hover{background: #e7f2d4 !important;}
.button.light{background: none; border: 2px solid #f4879b;}
.button.light:hover{border-color: #d02429 !important; background: none !important;}
button.in-footer:hover{background: none !important;}

.hvr-underline-from-center{overflow: visible;}
.hvr-underline-from-center::before{background: #90071f; height: 2px; bottom: -1px;}
.light.hvr-bounce-to-right::before{background: #d02429;}
.in-footer.hvr-bounce-to-right::before{background: #55bdbc;}

#scroll-up-button{width: 50px; height: 50px; position: fixed; bottom: 30px; right: 3%; z-index: 900; cursor: pointer;
background: url(../images/scroll-up.svg) no-repeat center; background-size: contain; opacity: 0.7; display: none}

@supports (not (-ms-ime-align:auto)) 
{
        form input + label.hint{transition: all 0.3s ease-out; transform: translate(0, -2.41rem);
        display: block; padding: 0 16px; pointer-events: none; color: #aaa; position: absolute;}
        form input:focus + label.hint, form input:not(:placeholder-shown) + label.hint{color: #3b261f; 
        transform: translate(0, -5.1rem); color: #000; font-size: 16px;}
}

/* Header */
#header div.inner{padding: 20px 0 0 0; display: flex; justify-content: space-between;}
#header div.inner div.left{display: flex; justify-content: space-between; gap: 30px;}
#header div.inner div.left section{display: flex; flex-direction: column; justify-content: center;}
#header div.inner div.left section div.title{text-transform: uppercase; padding-left: 25px;
margin-bottom: 1px; font-weight: 700;}
#header div.inner div.left section div.title.phone{background: url(../images/icons/phone.svg) left center no-repeat;}
#header div.inner div.left section div.title.caraoke{background: url(../images/icons/microphone.svg) left center no-repeat;}
#header div.inner div.left section p{color: #90071f; font-size: 14px; margin-left: 25px;}
#header div.inner div.left section a{color: #000;}
#header div.inner div.left section a.hvr-bounce-to-right{position: relative; padding-bottom: 2px;}
#header div.inner div.left section a.hvr-bounce-to-right::before{position: absolute; bottom: 0; top: auto;
height: 2px; background: #90071f;}

#header div.inner div.right{height: 48px; display: flex; align-items: center; align-self: center;}
#header div.inner div.right button.login{margin-left: 10px; width: 144px; padding-left: 60px; padding-right: 33px;
background: #55bdbc url(../images/icons/user.svg) left 25px center no-repeat;}

/* Main categories menu */
div.main-menu{height: 60px; background: #90071f; /*position: fixed; top: 0; left: 0;*/ width: 100%; z-index: 100;}
div.main-menu div.inner{display: flex; justify-content: space-between; height: 100%; align-items: center;}
div.main-menu div.categories-menu{display: flex; width: calc(100% - 220px); height: 100%; align-items: center;}
div.main-menu div.categories-menu > span{width: 24px; height: 24px; cursor: pointer; visibility: hidden;}
div.main-menu div.categories-menu span.menu-scroll-left{background: url(../images/icons/chevron-left.svg) center no-repeat;}
div.main-menu div.categories-menu span.menu-scroll-right{background: url(../images/icons/chevron-right.svg) center no-repeat;}
div.main-menu ul.categories{display: flex; gap: 10px; margin: 0 7px; overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none; scrollbar-width: none; height: 100%;}
div.main-menu ul.categories::-webkit-scrollbar{display: none;}
div.main-menu ul.categories li{height: 100%; display: flex;}
div.main-menu ul.categories li a{color: #fff; white-space: nowrap; transition: all 0.5s ease; font-weight: 700;
height: 100%; display: flex; align-items: center; padding: 0 10px;}
div.main-menu ul.categories li a:hover{background-color: #d02429;}
div.main-menu div.icons{display: flex; height: 100%; align-items: center; width: 160px; background: #750418;
padding: 0 10px 0 20px;}
div.main-menu div.icons a.cart{height: 100%; background: url(../images/icons/cart.svg) left center no-repeat; 
position: relative; padding-left: 45px; display: flex; align-items: center;}
div.main-menu div.icons #cart-number{background: #fff; color: #90071f; height: 16px; font-size: 9px; padding: 0 6px;
border-radius: 8px; position: absolute; top: 14px; left: 16px; display: flex; align-items: center;}
div.main-menu div.icons #cart-total{color: #fff; font-weight: 700;}

div.main-menu.fixed{position: fixed; top: 0; left: 0;}
#container:has(div.main-menu.fixed){padding-top: 60px;}
#container:has(.photo-gallery){overflow-x: hidden;}

/* Mobile menu */
#mobile-footer{position: fixed; width: 100%; left: 0; bottom: 0; z-index: 30; height: 78px; display: flex; flex-direction: column;
justify-content: space-between; background: url(../images/tabbar.svg) bottom -16px center no-repeat; display: none;}
#mobile-footer a.cart-button{width: 48px; height: 48px; align-self: center; background: url(../images/icons/cart-white.svg) center no-repeat;
position: relative; margin-top: 5px;}
#mobile-footer a.cart-button span.cart-number{background: #90071f; color: #fff; height: 16px; font-size: 9px; padding: 0 6px;
border-radius: 8px; position: absolute; top: 6px; left: 22px; display: flex; align-items: center;}
#mobile-footer div.bottom-section{display: flex; justify-content: space-between; width: 100%; height: 60px;
align-items: center; padding: 0 16%;}
#mobile-menu-button{background: url(../images/icons/menu.svg) center no-repeat; width: 48px; height: 56px; cursor: pointer;
display: inline-flex;}
#mobile-menu-client{width: 20px; height: 20px; cursor: pointer; background: url(../images/icons/user-white.svg) center no-repeat;
display: inline-flex; margin-bottom: 2px;}
#mobile-footer span.cart-total{color: #fff; font-size: 12px; align-self: flex-end; margin-bottom: 6px; line-height: 12px;}

#mobile-menu{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: none;
padding: 30px 0; background: #8d002a url(../images/menu-back.svg) bottom right no-repeat; overflow-y: auto; 
color: #fff;}
span.mobile-menu-close{width: 50px; height: 50px; cursor: pointer; background: url(../images/icons/close-white.svg) no-repeat center; 
display: inline-block; position: absolute; right: 6%; top:10%;}
#mobile-menu div.wrapper{padding: 10.3% 25% 5% 12.8%; display: flex; justify-content: space-between;}
#mobile-menu div.wrapper ul.menu{display: flex; flex-direction: column;}
#mobile-menu div.wrapper ul.menu li{margin-bottom: 40px; position: relative; width: fit-content;}
#mobile-menu div.wrapper ul.menu li::before{position: absolute; top: auto; bottom: 0; height: 2px;
background: #a51b33;}
#mobile-menu div.wrapper ul.menu li.main{transition: all 0.4s ease;}
#mobile-menu div.wrapper ul.menu li.main.invisible{margin-left: -70px;}
#mobile-menu div.wrapper ul.menu li.small{color: #f4878b; margin-bottom: 20px;}
#mobile-menu div.wrapper ul.menu li.small:first-child{margin-bottom: 40px; font-size: 18px;}
#mobile-menu div.wrapper ul.menu li a{display: inline-block; color: #fff; font-size: 40px; line-height: 56px; 
font-weight: 700;}
#mobile-menu div.wrapper ul.menu li.small a{color: #f4878b; font-size: 18px; line-height: 25px;}
#mobile-menu div.wrapper div.buttons button.login{padding-left: 45px; 
background: #55bdbc url(../images/icons/user.svg) left 37px center no-repeat;}
#mobile-menu div.wrapper div.buttons button{margin-bottom: 20px; width: 250px; font-weight: 700; height: 56px;}
#mobile-menu div.wrapper div.buttons div.data{padding-top: 20px; display: flex; flex-direction: column; gap: 16px;
font-weight: 700;}
#mobile-menu div.wrapper div.buttons div.data a{color: #fff;}
#mobile-menu div.wrapper div.socials a{border-color: #fff;}

/* Breadcrumbs */
div.breadcrumbs{padding: 30px 0 20px 0; font-size: 12px; color: #989e9d; line-height: 140%; width: 100%;
text-align: center;}
div.breadcrumbs a{color: #a5a5a4;}
div.breadcrumbs a::after{content: '/'; margin: 0 6px 0 6px;}

/* Main banner */
#main-banner{display: flex; z-index: 1; margin: -130px 0 20px 0; position: relative;}
#main-banner div.banner{width: 50%;}
#main-banner div.banner img{display: block; width: 100%;}
#main-banner > div.text{width: 50%; padding-left: 11.57%; padding-top: 16.4%;}
#main-banner > div.text h1{margin-bottom: 25px; font-size: 80px; line-height: 80px; font-weight: 900;
text-transform: none; text-align: left;}
#main-banner > div.text p{font-size: 30px; line-height: 42px; color: #90071f; margin-bottom: 30px;
font-weight: 900;}
#main-banner > div.text a.delivery{width: 280px; padding-left: 65px; padding-right: 0; height: 56px;
background: #55bdbc url(../images/icons/take-away.svg?v2) left 30px center no-repeat; font-size: 20px;
justify-content: flex-start;}
#main-banner > div.text > *{display: none;}
#main-banner .swiper .swiper-notification{display: none !important;}
#main-banner .swiper-arrows > div::after{content: '';}
#main-banner .swiper-arrows div.swiper-button-prev{background: url(../images/icons/prev.svg) no-repeat;}
#main-banner .swiper-arrows div.swiper-button-next{background: url(../images/icons/next.svg) no-repeat;}
#main-banner .swiper-arrows > div{width: 45px; height: 45px; background-size: contain !important;}

/* Catalog and products */
div.catalog{padding-top: 80px;}
div.catalog section{margin-bottom: 50px;}
div.catalog section:last-child{margin: 0;}
div.catalog div.title, div.catalog h1, div.catalog h2{text-align: center; margin-bottom: 25px; font-size: 40px;
line-height: 50px; font-weight: 900;}
div.catalog div.products{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
div.catalog div.product{margin-bottom: 30px; width: 385px; height: 610px; display: flex; flex-direction: column;
justify-content: flex-start; padding-bottom: 20px; border: 2px solid #ddd; border-radius: 4px;
transition: all 1s ease;}
div.catalog div.product:hover{border-color: #90071f;}
div.catalog div.product.empty{height: 0; margin: 0; border: none;}
div.catalog div.product div.image{margin-bottom: 20px;}
div.catalog div.product div.image img{display: block; max-width: 100%; transition: all 1s ease;
border-top-left-radius: 4px; border-top-right-radius: 4px;}
div.catalog div.product:hover div.image img{transform: scale(1.1)}
div.catalog div.product div.name{height: 47px; font-size: 18px; line-height: 22px; font-weight: 700;}
div.catalog div.product div.description{font-size: 16px; line-height: 22px; height: 40px; margin-bottom: 5px;}
div.catalog div.product select{width: calc(100% - 40px); border-radius: 8px; border: 1px solid #a5a5a4; padding: 12px 15px; 
margin-bottom: 10px; color: #96908e; appearance: none; 
background: #fff url(../images/icons/chevron-down.svg) right 15px center no-repeat;}

div.bottom{margin-top: auto; display: flex; justify-content: space-between; flex-wrap: wrap;
align-items: center; position: relative;}
div.bottom div.price{font-size: 18px; line-height: 25px; color: #90071f; font-weight: 700;}
div.bottom div.price span{color: #000; font-size: 16px; line-height: 22px; font-weight: 400;}
div.bottom div.button.to-cart{width: 134px; padding: 0; border-radius: 8px; font-size: 16px; overflow: hidden;}
div.bottom div.button.to-cart:hover{background: #90071f !important;}
div.bottom div.button.to-cart.hvr-bounce-to-right::before{background-color: #d02429;}
div.bottom div.button.not-available{width: 100%; background: #a5a5a4; cursor: default;
border-radius: 8px;}
div.buttons:has(.not-available){width: 100%;}

div.quantity{width: 134px; display: flex; justify-content: space-between; flex-shrink: 0;
background: #55bdbc; height: 48px; align-items: center; border-radius: 8px; padding: 0 10px;}
div.quantity span.number{font-size: 16px; font-weight: 900; color: #fff;}
div.quantity span.plus{cursor: pointer; height: 100%; width: 40px; 
background: url(../images/icons/plus.svg) center no-repeat;}
div.quantity span.minus{cursor: pointer; height: 100%; width: 40px; 
background: url(../images/icons/minus.svg) center no-repeat;}

div.warning{font-size: 14px; line-height: 150%; width: 100%; position: absolute; top: 48px;}
div.warning span.message span{color: #90071f; margin-right: 5px;}
div.warning span.address{padding-left: 17px; margin-right: 5px; white-space: nowrap;
background: url(../images/icons/map-pin-red.svg) left no-repeat;}
div.catalog div.product > *{margin-left: 20px; margin-right: 20px;}
div.catalog div.product > div.image{margin: 0 0 17px 0; overflow: hidden;}
div.catalog div.product:hover div.name{color: #90071f;}

/* Modal product */
#modal-product{padding: 30px; background: #fff; position: fixed; z-index: 110; width: 900px; top: 70px; display: none;
left: calc((100% - 900px) / 2); border-radius: 8px;}
#modal-product span.close{width: 44px; height: 44px; cursor: pointer;  background: url(../images/icons/close.svg) no-repeat center; 
display: inline-block; position: absolute; right: 12px; top: 12px; transition: all 1s ease;}
#modal-product span.close:hover{transform: rotate(360deg);}
#modal-product span.navigation{width: 50px; height: 50px; cursor: pointer; display: inline-block; position: absolute;
bottom: calc(50% - 25px);}
#modal-product span.navigation.prev{background: url(../images/icons/prev-black.svg) no-repeat center; left: -70px;}
#modal-product span.navigation.next{background: url(../images/icons/next-black.svg) no-repeat center; right: -70px;}
#modal-product div.wrapper{display: flex; justify-content: space-between;}
#modal-product div.wrapper div.image img{border-radius: 4px;}
#modal-product div.content{padding: 27px 0 0 0; width: 410px;}
#modal-product div.content div.name, #modal-product div.content h3{font: 26px/32px 'Mulish'; margin-bottom: 20px;
font-weight: 900;}
#modal-product div.content div.description{margin-bottom: 20px; font-size: 18px; line-height: 25px;}
#modal-product div.content select, #jobs-menu-select{width: 100%; border-radius: 4px; border: 1px solid #99a4af; 
padding: 10px 15px; margin-bottom: 20px; color: #96908e; appearance: none;  height: 56px;
background: #fff url(../images/icons/chevron-down.svg) right 15px center no-repeat;}
#modal-product div.content div.bottom{margin-bottom: 17px;}
#modal-product div.warning{position: static; background: #f6d5d7; border-radius: 12px; margin-bottom: 20px;
padding: 10px;}
#modal-product div.text{font-size: 14px; line-height: 140%;}
#modal-product div.text h4{font-size: 18px; margin-bottom: 10px;}

/* Cart */
#container.cart{padding-bottom: 80px;}
#container.cart #header{margin-bottom: 50px;}
#container.cart #header div.inner{align-items: center;}
#container.cart #header div.inner a.phone-cart{color: #000; font-weight: 700; padding-left: 25px;
background: url(../images/icons/phone.svg) left center no-repeat;}
#container.cart #footer{height: 80px; background: #90071f; color: #fff;}
#container.cart #footer div.inner{padding: 10px; display: flex; justify-content: space-between; align-items: center;
height: 100%; max-width: 800px; flex-direction: row; margin: 0 auto;}
#container.cart div.delivery-closed{text-align: center; font-size: 18px; line-height: 25px; color: #90071f;
margin-bottom: 20px;}

#container.cart h1 a{width: 28px; height: 28px; background: url(../images/icons/chevron-left-blue.svg) no-repeat center; display: inline-block;
margin-right: 14px;}
#container.cart div.cart-wrapper{width: 790px; margin: 0 auto 60px auto; position: relative;}
#container.cart div.cart-wrapper a.logo{position: absolute; left: -260px; top: -160px;}
#container.cart div.cart-wrapper a.logo img{display: block; max-width: 100%;}

div.cart-products > div{display: flex; width: 100%; padding: 10px 10px 10px 0; border-bottom: 1px solid #ddd; min-height: 130px;
align-items: center;}
div.cart-products div.image{margin-right: 20px; width: 90px; flex-shrink: 0;}
div.cart-products div.image img{display: block; max-width: 100%;}
div.cart-products div.data{flex-grow: 1; display: flex; flex-direction: column; gap: 8px; padding-right: 4%;}
div.cart-products div.data div.name{font-size: 18px; font-weight: 700;}
div.cart-products div.data div.attribute{color: #000; font-size: 16px;}
div.cart-products div.data div.price{font-weight: 700; color: #90071f; font-size: 18px;}
div.cart-products div.total{width: 80px; margin: 0 20px; font-size: 18px; font-weight: 700; white-space: nowrap;
flex-shrink: 0;}
div.cart-products div.delete{display: flex; width: 16px;}
div.cart-products div.delete span.remove{width: 16px; height: 16px; cursor: pointer;
background: url(../images/icons/delete-red.svg) no-repeat;}
div.cart-products #gift-product div.quantity{background: none; justify-content: center;}

div.gifts-section{padding: 60px; display: flex; justify-content: center; background: #90071f; flex-direction: column;
align-items: center; gap: 30px; margin-bottom: 90px;}
div.gifts-section div.title{font-size: 32px; color: #fff; font-weight: 900;}
div.gifts-section div.subtitle{font-size: 18px; color: #fff; font-weight: 700;}
div.gifts-section div.gifts{display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; max-width: 620px;}
div.gifts-section div.gifts > div{width: 300px; height: 85px; display: flex; align-items: flex-start; flex-direction: column;
justify-content: center; border: 2px solid #f48798; border-radius: 4px; padding: 20px; color: #f48798;}
div.gifts-section div.gifts > div.active{border-color: #d02429; cursor: pointer;}
div.gifts-section div.gifts > div.active.selected{background: #d02429;}
div.gifts-section div.gifts > div.active.selected p{color: #fff;}
div.gifts-section div.gifts > div > div{font-size: 18px; font-weight: 700; margin-bottom: 3px;}
div.gifts-section div.gifts > div > p{font-size: 16px;}
div.gifts-section div.gifts > div.active > div{color: #fff;}
div.gifts-section form{display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: 400px;}
div.gifts-section form input{padding: 0 16px; border: 1px solid #99a4af; border-radius: 4px; height: 48px;}
div.gifts-section form div.message{color: #557125; width: 100%; text-align: center; background: #fff;
border-radius: 4px; padding: 7px 10px;}
div.gifts-section form div.message.fail{color: #90071f;}

div.additional div.subtitle{font-size: 32px; font-weight: 900; text-align: center; margin-bottom: 30px;}
div.additional .swiper, div.additional .swiper-arrows{width: 790px; margin: 0 auto;}
div.additional .swiper-arrows{position: relative;}
div.additional .swiper .swiper-slide{display: flex; flex-direction: column; width: 190px; height: 320px; align-items: center;}
div.additional .swiper .swiper-slide div.image{margin-bottom: 10px; display: block; overflow: hidden;}
div.additional .swiper .swiper-slide img{max-width: 100%; transition: all 0.8s ease; border-radius: 4px;
display: block;}
div.additional .swiper .swiper-slide:hover div.image img{transform: scale(1.1);}
div.additional .swiper .swiper-slide div.name{text-align: center; line-height: 18px;}
div.additional .swiper .swiper-slide button{width: 133px; padding: 0; margin-top: auto;}
div.additional .swiper-button-prev, div.additional .swiper-button-next{width: 50px; height: 50px; cursor: pointer;
top: -200px;}
div.additional .swiper-button-prev::after, div.additional .swiper-button-next::after{content: '';}
div.additional .swiper-button-prev{background: url(../images/icons/prev.svg) center no-repeat; left: -70px;}
div.additional .swiper-button-next{background: url(../images/icons/next.svg) center no-repeat; right: -70px;}

#container.cart #footer{position: fixed; z-index: 90;}
#container:has(.inner.checkout){padding-bottom: 0 !important;}
#container:has(.inner.checkout) #footer{height: 160px; position: static;}
#container:has(.inner.checkout) #footer div.inner{max-width: 630px; padding: 20px 0; height: 160px; align-items: flex-end;}
#container.cart #footer .total{font-size: 26px; font-weight: 900 !important;}
#container.cart #footer .button{border-radius: 4px; padding: 0 65px 0 30px; color: #fff; 
font-size: 18px; font-weight: 700; background: #55bdbc url(../images/icons/arrow-right.svg) right 25px center no-repeat; 
display: flex; align-items: center; height: 56px;}
#container.cart #footer .cart-totals{color: #fff; display: grid; grid-template-columns: 270px 80px; gap: 10px 30px;
font-size: 18px;}
#container.cart #footer .cart-totals div{font-weight: 700;}
#container.cart #footer .cart-totals span{white-space: nowrap;}
#container.cart #footer .cart-totals .green{color: #f4878b;}
#container.cart #footer .cart-totals .total{color: #fff;}

/* Checkout */
#content div.inner.checkout, #container div.inner.checkout div.cart-wrapper{max-width: 630px; margin-bottom: 20px;}
div.checkout-form-block div.section{font-size: 26px; margin-bottom: 20px; text-align: center; font-weight: 900;}
div.checkout-form-block form > div.field{margin-bottom: 33px;}
div.checkout-form-block form > div.field input[type='text'], div.checkout-form-block form > div.field textarea,
div.checkout-form-block form > div.field input[type='email'], div.checkout-form-block form > div.field input[type='tel'],
div.checkout-form-block form > div.field textarea{border: 1px solid #a5a5a4; width: 100%; padding: 12px 16px;
border-radius: 4px; height: 56px;}
div.checkout-form-block form div.form-message{margin-bottom: 35px; border-radius: 4px}

#telergam-section{padding: 20px; margin-bottom: 35px; border-radius: 4px; background: #e7f2f2; display: flex;
flex-wrap: wrap; justify-content: space-between;}
#telergam-section div.title{width: 100%; margin-bottom: 15px; font-size: 18px; line-height: 22px; font-weight: 700;}
#telergam-section .button{background: #55bdbc url(../images/icons/telegram-send.svg) right 25px center no-repeat;
width: 220px; padding-right: 45px; height: 56px !important; font-size: 18px; font-weight: 700;}
#telergam-section input[type='text']{width: 352px; border-radius: 4px; border: 1px solid #99a4af; padding: 0 16px;
height: 56px;}

div.checkout-form-block div.radio-field{margin-bottom: 20px;}
div.checkout-form-block div.radio-field > div{display: flex; justify-content: space-between; align-items: flex-start;
width: 100%;}
div.checkout-form-block div.radio-field input{display: none;}
div.checkout-form-block div.radio-field label{width: 48%; height: 75px; padding: 20px; border: 2px solid #55bdbc; 
border-radius: 4px; display: flex; flex-direction: column; gap: 3px; font-size: 18px; font-weight: 700;
justify-content: center;}
div.checkout-form-block div.radio-field label span{color: #55bdbc; display: block;  font-size: 16px;
font-weight: 400;}
div.checkout-form-block div.radio-field input:checked + label{background: #55bdbc; color: #fff;}
div.checkout-form-block div.radio-field input:checked + label span{color: #fff;}

div.checkout-form-block #address-section{padding: 40px 20px; margin-bottom: 20px; border-radius: 4px; background: #e7f2f2;}
div.checkout-form-block #address-section div.fields{display: flex; justify-content: space-between; flex-wrap: wrap;
margin-bottom: 20px;}
div.checkout-form-block #address-section div.fields input, div.checkout-form-block #address-section select{
border-radius: 4px; border: 1px solid #99a4af; padding: 0 16px; height: 56px;}
div.checkout-form-block #address-section div.fields div:has(input.street){width: 70%; margin-bottom: 35x;}
div.checkout-form-block #address-section div.fields div:has(input.house){width: 28%; margin-bottom: 35px;}
div.checkout-form-block #address-section div.fields div:has(input.small){width: 32%;}
div.checkout-form-block #address-section div.fields input{width: 100%;}
div.checkout-form-block #address-section div.message{margin-bottom: 20px; color: #658430;}
div.checkout-form-block #address-section div.message.fail{color: #90071f;}
div.checkout-form-block #address-section div.message.fade{opacity: 0.3;}
div.checkout-form-block #address-section div.message.second{margin-top: -15px;}
div.checkout-form-block #address-section div.radio-field{display: flex; justify-content: space-between;}
div.checkout-form-block #address-section div.radio-field label{height: 60px;}
div.checkout-form-block #address-section > select{width: 100%; margin-bottom: 20px; appearance: none;
background: #fff url(../images/icons/chevron-down.svg) right 15px center no-repeat;}
div.checkout-form-block #select-date-time{display: flex; justify-content: space-between;}
div.checkout-form-block #select-date-time > *{width: 48%; height: 56px; border: 1px solid #99a4af; border-radius: 4px;
background: #fff; padding: 0 16px;}
div.checkout-form-block #select-date-time input[type='text']{background: #fff url(../images/icons/calendar.svg) right 18px center no-repeat;}
div.checkout-form-block #select-date-time select{appearance: none; color: #000; height: 56px;
background: #fff url(../images/icons/chevron-down.svg) right 15px center no-repeat;}
#checkout_form_payment > label{width: 100%; height: 60px;}
div.agree{display: flex; align-items: flex-start;}
div.agree input{margin-right: 8px; margin-top: 3px;}
div.agree a{color: #55bdbc;}

/* Forms */
div.form-message{margin-bottom: 20px; padding: 20px 25px; font-size: 15px;}
div.form-message ul{margin: 0;}
div.form-message li{margin-bottom: 1px; list-style: none; background: none; padding: 0;}
div.form-message li:last-child{margin: 0;}
div.form-message.errors{background: #f9f3d7; color: #90071f;}
div.form-message.success{color: #000; background: #e2fdb5;}

form.regular{max-width: 630px; margin: 0 auto;}
form.regular div.field{margin-bottom: 20px; width: 100%;}
form.regular div.field input{border-radius: 4px; border: 1px solid #a5a5a4; padding: 0 16px; height: 56px;
width: 100%;}
form.regular div.buttons{display: flex; justify-content: space-between; width: 100%;}
form.regular.customer div.field{margin-bottom: 37px;}
form.regular.customer div.field input{padding: 0 16px; height: 56px;}
form.regular.customer div.form-message{margin-bottom: 35px; border-radius: 4px}
form.regular.customer h3{margin-bottom: 40px; padding-top: 25px; border-top: 1px solid #e7f2f2;}

/* Content */
#content{padding-bottom: 95px;}
#content.index{padding-bottom: 70px;}
#content.jobs{background: url(../images/back-vacancy.svg) bottom right no-repeat;}
#content.short{padding-bottom: 0;}
#content div.default-center a.logo{position: absolute; left: -360px; top: 0;}
#content div.default-center a.logo img{display: block; max-width: 100%;}
#content div.default-center.regular a.logo{left: -250px;}

/* Delivery page */
div.delivery-icons{display: flex; justify-content: space-between; margin-bottom: 50px; align-items: flex-start;}
div.delivery-icons > div{width: 32%; display: flex; flex-direction: column; align-items: center; gap: 10px;
justify-content: center;}
div.delivery-icons > div p:has(img){border: 2px solid #90071f; border-radius: 50%; width: 80px; height: 80px;
display: flex; align-items: center; justify-content: center;}
div.delivery-icons div div{text-align: center; font-size: 18px; line-height: 25px;
font-weight: 700; color: #90071f;}
div.delivery-icons p{text-align: center; font-size: 18px; line-height: 25px;}
div.delivery-icons + h2{text-align: center; margin-bottom: 40px; font-size: 32px; font-weight: 900;}

div.delivery-prices{margin-bottom: 60px; display: flex; justify-content: space-between;}
div.delivery-prices > div{display: flex; flex-direction: column; align-items: center; padding: 0 10px;
width: 45%;}
div.delivery-prices div div{text-align: center;}
div.delivery-prices div div.title{font-size: 14px; line-height: 20px; color: #a5a5a4;}
div.delivery-prices div div.price{color: #55bdbc; font-size: 32px; line-height: 40px;
font-weight: 900;}
div.delivery-prices div div.price span{font-size: 20px;}
div.delivery-prices div div.extra{margin-bottom: 8px; font-size: 18px; line-height: 25px;}
div.delivery-prices div div.text{font-size: 16px; color: #a5a5a4;}
div.delivery-prices > div:nth-child(2) div.price{color: #d02429;}

#map{height: 600px; background: #ddd;}

/* Karaoke page */
#main-video{height: auto; background: #000; color: #fff; margin-bottom: 70px; position: relative;
height: 800px; overflow: hidden; z-index: 1;}
#main-video video{width: 100%; display: block; margin: 0 auto;}
#main-video div.video-text{max-width: 780px; margin: 0 auto; padding-top: 115px;}
#main-video div.video-text h1{text-transform: none; font-size: 80px; line-height: 80px;}
#main-video div.video-text p{text-align: center; margin-bottom: 35px; font-size: 18px; line-height: 25px;}
#main-video div.video-text button{margin: 0 auto;}
#main-video div{position: absolute;}
#main-video div.breadcrumbs{top: 0; z-index: 10;}
#main-video div.video-text{top: 180px; left: calc((100% - 780px) / 2); z-index: 10;}
#main-video div.video-cover{width: 100%; height: 100%; background: #333; opacity: 0.8; z-index: 1; left: 0; top: 0;}

button.karaoke{background: #55bdbc url(../images/icons/microphone-white.svg) left 30px center no-repeat;
padding-left: 65px; padding-right: 30px; height: 56px; font-size: 20px;}

div.bonus-area{width: 1060px; display: flex; flex-direction: column; justify-content: center; margin: 0 auto 80px auto;}
div.bonus-area h2{text-align: center; font-size: 32px; line-height: 40px; font-weight: 900; margin-bottom: 20px;}
div.bonus-area div.text{text-align: center; font-size: 18px; line-height: 25px; font-weight: 700;
max-width: 900px; margin: 0 auto 50px auto;}
div.bonus-area div.icons{display: flex; gap: 20px;}
div.bonus-area div.icons > div{width: 250px; display: flex; flex-direction: column; gap: 14px; justify-content: flex-start;
align-items: center;}
div.bonus-area div.icons > div div.image{width: 80px; height: 80px; border: 2px solid #90071f; border-radius: 50%;
display: flex; align-items: center; justify-content: center;}
div.bonus-area div.icons > div img{width: 40px; height: 40px;}
div.bonus-area div.icons > div > div.name{font-size: 18px; font-weight: 700; color: #90071f; text-align: center;}
div.bonus-area div.icons > div p{font-size: 18px; line-height: 25px; text-align: center;}

div.photo-gallery{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
div.photo-gallery a{display: block;}
div.photo-gallery img{display: block; max-width: 100%; transition: all 0.5s ease;}
div.photo-gallery img:hover{transform: scale(1.1)}

div.buy-sertificate{height: 600px; background: #90071f url(../images/karaoke/clouds.png) left center no-repeat;}
div.buy-sertificate div.inside{background: url(../images/karaoke/black-gift-box.png) no-repeat bottom right 10%;
width: 100%; height: 100%; padding-left: 23%; padding-top: 6.2%; transition: all 0.8s ease;}
div.buy-sertificate div.inside.passive{background-position: right -100% bottom 0; opacity: 0.5;}
div.buy-sertificate div.inside > *{max-width: 520px;}
div.buy-sertificate div.inside div.title{color: #fff; font-size: 50px; line-height: 63px; font-weight: 900;
margin-bottom: 30px;}
div.buy-sertificate div.inside div.title span{color: #000;}
div.buy-sertificate div.inside p{color: #fff; margin-bottom: 30px; font-size: 18px; line-height: 25px; font-weight: 700;}
div.buy-sertificate div.inside button{background: #55bdbc url(../images/karaoke/gift.svg) left 25px center no-repeat;
padding-left: 59px; height: 56px; font-size: 20px}

div.location{padding: 80px 0 0 0; max-width: 900px; display: flex; flex-direction: column; justify-content: center;
margin: 0 auto 40px auto; align-items: center;}
div.location div.title{font-size: 32px; line-height: 40px; font-weight: 900; margin-bottom: 25px;
text-align: center;}
div.location p{margin-bottom: 35px; font-size: 18px; line-height: 25px; font-weight: 700; text-align: center;}

#karaoke-map{height: 480px; background: #ddd;}

#modal-karaoke input[name='date']{background: url(../images/icons/calendar.svg) right 14px center no-repeat;}

/* Jobs */
div.subheader{font: 24px 'Mulish'; margin-bottom: 10px; text-align: center;}
div.subcontent{margin-bottom: 35px; text-align: center; font-size: 18px; line-height: 25px;}
div.subcontent p:has(strong){margin-bottom: 35px; line-height: 25px;}
#jobs-menu{display: flex; justify-content: center; gap: 10px; margin-bottom: 35px;}
#jobs-menu li{background: #fff; font-size: 18px; font-weight: 700; color: #000; border: 2px solid #55bdbc;}
#jobs-menu li.active, #jobs-menu li:hover{background: #55bdbc !important; color: #fff; border-color: #55bdbc !important;}
#jobs-name{text-align: center; margin-bottom: 15px; font-size: 28px; color: #55bdbc; font-weight: 900;}
#jobs-contents{width: 520px; margin: 0 auto 30px auto;}
#jobs-contents > div h4{text-align: center; font-size: 18px; font-weight: 700;}
#job-request{margin: 0 auto; background: #90071f url(../images/icons/file.svg) left 24px center no-repeat;
padding-left: 58px;}
#jobs-menu-select{display: none;}

/* Modal window */
div.modal-window{padding: 50px; background: #fff; position: fixed; z-index: 110; width: 600px; top: 5%; display: none;
left: calc((100% - 600px) / 2); border-radius: 8px; max-height: 90vh; overflow-y: auto;}
div.modal-window span.close{width: 44px; height: 44px; cursor: pointer; background: url(../images/icons/close.svg) no-repeat center;
display: inline-block; position: absolute; right: 12px; top: 12px; transition: all 1s ease;}
div.modal-window span.close:hover{transform: rotate(360deg);}
div.modal-window div.title{margin-bottom: 13px; text-align: center; font-size: 32px; line-height: 40px; font-weight: 900;}
div.modal-window div.info{margin-bottom: 15px; text-align: center; font-size: 18px; line-height: 25px; font-weight: 700;}
div.modal-window form{display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px;}
div.modal-window input[type='text'], div.modal-window select{border-radius: 4px; border: 1px solid #a5a5a4; padding: 0 16px;
height: 56px; font-size: 18px;}
div.modal-window select{background: #fff url(../images/icons/chevron-down.svg) right 15px center no-repeat;
color: #96908e; appearance: none;}
div.modal-window div.telegram-confirm{display: flex; justify-content: space-between; background: #e7f2f2;
border-radius: 4px; padding: 20px; align-items: center;}
div.modal-window .telegram-confirm .button{width: 228px; padding-right: 52px; font-weight: 700;
background: #55bdbc url(../images/icons/telegram-send.svg) right 28px center no-repeat; height: 56px;}
div.modal-window div.telegram-confirm input[type='text']{width: 222px; padding: 0 12px;}
div.modal-window div.agree{display: flex; align-items: center; font-size: 18px; line-height: 25px;}
div.modal-window div.agree input{margin-right: 11px; margin-top: 5px; align-self: flex-start;}
div.modal-window button.button.submit{margin: 0 auto; min-width: 240px;}

/* Order */
h1.small{font-size: 42px;}
div.pay-text{margin-bottom: 25px; font-weight: bold; font-size: 20px; text-align: center;}
div.order-complete a.button{margin: 0 auto 40px auto; width: 300px;}
div.order-complete ul.details{margin-bottom: 30px;}
div.order-complete ul.details li{margin-bottom: 7px;}
div.order-complete div.order-cart{width: auto; margin-bottom: 30px; font-size: 16px;}
div.order-complete div.order-cart > div{display: flex; padding: 20px 0; border-bottom: 2px solid #e7f2f2;}
div.order-complete div.order-cart > div > div{padding-right: 15px; padding-left: 15px; height: auto;}
div.order-complete div.order-cart > div:first-child{font: 16px 'Mulish'; font-weight: 600; color: #3b261f;
padding: 16px 0; background: #e7f2f2;}
div.order-complete div.order-cart div.name{width: 50%;}
div.order-complete div.order-cart div.price{width: 12%; white-space: nowrap;}
div.order-complete div.order-cart div.number{width: 20%;}
div.order-complete div.order-cart div.total{width: 12%; white-space: nowrap;}
div.order-complete ul.order-totals li{margin-bottom: 8px;}

.autocomplete-suggestions{border: 1px solid #989e9d; background: #fff; overflow: auto;}
.autocomplete-suggestion{padding: 3px 5px; white-space: nowrap; overflow: hidden; cursor: pointer;}
.autocomplete-selected{background: #eef2f1;}
.autocomplete-suggestions strong{font-weight: normal; color: #de633c;}
.autocomplete-group{padding: 2px 5px;}
.autocomplete-group strong{display: block; border-bottom: 1px solid #000;}

div.order-success{text-align: center; margin-bottom: 30px; padding-top: 100px; 
background: url(../images/success.svg) top center no-repeat}
div.order-success.fail{background: none; padding: 0;}
div.order-success h1{margin-bottom: 40px;}
div.order-success p{margin-bottom: 15px;}
div.order-success a.button-simple{display: inline-block; padding: 11px 30px 10px 30px; text-transform: uppercase;
border: 2px solid #254940; color: #1f2524; margin-top: 25px;}

/* Customer section */
ul.customer-menu{display: flex; justify-content: center; gap: 3%; margin-bottom: 40px;}
ul.customer-menu li{list-style: none; color: #90071f;}
ul.customer-menu li a{color: #90071f;}
ul.customer-menu li span{cursor: pointer;}
ul.customer-menu li.active a{color: #3b261f;}

div.my-orders{margin-bottom: 50px;}
div.my-orders > div{width: 100%; display: flex; justify-content: space-between; gap: 2.5%;}
div.my-orders div.titles{background: #e7f2f2; font: 16px 'Mulish';}
div.my-orders div.order{flex-wrap: wrap; width: 100%; border-bottom: 1px solid #e7f2f2;}
div.my-orders div.titles > div, div.my-orders div.order > div{width: 18%; flex-grow: 0;
padding: 14px 2%;}
div.my-orders div div{text-align: left !important;}
div.my-orders div div.number, div.my-orders div div.cost{white-space: nowrap;}

div.my-orders div.number span{cursor: pointer; margin-left: 5px; font-size: 16px;}
div.my-orders div.number span:hover{color: #90071f;}

div.my-orders div.order > div.cart{width: 100%; font-size: 16px; background: #e7f2f2;}
div.my-orders div.order > div.cart div.product{display: flex; margin-bottom: 14px;}
div.my-orders div.order > div.cart div.product:last-child{margin: 0;}
div.my-orders div.order > div.cart div.product div.name{margin-right: 20px; width: 30%;}
div.my-orders div.order > div.cart div.product div.total{white-space: nowrap;}

/* Pagination */
div.pagination{margin-bottom: 50px; display: flex; justify-content: center;}
div.pagination div.pages{display: flex; gap: 5px}
div.pagination div.pages a{width: 35px; height: 35px; display: flex; border-radius: 5px;
justify-content: center; align-items: center; color: #1f2524; transition: all ease 0.5s;}
div.pagination div.pages a.active, div.pagination div.pages a:hover{background: #55bdbc; color: #fff;}
div.pagination div.pages a.prev{background: url(../images/icons/prev-black.svg) no-repeat center;}
div.pagination div.pages a.next{background: url(../images/icons/next-black.svg) no-repeat center;}
div.pagination div.pages a.prev, div.pagination div.pages a.next{background-size: 35px 35px;}
div.pagination div.pages a.prev:hover, div.pagination div.pages a.next:hover{background-color: #eef2f1;}

/* Footer */
#footer div.inner{display: flex; padding: 40px 0 30px 0; flex-direction: column; justify-content: space-between;
height: 100%;}
#footer div.columns{display: flex; justify-content: space-between; padding: 20px 0 0 400px;
background: url(../images/logo-bottom.svg) top 0 left 0 no-repeat;}
#footer div.columns div.title{margin-bottom: 15px; font-size: 18px; font-weight: 700;}
#footer div.columns ul{display: flex; flex-direction: column; gap: 15px;}
#footer div.columns ul.menu li{position: relative; padding-bottom: 4px; display: inline-block; width: fit-content;}
#footer div.columns ul.menu li::before{height: 2px; background: #55bdbc; position: absolute; bottom: 0;
top: auto;}
#footer div.columns ul.contacts{margin-bottom: 18px;}
#footer div.columns div.buttons{display: flex; flex-direction: column; gap: 10px;}
#footer div.columns div.buttons button{width: 250px; height: 56px; border: 2px solid #55bdbc;
border-radius: 4px; color: #fff; background: #000; font-size: 18px; font-weight: 600; cursor: pointer;
transition: all 0.5s ease; font-family: 'Mulish';}
#footer div.columns div.buttons button:hover{background-color: #55bdbc;}
#footer li a{color: #55bdbc;}
#footer div.columns ul.contacts a{color: #fff;}
#footer ul.bottom{display: flex; gap: 40px; color: #b8b8b8;}
#footer ul.bottom li:last-child{margin-left: auto;}
#footer ul.bottom li a.hvr-bounce-to-right{position: relative; padding-bottom: 3px;}
#footer ul.bottom li a.hvr-bounce-to-right::before{position: absolute; bottom: 0; top: auto;
height: 2px; background: #55bdbc;}

div.socials{height: 40px; display: flex; gap: 20px; margin-bottom: auto;}
div.socials a{height: 40px; width: 40px; transition: all 0.3s ease; position: relative; border: 2px solid #55bdbc;
border-radius: 8px;}
div.socials a:hover{margin-top: -5px;}
div.socials a.telegram{background: url(../images/icons/telegram.svg) center no-repeat;}
div.socials a.vk{background: url(../images/icons/vk.svg) center no-repeat;}

/* Cookie alert */
#cookie-alert{position: fixed; width: 750px; background: #eef2f1; border: 1px solid #254940; z-index: 5;
border-radius: 10px; padding: 20px 40px; bottom: 30px; left: calc((100% - 750px) / 2); display: flex;
justify-content: space-between; align-items: center;}
#cookie-alert p{margin-right: 30px;}
#cookie-alert span.agree{cursor: pointer; padding: 10px 20px; color: #fff; border-radius: 6px;
background: #254940; transition: all ease 0.5s;}
#cookie-alert span.agree:hover{background: #22423a;}

/* Animations */
/* ----------------------------------------------
 * Generated by Animista on 2024-9-24 13:0:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
 @-webkit-keyframes bounce-in-top {
        0% {
          -webkit-transform: translateY(-500px);
                  transform: translateY(-500px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
          opacity: 0;
        }
        38% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
          opacity: 1;
        }
        55% {
          -webkit-transform: translateY(-65px);
                  transform: translateY(-65px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        72% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        81% {
          -webkit-transform: translateY(-28px);
                  transform: translateY(-28px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        90% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        95% {
          -webkit-transform: translateY(-8px);
                  transform: translateY(-8px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        100% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
      }
      @keyframes bounce-in-top {
        0% {
          -webkit-transform: translateY(-500px);
                  transform: translateY(-500px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
          opacity: 0;
        }
        38% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
          opacity: 1;
        }
        55% {
          -webkit-transform: translateY(-65px);
                  transform: translateY(-65px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        72% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        81% {
          -webkit-transform: translateY(-28px);
                  transform: translateY(-28px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        90% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        95% {
          -webkit-transform: translateY(-8px);
                  transform: translateY(-8px);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        100% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
      }
      

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
}

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
 @-webkit-keyframes rotate-center {
        0% {
          -webkit-transform: rotate(0);
                  transform: rotate(0);
        }
        100% {
          -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
        }
      }
      @keyframes rotate-center {
        0% {
          -webkit-transform: rotate(0);
                  transform: rotate(0);
        }
        100% {
          -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
        }
      }
      

.rotate-center {
	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}