/* -------------------------------------------- */
/* Button Elements
/* http://tinyurl.com/24n483a6
/* -------------------------------------------- */

/* -------------------------------------------- */
/* Button: Standard */

.oc__block .oc__element__button {
  display: inline-block;

  position: relative;
  top: 0;

  padding: var(--oc--spacing--12) var(--oc--spacing--27);

  border-radius: 10px;
  border: none;

  font-family: var(--oc--font-family--base);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 20px;

  transition-property: background-color, color, top;
  transition-duration: 0.25s, 0.25s, 0.25s;
}

.oc__block .oc__element__button:hover {
  top: -3px;

  cursor: pointer;

  text-decoration: none;
}

/* -------------------------------------------- */
/* Button: Color Variations */

.oc__block .oc__element__button--navy {
  background-color: var(--oc--color--navy-text);
  color: white;
}

.oc__block .oc__element__button--navy:hover {
  background-color: var(--oc--color--new-blue);
  color: black;
}

.oc__block .oc__element__button--outline-white {
  background-color: transparent;
  border: 1px solid white;
  color: white;
}

.oc__block .oc__element__button--serious-coral {
  background-color: var(--oc--color--serious-coral);
  color: var(--oc--color--navy-text);
}

.oc__block .oc__element__button--serious-coral:hover {
  background-color: var(--oc--color--navy-blue);
  color: white;
}

/* -------------------------------------------- */
/* Button: Size Variations */

.oc__block .oc__element__button--small {
  padding: 12px 33px;
}