*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

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

/* For mobile phones: */
[class*='col-'] {
  width: 100%;
}

@media only screen and (min-width: 601px) {
  /* For tablets: */
  .col-s-1 {
    width: 8.33%;
  }
  .col-s-2 {
    width: 16.66%;
  }
  .col-s-3 {
    width: 25%;
  }
  .col-s-4 {
    width: 33.33%;
  }
  .col-s-5 {
    width: 41.66%;
  }
  .col-s-6 {
    width: 50%;
  }
  .col-s-7 {
    width: 58.33%;
  }
  .col-s-8 {
    width: 66.66%;
  }
  .col-s-9 {
    width: 75%;
  }
  .col-s-10 {
    width: 83.33%;
  }
  .col-s-11 {
    width: 91.66%;
  }
  .col-s-12 {
    width: 100%;
  }
}

@media only screen and (min-width: 769px) {
  /* For desktop: */
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  main section > .content {
    flex-flow: column;
  }
  main section > .content > .answers {
    flex: 0 1 auto;
  }
  main section > .content > .description {
    flex: 0 1 auto;
    overflow: auto;
  }
  main section > .content > .description.thank-you:nth-child(2) {
    margin-bottom: 1rem;
  }
  div.modal-content {
    max-width: 90% !important;
  }
}

@media only screen and (min-width: 400px) {
  .landing .heading-no-filter {
    font-size: 275% !important;
  }
}
@media only screen and (min-width: 601px) {
  main section > .content {
    width: 75%;
    flex: 0 1 75%;
  }
  .landing {
    background-image: url(../img/landing.svg);
    background-size: cover;
  }
}
@media only screen and (min-width: 768px) {
  .landing .heading-no-filter {
    font-size: 375% !important;
  }
  footer div.pagination {
    margin: auto 0 auto auto;
  }
  footer .buttons {
    flex-basis: calc(50% + 70px) !important;
  }
  footer .privacy {
    flex-basis: calc(50% - 70px) !important;
  }
}

@media only screen and (max-width: 1024px) {
  main section > .content > .answers {
    padding-bottom: 1rem;
  }
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1025px) {
  main section > .content > .description {
    border-left: 1px solid #ff0000;
    flex: 0 1 calc(100% - 230px - 2rem);
  }
  main section > .content .description:nth-child(3) {
    margin: 0 1rem;
    padding-left: 1rem;
  }

  main section > .content > .description.thank-you {
    padding: 0 1rem 0;
    flex: 0 1 calc(50% - 1rem);
  }
  main section > .content > .description.thank-you:nth-child(2) {
    padding: 0;
    border-left: 0;
  }
}
@media only screen and (min-width: 1366px) and (max-width: 1920px) {
}

@media only screen and (min-width: 1366px) {
  main section > .content {
    width: 60%;
    flex: 0 1 60%;
  }
}