@font-face 
{
  font-family: "JollyLodgerCyrillic"; 
  src: url("../fonts/JollyLodgerCyrillic.otf") format("truetype"); /*адрес шрифта и тип */
  font-style: normal; 
  font-weight: normal; 
} 

@font-face 
{
  font-family: "SummerFontBold"; 
  src: url("../fonts/SummerFontBold.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}

@font-face 
{
  font-family: "ZubiloShadow"; 
  src: url("../fonts/ZubiloShadow.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}
  
/*///////////////////////////////////////////////////////////////////////////////////////////////////*/
.custom-breadcrumbs 
{
position: fixed;
top: 0;
left: 22%;
width: 100%;

display: flex;
align-items: center;
gap: 0px;
padding: 0.8rem 1.2rem;

background: transparent;
z-index: 9999;

overflow-x: auto;
white-space: nowrap;
}

.custom-breadcrumbs::-webkit-scrollbar 
{
height: 6px;
}

.custom-breadcrumbs::-webkit-scrollbar-thumb 
{
background: #333;
border-radius: 3px;
}

.crumb 
{
display: inline-block;
flex: 0 0 auto;
padding: 0.55rem 0.85rem;
border-radius: 1rem;
border: 0.5rem solid #222;
background: #fff;
color: #000;
text-decoration: none;
font-size: clamp(0.75rem, 1.6vw, 2rem);
transition: 0.2s ease;
font-weight: 800;
font-family: "EB Garamond", serif;
}

.crumb-dot
{
display: inline-block;
border: 0.5rem solid #222;
background: #fff;
color: #000;
text-decoration: none;
transition: 0.2s ease;
padding: 0.35rem 0.55rem;
border-radius: 1rem;
font-size: clamp(0.35rem, 1.6vw, 2rem);
font-family: "EB Garamond", serif;
}

.crumb:hover 
{
background: #444;
}

.crumb.current 
{
border: 0.5rem solid #e63946;
background: #fff;
cursor: default;
color: #000;
}

@media (max-width: 768px) 
{
  .crumb {
    /*font-size: 12px;
    padding: 5px 12px;*/
  }
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

.container 
{
display: flex;
height: 100dvh;
}

.sidebar 
{
  position: fixed;   /* фиксируем слева, всегда на экране */
  top: 0;            /* от верхнего края */
  left: 0;           /* от левого края */
  width: 250px;      /* ширина меню */
  height: 100vh;     /* высота на весь экран */
  background-color: #2c3e50;
  color: white;
  overflow-y: auto;
  padding: 10px 0;
  z-index: 1000;     /* чтобы меню было поверх контента */
}

  .menu-item {
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
  }

  .menu-item:hover {
    background-color: #34495e;
  }

  .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: #34495e;
  }

  .submenu-item {
    padding: 10px 40px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s;
  }

  .submenu-item:hover {
    background-color: #3b566e;
  }

  .menu-item.active + .submenu {
    max-height: 500px;
  }

  .content {
  margin-left: 250px;  /* равна ширине меню */
  padding: 20px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

html
{
box-sizing:border-box;      /*чтобы отступы и рамки не искажали размеры элемента*/
}

*,
*::after,
*::before
{
box-sizing:inherit;       /*унаследовать алгоритм расчета размеров (box-sizing) от своего родителя, а не использовать значение по умолчанию (content-box)*/
}

.body
{

}

.hidden 
{
display: none;
}

header 
{
padding-top: 10px;	/*сдвиг сверху всего содержимого блока, для 1го блока сверху страницы*/
}

.container
{
max-width: 1024px;	/*шире растягиваться не будет*/
margin: 0 auto; 	/*позиционирование по центру*/
padding: 0 10px; 	/*отступы по краям, чтобы не прижималось к границам устройств*/
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

.border-shadow-top
{
max-width: 1024px;	/*!!!!!шире растягиваться не будет*/
margin: 0 auto; 	/*позиционирование по центру*/
border-radius: 50px;
box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
height:105%;
}

.border-shadow-bottom
{
max-width: 1024px;	/*шире растягиваться не будет*/
margin: 0 auto; 	/*позиционирование по центру*/
box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
border-radius: 40px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

.nia-menu                            /*родительский для всплывающего меню*/
{
/*text-align: center; /*margin-inline: auto;*/
/*position:fixed;*/
/*top: 50%;*/
/*left: 50%;*/
/*transform: translate(-50%, -50%);*/
/*transform: translate(-50%);*/
/*z-index:-10;*/
position:relative;
}

.block-menu-main                     /*показывающееся меню*/
{

}

.block-menu-pop                      /*всплывающее меню*/
{
position:absolute;
display: none;                       /*изначально невидимо*/
z-index: 500;
top: 60%;
left: 50%;
transform: translate(-50%);
}

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

.menulogin, .menulang, .menuclose   /*поля меню (голубые)*/
{
width: 40rem;
height: 8rem;

/*margin-left: 100px;
margin-top: 100px;*/

border-width: 0.4rem;
border-style: solid;
border-radius: 0.8rem;
border-color: #fff;
background-color: #6791cc;
display: flex;
position:relative;

padding:0.6rem;
}

.menulogin a, .menulang a, .menuclose a
{
text-decoration: none;
color: #fbe708;                     /*цвет текста*/
}

.menuimg img
{
position:absolute;
height:6rem;
}

.menutext
{
font-family:"JollyLodgerCyrillic";
position:absolute;
font-size: 6rem;
margin-left: 10rem;
line-height: 0.9em;
}

.menulang, .menuclose 
{
margin-top: 0.4rem;
}

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

.buttonlogin:hover
{
background: #FF0000;
}

.buttonlang:hover
{
background: #51D0B2;
}

/*----------------------------------------------------------------------------*/
.close-circle                   /*круг с крестом Закрыть для меню и боковой панели слева*/
{
border-radius: 50%;             /* Делает div круглым */
position: relative;             /* Для позиционирования креста внутри */
cursor: pointer;
overflow: hidden;               /* Скроет части, выходящие за предель круга, если нужно */

width: 6rem;
height: 6rem;
border: 0.5rem solid #333;    /* Цвет и толщина круга */
}

.close-circle::before,
.close-circle::after 
{
content: '';
position: absolute;
background-color: #666; /* Цвет крестика */
  
width: 1rem;                 /* Размеры полосок креста */
height: 80%;                /* Или больше, чем половина круга */
top: 50%;
left: 50%;
transform-origin: center;   /* Центрирование вращения */
}

.close-circle::before 
{
transform: translate(-50%, -50%) rotate(45deg); /* Поворот первой полоски */
}

.close-circle::after 
{
transform: translate(-50%, -50%) rotate(-45deg); /* Поворот второй полоски */
}

.close-circle:hover         /*эффект при наведении*/
{
background-color: #f0f0f0;
}

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

.circle-with-cross 
{
width: 100px;
height: 100px;
border: 2px solid #333;
border-radius: 50%; /* Делает элемент круглым *
position: relative; /* Для позиционирования псевдоэлементов *
margin: 20px;
}

.circle-with-cross::before,
.circle-with-cross::after 
{
content: '';
position: absolute;
background-color: #333; /* Цвет крестика *
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Центрирование *
}

/* Горизонтальная полоса крестика *
.circle-with-cross::before 
{
width: 60%; /* Длина полосы *
height: 10px; /* Толщина полосы *
}

/* Вертикальная полоса крестика *
.circle-with-cross::after 
{
width: 10px; /* Толщина полосы *
height: 60%; /* Длина полосы *
}
*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

.buttons
{
border: 1.6rem solid; 
border-color: #ff6028;
padding: 0.0rem;         /* Отступ текста от рамки */
    
text-align: center;    /* Выравнивание текста */
background-color: #f9f9f9; /* Цвет фона */
border-radius: 2rem;    /* Скругление углов (опционально) */
font-size: 3.8rem;
font-family:"JollyLodgerCyrillic";
color: #000; 
text-decoration: none;
display: inline-block;
cursor: pointer;
}

#side-checkbox 
{
display: none;
}

.menu-panel
{
display:none;
position: fixed;
z-index: 999999;
top:215;
left:690px;
}

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

/* Responsive*/

/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 0px) /*c 0 do 240*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 0px) /*С 0 do 320*/
{



}
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/




/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 240px) /*c 240*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 320px) /*С 320*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 360px) /*С 360*/
{

}


/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 400px) /*С 400*/
{

}

}
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/



/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 320px) /*c 320*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 320px) /*С 320*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 480px) /*С 480*/
{





}


}
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/



/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 360px) /*c 360*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 320px) /*С 320*/
{


}


/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 640px) /*С 640*/
{



}

}
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/




/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 480px) /*c 480*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 320px) /*С 320*/
{



}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 800px) /*С 800*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 850px) /*С 800*/
{

}

}
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/


/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 540px) /*c 540*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 320px) /*С 320*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 800px) /*С 880*/
{



}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 950px) /*С 960*/
{



}

}
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/



/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 720px) /*C 720*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 320px) /*С 320*/
{



}


/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 400px) /*С 400*/
{


}


/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 440px) /*С 440*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 480px) /*С 480*/
{



}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 540px) /*С 540*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 600px) /*С 600*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 640px)
{



}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 740px)
{



}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 800px)
{

}


/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 950px) /*С 960*/
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1024px)
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1100px)
{



}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1180px)
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1280px)
{





}

}

/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/

/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 800px) /*C 800*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 320px) /*С 320*/
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 480px) /*С 480*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 600px) /*С 600*/
{



}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 740px) /*С 740*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1280px)
{


}

}
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/


/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 900px) /*C 900*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 320px) /*С 320*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 480px) /*С 480*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 600px) /*С 600*/
{



}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 480px) /*С 480*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1280px)
{

}

}
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/



/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 1000px) /*C 1000*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 320px) /*С 320*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 480px) /*С 480*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 600px) /*С 600*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 640px)
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 740px)		/*for > 768px*/ /*Monitor: Screen Resolution:1600 x 900 ; Browser Window: 1600 x 747*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 800px)
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 900px) 			/*было 1920px*/
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1000px)
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1280px)
{



}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1100px)
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1400px)
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1500px)
{

}


/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1600px)
{

}
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/



/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 1200px) /*C 1200*/
{

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 320px) /*С 320*/
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 480px) /*С 480*/
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 600px) /*С 600*/
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 650px) /*for 1280*720*/
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 768px)
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 800px)
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 950px)		/*для моего монитора вместо 1100px*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1020px)		/*для монитора 1920*1080*/
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1200px)		/*для монитора*/
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1280px)
{


}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1400px)		/*для монитора 2560*1440*/
{

}

/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1500px)
{

}


/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1600px)
{

}


/*/////////////////////////////////////////////////////////////////////////*/
@media screen and (min-height: 1920px)
{

}

}

/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/