/* Basic styling */
body {font-family: sans-serif;}
nav {box-sizing: border-box;padding: 0;margin: 0;font-family: sans-serif;}
nav {background: #222931;padding: 0px 20px;}
ul {list-style-type: none;}
a {color: white!important;text-decoration: none!important;}
a:hover {color: #008080!important;text-decoration: underline!important;}
.logo a:hover {text-decoration: none;}
.menu li {font-size: 16px;padding: 15px 5px;white-space: nowrap;}
.logo a,.toggle a {font-size: 20px;}
.button.secondary {border-bottom: 1px #444 solid;}
.switch{margin-left: auto;}

/* Mobile menu */
.menu {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
.toggle {order: 1;}
.item.button {order: 2;}
.item {width: 100%;text-align: center;order: 3;display: none;}
.item.active {display: block;}

/* Navbar Toggle */
.toggle {cursor:pointer;}
.bars {background: #999;display: inline-block;height: 2px;position: relative;transition: background .2s ease-out;width: 18px;}
.bars:before,.bars:after {background: #999;content: '';display: block;height: 100%;position: absolute;transition: all .2s ease-out;width: 100%;}
.bars:before {top: 5px;}
.bars:after {top: -5px;}

/* Tablet menu */
@media all and (min-width: 468px) {
  .menu {justify-content: center;}
  .logo {flex: 1;}
  .item.button {width: auto;order: 1;display: block;}
  .toggle {order: 2;}
  .button.secondary {border: 0;}
  .button a {padding: 7.5px 15px;background: teal;border: 1px #006d6d solid;border-radius:50em;}
  .button.secondary a {background: transparent;    }
  .button a:hover {text-decoration: none;transition:all .25s;}
  .button:not(.secondary) a:hover {background: #006d6d;border-color: #005959;}
  .button.secondary a:hover {color: #ddd;} 
}

/* Desktop menu */
@media all and (min-width: 768px) {
  .item {display: block;width: auto;}
  .toggle {display: none;}
  .logo {order: 0;}
  .item {order: 1;}
  .button { order: 2;}
  .menu li {padding: 15px 10px;}
  .menu li.button {padding-right: 0;}
}