body {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  width: 80%;
  Height: 100%;
  margin-left: 2em;
  background-color: transparent;
}

body.home .site-footer {
  display: none;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  font-size: 12px;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.navbar-light .navbar-nav .nav-link {
  color: white;
}
@media only screen
and (min-device-width: 375px)
and (max-device-width: 750px) {

/* reduce padding in main elements */
main { padding: 30px; }

/* flex nav bar */
nav { height: 70px;}
nav ul { padding-top: 7px; }
nav li { display: inline; }
nav li a { color: white !important; }

/* Add extra spacing between menu items */
.menu-item {
  padding-top: 5px;
  padding-bottom: 5px;
}

.title-item h5 { font-size: 1em; }

/* Fix add on item */
.menu-item.additional-items h5 {
  padding-top: 10px; 
  padding-bottom: 10px;
  width: 100%;
  float: none;

}

/* Reduce footer header size and add some padding  */
footer h2 {
  font-size: 1.4em;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Reduce size of footer text to avoid awkard wrapping */
footer li { font-size: 0.85em; }
/* Add padding to botoom of footer */
footer { padding-bottom: 5px; }
}