.appWrapper {
  height: 498px;
  width: 898px;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative; }

.page-intro {
  width: 50%;
  float: right;
  padding: 20px;
  margin: 40px; }

.click-to-reveal-wrapper {
  width: 348px;
  float: left; }
  .click-to-reveal-wrapper button {
    padding: 0;
    border: 0;
    position: relative; }
    .click-to-reveal-wrapper button i.fa {
      position: absolute;
      bottom: 45px;
      right: 0;
      background: #F8F9F9;
      border: 2px solid #212628;
      border-right: none;
      box-shadow: -2px 2px 2px #212628;
      font-size: 20px;
      padding: 5px;
      border-radius: 5px 0 0 5px;
      opacity: 0;
      transition: opacity .3s ease; }
    .click-to-reveal-wrapper button:hover, .click-to-reveal-wrapper button:focus {
      opacity: 1;
      border-color: #FFC19C; }
      .click-to-reveal-wrapper button:hover i.fa, .click-to-reveal-wrapper button:focus i.fa {
        opacity: 1; }
      .click-to-reveal-wrapper button:hover.deactivated img, .click-to-reveal-wrapper button:focus.deactivated img {
        filter: blur(0) grayscale(0); }
    .click-to-reveal-wrapper button img {
      height: 124px;
      transition: filter .3s ease; }
    .click-to-reveal-wrapper button.deactivated img {
      filter: blur(0.5px) grayscale(1);
      opacity: .7; }
    .click-to-reveal-wrapper button.revealed i.fa {
      opacity: 1; }

.reveal-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 448px;
  transition: transform .5s ease; }
  .reveal-wrapper.ng-enter, .reveal-wrapper.ng-leave.ng-leave-active {
    transform: translateX(448px); }
  .reveal-wrapper.ng-enter-active, .reveal-wrapper.ng-leave {
    transform: translateX(0px); }
  .reveal-wrapper .reveal {
    position: relative;
    padding: 40px;
    width: 448px; }
    .reveal-wrapper .reveal .btn-close {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #F8F9F9; }
  .reveal-wrapper#reveal1 {
    top: 98px; }
  .reveal-wrapper#reveal2 {
    top: 175px; }
  .reveal-wrapper#reveal3 {
    top: auto;
    bottom: 84px; }

/* quiz */
.quiz_main {
  padding: 20px; }
  .quiz_main .quiz-input {
    padding-bottom: 20px; }
  .quiz_main .mChoiceNextPrev {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 20px 40px 20px 0px; }
  .quiz_main .column-left, .quiz_main .column-right {
    width: 50%;
    padding-right: 20px;
    float: left; }
  .quiz_main h4 {
    clear: both; }
  .quiz_main textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 20px; }
  .quiz_main .reflection.ng-enter {
    opacity: 0;
    transition: opacity .3s ease; }
  .quiz_main .reflection.ng-enter-active {
    opacity: 1; }

/* miscellany */
.btn-close {
  background: none;
  border: none;
  font-size: 20px; }

.btn-continue {
  position: absolute;
  right: 20px;
  bottom: 20px; }

.color-safe-bg_light-brand-1 .responseHeader {
  background-color: #cee4cf; }

.color-safe-bg_context .responseHeader {
  background-color: #ced1d2; }

.responseHeader {
  margin: -10px -20px 10px -20px;
  padding: 10px 0px 5px 20px; }

.responseHeader > .responseHeaderText {
  color: #212628;
  margin-bottom: 0; }

/*# sourceMappingURL=styles.css.map */