*,
::after,
::before {
  -webkit-box-sizing: border-box;
  box-sizing        : border-box
}

blockquote,
body,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
p {
  margin: 0
}

ol[role=list],
ul[role=list] {
  list-style: none
}

html:focus-within {
  scroll-behavior: smooth
}

html {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  min-width : 320px;
}

body {
  min-height           : 100vh;
  overflow             : hidden;
  text-rendering       : optimizeSpeed;
  line-height          : 1.5;
  display              : -webkit-box;
  display              : -ms-flexbox;
  display              : flex;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column
}

main {
  -webkit-box-flex: 1;
  -ms-flex        : 1 0 auto;
  flex            : 1 0 auto
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink    : auto;
  text-decoration             : none
}

img,
picture {
  max-width: 100%;
  display  : block
}

button,
input,
select,
textarea {
  font: inherit
}

button,
input[type=submit] {
  cursor: pointer
}

@media(prefers-reduced-motion:reduce) {
  html:focus-within {
    scroll-behavior: auto
  }

  *,
  ::after,
  ::before {
    -webkit-animation-duration       : .01ms !important;
    animation-duration               : .01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count        : 1 !important;
    -webkit-transition-duration      : .01ms !important;
    -o-transition-duration           : .01ms !important;
    transition-duration              : .01ms !important;
    scroll-behavior                  : auto !important
  }
}

/* #region Fonts */
@font-face {
  font-family: 'Montserrat';
  src        : local('Montserrat'),
    url('/fonts/Montserrat-Regular.woff2') format('woff2'),
    url('/fonts/Montserrat-Regular.woff') format('woff'),
    url('/fonts/Montserrat-Regular.ttf') format('truetype');
  font-display: swap;
  font-weight : 400;
  font-style  : normal;
}

@font-face {
  font-family: 'Montserrat';
  src        : local('Montserrat'),
    url('/fonts/Montserrat-Medium.woff2') format('woff2'),
    url('/fonts/Montserrat-Medium.woff') format('woff'),
    url('/fonts/Montserrat-Medium.ttf') format('truetype');
  font-display: swap;
  font-weight : 500;
  font-style  : normal;
}

@font-face {
  font-family: 'Montserrat';
  src        : local('Montserrat'),
    url('/fonts/Montserrat-SemiBold.woff2') format('woff2'),
    url('/fonts/Montserrat-SemiBold.woff') format('woff'),
    url('/fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-display: swap;
  font-weight : 600;
  font-style  : normal;
}

@font-face {
  font-family: 'Montserrat';
  src        : local('Montserrat'),
    url('/fonts/Montserrat-Bold.woff2') format('woff2'),
    url('/fonts/Montserrat-Bold.woff') format('woff'),
    url('/fonts/Montserrat-Bold.ttf') format('truetype');
  font-display: swap;
  font-weight : 700;
  font-style  : normal;
}

/* #endregion */

/* #region Main */
:root {
  --white     : #fff;
  --blue      : #2B71D9;
  --light-gray: #EBEBEB;
  --gray      : #818181;
  --dark-gray : #515151;
}

body {
  background-color: var(--white);
  font-family     : 'Montserrat', Arial, Helvetica, sans-serif;
  font-size       : 14px;
  font-weight     : 400;
  color           : var(--dark-gray);
}

.container {
  max-width: 1200px;
  width    : 100%;
  padding  : 0 15px;
  margin   : 0 auto;
}

.container.container--fw {
  max-width: 100%;
}

.banner__picture-img img{
    max-width: 690px;
    max-height: 499px;
}

/* #endregion */

/* #region UI */
.btn {
  border          : 1px solid var(--blue);
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  font-size       : 14px;
  font-weight     : 700;
  line-height     : 1.1;
  text-transform  : uppercase;
  letter-spacing  : .28em;
  color           : var(--white);
  padding         : 18px 20px;
  background-color: var(--blue);
  outline         : none;
  transition      : color 300ms ease, background-color 300ms ease;
}

a.btn {
  text-decoration: none;
}

.btn:hover,
.btn:focus {
  background-color: var(--white);
  color           : var(--blue);
}

.btn.btn--transparent {
  border-color: var(--white);
}

.btn.btn--transparent:hover,
.btn.btn--transparent:focus {
  color: var(--blue);
}

.btn.btn--arrow {
  position     : relative;
  padding-right: 55px;
}

.btn.btn--arrow::after {
  content   : url('https://api.iconify.design/gg/arrow-right.svg?color=%23FFF&width=27');
  position  : absolute;
  top       : 50%;
  transform : translateY(-50%);
  right     : 20px;
  transition: filter 300ms ease;
}

.btn.btn--arrow.btn--arrow--left::after {
  content: url('https://api.iconify.design/gg/arrow-left.svg?color=%23FFF&width=27');
}

.btn.btn--arrow:hover::after,
.btn.btn--arrow:focus::after {
  filter: brightness(35%);
}

.section__title {
  font-size  : 28px;
  font-weight: 700;
  line-height: 1;
  color      : var(--dark-gray);
  margin     : 0 0 13px;
  text-align : center;
}

.section__title.section__title--blue {
  color: var(--blue);
}

.section__title.section__title--small {
  font-size: 18px;
}

.section__text {
  font-size  : 18px;
  font-weight: 400;
  line-height: 1.3;
  margin     : 0 0 20px;
  color      : var(--dark-gray);
  text-align : center;
}

.form {
  display       : flex;
  flex-direction: column;
  width         : 100%;
}

.form__fields {
  display              : grid;
  grid-template-columns: 100%;
  row-gap              : 22px;
  column-gap           : 22px;
  width                : 100%;
}

.form__field {
  display        : flex;
  flex-direction : column;
  align-items    : flex-start;
  justify-content: flex-start;
}

.form__field.form__field--buttons {
  column-gap    : 15px;
  flex-direction: row;
  flex-wrap     : wrap;
}

.form__label {
  width           : 100%;
  background-color: var(--white);
  padding         : 9px 15px 8px 44px;
  position        : relative;
  transition      : background-color 300ms ease, border-color 300ms ease;
  display         : flex;
  align-items     : center;
  justify-content : flex-start;
  border          : 1px solid transparent;
}

.form__label:focus-within {
  background-color: var(--blue);
}

.form__label.form__label--bordered:focus-within {
  border-color: var(--white);
}

.form__icon {
  position   : absolute;
  left       : 14px;
  font-size  : 23px;
  line-height: 1;
  top        : 50%;
  transform  : translateY(-50%);
  color      : var(--dark-gray);
  transition : color 300ms ease;
}

.form__label:focus-within .form__icon {
  color: var(--white);
}

.form__input {
  padding    : 8px 0;
  width      : 100%;
  border     : 0;
  background : transparent;
  font-size  : 16px;
  font-weight: 400;
  line-height: 1;
  color      : var(--dark-gray);
  outline    : none;
}

.form__input::placeholder {
  color: var(--dark-gray);
}

.form__label:focus-within .form__input {
  color: var(--white);
}

.form__label:focus-within .form__input::placeholder {
  color: var(--white);
}

.form__doc {
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  font-size      : 14px;
  font-weight    : 600;
  line-height    : 1;
  color          : var(--white);
  column-gap     : 8px;
}

.form__doc>.iconify {
  font-size: 21px;
}

.form__field__list {
  padding              : 0;
  margin               : 0;
  width                : 100%;
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows       : minmax(140px, 1fr);
  column-gap           : 15px;
  row-gap              : 15px;
}

.form__field__list>li {
  display: flex;
}

.form__radio {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 100%;
  position       : relative;
  cursor         : pointer;
  user-select    : none;
}

.form__radio>input[type="radio"] {
  position: absolute;
  left    : 0;
  top     : 0;
  opacity : 0;
}

.form__radio__picture {
  display       : flex;
  flex-direction: column;
  position      : relative;
  height        : 100%;
  width         : 100%;
  object-fit    : contain;
  border        : 3px solid transparent;
  transition    : border-color 300ms ease;
}

.form__radio>input[type="radio"]:checked~.form__radio__picture {
  border-color: var(--blue);
}

.form__radio:focus-within .form__radio__picture {
  border-color: var(--dark-gray);
}

.form__radio__picture>figcaption {
  position        : absolute;
  bottom          : 0;
  left            : 0;
  width           : 100%;
  text-align      : center;
  font-size       : 12px;
  font-weight     : 400;
  line-height     : 1.5;
  letter-spacing  : .025rem;
  padding         : 8px 5px;
  color           : var(--light-gray);
  background-color: rgba(0, 0, 0, 0.479);
}

.form__radio__picture>picture {
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: center;
}

.form__radio__picture>picture>img {
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: center;
}

.form__span {
  font-size    : 14px;
  line-height  : initial;
  font-weight  : 500;
  color        : var(--dark-gray);
  margin-bottom: 8px;
}

.form__select {
  padding    : 8px 0;
  width      : 100%;
  border     : 0;
  background : transparent;
  font-size  : 16px;
  font-weight: 400;
  line-height: 1;
  color      : var(--dark-gray);
  outline    : none;
}

.form__label:focus-within .form__select {
  color: var(--white);
}

.form__label:focus-within .form__select::placeholder {
  color: var(--white);
}

.form__select option {
  color: var(--dark-gray);
}

.form__politics {
  text-align : center;
  margin-top : 15px;
  font-size  : 12px;
  font-weight: 400;
  line-height: initial;
  color      : var(--gray);
}

.form__steps {
  display       : flex;
  flex-direction: column;
  width         : 100%;
  row-gap       : 15px;
}

.form__step {
  flex-direction: column;
  row-gap       : 15px;
}

.form__step.form__step--center .form__field {
  align-items: center;
}

.form__step.--is_unactive {
  display: none;
}

.form__step.--is_active {
  -webkit-animation: form__step__active 1s forwards ease-out;
  animation        : form__step__active 1s forwards ease-out;
  display          : flex;
}

@-webkit-keyframes form__step__active {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: flex;
    opacity: 0;
  }

  100% {
    display: flex;
    opacity: 1;
  }
}

@keyframes tab_active {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: flex;
    opacity: 0;
  }

  100% {
    display: flex;
    opacity: 1;
  }
}

.form__steps__button {
  display        : flex;
  align-items    : center;
  justify-content: center;
  column-gap     : 15px;
  row-gap        : 15px;
}

.splide__arrow {
  background: transparent;
  width     : 26px;
  height    : 35px;
  opacity   : 1;
  padding   : 5px;
  color     : var(--gray);
}

.splide__arrow:hover {
  color: var(--blue);
}

.splide__arrow svg {
  fill  : inherit;
  height: auto;
  width : auto;
}

.splide__arrow--prev {
  left: -5em;
}

.splide__arrow--next {
  right: -5em;
}

.splide__pagination {
  position  : unset;
  margin-top: 40px;
}

.splide__pagination__page {
  background: var(--light-gray);
  margin    : 3px 6px;
}

.splide__pagination__page.is-active {
  background: var(--blue);
}

.glightbox {
  width           : 100%;
  height          : 100%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background-color: var(--dark-gray);
  transition      : opacity 300ms ease;
}

.glightbox:hover,
.glightbox:focus {
  opacity: .7;
}

table.table {
  margin         : 0;
  padding        : 0;
  border-collapse: collapse;
  border-spacing : 0;
  text-align     : left;
}

table.table tr {
  border : 1px solid #ddd;
  padding: 5px;
}

table.table th,
table.table td {
  padding     : 8px;
  border-right: 1px solid #ddd;
}

/* #endregion */

/* #region Header */
.header {
  padding   : 22px 0;
  position  : fixed;
  top       : 0;
  left      : 0;
  width     : 100%;
  z-index   : 5;
  transition: background 300ms ease, box-shadow 300ms ease, padding 300ms ease;
}

.header.--is_slicky {
  padding   : 12px 0;
  background: linear-gradient(to right, var(--white) 60%, var(--blue) 40%);
  box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.13);
}

.header.header--page {
  background: linear-gradient(to right, var(--white) 60%, var(--blue) 40%);
}

.header__inner {
  display              : grid;
  grid-template-columns: 1fr 40%;
  align-items          : center;
  column-gap           : 15px;
  row-gap              : 15px;
}

.header__logo {
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
}

.header__logo-link {
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  column-gap     : 20px;
  text-decoration: none;
  font-size      : 14px;
  line-height    : 1.3;
  font-weight    : 600;
  color          : var(--dark-gray);
  transition     : color 300ms ease, column-gap 300ms ease, font-size 300ms ease;
}

.header.--is_slicky .header__logo-link {
  column-gap: 10px;
  font-size : 12px;
}

.header__logo-link:hover,
.header__logo-link:focus {
  color: var(--blue);
}

.header__logo-pic {
  max-width : 140px;
  width     : 100%;
  object-fit: contain;
  transition: max-width 300ms ease;
}

.header.--is_slicky .header__logo-pic {
  max-width: 100px;
}

.header__logo-text {
  font-size  : inherit;
  color      : inherit;
  line-height: inherit;
  font-weight: inherit;
  max-width  : 280px;
}

.header__contacts {
  justify-self   : flex-end;
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
  column-gap     : 20px;
}

.header__contacts-link {
  display        : inline-flex;
  align-items    : center;
  justify-content: flex-start;
  column-gap     : 12px;
  text-decoration: none;
}

.header__contacts-link--ic {
  display    : flex;
  font-size  : 43px;
  line-height: 1;
  color      : var(--white);
  transition : font-size 300ms ease, color 300ms ease;
}

.header__contacts-link:hover .header__contacts-link--ic {
  color: var(--gray);
}

.header.--is_slicky .header__contacts-link--ic {
  font-size: 30px;
}

.header__contacts-link--wrap {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: flex-start;
  row-gap        : 6px;
}

.header__contacts-link--a {
  font-size  : 28px;
  font-weight: 700;
  line-height: 1;
  color      : var(--white);
  transition : color 300ms ease, font-size 300ms ease;
}

.header.--is_slicky .header__contacts-link--a {
  font-size: 22px;
}

.header__contacts-link--a:hover,
.header__contacts-link--a:focus {
  color: var(--gray);
}

.header__contacts-link--btn {
  border          : 0;
  background-color: transparent;
  text-decoration : none;
  font-size       : 14px;
  line-height     : 1;
  font-weight     : 700;
  color           : var(--white);
  text-align      : center;
  transition      : color 300ms ease, font-size 300ms ease, font-weight 300ms ease;
}

.header.--is_slicky .header__contacts-link--btn {
  font-size  : 12px;
  font-weight: 600;
}

.header__contacts-link--btn:hover,
.header__contacts-link--btn:focus {
  color: var(--gray);
}

.header__cart {
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.header__cart__link {
  display    : flex;
  font-size  : 43px;
  line-height: 1;
  color      : var(--white);
  transition : color 300ms ease, font-size 300ms ease;
}

.header.--is_slicky .header__cart__link {
  font-size: 30px;
}

.header__cart__link:hover,
.header__cart__link:focus {
  color: var(--gray);
}

/* #endregion */

/* #region Banner */
.banner {
  padding            : 145px 0 0;
  background         : var(--white);
  background         : var(--white) url('/img/bnr_back.jpg');
  background-position: right;
  background-size    : 40% 100%;
  background-repeat  : no-repeat;
}

.banner_inner {
  display              : grid;
  grid-template-columns: 516px 1fr;
  column-gap           : 15px;
  grid-row-gap         : 15px;
}

.banner__info {
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
}

.banner__pretitle {
  font-size     : 18px;
  line-height   : 1;
  font-weight   : 600;
  color         : var(--blue);
  letter-spacing: .29em;
  margin-bottom : 14px;
}

.banner__title {
  font-size    : 48px;
  font-weight  : 700;
  line-height  : 1.2;
  color        : var(--dark-gray);
  margin-bottom: 40px;
}

.banner__advantages {
  width                : 100%;
  padding              : 0;
  margin               : 0;
  display              : grid;
  list-style           : none;
  grid-template-columns: 1fr 1fr;
  row-gap              : 30px;
  column-gap           : 35px;
  margin-bottom        : 35px;
}

.banner__advantages>li {
  display        : flex;
  align-items    : flex-start;
  justify-content: flex-start;
  column-gap     : 11px;
  font-size      : 18px;
  font-weight    : 600;
  line-height    : 1;
  color          : var(--dark-gray);
}

.banner__advantages>li::before {
  content            : '';
  background         : url('/img/ul_arrow.svg');
  background-position: center;
  background-repeat  : no-repeat;
  background-size    : contain;
  min-width          : 24px;
  width              : 24px;
  height             : 24px;
}

.btn.btn--banner {
  padding-top   : 30px;
  padding-bottom: 30px;
  padding-left  : 44px;
  padding-right : 80px;
  transform     : translateY(50%);
}

.btn.btn--banner.btn--arrow::after {
  right: 45px;
}

.banner__picture-wrap {
  position       : relative;
  display        : flex;
  align-items    : flex-end;
  justify-content: flex-end;
}

.banner__picture-img {
  position : absolute;
  top      : calc(50% + 30px);
  min-width: 729px;
  transform: translate(114px, -50%);
}

/* #endregion */

/* #region Callback */
.callback {
  padding         : 70px 0 55px;
  background-color: var(--light-gray);
}

.callback__inner {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: flex-start;
}

.form.form--callback {
  max-width: 790px;
}

.form.form--callback .form__fields {
  grid-template-columns: 1fr 1fr 171px;
}

/* #endregion */

/* #region Advantages */
.advantages {
  padding      : 40px 0;
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 30px;
}

.advantages__inner {
  display       : flex;
  flex-direction: column;
}

.advantages__list {
  padding              : 0;
  margin               : 0;
  list-style-type      : none;
  width                : 100%;
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap           : 70px;
  row-gap              : 30px;
  align-items          : center;
}

.advantages__item {
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  row-gap        : 13px;
  column-gap     : 13px;
  font-size      : 16px;
  font-weight    : 500;
  line-height    : 1.5;
  color          : var(--dark-gray);
}

/* #endregion */

/* #region Popular */
.popular {
  padding: 30px 0 30px;
}

.popular__inner {
  padding-top   : 26px;
  display       : flex;
  flex-direction: column;
}

.popular__splide {
  width: 100%;
}

.popular__splide .splide__slide .material__card {
  border-right: 1px solid var(--light-gray);
  border-left : 1px solid var(--light-gray);
}

.popular__materials {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.popular__materials-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid var(--light-gray);
}

.popular__materials {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.popular__materials-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid var(--light-gray);
}

/* #endregion */

/* #region Material Card */
.material__card {
  display       : flex;
  flex-direction: column;
  padding       : 15px 25px;
  width         : 100%;
  height        : 100%;
}

.material__card-image {
  width          : 100%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 20px;
}

.material__card-image a {
  display: flex;
  width  : 100%;
  height : auto;
}

.material__card-image img {
  width         : 100%;
  height        : 100%;
  max-height    : 135px;
  object-fit    : contain;
  user-select   : none;
  pointer-events: none;
}

.material__card-title {
  font-size    : 14px;
  font-weight  : 500;
  line-height  : 1.5;
  color        : var(--dark-gray);
  margin-bottom: 20px;
}

.material__card-bot {
  margin-top     : auto;
  display        : flex;
  align-items    : center;
  justify-content: center;
  column-gap     : 20px;
  row-gap        : 20px;
}

.material__card-price {
  font-size  : 14px;
  font-weight: 500;
  line-height: 1;
  color      : var(--dark-gray);
}

.btn.btn--buy {
  text-transform: none;
  padding       : 8px 15px;
  font-weight   : 600;
  letter-spacing: normal;
  column-gap    : 6px;
}

.btn.btn--buy>.iconify {
  font-size  : 21px;
  line-height: 1;
}

/* #endregion */

/* #region Calculating */
.calculating {
  position: relative;
}

.calculating::before {
  content       : '';
  display       : block;
  background    : var(--dark-gray);
  clip-path     : polygon(0 0, 100% 0, 100% 35%, 80% 50%, 0 35%);
  position      : absolute;
  left          : 0;
  top           : 0;
  bottom        : 0;
  right         : 0;
  pointer-events: none;
  user-select   : none;
  z-index       : 1;
}

.container.container--calculating {
  max-width    : 1555px;
  margin-right : 0;
  padding-right: 0;
  z-index      : 2;
  position     : relative;
}

.section__title.section__title--calc {
  font-size: 38px;
  color    : var(--white);
}

.section__text.section__text--calc {
  color: var(--white);
}

.calculating__inner {
  display              : grid;
  grid-template-columns: 56% 1fr;
  column-gap           : 30px;
}

.calculating__info {
  padding       : 35px 0 25px;
  display       : flex;
  flex-direction: column;
  align-items   : center;
}

.calculating__privileges {
  width                : 100%;
  padding              : 0;
  margin               : 20px 0 55px;
  list-style-type      : none;
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  column-gap           : 55px;
  row-gap              : 25px;
}

.calculating__item {
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  column-gap     : 16px;
}

.calculating__item>span {
  max-width  : 170px;
  font-size  : 16px;
  font-weight: 500;
  color      : var(--white);
}

.calculating__privileges.calculating__privileges--gray .calculating__item>span {
  color: var(--dark-gray);
}

.btn.btn--calculating {
  padding      : 30px 85px 30px 44px;
  margin-bottom: 75px;
}

.btn.btn--arrow.btn--calculating::after {
  right: 43px;
}

.calculating__picture {
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  height         : 100%;
}

.calculating__picture>picture,
.calculating__picture>picture>img {
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: left top;
}

/* #endregion */

/* #region Catalog */
.catalog {
  padding            : 36px 0 55px;
  margin-bottom      : 25px;
  background         : var(--light-gray) url('/img/catalog_back.png');
  background-position: left bottom;
  background-size    : 40%;
  background-repeat  : no-repeat;
}

.catalog__inner {
  display              : grid;
  grid-template-columns: 538px 1fr;
  align-items          : flex-end;
}

.catalog__picture {
  position       : relative;
  z-index        : 2;
  display        : flex;
  align-items    : center;
  justify-content: center;
  user-select    : none;
  pointer-events : none;
}

.catalog__picture>picture {
  width     : 100%;
  height    : 100%;
  object-fit: contain;
}

.catalog__picture>picture>img {
  width     : 100%;
  height    : 100%;
  object-fit: contain;
}

.catalog__info {
  display       : flex;
  flex-direction: column;
  padding-bottom: 10px;
}

.catalog__info-form {
  position  : relative;
  margin-top: 5px;
  padding   : 22px 70px 15px;
}

.catalog__info-form::before {
  content         : '';
  position        : absolute;
  left            : -35%;
  right           : 0;
  bottom          : 0;
  top             : 0;
  background-color: var(--blue);
  z-index         : 1;
}

.catalog__info-form>* {
  z-index : 2;
  position: relative;
}

.catalog__info-text {
  font-size    : 16px;
  font-weight  : 600;
  line-height  : 1.2;
  color        : var(--white);
  text-align   : center;
  margin-bottom: 18px;
}

.form.form--catalog .form__fields {
  grid-template-columns: 1fr 1fr;
  column-gap           : 9px;
  row-gap              : 15px;
}

.form.form--catalog .form__field:last-child {
  grid-column: 1 / span 2;
  align-items: center;
  row-gap    : 9px;
}

.form.form--catalog .form__label {
  padding-top   : 5px;
  padding-bottom: 4px;
}

.form.form--catalog .btn {
  padding-top   : 14px;
  padding-bottom: 14px;
}

/* #endregion */

/* #region Service */
.service {
  padding: 25px 0;
}

.service__inner {
  padding-top   : 20px;
  display       : flex;
  flex-direction: column;
}

.service__list {
  width                   : 100%;
  padding                 : 0;
  margin                  : 0;
  list-style-type         : none;
  display                 : grid;
  /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
  grid-template-columns   : repeat(auto-fill, minmax(300px, 1fr));
}

.service__item {
  padding        : 15px 20px;
  text-align     : center;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: flex-start;
  border-right   : 1px solid var(--light-gray);
}

.service__item:first-child {
  border-left: 1px solid var(--light-gray);
}

.service__item-icon {
  display        : flex;
  align-items    : flex-start;
  justify-content: center;
  margin-bottom  : 15px;
  min-height     : 56px;
}

.service__item-title {
  font-size    : 18px;
  font-weight  : 700;
  line-height  : 1;
  color        : var(--dark-gray);
  margin-bottom: 10px;
}

.service__item-text {
  font-size  : 14px;
  font-weight: 500;
  line-height: 1.2;
  color      : var(--dark-gray);
}

.service__item-add {
  margin-top : 15px;
  font-size  : 14px;
  font-weight: 500;
  line-height: 1.2;
  color      : var(--blue);
}

/* #endregion */

/* #region Office */
.office {
  padding      : 45px 0 70px;
  border-top   : 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 15px;
}

.section__title.section__title--office {
  font-size    : 38px;
  margin-bottom: 22px;
}

.office__inner {
  display       : flex;
  flex-direction: column;
  align-items   : center;
}

.office__address {
  width                : 100%;
  max-width            : 420px;
  display              : grid;
  grid-template-columns: 125px 1fr;
  column-gap           : 16px;
  row-gap              : 15px;
}

.office__address-text {
  text-align : right;
  font-size  : 16px;
  font-weight: 400;
  line-height: 1.2;
  color      : var(--gray);
}

.office__address-list {
  display        : flex;
  flex-direction : column;
  align-items    : flex-start;
  justify-content: flex-start;
  text-align     : left;
  row-gap        : 15px;
}

.office__item {
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  column-gap     : 12px;
}

.office__item-icon {
  font-size  : 32px;
  line-height: 1;
  color      : var(--blue);
}

.office__item-text {
  font-size  : 16px;
  font-weight: 600;
  line-height: 1.2;
  color      : var(--blue);
}

/* #endregion */

/* #region Office Map */
.office_map {
  padding: 15px 0 64px;
}

.office_map__inner {
  display                 : grid;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns   : 100%;
  column-gap              : 30px;
  row-gap                 : 30px;
}

.office_map__gallery {
  display       : flex;
  flex-direction: column;
  align-items   : center;
}

.office__gallery {
  width                : 100%;
  padding              : 0;
  margin               : 10px 0 0;
  list-style-type      : none;
  display              : grid;
  grid-template-columns: 75% 1fr;
  grid-template-rows   : repeat(3, 1fr);
  column-gap           : 6px;
  row-gap              : 6px;
}

.office__gallery>li:first-child {
  grid-column: 1;
  grid-row   : 1 / span 3;
}

.office__gallery img {
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: center;
}

.office_map__scheme {
  height        : 429px;
  display       : flex;
  flex-direction: column;
  align-items   : center;
}

.office_map__in {
  margin-top: 10px;
  height    : 100%;
  width     : 100%;
}

/* #endregion */

/* #region Footer */
.footer {
  padding         : 50px 0 65px;
  background-color: var(--dark-gray);
}

.footer__inner {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  column-gap     : 60px;
  row-gap        : 30px;
}

.footer__copyright {
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
}

.footer__logo {
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  margin-bottom  : 14px;
}

.footer__logo-pic {
  max-width : 140px;
  transform : translateX(-4px);
  width     : 100%;
  object-fit: contain;
}

.footer__copyright__text {
  font-size  : 14px;
  font-weight: 400;
  color      : var(--white);
}

.footer__contacts {
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
}

.footer__contacts__list {
  padding              : 0;
  margin               : 0;
  list-style-type      : none;
  display              : grid;
  grid-template-columns: 1fr 1fr;
  column-gap           : 80px;
  row-gap              : 20px;
}

.footer__link {
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  column-gap     : 11px;
  font-size      : 14px;
  font-weight    : 500;
  line-height    : 1;
  color          : var(--white);
  text-decoration: none;
  transition     : color 300ms ease;
}

.footer__link:hover,
.footer__link:focus {
  color: var(--blue);
}

.footer__link.footer__link--tel {
  font-size  : 24px;
  font-weight: 700;
}

.footer__link.footer__link--mail {
  text-decoration: underline;
}

.footer__link-ic {
  display    : flex;
  font-size  : 26px;
  line-height: 1;
  color      : var(--white);
}

.footer__socials {
  margin-left   : auto;
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
}

.footer__socials__list {
  padding        : 0;
  margin         : 0;
  list-style-type: none;
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
  column-gap     : 10px;
}

.footer__socials__list a {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  font-size      : 25px;
  line-height    : 1;
  transition     : opacity 300ms ease;
}

.footer__socials__list a:hover,
.footer__socials__list a:focus {
  opacity: .6;
}

/* #endregion */

/* #region Cart */
.cart_add_message {
  position        : fixed;
  top             : 10px;
  left            : 50%;
  z-index         : 200;
  transform       : translateX(-50%);
  animation       : drop_cart_add 3s ease-in-out forwards;
  width           : 300px;
  color           : #FFFFFF;
  font-size       : 16px;
  line-height     : 1;
  font-weight     : 600;
  background-color: var(--dark-gray);
  box-shadow      : 0 0 11px 0 rgba(0, 0, 0, .25);
  padding         : 15px 10px;
  text-align      : center;
}

@keyframes drop_cart_add {
  0% {
    transform: translateY(-50px)translateX(-50%);
    opacity  : 0;
  }

  50% {
    transform: translateY(50px)translateX(-50%);
    opacity  : 1;
  }

  100% {
    transform: translateY(100px)translateX(-50%);
    opacity  : 0;
  }
}

.cart {
  padding: 145px 0 80px;
}

.cart__inner {
  display       : flex;
  flex-direction: column;
}

.cart__notification {
  font-size  : 16px;
  text-align : center;
  margin     : 0 0 12px;
  font-weight: 600;
  color      : var(--blue);
}

.cart__table {
  width          : 100%;
  border-collapse: collapse;
  margin-bottom  : 15px;
}

.cart__table__header {
  position: relative;
}

.cart__table__title {
  background-color: var(--light-gray);
  padding         : 10px;
  text-align      : center;
  font-size       : 16px;
  font-weight     : 600;
  line-height     : 1.1;
}

.cart__table__row:not(:last-child) {
  border-bottom: 1px solid var(--light-gray);
}

.cart__table__row>td {
  padding: 10px;
}

.cart__table__row>td:nth-child(4) {
  width: 15%;
}

.cart__row__good {
  display              : grid;
  grid-template-columns: 80px 1fr;
  column-gap           : 15px;
  align-items          : center;
}

.cart__row__picture {
  display        : flex;
  height         : 80px;
  align-items    : center;
  justify-content: center;
}

.cart__row__picture>img {
  width     : 100%;
  height    : 100%;
  object-fit: contain;
}

.cart__row__name {
  font-size  : 14px;
  font-weight: 500;
  line-height: 1.35;
  color      : var(--dark-gray);
}

.cart__row__price {
  font-size  : 16px;
  font-weight: 600;
  line-height: 1.1;
  text-align : center;
  color      : var(--blue);
}

.cart__row__amount {
  display              : grid;
  grid-template-columns: 35px 50px 35px;
  align-items          : center;
  justify-content      : center;
}

.cart__amount__input {
  height          : 100%;
  font-size       : 14px;
  font-weight     : 600;
  line-height     : 1;
  text-align      : center;
  border          : 0;
  background-color: transparent;
  outline         : none;
}

.cart__amount__btn {
  height          : 35px;
  border          : 1px solid var(--blue);
  color           : var(--blue);
  font-size       : 20px;
  line-height     : 1;
  font-weight     : 400;
  padding         : 5px;
  background-color: transparent;
  transition      : background-color 300ms ease, color 300ms ease;
}

.cart__amount__btn:hover,
.cart__amount__btn:focus {
  color           : var(--white);
  background-color: var(--blue);
}

.cart__row__summ {
  text-align : center;
  font-size  : 16px;
  font-weight: 600;
  color      : var(--dark-gray);
}

.cart__row__delete {
  font-size      : 26px;
  line-height    : 1;
  text-align     : center;
  color          : red;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.cart__bottom {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  column-gap     : 15px;
}

.cart__allsumm {
  font-size  : 30px;
  font-weight: 700;
  line-height: 1.35;
  color      : var(--dark-gray);
}

.cart__form__wrapper {
  display         : flex;
  flex-direction  : column;
  background-color: var(--light-gray);
  padding         : 25px;
}

.cart__message {
  text-align    : center;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  font-size     : 18px;
  line-height   : 1.35;
  font-weight   : 700;
  color         : var(--blue);
}

.cart__message>.btn {
  margin-top: 15px;
}

/* #endregion */

/* #region Modal */
.modal {
  width           : 100%;
  height          : 100%;
  position        : fixed;
  left            : 0;
  top             : 0;
  right           : 0;
  bottom          : 0;
  background-color: rgba(0, 0, 0, 0.6);
  padding         : 15px;
  z-index         : 10;
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : visibility 300ms ease, opacity 300ms ease;
}

.modal.--is_fade {
  visibility: hidden;
  opacity   : 0;
}

.modal__dialog {
  width         : 100%;
  max-width     : 400px;
  margin        : auto;
  max-height    : 100%;
  display       : flex;
  flex-direction: column;
}

.modal__container {
  display         : flex;
  flex-direction  : column;
  position        : relative;
  max-height      : 95vh;
  background-color: var(--white);
}

.modal__close {
  position   : absolute;
  right      : 9px;
  top        : 6px;
  font-size  : 26px;
  line-height: 1;
  color      : var(--white);
  transition : color 300ms ease;
}

.modal__close:hover,
.modal__close:focus {
  color: var(--gray);
}

.modal__header {
  background-color: var(--blue);
  padding         : 15px 30px 15px 15px;
  display         : flex;
  flex-direction  : column;
  align-items     : flex-start;
  justify-content : flex-start;
}

.modal__title {
  font-size    : 24px;
  line-height  : 1.2;
  color        : var(--white);
  margin-bottom: 10px;
  font-weight  : 600;
}

.modal__text {
  font-size: 14px;
  color    : var(--white);
}

.modal__body {
  padding         : 15px;
  display         : flex;
  flex-direction  : column;
  background-color: var(--light-gray);
  overflow-y      : auto;
  max-height      : 85vh;
}

.form.form--modal .form__field:last-child {
  align-items: center;
}

.modal.modal__calculator .modal__dialog {
  max-width: 800px;
}

/* #endregion */

/* #region Calculating Modal */
.form__result__information {
  width         : 100%;
  display       : flex;
  flex-direction: column;
}

.callculation__result__title {
  font-size  : 16px;
  font-weight: 600;
  color      : var(--dark-gray);
  line-height: 1.35;
}

.callculation__result__text {
  font-size    : 14px;
  font-weight  : 400;
  color        : var(--gray);
  margin-bottom: 10px;
}

.callculation__result__list {
  margin        : 0 0 15px;
  padding       : 0;
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
  list-style    : none;
  row-gap       : 5px;
  max-width     : 100%;
  width         : 100%;
}

.callculation__result__item {
  display              : grid;
  align-items          : center;
  justify-content      : flex-start;
  column-gap           : 15px;
  grid-template-columns: 1fr 30%;
  width                : 100%;
  padding              : 2px;
}

.callculation__result__item:not(:last-child) {
  border-bottom: 1px solid var(--gray);
}

.callculation__result__table {
  margin         : 0;
  padding        : 0;
  border-collapse: collapse;
  border-spacing : 0;
  text-align     : left;
}

.callculation__result__table tr {
  border : 1px solid #ddd;
  padding: 5px;
}

.callculation__result__table th,
.callculation__result__table td {
  padding     : 8px;
  border-right: 1px solid #ddd;
}

/* #endregion */

/* #region SweetAlert */
.sweet-alert {
  font-family  : 'Montserrat', Helvetica, Arial, sans-serif;
  border       : 3px solid var(--blue);
  border-radius: 0;
}

/* #endregion */

/* #region Modal Good */
.modal__good .modal__dialog {
  max-width: 1000px;
}

.modal__good .modal__body {
  background-color: var(--white);
}

.modal__good__inner {
  display              : grid;
  grid-template-columns: 25% 1fr;
  grid-column-gap      : 25px;
  grid-row-gap         : 25px;
  align-items          : flex-start;
}

.modal__good__side {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
}

.modal__good__picture {
  width          : 100%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 15px;
}

.modal__good__picture>img {
  width     : 100%;
  height    : 100%;
  object-fit: contain;
}

.modal__good__description {
  display       : flex;
  flex-direction: column;
}

.modal__good__description p {
  margin-top : 8px;
  font-size  : 14px;
  font-weight: 400;

}

.vid_otd {
  text-transform: uppercase;
  font-weight   : bold;
}

/* #endregion */

/* #region Media */
@media all and (min-width: 2047px) {

  /* #region Calculating */
  .container.container--calculating {
    max-width: 1630px;
  }

  /* #endregion */
}

@media all and (max-width: 1599px) {

  /* #region UI */
  .splide__arrow--prev {
    left: -3em;
  }

  .splide__arrow--next {
    right: -3em;
  }

  /* #endregion */

  /* #region Calculating */
  .calculating__privileges {
    column-gap           : 15px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .calculating__item>span {
    max-width: 150px;
    font-size: 14px;
  }

  /* #endregion */
}

@media all and (max-width: 1279px) {

  /* #region Main */
  .container {
    max-width: 992px;
  }

  /* #endregion */

  /* #region UI */
  .section__title {
    font-size: 26px;
  }

  .section__text {
    font-size: 16px;
  }

  .splide__arrow--prev {
    left: -2.2em;
  }

  .splide__arrow--next {
    right: -2.2em;
  }

  .btn {
    font-size: 13px;
  }

  /* #endregion */

  /* #region Header */
  .header {
    padding: 15px 0;
  }

  .header__contacts-link--a {
    font-size: 24px;
  }

  .header__contacts-link--btn {
    font-size: 12px;
  }

  .header__contacts-link--ic {
    font-size: 38px;
  }

  .header__cart__link {
    font-size: 38px;
  }

  /* #enderegion */

  /* #region Banner */
  .banner {
    padding: 120px 0 0;
  }

  .banner__pretitle {
    font-size: 16px;
  }

  .banner__title {
    font-size    : 48px;
    margin-bottom: 30px;
  }

  .banner__advantages {
    margin-bottom: 20px;
  }

  .banner__advantages>li {
    font-size: 16px;
  }

  .btn.btn--banner {
    padding-top   : 25px;
    padding-bottom: 25px;
  }

  .banner__picture-img {
    min-width: 529px;
    transform: translate(80px, -55%);
  }

  /* #endregion */

  /* #region Advantages */
  .advantages {
    margin-bottom: 10px;
  }

  .advantages__list {
    column-gap: 30px;
  }

  .advantages__item {
    font-size: 14px;
  }

  /* #endregion */

  /* #region Calculating */
  .section__title.section__title--calc {
    font-size: 34px;
  }

  .container.container--calculating {
    max-width: 1555px;
  }

  .calculating__inner {
    grid-template-columns: 60% 1fr;
  }

  .calculating__privileges {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .calculating__item {
    column-gap: 8px;
  }

  .calculating__item>span {
    font-size: 13px;
  }

  .btn.btn--calculating {
    padding      : 23px 70px 23px 44px;
    margin-bottom: 45px;
  }

  .btn.btn--arrow.btn--calculating::after {
    right: 35px;
  }

  /* #endregion */

  /* #region Catalog */
  .catalog {
    padding      : 35px 0;
    margin-bottom: 15px;
  }

  .catalog__inner {
    grid-template-columns: 460px 1fr;
  }

  .catalog__info-form {
    padding: 15px;
  }

  /* #endregion */

  /* #region Service */
  .service__list {
    /* grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .service__item {
    padding: 15px;
  }

  /* #endregion */

  /* #region Office */
  .office {
    padding: 40px 0;
  }

  .section__title.section__title--office {
    font-size: 32px;
  }

  /* #endregion */

  /* #region Footer */
  .footer__inner {
    column-gap: 30px;
  }

  .footer__contacts__list {
    column-gap: 25px;
  }

  .footer__link.footer__link--tel {
    font-size: 22px;
  }

  /* #endregion */

  /* #region Cart */
  .cart__allsumm {
    font-size: 26px;
  }

  .cart_add_message {
    font-size: 14px;
  }

  /* #endregion */
}

@media all and (max-width: 1023px) {

    /* #region Popular */
    .popular__materials {
      grid-template-columns: repeat(3, 1fr);
    }

  /* #region Main */
  .container {
    max-width: 735px;
  }

  /* #endregion */

  /* #region UI */
  .splide__pagination {
    margin-top: 20px;
  }

  /* #endregion */

  /* #region Header */
  .header__contacts-link--wrap {
    display: none;
  }

  .header__inner {
    grid-template-columns: 1fr 25%;
  }

  .header.--is_slicky {
    background: linear-gradient(to right, var(--white) 75%, var(--blue) 25%);
  }

  .header.header--page {
    background: linear-gradient(to right, var(--white) 75%, var(--blue) 25%);
  }

  /* #endregion */

  /* #region Banner */
  .banner {
    background: linear-gradient(to right, var(--white) 75%, var(--blue) 25%);
  }

  .banner__picture-img {
    top      : calc(20% + 30px);
    min-width: 250px;
    transform: translate(40px, -55%);
  }

  /* #endregion */

  /* #region Advantages */
  .advantages__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* #endregion */

  /* #region Calculating */
  .calculating__inner {
    grid-template-columns: 100%;
  }

  .calculating__picture {
    display: none;
  }

  .container.container--calculating {
    max-width    : 735px;
    margin-right : auto;
    padding-right: 15px;
  }

  /* #endregion */

  /* #region Catalog */
  .catalog {
    background-size: 90%;
  }

  .catalog__inner {
    grid-template-columns: 360px 1fr;
  }

  .catalog__info-form::before {
    left: -20%;
  }

  .form.form--catalog .form__fields {
    grid-template-columns: 100%;
  }

  .form.form--catalog .form__field:last-child {
    grid-column: auto;
  }

  /* #endregion */

  /* #region Service */
  .service__list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .service__item {
    border-right: 0;
  }

  .service__item:first-child {
    border-left: 0;
  }

  /* #endregion */

  /* #region Office */
  .office_map__inner {
    grid-template-columns: 100%;
  }

  .office_map__scheme {
    height: 429px;
  }

  /* #endregion */

  /* #region Footer */
  .footer__inner {
    flex-wrap: wrap;
  }

  .footer__socials {
    margin-left: 0;
  }

  /* #endregion */
}

@media all and (max-width: 767px) {

  .popular__materials {
    grid-template-columns: repeat(2, 1fr);
  }

  /* #region Main */
  .container {
    max-width: 545px;
  }

  /* #endregion */

  /* #region UI */
  .section__title {
    font-size: 24px;
  }

  .section__text {
    font-size: 15px;
  }

  .btn {
    font-size: 12px;
  }

  .form__label {
    padding: 7px 15px 7px 44px;
  }

  .form__field__list {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows       : minmax(100px, 1fr);
    column-gap           : 10px;
    row-gap              : 10px;
  }

  .form__radio__picture>figcaption {
    display: none;
  }

  .form__fields {
    row-gap   : 15px;
    column-gap: 15px;
  }

  /* #endregion */

  /* #region Header */
  .header__logo-link {
    font-size : 13px;
    column-gap: 10px;
  }

  .header__logo-pic {
    max-width: 110px;
  }

  .header__cart__link {
    color: var(--blue);
  }

  .header.header--page .header__cart__link {
    color: var(--white);
  }

  .header__contacts-link--ic {
    color: var(--blue);
  }

  .header.header--page .header__contacts-link--ic {
    color: var(--white);
  }

  .header.--is_slicky .header__cart__link {
    color: var(--white);
  }

  .header.--is_slicky .header__contacts-link--ic {
    color: var(--white);
  }

  .header.--is_slicky {
    background: linear-gradient(to right, var(--white) 70%, var(--blue) 30%);
  }

  .header.header--page {
    background: linear-gradient(to right, var(--white) 70%, var(--blue) 30%);
  }

  .header__inner {
    grid-template-columns: 1fr 30%;
  }

  /* #endregion */

  /* #region Banner */
  .banner {
    background: none;
    padding   : 100px 0 0;
  }

  .banner_inner {
    grid-template-columns: 100%;
  }

  .banner__picture-wrap {
    display: none;
  }

  .banner__pretitle {
    font-size: 15px;
  }

  .banner__title {
    font-size: 42px;
  }

  .banner__advantages>li {
    align-items: center;
    font-size  : 15px;
  }

  .btn.btn--banner {
    padding: 20px 60px 20px 20px;
  }

  .btn.btn--banner.btn--arrow::after {
    right: 30px;
  }

  /* #endregion */

  /* #region Callback */
  .callback {
    padding: 50px 0 30px;
  }

  .form.form--callback .form__fields {
    grid-template-columns: 100%;
  }

  .form.form--callback .form__field:last-child {
    align-items: center;
  }

  /* #endregion */

  /* #region Advantages */
  .advantages {
    padding: 30px 0;
  }

  /* #endregion */

  /* #region Popular */
  .popular {
    padding: 20px 0 30px;
  }

  /* #endregion */

  /* #region Material Card */
  .material__card {
    padding: 15px;
  }

  /* #endregion */

  /* #region Calculating */
  .calculating::before {
    clip-path: polygon(0 0, 100% 0, 100% 40%, 80% 50%, 0 40%);
  }

  .calculating__info {
    padding: 30px 0 10px;
  }

  .calculating__privileges {
    margin               : 0 0 40px;
    grid-template-columns: 100%;
    justify-items        : center;
  }

  .calculating__item-ic {
    min-width      : 65px;
    display        : flex;
    justify-content: center;
  }


  .calculating__item-ic>picture {
    max-width: 65px;
  }

  .calculating__item>span {
    font-size: 14px;
  }

  .btn.btn--calculating {
    padding      : 20px 55px 20px 20px;
    margin-bottom: 35px;
  }

  .btn.btn--arrow.btn--calculating::after {
    right: 25px;
  }

  /* #endregion */

  /* #region Catalog */
  .catalog {
    background-size    : 150%;
    background-position: center bottom;
    padding            : 30px 0 20px;
    margin-bottom      : 0;
  }

  .catalog__inner {
    grid-template-columns: 100%;
    row-gap              : 20px;
  }

  .catalog__picture>picture {
    max-width: 350px;
  }

  .catalog__info-form::before {
    left: 0%;
  }

  .catalog__info {
    padding-bottom: 0;
  }

  /* #endregion */

  /* #region Office */
  .office {
    padding: 25px 0;
  }

  .section__title.section__title--office {
    font-size: 28px;
  }

  .office__address {
    max-width: 500px;
  }

  /* #endregion */

  /* #region Office Map */
  .office_map {
    padding: 15px 0 50px;
  }

  /* #endregion */

  /* #region Footer */
  .footer {
    padding: 35px 0 55px;
  }

  /* #endregion */

  /* #region Cart */
  .cart__table__header {
    display: none;
  }

  .cart__table__body {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    column-gap           : 15px;
    row-gap              : 15px;
  }

  .cart__table__row {
    display              : grid;
    grid-template-columns: 100%;
    border               : 1px solid var(--light-gray) !important;
  }

  .cart__row__good {
    grid-template-columns: 100%;
    row-gap              : 15px;
    text-align           : center;
  }

  .cart__table__row>td {
    padding: 8px 10px;
  }

  .cart__table__row>td:nth-child(4) {
    width: 100%;
  }

  .cart__table__row>td:nth-child(2) {
    display: none;
  }

  .cart__bottom {
    flex-direction: column;
    row-gap       : 15px;
  }

  /* #endregion */

  /* #region Modal Good */
  .modal__good__picture>img {
    max-width: 200px;
  }

  .modal__good__inner {
    grid-template-columns: 100%;
  }

  /* #endregion */
}

@media all and (max-width: 575px) {

  /* #region Main */
  .container {
    max-width: 100%;
  }

  .popular__materials {
    grid-template-columns: 100%;
  }

  /* #endregion */

  /* #region UI */
  .section__title {
    font-size: 22px;
  }

  .section__text {
    font-size: 14px;
  }

  .form__fields {
    row-gap   : 15px;
    column-gap: 15px;
  }

  .form__icon {
    font-size: 20px;
  }

  .form__input {
    font-size: 14px;
  }

  .splide__arrow--prev {
    left: -0.8em;
  }

  .splide__arrow--next {
    right: -0.8em;
  }

  .form__field__list {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    grid-auto-rows       : 80px;
  }

  .form__field.form__field--buttons {
    row-gap: 15px;
  }

  .form__field.form__field--buttons .btn {
    width: 100%;
  }

  .form__steps__button {
    row-gap       : 10px;
    flex-direction: column;
  }

  .form__steps__button>.btn {
    width: 100%;
  }

  table.table>thead {
    display: none;
  }

  table.table tr {
    margin-bottom: 10px;
    display      : block;
    border-bottom: 2px solid #ddd;
  }

  table.table td {
    display      : block;
    text-align   : right;
    font-size    : 13px;
    border-right : 1px solid transparent;
    border-bottom: 1px solid transparent;
  }

  table.table td:not(:last-child) {
    border-bottom: 1px dotted #bebebe;
  }

  table.table td::before {
    content       : attr(data-label);
    float         : left;
    text-transform: uppercase;
    font-weight   : bold;
    font-size     : 12px;
  }

  /* #endregion */

  /* #region Header */
  .header.--is_slicky {
    padding: 10px 0;
  }

  .header.--is_slicky .header__logo-pic {
    max-width: 75px;
  }

  .header.--is_slicky {
    background: linear-gradient(to right, var(--white) 65%, var(--blue) 35%);
  }

  .header.header--page {
    background: linear-gradient(to right, var(--white) 65%, var(--blue) 35%);
  }

  .header__logo-text {
    display: none;
  }

  /* #endregion */

  /* #region Banner */
  .banner__pretitle {
    font-size     : 14px;
    letter-spacing: .20em;
    margin-right  : auto;
  }

  .banner__info {
    align-items: center;
  }

  .banner__title {
    font-size: 30px;
  }

  .banner__advantages {
    grid-template-columns: 100%;
    row-gap              : 15px;
    margin-bottom        : 15px;
  }

  .banner__advantages>li {
    font-size: 14px;
  }

  .btn.btn--banner {
    padding   : 15px 40px 15px 15px;
    text-align: left;
  }

  .btn.btn--banner.btn--arrow::after {
    right: 8px;
  }

  /* #endregion */

  /* #region Callback */
  .callback {
    padding: 50px 0 20px;
  }

  /* #endregion */

  /* #region Advantages */
  .advantages__list {
    row-gap: 20px;
  }

  .advantages__item {
    font-size     : 13px;
    flex-direction: column;
    text-align    : center;
  }

  .advantages__item-ic {
    min-width: 58px;
  }

  /* #endregion */

  /* #region Popular */
  .popular__splide {
    padding: 0 20px;
  }

  .popular__inner {
    padding-top: 10px;
  }

  /* #endregion */

  /* #region Material Card */
  .material__card-title {
    text-align: center;
  }

  /* #endregion */

  /* #region Calculating */
  .calculating__item>span {
    font-size: 13px;
  }

  .btn.btn--calculating {
    padding: 18px 45px 18px 15px;
  }

  .btn.btn--arrow.btn--calculating::after {
    right: 12px;
  }

  /* #endregion */

  /* #region Calculating Modal */
  .callculation__result__title {
    font-size    : 14px;
    margin-bottom: 10px;
  }

  .callculation__result__list {
    margin: 0;
  }

  .callculation__result__item {
    font-size: 12px;
  }

  .callculation__result__table>thead {
    display: none;
  }

  .callculation__result__table tr {
    margin-bottom: 10px;
    display      : block;
    border-bottom: 2px solid #ddd;
  }

  .callculation__result__table td {
    display      : block;
    text-align   : right;
    font-size    : 13px;
    border-right : 1px solid transparent;
    border-bottom: 1px solid transparent;
  }

  .callculation__result__table td:not(:last-child) {
    border-bottom: 1px dotted #bebebe;
  }

  .callculation__result__table td::before {
    content       : attr(data-label);
    float         : left;
    text-transform: uppercase;
    font-weight   : bold;
    font-size     : 12px;
  }

  .callculation__result__summ>td:nth-child(3),
  .callculation__result__summ>td:nth-child(4) {
    display: none;
  }

  .callculation__result__summ td {
    text-align: center;
  }

  /* #endregion */

  /* #region Catalog */
  .catalog__info-text {
    font-size  : 14px;
    font-weight: 500;
  }

  /* #endregion */

  /* #region Service */
  .service {
    padding: 15px 0;
  }

  .service__inner {
    padding-top: 10px;
  }

  .service__item-icon {
    margin-bottom: 10px;
  }

  .service__item-title {
    font-size: 16px;
  }

  .service__item-text {
    font-size: 13px;
  }

  /* #endregion */

  /* #region Office */
  .section__title.section__title--office {
    font-size: 24px;
  }

  .office__address {
    column-gap           : 10px;
    grid-template-columns: 115px 1fr;
  }

  .office__address-text {
    font-size: 14px;
  }

  .office__item {
    column-gap: 10px;
  }

  .office__item-text {
    font-size: 14px;
  }

  /* #endregion */

  /* #region Office Map */
  .office_map__scheme {
    height: 300px;
  }

  /* #endregion */

  /* #region Footer */
  .footer__contacts__list {
    grid-template-columns: 100%;
  }

  .footer__link.footer__link--tel {
    font-size: 20px;
  }

  .footer__link-ic {
    font-size: 24px;
  }

  /* #endregion */

  /* #region Modal */
  .modal__title {
    font-size    : 22px;
    margin-bottom: 5px;
  }

  .modal__text {
    font-size: 13px;
  }

  /* #endregion */

  /* #region Cart */
  .cart__row__picture {
    height: 65px;
  }

  .cart__allsumm {
    font-size: 22px;
  }

  .cart__form__wrapper {
    padding: 15px;
  }

  .cart__table__body {
    grid-template-columns: 100%;
  }

  .cart_add_message {
    padding: 10px;
  }

  /* #endregion */
}

/* #endregion */