.l-sq2-landscape, .l-sq2-answer, .l-sq2-feedback, .l-sq2-navigation, .l-sq2-navigation--question, .l-sq2-results__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.l-sq2-portrait, .l-sq2, .l-sq2-question, .l-sq2-title, .l-sq2-results, .l-sq2-results__graphic, .l-sq2-results__comment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.l-sq2-title {
  padding-left: 0.5em; }

.l-sq2-answer {
  padding-top: 0.5em;
  padding-right: 2em;
  padding-bottom: 0.25em;
  padding-left: 1em; }
  .l-sq2-answer label {
    padding: 0; }

.l-sq2-feedback {
  padding-top: 10px;
  padding-right: 2em;
  padding-bottom: 10px;
  padding-left: 1em; }

.l-sq2-navigation {
  height: 40px; }

.l-sq2-navigation--question {
  height: calc(44px + 1em + 0.5em);
  margin-top: 1em;
  margin-bottom: 0.5em; }

.l-sq2-question-wrapper {
  margin-top: 0.75em; }

.l-sq2-results {
  margin-top: 0.75em; }

.l-sq2-results__graphic {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: 256px;
      flex-basis: 256px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-right: 1em;
  padding-bottom: 2em; }
  .l-sq2-results__graphic svg {
    height: 512px; }
  .l-sq2-results__graphic h4 {
    display: block;
    margin: 0 auto; }

.l-sq2-results__comment {
  margin-top: calc(0.5em + 5px); }
  .l-sq2-results__comment p {
    margin-bottom: 1em; }

.sq2-title span, .sq2-title--question span {
  background-color: #aae3e2;
  text-shadow: -0.5em 0 #aae3e2, 0px 0 #aae3e2;
  -webkit-box-shadow: 0.5em 0 0 #aae3e2, -0.5em 0 0 #aae3e2;
          box-shadow: 0.5em 0 0 #aae3e2, -0.5em 0 0 #aae3e2; }

.sq-button--radio {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: 1em;
      flex-basis: 1em;
  cursor: pointer;
  width: 1em;
  margin-right: 0.5em; }
  .sq-button--radio .outer-circle {
    stroke: black;
    stroke-width: 1px; }
  .sq-button--radio .inner-circle {
    fill: transparent; }
    .sq-button--radio .inner-circle:hover {
      fill: rgba(255, 255, 255, 0.5);
      stroke: rgba(255, 255, 255, 0.6);
      stroke-width: 0.5px; }

.sq-button--radio-selected .inner-circle {
  fill: white; }

.feedback {
  position: relative;
  padding-left: calc(1.5em - 2px);
  padding-right: calc(1.5em - 2px);
  border-style: solid;
  border-width: 2px;
  border-color: #aae3e2;
  background-color: #ecd0ab; }
  .feedback p {
    padding-top: 0.5em;
    padding-bottom: 0.5em; }

.feedback__balloon--outside {
  position: absolute;
  top: -20px;
  left: 64px;
  border-top-style: solid;
  border-top-width: 10px;
  border-top-color: transparent;
  border-right-style: solid;
  border-right-width: 10px;
  border-right-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 10px;
  border-bottom-color: #aae3e2;
  border-left-style: solid;
  border-left-width: 10px;
  border-left-color: transparent; }

.feedback__balloon--inside {
  position: absolute;
  top: -7px;
  left: -9.6px;
  border-top-style: solid;
  border-top-width: 10px;
  border-top-color: transparent;
  border-right-style: solid;
  border-right-width: 10px;
  border-right-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 10px;
  border-bottom-color: #ecd0ab;
  border-left-style: solid;
  border-left-width: 10px;
  border-left-color: transparent; }

svg.progress-steps {
  margin: auto; }

section {
  margin-bottom: 16px; }

.accordion__button {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  font-weight: 400;
  background-color: transparent;
  border-style: solid;
  border-width: 0.5px;
  border-color: #aae3e2;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  text-align: center; }
  .accordion__button:focus {
    outline: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-style: solid;
    border-width: 1px;
    border-color: #aae3e2; }

h4.accordion__title {
  padding-top: 0.5rem;
  padding-right: 2rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  margin: 0;
  font-size: 1.125rem;
  font-font-weight: 500;
  font-line-height: 1.4; }

.accordion__icon {
  position: absolute;
  top: .75rem;
  right: .5rem; }

.accordion__panel {
  overflow: hidden;
  height: 0;
  margin-top: 1em;
  -webkit-transition: height 0.3s ease-out;
  transition: height 0.3s ease-out; }