@font-face {
  font-family: 'kievit-regular';
  src: url("../fonts/kievitcl_ot-regular.eot");
  src: url("../fonts/kievitcl_ot-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/kievitcl_ot-regular.woff") format("woff"), url("../fonts/kievitcl_ot-regular.ttf") format("truetype"), url("../fonts/kievitcl_ot-regular.svg#kievitcl_ot-regularregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'kievit-bold';
  src: url("../fonts/kievitcl_ot-bold.eot");
  src: url("../fonts/kievitcl_ot-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/kievitcl_ot-bold.woff") format("woff"), url("../fonts/kievitcl_ot-bold.ttf") format("truetype"), url("../fonts/kievitcl_ot-bold.svg#kievitcl_ot-boldbold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'kievit-italic';
  src: url("../fonts/kievitcl_ot-regularitalic.eot");
  src: url("../fonts/kievitcl_ot-regularitalic.eot?#iefix") format("embedded-opentype"), url("../fonts/kievitcl_ot-regularitalic.woff") format("woff"), url("../fonts/kievitcl_ot-regularitalic.ttf") format("truetype"), url("../fonts/kievitcl_ot-regularitalic.svg#kievitcl_otregular_italic") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'kievit-bold-italic';
  src: url("../fonts/kievitcl_ot-bolditalic.eot");
  src: url("../fonts/kievitcl_ot-bolditalic.eot?#iefix") format("embedded-opentype"), url("../fonts/kievitcl_ot-bolditalic.woff") format("woff"), url("../fonts/kievitcl_ot-bolditalic.ttf") format("truetype"), url("../fonts/kievitcl_ot-bolditalic.svg#kievitcl_otbold_italic") format("svg");
  font-weight: normal;
  font-style: normal; }
/*
 *
 * Layout proportion constants
 *
 */
/* hacks */
.clearfix:after {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both; }

/*
 *
 * Overall layout container elements
 *
 */
/* Large-scale layout elements */
.primary_layout_element, #header, #title, #instructions, #activity_wrapper, #feedback, #feedback.supplementaryAudio, #feedbackSupplementaryAudio, #keyboard, #controls {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden; }

.modal_layout_element, .reset_dialog, .pause_dialog, .start_dialog, .help_dialog, .question_dialog, .end_dialog {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10%;
  bottom: 10%;
  max-width: 45rem;
  overflow: hidden;
  margin: 0 auto;
  -webkit-border-top-left-radius: 0.5em;
  -webkit-border-top-right-radius: 0.5em;
  -webkit-border-bottom-right-radius: 0.5em;
  -webkit-border-bottom-left-radius: 0.5em;
  -moz-border-radius-topleft: 0.5em;
  -moz-border-radius-topright: 0.5em;
  -moz-border-radius-bottomright: 0.5em;
  -moz-border-radius-bottomleft: 0.5em;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  border-bottom-left-radius: 0.5em; }

.full_screen_layout_element, .content_disable_mask, .modal_dialog__mask, .modal_dialog__wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden; }

#header {
  top: 0;
  height: 4.7rem;
  z-index: 5; }

#title {
  top: 4.7rem;
  z-index: 9; }

#instructions {
  bottom: 3.86rem;
  z-index: 2; }

#activity_wrapper {
  top: 7.7rem;
  bottom: 3.86rem;
  z-index: 1; }

#feedback {
  bottom: 3.86rem;
  height: 2.25rem;
  z-index: 2; }

#feedback.supplementaryAudio {
  bottom: 7.21rem;
  height: 2.25rem;
  z-index: 2; }

#feedbackSupplementaryAudio {
  bottom: 3.86rem;
  height: 3.35rem;
  z-index: 2; }
  #feedbackSupplementaryAudio .sound_control {
    margin-top: 0.625rem; }

#keyboard {
  bottom: 3.86rem;
  height: 36.35%;
  z-index: 2; }

#controls {
  bottom: 0;
  height: 3.86rem;
  z-index: 3; }

.start_screen#title {
  z-index: 10; }
  .start_screen#title h1 {
    margin: 0.5rem 0px 0.2rem; }
.start_screen#controls {
  z-index: 4;
  margin: 0;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0.5em;
  -webkit-border-bottom-left-radius: 0.5em;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0.5em;
  -moz-border-radius-bottomleft: 0.5em;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0.5em;
  border-bottom-left-radius: 0.5em; }
.start_screen .content_wrapper {
  height: 100%;
  position: relative; }
.start_screen .static_text_content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 2.5rem;
  overflow: auto;
  -webkit-border-top-left-radius: 0.5em;
  -webkit-border-top-right-radius: 0.5em;
  -webkit-border-bottom-right-radius: 0.5em;
  -webkit-border-bottom-left-radius: 0.5em;
  -moz-border-radius-topleft: 0.5em;
  -moz-border-radius-topright: 0.5em;
  -moz-border-radius-bottomright: 0.5em;
  -moz-border-radius-bottomleft: 0.5em;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  border-bottom-left-radius: 0.5em; }
.start_screen .copyright {
  color: #666666;
  z-index: 9999999999999;
  position: fixed;
  left: 10px;
  bottom: 10px;
  overflow: auto; }

.content_disable_mask {
  z-index: 100; }

.modal_dialog__mask {
  z-index: 1; }

/* special classes used to implement screen active area aspect ratio */
.layout_wrapper {
  margin: 0px auto;
  width: 100%;
  max-width: 1144px;
  position: relative; }

.content_wrapper {
  width: 95%;
  max-width: 1020px;
  margin: 0 auto; }

.modal_dialog__wrapper {
  z-index: 10; }
  .modal_dialog__wrapper .static_text_content {
    margin: 0;
    overflow: auto; }
  .modal_dialog__wrapper .title, .modal_dialog__wrapper .static_text_content, .modal_dialog__wrapper .control_caption, .modal_dialog__wrapper .controls {
    position: absolute;
    left: 0rem;
    right: 0rem;
    overflow: hidden; }
  .modal_dialog__wrapper .title {
    top: 0rem; }
  .modal_dialog__wrapper .control_caption, .modal_dialog__wrapper .controls {
    bottom: 0rem; }
  .modal_dialog__wrapper.reset .title, .modal_dialog__wrapper.pause .title {
    height: 10.5rem; }
  .modal_dialog__wrapper.reset .controls, .modal_dialog__wrapper.pause .controls {
    height: 3.125rem; }
  .modal_dialog__wrapper.help .title {
    height: 10.5rem; }
  .modal_dialog__wrapper.help .static_text_content {
    top: 10.5rem;
    bottom: 3.125rem; }
  .modal_dialog__wrapper.help .controls {
    height: 3.125rem; }
  .modal_dialog__wrapper.end .static_text_content {
    top: 0;
    bottom: 3.125rem; }
  .modal_dialog__wrapper.end .controls {
    height: 3.125rem; }

.reset_dialog {
  top: 30%;
  bottom: 30%;
  z-index: 2;
  max-height: 13.625rem; }

.pause_dialog {
  top: 30%;
  bottom: 30%;
  z-index: 2;
  max-height: 13.625rem; }

.start_dialog {
  top: 30%;
  z-index: 2; }
  .start_dialog .static_text_content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 2.5rem;
    overflow: auto;
    -webkit-border-top-left-radius: 0.5em;
    -webkit-border-top-right-radius: 0.5em;
    -webkit-border-bottom-right-radius: 0.5em;
    -webkit-border-bottom-left-radius: 0.5em;
    -moz-border-radius-topleft: 0.5em;
    -moz-border-radius-topright: 0.5em;
    -moz-border-radius-bottomright: 0.5em;
    -moz-border-radius-bottomleft: 0.5em;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em; }

.help_dialog {
  z-index: 2; }

.question_dialog {
  z-index: 2; }

.end_dialog {
  bottom: 14%;
  top: 14%;
  z-index: 2; }

/*
 *
 * Page constituent elements
 *
 */
.help_button__wrapper {
  float: right;
  width: 10.375rem; }
  .help_button__wrapper .help_button {
    margin: 0.3rem auto 0 auto; }

#header .logo_graphic {
  left: 0.9375rem;
  top: 1.75rem;
  position: absolute; }

/* Structural/containing elements */
#header .profile_graphic {
  right: 0.8125rem;
  top: 0.9375rem;
  position: absolute;
  z-index: 10; }

#title .layout_wrapper {
  height: 3rem;
  position: relative;
  top: -3rem; }
#title h1 {
  padding: 0;
  margin: 1.45rem 0 0 0;
  float: left; }

#activity_wrapper .content_wrapper {
  position: relative;
  height: 100%; }

.center_button_set {
  /* You can only have a center button set OR one or both of left and right button sets */
  width: 100%; }

.left_button_set {
  float: left; }

.right_button_set {
  float: right; }

.checkbox_control_wrapper {
  display: inline-block; }

.checkbox_label_wrapper {
  display: inline-block; }

/*
 *
 * Widgets
 *
 */
/* Sound control */
.sound_control {
  width: 100%;
  height: 2.1rem;
  position: relative;
  overflow: hidden;
  padding-bottom: 0.7rem; }
  .sound_control .play_button, .sound_control .pause_button, .sound_control .volume_button, .sound_control .mute_button {
    position: absolute;
    top: 0;
    width: 2.1rem;
    height: 2.1rem; }
  .sound_control .play_button, .sound_control .pause_button {
    left: 0; }
  .sound_control .volume_button, .sound_control .mute_button {
    right: 0; }
  .sound_control .sound_label {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 2.1rem;
    padding-top: 0.5rem; }
  .sound_control .seek_bar {
    position: absolute;
    width: 100%;
    z-index: 999;
    bottom: 0px;
    left: 0px;
    height: 0.7rem;
    background-color: #7fd4d7; }
  .sound_control .ui-slider-horizontal .ui-slider-handle {
    margin-left: -0.525rem;
    width: 1.05rem;
    height: 0.7rem;
    top: 0rem;
    background-color: #666666;
    pointer: cursor; }
  .sound_control .timer {
    position: absolute;
    right: 2.1rem;
    top: 0;
    width: 5rem;
    height: 1.6rem;
    padding-top: 0.5rem; }
  .sound_control .play_caption {
    position: absolute;
    left: 2.1rem;
    top: 0;
    width: auto;
    height: 1rem; }

/* Virtual keyboard */
/* Structured text passage */
.structured_text .word {
  display: inline-block; }
.structured_text .gap--text_entry {
  cursor: pointer;
  display: inline-block;
  padding: 0rem;
  position: relative; }
  .structured_text .gap--text_entry .character_validated_content {
    display: none; }
  .structured_text .gap--text_entry .validation {
    display: none;
    position: absolute;
    z-index: 99;
    right: 0rem;
    top: 0.2rem; }
  .structured_text .gap--text_entry.valid, .structured_text .gap--text_entry.invalid {
    position: relative;
    top: 0.3rem; }
    .structured_text .gap--text_entry.valid input, .structured_text .gap--text_entry.invalid input {
      display: none; }
    .structured_text .gap--text_entry.valid .character_validated_content, .structured_text .gap--text_entry.invalid .character_validated_content {
      margin-top: 0.3rem;
      display: inline-block; }
    .structured_text .gap--text_entry.valid .validation, .structured_text .gap--text_entry.invalid .validation {
      display: inline-block; }
  .structured_text .gap--text_entry.invalid {
    top: 0; }
.structured_text .gap--drop_site {
  width: 6.875rem;
  padding: 0.1rem 0.3rem;
  display: inline-block;
  cursor: pointer;
  position: relative; }
  .structured_text .gap--drop_site.filled {
    width: auto; }
  .structured_text .gap--drop_site .content {
    display: inline-block; }
  .structured_text .gap--drop_site .validation {
    display: none;
    position: absolute;
    z-index: 99;
    right: 0rem;
    top: 0rem; }

/* Draggables */
/* Labels */
.labelling_control .background_image {
  position: absolute;
  height: 100%;
  width: auto; }

.label {
  display: inline-block;
  position: absolute; }
  .label .star {
    position: absolute;
    z-index: 100;
    display: inline-block; }
  .label .content {
    position: absolute;
    left: 0.82rem;
    top: 0rem;
    z-index: 98;
    width: 5.775rem;
    min-height: 0.775rem;
    display: inline-block;
    padding: 0.3rem 1.7rem 0.1rem 1.05rem; }
  .label.focussed .content {
    background-color: #7fd4d7; }
  .label .validation {
    display: none;
    position: absolute;
    z-index: 99;
    width: 1.7rem;
    height: 1.7rem;
    left: 7.7rem; }
  .label.invalid .validation {
    display: inline-block; }
  .label.valid .validation {
    display: inline-block; }

/* Hotspots */
.map_image_layer {
  position: absolute;
  height: 100%;
  width: auto; }

.hotspot {
  display: inline-block;
  position: absolute; }
  .hotspot .disc {
    position: absolute;
    z-index: 100;
    display: inline-block; }
  .hotspot .alias {
    position: absolute;
    left: 1.7rem;
    top: 0rem;
    z-index: 98;
    width: 5.775rem;
    min-height: 0.775rem;
    display: inline-block;
    padding: 0.3rem 1.7rem 0.1rem 1.05rem;
    background-color: #ffffff; }
  .hotspot .hotspot_content_wrapper {
    display: none; }
  .hotspot.active .alias {
    display: none; }
  .hotspot.active .hotspot_content_wrapper {
    position: absolute;
    left: 1.7rem;
    top: 0rem;
    z-index: 1000;
    width: 11.55rem;
    min-height: 0.775rem;
    display: inline-block;
    padding: 0 0 0 0.85rem;
    background-size: 0.85rem 1.7rem; }
  .hotspot.active .hotspot_content {
    background-color: #ffffff; }
  .hotspot.active .hotspot_content.image img {
    width: 100%;
    height: auto;
    display: block; }
  .hotspot.active .hotspot_content.html {
    padding: 0.5rem; }
    .hotspot.active .hotspot_content.html .html_wrapper {
      max-height: 11.55rem;
      overflow: auto; }
  .hotspot.active .hotspot_content.composite.portrait {
    padding: 0.5rem; }
    .hotspot.active .hotspot_content.composite.portrait .html_wrapper {
      width: 50%;
      float: left;
      max-height: 11.55rem;
      overflow: auto; }
    .hotspot.active .hotspot_content.composite.portrait img {
      width: 50%;
      height: auto;
      float: left;
      display: block; }
  .hotspot.active .hotspot_content.composite.landscape {
    padding: 0.5rem; }
    .hotspot.active .hotspot_content.composite.landscape .html_wrapper {
      max-height: 5.775rem;
      overflow: auto; }
    .hotspot.active .hotspot_content.composite.landscape img {
      width: 100%;
      height: auto;
      display: block; }
  .hotspot .close_button {
    width: 0.85rem;
    height: 0.85rem;
    display: block;
    position: absolute;
    right: 0;
    top: 0; }

/* Multiple choice questions */
.multiple_choice__answer {
  position: relative;
  margin-bottom: 0.9rem; }
  .multiple_choice__answer .checkbox_wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 1rem;
    height: auto; }
  .multiple_choice__answer label {
    margin: 0 2rem 0 2.8rem;
    display: block; }
  .multiple_choice__answer .validation {
    position: absolute;
    right: 0;
    top: -0.2rem;
    display: none;
    z-index: 99; }
  .multiple_choice__answer.valid .validation {
    display: inline-block; }
  .multiple_choice__answer.invalid .validation {
    display: inline-block; }

/* Team select control */
.team_select_item {
  width: 24%;
  display: inline-block; }

.team_swatch {
  display: inline-block;
  width: 4.3rem; }

/* Virtual keyboard */
.virtualKeyboard {
  overflow: visible !important; }
  .virtualKeyboard #hideShowButton {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #C4C6C8;
    border: none;
    margin-top: -2rem;
    height: 2rem;
    width: 4rem;
    text-align: center; }
    .virtualKeyboard #hideShowButton:focus {
      outline: none; }
    .virtualKeyboard #hideShowButton:hover {
      background-color: #7fd4d7;
      color: #ffffff; }
  .virtualKeyboard .content_wrapper {
    line-height: 0;
    position: relative;
    top: 1rem; }
  .virtualKeyboard .keyRow {
    display: inline-block;
    width: 100%;
    height: auto;
    line-height: 0; }
  .virtualKeyboard .space {
    height: 0;
    width: 6%;
    margin: 0.25%;
    padding-top: 6%;
    display: inline-block;
    position: relative; }
  .virtualKeyboard .halfSpace {
    height: 0;
    width: 3.125%;
    margin: 0.25% 0;
    padding-top: 6%;
    display: inline-block;
    position: relative; }
  .virtualKeyboard .key {
    height: 0;
    width: 6%;
    margin: 0.25%;
    padding-top: 6%;
    display: inline-block;
    position: relative; }
    .virtualKeyboard .key.right {
      float: right; }
    .virtualKeyboard .key input {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      min-width: 0;
      display: block; }
    .virtualKeyboard .key.wide1_5 {
      width: 9.25%; }
    .virtualKeyboard .key.wide2 {
      width: 12.25%; }
    .virtualKeyboard .key.wide3 {
      width: 18.25%; }
    .virtualKeyboard .key.wide4 {
      width: 24.25%; }
    .virtualKeyboard .key.wide5 {
      width: 30.25%; }
    .virtualKeyboard .key.wide6 {
      width: 36.25%; }

/* Timer */
.timer {
  width: 100%;
  height: 2.625rem;
  position: relative; }
  .timer .duration__wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 2.625rem;
    height: 2.625rem;
    text-align: center; }
  .timer .duration {
    display: inline-block; }
  .timer .play_button, .timer .pause_button {
    position: absolute;
    width: 2.625rem;
    height: 2.625rem;
    right: 0;
    top: 0;
    min-width: 0;
    background-size: 2.625rem 2.625rem; }

.timer_bar {
  position: relative;
  width: 100%;
  height: 2.625rem; }
  .timer_bar .timer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; }
  .timer_bar.score .title {
    background-color: #666666;
    color: #ffffff;
    font-size: 1.4rem;
    letter-spacing: 0.03rem;
    padding-top: 0.8rem;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 5.4rem;
    bottom: 0;
    z-index: 3; }
  .timer_bar.score .score {
    background-color: #979797;
    color: #ffffff;
    font-size: 1.4rem;
    letter-spacing: 0.03rem;
    padding-top: 0.7rem;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: 5.4rem;
    top: 0;
    width: 2.4rem;
    bottom: 0;
    z-index: 2; }
  .timer_bar.score .timer {
    position: absolute;
    left: 7.8rem;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    z-index: 1; }

.stopwatch__wrapper .stopwatch {
  display: inline-block;
  width: 2.71rem;
  height: 3.13rem;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain; }

/*
 *
 * Layout proportion constants
 *
 */
/*
 *
 * Overall layout container elements
 *
 */
/* Large-scale layout elements */
.correct {
  color: #228b22; }

.incorrect {
  color: #da0000; }

/*
 *
 * General settings
 *
 */
.center {
  text-align: center; }

/*
 *
 * Page constituent elements
 *
 */
html {
  font-family: "kievit-regular";
  background-color: #eaeaea; }

h1 {
  font-family: "kievit-regular";
  font-size: 1.87rem;
  letter-spacing: 0.05rem; }

h2 {
  font-family: "kievit-regular";
  font-size: 1.45rem;
  letter-spacing: 0.05rem; }

h3 {
  font-family: "kievit-bold";
  font-size: 1.4rem;
  line-height: 1.625rem; }

p, li {
  font-family: "kievit-regular";
  font-size: 1.4rem;
  line-height: 1.625rem;
  margin: 0; }

.image_wrapper img {
  width: 100%;
  height: auto; }
.image_wrapper .sound_control {
  margin: 0.2rem 0 0 0; }

input[type=checkbox] {
  display: none;
  cursor: pointer; }
  input[type=checkbox][disabled] {
    cursor: default; }

input[type=checkbox] + label {
  background-image: url("../images/checkbox_empty.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 1.7rem 1.7rem;
  height: 1.7rem;
  width: 1.7rem;
  display: block;
  padding: 0 0 0 0px;
  margin: 0; }

input[type=checkbox]:checked + label {
  background-image: url("../images/checkbox_full.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 1.7rem 1.7rem;
  height: 1.7rem;
  width: 1.7rem;
  padding: 0 0 0 0px;
  margin: 0; }

input[type=radio] {
  display: none;
  cursor: pointer; }
  input[type=radio][disabled] {
    cursor: default; }

input[type=radio] + label {
  background-image: url("../images/radio_empty.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 1.7rem 1.7rem;
  height: 1.7rem;
  width: 1.7rem;
  display: block;
  padding: 0 0 0 0px;
  margin: 0; }

input[type=radio]:checked + label {
  background-image: url("../images/radio_full.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 1.7rem 1.7rem;
  height: 1.7rem;
  width: 1.7rem;
  padding: 0 0 0 0px;
  margin: 0; }

input[type=button] {
  font-family: "kievit-regular";
  font-size: 1.2rem;
  line-height: 2.4rem;
  color: #ffffff;
  background-color: #7f7f7f;
  border-width: 0;
  height: 2.125rem;
  min-width: 8.875rem;
  padding: 0; }
  input[type=button]:hover {
    background-color: #60a8ad;
    color: #ffffff; }
  input[type=button][disabled] {
    background-color: #dedede; }
    input[type=button][disabled]:hover {
      background-color: #dedede; }
  input[type=button].correct {
    background-color: #228b22;
    color: #ffffff; }
  input[type=button].incorrect {
    background-color: #da0000;
    color: #ffffff; }

.checkbox_control_wrapper {
  cursor: pointer; }

.checkbox_label_wrapper {
  cursor: pointer; }

.play_button, .pause_button, .volume_button, .mute_button {
  background-color: #666666;
  color: #ffffff;
  font-size: 0.6rem;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 2.1rem 2.1rem; }

.play_button {
  background-image: url("../images/audio_play.svg"); }
  .play_button:hover {
    background-image: url("../images/audio_play_focus.svg"); }

.pause_button {
  background-image: url("../images/audio_pause.svg"); }
  .pause_button:hover {
    background-image: url("../images/audio_pause_focus.svg"); }

.volume_button {
  background-image: url("../images/audio_volume.svg"); }
  .volume_button:hover {
    background-image: url("../images/audio_volume_focus.svg"); }

.mute_button {
  background-image: url("../images/audio_mute.svg"); }
  .mute_button:hover {
    background-image: url("../images/audio_mute_focus.svg"); }

.help_button {
  background-image: url("../images/parliamo-banner-help.svg");
  background-repeat: repeat-x;
  background-size: 4.4625rem 2.125rem;
  background-position: top left;
  padding: 0;
  margin: 0;
  display: block;
  width: 2.125rem;
  height: 2.125rem;
  cursor: pointer; }
  .help_button:hover {
    background-position: top right; }

.center_button_set {
  /* You can only have a center button set OR one or both of left and right button sets */
  padding-top: 0.875rem;
  text-align: center; }

.left_button_set {
  padding-top: 0.875rem;
  text-align: left; }

.right_button_set {
  padding-top: 0.875rem;
  text-align: right; }

.question_count {
  font-family: "kievit-regular";
  font-size: 1.2rem;
  line-height: 2.4rem;
  background-color: #eaeaea;
  color: #424242;
  height: 1.625rem;
  display: inline-block;
  vertical-align: top;
  padding: 0rem 1rem 0.5rem 1rem;
  border-width: 0 0.17rem 0 0;
  border-style: solid;
  border-color: #ffffff; }

.static_text_content {
  margin: 2.4rem 0 1.4rem 0;
  /* stolen from http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/ */
  /* */ }
  .static_text_content h3 {
    margin: 0.4rem 0;
    padding: 0;
    font-size: 1.4rem; }
  .static_text_content * + *, .static_text_content p {
    margin: 0.4rem 0;
    padding: 0;
    font-size: 1.1rem; }
  .static_text_content table {
    margin: 0.4rem 0;
    padding: 0;
    width: 100%; }
  .static_text_content ol {
    counter-reset: li;
    /* Initiate a counter */
    margin-left: 0;
    /* Remove the default left margin */
    padding-left: 0;
    /* Remove the default left padding */
    margin: 0.6rem 0; }
  .static_text_content ol > li {
    position: relative;
    /* Create a positioning context */
    margin: 0.3rem 0 0.3rem 0.8rem;
    /* Give each list item a left margin to make room for the numbers */
    padding: 0 0.5rem;
    /* Add some spacing around the content */
    list-style: none;
    /* Disable the normal item numbering */
    font-size: 1.1rem; }
  .static_text_content ol > li:before {
    content: counter(li);
    /* Use the counter as content */
    counter-increment: li;
    /* Increment the counter by 1 */
    /* Position and style the number */
    position: absolute;
    left: -0.8rem;
    width: 1rem;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    text-align: left;
    margin-right: 0.8rem; }
  .static_text_content li ol,
  .static_text_content li ul {
    margin-top: 6px; }
  .static_text_content ol ol li:last-child {
    margin-bottom: 0; }

.copyright {
  color: #979797; }

.validation_icon {
  display: inline-block;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 1.7rem 1.7rem;
  height: 1.7rem;
  width: 1.7rem; }
  .validation_icon.valid {
    background-image: url("../images/labelling-dropsite-valid.svg"); }
  .validation_icon.invalid {
    background-image: url("../images/labelling-dropsite-invalid.svg"); }
  .validation_icon.large {
    height: 8.5rem;
    width: 8.5rem;
    background-size: cover;
    background-color: #ffffff;
    border-radius: 50%; }

/* Structural/containing elements */
#header {
  background: url("../images/parliamo_branding_dot_mask.svg"), url("../images/parliamo_branding_continuous_dots.svg"), #979797;
  background-repeat: no-repeat, repeat-x;
  background-size: auto 4.7rem, auto 4.7rem;
  background-position: top center, top center; }

#header .logo_graphic {
  width: 21.6rem;
  height: 3.2156rem;
  left: 0.9375rem;
  top: 0.75rem;
  position: absolute; }

#header .profile_graphic {
  width: auto;
  height: 4.7rem;
  right: 0.8125rem;
  top: 0.6rem;
  position: absolute;
  z-index: 10; }

#title {
  background-color: #7f7f7f; }
  #title.decorated {
    background-image: url("../images/parliamo-header_pattern-01.svg");
    background-repeat: repeat-x;
    background-size: 12.875rem 0.5rem;
    background-position: bottom left; }
  #title h1 {
    color: #FFFFFF;
    padding: 0;
    margin: 0.5rem 0px 0.7rem;
    float: left;
    font-size: 1.75rem; }

#instructions, #activity_wrapper {
  background-color: #eaeaea; }

#controls {
  color: #ffffff;
  background-color: #bebebe;
  -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.7); }

#feedback p {
  color: #ffffff;
  font-size: 1.25rem;
  margin: 0;
  padding: 0.6rem 0;
  text-align: center; }
#feedback.valid {
  background-color: #228b22; }
#feedback.invalid {
  background-color: #da0000; }
#feedback.try_again {
  background-color: #da0000; }

#activity_wrapper .content_wrapper {
  position: relative;
  height: 100%; }

.modal_dialog__mask {
  background-color: rgba(0, 0, 0, 0.7); }

.start_screen_footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 3.125rem;
  z-index: 4;
  background-color: #bebebe;
  padding-bottom: 0.875rem; }

.modal_dialog__wrapper {
  height: 100%; }
  .modal_dialog__wrapper .title {
    background-color: #979797; }
    .modal_dialog__wrapper .title h1 {
      margin: 0 auto;
      padding: 4.375rem 0 0 0;
      font-size: 1.6rem;
      color: #ffffff;
      font-family: "kievit-regular";
      text-align: center; }
  .modal_dialog__wrapper .control_caption {
    background-color: #666666;
    color: #ffffff;
    text-align: center;
    padding: 0.75rem; }
    .modal_dialog__wrapper .control_caption .content_wrapper {
      font-size: 1.25rem; }
  .modal_dialog__wrapper .controls {
    background-color: #bebebe;
    text-align: center;
    padding-top: 0.875rem; }
  .modal_dialog__wrapper .static_text_content {
    background-color: #eaeaea;
    padding: 1.9rem 2.9rem 4.6875rem 2.9rem;
    height: auto; }
  .modal_dialog__wrapper .end_dialog {
    color: #7f7f7f; }
    .modal_dialog__wrapper .end_dialog .static_text_content {
      background-color: #eaeaea; }
      .modal_dialog__wrapper .end_dialog .static_text_content h1 {
        margin: 1.5rem auto 0 auto;
        padding: 0;
        font-size: 2rem;
        font-family: "kievit-regular";
        text-align: center; }
      .modal_dialog__wrapper .end_dialog .static_text_content p {
        font-size: 1.4rem;
        color: #7f7f7f;
        text-align: center; }

/*
 *
 * Widgets
 *
 */
/* Sound control */
.sound_control {
  background-color: #bebebe; }
  .sound_control .ui-slider-horizontal .ui-slider-handle {
    cursor: pointer; }
    .sound_control .ui-slider-horizontal .ui-slider-handle:hover {
      background-color: #60a8ad; }

.sound_label {
  color: #666666;
  letter-spacing: 0.09rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 100;
  line-height: 1rem; }

.timer {
  color: #666666;
  font-size: 1.25rem;
  line-height: 1.25rem;
  letter-spacing: 0.09rem;
  text-align: center; }

.sound_control .play_caption {
  padding: 0.5rem;
  font-size: 1.25rem; }

/* Virtual keyboard */
.keyboard {
  text-align: center; }
  .keyboard .key {
    display: inline-block;
    width: 0.7rem;
    margin: 0.2rem;
    padding: 1.5rem;
    min-width: 0; }

/* Structured text passage */
.character_validated_content {
  color: #228b22; }
  .character_validated_content .incorrect {
    color: #da0000; }

.structured_text .word {
  font-size: 1.4rem;
  letter-spacing: 0.03rem;
  line-height: 2.125rem;
  margin: 0 0.05rem; }
.structured_text .whitespace {
  width: 0.4rem;
  display: inline-block; }
.structured_text .word + .word::before {
  content: ""; }
.structured_text .gap--text_entry {
  height: 1.7rem;
  padding: 0rem 0.2rem 0.5rem 0.6rem; }
  .structured_text .gap--text_entry input {
    width: 12rem;
    font-size: 1.4rem;
    letter-spacing: 0.03rem;
    text-align: center; }
  .structured_text .gap--text_entry .character_validated_content {
    width: 7rem;
    font-size: 1.4rem;
    letter-spacing: 0.03rem;
    text-align: center; }
  .structured_text .gap--text_entry .validation {
    background-repeat: no-repeat;
    background-size: 1.7rem 1.7rem;
    background-image: none;
    width: 1.7rem;
    height: 1.7rem; }
  .structured_text .gap--text_entry.invalid, .structured_text .gap--text_entry.valid {
    background-color: #ffffff;
    padding-bottom: 0.4rem; }
  .structured_text .gap--text_entry.valid .validation {
    background-image: url("../images/labelling-dropsite-valid.svg"); }
  .structured_text .gap--text_entry.invalid .validation {
    background-image: url("../images/labelling-dropsite-invalid.svg"); }
.structured_text .gap--drop_site {
  background-color: #ffffff; }
  .structured_text .gap--drop_site.focussed {
    color: #ffffff;
    background-color: #60a8ad; }
  .structured_text .gap--drop_site .content {
    font-size: 1.4rem;
    line-height: 1.625rem;
    height: 1.625rem;
    letter-spacing: 0.03rem;
    margin: 0 0.05rem; }
  .structured_text .gap--drop_site.valid, .structured_text .gap--drop_site.invalid {
    margin-right: 0.3rem;
    padding-right: 1.7rem; }
    .structured_text .gap--drop_site.valid .validation, .structured_text .gap--drop_site.invalid .validation {
      display: inline-block; }
  .structured_text .gap--drop_site.valid .validation {
    background-image: url("../images/labelling-dropsite-valid.svg"); }
  .structured_text .gap--drop_site.invalid .validation {
    background-image: url("../images/labelling-dropsite-invalid.svg"); }
  .structured_text .gap--drop_site .validation {
    background-repeat: no-repeat;
    background-size: 1.7rem 1.7rem;
    background-image: none;
    width: 1.7rem;
    height: 1.7rem; }

/* Draggables */
.draggables {
  text-align: right;
  background-image: url("../images/parliamo-separator-dashed-line.svg");
  background-repeat: repeat-y;
  background-size: 0.31rem auto; }

.draggable {
  display: inline-block;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  width: 6.875rem;
  text-align: left;
  background-color: #ffffff;
  margin-bottom: 0.625rem;
  font-size: 1.4rem;
  letter-spacing: 0.03rem;
  line-height: 1.625rem; }
  .draggable.focussed {
    background-color: #60a8ad;
    color: #ffffff; }

/* Labels */
.labelling_control .background_image {
  border: #ffffff 0.17rem solid; }

.label {
  cursor: pointer; }
  .label .star {
    background-image: url("../images/labelling-star.svg");
    background-repeat: no-repeat;
    background-size: 1.7rem 1.7rem;
    width: 1.7rem;
    height: 1.7rem; }
    .label .star:hover {
      background-image: url("../images/labelling-star-hover.svg"); }
  .label.filled .star {
    background-image: url("../images/labelling-star-occupied.svg"); }
  .label .content {
    background-color: #ffffff;
    text-align: left;
    font-size: 1.4rem; }
  .label.focussed .content {
    background-color: #7fd4d7; }
  .label .validation {
    background-repeat: no-repeat;
    background-size: 1.7rem 1.7rem;
    background-image: none;
    width: 1.7rem;
    height: 1.7rem; }
  .label.invalid .validation {
    background-image: url("../images/labelling-dropsite-invalid.svg"); }
  .label.valid .validation {
    background-image: url("../images/labelling-dropsite-valid.svg"); }

/* Hotspots */
.map_image_layer {
  border: #ffffff 0.17rem solid; }

.hotspot_layer {
  position: relative;
  left: 0.17rem;
  top: 0.17rem; }

.hotspot {
  cursor: pointer; }
  .hotspot .disc {
    background-image: url("../images/disc.svg");
    background-repeat: no-repeat;
    background-size: 1.7rem 1.7rem;
    width: 1.7rem;
    height: 1.7rem; }
  .hotspot:hover .disc {
    background-image: url("../images/disc-hover.svg"); }
  .hotspot .hotspot_content_wrapper {
    background-image: url("../images/hotspot_content_arrow.svg");
    background-repeat: no-repeat;
    background-position: left top; }
  .hotspot .hotspot_content {
    background-color: #ffffff;
    text-align: left;
    font-size: 1.4rem;
    line-height: 1.625rem;
    letter-spacing: 0.03rem; }
  .hotspot .close_button {
    background-image: url("../images/hotspot_close_button.svg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain; }

/* Multiple choice questions */
.multiple_choice__answer label {
  font-size: 1.8rem;
  letter-spacing: 0.03rem;
  line-height: 2.1rem;
  cursor: pointer; }
.multiple_choice__answer .validation {
  background-image: none;
  background-repeat: no-repeat;
  background-size: 1.7rem 1.7rem;
  height: 1.7rem;
  width: 1.7rem; }
.multiple_choice__answer.valid .validation {
  background-image: url("../images/labelling-dropsite-valid.svg"); }
.multiple_choice__answer.invalid .validation {
  background-image: url("../images/labelling-dropsite-invalid.svg"); }

/* Team select control */
.team_select_control {
  background-color: #ffffff;
  margin: 1.4rem 0; }
  .team_select_control h4 {
    background-color: #666666;
    color: #ffffff;
    font-weight: normal;
    text-align: center;
    padding: 0.5rem 0 0.3rem;
    letter-spacing: 0.05rem;
    margin: 0;
    font-size: 1.25rem; }
  .team_select_control input[type="checkbox"] + label {
    border: #7f7f7f 0.25rem solid;
    cursor: pointer;
    position: relative;
    top: 0.75rem;
    display: inline-block; }

.team_select_item {
  background-color: #ffffff;
  text-align: center;
  padding: 0.3rem 0;
  margin: 0; }

.team_swatch {
  color: #ffffff;
  font-size: 1.125rem;
  padding: 0.5rem 0 0.3rem;
  text-align: center;
  margin: 0.2rem;
  cursor: pointer; }

/* Virtual keyboard */
.virtualKeyboard {
  background-color: #C4C6C8; }
  .virtualKeyboard .key input {
    font-family: "kievit-regular";
    font-size: 1.5vw;
    color: #ffffff;
    background-color: #1f1f1e;
    border-radius: 0.4vw;
    border-color: #1f1f1e;
    border-width: 0;
    border-style: solid; }
  .virtualKeyboard .key.unicodeGlyph input {
    font-family: "tahoma"; }
  .virtualKeyboard .key:hover input {
    background-color: #60a8ad; }
  .virtualKeyboard .key.active input {
    font-family: "kievit-italic";
    color: #7fd4d7; }
    .virtualKeyboard .key.active input:hover {
      color: #ffffff; }

/* Timer */
.timer {
  background-color: #C4C6C8; }
  .timer .duration {
    color: #ffffff;
    font-size: 2rem;
    line-height: normal;
    padding-top: 0.3125rem; }

.timer_bar {
  position: relative;
  width: 100%;
  height: 2.625rem; }
  .timer_bar .timer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; }
  .timer_bar.score .title {
    background-color: #666666;
    color: #ffffff;
    font-size: 1.4rem;
    letter-spacing: 0.03rem;
    padding-top: 0.8rem;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 5.4rem;
    bottom: 0;
    z-index: 3; }
  .timer_bar.score .score {
    background-color: #979797;
    color: #ffffff;
    font-size: 1.4rem;
    letter-spacing: 0.03rem;
    padding-top: 0.7rem;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: 5.4rem;
    top: 0;
    width: 2.4rem;
    bottom: 0;
    z-index: 2; }
  .timer_bar.score .timer {
    position: absolute;
    left: 7.8rem;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    z-index: 1; }

/* Cloze control classes */
/*
 *
 * Layout proportion constants
 *
 */
#activity_wrapper.cloze .structured_text {
  left: 0rem;
  position: absolute;
  right: 12.0625rem;
  top: 2.5rem;
  bottom: 2.5rem;
  overflow: auto; }
  #activity_wrapper.cloze .structured_text.compact_layout {
    left: 10.125rem; }
#activity_wrapper.cloze .prompt_wrapper {
  left: 0rem;
  bottom: 2.5rem;
  position: absolute;
  width: 7.625rem;
  top: 2.5rem;
  padding: 0; }
  #activity_wrapper.cloze .prompt_wrapper .image_wrapper img {
    width: 100%;
    height: auto; }
#activity_wrapper.cloze .draggables {
  width: 9.5625rem;
  right: 0rem;
  top: 2.5rem;
  bottom: 2.5rem;
  position: absolute;
  overflow: auto; }

/* Labelling control classes */
/*
 *
 * Layout proportion constants
 *
 */
#activity_wrapper.labelling .labelling_control {
  right: 12.0625rem;
  position: absolute;
  left: 0rem;
  top: 2.5rem;
  bottom: 2.5rem; }
#activity_wrapper.labelling .draggables {
  width: 9.5625rem;
  position: absolute;
  right: 0rem;
  top: 2.5rem;
  bottom: 2.5rem;
  background-image: none; }
#activity_wrapper.labelling .draggable {
  text-align: center; }
#activity_wrapper.labelling .label .content {
  text-align: center; }

/*
 *
 * Layout proportion constants
 *
 */
#activity_wrapper.multiple_choice .multiple_choice__wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.5rem;
  bottom: 2.5rem; }
  #activity_wrapper.multiple_choice .multiple_choice__wrapper.compact_layout {
    position: absolute;
    left: 57%;
    border-color: #ffffff;
    background-image: url("../images/parliamo-separator-dashed-line.svg");
    background-repeat: repeat-y;
    background-size: 0.31rem auto;
    overflow: auto;
    padding-left: 1.2rem; }
#activity_wrapper.multiple_choice .prompt_wrapper {
  position: absolute;
  left: 0;
  top: 2.5rem;
  bottom: 2.5rem;
  right: 43%;
  overflow: auto;
  padding-right: 1.2rem; }
  #activity_wrapper.multiple_choice .prompt_wrapper .static_text_content {
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: 0.03rem;
    line-height: 2.1rem; }
    #activity_wrapper.multiple_choice .prompt_wrapper .static_text_content p, #activity_wrapper.multiple_choice .prompt_wrapper .static_text_content li {
      font-size: 1.8rem;
      letter-spacing: 0.03rem;
      line-height: 2.1rem; }
  #activity_wrapper.multiple_choice .prompt_wrapper .sound_control {
    margin: 1.1rem 0; }
  #activity_wrapper.multiple_choice .prompt_wrapper .image_wrapper {
    width: 35%;
    position: relative;
    float: left;
    margin-right: 1.1rem; }
    #activity_wrapper.multiple_choice .prompt_wrapper .image_wrapper .sound_control {
      margin: 0.2rem 0 0 0; }

/*
 *
 * Layout proportion constants
 *
 */
/* The question dialog */
.modal_dialog__wrapper.NAC_question .title {
  height: 10.5rem; }
.modal_dialog__wrapper.NAC_question .static_text_content {
  top: 0rem;
  bottom: 6.5rem; }
  .modal_dialog__wrapper.NAC_question .static_text_content .content_wrapper {
    font-size: 2.5rem;
    text-align: center; }
.modal_dialog__wrapper.NAC_question .control_caption {
  height: 2.25rem;
  bottom: 3.86rem; }
.modal_dialog__wrapper.NAC_question .controls {
  height: 3.86rem; }

.NAC_question_image {
  display: block;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 1rem;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  background-position: top center; }

/* The game status bar at the top of the screen */
.NAC_game_status {
  margin: 0;
  text-align: center;
  color: #ffffff;
  font-size: 1.25rem;
  letter-spacing: 0.05rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.4rem; }
  .NAC_game_status.draw {
    background-color: #ff8c00; }

/* The game board */
#activity_wrapper.noughts_and_crosses .content_wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.1rem;
  bottom: 0;
  height: auto; }

.NAC_game_board {
  position: absolute;
  left: 0;
  top: 0.5rem;
  right: 0;
  bottom: 0.5rem;
  text-align: center; }

.NAC_board_tile {
  cursor: pointer;
  margin: 0.4%; }
  .NAC_board_tile.unoccupied {
    background-color: #bebebe; }
    .NAC_board_tile.unoccupied:hover {
      background-color: #60a8ad; }

.three .NAC_board_tile {
  height: 30%; }

.four .NAC_board_tile {
  height: 22%; }

/*
 *
 * Layout proportion constants
 *
 */
body {
  overflow: hidden; }

#activity_wrapper.type_in {
  overflow: hidden; }
  #activity_wrapper.type_in .structured_text {
    margin-top: 5rem; }

/*
 *
 * Layout proportion constants
 *
 */
#activity_wrapper.word_race .answer {
  color: #228b22; }
  #activity_wrapper.word_race .answer .incorrect {
    color: #da0000; }
#activity_wrapper.word_race .timer_bar {
  position: absolute;
  top: 2.5rem;
  left: 0;
  right: 10rem;
  width: auto; }
#activity_wrapper.word_race .stopwatch__wrapper {
  position: absolute;
  right: 2.5rem;
  top: 2.5rem;
  width: 5rem;
  height: 5rem; }
#activity_wrapper.word_race .stopwatch {
  position: absolute;
  width: auto;
  height: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }
#activity_wrapper.word_race .WR_question_wrapper {
  display: inline-block;
  position: absolute;
  top: 6.375rem;
  left: 0;
  right: 0;
  bottom: 2.5rem; }
#activity_wrapper.word_race .WR_question {
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.5rem;
  letter-spacing: 0.03rem;
  position: absolute;
  left: 0;
  right: 40%;
  top: 0;
  height: 1.625rem; }
#activity_wrapper.word_race .WR_prompt {
  position: absolute;
  width: 30%;
  top: 2.5rem;
  bottom: 62.35%;
  right: 0; }
  #activity_wrapper.word_race .WR_prompt.text {
    text-align: right;
    font-size: 3.2rem;
    margin-top: 0.6rem; }
  #activity_wrapper.word_race .WR_prompt.image {
    text-align: center;
    font-size: 3.2rem;
    margin-top: 0.6rem;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right; }
#activity_wrapper.word_race .WR_answer {
  position: absolute;
  left: 0;
  right: 40%;
  height: 3rem;
  top: 9.125rem;
  padding-bottom: 2.5rem;
  text-align: center;
  font-size: 3.2rem;
  background-color: #ffffff; }

.WR_table__question_number {
  width: 20%; }

.WR_table__question {
  width: 25%; }

.WR_table__equals {
  width: 5%;
  text-align: center; }

.WR_table__answer {
  width: 25%; }

.WR_table__score {
  width: 10%; }

.WR_validation_icon {
  display: inline-block;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 1.7rem 1.7rem;
  height: 1.7rem;
  width: 1.7rem; }
  .WR_validation_icon.valid {
    background-image: url("../images/labelling-dropsite-valid.svg"); }
  .WR_validation_icon.invalid {
    background-image: url("../images/labelling-dropsite-invalid.svg"); }
  .WR_validation_icon.large {
    height: 6rem;
    width: 6rem;
    background-image: url("../images/parliamo-correct.svg");
    background-size: cover;
    background-color: #ffffff;
    border-radius: 50%; }

.end_dialog .static_text_content h2 {
  margin-top: 2rem; }

.WR_summary_table_image {
  width: auto;
  height: 1.5rem; }

/*
 *
 * Layout proportion constants
 *
 */
.LC_table_wrapper {
  position: absolute;
  top: 2.5rem;
  bottom: 7rem;
  left: 0;
  right: 0;
  text-align: center; }

.LC_question_column {
  width: 30%;
  display: inline-block;
  vertical-align: top;
  height: 100%; }

.LC_recording_column {
  width: 30%;
  display: inline-block;
  vertical-align: top;
  height: 100%; }

.LC_recording {
  margin: 0;
  padding: 0.5rem;
  background-color: #979797; }
  .LC_recording .sound_control {
    width: 80%;
    margin: 0.3rem auto; }

.LC_recording--empty {
  height: 3.1rem;
  margin: 0;
  padding: 0; }

.LC_question {
  height: 2.975rem;
  font-size: 1.4rem;
  line-height: 1.625rem;
  letter-spacing: 0.03rem;
  overflow: hidden;
  position: relative;
  top: 0.7875rem; }

.LC_answer_item_wrapper {
  display: inline-block;
  width: 7.7rem;
  height: 2.375rem;
  background-color: #C4C6C8;
  text-align: center;
  cursor: pointer; }
  .LC_answer_item_wrapper img {
    height: 100%;
    width: auto; }
  .LC_answer_item_wrapper .LC_answer_item {
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1.625rem;
    letter-spacing: 0.03rem;
    text-align: center;
    width: 6rem;
    height: 1.625rem;
    overflow: hidden;
    position: relative;
    top: 0.7rem; }
  .LC_answer_item_wrapper .validation_icon {
    display: none; }
  .LC_answer_item_wrapper.valid, .LC_answer_item_wrapper.invalid {
    width: 8.075rem;
    padding: 0.375rem 0 0 0.375rem;
    text-align: left; }
    .LC_answer_item_wrapper.valid .validation_icon, .LC_answer_item_wrapper.invalid .validation_icon {
      display: inline-block; }

.LC_answer_container {
  width: 100%;
  height: 2.375rem;
  margin: 0; }
  .LC_answer_container:nth-child(even) {
    background-color: #eaeaea; }
    .LC_answer_container:nth-child(even) .LC_answer_item_wrapper {
      background-color: #eaeaea; }
  .LC_answer_container:nth-child(odd) {
    background-color: #C4C6C8; }
    .LC_answer_container:nth-child(odd) .LC_answer_item_wrapper {
      background-color: #C4C6C8; }
  .LC_answer_container .LC_answer_item_wrapper {
    display: block;
    padding: 0;
    width: 100%;
    height: 100%; }

.LC_unassigned_answers {
  background-color: #dedede;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.5rem;
  height: 5rem; }
  .LC_unassigned_answers .LC_answer_item_wrapper {
    margin: 0.3rem;
    vertical-align: middle; }

/*
 *
 * Layout proportion constants
 *
 */
.map_wrapper {
  position: absolute;
  left: 0;
  top: 2.5rem;
  right: 12.5rem;
  bottom: 2.5rem; }
  .map_wrapper .map_image_layer {
    position: absolute;
    left: 0;
    top: 0; }
  .map_wrapper.constrain_width .map_image_layer {
    width: 100%;
    height: auto; }
  .map_wrapper.constrain_height .map_image_layer {
    height: 100%;
    width: auto; }

.map_controls {
  position: absolute;
  right: 0;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 10rem; }
  .map_controls .checkbox_control_wrapper {
    width: 1.7rem; }
  .map_controls .checkbox_label_wrapper {
    width: 7.8rem; }

/*
 *
 * Layout proportion constants
 *
 */
#activity_wrapper.sorting {
  overflow-y: auto; }
  #activity_wrapper.sorting .content_wrapper .dragHolder {
    margin-top: 2.5rem;
    height: 2.1rem;
    padding: 1rem 1rem 1.7rem 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background-color: #C4C6C8; }
    #activity_wrapper.sorting .content_wrapper .dragHolder .draggable {
      background-color: #ffffff;
      color: #7f7f7f;
      cursor: pointer;
      display: inline-block;
      font-size: 1rem;
      height: auto;
      line-height: 1.2rem;
      margin: 0.5%;
      text-align: left;
      width: 18%;
      padding: 0;
      z-index: 101; }
      #activity_wrapper.sorting .content_wrapper .dragHolder .draggable:hover {
        background-color: #7fd4d7; }
        #activity_wrapper.sorting .content_wrapper .dragHolder .draggable:hover .soundItem .sound_control div .sound_label {
          background-color: #7fd4d7; }
        #activity_wrapper.sorting .content_wrapper .dragHolder .draggable:hover.active {
          background-color: #60a8ad; }
          #activity_wrapper.sorting .content_wrapper .dragHolder .draggable:hover.active .soundItem .sound_control div .sound_label {
            background-color: #60a8ad; }
      #activity_wrapper.sorting .content_wrapper .dragHolder .draggable .validation {
        background-image: none;
        background-repeat: no-repeat;
        background-size: 1rem 1rem;
        display: none;
        float: right;
        height: 1rem;
        width: 2rem; }
      #activity_wrapper.sorting .content_wrapper .dragHolder .draggable .label {
        margin: 4px 0 4px 4px;
        position: relative; }
      #activity_wrapper.sorting .content_wrapper .dragHolder .draggable .validation {
        background-image: none;
        position: absolute;
        background-size: 1.5rem 1.5rem;
        display: none;
        background-repeat: no-repeat;
        height: 2rem;
        width: 2rem;
        right: 0px;
        top: 2px; }
      #activity_wrapper.sorting .content_wrapper .dragHolder .draggable .soundItem .sound_control div .sound_label {
        background-color: #ffffff;
        text-align: left; }
      #activity_wrapper.sorting .content_wrapper .dragHolder .draggable.invalid .validation {
        background-image: url("../images/labelling-dropsite-invalid.svg");
        display: inline-block; }
      #activity_wrapper.sorting .content_wrapper .dragHolder .draggable.valid .validation {
        background-image: url("../images/labelling-dropsite-valid.svg");
        display: inline-block; }
  #activity_wrapper.sorting .content_wrapper .dropsites {
    background-color: #eaeaea;
    height: 100%;
    padding: 0 0 1em 0;
    position: absolute;
    width: 100%;
    text-align: justify;
    margin-top: 2em; }
    #activity_wrapper.sorting .content_wrapper .dropsites .dropsite {
      display: inline-block;
      height: 100%;
      margin-right: 0;
      vertical-align: text-top; }
      #activity_wrapper.sorting .content_wrapper .dropsites .dropsite:last-of-type {
        margin-right: 0; }
      #activity_wrapper.sorting .content_wrapper .dropsites .dropsite h2 {
        background-color: #7f7f7f;
        color: #ffffff;
        font-size: 1.2em;
        font-weight: 100;
        margin: 0;
        padding: 9px 0 5px 0;
        text-align: center; }
      #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .content {
        background-color: #ffffff;
        height: auto;
        min-height: 60%;
        overflow: hidden; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .content.hover {
          background-color: #7fd4d7; }
      #activity_wrapper.sorting .content_wrapper .dropsites .dropsite.focussed .content {
        background-color: #7fd4d7; }
      #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable {
        background-color: #979797;
        position: relative;
        color: #ffffff;
        cursor: pointer;
        display: inline-block;
        font-size: 1rem;
        height: auto;
        line-height: 1.2rem;
        margin: 6px 1% 6px 1%;
        text-align: left;
        width: 46%;
        padding: 0; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable:hover {
          background-color: #7fd4d7; }
          #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable:hover .soundItem .sound_control div .sound_label {
            background-color: #7fd4d7; }
          #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable:hover.active {
            background-color: #60a8ad; }
            #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable:hover.active .soundItem .sound_control div .sound_label {
              background-color: #60a8ad; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable .validation {
          background-image: none;
          background-repeat: no-repeat;
          background-size: 1rem 1rem;
          display: none;
          float: right;
          height: 1rem;
          width: 2rem; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable .label {
          margin: 4px 0 4px 4px;
          position: relative; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable .validation {
          background-image: none;
          position: absolute;
          background-size: 1.5rem 1.5rem;
          display: none;
          background-repeat: no-repeat;
          height: 2rem;
          width: 2rem;
          right: 0px;
          top: 2px; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable .soundItem .sound_control div .sound_label {
          text-align: left; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable.invalid .validation {
          background-image: url("../images/labelling-dropsite-invalid.svg");
          display: inline-block; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .draggable.valid .validation {
          background-image: url("../images/labelling-dropsite-valid.svg");
          display: inline-block; }

@media only screen and (max-width: 801px) {
  #activity_wrapper.sorting .content_wrapper {
    background-color: #bebebe; }
    #activity_wrapper.sorting .content_wrapper .dropsites {
      background-color: #eaeaea;
      height: 100%;
      padding: 1em;
      position: absolute;
      top: 180px;
      width: 100%;
      text-align: center; }
      #activity_wrapper.sorting .content_wrapper .dropsites .dropsite {
        display: inline-block;
        height: 100%;
        margin-right: 4%;
        width: 30%; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite:last-of-type {
          margin-right: 0; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite h2 {
          background-color: #7f7f7f;
          color: #ffffff;
          font-size: 1.2em;
          font-weight: 100;
          margin: 0;
          padding: 9px 0 5px 0;
          text-align: center; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .content {
          background-color: #ffffff;
          min-height: 60%;
          overflow: hidden; }
          #activity_wrapper.sorting .content_wrapper .dropsites .dropsite .content.dropsite-hover {
            background-color: #dedede; }
        #activity_wrapper.sorting .content_wrapper .dropsites .dropsite.focussed .content {
          background-color: #7fd4d7; }
    #activity_wrapper.sorting .content_wrapper .draggable {
      background-color: #ffffff;
      color: #7f7f7f;
      cursor: pointer;
      display: inline-block;
      font-size: 1rem;
      height: auto;
      line-height: 1.2rem;
      padding: 0;
      z-index: 101; }
      #activity_wrapper.sorting .content_wrapper .draggable.focused {
        background-color: #60a8ad; }
        #activity_wrapper.sorting .content_wrapper .draggable.focused .soundItem .sound_control div .sound_label {
          background-color: #60a8ad; }
      #activity_wrapper.sorting .content_wrapper .draggable:hover {
        background-color: #7fd4d7; }
        #activity_wrapper.sorting .content_wrapper .draggable:hover .soundItem .sound_control div .sound_label {
          background-color: #7fd4d7; }
      #activity_wrapper.sorting .content_wrapper .draggable .validation {
        background-image: none;
        background-repeat: no-repeat;
        background-size: 1rem 1rem;
        display: none;
        float: right;
        height: 1rem;
        width: 2rem; }
      #activity_wrapper.sorting .content_wrapper .draggable .label {
        margin: 4px 0 4px 4px;
        position: relative; }
      #activity_wrapper.sorting .content_wrapper .draggable .validation {
        background-image: none;
        position: absolute;
        background-size: 1.5rem 1.5rem;
        display: none;
        background-repeat: no-repeat;
        height: 2rem;
        width: 2rem;
        right: 0px;
        top: 2px; }
      #activity_wrapper.sorting .content_wrapper .draggable .soundItem .sound_control div .sound_label {
        background-color: #ffffff;
        text-align: left; }
      #activity_wrapper.sorting .content_wrapper .draggable.invalid .validation {
        background-image: url("../images/labelling-dropsite-invalid.svg");
        display: inline-block; }
      #activity_wrapper.sorting .content_wrapper .draggable.valid .validation {
        background-image: url("../images/labelling-dropsite-valid.svg");
        display: inline-block; } }
/* Memory control classes */
#activity_wrapper.memory .content_wrapper {
  font-size: 0.9rem;
  line-height: 1.2rem;
  letter-spacing: 0.03rem;
  text-align: center;
  height: 100%; }
  #activity_wrapper.memory .content_wrapper .timer_bar {
    position: absolute;
    top: 2.5rem; }
  #activity_wrapper.memory .content_wrapper .cardHolder {
    text-align: justify;
    position: absolute;
    top: 7.625rem;
    bottom: 2.5rem;
    width: 100%; }
    #activity_wrapper.memory .content_wrapper .cardHolder .cardItem {
      width: 18.4%;
      height: 100px;
      overflow: hidden;
      display: inline-block;
      cursor: pointer;
      position: relative; }
      #activity_wrapper.memory .content_wrapper .cardHolder .cardItem .textCard {
        transition: all 0.5s linear;
        transform: rotateX(180deg);
        backface-visibility: hidden;
        background-color: #C4C6C8;
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
        vertical-align: middle;
        position: absolute; }
        #activity_wrapper.memory .content_wrapper .cardHolder .cardItem .textCard div {
          width: 100%;
          height: 100%;
          display: table-cell;
          text-align: center;
          vertical-align: middle; }
      #activity_wrapper.memory .content_wrapper .cardHolder .cardItem .imageCard {
        transition: all 0.5s linear;
        transform: rotateX(180deg);
        backface-visibility: hidden;
        background-color: #C4C6C8;
        width: 100%;
        height: 100%;
        text-align: center;
        vertical-align: middle;
        position: absolute; }
        #activity_wrapper.memory .content_wrapper .cardHolder .cardItem .imageCard img {
          display: inline-block;
          width: 100%;
          height: 100%; }
      #activity_wrapper.memory .content_wrapper .cardHolder .cardItem .soundCard {
        background-color: #C4C6C8;
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
        vertical-align: middle;
        position: absolute; }
        #activity_wrapper.memory .content_wrapper .cardHolder .cardItem .soundCard .soundItem .sound_control div {
          border: none; }
          #activity_wrapper.memory .content_wrapper .cardHolder .cardItem .soundCard .soundItem .sound_control div .sound_label {
            position: relative;
            top: 5px;
            height: 1.5rem;
            color: #C4C6C8;
            letter-spacing: 0.09rem;
            text-align: center;
            font-weight: 100;
            line-height: 1rem;
            width: 100%; }
      #activity_wrapper.memory .content_wrapper .cardHolder .cardItem .back {
        transition: all 0.5s linear;
        transform: rotateX(0deg);
        background-color: #C4C6C8;
        width: 100%;
        height: 100%;
        display: table;
        position: absolute; }
        #activity_wrapper.memory .content_wrapper .cardHolder .cardItem .back:hover {
          background-color: #7fd4d7; }
      #activity_wrapper.memory .content_wrapper .cardHolder .cardItem.correct div {
        background-color: #eaeaea;
        transform: rotateX(0deg);
        outline: 5px solid #228b22;
        outline-offset: -5px; }
        #activity_wrapper.memory .content_wrapper .cardHolder .cardItem.correct div.back {
          background-color: #ffffff;
          transform: rotateX(180deg); }
      #activity_wrapper.memory .content_wrapper .cardHolder .cardItem.incorrect div {
        background-color: #eaeaea;
        transform: rotateX(0deg);
        outline: 5px solid #da0000;
        outline-offset: -5px; }
        #activity_wrapper.memory .content_wrapper .cardHolder .cardItem.incorrect div.back {
          background-color: #ffffff;
          transform: rotateX(180deg); }
      #activity_wrapper.memory .content_wrapper .cardHolder .cardItem.fade {
        opacity: 0.5; }
      #activity_wrapper.memory .content_wrapper .cardHolder .cardItem.active div {
        background-color: #C4C6C8;
        transform: rotateX(0deg);
        outline: 5px solid #60a8ad;
        outline-offset: -5px; }
        #activity_wrapper.memory .content_wrapper .cardHolder .cardItem.active div.back {
          background-color: #666666;
          transform: rotateX(180deg); }
  #activity_wrapper.memory .content_wrapper .modal_dialog {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 100px;
    bottom: 0rem;
    z-index: 9998;
    background: none;
    color: #ffffff;
    font-size: 1.4em; }
    #activity_wrapper.memory .content_wrapper .modal_dialog .layout_wrapper {
      background-color: #C4C6C8; }
    #activity_wrapper.memory .content_wrapper .modal_dialog .controls {
      padding: 1em 0;
      position: relative;
      background-color: #bebebe; }
    #activity_wrapper.memory .content_wrapper .modal_dialog .title, #activity_wrapper.memory .content_wrapper .modal_dialog .static_text_content, #activity_wrapper.memory .content_wrapper .modal_dialog .control_caption {
      position: relative;
      left: 0rem;
      right: 0rem;
      overflow: hidden; }
      #activity_wrapper.memory .content_wrapper .modal_dialog .title h1, #activity_wrapper.memory .content_wrapper .modal_dialog .static_text_content h1, #activity_wrapper.memory .content_wrapper .modal_dialog .control_caption h1 {
        padding: 2rem 0px; }
    #activity_wrapper.memory .content_wrapper .modal_dialog.correct h1 {
      font-size: 2em;
      color: #228b22; }
    #activity_wrapper.memory .content_wrapper .modal_dialog.correct p {
      font-size: 1.4em;
      margin-bottom: 0.5em;
      margin-top: 0.5em; }
    #activity_wrapper.memory .content_wrapper .modal_dialog.correct .correctImg {
      width: 150px;
      height: 150px;
      background-image: url("../images/parliamo-correct.svg");
      background-size: cover;
      background-color: #ffffff;
      border-radius: 50%;
      margin: 0 auto; }
    #activity_wrapper.memory .content_wrapper .modal_dialog.incorrect h1 {
      font-size: 2em;
      color: #da0000; }
    #activity_wrapper.memory .content_wrapper .modal_dialog.incorrect p {
      font-size: 1.4em;
      margin-bottom: 0.5em;
      margin-top: 0.5em; }

/* Sentence Construction control classes */
#activity_wrapper.sentenceConstructionWithListening .content_wrapper {
  font-size: 0.9rem;
  line-height: 1.2rem;
  letter-spacing: 0.03rem; }
  #activity_wrapper.sentenceConstructionWithListening .content_wrapper .passageHolder {
    position: absolute;
    left: 0;
    top: 2.5rem;
    bottom: 2.5rem;
    right: 15rem; }
    #activity_wrapper.sentenceConstructionWithListening .content_wrapper .passageHolder .passageItem {
      margin-bottom: 1em; }
    #activity_wrapper.sentenceConstructionWithListening .content_wrapper .passageHolder .passageImage {
      display: inline-block;
      float: left;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 2px solid #ffffff;
      background-size: cover;
      background-position: center center; }
    #activity_wrapper.sentenceConstructionWithListening .content_wrapper .passageHolder .passage {
      display: inline-block;
      background-color: #FFF;
      min-height: 150px;
      width: 60%;
      background-repeat: no-repeat;
      line-height: 1.2;
      position: relative;
      margin-left: 30px; }
      #activity_wrapper.sentenceConstructionWithListening .content_wrapper .passageHolder .passage::after {
        background-color: #ffffff;
        content: "\00a0";
        display: block;
        height: 30px;
        width: 30px;
        left: -15px;
        position: absolute;
        top: 60px;
        transform: rotate(45deg); }
      #activity_wrapper.sentenceConstructionWithListening .content_wrapper .passageHolder .passage h2 {
        margin: 1em;
        font-weight: 100; }
  #activity_wrapper.sentenceConstructionWithListening .content_wrapper .correctHolder {
    position: fixed;
    z-index: 999999;
    bottom: 98px;
    left: 0px;
    width: 100%;
    background-color: #eaeaea; }
    #activity_wrapper.sentenceConstructionWithListening .content_wrapper .correctHolder .soundItem {
      margin: 1em auto;
      width: 80%; }
  #activity_wrapper.sentenceConstructionWithListening .content_wrapper .answerHolder {
    background-image: url("../images/parliamo-separator-dashed-line.svg");
    background-repeat: repeat-y;
    background-size: 0.31em auto;
    position: absolute;
    right: 0;
    top: 2.5rem;
    bottom: 2.5rem;
    width: 15rem;
    padding-left: 2.5rem;
    overflow: auto; }
    #activity_wrapper.sentenceConstructionWithListening .content_wrapper .answerHolder .answer {
      overflow: hidden; }

.SC_answer_components {
  display: inline-block;
  width: 12.3rem; }
  .SC_answer_components .soundItem {
    width: 10.1rem;
    display: inline-block; }

.passage > div {
  display: block;
  padding: 2.5rem; }

/* Reordering Sentences control classes */
#activity_wrapper.reorderingSentences .content_wrapper {
  font-size: 0.9rem;
  line-height: 1.2rem;
  height: 1.2rem;
  letter-spacing: 0.03rem;
  text-align: center; }
  #activity_wrapper.reorderingSentences .content_wrapper .promptImage {
    height: 150px;
    width: auto;
    display: block; }
  #activity_wrapper.reorderingSentences .content_wrapper .sentenceHolder {
    background-color: #dedede;
    text-align: left;
    margin-top: 2em;
    padding: 0.5em; }
    #activity_wrapper.reorderingSentences .content_wrapper .sentenceHolder .wordHolder {
      margin: 0.5%;
      overflow: hidden;
      display: inline-block;
      cursor: pointer;
      text-align: center;
      vertical-align: middle;
      background-color: #7f7f7f;
      color: #ffffff; }
      #activity_wrapper.reorderingSentences .content_wrapper .sentenceHolder .wordHolder .label {
        position: static;
        margin: 0.5em 1em; }
      #activity_wrapper.reorderingSentences .content_wrapper .sentenceHolder .wordHolder .validation {
        background-image: none;
        background-position: center center;
        position: relative;
        background-size: cover;
        display: none;
        background-repeat: no-repeat;
        height: 1.5rem;
        width: 1.5rem;
        right: 0px;
        top: 0.5em; }
      #activity_wrapper.reorderingSentences .content_wrapper .sentenceHolder .wordHolder.invalid .validation {
        background-image: url("../images/labelling-dropsite-invalid.svg");
        display: inline-block; }
      #activity_wrapper.reorderingSentences .content_wrapper .sentenceHolder .wordHolder.valid .validation {
        background-image: url("../images/labelling-dropsite-valid.svg");
        display: inline-block; }
#activity_wrapper.reorderingSentences .modal_dialog {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100px;
  bottom: 0rem;
  z-index: 9998;
  background: none;
  color: #ffffff;
  font-size: 1.4em; }
  #activity_wrapper.reorderingSentences .modal_dialog .layout_wrapper {
    background-color: #C4C6C8; }
  #activity_wrapper.reorderingSentences .modal_dialog .controls {
    padding: 1em 0;
    position: relative;
    background-color: #bebebe; }
  #activity_wrapper.reorderingSentences .modal_dialog .title, #activity_wrapper.reorderingSentences .modal_dialog .static_text_content, #activity_wrapper.reorderingSentences .modal_dialog .control_caption {
    position: relative;
    left: 0rem;
    right: 0rem;
    overflow: hidden; }
    #activity_wrapper.reorderingSentences .modal_dialog .title h1, #activity_wrapper.reorderingSentences .modal_dialog .static_text_content h1, #activity_wrapper.reorderingSentences .modal_dialog .control_caption h1 {
      padding: 2rem 0px; }
  #activity_wrapper.reorderingSentences .modal_dialog.correct h1 {
    font-size: 2em;
    color: #228b22; }
  #activity_wrapper.reorderingSentences .modal_dialog.correct p {
    font-size: 1.4em;
    margin-bottom: 0.5em;
    margin-top: 0.5em; }
  #activity_wrapper.reorderingSentences .modal_dialog.correct .correctImg {
    width: 150px;
    height: 150px;
    background-image: url("../images/parliamo-correct.svg");
    background-size: cover;
    background-color: #ffffff;
    border-radius: 50%;
    margin: 0 auto; }
  #activity_wrapper.reorderingSentences .modal_dialog.incorrect h1 {
    font-size: 2em;
    color: #da0000; }
  #activity_wrapper.reorderingSentences .modal_dialog.incorrect p {
    font-size: 1.4em;
    margin-bottom: 0.5em;
    margin-top: 0.5em; }
  #activity_wrapper.reorderingSentences .modal_dialog.incorrect .correctImg {
    width: 150px;
    height: 150px;
    background-image: url("../images/parliamo-incorrect.svg");
    background-size: cover;
    background-color: #ffffff;
    border-radius: 50%;
    margin: 0 auto; }

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