purelymental-demo/assets/stylesheets/layout/_assessment.css.scss

.assessment {
  // margin-top: 40px;
  margin-bottom: 100px;

  h2 {
    font-size: 48px;
    text-align: center;
  }


  .questions {
    @extend .cf;

    background: #FFF;
    border: 1px solid #D3DADB;
    border-radius: 3px;

    .assessment-steps {
      margin: 10px;
      margin-bottom: 40px;

      li {
        background: image-url("assessment/steps_bg.png") repeat-x;
        position: relative;
        height: 32px;

        &.active span {
          background: image-url("assessment/steps_active.png") center center no-repeat;
        }

        span {
          background: image-url("assessment/steps_inactive.png") center center no-repeat;
          width: 32px;
          height: 32px;
          display: block;
          position: absolute;
          left: -16px;

          &.last {
              background: image-url("assessment/steps_inactive.png") center center no-repeat;
              left: auto;
              right: -16px;
          }
          &.last.active {
              background: image-url("assessment/steps_active.png") center center no-repeat !important;
          }
        }
      }
    }

    .question-and-answers {
      @extend .cf;
      padding: 40px 60px;

      .question {
        @extend .cf;
        margin-bottom: 30px;

        h3 {
          font-family: "Open Sans", sans-serif;
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 0;
          margin-top: 12px;
        }

        span {
          color: #B6B6B6;
          font-size: .9em;
          font-style: italic;
          font-weight: 100;
        }
      }

      ul.answers {
        li {
          background: #F8F8F8;
          font-size: 18px;
          list-style-type: none;
          margin-bottom: 22px;

          &.selected {
            background: #ECFCF2 image-url("assessment/icn_checked.png") 97% 50% no-repeat;
            border: 2px solid #86C79E;
          }

          &:last-child {
            margin-bottom: 0;
          }

          label {
            padding: 20px;
          }
        }

        div {
          float: right;
        }
      }

      input[type=submit] {
        float: right;
      }
    }
  }a.next-button {
        float: right;
        margin-top: 20px;
      }
}

.blur {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blurfilter' x='0' y='0'><feGaussianBlur in='SourceGraphic' stdDeviation='3'></feGaussianBlur></filter></svg>#blurfilter");
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

.overlay {
  position: absolute;
  padding-top: 200px;
  top: 0px;
  right: 0px;
  height: 100%;
  overflow: hidden;
  text-align: center;
}