a.open-panel, a.close-panel { display: none; }


@media only screen and (max-width:55em) {

#responsive-menu-controls { clear: both; background: #63151E; width: 96%; max-width: 960px; 
    margin: 0 auto 10px; padding: 5px 0; display:block; border-radius: 10px; }

  /* Move nav off screen, setup transitions */
  nav { width: 30%; position: absolute; left: -70%; top: 0; height: 100%; background: #777; }

html.closedNav #cssmenu { display:none; }
  
  ul.menu li { float: none; width: 100%; text-align: left; padding: .5em 1em; box-sizing: border-box; border-bottom: 1px solid #888; }

  /* Reveal open/close buttons */
  a.open-panel, a.close-panel { display: inline; }
  .close-panel { }

  .openNav #page {
    left: 0;
    -webkit-transform: translate3d(70%, 0, 0);
    -moz-transform: translate3d(70%, 0, 0);
    -ms-transform: translate3d(70%, 0, 0);
    -o-transform: translate3d(70%, 0, 0);
    transform: translate3d(70%, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
  }

  /* When the panel is closed, transition the page back to the left */
  #page {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
  }

@media only screen and (max-width: 35em) {
#responsive-menu-controls { background: #63151E; width: 96%; max-width: 960px; margin: 0 auto 10px; display:block; }
}

@media only screen and (max-width: 29em) {
#responsive-menu-controls {  }
}
  
  /* added by Dave to show close button on page not in menu */ 
a.close-panel { display:none; }
html.openNav a.open-panel { display:none; }
html.openNav a.close-panel { display:inline; }
html.openNav a.close-panel.close-inmenu { display:none; }
  
   #cssmenu > ul > li { float: none; } 

.fa-bars { color: white; padding: 5px 2px 2px 5px; margin: 0; display: block; }
.fa-bars:after { content: " Navigation"; font-family: 'Open Sans Condensed', sans-serif; font-size: 1.75rem; color: white;  }
.fa-times-circle { color: white; padding: 5px 2px 2px 5px; }
.fa-times-circle:after { content: " Close"; font-family: 'Open Sans Condensed', sans-serif; font-size: 1.75rem; }
}