/*** Navigation ***/
nav {
  margin: 0 auto;
  max-width: 60em; }
nav ul { 
  margin: 0; 
  text-align: left;
  width: 100%; }
nav a { 
  color: #333;
  font-family: 'Shadows Into Light', cursive; }

#main-nav {
  background-image: linear-gradient(
    to bottom,rgba(67, 238, 109, 1), rgba(67, 238, 109, .4) ); }

#main-nav .menu-item a { color: #333; }
#main-nav .menu .menu-item.active a,
#main-nav a:hover { color: #FFF; }

#main-nav .menu { display: none; }
.topnav, .menu-button { height: 50px; }

/*menu button*/
#main-nav .menu-icon {
  display: block;
  height: 100%;
  width: 100%; }
#main-nav .menu-icon::after { display:none; }
#main-nav .material-icons {
  line-height: 50px;
  margin-left: 20px; }
#main-nav .menu-icon span {
  font-family:'Amatic SC', cursive;
  font-size: 180%;
  line-height: 50px;
  margin-left: .5rem;
  vertical-align: top; }

#main-nav.sticky.is-stuck {
  background-color: rgba(148, 245, 172 , .9);
  top: 0; }

/** when open **/
.topnav.open { height: auto; }
.topnav.open .menu {
  display: block!important;
  padding-left: 20px;
  padding-bottom: 20px; }
.open .menu a {
  font-size: 1.6rem;
  line-height: 1.4;
  padding: 0; }
.open .menu-item span { display: none; }

@media screen and (min-width: 830px) {
  .topnav { height: 55px; }
  #main-nav .menu { display: flex; }
  #main-nav .menu-button,
  #main-nav .menu .menu-item:last-child span { display:none; }
  #main-nav .menu .menu-item,
  #main-nav .menu .menu-item a, 
  #main-nav .menu .menu-item span { display: inline-block; }
  #main-nav ul { text-align: center; }
  #main-nav .menu .menu-item a { font-size: 1.8rem; }
  #main-nav .menu .menu-item span { font-size: 2rem; }
}







/*** Footer ***/
footer {
  background-image: linear-gradient(
    to top,rgba(67, 238, 109, 1), rgba(67, 238, 109, .4) ); }

/*NAV*/
#footer-nav h3 { font-size: 1.6rem; margin-top: .8em; margin-left: .5em; }

#footer-nav .menu .menu-item.active a,
#footer-nav a:hover { color: #FFF; }
#footer-nav .menu .menu-item { padding-left: 2em; width: 100%; }
#footer-nav .menu .menu-item a { line-height: 1.4; padding: 0; }
#footer-nav address,
#footer-nav .tel {
  font-family: 'Open Sans Condensed', Arial, sans-serif;
  font-style: normal; 
  line-height: 1.4;
  margin: 0 auto;
  padding-left: 2em; }

#footer-bottom,
#footer-bottom a {
  font-size: .8rem;
  max-width: 64em;
  margin: 0 auto;
  text-align: center; }
#footer-bottom { padding: .5em 0 1em; }
#footer-bottom .clearfix { padding: .3em 1em; }
#copyright,
#footer-info {
  display: inline-block;
  vertical-align: bottom; }
#copyright .material-icons {
  font-size: .8rem;
  vertical-align: middle; }
#copyYear { vertical-align: middle; }

  @media screen and (min-width: 321px) and (max-width: 830px) {
    #footer-bottom .clearfix { padding: .3em 2em 2em; }
  }
  @media screen and (max-width: 480px) {
    #footer-info span { display: none; }
  }
  @media screen and (min-width: 480px) {
    #footer-nav .contact { text-align: center; }
    #footer-nav h3 { 
      margin-left: 0; 
      margin-top: 1.2em; 
      text-align: center; }
    #footer-nav .menu .menu-item,
    #footer-nav address,
    #footer-nav .tel { 
      padding-left: 0; 
      text-align: center; }
  }