/* other commonly-used stuff */
.mobile-only {
  display: none !important;
}

.bg-cover {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.bg-contain {
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.text-center {
  text-align: center;
}

form .post-submit {
  display: none;
}

form .pre-submit {
  display: block;
}

form.after .post-submit {
  display: block;
}

form.after .pre-submit {
  display: none;
}

html.stuck {
  overflow: hidden;
  height: 100%;
}

.flex {
  display: flex;
}

.flex.row {
  flex-direction: row;
}

.flex.column {
  flex-direction: column;
}

.flex .right {
  margin-left: auto;
}

.flex .left {
  margin-right: auto;
}

.flex .center {
  margin-left: auto;
  margin-right: auto;
}

.flex .center.vert {
  margin-top: auto;
  margin-bottom: auto;
}

.flex .top {
  margin-bottom: auto;
}

.flex .bottom {
  margin-top: auto;
}

.flex.space-around{
  justify-content: space-around;
}

.flex.space-between{
  justify-content: space-between;
}

.flex.vertical-center > *{
  margin-top: auto;
  margin-bottom: auto;
}

@media screen and (max-width:980px) {
  .mobile-only {
    display: block !important;
  }
  .flex.mobile-only{
    display: flex !important;
  }

  .desktop-only {
    display: none !important;
  }
}