:root {
  --max-app-width: 100%;
  --max-app-height: 100%;
  --ratio-h: calc(100vh / 850);
  --box-top-height-int: 15;
  --box-bottom-height-int: 33;
  --box-top-height-pct: calc(var(--box-top-height-int) * 1%);
  --box-bottom-height-pct: calc(var(--box-bottom-height-int) * 1%);
  --colV1: #9961b6;
  --colV2: #762c29;
  --colV3: #3c3840;
  --colV4: #CD9459;
  --colBck: #121212;
  --col0: #919191;
  --col1: #5f5f5f;
  --col2: #4b4b4b;
  --col3: #373737;
  --col4: #232323;
  --col-general-bck: #fafafa;
  --col-dark-bck: #111;
  --col-mixlist-line: #fafafa;
  --col-mixlist-line-even: #f0f0f0;
  --col-blue1: #4d6cbb;
  --col-blue2: #2f3a89;
  --col-red1: #d20a0a;
  --col-red2: #960000;
  --col-green1: #36b460;
  --col-green2: #04822e;
  --col-blue-site: #2c86fe;
  --col-blue-site-hover: #2772d8;
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
  --easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
  --easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
  --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --mini-font-size: 11px;
  --small-font-size: 13px;
  --normal-font-size: 14px;
  --medium-font-size: 16px;
  --big-font-size: 18px;
  --huge-font-size: 20px;
  --mixlist-rating-font-size: 26px;
  --popup-scale: 1;
  --popup-pointe-h: calc(30px * var(--popup-scale));
  --popup-pointe-w: calc(26px * var(--popup-scale));
  --sp-intro-scale: 1;
  --sp-select-scale: 1;
  --picto-width: 68px;
  --tab-height: 60px;
  --formline-height: 40px;
  --icn-formline-height: 35px;
}
.darkmode {
  --col-general-bck: #111;
  --col-mixlist-line: #222;
  --col-mixlist-line-even: #111;
}
.darkmode ::-webkit-scrollbar {
  width: 12px;
}
.darkmode ::-webkit-scrollbar-track {
  background: #333;
}
.darkmode ::-webkit-scrollbar-thumb {
  background: #444;
}
@media (hover: hover) and (pointer: fine) {
  .darkmode ::-webkit-scrollbar-thumb:hover {
    background: #666;
  }
}
@font-face {
  font-family: 'Allan';
  src: url('../font/Allan-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: ralewayblack;
  src: url("../font/raleway-black-webfont.woff2") format("woff2"),
    url("../font/raleway-black-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ralewaybold;
  src: url("../font/raleway-bold-webfont.woff2") format("woff2"),
    url("../font/raleway-bold-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ralewaymedium;
  src: url("../font/raleway-medium-webfont.woff2") format("woff2"),
    url("../font/raleway-medium-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ralewayregular;
  src: url("../font/raleway-regular-webfont.woff2") format("woff2"),
    url("../font/raleway-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ralewaythin;
  src: url("../font/raleway-thin-webfont.woff2") format("woff2"),
    url("../font/raleway-thin-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
* {
  outline: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  user-drag: none;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased !important;
  -webkit-tap-highlight-color: transparent;
}
html > div[style] {
  display: none !important;
}
input[type="email"],
input[type="text"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
}
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: ralewayregular, Sans-Serif;
  font-size: var(--normal-font-size);
  background-color: var(--col-general-bck);
  z-index: -999;
}
body.black {
  background-color: #000 !important;
}
body.darkback {
  background-color: var(--colBck) !important;
}
body.darkmode {
  font-family: ralewaymedium;
}
body.mode-random {
  background-color: #000;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.noselect {
  -webkit-touch-callout: none !important;
  -webkit-user-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
hr {
  border: none;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ccc;
}
.darkmode hr {
  border-top: 1px solid #444;
}
#dragbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 22px;
  -webkit-app-region: drag;
}
.centermax {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: var(--max-app-width);
  max-height: var(--max-app-height);
}
#pp-box {
  display: none;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  padding: 10%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#pp-box.show {
  display: block;
}
#pp-box .box-lang {
  display: none;
}
#pp-box .box-lang.show {
  display: block;
}
.darkmode #pp-box {
  background-color: #333;
  color: #eee;
}
#pp-box p {
  margin-bottom: 40px;
}
#pp-box span {
  color: var(--col-blue1);
}
#pp-box #pp-bt {
  width: 100%;
  text-align: center;
  margin-top: 100px;
}
#pop-dialog .content .bt.accept .bck,
#pp-box #pp-bt #bt-ppaccept .bck {
  border-color: var(--col-blue1);
}
#pop-dialog .content .bt.accept .txt,
#pp-box #pp-bt #bt-ppaccept .txt {
  color: var(--col-blue1);
}
#pp-box #pp-bt #bt-ppaccept svg {
  fill: var(--col-blue1);
}
.hoverLocked .ic-locked {
  visibility: hidden;
  position: absolute;
  top: -11px;
  right: -11px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--col4);
}
.hoverLocked .ic-locked.mini {
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
}
.featureLocked .hoverLocked .ic-locked {
  pointer-events: none;
  visibility: visible;
  transform: scale(1);
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .featureLocked .hoverLocked .ic-locked {
    visibility: visible;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }
  .featureLocked .hoverLocked:hover .ic-locked {
    transform: scale(1);
    opacity: 1;
    transition: all 0.2s var(--easeOutBack);
  }
}
.featureLocked #tab-language {
  display: none;
}
.featureLocked #pop-language {
  display: none;
}
#app-incredibox {
  visibility: hidden;
  pointer-events: none;
}
#app-incredibox.show {
  visibility: visible;
  pointer-events: auto;
}
#content {
  position: relative;
  width: 100%;
  height: 100%;
}
#page-splash {
  position: absolute;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
#page-splash.enabled {
  pointer-events: auto;
}
#page-splash #sp-select {
  padding-top: 20px;
}
#page-splash #sp-select .vicon {
  opacity: 0;
}
#sp-intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-transform: uppercase;
  font-family: ralewaymedium, Sans-Serif;
  font-size: var(--medium-font-size);
  letter-spacing: 0.05em;
  color: #828282;
}
#sp-intro #sp-title {
  position: absolute;
  top: calc(50% - calc(var(--sp-intro-scale) * 115px));
  width: 100%;
  height: calc(var(--sp-intro-scale) * 100px);
  pointer-events: none;
  background-image: url(../img/official-title.svg);
  background-repeat: no-repeat;
  background-position: calc(50% + calc(var(--sp-intro-scale) * 20px)) center;
  transform: translate(0, 0);
  right: 0px;
}
.darkmode #sp-intro #sp-title {
  background-image: url(../img/title-darkmode.svg);
}
#sp-intro #sp-baseline {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate(0, 0);
}
#sp-intro #sp-experience {
  position: absolute;
  top: calc(50% - calc(var(--sp-intro-scale) * 55px));
  width: 100%;
  transform: translate(0, calc(var(--sp-intro-scale) * 50px));
  opacity: 0;
}
#sp-intro #sp-headphone {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate(0, calc(var(--sp-intro-scale) * 50px));
  opacity: 0;
}
#sp-intro #sp-headphone img {
  width: calc(var(--sp-intro-scale) * 126px);
  height: calc(var(--sp-intro-scale) * 150px);
}
#sp-intro #sp-choose {
  position: absolute;
  width: 100%;
  top: calc(50% - calc(var(--sp-intro-scale) * 200px));
  transform: translate(0, calc(var(--sp-intro-scale) * 50px));
  opacity: 0;
}
#sp-intro #sp-title.titleTweenUp {
  animation: titleTweenUp 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
}
@keyframes titleTweenUp {
  to {
    transform: translate(0, calc(var(--sp-intro-scale) * -60px));
  }
}
#sp-intro #sp-baseline.baselineTweenUp {
  animation: baselineTweenUp 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0.15s forwards;
}
@keyframes baselineTweenUp {
  to {
    transform: translate(0, calc(var(--sp-intro-scale) * -60px));
    opacity: 0;
  }
}
#sp-intro #sp-experience.experienceTweenUp {
  animation: experienceTweenUp 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s
    forwards;
}
@keyframes experienceTweenUp {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#sp-intro #sp-headphone.headphoneTweenUp {
  animation: headphoneTweenUp 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s
    forwards;
}
@keyframes headphoneTweenUp {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#sp-intro #sp-title.titleTweenUpHide {
  transform: translate(0, calc(var(--sp-intro-scale) * -60px));
  animation: titleTweenUpHide 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s
    forwards;
}
@keyframes titleTweenUpHide {
  to {
    transform: translate(0, calc(var(--sp-intro-scale) * -100px));
    opacity: 0;
  }
}
#sp-intro #sp-experience.experienceTweenUpHide {
  opacity: 1;
  transform: translate(0, 0);
  animation: experienceTweenUpHide 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)
    0.2s forwards;
}
@keyframes experienceTweenUpHide {
  to {
    transform: translate(0, calc(var(--sp-intro-scale) * -20px));
    opacity: 0;
  }
}
#sp-intro #sp-headphone.headphoneTweenUpHide {
  opacity: 1;
  transform: translate(0, 0);
  animation: headphoneTweenUpHide 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)
    0.3s forwards;
}
@keyframes headphoneTweenUpHide {
  to {
    transform: translate(0, calc(var(--sp-intro-scale) * -40px));
    opacity: 0;
  }
}
#sp-intro #sp-choose.chooseTweenUp {
  animation: chooseTweenUp 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.3s forwards;
}
@keyframes chooseTweenUp {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#sp-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-direction: column;
  flex-direction: column;
}
#sp-select .sp-line {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
}
#sp-select .vicon {
  position: relative;
  width: calc(var(--sp-select-scale) * 120px);
  height: calc(var(--sp-select-scale) * 150px);
  margin: calc(var(--sp-select-scale) * 10px);
}
@media (hover: hover) and (pointer: fine) {
  #sp-select .vicon {
    cursor: pointer;
  }
  #sp-select .vicon .img {
    transition: transform 0.2s ease-in;
  }
  #sp-select .vicon:hover:not(.open) .img {
    transform: scale(1.05);
    transition: transform 0.15s var(--easeOutBack);
  }
  #sp-select .vicon.clicked .img {
    transform: scale(1.05);
  }
  #sp-select #customicon, #sp-select .vicon#icon3 .img{
    transition: transform 0.2s ease-in;
  }
  #sp-select #customicon:hover:not(.open), #sp-select .vicon#icon3 .img:hover:not(.open), .locked-vicon:hover .vicon #customicon{
    transform: scale(1.05);
    transition: transform 0.15s var(--easeOutBack);
  }
  #sp-select #customicon.clicked, #sp-select .vicon#icon3 .img.clicked{
    transform: scale(1.05);
  }
}
#sp-select .vicon .img {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 25%;
  background-image: url(../img/switch-bt-visu-1@2x.png);
  background-size: cover;
}
#sp-select .vicon .txt {
  width: 100%;
  height: 0;
  padding-bottom: 20%;
  background-image: url(../img/switch-bt-title-tiny@2x.png);
  background-size: cover;
  margin-top: 6%;
}
#sp-select .vicon#icon1 .img,
#sp-select .vicon#icon1 .txt {
  background-position: 0 0;
}
#sp-select .vicon#icon2 .img {
  background-position: calc((100% / 7) * 1) 0;
}
#sp-select .vicon#icon2 .txt {
  background-position: calc((100% / 8) * 1) 0;
}
#sp-select .vicon#icon3 .img {
  background-position: calc((100% / 7) * 2) 0;
}
#sp-select .vicon#icon3 .txt {
  background-position: calc((100% / 8) * 2) 0;
}
#sp-select .vicon#icon4 .img {
  background-position: calc((100% / 7) * 3) 0;
}
#sp-select .vicon#icon4 .txt {
  background-position: calc((100% / 8) * 3) 0;
}
#sp-select .vicon .img.focused {
  background-color: transparent !important;
}
#sp-select .vicon .bul {
  pointer-events: none;
  position: absolute;
  top: calc(var(--sp-select-scale) * -10px);
  right: calc(var(--sp-select-scale) * -10px);
  width: calc(var(--sp-select-scale) * 32px);
  height: calc(var(--sp-select-scale) * 32px);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
}
#sp-select .vicon .bul .icn-svg {
  stroke-width: 1px;
}
#sp-select .vicon.open .bul {
  animation: tweenBounceUp 0.5s var(--easeOutBack) 0s forwards;
}
#sp-select .vicon.close .bul {
  animation: tweenBounceDown .2s cubic-bezier(.6,-.28,.735,.045) 0s forwards
}
@keyframes tweenBounceUp {
  40% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes tweenBounceDown {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}
#sp-select .vicon.iconTweenUp {
  transform: translate(0, calc(var(--sp-select-scale) * 25px));
}
#sp-select .vicon#icon1.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s forwards;
}
#sp-select .vicon#icon2.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s forwards;
}
#sp-select .vicon#icon3.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s forwards;
}
#sp-select .vicon#icon4.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s forwards;
}
#sp-select .vicon#icon5.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s forwards;
}
#sp-select .vicon#icon6.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s forwards;
}
#sp-select .vicon#icon7.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.45s forwards;
}
#sp-select .vicon#icon8.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s forwards;
}
#sp-select .vicon#icon9.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.55s forwards;
}
@keyframes iconTweenUp {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#fade-home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
#fade-home.animateFadeIn {
  animation: animateFadeOut 0.3s linear 0s forwards;
}
#home {
  position: absolute;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: var(--url-img-home-screen);
  background-repeat: no-repeat;
  background-size: 1488px;
  background-position: 50% calc(50% - 60px);
}
#home.animate {
  transform: scale(1.2);
  animation: tweenScaleNormal 1s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
}
@keyframes tweenScaleNormal {
  to {
    transform: scale(1);
  }
}
#home .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.7) 100%
  );
}
#home .gradient#gradient-bot {
  height: 50%;
  top: unset;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.7) 60%
  );
}
#home #img-version {
  width: calc(var(--ratio-h) * 150);
  max-width: 150px;
  min-width: 100px;
  transform: translate(0, -40px);
  opacity: 0;
  background-image: var(--url-img-home-version);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#home #img-version .bck {
  width: 100%;
  height: 0;
  padding-top: 8%;
}
#home #img-version.animate {
  animation: tweenFromTop 1s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
}
@keyframes tweenFromTop {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#home #img-titre {
  transform: translate(0, 40px);
  width: calc(var(--ratio-h) * 520);
  max-width: 520px;
  min-width: 200px;
  margin-bottom: 1%;
  opacity: 0;
  background-image: var(--url-img-home-titre);
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
#home #img-titre.animate {
  animation: tweenFromBot 1s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
}
@keyframes tweenFromBot {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#home #img-titre .bck {
  width: 100%;
  height: 0;
  padding-top: 38.4615384615%;
}
#home #load-box {
  position: absolute;
  opacity: 0;
}
#home #load-box.animate {
  animation: loadboxTween 0.5s ease-out 0s forwards;
}
@keyframes loadboxTween {
  to {
    opacity: 1;
  }
}
.progress-box {
  height: 20px;
  width: 200px;
  padding: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--col3);
  border-radius: 10px;
}
.progress-box .progress-bar {
  position: relative;
  height: 100%;
  width: 5%;
  border-radius: 8px;
  background-color: var(--col3);
}
#home #home-dedicated {
  pointer-events: none;
  display: none;
}
.main-bt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.5% var(--fullfill-padding) calc(2% + var(--sab))
    var(--fullfill-padding);
}
.main-bt .box-top {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  top: 5%;
  width: 100%;
  margin-bottom: auto;
}
.main-bt .tl {
  width: 200px;
  margin-right: auto;
}
.main-bt .tr {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 216px;
  margin-left: auto;
}
.main-bt .tr .bt {
  margin-left: 10px;
  transform: scale(0.5);
  opacity: 0;
}
.main-bt .box-bot {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  bottom: 5%;
  width: 100%;
}
.main-bt .box-bot .center {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
}
#home-bt-list,
#home-bt-play,
#home-bt-switch {
  transform: scale(0.5);
  opacity: 0;
}
#home-bt-fs .bck .icn-svg,
#home-bt-info .bck .icn-svg,
#home-bt-flip .bck .icn-svg,
#home-bt-darkalley .bck .icn-svg,
#home-bt-goodbye .bck .icn-svg,
#home-bt-extras .bck .icn-svg,
#home-bt-list .bck .icn-svg,
#home-bt-param .bck .icn-svg,
#home-bt-play .bck .icn-svg,
#home-bt-switch .bck .icn-svg {
  fill: #fff;
}
#home-bt-play {
  width: calc(var(--bt-scale) * 100px);
  height: calc(var(--bt-scale) * 100px);
}
#home-bt-fs.animate,
#home-bt-info.animate,
#home-bt-flip.animate,
#home-bt-darkalley.animate,
#home-bt-goodbye.animate,
#home-bt-extra.animate,
#home-bt-list.animate,
#home-bt-param.animate,
#home-bt-play.animate,
#home-bt-switch.animate {
  animation: tweenBounce 0.3s var(--easeOutBack) 0s forwards;
}
@keyframes tweenBounce {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
#home-bt-news {
  position: relative;
  width: calc(var(--bt-scale) * 70px);
  height: calc(var(--bt-scale) * 70px);
  opacity: 0;
}
.safemode #home-bt-news {
  visibility: hidden;
}
#home-bt-news .bck {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url("../img/top-stars.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: calc((100% / 6) * 6) 0;
  transform: rotate(0);
  transition: transform 0.3s var(--easeOutBack);
}
#home-bt-news .bck.focused {
  border-radius: 50%;
}
#home-bt-news.animate {
  animation: newsScale 0.7s var(--easeOutBack) 0s forwards;
}
#home-bt-news.animate .bck {
  animation: newsRotate 0.7s var(--easeOutBack) 0s;
}
@media (hover: hover) and (pointer: fine) {
  #home-bt-news:hover .bck {
    transform: rotate(-15deg);
    transition: transform 0.1s var(--easeOutBack);
  }
}
@keyframes newsScale {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  70% {
    opacity: 1;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    cursor: pointer;
  }
}
@keyframes newsRotate {
  0% {
    transform: rotate(30deg);
  }
  70% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
}
#mixlist {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  transform: translate(0, 100%);
}
#mixlist.show {
  visibility: visible;
  transform: translate(0, 0);
  z-index: 5;
}
#mixlist .bac {
  position: absolute;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.darkmode #mixlist .bac {
  background-color: rgba(40, 40, 40, 0.8);
}
#mixlist .bac.animateFadeIn {
  animation: animateFadeIn 0.4s ease 0s forwards;
}
#mixlist .bac.animateFadeOut {
  animation: animateFadeOut 0.4s ease 0s forwards;
}
#mixlist #poplist {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: calc(100vw - 60px);
  max-width: 760px;
  height: calc(100vh - 60px);
  transform: translate(0, 100%);
  -ms-flex-item-align: end;
  align-self: flex-end;
  z-index: 99;
}
#mixlist #poplist.open {
  animation: animateFromBottom 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s
    forwards;
}
#mixlist #poplist.opened {
  transform: translate(0, 0);
}
#mixlist #poplist.close {
  animation: animateFromTop 0.35s cubic-bezier(0.47, 0, 0.745, 0.715) 0s
    forwards;
}
@keyframes animateFromBottom {
  from {
    transform: translate(0, 100%);
  }
  to {
    transform: translate(0, 0);
  }
}
@keyframes animateFromTop {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 100%);
  }
}
#mixlist #poplist .tabbox {
  display: -ms-flexbox;
  display: flex;
}
#mixlist #poplist .tabbox .tab#tab-mixlist.animateFavIcon .icn-svg {
  fill: #fff;
  stroke: #fff;
  animation: tweenShowSVG 0.7s var(--easeOutQuart) 0s;
}
#mixlist #poplist .tab-filter {
  position: relative;
  width: 100%;
  padding: 14px;
  white-space: nowrap;
  background-color: var(--col1);
}
#mixlist #poplist .tab-filter .bt {
  margin: 0 10px 0 0;
  min-width: 130px;
}
#mixlist #poplist .tab-filter .bt:not(.active) {
  --bt-bck-color: var(--col2);
  --bt-txt-color: var(--col0);
  --bt-bck-color-hover: var(--col3);
}
#mixlist #poplist .tab-filter .bt:not(.active) .bck .icn-svg {
  fill: var(--bt-txt-color);
}
#mixlist #poplist .containbox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(100% - var(--tab-height));
  background-color: var(--col-mixlist-line);
}
#mixlist #poplist .containbox .pagebox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  display: none;
}
#mixlist #poplist .containbox .pagebox.show {
  display: block;
}
#mixlist #poplist #scrollbox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}
#mixlist #poplist #scrollbox.filter {
  margin-top: 60px;
}
.safemode #box-mixlist .tab-filter {
  display: none;
}
#mixlist #poplist #scrollbox#list-mymix {
  display: block;
}
#mixlist #poplist #box-search {
  width: 100%;
  white-space: nowrap;
}
#mixlist #poplist #box-search .input-loader {
  position: absolute;
  right: 0;
  width: 40px;
  height: inherit;
  display: none;
}
#mixlist #poplist #box-search form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px 15px;
  background-color: var(--col0);
}
#mixlist #poplist #box-search form input[type="text"] {
  width: 350px;
}
#mixlist #poplist #box-search form input[type="text"].focused {
  transform-origin: center left;
}
#mixlist #poplist #box-search #bt-search {
  margin: 0;
  margin-left: auto;
}
#mixlist #poplist #scrollbox.search {
  margin-top: 138px;
}
#mixlist .boxinfo {
  padding: 18px;
  height: 68px;
  width: 100%;
  margin-top: auto;
  text-align: center;
  font-size: var(--small-font-size);
  line-height: 1.3;
  color: #444;
  background-color: #ddd;
  padding-bottom: calc(18px + var(--sab));
}
#mixlist .boxinfo:empty {
  display: none;
}
.darkmode #mixlist .boxinfo {
  color: #888;
  background-color: #333;
  margin-top: auto;
}
#mixlist #poplist .boxline .line {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  height: 116px;
  background-color: var(--col-mixlist-line);
  -webkit-transform: translateZ(0);
}
#mixlist #poplist .boxline .line:nth-child(2n) {
  background-color: var(--col-mixlist-line-even);
}
#mixlist #poplist .boxline .line:nth-child(2n) {
  background-color: #f0f0f0;
}
.darkmode #mixlist #poplist .boxline .line {
  background-color: #222;
}
.darkmode #mixlist #poplist .boxline .line:nth-child(2n) .box-info {
  background-color: #111;
}
@media (hover: hover) and (pointer: fine) {
  #mixlist #poplist .boxline .line:hover {
    cursor: pointer;
  }
}
#mixlist #poplist .boxline .line.focused .box-info {
  border-left: 10px #2c86fe solid;
}
#mixlist #poplist .boxline .line.hide {
  animation: animateFadeOut 0.5s linear 0s forwards;
}
#mixlist #poplist .box-info {
  height: inherit;
  min-width: 100%;
  padding: 0 25px;
  transform: scale(1);
  transition: background-color 0.8s ease-in, transform 0.5s var(--easeOutBack);
}
#mixlist #poplist .line.bckFlash .box-info {
  background-color: var(--col0);
  transform: scale(0.7);
  animation: bckFlashAnimation 0.5s var(--easeOutBack) 0.2s forwards;
}
@keyframes bckFlashAnimation {
  0% {
    background-color: var(--col0);
    transform: scale(0.7);
  }
  20% {
    background-color: var(--col0);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}
#mixlist #poplist .line:first-child .mixbanner .rating {
  background-position: 0 0;
}
#mixlist #poplist .line:nth-child(2) .mixbanner .rating {
  background-position: calc((100% / 6) * 1) 0;
}
#mixlist #poplist .line:nth-child(3) .mixbanner .rating {
  background-position: calc((100% / 6) * 2) 0;
}
#mixlist #poplist .line:nth-child(4) .mixbanner .rating {
  background-position: calc((100% / 6) * 3) 0;
}
#mixlist #poplist .line:nth-child(5) .mixbanner .rating {
  background-position: calc((100% / 6) * 4) 0;
}
.mixbanner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  font-family: ralewayregular, Sans-Serif;
  font-size: var(--medium-font-size);
  white-space: nowrap;
  color: #5a5a5a;
  width: 100%;
}
.mixbanner .rating {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin-right: 12px;
  font-family: ralewaybold, Sans-Serif;
  font-size: var(--mixlist-rating-font-size);
  color: #fff;
  background-image: url("../img/top-stars.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: calc((100% / 6) * 5) 0;
}
.darkmode .mixbanner .rating {
  color: #333;
}
.mixbanner .info {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  margin-right: 20px;
}
.mixbanner .info .title {
  display: block;
  overflow: hidden;
  font-family: ralewaybold, Sans-Serif;
  font-size: var(--huge-font-size);
  color: #000;
}
.darkmode .mixbanner .info .title {
  color: #eee;
}
.mixbanner .info .dj {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4px;
}
.mixbanner .info .dj .box-flag {
  width: 23px;
  overflow: hidden;
  margin-right: 10px;
}
.mixbanner .info .dj .box-flag .flag {
  margin: -4px 0 0 -1px;
}
.mixbanner .info .dj .name {
  display: block;
}
.darkmode .mixbanner .info .dj .name {
  color: #888;
}
.darkmode .mixbanner .info .dedi {
  color: #888;
}
.mixbanner .data {
  margin-left: auto;
}
.mixbanner .data .stat {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-align: right;
}
.darkmode .mixbanner .data .stat {
  color: #999;
}
.mixbanner .data .stat .boxstat {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 5px;
}
.mixbanner .data .stat .boxstat .txt {
  margin-right: 3px;
}
.mixbanner .data .stat .boxstat .bck {
  width: 22px;
  height: 22px;
}
.mixbanner .data .stat .boxstat .bck .icn-svg {
  fill: #5a5a5a;
}
.darkmode .mixbanner .data .stat .boxstat .bck .icn-svg {
  fill: #aaaaaa;
}
.mixbanner .data .stat .boxstat.private .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.mymix .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.myfav .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.top50 .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.latest .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.offline .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.viewed {
  margin-left: 12px;
}
.mixbanner .data .stat .boxstat.liked {
  margin-left: 20px;
}
.mixbanner .data .stat .boxstat.latest,
.mixbanner .data .stat .boxstat.myfav,
.mixbanner .data .stat .boxstat.mymix,
.mixbanner .data .stat .boxstat.offline,
.mixbanner .data .stat .boxstat.private,
.mixbanner .data .stat .boxstat.top50 {
  display: none;
}
.mixbanner .data .date {
  display: block;
  color: #828282;
  text-align: right;
}
.darkmode .mixbanner .data .date {
  color: #666;
}
.isoffline .data .stat .boxstat.liked,
.isoffline .data .stat .boxstat.viewed {
  display: none;
}
.isoffline .data .stat .boxstat.offline {
  display: -ms-flexbox;
  display: flex;
}
.isprivate .data .stat .boxstat.private {
  display: block;
}
.ismymix .data .stat .boxstat.mymix {
  display: block;
}
.isfavoris .data .stat .boxstat.myfav {
  display: block;
}
.istop50 .data .stat .boxstat.top50 {
  display: block;
}
.islatest .data .stat .boxstat.latest {
  display: block;
}
#mixlist #poplist .box-info .star-txt {
  color: var(--col0);
}
#mixlist #poplist .box-action {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  transform: translate(0, 0);
  padding: 0 25px;
  height: inherit;
  width: 100%;
  background-color: #e6e6e6;
}
.darkmode #mixlist #poplist .box-action {
  background-color: #161616;
}
#mixlist #poplist .line:nth-child(2n) .box-action {
  background-color: #dcdcdc;
}
.darkmode #mixlist #poplist .line:nth-child(2n) .box-action {
  background-color: #262626;
}
#scrollbox .line.animateOpen .box-action {
  animation: animateOpenAction 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
    forwards;
}
#scrollbox .line.animateClose .box-action {
  animation: animateCloseAction 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
    forwards;
}
@keyframes animateOpenAction {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-100%, 0);
  }
}
@keyframes animateCloseAction {
  from {
    transform: translate(-100%, 0);
  }
  to {
    transform: translate(0, 0);
  }
}
.safemode #mixlist #tab-latest {
  display: none;
}
.safemode #mixlist #tab-top50 {
  display: none;
}
.safemode #mixlist #tab-search {
  display: none;
}
.safemode #mixlist .box-action .bt.share {
  display: none;
}
.safemode #mixlist .box-action .bt.link {
  display: none;
}
.safemode #mixlist .box-action .bt.fav {
  display: none;
}
.safemode #mixlist .box-action .bt.download {
  display: none;
}
.safemode #mixlist .box-action .bt.delete {
  display: none;
}
#mixlist #poplist .bt {
  position: relative;
  margin: 0 calc(var(--bt-scale) * 10px);
}
#mixlist #mixlistbox .tab-filter .bt {
  --bt-icn-color: var(--bt-txt-color);
}
.bt.fav .bck .icn-svg {
  fill: transparent;
  stroke-width: 1.1px;
}
.isfavoris .bt.fav {
  --bt-bck-color: var(--col1);
  --bt-bck-color-hover: var(--col2);
}
.isfavoris .bt.fav .bck .icn-svg {
  fill: #fff;
  stroke-width: 0;
}
#watch-info {
  display: -ms-flexbox;
  display: flex;
  pointer-events: none;
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  padding: 0 var(--fullfill-padding);
  opacity: 0;
  transform: translate(0, 0);
  transition: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}
#watch-info.fadeIn {
  opacity: 1;
  transform: translate(0, 0);
}
.bottomSlide #watch-info.fadeIn {
  opacity: 0;
  transform: translate(0, 100px);
}
#watch-info .info {
  font-family: ralewaymedium, Sans-Serif;
}
#watch-info .info .dj .box-flag {
  display: none;
  margin-right: 0;
  margin-left: 10px;
}
#watch-info .info span.dedi {
  visibility: hidden;
  margin-top: 5px;
  font-size: var(--normal-font-size);
  color: #8a8a8a;
}
#watch-info .data {
  visibility: hidden;
  margin-right: 15px;
}
.mode-watch #watch-info .data,
.mode-watch #watch-info .info span.dedi {
  visibility: visible;
}
#watch-info .info span.title {
  transition: color 0.3s ease-in-out;
}
.mode-watch #watch-info .info .dj .box-flag {
  display: block;
}
.mode-random #watch-info .info span.title {
  color: var(--col-blue1);
  text-align: left;
}
.mode-replay #watch-info .info span.title {
  color: var(--col-green1);
}
#watch-info.fadeIn #bt-like,
#watch-info.fadeIn #bt-save {
  pointer-events: auto;
}
.bottomSlide #watch-info #bt-like,
.bottomSlide #watch-info #bt-save {
  pointer-events: none !important;
}
#watch-info #bt-save {
  display: none;
  pointer-events: none;
  --bt-txt-color: #fff;
  --bt-txt-color-hover: #fff;
}
.mode-replay:not(.mode-watch) #watch-info #bt-save {
  display: -ms-inline-flexbox;
  display: inline-flex;
}
#watch-info #bt-like {
  display: none;
  border-radius: 50%;
  pointer-events: none;
}
.mode-watch #watch-info :not(.ismymix) #bt-like {
  display: -ms-inline-flexbox;
  display: inline-flex;
}
#bt-like .bck {
  background-color: #fff;
  border: 1px solid #bbb;
}
#bt-like .icn-svg {
  stroke-width: 1px;
  stroke: #bbb;
  fill: transparent;
}
.darkmode #bt-like .bck {
  background-color: var(--col-dark-bck);
  border: 1px solid #555;
}
@media (hover: hover) and (pointer: fine) {
  #bt-like:hover .bck {
    background-color: #eee;
  }
  .darkmode #bt-like:hover .bck {
    background-color: #333;
  }
}
#bt-like.disabled {
  pointer-events: none;
  cursor: default;
}
#bt-like.spin .icn-svg {
  stroke-width: 0;
  fill: #bbb;
}
#bt-like.spin.liked .icn-svg {
  stroke-width: 0;
  fill: #fff;
}
#bt-like.liked .bck {
  background-color: var(--col-red1);
  border: 1px solid var(--col-red1);
  transition: all 0.3s;
}
#bt-like.liked .icn-svg {
  stroke-width: 0;
  stroke: #fff;
  fill: #fff;
}
#lock-all {
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
#lock-all.show {
  pointer-events: auto;
  visibility: visible;
}
#lock-pause {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  visibility: hidden;
  pointer-events: none;
}
.pause #lock-pause {
  visibility: visible;
  pointer-events: auto;
}
#lock-pause #top-resume {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%;
  height: var(--box-top-height-pct);
}
#lock-pause #bt-resume {
  width: 60px;
  height: 60px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: #fafafa;
}
#lock-pause #bt-resume.focused {
  transform: scale(1.3) !important;
}
#lock-pause #bt-resume.focused .icn-svg {
  stroke: #fff;
  fill: #fff;
}
#box-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--box-top-height-pct);
  background-color: transparent;
}
#box-top #box-bt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: absolute;
  width: 200%;
  height: 100%;
  transform: translate(-50%, 0);
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#box-top #box-bt.open {
  transform: translate(0, 0);
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#box-top #box-bt.open #box-bt1 {
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.2s ease-out 0.15s;
}
#box-top #box-bt #box-bt1 {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
#box-top #box-bt.open #box-bt2 {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
#box-top #box-bt #box-bt2 {
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.2s ease-out 0.15s;
}
#box-top #box-bt1,
#box-top #box-bt2 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: center;
  align-items: center;
  width: var(--max-app-width);
  height: 100%;
  padding: 0 var(--fullfill-padding);
}
#box-top #box-bt2 {
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#box-top #box-bt2 .item-left {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: center;
  align-items: center;
}
#box-top #box-bt2 .item-left,
#box-top #box-bt2 .item-right {
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
}
#box-top #box-bt2 .item-right {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
#box-top #box-bt2 .item-middle {
  position: relative;
}
#box-top #cnt-record {
  pointer-events: none;
  width: 8em;
  text-align: right;
  white-space: nowrap;
  font-family: ralewayregular, Sans-Serif;
  font-size: var(--medium-font-size);
  color: var(--col-red1);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#box-top #cnt-record.fadeIn {
  opacity: 1;
}
#box-top #cnt-record #t-duration {
  font-family: ralewaybold, Sans-Serif;
}
#box-top #box-bt1 .bt {
  margin: 0 calc(var(--bt-big-scale) * 7px);
}
#box-top #box-bt1 .bt:first-child {
  margin-left: 0;
}
#box-top #box-bt1 .bt:last-child {
  margin-right: 0;
}
#box-top .bt#bt-tool.animateBounce {
  animation: tweenBounce 0.3s var(--easeOutBack) 0s forwards;
}
#box-top #box-bt1 #bt-random {
  --bt-txt-color: #fff;
  --bt-txt-color-hover: #fff;
}
#box-top #box-bt1 #bt-record {
  --bt-txt-color: #fff;
  --bt-txt-color-hover: #fff;
}
#box-top .bt#bt-record {
  margin-right: auto;
}
.mode-record #box-top {
  background-color: transparent;
  transition: none;
}
.mode-replay #box-top {
  background-color: transparent;
  transition: none;
}
.mode-random #box-top {
  background-color: transparent;
  transition: none;
}
.mode-record #box-top #box-bt2 #bt-tool .bck {
  background-color: var(--col-red1);
}
.mode-replay #box-top #box-bt2 #bt-tool .bck {
  background-color: var(--col-green1);
}
.mode-random #box-top #box-bt2 #bt-tool .bck {
  background-color: var(--col-blue1);
}
@media (hover: hover) and (pointer: fine) {
  .mode-record #box-top #box-bt2 #bt-tool:hover .bck {
    background-color: var(--col-red2);
  }
  .mode-replay #box-top #box-bt2 #bt-tool:hover .bck {
    background-color: var(--col-green2);
  }
  .mode-random #box-top #box-bt2 #bt-tool:hover .bck {
    background-color: var(--col-blue2);
  }
}
.mode-record #box-top #box-bt2 #bt-tool .icn-svg {
  animation: animateBlink 1s linear 0s infinite;
}
.mode-replay #box-top #box-bt2 #bt-tool .icn-svg {
  animation: animateBlink 1s linear 0s infinite;
}
.mode-random #box-top #box-bt2 #bt-tool .icn-svg {
  animation: animateSpin 2.5s linear 0s infinite;
}
.pause #box-top #box-bt2 #bt-tool .icn-svg {
  animation-play-state: paused;
}
#ic-loader path {
  stroke-width: 0.5px;
}
#ic-loader-mini path {
  stroke-width: 2px;
}
#ic-loader path:first-of-type,
#ic-loader-mini path:first-of-type {
  opacity: 0.2;
}
.icn-svg.col-version {
  stroke: var(--col0);
  fill: var(--col0);
}
.icn-svg.icn-black {
  stroke: #000;
  fill: #000;
}
.icn-svg.icn-gray {
  stroke: #5a5a5a;
  fill: #5a5a5a;
}
.icn-svg.icn-blue {
  stroke: var(--col-blue-site);
  fill: var(--col-blue-site);
}
.spin .icn-svg {
  animation: rotating 0.8s linear infinite;
}
.icn-svg.spin {
  animation: rotating 0.8s linear infinite;
}
@keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.bt-onofftext {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 32px;
  width: 265px;
  padding: 0 4px;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  background-color: #dcdcdc;
  cursor: pointer;
}
.bt-onofftext .txtbox {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
}
.bt-onofftext .txtbox .label {
  width: 50%;
  text-align: center;
}
.bt-onofftext .slider {
  position: absolute;
  top: 0;
  -ms-flex-item-align: center;
  align-self: center;
  height: 24px;
  width: calc(50% - 4px);
  margin-top: 4px;
  margin-left: 0;
  background-color: #fafafa;
  border-radius: 12px;
  transition: all 0.2s ease-in-out;
}
.bt-onofftext .txtbox .label:first-child {
  color: #333;
}
.bt-onofftext .txtbox .label:last-child {
  color: #ababab;
}
.bt-onofftext.active .slider {
  margin-left: calc(50% - 4px);
}
.bt-onofftext.active .txtbox .label:first-child {
  color: #ababab;
}
.bt-onofftext.active .txtbox .label:last-child {
  color: #333;
}
.darkmode .bt-onofftext {
  background-color: #2a2a2a;
}
.darkmode .bt-onofftext .txtbox .label:first-child {
  color: #eee;
}
.darkmode .bt-onofftext .txtbox .label:last-child {
  color: #666;
}
.darkmode .bt-onofftext .slider {
  background-color: #0a0a0a;
}
.darkmode .bt-onofftext.active .txtbox .label:first-child {
  color: #666;
}
.darkmode .bt-onofftext.active .txtbox .label:last-child {
  color: #eee;
}
.bt.valid.success .bck {
  background-color: var(--col-green1);
}
.bt.valid.success {
  animation: animateBigToNormal 0.4s var(--easeOutBack) forwards;
}
@keyframes animateBigToNormal {
  from {
    opacity: 0;
    transform: scale(2.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
#box-top #bt-clock {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: calc(var(--ratio-h) * 76);
  height: calc(var(--ratio-h) * 76);
  max-width: 76px;
  max-height: 76px;
  background-color: #bebebe;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
  border-radius: 50%;
  opacity: 0.3;
}
#box-top #bt-clock #clock-icn {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: var(--col-general-bck);
  transition: background-color 0.3s ease-in-out;
  pointer-events: none;
}
#box-top #bt-clock #clock-icn #clock-icn-play {
  display: none;
}
#box-top #bt-clock #clock-icn #clock-icn-pause {
  display: block;
}
.pause #box-top #bt-clock #clock-icn #clock-icn-play {
  display: block;
}
.pause #box-top #bt-clock #clock-icn #clock-icn-pause {
  display: none;
}
#box-top #bt-clock #clock-icn svg {
  width: 100%;
  height: 100%;
}
#box-top #bt-clock #cnv-clock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#box-top #bt-clock.enable {
  cursor: pointer;
  opacity: 1;
}
.mode-random #box-top #bt-clock {
  background-color: #333;
}
.mode-random #box-top #bt-clock #clock-icn {
  background-color: #000;
}
.darkmode #box-top #bt-clock {
  background-color: #666;
}
.darkmode #box-top #bt-clock #clock-icn .icn-svg.icn-gray {
  fill: #ccc;
}
#bt-clock.focused {
  background-color: var(--col-blue-site) !important;
}
#bt-clock.focused #clock-icn .icn-svg.icn-gray {
  stroke: var(--col-blue-site) !important;
  fill: var(--col-blue-site) !important;
}
#fade-all {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
#fade-all.white {
  background-color: var(--col-general-bck);
}
#fade-all.fadeIn {
  pointer-events: auto;
  opacity: 1;
}
.miniPlayer #fade-all.white {
  background-color: #000 !important;
}
#bck-global {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--col-general-bck);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.mode-random #bck-global {
  background-color: #000;
}
#bck-global.fadeIn {
  opacity: 1;
}
@keyframes animateFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animateFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes animateSpin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes animateBlink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
#box-top #box-bt-bonus {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
  opacity: 1;
  -ms-touch-action: none;
  touch-action: none;
}
#box-top #box-bt-bonus.fade {
  transition: opacity 0.3s ease-in-out;
}
#box-top #box-bt-bonus.hide {
  opacity: 0;
  pointer-events: none;
}
#box-top #box-bt-bonus.hidden .bt-bonus.unlock .quarter .svg.directshow,
#box-top #box-bt-bonus.hidden .bt-bonus.unlock .quarter .svg.q0 {
  visibility: hidden;
}
#box-top .bt-bonus {
  position: relative;
  width: calc(var(--ratio-h) * 86);
  height: calc(var(--ratio-h) * 86);
  max-width: 86px;
  max-height: 86px;
  margin: 0 16px;
}
#box-top .bt-bonus canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e6e6e6;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.darkmode #box-top .bt-bonus canvas {
  background-color: #444;
}
#box-top .bt-bonus.playing canvas {
  transform: scale(1);
  transition: transform 0.4s var(--easeOutBack);
}
#box-top .bt-bonus .circle {
  pointer-events: none;
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px dashed #dcdcdc;
  border-radius: 50%;
  opacity: 0;
}
#box-top .bt-bonus.unlock .circle.show {
  animation: tweenShowCircle 0.7s ease-out 0.4s forwards;
}
@keyframes tweenShowCircle {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.2);
  }
}
#box-top .bt-bonus.unlock .circle.showCircle {
  border-color: var(--col-green1) !important;
  animation: tweenShowCircle 0.7s ease-out 0s forwards;
}
#box-top .bt-bonus .quarter {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
}
#box-top .bt-bonus .quarter .svg {
  visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
#box-top .bt-bonus .quarter .svg svg {
  display: block;
  width: 100%;
  height: 100%;
}
#box-top .bt-bonus.unlock .quarter .svg.q0 svg {
  fill: #dcdcdc;
}
.darkmode #box-top .bt-bonus.unlock .quarter .svg.q0 svg {
  fill: #333;
}
#box-top .bt-bonus.unlock .quarter .svg.directshow {
  visibility: visible;
}
#box-top .bt-bonus.unlock .quarter .svg.show {
  animation: tweenShowSVG 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s
    forwards;
}
#box-top .bt-bonus.unlock .quarter .svg.hide {
  animation: tweenHideSVG 0.3s ease 0s forwards;
}
@keyframes tweenShowSVG {
  from {
    opacity: 0;
    transform: scale(3.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes tweenHideSVG {
  to {
    opacity: 0;
  }
}
#box-top .bt-bonus .icon {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: #bebebe;
  transition: background-color 0.3s ease-in-out;
}
.darkmode #box-top .bt-bonus .icon {
  background-color: #444;
}
#box-top .bt-bonus .icon .icn-bck {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 300%;
  background-position: 0 0;
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out;
}
.v1 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 1);
}
.v1 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 1);
}
.v1 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 1);
}
.v2 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 2);
}
.v2 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 2);
}
.v2 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 2);
}
.v3 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 3);
}
.v3 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 3);
}
.v3 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 3);
}
.v4 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 4);
}
.v4 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 4);
}
.v4 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 4);
}
.v5 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 5);
}
.v5 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 5);
}
.v5 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 5);
}
.v6 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 6);
}
.v6 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 6);
}
.v6 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 6);
}
.v7 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 7);
}
.v7 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 7);
}
.v7 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 7);
}
.v8 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 8);
}
.v8 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 8);
}
.v8 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 8);
}
.v9 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 100%;
}
.v9 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% 100%;
}
.v9 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% 100%;
}
#box-top .bt-bonus.unlock .quarter .svg.q0 {
  visibility: visible;
}
@media (hover: hover) and (pointer: fine) {
  #box-top .bt-bonus.unlock {
    cursor: pointer;
  }
}
#box-top .bt-bonus.unlock.inprogress .icon {
  background-color: #5a5a5a;
  transition: background-color 0.3s ease-in-out;
}
#box-top .bt-bonus.unlock.inprogress .icon .icn-bck {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.darkmode #box-top .bt-bonus.unlock.inprogress .icon {
  background-color: #666;
}
#box-top .bt-bonus.unlock.found .icon {
  background-color: var(--col-green1) !important;
  transition: background-color 0.3s ease-in-out;
}
#box-top .bt-bonus.unlock.found .quarter {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
#box-top .bt-bonus.unlock.bounce .icon {
  animation: tweenBtBounce 1s var(--easeOutBack) 0s infinite;
}
@keyframes tweenBtBounce {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
#game .bt-bonus .box-loader {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 103%;
  width: 100%;
  height: auto;
  pointer-events: none;
  opacity: 1;
  border-radius: 30px;
}
#game .bt-bonus .box-loader.fade {
  transition: opacity 0.3s ease-in-out;
}
#game .bt-bonus .box-loader.hide {
  opacity: 0;
}
#game .bt-bonus .box-loader .zone .loader .bar {
  background-color: var(--col-green1);
}
#game {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#game #box-stage-bck {
  position: absolute;
  top: var(--box-top-height-pct);
  bottom: var(--box-bottom-height-pct);
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease;
}

#box-stage-bck-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bck-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s;
}

#bck-current {
  z-index: 0;
  opacity: 1;
}

#bck-next {
  z-index: 0;
  opacity: 0;
}

#game #box-video {
  position: absolute;
  top: var(--box-top-height-pct);
  bottom: var(--box-bottom-height-pct);
  width: 100%;
  height: auto;
  overflow: hidden;
  transition: bottom 0.3s ease-in-out;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}
.picto .bck::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  background-image: var(--layer-image);
}
#game #box-video.visible {
  visibility: visible;
}
.bottomSlide #game #box-video {
  bottom: calc(var(--box-top-height-pct) / 2);
}
#game #box-video .video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  visibility: hidden;
  background-color: #000;
}
#game #box-video .video.show {
  visibility: visible;
}
#game #box-video .video video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
video::-webkit-media-controls {
  display: none;
}
#game #fade-video {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: #000;
}
#game #fade-video.show {
  opacity: 1;
}
#game #fade-video.animateFadeIn {
  animation: animateFadeIn 0.5s linear 0s forwards;
}
#game #fade-video.animateFadeOut {
  animation: animateFadeOut 0.5s linear 0s forwards;
}
#game #box-stage {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: end;
  align-items: flex-end;
  top: var(--box-top-height-pct);
  bottom: var(--box-bottom-height-pct);
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
}
#game #box-stage #box-canvas canvas {
  width: 100%;
  height: 100%;
}
#game #box-polo {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}
#game #box-polo .polo {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: end;
  align-items: flex-end;
  top: 10%;
  height: 90%;
  pointer-events: auto;
  -ms-touch-action: none;
  touch-action: none;
}
#game #box-stage.pointerlock #box-polo .polo {
  pointer-events: none;
}
#box-bottom #box-loader-polo {
  position: relative;
  height: 8%;
  pointer-events: none;
  opacity: 1;
}
#box-bottom #box-loader-polo .zone {
  position: absolute;
}
#box-bottom #box-loader-polo .zone .loader {
  width: 55%;
}
#box-bottom #box-loader-polo.fade {
  transition: opacity 0.3s ease-in-out;
}
#box-bottom #box-loader-polo.hide {
  opacity: 0;
}
#game #bottom-shadow {
  pointer-events: none;
  position: absolute;
  top: -10%;
  width: 100%;
  height: 10%;
  background-size: 100%;
  background-image: url("../img/game-ombre.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
}
#game #box-stage .polo .ctrl {
  display: none;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 90%;
  height: 12%;
  background-color: #5a5a5a;
  border-radius: 10px 10px 0 0;
  opacity: 0;
  transition: opacity 0.2s;
}
#game #box-stage .polo .ctrl.visible {
  visibility: visible;
}
#game #box-stage .polo .ctrl .cbt {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  cursor: pointer;
  overflow: hidden;
}
#game #box-stage .polo .ctrl .cbt .icn-svg {
  position: absolute;
  width: 130%;
  height: 100%;
}
#game #box-stage .polo .ctrl .cbt.light {
  opacity: 1;
}
#game #box-stage .polo .ctrl .cbt:first-child {
  margin-left: 10px;
}
#game #box-stage .polo .ctrl .cbt:last-child {
  margin-right: 10px;
}
@media (hover: hover) and (pointer: fine) {
  #game #box-stage .polo .ctrl {
    display: -ms-flexbox;
    display: flex;
    visibility: hidden;
  }
  #game #box-stage .polo:hover .ctrl.visible {
    opacity: 1;
    transition: opacity 0s;
  }
  #game #box-stage .polo .ctrl .cbt:hover {
    opacity: 1;
  }
}
#box-reading-bar {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 1.2%;
  top: var(--box-top-height-pct);
}
#box-reading-bar #reading-bar {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #8c8c8c;
  transform-origin: top left;
  transform: scaleY(0);
  transition: transform 0.4s ease-in-out;
}
.darkmode #box-reading-bar #reading-bar {
  background-color: #444;
}
#box-reading-bar #reading-bar.open {
  transform: scaleY(1);
}
#box-reading-bar #reading-bar.seeking {
  transition: transform 0.2s ease-out;
  transform: scaleY(3);
}
#box-reading-bar #reading-block,
#box-reading-bar #reading-buffer {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: top left;
  background-color: var(--col-red1);
}
#box-reading-bar #reading-marker,
#box-reading-bar #reading-marker-bonus {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
#box-reading-bar #reading-marker .marker:first-child {
  visibility: hidden;
}
#box-reading-bar #reading-marker .marker,
#box-reading-bar #reading-marker-bonus .marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #fff;
}
.darkmode #box-reading-bar #reading-marker .marker {
  background-color: #000;
}
#box-reading-bar #reading-marker-bonus .marker {
  display: block;
  background-color: #fff;
  opacity: 0.5;
}
.darkmode #box-reading-bar #reading-marker-bonus .marker {
  background-color: #777;
  opacity: 0.7;
}
#box-reading-bar #reading-block {
  background-color: #5a5a5a;
}
#box-reading-bar #reading-buffer.progress {
  animation: tweenScaleXProgress 0s linear 0s forwards;
}
#box-reading-bar #reading-buffer.froze,
.pause #box-reading-bar #reading-buffer.progress {
  animation-play-state: paused;
}
@keyframes tweenScaleXProgress {
  to {
    transform: scaleX(1);
  }
}
#game .box-loader {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: auto;
}
#game .box-loader .zone {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 4px;
}
#game .box-loader .zone .loader {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  background-color: #ddd;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
}
.darkmode #game .box-loader .zone .loader {
  background-color: #000;
}
#game .box-loader .zone .loader.show {
  transition: transform 0.2s ease-out;
  transform: scaleX(1);
}
#game .box-loader .zone .loader .bar {
  height: 100%;
  width: 100%;
  transform-origin: top left;
  background-color: #999;
  transform: scaleX(0);
}
#game .box-loader .zone .loader .bar.progress {
  animation: tweenScaleProgress 0s linear 0s forwards;
}
.pause #game .box-loader .zone .loader .bar.progress {
  animation-play-state: paused;
}
@keyframes tweenScaleProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
#box-bottom {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  bottom: 0;
  width: 100%;
  height: var(--box-bottom-height-pct);
  background-color: transparent;
}
#box-bottom #box-picto {
  position: absolute;
  top: 6%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 1;
}
.bottomSlide #box-bottom #box-picto {
  opacity: 0;
  pointer-events: none;
}
#box-bottom #box-picto .pictoline {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 95%;
}
#box-bottom #box-picto .pictoline.top {
  margin: 0 3% 0 0;
}
#box-bottom #box-picto .pictoline.bot {
  margin: 0 0 0 3%;
}
#box-bottom #box-picto.fade {
  transition: opacity 0.3s ease-in-out;
}
#box-bottom #box-picto.hide {
  opacity: 0;
  pointer-events: none;
}
#box-bottom #box-picto .picto {
  cursor: grab;
  width: 100%;
  margin: 7px;
  z-index: initial;
  transform: translate3d(0, 0, 0);
  border-radius: 13%;
  transition: background-color 0.4s ease-out;
  background-color: transparent;
  -ms-touch-action: none;
  touch-action: none;
}
#box-bottom #box-picto .picto .bck {
  width: 100%;
  height: 0;
  padding-top: 100%;
  background-size: auto 200%;
  border-radius: 12%;
  transition: opacity 0.4s ease-out;
  opacity: 1;
  background-color: #00000021;
}

.darkmode .v1 #box-bottom #box-picto .picto .bck {
  background-color: #00000000;
}

#box-bottom #box-picto .picto#picto0 .bck {
  background-position: calc((100% / 19) * 0) 0;
}
#box-bottom #box-picto .picto#picto1 .bck {
  background-position: calc((100% / 19) * 1) 0;
}
#box-bottom #box-picto .picto#picto2 .bck {
  background-position: calc((100% / 19) * 2) 0;
}
#box-bottom #box-picto .picto#picto3 .bck {
  background-position: calc((100% / 19) * 3) 0;
}
#box-bottom #box-picto .picto#picto4 .bck {
  background-position: calc((100% / 19) * 4) 0;
}
#box-bottom #box-picto .picto#picto5 .bck {
  background-position: calc((100% / 19) * 5) 0;
}
#box-bottom #box-picto .picto#picto6 .bck {
  background-position: calc((100% / 19) * 6) 0;
}
#box-bottom #box-picto .picto#picto7 .bck {
  background-position: calc((100% / 19) * 7) 0;
}
#box-bottom #box-picto .picto#picto8 .bck {
  background-position: calc((100% / 19) * 8) 0;
}
#box-bottom #box-picto .picto#picto9 .bck {
  background-position: calc((100% / 19) * 9) 0;
}
#box-bottom #box-picto .picto#picto10 .bck {
  background-position: calc((100% / 19) * 10) 0;
}
#box-bottom #box-picto .picto#picto11 .bck {
  background-position: calc((100% / 19) * 11) 0;
}
#box-bottom #box-picto .picto#picto12 .bck {
  background-position: calc((100% / 19) * 12) 0;
}
#box-bottom #box-picto .picto#picto13 .bck {
  background-position: calc((100% / 19) * 13) 0;
}
#box-bottom #box-picto .picto#picto14 .bck {
  background-position: calc((100% / 19) * 14) 0;
}
#box-bottom #box-picto .picto#picto15 .bck {
  background-position: calc((100% / 19) * 15) 0;
}
#box-bottom #box-picto .picto#picto16 .bck {
  background-position: calc((100% / 19) * 16) 0;
}
#box-bottom #box-picto .picto#picto17 .bck {
  background-position: calc((100% / 19) * 17) 0;
}
#box-bottom #box-picto .picto#picto18 .bck {
  background-position: calc((100% / 19) * 18) 0;
}
#box-bottom #box-picto .picto#picto19 .bck {
  background-position: calc((100% / 19) * 19) 0;
}
.picto .hitzone {
  width: 130%;
  left: -15%;
  height: 130%;
  top: -15%;
}
#box-bottom #box-picto .picto.drag {
  z-index: 99999999999999 !important;
  cursor: grabbing;
}
#box-bottom #box-picto .picto.drag .bck {
  cursor: -webkit-grabbing;
  box-shadow: 3px 3px #555;
}
.darkmode #box-bottom #box-picto .picto.drag .bck {
  box-shadow: 3px 3px #000;
}
#box-bottom #box-picto .picto.replacer {
  animation: tweenReplacer 0.4s ease 0s forwards;
  z-index: 1;
}
@keyframes tweenReplacer {
  to {
    transform: translate3d(0, 0, 0);
  }
}
#box-bottom #box-picto .picto.griser {
  cursor: pointer;
  opacity: 0;
  animation: tweenOpacity 0.3s ease 0s forwards;
}
.darkmode #box-bottom #box-picto .picto.griser {
  animation: tweenOpacityDM 0.3s ease 0s forwards;
}
#box-bottom #box-picto .picto.griser .bck {
  background-position-y: -100% !important;
}
@keyframes tweenOpacity {
  to {
    opacity: 1;
  }
}
@keyframes tweenOpacityDM {
  to {
    opacity: 0.2;
  }
}
#box-bottom #box-picto .picto.flashme {
  animation: tweenFlashme 0.4s var(--easeOutBack);
}
@keyframes tweenFlashme {
  from {
    opacity: 0;
    transform: scale(2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
#box-bottom #box-picto .picto.hideYourself {
  transition: background-color 0s ease-out;
  background-color: #e6e5e5;
}
.darkmode #box-bottom #box-picto .picto.hideYourself {
  background-color: #222;
}
#box-bottom #box-picto .picto.hideYourself .bck {
  transition: opacity 0s ease-out;
  opacity: 0;
}
.spinner-box {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}
.spinner-box.hide {
  opacity: 0;
}
.box-popup {
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box-popup.show {
  visibility: visible;
}
.box-popup.VKBopen {
  pointer-events: auto;
  overflow-y: scroll;
}
.box-popup .centerbck {
  position: relative;
  width: 100%;
  height: 100%;
}
.box-popup.mini {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.box-popup.mini .centerbck {
  max-width: var(--max-app-width);
  max-height: var(--max-app-height);
}
.box-popup.mini .bac,
.box-popup.mini .flex {
  top: var(--box-top-height-pct) !important;
  left: 0 !important;
  height: auto !important;
  width: 100% !important;
  bottom: var(--box-bottom-height-pct) !important;
  transition: bottom 0.3s ease-in-out;
}
.bottomSlide .box-popup.mini .bac,
.bottomSlide .box-popup.mini .flex {
  bottom: calc(var(--box-top-height-pct) / 2) !important;
}
.box-popup .bac {
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.darkmode .box-popup .bac {
  background-color: rgba(40, 40, 40, 0.8);
}
.box-popup .bac.animateFadeIn {
  animation: animateFadeIn 0.3s ease 0s forwards;
}
.box-popup .bac.animateFadeOut {
  animation: animateFadeOut 0.2s ease 0s forwards;
}
.box-popup .flex {
  position: absolute;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.box-popup .box {
  pointer-events: auto;
  opacity: 0;
  width: auto;
  height: auto;
}
.box-popup.big .box {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: unset;
  width: calc(100vw - 60px);
  max-width: 700px;
  height: calc(100vh - 60px);
  max-height: 350px;
}
.box-popup.big.with-tab .box {
  max-height: 500px;
}
.box-popup .box.open {
  opacity: 0;
  transform: scale(0.5);
  animation: tweenPopupOpen 0.3s var(--easeOutBack) 0s forwards;
}
.box-popup .box.close {
  opacity: 1;
  animation: tweenPopupCloseScaleUp 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045)
    0s forwards;
}
.box-popup .box.slideUp {
  animation: TweenPopSlideUp 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s
    forwards;
}
.box-popup .box.slideDown {
  pointer-events: none;
  animation: TweenPopSlideDown 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s
    forwards;
}
.box-popup .box .pop2 {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--popup-scale) * 6px);
  background-color: var(--col-general-bck);
}
.box-popup .box .pop {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--popup-scale) * 6px);
  background-color: var(--col-general-bck);
}
.box-popup .box .pop .icon {
  display: none;
}
.box-popup.action .box .pop .icon,
.box-popup.action-back .box .pop .icon,
.box-popup.info .box .pop .icon {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  margin-left: calc(var(--bt-scale) * -22px);
  margin-top: calc(var(--bt-scale) * -22px);
  border-radius: 50%;
}
.box-popup.action .box .pop .icon .icn-svg,
.box-popup.action-back .box .pop .icon .icn-svg {
  stroke-width: 0.3px;
}
.box-popup.action-back .box .pop .icon {
  left: 0 !important;
}
.box-popup.action .box .pop .icon,
.box-popup.action-back .box .pop .icon {
  cursor: pointer;
  left: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .box-popup.action .box .pop .icon,
  .box-popup.action-back .box .pop .icon {
    transition: transform 0.2s ease-out;
  }
  .box-popup.action .box .pop .icon:hover,
  .box-popup.action-back .box .pop .icon:hover {
    transition-duration: 0s;
    transform: scale(1.1);
  }
}
.box-popup.lock .box .pop .icon {
  display: none;
}
.box-popup.info .box .pop .icon .bck {
  background-color: var(--col-red1);
}
.box-popup.success .box .pop .icon .bck {
  background-color: var(--col-green1);
}
.box-popup .box .pop .container {
  width: 100%;
  height: 100%;
  padding: calc(var(--popup-scale) * 35px);
  text-align: center;
}
.box-popup .box .pop .container .box-bt-haut {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
}
.box-popup .box .pop .container .box-bt-haut .bt-haut {
  margin: 0 calc(var(--popup-scale) * 15px);
}
.box-popup .box .pop .container img {
  pointer-events: none;
}
.box-popup .box .pop .container .bloc-hr {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  max-height: 50px;
  min-height: 15px;
}
.box-popup .box .pop .container .line {
  padding: calc(var(--popup-scale) * 20px) 0;
  border-bottom: 1px solid #ddd;
}
.box-popup .box .pop .container .line:first-child {
  padding-top: 0;
}
.box-popup .box .pop .container .line:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.box-popup .box .pop .container .title {
  font-family: ralewaybold, Sans-Serif;
  font-size: var(--big-font-size);
  margin-bottom: 0.5em;
  color: #000;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
}
.darkmode .box-popup .box .pop .container .title {
  color: #ccc;
}
.box-popup .box .pop .container .text {
  font-family: ralewayregular, Sans-Serif;
  font-size: var(--medium-font-size);
  line-height: 1.4;
  color: #5a5a5a;
  white-space: nowrap;
  cursor: default;
}
.darkmode .box-popup .box .pop .container .text {
  font-family: ralewaymedium;
  color: #888;
}
.box-popup .box .pop .container .text.moyen {
  font-size: 16px;
}
.box-popup .box .pop .container .text.petit {
  font-size: 14px;
}
.box-popup .box .pop .container .text.mini {
  font-size: var(--mini-font-size);
}
.box-popup .box .pop .container .content {
  position: relative;
  text-align: center;
  margin-top: calc(var(--popup-scale) * 30px);
  width: inherit;
}
.lang-ru .box-popup .box .pop .bt-haut .txt {
  font-size: 11px;
}
.box-popup#pop-menu-exit {
  z-index: 4;
}
.box-popup#pop-menu-exit .container .bt {
  width: calc(var(--bt-scale) * 300px);
  margin: 0 auto calc(var(--bt-scale) * 16px) auto !important;
}
.box-popup#pop-menu-exit .box .pop .container .content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}
.box-popup#pop-dialog {
  z-index: 5;
  cursor: default;
}
.box-popup#pop-dialog .pop {
  min-width: 300px;
  max-width: 400px;
  width: auto;
}
.box-popup#pop-dialog .pop .container {
  width: inherit;
  padding: calc(var(--popup-scale) * 30px);
  white-space: normal;
}
.box-popup#pop-dialog .pop .container .title {
  font-size: var(--medium-font-size);
  margin-bottom: 10px;
}
.box-popup#pop-dialog .pop .container .text {
  font-size: var(--normal-font-size);
  white-space: normal;
}
.box-popup#pop-dialog .pop .container .text span.link {
  font-family: ralewaymedium;
  color: var(--col-blue1);
}
.box-popup#pop-dialog .pop .container .content {
  margin-top: 20px;
  white-space: nowrap;
}
.box-popup#pop-dialog .pop .container .content .bt {
  margin: 0 5px;
}
.box-popup#pop-dialog .box.close {
  animation: tweenPopupCloseScaleDown 0.2s
    cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s forwards;
}
@keyframes tweenPopupOpen {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes tweenPopupCloseScaleUp {
  to {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes tweenPopupCloseScaleDown {
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
.box-popup#pop-switch .pop .container #sp-select {
  position: relative;
  margin-top: calc(var(--popup-scale) * 20px);
}
.box-popup.with-tab .box.open {
  animation: TweenPopSlideUp 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s
    forwards;
}
.box-popup.with-tab .box.close {
  opacity: 1;
  animation: TweenPopSlideDown 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s
    forwards;
}
@keyframes TweenPopSlideUp {
  from {
    opacity: 0;
    transform: translate(0, 80px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes TweenPopSlideDown {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
.box-popup.with-tab .box-tab {
  white-space: nowrap;
  position: relative;
}
.box-popup.with-tab .pop {
  opacity: 1;
  display: none;
  width: 100%;
  height: calc(100% - var(--tab-height));
  border-radius: 6px;
  border-top-left-radius: 0;
}
.box-popup.with-tab .pop.active {
  display: block;
}
.box-popup.with-tab .pop .container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  padding: 40px 60px;
}
.pop#pop-credit .container .text {
  color: #000;
  cursor: default;
  font-size: var(--normal-font-size);
}
.darkmode .pop#pop-credit .container .text {
  color: #fff;
}
.pop#pop-credit .container .bt {
  margin: 0 7px;
}
.pop#pop-credit .container .logo {
  height: 100%;
  max-height: 85px;
  min-height: 30px;
  background-image: url(../img/official-title.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 15px;
  pointer-events: none;
}
.darkmode .pop#pop-credit .container .logo {
  background-image: url(../img/official-title-darkmode.svg);
}
.pop#pop-credit .container #copy span {
  font-size: var(--small-font-size);
  color: #666;
}
.darkmode .pop#pop-credit .container #copy span {
  color: #888;
}
.pop#pop-credit .container #team .box-team {
  display: inline-block;
  padding: 0 10px;
  text-align: right;
  line-height: 1.3;
}
.pop#pop-credit .container #team .box-team:last-child {
  text-align: left;
  color: #666;
}
.darkmode .pop#pop-credit .container #team .box-team:last-child {
  color: #888;
}
.pop#pop-credit .container .linkme {
  border-bottom: 1px dotted #ccc;
  display: inline-block;
  color: #666 !important;
  cursor: pointer;
}
.safemode #pop-credit .bt {
  visibility: hidden;
}
.pop#pop-follow .container .title {
  font-family: ralewaymedium, Sans-Serif;
  height: 40px;
}
.pop#pop-follow .container .btbox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: calc(var(--bt-big-scale) * 10px) 0 0 0;
  min-height: 33px;
}
.pop#pop-follow .container .btbox .bt {
  margin: 0 calc(var(--bt-big-scale) * 13px);
}
.pop#pop-follow .container #img-shop {
  height: 100%;
  max-height: 170px;
  min-height: 90px;
  background-image: url(../img/shop-img@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.pop#pop-follow .container #img-shop img {
  display: block;
  width: 100%;
}
.pop#pop-follow .container #img-shop.focused {
  background-color: transparent !important;
}
.safemode #tab-follow {
  visibility: hidden;
}
.safemode #pop-follow {
  visibility: hidden;
}
.pop#pop-language .bt {
  width: 117px;
  margin: 10px 7px;
}
#pop-setting .container {
  text-align: left;
}

.v1 #pop-setting .galaxy-cover-settings {
  background-size: contain;
  position: absolute;
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: 0;
  border-radius: 5px;
  pointer-events: none;
  height: 88%;
  bottom: 0;
}

.v1 #pop-setting .galaxy-cover-settings.left {
  background-image: url('../img/old-galaxy-cover-left.svg');
  width: 50%;
  left: 0;
  background-position: 0% 0%;
}

.v1 #pop-setting .galaxy-cover-settings.right {
  background-image: url('../img/old-galaxy-cover-right.svg');
  width: 50%;
  right: 0;
  background-position: 100% 100%;
}


.v1 #pop-setting .galaxy-cover-settings::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(180deg, #ffffff, #11111100);
  border-radius: 5px;
}

.v1.darkmode #pop-setting .galaxy-cover-settings::before {
  background-image: linear-gradient(180deg, #111, #11111100);
}

#pop-advsetting .container {
  text-align: left;
}
.container .paramline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.darkmode .container .paramline .label {
  color: #ccc;
}
.container .paramline .bt {
  min-width: 90px;
  margin-right: 0;
  margin-left: auto;
}
.container .paramline .ic-info {
  position: relative;
  width: 22px;
  height: 22px;
  background-color: #ccc;
  border-radius: 50%;
  margin-left: 15px;
  margin-right: 15px;
  cursor: pointer;
}
.darkmode .container .paramline .ic-info .icn-svg {
  fill: var(--col-dark-bck);
}
@media (hover: hover) and (pointer: fine) {
  .container .paramline .ic-info:hover {
    background-color: #ddd;
  }
}
.box-popup.column .pop {
  overflow: hidden;
}
.box-popup.column .pop .container {
  display: -ms-flexbox;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
}
.box-popup.column .pop .container .left {
  position: relative;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 35%;
  background-color: #ddd;
}
.darkmode .box-popup.column .pop .container .left {
  background-color: #000;
}
.box-popup.column .pop .container .left .icn-box {
  width: 60px;
  height: 60px;
}
.box-popup.column .pop .container .left .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}
.box-popup.column .pop .container .left .img-box.fade {
  animation: opacityTweenUp 0.5s ease forwards;
}
@keyframes opacityTweenUp {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.box-popup.column .pop .container .right {
  width: 65%;
  padding: 35px;
  text-align: left;
}
.box-popup.column .pop .container .right .title sup {
  text-transform: initial;
}
.box-popup.column .pop .container .right .text {
  white-space: normal;
}
.box-popup.column .pop .container .right .bt {
  margin: 20px 0;
}
.box-popup#pop-info .slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}
.box-popup#pop-info .slideshow .overflow-box {
  position: relative;
  width: inherit;
  height: inherit;
  overflow: hidden;
  margin: 0 auto;
}
.box-popup#pop-info .slideshow .img-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * 5);
  height: 100%;
  transform: translate(0, 0);
  -ms-touch-action: none;
  touch-action: none;
}
.box-popup#pop-info .slideshow .img-row.slide {
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.box-popup#pop-info .slideshow .bloc {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.box-popup#pop-info .slideshow .img {
  height: 100%;
  background-image: url(../img/info-didac1@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.box-popup#pop-info .slideshow #bloc-tuto2 .img {
  background-image: url(../img/info-didac2@2x.png);
}
.box-popup#pop-info .slideshow #bloc-tuto3 .img {
  background-image: url(../img/info-didac3@2x.png);
}
.box-popup#pop-info .slideshow #bloc-tuto4 .img {
  background-image: url(../img/info-didac4@2x.png);
}
.box-popup#pop-info .slideshow #bloc-tuto5 .img {
  background-image: url(../img/info-didac5@2x.png);
}
.box-popup#pop-info .slideshow .txt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 75px;
  margin-top: 10px;
}
.box-popup#pop-info .slideshow .txt span {
  line-height: 1.3;
  text-align: center;
  color: #5a5a5a;
  cursor: default;
}
.darkmode .box-popup#pop-info .slideshow .txt span {
  color: #888;
}
.box-popup#pop-info .slideshow .txt b span {
  font-weight: 400;
  font-family: ralewaybold, Sans-Serif;
  color: #2f3a89;
}
.darkmode .box-popup#pop-info .slideshow .txt b {
  color: #4551ad;
}
.box-popup#pop-info .slideshow .nav-box {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.box-popup#pop-info .slideshow .nav-box .pt-box {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: auto;
  margin-bottom: calc(var(--popup-scale) * -10px);
}
.box-popup#pop-info .slideshow .nav-box .pt-box .pt {
  margin: 0 calc(var(--popup-scale) * 3px);
  width: calc(var(--popup-scale) * 6px);
  height: calc(var(--popup-scale) * 6px);
  border-radius: 50%;
  background-color: #ccc;
}
.box-popup#pop-info .slideshow .nav-box .pt.active {
  background-color: #5a5a5a;
}
.box-popup#pop-info .slideshow .nav-box .bt {
  margin-top: auto;
}
.box-popup#pop-info .slideshow .nav-box .bt.disable {
  cursor: default;
  opacity: 0.3;
}
.box-popup#pop-info .slideshow .nav-box .bt:first-child {
  margin-left: 0;
}
.box-popup#pop-info .slideshow .nav-box .bt:nth-child(2) {
  margin-right: 5%;
}
.box-popup#pop-info .slideshow .nav-box .bt .bck {
  background-color: transparent;
}
.box-popup#pop-info .slideshow .nav-box .bt .bck .icn-svg {
  fill: #ccc;
}
.box-popup#pop-info .slideshow .nav-box .bt.focused .bck {
  border-radius: 50%;
}
.box-popup .pop form {
  width: 100%;
  min-width: 390px;
  max-width: 450px;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}
.box-popup .pop .formzone {
  width: 100%;
}
.box-popup .pop .btzone {
  margin-left: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.box-popup .pop .formline {
  margin-bottom: 15px;
}
.box-popup .pop .formline:last-child {
  margin-bottom: 0;
}
.box-popup .pop .formline .icn-box {
  width: var(--icn-formline-height);
  height: var(--icn-formline-height);
  margin-right: 10px;
}
.box-popup .pop .formline .icn-box .icn-svg {
  stroke: #8c8c8c;
  fill: #8c8c8c;
}
.formline {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  height: var(--formline-height);
  font-family: ralewayregular, Sans-Serif;
  font-size: var(--normal-font-size);
}
.selectarea,
input[type="email"],
input[type="text"] {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  font-family: inherit;
  font-size: inherit;
  box-shadow: none;
  border: none;
  border-radius: 5px;
  background-color: #dcdcdc;

  text-overflow: ellipsis;
  white-space: nowrap;
}
input[type="email"].focused::-moz-placeholder,
input[type="text"].focused::-moz-placeholder {
  color: #95c2fe;
}
input[type="email"].focused:-ms-input-placeholder,
input[type="text"].focused:-ms-input-placeholder {
  color: #95c2fe;
}
input[type="email"].focused::placeholder,
input[type="text"].focused::placeholder {
  color: #95c2fe;
}
.darkmode .selectarea,
.darkmode input[type="email"],
.darkmode input[type="text"] {
  font-family: ralewaymedium;
  background-color: #2a2a2a;
  color: #ddd;
}
.selectarea.focused,
input[type="email"].focused,
input[type="text"].focused {
  background-color: var(--col-blue-site) !important;
  color: #fff;
}
.lang-ar .selectarea,
.lang-ar input[type="email"],
.lang-ar input[type="text"] {
  text-align: right;
}
input[type="email"]:focus,
input[type="text"]:focus {
  background-color: #eee;
}
.darkmode input[type="email"]:focus,
.darkmode input[type="text"]:focus {
  background-color: #444;
}
input[type="email"].invalid,
input[type="text"].invalid {
  animation: animateShake 0.5s var(--easeOutBack) 0s;
}
@keyframes animateInvalid {
  25% {
    background-color: #e88484;
    transform: translate(2px, 0);
  }
  50% {
    background-color: initial;
    transform: translate(-2px, 0);
  }
  75% {
    background-color: #e88484;
    transform: translate(2px, 0);
  }
  100% {
    background-color: initial;
    transform: translate(0, 0);
  }
}
.shake {
  animation: animateShake 0.6s var(--easeOutBack) 0s;
}
@keyframes animateShake {
  10% {
    transform: translate(15px, 0);
  }
  20% {
    transform: translate(-12px, 0);
  }
  35% {
    transform: translate(10px, 0);
  }
  50% {
    transform: translate(-10px, 0);
  }
  65% {
    transform: translate(8px, 0);
  }
  80% {
    transform: translate(-6px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@media (hover: hover) and (pointer: fine) {
  .selectarea:hover {
    cursor: text;
  }
}
.safemode #pop-popup[data-name="mix-saved"] .bt.download,
.safemode #pop-popup[data-name="mix-saved"] .bt.link,
.safemode #pop-popup[data-name="mix-saved"] .bt.share {
  display: none;
}
#pop-popup[data-name="save-form"] .formline.ic-private {
  -ms-flex-pack: start;
  justify-content: flex-start;
}
#pop-popup[data-name="save-form"] .bt-onofftext {
  height: var(--formline-height);
  width: 100%;
  border-radius: 5px;
}
#pop-popup[data-name="save-form"] .bt-onofftext .slider {
  border-radius: 5px;
  height: calc(100% - 8px);
}
.safemode #pop-popup[data-name="save-form"] .formline.ic-private {
  display: none;
}
.safemode #pop-popup[data-name="save-form"] .formline.ic-private .bt-onofftext {
  display: none;
}
#pop-popup[data-name="save-form"] .formline.ic-private .bt-onofftext.focused {
  transform: scale(1.1) !important;
}
.afs #pop-popup[data-name="save-form"] .formline.ic-name input#input-name {
  pointer-events: none;
  cursor: pointer;
}
.afs #pop-popup[data-name="save-form"] .formline.ic-dedi {
  display: none;
}
.box-popup.mini[data-name="bonus-unlocked"] .flex,
.box-popup.mini[data-name="find-next-bonus"] .flex {
  -ms-flex-align: start;
  align-items: flex-start;
  margin-top: calc(var(--popup-pointe-h) + calc(10px * var(--popup-scale)));
}
.box-popup.mini[data-name="drag-and-drop"] .flex {
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: calc(var(--popup-pointe-h) + calc(10px * var(--popup-scale)));
}
.box-popup .box .pop #pointe-box {
  position: absolute;
  top: calc(var(--popup-pointe-h) * -1);
  left: 0;
  width: 100%;
  height: var(--popup-pointe-h);
}
.box-popup .box .pop #pointe-box.bottom {
  top: unset;
  margin-top: -1px;
}
.box-popup .box .pop #pointe-box #pointe {
  position: relative;
  left: 50%;
  margin-left: calc((var(--popup-pointe-w) / 2) * -1);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 calc((var(--popup-pointe-w) / 2))
    calc((var(--popup-pointe-h) + 1px)) calc((var(--popup-pointe-w) / 2));
  border-color: transparent transparent var(--col-general-bck) transparent;
}
.box-popup .box .pop #pointe-box.bottom #pointe {
  border-width: calc((var(--popup-pointe-h) + 1px))
    calc((var(--popup-pointe-w) / 2)) 0 calc((var(--popup-pointe-w) / 2));
  border-color: var(--col-general-bck) transparent transparent transparent;
}
.box-popup .pop .progress-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.box-popup .pop .progress-box.show {
  opacity: 1;
}
.box-popup .pop .progress-box.hide {
  opacity: 0;
}
.box-popup .pop .progress-bar {
  transition: width 0.2s ease-out;
}
.box-popup .pop #bt-save-file {
  pointer-events: none;
  margin: 0;
  opacity: 0;
  text-decoration: none;
  transition: opacity 0.3s ease-out 0.2s;
}
.box-popup .pop #bt-save-file.enabled {
  pointer-events: auto;
  opacity: 1;
}
#pop-popup[data-name="safe-code"] .pop .container .bt-number {
  margin: 5px;
  width: 40px;
  height: 40px;
}
#pop-popup[data-name="safe-code"] .pop .container .bt-number .txt {
  font-size: calc(var(--bt-scale) * 16px);
}
#pop-dialog[data-name="dialog-clipboard"] .formline {
  margin-bottom: 10px;
}
#pop-dialog[data-name="dialog-clipboard"] .formline .selectarea {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
.box-popup[data-name="popup-param"] .box .pop .container .bloc-hr {
  max-height: 25px;
}
.box-popup[data-name="get-full-app"] .pop .container .right .bt-store {
  margin: 20px 0 0 0;
}
.box-popup[data-name="get-full-app-browser"] .pop {
  min-width: 600px;
}
.box-bt-store {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 24px 0;
}
.box-bt-store .bt-store {
  margin: 6px;
}
.bt-store {
  display: block;
  width: 100%;
  max-width: 200px;
  transition: transform 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}
.bt-store .bck {
  width: 100%;
  height: 0;
  padding-bottom: 29.56%;
  background-image: var(--url-img-bt-stores);
  background-repeat: no-repeat;
  background-size: cover;
  text-indent: -9999px;
}
.bt-store .bck.appstore {
  background-position: left 0;
}
.bt-store .bck.playstore {
  background-position: calc(100% / 7) 0;
}
.bt-store .bck.amazonstore {
  background-position: calc((100% / 7) * 2) 0;
}
.bt-store .bck.macappstore {
  background-position: calc((100% / 7) * 3) 0;
}
.bt-store .bck.windowsstore {
  background-position: calc((100% / 7) * 4) 0;
}
.bt-store .bck.aic {
  background-position: calc((100% / 7) * 5) 0;
}
.bt-store .bck.steam {
  background-position: calc((100% / 7) * 6) 0;
}
.bt-store .bck.schools {
  background-position: right 0;
}
#debugframe {
  z-index: 100;
  pointer-events: none;
  border: 1px solid orange;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.appBrowserDemo #home-bt-news {
  display: none !important;
}
.cn-and #lock-all.showAd {
  background-color: rgb(0, 0, 0, 0.5);
  pointer-events: auto;
  visibility: visible;
}
:root {
  --bt-bck-color: #888;
  --bt-bck-border-color: transparent;
  --bt-txt-color: #fff;
  --bt-icn-color: #fff;
  --bt-bck-color-hover: #555;
  --bt-bck-border-color-hover: transparent;
  --bt-txt-color-hover: #fff;
  --bt-icn-color-hover: #fff;
  --bt-bck-color-active: #555;
  --bt-bck-border-color-active: transparent;
  --bt-txt-color-active: #fff;
  --bt-icn-color-active: #fff;
  --bt-scale: 1;
  --bt-big-scale: 1;
}
.bt {
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  height: calc(var(--bt-scale) * 30px);
}
.bt .bck {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  background-color: var(--bt-bck-color);
  border: 1px solid var(--bt-bck-border-color);
  width: 100%;
  height: 100%;
  padding: 0 calc(var(--bt-scale) * 15px);
  border-radius: calc(var(--bt-scale) * 15px);
}
.bt .txt {
  font-family: ralewaymedium, Sans-Serif;
  font-size: calc(var(--bt-scale) * 14px);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bt-txt-color);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bt.with-icn .bck {
  padding: 0 calc(var(--bt-scale) * 15px) 0 calc(var(--bt-scale) * 5px);
}
.bt .bck .icn-svg {
  fill: var(--bt-icn-color);
  width: 90%;
  height: 90%;
}
.bt.disable {
  pointer-events: none;
  opacity: 0.3;
}
.icn-svg {
  display: inline-block;
  width: inherit;
  height: inherit;
  stroke-width: 0;
  stroke: white;
  fill: white;
}
.icn-svg path {
  stroke-width: 0;
  stroke: white;
  fill: white;
}
.bt.with-icn .bck .icn-svg {
  width: calc(var(--bt-scale) * 30px * 0.9);
  height: calc(var(--bt-scale) * 30px * 0.9);
}
.bt.with-icn.bt-big .bck .icn-svg {
  width: calc(var(--bt-big-scale) * 60px * 0.9);
  height: calc(var(--bt-big-scale) * 60px * 0.9);
}
.bt.bt-big {
  height: calc(var(--bt-big-scale) * 60px);
}
.bt.bt-big.bt-round {
  width: calc(var(--bt-big-scale) * 60px);
  height: calc(var(--bt-big-scale) * 60px);
}
.bt.bt-big .bck {
  padding: 0 calc(var(--bt-big-scale) * 30px);
  border-radius: calc(var(--bt-big-scale) * 30px);
}
.bt.bt-big.with-icn .bck {
  padding-left: calc(var(--bt-big-scale) * 10px);
}
.bt.bt-big .txt {
  font-size: calc(var(--bt-big-scale) * 20px);
}
.bt.bt-round {
  width: calc(var(--bt-scale) * 30px);
  height: calc(var(--bt-scale) * 30px);
}
.bt.bt-round .bck {
  padding: 0;
  border-radius: 50%;
}
.bt.bt-44 {
  width: calc(var(--bt-scale) * 44px);
  height: calc(var(--bt-scale) * 44px);
}
.bt.bt-80 {
  width: calc(var(--bt-scale) * 80px);
  height: calc(var(--bt-scale) * 80px);
}
.bt {
  transform: translate3d(0, 0, 0);
}
.bt.ontouch {
  animation: btTouch 0.2s ease-out;
}
@keyframes btTouch {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.bt.bt-haut {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: calc(var(--bt-scale) * 60px);
  height: calc(var(--bt-scale) * 90px);
}
.bt.bt-haut .bck {
  position: relative;
  width: calc(var(--bt-scale) * 60px);
  height: calc(var(--bt-scale) * 60px);
  background-color: var(--bt-bck-color);
  border-radius: 50%;
  padding: 0;
}
.bt.bt-haut .txt {
  width: 120%;
  margin-left: -10%;
  margin-top: calc(var(--bt-scale) * 10px);
  color: var(--bt-bck-color);
}
.bt.bt-haut.focused .txt {
  color: var(--col-blue-site) !important;
}
.bt-onoff {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: start;
  justify-content: start;
  width: calc(var(--bt-scale) * 90px);
  height: calc(var(--bt-scale) * 30px);
  padding: 0 calc(var(--bt-scale) * 3px);
  border-radius: calc(var(--bt-scale) * 15px);
  transition: all 0.1s ease-in-out;
  background-color: #ccc;
  margin-left: auto;
  cursor: pointer;
}
.bt-onoff .slider {
  width: calc(var(--bt-scale) * 40px);
  height: calc(var(--bt-scale) * 24px);
  background-color: #fafafa;
  border-radius: calc(var(--bt-scale) * 12px);
  margin-left: 0;
  transition: margin 0.2s ease-in-out;
}
.bt-onoff.active {
  background-color: #8c8c8c;
}
.bt-onoff.active .slider {
  margin-left: 53%;
}
.darkmode .bt-onoff {
  background-color: #444;
}
.darkmode .bt-onoff.active {
  background-color: #888;
}
.darkmode .bt-onoff .slider {
  background-color: #0a0a0a;
}
.bt-onoff.focused {
  background-color: var(--col-blue-site) !important;
}
.darkmode .bt {
  --bt-bck-color: #555;
  --bt-bck-color-hover: #333;
  --bt-bck-color-active: #333;
}
.bt.focused {
  background-color: transparent !important;
}
.bt.focused .bck {
  background-color: var(--col-blue-site) !important;
}
.bt.focused .txt {
  color: #fff !important;
}
.bt.bt-light {
  --bt-bck-color: #fff;
  --bt-bck-border-color: #aaa;
  --bt-txt-color: #888;
  --bt-icn-color: #aaa;
  --bt-bck-color-hover: #555;
  --bt-bck-border-color-hover: #555;
  --bt-txt-color-hover: #fff;
  --bt-icn-color-hover: #ddd;
  --bt-bck-color-active: #555;
  --bt-bck-border-color-active: #555;
  --bt-txt-color-active: #fff;
  --bt-icn-color-active: #ddd;
}
.darkmode .bt.bt-light {
  --bt-bck-color: #0a0a0a;
  --bt-bck-border-color: #666;
  --bt-txt-color: #ccc;
  --bt-icn-color: #ccc;
  --bt-bck-color-hover: #555;
  --bt-bck-border-color-hover: #555;
  --bt-txt-color-hover: #fff;
  --bt-icn-color-hover: #fff;
  --bt-bck-color-active: #555;
  --bt-bck-border-color-active: #555;
  --bt-txt-color-active: #fff;
  --bt-icn-color-active: #fff;
}
.bt.bt-soft {
  --bt-bck-color: #eee;
  --bt-txt-color: #888;
  --bt-icn-color: #999;
  --bt-bck-color-hover: #555;
  --bt-txt-color-hover: #ddd;
  --bt-icn-color-hover: #ddd;
  --bt-bck-color-active: #444;
  --bt-txt-color-active: #fff;
  --bt-icn-color-active: #fff;
}
.darkmode .bt.bt-soft {
  --bt-bck-color: #222;
  --bt-txt-color: #888;
  --bt-icn-color: #888;
  --bt-bck-color-active: #555;
}
.bt.color {
  --bt-bck-color: var(--col1);
  --bt-bck-color-hover: var(--col3);
  --bt-bck-color-active: var(--col4);
}
.bt.color-red,
.bt.color-youtube {
  --bt-bck-color: var(--col-red1);
  --bt-txt-color: var(--col-red1);
  --bt-bck-color-hover: var(--col-red2);
  --bt-txt-color-hover: var(--col-red2);
}
.bt.color-green {
  --bt-bck-color: var(--col-green1);
  --bt-txt-color: var(--col-green1);
  --bt-bck-color-hover: var(--col-green2);
  --bt-txt-color-hover: var(--col-green2);
}
.bt.color-blue {
  --bt-bck-color: var(--col-blue1);
  --bt-txt-color: var(--col-blue1);
  --bt-bck-color-hover: var(--col-blue2);
  --bt-txt-color-hover: var(--col-blue2);
}
.bt.color-facebook {
  --bt-bck-color: #3c5a97;
  --bt-txt-color: #3c5a97;
  --bt-bck-color-hover: #2f3a89;
  --bt-txt-color-hover: #2f3a89;
}
.bt.color-twitter {
  --bt-bck-color: #1da1f2;
  --bt-txt-color: #1da1f2;
  --bt-bck-color-hover: #3e82d7;
  --bt-txt-color-hover: #3e82d7;
}
.bt.color-instagram {
  --bt-bck-color: #e95950;
  --bt-bck-border-color: #e95950;
  --bt-bck-color-hover: #cc4340;
  --bt-txt-color-hover: #cc4340;
}
.bt.color-tumblr {
  --bt-bck-color: #2b4d66;
  --bt-txt-color: #2b4d66;
  --bt-bck-color-hover: #203a49;
  --bt-txt-color-hover: #203a49;
}
.bt.color-black {
  --bt-bck-color: #000;
  --bt-txt-color: #fff;
  --bt-bck-color-hover: #333;
  --bt-txt-color-hover: #ddd;
}
@media (hover: hover) and (pointer: fine) {
  .bt:not(.active):not(.focused) {
    cursor: pointer;
  }
  .bt:not(.active):not(.focused) .bck {
    transition: background-color, border-color, 0.2s;
  }
  .bt:hover:not(.active):not(.focused) .bck {
    transition-duration: 0s;
  }
  .bt:hover:not(.active):not(.focused) {
    --bt-bck-color: var(--bt-bck-color-hover) !important;
    --bt-bck-border-color: var(--bt-bck-border-color-hover) !important;
    --bt-txt-color: var(--bt-txt-color-hover) !important;
    --bt-icn-color: var(--bt-icn-color-hover) !important;
  }
}
.bt.active,
.darkmode .bt.active {
  --bt-bck-color: var(--bt-bck-color-active) !important;
  --bt-bck-border-color: var(--bt-bck-border-color-active) !important;
  --bt-txt-color: var(--bt-txt-color-active) !important;
  --bt-icn-color: var(--bt-icn-color-active) !important;
}
.hitzone {
  position: absolute;
  width: 100%;
  left: 0;
  width: 150%;
  height: 150%;
  left: -25%;
  top: -25%;
}
.bt:not(.bt-round) .hitzone {
  width: 100%;
  left: 0;
}
.bt.bt-haut .hitzone {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.tab {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: auto;
  min-width: 100px;
  height: var(--tab-height);
  padding: 0 24px;
  margin-left: -10px;
  border-radius: 6px 6px 0 0;
  font-family: ralewaymedium, Sans-Serif;
  font-size: var(--medium-font-size);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--col0);
  background-color: var(--col3);
  cursor: pointer;
  white-space: nowrap;
}
.tab:first-child {
  margin-left: 0;
}
.tab.active {
  z-index: 1;
  color: #fff;
  background-color: var(--col1);
}
.tab .hitzone {
  left: 0;
  top: -50%;
  width: 100%;
  height: 150%;
}
.tab.icon .icon {
  margin-right: 8px;
  margin-left: -8px;
  width: 24px;
  height: 100%;
}
.tab.icon .icon .icn-svg {
  fill: var(--col1);
  stroke: var(--col1);
}
.tab.icon.active .icon .icn-svg {
  fill: var(--col4);
  stroke: var(--col4);
}
.tab.icon.active.spin .icon .icn-svg {
  fill: #fff;
  stroke: #fff;
}
.tab.focused {
  background-color: var(--col-blue-site) !important;
  color: #fff !important;
  transform-origin: bottom center;
  z-index: 2;
}
.tab.focused:first-child {
  transform-origin: bottom left;
}
.tab.focused:last-child {
  transform-origin: bottom right;
}
.tab.focused .icn-svg {
  fill: white !important;
  stroke: white !important;
}
.focused:not(.line) {
  transform: scale(1.1) !important;
}
.miniPlayer .centermax {
  max-width: 100%;
  max-height: 100%;
}
.miniPlayer .main-bt .box-top {
  display: none;
}
.miniPlayer #home #img-titre {
  display: none;
}
.miniPlayer .main-bt .box-bot {
  margin-top: auto;
}
.miniPlayer .progress-box {
  border-color: var(--col-blue-site);
  background-color: var(--col-blue-site);
  width: 80vh;
  height: 5vh;
  padding: 0.7vh;
  max-width: 200px;
  max-height: 20px;
  min-width: 100px;
  min-height: 12px;
}
.miniPlayer .progress-box .progress-bar {
  background-color: #fff;
}
.miniPlayer #home-bt-list,
.miniPlayer #home-bt-switch {
  display: none;
}
.miniPlayer #home-bt-play {
  font-size: var(--normal-font-size);
  width: 20vh;
  height: 20vh;
  max-width: 80px;
  max-height: 80px;
  min-width: 40px;
  min-height: 40px;
}
.miniPlayer #home-bt-play .bck {
  background-color: var(--col-blue-site);
}
@media (hover: hover) and (pointer: fine) {
  .miniPlayer #home-bt-play:hover .bck {
    background-color: var(--col-blue-site-hover);
  }
}
.miniPlayer #home #home-dedicated:not(:empty) {
  display: block;
  margin-top: 1%;
  font-family: ralewaymedium, Sans-Serif;
  font-size: var(--big-font-size);
  color: var(--col-blue-site);
  opacity: 0;
  transform: translateY(20px);
}
.miniPlayer #home #home-dedicated.animate {
  animation: tweenDedicated 1s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;
}
@keyframes tweenDedicated {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.miniPlayer #box-top {
  display: none;
}
.miniPlayer #box-reading-bar {
  top: 0;
  height: 2.2%;
}
.miniPlayer #game #box-stage-bck {
  top: 0;
  bottom: 0;
}
.miniPlayer #game #box-stage {
  top: 0;
  bottom: 0;
}
.miniPlayer #game #box-video {
  top: 0;
  bottom: 0;
}
.miniPlayer #box-bottom {
  display: none;
}
@media only screen and (min-height: 850px) {
  :root {
    --app-ratio: calc(1366 / 1024);
    --max-app-width-int: 1100;
    --max-app-height-int: calc(var(--max-app-width-int) / var(--app-ratio));
    --max-app-width: calc(var(--max-app-width-int) * 1px);
    --max-app-height: calc(var(--max-app-height-int) * 1px);
    --ratio-h: calc(100vh / var(--max-app-height-int));
    --fullfill-padding: 0px !important;
  }
}
@media only screen and (min-height: 550px) {
  #home .gradient {
    display: none;
  }
}
@media only screen and (max-height: 550px) {
  :root {
    --mini-font-size: 11px;
    --small-font-size: 12px;
    --normal-font-size: 13px;
    --medium-font-size: 15px;
    --big-font-size: 16px;
    --huge-font-size: 18px;
    --mixlist-rating-font-size: 16px;
    --bt-scale: 0.8;
    --bt-big-scale: 0.75;
    --popup-scale: 0.7;
    --mixlist-scale: 0.5;
    --sp-intro-scale: 0.9;
    --sp-select-scale: 0.9;
    --tab-height: 40px;
    --formline-height: 35px;
    --icn-formline-height: 25px;
  }
  .tab {
    min-width: 70px;
    padding: 0 12px;
    margin-left: -6px;
    border-radius: 3px 3px 0 0;
  }
  .tab.icon .icon {
    margin-right: 4px;
    margin-left: -4px;
    width: 18px;
  }
  .box-popup.with-tab .box {
    max-width: 480px;
  }
  .box-popup.with-tab .pop .container {
    padding: 30px;
  }
  .pop#pop-language .bt {
    width: 92px;
    margin: 5px;
  }
  .bt-store {
    max-width: 150px;
  }
  #home {
    background-size: auto 130vh;
    background-position: center calc(50% - 35px);
  }
  .miniPlayer #home {
    background-size: auto 150vh;
    background-position: center calc(50% - 20px);
  }
  #home-bt-news {
    width: calc(var(--bt-scale) * 50px);
    height: calc(var(--bt-scale) * 50px);
  }
  #mixlist #poplist {
    width: calc(100vw - 400px);
    min-width: 480px;
    height: calc(100vh - 20px);
  }
  #mixlist #poplist .tab-filter {
    padding: 8px;
  }
  #mixlist #poplist .tab-filter .bt {
    min-width: 80px;
  }
  #mixlist #poplist .boxline .line {
    height: 80px;
  }
  #mixlist #poplist .box-action {
    padding: 0 12px;
  }
  .mixbanner {
    font-size: var(--normal-font-size);
  }
  .mixbanner .rating {
    width: 44px;
    height: 44px;
  }
  .mixbanner .info .dj .box-flag {
    width: 17px;
  }
  .mixbanner .data .stat .boxstat .bck {
    width: 16px;
    height: 16px;
  }
}
@media only screen and (max-height: 450px) {
  :root {
    --sp-intro-scale: 0.9;
    --sp-select-scale: 0.7;
    --popup-scale: 0.6;
  }
  #home-bt-play {
    width: calc(var(--bt-scale) * 80px);
    height: calc(var(--bt-scale) * 80px);
  }
}
@media only screen and (max-height: 430px) {
  :root {
    --bt-big-scale: 0.55;
  }
  .box-popup.big.with-tab .box {
    max-height: 100vh;
  }
  .progress-box {
    height: 16px;
    width: 150px;
  }
}
@media only screen and (max-height: 350px) {
  :root {
    --mini-font-size: 10px;
    --small-font-size: 11px;
    --normal-font-size: 12px;
    --medium-font-size: 13px;
    --big-font-size: 15px;
    --huge-font-size: 16px;
    --sp-intro-scale: 0.6;
    --sp-select-scale: 0.6;
    --bt-big-scale: 0.55;
    --tab-height: 35px;
  }
  .box-popup.big:not(.action) .box {
    width: calc(100vw - 100px);
    height: calc(100vh - 20px);
  }
  .box-popup.big.with-tab .box {
    max-width: 460px;
  }
  .box-popup.with-tab .pop .container {
    padding: 20px;
  }
  #home .gradient#gradient-bot {
    height: 50%;
  }
  #home-bt-list,
  #home-bt-play,
  #home-bt-switch {
    width: 55px;
    height: 55px;
  }
  #mixlist #poplist .boxline .line {
    height: 60px;
  }
}
.fflag {
  position: relative;
  width: 100%;
  height: 0;
  padding: 30%;
  background-image: url(../img/flags.png);
  background-repeat: no-repeat;
  background-size: 100% 49494%;
}
.fflag.ff-sm {
  width: 18px;
  height: 11px;
}
.fflag.ff-md {
  width: 27px;
  height: 17px;
}
.fflag.ff-lg {
  width: 42px;
  height: 27px;
}
.fflag.ff-xl {
  width: 60px;
  height: 37px;
}
.fflag-CH,
.fflag-NP {
  box-shadow: none !important;
}
.fflag-DZ {
  background-position: center 0.2287%;
}
.fflag-AO {
  background-position: center 0.4524%;
}
.fflag-BJ {
  background-position: center 0.6721%;
}
.fflag-BW {
  background-position: center 0.8958%;
}
.fflag-BF {
  background-position: center 1.1162%;
}
.fflag-BI {
  background-position: center 1.3379%;
}
.fflag-CM {
  background-position: center 1.5589%;
}
.fflag-CV {
  background-position: center 1.7805%;
}
.fflag-CF {
  background-position: center 2.0047%;
}
.fflag-TD {
  background-position: center 2.2247%;
}
.fflag-CD {
  background-position: left 2.4467%;
}
.fflag-DJ {
  background-position: left 2.6674%;
}
.fflag-EG {
  background-position: center 2.8931%;
}
.fflag-GQ {
  background-position: center 3.1125%;
}
.fflag-ER {
  background-position: left 3.3325%;
}
.fflag-ET {
  background-position: center 3.5542%;
}
.fflag-GA {
  background-position: center 3.7759%;
}
.fflag-GM {
  background-position: center 4.0015%;
}
.fflag-GH {
  background-position: center 4.2229%;
}
.fflag-GN {
  background-position: center 4.441%;
}
.fflag-GW {
  background-position: left 4.66663%;
}
.fflag-CI {
  background-position: center 4.8844%;
}
.fflag-KE {
  background-position: center 5.1061%;
}
.fflag-LS {
  background-position: center 5.3298%;
}
.fflag-LR {
  background-position: left 5.5495%;
}
.fflag-LY {
  background-position: center 5.7712%;
}
.fflag-MG {
  background-position: center 5.994%;
}
.fflag-MW {
  background-position: center 6.2156%;
}
.fflag-ML {
  background-position: center 6.4363%;
}
.fflag-MR {
  background-position: center 6.658%;
}
.fflag-MU {
  background-position: center 6.8805%;
}
.fflag-YT {
  background-position: center 7.1038%;
}
.fflag-MA {
  background-position: center 7.3231%;
}
.fflag-MZ {
  background-position: left 7.5448%;
}
.fflag-NA {
  background-position: left 7.7661%;
}
.fflag-NE {
  background-position: center 7.98937%;
}
.fflag-NG {
  background-position: center 8.2099%;
}
.fflag-CG {
  background-position: center 8.4316%;
}
.fflag-RE {
  background-position: center 8.6533%;
}
.fflag-RW {
  background-position: right 8.875%;
}
.fflag-SH {
  background-position: center 9.0967%;
}
.fflag-ST {
  background-position: center 9.32237%;
}
.fflag-SN {
  background-position: center 9.5426%;
}
.fflag-SC {
  background-position: left 9.7628%;
}
.fflag-SL {
  background-position: center 9.9845%;
}
.fflag-SO {
  background-position: center 10.2052%;
}
.fflag-ZA {
  background-position: left 10.4269%;
}
.fflag-SS {
  background-position: left 10.6486%;
}
.fflag-SD {
  background-position: center 10.8703%;
}
.fflag-SR {
  background-position: center 11.0945%;
}
.fflag-SZ {
  background-position: center 11.3135%;
}
.fflag-TG {
  background-position: left 11.5354%;
}
.fflag-TN {
  background-position: center 11.7593%;
}
.fflag-UG {
  background-position: center 11.9799%;
}
.fflag-TZ {
  background-position: center 12.2005%;
}
.fflag-EH {
  background-position: center 12.4222%;
}
.fflag-YE {
  background-position: center 12.644%;
}
.fflag-ZM {
  background-position: center 12.8664%;
}
.fflag-ZW {
  background-position: left 13.0873%;
}
.fflag-AI {
  background-position: center 13.309%;
}
.fflag-AG {
  background-position: center 13.5307%;
}
.fflag-AR {
  background-position: center 13.7524%;
}
.fflag-AW {
  background-position: left 13.9741%;
}
.fflag-BS {
  background-position: left 14.1958%;
}
.fflag-BB {
  background-position: center 14.4175%;
}
.fflag-BQ {
  background-position: center 14.6415%;
}
.fflag-BZ {
  background-position: center 14.8609%;
}
.fflag-BM {
  background-position: center 15.0826%;
}
.fflag-BO {
  background-position: center 15.306%;
}
.fflag-VG {
  background-position: center 15.528%;
}
.fflag-BR {
  background-position: center 15.7496%;
}
.fflag-CA {
  background-position: center 15.9694%;
}
.fflag-KY {
  background-position: center 16.1911%;
}
.fflag-CL {
  background-position: left 16.4128%;
}
.fflag-CO {
  background-position: left 16.6345%;
}
.fflag-KM {
  background-position: center 16.8562%;
}
.fflag-CR {
  background-position: center 17.0779%;
}
.fflag-CU {
  background-position: left 17.2996%;
}
.fflag-CW {
  background-position: center 17.5213%;
}
.fflag-DM {
  background-position: center 17.743%;
}
.fflag-DO {
  background-position: center 17.968%;
}
.fflag-EC {
  background-position: center 18.1864%;
}
.fflag-SV {
  background-position: center 18.4081%;
}
.fflag-FK {
  background-position: center 18.6298%;
}
.fflag-GF {
  background-position: center 18.8515%;
}
.fflag-GL {
  background-position: left 19.0732%;
}
.fflag-GD {
  background-position: center 19.2987%;
}
.fflag-GP {
  background-position: center 19.518%;
}
.fflag-GT {
  background-position: center 19.7383%;
}
.fflag-GY {
  background-position: center 19.96%;
}
.fflag-HT {
  background-position: center 20.1817%;
}
.fflag-HN {
  background-position: center 20.4034%;
}
.fflag-JM {
  background-position: center 20.6241%;
}
.fflag-MQ {
  background-position: center 20.8468%;
}
.fflag-MX {
  background-position: center 21.0685%;
}
.fflag-MS {
  background-position: center 21.2902%;
}
.fflag-NI {
  background-position: center 21.5119%;
}
.fflag-PA {
  background-position: center 21.7336%;
}
.fflag-PY {
  background-position: center 21.9553%;
}
.fflag-PE {
  background-position: center 22.177%;
}
.fflag-PR {
  background-position: left 22.4002%;
}
.fflag-BL {
  background-position: center 22.6204%;
}
.fflag-KN {
  background-position: center 22.8421%;
}
.fflag-LC {
  background-position: center 23.0638%;
}
.fflag-PM {
  background-position: center 23.2855%;
}
.fflag-VC {
  background-position: center 23.5072%;
}
.fflag-SX {
  background-position: left 23.732%;
}
.fflag-TT {
  background-position: center 23.9506%;
}
.fflag-TC {
  background-position: center 24.1723%;
}
.fflag-US {
  background-position: center 24.392%;
}
.fflag-VI {
  background-position: center 24.6157%;
}
.fflag-UY {
  background-position: left 24.8374%;
}
.fflag-VE {
  background-position: center 25.0591%;
}
.fflag-AB {
  background-position: center 25.279%;
}
.fflag-AF {
  background-position: center 25.5025%;
}
.fflag-AZ {
  background-position: center 25.7242%;
}
.fflag-BD {
  background-position: center 25.9459%;
}
.fflag-BT {
  background-position: center 26.1676%;
}
.fflag-BN {
  background-position: center 26.3885%;
}
.fflag-KH {
  background-position: center 26.611%;
}
.fflag-CN {
  background-position: left 26.8327%;
}
.fflag-GE {
  background-position: center 27.0544%;
}
.fflag-HK {
  background-position: center 27.2761%;
}
.fflag-IN {
  background-position: center 27.4978%;
}
.fflag-ID {
  background-position: center 27.7195%;
}
.fflag-JP {
  background-position: center 27.9412%;
}
.fflag-KZ {
  background-position: center 28.1615%;
}
.fflag-LA {
  background-position: center 28.3846%;
}
.fflag-MO {
  background-position: center 28.6063%;
}
.fflag-MY {
  background-position: center 28.829%;
}
.fflag-MV {
  background-position: center 29.0497%;
}
.fflag-MN {
  background-position: left 29.2714%;
}
.fflag-MM {
  background-position: center 29.4931%;
}
.fflag-NP {
  background-position: left 29.7148%;
}
.fflag-KP {
  background-position: left 29.9365%;
}
.fflag-MP {
  background-position: center 30.1582%;
}
.fflag-PW {
  background-position: center 30.3799%;
}
.fflag-PG {
  background-position: center 30.6016%;
}
.fflag-PH {
  background-position: left 30.8233%;
}
.fflag-SG {
  background-position: left 31.045%;
}
.fflag-KR {
  background-position: center 31.2667%;
}
.fflag-LK {
  background-position: right 31.4884%;
}
.fflag-TW {
  background-position: left 31.7101%;
}
.fflag-TJ {
  background-position: center 31.9318%;
}
.fflag-TH {
  background-position: center 32.1535%;
}
.fflag-TL {
  background-position: left 32.3752%;
}
.fflag-TM {
  background-position: center 32.5969%;
}
.fflag-VN {
  background-position: center 32.8186%;
}
.fflag-AX {
  background-position: center 33.0403%;
}
.fflag-AL {
  background-position: center 33.25975%;
}
.fflag-AD {
  background-position: center 33.4837%;
}
.fflag-AM {
  background-position: center 33.7054%;
}
.fflag-AT {
  background-position: center 33.9271%;
}
.fflag-BY {
  background-position: left 34.1488%;
}
.fflag-BE {
  background-position: center 34.3705%;
}
.fflag-BA {
  background-position: center 34.5922%;
}
.fflag-BG {
  background-position: center 34.8139%;
}
.fflag-HR {
  background-position: center 35.0356%;
}
.fflag-CY {
  background-position: center 35.2555%;
}
.fflag-CZ {
  background-position: left 35.479%;
}
.fflag-DK {
  background-position: center 35.7007%;
}
.fflag-EE {
  background-position: center 35.9224%;
}
.fflag-FO {
  background-position: center 36.1441%;
}
.fflag-FI {
  background-position: center 36.3658%;
}
.fflag-FR {
  background-position: center 36.5875%;
}
.fflag-DE {
  background-position: center 36.8092%;
}
.fflag-GI {
  background-position: center 37.0309%;
}
.fflag-GR {
  background-position: left 37.2526%;
}
.fflag-GG {
  background-position: center 37.4743%;
}
.fflag-HU {
  background-position: center 37.696%;
}
.fflag-IS {
  background-position: center 37.9177%;
}
.fflag-IE {
  background-position: center 38.1394%;
}
.fflag-IM {
  background-position: center 38.3611%;
}
.fflag-IT {
  background-position: center 38.5828%;
}
.fflag-JE {
  background-position: center 38.8045%;
}
.fflag-XK {
  background-position: center 39.0262%;
}
.fflag-LV {
  background-position: center 39.2479%;
}
.fflag-LI {
  background-position: left 39.4696%;
}
.fflag-LT {
  background-position: center 39.6913%;
}
.fflag-LU {
  background-position: center 39.913%;
}
.fflag-MT {
  background-position: left 40.1347%;
}
.fflag-MD {
  background-position: center 40.3564%;
}
.fflag-MC {
  background-position: center 40.5781%;
}
.fflag-ME {
  background-position: center 40.7998%;
}
.fflag-NL {
  background-position: center 41.0215%;
}
.fflag-MK {
  background-position: center 41.2432%;
}
.fflag-NO {
  background-position: center 41.4649%;
}
.fflag-PL {
  background-position: center 41.6866%;
}
.fflag-PT {
  background-position: center 41.9083%;
}
.fflag-RO {
  background-position: center 42.13%;
}
.fflag-RU {
  background-position: center 42.3517%;
}
.fflag-SM {
  background-position: center 42.5734%;
}
.fflag-RS {
  background-position: center 42.7951%;
}
.fflag-SK {
  background-position: center 43.0168%;
}
.fflag-SI {
  background-position: center 43.2385%;
}
.fflag-ES {
  background-position: left 43.4602%;
}
.fflag-SE {
  background-position: center 43.6819%;
}
.fflag-CH {
  background-position: center 43.9036%;
}
.fflag-TR {
  background-position: center 44.1253%;
}
.fflag-UA {
  background-position: center 44.347%;
}
.fflag-GB {
  background-position: center 44.5687%;
}
.fflag-VA {
  background-position: right 44.7904%;
}
.fflag-BH {
  background-position: center 45.0121%;
}
.fflag-IR {
  background-position: center 45.2338%;
}
.fflag-IQ {
  background-position: center 45.4555%;
}
.fflag-IL {
  background-position: center 45.6772%;
}
.fflag-KW {
  background-position: left 45.897%;
}
.fflag-JO {
  background-position: left 46.1206%;
}
.fflag-KG {
  background-position: center 46.3423%;
}
.fflag-LB {
  background-position: center 46.561%;
}
.fflag-OM {
  background-position: left 46.7857%;
}
.fflag-PK {
  background-position: center 47.0074%;
}
.fflag-PS {
  background-position: center 47.2291%;
}
.fflag-QA {
  background-position: center 47.4508%;
}
.fflag-SA {
  background-position: center 47.6725%;
}
.fflag-SY {
  background-position: center 47.8942%;
}
.fflag-AE {
  background-position: center 48.1159%;
}
.fflag-UZ {
  background-position: left 48.3376%;
}
.fflag-AS {
  background-position: right 48.5593%;
}
.fflag-AU {
  background-position: center 48.781%;
}
.fflag-CX {
  background-position: center 49.002%;
}
.fflag-CC {
  background-position: center 49.2244%;
}
.fflag-CK {
  background-position: center 49.4445%;
}
.fflag-FJ {
  background-position: center 49.6678%;
}
.fflag-PF {
  background-position: center 49.8895%;
}
.fflag-GU {
  background-position: center 50.1112%;
}
.fflag-KI {
  background-position: center 50.3329%;
}
.fflag-MH {
  background-position: left 50.5546%;
}
.fflag-FM {
  background-position: center 50.7763%;
}
.fflag-NC {
  background-position: center 50.998%;
}
.fflag-NZ {
  background-position: center 51.2197%;
}
.fflag-NR {
  background-position: left 51.4414%;
}
.fflag-NU {
  background-position: center 51.6631%;
}
.fflag-NF {
  background-position: center 51.8848%;
}
.fflag-WS {
  background-position: left 52.1065%;
}
.fflag-SB {
  background-position: left 52.3282%;
}
.fflag-TK {
  background-position: center 52.5499%;
}
.fflag-TO {
  background-position: left 52.7716%;
}
.fflag-TV {
  background-position: center 52.9933%;
}
.fflag-VU {
  background-position: left 53.215%;
}
.fflag-WF {
  background-position: center 53.4385%;
}
.fflag-AQ {
  background-position: center 53.6584%;
}
.fflag-EU {
  background-position: center 53.875%;
}
.fflag-JR {
  background-position: center 54.099%;
}
.fflag-OLY {
  background-position: center 54.32%;
}
.fflag-UN {
  background-position: center 54.54%;
}
#img-secretqr {
  margin-top: 10px;
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#img-secretqr:hover {
  transform: scale(1.1);
}

@keyframes animated-bt-switch-void {
  from {
    background-position: -520px 0px;
  }
  to {
    background-position: -1040px 0px;
  }
}

.darkmode .text{
  color:#888
}

.scale{
  z-index: 5;
}

.bac.animateFadeIn{
  z-index: 4;
}

@media only screen and (max-height: 550px) {
  .evadare-beta-text{
    font-size: 9px;
  }
}

@keyframes iconAnimation {
  0% { background-position: 0 calc((100% / 8) * 5); }
  20% { background-position: 0 calc((100% / 8) * 5); }
  40% { background-position: 0 calc((100% / 8) * 5); }
  60% { background-position: 50% calc((100% / 8) * 5); }
  80% { background-position: 50 calc((100% / 8) * 5); }
  100% { background-position: 100% calc((100% / 8) * 5); }
}

#customicon{
  width: 120px;
  height: 120px;
  border-radius: 25%;
  transition: transform 0.2s var(--easeInCubic);
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#sp-select .vicon:hover #customicon, #sp-select .vicon#icon3:hover .img, .locked-vicon:hover .vicon #customicon{
  transform: scale(1.05);
  transition: transform 0.15s var(--easeOutBack);
}

#sp-select .vicon.clicked #customicon, #sp-select .vicon.clicked#icon3 .img {
  transform: scale(1.05);
  transition: transform 0.15s var(--easeOutBack);
}

#sp-select .vicon.open #customicon, #sp-select .vicon.open#icon3 .img {
  pointer-events: none !important;
  transform: scale(1.05);
}


.quickmessage .modding-build{
  text-align: left;
}

.quickmessage{
  pointer-events: none;
  color: #ffffff;
  background-color: #000;
  font-weight: bold;
  padding: 0px 5px;
  font-size: 24px;
  filter: drop-shadow(5px 5px 0px #00000022);
  transition: all 0.5s var(--easeOutBack);
  text-align: center;
}

#customIconName {
  font-family: 'Allan', sans-serif;
  font-size: 22px;
  margin-top: 4px;
  text-align: center;
}

@media only screen and (max-height: 550px) {
  #customicon {
    width: 108px;
    height: 108px;
  }
  #customIconName {
    font-size: 20px;
  }
  .bt-modcredits {
    width: 90px;
    height: 90px;
  }
}

@media only screen and (max-height: 450px) {
  #customicon {
    width: 84px;
    height: 84px;
  }
  #customIconName {
    font-size: 16px;
  }
}

@media only screen and (max-height: 350px) {
  #customicon {
    width: 72px;
    height: 72px;
  }
  #customIconName {
    font-size: 14px;
  }
}

#home-bt-modcredits:hover{
  transform: scale(1.05);
  cursor: pointer;
}

.gallery-container {
  position: relative;
  min-height: 395px;
  width: 599px;
  overflow: hidden;
}

.gallery-slider {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
}

.gallery-slide {
  min-width: 100%;
  transition: transform 0.5s ease;
  max-height: 473px;
  overflow: auto;
  padding: 10px;
}

.gallery-slide::-webkit-scrollbar {
  border-radius: 10px;
}

#credits-images {
  height: 245px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.container {
  padding: 20px;
}

#text-credits {
  margin-bottom: 25px;
  margin-top: 5px;
  color: #5a5a5a;
}
.darkmode #text-credits {
  color: #888;
}


button{
  padding: 3px 20px;
  border: 1px solid #444;
  background-color: #0a0a0a;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
  border-radius: 50px;
  transition: background-color, border-color, .3s;
  margin: 2px;
  font-family: ralewaymedium, Sans-Serif;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

button:hover{
background-color: #444;
color: white;
transition: none;
}

.darkmode button.prev {
  position: absolute;
  top: 248px;
  left: -22px;
  background-color: #555555;
  border-radius: 50px;
  width: 46px;
  height: 46px;
  padding: 0px;
  margin: 0px;
  color: #ffffff;
  border: none;
  font-size: 21px;
}

.darkmode button.prev:hover {
  background-color: #333333;
  transform: scale(1.1)
}

button.prev {
  position: absolute;
  top: 248px;
  left: -22px;
  background-color: #888888;
  border-radius: 50px;
  width: 46px;
  height: 46px;
  padding: 0px;
  margin: 0px;
  color: #ffffff;
  border: none;
  font-size: 21px;
  z-index: 9;
}

button.prev:hover {
  background-color: #555555;
  transform: scale(1.1)
}

.darkmode button.next {
  position: absolute;
  top: 248px;
  right: -22px;
  background-color: #555555;
  border-radius: 50px;
  width: 46px;
  height: 46px;
  padding: 0px;
  margin: 0px;
  color: #ffffff;
  border: none;
  font-size: 21px;
}

.darkmode button.next:hover {
  background-color: #333333;
  transform: scale(1.1)
}

button.next {
  position: absolute;
  top: 248px;
  right: -22px;
  background-color: #888888;
  border-radius: 50px;
  width: 46px;
  height: 46px;
  padding: 0px;
  margin: 0px;
  color: #ffffff;
  border: none;
  font-size: 21px;
  z-index: 9;
}

button.next:hover {
  background-color: #555555;
  transform: scale(1.1)
}

.credit-inline-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
  border-radius: 3px;
  
}

.gradient-text {
  background: linear-gradient(to right, var(--start), var(--end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.credit-emoji {
  height: 1.6em;
  width: 1.6em;
  vertical-align: -6.4px;
}

.credit-link[style]:hover {
  opacity: 0.5;
}

.credit-link {
  color: var(--col1);
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

.credit-link:hover {
  color: var(--col2);
}

.shadow-box {
  z-index: 999;
}

iframe.credit-video {
  width: 438px;
  height: 245px;
}

.bt-modcredits {
  opacity: 0;
  transform: scale(0) rotate(10deg);
  background-image: url("../mod-credits/_credits-icon@2x.png");
  background-repeat: no-repeat;
  width: 110px;
  background-size: cover;
  height: 110px;
  transition: transform 0.30s var(--easeOutBack);
}

#box-stage-bck::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  background-image: var(--layer-image);
}

#box-stage-bck .stage-fade {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s ease;
}


.bt-modcredits.animate {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

#custom-cursor {
  width: 32px;
  height: 32px;
  position: fixed;
  pointer-events: none;
  z-index: 999999999;
  transform: translate(-50%, -50%);
  background: url("") no-repeat center;
  background-size: contain;
}

.coin{
  z-index: 99;
  pointer-events: none;
}

#coin-counter{
  font-size: 42px;
  color: #d29040;
  font-family: 'Allan';
  font-weight: bold;
  filter: drop-shadow(2px 2px 0px #a8652e);
}

#coinhud {
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 14px;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}

#library {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  width: 850px;
}

.library-scroll {
  position: relative;
  max-height: 100vh;
  overflow-y: auto;
  padding: 20px;
}

.library-scroll::-webkit-scrollbar {
  display: none;
}

.mod-card {
  background: #fafafa;
  color: #000000;
  position: relative;
  width: 210px;
  height: 240px;
  background-size: cover;
  border-radius: 15px;
  transition: transform 0.30s var(--easeOutBack);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.1));
}

.darkmode .mod-card {
  background: #111;
  color: #ccc;
}

#lib_text-info {
  color: #aeaeae;
  letter-spacing: 0.5px;
  font-size: 18px;
  font-family: ralewaybold, Sans-Serif;
}

.darkmode #lib_text-info {
  color: #2f2f2f;
}

#mods-found{
  color: #aeaeae;
}

.darkmode #mods-found{
  color: #2f2f2f;
}

.mod-card:hover {
  transform: scale(1.03);
}

.delete-button {
  position: absolute;
  top: -13px;
  right: -13px;
  background: rgb(71 71 71);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all 0.30s var(--easeOutBack);
  width: 40px;
  height: 40px;
  text-align: center;
  transform: scale(0);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mod-card:hover .delete-button {
  opacity: 1;
  transform: scale(1);
}

.mod-icon {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 5px;
  z-index: 1;
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.1));
}

.mod-info {
  z-index: 1;
}

.mod-info h3 {
  margin: 10px 0 5px;
  font-size: 18px;
  z-index: 1;
}

.mod-info p {
  font-size: 14px;
  margin: 2px 0;
}

.special-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  border-radius: 15px;
  opacity: 0.13;
  object-fit: cover;
  background: no-repeat;
  background-size: cover;
  background-position: center;
}

.text{
  color: #5a5a5a;
  font-family: ralewaybold, Sans-Serif;
}

.darkmode .text{
  color: #828282;
  font-family: ralewaybold, Sans-Serif;
}

.title{
  display: block;
  overflow: hidden;
  font-family: ralewaybold, Sans-Serif;
  font-size: var(--huge-font-size);
  color: #828282;
  text-align: center;
  text-transform: uppercase;
  font-family: ralewaymedium, Sans-Serif;
  font-size: var(--medium-font-size);
  letter-spacing: 0.05em;
  font-weight: bold;
}

.played-date{
  opacity: 0.5;
}

@keyframes pageZoomFade {
  0% {
      transform: scale(1.1);
      opacity: 0;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

.page-zoom {
  animation: pageZoomFade 0.5s var(--easeOutCubic);
}

#pop-modhistory .container .icn-svg.spin{
  width: 100px;
  height: 100px;
}

#pop-modhistory .container{
  justify-content: center;
  align-items: center;
}

.text-zone{
  padding: 5px;
  margin-top: 10px;
  text-align: center;
  margin-bottom: 10px;
}

.button-zone {
  gap: 13px;
  display: flex;
  flex-direction: row;
  margin-top: 50px;
}

.achievement {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #eaeaea;
  margin: 10px 0;
  opacity: 1;
  transition: all 0.2s ease;
}

.achievement:hover {
  transform: scale(1.02);
  transition: all 0.05s ease;
}

.darkmode .achievement {
  background: #11111152;
}

.achievement.locked {
  filter: grayscale(100%);
  opacity: 0.5;
}

.achievement-icon {
  width: 55px;
  height: 55px;
  margin-right: 10px;
  border-radius: 3px;
}

.achievement-info {
  color: white;
}

#achievement-container {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  z-index: 9999;
  pointer-events: none;
}

.achievement-notification {
  background: #ffffff;
  padding: 10px 15px;
  border-radius: 4px;
  display: flex;
  align-items: left;
  gap: 10px;
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.1));
  opacity: 0;
  transform: translateY(-200px) scale(1.1);
  transition: opacity 0.5s ease-out, transform 0.5s var(--easeOutCubic);
  width: 350px;
  pointer-events: none !important;
}

.darkmode .achievement-notification {
  background: #111;
}

.achievement-notification.visible {
  opacity: 1;
  transform: translateY(0) scale(1.1);
}

.achievement-text .title{
  display: block;
  overflow: hidden;
  font-family: ralewaybold, Sans-Serif;
  font-size: var(--huge-font-size);
  color: #000000;
  text-transform: uppercase;
  font-family: ralewaymedium, Sans-Serif;
  font-size: var(--medium-font-size);
  letter-spacing: 0.05em;
  font-weight: bold;
  text-align: left;
}

.darkmode .achievement-text .title{
  color: #ffffff;
}

.achievement-notification .achievement-icon {
  width: 55px;
  height: 55px;
  margin-right: 3px;
  border-radius: 3px;
}

.achievement-text {
  width: 260px;
}

#achievements-list {
  padding: 20px;
}

.achievement-info .title{
  text-align: left;
  color: #000000;
}

.darkmode .achievement-info .title{
  color: #ccc;
}

.achievement-icon.locked {
  filter: grayscale(100%);
  opacity: 0.5;
}

.scrollbox {
  overflow: auto;
  height: 100%;
}

#box-myachi {
  height: 100%;
}

progress {
  width: 100%;
  height: 7px;
  border-radius: 3px; 
  overflow: hidden;
  border: none;
}

progress::-webkit-progress-bar {
  border-radius: 3px;
}

progress::-webkit-progress-value {
  background: #4caf50;
  border-radius: 3px;
}

progress::-moz-progress-bar {
  background: #4caf50;
  border-radius: 3px;
}

.credit-button {
  padding: 5px 6px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: white;
  transition: 0.2s;
  margin: 3px;
  box-shadow: 0px 4px 0px 0px #00000026;
}


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

.button-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.button-text {
  font-weight: bold;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.notification{
  display: none !important;
}

#achievements-list p {
  color: var(--col1);
  text-align: center;
  letter-spacing: 1px;
  padding: 13px;
  border-radius: 30px;
  font-size: 19px;
  text-transform: capitalize;
}

@media only screen and (max-height: 550px) {
  .bt-modcredits {
    width: 90px;
    height: 90px;
  }
  #custom-cursor, #param-Cursor, #hide-option-hr{
    display: none !important;
  }
}

@media only screen and (max-height: 500px) {
  .modCreditsBox .pop {
    transform: scale(0.8);
  }
}

@media only screen and (max-height: 400px) {
  .modCreditsBox .pop {
    transform: scale(0.7);
  }
}

.notification__achi.show {
  transform: scale(1);
  opacity: 1;
}

.notification__achi {
  background-color: #f12c2c;
  font-size: 20px;
  position: absolute;
  width: 32px;
  height: 32px;
  text-align: center;
  color: #ffffff;
  border-radius: 100%;
  font-family: 'ralewaybold';
  display: flex;
  justify-content: center;
  align-items: center;
  left: 55px;
  top: -7px;
  transition: all 0.30s var(--easeOutBack);
  transform: scale(0);
  filter: drop-shadow(1px 1px 0px #0000001b);
  pointer-events: none;
  opacity: 0;
}

@media only screen and (max-height: 550px) {
  .notification__achi {
    font-size: 18px;
    left: 42px;
    top: -10px;
  }
  #box-bottom #box-picto .picto {
    margin: 4px;
  }
}


@media only screen and (max-height: 450px) {
  .notification__achi {
    font-size: 15px;
    left: 43px;
    top: -6px;
    width: 24px;
    height: 24px;
  }
}

@media only screen and (max-height: 350px) {
  .notification__achi {
    font-size: 14px;
    left: 36px;
    top: -5px;
    width: 24px;
    height: 24px;
  }
}

.newsModBoxes {
  width: 175px;
  height: 195px;
  background-size: cover;
  border-radius: 10px;
  background-position: center;
  color: #222222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: ralewayregular, Sans-Serif;
  background-color: #ffffff;
  transition: transform 0.30s var(--easeOutBack);
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.1));
  flex: 0 0 auto;
  border-radius: 15px;
}

.darkmode .newsModBoxes {
  color: white;
  background-color: #111;
}

#modNews::-webkit-scrollbar{
  display: none;
}

.newModIcon {
  width: 84px;
  height: 84px;
  background-size: cover;
  border-radius: 10px;
  background-color: #222;
}

.darkmode .container {
  color: #ccc;
}

.newModBoxBG{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  border-radius: 15px;
  opacity: 0.13;
  object-fit: cover;
  background: no-repeat;
  background-size: cover;
  font-family: ralewaymedium, Sans-Serif;
  z-index: -1;
  background-position: center;
}

.newsModBoxes:hover{
  transform: scale(1.05);
  cursor: pointer;
}

.newsModBoxes .tittle {
  font-size: 31px;
  margin-top: 10px;
  font-family: 'Allan';
}

.newsNewBoxes .txt {
  font-family: ralewaymedium, Sans-Serif;
}

.newsModBoxes .txt {
  font-family: ralewaymedium, Sans-Serif;
  opacity: 0.5;
}

#modNews {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  width: 100%;
  overflow-x: auto;
  height: 218px;
  padding: 0px 6px;
}

.banner-mods-news {
  height: 100px;
  position: absolute;
  width: 100%;
  z-index: 0;
  background-position: center;
}

.banner-mods-news::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(#ffffff00 -250%, #fff 100%);
  z-index: 1;
}

.darkmode .banner-mods-news::before {
  background-image: linear-gradient(#ffffff00 -250%, var(--col-dark-bck) 100%);
}

:root {
  --max-app-width: 100%;
  --max-app-height: 100%;
  --ratio-h: calc(100vh / 850);
  --box-top-height-int: 15;
  --box-bottom-height-int: 33;
  --box-top-height-pct: calc(var(--box-top-height-int) * 1%);
  --box-bottom-height-pct: calc(var(--box-bottom-height-int) * 1%);
  --colV1: #9961b6;
  --colV2: #762c29;
  --colV3: #3c3840;
  --colV4: #CD9459;
  --colBck: #121212;
  --col0: #919191;
  --col1: #5f5f5f;
  --col2: #4b4b4b;
  --col3: #373737;
  --col4: #232323;
  --col-general-bck: #fafafa;
  --col-dark-bck: #111;
  --col-mixlist-line: #fafafa;
  --col-mixlist-line-even: #f0f0f0;
  --col-blue1: #4d6cbb;
  --col-blue2: #2f3a89;
  --col-red1: #d20a0a;
  --col-red2: #960000;
  --col-green1: #36b460;
  --col-green2: #04822e;
  --col-blue-site: #2c86fe;
  --col-blue-site-hover: #2772d8;
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
  --easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
  --easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
  --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --mini-font-size: 11px;
  --small-font-size: 13px;
  --normal-font-size: 14px;
  --medium-font-size: 16px;
  --big-font-size: 18px;
  --huge-font-size: 20px;
  --mixlist-rating-font-size: 26px;
  --popup-scale: 1;
  --popup-pointe-h: calc(30px * var(--popup-scale));
  --popup-pointe-w: calc(26px * var(--popup-scale));
  --sp-intro-scale: 1;
  --sp-select-scale: 1;
  --picto-width: 68px;
  --tab-height: 60px;
  --formline-height: 40px;
  --icn-formline-height: 35px;
}
.darkmode {
  --col-general-bck: #111;
  --col-mixlist-line: #222;
  --col-mixlist-line-even: #111;
}
.darkmode ::-webkit-scrollbar {
  width: 12px;
}
.darkmode ::-webkit-scrollbar-track {
  background: #333;
}
.darkmode ::-webkit-scrollbar-thumb {
  background: #444;
}
@media (hover: hover) and (pointer: fine) {
  .darkmode ::-webkit-scrollbar-thumb:hover {
    background: #666;
  }
}
@font-face {
  font-family: 'Allan';
  src: url('../font/Allan-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: ralewayblack;
  src: url("../font/raleway-black-webfont.woff2") format("woff2"),
    url("../font/raleway-black-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ralewaybold;
  src: url("../font/raleway-bold-webfont.woff2") format("woff2"),
    url("../font/raleway-bold-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ralewaymedium;
  src: url("../font/raleway-medium-webfont.woff2") format("woff2"),
    url("../font/raleway-medium-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ralewayregular;
  src: url("../font/raleway-regular-webfont.woff2") format("woff2"),
    url("../font/raleway-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: ralewaythin;
  src: url("../font/raleway-thin-webfont.woff2") format("woff2"),
    url("../font/raleway-thin-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
* {
  outline: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  user-drag: none;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased !important;
  -webkit-tap-highlight-color: transparent;
}
html > div[style] {
  display: none !important;
}
input[type="email"],
input[type="text"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
}
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: ralewayregular, Sans-Serif;
  font-size: var(--normal-font-size);
  background-color: var(--col-general-bck);
  z-index: -999;
}
body.black {
  background-color: #000 !important;
}
body.darkback {
  background-color: var(--colBck) !important;
}
body.darkmode {
  font-family: ralewaymedium;
}
body.mode-random {
  background-color: #000;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.noselect {
  -webkit-touch-callout: none !important;
  -webkit-user-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
hr {
  border: none;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ccc;
}
.darkmode hr {
  border-top: 1px solid #444;
}
#dragbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 22px;
  -webkit-app-region: drag;
}
.centermax {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: var(--max-app-width);
  max-height: var(--max-app-height);
}
#pp-box {
  display: none;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  padding: 10%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#pp-box.show {
  display: block;
}
#pp-box .box-lang {
  display: none;
}
#pp-box .box-lang.show {
  display: block;
}
.darkmode #pp-box {
  background-color: #333;
  color: #eee;
}
#pp-box p {
  margin-bottom: 40px;
}
#pp-box span {
  color: var(--col-blue1);
}
#pp-box #pp-bt {
  width: 100%;
  text-align: center;
  margin-top: 100px;
}
#pop-dialog .content .bt.accept .bck,
#pp-box #pp-bt #bt-ppaccept .bck {
  border-color: var(--col-blue1);
}
#pop-dialog .content .bt.accept .txt,
#pp-box #pp-bt #bt-ppaccept .txt {
  color: var(--col-blue1);
}
#pp-box #pp-bt #bt-ppaccept svg {
  fill: var(--col-blue1);
}
.hoverLocked .ic-locked {
  visibility: hidden;
  position: absolute;
  top: -11px;
  right: -11px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--col4);
}
.hoverLocked .ic-locked.mini {
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
}
.featureLocked .hoverLocked .ic-locked {
  pointer-events: none;
  visibility: visible;
  transform: scale(1);
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .featureLocked .hoverLocked .ic-locked {
    visibility: visible;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }
  .featureLocked .hoverLocked:hover .ic-locked {
    transform: scale(1);
    opacity: 1;
    transition: all 0.2s var(--easeOutBack);
  }
}
.featureLocked #tab-language {
  display: none;
}
.featureLocked #pop-language {
  display: none;
}
#app-incredibox {
  visibility: hidden;
  pointer-events: none;
}
#app-incredibox.show {
  visibility: visible;
  pointer-events: auto;
}
#content {
  position: relative;
  width: 100%;
  height: 100%;
}
#page-splash {
  position: absolute;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
#page-splash.enabled {
  pointer-events: auto;
}
#page-splash #sp-select {
  padding-top: 20px;
}
#page-splash #sp-select .vicon {
  opacity: 0;
}
#sp-intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-transform: uppercase;
  font-family: ralewaymedium, Sans-Serif;
  font-size: var(--medium-font-size);
  letter-spacing: 0.05em;
  color: #828282;
}
#sp-intro #sp-title {
  position: absolute;
  top: calc(50% - calc(var(--sp-intro-scale) * 115px));
  width: 100%;
  height: calc(var(--sp-intro-scale) * 100px);
  pointer-events: none;
  background-image: url(../img/title.svg);
  background-repeat: no-repeat;
  background-position: calc(50% + calc(var(--sp-intro-scale) * 20px)) center;
  transform: translate(0, 0);
  right: 14px;
}
.darkmode #sp-intro #sp-title {
  background-image: url(../img/title-darkmode.svg);
}
#sp-intro #sp-baseline {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate(0, 0);
}
#sp-intro #sp-experience {
  position: absolute;
  top: calc(50% - calc(var(--sp-intro-scale) * 55px));
  width: 100%;
  transform: translate(0, calc(var(--sp-intro-scale) * 50px));
  opacity: 0;
}
#sp-intro #sp-headphone {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate(0, calc(var(--sp-intro-scale) * 50px));
  opacity: 0;
}
#sp-intro #sp-headphone img {
  width: calc(var(--sp-intro-scale) * 126px);
  height: calc(var(--sp-intro-scale) * 150px);
}
#sp-intro #sp-choose {
  position: absolute;
  width: 100%;
  top: calc(50% - calc(var(--sp-intro-scale) * 200px));
  transform: translate(0, calc(var(--sp-intro-scale) * 50px));
  opacity: 0;
}
#sp-intro #sp-title.titleTweenUp {
  animation: titleTweenUp 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
}
@keyframes titleTweenUp {
  to {
    transform: translate(0, calc(var(--sp-intro-scale) * -60px));
  }
}
#sp-intro #sp-baseline.baselineTweenUp {
  animation: baselineTweenUp 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0.15s forwards;
}
@keyframes baselineTweenUp {
  to {
    transform: translate(0, calc(var(--sp-intro-scale) * -60px));
    opacity: 0;
  }
}
#sp-intro #sp-experience.experienceTweenUp {
  animation: experienceTweenUp 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s
    forwards;
}
@keyframes experienceTweenUp {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#sp-intro #sp-headphone.headphoneTweenUp {
  animation: headphoneTweenUp 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s
    forwards;
}
@keyframes headphoneTweenUp {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#sp-intro #sp-title.titleTweenUpHide {
  transform: translate(0, calc(var(--sp-intro-scale) * -60px));
  animation: titleTweenUpHide 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s
    forwards;
}
@keyframes titleTweenUpHide {
  to {
    transform: translate(0, calc(var(--sp-intro-scale) * -100px));
    opacity: 0;
  }
}
#sp-intro #sp-experience.experienceTweenUpHide {
  opacity: 1;
  transform: translate(0, 0);
  animation: experienceTweenUpHide 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)
    0.2s forwards;
}
@keyframes experienceTweenUpHide {
  to {
    transform: translate(0, calc(var(--sp-intro-scale) * -20px));
    opacity: 0;
  }
}
#sp-intro #sp-headphone.headphoneTweenUpHide {
  opacity: 1;
  transform: translate(0, 0);
  animation: headphoneTweenUpHide 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)
    0.3s forwards;
}
@keyframes headphoneTweenUpHide {
  to {
    transform: translate(0, calc(var(--sp-intro-scale) * -40px));
    opacity: 0;
  }
}
#sp-intro #sp-choose.chooseTweenUp {
  animation: chooseTweenUp 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.3s forwards;
}
@keyframes chooseTweenUp {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#sp-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-direction: column;
  flex-direction: column;
}
#sp-select .sp-line {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
}
#sp-select .vicon {
  position: relative;
  width: calc(var(--sp-select-scale) * 120px);
  height: calc(var(--sp-select-scale) * 150px);
  margin: calc(var(--sp-select-scale) * 10px);
}
@media (hover: hover) and (pointer: fine) {
  #sp-select .vicon {
    cursor: pointer;
  }
  #sp-select .vicon .img {
    transition: transform 0.2s ease-in;
  }
  #sp-select .vicon:hover:not(.open) .img {
    transform: scale(1.05);
    transition: transform 0.15s var(--easeOutBack);
  }
  #sp-select .vicon.clicked .img {
    transform: scale(1.05);
  }
  #sp-select #customicon, #sp-select .vicon#icon3 .img {
    transition: transform 0.2s ease-in;
  }
  #sp-select #customicon:hover:not(.open), #sp-select .vicon#icon3 .img:hover:not(.open){
    transform: scale(1.05);
    transition: transform 0.15s var(--easeOutBack);
  }
  #sp-select #customicon.clicked, #sp-select .vicon#icon3 .img.clicked{
    transform: scale(1.05);
  }
}
#sp-select .vicon .img {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 25%;
  background-image: url(../img/switch-bt-visu-1@2x.png);
  background-size: cover;
}
#sp-select .vicon .txt {
  width: 100%;
  height: 0;
  padding-bottom: 20%;
  background-image: url(../img/switch-bt-title-tiny@2x.png);
  background-size: cover;
  margin-top: 6%;
}
#sp-select .vicon#icon1 .img,
#sp-select .vicon#icon1 .txt {
  background-position: 0 0;
}
#sp-select .vicon#icon2 .img {
  background-position: calc((100% / 7) * 1) 0;
}
#sp-select .vicon#icon2 .txt {
  background-position: calc((100% / 8) * 1) 0;
}
#sp-select .vicon#icon3 .img {
  background-position: calc((100% / 7) * 2) 0;
}
#sp-select .vicon#icon3 .txt {
  background-position: calc((100% / 8) * 2) 0;
}
#sp-select .vicon#icon4 .img {
  background-position: calc((100% / 7) * 3) 0;
}
#sp-select .vicon#icon4 .txt {
  background-position: calc((100% / 8) * 3) 0;
}
#sp-select .vicon .img.focused {
  background-color: transparent !important;
}
#sp-select .vicon .bul {
  pointer-events: none;
  position: absolute;
  top: calc(var(--sp-select-scale) * -10px);
  right: calc(var(--sp-select-scale) * -10px);
  width: calc(var(--sp-select-scale) * 32px);
  height: calc(var(--sp-select-scale) * 32px);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
}
#sp-select .vicon .bul .icn-svg {
  stroke-width: 1px;
}
#sp-select .vicon.open .bul {
  animation: tweenBounceUp 0.5s var(--easeOutBack) 0s forwards;
}
#sp-select .vicon.close .bul {
  animation: tweenBounceDown 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s
    forwards;
}
@keyframes tweenBounceUp {
  40% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes tweenBounceDown {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}
#sp-select .vicon#icon1 .bul {
  background-color: var(--colV1);
}
#sp-select .vicon#icon2 .bul {
  background-color: var(--colV2);
}
#sp-select .vicon#icon3 .bul {
  background-color: var(--colV3);
}
#sp-select .vicon#icon4 .bul {
  background-color: var(--colV4);
}
#sp-select .vicon#icon5 .bul {
  background-color: var(--colV5);
}
#sp-select .vicon#icon6 .bul {
  background-color: var(--colV6);
}
#sp-select .vicon#icon7 .bul {
  background-color: var(--colV7);
}
#sp-select .vicon#icon8 .bul {
  background-color: var(--colV8);
}
#sp-select .vicon#icon9 .bul {
  background-color: var(--colV9);
}
#sp-select .vicon.iconTweenUp {
  transform: translate(0, calc(var(--sp-select-scale) * 25px));
}
#sp-select .vicon#icon1.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s forwards;
}
#sp-select .vicon#icon2.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s forwards;
}
#sp-select .vicon#icon3.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.25s forwards;
}
#sp-select .vicon#icon4.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s forwards;
}
#sp-select .vicon#icon5.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s forwards;
}
#sp-select .vicon#icon6.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s forwards;
}
#sp-select .vicon#icon7.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.45s forwards;
}
#sp-select .vicon#icon8.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s forwards;
}
#sp-select .vicon#icon9.iconTweenUp {
  animation: iconTweenUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.55s forwards;
}
@keyframes iconTweenUp {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#fade-home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
#fade-home.animateFadeIn {
  animation: animateFadeOut 0.3s linear 0s forwards;
}
#home {
  position: absolute;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: var(--url-img-home-screen);
  background-repeat: no-repeat;
  background-size: 1488px;
  background-position: 50% calc(50% - 60px);
}
#home.animate {
  transform: scale(1.2);
  animation: tweenScaleNormal 1s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
}
@keyframes tweenScaleNormal {
  to {
    transform: scale(1);
  }
}
#home .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.7) 100%
  );
}
#home .gradient#gradient-bot {
  height: 50%;
  top: unset;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.7) 60%
  );
}
#home #img-version {
  width: calc(var(--ratio-h) * 150);
  max-width: 150px;
  min-width: 100px;
  transform: translate(0, -40px);
  opacity: 0;
  background-image: var(--url-img-home-version);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#home #img-version .bck {
  width: 100%;
  height: 0;
  padding-top: 8%;
}
#home #img-version.animate {
  animation: tweenFromTop 1s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
}
@keyframes tweenFromTop {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#home #img-titre {
  transform: translate(0, 40px);
  width: calc(var(--ratio-h) * 520);
  max-width: 520px;
  min-width: 200px;
  margin-bottom: 1%;
  opacity: 0;
  background-image: var(--url-img-home-titre);
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
#home #img-titre.animate {
  animation: tweenFromBot 1s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
}
@keyframes tweenFromBot {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#home #img-titre .bck {
  width: 100%;
  height: 0;
  padding-top: 38.4615384615%;
}
#home #load-box {
  position: absolute;
  opacity: 0;
}
#home #load-box.animate {
  animation: loadboxTween 0.5s ease-out 0s forwards;
}
@keyframes loadboxTween {
  to {
    opacity: 1;
  }
}
.progress-box {
  height: 20px;
  width: 200px;
  padding: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--col3);
  border-radius: 10px;
}
.progress-box .progress-bar {
  position: relative;
  height: 100%;
  width: 5%;
  border-radius: 8px;
  background-color: var(--col3);
}
#home #home-dedicated {
  pointer-events: none;
  display: none;
}
.main-bt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.5% var(--fullfill-padding) calc(2% + var(--sab))
    var(--fullfill-padding);
}
.main-bt .box-top {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  top: 5%;
  width: 100%;
  margin-bottom: auto;
}
.main-bt .tl {
  width: 200px;
  margin-right: auto;
}
.main-bt .tr {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 216px;
  margin-left: auto;
}
.main-bt .tr .bt {
  margin-left: 10px;
  transform: scale(0.5);
  opacity: 0;
}
.main-bt .box-bot {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  bottom: 5%;
  width: 100%;
}
.main-bt .box-bot .center {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
}
#home-bt-list,
#home-bt-play,
#home-bt-switch {
  transform: scale(0.5);
  opacity: 0;
}
#home-bt-fs .bck .icn-svg,
#home-bt-info .bck .icn-svg,
#home-bt-flip .bck .icn-svg,
#home-bt-darkalley .bck .icn-svg,
#home-bt-goodbye .bck .icn-svg,
#home-bt-extras .bck .icn-svg,
#home-bt-list .bck .icn-svg,
#home-bt-param .bck .icn-svg,
#home-bt-play .bck .icn-svg,
#home-bt-switch .bck .icn-svg {
  fill: #fff;
}
#home-bt-play {
  width: calc(var(--bt-scale) * 100px);
  height: calc(var(--bt-scale) * 100px);
}
#home-bt-fs.animate,
#home-bt-info.animate,
#home-bt-flip.animate,
#home-bt-darkalley.animate,
#home-bt-goodbye.animate,
#home-bt-extra.animate,
#home-bt-list.animate,
#home-bt-param.animate,
#home-bt-play.animate,
#home-bt-switch.animate {
  animation: tweenBounce 0.3s var(--easeOutBack) 0s forwards;
}
@keyframes tweenBounce {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
#home-bt-news {
  position: relative;
  width: calc(var(--bt-scale) * 70px);
  height: calc(var(--bt-scale) * 70px);
  opacity: 0;
}
.safemode #home-bt-news {
  visibility: hidden;
}
#home-bt-news .bck {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url("../img/top-stars.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: calc((100% / 6) * 6) 0;
  transform: rotate(0);
  transition: transform 0.3s var(--easeOutBack);
}
#home-bt-news .bck.focused {
  border-radius: 50%;
}
#home-bt-news.animate {
  animation: newsScale 0.7s var(--easeOutBack) 0s forwards;
}
#home-bt-news.animate .bck {
  animation: newsRotate 0.7s var(--easeOutBack) 0s;
}
@media (hover: hover) and (pointer: fine) {
  #home-bt-news:hover .bck {
    transform: rotate(-15deg);
    transition: transform 0.1s var(--easeOutBack);
  }
}
@keyframes newsScale {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  70% {
    opacity: 1;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    cursor: pointer;
  }
}
@keyframes newsRotate {
  0% {
    transform: rotate(30deg);
  }
  70% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
}
#mixlist {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  transform: translate(0, 100%);
}
#mixlist.show {
  visibility: visible;
  transform: translate(0, 0);
  z-index: 5;
}
#mixlist .bac {
  position: absolute;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.darkmode #mixlist .bac {
  background-color: rgba(40, 40, 40, 0.8);
}
#mixlist .bac.animateFadeIn {
  animation: animateFadeIn 0.4s ease 0s forwards;
}
#mixlist .bac.animateFadeOut {
  animation: animateFadeOut 0.4s ease 0s forwards;
}
#mixlist #poplist {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: calc(100vw - 60px);
  max-width: 760px;
  height: calc(100vh - 60px);
  transform: translate(0, 100%);
  -ms-flex-item-align: end;
  align-self: flex-end;
  z-index: 99;
}
#mixlist #poplist.open {
  animation: animateFromBottom 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0s
    forwards;
}
#mixlist #poplist.opened {
  transform: translate(0, 0);
}
#mixlist #poplist.close {
  animation: animateFromTop 0.35s cubic-bezier(0.47, 0, 0.745, 0.715) 0s
    forwards;
}
@keyframes animateFromBottom {
  from {
    transform: translate(0, 100%);
  }
  to {
    transform: translate(0, 0);
  }
}
@keyframes animateFromTop {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 100%);
  }
}
#mixlist #poplist .tabbox {
  display: -ms-flexbox;
  display: flex;
}
#mixlist #poplist .tabbox .tab#tab-mixlist.animateFavIcon .icn-svg {
  fill: #fff;
  stroke: #fff;
  animation: tweenShowSVG 0.7s var(--easeOutQuart) 0s;
}
#mixlist #poplist .tab-filter {
  position: relative;
  width: 100%;
  padding: 14px;
  white-space: nowrap;
  background-color: var(--col1);
}
#mixlist #poplist .tab-filter .bt {
  margin: 0 10px 0 0;
  min-width: 130px;
}
#mixlist #poplist .tab-filter .bt:not(.active) {
  --bt-bck-color: var(--col2);
  --bt-txt-color: var(--col0);
  --bt-bck-color-hover: var(--col3);
}
#mixlist #poplist .tab-filter .bt:not(.active) .bck .icn-svg {
  fill: var(--bt-txt-color);
}
#mixlist #poplist .containbox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(100% - var(--tab-height));
  background-color: var(--col-mixlist-line);
}
#mixlist #poplist .containbox .pagebox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  display: none;
}
#mixlist #poplist .containbox .pagebox.show {
  display: block;
}
#mixlist #poplist #scrollbox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}
#mixlist #poplist #scrollbox.filter {
  margin-top: 60px;
}
.safemode #box-mixlist .tab-filter {
  display: none;
}
#mixlist #poplist #scrollbox#list-mymix {
  display: block;
}
#mixlist #poplist #box-search {
  width: 100%;
  white-space: nowrap;
}
#mixlist #poplist #box-search .input-loader {
  position: absolute;
  right: 0;
  width: 40px;
  height: inherit;
  display: none;
}
#mixlist #poplist #box-search form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px 15px;
  background-color: var(--col0);
}
#mixlist #poplist #box-search form input[type="text"] {
  width: 350px;
}
#mixlist #poplist #box-search form input[type="text"].focused {
  transform-origin: center left;
}
#mixlist #poplist #box-search #bt-search {
  margin: 0;
  margin-left: auto;
}
#mixlist #poplist #scrollbox.search {
  margin-top: 138px;
}
#mixlist .boxinfo {
  padding: 18px;
  height: 68px;
  width: 100%;
  margin-top: auto;
  text-align: center;
  font-size: var(--small-font-size);
  line-height: 1.3;
  color: #444;
  background-color: #ddd;
  padding-bottom: calc(18px + var(--sab));
}
#mixlist .boxinfo:empty {
  display: none;
}
.darkmode #mixlist .boxinfo {
  color: #888;
  background-color: #333;
  margin-top: auto;
}
#mixlist #poplist .boxline .line {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  height: 116px;
  background-color: var(--col-mixlist-line);
  -webkit-transform: translateZ(0);
}
#mixlist #poplist .boxline .line:nth-child(2n) {
  background-color: var(--col-mixlist-line-even);
}
#mixlist #poplist .boxline .line:nth-child(2n) {
  background-color: #f0f0f0;
}
.darkmode #mixlist #poplist .boxline .line {
  background-color: #222;
}
.darkmode #mixlist #poplist .boxline .line:nth-child(2n) .box-info {
  background-color: #111;
}
@media (hover: hover) and (pointer: fine) {
  #mixlist #poplist .boxline .line:hover {
    cursor: pointer;
  }
}
#mixlist #poplist .boxline .line.focused .box-info {
  border-left: 10px #2c86fe solid;
}
#mixlist #poplist .boxline .line.hide {
  animation: animateFadeOut 0.5s linear 0s forwards;
}
#mixlist #poplist .box-info {
  height: inherit;
  min-width: 100%;
  padding: 0 25px;
  transform: scale(1);
  transition: background-color 0.8s ease-in, transform 0.5s var(--easeOutBack);
}
#mixlist #poplist .line.bckFlash .box-info {
  background-color: var(--col0);
  transform: scale(0.7);
  animation: bckFlashAnimation 0.5s var(--easeOutBack) 0.2s forwards;
}
@keyframes bckFlashAnimation {
  0% {
    background-color: var(--col0);
    transform: scale(0.7);
  }
  20% {
    background-color: var(--col0);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}
#mixlist #poplist .line:first-child .mixbanner .rating {
  background-position: 0 0;
}
#mixlist #poplist .line:nth-child(2) .mixbanner .rating {
  background-position: calc((100% / 6) * 1) 0;
}
#mixlist #poplist .line:nth-child(3) .mixbanner .rating {
  background-position: calc((100% / 6) * 2) 0;
}
#mixlist #poplist .line:nth-child(4) .mixbanner .rating {
  background-position: calc((100% / 6) * 3) 0;
}
#mixlist #poplist .line:nth-child(5) .mixbanner .rating {
  background-position: calc((100% / 6) * 4) 0;
}
.mixbanner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  font-family: ralewayregular, Sans-Serif;
  font-size: var(--medium-font-size);
  white-space: nowrap;
  color: #5a5a5a;
  width: 100%;
}
.mixbanner .rating {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin-right: 12px;
  font-family: ralewaybold, Sans-Serif;
  font-size: var(--mixlist-rating-font-size);
  color: #fff;
  background-image: url("../img/top-stars.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: calc((100% / 6) * 5) 0;
}
.darkmode .mixbanner .rating {
  color: #333;
}
.mixbanner .info {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  margin-right: 20px;
}
.mixbanner .info .title {
  display: block;
  overflow: hidden;
  font-family: ralewaybold, Sans-Serif;
  font-size: var(--huge-font-size);
  color: #000;
}
.darkmode .mixbanner .info .title {
  color: #eee;
}
.mixbanner .info .dj {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4px;
}
.mixbanner .info .dj .box-flag {
  width: 23px;
  overflow: hidden;
  margin-right: 10px;
}
.mixbanner .info .dj .box-flag .flag {
  margin: -4px 0 0 -1px;
}
.mixbanner .info .dj .name {
  display: block;
}
.darkmode .mixbanner .info .dj .name {
  color: #888;
}
.darkmode .mixbanner .info .dedi {
  color: #888;
}
.mixbanner .data {
  margin-left: auto;
}
.mixbanner .data .stat {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-align: right;
}
.darkmode .mixbanner .data .stat {
  color: #999;
}
.mixbanner .data .stat .boxstat {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 5px;
}
.mixbanner .data .stat .boxstat .txt {
  margin-right: 3px;
}
.mixbanner .data .stat .boxstat .bck {
  width: 22px;
  height: 22px;
}
.mixbanner .data .stat .boxstat .bck .icn-svg {
  fill: #5a5a5a;
}
.darkmode .mixbanner .data .stat .boxstat .bck .icn-svg {
  fill: #aaaaaa;
}
.mixbanner .data .stat .boxstat.private .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.mymix .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.myfav .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.top50 .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.latest .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.offline .bck .icn-svg {
  fill: var(--col0);
  stroke: var(--col0);
}
.mixbanner .data .stat .boxstat.viewed {
  margin-left: 12px;
}
.mixbanner .data .stat .boxstat.liked {
  margin-left: 20px;
}
.mixbanner .data .stat .boxstat.latest,
.mixbanner .data .stat .boxstat.myfav,
.mixbanner .data .stat .boxstat.mymix,
.mixbanner .data .stat .boxstat.offline,
.mixbanner .data .stat .boxstat.private,
.mixbanner .data .stat .boxstat.top50 {
  display: none;
}
.mixbanner .data .date {
  display: block;
  color: #828282;
  text-align: right;
}
.darkmode .mixbanner .data .date {
  color: #666;
}
.isoffline .data .stat .boxstat.liked,
.isoffline .data .stat .boxstat.viewed {
  display: none;
}
.isoffline .data .stat .boxstat.offline {
  display: -ms-flexbox;
  display: flex;
}
.isprivate .data .stat .boxstat.private {
  display: block;
}
.ismymix .data .stat .boxstat.mymix {
  display: block;
}
.isfavoris .data .stat .boxstat.myfav {
  display: block;
}
.istop50 .data .stat .boxstat.top50 {
  display: block;
}
.islatest .data .stat .boxstat.latest {
  display: block;
}
#mixlist #poplist .box-info .star-txt {
  color: var(--col0);
}
#mixlist #poplist .box-action {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  transform: translate(0, 0);
  padding: 0 25px;
  height: inherit;
  width: 100%;
  background-color: #e6e6e6;
}
.darkmode #mixlist #poplist .box-action {
  background-color: #161616;
}
#mixlist #poplist .line:nth-child(2n) .box-action {
  background-color: #dcdcdc;
}
.darkmode #mixlist #poplist .line:nth-child(2n) .box-action {
  background-color: #262626;
}
#scrollbox .line.animateOpen .box-action {
  animation: animateOpenAction 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
    forwards;
}
#scrollbox .line.animateClose .box-action {
  animation: animateCloseAction 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
    forwards;
}
@keyframes animateOpenAction {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-100%, 0);
  }
}
@keyframes animateCloseAction {
  from {
    transform: translate(-100%, 0);
  }
  to {
    transform: translate(0, 0);
  }
}
.safemode #mixlist #tab-latest {
  display: none;
}
.safemode #mixlist #tab-top50 {
  display: none;
}
.safemode #mixlist #tab-search {
  display: none;
}
.safemode #mixlist .box-action .bt.share {
  display: none;
}
.safemode #mixlist .box-action .bt.link {
  display: none;
}
.safemode #mixlist .box-action .bt.fav {
  display: none;
}
.safemode #mixlist .box-action .bt.download {
  display: none;
}
.safemode #mixlist .box-action .bt.delete {
  display: none;
}
#mixlist #poplist .bt {
  position: relative;
  margin: 0 calc(var(--bt-scale) * 10px);
}
#mixlist #mixlistbox .tab-filter .bt {
  --bt-icn-color: var(--bt-txt-color);
}
.bt.fav .bck .icn-svg {
  fill: transparent;
  stroke-width: 1.1px;
}
.isfavoris .bt.fav {
  --bt-bck-color: var(--col1);
  --bt-bck-color-hover: var(--col2);
}
.isfavoris .bt.fav .bck .icn-svg {
  fill: #fff;
  stroke-width: 0;
}
#watch-info {
  display: -ms-flexbox;
  display: flex;
  pointer-events: none;
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  padding: 0 var(--fullfill-padding);
  opacity: 0;
  transform: translate(0, 0);
  transition: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}
#watch-info.fadeIn {
  opacity: 1;
  transform: translate(0, 0);
}
.bottomSlide #watch-info.fadeIn {
  opacity: 0;
  transform: translate(0, 100px);
}
#watch-info .info {
  font-family: ralewaymedium, Sans-Serif;
}
#watch-info .info .dj .box-flag {
  display: none;
  margin-right: 0;
  margin-left: 10px;
}
#watch-info .info span.dedi {
  visibility: hidden;
  margin-top: 5px;
  font-size: var(--normal-font-size);
  color: #8a8a8a;
}
#watch-info .data {
  visibility: hidden;
  margin-right: 15px;
}
.mode-watch #watch-info .data,
.mode-watch #watch-info .info span.dedi {
  visibility: visible;
}
#watch-info .info span.title {
  transition: color 0.3s ease-in-out;
}
.mode-watch #watch-info .info .dj .box-flag {
  display: block;
}
.mode-random #watch-info .info span.title {
  color: var(--col-blue1);
}
.mode-replay #watch-info .info span.title {
  color: var(--col-green1);
}
#watch-info.fadeIn #bt-like,
#watch-info.fadeIn #bt-save {
  pointer-events: auto;
}
.bottomSlide #watch-info #bt-like,
.bottomSlide #watch-info #bt-save {
  pointer-events: none !important;
}
#watch-info #bt-save {
  display: none;
  pointer-events: none;
  --bt-txt-color: #fff;
  --bt-txt-color-hover: #fff;
}
.mode-replay:not(.mode-watch) #watch-info #bt-save {
  display: -ms-inline-flexbox;
  display: inline-flex;
}
#watch-info #bt-like {
  display: none;
  border-radius: 50%;
  pointer-events: none;
}
.mode-watch #watch-info :not(.ismymix) #bt-like {
  display: -ms-inline-flexbox;
  display: inline-flex;
}
#bt-like .bck {
  background-color: #fff;
  border: 1px solid #bbb;
}
#bt-like .icn-svg {
  stroke-width: 1px;
  stroke: #bbb;
  fill: transparent;
}
.darkmode #bt-like .bck {
  background-color: var(--col-dark-bck);
  border: 1px solid #555;
}
@media (hover: hover) and (pointer: fine) {
  #bt-like:hover .bck {
    background-color: #eee;
  }
  .darkmode #bt-like:hover .bck {
    background-color: #333;
  }
}
#bt-like.disabled {
  pointer-events: none;
  cursor: default;
}
#bt-like.spin .icn-svg {
  stroke-width: 0;
  fill: #bbb;
}
#bt-like.spin.liked .icn-svg {
  stroke-width: 0;
  fill: #fff;
}
#bt-like.liked .bck {
  background-color: var(--col-red1);
  border: 1px solid var(--col-red1);
  transition: all 0.3s;
}
#bt-like.liked .icn-svg {
  stroke-width: 0;
  stroke: #fff;
  fill: #fff;
}
#lock-all {
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
#lock-all.show {
  pointer-events: auto;
  visibility: visible;
}
#lock-pause {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  visibility: hidden;
  pointer-events: none;
}
.pause #lock-pause {
  visibility: visible;
  pointer-events: auto;
}
#lock-pause #top-resume {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%;
  height: var(--box-top-height-pct);
}
#lock-pause #bt-resume {
  width: 60px;
  height: 60px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: #fafafa;
}
#lock-pause #bt-resume.focused {
  transform: scale(1.3) !important;
}
#lock-pause #bt-resume.focused .icn-svg {
  stroke: #fff;
  fill: #fff;
}
#box-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--box-top-height-pct);
  background-color: transparent;
}
#box-top #box-bt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: absolute;
  width: 200%;
  height: 100%;
  transform: translate(-50%, 0);
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#box-top #box-bt.open {
  transform: translate(0, 0);
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#box-top #box-bt.open #box-bt1 {
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.2s ease-out 0.15s;
}
#box-top #box-bt #box-bt1 {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
#box-top #box-bt.open #box-bt2 {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
#box-top #box-bt #box-bt2 {
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.2s ease-out 0.15s;
}
#box-top #box-bt1,
#box-top #box-bt2 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: center;
  align-items: center;
  width: var(--max-app-width);
  height: 100%;
  padding: 0 var(--fullfill-padding);
}
#box-top #box-bt2 {
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#box-top #box-bt2 .item-left {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: center;
  align-items: center;
}
#box-top #box-bt2 .item-left,
#box-top #box-bt2 .item-right {
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
}
#box-top #box-bt2 .item-right {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
#box-top #box-bt2 .item-middle {
  position: relative;
}
#box-top #cnt-record {
  pointer-events: none;
  width: 8em;
  text-align: right;
  white-space: nowrap;
  font-family: ralewayregular, Sans-Serif;
  font-size: var(--medium-font-size);
  color: var(--col-red1);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#box-top #cnt-record.fadeIn {
  opacity: 1;
}
#box-top #cnt-record #t-duration {
  font-family: ralewaybold, Sans-Serif;
}
#box-top #box-bt1 .bt {
  margin: 0 calc(var(--bt-big-scale) * 7px);
}
#box-top #box-bt1 .bt:first-child {
  margin-left: 0;
}
#box-top #box-bt1 .bt:last-child {
  margin-right: 0;
}
#box-top .bt#bt-tool.animateBounce {
  animation: tweenBounce 0.3s var(--easeOutBack) 0s forwards;
}
#box-top #box-bt1 #bt-random {
  --bt-txt-color: #fff;
  --bt-txt-color-hover: #fff;
}
#box-top #box-bt1 #bt-record {
  --bt-txt-color: #fff;
  --bt-txt-color-hover: #fff;
}
#box-top .bt#bt-record {
  margin-right: auto;
}
.mode-record #box-top {
  background-color: transparent;
  transition: none;
}
.mode-replay #box-top {
  background-color: transparent;
  transition: none;
}
.mode-random #box-top {
  background-color: transparent;
  transition: none;
}
.mode-record #box-top #box-bt2 #bt-tool .bck {
  background-color: var(--col-red1);
}
.mode-replay #box-top #box-bt2 #bt-tool .bck {
  background-color: var(--col-green1);
}
.mode-random #box-top #box-bt2 #bt-tool .bck {
  background-color: var(--col-blue1);
}
@media (hover: hover) and (pointer: fine) {
  .mode-record #box-top #box-bt2 #bt-tool:hover .bck {
    background-color: var(--col-red2);
  }
  .mode-replay #box-top #box-bt2 #bt-tool:hover .bck {
    background-color: var(--col-green2);
  }
  .mode-random #box-top #box-bt2 #bt-tool:hover .bck {
    background-color: var(--col-blue2);
  }
}
.mode-record #box-top #box-bt2 #bt-tool .icn-svg {
  animation: animateBlink 1s linear 0s infinite;
}
.mode-replay #box-top #box-bt2 #bt-tool .icn-svg {
  animation: animateBlink 1s linear 0s infinite;
}
.mode-random #box-top #box-bt2 #bt-tool .icn-svg {
  animation: animateSpin 2.5s linear 0s infinite;
}
.pause #box-top #box-bt2 #bt-tool .icn-svg {
  animation-play-state: paused;
}
#ic-loader path {
  stroke-width: 0.5px;
}
#ic-loader-mini path {
  stroke-width: 2px;
}
#ic-loader path:first-of-type,
#ic-loader-mini path:first-of-type {
  opacity: 0.2;
}
.icn-svg.col-version {
  stroke: var(--col0);
  fill: var(--col0);
}
.icn-svg.icn-black {
  stroke: #000;
  fill: #000;
}
.icn-svg.icn-gray {
  stroke: #5a5a5a;
  fill: #5a5a5a;
}
.icn-svg.icn-blue {
  stroke: var(--col-blue-site);
  fill: var(--col-blue-site);
}
.spin .icn-svg {
  animation: rotating 0.8s linear infinite;
}
.icn-svg.spin {
  animation: rotating 0.8s linear infinite;
}
@keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.bt-onofftext {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 32px;
  width: 265px;
  padding: 0 4px;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  background-color: #dcdcdc;
  cursor: pointer;
}
.bt-onofftext .txtbox {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
}
.bt-onofftext .txtbox .label {
  width: 50%;
  text-align: center;
}
.bt-onofftext .slider {
  position: absolute;
  top: 0;
  -ms-flex-item-align: center;
  align-self: center;
  height: 24px;
  width: calc(50% - 4px);
  margin-top: 4px;
  margin-left: 0;
  background-color: #fafafa;
  border-radius: 12px;
  transition: all 0.2s ease-in-out;
}
.bt-onofftext .txtbox .label:first-child {
  color: #333;
}
.bt-onofftext .txtbox .label:last-child {
  color: #ababab;
}
.bt-onofftext.active .slider {
  margin-left: calc(50% - 4px);
}
.bt-onofftext.active .txtbox .label:first-child {
  color: #ababab;
}
.bt-onofftext.active .txtbox .label:last-child {
  color: #333;
}
.darkmode .bt-onofftext {
  background-color: #2a2a2a;
}
.darkmode .bt-onofftext .txtbox .label:first-child {
  color: #eee;
}
.darkmode .bt-onofftext .txtbox .label:last-child {
  color: #666;
}
.darkmode .bt-onofftext .slider {
  background-color: #0a0a0a;
}
.darkmode .bt-onofftext.active .txtbox .label:first-child {
  color: #666;
}
.darkmode .bt-onofftext.active .txtbox .label:last-child {
  color: #eee;
}
.bt.valid.success .bck {
  background-color: var(--col-green1);
}
.bt.valid.success {
  animation: animateBigToNormal 0.4s var(--easeOutBack) forwards;
}
@keyframes animateBigToNormal {
  from {
    opacity: 0;
    transform: scale(2.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
#box-top #bt-clock {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: calc(var(--ratio-h) * 76);
  height: calc(var(--ratio-h) * 76);
  max-width: 76px;
  max-height: 76px;
  background-color: #bebebe;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
  border-radius: 50%;
  opacity: 0.3;
}
#box-top #bt-clock #clock-icn {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: var(--col-general-bck);
  transition: background-color 0.3s ease-in-out;
  pointer-events: none;
}
#box-top #bt-clock #clock-icn #clock-icn-play {
  display: none;
}
#box-top #bt-clock #clock-icn #clock-icn-pause {
  display: block;
}
.pause #box-top #bt-clock #clock-icn #clock-icn-play {
  display: block;
}
.pause #box-top #bt-clock #clock-icn #clock-icn-pause {
  display: none;
}
#box-top #bt-clock #clock-icn svg {
  width: 100%;
  height: 100%;
}
#box-top #bt-clock #cnv-clock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#box-top #bt-clock.enable {
  cursor: pointer;
  opacity: 1;
}
.mode-random #box-top #bt-clock {
  background-color: #333;
}
.mode-random #box-top #bt-clock #clock-icn {
  background-color: #000;
}
.darkmode #box-top #bt-clock {
  background-color: #666;
}
.darkmode #box-top #bt-clock #clock-icn .icn-svg.icn-gray {
  fill: #ccc;
}
#bt-clock.focused {
  background-color: var(--col-blue-site) !important;
}
#bt-clock.focused #clock-icn .icn-svg.icn-gray {
  stroke: var(--col-blue-site) !important;
  fill: var(--col-blue-site) !important;
}
#fade-all {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
#fade-all.white {
  background-color: var(--col-general-bck);
}
#fade-all.fadeIn {
  pointer-events: auto;
  opacity: 1;
}
.miniPlayer #fade-all.white {
  background-color: #000 !important;
}
#bck-global {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--col-general-bck);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.mode-random #bck-global {
  background-color: #000;
}
#bck-global.fadeIn {
  opacity: 1;
}
@keyframes animateFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animateFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes animateSpin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes animateBlink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
#box-top #box-bt-bonus {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
  opacity: 1;
  -ms-touch-action: none;
  touch-action: none;
}
#box-top #box-bt-bonus.fade {
  transition: opacity 0.3s ease-in-out;
}
#box-top #box-bt-bonus.hide {
  opacity: 0;
  pointer-events: none;
}
#box-top #box-bt-bonus.hidden .bt-bonus.unlock .quarter .svg.directshow,
#box-top #box-bt-bonus.hidden .bt-bonus.unlock .quarter .svg.q0 {
  visibility: hidden;
}
#box-top .bt-bonus {
  position: relative;
  width: calc(var(--ratio-h) * 86);
  height: calc(var(--ratio-h) * 86);
  max-width: 86px;
  max-height: 86px;
  margin: 0 16px;
}
#box-top .bt-bonus canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e6e6e6;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.darkmode #box-top .bt-bonus canvas {
  background-color: #444;
}
#box-top .bt-bonus.playing canvas {
  transform: scale(1);
  transition: transform 0.4s var(--easeOutBack);
}
#box-top .bt-bonus .circle {
  pointer-events: none;
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px dashed #dcdcdc;
  border-radius: 50%;
  opacity: 0;
}
#box-top .bt-bonus.unlock .circle.show {
  animation: tweenShowCircle 0.7s ease-out 0.4s forwards;
}
@keyframes tweenShowCircle {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.2);
  }
}
#box-top .bt-bonus.unlock .circle.showCircle {
  border-color: var(--col-green1) !important;
  animation: tweenShowCircle 0.7s ease-out 0s forwards;
}
#box-top .bt-bonus .quarter {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
}
#box-top .bt-bonus .quarter .svg {
  visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
#box-top .bt-bonus .quarter .svg svg {
  display: block;
  width: 100%;
  height: 100%;
}
#box-top .bt-bonus.unlock .quarter .svg.q0 svg {
  fill: #dcdcdc;
}
.darkmode #box-top .bt-bonus.unlock .quarter .svg.q0 svg {
  fill: #333;
}
#box-top .bt-bonus.unlock .quarter .svg.directshow {
  visibility: visible;
}
#box-top .bt-bonus.unlock .quarter .svg.show {
  animation: tweenShowSVG 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s
    forwards;
}
#box-top .bt-bonus.unlock .quarter .svg.hide {
  animation: tweenHideSVG 0.3s ease 0s forwards;
}
@keyframes tweenShowSVG {
  from {
    opacity: 0;
    transform: scale(3.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes tweenHideSVG {
  to {
    opacity: 0;
  }
}
#box-top .bt-bonus .icon {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: #bebebe;
  transition: background-color 0.3s ease-in-out;
}
.darkmode #box-top .bt-bonus .icon {
  background-color: #444;
}
#box-top .bt-bonus .icon .icn-bck {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 300%;
  background-position: 0 0;
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out;
}
.v1 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 1);
}
.v1 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 1);
}
.v1 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 1);
}
.v2 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 2);
}
.v2 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 2);
}
.v2 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 2);
}
.v3 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 3);
}
.v3 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 3);
}
.v3 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 3);
}
.v4 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 4);
}
.v4 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 4);
}
.v4 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 4);
}
.v5 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 5);
}
.v5 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 5);
}
.v5 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 5);
}
.v6 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 6);
}
.v6 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 6);
}
.v6 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 6);
}
.v7 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 7);
}
.v7 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 7);
}
.v7 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 7);
}
.v8 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 calc((100% / 9) * 8);
}
.v8 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% calc((100% / 9) * 8);
}
.v8 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% calc((100% / 9) * 8);
}
.v9 #box-top .bt-bonus#bt-bonus-1.unlock .icon .icn-bck {
  background-position: 0 100%;
}
.v9 #box-top .bt-bonus#bt-bonus-2.unlock .icon .icn-bck {
  background-position: 50% 100%;
}
.v9 #box-top .bt-bonus#bt-bonus-3.unlock .icon .icn-bck {
  background-position: 100% 100%;
}
#box-top .bt-bonus.unlock .quarter .svg.q0 {
  visibility: visible;
}
@media (hover: hover) and (pointer: fine) {
  #box-top .bt-bonus.unlock {
    cursor: pointer;
  }
}
#box-top .bt-bonus.unlock.inprogress .icon {
  background-color: #5a5a5a;
  transition: background-color 0.3s ease-in-out;
}
#box-top .bt-bonus.unlock.inprogress .icon .icn-bck {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.darkmode #box-top .bt-bonus.unlock.inprogress .icon {
  background-color: #666;
}
#box-top .bt-bonus.unlock.found .icon {
  background-color: var(--col-green1) !important;
  transition: background-color 0.3s ease-in-out;
}
#box-top .bt-bonus.unlock.found .quarter {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
#box-top .bt-bonus.unlock.bounce .icon {
  animation: tweenBtBounce 1s var(--easeOutBack) 0s infinite;
}
@keyframes tweenBtBounce {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
#game .bt-bonus .box-loader {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 103%;
  width: 100%;
  height: auto;
  pointer-events: none;
  opacity: 1;
  border-radius: 30px;
}
#game .bt-bonus .box-loader.fade {
  transition: opacity 0.3s ease-in-out;
}
#game .bt-bonus .box-loader.hide {
  opacity: 0;
}
#game .bt-bonus .box-loader .zone .loader .bar {
  background-color: var(--col-green1);
}
#game {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#game #box-stage-bck {
  position: absolute;
  top: var(--box-top-height-pct);
  bottom: var(--box-bottom-height-pct);
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease;
}

#box-stage-bck-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bck-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s;
}

#bck-current {
  z-index: 0;
  opacity: 1;
}

#bck-next {
  z-index: 0;
  opacity: 0;
}

#game #box-video {
  position: absolute;
  top: var(--box-top-height-pct);
  bottom: var(--box-bottom-height-pct);
  width: 100%;
  height: auto;
  overflow: hidden;
  transition: bottom 0.3s ease-in-out;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}
.picto .bck::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  background-image: var(--layer-image);
}
#game #box-video.visible {
  visibility: visible;
}
.bottomSlide #game #box-video {
  bottom: calc(var(--box-top-height-pct) / 2);
}
#game #box-video .video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  visibility: hidden;
  background-color: #000;
}
#game #box-video .video.show {
  visibility: visible;
}
#game #box-video .video video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
video::-webkit-media-controls {
  display: none;
}
#game #fade-video {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: #000;
}
#game #fade-video.show {
  opacity: 1;
}
#game #fade-video.animateFadeIn {
  animation: animateFadeIn 0.5s linear 0s forwards;
}
#game #fade-video.animateFadeOut {
  animation: animateFadeOut 0.5s linear 0s forwards;
}
#game #box-stage {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: end;
  align-items: flex-end;
  top: var(--box-top-height-pct);
  bottom: var(--box-bottom-height-pct);
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
}
#game #box-stage #box-canvas canvas {
  width: 100%;
  height: 100%;
}
#game #box-polo {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}
#game #box-polo .polo {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: end;
  align-items: flex-end;
  top: 10%;
  height: 90%;
  pointer-events: auto;
  -ms-touch-action: none;
  touch-action: none;
}
#game #box-stage.pointerlock #box-polo .polo {
  pointer-events: none;
}
#box-bottom #box-loader-polo {
  position: relative;
  height: 8%;
  pointer-events: none;
  opacity: 1;
}
#box-bottom #box-loader-polo .zone {
  position: absolute;
}
#box-bottom #box-loader-polo .zone .loader {
  width: 55%;
}
#box-bottom #box-loader-polo.fade {
  transition: opacity 0.3s ease-in-out;
}
#box-bottom #box-loader-polo.hide {
  opacity: 0;
}
#game #bottom-shadow {
  pointer-events: none;
  position: absolute;
  top: -10%;
  width: 100%;
  height: 10%;
  background-size: 100%;
  background-image: url("../img/game-ombre.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
}
#game #box-stage .polo .ctrl {
  display: none;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 90%;
  height: 12%;
  background-color: #5a5a5a;
  border-radius: 10px 10px 0 0;
  opacity: 0;
  transition: opacity 0.2s;
}
#game #box-stage .polo .ctrl.visible {
  visibility: visible;
}
#game #box-stage .polo .ctrl .cbt {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  cursor: pointer;
  overflow: hidden;
}
#game #box-stage .polo .ctrl .cbt .icn-svg {
  position: absolute;
  width: 130%;
  height: 100%;
}
#game #box-stage .polo .ctrl .cbt.light {
  opacity: 1;
}
#game #box-stage .polo .ctrl .cbt:first-child {
  margin-left: 10px;
}
#game #box-stage .polo .ctrl .cbt:last-child {
  margin-right: 10px;
}
@media (hover: hover) and (pointer: fine) {
  #game #box-stage .polo .ctrl {
    display: -ms-flexbox;
    display: flex;
    visibility: hidden;
  }
  #game #box-stage .polo:hover .ctrl.visible {
    opacity: 1;
    transition: opacity 0s;
  }
  #game #box-stage .polo .ctrl .cbt:hover {
    opacity: 1;
  }
}
#box-reading-bar {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 1.2%;
  top: var(--box-top-height-pct);
}
#box-reading-bar #reading-bar {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #8c8c8c;
  transform-origin: top left;
  transform: scaleY(0);
  transition: transform 0.4s ease-in-out;
}
.darkmode #box-reading-bar #reading-bar {
  background-color: #444;
}
#box-reading-bar #reading-bar.open {
  transform: scaleY(1);
}
#box-reading-bar #reading-bar.seeking {
  transition: transform 0.2s ease-out;
  transform: scaleY(3);
}
#box-reading-bar #reading-block,
#box-reading-bar #reading-buffer {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: top left;
  background-color: var(--col-red1);
}
#box-reading-bar #reading-marker,
#box-reading-bar #reading-marker-bonus {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
#box-reading-bar #reading-marker .marker:first-child {
  visibility: hidden;
}
#box-reading-bar #reading-marker .marker,
#box-reading-bar #reading-marker-bonus .marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #fff;
}
.darkmode #box-reading-bar #reading-marker .marker {
  background-color: #000;
}
#box-reading-bar #reading-marker-bonus .marker {
  display: block;
  background-color: #fff;
  opacity: 0.5;
}
.darkmode #box-reading-bar #reading-marker-bonus .marker {
  background-color: #777;
  opacity: 0.7;
}
#box-reading-bar #reading-block {
  background-color: #5a5a5a;
}
#box-reading-bar #reading-buffer.progress {
  animation: tweenScaleXProgress 0s linear 0s forwards;
}
#box-reading-bar #reading-buffer.froze,
.pause #box-reading-bar #reading-buffer.progress {
  animation-play-state: paused;
}
@keyframes tweenScaleXProgress {
  to {
    transform: scaleX(1);
  }
}
#game .box-loader {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: auto;
}
#game .box-loader .zone {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 4px;
}
#game .box-loader .zone .loader {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  background-color: #ddd;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
}
.darkmode #game .box-loader .zone .loader {
  background-color: #000;
}
#game .box-loader .zone .loader.show {
  transition: transform 0.2s ease-out;
  transform: scaleX(1);
}
#game .box-loader .zone .loader .bar {
  height: 100%;
  width: 100%;
  transform-origin: top left;
  background-color: #999;
  transform: scaleX(0);
}
#game .box-loader .zone .loader .bar.progress {
  animation: tweenScaleProgress 0s linear 0s forwards;
}
.pause #game .box-loader .zone .loader .bar.progress {
  animation-play-state: paused;
}
@keyframes tweenScaleProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
#box-bottom {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  bottom: 0;
  width: 100%;
  height: var(--box-bottom-height-pct);
  background-color: transparent;
}
#box-bottom #box-picto {
  position: absolute;
  top: 6%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 1;
}
.bottomSlide #box-bottom #box-picto {
  opacity: 0;
  pointer-events: none;
}
#box-bottom #box-picto .pictoline {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 95%;
}
#box-bottom #box-picto .pictoline.top {
  margin: 0 3% 0 0;
}
#box-bottom #box-picto .pictoline.bot {
  margin: 0 0 0 3%;
}
#box-bottom #box-picto.fade {
  transition: opacity 0.3s ease-in-out;
}
#box-bottom #box-picto.hide {
  opacity: 0;
  pointer-events: none;
}
#box-bottom #box-picto .picto {
  cursor: grab;
  width: 100%;
  margin: 7px;
  z-index: initial;
  transform: translate3d(0, 0, 0);
  border-radius: 18%;
  transition: background-color 0.4s ease-out;
  background-color: transparent;
  -ms-touch-action: none;
  touch-action: none;
}
#box-bottom #box-picto .picto .bck {
  width: 100%;
  height: 0;
  padding-top: 100%;
  background-size: auto 200%;
  border-radius: 18%;
  transition: opacity 0.4s ease-out;
  opacity: 1;
  background-color: #00000021;
}

.darkmode .v1 #box-bottom #box-picto .picto .bck {
  background-color: #00000000;
}

#box-bottom #box-picto .picto#picto0 .bck {
  background-position: calc((100% / 19) * 0) 0;
}
#box-bottom #box-picto .picto#picto1 .bck {
  background-position: calc((100% / 19) * 1) 0;
}
#box-bottom #box-picto .picto#picto2 .bck {
  background-position: calc((100% / 19) * 2) 0;
}
#box-bottom #box-picto .picto#picto3 .bck {
  background-position: calc((100% / 19) * 3) 0;
}
#box-bottom #box-picto .picto#picto4 .bck {
  background-position: calc((100% / 19) * 4) 0;
}
#box-bottom #box-picto .picto#picto5 .bck {
  background-position: calc((100% / 19) * 5) 0;
}
#box-bottom #box-picto .picto#picto6 .bck {
  background-position: calc((100% / 19) * 6) 0;
}
#box-bottom #box-picto .picto#picto7 .bck {
  background-position: calc((100% / 19) * 7) 0;
}
#box-bottom #box-picto .picto#picto8 .bck {
  background-position: calc((100% / 19) * 8) 0;
}
#box-bottom #box-picto .picto#picto9 .bck {
  background-position: calc((100% / 19) * 9) 0;
}
#box-bottom #box-picto .picto#picto10 .bck {
  background-position: calc((100% / 19) * 10) 0;
}
#box-bottom #box-picto .picto#picto11 .bck {
  background-position: calc((100% / 19) * 11) 0;
}
#box-bottom #box-picto .picto#picto12 .bck {
  background-position: calc((100% / 19) * 12) 0;
}
#box-bottom #box-picto .picto#picto13 .bck {
  background-position: calc((100% / 19) * 13) 0;
}
#box-bottom #box-picto .picto#picto14 .bck {
  background-position: calc((100% / 19) * 14) 0;
}
#box-bottom #box-picto .picto#picto15 .bck {
  background-position: calc((100% / 19) * 15) 0;
}
#box-bottom #box-picto .picto#picto16 .bck {
  background-position: calc((100% / 19) * 16) 0;
}
#box-bottom #box-picto .picto#picto17 .bck {
  background-position: calc((100% / 19) * 17) 0;
}
#box-bottom #box-picto .picto#picto18 .bck {
  background-position: calc((100% / 19) * 18) 0;
}
#box-bottom #box-picto .picto#picto19 .bck {
  background-position: calc((100% / 19) * 19) 0;
}
.picto .hitzone {
  width: 130%;
  left: -15%;
  height: 130%;
  top: -15%;
}
#box-bottom #box-picto .picto.drag {
  z-index: 99999999999999 !important;
  cursor: grabbing;
}
#box-bottom #box-picto .picto.drag .bck {
  cursor: -webkit-grabbing;
  box-shadow: 3px 3px #555;
}
.darkmode #box-bottom #box-picto .picto.drag .bck {
  box-shadow: 3px 3px #000;
}
#box-bottom #box-picto .picto.replacer {
  animation: tweenReplacer 0.4s ease 0s forwards;
  z-index: 1;
}
@keyframes tweenReplacer {
  to {
    transform: translate3d(0, 0, 0);
  }
}
#box-bottom #box-picto .picto.griser {
  cursor: pointer;
  opacity: 0;
  animation: tweenOpacity 0.3s ease 0s forwards;
}
.darkmode #box-bottom #box-picto .picto.griser {
  animation: tweenOpacityDM 0.3s ease 0s forwards;
}
#box-bottom #box-picto .picto.griser .bck {
  background-position-y: -100% !important;
}
@keyframes tweenOpacity {
  to {
    opacity: 1;
  }
}
@keyframes tweenOpacityDM {
  to {
    opacity: 0.2;
  }
}
#box-bottom #box-picto .picto.flashme {
  animation: tweenFlashme 0.4s var(--easeOutBack);
}
@keyframes tweenFlashme {
  from {
    opacity: 0;
    transform: scale(2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
#box-bottom #box-picto .picto.hideYourself {
  transition: background-color 0s ease-out;
  background-color: #e6e5e5;
}
.darkmode #box-bottom #box-picto .picto.hideYourself {
  background-color: #222;
}
#box-bottom #box-picto .picto.hideYourself .bck {
  transition: opacity 0s ease-out;
  opacity: 0;
}
.spinner-box {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}
.spinner-box.hide {
  opacity: 0;
}
.box-popup {
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box-popup.show {
  visibility: visible;
}
.box-popup.VKBopen {
  pointer-events: auto;
  overflow-y: scroll;
}
.box-popup .centerbck {
  position: relative;
  width: 100%;
  height: 100%;
}
.box-popup.mini {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.box-popup.mini .centerbck {
  max-width: var(--max-app-width);
  max-height: var(--max-app-height);
}
.box-popup.mini .bac,
.box-popup.mini .flex {
  top: var(--box-top-height-pct) !important;
  left: 0 !important;
  height: auto !important;
  width: 100% !important;
  bottom: var(--box-bottom-height-pct) !important;
  transition: bottom 0.3s ease-in-out;
}
.bottomSlide .box-popup.mini .bac,
.bottomSlide .box-popup.mini .flex {
  bottom: calc(var(--box-top-height-pct) / 2) !important;
}
.box-popup .bac {
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.darkmode .box-popup .bac {
  background-color: rgba(40, 40, 40, 0.8);
}
.box-popup .bac.animateFadeIn {
  animation: animateFadeIn 0.3s ease 0s forwards;
}
.box-popup .bac.animateFadeOut {
  animation: animateFadeOut 0.2s ease 0s forwards;
}
.box-popup .flex {
  position: absolute;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.box-popup .box {
  pointer-events: auto;
  opacity: 0;
  width: auto;
  height: auto;
}
.box-popup.big .box {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: unset;
  width: calc(100vw - 60px);
  max-width: 700px;
  height: calc(100vh - 60px);
  max-height: 350px;
}
.box-popup.big.with-tab .box {
  max-height: 500px;
}
.box-popup .box.open {
  opacity: 0;
  transform: scale(0.5);
  animation: tweenPopupOpen 0.3s var(--easeOutBack) 0s forwards;
}
.box-popup .box.close {
  opacity: 1;
  animation: tweenPopupCloseScaleUp 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045)
    0s forwards;
}
.box-popup .box.slideUp {
  animation: TweenPopSlideUp 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s
    forwards;
}
.box-popup .box.slideDown {
  pointer-events: none;
  animation: TweenPopSlideDown 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s
    forwards;
}
.box-popup .box .pop2 {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--popup-scale) * 6px);
  background-color: var(--col-general-bck);
}
.box-popup .box .pop {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--popup-scale) * 6px);
  background-color: var(--col-general-bck);
}
.box-popup .box .pop .icon {
  display: none;
}
.box-popup.action .box .pop .icon,
.box-popup.action-back .box .pop .icon,
.box-popup.info .box .pop .icon {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  margin-left: calc(var(--bt-scale) * -22px);
  margin-top: calc(var(--bt-scale) * -22px);
  border-radius: 50%;
}
.box-popup.action .box .pop .icon .icn-svg,
.box-popup.action-back .box .pop .icon .icn-svg {
  stroke-width: 0.3px;
}
.box-popup.action-back .box .pop .icon {
  left: 0 !important;
}
.box-popup.action .box .pop .icon,
.box-popup.action-back .box .pop .icon {
  cursor: pointer;
  left: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .box-popup.action .box .pop .icon,
  .box-popup.action-back .box .pop .icon {
    transition: transform 0.2s ease-out;
  }
  .box-popup.action .box .pop .icon:hover,
  .box-popup.action-back .box .pop .icon:hover {
    transition-duration: 0s;
    transform: scale(1.1);
  }
}
.box-popup.lock .box .pop .icon {
  display: none;
}
.box-popup.info .box .pop .icon .bck {
  background-color: var(--col-red1);
}
.box-popup.success .box .pop .icon .bck {
  background-color: var(--col-green1);
}
.box-popup .box .pop .container {
  width: 100%;
  height: 100%;
  padding: calc(var(--popup-scale) * 35px);
  text-align: center;
}
.box-popup .box .pop .container .box-bt-haut {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
}
.box-popup .box .pop .container .box-bt-haut .bt-haut {
  margin: 0 calc(var(--popup-scale) * 15px);
}
.box-popup .box .pop .container img {
  pointer-events: none;
}
.box-popup .box .pop .container .bloc-hr {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  max-height: 50px;
  min-height: 15px;
}
.box-popup .box .pop .container .line {
  padding: calc(var(--popup-scale) * 20px) 0;
  border-bottom: 1px solid #ddd;
}
.box-popup .box .pop .container .line:first-child {
  padding-top: 0;
}
.box-popup .box .pop .container .line:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.box-popup .box .pop .container .title {
  font-family: ralewaybold, Sans-Serif;
  font-size: var(--big-font-size);
  margin-bottom: 0.5em;
  color: #000;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
}
.darkmode .box-popup .box .pop .container .title {
  color: #ccc;
}
.box-popup .box .pop .container .text {
  font-family: ralewayregular, Sans-Serif;
  font-size: var(--medium-font-size);
  line-height: 1.4;
  color: #5a5a5a;
  white-space: nowrap;
  cursor: default;
}
.darkmode .box-popup .box .pop .container .text {
  font-family: ralewaymedium;
  color: #888;
}
.box-popup .box .pop .container .text.moyen {
  font-size: 16px;
}
.box-popup .box .pop .container .text.petit {
  font-size: 14px;
}
.box-popup .box .pop .container .text.mini {
  font-size: var(--mini-font-size);
}
.box-popup .box .pop .container .content {
  position: relative;
  text-align: center;
  margin-top: calc(var(--popup-scale) * 30px);
  width: inherit;
}
.lang-ru .box-popup .box .pop .bt-haut .txt {
  font-size: 11px;
}
.box-popup#pop-menu-exit {
  z-index: 4;
}
.box-popup#pop-menu-exit .container .bt {
  width: calc(var(--bt-scale) * 300px);
  margin: 0 auto calc(var(--bt-scale) * 16px) auto !important;
}
.box-popup#pop-menu-exit .box .pop .container .content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}
.box-popup#pop-dialog {
  z-index: 5;
  cursor: default;
}
.box-popup#pop-dialog .pop {
  min-width: 300px;
  max-width: 400px;
  width: auto;
}
.box-popup#pop-dialog .pop .container {
  width: inherit;
  padding: calc(var(--popup-scale) * 30px);
  white-space: normal;
}
.box-popup#pop-dialog .pop .container .title {
  font-size: var(--medium-font-size);
  margin-bottom: 10px;
}
.box-popup#pop-dialog .pop .container .text {
  font-size: var(--normal-font-size);
  white-space: normal;
}
.box-popup#pop-dialog .pop .container .text span.link {
  font-family: ralewaymedium;
  color: var(--col-blue1);
}
.box-popup#pop-dialog .pop .container .content {
  margin-top: 20px;
  white-space: nowrap;
}
.box-popup#pop-dialog .pop .container .content .bt {
  margin: 0 5px;
}
.box-popup#pop-dialog .box.close {
  animation: tweenPopupCloseScaleDown 0.2s
    cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s forwards;
}
@keyframes tweenPopupOpen {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes tweenPopupCloseScaleUp {
  to {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes tweenPopupCloseScaleDown {
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
.box-popup#pop-switch .pop .container #sp-select {
  position: relative;
  margin-top: calc(var(--popup-scale) * 20px);
}
.box-popup.with-tab .box.open {
  animation: TweenPopSlideUp 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s
    forwards;
}
.box-popup.with-tab .box.close {
  opacity: 1;
  animation: TweenPopSlideDown 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s
    forwards;
}
@keyframes TweenPopSlideUp {
  from {
    opacity: 0;
    transform: translate(0, 80px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes TweenPopSlideDown {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
.box-popup.with-tab .box-tab {
  white-space: nowrap;
  position: relative;
}
.box-popup.with-tab .pop {
  opacity: 1;
  display: none;
  width: 100%;
  height: calc(100% - var(--tab-height));
  border-radius: 6px;
  border-top-left-radius: 0;
}
.box-popup.with-tab .pop.active {
  display: block;
}
.box-popup.with-tab .pop .container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  padding: 40px 60px;
}
.pop#pop-credit .container .text {
  color: #000;
  cursor: default;
  font-size: var(--normal-font-size);
}
.darkmode .pop#pop-credit .container .text {
  color: #fff;
}
.pop#pop-credit .container .bt {
  margin: 0 7px;
}
.pop#pop-credit .container .logo {
  height: 100%;
  max-height: 85px;
  min-height: 30px;
  background-image: url(../img/title.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 15px;
  pointer-events: none;
}
.darkmode .pop#pop-credit .container .logo {
  background-image: url(../img/title-darkmode.svg);
}
.pop#pop-credit .container #copy span {
  font-size: var(--small-font-size);
  color: #666;
}
.darkmode .pop#pop-credit .container #copy span {
  color: #888;
}
.pop#pop-credit .container #team .box-team {
  display: inline-block;
  padding: 0 10px;
  text-align: right;
  line-height: 1.3;
}
.pop#pop-credit .container #team .box-team:last-child {
  text-align: left;
  color: #666;
}
.darkmode .pop#pop-credit .container #team .box-team:last-child {
  color: #888;
}
.pop#pop-credit .container .linkme {
  border-bottom: 1px dotted #ccc;
  display: inline-block;
  color: #666 !important;
  cursor: pointer;
}
.safemode #pop-credit .bt {
  visibility: hidden;
}
.pop#pop-follow .container .title {
  font-family: ralewaymedium, Sans-Serif;
  height: 40px;
}
.pop#pop-follow .container .btbox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: calc(var(--bt-big-scale) * 10px) 0 0 0;
  min-height: 33px;
}
.pop#pop-follow .container .btbox .bt {
  margin: 0 calc(var(--bt-big-scale) * 13px);
}
.pop#pop-follow .container #img-shop {
  height: 100%;
  max-height: 170px;
  min-height: 90px;
  background-image: url(../img/shop-img@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.pop#pop-follow .container #img-shop img {
  display: block;
  width: 100%;
}
.pop#pop-follow .container #img-shop.focused {
  background-color: transparent !important;
}
.safemode #tab-follow {
  visibility: hidden;
}
.safemode #pop-follow {
  visibility: hidden;
}
.pop#pop-language .bt {
  width: 117px;
  margin: 10px 7px;
}
#pop-setting .container {
  text-align: left;
}
#pop-advsetting .container {
  text-align: left;
}
.container .paramline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.darkmode .container .paramline .label {
  color: #ccc;
}
.container .paramline .bt {
  min-width: 90px;
  margin-right: 0;
  margin-left: auto;
}
.container .paramline .ic-info {
  position: relative;
  width: 22px;
  height: 22px;
  background-color: #ccc;
  border-radius: 50%;
  margin-left: 15px;
  margin-right: 15px;
  cursor: pointer;
}
.darkmode .container .paramline .ic-info .icn-svg {
  fill: var(--col-dark-bck);
}
@media (hover: hover) and (pointer: fine) {
  .container .paramline .ic-info:hover {
    background-color: #ddd;
  }
}
.box-popup.column .pop {
  overflow: hidden;
}
.box-popup.column .pop .container {
  display: -ms-flexbox;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
}
.box-popup.column .pop .container .left {
  position: relative;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 35%;
  background-color: #ddd;
}
.darkmode .box-popup.column .pop .container .left {
  background-color: #000;
}
.box-popup.column .pop .container .left .icn-box {
  width: 60px;
  height: 60px;
}
.box-popup.column .pop .container .left .img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}
.box-popup.column .pop .container .left .img-box.fade {
  animation: opacityTweenUp 0.5s ease forwards;
}
@keyframes opacityTweenUp {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.box-popup.column .pop .container .right {
  width: 65%;
  padding: 35px;
  text-align: left;
}
.box-popup.column .pop .container .right .title sup {
  text-transform: initial;
}
.box-popup.column .pop .container .right .text {
  white-space: normal;
}
.box-popup.column .pop .container .right .bt {
  margin: 20px 0;
}
.box-popup#pop-info .slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}
.box-popup#pop-info .slideshow .overflow-box {
  position: relative;
  width: inherit;
  height: inherit;
  overflow: hidden;
  margin: 0 auto;
}
.box-popup#pop-info .slideshow .img-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * 5);
  height: 100%;
  transform: translate(0, 0);
  -ms-touch-action: none;
  touch-action: none;
}
.box-popup#pop-info .slideshow .img-row.slide {
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.box-popup#pop-info .slideshow .bloc {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.box-popup#pop-info .slideshow .img {
  height: 100%;
  background-image: url(../img/info-didac1@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.box-popup#pop-info .slideshow #bloc-tuto2 .img {
  background-image: url(../img/info-didac2@2x.png);
}
.box-popup#pop-info .slideshow #bloc-tuto3 .img {
  background-image: url(../img/info-didac3@2x.png);
}
.box-popup#pop-info .slideshow #bloc-tuto4 .img {
  background-image: url(../img/info-didac4@2x.png);
}
.box-popup#pop-info .slideshow #bloc-tuto5 .img {
  background-image: url(../img/info-didac5@2x.png);
}
.box-popup#pop-info .slideshow .txt {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 75px;
  margin-top: 10px;
}
.box-popup#pop-info .slideshow .txt span {
  line-height: 1.3;
  text-align: center;
  color: #5a5a5a;
  cursor: default;
}
.darkmode .box-popup#pop-info .slideshow .txt span {
  color: #888;
}
.box-popup#pop-info .slideshow .txt b span {
  font-weight: 400;
  font-family: ralewaybold, Sans-Serif;
  color: #2f3a89;
}
.darkmode .box-popup#pop-info .slideshow .txt b {
  color: #4551ad;
}
.box-popup#pop-info .slideshow .nav-box {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.box-popup#pop-info .slideshow .nav-box .pt-box {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: auto;
  margin-bottom: calc(var(--popup-scale) * -10px);
}
.box-popup#pop-info .slideshow .nav-box .pt-box .pt {
  margin: 0 calc(var(--popup-scale) * 3px);
  width: calc(var(--popup-scale) * 6px);
  height: calc(var(--popup-scale) * 6px);
  border-radius: 50%;
  background-color: #ccc;
}
.box-popup#pop-info .slideshow .nav-box .pt.active {
  background-color: #5a5a5a;
}
.box-popup#pop-info .slideshow .nav-box .bt {
  margin-top: auto;
}
.box-popup#pop-info .slideshow .nav-box .bt.disable {
  cursor: default;
  opacity: 0.3;
}
.box-popup#pop-info .slideshow .nav-box .bt:first-child {
  margin-left: 0;
}
.box-popup#pop-info .slideshow .nav-box .bt:nth-child(2) {
  margin-right: 5%;
}
.box-popup#pop-info .slideshow .nav-box .bt .bck {
  background-color: transparent;
}
.box-popup#pop-info .slideshow .nav-box .bt .bck .icn-svg {
  fill: #ccc;
}
.box-popup#pop-info .slideshow .nav-box .bt.focused .bck {
  border-radius: 50%;
}
.box-popup .pop form {
  width: 100%;
  min-width: 390px;
  max-width: 450px;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}
.box-popup .pop .formzone {
  width: 100%;
}
.box-popup .pop .btzone {
  margin-left: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.box-popup .pop .formline {
  margin-bottom: 15px;
}
.box-popup .pop .formline:last-child {
  margin-bottom: 0;
}
.box-popup .pop .formline .icn-box {
  width: var(--icn-formline-height);
  height: var(--icn-formline-height);
  margin-right: 10px;
}
.box-popup .pop .formline .icn-box .icn-svg {
  stroke: #8c8c8c;
  fill: #8c8c8c;
}
.formline {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  height: var(--formline-height);
  font-family: ralewayregular, Sans-Serif;
  font-size: var(--normal-font-size);
}
.selectarea,
input[type="email"],
input[type="text"] {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  font-family: inherit;
  font-size: inherit;
  box-shadow: none;
  border: none;
  border-radius: 5px;
  background-color: #dcdcdc;

  text-overflow: ellipsis;
  white-space: nowrap;
}
input[type="email"].focused::-moz-placeholder,
input[type="text"].focused::-moz-placeholder {
  color: #95c2fe;
}
input[type="email"].focused:-ms-input-placeholder,
input[type="text"].focused:-ms-input-placeholder {
  color: #95c2fe;
}
input[type="email"].focused::placeholder,
input[type="text"].focused::placeholder {
  color: #95c2fe;
}
.darkmode .selectarea,
.darkmode input[type="email"],
.darkmode input[type="text"] {
  font-family: ralewaymedium;
  background-color: #2a2a2a;
  color: #ddd;
}
.selectarea.focused,
input[type="email"].focused,
input[type="text"].focused {
  background-color: var(--col-blue-site) !important;
  color: #fff;
}
.lang-ar .selectarea,
.lang-ar input[type="email"],
.lang-ar input[type="text"] {
  text-align: right;
}
input[type="email"]:focus,
input[type="text"]:focus {
  background-color: #eee;
}
.darkmode input[type="email"]:focus,
.darkmode input[type="text"]:focus {
  background-color: #444;
}
input[type="email"].invalid,
input[type="text"].invalid {
  animation: animateShake 0.5s var(--easeOutBack) 0s;
}
@keyframes animateInvalid {
  25% {
    background-color: #e88484;
    transform: translate(2px, 0);
  }
  50% {
    background-color: initial;
    transform: translate(-2px, 0);
  }
  75% {
    background-color: #e88484;
    transform: translate(2px, 0);
  }
  100% {
    background-color: initial;
    transform: translate(0, 0);
  }
}
.shake {
  animation: animateShake 0.6s var(--easeOutBack) 0s;
}
@keyframes animateShake {
  10% {
    transform: translate(15px, 0);
  }
  20% {
    transform: translate(-12px, 0);
  }
  35% {
    transform: translate(10px, 0);
  }
  50% {
    transform: translate(-10px, 0);
  }
  65% {
    transform: translate(8px, 0);
  }
  80% {
    transform: translate(-6px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@media (hover: hover) and (pointer: fine) {
  .selectarea:hover {
    cursor: text;
  }
}
.safemode #pop-popup[data-name="mix-saved"] .bt.download,
.safemode #pop-popup[data-name="mix-saved"] .bt.link,
.safemode #pop-popup[data-name="mix-saved"] .bt.share {
  display: none;
}
#pop-popup[data-name="save-form"] .formline.ic-private {
  -ms-flex-pack: start;
  justify-content: flex-start;
}
#pop-popup[data-name="save-form"] .bt-onofftext {
  height: var(--formline-height);
  width: 100%;
  border-radius: 5px;
}
#pop-popup[data-name="save-form"] .bt-onofftext .slider {
  border-radius: 5px;
  height: calc(100% - 8px);
}
.safemode #pop-popup[data-name="save-form"] .formline.ic-private {
  display: none;
}
.safemode #pop-popup[data-name="save-form"] .formline.ic-private .bt-onofftext {
  display: none;
}
#pop-popup[data-name="save-form"] .formline.ic-private .bt-onofftext.focused {
  transform: scale(1.1) !important;
}
.afs #pop-popup[data-name="save-form"] .formline.ic-name input#input-name {
  pointer-events: none;
  cursor: pointer;
}
.afs #pop-popup[data-name="save-form"] .formline.ic-dedi {
  display: none;
}
.box-popup.mini[data-name="bonus-unlocked"] .flex,
.box-popup.mini[data-name="find-next-bonus"] .flex {
  -ms-flex-align: start;
  align-items: flex-start;
  margin-top: calc(var(--popup-pointe-h) + calc(10px * var(--popup-scale)));
}
.box-popup.mini[data-name="drag-and-drop"] .flex {
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: calc(var(--popup-pointe-h) + calc(10px * var(--popup-scale)));
}
.box-popup .box .pop #pointe-box {
  position: absolute;
  top: calc(var(--popup-pointe-h) * -1);
  left: 0;
  width: 100%;
  height: var(--popup-pointe-h);
}
.box-popup .box .pop #pointe-box.bottom {
  top: unset;
  margin-top: -1px;
}
.box-popup .box .pop #pointe-box #pointe {
  position: relative;
  left: 50%;
  margin-left: calc((var(--popup-pointe-w) / 2) * -1);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 calc((var(--popup-pointe-w) / 2))
    calc((var(--popup-pointe-h) + 1px)) calc((var(--popup-pointe-w) / 2));
  border-color: transparent transparent var(--col-general-bck) transparent;
}
.box-popup .box .pop #pointe-box.bottom #pointe {
  border-width: calc((var(--popup-pointe-h) + 1px))
    calc((var(--popup-pointe-w) / 2)) 0 calc((var(--popup-pointe-w) / 2));
  border-color: var(--col-general-bck) transparent transparent transparent;
}
.box-popup .pop .progress-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.box-popup .pop .progress-box.show {
  opacity: 1;
}
.box-popup .pop .progress-box.hide {
  opacity: 0;
}
.box-popup .pop .progress-bar {
  transition: width 0.2s ease-out;
}
.box-popup .pop #bt-save-file {
  pointer-events: none;
  margin: 0;
  opacity: 0;
  text-decoration: none;
  transition: opacity 0.3s ease-out 0.2s;
}
.box-popup .pop #bt-save-file.enabled {
  pointer-events: auto;
  opacity: 1;
}
#pop-popup[data-name="safe-code"] .pop .container .bt-number {
  margin: 5px;
  width: 40px;
  height: 40px;
}
#pop-popup[data-name="safe-code"] .pop .container .bt-number .txt {
  font-size: calc(var(--bt-scale) * 16px);
}
#pop-dialog[data-name="dialog-clipboard"] .formline {
  margin-bottom: 10px;
}
#pop-dialog[data-name="dialog-clipboard"] .formline .selectarea {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
.box-popup[data-name="popup-param"] .box .pop .container .bloc-hr {
  max-height: 25px;
}
.box-popup[data-name="get-full-app"] .pop .container .right .bt-store {
  margin: 20px 0 0 0;
}
.box-popup[data-name="get-full-app-browser"] .pop {
  min-width: 600px;
}
.box-bt-store {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 24px 0;
}
.box-bt-store .bt-store {
  margin: 6px;
}
.bt-store {
  display: block;
  width: 100%;
  max-width: 200px;
  transition: transform 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}
.bt-store .bck {
  width: 100%;
  height: 0;
  padding-bottom: 29.56%;
  background-image: var(--url-img-bt-stores);
  background-repeat: no-repeat;
  background-size: cover;
  text-indent: -9999px;
}
.bt-store .bck.appstore {
  background-position: left 0;
}
.bt-store .bck.playstore {
  background-position: calc(100% / 7) 0;
}
.bt-store .bck.amazonstore {
  background-position: calc((100% / 7) * 2) 0;
}
.bt-store .bck.macappstore {
  background-position: calc((100% / 7) * 3) 0;
}
.bt-store .bck.windowsstore {
  background-position: calc((100% / 7) * 4) 0;
}
.bt-store .bck.aic {
  background-position: calc((100% / 7) * 5) 0;
}
.bt-store .bck.steam {
  background-position: calc((100% / 7) * 6) 0;
}
.bt-store .bck.schools {
  background-position: right 0;
}
#debugframe {
  z-index: 100;
  pointer-events: none;
  border: 1px solid orange;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.appBrowserDemo #home-bt-news {
  display: none !important;
}
.cn-and #lock-all.showAd {
  background-color: rgb(0, 0, 0, 0.5);
  pointer-events: auto;
  visibility: visible;
}
:root {
  --bt-bck-color: #888;
  --bt-bck-border-color: transparent;
  --bt-txt-color: #fff;
  --bt-icn-color: #fff;
  --bt-bck-color-hover: #555;
  --bt-bck-border-color-hover: transparent;
  --bt-txt-color-hover: #fff;
  --bt-icn-color-hover: #fff;
  --bt-bck-color-active: #555;
  --bt-bck-border-color-active: transparent;
  --bt-txt-color-active: #fff;
  --bt-icn-color-active: #fff;
  --bt-scale: 1;
  --bt-big-scale: 1;
}
.bt {
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  height: calc(var(--bt-scale) * 30px);
}
.bt .bck {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  background-color: var(--bt-bck-color);
  border: 1px solid var(--bt-bck-border-color);
  width: 100%;
  height: 100%;
  padding: 0 calc(var(--bt-scale) * 15px);
  border-radius: calc(var(--bt-scale) * 15px);
}
.bt .txt {
  font-family: ralewaymedium, Sans-Serif;
  font-size: calc(var(--bt-scale) * 14px);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bt-txt-color);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bt.with-icn .bck {
  padding: 0 calc(var(--bt-scale) * 15px) 0 calc(var(--bt-scale) * 5px);
}
.bt .bck .icn-svg {
  fill: var(--bt-icn-color);
  width: 90%;
  height: 90%;
}
.bt.disable {
  pointer-events: none;
  opacity: 0.3;
}
.icn-svg {
  display: inline-block;
  width: inherit;
  height: inherit;
  stroke-width: 0;
  stroke: white;
  fill: white;
}
.icn-svg path {
  stroke-width: 0;
  stroke: white;
  fill: white;
}
.bt.with-icn .bck .icn-svg {
  width: calc(var(--bt-scale) * 30px * 0.9);
  height: calc(var(--bt-scale) * 30px * 0.9);
}
.bt.with-icn.bt-big .bck .icn-svg {
  width: calc(var(--bt-big-scale) * 60px * 0.9);
  height: calc(var(--bt-big-scale) * 60px * 0.9);
}
.bt.bt-big {
  height: calc(var(--bt-big-scale) * 60px);
}
.bt.bt-big.bt-round {
  width: calc(var(--bt-big-scale) * 60px);
  height: calc(var(--bt-big-scale) * 60px);
}
.bt.bt-big .bck {
  padding: 0 calc(var(--bt-big-scale) * 30px);
  border-radius: calc(var(--bt-big-scale) * 30px);
}
.bt.bt-big.with-icn .bck {
  padding-left: calc(var(--bt-big-scale) * 10px);
}
.bt.bt-big .txt {
  font-size: calc(var(--bt-big-scale) * 20px);
}
.bt.bt-round {
  width: calc(var(--bt-scale) * 30px);
  height: calc(var(--bt-scale) * 30px);
}
.bt.bt-round .bck {
  padding: 0;
  border-radius: 50%;
}
.bt.bt-44 {
  width: calc(var(--bt-scale) * 44px);
  height: calc(var(--bt-scale) * 44px);
}
.bt.bt-80 {
  width: calc(var(--bt-scale) * 80px);
  height: calc(var(--bt-scale) * 80px);
}
.bt {
  transform: translate3d(0, 0, 0);
}
.bt.ontouch {
  animation: btTouch 0.2s ease-out;
}
@keyframes btTouch {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.bt.bt-haut {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: calc(var(--bt-scale) * 60px);
  height: calc(var(--bt-scale) * 90px);
}
.bt.bt-haut .bck {
  position: relative;
  width: calc(var(--bt-scale) * 60px);
  height: calc(var(--bt-scale) * 60px);
  background-color: var(--bt-bck-color);
  border-radius: 50%;
  padding: 0;
}
.bt.bt-haut .txt {
  width: 120%;
  margin-left: -10%;
  margin-top: calc(var(--bt-scale) * 10px);
  color: var(--bt-bck-color);
}
.bt.bt-haut.focused .txt {
  color: var(--col-blue-site) !important;
}
.bt-onoff {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: start;
  justify-content: start;
  width: calc(var(--bt-scale) * 90px);
  height: calc(var(--bt-scale) * 30px);
  padding: 0 calc(var(--bt-scale) * 3px);
  border-radius: calc(var(--bt-scale) * 15px);
  transition: all 0.1s ease-in-out;
  background-color: #ccc;
  margin-left: auto;
  cursor: pointer;
}
.bt-onoff .slider {
  width: calc(var(--bt-scale) * 40px);
  height: calc(var(--bt-scale) * 24px);
  background-color: #fafafa;
  border-radius: calc(var(--bt-scale) * 12px);
  margin-left: 0;
  transition: margin 0.2s ease-in-out;
}
.bt-onoff.active {
  background-color: #8c8c8c;
}
.bt-onoff.active .slider {
  margin-left: 53%;
}
.darkmode .bt-onoff {
  background-color: #444;
}
.darkmode .bt-onoff.active {
  background-color: #888;
}
.darkmode .bt-onoff .slider {
  background-color: #0a0a0a;
}
.bt-onoff.focused {
  background-color: var(--col-blue-site) !important;
}
.darkmode .bt {
  --bt-bck-color: #555;
  --bt-bck-color-hover: #333;
  --bt-bck-color-active: #333;
}
.bt.focused {
  background-color: transparent !important;
}
.bt.focused .bck {
  background-color: var(--col-blue-site) !important;
}
.bt.focused .txt {
  color: #fff !important;
}
.bt.bt-light {
  --bt-bck-color: #fff;
  --bt-bck-border-color: #aaa;
  --bt-txt-color: #888;
  --bt-icn-color: #aaa;
  --bt-bck-color-hover: #555;
  --bt-bck-border-color-hover: #555;
  --bt-txt-color-hover: #fff;
  --bt-icn-color-hover: #ddd;
  --bt-bck-color-active: #555;
  --bt-bck-border-color-active: #555;
  --bt-txt-color-active: #fff;
  --bt-icn-color-active: #ddd;
}
.darkmode .bt.bt-light {
  --bt-bck-color: #0a0a0a;
  --bt-bck-border-color: #666;
  --bt-txt-color: #ccc;
  --bt-icn-color: #ccc;
  --bt-bck-color-hover: #555;
  --bt-bck-border-color-hover: #555;
  --bt-txt-color-hover: #fff;
  --bt-icn-color-hover: #fff;
  --bt-bck-color-active: #555;
  --bt-bck-border-color-active: #555;
  --bt-txt-color-active: #fff;
  --bt-icn-color-active: #fff;
}
.bt.bt-soft {
  --bt-bck-color: #eee;
  --bt-txt-color: #888;
  --bt-icn-color: #999;
  --bt-bck-color-hover: #555;
  --bt-txt-color-hover: #ddd;
  --bt-icn-color-hover: #ddd;
  --bt-bck-color-active: #444;
  --bt-txt-color-active: #fff;
  --bt-icn-color-active: #fff;
}
.darkmode .bt.bt-soft {
  --bt-bck-color: #222;
  --bt-txt-color: #888;
  --bt-icn-color: #888;
  --bt-bck-color-active: #555;
}
.bt.color {
  --bt-bck-color: var(--col1);
  --bt-bck-color-hover: var(--col3);
  --bt-bck-color-active: var(--col4);
}
.bt.color-red,
.bt.color-youtube {
  --bt-bck-color: var(--col-red1);
  --bt-txt-color: var(--col-red1);
  --bt-bck-color-hover: var(--col-red2);
  --bt-txt-color-hover: var(--col-red2);
}
.bt.color-green {
  --bt-bck-color: var(--col-green1);
  --bt-txt-color: var(--col-green1);
  --bt-bck-color-hover: var(--col-green2);
  --bt-txt-color-hover: var(--col-green2);
}
.bt.color-blue {
  --bt-bck-color: var(--col-blue1);
  --bt-txt-color: var(--col-blue1);
  --bt-bck-color-hover: var(--col-blue2);
  --bt-txt-color-hover: var(--col-blue2);
}
.bt.color-facebook {
  --bt-bck-color: #3c5a97;
  --bt-txt-color: #3c5a97;
  --bt-bck-color-hover: #2f3a89;
  --bt-txt-color-hover: #2f3a89;
}
.bt.color-twitter {
  --bt-bck-color: #1da1f2;
  --bt-txt-color: #1da1f2;
  --bt-bck-color-hover: #3e82d7;
  --bt-txt-color-hover: #3e82d7;
}
.bt.color-instagram {
  --bt-bck-color: #e95950;
  --bt-bck-border-color: #e95950;
  --bt-bck-color-hover: #cc4340;
  --bt-txt-color-hover: #cc4340;
}
.bt.color-tumblr {
  --bt-bck-color: #2b4d66;
  --bt-txt-color: #2b4d66;
  --bt-bck-color-hover: #203a49;
  --bt-txt-color-hover: #203a49;
}
.bt.color-black {
  --bt-bck-color: #000;
  --bt-txt-color: #fff;
  --bt-bck-color-hover: #333;
  --bt-txt-color-hover: #ddd;
}
@media (hover: hover) and (pointer: fine) {
  .bt:not(.active):not(.focused) {
    cursor: pointer;
  }
  .bt:not(.active):not(.focused) .bck {
    transition: background-color, border-color, 0.2s;
  }
  .bt:hover:not(.active):not(.focused) .bck {
    transition-duration: 0s;
  }
  .bt:hover:not(.active):not(.focused) {
    --bt-bck-color: var(--bt-bck-color-hover) !important;
    --bt-bck-border-color: var(--bt-bck-border-color-hover) !important;
    --bt-txt-color: var(--bt-txt-color-hover) !important;
    --bt-icn-color: var(--bt-icn-color-hover) !important;
  }
}
.bt.active,
.darkmode .bt.active {
  --bt-bck-color: var(--bt-bck-color-active) !important;
  --bt-bck-border-color: var(--bt-bck-border-color-active) !important;
  --bt-txt-color: var(--bt-txt-color-active) !important;
  --bt-icn-color: var(--bt-icn-color-active) !important;
}
.hitzone {
  position: absolute;
  width: 100%;
  left: 0;
  width: 150%;
  height: 150%;
  left: -25%;
  top: -25%;
}
.bt:not(.bt-round) .hitzone {
  width: 100%;
  left: 0;
}
.bt.bt-haut .hitzone {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.tab {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: auto;
  min-width: 100px;
  height: var(--tab-height);
  padding: 0 24px;
  margin-left: -10px;
  border-radius: 6px 6px 0 0;
  font-family: ralewaymedium, Sans-Serif;
  font-size: var(--medium-font-size);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--col0);
  background-color: var(--col3);
  cursor: pointer;
  white-space: nowrap;
}
.tab:first-child {
  margin-left: 0;
}
.tab.active {
  z-index: 1;
  color: #fff;
  background-color: var(--col1);
}
.tab .hitzone {
  left: 0;
  top: -50%;
  width: 100%;
  height: 150%;
}
.tab.icon .icon {
  margin-right: 8px;
  margin-left: -8px;
  width: 24px;
  height: 100%;
}
.tab.icon .icon .icn-svg {
  fill: var(--col1);
  stroke: var(--col1);
}
.tab.icon.active .icon .icn-svg {
  fill: var(--col4);
  stroke: var(--col4);
}
.tab.icon.active.spin .icon .icn-svg {
  fill: #fff;
  stroke: #fff;
}
.tab.focused {
  background-color: var(--col-blue-site) !important;
  color: #fff !important;
  transform-origin: bottom center;
  z-index: 2;
}
.tab.focused:first-child {
  transform-origin: bottom left;
}
.tab.focused:last-child {
  transform-origin: bottom right;
}
.tab.focused .icn-svg {
  fill: white !important;
  stroke: white !important;
}
.focused:not(.line) {
  transform: scale(1.1) !important;
}
.miniPlayer .centermax {
  max-width: 100%;
  max-height: 100%;
}
.miniPlayer .main-bt .box-top {
  display: none;
}
.miniPlayer #home #img-titre {
  display: none;
}
.miniPlayer .main-bt .box-bot {
  margin-top: auto;
}
.miniPlayer .progress-box {
  border-color: var(--col-blue-site);
  background-color: var(--col-blue-site);
  width: 80vh;
  height: 5vh;
  padding: 0.7vh;
  max-width: 200px;
  max-height: 20px;
  min-width: 100px;
  min-height: 12px;
}
.miniPlayer .progress-box .progress-bar {
  background-color: #fff;
}
.miniPlayer #home-bt-list,
.miniPlayer #home-bt-switch {
  display: none;
}
.miniPlayer #home-bt-play {
  font-size: var(--normal-font-size);
  width: 20vh;
  height: 20vh;
  max-width: 80px;
  max-height: 80px;
  min-width: 40px;
  min-height: 40px;
}
.miniPlayer #home-bt-play .bck {
  background-color: var(--col-blue-site);
}
@media (hover: hover) and (pointer: fine) {
  .miniPlayer #home-bt-play:hover .bck {
    background-color: var(--col-blue-site-hover);
  }
}
.miniPlayer #home #home-dedicated:not(:empty) {
  display: block;
  margin-top: 1%;
  font-family: ralewaymedium, Sans-Serif;
  font-size: var(--big-font-size);
  color: var(--col-blue-site);
  opacity: 0;
  transform: translateY(20px);
}
.miniPlayer #home #home-dedicated.animate {
  animation: tweenDedicated 1s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;
}
@keyframes tweenDedicated {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.miniPlayer #box-top {
  display: none;
}
.miniPlayer #box-reading-bar {
  top: 0;
  height: 2.2%;
}
.miniPlayer #game #box-stage-bck {
  top: 0;
  bottom: 0;
}
.miniPlayer #game #box-stage {
  top: 0;
  bottom: 0;
}
.miniPlayer #game #box-video {
  top: 0;
  bottom: 0;
}
.miniPlayer #box-bottom {
  display: none;
}
@media only screen and (min-height: 850px) {
  :root {
    --app-ratio: calc(1366 / 1024);
    --max-app-width-int: 1100;
    --max-app-height-int: calc(var(--max-app-width-int) / var(--app-ratio));
    --max-app-width: calc(var(--max-app-width-int) * 1px);
    --max-app-height: calc(var(--max-app-height-int) * 1px);
    --ratio-h: calc(100vh / var(--max-app-height-int));
    --fullfill-padding: 0px !important;
  }
}
@media only screen and (min-height: 550px) {
  #home .gradient {
    display: none;
  }
}
@media only screen and (max-height: 550px) {
  :root {
    --mini-font-size: 11px;
    --small-font-size: 12px;
    --normal-font-size: 13px;
    --medium-font-size: 15px;
    --big-font-size: 16px;
    --huge-font-size: 18px;
    --mixlist-rating-font-size: 16px;
    --bt-scale: 0.8;
    --bt-big-scale: 0.75;
    --popup-scale: 0.7;
    --mixlist-scale: 0.5;
    --sp-intro-scale: 0.9;
    --sp-select-scale: 0.9;
    --tab-height: 40px;
    --formline-height: 35px;
    --icn-formline-height: 25px;
  }
  .tab {
    min-width: 70px;
    padding: 0 12px;
    margin-left: -6px;
    border-radius: 3px 3px 0 0;
  }
  .tab.icon .icon {
    margin-right: 4px;
    margin-left: -4px;
    width: 18px;
  }
  .box-popup.with-tab .box {
    max-width: 480px;
  }
  .box-popup.with-tab .pop .container {
    padding: 30px;
  }
  .pop#pop-language .bt {
    width: 92px;
    margin: 5px;
  }
  .bt-store {
    max-width: 150px;
  }
  #home {
    background-size: auto 130vh;
    background-position: center calc(50% - 35px);
  }
  .miniPlayer #home {
    background-size: auto 150vh;
    background-position: center calc(50% - 20px);
  }
  #home-bt-news {
    width: calc(var(--bt-scale) * 50px);
    height: calc(var(--bt-scale) * 50px);
  }
  #mixlist #poplist {
    width: calc(100vw - 400px);
    min-width: 480px;
    height: calc(100vh - 20px);
  }
  #mixlist #poplist .tab-filter {
    padding: 8px;
  }
  #mixlist #poplist .tab-filter .bt {
    min-width: 80px;
  }
  #mixlist #poplist .boxline .line {
    height: 80px;
  }
  #mixlist #poplist .box-action {
    padding: 0 12px;
  }
  .mixbanner {
    font-size: var(--normal-font-size);
  }
  .mixbanner .rating {
    width: 44px;
    height: 44px;
  }
  .mixbanner .info .dj .box-flag {
    width: 17px;
  }
  .mixbanner .data .stat .boxstat .bck {
    width: 16px;
    height: 16px;
  }
}
@media only screen and (max-height: 450px) {
  :root {
    --sp-intro-scale: 0.7;
    --sp-select-scale: 0.7;
    --popup-scale: 0.6;
  }
  #home-bt-play {
    width: calc(var(--bt-scale) * 80px);
    height: calc(var(--bt-scale) * 80px);
  }
}
@media only screen and (max-height: 430px) {
  :root {
    --bt-big-scale: 0.55;
  }
  .box-popup.big.with-tab .box {
    max-height: 100vh;
  }
  .progress-box {
    height: 16px;
    width: 150px;
  }
}
@media only screen and (max-height: 350px) {
  :root {
    --mini-font-size: 10px;
    --small-font-size: 11px;
    --normal-font-size: 12px;
    --medium-font-size: 13px;
    --big-font-size: 15px;
    --huge-font-size: 16px;
    --sp-intro-scale: 0.6;
    --sp-select-scale: 0.6;
    --bt-big-scale: 0.55;
    --tab-height: 35px;
  }
  .box-popup.big:not(.action) .box {
    width: calc(100vw - 100px);
    height: calc(100vh - 20px);
  }
  .box-popup.big.with-tab .box {
    max-width: 460px;
  }
  .box-popup.with-tab .pop .container {
    padding: 20px;
  }
  #home .gradient#gradient-bot {
    height: 50%;
  }
  #home-bt-list,
  #home-bt-play,
  #home-bt-switch {
    width: 55px;
    height: 55px;
  }
  #mixlist #poplist .boxline .line {
    height: 60px;
  }
}
.fflag {
  position: relative;
  width: 100%;
  height: 0;
  padding: 30%;
  background-image: url(../img/flags.png);
  background-repeat: no-repeat;
  background-size: 100% 49494%;
}
.fflag.ff-sm {
  width: 18px;
  height: 11px;
}
.fflag.ff-md {
  width: 27px;
  height: 17px;
}
.fflag.ff-lg {
  width: 42px;
  height: 27px;
}
.fflag.ff-xl {
  width: 60px;
  height: 37px;
}
.fflag-CH,
.fflag-NP {
  box-shadow: none !important;
}
.fflag-DZ {
  background-position: center 0.2287%;
}
.fflag-AO {
  background-position: center 0.4524%;
}
.fflag-BJ {
  background-position: center 0.6721%;
}
.fflag-BW {
  background-position: center 0.8958%;
}
.fflag-BF {
  background-position: center 1.1162%;
}
.fflag-BI {
  background-position: center 1.3379%;
}
.fflag-CM {
  background-position: center 1.5589%;
}
.fflag-CV {
  background-position: center 1.7805%;
}
.fflag-CF {
  background-position: center 2.0047%;
}
.fflag-TD {
  background-position: center 2.2247%;
}
.fflag-CD {
  background-position: left 2.4467%;
}
.fflag-DJ {
  background-position: left 2.6674%;
}
.fflag-EG {
  background-position: center 2.8931%;
}
.fflag-GQ {
  background-position: center 3.1125%;
}
.fflag-ER {
  background-position: left 3.3325%;
}
.fflag-ET {
  background-position: center 3.5542%;
}
.fflag-GA {
  background-position: center 3.7759%;
}
.fflag-GM {
  background-position: center 4.0015%;
}
.fflag-GH {
  background-position: center 4.2229%;
}
.fflag-GN {
  background-position: center 4.441%;
}
.fflag-GW {
  background-position: left 4.66663%;
}
.fflag-CI {
  background-position: center 4.8844%;
}
.fflag-KE {
  background-position: center 5.1061%;
}
.fflag-LS {
  background-position: center 5.3298%;
}
.fflag-LR {
  background-position: left 5.5495%;
}
.fflag-LY {
  background-position: center 5.7712%;
}
.fflag-MG {
  background-position: center 5.994%;
}
.fflag-MW {
  background-position: center 6.2156%;
}
.fflag-ML {
  background-position: center 6.4363%;
}
.fflag-MR {
  background-position: center 6.658%;
}
.fflag-MU {
  background-position: center 6.8805%;
}
.fflag-YT {
  background-position: center 7.1038%;
}
.fflag-MA {
  background-position: center 7.3231%;
}
.fflag-MZ {
  background-position: left 7.5448%;
}
.fflag-NA {
  background-position: left 7.7661%;
}
.fflag-NE {
  background-position: center 7.98937%;
}
.fflag-NG {
  background-position: center 8.2099%;
}
.fflag-CG {
  background-position: center 8.4316%;
}
.fflag-RE {
  background-position: center 8.6533%;
}
.fflag-RW {
  background-position: right 8.875%;
}
.fflag-SH {
  background-position: center 9.0967%;
}
.fflag-ST {
  background-position: center 9.32237%;
}
.fflag-SN {
  background-position: center 9.5426%;
}
.fflag-SC {
  background-position: left 9.7628%;
}
.fflag-SL {
  background-position: center 9.9845%;
}
.fflag-SO {
  background-position: center 10.2052%;
}
.fflag-ZA {
  background-position: left 10.4269%;
}
.fflag-SS {
  background-position: left 10.6486%;
}
.fflag-SD {
  background-position: center 10.8703%;
}
.fflag-SR {
  background-position: center 11.0945%;
}
.fflag-SZ {
  background-position: center 11.3135%;
}
.fflag-TG {
  background-position: left 11.5354%;
}
.fflag-TN {
  background-position: center 11.7593%;
}
.fflag-UG {
  background-position: center 11.9799%;
}
.fflag-TZ {
  background-position: center 12.2005%;
}
.fflag-EH {
  background-position: center 12.4222%;
}
.fflag-YE {
  background-position: center 12.644%;
}
.fflag-ZM {
  background-position: center 12.8664%;
}
.fflag-ZW {
  background-position: left 13.0873%;
}
.fflag-AI {
  background-position: center 13.309%;
}
.fflag-AG {
  background-position: center 13.5307%;
}
.fflag-AR {
  background-position: center 13.7524%;
}
.fflag-AW {
  background-position: left 13.9741%;
}
.fflag-BS {
  background-position: left 14.1958%;
}
.fflag-BB {
  background-position: center 14.4175%;
}
.fflag-BQ {
  background-position: center 14.6415%;
}
.fflag-BZ {
  background-position: center 14.8609%;
}
.fflag-BM {
  background-position: center 15.0826%;
}
.fflag-BO {
  background-position: center 15.306%;
}
.fflag-VG {
  background-position: center 15.528%;
}
.fflag-BR {
  background-position: center 15.7496%;
}
.fflag-CA {
  background-position: center 15.9694%;
}
.fflag-KY {
  background-position: center 16.1911%;
}
.fflag-CL {
  background-position: left 16.4128%;
}
.fflag-CO {
  background-position: left 16.6345%;
}
.fflag-KM {
  background-position: center 16.8562%;
}
.fflag-CR {
  background-position: center 17.0779%;
}
.fflag-CU {
  background-position: left 17.2996%;
}
.fflag-CW {
  background-position: center 17.5213%;
}
.fflag-DM {
  background-position: center 17.743%;
}
.fflag-DO {
  background-position: center 17.968%;
}
.fflag-EC {
  background-position: center 18.1864%;
}
.fflag-SV {
  background-position: center 18.4081%;
}
.fflag-FK {
  background-position: center 18.6298%;
}
.fflag-GF {
  background-position: center 18.8515%;
}
.fflag-GL {
  background-position: left 19.0732%;
}
.fflag-GD {
  background-position: center 19.2987%;
}
.fflag-GP {
  background-position: center 19.518%;
}
.fflag-GT {
  background-position: center 19.7383%;
}
.fflag-GY {
  background-position: center 19.96%;
}
.fflag-HT {
  background-position: center 20.1817%;
}
.fflag-HN {
  background-position: center 20.4034%;
}
.fflag-JM {
  background-position: center 20.6241%;
}
.fflag-MQ {
  background-position: center 20.8468%;
}
.fflag-MX {
  background-position: center 21.0685%;
}
.fflag-MS {
  background-position: center 21.2902%;
}
.fflag-NI {
  background-position: center 21.5119%;
}
.fflag-PA {
  background-position: center 21.7336%;
}
.fflag-PY {
  background-position: center 21.9553%;
}
.fflag-PE {
  background-position: center 22.177%;
}
.fflag-PR {
  background-position: left 22.4002%;
}
.fflag-BL {
  background-position: center 22.6204%;
}
.fflag-KN {
  background-position: center 22.8421%;
}
.fflag-LC {
  background-position: center 23.0638%;
}
.fflag-PM {
  background-position: center 23.2855%;
}
.fflag-VC {
  background-position: center 23.5072%;
}
.fflag-SX {
  background-position: left 23.732%;
}
.fflag-TT {
  background-position: center 23.9506%;
}
.fflag-TC {
  background-position: center 24.1723%;
}
.fflag-US {
  background-position: center 24.392%;
}
.fflag-VI {
  background-position: center 24.6157%;
}
.fflag-UY {
  background-position: left 24.8374%;
}
.fflag-VE {
  background-position: center 25.0591%;
}
.fflag-AB {
  background-position: center 25.279%;
}
.fflag-AF {
  background-position: center 25.5025%;
}
.fflag-AZ {
  background-position: center 25.7242%;
}
.fflag-BD {
  background-position: center 25.9459%;
}
.fflag-BT {
  background-position: center 26.1676%;
}
.fflag-BN {
  background-position: center 26.3885%;
}
.fflag-KH {
  background-position: center 26.611%;
}
.fflag-CN {
  background-position: left 26.8327%;
}
.fflag-GE {
  background-position: center 27.0544%;
}
.fflag-HK {
  background-position: center 27.2761%;
}
.fflag-IN {
  background-position: center 27.4978%;
}
.fflag-ID {
  background-position: center 27.7195%;
}
.fflag-JP {
  background-position: center 27.9412%;
}
.fflag-KZ {
  background-position: center 28.1615%;
}
.fflag-LA {
  background-position: center 28.3846%;
}
.fflag-MO {
  background-position: center 28.6063%;
}
.fflag-MY {
  background-position: center 28.829%;
}
.fflag-MV {
  background-position: center 29.0497%;
}
.fflag-MN {
  background-position: left 29.2714%;
}
.fflag-MM {
  background-position: center 29.4931%;
}
.fflag-NP {
  background-position: left 29.7148%;
}
.fflag-KP {
  background-position: left 29.9365%;
}
.fflag-MP {
  background-position: center 30.1582%;
}
.fflag-PW {
  background-position: center 30.3799%;
}
.fflag-PG {
  background-position: center 30.6016%;
}
.fflag-PH {
  background-position: left 30.8233%;
}
.fflag-SG {
  background-position: left 31.045%;
}
.fflag-KR {
  background-position: center 31.2667%;
}
.fflag-LK {
  background-position: right 31.4884%;
}
.fflag-TW {
  background-position: left 31.7101%;
}
.fflag-TJ {
  background-position: center 31.9318%;
}
.fflag-TH {
  background-position: center 32.1535%;
}
.fflag-TL {
  background-position: left 32.3752%;
}
.fflag-TM {
  background-position: center 32.5969%;
}
.fflag-VN {
  background-position: center 32.8186%;
}
.fflag-AX {
  background-position: center 33.0403%;
}
.fflag-AL {
  background-position: center 33.25975%;
}
.fflag-AD {
  background-position: center 33.4837%;
}
.fflag-AM {
  background-position: center 33.7054%;
}
.fflag-AT {
  background-position: center 33.9271%;
}
.fflag-BY {
  background-position: left 34.1488%;
}
.fflag-BE {
  background-position: center 34.3705%;
}
.fflag-BA {
  background-position: center 34.5922%;
}
.fflag-BG {
  background-position: center 34.8139%;
}
.fflag-HR {
  background-position: center 35.0356%;
}
.fflag-CY {
  background-position: center 35.2555%;
}
.fflag-CZ {
  background-position: left 35.479%;
}
.fflag-DK {
  background-position: center 35.7007%;
}
.fflag-EE {
  background-position: center 35.9224%;
}
.fflag-FO {
  background-position: center 36.1441%;
}
.fflag-FI {
  background-position: center 36.3658%;
}
.fflag-FR {
  background-position: center 36.5875%;
}
.fflag-DE {
  background-position: center 36.8092%;
}
.fflag-GI {
  background-position: center 37.0309%;
}
.fflag-GR {
  background-position: left 37.2526%;
}
.fflag-GG {
  background-position: center 37.4743%;
}
.fflag-HU {
  background-position: center 37.696%;
}
.fflag-IS {
  background-position: center 37.9177%;
}
.fflag-IE {
  background-position: center 38.1394%;
}
.fflag-IM {
  background-position: center 38.3611%;
}
.fflag-IT {
  background-position: center 38.5828%;
}
.fflag-JE {
  background-position: center 38.8045%;
}
.fflag-XK {
  background-position: center 39.0262%;
}
.fflag-LV {
  background-position: center 39.2479%;
}
.fflag-LI {
  background-position: left 39.4696%;
}
.fflag-LT {
  background-position: center 39.6913%;
}
.fflag-LU {
  background-position: center 39.913%;
}
.fflag-MT {
  background-position: left 40.1347%;
}
.fflag-MD {
  background-position: center 40.3564%;
}
.fflag-MC {
  background-position: center 40.5781%;
}
.fflag-ME {
  background-position: center 40.7998%;
}
.fflag-NL {
  background-position: center 41.0215%;
}
.fflag-MK {
  background-position: center 41.2432%;
}
.fflag-NO {
  background-position: center 41.4649%;
}
.fflag-PL {
  background-position: center 41.6866%;
}
.fflag-PT {
  background-position: center 41.9083%;
}
.fflag-RO {
  background-position: center 42.13%;
}
.fflag-RU {
  background-position: center 42.3517%;
}
.fflag-SM {
  background-position: center 42.5734%;
}
.fflag-RS {
  background-position: center 42.7951%;
}
.fflag-SK {
  background-position: center 43.0168%;
}
.fflag-SI {
  background-position: center 43.2385%;
}
.fflag-ES {
  background-position: left 43.4602%;
}
.fflag-SE {
  background-position: center 43.6819%;
}
.fflag-CH {
  background-position: center 43.9036%;
}
.fflag-TR {
  background-position: center 44.1253%;
}
.fflag-UA {
  background-position: center 44.347%;
}
.fflag-GB {
  background-position: center 44.5687%;
}
.fflag-VA {
  background-position: right 44.7904%;
}
.fflag-BH {
  background-position: center 45.0121%;
}
.fflag-IR {
  background-position: center 45.2338%;
}
.fflag-IQ {
  background-position: center 45.4555%;
}
.fflag-IL {
  background-position: center 45.6772%;
}
.fflag-KW {
  background-position: left 45.897%;
}
.fflag-JO {
  background-position: left 46.1206%;
}
.fflag-KG {
  background-position: center 46.3423%;
}
.fflag-LB {
  background-position: center 46.561%;
}
.fflag-OM {
  background-position: left 46.7857%;
}
.fflag-PK {
  background-position: center 47.0074%;
}
.fflag-PS {
  background-position: center 47.2291%;
}
.fflag-QA {
  background-position: center 47.4508%;
}
.fflag-SA {
  background-position: center 47.6725%;
}
.fflag-SY {
  background-position: center 47.8942%;
}
.fflag-AE {
  background-position: center 48.1159%;
}
.fflag-UZ {
  background-position: left 48.3376%;
}
.fflag-AS {
  background-position: right 48.5593%;
}
.fflag-AU {
  background-position: center 48.781%;
}
.fflag-CX {
  background-position: center 49.002%;
}
.fflag-CC {
  background-position: center 49.2244%;
}
.fflag-CK {
  background-position: center 49.4445%;
}
.fflag-FJ {
  background-position: center 49.6678%;
}
.fflag-PF {
  background-position: center 49.8895%;
}
.fflag-GU {
  background-position: center 50.1112%;
}
.fflag-KI {
  background-position: center 50.3329%;
}
.fflag-MH {
  background-position: left 50.5546%;
}
.fflag-FM {
  background-position: center 50.7763%;
}
.fflag-NC {
  background-position: center 50.998%;
}
.fflag-NZ {
  background-position: center 51.2197%;
}
.fflag-NR {
  background-position: left 51.4414%;
}
.fflag-NU {
  background-position: center 51.6631%;
}
.fflag-NF {
  background-position: center 51.8848%;
}
.fflag-WS {
  background-position: left 52.1065%;
}
.fflag-SB {
  background-position: left 52.3282%;
}
.fflag-TK {
  background-position: center 52.5499%;
}
.fflag-TO {
  background-position: left 52.7716%;
}
.fflag-TV {
  background-position: center 52.9933%;
}
.fflag-VU {
  background-position: left 53.215%;
}
.fflag-WF {
  background-position: center 53.4385%;
}
.fflag-AQ {
  background-position: center 53.6584%;
}
.fflag-EU {
  background-position: center 53.875%;
}
.fflag-JR {
  background-position: center 54.099%;
}
.fflag-OLY {
  background-position: center 54.32%;
}
.fflag-UN {
  background-position: center 54.54%;
}
#img-secretqr {
  margin-top: 10px;
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#img-secretqr:hover {
  transform: scale(1.1);
}

@keyframes animated-bt-switch-void {
  from {
    background-position: -520px 0px;
  }
  to {
    background-position: -1040px 0px;
  }
}

.darkmode .text{
  color:#888
}

.scale{
  z-index: 5;
}

.bac.animateFadeIn{
  z-index: 4;
}

@media only screen and (max-height: 550px) {
  .evadare-beta-text{
    font-size: 9px;
  }
}

@keyframes iconAnimation {
  0% { background-position: 0 calc((100% / 8) * 5); }
  20% { background-position: 0 calc((100% / 8) * 5); }
  40% { background-position: 0 calc((100% / 8) * 5); }
  60% { background-position: 50% calc((100% / 8) * 5); }
  80% { background-position: 50 calc((100% / 8) * 5); }
  100% { background-position: 100% calc((100% / 8) * 5); }
}

#customicon{
  width: 120px;
  height: 120px;
  border-radius: 25%;
  transition: transform 0.2s var(--easeInCubic)
}

#sp-select .vicon:hover #customicon, #sp-select .vicon#icon3:hover .img{
  transform: scale(1.05);
  transition: transform 0.15s var(--easeOutBack);
}

#sp-select .vicon.clicked #customicon, #sp-select .vicon.clicked#icon3 .img {
  transform: scale(1.05);
  transition: transform 0.15s var(--easeOutBack);
}

#sp-select .vicon.open #customicon, #sp-select .vicon.open#icon3 .img {
  pointer-events: none !important;
  transform: scale(1.05);
}


.quickmessage .modding-build{
  text-align: left;
}

.quickmessage{
  pointer-events: none;
  color: #ffffff;
  background-color: #000;
  font-weight: bold;
  padding: 0px 5px;
  font-size: 24px;
  filter: drop-shadow(5px 5px 0px #00000022);
  transition: all 0.5s var(--easeOutBack);
  text-align: center;
}

#customIconName {
  font-family: 'Allan', sans-serif;
  font-size: 22px;
  margin-top: 4px;
  text-align: center;
}

@media only screen and (max-height: 550px) {
  #customicon {
    width: 108px;
    height: 108px;
  }
  #customIconName {
    font-size: 20px;
  }
  .bt-modcredits {
    width: 90px;
    height: 90px;
  }
}

@media only screen and (max-height: 450px) {
  #customicon {
    width: 84px;
    height: 84px;
  }
  #customIconName {
    font-size: 16px;
  }
}

@media only screen and (max-height: 350px) {
  #customicon {
    width: 72px;
    height: 72px;
  }
  #customIconName {
    font-size: 14px;
  }
}

#home-bt-modcredits:hover{
  transform: scale(1.05);
  cursor: pointer;
}

.gallery-container {
  position: relative;
  min-height: 395px;
  width: 599px;
  overflow: hidden;
}

.gallery-slider {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
}

.gallery-slide {
  min-width: 100%;
  transition: transform 0.5s ease;
  max-height: 473px;
  overflow: auto;
}

#credits-images {
  height: 245px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.container {
  padding: 20px;
}

#text-credits {
  margin-bottom: 25px;
  margin-top: 5px;
  color: #5a5a5a;
}
.darkmode #text-credits {
  color: #888;
}


button{
  padding: 3px 20px;
  border: 1px solid #444;
  background-color: #0a0a0a;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
  border-radius: 50px;
  transition: background-color, border-color, .3s;
  margin: 2px;
  font-family: ralewaymedium, Sans-Serif;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

button:hover{
background-color: #444;
color: white;
transition: none;
}

.darkmode button.prev {
  position: absolute;
  top: 248px;
  left: -22px;
  background-color: #555555;
  border-radius: 50px;
  width: 46px;
  height: 46px;
  padding: 0px;
  margin: 0px;
  color: #ffffff;
  border: none;
  font-size: 21px;
}

.darkmode button.prev:hover {
  background-color: #333333;
  transform: scale(1.1)
}

button.prev {
  position: absolute;
  top: 248px;
  left: -22px;
  background-color: #888888;
  border-radius: 50px;
  width: 46px;
  height: 46px;
  padding: 0px;
  margin: 0px;
  color: #ffffff;
  border: none;
  font-size: 21px;
  z-index: 9;
}

button.prev:hover {
  background-color: #555555;
  transform: scale(1.1)
}

.darkmode button.next {
  position: absolute;
  top: 248px;
  right: -22px;
  background-color: #555555;
  border-radius: 50px;
  width: 46px;
  height: 46px;
  padding: 0px;
  margin: 0px;
  color: #ffffff;
  border: none;
  font-size: 21px;
}

.darkmode button.next:hover {
  background-color: #333333;
  transform: scale(1.1)
}

button.next {
  position: absolute;
  top: 248px;
  right: -22px;
  background-color: #888888;
  border-radius: 50px;
  width: 46px;
  height: 46px;
  padding: 0px;
  margin: 0px;
  color: #ffffff;
  border: none;
  font-size: 21px;
  z-index: 9;
}

button.next:hover {
  background-color: #555555;
  transform: scale(1.1)
}

.credit-inline-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
  border-radius: 3px;
  
}

.gradient-text {
  background: linear-gradient(to right, var(--start), var(--end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.credit-emoji {
  height: 1.6em;
  width: 1.6em;
  vertical-align: -6.4px;
}

.credit-link[style]:hover {
  opacity: 0.5;
}

.credit-link {
  color: var(--col1);
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

.credit-link:hover {
  color: var(--col2);
}

.shadow-box {
  z-index: 999;
}

iframe.credit-video {
  width: 438px;
  height: 245px;
}


#box-stage-bck::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  background-image: var(--layer-image);
}

#box-stage-bck .stage-fade {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s ease;
}


.bt-modcredits.animate {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

#custom-cursor {
  width: 32px;
  height: 32px;
  position: fixed;
  pointer-events: none;
  z-index: 999999999;
  transform: translate(-50%, -50%);
  background: url("") no-repeat center;
  background-size: contain;
}

.coin{
  z-index: 99;
  pointer-events: none;
}

#coin-counter{
  font-size: 42px;
  color: #d29040;
  font-family: 'Allan';
  font-weight: bold;
  filter: drop-shadow(2px 2px 0px #a8652e);
}

#coinhud {
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 14px;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}

#library {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  width: 850px;
}

.library-scroll {
  position: relative;
  max-height: 100vh;
  overflow-y: auto;
  padding: 20px;
}

.library-scroll::-webkit-scrollbar {
  display: none;
}

.mod-card {
  background: #fafafa;
  color: #000000;
  position: relative;
  width: 210px;
  height: 240px;
  background-size: cover;
  border-radius: 15px;
  transition: transform 0.30s var(--easeOutBack);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.1));
}

.darkmode .mod-card {
  background: #111;
  color: #ccc;
}

#lib_text-info {
  color: #aeaeae;
  letter-spacing: 0.5px;
  font-size: 18px;
  font-family: ralewaybold, Sans-Serif;
}

.darkmode #lib_text-info {
  color: #2f2f2f;
}

#mods-found{
  color: #aeaeae;
}

.darkmode #mods-found{
  color: #2f2f2f;
}

.mod-card:hover {
  transform: scale(1.03);
}

.delete-button {
  position: absolute;
  top: -13px;
  right: -13px;
  background: rgb(71 71 71);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all 0.30s var(--easeOutBack);
  width: 40px;
  height: 40px;
  text-align: center;
  transform: scale(0);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mod-card:hover .delete-button {
  opacity: 1;
  transform: scale(1);
}

.mod-icon {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 5px;
  z-index: 1;
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.1));
}

.mod-info {
  z-index: 1;
}

.mod-info h3 {
  margin: 10px 0 5px;
  font-size: 18px;
  z-index: 1;
}

.mod-info p {
  font-size: 14px;
  margin: 2px 0;
}

.special-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  border-radius: 15px;
  opacity: 0.13;
  object-fit: cover;
  background: no-repeat;
  background-size: cover;
  background-position: center;
}

.text{
  color: #5a5a5a;
  font-family: ralewaybold, Sans-Serif;
}

.darkmode .text{
  color: #828282;
  font-family: ralewaybold, Sans-Serif;
}

.title{
  display: block;
  overflow: hidden;
  font-family: ralewaybold, Sans-Serif;
  font-size: var(--huge-font-size);
  color: #828282;
  text-align: center;
  text-transform: uppercase;
  font-family: ralewaymedium, Sans-Serif;
  font-size: var(--medium-font-size);
  letter-spacing: 0.05em;
  font-weight: bold;
}

.played-date{
  opacity: 0.5;
}

@keyframes pageZoomFade {
  0% {
      transform: scale(1.1);
      opacity: 0;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

.page-zoom {
  animation: pageZoomFade 0.5s var(--easeOutCubic);
}

#pop-modhistory .container .icn-svg.spin{
  width: 100px;
  height: 100px;
}

#pop-modhistory .container{
  justify-content: center;
  align-items: center;
}

.text-zone{
  padding: 5px;
  margin-top: 10px;
  text-align: center;
  margin-bottom: 10px;
}

.button-zone {
  gap: 13px;
  display: flex;
  flex-direction: row;
  margin-top: 50px;
}

.achievement {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #eaeaea;
  margin: 10px 0;
  opacity: 1;
  transition: all 0.2s ease;
}

.achievement:hover {
  transform: scale(1.02);
  transition: all 0.05s ease;
}

.darkmode .achievement {
  background: #11111152;
}

.achievement.locked {
  filter: grayscale(100%);
  opacity: 0.5;
}

.achievement-icon {
  width: 55px;
  height: 55px;
  margin-right: 10px;
  border-radius: 3px;
}

.achievement-info {
  color: white;
}

#achievement-container {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  z-index: 9999;
  pointer-events: none;
}

.achievement-notification {
  background: #ffffff;
  padding: 10px 15px;
  border-radius: 4px;
  display: flex;
  align-items: left;
  gap: 10px;
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.1));
  opacity: 0;
  transform: translateY(-200px) scale(1.1);
  transition: opacity 0.5s ease-out, transform 0.5s var(--easeOutCubic);
  width: 350px;
  pointer-events: none !important;
}

.darkmode .achievement-notification {
  background: #111;
}

.achievement-notification.visible {
  opacity: 1;
  transform: translateY(0) scale(1.1);
}

.achievement-text .title{
  display: block;
  overflow: hidden;
  font-family: ralewaybold, Sans-Serif;
  font-size: var(--huge-font-size);
  color: #000000;
  text-transform: uppercase;
  font-family: ralewaymedium, Sans-Serif;
  font-size: var(--medium-font-size);
  letter-spacing: 0.05em;
  font-weight: bold;
  text-align: left;
}

.darkmode .achievement-text .title{
  color: #ffffff;
}

.achievement-notification .achievement-icon {
  width: 55px;
  height: 55px;
  margin-right: 3px;
  border-radius: 3px;
}

.achievement-text {
  width: 260px;
}

#achievements-list {
  padding: 20px;
}

.achievement-info .title{
  text-align: left;
  color: #000000;
}

.darkmode .achievement-info .title{
  color: #ccc;
}

.achievement-icon.locked {
  filter: grayscale(100%);
  opacity: 0.5;
}

.scrollbox {
  overflow: auto;
  height: 100%;
}

#box-myachi {
  height: 100%;
}

progress {
  width: 100%;
  height: 7px;
  border-radius: 3px; 
  overflow: hidden;
  border: none;
}

progress::-webkit-progress-bar {
  border-radius: 3px;
}

progress::-webkit-progress-value {
  background: #4caf50;
  border-radius: 3px;
}

progress::-moz-progress-bar {
  background: #4caf50;
  border-radius: 3px;
}

.credit-button {
  padding: 5px 6px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: white;
  transition: 0.2s;
  margin: 3px;
  box-shadow: 0px 4px 0px 0px #00000026;
}


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

.button-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.button-text {
  font-weight: bold;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.notification{
  display: none !important;
}

#achievements-list p {
  color: var(--col1);
  text-align: center;
  letter-spacing: 1px;
  padding: 13px;
  border-radius: 30px;
  font-size: 19px;
  text-transform: capitalize;
}

@media only screen and (max-height: 550px) {
  .bt-modcredits {
    width: 90px;
    height: 90px;
  }
  #custom-cursor, #param-Cursor, #hide-option-hr{
    display: none !important;
  }
}

@media only screen and (max-height: 500px) {
  .modCreditsBox .pop {
    transform: scale(0.8);
  }
}

@media only screen and (max-height: 400px) {
  .modCreditsBox .pop {
    transform: scale(0.7);
  }
}

.notification__achi.show {
  transform: scale(1);
  opacity: 1;
}

.notification__achi {
  background-color: #f12c2c;
  font-size: 20px;
  position: absolute;
  width: 32px;
  height: 32px;
  text-align: center;
  color: #ffffff;
  border-radius: 100%;
  font-family: 'ralewaybold';
  display: flex;
  justify-content: center;
  align-items: center;
  left: 55px;
  top: -7px;
  transition: all 0.30s var(--easeOutBack);
  transform: scale(0);
  filter: drop-shadow(1px 1px 0px #0000001b);
  pointer-events: none;
  opacity: 0;
}

@media only screen and (max-height: 550px) {
  .notification__achi {
    font-size: 18px;
    left: 42px;
    top: -10px;
  }
  #box-bottom #box-picto .picto {
    margin: 4px;
  }
}


@media only screen and (max-height: 450px) {
  .notification__achi {
    font-size: 15px;
    left: 43px;
    top: -6px;
    width: 24px;
    height: 24px;
  }
}

@media only screen and (max-height: 350px) {
  .notification__achi {
    font-size: 14px;
    left: 36px;
    top: -5px;
    width: 24px;
    height: 24px;
  }
}

.newsModBoxes {
  width: 175px;
  height: 195px;
  background-size: cover;
  border-radius: 10px;
  background-position: center;
  color: #222222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: ralewayregular, Sans-Serif;
  background-color: #ffffff;
  transition: transform 0.30s var(--easeOutBack);
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.1));
  flex: 0 0 auto;
  border-radius: 15px;
}

.darkmode .newsModBoxes {
  color: white;
  background-color: #111;
}

#modNews::-webkit-scrollbar{
  display: none;
}

.newModIcon {
  width: 84px;
  height: 84px;
  background-size: cover;
  border-radius: 10px;
  background-color: #222;
}

.darkmode .container {
  color: #ccc;
}

.newModBoxBG{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  border-radius: 15px;
  opacity: 0.13;
  object-fit: cover;
  background: no-repeat;
  background-size: cover;
  font-family: ralewaymedium, Sans-Serif;
  z-index: -1;
  background-position: center;
}

.newsModBoxes:hover{
  transform: scale(1.05);
  cursor: pointer;
}

.newsModBoxes .tittle {
  font-size: 31px;
  margin-top: 10px;
  font-family: 'Allan';
}

.newsNewBoxes .txt {
  font-family: ralewaymedium, Sans-Serif;
}

.newsModBoxes .txt {
  font-family: ralewaymedium, Sans-Serif;
  opacity: 0.5;
}

#modNews {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  width: 100%;
  overflow-x: auto;
  height: 218px;
  padding: 0px 6px;
}

.banner-mods-news {
  height: 100px;
  position: absolute;
  width: 100%;
  z-index: 0;
  background-position: center;
}

.banner-mods-news::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(#ffffff00 -250%, #fff 100%);
  z-index: 1;
}

.darkmode .banner-mods-news::before {
  background-image: linear-gradient(#ffffff00 -250%, var(--col-dark-bck) 100%);
}

.mods-buttons-warper{
  margin-top: 15px;
}

@media only screen and (max-height: 550px) {
  .newsModBoxes {
    width: 122px;
    height: 100%;
  }
  .newsModBoxes .tittle {
    font-size: 20px;
    margin-top: 5px;
    font-family: 'Allan';
  }
  .newsModBoxes .txt {
    font-size: 11px;
  }
  .newModIcon{
    width: 53px;
    height: 53px;
  }
  #modNews {
    height: 135px;
  }
  #bt-playedmods, #bt-playedmods-hr{
    display: none;
  }
  .mods-buttons-warper{
    margin-top: 15px;
  }
}

@media only screen and (max-height: 280px) {
#bt-dynamicmod{
  display: none;
}
}

.info-debug{
  width: 730px;
  height: 525px;
  overflow: auto;
  font-family: monospace;
  background-color: rgb(0, 0, 0);
  color: #04822e;
  text-align: left;
  padding: 20px;
  border-radius: 5px;
}

.info-debug::-webkit-scrollbar{
display:none;
}

.modCoverWrapper {
  position: relative;
  width: 525px;
  border-radius: 9px 9px 0px 0px;
  background-color: #000000;
  overflow: hidden;
}

#modCoverCanvas {
  width: 100%;
  display: block;
}


.mod-info-single {
  height: 320px;
  width: 525px;
  background-color: #f8f8f8;
  margin-top: -5px;
  border-radius: 0px 0px 9px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 17px;
}

.darkmode .mod-info-single {
  background-color: #111;
}

.box-popup.invBor .box .pop {
  background-color: #00000000;
}

.box-popup.invBor .box .pop iframe {
  height: 181px;
  width: 319px;
  border: none;
  border-radius: 7px;
}

.box-popup.invBor .box .pop .txt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-height: 67px;
  width: 467px;
  overflow: hidden;
}

@media only screen and (max-height: 550px) {
  .modCoverWrapper {
    height: 135px;
}
}

.single-version-icon {
  width: 79px;
  height: 79px;
  background-color: #333;
  background-image: url(../js/mod-icon.png);
  position: absolute;
  border-radius: 25%;
  top: 5px;
  left: 5px;
  z-index: 5;
  background-size: cover;
  box-shadow: 6px 6px 0px #1111112b;
}

#noYT-prev{
  width: 445px;
  height: 190px;
  background-image: url('../asset-v1/img/home-screen@2x.jpg');
  background-size: 270%;
  background-position: center 36%;
  border-radius: 10px;
  margin-top: 10px;
   transition: all 0.5s var(--easeOutBack);
}

#noYT-prev:hover{
  background-size: 246%;
}

#noYT-prev .icon-prev.n1{
  width: 57px;
  height: 57px;
  position: relative;
  right: 19px;
  bottom: -83px;
  background-image: url('../asset-v1/img/game-picto@2x.png');
  background-position: calc((100% / 19) * 0) 0;
  background-size: auto 200%;
  transform: rotate(-10deg);
  border-radius: 15%;
  transition: all 0.5s var(--easeOutBack);
}

#noYT-prev .icon-prev.n2{
  width: 57px;
  height: 57px;
  position: relative;
  right: -412px;
  bottom: -144px;
  background-image: url('../asset-v1/img/game-picto@2x.png');
  background-position: calc((100% / 19) * 5) 0;
  background-size: auto 200%;
  transform: rotate(10deg);
  border-radius: 15%;
  transition: all 0.5s var(--easeOutBack);
}

#noYT-prev:hover .icon-prev.n1{
  right: 21px;
  bottom: -85px;
  transform: rotate(-20deg);
}

#noYT-prev:hover .icon-prev.n2{
  right: -414px;
  bottom: -146px;
  transform: rotate(20deg);
}

.vicon.open, .vicon.locked {
  pointer-events: none;
}

.locked-vicon{
  cursor: pointer;
}

.locked-vicon:hover .bul {
  animation: tweenBounceUp 0.5s var(--easeOutBack) 0s forwards;
}

.locked-vicon .bul {
  background-color: #666 !important;
  z-index: 1;
  animation: tweenBounceDown 0.30s var(--easeInBack) 0s forwards;
}

.locked-vicon:hover .vicon.locked #customicon{
  transform: scale(1.05) !important;
  transition: transform 0.15s var(--easeOutBack) !important;
}

.vicon.ignored{
  pointer-events: none !important;
}