/* ##################################################
EXO - Menu
################################################## */

/* 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:2.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:#000; 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; opacity:0.5; }
.no-touch .dropdown-toggle:hover          { opacity:1;}
.dropdown-toggle span                     { display:block; height:100%; width:35px; position:relative;  }
.dropdown-toggle span:after,
.dropdown-toggle span:before              { content:''; position:absolute; background-color:#000; height:2px; left:50%; width:16px;  top:50%; margin:-2px 0 0 -8px;  }
.dropdown-toggle span:after               { transform:rotate(-90deg); }
.toggled > .dropdown-toggle span:after    { transform:rotate(0); }


/* 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; border-top:1px solid #000; 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 3rem 1rem 3rem; margin-right:6.8rem; }
.main-navigation .sub-menu a           { padding-left:4rem; }
.main-navigation .sub-menu .sub-menu a { padding-left:5rem; }

/* showing hiding responsive Navigation */
.main-navigation,
.sub-menu                    { display:none; font-size:1.4rem; line-height: 1.3; }
.main-navigation.active,
.toggled > .sub-menu         { display:block; }

	.main-navigation .menu a               { color:#000; }
  /* Active and over states */
  .main-navigation a:hover,
  .main-navigation li:hover>a,
  .current-menu-item a,
  .current-menu-parent>a          { color:#0055AB; }

/* Meta Box */
@media (max-width:960px) {
  .metabox   { display:none; }
  }
.metabox                     { position: absolute; right:0; top:66px; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }
.scroll-box .metabox         { top:18px; }
.search-box-submit           { padding:0; margin-left: 1rem; height:40px; width:40px; border:0; background:transparent; }
.search-box-submit:hover     { background:transparent; }
.search-input input          { height: 40px; width: 80%; padding: 3px;}

@media (min-width:790px) {
  .menu-item .iconlabel,
	.nav-toggle,
	.dropdown-toggle           { display:none; }
	.main-navigation .menu a               { padding:0; position:relative; z-index:2; margin-right:0; }
  /* show dropdown buttons if is touch*/
  .touch .dropdown-toggle    { display:inline-block; width: 30px; top:0; bottom:0; z-index:9; height:30px;  }
  .touch .dropdown-toggle span  { width:30px;}
  .touch .main-navigation .menu-item.has-sub a { margin-right:2.7rem; position: relative; z-index:10; }

	.main-navigation       {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: auto;
    position: absolute;
    left: 255px;
    top: 64px;
      -webkit-transition:all 0.3s ease; transition:all 0.3s ease;
  }
  .scroll-box .main-navigation  { top: 20px;}
  .main-navigation .menu,
  .main-navigation .menu > li:last-of-type    { margin-right:0; display:inline-block; width:auto; border:0;}
  .main-navigation .menu > li            { margin-right:2rem; display:inline-block; width:auto; border:0;}
  .menu li                               { display:inline-block; width: auto; border:0;}

  .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:6.6rem;
        left:-999em;
        z-index:100;
        opacity:0;
        min-width:200px;
        display:block;
        background-color: #fff;
  }
  .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; }

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

  .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 .sub-menu  > li a       { display:block; padding:0.5rem 1rem; }



  .search-input input             { width: 120px; }

  /* 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; }
}

@media (min-width:1080px) {
  .main-navigation .menu,
  .main-navigation .menu > li            { vertical-align: top; margin-right:5rem; }

}

@media (min-width:1180px) {
  	.main-navigation       { left: 355px; }
}