html {
  -webkit-font-smoothing:      subpixel-antialiased;
  -webkit-text-size-adjust:    100%;
  -webkit-touch-callout:       none;
  -webkit-user-select:         none;
  -khtml-user-select:          none;
  -moz-user-select:            none;
  -ms-user-select:             none;
  user-select:                 none;
  webkit-tap-highlight-color:  rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-backface-visibility: hidden;
}
html {
  width:  100%;
  height: 100%;
  overflow:   hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

body {
  width:  100%;
  height: 100%;
  background-color: #000;
  font-family: 'Play Bold', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 18px;
  color: #fff;
  overflow:   hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}


/* Fonts ---------------------------------------------------------------------------------------- */

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome/fontawesome-webfont.eot?v=4.6.3');
  src: url('fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.6.3')             format('embedded-opentype'),
       url('fonts/fontawesome/fontawesome-webfont.woff2?v=4.6.3')                  format('woff2'),
       url('fonts/fontawesome/fontawesome-webfont.woff?v=4.6.3')                   format('woff'),
       url('fonts/fontawesome/fontawesome-webfont.ttf?v=4.6.3')                    format('truetype'),
       url('fonts/fontawesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Play Bold';
  src: url('fonts/play/bold/Play-bold.eot');
  src: url('fonts/play/bold/Play-bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/play/bold/Play-bold.woff2')      format('woff2'),
       url('fonts/play/bold/Play-bold.woff')       format('woff'),
       url('fonts/play/bold/Play-bold.ttf')        format('truetype'),
       url('fonts/play/bold/Play-bold.svg#Play')   format('svg');
  font-weight: normal;
  font-style: normal;
}


/* General -------------------------------------------------------------------------------------- */

* {
  padding: 0;
  border: 0;
  margin: 0;
}

a {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}
table th,
table td {
  font-weight: normal;
  text-align: left;
  vertical-align: top;
}


/* Screens -------------------------------------------------------------------------------------- */

#screens_container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


/* Screen --------------------------------------------------------------------------------------- */

/* Screen container */
.screen_container {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Screen body */
.screen_body {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

.center_container1 {
  width: 100%;
  height: 100%;
  display: table;
}
.center_container2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

/* Screen header / footer */
.screen_header,
.screen_footer {
  width: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
}
.screen_header {
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  text-align: center;
}


/* Message -------------------------------------------------------------------------------------- */

.screen_overlay_container1 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 20;
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  -webkit-transition: top 0.3s ease 0s;
  -moz-transition:    top 0.3s ease 0s;
  -o-transition:      top 0.3s ease 0s;
  transition:         top 0.3s ease 0s;
  /* prevent flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.screen_overlay_container1.hide {
  top: -100%;
}
.screen_overlay_container1.show {
  top: 0;
}
.screen_overlay_container2 {
  width: 100%;
  height: 100%;
  display: table;
}
.screen_overlay_container3 {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.message_container {
  min-width: 50%;
  max-width: 90%;
  display: inline-block;
  position: relative;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 25px;
  border: 2px solid #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:    0 0 4px 2px rgba(0, 0, 0, 0.25);
  box-shadow:         0 0 4px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

.message {
  display: none;
}

.message_icon {
  width: 60px;
  height: 60px;
  display: block;
  background-image: url('images/icon.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  font-size: 0;
  line-height: 0;
  margin: 0 auto 20px auto;
}
.message_icon:before {
  content: ' ';
}

@media only screen and (max-height: 250px) {
  .message_container {
    padding: 15px;
  }
  .message_icon {
    display: none;
  }
}

.message p {
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  color: #fff;
  margin: 0 0 20px 0;
}

#message_pause p {
  -webkit-animation: blinker 1s linear infinite;
  -moz-animation:    blinker 1s linear infinite;
  -ms-animation:     blinker 1s linear infinite;
  animation:         blinker 1s linear infinite;
  /* prevent flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

@keyframes blinker {
  0% {
    text-shadow: rgba(0,   0,   0,   1);
    color:       rgba(255, 255, 255, 1);
  }
  50% {
    text-shadow: rgba(0,   0,   0,   0);
    color:       rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: rgba(0,   0,   0,   1);
    color:       rgba(255, 255, 255, 1);
  }
}

.message .buttons {
  font-size: 0;
  line-height: 0;
}
.message .button {
  display: inline-block;
  position: static;
  margin: 0 10px 0 10px;
}


/* Buttons popup -------------------------------------------------------------------------------- */

#buttons_container1 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 20;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  -webkit-transition: top 0.3s ease 0s;
  -moz-transition:    top 0.3s ease 0s;
  -o-transition:      top 0.3s ease 0s;
  transition:         top 0.3s ease 0s;
  /* prevent flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
#buttons_container1.hide {
  top: -100%;
}
#buttons_container1.show {
  top: 0;
}
#buttons_container2 {
  width: 100%;
  height: 100%;
  display: table;
}
#buttons_container3 {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#screen_play #buttons_popup {
  max-width: 90%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.75);
  font-size: 0;
  line-height: 0;
  padding: 15px;
  border: 2px solid #999;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:    0 0 4px 2px rgba(0, 0, 0, 0.25);
  box-shadow:         0 0 4px 2px rgba(0, 0, 0, 0.25);
}
#screen_play #buttons_popup a.button {
  display: inline-block;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 5px;
}


/* Buttons -------------------------------------------------------------------------------------- */

a.button {
  width: 45px;
  height: 45px;
  display: block;
  position: absolute;
  background-color: #333;
  background-image: linear-gradient(
    to bottom,
    #444, #222
  );
  font-family: 'FontAwesome';
  font-weight: normal;
  font-size: 22px;
  line-height: 41px;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fff;
  overflow: hidden;
  border: 2px solid #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
a.button.mute {
  color: #f00 !important;
  border-color: #f00 !important;
}
.no-touchevents a.button:hover,
                a.button:active,
.no-touchevents a.button:focus {
  background-color: #444;
  background-image: linear-gradient(
    to bottom,
    #222, #444
  );
  color: #fa0;
  border-color: #fa0;
}

a#button_back_home:before       { content: '\f060'; }
a#button_pause:before           { content: '\f04c'; font-size: 18px; }
a#button_restart:before,
a#button_restart_popup:before   { content: '\f0e2'; }
a.button.music:before           { content: '\f001'; }
a.button.sound:before           { content: '\f028'; }
a.button.language:before        { content: '\f024'; font-size: 10px; }
a#button_menu:before            { content: '\f0c9'; }
a#button_back:before            { content: '\f060'; }
a#button_play:before            { content: '\f00c'; }
a#button_resume:before          { content: '\f00c'; }
a#button_yes:before             { content: '\f00c'; }
a#button_no:before              { content: '\f00d'; }
a#button_close_popup:before     { content: '\f00d'; }
a#button_proceed:before         { content: '\f061'; }

a.button.language:after {
  width: 29px;
  height: 22px;
  display: block;
  position: absolute;
  top: 9px;
  left: 6px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  font-size: 0;
  line-height: 0;
  content: ' ';
  -webkit-border-radius: 3px;
  -moz-border-radius:    3px;
  border-radius:         3px;
}

a.button.language.en:after { background-image: url('images/flags/en.svg'); }
a.button.language.de:after { background-image: url('images/flags/de.svg'); }
a.button.language.fr:after { background-image: url('images/flags/fr.svg'); }
a.button.language.nl:after { background-image: url('images/flags/nl.svg'); }
a.button.language.es:after { background-image: url('images/flags/es.svg'); }
a.button.language.pt:after { background-image: url('images/flags/pt.svg'); }
a.button.language.pl:after { background-image: url('images/flags/pl.svg'); }
a.button.language.tr:after { background-image: url('images/flags/tr.svg'); }
a.button.language.ru:after { background-image: url('images/flags/ru.svg'); }


/* Ad overlay ----------------------------------------------------------------------------------- */

#ad_overlay {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}


/* 1) Loading screen ---------------------------------------------------------------------------- */

#screen_loading {
  background-image: url('images/backgrounds/loading.svg');
}

#screen_loading .message_container {
  width: auto;
  min-width: auto;
  max-width: auto;
}
#screen_loading .message {
  display: block;
}

#loading_indicator_container {
  width: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border: 2px solid #fff;
  margin: 0 auto 15px auto;
  -webkit-border-radius: 15px;
  -moz-border-radius:    15px;
  border-radius:         15px;
}
#loading_indicator {
  height: 15px;
  background-color: #fa0;
  background-image: linear-gradient(
    to bottom,
    #fa0, #ef7b1c
  );
}

#screen_loading .message p {
  margin: 0;
}


/* 2) Splash screen ----------------------------------------------------------------------------- */

#screen_splash {
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#304896), to(#000));
  background: -webkit-radial-gradient(circle, #304896, #000);
  background: -moz-radial-gradient(circle,    #304896, #000);
  background: -ms-radial-gradient(circle,     #304896, #000);
  cursor: pointer;
}

#logo_splash {
  width: 60%;
  height: 60%;
  position: absolute;
  top: 20%;
  left: 20%;
  display: none;
  background-image: url('images/logo_splash.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 1;
}
#logo_splash.animation {
  -webkit-animation: logo_splash_pop_in 1s linear;
  -moz-animation:    logo_splash_pop_in 1s linear;
  -ms-animation:     logo_splash_pop_in 1s linear;
  animation:         logo_splash_pop_in 1s linear;
}

@keyframes logo_splash_pop_in {
  0% {
    width:   50%;
    height:  50%;
    top:     25%;
    left:    25%;
    opacity:   0;
  }
  100% {
    width:   60%;
    height:  60%;
    top:     20%;
    left:    20%;
    opacity:   1;
  }
}


/* 3) Home screen ------------------------------------------------------------------------------- */

#screen_home {
  background-image: url('images/backgrounds/home.svg');
}

/* Clouds */
#screen_home .screen_body_overlay1,
#screen_home .screen_body_overlay2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  /* prevent flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
#screen_home .screen_body_overlay1 {
  background-image: url('images/backgrounds/home_overlay1.svg');
  -webkit-animation: left_to_right 20s linear infinite;
  -moz-animation:    left_to_right 20s linear infinite;
  -ms-animation:     left_to_right 20s linear infinite;
  animation:         left_to_right 20s linear infinite;
}
#screen_home .screen_body_overlay2 {
  background-image: url('images/backgrounds/home_overlay2.svg');
  -webkit-animation: left_to_right 20s linear infinite;
  -moz-animation:    left_to_right 20s linear infinite;
  -ms-animation:     left_to_right 20s linear infinite;
  animation:         left_to_right 20s linear infinite;
}

@keyframes left_to_right {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Logo */
#logo {
  width: 80%;
  height: 30%;
  position: absolute;
  top: -30%;
  left: 10%;
  background-image: url('images/logo.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  -webkit-transition: top 1s ease 0s;
  -moz-transition:    top 1s ease 0s;
  -o-transition:      top 1s ease 0s;
  transition:         top 1s ease 0s;
  /* prevent flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
#logo.show {
  top: 5%;
}

/* Button start, music & sound */
#button_start,
#button_music_home,
#button_sound_home {
  height: 15%;
  display: block;
  position: absolute;
  top: 45%;
  z-index: 10;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 68, 102, 0.9), rgba(0, 34, 68, 0.9)
  );
  border: 2px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:    0 0 4px 2px rgba(0, 0, 0, 0.25);
  box-shadow:         0 0 4px 2px rgba(0, 0, 0, 0.25);
}
.no-touchevents #button_start:hover,
                #button_start:active,
.no-touchevents #button_start:focus,
.no-touchevents #button_music_home:hover,
                #button_music_home:active,
.no-touchevents #button_music_home:focus,
.no-touchevents #button_sound_home:hover,
                #button_sound_home:active,
.no-touchevents #button_sound_home:focus {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 34, 68, 0.9), rgba(0, 68, 102, 0.9)
  );
  border-color: #fa0;
}
#button_start {
  animation-name: pulse;
  animation-duration: 3000ms;
  transform-origin: 70% 70%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#button_music_home,
#button_sound_home {
  height: 10%;
  top: 65%;
}
#button_music_home.mute,
#button_sound_home.mute {
  border-color: #f00 !important;
}

/* width < 500px */
#button_start {
  width: 30%;
  left: 35%;
}
#button_music_home,
#button_sound_home {
  width: 20%;
}
#button_music_home {
  left: 25%;
}
#button_sound_home {
  right: 25%;
}

@media all and (orientation:portrait) {
  #button_start {
    width: 40%;
    left: 30%;
  }
}

/* width > 500px */
@media all and (orientation:landscape) and (min-width:500px) {
  #button_start {
    width: 20%;
    left: 40%;
  }
  #button_music_home,
  #button_sound_home {
    width: 15%;
  }
  #button_music_home {
    left: 30%;
  }
  #button_sound_home {
    right: 30%;
  }
}

@media all and (orientation:portrait) and (min-width:500px) {
  #button_start {
    width: 20%;
    left: 40%;
  }
  #button_music_home,
  #button_sound_home {
    width: 15%;
  }
  #button_music_home {
    left: 30%;
  }
  #button_sound_home {
    right: 30%;
  }
}

/* width > 1000px */
@media all and (orientation:landscape) and (min-width:1000px) {
  #button_start {
    width: 15%;
    left: 42.5%;
  }
  #button_music_home,
  #button_sound_home {
    width: 10%;
  }
  #button_music_home {
    left: 37.5%;
  }
  #button_sound_home {
    right: 37.5%;
  }
}

@media all and (orientation:portrait) and (min-width:1000px) {
  #button_start {
    width: 17.5%;
    left: 41.25%;
  }
  #button_music_home,
  #button_sound_home {
    width: 10%;
  }
  #button_music_home {
    left: 35%;
  }
  #button_sound_home {
    right: 35%;
  }
}

#button_start      span,
#button_music_home span,
#button_sound_home span {
  width: 100%;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
#button_start span {
  background-image: url('images/buttons/start.svg');
}
#button_music_home span {
  background-image: url('images/buttons/music.svg');
}
#button_music_home.mute span {
  background-image: url('images/buttons/music3.svg') !important;
}
#button_sound_home span {
  background-image: url('images/buttons/sound.svg');
}
#button_sound_home.mute span {
  background-image: url('images/buttons/sound3.svg') !important;
}
.no-touchevents #button_start:hover  span,
                #button_start:active span,
.no-touchevents #button_start:focus  span {
  background-image: url('images/buttons/start2.svg');
}
.no-touchevents #button_music_home:hover  span,
                #button_music_home:active span,
.no-touchevents #button_music_home:focus  span {
  background-image: url('images/buttons/music2.svg');
}
.no-touchevents #button_sound_home:hover  span,
                #button_sound_home:active span,
.no-touchevents #button_sound_home:focus  span {
  background-image: url('images/buttons/sound2.svg');
}

@keyframes pulse {
    0% { transform: scale(1.0); }
   25% { transform: scale(1.1); }
   50% { transform: scale(1.0); }
   75% { transform: scale(1.1); }
  100% { transform: scale(1.0); }
}

/* Publisher */
#publisher {
  width: 80%;
  height: 10%;
  position: absolute;
  bottom: 5%;
  left: 10%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: pointer;
}


/* 4) Mode screen ------------------------------------------------------------------------------- */

#screen_mode {
  background-image: url('images/backgrounds/mode.svg');
}

/* Header */
#screen_mode .screen_header {
  height: 30px;
  top: 0;
  left: 0;
}

/* Footer */
#screen_mode .screen_footer {
  height: 55px;
  bottom: 0;
  left: 0;
}

#screen_mode a#button_back_home {
  bottom: 5px;
  left: 10px;
}
#screen_mode a.button.music {
  bottom: 5px;
  right: 120px;
}
#screen_mode a.button.sound {
  bottom: 5px;
  right: 65px;
}
#screen_mode a.button.language {
  bottom: 5px;
  right: 10px;
}

.no-language-switch #screen_mode a.button.music {
  right: 65px;
}
.no-language-switch #screen_mode a.button.sound {
  right: 10px;
}

/* Body */
#screen_mode .screen_body {
  padding: 30px 0 55px 0;
}

/* Modes */
#modes {
  width: 100%;
  height: 100%;
  position: relative;
}

a.mode {
  display: block;
  position: absolute;
  padding: 3%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

@media only screen and (min-width: 600px) and (min-height: 600px) {
  a.mode {
    padding: 6%;
  }
}

a.mode span.container {
  width: 100%;
  height: 100%;
  display: block;
  background-image: linear-gradient(to bottom, rgba(68, 68, 68, 0.4), rgba(34, 34, 34, 0.4));
  text-align: center;
  color: #fff;
  overflow: hidden;
  border: 2px solid #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
a.mode span.container span {
  width: 100%;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.no-touchevents a.mode:hover  span.container,
                a.mode:active span.container,
.no-touchevents a.mode:focus  span.container {
  background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.4), rgba(68, 68, 68, 0.4));
  color: #fa0;
  border-color: #fa0;
}

#mode_4  span.container span { background-image: url('images/modes/4.svg');  }
#mode_8  span.container span { background-image: url('images/modes/8.svg');  }
#mode_12 span.container span { background-image: url('images/modes/12.svg'); }
#mode_16 span.container span { background-image: url('images/modes/16.svg'); }
#mode_20 span.container span { background-image: url('images/modes/20.svg'); }
#mode_24 span.container span { background-image: url('images/modes/24.svg'); }

.no-touchevents #mode_4:hover  span.container span,
                #mode_4:active span.container span,
.no-touchevents #mode_4:focus  span.container span {
  background-image: url('images/modes/4_hover.svg');
}

.no-touchevents #mode_8:hover  span.container span,
                #mode_8:active span.container span,
.no-touchevents #mode_8:focus  span.container span {
  background-image: url('images/modes/8_hover.svg');
}

.no-touchevents #mode_12:hover  span.container span,
                #mode_12:active span.container span,
.no-touchevents #mode_12:focus  span.container span {
  background-image: url('images/modes/12_hover.svg');
}

.no-touchevents #mode_16:hover  span.container span,
                #mode_16:active span.container span,
.no-touchevents #mode_16:focus  span.container span {
  background-image: url('images/modes/16_hover.svg');
}

.no-touchevents #mode_20:hover  span.container span,
                #mode_20:active span.container span,
.no-touchevents #mode_20:focus  span.container span {
  background-image: url('images/modes/20_hover.svg');
}

.no-touchevents #mode_24:hover  span.container span,
                #mode_24:active span.container span,
.no-touchevents #mode_24:focus  span.container span {
  background-image: url('images/modes/24_hover.svg');
}

.no-touchevents #mode_up:hover  span.container span,
                #mode_up:active span.container span,
.no-touchevents #mode_up:focus  span.container span {
  background-image: url('images/modes/up_hover.svg');
}

@media all and (orientation:landscape) {
  
  a.mode {
    width:  25%;
    height: 50%;
  }
  #mode_4  { top:    0; left:    0; }
  #mode_8  { top:    0; left:  25%; }
  #mode_12 { top:    0; right: 25%; }
  #mode_16 { bottom: 0; left:    0; }
  #mode_20 { bottom: 0; left:  25%; }
  #mode_24 { bottom: 0; right: 25%; }
  #mode_up { top:    0; right:   0; height: 100%; }
  
  #mode_up span.container span { background-image: url('images/modes/up_landscape.svg'); }
  
  .no-touchevents #mode_up:hover  span.container span,
                  #mode_up:active span.container span,
  .no-touchevents #mode_up:focus  span.container span {
    background-image: url('images/modes/up_landscape_hover.svg');
  }
  
}

@media all and (orientation:portrait) {
  
  a.mode {
    width:  33.333333333333333%;
    height: 33.333333333333333%;
  }
  #mode_4  { top: 0;                   left: 0; }
  #mode_8  { top: 0;                   left: 33.333333333333333%; }
  #mode_12 { top: 0;                   right: 0; }
  #mode_16 { top: 33.333333333333333%; left: 0; }
  #mode_20 { top: 33.333333333333333%; left: 33.333333333333333%; }
  #mode_24 { top: 33.333333333333333%; right: 0; }
  #mode_up { bottom: 0;                left: 0; width: 100%; }
  
  #mode_up span.container span { background-image: url('images/modes/up_portrait.svg'); }
  
  .no-touchevents #mode_up:hover  span.container span,
                  #mode_up:active span.container span,
  .no-touchevents #mode_up:focus  span.container span {
    background-image: url('images/modes/up_portrait_hover.svg');
  }
  
}


/* 5) Play screen ------------------------------------------------------------------------------- */

#screen_play {
  background-image: url('images/backgrounds/play.svg');
}

/* Scores */
#scores {
  position: absolute;
}

.score {
  float: left;
  position: relative;
  line-height: 30px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  padding: 0 0 0 25px;
}
.score:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'FontAwesome';
  font-weight: normal;
  color: #fa0;
}

#total_score:before {
  content: '\f005';
}

#level_score {
  margin: 0 0 0 15px;
}
#level_score:before {
  content: '\f006';
}

/* Time */
#time {
  position: absolute;
  line-height: 30px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  padding: 0 0 0 25px;
}
#time:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'FontAwesome';
  font-weight: normal;
  color: #fa0;
  content: '\f017';
}

/* Portrait */

@media only screen and (orientation: portrait) {
  
  /* Screen body */
  #screen_play .screen_body {
    padding: 30px 0 55px 0;
  }
  
  /* Screen header */
  #screen_play .screen_header {
    height: 30px;
    top: 0;
    left: 0;
  }
  
  /* Screen footer */
  #screen_play .screen_footer {
    height: 55px;
    bottom: 0;
    left: 0;
  }
  
  /* Scores */
  #scores {
    top: 0;
    left: 10px;
  }
  
  /* Time */
  #time {
    top: 0;
    right: 10px;
  }
  
  /* Buttons */
  a#button_pause {
    bottom: 5px;
    left: 10px;
  }
  a#button_restart {
    bottom: 5px;
    left: 65px;
  }
  
  #screen_play a.button.music {
    bottom: 5px;
    right: 120px;
  }
  .no-language-switch #screen_play a.button.music {
    right: 65px;
  }
  #screen_play a.button.sound {
    bottom: 5px;
    right: 65px;
  }
  .no-language-switch #screen_play a.button.sound {
    right: 10px;
  }
  #screen_play a.button.language {
    bottom: 5px;
    right: 10px;
  }
  
  a#button_menu {
    display: none;
  }
  
}

/* Landscape */

@media only screen and (orientation: landscape) {
  
  /* Screen body */
  #screen_play .screen_body {
    padding: 0 0 55px 0;
  }
  
  /* Screen header */
  #screen_play .screen_header {
    display: none;
  }
  
  /* Screen footer */
  #screen_play .screen_footer {
    height: 55px;
    bottom: 0;
    left: 0;
  }
  
  /* Scores */
  #scores {
    bottom: 13px;
    left: 10px;
  }
  
  /* Time */
  #time {
    display: none;
  }
  
  /* Buttons */
  a#button_pause {
    bottom: 5px;
    right: 65px;
  }
  a#button_menu {
    bottom: 5px;
    right: 10px;
  }
  
  a#button_restart {
    display: none;
  }
  #screen_play a.button.music {
    display: none;
  }
  #screen_play a.button.sound {
    display: none;
  }
  #screen_play a.button.language {
    display: none;
  }
  
}

@media only screen and (orientation: landscape) and (min-width: 375px) {
  
  /* Time */
  #time {
    display: block;
    bottom: 13px;
    right: 125px;
  }
  
}

@media only screen and (orientation: landscape) and (min-width: 575px) {
  
  /* Time */
  #time {
    display: block;
    bottom: 13px;
    right: 10px;
  }
  
  /* Buttons */
  #buttons {
    width: 100%;
    position: absolute;
    bottom: 5px;
    left: 0;
    font-size: 0;
    line-height: 0;
    text-align: center;
  }
  #buttons .button {
    margin: 0 5px 0 5px;
  }
  
  a#button_pause {
    display: inline-block;
    position: static;
  }
  a#button_restart {
    display: inline-block;
    position: static;
  }
  #screen_play a.button.music {
    display: inline-block;
    position: static;
  }
  #screen_play a.button.sound {
    display: inline-block;
    position: static;
  }
  #screen_play a.button.language {
    display: inline-block;
    position: relative;
  }
  
  a#button_menu {
    display: none;
  }
  
}


/* 6) Score screen ------------------------------------------------------------------------------ */

#screen_score {
  background-image: url('images/backgrounds/score.svg');
}

#screen_score .screen_overlay1,
#screen_score .screen_overlay2,
#screen_score .screen_overlay3 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition:    opacity 500ms ease-in-out;
  -o-transition:      opacity 500ms ease-in-out;
  -ms-transition:     opacity 500ms ease-in-out;
  transition:         opacity 500ms ease-in-out;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  /* prevent flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
#screen_score .screen_overlay1.visible,
#screen_score .screen_overlay2.visible,
#screen_score .screen_overlay3.visible {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
  filter: alpha(opacity=1);
}
#screen_score .screen_overlay1 {
  background-image: url('images/backgrounds/score_overlay1.svg');
}
#screen_score .screen_overlay2 {
  background-image: url('images/backgrounds/score_overlay2.svg');
}
#screen_score .screen_overlay3 {
  background-image: url('images/backgrounds/score_overlay3.svg');
}

#screen_score .screen_body {
  padding: 0 0 55px 0;
}

#screen_score .message_container {
  min-width: 0;
}
#screen_score .message {
  display: block;
}
#screen_score .message p {
  color: #fa0;
  margin: 0 0 10px 0;
}
#screen_score .message table {
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  color: #fff;
  border-top: 1px solid #666;
}
#screen_score .message table th {
  text-align: left;
  padding: 0 25px 0 0;
}
#screen_score .message table td {
  text-align: right;
}
#screen_score .message table thead,
#screen_score .message table tbody,
#screen_score .message table tfoot {
  border-bottom: 1px solid #666;
}

@media all and (max-height: 310px) {
  #screen_score .message table thead {
    display: none;
  }
}

@media all and (max-height: 230px) {
  #screen_score .message table tbody {
    display: none;
  }
}

@media all and (max-height: 170px) {
  #screen_score .message p {
    display: none;
  }
}

#screen_score .screen_footer {
  height: 55px;
  bottom: 0;
  left: 0;
}

#screen_score a.button.music {
  bottom: 5px;
  left: 10px;
}
#screen_score a.button.sound {
  bottom: 5px;
  left: 65px;
}
#screen_score a.button.language {
  bottom: 5px;
  left: 120px;
}

#screen_score #button_proceed {
  bottom: 5px;
  right: 10px;
}


/* 7) Languages screen -------------------------------------------------------------------------- */

#screen_languages {
  background-image: url('images/backgrounds/loading.svg');
}

#screen_languages .screen_body {
  padding: 0 0 55px 0;
}

#language_buttons {
  width: 100%;
  height: 100%;
  font-size: 0;
  line-height: 0;
}
a.language_button {
  width:  33.333333333333333%;
  height: 33.333333333333333%;
  display: inline-block;
}
a.language_button div.flag_container1 {
  width: 100%;
  height: 100%;
  display: table;
}
a.language_button div.flag_container2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
a.language_button span {
  width: 100%;
  height: 100%;
  max-width: 67px;
  max-height: 50px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 0 auto 0 auto;
}
@media all and (min-width: 700px) {
  a.language_button span {
    max-width: 133px;
    max-height: 100px;
  }
}
@media all and (min-height: 700px) {
  a.language_button span {
    max-width: 133px;
    max-height: 100px;
  }
}
a#language_button_en span { background-image: url('images/flags/en.svg'); }
a#language_button_de span { background-image: url('images/flags/de.svg'); }
a#language_button_fr span { background-image: url('images/flags/fr.svg'); }
a#language_button_nl span { background-image: url('images/flags/nl.svg'); }
a#language_button_es span { background-image: url('images/flags/es.svg'); }
a#language_button_pt span { background-image: url('images/flags/pt.svg'); }
a#language_button_pl span { background-image: url('images/flags/pl.svg'); }
a#language_button_tr span { background-image: url('images/flags/tr.svg'); }
a#language_button_ru span { background-image: url('images/flags/ru.svg'); }

#screen_languages .screen_footer {
  height: 55px;
  bottom: 0;
  left: 0;
}

#screen_languages a#button_back {
  bottom: 5px;
  left: 10px;
}
#screen_languages a.button.music {
  bottom: 5px;
  right: 65px;
}
#screen_languages a.button.sound {
  bottom: 5px;
  right: 10px;
}


/* Cards ---------------------------------------------------------------------------------------- */

#cards_container {
  width: 100%;
  height: 100%;
  display: none;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

.card_container1 {
  float: left;
  position: relative;
}

.card_container2 {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  -webkit-perspective: 500px;
  perspective:         500px;
  /* Disappear effect */
  -webkit-transition: all 1000ms;
  -moz-transition:    all 1000ms;
  -ms-transition:     all 1000ms;
  -o-transition:      all 1000ms;
  transition:         all 1000ms;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  /* Flip effect */
  -webkit-transform-style: preserve-3d;
  transform-style:         preserve-3d;
  -webkit-transition: transform 1000ms;
  -moz-transition:    transform 1000ms;
  -ms-transition:     transform 1000ms;
  -o-transition:      transform 1000ms;
  transition:         transform 1000ms;
}
.card .front,
.card .back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-align: center;
  /* Flip effect */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .front {
  background-image: url('images/card.svg');
  cursor: pointer;
}
.card .back {
  /* Flip effect */
  transform: rotateY(180deg);
}
.flipped .card {
  /* Flip effect */
  transform: rotateY(180deg);
}
.card span {
  width: 30px;
  height: 30px;
  position: relative;
  display: inline-block;
  background-color: #fff;
  line-height: 30px;
  text-align: center;
  color: #000;
  margin: 10px 0 0 0;
  /* Flip effect */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.no-debug .card span {
  display: none;
}

.disappear .card_container2 {
  /* Disappear effect */
  -moz-opacity: 0;
  opacity: 0;
  -webkit-transform: scale(0.01);
  -moz-transform:    scale(0.01);
  -ms-transform:     scale(0.01);
  -o-transform:      scale(0.01);
  transform:         scale(0.01);
}

.object1  .back { background-image: url('images/objects/object1.svg');  }
.object2  .back { background-image: url('images/objects/object2.svg');  }
.object3  .back { background-image: url('images/objects/object3.svg');  }
.object4  .back { background-image: url('images/objects/object4.svg');  }
.object5  .back { background-image: url('images/objects/object5.svg');  }
.object6  .back { background-image: url('images/objects/object6.svg');  }
.object7  .back { background-image: url('images/objects/object7.svg');  }
.object8  .back { background-image: url('images/objects/object8.svg');  }
.object9  .back { background-image: url('images/objects/object9.svg');  }
.object10 .back { background-image: url('images/objects/object10.svg'); }
.object11 .back { background-image: url('images/objects/object11.svg'); }
.object12 .back { background-image: url('images/objects/object12.svg'); }

/* Old browser */
.old-browser .card {
  -webkit-transform-style: flat;
  transform-style:         flat;
  -webkit-transition: all 0s ease 0s;
  -moz-transition:    all 0s ease 0s;
  -ms-transition:     all 0s ease 0s;
  -o-transition:      all 0s ease 0s;
  transition:         all 0s ease 0s;
}
.old-browser .card .back,
.old-browser .card .front {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
.old-browser .card .front {
  display: block;
}
.old-browser .card .back {
  display: none;
  transform: none;
}
.old-browser .flipped .card {
  transform: none;
}
.old-browser .flipped .card .front {
  display: none;
}
.old-browser .flipped .card .back {
  display: block;
}

/* 4 cards */
.total_4 .card_container1 {
  width: 50%;
  height: 50%;
}

/* 8 cards */
@media all and (orientation:landscape) {
  .total_8 .card_container1 {
    width: 25%;
    height: 50%;
  }
}
@media all and (orientation:portrait) {
  .total_8 .card_container1 {
    width: 50%;
    height: 25%;
  }
}

/* 12 cards */
@media all and (orientation:landscape) {
  .total_12 .card_container1 {
    width: 25%;
    height: 33.333333333333333%;
  }
}
@media all and (orientation:portrait) {
  .total_12 .card_container1 {
    width: 33.333333333333333%;
    height: 25%;
  }
}

/* 16 cards */
.total_16 .card_container1 {
  width: 25%;
  height: 25%;
}

/* 20 cards */
@media all and (orientation:landscape) {
  .total_20 .card_container1 {
    width: 20%;
    height: 25%;
  }
}
@media all and (orientation:portrait) {
  .total_20 .card_container1 {
    width: 25%;
    height: 20%;
  }
}

/* 24 cards */
@media all and (orientation:landscape) {
  .total_24 .card_container1 {
    width: 16.666666666666667%;
    height: 25%;
  }
}
@media all and (orientation:portrait) {
  .total_24 .card_container1 {
    width: 25%;
    height: 16.666666666666667%;
  }
}