:root {

   --bg: 0,0,0;
   --text: 240,240,240;
   --accent: 176,210,85;
   --pink: #DD298C;
   --purple: #664FA0;
   --gradient: linear-gradient(135deg, var(--pink), var(--purple));
   --fadeout: 150, 150, 150;

   --main-font: Aboreto, serif;
   --accent-font: var(--main-font);
   --italic-font: MyryadPro, serif;

   --grid-size: 10px;

 }

 :root {

   /* Page Body & Loader */

   --body-bg: rgb(var(--bg));   /* required - main page background */
   --body-font: normal normal 18px/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: rgba(var(--accent),0.2); /* required - loader color */
   /*--loader-opacity: opacity of the loader as a whole. */
   /*--loader-radius: radius for default loader */
   /*--loader-scale:  loader scale */

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

   /* Menu design */
   --menu-font: bold normal 15px/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(--accent)); /* required - color of active and hover menu elements */
   --menu-bg: linear-gradient(to bottom, rgba(var(--bg),1) 0%, rgba(var(--bg),0)); /*required - background for main desktop menu block with logotype. */
   --menu-padding: 45px 5px 45px 5px; /* required - padding outside the menu. */
   --menu-inner-padding: 10px 15px; /* 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: 10px; /*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: rgb(var(--bg)); /*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(--bg)); /* required - mobile menu text color */
   --menu-mobile-active: rgb(var(--text)); /* required - active/hover menu item on mobile */
   --menu-mobile-padding: 100px 20px 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(--accent),1); /* 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: color for social icons on the mobile menu */
   /*--menu-icon-bg: background for social icons on the mobile menu */
   --menu-icon-hover: rgb(var(--bg)); /*hover color for social icons on the mobile menu */
   /*--menu-icon-hover-bg: hover background for social icons on the mobile menu */
   --icon-size: 22px; /*font-size for social icons elsewhere on the page */
   /*--icon-text: color for social icons elsewhere on the page */
   /*--icon-hover-text: hover color for social icons elsewhere on the page */
   /*--icon-bg: background for social icons elsewhere on the page */
   /*--icon-hover-bg: hover background for social icons elsewhere on the page */
   /*--icon-radius: 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: normal normal 29px/1.7 var(--main-font); /* required - font for the main header on the home page */
   --first-text: rgb(var(--text)); /* 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: first block height on the home page */
   /*--inside-first-height: first block height on all the site pages */

   --first-plain-bg: rgba(var(--accent),0.1); /* background for the first block on inside pages when there is no image */

   /*Additional backgrounds for blocks*/
   /*--first-before-bg: linear-gradient(to bottom, rgba(var(--bg),1) 0px, transparent 40%, transparent 70%, rgba(var(--bg)) 100%); */ /*additional background for the first block on the home page */
   --first-before-bg: linear-gradient(to bottom, rgba(var(--bg),1) 0px, rgba(var(--bg),0.55) 40%, rgba(var(--bg),0.55) 70%, rgba(var(--bg)) 100%);
   /*--inside-first-before-bg: additional background for the first block on all the site pages */
   --image-before-bg: linear-gradient(to bottom, rgb(var(--bg)), transparent 40%, transparent 60%, rgb(var(--bg))); /*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 18px/1.1 var(--main-font); /* required - button font property */
   --button-text: rgb(var(--bg)); /* required - button text color */
   /*--button-case: text-transform property */
   --button-bg: rgb(var(--accent)); /* required - button background */
   /*--button-border: button border */
   --button-padding: 12px 17px; /*padding for buttons */
   /*--button-radius: border radius for buttons */
   /*--button-hover-text: text color when hovered */
   --button-hover-bg: var(--gradient); /*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: rgb(var(--bg)); /*background for form fields */
   --input-text: rgb(var(--text));
   --input-border: 0; /* border for form fields */
   --input-padding: 2px 10px 2px 0; /*padding for form fields */
   /*--input-radius: border radius for form fields */
   --input-disabled: rgba(var(--text),0.5); /*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: transparent; /*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: bold normal 18px/1.1 var(--main-font);/*form message popup block font property */
   /*--snackbars-text: text color on form message popup block */
   --snackbars-bg: rgb(var(--accent)); /*form message popup block background */

   /* Default Headers and Subheaders */
   --header-font: normal normal 30px/1.1 var(--main-font); /* font for the main block header (`h2`,`.heading-2`) */
   /*--header-text: text color for the main block header */
   /*--header-case: text-transform property for the main block header */
   --subheader-font: bold normal 20px/1.9 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: background for `primary` style block */
   /*--primary-header: main block header color */
   /*--primary-subheader: 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: rgb(var(--accent),1); /* background for `accent` style block */
   --accent-header: rgb(var(--text)); /*main block header color */
   --accent-header-font: normal normal 38px/1.1 var(--main-font); /*font property for main block header */
   --accent-subheader: rgb(var(--bg)); /*block subheader color */
   --accent-subheader-font: normal normal 28px/1.1 var(--main-font); /*font property for block subheader */
   --accent-text: rgb(var(--bg)); /*text color for the block */
   --accent-button-text: rgb(var(--text)); /*button text color */
   --accent-button-bg: rgb(var(--bg)); /*button background color */
   /*--accent-button-border: button border */
   --accent-button-hover-text: rgb(var(--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: rgb(var(--text)); /* 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: 2px solid rgb(var(--bg)); /* 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: rgba(var(--accent),0.1);

   /* 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: 150px; /*image height for `slick-ribbon` class Slick Slider */
   --slick-spacing: 110px; /*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: background for when the image is hovered */
   --slick-image-frame: 20px; /*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: 110px; /*last/next arrow size in pixels (one value) */
   --slick-arrow-border: 10px solid transparent; /*border for last/next arrows */
   --slick-arrow-bg: transparent; /* 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: -20px; /*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: 50px; /*last/next arrow size in pixels (one value) */
   /*--owl-arrow-offset:  horizontal offset for last/next arrows */

   /*--quote-text: text color for `.post-quote` class */
   --quote-bg: rgb(var(--text)); /*background for quote */
   --quote-border: 0; /*  border for quote */
   /*--quote-padding: padding for the quote block */
   /*--quote-radius: quote block radius */
   --quote-mark: 100 normal 50px/1 var(--main-font); /*font-property for quote marks (`.has-quote-before` and `.has-quote-after` extra classes) */
   --quote-color: rgb(var(--accent)); /*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: 0; /*vertical border for price items */
   --pricelist-border-horizontal: 0; /*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: 0; /*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: 20px 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 {

    --menu-font: bold normal 18px/1.1 var(--main-font);

   }
 }

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

   }
 }

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

    --quote-padding: 25px;
    --owl-arrow-size: 40px;
    --quote-mark: 100 normal 35px/1 var(--main-font)
   }
 }


  @font-face {
	font-family: 'MyryadPro';
	src: url("/fonts/user/MyriadPro-Regular.otf");
	src: url("/fonts/user/MyriadPro-Regular.otf") format("opentype"),;
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'MyryadPro';
	src: url("/fonts/user/MyriadPro-It.otf");
	src: url("/fonts/user/MyriadPro-It.otf") format("opentype"),;
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: 'MyryadPro';
	src: url("/fonts/user/MyriadPro-Semibold.otf");
	src: url("/fonts/user/MyriadPro-SemiBold.otf") format("opentype"),;
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'MyryadPro';
	src: url("/fonts/user/MyriadPro-SemiBoldIt.otf");
	src: url("/fonts/user/MyriadPro-SemiBoldIt.otf") format("opentype"),;
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: 'MyryadPro';
	src: url("/fonts/user/MyriadPro-Bold.otf");
	src: url("/fonts/user/MyriadPro-Bold.otf") format("opentype"),;
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'MyryadPro';
	src: url("/fonts/user/MyriadPro-BoldIt.otf");
	src: url("/fonts/user/MyriadPro-BoldIt.otf") format("opentype"),;
	font-weight: 800;
	font-style: italic;
}

@font-face {
	font-family: 'MyryadPro';
	src: url("/fonts/user/MyriadPro-Black.otf");
	src: url("/fonts/user/MyriadPro-Black.otf") format("opentype"),;
	font-weight: 1000;
	font-style: normal;
}

@font-face {
	font-family: 'MyryadPro';
	src: url("/fonts/user/MyriadPro-BlackIt.otf");
	src: url("/fonts/user/MyriadPro-BlackIt.otf") format("opentype"),;
	font-weight: 1000;
	font-style: italic;
}

@font-face {
	font-family: 'MyryadPro';
	src: url("/fonts/user/MyriadPro-Light.otf");
	src: url("/fonts/user/MyriadPro-Light.otf") format("opentype"),;
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'MyryadPro';
	src: url("/fonts/user/MyriadPro-LightIt.otf");
	src: url("/fonts/user/MyriadPro-LightIt.otf") format("opentype"),;
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'Aboreto';
	src: url("/fonts/user/Aboreto-Regular.ttf");
	src: url("/fonts/user/Aboreto-Regular.ttf") format("truetype");
}

p, h1, h2, h3, h3, #contacts .fa {
  font-variant: small-caps !important;
}

.snackbars p {
  font-variant: none !important;
}

.snackbars {
  padding: 7px 10px 7px 5px
}

.form-input {
  font-family: var(--italic-font);
  font-weight: 200;
  font-style: italic;
}

@media(min-width:992px) {

.first-block {
  margin-top: -120px;
}

.menu-button {
  position: absolute;
  right: 20px;
}

.rd-navbar-brand {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.rd-navbar-main {
  justify-content: center !important;
  padding-left: 100px;
  padding-right: 120px;
  flex-wrap: nowrap !important;
}

}

.rd-navbar-fixed .rd-navbar-nav-wrap {
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% + var(--logo-mobile) );
}

.rd-navbar-fixed .menu-addon {
  text-align: center !important;
}

.rd-navbar-fixed .rd-navbar-element {
  margin-left: 5px;
}

.menu-button a {
  background: var(--button-bg) !important;
  color: var(--button-text) !important;
  padding: var(--button-padding) !important;
}

@media(max-width:992px) {
  .menu-button a {
  background: rgb(var(--bg)) !important;
  color: rgb(var(--text)) !important;
  max-width: 180px;
}

}

.menu-button a:hover, .menu-button a:active {
  background: var(--button-hover-bg) !important;
}

.rd-navbar-static.rd-navbar--is-clone .rd-navbar-main, .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-main
{
  padding: 15px 20px 15px 0 !important;
  transition: none !important;
}

.brand__logo-small, .brand__logo-large {
  padding: 10px;
}

@media(max-width:992px) {
  .brand__logo-small, .brand__logo-large {
  padding: 3px;
}
}

.buttons-after {
  padding-left: 5px !important;
  padding-right: 5px !important;
    text-align: center;
}

.buttons-after .button {
  margin-left: 10px;
  margin-right: 10px;
}

.first-block .range>div::before {
  content: "";
  display: block;
  width: 100%;
  height: 45vh;
  background-image: url(/images/logo-full.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

#about img {
  border-radius: 50%;
}

@media(min-width:992px) {
#about img {
  padding: 50px;
}
}

#about .infoblock {
  padding: 50px;
}

section .shell::before {
  content: "";
  transform: rotate(-90deg);
  display: inline-block;
  font-family: var(--main-font);
}

section .shell::before, #reviews .heading-2 {
  color: rgb(var(--accent));
  font-size: 70px;
  line-height: 1;
  font-variant: none !important;
}

 @media (max-width:768px) { 

#reviews .heading-2 {
  margin-left: var(--owl-arrow-size);
}

.first-block {
  background-position: 60% 50%;
}

 }

#about .shell::before, #services .shell::before, #pricelist .shell::before, #gallery .shell::before, #contacts .shell::before {
  margin-right: -50px;
  margin-left: -80px;
}

section .shell {
  display: flex;
  align-items: center;
}

#about .shell::before {
  content: "About";
  margin-left: -100px;
}

#pricelist .shell {
  align-items: flex-start;
}

#pricelist .shell::before {
  content: "Pricelist";
  margin-top: 135px;
  margin-left: -140px;
}

#gallery .shell::before {
  content: "Gallery";
  color: rgb(var(--text));
  text-shadow: 0 0 25px rgb(var(--bg)), 0 0 10px rgba(var(--bg),0.5);
    margin-left: -120px;
}

#contacts .shell::before {
  content: "Contacts";
  margin-left: -170px;
  margin-top: -80px;
}

#services .shell::before {
  content: "Services";
  color: rgb(var(--bg));
  margin-left: -130px;
}

@media(min-width:993px) {
  #services .shell::before, #gallery .shell::before{
     margin-top: -25px;
  }
}

@media(max-width: 992px) {

  section .shell {
  align-items: flex-start;
}

  section .shell::before {
    margin-top: 150px;
  }

  #contacts .shell::before {
    margin-top: 170px;
  }

}

@media(max-width: 768px) {

  #pricelist .shell {
  flex-direction: column;
}

  #pricelist .shell::before {
  margin: 0;
  margin-left: -5px;
  margin-bottom: 30px;
  transform: none;
}

  #contacts .shell::before {
    margin-left: -240px;
  }

  #services .shell::before {
    margin-left: -200px;
  }

  #about .shell::before {
    margin-left: -160px;
  }

    #gallery .shell::before {
    margin-bottom: -100px !important;
    position: relative;
    top: 50px;
    padding-left: 30px;
     margin-left: -190px;
  }

}

@media(max-width: 620px) {

  section .shell::before {
    transform: none;
    margin: 0 !important;
    margin-bottom: 50px !important;
  }

    section .shell::before {
      font-size: 60px;
      margin-left: 0;
    }

  section .shell {
    flex-direction: column;
    padding-left: 35px;
    padding-right: 15px;
  }

  #gallery .shell {
    display: block;
    padding: 0;
  }

       #services .shell::before {
    text-align: center;
    margin-left: auto !important;
    margin-right:  auto !important;
    padding-right: 20px;
   }


  #about .infoblock {
    padding-left: 0;
    padding-top: 0;
  }

  #reviews .heading-2, section .shell::before {
    word-break: break-all;
    white-space: wrap;
    margin-right: -30px;
  }

  footer p {
    margin-left: 20px;
  }

}

@media(max-width: 569px) {

   #reviews .heading-2  {
    margin-left: 0;
   }

   #reviews .heading-2, section .shell::before {
    font-size: 50px;
    letter-spacing: -3px;
   }

   .buttons-after .button {
    margin-left: 0;
   }


}

#services .image-wrapper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: block;
}

#services img {
  max-height: 100px;
}

#services .range {
  justify-content: space-around;
}

#services .image-wrapper::after {
  content: "";
  position: absolute;
  mix-blend-mode: multiply;
  background: var(--gradient);
  width: 100%;
  height: calc(100% - 20px);
  left: 0;
  top: -2px;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  opacity: 0;
  transition: 0.5s all ease;
}

#services .range>div:hover .image-wrapper:after {
  opacity: 1;
}

#services .range>div:hover .image-wrapper img {
  opacity: 0;
}

#services1 .image-wrapper::after {
    mask-image: url("/images/services-illu1.png");
}
#services2 .image-wrapper::after {
    mask-image: url("/images/services-illu2.png");
}
#services3 .image-wrapper::after {
    mask-image: url("/images/services-illu3.png");
}
#services4 .image-wrapper::after {
    mask-image: url("/images/services-illu4.png");
}
#services5 .image-wrapper::after {
    mask-image: url("/images/services-illu5.png");
}
#services6 .image-wrapper::after {
    mask-image: url("/images/services-illu6.png");
}
#services7 .image-wrapper::after {
    mask-image: url("/images/services-illu7.png");
}
#services8 .image-wrapper::after {
    mask-image: url("/images/services-illu8.png");
}

.box-line {
  margin-left: 0;
  margin-right: 0;
}


.form-input {
  border-bottom: 2px solid rgb(var(--text)) !important;
}

.form-wrap+* {
  margin-top: 0 !important;
}

.form-wrap:nth-last-child(2) .form-input {
  padding-bottom: 45px;
  height: 200px;
}

.form-wrap:last-child {
  align-items: flex-end;
  position: relative;
  top: -44px;
}

@media (min-width: 769px) and (max-width:992px) {

  #services .cell-sm-2 {
    flex-basis: 33%;
    max-width: 33%;
  }
}
@media (min-width: 993px) and (max-width:1200px) {

  #services h3 {
    font-size: 23px !important;
  }

}
    
@media(max-width:992px) {
  .box-line__main {
    margin-left: 0;
  }
}

.range {
  width: 100%;
}

#contacts .range {
  align-items: flex-start;
}

#contacts .contact-links.fa {
  display: flex;
  align-items: center;
  font: var(--header-font);
  margin-top: 20px;
  font-size: 27px;
}

#contacts .fa.fa-location {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}

#contacts .contact-links.fa.fa-email::before {
  font-size: 20px;

}

#contacts .contact-links.fa.fa-email {
  font: var(--body-font);
}

#contacts .fa::before {
  font-size: var(--icon-size);
  width: 40px;
  display: inline-block;
}

#contacts iframe {
  filter: invert(1) hue-rotate(180deg) saturate(0.5);
  margin-top: 40px;
  height: 200px;
  border-radius: 30px;
  max-width: 400px;
}

@media(min-width:993px) {
  .box-line {
  margin-right: 75px;
}

 #contacts iframe {
    margin-left: -20px;
    width: 300px;
 }
}

.quote-name {
    color: rgb(var(--bg));
    font-weight: bold;
}

.quote-text {
  color: rgb(var(--bg));
  font-family: var(--italic-font);
  font-variant: none !important;
  font-style: italic;
  font-size: 15px;
  font-weight: 100;
  line-height: 1.3;
}

.price-item span:last-child, .lg-sub-html {
  font-family: var(--italic-font);
  font-variant: none !important;
  font-style: italic;
  font-size: 15px;
  font-weight: 100;

}

.owl-arrow {
  height: 80px;
  background-size: cover;
  background-position: center center;
  top: calc(50% - 20px);
  background: rgb(var(--accent));
  mask-size: cover;
  mask-position: center;
  mask-repeat: no-repeat;
  transition: 0.5s background ease;
}

.slick-arrow::before {
    mask-size: cover;
  mask-position: center;
  mask-repeat: no-repeat;
}

.owl-arrow:hover, .slick-arrow:hover::before {
  opacity: 1;
  /*filter: brightness(4) contrast(2);*/
  background: var(--gradient);
}

.owl-arrow.owl-arrow-next, .slick-arrow.slick-next::before {
    mask-image: url(/images/arrow-next.png);
}

.owl-arrow.owl-arrow-prev, .slick-arrow.slick-prev::before {
    mask-image: url(/images/arrow-prev.png);
}

@media(max-width:368px) {

  .owl-carousel .owl-item {

}

.owl-carousel .post-boxed {
  max-width: 100% !important;
}

   #reviews .heading-2, section .shell::before {
    font-size: 40px;
   }


}

.slick-ribbon {
      border-left: 20px solid rgb(var(--bg));
      border-right: 20px solid rgb(var(--bg));
      background-color: rgb(var(--bg));
}


.thumb-ann img {
      filter: grayscale(1);
}

.thumb-ann:hover img {
  filter: grayscale(0);
}

@media (max-width:468px) {
  .price-item span:last-of-type {
    margin-bottom: 5px;
  }
}

@media(min-width: 569px) {
section:not(#about) .shell {
  padding-top: 50px;
}

#contacts .shell {
  padding-top: 80px;
}
}

select option {
  background-color: black;     /* Changes dropdown text color */
}

.form-validation {
  font-family: var(--italic-font);
  font-style: italic;
  right: 0;
  bottom: 0;
}

.thumb-ann__title {
  display: none;
}

@media(max-width:496px) {
  .owl-arrow {
    background-size: 60px auto;
    mask-size: 60px auto;
  }
  .post-quote.has-quote-before::before {
    left: 5px;
    top: 3px;
  }
  .post-quote.has-quote-after::after  {
    right: 5px;
    bottom: -10px;

  }
}

.dtp-header {
  background: rgb(var(--bg));
  color: rgb(var(--text));
}

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