body {
  display: flex;
  flex-direction: column;
  font-family: 'Open Sans', sans-serif;
}

div.survey {
  display: flex;
  flex-direction: column;
  flex: 0 1 100%;
  opacity: 0;
}

.raleway {
  font-family: Raleway, 'Open Sans', sans-serif !important;
  font-weight: bolder !important;
}

.landing {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #1b3b53;
  background-image: url('../img/landing-phone.svg');
  background-size: cover;

  /* background-position: center calc(50% + 50px); */

  background-repeat: no-repeat;
  z-index: 9999;
  transition: transform 2s ease, -webkit-transform 2s ease;
}

.landing.hide {
  transform: translateY(-100%);
}

.landing .header {
  width: 100%;
  height: 6rem;
  padding: 1rem;
  background-color: transparent;
}

.landing .header .logo,
.landing .header img {
  height: 100%;
  width: auto;
}

.landing .heading-no-filter {
  color: #ffffff;
  font-size: 225%;
  width: 100%;
  padding: 1rem;
  line-height: 100%;
  text-align: center;
  margin-top: 2rem;
}

.landing .heading-no-filter span.highlight {
  color: #ff0e0f;
}

.landing .text-no-filter {
  color: #ffffff;
  font-size: 200%;
  width: 100%;
  line-height: 120%;
  text-align: center;
  padding: 2rem;
  margin-bottom: 1rem;
}

.landing .btn-test {
  position: absolute;
  left: 0;
  bottom: 7.5%;
  width: 100%;
  text-align: center;
}

.landing button {
  width: 20rem;
  height: 50px;
  border: 0;
  border-radius: 25px;
  font-size: 175%;
  text-transform: uppercase;
  background-color: #ff0e0f;
  color: #ffffff;
  cursor: pointer;
}

header {
  height: 0;
  width: 100%;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  padding-top: 10%;
}

main {
  width: 100%;
  max-height: 100%;
  padding: 1rem;
  overflow: hidden;
  flex-grow: 1;
  position: relative;
}

main form {
  width: 100%;
  height: 100%;
  position: relative;
  counter-reset: section;
}

main section {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

main section {
  opacity: 0;
  -webkit-transition: -webkit-transform 600ms ease 0s;
  transition: -webkit-transform 600ms ease 0s;
  transition: opacity 300ms ease 0s, transform 600ms ease 0s;
  transition: opacity 300ms ease 0s, transform 600ms ease 0s, -webkit-transform 600ms ease 0s;
}

main section > .content {
  display: flex;
  flex-flow: row wrap;
  max-height: 100%;
}

main section > .content > .question {
  position: relative;
  flex-basis: 100%;
  margin-bottom: 1rem;
}

main section > .content > .question > p {
  position: relative;
  font-size: 1.25rem;
  color: rgb(61, 61, 61);
}

main section > .content > .question > p.raleway {
  font-size: 1.5rem;
}

main section:not(.no-number) div.question:first-child > p:before {
  counter-increment: section;
  display: inline-block;
  content: counter(section) '.';
  position: absolute;
  top: 0;
  left: -1rem;
  font-size: 1rem;
  color: rgb(237, 28, 36);
}

main div.answers,
main div.answers div.options {
  display: flex;
  flex-direction: column;
}

main div.answers div.options {
  display: flex;
  flex-direction: column;
}

main section > .content > .answers > .invalid-feedback {
  background-color: #ff0000;
  color: #ffffff;
  font-weight: bold;
  line-height: 1.5rem;
  max-width: 220px;
  text-align: center;
  border-radius: 50px;
}

main section > .content > .description {
  text-align: justify;
}

footer {
  height: 5rem;
  padding: 1rem;
  width: 100%;
  display: flex;
  flex-flow: row;
  flex-shrink: 0;
  justify-items: center;
}

footer .buttons {
  display: flex;
  align-items: center;
  flex-basis: 50%;
}

footer .pagination {
  margin: auto auto auto 0;
}

footer .pagination button {
  width: 70px;
  height: 30px;
  float: left;
  border: none;
  text-decoration: none;
  background-color: rgb(222, 29, 35);
  outline: none;
  cursor: pointer;
}

footer .pagination button:hover {
  background-color: #e33f44;
}

footer .pagination button:nth-child(1) {
  border-radius: 4px 0 0 4px;
}

footer .pagination button:nth-child(2) {
  border-radius: 0 4px 4px 0;
}

footer .pagination button.wide-btn {
  width: 200px;
  border-radius: 4px;
  color: #ffffff;
}

footer .privacy {
  color: #ff0000;
  flex-basis: 50%;
  align-self: flex-end;
  display: flex;
  flex-flow: row-reverse wrap;
  margin: auto 0 auto auto;
}

footer .privacy a {
  text-decoration: none;
}

main section.active {
  -webkit-transform: translate(0, 0) !important;
  transform: translate(0, 0) !important;
  opacity: 1 !important;
  z-index: 99 !important;
}

main section.answered {
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
  opacity: 0;
}

main section.inactive {
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);
  opacity: 0;
}

i.arrow {
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 4px;
}

i.arrow.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left: -4px;
}

i.arrow.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-right: -4px;
}

i.arrow.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-bottom: -4px;
}

i.arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-top: -4px;
}

.u-hide {
  display: none !important;
}

.form-pagination {
  display: none;
}

.form-pagination.show {
  display: block;
  animation: fadeIn 600ms;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.form-submit {
  width: 100%;
  text-align: center;
}

.form-pagination input[type='submit'] {
  flex-basis: 100%;
  width: 140px;
  height: 30px;
  margin: 1rem;
  border: none;
  text-decoration: none;
  background-color: #de1d23;
  outline: none;
  cursor: pointer;
  border-radius: 4px;
  color: #ffffff;
  font-size: 1.15rem;
}