/*
Theme Name: nrwjusos
Theme URI:
Author: Media-Nova.com
Author URI: https://wordpress.org/
Description: NRWJusos
Version: 1.1

Text Domain: nrwjusos
Tags: one-column, flexible-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, theme-options,

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* dropdown buttons for responsive navigation */
.nav-toggle,
.dropdown-toggle        { height:30px; width:30px; position:absolute; cursor:pointer; border:0;margin: 0; padding: 0; }
.nav-toggle             { right:0; top:3.5rem; }
.nav-toggle:focus       { outline:none; }

/* Position of the Navigation Toggle button*/
.nav-toggle span,
.nav-toggle span:before,
.nav-toggle span:after   { position:absolute; content:''; display:block; width:100%; background-color:#fff; height:3px; left:0; }
.nav-toggle span         { top:11px; }
.nav-toggle span:before  { top:-8px; }
.nav-toggle span:after   { bottom:-8px; }


/* Active Nav toggle button */
.nav-toggle.active span        { background:none; }
.nav-toggle.active span:before { top:0;  -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.nav-toggle.active span:after  { bottom:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);  }

/* secondary dropdown Buttons in Submenu*/
.dropdown-toggle                          { right:0; top:0; width:65px; z-index:30; height:45px; }
.no-touch .dropdown-toggle:hover          { opacity:0.8;}
.dropdown-toggle span                     { display:block; height:100%; width:35px; position:relative;  }
.dropdown-toggle span:after,
.dropdown-toggle span:before              {
  content:'';
  position:absolute;
  background-color:#fff;
  height:2px;
  left:12px;
  width:16px;
  top:50%;
  margin:-2px 0 0 -8px;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);

}
.dropdown-toggle span:after               { left:inherit; right:4px;  -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
.toggled > .dropdown-toggle span    { transform:rotate(180deg); }


/* Menu Def */
.main-navigation                       { position:relative; width:calc(100% + 6rem); margin:0 -3rem 0 -3rem; }
.menu,
.sub-menu,
.menu li                               { margin:0; padding:0; list-style-type:none; position:relative; }
.main-navigation .menu li              { display:block; width:100%; margin:0 auto; }
.main-navigation .menu li:last-of-type { border-width:1px 0 1px 0;}
.menu a                                { text-decoration:none; display:block; }
.main-navigation .menu a               { padding:1rem 2rem 1rem 3rem; text-transform:uppercase; font-weight: 800; color: #fff; background-color: inherit; }
.main-navigation .sub-menu a           { padding-left:4rem; font-size:1.4rem;  }
.main-navigation .sub-menu .sub-menu a { padding-left:5rem; }

/* showing hiding responsive Navigation */
.main-navigation,
.sub-menu                              { display:none; }
.main-navigation.active,
.toggled > .sub-menu                   { display:block; }


@media (min-width:960px) {

  .menu-item .iconlabel,
	.nav-toggle,
	.dropdown-toggle                     { display:none; }

  /* show dropdown buttons if is touch*/
  .touch .dropdown-toggle       { display:inline-block; width: 35px; top:0; bottom:0; z-index:9; height:40px;  }
  .touch .main-navigation .menu-item.has-sub a { margin-right:2.7rem; position: relative; z-index:10; }

	.main-navigation       {
    flex-shrink:0;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: auto;
    top: inherit;
    flex:1 0 auto;
  }

	.main-navigation .menu,
	.main-navigation .menu > li           { vertical-align: top; display:inline-block; width:auto; border:0;}

  .menu li                              { display:inline-block; width: auto; border:0;}
	.main-navigation .menu a              { padding: 0.5rem 1rem 2rem 1rem; position:relative; z-index:2; margin-right:0;  }
  .main-navigation .menu ul > li:last-of-type a { padding: 0.5rem 0 2rem 1rem; }
  .main-navigation .sub-menu a,
  .main-navigation .sub-menu .sub-menu a { padding-left:0; }
  .touch .main-navigation .has-sub a     { margin-right:6.8rem; }
  .main-navigation .sub-menu {
        position:absolute;
        top:100%;
        left:-999em;
        opacity:0;
        z-index:100;
        z-index: 1000;
        min-width: 160px;
        padding: 5px 0;
        margin: 0;
        background-color: rgba(255,255,255,0.8);
        border: 0;
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .05);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .05);
  }
.main-navigation .sub-menu:after {
    bottom: 100%;
    right: 30px;
    border-style: solid;
    border-color:transparent;
    content:'';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: rgba(255,255,255,0.8);
    border-width: 10px;
    margin-left: -10px;
}


  .main-navigation .sub-menu .sub-menu              { top:-1px; }

  .no-touch .main-navigation li:hover>ul,
  .main-navigation li.toggled>ul                    { left:auto; right:0; opacity:1; display:block;}


  .no-touch .main-navigation .sub-menu li:hover>ul,
  .main-navigation .sub-menu li.toggled>ul { right:100%; opacity:1; }
  .sub-menu li                             { display:block; }
  .main-navigation .menu .sub-menu  > li a       { display:block; padding:0.5rem 2rem 0.5rem 2rem!important; color:#646464; font-size:1.8rem; }
.main-navigation .sub-menu li              { border:0;}
  /* Active and over states */
  .main-navigation a:hover,
  .main-navigation li:hover>a,
  .current-menu-item a,
  .current-menu-parent>a         { /*opacity:0.8; */ }

  /* create a pseudo element right before the ul IF the ul has a margin, otherwise the over will lose focus*/
  /* hiding the text inside the iconlinks*/
  .main-navigation .sub-menu li:hover>ul:before,
  .main-navigation .sub-menu li:hover>ul:before { content:''; position:absolute; left:-1px; top:0; height:120%; width:100%; }
  .main-navigation li:hover:before,
  .main-navigation li:hover:before             { position:absolute; left:0; top:0; content:''; width:100%; height:200%; z-index:0; }
}