/* Шрифт основной*/
@font-face {
  font-family: "calibri";
  font-style: normal;
  src: local("calibri"), url(ttf/Calibri.ttf);
}

/* смещает вниз при переходе по якорям */
html {
  scroll-padding-top: 195px; /* height of sticky header */
}

body {
  text-align: center;
  margin: auto;
  font-family: "calibri";
}

/* поведение фона сайта*/
#backgroundhome {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  background-color: #83b9c3;
  z-index: -1; /* положение элемента по оси z */
}

/* --------------  ВЕРХНЕЕ МЕНЮ ------------------- */

.menu_ret {
  width: 100%;
  height: 120px; /* высота главной строки меню*/
  display: table;
  position: fixed;
}
.menu_ret ul {
  display: table-row;
  font-size: 52px; /* размер шрифта меню 50px*/
}
.menu_ret_l {
  position: absolute;
  left: 60px;
  top: 20px;
}

.menu_ret_c {
  position: absolute;
  top: 30px;
}

/* --кнопка меню ISF MHL--*/
.menu_ret_r {
  font-size: 48px;
  width: 180px;
  text-decoration: none;
  padding: 10px 10px;
  color: #ffffff;
  background: #588188;
  border-radius: 20px;
  border: 3px solid #ffffff;
  position: absolute;
  right: 60px;
  top: 20px;
}

.menu_ret li {
  display: table-cell;
  position: relative;
  background: rgba(13, 42, 83);
  vertical-align: middle;
}
.menu_ret li a {
  display: block;
  color: #fff;
  text-align: center;
  text-decoration: none; /* подчеркивание текста */
}

/* выпадающий блок */
.menu_ret li:hover ul {
  display: block;
  position: absolute;
  margin: 0;
  width: 440px; /* ширина выпадающего блока */
  z-index: 9999;
}

.menu_ret ul ul {
  display: none;
  position: fixed; /* позиционирование выпадающего меню */
  right: 15px; /* выпадающее меню к правому краю*/
  top: 120px; /* отступ сверху, выпадающего меню*/
}

/* выпадающий блок фон яцейки*/
.menu_ret ul ul li {
  display: block;
  background: rgba(13, 42, 83); /*цвет фона ячейки*/
  margin: 8px 0; /* отступ от верха и низа между блоками*/
  padding: 30px 0 0 0; /* отступ от верха и низа*/
  height: 90px; /* высота выпадающего меню*/
  border-radius: 20px;
  border-style: solid;
  border-color: #fff;
}

/* выпадающий блок фон текста в ячейке*/
.menu_ret ul ul li a {
  display: block;
  padding-left: 40px; /* отступ текста меню слева */
  color: rgb(255, 255, 255); /*цвет текста в выпадающем меню*/
  background: rgba(13, 42, 83); /*фон текста в выпадающем меню*/
  text-align: left;
  font-size: 42px;
}

/* ------------оформление названия группы -------------*/

.button_fone {
  background: url(img_menu/b_bb.png) no-repeat;
  border: none;
  background-size: 100% 140px;
  font-size: 56px; /* размер шрифта 56px или 6vw*/
  color: #ffffff;
  height: 140px;
  width: 100%;
}

/* ----------------формат шрифта наименования ----------- */
.sku {
  color: #10284e;
  font-size: 48px; /* размер шрифта наименования или 3vw*/
  margin: 10px auto;
  width: 400px;
}

/* тень на png */
.shadow {
  width: 90%;
  -webkit-filter: drop-shadow(10px 15px 15px rgb(47, 47, 47));
  filter: drop-shadow(10px 15px 15px rgb(47, 47, 47));
  margin: 40px;
}

/* формат блоков flex */
.card {
  display: flex;
  min-width: 100%; /* ширина поля экрана */
  min-height: 200px;
  overflow-x: auto;
}

/* формат полосы прокрутки */
.card::-webkit-scrollbar {
  display: none; /* скрытие полосы прокрутки */
}

/* формат каждого блока flex */
.card--content {
  background-color: rgba(255, 255, 255, 0.9);
  min-width: 420px; /* ширина блока 42.5vw или 420px*/
  margin: 30px;
  border-radius: 20px;
  box-shadow: 20px 15px 20px rgb(87, 86, 86);
  padding: 0 5px;
}

/* ---------------нижнее меню  -------------- */

#navbar {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 120px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background-color: rgba(13, 42, 83, 0.9);
  /* отступ от верха для старта следующего блока */
}
#navbar li {
  display: inline;
}

#navbar a {
  color: #fff;
  margin: 20px 20px;
  display: inline-block;
  width: 200px;
}

/* -------------- окно О ПРИЛОЖЕНИИ ----------------*/

.Window {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: none; /* не показывать объект */
  pointer-events: none; /* блокировка нажатий */
  background: rgba(0, 0, 0, 0.6); /* блокирует обработку нажатий на фон */
}

.Window:target {
  display: block;
  pointer-events: auto;
}

.Window > div {
  width: 600px;
  height: 820px;
  position: relative;
  margin: 10% auto;
  padding: 30px;
  border-radius: 20px;
  background: #ffffff;
}

.close {
  color: #000000;
  line-height: 40px;
  position: absolute;
  right: 30px;
  font-size: 72px;
  top: 30px;
  text-decoration: none;
  font-weight: bold;
}

/* ---------------- Раздел о приложении -----------------*/

.inf {
  font-size: 42px;
}

.inf_d {
  appearance: none;
  border: 0;
  border-radius: 10px;
  background: #4676d7;
  color: rgb(255, 255, 255);
  padding: 25px 0px 25px 0px;
  width: 480px;
}

.link {
  font-size: 32px;
  position: absolute;
  left: 40px;
  bottom: 30px;
}

/* ------------------- блоки для ISF ----------------------*/
.card-merch {
  background-color: rgba(255, 255, 255, 0.9);
  min-width: 420px; /* ширина блока 42.5vw или 420px*/
  margin: 20px 30px;
  border-radius: 20px;
  box-shadow: 20px 15px 20px rgb(87, 86, 86);
  padding-bottom: 25px;
}

/* -----------------Формат кнопок Матрица-----------------*/

.matr {
  appearance: none;
  border: 0;
  border-radius: 10px;
  background-color: #ba0c2f;
  color: rgb(248, 243, 243);
  padding: 30px 40px;
  font-size: 32px;
  margin: 20px 0px 20px 0px;
}

/* -------Формат кнопок Планограмма нет данных -----------*/

.data_off {
  /*appearance: none;*/
  border: 0;
  border-radius: 10px;
  background-color: #c2d3f6;
  color: rgb(255, 255, 255);
  padding: 30px 40px;
  font-size: 32px;
  margin: 20px 0px 20px 0px;
}

/* --------------Формат кнопок Планограмма -----------*/

.data_on {
  /*appearance: none;*/
  border: 0;
  border-radius: 10px;
  background-color: #274e9a;
  color: rgb(255, 255, 255);
  padding: 30px 40px;
  font-size: 32px;
  margin: 20px 0px 20px 0px;
}

/* ----------------------кнопки нижнего  меню ----------------*/

.button_isf {
  /* display: inline-block;
  cursor: pointer; */
  font-size: 48px;
  width: 180px;
  text-decoration: none;
  padding: 10px 10px;
  color: #ffffff;
  background: #588188;
  border-radius: 20px;
  border: 3px solid #ffffff;
}

/* --кнопки нижнего меню MS & BAKERY--*/
.button_blue {
  display: inline-block;
  cursor: pointer;
  font-size: 48px;
  width: 180px;
  text-decoration: none;
  padding: 10px 10px;
  color: #ffffff;
  background: #0d2a52;
  border-radius: 20px;
  border: 3px solid #ffffff;
}