body, html {
  height: 100%;
  width: 100%;
}

.page {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.page .home-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  max-width: 700px;
}
.page .home-content .header {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 10px 0;
}
.page .home-content h1 {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 30px 0;
  text-align: center;
  font-size: 22px;
}
.page .home-content .sub-header {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 20px 0;
  text-align: center;
  font-size: 16px;
  text-align: center;
}
.page .home-content .qr {
  height: 100%;
  min-width: 200px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.page .home-content .qr img {
  height: 25vh;
}
.page .home-content .sub-text {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  font-size: 16px;
  margin: 30px 0;
}

.page {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.page main {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: relative;
}
.page main .questionContainer {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.page main .questionContainer .question {
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: absolute;
  background-color: #fff;
  transition: ease-in-out 0.5s;
  padding: 20px;
}
.page main .questionContainer .question h2, .page main .questionContainer .question h3, .page main .questionContainer .question h4, .page main .questionContainer .question h5, .page main .questionContainer .question h6 {
  margin-bottom: 10px;
  text-align: center;
}
.page main .questionContainer .question .form {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 30px 0;
}
.page main .questionContainer .question .form p {
  margin-bottom: 20px;
}
.page main .questionContainer .question .form button {
  margin-top: 10px;
}
.page main .questionContainer .question .question-space {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
}
.page main .questionContainer .question .question-space .rating span {
  margin: 0 10px;
  margin-top: 5px;
}
.page main .questionContainer .question .graph {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  max-width: 700px;
}
.page main .questionContainer .question .graph .table {
  margin: 20px 0 40px 0;
}
.page main .questionContainer .question .graph td {
  vertical-align: middle;
}
.page main .questionContainer .question .graph .bar {
  padding: 5px;
  height: auto;
}
.page main .questionContainer .question.past {
  transform: translateX(-100%);
}
.page main .questionContainer .question.active {
  transform: translateX(0%);
}
.page main .questionContainer .question.next {
  transform: translateX(100%);
}
.page main .questionContainer .cta {
  margin-top: 20px;
}
.page main .questionContainer .suggestedFocus p, .page main .questionContainer .readydescription p {
  text-align: center;
}