html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

body {
   line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
   display: block;
}

nav ul {
   list-style: none;
}

blockquote,
q {
   quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
   content: '';
   content: none;
}

a {
   margin: 0;
   padding: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

/* change colours to suit your needs */
ins {
   background-color: #ff9;
   color: #000;
   text-decoration: none;
}

/* change colours to suit your needs */
mark {
   background-color: #ff9;
   color: #000;
   font-style: italic;
   font-weight: bold;
}

del {
   text-decoration: line-through;
}

abbr[title],
dfn[title] {
   border-bottom: 1px dotted;
   cursor: help;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #cccccc;
   margin: 1em 0;
   padding: 0;
}

input,
select {
   vertical-align: middle;
}

/*              */
@import url(https://fonts.googleapis.com/css?family=Cormorant:300,regular,500,600,700,300italic,italic,500italic,600italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,regular,500,600,700,800,300italic,italic,500italic,600italic,700italic,800italic);

html {
   box-sizing: border-box;
}

*,
*::after,
*::before {
   box-sizing: inherit;
}

html,
body {
   min-height: 100%;
}

.wrapper {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

.main {
   flex-grow: 1;
}

body {
   font-family: 'Open Sans'sans-serif;
   color: #151618;
   font-size: 20px;
   font-weight: 300;
   line-height: normal;
   position: relative;
}

a {
   text-decoration: none;
   color: inherit;
}

ul {
   list-style: none;
}


button {
   padding: 0;
   border: none;
   background-color: transparent;
}

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding-left: 20px;
   padding-right: 20px;
}

.title {
   text-align: center;
   margin-bottom: 60px;
   font-family: 'Cormorant', serif;
   font-size: 40px;
   font-weight: 400;
}

.header__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 30px 0;
   min-width: 140px;
}

.logo {
   margin-bottom: 35px;
}

.menu__list {
   display: flex;
   align-items: center;
   gap: 0 65px;
   font-size: 18px;
   font-weight: 400;
   margin-left: 85px;
   position: relative;
   z-index: 3;
}

.menu__btn {
   display: none;
   width: 40px;
   height: 20px;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
   z-index: 2;
}

.mobile__nav,
.menu__close {
   display: none;
}

.menu__btn span {
   background-color: #000;
   height: 2px;
   width: 100%;
}

.menu--close {
   display: none;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.50);
   z-index: 1;
   transition: background-color .3s ease;
}

.menu--close.menu--open {
   display: block;
}

.user-actions {
   display: flex;
   align-items: center;
   gap: 0 20px;
}

.user-actions__item-search {
   margin-left: 80px;
}

.top {
   background-image: url(../img/top-bg.jpg);
   background-repeat: no-repeat;
   background-position: bottom left;
   background-size: cover;
}

.top__inner {
   min-height: 500px;
   color: #fff;
   font-family: 'Cormorant'serif;
   font-weight: 400;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

.top__title {
   font-size: 60px;
   margin-bottom: 20px;
   max-width: 780px;
   line-height: 1;
   font-weight: 400;
}

.top__text {
   font-size: 24px;
   margin-bottom: 48px;
   max-width: 560px;
}

.blockquote {
   font-family: 'Cormorant'serif;
   text-align: center;
   font-size: 40px;
   font-style: italic;
   margin: 150px auto;
   max-width: 704px;
}



.assortment {
   margin-bottom: 150px;
}

.assortment__list {
   text-align: center;
   display: flex;
   gap: 0 40px;
}

.assortment__img {
   max-width: 208px;
   max-height: 208px;
   width: 100%;
}

.assortment__name {
   padding-top: 10px;
   font-family: 'Cormorant'serif;
   font-size: 24px;
   font-weight: 400;
}


.reviews {
   padding: 60px 0;
   background: #F7F2EA;
}

.reviews__list {
   display: flex;
   justify-content: center;
   gap: 0 26px;
}

.reviews__item {
   flex-basis: 280px;
}

.reviews__text {
   font-size: 16px;
   font-style: italic;
   margin-bottom: 10px;
}

.reviews__name {
   font-weight: 600;
}

/* .reviews__item.reviews__item--hide {
   display: none;
} */

.main-blog {
   padding: 150px 0;
}

.main-blog__list {
   display: flex;
   flex-wrap: wrap;
   gap: 40px 58px;
}

.main-blog__item {
   display: flex;
   column-gap: 20px;
   flex-basis: 542px;
}

.main-blog__item-content {
   display: flex;
   flex-direction: column;
}

.main-blog__item-title {
   font-family: 'Cormorant', serif;
   font-size: 24px;
   font-weight: 400;
   margin-bottom: 10px;
   min-height: 86px;
}

.main-blog__item-author {
   font-size: 13px;
}

.main-blog__item-link {
   margin-top: auto;
   font-size: 13px;
   position: relative;
}

.main-blog__item-link::after {
   content: '';
   background-image: url(../img/arrow.svg);
   position: absolute;
   width: 5px;
   height: 10px;
   margin-left: 8px;
   bottom: 4px;
}

.main-blog__link {
   padding: 12px 41px;
   display: flex;
   justify-content: center;
   margin: 72px auto 0;
   border: 1px solid #151618;
   width: 152px;
}

.mailing-list {
   padding: 100px 0;
   background-color: #f7f2ea;
   background-image: url(../img/tea\ 1.png);
   background-repeat: no-repeat;
   background-position: bottom right;
}

.mailing-list__title {
   text-align: left;
   margin-bottom: 50px;
}

.mailing-list__inner {
   display: flex;
   gap: 60px 40px;
}

.mailing-list__text {
   line-height: 1.5;
   flex-basis: 580px;
}

.mling-liaist__form {
   display: flex;
   flex-wrap: wrap;
   flex-basis: 580px;
}

.mailing-list__email {
   border: none;
   border-bottom: 1px solid #B8B58B;
   background-color: transparent;
   padding: 3px 15px;
   width: 413px;
   margin-right: 25px;
   font-family: 'Open Sans', sans-serif;
   font-style: normal;
   font-size: 20px;
   font-weight: 300;
   line-height: 1.5;
   color: #151618;
}

.mailing-list__email::placeholder {
   font-family: 'Open Sans', sans-serif;
   font-style: normal;
   font-size: 20px;
   font-weight: 300;
   line-height: 1.5;
   color: #B8B58B;
}

.mailing-list__btn {
   font-family: 'Open Sans', sans-serif;
   background-color: #fff;
   border: 1px solid #151618;
   padding: 12px 41px;
   font-size: 20px;
   font-weight: 300;
   cursor: pointer;
}

.checkbox-text {
   font-size: 13px;
   padding-left: 20px;
}

.mailing-list__label {
   margin-top: 16px;
}

.checkbox {
   position: absolute;
   width: 1px;
   height: 1px;
   clip: rect(0, 0, 0, 0);
   overflow: hidden;
   padding-left: 20px;
}

.checkbox-style {
   position: absolute;
   width: 10px;
   height: 10px;
   border: 1px solid #151618;
   margin-top: 1px;
}

.checkbox:checked+.checkbox-style::before {
   content: "";
   position: absolute;
   width: 6px;
   height: 6px;
   background-color: #151618;
   top: 1px;
   left: 1px;
}

.prioritise {
   padding: 150px 0;
}

.prioritise__list {
   text-align: center;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 30px 49px;
}

.prioritise__title {
   font-size: 30px;
   margin-bottom: 10px;
   font-weight: 300;
}

.prioritise__text {
   font-weight: 600;
   margin-bottom: 30px;
}


.footer {
   padding: 100px 0 20px;
   background-color: #F7F2EA;
}

.footer__inner {
   margin-bottom: 100px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0 40px;
}

.footer__products-title,
.footer__company-title,
.footer__contacts-title {
   font-weight: 400;
   font-family: 'Cormorant', serif;
   font-size: 24px;
   margin-bottom: 50px;
}

.footer__products-item,
.footer__company-item {
   margin-bottom: 20px;
}

.footer__blockqouote-text {
   margin-top: 80px;
   font-style: italic;
   margin-bottom: 20px;
}

.footer__blockqouote-author {
   font-size: 12px;
   font-style: normal;
}

.footer__blockqouote-author span {
   display: block;
}

.footer__contacts-text {
   font-size: 13px;
   margin-bottom: 20px;
}

.footer__nav {
   display: flex;
   flex-wrap: wrap;
}

.footer__nav-logo {
   margin-right: 40px;
}

.footer__nav-contacts {
   margin-top: 20px;
}

.footer__nav-phone,
.footer__nav-email {
   font-size: 13px;
   position: relative;
   padding-left: 32px;
   display: block;
   margin-bottom: 20px;
}

.footer__nav-phone::before {
   content: '';
   position: absolute;
   background-image: url(../img/phone.svg);
   left: 0;
   top: 0px;
   width: 20px;
   height: 20px;
}

.footer__nav-email::before {
   content: '';
   position: absolute;
   background-image: url(../img/mail.svg);
   left: 0;
   top: 0px;
   width: 22px;
   height: 16px;
}

.footer__nav-social {
   margin-top: 40px;
   margin-left: 97px;
}

.footer__social-list {
   display: flex;
   align-items: center;
   gap: 0 20px;
}

.footer__bottom {
   display: flex;
}

.footer__copy {
   margin-right: 192px;
   font-size: 16px;
}

.partners-logo {
   align-items: center;
   display: flex;
   gap: 0 20px;
}

.master {
   display: flex;
   justify-content: flex-end;
   margin-top: 6px;
}

@media (max-width: 1000px) {
   .user-actions__item-search {
      margin-left: 30px;
   }

   .menu {
      margin-right: auto;
   }

   .menu__list {
      margin-left: 60px;
   }

   .logo {
      margin-bottom: 0;
   }

   .header__inner {
      min-height: auto;
   }

   .blockquote__text {
      margin-top: 120px;
      margin-bottom: 135px;
   }

   .assortment {
      margin-bottom: 120px;
   }

   .assortment__list {
      gap: 0;
   }

   .reviews__item:last-child {
      display: none;
   }

   .main-blog {
      padding: 120px 0;
   }

   .main-blog__item-img {
      max-width: 230px;
   }

   .main-blog__item {
      flex-basis: 460px;
   }

   .main-blog__list {
      gap: 67px 20px;
   }

   .main-blog__link {
      margin-top: 60px;
   }

   .mailing-list__inner {
      flex-wrap: wrap;
      justify-content: center;
   }

   .mailing-list {
      padding: 60px 0;
   }

   .mailing-list__title {
      text-align: center;
   }

   .mailing-list__text {
      text-align: center;
      flex-basis: 780px;
   }

   .prioritise {
      padding: 120px 0;
   }

   .prioritise__list {
      gap: 30px 210px;
   }

   .footer__blockqouote {
      width: 270px;
   }

   .footer__blockqouote-text {
      margin-top: 0;
   }

   .footer__inner {
      margin-bottom: 55px;
   }

   .footer__copy {
      margin-right: 85px;
   }

   .footer__contacts {
      width: 270px;
   }
}

@media (max-width: 860px) {
   .menu__list {
      transform: translateY(-100%);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 480px;
      margin: 0 auto;
      background-color: #fff;
      display: block;
      text-align: center;
      padding-top: 60px;
      transition: transform .6s ease;
   }

   .menu__list.menu__list--open {
      transform: translateY(0);
   }

   .menu__close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
   }

   .menu__item {
      margin-bottom: 30px;
      font-size: 24px;
      font-family: 'Cormorant', serif;
   }

   .mobile__nav,
   .menu__close {
      display: block;
   }

   .mobile__menu {
      padding-top: 60px;
      margin: 60px 30px;
      border-top: 2px solid #F7F2EA;
   }

   .mobile-actions {
      background-color: #F7F2EA;
      height: 60px;
      padding: 0 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .menu__btn {
      display: flex;
   }

   .menu {
      order: -1;
   }

   .mobile__menu-item {
      margin-bottom: 35px;
   }

   .logo {
      margin-left: auto;
      margin-right: 154px;
   }
}

@media (max-width: 768px) {
   .header__inner {
      padding-left: 64px;
      padding-right: 64px;
   }

   .blockquote__text {
      max-width: 640px;
   }

   .assortment__list {
      flex-wrap: wrap;
      justify-content: center;
   }

   .reviews__item:last-child {
      display: block;
   }

   .reviews__list {
      flex-wrap: wrap;
      gap: 30px 76px;
   }

   .main-blog__item {
      flex-basis: 542px;
   }

   .main-blog__item-img {
      max-width: 270px;
   }

   .main-blog__list {
      gap: 30px 20px;
   }

   .main-blog__item:nth-child(even) {
      margin-left: 98px;
   }

   .mailing-list__text {
      flex-basis: 640px;
   }

   .prioritise__list {
      gap: 30px 133px;
   }

   .footer__inner {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr 1fr;
   }

   .footer__products,
   .footer__company {
      grid-row: span 3;
   }

   .footer__contacts {
      grid-column: 3 / 4;
      grid-row: 2 / 3;
   }

   .footer__copy {
      margin-right: 120px;
   }
}

@media (max-width: 680px) {
   .container {
      padding-left: 10px;
      padding-right: 10px;
   }

   .header__inner {
      padding-left: 0;
      padding-right: 0;
   }

   .top__title {
      font-size: 40px;
   }

   .blockquote__text {
      font-size: 16px;
      max-width: 376px;
      margin-top: 60px;
      margin-bottom: 60px;
   }

   .main-blog__item:nth-child(even) {
      margin-left: 0;
   }

}

@media (max-width: 480px) {
   .title {
      margin-bottom: 30px;
   }

   .logo {
      margin-right: 80px;
   }

   .logo img {
      width: 60px;
   }

   .menu__list {
      width: 360px;
   }

   .assortment {
      margin-bottom: 60px;
   }

   .reviews__list {
      gap: 30px 20px;
   }

   .reviews {
      padding: 50px 0;
   }

   .reviews__item {
      flex-basis: 220px;
   }

   .main-blog {
      padding: 60px 0;
   }

   .main-blog__item-img {
      max-width: 230px;
   }

   .mailing-list {
      padding: 50px 0;
   }

   .mailing-list__text {
      flex-basis: 100%;
      font-size: 13px;
   }

   .mailing-list__inner {
      gap: 30px 0;
   }

   .mailing-list__email {
      width: 324px;
      margin-right: 20px;
   }

   .mailing-list__btn {
      padding: 12px 38px;
   }

   .prioritise {
      padding: 60px 0;
   }

   .footer__inner {
      display: flex;
      flex-wrap: wrap;
   }

   .footer__blockqouote {
      width: 100%;
   }

   .footer__blockqouote-text {
      margin-bottom: 10px;
      margin-top: 50px;
   }

   .footer__contacts {
      margin-top: 50px;
      width: 100%;
   }

   .footer__contacts-title {
      text-align: center;
      margin-bottom: 20px;
   }

   .footer__contacts-text {
      text-align: center;
   }

   .footer__nav {
      flex-wrap: nowrap;
   }

   .footer__nav-social {
      margin-left: 30px;
   }

   .footer__copy {
      margin-right: auto;
   }

   .footer__products {
      margin-right: auto;
      padding-right: 20px;
   }

   .footer__company {
      padding-right: 20px;
      margin-right: 55px;
   }

   .footer__company-title,
   .footer__products-title {
      margin-bottom: 30px;
   }

   .footer {
      padding: 50px 0 10px;
   }
}

@media (max-width: 360px) {
   .title {
      margin-bottom: 10px;
   }

   .logo {
      margin-right: 50px;
   }

   .user-actions__item-search {
      margin-left: 0;
   }

   .header__inner {
      padding: 10px 0;
   }

   .top__title {
      font-size: 24px;
      margin-bottom: 10px;
   }

   .top__text {
      font-size: 13px;
      margin-bottom: 30px;
   }

   .top__inner {
      min-height: 367px;
   }

   .blockquote__text {
      max-width: 340px;
      margin-top: 70px;
      margin-bottom: 80px;
   }

   .assortment__img {
      max-width: 170px;
   }

   .assortment {
      margin-bottom: 80px;
   }

   .reviews__item {
      flex-basis: 100%;
   }

   /* посмотреть сюда */
   .reviews__item:last-child,
   .reviews__item:first-child {
      display: none;
   }

   .main-blog {
      padding: 50px 0;
   }

   .main-blog__item {
      display: block;
      max-width: 270px;
   }

   .main-blog__item-img {
      max-width: 100%;
   }

   .main-blog__item:nth-child(even) {
      display: none;
   }

   .main-blog__list {
      justify-content: center;
   }

   .main-blog__item-title {
      min-height: auto;
   }

   .mailing-list__email {
      width: 205px;
   }

   .prioritise {
      padding: 50px 0;
   }

   .prioritise__title {
      font-size: 20px;
   }

   .prioritise__text {
      font-size: 10px;
      font-weight: 400;
   }

   .prioritise__list {
      gap: 40px 100px;
   }

   .footer__company {
      padding-right: 15px;
      margin-right: 0;
   }

   .footer__nav {
      flex-wrap: wrap;
      justify-content: center;
   }

   .footer__products {
      padding-right: 10px;
   }

   .footer__nav-social {
      margin-right: auto;
      margin-left: auto;
   }
}