@charset "UTF-8";
/* ================== ШРИФТЫ */
@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');

/* SCROLL BUTTON */

*::-webkit-scrollbar {
  background: var(--border-dark);
  width: 8px;
}

*::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 5px;
}

.scrollButton {
  width: 32px;
  height: 32px;
  background: var(--accent-color);
  padding: 10px;
  color: black;
  font-size: 24px;
  font-weight: 900;
  position: fixed;
  bottom: 40px;
  right: 40px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-shadow: 0 0 5px white, 0 0 5px white, 0 0 5px white;
  display: block;

}

.scrollButton.hide {
  display: none;
}

/* DATE INPUT */
.dateinput {
  padding: 5px 10px;
  border: 1px solid var(--border-dark);
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  font-size: 14px;
  font-family: "Exo 2";
  font-weight: 600;
}

/* ================== ЦВЕТОВАЯ ПАЛИТРА */
:root {
  /* --main-color: #00eb62; */
  --main-color: #42a36f;
  /* --main-light-color: #5df58f; */
  --main-light-color: #4bbb7f;
  --accent-color: #ffcc33;
  --accent-color-lite: #ffd65c;
  --accent-color-dark: #ecbe34;
  --informer-lite: #fcf7a5;
  --price-color: #e73b3b;
  --lite-blue: #fafcff;
  --border: #fafcff;
  --border-dark: #f0f4f5;
}

/* КОПИРАЙТ */
div#tildacopy,
#ucoz_pro_popup,
.t-tildalabel__wrapper,
.t-tildalabel__wrapimg {
  height: 0 !important;
  width: 0;
  visibility: hidden;
  display: none !important;
  opacity: 0;
}

/* ANIMATIONS */
@keyframes slide-right {
  from {
    transform: translateX(20px);
    opacity: 0;
  }

  to {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes slide-left {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }

  to {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes slide-top {
  from {
    transform: translatey(-20px);
    opacity: 0;
  }

  to {
    transform: translatey(0px);
    opacity: 1;
  }
}

@keyframes slide-bottom {
  from {
    transform: translatey(20px);
    opacity: 0;
  }

  to {
    transform: translatey(0px);
    opacity: 1;
  }
}

@keyframes slide-top-tooltip {
  from {
    transform: translatey(-20px);
    opacity: 0;
  }

  to {
    transform: translatey(0px) rotate(45deg);
    opacity: 1;
  }
}

/* INFORMATION BLOCK */
.information {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: baseline;
  background: var(--lite-blue);
  position: relative;
  z-index: 1;
  margin: 10px 0;
  border-radius: 10px;
  padding: 20px;
  font-family: "Roboto";
  font-size: 14px;
}

.information>p {
  color: inherit;
  position: relative;
  margin: 5px 0;
  max-width: 60ch;
  font-weight: 400;
  color: black;
}

.information.color {
  background: #fff6d2;
}

.information.color p {
  color: #a19572;
}

.information.color h3 {
  color: #dbc15c;
}

.information.attention {
  font-size: 14px;
  background: #f5e0e0;
  color: #ce4040;
}

/* TOOLTIPS */
[tooltip] {
  display: inline-block;
  position: relative;
}

[tooltip]:before {
  content: attr(tooltip);
  position: absolute;
  right: -15px;
  top: calc(100% + 15px);
  width: 20ch;
  background: white;
  border-radius: 4px;
  padding: 10px 20px;
  box-shadow: 0 3px 10px #ddd;
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  color: black;
  text-transform: none;
  z-index: 999;
  line-height: 100%;
}

[tooltip]:after {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  transform: rotate(45deg);
  background: white;
  position: absolute;
  top: calc(100% + 15px - 5px);
  right: 7px;
  display: none;
  box-shadow: -4px -6px 15px #ddd;
  z-index: 99999;
}

[tooltip]:hover:after,
[tooltip]:hover:before {
  animation: slide-top 0.3s alternate both cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: block;
}

[tooltip]:hover:after {
  animation: slide-top-tooltip 0.3s alternate both cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: block;
}

/* NEW Tooltip types */

/* bottom tooltip */
.tooltip-content {
  --max-width-tooltip: clamp(150px, 2vw, 200px);
  content: attr(marker);
  position: absolute;
  background: black;
  top: calc(100% + 10px);
  left: calc(-50% - (var(--max-width-tooltip) / 2 - 21px));
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 5px;
  text-align: left;
  color: white;
  line-height: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: none;
  font-family: 'Roboto';
  align-items: center;
  z-index: 9999;
  width: calc(100% + var(--max-width-tooltip));
  text-align: center;
}

.tooltip-content:before {
  content: '';
  width: 10px;
  height: 10px;
  background: black;
  bottom: calc(100% - 5px);
  left: calc(50% - 5px);
  position: absolute;
  z-index: 0;
  transform: rotate(45deg);
}

.tooltip-content img {
  width: 100%;
  max-height: 50px;
  object-fit: contain;
  margin: 0 auto;
  margin-bottom: 10px;
  display: block;
  border-bottom: 1px dashed #353535;
  padding-bottom: 10px;
}

#tooltip:hover>.tooltip-content {
  display: block;
  animation: slide-top .1s ease both
}

/* right tooltip */

.tooltip-content.right {
  top: 0;
  left: calc(100% + 2px);
}

.tooltip-content.right:before {
  left: auto;
  right: calc(100% - 5px);
  top: calc(50% - 5px);
}

.tooltip-content.right img {
  max-width: 30px;
  display: table;
  margin: auto 0;
  margin-right: 10px;
  padding: 0;
  padding-right: 10px;
  border: none;
  border-right: 1px dashed #353535;
  object-fit: contain;
}

#tooltip:hover>.tooltip-content.right {
  display: flex;
  animation: slide-right .1s ease both
}

/* ACTIVE CALLBACK BUTTON */

/* SECTION & ATRIBUTES */
.act_callback_button_wrapper {
  padding: 10px;
  height: 20vh;
  font-family: "Roboto";
  margin: 80px 0;
  overflow: hidden;
  position: relative;
}

.act_callback_button_wrapper:before {
  content: "?";
  font-size: 50em;
  top: 100%;
  right: 10%;
  position: absolute;
  color: var(--main-color);
  line-height: 0;
  animation: slide-right alternate both 1s;
}

.act_callback_button {
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  align-self: center;
  position: relative;
}

.act_callback_button h2 {
  font-weight: 500;
  font-size: 28px;
  font-family: "Exo 2";
  max-width: 40ch;
  animation: slide-left alternate both 1s;
}

.call_button {
  background: var(--accent-color);
  padding: 20px 40px;
  text-decoration: none;
  display: table;
  align-self: center;
  border-radius: 4px;
  font-weight: 400;
  font-size: 20px;
  color: black !important;
  font-family: "Roboto";
}

.call_button:hover {
  background: var(--accent-color-lite);
}

[margin="auto"] {
  margin: 30px auto;
}

[flex="on"] {
  display: flex;
  align-items: center;
}

[wrap="on"] {
  flex-wrap: wrap;
}

[basis="50%"] {
  flex-basis: 50%;
}

[basis="100%"] {
  flex-basis: 100%;
}

[basis="25%"] {
  flex-basis: 25%;
}

[column] {
  flex-direction: column;
}

[awidth="80"] {
  width: 80% !important;
}

[awidth="100"] {
  width: 100% !important;
}

[bg-lite-blue] {
  background: var(--lite-blue);
}

[justify="s-b"] {
  justify-content: space-between;
}

@media (max-width: 1440px) {
  [awidth="80"] {
    width: 90% !important;
  }
}

@media (max-width: 720px) {
  [awidth="80"] {
    width: 100% !important;
  }
}

.section_title {
  font-family: "Exo 2";
  flex-basis: 100%;
  order: -1;
  margin: 60px auto 30px;
}

@media (max-width: 500px) {
  .section_title {
    padding: 0 30px;
  }
}

[background="on"] {
  background: var(--border);
}

.section_title>h2,
.section_title>h1 {
  font-size: clamp(24px, 2vw, 32px);
  flex-basis: 100%;
  font-weight: 500;
  line-height: 40px;
}

.section_main {
  flex-wrap: wrap;
  margin: auto;
  align-items: flex-start;
  flex-basis: 100%;
  font-family: 'Roboto';
}

.main_album_item {
  flex-basis: calc(100% / 5 - 80px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  margin: 10px 5px;
  position: relative;
  flex-grow: 1;
  z-index: 1;
  cursor: pointer;
  overflow: hidden;
  border-radius: 20px;
}

.main_album_item:focus {
  flex-grow: 130;
  outline: none;
}

@media (max-width: 720px) {
  .main_album_item {
    flex-basis: calc(100% / 2 - 60px);
  }
}

.main_album_item:focus>img {
  object-position: 30% 75%;
}

.main_album_item:after {
  counter-increment: album;
  content: "#" counter(album);
  font-size: 16px;
  font-weight: 900;
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  padding: 10px 15px;
  border-radius: 10px;
  color: white;
}

.main_album_item>img {
  width: 100%;
  transition: all ease 0.4s;
  height: 400px;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  border-radius: 20px;
}

.main_album_item>span {
  font-weight: 900;
  font-size: 18px;
  text-align: left;
  padding: 15px;
  position: absolute;
  bottom: 0;
  color: white;
  left: 0;
  right: 0;
  backdrop-filter: blur(2px);
  box-sizing: border-box;
  text-transform: uppercase;
  border-radius: 0 0 20px 20px;
}

.album_marker {
  display: flex;
  position: absolute;
  top: 60px;
  right: 20px;
  left: 20px;
}

.album_marker #times,
.album_marker #meters {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 10px;
  backdrop-filter: blur(20px);
  margin: 5px 6px 0 0;
  color: white;
  background: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 500;
}

/* STAGE DISCOUNT */
.stage-discount {
  padding: 30px 60px;
  background: white;
  border: 2px solid var(--border-dark);
  border-radius: 20px;
  box-sizing: border-box;
  margin: 10px;
  position: relative;
  flex-basis: calc(100% / 5 - 24px);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 1;
  font-family: 'Roboto';
}

.stage-discount img {
  width: 100%;
  margin: auto 0 0 0;
  padding: 10px 0;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  cursor: pointer;
  max-width: 200px;
}

.stage-discount img:focus {
  transform: scale(1.5);
  z-index: 1;
}

/* HEADER */
body,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  text-decoration: none;
}

body {
  background: var(--border);
}

body.index {
  background: var(--border-dark);
}

#logo {
  width: 300px;
  margin-right: 50px;
}

@media (max-width: 500px) {
  #logo {
    width: 200px;
    margin: 0;
  }
}

.header__home {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding: 60px 60px;
  box-sizing: border-box;
  background: var(--main-color);
  border-radius: 0 0 20px 20px;
}

@media (max-width: 500px) {
  .header__home {
    padding: 60px 30px;
    border-radius: 0;
    margin: 0;
  }
}

.head_block {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  flex-grow: 1;
  font-family: "Roboto";
}

.head_block>h1 {
  font-size: clamp(36px, 5vw, 50px);
  font-weight: 900;
  color: white;
  text-wrap: balance;
  z-index: 9;
  font-family: 'Exo 2';
}

.head_block p {
  display: table;
  font-weight: 600;
  border: 2px solid white;
  color: white;
  padding: 10px;
  border-radius: 10px;
  font-size: 18px;
  z-index: 0;
}

.head_block .log_button {
  align-self: flex-start;
  margin-top: 20px !important;
  padding: 20px 40px !important;
  font-weight: 600;
  font-size: 16px;
  text-transform: none;
  color: white;
}

.head_block.picture {
  box-sizing: border-box;
  align-items: flex-start;
  display: block;
}

.head_block.picture img {
  margin: 0;
  object-fit: cover;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
  user-select: none;
  pointer-events: none;
  height: 100%;
  animation: slide-right alternate 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.header_line {
  margin: 0 auto;
  justify-content: space-between;
  padding: 10px 0;
  box-sizing: border-box;
  font-family: 'Roboto';
}

@media (max-width: 500px) {
  .header_line {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    padding: 10px 20px;
  }
}

/* MENU */
.header_menu {
  padding: 0 10%;
  border-top: 1px solid var(--border-dark);
  position: sticky;
  top: 0;
  z-index: 20;
  background: white;
  box-shadow: 0 10px 10px #00000012;
  font-family: "Roboto";
  font-size: 16px;
  display: flex;
  align-items: center;
}

@media (max-width: 750px) {
  .header_menu {
    display: none;
  }
}


/* HORISONTAL MENU DESKTOP */
#uNMenuDiv4,
#uNMenuDiv4 .uMenuRoot {
  flex-direction: row;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  font-family: 'Roboto';
}

#uNMenuDiv4 .uMenuRoot li,
#uNMenuDiv4 .uMenuRoot li>a {
  border: none;
  border-radius: 0;
  font-weight: 400;
  list-style: none;
}

#uNMenuDiv4 .uMenuRoot li>a {
  display: inline-flex;
  align-items: center;
  position: relative;
}

#uNMenuDiv4 .uMenuRoot li>a.new:before,
#uNMenuDiv4 .uMenuRoot li:has(>span[class="new "]):before {
  content: 'новое';
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 500;
  position: absolute;
  bottom: 80%;
  right: 0;
}

#uNMenuDiv4 .uMenuRoot li.uWithSubmenu>ul a.new:before {
  content: 'новое';
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 500;
  margin-right: 10px;
  position: relative;
}

#uNMenuDiv4 .uMenuRoot li a.uMenuItemA {
  font-weight: 700;
  border-bottom: 1px solid var(--accent-color);
}

#uNMenuDiv4 .uMenuRoot li:hover,
#uNMenuDiv4 .uMenuRoot li:hover>a {
  color: #555;
}

#uNMenuDiv4 .uMenuRoot li.uWithSubmenu {
  font-weight: 400;
  display: flex;
  align-items: baseline;
  color: black;
  position: relative;
  cursor: pointer;
}


#uNMenuDiv4 .uMenuRoot li.uWithSubmenu:after {
  content: '▼';
  margin-left: 3px;
  display: flex;
  font-size: 12px;
}

#uNMenuDiv4 .uMenuRoot li.uWithSubmenu>ul {
  display: none;
  cursor: default;
}

#uNMenuDiv4 .uMenuRoot li.uWithSubmenu:hover>ul {
  display: block;
  padding: 20px;
  background: white;
  box-shadow: 0 7px 10px #00000012;
  position: absolute;
  top: 100%;
  left: 0;
  border-radius: 0 0 10px 10px;
}

#uNMenuDiv4 .uMenuRoot li.uWithSubmenu:hover>ul>li {
  padding: 0;
  margin: 10px 0;
  text-align: left;
  font-weight: 400;
  text-wrap: nowrap;
  display: flex;
  align-items: center;
}

#uNMenuDiv4 .uMenuRoot li.uWithSubmenu:hover>ul>li:before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--accent-color);
  position: relative;
  margin-right: 10px;
}

#uNMenuDiv4 .uMenuRoot li.uWithSubmenu:hover>ul>li:hover a {
  font-weight: 500;
}

#uNMenuDiv4 .uMenuRoot li.uWithSubmenu:hover>ul>li:hover:before {
  background: black;
}

#uNMenuDiv4 .uMenuRoot li.uWithSubmenu:hover>ul>li a {
  font-weight: 400;
  color: inherit;
  font-size: inherit;
}

/* VERTICAL MENU MOBILE */
@media (max-width:500px) {
  .header-stick {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 10px #00000010;
  }
}

.vertical_menu_mobile {
  display: block;
  z-index: 999;
  font-family: "Roboto";
}

@media (min-width: 751px) {
  .vertical_menu_mobile[mobile] {
    display: none;
  }
}

.vertical_menu_mobile .menu-items {
  background: var(--accent-color);
  list-style: none;
  padding: 5px 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.vertical_menu_mobile .menu-items:hover {
  background: var(--accent-color-lite);
}

.vertical_menu_mobile .menu-items:active {
  background: var(--accent-color-dark);
}

.vertical_menu_mobile .menu-items:before {
  content: "☰";
  font-size: 20px;
}

.vertical_menu_mobile .menu-items>ul {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 60%;
  right: 0;
  background: white;
  z-index: 21;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  scroll-behavior: smooth;
  box-shadow: -20px 0 30px #00000033;
  cursor: default;
}

.vertical_menu_mobile .menu-items:focus-within>ul {
  display: block;
  animation: slide-right alternate 0.3s ease;
}

@media (min-width: 1440px) {
  .vertical_menu_mobile .menu-items>ul {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 400px;
    left: 0;
    background: white;
    z-index: 21;
    padding: 20px 50px;
    box-sizing: border-box;
    overflow-y: scroll;
    box-shadow: 20px 0 30px #00000033;
  }

  .vertical_menu_mobile .menu-items:focus-within>ul {
    display: block;
    animation: slide-left alternate 0.3s ease;
  }
}

.vertical_menu_mobile #uNMenuDiv4 .uMenuRoot>li {
  text-align: left;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px !important;
  background: var(--border-dark);
  font-weight: 500;
  width: 100%
}

.vertical_menu_mobile #uNMenuDiv4 .uMenuRoot>li>a {
  font-weight: 500;
  display: table;
}

.vertical_menu_mobile #uNMenuDiv4 .uMenuRoot>li.uWithSubmenu {
  align-items: center;
  flex-wrap: wrap;
  z-index: 99;
}

.vertical_menu_mobile #uNMenuDiv4 .uMenuRoot>li.uWithSubmenu:after {
  position: absolute;
  top: 15px;
  right: 10px;
  font-size: 10px;
}

.vertical_menu_mobile #uNMenuDiv4 .uMenuRoot>li.uWithSubmenu ul {
  z-index: -999;
}

.vertical_menu_mobile #uNMenuDiv4 .uMenuRoot>li.uWithSubmenu:hover ul {
  padding: 0;
  margin: 0;
  position: relative;
  background: none;
  box-shadow: none;
  border-radius: 0;
  top: auto;
  /* animation: slide-top .3s .3s ease both; */
  z-index: 10;
}

.vertical_menu_mobile #uNMenuDiv4 .uMenuRoot>li.uWithSubmenu:hover ul>li {
  text-wrap: wrap;
}

.vertical_menu_mobile #uNMenuDiv4 .uMenuRoot>li.uWithSubmenu:hover ul>li a {
  display: table;
}

.vertical_menu_mobile #uNMenuDiv4 .uMenuRoot li:has(>span[class="new "]):before {
  position: relative;
  margin-right: 5px;
}



/* END MENU */

.header_line_country {
  margin: 0 0 0 auto;
  align-self: center;
  align-items: center;
  align-content: center;
  font-family: "Exo 2";
  border-right: 1px solid var(--border);
  padding-right: 30px;
}

@media (max-width: 500px) {

  .header_line_country,
  .uc_header_login {
    display: none;
  }
}

.header_line_country>p {
  font-size: 12px;
}

.header_line_country>a[href^="tel"] {
  font-size: 16px;
  text-decoration: none;
  font-weight: 800;
  display: table;
  margin: 5px 0;
  color: black;
}

.header_line_country>a[href^="mailto"] {
  font-size: 14px;
  text-decoration: none;
  font-weight: 400;
  display: table;
  color: black;
}

.header_line_country>a[href^="tel"]:before {
  content: "☏ ";
  margin-right: 5px;
  font-weight: 100;
}

.header_line_country>a[href^="mailto"]:before {
  content: "✉ ";
  margin-right: 5px;
  font-weight: 100;
  font-size: 16px;
}

/* Header and Calculation */

.header_calculation {
  background: var(--main-color);
  margin-top: 0;
  padding: 30px 60px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: "Exo 2";
  flex-wrap: wrap;
  border-radius: 20px;
  align-items: center;
}

@media (max-width: 720px) {
  .header_calculation {
    height: 50%;
    flex-wrap: wrap;
    padding: 20px;
  }
}

.calculation_title {
  align-self: center;
  flex-basis: 50%;
  flex-grow: 1;
}

.calculation_title>h2,
.calculation_title>h1 {
  font-size: clamp(36px, 5vw, 60px);
  max-width: 14ch;
  font-weight: 900;
  color: white;
  animation: slide-left alternate both 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-delay: 0.2s;
  z-index: 1;
}

.calc_callback_button {
  padding: 10px 30px;
  background: var(--accent-color);
  border-radius: 10px;
  margin-top: 30px;
  color: black !important;
  font-weight: 500;
  border: 1px solid var(--accent-color);
  text-decoration: none;
  display: table;
  font-family: "Roboto";
}

.calc_callback_button:hover {
  background: var(--accent-color-lite);
}

/* CALC */

.calculation {
  display: flex;
  flex-basis: 50%;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 20px 0;
  justify-content: center;
}

.calculation .log_button.submit {
  align-self: stretch;
  text-align: center;
  margin: auto 0 10px 0;
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
  color: white;
}

@media (max-width: 500px) {
  .calculation {
    justify-content: flex-start;
  }
}

.calc_block {
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  flex-grow: 1;
  padding: 0 10px;
}

.calc_block>h3 {
  margin: 10px 0;
  font-weight: 600;
  font-size: 18px;
  color: black;
}

.calc_block>p {
  font-weight: 300;
  font-size: 14px;
  margin-bottom: 10px;
}

.calc_block input,
.calc_block select {
  padding: 10px !important;
  border-radius: 10px !important;
  background: white !important;
  outline: none !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  margin: 5px 0 !important;
  color: #666 !important;
}

.calc_block input:focus {
  outline: 2px solid var(--accent-color) !important;
}

.calc_block input::placeholder {
  color: #666 !important;
}

.none {
  display: none;
}

.calc_block input[type="checkbox"]+label {
  display: flex;
  align-items: center;
  position: relative;
  color: black;
  margin: 5px 30px 5px 0;
  user-select: none;
  font-weight: 600;
}

.calc_block input[type="checkbox"]+label:before {
  content: "";
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border: 1px solid white;
  box-sizing: border-box;
  text-align: center;
  border-radius: 5px;
  margin-right: 5px;
  font-weight: 700;
  cursor: pointer;
  background: white;
}

.calc_block input[type="checkbox"]:checked+label:before {
  content: "✓";
  color: var(--main-color);
  font-weight: 900;
  animation: slide-top 0.1s alternate ease;
}

/* PRICE LIST */
.priceTable {
  flex-wrap: wrap;
  font-size: 16px;
}

.priceItem {
  box-sizing: border-box;
  padding: 20px;
  background: white;
  margin: 10px 10px 10px 0;
  border-radius: 20px;
  flex-basis: calc(100% / 4 - 10px);
  flex-grow: 1;
  align-self: stretch;
  box-shadow: 0 2px 10px var(--border-dark);
}

.priceItem>h2 {
  padding: 5px 0;
  font-weight: 800;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
  display: block;
}

.priceItemContent {
  display: flex;
  flex-wrap: wrap;
}

.priceItem .log_button {
  margin: auto 0 0 0;
  display: block;
  text-align: center;
}

.itemBlock {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  justify-content: space-between;
}

.itemBlock.header {
  font-weight: 600;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-dark);
  margin: 0;
}

.itemPrice p {
  display: block;
  font-size: 16px;
  margin: 20px 0;
  display: block;
  position: relative;
}

.itemPrice p:has(> i) {
  font-weight: 500;
  color: var(--main-color)
}

.itemPrice.dots {
  flex-grow: 1;
}

.itemPrice.dots p {
  border-bottom: 1px dashed var(--border-dark);
  flex-basis: 100%;
  font-size: 15px;
  box-sizing: border-box;
  height: 19px
}

/* MAP */
.map {
  margin: 20px 0;
}

.map_wrapper {
  margin: 0 auto;
  position: relative;
  font-family: "Roboto";
  flex-wrap: wrap;
  font-size: 16px;
  box-sizing: border-box;
}

.map_content {
  margin: 0 30px;
  align-self: center;
  box-sizing: border-box;
}

.map_content p {
  line-height: 25px;
  font-weight: 300;
  text-wrap: balance;
  margin: 10px 0;
}

.map_content h2 {
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 20px;
}

.map_content li {
  position: relative;
  list-style: none;
  line-height: 30px;
  font-weight: 300;
  display: flex;
}

.map_content li:before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background: url(/favicon.png) center center / 80% no-repeat;
  align-self: center;
  margin-right: 10px;
  filter: grayscale(0);
}

.map_content a {
  color: var(--main-color) !important;
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
}

@media (min-width: 720px) {
  .map_wrapper {
    flex-wrap: nowrap;
    width: 50%;
  }
}


/* QUESTIONS */
@keyframes quest-slide-down {
  from {
    margin-top: -10px;
    opacity: 0;
  }

  to {
    margin: 0;
    opacity: 1;
  }
}

.questions_wrapper {
  margin: 0 auto;
  position: relative;
}

@media (max-width: 500px) {
  .questions_wrapper {
    width: 90% !important;
  }
}

.question {
  width: 100%;
  background: white;
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  padding: 20px;
  margin: 5px 0;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  transition: 0.3s ease;
  color: black;
}

.question:after {
  content: "›";
  top: 32px;
  right: 20px;
  position: absolute;
  font-size: 24px;
  line-height: 0;
  transition: 0.3s ease;
}

.question:hover {
  box-shadow: 0 2px 10px var(--border-dark);
}

.question:focus-within {
  box-shadow: 0 5px 10px #ddd;
}

.question:focus-within:after {
  transform: rotate(90deg);
}

.question:focus-within .answer {
  display: block;
  animation: quest-slide-down 0.3s alternate both ease;
  outline: none;
}

@media (max-width: 500px) {
  .question:hover .answer {
    display: block;
    animation: quest-slide-down 0.3s alternate both ease;
    outline: none;
  }

  .question:hover {
    box-shadow: 0 5px 10px #ddd;
  }

  .question:hover:after {
    transform: rotate(90deg);
  }
}

.question>h3 {
  font-size: 20px;
  font-weight: 500;
  font-family: "Roboto";
  color: black;
}

.question a {
  color: var(--accent-color) !important;
  text-decoration: none;
}

.answer {
  padding: 10px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  font-family: "Roboto";
  display: none;
  cursor: default;
}

/* SERVICES BLOCK */
.services_wrapper {
  background: var(--border);
  margin: 60px 0;
  box-sizing: border-box;
  font-family: 'Roboto';
}

.services_content {
  --margin-service-card: 10px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.services_title {
  font-family: 'Exo 2';
  flex-basis: 100%;
  margin-bottom: 30px;
  font-weight: 500;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 40px;
  order: -1;
}

@media (max-width:500px) {
  .services_title {
    padding: 0 30px;
  }
}

.services div#allEntries {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
}

.services div[id^="entryID"] {
  flex-basis: calc(100% / 4);
  flex-grow: 0;
  display: flex;
}

.services div#allEntries .services_card {
  flex-basis: 100%;
}

.services_card {
  display: flex;
  margin: var(--margin-service-card);
  flex-basis: calc(100% / 4 - (var(--margin-service-card) * 2));
  flex-grow: 0;
  flex-direction: column;
  padding: 24px;
  border-radius: 15px;
  background: white;
  box-shadow: 0 2px 5px var(--border-dark);
  font-size: 16px;
  color: #777;
  position: relative;
  min-width: 200px;
  transition: all .3s ease
}

.services_card:hover {
  box-shadow: 0 2px 10px #ddd;
  transform: translatey(-5px);
}

.services_card.medium {
  flex-grow: 1;
  flex-basis: calc(100% / 3 - 20px);
  background: var(--main-color);
  color: white;
}

.services_card.medium .card-title {
  font-size: 24px;
  color: white;
}

.services_card.medium .services-icon {
  position: absolute;
  top: -20px;
  bottom: 0;
  right: 0;
  margin: 0;
  width: 200px;
  height: 100%;
  z-index: 0;
}

.services-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 20px;
  /* pointer-events: none; */
}

.card-title {
  font-weight: 500;
  font-size: 17px;
  margin-bottom: 10px;
  color: black;
  position: relative;
}

.card-text {
  line-height: 130%;
  color: inherit;
  margin: auto 0 0 0;
  position: relative;
  text-wrap: balance;
  max-width: 50ch
}

.card-other {
  display: inline-block;
  margin-top: 15px;
  display: block;
  position: relative;
}

.card-button {
  font-size: 14px;
  background: var(--border);
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  color: #777;
  margin-right: 10px;
  margin-bottom: 5px;
}

.card-button:hover {
  background: var(--border-dark);
  color: black;
}

@media (max-width:720px) {
  .services_card {
    justify-content: space-between;
    flex-grow: 1;
  }

  .services_card.medium,
  .services div[id^="entryID"] {
    flex-basis: 100%;
  }

}

/* PORTFOLIO */

.portfolio_wrapper {
  flex-wrap: wrap;
  position: relative;
  margin: 60px auto;
  font-family: "Roboto";
}

.portfolio-card {
  flex-grow: 1;
  flex-basis: 0;
  display: block;
  position: relative;
  margin: 10px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.portfolio-card.big {
  flex-basis: 100%;
}

.portfolio-card.big img {
  max-height: 500px;
}

.portfolio-card.big .mask-text h2 {
  font-size: 45px;
}

.portfolio-card img {
  width: 100%;
  max-height: 300px;
  border-radius: 4px;
  object-fit: cover;
}

.portfolio-card .mask-text {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  font-family: "Exo 2";
  text-wrap: balance;
  padding: 20px;
}

.portfolio-card .mask-text h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.portfolio-card .mask-text p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
}

@media (max-width: 500px) {
  .portfolio-card .mask-text {
    padding: 10px;
  }

  .portfolio-card.big .mask-text p {
    display: block;
  }

  .portfolio-card .mask-text p {
    display: none;
  }

  .portfolio-card .mask-text h2 {
    font-size: 12px;
  }
}

.portfolio-card .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg,
      rgba(0, 0, 0, 0.5) 30%,
      rgba(0, 0, 0, 0) 70%);
  border-radius: 4px;
}

/* Advantages */

.advantages_wrapper {
  margin: 0 auto;
  font-family: "Roboto";
  flex-direction: column;
  position: relative;
  counter-reset: advantage;
}

.advantages_banner {
  height: 10vh;
  background: black;
  border-radius: 4px;
  align-items: center;
  position: relative;
  display: flex;
  padding: 20px;
  text-align: center;
  overflow: hidden;
}

.advantages_banner:before {
  --scale: 6;
  content: "";
  position: absolute;
  top: calc(50% - 16px);
  left: calc(1px + (31px * var(--scale) / 2));
  transform: scale(var(--scale));
  background: url(https://static.tildacdn.com/tild3634-6239-4666-b163-346439323931/strelki.svg) center center / 100% no-repeat;
  width: 32px;
  height: 32px;
  mix-blend-mode: hard-light;
}

.advantages_banner h2 {
  font-weight: 400;
  margin: 0 auto;
  display: table;
  color: white;
  font-size: 40px;
  position: relative;
}

.advantages_content {
  flex-wrap: wrap;
  margin: 40px auto 0;
  justify-content: space-between;
  position: relative;
}

.advantages {
  padding: 30px;
  background: var(--lite-blue);
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  border-radius: 4px;
  margin: 6px;
  flex-basis: 0;
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
  align-content: flex-start;
}

.advantages:before {
  content: counter(advantage);
  counter-increment: advantage;
  font-size: 20px;
  color: black;
  position: absolute;
  top: 50%;
  left: 25px;
  display: block;
  line-height: 0;
  font-weight: 900;
  transform: scale(10);
  color: white;
  opacity: 1;
}

.advantages h2,
.advantages p {
  position: relative;
  margin-left: 65px;
}

@media (max-width: 500px) {
  .advantages {
    flex-basis: auto;
  }

  .advantages h2,
  .advantages p {
    position: relative;
    margin-left: 0;
  }

  .advantages_banner>h2 {
    font-size: 30px;
    text-wrap: balance;
  }
}

.advantages h2 {
  font-weight: 600;
  font-size: 16px;
}

.advantages p {
  font-size: 16px;
  font-weight: 300;
}

/* FOOTER */
.footer {
  padding: 30px 10%;
  font-family: "Roboto";
  justify-content: space-between;
  border-top: 1px solid var(--border-dark);
  flex-wrap: wrap;
}

@media (max-width: 500px) {
  .footer {
    display: none;
  }
}

.footer a {
  font-size: 14px;
  color: black;
  display: inline;
}

.footer_logo {
  width: 250px;
  margin-bottom: 10px;
}

.footer_block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 20px;
}

.footer_block.nav {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0 20px;
  align-items: center;
  flex-wrap: wrap;
}

.footer_block.nav a {
  margin: 0 10px;
}

.footer_block:first-child {
  margin-left: 0;
}

.footer_block:last-child {
  margin-right: 0;
}

.footer_block p {
  font-size: 14px;
  color: #999;
}

.footer_block p.phone {
  font-size: 20px;
  font-weight: 700;
  color: black;
}

.footer_block p.mail {
  font-size: 18px;
  font-weight: 400;
  color: black;
}

/* POLICY & AGREEMENT */

.argeement {
  box-sizing: border-box;
  font-family: "Roboto";
  padding: 5%;
}

.agreement_content {
  background: white;
  padding: 5%;
  box-sizing: border-box;
}

.argeement h1,
.argeement h2,
.argeement h3 {
  margin: 40px 0;
}

.argeement p,
.argeement b {
  margin-bottom: 10px;
  display: table;
}