/*
Menu Definitions
*/

/* Met Navi Menu */
.metabox { width: 100%; background: var(--bg-1); font-size: var(--font_size_m);  position: relative; }
.metabox .item-box { max-width: var(--wide); }
.metabox .menu { display: flex; }
.metabox .widget-box { margin: 0 0 0 auto; }
.metabox .menu>li { margin-left:2px; display: flex; }
.metabox .menu>li a { padding: 10px 15px; display:block;  position: relative; z-index: 13; color:var(--white); text-decoration:none; }
.metabox .menu li a:hover { background-color: var(--hover); color:var(--cl-1); }
.metabox .menu li a:active,
.metabox .menu li a:focus-visible:active {  background-color: var(--bg-5); color:var(--white);  }
.metabox .menu li a:focus-visible {  background-color: var(--red); color:var(--white);   }

.branding .menu li { margin:10px 0 0 20px;}
.branding .icon-menu button,
.branding .icon-menu .button { display:flex; flex-direction:column; color:var(--cl-1); border:0; border-radius: 0; }

.branding button *,
.branding .button * { margin-left:auto; margin-right:auto; font-size: var(--font_size_m);}
.branding button svg,
.branding .button svg { width:auto; height:40px; }

.branding button svg path,
.branding .button svg path { fill:currentColor; }


.branding .icon-menu button:hover,
.branding .icon-menu .button:hover { color:var(--red); }

.branding .icon-menu button:focus-visible,
.branding .icon-menu .button:focus-visible{ background-color:var(--red); color:var(--white); }

.branding .icon-menu button:active,
.branding .icon-menu .button:active { background-color:var(--bg-5); color:var(--white); }

@media only screen and (max-width: 840px) {
  .branding button svg, .branding .button svg { height: 30px; }
}


.branding .menu li .counter-box {
  position: absolute;
  top:5px;
  right:5px;
  background-color:var(--red);
  color:var(--white);
  border-radius:50%;
  width:30px;
  height:30px;
  display:flex;
}
.counter-box span { margin:auto; }
.menu,
.menu ul,
.menu li { margin: 0; padding: 0; position: relative; }

.menu li { list-style-type: none;  }

.menu a { position: relative; }
.ivon-navi { display:flex; }
.icon-menu { display:flex; padding:0; margin:auto;}

@media only screen and (max-width: 840px) {
    .ivon-navi    { margin:0 0 1rem auto; }
    .icon-menu li:first-of-type    { margin-left:0;  }
    .branding .icon-menu button, .branding .icon-menu .button { padding:10px; }
}

@media only screen and (max-width: 660px) {
    .ivon-navi    { margin:0 0 1rem auto; }
    .branding button *,
    .branding .button * { margin-left:auto; margin-right:auto; font-size: var(--font_size_m);}
    .branding .menu li { margin: 20px 0 auto 10px; }
    .branding .icon-menu button, .branding .icon-menu .button { padding: 5px; }
}
@media only screen and (max-width: 460px) {
  .ivon-navi {  margin:0 auto 1rem 0; width: 100%; }
  .icon-menu { margin: -15px 0 0 -15px; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; width: calc(100% + 30px);}
}



.pagination li { margin:0 5px 5px 0;}
.pagination .button-box .button,
.pagination li a {
  border-radius: 0;
  border: 0;
  padding: 0;
  line-height: 1;
  width: 45px;
  height: 45px;
  display: flex;
  text-decoration:none;
  font-weight:var(--bold);
  margin: 0;
}
.pagination .button-box a span,
.pagination li a span { margin:auto; }
.pagination .active a  { background-color:var(--bg-1); color:var(--white); }

.pagination li a:hover,
.pagination .button-box a:hover { color:var(--cl-1); background-color:var(--bg-2); border-color:var(--bg-1); }
.pagination .button-box a:focus-visible,
.pagination li a:focus-visible { color:var(--white); background-color:var(--red); border-color:var(--red);}
.pagination .button-box a:active,
.pagination li a:active { }

.pagination .button-box li.active {
  border-radius: 0;
  border: 0;
  padding: 0;
  line-height: 1;
  width: 45px;
  height: 45px;
  display: flex;
  text-decoration: none;
  font-weight: var(--bold);
  display:flex;
  color:var(--white); background-color:var(--bg-1); border-color:var(--white);
}
.pagination .active span.current { margin:auto;}
.pagination span.dots { margin:auto;padding-bottom: 5px; }
.search-items .pagination li {
  border-radius: 0;
  border: 0;
  padding: 0;
  line-height: 1;
  width: 45px;
  height: 45px;
  display: flex;
  text-decoration: none;
  font-weight: var(--bold);
  display:flex;
}

/** searchWP pagination design */
.pagination .nav-links .page-numbers {
  margin: 0 5px 5px 0;
  border-radius: 0;
  border: 0;
  text-decoration: none;
  font-weight: var(--bold);
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 45px;
}

.pagination .nav-links .page-numbers:hover {
    color: var(--cl-1);
    background-color: var(--bg-2);
    border-color: var(--bg-1);
}

.pagination .nav-links .page-numbers.current {
  border-radius: 0;
  border: 0;
  text-decoration: none;
  font-weight: var(--bold);
  color: var(--white);
  background-color: var(--bg-1);
  border-color: var(--white);
}