@import url(/css/reset.css);
@import url(/css/animate.css);
@import url(/css/my_font.css);
@import url(/css/Font_Awesome_5_Free.css);


:root {
  /* --bg_section_pic: #0094ff66; */
  --bg_section_pic: rgba(0, 148, 255, 0.4);
  --bg_block_gradient: linear-gradient(180deg, rgba(154, 193, 241, 0.59) 0%, rgba(255, 255, 255, 0) 100%);
  --bg_section: #2B6691;
  --font_color: #000;
  --font_color_light: #fff;
  --font_color_dark: #000;
  /* color: #395E95; */

  --col_gap_zero: 0px;

  --root-base-font-size: 10px;
}


/* body, header, footer, nav, main, section, aside, ol, li, div {
  border: 1px solid red !important;
} */

#ms .gap {
  padding: 0em calc(4% + (100vw - 360px) /100) 3em;
}

#ms .blog {
  padding: 2em calc(4% + (100vw - 360px) /100) 3em;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

#ms body {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100vh;
  font-family: 'Cuprum', sans-serif;
  /* font-family: 'Oswald', sans-serif; */
}

#ms header.header {
  display: flex;
  align-items: center;
  flex-direction: row;
  /* justify-content: space-evenly; */
  padding: 1em;
  width: 100%;
  line-height: 1.3;
  font-size: 2.5em;
  /* color: var(--font_color_light); */
  position: fixed;
  /* position: sticky; */
  /* position: absolute; */
  z-index: 1;
  transition: all 0.5s;
  /* background-color: none; */
}
#ms header.header--bg-add, #ms header.header--bg-visibility {
background-color: #fff;
color: var(--font_color_dark) !important;
box-shadow: 0 1px #dadada;
}
#ms header.header--hidden {
  transform: translateY(-300%);
}
#ms header.header:hover {
  background: #fff;
  color: var(--font_color_dark);
}
#ms header.header--menu-more-open {
  background: #fff;
  color: var(--font_color_dark);
}

#ms header div.header__logo {
  position: relative;
  display: flex;
  align-items: center;
}
#ms header div.header__logo--icon::before {
  display: flex;
  align-self: center;
  font-family: 'Font Awesome 5 Free';
  content: '\f568';
  font-weight: 900;
  font-size: 90%;
  padding: 0 0.5em 0 0;
}
#ms header div.header__logo--img::before {
content: '';
/* background-image: url(); */
background-image: var(--img-url);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 100%;
width: 100%;
min-height: 2em;
min-width: 6.5em
}


#ms address.header__address {
  display: flex;
  flex-direction: row;
  align-self: center;
}
#ms address.header__address > a {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 0;
  white-space: nowrap;
  padding: 0 0 0 0.5em;
}
#ms address.header__address > a.icon-phone-squared::before {
  font-size: 150%;
}  
#ms address.header__address > a.icon-phone-squared:hover::before {
  animation: 1.2s ease-in-out 0s normal none infinite running trambling-animation;
}
@keyframes trambling-animation {
  0%, 50%, 100% {
      transform: rotate(0deg);
  }
  10%, 30% {
      transform: rotate(-10deg);
  }
  20%, 40% {
      transform: rotate(10deg);
  }
} 

#ms footer {
  background: black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c8c8c8;
  padding: 1em;
  line-height: 1.3;
  font-size: 2.5em;
  text-transform: uppercase;
  flex-wrap: wrap;
}

#ms footer.footer p, #ms footer.footer a {
  /* padding: 0; */
  /* font-size: 60%; */
}
#ms footer.footer a:hover {
  color: #00ff7b;
}
#ms p.footer__copyright::before {
  content: "©";
  padding: 0 0.25em 0 0;
}



#ms section {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  font-size: 2.5em;
  margin: 0;

  --col_gap: var(--col_gap_zero);
}


#ms .column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: auto;
  
  align-self: center;
}
#ms .columns-1 {
  column-count: 1;
  column-gap: 0;
}
#ms .columns-2 {
  column-count: 2;
  column-gap: 0;
}
#ms .columns-3 {
  column-count: 3;
  column-gap: 0;
}
#ms .columns-4 {
  column-count: 4;
  column-gap: 0;
}


#ms .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  gap: var(--col_gap);
}
#ms .row-nowrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  gap: var(--col_gap);
}

#ms .item-1 {
  width: 100%;
  /* height: auto; */
}
#ms .item-2 {
  width: calc((100% - var(--col_gap))/2 - 0.1px);
  /* height: auto; */
}
#ms .item-3 {
  width: calc((100% - var(--col_gap)*2)/3 - 0.1px);
  /* height: auto; */
}
#ms .item-4 {
  width: calc((100% - var(--col_gap)*3)/4 - 0.1px);
  /* height: auto; */
}





#ms h1, #ms h2, #ms h3, #ms h4, #ms h5, #ms h6 {
  padding: 0.25em 0;
  font-family: 'Oswald', sans-serif;
}


#ms p {
  font-size: 100%;
  padding: 0.75em 0;
}

#ms a {
  font-size: 100%;
  color: inherit;
  text-decoration: none;
}

#ms a:visited {
  color: inherit;
}

#ms ol {
  padding: 0;
  /* padding: 0 0.75em; */
}
#ms ol > li {
  display: list-item;
  list-style: disc;
  list-style-position: inside;
}


/* Для секции */
#ms .s-center { align-items: center; }
#ms .s-left { align-items: start; }
#ms .s-right { align-items: end; }
#ms .s-auto { align-self:auto; }

/* Для блока */
#ms .b-center { align-self: center; }
#ms .b-left { align-self: start; }
#ms .b-right { align-self: end; }
#ms .b-auto { align-self:auto; }

/* Для текста */
#ms .t-center { text-align: center; }
#ms .t-left { text-align: left; }
#ms .t-right { text-align: right; }
#ms .t-justify { text-align: justify; }






#ms .fw-100 { font-weight: 100; }
#ms .fw-200 { font-weight: 200; }
#ms .fw-300 { font-weight: 300; }
#ms .fw-400 { font-weight: 400; }
#ms .fw-500 { font-weight: 500; }
#ms .fw-600 { font-weight: 600; }
#ms .fw-700 { font-weight: 700; }
#ms .fw-800 { font-weight: 800; }
#ms .fw-900 { font-weight: 900; }




#ms .font-size-50 { font-size: calc(50% + ((100vw - 360px) / 240)); }
#ms .font-size-60 { font-size: calc(60% + ((100vw - 360px) / 240)); }
#ms .font-size-70 { font-size: calc(70% + ((100vw - 360px) / 240)); }
#ms .font-size-80 { font-size: calc(80% + ((100vw - 360px) / 240)); }
#ms .font-size-90 { font-size: calc(90% + ((100vw - 360px) / 240)); }
#ms .font-size-100 { font-size: calc(100% + ((100vw - 360px) / 240)); }
#ms .font-size-105 { font-size: calc(105% + ((100vw - 360px) / 240)); }
#ms .font-size-110 { font-size: calc(110% + ((100vw - 360px) / 240)); }
#ms .font-size-115 { font-size: calc(115% + ((100vw - 360px) / 240)); }
#ms .font-size-120 { font-size: calc(120% + ((100vw - 360px) / 240)); }
#ms .font-size-125 { font-size: calc(125% + ((100vw - 360px) / 240)); }
#ms .font-size-130 { font-size: calc(130% + ((100vw - 360px) / 240)); }
#ms .font-size-140 { font-size: calc(140% + ((100vw - 360px) / 240)); }
#ms .font-size-145 { font-size: calc(145% + ((100vw - 360px) / 240)); }
#ms .font-size-150 { font-size: calc(150% + ((100vw - 360px) / 240)); }
#ms .font-size-160 { font-size: calc(160% + ((100vw - 360px) / 240)); }
#ms .font-size-180 { font-size: calc(180% + ((100vw - 360px) / 240)); }
#ms .font-size-200 { font-size: calc(200% + ((100vw - 360px) / 240)); }
#ms .font-size-210 { font-size: calc(210% + ((100vw - 360px) / 240)); }
#ms .font-size-220 { font-size: calc(220% + ((100vw - 360px) / 240)); }
#ms .font-size-230 { font-size: calc(230% + ((100vw - 360px) / 240)); }
#ms .font-size-240 { font-size: calc(240% + ((100vw - 360px) / 240)); }
#ms .font-size-250 { font-size: calc(250% + ((100vw - 360px) / 240)); }
#ms .font-size-260 { font-size: calc(260% + ((100vw - 360px) / 240)); }
#ms .font-size-270 { font-size: calc(270% + ((100vw - 360px) / 240)); }
#ms .font-size-280 { font-size: calc(280% + ((100vw - 360px) / 240)); }
#ms .font-size-290 { font-size: calc(290% + ((100vw - 360px) / 240)); }
#ms .font-size-300 { font-size: calc(300% + ((100vw - 360px) / 240)); }


#ms .p-0 { padding: 0; }
#ms .p-010 { padding: 0.1em; }
#ms .p-015 { padding: 0.15em; }
#ms .p-020 { padding: 0.2em; }
#ms .p-025 { padding: 0.25em; }
#ms .p-030 { padding: 0.3em; }
#ms .p-035 { padding: 0.35em; }
#ms .p-040 { padding: 0.4em; }
#ms .p-045 { padding: 0.45em; }
#ms .p-050 { padding: 0.5em; }
#ms .p-055 { padding: 0.55em; }
#ms .p-060 { padding: 0.6em; }
#ms .p-065 { padding: 0.65em; }
#ms .p-070 { padding: 0.7em; }
#ms .p-075 { padding: 0.75em; }
#ms .p-080 { padding: 0.8em; }
#ms .p-085 { padding: 0.85em; }
#ms .p-090 { padding: 0.9em; }
#ms .p-095 { padding: 0.95em; }
#ms .p-100 { padding: 1em; }
#ms .p-125 { padding: 1.25em; }
#ms .p-150 { padding: 1.5em; }
#ms .p-175 { padding: 1.75em; }
#ms .p-200 { padding: 2em; }
#ms .p-225 { padding: 2.25em; }
#ms .p-250 { padding: 2.5em; }
#ms .p-275 { padding: 2.75em; }
#ms .p-300 { padding: 3em; }
#ms .p-400 { padding: 4em; }
#ms .p-500 { padding: 5em; }
#ms .p-600 { padding: 6em; }
#ms .p-700 { padding: 7em; }
#ms .p-800 { padding: 8em; }
#ms .p-900 { padding: 9em; }
#ms .p-1000 { padding: 10em; }


#ms .px-0 { padding-left: 0; padding-right: 0; }
#ms .px-010 { padding-left: 0.1em; padding-right: 0.1em; }
#ms .px-015 { padding-left: 0.15em; padding-right: 0.15em; }
#ms .px-020 { padding-left: 0.2em; padding-right: 0.2em; }
#ms .px-025 { padding-left: 0.25em; padding-right: 0.25em; }
#ms .px-030 { padding-left: 0.3em; padding-right: 0.3em; }
#ms .px-035 { padding-left: 0.35em; padding-right: 0.35em; }
#ms .px-040 { padding-left: 0.4em; padding-right: 0.4em; }
#ms .px-045 { padding-left: 0.45em; padding-right: 0.45em; }
#ms .px-050 { padding-left: 0.5em; padding-right: 0.5em; }
#ms .px-055 { padding-left: 0.55em; padding-right: 0.55em; }
#ms .px-060 { padding-left: 0.6em; padding-right: 0.6em; }
#ms .px-065 { padding-left: 0.65em; padding-right: 0.65em; }
#ms .px-070 { padding-left: 0.7em; padding-right: 0.7em; }
#ms .px-075 { padding-left: 0.75em; padding-right: 0.75em; }
#ms .px-080 { padding-left: 0.8em; padding-right: 0.8em; }
#ms .px-085 { padding-left: 0.85em; padding-right: 0.85em; }
#ms .px-090 { padding-left: 0.9em; padding-right: 0.9em; }
#ms .px-095 { padding-left: 0.95em; padding-right: 0.95em; }
#ms .px-100 { padding-left: 1em; padding-right: 1em; }
#ms .px-125 { padding-left: 1.25em; padding-right: 1.25em; }
#ms .px-150 { padding-left: 1.5em; padding-right: 1.5em; }
#ms .px-175 { padding-left: 1.75em; padding-right: 1.75em; }
#ms .px-200 { padding-left: 2em; padding-right: 2em; }
#ms .px-225 { padding-left: 2.25em; padding-right: 2.25em; }
#ms .px-250 { padding-left: 2.5em; padding-right: 2.5em; }
#ms .px-275 { padding-left: 2.75em; padding-right: 2.75em; }
#ms .px-300 { padding-left: 3em; padding-right: 3em; }
#ms .px-400 { padding-left: 4em; padding-right: 4em; }
#ms .px-500 { padding-left: 5em; padding-right: 5em; }
#ms .px-600 { padding-left: 6em; padding-right: 6em; }
#ms .px-700 { padding-left: 7em; padding-right: 7em; }
#ms .px-800 { padding-left: 8em; padding-right: 8em; }
#ms .px-900 { padding-left: 9em; padding-right: 9em; }
#ms .px-1000 { padding-left: 10em; padding-right: 10em; }


#ms .py-0 { padding-top: 0; padding-bottom: 0; }
#ms .py-010 { padding-top: 0.1em; padding-bottom: 0.1em; }
#ms .py-015 { padding-top: 0.15em; padding-bottom: 0.15em; }
#ms .py-020 { padding-top: 0.2em; padding-bottom: 0.2em; }
#ms .py-025 { padding-top: 0.25em; padding-bottom: 0.25em; }
#ms .py-030 { padding-top: 0.3em; padding-bottom: 0.3em; }
#ms .py-035 { padding-top: 0.35em; padding-bottom: 0.35em; }
#ms .py-040 { padding-top: 0.4em; padding-bottom: 0.4em; }
#ms .py-045 { padding-top: 0.45em; padding-bottom: 0.45em; }
#ms .py-050 { padding-top: 0.5em; padding-bottom: 0.5em; }
#ms .py-055 { padding-top: 0.55em; padding-bottom: 0.55em; }
#ms .py-060 { padding-top: 0.6em; padding-bottom: 0.6em; }
#ms .py-065 { padding-top: 0.65em; padding-bottom: 0.65em; }
#ms .py-070 { padding-top: 0.7em; padding-bottom: 0.7em; }
#ms .py-075 { padding-top: 0.75em; padding-bottom: 0.75em; }
#ms .py-080 { padding-top: 0.8em; padding-bottom: 0.8em; }
#ms .py-085 { padding-top: 0.85em; padding-bottom: 0.85em; }
#ms .py-090 { padding-top: 0.9em; padding-bottom: 0.9em; }
#ms .py-095 { padding-top: 0.95em; padding-bottom: 0.95em; }
#ms .py-100 { padding-top: 1em; padding-bottom: 1em; }
#ms .py-125 { padding-top: 1.25em; padding-bottom: 1.25em; }
#ms .py-150 { padding-top: 1.5em; padding-bottom: 1.5em; }
#ms .py-175 { padding-top: 1.75em; padding-bottom: 1.75em; }
#ms .py-200 { padding-top: 2em; padding-bottom: 2em; }
#ms .py-225 { padding-top: 2.25em; padding-bottom: 2.25em; }
#ms .py-250 { padding-top: 2.5em; padding-bottom: 2.5em; }
#ms .py-275 { padding-top: 2.75em; padding-bottom: 2.75em; }
#ms .py-300 { padding-top: 3em; padding-bottom: 3em; }
#ms .py-400 { padding-top: 4em; padding-bottom: 4em; }
#ms .py-500 { padding-top: 5em; padding-bottom: 5em; }
#ms .py-600 { padding-top: 6em; padding-bottom: 6em; }
#ms .py-700 { padding-top: 7em; padding-bottom: 7em; }
#ms .py-800 { padding-top: 8em; padding-bottom: 8em; }
#ms .py-900 { padding-top: 9em; padding-bottom: 9em; }
#ms .py-1000 { padding-top: 10em; padding-bottom: 10em; }


#ms .pt-0 { padding-top: 0; }
#ms .pt-010 { padding-top: 0.1em; }
#ms .pt-015 { padding-top: 0.15em; }
#ms .pt-020 { padding-top: 0.2em; }
#ms .pt-025 { padding-top: 0.25em; }
#ms .pt-030 { padding-top: 0.3em; }
#ms .pt-035 { padding-top: 0.35em; }
#ms .pt-040 { padding-top: 0.4em; }
#ms .pt-045 { padding-top: 0.45em; }
#ms .pt-050 { padding-top: 0.5em; }
#ms .pt-055 { padding-top: 0.55em; }
#ms .pt-060 { padding-top: 0.6em; }
#ms .pt-065 { padding-top: 0.65em; }
#ms .pt-070 { padding-top: 0.7em; }
#ms .pt-075 { padding-top: 0.75em; }
#ms .pt-080 { padding-top: 0.8em; }
#ms .pt-085 { padding-top: 0.85em; }
#ms .pt-090 { padding-top: 0.9em; }
#ms .pt-095 { padding-top: 0.95em; }
#ms .pt-100 { padding-top: 1em; }
#ms .pt-125 { padding-top: 1.25em; }
#ms .pt-150 { padding-top: 1.5em; }
#ms .pt-175 { padding-top: 1.75em; }
#ms .pt-200 { padding-top: 2em; }
#ms .pt-225 { padding-top: 2.25em; }
#ms .pt-250 { padding-top: 2.5em; }
#ms .pt-275 { padding-top: 2.75em; }
#ms .pt-300 { padding-top: 3em; }
#ms .pt-350 { padding-top: 3.5em; }
#ms .pt-400 { padding-top: 4em; }
#ms .pt-450 { padding-top: 4.5em; }
#ms .pt-500 { padding-top: 5em; }
#ms .pt-600 { padding-top: 6em; }
#ms .pt-700 { padding-top: 7em; }
#ms .pt-800 { padding-top: 8em; }
#ms .pt-900 { padding-top: 9em; }
#ms .pt-1000 { padding-top: 10em; }


#ms .pb-0 { padding-bottom: 0; }
#ms .pb-010 { padding-bottom: 0.1em; }
#ms .pb-015 { padding-bottom: 0.15em; }
#ms .pb-020 { padding-bottom: 0.2em; }
#ms .pb-025 { padding-bottom: 0.25em; }
#ms .pb-030 { padding-bottom: 0.3em; }
#ms .pb-035 { padding-bottom: 0.35em; }
#ms .pb-040 { padding-bottom: 0.4em; }
#ms .pb-045 { padding-bottom: 0.45em; }
#ms .pb-050 { padding-bottom: 0.5em; }
#ms .pb-055 { padding-bottom: 0.55em; }
#ms .pb-060 { padding-bottom: 0.6em; }
#ms .pb-065 { padding-bottom: 0.65em; }
#ms .pb-070 { padding-bottom: 0.7em; }
#ms .pb-075 { padding-bottom: 0.75em; }
#ms .pb-080 { padding-bottom: 0.8em; }
#ms .pb-085 { padding-bottom: 0.85em; }
#ms .pb-090 { padding-bottom: 0.9em; }
#ms .pb-095 { padding-bottom: 0.95em; }
#ms .pb-100 { padding-bottom: 1em; }
#ms .pb-125 { padding-bottom: 1.25em; }
#ms .pb-150 { padding-bottom: 1.5em; }
#ms .pb-175 { padding-bottom: 1.75em; }
#ms .pb-200 { padding-bottom: 2em; }
#ms .pb-225 { padding-bottom: 2.25em; }
#ms .pb-250 { padding-bottom: 2.5em; }
#ms .pb-275 { padding-bottom: 2.75em; }
#ms .pb-300 { padding-bottom: 3em; }
#ms .pb-400 { padding-bottom: 4em; }
#ms .pb-500 { padding-bottom: 5em; }
#ms .pb-600 { padding-bottom: 6em; }
#ms .pb-700 { padding-bottom: 7em; }
#ms .pb-800 { padding-bottom: 8em; }
#ms .pb-900 { padding-bottom: 9em; }
#ms .pb-1000 { padding-bottom: 10em; }


#ms .pl-0 { padding-left: 0; }
#ms .pl-010 { padding-left: 0.1em; }
#ms .pl-015 { padding-left: 0.15em; }
#ms .pl-020 { padding-left: 0.2em; }
#ms .pl-025 { padding-left: 0.25em; }
#ms .pl-030 { padding-left: 0.3em; }
#ms .pl-035 { padding-left: 0.35em; }
#ms .pl-040 { padding-left: 0.4em; }
#ms .pl-045 { padding-left: 0.45em; }
#ms .pl-050 { padding-left: 0.5em; }
#ms .pl-055 { padding-left: 0.55em; }
#ms .pl-060 { padding-left: 0.6em; }
#ms .pl-065 { padding-left: 0.65em; }
#ms .pl-070 { padding-left: 0.7em; }
#ms .pl-075 { padding-left: 0.75em; }
#ms .pl-080 { padding-left: 0.8em; }
#ms .pl-085 { padding-left: 0.85em; }
#ms .pl-090 { padding-left: 0.9em; }
#ms .pl-095 { padding-left: 0.95em; }
#ms .pl-100 { padding-left: 1em; }
#ms .pl-125 { padding-left: 1.25em; }
#ms .pl-150 { padding-left: 1.5em; }
#ms .pl-175 { padding-left: 1.75em; }
#ms .pl-200 { padding-left: 2em; }
#ms .pl-225 { padding-left: 2.25em; }
#ms .pl-250 { padding-left: 2.5em; }
#ms .pl-275 { padding-left: 2.75em; }
#ms .pl-300 { padding-left: 3em; }
#ms .pl-400 { padding-left: 4em; }
#ms .pl-500 { padding-left: 5em; }
#ms .pl-600 { padding-left: 6em; }
#ms .pl-700 { padding-left: 7em; }
#ms .pl-800 { padding-left: 8em; }
#ms .pl-900 { padding-left: 9em; }
#ms .pl-1000 { padding-left: 10em; }


#ms .pr-0 { padding-right: 0; }
#ms .pr-010 { padding-right: 0.1em; }
#ms .pr-015 { padding-right: 0.15em; }
#ms .pr-020 { padding-right: 0.2em; }
#ms .pr-025 { padding-right: 0.25em; }
#ms .pr-030 { padding-right: 0.3em; }
#ms .pr-035 { padding-right: 0.35em; }
#ms .pr-040 { padding-right: 0.4em; }
#ms .pr-045 { padding-right: 0.45em; }
#ms .pr-050 { padding-right: 0.5em; }
#ms .pr-055 { padding-right: 0.55em; }
#ms .pr-060 { padding-right: 0.6em; }
#ms .pr-065 { padding-right: 0.65em; }
#ms .pr-070 { padding-right: 0.7em; }
#ms .pr-075 { padding-right: 0.75em; }
#ms .pr-080 { padding-right: 0.8em; }
#ms .pr-085 { padding-right: 0.85em; }
#ms .pr-090 { padding-right: 0.9em; }
#ms .pr-095 { padding-right: 0.95em; }
#ms .pr-100 { padding-right: 1em; }
#ms .pr-125 { padding-right: 1.25em; }
#ms .pr-150 { padding-right: 1.5em; }
#ms .pr-175 { padding-right: 1.75em; }
#ms .pr-200 { padding-right: 2em; }
#ms .pr-225 { padding-right: 2.25em; }
#ms .pr-250 { padding-right: 2.5em; }
#ms .pr-275 { padding-right: 2.75em; }
#ms .pr-300 { padding-right: 3em; }
#ms .pr-400 { padding-right: 4em; }
#ms .pr-500 { padding-right: 5em; }
#ms .pr-600 { padding-right: 6em; }
#ms .pr-700 { padding-right: 7em; }
#ms .pr-800 { padding-right: 8em; }
#ms .pr-900 { padding-right: 9em; }
#ms .pr-1000 { padding-right: 10em; }

#ms .max-width-320 { max-width: 320px; width: 100%; }
#ms .max-width-375 { max-width: 375px; width: 100%; }
#ms .max-width-425 { max-width: 425px; width: 100%; }
#ms .max-width-480 { max-width: 480px; width: 100%; }
#ms .max-width-670 { max-width: 670px; width: 100%; }
#ms .max-width-768 { max-width: 768px; width: 100%; }
#ms .max-width-1024 { max-width: 1024px; width: 100%; }
#ms .max-width-1200 { max-width: 1200px; width: 100%; }
#ms .max-width-1440 { max-width: 1440px; width: 100%; }
#ms .max-width-1920 { max-width: 1920px; width: 100%; }

#ms .kvd        { aspect-ratio: 1 / 1; }   /* Квадрат */
#ms .alb        { aspect-ratio: 16 / 9; }  /* Альбом - Современное видео, презентации, YouTube*/
#ms .alb-2      { aspect-ratio: 3 / 2; }   /* Альбом - Фотоаппараты, горизонтальные обложки */
#ms .alb-old    { aspect-ratio: 4 / 3; }   /* Альбом - Старые экраны, ретро */
#ms .prt        { aspect-ratio: 2 / 3; }   /* Портрет - Современные вертикальные фото */
#ms .prt-shorts { aspect-ratio: 9 / 16; }  /* Портрет - Вертикальные видео, Reels, TikTok, YouTube */
#ms .prt-old    { aspect-ratio: 3 / 4; }   /* Портрет - Старые ID-фото, бумажные форматы */

/* Вставка image в html без обертки */
#ms img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* Соотношение сторон 1:1, измените по необходимости */
  object-fit: cover;
  object-position: center;
  background-color: grey;
}
/* Вставка картинки в html с оберткой */
#ms .wrap-img {
  position: relative;
  overflow: hidden;
  padding: 0 0 100% 0;
}
#ms .wrap-img > img {
  position: absolute;
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
/* Вставка картинки внутри абзацев */
#ms p > img.img-left {
  float: left;
  border: 1px solid #c8c8c8;
  margin: 0.3em 0.5em 0 0;
}
#ms p > img.img-right {
  float: right;
  border: 1px solid #c8c8c8;
  margin: 0.3em 0 0 0.5em;
}


/* Вставка background-image JPG-PNG в html */
#ms .bg-img {
  position: relative;
  border-radius: 4px;
}
#ms .bg-img::before {
  background-image: var(--img-url);  /* переменная img-url в html */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(0.1rem);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  height: 100%;
  border: 1px solid #a7a7a7;
}
#ms .bg-img::after {
  content: "";
  position: absolute;
  background-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.75) 100%);
  background-position: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  filter: blur(0.1rem);
  height: 100%;
  border: 1px solid #fff;
}



/* Вставка иконки через иконочный шрифт в псевдоэлементе CSS */
#ms .icon-font {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#ms .icon-font::before {
  content: "\f111"; /* обводка - круг */
  font-family: my_font;
  font-size: 4em;
  line-height: 0.87;
  color: #308bf3;
}
#ms .icon-font::after {
  /* font-family: my_font;
  content: "\f219"; */
  content: attr(data-content); /* атрибут data-content в html */
  font-size: 2em;
  position: absolute;
  color: #fff;
}


/* Вставка иконки JPG-PNG через псевдоэлемент в CSS */
#ms .icon-img-url {
  display: flex;
  position: relative;
  min-height: 3.5em;
  min-width: 3.5em;
}
#ms .icon-img-url::before {
  content: '';
  position: absolute;
  background-image: var(--img-url); /* переменная img-url в html */
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100%;
  width: 100%;
}

/* Вставка иконки SVG через псевдоэлемент в CSS */
#ms .icon-svg-url {
  display: flex;
  min-height: 3.5em;
  min-width: 3.5em;
  justify-content: center;
  align-items: center;
  /* 
  обводка - круг
  border: 3px solid red;
  border-radius: 64px; 
  */
}
#ms .icon-svg-url::before {
  content: '';
  display: flex;
  position: relative;
  -webkit-mask-image: var(--img-url); /* переменная img-url в html */
  mask-image: var(--img-url); /* переменная img-url в html */
  mask-image: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: #03ab6c;
  min-height: 3.5em;
  min-width: 3.5em;
}

/* Вставка иконки SVG в html */
#ms svg.icon-svg {
  width: 3.5em;
  fill: #03ab6c;
}

/* Вставка иконки JPG-PNG в html */
#ms img.icon-img {
  width: 3.5em;
}




#ms .spoiler {
  cursor: pointer;
}
#ms .is-hidden {
  /* display: none !important; */
  transition: all 1s ease-out;
  max-height: 0;
  overflow: hidden;
  /* transition: max-height 0.5s ease-out; */
  opacity: 0;
}
#ms .is-hidden-hard {
  display: none !important;
}
#ms .hyphens {
  hyphens: auto;
}
#ms .crop {
  text-overflow: ellipsis; /* Добавляем многоточие в конце */
}
#ms .uppercase {
  text-transform: uppercase;
}
#ms .italic {
  font-style: italic;
}

#ms .underline {
  text-decoration: underline;
}

#ms .link-visibly {
text-decoration: underline;
color: deepskyblue;
cursor: pointer;
}


/* a:has([data-blo]){
  color: red;
} */




























/* @MEDIA #################### */

@media only screen and (max-width : 670px) {
  #ms header {
    justify-content: space-between;
    padding: 0.5em calc(4% + (100vw - 360px) /100);
  }
  #ms header.header {
    min-height: 4em;
  }

  #ms ol.row li {
    flex-direction: column;
  }



}

















/* @MEDIA #################### */

@media only screen and (min-width:320px) and (max-width:375px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3, #ms .item-2, #ms .item-1 {
    width: 100%;
  }
  #ms .columns-4, #ms .columns-3, #ms .columns-2 {
    column-count: 1;
  }
  /* #ms address.header__address {
    display: none;
  } */
  #ms address.header__address .icon-phone-squared::before {
    display: none;
  }

}

@media only screen and (min-width:376px) and (max-width:480px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3, #ms .item-2, #ms .item-1 {
    width: 100%;
  }
  #ms .columns-4, #ms .columns-3, #ms .columns-2 {
    column-count: 1;
  }
  /* #ms address.header__address {
    display: none;
  } */
  #ms address.header__address .icon-phone-squared::before {
    display: none;
  } 
}

@media only screen and (min-width:481px) and (max-width:670px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3, #ms .item-2 {
    /* width: calc(100%/2); */
    width: calc((100% - var(--col_gap))/2 - 0.1px);
  }
  #ms .columns-4, #ms .columns-3 {
    column-count: 2;
  }

}

@media only screen and (min-width:671px) and (max-width:768px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3, #ms .item-2 {
    /* width: calc(100%/2); */
    width: calc((100% - var(--col_gap))/2 - 0.1px);
  }
  #ms .columns-4, #ms .columns-3 {
    column-count: 2;
  }
}

@media only screen and (min-width: 769px) and (max-width: 980px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3 {
    /* width: calc(100%/3); */
    width: calc((100% - var(--col_gap)*2)/3 - 0.1px);
  }
  #ms .columns-4 {
    column-count: 3;
  }
}

@media only screen and (min-width: 981px) and (max-width: 1024px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    font-size: 8px;
  }
  #ms .item-4, #ms .item-3 {
    /* width: calc(100%/3); */
    width: calc((100% - var(--col_gap)*2)/3 - 0.1px);
  }
  #ms .columns-4 {
    column-count: 3;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  :root {
    --root-base-font-size: 9px;
  }
  html {
    font-size: 9px;
  }
}

@media only screen and (min-width: 1281px) and (max-width: 1366px) {
  :root {
    --root-base-font-size: 9px;
  }
  html {
    font-size: 9px;
  }
}

@media only screen and (min-width: 1367px) and (max-width: 1600px) {
  :root {
    --root-base-font-size: 10px;
  }
  html {
    font-size: 10px;
  }
}

@media only screen and (min-width: 1601px) and (max-width: 1920px) {
  :root {
    --root-base-font-size: 10px;
  }
  html {
    /* font-size: 11px; */
    font-size: 10px;
  }
}

@media only screen and (min-width: 1921px) and (max-width: 2048px) {
  :root {
    --root-base-font-size: 9px;
  }
  html {
    /* font-size: 12px; */
    font-size: 9px;
  }
}

@media only screen and (min-width: 2049px) and (max-width: 2560px) {
  :root {
    --root-base-font-size: 8px;
  }
  html {
    /* font-size: 16px; */
    /* font-size: 12px; */
    font-size: 8px;
  }
}

@media only screen and (min-width: 2561px) {
  :root {
    --root-base-font-size: 7px;
  }
  html {
    /* font-size: 20px; */
    /* font-size: 12px; */
    font-size: 7px;
  }
}





/* 3440px x 1440px (UltraWide мониторы)
3840px x 2160px (4K, Ultra HD, стандартное разрешение для многих современных мониторов)
5120px x 2880px (5K, некоторые мониторы)
7680px x 4320px (8K, некоторые мониторы) */