/* =================== */
/* =================== */
/*   © 		*/
/* =================== */

/* === =  Размер шрифта (процент от базового)  = === */
.fs-0-1em {
  font-size: 0.1em
}
.fs-0-2em {
  font-size: 0.2em
}
.fs-0-3em {
  font-size: 0.3em
}
.fs-0-4em {
  font-size: 0.4em
}
.fs-0-5em {
  font-size: 0.5em
}
.fs-0-6em {
  font-size: 0.6em
}
.fs-0-7em {
  font-size: 0.7em
}
.fs-0-8em {
  font-size: 0.8em
}
.fs-0-9em {
  font-size: 0.9em
}
.fs-1em {
  font-size: 1em
}
.fs-1-1em {
  font-size: 1.1em
}
.fs-1-2em {
  font-size: 1.2em
}
.fs-1-3em {
  font-size: 1.3em
}
.fs-1-4em {
  font-size: 1.4em
}
.fs-1-5em {
  font-size: 1.5em
}
.fs-1-6em {
  font-size: 1.6em
}
.fs-1-7em {
  font-size: 1.7em
}
.fs-1-8em {
  font-size: 1.8em
}
.fs-1-9em {
  font-size: 1.9em
}
.fs-2em {
  font-size: 2em
}

/* === =  Жирность шрифта  = === */

.b-1 {
  font-weight: 100
}

/* 100 - это самый тонкий */
.b-2 {
  font-weight: 200
}
.b-3 {
  font-weight: 300
}
.b-4 {
  font-weight: 400
}

/* 400 - это normal */
.b-5 {
  font-weight: 500
}
.b-6 {
  font-weight: 600
}
.b-7 {
  font-weight: 700
}

/* 700 - это bold */
.b-8 {
  font-weight: 800
}
.b-9 {
  font-weight: 900
}

/* 900 - это сверхжирный */


/* === =  Другие преобразования со шрифта  = === */

.fs-n {
  font-style: normal
}
.fs-i {
  font-style: italic
}

/* наклонный шрифт */
.fs-o {
  font-style: oblique
}

/* наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо */

.td-n {
  text-decoration: none !important;
}
.td-o {
  text-decoration: overline
}

/* линия проходит над текстом */
.td-u {
  text-decoration: underline
}

/* нижнее подчеркивание */
.td-lt {
  text-decoration: line-through
}

/* перечеркивает текст */


/* === =  Вертикальное выравнивание  = === */

.va-t {
  vertical-align: top
}
.va-sub {
  vertical-align: sub
}
.va-m {
  vertical-align: middle
}
.va-b {
  vertical-align: bottom
}
.va-sup {
  vertical-align: super
}
.va-tt {
  vertical-align: text-top
}
.va-bsl {
  vertical-align: baseline
}
.va-tb {
  vertical-align: text-bottom
}


/* === =  Горизонтальное выравнивание  = === */

.ta-l {
  text-align: left
}
.ta-r {
  text-align: right
}
.ta-c {
  text-align: center
}


/* === =  Расстояние между границами ячеек  = === */
/* Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное */

.bs-1 {
  border-spacing: 1px
}
.bs-2 {
  border-spacing: 2px
}
.bs-3 {
  border-spacing: 3px
}
.bs-4 {
  border-spacing: 4px
}
.bs-5 {
  border-spacing: 5px
}


/* === =  Float  = === */

.f-n {
  float: none
}
.f-l {
  float: left
}
.f-r {
  float: right
}


.c-b {
  clear: both
}
.c-l {
  clear: left
}
.c-r {
  clear: right
}


/* === =  Display  = === */

.d-n {
  display: none
}
.d-t {
  display: table
}
.d-b {
  display: block
}
.d-i {
  display: inline
}
.d-tr {
  display: table-row
}
.d-tc {
  display: table-cell;
}
.d-ib {
  display: inline-block
}


/* === =  White-Space  = === */

.ws-norm {
  white-space: normal
}
.ws-now {
  white-space: nowrap
}

/* пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление <br> переносит текст на новую строку */
.ws-pre {
  white-space: pre
}

/* текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки */
.ws-prel {
  white-space: pre-line
}

/* в тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область */
.ws-prew {
  white-space: pre-wrap
}

/* в тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку */


/* === =  Overflow  = === */

.o-a {
  overflow: auto
}

/* полосы прокрутки добавляются только при необходимости */
.o-h {
  overflow: hidden
}

/* отображается только область внутри элемента, остальное будет скрыто */
.o-s {
  overflow: scroll
}

/* всегда добавляются полосы прокрутки */
.o-v {
  overflow: visible
}

/* отображается всё содержимое элемента, даже за пределами установленной высоты и ширины */


/* === =  Table-Layout  = === */

.tl-a {
  table-layout: auto
}

/* браузер загружает всю таблицу, анализирует её для определения размеров ячеек и только после этого отображает */
.tl-f {
  table-layout: fixed
}

/* ширина колонок в этом случае определяется либо с помощью элемента <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы */


.p-rel {
  position: relative
}
.p-abs {
  position: absolute
}
.p-fix {
  position: fixed
}

/* фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы */
.p-sticky {
  position: sticky
}

/* это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице */

.w-9 {
  width: 9%
}
.w-10 {
  width: 10%
}
.w-15 {
  width: 15%
}
.w-20 {
  width: 20%
}
.w-25 {
  width: 25%
}
.w-28 {
  width: 28%
}
.w-30 {
  width: 30%
}
.w-32 {
  width: 32%
}
.w-33 {
  width: 33%
}
.w-35 {
  width: 35%
}
.w-37 {
  width: 37%
}
.w-40 {
  width: 40%
}
.w-42 {
  width: 42%
}
.w-43 {
  width: 43%
}
.w-45 {
  width: 45%
}
.w-50 {
  width: 50%
}
.w-55 {
  width: 55%
}
.w-60 {
  width: 60%
}
.w-65 {
  width: 65%
}
.w-70 {
  width: 70%
}
.w-75 {
  width: 75%
}
.w-80 {
  width: 80%
}
.w-85 {
  width: 85%
}
.w-90 {
  width: 90%
}
.w-95 {
  width: 95%
}
.w-97 {
  width: 97%;
}
.w-100 {
  width: 100%
}
.w-200px {
  width: 200px
}
.w-109px {
  width: 109px
}
.w-9 {
  width: 9%
}
.w-10 {
  width: 10%
}
.w-15 {
  width: 15%
}
.w-25 {
  width: 25%
}
.w-28 {
  width: 28%
}
.w-30 {
  width: 30%
}
.w-32 {
  width: 32%
}
.w-33 {
  width: 33%
}
.w-35 {
  width: 35%
}
.w-37 {
  width: 37%
}
.w-44 {
  width: 42%
}
.w-40 {
  width: 40%
}
.w-45 {
  width: 45%
}
.w-43 {
  width: 43%
}
.w-50 {
  width: 50%
}
.w-55 {
  width: 55%
}
.w-60 {
  width: 60%
}
.w-65 {
  width: 65%
}
.w-70 {
  width: 70%
}
.w-75 {
  width: 75%
}
.w-80 {
  width: 80%
}
.w-85 {
  width: 85%
}
.w-88 {
  width: 88%
}
.w-90 {
  width: 90%
}
.w-95 {
  width: 95%
}
.w-97 {
  width: 97%
}
.w-98 {
  width: 98%
}
.w-99 {
  width: 99%
}
.w-100 {
  width: 100%
}


.h-15 {
  height: 15%
}
.h-25 {
  height: 25%
}
.h-28 {
  height: 28%
}
.h-30 {
  height: 30%
}
.h-32 {
  height: 32%
}
.h-33 {
  height: 33%
}
.h-35 {
  height: 35%
}
.h-40 {
  height: 40%
}
.h-45 {
  height: 45%
}
.h-50 {
  height: 50%
}
.h-55 {
  height: 55%
}
.h-60 {
  height: 60%
}
.h-65 {
  height: 65%
}
.h-70 {
  height: 70%
}
.h-75 {
  height: 75%
}
.h-80 {
  height: 80%
}
.h-85 {
  height: 85%
}
.h-90 {
  height: 90%
}
.h-95 {
  height: 95%
}
.h-100 {
  height: 100%
}
.h-144 {
  height: 144px
}


.p-0 {
  padding: 0px
}
.p-1 {
  padding: 1px
}
.p-2 {
  padding: 2px
}
.p-3 {
  padding: 3px
}
.p-4 {
  padding: 4px
}
.p-5 {
  padding: 5px
}
.p-6 {
  padding: 6px
}
.p-7 {
  padding: 7px
}
.p-8 {
  padding: 8px
}
.p-9 {
  padding: 9px
}
.p-10 {
  padding: 10px
}

.pt-0 {
  padding-top: 0px
}
.pt-1 {
  padding-top: 1px
}
.pt-2 {
  padding-top: 2px
}
.pt-3 {
  padding-top: 3px
}
.pt-4 {
  padding-top: 4px
}
.pt-5 {
  padding-top: 5px
}
.pt-6 {
  padding-top: 6px
}
.pt-7 {
  padding-top: 7px
}
.pt-8 {
  padding-top: 8px
}
.pt-9 {
  padding-top: 9px
}
.pt-10 {
  padding-top: 10px
}
.pt-10 {
  padding-top: 10px
}
.pt-15 {
  padding-top: 15px
}

.pr-0 {
  padding-right: 0px
}
.pr-1 {
  padding-right: 1px
}
.pr-2 {
  padding-right: 2px
}
.pr-3 {
  padding-right: 3px
}
.pr-4 {
  padding-right: 4px
}
.pr-5 {
  padding-right: 5px
}
.pr-6 {
  padding-right: 6px
}
.pr-7 {
  padding-right: 7px
}
.pr-8 {
  padding-right: 8px
}
.pr-9 {
  padding-right: 9px
}
.pr-10 {
  padding-right: 10px
}

.pb-0 {
  padding-bottom: 0px
}
.pb-1 {
  padding-bottom: 1px
}
.pb-2 {
  padding-bottom: 2px
}
.pb-3 {
  padding-bottom: 3px
}
.pb-4 {
  padding-bottom: 4px
}
.pb-5 {
  padding-bottom: 5px
}
.pb-6 {
  padding-bottom: 6px
}
.pb-7 {
  padding-bottom: 7px
}
.pb-8 {
  padding-bottom: 8px
}
.pb-9 {
  padding-bottom: 9px
}
.pb-10 {
  padding-bottom: 10px
}

.pl-0 {
  padding-left: 0px
}
.pl-1 {
  padding-left: 1px
}
.pl-2 {
  padding-left: 2px
}
.pl-3 {
  padding-left: 3px
}
.pl-4 {
  padding-left: 4px
}
.pl-5 {
  padding-left: 5px
}
.pl-6 {
  padding-left: 6px
}
.pl-7 {
  padding-left: 7px
}
.pl-8 {
  padding-left: 8px
}
.pl-9 {
  padding-left: 9px
}
.pl-10 {
  padding-left: 10px
}

.ptm-1 {
  padding-top: -1px
}
.ptm-2 {
  padding-top: -2px
}
.ptm-3 {
  padding-top: -3px
}
.ptm-4 {
  padding-top: -4px
}
.ptm-5 {
  padding-top: -5px
}
.ptm-6 {
  padding-top: -6px
}
.ptm-7 {
  padding-top: -7px
}
.ptm-8 {
  padding-top: -8px
}
.ptm-9 {
  padding-top: -9px
}
.ptm-10 {
  padding-top: -10px
}

.prm-1 {
  padding-right: -1px
}
.prm-2 {
  padding-right: -2px
}
.prm-3 {
  padding-right: -3px
}
.prm-4 {
  padding-right: -4px
}
.prm-5 {
  padding-right: -5px
}
.prm-6 {
  padding-right: -6px
}
.prm-7 {
  padding-right: -7px
}
.prm-8 {
  padding-right: -8px
}
.prm-9 {
  padding-right: -9px
}
.prm-10 {
  padding-right: -10px
}

.pbm-1 {
  padding-bottom: -1px
}
.pbm-2 {
  padding-bottom: -2px
}
.pbm-3 {
  padding-bottom: -3px
}
.pbm-4 {
  padding-bottom: -4px
}
.pbm-5 {
  padding-bottom: -5px
}
.pbm-6 {
  padding-bottom: -6px
}
.pbm-7 {
  padding-bottom: -7px
}
.pbm-8 {
  padding-bottom: -8px
}
.pbm-9 {
  padding-bottom: -9px
}
.pbm-10 {
  padding-bottom: -10px
}

.plm-1 {
  padding-left: -4px
}
.plm-2 {
  padding-left: -2px
}
.plm-3 {
  padding-left: -3px
}
.plm-4 {
  padding-left: -4px
}
.plm-5 {
  padding-left: -5px
}
.plm-6 {
  padding-left: -6px
}
.plm-7 {
  padding-left: -7px
}
.plm-8 {
  padding-left: -8px
}
.plm-9 {
  padding-left: -9px
}
.plm-10 {
  padding-left: -10px
}

.m-a {
  margin: auto
}

.m-1 {
  margin: 1px
}
.m-2 {
  margin: 2px
}
.m-3 {
  margin: 3px
}
.m-4 {
  margin: 4px
}
.m-5 {
  margin: 5px
}
.m-6 {
  margin: 6px
}
.m-7 {
  margin: 7px
}
.m-8 {
  margin: 8px
}
.m-9 {
  margin: 9px
}
.m-10 {
  margin: 10px
}
.m-20 {
  margin: 20px
}

.mt-0 {
  margin-top: 0
}
.mt-1 {
  margin-top: 1px
}
.mt-2 {
  margin-top: 2px
}
.mt-3 {
  margin-top: 3px
}
.mt-4 {
  margin-top: 4px
}
.mt-5 {
  margin-top: 5px
}
.mt-6 {
  margin-top: 6px
}
.mt-7 {
  margin-top: 7px
}
.mt-8 {
  margin-top: 8px
}
.mt-9 {
  margin-top: 9px
}
.mt-10 {
  margin-top: 10px
}
.mt-14 {
  margin-top: 14px
}
.mt-15 {
  margin-top: 15px
}
.mt-30 {
  margin-top: 30px
}
.mt-36 {
  margin-top: 36px
}

.mb-0 {
  margin-bottom: 0
}
.mb-1 {
  margin-bottom: 1px
}
.mb-2 {
  margin-bottom: 2px
}
.mb-3 {
  margin-bottom: 3px
}
.mb-4 {
  margin-bottom: 4px
}
.mb-5 {
  margin-bottom: 5px
}
.mb-6 {
  margin-bottom: 6px
}
.mb-7 {
  margin-bottom: 7px
}
.mb-8 {
  margin-bottom: 8px
}
.mb-9 {
  margin-bottom: 9px
}
.mb-10 {
  margin-bottom: 10px
}
.mb-20 {
  margin-bottom: 20px;
}

.ml-0 {
  margin-left: 0
}
.ml-1 {
  margin-left: 1px
}
.ml-2 {
  margin-left: 2px
}
.ml-3 {
  margin-left: 3px
}
.ml-4 {
  margin-left: 4px
}
.ml-5 {
  margin-left: 5px
}
.ml-6 {
  margin-left: 6px
}
.ml-7 {
  margin-left: 7px
}
.ml-8 {
  margin-left: 8px
}
.ml-9 {
  margin-left: 9px
}
.ml-10 {
  margin-left: 10px
}
.ml-15 {
  margin-left: 15px
}

.mr-0 {
  margin-right: 0
}
.mr-1 {
  margin-right: 1px
}
.mr-2 {
  margin-right: 2px
}
.mr-3 {
  margin-right: 3px
}
.mr-4 {
  margin-right: 4px
}
.mr-5 {
  margin-right: 5px
}
.mr-6 {
  margin-right: 6px
}
.mr-7 {
  margin-right: 7px
}
.mr-8 {
  margin-right: 8px
}
.mr-9 {
  margin-right: 9px
}
.mr-10 {
  margin-right: 10px
}
.mr-15 {
  margin-right: 15px
}

.mtm-1 {
  margin-top: -1px
}
.mtm-2 {
  margin-top: -2px
}
.mtm-3 {
  margin-top: -3px
}
.mtm-4 {
  margin-top: -4px
}
.mtm-5 {
  margin-top: -5px
}
.mtm-6 {
  margin-top: -6px
}
.mtm-7 {
  margin-top: -7px
}
.mtm-8 {
  margin-top: -8px
}
.mtm-9 {
  margin-top: -9px
}
.mtm-10 {
  margin-top: -10px
}

.mr-1 {
  margin-right: -1px
}
.mrm-2 {
  margin-right: -2px
}
.mrm-3 {
  margin-right: -3px
}
.mrm-4 {
  margin-right: -4px
}
.mrm-5 {
  margin-right: -5px
}
.mrm-6 {
  margin-right: -6px
}
.mrm-7 {
  margin-right: -7px
}
.mrm-8 {
  margin-right: -8px
}
.mrm-9 {
  margin-right: -9px
}
.mrm-10 {
  margin-right: -10px
}

.mbm-1 {
  margin-bottom: -1px
}
.mbm-2 {
  margin-bottom: -2px
}
.mbm-3 {
  margin-bottom: -3px
}
.mbm-4 {
  margin-bottom: -4px
}
.mbm-5 {
  margin-bottom: -5px
}
.mbm-6 {
  margin-bottom: -6px
}
.mbm-7 {
  margin-bottom: -7px
}
.mbm-8 {
  margin-bottom: -8px
}
.mbm-9 {
  margin-bottom: -9px
}
.mbm-10 {
  margin-bottom: -10px
}

.mlm-1 {
  margin-left: -4px
}
.mlm-2 {
  margin-left: -2px
}
.mlm-3 {
  margin-left: -3px
}
.mlm-4 {
  margin-left: -4px
}
.mlm-5 {
  margin-left: -5px
}
.mlm-6 {
  margin-left: -6px
}
.mlm-7 {
  margin-left: -7px
}
.mlm-8 {
  margin-left: -8px
}
.mlm-9 {
  margin-left: -9px
}
.mlm-10 {
  margin-left: -10px
}

.mt-minus-3px {
  margin-top: -3px
}
.ml-minus-3px {
  margin-left: -3px
}
.mr-minus-3px {
  margin-right: -3px
}
.ml-minus-2px {
  margin-left: -2px
}
.mr-minus-2px {
  margin-right: -2px
}
.minus-trl-3px {
  margin-right: -3px;
  margin-left: -3px;
  margin-top: -3px
}