.full-page,
.full-page .page-view,
.full-page .page-view .page-content,
.full-page .content-wrapper,
.full-page .content-wrapper > .row-full-height {
    height: 100%;
}
.play-type {
    position: relative;
}
.zone-left, 
.zone-right {
    overflow-y: auto;
}
.zone-left .list-group-item {
    overflow: hidden;
    background: transparent url('../images/homepage/menu-side-background.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    border: 0px;
    margin-bottom: 5px;
    color: #fff;
} 
.zone-left .list-group-item i {
    font-size: 7px;
    margin-top: 3px;
    display: block;
    float: left;
    margin-right: 10px;
} 
.zone-left .list-group-item.active, 
.zone-left .list-group-item.active:focus, 
.zone-left .list-group-item.active:hover {
    color: #01d4f4;
} 
.zone-left .list-group-item:focus, 
.zone-left .list-group-item:hover {
    background: transparent url('../images/homepage/menu-side-background.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    border: 0px;
    color: #01d4f4;
}
.zone-left .levelup-animation {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.zone-left .levelup-animation img {
    height: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    -moz-transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    width: auto;
    transition: -webkit-transform 500ms;
    -moz-transition: -webkit-transform 500ms;
    -webkit-transition: -webkit-transform 500ms;
    opacity: 0.8;
    -moz-opacity: 0.8;
    -webkit-opacity: 0.8;
}
.zone-left .levelup-animation-show img {
    transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}
.zone-left .creature .levelup-animation:hover img {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
}

.creatures-tree > div {
    position: static;
}
#evolveModal .glyphicon-arrow-right {
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
#buyModal .well,
#evolveModal .well,
#buyModal .modal-body,
#evolveModal .modal-body {
    overflow: hidden;
}
#evolveModal .arrow-left-right {
    text-align: center;
    position: static;
}
#modalItem img,
#modalCreature img,
.items-buy img,
.creatures-buy img {
    margin: 0px auto;
}
#modalItem .input-group {
    margin-left: 10px;
}
.items-buy .btn-action-buy-item,
.creatures-buy .btn-action-buy-creature {
    display: block;
    margin: 0px;
    background-color: #01d4f4;
    border: 0px;
    position: absolute;
    bottom: 0px;
    left: 3px;
    padding: 10px 0px;
    right: 3px;
    color: #000;
    text-align: center;
    text-decoration: none;
    z-index: 3;
}
.items-buy .btn-action-buy-item:hover,
.items-buy .btn-action-buy-item:focus,
.items-buy .btn-action-buy-item:active,
.creatures-buy .btn-action-buy-creature:hover,
.creatures-buy .btn-action-buy-creature:focus,
.creatures-buy .btn-action-buy-creature:active {
    background-color: #fff;
}
.items-buy .btn-action-buy-item > span,
.creatures-buy .btn-action-buy-creature > span {
    position: relative;
    margin-left: 17px;
}
.items-buy .btn-action-buy-item .glyphicon,
.creatures-buy .btn-action-buy-creature .glyphicon {
    width: 30px;
    height: 26px;
    background: transparent url('../images/homepage/tp-price-icon.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    position: absolute;
    margin-top: -3px;
    top: 0px;
    left: -34px;
}
.profile-notifications {
    max-height: 150px;
    overflow-y: auto;
}
.items-buy h5 {
    min-height: 30px;
    font-size: 11px;
}
.items-buy .creature-mouse-overlap {
    padding: 30px 0px;
}
.dropdown-menu > li > .notification-item {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
}
.dropdown-menu > li > .notification-item:hover, 
.dropdown-menu > li > .notification-item:focus {
  color: #00deff;
  text-decoration: none;
  background-color: #f5f5f5;
  cursor: pointer;
}
.navbar {
    background-color: #010101;
    border-bottom: 1px solid #262626;
    margin-bottom: 0px;
}
.navbar-brand {
    height: 81px;
    padding: 15px 0px;
    padding-right: 25px;
}
.navbar-brand img {
    height: 100%;
}
.navbar .navbar-nav {
    background-color: #1b1e1e;
    position: relative;
    z-index: 999;
}
.navbar .navbar-nav>li {
    position: relative;
}
.navbar .navbar-nav>li>a {
    font-size: 16px;
    color: #fff;
    padding: 30px 15px;
    min-width: 60px;
    text-align: center;
    border-bottom: 1px solid transparent;
}
.navbar .navbar-nav:first-child {
    background-color: #0f1111;
}
.navbar .navbar-nav:first-child>li:first-child>a {
    font-size: 20px;
    padding: 29px 15px;
}
.navbar .navbar-nav>li>a:hover,
.navbar .navbar-nav>li>a:focus,
.navbar .navbar-nav>li>a:active {
    color: #00deff;
    border-bottom: 1px solid #00deff;
}
.navbar .navbar-nav .separator {
    background-color: #394040;
    width: 1px;
    height: 20px;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    right: 0px;
}
.navbar .navbar-nav>li.open>a.user-dropdown, 
#notifications-dropdown.open > a {
    background-color: transparent;
    color: #00deff;
}
#notifications-dropdown .alert-danger {
    background-color: #e62020;
    color: #fff;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    position: absolute;
    top: 15px;
    left: 40px;
}
#notifications-dropdown > a {
    padding: 21px 41px 21px 21px;
}
#notifications-dropdown .glyphicon-comment {
    font-size: 34px;
    height: 34px;
}
#notifications-dropdown .caret {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -2px;
}
.navbar .navbar-nav>li>a.user-dropdown {
    padding-left: 85px;
    padding-right: 21px;
}
.navbar .user-dropdown .glyphicon {
    width: 52px;
    height: 46px;
    background: transparent url('../images/homepage/hex-border.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    margin-top: -23px;
    left: 21px;
}
.navbar .user-dropdown .glyphicon > span {
    display: block;
    padding: 9px;
}
.navbar .user-dropdown .glyphicon > span > span {
    display: block;
    clear: both;
    text-align: center;
    font-size: 10px;
}
.navbar .user-dropdown .glyphicon > span > span:last-child {
    font-size: 18px;
    color: #00deff;
    font-weight: bold;
}
.navbar .navbar-nav>li>a.player-points {
    padding-left: 60px;
    padding-right: 21px;
    color: #00deff;
}
.navbar .player-points .glyphicon {
    width: 30px;
    height: 26px;
    background: transparent url('../images/homepage/tp-header-icon.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    margin-top: -13px;
    left: 21px;
}
.navbar .btn-action-play {
    background-color: #01d4f4;
    font-size: 18px;
    float: none !important;
    z-index: 1;
}
.navbar .btn-action-play > li {
    float: none;
}
.navbar .navbar-nav.btn-action-play>li>a,
.navbar .navbar-nav.btn-action-play>li>a:hover,
.navbar .navbar-nav.btn-action-play>li>a:focus,
.navbar .navbar-nav.btn-action-play>li>a:active {
    color: #0e1010;
    text-align: left;
    text-indent: 15px;
}
.navbar .navbar-header {
    background-color: #000;
    position: relative;
    z-index: 999;
}
.creature-tile-wrapper {
    margin: 0px;
    margin-bottom: 10px;
    padding: 15px 15px 0px 15px;
    padding-bottom: 40px;
}
.creature-tile-wrapper .overlap-border {
    background: transparent url('../images/homepage/creature-box-border.png') 0px 0px no-repeat;
    background-size: cover;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
    margin: 3px 3px 0px 3px;
}
.creature-tile-wrapper .item-box, 
.creature-tile-wrapper .creature-box {
    position: relative;
    z-index: 2;
}
.creature-mouse-overlap {
    position: relative;
}
.creature-mouse-overlap > div {
    display: block;
    background: transparent url('../images/homepage/creature-box-overlap.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    cursor: pointer;
}
.creature-mouse-overlap > div > span > i {
    font-size: 40px;
    clear: both;
    display: block;
    text-align: center;
}
.creature-mouse-overlap > div > span {
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    display: block;
    color: #01d4f4;
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -30px;
}
.content-wrapper .right-column.settings .zone-right {
    padding: 0px;
    background: transparent url('../images/homepage/profile-settings-background.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    padding: 20px 0px;
    margin-top: -6px;
}
.content-wrapper .right-column.settings legend {
    color: #fff;
    border-bottom: 2px solid #000;
    padding-bottom: 9px;
    margin: 0px;
    line-height: normal;
    font-size: 18px;
    font-weight: normal;
}
.content-wrapper .right-column.settings fieldset {
    margin-bottom: 10px;
}
.content-wrapper .right-column.settings label {
    color: #c5c5c5;
    font-size: 14px;
    line-height: normal;
    font-weight: normal;
}
.content-wrapper .right-column.settings .btn-group label {
    color: #fff;
}
.content-wrapper .right-column.settings fieldset > div:nth-child(2) {
    padding-top: 15px;
    border-top: 1px solid #2d2d2d;
}
.content-wrapper .right-column.settings .btn-action-save {
    background-color: #01d4f4;
    border: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    display: block;
    width: 100%;
}
.content-wrapper .right-column.settings .btn-action-save:hover, 
.content-wrapper .right-column.settings .btn-action-save:active {
    background-color: #fff;
} 
.items-buy,
.creatures-buy {
    overflow: hidden;
    margin: 0px;
}

#dashboard .panel,
#dashboard .panel-body,
#dashboard .panel-heading {
    border: 0px;
    background: none;
}
#dashboard .panel-collapse {
    padding-bottom: 60px;
}
#dashboard .panel:last-child .panel-collapse {
    padding-bottom: 0px;
}
#dashboard .panel-title {
    clear: both;
    overflow: hidden;
}
#dashboard .panel-heading .accordion-title {
    background: transparent url('../images/homepage/dashboard-header.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    border: 0px;
    padding: 15px;
    color: #fff;
    width: 94%;
    display: block;
}
#dashboard .panel-heading .accordion-title > a {
    text-decoration: none;
    color: #fff;
    margin: 0px 5px;
}
#dashboard .panel-heading .accordion-title > .first {
    margin-left: 0px;
}
#dashboard .panel-heading .handle {
    display: block;
    background: transparent url('../images/homepage/dashboard-header-extra.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    padding: 19px 15px;
    width: 5%;
    text-align: center;
    color: #01d4f4;
    text-decoration: none;
    font-size: 40px;
    line-height: 28px;
    height: 55px;
    position: relative;
}
#dashboard .panel-heading .handle:hover,
#dashboard .panel-heading .handle:active,
#dashboard .panel-heading .handle:focus {
    color: #000;
    background-image: url('../images/homepage/dashboard-header-extra-over.png');
}
#dashboard .panel-heading .handle .glyphicon {
    height: 22px;
    position: absolute;
    top: 50%;
    margin-top: -11px;
    text-align: center;
    left: 0px;
    right: 0px;
    background: transparent url('../images/homepage/dashboard-toggle-controlls.png') center -22px no-repeat;
}
#dashboard .panel-heading .handle.closed .glyphicon {
    background-position: center 0px;
}
#dashboard .accordion-title > .glyphicon:first-child {
    background: transparent url('../images/homepage/dashboard-icons.png') 0px -4px no-repeat;
    width: 36px;
    height: 28px;
    margin-bottom: -10px;
}
#dashboard #history .accordion-title > .glyphicon {
    background-position: -84px -5px;
}
#dashboard #friends .accordion-title > .glyphicon {
    background-position: -124px -2px;
}
#dashboard #leaderboard .accordion-title > .glyphicon {
    background-position: -37px -10px;
}
#dashboard #creatures .paging {
    font-size: 14px;
    text-transform: none;
    color: #fff;
}
#dashboard #creatures .paging i {
    font-style: normal;
    color: #575757;
    font-size: 10px;
    text-transform: uppercase;
    margin: 0px 5px;
}
#dashboard #creatures .paging b {
    color: #01d4f4;
}
#dashboard #creatures-panel .creature-box {
    margin-bottom: 10px;
}
#dashboard #creatures .paging .glyphicon {
    width: 13px;
    height: 15px;
    background: transparent url('../images/homepage/dashboard-arrow-paging.png') 0px 0px no-repeat;
}
#dashboard #creatures .paging > span {
    margin: 0px 10px;
}
#dashboard #creatures .paging .left.disabled .glyphicon,
#dashboard #creatures .paging .left:hover .glyphicon,
#dashboard #creatures .paging .left:active .glyphicon,
#dashboard #creatures .paging .left:focus .glyphicon {
    background-position: 0px -17px;
}
#dashboard #creatures .paging .right .glyphicon {
    background-position: -14px 0px;
}
#dashboard #creatures .paging .right.disabled .glyphicon,
#dashboard #creatures .paging .right:hover .glyphicon,
#dashboard #creatures .paging .right:active .glyphicon,
#dashboard #creatures .paging .right:focus .glyphicon {
    background-position: -14px -17px;
}
#dashboard #creatures-panel img {
    margin-bottom: 10px;
}
#dashboard #creatures-panel .xp-level {
    color: #01d4f4;
    font-size: 12px;
    margin-bottom: 5px;
}
#dashboard #creatures-panel ul > li:last-child .creature-mouse-overlap > div:first-child {
    pointer-events: none;
}
#dashboard #creatures-panel p {
    margin: 0px;
}
#dashboard #leaderboard .details,
#dashboard #friends .details,
#dashboard #history .details {
    color: #6d6d6d;
    line-height: 22px;
}
#dashboard #leaderboard .details > span,
#dashboard #friends .details > span,
#dashboard #history .details > span {
    margin: 0px 5px;
}
#dashboard #leaderboard .details > span:last-child,
#dashboard #friends .details > span:last-child,
#dashboard #history .details > span:last-child {
    margin-right: 0px;
}
#dashboard #leaderboard .rank > b,
#dashboard #friends .friends > b,
#dashboard #history .wins > b {
    color: #01d4f4;
}
#dashboard #leaderboard .total > b {
    color: #fff;
}
#dashboard #history .loses > b {
    color: #e62020;
}
#dashboard #friends .online > b {
    color: #81d941;
}
#dashboard #leaderboard-panel .table-body,
#dashboard #friends-panel .table-body,
#dashboard #history-panel .table-body {
    display: table;
    width: 100%;
}
#dashboard #leaderboard-panel .table-row,
#dashboard #friends-panel .table-row,
#dashboard #history-panel .table-row {
    display: table-row;
    color: #fefefe;
}
#dashboard #leaderboard-panel .table-row:first-child,
#dashboard #friends-panel .table-row:first-child,
#dashboard #history-panel .table-row:first-child {
    color: #7a7a7a;
}
#dashboard #leaderboard-panel .table-row:nth-child(even),
#dashboard #friends-panel .table-row:nth-child(even),
#dashboard #history-panel .table-row:nth-child(even) {
    background: rgba(33, 38, 33, 0.41);
}
#dashboard #leaderboard-panel .table-header,
#dashboard #friends-panel .table-header,
#dashboard #history-panel .table-header {
    font-weight: bold;
}
#dashboard #leaderboard-panel .table-header,
#dashboard #friends-panel .table-header,
#dashboard #history-panel .table-header,
#dashboard #leaderboard-panel .table-cell,
#dashboard #friends-panel .table-cell,
#dashboard #history-panel .table-cell {
    display: table-cell;
    padding: 5px 10px;
}
#dashboard #leaderboard-panel .table-cell:last-child,
#dashboard #friends-panel .table-cell:last-child,
#dashboard #history-panel .table-cell:last-child {
    text-align: center;
    text-transform: uppercase;
}
#dashboard #leaderboard-panel .table-row.win .table-cell:last-child,
#dashboard #friends-panel .table-row.win .table-cell:last-child,
#dashboard #history-panel .table-row.win .table-cell:last-child {
    color: #01d4f4;
}
#dashboard #leaderboard-panel .table-row.lose .table-cell:last-child,
#dashboard #friends-panel .table-row.lose .table-cell:last-child,
#dashboard #history-panel .table-row.lose .table-cell:last-child {
    color: #e62020;
}
#dashboard #leaderboard-panel .table-row .w-1,
#dashboard #friends-panel .table-row .w-1,
#dashboard #history-panel .table-row .w-1 {
    width: 15%;
}
#dashboard #leaderboard-panel .table-row .w-4,
#dashboard #friends-panel .table-row .w-4,
#dashboard #history-panel .table-row .w-4 {
    width: 35%;
}
#dashboard #leaderboard-panel .table-row .w-2,
#dashboard #friends-panel .table-row .w-2,
#dashboard #history-panel .table-row .w-2 {
    width: 20%;
}
#dashboard #leaderboard-panel .table-row .w-3,
#dashboard #friends-panel .table-row .w-3,
#dashboard #history-panel .table-row .w-3 {
    width: 30%;
}
#dashboard .load-more {
    background-color: #2d312d;
    border: 0px;
    text-align: center;
    display: block;
    color: #fff;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    margin-top: 20px;
}
#dashboard .load-more:hover,
#dashboard .load-more:active,
#dashboard .load-more:focus {
    background-color: #fff;
    color: #121412;
}
#dashboard #friends .accordion-title > a .glyphicon {
    background: transparent url('../images/homepage/checkbox.png') 0px 0px no-repeat;
    width: 23px;
    height: 23px;
    margin-bottom: -4px;
}
#dashboard #friends .accordion-title > a .glyphicon.on {
    background-position: 0px 0px;
}
#dashboard #friends .accordion-title > a .glyphicon.off {
    background-position: 0px -25px;
}
#dashboard #leaderboard-panel .marker-online,
#dashboard #friends-panel .marker-online {
    display: block;
    margin: 0px auto;
    background-color: #414141;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
}
#dashboard #leaderboard-panel .marker-online.online,
#dashboard #friends-panel .marker-online.online {
    background-color: #81d941;
}
.dashboard-separator {
    background: transparent url('../images/homepage/dashboard-separator.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    height: 40px;
    width: 100%;
    position: absolute;
    lft: 0px;
    right: 0px;
    margin-top: 30px;
}
#dashboard .panel:first-child .dashboard-separator {
    margin-top: 20px;
}
#modes {
    padding-top: 30px;
    background: transparent url('../images/homepage/homepage-middle-background-overlap.png') 0px 0px no-repeat;
    background-size: cover;
    padding: 0px;
}
#modes .play-type-choose {
    display: block;
    overflow: hidden;
    margin: 0px auto;
}
#modes .slide-wrap {
    margin: 80px auto 30px;
    position: relative;
    overflow: visible;
}
#modes .slide-info {
    height: auto;
    z-index: 1;
}
#modes .slide-wrap li {
    display: none;
    width: 300px;
    position: absolute;
    z-index: 0;
    overflow: visible !important;
    pointer-events: none;
}
#modes .slide-wrap li .inner > a {
    pointer-events: none;
}
#modes .slide-wrap li h5 {
    text-align: center;
    font-size: 20px;
    margin: 0px;
    cursor: pointer;
    pointer-events: all;
    width: 50%;
    margin: 0px auto;
}
#modes .slide-wrap li h5 > span {
    display: block;
    clear: both;
    font-size: 12px;
    color: #01d4f4;
    margin: 5px 0px 0px;
}
#modes .slide-wrap .inner {
    position: relative;
    border-radius: 5px;
}
#modes .slide-wrap .inner .handle-pointer {
    height: 198px;
    position: absolute;
    width: 200px;
    z-index: 999;
    left: 50%;
    margin-left: -100px;
    top: 35px;
    border-top-left-radius: 85px;
    -moz-border-top-left-radius: 85px;
    -webkit-border-top-left-radius: 85px;
    border-top-right-radius: 85px;
    -moz-border-top-right-radius: 85px;
    -webkit-border-top-right-radius: 85px;
    border-bottom-left-radius: 40px;
    -moz-border-bottom-left-radius: 40px;
    -webkit-border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    -moz-border-bottom-right-radius: 40px;
    -webkit-border-bottom-right-radius: 40px;
    pointer-events: all;
    display: none;
}
#modes .slide-wrap .inner a {
    text-decoration: none;
    border: none;
    outline: none;
}
#modes .slide-wrap img {
    width: 100%;
    border: none;
    outline: none;
}
#modes .slide-wrap .second,
#modes .slide-wrap .third,
#modes .slide-wrap .fourth {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
#modes .slide-wrap .pos1 {
    display: block;
    width: 250px;
    height: 250px;
    top: 60px;
    left: 50%;
    margin-left: -425px;
    z-index: 1;
    opacity: 0.5;
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
}
#modes .slide-wrap .pos1 h5 {
    font-size: 10px;
}
#modes .slide-wrap .pos2 {
    display: block;
    width: 350px;
    height: 350px;
    top: 35px;
    left: 50%;
    margin-left: -350px;
    z-index: 2;
    opacity: 0.7;
    -moz-opacity: 0.7;
    -webkit-opacity: 0.7;
}
#modes .slide-wrap .pos2 h5 {
    font-size: 15px;
}
#modes .slide-wrap .pos3 {
    display: block;
    width: 450px;
    height: 450px;
    top: 0;
    left: 50%;
    margin-left: -225px;
    z-index: 3;
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
}
#modes .slide-wrap .pos3 .handle-pointer {
    display: block;
}
#modes .slide-wrap .pos1 a, #modes .slide-wrap .pos1 .second, #modes .slide-wrap .pos1 .third, 
#modes .slide-wrap .pos2 a, #modes .slide-wrap .pos2 .second, #modes .slide-wrap .pos2 .third,
#modes .slide-wrap .pos3 a, #modes .slide-wrap .pos3 .second, #modes .slide-wrap .pos3 .third,
#modes .slide-wrap .pos4 a, #modes .slide-wrap .pos4 .second, #modes .slide-wrap .pos4 .third,
#modes .slide-wrap .pos5 a, #modes .slide-wrap .pos5 .second, #modes .slide-wrap .pos5 .third {
    display: none;
}
#modes .slide-wrap .pos1.main a,
#modes .slide-wrap .pos2.main a,
#modes .slide-wrap .pos4.main a,
#modes .slide-wrap .pos5.main a,
#modes .slide-wrap .pos3.main a {
    color: #000;
    text-decoration: none;
    display: block;
    text-align: center;
    position: absolute;
    bottom: 50px;
    left: 50%;
    pointer-events: all !important;
    pointer-events: all !important;
    height: 31px;
    line-height: 31px;
    width: 162px;
    margin-left: -81px;
    border-bottom-left-radius: 50px;
    -moz-border-bottom-left-radius: 50px;
    -webkit-border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    -moz-border-bottom-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    font-size: 16px;
    z-index: 99999;
}
#modes .slide-wrap .pos1.main .second,
#modes .slide-wrap .pos2.main .second,
#modes .slide-wrap .pos4.main .second,
#modes .slide-wrap .pos5.main .second,
#modes .slide-wrap .pos3.main .second {
    display: block;
}
#modes .slide-wrap .pos1.main .inner .third,
#modes .slide-wrap .pos2.main .inner .third,
#modes .slide-wrap .pos4.main .inner .third,
#modes .slide-wrap .pos5.main .inner .third,
#modes .slide-wrap .pos3.main .inner .third {
    display: none;
}
#modes .slide-wrap .pos1.main .inner.on .second,
#modes .slide-wrap .pos2.main .inner.on .second,
#modes .slide-wrap .pos4.main .inner.on .second,
#modes .slide-wrap .pos5.main .inner.on .second,
#modes .slide-wrap .pos3.main .inner.on .second {
    display: none;
}
#modes .slide-wrap .pos1.main .inner.on .third,
#modes .slide-wrap .pos2.main .inner.on .third,
#modes .slide-wrap .pos4.main .inner.on .third,
#modes .slide-wrap .pos5.main .inner.on .third,
#modes .slide-wrap .pos3.main .inner.on .third {
    display: block;
}
#modes .slide-wrap .pos1 .fourth,
#modes .slide-wrap .pos2 .fourth,
#modes .slide-wrap .pos4 .fourth,
#modes .slide-wrap .pos5 .fourth,
#modes .slide-wrap .pos3 .fourth,
#modes .slide-wrap .pos3.main .fourth {
    display: block !important;
}
#modes .slide-wrap .pos4 {
    display: block;
    width: 350px;
    height: 350px;
    top: 35px;
    right: 50%;
    margin-right: -350px;
    z-index: 2;
    opacity: 0.7;
    -moz-opacity: 0.7;
    -webkit-opacity: 0.7;
}
#modes .slide-wrap .pos4 h5 {
    font-size: 15px;
}
#modes .slide-wrap .pos5 {
    display: block;
    width: 250px;
    height: 250px;
    top: 60px;
    right: 50%;
    margin-right: -425px;
    z-index: 1;
    opacity: 0.5;
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
}
#modes .slide-wrap .pos5 h5 {
    font-size: 10px;
}
#modes .slide-wrap .inner {
    overflow: visible;
    position: relative;
}
#modes .arrow {
    width: 18px;
    height: 22px;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -11px;
    left: 15px;
    z-index: 10;
    cursor: pointer;
    background-image: url('../images/homepage/arrows.png');
}
#modes .arrow.on {
    background-image: url('../images/homepage/arrows-over.png');    
}
#modes .prev {
    background-position: -18px 0px;
}
#modes .next {
    left: auto;
    right: 15px;
    background-position: 0px 0px;
}
#modes .description {
    color: #878787;
    font-size: 16px;
}
#modes .name,
#modes .description {
    text-align: center;
    margin: 0px;
}
#modes .name {
    margin: 0px 0px 25px;
}
#modes .description {
    line-height: 25px;
    min-height: 100px;
}
#modes .info {
    margin: 0px auto;
}
#modes .info {
    padding: 0px 100px;
    margin-top: 0px;
}
#modes .subtitle {
    font-size: 14px;
    color: #878787;
    text-transform: uppercase;
    text-align: center;
    line-height: 30px;
    margin: 30px 0px 80px 0px;
}
#modes .title {
    font-size: 27px;
    text-transform: uppercase;
    text-align: center;
    line-height: 43px;
    margin: 0px;
}
#modes .bullets {
    overflow: hidden;
    width: 130px;
    margin: 0px auto 30px;
    display: block;
}
#modes .bullet {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    background-color: #434a43;
    display: block;
    float: left;
    margin: 0px 8px;
}
#modes .bullet-on {
    background-color: #00deff;
}
#modes .slide-wrap .inner {
    overflow: visible;
    position: relative;
}
#modes #presentation {
    padding: 0px;
}
#modes .slider-container {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 50%;
}
#prepare .prepare.prepare-levelup .creature .wrapper .inner {
    top: 0px;
    height: 100%;
}
#prepare .prepare.prepare-levelup .creature .wrapper .inner > div {
    float: left;
}
#prepare .prepare.prepare-levelup .creature .wrapper-shadow {
    background: transparent url('../images/homepage/creature-box-wrapper-shadow-small.png') center 0px no-repeat;
    background-size: 100% 100%;
    width: 421px;
    height: 22px;
    margin: -8px auto 0px;
    position: relative;
    z-index: 1;
}
#prepare .prepare.prepare-levelup .creature .wrapper .avatar {
    background: transparent url('../images/homepage/creature-box-middle-small-avatar.png') center 0px no-repeat;
    background-size: 100% 100%;
    width: 130px;
    height: 130px;
    padding: 13px 13px 12px 13px;
}
#prepare .prepare.prepare-levelup .creature .wrapper .middle {
    background: transparent url('../images/homepage/creature-box-middle-small.png') center 0px no-repeat;
    background-size: 100% 100%;
    width: auto;
    height: 110px;
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
    right: 10px;
    left: 0px;
    padding-left: 150px;
    text-align: left;
}
#prepare .prepare.prepare-levelup .creature .wrapper .middle .name-cost {
    font-size: 12px;
}
#prepare .prepare.prepare-levelup .creature .wrapper .middle .top {
    font-size: 15px;
}
#prepare .prepare.prepare-levelup .creature .wrapper .middle .name-cost .glyphicon {
    width: 24px;
    height: 21px;
}
#prepare .prepare.prepare-levelup .mCSB_horizontal {
    background-size: 100% 150%;
}
#prepare .prepare.prepare-levelup .creature .wrapper {
    background: transparent url('../images/homepage/creature-box-wrapper-small.png') center 0px no-repeat;
    background-size: 100% 100%;
    width: 370px;
    height: 140px;
    padding: 5px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}
#prepare .evolution-tree .prepare.prepare-levelup .creature .wrapper {
    cursor: default;
}
#prepare .prepare.prepare-levelup .creature .levelup {
    position: absolute;
    left: -20px;
    top: -10px;
    cursor: pointer;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
}
#prepare .prepare.prepare-levelup .creature .levelup .glyphicon {
    background: transparent url('../images/homepage/rewards-creature-levelup.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 50px;
    height: 43px;
    z-index: 2;
}
#prepare .prepare.prepare-levelup .creature .reward-label {
    background: transparent url('../images/homepage/rewards-creature-label.png') right 0px no-repeat;
    background-size: auto 100%;
    width: 100px;
    height: 22px;
    display: block;
    text-align: center;
    z-index: 1;
    position: absolute;
    top: 20px;
    left: 50%;
    color: #ffc600;
    text-indent: 15px;
    line-height: 26px;
    font-size: 12px;
}
#prepare .prepare.prepare-levelup .creature .levelup .reward-label {
    color: #00ddff;
}
#prepare .evolution-tree .prepare-levelup {
    margin: 0px;
    height: 776px;
}
#prepare .evolution-tree .prepare-levelup .creatures {
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    width: 100%;
}
#prepare .evolution-tree .prepare-levelup .creatures.level3 {
    transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    position: relative;
}
#prepare .evolution-tree .prepare-levelup .creatures.level3.location-0 {
    top: 0px;
}
#prepare .evolution-tree .prepare-levelup .creatures.level3.location-1 {
    bottom: 0px;
}
#prepare .evolution-tree .prepare-levelup .creatures.level3.opened-list {
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
}
#prepare .evolution-tree > div {
    padding: 0px;
}
#prepare .evolution-tree .prepare .level3 .creature,
#prepare .evolution-tree .prepare .level2 .creature,
#prepare .evolution-tree .prepare .level1 .creature {
    padding: 20px 0px;
    margin: 0px;
    position: relative;
    width: 100%;
}
#prepare .evolution-tree .prepare .level1 .creature .connector {
    background: transparent url('../images/homepage/creature-box-connection.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 27px;
    height: 24px;
    position: absolute;
    top: 50%;
    right: -13px;
    z-index: 3;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
}
#prepare .evolution-tree .prepare .level1 .line {
    height: 1px;
    background-color: #494e49;
    width: 50%;
    position: absolute;
    top: 50%;
    right: 0px;
    margin-top: -8px;
    z-index: 0;
}
#prepare .evolution-tree .prepare .level2 .creature .connector {
    background: transparent url('../images/homepage/creature-box-connection.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 27px;
    height: 24px;
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
}
#prepare .evolution-tree .prepare .level2 .creature .connector.left {
    left: -10px;
}
#prepare .evolution-tree .prepare .level2 .creature .connector.right {
    right: -13px;
}
#prepare .evolution-tree .prepare .level2 .creature .wrapper-big .connector.right {
    right: -13px;
}
#prepare .evolution-tree .prepare .level2 .creature .wrapper-big .connector.left {
    left: -13px;
} 
#prepare .evolution-tree .prepare .level2 .line.center.left {
    height: 1px;
    background-color: #494e49;
    width: 50%;
    position: absolute;
    top: 50%;
    left: 0px;
    margin-top: -8px;
}
#prepare .evolution-tree .prepare .level2 .line.center.right {
    height: 1px;
    background-color: #494e49;
    width: 50%;
    position: absolute;
    top: 50%;
    right: 0px;
    margin-top: -8px;
}
#prepare .evolution-tree .prepare .level2 .line.bottom {
    height: 50%;
    background-color: #494e49;
    width: 1px;
    position: absolute;
    left: 0px;
}
#prepare .evolution-tree .prepare .level2 .line.bottom.pos-0 {
    top: 50%;
    margin-top: -8px;
}
#prepare .evolution-tree .prepare .level2 .line.bottom.pos-1 {
    bottom: 50%;
    margin-bottom: 8px;
}
#prepare .evolution-tree .prepare .level3 .creature .connector {
    background: transparent url('../images/homepage/creature-box-connection.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 27px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: -10px;
    z-index: 3;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
}
#prepare .evolution-tree .prepare .level3 .line.center {
    height: 1px;
    background-color: #494e49;
    width: 50%;
    position: absolute;
    top: 50%;
    left: 0px;
    margin-top: -8px;
}
#prepare .evolution-tree .prepare .level3 .line.bottom {
    height: 50%;
    background-color: #494e49;
    width: 1px;
    position: absolute;
    left: 0px;
}
#prepare .evolution-tree .prepare .level3 .line.bottom.pos-0 {
    top: 50%;
    margin-top: -8px;
}
#prepare .evolution-tree .prepare .level3 .line.bottom.pos-1 {
    bottom: 50%;
    margin-bottom: 8px;
}
#prepare .evolution-tree .creatures {
    overflow: visible !important;
    
}
#prepare .evolution-tree .wrapper-big.top {
    background: transparent url('../images/homepage/creature-box-wrapper-big-top.png') center top no-repeat;
    background-size: 100% 100%;
    width: 370px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    margin-top: -18px;
}
#prepare .evolution-tree .wrapper-big.top h5 {
    margin: 0px;
    padding: 16px 20px;
    color: #00e2ff;
    font-size: 15px;
    line-height: normal;
}
#prepare .evolution-tree .wrapper-big.top h5 > span:first-child {
    color: #00e2ff;
}
#prepare .evolution-tree .wrapper-big.top h5 > span:last-child {
    color: #fff;
}
#prepare .evolution-tree .wrapper-content {
    position: relative;
    z-index: 1;
}
#prepare .evolution-tree .wrapper-big.bottom {
    background: transparent url('../images/homepage/creature-box-wrapper-big-bottom.png') center top no-repeat;
    background-size: 100% 100%;
    width: 370px;
    margin: 0px auto;
    margin-top: -18px;
    padding: 20px 10px 10px;
    position: relative;
}
#prepare .evolution-tree .wrapper-big.bottom .modal-body {
    padding: 0px;
    background: none;
}
#prepare .evolution-tree .wrapper-big.bottom .stats-wrapper {
    margin: 0px;
    background: none;
    height: auto;
}
#prepare .evolution-tree .wrapper-big.bottom .stats-wrapper p {
    margin: 0px;
}
#prepare .evolution-tree .wrapper-big.bottom .stats-wrapper .abilities {
    padding-bottom: 0px;
    margin: 0px;
}
#prepare .evolution-tree .wrapper-big.bottom .stats-wrapper .stats {
    margin: 0px;
}
#prepare .evolution-tree .wrapper-middle .btn {
    border: 0px;
    background-color: #383938;
    color: #fff;
    width: 100%;
    margin: 0px 0px 2px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    line-height: 26px;
    padding: 0px;
    height: 26px;
}
#prepare .evolution-tree .wrapper-middle .btn.more-info {
    line-height: 30px;
    margin-top: 12px;
}
#prepare .evolution-tree .wrapper-middle .top {
    text-align: center;
}
#prepare .evolution-tree .wrapper-middle .btn.level-up {
    background-color: #01d4f4;
    text-align: center;
    text-decoration: none;
    color: #000;
    position: relative;
}
#prepare .evolution-tree .wrapper-middle .btn.level-up > span {
    position: relative;
    margin-left: 17px;
    font-weight: bold;
}
#prepare .evolution-tree .wrapper-middle .btn.level-up .glyphicon { 
    width: 24px;
    height: 21px;
    background: transparent url('../images/homepage/tp-price-icon.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    position: absolute;
    margin-top: -1px;
    top: 0px;
    left: -28px;
}
#prepare .evolution-tree .wrapper-middle .btn:hover, 
#prepare .evolution-tree .wrapper-middle .btn:active {
    background-color: #fff;
    color: #000;
}
.modal-received .creature-received-list {
    overflow: hidden;
    padding: 50px 0px;
}
.modal-received .creature-received .box {
    background: transparent url('../images/homepage/creature-box-received.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 140px;
    display: block;
    padding: 10px;
}
.modal-received .creature-received .box > img {
    border: 1px solid #000;
    box-shadow: 0px 0px 5px #fff;
    -moz-box-shadow: 0px 0px 5px #fff;
    -webkit-box-shadow: 0px 0px 5px #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.modal-received .creature-images-cycle {
    position: relative;
}
.modal-received .creature-images-cycle > img {
    position: absolute;
    top: 0px;
    opacity: 0.5 !important;
    -moz-opacity: 0.5 !important;
    -webkit-opacity: 0.5 !important;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}
.modal-received .creature-images-cycle .creature-image-hover {
    opacity: 0 !important;
    -moz-opacity: 0 !important;
    -webkit-opacity: 0 !important;
}
.modal-received .items-images-cycle .items {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 84%;
    height: 82%;
}
.modal-received .items-images-cycle .items > span {
    display: block;
    background: transparent url('../images/homepage/item-background-box.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    opacity: 0.9;
    -moz-opacity: 0.9;
    -webkit-opacity: 0.9;
    padding: 10px;
    cursor: help;
}
.modal-received .items-images-cycle .items .position-0 {
    position: absolute;
    top: 0px;
    left: 0px;
}
.modal-received .items-images-cycle .items .position-1 {
    position: absolute;
    top: 0px;
    right: 0px;
}
.modal-received .items-images-cycle .items .position-2 {
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.modal-received .items-images-cycle .items .position-3 {
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.modal-received .items-images-cycle .items .position-4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.modal-received .items-images-cycle .items .quantity-badge {
    position: absolute;
    bottom: -12px;
    right: -15px;
    background: transparent url('../images/arena/arena-item-badge.png') center center no-repeat;
    background-size: 100% 100%;
    color: #fff;
    width: 40px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
}
.modal-received .points-images-cycle .points {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -25%);
    -moz-transform: translate(-50%, -25%);
    -webkit-transform: translate(-50%, -25%);
}
.modal-received .points-images-cycle .points > span {
    font-size: 30px;
}
.modal-received .points-images-cycle .points .glyphicon {
    background: transparent url('../images/homepage/points-sign-large.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 60px;  
    height: 53px;
    margin-bottom: -14px;
}
.modal-creature .modal-received .modal-body {
    z-index: 9999;
}
.modal-creature .modal-received .modal-body .left-column .image-wrapper .btn {
    width: 100%;
    float: none;
    text-align: center;
}
.modal-creature .modal-received .placeholder {
    display: block;
    width: 100%;
    position: relative;
}
.modal-creature .modal-received .name-cost {
    display: inline-block !important;
    float: none !important;
}
.modal-creature .modal-received .name-cost > .step-bullet {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    background-color: #01d4f4;
    margin: 5px;
    text-align: center;
    text-transform: uppercase;
    line-height: 24px;
    color: #000 !important;
    cursor: help;
}
.modal-creature .modal-received .name-cost > .step-bullet.inactive {
    background-color: #0b444d;
    color: #fff !important;
}
.modal-creature .modal-received .name-cost > .step-bullet .glyphicon {
    display: block;
    position: absolute;
    right: -5px;
    bottom: 0px;
    background: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0px !important;
    color: #f4be01;
    top: auto;
}
.modal-creature .modal-received .info-wrapper .abilities {
    margin: 0px !important;
    overflow: visible !important;
}
.modal-creature .modal-received .info-wrapper .abilities > li {
    position: relative;
}
.modal-creature .modal-received .info-wrapper .abilities > li .glyphicon {
    position: absolute;
    z-index: 99;
    right: 10px;
    bottom: 10px;
    top: auto;
    color: #f4be01;
}
.modal-creature .modal-received .info-wrapper .abilities .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: transparent url('../images/arena/arena-item-badge.png') center center no-repeat;
    background-size: 100% 100%;
    color: #fff;
    width: 40px;
    height: 35px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
}
.modal-creature .modal-received .info-wrapper .img-black {
    background-color: #000;
}
.modal-creature .modal-received .info-wrapper .points-box {
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    text-align: center;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
}
.modal-creature .modal-received .info-wrapper .points-box > span {
    display: block; 
}
.modal-creature .modal-received img.decoration {
    position: fixed;
    display: block;
}
.modal-creature .modal-received img.decoration-top {
    left: 0px;
    right: 0px;
    top: -5%;
    width: 80%;
    margin: 0px auto;
}
.modal-creature .modal-received img.decoration-bottom {
    left: 0px;
    right: 0px;
    bottom: -25%;
    width: 80%;
    margin: 0px auto;
}
.modal-creature .modal-received img.decoration-left {
    left: -10%;
    top: 50%;
    height: 80%;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
}
.modal-creature .modal-received img.decoration-right {
    right: -10%;
    top: 50%;
    height: 80%;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
}
.modal-creature .modal-received .modal-content-preview h1 {
    font-size: 25px;
    color: #fff;
    text-shadow: 2px 2px #000;
    -moz-text-shadow: 2px 2px #000;
    -webkit-text-shadow: 2px 2px #000;
    display: block;
    clear: both;
    line-height: normal;
    margin: 0px;
    text-align: center;
}
.modal-creature .modal-received .modal-content-preview h1 > span {
    font-size: 30px;
}
.modal-creature .modal-received .modal-content-preview p {   
    letter-spacing: 1px;
    font-size: 16px;
    display: block;
    width: 90%;
    margin: 0px auto 0px;
    text-indent: 50px;
    text-align: justify;

}
.modal-creature .modal-received .loot-steps {
    margin-top: -5px;
    overflow: hidden;
}
.modal-creature .modal-received .loot-steps > li {
    background: transparent url('../images/homepage/popup-loot-box-small.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    position: relative;
}
.modal-creature .modal-received .loot-steps > li .loot-container {
    text-align: center;
}
.modal-creature .modal-received .loot-steps > li .loot-container > img {
    width: 90%;
    display: inline-block;
}
.modal-creature .modal-received .loot-steps > li .loot-container > span {
    min-height: 100px;
    display: block;
    letter-spacing: 1px;
    text-align: justify;
    text-indent: 20px;
    margin: 10px auto 0px;
    width: 90%;
    font-size: 14px;
}
.modal-creature .modal-received .loot-steps > li .loot-container .top {
    background: transparent url('../images/homepage/popup-loot-box-top.png') 0px bottom no-repeat;
    background-size: 100% auto;
    height: 35px;
    position: absolute;
    top: -35px;
    left: 0px;
    right: 0px;
}
.modal-creature .modal-received .loot-steps > li .loot-container .bottom {
    background: transparent url('../images/homepage/popup-loot-box-bottom.png') 0px top no-repeat;
    background-size: 100% auto;
    height: 35px;
    position: absolute;
    bottom: -35px;
    left: 0px;
    right: 0px;
}
.modal-creature .modal-received .modal-body .wrapper {
    overflow: hidden;
    padding: 0px 0px 0px 10px;
    margin: -45px 0px -55px;
}
.modal-creature .modal-received .modal-body .wrapper > .loot-container {
    background: transparent url('../images/homepage/popup-loot-box-big.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    padding: 30px 0px;
}
.modal-creature .modal-received .modal-body .loot-next {
    display: block;
    width: 480px;
    position: absolute;
    bottom: -113px;
    right: 0px;
    left: 0px;
    margin: 0px auto;
    text-align: center;
}
.modal-creature .modal-received .modal-body .loot-next > img {
    position: relative;
    z-index: 2;
}
.modal-creature .modal-received .modal-body .loot-next > span {
    position: absolute;
    top: 0px;
    bottom: 18px;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    color: #000;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background-color: #01d4f4;
    width: 70%;
    z-index: 1;
    line-height: 35px;
} 
.modal-creature .modal-received .modal-body .loot-next:active > span, 
.modal-creature .modal-received .modal-body .loot-next:hover > span {
    background-color: #fff;
}
.modal-creature .modal-received .modal-content.smaller-content {
    top: 0px;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    margin: 0px;
    min-width: 700px;
}
.modal-creature .modal-received .modal-content.smaller-content .wrapper {
    margin: -25px 0px -35px;
    padding: 0px 10px;
}
.modal-creature .modal-received .modal-content.smaller-content .loot-steps > li:first-child {
    margin-top: 15px; 
}
.modal-creature .modal-received .modal-content.smaller-content .loot-steps > li {
    padding: 35px;
    margin-bottom: 10px; 
}
.modal-creature .modal-received .modal-content.smaller-content .loot-next {
    bottom: -88px;
}
.modal-creature .modal-received .modal-content.smaller-content .wrapper > .loot-container {
    background: transparent url('../images/homepage/popup-loot-box-big-small.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.modal-creature .modal-received .modal-content.smaller-content .loot-steps > li {
    background: transparent url('../images/homepage/popup-loot-box-small-small.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.modal-creature .modal-received .modal-content.smaller-content img.decoration-top {
    top: -1%;
}
.modal-creature .modal-received .modal-content.smaller-content img.decoration-bottom {
    bottom: -5%;
}
.modal-creature .modal-received .modal-content.smaller-content img.decoration-left {
    height: 25%;
    left: -20%;
}
.modal-creature .modal-received .modal-content.smaller-content img.decoration-right {
    height: 25%;
    right: -20%;
}