purelymental-demo/assets/stylesheets/assessment/assessment.css.scss

.assessment-quiz {
  #memory-section {
  #memory-image {
    width: 76px;
    height: 76px;
    background: image-url("assessment/memory_76.png") no-repeat;
    float: left;
    
  }
  #memory-text {
    display: inline;
    float: left;
    padding-left: 10px;
    h1 {
      margin: 0;
      padding: 0;
    }
    p {
      color: gray;
      font-size: 12px;
    }
  }
  .question-section {
    overflow: hidden;
    padding-bottom: 50px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    .question-header {
      width: 600px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
    }
    
    .checkbox-container {
      float: left;
      text-align: center;
      margin: 14px;
      width: 121px;
      height: 121px;
      cursor: pointer;
      
      input[type="checkbox"] {
        display: none;
      }
      p {
        padding-top: 121px;
      }
      .flip-container {
          width: 121px;
          -webkit-perspective: 1000;
          -moz-perspective: 1000;
          -o-perspective: 1000;
          -ms-perspective: 1000;
          perspective: 1000;
          .flipper {
            -webkit-transition: .6s;
            -moz-transition: .6s;
            -o-transition: .6s;
            -ms-transition: .6s;
            transition: .6s;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            width: auto;
            height: auto;
            .front {
              /* width: 100%;
              max-width: 300px; */
              height: auto;
              margin: auto;
              position: relative;
              -webkit-backface-visibility: hidden;
              -moz-backface-visibility: hidden;
              -o-backface-visibility: hidden;
              -ms-backface-visibility: hidden;
              backface-visibility: hidden;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
            }
            .back {
              /* width: 100%;
              max-width: 300px; */
              height: auto;
              margin: auto;
              position: relative;
              -webkit-backface-visibility: hidden;
              -moz-backface-visibility: hidden;
              -o-backface-visibility: hidden;
              -ms-backface-visibility: hidden;
              backface-visibility: hidden;
              position: absolute;
              top: 0;
              left: 0;
              -webkit-transform: rotateY(180deg);
              -moz-transform: rotateY(180deg);
              -o-transform: rotateY(180deg);
              -ms-transform: rotateY(180deg);
              transform: rotateY(180deg);
            }
          }
        }
      }
      .checkbox-container.active {
          .flipper {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            transform: rotateY(180deg);
          }
        }
      }
    .slider-decorations {
      padding-top: 20px;
      width: 100%;
      overflow: hidden;
      .slider-image {
        width: 140px;
        height: 150px;
        float: left;
        text-align: center;
      }
    }
    .slider-bar {
      width: 100%;
      height: 63px;
      background: image-url("assessment/slider_path_background.png") 0 22px repeat-x;
      margin-top: 20px;
      .brain-slider {
        width: 70px;
        height: 83px;
        background: image-url("assessment/brain_slider.png") 0 4px no-repeat;
        position: absolute;
        bottom: 0px;
      }
      .ui-draggable-dragging, .ui-clickable-clicked{
        background: image-url("assessment/brain_slider_drag.png") 0 0 no-repeat;
      }
    }
  
  .radio-container {
      float: left;
      text-align: center;
      margin: 14px;
      width: 121px;
      height: 150px;
      cursor: pointer;
      
      input[type="radio"] {
        display: none;
      }
      p {
        padding-top: 121px;
      }
      .flip-container {
          width: 121px;
          -webkit-perspective: 1000;
          -moz-perspective: 1000;
          -o-perspective: 1000;
          -ms-perspective: 1000;
          perspective: 1000;
          .flipper {
            -webkit-transition: .6s;
            -moz-transition: .6s;
            -o-transition: .6s;
            -ms-transition: .6s;
            transition: .6s;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            width: auto;
            height: auto;
            .front {
              /* width: 100%;
              max-width: 300px; */
              height: auto;
              margin: auto;
              position: relative;
              -webkit-backface-visibility: hidden;
              -moz-backface-visibility: hidden;
              -o-backface-visibility: hidden;
              -ms-backface-visibility: hidden;
              backface-visibility: hidden;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
            }
            .back {
              /* width: 100%;
              max-width: 300px; */
              height: auto;
              margin: auto;
              position: relative;
              -webkit-backface-visibility: hidden;
              -moz-backface-visibility: hidden;
              -o-backface-visibility: hidden;
              -ms-backface-visibility: hidden;
              backface-visibility: hidden;
              position: absolute;
              top: 0;
              left: 0;
              -webkit-transform: rotateY(180deg);
              -moz-transform: rotateY(180deg);
              -o-transform: rotateY(180deg);
              -ms-transform: rotateY(180deg);
              transform: rotateY(180deg);
            }
          }
        }
      }
        .radio-container.active {
          .flipper {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            transform: rotateY(180deg);
          }
        }
      }
  .clearFloats {
    clear: both;
  }
  
  #finish-footer {
    padding-top: 100px;
    text-align: center;
    width: 200px;
    margin-left: auto;
    margin-right: auto;  
  }
}