@media screen and (min-width: 992px) {
  body.menu-open {
    position: relative;
  }
  body.menu-open::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
}

.wsmenu ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.izbornik {
  background: var(--plava);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  position: relative;
}
.izbornik .hamburger-svg {
  width: 60px;
  height: 60px;
}
.izbornik .hamburger-svg .bar {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-box: fill-box;
  transform-origin: center;
}
.izbornik > span {
  font-family: var(--black);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  color: #fff;
  padding-right: 20px;
}

/* Triggered when you add .menu-open to the <body> */
body.menu-open .izbornik .bar1 {
  transform: translateY(7px) rotate(45deg);
}
body.menu-open .izbornik .bar2 {
  opacity: 0;
}
body.menu-open .izbornik .bar3 {
  transform: translateY(-7px) rotate(-45deg);
}

ul.wstabitem-title {
  margin-bottom: 20px;
}

.wsmenu {
  position: absolute;
  top: 95px;
  left: 70px;
  background: var(--crna);
  border-radius: 20px;
  padding: 45px 0px 15px 30px;
  width: 100%;
  max-width: 446px;
  min-width: 320px;
  opacity: 0;
  visibility: hidden;
  z-index: -99;
  filter: blur(8px);
  transform: translateX(-80px);
  transition: opacity 0.15s ease, filter 0.15s ease, visibility 0.15s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.wsmenu:hover, .wsmenu.menu-open {
  /* Final state */
  opacity: 1;
  visibility: visible;
  z-index: 11 !important;
  filter: blur(0); /* Remove blur */
  transform: translateX(0); /* slide in */
}

#top:has(.top-header-upper.sticky) .wsmenu {
  position: fixed;
}

@media screen and (max-width: 991px) {
  #top:has(.top-header-upper.sticky) .wsmenu {
    /*top: 0;*/
  }
}
ul.wstabitem-title li span,
.level-naziv {
  color: var(--plava);
  font-family: var(--black);
  font-size: 1.75rem;
  text-transform: uppercase;
}

.wsmenu .wtsdepartmentmenu a.level {
  display: block;
  width: 100%;
  color: var(--stroke);
  font-family: var(--regular);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 25px;
  padding-top: 0;
  transition: color 0.25s;
  position: relative;
}
.wsmenu .wtsdepartmentmenu a.level:hover, .wsmenu .wtsdepartmentmenu a.level:focus {
  color: var(--plava);
  transition: color 0.25s;
}
.wsmenu .wtsdepartmentmenu a.level::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--plava);
  position: absolute;
  right: 30px;
  top: 7px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s;
}
.wsmenu .wtsdepartmentmenu a.level:hover::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s;
}
@media screen and (max-width: 991px) {
  .wsmenu .wtsdepartmentmenu a.level {
    font-size: 1.25rem;
  }
  .wsmenu .wtsdepartmentmenu a.level::after {
    right: 15px;
    top: 10px;
  }
}

.wsmenu .wtsdepartmentmenu .wstabitem {
  position: relative;
}
.wsmenu .wtsdepartmentmenu .wstabitem li {
  position: relative;
  padding-left: 30px;
}
.wsmenu .wtsdepartmentmenu .wstabitem li.subcate-title {
  font-family: var(--black);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.wsmenu .wtsdepartmentmenu .wstabitem li:has(.menu-special) {
  padding-left: 0;
  margin-bottom: 15px;
}

.wsmenu .wtsdepartmentmenu .menu-special {
  color: #fff;
  font-family: var(--black);
  font-size: 1.75rem;
  text-transform: uppercase;
}
@media screen and (max-width: 991px) {
  .wsmenu .wtsdepartmentmenu .menu-special {
    margin-left: 30px;
  }
}

.wsmenu .wtsdepartmentmenu .wstabitem > li:not(:last-child) {
  padding-bottom: 0;
}

@media screen and (min-width: 992px) {
  .wsmenu .wstitemright {
    position: absolute;
    left: 100%;
    top: -107px;
    border-radius: 20px;
    padding: 0 30px 45px 30px;
    width: 100%;
    /*min-width: 34vw;
    min-width: 45vw;*/
    opacity: 0;
    visibility: hidden;
    z-index: -100;
    transition: opacity 0.25s;
  }
  .wsmenu .wstitemright > .wstitemright-container {
    background: #fff;
    border-radius: 20px;
    padding: 45px 30px;
    position: relative;
  }
  .wsmenu .wstitemright > .wstitemright-container::before {
    /*content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 1px;
    background: var(--stroke);
    transform: translateX(-50%);*/
  }
  .wsmenu .wstitemright > .wstitemright-banner {
    position: absolute;
    left: 100%;
    top: 30px;
    z-index: 99;
    width: 100%;
    display: flex;
    align-items: center;
    height: calc(100% - 45px);
  }
  .wsmenu .wstitemright > .wstitemright-banner img {
    width: 45%;
  }
  .wsmenu-social {
    color: #fff;
    border-top: 1px solid #364A4E;
    padding-top: 20px;
    margin-top: 40px;
    margin-right: 60px;
  }
  .wsmenu-social ul {
    display: flex;
    gap: 0 30px;
  }
  .wsmenu-social ul li a {
    color: #fff;
    font-family: var(--black);
    font-size: 1.25rem;
    font-weight: 400;
    transition: all 0.25s;
  }
  .wsmenu-social ul li a:hover {
    text-decoration: underline;
  }
}
@media screen and (max-width: 991px) {
  .wsmenu .wstitemright {
    /*opacity: 0;
    padding: 0 20px 0px 30px;
    visibility: unset;
    overflow: hidden;
    max-height: 0;
    border-radius: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);*/
  }
  .wsmenu .wstitemright .wstitemright-container {
    /*margin-bottom: 20px;*/
  }
  /*.wsmenu .wsshoplink-active + .wstitemright,*/
  /*.wsmenu .wtsdepartmentmenu .wstabitem:has(> li > a.level:active) .wstitemright, */
  .wsmenu .wtsdepartmentmenu .wstabitem .wsshoplink-active + .wstitemright {
    /*opacity: 1;
    max-height: 500px;
    background-color: var(--crna);
    visibility: visible;
    height: 100%;*/
  }
  .wsmenu .wtsdepartmentmenu .wstabitem:has(> li > a.level:active) .wstitemright {
    /*opacity: 1;
    visibility: visible;
    height: auto !important;
    transition: all 0.2s ease;
    padding-top: 10px;*/
  }
  .wsmenu .wtsdepartmentmenu .wstabitem li:focus ~ .wstitemright {
    /*opacity: 1;
    visibility: visible;
    height: 100% !important;*/
  }
}
@media screen and (min-width: 992px) {
  .wsmenu .wsshoplink-active + .wstitemright,
  .wsmenu li:has(a.level):hover + .wstitemright {
    opacity: 1;
    visibility: visible;
    z-index: 12;
    transition: opacity 0.25s;
  }
}
.wsmenu .wsshoplink-active + .wstitemright .tip2 {
  /*position: relative;*/
}

.wsmenu .wstitemright .wstliststy01 {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 350px;
  height: 100%;
  padding-left: 60px;
  margin-left: -30px;
}

.wsmenu .wstitemright .wstliststy01 > ul {
  padding: 45px 0 45px 0;
  background: #fff;
  border-radius: 30px;
  height: 100%;
  min-width: 350px;
}

.wsmenu .wstitemright .tip2 > .wstheading:hover .wstliststy01 {
  opacity: 1;
  visibility: visible;
}

.wsmenu .wstitemright .wstliststy01 li {
  padding-bottom: 10px;
}

.wsmenu .wstitemright .level-naziv {
  padding-bottom: 15px;
  line-height: 1;
}

.wsmenu .wstitemright .wstliststy01 li > a {
  color: var(--tamno-plava);
}
.wsmenu .wstitemright .wstliststy01 li > a:hover, .wsmenu .wstitemright .wstliststy01 li > a:focus, .wsmenu .wstitemright .wstliststy01 li > a:active {
  color: var(--plava);
}

.wsmenu .wstitemright .wstheading + .wstliststy01 {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: auto;
  left: 50%;
  top: 50px;
  padding-left: 15px;
  padding-right: 15px;
  height: auto;
}
@media screen and (max-width: 991px) {
  .wsmenu .wstitemright .wstheading + .wstliststy01 {
    /*position: initial;
    width: 100%;
    padding-left: 0;
    max-height: 0;*/
    /*display: none;*/
  }
}

.wsmenu .wsshoplink-active + .wstitemright .wstheading:hover + .wstliststy01,
.wsmenu .wsshoplink-active + .wstitemright .wstheading:focus + .wstliststy01,
.wsmenu .wsshoplink-active + .wstitemright .tip2:hover > .wstliststy01 {
  opacity: 1;
  visibility: visible;
}

.wstitemright .wstheading {
  padding-bottom: 15px;
}
.wstitemright .wstheading > a {
  display: block;
}
@media screen and (min-width: 992px) {
  .wstitemright .wstheading > a {
    /*max-width: 87%;*/
    color: var(--tamno-plava);
  }
  .wstitemright .wstheading > a:hover, .wstitemright .wstheading > a:focus, .wstitemright .wstheading > a:active {
    color: var(--plava);
  }
}
@media screen and (max-width: 991px) {
  .wstitemright .wstheading > a {
    /*color: #fff;*/
  }
}

@media screen and (min-width: 992px) {
  .wstitemright .wstheading::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--plava);
    position: relative;
    right: 0;
    top: -15px;
    opacity: 0;
    visibility: hidden;
    display: block;
    margin-left: auto;
    transition: opacity 0.25s;
    z-index: 9999;
  }
}

.wstitemright .wstheading:hover::after,
.tip2:has(.wstliststy01:hover) .wstheading::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .wsmenu .wstitemright {
    min-width: 60vw;
  }
}
@media screen and (max-width: 991px) {
  .wsmenu {
    /*position: fixed;
    top: 70px;
    left: 0px;
    max-width: none;
    padding: 45px 0;
    border-radius: 0;
    height: auto;*/
  }
  .wsmenu.menu-open {
    /*z-index: 111 !important;
    overflow: auto;
    height: 100vh;
    padding-bottom: 20px;*/
  }
  ul.wstabitem-title {
    /*padding: 0 0 0 20px;
    background-color: var(--svjetlo-plava);*/
  }
  .wsmenu .wstitemright .level-naziv {
    /*display: none;*/
  }
  .wstitemright .wstheading:has(> a:active) ~ .wstliststy01 {
    /*opacity: 1;
    visibility: visible;
    max-height: 400px;*/
  }
}

/*# sourceMappingURL=webslidemenu.css.map */