/*===========================================*/
/* общие установки                           */
/*===========================================*/

/*Шрифт:*/
/*400 - Regular*/
/*500 - Medium*/
/*700 - Bold*/

/*----------------------------*/
 /*карта z-index*/
 /*z-index: 10; - белый прямоугольник-фон для блока подписки*/
 /*z-index: 20; - инпут и баттон для блока подписки*/
 /*z-index: 20; - для точечек слайдера*/
 /*z-index = 100 - всплывающие менюшки Поиск и Вход и меню для Каталога*/

/* z-index = 200 для hit-background-box */
/* z-index = 300 для hit-price */
/* z-index = 350 для hit-price::before */


/*z-index: 500; - оверлей (модальный фон)*/

/*-----------------------------*/

/*@font-face {*/
    /*font-family: "Roboto";*/
    /*font-style: normal;*/
    /*font-weight: 400;*/
    /*src: url("../fonts/subset-Roboto-Regular.woff2") format("woff2"),*/
         /*url("../fonts/subset-Roboto-Regular.woff") format("woff");*/
/*}*/

/*@font-face {*/
    /*font-family: "Roboto";*/
    /*font-style: normal;*/
    /*font-weight: 500;*/
    /*src:*/
         /*url("../fonts/subset-Roboto-Medium.woff2") format("woff2"),*/
         /*url("../fonts/subset-Roboto-Medium.woff") format("woff");*/
/*}*/

/*@font-face {*/
    /*font-family: "Roboto";*/
    /*font-style: normal;*/
    /*font-weight: 700;*/
    /*src: url("../fonts/subset-Roboto-Bold.woff2") format("woff2"),*/
         /*url("../fonts/subset-Roboto-Bold.woff") format("woff");*/
/*}*/




* {
    margin: 0;
    padding: 0;
}

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

body {
    background-color: #849d8f; /* фон для всей страницы */
}

.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;
}

.container { /* центрирует */
    width: 1150px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.button {
    cursor: pointer; /* при наведении рука с пальцем в качестве курсора, а не стрелочка*/
}

/*=========================*/
/* header */
/*=========================--*/

.page-header {
    margin-top: 1px;
}

.page-navigation {
    display: flex;
}

.page-header-logo {
    display: inline-block;
    margin-left: 2px;
}

.site-navigation {
    margin-top: 15px;
    margin-left: 8px;
    margin-bottom: auto; /* чтобы снизу не было пустого места, низ прижался */

    display: flex; /*чтобы пункты меню друг за другом в строку выстроились*/
    list-style: none; /*убрали маркер у списка (точечку)*/
    flex-wrap: wrap; /* если пунктов меню будет больше, чем влезает - чтобы перенеслись на другую строчку*/

    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    color: #ffffff;
}

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

.site-navigation-link {
    display: inline-block;

    vertical-align: top;
    text-align: center;

    padding: 6px 14px;

    /*text-decoration: underline;*/ /* неправильное подчеркивание - у буквы Д черта прерывается! */
    /*-webkit-text-decoration-color: rgba(255, 255, 255, 0.3);*/
    /*text-decoration-color: rgba(255, 255, 255, 0.3);*/

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

.site-navigation-link:hover {
    background-color: #f7f6f3;
    color: #333333;
    border-radius: 20px;
}

.site-navigation-link:active {
    /*для нажатого пункта    */
    /* тень внутрь */
    box-shadow: inset 0 2px 2px #696969;
}

/*.site-navigation-catalog-item::after,*/   /* 3- вид подчеркивания - через псевдо-элемент */
/*.site-navigation-delivery-item::after,*/
/*.site-navigation-about-item::after {*/
    /*content: "";*/
    /*position: absolute;*/
    /*top: 17px;*/
    /*left: 0;*/
    /*right: 0;*/
    /*height: 1px;*/
    /*background-color: #ffffff;*/
    /*opacity: 0.3;*/
/*}*/


/* попап менюшка для пункта меню "Каталог"    */
/*--------------------------------------------*/
.main-nav__popup-wrap {
    position: absolute;
    margin: 0px;
    padding: 0px;
    padding-top: 5px;
    top: 100%;
    left: -6px;
    z-index: 100;
    visibility: hidden; /* по умолчанию скрыта */
}

.main-nav__popup-wrap:hover {
    visibility: visible;
}

.catalog-item:hover  .main-nav__popup-wrap {
    visibility: visible; /* при наведении на пункт меню - отображает попап-менюшку */
}

.main-nav__popup {
    padding: 0px;
    min-width: 141px;
    list-style-type: none;
    background-color: #f8f7f4;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.4);
}

.main-nav__popup-link {
    display: block;
    padding: 7px 18px;
    padding-bottom: 9px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    text-decoration: none;
    color: #000000;
}

.main-nav__popup-link--title {
    position: relative;
    margin: 0px 6px;
    padding: 9px 12px;
    padding-bottom: 12px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    border-bottom: 1px solid #d1d0ce;
    cursor: default;
}

.main-nav__popup-link--active {
    color: #ffffff;
    background-color: #d07058;
    cursor: default;
}

.main-nav__popup-link:not(.main-nav__popup-link--title):not(.main-nav__popup-link--active):hover {
    background-color: #fbded8;
    cursor: pointer;
}

.main-nav__popup-link:not(.main-nav__popup-link--title):not(.main-nav__popup-link--active):active {
    background-color: #f6b5a5;
}


/* меню Поиск Вход Корзина        */
/* -------------------------------*/
.user-navigation {
    margin-top: 13px;
    margin-left: 346px;

    display: flex; /*чтобы пункты меню друг за другом в строку выстроились*/
    list-style: none; /*убрали маркер у списка (точечку)*/
    flex-wrap: wrap; /* если пунктов меню будет больше, чем влезает - чтобы перенеслись на другую строчку*/

    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: #ffffff;
}

.search-block {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /*background-color: #9db1a5; слайдер переназначает цвет ниже по тексту, поэтому здесь устанавливать цвет не имеет смысла */
}

#id-search-block:hover,
#id-login-block:hover {
    background-color: #f8f7f4;
    color: #323232;
}

.search-block::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 17px;
    height: 17px;
    background-image: url("../img/loupe.svg");
}

.search-block:hover::before {
    background-image: url("../img/search-icon-hover.png");
}

.login-block {
    display: inline-block;
    box-sizing: border-box;

    margin-left: 11px;
    padding-top: 6px;
    padding-left: 15px;

    width: 91px;
    height: 32px;
    color: #ffffff; /*ссылки не наследуют цвет от текста, им отдельно задается цвет*/
    background-color: #9db1a5;
    border-radius: 15px;
    cursor: pointer;
}

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

.login-block:hover .login-form-wrapper {
    display: block;
}


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

.login-wrapper {
    display: flex;
}

.login-caption {
    display: inline-block;
    margin-left: 6px;
    margin-top: 2px;
}

.buy-wrapper {
    display: flex;
}

.buy-button {
    display: inline-block;
    box-sizing: border-box;

    margin-left: 11px;
    padding-top: 6px;
    padding-left: 15px;

    width: 115px;
    height: 32px;
    color: #ffffff; /*ссылки не наследуют цвет от текста, им отдельно задается цвет*/
    background-color: #9db1a5;
    border-radius: 15px;
}

.buy-caption {
    display: inline-block;
    margin-left: 6px;
    margin-top: 2px;

    /*font-family: "Roboto", sans-serif;*/
    /*font-weight: 500;*/
    /*font-size: 14px;*/
    /*line-height: 16px;*/
}

/* окончание меню Поиск Вход Корзина*/

.work-hours {
    margin-top: -4px;
    margin-left: 997px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    color: #ffffff;
}

.phone-number {
    margin-top: 5px;
    margin-left: 981px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 22px;
    line-height: 24px;
    font-weight: 700;
    color: #ffffff;
}

/* всплывающая форма Поиск */
/*-------------------------*/

.search-form-wrapper {
    position: absolute;
    top: 30px;
    left: -311px;
    width: 341px;
    display: none;
    cursor: default;
    z-index: 100; /*обязательно z-index ставь больше нуля, иначе глючит!*/
}

.invisible-search-box {
    padding-top: 7px;
    visibility: hidden;
}

.search-form {
    box-sizing: border-box;
    width: 341px;
    height: 84px;

    padding-top: 20px;
    border-radius: 5px;
    background-color: #f8f7f4;

    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.4);
}

.form-input {
    display: block;
    box-sizing: border-box;

    height: 44px;

    margin-left: auto;
    margin-right: auto;
    padding: 10px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #323232;

    border: 1px solid #d3d3d2;
    border-radius: 5px;
}

.form-input::-webkit-input-placeholder {
    font-weight: 400;
    color: #999999;
}

.form-input::-moz-placeholder {
    font-weight: 400;
    color: #999999;
}

.form-input:hover {
    padding: 9px;
    border: 2px solid #c7c6c5;
}

.search-input {
    width: 311px;
}

.search-block:hover .search-form-wrapper {
    display: block;
}

/* всплывающая форма Войти */
/*-------------------------*/

.user-navigation-login-item {
    position: relative;
}

.login-form-wrapper {
    position: absolute;
    top: 30px;
    left: -175px;
    width: 277px;
    display: none;
    cursor: default;
    z-index: 100; /*обязательно z-index ставь больше нуля, иначе глючит!*/
}

.invisible-login-box {
    /*невидимая небольшая полоса между кнопкой Вход и формой входа*/
    height: 7px;
    visibility: hidden; /* по сути это прозрачный блок */
}

.login-form {
    box-sizing: border-box;

    width: 277px;
    height: 214px;

    padding-top: 20px;
    padding-left: 19px;
    padding-right: 19px;

    border-radius: 5px;
    background-color: #f8f7f4;

    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.4);
}

/*.login-input {*/
    /*display: block;*/
    /*box-sizing: border-box;*/

    /*width: 241px;*/
    /*height: 44px;*/

    /*!*margin-top: 20px;*!*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*padding: 10px;*/

    /*font-family: "Roboto", Arial, sans-serif;*/
    /*font-weight: 700;*/
    /*font-size: 14px;*/
    /*line-height: 24px;*/
    /*color: #323232;*/

    /*border: 1px solid #d3d3d2;*/
    /*border-radius: 5px;*/
/*}*/

/*.login-input::-webkit-input-placeholder {*/
    /*font-weight: 400;*/
    /*color: #999999;*/
/*}*/

/*.login-input::-moz-placeholder {*/
    /*font-weight: 400;*/
    /*color: #999999;*/
/*}*/

/*.login-input:hover {*/
    /*padding: 9px;*/
    /*border: 2px solid #c7c6c5;*/
/*}*/

.login-input-email {
    width: 241px;
}

.login-input-password {
    margin-top: 20px;
    width: 241px;
}

.login-footer {
    display: flex;
    margin-top: 20px;
}

.login-submit {
    display: block;
    width: 100px;
    height: 44px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #fefefe;

    background: #f26843;
    background:  -moz-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: -webkit-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: linear-gradient(to bottom, #f26843 0%, #e74a35 100%);

    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 2px rgba(172, 16, 0, 0.64);
}

.login-submit:hover {
    background:  -moz-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: -webkit-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: linear-gradient(to bottom, #f58669 0%, #ec6f5e 100%);

    box-shadow: 0 2px 2px rgba(172, 16, 0, 1);
}

.login-submit:active {
    background:  -moz-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: -webkit-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: linear-gradient(to bottom, #d84732 0%, #e1613e 100%);

    box-shadow:   0 2px 2px rgba(172, 16, 0, 1);
}

.login-services {
    margin-left: 20px;
}

.login-services-link {
    display: block;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #323232;
    cursor: pointer; /* указатель - рука */
    /*text-decoration: underline;*/ /* стандартная линия подчеркивания слишком близко подходит к тексту */
    margin-bottom: 10px;
}

.underlined-login-text {
    /* 2-й способ подчеркивания, подходит для одиночных строк*/
    border-bottom: 1px solid #adacaa;
    line-height: 14px;
}

/*=========================*/
/* слайдер                 */
/*=========================*/

.site-wrapper {
    background-color: #849d8f;
    min-width: 1190px;

    /*8996a6*/
    /*9d8b84*/

    /*background-image: url("../img/slide-1.png");*/
    /*background-repeat: no-repeat;*/
    /*background-position: top center;*/
}

.page-main-slider {
    position: relative;
    padding-top: 275px;
    text-align: center;
}

.slider-controls {
    position: absolute;
    bottom: 18px;
    left: 20px;
    z-index: 20;
}

.slider-controls-label { /* кружок переключения в слайдере */
    display: inline-block; /* чтобы элемент воспринимал размеры */
    box-sizing: border-box;
    width: 21px;
    height: 21px;
    margin-right: 5px;

    border: 2px solid #ffffff;
    border-radius: 50%; /* окружность */

    cursor: pointer; /* указатель - рука */

    /*background-color: #ededed;*/
    /*background-image: url("../img/radio-off.svg");*/
    /*background-size: cover; !* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. *!*/
}

.slider-selector-button1:checked ~ .site-wrapper label[for="id-slider-selector-button1"],
.slider-selector-button2:checked ~ .site-wrapper label[for="id-slider-selector-button2"],
.slider-selector-button3:checked ~ .site-wrapper label[for="id-slider-selector-button3"] {
    /* для тильды нужно, чтобы теги имели одного родителя поэтому используется .slider-controls */

    background-color: #ffffff; /* это для нажатой радио-баттон */

    /*background-image: url("../img/radio-on.svg");*/
    /*background-size: cover; !* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. *!*/
}

.slider-selector-button1:not(:checked) ~ .site-wrapper label[for="id-slider-selector-button1"]:hover,
.slider-selector-button2:not(:checked) ~ .site-wrapper label[for="id-slider-selector-button2"]:hover,
.slider-selector-button3:not(:checked) ~ .site-wrapper label[for="id-slider-selector-button3"]:hover {

    background-color: #b2c1b7; /* при наведении фон внутри кружка немного меняется */
}

.slider-selector-button1:checked ~ .site-wrapper .login-block,
.slider-selector-button1:checked ~ .site-wrapper .search-block,
.slider-selector-button1:checked ~ .site-wrapper .buy-button {
    background-color: #9db1a5;
}

.slider-selector-button2:checked ~ .site-wrapper .login-block,
.slider-selector-button2:checked ~ .site-wrapper .search-block,
.slider-selector-button2:checked ~ .site-wrapper .buy-button {
    background-color: #a1abb8;
}

.slider-selector-button3:checked ~ .site-wrapper .login-block,
.slider-selector-button3:checked ~ .site-wrapper .search-block,
.slider-selector-button3:checked ~ .site-wrapper .buy-button {
    background-color: #b2a49e;
}



.slide {
    display: none; /* по-умолчанию слайды выключены */
}

.slider-selector-button1:checked ~ .site-wrapper .slide:nth-child(1) {
    /* для тильды ~ нужно, чтобы теги имели одного родителя поэтому для .slider-selector-button1 используется .site-wrapper */
    display: block; /* включаю показ слайда № 1 если радио-кнопка1 нажата */
}

.slider-selector-button2:checked ~ .site-wrapper .slide:nth-child(2) {
    /* для тильды ~ нужно, чтобы теги имели одного родителя поэтому для .slider-selector-button1 используется .site-wrapper */
    display: block; /* включаю показ слайда № 2 если радио-кнопка2 нажата */
}

.slider-selector-button3:checked ~ .site-wrapper .slide:nth-child(3) {
    /* для тильды ~ нужно, чтобы теги имели одного родителя поэтому для .slider-selector-button1 используется .site-wrapper */
    display: block; /* включаю показ слайда № 3 если радио-кнопка3 нажата */
}

.slider-selector-button1:checked ~ .site-wrapper {
    /* для тильды ~ нужно, чтобы теги имели одного родителя поэтому для .slider-selector-button1 используется .site-wrapper */
    background-color: #849d8f; /* включаю фон № 1 если радио-кнопка1 нажата */
    background-image: url("../img/background-slide1.png");
    background-repeat: no-repeat;
    background-position: center -10px; /* подогнал через PerfectPixel */
    transition: background-image 0.5s ease, background-color 0.5s ease; /* анимация 0.5 секунды*/
}

.slider-selector-button2:checked ~ .site-wrapper {
    /* для тильды ~ нужно, чтобы теги имели одного родителя поэтому для .slider-selector-button1 используется .site-wrapper */
    background-color: #8996a6; /* включаю фон № 2 если радио-кнопка1 нажата */
    background-image: url("../img/background-slide2.png");
    background-repeat: no-repeat;
    background-position: center -10px; /* подогнал через PerfectPixel */
    transition: background-image 0.5s ease, background-color 0.5s ease;
}

.slider-selector-button3:checked ~ .site-wrapper {
    /* для тильды ~ нужно, чтобы теги имели одного родителя поэтому для .slider-selector-button1 используется .site-wrapper */
    background-color: #9d8b84; /* включаю фон № 3 если радио-кнопка1 нажата */
    background-image: url("../img/background-slide3.png");
    background-repeat: no-repeat;
    background-position: center -10px; /* подогнал через PerfectPixel */
    transition: background-image 0.5s ease, background-color 0.5s ease;
}

.slide-title {
    width: 700px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 60px;
    line-height: 60px;
    font-weight: 700;
    color: #ffffff;

    margin-left: auto;
    margin-right: auto;
}

.slide-button {
    display: inline-block;
    box-sizing: border-box;
    width: 278px;
    height: 63px;

    margin-top: 30px;
    padding-top: 8px;

    font-family: "Roboto", Arial, sans-serif;
    font-size: 32px;
    line-height: 44px;
    font-weight: 700;
    color: #ffffff;

    text-align: center;
    text-decoration: none; /*ссылка - без подчеркивания*/
    text-shadow: 0 2px 5px rgba(160, 32, 11, 0.76); /* тень для текста*/

    background: #f26843;
    background:  -moz-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: -webkit-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: linear-gradient(to bottom, #f26843 0%, #e74a35 100%);

    border-radius: 100px;
    box-shadow: 0 4px 4px rgba(172, 16, 0, 0.64);
}

.slide-button:hover {
    background:  -moz-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: -webkit-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: linear-gradient(to bottom, #f58669 0%, #ec6f5e 100%);

    box-shadow: 0 4px 4px rgba(172, 16, 0, 1);
}

.slide-button:active {
    background:  -moz-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: -webkit-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: linear-gradient(to bottom, #d84732 0%, #e1613e 100%);

    box-shadow:   0 4px 4px rgba(172, 16, 0, 1);
}

/*для кешированной загрузки изображений*/
.cashe1 {
    background-image: url("../img/background-slide2.png");
}

.cashe2 {
    background-image: url("../img/background-slide3.png");
}

/*--- окончание слайдера ---*/

/*=========================*/
/* подарки */
/*=========================--*/

.gifts {
    margin-top: 42px;
}

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

.gift {
    box-sizing: border-box;
    width: 560px;
    height: 229px;
    padding: 16px 17px;
}

.gift:nth-child(1) {
    background-image: url("../img/raspberry.png");
    background-repeat: no-repeat;
    margin-right: 26px;
}

.gift:nth-child(2) {
    background-image: url("../img/chocolate.png");
    background-repeat: no-repeat;
}


.gift-title {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 41px;
    color: #ffffff;

    margin-bottom: 16px;
}

.gift-description {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #ffffff;
    margin-left: 2px;
}

.gift-button {
    display: inline-block;
    box-sizing: border-box;
    width: 165px;
    height: 46px;

    margin-top: 43px;
    margin-left: 358px;
    padding-top: 10px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;

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

    background: #f26843;
    background:  -moz-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: -webkit-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: linear-gradient(to bottom, #f26843 0%, #e74a35 100%);

    border-radius: 100px;
    box-shadow: 0 4px 4px rgba(172, 16, 0, 0.64);
}

.gift-big-button {
    width: 189px;
    height: 45px;
    margin-left: 332px;
}

/*=========================*/
/* хиты */
/*=========================--*/

.hits-list {
    display: flex;
    list-style: none;
    margin-top: 40px;
}

.hits-list-item {
    position: relative;
    margin-right: 26px;
    width: 267px;
    height: 345px;
}

.hits-list-item:hover .hit-background-box {
    display: block;
}

.hits-list-item:hover .hit-quickview-button {
    display: block;
}

.hit-background-box {
    display: none;
    position: absolute;
    top: -10px;
    left: -13px;

    width: 293px;
    height: 405px;

    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    z-index: 200;
}

.hits-list-item:nth-child(4n) {
    margin-right: 0;
}

.hits-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 61px;
    height: 61px;
    background-image: url("../img/hit.svg");
    z-index: 350;
}

.hit-price {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 267px;
    height: 267px;
    padding-top: 209px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 45px;
    line-height: 45px;
    color: #ffffff;
    z-index: 300;
}

.hit-price-background1 {
    background-image: url("../img/hit1.png");
}

.hit-price-background2 {
    background-image: url("../img/hit2.png");
}

.hit-price-background3 {
    background-image: url("../img/hit3.png");
}

.hit-price-background4 {
    background-image: url("../img/hit4.png");
}

.currency-wrapper { /* чтобы значок рубля можно было сдвинуть вверх-вниз*/
    position: relative;
    display: inline-block;
    width: 34px;
    height: 36px;
}

.currency {
    position: absolute;
    top: 4px;
    left: 2px;
}

.measure-unit {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 45px;
    color: #ffffff;
}

.hit-title {
    position: absolute;
    top: 265px;
    margin-top: 14px;
    text-align: center;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    z-index: 300;
}

.hit-link {
    color: #ffffff;
}

.hit-link:hover {
    border-color: #ffbc9e;
    color: #ffbc9e;

}

.hit-quickview-button {
    display: none;
    position: absolute;
    top: 310px;
    left: 10px;

    box-sizing: border-box;
    margin-top: 25px;
    padding-top: 10px;

    width: 251px;
    height: 43px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #fefefe;

    text-align: center;

    border: none;
    border-radius: 22px;

    background: #f26843;
    background:  -moz-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: -webkit-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: linear-gradient(to bottom, #f26843 0%, #e74a35 100%);
    box-shadow: 0 2px 2px rgba(172, 16, 0, 0.64);

    z-index: 300;
}

.hit-quickview-button:hover {
    background:  -moz-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: -webkit-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: linear-gradient(to bottom, #f58669 0%, #ec6f5e 100%);

    box-shadow: 0 2px 2px rgba(172, 16, 0, 1);
}

.hit-quickview-button:active {
    background:  -moz-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: -webkit-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: linear-gradient(to bottom, #d84732 0%, #e1613e 100%);

    box-shadow:   0 2px 2px rgba(172, 16, 0, 1);
}




.underlined-text {
    /* 1-й способ подчеркивания - через base64 пиксел */
    text-decoration: none;
    display: inline;
    /*background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);*/
    background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAJ6ypgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAIf8LWE1QIERhdGFYTVA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAA7);
    background-repeat: repeat-x;
    background-position: center 18px;
}

.underlined-text2 {
    /* 2-й способ подчеркивания, подходит для одиночных строк*/
    display: inline-block;
    /*border-bottom: 1px solid #9db1a5; !* с этим цветом возникает глюк - браузер неправильно его отображает *!*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    line-height: 17px;
}

.underlined-text-small {
    /* 2-й способ подчеркивания, подходит для одиночных строк*/
    display: inline-block;
    border-bottom: 1px solid #9db1a5;
    line-height: 14px;
}

.underlined-text-small:hover {
    border-color: #ffbc9e;
    color: #ffbc9e;
    cursor: pointer;
}

/*=========================*/
/* features */
/*=========================--*/

.features {
    margin-top: 18px;
    padding: 1px 20px;
    box-sizing: border-box;
    width: 1146px;
    height: 306px;
    background-image: url("../img/wafer-bg.png");
    background-repeat: no-repeat;
    border-radius: 15px;
}

.features-title {
    margin-top: 24px;
    margin-bottom: 20px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    color: #323232;
}

.features-list-up,
.features-list-down {
    list-style: none;
    display: flex;
}

.features-item {
    position: relative;
    width: 485px;
    height: 89px;
    margin-left: 55px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #323232;
}

.features-item:nth-child(1) {
    margin-right: 32px;
}

.features-item-icon1::before {
    content: "";
    position: absolute;
    left: -55px;
    top: -12px;
    width: 49px;
    height: 49px;
    background-image: url("../img/ice-cream.svg");
}

.features-item-icon2::before {
    content: "";
    position: absolute;
    left: -58px;
    top: -13px;
    width: 49px;
    height: 49px;
    background-image: url("../img/cow.svg");
}

.features-item-icon3::before {
    content: "";
    position: absolute;
    left: -55px;
    top: -13px;
    width: 49px;
    height: 49px;
    background-image: url("../img/eco.svg");
}

.features-item-icon4::before {
    content: "";
    position: absolute;
    left: -58px;
    top: -13px;
    width: 49px;
    height: 49px;
    background-image: url("../img/thermometer.svg");
}

/*=========================*/
/* features */
/*=========================--*/

.blog-wrapper {
    margin-top: 40px;
    display: flex;
}

.blog-news {
    box-sizing: border-box;
    width: 560px;
    height: 220px;
    border-radius: 16px;

    margin-right: 25px;
    padding: 22px 19px;

    background-image: url("../img/strawberry.jpg");
}

.blog-news-title {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #323232;
}

.blog-news-link {
    display: inline-block;
    width: 285px;
    margin-top: 4px;
}

.blog-news-item {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #323232;
}

.underlined-news {
    text-decoration: none;
    display: inline;
    background-image: url(data:image/gif;base64,R0lGODlhAQACAPAAADIyMgAAACH5BAAAAAAALAAAAAABAAIAAAICBAoAIf8LWE1QIERhdGFYTVA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAA7);
    background-repeat: repeat-x;
    background-position: center 25px;
}


.subscription {
    position: relative;
    box-sizing: border-box;
    width: 560px;
    height: 220px;
    background-image: url("../img/bg-post.svg");
}

.subscription::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 7px;
    width: 548px;
    height: 210px;
    border-radius: 10px;
    background-color: #f8f7f4;

    z-index: 10;
}

.subscription-petition {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #5a5a5a;

    position: absolute;
    width: 510px;
    top: 33px;
    left: 27px;

    z-index: 20;
}

.subscription-email {
    position: absolute;
    top: 135px;
    left: 26px;

    border: 1px solid #d3d3d2;
    border-radius: 5px;

    box-sizing: border-box;
    width: 369px;
    height: 44px;
    padding-left: 15px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #323232;

    z-index: 20;
}

.subscription-email::-webkit-input-placeholder {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #999999;

}

.subscription-email::-moz-placeholder {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #999999;
}

.subscription-email:hover {
    border: 2px solid #c7c6c5;
}

.subscription-submit {
    box-sizing: border-box;
    width: 128px;
    height: 43px;

    position: absolute;
    top: 135px;
    left: 405px;
    z-index: 20;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #fefefe;

    border: none;
    border-radius: 22px;

    background: #f26843;
    background:  -moz-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: -webkit-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: linear-gradient(to bottom, #f26843 0%, #e74a35 100%);
    box-shadow: 0 2px 2px rgba(172, 16, 0, 0.64);
}

.subscription-submit:hover {
    background:  -moz-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: -webkit-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: linear-gradient(to bottom, #f58669 0%, #ec6f5e 100%);

    box-shadow: 0 2px 2px rgba(172, 16, 0, 1);
}

.subscription-submit:active {
    background:  -moz-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: -webkit-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: linear-gradient(to bottom, #d84732 0%, #e1613e 100%);

    box-shadow:   0 2px 2px rgba(172, 16, 0, 1);
}

/*=========================*/
/* секция contacts */
/*=========================--*/

.contacts {
    position: relative; /* чтобы относительно секции отобразить модальное окно Обратная связь*/
    box-sizing: border-box;
    margin-top: 37px;
    padding-top: 63px;
    height: 430px;
    background-image: url("../img/map2.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

.contacts-box {
    position: relative;
    box-sizing: border-box;
    margin-left: 845px;
    padding: 30px 25px;
    width: 302px;
    height: 305px;
    background-color: #fefdfc;
    border-radius: 20px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #323232;

    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
}

.contacts-box::before {
    content: "";
    position: absolute;

    top: 45px;
    left: -360px;

    width: 80px;
    height: 140px;

    background-image: url("../img/pin.svg");
}

.contacts-address {
    margin-top: 1px;
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #323232;
}

.contacts-phone-title {
    margin-top: 17px;
}

.contacts-phone {
    margin-top: 4px;
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #323232;
}

.contacts-phone-working-hours {
    margin-top: 2px;
}


.feedback-button {
    margin-top: 25px;
    width: 251px;
    height: 43px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #fefefe;

    border: none;
    border-radius: 22px;

    background: #f26843;
    background:  -moz-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: -webkit-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: linear-gradient(to bottom, #f26843 0%, #e74a35 100%);
    box-shadow: 0 2px 2px rgba(172, 16, 0, 0.64);
}

.feedback-button:hover {
    background:  -moz-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: -webkit-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: linear-gradient(to bottom, #f58669 0%, #ec6f5e 100%);

    box-shadow: 0 2px 2px rgba(172, 16, 0, 1);
}

.feedback-button:active {
    background:  -moz-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: -webkit-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: linear-gradient(to bottom, #d84732 0%, #e1613e 100%);

    box-shadow:   0 2px 2px rgba(172, 16, 0, 1);
}

/*=========================*/
/* page-footer */
/*=========================--*/

.page-footer {
    padding-top: 1px;
    display: flex;
    height: 103px;
}

.social-list {
    list-style: none;
    display: flex;
    margin-top: 35px;
    margin-left: 2px;
}

.social-item {
    margin-right: 11px;
}

.social-icon {
    opacity: 0.8;
    display: inline-block;
    padding-top: 3px;
    padding-left: 3px;

}

.rim {
    display: inline-block;
    width: 38px;
    height: 38px;
    background-image: url("../img/rim-normal.png");
    background-repeat: no-repeat;
}

.social-icon:hover {
    opacity: 1.0;
}

.social-icon:active path{
    opacity: 1.0;
    fill: #e9e9e9; /* так как svg - это вставленный прямо в html страницу тег, у него есть подтег fill мы его меняем здесь */
}

.official-list-left {
    list-style: none;
    margin-left: 225px;
    margin-top: 32px;
}

.official-list-item1 {
    position: relative;
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    color: #ffffff;
}

.official-list-item1::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 4px;
    width: 15px;
    height: 13px;
    background-image: url("../img/heart.svg");
}

.official-list-item2,
.official-list-item3,
.official-list-item4 {
    margin-top: 3px;
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: #ffffff;
}

.official-list-item4 {
    margin-top: 4px;
}

.official-list-right {
    list-style: none;
    margin-left: 31px;
    margin-top: 30px;
}

.copyright-title {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #fefefe;
}

.copyright {
    margin-top: 17px;
    margin-left: 232px;
}

.htmlacademy-link {
    color: #fefefe;
}

/*=========================------------------------------------*/
/* Модальное окно Обратная связь                                */
/*=========================------------------------------------*/

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 500;
}

.overlay-show {
    display: block;
}

.modal {
    position: fixed; /* absolute - прокручивается вместе со страницей, fixed - непрокручивается; */
    color: #000000;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.7); /* тень */
    display: none; /* отключу показ */
}

.modal-feedback{
    box-sizing: border-box;

    width: 478px;
    height: 443px;

    /* в центре экрана */
    top: 50%;
    left: 50%;
    margin-top: -221px;
    margin-left: -239px;

    padding: 15px 24px;
    border-radius: 15px;
    z-index : 500;
    background-color: #f8f7f4;
}

.modal-feedback-show {
    display: block; /* включаем отображение */
}

.modal-feedback-title {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    color: #323232;
    

}

.feedback-name {
    margin-top: 20px;
}

.feedback-mail {
    margin-top: 20px;
}

.feedback-text {
    margin-top: 20px;
}

.feedback-input {
    display: block;
    box-sizing: border-box;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #323232;

    border: 1px solid #d3d3d2;
    border-radius: 3px;
    /*outline: none;*/ /* не будет голубой рамки */
}

.feedback-input::-webkit-input-placeholder {
     font-weight: 400;
     color: #999999;
 }

.feedback-input::-moz-placeholder {
    font-weight: 400;
    color: #999999;
}

.feedback-input:hover {
    border: 2px solid #c7c6c5;
    padding-left: 12px;
    padding-right: 12px;
}

.feedback-input-text:hover {
    padding-top: 6px;
}

.feedback-input-name,
.feedback-input-mail {

    width: 267px;
    height: 44px;

    padding-left: 13px;
    padding-right: 13px;
    /*paddint-top: 5px;*/
}

.feedback-input-text {

    width: 428px;
    height: 155px;

    padding-left: 13px;
    padding-right: 13px;
    padding-top: 7px;

    resize: none; /* чтобы уголок увеличения размера не отображался */
}

.feedback-submit {
    margin-top: 25px;
    margin-left: 290px;
    width: 138px;
    height: 43px;

    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #fefefe;

    border: none;
    border-radius: 22px;

    background: #f26843;
    background:  -moz-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: -webkit-linear-gradient(top, #f26843 0%, #e74a35 100%);
    background: linear-gradient(to bottom, #f26843 0%, #e74a35 100%);
    box-shadow: 0 2px 2px rgba(172, 16, 0, 0.64);
}

.feedback-submit:hover {
    background:  -moz-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: -webkit-linear-gradient(top, #f58669 0%, #ec6f5e 100%);
    background: linear-gradient(to bottom, #f58669 0%, #ec6f5e 100%);

    box-shadow: 0 2px 2px rgba(172, 16, 0, 1);
}

.feedback-submit:active {
    background:  -moz-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: -webkit-linear-gradient(top, #d84732 0%, #e1613e 100%);
    background: linear-gradient(to bottom, #d84732 0%, #e1613e 100%);

    box-shadow:   0 2px 2px rgba(172, 16, 0, 1);
}

.modal-close { /* крестик закрытия модального окна из svg */
    position: absolute;

    top: 14px;
    right: 18px;

    width: 17px;
    height: 17px;

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

    cursor: pointer; /* курсор мышки превращаем в руку */
    border: 0; /* у кнопки убираем рамку */
    font-size: 0;
    /*opacity: 0.3;*/
}

.modal-close:hover,
.modal-close:focus {
    opacity: 1;
}

.modal-close:active {
    opacity: 0.1;
}