.navigate {
    display: block;
}

.navigate__list {
    height: 72px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigate__item {
    margin: 0 18px;
}



@media screen and (max-width: 1100px) {
    .navigate {
        background-color: #fff;
    }
}

/* Делаем чекбокс скрытым*/
.have-elements input[type=checkbox] {
  position: absolute;
  left: 5px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 1000;
}

.have_sub_menu input[type=checkbox] {
  position: absolute;
  right: -20px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 1000;
}
/* Когда у флажка установлен checked  
 * блок с содержанием скрыт
*/

.have-elements input[type=checkbox]:checked ~ ul.sub_menu, .have_sub_menu input[type=checkbox]:checked ~ ul {
  margin-top: 0;
  max-height: 0;
  display: none;
  transform: translate(0, 50%);
}
/* А указатель показывает вниз */
.have-elements input[type=checkbox]:checked ~ i:before, .have_sub_menu input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
.have-elements input[type=checkbox]:checked ~ i:after, .have_sub_menu input[type=checkbox]:checked ~ i:after  {
  transform: translate(-2px, 0) rotate(-45deg);
}

/* Сформируем  указатель переключения состояния аккордеона */
.have-elements i {
    position: absolute;
    transform: translate(-6px, 0);
    left: 20px;
    margin-top: 5px;
}
.have_sub_menu i {
    position: absolute;
    transform: translate(-6px, 0);
    right: -20px;
    margin-top: 5px;
}
/* "Рисуем " сам указатель */
.have-elements i:before, .have-elements i:after, .have_sub_menu i:before, .have_sub_menu i:after {
  content: "";
  position: absolute;
  background-color: #32589a;
  width: 3px;
  height: 9px;
}
/* Добавляем элемент трансформации указателя при переключении */
.have-elements i:before, .have_sub_menu i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
.have-elements i:after, .have_sub_menu i:after {
  transform: translate(2px, 0) rotate(-45deg);
}   
ul.sub_menu {
    list-style: none;
    padding-left: 20px;
}
li.navigate__item.have_sub_menu > ul {
    position: absolute;
    top: 20px;
    left: 0px;
    list-style: none;
    background: white;
    width: 300px;
    z-index: 1;
    opacity: 1;
    padding: 20px 20px 20px 30px;
    box-shadow: 0px 0px 3px gray;
}
li.navigate__item.have_sub_menu > ul a {
    color: #2b3f70;
    text-decoration: none;
}
li.navigate__item.have_sub_menu > ul > li > a {
    font-weight: bold;
}

li.navigate__item.have_sub_menu {
    position: relative;
}

li.navigate__item .have_sub_sub_menu, li.navigate__item .have_sub_sub_menu li {
    width: 500px;
}

li.navigate__item.have_sub_menu > ul > li {
    margin-bottom: 10px;
}