/*********************************************************************************
/*
/* buttons
/*
/********************************************************************************/

.button-wrapper {
  padding: 15px 10px 20px 10px;
  display: flex;
}

.buttons,
input[type="submit"], input[type="button"] {
  text-align: center;
  margin: 40px 0 0 0;
}

button,
p.button,
.buttons input[type="submit"],
input[type="submit"],
input[type="button"]{
  display: inline;

  font-size: 15px;
  text-align: center !important;
  text-transform: uppercase;

  min-width: 100px;
  width: auto;

  margin: 0 5px;
  padding: 8px 12px;

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;  
  border-radius: 5px;
  border: none;

  background-color: var(--button-background);
  color: var(--button-text);

  box-shadow: 0px 0px 5px rgba(64, 64, 64, 0.7);

  -webkit-appearance: none;
  transition: 0.2s;
}

@media (min-width: 520px) {
  button,
  p.button,
  .buttons input[type="submit"],
  input[type="submit"],
  input[type="button"] {
    margin: 0 10px;
  }
}

button:hover,
p.button:hover,
.buttons input[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--button-hover);
  cursor: pointer;
}