/******************************************/
/*             общие стили "на всё"       */
/******************************************/

.visually-hidden {
    /* Удаляем элемент из потока документа */
    position: absolute;
    /* Временное решение для неверно произносимого, размазанного текста */
    white-space: nowrap;
    /* Устанавливаем минимально возможный размер (некоторые скринридеры игнорируют элементы с нулевой высотой и шириной) */
    width: 1px;
    height: 1px;
    /* Скрываем вылезающий за границы контент */
    overflow: hidden;
    /* Сбрасываем любые свойства, которые могут повлиять на размер элемента */
    border: 0;
    padding: 0;
    /* Вырезаем ту часть контента, которая должна отображаться. */
    /* Устаревшее свойство clip для старых браузеров */
    clip: rect(0 0 0 0);
    /* clip-path для новых браузеров. inset(50%) определяет область вставки, которая позволит контенту исчезнуть.  */
    clip-path: inset(50%);
    /* Похоже, никто до конца не понимает, почему тут margin: -1px. Кроме того, это приводит к проблемам (читай: https://github.com/h5bp/html5-boilerplate/issues/1985). */
    margin: -1px;
}

body {
    margin: 0;
    padding: 0;

    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;

    background: #000000;
    background-image:  url("../img/bg.jpg");
    /*background-position: center top;*/
    background-position: -328px 41px; /* подогнал через PerfectPixel */
    background-repeat: no-repeat;
}

a {
    text-decoration: none; /*ссылка - без подчеркивания*/
}

img {
    max-width: 100%; /* чтобы картинки не вылезали за размеры родителя */
    height: auto;
}

.button {
    display: inline-block; /* чтобы размеры можно было задавать */
    box-sizing: border-box; /* удобнее задать общую ширину блока, чем высчитывать с паддингами */
    min-width: 140px;
    padding: 10px 30px;

    font: inherit;

    text-transform: uppercase;

    color: #ffffff;
    background-color: #000000;
    border: none;
}

.button:hover,
.button:focus,
.button:active {
    background-color: #663d15;
}

/* для неактивной (отключенной) кнопки */
.button.disabled,
.button:disabled {
    cursor: default;
    opacity: 0.5;
    background-color: #000000;
}

.centraler { /*доп.контейнер для центрирования ("центровщик"), используется во многих местах*/
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
}

/*----- окончание общих стилей "на всё"-------------------*/


/*********************************************/
/*  стили для главной страницы ( index.html) */
/*********************************************/

.primary-header {
    min-width: 980px;
    margin-bottom: 70px;

}

.primary-navigation {
    font-size: 16px;
    line-height: 20px;
    color: #ffffff;
}

.primary-navigation-wrapper { /*дополнительная обертка для черного фона, который на всю ширину страницы должен растянуться*/
    padding: 0;
    margin-bottom: 60px;
    background-color: #000000;
    display: flex;
}

.primary-navigation-wrapper .centraler {
    display: flex; /*чтобы менюшки друг за другом в строку выстроились*/
}

.site-navigation {
    width: 640px;
    padding: 0;
    margin: 0;
    list-style: none; /*убрали маркер у списка (точечку)*/
    display: flex; /*чтобы пункты меню друг за другом в строку выстроились*/
    flex-wrap: wrap;
}

.user-navigation {
    max-width: 140px;
    padding: 0;
    margin: 0;
    margin-left: 195px;
    list-style: none; /*убрали маркер у списка (точечку)*/
    display: flex; /*чтобы пункты меню друг за другом в строку выстроились*/
}

.site-navigation a,
.user-navigation a {
    color: #ffffff; /*ссылки не наследуют цвет от текста, им отдельно задается цвет*/
    display: block; /* чтобы согласно стайл-гайду при наведении выделялся большой прямоуголник, а не только само слово! */
    padding: 26px 20px; /* прямоугольник делается за счет паддингов */
    vertical-align: middle;
    margin: 0;
}

.site-navigation a:hover,
.site-navigation a:focus,
.user-navigation a:hover,
.user-navigation a:focus {
    background-color: #242424;
}

.user-navigation .login-link {
    position: relative;
    padding-left: 50px;
}

.site-navigation-current {
    position: relative;
}

.site-navigation-current::after {
    content: "";

    position: absolute; /* absolute делает любой элемент как-бы блочным, и элемент начинает воспринимать размеры */
    bottom: 0; /* снизу */
    height: 5px; /* высотой 5px */
    left: 20px; /* хитрый трюк - width не задаем, а задаем одновременно левую и правую координаты */
    right: 20px;

    background-color: #ffffff;
}

.site-navigation-current a:not([href]) {

}

/* псевдо-элемент */
.login-link::before {
    content: ""; /* чтобы псевдо-элемент отрисовался */

    position: absolute; /* absolute делает любой элемент как-бы блочным, и элемент начинает воспринимать размеры */
    top: 30px;
    left: 21px;

    width: 14px;
    height: 14px;

    background-image: url("../img/login.svg");
    background-repeat: no-repeat;
    background-position: 0 0;

    opacity: 0.3; /* прозрачность */
}

.login-link:hover::before,
.login-link:focus::before,
.login-link:active::before {
    opacity: 1; /* при наведении */
}

.index-logo {  /* только на странице index */
    text-align: center;
}

.features {
    margin-bottom: 77px; /*чтобы оттолкнуть Новости от Фиатурес*/

}

.features-list {
    list-style: none; /*убрали маркер у списка (точечку)*/
    display: flex;
    padding: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.features-item {
    text-align: center;
    width: 300px;
    margin-right: 20px;
}

.features-item:nth-child(3) {
    margin-right: 0;
}

.features-item h3 {
    font-size: 30px;
    line-height: 42px;
    margin: 0;
    margin-bottom: 60px;

    position: relative;

}

.features-item h3::after { /* рисуем ромбики*/
    content: "";

    position: absolute; /* absolute делает любой элемент как-бы блочным, и элемент начинает воспринимать размеры */
    bottom: -30px;
    left: 50%;
    margin-left: -10px;
    transform: rotate(45deg); /* поворот на 45 градусов*/

    width: 20px;
    height: 20px;

    background-color: #ffffff;
}

.features-item p {
    margin: 0 10px;
}

.index-columns {
    color: #000000;

    background-color: #f8f5f2;
    background-image:
            url("../img/line.png"), /* кто раньше в списке, тот выше при отображении */
            url("../img/pattern-light.jpg");
    background-position:
            center, /* относится к первому url */
            0 0;    /* относится ко второму url */
    background-repeat:
            no-repeat,  /* относится к первому url */
            repeat;     /* относится ко второму url */

    padding-left: 80px;
    padding-right: 80px;
    padding-top: 46px;
    padding-bottom: 50px;

    display: flex;
    justify-content: space-between;

    margin-bottom: 35px;

}

.index-columns h2 {
    font-size: 30px;
    line-height: 42px;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}

.news {
    width: 380px;
    margin: 0;
    padding: 0;
}

.news-list {
    list-style: none;
    margin: 0;
    margin-bottom: 25px;
    padding: 0;
}

.news-item {
    margin-bottom: 20px;
}

.news-item p {
    margin: 0;
}

.news-item time {
    text-transform: none; /*маленькие буквы*/
}

.gallery {
    width: 300px;
}

.gallery-content {
    height: 164px;
    padding: 0;
    margin: 0;
    margin-bottom: 40px;
    background-color: #cccccc;
    border: 7px solid #ffffff;
}

.gallery-content img {
    width: 286px;
    height: 164px;
}

.gallery-container {
    display: flex;
    justify-content: space-between;
}

.contacts {
    width: 380px;
}

.contacts-button {
    display: inline-block;
    margin-right: 17px;
}

.feedback-button {
    box-sizing: border-box;
    width: 130px;
    padding-right: 0;
    padding-left: 20px;
    margin-right: 0;

}

.appointment {
    width: 300px;
}

.appointment-form {
    display: flex;
    flex-wrap: wrap;
}

.appointment-item {
    width: 140px;
    margin: 0;
    margin-right: 20px;
    margin-bottom: 10px;
}

.appointment-item:nth-child(2n) {
    margin-right: 0;
}

.appointment-item label {
    display: block; /* обрати внимание - превращаем строчный элемент в блочный, чтобы задать отступы */
    margin-bottom: 9px;
    margin-left: 15px;
}

.appointment-item input{
    box-sizing: border-box; /* удобнее задать общую ширину блока, чем высчитывать с паддингами */
    width: 140px;
    padding-top: 8px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 7px;

    font: inherit;
    background-color: transparent;
    border: 2px solid #000000;
}

.appointment-item input:focus {
    border-color: #663d15;
    /*outline: none;*/
}

.appointment .button {
    display: block;
    width: 100%;
    margin-top: 10px;
}

.primary-footer {
    min-width: 980px;
    color: #ffffff;

    background-color: #212121;
    /*background-image: url("../img/pattern-dark.jpg");*/
    background-position: 0 0;
    background-repeat: repeat;

    margin-top: 65px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.primary-footer .centraler {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-start;
}

.footer-contacts {
    width: 320px;
    margin: 0;
    padding: 0;
    margin-right: 80px; /* ниже есть еще один  */
}

.footer-contacts a {
    color: #ffffff;
    text-decoration: underline;
}

.footer-contacts a:hover,
.footer-contacts a:focus {
    text-decoration: none;
}

.footer-social {
    text-align: center;
    width: 145px;
    margin: 0;
    margin-right: 257px;
}

.footer-social b {
    display: block; /* превращаем надпись ДАВАЙТЕ ДРУЖИТЬ в блок, чтобы можно было маргины задавать*/
    margin-bottom: 15px;
}

.footer-social ul {
    list-style: none;
    width: 141px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0;
}

.social-button {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
}

.social-button:hover,
.social-button:focus {
    background-color: #ffffff;
}

.social-button:hover path,
.social-button:focus path {
    fill: #000000; /* так как svg - это вставленный прямо в html страницу тег, у него есть атрибут fill мы его меняем здесь */
}

.footer-copyright {
    text-align: center;
    width: 150px;
    margin: 0;
}

.footer-copyright b {
    display: block; /* превращаем надпись РАЗРАБОТАНО в блок, чтобы можно было маргины задавать*/
    margin-bottom: 15px;
}

.footer-copyright .button:hover,
.footer-copyright .button:focus {
    color: #000000;

    background-color: #ffffff;
}

.modal {
    position: fixed;

    color: #000000;

    background-color: #f8f3f0;
    background-image: url("../img/pattern-light.jpg");
    background-position: 0 0;
    background-repeat: repeat;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.7); /* тень */

    display: none; /* отключу показ */
 }

@keyframes login-animation {
    0%      { transform: translateY(-2000px); }
    70%     { transform: translateY(-30px); }
    100%    { transform: translateY(0); }
}

.modal-login-show {
    display: block;
    animation-name: login-animation;
    animation-duration: 0.6s;
}

.modal-map-show {
    display: block;
}

.modal-login {
    top: 120px;
    left: 50%;
    width: 300px;
    padding: 50px 80px;
    margin-left: -230px; /* 300 + 80 + 80 паддинги = 460 : 2 = 230 */
    z-index : 2000;
}

.modal-map {
    top: 50%;
    left: 50%;
    width: 766px;
    height: 561px;
    padding: 0;
    margin-left: -390px; /* 780 : 2 = 390 */
    margin-top: -280px;
    border: 7px solid #ffffff;
    z-index: 1000;
}

.modal-map p {
    margin: 0;
}

.modal-close { /* крестик закрытия модального окна, он сделан из стандартного элемента button, но текст скрыт, размер уменьшен */
    position: absolute;
    top: 0;
    right: -34px;
    width: 22px;
    height: 22px;
    font-size: 0; /* прячем текст */
    border: 0;
    cursor: pointer; /* курсор мышки превращаем в руку */
    background-color: transparent; /* прозрачный фон */
}

.modal-close::before,
.modal-close::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 2px;
    width: 19px;
    height: 3px;
    background-color: #d0d0d0;
}

.modal-close::before {
    transform: rotate(45deg);
}

.modal-close::after {
    transform: rotate(-45deg);
}

.modal h2 {
    font-size: 30px;
    line-height: 42px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    box-sizing: border-box;
    width: 300px;
    padding: 10px 15px;
    padding-right: 40px;

    font: inherit;
    color: #000000;
    text-transform: uppercase;

    background-color: #f9f6f3;
    border: 2px solid #000000;
}

.login-form input:focus {
    border-color: #663d15;
}

.login-form-submit {
    width: 100%;
}

.login-form-user {
    background-image: url("../img/user.svg");
    background-position: 270px center;
    background-repeat: no-repeat;
}

.login-form-password {
    background-image: url("../img/lock.svg");
    background-position: 270px center;
    background-repeat: no-repeat;
}

.login-checkbox:hover,
.login-checkbox:focus {
    color: #663d15;
}

.login-checkbox-input:focus + .login-checkbox::before { /* чтобы при управлении с клавиатуры псевдоквадратик выделился */
    border-color: #663d15;
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
}

.login-password-info {
    display: flex;
    justify-content: space-between;
}

.login-checkbox {
    position: relative;
    margin-left: 30px;
    display: block;
    cursor: pointer; /* при наведении рука с пальцем в качестве курсора, а не стрелочка*/
    user-select: none; /* запретить выделение текста */
}

.login-checkbox::before { /* рисуем квадратик вместо стандартного чек-бокса */
    content: "";
    position: absolute;

    top: 1px;
    left: -30px;

    width: 16px;
    height: 16px;
    border: 2px solid #000000;
}

.login-checkbox-input:checked + label::after { /* для чекбокса, у которого установлена галочка, рисуем крестик как фон */
    content: "";
    position: absolute;

    top: 5px;
    left: -26px;

    width: 12px;
    height: 12px;

    background-color: #ffffff;
    background-image: url("../img/cross.svg"); /* крестик */
    background-repeat: no-repeat;
    background-position: 0 0;
}


.restore {
    color: #000000;
    text-decoration: underline;
}

.restore:hover,
.restore:focus {
    text-decoration: none;
}

/*-------------------------------------------------------------*/
/* Стиль для внутренних страниц*/
/*-------------------------------------------------------------*/

.inner-page {
    color: #000000;

    background-color: #f9f6f3;
    background: #fbf8f5;

    background-image: url("../img/pattern-light.jpg");
    background-position: 0 0;
    background-repeat: repeat;
}

.inner-page .primary-header {
    background-color: #000000;
    min-height: 70px;
    margin-bottom: 48px;
}

.inner-page .primary-navigation-wrapper {
    margin-bottom: 0;
}

.inner-page .primary-header-logo {
    padding: 23px 20px;
}

.inner-page .site-navigation {
    width: 600px;
}

.inner-page .user-navigation {
    margin-left: 85px;

}

.page-title {
    font-size: 30px;
    line-height: 42px;
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
}

.breadcrumbs {
    list-style-type: none; /*убрали точечки у элементов списка*/
    display: flex;
    margin: 0;
    margin-bottom: 47px;
    padding: 0;
}

.breadcrumbs li {
    position: relative;
    margin-right: 40px;
}

.breadcrumbs a {
    color: #000000; /*ссылки не наследуют цвет от текста, им отдельно задается цвет*/
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
    text-decoration: underline;
}

.breadcrumbs-current {
    color: #aba9a7;
    margin-left: 6px;
}

/* третий ромбик можно было не через nth-child(1), nth-child(2) делать а так:  */
/*.breadcrumbs-current::after {*/
    /*display: none;*/
/*}*/

.breadcrumbs li::after { /* рисуем ромбики*/
    content: "";

    position: absolute; /* absolute делает любой элемент как-бы блочным, и элемент начинает воспринимать размеры */
    top: 8px;
    right: -25px;
    transform: rotate(45deg); /* поворот на 45 градусов*/

    width: 7px;
    height: 7px;

    background-color: #000000;
}

.breadcrumbs li:last-child {
    margin-right: 0;
}

.breadcrumbs-current::after {
    display: none; /* после последнего пункта ромбик не надо */
}

.main-columns {
    margin: 0;
    padding: 0;
    display: flex;
}

.filters {
    width: 230px;
    margin-right: 10px;
}

.filters fieldset {
    padding: 0px;
    margin: 0px;
    margin-bottom: 50px;
    border: none; /* убрать рамку вокруг fieldset */

}

.filters legend {
    font-size: 24px;
    line-height: 30px;
}

.filters ul {
    list-style: none;
    line-height: 18px;
}

.filters label:hover,
.filters label:focus {
    color: #663d15;
}

.filter-input:disabled + label {
    color: #000000;
    opacity: 0.5;
}

.filters-form ul {
    margin: 0;
    padding: 0;
}

.filters-form li:nth-child(1) {
    margin-top: 29px;
}

.filters-form li {
    margin-top: 19px;
    margin-left: 44px;
}

.filter-button {

    display: inline-block; /* чтобы размеры можно было задавать */
    box-sizing: border-box; /* удобнее задать общую ширину блока, чем высчитывать с паддингами */

    min-width: 112px;
    min-height: 43px;

    padding-left: 11px;

    font: inherit;
    font-size: 13px;
    line-height: 18px;
    text-transform: uppercase;

    color: #ffffff;
    background-color: #000000;

    border: none;
}

.filter-button:hover,
.filter-button:active,
.filter-button:focus {
    color: #ffffff;
    background-color: #663d15;
}

.filter-input {
    display: none; /* чтобы НЕ отображались стандартный чекбокс и радиобаттон */
}

.filters-option label {
    position: relative;
    display: block;
    cursor: pointer; /* при наведении рука с пальцем в качестве курсора, а не стрелочка*/
    user-select: none; /* запретить выделение текста */
}

.manufacturers label::before { /* рисуем квадратик вместо стандартного чек-бокса */
    content: "";
    position: absolute;

    top: -1px;
    left: -43px;

    width: 16px;
    height: 16px;
    border: 2px solid #000000;
}

.manufacturers .filter-input:checked + label::after { /* для чекбокса, у которого установлена галочка, рисуем крестик как фон */
    content: "";
    position: absolute;

    top: 3px;
    left: -39px;

    width: 12px;
    height: 12px;

    background-color: #ffffff;
    background-image: url("../img/cross.svg"); /* крестик */
    background-repeat: no-repeat;
    background-position: 0 0;
}

.goods-group label::before { /* рисуем квадратик вместо стандартного чек-бокса */
    content: "";
    position: absolute;

    top: -1px;
    left: -43px;

    width: 16px;
    height: 16px;
    border: 2px solid #000000;
    border-radius: 50%; /* делаем из квадрата круг */
}

.goods-group .filter-input:checked + label::after { /* для радио-баттонов, у которого установлена точка, рисуем черный кружок внутри  */
    content: "";
    position: absolute;

    top: 5px;
    left: -37px;

    width: 8px;
    height: 8px;

    background-color: #000000;
    border-radius: 50%; /* делаем из квадрата круг */
}


.catalog {
    width: 700px;
}

.catalog-list {
    margin: 0;
    padding: 0;
    padding-top: 6px;
    display: flex;
    /*justify-content: space-between;*/  /*так делать нельзя, т.к. кол-во карточек может быть нечетным*/
    flex-wrap: wrap; /*разрешить перенос элементов на новую строку*/
    margin-bottom: 25px; /*отодвинем кнопки пагинации вниз*/
}

.catalog ul {
    list-style: none;
}

.catalog-item {
    background-color: #f8f8f8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /*тень вокруг карточки товара*/
    width: 220px;
    margin-bottom: 20px;
    margin-right: 20px;
    padding-bottom: 10px;
}

.catalog-item:nth-child(3n) { /*у каждого третьего элемента сбрасываем правую границу (отступ)*/
    margin-right: 0;
}

.catalog-item a { /* если хочешь поменять порядок следования тегов,
 превращай во флекс с порядком следования "столбец" и задавай ордер*/

    display: flex;
    flex-direction: column; /* порядок следования "столбец" - вертикальный сверху вниз*/
}

.catalog-item h3 {
    order: 1; /* чтобы заголовок h3 следовал после фото с товаром*/
}

.catalog-item p {
    margin: 0;
    padding: 0;
}

.catalog-item:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* тень немного усилили*/
}

.catalog-category {
    text-transform: none;
}

.catalog-item h3 {
    color: #000000;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    margin-bottom: 7px;
    padding: 0;
    padding-top: 6px;
    padding-left: 16px;
}

.catalog-item-price {
    display: flex;
    margin: 15px;
    margin-top: 0;
}

.catalog-item-price b {
    box-sizing: border-box;

    font-size:14px;
    line-height: 18px;

    background-color: #e5e5e5;

    margin: 0;
    margin-left: 16px;
    padding: 13px 18px 11px;
    min-width: 109px; /*не работает!!! почему???*/
    min-height: 43px;
    text-align: center;
}

.catalog-item-price .button {
    box-sizing: border-box;

    min-width: 78px; /*не работает!!! почему??? ответ: убери паддинги и задавай min-width! */
    min-height: 43px;

    margin: 0;
    padding: 0;
    padding-left: 20px;
    padding-top: 12px;

    line-height: 18px;
    color: #ffffff;
}

.product-photos {
    width: 460px;
}

.product-photos ul,
.product-info ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.product-photo-full {
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1); /*тень вокруг*/
}

.product-photo-full img:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* тень немного усилили*/
}

.product-photo-preview {
    margin: 0;
    padding: 0;
    display: flex;

}

.product-photo-preview li {
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1); /*тень вокруг*/
    margin-right: 20px;
}

.product-photo-preview li:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* тень немного усилили*/
}

.product-info {
    width: 380px;
    margin-left: 90px;
    margin-right: 0;
}

.product-info p {
    margin: 0;
    padding: 0;
}

.product-info h3 {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 29px;
}

.product-info-columns {
    margin-top: 27px;
    display: flex;
    margin-bottom: 25px;
}

.product-info-columns .product-article-number {
    margin-left: 176px;
    color: #aeaeae;
}

.product-info-columns {
    /*border: 1px solid red;*/
}

.product-info .product-price {
    display: flex;
    margin-bottom: 60px;
}

.product-price b {
    box-sizing: border-box;

    font-size:14px;
    line-height: 18px;

    background-color: #e5e5e5;

    margin: 0;
    margin-left: 0;
    padding: 13px 18px 11px;
    min-width: 109px;
    min-height: 43px;
    text-align: center;
}

.product-price .button {
    box-sizing: border-box;

    min-width: 78px; /*не работает!!! почему??? ответ: убери паддинги и задавай min-width! */
    min-height: 43px;

    margin: 0;
    padding: 0;
    padding-left: 20px;
    padding-top: 12px;

    line-height: 18px;
    color: #ffffff;
}

.product-info .product-description {
    margin-bottom: 40px;
}

.kit-item {
    font-size: 14px;
    line-height: 24px;
    margin-left: 20px;
    position: relative;
}

.kit-item::before {
    content: "";

    position: absolute; /* absolute делает любой элемент как-бы блочным, и элемент начинает воспринимать размеры */
    top: 8px;
    left: -17px;
    transform: rotate(45deg); /* поворот на 45 градусов*/

    width: 7px;
    height: 7px;

    background-color: #000000;
}

.pagination-list {
    /*width: 194px;*/
    display: flex;
    margin: 0;
    padding: 0;
    /*justify-content: space-between;*/
}

.pagination-item-current {
    box-sizing: border-box;
    width: 43px;
    height: 43px;
    text-align: center;
    font-size: 14px;
    line-height: 18px;

    background: #ffffff;
    padding-top: 12px;
}

.pagination-item-button {
    width: 43px;
    height: 43px;

    font-size: 14px;
    line-height: 18px;

    display: flex; /* внутри всего лишь один элемент - цифра, флекс тут нужен чтобы:
                    /* 1.превратить цифру во флекс-элемент,*/
                    /* 2.чтобы он начал воспринимать размеры, и отцентрировать эту цифру во горизонтали и вертикали */
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: #000000;
}

.pagination-item {
    margin-right: 5px;
}

.pagination-item a:hover,
.pagination-item a:active,
.pagination-item a:focus {
    color: #ffffff;
    background-color: #663d15;
}

.compliment {
    margin-bottom: 60px;
}

.compliment h2 {
    margin: 0;
    padding: 0;
    font-size: 48px;
    line-height: 48px;
    text-align: center;
    display: flex;
    align-items: center; /* выравнивание элементов вдоль поперечной оси - черточки вертикально посередине делает */
}

.compliment h2::before,
.compliment h2::after { /* для прорисовки черточек */
    content: "";
    width: 50px;
    height: 2px;
    background: #000000;
    flex-grow: 1; /* чтобы черточки растянулись на всю длину */
    flex-shrink: 0; /* если текста будет очень много - чтобы черточки не ужимались меньше 50px*/
}

.compliment h2::before {
    margin-right: 25px;
}

.compliment h2::after {
    margin-left: 25px;
}

.main-columns h2{
    margin: 0;
    margin-bottom: 40px;
    padding: 0;
}

.facilities {
    width: 380px;
    margin-right: 100px;
}

.facilities h2,
.prices h2,
.about-us h2{
    font-size: 24px;
    line-height: 30px;
    margin: 0;
    margin-bottom: 28px;
    padding: 0;
}

.facilities-list {
    list-style: none; /*убрал точечки у списка*/
    margin: 0;
    margin-bottom: 60px;
    padding: 0;
}

.facilities-item {
    margin: 0;
    margin-bottom: 13px;
    padding: 0;
    padding-left: 20px;
    position: relative;
}ы

.facilities-item::before { /* рисуем ромбики*/
    content: "";

    position: absolute; /* absolute делает любой элемент как-бы блочным, и элемент начинает воспринимать размеры */
    top: 7px;
    left: 1px;
    transform: rotate(45deg); /* поворот на 45 градусов*/

    width: 8px;
    height: 8px;
    background-color: #000000; /* черный цвет ромбика */
}

.prices {
    width: 435px;
    margin: 0;
    padding: 0;
}

.prices h2 {
    margin-bottom: 34px;
}

.prices table {
    border-collapse: collapse;
}

.prices td {
    box-sizing: border-box;
    border: 2px solid #000000;
    min-width: 229px;
    height: 41px;
    background-color: white;
}

.prices td:first-child {
    padding-left: 17px;
}


.prices td:last-child {
    padding-left: 100px;
}

.about-us h2{
    margin-bottom: 26px;
}

.about-us-columns {
    display: flex;
}

.about-us-columns p {
    width: 380px;
    margin: 0;
    margin-right: 100px;
}

.about-us-columns p:nth-child(2n) {
    margin-right: 0;
}

.about-us {
    margin-bottom: 80px;
}

.inner-page .primary-footer {
    margin-top: 49px;
    padding-top: 56px;
    padding-bottom: 60px;
}

.inner-page .footer-contacts {
    margin: 0;
}

.inner-page .footer-social {
    margin-left: 78px;
    margin-right: 240px;
}

.inner-page .footer-copyright {
    margin: 0;
    padding: 0;
}

/* ------------окончание стиля для внутренних страниц----------------------*/