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

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

@font-face {
    font-family: 'DK Lemon Yellow Sun';
    src: url('/assets/css/fonts/DKLemonYellowSun.eot');
    src: url('/assets/css/fonts/DKLemonYellowSun.eot?#iefix') format('embedded-opentype'),
        url('/assets/css/fonts/DKLemonYellowSun.woff2') format('woff2'),
        url('/assets/css/fonts/DKLemonYellowSun.woff') format('woff'),
        url('/assets/css/fonts/DKLemonYellowSun.ttf') format('truetype'),
        url('/assets/css/fonts/DKLemonYellowSun.svg#DKLemonYellowSun') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next LT Pro';
    src: url('/assets/css/fonts/AvenirNextLTPro-Cn.eot');
    src: url('/assets/css/fonts/AvenirNextLTPro-Cn.eot?#iefix') format('embedded-opentype'),
        url('/assets/css/fonts/AvenirNextLTPro-Cn.woff2') format('woff2'),
        url('/assets/css/fonts/AvenirNextLTPro-Cn.woff') format('woff'),
        url('/assets/css/fonts/AvenirNextLTPro-Cn.ttf') format('truetype'),
        url('/assets/css/fonts/AvenirNextLTPro-Cn.svg#AvenirNextLTPro-Cn') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ------------------------------------------------------------ *\
    Helpers
\* ------------------------------------------------------------ */

.francophonie .ff-cofee { font-family: 'Black Coffee Shadow', sans-serif; }
.francophonie .ff-lemon  { font-family: 'DK Lemon Yellow Sun', sans-serif; }
.francophonie .ff-avenir  { font-family: 'Avenir Next LT Pro', sans-serif; }
.francophonie .ff-roboto  { font-family: 'Roboto', sans-serif; }
.francophonie .ff-roboto-con  { font-family: 'Roboto Condensed', sans-serif; }

.francophonie .color-white,
.francophonie .color-white:focus,
.francophonie .color-white:hover { color: #fff; }
.francophonie .color-blue,
.francophonie .color-blue:focus,
.francophonie .color-blue:hover { color: #3e53a2; }
.francophonie .color-red,
.francophonie .color-red:focus,
.francophonie .color-red:hover { color: #d51742; }
.francophonie .color-yellow,
.francophonie .color-yellow:focus,
.francophonie .color-yellow:hover { color: #e6a900; }

.francophonie .bg-white { background-color: #fff; }
.francophonie .bg-blue { background-color: #3e53a2; }
.francophonie .bg-red { background-color: #d51742; }
.francophonie .bg-yellow { background-color: #e6a900; }
.francophonie .bg-trans { background-color: transparent; }

/* ------------------------------------------------------------ *\
    Francophonie
\* ------------------------------------------------------------ */

.francophonie { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; overflow: hidden; }

/* ------------------------------------------------------------ *\
    Logo
\* ------------------------------------------------------------ */

.francophonie .logo { width: 100%; max-width: none;  padding: 24px 24px 0px; }
.francophonie .logo .logo__link { display: block; }

@media(max-width: 767px) {
    .francophonie .logo  { margin-left: auto; margin-right: auto; max-width: 250px; padding-top: 16px; }
}

/* ------------------------------------------------------------ *\
    List francophonie
\* ------------------------------------------------------------ */

.francophonie .list-francophonie { margin-top: 42px; margin-bottom: 45px; margin-left: 0; padding: 0 15px; display: flex; list-style-type: none; justify-content: center; text-align: center; }
.francophonie .list-francophonie a { text-decoration: none; color: #fff; font-size: 54px; line-height: 1; text-transform: uppercase; transition: color .3s ease-out; }
.francophonie .list-francophonie a:focus,
.francophonie .list-francophonie a:hover { color: #47b3c7; }
.francophonie .list-francophonie li { margin-bottom: 0; font-size: 54px; }
.francophonie .list-francophonie li.active a { color: #47b3c7; text-decoration: underline; }
.francophonie .list-francophonie li + li { margin-left: 60px; }

@media(max-width: 767px) {
    .francophonie .list-francophonie  { margin-top: 16px; margin-left: auto; margin-right: auto; max-width: 380px; justify-content: space-between; }
    .francophonie .list-francophonie a  { font-size: 26px; }
    .francophonie .list-francophonie li + li  { margin-left: 0; }
}


/* ------------------------------------------------------------ *\
        List quiz
\* ------------------------------------------------------------ */

.francophonie .list-quiz { margin-top: 30px; margin-bottom: 0; margin-left: 0; display: block; list-style-type: none; }
.francophonie .list-quiz a { position: relative; display: block; padding: 9px 0px 9px 28px; border-radius: 5px; background-color: currentColor; text-decoration: none; font-size: 15px; line-height: 1; font-family: 'Roboto Condensed', sans-serif; transition: .3s ease-out; }
.francophonie .list-quiz a:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 5px; background-color: rgba(0,0,0,0); transition: .3s ease-out; z-index: 0; }
.francophonie .list-quiz a.active:before,
.francophonie .list-quiz a:focus:before,
.francophonie .list-quiz a:hover:before { background-color: rgba(0,0,0,0.2); }
.francophonie .list-quiz a:after { content: 'A -'; position: absolute; left: 10px; top: 10px; color: #fff; text-transform: uppercase; font-size: 14px; font-weight: 700; line-height: 1; font-family: 'Roboto Condensed', sans-serif; z-index: 1; }
.francophonie .list-quiz li:nth-child(2) a:after { content: 'B -'; }
.francophonie .list-quiz li:nth-child(3) a:after { content: 'C -'; }
.francophonie .list-quiz li { position: relative; margin-bottom: 0; font-family: 'Roboto Condensed', sans-serif; font-size: 15px; line-height: 1; }
.francophonie .list-quiz li:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 5px; box-shadow: 2px 2px #fff,  4px 4px currentColor; opacity: .5; pointer-events: none; }
.francophonie .list-quiz li:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 5px; box-shadow: 2px 2px #fff,  4px 4px #000; opacity: .5; pointer-events: none; }
.francophonie .list-quiz li + li { margin-top: 10px; }

.francophonie .list-quiz li.questionPhotos { float:left; width: 30%; margin: 0 1.6% 0 1.3%; }
.francophonie .list-quiz li.questionPhotos a { padding:3px; }
.francophonie .list-quiz.photos a:after { content:"" !important; display:none !important; }
.francophonie .list-quiz.videos a { padding:7px 0px 5px 28px; }
.francophonie .list-quiz.videos { margin-top: 34px; }
.francophonie .list-quiz.videos li {  }
.francophonie .list-quiz a:after { top: 7px; }

@media(max-width: 767px) {
    .francophonie .list-quiz a  { font-size: 12px;  }
    .francophonie .list-quiz a:after { font-size: 11px; }
}

/* ------------------------------------------------------------ *\
    Article-quiz
\* ------------------------------------------------------------ */

.francophonie .article-qiuz .article__title { margin-bottom: 2px; font-weight: 700; line-height: 1; font-size: 15px; }
.francophonie .article-qiuz .article__content { line-height: 1.3; font-size: 15px; transition: .5s ease-out; }
.francophonie .article-qiuz .article__content p { line-height: 1.3; font-size: 15px; transition: .5s ease-out; font-family: 'Roboto Condensed', sans-serif; }

@media(max-width: 767px) {
    .francophonie .article-qiuz { display: flex; flex-direction: column; justify-content: center; }
    .francophonie .article-qiuz .article__title  { margin-bottom: 4px; font-size: 13px; text-align: center; }
    .francophonie .article-qiuz .article__content  { font-size: 12px; text-align: center; }
}

/* ------------------------------------------------------------ *\
    Game
\* ------------------------------------------------------------ */

.francophonie .game-cards { margin-top: 79px; padding: 0 30px; }

@media(max-width: 767px) {
    /*.francophonie .game-cards  { padding: 0 15px; }*/
}

/* ------------------------------------------------------------ *\
    Sun
\* ------------------------------------------------------------ */

.francophonie .sun { position: absolute; left: -10px; top: -10px; bottom: -10px; right: -10px; z-index: 0; animation: shine 80s cubic-bezier(0.18, 0.26, 0.36, 0.55) infinite; transition: .5s ease-out; }
.francophonie .sun svg,
.francophonie .sun img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.5, .5); transform-origin: 50% 50%; width: auto; min-width: 1000px; max-width: none; height: auto; transition: 1s ease-in; }

@keyframes shine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ------------------------------------------------------------ *\
    Hand
\* ------------------------------------------------------------ */

.francophonie .hand { position: absolute; top: 397px; left: 50%; transform: translateX(-50%); padding: 0 50px; pointer-events: none; transition: .3s ease-out; }
.francophonie .hand img { display: block; margin-right: auto; margin-left: auto; max-width: none; transition: .3s ease-out; }
.francophonie .hand--reverse { padding-right: 0; padding-left: 150px; }

/* ------------------------------------------------------------ *\
    Fireworks
\* ------------------------------------------------------------ */

.francophonie .fireworks { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.francophonie .firework { position: absolute; transform: scale(0); animation: 1s linear explode infinite; opacity: 0; }
.francophonie .firework--sm { margin-left: 20px; animation: 3s linear explode-sm infinite; }
.francophonie .firework--md { margin-left: 60px; animation: 2s linear explode-md infinite; }
.francophonie .firework--lg { margin-left: 0px; }

.francophonie .firework--sm ~ .firework--sm { animation-delay: .2s; }
.francophonie .firework--md ~ .firework--md { animation-delay: .3s; }

.francophonie .fireworks:nth-child(2) .firework { left: 40%; animation-delay: .3s; }
.francophonie .fireworks:nth-child(2) .firework--sm ~ .firework--sm { animation-delay: .2s; animation-duration: 3.5s;  margin-left: 15px; margin-top: 24px; }
.francophonie .fireworks:nth-child(2) .firework--md ~ .firework--md { animation-delay: .3s; animation-duration: 2.8s;  }
.francophonie .fireworks:nth-child(2) .firework--lg { margin-left: 80px; margin-top: 30px; animation-duration: 1.7s; }

.francophonie .fireworks:nth-child(3) { transform: scale(-1); }
.francophonie .fireworks:nth-child(3) .firework { left: 33%; top: 33%; animation-delay: .6s; }
.francophonie .fireworks:nth-child(3) .firework--sm ~ .firework--sm { animation-delay: .1s; animation-duration: 3.8s; }
.francophonie .fireworks:nth-child(3) .firework--md ~ .firework--md { animation-delay: .3s; animation-duration: 2.5s;  margin-left: 66px; margin-top: 37px; }
.francophonie .fireworks:nth-child(3) .firework--lg { margin-left: 40px; animation-duration: animation-duration: 2.2s; }

@keyframes explode {
    0% { opacity: 1; }
    15% { transform: scale(.1); }
    50% { transform: scale(1); }
    100% { transform: scale(1.3); opacity: 0; }
}

@keyframes explode-sm {
    0% { opacity: 1; }
    5% { transform: scale(.1); }
    16.67% { transform: scale(1); }
    33.33% { transform: scale(1.3); opacity: 0; }
}

@keyframes explode-md {
    0% { opacity: 1; }
    7.5% { transform: scale(.1); }
    25% { transform: scale(1); }
    50% { transform: scale(1.3); opacity: 0; }
}

/* ------------------------------------------------------------ *\
    Step-card
\* ------------------------------------------------------------ */

.francophonie .step-card { opacity: 0; pointer-events: none; transition: .3s ease-out; z-index: 1; }
.francophonie .step-card.active { opacity: 1; pointer-events: all; }

/* ------------------------------------------------------------ *\
    Dot-quiz
\* ------------------------------------------------------------ */

.francophonie .dots-quiz { position: absolute; display: flex; justify-content: space-between; top: 0; left: 0; right: 0; bottom: 0; padding: 5px; pointer-events: none; }
.francophonie .dots-quiz + .dots-quiz { align-items: flex-end; }
 
.francophonie .dot-quiz { width: 10px; height: 10px; border-radius: 50%; }

/* ------------------------------------------------------------ *\
        Blob-quiz
\* ------------------------------------------------------------ */

.francophonie .blobs-quiz { position: absolute;  top: 0; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; padding: 0 10px; width: 100%; max-width: 408px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; transition: 0.5s ease-out; }

.francophonie .blob-quiz { width: 31px; transform-origin: 100% 50%; animation: 1.5s linear pulse infinite; }
.francophonie .blob-quiz img { width: 100%; height: auto; transition: 0.5s ease-out; }
.francophonie .blob-quiz + .blob-quiz { transform-origin: 0% 50%; }
.francophonie .blob-quiz + .blob-quiz img { transform: scaleX(-1); }

@media(max-width: 767px) {
    .francophonie .blobs-quiz { max-width: 343px; }
    .francophonie .blob-quiz  { width: 15px; }
}

@keyframes pulse {
    0% {  }
    35% { transform: scale(1.8, 1.2); }
}

/* ------------------------------------------------------------ *\
    Fail
\* ------------------------------------------------------------ */

.francophonie .fail-quiz { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 100%; max-width: 133px; }
.francophonie .fail-quiz .fail__face { position: relative; z-index: 1; transform-origin: 50% 100%; }
.francophonie .fail-quiz .fail__shadow { position: absolute; top: 89%; right: 0; width: 79%; }

@media(max-width: 767px) {
    .francophonie .fail-quiz  { max-width: 85px; }
}

@keyframes shake {
    1% { transform: translateX(5px) rotate(20deg); }
    2% { transform: translateX(-5px) rotate(-20deg); }
    3% { transform: translateX(5px) rotate(20deg); }
    4% { transform: translateX(0) rotate(0deg); }
    5% { transform: translateX(5px) rotate(20deg); }
    6% { transform: translateX(-5px) rotate(-20deg); }
    7% { transform: translateX(5px) rotate(20deg); }
    8% { transform: translateX(0) rotate(0deg); }

    9% { transform: translateX(5px) scaleX(1.2); }
    10% { transform: translateX(-5px) scaleX(.8); }
    11% { transform: translateX(5px) scaleX(1.2); }
    12% { transform: translateX(0) scaleX(1); }
    13% { transform: translateX(5px) scaleX(1.2); }
    14% { transform: translateX(-5px) scaleX(.8); }
    15% { transform: translateX(5px) scaleX(1.2); }
    16% { transform: translateX(0) scaleX(1); }
}

/* ------------------------------------------------------------ *\
    Win
\* ------------------------------------------------------------ */

.francophonie .win-quiz { position: relative; }
.francophonie .win-quiz .win__face { position: relative; z-index: 1;  }
.francophonie .win-quiz .win__shadow { position: absolute; top: 89%; right: 0; width: 79%; }

/* ------------------------------------------------------------ *\
    Quiz-title
\* ------------------------------------------------------------ */

.francophonie .quiz-title .quiz__title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 237px; height: 237px; border-radius: 50%; text-transform: uppercase; color: #fff; z-index: 1; font-size: 42px; line-height: 1; font-weight: 700; text-align: center; transition: .5s linear; }
.francophonie .quiz-title .quiz__title span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.5); transition: .5s linear; font-size: 84px; }

@media(max-width: 767px) {
    .francophonie .quiz-title .quiz__title { width: 194px; height: 194px; font-size: 27px; }
    .francophonie .quiz-title .quiz__title span { font-size: 75px; }
}

@keyframes wobble {
    25% { transform: translate(-50%, calc(-50% - 5px)) scale(.5); }
    75% { transform: translate(-50%, calc(-50% + 5px)) scale(.5); }
}

/* ------------------------------------------------------------ *\
    Quiz-question
\* ------------------------------------------------------------ */

.francophonie .quiz-question { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; transition: 0.5s ease-out; }
.francophonie .quiz-question .quiz__question { position: relative; height: 78px; margin-top: 55px; text-transform: uppercase; text-align: center; }
.francophonie .quiz-question .quiz__question span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin-left: auto; margin-right: auto; padding: 0 40px; width: 100%; max-width: 378px; display: block; font-size: 26px; line-height: 1.25; z-index: 1; }
.francophonie .quiz-question .quiz__link.active { transform: translate(2px, 2px); }
.francophonie .quiz-question .quiz__link.disabled { pointer-events: none; }
.francophonie .quiz-question .quiz__text { position: relative; color: #fff; }
.francophonie .quiz-question .list-quiz { margin-left: auto; margin-right: auto; padding: 0 10px; width: 100%; max-width: 318px; transition: 0.5s ease-out; }
.francophonie .quiz-question .list-quiz.photos { max-width:448px; }

@media(max-width: 767px) {
    .francophonie .quiz-question .quiz__question { margin-top: 32px;  }
    .francophonie .quiz-question .quiz__question span  {  font-size: 18px; }
    .francophonie .quiz-question .list-quiz { margin-top: 20px;  }
}

/* ------------------------------------------------------------ *\
    Quiz-fail
\* ------------------------------------------------------------ */

.francophonie .quiz-fail { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 34px 22px 38px 30px; background-color: #d30d3f; }
.francophonie .quiz-fail .quiz__head { display: flex; }
.francophonie .quiz-fail .quiz__title { margin-left: 33px; color: #fff; font-size: 64px; line-height: 1.1; }
.francophonie .quiz-fail .quiz__image { position: relative; width: 100%; max-width: 156px; }
.francophonie .quiz-fail .quiz__close { position: absolute; bottom: 7px; right: 11px; width: 18px; transition: .3s ease-out; }
.francophonie .quiz-fail .quiz__close:focus,
.francophonie .quiz-fail .quiz__close:hover { opacity: .5; }
.francophonie .quiz-fail .article-qiuz  { margin-top: 20px; }
.francophonie .quiz-fail.active .fail-quiz .fail__face { animation: shake 2.2s 1.5s linear infinite; }

@media(max-width: 767px) {
    .francophonie .quiz-fail  { display: flex; flex-direction: column; padding: 15px; }
    .francophonie .quiz-fail .quiz__title { width: 100%; font-size: 38px; }
    .francophonie .quiz-fail .quiz__head { align-items: center; flex-grow: 1; }
    .francophonie .quiz-fail .article-qiuz { margin-top: 0; flex-grow: 4; }

}

/* ------------------------------------------------------------ *\
    Quiz-win
\* ------------------------------------------------------------ */

.francophonie .quiz-win { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 37px 22px 38px 30px; background-color: #283164; }
.francophonie .quiz-win .quiz__content { position: relative; z-index: 1; }
.francophonie .quiz-win .quiz__image { margin-left: auto; margin-right: auto; width: 100%; max-width: 132px; text-align: center; }
.francophonie .quiz-win .quiz__title { margin-top: 31px;  color: #61bdf0; text-transform: uppercase; line-height: 1; font-size: 57px; text-align: center;  }
.francophonie .quiz-win .quiz__subtitle { margin-top: 4px; color: #fff; text-transform: uppercase; line-height: 1; font-size: 32px; text-align: center;  }
.francophonie .quiz-win .quiz__close { position: absolute; bottom: 7px; right: 11px; width: 18px; transition: .3s ease-out; }
.francophonie .quiz-win .quiz__close:focus,
.francophonie .quiz-win .quiz__close:hover { opacity: .5; }

@media(max-width: 767px) {
    .francophonie .quiz-win  { display: flex; flex-direction: column; justify-content: center; padding: 15px; }
    .francophonie .quiz-win .quiz__image  { max-width: 106px;  }
    .francophonie .quiz-win .quiz__title  { margin-top: 15px; font-size: 42px; }
}

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

.francophonie .cards-game { position: relative; width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto;  }
.francophonie .cards-game .cards__inner { margin-left: -25px; margin-right: -25px; display: flex; justify-content: space-between; }
.francophonie .cards-game .cards__reset { position: absolute; top: -100vh; bottom: -100vh; left: -100vw; right: -100vw; opacity: 0; pointer-events: none; }
.francophonie .cards-game .cards__reset.active  { pointer-events: all; }

/* ------------------------------------------------------------ *\
    Card
\* ------------------------------------------------------------ */

.francophonie .card-game { position: relative; margin: 0 25px 408px; width: 33%; max-width: 480px; transition: .5s ease-out; }
.francophonie .card-game .card__inner { position: relative; height: 345px; border-radius: 10px; background-color: #202855; overflow: hidden; transition: 0.5s ease-out; z-index: 1;  }
.francophonie .card-game .card__content { position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px;  border-radius: 4px; overflow: hidden; transition: 0.5s ease-out; }
.francophonie .card-game .card__link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; z-index: 1; }
.francophonie .card-game .card__shadow { position: relative; margin: 7px -35px; transition: .5s ease-out; pointer-events: none; }
.francophonie .card-game .card__shadow img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

.francophonie .card-game:hover { flex-shrink: 0; }
.francophonie .card-game:hover .card__inner,
.francophonie .card-game:hover .card__shadow { transform: scale(1.1); }
.francophonie .card-game:hover .card__title { animation: wobble 1.5s linear infinite; }

.francophonie .card-game:first-of-type .card__inner,
.francophonie .card-game:first-of-type .card__shadow { transform-origin: 0% 50%; }
.francophonie .card-game:nth-of-type(2) .card__inner,
.francophonie .card-game:nth-of-type(2) .card__shadow { transform-origin: 50% 50%; }
.francophonie .card-game:nth-of-type(3) .card__inner,
.francophonie .card-game:nth-of-type(3) .card__shadow { transform-origin: 100% 50%; }

.francophonie .card-game.faded { margin: 0 -10px; pointer-events: none; }
.francophonie .card-game.faded .step-card.active { pointer-events: none; }
.francophonie .card-game.faded .card__inner { opacity: .5; transform: scale(0.9); }
.francophonie .card-game.faded .card__shadow { opacity: .5; }
.francophonie .card-game.faded .hand img { transform: translateY(100px); transition: 0.5s ease-out; }
.francophonie .card-game.faded:hover .card__inner,
.francophonie .card-game.faded:hover .card__shadow { transform: scale(1); opacity: 1; transition: 0.5s ease-out; }

.francophonie .card-game.selected { flex-shrink: 0; width: 100%; z-index: 5; }
.francophonie .card-game.selected .card__inner { transform: scale(1.23); transition: 0.5s ease-out; }
.francophonie .card-game.selected .card__shadow,
.francophonie .card-game.selected:hover .card__shadow { transform: scale(1.36); }
.francophonie .card-game.selected .card__inner .card__title { animation: wobble 1.5s linear infinite; }
.francophonie .card-game.selected .card__bubble { transform: translate(-50%, -50%) scale(1.5, 1.5); transition: 1s ease-in; }
.francophonie .card-game.selected .sun { animation: shine 5s cubic-bezier(0.18, 0.26, 0.36, 0.55) infinite;  }
.francophonie .card-game.selected .sun svg,
.francophonie .card-game.selected .sun img { transform: translate(-50%, -50%) scale(1, 1); }

@media(max-width: 1023px) {
    .francophonie .cards-game .cards__inner { margin-left: 0; margin-right: 0;  padding-bottom: 50px; flex-direction: column; align-items: center; }

    .francophonie .card-game { margin: 0 auto; width: 100%; }
    .francophonie .card-game + .card-game { margin-top: 30px;  }
    .francophonie .card-game .card__shadow { position: absolute; left: 0; right: 0; bottom: 50px; margin: 0 -35px;  }
    .francophonie .card-game .hand { display: none; }

    .francophonie .card-game:hover .card__inner,
    .francophonie .card-game:hover .card__shadow { transform: scale(1.05); }

    .francophonie .card-game:first-of-type .card__inner,
    .francophonie .card-game:first-of-type .card__shadow { transform-origin: 50% 50%; }
    .francophonie .card-game:nth-of-type(2) .card__inner,
    .francophonie .card-game:nth-of-type(2) .card__shadow { transform-origin: 50% 50%; }
    .francophonie .card-game:nth-of-type(3) .card__inner,
    .francophonie .card-game:nth-of-type(3) .card__shadow { transform-origin: 50% 50%; }

    .francophonie .card-game.selected .card__inner  { transform: scale(1.1); }
    .francophonie .card-game.selected .card__shadow,
    .francophonie .card-game.selected:hover .card__shadow { transform: scale(1.2); }
}

@media(max-width: 767px) {
    .francophonie .card-game .card__inner  { height: 300px; }
}

.francophonie a.quiz__link span.quiz__text p{ 
    font-size:15px; 
    margin-bottom:0px;
    line-height: 1;
    font-family: 'Roboto Condensed', sans-serif;
}

.reponseCacher { display:none; }

.videoBtn { border: 4px solid rgba(0,0,0,0.2); transition: all .5s linear; display:block; margin:0 auto; border-radius:5px; color:#ffffff !important; font-size: 15px; line-height: 1; font-family: 'Roboto Condensed', sans-serif; width: 128px; padding: 8px 0 7px 0; text-align: center; position:relative;top:9px; }

.fancybox-inner { overflow: auto !important; width: 121% !important; margin-top: -11% !important; margin-left: -11% !important; height: 782px !important; }
.fancybox-outer { overflow:hidden !important; width:800px !important; height:600px !important;}