/* ==========================================================================
   buttons
   ========================================================================== */
@import url("variables.css");

.button-gray {
  padding: 16px 23px;
  background-color: var(--main-color-gray);
  border:4px solid var(--main-color-gray);
  border-radius: 50px;
  font-size: .4em;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  transition: all .6s;
  display: inline-block;
}
.button-gray:hover,
.button-gray:focus {
  outline: 0;
  border-color: var(--main-color-gray-hover);
  background-color: white;
  color: white;
  text-decoration: none;
}
.button-gray > *:last-child {
  padding-left: 34px;
}

.button-transparent {
  padding: 16px 23px;
  background-color: var(--main-color-transparent);
  border:2px solid var(--main-color-yellow);
  border-radius: 50px;
  font-size: .4em;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  transition: all .6s;
  display: inline-block;
}
.button-transparent:hover,
.button-transparent:focus {
  outline: 0;
  border-color: var(--main-color-yellow-hover);
  color: white;
  text-decoration: none;
}
.button-transparent > *:last-child {
  padding-left: 34px;
}
.button-black-form {
  padding: 9px 23px;
  background-color: black;
  border:1px solid black;
  border-radius: 50px;
  font-size: 1em;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  transition: all .6s;
  display: inline-block;
}
.button-black-form:hover,
.button-black-form:focus {
  outline: 0;
  border-color: black;
  color: white;
  text-decoration: none;
}
.button-black-form > *:last-child {
  padding-left: 34px;
}