@font-face {
    font-family: 'BERNIER Regular'; /*  Гарнитура шрифта */
    src: url('fonts/BERNIERRegular-Regular.otf') format('opentype'); }
@font-face {
    font-family: 'Akrobat ExtraBold'; /*  Гарнитура шрифта */
    src: url('fonts/Akrobat-ExtraBold.otf') format('opentype'); } 
@font-face {
    font-family: 'Akrobat Regular'; /*  Гарнитура шрифта */
    src: url('fonts/Akrobat-Regular.otf') format('opentype'); } 
@font-face {
    font-family: 'Akrobat SemiBold'; /*  Гарнитура шрифта */
    src: url('fonts/Akrobat-SemiBold.otf') format('opentype'); } 
@font-face {
    font-family: 'Caveat Bold'; /*  Гарнитура шрифта about */
    src: url('fonts/Caveat-Bold.otf') format('opentype'); }     
             

* { -webkit-tap-highlight-color: transparent; }

html, body {padding:0; margin:0; min-height: 100%; 
            background: linear-gradient(to bottom, #e3c39a, #eedabf); }

a:link{color:#5c3f1e}    
a:visited{color:#5c3f1e} 
a:hover{color:red;}  

h1	{ /* meta-head-cafe */
   font-weight:normal; font-size:calc(2rem + 4vw); font-family:BERNIER Regular; 
   color:white; text-align:center;  margin:0; text-shadow: 4px 4px 2px rgba(78, 49, 17, 0.5)} 

.textcontact  /* head, footer*/
	{font: calc(1rem + 0.1vw) Akrobat SemiBold; color:#5c3f1e; text-align:center; 
      margin:0;  font-weight:60;} 
.textcontact1  /* head, index, footer*/
	{font: calc(1rem + 0.3vw) Akrobat ExtraBold; color:#5c3f1e; text-align:center; 
    margin:10px 0; vertical-align:middle;}       
.headtext  /* index */
	{font:calc(3rem + 1vw) BERNIER Regular; color:#febc0e; text-align:center; 
     margin:0; text-shadow: 4px 4px 2px rgba(78, 49, 17, 0.5)} 
.comtext   /* index*/
   {font: calc(1rem + 0.1vw) Akrobat SemiBold; color:#5c3f1e; text-align:center; 
      margin:0;  font-weight:60;}   
.comtextc   /* index */
   {font: calc(1rem + 0.2vw)Akrobat SemiBold; color:white; text-align:center;
    margin: 10px 0; font-weight:100;}
a.comtextc   /* index footer*/
   {text-decoration: none; color:white; display:inline-block;}
a:hover.comtextc {color:red;}        
   
.act {text-align:center;  font-family:Akrobat Regular;
      color:#eacea9; margin:0; text-decoration: underline;
  text-decoration-color: #f0b225; text-decoration-thickness: 3px;}

/* ------Главное меню ------ */
.menu-wrap {width:100%; }

nav{ display:flex; background: #69411b;}

.mmenu {width:100%; list-style: none; display:flex; margin:0; padding:0;
        background: #69411b; justify-content: space-evenly; flex-direction: row; 
        align-items: center;}
.mmenu li {text-align:center; font-size:calc(0.6rem + 1vw); font-family:Akrobat Regular;
           margin:0;  padding:0; display: flex; line-height:2.0;}
.mmenu li a {text-decoration: none; display: flex;}
.mmenu li a:link{color:#eacea9;}
.mmenu li a:visited{color:#eacea9;} 
.mmenu li a:hover{color:#ff7b2d;}

.act {text-align:center;  font-family:Akrobat Regular;
      color:#eacea9; margin:0; text-decoration: underline;
  text-decoration-color: #f0b225; text-decoration-thickness: 3px;}

img {border:0; max-width: 100%; height: auto; margin:0;}

img.block {display:block;}
img.center {margin-left: auto; margin-right: auto;} 

img.smile {width:24px; vertical-align:middle;}
img.smile_menu {width:16px; height: 16px;}
img.foto_size {width:calc(25rem + 5vw)}

div.main-wrap { min-height: calc(100vh - 40px); padding:0; margin:0; min-width: 100%; } 

div.out-div {text-align: center; padding: 0; }
     
/* ---------------meta-head-cafe---------------------- */
div.header {width:100%; display:flex; text-align: center; padding: 0; margin:0 auto; 
justify-content: space-evenly; flex-direction: row; align-items: center;}

div.imgsunduk {padding: 0; margin-top: 0; width: calc(10rem + 10vw);
    box-sizing: border-box; display: inline-block; float:left;}

div.imglogo {padding: 0; margin:0; width: calc(6rem + 3vw);
    box-sizing: border-box; display: inline-block; }

.hsunduk { box-sizing: border-box; margin: 10px;  padding: 0; 
           display: inline-block; }
.hsunduk a {text-decoration: none;}               

.button { border: none; display: block;   outline: none; text-decoration: none;
    text-align: center;  cursor: pointer; width: calc(10rem + 1.5vw);
    font: 1.3rem Akrobat ExtraBold; padding: 5px; margin: 0 auto; 
    background: #f5b031; color:#5c3f1e; border-radius: 20px;}
a.button {color:#5c3f1e}
a:hover.button {color:#5c3f1e; background: #fad9a0;}

div.work { padding: 0; display: inline-block; text-align:center;}

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

.panel {display:flex; vertical-align: top;justify-content: space-around;}
.cell1 {width: 55%; margin:10px; display: inline-block; vertical-align:top;
       text-align:center;}

div.image-news { padding: 0; margin: 10px auto; vertical-align: middle; }
img.foto_news {width:100%; display:block;}

.button_news { border: none; display: block;   outline: none; text-decoration: none;
    text-align: center;  cursor: pointer; width: calc(11rem + 1.5vw);
    font: 1.3rem Akrobat Regular; padding: 5px; margin: 5px; 
    background: #f5b031; color:#5c3f1e; border-radius: 20px;
   float:right;}
a.button_news {color:#5c3f1e}
a:hover.button_news {color:#5c3f1e; background: #fad9a0;}

div.connect { padding: 0; display: inline-block;
              margin: 10px;   text-align:center;}
    
ul.social {margin: 0; padding: 5px; text-align:center;}
ul.social li {display: inline; padding: 10px;} /* Отображать как строчный элемент */
ul.social li a {text-decoration: none;}
img.conn {border:0; width: calc(2rem + 1vw); height: auto; margin:0;}

/* ---------------------------------------------------------------- */
div.wrap-index 
  { width:100%; display:flex; text-align: center; padding: 0; margin:10px auto; 
    justify-content: space-evenly; flex-direction: row; align-items: center;}
     
.cell2 {width: 25%; margin:10px; display: block;}
.cell3 {width: 60%; margin:5px; display: block; }

.button_comment { border: none; display: block;   outline: none; text-decoration: none;
    text-align: center;  cursor: pointer; width: calc(11rem + 1.5vw);
    font: 1.3rem Akrobat Regular; padding: 5px; margin: 10px auto; 
    background: #f5b031; color:#5c3f1e; border-radius: 20px;}
a.button_comment {color:#5c3f1e}
a:hover.button_comment {color:#5c3f1e; background: #fad9a0;} 
div.comment {margin:20px auto; }


div.img_index {padding: 0; margin: 10px; width: calc(16rem + 7vw);
    box-sizing: border-box; display: block; vertical-align: top; }

.cell4 {width: 30%; margin:0 auto; display: block;}

/*-----------------------about---------------------------*/
div.wrap-about {background: #f3e6d6;}
div.about_cell { margin:0 auto; padding:0;
        width:100%; display:flex; text-align: center;
        justify-content: center; flex-direction: row;
        align-items: center; gap:40px;}

img.foto_size_about {width: calc(16rem + 8vw); align-self: center;}        

.cell6 {width: 30%; margin:0 0; display:flex; flex-direction: column; }
        
.textabout_title {font: calc(2rem + 0.4vw) Caveat Bold; color:#5c3f1e; 
          text-align:center; margin:10px 0; line-height:0.8;}        
.textabout {font: calc(1rem + 0.4vw) Akrobat SemiBold; color:#5c3f1e; 
            text-align:justify; margin:5px auto; font-weight:60;}

img.foto_about1 {width:80px;float:left;}
img.foto_about2 {width:8rem;float:left;}
div.about_title { margin:0 auto; padding:0;
        width:100%; display:flex; text-align: center;
        justify-content: center; flex-direction: row;
        align-items: center;}

img.foto_about_kom {width:calc(5rem + 14vw);} 

.cell5 {justify-content: center; margin:0 0; display: flex;
flex-direction: column; width:calc(22rem + 10vw); align-self: center;
/*padding-top: clamp(0rem, 15vw - 8rem, 0rem);  /* ← сдвигает вниз */
/*    padding-left: 1rem;
    padding-right: 1rem;*/
    transform: translateY(clamp(0rem, 6rem - 10vw, 4rem));
}

.photos { margin:0 auto; padding:0; width:100%; 
    display: flex; flex-direction: column;
    align-items: center;
}

.row { display:flex; position: relative;}
.row-1 {gap:0; z-index: 1; /*justify-content: space-around;*/}
.row-2 {gap: 0; margin-top: -4vw;          /* ← наезд вверх */
        z-index: 2; margin-left:-4.5rem;}
.row-3 {/*justify-content: flex-end;justify-content: space-evenly; gap:0;
width: clamp(100%, 95vw, 56.25rem);      /* ← чуть шире на средних */
    width: calc(30rem + 40vw);               /* ← ширина ряда 94rem */
   margin-left:clamp(-5.5rem, -5vw, 0rem); /* margin-right:-14rem;*/
    margin-top:clamp(-5.5rem, -7vw, 0rem);            /*-3.5rem;*/
    z-index: 3; align-items:center;
}

.row-4 {
/*width:620px;*/
/*width:620pxcalc(38.75rem + 0vw);
/**/ width: clamp(39rem, 75vw, 51rem);
/*margin-top: -5rem;*/ 
margin-top:clamp(-6rem, -3vw, -2rem);
    justify-content: flex-start;
    z-index: 4; align-items:center;
    
}
      
            
/* ----------------------------footer------------------------------------ */
.footer_main {background: #e3c39a; margin:0 auto; padding:0;
        width:100%; display:flex; text-align: center;
        justify-content: space-evenly; flex-direction: row;
        align-items: center;}

.button_foot { border: none; display: block;   outline: none; text-decoration: none;
    text-align: center;  cursor: pointer; width: calc(14rem + 1vw);
    font: 1.1rem Akrobat Regular; padding: 5px; margin: 5px auto; 
    background: #f5b031; color:white; border-radius: 20px;}
a.button_foot {color:white}
a:hover.button_foot {color:#5c3f1e; background: #fad9a0;} 

div.frame {padding: 0; display:block; margin:10px auto;  
        width:calc(10rem + 3vw); text-align:center; }
            
.ifoot {font: 500 calc(1rem + 0.2vw) Akrobat Regular; text-align:center; 
        color: #5c3f1e; margin:0 0 5px 0;}
/*a.ifoot {text-decoration:none}   */     
        
.button_map { border: none; display: block;   outline: none; text-decoration: none;
    text-align: center;  cursor: pointer; width: calc(10rem + 1.5vw);
    font: 1.1rem Akrobat ExtraBold; padding: 5px; margin: 5px auto; 
    background: #f5b031; /*color::#5c3f1e; */border-radius: 20px;}
a:link.button_map {color::#5c3f1e;}
a:visited.button_map {color:#5c3f1e;}
a:hover.button_map {color:#5c3f1e; background: #fad9a0;}
         

.foot_nav {font: 500 calc(1rem + 0.2vw) Akrobat Regular; text-align:center; 
        color: #5c3f1e; margin:10px 0; }
     
#upbutton {    /* https://realadmin.ru/saytostroy/button-top.html */
    height: 60px; width: 60px; bottom: -10px; right: -10px;
    cursor: pointer; display: none; position: fixed; z-index: 999; }  
    

    
    
/* -------------------- Слайдер -----------------------------*/
    *,
    *::before,
    *::after { box-sizing: border-box; }

.slider__wrapper { overflow: hidden; }
.slider{position:relative}
.slider__container{overflow:hidden}
.slider__items{display:flex; transition:transform .5s ease; justify-content: space-around;}
.slider_disable-transition{transition:none}
.slider__item{flex:0 0 100%; /*max-width:100%; */user-select:none}
.slider__control{position:absolute; top:50%;
    display:flex; align-items:center; justify-content:center; 
    width:40px; height:50px; color:white; text-align:center; 
    transform:translateY(-50%); background:#a24e00; opacity: 0.8;}
.slider__control_hide{display:none}
.slider__control[data-slide=prev]{left:0}
.slider__control[data-slide=next]{right:0;opacity: 0}
.slider__control:focus,
.slider__control:hover{color:#fff; text-decoration:none; outline:0;
    opacity: 1;background:#5c3f1e;}
.slider__control::before{content:''; display:inline-block; 
    width:40px; height:50px; background:transparent no-repeat center center; }        
.slider__item::before {/* content: counter(slide) "/4"; */
    position: absolute;  top: 10px; right: 20px; color: #fff;
    font-style: italic; font-size: 32px; /*font-weight: bold;*/  display: block; }
 
.slider__control[data-slide=prev]::before {background-image:url("promo/left-arrow-w-21.png")}
.slider__control[data-slide=next]::before {background-image:url("promo/right-arrow-w-21.png")}

/* --------------------Лента промо-------------------------- */
  
div.image-promo { padding: 0; margin: 10px; vertical-align: middle; 
    box-sizing: border-box; display: inline-block; }    
   
img.icons-w6 {width:6px;}
img.icons-w10 {width:10px;}
img.icons-w16 {width:16px;}
img.icons {width:24px; vertical-align:middle;}
img.icons-w63 {width:63px;}
img.icons-w20 {width:20px; vertical-align:middle;}

summary::marker{display:none;} 
summary { display:inline-block; cursor: pointer; }
summary::after { content: "Читать далее... "; margin-left: .3em;
      margin-top: .3em; display: inline-block; transition: transform .5s; 
      font: calc(0.9rem + 0.1vw) Akrobat Regular; color:white;}      

summary:focus { outline:0; }
details[open] summary::after {  content: "Скрыть ";}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;} }

details > summary { font: calc(1.1rem + 0.1vw) Akrobat Regular; 
     color:#2c1b0c; text-align:justify; /*font-weight:100;*/ margin: 10px; }

details > p { font: calc(1rem + 0.1vw) Akrobat Regular; 
     color:#2c1b0c; text-align:justify;  /*font-weight:100;*/ margin: 10px; }

.text_details {font: calc(1rem + 0.1vw) Akrobat Regular; 
     color:#2c1b0c; text-align:justify;  /*font-weight:100;*/ margin: 10px 0 0 0;}
     

.slider_promo {max-width: 90%; margin: 0 auto}    
   
.slider_promo .slider__item { flex: 0 0 30%; /* max-width: 25%;*/
      position: relative;  counter-increment: slide; } 

.slider__control_promo{ top:25%; }        

img.foto_promo {display:block}   

/* ------------------mobile---------*/

.mob-button {width: 40px;}

.mobile-menu{ display:none; width:100%; padding:10px; background:#69411b; }
.mobile-menu:hover{ background:#69411b; }


@media (max-width: 768px) {

html, body {  /* Убирает прокрутку по горизонтале, для мобильной версии */
    overflow-x: hidden; }

div.header {flex-direction: column;}

div.wrap-index {flex-direction: column;}
.cell3 {width: 98vmin;}
.cell2 {width: 95%; }
.cell1 {width: 100%; display:block; }
.cell4 {width: 95%;  }
#footer {display:block;}

/* promo */
.slider_promo .slider__item { flex: 0 0 100%; /* max-width: 100%; margin: auto auto*/}
div.image-promo { margin: 10px auto; }
img.foto_promo {width: 80vmin; margin: 0 auto;}
details {width: 90vmin;}
.slider__control[data-slide=next]{opacity: 1}
.panel {display:block; vertical-align: top;}

        
/*  menu-mobile  */                      

.menu-wrap { width:100%;}
.mobile-menu{ display:flex;}

.mmenu{display:none; padding-left:20px;	flex-direction: column;
       align-items: flex-start ;}

nav {background:#69411b;}

.mmenu li{ display:flex; text-align:left; font-size:calc(0.8rem + 0.9vw); 
           width:50%; font-family: Akrobat Regular; line-height:2.0;
           }
.mmenu li a { background:#69411b;}
img.smile_menu {margin-top:0;}
        
.act {text-align:left; font-size:calc(0.8rem + 0.9vw); font-family: Akrobat Regular;
           color:#eacea9;}      

.mmenu li a:hover, .mmenu li:hover > a{ color:#eacea9; width:100%	} 

.footer_main { flex-direction: column;}
div.about_cell { flex-direction: column;}
.cell6 {width:90%;}
    .row-1 { gap: 0; flex-direction: column;}
    .row-2 { gap: 0; margin: 0; flex-direction: column;}
    .row-3 { gap: 0; margin:0; flex-direction: column; width:100%}
    .row-4 { gap: 0; margin:0; flex-direction: column; width:100%}

img.foto_about_kom {display:block; width:80%;}

.cell5 {width: 95%; transform: translateY(0); }

img.foto_size_about {width: 70%; display:block; margin:10px}  
}

@media (max-width: 480px) {}
@media (max-width: 320px) {}