@font-face {
  font-family: Allatuq;
  src: url('../assets/fonts/allatuq/allatuq.eot');
  src: url('../assets/fonts/allatuq/allatuq.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/allatuq/allatuq.woff') format('woff'), url('../assets/fonts/allatuq/allatuq.ttf') format('truetype'), url('../assets/fonts/allatuq/allatuq.svg#AllatuqRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

* {
  font-weight: normal !important;
  cursor: default;
}

body {
/*  font-family: Allatuq, AiPaiNutaaq, Pigiarnig, AiPaiNunavik, AiNunavik, AiPaiNuNa;*/
  font-family: Allatuq;
  margin: 0;
  padding: 0;
  border: 0;
  background: #555c87;
  overflow: hidden;
  color: #fff;
  text-shadow: 0 1px 1px #222;
/*      letter-spacing: -0.176em;*/
/*      word-spacing: 0.1em;*/
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -moz-user-select: none;
}

p, ul, ol, li, dl, dt, dd,
h1, h2, h3, h4, h5, h6 { margin: 0 }

h1 {
  font-size: 4.2em;
}
h2 {
  font-size: 1.8em;
  letter-spacing: -0.135em;
  word-spacing: 0.2em;
}
h2.dialog-text {
  width: 100%;
  text-align: center;
}
h2.section-title {
  font-size: 2.1em;
  letter-spacing: -0.135em;
  word-spacing: 0.2em;
  width: 87%;
  text-align: center;
  left: 8%;
  bottom: 2%;
}
  h2.section-title span {
    display: inline-block;
    padding: 0.1em 0.4em;
    background: rgba(0,0,0,0.35);
    border: solid 4px rgba(0, 0, 0, 0.5);

    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
  }
  .lt-ie9 h2.section-title span {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#25000000', endColorstr='#25000000');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#25000000', EndColorStr='#25000000')";;
  }


a, a img {
  text-decoration: none;
  border: 0;
}

.pre-home #stage { background-image: url('../assets/images/backgrounds/medium/home.jpg') }
#stage {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 880px;
  height: 550px;
  margin-top: -285px;
  margin-left: -440px;

  font-size: 1em;

/*  border: 10px solid #27293e;*/
}

#on-mobile-device {
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  position: absolute;
  bottom: 0; top: 0;
  left: 0; right: 0;
  z-index: 1500;
  display: none;
}

  #on-mobile-device p {
    font-size: 2.5em;
    position: absolute;
    top: 43%;
  }

/* Progress Panel {{{
******************************************************************************/

.progress-panel {
  top: 21%;
  left: 1.8%;
  width: 9.2%;
  height: 57%;
}
  .level-number {
    top: 22.4%;
    left: 3%;
    width: 8.1%;
    font-size: 2.2em !important;
    padding: 0.15em 0 0.25em;
    text-align: center;
    letter-spacing: -0.05em;
    text-indent: -0.1em;
  }
    .progress-inside {
      top: 68.5%;
      left: 1%;
      width: 10.1%;
      padding: 0;
      margin: 0;
    }
    .progress-outside {
      top: 13%;
      right: 2%;
      padding: 0;
      margin: 0;
    }


#watch {
  top: 6%;
  left: 3.4%;
}
  .time-left {
    top: 14.6%;
    left: 5.3%;
    width: 8.1%;
    font-size: 1.8em !important;
    color: #000;
    padding: 0.15em 0 0.25em;
    text-align: center;
    letter-spacing: -0.05em;
    text-indent: -0.1em;
  }

p.level-number {
  font-size: 3em;
}

/* }}} */


@media screen and (max-width: 919px), screen and (max-height: 589px) {
  .pre-home #stage { background-image: url('../assets/images/backgrounds/small/home.jpg'); }
  #stage {
    width:  616px;
    height: 385px;
    margin-left: -318px;
    margin-top:  -202px;
    font-size: 0.7em;
  }
  ul.progress-stars li {
    width: 22px;
    height: 22px;
    margin: 0 2px 2px 0;
  }
  ul.progress-stars li span {
    background-image: url('../assets/images/ui/small/progress-star.png');
    background-position: 2px 2px;
  }

  .time-gauge span {
    background: url('../assets/images/ui/small/chronometer-stripes.png') repeat;
  }
}
@media screen and (min-width: 920px) and (min-height: 590px) and (max-width: 1095px),
    screen and (min-width: 920px) and (min-height: 590px) and (max-height: 699px) {
  .pre-home #stage { background-image: url('../assets/images/backgrounds/medium/home.jpg'); }
  #stage {
    width:  880px;
    height: 550px;
    margin-left: -450px;
    margin-top:  -285px;
    font-size: 1em;
  }
  ul.progress-stars li {
    width: 31px;
    height: 31px;
    margin: 0 4px 3px 0;
  }
  ul.progress-stars li span {
    background-image: url('../assets/images/ui/medium/progress-star.png');
    background-position: 3px 2px;
  }

  .time-gauge span {
    background: url('../assets/images/ui/medium/chronometer-stripes.png') repeat;
  }
}
@media screen and (min-width: 1096px) and (min-height: 700px) {
  .pre-home #stage { background-image: url('../assets/images/backgrounds/big/home.jpg'); }
  #stage {
    width: 1056px;
    height: 660px;
    margin-left: -538px;
    margin-top:  -340px;
    font-size: 1.2em;
  }
  ul.progress-stars li {
    width: 38px;
    height: 38px;
    margin: 0 4px 4px 0;
  }
  ul.progress-stars li span {
    background-image: url('../assets/images/ui/big/progress-star.png');
    background-position: 4px 4px;
  }

  .time-gauge span {
    background: url('../assets/images/ui/big/chronometer-stripes.png') repeat;
  }
}

.small ul.progress-stars li {
  width: 22px;
  height: 22px;
  margin: 0 2px 2px 0;
}
.small ul.progress-stars li span {
  background-image: url('../assets/images/ui/small/progress-star.png');
  background-position: 2px 2px;
}

.medium ul.progress-stars li {
  width: 31px;
  height: 31px;
  margin: 0 4px 3px 0;
}
.medium ul.progress-stars li span {
  background-image: url('../assets/images/ui/medium/progress-star.png');
  background-position: 3px 2px;
}

.big ul.progress-stars li {
  width: 38px;
  height: 38px;
  margin: 0 4px 4px 0;
}
.big ul.progress-stars li span {
  background-image: url('../assets/images/ui/big/progress-star.png');
  background-position: 4px 4px;
}


.stage-element {
  position: absolute;
  z-index: 400;
  background-repeat: no-repeat !important;
}

.stage-element.outsideEntryPoint {
  width: 24%;
  height: 36%;
/*  background: rgba(0, 0, 0, 0.5);*/
  top: 45%;
  left: 18%;
}
.stage-element.outsideEntryPoint span.label{
  position: absolute;
  bottom: 0;
  left: 13%;
  font-size: 140%;
  color: #521677;
  text-shadow: 0 1px 1px #222;
}



.stage-element.insideEntryPoint {
  width: 24%;
  height: 36%;
/*  background: rgba(0, 0, 0, 0.5);*/
  top: 45%;
  left: 53%;
}
.stage-element.insideEntryPoint span.label{
  position: absolute;
  bottom: 0;
  left: 13%;
  font-size: 140%;
  color: #ab0043;
  text-shadow: 0 1px 1px #222;
}

div.outsideLittleFamily {
  top: 56%;
  left: 21%;
}
div.insideLittleFamily {
  top: 59%;
  left: 54%;
}
.stage-element.clues {
  bottom: 12%;
  right: 35%;
  color: black;
  font-size: 200%;
}
.section-inside .stage-element.imagesWrap {
  position: relative;
  width: 63%;
  top: 15%;
  left: 29%;
/*  background: rgba(0, 0, 0, 0.7);*/
}

.section-outside .stage-element.imagesWrap {
  left: 11%;
  width: 80%;
}
.stage-element.imagesWrap div,
.stage-element.imagesWrap img {
  padding: 4px;
}

.stage-element.imagesWrap div.highlight,
.stage-element.imagesWrap img.highlight {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
}

.stage-element.questionsWrap .child {
  display: block;
  width: 33.33%;
  position: relative;
  display: inline-block;
}

#stage .actor {
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  z-index: 200;
}

#stage .actor.home-star {
  color: #000;
  font-size: 90%;
}
#stage .interactive {
  z-index: 400;
}

#stage .interactive,
#stage .interactive > * {
  cursor: pointer;
}

#stage .dialog {
  z-index: 600;
}
#stage .dialog-stars {
  z-index: 650;
}
#stage .dialog-button {
  z-index: 700;
}
#stage .dialog-text {
  z-index: 900;
}


/* Questions {{{
******************************************************************************/

/* type 1-2 */
.big-circle .actor {
  top: -9%;
  left: -7%;
}

.big-circle h2 {
  font-size: 800%;
  margin-top: -47%;
  margin-left: -28%;
}
/* type 3-4 */
.question-type-3-answer-text {
  margin-left: -72%;
  margin-top: 22%;
  text-align: center;
  width: 250%;
  font-size: 4.4em;
}
.question-type-3-answer-text.small-text {
/*  margin-top: 0.05em;*/
  font-size: 3.4em;
}
.question-type-3-answer-text.smaller-text {
  margin-top: 0.02em;
  font-size: 3.4em;
}
.question-type-3-answer-text.smallest-text {
  margin-top: 0.05em;
  font-size: 3.4em;
}

/* type 5 */
span.missing-syllabic {
  position: relative;
}
span.missing-syllabic:after {
  content: '?';
  opacity: 0.3;
  position: absolute;
  bottom: 0.3em;
  left: 0.2em;
}
/*.lt-ie9 .section-water span.missing-syllabic:after { color: #7b8fa5 }*/
.lt-ie9 .section-inside  span.missing-syllabic:after { color: #988d84 }
.lt-ie9 .section-outside span.missing-syllabic:after { color: #a5a8b4 }

/* }}} */

#credit-dialog  { left: 22%; top: 17%; }
#help-dialog    { left: 11%; top: 17%; }

.home-screen-dialog {
  left: 16.7%;
  top: 19%;
}

  .reset-dialog {
    left: 27%;
    top: 21%;
  }

  .completed-puzzle-bg-dialog {
    left: 29.8%;
    top: 17%;
  }
    .completed-puzzle-arrow-button {
      top: 46%;
      right: -7%;
    }

  .completed-puzzle-set-bg {
    left: 29.8%;
    top: 10%;
  }

  .close-dialog-button {
    right: -2.7%;
    top: -5.1%;
  }

  .accept-button {
    right: 20%;
    top: 20%;
  }

  .reset-puzzle-button {
    bottom: -9%;
    left: 41%;
  }

.veil {
  background: rgba(85, 92, 135, 0.85);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 410;
}

.lt-ie9 .veil {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#691c9800', endColorstr='#691c9800');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#691c9800', EndColorStr='#691c9800')";;
}

.right-answer-dialog, .wrong-answer-dialog {
  top: 23%;
  left: 27.3%;
}
  .right-answer-dialog-button, .wrong-answer-dialog-button {
    left: 41.5%;
    bottom: -9.5%;
  }

.end-level-dialog, .end-section-dialog {
  top: 23%;
  left: 27.3%;
}
  .end-level-dialog-stars, .end-section-dialog-stars {
    top: -18%;
    left: 29.8%;
  }
  .end-level-dialog-text, .end-section-dialog-text {
    top: 39%;
    left: 0%;
  }
  .end-level-dialog-button, .end-section-dialog-button {
    left: 41.5%;
    bottom: -18.5%;
  }