@charset "UTF-8";
/*
   učitavanje varijabli teme
*/
/*
  for easier use of defined spacers when @extend not alowed
*/
/*
   local variables
*/
/*
   Graphical elements shared on various projects

   - mmenu bars icon
   - arrows
   - triangles
   - box shadow

*/
/* 
   Bars icon for mmenu
   basic usage: <a href="#js-offcanvas-nav"><span class="g-icon-bars"></span></a>
*/
.g-icon-bars {
  position: relative;
  padding-left: 1.25em; }
  .g-icon-bars:before {
    content: "";
    position: absolute;
    top: 0.25em;
    left: 0;
    width: 1.25em;
    height: 1em;
    border-top: 0.6em double #5a4099;
    border-bottom: 0.2em solid #5a4099; }

/* 
   Arrows
   basic usage: .class:after { @extend %arrow-right }
*/
/* 
   Triangle (like meganav marker)
   basic usage: .class:after { @extend %triangle-up }
*/
.l-nav-main--mega-nav .c-nav--main > .c-item.active > .c-item__link:after, .l-nav-main--mega-nav .c-nav--main > .c-item > .c-item__link:hover:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #5a4099;
  z-index: 2;
  bottom: 0;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }

.l-nav-main--mega-nav .c-nav--main > .c-item.active > .c-item__link:after {
  border-bottom: none;
  border-top: 8px solid #5a4099;
  bottom: -12px; }

/* 
   Box drop shadow
   basic usage: 
   .class-name {
      $box-shadow-color: color;
      @extend %box-shadow;
   }
*/

/*
   import shared styles
   then proper scss for selected menu
*/
.l-nav-main--mega-nav {
  /*
   primjer za primjenu na oGrid
*/
  /*
.container {
   @include oGridContainer();
}
.row {
   @include oGridRow();
}
.col-3 {
   @include oGridColspan(3);
}
*/
  /*
   Accesibility
*/
  z-index: 2; }
  .l-nav-main--mega-nav .list-unstyled, .l-nav-main--mega-nav .c-nav {
    list-style: none;
    margin: 0;
    padding: 0; }
  .l-nav-main--mega-nav .col-3, .l-nav-main--mega-nav .c-nav .l-submenu-box .l-submenu__col {
    flex: 0 0 25%;
    max-width: 25%;
    padding-left: 30px;
    padding-right: 30px; }
  .l-nav-main--mega-nav .container-fluid, .l-nav-main--mega-nav .c-nav .l-submenu-box .l-submenu {
    width: 100%;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto; }
  .l-nav-main--mega-nav .l-submenu-box {
    position: absolute;
    left: 50%;
    right: 50%;
    margin-right: -50vw;
    margin-left: -50vw;
    width: 100vw; }
  .l-nav-main--mega-nav .c-nav {
    display: flex;
    height: 100%; }
    .l-nav-main--mega-nav .c-nav--main .c-item {
      margin-right: 0.5rem; }
      .l-nav-main--mega-nav .c-nav--main .c-item:hover .l-submenu-box {
        display: block;
        opacity: 1; }
    .l-nav-main--mega-nav .c-nav--main > .c-item {
      line-height: 80px; }
    .l-nav-main--mega-nav .c-nav .l-submenu-box {
      display: none;
      opacity: 0;
      line-height: normal; }
      .l-nav-main--mega-nav .c-nav .l-submenu-box .l-submenu__col .c-item {
        margin-bottom: 1rem; }
  .l-nav-main--mega-nav .l-submenu-box {
    border-top: 2px solid #1b132d;
    border-bottom: 1px solid #1b132d;
    background: #5a4099;
    color: white; }
  .l-nav-main--mega-nav .l-submenu .c-item__link {
    width: 100%;
    text-align: left;
    transition: all 0.2s; }
    .l-nav-main--mega-nav .l-submenu .c-item__link.selected-True, .l-nav-main--mega-nav .l-submenu .c-item__link.active-True {
      background-color: #7154b8;
      border-left: 8px solid #ad9cd6; }
    .l-nav-main--mega-nav .l-submenu .c-item__link.selected-True {
      pointer-events: none; }
  .l-nav-main--mega-nav .c-nav--main > .c-item > .c-item__link {
    display: block;
    position: relative;
    text-transform: uppercase;
    font-weight: 500; }
    .l-nav-main--mega-nav .c-nav--main > .c-item > .c-item__link:hover {
      text-decoration: none; }
  .l-nav-main--mega-nav .c-nav--main > .c-item.active > .c-item__link:after {
    top: 0; }
  .l-nav-main--mega-nav .c-item .c-search-icon {
    display: flex;
    height: 100%;
    align-items: center;
    cursor: pointer; }
    .l-nav-main--mega-nav .c-item .c-search-icon svg {
      width: 22px;
      height: 22px; }
  .is-darkmode .l-nav-main--mega-nav .l-submenu {
    border-bottom: 2px solid white;
    margin-bottom: 0.5rem; }
    .is-darkmode .l-nav-main--mega-nav .l-submenu, .is-darkmode .l-nav-main--mega-nav .l-submenu-box {
      background-color: black; }
    .is-darkmode .l-nav-main--mega-nav .l-submenu .c-item__link {
      background-color: black;
      border-color: white; }
      .is-darkmode .l-nav-main--mega-nav .l-submenu .c-item__link:hover {
        background-color: white;
        color: black !important;
        font-weight: bold; }
      .is-darkmode .l-nav-main--mega-nav .l-submenu .c-item__link.selected-True, .is-darkmode .l-nav-main--mega-nav .l-submenu .c-item__link.active-True {
        background-color: white;
        border-left: 8px solid none;
        color: black !important; }
  .is-largefont .l-nav-main--mega-nav .c-item__link {
    font-size: 22px; }
  .is-largefont .l-nav-main--mega-nav .c-nav--main > .c-item > .c-item__link {
    font-size: 20px; }

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