html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
 }

body {
   margin: 0;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
 
h1 {
   font-size: 32px;
   margin: 0 0 15px;
   line-height: 1.3;
}
h2{
   font-size: 26px;
   line-height: 1.3;
   margin: 0 0 15px;
   font-weight: bold;
}

p{
   font-size: 18px;
   line-height: 1.3;
   margin: 0 0 15px;
}

p span{
   font-weight: bold;
   color: red;
}

ul{
   list-style-type: none;
   padding: 0;
}

a {
   background-color: transparent;
   text-decoration: none;
   color: blue;
}

b, strong {
   font-weight: bolder;
}

img {
   border-style: none;
   max-width: 100%;
}
 
 button,
 input,
 optgroup,
 select,
 textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: 1.15;
   margin: 0;
 }
 
 button,
 input {
   overflow: visible;
 }
 
 button,
 select {
   text-transform: none;
 }
 
button,
[type="button"], 
[type="reset"],
[type="submit"] {
   -webkit-appearance: button;
}
 
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
}
 
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
   outline: 1px dotted;
}
 
textarea {
   overflow: auto;
}
 
[hidden] {
   display: none;
}

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

.menu{
   background: #fff;
   box-shadow: 0 0 16px 1px rgba(228, 228, 228, 1);
   padding: 10px 0;
   margin-bottom: 20px;
}

.menu__container{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.menu__list{
   display: flex;
   align-items: center;
}

.menu__list-item{
   margin: 0 10px;
   text-align: center;
}
.menu__list-item a{
   font-size: 20px;
   display: inline-block;
   color: #000;
}

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

.content__left{
   width: 865px;
   box-sizing: border-box;
   margin-right: 15px;
}
.content__right{
   width: 335px;
   box-sizing: border-box;
   margin-left: 15px;
}
.content__left-image {
   text-align: center;
   margin: 0 0 15px;
}

.custom-list{
   padding-left: 30px;
   list-style-type: disc;
}

.custom-list li{
   font-size: 18px;
   margin-bottom: 5px;
}
.custom-list li:last-child{
   margin-bottom: 0;
}

figure{
   font-size: 18px;
   width: 100%;
   text-align: center;
   padding: 10px;
   background: #f9f7fa;
   border-top: 1px dotted black;
   border-right: 1px dotted black;
   border-bottom: 1px dotted black;
   border-left: 5px solid #760e00;
   margin: 7px 0 0;
   box-sizing: border-box;
}

.content__left-color {
   background: #fff691;
   padding: 15px;
   margin: 0 0 15px;
   border: 2px solid #640e01;
}

.content__left-order{
   border: 1px dotted #640e01;
   padding: 15px;
   text-align: center;
   background: #eee;
   margin-bottom: 30px;
}

p.content__left-title {
   font-size: 26px;
   font-weight: bold;
   color: #0091b2;
}

.content__left-red{
   color: red;
   font-size: 22px;
   font-weight: bold;
}
.content__left-order img{
   width: 100%;
   max-width: 220px;
   display: block;
   margin: 20px auto 30px;
}

.content__left-order a,
.content__left-bottom a,
.content__right-product a{
   background: red;
   color: #fff;
   font-size: 26px; 
   font-weight: bold;
   text-align: center;
   display: block;
   max-width: 400px;
   padding: 12px 15px;
   margin: 0 auto 15px;
}

.comments__title{
   display: flex;
   margin-bottom: 15px;
   justify-content: space-between;
   align-items: center;
   padding: 15px;
   background: #eee;
}

.comments__title a{
   font-size: 20px;
   font-weight: bold;
}

.comments__item{
   display: flex;
   padding: 15px 0;
   border-bottom: 1px solid #640e01;
}

.comments__item-image img{
   width: 48px;
   min-width: 48px;
}

.comments__item-text{
   margin-left: 15px;
   width: 100%;
}

.comments__item-text .name{
   color: darkblue;
   font-size: 18px;
   margin-bottom: 7px;
   font-weight: bold;
}
.comments__item-text .name span{
   font-size: 14px;
   display: inline-block;
   margin-left: 5px;
   color: #555;
   font-weight: normal;
   font-style: italic;
}
.comments__item-text .text{
   font-size: 18px;
   margin-bottom: 0;
}

.comments__item-text .btns{
   margin-top: 7px;
}

.comments__item-text .btns a{
   display: inline-block;
   margin-right: 7px;
   padding: 3px 7px;
   border: 1px solid #640e01;
   background: #f9f7fa;
   transition: .5s all ease;
}

.comments__item-text .btns a:hover{
   background: #fff691;
}

.content__left-bottom{
   margin: 30px 0;
}

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

.content__right-title{
   font-size: 30px;
   font-weight: bold;
   padding-bottom: 5px;
   border-bottom: 2px solid #0091b2;
}

.content__right-item img{
   margin-bottom: 15px;
}

.content__right-product{
   border: 2px solid #640e01;
   text-align: center;
   padding: 15px;
   background: #eee;
}

.content__right-product img{
   max-width: 200px;
   margin: 0 auto 15px;
   display: block;
}

.content__right-product a{
   font-size: 18px;
   margin-bottom: 0;
}

@media screen and (max-width: 1200px) {
   .container{
      width: 970px;
   }
   .content__left{
      width: 623px;
   }
}

@media screen and (max-width: 1000px) {
   .container{
      width: 100%;
   }
   .content__left{
      width: 100%;
      margin: 0;
   }
   .content__right{
      display: none;
   }
}

@media screen and (max-width: 767px) {
   h1{
      font-size: 26px;
   }
   h2{
      font-size: 22px;
   }
   .menu__list{
      display: none;
   }
   .menu__logo{
      width: 100%;
      text-align: center;
   }
   .content__left-order a, 
   .content__left-bottom a, 
   .content__right-product a{
      font-size: 22px;
   }
}

@media screen and (max-width: 480px) {
   p, .comments__item-text .text,
   .comments__item-text .name{
      font-size: 16px;
   }
   h1{
      font-size: 20px;
   }
}