html {
  font-size: 62.5%;
}
body, h1 {
   font-style: normal;
margin: 0; padding: 0
}
@media screen and (max-width: 650px) {
#speshial > img  {
margin-right: -60%;
width: 230px !important;
height: 230px !important;
} 
#speshial {
height: 470px;
max-width: 650px;
}
} 
header, header ul, .formati, main  {
width: 100% !important;
}
header, header ul, main, footer h3, section div h3, article p, article h3, #katalog_kofe figcaption h4, #zerna h4, #katalog_kofe figcaption, #deserti figcaption, #deserti figcaption h4 {
  font-weight: 400;
}
header, header ul {
font-family: "Poppins", sans-serif;
 font-color: rgba(0, 0, 0, 0.25);
}
header {margin: 0;
border-radius: 0 0 32px 32px;
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.25); 
}
@media (max-width: 780px) { 
header {
border-radius: 0;
}
}
header div, header ul, button, aside, aside div, section div, section, .formati, .formati > div, .vesopis, section div h3, .format_500, .format_250, button span, #objarca > div, .strelka, .stepen, .strelki, .stepen2, .strelkizerno, #speshial > div, #speshial > div > div, .troika, .troika  > div, .trubka, .ikonki, .dvafuter, .ikonki, #katalog_kofe figure, #zerna div, #deserti div, #deserti figcaption {
  display: -webkit-flex;
  display: flex;
  }
header > div, header > div > div, aside, button, section div, section div h3, .vesopis, .format_500, .format_250, button span, #objarca > div, .strelka {
  align-items: center;
}
header > div, aside, section, .objarcak, details, #speshial > div  {
  max-width: 1440px; 
  margin: 0 auto;
}
 @media (max-width: 780px) { 
header{
  width: 100%; 
  margin: 0 auto;
}
} 
header > div {
  padding: 10px 0;
}

/* @media and (min-width: 768px) and (max-width: 1024px) */
@media screen and (min-width: 768px) and (max-width: 1480px) { 
header, header > div {
  width: 100%; 
}
main {
  width: 90%; 
  margin: 0 auto;
padding: 0;
}
}
 
header > div {
  padding: 10px 0;
}
header > div, header ul, section div, .strelki, .stepen2, #speshial > div > div, .troika, #speshial > div {
  justify-content: space-around;
}
header > div {
max-height: 100px;
}
header > div > div, .troika > div {
  justify-content: flex-start;
}
header > div > div{
  gap: 44px;
}

address {font-style: normal;
	font-size: 1.6em;
}
header nav {
width: 50%;
}

@media (max-width: 768px) { 
address {
display: none;
}
 header nav {
display: none;
} 
}

header a {
font-size: 1.8em;
color: rgba(0, 0, 0, 0.25);
}

@media (min-width: 780px) {
label, .menu, input, menu {
display: none;
}
}


label .menu {
  position: absolute;
 right: 100px; 
  top: -100px;
  z-index: 100;
 /* width: 200px; */
  height: 200px;  
  background: #FFF;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;  
}

label .hamburger {
  position: absolute;
  top: 135px;
  left: 50px;
  width: 30px;
  height: 2px;
 background: #000;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

label input { display: none; }
label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }
label input:checked + .menu {
  box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
  border-radius: 0;
  
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
}
label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
  
}
label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  
}
label input:checked + .menu + menu { opacity: 1; }

label menu { background-image: url("../img/plod_kofe.png");
width: 70%;
background-repeat: no-repeat;
background-position: 0 100px;
background-size: 300px 300px;
  z-index: 200;
  position: absolute;

top: 250px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
}
menu li {
margin: 10px 0;
padding: 10px 20px;
border-bottom: 1px solid #eee;
right: 100px;
color: rgba(0, 0, 0, 0.95);
text-align:right;
}
menu li  a {
color: rgba(0, 0, 0, 0.95);
text-align:left;
right: 0;
}
.podmenu li  a {
color: rgba(0, 0, 0, 0.25);
}
#gl a::before {
  content: url(../img/gl.svg);}
#tovarm a::before {
  content: url(../img/tovar.svg);
}
#vopros  a::before {
  content: url(../img/vopros.svg);top: 10px;
}
#konakt  a::before {
  content: url(../img/trubka_menu.svg);top: 10px;
}
#gl a::before, #konakt  a::before, #vopros  a::before, #tovarm  a::before { 
  right: 0;position: absolute}
 

.image-wrapper li {
    position: relative;
}

ul {
  list-style-type: none; 
  padding-left: 0;
}
li {
  list-style: none;
}
a {
text-decoration: none;
}

@media screen and (min-width: 780px) { 
header a {
font-size: 1.2vw;
}
address {
	font-size: 1.1vw;
}
header img {object-fit: contain;
min-width: 0; min-height: 0;
width: 10.0vw;
  height: auto;          
}
}


#plod_kofe, #kafeteriy {
position: absolute;
}

#plod_kofe {
width: 602px;
height: 506px;
top: 52px;
left: -46px;
angle: 0 deg;
opacity: 1;
}
@media (max-width: 1480px) {
#plod_kofe {
width: 300px;
height: 250px;
top: 52px;
left: -46px;
}
}
@media (max-width: 780px) {
#plod_kofe {
display: none;
}
}

#kafeteriy {
width: 700px;
height: 1303px;
top: -78px;
right: 0;
angle: -180 deg;
opacity: 1;
}
@media (max-width: 1480px) {
#kafeteriy {
width: 300px;
height: 520px;
top: 80px;
}
}

main, footer {
  font-family: "Jost", sans-serif !important;
  font-style: Regular !important;
}

main,  {
  top: 100px;
}
.podmenu, aside div, section div, .formati > div, .vesopis, .stepen, .stepen2, .strelki, #speshial > div > div, .troika  > div, #katalog_kofe figure, #deserti figure, #deserti figcaption {
flex-direction: column;
}
aside, .formati, .format_250, .format_500, button span, .stepen, .strelka  {justify-content: center;
}
aside div {width: 700px; max-height: 700px; flex: 1 1 auto;
}
aside img {/* max-height: 700px; */
width: 700px;
flex: 1 1 auto;
}
@media screen and (max-width: 1480px) { 
aside div, aside img {width: 30%; 
}
aside  {width: 90%; 
}
}
aside div, article {
justify-content: center;
align-items: flex-start;
}
aside div h3 {
font-size: 48px;font-weight: 600;color: #000000;
line-height: 104%;
letter-spacing: 0%;
margin-bottom: 0;
}
@media screen and (min-width: 780px) { 
aside div h3 {
	font-size: 2.3vw;
}
}
@media screen and (max-width: 780px) { 
aside, .formati  {flex-direction: column; 
}
aside div, .formati {
justify-content: center;
align-items: center;
}
}
@media screen and (max-width: 780px) { 
aside div {width: 90%; 
}
aside img {width: 50%; position: absolute; top: 150px;
left: -60px;
}
aside div p {margin-top: 250px; font-size: 16px;
}
aside div h3 {
    font-size: 32px;
}
}
@media screen and (max-width: 640px) { 
aside img {width: 70%; top: 150px;
}
aside div p {margin-top: 280px;
}
}
@media screen and (max-width: 480px) { 
aside img {width: 80%; top: 200px;
}
}
@media screen and (max-width: 400px) { 
aside img {top: 250px;
}
}
 
p{
	font-size: 20px;
	color: #000000;
line-height: 138%;
font-weight: 300;
letter-spacing: 0%;
}

button { 
justify-content: center;  
}
section button, #speshial button, aside button {
background-color: #1B1B1D;
color: #fff;
height: 60px;
width: 186px;      
font-size: 16px;
border-radius: 126px;
}
@media screen and (max-width: 780px) { 
 button, aside button {     
font-size: 12px;
height: 40px;
width: 350px;
}
section button {
width: 200px;border-radius: 40px;
}
#speshial button {
width: 136px;height: 35px;border-radius: 40px;font-size: 10px;margin-top: 30px;
}
}
@media screen and (max-width: 400px) { 
 button, aside button {     
width: 300px;
}
}
@media screen and (max-width: 375px) { 
 button, aside button {     
width: 250px;
}
}

main > h3, h1 {  
font-weight: 600;
font-size: 36px;
text-align: center;
}


section {
gap: 5px;
}
section {justify-content: center;
}


#perechen {
/* width: 300%; */
display: flex;
transition: transform 0.5s ease;
}
@media screen and (max-width: 1240px) { 
.slider {
width: 100%;
max-width: 800px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
#perechen {
width: 200%;
}
@keyframes slideshow {
0% { transform: translateX(0); }
50% { transform: translateX(-50.00%); }
100% { transform: translateX(0); }
}
}
@media screen and (max-width: 780px) { 
.slider {
width: 100%;
max-width: 300px;
}
#perechen {
width: 400%;
}
@keyframes slideshow {
0% { transform: translateX(0); }
25% { transform: translateX(-25.00%); }
56% { transform: translateX(-50.00%); }
75% { transform: translateX(-75.00%); }
100% { transform: translateX(0); }
}
}
#perechen {
animation: slideshow 15s infinite;
}

.slider:hover #perechen {
animation-play-state: paused;
} 
#perechen div, .vesopis button, #objarca button span, #katalog_kofe figure, #zerna section div, #katalog_kofe button, #deserti  button, #deserti section div {
border-radius: 24px;
}
@media screen and (max-width: 780px) { 
#katalog_kofe figure, #zerna section div, #katalog_kofe button, #deserti section div {
border-radius: 16px;
}
}

#perechen div {
height: 468px;
max-width: 350px;
text-align: center;
angle: 0 deg;
opacity: 1;
/*border-radius: 0 0 24px 24px;
 box-shadow: 0 4px 11px rgba(0, 0, 0, 0.25); */
 border: solid #A3A8B226 1px; 
box-shadow: 1px 30px 60px 1px #A3A8B226;
}
@media screen and (max-width: 780px) { 
#perechen div {
height: 400px;
max-width: 270px;
}
}

#perechen div h3 {width: 250px;margin: 0;
font-size: 32px;font-family: Jost;
font-style: Regular;
line-height: 100%;
letter-spacing: 0%;
height: 64px;
display: flex;
  justify-content: center
}

@media screen and (max-width: 780px) { 
main > h3, #perechen div h3 {  
font-size: 24px;
}
 #perechen div h3 {  
height: 35px;
}
}
figure img {
height: 200px;
width: 200px;
min-width: 100px;
}
@media screen and (max-width: 780px) { 
figure img {
height: 130px;
width: 130px;
}
}
figcaption, .formati, article p, .vesopis button {
font-size: 18px;
}
@media screen and (max-width: 900px) { 
article p {
 font-size: 16px !important; 
}
}
@media screen and (max-width: 780px) { 
figcaption, .formati, article p, .vesopis button {
font-size: 16px;
}
sektion figcaption p {
font-size: 14px;
font-weight: 300;
}
}

figcaption {
max-width: 260px;
height: 75px;
}


#objarcak {padding: 50px 0;
background: #F8F4F3;
position: relative; 
width: 100%; top: -5px;
}
@media screen and (min-width: 780px) { 
{
background-image: url("../img/meshok.png");
background-repeat: no-repeat;
background-position: 0 100px;
background-size: 300px 300px;
}
}

.nachalo { border-width: 3px;
  border-style: ridge;
  border-color: black;
  width: 100%;
  height: 100px;
  border-radius: 20px;
  background-color: #fff;
} 

article {
text-align: center;
}



article p, article h3 {
color: #000000;
line-height: 138%;
letter-spacing: 0%;
}
article p {
	max-width: 569px;
	margin: 3px auto;
}
article h3, #objarca button, #katalog_kofe figcaption h4, #zerna h4, footer h3, #deserti figcaption h4 {
	font-size: 26px;
}
@media screen and (max-width: 780px) { 
article h3, #objarca button, footer h3 {
	font-size: 24px;
}
#katalog_kofe figcaption h4, #zerna h4, #deserti figcaption h4 {
	font-size: 20px;
}
}

.hr-with-text {
  display: flex;                 /* Используем flex-бокс для размещения линий и текста */
  align-items: center;           /* Вертикально выравниваем по центру */
  text-align: center;            /* Центруем текст */
  color: #888;                   
  margin: 3px auto;                /* Отступы вокруг блока */
max-width: 180px;
}

.hr-with-text img {
  width: 38px;             
}

.hr-with-text::before,
.hr-with-text::after {
  content: "";                   /* Создаем псевдоэлементы без текста */
  flex: 1;                       /* Занимаем все доступное пространство по сторонам */
  border-bottom: 1px solid #C88F62  
}

.hr-with-text:not(:empty)::before {
  margin-right: 0.75em;          
}

.hr-with-text:not(:empty)::after {
  margin-left: 0.75em;           
}


.formati {
gap: 40px;
}
@media screen and (max-width: 1240px) { 
.formati {
gap: 1px;
}
}
.formati > div, .format_500, .format_250 {
  max-width: 520px;             
}
@media screen and (max-width: 1240px) { 
.formati > div, .format_500, .format_250 {
  max-width: 360px;             
}
}


@media screen and (min-width: 780px) { 
.format_500, .format_250 {position: relative;
  height: 300px;}
.format_500:before, .format_250:before {
  content: '';
  position: absolute;
  top: 50px;
  left: 0;
  width: 50%; /* Только левая половина */
  height: 70%;
  border-left: 1.5px solid #000;
}

.format_250:after {
	  content: '';
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%; /* Только левая половина */
  height: 70%;
  border-right: 1.5px solid #000;
}
}
@media screen and (max-width: 780px) { 
.format_500:before, .format_250:before, .format_250:after {
  border: 0;
}
}
.format_500 img {
  width: 256px; 
height: 256px;  
}
@media screen and (max-width: 780px) { 
.format_500 img {
  width: 178px; 
height: 178px;  
}
}
.format_250 img {
  width: 184px;             
height: 184px;
}
@media screen and (max-width: 780px) { 
.format_250 img {
  width: 122px; 
height: 122px;
} 
.format_250 img, .format_500 img {
margin-bottom: 20px;  
} 

}
.vesopis {
height: 100px;  
}
.vesopis button, #objarca button, #objarca butto {
	background-color: #fff;
}

.vesopis button, #objarca button {
  border: 1px solid #C48B5E;
}
.vesopis button {
	height: 37px;
  width: 96px;
}

#objarca {
  max-width: 1400px;
  margin: 3px auto 30px;
}

#objarca > div {
  max-width: 100%;
}

#objarca button {
	height: 56px;
  width: 176px;
  border-radius: 28px;
}
#objarca button span {
	background-color: #B76C30C2;
	height: 46px;
  width: 166px;
}
@media screen and (max-width: 900px) { 
#objarca button {
	height: 36px;
  width: 126px;
}
#objarca button span {
	height: 26px;
  width: 116px;
  font-size: 60.5%;
}
} 
footer, footer p, footer a, #objarca button span {
color: #fff;
}

.stepen, .stepen2 {
  max-width: 330px; 
}

@media screen and (max-width: 780px) { 
.stepen, .stepen2 {
  width: 222px; 
}
} 
.stepen2 {
  text-align: left; 
}
.omni {
  text-align: right; align-items: end;
}

.strela1, .strela2, .strela3, .strelka , .strelki  {
max-width: 150px;
}
@media screen and (max-width: 980px) { 
.strela1, .strela2, .strela3, .strelka , .strelki  {
max-width: 100px;
}
}


.stepen2, .strelki, .zerno {
height: 500px;
}

.strelkizerno {
max-width: 700px;
}

.zerno {
max-width: 300px;
}

@media screen and (max-width: 800px) { 
#objarca > div {
justify-content:flex-start;
align-items:flex-start;
}
.strelkizerno {
order: 0;margin-left: 100px;
}
.omni {
  order: 1; 
   display: -webkit-flex;
  display: flex !important; 
  flex-direction: column;
  align-self:flex-start; 
  text-align: left; 
  align-items: stert;
  justify-content:flex-start;
  margin-top: 10px;
}

.omni button {
  align-self:flex-start; 
} 

.liniya {display: flex;margin: 20px;
justify-content: center;
align-items: center;
  flex-direction: column;
}
.radius {display: flex;
justify-content: center;
align-items: center;
border: 1px solid #C78D5F;
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 50%;  
}
.krug {
width: 20px;
height: 20px;
background-color: #B76C30C2;
border-radius: 50%;  
}
.Lain {
width: 2px;
height: 150px;
background-color: #B76C30C2;
border: 0;  
}
.stepen2 {
  order: 1; align-self:flex-end; height: 330px; margin-left: -300px;
}
}

@media screen and (max-width: 800px) {
.stepen2 {
  margin-left: -230px;
}
.Lain {
height: 145px;
}
}

@media screen and (max-width: 700px) { 
.strelkizerno {
margin-left: 50px;
}
.stepen2 {
  width: 100px;
}
.stepen2 p {
  width: 200px; 
}
}
@media screen and (max-width: 660px) { 
.strelkizerno {
margin-left: 10px;
}
}
@media screen and (max-width: 620px) { 
.strelkizerno {
margin-left: -50px;
}
}
@media screen and (max-width: 560px) { 
.strelkizerno {
margin-left: -100px;
}
}
@media screen and (max-width: 510px) { 
.strelkizerno {
margin-left: -150px;
}
}
@media screen and (max-width: 450px) { 
.strelkizerno {
margin-left: -200px;
}
}


.zernoi {
max-width: 300px;position: relative;
z-index: 2;
}
.list2 {position: relative; 
width: 250px; top: -100px; left: -100px;
transform: rotate(16.46deg);
}
.list1 {position: relative; 
width: 250px; top: -320px; left: -100px;
transform: rotate(40.46deg);
}
@media screen and (max-width: 800px) { 
.strelki, .strelka { 
width: 0;
display: none;
}
}
@media screen and (max-width: 480px) { 
.list1, .list2 { 
width: 0;
display: none;
}
}
.strela2 {
transform: rotate(158.01deg);
}
.strela3 {
transform: rotate(176.01deg);
}
#speshial {
width: 100%;
}
@media screen and (min-width: 780px) { 
#speshial {
background: url('../img/plodi_kofe.webp') no-repeat top left, url('../img/zerna_f.webp') no-repeat bottom right;
background-size: 511px 397px;
background-size: 384px 415px;
}
}

@media screen and (min-width: 650px) { 
#speshial {
height: 480px;
}
}
@media screen and (max-width: 780px) { 
#speshial {
background: url('../img/plodi_kofe_m.webp') no-repeat top right, url('../img/zerna_f_m.webp') no-repeat bottom left;
background-size: 350px 397px;
background-size: 184px 215px;
}
}
#speshial > div  {
  margin: 3px auto;
}
@media screen and (max-width: 780px) { 
#speshial > div  {
  flex-direction: column;
}
}
#speshial > div img {
width: 30%;
}
#speshial > div   > div {
text-align: left; 
  width: 40%;
}
@media screen and (max-width: 780px) { 
#speshial > div   > div {
margin: 10px;
  width: 80%;
  order: 0;
}
}
@media screen and (min-width: 781px) { 
#speshial > img  {position: relative;
width: 230px;
height: 230px;
top: -160px;
left: -80px;
}
}
@media screen and (max-width: 780px) { 
#speshial > div img {
width: 50%;
order: 1;
align-self:flex-end;
margin-top: -60px;
}
#speshial > img  {position: relative;
width: 230px !important;
height: 230px !important;
top: -160px;
margin-right: -64%;
} 
#speshial h3 {
font-size: 20px;
font-weight: 600;
}
}

@media screen and (max-width: 650px) {
#speshial > img  {
margin-right: -60%;
width: 230px !important;
height: 230px !important;
} 
#speshial {
height: 470px;
max-width: 650px;
}
} 

@media screen and (max-width: 600px) {
#speshial > img  {
margin-right: -65%;
top: -90px;
width: 150px !important;
height: 150px !important;
} 
#speshial {
height: 500px;
max-width: 600px;
}
} 

@media screen and (max-width: 550px) { 
#speshial {
height: 410px;
}
} 
@media screen and (max-width: 480px) { 
#speshial {
height: 380px;
}
}
@media screen and (max-width: 450px) { 
#speshial > img  {
margin-right: -60%;
width: 150px !important;
height: 150px !important;
} 
}
#zerna section {
margin-top: 30px;
}
#zerna span {padding: 1px 5px;
border-radius: 10px;
margin: 0 5px;
border: 1px solid #C88F62
}
#zerna figcaption {
width: 95%;
}
#zerna figcaption p {
width: 100%;
}
@media screen and (max-width: 600px) { 
#zerna figcaption, #zerna figcaption p  {
width: 220px;
}
}
@media screen and (max-width: 650px) {
  #katalog_kofe section, #zerna section, #deserti section {
    flex-wrap: wrap;
    align-content: center;
  }
}
#katalog_kofe section, #zerna section, #deserti  section {
flex-wrap: wrap;
align-content: center;
}
#katalog_kofe section, #deserti  section {
justify-content:space-around
}
#katalog_kofe section {
margin-top: 60px;
}
#deserti  section {
margin: 60px auto;
}
#katalog_kofe section {
gap: 50px 1px;
}
#deserti section {
gap: 70px 1px;
}
#zerna   section {
gap: 22px 10px;
}
#katalog_kofe figure, #zerna section div, #deserti section div {
border: 1px solid #D5BDB4;
align-items: center;
justify-content:space-around;
}
#deserti  figcaption {
align-items: center;
}


#katalog_kofe figure {
/* width: 290px; */
height: 330px;
}
#zerna section div {
height: 460px;
}
@media screen and (max-width: 780px) { 
#zerna section div {
height: 400px;
}
}
#deserti section div {
height: 370px;
}
@media screen and (max-width: 780px) { 
#katalog_kofe figure, #deserti section div {
height: 300px;
}
}
#katalog_kofe figure, #zerna section div, #deserti section div {
width: 290px;
}
@media screen and (max-width: 780px) { 
#katalog_kofe figure, #zerna section div, #deserti section div {
width: 40%;
/* width: 170px; */
}
}
@media screen and (max-width: 600px) { 
#katalog_kofe figure, #zerna section div, #deserti section div {
width: 250px;
/* width: 170px; */
}
}
/*
#katalog_kofe figure img, #zerna figure img {
width: 215px;
height: 215px;
} */
#katalog_kofe figure img, #zerna figure img, #deserti  figure img  {
width: 192px;
height: 192px;
}
@media screen and (max-width: 780px) { 
#katalog_kofe figure img, #zerna figure img, #deserti  figure img  {
width: 150px;
height: 150px;
}
}
#katalog_kofe figure img, #deserti  figure img {
border-radius: 100%;
}
#katalog_kofe figure img, #katalog_kofe figcaption, #deserti figcaption, #deserti  figure img {
position: relative; 
text-align: center;
}
#katalog_kofe figure img, #katalog_kofe figcaption {
top: -60px;
}
#deserti figcaption {
top: -80px;
}
#deserti  figure img {
top: -80px;
}
#katalog_kofe figcaption p, #deserti  figure figcaption p, #katalog_kofe button, #zerna  button, #deserti button {
font-size: 16px;
}
@media screen and (max-width: 780px) { 
 #katalog_kofe button, #zerna  button, #deserti button {
font-size: 15px;
}
}
#katalog_kofe figcaption p, #deserti  figure figcaption p {
width: 200px;
font-weight: 300;
}
#katalog_kofe figcaption h4, #katalog_kofe figure,#zerna h4, #zerna figure, #deserti figcaption h4 {
margin: 0; 
}
#katalog_kofe button, #zerna  button, #deserti button {
padding: 5px 0;
height: 40px;
border: 0;
background: #C88F61;
}
@media screen and (max-width: 780px) { 
#katalog_kofe button, #zerna  button, #deserti button {
height: 36px;
}
}
#katalog_kofe button {
width: 200px;
}
#zerna  button {
width: 240px;
} 
#deserti button {
width: 180px;
}
@media screen and (max-width: 780px) { 
#zerna  button {
width: 145px;
}
}

#voprosi {
margin-bottom: 20px;
}
summary {
 font-size: 18px; 
}
details p {
  font-size: 16px;
}
details {
  width: 90%;
  transition: all .3s ease-in-out;
  summary {
    transition: all .3s ease-in-out;
	padding: 10px;
    cursor: pointer;
	list-style: none;
	box-shadow: inset 0 0 0 1px lightgray;
	
	&::after {
      transition: all .3s ease-in-out;
      content: '';
      display: block;
      float: right;
      width: 16px;
      height: 16px;
      box-shadow: inset -2px -2px gray;
      transform: rotate(45deg);
    }
	&:hover {
      background: whitesmoke;
    }
	    }
  &::details-content {
    transition: all .3s ease-in-out;
    transition-behavior: allow-discrete;
    margin-block-start: -1px;
    padding: 0 1rem;
    border-end-start-radius: 0.5rem;
    border-end-end-radius: 0.5rem;
    opacity: 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px lightgray;
  }
    &[open] {
    grid-template-rows: 3rem 1fr;
    
    summary {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      
      &::after {
        transform: rotate(225deg) translate(-0.25rem, -0.25rem);
      }
    }
    
    &::details-content {
      padding: 1rem;
      opacity: 1;
    }
  }
}
details + details {
  margin-block-start: -1px;
  
  summary {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
}


/*
@media screen and (min-width: 780px) { 
footer {
background: url('../img/footer_big.webp') no-repeat;
background-size: cover;
}
}
@media screen and (max-width: 780px) { 
footer {
background-color: #202020; 
}
}
footer {
width: 100%; padding: 20px 0;
background-color: #202020; 
}
*/
footer {
width: 100%; padding: 20px 0;
}

@media screen and (min-width: 781px) { 
footer {
background: url('../img/footer_big.webp') no-repeat;
background-size: cover;
}
}
@media screen and (max-width: 780px) { 
footer {
background-color: #202020 !important; 
}
}
.dvafuter, .trubka, .troika, .ikonki {
gap: 10px;
}
.troika > div {
gap: 12px;
}
footer > div {
width: 90%;
margin: 0 auto;
}
.troika  > div {
width: 330px;
}
.troika  > div img {
width: 32px;height: 32px;
}
footer p, footer h3 {
Letter-spacing: 0%;
line-height: 1;
margin: 0;
}
footer p, footer a {
	font-size: 18px;
}
footer a {
line-height: 2.5;
}
@media screen and (max-width: 780px) { 
footer h3, footer p, footer a {
	font-size: 16px;
}
.troika  > div img {
width: 18px;height: 16px;
}
footer > div > img, .map {
margin: 10px auto;
display: block;
}
footer > div > img {
width: 220px;
}
.map {
width: 200px;margin: 0;
}
}
@media screen and (max-width: 700px) { 
.troika {
flex-direction: column; 
align-items: center;
}
.map {
width: 320px;margin: 0;
}
}