:root {

   --beige: 250,241,219;
   --beigelight: 254,247,238;
   --teal: 120,149,134;
   --violet: 96,92,154;
   --orange: 246,169,38;
   --black: 33,33,32;

   --bg: var(--beige);
   --text: var(--black);
   --accent: var(--teal);

   --main-font: Arima, Marmelad, sans-serif;
   --accent-font: Arima, Marmelad, sans-serif;

   --grid-size: 10px;

 }

 :root {

   /* Page Body & Loader */

   --body-bg: rgb(var(--bg));   /* required - main page background */
   --body-font: normal normal 17px/1.1 var(--main-font); /* required - main text font defined as CSS font one-liner */
   --body-text: rgb(var(--text)); /* required - main text color on the page */
   --link-hover: rgb(var(--accent)); /* required - link hover color for the page */
   --loader-color: rgb(var(--orange),1); /* required - loader color */
   --loader-size: 16px;
   --loader-opacity: 1; /*opacity of the loader as a whole. */
   /*--loader-radius: radius for default loader */
   /*--loader-scale:  loader scale */

   /* Logotype */
   --logo-fixed: 60px; /* required - logo image height in pixels */
   --logo-mobile: 60px; /* required - logo image height for sticky menu */
   --logo-stuck: 60px;  /* required-  logo image height for mobile menu */

   /* Menu design */
   --menu-font: bold normal 18px/1.1 var(--main-font); /* required - main website menu font for desktop */
   --menu-text: rgb(var(--text)); /* required - menu text color */
   --menu-active: rgb(var(--orange)); /* required - color of active and hover menu elements */
   --menu-bg: transparent; /*required - background for main desktop menu block with logotype. */
   --menu-padding: 30px 5px 10px 5px; /* required - padding outside the menu. */
   --menu-inner-padding: 10px 10px; /* required - padding inside menu item. */
   /*--menu-case: menu text-transform */
   /*--menu-item-bg: menu item background */
   /*--menu-item-radius: menu item block radius */
   /*--menu-active-bg: background color of active and hover menu elements */
   /*--menu-spacing: spacing between menu elements */
   /*--menu-slogan-font: font the the slogan element */
   /*--menu-slogan-text: color of menu slogan.*/
   /*--menu-slogan-case: menu slogan text-transform */
   /*--menu-slogan-padding: padding for slogan block in the menu */
   /*--menu-slogan-width: width of the slogan block */
   --menu-stuck-bg: linear-gradient(to bottom, rgb(var(--beigelight)) 0%, rgba(var(--beige),0.8) 100%);/*background for the sticky menu */
   /*--menu-stuck-filter: backdrop-filter behind the sticky menu */
   /*--menu-stuck-padding: padding for the sticky menu */
   /*--menu-stuck-shadow: shadow for the sticky menu */
   /*--menu-stuck-border: bottom border for the sticky menu */

   /* Mobile menu */

   --menu-toggle: rgb(var(--text));
   /*--menu-toggle-bg: background for menu toggle element */
   /*--menu-toggle-height: menu toggle element thickness */
   --menu-mobile-text: rgb(var(--text)); /* required - mobile menu text color */
   --menu-mobile-active: rgb(var(--accent)); /* required - active/hover menu item on mobile */
   --menu-mobile-padding: 120px 30px 20px 20px; /* required - padding for the whole menu on mobile */
   --menu-mobile-inner-padding: 5px 10px; /* required - padding for a menu item on mobile */
   --menu-mobile-bg: rgba(var(--bg),0.9); /* required - whole menu background on mobile */
   /*--menu-mobile-panel-bg: top panel background on mobile */
   /*--menu-mobile-filter: backdrop-filter behind the mobile menu */

   /* Dropdown menu (Desktop) and Submenu (mobile) */
   --menu-dropdown-bg: rgb(var(--accent)); /* required - menu dropdown background */
   /*--menu-dropdown-radius: block radius for dropdown menu */
   /*--menu-dropdown-width: fixed width of the dropdown menu and arrow offset on mobile */
   /*--dropdown-toggle: dropdown toggle color */
   /*--submenu-font: font for submenu item */
   /*--submenu-text: color for submenu item */
   --submenu-active: rgb(var(--bg)); /* color for active/hover submenu item */
   /*--submenu-offset: offset for active/hover submenu item */
   /*--submenu-mobile-font: font for submenu item on mobile */
   /*--submenu-mobile-text: color for submenu item on mobile */
   /*--submenu-mobile-padding: padding for submenu item on mobile */

   /*Social Icons*/
   /*--menu-icon-size: font size for social icons on the mobile menu */
   --menu-icon-text: var(--icon-text); /*color for social icons on the mobile menu */
   --menu-icon-bg: var(--icon-bg); /*background for social icons on the mobile menu */
   --menu-icon-hover: var(--icon-text); /*hover color for social icons on the mobile menu */
   --menu-icon-hover-bg: rgb(var(--violet)); /*hover background for social icons on the mobile menu */
   /*--icon-size: font-size for social icons elsewhere on the page */
   --icon-text: rgb(var(--beigelight)); /*color for social icons elsewhere on the page */
   /*--icon-hover-text: hover color for social icons elsewhere on the page */
   --icon-bg: rgb(var(--orange)); /*background for social icons elsewhere on the page */
   --icon-hover-bg: rgb(var(--teal)); /*hover background for social icons elsewhere on the page */
   --icon-radius: 50%; /*social icons radius */
   /*--icon-hover-transform: hover transform property for social icons */
   /*--cell-icon-size: icon size when displayed in their own grid layout */

   /* Page First Blocks */
   --first-font: bold normal 40px/1.7 var(--main-font); /* required - font for the main header on the home page */
   --first-text: rgb(var(--accent)); /* required -color for the main header on the home page */
   /*--first-case: text-transform property for the main header on the home page */
   /*--first-shadow: text-shadow propery for the main header on the home page */
   /*--first-slogan-font: font property for text under the main header on the first page */
   /*--first-slogan-text: color for text under the main header on the first page */
   /*--first-slogan-shadow: text-shadow property for text under the main header on the first page */
   --inside-first-font: var(--first-font); /* required - font for the main header on all the site pages */
   --inside-first-text: var(--first-text); /* required - color for the main header on all the site pages */
   /*--inside-first-shadow:  text-shadow property for the main header on all the site pages */
   --first-height: 100vh; /*first block height on the home page */
   --inside-first-height: 100vh; /*first block height on all the site pages */

   --first-plain-bg: transparent; /* background for the first block on inside pages when there is no image */

   /*Additional backgrounds for blocks*/
   /*--first-before-bg: additional background for the first block on the home page */
   /*--inside-first-before-bg: additional background for the first block on all the site pages */
   --image-before-bg: var(--invert-bg),linear-gradient(to right, rgba(var(--bg),0.6),rgba(var(--bg),0.6)); /*additional background for when a block has background image */
   /*--primary-before-bg: additional background for `primary` style block */
   /*--accent-before-bg: additional background for `accent` style block */
   /*--invert-before-bg: additional background for `invert` style block */
   /*--invert-accent-before-bg: additional background for `invert-accent` style block */

   /* Special settings for `image-bg-left` and `image-bg-right` background styling for main blocks */
   /*--image-bg-width: width of the image on the size of the block */
   /*--image-bg-height: height of the image when it's moved to top on mobile */
   /*--header-height: header height offset to move the content either up or down from the image */

   /* Buttons default styling */
   --button-font: bold normal 20px/1.1 var(--main-font); /* required - button font property */
   --button-text: rgb(var(--beigelight)); /* required - button text color */
   /*--button-case: text-transform property */
   --button-bg: rgba(var(--teal),0.8); /* required - button background */
   /*--button-border: button border */
   --button-padding: 12px 15px 9px 15px; /*padding for buttons */
   --button-radius: 30px; /*border radius for buttons */
   /*--button-hover-text: text color when hovered */
   --button-hover-bg: rgb(var(--orange)); /*background when hovered */
   /*--button-hover-border: border when hovered */
   /*--button-hover-filter: filter property when hovered */
   /*--button-hover-transform: transform property when hovered */

   /* Special style for a button inside the first block on the home page */
   /*--first-button-text: font property */
   /*--first-button-text: text color */
   /*--first-button-bg: background normal state */
   /*--first-button-border: border normal state */
   /*--first-button-hover-text: text when hovered */
   /*--first-button-hover-bg: background when hovered */
   /*--first-button-hover-border: border when hovered */

   /* Form inputs, labels and messages */

   /*--input-text: color for form fields */
   /*--input-bg: background for form fields */
   --input-border: 0; /* border for form fields */
   /*--input-padding: padding for form fields */
   /*--input-radius: border radius for form fields */
   /*--input-disabled: text color for disabled dropdown elements */
   /*--label-text: color of the field labels */
   /*--label-case: text transform property for the field labels */
   /*--error-color: text color when field has an error */
   /*--error-bg: background color when field has an error */
   /*--error-outline: field outline when there's an error */
   /*--error-font: error message under field font property */
   /*--snackbars-font: form message popup block font property */
   /*--snackbars-text: text color on form message popup block */
   /*--snackbars-bg: form message popup block background */

   /* Default Headers and Subheaders */
   --header-font: 1000 normal 40px/1.1 var(--main-font); /* font for the main block header (`h2`,`.heading-2`) */
   --header-text: rgb(var(--violet)); /*text color for the main block header */
   --header-case: uppercase; /*text-transform property for the main block header */
   --subheader-font: 1000 normal 30px/1.1 var(--main-font); /* font for the block subheader (`h3`,`heading-3`) */
   /*--subheader-case: text-transform property for the block subheader.

   /*Block styles: `primary`, `accent`, `invert`, `invert-accent`*/

   --primary-bg: transparent; /*background for `primary` style block */
   --primary-header: rgb(var(--violet)); /*main block header color */
   --primary-subheader: rgb(var(--teal)); /*block subheader color */
   /*--primary-text: text color for the block */
   /*--primary-button-text: button text color */
   /*--primary-button-bg: button background color */
   /*--primary-button-border: button border */
   /*--primary-button-hover-text: button text when hovered */
   /*--primary-button-hover-bg: button background when hovered */
   /*--primary-input-text: form field text color */
   /*--primary-input-bg: form field backround */
   /*--primary-input-border: form field border */

   --accent-bg: linear-gradient(to bottom, rgb(var(--beigelight)), transparent 80%); /* background for `accent` style block */
   --accent-header: rgb(var(--violet)); /*main block header color */
   /*--accent-header-font: font property for main block header */
   --accent-subheader: rgb(var(--violet)); /*block subheader color */
   /*--accent-subheader-font: font property for block subheader */
   /*--accent-text: text color for the block */
   /*--accent-button-text: button text color */
   /*--accent-button-bg: button background color */
   /*--accent-button-border: button border */
   /*--accent-button-hover-text: button text when hovered */
   /*--accent-button-hover-bg: button background when hovered */
   /*--accent-input-text: form field text color */
   /*--accent-input-bg: form field backround */
   /*--accent-input-border: form field border */

   --invert-bg: linear-gradient(-45deg, rgba(var(--teal),0.5),rgba(var(--violet,0.5))); /* background for `invert` style block */
   --invert-header: rgb(var(--bg)); /* main block header color */
   /*--invert-header-font: font property for main block header */
   --invert-subheader: rgb(var(--bg)); /* block subheader color */
   /*--invert-suheader-font: font property for block subheader */
   --invert-text: rgb(var(--bg)); /* text color for the block  */
   /* --invert-button-text: button text color  */
   --invert-button-bg: transparent; /* button background color */
   --invert-button-border: 0; /* button border */
   /*--invert-button-hover-text: button text when hovered */
   /*--invert-button-hover-bg: button background when hovered */
   /*--invert-input-text: form field text color */
   /*--invert-input-bg: form field backround */
   /*--invert-input-border: form field border */

   --invert-accent-bg: rgb(var(--accent)); /* background for `invert-accent` style block  */
   --invert-accent-header: var(--invert-header); /* main block header color */
   /*--invert-accent-header-font: font property for main block header */
   --invert-accent-subheader: var(--invert-subheader); /* block subheader color */
   /*--invert-accent-subheader-font: font property for block subheader */
   --invert-accent-text: var(--invert-text); /* text color for the block */
   --invert-accent-button-text: var(--invert-button-text); /* button text color */
   --invert-accent-button-bg: var(--invert-button-bg); /* button background color */
   --invert-accent-button-border: var(--invert-button-border); /* button border */
   /*--invert-accent-button-hover-text: button text when hovered */
   /*--invert-accent-button-hover-bg: button background when hovered */
   /*--invert-accent-input-text: form field text color */
   /*--invert-accent-input-bg: form field backround */
   /*--invert-accent-input-border: form field border */

   /* General Blocks & wrappers */

   /*--block-radius: general block radius to used throughout CSS */
   /*--image-radius: radius for images in blocks */

   /* Services Block images: `.services-image` class: */
   /*--services-border: image border */
   /*--services-image: image height */
   /*--services-padding: image padding */
   /*--services-radius: image radius */

   /* Recommended wraper: `.post-boxed` class: */
   --accented-padding: 30px; /* padding for accented blocks */
   /*--accented-radius: border radius */
   --accented-bg: transparent;

   /* Another option for wrapper: `.post-info` class: */
   /*--info-font: font property */
   /*--info-bg: background */
   /*--info-padding: padding */
   /*--info-radius: border-radius */

   /*Slick Slider Image gallery*/
   --slick-height: 200px; /*image height for `slick-ribbon` class Slick Slider */
   /*--slick-spacing: distance in pixels from top and bottom edges for the block */
   /*--slick-caption: font property for the text caption on desktop (visible when hovered) */
   /*--slick-caption-case: text-transform property for caption (`uppercase`, `lowercase`, `capitalize` or `none`) */
   --slick-caption-bg: transparent; /*background for when the image is hovered */
   --slick-image-frame: 10px; /*image frame width in pixels */
   /*--slick-image-frame-color: image frame color */
   /*--slick-caption-border: decorative border on image when hovered */
   /*--slick-caption-spacing: spacing from the sides of the caption to the image */
   /*--slick-mobile-caption-bg: caption is visible on mobile on this background */
   --slick-arrow-size: 100px; /*last/next arrow size in pixels (one value) */
   --slick-arrow-border: 0; /*border for last/next arrows */
   --slick-arrow-bg: rgb(var(--bg)); /* background color (not the full backgound property) for last/next arrows */
   /*--slick-arrow-hover-bg: hover background color (not the full backgound property) for last/next arrows */
   --slick-arrow-offset: -100px; /*horizontal offset for last/next slick arrows */
   /*--slick-fadeout: image fadeout color for `slick-gallery` class Slick Slider */

   /* Isotope Layout Image Gallery */
   /*--isotope-spacing: spacing between individual images, this value is doubled */
   /*--isotope-border: border for individual images */
   /*--isotope-radius: border-radius form images */
   /*--isotope-bg: caption background when image is hovered */
   /*--isotope-title-font: font property for image title (image number and text in `defaults.json`>`image-word`) */
   /*--isotope-title-text: text color for image title */
   /*--isotope-font: font property for image caption */
   /*--isotope-text: text color for image caption */
   /*--isotope-case: text transform for image caption (`uppercase`, `lowercase`, `capitalize` or `none`) */

   /* LightGallery Popup */
   /*--lg-bg: background color for when image is opened */
   /*--lg-filter: backdrop filter for when image is opened */
   /*--lg-align: text align for caption */
   /*--lg-caption-text: text color for caption */
   /*--lg-caption-bg: background for text caption */

   /* Owl Carousel and Quote `.post-quote` class** */
   --owl-arrow-size: 100px; /*last/next arrow size in pixels (one value) */
   --owl-arrow-offset: -80px; /* horizontal offset for last/next arrows */

   /*--quote-text: text color for `.post-quote` class */
   --quote-bg: linear-gradient(to bottom, rgba(var(--beigelight),0) 30px, rgba(var(--beigelight),0.3) 70%, rgba(var(--beigelight),1) 100%); /*background for quote */
   --quote-border: 0; /*  border for quote */
   --quote-padding: 0 30px 20px 30px; /*padding for the quote block */
   --quote-radius: 30px; /*quote block radius */
   --quote-mark: bold normal 40px/0.6 var(--main-font) ;/*font-property for quote marks (`.has-quote-before` and `.has-quote-after` extra classes) */
   --quote-color: rgb(var(--orange)); /*quote marks color */
   /*--quote-scroll: thumb color for quote scroller (may appear on small sizes) */
   /*--quote-scroll-border: thumb border for quote scroller */
   /*--quote-scroll-bg: track color for quote scroller */
   /*--quote-scroll-bg-border: track border for quote scroller */

   /* Properties by layout type: pricelist */
   /*--pricelist-align: align text in the block (flex: `center`, `flex-start`,`flex-end`) */
   /*--pricelist-hover: pricelist item hover color */
   /*--pricelist-spacing: spacing between pricelist items */
   /*--pricelist-border-vertical: vertical border for price items */
   /*--pricelist-bottom-horizontal: horizontal border for price items */
   /*--pricelist-button-text: text color for pricelist hover button */
   /*--pricelist-button-case: text transform for pricelist hover button (`uppercase`, `lowercase`, `capitalize` or `none`) */
   /*--pricelist-button-bg: pricelist hover button background */
   /*--pricelist-button-border: pricelist hover button border */
   /*--pricelist-button-font: font property for pricelist hover button */
   /*--pricelist-button-padding: padding for pricelist button */
   /*--pricelist-button-radius: border radius for pricelist button */
   /*--pricelist-button-width: hover button fixed width */

   /* Properties by layout type: schedule */
   /*--schedule-header-font: font property for the days of the week */
   /*--schedule-header-case: text transform for the days of the week (`uppercase`, `lowercase`, `capitalize` or `none`) */
   /*--schedule-subheader-font: font property for the hours column */
   /*--schedule-border: border separator between week days */
   /*--schedule-item-text: text color for the scheduled item */
   /*--schedule-item-bg: background for the scheduled item */
   /*--schedule-item-border: border for the scheduled item */
   /*--schedule-item-hover-text: text color for the hovered scheduled item */
   /*--schedule-item-hover-bg: background for the hovered scheduled item */
   /*--schedule-item-hover-border: border for the hovered scheduled item */
   /*--schedule-subitem-font: font property for time and duration hover label */
   /*--schedule-subitem-text: text color the hover label */
   /*--schedule-subitem-icon-text: icon color for online label */
   /*--schedule-subitem-bg: background for the hover label */

   /*Form boxline layout*/
   /*--boxline-bg: hover background for the form in `boxline` layout (usually when the block is nested) */
   /*--boxline-padding: padding for the form in block */

   /* Form checkout block & tickets */
   /*--payment-success-bg: payment success block background.
   /*--payment-success-border: border for the block.
   /*--payment-success-padding: padding for the block.
   /*--payment-success-radius: payment success block radius.

   /*--ticket-font: font property of found ticket name on Booking forms.
   /*--ticket-label: color for the found ticket name.
   /*--ticket-case: text transform property for the found ticket name (`uppercase`, `lowercase`, `capitalize` or `none`).
   /*--ticket-bg: found ticket block background.
   /*--ticket-border: found ticket block border.
   /*--ticket-padding: found ticket block padding.
   /*--ticket-radius: found ticket block radius.
   /*--ticket-selected: checkmark color for the selected ticket.
   /*--ticket-selected-bg: background color for the selected ticket.
   /*--ticket-selected-border: border color for the selected ticket.

   /* Page Footer */
   /*--footer-bg: background for the page footer */
   --footer-padding: 0; /*padding for the footer block */
   /*--footer-text: text color for the page footer */
   /*--footer-font: font property for text in the footer */
   /*--footer-hover: link hover when inside footer */

   /*--map-width: embedded Google Maps width */
   /*--map-height: embedded map height */
   /*--map-border: embedded map border */
   /*--map-outline: embedded map outline */
   /*--map-radius: embedded map block radius */
   /*--map-margin: embedded map margin (sometimes necessary to make it take up whole width) */

   /* To Top Element */
   /*--totop-size: font size for the icon */
   /*--totop-text: link to top icon color */
   /*--totop-bg: link to top background */
   /*--totop-hover: color when hovered */
   /*--totop-hover-bg: background when hovered */

   /* Other elements */
   /*--mark-text: text color for `<mark>` tag */
   --mark-bg: rgba(var(--accent),0.2); /* background color for `<mark>` tag */

 }

 @media(max-width:992px) {
   :root {

   }
 }

 @media (max-width:768px) {
   :root {
    --owl-arrow-offset: -60px;
    --owl-arrow-size: 80px;
   }
 }

 @media (max-width:496px) {
   :root {
    --slick-arrow-size: 70px;
    --slick-arrow-offset: -60px;
    --owl-arrow-offset: -40px;
    --owl-arrow-size: 60px;
   }
 }

  @font-face {
	font-family: 'Marmelad';
	src: url("/fonts/user/Marmelad-Regular.ttf");
	src: url("/fonts/user/Marmelad-Regular.ttf") format("truetype"),;
	font-weight: 600;
	font-style: normal;
}

  @font-face {
	font-family: 'Arima';
	src: url("/fonts/user/Arima-ExtraLight.ttf");
	src: url("/fonts/user/Arima-ExtraLight.ttf") format("truetype"),;
	font-weight: 100;
	font-style: normal;
}

 @font-face {
	font-family: 'Arima';
	src: url("/fonts/user/Arima-Light.ttf");
	src: url("/fonts/user/Arima-Light.ttf") format("truetype"),;
	font-weight: 300;
	font-style: normal;
}

 @font-face {
	font-family: 'Arima';
	src: url("/fonts/user/Arima-Thin.ttf");
	src: url("/fonts/user/Arima-Thin.ttf") format("truetype"),;
	font-weight: 400;
	font-style: normal;
}

  @font-face {
	font-family: 'Arima';
	src: url("/fonts/user/Arima-Regular.ttf");
	src: url("/fonts/user/Arima-Regular.ttf") format("truetype"),;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Arima';
	src: url("/fonts/user/Arima-Medium.ttf");
	src: url("/fonts/user/Arima-Medium.ttf") format("truetype"),;
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Arima';
	src: url("/fonts/user/Arima-SemiBold.ttf");
	src: url("/fonts/user/Arima-SemiBold.ttf") format("truetype"),;
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Arima';
	src: url("/fonts/user/Arima-Bold.ttf");
	src: url("/fonts/user/Arima-Bold.ttf") format("truetype"),;
	font-weight: 1000;
	font-style: normal;
}

 body {
  background-image: url(/images/main-bg.jpg);
  background-size: auto 120vh;
  background-repeat: no-repeat;
  background-position: 50% -100px;
 }

 @media(min-width:1200px) {
  body {
    background-size: 100vw auto;
  }
 }

  @media(min-width:1600px) {
  body {
      background-position: 50% -200px;
  }
  #contacts {
    background-size: auto 120%;
    background-repeat: no-repeat;
  }
 }

 .rd-navbar-static .rd-navbar-nav {
  flex-direction: row-reverse !important;
 }

  .rd-navbar-fixed .rd-navbar-nav {
    display: flex !important;
  flex-direction: column-reverse !important;
 }

 .speech-bubble::after, .speech-bubble-outline::after {
  background: linear-gradient(45deg,rgb(var(--beigelight)) 50%, transparent 50%);
 }

 .range {
  justify-content: center !important;
 }

 .left-cell-1 {
  padding-left: calc(8.33% + 30px);
 }

 .text-black {
  color: rgb(var(--black));
 }

 .post-quote {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
 }

 .post-quote::after {
  content: "\2665\2665\2665\2665\2665";
  font-size: 30px;
  line-height: 30px;
  color: rgb(var(--orange));
  letter-spacing: 4px;
 }

 .owl-arrow {
  top: 50px;
 }

 #contacts::before {
  display: none;
 }

 #contacts {
  background-color: rgb(var(--bg));
  background-blend-mode: multiply;
 }

 #services .shell,  #ruservices .shell {
  mix-blend-mode: multiply;
 }

 .rd-navbar-main {
  justify-content: center !important;
 }

 .page-index .rd-navbar-nav li>a::before,  .page-book .rd-navbar-nav li>a::before {
  display: none;
 }

 .rd-navbar-nav li>a::before {
  color: var(--menu-text);
  font: var(--menu-font);
 }

 #reviews .heading-2::before {
  color: rgb(var(--beigelight)) !important;
  font: var(--header-font) !important;
 }

 .rd-navbar-nav li>a:hover::before {
    color: var(--menu-active);
  }

  .page-ru #reviews .heading-2::before {
    content: "Отзывы";
  }

 a[href="#about"]::before,  a[href="#ruabout"]::before {
  content: "Обо Мне";
 }

  a[href="#education"]::before,   a[href="#rueducation"]::before {
  content: "Образование";
 }

  a[href="#services"]::before,   a[href="#ruservices"]::before {
  content: "Услуги";
 }

  a[href="#reviews"]::before {
  content: "Отзывы";
 }

  a[href="#contacts"]::before {
  content: "Контакты";
 }

 .page-ru .lang {
  display: none !important;
 }

  li>a[href="/book"]::before {
  content: "Бронировать";
 }

 .page-ru .lang a::before {
  font-size: 12px !important;
  content: "en";
 }

 .page-ru .lang a:hover::before {
  color: var(--button-text) !important;
 }

.brand__logo-large {
  display: none !important;
}

.lang a {
  text-transform: uppercase !important;
  font-size: 12px !important;
  line-height: 10px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-radius: 10px !important;
  background: var(--button-bg) !important;
  color: var(--button-text) !important;
  display: inline-block !important;
  margin-left: 10px !important;
}

@media(min-width:992px) {
  .lang a {
  margin-left: 20px !important;
  padding-bottom: 7px !important;
}
}

@media(max-width:992px) {
  .lang a {
  padding-top: 7px !important;
  margin-top: 20px;
}

}

 .page-ru .rd-navbar-nav li>a, .page-ru #reviews .heading-2 {
  color: transparent !important;
  font-size: 0px !important;
 }

.quotes {
  background: linear-gradient(to bottom, rgba(var(--beigelight),0.1), rgba(var(--beigelight),1) 70%);
  border-radius: var(--quote-radius);
  padding: var(--quote-padding);
  padding-bottom: 25px !important;
  padding-top: 50px;
}

#contacts .quotes {
  background: linear-gradient(to bottom, rgba(var(--beige),0.7), rgba(var(--beigelight),1) 70%);
}

.quotes::after {
  bottom: -20px;
}

.quotes, .quotes .infoblock {
    position: relative;
}

.quotes .infoblock::before, .quotes .infoblock::after {
    content: '❝';
    font: var(--quote-mark);
    display: block;
    top: -20px;
    left: 0px;
    position: absolute;
    color: var(--quote-color);
    z-index: 0;
}

.quotes .infoblock::after {
    content: '❞';
    top: unset;
    left: unset;
    right: 0px;
    bottom: -15px;
}

.quotes .infoblock * {
    z-index: 1;
}

.quotes h2, .quotes h3 {
  text-transform: none;
  color: rgb(var(--text));
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 10px;
  font-weight: 300;
}

.quotes p:first-child {
  font-weight: 800;
}

.quotes p:first-child::before {
  content: "\2014  ";
}

.inside-first-block, .first-block {
  margin-bottom: -100px;
}

.inside-first-block .shell, .first-block .shell {
  align-items: flex-start;
}

.inside-first-block h1, .first-block h1 {
  display: none;
}

.page-book .inside-first-block {
  display: none;
}

@media(max-width:992px) {

  .page-book {
  padding-top: var(--logo-mobile);
}


}

.leaf-after, .leaf-before {
  display: flex;
  align-items: center;
}

.leaf-after::after, .leaf-before::before {
  content: "";
  width: 60px;
  height: 35px;
  background-image: url(/images/leaf-violet.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

.leaf-before::before {
  transform: rotate(180deg);
  width: 40px;
  height: 25px;
  background-position: center right;
}

.bg-invert .leaf-after::after {
  background-image: url(/images/leaf-beige.png);
}

em {
  font-weight: 1000;
  text-transform: uppercase;
}

.logo-before .button {
  max-width: 180px;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

.logo-before .button:nth-of-type(2n) {
  position: relative;
  left: 20px;
}

.button:nth-of-type(2n), .contactme .button, .rucontactme .button {
  background-color: rgba(var(--violet,0.8));
}

.logo-before::before {
  content: "";
  width: min(50%, 500px);
  height: 400px;
  background-image: url(/images/logo-full.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  display: block !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: -60px;
}

@media(min-width:992px) {
  .logo-before::before {
  margin-top: -90px;
}
}

@media(max-width:767px) {
  .logo-before::before {
  width: 100%;
  margin-top: -30px;
}

}

.current {
  position: relative;
}

.current:not(.lang)>a {
  color: rgb(var(--teal)) !important;
  font-weight: 1000 !important;
}

.current:not(.lang)::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 24px;
  height: 24px;
  background: url(/images/flower.png);
  background-size: contain;
}

.list-item::before {
  content: "";
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: url(/images/flower.png);
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: top center;
}

.contactme a, .rucontactme a {
  font-weight: 800;
  color: rgb(var(--teal));
}

.contactme .infoblock, .rucontactme .infoblock {
  background: linear-gradient(to bottom, rgba(var(--bg),0.8), transparent);
  border-radius: var(--quote-radius);
  padding: var(--quote-padding);
}

@media(min-width:768px) {
  .infoblock-image-left {
    max-width: 250px !important;
  }
}

  .infoblock-has-image-left {
    margin-top: 50px !important;
  }

  div:not(.infoblock-has-image-left) + .infoblock-has-image-left {
    margin-top: 0 !important;
  }
  #services div:not(.infoblock-has-image-left) + .infoblock-has-image-left {
    align-items: flex-start;
  }

@media(max-width:767px) {
  .infoblock-image-left {
    margin-bottom: 30px !important;
  }
  .infoblock-has-image-left {
    align-items: flex-start;
  }
  .image-wrapper img {
    margin-bottom: 30px;
  }
}

footer, #reviews {
  margin-top: -50px;
}

.page-book footer {
  margin-top: 0;
}

.page-ru #contacts {
  margin-bottom: -110px;
}

.page-ru footer {
  position: relative;
  z-index: 10;
  background: linear-gradient(to top, rgb(var(--bg)), transparent);
}

.rd-navbar-main .fa {
  margin-top: 10px !important;
}

#quote3, #ruquote3 {
  margin-top: -90px;
}

.fa-www:not(.icon-duplicate)::before {
  content: "";
}

.fa-www:not(.icon-duplicate) {
  background: url(/images/companion-logo.png) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

.image-wrapper img {
  border-radius: 50%;
  border: 6px solid rgb(var(--beige));
  outline: 1px solid rgb(var(--text));
}

@media(min-width:992px) {

#about .shell, #ruabout .shell, #services .shell, #ruservices .shell {
  padding-left: calc(8.33% + 15px);
  padding-right: calc(8.33% + 15px);
}
}

@media(min-width:768px) {

  .infoblock {
  padding-left: 30px;
  padding-right: 30px;
}
}

.quotes .infoblock {
  padding-left: 0;
  padding-right: 0;
}

#about .infoblock p, #ruabout .infoblock p {
  padding-left: 2px;
}

.slick-arrow {
  height: var(--slick-height);
}

.slick-arrow::before {
  filter: invert(29%) sepia(90%) saturate(1093%) hue-rotate(340deg) brightness(100%) contrast(94%);
}

.slick-slider {
  margin-left: auto;
  margin-right: auto;
  width: min(83.33%, calc(100% + 2*var(--slick-arrow-offset)));
}

.page-ru .text-bold, .page-ru h2, .page-ru h3 {
  font-weight: 1000 !important;
}

.page-ru .quotes h2, .page-ru .quotes h3 {
  font-weight: 300 !important;
}

@media(min-width:1700px) {
  .ruintro {
  margin-top: 50px;
}

}