@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: #213a3a;
  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')";;
  }

h1.camping-name {
  font-size: 4.5em;
  left: 10.4%;
  letter-spacing: -0.15em;
  text-align: center;
  top: 9%;
  width: 89.6%;
}
  h1.camping-name span {
    display: inline-block;
    padding: 0.3em 0.4em 0.29em;
    
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
  }
  
/*  .section-water h1.camping-name span {*/
/*    background: rgba(05,192,243,0.3);*/
/*  }*/
/*  .lt-ie9 .section-water h1.camping-name span {*/
/*    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c05c0f3', endColorstr='#4c05c0f3');*/
/*    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c05c0f3', EndColorStr='#4c05c0f3')";;*/
/*  }*/
  
  .section-inside h1.camping-name span {
    background: rgba(253,130,5,0.3);
  }
  .lt-ie9 .section-inside h1.camping-name span {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acfd8205', endColorstr='#4cfd8205');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4cfd8205', EndColorStr='#4cfd8205')";;
  }
  
  .section-outside h1.camping-name span {
    background: rgba(62,228,177,0.4);
  }
  .lt-ie9 .section-outside h1.camping-name span {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#663ee4b1', endColorstr='#663ee4b1');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#663ee4b1', EndColorStr='#663ee4b1')";;
  }

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 #182a2a;
}


/* 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:active, a:active {
  opacity: 0.8;
}
  #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 }

.question-type-5-camping-name {
  width: 47%;
  text-align: center;
}

/* }}} */

.home-screen-dialog {
  left: 16.7%;
  top: 19%;
}
  .close-dialog-button {
    right: -2.7%;
    top: -5.1%;
  }

.veil {
  background: rgba(105,28,152,0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.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%;
  }