html, body {
  --hmmt-grey: rgba(210, 210, 210, 1);  /* #d2d2d2 */
  --hmmt-grey-less: rgba(210, 210, 210, .8);
  --hmmt-red: rgba(195, 62, 62, 1);  /* #c33e3e */
  --hmmt-red-less: rgba(195, 62, 62, .8);
  --medium-grey: rgba(176, 176, 176, 1);
  --dark-grey: rgba(88, 88, 88, 1);
  --page-max-width: 1024px;
}

@media (max-width: 1200px) {
  .btn {
    /*max-width: calc(100% - 20px) !important;*/
  }
}

.border-primary {
  border-color: var(--hmmt-red) !important;
}

.border-secondary {
  border-color: var(--hmmt-grey) !important;
}

.btn-primary,
.btn-secondary {
  border: none;
  border-radius: 2px;
  font-variant: small-caps;
  font-weight: 600;
  margin-bottom: 5px;
  max-width: 25vw;
  padding: 10px 50px;
  text-align: center;
}

.btn-primary {
  background-color: var(--hmmt-red);
  color: #ffffff;
}

.btn-primary[disabled] {
  background-color: var(--hmmt-red-less);
  color: #ffffff;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:hover {
  background-color: var(--hmmt-red-less);
  color: #ffffff;
}

.btn-secondary {
  background-color: var(--hmmt-grey);
  color: var(--dark-grey);
}

.btn-secondary[disabled] {
  background-color: var(--hmmt-grey-less);
  color: var(--dark-grey);
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:hover {
  background-color: var(--hmmt-grey-less);
  color: var(--dark-grey);
}

.cursor-pointer {
  cursor: pointer;
}

.page-item.active .page-link {
  background-color: var(--hmmt-red);
  border-color: var(--hmmt-red);
  color: white;
}

.page-item.disabled .page-link {
  color: var(--medium-grey);
}

.page-link {
  background-color: white;
  color: var(--dark-grey);
}

.page-link:hover {
  color: var(--dark-grey);
}

.mh-25 {
  max-height: 25vh;
}

.mh-33 {
  max-height: calc(100vh / 3);
}

.mh-50 {
  max-height: 50vh;
}

.mh-66 {
  max-height: calc(200vh / 3);
}

.mh-75 {
  max-height: 75vh;
}

.mw-25 {
  max-width: 25%;
}

.mw-33 {
  max-width: calc(100% / 3);
}

.mw-50 {
  max-width: 50%;
}

.mw-66 {
  max-width: calc(200% / 3);
}

.mw-75 {
  max-width: 75%;
}