: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: #5f5f5f;
    --colV2: #c32d2d;
    --colV3: #3c646e;
    --colV4: #ba7b3d;
    --colV5: #41a032;
    --colV6: #825fd2;
    --colV7: #d65a1e;
    --colV8: #5f7e7b;
    --colV9: #005cfa;
    --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: 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);
    overflow: hidden;
}
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;
}
.darkmode #page-splash {
    background-color: var(--col-dark-bck);
}
#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);
}
.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 .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;
    background-color: #ccc;
}
.darkmode #sp-select .vicon .img {
    background-color: #333;
}
#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,
#sp-select .vicon#icon2 .txt {
    background-position: calc((100% / 8) * 1) 0;
}
#sp-select .vicon#icon3 .img,
#sp-select .vicon#icon3 .txt {
    background-position: calc((100% / 8) * 2) 0;
}
#sp-select .vicon#icon4 .img,
#sp-select .vicon#icon4 .txt {
    background-position: calc((100% / 8) * 3) 0;
}
#sp-select .vicon#icon5 .img,
#sp-select .vicon#icon5 .txt {
    background-position: calc((100% / 8) * 4) 0;
}
#sp-select .vicon#icon6 .img,
#sp-select .vicon#icon6 .txt {
    background-position: calc((100% / 8) * 5) 0;
}
#sp-select .vicon#icon7 .img,
#sp-select .vicon#icon7 .txt {
    background-position: calc((100% / 8) * 6) 0;
}
#sp-select .vicon#icon8 .img,
#sp-select .vicon#icon8 .txt {
    background-position: calc((100% / 8) * 7) 0;
}
#sp-select .vicon#icon9 .img,
#sp-select .vicon#icon9 .txt {
    background-position: calc((100% / 8) * 8) 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 710px;
    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: 200px;
    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-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-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);
}
#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;
}
#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 {
    margin-left: auto;
}
#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, 80px);
}
#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-image: url("../img/bt-bonus.svg");
    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;
}
#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;
}
#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;
}
#game #box-video.visible {
    visibility: visible;
}
.bottomSlide #game #box-video {
    bottom: var(--box-top-height-pct);
}
#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 auto 0 0;
}
#box-bottom #box-picto .pictoline.bot {
    margin: 0 0 0 auto;
}
#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: 1%;
    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;
}
.v1.darkmode #box-bottom #box-picto .picto {
    background-color: #666;
}
.v2.darkmode #box-bottom #box-picto .picto {
    background-color: #666;
}
#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;
}
#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: 1;
}
#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: var(--box-top-height-pct) !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 .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) * 50px);
    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: 3;
    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;
}
.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;
}
.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-setting .container .paramline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.darkmode #pop-setting .container .paramline .label {
    color: #ccc;
}
#pop-setting .container .paramline .bt {
    min-width: 90px;
    margin-right: 0;
    margin-left: auto;
}
#pop-setting .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 #pop-setting .container .paramline .ic-info .icn-svg {
    fill: var(--col-dark-bck);
}
@media (hover: hover) and (pointer: fine) {
    #pop-setting .container .paramline .ic-info:hover {
        background-color: #ddd;
    }
}
.box-popup.column .pop {
    overflow: hidden;
}
.box-popup.column .pop .container {
    display: -ms-flexbox;
    display: flex;
    -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;
    overflow: hidden;
    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;
    overflow: hidden;
}
.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%;
}