header {
  border-bottom: 5px solid #1abc9c;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
header .navbar {
  display: flex;
  align-items: center;
  padding: 1em 0;
}
header .navbar .logo {
  color: #1abc9c;
  margin-right: 20px;
  font-size: 1.3rem;
}
header .navbar .logo + label {
  display: none;
}
header .navbar .logo + label + input {
  display: none;
}
header .navbar .collapse {
  display: flex;
  flex-grow: 1;
}
header .navbar .collapse .links {
  display: flex;
  margin-right: auto;
}
header .navbar .collapse .links li {
  margin: 0 10px;
}
header .navbar .collapse .links li a {
  color: #777;
  margin: 0 10px;
}
header .navbar .collapse .links li a:hover {
  color: #333;
}
header .navbar .collapse .form a {
  border: 1px solid #16a085;
  border-radius: 0.3rem;
  padding: 0.3rem 1rem;
  color: #16a085;
}
header .navbar .collapse .form a.form-bg {
  background: #16a085;
  color: #fff;
}
@media only screen and (max-width: 960px) {
  header .navbar {
    flex-flow: row wrap;
  }
  header .navbar .logo {
    margin-right: auto;
  }
  header .navbar .logo + label {
    display: block;
    border: solid 1px #ddd;
    padding: 0.5rem 1rem;
    color: #555;
    cursor: pointer;
  }
  header .navbar .logo + label + input:checked + .collapse {
    display: block;
  }
  header .navbar .collapse {
    display: none;
    width: 100%;
    flex-flow: column;
  }
  header .navbar .collapse .links {
    flex-direction: column;
    margin-bottom: 1.5rem;
  }
  header .navbar .collapse .links li {
    margin: 0.5rem 0;
  }
}