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

/* dropdown buttons for responsive navigation */
.nav-toggle,
.dropdown-toggle        { position:absolute; cursor:pointer; border:0;margin: 0; padding: 0; z-index: 12;}
.nav-toggle             { right:14.5rem; top:3rem; height:35px; width:37px; }
.nav-toggle:focus       { outline:none; }
@media (min-width:660px) {
  .nav-toggle             { top: 4.5rem; right: 14rem; }
}

/* Position of the Navigation Toggle button*/
.nav-toggle span,
.home .scroll-box .nav-toggle span,
.hero-active .scroll-box .nav-toggle span,
.nav-toggle span:before,
.home .scroll-box .nav-toggle span:before,
.hero-active .scroll-box .nav-toggle span:before,
.nav-toggle span:after,
.home .scroll-box .nav-toggle span:after,
.hero-active .scroll-box .nav-toggle span:after   { position:absolute; content:''; display:block; width:100%; background-color:#4a4091; height:4px; left:0; }
.home .nav-toggle span,
.home .nav-toggle span:after,
.home .nav-toggle span:before,
.hero-active .nav-toggle span,
.hero-active .nav-toggle span:after,
.hero-active .nav-toggle span:before
 { background-color:#fff; }



.nav-toggle span         { top:14px; }
.nav-toggle span:before  { top:-10px; }
.nav-toggle span:after   { bottom:-10px; }


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

/* secondary dropdown Buttons in Submenu*/
.dropdown-toggle                          {
width: 65px;
height: inherit;
position: relative;
line-height:1;
font-size:40px;
height:32px;
}
.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: #fff;
    height: 2px;
    left: 50%;
    width: 28px;
    top: 50%;
    margin: 5px 0 0 -8px;
}
li:hover .dropdown-toggle span:after,
li:hover .dropdown-toggle span:before  { background-color:#523b77!important; }

.dropdown-toggle span:after               { transform:rotate(-90deg); }
/*.toggled > .dropdown-toggle span:after    { transform:rotate(0); }*/



@media (min-width:1080px) {
.nav-toggle { display:none;}
}



/* Menu Def */
.main-navigation                       { position:fixed; top:0; left:0; width:100%; height:100vh; background-color:rgba(139,182,42,1); z-index:11; }


.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 1.5rem auto; }
.menu a                                { text-decoration:none; display:inline-block; color:#fff; }
.current_page_item a                   {}

.main-navigation .menu .sub-menu li { padding:1.5rem; }
.main-navigation .menu .sub-menu li a { font-size:3rem; }

/* showing hiding responsive Navigation */
.main-navigation{
  -webkit-transition-delay: 0.3s, 0.3s;
  transition-delay: 0.3s, 0.3s;
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
  transition:all 0.3s ease;
  -webkit-transition:all 0.3s ease;
  overflow-y:auto;
  display:none;
}
.main-navigation .menu { margin:5rem 0 0 0; padding: 6rem 0;}
.menu ul { padding-left:0; }
.sub-menu       { /*display:none;*/ display: block;}
.main-navigation.active { -webkit-transform:translateY(0); transform:translateY(0);
  display: block;}
.toggled > .sub-menu                   {  }

.metabox                 { margin:auto 0 auto auto; z-index:13;}
.metabox p { margin:0; }

header .metabox .button { padding:1.2rem 1rem 1rem 1rem; white-space: nowrap;}

@media (min-width:660px) {
  .metabox            {  }
}
@media (max-width:660px) {
  .metabox .button    { padding:1.3rem 1.5rem 1rem 1.5rem;margin: 0 0 3rem; top: 1.5rem;}
}
.main-navigation.active + .metabox  a               { background-color:#523b77;  }
.metabox .social-links  { margin-left:1.5rem; margin-right:-1rem; }
.metabox button,
.home .scroll-box .metabox a     { text-decoration: none; -webkit-box-shadow: 4px 6px 16px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 6px 16px -6px rgba(0,0,0,0.75);
box-shadow: 4px 6px 16px -6px rgba(0,0,0,0.75);}


#site-navigation .item-box { margin: 16rem auto 3rem auto; }
.main-navigation .menu a {
  font-size:40px;
  padding:0;
  line-height: 1;
}

@media (max-height:680px) {
  #site-navigation .item-box { margin: 0 auto 3rem auto; }
}

@media (max-width:560px) {
  .menu { margin: 3rem 0 0 4rem; }
  .nav-toggle             { right:0; }
  .main-navigation .menu a { font-size:30px; }
}



.main-navigation .menu li:hover > a { color:#523b77; }
.main-navigation .menu .current_page_item > a,
.main-navigation .menu .current-menu-parent > a{ color:#523b77; }
.main-navigation .menu li:hover > .dropdown-toggle span:after,
.main-navigation .menu li:hover > .dropdown-toggle span:before,
.main-navigation .menu .current_page_item > .dropdown-toggle span:before,
.main-navigation .menu .current_page_item > .dropdown-toggle span:after,
.main-navigation .menu .current-menu-parent > .dropdown-toggle span:before,
.main-navigation .menu .current-menu-parent > .dropdown-toggle span:after {background-color:#3db8b5;}

.main-navigation .sub-menu a  { margin-left:5rem; }
#close-navigation { position:absolute; top:-5rem; color:#000; padding: 5px 25px; display:none;}
#close-navigation:after,
#close-navigation:before { content:''; position:absolute; background-color: #000; height: 2px; width: 28px; top:20px; left:0; }
#close-navigation:after               { transform:rotate(-45deg); }
#close-navigation:before    { transform:rotate(45deg); }
#close-navigation span { display:inline-block; padding-left:1.5rem; font-size: 1.7rem; line-height: 3rem; color: #000;   }

nav .metabox { display:none; }
@media (max-width:560px) {
  .metabox { display:none; }
  .main-navigation .sub-menu a  { margin-left:2rem; }
  nav .metabox { display:block; position:relative; margin: 5rem 0 0 0; top:inherit;}
  .main-navigation .menu {
    margin: 0 0 2rem 0;
    padding: 0 0 2rem 0;
    }
    .main-navigation .metabox a {
        background-color: #523b77;
    }
}


.pagination.menu { display: -webkit-box; display: -ms-flexbox; display: flex; margin:3rem 0; }

.pagination.menu li { margin:0 2px 2px 0; }
.pagination.menu li a { display:block; background-color:#c8c8c8; color:#000; width:30px; height:30px; text-align:center; line-height:30px; }
.pagination.menu li.active a,
.pagination.menu li a:hover { background-color:#8bb631; color:#fff; }




@media (min-width:1080px) {
  .main-navigation menu li a { color:#363636;}
  .main-navigation {
    position: relative;
    top: inherit;
    left: inherit;
    width: 100%;
    height: auto;
    background-color: transparent;
    z-index: 11;
    -webkit-transform:translateY(0);
transform: translateY(0);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#site-navigation .item-box { margin: auto 0 auto auto; text-align: right; width: 100%;}
.main-navigation .menu { margin: 0 1rem 0 0; padding: 0; width: 100%;}
.main-navigation .menu li { display:inline-block; width: auto; margin:0 1.5rem 0 0;}
.main-navigation .menu a {font-size: 1.4rem; font-weight:700;}

.main-navigation .menu a { color:#363636;   }

.current-page-ancestor a,
.current-menu-item a,
.main-navigation .menu a:hover { color:#564278!important; }



#site-navigation .flex-box { display:none; }
.metabox a, .home .scroll-box .metabox a { padding:1rem; white-space:nowrap;}
}


@media (min-width:1280px) {
  .main-navigation .menu a { font-size: 1.6rem; }
  .main-navigation .menu li {margin:0 2rem 0 0;}
  }
@media (min-width:1280px) {
.metabox .button { font-size: 1.8rem; }
  .main-navigation .menu { margin: 0 2rem 0 0; padding: 0; }
  .metabox a, .home .scroll-box .metabox a { padding:1.3rem 1.5rem 1rem 1.5rem; }
}