/* -------------------------------------------------------------------- 
   Forms
   -------------------------------------------------------------------- */

textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"] {
  display: block;
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .2);
  background-color: #fff;
  -webkit-appearance: none;
}

/* Search input */
input[type="search"] {
  border-radius: 20px;
}

/* Make textareas height greater than inputs */
textarea {
  height: auto;
}

select {
  margin-bottom: 10px;
  width: 100%;
}

label {
  display: block;
  margin-bottom: 10px;
}

textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
  border: 1px solid rgba(0, 0, 0, .3);
  outline: 0;
}

@media screen and (min-width: 768px) {
  textarea,
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="color"],
  select {
    max-width: 400px; /* Setting a max width for desktop screens. */
  }
}