
/* BASIC LAYOUT  */

* { user-select: none; -webkit-user-select:none; -ms-user-select: none; font-family:'Poppins'; }
body { color:#6B6C6B; font-size:13px; background-color:#FEFEFE; font-family:'Poppins'; }
a, a:visited, a:active { color:#3296EB !important; font-weight:bold; text-decoration:none; cursor:pointer; }


.content > .title { display:block; width:100%; margin-bottom:3px; color:#333333; font-size:16px; font-weight:bold; text-align:center; }
.content > .subtitle { display:block; width:100%; margin-bottom:12px; color:#CBCBCB; font-size:14px; font-weight:600; text-align:center; }
.content .purple { color:#E341C3; font-weight:bold; }
.content .green { color:#00A34D; font-weight:bold; }
.content .gray { color:#CBCBCB; font-weight:bold; }

.share { width:24px; height:24px; margin-right:12px; background:url(img/wikijump/white.share.svg) no-repeat; background-color:#3296EB; background-position:center; background-size:14px; border:0px; border-radius:100%; }
.share.twitter { width:24px; height:24px; margin-right:12px; background:url(img/wikijump/white.twitter.svg) no-repeat; background-color:#3296EB; background-position:center; background-size:14px; border:0px; border-radius:100%; }
.share.whatsapp { width:24px; height:24px; margin-right:12px; background:url(img/wikijump/white.whatsapp.svg) no-repeat; background-color:#3296EB; background-position:center; background-size:14px; border:0px; border-radius:100%; }
.share.facebook { width:24px; height:24px; margin-right:12px; background:url(img/wikijump/white.facebook.svg) no-repeat; background-color:#3296EB; background-position:center; background-size:14px; border:0px; border-radius:100%; }
.share.telegram { width:24px; height:24px; margin-right:12px; background:url(img/wikijump/white.telegram.svg) no-repeat; background-color:#3296EB; background-position:center; background-size:14px; border:0px; border-radius:100%; }
.share.copy { width:24px; height:24px; margin-right:12px; background:url(img/wikijump/white.copy.svg) no-repeat; background-color:#3296EB; background-position:center; background-size:14px; border:0px; border-radius:100%; }

.share:hover, .share.twitter:hover, .share.whatsapp:hover, .share.facebook:hover, .share.telegram:hover, .share.copy:hover { background-color:#333333; }

/* INCs */

#header { position:fixed; height:53px; padding:6px 12px 24px 12px; margin:0px; background:#FEFEFE; z-index:996; }
#header > div:nth-child(1) > a > div:nth-child(2) { width:148px; background-image:url(img/wikijump/header.logo.svg); background-position:center; }
#header > div:nth-child(1) { display:flex; flex-grow:1; justify-content:space-between; }
#header > div:nth-child(1) > a { margin:0px auto; }
#header .surrender { position:absolute; width:25px; height:25px; top:16px; left:12px; background-image:url(img/wikijump/surrender.svg); background-position:center; }

.presentation > .info:nth-child(even) > div { width:71px; height:17px; margin-bottom:24px; background:url(img/wikijump/presentation.break.left.svg) no-repeat; }
.presentation > .info:nth-child(odd) > div { width:71px; height:17px; margin-bottom:24px; background:url(img/wikijump/presentation.break.left.svg) no-repeat; }
.presentation > .info > span { font-size:18px; }
.presentation > .info > span > span { color:#66A846; font-size:19px; font-weight:600; }

.links > a, .links > span { font-size:12px; }

.menu { position:fixed !important; padding-top:24px; background:#FEFEFE; z-index:996; }
.menub { position: fixed !important; background:#FEFEFE; z-index:996; }

.wjHeaderGame { position:fixed; display:flex; flex-direction:row; flex-wrap:nowrap;	justify-content:space-between; align-items:center; align-content:center; width:100%; padding:0px 12px 6px 12px; margin-bottom:0px; text-align:center; background:#FEFEFE; z-index:998; box-shadow:0px 2px 4px 1px #ebebeb; }
.wjHeaderGame .subtitle { color:#CBCBCB; font-size:12px; font-weight:500; }
.wjHeaderGame .title { color:#CBCBCB; font-size:12px; font-weight:500; }

/* INFLATERS  */
.footer-illustration-fix { height:166px; }
.stats > div > div:nth-child(1) { color:#333333; font-size:16px; font-weight:bold; }
.stats > div > div:nth-child(2) { color:#CBCBCB; font-size:14px; font-weight:500; }


/* OTHERS */

.wjHeader { position:absolute; width:35px; height:35px; right:12px; }
.wjHeader > div:nth-child(1) { position:absolute; width:100%; height:100%; background-repeat:no-repeat !important; background-position: bottom; z-index:2; }
.wjHeader > div:nth-child(2) { position:absolute; width:100%; height:100%; background-repeat:no-repeat !important; background-position: bottom; z-index:3; }
.wjHeader > div > div:nth-child(1) { position:absolute; width:100%; height:100%; background-repeat:no-repeat !important; background-position: bottom; z-index:3; }
.wjHeader > div > div:nth-child(2) { position:absolute; width:100%; height:100%; background-repeat:no-repeat !important; background-position: bottom; z-index:4; }

.wjPreview { width:100%; padding:0px 12px; margin-bottom:24px; }
.wjPreview > div:nth-child(1) { position:relative; width:200px; height:166px; margin:0px auto; }
.wjPreview > div:nth-child(1) > div:nth-child(1) { position:absolute; width:100%; height:100%; z-index:2; }
.wjPreview > div:nth-child(1) > div { position:absolute; width:100%; height:100%; z-index:3; }
.wjPreview > div:nth-child(1) > div > div:nth-child(1) { position:absolute; width:100%; height:100%; z-index:3; }
.wjPreview > div:nth-child(1) > div > div:nth-child(2) { position:absolute; width:100%; height:100%; z-index:4; }
.wjpanel { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center; width:100%; padding:0px 12px; margin-bottom:24px; }
.wjpanel > div:nth-child(1) { width:24px; height:24px; background:url(img/wikijump/button.prev.svg) no-repeat; }
.wjpanel.blue > div:nth-child(1) { width:24px; height:24px; background:url(img/wikijump/button.prev.blue.svg) no-repeat; }
.wjpanel.yellow > div:nth-child(1) { width:24px; height:24px; background:url(img/wikijump/button.prev.yellow.svg) no-repeat; }
.wjpanel.red > div:nth-child(1) { width:24px; height:24px; background:url(img/wikijump/button.prev.red.svg) no-repeat; }

.wjpanel > div:nth-child(2) { min-width:200px; margin:0px 12px; color:white; text-align:center; }
.wjpanel > div:nth-child(2) > span:nth-child(1) { display:block; width:100%; color:#333333; font-size:16px; font-weight:bold; }
.wjpanel > div:nth-child(2) > span:nth-child(1) > span { font-size:13px; color:#6B6C6B; }
.wjpanel > div:nth-child(2) > span { display:block; width:100%; color:#CBCBCB; font-size:13px; font-weight:600; }
.wjpanel > div:nth-child(3) { width:24px; height:24px; background:url(img/wikijump/button.next.svg) no-repeat; }
.wjpanel.blue > div:nth-child(3) { width:24px; height:24px; background:url(img/wikijump/button.next.blue.svg) no-repeat; }
.wjpanel.yellow > div:nth-child(3) { width:24px; height:24px; background:url(img/wikijump/button.next.yellow.svg) no-repeat; }
.wjpanel.red > div:nth-child(3) { width:24px; height:24px; background:url(img/wikijump/button.next.red.svg) no-repeat; }

.wjFooter { position:absolute; width:100%; margin:0px auto; bottom:0px; z-index:1; }
.wjFooter > div:nth-child(1) { position:relative; width:200px; height:166px; margin:0px auto; }
.wjFooter > div:nth-child(1) > div:nth-child(1) { position:absolute; width:100%; height:100%; z-index:2; }
.wjFooter > div:nth-child(1) > div { position:absolute; width:100%; height:100%; z-index:3; }
.wjFooter > div:nth-child(1) > div > div:nth-child(1) { position:absolute; width:100%; height:100%; z-index:3; }
.wjFooter > div:nth-child(1) > div > div:nth-child(2) { position:absolute; width:100%; height:100%; z-index:4; }

.wjList { flex:0 0 auto; position:relative; width:45px; height:38px; margin:0 auto 3px auto; }
.wjList > div:nth-child(1) { position:absolute; width:100%; height:100%; background-repeat:no-repeat !important; background-position:bottom; z-index:2; }
.wjList > div:nth-child(2) { position:absolute; width:100%; height:100%; background-repeat:no-repeat !important; background-position:bottom; z-index:3; }
.wjList > div:nth-child(3) { position:absolute; width:100%; height:100%; background-repeat:no-repeat !important; background-position:bottom; z-index:4; }

.pbCountdown { width:0%; height:7px; background-color:#DB2D34; overflow:hidden; border-radius:99999px; }
.pbCountdownAnimation { animation:pbCountdown; animation-duration:8s; animation-iteration-count:1; animation-timing-function: linear; }

.wjNews { width:100%; margin:0px auto; bottom:0px; z-index:1; }
.wjNews > div:nth-child(1) { position:relative; width:200px; height:166px; margin:0px auto; }
.wjNews > div:nth-child(1) > div:nth-child(1) { position:absolute; width:100%; height:100%; z-index:2; }
.wjNews > div:nth-child(1) > div { position:absolute; width:100%; height:100%; z-index:3; }
.wjNews > div:nth-child(1) > div > div:nth-child(1) { position:absolute; width:100%; height:100%; z-index:3; }
.wjNews > div:nth-child(1) > div > div:nth-child(2) { position:absolute; width:100%; height:100%; z-index:4; }

@keyframes pbCountdown {
    0% { width:100%; }
    100% { width:0%; }
}

@keyframes jump {
    0% { transform:translate3d(0, 0, 0) scale3d(1, 1, 1); }
    40% { transform:translate3d(0, -30%, 0) scale3d(.7, 1.5, 1); }
    100% { transform:translate3d(0, -75%, 0) scale3d(1.5, .7, 1); }
}

.jump {
    transform-origin:50% 50%;
    animation:jump .3s linear alternate;
    animation-iteration-count: 2;
}

.shaking {
    transform-origin:50% 50%;
    animation:shaking .3s linear alternate;
    animation-iteration-count:4;
}

@keyframes shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.shakingFrogButton {
    transform-origin:50% 50%;
    animation:shakingFrogButton .3s linear alternate;
    animation-iteration-count:3;
}

@keyframes shakingFrogButton {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(5deg) scale(1.25); }
    50% { transform: rotate(0deg) scale(1.75); }
    75% { transform: rotate(-5deg) scale(1.25); }
    100% { transform: rotate(0deg) scale(1); }
  }