#container {
  background-color: #223a55;
  height: 700px;
  padding-top: 0;
  text-align: center; }
  #container .keyAreas {
    z-index: 10;
    position: absolute;
    width: 1000px;
    height: 630px;
    display: none; }
    #container .keyAreas #closeNav {
      top: 0;
      text-align: right;
      float: right; }
      #container .keyAreas #closeNav a {
        cursor: pointer;
        display: inline-block; }
        #container .keyAreas #closeNav a:focus .icon, #container .keyAreas #closeNav a:hover .icon {
          background-color: #0c8ad1 !important; }
        #container .keyAreas #closeNav a .icon {
          border-radius: 50px;
          display: block !important;
          height: 33px;
          margin: 10px;
          width: 33px;
          background-color: #223a55 !important; }
          #container .keyAreas #closeNav a .icon.close {
            background: url("../../core/img/icon_close.png") center center no-repeat;
            margin-left: 35px; }
    #container .keyAreas .inst {
      color: #fff;
      padding-top: 25px;
      padding-bottom: 20px;
      font-weight: bold;
      font-size: 16px;
      font-style: italic; }
    #container .keyAreas .clickArea {
      position: absolute;
      left: 50%;
      width: 540px;
      height: 540px;
      margin-left: -270px; }
      #container .keyAreas .clickArea .mainBtn.next {
        position: absolute;
        bottom: 20px;
        left: 625px; }
      #container .keyAreas .clickArea .pie {
        position: absolute;
        cursor: pointer; }
        #container .keyAreas .clickArea .pie.disable {
          pointer-events: none; }
      #container .keyAreas .clickArea .pie0 {
        width: 124px;
        height: 250px;
        top: 60px;
        left: 416px;
        background: url("../../content/cultural_competence/img/pie1.png") 0 0 no-repeat; }
        #container .keyAreas .clickArea .pie0.selected {
          background-position: -134px 0; }
        #container .keyAreas .clickArea .pie0:active, #container .keyAreas .clickArea .pie0:focus, #container .keyAreas .clickArea .pie0:hover {
          background-position: -134px 0; }
      #container .keyAreas .clickArea .pie1 {
        width: 253px;
        height: 219px;
        top: 318px;
        left: 279px;
        background: url("../../content/cultural_competence/img/pie2.png") 0 0 no-repeat; }
        #container .keyAreas .clickArea .pie1.selected {
          background-position: -259px 0; }
        #container .keyAreas .clickArea .pie1:active, #container .keyAreas .clickArea .pie1:focus, #container .keyAreas .clickArea .pie1:hover {
          background-position: -259px 0; }
      #container .keyAreas .clickArea .pie2 {
        width: 250px;
        height: 208px;
        top: 329px;
        left: 11px;
        background: url("../../content/cultural_competence/img/pie3.png") 0 0 no-repeat; }
        #container .keyAreas .clickArea .pie2.selected {
          background-position: -255px 0; }
        #container .keyAreas .clickArea .pie2:active, #container .keyAreas .clickArea .pie2:focus, #container .keyAreas .clickArea .pie2:hover {
          background-position: -255px 0; }
      #container .keyAreas .clickArea .pie3 {
        width: 122px;
        height: 249px;
        top: 61px;
        left: 0;
        background: url("../../content/cultural_competence/img/pie4.png") 0 0 no-repeat; }
        #container .keyAreas .clickArea .pie3.selected {
          background-position: -127px 0; }
        #container .keyAreas .clickArea .pie3:active, #container .keyAreas .clickArea .pie3:focus, #container .keyAreas .clickArea .pie3:hover {
          background-position: -127px 0; }
      #container .keyAreas .clickArea .pie4 {
        width: 294px;
        height: 88px;
        top: 0;
        left: 119px;
        background: url("../../content/cultural_competence/img/pie5.png") 0 0 no-repeat; }
        #container .keyAreas .clickArea .pie4.selected {
          background-position: -300px 0; }
        #container .keyAreas .clickArea .pie4:active, #container .keyAreas .clickArea .pie4:focus, #container .keyAreas .clickArea .pie4:hover {
          background-position: -300px 0; }
    #container .keyAreas .revealArea {
      color: #333;
      text-align: center;
      border-radius: 50%;
      width: 585px;
      height: 585px;
      margin: -26px auto; }
      #container .keyAreas .revealArea .circle {
        width: 346px;
        height: 346px;
        background: #1996a7;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 170px;
        color: #fff;
        position: absolute;
        top: 158px;
        left: 50%;
        margin-left: -173px; }
        #container .keyAreas .revealArea .circle .title {
          z-index: 1;
          text-align: center;
          font-size: 20px;
          width: auto;
          margin-top: 50px;
          padding: 0 50px;
          line-height: 24px;
          font-weight: bold; }
        #container .keyAreas .revealArea .circle .text {
          z-index: 1;
          text-align: left;
          font-size: 15px;
          width: auto;
          margin-top: 10px;
          padding: 0 50px;
          text-align: center; }

#interaction {
  opacity: 0;
  visibility: hidden; }
  #interaction .topScreen {
    height: 316px; }
    #interaction .topScreen .media {
      display: inline-block;
      width: 49%; }
    #interaction .topScreen .situation {
      display: inline-block;
      vertical-align: top;
      width: 50%;
      height: 316px;
      position: relative; }
      #interaction .topScreen .situation .scen_counter {
        color: #fff;
        position: absolute;
        top: 12px;
        right: 30px;
        margin-right: 20px;
        font-size: 14px; }
      #interaction .topScreen .situation .partNav {
        bottom: 50px;
        position: absolute;
        right: 0; }
        #interaction .topScreen .situation .partNav .prevBtn {
          display: none;
          position: absolute;
          right: 90px;
          height: 30px;
          width: 30px;
          cursor: pointer;
          background: url("../../models/cultural_competence/img/left_arrow.png") no-repeat center; }
          #interaction .topScreen .situation .partNav .prevBtn:focus, #interaction .topScreen .situation .partNav .prevBtn:hover {
            background: url("../../models/cultural_competence/img/left_arrow_hover.png") no-repeat center; }
        #interaction .topScreen .situation .partNav .nextBtn {
          display: none;
          position: absolute;
          right: 46px;
          height: 30px;
          width: 30px;
          margin-left: 350px;
          cursor: pointer;
          background: url("../../models/cultural_competence/img/right_arrow.png") no-repeat center; }
          #interaction .topScreen .situation .partNav .nextBtn:focus, #interaction .topScreen .situation .partNav .nextBtn:hover {
            background: url("../../models/cultural_competence/img/right_arrow_hover.png") no-repeat center; }
      #interaction .topScreen .situation .part {
        display: inline-block;
        margin: 80px 40px;
        width: 420px; }
        #interaction .topScreen .situation .part .text {
          text-align: left;
          min-height: 100px; }
      #interaction .topScreen .situation .part_circles {
        margin: 245px auto;
        position: absolute;
        width: 510px; }
        #interaction .topScreen .situation .part_circles .part_circle {
          margin-right: 10px;
          height: 14px;
          width: 14px;
          display: inline-block;
          background: url("../../models/cultural_competence/img/circle_empty.png") no-repeat center; }
          #interaction .topScreen .situation .part_circles .part_circle.current {
            background: url("../../models/cultural_competence/img/circle_filled.png") no-repeat center; }
      #interaction .topScreen .situation .circles_label {
        color: #fff;
        position: absolute;
        bottom: 30px;
        font-size: 14px;
        width: 100%;
        pointer-events: none; }
  #interaction .bottomScreen {
    text-align: center;
    background-color: #0c8ad1;
    height: 316px;
    position: relative;
    visibility: hidden; }
    #interaction .bottomScreen .instructions {
      font-size: 16px;
      padding-top: 10px;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      font-style: italic; }
    #interaction .bottomScreen .reviewButton {
      position: absolute;
      height: 116px;
      width: 116px;
      margin-top: 64px;
      margin-left: 48px;
      background: url("../../models/cultural_competence/img/review_circle_btn.png") no-repeat center;
      cursor: pointer; }
    #interaction .bottomScreen .options {
      margin: 10px 150px; }
      #interaction .bottomScreen .options .mainBtn {
        position: static;
        box-shadow: 0 2px 3px rgba(7, 7, 10, 0.3);
        display: inline-block;
        height: 97px;
        margin: 10px;
        padding: 10px;
        width: 162px;
        vertical-align: middle;
        font-size: 18px;
        font-size: 0.8rem;
        line-height: 20px;
        line-height: 1rem; }
        #interaction .bottomScreen .options .mainBtn div {
          display: table;
          height: 100%;
          width: 100%; }
          #interaction .bottomScreen .options .mainBtn div span {
            display: table-cell;
            vertical-align: middle; }
        #interaction .bottomScreen .options .mainBtn.disabled {
          cursor: default; }
        #interaction .bottomScreen .options .mainBtn.viewed {
          color: #0c8ad1;
          border: 1px solid #0c8ad1; }
    #interaction .bottomScreen .mainBtn.nextScen {
      display: block;
      position: absolute;
      bottom: 30px;
      right: 30px; }
      #interaction .bottomScreen .mainBtn.nextScen.disabled {
        cursor: default;
        pointer-events: none;
        border-color: #0c8ad1;
        opacity: 0.5; }
    #interaction .bottomScreen .scrim {
      background: #0c8ad1;
      height: 100%;
      left: 0;
      opacity: 0.8;
      position: absolute;
      top: 50px;
      width: 100%; }

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