html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td, th {
    padding: 0
}

body {
    color: #fff;
    background: #363636;
    font-family: ProximaNova-Regular;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    padding-top: 64px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.25px
}

b, strong {
    font-family: ProximaNova-Bold;
    font-style: normal;
    font-weight: normal
}

ul, p {
    margin: 0;
    padding: 0
}

ul:after {
    clear: both;
    content: " ";
    height: 0;
    width: 100%;
    display: block
}

a {
    color: #2b2728;
    text-decoration: none
}

a:hover, a:focus {
    color: #f6a240;
    text-decoration: none;
    outline: none
}

.btn:focus, .transea:focus, .shadow-btn:focus {
    color: inherit
}

input, button, textarea, select {
    outline: none
}

.container {
    position: relative;
    padding: 0 100px;
    margin: 0 auto
}

*, *:before, *:after {
    box-sizing: border-box
}

.container:before {
    display: table;
    content: " "
}

.container:after {
    display: table;
    content: " ";
    clear: both
}

.container .to-margins {
    margin: 0 -100px
}

.container .max-fullhd {
    max-width: 1720px;
    margin: 0 auto
}

.container.max-fullhd {
    max-width: 1920px;
    margin: 0 auto
}

input[type=text]:focus::-webkit-input-placeholder {
    color: #cccccc
}

input[type=text]:focus::-moz-placeholder {
    color: #cccccc
}

input[type=text]:focus:-moz-placeholder {
    color: #cccccc
}

textarea:focus::-webkit-input-placeholder {
    color: #cccccc
}

textarea:focus::-moz-placeholder {
    color: #cccccc
}

textarea:focus:-moz-placeholder {
    color: #cccccc
}

textarea:invalid, input:invalid, select:invalid {
    box-shadow: none
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px #fff inset;
    -webkit-text-fill-color: #64a495
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px #fff inset;
    -webkit-text-fill-color: #64a495
}

.clear {
    display: block;
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.text-center {
    text-align: center
}

.overhide {
    overflow: hidden
}

.embed-responsive {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0
}

.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@-webkit-keyframes twist-left {

0
{
    -webkit-transform: rotate(0deg)
;
    animation-timing-function: linear
}
25
%
{
    -webkit-transform: rotate(90deg)
;
    animation-timing-function: linear
}
50
%
{
    -webkit-transform: rotate(180deg)
;
    animation-timing-function: linear
}
75
%
{
    -webkit-transform: rotate(270deg)
;
    animation-timing-function: linear
}
100
%
{
    -webkit-transform: rotate(360deg)
;
    animation-timing-function: linear
}
}
@-moz-keyframes twist-left {

0
{
    -moz-transform: rotate(0deg)
;
    animation-timing-function: linear
}
25
%
{
    -moz-transform: rotate(90deg)
;
    animation-timing-function: linear
}
50
%
{
    -moz-transform: rotate(180deg)
;
    animation-timing-function: linear
}
75
%
{
    -moz-transform: rotate(270deg)
;
    animation-timing-function: linear
}
100
%
{
    -moz-transform: rotate(360deg)
;
    animation-timing-function: linear
}
}
@-o-keyframes twist-left {

0
{
    -o-transform: rotate(0deg)
;
    animation-timing-function: linear
}
25
%
{
    -o-transform: rotate(90deg)
;
    animation-timing-function: linear
}
50
%
{
    -o-transform: rotate(180deg)
;
    animation-timing-function: linear
}
75
%
{
    -o-transform: rotate(270deg)
;
    animation-timing-function: linear
}
100
%
{
    -o-transform: rotate(360deg)
;
    animation-timing-function: linear
}
}
@-ms-keyframes twist-left {

0
{
    -ms-transform: rotate(0deg)
;
    animation-timing-function: linear
}
25
%
{
    -ms-transform: rotate(90deg)
;
    animation-timing-function: linear
}
50
%
{
    -ms-transform: rotate(180deg)
;
    animation-timing-function: linear
}
75
%
{
    -ms-transform: rotate(270deg)
;
    animation-timing-function: linear
}
100
%
{
    -ms-transform: rotate(360deg)
;
    animation-timing-function: linear
}
}
@keyframes twist-left {

0
{
    transform: rotate(0deg)
;
    animation-timing-function: linear
}
25
%
{
    transform: rotate(90deg)
;
    animation-timing-function: linear
}
50
%
{
    transform: rotate(180deg)
;
    animation-timing-function: linear
}
75
%
{
    transform: rotate(270deg)
;
    animation-timing-function: linear
}
100
%
{
    transform: rotate(360deg)
;
    animation-timing-function: linear
}
}
.loading {
    text-align: center;
    font-size: 36px
}

.loading span {
    display: block;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-left: 20px;
    margin-bottom: 10px
}

.loading:after {
    display: inline-block;
    font-family: "banicon";
    content: "\e618";
    color: #116d73;
    -webkit-animation: twist-left 0.6s infinite;
    -moz-animation: twist-left 0.6s infinite;
    -o-animation: twist-left 0.6s infinite;
    -ms-animation: twist-left 0.6s infinite;
    animation: twist-left 0.6s infinite
}

#message {
    text-align: center
}

#message .message-error {
    padding: 15px;
    color: #A94442;
    background-color: #F2DEDE
}

#message .message-success {
    padding: 15px;
    color: #3C763D;
    background-color: #DFF0D8
}

#menu li.settings a.more i, .whoplay a, nav a, #umenu li.line, #umenu a, #umenu ul ul, .header.to-left a, .header.to-left a:after, footer a, #slides .banicon-down, .pager a, .breadcrumb a, .transition, .letters a, .find-game .category label.checked:before, .find-game .category label.checked:after, .gametype a, .gametype a b, .games li .play a, .games li .play a:after, .games-options a, .games li, .games li:before, .games li .image, .games li .play, .games li .description a, .games.thumbnails li .box, .game .screens a:after, .game .help li a, .game .help li a:before, .game .similar a, .transea, .transea:after, .game .players li a, .game .players li a span:before, .opacity .hint, .news .item a, #buy .bottom .options label span img, #buy .bottom .options label span, #partner .btn button, #partner .btn button:before, #partner .btn button:after, #apps .list li a, #apps .list li a img, #apps .list li a:before, #apps .list li a:after, #promo-prepaids li a, #prepaids li .box, #prepaids li .box:before, #buypsc input, #gold .list li .item, #gold .list li a, #gold .list li a i, #contact .form-group select + .banicon:before, #help a, #help .section a, #help .section a:before, #help .section a:after, #profile a, #profile table.ranking td, #contact a, #contact ul.ticket li, a.lottery, #profile ul.badges li a, #profile ul.badges li a .main, #profile ul.badges li a .details, #profile ul.badges li a .bg, #menu .user .info {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}

.whoplay-list a, .whoplay-list a .image, .whoplay-list a .image img, .get-banana a, .get-banana .points, .get-banana .hint, .getbanana a, .getbanana a .points, .getbanana a:after, #facebook, #twitter, #gplus, #shop a, #shop a .image, #shop.map ul a b, #paysafecard li a, #fkfg .btn button, #fkfg .btn button:after, #fkfg .btn button:before, .popular li, .popular li .pgame, .popular li a, .popular li a:after, .popular li .image, .popular li .pgame:before, .game-header .game-type, .game-header .game-type:after, .shadow-btn, .shadow-btn:before, .shadow-btn b, .game .description a:after, .game .description a:before, #social .options .box .task a, #partners .btn a, #recommend-stats, #recommend-stats .toggle .banicon:before, #creator a, #creator a:before, #creator .list li, #creator .list li .image, #creator .list .content .up i, #creator .list .content .down i, #creator-sets a, #exp .tasks li a {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out
}

.icon {
    position: relative;
    top: -2px;
    display: inline-block;
    line-height: 1;
    vertical-align: middle
}

.icon-ok {
    width: 20px;
    height: 17px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/ico-ok.png) no-repeat 0 0
}

.icon-change {
    width: 20px;
    height: 21px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/ico-change.png) no-repeat 0 0
}

.icon-zoom {
    width: 20px;
    height: 20px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/ico-zoom.png) no-repeat 0 0
}

.checkbox {
    padding: 3px 0 3px 30px;
    font-size: 14px;
    color: #0b4d51;
    position: relative;
    margin-bottom: 15px
}

.checkbox input {
    position: absolute;
    top: 0;
    left: 0
}

.checkbox input[type=checkbox]:not(old) {
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    opacity: 0
}

.checkbox input[type=checkbox]:not(old) + label {
    height: 19px;
    line-height: 16px;
    margin-left: -23px;
    padding-top: 3px;
    padding-left: 30px;
    display: inline-block;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-input-checkbox.png) no-repeat top left;
    position: relative
}

.checkbox input[type=checkbox]:not(old) + label:before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    width: 16px;
    height: 19px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-input-checkbox.png) no-repeat bottom left;
    opacity: 0;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}

.checkbox input[type=checkbox]:checked:not(old) + label:before {
    opacity: 1
}

nav {
    height: 64px;
    background: #0b4d51;
    position: fixed;
    z-index: 8000;
    top: 0;
    left: 0;
    width: 100%
}

nav .container {
    max-width: 1920px
}

nav .logo {
    display: inline-block;
    color: #fbe12b;
    font-size: 40px;
    margin-top: 11px
}

nav .logo:hover {
    color: #fff
}

#menu {
    float: right;
    height: 64px;
    border-right: 1px solid #0f595e;
    list-style: none;
    position: relative
}

#menu li {
    float: left;
    border-left: 1px solid #0f595e
}

#menu li a {
    padding: 23px 23px;
    width: 175px;
    height: 64px;
    display: block;
    font-family: ProximaNova-Bold;
    font-style: normal;
    font-weight: normal;
    color: #fff;
    font-size: 16px;
    text-align: center;
    white-space: nowrap
}

#menu li a:hover {
    background: #0f595e
}

#menu li a .banicon {
    font-size: 18px;
    vertical-align: middle;
    top: -2px;
    position: relative
}

#menu li .flags {
    height: 64px;
    overflow: hidden;
    background: #0b4d51
}

#menu li .flags a {
    padding: 20px 10px 20px 10px;
    width: auto
}

#menu li .flags a + a {
    display: none
}

#menu li .flags.open {
    height: auto
}

#menu li .flags.open a + a {
    display: block;
    margin-top: -5px
}

#menu li .flags a img {
    width: 35px
}

#login {
    position: absolute;
    top: 64px;
    right: 0;
    width: 100%;
    min-width: 352px;
    max-width: 100%;
    color: #000;
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
    border-left: 0 !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 0;
    padding: 0 30px;
    overflow: hidden;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out
}

#login.open {
    height: auto;
    padding: 25px 30px
}

#login .field, #register .field {
    position: relative;
    margin-bottom: 10px
}

#login .banicon, #register .banicon {
    position: absolute;
    z-index: 3;
    color: #64a495
}

#login .field input, #register .field input {
    border: 1px solid #92bdb3;
    border-radius: 10px;
    width: 100%;
    padding: 12px 20px 12px 50px;
    color: #64a495;
    font-size: 14px;
    position: relative;
    z-index: 2
}

#login .banicon-mail2, #register .banicon-mail2 {
    top: 13px;
    left: 16px;
    font-size: 14px
}

#login .banicon-lock2, #register .banicon-lock2 {
    top: 11px;
    left: 20px;
    font-size: 18px
}

#login .btn, #register .btn {
    background: #116d73;
    display: block;
    border: 0;
    text-align: center;
    border-radius: 10px;
    text-transform: uppercase;
    font-family: 'ProximaNova-Bold';
    font-weight: normal;
    font-style: normal;
    font-size: 15px;
    color: #fff;
    letter-spacing: 3px;
    height: 44px;
    width: 100%;
    margin-bottom: 10px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

#login .btn:hover, #register .btn:hover {
    background: #0c4d51
}

#login form + form p {
    padding: 10px 0
}

#menu #login a, #register a {
    padding: 0;
    height: auto;
    background: none;
    color: #0b4d51;
    font-size: 16px;
    display: block;
    font-family: ProximaNova-Regular;
    font-style: normal;
    font-weight: normal;
    width: auto
}

#menu #login a:hover, #register a:hover {
    color: #81bd37
}

#menu #login .facebook, #menu #login .gplus, #register .facebook, #register .gplus {
    width: 47%;
    margin: 0;
    font-family: ProximaNova-Bold;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: #fff;
    border-radius: 10px;
    padding: 14px 2px 14px 40px;
    text-align: center;
    position: relative;
    margin-top: 38px
}

#menu #login .facebook, #register .facebook {
    float: left;
    background: #4d81bc
}

#menu #login .facebook:before, #register .facebook:before {
    position: absolute;
    top: 0;
    left: 40px;
    width: 1px;
    height: 100%;
    background: #6d9acd;
    content: " "
}

#menu #login .facebook:hover, #register .facebook:hover {
    color: #fff;
    background: #316398
}

#menu #login .facebook .banicon, #register .facebook .banicon {
    font-size: 16px;
    width: 8px;
    height: 16px;
    position: absolute;
    left: 17px;
    top: 13px;
    color: #fff
}

#menu #login .gplus, #register .gplus {
    float: right;
    background: #f25d65
}

#menu #login .gplus:before, #register .gplus:before {
    position: absolute;
    top: 0;
    left: 40px;
    width: 1px;
    height: 100%;
    background: #fb787e;
    content: " "
}

#menu #login .gplus .banicon, #register .gplus .banicon {
    font-size: 14px;
    width: 17px;
    height: 17px;
    position: absolute;
    left: 13px;
    top: 14px;
    color: #fff
}

#menu #login .gplus:hover, #register .gplus:hover {
    color: #fff;
    background: #e44a52
}

/*.opacity #login {*/
/*    opacity: 0*/
/*}*/

.opacity #login.open {
    opacity: 1
}

#menu .user {
    padding: 12px 30px;
    width: auto;
    font-family: ProximaNova-Regular;
    min-width: 257px;
    position: relative
}

#menu .user .lvl {
    color: #fbe12b;
    font-size: 16px;
    margin-right: 3px
}

#menu .user .nick {
    font-size: 16px
}

#menu .user img {
    vertical-align: middle;
    margin: 0 12px 0 0;
    border-radius: 50%;
    width: 40px;
    height: 40px
}

#menu .user .status {
    width: 125px;
    height: 11px;
    display: inline-block;
    border: 2px solid #80bd39;
    border-radius: 5px;
    background: #fff;
    margin: 0 0 0 20px;
    vertical-align: middle;
    position: relative;
    cursor: help
}

#menu .user .status .current {
    position: absolute;
    top: 0;
    left: 0;
    height: 7px;
    background: #80bd39;
    border-radius: 2px
}

#menu .user .info {
    opacity: 0;
    position: absolute;
    top: 64px;
    right: -118px;
    height: 56px;
    background: #043437;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    color: #fff;
    font-size: 12px;
    color: #fff;
    font-family: ProximaNova-Semibold;
    line-height: 26px;
    padding: 16px 35px;
    z-index: 100000;
    visibility: hidden
}

#menu .user .info:after {
    position: absolute;
    width: 20px;
    height: 10px;
    top: -10px;
    right: 50%;
    margin-left: -10px;
    border-bottom: 10px solid #043437;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: ""
}

#menu .user .info .exp {
    font-family: ProximaNova-Bold;
    font-size: 20px;
    color: #fcb040;
    margin: 0 10px;
    vertical-align: middle
}

#menu .user .status:hover + .info {
    opacity: 1;
    visibility: visible
}

#menu .user img {
    vertical-align: middle;
    margin: 0 15px 0 0;
    border-radius: 50%;
    width: 40px;
    height: 40px
}

#menu .points {
    padding: 22px 10px;
    color: #fbe12b;
    font-size: 18px;
    line-height: 18px;
    width: auto;
    min-width: 116px;
    position: relative
}

#menu .points:after {
    font-size: 17px;
    color: #fbe12b;
    font-family: 'banicon';
    display: inline-block;
    content: "\e601";
    margin-left: 7px;
    position: relative;
    top: 2px
}

#menu .points .purchased {
    position: absolute;
    font-size: 12px;
    top: 38px;
    left: 0;
    right: 0;
    text-align: center;
    color: #80bd39;
    font-family: ProximaNova-Semibold;
    cursor: help
}

#menu .points .purchased:after {
    font-size: 10px;
    color: #80bd39;
    font-family: 'banicon';
    display: inline-block;
    content: "\e601";
    margin-left: 4px;
    position: relative;
    top: 0
}

#menu li.settings a.more {
    width: 52px
}

#menu li.awards a.more i {
    font-size: 20px
}

#menu li.messages a.more i {
    font-size: 17px;
    top: -1px
}

#menu li.notifications a.more i {
    font-size: 21px
}

#menu li.awards, #menu li.settings {
    position: relative
}

#menu li.messages, #menu li.notifications {
    position: relative;
    border-left: 0
}

#menu li a.more {
    padding: 0;
    width: 58px;
    height: 64px;
    text-align: center;
    font-size: 19px;
    color: #2a787d;
    line-height: 64px;
    position: relative
}

#menu li a.more .counter {
    position: absolute;
    background: #6ca831;
    color: #fff;
    padding: 1px;
    border-radius: 4px;
    top: 9px;
    right: 8px;
    font-family: ProximaNova-Regular;
    font-size: 12px;
    line-height: 16px;
    z-index: 3;
    min-width: 18px;
    text-align: center
}

#menu li a.more .counter + .banicon {
    color: #fff
}

#menu li a.more:hover, #menu li a.more.active {
    color: #fff
}

#menu li .list {
    position: absolute;
    width: 229px;
    top: 64px;
    border: 1px solid #8fbbbe;
    background: #fff;
    padding: 17px;
    color: #000;
    display: none;
    font-size: 14px
}

#menu li .list strong {
    color: #116d73;
    display: block;
    border-bottom: 1px solid #8ab7ba;
    padding-bottom: 18px;
    margin-bottom: 17px
}

#menu li .list strong span {
    float: right
}

#menu li .list a {
    color: #0b4d51;
    font-size: 14px;
    display: inline;
    padding: 0;
    font-family: ProximaNova-Regular
}

#menu li .list a:hover {
    color: #80bd39;
    background: none
}

#menu li.awards .list {
    left: -1px
}

#menu li.messages .list {
    left: -59px
}

#menu li.notifications .list {
    left: -117px
}

#menu li.settings a.more {
    color: #fff
}

#menu li.settings a.more i {
    display: block;
    top: 22px
}

#menu li.settings a.more.active i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

#menu li.settings .list {
    left: -176px;
    border: 0;
    width: 229px;
    padding: 0;
    background: none;
    border: 1px solid #8fbbbe;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden
}

#menu li.settings .list a {
    display: block;
    width: 100%;
    padding: 17px 23px;
    color: #126d72;
    height: auto;
    font-size: 14px;
    text-align: left;
    background: #fff;
    font-family: ProximaNova-Bold
}

#menu li.settings .list a:last-child {
}

#menu li.settings .list a:hover {
    background: #d8e9e8
}

#menu li .list:before {
    position: absolute;
    left: 79px;
    top: -11px;
    width: 18px;
    height: 11px;
    border-bottom: 11px solid #fff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    content: " "
}

#menu li.awards .list:before {
    left: 20px
}

#menu li.notifications .list:before {
    left: 136px
}

#menu li.settings .list:before {
    display: none
}

#menu li .list .items {
    border-bottom: 1px solid #8ab7ba;
    padding-bottom: 18px;
    margin-bottom: 17px;
    max-height: 230px;
    overflow: auto
}

#menu li .list .items a {
    display: block;
    width: auto;
    height: auto
}

#menu li .list .items .accept, #menu li .list .items .reject {
    margin-top: 5px;
    padding: 6px 10px 5px 30px;
    text-align: left;
    background: #80bd39;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    font-family: ProximaNova-Semibold;
    text-transform: uppercase;
    text-align: center;
    position: relative
}

#menu li .list .items .reject {
    background: #F35D66
}

#menu li .list .items .accept:hover {
    background: #679c2a
}

#menu li .list .items .reject:hover {
    background: #E0535B
}

#menu li .list .items .accept i, #menu li .list .items .reject i {
    font-size: 11px;
    position: absolute;
    top: 6px;
    left: 10px
}

#menu li .list .items .badge, #menu li .list .items .game {
    display: block;
    width: auto;
    height: auto;
    text-align: left
}

#menu li .list .items .badge + .badge {
    margin-top: 7px
}

#menu li .list .items .badge img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle
}

#menu li .list .items .game {
    text-align: center;
    margin: 0;
    font-size: 12px
}

#menu li .list .items .game + .game, #menu li .list .items form + .game {
    padding-top: 10px;
    border-top: 1px solid #ebebeb
}

#menu li .list .items form {
    margin-bottom: 10px
}

#menu li .list .items .game img {
    max-width: 100%;
    max-height: 40px;
    display: block;
    margin: 5px auto 10px auto
}

#menu li .list .items .game b {
    font-family: ProximaNova-Semibold
}

#fit {
    min-height: calc(100vh - 240px);
    background: #fff
}

.white {
    background: #fff;
    color: #116d73
}

.blank {
    padding: 200px 0
}

.sea {
    background: #116d73;
    color: #fff
}

.aqua {
    background: #c8dcd3;
    color: #116d73
}

.sea.relative {
    position: relative
}

.sea.relative .container {
    position: static
}

.sea .container, .aqua .container {
    max-width: 1920px
}

.header {
    overflow: hidden;
    display: block;
    text-align: center;
    padding: 37px 0
}

.header b, .header > h1, .header > h2 {
    display: inline-block;
    font-size: 26px;
    color: #116d73;
    position: relative
}

.header > h1, .header > h2 {
    margin: 0;
    font-weight: normal;
    font-family: ProximaNova-Bold;
    padding: 0
}

.header b:before, .header > h1:before, .header > h2:before {
    right: 100%;
    margin-right: 50px;
    width: 2000px;
    top: 50%;
    height: 1px;
    background: #116d73;
    content: " ";
    position: absolute
}

.header b:after, .header > h1:after, .header > h2:after {
    left: 100%;
    margin-left: 27px;
    width: 2000px;
    top: 50%;
    height: 1px;
    background: #116d73;
    content: " ";
    position: absolute;
    z-index: 3
}

.header b h1 {
    font-size: inherit;
    margin: 0;
    display: inline;
    font-weight: inherit
}

.header.to-left {
    text-align: left
}

.header.to-left b:after, .header.to-left h2:after {
    background: #88b6b9
}

.header.to-left a {
    float: right;
    font-size: 13px;
    border: 2px solid #116d73;
    color: #116d73;
    text-transform: uppercase;
    padding: 9px 50px;
    border-radius: 10px;
    margin-top: -4px;
    background: #fff;
    position: relative;
    z-index: 4;
    letter-spacing: 3px
}

.header.to-left a + a {
    margin-right: 8px
}

.header.to-left b a + a {
    margin-right: 0
}

.header.to-left a:before {
    background: #fff;
    left: -52px;
    width: 50px;
    height: 20px;
    content: " ";
    position: absolute
}

.header.to-left a strong {
    position: relative;
    z-index: 6
}

.header.to-left a strong .banicon {
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-left: 4px
}

.header.to-left a:after {
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 5px;
    background: #116d73;
    z-index: 5;
    position: absolute;
    content: " "
}

.header.to-left a:hover {
    color: #fff
}

.header.to-left a:hover:after {
    width: 100%
}

.sea .header.to-left {
    margin: 35px 0
}

.sea .header.to-left b {
    color: #fff
}

.sea .header.to-left a:after {
    background: #88b6b9
}

.header.bigger {
    margin: 19px 0
}

.header.big {
    margin: 35px 0
}

.header.to-left a.fav {
    font-size: 20px;
    padding: 3px 40px;
    margin-top: -6px
}

.transea {
    display: inline-block;
    font-size: 13px;
    border: 2px solid #116d73;
    color: #116d73;
    text-transform: uppercase;
    padding: 8px 0;
    border-radius: 10px;
    position: relative;
    letter-spacing: 2px;
    z-index: 3;
    text-align: center;
    max-width: 100%;
    background: transparent
}

.transea strong {
    position: relative;
    z-index: 6
}

.transea:after {
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 5px;
    background: #116d73;
    z-index: 5;
    position: absolute;
    content: " "
}

.transea:hover, .transea.active {
    color: #fff
}

.transea:hover:after, .transea.active:after {
    width: 100%
}

.shadow-btn {
    display: inline-block;
    position: relative;
    height: 34px;
    color: #fff;
    top: 0;
    left: 0;
    margin-left: 2px
}

.shadow-btn b {
    display: block;
    position: relative;
    height: 100%;
    overflow: hidden;
    float: none;
    z-index: 3;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    padding: 10px 5px 0 5px;
    width: 100%
}

.shadow-btn:before {
    position: absolute;
    left: -2px;
    bottom: -3px;
    width: 100%;
    height: 100%;
    content: " ";
    background: #000;
    border-radius: 8px;
    z-index: 2;
    opacity: 0.12
}

.shadow-btn i {
    font-size: 15px;
    width: 47px;
    height: 100%;
    line-height: 32px;
    text-align: center;
    float: left;
    position: relative;
    z-index: 4;
    margin-right: -47px
}

.shadow-btn i:after {
    content: " ";
    right: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background: #fff;
    opacity: 0.2;
    position: absolute
}

.shadow-btn i + b {
    padding-left: 52px
}

.shadow-btn:hover {
    color: #fff;
    top: 3px;
    left: -2px
}

.shadow-btn:hover:before {
    left: 0;
    bottom: 0
}

.shadow-btn.facebook b {
    background: #4d81bc
}

.shadow-btn.facebook:hover b {
    background: #4776ac
}

.shadow-btn.twitter b {
    background: #72CACB
}

.shadow-btn.twitter:hover b {
    background: #4CA2B3
}

.shadow-btn.gplus b {
    background: #f25d65
}

.shadow-btn.gplus:hover b {
    background: #E0535B
}

.shadow-btn.green b {
    background: #88b356
}

.shadow-btn.green:hover b {
    background: #80bd39
}

.breadcrumb {
    list-style: none;
    margin: 45px 0 90px 0;
    overflow: hidden;
    text-align: left
}

.breadcrumb li {
    display: inline-block;
    vertical-align: middle;
    position: relative
}

.breadcrumb li + li {
    padding-left: 37px
}

.breadcrumb li + li:before {
    content: " ";
    position: absolute;
    top: 8px;
    left: 11px;
    width: 13px;
    height: 1px;
    background: #fff
}

.breadcrumb li:last-child:after {
    position: absolute;
    content: " ";
    width: 1920px;
    height: 1px;
    background: #fff;
    top: 8px;
    left: 100%;
    margin-left: 15px
}

.breadcrumb a {
    color: #fff;
    font-family: ProximaNova-Semibold;
    font-size: 14px
}

.breadcrumb a:hover {
    color: #FBE12B
}

.breadcrumb .banicon-logo-small {
    font-size: 18px;
    position: relative;
    top: 1px
}

.breadcrumb.dark a {
    color: #116D73
}

.breadcrumb.dark li:before, .breadcrumb.dark li:last-child:after {
    background-color: #116D73
}

.breadcrumb.dark a:hover {
    color: #80bd39
}

#popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999
}

#popup:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    content: " "
}

#popup .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -21px;
    margin-left: -18px
}

#popup .loading:after {
    color: #fff
}

#popup .content {
    width: 1046px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    background: #fff;
    top: 50%;
    color: #116d73
}

#popup .content .close {
    position: absolute;
    width: 46px;
    height: 46px;
    top: -23px;
    right: -23px;
    background: #116d73;
    border-radius: 50%;
    border: 2px solid #8eafb1;
    color: #8eafb1;
    font-size: 40px;
    text-align: center;
    padding-top: 3px;
    z-index: 120;
    line-height: 1
}

#popup .content .close:hover {
    color: #fff;
    border-color: #fff;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

#popup input.text, #popup input.text:hover {
    font-family: ProximaNova-Semibold;
    letter-spacing: 0;
    text-align: center;
    background: #fff;
    text-transform: none;
    color: #454545;
    margin: 15px 0 -15px;
    border: 1px solid #cccccc;
    padding: 1px 20px;
    width: 400px;
    max-width: 100%
}

#umenu {
    height: 56px;
    background: #fff;
    padding-bottom: 1px;
    position: relative
}

#umenu:after {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #dbdbdb;
    height: 1px;
    content: " ";
    right: 0;
    z-index: 3
}

#umenu .container {
    max-width: 1920px
}

#umenu ul {
    list-style: none;
    position: relative;
    height: 56px;
    float: left
}

#umenu li {
    float: left;
    position: relative;
    z-index: 5
}

#umenu li.line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #0b4d51;
    z-index: 4
}

#umenu a {
    height: 56px;
    margin-right: 65px;
    display: inline;
    float: left;
    color: #116d73;
    font-family: ProximaNova-Bold;
    font-size: 16px;
    padding: 20px 0 0 0
}

#umenu a.active {
    border-bottom: 2px solid #0b4d51
}

#umenu form {
    display: block;
    width: auto;
    overflow: hidden;
    text-align: right
}

#umenu .search {
    margin: 13px 0 0 0;
    width: 604px;
    height: 29px;
    padding-right: 51px;
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top
}

#umenu .search button {
    position: absolute;
    top: 0;
    right: 0;
    width: 51px;
    background: #116d73;
    height: 29px;
    border: 0;
    z-index: 5998;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px
}

#umenu .search button:hover {
    background: #0c4d51
}

#umenu .search button .icon {
    width: 17px;
    height: 17px;
    background-size: cover;
    top: 0
}

#umenu .search .text {
    width: 100%;
    padding: 7px 4px 6px 18px;
    border: 1px solid #d8d8d8;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: 0;
    font-size: 13px;
    color: #666666;
    height: 29px
}

#umenu li ul {
    position: absolute;
    width: auto;
    height: auto;
    float: none;
    position: absolute;
    top: 56px;
    left: -21px;
    background: #fff;
    z-index: 10;
    display: none;
    padding: 10px;
    border: 1px solid #dbdbdb;
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
}

.opacity #umenu li ul {
    display: block;
    visibility: hidden;
    opacity: 0
}

#umenu li a:hover + ul, #umenu li ul:hover {
    display: block
}

.opacity #umenu li a:hover + ul, .opacity #umenu li ul:hover {
    visibility: visible;
    opacity: 1
}

#umenu li ul li {
    float: none;
    display: block
}

#umenu li ul a {
    height: auto;
    margin: 0;
    white-space: nowrap;
    padding: 5px 10px;
    float: none;
    display: block
}

#umenu li ul a:hover {
    color: #80BD39
}

#facebook, #twitter, #gplus {
    width: 48px;
    height: 45px;
    position: fixed;
    right: 0;
    top: 188px;
    background: #4d81bb;
    color: #fff;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    font-size: 18px;
    line-height: 45px;
    padding-left: 2px;
    padding-top: 2px;
    text-align: center;
    z-index: 10000
}

#twitter {
    top: 233px;
    background: #72cacb;
    font-size: 15px;
    padding-left: 3px
}

#gplus {
    top: 278px;
    background: #f35d66;
    padding-left: 4px;
    font-size: 16px
}

#facebook:hover {
    background: #36679f
}

#twitter:hover {
    background: #4ca2b3
}

#gplus:hover {
    background: #e0535b
}

#windmill {
    background: #c9f3d1 url(https://bananatic-15199.kxcdn.com/de/images/bg-windmill.png) no-repeat bottom center;
    position: relative
}

#windmill .grass {
    position: absolute;
    height: 190px;
    bottom: 240px;
    width: 100%;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-windmill-grass.png) no-repeat center center
}

#windmill .sex {
    width: 373px;
    height: 456px;
    display: inline-block;
    margin: 50px 20px 100px 20px;
    text-align: center;
    padding: 37px 0 0 0
}

#windmill .sex.female {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-sex-female.png) no-repeat 0 0
}

#windmill .sex.male {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-sex-male.png) no-repeat 0 0
}

#windmill .sex strong {
    font-size: 30px
}

#windmill .sex strong:after {
    width: 24px;
    height: 24px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/ico-sex.png) no-repeat top left;
    content: " ";
    margin-left: 10px;
    display: inline-block;
    position: relative;
    top: 2px
}

#windmill .sex.female strong:after {
    background-position: top right
}

#windmill .character {
    width: 169px;
    height: 222px;
    display: inline-block;
    background: url(https://bananatic-15199.kxcdn.com/de/images/character-banan.png) no-repeat 0 0;
    margin: 34px 0 35px 0
}

#windmill .female .character {
    background: url(https://bananatic-15199.kxcdn.com/de/images/character-banania.png) no-repeat 0 0
}

#windmill .btn {
    width: 217px;
    display: inline-block;
    background: #317b80;
    font-family: ProximaNova-Bold;
    color: #fff;
    padding: 16px 0;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    border-radius: 10px;
    letter-spacing: 5px;
    cursor: pointer;
    border: 0
}

#windmill .sex .btn input {
    display: none
}

#windmill .sex.female .btn {
    background: #af4545
}

#windmill .message {
    font-size: 14px;
    color: #fff;
    text-align: center;
    display: inline-block;
    padding: 17px 60px;
    border: 2px solid #67aa85;
    border-radius: 10px;
    margin-bottom: 108px
}

#windmill #character {
    margin: 97px auto
}

#windmill .btn.submit {
    background: #67aa85;
    padding-right: 61px;
    margin: 15px;
    position: relative
}

#windmill .btn.submit:after {
    content: " ";
    right: 60px;
    width: 1px;
    top: 0;
    height: 100%;
    background: #79b795;
    position: absolute
}

#windmill .btn.submit .icon {
    position: absolute;
    right: 20px;
    top: 18px
}

#windmill .btn.change {
    background: #ca6d6d;
    padding-right: 61px;
    margin: 15px;
    position: relative
}

#windmill .btn.change:after {
    content: " ";
    right: 60px;
    width: 1px;
    top: 0;
    height: 100%;
    background: #d57979;
    position: absolute
}

#windmill .btn.change .icon {
    position: absolute;
    right: 21px;
    top: 16px
}

.svg #windmill #character {
    width: 212px;
    height: 278px;
    margin: 55px auto
}

.svg #windmill .character, .svg #windmill #character {
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/character-banan.svg)
}

.svg #windmill .female .character, .svg #windmill #character.female {
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/character-banania.svg)
}

#windmill input.text {
    width: 735px;
    max-width: 100%;
    padding: 10px;
    border: 1px solid #88b6b9;
    border-radius: 10px;
    font-family: ProximaNova-Bold;
    font-size: 22px;
    color: #116d73;
    background: #fff;
    text-align: center;
    margin: 0 0 30px 0
}

#windmill .name {
    font-size: 16px;
    color: #116d73;
    text-align: center;
    margin: 60px 0 20px 0
}

#windmill input.btn.submit {
    background: transparent;
    border: 2px solid #116d73;
    text-align: center;
    padding-right: 0;
    width: 300px;
    max-width: 100%;
    color: #116d73;
    margin-bottom: 158px
}

#windmill input.btn.submit:hover {
    background: #116d73;
    color: #fff
}

#slides {
    height: 627px;
    padding-bottom: 13px;
    position: relative;
    background: #fff;
    overflow: hidden
}

#slides .slide {
    height: 614px;
    clear: both;
    position: absolute;
    left: 100%;
    width: 100%;
    z-index: 4;
    overflow: hidden
}

#slides .slide + .slide {
    text-align: center;
    color: #116d73;
    line-height: normal;
    font-size: 16px
}

#slides .slide + .slide a {
    position: static;
    left: auto;
    float: none;
    height: auto
}

#slides .active {
    left: 0
}

#slides .main {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-castle.jpg) repeat-x center center;
    background-size: auto 100%;
    color: #116d73;
    text-align: center
}

#slides h1 {
    font-family: 'ProximaNova-Bold';
    font-weight: normal;
    font-style: normal;
    font-size: 55px;
    padding: 60px 0 20px 0;
    margin: 0;
    text-align: center
}

#slides h2 {
    font-weight: normal;
    font-style: normal;
    font-size: 26px;
    margin: 0 0 20px 0;
    text-align: center
}

#slides h3 {
    font-weight: normal;
    font-style: normal;
    font-size: 26px;
    text-align: center;
    margin: 0 0 30px 0;
    font-size: 16px;
    line-height: 22px
}

#slides .banicon {
    color: #6bad99;
    font-size: 21px;
    margin: 0 10px 0 30px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

#slides .banicon-down {
    font-size: 14px;
    cursor: pointer;
    margin: 0;
    display: inline-block;
    padding: 0 0 10px 0;
    top: 0;
    height: 25px
}

#slides .banicon-down:hover {
    padding: 10px 0 0 0
}

#slides .bandalf {
    display: block;
    width: 188px;
    height: 278px;
    margin: 40px auto 0 auto;
    position: relative;
    left: -8px
}

#slides .bandalf img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%
}

#slides .slide a {
    left: 50%;
    position: relative;
    float: left;
    height: 614px
}

#slides .slide a img {
    max-height: 100%;
    position: relative;
    margin-left: -50%
}

#slides .pager {
    position: absolute;
    z-index: 5;
    text-align: center;
    bottom: 0;
    height: 26px;
    width: 100%
}

#slides .pager a {
    display: inline-block;
    margin: 0 24px;
    border-radius: 100%;
    width: 26px;
    height: 26px;
    text-indent: -100px;
    overflow: hidden;
    background: #116d73;
    border: 5px solid #fff
}

#slides .pager a.active, #slides .pager a:hover {
    background: #80bd39
}

#popular {
    max-width: 1920px
}

.popular {
    list-style: none
}

.popular li {
    float: left;
    width: 20%;
    position: relative
}

.popular li .pgame {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-bottom: 38px;
    background: #d5e4e5
}

.popular li:hover .pgame {
    margin: -8px;
    z-index: 3333;
    padding-bottom: 46px;
    background: #fff;
    -webkit-box-shadow: 0 4px 14px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 4px 14px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 14px 2px rgba(0, 0, 0, 0.3)
}

.popular li + li .pgame {
    background: #dae7e8
}

.popular li + li + li .pgame {
    background: #e0ebeb
}

.popular li + li + li + li .pgame {
    background: #e6eeef
}

.popular li + li + li + li + li .pgame {
    background: #edf7f8
}

.popular li .image {
    height: 103px;
    overflow: hidden;
    position: relative;
    text-align: left;
    z-index: 3
}

.opacity .popular li .image {
    opacity: 0.3
}

.popular li:hover .image {
    margin-bottom: 8px
}

.opacity .popular li:hover .image {
    opacity: 1
}

.popular li .image span {
    position: relative;
    left: 50%;
    float: left
}

.popular li .image img {
    height: 103px;
    width: auto;
    position: relative;
    margin-left: -50%
}

.popular li .logo {
    text-align: center;
    margin: 0 8% 30px 8%;
    border-bottom: 1px solid #89b6b9;
    position: relative;
    z-index: 3;
    height: 118px;
    padding-top: 9px;
    line-height: 100px
}

.popular li .logo img {
    width: auto;
    height: auto;
    max-width: 216px;
    max-height: 100px;
    vertical-align: middle
}

.popular li b {
    display: block;
    height: 60px;
    font-size: 16px;
    color: #116d73;
    position: relative;
    z-index: 3
}

.popular li a.transea {
    padding: 9px 70px;
    border-radius: 10px;
    position: relative;
    letter-spacing: 3px;
    z-index: 3;
    max-width: 100%;
    text-align: center
}

.getbanana {
    list-style: none;
    margin: 0 -9px 100px -9px
}

.getbanana li {
    float: left;
    width: 33.333%;
    padding: 0 9px;
    position: relative;
    height: 90px;
    letter-spacing: 0;
    margin-bottom: 22px;
    border: 0
}

.getbanana li b {
    font-family: ProximaNova-Semibold
}

.getbanana li a {
    color: #fff;
    display: block;
    border: 1px solid #88b6b9;
    border-radius: 10px;
    padding: 36px 15px 0 10px;
    height: 90px;
    position: relative
}

.getbanana li a:hover {
    margin: -9px;
    height: 108px;
    padding: 45px 24px 0 19px
}

.getbanana li a:after {
    left: 69.38%;
    width: 1px;
    height: 100%;
    top: 0;
    content: " ";
    background: #88b6b9;
    position: absolute
}

.getbanana li a:hover:after {
    left: 68.4%
}

.getbanana li .banicon {
    width: 41px;
    height: 41px;
    text-align: center;
    float: left;
    font-size: 32px;
    margin: -9px 6px 0 0
}

.getbanana li .banicon-wallet, .getbanana li .banicon-tag, .getbanana li .banicon-camera, .getbanana li .banicon-signal {
    font-size: 27px;
    margin-top: -7px
}

.getbanana li .banicon-users, .getbanana li .banicon-facebook, .getbanana li .banicon-bananas3 {
    font-size: 30px
}

.getbanana li .banicon-bottle {
    font-size: 38px
}

.getbanana li .banicon-sedoc {
    font-size: 35px;
    margin-top: -8px
}

.getbanana li .banicon-fk {
    font-size: 19px;
    margin-top: -2px
}

.getbanana li .banicon-fg {
    font-size: 27px;
    margin-top: -6px
}

.getbanana li .points {
    position: absolute;
    top: 36px;
    right: 5%;
    color: #fbe12b
}

.getbanana li .points i {
    font-size: 16px;
    margin: 1px 0 0 0;
    height: auto
}

.getbanana li a:hover .points {
    top: 45px;
    right: 7.3%
}

.getbanana li .points:after {
    font-size: 16px;
    font-family: "banicon";
    content: "\e601";
    margin-left: 7px;
    vertical-align: middle;
    margin-bottom: 1px
}

.getbanana .food, .getbanana .mobile {
    clear: both
}

.whoplay {
    height: 272px;
    position: relative;
    max-width: 1280px;
    margin: 40px auto 0 auto
}

.whoplay .character {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 40px;
    display: none
}

.whoplay .character .description, .whoplay .character .image, .whoplay .character .details {
    float: left;
    height: 272px;
    overflow: hidden
}

.whoplay .character .description {
    margin-left: 4%;
    width: 28%
}

.whoplay .character .image {
    width: 34%
}

.whoplay .character .details {
    width: 32%
}

.whoplay .character .description p {
    text-align: right;
    line-height: 23px;
    height: 200px;
    overflow: hidden
}

.whoplay .character .description b {
    display: block;
    font-size: 36px;
    margin: 12px 0;
    line-height: 40px
}

.whoplay .character .details {
    padding-top: 24px
}

.whoplay .character .details b {
    font-size: 24px;
    margin-left: 10px
}

.whoplay .character .details img {
    vertical-align: middle;
    margin: 25px 10px 25px 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #F29437
}

.whoplay .character .details b.points {
    font-size: 32px;
    color: #80bd39;
    display: inline-block;
    vertical-align: middle
}

.whoplay .character .details b.points:after {
    font-size: 29px;
    display: inline-block;
    font-family: "banicon";
    content: "\e601";
    margin-left: 7px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

.whoplay .character .details b.exp {
    font-size: 32px;
    color: #ffa200;
    display: inline-block;
    vertical-align: middle
}

.whoplay .character .details b.exp:before {
    color: #ffa200;
    margin-right: 7px;
    content: "+"
}

.whoplay .character .details b.exp:after {
    font-size: 31px;
    font-family: "banicon";
    display: inline-block;
    content: "\e60d";
    margin-left: 7px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

.whoplay .character .details a {
    display: block;
    font-size: 16px;
    border: 2px solid #116d73;
    color: #116d73;
    text-transform: uppercase;
    padding: 12px 0;
    text-align: center;
    border-radius: 10px;
    background: #fff;
    position: relative;
    z-index: 4;
    max-width: 260px
}

.whoplay .character .details a strong {
    position: relative;
    z-index: 6;
    letter-spacing: 4px
}

.whoplay .character .details a:after {
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 5px;
    background: #116d73;
    z-index: 5;
    position: absolute;
    content: " "
}

.whoplay .character .details a:hover {
    color: #fff
}

.whoplay .character .details a:hover:after {
    width: 100%
}

.whoplay .character .image {
    text-align: center;
    line-height: 300px;
    margin-top: -28px;
    height: 300px
}

.whoplay .character .image img {
    max-width: 96%;
    max-height: 100%;
    height: auto;
    width: auto;
    vertical-align: bottom
}

.whoplay .prev {
    width: 14px;
    height: 24px;
    top: 107px;
    left: 0;
    position: absolute;
    color: #d8d8d8;
    font-size: 24px
}

.whoplay .prev:before {
    content: "l";
    font-family: "banicon"
}

.whoplay .prev:hover {
    width: 22px;
    left: -8px;
    color: #116d73
}

.whoplay .next {
    width: 14px;
    height: 24px;
    top: 107px;
    right: 0;
    position: absolute;
    color: #d8d8d8;
    font-size: 24px;
    text-align: right
}

.whoplay .next:before {
    content: "r";
    font-family: "banicon"
}

.whoplay .next:hover {
    right: -8px;
    width: 22px;
    color: #116d73
}

.whoplay-list {
    padding: 0 10px;
    height: 140px;
    margin: 0 -10px 52px -10px;
    border-top: 1px solid #88b6b9;
    border-bottom: 1px solid #88b6b9;
    text-align: center
}

.whoplay-list .container {
    width: 100%;
    padding: 0
}

.whoplay-list a {
    height: 192px;
    border: 1px solid #88b6b9;
    border-bottom: 0;
    width: 20%;
    background: #fff;
    float: left;
    color: #116d73;
    margin: -1px 0 0 0;
    position: relative;
    z-index: 3
}

.whoplay-list a:first-child {
    border-left-width: 0
}

.whoplay-list a:last-child {
    border-right-width: 0
}

.whoplay-list a + a {
    margin-left: -1px
}

.whoplay-list a.active {
    width: 21%;
    margin: -10px -0.5% -20px -0.5%;
    z-index: 1000;
    height: 212px;
    border-bottom: 1px solid #88b6b9;
    border-left-width: 1px;
    border-right-width: 1px;
    -webkit-box-shadow: 0 4px 14px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 4px 14px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 14px 2px rgba(0, 0, 0, 0.3)
}

.whoplay-list a .image {
    height: 139px;
    border-bottom: 1px solid #88b6b9;
    display: block;
    padding-top: 20px
}

.whoplay-list a.active .image {
    height: 159px;
    padding-top: 40px
}

.whoplay-list a .image img {
    height: 118px;
    max-width: 100%
}

.whoplay-list a b {
    display: block;
    text-align: center;
    margin-top: 19px
}

.opacity .whoplay-list a .image img {
    opacity: 0.3
}

.opacity .whoplay-list a.active .image img {
    opacity: 1
}

.news {
    position: relative;
    margin-bottom: 20px
}

.news .loading:after {
    color: #fff
}

.news:after {
    display: block;
    width: 100%;
    clear: both;
    height: 0;
    content: " "
}

.news .item {
    float: left;
    width: 50%;
    padding: 13px 60px 0 170px;
    position: relative;
    color: #fff;
    min-height: 200px
}

.news .item.show-comments {
    min-height: 200px;
    height: auto
}

.news .game .opinions {
    padding-top: 20px;
    border-top: 2px solid #1b7e84;
    margin-top: 20px;
    display: none
}

.news .game .opinions .when {
    color: #FDF4D1
}

.news .item .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 134px;
    height: 134px;
    border-radius: 67px;
    overflow: hidden
}

.news .item .image span {
    float: left;
    position: relative;
    left: 50%
}

.news .item .image img {
    height: 134px;
    position: relative;
    left: -50%
}

.news .item .date:after {
    content: " ";
    margin-left: 20px;
    margin-right: 20px;
    width: 2px;
    height: 15px;
    background: #1a7e84;
    display: inline-block;
    vertical-align: top
}

.news .item .content {
    margin: 15px 0 20px 0;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
    position: relative
}

.news.details .item {
    float: none;
    width: 100%;
    padding-bottom: 50px
}

.news.details .item .content {
    height: auto
}

.news.details .item .content.hidden {
    height: 100px
}

.news.details .item a.more {
    display: none
}

.news.details .item .content.hidden + a.more {
    display: inline
}

.news .item .content p {
    margin: 0;
    padding: 0
}

.news .item .content.hidden:after {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    content: " ";
    width: 100%;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-ellipsis-horizontal-sea.png) repeat-x top center;
    z-index: 3
}

.news .item .more, .news .item .comments, .news .item .content a {
    color: #fdf4d1
}

.news .item .more:hover, .news .item .comments:hover, .news .item .content a:hover {
    color: #80bd39
}

.news .item .more:after {
    font-family: "banicon";
    content: "r";
    display: inline-block;
    font-size: 11px;
    margin-left: 5px;
    margin-right: 20px
}

.news .item .comments:before {
    font-family: "banicon";
    content: "\e619";
    display: inline-block;
    font-size: 16px;
    margin-right: 7px;
    top: 3px;
    position: relative
}

.news .item .comments:hover:before {
    background-position: bottom center
}

.news .item .game .opinions li a.replies {
    display: none
}

.news .item .game .opinions li a.reply {
    position: absolute;
    top: 8px;
    right: 0;
    font-family: ProximaNova-Semibold
}

.previous-news {
    text-align: center
}

.previous-news a {
    display: block;
    font-family: ProximaNova-Semibold;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 20px 0 40px 0;
    background: #0f6368;
    position: relative
}

.previous-news a:hover {
    background: #0c4d51
}

.previous-news a:after {
    width: 10px;
    height: 6px;
    content: " ";
    position: absolute;
    left: 50%;
    top: 45px;
    margin-left: -5px;
    border-top: 6px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent
}

.recommended {
    padding: 100px 0;
    text-align: center;
    position: relative;
    max-width: 1920px;
    margin: 0 auto
}

.recommended:before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 59px;
    background: #88b6b9;
    content: " "
}

.recommended:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 59px;
    background: #88b6b9;
    content: " "
}

.recommended a {
    position: relative
}

.recommended .fk {
    width: 250px;
    height: 28px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/logo-fabrykakluczy.png) no-repeat top center;
    text-indent: -1000px;
    overflow: hidden;
    margin-left: 10%;
    margin-top: -5px;
    margin-right: -120px;
    float: left
}

.recommended .fg {
    width: 250px;
    height: 29px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/logo-fabrykagraczy.png) no-repeat top center;
    text-indent: -1000px;
    overflow: hidden;
    margin-left: 10%;
    margin-top: -5px;
    margin-right: -120px;
    float: left
}

.recommended .sedoc {
    width: 143px;
    height: 59px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/logo-sedoc.png) no-repeat top center;
    text-indent: -1000px;
    overflow: hidden;
    margin-right: 9%;
    margin-top: -19px;
    float: right
}

.recommended .vikings {
    width: 250px;
    height: 96px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/logo-gamevikings.png) no-repeat top center;
    text-indent: -1000px;
    overflow: hidden;
    margin-left: 10%;
    margin-top: -40px;
    margin-right: -120px;
    float: left
}

.recommended .fk:hover, .recommended .sedoc:hover, .recommended .fg:hover, .recommended .vikings:hover {
    background-position: bottom center
}

.opacity .recommended a:hover, .opacity .recommended a {
    background: none
}

.opacity .recommended a:before, .opacity .recommended a:after {
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    background-position: top center;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}

.opacity .recommended a:after {
    opacity: 0;
    background-position: bottom center
}

.opacity .recommended a:hover:before {
    opacity: 0
}

.opacity .recommended a:hover:after {
    opacity: 1
}

.opacity .recommended a.fg:after, .opacity .recommended a.fg:before {
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/logo-fabrykagraczy.png)
}

.opacity .recommended a.sedoc:after, .opacity .recommended a.sedoc:before {
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/logo-sedoc.png)
}

.opacity .recommended a.vikings:after, .opacity .recommended a.vikings:before {
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/logo-gamevikings.png)
}

footer {
    text-align: center
}

footer .container {
    max-width: 1920px
}

footer .g2a {
    vertical-align: middle;
    margin-top: 40px
}

footer .service {
    color: #fff;
    letter-spacing: 6px;
    font-size: 16px;
    margin-top: 46px;
    display: inline-block;
    margin-left: 60px;
    vertical-align: middle
}

footer .trustpilot-widget {
    display: inline-block;
    margin-top: 15px;
    margin-left: 60px
}

footer .social {
    float: left;
    list-style: none;
    border-left: 1px solid #414141
}

footer .social li {
    float: left;
    border-right: 1px solid #414141
}

footer .social li a {
    display: block;
    height: 120px;
    padding: 42px 0 0 0;
    width: 90px;
    color: #fff;
    font-size: 30px;
    line-height: 30px;
    text-align: center
}

footer .social li a i {
    vertical-align: middle;
    position: relative
}

footer .banicon-twitter {
    font-size: 23px;
    top: 2px;
    left: 2px
}

footer .banicon-youtube {
    font-size: 27px;
    top: 3px
}

footer .menu {
    float: right;
    list-style: none;
    height: 120px;
    border-left: 1px solid #414141
}

footer .menu li {
    float: left;
    border-right: 1px solid #414141
}

footer .menu li a {
    display: block;
    height: 120px;
    padding: 55px 28px 0 28px;
    font-family: ProximaNova-Bold;
    color: #fff
}

footer li a:hover {
    background: #414141;
    color: #fff
}

footer .menu li a.half {
    height: 60px;
    padding-top: 35px
}

footer .menu li a.half + a.half {
    padding-top: 5px
}

footer .copyright {
    padding-top: 18px;
    }

footer .copyright i {
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 5px
}

#findgame {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-findgame.jpg) no-repeat center 0;
    background-size: cover;
    padding-top: 50px;
    margin-top: -50px
}

#findgame .header {
    padding: 58px 0
}

.letters {
    list-style: none;
    text-align: justify;
    float: left;
    width: 62.58%;
    margin-top: 5px;
    height: 35px
}

.letters:after {
    display: inline-block
}

.letters li {
    display: inline-block;
    width: 3.2%;
    max-width: 36px
}

.letters li a {
    display: block;
    text-align: center;
    border: 1px solid #116D73;
    text-transform: uppercase;
    border-radius: 7px;
    font-size: 15px;
    font-family: ProximaNova-Bold;
    height: 35px;
    line-height: 35px;
    background: #fff;
    color: #116D73
}

.letters li a:hover {
    color: #80bd39;
    border-color: #80bd39
}

.find-game {
    float: right;
    width: 35.04%;
    border: 1px solid #116D73;
    border-radius: 10px;
    height: 45px;
    position: relative;
    padding-right: 250px;
    background: #fff;
    margin: 0 0 70px 0
}

.find-game .text {
    border: 0;
    height: 43px;
    width: 100%;
    color: #116d73;
    padding: 10px 0;
    margin-left: 20px
}

.find-game button {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    background: #116d73;
    height: 43px;
    border: 0;
    z-index: 5998;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px
}

.find-game button:hover {
    background: #0c4d51
}

.find-game .category {
    position: absolute;
    right: 64px;
    width: 186px;
    top: -1px;
    border: 1px solid #116D73;
    height: 45px;
    z-index: 5997;
    cursor: pointer;
    overflow: hidden;
    padding-top: 43px;
    background: #fff
}

.find-game .category label.checked {
    position: absolute;
    top: 0;
    left: 0
}

.find-game .category label.checked:after {
    content: "\e602";
    font-family: "banicon";
    position: absolute;
    width: 13px;
    height: 7px;
    right: 0;
    top: 18px;
    font-size: 7px;
    color: #116d73;
    display: block
}

.find-game .category label.checked:hover:after {
    color: #80bd39
}

.find-game .category.open label.checked:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.find-game .category label {
    display: block;
    height: 43px;
    padding: 13px 0 0 25px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding-right: 26px
}

.find-game .category label:hover {
    color: #82be38
}

.find-game .category label input {
    position: absolute;
    left: -100px
}

.find-game .category.open {
    height: 174px
}

.gametype {
    list-style: none;
    height: 112px;
    border-bottom: 1px solid #2a878e;
    margin-right: -9px
}

.gametype:before {
    position: absolute;
    top: 111px;
    left: 0;
    width: 100%;
    height: 1px;
    content: " ";
    background: #2a878e
}

.gametype.small {
    height: 99px
}

.gametype.small:before {
    top: 98px
}

.gametype li {
    width: 10%;
    float: left
}

.gametype li + li {
    margin-left: -1px
}

.gametype li a {
    display: block;
    border: 1px solid #2a878e;
    background: #126c74;
    height: 173px;
    position: relative;
    z-index: 2;
    text-align: center;
    color: #a6bfc1
}

.gametype.small li a {
    height: 146px
}

.gametype li + li a {
    border-width: 1px 1px 1px 1px
}

.gametype li a.active {
    background: #0c4d51;
    color: #fff
}

.gametype li a:hover {
    z-index: 3333;
    padding: 10px;
    margin: -10px;
    border-width: 1px;
    height: 193px;
    color: #fff;
    background: #0c4d51;
    -webkit-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3)
}

.gametype.small li a:hover {
    height: 166px
}

.gametype li a .banicon {
    margin-top: 40px;
    font-size: 32px;
    display: block
}

.gametype.small li a .banicon {
    margin-top: 32px
}

.gametype.cs li {
    width: 11.111%
}

.gametype.cs li a .banicon-cs-pistols, .gametype.cs li a .banicon-cs-guns, .gametype.cs li a .banicon-cs-heavy {
    font-size: 26px;
    margin-top: 38px
}

.gametype.cs li a b {
    font-family: ProximaNova-Semibold
}

.gametype li a b {
    display: block;
    border-top: 1px solid #2a878e;
    font-size: 14px;
    padding-top: 22px;
    margin-top: 38px;
    letter-spacing: 1px
}

.gametype.small li a b {
    padding-top: 15px;
    margin-top: 33px
}

.gametype li a:hover b {
    margin: 48px -10px 0 -10px
}

.gametype.small li a:hover b {
    margin-top: 43px
}

.games-options {
    float: right;
    height: 31px;
    background: #fff;
    position: relative;
    z-index: 3334;
    margin-top: -100px;
    background: #fff;
    padding-left: 27px
}

.games-options a {
    font-size: 14px;
    color: #116d73;
    vertical-align: top
}

.games-options a .banicon {
    font-size: 24px;
    color: #cbcbcb;
    margin-right: 13px;
    position: relative;
    top: 4px
}

.games-options a:hover .banicon, .games-options a.active .banicon {
    color: #80bd39
}

.games-options .order {
    display: inline-block;
    width: 266px;
    max-width: 100%;
    vertical-align: top;
    position: relative;
    border: 1px solid #88b6b9;
    border-radius: 8px;
    overflow: hidden;
    letter-spacing: 1px;
    margin-left: 13px
}

.games-options .order .list {
    height: 0;
    width: 100%;
    overflow: hidden;
    background: #fff;
    position: relative
}

.games-options .order .list strong {
    font-family: ProximaNova-Regular;
    color: #80bd39
}

.games-options .order.open .list {
    height: 235px
}

.games-options .order a {
    display: block;
    height: 29px;
    padding: 7px 7px 7px 20px;
    width: 100%
}

.games-options .order a:first-child {
    border-top: 1px solid #88b6b9;
    padding-top: 15px;
    height: 37px
}

.games-options .order .list a.active strong {
    color: #116D73;
    font-family: ProximaNova-Semibold
}

.games-options .order .list a.active:hover strong {
    color: #80bd39
}

.games-options .order a:hover {
    color: #80bd39
}

.games-options .order .list .sep {
    display: block;
    height: 1px;
    background: #88b6b9;
    margin: 10px 20px
}

.games-options .order .selected {
    display: block;
    width: 100%;
    height: 29px;
    padding: 8px 42px 6px 20px;
    font-size: 14px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer
}

.games-options .order .selected:before {
    width: 42px;
    height: 29px;
    top: 0;
    right: 0;
    border-left: 1px solid #88b6b9;
    content: " ";
    position: absolute
}

.games-options .order .selected:after {
    top: 12px;
    right: 14px;
    display: block;
    font-family: "banicon";
    content: "\e602";
    font-size: 7px;
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}

.games-options .order.open .selected:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.games-options .order .selected:hover:after {
    color: #80bd39
}

.games-options .with-offer {
    padding: 10px 40px;
    background: #528714;
    border-radius: 8px;
    display: inline-block;
    height: 32px;
    color: #fff;
    font-family: ProximaNova-Bold;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 22px 0 15px;
    vertical-align: top
}

.games-options .my-games, .games-options .browser-games, .games-options .download-games, .games-options .mobile-games {
    position: relative;
    margin-right: 9px;
    top: 1px;
    vertical-align: top;
    display: inline-block
}

.games-options .my-games:before, .games-options .browser-games:before, .games-options .download-games:before, .games-options .mobile-games:before {
    opacity: 1;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 39px;
    height: 39px;
    border: 2px solid #28b4a2;
    border-radius: 50%;
    content: " ";
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}

.games-options .browser-games:before {
    border: 2px solid #8f8fce
}

.games-options .download-games:before {
    border: 2px solid #da72a5
}

.games-options .mobile-games:before {
    border: 2px solid #ffa200
}

.games-options .my-games img, .games-options .browser-games img, .games-options .download-games img, .games-options .mobile-games img {
    width: 29px;
    height: 29px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}

.games-options .inactive img {
    opacity: 0.8
}

.games-options .inactive:before {
    opacity: 0
}

.games-options .with-offer.inactive {
    background: #80bd39
}

.games-options .hint {
    position: absolute;
    top: -50px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    left: 14px
}

.games-options a:hover .hint {
    opacity: 0.9;
    z-index: 99999;
    visibility: visible
}

.games-options .hint b {
    font-family: ProximaNova-Semibold;
    font-size: 14px;
    margin-left: -50%;
    display: inline-block;
    height: 37px;
    padding: 11px 24px;
    line-height: 14px;
    background: #3f4141;
    color: #fff;
    position: relative
}

.games-options .hint b:before {
    position: absolute;
    bottom: -5px;
    width: 11px;
    left: 50%;
    margin-left: -5px;
    content: " ";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #3f4141
}

.games-options .sep {
    display: inline-block;
    width: 1px;
    height: 32px;
    background: #88b6b9;
    vertical-align: top;
    margin: 0 8px 0 10px
}

.games {
    padding: 0 0 100px 0;
    border-top: 1px solid #94c3c6;
    list-style: none
}

.games li {
    padding: 40px 0 41px 0;
    border-bottom: 1px solid #94c3c6;
    border-top: 1px solid #94c3c6;
    margin-top: -1px;
    position: relative;
    z-index: 3
}

.games li:hover {
    background: #fff;
    z-index: 3333
}

.games > li:before {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 100%;
    content: " ";
    border-bottom: 2px solid #106d74;
    border-top: 2px solid #106d74;
    opacity: 0
}

.games li:hover:before {
    opacity: 1
}

.games li:after {
    width: 100%;
    content: " ";
    display: block;
    clear: both
}

.games li .box {
    max-width: 1920px;
    position: relative;
    padding: 0 100px;
    margin: 0 auto;
    z-index: 5
}

.games li .box:after {
    clear: both;
    display: block;
    height: 0;
    width: 100%;
    content: " "
}

.games li .image, .games li .description, .games li .play, .games li .awards {
    float: left;
    height: 93px
}

.games li .image {
    width: 17.6%;
    padding-right: 4%;
    text-align: center;
    line-height: 93px;
    position: relative
}

.games li .image img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle
}

.games li .image .type {
    position: absolute;
    top: -3px;
    right: -13px;
    width: 26px;
    background: #fff;
    line-height: 26px
}

.games li .image .type .game-type {
    display: inline-block;
    width: 26px;
    height: 26px;
    border: 1px solid #89B6B9;
    border-radius: 6px;
    vertical-align: middle;
    margin-bottom: 11px;
    color: #94c3c6;
    font-size: 15px;
    text-align: center;
    position: relative
}

.games li .image .type .game-type i {
    top: 1px;
    position: relative
}

.games li .image .type .game-type .banicon-game-scifi {
    font-size: 12px;
    top: 0
}

.games li .image .type .game-type .hint {
    position: absolute;
    top: -1px;
    right: 40px;
    font-size: 14px;
    font-family: ProximaNova-Regular;
    color: #126d70;
    background: #ffffff;
    padding: 0 20px;
    line-height: 24px;
    height: 26px;
    border: 1px solid #116d73;
    white-space: nowrap;
    display: none
}

.games li .image .type .game-type .hint:before {
    position: absolute;
    right: -7px;
    width: 6px;
    height: 14px;
    top: 5px;
    content: " ";
    border-left: 6px solid #116d73;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent
}

.games li .image .type .game-type .hint:after {
    position: absolute;
    right: -6px;
    width: 6px;
    height: 12px;
    top: 6px;
    content: " ";
    border-left: 6px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent
}

.games li .image .type .game-type:hover {
    border-color: #116d73;
    color: #116d73
}

.games li .image .type .game-type:hover .hint {
    display: block
}

.opacity .games li .image .type .game-type .hint {
    opacity: 0;
    visibility: hidden
}

.opacity .games li .image .type .game-type:hover .hint {
    opacity: 1;
    visibility: visible
}

.games li .description {
    width: 40.24%;
    padding: 0 4%;
    overflow: hidden;
    border-right: 1px solid #94c3c6;
    border-left: 1px solid #94c3c6;
    height: auto
}

.games li .description b.name, .games li .description a.name {
    font-size: 20px;
    display: block;
    line-height: 24px;
    font-family: ProximaNova-Bold;
    color: #116d73
}

.games li .description p.text {
    margin: 16px 0;
    font-size: 16px
}

.games li .description a.comments {
    font-size: 14px;
    color: #80bd39
}

.games li .description a.comments .banicon {
    font-size: 16px;
    position: relative;
    top: 4px
}

.games li .description a.comments span {
    margin-right: 10px
}

.games li .description a.comments:after {
    font-family: "banicon";
    content: "\e602";
    font-size: 6px;
    margin-left: 10px;
    position: relative;
    top: -1px
}

.games li .description a.comments.hide-comments:after {
    content: "\e60c"
}

.games li .description a:hover {
    color: #3abea6
}

.games li .description .game {
    margin: 20px 0 0 0;
    padding: 20px 0 0 0;
    border-top: 1px solid #88b6b9
}

.games li .description .game .opinions {
    display: none
}

.games li .description .game .opinions li {
    border: 0;
    margin-top: 0
}

.games li .play {
    width: 23.58%;
    padding: 2px 4% 0 4%
}

.games li .play a {
    display: block;
    font-size: 16px;
    border: 2px solid #116d73;
    color: #116d73;
    text-transform: uppercase;
    padding: 12px 0;
    border-radius: 10px;
    position: relative;
    letter-spacing: 3px;
    z-index: 3;
    text-align: center;
    margin-top: 15px
}

.games li .play a strong {
    position: relative;
    z-index: 6
}

.games li .play a:after {
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 5px;
    background: #116d73;
    z-index: 5;
    position: absolute;
    content: " "
}

.games li .play a:hover {
    color: #fff
}

.games li .play a:hover:after {
    width: 100%
}

.games li .play .status {
    display: inline-block;
    font-size: 14px;
    margin-top: 2px;
    vertical-align: top
}

.games li .play .vote {
    width: 140px;
    height: 16px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-vote.png) repeat-x top left;
    background-size: 28px auto;
    position: relative;
    display: inline-block;
    margin: 0 0 3px -5px;
    vertical-align: top
}

.games li .play .vote .bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 0;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-vote.png) repeat-x bottom left;
    background-size: 28px auto;
    z-index: 120
}

.games li .awards {
    width: 18.58%;
    border-right: 0;
    line-height: 93px;
    padding-left: 4%;
    text-align: justify;
    font-size: 28px;
    color: #80bd39;
    font-family: ProximaNova-Bold;
    position: static;
    max-width: 280px;
    float: right
}

.games li .awards:after {
    width: 100%;
    display: inline-block;
    height: 0;
    content: " "
}

.games li .awards:before {
    width: 1px;
    top: 0;
    margin-left: -3.4%;
    height: 100%;
    background: #94c3c6;
    position: absolute;
    content: " "
}

.games li .awards b.points {
    font-size: 26px;
    color: #80bd39;
    display: inline-block;
    vertical-align: top;
    margin-top: -18px;
    min-width: 40px;
    text-align: right
}

.games li .awards b.points:after {
    font-size: 23px;
    content: "\e601";
    display: inline-block;
    font-family: "banicon";
    margin-left: 9px;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-right: 2px
}

.games li .awards b.exp {
    font-size: 26px;
    float: right;
    margin-top: -73px;
    color: #ffa200;
    min-width: 65px;
    text-align: right
}

.games li .awards b.exp:after {
    font-size: 24px;
    content: "\e60d";
    display: inline-block;
    font-family: "banicon";
    margin-left: 7px;
    vertical-align: middle;
    margin-bottom: 3px
}

.games li .awards .award {
    display: inline-block;
    width: 56px;
    height: 56px;
    border: 2px solid #f29437;
    border-radius: 100%;
    text-align: center;
    overflow: hidden;
    vertical-align: middle
}

.games li .awards .award.none {
    border: 2px solid #116d73;
    line-height: 52px
}

.games li .awards .award.none:before {
    content: "\e950";
    font-family: banicon;
    color: #116d73;
    vertical-align: middle;
    font-size: 18px
}

.games li .awards .award span {
    position: relative;
    left: 50%;
    float: left;
    height: 78px
}

.games li .awards span img {
    height: 100%;
    width: auto;
    position: relative;
    left: -50%
}

.games li .awards .banicon-logo-small {
    font-size: 36px;
    color: #87b5b8;
    position: relative;
    top: 3px;
    margin-left: 36%
}

.games.thumbnails li .awards .banicon-logo-small {
    position: absolute;
    left: 50%;
    margin-left: -18px
}

.games.thumbnails {
    max-width: 1920px;
    position: relative;
    padding: 0 90px;
    border-top: 0;
    text-align: justify;
    padding-bottom: 100px;
    margin: 0 auto
}

.games.thumbnails li .description .game, .games.thumbnails li .description p.text, .games.thumbnails li .description a.comments, .games.thumbnails li .awards:before {
    display: none
}

.games.thumbnails li {
    width: 16.66%;
    float: left;
    border: 0;
    padding: 0;
    margin: 0 0 26px 0;
    height: 342px
}

.games.thumbnails li:before {
    height: 342px;
    left: 9px;
    right: 9px;
    top: -1px;
    width: auto;
    border: 2px solid #106D74
}

.games.thumbnails li:hover:before {
    height: 407px
}

.games.thumbnails li .box {
    border: 1px solid #88b6b9;
    height: 342px;
    margin: 0 10px;
    padding: 0;
    width: auto;
    background: #fff;
    overflow: hidden
}

.games.thumbnails li:hover .box {
    height: 405px;
    margin-bottom: -63px;
    border-color: #116d73
}

.games.thumbnails li .description {
    border-left: 0;
    border-right: 0;
    width: 100%;
    padding: 0;
    height: 68px;
    text-align: center;
    float: none;
    display: table
}

.games.thumbnails li .description b.name {
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    padding: 0 5px;
    white-space: normal
}

.games.thumbnails li .image {
    width: 100%;
    padding: 25px 20px;
    height: 129px;
    float: none;
    border-bottom: 1px solid #88b6b9;
    margin: 0 0 12px 0;
    line-height: 70px
}

.games.thumbnails li .image .type {
    top: 115px;
    right: 0;
    width: 100%;
    background: transparent
}

.games.thumbnails li .image .type .game-type {
    margin: 0 8px;
    background: #fff
}

.games.thumbnails li .image .type .game-type .hint {
    display: block;
    top: -38px;
    right: -38px;
    width: 100px
}

.games.thumbnails li .image .type .game-type .hint:before {
    right: 42px;
    width: 14px;
    height: 6px;
    top: 25px;
    content: " ";
    border-top: 6px solid #116D73;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent
}

.games.thumbnails li .image .type .game-type .hint:after {
    right: 42px;
    width: 12px;
    height: 6px;
    top: 24px;
    content: " ";
    border-top: 6px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent
}

.games.thumbnails li .play {
    position: absolute;
    top: 284px;
    left: 0;
    width: 100%;
    text-align: center
}

.games.thumbnails li .play .vote {
    margin-left: 0;
    width: 110px;
    height: 13px;
    background-size: 22px 26px
}

.games.thumbnails li .play .vote .bar {
    height: 13px;
    background-size: 22px 26px
}

.games.thumbnails li .play a {
    padding: 9px 0;
    margin: 37px 11px 0 11px
}

.opacity .games.thumbnails li .play a {
    opacity: 0
}

.opacity .games.thumbnails li:hover .play a {
    opacity: 1
}

.games.thumbnails li .awards {
    width: 100%;
    float: none;
    padding: 0 44.5% 0 0;
    font-size: 26px;
    line-height: 45px;
    height: 48px;
    position: relative;
    text-align: right
}

.games.thumbnails li .awards .award {
    width: 45px;
    height: 45px
}

.games.thumbnails li .awards .plus {
    margin: 0 14px 0 8px
}

.games.thumbnails li .awards b.points, .games.thumbnails li .awards b.exp {
    font-size: 18px;
    margin: 0;
    position: absolute;
    top: 0;
    left: 55.5%;
    line-height: 22px;
    min-width: auto;
    text-align: left
}

.games.thumbnails li .awards b.exp {
    top: 25px
}

.games.thumbnails li .awards b.points:after, .games.thumbnails li .awards b.exp:after {
    font-size: 17px
}

.game-bg {
    background-size: auto 360px;
    background-position: top center;
    background-repeat: repeat-x
}

.game-header .game-name {
    width: auto;
    overflow: hidden
}

.game-header .game-name a {
    display: inline;
    float: none;
    border: 0;
    padding: 0;
    margin: 0;
    letter-spacing: 0;
    background: transparent;
    position: static;
    font-size: 26px;
    text-transform: none
}

.game-header .game-name a:before, .game-header .game-name a:after {
    display: none
}

.game-header .game-name b:after {
    margin-left: 30px
}

.game-header .game-share {
    float: right;
    margin: 0 0 0 30px
}

.game-header .game-share a {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 0;
    margin-right: 0;
    margin-left: 8px
}

.game-header .game-share a.fb-share {
    height: 28px;
    text-transform: none;
    font-size: 12px;
    background: #4e69ac;
    border: 0;
    color: #fff;
    padding: 9px 27px 0 55px;
    letter-spacing: 0;
    border-radius: 5px;
    overflow: hidden
}

.game-header .game-share a.fb-share strong {
    font-family: ProximaNova-Semibold
}

.game-header .game-share a:before {
    display: none
}

.game-header .game-share a.fb-share:before {
    display: block;
    top: 0;
    left: 0;
    width: 34px;
    height: 28px;
    border-right: 1px solid #6a87cc;
    font-family: "banicon";
    background: transparent;
    font-size: 15px;
    content: "\e91b";
    text-align: center;
    padding-top: 6px;
    z-index: 6
}

.game-header .game-share a.fb-share:after {
    background: #3e5b99;
    border-radius: 5px
}

.game-header .game-share a.fav {
    font-size: 11px;
    width: 87px;
    height: 28px;
    padding: 8px 0 0 0;
    text-align: center;
    margin-top: 0;
    border-radius: 5px
}

.game-header .game-share a.fav:after {
    border-radius: 0
}

.game-header .game-share .fb-like {
    vertical-align: middle
}

.game-header .game-type, .game .game-type {
    display: inline-block;
    width: 29px;
    height: 29px;
    border: 1px solid #89b6b9;
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 7px;
    position: relative;
    font-size: 17px;
    text-align: center;
    color: #87b5b8;
    line-height: 29px;
    background: #fff
}

.game-header .game-type .banicon-game-scifi, .game .game-type .banicon-game-scifi {
    font-size: 14px
}

.game-header .game-type .banicon-game-rpg, .game .game-type .banicon-game-rpg {
    font-size: 16px
}

.game-header .game-type:hover, .game .game-type:hover {
    color: #126d70
}

.game-header a:first-child .game-type {
    margin-left: 20px
}

.game-header .game-type:after, .game .game-type:after {
    position: absolute;
    content: " ";
    width: 21px;
    height: 16px;
    left: 4px;
    top: 5px
}

.game-header .game-type:before, .game .game-type:before {
    position: absolute;
    top: -1px;
    left: 35px;
    content: attr(title);
    font-size: 14px;
    font-family: ProximaNova-Regular;
    color: #126d70;
    display: none;
    background: #ffffff;
    padding: 5px 15px;
    height: 29px;
    border: 1px solid #126d70;
    white-space: nowrap;
    line-height: 16px
}

.game-header .game-type:hover:before, .game .game-type:hover:before {
    display: block;
    z-index: 9999
}

.game {
    margin: 0 0 70px 0
}

.game:after, .game .col-gameplay:before, .game .players:before {
    width: 100%;
    display: block;
    clear: both;
    height: 0;
    content: " "
}

.game .col-top, .game .col-tasks, .game .col-gameplay, .game .col-desc, .game .col-screens, .game .col-help, .game .col-players, .col-opinions, .col-requirements, .col-similar {
    float: left;
    margin-bottom: 56px
}

.game .col-top, .game .col-tasks, .game .col-gameplay, .game .col-opinions {
    width: 34.37%;
    clear: both
}

.game .col-top {
    min-width: 550px
}

.game .col-desc, .game .col-requirements, .game .col-help {
    width: 35.45%;
    padding: 0 2.73%
}

.game .col-screens, .game .col-players, .game .col-similar {
    width: 30.18%
}

.game .col-tasks, .game .description, .game .screens {
    background: #fff
}

.game .col-screens-2 {
    width: 65.58%;
    padding-left: 2.73%;
    float: left
}

.game .logo {
    line-height: 114px;
    border: 1px solid #89b6b9;
    padding: 20px;
    background: #fff;
    height: 156px;
    float: left;
    width: 47%;
    text-align: center
}

.game .logo img {
    max-width: 216px;
    max-height: 100px;
    vertical-align: middle
}

.game .options {
    width: 48.5%;
    float: right;
    padding-top: 6px
}

.game .options a.play {
    display: block;
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    padding: 12px 0;
    border-radius: 10px;
    letter-spacing: 3px;
    text-align: center;
    margin-top: 32px;
    background: #ffa200;
    font-family: ProximaNova-Bold
}

.game .options a.play:hover {
    background: #ff8500
}

.game a.exchange {
    display: block;
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    padding: 12px 0;
    border-radius: 10px;
    letter-spacing: 3px;
    text-align: center;
    background: #80bd39;
    width: 100%;
    margin-top: 17px;
    font-family: ProximaNova-Bold
}

.game a.exchange:hover {
    background: #679c2a
}

.game .status {
    float: right;
    width: auto;
    font-size: 15px;
    margin-top: 3px
}

.game .vote {
    width: 165px;
    height: 19px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-vote.png) repeat-x top left;
    position: relative
}

.game .vote .bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 19px;
    width: 0;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-vote.png) repeat-x bottom left;
    z-index: 120
}

.game .vote:hover .bar {
    display: none
}

.game .vote a {
    position: absolute;
    top: 0;
    left: 0;
    height: 19px
}

.game .vote a.vote-1 {
    width: 20%;
    z-index: 100
}

.game .vote a.vote-2 {
    width: 40%;
    z-index: 80
}

.game .vote a.vote-3 {
    width: 60%;
    z-index: 60
}

.game .vote a.vote-4 {
    width: 80%;
    z-index: 40
}

.game .vote a.vote-5 {
    width: 100%;
    z-index: 20
}

.game .vote a:hover {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-vote.png) repeat-x bottom left
}

.game .tasks {
    position: relative
}

.game .tasks .title {
    background: #126c74;
    color: #fff;
    padding: 20px 25px;
    font-size: 20px;
    line-height: 18px
}

.game .tasks .title .points {
    float: right;
    font-size: 23px;
    color: #fbe12b
}

.game .tasks .title .points:before {
    content: "do zgarnięcia:";
    font-size: 14px;
    font-family: ProximaNova-Regular;
    margin-right: 10px;
    color: #fff;
    vertical-align: top
}

.game .tasks .title .points:after {
    font-size: 18px;
    display: inline-block;
    font-family: "banicon";
    content: "\e601";
    margin-left: 4px;
    vertical-align: middle;
    margin-bottom: -8px;
    vertical-align: middle;
    position: relative;
    top: -5px
}

.game .tasks ul {
    list-style: none
}

.game .tasks li {
    border: 1px solid #89b6b9;
    border-top: 0;
    line-height: 52px
}

.game .tasks li + li {
    line-height: 22px
}

.game .tasks li a {
    opacity: 0.5;
    display: block;
    padding: 19px 25px;
    color: #116d73
}

.game .tasks li.active a {
    opacity: 1
}

.game .tasks li:after {
    width: 100%;
    content: " ";
    display: block;
    clear: both;
    height: 0
}

.game .tasks li a.opened {
    background: #e9f0f1;
    color: #116D73 !important
}

.game .tasks li.complete > a, .game .tasks li.failed > a {
    padding-left: 60px;
    position: relative;
    color: #88b6b9
}

.game .tasks li.complete > a:before {
    content: " ";
    width: 16px;
    height: 18px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/ico-complete.png) no-repeat 0 0;
    background-size: cover;
    position: absolute;
    left: 27px;
    top: 50%;
    margin-top: -9px
}

.game .tasks li.failed > a:before {
    content: " ";
    width: 18px;
    height: 18px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/ico-failed.png) no-repeat 0 0;
    background-size: cover;
    position: absolute;
    left: 26px;
    top: 50%;
    margin-top: -9px
}

.game .tasks li .start-up {
    display: table-cell;
    float: none;
    overflow: hidden;
    width: auto;
    height: 52px;
    line-height: 18px;
    vertical-align: middle
}

.game .tasks li .award {
    float: right;
    width: 170px;
    text-align: right
}

.game .tasks li .award img {
    width: 52px;
    height: 52px;
    border: 1px solid #8dbbec;
    border-radius: 100%;
    vertical-align: middle
}

.game .tasks li .award .points {
    font-size: 20px;
    color: #80bd39;
    position: relative
}

.game .tasks li .award .points:after {
    font-size: 16px;
    display: inline-block;
    font-family: "banicon";
    content: "\e601";
    margin-left: 5px;
    vertical-align: middle;
    margin-bottom: 3px
}

.game .tasks li .award .exp {
    font-size: 20px;
    color: #ffa200;
    position: relative
}

.game .tasks li .award b.exp:before {
    color: #ffa200;
    margin: 0 7px;
    content: "+";
    font-size: 17px
}

.game .tasks li .award b.exp:after {
    font-size: 19px;
    display: inline-block;
    font-family: "banicon";
    content: "\e60d";
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    line-height: 19px
}

.game .tasks li .task-box {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    background: red;
    line-height: 22px;
    z-index: 1000;
    background: #0b5c60;
    padding: 25px 30px 0 30px;
    color: #fff;
    font-size: 14px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3)
}

.game .tasks li a.opened + .task-box {
    display: block
}

.game .tasks li .task-box strong {
    font-size: 16px;
    display: block;
    margin-bottom: 70px
}

.game .tasks li + li .task-box strong {
    margin-bottom: 0
}

.game .tasks li .task-box a.close {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    height: 34px;
    background: #1a797f;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 6px 0;
    font-family: ProximaNova-Bold;
    font-size: 12px
}

.game .tasks li .task-box .pointer {
    position: absolute;
    left: -12px;
    width: 12px;
    height: 26px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 12px solid #0b5c60
}

.game .tasks li .pointer {
    top: 90px
}

.game .tasks li + li .pointer {
    top: 174px
}

.game .tasks li + li + li .pointer {
    top: 248px
}

.game .tasks li + li + li + li .pointer {
    top: 304px
}

.game .tasks li + li + li + li + li .pointer {
    top: 360px
}

.game .tasks li .task-box .next-task {
    border: 3px solid #fff;
    color: #fff;
    font-family: ProximaNova-Semibold;
    text-transform: uppercase;
    margin: 0 auto 10px auto;
    width: 200px;
    max-width: 100%;
    text-align: center;
    padding: 20px 0;
    font-size: 24px
}

.game .tasks li .task-box .next-task.failed {
    border-color: #ff6e75;
    color: #ff6e75
}

.game .tasks li .task-box .next-task:before {
    content: "\e903";
    font-family: "banicon";
    font-size: 30px;
    display: block;
    margin-bottom: 20px
}

.game .tasks li .task-box .next-task.failed:before {
    content: "\e92b"
}

.game .tasks input.text {
    display: block;
    padding: 7px;
    border: 0;
    border-radius: 5px;
    font-family: ProximaNova-Bold;
    font-size: 16px;
    color: #116d73;
    background: #fff;
    text-align: center;
    margin: 5px 0;
    min-width: 320px;
    max-width: 100%
}

.game .tasks input.btn {
    display: block;
    padding: 10px 0;
    border: 0;
    border-radius: 5px;
    font-family: ProximaNova-Bold;
    font-size: 12px;
    color: #fff;
    background: #80bd39;
    text-align: center;
    margin-top: 10px;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 3px
}

.game .tasks input.btn:hover {
    background: #679c2a
}

.game .tasks li .task-box p {
    font-size: 14px;
    margin: 5px 0 0 0;
    color: #fbe12b;
    min-width: 440px;
    max-width: 100%;
    height: 42px
}

.game .tasks li .task-box .time-left {
    padding: 20px 0;
    border-top: 1px solid #1a797f;
    border-bottom: 1px solid #1a797f;
    font-size: 14px;
    color: #60b1b6
}

.game .tasks li .task-box .time-left div {
    float: right
}

.game .tasks li .task-box .time-left span {
    display: inline-block;
    font-size: 12px;
    text-align: center;
    width: 34px;
    line-height: 15px;
    position: relative
}

.game .tasks li .task-box .time-left span b {
    font-size: 16px;
    color: #fff;
    display: block;
    text-align: center
}

.game .tasks li .task-box .time-left span + span:before {
    content: ":";
    font-size: 16px;
    color: #fff;
    position: absolute;
    left: -2px;
    top: 0
}

.game .tasks li .task-box .time-left.expired span b, .game .tasks li .task-box .time-left.expired span + span:before {
    color: #ff6e75
}

.game .tasks li .task-box .time-expired {
    color: #ff6e75;
    margin: 15px 0;
    height: auto
}

.game .tasks .inputfile {
    position: relative;
    overflow: hidden;
    width: 143px;
    float: right;
    display: block;
    padding: 5px 0;
    border: 0;
    border-radius: 5px;
    font-family: ProximaNova-Bold;
    font-size: 12px;
    color: #fff;
    background: #80bd39;
    text-align: center;
    margin-top: 7px;
    text-transform: uppercase;
    letter-spacing: 3px
}

.game .tasks .inputfile:hover {
    background: #679c2a
}

.game .tasks .inputfile input {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 7;
    font-size: 200px
}

.game .tasks .waiting {
    font-size: 14px;
    margin-top: 45px
}

.game .tasks .waiting .left {
    color: #60b1b6
}

.game .tasks .waiting b.right {
    color: #80bd39;
    float: right
}

#filedrag {
    padding: 50px 0 50px 55px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-filedrag.png) no-repeat left center;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    position: relative
}

#filedrag input {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 7;
    font-size: 200px
}

#filedrag small {
    display: block;
    color: #60b1b6;
    font-size: 12px;
    margin: 0;
    padding: 0
}

#filedrag.loading {
    height: 144px;
    overflow: hidden;
    padding: 144px 0 0 0;
    background: url(https://bananatic-15199.kxcdn.com/de/images/ico-loading.gif) no-repeat center center
}

#accept-screen {
    height: 110px
}

#accept-screen a {
    padding: 0;
    cursor: zoom-in
}

#accept-screen img {
    float: left;
    margin-right: 20px;
    max-height: 110px;
    width: auto;
    border-radius: 5px;
    max-width: 60%
}

#accept-screen div {
    width: auto;
    overflow: hidden
}

#accept-screen div input {
    width: 100%
}

#accept-screen div input + input {
    margin-top: 25px;
    background-color: #FFA200
}

.game .header {
    padding: 18px 0
}

.game .header b {
    font-size: 20px
}

.game .header.bordered {
    background: #fff;
    border: 1px solid #88b6b9;
    padding-left: 25px
}

.game .header.bordered b:after, .game .header.bordered b:before {
    display: none
}

.game .description {
    height: 272px
}

.game .description .slider {
    line-height: 30px;
    border: 1px solid #88b6b9;
    border-top: 0;
    padding: 30px 25px 60px 25px;
    font-size: 15px;
    position: relative;
    background: #fff;
    position: relative;
    z-index: 200
}

.game .description p {
    height: 182px;
    overflow: hidden
}

.game .description .full {
    height: auto;
    max-height: 293px;
    overflow: auto
}

.game .description a {
    height: 30px;
    border-top: 1px solid #88b6b9;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-indent: -1000px;
    overflow: hidden;
    color: #116d73
}

.game .description a:after {
    content: "\e602";
    font-family: "banicon";
    font-size: 7px;
    position: absolute;
    left: 50%;
    margin-left: -7px;
    top: 1px;
    width: 14px;
    text-indent: 0
}

.game .description a:hover {
    color: #80BD39
}

.game .description a.less:after, .game .description a.less:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.game .screens {
    position: relative;
    border: 1px solid #88b6b9;
    border-top: 0;
    padding: 26px 10% 4px 10%
}

.game .screens .thumbs {
    height: 242px;
    white-space: nowrap;
    overflow: hidden
}

.game .screens .thumbs span {
    display: inline-block;
    height: 242px;
    width: 100%;
    margin-top: -10px;
    padding: 0 10px
}

.game .screens .thumbs a {
    float: left;
    width: 50%;
    padding: 10px;
    position: relative
}

.game .screens .thumbs img {
    height: auto;
    width: 100%;
    float: left;
    border-radius: 8px;
    position: relative;
    z-index: 2
}

.opacity .game .screens .thumbs a:after {
    content: " ";
    z-index: 3;
    background: #116d73 url(https://bananatic-15199.kxcdn.com/de/images/ico-showbig.png) no-repeat center center;
    background-size: 34px 27px;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 8px;
    opacity: 0
}

.opacity .game .screens a:hover:after {
    opacity: 0.8
}

.game .screens .prev {
    width: 14px;
    height: 24px;
    top: 50%;
    left: 4.5%;
    position: absolute;
    margin-top: -12px;
    color: #116D73
}

.game .screens .prev:after {
    font-size: 21px;
    font-family: "banicon";
    content: "l"
}

.game .screens .next {
    width: 14px;
    height: 24px;
    top: 50%;
    right: 4.5%;
    position: absolute;
    margin-top: -12px;
    color: #116D73
}

.game .screens .next:after {
    font-size: 21px;
    font-family: "banicon";
    content: "r"
}

.game .screens .prev:hover, .game .screens .next:hover {
    color: #80BD39;
    opacity: 1
}

.game .col-screens-2 .screens {
    padding: 25px 1% 5px 1%;
    height: auto;
    min-height: 272px
}

.game .col-screens-2 .screens .prev, .game .col-screens-2 .screens .next {
    display: none
}

.game .col-screens-2 .screens .thumbs {
    height: auto
}

.game .col-screens-2 .screens .thumbs span {
    display: inline
}

.game .col-screens-2 .screens .thumbs a {
    width: 20%;
    padding: 0 2% 20px 2%;
    height: auto
}

.opacity .game .col-screens-2 .screens .thumbs a:after {
    top: 0;
    left: 10%;
    right: 10%;
    bottom: 20px
}

.game .embed-mask {
    height: 327px;
    width: 100%;
    border-radius: 10px;
    background: #357f87;
    background-position: center center;
    background-repeat: repeat
}

.game .embed-mask a {
    display: block;
    height: 327px;
    text-align: center;
    color: #fff;
    font-size: 22px;
    padding-top: 114px
}

.game .embed-mask a:hover {
    color: #80BD39
}

.game .embed-mask a i {
    font-size: 94px
}

.game .embed-mask a b {
    display: block;
    margin-top: 16px
}

.game .help {
    list-style: none
}

.game .help li {
    margin-bottom: 14px
}

.game .help li a {
    display: block;
    padding: 12px 0 12px 58px;
    position: relative;
    font-family: ProximaNova-Bold;
    color: #116d73
}

.game .help li a:hover {
    color: #80bd39
}

.game .help li a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 39px;
    height: 39px;
    border-radius: 100%
}

.game a.add-topic {
    float: left;
    width: 48%;
    margin-top: 25px;
    padding: 10px 0;
    font-size: 12px
}

.game a.show-all {
    float: right;
    width: 48%;
    margin-top: 25px;
    padding: 8px 0;
    font-size: 12px
}

.game .similar {
    list-style: none;
    margin: 0 -10px
}

.game .similar li {
    width: 50%;
    float: left;
    padding: 0 10px;
    text-align: center
}

.game .similar li + li + li {
    display: none
}

.game .similar:after {
    width: 100%;
    content: " ";
    clear: both;
    display: block
}

.game .similar .image {
    border: 1px solid #88b6b9;
    height: 130px;
    line-height: 115px
}

.game .similar .image img {
    max-width: 93%;
    max-height: 93%;
    vertical-align: middle;
    width: auto;
    height: auto;
    line-height: 100px
}

.game .similar .image a {
    display: block;
    height: 100px;
    max-width: 216px;
    margin: 0 auto
}

.game .similar .about {
    height: 212px;
    border: 1px solid #88b6b9;
    border-top: 0
}

.game .similar .type {
    margin-top: -15px;
    position: relative;
    z-index: 10
}

.game .similar .type a {
    display: inline
}

.game .similar .type .game-type {
    position: relative;
    z-index: 10;
    background-color: #fff;
    margin: 0 8px
}

.game .similar .type .game-type:before {
    top: -35px;
    left: -1px
}

.game .similar .name {
    display: table;
    width: 98%;
    margin: 0 1%
}

.game .similar .name b {
    color: #116d73;
    display: block;
    height: 70px;
    display: table-cell;
    vertical-align: middle
}

.game .similar .awards {
    width: 155px;
    height: 45px;
    margin: 0 auto;
    position: relative;
    text-align: left
}

.game .similar .awards:before {
    content: "+";
    font-size: 26px;
    font-family: ProximaNova-Bold;
    color: #80bd39;
    position: absolute;
    top: 11px;
    left: 63px
}

.game .similar .awards img {
    width: 45px;
    height: 45px;
    border: 2px solid #e4a761;
    border-radius: 100%;
    margin-right: 45px
}

.game .similar .awards b.points {
    font-size: 18px;
    color: #80bd39;
    display: inline-block;
    vertical-align: middle;
    left: 92px;
    top: 2px;
    position: absolute
}

.game .similar .awards b.points:after {
    font-size: 15px;
    display: inline-block;
    font-family: "banicon";
    content: "\e601";
    margin-left: 5px;
    position: relative;
    top: 1px
}

.game .similar .awards b.exp {
    font-size: 18px;
    color: #ffa200;
    display: inline-block;
    left: 92px;
    bottom: -1px;
    position: absolute
}

.game .similar .awards b.exp:after {
    font-size: 16px;
    display: inline-block;
    content: "\e60d";
    font-family: "banicon";
    margin-left: 5px;
    position: relative;
    top: 1px
}

.game .similar .banicon-logo-small {
    height: 45px;
    display: block;
    text-align: center;
    font-size: 36px;
    color: #87b5b8;
    position: relative;
    top: 3px
}

.game .similar .vote:hover .bar {
    display: block
}

.game .similar .vote a {
    display: none
}

.game .similar .vote {
    width: 115px;
    height: 14px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/bg-vote2.png);
    display: inline-block
}

.game .similar .vote .bar {
    height: 14px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/bg-vote2.png)
}

.game .similar .status {
    font-size: 13px;
    color: #116d73;
    top: -1px;
    display: inline-block;
    float: none;
    position: relative;
    margin-left: 10px
}

.game .similar .voting {
    margin: 22px 0 0 0
}

.game .players {
    margin: 0 -5px
}

.game .players ul {
    list-style: none
}

.game .players li {
    float: left;
    padding: 0 5px;
    width: 20%
}

.game .players ul:after {
    display: inline-block;
    width: 100%;
    height: 0;
    content: " "
}

.game .players li a {
    display: block;
    text-align: center;
    position: relative;
    color: #116d73
}

.game .players li a img {
    width: 100%;
    height: auto;
    border-radius: 100%;
    float: left
}

.game .players li a b {
    font-size: 13px;
    font-family: ProximaNova-Semibold;
    display: block;
    overflow: hidden;
    height: 45px;
    position: relative;
    margin-right: -5px;
    padding-right: 5px
}

.game .players li a b:after {
    position: absolute;
    content: " ";
    width: 5px;
    height: 100%;
    top: 0;
    right: 0;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-ellipsis-5px.png) repeat-y top right
}

.game .players li a:hover {
    color: #80bd39
}

.game .players li a span {
    display: block;
    position: relative;
    width: 60px;
    max-width: 100%;
    margin: 0 auto 15px auto
}

.game .players li a span:after {
    width: 100%;
    height: 0;
    clear: both;
    display: block;
    content: " "
}

.opacity .game .players li a span:before {
    content: " ";
    z-index: 3;
    width: 100%;
    height: 100%;
    background: #116d73;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    opacity: 0
}

.opacity .game .players li a:hover span:before {
    opacity: 0.8
}

.game .opinions {
    list-style: none
}

.game .opinions li {
    padding: 5px 0 0 66px;
    min-height: 41px;
    margin-bottom: 20px;
    font-size: 14px;
    position: relative
}

.game .opinions li a {
    color: inherit
}

.game .opinions li.hide {
    display: none
}

.game .opinions img {
    position: absolute;
    width: 41px;
    height: 41px;
    border-radius: 50%;
    top: 0;
    left: 0
}

.game .opinions form img {
    width: 45px;
    height: 45px;
    border: 2px solid #7ebc3a;
    background: #116D73
}

.game .opinions .when {
    font-size: 12px;
    color: #7e7e7e;
    margin-left: 15px
}

.game .opinions p {
    margin: 5px 0;
    line-height: 20px;
    height: auto
}

.game .opinions input {
    border: 1px solid #88b6b9;
    border-radius: 10px;
    padding: 9px 15px;
    font-size: 14px;
    color: #116d73;
    width: 100%;
    margin-bottom: 10px
}

.game .more-opinions {
    color: #80bd39;
    font-size: 14px
}

.game .more-opinions:hover {
    color: #679C2A
}

.game .more-opinions i {
    position: relative;
    top: 3px;
    margin-right: 10px
}

.game .opinions li a.reply {
    float: right;
    font-size: 12px;
    color: #80BD39
}

.game .opinions li a.reply:hover {
    color: #679C2A
}

.game .opinions li ul {
    margin: 15px 0 15px -47px;
    padding-left: 45px;
    border-left: 2px solid #1A7E84;
    list-style: none
}

.game .opinions li ul img {
    width: 24px;
    height: 24px
}

.game .opinions li ul li {
    padding: 3px 0 0 34px;
    margin-bottom: 10px;
    min-height: auto
}

.game .opinions li li input {
    padding: 0 10px;
    height: 24px;
    margin-bottom: 0;
    margin-top: -2px;
    border-radius: 6px
}

.game .col-requirements ul {
    list-style: none;
    margin: 10px 0 0 0
}

.game .col-requirements li {
    padding: 3px 0 34px 100px;
    font-size: 16px;
    position: relative;
    line-height: 20px;
    min-height: 57px
}

.game .col-requirements li label {
    position: absolute;
    top: 0;
    left: 0;
    color: #80bd39;
    font-family: ProximaNova-Bold;
    font-weight: normal
}

.game .col-requirements li label i {
    font-size: 28px;
    vertical-align: middle;
    width: 37px;
    display: inline-block;
    text-align: center;
    margin-right: 8px;
    top: -1px;
    position: relative
}

.games li .description {
    overflow: visible
}

.games li .description .info {
    width: 29px;
    height: 29px;
    float: left;
    margin-right: 15px;
    margin-top: -3px;
    position: relative
}

.games li .description .info img {
    width: 29px;
    height: 29px;
    cursor: help
}

.games li .description .info .hint {
    position: absolute;
    top: -50px;
    white-space: nowrap;
    opacity: 0;
    left: 14px;
    visibility: hidden;
    z-index: 1
}

.games li .description .info:hover .hint {
    opacity: 0.9;
    z-index: 99999;
    visibility: visible
}

.games li .description .info .hint b {
    font-family: ProximaNova-Semibold;
    font-size: 14px;
    margin-left: -50%;
    display: inline-block;
    height: 37px;
    padding: 11px 24px;
    line-height: 14px;
    background: #116d73;
    color: #fff;
    position: relative
}

.games li .description .info .hint b:before {
    position: absolute;
    bottom: -5px;
    width: 11px;
    left: 50%;
    margin-left: -5px;
    content: " ";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #116d73
}

.games.thumbnails li .box {
    overflow: visible
}

.games.thumbnails li .description .info {
    float: none;
    position: absolute;
    margin: 0;
    top: -10px;
    left: -10px
}

.games.thumbnails li .description .info .hint {
    left: 40px;
    top: -4px
}

.games.thumbnails li .description .info .hint b {
    margin-left: 1px
}

.games.thumbnails li .description .info .hint b:before {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #116d73;
    border-left: 0;
    top: 50%;
    left: -5px;
    width: 5px;
    margin-left: 0;
    margin-top: -5px;
    bottom: auto
}

.games.thumbnails li .play a {
    margin-top: 0
}

.games.thumbnails li:hover .play a {
    margin-top: 37px
}

.get-banana {
    margin: 0 0 50px 0
}

.get-banana ul {
    list-style: none;
    margin: 0 0 48px 0
}

.get-banana li {
    float: left;
    width: 25%;
    height: 208px;
    position: relative;
    margin-bottom: -1px
}

.get-banana li a {
    display: block;
    position: relative;
    border: 1px solid #88b6b9;
    height: 208px;
    text-align: center;
    color: #116d73;
    font-size: 14px;
    padding: 0;
    z-index: 1;
    background: #fff;
    margin-right: -1px
}

.get-banana li a:hover {
    color: #0b4d51;
    margin: -10px -11px -10px -10px;
    height: 228px;
    z-index: 3333;
    padding: 10px 10px 0 10px;
    -webkit-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3)
}

.get-banana li a i {
    font-size: 30px;
    height: 40px;
    display: block;
    margin: 30px 0 17px 0
}

.get-banana li a i.banicon-fk {
    font-size: 23px;
    padding-top: 4px
}

.get-banana li a i.banicon-sedoc {
    font-size: 33px
}

.get-banana li a strong {
    font-size: 18px
}

.get-banana li a p {
    margin: 9px 5px 5px 5px
}

.get-banana li a:hover p.c {
    text-overflow: clip;
    overflow: visible;
    white-space: normal
}

.get-banana li a .points {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #116d73;
    height: 46px;
    width: 100%;
    text-align: center;
    color: #fae12b;
    font-size: 20px;
    padding-top: 13px
}

.get-banana li a:hover .points {
    background: #0b4d51
}

.get-banana li a .points i {
    display: inline-block;
    margin: 0;
    height: auto;
    font-size: 20px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

.get-banana li a .points i.banicon-infinity {
    font-size: 14px
}

.get-banana li .hint {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -25px;
    right: -25px;
    text-align: center;
    padding: 17px 0 0 2px;
    z-index: 3335
}

.get-banana li a:hover + .hint {
    top: -35px;
    right: -35px
}

.get-banana li .hint:before {
    font-size: 50px;
    font-family: "banicon";
    color: #80bd39;
    content: "\e624";
    position: absolute;
    top: 0;
    left: 0
}

.get-banana li .hint b {
    font-size: 17px;
    position: relative;
    color: #fff
}

.get-banana li a.inactive, .get-banana li a.inactive:hover {
    color: #cbcbcb;
    padding: 0;
    height: 208px;
    margin: 0 -1px 0 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

.get-banana li a.inactive .points {
    background: #777777;
    color: #fff
}

.get-banana form {
    font-size: 28px;
    line-height: 45px;
    height: 48px;
    width: auto;
    overflow: hidden;
    max-width: 1030px
}

.get-banana form b {
    float: left
}

.get-banana form div {
    width: auto;
    overflow: hidden;
    padding: 0 10px
}

.get-banana form .text {
    border: 1px solid #88b6b9;
    height: 45px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    vertical-align: top;
    width: 100%
}

.get-banana form .btn {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    padding: 12px 60px;
    border-radius: 10px;
    letter-spacing: 3px;
    text-align: center;
    background: #80bd39;
    border: 0;
    height: 45px;
    font-family: ProximaNova-Bold;
    vertical-align: middle;
    float: right
}

.get-banana form .btn:hover {
    background: #679c2a
}

.get-banana .status {
    float: right;
    line-height: 45px;
    font-size: 18px;
    margin-top: 3px;
    margin-left: 30px
}

.get-banana .status b {
    font-size: 24px;
    color: #80bd39;
    margin-left: 5px
}

.get-banana .status i {
    font-size: 20px
}

.cloudlet {
    width: 400px;
    height: 106px;
    display: block;
    padding: 21px 0 0 275px;
    position: relative;
    color: #116d73;
    text-align: center;
    margin: 25px auto -75px auto
}

.cloudlet:after {
    width: 36px;
    height: 28px;
    background: #fff;
    border: 1px solid #116d73;
    position: absolute;
    bottom: 0;
    right: 132px;
    content: " ";
    border-radius: 50%
}

.cloudlet:before {
    width: 129px;
    height: 98px;
    background: #fff;
    border: 1px solid #116d73;
    position: absolute;
    top: 0;
    right: 0;
    content: " ";
    border-radius: 50%
}

.cloudlet i {
    position: relative;
    z-index: 10;
    font-size: 52px
}

#windmill .username {
    display: block;
    color: #fff;
    font-size: 30px;
    margin: 20px 0 20px 0
}

#windmill .level, #creator .level {
    display: block;
    font-size: 30px;
    font-style: italic;
    width: 200px;
    margin: 0 auto;
    position: relative;
    font-family: Impact, Charcoal, sans-serif;
    letter-spacing: 3px
}

#windmill .level:before, #creator .level:before {
    position: absolute;
    top: 18px;
    width: 100%;
    height: 2px;
    border-left: 60px solid #fff;
    border-right: 60px solid #fff;
    content: " ";
    left: 0
}

#windmill .transea {
    width: 226px;
    height: 34px;
    border-color: #fff;
    color: #fff;
    margin-top: 30px
}

#windmill .transea:after {
    background: #fff
}

#windmill .transea:hover {
    color: #116d73
}

#shop {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-shop.jpg) repeat-x top center;
    color: #116d73;
    border-bottom: 1px solid #6db0a2
}

#shop.map {
    background: #c9eaf8 url(https://bananatic-15199.kxcdn.com/de/images/shop/bg.png) no-repeat top center;
    height: 913px;
    position: relative
}

#shop.map .header {
    text-align: center
}

#shop p {
    line-height: 20px;
    min-height: 40px;
    margin-bottom: 30px;
    padding-right: 510px;
    position: relative
}

#shop p b {
    float: none;
    width: auto;
    overflow: hidden;
    margin-right: 50px;
    position: relative;
    top: 9px
}

#shop p a {
    padding: 7px 0 0 0;
    float: right;
    width: 240px;
    margin-left: 20px;
    height: 38px;
    position: absolute;
    top: 0;
    right: 263px;
    margin-bottom: 5px
}

#shop p a + a {
    right: 0
}

#shop.map p {
    text-align: center;
    padding-right: 0
}

#shop.map p b, #shop.map p a {
    float: none;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: auto;
    right: auto
}

#shop ul {
    list-style: none
}

#shop.classic ul {
    position: relative;
    z-index: 50
}

#shop.classic + #windmill {
    margin-top: -75px;
    border-top: 1px solid #6db0a2
}

#shop.classic ul li {
    float: left;
    width: 25%;
    height: 200px;
    margin-bottom: -1px;
    position: relative
}

#shop.classic ul li:after {
    position: absolute;
    height: 1px;
    background: #88b6b9;
    top: 123px;
    width: 64%;
    left: 18%;
    content: " ";
    z-index: 3334
}

#shop.classic ul li a {
    height: 200px;
    border: 1px solid #88b6b9;
    background: #fff;
    margin-right: -1px;
    display: block;
    position: relative;
    text-align: center;
    font-size: 18px;
    color: #116d73;
    z-index: 1
}

#shop.classic ul li a:hover {
    color: #0b4d51;
    margin: -10px -11px -10px -10px;
    height: 220px;
    z-index: 3333;
    padding: 10px 10px 0 10px;
    -webkit-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3)
}

#shop.classic ul li.empty:before {
    height: 200px;
    border: 1px solid #88b6b9;
    background: #fff;
    margin-right: -1px;
    display: block;
    content: " "
}

#shop ul li a .image {
    display: block;
    width: 138px;
    max-width: 100%;
    margin: 43px auto 30px auto;
    height: 79px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-shops.jpg) no-repeat 0 -1px
}

#shop ul .prepaid .image {
    background-position: 0 -81px
}

#shop ul .fk .image {
    background-position: 0 -161px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-gv.png) no-repeat center center;
    background-size: contain
}

#shop ul .fg .image {
    background-position: 0 -241px
}

#shop ul .psc .image {
    background-position: 0 -321px
}

#shop ul .sedoc .image {
    background-position: 0 -401px
}

#shop ul .steam .image {
    background-position: 0 -401px
}

#shop ul .creator .image {
    background-position: 0 -481px
}

#shop ul .cs .image {
    background-position: 0 -561px
}

#shop ul .amazon .image {
    background-position: 0 -641px
}

#shop ul .giftcard .image {
    background-position: 0 -721px
}

#shop ul .paypal .image {
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-paypal.svg) no-repeat center center;
    background-size: contain
}

#shop ul .trees {
    display: none
}

#shop ul .bridge {
    display: none
}

#shop ul .character {
    display: none
}

.opacity #shop ul li a .image {
    opacity: 0.5
}

.opacity #shop ul li a:hover .image {
    opacity: 1
}

#shop.map ul {
    width: 996px;
    height: 472px;
    margin: 60px auto 0 auto;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/map.svg) no-repeat top center;
    background-size: 100% 100%;
    position: relative
}

#shop.map ul:before {
    position: absolute
}

#shop.map ul a {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%
}

#shop.map ul a b {
    position: absolute;
    bottom: 130px;
    left: 50%;
    width: 145px;
    background: #fff;
    font-family: ProximaNova-Semibold;
    font-size: 14px;
    padding: 13px 6px;
    margin-left: -73px;
    color: #136468;
    border: 2px solid #116d73;
    border-radius: 5px;
    display: none
}

#shop.map ul a:hover b {
    display: block
}

#shop.map ul a b:before {
    content: " ";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -6px;
    width: 10px;
    height: 8px;
    border-top: 10px solid #116d73;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent
}

#shop.map ul a b:after {
    content: " ";
    position: absolute;
    bottom: -7px;
    left: 50%;
    margin-left: -4px;
    width: 6px;
    height: 8px;
    border-top: 8px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent
}

.opacity #shop.map ul a b {
    display: block;
    opacity: 0;
    pointer-events: none
}

.opacity #shop.map ul a:hover b {
    opacity: 1
}

#shop.map ul li {
    display: block;
    position: absolute;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 4
}

#shop.map ul .bridge {
    width: 151px;
    height: 61px;
    top: 74%;
    left: 40.8%;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/bridge.svg);
    z-index: 5
}

#shop.map ul .trees {
    width: 98%;
    height: 97%;
    top: 0;
    left: 1%;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/trees.svg);
    z-index: 5;
    pointer-events: none
}

#shop.map ul .character {
    width: 42px;
    height: 55px;
    top: 70%;
    left: 70%
}

#shop.map ul .character img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto
}

#shop.map ul .gold {
    width: 107px;
    height: 112px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-gold.svg);
    left: 5.8%;
    top: 59%;
    z-index: 7
}

#shop.map ul .gold .image {
    width: 23px;
    height: 23px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-gold.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 1.0;
    margin: 10px auto 0 auto
}

#shop.map ul .prepaid {
    width: 132px;
    height: 118px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-prepaids.svg);
    left: 15.5%;
    top: 2%
}

#shop.map ul .prepaid .image {
    width: 24px;
    height: 17px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-prepaids.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 1.0;
    margin: 12px auto 0 auto
}

#shop.map ul .fk {
    width: 119px;
    height: 119px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-keys.svg);
    left: 69.5%;
    top: 0;
    z-index: 5
}

#shop.map ul .fk .image {
    width: 27px;
    height: 29px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-gv.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 1.0;
    margin: 7px auto 0 auto
}

#shop.map ul .fg {
    width: 121px;
    height: 114px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-hardware.svg);
    left: 82%;
    top: 5%;
    z-index: 6
}

#shop.map ul .fg .image {
    width: 19px;
    height: 19px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-fg.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 1.0;
    margin: 12px auto 0 auto
}

#shop.map ul .psc {
    width: 106px;
    height: 112px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-psc.svg);
    left: 36%;
    top: 30%;
    z-index: 6
}

#shop.map ul .psc .image {
    width: 15px;
    height: 22px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-psc.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 1.0;
    margin: 10px auto 0 auto;
    left: -2px;
    position: relative
}

#shop.map ul .steam {
    width: 114px;
    height: 112px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-steam.svg);
    left: 2.5%;
    top: 28%;
    z-index: 6
}

#shop.map ul .steam .image {
    width: 42px;
    height: 19px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-steam.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 1.0;
    margin: 12px auto 0 auto
}

#shop.map ul .creator {
    width: 70px;
    height: 103px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-creator.svg);
    left: 51%;
    top: 6.5%;
    z-index: 5
}

#shop.map ul .creator .image {
    display: none
}

#shop.map ul .cs {
    width: 135px;
    height: 118px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-csgo.svg);
    left: 34%;
    top: 4%
}

#shop.map ul .cs .image {
    width: 38px;
    height: 18px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-csgo.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 1.0;
    margin: 12px auto 0 auto
}

#shop.map ul .amazon {
    width: 115px;
    height: 124px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-amazon.svg);
    left: 21%;
    top: 65%;
    z-index: 10
}

#shop.map ul .amazon .image {
    width: 23px;
    height: 25px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-amazon.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 1.0;
    margin: 10px auto 0 auto
}

#shop.map ul .giftcard {
    width: 110px;
    height: 137px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-giftcard.svg);
    left: 57.5%;
    top: -3%;
    z-index: 6
}

#shop.map ul .giftcard .image {
    width: 21px;
    height: 21px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-giftcard.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 1.0;
    margin: 10px auto 0 auto
}

#shop.map ul .paypal {
    width: 175px;
    height: 186px;
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/shop-paypal.svg);
    left: -16.5%;
    top: -12%;
    z-index: 6
}

#shop.map ul .paypal .image {
    width: 42px;
    height: 42px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/shop/image-paypal.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 1.0;
    margin: 55px 0 0 120px
}

#shop.map ul .paypal a b {
    bottom: 175px
}

#shop.map ul.winter {
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/winter-map.svg)
}

#shop.map ul.winter .trees {
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/shop/winter-trees.svg);
    height: 103%;
    top: -7%
}

#shop.map + #windmill {
    display: none
}

#promo-prepaids {
    list-style: none;
    min-height: 384px
}

#promo-prepaids li {
    float: left;
    width: 20%;
    height: 192px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-shopproduct-shadow.png) no-repeat 0 116px
}

#promo-prepaids li + li + li + li + li + li + li + li + li + li {
    display: none
}

#promo-prepaids li + li + li + li + li + li + li + li {
    margin-left: 20%
}

#promo-prepaids li + li + li + li + li + li + li + li + li {
    margin-left: 0
}

#promo-prepaids li a {
    display: block;
    width: 204px;
    height: 116px;
    border-bottom: 15px solid #2a787d;
    position: relative
}

#promo-prepaids li a:hover {
    border-color: #80bd39
}

#promo-prepaids li a:before {
    position: absolute;
    width: 163px;
    height: 101px;
    top: 0;
    left: 25px;
    background: #b0c9c4;
    border-radius: 7px;
    content: " ";
    z-index: 3
}

#promo-prepaids li a .image {
    width: 163px;
    height: 101px;
    line-height: 70px;
    display: block;
    margin-left: 21px;
    text-align: center;
    border-radius: 7px;
    background: #fff;
    padding: 15px;
    position: relative;
    z-index: 4
}

#promo-prepaids li a .image img {
    vertical-align: middle;
    max-width: 133px;
    max-height: 73px;
    width: auto;
    height: auto
}

#promo-prepaids li a .news {
    position: absolute;
    left: -10px;
    top: 0;
    background: url(https://bananatic-15199.kxcdn.com/de/images/ico-news.png) no-repeat 0 0;
    width: 63px;
    height: 38px;
    z-index: 5
}

#promo-prepaids li a .price {
    position: absolute;
    right: 26px;
    top: -21px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/ico-sticker.png) no-repeat 0 0;
    width: 162px;
    height: 39px;
    z-index: 5;
    font-family: ProximaNova-Bold;
    font-size: 14px;
    color: #ffdb00;
    padding: 8px 0 0 82px;
    text-align: center
}

#promo-prepaids li a .price:after {
    font-family: "banicon";
    content: " \e601";
    font-size: 12px
}

.csstransforms #promo-prepaids li a .price {
    right: -90px;
    top: 41px;
    -webkit-transform: rotate(58deg);
    -moz-transform: rotate(58deg);
    -o-transform: rotate(58deg);
    -ms-transform: rotate(58deg);
    transform: rotate(58deg)
}

#promo-prepaids + .bananji {
    width: 239px;
    height: 228px;
    display: block;
    overflow: hidden;
    position: absolute;
    bottom: -1px;
    left: 50%;
    margin-left: -130px
}

#promo-prepaids + .bananji img {
    width: 100%;
    height: auto
}

#prepaids {
    overflow: visible;
    margin-bottom: 60px
}

#prepaids ul {
    list-style: none;
    margin: 0 -1.675%
}

#prepaids li {
    height: 372px;
    width: 13.316%;
    margin: 0 1.675% 45px 1.675%;
    float: left
}

#prepaids li .box {
    border: 1px solid #88b6b9;
    background: #fff;
    padding: 26px 23px;
    text-align: center;
    position: relative;
    height: 355px
}

.opacity #prepaids li .box:before {
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 4px solid #116d73;
    opacity: 0;
    content: " ";
    position: absolute;
    border-radius: 4px
}

.opacity #prepaids li .box:hover:before {
    opacity: 1
}

#prepaids li * {
    position: relative;
    z-index: 10
}

#prepaids li .box:hover {
    height: 406px;
    z-index: 5000
}

#prepaids li a {
    margin-top: 0;
    opacity: 1;
    position: absolute;
    bottom: auto;
    left: 23px;
    right: 23px;
    width: auto;
    top: 297px
}

#prepaids li a.lottery {
    opacity: 0;
    top: auto;
    bottom: 30px;
    background: #86c043;
    height: 34px;
    border-radius: 10px;
    padding: 10px 0;
    font-family: ProximaNova-Bold;
    text-transform: uppercase;
    color: #fff;
    font-size: 13px;
    letter-spacing: 2px
}

#prepaids li:hover a.lottery {
    opacity: 1
}

#prepaids .lottery-active {
    position: absolute !important;
    width: 37px;
    height: 37px;
    text-align: center;
    border-radius: 50%;
    background: #5d981a;
    top: -9px;
    right: -9px;
    color: #fff;
    font-size: 18px;
    line-height: 37px;
    cursor: help
}

#prepaids .lottery-active:hover + .lottery-details, #prepaids .lottery-details:hover {
    opacity: 1;
    visibility: visible
}

#prepaids .lottery-details {
    z-index: 5000;
    bottom: 100%;
    white-space: nowrap;
    position: absolute !important;
    padding: 20px 25px;
    text-align: center;
    left: 100%;
    margin-left: -134px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}

#prepaids .lottery-details p {
    font-family: ProximaNova-Semibold;
    font-size: 14px;
    color: #fff;
    width: 200px;
    white-space: normal
}

#prepaids .lottery-details a {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    position: relative !important;
    margin-top: 10px !important;
    border-color: #fff;
    color: #fff;
    width: 170px !important
}

#prepaids .lottery-details a:after {
    background: #fff
}

#prepaids .lottery-details a:hover {
    color: #073d40
}

#prepaids .lottery-details:before {
    position: absolute;
    top: 0;
    height: 102px;
    left: 0;
    width: 100%;
    background: #073d40;
    opacity: 0.9;
    content: " "
}

#prepaids .lottery-details:after {
    position: absolute;
    width: 11px;
    height: 5px;
    left: 50%;
    margin-left: -5px;
    top: 102px;
    border-top: 5px solid #073d40;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: " ";
    opacity: 0.9
}

#prepaids li .image {
    height: 124px;
    display: block;
    line-height: 120px
}

#prepaids li .image img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle
}

#prepaids li .name {
    font-size: 17px;
    display: block;
    font-family: ProximaNova-Semibold;
    margin: 30px 0 10px 0;
    line-height: 24px
}

#prepaids li .title {
    font-size: 14px;
    display: block;
    height: 50px
}

#prepaids li .price {
    font-family: ProximaNova-Bold;
    font-size: 30px;
    color: #80bd39;
    position: absolute;
    left: 0;
    text-align: center;
    width: 100%;
    display: block;
    left: 0;
    top: 260px
}

#prepaids li .price:after {
    font-family: "banicon";
    content: "\e601";
    font-size: 20px;
    margin-left: 5px
}

#buy-prepaid {
    height: 345px;
    margin-top: -172px;
    position: relative
}

#buy-prepaid:after {
    left: 22.58%;
    width: 1px;
    top: 0;
    height: 100%;
    background: #88b6b9;
    content: " ";
    position: absolute
}

#buy-prepaid:before {
    right: 0;
    width: 36.03%;
    top: 0;
    height: 100%;
    background: #116d73;
    content: " ";
    position: absolute
}

#buy-prepaid .image {
    width: 22.58%;
    float: left;
    padding: 25px 45px;
    text-align: center
}

#buy-prepaid .image img {
    max-width: 100%;
    max-height: 60px
}

#buy-prepaid .image img + img {
    max-height: 185px;
    margin-top: 25px
}

#buy-prepaid .details {
    width: 41.39%;
    float: left;
    padding: 38px 45px 15px 45px
}

#buy-prepaid .details .name {
    font-size: 30px;
    display: block;
    margin-bottom: 7px
}

#buy-prepaid .details .title {
    display: block;
    height: 83px
}

#buy-prepaid .details .options {
    padding-left: 100px;
    position: relative
}

#buy-prepaid .details label {
    position: absolute;
    left: 0;
    margin-top: 2px;
    width: 100px;
    font-size: 14px;
    color: #ababaf;
    height: 50px
}

#buy-prepaid .details img {
    vertical-align: middle;
    margin-bottom: 13px
}

#buy-prepaid .details img.platform {
    margin-bottom: 2px;
    height: 32px
}

#buy-prepaid .finance {
    float: left;
    width: 36.03%;
    position: relative;
    z-index: 4;
    padding: 84px 5.5% 0 5.5%;
    text-align: right;
    color: #fff
}

#buy-prepaid .price {
    font-size: 50px;
    color: #fbe12b;
    display: block
}

#buy-prepaid .price:after {
    font-family: "banicon";
    content: "\e601";
    font-size: 35px;
    margin-left: 6px
}

#buy-prepaid .yours {
    font-size: 28px;
    color: #80bd39;
    display: block
}

#buy-prepaid .yours.insufficient {
    color: #ef6269
}

#buy-prepaid .yours:after {
    font-family: "banicon";
    content: "\e601";
    font-size: 19px;
    margin-left: 6px;
    margin-right: 3px
}

#buy-prepaid .yours:before {
    content: "Twoje bananki: ";
    font-family: ProximaNova-Regular;
    font-size: 16px;
    color: #fff;
    margin-right: 10px;
    position: relative;
    top: -2px
}

#buy-prepaid .transea {
    color: #fff;
    border-color: #fff;
    display: block;
    width: 100%;
    margin-top: 80px;
    padding: 13px 0
}

#buy-prepaid .transea:after {
    background: #fff
}

#buy-prepaid .transea:hover {
    color: #116d73
}

#buy-prepaid .transea.disabled {
    color: #6da6a9;
    border-color: #6da6a9;
    margin-top: 0
}

#buy-prepaid .transea.disabled:after {
    display: none
}

#buy-prepaid .transea.disabled:hover {
    color: #6da6a9
}

#buy-prepaid .finance p {
    font-size: 14px;
    color: #6da6a9;
    margin: 52px 0 7px 0
}

#paysafecard {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-paysafecard.jpg) no-repeat center 0;
    background-size: cover;
    padding-top: 50px;
    margin-top: -50px;
    min-height: calc(100vh - 240px)
}

#paysafecard .slogan {
    font-size: 18px;
    float: right;
    margin: 75px 0 65px 15px
}

#paysafecard .breadcrumb {
    overflow: hidden;
    width: auto;
    margin: 74px 0 64px 0
}

#paysafecard ul.list {
    list-style: none;
    text-align: justify;
    margin-bottom: 30px
}

#paysafecard ul:after {
    display: inline-block;
    width: 100%;
    height: 0;
    content: " "
}

#paysafecard ul.list li {
    max-width: 24%;
    width: 323px;
    height: 412px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-bottom: 150px
}

#paysafecard ul.list li:before {
    position: absolute;
    top: 5px;
    left: -5px;
    width: 100%;
    height: 100%;
    background: #116d73;
    opacity: 0.5;
    border-radius: 7px;
    content: " "
}

#paysafecard ul.list li a {
    width: 100%;
    height: 412px;
    background: #fff;
    display: block;
    position: relative;
    z-index: 5;
    padding: 8px;
    border-radius: 7px;
    top: 0;
    left: 0;
    color: #fff
}

#paysafecard ul.list li.unavailable {
    opacity: 0.3
}

#paysafecard ul.list li a:hover {
    top: 5px;
    left: -5px
}

#paysafecard ul.list li.unavailable a:hover {
    top: 0;
    left: 0
}

#paysafecard ul.list li a .value {
    display: block;
    text-align: center;
    height: 297px;
    background: #008ac9 url(https://bananatic-15199.kxcdn.com/de/images/bg-shop-psc.png) no-repeat center center;
    padding: 42px 10px 0 10px;
    font-size: 50px
}

#paysafecard ul.list li a .value img {
    width: 189px;
    height: auto;
    max-width: 100%;
    margin-bottom: 73px
}

#paysafecard ul.list li a .price {
    display: block;
    margin-top: 8px;
    height: 91px;
    background: #008ac9;
    text-align: center;
    font-size: 25px;
    color: #fbe12b;
    padding-top: 33px
}

#paysafecard ul.list li a .price:after {
    font-family: "banicon";
    content: "\e601";
    font-size: 20px;
    margin-left: 4px
}

#buypsc {
    width: 900px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    background: #106e74;
    top: 50%;
    color: #116D73;
    padding: 8px;
    height: auto;
    border-radius: 7px;
    margin-top: -112px
}

#buypsc .box {
    width: 100%;
    position: relative;
    background: #fff;
    font-family: ProximaNova-Semibold;
    font-size: 16px;
    padding: 45px 25px;
    text-align: center
}

#buypsc .box .value {
    font-size: 29px;
    color: #80bd39;
    margin: 0 15px;
    vertical-align: middle
}

#buypsc .box .price {
    color: #116d73;
    font-size: 29px;
    margin: 0 15px;
    vertical-align: middle
}

#buypsc .box .price:after {
    font-family: "banicon";
    content: "\e601";
    font-size: 20px;
    margin-left: 4px
}

#buypsc .logo {
    width: 276px;
    height: 57px;
    position: absolute;
    left: -8px;
    top: -57px;
    text-align: center;
    background: #106e74;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px
}

#buypsc .logo img {
    width: 145px;
    margin-top: 14px
}

#buypsc .logo.product {
    width: auto;
    padding: 16px 20px;
    font-size: 21px;
    color: #fff
}

#buypsc input {
    width: 146px;
    height: 52px;
    border-radius: 7px;
    border: 0;
    margin: 37px 13px 0 13px;
    background: #80bd39;
    font-family: ProximaNova-Bold;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px
}

#buypsc input:hover {
    background: #679c2a
}

#buypsc input + input {
    background: #ef6269
}

#buypsc input + input:hover {
    background: #e0535b
}

#paysafecard.steam {
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/bg-steam.jpg);
    color: #fff
}

#paysafecard.steam ul.list {
    width: 950px;
    max-width: 100%;
    margin: 0 auto 30px auto
}

#paysafecard.steam ul.list li {
    width: 262px;
    max-width: 30%;
    height: 354px
}

#paysafecard.steam ul.list li:before {
    background: #2b2a2a
}

#paysafecard.steam ul.list li a {
    height: 354px
}

#paysafecard.steam ul.list li a .value {
    background: #2b2a2a;
    height: 239px;
    font-size: 40px
}

#paysafecard.steam ul.list li a .value img {
    width: 124px;
    margin-bottom: 23px
}

#paysafecard.steam ul.list li a .price {
    background: #2b2a2a
}

#paysafecard ul.list li a.buy:before, #paysafecard ul.list li a.lottery:before {
    position: absolute;
    bottom: -5px;
    left: -5px;
    content: " ";
    width: 100%;
    height: 100%;
    background: inherit;
    opacity: 0.5;
    border-radius: 7px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out
}

#paysafecard ul.list li a.buy:after, #paysafecard ul.list li a.lottery:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: " ";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 7px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out
}

#paysafecard ul.list li a.buy:hover:before, #paysafecard ul.list li a.lottery:hover:before {
    bottom: 0;
    left: 0
}

#paysafecard ul.list li a.buy:hover:after {
    background: #d77902
}

#paysafecard ul.list li a.lottery:hover:after {
    background: #5d8f23
}

#paysafecard ul.list li a.buy b, #paysafecard ul.list li a.lottery b {
    position: relative;
    z-index: 3
}

#paysafecard ul.list li a.buy {
    border: 0;
    height: 34px;
    background: #fe9a19 !important;
    border-radius: 7px;
    padding: 10px 0;
    text-transform: uppercase;
    color: #fff;
    font-size: 13px;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 16px
}

#paysafecard ul.list li a.lottery {
    height: 34px;
    background: #86c043;
    border-radius: 7px;
    padding: 10px 0;
    text-transform: uppercase;
    color: #fff;
    font-size: 13px;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 14px
}

#paysafecard ul.list li .lottery-active {
    position: absolute !important;
    width: 37px;
    height: 37px;
    text-align: center;
    border-radius: 50%;
    background: #5d981a;
    top: -9px;
    right: -9px;
    color: #fff;
    font-size: 18px;
    line-height: 37px;
    cursor: help;
    z-index: 6
}

#paysafecard ul.list li .lottery-active:hover + .lottery-details, #paysafecard ul.list li .lottery-details:hover {
    opacity: 1;
    visibility: visible
}

#paysafecard ul.list li .lottery-details {
    z-index: 5000;
    bottom: 100%;
    height: 120px;
    white-space: nowrap;
    position: absolute !important;
    padding: 20px 25px;
    text-align: center;
    left: 100%;
    margin-left: calc(-1 * (100% / 2) - 25px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}

#paysafecard ul.list li .lottery-details p {
    font-family: ProximaNova-Semibold;
    font-size: 14px;
    color: #fff;
    position: relative
}

#paysafecard ul.list li .lottery-details a {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    position: relative !important;
    margin: 13px auto 0 auto;
    border-color: #fff;
    color: #fff;
    width: 170px !important;
    height: auto;
    background: none
}

#paysafecard ul.list li .lottery-details a:after {
    background: #fff;
    border-radius: 2px
}

#paysafecard ul.list li .lottery-details a:hover {
    color: #073d40
}

#paysafecard ul.list li .lottery-details:before {
    position: absolute;
    top: 0;
    height: 102px;
    left: 0;
    width: 100%;
    background: #073d40;
    opacity: 0.9;
    content: " "
}

#paysafecard ul.list li .lottery-details:after {
    position: absolute;
    width: 11px;
    height: 5px;
    left: 50%;
    margin-left: -5px;
    top: 102px;
    border-top: 5px solid #073d40;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: " ";
    opacity: 0.9
}

#gold {
    background: #fff url(https://bananatic-15199.kxcdn.com/de/images/bg-gold.jpg) repeat-x top center;
    padding-bottom: 160px
}

#gold .find-game {
    padding-right: 64px
}

#gold .list {
    list-style: none;
    margin: 8px -9px
}

#gold .list li {
    float: left;
    width: 50%;
    padding: 0 9px;
    margin-bottom: 12px;
    height: 54px;
    float: left
}

#gold .list li .item {
    border: 1px solid #88b6b9;
    height: 54px;
    display: block;
    background: #fff;
    font-size: 16px;
    padding-right: 52px;
    position: relative;
    z-index: 4
}

#gold .list li .name {
    float: left;
    width: 44.93%;
    padding: 17px 19px 0 19px;
    height: 52px
}

#gold .list li .gold {
    float: left;
    width: 30.29%;
    border-left: 1px solid #88b6b9;
    border-right: 1px solid #88b6b9;
    padding: 18px 19px 0 19px;
    height: 52px;
    font-size: 16px
}

#gold .list li .price {
    float: left;
    width: 24.78%;
    padding: 17px 0 0 35px;
    height: 52px;
    color: #80bd39;
    font-size: 18px
}

#gold .list li .price:after {
    font-family: "banicon";
    content: "\e601";
    font-size: 14px;
    margin-left: 3px
}

#gold .list li .item a {
    position: absolute;
    top: 0;
    right: -1px;
    width: 52px;
    height: 52px;
    background: #116d73;
    font-size: 8px;
    color: #fff;
    text-align: center;
    padding-top: 21px
}

#gold .list li .item a i {
    display: block
}

#gold .list li .item a.opened i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

#gold .list li .item a:hover {
    background: #80bd39
}

#gold .list li .item:hover {
    border-color: #116d73;
    z-index: 1000
}

#gold .list li .all-items {
    position: relative;
    z-index: 1000;
    display: none;
    -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3)
}

#gold .list li .all-items .item {
    margin-top: -1px
}

#gold .list li .all-items .item .gold {
    margin-left: 44.93%;
    padding: 18px 20px 0 20px;
    font-size: 18px;
    border: 0
}

#gold .list li .all-items .item .gold img {
    width: 23px;
    height: 23px;
    float: left;
    margin: -2px 13px 0 0
}

#gold .list li .all-items .item .gold:after {
    float: right;
    content: "za";
    font-size: 16px;
    margin-top: 2px
}

#gold .list li .all-items .price {
    padding: 18px 0 0 35px
}

#gold .list li .all-items .item a {
    background: #ffb432;
    font-size: 18px;
    padding-top: 17px
}

#gold .list li .all-items .item a:hover {
    background: #ff9000
}

#recommend {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-recommend.jpg) repeat center center;
    color: #fff;
    text-align: center;
    padding: 0 0 40px 0
}

#recommend .header b {
    color: #fff
}

#recommend .header b:after, #recommend .header b:before {
    background: #93b7b5
}

#recommend h3 {
    font-family: ProximaNova-Bold;
    font-size: 22px;
    font-weight: normal;
    margin: 0 0 40px 0
}

#recommend .buttons {
    width: 848px;
    max-width: 100%;
    margin: 0 auto;
    text-align: justify
}

#recommend .buttons:after {
    content: " ";
    display: inline-block;
    width: 100%;
    height: 0
}

#recommend .buttons input {
    width: 100%;
    height: 54px;
    text-align: center;
    font-size: 18px;
    color: #80bd39;
    padding-top: 2px;
    border: 2px solid #116d73;
    border-radius: 8px;
    margin: 18px 0 24px 0
}

#recommend .buttons .shadow-btn {
    width: 24%;
    height: 40px
}

#recommend .buttons .shadow-btn b {
    padding-top: 14px;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase
}

#recommend .buttons .shadow-btn i {
    line-height: 40px;
    width: 34px;
    text-align: right;
    margin-right: -34px
}

#recommend .buttons .shadow-btn i + b {
    padding-left: 34px
}

#recommend .buttons .shadow-btn i:after {
    display: none
}

#recommend p {
    font-size: 17px;
    line-height: 47px;
    margin: 15px 0
}

#recommend .profit {
    font-size: 28px;
    display: inline-block;
    height: 70px;
    width: 184px;
    border: 2px solid #fff;
    border-radius: 8px;
    line-height: 66px;
    margin: 0 8px;
    color: #FBE12B
}

#recommend .profit .banicon {
    font-size: 20px
}

#recommend .profit.exp {
    color: #fba83e
}

#recommend .badge {
    width: 120px;
    height: 118px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-recommend-badge.png) no-repeat 0 0;
    display: inline-block
}

#recommend-stats {
    width: 365px;
    height: 273px;
    position: absolute;
    top: 319px;
    left: 0;
    background: #fff;
    border: 4px solid #68bde0;
    border-left: 0;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    padding: 35px;
    z-index: 100
}

#recommend-stats.hidden {
    left: -316px
}

#recommend-stats .toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 100%;
    background: #68bde0;
    color: #fff;
    font-size: 14px
}

#recommend-stats .toggle .banicon {
    position: absolute;
    top: 41px;
    left: 19px
}

#recommend-stats .toggle .banicon:before {
    display: block
}

#recommend-stats.hidden .toggle .banicon:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

#recommend-stats .toggle b {
    position: absolute;
    bottom: 45px;
    left: 19px;
    word-wrap: break-word;
    width: 10px;
    text-transform: uppercase;
    text-align: center
}

.csstransforms #recommend-stats .toggle b {
    width: 120px;
    left: -35px;
    bottom: 85px;
    letter-spacing: 3px;
    text-align: left;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

#recommend-stats dt {
    float: left;
    width: 185px;
    overflow: hidden;
    color: #2d8687;
    clear: both;
    font-size: 14px;
    position: relative;
    margin: 2px 15px 33px 0
}

#recommend-stats dt:after {
    content: " ";
    height: 1px;
    width: 100%;
    background: #e7e7e7;
    position: absolute;
    top: 7px;
    margin-left: 20px
}

#recommend-stats dd {
    font-size: 18px;
    color: #2d8687;
    font-family: ProximaNova-Semibold;
    float: left;
    margin: 0
}

#recommend-stats dd .banicon {
    font-size: 14px
}

#recommend-stats dt + dd + dt, #recommend-stats dt + dd + dt + dd {
    color: #66b9d1
}

#recommend-stats dt + dd + dt + dd + dt, #recommend-stats dt + dd + dt + dd + dt + dd {
    color: #f25d65
}

#recommend-stats dt + dd + dt + dd + dt + dd + dt, #recommend-stats dt + dd + dt + dd + dt + dd + dt + dd {
    color: #80bd39
}

#buy {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-buybananas.jpg) repeat top center
}

#buy .top {
    background: #0b4c50;
    padding: 42px 65px 40px 65px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px
}

#buy .top .left {
    float: left;
    width: 565px;
    margin-right: 35px;
    border-right: 1px solid #1f7e84;
    padding: 25px 0
}

#buy .top .left b {
    font-size: 20px;
    font-family: ProximaNova-Semibold
}

#buy .top .left .banicon-wallet {
    font-size: 38px;
    vertical-align: middle;
    position: relative;
    top: -7px;
    margin-right: 16px
}

#buy .top .right {
    overflow: hidden;
    width: auto;
    text-align: justify
}

#buy .top .right .box {
    width: 30%;
    display: inline-block;
    font-family: ProximaNova-Semibold;
    font-size: 14px;
    text-align: left;
    padding-top: 3px;
    vertical-align: bottom
}

#buy .top .right:after {
    content: " ";
    display: inline-block;
    width: 100%;
    height: 0
}

#buy .top .right .input-group {
    border-radius: 7px;
    overflow: hidden;
    height: 50px;
    background: #fff;
    text-align: center;
    margin-top: 11px;
    position: relative;
    line-height: 50px
}

#buy .top .right .input-group input {
    font-size: 18px;
    color: #116d73;
    font-family: ProximaNova-Bold;
    text-align: right;
    border: 0;
    background: transparent;
    height: 50px;
    width: 100%;
    padding-right: 45%
}

#buy .top .right .input-group .banicon-bananas {
    font-size: 14px;
    position: absolute;
    left: 55%;
    margin-left: 6px;
    color: #116d73;
    top: 17px
}

#buy .top .right .input-group a {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #3db99f;
    color: #fff;
    top: 0;
    text-align: center;
    left: 0;
    font-size: 36px;
    font-family: ProximaNova-Bold;
    line-height: 50px
}

#buy .top .right .input-group .plus {
    left: auto;
    right: 0
}

#buy .top .right .input-group a:hover {
    background: #14977c
}

#buy .top .right .cost {
    font-size: 18px;
    color: #80bd39;
    font-family: ProximaNova-Bold
}

#buy .top .right .cost:after {
    content: " zł"
}

#buy .top .right .commission {
    font-size: 18px;
    color: #4aa2da;
    font-family: ProximaNova-Bold
}

#buy .bottom {
    background: #0e5e63;
    padding: 35px 65px 50px 65px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    margin-bottom: 100px
}

#buy .bottom b {
    display: block;
    font-family: ProximaNova-Semibold;
    font-size: 14px;
    margin-bottom: 20px
}

#buy .bottom .options {
    text-align: justify
}

#buy .bottom .options:after {
    content: " ";
    display: inline-block;
    width: 100%;
    height: 0
}

#buy .bottom .options input {
    display: none
}

#buy .bottom .options label {
    display: inline-block;
    width: 30%;
    height: 260px;
    position: relative
}

#buy .bottom .options label:before {
    position: absolute;
    border-radius: 7px;
    background: #0b4b4f;
    top: 3px;
    left: -4px;
    width: 100%;
    height: 100%;
    z-index: 3;
    content: " "
}

#buy .bottom .options label span {
    position: absolute;
    border-radius: 7px;
    background: #fff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    cursor: pointer;
    line-height: 260px;
    text-align: center
}

#buy .bottom .options label span img {
    vertical-align: middle;
    opacity: 0.2;
    max-width: 90%;
    max-height: 90%
}

#buy .bottom .options input[type=radio]:checked:not(old) + label span {
    top: 3px;
    left: -3px
}

#buy .bottom .options label:hover img {
    opacity: 1
}

#buy .bottom .options input[type=radio]:checked:not(old) + label img {
    opacity: 1
}

#buy .bottom .sum {
    font-size: 28px;
    text-align: right;
    font-family: ProximaNova-Bold
}

#buy .bottom .sum:before {
    content: "Łączny koszt: ";
    font-size: 14px;
    font-family: ProximaNova-Semibold;
    margin-right: 25px;
    position: relative;
    top: -1px
}

#buy .submit {
    text-align: right;
    margin: 17px 0 0 0
}

#buy .submit input {
    height: 50px;
    padding: 0 100px;
    max-width: 100%;
    border: 0;
    font-family: ProximaNova-Bold;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    background: #f6a240;
    border-radius: 7px
}

#buy .submit input:hover {
    background: #dc8723
}

#social {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-social.jpg) repeat top center
}

#social .options {
    text-align: justify;
    margin-bottom: 240px
}

#social .options:after {
    content: " ";
    display: inline-block;
    width: 100%;
    height: 0
}

#social .options .box {
    display: inline-block;
    width: 32%;
    height: 540px;
    position: relative;
    margin-left: 6px;
    max-width: 356px
}

#social .options .box + .box {
    margin-left: 0
}

#social .options .box:before {
    content: " ";
    position: absolute;
    top: 6px;
    left: -6px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2;
    z-index: 3;
    border-radius: 7px
}

#social .options .box .option {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    z-index: 4;
    padding: 63px 33px 0 35px
}

#social .options .box .option.facebook {
    background: #4d81bc
}

#social .options .box .option.twitter {
    background: #4dbfe5
}

#social .options .box .option.google {
    background: #d54437
}

#social .options .box .option.youtube {
    background: #e92517
}

#social .options .box .option .content {
    width: 296px;
    max-width: 100%;
    margin: 0 auto;
    font-size: 15px;
    overflow: hidden;
    padding-left: 3px
}

#social .options .box .option .content > img {
    max-width: 100%;
    height: auto;
    margin: 0 auto 23px auto;
    display: block
}

#social .options .box .option .content .gain {
    position: relative
}

#social .options .box .option .content .gain:after {
    position: absolute;
    margin-left: 15px;
    width: 296px;
    height: 1px;
    background: #6699d2;
    content: " ";
    top: 9px
}

#social .options .box .option.twitter .content .gain:after {
    background: #6dd5f7
}

#social .options .box .option.google .content .gain:after {
    background: #fe7f85
}

#social .options .box .option .content .badge {
    margin: 30px 15px 37px 0;
    display: inline-block;
    width: 61px;
    height: 61px;
    position: relative;
    vertical-align: bottom
}

#social .options .box .option .content .badge img {
    position: relative;
    z-index: 4
}

#social .options .box .option .content .badge:before {
    position: absolute;
    z-index: 3;
    content: " ";
    top: 3px;
    left: -3px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2;
    border-radius: 50%
}

#social .options .box .option .content .exp {
    font-size: 26px;
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 52px
}

#social .options .box + .box .option .content .badge {
    margin-bottom: 100px
}

#social .options .box + .box .option .content .exp {
    margin-bottom: 115px
}

#social .options .box + .box + .box + .box .option .content .badge {
    margin-bottom: 163px
}

#social .options .box + .box + .box + .box .option .content .exp {
    margin-bottom: 178px
}

#social .options .box .task {
    position: relative;
    display: block
}

#social .options .box .task:before {
    width: 100%;
    height: 100%;
    content: " ";
    background: #000;
    position: absolute;
    top: 4px;
    left: -3px;
    z-index: 3;
    border-radius: 7px;
    opacity: 0.2
}

#social .options .box .task.complete {
    opacity: 0.3
}

#social .options .box .task a {
    display: block;
    position: relative;
    font-family: ProximaNova-Semibold;
    color: #fff;
    font-size: 15px;
    background: #6699d3;
    padding: 14px 0 14px 60px;
    margin-bottom: 19px;
    text-align: left;
    z-index: 4;
    border-radius: 7px;
    top: 0;
    left: 0
}

#social .options .box .task a:hover {
    top: 4px;
    left: -3px
}

#social .options .box .task.complete a:hover {
    top: 0;
    left: 0
}

#social .options .box .task a i {
    position: absolute;
    top: 13px;
    left: 22px;
    font-size: 18px
}

#social .options .box .task a i.banicon-user {
    top: 11px;
    left: 21px;
    font-size: 22px
}

#social .options .box .task a i.banicon-share {
    top: 11px;
    left: 20px;
    font-size: 20px
}

#social .options .box .option.twitter .task a {
    background: #5acbf0
}

#social .options .box .option.google .task a {
    background: #df5045
}

#social .options .box .option.youtube .task a {
    background: #ff3333
}

#social .options .box .option.completed {
    background: #1e858c
}

#social .options .box .option .done {
    height: 253px;
    display: block;
    border: 5px solid #fff;
    text-align: center;
    border-radius: 7px;
    font-family: ProximaNova-Bold;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 87px;
    position: relative
}

#social .options .box .option .done:before {
    position: absolute;
    top: -60px;
    left: -5px;
    width: 296px;
    height: 1px;
    background: #369fa6;
    content: " "
}

#social .options .box .option .done i {
    font-size: 50px;
    display: block;
    margin: 50px 0 35px 0
}

#exp {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-exp.jpg) repeat top center;
    background-size: cover
}

#exp .breadcrumb {
    margin-bottom: 35px
}

#exp .slogan {
    float: left;
    padding: 25px 75px 0 0;
    font-family: ProximaNova-Semibold;
    font-size: 20px
}

#exp .status {
    width: auto;
    overflow: hidden;
    font-size: 14px;
    color: #7eb8b7
}

#exp .status .bar {
    height: 22px;
    border: 2px solid #80bd39;
    background: #fff;
    border-radius: 7px;
    margin-top: 10px
}

#exp .status .bar .current {
    float: left;
    text-align: center;
    height: 18px;
    background: #80bd39;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    color: #fff;
    font-size: 12px;
    padding-top: 3px;
    min-width: 60px
}

#exp .status .bar .next {
    width: auto;
    overflow: hidden;
    text-align: center;
    height: 18px;
    font-size: 12px;
    color: #80bd39;
    padding-top: 3px
}

#exp .status .bar b {
    font-family: ProximaNova-Semibold
}

#exp ul.tasks {
    list-style: none;
    text-align: justify;
    margin: 62px -20px
}

#exp .tasks li {
    width: 20%;
    float: left;
    padding: 10px 20px;
    margin-bottom: 22px;
    height: 395px
}

#exp .tasks li a {
    display: block;
    height: 375px;
    text-align: center;
    border: 4px solid #fff;
    border-radius: 7px;
    padding: 48px 5px 0 5px
}

#exp .tasks li a.complete {
    background: rgba(30, 30, 30, 0.5);
    border-color: #FBE12B
}

#exp .tasks li a.complete b.exp:before {
    font-family: "banicon";
    content: "\e903";
    margin-right: 10px;
    color: #80BD39
}

#exp .tasks li a:hover {
    margin: -10px;
    height: 395px;
    padding: 58px 15px 10px 15px
}

#exp .tasks li a.complete:hover {
    margin: 0;
    padding: 48px 5px 0 5px;
    height: 375px
}

#exp .tasks .badge {
    width: 66px;
    height: 66px;
    display: inline-block;
    position: relative
}

#exp .tasks .badge:before {
    content: " ";
    background: #000;
    opacity: 0.2;
    position: absolute;
    top: 4px;
    left: -3px;
    width: 100%;
    height: 100%;
    border-radius: 50%
}

#exp .tasks .badge img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    z-index: 4
}

#exp .tasks .exp {
    font-size: 35px;
    color: #f6a240;
    display: block
}

#exp .tasks .name {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin: 45px 0 29px 0
}

#exp .tasks p {
    font-family: ProximaNova-Semibold;
    font-size: 18px;
    color: #fff;
    margin-top: 22px;
    line-height: 30px
}

#partner {
    background: #135a58 url(https://bananatic-15199.kxcdn.com/de/images/bg-partner.jpg) no-repeat top center;
    color: #fff;
    text-align: center
}

#partner .breadcrumb {
    text-align: left
}

#partner .slogan {
    font-size: 22px;
    font-family: ProximaNova-Semibold
}

#partner .slogan img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle
}

#partner.fk .slogan img {
    width: 384px;
    height: 42px;
    margin: 0 25px 8px 25px
}

#partner.sedoc .slogan {
    margin-top: -80px
}

#partner.sedoc .slogan img {
    width: 206px;
    height: 79px;
    margin: 0 18px 3px 18px
}

#partner.fg .slogan img {
    width: 360px;
    height: auto;
    margin: 0 25px 5px 25px
}

#partner .gain {
    font-size: 18px;
    margin: 21px 0 34px 0
}

#partner .gain b {
    font-size: 35px;
    color: #fbe12b;
    vertical-align: middle;
    margin-left: 25px;
    position: relative;
    top: -1px
}

#partner .gain b:after {
    font-size: 28px;
    font-family: "banicon";
    content: "\e601";
    margin-left: 8px
}

#partner .note {
    border: 3px solid #fff;
    padding: 25px 85px;
    display: inline-block;
    font-size: 18px;
    font-family: ProximaNova-Semibold
}

#partner.fk .note {
    padding-left: 60px;
    margin-left: 25px;
    border-left: 0;
    position: relative
}

#partner.fk .note:before {
    position: absolute;
    top: -3px;
    left: -25px;
    width: 25px;
    bottom: 22px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    content: " "
}

#partner.fk .note:after {
    bottom: 9px;
    left: -29px;
    width: 35px;
    height: 3.5px;
    background: #fff;
    content: " ";
    position: absolute;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

#partner.sedoc .note, #partner.fg .note {
    border-radius: 7px
}

#partner .banicon-logo-small {
    font-size: 26px;
    display: block;
    margin: 46px 0
}

#partner p, #partner .text, #partner .btn {
    margin: 0 auto 23px auto
}

#partner .text {
    max-width: 100%;
    width: 500px;
    height: 50px;
    position: relative
}

#partner.fk .text, #partner.fk .btn {
    padding: 0 20px
}

#partner .text input {
    color: #909090;
    padding: 16px 5px;
    width: 100%;
    text-align: center;
    border: 0;
    height: 50px;
    background: #fff
}

#partner.fk .text:before {
    content: " ";
    top: 0;
    left: 0;
    width: 20px;
    height: 50px;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #fff;
    position: absolute
}

#partner.fk .text:after {
    content: " ";
    top: 0;
    right: 0;
    width: 20px;
    height: 50px;
    border-left: 20px solid #fff;
    border-top: 20px solid transparent;
    position: absolute
}

#partner .btn {
    width: 296px;
    max-width: 100%;
    margin-bottom: 200px
}

#partner .btn button {
    background: #80bd39;
    padding: 17px 0;
    width: 100%;
    border: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    height: 50px;
    position: relative
}

#partner.fk .btn button:before {
    content: " ";
    top: 0;
    left: -20px;
    width: 20px;
    height: 50px;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #80bd39;
    position: absolute
}

#partner.fk .btn button:after {
    content: " ";
    top: 0;
    right: -20px;
    width: 20px;
    height: 50px;
    border-left: 20px solid #80bd39;
    border-top: 20px solid transparent;
    position: absolute
}

#partner .btn button:hover {
    background: #679c2a
}

#partner .btn button:hover:before {
    border-right: 20px solid #679c2a
}

#partner .btn button:hover:after {
    border-left: 20px solid #679c2a
}

#partner.sedoc .text input, #partner.sedoc .btn button, #partner.fg .btn button, #partner.fg .text input {
    border-radius: 7px
}

#partner .loading {
    margin: 31px 0 200px
}

#partner .loading:after {
    color: #fff
}

#partner a.history {
    float: right;
    margin: 88px 0 0 26px;
    width: 226px;
    border-color: #fff;
    color: #fff
}

#partner a.history:after {
    background: #fff
}

#partner a.history:hover {
    color: #116D73
}

#partner .breadcrumb {
    width: auto;
    overflow: hidden
}

#partner table {
    width: 100%;
    margin: 0 0 70px 0
}

#partner th {
    font-size: 16px;
    font-family: ProximaNova-Semibold;
    font-weight: normal;
    text-align: left;
    border-bottom: 1px solid #fff;
    padding: 12px 0
}

#partner th + th + th + th {
    width: 120px
}

#partner td {
    font-size: 18px;
    padding: 35px 0;
    text-align: left;
    border-bottom: 1px solid #2d8687
}

#partner td b {
    font-family: ProximaNova-Semibold;
    font-weight: normal
}

#partner .price {
    color: #80bd39
}

#partner .price:after {
    content: " zł"
}

#partner .points {
    color: #fbe12b
}

#partner .points:after {
    font-size: 14px;
    font-family: "banicon";
    content: "\e601";
    margin-left: 3px
}

#partner th.text-right {
    text-align: right;
    padding-right: 30px
}

#partner tfoot th {
    border: 0;
    padding: 35px 0
}

#partners {
    background: #135a58 url(https://bananatic-15199.kxcdn.com/de/images/bg-partners.jpg) repeat top center;
    color: #fff
}

#partners .breadcrumb {
    text-align: left
}

#partners ul.list {
    margin: 0 -20px 90px -20px;
    list-style: none
}

#partners ul.list li {
    width: 33.3%;
    padding: 0 20px;
    float: left;
    position: relative
}

#partners ul.list li:before {
    position: absolute;
    z-index: 3;
    background: #000;
    opacity: 0.2;
    border-radius: 7px;
    top: 3px;
    left: 17px;
    right: 23px;
    height: 100%;
    content: " "
}

#partners .partner {
    height: 373px;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    z-index: 4
}

#partners .partner.fg {
    background: #0d4e9c url(https://bananatic-15199.kxcdn.com/de/images/bg-partners-fg.png) no-repeat top right
}

.backgroundsize #partners .partner.fg {
    background-size: cover
}

#partners .partner.fg .decor {
    padding: 17px
}

#partners .partner.fk {
    background: #003b6d
}

#partners .partner.fk .decor {
    margin: 16px;
    border: 1px solid #00aeef;
    height: 341px;
    position: relative
}

.csstransforms #partners .partner.fk .decor:before {
    top: -15px;
    left: -15px;
    width: 30px;
    height: 30px;
    background: #003b6d;
    content: " ";
    position: absolute;
    border-right: 1px solid #00aeef;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.csstransforms #partners .partner.fk .decor:after {
    bottom: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: #003b6d;
    content: " ";
    position: absolute;
    border-left: 1px solid #00aeef;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

#partners .partner.sedoc {
    background: #197c9c
}

#partners .partner.sedoc .decor {
    margin: 10px;
    border: 2px solid #fff;
    border-radius: 7px;
    height: 354px;
    padding: 5px
}

#partners .partner .box {
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 5px
}

#partners .partner .image {
    height: 52px;
    margin: 12px 0 23px 0;
    line-height: 52px;
    display: block
}

#partners .partner img {
    max-height: 28px;
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle
}

#partners .partner.sedoc img {
    max-height: 52px
}

#partners .partner .gain {
    position: relative;
    font-size: 16px;
    font-family: ProximaNova-Semibold
}

#partners .partner .gain:after {
    position: absolute;
    margin-left: 15px;
    width: 296px;
    height: 1px;
    background: #fff;
    content: " ";
    top: 9px
}

#partners .partner .points {
    position: relative;
    font-size: 16px;
    font-family: ProximaNova-Semibold;
    display: block;
    margin: 12px 0 0 0;
    height: 77px
}

#partners .partner .points b {
    color: #fbe12b;
    font-size: 28px;
    position: relative;
    top: 4px
}

#partners .partner .points b:after {
    font-size: 22px;
    font-family: "banicon";
    content: "\e601";
    margin: 0 10px 0 5px
}

#partners .partner .btn {
    position: relative;
    display: block
}

#partners .partner .btn:before {
    width: 100%;
    height: 100%;
    content: " ";
    background: #000;
    position: absolute;
    top: 4px;
    left: -3px;
    z-index: 3;
    border-radius: 7px;
    opacity: 0.2
}

#partners .partner .btn a {
    display: block;
    position: relative;
    font-family: ProximaNova-Semibold;
    color: #fff;
    font-size: 15px;
    padding: 14px 0 14px 60px;
    margin-bottom: 19px;
    text-align: left;
    z-index: 4;
    border-radius: 7px;
    top: 0;
    left: 0
}

#partners .partner .btn a:hover {
    top: 4px;
    left: -3px
}

#partners .partner .btn a i {
    position: absolute;
    top: 12px;
    left: 22px;
    font-size: 20px
}

#partners .partner.fg .btn a {
    background: #2469bd
}

#partners .partner.fg .btn + .btn a {
    background: #49d3ff
}

#partners .partner.sedoc .btn a {
    background: #248aab
}

#partners .partner.fk .btn:before, #partners .partner.fk .btn a {
    border-radius: 0
}

#partners .partner.fk .btn a:before {
    width: 20px;
    height: 20px;
    top: 0;
    left: -3px;
    content: " ";
    z-index: 5;
    position: absolute;
    border-top: 20px solid #003b6d;
    border-right: 20px solid transparent
}

#partners .partner.fk .btn a:after {
    width: 20px;
    height: 20px;
    bottom: -4px;
    right: 0;
    content: " ";
    z-index: 5;
    position: absolute;
    border-right: 20px solid #003b6d;
    border-top: 20px solid transparent
}

#partners .partner.fk .btn a {
    background: #064981
}

#partners .partner.fk .btn + .btn a {
    background: #00aeef
}

#partners .join {
    font-size: 18px;
    text-align: center;
    margin-bottom: 100px
}

#partners .join b {
    font-size: 24px;
    display: block
}

#partners .join p {
    margin: 15px 0 30px 0
}

#partners .join .green {
    height: 44px
}

#partners .join .green b {
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 15px 90px;
    background: #80bd39
}

#partners .list.ads .partner.sedoc {
    background: #197c9c;
    height: 300px
}

#partners .list.ads {
    margin: 0 0 90px 0;
    padding-left: 16%
}

#partners .list.ads li {
    width: 40%
}

#partners .list.ads .partner.sedoc .decor {
    height: 281px
}

#partners .list.ads .partner .offer-box {
    display: block;
    font-family: ProximaNova-Semibold;
    font-size: 30px;
    text-align: center;
    margin: 26px 0
}

#apps {
    background: #0e585d url(https://bananatic-15199.kxcdn.com/de/images/bg-apps.jpg) repeat-x top center
}

#apps .slogan {
    text-align: center;
    font-size: 18px
}

#apps .slogan strong {
    display: block;
    font-size: 24px
}

#apps .slogan .points {
    color: #fbe12b;
    font-size: 30px;
    position: relative;
    top: 4px;
    margin-left: 10px
}

#apps .slogan .points:after {
    font-size: 22px;
    font-family: "banicon";
    content: "\e601";
    margin-left: 5px
}

#apps .list {
    overflow: hidden;
    margin: 90px 0 0 0
}

#apps .list ul {
    list-style: none;
    text-align: justify;
    margin: 0 -25px
}

#apps .list ul:after {
    display: inline-block;
    width: 100%;
    content: " ";
    height: 0
}

#apps .list li {
    width: 296px;
    height: 356px;
    margin: 0 25px;
    display: inline-block;
    vertical-align: top
}

#apps .list li a {
    position: relative;
    padding: 166px 0 0 0;
    display: block;
    text-align: center;
    color: #fff
}

#apps .list li .phone {
    position: absolute;
    width: 296px;
    height: auto;
    top: 0;
    left: 0;
    z-index: 3
}

#apps .list li .screen {
    position: absolute;
    width: 223px;
    height: 128px;
    top: 8px;
    left: 37px;
    z-index: 4
}

#apps .list li a:hover .phone {
    width: 259px;
    left: 18px;
    top: 8px
}

#apps .list li a:hover .screen {
    width: 196px;
    height: 112px;
    top: 16px;
    left: 51px
}

#apps .list li .name {
    font-size: 20px;
    display: block
}

#apps .list li .about {
    font-size: 16px;
    color: #77c2c3;
    display: block;
    margin: 7px 0 16px 0
}

#apps .list li .points {
    color: #fbe12b;
    font-size: 24px;
    position: relative;
    top: 3px;
    margin-left: 7px
}

#apps .list li .points:after {
    font-size: 18px;
    font-family: "banicon";
    content: "\e601";
    margin-left: 4px
}

#apps .list li a.completed:before {
    position: absolute;
    z-index: 6;
    width: 223px;
    height: 128px;
    top: 8px;
    left: 37px;
    content: "Aplikacja została już pobrana";
    background: #0b4d51;
    background: rgba(11, 77, 81, 0.8);
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-family: ProximaNova-Semibold;
    padding-top: 80px
}

#apps .list li a.completed:hover:before {
    width: 196px;
    height: 112px;
    top: 16px;
    left: 51px;
    padding-top: 72px
}

#apps .list li a.completed:after {
    content: "\e903";
    font-family: "banicon";
    color: #80bd39;
    font-size: 32px;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 7
}

#apps .list li a.completed .text {
    opacity: 0.3
}

#fkfg {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-fkfg.jpg) no-repeat top center;
    border-bottom: 9px solid #116d73
}

#fkfg.fg {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-fkfg2.jpg) no-repeat top center
}

#fkfg .breadcrumb {
    margin: 45px 0
}

#fkfg + .white .header .note {
    font-size: 16px;
    margin-left: 20px;
    font-family: ProximaNova-Regular;
    vertical-align: middle
}

#fkfg + .white .header .note:before {
    content: "* ";
    font-size: 30px;
    line-height: 16px;
    position: relative;
    top: 10px
}

#fkfg + .white .pager {
    list-style: none
}

#fkfg + .white .pager li {
    display: inline-block
}

#fkfg + .white .pager li a {
    display: inline-block;
    width: 31px;
    height: 31px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 14px
}

#fkfg + .white .pager li a:hover {
    background: #e6f3de
}

#fkfg + .white .pager li a.active {
    background: #ffa200;
    color: #fff;
    font-family: ProximaNova-Bold
}

#fkfg + .white .pager li a .banicon {
    font-size: 13px;
    color: #116d73;
    top: 1px;
    margin: 0 0 0 -2px
}

#fkfg + .white #prepaids {
    margin-bottom: 0
}

#fkfg + .white #prepaids + .header {
    margin-top: 0
}

#fkfg + .white #prepaids .price:before, #fkfg + .white #prepaids .price:after {
    content: "ok. ";
    font-size: 16px;
    color: #116d73;
    font-family: ProximaNova-Regular
}

#fkfg + .white #prepaids .price:after {
    content: "*";
    font-size: 30px
}

#fkfg + .white #prepaids .price .banicon {
    font-size: 20px
}

#fkfg form {
    padding-left: 336px;
    color: #fff;
    font-size: 16px;
    position: relative
}

#fkfg form .top {
    display: inline-block;
    padding: 21px 20px 21px 40px;
    background: #116d73;
    height: 62px;
    position: relative
}

#fkfg.fg form .top {
    padding: 26px 20px 16px 40px
}

#fkfg form .top img {
    height: 20px;
    width: auto;
    vertical-align: middle;
    margin-left: 12px
}

#fkfg form .top:after {
    top: 0;
    right: -17px;
    width: 17px;
    height: 62px;
    border-top: 17px solid transparent;
    border-left: 17px solid #116d73;
    content: " ";
    position: absolute
}

#fkfg form .bottom {
    padding: 35px 100px 10px 100px;
    background: #0e5e63;
    margin-bottom: 88px;
    position: relative;
    font-family: ProximaNova-Semibold;
    font-size: 14px
}

#fkfg form .bottom:after {
    content: " ";
    height: 48px;
    position: absolute;
    bottom: -48px;
    left: 0;
    border-left: 48px solid transparent;
    border-top: 48px solid #0e5e63;
    width: 100%
}

#fkfg.fg form .bottom {
    padding: 29px 100px 0 100px;
    border: 9px solid #116d73;
    border-bottom: 6px solid #116d73;
    background: #fff;
    color: #116d73
}

#fkfg.fg form .bottom:after {
    width: auto;
    left: -9px;
    right: -9px;
    bottom: -57px;
    height: 51px;
    border-top: 51px solid #116d73;
    border-left: 51px solid transparent
}

#fkfg.fg form .bottom:before {
    content: " ";
    height: 49px;
    position: absolute;
    bottom: -49px;
    left: 0;
    right: 0;
    border-left: 49px solid transparent;
    border-top: 49px solid #fff;
    z-index: 3
}

#fkfg.fg .discount .input-group input {
    border-top: 1px solid #88b6b9;
    border-bottom: 1px solid #88b6b9
}

#fkfg .discount {
    float: left;
    width: 31.2%
}

#fkfg .bananas {
    float: left;
    width: 25.6%;
    margin: 0 6.3%;
    position: relative;
    z-index: 3
}

#fkfg .btn {
    width: 30.6%;
    float: left;
    padding: 0 20px;
    margin-top: 26px
}

#fkfg .btn button {
    background: #80bd39;
    padding: 17px 0;
    width: 100%;
    border: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    height: 50px;
    position: relative;
    color: #fff
}

#fkfg .btn button:before {
    content: " ";
    top: 0;
    left: -20px;
    width: 20px;
    height: 50px;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #80bd39;
    position: absolute
}

#fkfg .btn button:after {
    content: " ";
    top: 0;
    right: -20px;
    width: 20px;
    height: 50px;
    border-left: 20px solid #80bd39;
    border-top: 20px solid transparent;
    position: absolute
}

#fkfg .btn button:hover {
    background: #679c2a
}

#fkfg .btn button:hover:before {
    border-right: 20px solid #679c2a
}

#fkfg .btn button:hover:after {
    border-left: 20px solid #679c2a
}

#fkfg .discount .input-group {
    overflow: hidden;
    height: 50px;
    background: #fff;
    text-align: center;
    margin-top: 11px;
    position: relative;
    line-height: 50px
}

#fkfg .discount .input-group input {
    font-size: 18px;
    color: #80bd39;
    border: 0;
    background: transparent;
    height: 50px;
    width: 100%;
    text-align: right;
    padding-right: 45%
}

#fkfg .discount .input-group .currency {
    font-size: 18px;
    position: absolute;
    left: 55%;
    margin-left: 6px;
    color: #80bd39
}

#fkfg .discount .input-group a {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #3db99f;
    color: #fff;
    top: 0;
    text-align: center;
    left: 0;
    font-size: 30px;
    padding: 0 0 0 1px
}

#fkfg .discount .input-group .plus {
    left: auto;
    right: 0;
    padding: 2px 1px 0 0
}

#fkfg .discount .input-group a:hover {
    background: #14977c
}

#fkfg .bananji {
    width: 239px;
    height: 228px;
    display: block;
    overflow: hidden;
    position: absolute;
    bottom: -88px;
    left: 0
}

#fkfg .bananji img {
    width: 100%;
    height: auto
}

#fkfg .bananas .price {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #fff;
    display: block;
    margin: 11px 0;
    font-size: 18px;
    color: #116d73;
    position: relative
}

#fkfg.fg .bananas .price {
    border: 1px solid #88b6b9
}

#fkfg .bananas .price .banicon {
    font-size: 14px
}

#fkfg .bananas .price:before, #fkfg .discount .input-group:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 17px;
    height: 17px;
    border-top: 17px solid transparent;
    border-left: 17px solid #0e5e63;
    content: " ";
    z-index: 3
}

#fkfg.fg .discount .input-group:before {
    border-left: 17px solid #fff
}

#fkfg.fg .bananas .price:before {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    border: 0;
    border-left: 1px solid #88b6b9;
    width: 28px;
    height: 28px;
    background: #fff;
    left: -14px;
    bottom: -14px
}

#fkfg .bananas .price:after, #fkfg .discount .input-group:after {
    position: absolute;
    top: 0;
    right: 0;
    width: 17px;
    height: 17px;
    border-left: 17px solid transparent;
    border-top: 17px solid #0e5e63;
    content: " ";
    z-index: 3
}

#fkfg.fg .discount .input-group:after {
    border-top: 17px solid #fff
}

#fkfg.fg .bananas .price:after {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    border: 0;
    border-right: 1px solid #88b6b9;
    width: 28px;
    height: 28px;
    background: #fff;
    right: -14px;
    top: -14px
}

#fkfg .bananas .left {
    float: left;
    height: 0;
    margin-left: 20px;
    font-family: ProximaNova-Bold;
    color: #ff6e75;
    font-size: 14px
}

#fkfg .bananas .left:before {
    color: #60c9b2;
    content: "Pozostało jeszcze: ";
    margin-right: 15px;
    font-family: ProximaNova-Semibold
}

#fkfg .bananas .left:after {
    font-family: "banicon";
    content: " \e601";
    font-size: 11px
}

#fkfg + .white {
    padding-top: 45px
}

#fkfg + .white .find-game {
    padding-right: 64px;
    margin-bottom: 45px
}

#fkfg + .white.fg .gametype li {
    width: 11.11%
}

#fkfg + .white.fg .gametype li .banicon {
    font-size: 42px;
    margin-top: 27px;
    margin-bottom: -5px
}

#fkfg + .white.fg .gametype li .banicon-fg-keyboard {
    font-size: 50px;
    margin-top: 23px;
    margin-bottom: -9px
}

#fkfg + .white.fg #prepaids ul {
    padding: 2px
}

#fkfg + .white.fg #prepaids li:hover {
    background: #fff
}

#fkfg + .white.fg #prepaids li {
    position: relative
}

#fkfg + .white.fg #prepaids li * {
    position: relative;
    z-index: 6
}

#fkfg + .white.fg #prepaids li:before {
    position: absolute;
    top: -3px;
    left: -3px;
    bottom: -3px;
    right: -3px;
    border: 3px solid #116d73;
    content: " ";
    opacity: 0;
    border-radius: 3px
}

#fkfg + .white.fg #prepaids li .box:hover:before {
    opacity: 1
}

#fkfg + .white #prepaids li .box {
    z-index: 3
}

#fkfg + .white #prepaids li .box:hover {
    height: 406px;
    z-index: 100
}

#fkfg + .white #prepaids .name {
    margin: 28px 0 3px 0
}

#fkfg + .white #prepaids .title {
    line-height: 16px
}

#fkfg + .white #prepaids a, #fkfg + .white.fg #prepaids li a {
    margin-top: 0;
    opacity: 1;
    position: absolute;
    bottom: auto;
    left: 23px;
    right: 23px;
    width: auto;
    top: 297px
}

#fkfg + .white #prepaids li:hover a {
    opacity: 1
}

#fkfg + .white #prepaids li .price {
    position: absolute;
    text-align: center;
    width: 100%;
    display: block;
    left: 0;
    top: 260px
}

#fkfg + .white #prepaids a.lottery, #fkfg + .white.fg #prepaids a.lottery {
    opacity: 0;
    top: auto;
    bottom: 30px;
    background: #86c043;
    height: 34px;
    border-radius: 10px;
    padding: 10px 0;
    font-family: ProximaNova-Bold;
    text-transform: uppercase;
    color: #fff;
    font-size: 13px;
    letter-spacing: 2px
}

#fkfg + .white #prepaids a.lottery:hover, #fkfg + .white.fg #prepaids a.lottery:hover {
    background: #5e981a
}

#contact {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-contact.jpg) repeat top center;
    background-size: cover
}

#contact form {
    margin: 10px 0 100px 0
}

#contact .form-group {
    margin: 0 auto 25px auto;
    width: 50%;
    max-width: 100%
}

#contact .form-group select, #contact .form-group input.text, #contact .form-group textarea {
    border: 1px solid #7ba9ac;
    background: #fff;
    width: 100%;
    padding: 12px;
    border-radius: 7px
}

#contact .form-group select {
    font-family: ProximaNova-Semibold;
    height: 43px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

#contact .form-group select option {
    padding: 3px 12px
}

#contact button {
    display: block;
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    padding: 12px 0;
    border-radius: 10px;
    letter-spacing: 3px;
    text-align: center;
    background: #80bd39;
    width: 100%;
    margin-top: 17px;
    border: 0
}

#contact button:hover {
    background: #679c2a
}

#contact ul.tickets {
    list-style: none;
    margin: 0 0 80px 0
}

#contact ul.tickets li {
    border-bottom: 1px solid #116d73;
    font-family: ProximaNova-Semibold;
    color: #91b0b3;
    padding: 20px 0
}

#contact ul.tickets li .id {
    width: 10%;
    display: inline-block;
    vertical-align: middle
}

#contact ul.tickets li .topic {
    display: inline-block;
    width: 55%;
    vertical-align: middle
}

#contact ul.tickets li .status {
    display: inline-block;
    width: 22%;
    vertical-align: middle
}

#contact ul.tickets li .date {
    display: inline-block;
    vertical-align: middle
}

#contact ul.tickets li + li {
    border: 0;
    padding: 0
}

#contact ul.tickets li a {
    display: block;
    color: #116d73;
    border-top: 1px solid #91b0b3;
    border-bottom: 1px solid #91b0b3;
    padding: 30px 0;
    margin-top: -1px;
    position: relative;
    z-index: 1;
    font-size: 18px
}

#contact ul.tickets li a:hover {
    color: #80bd39;
    border-color: #80bd39;
    z-index: 2000
}

#contact ul.tickets li a .topic {
    font-family: ProximaNova-Regular;
    font-size: 16px
}

#contact ul.tickets li a .topic b {
    font-size: 18px;
    display: block;
    margin-top: 5px;
    font-family: ProximaNova-Semibold
}

#contact ul.tickets li a .status {
    color: #80bd39
}

#contact ul.tickets li a .status.closed {
    color: #91b0b3
}

#contact .all-tickets {
    float: right;
    width: 260px;
    margin-left: 40px;
    margin-top: 39px
}

#contact .all-tickets + .breadcrumb {
    width: auto;
    overflow: hidden
}

#contact .ticket-header {
    background: #106d74;
    color: #a8c7ca;
    padding: 22px 30px;
    margin-bottom: 25px
}

#contact .ticket-header .id {
    font-size: 18px
}

#contact .ticket-header .id b {
    color: #fff;
    font-family: ProximaNova-Semibold
}

#contact .ticket-header .date {
    float: right;
    color: #fff
}

#contact .ticket-header .date:before {
    content: "Data: ";
    margin-right: 10px;
    color: #a8c7ca;
    font-size: 14px
}

#contact .ticket-header .topic {
    color: #fff;
    padding-left: 70px;
    margin-left: 70px;
    border-left: 1px solid #5e9ba0
}

#contact .ticket-header .topic:before {
    content: "Temat: ";
    margin-right: 10px;
    color: #a8c7ca;
    font-size: 14px
}

#contact ul.ticket {
    list-style: none
}

#contact ul.ticket li {
    margin-bottom: 25px;
    border: 1px solid #86b6b8;
    padding: 22px 30px 30px 30px;
    background: #f5f5f5
}

#contact ul.ticket li.admin {
    background: #fff
}

#contact ul.ticket .date {
    float: right;
    font-family: ProximaNova-Semibold;
    margin-top: 6px
}

#contact ul.ticket .name {
    display: block;
    border-bottom: 1px solid #a7c9cb;
    position: relative;
    padding-left: 34px;
    font-size: 18px;
    padding: 5px 0 18px 34px
}

#contact ul.ticket .name:before {
    content: " ";
    background: #5dc6a7;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    top: 5px;
    left: 2px;
    position: absolute
}

#contact ul.ticket li.admin .name:before {
    background: #80bb3a;
    border-radius: 0;
    width: 14px;
    height: 14px;
    top: 7px;
    left: 3px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

#contact ul.ticket li p {
    font-size: 14px;
    line-height: 24px;
    color: #106d72;
    margin: 15px 0 0 0
}

#contact ul.ticket li:hover {
    margin: 0 -20px 25px -20px;
    padding: 22px 50px 30px 50px;
    -webkit-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3)
}

#contact ul.ticket .attachment {
    font-size: 14px;
    float: right
}

#contact ul.ticket .attachment i {
    position: relative;
    top: 1px
}

#contact .add-reply {
    border: 1px solid #86b6ba;
    background: #dcecec;
    padding: 40px 30px;
    text-align: right
}

#contact .add-reply a {
    color: #80be39;
    font-family: ProximaNova-Semibold
}

#contact .add-reply textarea {
    width: 100%;
    border: 1px solid #76abaf;
    background: #fff;
    padding: 18px 25px;
    border-radius: 8px;
    resize: none;
    margin-bottom: 19px
}

#contact .add-reply button {
    width: 31%;
    height: 45px;
    background: #80BE39;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding-top: 14px;
    font-family: ProximaNova-Semibold;
    margin: 0 0 0 22px;
    float: none;
    display: inline-block;
    vertical-align: top;
    letter-spacing: 3px
}

#contact .add-reply button:hover {
    background: #1eb95f
}

#contact .add-reply .inputfile {
    width: 22%;
    height: 45px;
    background: #a4c6c8;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding-top: 15px;
    margin: 0;
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: top;
    letter-spacing: 3px
}

#contact .add-reply .inputfile:hover {
    background: #8badaf
}

#contact .add-reply .inputfile b {
    font-family: ProximaNova-Semibold;
    text-transform: uppercase
}

#contact .add-reply .inputfile i {
    font-size: 21px;
    top: 12px;
    left: 9%;
    position: absolute
}

#contact .add-reply .inputfile input {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 7;
    font-size: 200px
}

#contact .add-reply .inputfile + .selected {
    position: absolute;
    height: 0;
    margin-left: -17%;
    font-size: 12px;
    color: #658E92;
    font-family: ProximaNova-Regular;
    margin-top: 54px
}

#contact .add-reply .inputfile + .selected a {
    color: #86b6b8
}

#contact .add-reply .inputfile + .selected a:hover {
    color: #8badaf
}

#contact .add-reply .inputfile + .selected i {
    font-size: 10px;
    margin-right: 5px
}

#help {
    background: #1a6d73 url(https://bananatic-15199.kxcdn.com/de/images/bg-help.jpg) no-repeat top center;
    background-size: cover;
    padding-bottom: 50px
}

#help .header {
    margin: 6px 0 10px 0
}

#help .sections {
    list-style: none;
    margin-bottom: 20px;
    float: left;
    width: 20.5%;
    border: 1px solid #afced0
}

#help .sections li + li {
    border-top: 1px solid #afced0
}

#help .sections li a {
    display: block;
    background: #fff;
    font-size: 16px;
    color: #116d73;
    padding: 18px 5px 22px 32px
}

#help .sections li a strong {
    font-family: ProximaNova-Semibold
}

#help .sections li a:hover, #help .sections li a.active {
    background: #e3f3f4
}

#help .section {
    float: right;
    width: 76.2%
}

#help .section ul {
    list-style: none;
    text-align: justify
}

#help .section li {
    counter-increment: step-counter;
    position: relative;
    margin-bottom: 25px;
    color: #116d73;
    background: #fff
}

#help .section li:before {
    content: counter(step-counter);
    position: absolute;
    width: 95px;
    text-align: center;
    top: 40px;
    left: 0;
    font-family: ProximaNova-Semibold;
    font-size: 24px
}

#help .section a {
    border: 1px solid #88b6b9;
    display: block;
    padding: 40px 70px 40px 130px;
    font-size: 22px;
    font-family: ProximaNova-Semibold;
    color: #116d73;
    position: relative
}

#help .section a:before {
    content: " ";
    width: 4px;
    height: 34px;
    background: #dbeeef;
    position: absolute;
    top: 33px;
    left: 88px
}

#help .section a:after {
    position: absolute;
    top: 42px;
    right: 40px;
    content: "\e602";
    font-family: 'banicon';
    font-size: 15px;
    display: block
}

#help .section a.opened:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

#help .section a:hover, #help .section a.opened {
    border-color: #fff
}

#help .section a.opened {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

#help .section li p {
    display: none;
    padding: 40px 50px;
    border-top: 4px solid #dbeeef;
    position: relative;
    top: -4px;
    font-size: 16px;
    line-height: 30px
}

#promo-prepaids + .bananji.cs {
    width: 267px;
    height: 220px
}

#csgo {
    border-bottom: 9px solid #116D73
}

#csgo + .white .find-game {
    float: none;
    margin: 46px auto;
    padding-right: 64px;
    width: 603px;
    max-width: 100%
}

#creator {
    position: relative;
    min-height: 591px
}

#creator:after {
    position: absolute;
    top: 591px;
    bottom: 0;
    left: 0;
    right: 0;
    background: #063e41;
    content: ""
}

#creator .breadcrumb.dark {
    margin: 34px 0 12px 0
}

#creator .box {
    position: relative;
    z-index: 10
}

#creator .parts {
    margin: 6px 0 0 70px;
    font-size: 0
}

#creator .parts:after {
    clear: both;
    width: 100%;
    display: block;
    height: 0;
    content: ""
}

#creator .parts a {
    position: relative;
    height: 50px;
    width: 50px;
    background: #1e6f74;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    line-height: 50px;
    margin-right: 10px;
    margin-top: 30px;
    float: left
}

#creator .parts a:hover {
    background: #0f585d
}

#creator .parts a .banicon {
    vertical-align: middle;
    position: relative;
    z-index: 10
}

#creator .parts a .banicon-remove, #creator .parts a .banicon-face {
    font-size: 13px
}

#creator .parts a .banicon-random, #creator .parts a .banicon-male, #creator .parts a .banicon-female {
    font-size: 18px
}

#creator .parts a .banicon-tree {
    font-size: 19px
}

#creator .parts a .banicon-banan {
    font-size: 21px
}

#creator .parts a .banicon-hair {
    font-size: 14px;
    top: -2px
}

#creator .parts a.male {
    background: #4282aa;
    margin-left: 60px;
    opacity: 0.8
}

#creator .parts a.female {
    background: #d67171;
    margin-right: 0;
    opacity: 0.8
}

#creator .parts a.male.active {
    background: #4776ac;
    opacity: 1.0
}

#creator .parts a.female.active {
    background: #E0535B;
    opacity: 1.0
}

#creator .parts a.male:hover {
    background: #2171a3
}

#creator .parts a.female:hover {
    background: #c64141
}

#creator .parts .part-types {
    display: block;
    width: auto;
    overflow: hidden;
    height: 90px;
    padding-top: 20px;
    text-align: center
}

#creator .parts .part-types a {
    display: inline-block;
    float: none
}

#creator .parts .part {
    width: 70px;
    height: 70px;
    border: 2px solid #0ea177;
    margin-right: 7px;
    margin-top: 0;
    background: #063e41;
    line-height: 66px
}

#creator .parts .part:before {
    position: absolute;
    z-index: 5;
    width: 50px;
    height: 50px;
    background: #0ea177;
    left: 8px;
    top: 8px;
    content: "";
    border-radius: 50%
}

#creator .parts a b {
    font-size: 13px;
    position: absolute;
    top: -20px;
    line-height: 13px;
    left: -26px;
    width: 100px;
    text-align: center;
    opacity: 0;
    pointer-events: none
}

#creator .parts a:hover b {
    opacity: 1
}

#creator .parts a.part b {
    left: -18px
}

#creator .parts .part:hover {
    background: #063e41;
    border-color: #fbe12b
}

#creator .parts .part.active {
    border-color: #fbe12b
}

#creator .parts .part.active:before {
    background: #063e41
}

#creator .parts .save {
    float: right;
    height: 45px;
    border-radius: 7px;
    background: #80bd39;
    margin: 33px 0 0 0;
    width: auto;
    line-height: 45px;
    position: relative
}

#creator .parts .save:after {
    position: absolute;
    right: 48px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #fff;
    opacity: 0.3;
    content: ""
}

#creator .parts .save:hover {
    background: #5f8c2a
}

#creator .parts .save b {
    padding: 0 35px;
    font-family: ProximaNova-Bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: static;
    opacity: 1;
    line-height: 46px
}

#creator .parts .save .banicon-ok {
    font-size: 15px;
    padding: 0 13px;
    top: -6px
}

#creator #character {
    margin: 10px auto 85px auto;
    margin-left: -178px;
    left: 50%;
    position: absolute
}

.banana {
    width: 357px;
    position: relative;
    overflow: visible
}

.banana:before {
    position: absolute;
    content: "";
    width: 31.65267%;
    height: 8.24%;
    left: 34.173665%;
    bottom: calc(-100% * 0.033);
    background: url(https://bananatic-15199.kxcdn.com/de/photos/shop/torso-shadow.png) no-repeat center center;
    background-size: contain;
    z-index: 1
}

.banana:after {
    position: relative;
    display: block;
    content: "";
    width: 100%;
    padding-top: 98.599439775910364145658263305322%;
    background: url(https://bananatic-15199.kxcdn.com/de/photos/shop/torso-base.png) no-repeat center 1px;
    background-size: contain;
    z-index: 2
}

.banana img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto
}

.banana .torso {
    z-index: 4
}

.banana .face {
    z-index: 3
}

.banana .head {
    z-index: 5
}

#creator #character b {
    font-size: 24px;
    color: #fff;
    bottom: 20px;
    position: absolute;
    left: 0;
    width: 100%
}

#creator #info {
    height: 74px;
    position: relative;
    padding: 3px 0 0 102px;
    margin-top: 388px;
    width: auto;
    overflow: hidden
}

#creator #info img.avatar {
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 74px;
    height: 74px
}

#creator #info .lvl {
    line-height: 26px;
    height: 26px;
    color: #fbe12b;
    font-size: 29px;
    padding-right: 30px;
    float: left;
    position: relative;
    margin-right: 26px
}

#creator #info .lvl:before {
    font-size: 28px;
    font-family: ProximaNova-Regular;
    color: #fff;
    content: "lvl";
    margin-right: 5px
}

#creator #info .lvl:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: #fff;
    content: ""
}

#creator #info .nick {
    font-size: 29px;
    float: left;
    line-height: 26px;
    height: 26px
}

#creator #info p {
    float: none;
    width: auto;
    overflow: hidden;
    font-size: 14px;
    text-align: right;
    padding: 9px 0 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    visibility: hidden
}

#creator #info .status {
    width: 100%;
    display: block;
    position: relative;
    z-index: 4;
    margin-top: 20px
}

#creator #info .status .bar {
    height: 20px;
    border: 2px solid #80bd39;
    background: #fff;
    border-radius: 7px
}

#creator #info .status .bar .current {
    float: left;
    text-align: center;
    height: 16px;
    background: #80bd39;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    white-space: nowrap;
    min-width: 45px
}

#creator #info .status .bar .current b {
    color: #fff;
    font-family: ProximaNova-Bold
}

#creator #info .status .bar .next {
    width: auto;
    overflow: hidden;
    text-align: center;
    height: 16px;
    font-size: 12px;
    color: #80bd39;
    line-height: 18px
}

#creator #info .status .bar b {
    font-family: ProximaNova-Bold;
    font-size: 12px;
    letter-spacing: 0
}

#creator .list {
    height: 144px;
    margin: 50px 0 78px 0
}

#creator .list .content {
    height: 144px;
    position: relative;
    margin: 0;
    padding: 0 70px
}

#creator .list .content img {
    width: 100%;
    height: auto
}

#creator .list .content .up, #creator .list .content .down {
    width: 35px;
    height: 144px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 144px;
    color: #fff;
    font-size: 24px;
    color: #d8d8d8
}

#creator .list .content .up:hover, #creator .list .content .down:hover {
    color: #fff
}

#creator .list .content .down {
    left: auto;
    right: 0;
    text-align: right
}

#creator .list .content ul {
    list-style: none;
    height: 295px;
    white-space: nowrap;
    font-size: 0;
    overflow: hidden;
    padding-top: 4px;
    margin-top: -4px;
    margin-bottom: -150px
}

#creator .list .content ul li {
    display: none;
    position: relative;
    background: #023538;
    border-radius: 8px;
    height: 144px;
    width: 101px;
    margin: 0 16px 0 0;
    position: relative;
    vertical-align: top;
    cursor: pointer
}

#creator .list .content ul li.active {
    display: inline-block
}

#creator .list .content ul li.locked .image {
    opacity: 0.4
}

#creator .list .content ul li.locked:after {
    width: 26px;
    height: 26px;
    text-align: center;
    background: #1e6f74;
    border-radius: 50%;
    z-index: 10;
    top: -4px;
    right: -4px;
    content: "\e61b";
    position: absolute;
    color: #78a9ac;
    font-size: 13px;
    font-family: banicon;
    line-height: 23px
}

#creator .list .content ul li.locked:before {
    width: 17px;
    height: 17px;
    z-index: 10;
    top: 43px;
    left: 50%;
    content: "+";
    position: absolute;
    color: #fff;
    line-height: 17px;
    margin-left: -8px;
    font-size: 27px;
    font-family: ProximaNova-Bold;
    text-align: center;
    opacity: 0
}

#creator .list .content ul li.locked:hover {
    height: 216px
}

#creator .list .content ul li.locked:hover .image {
    opacity: 0.4
}

#creator .list .content ul li.locked:hover:before {
    opacity: 1
}

#creator .list .content ul .image {
    background: #fdf4d1;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    display: block;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
    z-index: 5;
    text-align: center
}

#creator .list .content ul .image {
    height: 101px;
    width: 101px;
    position: relative
}

#creator .list .content ul .head .image {
    background: #fff
}

#creator .list .content ul .head .image img {
    margin-top: 10px
}

#creator .list .content ul .face .image img {
    margin-top: -110px;
    margin-left: -126px;
    width: auto
}

#creator .list .content ul .torso .image {
    background: #1e6f74
}

#creator .list .content ul .torso .image:before {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -40px;
    background: url(https://bananatic-15199.kxcdn.com/de/photos/shop/torso-base.png) no-repeat center center;
    background-size: contain;
    z-index: 1;
    content: ""
}

#creator .list .content ul .torso .image img {
    width: 80px;
    position: relative;
    z-index: 2
}

#creator .list .content ul .background .image img {
    width: auto;
    margin-top: 0;
    height: 101px;
    margin-left: -170px
}

#creator .list .content ul li.opened .image {
    top: 14px;
    right: 14px
}

#creator .list .content ul li .text {
    background: #023538;
    width: 101px;
    height: 43px;
    display: block;
    margin: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

#creator .list .content ul li.locked:hover .text {
    padding: 0 10px;
    width: 121px;
    margin: 0 -10px 0 -10px;
    height: 115px
}

#creator .list .content ul .lvl {
    font-size: 15px;
    position: absolute;
    top: 117px;
    right: 12px;
    color: #fff
}

#creator .list .content ul .lvl:before {
    font-size: 12px;
    font-family: ProximaNova-Regular;
    color: #fff;
    content: "lvl";
    margin-right: 4px
}

#creator .list .content ul .banicon-male, #creator .list .content ul .banicon-female {
    font-size: 14px;
    position: absolute;
    top: 116px;
    left: 14px;
    color: #87ceed
}

#creator .list .content ul .banicon-female {
    color: #fc9280
}

#creator .list .content ul .transea {
    position: absolute;
    top: 193px;
    left: 0;
    width: 101px;
    color: #fff;
    border: 0;
    opacity: 0;
    z-index: 2;
    height: 38px;
    padding: 5px 0;
    font-family: ProximaNova-Bold;
    text-transform: uppercase;
    color: #fff;
    font-size: 10px;
    background: #ff7900;
    line-height: 29px
}

#creator .list .content ul li.locked:hover .transea {
    opacity: 1;
    color: #fff
}

#creator .list .content ul .transea:after {
    background: transparent;
    display: none
}

#creator .list .content ul .transea:hover {
    color: #0b4d51
}

#creator .lottery {
    top: 150px;
    left: 0;
    width: 101px;
    z-index: 10;
    color: red;
    position: absolute;
    opacity: 0;
    width: 101px;
    height: 38px;
    background: #86c043;
    border-radius: 7px;
    padding: 5px 0;
    font-family: ProximaNova-Bold;
    text-transform: uppercase;
    color: #fff;
    font-size: 10px;
    letter-spacing: 2px;
    text-align: center;
    line-height: 29px
}

#creator .locked:hover .lottery {
    opacity: 1;
    top: 175px
}

#creator .list .content ul .name {
    position: absolute;
    font-size: 14px;
    top: 18px;
    left: 25px;
    font-family: ProximaNova-Semibold;
    display: none
}

#creator .list .content ul .points {
    color: #fbe12b;
    font-size: 26px;
    position: absolute;
    top: 143px;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0
}

#creator .list .content ul .points:after {
    font-size: 19px;
    font-family: "banicon";
    content: "\e601";
    margin-left: 4px
}

#creator .list .content ul .locked:hover .points {
    opacity: 1
}

#creator-sets ul {
    list-style: none;
    font-size: 18px;
    font-size: 0;
    text-align: justify;
    margin-bottom: 50px
}

#creator-sets ul:after {
    display: inline-block;
    width: 100%;
    height: 0;
    content: " "
}

#creator-sets li {
    display: inline-block;
    width: 297px;
    height: 385px;
    margin: 0 0 50px 0;
    vertical-align: top
}

#creator-sets li.empty {
    height: 1px
}

#creator-sets li a {
    display: block;
    width: 297px;
    height: 385px;
    border: 6px solid #0e585d;
    background: #227c82 url(https://bananatic-15199.kxcdn.com/de/images/bg-creator-set.png) no-repeat center center;
    border-radius: 7px;
    text-align: center;
    color: #fff
}

#creator-sets li a:hover {
    background-color: #1e6f74;
    color: #fbe12b
}

#creator-sets .banana {
    width: 250px;
    display: block;
    margin: 10px auto 40px auto
}

#creator-sets li .name {
    color: #fff;
    font-size: 18px;
    display: block;
    margin: 5px 0 12px 0
}

#creator-sets li .points {
    font-size: 26px
}

#creator-sets li .points:after {
    font-size: 18px;
    font-family: "banicon";
    content: "\e601";
    margin-left: 4px
}

#creator-sets li .points:before {
    font-size: 15px;
    content: "lub";
    margin: 0 15px
}

#creator-sets li .lvl {
    font-size: 26px
}

#creator-sets li .lvl:before {
    content: "lvl "
}

#creator .wrapper {
    position: relative;
    padding-top: 1px
}

#creator #cart {
    width: 395px;
    min-height: 350px;
    margin-left: 40px;
    margin-right: -10px;
    float: right
}

#creator #cart ul {
    min-height: 291px;
    overflow: auto;
    margin: 0 0 25px 0;
    padding: 0 10px 0 0;
    list-style: none
}

#creator #cart ul li {
    padding: 26px 14px 14px 70px;
    display: block;
    margin: 0;
    position: relative;
    height: 79px;
    font-size: 0
}

#creator #cart ul li + li {
    margin-top: 23px
}

#creator #cart ul li:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #063e41;
    opacity: 0.9;
    content: "";
    border-radius: 18px
}

#creator #cart ul li * {
    position: relative;
    z-index: 2
}

#creator #cart ul li .image {
    position: absolute;
    top: 13px;
    left: 14px;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden
}

#creator #cart ul li .image.torso img {
    height: 80px;
    margin-top: -31px;
    margin-left: -16px
}

#creator #cart ul li .image.face {
    background: #fdf4cb
}

#creator #cart ul li .image.face img {
    margin-top: -38px;
    margin-left: -50px;
    width: 150px
}

#creator #cart ul li .image.head {
    background: #fff
}

#creator #cart ul li .image.head img {
    width: 52px;
    margin-top: 5px
}

#creator #cart ul li .image.background img {
    height: 52px;
    margin-left: -80px
}

#creator #cart ul li .lvl {
    font-size: 18px;
    color: #f4831e;
    margin: 0 13px;
    display: inline-block
}

#creator #cart ul li .or {
    font-size: 14px;
    font-family: ProximaNova-Regular;
    color: #fff
}

#creator #cart ul li .points {
    font-size: 18px;
    color: #fbe12b;
    display: inline-block;
    margin: 0 13px
}

#creator #cart ul li .points:after {
    font-size: 16px;
    font-family: "banicon";
    content: "\e601";
    margin-left: 4px
}

#creator #cart ul li .remove {
    position: absolute;
    top: 22px;
    right: -10px;
    width: 33px;
    height: 33px;
    text-align: center;
    line-height: 33px;
    background: #06383b;
    color: #fff;
    font-size: 9px;
    border-radius: 50%
}

#creator #cart ul li .win {
    width: 83px;
    height: 31px;
    display: inline-block;
    font-size: 10px;
    letter-spacing: 2px;
    color: #fff;
    font-family: ProximaNova-Bold;
    line-height: 31px;
    background: #80bd39;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    margin-left: 13px;
    top: -2px
}

#creator #cart ul li .win:hover {
    background: #5f8c2a
}

#creator #cart .summary {
    padding-right: 10px;
    display: none
}

#creator.show-summary #cart .summary {
    display: block
}

#creator #cart .summary b {
    width: 212px;
    text-align: center;
    color: #fbe12b;
    font-size: 22px;
    padding: 11px 0;
    border-radius: 10px;
    background: #0a4142;
    float: left
}

#creator #cart .summary b:after {
    font-family: "banicon";
    content: "\e601";
    margin-left: 4px;
    font-size: 18px
}

#creator #cart .summary input {
    float: right;
    background: #f4831e;
    font-size: 12px;
    font-family: ProximaNova-Bold;
    letter-spacing: 2px;
    padding: 16px 0;
    border-radius: 10px;
    text-transform: uppercase;
    border: 0;
    width: 148px
}

#creator #cart .loading:after {
    color: #fff
}

#creator.your-banana {
    background-position: top center;
    height: 650px;
    padding-bottom: 10px
}

#creator.your-banana:after {
    display: none
}

#creator.your-banana .header {
    padding: 35px 0 15px 0
}

#creator.your-banana .header b {
    font-size: 28px
}

#creator.your-banana .level {
    color: #116d73
}

#creator.your-banana .level:before {
    border-color: #116d73
}

#creator.your-banana .transea {
    border-color: #116d73;
    color: #116d73;
    margin-top: 20px
}

#creator.your-banana .transea:hover {
    color: #fff
}

#creator.your-banana .transea:after {
    background: #116d73
}

#creator.your-banana .grass {
    bottom: 120px
}

#creator.your-banana .shadow-btn {
    width: 181px;
    margin: 0 3px
}

#creator.your-banana #character {
    position: relative;
    top: auto;
    left: auto;
    margin: -10px auto 30px auto
}

#creator.your-banana .transea {
    width: 226px;
    height: 34px;
    margin-top: 30px
}

#creator.modify-banana {
    height: auto
}

#creator.modify-banana .container {
    padding-top: 100px;
    padding-bottom: 50px
}

#creator.modify-banana .list ul .use, #creator.modify-banana .list ul .remove {
    position: absolute;
    top: 31px;
    left: 29px;
    width: 150px;
    height: 34px;
    background: #4aa2da;
    text-align: center;
    opacity: 0;
    font-size: 12px;
    text-transform: uppercase;
    font-family: ProximaNova-Semibold;
    letter-spacing: 2px;
    color: #fff;
    padding-top: 11px;
    border-radius: 7px
}

#creator.modify-banana .list ul .remove {
    top: 80px;
    background: #F35D66
}

#creator.modify-banana .list ul .use:hover {
    background: #3387bc
}

#creator.modify-banana .list ul .remove:hover {
    background: #ca3f46
}

#creator.modify-banana .list ul .opened .use, #creator.modify-banana .list ul .opened .remove {
    opacity: 1
}

#creator.modify-banana .save {
    clear: both;
    text-align: center;
    padding-top: 89px
}

#creator.modify-banana .save .shadow-btn {
    width: 220px;
    text-transform: uppercase;
    height: 45px;
    margin: 0 5px
}

#creator.modify-banana .save .shadow-btn.green b {
    background: #80bd39
}

#creator.modify-banana .save .shadow-btn b {
    font-size: 13px;
    letter-spacing: 2px;
    padding: 17px 52px 0 0;
    font-family: ProximaNova-Semibold
}

#creator.modify-banana .save .shadow-btn i {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    line-height: 44px
}

#creator.modify-banana .save .shadow-btn i:after {
    right: 100%
}

#creator.modify-banana .save .shadow-btn i.banicon-refresh {
    font-size: 18px
}

.sea.modify-banana .header {
    margin: 0
}

.sea.modify-banana .header b {
    font-size: 28px;
    letter-spacing: 2px
}

.sea.modify-banana .header .transea {
    float: none;
    border-color: #fff;
    background: #116D73;
    color: #fff;
    margin: 0 15px;
    top: -3px;
    padding: 9px 0;
    width: 120px
}

.sea.modify-banana .header .transea:before {
    left: 100%;
    width: 15px;
    background: #116D73;
    margin-left: 2px
}

.sea.modify-banana .header .transea:after {
    background: #fff
}

.sea.modify-banana .header .transea:hover strong {
    color: #116D73
}

.sea.modify-banana .header .level {
    font-size: 30px;
    font-style: italic;
    font-family: Impact, Charcoal, sans-serif;
    letter-spacing: 4px;
    margin-left: 75px;
    padding: 0 30px 5px 24px;
    display: inline-block;
    position: relative;
    z-index: 4;
    background: #116D73;
    vertical-align: middle
}

.sea.modify-banana .header .status {
    width: 526px;
    display: inline-block;
    background: #116D73;
    position: relative;
    z-index: 4;
    vertical-align: middle;
    margin-left: -4px;
    padding-bottom: 5px
}

.sea.modify-banana .header .status .bar {
    height: 16px;
    border: 2px solid #fff;
    background: #0b4d51;
    background: rgba(11, 77, 81, 0.8);
    border-radius: 7px;
    width: 500px;
    display: inline-block
}

.sea.modify-banana .header .status .bar .current {
    float: left;
    text-align: center;
    height: 12px;
    background: #fff;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    font-size: 12px;
    color: #116D73
}

.sea.modify-banana .header .status .bar .current b {
    color: #116D73
}

.sea.modify-banana .header .status .bar .next {
    width: auto;
    overflow: hidden;
    text-align: center;
    height: 12px;
    font-size: 12px;
    color: #fff
}

.sea.modify-banana .header .status .bar b {
    font-family: ProximaNova-Semibold;
    font-size: 12px;
    letter-spacing: 0
}

.sea.modify-banana .header .status .bar b:before, .sea.modify-banana .header .status .bar b:after {
    display: none
}

#creator .list .content ul .unavailable .image {
    background: #fff
}

#creator .list .content ul .unavailable .image:after {
    content: " ";
    width: 100%;
    height: 100%;
    background: #333333;
    opacity: 0.5;
    top: 0;
    left: 0;
    position: absolute
}

#creator .list .content ul .unavailable .image img {
    opacity: 0.7
}

#profile {
    position: relative;
    padding: 0 0 60px 0;
    background: #f5f5f5
}

#profile .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 344px;
    z-index: 1;
    border-bottom: 59px solid #30967f;
    background: #124647 url(https://bananatic-15199.kxcdn.com/de/images/bg-profile.jpg) repeat-x top center
}

#profile .container {
    position: relative;
    z-index: 2;
    min-height: 500px
}

#profile .breadcrumb {
    margin: 63px 0 70px 0;
    height: 18px
}

#profile .breadcrumb + .left {
    height: 240px;
    overflow: visible;
    width: 19%
}

#profile .left {
    width: 21.9%;
    float: left
}

#profile .center {
    width: 53.2%;
    margin: 0 2.6%;
    float: left
}

#profile .right {
    width: 19.7%;
    float: right
}

#profile .avatar {
    padding-bottom: 38%;
    position: relative;
    max-width: 196px;
    margin: 0 auto
}

#profile .avatar img {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
    border: 12px solid #359d86;
    border-radius: 50%;
    z-index: 5;
    -webkit-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3)
}

#profile .avatar a {
    position: absolute;
    z-index: 6;
    width: 36px;
    height: 36px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background: #35a78d;
    color: #fff
}

#profile .avatar a:hover {
    background: #247d69
}

#profile .avatar a.modify {
    font-size: 12px;
    top: -12px;
    left: 50%;
    margin-left: -18px;
    display: none
}

#profile .avatar .points {
    position: absolute;
    bottom: 6px;
    left: 20px;
    right: 20px;
    height: 50%;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-profile-points.png) no-repeat bottom center;
    background-size: 100% auto;
    z-index: 4;
    padding-top: 37.5%;
    text-align: center;
    color: #fbe12b;
    font-size: 30px
}

#profile .avatar .points:after {
    font-size: 21px;
    font-family: 'banicon';
    display: inline-block;
    content: "\e601";
    margin-left: 5px;
    position: relative
}

#profile .avatar a.shop {
    font-size: 20px;
    padding-right: 3px;
    top: 8px;
    left: 20%;
    margin-left: -18px;
    top: -12px;
    left: 50%
}

#profile .info {
    padding-top: 2px;
    height: 134px
}

#profile .info .last-visit {
    font-size: 16px;
    float: right;
    color: #fff;
    margin-top: 18px
}

#profile .info .last-visit b {
    color: #80bd39;
    margin-left: 6px
}

#profile .info .name {
    font-size: 40px;
    color: #fff;
    display: block;
    overflow: hidden;
    width: auto;
    height: 70px
}

#profile .info .status {
    font-size: 14px;
    padding-left: 100px;
    position: relative
}

#profile .info .status .level {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 30px;
    color: #fff;
    line-height: 25px
}

#profile .info .status .bar {
    height: 22px;
    border: 2px solid #80bd39;
    background: #fff;
    border-radius: 7px
}

#profile .info .status .bar .current {
    float: left;
    text-align: center;
    height: 18px;
    background: #80bd39;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    color: #fff;
    font-size: 12px;
    padding-top: 3px;
    min-width: 60px
}

#profile .info .status .bar .next {
    width: auto;
    overflow: hidden;
    text-align: center;
    height: 18px;
    font-size: 12px;
    color: #80bd39;
    padding-top: 3px
}

#profile .info .status .bar b {
    font-family: ProximaNova-Semibold
}

#profile .buttons {
    max-width: 274px;
    padding-top: 4px
}

#profile .buttons a {
    width: 100%;
    display: block;
    height: 39px;
    padding-left: 26px;
    text-align: left;
    font-size: 12px;
    line-height: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    border-radius: 10px;
    color: #fff
}

#profile .buttons a, #profile .buttons a strong {
    font-family: ProximaNova-Semibold
}

#profile .buttons a.transea {
    border-color: #fff;
    padding-top: 0;
    line-height: 35px;
    color: #fff;
    padding-left: 24px
}

#profile .buttons a.transea:after {
    background: #fff
}

#profile .buttons a.transea:hover {
    color: #116D73
}

#profile .buttons a i {
    width: 43px;
    font-size: 16px;
    display: inline-block;
    position: relative;
    top: 3px
}

#profile .buttons a i.banicon-mail {
    font-size: 15px
}

#profile .buttons a i.banicon-user-add {
    font-size: 21px;
    top: 5px
}

#profile .buttons a.green {
    background: #80be39
}

#profile .buttons a.green:hover {
    background: #1eb95f
}

#profile .buttons a.purple {
    background: #9989d2
}

#profile .buttons a.purple:hover {
    background: #7c6cb4
}

#profile .buttons a.blue {
    background: #3886ce
}

#profile .buttons a.blue:hover {
    background: #226bae
}

#profile .menu {
    float: right;
    width: 78.4%;
    height: 59px
}

#profile .menu ul {
    list-style: none;
    height: 59px;
    border-left: 1px solid #35a78d
}

#profile .menu li {
    float: left;
    width: 14.2857%;
    text-align: center;
    border-right: 1px solid #35a78d;
    height: 59px
}

#profile .menu li a {
    font-size: 16px;
    font-family: ProximaNova-Semibold;
    width: 100%;
    height: 59px;
    padding-top: 21px;
    display: block;
    color: #fff;
    background: #30967f
}

#profile .menu li a.active, #profile .menu li a:hover {
    background: #247d69
}

#profile .menu li a span {
    display: inline-block;
    margin-left: 50px;
    font-size: 14px;
    color: #fbe12b;
    position: relative
}

#profile .menu li a span:before {
    position: absolute;
    left: -25px;
    top: -3px;
    width: 1px;
    height: 21px;
    background: #35a78d;
    content: " "
}

#profile .rank {
    margin-top: 10%
}

#profile .rank .forum {
    height: 75px
}

#profile .rank .forum i {
    font-size: 24px;
    width: 34px;
    text-align: center;
    display: inline-block;
    float: left;
    margin-top: 8px
}

#profile .rank .forum .got {
    float: left;
    font-size: 16px;
    font-family: ProximaNova-Semibold;
    width: 33px;
    margin: 13px 0 0 6px
}

#profile .rank .forum .badge {
    float: right;
    width: 44px;
    height: 44px;
    margin-left: 13px;
    border-radius: 50%;
    font-size: 20px;
    text-align: center;
    padding-top: 11px
}

#profile .rank .forum .status {
    width: auto;
    overflow: hidden;
    display: block;
    height: 26px;
    text-align: center;
    font-size: 12px;
    font-family: ProximaNova-Semibold;
    position: relative
}

#profile .rank .forum .status:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 20px;
    height: 2px;
    width: 100%
}

#profile .rank .forum .status .bar {
    position: absolute;
    left: 0;
    top: 16px;
    height: 10px;
    border-radius: 3px;
    min-width: 3px
}

#profile .rank .rzetelny .badge, #profile .rank .rzetelny .status:after, #profile .rank .rzetelny .status .bar {
    background: #36c2c7
}

#profile .rank .rzetelny .badge:after {
    font-family: 'banicon';
    content: "\e915";
    color: #2c9da1
}

#profile .rank .spolecznik .badge, #profile .rank .spolecznik .status:after, #profile .rank .spolecznik .status .bar {
    background: #35a78d
}

#profile .rank .spolecznik .badge:after {
    font-family: 'banicon';
    content: "\e916";
    color: #2b836f
}

#profile .rank .pomocny .badge, #profile .rank .pomocny .status:after, #profile .rank .pomocny .status .bar {
    background: #24c96a
}

#profile .rank .pomocny .badge:after {
    font-family: 'banicon';
    content: "\e914";
    color: #1ea456
}

#profile .rank .wulgarny .badge, #profile .rank .wulgarny .status:after, #profile .rank .wulgarny .status .bar {
    background: #ffa70d
}

#profile .rank .wulgarny .badge:after {
    font-family: 'banicon';
    content: "\e918";
    color: #bd7d0c
}

#profile .rank .troll .badge, #profile .rank .troll .status:after, #profile .rank .troll .status .bar {
    background: #ef6269
}

#profile .rank .troll .badge:after {
    font-family: 'banicon';
    content: "\e917";
    color: #a82b32
}

#profile .rzetelny {
    color: #36c2c7
}

#profile .spolecznik {
    color: #35a78d
}

#profile .pomocny {
    color: #24ca6a
}

#profile .wulgarny {
    color: #ffa70d
}

#profile .troll {
    color: #ef6269
}

#profile .header {
    text-align: left;
    font-size: 24px;
    padding: 30px 0
}

#profile .header b {
    font-size: 24px
}

#profile .header b:after {
    margin-left: 22px;
    background: #88b6b9
}

#profile .right .header:first-child {
    padding-top: 0
}

#profile .header b span {
    color: #80bd39;
    margin: 0 5px
}

#profile .rank table {
    width: 100%
}

#profile .rank td {
    font-size: 12px;
    color: #a6bfc1;
    vertical-align: middle;
    text-align: left;
    height: 47px
}

#profile .rank td a {
    color: #a6bfc1;
    display: inline-block;
    min-width: 26px;
    max-width: 100%
}

#profile .rank td.photo {
    width: 40px;
    text-align: center
}

#profile .rank td img {
    width: 26px;
    height: 26px;
    border-radius: 50%
}

#profile .rank td b {
    white-space: nowrap;
    font-family: ProximaNova-Semibold
}

#profile .rank td.points {
    text-align: right
}

#profile .rank td.points b:after {
    font-size: 10px;
    font-family: 'banicon';
    content: "\e601";
    margin-left: 5px
}

#profile .rank tr.me td {
    border-top: 1px solid #88b6b9;
    border-bottom: 1px solid #88b6b9;
    height: 56px
}

#profile .rank tr.me td a {
    color: #116d73
}

#profile .rank tr.me td.points b {
    color: #80bd39
}

#profile .rank td .ellipsis {
    width: 70px;
    display: block
}

#profile .rank .header {
    padding: 17px 0 21px 0
}

#profile .post {
    border: 1px solid #d2d0d0;
    padding: 25px;
    margin: 0 auto 30px auto;
    color: #91b0b3;
    max-width: 660px;
    background: #fff
}

#profile .post .share {
    float: right;
    width: 145px;
    height: 28px;
    background: #4e69ac;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    font-family: ProximaNova-Semibold;
    padding: 8px 0 0 34px;
    text-align: center;
    position: relative
}

#profile .post .share:hover {
    background: #36679F
}

#profile .post .share:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 28px;
    border-right: 1px solid #6a87cc;
    font-family: "banicon";
    background: transparent;
    font-size: 15px;
    content: "\e91b";
    text-align: center;
    padding: 6px 0 0 2px;
    z-index: 6
}

#profile .post .post-options {
    width: 28px;
    height: 28px;
    float: right;
    position: relative;
    margin-left: 15px
}

#profile .post .post-options a.more {
    display: block;
    width: 28px;
    height: 28px;
    text-align: center;
    font-size: 10px;
    padding-top: 8px
}

#profile .post .post-options a.more i {
    display: block
}

#profile .post .post-options.open a.more i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

#profile .post .post-options ul {
    list-style: none;
    top: 28px;
    right: -10px;
    display: none;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    z-index: 9999;
    white-space: nowrap;
    position: absolute;
    -webkit-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3)
}

#profile .post .post-options ul .banicon-close {
    font-size: 10px
}

#profile .post .post-options.open ul {
    display: block
}

#profile .post .user {
    padding: 16px 0 0 0
}

#profile .post .user .avatar {
    margin: 0;
    padding: 0;
    width: 70px;
    height: 70px;
    border-radius: 70px;
    float: left;
    margin-right: 30px;
    margin-top: -16px
}

#profile .post .user a {
    color: #80bd39;
    font-family: ProximaNova-Semibold
}

#profile .post .user .when {
    display: block;
    font-size: 14px;
    margin-top: 10px
}

#profile .post p {
    clear: both;
    padding: 20px 0 0 0;
    color: #116d73;
    line-height: 20px
}

#profile .post .image {
    display: block;
    margin: 20px auto 0 auto;
    text-align: center;
    max-width: 600px
}

#profile .post .image img {
    max-width: 100%;
    max-height: 350px;
    width: auto;
    height: auto
}

#profile .post .comments {
    margin: 25px -25px 0 -25px;
    padding: 20px 25px 0 25px;
    border-top: 1px solid #d2d0d0
}

#profile .post .comments .stats {
    text-align: justify;
    line-height: 22px
}

#profile .post .comments .stats:after {
    width: 100%;
    content: " ";
    height: 0;
    font-size: 0;
    display: inline-block
}

#profile .post .comments .stats span {
    display: inline-block;
    font-size: 14px;
    font-family: ProximaNova-Semibold;
    vertical-align: top
}

#profile .post .comments .stats span span {
}

#profile .post .comments .stats span span:before {
    content: "(";
    margin: 0 3px 0 5px
}

#profile .post .comments .stats span span:after {
    content: ")";
    margin: 0 0 0 3px
}

#profile .post .comments .stats span i {
    font-size: 22px;
    vertical-align: middle;
    margin-right: 6px;
    top: -1px;
    position: relative
}

#profile .post .comments ul {
    list-style: none
}

#profile .post .comments li {
    padding: 8px 0 0 47px;
    min-height: 41px;
    margin-bottom: 10px;
    font-size: 14px;
    position: relative
}

#profile .post .comments li.hide {
    display: none
}

#profile .post .comments img {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    top: 0;
    left: 0
}

#profile .post .comments .when {
    font-size: 12px;
    color: #7e7e7e;
    margin-left: 15px
}

#profile .post .comments p {
    margin: 5px 0;
    line-height: 20px;
    height: auto;
    padding: 0
}

#profile .post .comments form {
    margin-top: -8px
}

#profile .post .comments ul a {
    color: #116D73
}

#profile .post .comments ul a.more-opinions {
    color: #80BD39;
    font-size: 14px
}

#profile .post .comments ul a.more-opinions:hover {
    color: #679C2A
}

#profile .post .comments ul a.reply {
    margin-left: 30px;
    font-size: 12px
}

#profile .post .comments ul ul {
    margin: 15px 0 15px -30px;
    padding-left: 28px;
    border-left: 2px solid #D2D0D0
}

#profile .post .comments ul ul img {
    width: 24px;
    height: 24px
}

#profile .post .comments ul ul li {
    padding: 5px 0 0 34px
}

#profile .post .comments ul ul li input {
    padding: 0 10px;
    height: 24px;
    margin-bottom: 0;
    margin-top: 3px;
    border-radius: 6px
}

#profile .post .comments input {
    border: 1px solid #d2d0d0;
    border-radius: 10px;
    padding: 7px 15px;
    font-size: 14px;
    color: #116d73;
    width: 100%;
    margin-bottom: 10px;
    height: 34px
}

#profile .post .forum {
    padding-left: 100px;
    position: relative;
    min-height: 55px;
    font-size: 15px;
    line-height: 26px;
    color: #116d73;
    margin: 40px 0 0 0;
    clear: both;
    display: block
}

#profile .post .forum:before {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 55px;
    content: "\e91a";
    font-family: "banicon";
    color: #116d73;
    line-height: 55px
}

#profile .post .user > form {
    margin: -9px 0 0 0
}

#profile .post .add {
    width: auto;
    overflow: hidden;
    position: relative;
    top: -15px;
    margin-bottom: -4px
}

#profile .post .add textarea {
    display: block;
    width: 100%;
    border: 0;
    height: 60px;
    height: auto;
    line-height: 20px;
    padding: 25px 0 15px 0;
    color: #116D73;
    resize: none
}

#profile .post .add-options {
    border-top: 1px solid #D2D0D0;
    margin: 0 -25px -25px -25px;
    padding: 17px 275px 17px 25px;
    position: relative;
    min-height: 71px
}

#profile .post .add-options button {
    position: absolute;
    top: 50%;
    right: 25px;
    height: 30px;
    width: 160px;
    background: #116D73;
    border: 0;
    border-radius: 5px;
    margin-top: -18px
}

#profile .post .add-options button strong {
    font-family: ProximaNova-Semibold;
    color: #fff
}

#profile .post .add-options button:after {
    display: none
}

#profile .post .add-options button:hover {
    background: #0C4D51
}

#profile .post .add-options .media {
    width: 136px;
    height: 80px;
    overflow: hidden;
    display: inline-block;
    color: #106d74;
    background: #21767d;
    position: relative
}

#profile .post .add-options .media .load {
    display: block;
    width: 136px;
    height: 80px;
    border: 2px solid #21767d;
    text-align: center;
    padding-top: 10px;
    background: #fff
}

#profile .post .add-options .media .load:before {
    position: absolute;
    top: 55px;
    left: 17px;
    width: 98px;
    height: 5px;
    background: #dfdfe1;
    border-radius: 2px;
    content: " "
}

#profile .post .add-options .media .load:after {
    position: absolute;
    top: 55px;
    left: 17px;
    width: 73px;
    height: 5px;
    background: #106d74;
    border-radius: 2px;
    content: " "
}

#profile .post .add-options .media .load .banicon {
    font-size: 29px
}

#profile .post .add-options .media:hover img {
    opacity: 0.5
}

#profile .post .add-options .media .banicon-close {
    opacity: 0;
    font-size: 10px;
    top: 10px;
    right: 10px;
    position: absolute;
    color: #fff;
    cursor: pointer
}

#profile .post .add-options .media:hover .banicon-close {
    opacity: 1
}

#profile .post .add-options .media .banicon-close:hover {
    color: #f1585b
}

#profile .post .add-options .media.filename {
    width: auto;
    height: auto;
    background: #fff;
    margin-top: 9px
}

#profile .post .inputfile {
    position: absolute;
    right: 200px;
    top: 50%;
    overflow: hidden;
    width: 65px;
    padding: 5px 0;
    text-align: center;
    border: 2px solid #9fc5c6;
    border-radius: 5px;
    color: #9fc5c6;
    height: 30px;
    margin-top: -18px
}

#profile .post .inputfile + b {
    font-family: ProximaNova-Semibold;
    font-size: 13px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    position: absolute;
    top: -30px;
    right: 158px;
    width: 146px;
    text-align: center;
    background: #126c74;
    opacity: 0;
    visibility: hidden;
    height: 38px;
    padding-top: 12px;
    color: #fff
}

#profile .post .inputfile + b:after {
    position: absolute;
    bottom: -5px;
    left: 67px;
    width: 10px;
    height: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #126c74;
    content: " "
}

#profile .post .inputfile i {
    font-size: 13px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

#profile .post .inputfile:hover {
    border-color: #126c74;
    color: #126c74
}

#profile .post .inputfile:hover + b {
    visibility: visible;
    opacity: 0.9
}

#profile .post .inputfile input {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 7;
    font-size: 200px
}

#profile .post .inputfile + span {
    vertical-align: middle;
    margin-left: 10px;
    font-size: 12px
}

#profile .transea.more {
    float: right;
    width: 160px;
    max-width: 100%
}

#profile .right ul {
    list-style: none;
    margin: 0 -10px
}

#profile .right ul li {
    float: left;
    width: 20%;
    text-align: center;
    margin-bottom: 12px
}

#profile .right ul li img {
    width: 53px;
    height: 53px;
    border-radius: 50%
}

#profile .right .fav {
    border: 1px solid #89b6b9;
    margin-bottom: 20px;
    padding: 20px 10px 20px 120px;
    display: block;
    color: #116d73;
    height: 99px;
    position: relative;
    background: #fff
}

#profile .right .fav .image {
    position: absolute;
    top: 19px;
    left: 10px;
    width: 100px;
    padding-right: 10px;
    height: 59px;
    border-right: 1px solid #89b6b9;
    line-height: 56px;
    text-align: center
}

#profile .right .fav .image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    vertical-align: middle
}

#profile .right .fav:hover, #profile .right .fav:hover .image {
    border-color: #116d73
}

#profile .right .fav b {
    font-size: 15px;
    display: block;
    width: 100%;
    font-family: ProximaNova-Semibold;
    margin: 5px 0 15px 0
}

#profile .right .fav .vote {
    width: 140px;
    height: 16px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-vote.png) repeat-x top left;
    background-size: 28px auto;
    position: relative;
    display: inline-block;
    margin: 0 0 3px -5px;
    vertical-align: top
}

#profile .right .fav .vote .bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 0;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-vote.png) repeat-x bottom left;
    background-size: 28px auto;
    z-index: 120
}

#creator.profile #character {
    margin-top: 110px
}

#creator.profile .header {
    padding: 0
}

#creator.profile .header b {
    color: #fff
}

#creator.profile .header b:before, #creator.profile .header b:after {
    display: none
}

#creator.profile .level {
    color: #fff;
    margin-top: 10px
}

#creator.profile .level:before {
    border-color: #fff
}

#creator.profile .transea {
    border-color: #fff;
    color: #fff
}

#creator.profile .transea:hover {
    color: #116D73
}

#creator.profile .transea:after {
    background: #fff
}

#profile .two-columns {
    float: right;
    width: 75.4%;
    margin-top: -30px
}

#profile .friends {
    margin: 0 -20px 20px -20px;
    list-style: none
}

#profile .friends li {
    width: 20%;
    float: left;
    padding: 0 20px 40px 20px;
    position: relative
}

#profile .friends .message {
    position: absolute;
    top: -19px;
    right: 1px;
    width: 38px;
    height: 38px;
    background: #80BE39;
    border-radius: 50%;
    font-size: 12px;
    color: #fff;
    text-align: center;
    padding-top: 13px
}

#profile .friends .message:hover {
    background: #1eb95f
}

#profile .friends .friend {
    width: 100%;
    display: block;
    height: 342px;
    border: 1px solid #d2d0d0;
    text-align: center;
    color: #116d73;
    font-size: 16px;
    background: #fff
}

#profile .friends .friend:hover {
    border-color: #aaaaaa
}

#profile .friends .friend img {
    width: 106px;
    height: 106px;
    border-radius: 50%;
    margin: 23px 0 16px 0
}

#profile .friends .friend .name {
    display: block
}

#profile .friends .friend .level {
    display: block;
    margin: 5px 0 25px 0
}

#profile .friends .friend .rank, #profile .friends .friend .last-visit {
    display: block;
    margin: 5px 0 25px 0;
    color: #80bd39
}

#profile .games {
    padding: 0;
    margin-bottom: 50px;
    border: 0;
    overflow: visible
}

#profile .games li {
    border: 1px solid #94C3C6;
    margin: 0 0 33px 0;
    padding: 40px 0;
    background: #fff
}

#profile .games li:hover {
    border-color: #116d73
}

#profile .games > li:before {
    border: 2px solid #106D74;
    width: auto;
    left: -2px;
    right: -2px
}

#profile .games li .box {
    padding: 0
}

#profile .games li .image {
    width: 21.13%;
    padding: 0 25px 0 15px
}

#profile .games li .description {
    width: 47.18%;
    padding: 0 6%
}

#profile .games li .play {
    width: 31.69%;
    padding-left: 6%
}

#profile .games li p.text {
    white-space: normal;
    line-height: 24px;
    text-align: justify;
    height: 48px;
    overflow: hidden;
    position: relative
}

#profile .games li p.text:after {
    position: absolute;
    width: 40px;
    height: 24px;
    bottom: 0;
    right: 0;
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-ellipsis.png) repeat-y top center;
    content: " "
}

#profile .games li .remove {
    position: absolute;
    top: -19px;
    right: -19px;
    width: 38px;
    height: 38px;
    border: 2px solid #94C3C6;
    color: #94C3C6;
    font-size: 36px;
    background: #fff;
    border-radius: 50%;
    text-align: center
}

#profile .games li .remove:hover {
    border-color: #116d73;
    color: #116d73
}

#profile .two-columns .header a.transea {
    height: 29px;
    text-transform: none;
    letter-spacing: 1px;
    margin-top: -3px;
    padding: 6px 50px
}

#profile .two-columns .header a.transea strong {
    font-family: ProximaNova-Semibold
}

#profile .two-columns .header a.transea:before {
    width: 20px;
    left: -22px;
    background: #f5f5f5
}

#profile .ranking-awards {
    list-style: none;
    margin: 25px 0 55px 0
}

#profile .ranking-awards li {
    float: left;
    width: 20%;
    height: 76px;
    padding: 10px 0 0 0
}

#profile .ranking-awards li.yours {
    width: 40%;
    padding: 10px 0 0 10px;
    border-left: 1px solid #88b6b9;
    text-align: right
}

#profile .ranking-awards li p {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    max-width: 80%;
    line-height: 24px
}

#profile .ranking-awards li .points {
    font-size: 28px;
    display: block
}

#profile .ranking-awards li .points:after {
    font-size: 21px;
    font-family: 'banicon';
    content: "\e601";
    margin-left: 5px
}

#profile .ranking-awards li.yours .points {
    display: inline-block;
    font-size: 16px;
    color: #80bd39
}

#profile .ranking-awards li.yours .points:after {
    font-size: 14px;
    margin-left: 2px
}

#profile .ranking-awards li.first .points {
    color: #9f914f
}

#profile .ranking-awards li.second .points {
    color: #939598
}

#profile .ranking-awards li.third .points {
    color: #8b5e3b
}

#profile .ranking-awards li img {
    width: 55px;
    height: 55px;
    margin-right: 15px;
    vertical-align: middle
}

#profile table.ranking {
    width: 100%;
    margin-bottom: 35px;
    background: #fff
}

#profile table.ranking th {
    background: #116d73;
    color: #fff;
    font-size: 16px;
    padding: 15px 10px;
    vertical-align: middle;
    font-weight: normal;
    text-align: center
}

#profile table.ranking th.place {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    width: 110px
}

#profile table.ranking th + th + th {
    text-align: right;
    padding-right: 3.5%;
    width: 17.6%
}

#profile table.ranking th + th + th + th {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px
}

#profile table.ranking .name {
    text-align: left
}

#profile table.ranking td {
    border-bottom: 1px solid #dbe9ea;
    padding: 10px;
    vertical-align: middle;
    text-align: center
}

#profile table.ranking td.name {
    font-size: 14px;
    font-family: ProximaNova-Semibold
}

#profile table.ranking td + td + td {
    padding-right: 2.8%;
    text-align: right;
    font-family: ProximaNova-Bold;
    color: #80bd39
}

#profile table.ranking td + td + td + td, #profile table.ranking tr.first td + td + td + td, #profile table.ranking tr.second td + td + td + td, #profile table.ranking tr.third td + td + td + td {
    color: #116d73
}

#profile table.ranking td + td + td:after {
    font-size: 11px;
    font-family: 'banicon';
    content: "\e601";
    margin-left: 5px
}

#profile table.ranking td img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-bottom: 1px
}

#profile table.ranking td.name img {
    border-radius: 50%;
    margin-right: 5px
}

#profile table.ranking tr.first td {
    color: #a39552
}

#profile table.ranking tr.second td {
    color: #939598
}

#profile table.ranking tr.third td {
    color: #8f623e
}

#profile table.ranking tr:hover td, #profile table.ranking tr.me td {
    background: #f1f6f7;
    border-color: #116d73
}

#profile table.ranking td a {
    color: inherit
}

#profile .header .last-month {
    background: #f5f5f5;
    font-size: 16px;
    font-family: ProximaNova-Regular;
    float: right;
    position: relative;
    z-index: 10;
    padding: 4px 0 0 30px
}

#profile .podium {
    width: 450px;
    height: 354px;
    position: relative;
    float: left;
    margin-right: 4%
}

#profile .podium .bg {
    width: 450px;
    height: auto;
    bottom: 0;
    left: 0;
    position: absolute
}

#profile .podium .banana {
    position: absolute;
    z-index: 3;
    top: -28px;
    left: 110px;
    width: 225px
}

#profile .podium .banana:before {
    display: none
}

#profile .podium .banana + .banana {
    top: 20px;
    left: -40px
}

#profile .podium .banana + .banana + .banana {
    top: 35px;
    left: 260px
}

#profile .last-month-details {
    width: auto;
    overflow: hidden
}

#profile .person {
    height: 88px;
    width: 100%;
    border: 1px solid #e2d07d;
    border-radius: 7px;
    margin-top: 30px;
    padding-top: 23px;
    position: relative;
    color: #a39552;
    background: #fff
}

#profile .person:before {
    content: " ";
    width: 1px;
    left: 129px;
    top: 0;
    height: 100%;
    border-left: 1px solid #e2d07d;
    border-color: inherit;
    position: absolute
}

#profile .person + .person {
    border-color: #c0c1c3;
    color: #939598
}

#profile .person + .person + .person {
    border-color: #8f623e;
    color: #c49a6c
}

#profile .person img {
    width: 39px;
    height: 39px;
    margin: 0 45px;
    vertical-align: middle
}

#profile .person img + img {
    margin-right: 8px;
    border-radius: 50%
}

#profile .person b {
    vertical-align: middle;
    font-size: 18px
}

#profile .person b.points {
    color: #80bd39;
    position: absolute;
    top: 50%;
    right: 39px;
    margin-top: -10px
}

#profile .person b.points:after {
    font-size: 13px;
    font-family: 'banicon';
    content: "\e601";
    margin-left: 5px
}

#profile .ranking-buttons {
    height: 29px;
    position: relative;
    margin-bottom: 31px
}

#profile .ranking-buttons:before {
    position: absolute;
    top: 50%;
    height: 1px;
    width: 100%;
    background: #88b6b9;
    content: " "
}

#profile .ranking-buttons a {
    display: inline-block;
    height: 29px;
    background: #80bd39;
    border-radius: 7px;
    padding: 7px 45px;
    color: #fff;
    position: relative;
    z-index: 5;
    font-size: 14px;
    font-family: ProximaNova-Semibold;
    margin-right: 10px
}

#profile .ranking-buttons a + a {
    background: #48b89f
}

#profile .ranking-buttons a + a + a {
    background: #ffa200
}

#profile .ranking-buttons a:after {
    z-index: 4;
    content: " ";
    position: absolute;
    right: -25px;
    width: 25px;
    height: 100%;
    background: #f5f5f5
}

#profile .pagination {
    margin-top: -60px;
    background: #f5f5f5
}

.pagination .pager {
    list-style: none
}

.pagination .pager li {
    display: inline-block
}

.pagination .pager li a {
    display: inline-block;
    width: 31px;
    height: 31px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    font-size: 14px
}

.pagination .pager li a:hover {
    background: #e6f3de
}

.pagination .pager li a.active {
    background: #ffa200;
    color: #fff;
    font-family: ProximaNova-Bold
}

.pagination .pager li a .banicon {
    font-size: 13px;
    color: #116d73;
    top: 1px;
    margin: 0 0 0 -2px
}

#profile .conversation {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative
}

#profile .conversation li {
    padding: 24px 90px 24px 24px;
    min-height: 80px;
    position: relative;
    background: #f5f5f5;
    text-align: right;
    padding: 24px 24px 24px 90px;
    text-align: left
}

#profile .conversation li.me {
    background: #fff;
    padding: 24px 24px 24px 90px;
    text-align: left
}

#profile .conversation li.me + li.me, #profile .conversation li.notme + li.notme {
    margin-top: -24px
}

#profile .conversation li img {
    position: absolute;
    top: 23px;
    right: 29px;
    width: 39px;
    height: 39px;
    border-radius: 50%
}

#profile .conversation li img {
    right: auto;
    left: 29px
}

#profile .send-message {
    border: 2px solid #89b6b9;
    background: #fff;
    padding: 0;
    text-align: left
}

#profile .send-message textarea {
    width: 100%;
    border: 0;
    min-height: 80px;
    height: auto;
    line-height: 20px;
    border: 0;
    padding: 10px 29px;
    resize: none;
    margin-bottom: 5px;
    border-bottom: 1px solid #d1dbdc
}

#profile .send-message .checkbox {
    font-size: 12px;
    margin-left: 23px;
    width: auto;
    overflow: hidden;
    color: #7a9fa5;
    margin-bottom: 8px
}

#profile .send-message .btn {
    float: right;
    padding: 5px 15px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: #80bd39;
    text-transform: uppercase;
    height: 28px;
    font-family: ProximaNova-Semibold;
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-right: 29px
}

#profile .send-message .btn:hover {
    background: #679c2a
}

#profile .conversation li a {
    color: #80BD39;
    font-family: ProximaNova-Semibold
}

#profile .conversation li p {
    line-height: 20px;
    margin-top: 5px
}

#profile .conversation li .when {
    color: #91B0B3;
    font-size: 14px
}

#profile .conversation li .when i {
    margin-right: 10px;
    position: relative;
    top: 2px
}

#profile .conversation li a.all {
    display: block;
    margin-left: -90px;
    margin-right: -24px;
    margin-bottom: -18px;
    padding-left: 70px;
    position: relative;
    padding: 32px 30px 32px 96px;
    border: 1px solid #94C3C6;
    background: #fff;
    font-size: 15px;
    text-align: left
}

#profile .conversation li a.all p {
    color: #116D73;
    font-family: ProximaNova-Regular;
    font-size: 16px
}

#profile .conversation li a.all img {
    top: 32px;
    left: 34px;
    width: 39px;
    height: 39px
}

#profile .conversation li a.all:hover {
    border: 1px solid #fff;
    margin: 0 -42px -18px -108px;
    padding-left: 114px;
    -webkit-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3)
}

#profile .conversation li a.all:hover img {
    left: 52px
}

#profile .conversation li a.all .when {
    font-family: ProximaNova-Regular;
    float: none;
    font-size: 14px;
    margin-left: 7px
}

#profile .conversation.all-conversations {
}

#profile .conversation.all-conversations li {
    font-size: 14px;
    overflow: hidden;
    padding: 0;
    min-height: auto
}

#profile .conversation.all-conversations + .conversation {
    width: auto;
    overflow: hidden
}

#profile .conversation.all-conversations li a {
    height: 72px;
    border-top-left-radius: 33px;
    border-bottom-left-radius: 33px;
    border: 1px solid #d0dadb;
    margin: 0;
    padding: 18px 5px 0 60px;
    color: #106d74
}

#profile .conversation.all-conversations li a img, #profile .conversation.all-conversations li a:hover img {
    left: 18px;
    top: 18px;
    width: 33px;
    height: 33px
}

#profile .conversation.all-conversations li a .when {
    float: right;
    margin-left: 20px
}

#profile .conversation.all-conversations li a + a {
    margin-top: -1px
}

#profile .conversation.all-conversations li a:hover {
    background: #daeeef;
    border-color: #d0dadb;
    margin: 0;
    padding: 18px 5px 0 60px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

#profile .conversation.all-conversations li a .nick {
    font-family: ProximaNova-Semibold;
    display: block;
    overflow: hidden;
    width: auto;
    text-overflow: ellipsis
}

#profile .conversation.all-conversations li a p {
    color: #79a0a5;
    font-size: 14px;
    margin-top: 0;
    width: 100%
}

#profile .conversation.all-conversations li a.active {
    border: 3px solid #106D74;
    background: #126c74;
    color: #fff
}

#profile .find-conversation {
    border: 1px solid #d1dbdd;
    width: 100%;
    color: #116D73;
    padding: 9px 20px;
    font-size: 14px
}

#profile .conversation li a.more {
    text-align: center;
    padding: 25px 0;
    display: block
}

#profile .conversation-area {
    border-left: 1px solid #8ebabd;
    border-right: 1px solid #8ebabd
}

#profile .conversation-with {
    background: #126c74;
    color: #fff;
    font-family: ProximaNova-Semibold;
    padding: 14px 27px
}

#profile ul.badges {
    list-style: none;
    margin: 0 -10px;
    padding: 0
}

#profile ul.badges li {
    margin-bottom: 25px;
    padding: 0 10px;
    height: 305px;
    float: left;
    width: 16.666%
}

#profile ul.badges li a {
    width: 100%;
    height: 305px;
    display: block;
    position: relative;
    text-align: center;
    -webkit-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden
}

#profile ul.badges li a .bg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 2px solid transparent
}

#profile ul.badges li a:hover .bg {
    -webkit-transform: rotateY(-180deg) translateZ(1px);
    -ms-transform: rotateY(-180deg) translateZ(1px);
    -o-transform: rotateY(-180deg) translateZ(1px);
    transform: rotateY(-180deg) translateZ(1px)
}

#profile ul.badges li a .bg img {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 2;
    left: -20%
}

#profile ul.badges li a:hover .details, #profile ul.badges li a:hover .main {
    border-color: #2b90bd
}

#profile ul.badges li a .main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background: #fff;
    background: rgba(255, 255, 255, 0.87);
    border: 2px solid #80bcd7;
    border-radius: 8px
}

#profile ul.badges li a .details {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    opacity: 0;
    background: #102f51;
    background: rgba(16, 47, 81, 0.87);
    font-size: 14px;
    color: #fff;
    line-height: 20px;
    border: 2px solid #80bcd7;
    border-radius: 8px;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

#profile ul.badges li a:hover .main {
    opacity: 0;
    -webkit-transform: rotateY(-180deg) translateZ(1px);
    -ms-transform: rotateY(-180deg) translateZ(1px);
    -o-transform: rotateY(-180deg) translateZ(1px);
    transform: rotateY(-180deg) translateZ(1px)
}

#profile ul.badges li a:hover .details {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(1px);
    -ms-transform: rotateY(0deg) translateZ(1px);
    -o-transform: rotateY(0deg) translateZ(1px);
    transform: rotateY(0deg) translateZ(1px)
}

#profile ul.badges li a .main img {
    width: 84px;
    height: 84px;
    border: 7px solid #2b90bd;
    background: #2b90bd;
    border-radius: 50%;
    margin: 33px 0 25px 0
}

#profile ul.badges li a .main .name {
    font-family: ProximaNova-Semibold;
    font-size: 16px;
    color: #116d73;
    display: block;
    height: 67px;
    line-height: 18px
}

#profile ul.badges li a .main i {
    font-size: 17px;
    color: #80bcd7;
    width: 105px;
    height: 1px;
    display: inline-block;
    background: transparent;
    border-left: 34px solid #80bcd7;
    border-right: 34px solid #80bcd7
}

#profile ul.badges li a .main i:before {
    top: -8px;
    position: relative
}

#profile ul.badges li a .main .date {
    font-size: 14px;
    display: block;
    margin-top: 18px;
    color: #116d73
}

#profile ul.badges li a .details .logo {
    height: 79px;
    margin-top: 23px;
    line-height: 70px
}

#profile ul.badges li a .details .logo img {
    max-width: 80%;
    max-height: 61px;
    vertical-align: middle
}

#profile ul.badges li a .details b {
    color: #80bd39;
    font-size: 16px;
    font-family: ProximaNova-Semibold;
    display: block;
    margin: 15px 10px 0 10px
}

#profile table.ranking th.place.date {
    width: 190px
}

#profile table.ranking td.event {
    text-align: left;
    height: 52px
}

#profile table.ranking td.event .points {
    color: #80BD39;
    margin-left: 10px
}

#profile table.ranking td.event .points:after {
    font-size: 13px;
    font-family: "banicon";
    content: "\e601";
    margin-left: 2px;
    margin-right: 10px
}

#profile table.ranking td.event .exp {
    color: #FFA200;
    margin-left: 10px;
    margin-right: 10px
}

#profile table.ranking td.event .points + .exp {
    margin-left: 0
}

#profile table.ranking td.event .exp:after {
    font-size: 17px;
    font-family: "banicon";
    content: "\e60d";
    margin-left: 2px;
    position: relative;
    top: 2px
}

#profile table.ranking td.event a:hover {
    color: #80BD39
}

#profile .settings p {
    line-height: 20px;
    margin-bottom: 20px
}

#profile .settings .transea {
    padding: 8px 15px
}

#profile .settings .text {
    color: #116D73;
    padding: 10px 20px;
    border: 1px solid #116D73;
    border-radius: 10px;
    width: 50%;
    min-width: 300px;
    max-width: 100%;
    margin-bottom: 15px
}

#profile .settings #change-password {
    display: none;
    margin-top: 30px
}

#profile .settings #change-password button {
    background: #80BD39;
    padding: 17px 0;
    width: 50%;
    min-width: 300px;
    max-width: 100%;
    border: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    height: 50px;
    position: relative;
    color: #fff;
    border-radius: 10px
}

#profile ul.screenshots {
    list-style: none;
    margin: 0 -15px
}

#profile ul.screenshots li {
    width: 25%;
    float: left;
    padding: 0 15px 50px 15px
}

#profile ul.screenshots li a {
    display: block;
    position: relative;
    overflow: hidden;
    background: #116d73
}

#profile ul.screenshots li a:before {
    content: " ";
    display: block;
    padding-top: 70%
}

#profile ul.screenshots li a img {
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
    max-width: 150%;
    max-height: 150%;
    opacity: 1
}

#profile ul.screenshots li a:hover img {
    opacity: 0.4
}

#profile ul.screenshots li .date {
    display: block;
    border-bottom: 1px solid #88b6b9;
    padding: 17px 0;
    font-size: 14px;
    color: #88b6b9
}

#news {
    background: url(https://bananatic-15199.kxcdn.com/de/images/bg-news.jpg) no-repeat top center;
    background-size: cover;
    padding-bottom: 60px
}

#news a, #news a:after {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out
}

#news .content {
    float: right;
    width: 76%;
    padding-left: 2.5%
}

#news .content .news {
    background: #fff;
    border: 1px solid #88b6b9;
    border-bottom: 0;
    padding: 42px 40px 40px 200px;
    position: relative;
    min-height: 300px;
    margin: 0
}

#news .content .news .thumb {
    width: 134px;
    height: 134px;
    position: absolute;
    top: 40px;
    left: 40px;
    border-radius: 50%;
    -webkit-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3)
}

#news .content .news .date {
    font-size: 16px;
    font-family: ProximaNova-Semibold;
    color: #91b0b3;
    padding-right: 26px;
    margin-right: 25px;
    position: relative
}

#news .content .news .date:after {
    position: absolute;
    width: 1px;
    top: -3px;
    bottom: -3px;
    right: 0;
    background: #91b0b3;
    content: " "
}

#news .content .news .title {
    font-size: 18px;
    color: #116d73;
    font-family: ProximaNova-Semibold
}

#news .content .wysiwyg {
    font-size: 16px;
    line-height: 30px;
    color: #116d73;
    margin-top: 15px
}

#news .content .wysiwyg a {
    color: #116d73;
    border-bottom: 1px solid #E8F4DC
}

#news .content .wysiwyg a:hover {
    border-color: #116d73
}

#news .opinions > li {
    background: #fff;
    padding: 32px 32px 32px 100px;
    border: 1px solid #88b6b9;
    margin-bottom: 33px
}

#news .opinions p {
    color: #116d73;
    font-size: 16px;
    line-height: 24px
}

#news .opinions img {
    width: 39px;
    height: 39px;
    top: 29px;
    left: 38px;
    border: 0
}

#news .opinions input {
    margin-bottom: 0;
    border-color: #afd1d3
}

#news .opinions li a b {
    color: #80bd39
}

#news .opinions li a .when {
    font-size: 14px;
    color: #91b0b3
}

#news .opinions li .reply {
    float: none;
    font-family: ProximaNova-Semibold;
    color: #6bad99;
    font-size: 14px;
    margin-right: 17px;
    padding-right: 17px;
    position: relative
}

#news .opinions li .reply:after {
    content: " ";
    top: -2px;
    bottom: -2px;
    right: 0;
    width: 1px;
    background: #a7c9cb;
    position: absolute
}

#news .opinions li .reply:hover {
    color: #59d2ad
}

#news .opinions li .replies {
    font-family: ProximaNova-Semibold;
    font-size: 14px;
    color: #116d73
}

#news .opinions li .replies:hover {
    color: #77d8b9
}

#news .opinions li ul {
    border-left: 0;
    border-top: 1px solid #c6dfe1;
    padding: 26px 32px 0 100px;
    margin: 23px -32px 0 -100px
}

#news .opinions li ul li {
    border-left: 2px solid #dbeeef;
    padding: 2px 0 0 78px;
    margin-bottom: 30px
}

#news .opinions li ul li.white-border {
    border-color: #fff;
    margin-bottom: 0
}

#news .opinions li ul li img {
    width: 32px;
    height: 32px;
    left: 26px;
    top: 0
}

#news .opinions li ul li p {
    margin: 0;
    position: relative;
    top: 5px
}

#news .opinions li ul li .more-opinions {
    font-family: ProximaNova-Semibold;
    color: #6bad99;
    font-size: 14px;
    display: block;
    margin-bottom: 15px
}

#news .opinions li ul li .more-opinions:hover {
    color: #59d2ad
}

#news .opinions li li input {
    font-size: 12px;
    margin-top: 3px
}

#news .game > .more-opinions {
    background: #fff;
    padding: 20px;
    text-align: center;
    font-family: ProximaNova-Semibold;
    font-size: 14px;
    color: #116d73;
    display: block
}

#news .game > .more-opinions:hover {
    color: #59d2ad
}

#news .archive {
    width: auto;
    overflow: hidden
}

#news .archive ul {
    list-style: none
}

#news .archive a:after {
    font-family: "banicon";
    content: "\e602";
    position: absolute;
    display: block;
    top: 50%;
    right: 21px;
    font-size: 8px;
    margin-top: -4px
}

#news .archive a.open:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

#news .archive > ul > li {
    border-radius: 8px;
    margin-bottom: 28px;
    border: 1px solid #8db8bb;
    background: #fff
}

#news .archive > ul > li.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

#news .archive > ul > li > a {
    display: block;
    font-family: ProximaNova-Semibold;
    font-size: 18px;
    padding: 12px 25px;
    color: #116d73;
    position: relative
}

#news .archive > ul > li > ul {
    display: none
}

#news .archive > ul > li > ul a {
    border-top: 1px solid #88b6b9;
    display: block;
    color: #116d73
}

#news .archive > ul > li > ul > li > a {
    font-family: ProximaNova-Semibold;
    font-size: 16px;
    padding: 11px 0 11px 42px;
    background: #fff;
    margin: 0 -1px;
    border-left: 1px solid #8db8bb;
    border-right: 1px solid #8db8bb;
    position: relative
}

#news .archive > ul > li > ul > li > a:hover {
    background: #dbeeef
}

#news .archive > ul > li > ul > li > a.open {
    background: #116d73;
    color: #fff;
    border-left: 1px solid #116d73;
    border-right: 1px solid #116d73
}

#news .archive > ul > li > ul ul {
    display: none
}

#news .archive > ul > li > ul > li > ul > li a {
    border: 0;
    padding: 13px 5px 13px 150px;
    background: #fff;
    position: relative;
    font-size: 14px;
    font-family: ProximaNova-Semibold
}

#news .archive > ul > li > ul > li > ul > li a:hover {
    background: #dbeeef
}

#news .archive > ul > li > ul > li > ul > li a .date {
    position: absolute;
    top: 14px;
    left: 42px;
    font-family: ProximaNova-Regular
}

#news .archive > ul > li > ul > li > ul > li a:before {
    position: absolute;
    left: 134px;
    top: 13px;
    width: 1px;
    bottom: 13px;
    background: #88b6b9;
    content: " "
}

#news .archive > ul > li > ul > li > ul > li a:after {
    display: none
}

.games li .description p.text a, #prepaids li .title a, #fkfg + .white #prepaids .title a, #fkfg + .white.fg #prepaids li .title a {
    position: static;
    color: inherit
}

body.xmas nav .logo {
    width: 180px;
    height: 47px;
    margin-left: -15px;
    background: url(https://bananatic-15199.kxcdn.com/de/images/christmas-logo.svg) no-repeat center center;
    background-size: cover;
    margin-top: 7px
}

body.xmas nav .logo i {
    display: none
}

body.xmas #slides .slide.youtube .knight:after {
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/xmas-bg-bananatube.png) !important
}

body.xmas #slides .slide.youtube {
    background-image: url(https://bananatic-15199.kxcdn.com/de/images/xmas-bananatube.png) !important
}

footer .menu li a.discord {
    padding: 32px 15px 0 15px;
    font-size: 12px;
    font-family: ProximaNova-Semibold
}

footer .menu li a.discord img {
    width: 40px;
    height: 40px
}

#discord-fixed {
    z-index: 999999;
    position: fixed;
    top: 325px;
    left: 0;
    background: #7289da;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    height: 100px;
    width: 48px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    text-align: center
}

#discord-fixed:hover {
    background: #6275c4
}

#discord-fixed b {
    font-family: ProximaNova-Semibold;
    display: block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    width: 135px;
    position: absolute;
    bottom: 43px;
    left: -47px;
    text-align: center
}

#discord-fixed b:before {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #2f3136;
    background: #43b581;
    border-radius: 50%;
    content: "";
    margin-right: 5px;
    margin-left: -5px;
    vertical-align: text-top
}

#contact-fixed {
    z-index: 999999;
    position: fixed;
    top: 188px;
    left: 0;
    background: #80bd39;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    height: 135px;
    width: 48px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    text-align: center
}

#contact-fixed:hover {
    background: #528714
}

#contact-fixed b {
    font-family: ProximaNova-Semibold;
    display: block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    width: 135px;
    position: absolute;
    bottom: 54px;
    left: -47px;
    text-align: center
}

#contact-fixed b:before {
    font-size: 24px;
    content: "@";
    margin-right: 8px;
    position: relative;
    top: 2px
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
}

@media (min-width: 1900px) {
    #buy, #exp, #partner, #shop.classic, #fkfg, #partners, #social {
        background-size: 100% auto
    }
}

@media (max-width: 1600px) {
    .find-game .text {
        margin-left: 10px
    }

    #buy .top .left {
        float: none;
        padding: 0;
        border-right: 0;
        margin-bottom: 15px;
        width: auto
    }

    #exp .slogan {
        padding: 28px 25px 0 0;
        font-size: 16px
    }

    #exp .tasks li {
        width: 25%;
        margin-bottom: 15px;
        height: 340px
    }

    #exp .tasks li a {
        height: 320px;
        padding-top: 41px
    }

    #exp .tasks li a:hover {
        height: 340px;
        padding-top: 51px
    }

    #exp .tasks li a.complete:hover {
        padding-top: 41px;
        height: 320px
    }

    #exp .tasks .exp {
        font-size: 30px
    }

    #exp .tasks .name {
        font-size: 15px;
        margin: 38px 0 23px 0
    }

    #exp .tasks .badge {
        width: 57px;
        height: 57px
    }

    #exp .tasks p {
        font-size: 15px;
        line-height: 25px;
        margin-top: 19px
    }

    #prepaids ul {
        margin: 0 -0.925%
    }

    #prepaids li {
        width: 18.15%;
        margin: 0 0.925% 24px 0.925%
    }

    #fkfg form {
        padding-left: 250px
    }

    #fkfg form .bottom {
        padding: 35px 50px 10px
    }

    #fkfg.fg form .bottom {
        padding: 26px 40px 0 40px
    }

    #profile .background {
        height: 300px
    }

    #profile .breadcrumb {
        margin: 42px 0 47px 0
    }

    #profile .menu li a span {
        margin-left: 30px
    }

    #profile .menu li a span:before {
        left: -15px
    }

    #profile .rank .forum {
        height: 68px
    }

    #profile .right ul li img {
        width: 41px;
        height: 41px
    }

    #profile .friends {
        margin: 0 -16px 20px -16px
    }

    #profile .friends li {
        width: 25%;
        padding: 0 16px 32px 16px
    }

    #profile .friends li .message {
        right: -2px
    }

    #profile .friends li .friend {
        height: 302px
    }

    #profile .friends li .friend img {
        width: 75px;
        height: 75px
    }

    #profile .friends li .friend .level, #profile .friends li .friend .rank, #profile .friends li .friend .last-visit {
        margin-bottom: 20px
    }

    #profile .person img {
        margin: 0 23px
    }

    #profile .person:before {
        left: 85px
    }

    #profile .person b.points {
        right: 23px
    }

    #umenu .search {
        width: 348px;
        max-width: 100%
    }

    #menu .user {
        min-width: auto
    }

    .game .screens .thumbs span {
        margin-top: 0;
        padding: 0
    }

    #profile ul.badges li {
        width: 20%
    }
}

@media (max-width: 1500px) {
    #umenu a {
        margin-right: 44px
    }

    #findgame .header {
        padding: 37px 0
    }

    .letters {
        float: none;
        width: 100%
    }

    .find-game {
        float: none;
        width: 740px;
        max-width: 100%;
        margin: 39px auto 42px auto
    }

    .find-game .text {
        margin-left: 15px
    }

    .games li .play .vote {
        width: 110px;
        height: 13px;
        background-size: 22px 26px
    }

    .games li .play .vote .bar {
        height: 13px;
        background-size: 22px 26px
    }

    .games.thumbnails li {
        width: 25%
    }

    #slides {
        height: 520px
    }

    #slides .slide {
        height: 507px
    }

    #slides h1 {
        font-size: 46px;
        padding: 40px 0 20px 0
    }

    #slides h2 {
        font-size: 20px
    }

    #slides .bandalf {
        height: 223px;
        width: 151px;
        margin: 20px auto 0 auto
    }

    #slides .slide a {
        height: 507px
    }

    .getbanana {
        margin-bottom: 64px;
        margin-top: -7px
    }

    .getbanana li {
        width: 33.333%;
        height: 64px;
        margin-bottom: 18px
    }

    .getbanana li a {
        height: 64px;
        padding-top: 23px
    }

    .getbanana li a:hover {
        height: 82px;
        padding-top: 32px
    }

    .getbanana li .points {
        top: 24px
    }

    .getbanana li a:hover .points {
        top: 33px;
        right: 7.1%
    }

    .getbanana li .icon {
        margin-right: 2px
    }

    .getbanana .hardware, .getbanana .gplus {
        clear: none
    }

    .getbanana .food, .getbanana .mobile, .getbanana .fk {
        clear: both
    }

    .getbanana li.social a i + b {
        top: 0;
        display: inline
    }

    .whoplay-list .container {
        margin: 0 auto;
        max-width: 1920px;
        padding: 0 100px
    }

    .whoplay .character {
        padding: 0
    }

    .whoplay-list a {
        width: 33.3333%
    }

    .whoplay-list a.active {
        width: 34.3333%
    }

    .whoplay-list a:first-child {
        border-left-width: 1px
    }

    .whoplay-list a:last-child {
        border-right-width: 1px
    }

    .whoplay-list a + a + a + a, .whoplay a.prev, .whoplay a.next {
        display: none
    }

    .whoplay-list {
        height: 114px
    }

    .whoplay-list a {
        height: 164px
    }

    .whoplay-list a.active {
        height: 188px
    }

    .whoplay-list a .image {
        height: 113px;
        padding-top: 12px
    }

    .whoplay-list a.active .image {
        height: 133px;
        padding-top: 32px
    }

    .whoplay-list a .image img {
        height: 100px
    }

    .popular li {
        width: 25%
    }

    .popular li + li + li + li + li {
        display: none
    }

    .news .item {
        width: 100%;
        float: none;
        clear: both;
        padding: 7px 0 50px 154px;
        font-size: 14px;
        min-height: 150px
    }

    .news .item .image {
        width: 100px;
        height: 100px;
        left: 15px
    }

    .news .item .image img {
        height: 100px
    }

    .game-bg {
        background-size: auto 310px
    }

    .game .header {
        padding: 14px 0
    }

    .game .col-top, .game .col-tasks, .game .col-screens, .game .col-requirements, .game .col-opinions, .game .col-help + .col-similar {
        width: 53.33%;
        clear: both;
        padding: 0;
        margin-bottom: 48px
    }

    .game .col-desc, .game .col-gameplay, .game .col-players, .game .col-help, .game .col-similar {
        width: 46.67%;
        padding: 0 0 0 2.75%;
        clear: none;
        margin-bottom: 48px
    }

    .game .col-gameplay:before {
        display: none
    }

    .game .col-screens-2 {
        width: 100%;
        padding-left: 0;
        margin-bottom: 48px
    }

    .game .col-tasks.no-tasks {
        width: 100%;
        padding-left: 0;
        margin-bottom: 0
    }

    .game .col-screens-2.no-tasks {
        width: 53.33%;
        clear: both;
        padding: 0;
        margin-bottom: 48px
    }

    .game .col-screens-2.no-tasks .screens {
        min-height: 230px
    }

    .game .col-screens-2.no-tasks + .col-gameplay .embed-mask {
        height: 232px
    }

    .game .col-screens-2.no-tasks .screens .thumbs a {
        width: 25%
    }

    .game .screens {
        padding: 25px 10% 9px
    }

    .game .screens .thumbs {
        height: 175px
    }

    .game .screens .thumbs span {
        width: 200%;
        height: auto
    }

    .game .screens .thumbs a {
        width: 25%;
        height: auto
    }

    .game .embed-mask {
        height: 212px
    }

    .game .embed-mask a {
        padding-top: 45px
    }

    .game .similar li {
        width: 50%
    }

    .game .similar li + li + li {
        display: none
    }

    .game .tasks li {
        font-size: 15px;
        line-height: 43px
    }

    .game .tasks li a {
        padding: 11px 25px
    }

    .game .tasks li .award img {
        width: 42px;
        height: 42px;
        margin-right: 4px
    }

    .game .tasks li .award .exp {
        font-size: 18px
    }

    .game .tasks li .award b.exp:after {
        width: 18px;
        height: 18px;
        line-height: 18px;
        padding-left: 1px
    }

    .game .tasks li .award .points {
        font-size: 18px
    }

    .game .tasks li .pointer {
        top: 85px
    }

    .game .tasks li + li .pointer {
        top: 159px
    }

    .game .tasks li + li + li .pointer {
        top: 221px
    }

    .game .tasks li + li + li + li .pointer {
        top: 266px
    }

    .game .tasks li + li + li + li + li .pointer {
        top: 310px
    }

    .game .tasks li .task-box strong {
        margin-bottom: 32px
    }

    .game .tasks li .task-box .time-left {
        padding: 12px 0
    }

    .game .tasks .waiting {
        margin-top: 17px
    }

    .game .tasks li .task-box .next-task {
        font-size: 18px;
        padding: 6px 0;
        width: 150px
    }

    .game .tasks li .task-box .next-task:before {
        font-size: 20px;
        margin-bottom: 5px
    }

    .game .tasks li .task-box .time-expired {
        margin: 8px 0 -5px;
        line-height: 14px
    }

    #filedrag {
        padding: 20px 0 20px 55px
    }

    #filedrag.loading {
        height: 84px;
        padding-top: 84px
    }

    .game .description {
        font-size: 14px
    }

    .game .description p {
        height: 117px
    }

    .game .help li {
        font-size: 14px
    }

    .game .players li a {
        font-size: 14px
    }

    .game .players li a span {
        max-width: 100px;
        margin: 0 auto 14px auto
    }

    .game .opinions li {
        font-size: 14px
    }

    .game .opinions p {
        margin: 8px 0;
        line-height: 18px
    }

    #promo-prepaids {
        min-height: 192px
    }

    #promo-prepaids li .price {
        display: none
    }

    #promo-prepaids li + li + li + li + li {
        display: none
    }

    #promo-prepaids li + li + li {
        margin-left: 20%
    }

    #promo-prepaids li + li + li + li {
        margin-left: 0
    }

    #promo-prepaids + .bananji {
        width: 206px;
        height: 192px;
        margin-left: -103px
    }

    #fkfg form {
        padding-left: 0
    }

    #fkfg form .bottom {
        padding: 35px 3.8% 10px
    }

    #fkfg form .bottom .bananas {
        width: 30.2%;
        margin: 0 4%
    }

    #fkfg form .bananji {
        display: none
    }

    #help .section li {
        width: 100%
    }

    #profile .ranking-awards {
        margin: 15px 0 50px 0
    }

    #profile .ranking-awards li {
        height: 64px;
        font-size: 14px
    }

    #profile .ranking-awards li img {
        width: 45px;
        height: 45px;
        margin-right: 4px
    }

    #profile .ranking-awards li .points {
        font-size: 20px
    }

    #profile .ranking-awards li .points:after {
        font-size: 15px
    }

    #creator-sets li {
        width: 253px;
        height: 324px
    }

    #creator-sets li a {
        width: 241px;
        height: 312px
    }

    #creator-sets .banana {
        width: 213px;
        margin: 15px auto 0 auto
    }

    #creator-sets li .name {
        font-size: 16px;
        margin: 3px 0 9px 0
    }

    #creator-sets li .points {
        font-size: 26px
    }

    #profile ul.badges li {
        width: 25%
    }
}

@media (max-width: 1367px) {
    .container {
        width: 100%;
        padding: 0 10px;
        margin: 0 auto
    }

    .container .to-margins {
        margin: 0 -10px
    }

    .letters li a {
        width: 34px
    }

    .games li .box {
        max-width: 1166px;
        width: 100%;
        padding: 0 10px;
        margin: 0 auto
    }

    .games li .awards .plus {
        display: none
    }

    .games.thumbnails {
        max-width: 1166px;
        max-width: 100%;
        width: 100%;
        padding: 0 10px 100px 10px;
        margin: 0 auto
    }

    .games.thumbnails li .awards .plus {
        display: inline-block
    }

    .game .screens {
        padding: 35px 10%
    }

    .game .embed-mask {
        height: 248px
    }

    .game .embed-mask a {
        padding-top: 76px
    }

    #shop p {
        padding-right: 0;
        text-align: center
    }

    #shop p a {
        position: relative;
        right: auto;
        float: none;
        margin-bottom: 5px
    }

    #shop p b {
        margin-right: 0;
        display: block;
        top: 0;
        margin-bottom: 5px
    }

    #profile .rank {
        margin-top: 9%
    }

    #profile .menu li a span {
        margin-left: 20px
    }

    #profile .menu li a span:before {
        left: -10px
    }

    #profile .right .fav .vote {
        display: none
    }

    #profile .buttons {
        width: 22%
    }

    .whoplay-list .container {
        padding: 0 10px
    }

    .whoplay .character .description {
        width: 34%;
        margin-left: 0;
        padding-left: 40px
    }

    .whoplay .character .details b.exp, .whoplay .character .details b.points {
        font-size: 20px
    }

    .get-banana li .hint {
        background: #80BD39;
        top: 0;
        right: 0;
        z-index: 3000;
        border-bottom-left-radius: 50%;
        padding: 15px 0 0 6px
    }

    .get-banana li .hint:before {
        display: none
    }

    .get-banana li a:hover + .hint {
        top: -10px;
        right: -10px;
        z-index: 3400
    }
}

@media (max-width: 1200px) {
    .container .to-margins {
        margin: 0 -10px
    }

    #umenu a {
        margin-right: 24px
    }

    .games.thumbnails {
        padding: 0 0 100px 0
    }

    .games.thumbnails li .box {
        margin: 0 10px 26px 10px
    }

    .whoplay .character .details b {
        margin-left: 5px
    }

    #exp ul.tasks {
        margin: 40px -10px
    }

    #exp ul.tasks li {
        padding: 0 10px
    }

    #partners ul.list {
        margin: 40px -10px
    }

    #partners ul.list li {
        padding: 0 10px
    }

    #promo-prepaids li {
        width: 33.333%;
        display: block !important;
        margin: 0 !important
    }

    #promo-prepaids li .price {
        display: block
    }

    #promo-prepaids + .bananji {
        display: none
    }

    #prepaids ul {
        margin: 0 -1%
    }

    #prepaids li {
        width: 23%;
        margin: 0 1% 24px 1%
    }

    #profile .friends {
        margin-right: 0
    }

    #profile .friends li {
        width: 33.333%
    }

    #profile .games li .remove {
        right: -1px;
        top: -1px;
        border-radius: 0;
        border-bottom-left-radius: 50%
    }

    #profile .podium {
        float: none;
        margin: 0 auto
    }

    #social .options .box .option .content .exp {
        font-size: 20px;
        padding-bottom: 3px
    }

    #menus .ps4 b {
        width: 40px !important;
        text-indent: -200px;
        overflow: hidden;
        position: relative
    }

    #menus .ps4 b:after {
        position: absolute;
        content: "PS4";
        text-indent: 0;
        top: 11px;
        left: 0;
        right: 0;
        text-align: center
    }

    #menus li a.ps4 {
        padding-left: 7px;
        padding-right: 7px
    }

    footer .social li a {
        width: 60px
    }

    footer .menu li a {
        padding: 55px 15px 0 15px
    }

    #creator.show-summary #character {
        left: calc((100% - 390px) / 2)
    }
}

@media (max-width: 1025px) {
    #facebook, #twitter, #gplus {
        width: 31px
    }

    #umenu a {
        font-size: 14px
    }

    .getbanana li {
        width: 50%
    }

    .getbanana .food, .getbanana .fk {
        clear: none
    }

    .getbanana .ads, .getbanana .hardware, .getbanana .gplus, .getbanana .sedoc {
        clear: both
    }

    footer .social {
        float: none;
        border-bottom: 1px solid #414141
    }

    footer .social li {
        width: 33.333%
    }

    footer .social li a {
        height: auto;
        padding: 10px 0;
        width: 100%
    }

    footer .menu {
        float: none;
        border-left: 0
    }

    footer .menu li {
        display: block;
        width: 100%;
        border-bottom: 1px solid #414141;
        border-left: 1px solid #414141
    }

    footer .menu li a, footer .menu li a.half, footer .menu li a.half + a.half, footer .menu li a.discord {
        padding: 16px 0;
        height: auto
    }

    footer .menu li a.half + a.half {
        border-top: 1px solid #414141
    }

    footer .service {
        display: block;
        padding: 15px 0;
        clear: both;
        margin: 0
    }

    .letters li a {
        width: 28px;
        font-size: 16px;
        height: 32px;
        line-height: 32px;
        margin-bottom: 3px
    }

    .game .players li {
        width: 33.3333%
    }

    .game .players li + li + li + li + li + li + li + li + li + li {
        display: none
    }

    .recommended {
        padding: 50px 0
    }

    .recommended:before, .recommended:after {
        height: 29px
    }

    .recommended .fk, .recommended .fg, .recommended .sedoc, .recommended .vikings {
        display: block;
        margin: 15px auto 0 auto;
        float: none
    }

    .whoplay .character .details b.points, .whoplay .character .details b.exp {
        font-size: 24px;
        margin-top: 4px
    }

    .whoplay .character .description p {
        font-size: 14px;
        line-height: 18px
    }

    .whoplay .character .description b {
        font-size: 30px
    }

    .game .col-tasks, .game .col-desc {
        min-width: auto;
        width: 100%;
        clear: both;
        padding: 0;
        margin: 0 0 20px 0
    }

    .game .col-tasks.no-tasks {
        margin-bottom: 20px
    }

    .game .description {
        height: auto
    }

    .game .tasks li .task-box {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        width: 100%;
        padding-bottom: 50px
    }

    .game .tasks li .task-box .pointer {
        left: 50%;
        top: -25px;
        margin-left: -13px;
        width: 26px;
        height: 13px;
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-bottom: 12px solid #0B5C60
    }

    .game .tasks li .task-box strong {
        margin-bottom: 20px
    }

    .game .tasks input.btn, .game .tasks input.text {
        width: 320px;
        max-width: 100%;
        min-width: auto
    }

    .game .col-screens-2 .screens .thumbs a {
        width: 33.333%
    }

    .opacity .game .col-screens-2 .screens .thumbs a:after {
        left: 6%;
        right: 6%
    }

    .games li .awards .award {
        display: block;
        margin: 0 auto
    }

    .games.thumbnails li .awards .award {
        display: inline-block
    }

    .games li .awards b.points, .games li .awards b.exp {
        font-size: 14px;
        margin: 0;
        padding: 0;
        line-height: 24px;
        position: relative
    }

    .games.thumbnails li .awards b.points, .games.thumbnails li .awards b.exp {
        font-size: 18px
    }

    .games li .awards b.points:after, .games li .awards b.exp:after {
        clear: both;
        margin-left: 0;
        margin-right: 0;
        font-size: 16px;
        position: absolute;
        top: 16px;
        left: 50%;
        margin-left: -7px
    }

    .games.thumbnails li .awards b.points:after, .games.thumbnails li .awards b.exp:after {
        position: static;
        margin-left: 3px;
        font-size: 17px
    }

    #promo-prepaids li {
        width: 50%
    }

    #prepaids ul {
        margin: 0 -1.666%
    }

    #prepaids li {
        width: 30%;
        margin: 0 1.666% 24px 1.666%
    }

    #paysafecard li {
        max-width: 48%;
        margin-bottom: 20px
    }

    #profile .buttons a, #profile .buttons a.transea {
        padding-left: 15px
    }

    #profile .buttons a i {
        width: 30px
    }

    .games-options {
        clear: both;
        margin: -10px 0 30px 0;
        padding-left: 0
    }

    body {
        padding-top: 0
    }

    nav {
        position: relative
    }

    footer .trustpilot-widget {
        margin-left: 0;
        margin-top: 0
    }

    #menu .user .status {
        display: none
    }

    #creator {
    }

    #creator .parts .save b, #creator .parts .save:after {
        display: none
    }

    #creator .parts .save .banicon-ok {
        top: 0
    }

    #creator #info p {
        display: block;
        clear: both;
        font-size: 12px;
        margin: 0;
        text-align: left;
        padding: 3px 0
    }

    #creator #info .status {
        margin-top: 5px
    }

    #creator .parts a.male {
        margin-left: 30px
    }
}

button.toggle {
    display: none
}

body {
    width: 100%
}

@media (max-width: 1025px) {
    #facebook, #twitter, #gplus, #contact-fixed, #discord-fixed {
        display: none
    }

    .games li .awards b.points, .games li .awards b.exp {
        text-align: center
    }

    #partners .list.ads {
        padding-left: 0
    }

    #partners .list.ads li {
        width: 50%
    }

    #social .options .box {
        display: block;
        margin: 0 auto 15px auto;
        max-width: 400px;
        width: 100%
    }

    #social .options .box + .box {
        margin-left: auto
    }

    #profile .background {
        background-color: transparent;
        height: 449px;
        background-size: auto 390px !important
    }

    #profile .breadcrumb + .left {
        height: auto;
        margin-bottom: 15px;
        width: 188px;
        margin-right: 15px
    }

    #profile .breadcrumb + .left + .center {
        width: auto;
        overflow: hidden;
        float: none
    }

    #profile .center {
        width: 78%;
        margin: 0 0 0 3%
    }

    #profile .info {
        height: 183px;
        margin-top: 30px
    }

    #profile .buttons {
        float: none;
        width: auto;
        padding: 0;
        max-width: 100%;
        height: 70px;
        overflow: hidden
    }

    #profile .buttons a {
        width: 48%;
        float: left
    }

    #profile .buttons a + a {
        float: right
    }

    #profile .menu {
        float: none;
        width: 100%;
        clear: both
    }

    #profile .rank {
        width: 100%;
        clear: both;
        float: none;
        margin-top: 20px
    }

    #profile .rank .forum {
        float: left;
        width: 19%
    }

    #profile .rank .forum + .forum {
        margin-left: 1.25%
    }

    #profile .rank .header, #profile .rank table {
        display: none
    }

    #profile .rank + .center {
        width: 100%;
        margin: 0;
        padding: 0;
        float: none;
        clear: both
    }

    #profile .rank + .center + .right {
        display: none
    }

    #profile .info .name {
        height: auto;
        min-height: 55px;
        overflow: visible;
        margin-bottom: 15px
    }

    #profile .two-columns {
        width: 100%;
        clear: both;
        float: none
    }

    #profile .two-columns .search {
        width: 50% !important
    }

    #gold .list li {
        width: 100%
    }

    .sea.modify-banana .header .status {
        max-width: 95%;
        margin: 10px auto 0 auto;
        display: block
    }

    #popular {
        overflow: hidden
    }
}

@media (max-width: 800px) {
    .header {
        margin: 30px 0 !important;
        padding: 0
    }

    .header.to-left a {
        margin-top: 30px;
        padding: 9px 20px
    }

    .game .header {
        margin-bottom: 0 !important
    }

    nav, #menu {
        height: auto
    }

    nav button.toggle {
        float: right;
        display: inline;
        width: 41px;
        height: 39px;
        border: 2px solid #fff;
        border-radius: 8px;
        background: none;
        color: #fff;
        margin-top: 10px;
        margin-bottom: 12px
    }

    nav button.toggle .line {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 1px;
        background: #fff;
        margin: 6px 0
    }

    nav button.toggle:hover {
        background: #fff
    }

    nav button.toggle:hover .line {
        background: #0b4d51
    }

    #menu {
        clear: both;
        float: none;
        width: auto;
        display: none;
        margin: 0 -10px
    }

    #menu li {
        float: none;
        border: 0
    }

    #menu li a {
        padding: 10px 0;
        text-align: center;
        width: auto;
        height: auto;
        border: 0
    }

    #menu .user {
        padding: 10px 0 10px 10px;
        text-align: left;
        float: left
    }

    #menu .points {
        padding: 20px 10px;
        width: auto;
        overflow: hidden;
        height: 60px;
        text-align: right
    }

    #menu .user:hover, #menu .points:hover {
        background: none
    }

    #menu li.awards, #menu li.messages, #menu li.notifications, #menu li.settings {
        position: static;
        float: left;
        width: 25%;
        text-align: center
    }

    #menu li a.more, #menu li.settings a.more {
        float: none;
        width: 100%
    }

    #menu li a.more .counter {
        right: auto;
        left: 50%
    }

    #menu li .list, #menu li.settings .list {
        width: auto;
        overflow: hidden;
        border-radius: 0;
        position: absolute;
        top: 124px;
        left: 1px !important;
        right: -1px;
        text-align: left
    }

    #menu li .list:before {
        display: none
    }

    #umenu .search {
        max-width: 100%
    }

    #umenu {
        display: none;
        height: auto;
        text-align: center
    }

    #umenu ul {
        height: auto;
        float: none;
        display: block
    }

    #umenu li.line {
        display: none
    }

    #umenu li {
        display: block;
        float: none
    }

    #umenu a {
        height: auto;
        display: block;
        float: none;
        font-size: 16px;
        margin-right: 0;
        padding: 10px 0
    }

    #umenu a:hover {
        color: #80BD39
    }

    #umenu li ul, .opacity #umenu li ul {
        opacity: 1;
        visibility: visible;
        display: inline-block !important;
        position: static;
        background: #fff;
        padding: 0;
        border: 0;
        width: 100%;
        margin-top: -37px
    }

    #umenu li ul a {
        padding: 10px 0
    }

    #umenu form {
        text-align: center;
        padding-bottom: 15px
    }

    #umenu:after {
        height: 5px;
        background: #0b4d51
    }

    #login, .opacity #login {
        opacity: 1;
        height: 0;
        border-radius: 0;
        position: static;
        padding: 0 10px;
        min-width: auto
    }

    #login.open {
        height: auto;
        padding: 10px
    }

    #buypsc {
        width: 90%;
        top: 20px;
        margin-top: 0
    }

    #slides, #slides + .white {
        display: none
    }

    .whoplay-list {
        display: none
    }

    .whoplay {
        margin: 0 auto 20px auto
    }

    .whoplay .character {
        position: static;
        display: block !important;
        clear: both
    }

    .whoplay .character:after {
        width: 100%;
        clear: both;
        height: 30px;
        content: " ";
        display: block
    }

    .whoplay .character + .character {
        padding-top: 30px;
        border-top: 1px solid #116d73
    }

    .whoplay .character .description {
        float: right;
        width: 70%;
        height: auto
    }

    .whoplay .character .description p {
        text-align: left;
        height: auto
    }

    .whoplay .character .image {
        width: 30%;
        overflow: hidden;
        float: left;
        margin-top: 0;
        line-height: 20px;
        height: auto
    }

    .whoplay .character .details {
        float: right;
        width: 70%;
        height: auto;
        padding-left: 40px
    }

    .getbanana li {
        width: 100%
    }

    .popular li {
        width: 33.333%
    }

    .popular li + li + li + li {
        display: none
    }

    .gametype {
        margin-right: -4px;
        border-bottom: 0
    }

    .gametype:before {
        display: none
    }

    .gametype li, #fkfg + .white.fg .gametype li, .gametype.cs li {
        width: 20%
    }

    .gametype li + li + li + li + li + li {
        clear: both;
        margin-top: -1px;
        margin-left: 0
    }

    .gametype li + li + li + li + li + li a {
        border-width: 1px 1px 1px 1px
    }

    .gametype li + li + li + li + li + li + li {
        clear: none;
        margin-left: -1px
    }

    .gametype li a {
        height: 143px
    }

    .gametype li a:hover {
        height: 163px
    }

    .gametype li a .banicon {
        margin-top: 25px
    }

    .gametype li a b {
        margin-top: 23px
    }

    .gametype li a:hover b {
        margin-top: 33px
    }

    .games.thumbnails li {
        width: 50%
    }

    #findgame .header {
        padding: 17px 0
    }

    .letters {
        height: auto
    }

    .letters li {
        width: 6.7%
    }

    .find-game {
        margin: 15px 0 25px 0;
        padding: 0 0 45px 0;
        height: auto
    }

    .find-game .text {
        padding: 13px 26px;
        width: 100%;
        height: 42px;
        margin: 0;
        background: transparent
    }

    .find-game .category {
        position: absolute;
        right: auto;
        top: 43px;
        left: -1px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        width: 100%
    }

    .find-game button {
        top: 43px;
        height: 44px;
        border-top-right-radius: 0
    }

    .find-game .category label {
        width: 100%
    }

    .find-game .category label.checked:before, .find-game .category label.checked:after {
        right: 90px
    }

    .games li .play {
        display: none
    }

    .games li .image {
        width: 20%
    }

    .games li .description {
        border-right: 0;
        width: 58%
    }

    .games li .awards {
        width: 22%
    }

    .game .col-top, .game .col-top, .game .col-screens, .game .col-help, .game .col-gameplay, .game .col-players, .game .col-opinions, .game .col-similar, .game .col-requirements, .game .col-help + .col-similar {
        min-width: auto;
        width: 100%;
        clear: both;
        padding: 0;
        margin: 0 0 20px 0
    }

    .game .players li {
        width: 25%
    }

    .game .players li + li + li + li + li + li + li + li + li + li {
        display: block
    }

    .game-header .game-name {
        width: 100%
    }

    .game-header .game-name a {
        display: none
    }

    .get-banana li {
        width: 50%
    }

    .get-banana .status {
        width: 100%;
        float: none;
        margin-left: 0;
        text-align: right
    }

    .get-banana form b {
        font-size: 20px
    }

    .get-banana form .btn {
        padding: 12px
    }

    #buy .top, #buy .bottom {
        padding: 25px
    }

    #buy .top .right .box {
        width: 100%;
        display: block;
        margin-bottom: 15px
    }

    #partners .list.ads li {
        width: 100%;
        margin-bottom: 15px
    }

    #partners ul.list li {
        width: 100%;
        max-width: 450px;
        display: block;
        margin: 0 auto 15px auto;
        float: none
    }

    #recommend-stats {
        display: none
    }

    #recommend .buttons .shadow-btn {
        width: 48%;
        margin-bottom: 15px
    }

    #recommend .profit {
        margin-bottom: 15px
    }

    #apps .your-status {
        float: none !important;
        margin-left: 0 !important;
        text-align: center !important
    }

    #exp .slogan {
        width: 100%;
        float: none;
        margin-bottom: 20px
    }

    #exp .tasks li {
        width: 50%
    }

    #partner a.history {
        margin-top: 30px
    }

    #partner .breadcrumb {
        width: 100%;
        margin-top: 0
    }

    #shop.classic .header + p .transea {
        display: none
    }

    #profile .menu {
        height: auto
    }

    #profile .menu ul {
        margin: 0 -10px;
        border-bottom: 1px solid #35a78d;
        height: auto;
        border-left: 0
    }

    #profile .menu ul li {
        border-right: 0;
        border-top: 1px solid #35a78d;
        float: none;
        width: 100%;
        display: block;
        height: auto
    }

    #profile .menu ul li a {
        height: auto;
        padding: 7px 0
    }

    #profile .info {
        margin-top: 0
    }

    #profile .buttons {
        height: 100%
    }

    #profile .buttons a {
        float: none;
        width: 100%;
        display: block;
        margin-bottom: 10px;
        text-align: center
    }

    #profile .rank {
        text-align: center
    }

    #profile .rank .forum {
        display: inline-block;
        float: none;
        width: 30%;
        margin: 0 1%
    }

    #profile .games li .description {
        width: auto;
        float: none;
        overflow: hidden
    }

    #profile ul.badges li {
        width: 33.333%
    }

    #profile .ranking-buttons {
        height: auto;
        text-align: center;
        margin-bottom: 10px
    }

    #profile .ranking-buttons a {
        margin-bottom: 5px
    }

    #profile .ranking-buttons:before {
        display: none
    }

    #profile .pagination {
        margin: 0 0 10px 0;
        width: 100%;
        clear: both;
        float: none;
        text-align: center
    }

    #profile .ranking-awards li {
        height: auto;
        width: 33.333%
    }

    #prepaids {
        clear: both
    }

    #prepaids li {
        width: 48%;
        margin: 0 1% 24px 1%
    }

    #fkfg form .top {
        margin-right: 17px;
        height: auto;
        padding-left: 25px;
        line-height: 20px
    }

    #fkfg form .top:after {
        height: auto;
        bottom: 0
    }

    #fkfg .discount {
        width: 49%;
        margin: 0 1% 0 0
    }

    #fkfg form .bottom .bananas {
        width: 49%;
        margin: 0 0 0 1%
    }

    #fkfg .btn {
        clear: both;
        float: none;
        width: 49%;
        margin-bottom: -30px;
        position: relative;
        z-index: 100
    }

    #creator .parts {
        margin-left: 0
    }

    #creator .parts a.male {
        margin-left: 10px
    }

    #creator .parts a, #creator .parts .part {
        margin-right: 3px
    }

    #menus li a.ps4 b {
        width: 300px !important;
        max-width: 100%;
        margin: 0 auto;
        text-indent: 0;
        text-align: center
    }

    #menus li a.ps4 b:after {
        display: none
    }
}

@media (max-width: 640px) {
    .popular li {
        width: 100%
    }

    .popular li + li {
        border-top: 1px solid #116d73
    }

    .popular li .image {
        display: none
    }

    .popular li .pgame {
        background: #fff !important
    }

    .popular li:hover .pgame {
        margin: 0;
        padding-bottom: 38px
    }

    .games li .description p.text, .games li .description a.comments, .games li .image .type, .games li .description .info, .games li .awards .award {
        display: none
    }

    .games li {
        padding: 20px 0 21px 0
    }

    .games li .description {
        min-height: 93px;
        line-height: 93px
    }

    .games li .description b.name {
        vertical-align: middle;
        display: inline-block
    }

    .games li .awards b.points, .games li .awards b.exp {
        display: block;
        min-width: auto;
        max-width: 100%;
        width: 100%;
        margin: 6px 0 10px 0
    }

    .game .logo {
        float: none;
        margin: 0 auto;
        width: 250px;
        max-width: 100%
    }

    .game .options {
        width: 100%;
        float: none
    }

    #buy .bottom .options label {
        width: 100%;
        margin-bottom: 15px
    }

    #buy .submit input {
        width: 100%;
        padding: 0;
        text-align: center
    }

    #partners .join .green {
        display: block;
        width: 100%;
        text-align: center
    }

    #partners .join .green b {
        padding: 15px 0
    }

    #apps .list li {
        display: block;
        margin: 0 auto
    }

    #shop.classic ul li {
        width: 50%
    }

    #profile .background {
        height: 730px;
        background-size: auto 730px !important
    }

    #profile .breadcrumb + .left {
        float: none;
        display: block;
        margin: 0 auto 15px auto
    }

    #profile .rank .forum {
        width: 47%
    }

    #profile .info {
        height: auto;
        margin-bottom: 30px
    }

    #profile .breadcrumb + .left + .center {
        margin-left: 0
    }

    #profile .friends li {
        width: 50%
    }

    #profile ul.badges li {
        width: 50%
    }

    #profile #about {
        margin-top: 30px
    }

    #profile table.ranking td + td + td {
        white-space: nowrap
    }

    #gold .list li .all-items .item .gold img {
        display: none
    }

    #gold .list li .all-items .item .gold:after {
        display: none
    }

    #promo-prepaids li {
        width: 100%;
        background-position: center 116px
    }

    #promo-prepaids li a {
        margin: 0 auto;
        position: relative;
        left: -30px
    }

    #fkfg .discount {
        width: 98%;
        margin: 0 1%;
        clear: both;
        float: none
    }

    #fkfg form .bottom .bananas {
        width: 98%;
        margin: 20px 1% 40px 1%;
        clear: both;
        float: none
    }

    #fkfg .btn {
        width: 200px;
        margin: 0 auto -30px auto;
        max-width: 100%;
        clear: both;
        float: none
    }

    #paysafecard.steam li {
        max-width: 100%;
        margin: 0 auto 15px auto;
        display: block;
        float: none
    }

    .gametype.cs li a .banicon-cs-pistols, .gametype.cs li a .banicon-cs-guns, .gametype.cs li a .banicon-cs-heavy {
        font-size: 22px;
        margin-top: 42px
    }

    body.xmas img.xmas {
        display: none
    }

    #creator-sets ul {
        text-align: center
    }

    #creator .wrapper {
        overflow: hidden;
        margin-right: -10px;
        padding-right: 10px
    }

    #creator #character, #creator.show-summary #character {
        display: block;
        margin: 10px auto 85px auto;
        position: relative;
        left: auto
    }

    #creator #cart {
        position: absolute;
        right: -310px;
        z-index: 10;
        top: 16px
    }

    #creator #cart:hover {
        right: 10px
    }

    #creator #info {
        margin-top: -50px
    }

    #creator .parts a, #creator .parts .save {
        width: 11.11%;
        margin: 0 !important;
        border-radius: 0;
        height: 50px
    }

    #creator .parts .part-types a {
        width: 50px;
        height: 50px;
        line-height: 46px
    }

    #creator .parts .part:before {
        width: 42px;
        height: 42px;
        left: 50%;
        top: 2px;
        margin-left: -21px
    }

    #creator .parts .part-types {
        display: inline
    }

    #creator .parts .part-types a {
        width: 11.11%;
        float: left;
        margin: 0 !important
    }

    #creator .parts {
        margin-top: 27px
    }

    #creator .list .content .up, #creator .list .content .down {
        width: 20px
    }

    #creator .list .content {
        padding: 0 30px
    }

    #creator #character {
        max-width: 100%
    }

    .breadcrumb {
        margin: 25px 0 40px 0
    }
}

@media (max-width: 480px) {
    .whoplay .character .description {
        width: 100%;
        clear: both;
        float: none;
        padding-left: 0
    }

    .whoplay .character .image {
        width: 100%;
        max-width: 200px;
        clear: both;
        display: block;
        float: none;
        margin: 10px auto
    }

    .whoplay .character .details {
        padding-left: 0;
        width: 100%;
        text-align: center
    }

    .whoplay .character .details .transea {
        margin: 0 auto
    }

    .news .item {
        padding-left: 0
    }

    .news .item .image {
        display: none
    }

    .news .item + .item {
        border-top: 1px solid #fff;
        padding-top: 20px
    }

    .news .item .content {
        height: auto
    }

    .gametype.small li a b {
        display: none
    }

    .gametype.small li a {
        height: 100px
    }

    .gametype.small li a:hover {
        height: 120px
    }

    .games-options {
        width: 100%;
        text-align: center;
        height: auto
    }

    .games-options .order {
        width: 100%;
        clear: both;
        margin: 15px 0;
        text-align: left
    }

    .get-banana form {
        height: auto
    }

    .get-banana form b {
        display: block;
        float: none
    }

    #recommend .buttons .shadow-btn {
        width: 100%;
        margin-bottom: 10px
    }

    #exp .tasks li {
        width: 100%
    }

    #profile #creator-sets.podium {
        display: none
    }

    #profile .rank .forum {
        width: 98%;
        margin: 0 auto !important
    }

    #shop.classic ul li {
        width: 100%
    }

    #prepaids li {
        width: 98%
    }

    .gametype.cs li a .banicon-cs-guns, .gametype.cs li a .banicon-cs-heavy {
        font-size: 20px;
        margin-top: 44px
    }

    #creator .parts {
        padding-right: 40px;
        position: relative;
        height: 100px;
        margin-bottom: -20px
    }

    #creator .parts a, #creator .parts .part-types a {
        width: 25%
    }

    #creator .parts .save {
        width: 40px;
        height: 100px;
        position: absolute;
        top: 0;
        right: 0;
        line-height: 99px
    }

    #creator .parts .save .banicon-ok {
        padding: 0
    }

    #creator .parts .part-types a:before {
        display: none
    }

    #creator #cart {
        width: 350px;
        right: -260px;
        z-index: 50
    }

    #creator #cart .or {
        display: none
    }

    #creator #cart .lvl, #creator #cart .points {
        margin: 0 7px
    }

    #creator #cart .summary b {
        width: auto;
        padding-left: 15px;
        padding-right: 15px
    }

    #discord-fixed {
        display: none
    }

    #how-it-works {
        display: none
    }

    #fit {
        overflow: hidden
    }

    .letters {
        display: none
    }

    .games-options .with-offer {
        margin: 0 0 15px 0;
        width: calc(100% - 115px);
        padding: 10px 5px
    }

    .header b, .header > h1, .header > h2 {
        font-size: 20px
    }

    .parallax-mirror, .parallax-mirror img {
        display: none !important;
        opacity: 0 !important
    }
}

@media (max-width: 320px) {
    #creator #info {
        padding-left: 85px
    }

    #creator #info .lvl {
        padding-right: 0;
        margin-right: 0;
        display: block;
        float: none;
        padding-top: 9px
    }

    #creator #info .lvl:after {
        display: none
    }

    #creator #info .nick {
        font-size: 20px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        margin-top: 15px;
        float: none
    }
}
@font-face {
    font-family: 'ProximaNova-Regular';
    font-display: swap;
    src: url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Regular/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Regular/ProximaNova-Regular.otf') format('opentype'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Regular/ProximaNova-Regular.woff') format('woff'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Regular/ProximaNova-Regular.ttf') format('truetype'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Regular/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'ProximaNova-Bold';
    font-display: swap;
    src: url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Bold/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Bold/ProximaNova-Bold.otf') format('opentype'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Bold/ProximaNova-Bold.woff') format('woff'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Bold/ProximaNova-Bold.ttf') format('truetype'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Bold/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'ProximaNova-Semibold';
    font-display: swap;
    src: url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Semibold/ProximaNova-Semibold_gdi.eot');
    src: url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Semibold/ProximaNova-Semibold_gdi.eot?#iefix') format('embedded-opentype'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Semibold/ProximaNova-Semibold_gdi.woff') format('woff'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Semibold/ProximaNova-Semibold_gdi.ttf') format('truetype'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Semibold/ProximaNova-Semibold_gdi.otf') format('opentype'), url('https://bananatic-15199.kxcdn.com/eu/css/ProximaNova-Semibold/ProximaNova-Semibold_gdi.svg#ProximaNova-Semibold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-2666
}
@font-face {
    font-family: 'banicon';
    font-display: swap;
    src: url('https://bananatic-15199.kxcdn.com/css/banicon/fonts/banicon.eot?oemn8s');
    src: url('https://bananatic-15199.kxcdn.com/css/banicon/fonts/banicon.eot?oemn8s#iefix') format('embedded-opentype'), url('https://bananatic-15199.kxcdn.com/css/banicon/fonts/banicon.ttf?oemn8s') format('truetype'), url('https://bananatic-15199.kxcdn.com/css/banicon/fonts/banicon.woff?oemn8s') format('woff'), url('https://bananatic-15199.kxcdn.com/css/banicon/fonts/banicon.svg?oemn8s#banicon') format('svg');
    font-weight: normal;
    font-style: normal
}

[class^="banicon-"], [class*=" banicon-"] {
    font-family: 'banicon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.banicon-football:before {
    content: "\e96e"
}

.banicon-tractor:before {
    content: "\e96c"
}

.banicon-car:before {
    content: "\e96d"
}

.banicon-train:before {
    content: "\e969"
}

.banicon-plane:before {
    content: "\e96a"
}

.banicon-truck:before {
    content: "\e96b"
}

.banicon-cpu:before {
    content: "\e964"
}

.banicon-gpu:before {
    content: "\e965"
}

.banicon-hdd:before {
    content: "\e966"
}

.banicon-os:before {
    content: "\e967"
}

.banicon-ram:before {
    content: "\e968"
}

.banicon-animals:before {
    content: "\e963"
}

.banicon-bananatv:before {
    content: "\e962"
}

.banicon-boy:before {
    content: "\e960"
}

.banicon-girl:before {
    content: "\e961"
}

.banicon-platform:before {
    content: "\e95f"
}

.banicon-adventure:before {
    content: "\e95e"
}

.banicon-teddy:before {
    content: "\e95d"
}

.banicon-steam2:before {
    content: "\e95a"
}

.banicon-discord:before {
    content: "\e95b"
}

.banicon-instagram:before {
    content: "\e95c"
}

.banicon-check:before {
    content: "\e956"
}

.banicon-arrow-up2:before {
    content: "\e955"
}

.banicon-banan:before {
    content: "\e953"
}

.banicon-face:before {
    content: "\e954"
}

.banicon-remove:before {
    content: "\e952"
}

.banicon-hair:before {
    content: "\e957"
}

.banicon-random:before {
    content: "\e958"
}

.banicon-tree:before {
    content: "\e959"
}

.banicon-youtube:before {
    content: "\e951"
}

.banicon-bananapedia:before {
    content: "\e950"
}

.banicon-pen:before {
    content: "\e94e"
}

.banicon-vote-down:before {
    content: "\e94b"
}

.banicon-vote-up:before {
    content: "\e94c"
}

.banicon-eye:before {
    content: "\e94d"
}

.banicon-windows:before {
    content: "\e94a"
}

.banicon-gift2:before {
    content: "\e949"
}

.banicon-gold:before {
    content: "\e948"
}

.banicon-creator:before {
    content: "\e947"
}

.banicon-csgo:before {
    content: "\e94f"
}

.banicon-psc:before {
    content: "\e946"
}

.banicon-steam:before {
    content: "\e945"
}

.banicon-vk:before {
    content: "\e944"
}

.banicon-bancircle:before {
    content: "\e941"
}

.banicon-discount:before {
    content: "\e942"
}

.banicon-computer:before {
    content: "\e943"
}

.banicon-arcade2:before {
    content: "\e93c"
}

.banicon-new:before {
    content: "\e93d"
}

.banicon-star:before {
    content: "\e93e"
}

.banicon-chronometer:before {
    content: "\e93f"
}

.banicon-cards:before {
    content: "\e940"
}

.banicon-funzone:before {
    content: "\e93b"
}

.banicon-clock:before {
    content: "\e93a"
}

.banicon-user2:before {
    content: "\e938"
}

.banicon-gift:before {
    content: "\e939"
}

.banicon-android:before {
    content: "\e936"
}

.banicon-apple:before {
    content: "\e937"
}

.banicon-bp:before {
    content: "\e935"
}

.banicon-logo-negative:before {
    content: "\e932"
}

.banicon-arcade:before {
    content: "\e933"
}

.banicon-smartphone:before {
    content: "\e934"
}

.banicon-bananatic:before {
    content: "\e931"
}

.banicon-plus2:before {
    content: "\e930"
}

.banicon-search:before {
    content: "\e92f"
}

.banicon-gamepad:before {
    content: "\e92c"
}

.banicon-opinions:before {
    content: "\e92d"
}

.banicon-sticker:before {
    content: "\e92e"
}

.banicon-fg-accessories:before {
    content: "\e906"
}

.banicon-fg-box:before {
    content: "\e907"
}

.banicon-fg-clothes:before {
    content: "\e908"
}

.banicon-fg-headphones:before {
    content: "\e909"
}

.banicon-fg-keyboard:before {
    content: "\e90a"
}

.banicon-fg-mouse:before {
    content: "\e90b"
}

.banicon-fg-mousepad:before {
    content: "\e90c"
}

.banicon-fg-pad:before {
    content: "\e90d"
}

.banicon-fg-padsurfer:before {
    content: "\e90e"
}

.banicon-arrow-up:before {
    content: "\e61e"
}

.banicon-badge:before {
    content: "\e600"
}

.banicon-banana:before {
    content: "\e912"
}

.banicon-bananas:before {
    content: "\e601"
}

.banicon-bananas2:before {
    content: "\e61f"
}

.banicon-bananas3:before {
    content: "\e620"
}

.banicon-bottle:before {
    content: "\e621"
}

.banicon-camera:before {
    content: "\e622"
}

.banicon-cart:before {
    content: "\e904"
}

.banicon-close:before {
    content: "\e92b"
}

.banicon-comment:before {
    content: "\e619"
}

.banicon-cs-case:before {
    content: "\e921"
}

.banicon-cs-guns:before {
    content: "\e922"
}

.banicon-cs-heavy:before {
    content: "\e923"
}

.banicon-cs-keys:before {
    content: "\e924"
}

.banicon-cs-knives:before {
    content: "\e925"
}

.banicon-cs-others:before {
    content: "\e926"
}

.banicon-cs-pistols:before {
    content: "\e927"
}

.banicon-cs-smg:before {
    content: "\e928"
}

.banicon-cs-stickers:before {
    content: "\e929"
}

.banicon-down:before {
    content: "\e602"
}

.banicon-download:before {
    content: "\e62f"
}

.banicon-edit:before {
    content: "\e61a"
}

.banicon-exp:before {
    content: "\e60d"
}

.banicon-facebook:before {
    content: "\e91b"
}

.banicon-female:before {
    content: "\e90f"
}

.banicon-fg:before {
    content: "\e92a"
}

.banicon-fk:before {
    content: "\e623"
}

.banicon-forum:before {
    content: "\e91a"
}

.banicon-game-action:before {
    content: "\e60e"
}

.banicon-game-family:before {
    content: "\e60f"
}

.banicon-game-fantasy:before {
    content: "\e610"
}

.banicon-game-mmo:before {
    content: "\e611"
}

.banicon-game-rpg:before {
    content: "\e612"
}

.banicon-game-scifi:before {
    content: "\e613"
}

.banicon-game-simulation:before {
    content: "\e614"
}

.banicon-game-sport:before {
    content: "\e615"
}

.banicon-game-strategic:before {
    content: "\e616"
}

.banicon-game-war:before {
    content: "\e617"
}

.banicon-gplus:before {
    content: "\e91c"
}

.banicon-hand-up:before {
    content: "\e91e"
}

.banicon-heart:before {
    content: "\e91f"
}

.banicon-hint:before {
    content: "\e624"
}

.banicon-infinity:before {
    content: "\e625"
}

.banicon-right:before {
    content: "\72"
}

.banicon-like:before {
    content: "\e900"
}

.banicon-list:before {
    content: "\e605"
}

.banicon-loading:before {
    content: "\e618"
}

.banicon-lock:before {
    content: "\e61b"
}

.banicon-lock2:before {
    content: "\e61c"
}

.banicon-logo:before {
    content: "\e606"
}

.banicon-logo-small:before {
    content: "\e62e"
}

.banicon-mail:before {
    content: "\e607"
}

.banicon-male:before {
    content: "\e910"
}

.banicon-mobile:before {
    content: "\e627"
}

.banicon-notify:before {
    content: "\e608"
}

.banicon-ok:before {
    content: "\e903"
}

.banicon-palm:before {
    content: "\e626"
}

.banicon-photo:before {
    content: "\e913"
}

.banicon-play-circle:before {
    content: "\e920"
}

.banicon-plus:before {
    content: "\e905"
}

.banicon-pomocny:before {
    content: "\e914"
}

.banicon-refresh:before {
    content: "\e911"
}

.banicon-left:before {
    content: "\6c"
}

.banicon-rzetelny:before {
    content: "\e915"
}

.banicon-sedoc:before {
    content: "\e628"
}

.banicon-settings:before {
    content: "\e609"
}

.banicon-share:before {
    content: "\e901"
}

.banicon-signal:before {
    content: "\e629"
}

.banicon-spolecznik:before {
    content: "\e916"
}

.banicon-tag:before {
    content: "\e62a"
}

.banicon-task:before {
    content: "\e62b"
}

.banicon-thumbnails:before {
    content: "\e60a"
}

.banicon-troll:before {
    content: "\e917"
}

.banicon-twitter:before {
    content: "\e91d"
}

.banicon-up:before {
    content: "\e60c"
}

.banicon-user:before {
    content: "\e902"
}

.banicon-user-add:before {
    content: "\e919"
}

.banicon-users:before {
    content: "\e62c"
}

.banicon-wallet:before {
    content: "\e62d"
}

.banicon-wulgarny:before {
    content: "\e918"
}

.banicon-mail2:before {
    content: "\e61d"
}

.banicon-anchor:before {
    content: "\e630"
}
#cookies-message {
    padding: 15px;
    font-size: 14px;
    line-height: 18px;
    border-top: 2px solid rgb(211, 208, 208);
    text-align: center;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    width: 100%;
    z-index: 999999;
    color: #000;
}

#cookies-message a {
    text-decoration: none;
    color: #80bd39;
}

#cookies-message #accept-cookies {
    background-color: #116d73;
    font-family: ProximaNova-Semibold;
    text-transform: uppercase;
    font-weight: normal;
    padding: 5px 10px;
    color: #FFF;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    display: inline-block;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}
#proof-box {
    position: fixed;
    top: 100%;
    left: 100px;
    z-index: 999999;
    box-shadow: 10px 20px 40px 0 rgba(36, 35, 40, .1);
    line-height: 20px;
    background: #fff;
    padding: 17px 20px 0px 96px;
    height: 99px;
    border-radius: 50px;
    border: 1px solid rgba(216, 217, 226, .5);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    margin-top: 0;
    border-top-right-radius: 5px;
}

#proof-box.show {
    margin-top: -120px;
}

#proof-box img.icon {
    width: 75px;
    height: 75px;
    left: 13px;
    top: 12px;
    border-radius: 50%;
    position: absolute;
}

#proof-box .who {
    display: inline-block;
    font-size: 14px;
    color: #242328;
    background: #f0f1f7;
    padding: 2px 4px;
    font-family: ProximaNova-Semibold;
    white-space: nowrap;
    margin-left: -3px;
}

#proof-box .action {
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    color: #686b81;
}

#proof-box .when {
    display: inline-block;
    white-space: nowrap;
    font-size: 11px;
    color: #9196b6;
}

#proof-box a {
    color: #0095F7;
    font-size: 12px;
    float: right;
    margin-top: 2px;
}

#proof-box .close {
    position: absolute;
    right: 3px;
    top: -1px;
    font-size: 26px;
    float: none;
    color: #999999;
    font-weight: bold;
}

#proof-box .close:hover {
    color: #666666;
}

.ps4 {
    width: auto !important;
}

.ps4 b {
    display: inline-block;
    animation: blinker 1s step-start infinite;
    width: auto;
    height: 34px;
    background: #47c4f5;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0px;
    border-radius: 8px;
    margin-top: -8px;
}

.ps4 b span {
    color: #fff;
}

@keyframes blinker {
    50% {
        color: #47c4f5;
    }
}

@media (max-width: 1200px) {
    #menu .user .status {
        display: none;
    }
}

@media (max-width: 1024px) {
    nav .logo {
        width: 40px;
        overflow: hidden;
    }
}

@media (max-width: 800px) {
    nav .logo {
        width: auto;
    }
}


.form-control{
    border-radius: 0 !important;
    height: 40px !important;
    font-size: 14px !important;
}