/* .visually-hidden */
#menu__toggle { 
    position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; margin: 0; border: 0; height: 1px; width: 1px; overflow: hidden;
}

.menu__btn-wrapper {
    position: fixed; left: var(--container-gutter); z-index: 1; top: 23px;
    display: flex;  align-items: center;  justify-content: center; 
    transform-origin: top left;
    background-color: #F5E293; outline: 2px solid white;  border-radius: 50%; 
    padding: 7px;
    
}
body.logged-in.admin-bar .menu__btn-wrapper {  top: 55px; }


/* Хамбургер */
.menu__btn {  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer;  }
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block; position: absolute; width: 100%; height: 4px;
  background-color: #183667; transition: 0.3s;
}
.menu__btn > span::before { content: ''; top: -9px; }
.menu__btn > span::after { content: ''; top: 9px; }

/* Мобилното меню */
.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 90px 15px 30px 15px;
  background-color: #ECEFF1;
  box-shadow: 5px 0px 25px rgba(0, 0, 0, .35);
  transition: 0.3s;
}
body.logged-in.admin-bar .menu__box {  top: 32px; }


#menu__toggle:checked ~ .menu__btn > span {  transform: rotate(45deg); }
#menu__toggle:checked ~ .menu__btn > span::before { top: 0; transform: rotate(0); }
#menu__toggle:checked ~ .menu__btn > span::after { top: 0; transform: rotate(90deg); }

.menu__box.is_visible { visibility: visible; left: 0; }


/* WP mobile menu */
ul.menu-mobile { margin: 0; padding: 0; list-style: none none; list-style-position: inside; }
ul.menu-mobile > li.menu-item { border-top: 2px solid #d9d9d9;  }
ul.menu-mobile > li.menu-item:last-child { border-bottom: 2px solid #d9d9d9;  }
ul.menu-mobile > li.menu-item > a { text-decoration: none; font-size: 17px; font-weight: 600; text-transform: uppercase; display: block; padding: 10px 0px; }
ul.menu-mobile > li.menu-item > a:hover { opacity: 0.777; }
ul.menu-mobile > li.current-menu-item > a { color: #F84311; }



/* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║ ####################################   DEVELOPMENT BREAKPOINTS   ##################################  ║ */
/* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */


/* LG */ 
@media (max-width: 1279.98px) {

} /* @media ---| width < 1200px |--- */

/* MD */ @media (max-width: 991.98px) {

  .menu__btn-wrapper {  transform: scale(0.8); top: 15px;  }
  body.logged-in.admin-bar .menu__btn-wrapper {  top: 47px; }

} /* @media ---| width < 992px |--- */

/* SM */ @media (max-width: 767.98px) {


} /* @media ---| width < 768px |--- */

/* XS */ @media (max-width: 575.98px) and (orientation:landscape) {}
@media (max-width: 575.98px) {

} /* @media ---| width < 576px |--- */

@media screen and (min-width: 320px) and (max-width: 767.98px) and (orientation: landscape) { }

/* XXS */ @media (max-width: 319.98px) and (orientation:landscape) {}
@media (max-width: 319.98px) {


} /* @media ---| width < 320px |--- */

/* ---| END |--- */
/* ¡ NO STYLES BELOW THIS LINE PLEASE ! */