/* TODO: fix this */
.panel, .view {
  /* min-height: 1000px;*/ }

/*********************/
/*** font
/*********************/
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Cond Light"), local("OpenSans-CondensedLight"), url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format("woff"); }

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Condensed Bold"), local("OpenSans-CondensedBold"), url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format("woff"); }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff"); }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format("woff"); }

/* @font-face {
    font-family: 'digital';
    src: url('../fonts/DIGITALDREAMNARROW-webfont.eot');
    src: url('../fonts/DIGITALDREAMNARROW-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DIGITALDREAMNARROW-webfont.woff') format('woff'),
         url('../fonts/DIGITALDREAMNARROW-webfont.ttf') format('truetype'),
         url('../fonts/DIGITALDREAMNARROW-webfont.svg#digital_dream_narrowregular') format('svg');
    font-weight: normal;
    font-style: normal;
} */
/*********************/
/*** Reset
/*********************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
      user-select: none; }

h1 {
  font-size: 1.5em;
  line-height: 1em; }

h2 {
  font-size: 1.3em;
  line-height: 1.3em;
  font-weight: normal; }

img {
  max-width: 100%; }

.clearfix {
  /* *zoom: 1; */ }

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0; }

.clearfix:after {
  clear: both; }

.left {
  text-align: left; }

.right {
  text-align: right; }

.pull-left {
  float: left; }

.pull-right {
  float: right; }

input, button {
  font-family: "Open Sans", Helvetica Neue , Helvetica, Arial, sans-serif; }

/*********************/
/*** General
/*********************/
html {
  height: 100%; }

body {
  font-family: "Open Sans", Helvetica Neue , Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  height: 100%;
  margin: 0;
  background: url(/images/bg.jpg) 0 0 no-repeat fixed;
  background-size: cover;
  background-color: #71cae7;
  overflow-x: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

body.bg-day {
  transition: all 0.5s linear; }

body.bg-night {
  background: url(/images/bg-night.jpg) 0 0 no-repeat fixed;
  background-size: cover;
  background-color: #172631; }

body.bg-night .picture-wheel h1 {
  color: #fff; }

body.bg-night .cloud1, body.bg-night .cloud2 {
  opacity: 0;
  transition: all 0.5s linear; }

body.bg-day .cloud1, body.bg-day .cloud2 {
  opacity: 1;
  transition: all 0.5s linear; }

.body-scrollable,
.body-belt {
  height: auto;
  background-size: inherit; }

a {
  cursor: pointer;
  text-decoration: none;
  color: inherit; }

.clickme {
  cursor: pointer; }

.wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%; }

.grab {
  cursor: -webkit-grab !important;
  cursor: grab !important; }

.container {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 600px;
  height: 600px;
  margin-left: -300px; }

.link,
.button-green {
  cursor: pointer;
  margin: 0.5em auto;
  border: solid 1px #93c60b;
  /* bottom: 20px;
  right: 10px; */
  color: #fff;
  background-color: #93c60b;
  border-radius: 4px;
  padding: 0.8em 1em;
  text-align: center;
  display: inline-block; }

.link {
  border: none;
  background: transparent; }

.link:hover,
.button-green:hover {
  opacity: 0.8; }

.button-green.white {
  background-color: #fff;
  color: #666;
  border: solid 1px #fff; }

.button-green.transparent {
  background: none;
  color: #93c60b; }

.button-green.inactive:hover,
.button-green.inactive {
  opacity: 0.5;
  cursor: default; }

.button-green.black {
  background: none;
  color: #999;
  border-color: #999; }

.opaque {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.85);
  height: 100%;
  width: 100%;
  z-index: 100;
  display: none; }

/* apply to chrome */
/* @media screen and (-webkit-min-device-pixel-ratio:0) { */
/*  .opaque{ */
/*     background:rgba(0,0,0,0.85); */
/*  } */
/* } */
@-webkit-keyframes fadeInDown {
  0%, 100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  15%, 85% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDown {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; }
  100% {
    opacity: 1;
    visibility: hidden;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%); } }

#panelarticles {
  overflow: auto;
  height: 100%;
  position: absolute;
  z-index: 1002; }

.game-notice {
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 2em 0;
  z-index: 101;
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%); }

.game-notice.animate {
  -webkit-animation: fadeInDown 3s ease forwards;
  animation: fadeInDown 3s 0s ease forwards; }

.game-notice h1 {
  font-size: 2em;
  line-height: 1em;
  color: #666;
  font-weight: 300;
  padding: 0 1em 0.3em; }

.game-notice h1 + p {
  display: none;
  padding: 0 1em; }

.game-panel {
  text-align: center;
  margin: 1em 0;
  color: #FFFFFF;
  min-width: 7em;
  /* line-height: 1em; */ }

.game-panel > div {
  font-size: 1.2em;
  line-height: 2em;
  font-weight: 300;
  text-align: left; }

.img-pushup {
  position: absolute;
  top: 6em;
  right: 3em;
  background: url(../images/gym-pushup.png) center top no-repeat;
  background-size: 5em;
  width: 5em;
  height: 5em; }

.pull-left .game-panel > div {
  text-align: right; }

.game-panel > div:first-child {
  /* padding-top:0.5em;
  margin:0.5em 0;
  border-top:solid 1px #B1B1B1; */
  /* font-size:1em; */ }

.game-panel .game-level {
  border-bottom: solid 1px #B1B1B1; }

.game-level b {
  font-weight: 300; }

.game-panel .game-number {
  /* font-size: 1.5em; */
  position: absolute;
  top: 1.8em;
  left: 50%;
  width: 6em;
  margin-left: -3em;
  text-align: center !important; }

.game-lives {
  /*  border-top: solid 1px #B1B1B1; */
  /* padding: 0.5em 0; */ }

.game-panel .game-timer {
  font-size: 2em; }

@-webkit-keyframes ani-deduct {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0); }
  100% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-100px); } }

@keyframes ani-deduct {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px); } }

.deduct-point {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 101;
  font-size: 1.5em;
  color: #f00;
  margin-left: -0.5em; }

.deduct-point.animate {
  -webkit-animation: ani-deduct 1s ease forwards;
  animation: ani-deduct 1s ease forwards; }

/*********************/
/*** Loding info
/*********************/
.loading-holder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.5em;
  margin-left: -0.5em;
  font-size: 100px;
  width: 1em;
  height: 1em;
  list-style: none;
  -webkit-transform: scale(0.6);
          transform: scale(0.6); }
  .loading .load-text {
    position: absolute;
    top: 120%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 0.2em;
    color: #fff; }
  .loading li {
    position: absolute;
    width: .2em;
    height: .2em;
    border-radius: 50%; }
  .loading li:nth-child(1) {
    left: 50%;
    top: 0;
    margin: 0 0 0 -.1em;
    background: #00C176;
    -webkit-transform-origin: 50% 250%;
            transform-origin: 50% 250%;
    -webkit-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
            animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate; }
  .loading li:nth-child(2) {
    top: 50%;
    right: 0;
    margin: -.1em 0 0 0;
    background: #FF003C;
    -webkit-transform-origin: -150% 50%;
            transform-origin: -150% 50%;
    -webkit-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
            animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate; }
  .loading li:nth-child(3) {
    left: 50%;
    bottom: 0;
    margin: 0 0 0 -.1em;
    background: #FABE28;
    -webkit-transform-origin: 50% -150%;
            transform-origin: 50% -150%;
    -webkit-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
            animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate; }
  .loading li:nth-child(4) {
    top: 50%;
    left: 0;
    margin: -.1em 0 0 0;
    background: #88C100;
    -webkit-transform-origin: 250% 50%;
            transform-origin: 250% 50%;
    -webkit-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
            animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate; }

@-webkit-keyframes rota {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes rota {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@-webkit-keyframes opa {
  12.0% {
    opacity: 0.80; }
  19.5% {
    opacity: 0.88; }
  37.2% {
    opacity: 0.64; }
  40.5% {
    opacity: 0.52; }
  52.7% {
    opacity: 0.69; }
  60.2% {
    opacity: 0.60; }
  66.6% {
    opacity: 0.52; }
  70.0% {
    opacity: 0.63; }
  79.9% {
    opacity: 0.60; }
  84.2% {
    opacity: 0.75; }
  91.0% {
    opacity: 0.87; } }

@keyframes opa {
  12.0% {
    opacity: 0.80; }
  19.5% {
    opacity: 0.88; }
  37.2% {
    opacity: 0.64; }
  40.5% {
    opacity: 0.52; }
  52.7% {
    opacity: 0.69; }
  60.2% {
    opacity: 0.60; }
  66.6% {
    opacity: 0.52; }
  70.0% {
    opacity: 0.63; }
  79.9% {
    opacity: 0.60; }
  84.2% {
    opacity: 0.75; }
  91.0% {
    opacity: 0.87; } }

.load-one {
  opacity: 0;
  -webkit-animation: dot 1.3s linear 0.0s infinite;
          animation: dot 1.3s linear 0.0s infinite; }

.load-two {
  opacity: 0;
  -webkit-animation: dot 1.3s linear 0.2s infinite;
          animation: dot 1.3s linear 0.2s infinite; }

.load-three {
  opacity: 0;
  -webkit-animation: dot 1.3s linear 0.3s infinite;
          animation: dot 1.3s linear 0.3s infinite; }

@-webkit-keyframes dot {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes dot {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

/*********************/
/*** Global Header
/*********************/
header {
  width: 100%;
  /* background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.4); */
  position: relative; }

.game-menu-holder {
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  width: 80%;
  padding: 2em 0;
  margin-left: 10%;
  font-size: 0.8em;
  color: #fff;
  z-index: 10;
  background: transparent; }

.body-belt .game-menu-holder,
.body-intro .game-menu-holder,
.body-missions .game-menu-holder,
.body-home .game-menu-holder {
  display: table; }

.bg-header .game-menu-holder {
  background: transparent;
  border-radius: 0 0 10px 10px; }

.body-belt:after {
  content: "";
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6em;
  opacity: 0; }

.bg-header.show .game-menu-holder {
  /* background: rgba(0, 0, 0, 0.7); */
  /* -webkit-transition:background 0.5s ease; */
  /* transition:background 0.5s ease; */ }

.body-belt.show:after {
  opacity: 1;
  transition: opacity 0.5s ease; }

.body-intro .game-menu-holder .game-menu.middle,
.body-intro .game-menu-holder .game-menu.right {
  display: none; }

.body-intro .game-menu-holder .game-menu.left {
  width: 15em;
  display: block; }

.game-menu {
  width: 10%;
  display: table-cell;
  /* height: 3em; */
  vertical-align: middle; }

.game-menu.middle {
  width: 80%;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5); }

.game-menu.middle .button-holder {
  display: table;
  margin: 0 auto; }

.game-menu.middle span {
  text-transform: uppercase; }

.game-menu.middle .button {
  padding: 0 1em;
  color: rgba(255, 255, 255, 0.6);
  min-width: 8.35em;
  text-align: center; }

.game-menu.middle .button.active {
  border-bottom: solid 1px #fff;
  color: white; }

.game-menu.middle .button.inactive {
  cursor: default; }

.game-menu.middle .button.active span {
  font-size: 1.2em; }

.game-menu .button {
  cursor: pointer;
  display: table-cell;
  height: 3em;
  vertical-align: middle; }

.game-home {
  padding: 0 1em; }

.game-menu .button.game-home {
  display: block; }

.game-menu .icon {
  display: inline-block;
  vertical-align: middle;
  width: 4em;
  height: 4em;
  margin-right: 0.5em;
  background: url("/images/main-dropdown-left.png") 0 0 no-repeat;
  background-size: 4em; }

.game-menu .dropdown {
  padding: 0 1em;
  position: absolute;
  top: -0.6em;
  left: 0;
  height: 0;
  min-height: 0;
  overflow: hidden;
  transition: min-height 0.5s ease; }

.game-menu .dropdown.right {
  left: auto;
  right: 0;
  top: 5em; }

.game-menu .dropdown.open {
  min-height: 25em;
  transition: min-height 0.5s ease; }

.game-menu .dropdown .item {
  cursor: pointer;
  opacity: 0.8;
  margin: 0.5em 0; }

.game-menu .dropdown .item:hover {
  opacity: 1; }

.game-menu .dropdown .item .img-holder {
  display: inline-block;
  vertical-align: middle;
  width: 4em;
  height: 4em;
  padding-left: 0.5em; }

.game-menu .icon.i2 {
  background-position: 0 -4em; }

.game-menu .icon.i3 {
  background-position: 0 -8em; }

.game-menu .icon.i4 {
  background-position: 0 -12em; }

.game-menu .icon.i5 {
  background-position: 0 -16em; }

.game-menu .dropdown .item.off .icon.i5 {
  background-position: 0 -20em; }

.game-menu .icon.i6 {
  background-position: 0 -18em; }

/* .game-menu .game-belt{ */
/*   line-height: 1em; */
/*   max-width: 10em; */
/*   padding: 0 1em; */
/*   border-right: solid 1px rgba(204, 204, 204, 0.2); */
/* } */
/* .game-menu .game-belt a{ */
/*   color:#88d4f2; */
/*   text-decoration:underline; */
/* } */
/* .game-menu .game-benefit{ */
/*   padding: 0 1em; */
/*   border-right: solid 1px rgba(204, 204, 204, 0.2); */
/* } */
.game-header {
  color: #fff;
  position: relative;
  z-index: 3; }

.learntime-container {
  position: fixed;
  right: 9em;
  top: 2.5em; }

.library .learntime-container {
  top: 1.8em; }

.game-lives .live {
  background: url(/images/game-menu-lives.png) center 0 no-repeat;
  background-size: 1.42em;
  display: inline-block;
  vertical-align: middle;
  width: 1.42em;
  height: 1.42em; }

.game-lives .live.green {
  /* background-position:center -20px; */
  background-position: center -1.42em; }

.game-lives .live.red {
  background-position: center -1.42em; }

.level-holder {
  position: relative;
  border: solid 1px #ccc;
  border-width: 0 1px 0px;
  padding: 0 1em; }

.level-holder .progress {
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -2.5px;
  margin-left: -30%;
  width: 60%; }

.game-user {
  padding: 0 1em; }

.game-user .img-holder {
  width: 4em;
  height: 4em;
  margin: 0;
  overflow: hidden;
  border-radius: 100%; }

.game-user .text {
  height: 3em;
  display: inline-block;
  vertical-align: middle;
  line-height: 4em;
  margin-right: 2em;
  position: relative; }

.game-user .text:after {
  content: "";
  position: absolute;
  top: 51%;
  right: -1.5em;
  width: 1em;
  height: 1em;
  background: url(/images/main-dropdown-arrow.png) center center no-repeat;
  background-size: 0.85em; }

.game-user .text.nextbeltname-text:after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

/* .game-leader{
  background: url(/images/game-menu-leaderboard.png) center center no-repeat;

  background-size: 2.5em;
  padding: 0 1em;
  min-width: 3em;
  border-right: solid 1px rgba(204, 204, 204, 0.2);
} */
/* .game-sound{
  min-width: 3em;
  border-right: solid 1px rgba(204, 204, 204, 0.2);
}
.game-sound > div{
  background-image:url(/images/icon-sound-black.png);
  position: relative;
  margin: 0.3em auto;
  bottom: 0;
  right: 0;
} */
.menu {
  cursor: pointer;
  background-image: url(/images/icon-menu.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  position: absolute;
  top: 0px;
  left: 10px;
  width: 40px;
  height: 40px;
  margin: 5px;
  z-index: 10; }

.sound-control {
  cursor: pointer;
  position: fixed;
  bottom: 1em;
  right: 1em;
  width: 50px;
  height: 50px;
  background: url(/images/icon-sound.png) 0 0 no-repeat;
  z-index: 99; }

.sound-control:hover {
  opacity: 0.8; }

.sound-control.on {
  background-position: 0 0; }

.sound-control.off {
  background-position: 0 -50px; }

.game-exit {
  cursor: pointer;
  position: fixed;
  bottom: 1em;
  left: 1em;
  width: 3em;
  height: 3em;
  background: url(/images/icon-exit.png) 0 0 no-repeat;
  background-size: 3em;
  z-index: 99;
  text-indent: -9999px; }

.game-exit:hover {
  opacity: 0.8; }

.home {
  cursor: pointer;
  float: left;
  padding-right: 20px;
  margin-top: 0.5em; }

.home:hover {
  opacity: 0.8; }

/* Does not seem to be in use
.score {
  float:left;
  margin-top: 0.5em;
}*/
.lives {
  background-image: url(/images/icon-lives.png);
  background-repeat: no-repeat;
  background-position: left;
  position: absolute;
  right: 4.5em;
  top: 0.5em;
  width: 35px;
  text-align: right;
  padding: 5px;
  color: white; }

.diamonds {
  background-image: url(/images/icon-diamond.png);
  background-repeat: no-repeat;
  background-position: left;
  position: absolute;
  right: 8.5em;
  top: 0.5em;
  text-align: right;
  padding: 5px;
  padding-left: 35px;
  color: #fff; }

.menu-left-holder {
  position: absolute;
  left: 60px;
  top: 0px;
  padding: 5px;
  color: #fff; }

.menu-left-holder .button-green {
  display: inline-block;
  float: left;
  min-width: inherit;
  margin: 0;
  margin-left: 20px;
  width: auto;
  margin-top: -5px;
  padding: 5px 10px;
  font-size: 0.8em; }

/*********************/
/*** Home
/*********************/
/* @-webkit-keyframes cloud{
  0%{
    opacity:0.8;
    -webkit-transform:translate(-100px , 0px);
  }
  50%{
    opacity:1;
    -webkit-transform:translate(900px , -10px);
  }
  100%{
    opacity:0;
    -webkit-transform:translate(1800px, 0px);
  }
}
@keyframes cloud{
  0%{
    opacity:0.8;
    -webkit-transform:translate(-100px , 0px);
    -ms-transform:translate(-100px , 0px);
    transform:translate(-100px , 0px);
  }
  50%{
    opacity:1;
    -webkit-transform:translate(900px , -10px);
    -ms-transform:translate(900px , -10px);
    transform:translate(900px , -10px);
  }
  100%{
    opacity:0;
    -webkit-transform:translate(1800px, 0px);
    -ms-transform:translate(1800px, 0px);
    transform:translate(1800px, 0px);
  }
} */
.home-start .cloud1,
.home-start .cloud2 {
  background: url(/images/main-cloud1.png) center center no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  /*  -webkit-animation: cloud 50s linear infinite;
  animation: cloud 50s linear infinite; */ }

.home-start .cloud2 {
  background-image: url(/images/main-cloud2.png);
  background-size: contain; }

.picture-wheel {
  /* uncomment the following if you want to lose scrolling */
  /* position: absolute; */
  /* top: 50%; */
  /* left: 50%; */
  /* margin-left: -16em; */
  width: 40em;
  height: 40em;
  font-size: 16px;
  /* margin-top: 15em; */ }

.picture-wheel h1 {
  color: #fff;
  font-size: 1em;
  text-align: center;
  margin-top: -1em;
  display: none; }

.cover-wheel {
  width: 13em;
  height: 13em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6.5em;
  margin-left: -6.5em;
  border: 2px solid transparent;
  border-radius: 100%;
  background-color: #FFF;
  z-index: 3;
  /* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); */ }

.cover-wheel.game {
  /* cursor:pointer; */
  background: url(/images/main-day.png) center 40% no-repeat;
  background-size: contain;
  background-color: transparent;
  transition: all 0.5s linear; }

.cover-wheel.game.night {
  background-image: url(/images/main-night.png); }

.cover-wheel.active {
  border-color: #aad82f; }

.cover-wheel .close {
  position: absolute;
  top: 1.2em;
  right: 2em;
  width: 40px;
  height: 40px;
  background: url(/images/icon-close.png) right center no-repeat;
  background-size: 8px;
  text-indent: -9999px;
  cursor: pointer; }

.cover-wheel.hide {
  opacity: 0;
  visibility: hidden;
  display: block !important; }

.cover-wheel.hide .text {
  opacity: 0;
  transition: all 0.5s ease; }

.cover-wheel .text {
  padding: 0 2em;
  text-align: center;
  display: table-cell;
  width: 13em;
  height: 15em;
  vertical-align: middle;
  font-size: 0.8em;
  opacity: 1;
  /* -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease; */ }

.cover-wheel .text b {
  padding-bottom: 0.5em;
  display: block;
  line-height: 1.1em; }

.cover-wheel.game .text {
  color: #000;
  height: 30%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0; }

.cover-wheel.game .text .button.view-game {
  color: #fff; }

.cover-wheel .text h1 {
  font-weight: normal; }

.cover-wheel .text > p {
  /* font-size: 0.7em; */
  line-height: 1.3em;
  margin: 0.2em 0 1em; }

.cover-wheel .text .button {
  font-size: 0.9em;
  border: solid 1px #d1d1d1;
  padding: 0.5em 1em;
  border-radius: 4px;
  color: #666; }

.cover-wheel.game .text .button {
  font-size: 1em;
  border: none;
  padding: 0;
  border-radius: 0;
  cursor: default; }

/* .cover-wheel .text .button:hover{
  opacity:0.8;
} */
.inner-wheel,
.outer-wheel {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }

.outer-wheel {
  z-index: 3; }

.inner-wheel {
  z-index: 2; }

.inner-wheel.reverse,
.outer-wheel.reverse {
  z-index: 1; }

.slice {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6em;
  height: 6em;
  margin-top: -3em;
  margin-left: -3em;
  border-radius: 100%;
  border: 2px solid transparent;
  background: url("/images/main-bank-vault.png") center center no-repeat;
  background-size: 6.6em;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s linear; }

.slice:hover {
  top: 49.5%; }

.inner-wheel.animate .slice,
.outer-wheel.animate .slice {
  opacity: 1;
  transition: opacity 0.3s linear; }

.slice.inactive {
  /* opacity:0.3; */ }

/* .picture-wheel .slice.inactive{
  opacity: 0.3;

  -webkit-transition-delay:0s !important;
  transition-delay:0s !important;
} */
.picture-wheel .slice:nth-child(1) {
  -webkit-transform: translate(0, -11em);
  transform: translate(0, -11em);
  transition-delay: 0.5s; }

.picture-wheel .slice:nth-child(2) {
  -webkit-transform: translate(8.2em, -8.2em);
  transform: translate(8.2em, -8.2em);
  transition-delay: 0.6s; }

.picture-wheel .slice:nth-child(3) {
  -webkit-transform: translate(11em, 0);
  transform: translate(11em, 0);
  transition-delay: 0.7s; }

.picture-wheel .slice:nth-child(4) {
  -webkit-transform: translate(8.2em, 8.2em);
  transform: translate(8.2em, 8.2em);
  transition-delay: 0.8s; }

.picture-wheel .slice:nth-child(5) {
  -webkit-transform: translate(0, 11em);
  transform: translate(0, 11em);
  transition-delay: 0.9s; }

.picture-wheel .slice:nth-child(6) {
  -webkit-transform: translate(-8.2em, 8.2em);
  transform: translate(-8.2em, 8.2em);
  transition-delay: 1s; }

.picture-wheel .slice:nth-child(7) {
  -webkit-transform: translate(-11em, 0);
  transform: translate(-11em, 0);
  transition-delay: 1.1s; }

.picture-wheel .slice:nth-child(8) {
  -webkit-transform: translate(-8.2em, -8.2em);
  transform: translate(-8.2em, -8.2em);
  transition-delay: 1.2s; }

/***********12 icons for system*************/
.picture-wheel .inner-wheel .slice {
  width: 4.5em;
  height: 4.5em;
  margin-left: -2.25em;
  margin-top: -2.25em;
  background-size: cover; }

.picture-wheel .inner-wheel .slice:nth-child(1) {
  -webkit-transform: translate(0, -11em);
  transform: translate(0, -11em);
  transition-delay: 0s; }

.picture-wheel .inner-wheel .slice:nth-child(2) {
  -webkit-transform: translate(5.5em, -9.5em);
  transform: translate(5.5em, -9.5em);
  transition-delay: 0.1s; }

.picture-wheel .inner-wheel .slice:nth-child(3) {
  -webkit-transform: translate(9.5em, -5.5em);
  transform: translate(9.5em, -5.5em);
  transition-delay: 0.2s; }

.picture-wheel .inner-wheel .slice:nth-child(4) {
  -webkit-transform: translate(11em, 0);
  transform: translate(11em, 0);
  transition-delay: 0.3s; }

.picture-wheel .inner-wheel .slice:nth-child(5) {
  -webkit-transform: translate(9.5em, 5.5em);
  transform: translate(9.5em, 5.5em);
  transition-delay: 0.4s; }

.picture-wheel .inner-wheel .slice:nth-child(6) {
  -webkit-transform: translate(5.5em, 9.5em);
  transform: translate(5.5em, 9.5em);
  transition-delay: 0.5s; }

.picture-wheel .inner-wheel .slice:nth-child(7) {
  -webkit-transform: translate(0, 11em);
  transform: translate(0, 11em);
  transition-delay: 0.6s; }

.picture-wheel .inner-wheel .slice:nth-child(8) {
  -webkit-transform: translate(-5.5em, 9.5em);
  transform: translate(-5.5em, 9.5em);
  transition-delay: 0.7s; }

.picture-wheel .inner-wheel .slice:nth-child(9) {
  -webkit-transform: translate(-9.5em, 5.5em);
  transform: translate(-9.5em, 5.5em);
  transition-delay: 0.8s; }

.picture-wheel .inner-wheel .slice:nth-child(10) {
  -webkit-transform: translate(-11em, 0);
  transform: translate(-11em, 0);
  transition-delay: 0.9s; }

.picture-wheel .inner-wheel .slice:nth-child(11) {
  -webkit-transform: translate(-9.5em, -5.5em);
  transform: translate(-9.5em, -5.5em);
  transition-delay: 1s; }

.picture-wheel .inner-wheel .slice:nth-child(12) {
  -webkit-transform: translate(-5.5em, -9.5em);
  transform: translate(-5.5em, -9.5em);
  transition-delay: 1.1s; }

/*****************************/
/****************************/
.outer-wheel .slice:nth-child(1) {
  background-image: url(/images/main-face.png); }

.outer-wheel .slice:nth-child(2) {
  background-image: url(/images/main-bankv.png); }

.outer-wheel .slice:nth-child(3) {
  background-image: url(/images/main-meeting.png); }

.outer-wheel .slice:nth-child(4) {
  background-image: url(/images/main-mindmap.png); }

.outer-wheel .slice:nth-child(5) {
  background-image: url(/images/main-library.png); }

.outer-wheel .slice:nth-child(6) {
  background-image: url(/images/main-superm.png); }

.outer-wheel .slice:nth-child(7) {
  background-image: url(/images/main-vocab.png); }

.outer-wheel .slice:nth-child(8) {
  background-image: url(/images/main-time.png); }

/****************************/
.inner-wheel .slice:nth-child(1) {
  background-image: url(/images/main-doublesys.png); }

.inner-wheel .slice:nth-child(2) {
  background-image: url(/images/main-journeysys.png); }

.inner-wheel .slice:nth-child(3) {
  background-image: url(/images/main-namesys.png); }

.inner-wheel .slice:nth-child(4) {
  background-image: url(/images/main-clonesys.png); }

.inner-wheel .slice:nth-child(5) {
  background-image: url(/images/main-alphabetsys.png); }

.inner-wheel .slice:nth-child(6) {
  background-image: url(/images/main-rhymesys.png); }

.inner-wheel .slice:nth-child(7) {
  background-image: url(/images/main-timesys.png); }

.inner-wheel .slice:nth-child(8) {
  background-image: url(/images/main-knowledgesys.png); }

.inner-wheel .slice:nth-child(9) {
  background-image: url(/images/main-similaritysys.png); }

.inner-wheel .slice:nth-child(10) {
  background-image: url(/images/main-highlightsys.png); }

.inner-wheel .slice:nth-child(11) {
  background-image: url(/images/main-symbolizationsys.png); }

.inner-wheel .slice:nth-child(12) {
  background-image: url(/images/main-chainsys.png); }

/** reverse animation **/
.outer-wheel.reverse .slice,
.inner-wheel.reverse .slice {
  opacity: 0;
  transition: opacity 0.3s linear; }

.outer-wheel.reverse .slice:nth-child(1) {
  transition-delay: 0.7s; }

.outer-wheel.reverse .slice:nth-child(2) {
  transition-delay: 0.6s; }

.outer-wheel.reverse .slice:nth-child(3) {
  transition-delay: 0.5s; }

.outer-wheel.reverse .slice:nth-child(4) {
  transition-delay: 0.4s; }

.outer-wheel.reverse .slice:nth-child(5) {
  transition-delay: 0.3s; }

.outer-wheel.reverse .slice:nth-child(6) {
  transition-delay: 0.2s; }

.outer-wheel.reverse .slice:nth-child(7) {
  transition-delay: 0.1s; }

.outer-wheel.reverse .slice:nth-child(8) {
  transition-delay: 0s; }

.inner-wheel.reverse .slice:nth-child(1) {
  transition-delay: 1.1s; }

.inner-wheel.reverse .slice:nth-child(2) {
  transition-delay: 1s; }

.inner-wheel.reverse .slice:nth-child(3) {
  transition-delay: 0.9s; }

.inner-wheel.reverse .slice:nth-child(4) {
  transition-delay: 0.8s; }

.inner-wheel.reverse .slice:nth-child(5) {
  transition-delay: 0.7s; }

.inner-wheel.reverse .slice:nth-child(6) {
  transition-delay: 0.6s; }

.inner-wheel.reverse .slice:nth-child(7) {
  transition-delay: 0.5s; }

.inner-wheel.reverse .slice:nth-child(8) {
  transition-delay: 0.4s; }

.inner-wheel.reverse .slice:nth-child(9) {
  transition-delay: 0.3s; }

.inner-wheel.reverse .slice:nth-child(10) {
  transition-delay: 0.2s; }

.inner-wheel.reverse .slice:nth-child(11) {
  transition-delay: 0.1s; }

.inner-wheel.reverse .slice:nth-child(12) {
  transition-delay: 0; }

/****************************/
.slice .name {
  display: none; }

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }

.slice.lock:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5em;
  height: 5em;
  margin-top: -2.5em;
  margin-left: -2.5em;
  border-radius: 100%;
  border: solid 2px transparent;
  background: url(/images/lock-big.png) center center no-repeat;
  background-size: 1.5em;
  -webkit-transform: skewY(0deg);
  transform: skewY(0deg);
  z-index: 2; }

.slice.active.lock:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.6);
  border: solid 2px rgba(255, 255, 255, 0.6);
  margin-top: -2px;
  margin-left: -2px; }

.slice.lock.active:after {
  -webkit-animation: shake 0.5s ease;
  animation: shake 0.5s ease; }

.view-belt {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.56);
  padding: 0.5em 0;
  cursor: pointer; }

.view-belt:hover {
  background-color: rgba(255, 255, 255, 0.3); }

/*********************/
/*** Super market game
/*********************/
.super-market {
  width: 100%;
  height: 100%; }

.super-market.play {
  background: url(/images/bg-super-market-play.jpg) center center no-repeat;
  background-size: cover;
  transition: background 500ms linear; }

.super-market .intro {
  background: url(/images/bg-super-market-intro.jpg) center top no-repeat;
  background-size: cover; }

.super-market.gym .intro {
  background: url(/images/bg-gym-super-market-intro.jpg) center top no-repeat;
  background-size: cover; }

.game-button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 1em 0;
  z-index: 2; }
  .game-button .button {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: 5.2em;
    height: 5.2em;
    border-radius: 100%;
    background: url(/images/game-button.png) 0 1.3em no-repeat;
    background-color: #f33030;
    line-height: 7em;
    color: #fff;
    font-size: 0.8em;
    position: relative;
    z-index: 3; }
    .game-button .button.inactive {
      opacity: 0.5;
      cursor: default; }
    .game-button .button.inactive:hover {
      background-color: #f33030; }
    .game-button .button:hover {
      background-color: #f00; }
    .game-button .button.next {
      background-position: -5.8em 1.3em; }
    .game-button .button.page {
      background-position: -10.9em 1.3em; }
    .game-button .button.test {
      background-position: 0 1.3em;
      background-color: #89d32b; }
    .game-button .button.test:hover {
      background-color: #63B100; }
    .game-button .button.inactive.test:hover {
      background-color: #89d32b; }

.pagination {
  position: absolute;
  top: 3em;
  right: 3em;
  text-align: center;
  z-index: 1; }
  .pagination .page {
    width: 0.5em;
    height: 0.5em;
    display: block;
    border-radius: 100%;
    margin: 0.8em auto;
    text-indent: -9999px;
    background-color: #eee;
    box-shadow: inset 0 1px 1px #666;
    line-height: 0.5em;
    color: #000;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4); }
    .pagination .page.done {
      background-color: #85ED00;
      text-indent: 1em; }

.radial-timer {
  position: relative;
  /* overflow: hidden; */
  height: 3em;
  width: 3em;
  position: relative;
  text-align: center;
  font-size: 2em; }

@-webkit-keyframes ani-addpoint {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes ani-addpoint {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.add-point {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 101;
  font-size: 1.5em;
  color: #f00;
  margin-left: -0.5em; }

.add-point.animate {
  -webkit-animation: ani-addpoint 1s ease forwards;
          animation: ani-addpoint 1s ease forwards; }

@-webkit-keyframes ani-timer {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes ani-timer {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.radial-timer:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 90%;
  border: solid 2px transparent;
  border-radius: 100%;
  border-top-color: #7ec941;
  z-index: 1; }

.radial-timer.s-animate:after {
  -webkit-animation: ani-timer 1s linear infinite;
          animation: ani-timer 1s linear infinite; }

.radial-timer .number {
  position: relative;
  font-size: 1em;
  line-height: 3em;
  z-index: 2;
  color: #000; }

#panelvocab .radial-timer .number {
  color: #fff; }

.market-container {
  width: 42.85em;
  margin: 0 auto;
  padding-top: 6em; }

.market-frame {
  transition: all 500ms ease, opacity 1s ease;
  display: table-cell;
  width: 700px;
  height: 550px;
  vertical-align: middle; }

.market-holder {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  padding: 3.5em 0;
  height: 500px; }
  .market-holder .show-all {
    cursor: pointer;
    position: absolute;
    top: -3em;
    left: 0;
    width: 3em;
    height: 3em;
    background: #fff; }
  .market-holder .arrow {
    background: url(/images/meeting-arrow.png) center center no-repeat;
    position: absolute;
    bottom: -3em;
    width: 100%;
    text-align: center;
    cursor: pointer;
    height: 3em;
    width: 50%;
    left: 25%; }
    .market-holder .arrow:hover {
      opacity: 0.8; }
    .market-holder .arrow.top {
      bottom: auto;
      top: -3em;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg); }

.market-grid {
  /* opacity:0.2; */
  /* padding-top: 3em; */
  padding-bottom: 6em;
  list-style: none;
  text-align: left;
  transition: all 500ms ease, opacity 1s ease;
  text-align: center; }
  .market-grid li {
    display: inline-block;
    vertical-align: top;
    margin: 0.5%;
    width: 23.5%;
    position: relative;
    /* min-height: 230px; */
    -webkit-transform: scale(0);
            transform: scale(0);
    transition: all 230ms ease; }
  .market-grid li.preview {
    -webkit-transform: scale(1);
            transform: scale(1);
    transition: all 230ms ease; }
  .market-grid figure {
    background-color: white;
    border-radius: 2px;
    overflow: hidden;
    position: relative; }
  .market-grid figure .number {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    background-color: #fff;
    width: 3em;
    height: 3em;
    border-radius: 100%;
    line-height: 3em; }
  .market-grid li:hover figure {
    background-color: white; }
  .market-grid figure img {
    vertical-align: bottom;
    width: 70%; }
  .market-grid figure > div {
    height: 161px;
    overflow: hidden;
    background-color: #f9f3f3;
    line-height: 155px; }
  .market-grid figcaption {
    /* padding: 0.5em; */
    text-align: left; }
    .market-grid figcaption h3 {
      padding: 0.5em 1em 0; }
    .market-grid figcaption h4 {
      font-size: 0.9em;
      font-weight: normal;
      color: #999;
      padding: 0 1em 0.5em; }
    .market-grid figcaption p {
      font-weight: bold;
      /* font-size: 0.8em; */
      padding: 0.5em 1em;
      border-top: solid 1px #eee;
      text-align: center; }

/******* ********/
.market-wrapper {
  position: relative;
  border-bottom-width: 0;
  height: 100%;
  box-sizing: border-box; }
  .market-wrapper .header {
    border: solid 1em #403f3f;
    background-color: #403f3f;
    border-radius: 4px;
    position: relative;
    z-index: 1; }
  .market-wrapper .button-help {
    position: absolute;
    color: #eee;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0px 10px;
    cursor: pointer; }
  .market-wrapper .title {
    background-color: #403f3f;
    padding: 1em 0;
    color: #eee;
    text-shadow: 0 1px 1px #000;
    padding-right: 10em; }
  .market-wrapper .title h1 {
    font-size: 1.5em;
    line-height: 1em;
    padding: 0 0 0.5em; }

.button-white {
  cursor: pointer;
  border: solid 1px #fff;
  color: #fff;
  padding: 0.3em 0.5em; }

.button-white:hover {
  opacity: 0.8; }

.market-content {
  overflow: hidden;
  max-height: 45.71em;
  transition: all 1s ease; }

.scroll {
  position: absolute;
  bottom: -1em;
  left: 0;
  width: 100%;
  text-align: center;
  cursor: pointer; }

.market-content .item {
  background-color: #fff;
  margin: 0.5em 0;
  border-radius: 4px;
  padding: 0.8em 1em 0.8em 2.5em;
  opacity: 0;
  transition: all 300ms linear;
  position: relative; }

.market-content .item:after,
.market-content .item:before {
  content: "";
  clear: both;
  display: table; }

.market-content .item.preview {
  opacity: 1; }

@-webkit-keyframes zoomRotate {
  0%, 100% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg); }
  50% {
    -webkit-transform: scale(1.5) rotate(-45deg);
            transform: scale(1.5) rotate(-45deg); } }

@keyframes zoomRotate {
  0%, 100% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg); }
  50% {
    -webkit-transform: scale(1.5) rotate(-45deg);
            transform: scale(1.5) rotate(-45deg); } }

.market-content .item .no {
  position: absolute;
  top: 0.8em;
  left: 1em;
  font-weight: bold;
  line-height: 3em; }

.market-content .item .img-holder {
  width: 3em;
  height: 3em;
  float: left;
  margin-right: 0.5em;
  background-color: #f1f1f1; }

.market-content .item.preview .img-holder {
  -webkit-animation: zoomRotate 300ms ease forwards;
          animation: zoomRotate 300ms ease forwards; }

.market-content .item .img-holder img {
  margin-top: -15%; }

.market-content .item p {
  padding-right: 2em;
  position: relative;
  line-height: 2em;
  display: table-cell;
  height: 3em;
  vertical-align: middle; }

.market-content .item .name {
  opacity: 0;
  display: block;
  line-height: 1.2em;
  font-size: 1.2em;
  word-break: break-all; }

.market-content .item .number {
  display: inline-block;
  padding: 0 1em;
  font-size: 0.75em;
  font-weight: bold;
  position: absolute;
  top: 1.5em;
  right: 1em;
  line-height: 2em;
  opacity: 0;
  font-size: 1em;
  background-color: #f00;
  color: #fff;
  border-radius: 4px; }

.market-content .item .unit,
.market-content .item .quantity {
  opacity: 0;
  color: #999; }

@-webkit-keyframes fadeInSlow {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeInSlow {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.market-content .item.preview .unit,
.market-content .item.preview .quantity,
.market-content .item.preview .number,
.market-content .item.preview .name {
  -webkit-animation: fadeInSlow 300ms ease 400ms forwards;
          animation: fadeInSlow 300ms ease 400ms forwards; }

.market-content .item.double-item .item-holder {
  display: inline-block;
  width: 40%;
  vertical-align: top; }

.double-drop {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0.2em;
  padding: 0.5em;
  border-radius: 4px; }

.market-content .item.double-item {
  padding: 0.8em 1em 0.8em 3.5em; }

.market-content .item.double-item .no {
  position: absolute;
  top: 0;
  left: 1em;
  font-weight: bold;
  line-height: 4em;
  padding-right: 1em;
  border-right: solid 1px rgba(204, 204, 204, 0.5);
  font-size: 1.2em; }

.market-content .item.double-item .img-holder {
  margin-left: 1.5em; }

/****   *******/
.super-market .test-card {
  margin-top: -209px; }

.shopping-test {
  width: 57.1em;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -28.6em;
  margin-top: -16.42em; }

.test-header {
  padding: 1em; }

.test-content {
  padding: 0 2em; }

.test-content ul {
  list-style: none;
  /* padding: 0.5em 0; */ }

.test-content ul.learn li {
  font-size: 1.3em;
  line-height: 2em;
  border-bottom: solid 1px #eee;
  opacity: 0;
  transition: opacity 830ms cubic-bezier(0.66, -0.19, 0.1, 1.16); }

.test-content ul.learn li.preview {
  opacity: 1; }

.shopping-drag {
  position: relative; }

.shopping-drag .up,
.shopping-drag .down {
  background: url(/images/meeting-arrow.png) center center no-repeat;
  position: absolute;
  bottom: -1em;
  left: 0;
  width: 100%;
  height: 3em;
  text-indent: -9999px;
  cursor: pointer; }

.shopping-drag .up {
  top: -3em;
  bottom: auto;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

.shopping-drag .up:hover,
.shopping-drag .down:hover {
  opacity: 0.5; }

.test-content .drop-places-holder {
  position: relative;
  padding-bottom: 2em;
  /* overflow: hidden;
  height: 310px; */
  z-index: 2; }

.shopping-centralise {
  display: table;
  margin: 0 auto; }

.test-content .drop-places-holder .drop-places.ui-droppable {
  overflow: hidden;
  height: 25.71em;
  display: table-cell;
  vertical-align: middle; }

.test-content .drop-places-holder .drop-places.ui-droppable::-webkit-scrollbar {
  -webkit-appearance: none; }

.test-content .drop-places-holder .drop-places.ui-droppable::-webkit-scrollbar:vertical {
  width: 0.5em; }

.test-content .drop-places-holder .drop-places.ui-droppable::-webkit-scrollbar:horizontal {
  height: 0.5em; }

.test-content .drop-places-holder .drop-places.ui-droppable::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px; }

.test-content .drop-places-holder .drop-places.ui-droppable::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.2); }

.test-content .shopping-items li,
.test-content .drop-places li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  color: #999;
  width: 5em;
  height: 5em;
  text-align: center;
  overflow: hidden;
  margin: 0 0.2em 0.3em;
  z-index: 3; }

.test-content .drop-places li.over .number {
  display: none; }

.test-content .drop-places li .number {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.9em;
  margin-left: -1em;
  z-index: 1;
  display: block;
  border: dashed 1px #999;
  width: 2em;
  height: 2em;
  /* margin: 2.5em auto 0; */
  line-height: 2em;
  border-radius: 100%;
  font-size: 0.8em; }

.test-content .drop-places li:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: url(/images/super-market-bag.png) center center no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%; }

.test-content .drop-places li.over:after {
  opacity: 0.5; }

.test-content .drop-places li.correct {
  border-color: #9cc940;
  color: #9cc940;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-animation: tada 1s ease 500ms forwards;
          animation: tada 1s ease 500ms forwards;
  background-color: transparent; }

.test-content .drop-places li.correct:after {
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: all 500ms ease; }

.test-content .drop-places li.correct img {
  max-width: 85%; }

@-webkit-keyframes ani-wrong {
  0%, 100% {
    border-color: rgba(0, 0, 0, 0.03); }
  50% {
    border-color: #c94040;
    color: #c94040; } }

@keyframes ani-wrong {
  0%, 100% {
    border-color: rgba(0, 0, 0, 0.03); }
  50% {
    border-color: #c94040;
    color: #c94040; } }

.test-content .drop-places li.wrong .number {
  -webkit-animation: ani-wrong 1s ease;
          animation: ani-wrong 1s ease; }

.shopping-slider {
  margin-top: 2em;
  height: 13.21em;
  position: relative;
  background: url(/images/super-market-wood.png) center 3.3em no-repeat;
  background-size: 42.85em; }

.slide-holder {
  position: relative;
  height: 7.14em;
  margin: 0 auto;
  /* overflow: hidden; */
  max-width: 39em; }

.system-test .slide-holder {
  height: 85px; }

.shopping-slider .next, .shopping-slider .prev {
  cursor: pointer;
  position: absolute;
  left: 0.2em;
  top: 40%;
  background: url(/images/super-market-arrow.png) center -3em no-repeat;
  background-size: 3em;
  width: 3em;
  height: 3em;
  margin-top: -1.5em;
  text-indent: -9999px;
  z-index: 10; }

.shopping-slider .next {
  left: auto;
  right: 0;
  background-position: 0 0; }

.shopping-slider .prev:hover {
  background-position: 0 -9em; }

.shopping-slider .next:hover {
  background-position: 0 -6em; }

/* .shopping-slider .next:hover, .shopping-slider .prev:hover{
  opacity:0.5;
} */
.test-content .shopping-items {
  position: absolute;
  top: 0;
  left: 0;
  width: 45.14em;
  margin-left: 0;
  transition: all 0.5s linear;
  text-align: left; }

.test-content .shopping-items li {
  border: none;
  border-radius: 0;
  cursor: pointer;
  cursor: -webkit-grab;
  cursor: grab;
  width: 6.5em;
  height: 7em;
  overflow: hidden;
  margin: 0; }

.test-content .shopping-items li:hover {
  opacity: 1; }

.ghost {
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  margin-top: -78px;
  margin-left: -60px;
  z-index: 1;
  display: none; }

.ghost.gh-mindmap {
  margin-top: -1em;
  margin-left: -3em;
  background-color: #74a5f0;
  border: solid 1px #333;
  border-radius: 4px;
  color: #fff;
  padding: 0.5em 1em;
  min-width: 5em;
  text-align: center;
  opacity: 0.6; }

.ghost.gh-meeting {
  min-width: 20em;
  /*  background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.8); */
  padding: 0.5em 1em;
  margin-top: -2em;
  margin-left: -10em;
  cursor: -webkit-grab !important;
  cursor: grab !important;
  border-radius: 4px; }

.ghost.gh-singlesys,
.ghost.gh-doublesys {
  margin-top: -3em;
  margin-left: -3em;
  width: 4em;
  height: 4em;
  line-height: 4em;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden; }

.ghost.gh-singlesys img,
.ghost.gh-doublesys img {
  vertical-align: middle; }

.ghost.revert {
  transition: all 400ms ease; }

.test-content .shopping-items li.wrong {
  position: relative; }

.test-content .shopping-items li.wrong img {
  opacity: 0.5; }

.test-content .shopping-items li.wrong span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.2em;
  line-height: 6em;
  color: #FFF;
  z-index: 1; }

@-webkit-keyframes fadeInUp {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

@keyframes fadeInUp {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); } }

.super-market .vault-input-holder {
  -webkit-animation: fadeInUp 1s 0s ease forwards;
          animation: fadeInUp 1s 0s ease forwards;
  margin-top: -210px; }

.vault-input-holder h1 {
  font-size: 1.3em;
  font-weight: 300;
  padding: 0 0 1.5em;
  line-height: 1.4em; }

#paneltestsuperm0 .shopping-slider {
  margin: 0px auto;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: auto;
  padding: 0px;
  background: url(/images/super-market-wood.png) center bottom no-repeat;
  background-size: 90%;
  max-width: 600px; }
  #paneltestsuperm0 .shopping-slider::after {
    content: "";
    display: block;
    padding-bottom: 25%; }

#paneltestsuperm0 .slide-holder {
  position: absolute;
  left: 0px;
  width: 100%;
  max-width: none;
  height: 60%;
  border: 1px solid transparent; }

#paneltestsuperm0 .shopping-items {
  position: relative;
  width: 80%;
  margin: 0 auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  #paneltestsuperm0 .shopping-items li {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 0px;
    width: auto;
    height: 100%; }
    #paneltestsuperm0 .shopping-items li img {
      height: 100%;
      max-width: none; }

/**********************************/
/*******Card ********/
/**********************************/
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55em;
  height: 35em;
  /* margin-top: -17.5em; */
  /* margin-left: -27.5em; */
  background-color: #fff;
  box-shadow: 0 0 5px #000;
  overflow: hidden;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.card h1 {
  font-size: 1.5em;
  line-height: 1.2em;
  padding-bottom: 0.5em; }

.card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1em;
  line-height: 1.4em;
  margin-bottom: 1em; }

.card .article-button {
  margin-top: 3em; }

.system-intro .card p {
  margin-bottom: 0.5em; }

.system-intro .card p:first-child {
  font-weight: bold;
  font-size: 1em; }

.card p b {
  font-size: 1.1em; }

.intro-card p {
  color: rgba(0, 0, 0, 0.8);
  padding: 0 1em 0 0; }

.col-top {
  min-height: 12.6em;
  padding: 0;
  position: relative;
  z-index: 1; }

.col-top .text {
  background-color: #1f252a;
  color: #fff; }

.intro-link,
.intro-home-game,
.intro-home {
  padding: 0.8em 1em 0.8em 3em;
  background: url(/images/intro-home.png) 1.5em center no-repeat;
  background-size: 1em;
  background-color: transparent !important; }

#systemintro .intro-home {
  background-color: #92c626 !important; }

.intro-link {
  background: none; }

.intro-home:hover {
  opacity: 0.8; }

.intro-rank {
  padding: 0.8em 4em 0.8em 0;
  min-width: 7.6em;
  background: url(/images/intro-rank.png) 80% center no-repeat;
  background-size: 1.3em;
  font-weight: 300;
  text-align: right;
  display: none; }

.intro-game {
  padding: 0.22em 0.9em; }

.intro-game .game {
  width: 2em;
  height: 2em;
  background-color: #fff;
  display: inline-block;
  vertical-align: middle;
  margin: 0.3em 0.1em; }

.bg-blue {
  background-color: #92c626; }

.col-bottom {
  position: relative;
  z-index: 1;
  opacity: 0;
  -webkit-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0); }

.intro .img-holder {
  position: absolute;
  top: -5.5em;
  left: 50%;
  margin-left: -3em;
  width: 6em; }

.intro .col-bottom .text {
  position: relative;
  padding: 1em 1.5em;
  height: 6.1em;
  margin-top: 3em;
  background-color: transparent; }

.system-intro .col-bottom .text {
  height: auto; }

.intro .col-bottom.learn-card .text {
  height: 6.2em;
  margin-top: 0; }

.learn-card .intro-footer .center a {
  margin-bottom: 1em; }

.intro-card.col-bottom .text {
  background-color: rgba(255, 255, 255, 0.9); }

.center {
  text-align: center; }

.intro .col-bottom .text .right,
.intro .col-bottom .text .left {
  display: inline-block;
  vertical-align: top;
  width: 80%;
  margin-right: -4px; }

.benefit {
  text-align: left;
  padding: 0.5em 1em;
  font-size: 0.8em;
  line-height: 1.3em;
  margin: 0.2em 0;
  background: url(/images/intro-tick.png) 1em center no-repeat;
  background-size: 1em;
  padding-left: 2.5em;
  background-color: #E7E7E7;
  border-radius: 4px;
  background-size: 10px; }

.intro .col-bottom .text .right {
  width: 20%; }

.intro .col-bottom .text h1 {
  position: absolute;
  top: -1.8em;
  left: 1em;
  color: #fff;
  padding: 0;
  text-align: left; }

/* .intro .col-bottom.learn-card .text h1{
  left:auto;
  right:1em;
} */
.system-intro .intro .col-bottom .text h1,
.intro .col-bottom .img-holder + h1 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin-bottom: 0.5em; }

.intro .col-bottom .text .intro-play,
.intro .col-bottom .text .intro-learn {
  cursor: pointer;
  position: absolute;
  top: -3em;
  right: 0;
  padding: 0.7em 1em;
  font-size: 1em;
  min-width: 9.5em;
  color: #fff;
  -webkit-transform: translateX(1000px);
  transform: translateX(1000px); }

.intro .col-bottom .text .intro-play:hover,
.intro .col-bottom .text .intro-learn:hover {
  opacity: 0.8; }

@-webkit-keyframes ani-intro-button {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes ani-intro-button {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.intro .col-bottom.bounceInUp .text .intro-play,
.intro .col-bottom.bounceInUp .text .intro-learn {
  -webkit-animation: ani-intro-button 0.5s  0.8s ease forwards;
  animation: ani-intro-button 0.5s  0.8s ease forwards; }

/* .intro .col-bottom .text .intro-play{
  right:auto;
  left:0;
  padding-left: 1.7em;
  min-width:0;
} */
.intro .col-bottom .text .intro-read {
  cursor: pointer;
  position: absolute;
  top: -11.5em;
  left: 1em;
  padding: 0.5em 1em;
  padding-left: 2.5em;
  font-size: 0.8em;
  color: #fff;
  background: url(/images/intro-read.png) 1em center no-repeat;
  background-size: 1em; }

.intro-footer {
  position: relative;
  padding: 1em 1.5em 1em;
  background-color: transparent;
  color: #fff;
  text-align: left; }

.learn-card .intro-footer {
  padding-top: 4em; }

.system-intro .intro-footer {
  /* border-top:solid 1px rgba(255, 255, 255, 0.47); */ }

.system-intro .intro-footer .intro-col {
  display: inline-block;
  margin-right: -4px;
  width: 50%; }

.system-intro .footer-benefit {
  border-top: solid 1px #333;
  border-bottom: solid 1px #333;
  margin-bottom: 1em;
  padding: 0.5em 0; }

.intro-footer .center a {
  font-size: 0.9em;
  background-color: #fff;
  color: #333;
  padding: 0.5em 1em;
  border-radius: 4px;
  display: inline-block;
  opacity: 1; }

.intro-footer .center a:hover {
  opacity: 0.8; }

.system-intro .intro-footer .center a {
  padding: 0.5em;
  background: transparent;
  text-decoration: underline;
  color: #fff; }

.intro-score,
.intro-view {
  cursor: pointer;
  position: absolute;
  top: 4.7em;
  left: 1em; }

.intro-view {
  left: auto;
  right: 1em;
  padding-left: 1.5em;
  background: url(/images/intro-view.png) 0 center no-repeat;
  background-size: 1em; }

.intro-title {
  margin-bottom: 0.5em;
  font-size: 0.8em; }

.intro-mainlevels {
  cursor: default; }

.intro-card .intro-footer {
  background-color: #1f252a;
  text-align: left; }

.intro-level {
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin-right: -4px;
  overflow: hidden; }

.intro-level .content {
  position: relative;
  height: 7.5em;
  background: url(/images/intro-bank.png) center center no-repeat;
  background-size: cover;
  background-color: #4c4f51;
  color: #fff;
  /* border: solid 1px rgba(255, 255, 255, 0.12); */
  margin-right: 0.2em; }

.super-market .intro-level .content {
  background-image: url(/images/intro-super-market.jpg); }

.bank-vault .intro-level .content {
  background-image: url(/images/intro-bank.jpg); }

.brain-storm .intro-level .content {
  background-image: url(/images/intro-brain.jpg); }

.library .intro-level .content {
  background-image: url(/images/intro-library.jpg); }

.meeting .intro-level .content {
  background-image: url(/images/intro-meeting.jpg); }

.name-face .intro-level .content {
  background-image: url(/images/intro-name-face.jpg); }

.sprint-speak .intro-level .content {
  background-image: url(/images/intro-sprint-speak.jpg); }

.time-travel .intro-level .content {
  background-image: url(/images/intro-time-travel.jpg); }

.learn-card .intro-level .content {
  background: #ccc; }

.footer-learn-btn {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1em; }

.footer-learn-btn > img {
  width: 4em; }

.footer-learn-btn .title {
  font-size: 0.8em;
  padding: 0 !important;
  line-height: 1.5em; }

/*.intro-level .content.singlesys{
  background-image:url(/images/intro-single.jpg);
}
.intro-level .content.doublesys{
  background-image:url(/images/intro-memolife.jpg);
}
.intro-level .content.journeysys{
  background-image:url(/images/intro-journey.jpg);
}
.intro-level .content.namesys{
  background-image:url(/images/intro-names.jpg);
}
.intro-level .content.rhymesys{
  background-image:url(/images/intro-rhyme.jpg);
}
.intro-level .content.alphabetsys{
  background-image:url(/images/intro-alphabet.jpg);
}*/
.intro-level .content:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(31, 37, 42, 0.9);
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5); }

.learn-card .intro-level {
  height: 7em;
  margin-right: -4px; }

.learn-card .intro-level .button-holder .title {
  position: absolute;
  top: 0px;
  margin-top: -3em;
  width: 100%;
  padding: 0; }

.learn-card .intro-level .button-holder {
  overflow: visible; }

.intro-level.lock {
  cursor: default; }

.dot-holder {
  position: absolute;
  right: 0.5em;
  top: 0;
  line-height: 1em;
  margin-top: 0.5em;
  z-index: 1; }

.dot-holder .dot {
  display: block;
  width: 1em;
  height: 1px;
  margin-bottom: 0.15em;
  background-color: #fff;
  border-radius: 30px; }

.dot-holder .dot.done {
  /*  background-color:#93c60b; */ }

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0); } }

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0); } }

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.bounceInUp {
  -webkit-animation: bounceInUp 700ms ease forwards;
  animation: bounceInUp 700ms ease forwards; }

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }

.bounceOutDown {
  -webkit-animation: bounceOutDown 1s ease forwards;
  animation: bounceOutDown 1s ease forwards; }

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }

.bounceOutRight {
  -webkit-animation: bounceOutRight 0.5s ease forwards;
  animation: bounceOutRight 0.5s ease forwards; }

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.bounceInRight {
  -webkit-animation: bounceInRight 0.5s ease forwards;
  animation: bounceInRight 0.5s ease forwards; }

.intro-level .button-holder {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 0.8em;
  overflow: hidden;
  text-align: center;
  z-index: 1; }

.top-level .button-holder {
  font-size: 0.9em;
  font-weight: bold;
  color: #ffd314; }

.intro-level.lock:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(/images/lock-big.png) center center no-repeat;
  background-size: 1.7em;
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  z-index: 1; }

.intro-level .button-holder .title {
  padding: 0.5em 1em; }

.intro-level .button-holder .button {
  padding: 0 1em;
  background: #fff;
  margin: 0.5em;
  color: #72c32b;
  border-radius: 4px;
  cursor: pointer; }

.sub-level .button-holder .title {
  padding: 0.5em 1em; }

.sub-level .button-holder .star {
  display: inline-block;
  vertical-align: middle;
  width: 4em;
  height: 4em;
  background: url(/images/game-over-star.png) 0 -4em no-repeat;
  margin: 1.5em -1em -0.5em;
  background-size: 4em; }

.sub-level .button-holder .star.done {
  background-position: 0 0; }

.sub-level .intro-level.lock:after {
  top: 37%;
  left: 50%; }

.sub-level .button-holder .time.hide {
  display: block !important;
  visibility: hidden; }

.clip {
  background: url(/images/super-market-clip.png) center top no-repeat;
  width: 254px;
  height: 293px;
  margin-top: -48px;
  padding: 1em; }

.intro .button-holder .button-green {
  display: block; }

/*********************/
/*** System drag drop test
/*********************/
.system-test {
  position: relative;
  background: url(/images/bg-intro.jpg) center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%; }

.system-test-container {
  width: 57.14em;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -28.57em;
  margin-top: -14.28em;
  /*  opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0); */ }

.system-test-container.animate {
  /*  -webkit-animation: fadeInUp 500ms ease 500ms forwards;
  animation: fadeInUp 500ms ease 500ms forwards; */ }

.system-test-container h1 {
  font-size: 1em;
  margin-bottom: 1em; }

.system-drag {
  position: relative;
  padding: 0 0 3em; }

.system-drag ul {
  list-style: none;
  padding: 0.5em 0; }

.system-drag .drop-places li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  color: #999;
  width: 25%;
  margin-right: -4px; }

.system-box {
  position: relative;
  background-color: #fff;
  text-align: left;
  overflow: hidden;
  margin: 0 0.5em 1em;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19); }

.system-box .header {
  padding: 1em;
  background-color: #f2b220;
  color: #fff;
  font-size: 1.2em; }

.system-box .close {
  display: none;
  position: absolute;
  top: 0;
  right: 1em;
  width: 40px;
  height: 40px;
  background: url(/images/icon-close.png) right center no-repeat;
  background-size: 10px;
  text-indent: -9999px;
  cursor: pointer; }

.system-box .close:hover {
  opacity: 0.8; }

.system-box .body {
  padding: 1em; }

.system-box .item {
  position: relative;
  clear: both;
  margin-bottom: 0.5em;
  /* z-index: 3; */ }

.system-box .item .number {
  display: none; }

.system-box .item:last-child {
  margin: 0; }

.system-box .img-holder {
  width: 4em;
  height: 4em;
  border: dashed 1px #ccc;
  border-radius: 10px;
  line-height: 3.6em;
  overflow: hidden;
  text-align: center; }

.system-box .item.correct .img-holder {
  border-color: transparent; }

.system-box .img-holder img {
  vertical-align: middle;
  max-height: 100%; }

.system-box .text {
  min-height: 4.2em;
  padding-left: 5em;
  word-break: break-all; }

.system-box .text .vertical {
  display: table-cell;
  vertical-align: middle;
  height: 4em;
  line-height: 1.2em; }

.system-test .shopping-slider {
  height: 12.85em;
  position: relative;
  background: url(/images/system-wood.png) center bottom no-repeat;
  background-size: 50em; }

.system-test .shopping-items li {
  margin: 0 0.2em;
  width: 6.1em;
  height: 6.1em;
  line-height: 6em;
  background-color: rgba(255, 255, 255, 0.67);
  overflow: hidden;
  text-align: center; }

.system-test .shopping-items li img {
  vertical-align: middle;
  max-height: 100%; }

.system-learn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50em;
  margin-left: -25em;
  margin-top: -19.7em;
  text-align: center;
  opacity: 0;
  background-color: #fff;
  border-radius: 2px;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards;
  overflow: hidden; }

.system-learn .close {
  display: none;
  position: absolute;
  top: 0;
  right: 1em;
  width: 40px;
  height: 40px;
  background: url(/images/icon-close.png) right center no-repeat;
  background-size: 10px;
  text-indent: -9999px;
  cursor: pointer; }

.system-learn .close:hover {
  opacity: 0.8; }

.system-learn .top {
  background-color: #f2b220;
  color: #fff;
  display: table;
  width: 100%; }

.system-learn .top .col-right,
.system-learn .top .col-left {
  display: inline-block;
  vertical-align: top;
  margin-right: -4px; }

.system-learn .top .col-right {
  width: 69%;
  text-align: left;
  position: relative;
  margin-left: 31%; }

@-webkit-keyframes ani-3sec {
  0% {
    background-position: 0px 0; }
  50% {
    background-position: -14000px 0; }
  51%, 75% {
    background-position: -14000px 0; }
  76%, 100% {
    background-position: 0 0; } }

@keyframes ani-3sec {
  0% {
    background-position: 0px 0; }
  50% {
    background-position: -14000px 0; }
  51%, 75% {
    background-position: -14000px 0; }
  76%, 100% {
    background-position: 0 0; } }

@-webkit-keyframes ani-4sec {
  0% {
    background-position: 0px 0; }
  50% {
    background-position: -18400px 0; }
  51%, 75% {
    background-position: -18400px 0; }
  76%, 100% {
    background-position: 0 0; } }

@keyframes ani-4sec {
  0% {
    background-position: 0px 0; }
  50% {
    background-position: -18400px 0; }
  51%, 75% {
    background-position: -18400px 0; }
  76%, 100% {
    background-position: 0 0; } }

.sys-ani-holder {
  position: absolute;
  left: 0;
  top: 0; }

.single-learn .sys-ani-holder {
  position: relative; }

.single-learn .sys-ani {
  margin: -130px auto; }

.sys-ani {
  width: 400px;
  height: 400px;
  border: 1px solid transparent;
  background: url(/images/code/01.png) no-repeat left top;
  -webkit-animation: ani-3sec 3.2s steps(35) 1s infinite;
  animation: ani-3sec 3.2s steps(35) 1s infinite;
  -webkit-transform: scale(0.4);
  transform: scale(0.4);
  margin: -117px -270px; }

.sys-no-ani {
  /* margin: -130px auto; */
  width: 5em;
  height: 1.5em;
  border: 1px solid transparent;
  /* margin: -117px -270px; */
  color: black;
  font-size: 3em;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto; }

/*************Code animation****************/
/*09,18,19,30,32,37,53,59,64,68,71,74,76,87*/
.code-3,
.code-09, .code-18, .code-19, .code-30, .code-37,
.code-53, .code-64, .code-68, .code-71, .code-74, .code-76, .code-87 {
  background-image: url(/images/code/09.png);
  -webkit-animation: ani-4sec 4.2s steps(46) 1s infinite;
  animation: ani-4sec 4.2s steps(46) 1s infinite; }

/*******************************************/
.system-test.cat-1 .system-box .header,
.system-test.cat-1 .system-learn .top {
  background-color: #d1703b; }

.system-test.cat-2 .system-box .header,
.system-test.cat-2 .system-learn .top {
  background-color: #6899f0; }

.system-test.cat-3 .system-box .header,
.system-test.cat-3 .system-learn .top {
  background-color: #efc151; }

.system-test.cat-4 .system-box .header,
.system-test.cat-4 .system-learn .top {
  background-color: #f5d34e; }

.system-test.cat-5 .system-box .header,
.system-test.cat-5 .system-learn .top {
  background-color: #f7ea59;
  color: #B68A16; }

.system-test.cat-6 .system-box .header,
.system-test.cat-6 .system-learn .top {
  background-color: #fbef76;
  color: #B68A16; }

.system-test.cat-7 .system-box .header,
.system-test.cat-7 .system-learn .top {
  background-color: #fdfa9e;
  color: #B68A16; }

.system-learn .top h1 {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.3em;
  padding-bottom: 0.2em;
  margin-bottom: 0.2em;
  font-style: italic; }

.system-learn .top p:first-child {
  font-size: 1.3em;
  padding-bottom: 1em; }

.system-learn .top p {
  font-size: 0.9em; }

.system-learn .top small {
  color: #000;
  font-size: 0.9em; }

.system-learn .vertical {
  height: 10em;
  display: table-cell;
  vertical-align: middle;
  padding: 1em;
  width: 30em; }

.system-learn .box-holder .box {
  background-color: #f8f5f5;
  opacity: 0; }

.system-learn .top h1,
.system-learn .top p {
  opacity: 0; }

.system-learn .top h1.preview,
.system-learn .top p.preview,
.system-learn .box-holder .box.preview {
  opacity: 1;
  transition: all 0.5s ease; }

.system-learn .box-holder .box.stripe {
  background-color: rgba(0, 0, 0, 0.69);
  color: #fff;
  padding: 0.5em 1em;
  font-size: 0.9em;
  /* font-style:italic; */
  min-height: 1.2em;
  line-height: 1.5em; }

.system-learn .box-holder .box:nth-child(2) {
  background-color: #fff; }

.system-learn .box-holder .box:last-child {
  border-bottom: solid 1px #ccc;
  background-color: #fff;
  overflow: hidden; }

.system-learn .box-holder .header,
.system-learn .box-holder .body {
  display: inline-block;
  vertical-align: top;
  margin-left: -4px; }

.system-learn .box-holder .header {
  width: 16%;
  color: #999; }

.system-learn .box-holder .header p {
  display: table-cell;
  height: 5em;
  vertical-align: middle;
  width: 10em;
  padding: 1em; }

.system-learn .box-holder .body {
  width: 84%;
  /* box-shadow: -1px 0 0px 0px #ccc; */
  text-align: left;
  vertical-align: top; }

.system-learn .box-holder .img-holder {
  width: 7em;
  height: 7em;
  line-height: 7em;
  /* border-radius: 10px; */
  background-color: #EEE;
  margin-right: 2em;
  overflow: hidden;
  float: left;
  text-align: center; }

.system-learn .box-holder .img-holder img {
  vertical-align: middle;
  max-height: 100%;
  /* text-align: center; */ }

.system-learn .box-holder .body .text {
  color: #000;
  padding: 1em;
  padding-left: 0;
  height: 5em;
  display: table-cell;
  vertical-align: middle;
  font-size: 0.9em;
  line-height: 1.4em; }

.system-learn .footer {
  padding: 0 1em; }

.single-learn.system-learn {
  margin-top: -14.2em; }

.single-learn .top {
  background-color: #87c836; }

.single-learn .box-holder .box:first-child {
  background: #000; }

.single-learn .text-wrapper {
  padding: 1em; }

.single-learn .box-holder .img-holder {
  float: none;
  margin: 1em auto; }

.single-sys .system-box .header {
  background-color: #87c836; }

/*********************/
/*** System Single Learnification
/*********************/
.system-tour {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50em;
  margin-left: -25em;
  margin-top: -15em;
  text-align: center;
  opacity: 0;
  background-color: #fff;
  border-radius: 2px;
  -webkit-animation: fadeInUp 1s ease forwards;
          animation: fadeInUp 1s ease forwards;
  overflow: hidden; }
  .system-tour .contextHeader {
    padding: 1em;
    border-bottom: solid 1px #eee;
    color: lightgray; }
  .system-tour .header {
    padding: 1em;
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: bold; }
  .system-tour .content {
    height: 20em; }
  .system-tour .box {
    display: inline-block;
    vertical-align: top;
    border: solid 1px #eee;
    border-radius: 4px;
    padding: 1em;
    margin: 0 0.5em; }
    .system-tour .box img {
      width: 80%; }
      .system-tour .box img[src="/images/system-tour-1.png"], .system-tour .box img[src="/images/system-tour-2.png"] {
        margin-top: -13%; }
      .system-tour .box img[src="/images/system-tour-4.png"] {
        width: 100%; }
    .system-tour .box p {
      color: #999; }
  .system-tour .arrow {
    display: inline-block;
    background: url(/images/system-tour-arrow.png) center center no-repeat;
    background-size: 1em;
    width: 5em;
    height: 9em; }
  .system-tour .text {
    padding: 2em 5em 0; }
  .system-tour .footer {
    position: relative;
    padding: 0 1em; }
  .system-tour .footer .pager {
    position: absolute;
    left: 50%;
    width: 2em;
    margin-left: -1em;
    line-height: 4em; }
  .system-tour .slide1 .box {
    width: 10em;
    height: 10em;
    -webkit-animation: fadeIn 1s ease 0s backwards;
            animation: fadeIn 1s ease 0s backwards; }
    .system-tour .slide1 .box:nth-child(2) {
      -webkit-animation-delay: 1s;
              animation-delay: 1s; }
  .system-tour .slide2 .box {
    width: 7em;
    height: 7em;
    -webkit-animation: fadeIn 1s ease 0s backwards;
            animation: fadeIn 1s ease 0s backwards; }
    .system-tour .slide2 .box:nth-child(3), .system-tour .slide2 .box:nth-child(4) {
      -webkit-animation-delay: 1s;
              animation-delay: 1s; }
  .system-tour .slide3 .box {
    width: 8em;
    height: 8em;
    -webkit-animation: fadeIn 1s ease 0s backwards;
            animation: fadeIn 1s ease 0s backwards; }
  .system-tour .slide3 .arrow {
    height: 7em; }

.box-active {
  display: none !important; }

.box-active.active {
  display: inline-block !important; }

.box-inactive {
  display: inline-block !important; }

.box-inactive.active {
  display: none !important; }

@-webkit-keyframes fadeInUpSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInUpSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.system-tour-callout {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20em;
  margin-left: -11em;
  margin-top: 0;
  background-color: #fff;
  box-shadow: 0 2px 3px #ccc;
  border-radius: 4px;
  padding: 1em;
  z-index: 1;
  opacity: 0; }
  .system-tour-callout.animate {
    -webkit-animation: fadeInUpSmall 1s ease forwards;
            animation: fadeInUpSmall 1s ease forwards; }
  .system-tour-callout.singlesys-tour1.animate {
    -webkit-animation-delay: 1s;
            animation-delay: 1s; }
  .system-tour-callout:after {
    content: "";
    border: solid 10px transparent;
    border-top-color: #fff;
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -10px; }
  .system-tour-callout .header {
    border-bottom: solid 1px #eee;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    font-weight: bold; }
  .system-tour-callout .footer {
    position: relative;
    padding-top: 0.5em; }
    .system-tour-callout .footer .button-green {
      padding: 0.2em 0.5em;
      margin-bottom: 0; }
    .system-tour-callout .footer .pager {
      position: absolute;
      left: 50%;
      width: 2em;
      margin-left: -1em;
      line-height: 3em; }

/*********************/
/*** System Practice
/*********************/
.system-practice {
  position: relative;
  background: url(/images/bg-intro.jpg) center center no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 100%; }

.practice-container {
  width: 57.14em;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -28.57em;
  margin-top: -14.28em;
  text-align: center; }

.practice-container h1 {
  font-size: 3em;
  line-height: 1em;
  font-weight: normal;
  padding-top: 0.5em; }

.practice-container .answer h2 {
  padding-bottom: 1em; }

.practice-button {
  margin: 6em 0 0; }

.practice-button > div {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  width: 3em;
  height: 3em;
  line-height: 3em;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 0 0px 20px rgba(255, 255, 255, 0.25);
  position: relative;
  margin: 0 1em;
  font-size: 3em;
  color: #666;
  font-weight: 300; }

.practice-button > div.inactive {
  opacity: 0.3;
  cursor: default; }

.practice-button .no:hover,
.practice-button .yes:hover {
  color: #999; }

.practice-button .no.inactive:hover,
.practice-button .yes.inactive:hover {
  color: #666; }

.practice-button .stop {
  position: relative;
  width: 1em;
  height: 1em;
  background-color: #f03e3f;
  border: solid 0.1em #fff;
  margin: 0 0.4em; }

.practice-button .stop:hover {
  background-color: #f00; }

.practice-button .stop.inactive:hover {
  background-color: #f03e3f; }

.practice-button .stop:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2em;
  height: 0.2em;
  background-color: #fff;
  margin-left: -0.1em;
  margin-top: -0.1em; }

.practice-button .hint {
  position: absolute;
  top: 0;
  left: 50%;
  line-height: 1em;
  font-size: 0.25em;
  color: #000;
  width: 14em;
  margin-left: -7em;
  font-style: italic; }

.practice-button .hint:after {
  content: "";
  position: absolute;
  top: 3em;
  left: 35%;
  background: url(/images/system-practice-arrow.png) center 0 no-repeat;
  width: 5em;
  height: 5em; }

.practice-button .no .hint,
.practice-button .yes .hint {
  top: -5em; }

.practice-button .stop .hint {
  top: 9em; }

.practice-button .stop .hint:after {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  top: -6em;
  left: 30%; }

.journey-callout {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20em;
  background-color: #f1f5f8;
  border-radius: 4px;
  padding: 1em;
  z-index: 100;
  box-shadow: 0 1px 1px #ccc; }

.journey-callout .content:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  margin-top: -10px;
  border: solid 10px transparent;
  border-right-color: #F1F5F8;
  z-index: 1; }

.journey-callout .header {
  border-bottom: solid 1px #ccc;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em; }

.journey-callout .content p {
  font-size: 0.8em;
  line-height: 1.5em; }

.system-journey {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54.28em;
  margin-left: -27.14em;
  margin-top: -18.5em;
  background-color: #2f302c;
  border-radius: 2px;
  overflow: hidden;
  max-height: 38em;
  box-shadow: 0 1px 2px #808080; }

.system-journey .col-left,
.system-journey .col-right {
  display: inline-block;
  vertical-align: top;
  margin-right: -4px;
  position: relative; }

.system-journey .col-left {
  width: 30%;
  color: #fff; }

.name-practice .system-journey .col-left .content-wrap {
  height: 28em;
  overflow: hidden;
  margin-bottom: 4.7em; }

.name-practice .system-journey .col-left .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; }

.system-journey .col-right {
  width: 70%;
  background-color: #f1f5f8;
  text-align: center; }

.system-journey .col-right .content-intro {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #F1F5F8;
  z-index: 10; }

.system-journey .col-right .content-intro .text {
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(/images/system-journey-intro.png) center top no-repeat;
  background-size: 3em;
  padding-top: 4em;
  width: 20em;
  font-size: 0.9em;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.system-journey .col-right .content-intro .text ul {
  text-align: left;
  margin-left: 3.5em; }

.system-journey .col-left .header {
  position: relative;
  padding: 0 1em;
  border-bottom: solid 1px rgba(255, 255, 255, 0.3);
  height: 4em;
  display: table-cell;
  width: 30%;
  vertical-align: middle; }

.system-journey .col-left.country .header {
  height: 3em; }

.system-journey .col-left .header .plus {
  cursor: pointer;
  border: solid 1px #fff;
  border-radius: 2px;
  float: right;
  color: #fff;
  display: inline-block;
  padding: 0 0.4em; }

.system-journey .img-holder .helper-text {
  bottom: 5px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  width: 100%; }

.system-journey .col-left.country .header .icon-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 3em;
  height: 3em;
  background: url(/images/icon-close-white.png) center center no-repeat;
  cursor: pointer;
  background-size: 1em; }

.system-journey .col-left .header .plus:hover {
  opacity: 0.8; }

.system-journey .col-left.country .content {
  position: relative; }

.system-journey .col-left.country .content:after {
  content: "";
  position: absolute;
  top: 0.7em;
  right: 1em;
  width: 1em;
  height: 1em;
  opacity: 0.6;
  background: url(/images/system-name-arrow.png) center center no-repeat;
  background-size: 0.6em;
  cursor: pointer; }

.system-journey .col-left.country .content.open:after {
  opacity: 1; }

.system-journey .col-left.country .content.open .title {
  color: rgba(255, 255, 255, 0.96); }

.system-journey .col-left.country .content ul {
  height: 0;
  max-height: 0;
  overflow-x: hidden;
  transition: all 0.5s ease; }

.system-journey .col-left.country .content.open ul {
  height: auto;
  max-height: 215px;
  transition: all 0.5s ease; }

.system-journey .col-left.country + .col-right .content:after {
  display: none; }

.system-journey .col-left .content .title {
  padding: 0.2em 1.3em;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
  border-top: solid 1px rgba(255, 255, 255, 0.1);
  margin-top: -1px;
  font-size: 0.9em;
  color: #fff;
  cursor: pointer; }

.system-journey .col-left.country .content .title {
  color: #ccc;
  padding: 0.5em 1em; }

.system-journey .col-left ul {
  list-style: none;
  height: 28.5em;
  overflow-x: hidden; }

.system-journey .col-left ul::-webkit-scrollbar {
  width: 12px;
  /* for vertical scrollbars */
  height: 12px;
  /* for horizontal scrollbars */ }

.system-journey .col-left ul::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); }

.system-journey .col-left ul::-webkit-scrollbar-thumb {
  background: black; }

.system-journey .col-left ul:first-child li {
  cursor: pointer; }

.system-journey .col-left li {
  position: relative;
  margin: 1em;
  clear: both; }

.system-journey .col-left li.step .text {
  font-size: 0.8em;
  color: #999; }

.system-journey .col-left li.step .img-holder {
  border: solid 1px #999;
  font-size: 0.9em; }

.system-journey .col-left li.step .img-holder .step-no,
.system-journey .col-left li.step .img-holder span {
  background: transparent;
  color: #999;
  font-size: 0.8em;
  line-height: 2em;
  text-align: center; }

.system-journey .delete {
  cursor: pointer;
  width: 2em;
  height: 2em;
  background: url(/images/icon-close-white.png) center center no-repeat;
  cursor: pointer;
  background-size: 0.7em;
  display: inline-block;
  position: absolute;
  top: -0.2em;
  right: 0;
  opacity: 0.3;
  /* visibility:hidden; */ }

.system-journey .delete:hover {
  opacity: 0.8; }

.system-journey .col-left li:hover .delete {
  visibility: visible;
  opacity: 1;
  transition: all 500ms ease; }

.system-journey .header .delete {
  width: 3em;
  height: 3em;
  display: none; }

.system-journey .header .dropdown {
  width: 3em;
  height: 3em;
  position: absolute;
  background-color: #ccc;
  top: 0;
  left: 0;
  cursor: pointer; }

.system-journey .col-left .img-holder {
  width: 1.7em;
  height: 1.7em;
  line-height: 1.5em;
  border-radius: 100%;
  /* background-color:#fff; */
  float: left;
  overflow: hidden;
  position: relative; }

#namesys .col-left.country .img-holder {
  border-radius: 0; }

.system-journey .col-left .img-holder span {
  cursor: pointer;
  /* border: solid 1px #fff; */
  /* border-radius: 2px; */
  height: 2em;
  color: #333;
  display: block;
  /* padding: 0 0.4em; */
  background-color: #fff;
  text-align: center; }

.system-journey .col-left .img-holder span.plus {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: #333;
  display: block;
  background: url(/images/system-journey-plus.png) center center no-repeat;
  background-size: 0.7em;
  background-color: #fff;
  text-indent: -9999px;
  border-radius: 100%; }

.system-journey .col-left .img-holder img {
  vertical-align: middle; }

.system-journey .col-left .text {
  padding-left: 1em;
  padding-right: 1.5em;
  font-size: 0.9em;
  line-height: 1.3em;
  color: #ccc;
  height: 2em;
  display: table-cell;
  vertical-align: middle; }

.system-journey .col-left.country .header .text {
  padding-left: 0.1em;
  color: #fff; }

.system-journey .col-left .vertical {
  display: table-cell;
  height: 1.9em;
  vertical-align: middle; }

.system-journey .col-left .footer {
  text-align: center;
  padding: 0 1em; }

.system-journey .col-left .footer .button-green {
  display: block; }

.system-journey .col-left .footer .button-green.grey:hover, .system-journey .col-left .footer .button-green.grey {
  /* cursor:default; */
  background-color: #434345;
  border-color: #434345;
  color: #999;
  /* opacity:1; */ }

.system-journey .col-right .header {
  position: relative;
  /* border-bottom: solid 1px rgba(0, 0, 0, 0.1); */
  height: 3em; }

.system-journey .col-right .header .img-holder {
  width: 2em;
  height: 2em;
  line-height: 2em;
  border-radius: 2px;
  background-color: #FDFDFD;
  display: inline-block;
  vertical-align: top;
  margin-top: 0.5em;
  box-shadow: inset 0 0 5px #ccc;
  display: none; }

.system-journey .col-right .header .img-holder img {
  vertical-align: middle; }

.system-journey .col-right .header .text {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.8em;
  text-align: center;
  font-size: 1em; }

.system-journey .col-right .header .save {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.5em;
  width: 2em;
  height: 2em;
  background: url(/images/system-save.png) center center no-repeat;
  cursor: pointer;
  background-size: 0.8em; }

.system-journey .col-right .header .tab-holder {
  text-align: center;
  padding-top: 1.5em; }

.system-journey .col-right .header .tab {
  display: inline-block;
  vertical-align: top;
  padding: 0.2em 1em;
  margin: 0;
  font-size: 0.9em;
  cursor: pointer;
  color: #92c626;
  border-radius: 4px;
  font-weight: bold; }

.system-journey .col-right .header .tab:first-child {
  /* background-color: #fff; */
  cursor: default;
  /* font-weight: bold; */
  /* font-size: 1.1em; */
  /* line-height: 2.7em; */ }

.system-journey .col-right .header .tab:first-child .img {
  display: inline-block;
  vertical-align: middle;
  line-height: 2em; }

.system-journey .col-right .header .tab:first-child .text {
  margin: 0;
  padding-left: 0.5em;
  color: #333; }

.system-journey .col-right .header .tab:first-child:hover {
  opacity: 1; }

.system-journey .col-right .header .tab:hover {
  opacity: 0.8; }

.system-journey .col-right .header .tab.active {
  color: #fff;
  background-color: #92c626; }

.system-journey .col-right .content {
  position: relative;
  padding: 1em;
  height: 32em;
  overflow-x: hidden; }

.system-journey .col-right .content::-webkit-scrollbar {
  width: 12px;
  /* for vertical scrollbars */
  height: 12px;
  /* for horizontal scrollbars */ }

.system-journey .col-right .content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); }

.system-journey .col-right .content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); }

#journeysys .col-right:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1em;
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f1f5f8 100%);
  /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f1f5f8',GradientType=0 ); IE6-9 */ }

.system-journey .col-right .content .arrow {
  position: absolute;
  bottom: 3em;
  right: 1em;
  width: 3em;
  height: 3em;
  background: url(/images/system-arrow.png) center center no-repeat;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0px 2px #ccc;
  z-index: 1;
  cursor: pointer;
  opacity: 0.5; }

.system-journey .col-right .content .arrow:hover {
  opacity: 1; }

.system-journey .col-right .content .arrow.up {
  bottom: 7em;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.system-journey .col-right .content .pager {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.6em 1.6em; }

.system-journey .col-right .content .button-green {
  background: none;
  /* border-radius: 100%; */
  width: 18em;
  /* height: 2em; */
  /* text-indent: -9999px; */
  border-color: transparent;
  margin: 0;
  position: relative;
  color: inherit;
  font-size: 0.8em;
  line-height: 1.5em; }

.name-arrow a {
  font-size: 0.9em; }

.name-arrow a:hover {
  color: #92c626; }

.system-journey .col-right .box-holder {
  transition: all 0.5s ease; }

.system-journey .col-right .box-holder + .button-green {
  position: relative;
  z-index: 1; }

.journey-box,
.system-journey .box {
  position: relative;
  width: 12em;
  margin: auto;
  background-color: #fff;
  margin-bottom: 2em;
  text-align: left; }

.system-journey .box:after {
  content: "";
  position: absolute;
  border-left: solid 1px #ccc;
  height: 2em;
  top: 0;
  bottom: 0;
  left: -2em;
  height: 130%;
  z-index: 101; }

.system-journey .box:last-child:after,
.system-journey .box:first-child:after {
  top: auto;
  height: 70%;
  bottom: -20%;
  display: block; }

.system-journey .box:last-child:after {
  top: 0;
  bottom: 0;
  height: 50%; }

.system-journey .box:only-child:after {
  display: none; }

.system-journey .box .step-no {
  position: absolute;
  top: 50%;
  left: -3.5em;
  background-color: #fff;
  color: #333;
  width: 2em;
  height: 2em;
  line-height: 2em;
  margin-top: -1em;
  text-align: center;
  border-radius: 100%;
  border: solid 1px #ccc;
  font-size: 0.8em;
  z-index: 102; }

.journey-box .body,
.system-journey .body {
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  padding: 0.2em; }

.journey-box .img-holder,
.system-journey .body .img-holder {
  overflow: hidden;
  height: 10em;
  line-height: 10em;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09);
  background: url(/images/system-upload.png) center center no-repeat;
  text-align: center;
  background-color: #f1f5f8; }

.system-journey .body .img-holder {
  cursor: pointer; }

.system-journey .body .img-holder span {
  position: absolute;
  top: 2em;
  left: 0;
  width: 100%;
  font-size: 0.9em; }

.journey-box .img-holder img,
.system-journey .body .img-holder img {
  vertical-align: middle; }

.journey-box .body .text,
.system-journey .body .text {
  clear: both;
  padding: 0.5em;
  position: relative;
  font-size: 0.8em; }

.system-journey .body .title b {
  display: inline;
  position: absolute;
  left: -2em;
  display: none; }

.system-journey .body .title input {
  font-size: 0.8em; }

.system-journey input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  height: 1.4em; }

#namesys input:focus::-webkit-input-placeholder {
  color: #fff; }

#namesys input:focus::-moz-placeholder {
  color: #fff; }

.system-journey .body .save,
.system-journey .body .close,
.system-journey .body .edit {
  width: 2em;
  height: 2em;
  background: url(/images/icon-close.png) center center no-repeat;
  cursor: pointer;
  background-size: 0.8em;
  display: inline-block;
  position: absolute;
  top: 0.2em;
  right: 0; }

.system-journey .body .edit {
  right: 0;
  background: url(/images/system-edit.png) center center no-repeat; }

.system-journey .body .save {
  right: 2.2em;
  background: url(/images/system-save.png) center center no-repeat; }

.system-journey .body .close:hover,
.system-journey .body .edit:hover {
  opacity: 0.8; }

.system-journey .box-holder .item {
  position: relative;
  border: solid 1px #eee;
  background-color: #fff;
  padding: 0.5em 1em;
  margin-bottom: -1px;
  text-align: left;
  font-size: 0.9em; }

#namesys .col-right .box-holder {
  padding-left: 2.5em; }

.system-journey .box-holder .item .mark {
  position: absolute;
  top: 0.5em;
  left: -2.5em;
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
  border: solid 1px #eee;
  border-radius: 100%;
  text-align: center;
  color: #999; }

.system-journey .box-holder .item .mark.done {
  background: url(/images/intro-tick.png) center center no-repeat;
  background-size: 1.5em;
  background-color: #82D714;
  border-color: #6EBB0C;
  text-indent: -9999px; }

@media (min-width: 768px) {
  .system-journey .box-holder .item:first-child {
    border: none;
    border-radius: 0;
    background-color: transparent;
    margin: -0.5em 0;
    font-size: 0.9em; } }

.system-journey .box-holder .item.active {
  /* border:solid 1px #ccc; */
  /* border-radius:4px; */
  background-color: #eff6dc;
  /* margin-bottom: 0; */ }

.system-journey .box-holder .item .names,
.system-journey .box-holder .item .codes {
  display: inline-block;
  vertical-align: top;
  margin-right: -4px; }

.system-journey .box-holder .item .names {
  width: 30%;
  position: relative;
  word-wrap: break-word;
  padding-right: 10%; }

.system-journey .box-holder .item .names:after {
  content: "";
  position: absolute;
  top: -0.6em;
  bottom: -0.7em;
  right: 1em;
  width: 1em;
  background-color: #F1F5F8;
  border-left: solid 1px #eee;
  border-right: solid 1px #eee; }

.system-journey .box-holder .item:first-child .names:after {
  display: none; }

.system-journey .box-holder .item .codes {
  width: 55%;
  padding-right: 3%; }

.system-journey .box-holder .item .save,
.system-journey .box-holder .item .edit,
.system-journey .box-holder .item .plus {
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  width: 2em;
  height: 2em;
  cursor: pointer;
  border: solid 1px transparent;
  opacity: 0; }

.system-journey .box-holder .item.active .save,
.system-journey .box-holder .item.active .edit,
.system-journey .box-holder .item.active .plus,
.system-journey .box-holder .item:hover .save,
.system-journey .box-holder .item:hover .edit,
.system-journey .box-holder .item:hover .plus {
  opacity: 1; }

.system-journey .box-holder .item .save {
  right: 0.5em;
  background: url(/images/system-save.png) center center no-repeat; }

.system-journey .box-holder .item .edit {
  right: 0.5em;
  background: url(/images/system-edit.png) center center no-repeat; }

.system-journey .box-holder .item .plus {
  background: url(/images/system-plus.png) center center no-repeat;
  background-size: 1.4em; }

.system-journey .box-holder .item .edit:hover,
.system-journey .box-holder .item .plus:hover {
  opacity: 0.8; }

#namesys .system-journey .col-right .content {
  height: 29.5em;
  box-sizing: border-box;
  width: 100%; }

#namesys .namesys-pagination {
  padding: 0.5em;
  /* padding-left:2.5em; */ }

#namesys .namesys-pagination span {
  background-color: #fff;
  box-shadow: 0 1px 1px #ccc;
  padding: 0.1em 0.3em;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
  min-width: 1.3em;
  display: inline-block; }

#namesys .namesys-pagination span:hover {
  box-shadow: none; }

#namesys .col-right .footer {
  padding: 0 1em; }

#namesys .col-right .footer .button-green {
  padding: 0.5em 1em; }

.system-journey .col-right .footer {
  /* background-color: #fff; */
  position: relative; }

.system-journey .col-right .link {
  color: #333;
  text-decoration: underline;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.5em;
  height: 1.5em; }

#namesys.mission-mode .col-left.country ul {
  border-bottom: solid 1px #eee; }

#namesys .col-left.country ul .selected,
#namesys.mission-mode .col-left.country ul li:only-child {
  background-color: #434345;
  padding: 0.2em 0.5em;
  border-radius: 4px; }

#namesys .col-left.country ul .selected .change-country {
  cursor: pointer;
  position: absolute;
  width: 2em;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(../images/system-name-star.png) center center no-repeat;
  background-size: 1em;
  border-left: solid 1px rgba(255, 255, 255, 0.09); }

#namesys .col-left.country ul .selected .change-country:hover {
  opacity: 0.8; }

#namesys.mission-mode .col-right .header {
  padding: 1em;
  margin-bottom: -1em;
  font-size: 0.9em; }

#namesys.mission-mode .col-right .header b {
  font-size: 1.1em; }

#namesys.mission-mode .col-right .content {
  height: 29em; }

#namesys.mission-mode .col-right .footer .mission-show.button-green.white {
  display: none;
  background: transparent;
  border-color: transparent; }

#namesys.mission-mode .col-right .footer .mission-show:nth-child(3) {
  left: auto;
  right: 1em; }

#namesys.mission-mode .col-right .footer .button-green {
  margin: 0.5em; }

.mission-show {
  display: none; }

.mission-mode .mission-show {
  display: inherit; }

.mission-mode .mission-hide {
  display: none; }

/*** Name system select country***/
.select-country {
  margin: 2em; }

.system-journey .select-country .header {
  background: url(../images/system-country.png) center top no-repeat;
  background-size: 15em;
  height: auto;
  padding-top: 9em;
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 1em; }

.select-country .list {
  color: #999;
  text-align: left; }

.select-country .list h3 {
  font-weight: normal; }

.select-country li {
  display: inline-block;
  vertical-align: top;
  width: 33.33%;
  margin: 1em 0;
  margin-right: -4px;
  cursor: pointer; }

.select-country li:hover {
  color: #5D9E1B; }

.select-country li .img-holder {
  width: 1.5em;
  float: left;
  line-height: 1.3em; }

.select-country li .img-holder img {
  vertical-align: middle; }

.select-country li .name {
  padding-left: 2.2em;
  padding-right: 1em;
  font-size: 0.9em;
  line-height: 1.4em;
  font-weight: bold; }

.select-country .footer {
  margin: 1em 3.4em;
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0; }

.select-country .footer .img-holder {
  width: 3em;
  float: left; }

.select-country .footer .vertical {
  color: #999;
  font-size: 0.8em;
  line-height: 1.3em;
  display: table-cell;
  vertical-align: middle;
  height: 4em;
  padding-left: 1em;
  text-align: left; }

/*** Name system learnification***/
.system-journey .col-right .content-learn {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #F1F5F8;
  z-index: 10; }

.system-journey .col-right .content-learn .slide {
  padding: 1em; }

.system-journey .col-right .content-learn .slide .content-list {
  padding: 0 3em;
  opacity: 0; }

.system-journey .col-right .content-learn .slide .img-holder {
  background: url(/images/system-name-learn.png) center center no-repeat;
  background-size: 10em;
  width: 10em;
  height: 10em;
  margin: 1em auto; }

.system-journey .col-right .content-learn .slide .list {
  background-color: #fff;
  margin: 0.5em 0;
  padding: 0.5em; }

.system-journey .col-right .content-learn .slide {
  padding: 1em; }

.system-journey .col-right .content-learn .slide .header {
  padding: 3em 3em 1em;
  height: auto;
  opacity: 0; }

.system-journey .col-right .content-learn .slide .box-holder {
  opacity: 0;
  margin-top: 3em; }

.system-journey .col-right .content-learn .slide .preview {
  opacity: 1;
  transition: all 0.3s ease;
  display: inherit !important; }

.system-journey .col-right .content-learn .slide .header > b {
  font-size: 1.2em; }

.system-journey .col-right .content-learn .slide-pager {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 1em; }

.system-journey .col-right .content-learn .slide-pager .text {
  line-height: 4em;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3em;
  margin-left: -1.5em; }

/*******************************/
/********Unlock game*************/
/*******************************/
.unlock-container {
  width: 500px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -189px;
  background-color: #fff;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards; }

.unlock-container .header {
  padding: 1.5em; }

.unlock-container .content {
  position: relative;
  padding: 1.5em 1em 1em;
  background: #f0df69;
  /* Opera 12+ */
  /* IE10+ */
  background: radial-gradient(ellipse at center, #f0df69 0%, #f6d253 100%);
  /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0df69', endColorstr='#f6d253',GradientType=1 );  IE6-9 fallback on horizontal gradient */ }

.unlock-container .content:after {
  content: "";
  position: absolute;
  top: 7em;
  left: 50%;
  width: 4em;
  height: 4em;
  margin-left: -2em;
  background: url(/images/unlock.png) center center no-repeat;
  background-size: 4em;
  z-index: 2; }

.unlock-container .content:before {
  content: "";
  position: absolute;
  top: 9em;
  left: 50%;
  width: 6em;
  height: 1em;
  margin-left: -3em;
  background: rgba(0, 0, 0, 0.19);
  border-radius: 100%;
  -webkit-filter: blur(1px); }

.unlock-container .content .img-holder {
  position: relative;
  width: 8em;
  height: 8em;
  background-color: #fff;
  border-radius: 100%;
  margin: 0 auto 1em;
  z-index: 1; }

.unlock-container .content p {
  padding: 1em 0; }

.unlock-container .footer {
  padding: 1em; }

/*******************************/
/********goal game*************/
/*******************************/
.goal-container {
  width: 500px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -189px;
  background-color: #fff;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards; }

.goal-container .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: url(/images/icon-close.png) center center no-repeat;
  background-size: 8px;
  text-indent: -9999px;
  cursor: pointer; }

.goal-container .header {
  padding: 1.5em; }

.goal-container .content {
  color: #fff;
  position: relative;
  padding: 1.5em 1em 1em;
  background: #b9ff5e;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 12+ */
  /* IE10+ */
  background: radial-gradient(ellipse at center, #b9ff5e 0%, #72b006 100%);
  /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9ff5e', endColorstr='#72b006',GradientType=1 );  IE6-9 fallback on horizontal gradient */ }

.goal-container .content:before {
  content: "";
  position: absolute;
  top: 9em;
  left: 50%;
  width: 6em;
  height: 1em;
  margin-left: -3em;
  background: rgba(0, 0, 0, 0.19);
  border-radius: 100%;
  -webkit-filter: blur(1px); }

.goal-container .icon-belt {
  -webkit-transform: scale(2);
  transform: scale(2);
  margin: 3em auto; }

.goal-container .content .img-holder {
  position: relative;
  width: 8em;
  height: 8em;
  background-color: #fff;
  border-radius: 100%;
  margin: 0 auto 1em;
  z-index: 1; }

.goal-container .content p {
  padding: 1em 0; }

.goal-container .footer {
  padding: 1em; }

.goal-container .footer .button-green {
  background-color: #4864a1;
  border-color: #4864a1; }

/*******************************/
/********choose category*************/
/*******************************/
.choose-container {
  width: 50em;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25em;
  margin-top: -17.6em;
  background-color: #fff;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards; }

.choose-container .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: url(/images/icon-close.png) center center no-repeat;
  background-size: 8px;
  text-indent: -9999px;
  cursor: pointer; }

.choose-container .header {
  padding: 1.5em; }

.choose-container .header h1 {
  font-size: 1.1em;
  line-height: 1.5em; }

.choose-container .content {
  color: #fff;
  position: relative;
  background-color: #F2F2F2;
  height: 25em;
  display: inline-block;
  vertical-align: top;
  margin-right: -4px;
  width: 50%;
  box-shadow: inset -1px 0 1px -1px #9A9A9A; }

.choose-container .footer .intro-col.double.lock:after,
.choose-container .content.lock:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.6); }

/* .choose-container .content:first-child{
}
.choose-container .content:after{
}
.choose-container .content:before{
  content:"";
  position: absolute;
  bottom: 1.8em;
  left: 50%;
  width: 6em;
  height: 1em;
  margin-left: -3em;
  background: rgba(0, 0, 0, 0.19);
  border-radius: 100%;
  -webkit-filter: blur(3px);
}
.choose-container .content.single:before{
  bottom:3.8em;
} */
.choose-container .content p {
  /* padding: 1em 0; */ }

.choose-container .footer {
  /* padding: 1em 0; */
  background-color: #F2F2F2; }

.choose-container .footer .intro-col {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-right: -4px;
  width: 50%;
  padding: 1em 0; }

.choose-container .footer .intro-col.single {
  box-shadow: inset -1px 0 1px -1px #9A9A9A; }

.choose-container .footer .intro-col.double.lock .button-green {
  display: none; }

.choose-container .footer .intro-col.double.lock .locked,
.choose-container .footer .intro-col.double .button-green {
  display: inline-block; }

.choose-container .footer .locked {
  position: relative;
  display: none;
  z-index: 1;
  padding: 1.4em;
  padding-left: 2em;
  background: url(/images/system-intro-lock.png) left center no-repeat;
  background-size: 1.3em; }

.chart {
  position: absolute;
  width: 20em;
  height: 20em;
  top: 50%;
  left: 50%;
  margin: -9em 0 0 -10em; }

#pieChart2.chart {
  width: 16em;
  height: 16em;
  margin: -7em 0 0 -8em; }

.chart .label {
  position: absolute;
  top: 4em;
  left: 12em;
  font-size: 0.9em;
  line-height: 1em; }

.pieSegmentGroup text {
  font-size: 0.8em;
  cursor: pointer; }

#pieChart2 .pieSegmentGroup text {
  font-size: 0.9em; }

/*
.chart .label small{
  font-size:0.9em;
}
 .chart .label.a{
  top: 5em;
  left: 13em;
}
.chart .label.b{
  top: 10em;
  left: 15em;
}
.chart .label.c{
  top: 15em;
  left: 16em;
}
.chart .label.d{
  top: 4em;
  left: 12em;
}
.chart .label.e{
  top: 18em;
  left: 10.6em;
}
.chart .label.f{
  top: 15em;
  left: 5em;
}
.chart .label.g{
  top: 10em;
  left: 4em;
}
.chart .label.h{
  top: 5em;
  left: 7em;
  color:#999;
} */
.chart path {
  cursor: pointer; }

.pieTip {
  display: none;
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 18px 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.97);
  color: #444;
  font-size: 19px;
  text-shadow: 0 1px 0 #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
  -webkit-transform: all .3s;
  transform: all .3s;
  pointer-events: none; }

.pieTip:after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  content: "";
  height: 0;
  margin: 0 0 0 -6px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid rgba(255, 255, 255, 0.95);
  line-height: 0; }

.chart-round {
  position: absolute;
  background-color: #eae9e7;
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: #333;
  font-weight: bold;
  top: 50%;
  left: 50%;
  margin-left: -30px;
  margin-top: -30px;
  border-radius: 100px;
  text-align: center; }

.chart-title {
  position: absolute;
  top: -1.5em;
  left: 0;
  right: 0;
  text-align: center;
  color: #333;
  font-weight: bold; }

.content.single .chart-title {
  top: -3.5em; }

.chart-round:after {
  content: "";
  position: absolute;
  background-color: rgba(234, 233, 231, 0.39);
  width: 130%;
  height: 130%;
  top: 50%;
  left: 50%;
  margin-left: -65%;
  margin-top: -65%;
  border-radius: 100%; }

#chart_div {
  width: 100%;
  height: 400px; }

#legend {
  display: none; }

.chart-holder {
  position: relative; }

.chart-label {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.21);
  width: 120px;
  height: 120px;
  top: 50%;
  left: 50%;
  margin-left: -60px;
  margin-top: -80px;
  border-radius: 100px;
  text-align: center; }

/*******************************/
/********System tutorial*************/
/*******************************/
.tutorial-container {
  width: 700px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -350px;
  margin-top: -284px;
  text-align: center; }

.tutorial-container.test {
  margin-top: -227px; }

.tutorial-container h1 {
  padding-bottom: 0.3em;
  font-size: normal;
  color: #dadada; }

.tutorial-container h1 + p {
  font-size: 1.1em;
  color: #dadada; }

.tutorial-container p {
  margin-bottom: 1em;
  font-size: 0.9em;
  line-height: 1.3em; }

.tutorial-container .header p {
  margin-bottom: 0.5em; }

.tutorial-container .content {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px #333;
  margin: 0 auto;
  width: 500px; }

.tutorial-container .header {
  padding: 1em;
  /* border-bottom: solid 1px #ccc; */ }

.tutorial-container table {
  width: 100%; }

.tutorial-container.test table {
  /* padding:1em 0; */ }

.tutorial-container th {
  /* border-bottom: solid 1px #ccc;
  border-right: dotted 1px #ccc;
    padding: 0.5em;
    font-size: 0.9em;
    color: #999;
    font-weight: 400; */ }

.tutorial-container th + th {
  /* border-right:none; */ }

.tutorial-container td {
  /*  vertical-align: middle;
    width: 70%;
    border-right: dotted 1px #ccc; */ }

.tutorial-container td i {
  padding: 1em;
  display: block;
  color: #999; }

.tutorial-container td i span {
  font-style: normal; }

.tutorial-container td + td {
  /*  width: 30%;
  border:none; */ }

.tutorial-container.test .header {
  border-bottom: solid 1px #ccc;
  position: relative; }

.tutorial-container.test .header .location {
  position: absolute;
  right: 0;
  bottom: 0.2em;
  font-size: 0.9em;
  font-style: italic;
  color: #999;
  width: 28%;
  padding: 0 2%;
  line-height: 1em; }

.tutorial-container.test td + td {
  width: 40%;
  /* border-right: dotted 1px #ccc; */
  vertical-align: middle; }

.tutorial-container.test .item:after {
  display: none; }

.tutorial-container.test td:nth-child(2) .item:after {
  display: block;
  top: 0;
  right: -40%;
  left: auto; }

.tutorial-container.test .item {
  margin: 1em auto; }

.tutorial-container.test .name {
  position: absolute;
  top: -1em;
  right: -1em;
  width: 10em;
  display: none; }

.tutorial-container.test td:first-child {
  text-align: right;
  vertical-align: middle;
  font-weight: bold;
  font-size: 1.2em; }

.tutorial-container.test td,
.tutorial-container.test td + td + td {
  width: 30%;
  border-right: none; }

.tutorial-container .item {
  width: 8em;
  margin: auto;
  position: relative;
  /* padding-top: 1.5em; */
  display: inline-block; }

.tutorial-container .item:nth-child(1):after,
.tutorial-container .item:nth-child(2):after {
  content: "\2192";
  position: absolute;
  top: 40%;
  right: -0.5em;
  font-size: 1.3em; }

.tutorial-container tr:nth-child(3) .item:after {
  right: auto;
  left: -0.5em;
  top: 48%; }

.tutorial-container .item .img-holder {
  width: 4em;
  height: 4em;
  position: relative;
  line-height: 5em;
  overflow: hidden;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  margin: 0.5em; }

.tutorial-container .name {
  /* position: absolute; */
  /* top: 0.5em; */
  /* right: -2.1em; */
  /* width: 10em; */
  display: block; }

.tutorial-container td + td .name {
  right: -1em; }

.tutorial-container .code {
  /* display: inline-block; */
  /* vertical-align: middle; */
  font-size: 1.5em; }

.tutorial-container .description {
  padding: 1.5em 2em;
  position: relative;
  background-color: #93c60b;
  color: #fff; }

.tutorial-container .description:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1em;
  border: solid 1em transparent;
  border-top-color: #fff; }

.tutorial-container .description small {
  font-size: 0.9em; }

.tutorial-container .description p {
  margin: 0;
  font-size: 1em; }

.tutorial-container .footer {
  padding: 0 1em;
  /* background-color: #323c3a; */
  /* color: #fff; */ }

.tutorial-container .footer {
  background-color: #323c3a;
  color: #fff; }

.tutorial-container .link {
  color: #c2c2c2;
  text-decoration: underline; }

/*******************************/
/********Doublesys example*************/
/*******************************/
.doublesys-example {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50em;
  height: 35.7em;
  margin-left: -25em;
  margin-top: -17.2em;
  text-align: center;
  opacity: 0;
  background-color: #fff;
  border-radius: 2px;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards;
  overflow: hidden; }

.doublesys-example .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F2B220;
  padding: 1.5em;
  color: #fff;
  z-index: 1; }

.de-description {
  display: inline-block;
  margin-right: -4px;
  width: 70%;
  text-align: left; }

.de-description .dot span {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border: solid 1px #fff;
  border-radius: 100%;
  margin-right: 0.5em;
  cursor: pointer; }

.de-description .dot span:hover {
  opacity: 0.8; }

.de-description .dot span.active {
  background-color: #fff; }

.de-button-holder {
  display: inline-block;
  margin-right: -4px;
  width: 30%; }

.de-number {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #F2B220;
  color: #fff; }

.de-number h1 {
  padding-top: 2em;
  font-size: 5em;
  font-weight: 300; }

.de-number p {
  opacity: 0.5; }

.doublesys-example .slide2 .sys-ani-holder {
  right: 0;
  bottom: 0;
  background-color: #F2B220; }

.doublesys-example .slide2 .sys-ani-holder .sys-ani {
  margin-left: auto;
  margin-right: auto; }

.sys-ani-holder .ani-description-top {
  color: white;
  margin-top: 110px; }

.sys-ani-holder .ani-description-bottom {
  color: white; }

.doublesys-example .system-learn {
  width: 35em;
  position: relative;
  top: 2em;
  left: 0;
  margin: 0 auto;
  box-shadow: 0 0 20px #ccc; }

.doublesys-example .slide3 .system-learn {
  /* box-shadow:none; */ }

.doublesys-example .system-learn h1 {
  font-size: 4em;
  border: none;
  padding: 0.25em;
  margin: 0;
  opacity: 1; }

.doublesys-example .system-learn .box-holder .header {
  width: 6.2em;
  line-height: 1em;
  position: absolute;
  top: 0;
  left: 0; }

.doublesys-example .system-learn .box-holder .box {
  position: relative; }

.doublesys-example .system-learn .box-holder .box:last-child {
  border-bottom: none; }

.doublesys-example .system-learn .box-holder .box.stripe {
  text-align: left;
  font-size: 0.9em;
  background-color: #fff;
  color: #333;
  border-bottom: solid 1px #ccc; }

.doublesys-example .slide3 .system-learn .box-holder .box.stripe {
  font-size: 1em;
  padding-bottom: 1em;
  border-top: solid 0.5em #F2B220; }

.doublesys-example.example1 .slide3 .system-learn .box-holder .box.stripe {
  padding-top: 1.3em;
  padding-bottom: 2em; }

.doublesys-example .system-learn .box-holder .header p {
  height: 1em;
  background-color: rgba(31, 37, 42, 0.64);
  padding: 0.5em;
  font-size: 0.8em;
  color: #fff; }

.doublesys-example .system-learn .box-holder .body {
  width: 100%; }

.doublesys-example .system-learn .box-holder .img-holder {
  margin: 0 auto;
  /* margin-top:1em; */
  background-color: rgba(31, 37, 42, 0.06);
  width: 6em;
  height: 6em; }

.doublesys-example .system-learn .box-holder .body .text {
  padding: 0.5em 1em;
  height: 6em; }

.doublesys-example.example2 {
  background-color: #f1f4f4; }

.doublesys-example .system-learn {
  top: 0; }

.doublesys-example.example2 .slide1 .content {
  width: 300px;
  margin: auto;
  -webkit-transform: translateY(50%); }

.doublesys-example.example2 .slide1 .number-holder {
  border: solid 1px #ccc;
  padding: 1em;
  margin: 1em 0; }

.doublesys-example.example2 .slide1 .number-holder + p {
  font-size: 0.9em;
  line-height: 1.5em; }

.doublesys-example.example2 .slide1 .number-holder span {
  font-size: 3em;
  display: inline-block;
  margin: 0.2em 0.1em;
  color: #3399ff; }

.doublesys-example.example2 .slide1 .de-description {
  text-align: center; }

.doublesys-example.example2 .system-learn {
  font-size: 0.9em;
  border-radius: 0; }

.doublesys-example.example2 .footer {
  background-color: #fff;
  color: #333; }

.doublesys-example.example2 .slide1 .footer {
  background-color: transparent; }

.doublesys-example.example2 .footer .dot span.active {
  border-color: #666; }

.doublesys-example.example2 .footer .dot span {
  border-color: #ccc; }

.doublesys-example.example2 .slide5 .de-description {
  text-align: left; }

.doublesys-example.example2 .de-description > b {
  margin-left: 0.3em; }

.doublesys-example.example2 .de-description p {
  min-height: 2.5em;
  margin-left: 0.5em;
  font-size: 0.9em; }

.doublesys-example.example2 .de-description span b {
  color: #333; }

.doublesys-example.example2 .de-description span {
  display: inline-block;
  margin: 0 0.5em;
  color: #ccc; }

.doublesys-example.example2 .slide3 .system-learn .box-holder .box.stripe {
  border-top: none; }

.doublesys-example.example2 .system-learn .box-holder .box.stripe {
  padding-bottom: 0.5em; }

.doublesys-example.example2 .slide3 .system-learn .top {
  background-color: #d36ca6; }

.doublesys-example.example2 .slide4 .system-learn .top {
  background-color: #7190bd; }

.doublesys-example.example2 .de-memory {
  padding-top: 1em; }

.doublesys-example.example2 .de-memory .img-holder {
  width: 5em;
  margin: 1em auto 0;
  opacity: 0;
  -webkit-animation: fadeIn 1s ease 0.3s forwards;
  animation: fadeIn 1s ease 0.3s forwards; }

.doublesys-example.example2 .de-memory .text {
  font-size: 0.8em;
  opacity: 0;
  -webkit-animation: fadeIn 1s ease 0.3s forwards;
  animation: fadeIn 1s ease 0.3s forwards; }

.faded {
  opacity: 0.4 !important; }

.emph {
  box-shadow: 0 0 10px #333; }

/*******************************/
/********System tutorial*************/
/*******************************/
.tutorial-double {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50em;
  margin-left: -25em;
  margin-top: -17.2em;
  text-align: center;
  opacity: 0;
  background-color: #f1f5f8;
  border-radius: 2px;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards;
  overflow: hidden; }

.tutorial-double .content {
  display: table-cell;
  width: 50em;
  height: 30em;
  vertical-align: middle; }

.tutorial-double .content .text b {
  font-size: 1.6em;
  display: block;
  margin-bottom: 1em; }

.tutorial-double .content .group {
  display: inline-block;
  letter-spacing: 1px;
  margin: 0 0.3em; }

.tutorial-double .content .caption {
  margin-bottom: 2em; }

.tutorial-double .content .caption .group {
  color: #ccc;
  font-size: 0.8em;
  word-spacing: 1em;
  margin-left: 0.2em; }

.tutorial-double .content .caption .group + .group {
  margin-left: 0.5em;
  padding-left: 0.5em; }

.tutorial-double .content .intro-text {
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(/images/system-journey-intro.png) center top no-repeat;
  background-size: 3em;
  padding-top: 4em;
  width: 50%;
  font-size: 0.9em;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.tutorial-double .content .intro-text p {
  font-size: 0.9em;
  line-height: 1.5em;
  padding-bottom: 1em; }

.tutorial-double .content .hint {
  position: relative;
  background-color: #fff;
  padding: 1em;
  width: 18em;
  margin: 2em auto;
  box-shadow: 0 0 1px #ddd;
  -webkit-animation: fadeInUpSmall 1s ease forwards;
  animation: fadeInUpSmall 1s ease forwards;
  z-index: 2; }

.tutorial-double .content .hint:after {
  content: "";
  border: solid 10px transparent;
  border-top-color: #fff;
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -10px; }

.tutorial-double .slide2 .content .hint {
  margin-top: -9em; }

.tutorial-double .content .hint .header {
  font-size: 0.8em;
  border-bottom: solid 1px #eee;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em; }

.tutorial-double .content .hint .text {
  font-size: 0.75em;
  line-height: 1.5em;
  color: #999; }

.tutorial-double .content .item {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin: 1em 0.2em;
  font-size: 0.8em;
  line-height: 1.5em;
  width: 8em; }

.slide4 .content .hint {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10em;
  margin-top: -8.5em; }

.slide4 .content .item {
  margin: 2em 0.4em 0; }

.slide4 .content .divider {
  margin-top: 2em; }

.tutorial-double .content .item .no {
  border: solid 1px #999;
  display: inline-block;
  border-radius: 100%;
  width: 2em;
  height: 2em;
  line-height: 2em;
  font-size: 0.8em;
  background-color: #fff;
  position: absolute;
  top: -1em;
  left: 50%;
  margin-left: -1em;
  z-index: 1; }

.tutorial-double .content .item .img-holder {
  width: 6em;
  height: 6em;
  overflow: hidden;
  line-height: 6em;
  margin: auto;
  margin-bottom: 1em;
  background-color: #fff; }

.tutorial-double .content .item .img-holder img {
  vertical-align: middle; }

.tutorial-double .footer {
  position: relative;
  padding: 0.2em 1em; }

.tutorial-double .footer .link {
  color: #999; }

.tutorial-double .footer .pager {
  position: absolute;
  left: 50%;
  width: 2em;
  margin-left: -1em;
  line-height: 4em; }

.slide5 .content .items {
  margin-top: 3em; }

.slide5 .content .items small {
  display: block;
  margin-bottom: 0.5em;
  font-size: 0.9em; }

.slide6 .content .items {
  display: inline-block;
  margin: 0 2em; }

.slide6 .content .items .no {
  position: relative;
  top: inherit;
  left: inherit;
  margin: 0;
  border: none;
  background-color: transparent;
  font-size: 1em;
  padding-bottom: 0.5em; }

/*******************************/
/********System tutorial completed*************/
/*******************************/
.mission-completed .tutorial-completed .content {
  position: relative; }

.mission-completed .tutorial-completed .content > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10em;
  margin-left: -5em;
  margin-top: -5.5em;
  /* -webkit-transform:translate(-50%,-50%); */
  /* transform:translate(-50%,-50%); */
  -webkit-animation: tada 1s ease 1s forwards;
          animation: tada 1s ease 1s forwards; }

.tutorial-completed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30em;
  margin-left: -15em;
  margin-top: -17.2em;
  text-align: center;
  opacity: 0;
  background-color: #f1f5f8;
  border-radius: 2px;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards;
  overflow: hidden; }
  .tutorial-completed .content {
    height: 20em;
    background: url(/images/system-double-complete.jpg) center center no-repeat;
    background-size: cover;
    background-color: #ccc;
    padding: 1em; }
  .tutorial-completed .content .chart {
    top: 0;
    margin-top: 1em; }
  .tutorial-completed .footer {
    padding: 1em 2em; }
    .tutorial-completed .footer .intro-col {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center; }
    .tutorial-completed .footer .center {
      margin: 0px 5px; }
    .tutorial-completed .footer .text h1 {
      padding-bottom: 0.5em; }
    .tutorial-completed .footer .text {
      font-size: 0.8em;
      line-height: 1.5em;
      padding-bottom: 1em; }

/*********************************/
/*********System result ************/
/*********************************/
.system-result {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  width: 21.42em;
  margin-left: -10.71em;
  margin-top: -12.85em;
  text-align: center;
  opacity: 0;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards; }

.system-result h1 {
  font-size: 2em;
  font-weight: 300;
  line-height: 1.5em; }

.system-result .img-holder {
  width: 8em;
  height: 8em;
  background-color: #f1f1f1;
  border-radius: 100%;
  margin: 2em auto;
  border: solid 2px #fff;
  line-height: 8em; }

.system-result .img-holder img {
  vertical-align: middle; }

.system-result .button-green {
  margin-top: 4em; }

@-webkit-keyframes tick-animation {
  0% {
    -webkit-transform: scale(0);
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    visibility: hidden;
    -webkit-transform: scale(1);
    opacity: 0; } }

@keyframes tick-animation {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    visibility: hidden;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0; } }

.tick-red,
.tick {
  text-indent: -9999px;
  position: fixed;
  top: 50%;
  left: 50%;
  color: #6F0;
  width: 220px;
  height: 220px;
  background: url(../images/correct_check.png) center center no-repeat;
  text-align: center;
  margin-left: -110px;
  margin-top: -110px;
  -webkit-transform: scale(0);
  transform: scale(0); }

.tick-red {
  background-image: url(../images/wrong_x.png); }

.tick-red.animate,
.tick.animate {
  -webkit-animation: tick-animation 1s ease forwards;
  animation: tick-animation 1s ease forwards; }

/*********Loading ************/
.memolang-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16em;
  min-height: 15em;
  margin-left: -9.5em;
  margin-top: -8.5em;
  background-color: #fff;
  padding: 1em;
  text-align: center;
  border-radius: 3px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1033; }

.mascot-gym {
  background: transparent url(/images/mmap-mascot-gym.png) 0 0 no-repeat;
  background-size: 10080px;
  width: 180px;
  height: 175px;
  margin: 0 auto;
  z-index: 10;
  -webkit-animation: play-gym 6s steps(56) infinite;
  animation: play-gym 6s steps(56) infinite; }

.mascot-gym.big {
  background-size: 12320px;
  width: 220px;
  -webkit-animation: play-gym-big 6s steps(56) infinite;
  animation: play-gym-big 6s steps(56) infinite; }

@-webkit-keyframes play-gym {
  from {
    background-position: 0px; }
  to {
    background-position: -10080px; } }

@keyframes play-gym {
  from {
    background-position: 0px; }
  to {
    background-position: -10080px; } }

@keyframes play-gym-big {
  from {
    background-position: 0px; }
  to {
    background-position: -12320px; } }

@-webkit-keyframes play-gym-big {
  from {
    background-position: 0px; }
  to {
    background-position: -12320px; } }

.progress {
  overflow: hidden;
  height: 18px;
  margin: 0;
  background-color: #f7f7f7;
  background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 4px; }

.progress .bar {
  width: 0%;
  height: 18px;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  background: #8ACE34;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  transition: width 0.6s ease; }

.memolang-loading .progress {
  height: 10px;
  border: solid 1px #78c208;
  border-radius: 50px; }

.memolang-loading .bar {
  background: #78c208;
  margin: 1px;
  height: 8px;
  border-radius: 50px 0 0 50px; }

@-webkit-keyframes count-bounce-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  80% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }
  85% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes count-bounce-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }
  80% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }
  85% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes count-bounce-up {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  15%, 25% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  40% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes count-bounce-up {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  15%, 25% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  40% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.mobile-game-mode {
  position: absolute;
  top: -7em;
  right: 0em;
  color: white;
  cursor: pointer; }

.count-down {
  z-index: 1033;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin-top: -3.5em;
  margin-left: -3.5em;
  color: #fff;
  font-size: 1.5em;
  opacity: 1;
  color: #333;
  text-align: center; }

.count-down.animate {
  -webkit-animation: count-bounce-down 1s ease forwards;
  animation: count-bounce-down 1s ease forwards; }

.count-down.animate.up {
  -webkit-animation: count-bounce-up 1s ease forwards;
  animation: count-bounce-up 1s ease forwards; }

#levelanimatepanel .count-level img {
  max-width: 30%; }

.bg-night .count-down.animate {
  color: #fff; }

.count-down .img-holder {
  width: 150px;
  height: 150px;
  /*  background-color: #f1f1f1; */
  border-radius: 100%;
  overflow: hidden;
  margin: 0 0 0.5em;
  position: relative; }

.count-down .img-holder:after {
  content: "";
  background-color: rgba(4, 4, 4, 0.22);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%; }

.count-down .count-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1; }

.count-down .count-level {
  width: 60em;
  font-size: 0.6em;
  margin-left: -24.3em;
  font-weight: bold;
  margin-top: 5em;
  opacity: 0;
  -webkit-animation: bounceInUp 1s 1s ease forwards;
  animation: bounceInUp 1s 1s ease forwards; }

.count-down .count-level .col-md-4 {
  margin-top: 1em;
  border-left: solid 1px #fff; }

.count-down .count-level .col-md-4:first-child {
  border-left: none; }

.count-down .count-level .col-md-4 img {
  width: 2em;
  vertical-align: middle;
  margin-right: 1em; }

/*********************/
/*** Library game
/*********************/
.library {
  position: relative;
  width: 100%;
  height: 100%; }

.library.play {
  background: url(/images/bg-library-play.jpg) center center no-repeat;
  background-size: cover;
  transition: background 500ms linear; }

.library .intro {
  background: url(/images/bg-library-intro.jpg) center top no-repeat;
  background-size: cover; }

.library .container {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 600px;
  height: 600px;
  margin-left: -300px; }

/*************book*********/
@-webkit-keyframes bk-ani {
  0% {
    -webkit-transform: scale(0.3) translateY(-1000px); }
  80% {
    -webkit-transform: scale(0.3) translateY(500px); }
  100% {
    -webkit-transform: scale(0.3) translateY(400px); } }

@keyframes bk-ani {
  0% {
    -webkit-transform: scale(0.3) translateY(-1000px);
    transform: scale(0.3) translateY(-1000px); }
  50% {
    -webkit-transform: scale(0.3) translateY(500px);
    transform: scale(0.3) translateY(500px); }
  100% {
    -webkit-transform: scale(0.3) translateY(400px);
    transform: scale(0.3) translateY(400px); } }

.bk-list {
  list-style: none;
  position: relative;
  padding: 5em 0;
  -webkit-transform: scale(0.3) translateY(-1000px);
  -webkit-transform-origin: center;
  -webkit-transition: all 1s ease;
  -webkit-transform: scale(0.3) translateY(-1000px);
          transform: scale(0.3) translateY(-1000px);
  -webkit-transform-origin: center;
          transform-origin: center;
  transition: all 1s ease; }

.bk-level {
  position: absolute;
  bottom: -6em;
  left: 0;
  width: 95%;
  text-align: right;
  font-size: 5em; }

.bk-list.zoom {
  -webkit-animation: bk-ani 500ms ease forwards;
  animation: bk-ani 500ms ease forwards; }

.bk-list li .bk-book.bk-viewinside.big-zoom {
  -webkit-transform: scale(20);
  -webkit-transition: all 1s cubic-bezier(1, 0, 0.395, 1);
  -webkit-transform: scale(20);
          transform: scale(20);
  transition: all 1s cubic-bezier(1, 0, 0.395, 1); }

.bk-list li {
  position: relative;
  width: 300px;
  z-index: 1;
  margin: 0px 50px 40px 0;
  -webkit-perspective: 1800px;
  perspective: 1800px;
  margin: auto; }

.bk-list li:last-child {
  margin-right: 0; }

.bk-info {
  position: absolute;
  top: 450px; }

.bk-info h3 {
  padding: 25px 0 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 26px; }

.bk-info h3 span:first-child {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  padding-bottom: 5px;
  display: block;
  color: #777; }

.bk-info p {
  line-height: 24px;
  color: #444;
  min-height: 160px; }

.bk-info button {
  background: #FC756F;
  border: none;
  color: #fff;
  display: inline-block;
  padding: 3px 15px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: 4px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); }

.bk-info button.bk-active,
.bk-info button:active {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.2); }

.no-touch .bk-info button:hover,
.bk-info button.bk-active {
  background: #d0544e; }

.bk-list li .bk-book {
  position: absolute;
  width: 100%;
  height: 400px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s; }

/*
.bk-list li .bk-book.bk-bookdefault:hover {
  -webkit-transform: rotate3d(0,1,0,35deg);
  -moz-transform: rotate3d(0,1,0,35deg);
  transform: rotate3d(0,1,0,35deg);
}
 */
.bk-list li .bk-book > div,
.bk-list li .bk-front > div {
  display: block;
  position: absolute; }

.bk-list li .bk-front {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  -webkit-transform: translate3d(0, 0, 20px);
  transform: translate3d(0, 0, 20px);
  z-index: 10; }

.bk-list li .bk-front > div {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.bk-list li .bk-page {
  -webkit-transform: translate3d(0, 0, 19px);
  transform: translate3d(0, 0, 19px);
  display: none;
  width: 295px;
  height: 390px;
  top: 5px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 9; }

.bk-list li .bk-front,
.bk-list li .bk-back,
.bk-list li .bk-front > div {
  width: 300px;
  height: 400px; }

.bk-list li .bk-left,
.bk-list li .bk-right {
  width: 40px;
  left: -20px; }

.bk-list li .bk-top,
.bk-list li .bk-bottom {
  width: 295px;
  height: 40px;
  top: -15px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.bk-list li .bk-back {
  -webkit-transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 20px);
  transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 20px);
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
  border-radius: 3px 0 0 3px; }

.bk-list li .bk-cover-back {
  background-color: #000;
  -webkit-transform: rotate3d(0, 1, 0, -180deg);
  transform: rotate3d(0, 1, 0, -180deg); }

.bk-list li .bk-right {
  height: 390px;
  top: 5px;
  -webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 295px);
  transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 295px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.bk-list li .bk-left {
  height: 400px;
  -webkit-transform: rotate3d(0, 1, 0, -90deg);
  transform: rotate3d(0, 1, 0, -90deg); }

.bk-list li .bk-top {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
  transform: rotate3d(1, 0, 0, 90deg); }

.bk-list li .bk-bottom {
  -webkit-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 390px);
  transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 390px); }

/* Transform classes */
.bk-list li .bk-viewinside .bk-front {
  -webkit-transform: translate3d(0, 0, 20px) rotate3d(0, 1, 0, -160deg);
  transform: translate3d(0, 0, 20px) rotate3d(0, 1, 0, -160deg); }

.bk-list li .bk-book.bk-viewinside {
  -webkit-transform: translate3d(0, 0, 150px) rotate3d(0, 1, 0, 0deg);
  transform: translate3d(0, 0, 150px) rotate3d(0, 1, 0, 0deg); }

.bk-list li .bk-book.bk-viewback {
  -webkit-transform: translate3d(0, 0, 0px) rotate3d(0, 1, 0, 180deg);
  transform: translate3d(0, 0, 0px) rotate3d(0, 1, 0, 180deg); }

.bk-list li .bk-viewback .bk-back {
  z-index: 10; }

/* Main colors and content */
.bk-list li .bk-page,
.bk-list li .bk-right,
.bk-list li .bk-top,
.bk-list li .bk-bottom {
  background-color: #e5e5e5; }

.bk-list li .bk-front > div {
  border-radius: 0 3px 3px 0;
  box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1; }

.bk-list li .bk-front:after {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: -1px;
  width: 1px; }

.bk-list li .bk-cover:after,
.bk-list li .bk-back:after {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  width: 3px;
  background: rgba(0, 0, 0, 0.06);
  box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1); }

.bk-list li .bk-back:after {
  left: auto;
  right: 10px; }

.bk-left h2 {
  width: 400px;
  height: 40px;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(90deg) translateY(-40px);
  transform: rotate(90deg) translateY(-40px); }

.bk-content {
  position: absolute;
  top: 30px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  padding: 30px;
  overflow: hidden;
  background: #e5e5e5;
  opacity: 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  cursor: default; }

.bk-content-current {
  opacity: 1;
  pointer-events: auto; }

.bk-content p {
  padding: 0 0 10px;
  -webkit-font-smoothing: antialiased;
  color: #000;
  font-size: 13px;
  line-height: 20px;
  text-align: justify;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.bk-page nav {
  display: block;
  text-align: center;
  margin-top: 20px;
  position: relative;
  z-index: 100;
  cursor: pointer; }

.bk-page nav span {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #aaa;
  background: #f0f0f0;
  border-radius: 50%; }

.book-3 .bk-front > div,
.book-3 .bk-back,
.book-3 .bk-left,
.book-3 .bk-front:after {
  background-color: #a4c19e; }

.book-3 .bk-cover {
  background-image: url(/images/3.png);
  background-repeat: no-repeat;
  background-position: 100% 95%; }

.book-3 .bk-cover h2 {
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  padding-top: 15px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); }

.book-3 .bk-cover h2 span:first-child,
.book-3 .bk-left h2 span:first-child {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 13px;
  padding-right: 20px; }

.book-3 .bk-cover h2 span:first-child {
  display: block; }

.book-3 .bk-cover h2 span:last-child,
.book-3 .bk-left h2 span:last-child,
.book-3 .bk-content p {
  font-family: Georgia, Times, "Times New Roman", serif; }

.book-3 .bk-left h2 {
  color: #fff;
  font-size: 14px;
  line-height: 40px;
  text-align: center; }

.book-3 .bk-back img {
  width: 200px;
  display: block;
  margin: 30px auto 0; }

.book-3 .bk-back p {
  color: #fff;
  font-size: 13px;
  font-family: Georgia, Times, "Times New Roman", serif;
  padding: 40px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); }

/*************************/
.map-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100%;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  z-index: 2;
  transition: opacity 1s ease; }

@-webkit-keyframes ani-map {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  80% {
    -webkit-transform: scale(1.8);
            transform: scale(1.8); } }

.map-inner-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  /* -webkit-animation: ani-map 1s ease 2.5s forwards; */
  z-index: 2;
  transition: all 1s ease; }

.map-inner-container.zoom {
  -webkit-transform: scale(2) translate3d(0, 0, 0);
  transform: scale(2) translate3d(0, 0, 0);
  transition: all 1s ease; }

.map-container.show {
  visibility: visible;
  opacity: 1;
  background: url(/images/library-background.jpg) center bottom no-repeat;
  background-color: #e5e5e5; }

/*** Map **/
.mapjs-node {
  cursor: pointer;
  margin: 0;
  padding: 7px;
  border-radius: 4px;
  border: 1px solid #777;
  box-shadow: 2px 3px 4px #c9c9c9;
  z-index: 2;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background-color: #E0E0E0;
  color: #4F4F4F;
  cursor: hand;
  font-weight: 300; }

.mapjs-node.droppable {
  border: 1px solid red; }

.mapjs-add-link {
  cursor: crosshair; }

.mapjs-add-link .mapjs-node {
  cursor: alias; }

.mapjs-node span[contenteditable=true] {
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text; }

.mapjs-node span {
  color: #000;
  white-space: pre-wrap;
  text-align: center;
  line-height: 150% !important;
  display: inline-block;
  max-width: 146px;
  min-height: 1.5em;
  min-width: 4em;
  outline: none; }

.mapjs-node .img-holder {
  width: 1.5em;
  height: 1.5em;
  border: solid 1px #ccc;
  border-color: inherit;
  border-radius: 100%;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin-right: 0.3em; }

.mapjs-node.big .img-holder {
  width: 4em;
  height: 4em;
  display: block;
  margin: auto;
  line-height: 4em;
  border-radius: 4px;
  border-color: transparent; }

.mapjs-node.big .img-holder img {
  vertical-align: middle; }

.mapjs-node.activated {
  outline: 0; }

.mapjs-node:focus {
  outline: 0;
  z-index: 3; }

.mapjs-node.selected {
  outline: 0;
  z-index: 3; }

.mapjs-node.over {
  border-color: #000;
  opacity: 0.5; }

.mapjs-node.wrong {
  border-color: #f00; }

.mapjs-node.wrong span {
  color: #f00; }

.mapjs-node.dragging {
  opacity: 0.4; }

.mapjs-node.collapsed {
  /* box-shadow: 3px 3px 0 #A0A0A0, 4px 4px 0 #333, 6px 6px 0 #707070, 7px 7px 0 #222; */
  box-shadow: none; }

.mapjs-node.collapsed.selected {
  /* box-shadow: 4px 4px 0 #A0A0A0, 5px 5px 0 #333, 8px 8px 0 #707070, 9px 9px 0 #222, 12px 12px 5px black; */
  box-shadow: none; }

.mapjs-node[mapjs-level="1"] {
  /* background-color:#22AAE0; */
  font-size: 16px;
  font-weight: bold; }

.mapjs-node[mapjs-level="2"] {
  font-size: 13px;
  font-weight: bold; }

.mapjs-node[mapjs-level="3"] {
  font-size: 11px;
  font-weight: normal; }

.mapjs-node.round {
  width: 4em;
  height: 4em;
  padding: 1em;
  text-align: center;
  border-radius: 100%; }

.mapjs-node.round span {
  display: table-cell;
  height: 4em;
  vertical-align: middle;
  word-break: break-word;
  line-height: 1em !important; }

.mapjs-node-light {
  color: #4F4F4F; }

.mapjs-node-dark {
  color: #EEEEEE; }

.mapjs-node-white {
  color: black; }

.mapjs-label {
  left: -0.5em;
  position: absolute;
  bottom: -0.5em;
  background: black;
  opacity: 0.5;
  color: white; }

.mapjs-hyperlink {
  right: -0.5em;
  position: absolute;
  bottom: -0.5em;
  background-image: url(icon-link-inactive.svg);
  width: 1.5em;
  height: 1.5em;
  background-size: 1.5em;
  background-repeat: no-repeat no-repeat; }

.mapjs-hyperlink:hover {
  background-image: url(icon-link-active.svg); }

.mapjs-attachment {
  right: -5px;
  position: absolute;
  top: -15px;
  background-image: url(icon-paperclip-inactive.svg);
  width: 16px;
  height: 32px;
  background-size: 16px 32px;
  background-repeat: no-repeat no-repeat; }

.mapjs-attachment:hover {
  background-image: url(icon-paperclip-active.svg); }

.mapjs-draw-container {
  position: absolute;
  margin: 0px;
  padding: 0px;
  z-index: 1; }

.mapjs-connector {
  stroke-width: 1px;
  fill: none;
  stroke: #888; }

.stroke-white {
  stroke: #9e9e9e; }

.stroke-blue {
  stroke: #71cef0; }

.stroke-darkblue {
  stroke: #65c6e9; }

.stroke-green {
  stroke: #6dd93f; }

.stroke-darkgreen {
  stroke: #53eb4b; }

.stroke-purple {
  stroke: #d693e8; }

.stroke-darkpurple {
  stroke: #d794e8; }

.stroke-red {
  stroke: #ff4451; }

.stroke-yellow {
  stroke: #E2B70A; }

.stroke-orange {
  stroke: #f0ad71; }

.mapjs-link {
  stroke-width: 1.5px;
  fill: none; }

.mapjs-link-hit {
  stroke: transparent;
  stroke-width: 15;
  cursor: crosshair; }

.drag-shadow {
  opacity: 0.5; }

.mapjs-reorder-bounds {
  stroke-width: 5px;
  fill: none;
  stroke: #000; }

.mapjs-reorder-bounds {
  z-index: 999;
  background-image: url(chevron-left.svg);
  width: 11px;
  background-height: 100%;
  background-width: 100%;
  height: 20px;
  background-repeat: no-repeat; }

.mapjs-reorder-bounds[mapjs-edge="left"] {
  background-image: url(chevron-right.svg); }

.map-pale-white {
  background-color: #f6f6f6;
  border-color: #9e9e9e; }

.map-pale-blue {
  background-color: #eff9fc;
  border-color: #71cef0; }

.map-pale-darkblue {
  background-color: #e2f1f6;
  border-color: #65c6e9; }

.map-pale-green {
  background-color: #eef8e9;
  border-color: #6dd93f; }

.map-pale-darkgreen {
  background-color: #def7dd;
  border-color: #53eb4b; }

.map-pale-purple {
  background-color: #f4e5f8;
  border-color: #d693e8; }

.map-pale-darkpurple {
  background-color: #edd5f3;
  border-color: #d794e8; }

.map-pale-red {
  background-color: #ffeceb;
  border-color: #ff4451; }

.map-pale-yellow {
  background-color: #faf2d0;
  border-color: #E2B70A; }

.map-pale-orange {
  background-color: #fcf4ef;
  border-color: #f0ad71; }

.map-gradient-white {
  background: #f3f3f3;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #f3f3f3 0%, #dbdbdb 100%);
  /* W3C */
  /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#dbdbdb',GradientType=0 ); IE6-9 */
  border-color: #9e9e9e; }

.map-gradient-blue {
  background: #53e8ce;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #53e8ce 0%, #59cdf4 100%);
  /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53e8ce', endColorstr='#59cdf4',GradientType=0 ); IE6-9 */
  border-color: #71cef0; }

.map-gradient-darkblue {
  background: #1acbfc;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #1acbfc 0%, #1c77f2 100%);
  /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1acbfc', endColorstr='#1c77f2',GradientType=0 );  IE6-9 */
  border-color: #65c6e9; }

.map-gradient-green {
  background: #66d736;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #66d736 0%, #99e478 100%);
  /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66d736', endColorstr='#99e478',GradientType=0 );  IE6-9 */
  border-color: #6dd93f; }

.map-gradient-darkgreen {
  background: #74f662;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #74f662 0%, #1bd824 100%);
  /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#74f662', endColorstr='#1bd824',GradientType=0 );  IE6-9 */
  border-color: #53eb4b; }

.map-gradient-purple {
  background: #cb76e1;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #cb76e1 0%, #e0adee 100%);
  /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb76e1', endColorstr='#e0adee',GradientType=0 ); IE6-9 */
  border-color: #d693e8; }

.map-gradient-darkpurple {
  background: #eb4cbd;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #eb4cbd 0%, #cb44f3 100%);
  /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb4cbd', endColorstr='#cb44f3',GradientType=0 );  IE6-9 */
  border-color: #d794e8; }

.map-gradient-red {
  background: #fc3162;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #fc3162 0%, #ff553d 100%);
  /* W3C */
  /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc3162', endColorstr='#ff553d',GradientType=0 ); IE6-9 */
  border-color: #ff4451; }

.map-gradient-yellow {
  background: #ffd943;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #ffd943 0%, #ffcf0a 100%);
  /* W3C */
  /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd943', endColorstr='#ffcf0a',GradientType=0 ); IE6-9 */
  border-color: #E2B70A; }

.map-gradient-orange {
  background: #ff8d08;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #ff8d08 0%, #ff6533 100%);
  /* W3C */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8d08', endColorstr='#ff6533',GradientType=0 );  IE6-9 */
  border-color: #f0ad71; }

.map-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 15em;
  height: 97%;
  z-index: 3;
  background: url(/images/library-book-header.jpg) left top no-repeat, url(/images/library-book-footer.jpg) left bottom no-repeat, url(/images/library-book-body.jpg) left top repeat-y;
  background-size: contain;
  margin: 0 1em 1em;
  box-shadow: 0 0 4em #333; }

.map-panel .drop-area {
  /* position: relative;
  height: 450px;
  margin: 2em 2em 0; */
  /* border-top: dashed 1px rgba(255, 0, 0, 0.66);
  border-bottom: dashed 1px rgba(255, 0, 0, 0.66); */
  /* z-index:1; */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 11em;
  height: 34em;
  margin: 0em 2em 9.5em;
  /* overflow:hidden; */
  /* margin-bottom:133px; */ }

.map-zoom {
  position: absolute;
  right: 1em;
  top: 50%;
  z-index: 10;
  text-align: center;
  margin-top: -2em; }

.map-zoom > div {
  cursor: pointer;
  font-size: 2em;
  width: 1em;
  height: 1em; }

@-webkit-keyframes map-swing {
  0%, 100% {
    -webkit-transform: rotate(-5deg); }
  50% {
    -webkit-transform: rotate(5deg); } }

@keyframes map-swing {
  0%, 100% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); } }

.map-panel .drop-area .item {
  cursor: -webkit-grab;
  cursor: grab;
  position: absolute;
  bottom: 24.5em;
  background-color: #eeeeee;
  /* border: solid 1px #333; */
  border-radius: 4px;
  /* color: #fff; */
  padding: 0.5em 1em;
  min-width: 5em;
  text-align: center;
  height: 20px;
  transition: all 10s linear;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
      user-select: none;
  opacity: 1;
  -webkit-animation: none;
  animation: none;
  box-shadow: inset 0 -3px 3px #909090; }

.map-panel .drop-area .item:hover {
  background-color: #ccc; }

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0.5; } }

@keyframes flash {
  0%, 50%, 100% {
    background-color: #eee; }
  25%, 75% {
    background-color: rgba(238, 238, 238, 0.18); } }

.map-panel .drop-area .item.active {
  -webkit-animation: flash 2s linear infinite forwards;
  animation: flash 2s linear infinite forwards; }

.map-panel .drop-area .item.left {
  left: 0;
  right: auto; }

.map-panel .drop-area .item.right {
  left: auto;
  right: 0; }

.map-panel .drop-area .item.wrong {
  background-color: rgba(239, 239, 239, 0.5);
  /* border: solid 1px rgba(51, 51, 51, 0.4); */ }

.map-panel .drop-area .item.wrong > div {
  opacity: 0.5; }

.map-panel .drop-area .item.wrong span {
  font-size: 1.3em;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  line-height: 1em;
  margin-top: -0.5em;
  color: #333;
  z-index: 1; }

.map-panel .drop-area .item.animate {
  -webkit-animation: map-swing 1s ease infinite;
  -webkit-transition: all 1s ease;
  -webkit-animation: map-swing 1s ease infinite;
          animation: map-swing 1s ease infinite;
  transition: all 1s ease; }

.map-mobile-top {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 200px;
  z-index: 3;
  background: url(/images/library-book-header-mobile.jpg) left top no-repeat, url(/images/library-book-footer-mobile.jpg) left bottom no-repeat, url(/images/library-book-body-mobile.jpg) left top repeat-y;
  background-size: contain; }

.map-mobile-top .item {
  cursor: -webkit-grab;
  cursor: grab;
  position: absolute;
  top: 0;
  background-color: #eeeeee;
  border-radius: 4px;
  padding: 0.5em 1em;
  min-width: 5em;
  text-align: center;
  height: 20px;
  opacity: 1;
  -webkit-animation: none;
  animation: none;
  box-shadow: inset 0 -3px 3px #909090; }

.map-mobile-top .item.wrong > div {
  opacity: 0; }

.map-mobile-top .item,
.map-mobile-top .item.left {
  left: 4em;
  right: auto; }

.map-mobile-top .item.right {
  left: auto;
  right: 4em; }

.map-mobile-top .drop-area .item.wrong span {
  font-size: 1.3em;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  line-height: 1em;
  margin-top: -0.5em;
  color: #333;
  z-index: 1; }

.book-wrapper {
  position: relative;
  background-color: #fff;
  border: solid 1em #403f3f;
  border-bottom-width: 0;
  border-radius: 4px 4px 0 0;
  height: 100%;
  box-sizing: border-box; }

.book-wrapper .title {
  background-color: #403f3f;
  padding: 1em 0;
  color: #eee;
  text-shadow: 0 1px 1px #000;
  padding-right: 10em; }

.book-wrapper .title h1 {
  font-size: 1.5em;
  line-height: 1em;
  padding: 0 0 0.5em; }

.book-wrapper .next {
  cursor: pointer;
  position: absolute;
  bottom: 1em;
  right: 1em; }

.page-content {
  padding: 1em;
  overflow-x: hidden;
  max-height: 500px; }

.page-content p {
  margin-bottom: 1em; }

.page-content.grey-out p {
  color: #eee; }

.page-content .text-item {
  position: relative;
  font-weight: normal;
  transition: none; }

.page-content .text-item span {
  opacity: 0;
  display: inline-block;
  vertical-align: middle;
  background-color: #f00;
  border-radius: 4px;
  padding: 0 0.5em;
  position: absolute;
  top: 0.2em;
  left: -2em;
  color: #fff;
  font-size: 0.7em;
  transition: all 400ms ease; }

.page-content.grey-out p .text-item.preview {
  color: #000;
  transition: all 1s linear; }

.page-content.grey-out .text-item.preview span {
  opacity: 1; }

.preview1 {
  transition-delay: 0.1s !important; }

.preview2 {
  transition-delay: 0.2s !important; }

.preview3 {
  transition-delay: 0.3s !important; }

.preview4 {
  transition-delay: 0.4s !important; }

.preview5 {
  transition-delay: 0.50s !important; }

.preview6 {
  transition-delay: 0.60s !important; }

.preview7 {
  transition-delay: 0.70s !important; }

.preview8 {
  transition-delay: 0.80s !important; }

.preview9 {
  transition-delay: 0.90s !important; }

.preview10 {
  transition-delay: 1s !important; }

/*****************************/
/******General test card *****/
/*****************************/
.test-card {
  opacity: 0;
  width: 50em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25em;
  margin-top: -150px;
  text-align: center;
  -webkit-animation: fadeInUp 500ms ease 500ms forwards;
  animation: fadeInUp 500ms ease 500ms forwards; }

.test-card.test-lastname, .test-card.test-profession, .test-card.test-hobby {
  -webkit-animation: none;
  animation: none;
  opacity: 1; }

.test-card.test-puzzle {
  width: 35em;
  margin-left: -17.5em; }

.test-card .header {
  color: #fff;
  margin-bottom: 1em; }

.test-card h1 {
  font-size: 1.3em;
  line-height: 1.3em;
  font-weight: 300;
  padding: 0 0 0.5em; }

.test-card .header .progress {
  width: 15em;
  display: inline-block;
  vertical-align: middle;
  height: 6px;
  margin: 0 1em; }

.test-card .content {
  margin-bottom: 1em;
  border-radius: 4px; }

.test-card .body {
  color: #333;
  padding: 1em; }

.test-card .body h1 {
  padding: 1em 0 2em;
  line-height: 1.2em;
  font-weight: 300; }

.test-card .body input {
  border: none;
  border-bottom: solid 1px #333;
  padding: 0.5em;
  font-size: 1em;
  width: 80%;
  text-align: center;
  outline: none; }

.test-card .footer {
  padding: 0 1em 1em; }

.test-card .footer .button-green {
  width: 100%;
  margin: 0;
  padding: 1em 0;
  border-radius: 0; }

.test-card .text {
  cursor: pointer;
  color: #fff; }

.test-card .text a {
  text-decoration: underline; }

/****** test Sequence******/
.color-green {
  color: #7dd021; }

.test-sequence .content {
  font-size: 1.5em;
  background-color: #fff; }

/****** test Color******/
.test-color {
  margin-top: -190px; }

.test-color .brain-grid {
  height: auto;
  width: 100%;
  margin: 0; }

.test-color .brain-grid li {
  position: relative;
  top: 0;
  left: 0;
  width: 25%;
  display: inline-block;
  margin: 0 1% 3%; }

.test-color .brain-grid li .item {
  cursor: pointer; }

.test-color .brain-grid .text {
  color: #333; }

/****** test MCQ******/
.test-mcq .ans {
  position: relative;
  cursor: pointer;
  color: #333;
  background-color: #fff;
  margin: 0.5em;
  padding: 1em 1em 1em 3em;
  text-align: left; }

.test-mcq .ans:hover {
  opacity: 0.8; }

.test-mcq .ans.correct {
  color: #fff;
  background-color: #89d32b; }

.test-mcq .no {
  position: absolute;
  top: 1em;
  left: 1em; }

.test-mcq .two-col .ans {
  width: 38%;
  display: inline-block;
  vertical-align: top; }

/****** test puzzle******/
.test-puzzle .box {
  cursor: pointer;
  background-color: #fff;
  padding: 1em;
  margin: 0.3em;
  display: inline-block;
  vertical-align: top; }

.test-puzzle .box:hover {
  background-color: #eee; }

.test-puzzle .box.active {
  color: #fff;
  background-color: #90d531; }

/*********************/
/*** Time travel game
/*********************/
.time-travel {
  position: relative;
  width: 100%;
  height: 100%; }

.time-travel.play {
  background: #000; }

@-webkit-keyframes ani-travel {
  0% {
    opacity: 0; }
  100% {
    opacity: 0.5; } }

@keyframes ani-travel {
  0% {
    opacity: 0; }
  100% {
    opacity: 0.5; } }

.time-travel.play:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/images/bg-time-travel-play.jpg) center center no-repeat;
  background-size: cover;
  opacity: 0;
  -webkit-animation: ani-travel 2s linear 0s forwards;
  animation: ani-travel 2s linear 0s forwards; }

.time-travel .intro {
  background: url(/images/bg-time-travel-intro.jpg) center top no-repeat;
  background-size: cover; }

.time-count {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  margin-top: -3.5em;
  text-align: center;
  z-index: 1; }

.time-count .text {
  padding-top: 1em;
  font-size: 1.3em;
  color: #999; }

.date-holder {
  height: 1em;
  line-height: 1em;
  overflow: hidden;
  font-size: 2em;
  font-weight: 300;
  color: #fff; }

/* .date-holder.answer{
  display:none;
} */
/* .date-answer .date{
  letter-spacing: 3.5px;
  text-indent: 1em;
} */
.digit-holder {
  width: 0.4em;
  display: inline-block;
  vertical-align: top; }

@-webkit-keyframes ani-digits {
  0% {
    -webkit-transform: translateY(-10em); }
  100% {
    -webkit-transform: translateY(0em); } }

@keyframes ani-digits {
  0% {
    -webkit-transform: translateY(-10em);
    transform: translateY(-10em); }
  100% {
    -webkit-transform: translateY(0em);
    transform: translateY(0em); } }

.time-count .digit-holder.animate .digit-container {
  -webkit-animation: ani-digits 500ms linear infinite;
  animation: ani-digits 500ms linear infinite; }

.digit-container {
  -webkit-transform: translateY(-10em);
  transform: translateY(-10em); }

.time-container {
  position: relative;
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-transform: perspective(1000px);
          transform: perspective(1000px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  z-index: 1;
  font-size: 1.1em; }

.time-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30em;
  min-height: 15em;
  margin-left: -15em;
  margin-top: -9em;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  border-radius: 4px;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: all 500ms ease; }

.time-content.show {
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all 500ms ease; }

@-webkit-keyframes ani-time {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

@keyframes ani-time {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

.time-content.animate {
  -webkit-animation: ani-time 0.5s ease forwards;
  animation: ani-time 0.5s ease forwards; }

/*.time-content .header{
  padding:1em;
  border-bottom: solid 1px #898989;
  font-size: 1.2em;
  font-weight: bold;
}*/
.time-content .body {
  display: table-cell;
  vertical-align: middle;
  height: 14em;
  width: 30em;
  padding: 1em 2em;
  line-height: 1.6em; }

.time-content .body p {
  font-weight: bold; }

/*********************/
/*** Sprint Speak game
/*********************/
.sprint-speak {
  position: relative;
  width: 100%;
  height: 100%; }

.sprint-speak.play {
  background: #48607f; }

.sprint-speak .intro {
  background: url(/images/bg-sprint-speak-intro.jpg) center top no-repeat;
  background-size: cover; }

.sprint-speak.play:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 10em #000; }

.sprint-speak.play:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/images/sprint-speak-l1.png) center center no-repeat;
  background-size: 35%; }

.sprint-speak.l1:before {
  background-image: url(/images/sprint-speak-l1.png);
  background-position: bottom center; }

.sprint-speak.l2:before {
  background-image: url(/images/sprint-speak-l2.png); }

.sprint-speak.l3:before {
  background-image: url(/images/sprint-speak-l3.png); }

.sprint-speak.l4:before {
  background-image: url(/images/sprint-speak-l4.png); }

.sprint-container {
  position: relative;
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-transform: perspective(1000px);
          transform: perspective(1000px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  z-index: 1;
  font-size: 1.1em; }

.sprint-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30em;
  min-height: 15em;
  margin-left: -15em;
  margin-top: -9em;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  border-radius: 4px;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: all 500ms ease; }

.sprint-content.show {
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all 500ms ease; }

.sprint-content.animate {
  -webkit-animation: ani-time 0.5s ease forwards;
  animation: ani-time 0.5s ease forwards; }

.sprint-content .body {
  display: table-cell;
  vertical-align: middle;
  height: 14em;
  width: 30em;
  padding: 1em 2em; }

.sprint-content .body b {
  display: block;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em; }

.sprint-content .body small {
  color: #999;
  display: block;
  padding-bottom: 0.5em;
  font-size: 0.8em; }

.sprint-content .body h1.underline {
  border-bottom: solid 1px #515151;
  padding-bottom: 1em;
  margin-bottom: 0.5em;
  font-weight: bold; }

.sprint-content .body h1 {
  font-weight: normal;
  font-size: 1.2em;
  line-height: 1.5em;
  margin-bottom: 0.5em; }

/*********************/
/*** Meeting game
/*********************/
.meeting {
  position: relative;
  width: 100%;
  height: 100%; }

.meeting.play {
  background: url(/images/bg-meeting-play.jpg) center center no-repeat;
  background-size: cover; }

.meeting .intro {
  background: url(/images/bg-meeting-intro.jpg) center top no-repeat;
  background-size: cover; }

.meeting.start {
  background: #1caeff;
  color: #fff; }

.meeting-start-holder {
  max-width: 42.8em;
  margin: 0 auto;
  position: relative;
  padding: 3em 0;
  height: 35.71em; }

.meeting-start-frame {
  transition: all 500ms ease, opacity 1s ease;
  display: table-cell;
  width: 50em;
  height: 39.3em;
  vertical-align: middle;
  text-align: center; }

.meeting-start-holder .text {
  padding-bottom: 2em; }

.meeting-start-frame .text h1 {
  line-height: 1.5em; }

.meeting-start-holder .show-all {
  cursor: pointer;
  position: absolute;
  top: -3em;
  left: 0;
  width: 3em;
  height: 3em;
  background: #fff; }

.meeting-start-holder .arrow {
  background: url(/images/meeting-arrow.png) center center no-repeat;
  position: absolute;
  bottom: -3em;
  width: 100%;
  text-align: center;
  cursor: pointer;
  height: 3em;
  width: 50%;
  left: 25%; }

.meeting-start-holder .arrow:hover {
  opacity: 0.8; }

.meeting-start-holder .arrow.top {
  bottom: auto;
  top: -3em;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.meeting-start-grid {
  /* opacity:0.2; */
  /* padding-top: 3em; */
  list-style: none;
  text-align: left;
  transition: all 500ms ease, opacity 1s ease;
  text-align: center;
  margin: 1em 0; }

.meeting-start-grid li {
  display: inline-block;
  vertical-align: top;
  margin: 0 0.5em;
  /* min-height: 230px; */
  -webkit-transform: scale(0);
  -webkit-transition: all 230ms ease;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: all 230ms ease;
  margin-bottom: 1em; }

.meeting-start-holder .text,
.meeting-start-holder .button-green {
  -webkit-transform: scale(0);
  transform: scale(0); }

.meeting-start-holder .text.preview,
.meeting-start-holder .button-green.preview,
.meeting-start-grid li.preview {
  -webkit-transform: scale(1);
  -webkit-transition: all 230ms ease;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: all 230ms ease; }

.meeting-start-grid figure {
  overflow: hidden; }

.meeting-start-grid li:hover figure {
  /* background-color: rgba(255, 255, 255, 1); */ }

.meeting-start-grid figure img {
  vertical-align: middle; }

.meeting-start-grid figure > div {
  height: 8em;
  width: 8em;
  overflow: hidden;
  background-color: #000;
  line-height: 7.5em;
  border-radius: 100%;
  margin: 0 auto; }

.meeting-start-grid figcaption {
  padding: 0.5em; }

.meeting-start-grid figcaption h4 {
  font-size: 0.9em;
  font-weight: normal; }

.meeting-start-grid figcaption p {
  /* font-weight:300; */
  /* font-size: 0.8em; */ }

.meeting-start-holder .holder {
  background: url(/images/meeting-start.png) 7em center no-repeat;
  background-size: 80%;
  padding: 3em 3em;
  margin-top: -3em; }

.meeting-start-holder .slide2 .holder p {
  color: #333;
  padding: 6em;
  text-align: left; }

.meeting-start-holder .slide2 .holder p span {
  color: #FFF;
  background-color: #67ba53;
  padding: 0 0.3em; }

.chat-holder {
  position: relative;
  width: 50em;
  margin: 0 auto;
  list-style: none;
  padding: 1em 0;
  transition: all 500ms ease; }

.chat-holder li {
  opacity: 0;
  transition: all 1s ease; }

.chat-holder li.animate {
  opacity: 1; }

.chat-holder li .avatar {
  position: relative;
  float: left;
  margin-top: -1.7em;
  text-align: center;
  color: #fff;
  -webkit-transform: translateX(-55px);
  transform: translateX(-55px);
  transition: all 300ms ease; }

.chat-holder li:nth-child(even) .avatar {
  -webkit-transform: translateX(55px);
  transform: translateX(55px); }

.chat-holder li.animate .avatar {
  -webkit-transform: translateX(0px);
  transform: translateX(0px); }

.chat-holder li:nth-child(even).animate .avatar {
  -webkit-transform: translateX(0px);
  transform: translateX(0px); }

.chat-holder .name {
  font-size: 0.8em; }

.chat-holder .title {
  font-size: 0.9em;
  line-height: 1em; }

.chat-holder li:nth-child(even) .avatar {
  float: right; }

.chat-holder .img-holder {
  width: 6em;
  height: 6em;
  border-radius: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.74);
  line-height: 6em; }

.chat-holder .img-holder img {
  vertical-align: middle; }

.chat-holder .messages {
  position: relative;
  padding: 1em;
  background-color: #fff;
  margin: 1.5em 8em 0;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: all 1s ease; }

.chat-holder .messages:after {
  content: "";
  position: absolute;
  top: 1em;
  left: -14px;
  border: solid 8px transparent;
  border-right-color: #fff; }

.chat-holder .messages.lightblue {
  background-color: #7eceef; }

.chat-holder .messages.lightblue:after {
  border-right-color: #7eceef; }

.chat-holder li:nth-child(even) .messages.lightblue:after {
  border-left-color: #7eceef; }

.chat-holder li:nth-child(even) .messages:after {
  border-right-color: transparent;
  left: auto;
  right: -14px;
  border-left-color: #fff; }

.meeting-game {
  /* height:580px;
  overflow:hidden; */ }

.meeting-game .button-holder {
  background: url(/images/meeting-arrow.png) center 3em no-repeat;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  height: 5em;
  padding: 1em 0;
  cursor: pointer; }

/*** Test ******/
.meeting-game .test-card {
  margin-top: -240px; }

.meeting-test .title {
  padding-top: 1em; }

.meeting-test .title h1 {
  font-size: 1.5em;
  line-height: 1.5em;
  /*  text-shadow:0 1px 1px #000; */ }

.meeting-test .up,
.meeting-test .down {
  background: url(/images/meeting-arrow.png) center center no-repeat;
  position: absolute;
  bottom: -2em;
  left: 0;
  width: 100%;
  height: 3em;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 100; }

.meeting-test .up {
  top: 5em;
  bottom: auto;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.meeting-test .up:hover,
.meeting-test .down:hover {
  opacity: 0.5; }

.meeting-test .down {
  position: relative;
  bottom: 1em; }

.meeting-chat-holder {
  position: relative;
  width: 42.8em;
  margin: 0 auto;
  list-style: none;
  padding: 8em 0 1em;
  transition: all 500ms ease;
  height: 19em;
  z-index: 2;
  /* overflow: hidden; */ }

.meeting-chat-holder li {
  position: relative;
  opacity: 0.3; }

/* .meeting-chat-holder li:hover, */
.meeting-chat-holder li.over {
  opacity: 0.9; }

.meeting-chat-holder li.over .number {
  display: none; }

.meeting-chat-holder li.correct {
  opacity: 1; }

.meeting-chat-holder li .avatar {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0.5em;
  padding-right: 1em;
  text-align: center;
  color: #fff; }

.meeting-chat-holder li .avatar.wrong .img-holder {
  opacity: 0.5; }

.meeting-chat-holder li .avatar.wrong span {
  font-size: 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #333;
  line-height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.24); }

.meeting-chat-holder li .avatar.correct-avatar {
  left: -6em; }

.meeting-chat-holder li:nth-child(even) .avatar.correct-avatar {
  left: auto;
  right: -7em; }

.meeting-chat-holder li:nth-child(even) .avatar {
  left: auto;
  right: 0; }

.meeting-chat-holder li .time-options {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 15em; }

.meeting-chat-holder li:nth-child(even) .time-options {
  right: auto;
  left: 0; }

.meeting-chat-holder li .time-options span {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  border: solid 2px #fff;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  color: #fff;
  border-radius: 100%;
  background-color: #73ba5d;
  margin: 0.1em;
  box-shadow: inset 0 5px 0 rgba(0, 0, 0, 0.27); }

.meeting-chat-holder .img-holder {
  cursor: pointer;
  width: 4em;
  height: 4em;
  border-radius: 100%;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  position: relative;
  line-height: 3.9em;
  background-color: #fff;
  margin: 0 0.3em; }

.meeting-chat-holder .img-holder img {
  vertical-align: middle; }

.meeting-chat-holder .img-holder.wrong:after,
.meeting-chat-holder .img-holder.correct:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/images/test-correct.png") center center no-repeat;
  background-size: 2em; }

.meeting-chat-holder .img-holder.wrong:after {
  background-image: url("/images/test-wrong.png"); }

.meeting-chat-holder li:nth-child(5n) .messages {
  /* margin-bottom:5em; */ }

.meeting-chat-holder .messages {
  position: relative;
  padding: 1em;
  background-color: white;
  margin: 1em 0;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  /* opacity:0; */
  transition: all 500ms ease;
  min-height: 3em; }

.meeting-chat-holder .messages:after {
  content: "";
  position: absolute;
  top: 1.9em;
  left: -14px;
  border: solid 8px transparent;
  border-right-color: #fff; }

.meeting-chat-holder li:nth-child(even) .messages:after {
  border-right-color: transparent;
  left: auto;
  right: -14px;
  border-left-color: #fff; }

.meeting-chat-holder .messages .number {
  position: absolute;
  font-size: 2em;
  line-height: 2.5em;
  width: 4em;
  left: 50%;
  top: 0;
  text-align: center;
  margin-left: -2em; }

.meeting-chat-holder .messages p {
  display: table-cell;
  vertical-align: middle;
  height: 3em; }

.meeting-chat-holder .messages p span {
  color: #FFF;
  background-color: #67ba53;
  padding: 0 0.3em; }

.meeting-test-holder {
  background: url(/images/meeting-test-holder.png) center 95% no-repeat;
  background-size: 80%;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  /* height: 12em; */
  text-align: center;
  z-index: 3; }

.meeting-test-holder .next, .meeting-test-holder .prev {
  cursor: pointer;
  position: absolute;
  left: 5em;
  /* top: 40%; */
  bottom: 5em;
  background: url(/images/super-market-arrow.png) center -3em no-repeat;
  background-size: 3em;
  width: 3em;
  height: 3em;
  margin-top: -1.5em;
  text-indent: -9999px; }

.meeting-test-holder .next {
  left: auto;
  right: 5em;
  background-position: 0 0; }

.meeting-test-holder .prev:hover {
  background-position: 0 -9em; }

.meeting-test-holder .next:hover {
  background-position: 0 -6em; }

.meeting-test-holder .holder {
  /* width: 78%; */
  /* height: 110px; */
  height: 70%;
  margin: 0 auto;
  overflow-x: hidden;
  position: relative; }

.meeting-user {
  margin: 1em auto 3em; }

.meeting-user .img-holder {
  position: relative;
  width: 6em;
  height: 6em;
  margin: 0 0.5em;
  border-radius: 100%;
  overflow: hidden;
  border: solid 2px #000;
  display: inline-block;
  transition: all 300ms ease; }

.meeting-user .img-holder.over {
  border: solid 2px #666; }

.meeting-user .img-holder.correct {
  border: solid 2px #008118; }

.meeting-user .img-holder:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(/images/test-correct.png) center center no-repeat;
  background-size: 3em;
  width: 3em;
  height: 3em;
  margin-top: -1.5em;
  margin-left: -1.5em;
  opacity: 0;
  transition: all 300ms ease; }

.meeting-user .img-holder.wrong {
  border: solid 2px #ff0000; }

.meeting-user .img-holder.wrong:after {
  background-image: url(/images/test-wrong.png); }

.meeting-user .img-holder.wrong:after,
.meeting-user .img-holder.correct:after {
  opacity: 1; }

.meeting-test-holder .group-answer {
  position: fixed;
  bottom: 5em;
  width: 80%;
  left: 10%; }

.meeting-test-holder .answer {
  cursor: -webkit-grab;
  cursor: grab;
  width: 22%;
  height: 7.57em;
  display: inline-block;
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 0.5em 1em;
  margin: 0.5em;
  border-radius: 4px;
  box-sizing: border-box;
  transition: all 430ms ease;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: 0.9em;
  line-height: 1.3em; }

.meeting-test-holder .answer.wrong {
  background-color: rgba(255, 255, 255, 0.5); }

.meeting-test-holder .answer.wrong p {
  opacity: 0.5; }

.meeting-test-holder .answer.wrong span {
  font-size: 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em; }

.meeting-test-holder .answer.moving {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.5; }

/*********************/
/*** brain storm game
/*********************/
.brain-storm {
  position: relative;
  background: url(/images/bg-day.jpg) center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  text-align: center; }

.brain-storm.play {
  background: url(/images/bg-brain-storm-play.jpg) center center no-repeat;
  background-size: cover; }

.brain-storm .intro {
  background: url(/images/bg-brain-storm-intro.jpg) center top no-repeat;
  background-size: cover; }

.brain-storm-game {
  background: url(/images/bg-brain-storm-play-bottom.jpg) center bottom no-repeat;
  background-size: 80%;
  height: 100%; }

.brain-storm .title {
  color: #fff;
  padding: 2em 1em 1em;
  position: relative;
  z-index: 100; }

.brain-storm .title h1 {
  font-size: 1.5em;
  line-height: 1.5em;
  text-shadow: 0 1px 1px #000; }

.time-travel .radial-timer .number,
.brain-storm .radial-timer .number {
  color: #fff; }

.brain-holder {
  max-width: 100%;
  margin: 0em auto;
  position: relative;
  padding: 3em;
  height: 500px; }

.brain-frame {
  transition: all 500ms ease, opacity 1s ease; }

.brain-holder .arrow {
  background: url(/images/meeting-arrow.png) center center no-repeat;
  position: absolute;
  bottom: -3em;
  width: 100%;
  text-align: center;
  cursor: pointer;
  height: 3em;
  width: 50%;
  left: 25%; }

.brain-holder .arrow:hover {
  opacity: 0.8; }

.brain-holder .arrow.top {
  bottom: auto;
  top: 1em;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.brain-grid {
  opacity: 0.2;
  margin-top: 1em;
  margin-bottom: 7em;
  list-style: none;
  text-align: center;
  transition: all 500ms ease, opacity 1s ease;
  height: 34.3em;
  position: relative; }

.brain-grid li {
  /* display: inline-block; */
  /* vertical-align:top; */
  margin: 0.5em 0.5%;
  width: 15%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -96px;
  margin-top: -60px;
  /* box-shadow: 0 2px 5px #666; */
  transition: all 800ms cubic-bezier(0.77, 0, 0, 1);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.brain-grid .item {
  position: relative;
  background-color: #ffeda3;
  height: 7em;
  padding: 1em;
  text-align: left;
  box-shadow: 0 2px 5px #666; }

.brain-grid .item .text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  font-weight: bold;
  margin-top: -1em;
  text-align: center; }

.brain-grid .item .text span {
  padding-right: 0.5em; }

.brain-grid .item.color-1 {
  background-color: #ffee9e; }

.brain-grid .item.color-2 {
  background-color: #80d643; }

.brain-grid .item.color-3 {
  background-color: #4be9f4; }

.brain-grid .item.color-4 {
  background-color: #25e8ae; }

.brain-grid .item.color-5 {
  background-color: #f574db; }

.brain-grid .item.color-6 {
  background-color: #fdb032; }

.brain-grid .item:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1.5em;
  margin-top: -0.5em;
  width: 3em;
  height: 1em;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 2px #666; }

.brain-storm.play .button-holder {
  /* padding:1em; */
  position: absolute;
  bottom: 0;
  right: 1em;
  z-index: 100; }

/*********************/
/*** Name and faces game
/*********************/
.name-face {
  width: 100%;
  height: 100%;
  text-align: center; }

.name-face.play {
  background: url(/images/bg-name-face-play.jpg) center center no-repeat;
  background-size: cover; }

.name-face .intro {
  background: url(/images/bg-name-face-intro.jpg) center top no-repeat;
  background-size: cover;
  text-align: left; }

.name-face .title {
  /* color:#fff; */
  padding: 2em 1em 1em;
  position: relative;
  z-index: 100; }

.name-face .title h1 {
  font-size: 1.5em;
  line-height: 1.5em;
  text-shadow: 0 1px 1px #000; }

.face-holder {
  max-width: 50em;
  margin: 0 auto;
  position: relative;
  padding: 5em 0;
  height: 36em; }

.face-frame {
  transition: all 500ms ease, opacity 1s ease;
  display: table-cell;
  width: 50em;
  height: 40em;
  vertical-align: middle; }

.face-holder .show-all {
  cursor: pointer;
  position: absolute;
  top: -3em;
  left: 0;
  width: 3em;
  height: 3em;
  background: #fff; }

.face-holder .arrow {
  background: url(/images/meeting-arrow.png) center center no-repeat;
  position: absolute;
  bottom: -3em;
  width: 100%;
  text-align: center;
  cursor: pointer;
  height: 3em;
  width: 50%;
  left: 25%; }

.face-holder .arrow:hover {
  opacity: 0.8; }

.face-holder .arrow.top {
  bottom: auto;
  top: -3em;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.face-grid {
  /* opacity:0.2; */
  /* padding-top: 3em; */
  padding-bottom: 6em;
  list-style: none;
  text-align: left;
  transition: all 500ms ease, opacity 1s ease;
  text-align: center; }

.face-grid li {
  display: inline-block;
  vertical-align: top;
  margin: 0.5%;
  width: 23.5%;
  position: relative;
  /* min-height: 230px; */
  -webkit-transform: scale(0);
  -webkit-transition: all 230ms ease;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: all 230ms ease; }

.face-grid li.preview {
  -webkit-transform: scale(1);
  -webkit-transition: all 230ms ease;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: all 230ms ease; }

.face-grid figure {
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden; }

.face-grid li:hover figure {
  /* background-color: rgba(255, 255, 255, 1); */ }

.face-grid figure img {
  vertical-align: middle; }

.face-grid figure > div {
  height: 11.5em;
  overflow: hidden;
  background-color: #000;
  line-height: 11em; }

.face-grid figcaption {
  padding: 0.5em; }

.face-grid figcaption h4 {
  font-size: 0.9em;
  font-weight: normal; }

.face-grid figcaption p {
  font-weight: 300;
  font-size: 0.8em; }

/************test ***********/
.name-face .test-card {
  margin-top: -14.3em; }

.name-face-test {
  padding: 1em;
  font-size: 0.8em;
  background-color: #fff;
  border-radius: 4px; }

.user-face {
  position: relative;
  z-index: 101;
  width: 10em;
  /* height: 10em; */
  margin: 0 auto 1em;
  border: solid 3px #fff;
  border-radius: 4px;
  background-color: #fff;
  color: #333; }

.user-face .img-holder {
  width: 10em;
  height: 10em;
  overflow: hidden;
  background-color: #fff;
  line-height: 10em; }

.user-face .img-holder img {
  vertical-align: middle; }

/*********************/
/*** Bank Vault game
/*********************/
.bank-vault {
  width: 100%;
  height: 100%; }

.bank-vault.play {
  background: url(/images/bg-bank-vault-play.jpg) center center no-repeat;
  background-size: cover; }

.bank-vault .intro {
  background: url(/images/bg-bank-vault-intro.jpg) center top no-repeat;
  background-size: cover; }

.card.intro:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%); }

.vault-holder {
  width: 39.2em;
  height: 39.2em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -19.6em;
  margin-left: -19.6em;
  font-size: 0.85em; }

.vault-holder:after {
  content: "";
  position: absolute;
  left: -7%;
  top: -5%;
  background: url(/images/bank-vault-big-outer.png) center center no-repeat;
  background-size: 42.8em;
  width: 110%;
  height: 110%; }

.vault-holder:before {
  content: "";
  position: absolute;
  left: -50%;
  top: -50%;
  background: url(/images/bank-vault-big-outer-shadow.png) center center no-repeat;
  background-size: 100%;
  width: 200%;
  height: 200%; }

.vault {
  position: absolute;
  right: 0em;
  top: 0em;
  background: url(/images/bank-vault-big.png) center center no-repeat;
  background-size: 39.2em;
  width: 100%;
  height: 100%;
  z-index: 1; }

.vault .arrow {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: all 500ms ease-out;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg); }

.vault .arrow:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2.5em;
  border: solid 10px transparent;
  border-top-color: #f00;
  margin-left: -10px;
  z-index: 3; }

.hide-arrow .arrow:after {
  display: none; }

.vault.small .arrow.done:after,
.vault .arrow.done:after {
  border-top-color: #33ff00; }

.vault.small {
  position: absolute;
  left: 50%;
  top: 50%;
  background: url(/images/bank-vault-small.png) center center no-repeat;
  background-size: 39.2em;
  width: 21.9em;
  height: 21.9em;
  margin-top: -10.9em;
  margin-left: -10.9em;
  z-index: 4; }

.vault.small .arrow:after {
  top: 1.1em;
  z-index: 5;
  border: solid 10px transparent;
  border-top-color: #f00;
  margin-left: -10px; }

.vault.tiny {
  position: absolute;
  left: 0;
  top: 0;
  background: url(/images/bank-vault-tiny.png) center center no-repeat;
  background-size: 39.2em;
  width: 100%;
  height: 100%;
  /* margin-top: -5em; */
  /* margin-left: -5em; */
  z-index: 5;
  overflow: hidden; }

.vault.tiny .j-holder {
  color: #fff;
  padding: 4.5em 0 0;
  display: block;
  text-align: center;
  width: 8em;
  height: 5.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4em;
  margin-top: -5em; }

.vault.tiny .j-holder:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2.5em;
  /*
  margin-left: -5px;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  background-color: #f00;
  box-shadow: 0 0 2px #000; */
  border: solid 10px transparent;
  border-top-color: #f00;
  margin-left: -10px; }

.vault.tiny.done .j-holder:after {
  border-top-color: #33ff00;
  /* background-color:#33ff00; */ }

.jSlots-wrapper {
  overflow: hidden;
  font-size: 26px;
  height: 20px;
  display: inline-block;
  vertical-align: top;
  margin: 0 -2px; }

.slot {
  float: left;
  list-style: none; }

.slot li {
  padding: 0 0; }

.vault-input-holder {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  width: 50em;
  margin-left: -25em;
  margin-top: -11.57em;
  text-align: center;
  opacity: 0;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards; }

.vault-input-holder table {
  width: 300px;
  margin: auto;
  background: #bfbfbf;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, #bfbfbf 0%, #e9e9e9 100%);
  /* W3C */
  /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfbfbf', endColorstr='#e9e9e9',GradientType=0 ); IE6-9 */
  border-collapse: collapse; }

.vault-input-holder table td {
  padding: 1em 0;
  border: solid 1px rgba(255, 255, 255, 0.4);
  vertical-align: middle; }

.vault-input-holder table th {
  position: relative;
  height: 40px;
  /* font-family:"digital", arial; */
  background: #000;
  border-color: #000;
  padding: 0.6em;
  vertical-align: middle; }

.vault-input-holder table th.digital span {
  font-size: 23px;
  text-align: left;
  line-height: 2em;
  display: block;
  word-break: break-all;
  min-height: 45px;
  max-height: 132px;
  overflow-x: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #000;
  width: 280px;
  padding: 0.3em 10px;
  padding-right: 10px;
  z-index: 1; }

.vault-input-holder table th.digital span.num-hint {
  opacity: 0.3; }

.vault-input-holder table th.digital span.long-digits {
  /* overflow-y: scroll;
  width: 190px;
  padding: 0.3em 10px;
  padding-right: 100px; */ }

/*hack for chrome and mac safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .vault-input-holder table th.digital span.long-digits,
  .vault-input-holder table th.digital span {
    /* width: 180px;
  padding-right: 110px; */ } }

.vault-input-holder table th.digital span::-webkit-scrollbar {
  width: 6px;
  /* for vertical scrollbars */
  height: 6px;
  /* for horizontal scrollbars */ }

.vault-input-holder table th.digital span::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0); }

.vault-input-holder table th.digital span::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.33); }

.vault-input-holder table th.digital span a {
  position: relative;
  display: inline-block;
  width: 13px; }

.vault-input-holder table th.digital span a:nth-child(6n) {
  margin-right: 0.3em; }

.time-test .vault-input-holder table th.digital span a:nth-child(6n) {
  margin-right: 0; }

.time-test .vault-input-holder table th.digital span a.margin-year,
.time-test .vault-input-holder table th.digital span a.margin-date {
  margin-right: 0.5em; }

.time-test .vault-input-holder table th.digital span a.margin-year:after,
.time-test .vault-input-holder table th.digital span a.margin-date:after {
  content: ".";
  position: absolute;
  top: 0;
  right: -0.5em;
  width: 0.5em;
  text-align: center; }

.time-test .vault-input-holder table th.digital span a.margin-year:after {
  content: "-"; }

@-webkit-keyframes ani-digit {
  0% {
    background-color: rgba(137, 211, 43, 0.27); }
  100% {
    background-color: #89D32B; } }

@keyframes ani-digit {
  0% {
    background-color: rgba(137, 211, 43, 0.27); }
  100% {
    background-color: #89D32B; } }

.vault-input-holder table th.digital span a.active {
  background-color: #89D32B;
  -webkit-animation: ani-digit 0.5s linear infinite;
  animation: ani-digit 0.5s linear infinite; }

.vault-input-holder table th .feedback {
  background: url(/images/bank-vault-input-feedback.png) 0 0 no-repeat;
  background-size: 1.5em;
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  text-indent: -9999px;
  vertical-align: top;
  margin: -4px;
  z-index: 2;
  position: relative; }

.vault-input-holder.correct table th .feedback {
  background-position: 0 -3em; }

.vault-input-holder.wrong table th .feedback {
  background-position: 0 -1.5em; }

.vault-input-holder.correct .digital {
  color: #89d32b; }

.vault-input-holder.wrong .digital {
  color: #f00; }

.vault-input-holder table tr.number td {
  font-size: 1.8em;
  padding: 0.5em 0;
  cursor: pointer;
  width: 33.33%;
  font-weight: 300; }

.vault-input-holder table tr.number td:active {
  background: #89d32b; }

.vault-input-holder table tr.number td.dark {
  background: #c1bfbf;
  position: relative;
  cursor: default; }

.vault-input-holder table tr.number td.dark .arrow {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  /*  min-height:46px; */
  background: url(/images/test-input-arrow.png) center center no-repeat;
  background-size: 0.6em; }

.vault-input-holder table tr.number td.dark .arrow:active {
  background-color: #666; }

.vault-input-holder table tr.number td.dark .arrow.right {
  border-left: solid 1px rgba(255, 255, 255, 0.4);
  background-image: url(/images/test-input-arrow-right.png);
  left: auto;
  right: 0; }

.vault-input-holder table tr.number td.del {
  cursor: pointer;
  background: url(/images/test-input-del.png) center center no-repeat;
  background-size: 0.6em;
  text-indent: -9999px; }

.vault-input-holder table tr.number td.del:active {
  background-color: #666; }

.vault-input-holder table tr.button {
  cursor: pointer;
  background: #89d32b; }

.vault-input-holder table tr.button td {
  border: #89d32b; }

.vault-input-holder table tr.button:active {
  background-color: #63B100; }

.vault-input-holder .text {
  cursor: pointer;
  font-size: 0.9em;
  margin: 1em; }

.vault-input-holder .text a {
  font-weight: bold;
  text-decoration: underline; }

.game-over .vault-result {
  display: table;
  margin: 0 auto; }

.game-over .vault-result .vertical {
  display: table-cell;
  vertical-align: middle;
  height: 100px; }

.game-over .vault-result span {
  display: block;
  line-height: 0.4em;
  /* word-spacing: 2px; */ }

.game-over .vault-result span a {
  text-decoration: none;
  margin: 0 0.1em;
  cursor: default;
  font-size: 1.3em; }

.game-over .vault-result span a:nth-child(6n) {
  text-decoration: none;
  margin-right: 1em; }

.game-over .vault-result span a:nth-child(12n) {
  margin-right: 0; }

.game-over .vault-result span a.wrong {
  color: #f00; }

/*********************/
/*** Gym mode for games
/*********************/
.pushup-progress {
  position: relative; }

.pushup-progress .value {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(../images/gym-pushup.png) center top no-repeat;
  background-size: 6em;
  margin-top: 3em;
  padding-top: 3em; }

.gym-market {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32em;
  margin-top: -15em;
  margin-left: -20em;
  background-color: #fff;
  text-align: center;
  padding: 4em;
  border-radius: 4px; }

.gym-market .header h1 {
  padding-bottom: 0.3em; }

.gym-market .header p {
  color: #999; }

.gym-market .body {
  margin: 1em 0; }

.gym-market .body .box {
  display: inline-block;
  vertical-align: top; }

.gym-market .body .img-holder {
  width: 10em; }

.gym-market .footer {
  position: relative;
  text-align: left;
  margin: 3em 0 0; }

.gym-market .footer .setting {
  cursor: pointer;
  position: absolute;
  top: -0.3em;
  right: 0;
  width: 2em;
  height: 2em;
  background: url(../images/icon-setting.png) center center no-repeat;
  background-size: 1em; }

.gym-market .footer .setting:hover {
  opacity: 0.8; }

.gym-market .header,
.gym-market .body,
.gym-market .footer {
  opacity: 0; }

.gym-market .preview {
  opacity: 1 !important; }

/*********************/
/*** Game over
/*********************/
@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.game-over {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -16em;
  margin-left: -14.3em;
  width: 28.6em;
  min-height: 30em;
  color: #fff;
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0); }

.game-over.animate {
  -webkit-animation: bounceInDown 1s 300ms ease forwards;
  animation: bounceInDown 1s 300ms ease forwards; }

.game-over h1 {
  font-size: 2em;
  font-weight: 300;
  line-height: 1.5em; }

#resultpanelsinglesys h1 {
  font-size: 1.3em;
  padding: 2em 2em 1em; }

.game-divider {
  margin: 2em 1em; }

.game-over .game-divider a {
  padding: 0.5em 0;
  display: inline-block;
  text-decoration: underline;
  font-size: 1.1em; }

.game-over .game-divider a:hover {
  opacity: 0.8; }

.outer-box {
  margin: 1em 0; }

.inner-box {
  display: inline-block;
  padding: 0em 0.5em;
  border-right: solid 1px rgba(255, 255, 255, 0.3); }

.inner-box:last-child {
  border-right: none; }

.inner-box > small {
  color: #93c60b;
  font-size: 1em; }

.inner-box > p {
  font-size: 2em;
  line-height: 1.2em;
  font-weight: 300; }

.inner-box > p img {
  width: 1em;
  vertical-align: middle; }

.outer-box .box {
  display: inline-block;
  width: 32%;
  height: 50px;
  background-color: #fff; }

.game-over .img-holder {
  width: 8em;
  height: 8em;
  margin: auto;
  border-radius: 100%;
  overflow: hidden; }

.game-over .gameover-btn-learn {
  margin: 1.5em 0 0; }

.game-over .gameover-btn-play,
.game-over .gameover-btn-restart {
  border: none;
  background: url(../images/icon-btn-restart.png) left center no-repeat;
  background-size: 1em;
  padding-left: 2em;
  margin: 0; }

.game-over .gameover-btn-play {
  color: #fff;
  background-image: url(../images/icon-btn-play.png);
  background-size: 1.7em;
  padding-left: 2.5em;
  margin-left: 1em; }

/*********************/
/*** Stage cleared
/*********************/
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.tada {
  -webkit-animation: tada 1s ease forwards;
  animation: tada 1s ease forwards; }

.game-over.stage-clear {
  width: 700px;
  margin-left: -350px;
  -webkit-animation: none;
  animation: none;
  text-align: center;
  opacity: 1;
  -webkit-transform: none;
  transform: none; }

@-webkit-keyframes ani-stage {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes ani-stage {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.star-holder .img-holder,
.stage-clear .button-green,
.stage-clear .inner-box {
  opacity: 0; }

.stage-clear .inner-box {
  border: none;
  min-width: 6em; }

.star-holder.preview {
  -webkit-animation: ani-stage 500ms ease 0.5s forwards;
  animation: ani-stage 500ms ease 0.5s forwards; }

.star-holder .preview1 {
  -webkit-animation: ani-stage 500ms ease 1s forwards;
  animation: ani-stage 500ms ease 1s forwards; }

.star-holder .preview2 {
  -webkit-animation: ani-stage 500ms ease 1s forwards;
  animation: ani-stage 500ms ease 1s forwards; }

.stage-clear .preview3 {
  -webkit-animation: ani-stage 500ms ease 1.2s forwards;
  animation: ani-stage 500ms ease 1.2s forwards; }

.stage-clear .preview4 {
  -webkit-animation: ani-stage 500ms ease 1.5s forwards;
  animation: ani-stage 500ms ease 1.5s forwards; }

.stage-clear .preview5 {
  -webkit-animation: ani-stage 500ms ease 1.8s forwards;
  animation: ani-stage 500ms ease 1.8s forwards; }

.stage-clear .preview6 {
  -webkit-animation: ani-stage 500ms ease 2s forwards;
  animation: ani-stage 500ms ease 2s forwards; }

.stage-clear .preview8 {
  -webkit-animation: ani-stage 500ms ease 2s forwards;
  animation: ani-stage 500ms ease 2s forwards; }

.stage-clear .preview10 {
  -webkit-animation: ani-stage 500ms ease 2.2s forwards;
  animation: ani-stage 500ms ease 2.2s forwards; }

.star-holder {
  margin-top: 1em;
  border: none; }

.star-holder .stars {
  margin-top: -2.5em;
  margin-bottom: -3em;
  opacity: 0; }

.stage-clear .star {
  display: inline-block;
  vertical-align: middle;
  width: 6.57em;
  height: 6.57em;
  background: url(/images/game-over-star.png) 0 -6.57em no-repeat;
  background-size: 6.57em;
  margin: -1em -2.5em;
  -webkit-transform: scale(0.5);
  transform: scale(0.5); }

@-webkit-keyframes ani-star {
  0%, 100% {
    -webkit-transform: scale(0.5) rotate(0); }
  20% {
    -webkit-transform: scale(1) rotate(45deg); } }

@keyframes ani-star {
  0%, 100% {
    -webkit-transform: scale(0.5) rotate(0);
    transform: scale(0.5) rotate(0); }
  20% {
    -webkit-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg); } }

.stage-clear .star.done {
  background-position: 0 0;
  -webkit-animation: ani-star 300ms ease 1.2s forwards;
  animation: ani-star 300ms ease 1.2s forwards; }

.stage-clear .star.done + .star.done {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s; }

.stage-clear .star.done + .star.done + .star.done {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s; }

.inner-box.bonus {
  min-width: 250px; }

.inner-box.bonus small {
  display: block;
  padding: 0.5em 1em; }

.inner-box.bonus > p {
  font-size: 1em;
  line-height: 1.5em; }

.best-score .img-holder {
  width: 2.5em;
  height: 2.5em;
  display: inline-block;
  vertical-align: middle;
  border: none; }

.best-score p {
  display: inline-block;
  vertical-align: middle;
  padding-left: 0.5em; }

.stage-clear .game-content {
  opacity: 0; }

.stage-clear .game-content.preview {
  /* opacity:1; */ }

.stage-clear .next-game {
  position: relative;
  padding: 0 3em;
  max-width: 24em;
  margin: auto;
  -webkit-perspective: 1000;
  perspective: 10000; }

.stage-clear .next-game .arrows {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 0;
  width: 3em;
  height: 3em;
  background: url(/images/belt-arrow-prev.png) center center no-repeat;
  text-indent: -9999px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.stage-clear .next-game .arrows:hover {
  opacity: 0.8; }

.stage-clear .next-game .arrows.next {
  background-image: url(/images/belt-arrow-next.png);
  left: inherit;
  right: 0; }

.stage-clear .game-content .next-game .img-holder {
  cursor: pointer;
  width: 3em;
  display: inline-block;
  vertical-align: top;
  margin: 1em 0.5em 0;
  position: relative;
  transition: all 0.5s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: auto;
  border-radius: 0;
  overflow: inherit; }

.stage-clear .game-content .next-game .img-holder:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(../images/locked_game.png) center 0 no-repeat;
  background-size: contain;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.stage-clear .game-content .next-game .img-holder.animate {
  -webkit-animation: ani-flip 1s 2.2s forwards;
  animation: ani-flip 1s 2.2s forwards; }

.stage-clear .game-content .next-game .img-holder.animate.no-delay {
  -webkit-animation-delay: 0s;
  animation-delay: 0s; }

.stage-clear .game-content .next-game .img-holder.active:after {
  display: none; }

.stage-clear .game-content .next-game .img-holder.animate span {
  display: inline-block; }

.stage-clear .game-content .next-game .img-holder.animate span {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.stage-clear .game-content .next-game .img-holder.animate img {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.stage-clear .game-content .next-game .img-holder span {
  font-size: 0.8em; }

.stage-clear .game-content .next-game .img-holder.acitve span {
  -webkit-animation: flash 2s linear infinite forwards;
  animation: flash 2s linear infinite forwards; }

/*********************/
/*** Boarding process
/*********************/
.board {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50em;
  margin-left: -25em;
  margin-top: -18em;
  opacity: 0;
  background-color: #2f302c;
  border-radius: 2px;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards;
  overflow: hidden;
  max-height: 36em; }

.board .col-left,
.board .col-right {
  display: inline-block;
  vertical-align: top;
  margin-right: -4px; }

.board .col-left {
  width: 30%;
  color: #fff; }

.board .col-right {
  width: 70%;
  background-color: #f1f5f8;
  text-align: center; }

.board .col-left .text {
  position: relative;
  padding: 1.5em;
  min-height: 32em;
  color: rgba(255, 255, 255, 0.8); }

.board .col-left .text p {
  margin-top: 0.5em;
  font-size: 0.9em; }

.board .col-left .bottom-text {
  position: absolute;
  bottom: 0;
  left: 0;
  /* width:100%; */
  padding: 1.5em;
  font-size: 0.9em; }

.board .col-right .content {
  padding: 2em 3em;
  min-height: 32em;
  position: relative; }

.board .col-right h1 {
  line-height: 1.3em; }

.board .col-right .img-holder {
  width: 15em;
  margin: 2em auto; }

.board .col-right p {
  margin-bottom: 1em; }

.board .col-right .center {
  position: absolute;
  bottom: 1em;
  width: 100%;
  left: 0; }

.board .slide-2 {
  visibility: hidden;
  opacity: 0; }

.board .slide-2 .img-holder {
  max-width: 15em;
  position: relative; }

.board .slide-2 .img-holder span {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 50%;
  margin-top: -1em; }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }

@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }

.fadeOut {
  -webkit-animation: fadeOut 500ms ease forwards;
  animation: fadeOut 500ms ease forwards; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }

.fadeIn {
  -webkit-animation: fadeIn 500ms ease forwards;
  animation: fadeIn 500ms ease forwards; }

/*********************/
/*** Payment
/*********************/
.payment .icon .img-holder {
  width: 3em;
  height: 3em;
  overflow: hidden;
  border-radius: 4px;
  background-color: #F1F5F8;
  line-height: 3em;
  float: left;
  margin-right: 0.5em; }

.payment .img-holder img {
  vertical-align: middle; }

.payment .icon small {
  font-size: 0.8em;
  opacity: 0.5; }

.payment .col-left {
  width: 40%; }

.payment .col-right {
  width: 60%;
  background-color: #fff; }

.payment .col-left .desc {
  padding: 1em 0;
  opacity: 0.5; }

.payment .col-left ul {
  list-style: none; }

.payment .col-left li {
  font-size: 0.9em;
  border-bottom: solid 1px #666;
  padding: 0.5em 0 0.5em 1.2em;
  background: url(/images/payment-tick.png) left center no-repeat;
  background-size: 0.8em; }

.payment .col-left .bottom-text {
  opacity: 0.5; }

.payment .col-right .center {
  /* padding:1em; */ }

.payment .page {
  padding: 1em 0; }

.payment .page .dot {
  cursor: pointer;
  display: inline-block;
  background-color: #ccc;
  border-radius: 100%;
  text-indent: -9999px;
  width: 0.6em;
  height: 0.6em;
  margin: 0 0.1em; }

.payment .page .dot.active {
  background-color: #93C60B; }

.payment .col-right .button-green {
  display: block;
  box-sizing: border-box;
  margin: 0 1em; }

.payment .col-right .content {
  padding: 2em 0; }

.payment .col-right h2 {
  font-weight: bold; }

.payment .col-right h2 + p {
  padding: 0.5em 3em 0.5em; }

.payment .col-right .img-holder {
  width: 100%; }

.payment .testimonial {
  margin: 1em 3em;
  background-color: #fbfaf8;
  border: solid 1px #F6F4F0;
  padding: 1em;
  text-align: left; }

.payment .testimonial .img-holder {
  border-radius: 100%;
  width: 7em;
  height: 7em;
  float: left;
  margin: 0;
  overflow: hidden;
  margin-right: 1em; }

.payment .testimonial i {
  font-size: 0.75em; }

/*********************/
/*** Board pop up
/*********************/
.board-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  margin-left: -250px;
  margin-top: -253px;
  opacity: 0;
  border-radius: 2px;
  -webkit-animation: fadeInUp 1s ease forwards;
  animation: fadeInUp 1s ease forwards;
  overflow: hidden;
  max-height: 500px;
  background-color: #fff;
  text-align: center; }

.board-pop .content {
  padding: 2em; }

.board-pop .img-holder {
  width: 15em;
  margin: 1em auto; }

.board-pop .center {
  margin-top: 1em; }

/*********************/
/*** Level up
/*********************/
.level-up {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30em;
  margin-top: -16em;
  margin-left: -15em;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0);
  border-radius: 4px;
  overflow: hidden;
  z-index: 100; }

.level-up.animate {
  -webkit-animation: bounceInDown 1s 0s ease forwards;
  animation: bounceInDown 1s 0s ease forwards; }

.level-up .close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 40px;
  height: 40px;
  background: url(/images/icon-close-round.png) right center no-repeat;
  background-size: 20px;
  text-indent: -9999px;
  cursor: pointer; }

.level-up .close:hover {
  opacity: 0.8; }

.level-up-holder {
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }

.level-up-top {
  background: url(/images/level-up-bg.png) center center repeat-x;
  background-color: #202020;
  padding: 1.5em 3em;
  color: #fff; }

.level-up-top .img-holder {
  width: 8em;
  margin: 1em auto; }

.level-up-top > p {
  padding-top: 0.5em;
  color: #999;
  font-size: 1em;
  line-height: 1.5em; }

.level-up-holder .text {
  padding: 1em; }

.level-up-holder .text .button-green {
  margin: 0;
  min-width: 10.5em; }

.level-up-holder .footer {
  position: relative;
  border-top: solid 1px #ccc;
  padding: 1em 2em;
  text-align: left;
  -webkit-perspective: 1000;
  perspective: 1000; }

.level-up-holder .footer .img-holder.animate {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); }

.level-up-holder .footer .img-holder {
  position: absolute;
  top: 1em;
  right: 2em;
  width: 3em;
  -webkit-transition: all 0.5s ease;
  -webkit-transform-style: preserve-3d;
  transition: all 0.5s ease;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; }

.level-up-holder .footer .img-holder:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(/images/locked_game.png) center 0 no-repeat;
  background-size: contain;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.level-up-holder .footer .img-holder img {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.level-up-holder .footer p {
  padding-right: 4em;
  font-size: 0.8em;
  line-height: 1.5em;
  min-height: 3.5em; }

/*********************/
/*** Belt pop up
/*********************/
.belt-up {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30em;
  margin-top: -17em;
  margin-left: -15em;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0);
  border-radius: 4px;
  overflow: hidden; }

.belt-up.animate {
  -webkit-animation: bounceInDown 1s 0s ease forwards;
  animation: bounceInDown 1s 0s ease forwards; }

.belt-up .close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 40px;
  height: 40px;
  background: url(/images/icon-close-round.png) right center no-repeat;
  background-size: 20px;
  text-indent: -9999px;
  cursor: pointer; }

.belt-up .close:hover {
  opacity: 0.8; }

.belt-up-holder {
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg); } }

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.belt-up-holder .top {
  background: url(/images/belt-popup.jpg) center center repeat-x;
  background-color: #599e54;
  background-size: contain;
  padding: 1.5em;
  position: relative;
  overflow: hidden;
  color: #fff; }

.belt-up-holder .top:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(/images/belt-rotate.png) center center no-repeat;
  width: 42em;
  height: 42em;
  margin-top: -21em;
  margin-left: -21em;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation: rotate 35s linear infinite;
  animation: rotate 20s linear infinite; }

.belt-up-holder .top h1 {
  position: relative;
  z-index: 2;
  line-height: 1.5em; }

.belt-up-holder .icon-belt {
  -webkit-transform: scale(1.8);
          transform: scale(1.8);
  margin: 2.5em auto;
  position: relative;
  z-index: 2; }

.belt-up-holder .content .next-game {
  position: relative;
  padding: 0 3em; }

.belt-up-holder .content .next-game .arrows {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 0;
  width: 3em;
  height: 3em;
  background: url(/images/belt-arrow-prev.png) center center no-repeat;
  text-indent: -9999px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.belt-up-holder .content .next-game .arrows:hover {
  opacity: 0.8; }

.belt-up-holder .content .next-game .arrows.next {
  background-image: url(/images/belt-arrow-next.png);
  left: inherit;
  right: 0; }

.belt-up-holder .content .img-holder {
  cursor: pointer;
  width: 3em;
  display: inline-block;
  vertical-align: top;
  margin: 1em 0.5em 0;
  position: relative;
  transition: all 0.5s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.belt-up-holder .content .img-holder:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(../images/locked_game.png) center 0 no-repeat;
  background-size: contain;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

@-webkit-keyframes ani-flip {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg); }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); } }

@keyframes ani-flip {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg); }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg); } }

.belt-up-holder .content .img-holder.animate {
  -webkit-animation: ani-flip 1s 1s forwards;
  animation: ani-flip 1s 1s forwards; }

.belt-up-holder .content .img-holder.active:after {
  display: none; }

.belt-up-holder .content .img-holder.animate span,
.belt-up-holder .content .img-holder.animate img {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.belt-up-holder .content .img-holder.animate span {
  display: inline-block; }

.belt-up-holder .content .img-holder span {
  font-size: 0.8em; }

.belt-up-holder .content .img-holder.acitve span {
  -webkit-animation: flash 2s linear infinite forwards;
  animation: flash 2s linear infinite forwards; }

.belt-up-holder .content {
  background-color: #e7e7e7;
  padding: 1em; }

.belt-up-holder .text {
  padding: 1em 1em 0.8em; }

.belt-up-holder .text p {
  padding: 0 1em 1em;
  font-size: 0.8em; }

.belt-up-button {
  border-top: solid 1px #eee;
  padding-top: 0.5em;
  margin-top: 1em; }

.belt-up-holder .text .fb {
  background: url(/images/belt-fb.jpg) 0.5em center no-repeat;
  background-color: #305894;
  border-color: #305894;
  padding-left: 2em;
  margin: 0; }

.belt-up-holder .text .tw {
  background: url(/images/belt-tw.jpg) 0.5em center no-repeat;
  background-color: #00a3e0;
  border-color: #00a3e0;
  padding-left: 2.5em;
  margin: 0;
  margin-top: -0.1em;
  vertical-align: top; }

/*********************/
/*** Belt screen
/*********************/
.user-belt {
  position: relative;
  overflow: visible; }

.user-belt .item {
  display: inline-block;
  margin-right: -4px;
  vertical-align: top; }

.user-belt-holder li.user-info {
  padding: 1em 0;
  border-bottom: none;
  text-align: center; }

.user-belt .user-profile {
  width: 100%; }

.user-belt .user-profile .img-holder {
  width: 6em;
  height: 6em;
  border-radius: 100%;
  overflow: hidden;
  border: solid 2px #8adafb;
  margin: 0 auto 1em; }

.user-belt .user-profile .text small {
  color: #999;
  font-size: 0.8em; }

.user-belt .user-profile .button-green {
  position: absolute;
  right: 0;
  top: 0; }

.user-belt-holder {
  width: 70%;
  margin: 0 auto;
  padding: 8em 0 0;
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0); }

.user-belt-holder.animate {
  -webkit-animation: bounceInUp 1s 0s ease forwards;
  animation: bounceInUp 1s 0s ease forwards; }

.user-belt-holder ul {
  list-style: none; }

.user-belt-holder > ul {
  list-style: none;
  padding: 1.5em; }

.user-belt-holder li {
  position: relative;
  border-bottom: solid 1px rgba(0, 0, 0, 0.11); }

.user-belt-holder li:last-child {
  border-bottom: none; }

.belt-tabs {
  border-bottom: solid 1px #ccc;
  text-align: center; }

.belt-tabs .tab {
  display: inline-block;
  padding: 1em 1em 0.5em;
  border-bottom: solid 2px transparent;
  margin-bottom: -1px;
  cursor: pointer;
  color: #999;
  text-align: center; }

.belt-tabs .tab + .tab {
  display: none; }

.belt-tabs .tab.active {
  border-color: #00aff7;
  color: #00aff7; }

.belt-tabs .tab .icon {
  background: url(/images/belt-tab-belt.png) center 0 no-repeat;
  width: 3em;
  height: 2.5em;
  margin: auto;
  display: none; }

.belt-tabs .tab .icon.techniques {
  background-image: url(/images/belt-tab-techniques.png); }

.belt-tabs .tab.active .icon.belt,
.belt-tabs .tab.active .icon.techniques {
  background-position: center -3.6em; }

.belt-filter {
  text-align: center;
  padding: 1em; }

.current-belt {
  padding: 2em 0 1em;
  min-height: 4em;
  text-align: center; }

.close .current-belt {
  cursor: pointer; }

.current-belt .icon-belt {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  margin: 1em auto; }

.current-belt .icon-belt.lock:after {
  background-size: 1em; }

.current-belt p {
  padding-top: 0.5em;
  font-weight: bold; }

.current-belt small {
  font-size: 0.9em; }

.user-belt-holder li .point {
  height: 3em;
  line-height: 3em;
  position: absolute;
  top: 0;
  right: 0; }

.user-belt-holder .box-holder {
  text-align: center;
  padding: 1em 0 2em;
  transition: all 0.5s ease;
  min-height: 150px; }

.user-belt-holder li.close .box-holder {
  height: 0;
  overflow: hidden;
  padding: 0;
  transition: all 0.5s ease;
  min-height: 0; }

.user-belt-holder .box {
  position: relative;
  width: 23.5%;
  margin-right: 1%;
  font-size: 0.7em;
  margin-bottom: 2em;
  display: inline-block;
  vertical-align: top;
  -webkit-perspective: 1000;
  perspective: 1000; }

.user-belt-holder .box.animate {
  cursor: pointer; }

.user-belt-holder .box.active {
  cursor: pointer; }

.user-belt-holder .box.active:after {
  display: none; }

.user-belt-holder .box:last-child {
  margin-right: 0; }

.user-belt-holder .box > p {
  padding-bottom: 1em; }

.user-belt-holder .box .img-holder {
  position: relative;
  height: 10em;
  width: 10em;
  margin: 0 auto 1em;
  border-radius: 100%;
  box-shadow: 0 3px 10px #666;
  -webkit-transition: all 0.6s ease;
  -webkit-transform-style: preserve-3d;
  transition: all 0.6s ease;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; }

.user-belt-holder .box .img-holder:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(/images/locked_game.png) center center no-repeat;
  background-size: contain;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.user-belt-holder .box.active .img-holder:after {
  display: none; }

.user-belt-holder .box .img-holder img {
  border-radius: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.user-belt-holder .box.animate .img-holder {
  /* -webkit-transform: rotateY(180deg); */
  /* transform: rotateY(180deg); */
  -webkit-animation: ani-flip 1s 1s forwards;
  animation: ani-flip 1s 1s forwards; }

.user-belt-holder .box.animate .img-holder img {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); }

.user-belt-holder .box.active .img-holder {
  position: relative;
  z-index: 1; }

.user-belt-holder .box.active .img-holder p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff; }

.user-belt-holder .box .stars {
  opacity: 0;
  margin-top: -5em;
  position: relative;
  z-index: 2 !important;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.user-belt-holder .box.active .stars {
  opacity: 1; }

.user-belt-holder .box .star {
  display: inline-block;
  vertical-align: middle;
  width: 4em;
  height: 4em;
  background: url(/images/game-over-star.png) 0 -4em no-repeat;
  margin: 1.5em -0.6em -0.5em;
  background-size: 4em;
  -webkit-transform: scale(1.3);
  transform: scale(1.3); }

.user-belt-holder .box .star.done {
  background-position: 0 0; }

.user-belt-holder .box small {
  opacity: 0; }

.user-belt-holder .box.active small {
  opacity: 1; }

.icon-belt {
  background: url(/images/belt-set-180x180.png) 0 0 no-repeat;
  background-size: 60px;
  height: 60px;
  width: 60px;
  -webkit-transform: scale(0.7);
  transform: scale(0.7); }

.icon-belt.lock:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2em;
  height: 2em;
  background: url(/images/lock-big.png) center center no-repeat;
  background-size: 1.5em; }

.icon-belt.trainee {
  background: url(/images/belt0.png) 0 0 no-repeat;
  background-size: 60px; }

.icon-belt.white {
  background-position: 0 0; }

.icon-belt.yellow {
  background-position: 0 -60px; }

.icon-belt.orange {
  background-position: 0 -120px; }

.icon-belt.green {
  background-position: 0 -180px; }

.icon-belt.darkgreen {
  background-position: 0 -240px; }

.icon-belt.blue {
  background-position: 0 -300px; }

.icon-belt.darkblue {
  background-position: 0 -360px; }

.icon-belt.brown {
  background-position: 0 -420px;
  /*brown*/ }

.icon-belt.darkbrown {
  background-position: 0 -480px;
  /*purple*/ }

.icon-belt.red {
  background-position: 0 -540px;
  /*red*/ }

.icon-belt.black {
  background-position: 0 -600px;
  /*black*/ }

/*********************/
/*** Benefit
/*********************/
.articles-holder {
  width: 70%;
  margin: 3em auto;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.43);
  padding: 4em;
  padding-bottom: 3em;
  box-sizing: border-box;
  line-height: 1.5em;
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0); }

.articles-holder.animate {
  -webkit-animation: bounceInUp 1s 0s ease forwards;
  animation: bounceInUp 1s 0s ease forwards; }

.articles-holder .header {
  position: absolute;
  top: 4em;
  left: 4em; }

.articles-holder .header .button-green {
  padding: 0.5em 1em;
  min-width: inherit;
  border: none;
  text-align: left;
  color: #fff;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.6); }

.articles-container > *:first-child {
  /* margin-top: 0 !important; */ }

.articles-container h1:first-child {
  margin-top: 1.5em; }

.articles-container > *:last-child {
  margin-bottom: 0 !important; }

.articles-holder h1,
.articles-holder h2,
.articles-holder h3,
.articles-holder h4,
.articles-holder h5 {
  margin: 1em 0;
  margin-bottom: 1rem;
  line-height: 1.3em; }

.articles-holder h1 {
  font-size: 2.25em;
  border-bottom: solid 1px #ddd;
  padding-bottom: 0.3em; }

.articles-holder h2 {
  font-size: 1.75em;
  font-weight: bold;
  padding-bottom: 0.3em;
  border-bottom: solid 1px #ddd;
  margin-bottom: 0.5em; }

.articles-holder h3 {
  font-size: 1.5em; }

.articles-holder h4 {
  font-size: 1.4em; }

.articles-holder p {
  margin-bottom: 1em;
  color: #666; }

.articles-holder ol,
.articles-holder ul {
  margin: 1em 0;
  margin-left: 2em; }

.articles-holder li {
  margin-bottom: 1em; }

.articles-holder table {
  display: block;
  width: 100%;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
  border-collapse: collapse;
  border-spacing: 0; }

.articles-holder table th {
  font-weight: bold; }

.articles-holder table th, .articles table td {
  padding: 0.5em 1em;
  border: 1px solid #ddd; }

.articles-holder table tr {
  background-color: #fff;
  border-top: 1px solid #ccc; }

.articles-holder table tr:nth-child(2n) {
  background-color: #f8f8f8; }

.articles-holder pre {
  padding: 1em;
  overflow: auto;
  font-size: 85%;
  background-color: #f7f7f7;
  border-radius: 3px;
  margin-bottom: 1em; }

.articles-holder a {
  color: #4183c4; }

.articles-holder a:hover {
  text-decoration: underline; }

.articles-holder hr:before,
.articles-holder hr:after {
  content: "";
  display: table;
  clear: both; }

.articles-holder hr {
  height: 4px;
  padding: 0;
  margin: 16px 0;
  background-color: #e7e7e7;
  border: 0 none; }

.articles .button-green {
  min-width: 15em;
  margin: 0;
  margin-top: 2em; }

/*********************/
/*** Intro for all
/*********************/
.intro-panel {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1000;
  -webkit-transform: scale(0);
  -webkit-transition: all 430ms ease;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: all 430ms ease;
  visibility: hidden; }

.intro-panel.show {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: 1000;
  -webkit-transform: scale(1);
  -webkit-transition: all 430ms ease;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: all 430ms ease;
  visibility: visible; }

.card-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: url(/images/intro-close.png) center center no-repeat;
  cursor: pointer; }

.card-close:hover {
  opacity: 0.5; }

/*********************/
/*** Side menu
/*********************/
.side-menu {
  width: 265px;
  position: absolute;
  top: 0;
  left: 0; }

.menu-pic {
  width: 5em;
  height: 5em;
  border-radius: 100%;
  border: solid 2px #00aeef;
  overflow: hidden;
  padding: 2px;
  margin: 1em auto; }

.menu-pic img {
  border-radius: 100%; }

.menu-name {
  text-align: center;
  margin-bottom: 1em;
  font-size: 0.8em; }

.menu-name > b {
  font-weight: 400;
  font-size: 1.1em; }

.menu-profile li {
  cursor: pointer;
  padding: 0.5em 1em;
  line-height: 2em;
  border-top: solid 1px rgba(204, 204, 204, 0.19);
  min-height: 30px; }

.menu-profile li:hover {
  opacity: 0.8; }

/*********************/
/*** Game Content
/*********************/
/*********************/
/*** Sign in mode
/*********************/
.signinpanel input {
  border: none;
  background: transparent;
  color: #000;
  font-size: 1em;
  outline: none;
  width: 60%;
  float: right;
  line-height: 1.5em;
  border-bottom: solid 1px rgba(255, 255, 255, 0.43); }

.signinpanel input::-webkit-input-placeholder {
  color: #fff; }

.signin-email {
  position: relative;
  z-index: 10;
  text-align: left;
  background-color: #ced5db;
  margin: 30px 20px 0;
  border-radius: 4px 4px 0 0;
  color: #333;
  padding: 5px 10px;
  line-height: 2em; }

.signin-password {
  position: relative;
  z-index: 10;
  text-align: left;
  background-color: #ced5db;
  margin: 0px 20px 20px;
  border-radius: 0 0 4px 4px;
  color: #333;
  padding: 5px 10px;
  line-height: 2em; }

.signinpanel a {
  cursor: pointer;
  font-size: 0.8em;
  display: block;
  padding: 10px 0 0; }

.signinpanel a:hover {
  opacity: 0.8; }

.signinpanel input.error {
  color: #ff0000; }

.signinpanel .btn-green {
  width: 280px; }

/*********************/
/*** Sign up mode
/*********************/
.signuppanel input {
  position: relative;
  z-index: 10;
  border: solid 1px transparent;
  display: block;
  margin: 0 20px 5px;
  background-color: #fff;
  border-radius: 4px;
  width: 260px;
  padding: 6px 10px;
  font-size: 0.9em; }

.notifySubTitle {
  font-size: 0.9em;
  margin-top: -5px; }

.notifySubTitle span {
  display: inline-block;
  font-size: 0.6em;
  background-color: #88a823;
  padding: 3px 5px;
  border-radius: 4px;
  margin: 2px;
  line-height: 1em;
  vertical-align: top; }

.signupLabel {
  position: relative;
  z-index: 10;
  margin: 0 20px;
  text-align: left;
  font-size: 0.8em;
  padding-top: 10px;
  padding-bottom: 3px; }

.signuppanel .btn-green {
  position: relative;
  z-index: 10;
  margin-top: 20px;
  width: 280px;
  font-size: 0.9em; }

.signuppanel div.btn-green {
  padding-left: 0;
  padding-right: 0; }

.signuppanel a {
  cursor: pointer;
  font-size: 0.8em;
  display: block;
  padding: 10px 0 0; }

.signuppanel a:hover {
  opacity: 0.8; }

.signuppanel input.error {
  border: solid 1px #ff0000;
  color: #ff0000;
  outline: #ff0000; }

/*********************/
/*** coming soon panel
/*********************/
.comingSoon-holder {
  width: 460px; }

.comingSoon-header {
  font-size: 1.5em;
  line-height: 2em;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5); }

.comingSoon-content {
  background-color: #fff;
  color: #333;
  text-align: left;
  margin: 20px 0; }

.comingSoon-title {
  font-size: 1em;
  padding: 10px;
  line-height: 1.2em; }

.comingSoon-content ul {
  padding: 20px 20px 30px 50px; }

.goes-up {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 5em;
  right: 10em;
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(148, 198, 74, 0.8) url(../images/goes-up.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s; }

.goes-up:hover {
  opacity: 0.5; }

.goes-up.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s 0s, visibility 0s .3s; }

.goes-up:hover {
  background-color: #94c64a; }

.blur {
  -webkit-filter: blur(2px);
  filter: blur(2px);
  transition: all 0.2s ease; }

.hide {
  display: none !important; }

.show {
  display: block !important; }

.hide0 {
  display: none; }

.showOnMobile {
  display: none !important; }

.mobile-header {
  display: none; }

/*********************/
/*** Media query
/*********************/
@media (min-width: 1400px) {
  body {
    font-size: 16px; }
  .picture-wheel {
    font-size: 18px; }
  .mascot-gym {
    margin-top: 2em; }
  .game-button .button {
    background-position: 0.3em 1.3em; }
  .game-button .button.test {
    background-position: 0.3em 1.3em; }
  .game-button .button.next {
    background-position: -4.7em 1.3em; }
  .game-button .button.page {
    background-position: -9.25em 1.3em; }
  .intro .col-bottom .text {
    height: 6.4em; }
  .intro .col-bottom.learn-card .text {
    height: 7.2em; }
  .system-intro .intro {
    /* margin-top:-17em; */ }
  .system-intro .col-bottom .text {
    height: auto; }
  .meeting-test-holder .answer {
    height: 8.57em;
    font-size: 0.8em; }
  .system-journey .box-holder .item {
    font-size: 1em;
    line-height: 1.5em; }
  .map-panel .drop-area {
    /* bottom: 17em; */
    /* height:617px; */ }
  .sys-ani {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    margin: -105px -290px; } }

@media (min-width: 1440px) and (min-height: 900px) {
  .picture-wheel {
    font-size: 22px; } }

@media (max-width: 1024px) {
  .count-down .count-level .col-md-3,
  .count-down .count-level .col-md-4 {
    border: none;
    width: 49%;
    display: inline-block;
    margin-bottom: 1em; }
  .count-down .count-level .col-md-4 img,
  .count-down .count-level .col-md-4 img {
    width: 5em; } }

@media (max-width: 767px), (max-height: 500px) {
  .showOnMobile {
    display: inline-block !important; }
  .hideOnMobile {
    display: none !important; }
  /*********************/
  /*** General
  /*********************/
  body {
    font-size: 12px; }
  .bg-header.show:after, .body-belt.show:after {
    display: none; }
  .wrapper {
    overflow-y: visible; }
  .opaque {
    overflow-x: hidden; }
  .count-down {
    top: 30%; }
  .count-down .count-level {
    width: 300px;
    margin-left: -90px; }
  .game-notice {
    z-index: 101; }
  .game-button .button {
    background-position: -0.7em 1em; }
  .game-button .button.page {
    background-position: -13.2em 1em; }
  .name-face-game .game-button .button.page,
  .game-button .button.next {
    background-position: -7em 1em; }
  .game-button .button.test {
    background-position: -0.8em 1em; }
  .game-panel {
    margin: 1em 0; }
  .game-header:after {
    content: "";
    display: table;
    clear: both; }
  /********************/
  /****Mobile header
  /********************/
  .mobile-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1em;
    z-index: 100;
    border-bottom: solid 1px white;
    background-color: rgba(255, 255, 255, 0.8); }
  .mobile-header:after {
    content: '';
    clear: both;
    display: table; }
  #mainpanel .mobile-header {
    background-color: transparent;
    border-bottom: none; }
  .mobile-header .img-holder {
    float: left;
    width: 3em;
    height: 3em;
    border-radius: 100%;
    overflow: hidden; }
  .mobile-header .text {
    padding-left: 1em;
    display: table-cell;
    height: 3em;
    vertical-align: middle;
    color: #fff;
    width: 15em;
    line-height: 1.5em; }
  .mobile-header .missions {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 3em;
    text-indent: -9999px;
    background: url(/images/sidebar-missions.png) center center no-repeat;
    background-size: 1.8em; }
  .mobile-header .missions .no {
    position: absolute;
    top: 45%;
    right: 15%;
    width: 1.5em;
    height: 1.5em;
    background-color: #7bd532;
    border-radius: 100%;
    color: #fff;
    text-indent: 0;
    text-align: center;
    font-size: 0.8em;
    line-height: 1.6em;
    box-shadow: 0 0 1px #999; }
  .mobile-header .btn {
    margin: -1em;
    padding: 1em;
    font-size: 1.2em; }
  .mobile-header .btn.icon-close {
    background: url(/images/mobile-icon-close.png) center center no-repeat;
    background-size: 1em;
    text-indent: -9999px;
    width: 2em; }
  .mobile-header .btn.icon-back {
    padding-left: 3em;
    background: url(/images/mobile-icon-back.png) 1.5em center no-repeat;
    background-size: 0.5em; }
  .card {
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    border-radius: 0;
    -webkit-transform: none;
    transform: none; }
  .col-top .text {
    background-color: transparent;
    display: none; }
  .system-intro .intro {
    margin: 0; }
  .card .col-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; }
  .card .col-bottom .text {
    min-height: 10em;
    padding: 1em; }
  .game-over {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    margin: 5em 0 1em; }
  .game-over.stage-clear {
    width: 100%;
    margin: 5em 0 0; }
  .stage-clear .next-game {
    padding: 0; }
  .stage-clear .next-game .arrows {
    left: -1em; }
  .stage-clear .next-game .arrows.next {
    right: -1em; }
  .level-up {
    width: 100%;
    margin: 0;
    top: 0;
    left: 0;
    bottom: 0;
    margin-left: 0;
    margin-top: 0;
    background-color: #fff; }
  .level-up-holder {
    box-shadow: none; }
  .level-up-top {
    padding-top: 3em; }
  .level-up-holder .text .button-green {
    min-width: 9em; }
  .level-up-top > p {
    font-size: 1em; }
  .belt-up {
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    margin-left: 0;
    margin-top: 0;
    background-color: #fff; }
  .belt-up-holder {
    box-shadow: none; }
  .belt-up-holder .content {
    /* margin-bottom: 14em; */ }
  .belt-up-holder .content .img-holder {
    width: 3em; }
  .belt-up-holder .text {
    /* position:fixed; */
    bottom: 0;
    left: 0;
    right: 0; }
  .belt-up-holder .text p {
    padding: 1em;
    line-height: 1.3em; }
  .belt-up-holder .text .button-green {
    width: 80%; }
  .test-card.test-puzzle,
  .test-card {
    width: 100%;
    margin-left: -50%;
    margin-top: 1.5em;
    position: relative;
    top: 1em; }
  .test-mcq .two-col .ans {
    width: 36%; }
  .pagination {
    position: fixed;
    top: 0;
    left: 0.5em;
    right: auto; }
  .pagination .page {
    display: none; }
  .game-notice h1 {
    font-size: 1.2em;
    line-height: 1.2em;
    padding-bottom: 0.5em; }
  /******home navigation*****/
  .game-menu-holder {
    top: auto;
    bottom: 0;
    background-color: #f2f3f5;
    box-shadow: 0 3px 3px 3px #999;
    width: 100%;
    margin: 0;
    padding: 0; }
  .bg-header.show .game-menu-holder {
    background-color: #f2f3f5;
    border-radius: 0;
    opacity: 1;
    transition: none; }
  .game-menu.right,
  .game-menu.left {
    display: none; }
  .game-menu.middle {
    width: 100%;
    border-bottom: none; }
  .game-menu.middle .button-holder {
    width: 100%; }
  .game-menu.middle .button {
    color: #333;
    min-width: inherit;
    width: 25%;
    height: 4.5em;
    line-height: 1.5em;
    font-weight: bold; }
  .game-menu.middle .button.active {
    color: #fff;
    background-color: #93c60b;
    border-bottom: none; }
  /*********************/
  /*** Shopping cart
  /*********************/
  .market-container {
    width: 95%; }
  .market-wrapper .title {
    padding-right: 0; }
  .shopping-test {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top: 0;
    left: 0;
    margin-left: 0;
    margin-top: 0; }
  .test-content {
    padding: 0; }
  .shopping-drag {
    /* height: 27em; */
    /* overflow-x:hidden; */ }
  .shopping-slider {
    background-size: 90%;
    height: 15em; }
  .test-content .shopping-items {
    width: 100%;
    margin: 0;
    position: relative;
    left: 0; }
  .test-content .shopping-items li {
    margin-bottom: 1em;
    width: 4.8em;
    height: 6em; }
  /*********************/
  /*** Vault
  /*********************/
  .vault-holder {
    -webkit-transform: scale(0.7) translate3d(0, 0, 0);
    transform: scale(0.7) translate3d(0, 0, 0); }
  .vault .arrow:after {
    top: 2.5em;
    border-width: 14px;
    margin-left: -14px; }
  .vault.small .arrow:after {
    top: 1.2em;
    border-width: 14px;
    margin-left: -14px; }
  .vault.tiny .j-holder:after {
    top: 25px;
    border-width: 14px;
    margin-left: -14px; }
  /*********************/
  /*** Brain storm
  /*********************/
  .brain-holder {
    padding: 3em 0; }
  /*********************/
  /*** Name and face
  /*********************/
  .face-holder {
    height: 370px; }
  .face-frame {
    height: 480px; }
  /*********************/
  /*** Curriculum
  /*********************/
  .brain-grid li {
    /* width:80px; */ }
  .map-container.show {
    background-size: contain; }
  .map-zoom {
    position: absolute;
    z-index: 10;
    text-align: center;
    bottom: 1em;
    /* left: 50%;
    margin-left: -3em; */
    top: auto;
    right: 0; }
  .map-zoom > div {
    cursor: pointer;
    font-size: 2em;
    height: 1em;
    display: inline-block;
    vertical-align: top;
    width: 1.5em; }
  .game-lives {
    padding-left: 0.5em; }
  /*********************/
  /*** Meeting
  /*********************/
  .chat-holder {
    width: 100%; }
  .meeting-chat-holder {
    width: 85%;
    height: 75%;
    padding: 0 1em;
    margin: 5.5em auto 0;
    overflow-x: hidden; }
  .meeting-chat-holder li:nth-child(n) {
    right: -3em; }
  .meeting-chat-holder li:nth-child(2n) {
    left: -3em; }
  .meeting-test .up {
    top: 5em; }
  .meeting-chat-holder .messages {
    /* min-height: 5em; */ }
  .meeting-chat-holder .messages p {
    /* height: 5em; */
    line-height: 1.2em;
    text-align: left; }
  .meeting-chat-holder .messages .number {
    /* line-height:3.5em; */ }
  .meeting-chat-holder .img-holder {
    width: 3em;
    height: 3em;
    line-height: 2.9em; }
  .meeting-test-holder {
    position: fixed;
    bottom: 0;
    /* height: 9em; */
    background-position: center bottom;
    background-size: 100%; }
  .meeting-test-holder .holder {
    width: 100%;
    /* height: 95px; */
    margin: auto;
    overflow: hidden;
    position: relative; }
  .meeting-test-holder .answer {
    width: 90%;
    margin: 0;
    height: auto;
    min-height: 4em; }
  .meeting-test-holder .group-answer {
    bottom: 0; }
  .meeting-test-holder .next, .meeting-test-holder .prev {
    left: 0.1em;
    -webkit-transform: scale(0.7);
    transform: scale(0.7); }
  .meeting-test-holder .next {
    left: auto;
    right: 0.1em; }
  .meeting-start-holder {
    padding: 0; }
  .meeting-start-grid figure > div {
    height: 6em;
    width: 6em;
    line-height: 6em; }
  .meeting-game {
    height: 480px; }
  .meeting-start-frame {
    height: 480px;
    padding-top: 2.5em; }
  .meeting-start-frame .text h1 {
    font-size: 1.2em; }
  .chat-holder li {
    padding: 0 1em; }
  .chat-holder .img-holder {
    width: 4em;
    height: 4em;
    line-height: 4em;
    margin-top: 1.4em; }
  .chat-holder .messages {
    margin: 1.5em 6em 0; }
  .chat-holder li:nth-child(odd) .messages {
    margin-right: 0; }
  .chat-holder li:nth-child(even) .messages {
    margin-left: 0; }
  /*********************/
  /*** intro
  /*********************/
  .card,
  .intro .col-bottom.learn-card .text,
  .intro .col-bottom .text {
    height: auto;
    font-size: 1.1em; }
  .intro .col-bottom .text .right,
  .intro .col-bottom .text .left {
    width: 65%; }
  .intro .col-bottom .text .right {
    width: 35%; }
  .col-top {
    min-height: 13em; }
  .system-intro .col-top {
    min-height: 0; }
  .system-intro .intro-footer {
    padding: 1em;
    padding-top: 0; }
  .system-intro .intro-footer .button-green {
    width: 80%; }
  .s-doublesys .button-green.transparent {
    width: 35%; }
  .sub-level .button-holder .title {
    margin-bottom: -2.4em; }
  .sub-level .button-holder .time {
    line-height: 1em;
    display: block;
    padding: 1em; }
  .sub-level .button-holder .star {
    width: 2.5em;
    height: 2.5em;
    background: url(/images/game-over-star.png) 0 -2.5em no-repeat;
    margin: 3em -0.4em -0.5em;
    background-size: 2.5em; }
  .intro-footer {
    padding: 2em 1em; }
  .intro-level .button-holder {
    font-size: 0.7em; }
  .footer-learn-btn > img {
    width: 2.5em; }
  /*********************/
  /*** Belt
  /*********************/
  .user-belt-holder {
    width: 100%;
    /* padding-top: 6em; */
    /* padding-bottom: 4em; */
    padding: 0; }
  .user-belt-holder > ul {
    padding-bottom: 5em; }
  .user-belt-holder li.user-info {
    padding-top: 5em; }
  .user-belt-holder .box .img-holder {
    /* height:90px; */ }
  /*********************/
  /*** Home
  /*********************/
  .picture-wheel {
    font-size: 10px;
    width: 305px;
    height: 305px;
    margin-left: -152.5px;
    margin-top: -152px; }
  .cover-wheel.game.night {
    width: 10em;
    height: 10em;
    margin-left: -5em;
    margin-top: -5em; }
  .picture-wheel .inner-wheel .slice {
    width: 6em;
    height: 6em;
    margin-left: -3em;
    margin-top: -3em;
    background-size: cover; }
  .picture-wheel .inner-wheel .slice:nth-child(1) {
    -webkit-transform: translate(0, -14em);
    transform: translate(0, -14em);
    transition-delay: 0s; }
  .picture-wheel .inner-wheel .slice:nth-child(2) {
    -webkit-transform: translate(4.5em, -7.5em);
    transform: translate(4.5em, -7.5em);
    transition-delay: 0.1s; }
  .picture-wheel .inner-wheel .slice:nth-child(3) {
    -webkit-transform: translate(10.5em, -14em);
    transform: translate(10.5em, -14em);
    transition-delay: 0.2s; }
  .picture-wheel .inner-wheel .slice:nth-child(4) {
    -webkit-transform: translate(9em, 0);
    transform: translate(9em, 0);
    transition-delay: 0.3s; }
  .picture-wheel .inner-wheel .slice:nth-child(5) {
    -webkit-transform: translate(10.5em, 14em);
    transform: translate(10.5em, 14em);
    transition-delay: 0.4s; }
  .picture-wheel .inner-wheel .slice:nth-child(6) {
    -webkit-transform: translate(4.5em, 7.5em);
    transform: translate(4.5em, 7.5em);
    transition-delay: 0.5s; }
  .picture-wheel .inner-wheel .slice:nth-child(7) {
    -webkit-transform: translate(0, 14em);
    transform: translate(0, 14em);
    transition-delay: 0.6s; }
  .picture-wheel .inner-wheel .slice:nth-child(8) {
    -webkit-transform: translate(-4.5em, 7.5em);
    transform: translate(-4.5em, 7.5em);
    transition-delay: 0.7s; }
  .picture-wheel .inner-wheel .slice:nth-child(9) {
    -webkit-transform: translate(-10.5em, 14em);
    transform: translate(-10.5em, 14em);
    transition-delay: 0.8s; }
  .picture-wheel .inner-wheel .slice:nth-child(10) {
    -webkit-transform: translate(-9em, 0);
    transform: translate(-9em, 0);
    transition-delay: 0.9s; }
  .picture-wheel .inner-wheel .slice:nth-child(11) {
    -webkit-transform: translate(-10.5em, -14em);
    transform: translate(-10.5em, -14em);
    transition-delay: 1s; }
  .picture-wheel .inner-wheel .slice:nth-child(12) {
    -webkit-transform: translate(-4.5em, -7.5em);
    transform: translate(-4.5em, -7.5em);
    transition-delay: 1.1s; }
  /*****************************/
  .game-leader {
    display: none !important; }
  /*********************/
  /*** Time travel game
  /*********************/
  .sprint-container,
  .time-container {
    height: 95%; }
  .sprint-speak.play:before {
    background-size: 75%; }
  /*********************/
  /*** gym mode games
  /*********************/
  .gym-market {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    padding: 8em 1em 0;
    box-sizing: border-box;
    background-color: #f1f5f8; }
  .gym-market .mobile-header {
    text-align: left;
    padding-left: 8em;
    background: url(../images/gym-pushup.png) 1em center no-repeat;
    background-size: 5em;
    background-color: #fff;
    box-shadow: 0 2px 4px #ccc; }
  .pushup-status .progress {
    height: 0.5em; }
  .gym-market .box {
    margin: 0 0.5em; }
  /*********************/
  /*** System
  /*********************/
  .choose-container {
    position: relative;
    top: 0;
    margin-top: 1em;
    width: 95%;
    margin-left: -47.5%; }
  .choose-container .close {
    top: -0.5em;
    right: -0.5em; }
  .pieSegmentGroup text {
    /* font-size: 1.05em; */ }
  .system-intro .intro {
    /* margin-top: 5em; */ }
  .doublesys-practice {
    padding-top: 5em;
    padding-bottom: 1em; }
  .single-learn.system-learn {
    margin-top: 0; }
  .single-practice {
    padding-top: 5em; }
  .single-test .system-box .body {
    padding-bottom: 0; }
  .system-learn {
    width: 95%;
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto; }
    .system-learn:not(.single-learn) .sys-ani {
      margin: -135px -240px; }
    .system-learn .sys-ani {
      -webkit-transform: scale(0.3);
              transform: scale(0.3); }
    .system-learn .box-holder .header {
      width: 7.2em;
      line-height: 1em;
      position: absolute;
      top: 0;
      left: 0; }
    .system-learn .box-holder .box {
      position: relative; }
    .system-learn .box-holder .header p {
      height: 1em;
      background-color: rgba(31, 37, 42, 0.64);
      padding: 0.5em;
      font-size: 0.8em;
      color: #fff; }
    .system-learn .box-holder .body {
      width: 100%; }
    .system-learn .box-holder .img-holder {
      margin: 0 auto;
      /* margin-top:1em; */
      background-color: rgba(31, 37, 42, 0.06); }
    .system-learn .box-holder .body .text {
      padding: 0.5em 1em;
      height: 7em; }
    .system-learn .vertical {
      height: 9em; }
    .system-learn .top h1 {
      /* font-size:2.5em; */ }
  .system-test-container {
    width: 100%;
    margin-left: -50%; }
  .system-drag .drop-places li {
    width: 30%; }
  .system-tour {
    width: 95%;
    position: relative;
    top: 1em;
    left: 0;
    margin: 0 auto; }
  .system-tour .arrow {
    width: 3em;
    height: 6em; }
  .system-tour .box {
    width: 6em;
    height: 6em; }
  .system-tour .slide2 .box {
    width: 3em;
    height: 4em; }
  .system-tour .text {
    padding: 1em 2em 0; }
  .doublesys-example {
    width: 100%;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    min-height: 100%; }
  .doublesys-example.example2 .system-learn {
    top: 2em;
    font-size: 0.85em; }
  .doublesys-example .system-learn {
    width: 85%;
    top: 1em; }
  .doublesys-example .slide3 .system-learn {
    /* width:100%; */ }
  .doublesys-example .system-learn h1 {
    opacity: 1;
    padding: 0.2em 0; }
  .de-description {
    display: block;
    text-align: center;
    line-height: 1.5em;
    width: 100%; }
  .de-button-holder {
    display: block;
    width: 100%;
    text-align: center; }
  .de-button-holder .button-green {
    width: 80%;
    float: none; }
  .doublesys-example.example2 .footer {
    padding: 1em 2em 0.5em; }
  .doublesys-example.example2 .slide1 .footer .button-green {
    width: 80%;
    padding: 0.9em 1em; }
  .tutorial-double {
    width: 95%;
    position: relative;
    top: 1em;
    left: 0;
    margin: 0 auto; }
  .tutorial-double .content .item {
    width: 8em; }
  .tutorial-double .slide6 .content .items {
    margin: 1em 2em; }
  .tutorial-completed {
    width: 95%;
    position: relative;
    top: 1em;
    left: 0;
    margin: 0 auto; }
    .tutorial-completed .footer .intro-col {
      display: block; }
    .tutorial-completed .footer .button-green {
      width: 90%; }
  .system-practice > div {
    padding-top: 5em; }
  .system-practice.name-test > div,
  .system-practice.journey-test > div {
    padding-top: 0; }
  .practice-button {
    position: relative; }
  .practice-button > div {
    font-size: 1.3em;
    position: absolute;
    top: 1.5em;
    left: 1em; }
  .practice-button .yes {
    left: auto;
    right: 1em; }
  .practice-button .button-green {
    display: block;
    margin: 1em 9em; }
  .practice-button .hint {
    font-size: 0.6em; }
  .practice-button .hint:after {
    background-size: 1em; }
  .system-journey {
    width: 100%;
    margin: 0;
    max-height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: visible; }
  #namesys .system-journey {
    top: 45px; }
  .system-journey .col-left,
  .system-journey .col-right {
    display: block;
    width: 100%; }
  .system-journey .col-right {
    position: absolute;
    top: 0;
    bottom: 0;
    padding-top: 4em;
    overflow: hidden; }
  .system-journey .col-right .mobile-header {
    z-index: 0; }
  #namesys .namesys-pagination {
    padding: 0.6em 0;
    font-size: 0.9em; }
  #namesys .col-right .footer {
    padding: 1em; }
  .system-journey .col-right .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: #739B0A; */ }
  .system-journey .col-right .footer .text {
    padding-top: 1em;
    padding-left: 1em;
    color: #fff; }
  .system-journey .col-right .footer .text select {
    background: transparent;
    border: none;
    /* color:#fff; */ }
  .system-journey .col-right .footer .button-green {
    margin: 0;
    border-radius: 0; }
  .system-journey .col-left.country {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #2F302C;
    z-index: 1; }
  .system-journey .col-left > div {
    position: relative;
    /* z-index:2; */
    background-color: #2f302c; }
  .system-journey .col-left.country .content.open ul {
    max-height: 12em; }
  .system-journey .col-left.country .mobile-header {
    border-color: #999; }
  .system-journey .col-left.country .header {
    width: 100%;
    display: block;
    box-sizing: border-box; }
  .system-journey .col-left.country .header .text {
    height: 3em;
    font-weight: bold;
    font-size: 1em; }
  .system-journey .col-left .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0; }
  .system-journey .col-right .header {
    font-size: 0.9em;
    padding: 0 1em;
    background-color: #222;
    margin: 1em;
    border-radius: 4px; }
  .system-journey .select-country .header {
    background-color: transparent;
    padding: 10em 0 2em;
    margin: 5em 0 0; }
  #namesys.mission-mode .col-right .header {
    background: transparent;
    margin: 0;
    margin-bottom: 1.5em;
    line-height: 1.5em; }
  #namesys.mission-mode .col-right .footer {
    padding: 0.5em 1em; }
  .system-journey .col-right .header .tab-holder {
    padding: 0;
    text-align: left; }
  .system-journey .col-right .header .tab-holder .tab {
    float: right;
    margin-top: 0.4em;
    font-weight: normal; }
  .system-journey .col-right .content-learn .header {
    background: transparent; }
  .system-journey .col-right .content-learn .slide .content-list {
    margin: 0; }
  .system-journey .col-right .header .tab.showOnMobile {
    background: url(/images/system-sort.png) center center no-repeat;
    text-indent: -9999px;
    background-color: #333;
    background-size: 2em;
    width: 2em; }
  .system-journey .header .dropdown.showOnMobile {
    background-color: #333;
    z-index: 101; }
  .system-journey .header .dropdown.showOnMobile:after {
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2em;
    color: #fff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .system-journey .col-left .header .plus {
    border: none;
    display: block;
    width: 2em;
    font-size: 2em;
    text-align: center;
    padding: 0;
    margin-right: -0.5em; }
  .system-journey .col-right .content {
    height: 32em;
    width: 100%;
    box-sizing: border-box;
    padding: 0 1em; }
  .system-journey .col-right .content::-webkit-scrollbar {
    width: 6px;
    /* for vertical scrollbars */ }
  .system-journey .box-holder .item .names:after {
    display: none; }
  .system-journey .box-holder .item {
    padding: 0;
    margin: 1em 0; }
  .system-journey .box-holder .item .names,
  .system-journey .box-holder .item .codes {
    display: block;
    width: 100%;
    padding: 0.3em 1em;
    box-sizing: border-box; }
  .system-journey .box-holder .item .codes {
    background-color: #e2e4e7; }
  .system-journey .col-left li .delete {
    visibility: visible;
    opacity: 1;
    transition: all 500ms ease; }
  .breadcrumb {
    padding: 0.8em 1em;
    margin: 0 0 1em;
    background-color: #fff;
    border-bottom: solid 1px #E8E8E8; }
  .breadcrumb li {
    display: inline-block;
    text-shadow: 0 1px 0 #ffffff; }
  .breadcrumb .divider {
    padding: 0 5px;
    color: #999999; }
  .breadcrumb .active a {
    color: #333333; }
  #mobile-journey {
    padding: 0;
    /* margin-top: 30px; */ }
  #mobile-journey .game-exit {
    background-position: 0 -40px; }
  #mobile-journey .header {
    font-size: 1.5em;
    position: relative;
    z-index: 1; }
  #mobile-journey .content {
    color: white;
    background-color: #F1F5F8;
    text-align: center; }
  #mobile-journey .box-holder {
    background-color: #F1F5F8;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 5em;
    margin-top: -5em; }
  #mobile-journey .box {
    width: 60%;
    background: transparent;
    margin-bottom: 0; }
  #mobile-journey .box:after {
    top: 0;
    bottom: 0;
    left: -2em;
    height: 100%;
    z-index: 101; }
  #mobile-journey .box:last-child:after,
  #mobile-journey .box:first-child:after {
    top: auto;
    height: 50%;
    bottom: 0;
    display: block; }
  #mobile-journey .box:last-child:after {
    top: 0;
    bottom: auto; }
  #mobile-journey .box:only-child:after {
    display: none; }
  #mobile-journey .body {
    background: transparent;
    box-shadow: none; }
  #mobile-journey .delete-me {
    color: #333;
    font-size: 1.5em;
    padding: 10px;
    display: block;
    text-align: right;
    font-weight: bold; }
  #mobile-journey .box .step-no {
    position: absolute;
    top: 50%;
    left: -3.5em;
    background-color: #fff;
    color: #333;
    width: 2em;
    height: 2em;
    line-height: 2em;
    margin-top: -1em;
    text-align: center;
    border-radius: 100%;
    border: solid 1px #ccc;
    font-size: 0.8em;
    z-index: 102; }
  .system-journey .content-intro {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #333;
    text-align: center;
    background-color: #F1F5F8; }
  .system-journey .content-intro .button-green {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    margin: 1em; }
  .system-journey .content-intro .text {
    background: url(/images/system-journey-intro.png) center 0 no-repeat;
    background-size: 3em;
    margin-top: 0;
    padding: 4em 3em 1em;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%); }
  .system-journey .content-intro ul {
    list-style: none; }
  #mobile-journey .box .img-holder {
    height: 13em;
    width: 100%;
    margin-left: -2px;
    margin-right: auto;
    border: solid 4px #fff; }
  #mobile-journey input {
    font-size: 2em;
    text-align: center; }
  #mobile-journey li.journey {
    font-size: 1.3em;
    position: relative;
    margin: 1em;
    clear: both;
    list-style: none; }
  #mobile-journey .btn-add-step,
  #mobile-journey .btn-journey-test {
    width: 80%; }
  #mobile-journey .btn-add-step {
    background: transparent;
    color: #7DA611; }
  #mobile-journey li.journey .text {
    padding-left: 1em;
    /* float: left; */
    height: 2em;
    display: table-cell;
    vertical-align: middle;
    line-height: 1.5em; }
  #mobile-journey li.journey .img-holder {
    float: left;
    width: 2em;
    height: 2em;
    border-radius: 100%;
    overflow: hidden;
    position: relative; }
  #mobile-journey .img-holder span.plus {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #333;
    display: block;
    background: url(/images/system-journey-plus.png) center center no-repeat;
    background-size: 0.7em;
    background-color: #fff;
    text-indent: -9999px;
    border-radius: 100%; }
  #mobile-journey ul.journey-list {
    height: 240px;
    background-color: #2F302C; }
  #mobile-journey li.journey .img-holder img {
    vertical-align: middle; }
  #mobile-journey .btn-test-journey {
    width: 92%; }
  .practice-container,
  .tutorial-container.test,
  .tutorial-container {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 1em 0;
    width: 95%;
    padding-top: 5em; }
  .tutorial-container .content {
    width: 100%; }
  .tutorial-container h1 + p {
    font-size: 0.9em; }
  .tutorial-container .item {
    width: 7em; }
  .tutorial-container td i {
    padding: 0 1em; }
  .practice-container h1 {
    font-size: 1.5em;
    font-weight: bold; }
  /*********************/
  /*** Board
  /*********************/
  .board {
    width: 300px;
    margin: 2em auto;
    position: relative;
    top: 0;
    left: 0;
    max-height: 37em; }
  .board .slide-2 .img-holder span,
  .board .col-left {
    display: none; }
  .board .col-right {
    width: 100%; }
  .board .col-right h1 {
    font-size: 1.2em; }
  .board .col-right .img-holder {
    width: 10em; }
  .board .col-right .content {
    padding: 2em 2em 6em;
    min-height: 0;
    font-size: 1.1em; }
  .board .col-right .content .button-green.start {
    width: 80%; }
  /*********************/
  /*** Benefit
  /*********************/
  .articles-holder {
    width: 100%;
    padding: 2em;
    margin: 0; }
  .articles-holder p {
    font-size: 1.35em;
    line-height: 1.4em; }
  .articles .button-green {
    width: 80%; }
  .articles-holder .header .button-green {
    width: inherit; }
  .articles-holder .header {
    top: 2em;
    left: 2em; }
  #zenbox_tab {
    display: none !important; } }

@media (max-width: 480px) {
  .intro .col-bottom .text .left {
    width: 100%; }
  .intro .col-bottom .text .right {
    display: none; }
  .col-top {
    min-height: 10em; }
  .intro .col-bottom .text .intro-read {
    top: -8.5em;
    display: none; }
  .system-intro .intro .col-bottom .text .intro-read {
    display: none; }
  .system-intro .intro .col-bottom .text {
    margin-top: 1em; }
  .learntime-container {
    right: 0.5em;
    top: 4em; }
  .library .learntime-container {
    right: auto;
    left: 0.7em;
    min-width: 10em;
    top: 3.2em; }
  /*************book*********/
  @-webkit-keyframes bk-ani {
    0% {
      -webkit-transform: scale(0.3) translateY(-1000px); }
    80% {
      -webkit-transform: scale(0.3) translateY(800px); }
    100% {
      -webkit-transform: scale(0.3) translateY(700px); } }
  @keyframes bk-ani {
    0% {
      -webkit-transform: scale(0.3) translateY(-1000px);
      transform: scale(0.3) translateY(-1000px); }
    50% {
      -webkit-transform: scale(0.3) translateY(800px);
      transform: scale(0.3) translateY(800px); }
    100% {
      -webkit-transform: scale(0.3) translateY(700px);
      transform: scale(0.3) translateY(700px); } }
  .game-user {
    display: none !important; }
  .intro .col-bottom .text .intro-play,
  .intro .col-bottom .text .intro-learn {
    min-width: 0; }
  .body-intro .game-menu-holder {
    display: none; }
  .game-home .text {
    display: none; }
  .picture-wheel {
    font-size: 10px; }
  .picture-wheel h1 {
    width: 60%;
    margin: 0px auto;
    position: relative;
    top: -2em;
    line-height: 1.3em; }
  .test-mcq .two-col .ans {
    width: 29%; }
  .market-wrapper .title {
    padding: 0; }
  .game-header {
    height: 5.5em; }
  .game-panel {
    position: fixed;
    top: 0px;
    left: 0px; }
  .game-panel .game-number {
    position: fixed; }
  .mindmap .game-header {
    position: fixed; }
  .shopping-slider {
    background-size: 90%;
    height: 9em;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-position: center 150%;
    z-index: 10; }
  .slide-holder {
    width: 80%; }
  .test-content .drop-places-holder .drop-places.ui-droppable {
    height: 25em;
    overflow: visible;
    overflow-x: hidden;
    display: block;
    margin-top: 1em; }
  .name-face.play {
    overflow: hidden; }
  .vault-holder {
    top: 43%;
    font-size: 14px;
    -webkit-transform: scale(0.5) translate3d(0, 0, 0);
    transform: scale(0.5) translate3d(0, 0, 0); }
  .face-grid li {
    width: 200px;
    margin-bottom: 3em; }
  .face-grid figure > div {
    height: 200px;
    line-height: 200px; }
  .face-grid figcaption {
    padding: 0.5em;
    min-height: 40px;
    overflow: hidden; }
  .user-belt .user-profile .button-green {
    position: relative;
    bottom: 0; }
  .system-test-container h1 {
    margin-top: -3em; }
  .drop-places-holder {
    margin-top: -1.5em; }
  .shopping-test .drop-places-holder {
    margin-top: 0;
    padding-bottom: 0; }
  .learn-card .intro-level .button-holder .title {
    line-height: 1.2em; }
  .practice-container {
    padding-top: 3em; }
  .single-test .system-test-container {
    padding-top: 3em; }
  .system-box {
    background-color: transparent;
    box-shadow: none;
    color: #fff;
    margin: 0; }
  .system-box .img-holder {
    position: relative; }
  .system-box .item .number {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    font-size: 1.4em;
    color: #fff;
    background-color: #92c626; }
  .system-box .text {
    line-height: 1.2em; }
  .system-box .img-holder img {
    position: relative;
    z-index: 1; }
  .system-box .img-holder {
    border-color: #fff; }
  .system-box .header {
    display: none; }
  .system-drag .drop-places li {
    width: 50%; }
  .system-drag ul {
    text-align: left; }
  .shopping-slider .next, .shopping-slider .prev {
    -webkit-transform: scale(0.7);
    transform: scale(0.7); }
  .system-test .shopping-slider {
    height: 7em;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: url(/images/system-wood.png) center 140% no-repeat;
    background-size: contain; }
  .system-test-container .test-content .shopping-items li {
    width: 4.4em;
    height: 4.4em;
    line-height: 4.4em; }
  .system-test-container .test-content .shopping-items li.wrong span {
    line-height: 4.5em; }
  .tutorial-container.test td:nth-child(2) .item:after {
    right: -20%; }
  .choose-container .content {
    height: 300px;
    display: block;
    width: 100%; }
  .choose-container .footer .intro-col {
    display: block;
    width: 100%; }
  .choose-container .content.single {
    margin-bottom: 6em;
    height: 250px; }
  .content.single .chart-title {
    top: -1.5em; }
  .choose-container .footer .intro-col.single {
    position: absolute;
    top: 26.8em;
    left: 0;
    right: 0; }
  .meeting {
    overflow: hidden; }
  .meeting-test .up, .meeting-test .down {
    width: 3em;
    right: 0;
    left: auto; }
  .meeting-test .down {
    position: absolute;
    bottom: 10em; }
  .meeting-start-holder .holder {
    background: url(/images/meeting-start.png) 0 center no-repeat;
    background-size: 100%;
    padding: 0;
    margin-top: -1em; }
  .meeting-start-holder .slide2 .holder p {
    color: #333;
    padding: 6em 6em 6em 1.5em;
    line-height: 1.1em;
    text-align: left; }
  .meeting-chat-holder li .avatar-list {
    display: none; }
  .meeting-chat-holder li.correct .avatar-list {
    display: block;
    min-width: 20em; }
  .meeting-chat-holder li.correct:nth-child(odd) .avatar-list {
    left: -7em;
    top: 0.6em; }
  .meeting-chat-holder li.correct:nth-child(even) .avatar-list {
    right: -7em;
    top: 0.6em; }
  .shopping-drag .up, .shopping-drag .down {
    bottom: 3em; }
  .market-content .item.double-item .item-holder {
    width: 48%;
    font-size: 0.7em; }
  .market-content .item.double-item {
    padding: 1.3em 1em 1.3em 3.5em; }
  .brain-grid {
    margin-top: 2em;
    margin-bottom: 0;
    height: 300px; }
  .test-card .content {
    margin-top: 2.5em; }
  .vault-input-holder {
    position: relative;
    top: 3em;
    margin-top: 1.5em;
    width: 96%;
    margin-left: -48%; }
  .super-market .vault-input-holder {
    margin-top: 7em; }
  /*********************/
  /*** Time travel game
  /*********************/
  .sprint-content,
  .time-content {
    position: relative;
    top: 10em;
    width: 300px;
    margin: 0px auto;
    left: 0px; }
  /*********************/
  /**** Header
  /*********************/
  .sound-control {
    bottom: auto;
    top: 0.5em;
    right: 3.2em; }
  .game-exit {
    bottom: auto;
    top: 1em;
    left: auto;
    right: 0; }
  .game-panel .game-timer {
    position: fixed;
    left: 0;
    width: 100%;
    text-align: center;
    top: 0.5em; }
  .game-panel .game-number {
    top: 5em; }
  .img-pushup {
    position: fixed;
    top: 3.5em;
    left: 50%;
    background-size: 3em;
    width: 3em;
    height: 1.5em;
    margin-left: -1.5em; }
  /*********************/
  /*** Belt
  /*********************/
  .user-belt-holder .box {
    width: 48%; }
  /*********************/
  /*** Benefit
  /*********************/
  .articles-holder {
    /* width: 95%; */
    /* margin-top:6em; */ }
  .articles-holder .header {
    background-size: cover; }
  .articles-holder .header h1 {
    padding-bottom: 1em; }
  .articles-holder .header .box {
    width: 100%;
    padding: 1em 0 0; }
  .articles-holder .col-6 {
    width: 100%;
    margin-bottom: 1.5em; }
  .sys-ani {
    margin: -135px -240px;
    -webkit-transform: scale(0.3);
            transform: scale(0.3); }
  .system-tour-callout.singlesys-tour2 {
    /* top:19em !important; */ }
  .system-tour {
    top: 5em; }
  .name-practice .system-journey .col-right .footer:after {
    content: "";
    clear: both;
    display: table; }
  .system-journey .col-right .header .tab-holder > span img {
    margin-left: 0 !important; } }

@media (max-width: 320px) {
  .intro .col-bottom .text h1 {
    width: 150px;
    font-size: 1.1em; }
  .shopping-slider {
    background-position: center bottom;
    height: 8.5em; }
  .slide-holder {
    width: 73%; }
  .single-learn .sys-ani {
    margin-left: -45px; } }

/*******height********/
@media (max-height: 620px) {
  .system-intro .intro .col-bottom .text div.systemtext {
    max-height: 19em;
    overflow-x: hidden; }
  .intro .col-bottom.learn-card .text {
    min-height: 0;
    padding-bottom: 0; }
  .intro .col-bottom.learn-card .intro-play + div {
    max-height: 6em;
    overflow-x: hidden; }
  #namesys .system-journey .col-right .content {
    height: 34em; }
  #namesys.mission-mode .system-journey .col-right .content {
    height: 30em; } }

@media (max-height: 504px) {
  /******Background******/
  .name-face.play,
  .brain-storm-game {
    height: 100%;
    overflow: hidden; }
  .sprint-container,
  .time-container {
    height: auto;
    min-height: 42em; }
  .sprint-speak,
  .time-travel,
  .bank-vault,
  .library,
  .meeting {
    height: auto;
    min-height: 42em; }
  #panelsuperm {
    height: auto;
    min-height: 42em; }
  div[id^='levelintropanel'] {
    min-height: inherit; }
  .system-practice {
    height: auto;
    /* min-height:42em; */ }
  .system-test {
    height: auto;
    min-height: 44em; }
  .system-test.single-sys {
    height: 100%;
    min-height: 0; }
  .system-intro .intro .col-bottom .text div.systemtext {
    max-height: 13em;
    overflow-x: hidden; }
  .intro .col-bottom.learn-card .text {
    min-height: 0;
    padding-bottom: 0; }
  .intro .col-bottom.learn-card .intro-play + div {
    max-height: 6em;
    overflow-x: hidden; }
  #namesys .system-journey .col-right .content {
    height: 26em; }
  #namesys.mission-mode .system-journey .col-right .content {
    height: 23em; } }

/*** for retina *****/
/*****************************/
/******Style For 3rd party****/
/*****************************/
#zenbox_tab {
  margin-right: -1em;
  top: 50% !important;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%); }

#zenbox_tab img {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

/****************************/
/****** Onboarding popup ****/
/****************************/
#onboarding {
  line-height: normal; }

.onboarding .content {
  background: white;
  height: auto; }

.onboarding-header {
  padding: 15px 10px;
  font-size: 140%;
  margin-bottom: 10px;
  font-family: arial; }

.onboarding-memogenius-icon {
  margin-top: 10px;
  margin-bottom: 10px; }

.onboarding-memogenius-icon img {
  width: 120px;
  height: 120px; }

.onboarding-memogenius-details {
  font-style: italic;
  font-size: 90%; }

.onboarding .footer {
  background: white; }

.onboarding-included {
  margin-top: 80px;
  margin-bottom: 10px; }

.onboarding-included .bold {
  font-family: arial;
  font-weight: bold; }

.onboarding-dash {
  display: inline-block;
  margin: 0px 10px; }

.onboarding-applist img {
  width: 18%; }

.onboarding .button-green {
  text-transform: uppercase; }

body ai-dialog-overlay {
  background: rgba(0, 0, 0, 0.6); }

body ai-dialog-container {
  pointer-events: initial;
  padding: 10px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

body ai-dialog {
  border: none;
  border-radius: 0px;
  min-width: initial;
  margin-top: auto !important;
  width: 100%;
  max-width: 600px;
  border-radius: 3px;
  -webkit-animation: fadeInUp 1s ease forwards;
          animation: fadeInUp 1s ease forwards; }
  body ai-dialog > ai-dialog-header {
    border-bottom: none;
    border-radius: 3px 3px 0px 0px; }
  body ai-dialog > ai-dialog-body {
    padding: 0px; }
  body ai-dialog > ai-dialog-footer {
    padding: 0px;
    border-top: none;
    text-align: inherit; }

.dialog {
  background-color: yellow; }

#challenge-initiate .page {
  display: none; }

#challenge-initiate .pages[data-active-page="choose-method"] .page[data-pageid="choose-method"] {
  display: block; }

#challenge-initiate .pages[data-active-page="facebook"] .page[data-pageid="facebook"] {
  display: block; }

#challenge-initiate .pages[data-active-page="mail"] .page[data-pageid="mail"] {
  display: block; }

#challenge-initiate .pages[data-active-page="receit"] .page[data-pageid="receit"] {
  display: block; }

.dialog-challenge {
  background-color: #F6F6F6;
  line-height: normal; }
  .dialog-challenge .header {
    text-align: center;
    background-color: white;
    padding: 10px 20px; }
    .dialog-challenge .header > div:first-child {
      font-size: 120%;
      font-weight: bold; }
    .dialog-challenge .header > div:nth-child(2) {
      color: gray; }
  .dialog-challenge .body {
    padding: 20px 20px;
    text-align: center; }
  .dialog-challenge .versus {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 20px; }
    .dialog-challenge .versus .player {
      width: 100px;
      text-align: center; }
      .dialog-challenge .versus .player .face {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid white;
        background-color: #97BFE8;
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
        -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
                flex-shrink: 0; }
      .dialog-challenge .versus .player .name {
        min-height: 3em;
        margin-top: 5px; }
      .dialog-challenge .versus .player .score {
        color: #04D159;
        font-size: 200%; }
    .dialog-challenge .versus .divider {
      position: relative;
      margin: 0px 10px; }
      .dialog-challenge .versus .divider::before {
        content: "";
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 3px solid white;
        background-color: #EAEAEA;
        background-image: url(/images/challenge-flow/gloves.png);
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
        top: 20px;
        left: -30px;
        box-sizing: border-box; }
      .dialog-challenge .versus .divider::after {
        content: "";
        position: absolute;
        bottom: 0px;
        width: 1px;
        height: 20px;
        background-color: gray; }
  .dialog-challenge .footer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px; }
    .dialog-challenge .footer > * {
      border-radius: 2px;
      padding: 15px 30px;
      border: 1px solid transparent;
      text-align: center;
      box-sizing: border-box;
      width: 100%;
      max-width: 370px;
      cursor: pointer; }
    .dialog-challenge .footer > div:first-child {
      background-color: #04D159;
      color: white;
      border-color: #0DC359; }
    .dialog-challenge .footer > div:nth-child(2) {
      background-color: #E0E0E0;
      border-color: #D2D2D2;
      margin-top: 10px; }

#challenge-initiate .page[data-pageid="choose-method"] .body {
  background-color: #231F3A;
  color: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: no-repeat center/410px url(/images/challenge-flow/challenge-big-brain.png), no-repeat center/cover url(/images/challenge-flow/challenge-background.png);
  height: 400px; }
  #challenge-initiate .page[data-pageid="choose-method"] .body > *:first-child {
    font-size: 120%; }

#challenge-initiate .page[data-pageid="choose-method"] .footer {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: white;
  padding-top: 20px; }
  #challenge-initiate .page[data-pageid="choose-method"] .footer > * {
    box-sizing: border-box;
    width: 36px;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 0px 5px; }
    #challenge-initiate .page[data-pageid="choose-method"] .footer > *:first-child {
      background-color: #425A94;
      border-color: #324571; }
    #challenge-initiate .page[data-pageid="choose-method"] .footer > *:last-child {
      background-color: #F6F6F6;
      border-color: #E0E0E0; }

#challenge-initiate .page[data-pageid="mail"] .body {
  min-height: 200px; }

#challenge-initiate .page[data-pageid="mail"] .friend {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 5px; }
  #challenge-initiate .page[data-pageid="mail"] .friend input {
    padding: 10px;
    font: inherit;
    border: none;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1; }
  #challenge-initiate .page[data-pageid="mail"] .friend .button {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-size: contain;
    background-position: center;
    height: 100%;
    width: 25px; }
    #challenge-initiate .page[data-pageid="mail"] .friend .button.btn-add {
      background-image: url(/images/challenge-flow/add.svg); }
    #challenge-initiate .page[data-pageid="mail"] .friend .button.btn-remove {
      background-image: url(/images/challenge-flow/remove.svg); }

#challenge-initiate .page[data-pageid="facebook"] .waitingMessage {
  margin-top: 20px;
  visibility: hidden; }

#challenge-initiate:not(.challengeCreationStatus-initial) .page[data-pageid="mail"] .friend {
  visibility: hidden; }

#challenge-initiate:not(.challengeCreationStatus-created) .page[data-pageid="facebook"] .waitingMessage {
  visibility: visible; }

#challenge-initiate:not(.challengeCreationStatus-created) .page[data-pageid="facebook"] .footer {
  visibility: hidden; }

#challenge-receive .body {
  padding: 0px; }

#challenge-receive .versus-prematch {
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 0px; }
  #challenge-receive .versus-prematch .player {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: auto; }
    #challenge-receive .versus-prematch .player .face {
      width: 80px;
      height: 80px;
      margin: 35px;
      border-radius: 50%;
      border: 3px solid white;
      background-color: #97BFE8;
      box-sizing: border-box;
      background-size: cover;
      background-position: center;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0; }
    #challenge-receive .versus-prematch .player.challenger {
      background-color: #E2E2E2;
      text-align: left;
      background: no-repeat center/cover url(/images/challenge-flow/challenge-background.png);
      color: white; }
      #challenge-receive .versus-prematch .player.challenger .face {
        margin-right: 20px; }
    #challenge-receive .versus-prematch .player.you {
      -webkit-flex-direction: row-reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
      text-align: right; }
      #challenge-receive .versus-prematch .player.you .face {
        margin-left: 20px; }
  #challenge-receive .versus-prematch .divider {
    position: relative;
    height: 4px;
    background-color: white; }
    #challenge-receive .versus-prematch .divider::before {
      content: "";
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 3px solid white;
      background-color: #EAEAEA;
      background-image: url(/images/challenge-flow/gloves.png);
      background-size: 80%;
      background-repeat: no-repeat;
      background-position: center;
      top: -30px;
      left: 50%;
      margin-left: -30px;
      box-sizing: border-box; }

#supermarket-help-dialog .dialog-header-content {
  text-align: center; }

#supermarket-help-dialog .body {
  padding: 10px;
  background-color: #ccc; }

#supermarket-help-dialog ul {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  list-style: none;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

#supermarket-help-dialog li {
  background-color: white;
  margin: 5px; }

#supermarket-help-dialog .animation-frame {
  position: relative;
  width: 80px;
  height: 80px; }

#supermarket-help-dialog .animation {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px;
  border: 1px solid white;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  width: 400px;
  height: 400px;
  -webkit-animation: ani-3sec 3.2s steps(35) 1s infinite;
          animation: ani-3sec 3.2s steps(35) 1s infinite;
  -webkit-transform: scale(0.2);
          transform: scale(0.2); }

#supermarket-help-dialog .footer {
  text-align: center; }
  #supermarket-help-dialog .footer div {
    padding: 10px;
    cursor: pointer; }

/*-------------------------------------------------------------*/
/****** New styles, will move to separate files later **********/
/*-------------------------------------------------------------*/
.panel-container {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 1001; }

/*
#/images/system-bg-images/bg-memolife-system-intro.jpg
#/images/system-bg-images/bg-journey-system-intro.jpg
#/images/system-bg-images/bg-name-system-intro.jpg
#/images/system-bg-images/bg-system-clone.jpg
#/images/system-bg-images/bg-alphabet-system-intro.jpg
#/images/bg-rhyme-system-intro.jpg
#/images/bg-system-time.jpg
#/images/bg-system-knowledge.jpg
#/images/bg-system-similar.jpg
#/images/bg-system-highlight.jpg
#/images/bg-system-symbolization.jpg
#/images/bg-system-chain.jpg
*/
.technique-intro-panel {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  color: white;
  background-position: center;
  background-size: cover; }
  .technique-intro-panel[data-technique="doublesys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-memolife-system-intro.jpg); }
  .technique-intro-panel[data-technique="journeysys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-journey-system-intro.jpg); }
  .technique-intro-panel[data-technique="namesys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-name-system-intro.jpg); }
  .technique-intro-panel[data-technique="clonesys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-system-clone.jpg); }
  .technique-intro-panel[data-technique="alphabetsys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-alphabet-system-intro.jpg); }
  .technique-intro-panel[data-technique="rhymesys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-rhyme-system-intro.jpg); }
  .technique-intro-panel[data-technique="timesys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-system-time.jpg); }
  .technique-intro-panel[data-technique="knowledgesys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-system-knowledge.jpg); }
  .technique-intro-panel[data-technique="similaritysys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-system-similar.jpg); }
  .technique-intro-panel[data-technique="highlightsys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-system-highlight.jpg); }
  .technique-intro-panel[data-technique="symbolizationsys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-system-symbolization.jpg); }
  .technique-intro-panel[data-technique="chainsys"] {
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.62) 51%, rgba(0, 0, 0, 0.95) 100%), url(/images/system-bg-images/bg-system-chain.jpg); }
  .technique-intro-panel .close {
    padding: 10px;
    -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
            align-self: flex-end;
    cursor: pointer;
    background: url(/images/mobile-icon-close.png) center center no-repeat;
    background-size: 1em;
    background-color: rgba(255, 255, 255, 0.68);
    color: transparent;
    width: 1.2em;
    height: 1.2em; }
  .technique-intro-panel .readingtime {
    padding-left: 2em;
    background: url(/images/intro-read.png) left center no-repeat;
    background-size: 1em;
    -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
            align-self: flex-start;
    margin-left: 20px;
    margin-bottom: 20px; }
  .technique-intro-panel .icon {
    width: 6em;
    height: 6em;
    background-size: contain;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0; }
  .technique-intro-panel .title {
    font-size: 1.5em;
    margin: 16px 0px; }
  .technique-intro-panel .intro {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
            align-self: stretch;
    padding: 0px 20px;
    overflow: scroll; }
    .technique-intro-panel .intro p:first-child {
      font-size: 1.2em;
      margin-bottom: 1em; }
  .technique-intro-panel .footer {
    padding: 20px;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    text-align: center; }
    .technique-intro-panel .footer > * {
      border: 1px solid #93c60b;
      color: #93c60b;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer; }
    .technique-intro-panel .footer .practice {
      background-color: #93c60b;
      color: white; }

@media (max-width: 767px) {
  .technique-intro-panel .footer {
    box-sizing: border-box;
    max-width: 400px;
    width: 100%; }
    .technique-intro-panel .footer > * {
      box-sizing: border-box; }
    .technique-intro-panel .footer .msg-read_the_article-single {
      width: calc(50% - 5px);
      display: inline-block;
      margin-right: 10px; }
    .technique-intro-panel .footer .msg-read_the_article-double {
      width: calc(50% - 5px);
      display: inline-block; }
    .technique-intro-panel .footer .practice {
      margin-top: 10px; } }

@media (min-width: 768px) {
  .panel-container {
    padding: 20px;
    background: url(/images/bg-night.jpg) center center no-repeat;
    background-size: cover; }
  .technique-intro-panel {
    margin: auto;
    max-width: 770px;
    box-shadow: 0 0 5px #000; }
    .technique-intro-panel .footer > * {
      margin: 0px 5px;
      display: inline-block; } }

/* Css challenge */
/*********************/
/*** Grid system
/*********************/
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box; }

@media (min-width: 768px) {
  .container {
    width: 750px; } }

@media (min-width: 992px) {
  .container {
    width: 970px; } }

@media (min-width: 1200px) {
  .container {
    width: 1170px; } }

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }

.row {
  margin-left: -15px;
  margin-right: -15px;
  box-sizing: border-box; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box; }

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left; }

.col-xs-12 {
  width: 100%; }

.col-xs-11 {
  width: 91.66666667%; }

.col-xs-10 {
  width: 83.33333333%; }

.col-xs-9 {
  width: 75%; }

.col-xs-8 {
  width: 66.66666667%; }

.col-xs-7 {
  width: 58.33333333%; }

.col-xs-6 {
  width: 50%; }

.col-xs-5 {
  width: 41.66666667%; }

.col-xs-4 {
  width: 33.33333333%; }

.col-xs-3 {
  width: 25%; }

.col-xs-2 {
  width: 16.66666667%; }

.col-xs-1 {
  width: 8.33333333%; }

.col-xs-pull-12 {
  right: 100%; }

.col-xs-pull-11 {
  right: 91.66666667%; }

.col-xs-pull-10 {
  right: 83.33333333%; }

.col-xs-pull-9 {
  right: 75%; }

.col-xs-pull-8 {
  right: 66.66666667%; }

.col-xs-pull-7 {
  right: 58.33333333%; }

.col-xs-pull-6 {
  right: 50%; }

.col-xs-pull-5 {
  right: 41.66666667%; }

.col-xs-pull-4 {
  right: 33.33333333%; }

.col-xs-pull-3 {
  right: 25%; }

.col-xs-pull-2 {
  right: 16.66666667%; }

.col-xs-pull-1 {
  right: 8.33333333%; }

.col-xs-pull-0 {
  right: auto; }

.col-xs-push-12 {
  left: 100%; }

.col-xs-push-11 {
  left: 91.66666667%; }

.col-xs-push-10 {
  left: 83.33333333%; }

.col-xs-push-9 {
  left: 75%; }

.col-xs-push-8 {
  left: 66.66666667%; }

.col-xs-push-7 {
  left: 58.33333333%; }

.col-xs-push-6 {
  left: 50%; }

.col-xs-push-5 {
  left: 41.66666667%; }

.col-xs-push-4 {
  left: 33.33333333%; }

.col-xs-push-3 {
  left: 25%; }

.col-xs-push-2 {
  left: 16.66666667%; }

.col-xs-push-1 {
  left: 8.33333333%; }

.col-xs-push-0 {
  left: auto; }

.col-xs-offset-12 {
  margin-left: 100%; }

.col-xs-offset-11 {
  margin-left: 91.66666667%; }

.col-xs-offset-10 {
  margin-left: 83.33333333%; }

.col-xs-offset-9 {
  margin-left: 75%; }

.col-xs-offset-8 {
  margin-left: 66.66666667%; }

.col-xs-offset-7 {
  margin-left: 58.33333333%; }

.col-xs-offset-6 {
  margin-left: 50%; }

.col-xs-offset-5 {
  margin-left: 41.66666667%; }

.col-xs-offset-4 {
  margin-left: 33.33333333%; }

.col-xs-offset-3 {
  margin-left: 25%; }

.col-xs-offset-2 {
  margin-left: 16.66666667%; }

.col-xs-offset-1 {
  margin-left: 8.33333333%; }

.col-xs-offset-0 {
  margin-left: 0%; }

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left; }
  .col-sm-12 {
    width: 100%; }
  .col-sm-11 {
    width: 91.66666667%; }
  .col-sm-10 {
    width: 83.33333333%; }
  .col-sm-9 {
    width: 75%; }
  .col-sm-8 {
    width: 66.66666667%; }
  .col-sm-7 {
    width: 58.33333333%; }
  .col-sm-6 {
    width: 50%; }
  .col-sm-5 {
    width: 41.66666667%; }
  .col-sm-4 {
    width: 33.33333333%; }
  .col-sm-3 {
    width: 25%; }
  .col-sm-2 {
    width: 16.66666667%; }
  .col-sm-1 {
    width: 8.33333333%; }
  .col-sm-pull-12 {
    right: 100%; }
  .col-sm-pull-11 {
    right: 91.66666667%; }
  .col-sm-pull-10 {
    right: 83.33333333%; }
  .col-sm-pull-9 {
    right: 75%; }
  .col-sm-pull-8 {
    right: 66.66666667%; }
  .col-sm-pull-7 {
    right: 58.33333333%; }
  .col-sm-pull-6 {
    right: 50%; }
  .col-sm-pull-5 {
    right: 41.66666667%; }
  .col-sm-pull-4 {
    right: 33.33333333%; }
  .col-sm-pull-3 {
    right: 25%; }
  .col-sm-pull-2 {
    right: 16.66666667%; }
  .col-sm-pull-1 {
    right: 8.33333333%; }
  .col-sm-pull-0 {
    right: auto; }
  .col-sm-push-12 {
    left: 100%; }
  .col-sm-push-11 {
    left: 91.66666667%; }
  .col-sm-push-10 {
    left: 83.33333333%; }
  .col-sm-push-9 {
    left: 75%; }
  .col-sm-push-8 {
    left: 66.66666667%; }
  .col-sm-push-7 {
    left: 58.33333333%; }
  .col-sm-push-6 {
    left: 50%; }
  .col-sm-push-5 {
    left: 41.66666667%; }
  .col-sm-push-4 {
    left: 33.33333333%; }
  .col-sm-push-3 {
    left: 25%; }
  .col-sm-push-2 {
    left: 16.66666667%; }
  .col-sm-push-1 {
    left: 8.33333333%; }
  .col-sm-push-0 {
    left: auto; }
  .col-sm-offset-12 {
    margin-left: 100%; }
  .col-sm-offset-11 {
    margin-left: 91.66666667%; }
  .col-sm-offset-10 {
    margin-left: 83.33333333%; }
  .col-sm-offset-9 {
    margin-left: 75%; }
  .col-sm-offset-8 {
    margin-left: 66.66666667%; }
  .col-sm-offset-7 {
    margin-left: 58.33333333%; }
  .col-sm-offset-6 {
    margin-left: 50%; }
  .col-sm-offset-5 {
    margin-left: 41.66666667%; }
  .col-sm-offset-4 {
    margin-left: 33.33333333%; }
  .col-sm-offset-3 {
    margin-left: 25%; }
  .col-sm-offset-2 {
    margin-left: 16.66666667%; }
  .col-sm-offset-1 {
    margin-left: 8.33333333%; }
  .col-sm-offset-0 {
    margin-left: 0%; } }

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left; }
  .col-md-12 {
    width: 100%; }
  .col-md-11 {
    width: 91.66666667%; }
  .col-md-10 {
    width: 83.33333333%; }
  .col-md-9 {
    width: 75%; }
  .col-md-8 {
    width: 66.66666667%; }
  .col-md-7 {
    width: 58.33333333%; }
  .col-md-6 {
    width: 50%; }
  .col-md-5 {
    width: 41.66666667%; }
  .col-md-4 {
    width: 33.33333333%; }
  .col-md-3 {
    width: 25%; }
  .col-md-2 {
    width: 16.66666667%; }
  .col-md-1 {
    width: 8.33333333%; }
  .col-md-pull-12 {
    right: 100%; }
  .col-md-pull-11 {
    right: 91.66666667%; }
  .col-md-pull-10 {
    right: 83.33333333%; }
  .col-md-pull-9 {
    right: 75%; }
  .col-md-pull-8 {
    right: 66.66666667%; }
  .col-md-pull-7 {
    right: 58.33333333%; }
  .col-md-pull-6 {
    right: 50%; }
  .col-md-pull-5 {
    right: 41.66666667%; }
  .col-md-pull-4 {
    right: 33.33333333%; }
  .col-md-pull-3 {
    right: 25%; }
  .col-md-pull-2 {
    right: 16.66666667%; }
  .col-md-pull-1 {
    right: 8.33333333%; }
  .col-md-pull-0 {
    right: auto; }
  .col-md-push-12 {
    left: 100%; }
  .col-md-push-11 {
    left: 91.66666667%; }
  .col-md-push-10 {
    left: 83.33333333%; }
  .col-md-push-9 {
    left: 75%; }
  .col-md-push-8 {
    left: 66.66666667%; }
  .col-md-push-7 {
    left: 58.33333333%; }
  .col-md-push-6 {
    left: 50%; }
  .col-md-push-5 {
    left: 41.66666667%; }
  .col-md-push-4 {
    left: 33.33333333%; }
  .col-md-push-3 {
    left: 25%; }
  .col-md-push-2 {
    left: 16.66666667%; }
  .col-md-push-1 {
    left: 8.33333333%; }
  .col-md-push-0 {
    left: auto; }
  .col-md-offset-12 {
    margin-left: 100%; }
  .col-md-offset-11 {
    margin-left: 91.66666667%; }
  .col-md-offset-10 {
    margin-left: 83.33333333%; }
  .col-md-offset-9 {
    margin-left: 75%; }
  .col-md-offset-8 {
    margin-left: 66.66666667%; }
  .col-md-offset-7 {
    margin-left: 58.33333333%; }
  .col-md-offset-6 {
    margin-left: 50%; }
  .col-md-offset-5 {
    margin-left: 41.66666667%; }
  .col-md-offset-4 {
    margin-left: 33.33333333%; }
  .col-md-offset-3 {
    margin-left: 25%; }
  .col-md-offset-2 {
    margin-left: 16.66666667%; }
  .col-md-offset-1 {
    margin-left: 8.33333333%; }
  .col-md-offset-0 {
    margin-left: 0%; } }

@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left; }
  .col-lg-12 {
    width: 100%; }
  .col-lg-11 {
    width: 91.66666667%; }
  .col-lg-10 {
    width: 83.33333333%; }
  .col-lg-9 {
    width: 75%; }
  .col-lg-8 {
    width: 66.66666667%; }
  .col-lg-7 {
    width: 58.33333333%; }
  .col-lg-6 {
    width: 50%; }
  .col-lg-5 {
    width: 41.66666667%; }
  .col-lg-4 {
    width: 33.33333333%; }
  .col-lg-3 {
    width: 25%; }
  .col-lg-2 {
    width: 16.66666667%; }
  .col-lg-1 {
    width: 8.33333333%; }
  .col-lg-pull-12 {
    right: 100%; }
  .col-lg-pull-11 {
    right: 91.66666667%; }
  .col-lg-pull-10 {
    right: 83.33333333%; }
  .col-lg-pull-9 {
    right: 75%; }
  .col-lg-pull-8 {
    right: 66.66666667%; }
  .col-lg-pull-7 {
    right: 58.33333333%; }
  .col-lg-pull-6 {
    right: 50%; }
  .col-lg-pull-5 {
    right: 41.66666667%; }
  .col-lg-pull-4 {
    right: 33.33333333%; }
  .col-lg-pull-3 {
    right: 25%; }
  .col-lg-pull-2 {
    right: 16.66666667%; }
  .col-lg-pull-1 {
    right: 8.33333333%; }
  .col-lg-pull-0 {
    right: auto; }
  .col-lg-push-12 {
    left: 100%; }
  .col-lg-push-11 {
    left: 91.66666667%; }
  .col-lg-push-10 {
    left: 83.33333333%; }
  .col-lg-push-9 {
    left: 75%; }
  .col-lg-push-8 {
    left: 66.66666667%; }
  .col-lg-push-7 {
    left: 58.33333333%; }
  .col-lg-push-6 {
    left: 50%; }
  .col-lg-push-5 {
    left: 41.66666667%; }
  .col-lg-push-4 {
    left: 33.33333333%; }
  .col-lg-push-3 {
    left: 25%; }
  .col-lg-push-2 {
    left: 16.66666667%; }
  .col-lg-push-1 {
    left: 8.33333333%; }
  .col-lg-push-0 {
    left: auto; }
  .col-lg-offset-12 {
    margin-left: 100%; }
  .col-lg-offset-11 {
    margin-left: 91.66666667%; }
  .col-lg-offset-10 {
    margin-left: 83.33333333%; }
  .col-lg-offset-9 {
    margin-left: 75%; }
  .col-lg-offset-8 {
    margin-left: 66.66666667%; }
  .col-lg-offset-7 {
    margin-left: 58.33333333%; }
  .col-lg-offset-6 {
    margin-left: 50%; }
  .col-lg-offset-5 {
    margin-left: 41.66666667%; }
  .col-lg-offset-4 {
    margin-left: 33.33333333%; }
  .col-lg-offset-3 {
    margin-left: 25%; }
  .col-lg-offset-2 {
    margin-left: 16.66666667%; }
  .col-lg-offset-1 {
    margin-left: 8.33333333%; }
  .col-lg-offset-0 {
    margin-left: 0%; } }

.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
  content: " ";
  display: table;
  box-sizing: border-box; }

.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
  clear: both;
  box-sizing: border-box; }

/***********************/
/***Side bar
/***********************/
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 4em;
  background-color: #222;
  z-index: 100; }

.sidebar ul {
  /* padding: 2em 0; */ }

.sidebar li {
  position: relative;
  cursor: pointer;
  width: 100%;
  color: #fff;
  background: url(/images/sidebar-notification.png) center center no-repeat;
  background-image: none;
  background-size: 1.8em;
  text-align: center;
  border-bottom: solid 1px rgba(204, 204, 204, 0.14); }

.sidebar li:hover {
  opacity: 0.8;
  background-color: #333; }

.sidebar .no {
  display: block;
  position: absolute;
  top: 45%;
  right: 15%;
  width: 1.5em;
  height: 1.5em;
  background-color: #7bd532;
  border-radius: 100%;
  color: #fff;
  text-indent: 0;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.6em; }

.sidebar .notification {
  background-image: url(/images/sidebar-notification.png); }

.sidebar .logo {
  height: 4em;
  background-color: #94c64a; }

.sidebar .profile {
  padding: 0.5em 0; }

.sidebar .profile img {
  margin: -1em auto 0.5em;
  display: block;
  width: 3em;
  height: 3em;
  vertical-align: top;
  border-radius: 5px; }

.sidebar .profile img + span {
  display: block;
  padding: 0 0.5em; }

.sidebar .missions {
  text-indent: -9999px;
  height: 4em;
  background-image: url(/images/sidebar-missions.png); }

.sidebar .leaderboard {
  text-indent: -9999px;
  height: 4em;
  background-image: url(/images/sidebar-achievements.png); }

.sidebar .belt {
  text-indent: -9999px;
  height: 4em;
  background-image: url(/images/sidebar-belts.png); }

.sidebar .backToDashboard {
  position: absolute;
  bottom: 0px;
  display: block;
  width: 50px;
  height: 50px;
  background-image: url(/images/test-input-arrow.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px; }

.sidebar-content {
  position: absolute;
  top: 0;
  left: 4em;
  bottom: 0;
  background-color: #fff;
  width: 16em;
  z-index: 99;
  color: #000;
  /* border-right: solid 1px #ddd; */
  box-shadow: 4px 0 4px -1px rgba(0, 0, 0, 0.32);
  transition: all 0.3s ease;
  -webkit-transform: translate(-26em, 0);
          transform: translate(-26em, 0); }

.sidebar-content.open {
  transition: all 0.3s ease;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0); }

.sidebar-content .title {
  position: relative;
  height: 2em;
  padding: 1em; }

.sidebar-content .title b {
  position: absolute;
  bottom: 0.5em; }

.sidebar-content .sub-title {
  color: #999;
  font-size: 0.8em;
  line-height: 1.5em;
  padding: 1em 1.2em;
  border-top: solid 1px #eee; }

.sidebar-content > .image {
  height: 8em;
  background-color: #c4ebfe;
  overflow: hidden; }

.sidebar-content .desc {
  padding: 1em;
  font-size: 0.8em;
  line-height: 1.5em; }

.sidebar-content ul {
  font-size: 0.9em;
  line-height: 1.5em;
  list-style: none;
  max-height: 37em;
  overflow-x: hidden; }

.sidebar-content ul li {
  position: relative;
  border-bottom: solid 1px #eee;
  clear: both;
  padding: 1em 0; }

.sidebar-content .no-mission {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 1; }

.sidebar-content .no-mission .text {
  background: url(../images/sidebar-no-mission.png) center top no-repeat;
  background-size: 8em;
  position: absolute;
  top: 20%;
  padding: 1em;
  padding-top: 9em;
  color: #999; }

.sidebar-content.mission > .image {
  position: relative; }

.sidebar-content.mission > .image img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  max-width: inherit;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }

.sidebar-content.mission ul ul li.clickme {
  cursor: pointer; }

.sidebar-content.mission li.active {
  background-color: #f1f2f3; }

.sidebar-content.mission ul ul li .icon-tick {
  position: absolute;
  display: block;
  top: 0.8em;
  left: 0em;
  width: 1.8em;
  height: 1.8em;
  background: url(/images/challenge-icon-mission-tick.png) center -1.6em no-repeat;
  background-size: 1.6em;
  color: #aaa;
  text-align: center;
  line-height: 2.2em;
  font-family: arial; }

.sidebar-content.mission ul ul li.done .icon-tick {
  background-position: 0 0;
  text-indent: -99999999px; }

.sidebar-content.mission ul ul li .text {
  padding-left: 2.5em; }

.sidebar-content.mission li .list {
  clear: both;
  padding: 1em 1.5em;
  display: none; }

.sidebar-content.mission li.active .list {
  display: block; }

.sidebar-content.mission li .list:first-child {
  display: block; }

.sidebar-content.mission li.lock {
  cursor: default; }

.sidebar-content.mission li.lock .list:first-child {
  background: url(/images/challenge-icon-mission-lock.png) 90% center no-repeat;
  background-size: 2em; }

.sidebar-content.mission li .list ul {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease; }

.sidebar-content.mission li .list-title {
  clear: both;
  font-size: 0.9em; }

.sidebar-content.mission li .list-title:after {
  content: "";
  display: table;
  clear: both; }

.sidebar-content.mission li .list.open ul {
  max-height: 30em;
  transition: all 0.3s ease; }

.sidebar-content.mission li .list .col-left {
  width: 3em; }

.sidebar-content.mission li .list .icon {
  width: 3em; }

.sidebar-content.belt > .image {
  position: relative; }

.sidebar-content.belt > .image .icon-belt {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 1em;
  -webkit-transform: scale(1.5) translate(-50%, -50%);
          transform: scale(1.5) translate(-50%, -50%); }

.sidebar-content.belt ul {
  background-color: #f1f2f3;
  max-height: 28em; }

.sidebar-content.belt ul::-webkit-scrollbar {
  width: 8px;
  /* for vertical scrollbars */ }

.sidebar-content.belt ul::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); }

.sidebar-content.belt ul::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); }

.sidebar-content.belt li {
  cursor: pointer;
  padding: 0.7em 1em; }

.sidebar-content.belt li:hover {
  opacity: 0.8; }

.sidebar-content.belt .step-progress {
  padding-top: 1em; }

.sidebar-content.belt .step-progress .progress {
  height: 6px; }

.sidebar-content.belt .step-progress .progress li {
  clear: inherit; }

.sidebar-content.belt .col-left {
  width: 3.5em;
  height: 3.5em; }

.sidebar-content.belt li .list:after {
  content: "";
  display: table;
  clear: both; }

.sidebar-content.belt .icon {
  position: relative; }

.sidebar-content.belt .lock:hover,
.sidebar-content.belt .lock {
  cursor: default;
  opacity: 1; }

.sidebar-content.belt .lock .icon:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(/images/locked_game.png) center top no-repeat;
  background-size: contain; }

.sidebar-content.profile {
  background-color: #1a1919;
  color: rgba(255, 255, 255, 0.83);
  width: 20em; }

.sidebar-content.profile .header {
  text-align: center;
  padding: 1em 0; }

.sidebar-content.profile .header .img-holder {
  width: 6em;
  height: 6em;
  border: solid 0.3em #ececec;
  margin: 0 auto 1em; }

@media (max-height: 650px) {
  .sidebar-content.profile .content {
    max-height: 28em;
    overflow-x: hidden; }
  .sidebar-content.profile .content::-webkit-scrollbar {
    width: 8px;
    /* for vertical scrollbars */ }
  .sidebar-content.profile .content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); }
  .sidebar-content.profile .content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.6); } }

.sidebar-content.profile .content .item {
  border-top: solid 1px #343e23;
  padding: 1em; }

.sidebar-content.profile .content .item a {
  display: block;
  text-align: right;
  padding: 0.5em 0 0;
  font-size: 0.8em; }

.sidebar-content.profile .content .belt-icon-holder {
  margin-left: -1em;
  margin-right: -1em; }

.sidebar-content.profile .content .belt-icon-holder .icon-belt {
  cursor: pointer;
  display: inline-block;
  margin-right: -1em;
  margin-bottom: -1em; }

.sidebar-content.profile .content .belt-icon-holder .icon-belt.lock {
  cursor: default;
  opacity: 0.1; }

.sidebar-content.profile .content .icon-holder {
  margin: 0.8em 0 -0.5em; }

.sidebar-content.profile .content .icon-holder img {
  cursor: pointer;
  width: 2.2em;
  margin-right: 0.3em;
  margin-bottom: 0.4em; }

.sidebar-content.profile .content .icon-holder .lock {
  cursor: default;
  opacity: 0.1; }

.sidebar-content .col-left {
  position: relative;
  float: left;
  width: 5em; }

.sidebar-content .img-holder {
  width: 2em;
  height: 2em;
  border-radius: 100%;
  overflow: hidden;
  margin: 0.5em auto; }

.sidebar-content .img-holder.single {
  width: 3em;
  height: 3em; }

.sidebar-content .symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  border-radius: 100%;
  width: 2em;
  height: 2em;
  line-height: 2.2em;
  font-size: 0.7em;
  text-align: center;
  box-shadow: 0 0 1px #ccc;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.sidebar-content .col-right {
  padding-left: 4em; }

.sidebar-content .col-right .text {
  padding-right: 0.5em;
  display: table-cell;
  vertical-align: middle;
  height: 3.5em; }

.sidebar-content .text b + p {
  color: #999;
  font-size: 0.9em; }

.sidebar-content .text .button-green {
  padding: 0.2em 0.5em;
  border-radius: 2px; }

.sidebar-content .text .button-green.white {
  box-shadow: 0 0 1px #666; }

.sidebar-content .text .button-green.red {
  background-color: #d81031;
  border-color: #d81031; }

.sidebar-content .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 1em;
  z-index: 2; }

.sidebar-content.profile .footer .button-green {
  background-color: #232323;
  border-color: #232323;
  color: #696969; }

.sidebar-content .footer .button-green {
  display: block; }

.callout {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20em;
  background-color: #f1f5f8;
  border-radius: 4px;
  padding: 1em;
  z-index: 100;
  box-shadow: 0 1px 1px #ccc; }

.callout .content:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  margin-top: -10px;
  border: solid 10px transparent;
  border-right-color: #F1F5F8;
  z-index: 1; }

.callout .header {
  border-bottom: solid 1px #ccc;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em; }

.callout .content p {
  font-size: 0.8em;
  line-height: 1.5em; }

/***********************/
/*** Learder board
/***********************/
.leader-board {
  position: relative;
  width: 54.28em;
  margin: 0 auto;
  padding: 8em 0 1em;
  opacity: 0;
  display: none;
  -webkit-transform: translate3d(0, -3000px, 0);
          transform: translate3d(0, -3000px, 0);
  /*  z-index: 10; */ }

.leader-board.animate {
  display: block;
  -webkit-animation: bounceInUp 1s 0s ease forwards;
          animation: bounceInUp 1s 0s ease forwards; }

.leader-holder {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px #ccc; }

.leader-holder .title {
  padding: 1em 1.1em;
  font-size: 0.9em; }

.leader-holder .title span {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  margin: 0 0.5em; }

.leader-holder .title span.active,
.leader-holder .title span:hover {
  color: #000;
  font-weight: bold; }

.leader-holder .content {
  list-style: none;
  background-color: #f9fafa; }

.leader-holder .content li {
  padding: 0.8em 1em;
  border-top: solid 1px #ddd; }

.leader-holder .col-left,
.leader-holder .col-right {
  display: inline-block;
  vertical-align: top;
  margin-right: -4px;
  width: 50%; }

.leader-holder .col-left .no {
  float: left;
  text-align: center;
  width: 5em;
  line-height: 3em; }

.leader-holder .col-left .list {
  padding-left: 5em; }

.leader-holder .col-left .img-holder {
  float: left;
  width: 2.8em;
  height: 2.8em;
  border-radius: 100%;
  overflow: hidden;
  margin-right: 1em;
  line-height: 2.6em;
  border: solid 2px #ddd;
  /* background: url(/images/leaderboard-user.jpg) center center no-repeat; */ }

.leader-holder .col-left .img-holder img {
  vertical-align: middle; }

.leader-holder .col-left .text {
  display: table-cell;
  vertical-align: middle;
  height: 3em; }

.leader-holder .col-right {
  text-align: right; }

.leader-holder .col-right .text {
  line-height: 3em; }

.leader-holder .flag {
  height: 1.2em;
  vertical-align: middle;
  margin-left: 1em; }

.leader-holder .content li {
  font-size: 0.8em; }

.leader-holder .list-loading {
  margin: -1em auto;
  line-height: 0.7em;
  cursor: pointer;
  text-align: center;
  padding: 1.5em 0; }

.leader-holder .list-loading .dot {
  display: inline-block;
  vertical-align: top;
  width: 0.7em;
  height: 0.7em;
  background-color: #ccc;
  border-radius: 100%;
  margin: 0 0.2em; }

/***********************/
/*** Challenge mode
/***********************/
.challenge-mode {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  width: 25em;
  border-radius: 4px;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: hidden; }

.challenge-mode .header {
  padding: 1em;
  border-bottom: solid 1px #ddd; }

.challenge-mode .content > div {
  cursor: pointer;
  display: block;
  line-height: 6em;
  background-color: #f9fafa; }

.challenge-mode .content > div:first-child {
  border-bottom: solid 1px #ddd; }

.challenge-mode .content > div:hover {
  opacity: 0.8; }

/***********************/
/*** Challenge find opponent
/***********************/
.challenge-opponent {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  width: 40em;
  border-radius: 4px;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: hidden;
  min-height: 23em; }

.challenge-opponent .header {
  padding: 2em; }

.challenge-opponent .content {
  position: relative;
  max-height: 20em;
  transition: all 0.3s ease; }

.challenge-opponent .content.hidden {
  opacity: 0;
  max-height: 0;
  visibility: hidden;
  transition: all 0.3s ease; }

.challenge-opponent .content:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: solid 1px #ddd; }

.challenge-opponent .content .text {
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
  height: 16em;
  width: 20em;
  /* background-color: #f9fafa; */ }

.challenge-opponent .img-holder {
  width: 8em;
  height: 8em;
  border-radius: 100%;
  overflow: hidden;
  margin: 0 auto 1em;
  border: solid 2px #ddd; }

.challenge-opponent .symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  border: solid 2px #ddd;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 3em;
  height: 3em;
  line-height: 3em;
  border-radius: 100%;
  background-color: #fff;
  z-index: 1; }

.challenge-opponent .footer {
  padding: 2em 3em; }

.challenge-opponent .footer input {
  display: block;
  border: none;
  border-bottom: solid 1px #ddd;
  line-height: 2em;
  width: 100%;
  outline: none;
  background: url(/images/challenge-icon-search.png) left center no-repeat;
  background-size: 1em;
  padding-left: 2em;
  box-sizing: border-box; }

.challenge-opponent .list {
  text-align: left;
  padding: 0.5em 0;
  border-bottom: solid 1px #eee;
  /* display: none; */ }

.challenge-opponent .list .img-holder {
  float: left;
  width: 2em;
  height: 2em;
  margin-right: 1em; }

.challenge-opponent .list .text {
  display: table-cell;
  vertical-align: middle;
  height: 2em; }

.challenge-opponent .list .text b + p {
  font-size: 0.8em; }

.challenge-opponent .list .text .flag {
  width: 1.5em;
  vertical-align: middle;
  margin-left: 0.5em; }

/************************/
/****** Challenge game
/************************/
.challenge-game {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; }

.challenge-game .profile {
  position: absolute;
  top: 2em;
  left: 2em;
  /* min-width: 30em; */ }

.challenge-game .profile .img-holder {
  width: 5em;
  height: 5em;
  border: solid 2px #ddd;
  border-radius: 100%;
  overflow: hidden;
  margin-right: 1em;
  float: left; }

.challenge-game .profile .text {
  display: table-cell;
  height: 5em;
  vertical-align: middle;
  /* line-height:1.2em; */ }

.challenge-game .profile small {
  color: #fff; }

.challenge-game .profile.right {
  left: auto;
  right: 2em; }

.challenge-game .profile.right .img-holder {
  float: right;
  margin-right: 0;
  margin-left: 1em; }

.challenge-game .timer {
  position: absolute;
  top: 2em;
  left: 50%;
  border: solid 3px rgba(255, 255, 255, 0.19);
  border-radius: 100%;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  color: #fff;
  font-weight: bold;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }

.challenge-game .timer:after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  bottom: -3px;
  right: -3px;
  border: solid 3px transparent;
  border-radius: 100%;
  border-top-color: #fff;
  -webkit-animation: ani-timer 1s linear infinite;
          animation: ani-timer 1s linear infinite; }

/*******************************/
/*** Challenge result
/*******************************/
@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.tada {
  -webkit-animation: tada 1s ease forwards;
          animation: tada 1s ease forwards; }

.challenge-result {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40em;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  color: #ccc; }

.challenge-result.animate {
  -webkit-animation: bounceInDown 1s 300ms ease forwards;
          animation: bounceInDown 1s 300ms ease forwards; }

.challenge-result .header {
  padding: 2em 0; }

.challenge-result h1 {
  font-size: 2em;
  font-weight: 300;
  line-height: 1.5em; }

.challenge-result .content {
  position: relative; }

.challenge-result .content:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: solid 1px rgba(221, 221, 221, 0.25); }

.challenge-result .symbol {
  position: absolute;
  top: 20%;
  left: 50%;
  border: solid 3px #ddd;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 3em;
  height: 3em;
  line-height: 3em;
  border-radius: 100%;
  background-color: #070707;
  z-index: 1; }

.challenge-result .content .col-left,
.challenge-result .content .col-right {
  display: table-cell;
  vertical-align: middle;
  /* height: 20em; */
  width: 20em; }

.challenge-result .footer {
  padding: 2em 0; }

.game-divider {
  margin: 2em 1em; }

.challenge-result .game-divider a {
  padding: 0.5em 0;
  display: inline-block;
  text-decoration: underline;
  font-size: 1.1em; }

.challenge-result .game-divider a:hover {
  opacity: 0.8; }

.outer-box {
  margin: 1em 0; }

.challenge-result-box {
  display: inline-block;
  padding: 0em 0.5em;
  /* border-right: solid 1px rgba(255, 255, 255, 0.3); */
  min-width: 6em; }

.challenge-result-box:last-child {
  border-right: none; }

.challenge-result-box > small {
  color: #93c60b;
  font-size: 1em; }

.challenge-result-box > p {
  font-size: 2em;
  line-height: 1.2em;
  font-weight: 300; }

.challenge-result-box > p img {
  width: 1em;
  vertical-align: middle; }

.outer-box .box {
  display: inline-block;
  width: 32%;
  height: 50px;
  background-color: #fff; }

.challenge-result .img-holder {
  width: 7.5em;
  height: 7.5em;
  margin: auto;
  /* background-color: #f1f1f1; */
  border-radius: 100%;
  /* margin: 0.5em auto 0;
  border: solid 2px #fff; */
  overflow: hidden;
  border: solid 0.4em rgba(255, 255, 255, 0.85);
  line-height: 7em; }

.challenge-result .img-holder img {
  vertical-align: middle; }

.challenge-result .img-holder {
  margin-bottom: 0.5em; }

@keyframes ani-stage {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.challenge-star-holder .img-holder,
.challenge-result .button-green,
.challenge-result .challenge-result-box {
  opacity: 0; }

.challenge-result .button-green {
  min-width: 10em; }

.challenge-result .challenge-result-box {
  border: none;
  min-width: 6em; }

.challenge-result .preview {
  -webkit-animation: ani-stage 500ms ease 0.5s forwards;
          animation: ani-stage 500ms ease 0.5s forwards; }

.challenge-result .preview1 {
  -webkit-animation: ani-stage 500ms ease 1s forwards;
          animation: ani-stage 500ms ease 1s forwards; }

.challenge-star-holder .preview2 {
  -webkit-animation: ani-stage 500ms ease 1s forwards;
          animation: ani-stage 500ms ease 1s forwards; }

.challenge-result .preview3 {
  -webkit-animation: ani-stage 500ms ease 1.2s forwards;
          animation: ani-stage 500ms ease 1.2s forwards; }

.challenge-result .preview4 {
  -webkit-animation: ani-stage 500ms ease 1.5s forwards;
          animation: ani-stage 500ms ease 1.5s forwards; }

.challenge-result .preview5 {
  -webkit-animation: ani-stage 500ms ease 1.8s forwards;
          animation: ani-stage 500ms ease 1.8s forwards; }

.challenge-result .preview8 {
  -webkit-animation: ani-stage 500ms ease 1.8s forwards;
          animation: ani-stage 500ms ease 1.8s forwards; }

.challenge-result .preview10 {
  -webkit-animation: ani-stage 500ms ease 1.4s forwards;
          animation: ani-stage 500ms ease 1.4s forwards; }

.challenge-star-holder {
  margin-top: 1em;
  border: none; }

.challenge-star-holder .name {
  opacity: 0; }

.challenge-star-holder .stars {
  margin-top: -1em;
  margin-bottom: -1em;
  opacity: 0; }

.challenge-result .star {
  display: inline-block;
  vertical-align: middle;
  width: 6.57em;
  height: 6.57em;
  background: url(/images/game-over-star.png) 0 -6.57em no-repeat;
  background-size: 6.57em;
  margin: -1em -2.5em;
  -webkit-transform: scale(0.5);
          transform: scale(0.5); }

@keyframes ani-star {
  0%, 100% {
    -webkit-transform: scale(0.5) rotate(0);
            transform: scale(0.5) rotate(0); }
  20% {
    -webkit-transform: scale(1) rotate(45deg);
            transform: scale(1) rotate(45deg); } }

.challenge-result .star.done {
  background-position: 0 0;
  -webkit-animation: ani-star 300ms ease 1.2s forwards;
          animation: ani-star 300ms ease 1.2s forwards; }

.challenge-result .star.done + .star.done {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s; }

.challenge-result .star.done + .star.done + .star.done {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s; }

.challenge-result-box.bonus {
  /* min-width: 250px; */ }

.challenge-result-box.bonus small {
  display: block;
  padding: 0.5em 1em; }

.best-score .img-holder {
  width: 2.5em;
  height: 2.5em;
  display: inline-block;
  vertical-align: middle;
  border: none; }

.best-score p {
  display: inline-block;
  vertical-align: middle;
  padding-left: 0.5em; }

.challenge-result-pending .text {
  display: table-cell;
  vertical-align: middle;
  height: 11em;
  opacity: 0;
  color: #999; }

.challenge-result.ranking .content:after {
  display: none; }

.challenge-result .ranking {
  text-align: left;
  list-style: none;
  opacity: 0; }

.challenge-result .ranking li {
  position: relative;
  padding: 0.5em 0;
  clear: both; }

.challenge-result .ranking .load {
  /* cursor: pointer; */
  margin-left: -2em;
  padding-left: 1.25em; }

.challenge-result .ranking .load .dot {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  border: solid 1px #ccc;
  margin: 0 0.1em; }

.challenge-result .ranking .img-holder {
  width: 2.5em;
  height: 2.5em;
  border-width: 2px;
  line-height: 2.2em;
  float: left;
  margin-right: 1em;
  margin-left: -1.3em;
  position: relative;
  z-index: 2;
  background-color: #070706; }

.challenge-result .ranking .text {
  font-size: 0.9em;
  line-height: 1.3em;
  display: table-cell;
  vertical-align: middle;
  height: 3em; }

.challenge-result .ranking li.active .img-holder {
  width: 4em;
  height: 4em;
  line-height: 4em;
  margin-left: -2.1em; }

.challenge-result .ranking li.active .text {
  height: 4.5em; }

.challenge-result .ranking li.active .notice {
  position: absolute;
  top: 0;
  left: -70%;
  background: url(/images/challenge-icon-up.png) 90% center no-repeat;
  background-size: 1.3em;
  background-color: #151515;
  border: solid 1px #333;
  border-radius: 4px;
  padding: 0.5em 1em;
  padding-right: 3em;
  width: 8em;
  color: #93c328;
  font-size: 0.9em;
  margin-top: 1em; }

/***********************/
/*** Challenge Top 1 user
/***********************/
.challenge-top {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  width: 40em;
  border-radius: 4px;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: hidden; }

.challenge-top .header {
  padding: 1.5em; }

.challenge-top .content {
  padding: 1em;
  padding-top: 0; }

.challenge-top .content .content-holder {
  position: relative;
  height: 12em;
  background-color: #c4ebfe;
  margin-bottom: 1em;
  padding: 2em 0; }

.challenge-top .content .bg-yellow {
  background-color: #ffc600; }

.challenge-top .content .img-holder {
  width: 8em;
  height: 8em;
  line-height: 8em;
  border-radius: 100%;
  overflow: hidden;
  border: solid 2px rgba(255, 255, 255, 0.74);
  margin: 1em auto; }

.challenge-top .content .flag {
  width: 1.5em;
  vertical-align: middle; }

.challenge-top .content .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(/images/challenge-icon-top1.png) center center no-repeat;
  background-size: 5em;
  width: 5em;
  height: 10em;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.challenge-top .footer {
  padding: 1em 1em 2em; }

/***************************************/
/*****challenge mission******/
/***************************************/
.challenge-mission {
  position: relative;
  width: 70%;
  margin: 0 auto;
  padding: 8em 0 0em;
  opacity: 0;
  min-height: 40em;
  display: none;
  -webkit-transform: translate3d(0, -3000px, 0);
          transform: translate3d(0, -3000px, 0);
  /* z-index: 10; */ }

.challenge-mission.animate {
  display: block;
  -webkit-animation: bounceInUp 1s 0s ease forwards;
          animation: bounceInUp 1s 0s ease forwards; }

/***overview page***/
.mission-overview {
  position: relative;
  /*background-color:#f1f2f3;*/
  padding: 2em 3em 5em; }

.mission-overview:after {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  bottom: 0;
  /* height: 80%; */
  border-left: solid 1px #ccc; }

.mission-overview .header {
  text-align: center;
  width: 70%;
  margin: 0 auto;
  color: white; }

.mission-overview .header h2 {
  font-weight: bold;
  padding-bottom: 0.5em; }

.mission-overview .box {
  position: relative;
  background-color: #fff;
  border-radius: 4px;
  margin: 1em auto;
  overflow: hidden;
  text-align: center;
  /*box-shadow: 0 2px 3px #ccc;*/
  box-shadow: 0 2px 3px #000;
  max-width: 20em;
  z-index: 1; }

.mission-overview .box .header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.3em 1em;
  background-color: #222222;
  color: #fff;
  z-index: 1;
  width: inherit; }

.mission-overview .box .header .status {
  padding-left: 1.5em;
  background: url(/images/challenge-icon-mission-book.png) left center no-repeat;
  background-size: 1em;
  display: none; }

.mission-overview .box .header .dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 100%;
  border: solid 1px #fff; }

.mission-overview .row {
  position: relative;
  margin-top: 3em; }

.mission-overview .row.lock:before {
  content: "";
  position: absolute;
  top: -2.5em;
  left: 50%;
  width: 2em;
  margin-left: -1em;
  height: 2em;
  background: url(/images/challenge-icon-mission-lock.png) center center no-repeat;
  background-size: 2em;
  z-index: 1; }

.mission-overview .lock .box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  right: -1px;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 1; }

.mission-overview .box .img-holder {
  height: 8em;
  background-color: #6C6C6C;
  text-align: center;
  position: relative;
  overflow: hidden; }

.mission-overview .box .img-holder img {
  max-width: inherit;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%); }

.mission-overview .box .lock-content {
  display: none; }

.mission-overview .lock .box .lock-content {
  display: block; }

.mission-overview .lock .box .unlock-content {
  display: none; }

.mission-overview .box .text {
  padding: 0.5em 1em;
  display: table-cell;
  vertical-align: middle;
  height: 3em;
  width: 33.33%; }

.mission-overview .box .text p {
  color: #999;
  font-size: 0.8em;
  line-height: 1.5em;
  padding-top: 0.3em; }

.mission-overview .box .button-green {
  display: block;
  border-radius: 0;
  margin: 0; }

.mission-overview .box .button-green.completed {
  display: inline-block;
  border-radius: 5em;
  padding: 0.3em 1.5em;
  padding-right: 2.5em;
  margin: 0 0 0.9em;
  background: url(../images/challenge-icon-mission-completed.png) 90% center no-repeat;
  background-color: #93c60b;
  background-size: 0.8em; }

.mission-overview .box .step-progress {
  position: relative;
  display: block;
  height: 3em;
  text-align: center; }

.mission-overview .box .step-progress .progress {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.mission-overview .box.multiple {
  padding-bottom: 0.3em; }

.mission-overview .box.multiple .content {
  box-shadow: 0 2px 3px #999;
  border-radius: 0 0 4px 4px;
  overflow: hidden; }

/***mission callout***/
.mission-callout {
  position: absolute;
  top: 7em;
  left: 50%;
  background-color: #fff;
  padding: 1em;
  width: 20em;
  margin-left: -11em;
  box-shadow: 0 0 1px #ddd;
  text-align: center;
  z-index: 2; }

.mission-callout.animate {
  -webkit-animation: fadeInUpSmall 1s ease forwards;
          animation: fadeInUpSmall 1s ease forwards; }

.mission-callout:after {
  content: "";
  border: solid 10px transparent;
  border-top-color: #fff;
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -10px; }

.mission-callout .header {
  font-size: 0.8em;
  border-bottom: solid 1px #eee;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em; }

.mission-callout .text {
  font-size: 0.75em;
  line-height: 1.5em;
  color: #999; }

/***individual page***/
.mission-individual {
  background-color: #f1f2f3;
  margin-right: -1em; }

.mission-individual.bg-white {
  background-color: #fff; }

.mission-individual .banner {
  margin-bottom: -0.2em;
  /* overflow: hidden; */
  position: relative; }

.mission-individual .banner .back {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1em;
  color: #fff;
  cursor: pointer; }

.mission-individual .banner .back:hover {
  opacity: 0.8; }

.mission-individual .mission-status .title {
  font-size: 1.3em;
  padding: 1em;
  padding-left: 1.5em;
  display: block; }

.mission-individual .mission-status .progress {
  /* height:0.5em; */
  margin: 1.6em 1em;
  margin-right: 2em;
  /* background-color: #fff; */
  float: right; }

.step-progress .progress {
  /* margin: 22px 0 0 0px; */
  height: 12px;
  background-color: #d5d5d5;
  background-repeat: no-repeat;
  background-image: linear-gradient(#b5b5b5, #d5d5d5 25%, #d5d5d5);
  border-radius: 9px;
  /* border: 1px solid #b6b6b6; */
  padding: 0;
  list-style: none;
  float: left;
  box-shadow: 0 1px 0 #fff; }

.step-progress .progress li {
  border-left: 1px solid #b6b6b6;
  float: left;
  height: 12px;
  padding: 0;
  width: 16px; }

.step-progress .progress li:first-child {
  margin-left: -1px;
  border-left: 1px solid #5f9500;
  border-radius: 9px 0 0 9px; }

.step-progress .progress li.correct {
  border: 1px solid #5f9500;
  border-left: none;
  background-color: #6fae05;
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #87c620, #6fae05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  margin: -1px 0; }

.step-progress .progress li.wrong {
  border: 1px solid #950000;
  border-left: none;
  background-color: #AE0505;
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #C62020, #AE0505);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  margin: -1px 0; }

.step-progress .progress li:last-child {
  border-right: none; }

.mission-individual:last-child {
  padding: 1em 0 2em;
  /* min-height: 20em; */ }

.mission-individual .box {
  background-color: #fff;
  margin: 1em;
  margin-left: 2em;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px #ccc; }

.mission-individual .header {
  position: relative;
  padding: 1em;
  min-height: 5em; }

.mission-individual .header .img-holder {
  position: absolute;
  top: 1.5em;
  left: 1em;
  width: 3.5em;
  height: 3.5em; }

.mission-individual .header .text {
  padding-left: 4.5em; }

.mission-individual .header .text p {
  font-size: 0.8em;
  line-height: 1.5em; }

.mission-individual .body {
  background-color: #f9fafa;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease; }

.mission-individual .body.open {
  max-height: 50em;
  transition: all 0.3s ease; }

.mission-individual .body ul {
  list-style: none; }

.mission-individual .body li {
  padding: 0em 0.5em;
  border-top: solid 1px #f1f1f1;
  position: relative; }

.mission-individual .body li .icon-tick {
  position: absolute;
  top: 0.9em;
  left: 2em;
  width: 1.5em;
  height: 1.5em;
  background: url(/images/challenge-icon-mission-tick.png) center -1.8em no-repeat;
  background-size: 1.5em;
  color: #aaa;
  text-align: center;
  line-height: 1.4em; }

.mission-individual .body li.done .icon-tick {
  background-position: 0 0;
  text-indent: -99999999px; }

.mission-individual .body li .text {
  padding-left: 5em; }

.mission-individual .body li .text p {
  font-size: 0.8em;
  line-height: 1.5em;
  font-weight: bold;
  cursor: pointer;
  padding: 1.4em 0; }

.mission-individual .body li .text .description {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  padding-bottom: 1em; }

.mission-individual .body li.expand .text .description {
  transition: all 0.3s ease; }

.mission-individual .body li .text .description p {
  font-weight: 300;
  padding: 0;
  padding-bottom: 0.5em;
  cursor: default; }

.mission-individual .body li .text .description .button-green {
  font-size: 0.8em;
  /* margin: 0; */
  padding: 0.3em 1em; }

.mission-individual .footer {
  position: relative;
  cursor: pointer;
  padding: 1em;
  padding-left: 2em;
  font-size: 0.8em;
  border-top: solid 1px #F1F1F1;
  background-color: #f9fafa; }

.mission-individual .footer .arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 4em;
  height: 100%;
  background: url(/images/challenge-icon-mission-arrowdown.png) center center no-repeat;
  background-size: 1em;
  transition: all 0.3s ease;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

.mission-individual .footer.active .arrow {
  transition: all 0.3s ease;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg); }

.mission-individual .footer.lock {
  cursor: default; }

.mission-individual .lock .arrow {
  background-image: url(/images/challenge-icon-mission-lock.png);
  background-size: 2em;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg); }

.mission-individual .widget {
  margin: 1em;
  margin-right: 2em;
  margin-left: -0.5em;
  padding: 1em; }

.mission-individual .widget ul {
  font-size: 0.8em;
  line-height: 1.5em;
  list-style: none;
  padding-left: 1.4em; }

.mission-individual .widget li {
  position: relative;
  padding: 0.5em 0;
  background: url(/images/challenge-icon-mission-widgettick.png) left 1.2em no-repeat;
  background-size: 1em;
  padding-left: 1.5em;
  margin-left: -1.5em; }

.mission-individual .widget p {
  font-size: 0.8em;
  line-height: 1.5em;
  padding-bottom: 1em; }

.mission-individual .step-teaser {
  font-size: 0.8em; }

.mission-individual .step-teaser .button {
  padding: 1px;
  display: block; }

/***************************************/
/*****Mission sound pop up******/
/***************************************/
.mission-sound {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30em;
  margin-left: -15em;
  margin-top: -19.75em;
  opacity: 0;
  background-color: #EAEAEA;
  border-radius: 10px;
  -webkit-animation: fadeInUp 1s ease forwards;
          animation: fadeInUp 1s ease forwards;
  overflow: hidden; }

.mission-sound .content .banner {
  height: 23em;
  background: url(/images/challenge-icon-mission-sound.png) center top no-repeat;
  background-size: cover; }

.mission-sound .content .text {
  padding: 1em; }

.mission-sound .content .text p {
  font-size: 0.8em;
  line-height: 1.5em; }

.mission-sound .footer {
  position: relative;
  padding: 1em; }

.mission-sound .footer .time {
  position: absolute;
  top: 2em;
  left: 1.2em;
  font-size: 0.8em; }

.mission-sound .footer .time.last {
  position: absolute;
  top: 2em;
  left: auto;
  right: 1.2em; }

.mission-sound .footer .progress {
  height: 0.3em; }

.mission-sound .footer .player {
  text-align: center;
  padding-top: 1em; }

.mission-sound .footer .player .button {
  cursor: pointer;
  display: inline-block;
  width: 2em;
  height: 2em;
  background: url(/images/challenge-icon-mission-player.png) 0 0 no-repeat;
  background-size: 2em; }

.mission-sound .footer .player .button:hover {
  opacity: 0.8; }

.mission-sound .footer .player .button.last-prev {
  background-position: 0 0; }

.mission-sound .footer .player .button.prev {
  background-position: 0 -2em; }

.mission-sound .footer .player .button.play {
  background-position: 0 -4em; }

.mission-sound .footer .player .button.next {
  background-position: 0 -6em; }

.mission-sound .footer .player .button.last-next {
  background-position: 0 -8em; }

/***************************************/
/*****Responsive for mobile device******/
/***************************************/
@media (max-width: 768px) {
  .user-belt-holder {
    /* width:80%; */ }
  .mission-individual .box {
    margin-left: 1em; }
  .mission-individual .banner {
    height: auto;
    margin-bottom: -0.5em;
    text-align: center; }
  .mission-individual .banner img {
    max-height: 13em;
    max-width: inherit;
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }

@media (max-width: 767px), (max-height: 500px) {
  .leader-board {
    width: 95%; }
  .sidebar-content > ul {
    max-height: 31em; }
  .challenge-opponent {
    width: 95%; }
  .challenge-game .profile .img-holder {
    width: 3em;
    height: 3em; }
  .challenge-game .profile .text {
    display: none; }
  .challenge-result {
    width: 95%; }
  .challenge-result .content {
    font-size: 0.75em; }
  .challenge-result-pending .text {
    height: 13.3em; }
  .challenge-top {
    width: 95%; }
  .challenge-mission {
    width: 100% !important;
    height: 100% !important;
    /* padding-bottom: 5em; */
    /* padding-top: 6em; */
    padding: 0 !important;
    /*background-color: #F1F2F3;*/ }
  .mission-overview {
    margin-right: 0 !important; }
  .mission-overview:after {
    top: 30em;
    height: inherit;
    bottom: 15em; }
  .mission-overview .header {
    width: 90%; }
  .mission-overview .row {
    margin: 0; }
  .mission-overview .row > div {
    margin: 2em auto; }
  .mission-overview .row > div.header {
    margin-top: 5em; }
  .mission-overview .row > .col-md-2 {
    margin: 0;
    display: none; }
  .mission-overview .box {
    margin: 3em auto; }
  .mission-overview .row.lock:before {
    display: none; }
  .mission-overview .row.lock > div:before {
    content: "";
    position: absolute;
    top: -3.8em;
    left: 50%;
    width: 2em;
    margin-left: -1em;
    height: 2em;
    background: url(/images/challenge-icon-mission-lock.png) center center no-repeat;
    background-size: 2em;
    z-index: 1; }
  .mission-individual {
    margin-right: 0; }
  .mission-individual .box {
    margin-left: 1em;
    font-size: 1.1em; }
  .mission-individual .header .text p {
    font-size: 1em;
    line-height: 1.3em; }
  .mission-individual .body li .text {
    font-size: 1.1em;
    padding-left: 4.5em; }
  .mission-individual .mission-status .title {
    font-size: 1.2em;
    padding-left: 1em; }
  .mission-individual .mission-status .progress {
    display: none; }
  .mission-individual .widget {
    margin: 0 0 5em;
    font-size: 1.2em; }
  .mission-sound {
    position: relative;
    top: 1em;
    left: 0;
    width: 95%;
    margin: 0 auto; } }

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