html.closedNav.openNav #cssmenu { width: 70%; margin: 0; }
html.closedNav.openNav #cssmenu ul li { width: 100%;} 
html.closedNav.openNav #cssmenu ul li a { text-align: left; padding-left: 10px;} 


/* Color Key 
Orinch: #d53d24
Yellow-Orinch: #F0932c
Dark Gray: #404552
Light Blue-Gray: #d4e6ea
*/


/* REGULAR MENU STYLES (BEFORE HAMBURGER ICON IS CLICKED AND RESPONSIVE MENU SLIDES OUT): use html.closedNav */

html.closedNav #cssmenu { position: relative; height: 44px; background: #ffffff; width: auto; }
html.closedNav #cssmenu ul { list-style: none; padding: 0; margin: 0; line-height: 1; }
html.closedNav #cssmenu > ul { position: relative; display: block; background: #ffffff; height: 32px; width: 100%; z-index: 500; }
html.closedNav #cssmenu > ul > li { display: block; position: relative; float: left; margin: 0; padding: 0; }
html.closedNav #cssmenu > ul > li.nav-home { width: 13%; }
html.closedNav #cssmenu > ul > li.nav-fws-basic { width: 19%; }
html.closedNav #cssmenu > ul > li.nav-fws-premium { width: 21%; }
html.closedNav #cssmenu > ul > li.nav-working-with-writers { width: 30%; }
html.closedNav #cssmenu > ul > li.nav-about-asja { width: 17%; }

html.closedNav #cssmenu > ul > #menu-button { display: none;}
html.closedNav #cssmenu ul li a { display: block; font-family: 'Open Sans Condensed', sans-serif; text-decoration: none; text-shadow: none; }
html.closedNav #cssmenu > ul > li > a { text-align: center; font-size: 2.25rem; font-weight: normal; padding: 15px 10px; 
  border-left: 1px solid #ccc; color: #63151E; text-transform: uppercase;
  -webkit-transition: color 0.25s ease-out;
  -moz-transition: color 0.25s ease-out;
  -ms-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out; }

/* html.closedNav #cssmenu > ul > li.nav-home > a { background: #F0A207; }
html.closedNav #cssmenu > ul > li.nav-fws-basic > a { background: #8E0300; }
html.closedNav #cssmenu > ul > li.nav-fws-premium > a { background: #E23C06; }
html.closedNav #cssmenu > ul > li.nav-working-with-writers > a { background: #607205; }
html.closedNav #cssmenu > ul > li.nav-about-asja > a { background: #A9040E; } */
  
html.closedNav #cssmenu > ul > li.has-sub > a { padding-right: 0; padding-left: 0; }
html.closedNav #cssmenu > ul > li:hover > a { color: #cccccc; }
html.closedNav #cssmenu li.has-sub::after { display: none; content: ''; position: absolute; width: 0; height: 0; }
html.closedNav #cssmenu > ul > li.has-sub::after { right: 10px; top: 20px; border: 5px solid transparent; border-top-color: #7a8189; }
html.closedNav #cssmenu > ul > li:hover::after { border-top-color: #cccccc; }
html.closedNav #indicatorContainer { position: absolute; height: 12px; width: 100%; bottom: 0px; overflow: hidden; z-index: -1; }
html.closedNav #pIndicator { position: absolute; height: 0; width: 100%; border: 12px solid transparent; border-top-color: #2b2f3a; z-index: -2;
  -webkit-transition: left .25s ease;
  -moz-transition: left .25s ease;
  -ms-transition: left .25s ease;
  -o-transition: left .25s ease;
  transition: left .25s ease; }
  
html.closedNav #cIndicator { position: absolute; height: 0; width: 100%; border: 12px solid transparent; border-top-color: #2b2f3a; top: -12px; right: 100%; z-index: -2; }

html.closedNav #cssmenu ul ul { width: 100%; background: #ccc; position: absolute; left: -9999px; top: 70px; opacity: 0;
  -webkit-transition: opacity .3s ease, top .25s ease;
  -moz-transition: opacity .3s ease, top .25s ease;
  -ms-transition: opacity .3s ease, top .25s ease;
  -o-transition: opacity .3s ease, top .25s ease;
  transition: opacity .3s ease, top .25s ease;
  z-index: 1000; }
  
html.closedNav #cssmenu ul ul ul { top: 37px; padding-left: 5px; }
html.closedNav #cssmenu ul ul li { position: relative; margin-bottom: 0px; }
html.closedNav #cssmenu > ul > li:hover > ul { left: auto; top: 44px; opacity: 1; padding-top: 10px; background: white; }
html.closedNav #cssmenu ul ul li a { width: 80%; margin-bottom: 0px !important; margin-top: 0px; border-bottom: 1px solid #eee; 
  padding: 10px 10%; text-align: center; font-size: 1.75rem; line-height: 2.5rem; color: #8c9195; background: #eee;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -ms-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease; }

html.closedNav #cssmenu ul ul li:hover > a { background: #f6f6f6; color: #63151E; }

html.closedNav #cssmenu ul ul li.has-sub::after { border: 4px solid transparent; border-left-color: #9ea2a5; right: 10px; top: 12px;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease; }

html.closedNav #cssmenu ul ul li.has-sub:hover::after { border-left-color: #fff; right: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* RESPONSIVE MENU OFF TO THE SIDE STYLES BELOW: use html.openNav */

html.openNav nav { background: none; font-family: 'Open Sans Condensed', sans-serif; width: 65%;}
html.openNav #cssmenu ul { list-style: none; background: none; width: 90%; margin-top: 10px;  }
html.openNav #cssmenu ul li { margin: 0; padding: 0; border-bottom: 0; font-size: 1.75rem; line-height: 2.75rem;}
html.openNav #cssmenu ul li.has-sub { margin-top: 10px; }
html.openNav #cssmenu ul li a { width: 90%; padding: 0 0 0 10px;  }
html.openNav #cssmenu ul li a:hover { background: #eee; width: 100%; display: block; padding: 0 0 0 10px; }
html.openNav #cssmenu ul li ul li { margin: 0; border-bottom: 1px solid #ccc; }
html.openNav #cssmenu ul li ul li a { width: 100%; display: block; line-height: 3rem; }
html.openNav #cssmenu ul li ul li a:before { font-family: 'FontAwesome'; content: '\f178'; margin-right: 10px; }
html.openNav #cssmenu ul li ul li a:hover { background: #eee; }