@charset "utf-8";
/* CSS Document */


#toggle { cursor: pointer; margin: -21px 0 0; padding: 18px 0 21px; position: absolute; right: 15px; top: 50%; width: 50px; z-index: 3; }
#toggle span { display: block; position: absolute; width: 100%; height: 2.4px; margin: 1px 0 0 0; background: #fff; -webkit-transition: 350ms ease all; -moz-transition: 350ms ease all; transition: 350ms ease all; }
#toggle span:before, #toggle span:after { content: " "; position: absolute; width: 100%; height: 2.4px; background: #fff; -webkit-transition: 350ms ease all; -moz-transition: 350ms ease all; transition: 350ms ease all;  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); }
#toggle span:before { margin: -15px 0 0 0; }
#toggle span:after { margin: 15px 0 0 0; }

#menu { visibility: hidden; opacity: 0; position: fixed; z-index: 2; width: 25%; /*100% for full page*/ height: auto; /*100% for full page*/ top: 75px; right: 0; text-align: center; background: #622066; /*background: rgba(44,62,80,0.9);*/ -webkit-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); -webkit-transition: 350ms ease all; -moz-transition: 350ms ease all; transition: 350ms ease all; }
#menu.opened { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); /*-webkit-transition: 350ms ease all; -moz-transition: 350ms ease all; transition: 350ms ease all;*/ }
#menu span#title { display: none; /*block*/ line-height: 1em; margin: 0 0 0.5em 0; font-size: 5em; color: #8BC163; }
#menu ul { list-style: none; margin: 0 auto; padding: 0; }
#menu ul li { display: block; height: auto; margin:0; position:relative; }
/*#menu ul li:after {
  content: " ";
  position: absolute;
  width: 0%;
  height:auto;
  margin: -65px 0 0 5%;
  left: 0;
  background: #8BC163;
  border-radius: 0.25em;
  -webkit-transition: 350ms ease all;
  -moz-transition: 350ms ease all;
  transition: 350ms ease all;
}*/

#menu ul li:hover:after { width: 90%; }
#menu ul li a { position: relative; z-index: 4; padding:10px 15px; display: block; width: 100%; font-size: 24px; line-height:1.6; /*height: 65px;
  line-height: 65px;*/ margin: 0 auto; color: #fff; text-decoration: none; -webkit-transition: 200ms ease all; -moz-transition: 200ms ease all; transition: 200ms ease all; }
  #menu ul li.current-menu-item a,
#menu ul li.active a
#menu ul li.current-menu-item a:hover,
#menu ul li.active a:hover { background-color:#cd9700; color:#fff; }
#menu ul li a:hover { color: #e1b70d;/*border-color: #8BC163;*/ }
#menu ul li a span { }
#menu ul li a i { position: absolute; padding: 0 1.25em 0 0; font-size: 2em; }
#menu ul li:first-child { padding-top:10px; }
#menu ul li:last-child { padding-bottom:10px; }


#menu ul li ul {
    background-color: #cd9700;
    position: absolute;
    right: 100%;
    top: 0;
    white-space: nowrap; 
}
#menu ul li ul li {
    padding: 0 !important;
}
#menu ul li ul li a:hover { background-color:#622066; }

.menu-item-has-children > .sub-menu { visibility:hidden; opacity:0; }
.menu-item-has-children:hover > .sub-menu { visibility:visible; opacity:1; }

#toggle.open span { background-color: transparent; }
#toggle.open span:before, #toggle.open span:after { margin: 0; background: #fff; }
#toggle.open span:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); }
#toggle.open span:after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); transform: rotate(-135deg); }

@media (max-width: 767px) {
#menu ul li ul {
    position: static;
    white-space: normal;
    opacity: 1;
    visibility: visible; text-align:left;
}

#menu ul li ul li a { padding-left:30px; }
#menu ul li ul li a:hover { background-color:transparent; color:#fff; }
#menu ul li ul li a:before { content:"\00bb"; position:absolute; left:15px; }
#menu ul li ul li ul {
    padding-left: 25px;
}
#menu .sub-menu > li > a { font-size:20px; line-height:1.4 }
#menu .sub-menu > li .sub-menu > li > a { font-size:16px; line-height:1.2; }
}