header {
  border-bottom: 5px solid #1abc9c;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  .navbar {
    display: flex;
    align-items: center;
    padding: 1em 0;
    .logo {
      color: #1abc9c;
      margin-right: 20px;
      font-size: 1.3rem;

      & + label {
        display: none;

        & + input {
          display: none;
        }
      }
    }
    .collapse {
      display: flex;
      flex-grow: 1;
      .links {
        display: flex;
        margin-right: auto;
        li {
          margin: 0 10px;
          a {
            color: #777;
            margin: 0 10px;

            &:hover {
              color: #333;
            }
          }
        }
      }
      .form {
        a {
          border: 1px solid #16a085;
          border-radius: 0.3rem;
          padding: 0.3rem 1rem;
          color: #16a085;
          &.form-bg {
            background: #16a085;
            color: #fff;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 960px) {
  header {
    .navbar {
      flex-flow: row wrap;
      .logo {
        margin-right: auto;

        & + label {
          display: block;
          border: solid 1px #ddd;
          padding: 0.5rem 1rem;
          color: #555;
          cursor: pointer;
          & + input:checked {
            & + .collapse {
              display: block;
            }
          }
        }
      }
      .collapse {
        display: none;
        width: 100%;
        flex-flow: column;
        .links {
          flex-direction: column;
          margin-bottom: 1.5rem;
          li {
            margin: 0.5rem 0;
          }
        }
      }
    }
  }
}