:root {
  --dim-grey: #42403f;
  --gainsboro: #dedad5;
}

.canvas {
  perspective: 1000px;
  background-color: #e6e6e6;
  position: absolute;
  top: -100%;
  bottom: -100%;
  left: -100%;
  right: -100%;
  transform: rotate(-45deg);
}

.body {
  height: 100vh;
  overflow: hidden;
}

.bgcolor {
  background-image: linear-gradient(rgba(128, 84, 32, .1), rgba(128, 84, 32, .1)), url('../images/concrete_seamless.png');
  background-position: 0 0, 50%;
  background-size: auto, 200px;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.card {
  width: 320px;
  height: 200px;
  margin-top: 100px;
  margin-bottom: 100px;
  position: relative;
}

.halfbg {
  background-color: rgba(0, 0, 0, .7);
  height: 50%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.cards {
  perspective: 640px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.back {
  transform-style: preserve-3d;
  background-color: #e6e2df;
  padding: 20px 30px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  transform: rotateX(180deg)rotateY(0)rotateZ(0);
}

.back-2 {
  background-color: var(--dim-grey);
  color: #e6e2df;
  padding: 20px 30px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.card-shadows {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  margin-left: 15px;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.shadow {
  background-image: url('../images/shadow33.png');
  background-position: 50%;
  background-size: cover;
  width: 350px;
  height: 234px;
  margin-top: 83px;
  margin-bottom: 83px;
  position: relative;
}

.front {
  background-color: var(--dim-grey);
  padding: 20px 30px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.front-2 {
  background-color: var(--gainsboro);
  padding: 20px 30px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.card-content {
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.heading {
  color: var(--gainsboro);
  text-align: center;
  letter-spacing: .1rem;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Merriweather, serif;
  font-size: 2.5rem;
  position: absolute;
  bottom: 20px;
  left: 30px;
  right: 30px;
}

.heading.light {
  color: var(--dim-grey);
}

.heading.flipped {
  transform-style: preserve-3d;
  top: 20px;
  bottom: auto;
  transform: rotateX(180deg)rotateY(0)rotateZ(0);
}

.paragraph {
  opacity: .75;
  color: #99918a;
  letter-spacing: .05rem;
  text-transform: uppercase;
  column-count: 2;
  column-gap: 60px;
  font-family: Open Sans, sans-serif;
  font-size: .6rem;
  font-weight: 600;
  line-height: 1.75;
}

.logo {
  background-image: url('../images/logo.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 32px;
  left: 32px;
}

.logo.logo-alt {
  background-image: url('../images/logo2.svg');
}

.cta-clone {
  color: #e6e2df;
  letter-spacing: .1rem;
  text-transform: uppercase;
  background-color: #42403f;
  border-radius: 5px;
  margin-bottom: 32px;
  margin-right: 32px;
  padding: 10px 15px;
  font-family: Merriweather, serif;
  font-size: .8rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: auto;
  right: 0%;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
}

.cta-clone.clone-alt {
  color: #42403f;
  background-color: #e6e2df;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}