/*-----------------------------------------------------------------------------------*/
/* NORMALIZE
/*-----------------------------------------------------------------------------------*/
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"],/* 1 */
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}

/*-----------------------------------------------------------------------------------*/
/* DEFAULT STYLES
/*-----------------------------------------------------------------------------------*/
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;
}

/*-----------------------------------------------------------------------------------*/
/* HELPERS
/*-----------------------------------------------------------------------------------*/
.clear {
    display: block;
    clear: both;
    height: 0em;
    margin: 0em;
    padding: 0em;
    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%; /* 16:9 */
	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;
}

/*-----------------------------------------------------------------------------------*/
/* MESSAGES
/*-----------------------------------------------------------------------------------*/
#message {
    text-align: center;
}

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

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

/*-----------------------------------------------------------------------------------*/
/* ANIMATIONS / TRANSITIONS
/*-----------------------------------------------------------------------------------*/
#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;
}

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

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

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

.icon-zoom {
    width: 20px;
    height: 20px;
    background: url(../images/ico-zoom.png) no-repeat 0 0;
}

/*-----------------------------------------------------------------------------------*/
/* FORMS
/*-----------------------------------------------------------------------------------*/
.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(../images/bg-input-checkbox.png) no-repeat top left;
    position: relative;
}

.checkbox input[type=checkbox]:not(old) + label:before {
    position: absolute;
    top: 0px;
    left: 0;
    content: " ";
    width: 16px;
    height: 19px;
    background: url(../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
/*-----------------------------------------------------------------------------------*/
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: 0px;
}

#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;
}

/*-----------------------------------------------------------------------------------*/
/* MAIN STYLES
/*-----------------------------------------------------------------------------------*/
#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 0px;
    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: 0px;
    top: 0px;
    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
/*-----------------------------------------------------------------------------------*/
#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 0px -15px;
    border: 1px solid #cccccc;
    padding: 1px 20px;
    width: 400px;
    max-width: 100%;
}

/*-----------------------------------------------------------------------------------*/
/* USER MENU
/*-----------------------------------------------------------------------------------*/
#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;
}

/*-----------------------------------------------------------------------------------*/
/* CONTENT
/*-----------------------------------------------------------------------------------*/
#windmill {
    background: #c9f3d1 url(../images/bg-windmill.png) no-repeat bottom center;
    position: relative;
}

#windmill .grass {
    position: absolute;
    height: 190px;
    bottom: 240px;
    width: 100%;
    background: url(../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(../images/bg-sex-female.png) no-repeat 0 0;
}

#windmill .sex.male {
    background: url(../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(../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(../images/character-banan.png) no-repeat 0 0;
    margin: 34px 0 35px 0;
}

#windmill .female .character {
    background: url(../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(../images/character-banan.svg); }
.svg #windmill .female .character,.svg #windmill #character.female { background-image: url(../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(../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: 0px 4px 14px 2px rgba(0,0,0,0.3);
       -moz-box-shadow: 0px 4px 14px 2px rgba(0,0,0,0.3);
            box-shadow: 0px 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 0px;
    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: 0px 4px 14px 2px rgba(0,0,0,0.3);
       -moz-box-shadow: 0px 4px 14px 2px rgba(0,0,0,0.3);
            box-shadow: 0px 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 0px 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: 0px;
    left: 0;
    height: 20px;
    content: " ";
    width: 100%;
    background: url(../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(../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(../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(../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(../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(../images/logo-fabrykagraczy.png);
}

.opacity .recommended a.sedoc:after,.opacity .recommended a.sedoc:before {
    background-image: url(../images/logo-sedoc.png);
}

.opacity .recommended a.vikings:after,.opacity .recommended a.vikings:before {
    background-image: url(../images/logo-gamevikings.png);
}

/*-----------------------------------------------------------------------------------*/
/* FOOTER
/*-----------------------------------------------------------------------------------*/
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 {
    background: #3d3c3c;
    font-size: 10px;
    height: 51px;
    padding-top: 18px;
    color: #6f6f6f;
}

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

/*-----------------------------------------------------------------------------------*/
/* GAMES
/*-----------------------------------------------------------------------------------*/
#findgame {
    background: url(../images/bg-findgame.jpg) no-repeat center 0px;
    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 0px;
    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: 0px;
    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 0px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 6px 0px 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: 0px;
    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: 0px;
    right: 0px;
    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 0px 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 0px;
    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(../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(../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: 0px 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 0px;
    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: 0px;
    left: 0px;
    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 0px;
    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 0px;
    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(../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(../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(../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(../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(../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: 0px 2px 4px 0px rgba(0,0,0,0.3);
       -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);
            box-shadow: 0px 2px 4px 0px 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: 0px;
    right: 0px;
    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(../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: 0px;
    right: 0px;
    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 0px 0px 0px;
    background: url(../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(../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(../images/bg-vote2.png);
    display: inline-block;
}

.game .similar .vote .bar {
    height: 14px;
    background-image: url(../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(../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: 0px;
    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 0px 0px 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;
}

/*-----------------------------------------------------------------------------------*/
/* ZDOBYWAJ BANANKI
/*-----------------------------------------------------------------------------------*/
.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 0px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 6px 0px 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;
}

/*-----------------------------------------------------------------------------------*/
/* SKLEP
/*-----------------------------------------------------------------------------------*/
#shop {
    background: url(../images/bg-shop.jpg) repeat-x top center;
    color: #116d73;
    border-bottom: 1px solid #6db0a2;
}

#shop.map {
    background: #c9eaf8 url(../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 0px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 6px 0px 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(../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(../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(../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(../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(../images/shop/bridge.svg); z-index: 5; }
#shop.map ul .trees { width: 98%; height: 97%; top: 0%; left: 1%; background-image: url(../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(../images/shop/shop-gold.svg); left: 5.8%; top: 59%; z-index: 7; }
#shop.map ul .gold .image { width: 23px; height: 23px; background: url(../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(../images/shop/shop-prepaids.svg); left: 15.5%; top: 2%; }
#shop.map ul .prepaid .image { width: 24px; height: 17px; background: url(../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(../images/shop/shop-keys.svg); left: 69.5%; top: 0%; z-index: 5; }
#shop.map ul .fk .image { width: 27px; height: 29px; background: url(../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(../images/shop/shop-hardware.svg); left: 82%; top: 5%; z-index: 6; }
#shop.map ul .fg .image { width: 19px; height: 19px; background: url(../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(../images/shop/shop-psc.svg); left: 36%; top: 30%; z-index: 6; }
#shop.map ul .psc .image { width: 15px; height: 22px; background: url(../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(../images/shop/shop-steam.svg); left: 2.5%; top: 28%; z-index: 6; }
#shop.map ul .steam .image { width: 42px; height: 19px; background: url(../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(../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(../images/shop/shop-csgo.svg); left: 34%; top: 4%; }
#shop.map ul .cs .image { width: 38px; height: 18px; background: url(../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(../images/shop/shop-amazon.svg); left: 21%; top: 65%; z-index: 10; }
#shop.map ul .amazon .image { width: 23px; height: 25px; background: url(../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(../images/shop/shop-giftcard.svg); left: 57.5%; top: -3%; z-index: 6; }
#shop.map ul .giftcard .image { width: 21px; height: 21px; background: url(../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(../images/shop/shop-paypal.svg); left: -16.5%; top: -12%; z-index: 6; }
#shop.map ul .paypal .image { width: 42px; height: 42px; background: url(../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(../images/shop/winter-map.svg); }
#shop.map ul.winter .trees { background-image: url(../images/shop/winter-trees.svg); height: 103%; top: -7%; }

#shop.map + #windmill {
    display: none;
}

/*-----------------------------------------------------------------------------------*/
/* GRY I DOŁADOWANIA
/*-----------------------------------------------------------------------------------*/
#promo-prepaids {
    list-style: none;
    min-height: 384px;
}

#promo-prepaids li {
    float: left;
    width: 20%;
    height: 192px;
    background: url(../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(../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(../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: 0px;
    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: 0px;
    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
/*-----------------------------------------------------------------------------------*/
#paysafecard {
    background: url(../images/bg-paysafecard.jpg) no-repeat center 0px;
    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(../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: 0px 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;
}

/*-----------------------------------------------------------------------------------*/
/* STEAM
/*-----------------------------------------------------------------------------------*/
#paysafecard.steam {
    background-image: url(../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; }

/*-----------------------------------------------------------------------------------*/
/* WALUTA
/*-----------------------------------------------------------------------------------*/
#gold {
    background: #fff url(../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 0px rgba(0,0,0,0.3);
       -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);
            box-shadow: 2px 2px 4px 0px 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;
}

/*-----------------------------------------------------------------------------------*/
/* POLECAJ
/*-----------------------------------------------------------------------------------*/
#recommend {
    background: url(../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(../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;
}

/*-----------------------------------------------------------------------------------*/
/* DOŁADUJ BANANKI
/*-----------------------------------------------------------------------------------*/
#buy {
    background: url(../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;
}

/*-----------------------------------------------------------------------------------*/
/* PORTALE
/*-----------------------------------------------------------------------------------*/
#social {
    background: url(../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: 0px;
}

#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;
}

/*-----------------------------------------------------------------------------------*/
/* PUNKTY DOŚWIADCZENIA
/*-----------------------------------------------------------------------------------*/
#exp {
    background: url(../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;
}

/*-----------------------------------------------------------------------------------*/
/* ZAKUPY FK, SEDOC ETC
/*-----------------------------------------------------------------------------------*/
#partner {
    background: #135a58 url(../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: 0px;
    width: 20px;
    height: 50px;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #fff;
    position: absolute;
}

#partner.fk .text:after {
    content: " ";
    top: 0;
    right: 0px;
    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;
}

/*-----------------------------------------------------------------------------------*/
/* ZAKUPY U PARTNERÓW - LISTA
/*-----------------------------------------------------------------------------------*/
#partners {
    background: #135a58 url(../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(../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;
}

/*-----------------------------------------------------------------------------------*/
/* REKLAMY
/*-----------------------------------------------------------------------------------*/
#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;
}

/*-----------------------------------------------------------------------------------*/
/* APLIKACJE
/*-----------------------------------------------------------------------------------*/
#apps {
    background: #0e585d url(../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;
}

/*-----------------------------------------------------------------------------------*/
/* KLUCZE CYFROWE I SPRZET
/*-----------------------------------------------------------------------------------*/
#fkfg {
    background: url(../images/bg-fkfg.jpg) no-repeat top center;
    border-bottom: 9px solid #116d73;
}

#fkfg.fg {
    background: url(../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 0px 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 0px;
}

#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: 0px;
    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
/*-----------------------------------------------------------------------------------*/
#contact {
    background: url(../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 0px;
    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 0px rgba(0, 0, 0, 0.3); 
       -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.3); 
            box-shadow: 2px 2px 3px 0px 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: 0px;
    right: 0px;
    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
/*-----------------------------------------------------------------------------------*/
#help {
    background: #1a6d73 url(../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: 0px;
    border-bottom-right-radius: 0px;
}

#help .section li p {
    display: none;
    padding: 40px 50px;
    border-top: 4px solid #dbeeef;
    position: relative;
    top: -4px;
    font-size: 16px;
    line-height: 30px;
}

/*-----------------------------------------------------------------------------------*/
/* CS: GO SKINS
/*-----------------------------------------------------------------------------------*/
#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%;
}

/*-----------------------------------------------------------------------------------*/
/* KREATOR
/*-----------------------------------------------------------------------------------*/
#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(../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(../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(../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: 0px;
    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: 0px;
    right: 0px;
    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(../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;
}

/*-----------------------------------------------------------------------------------*/
/* TWÓJ BANAN
/*-----------------------------------------------------------------------------------*/
#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 0px 0px;
    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;
}

/*-----------------------------------------------------------------------------------*/
/* PROFIL
/*-----------------------------------------------------------------------------------*/
#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(../images/bg-profile.jpg) repeat-x top center;
}

#profile .container {
    position: relative;
    z-index: 2;
    min-height: 500px;
}

#profile .breadcrumb {
    margin: 63px 0px 70px 0px;
    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 0px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 6px 0px 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(../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: 0px;
    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 0px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 6px 0px 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 0px 0px 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 0px 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: 0px;
    right: 0px;
    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(../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(../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(../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 0px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 3px 0px 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 0px;
    width: 50%;
    min-width: 300px;
    max-width: 100%;
    border: 0px;
    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;
}

/*-----------------------------------------------------------------------------------*/
/* AKTUALNOŚCI
/*-----------------------------------------------------------------------------------*/
#news { background: url(../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 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 3px 0px 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: 0px; }
#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 0px 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; }

/* XMAS */
body.xmas nav .logo { width: 180px; height: 47px; margin-left: -15px; background: url(../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(../images/xmas-bg-bananatube.png) !important; }
body.xmas #slides .slide.youtube { background-image: url(../images/xmas-bananatube.png) !important; }

/* FiXED ELEMENTS */
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: 0px; 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: 0px; 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; }