*,
html {
    box-sizing: border-box;
    font-family: 'Roboto Slab', serif;
    margin: 0;
    padding: 0;
}

body {
    background: url("../img/background.jpg") #19141a no-repeat top center;
    overflow-x: hidden;
    font-size: 14px;
}

a {
    color: #351a04;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	text-decoration:none;
}

a:hover {
    text-decoration: none;
    color: #336d7a;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.fullscreen-bg {
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}

#page {
    position: relative;
    z-index: 2;
}

#page.page-container {
    width: 1458px;
    margin: 0 auto;
}

#header {
    height: 480px;
    width: 1165px;
    margin: 0 auto;
    position: relative;
}

#header .topbar {
    background: url("../img/topbar.png");
    display: inline-block;
    position: relative;
    width: 336px;
    height: 75px;
    padding: 6px 50px 0 30px;
}

#header .topbar .language-dropdown {
    float: right;
}

#header .topbar .online-status {
    float: left;
}

#header .topbar .online-status i,
#header .topbar .online-status span {
    float: left;
}

#header .topbar .online-status span {
    padding-top: 3px;
    font-size: 14px;
    color: #eee8e0;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 0px 2px 3px rgba(108, 71, 20, 0.6);
}

#header .topbar .online-status i {
    top: -7px;
}

#header a.logo {
    position: absolute;
    display: block;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    transition: all linear 0.1s;
}

#header a.logo:hover {
    opacity: 0.8;
}

#main {
    background: url("../img/main.png") repeat-y top center;
    width: 100%;
    min-height: 800px;
    position: relative;
    z-index: 1;
    margin: 100px 0;
}

#main:before {
    content: "";
    position: absolute;
    z-index: 2;
    background: url("../img/main_top_menu.png") no-repeat top center;
    height: 440px;
    width: 100%;
    top: -40px;
}

#main:after {
    content: "";
    position: absolute;
    z-index: 2;
    background: url("../img/main_footer.png") no-repeat top center;
    height: 302px;
    width: 100%;
    bottom: -60px;
    left: 0;
}

#main .main-container {
    position: relative;
    z-index: 3;
    width: 1100px;
    margin: 0 auto;
    padding-top: 12px;
}

ul.menu {
    height: 64px;
    margin: 0;
    display: block;
    padding: 0 0 0 20px;
}

ul.menu li.menu--item {
    list-style: none;
    display: inline-block;
    padding: 0 15px;
    background: transparent;
    border-left: solid 1px transparent;
    border-right: solid 1px transparent;
}

ul.menu li.menu--item a.menu--link {
    line-height: 64px;
    display: block;
    text-decoration: none;
    color: #3f2e1e;
    text-transform: uppercase;
    font-size: 16px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: all linear 0.1s;
}

ul.menu li.menu--item:hover {
    background: #444138;
    background: linear-gradient(0deg, rgba(68, 65, 56, 0) 0%, rgba(68, 65, 56, 0.4) 100%);
    border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0)) 1 100%;
}

ul.menu li.menu--item:hover a.menu--link {
    color: #524236;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

ul.menu li.menu--item:first-child:hover {
    background: linear-gradient(90deg, rgba(68, 65, 56, 0) 50%, rgba(68, 65, 56, 0.4) 100%);
    border-left: none;
    padding-left: 16px;
}

ul.menu li.download--item {
    float: right;
    list-style: none;
    display: block;
    position: relative;
    top: -24px;
    right: -29px;
}

ul.menu li.download--item a {
    display: block;
}

ul.menu li.download--item a img {
    opacity: 0;
    transition: opacity linear 0.07s;
}

ul.menu li.download--item:hover a img {
    opacity: 1;
}

.main-content {
    width: 1100px;
    margin: 0 auto;
    position: relative;
    top: -38px;
    display: flex;
    justify-content: space-between;
}

.main-content .main-sidebar--left {
    width: 308px;
    flex-basis: 308px;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 308px;
}

.main-content .main-content--wrapper {
    flex: 1;
    max-width: 792px;
}

.main-content .main-content--wrapper .main-content-slider {
    width: 100%;
    height: 204px;
}

.main-content .main-content--wrapper .main-sidebar--right {
    width: 275px;
    float: right;
    max-width: 275px;
}

.main-content .main-content--wrapper .main-content--body {
    width: calc(100% - 275px);
    padding-top: 15px;
    float: left;
}

.flag {
    background-image: url("../img/flags.png");
    background-repeat: no-repeat;
    width: 38px;
    height: 35px;
    display: block;
}

.flag.english {
    background-position: 0 -35px;
}

.flag.romanian {
    background-position: 0 -70px;
}

.flag.turkish {
    background-position: 0 -105px;
}

.icon.caret-down {
    background: url("../img/caret-down.png");
    width: 17px;
    height: 24px;
    display: inline-block;
    position: relative;
    top: -5px;
}

.icon.arrow-right {
    background: url("../img/arrow.png");
    width: 24px;
    height: 28px;
    display: inline-block;
    position: relative;
}

.icon.arrow-left {
    background: url("../img/arrow.png");
    width: 24px;
    height: 28px;
    display: inline-block;
    position: relative;
    transform: rotate(-180deg);
}

.status {
    background-image: url("../img/topbar-status.png");
    background-repeat: no-repeat;
    width: 55px;
    height: 48px;
    display: block;
    position: relative;
}

.status.online {
    background-position: 0 0;
}

.status.offline {
    background-position: 0 -48px;
}

.language-dropdown {
    display: inline-block;
    position: relative;
}

.language-dropdown .selection-button {
    display: inline-block;
    cursor: pointer;
}

.language-dropdown .selection-button span {
    display: inline-block;
}

.language-dropdown .selection--list {
    display: none;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow: hidden;
}

.language-dropdown .selection--list .selection--item {
    display: block;
    position: relative;
    left: -100%;
    cursor: pointer;
}

.language-dropdown .selection--list .selection--item .flag {
    transition: all linear 0.07s;
}

.language-dropdown .selection--list .selection--item .flag:hover {
    transform: scale(1.15);
}

.language-dropdown .selection--list .selection--item[data-selected] {
    display: none;
}

input,
textarea,
select {
    background: rgba(0, 0, 0, 0.2);
    outline: none;
    border: solid 1px rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 4px 10px 0px rgba(0, 0, 0, 0.5), inset 0 0 1px 1px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    height: auto;
    line-height: normal;
    padding: 10px;
    width: 100%;
    margin-bottom: 8px;
    color: #353028;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 15px;
}

select option {
    background: rgba(139, 132, 122, 0.92);
    color: #373737;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #353028;
    opacity: 1;
    /* Firefox */
}

input:focus,
textarea:focus,
select:focus,
input:active,
textarea:active,
select:active,
input.focus,
textarea.focus,
select.focus,
input.active,
textarea.active,
select.active {
    border: solid 1px rgba(252, 255, 84, 0.3);
    box-shadow: inset 0 4px 10px 0px rgba(0, 0, 0, 0.5), inset 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 8px 2px rgba(142, 84, 44, 0.44);
    color: #e7cf7c;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 0px 2px 3px rgba(108, 71, 20, 0.6);
}

input:focus::placeholder,
textarea:focus::placeholder,
select:focus::placeholder,
input:active::placeholder,
textarea:active::placeholder,
select:active::placeholder,
input.focus::placeholder,
textarea.focus::placeholder,
select.focus::placeholder,
input.active::placeholder,
textarea.active::placeholder,
select.active::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #e7cf7c;
    opacity: 1;
}

input.error,
textarea.error,
select.error {
    border: solid 1px rgba(255, 0, 0, 0.66);
    box-shadow: inset 0 4px 10px 0px rgba(0, 0, 0, 0.5), inset 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 8px 2px rgba(139, 6, 7, 0.62);
    color: #ff7f7d;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 0px 2px 3px rgba(108, 21, 20, 0.6);
}

.cbx {
    display: block;
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    font-size: 14px;
    color: #504a44;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}

.cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    transform: scale(1);
    vertical-align: middle;
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.2);
    outline: none;
    border: solid 1px rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 4px 10px 0px rgba(0, 0, 0, 0.5), inset 0 0 1px 1px rgba(0, 0, 0, 0.05);
}

.cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #e7cf7c;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.15s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

.cbx span:last-child {
    padding-left: 8px;
}

.cbx:hover span:first-child {
    border-color: #e7cf7c;
}

.inp-cbx:checked + .cbx span:first-child {
    border-color: #e7cf7c;
    box-shadow: inset 0 4px 10px 0px rgba(0, 0, 0, 0.5), inset 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 8px 2px rgba(142, 84, 44, 0.44);
}

.inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}

.btn {
    background: url("../img/btns.png");
    background-position: 0 0;
    height: 75px;
    display: inline-block;
    text-align: center;
    line-height: 75px;
    width: 219px;
    outline: none !important;
    border: none !important;
    font-size: 14px;
    color: #17485b;
    text-shadow: 0 1px 0 #5fd7e5;
    opacity: 0.8;
    cursor: pointer;
    transition: all linear 0.05s;
    position: relative;
    top: -5px;
    margin-bottom: -10px;
    margin-right: -10px;
    left: -10px;
    text-decoration: none;
}

.btn.btn--red {
    color: #5b1513;
    background-position: 0 -75px;
    text-shadow: 0 1px 0 #ee817b;
}

.btn.btn--green {
    color: #bdff8f;
    text-shadow: 0 1px 0 #2d4810, 0px 0px 5px #0e1706;
    background-position: 0 -150px;
}

.btn.btn--medium {
    width: 156px;
    background-position: -219px 0;
}

.btn.btn--medium.btn--red {
    background-position: -219px -75px;
}

.btn.btn--medium.btn--green {
    background-position: -219px -150px;
}

.btn.btn--small {
    width: 104px;
    background-position: -375px 0;
}

.btn.btn--small.btn--red {
    background-position: -375px -75px;
}

.btn.btn--small.btn--green {
    background-position: -375px -150px;
}

.btn:hover {
    opacity: 1;
}

.main-content--body h1 {
    background: url("../img/page_title.png") top left no-repeat;
    width: 100%;
    height: 177px;
    position: relative;
    top: -15px;
    left: -16px;
    font-size: 17px;
    text-transform: uppercase;
    color: #ffdcae;
    text-shadow: 2px 0 2px rgba(0, 0, 0, 0.6), 0 0 4px rgba(190, 141, 23, 0.64), 0 0 8px rgba(203, 161, 29, 0.71);
    font-weight: 500;
    padding: 34px 0 0 35px;
    margin: 0 0 -95px 0;
    z-index: -1;
}

.main-content--body h2 {
    background: url("../img/content_title.png") top left no-repeat;
    width: 100%;
    height: 134px;
    position: relative;
    font-size: 17px;
    text-transform: uppercase;
    color: #ffdcae;
    text-shadow: 2px 0 2px rgba(0, 0, 0, 0.6), 0 0 4px rgba(190, 141, 23, 0.64), 0 0 8px rgba(203, 161, 29, 0.71);
    font-weight: 500;
    padding: 30px 0 0 30px;
    z-index: -1;
    margin: 0 0 -35px 0;
    top: -10px;
}

.main-content--body .content--body {
    padding: 0 30px;
}

.main-content--body .content--body,
.main-content--body p {
    font-size: 13px;
    line-height: 20px;
    color: #413c35;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.main-content--body hr {
    border: none;
    width: 100%;
    background: url("../img/content_spacer.png") no-repeat top center;
    height: 5px;
    display: block;
    margin: 10px 0;
}

.sidebar-login .sidebar-login--title {
    height: 80px;
    padding: 0 30px;
    line-height: 55px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #4c5464;
    text-shadow: 0 1px 0px rgba(255, 255, 255, 0.5);
}

.sidebar-login .sidebar-login--body {
    padding: 15px 25px 0 25px;
}

.sidebar-login .login-btn {
    border: none;
    background: url("../img/login_button.png");
    width: 268px;
    height: 80px;
    margin: 10px auto auto 0px;
    outline: none;
    color: #0d6078;
    text-transform: uppercase;
    font-size: 16px;
    padding-bottom: 10px;
    text-shadow: 0 1px 0 #8df5ff;
    cursor: pointer;
}

.sidebar-login .login-btn:hover {
    background-position: 0 -80px;
}

.sidebar-login a {
    display: block;
}

.sidebar-item {
    position: relative;
}

.sidebar-item .sidebar-item--title {
    position: relative;
    left: -16px;
    margin-bottom: -50px;
    margin-top: 20px;
    background: url("../img/sidebar_title_left.png") no-repeat top left;
    width: 100%;
    height: 147px;
    padding: 35px 0 0 45px;
}

.sidebar-item .sidebar-item--title span {
    font-size: 17px;
    text-transform: uppercase;
    color: #ffdcae;
    text-shadow: 2px 0 2px rgba(0, 0, 0, 0.6), 0 0 4px rgba(190, 141, 23, 0.64), 0 0 8px rgba(203, 161, 29, 0.71);
}

.sidebar-item .sidebar-spacer {
    background: url("../img/sidebar_spacer.png") no-repeat 8px 0;
    height: 7px;
    width: 100%;
    margin: 20px 0 15px 0;
}

.sidebar-item .sidebar-item--body {
    position: relative;
    padding: 0 25px 0 25px;
}

.sidebar-item .sidebar-item--body p {
    font-size: 13px;
    color: #504a44;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.sidebar-item .sidebar-item--body p.copyright {
    line-height: 22px;
    padding: 5px;
}

.sidebar-item .sidebar-item--body p.copyright a {
    color: #953043;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    text-decoration: none;
}

.sidebar-item .sidebar-item--body p.copyright a:hover {
    text-decoration: underline;
}

.sidebar-item .sidebar-item--body.status-body:before {
    content: "";
    background: url("../img/sidebar_ninja.png");
    height: 239px;
    width: 154px;
    display: block;
    bottom: -10px;
    left: -49px;
    position: absolute;
}

.main-sidebar--right {
    position: relative;
}

.main-sidebar--right .sidebar-item:first-child {
    top: -12px;
}

.main-sidebar--right .sidebar-item .sidebar-item--title {
    background: url("../img/sidebar_title_right.png") no-repeat top right;
    left: unset;
    right: -16px;
    text-align: right;
    padding: 35px 45px 0 0;
    margin-top: 0;
}

.status--item {
    position: relative;
    padding-bottom: 25px;
}

.status--item span {
    padding-left: 25px;
    color: #655f58;
    font-size: 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.status--item .progress {
    background: url("../img/stats_progress_bg.png");
    width: 251px;
    height: 27px;
    padding: 2px 15px 0 17px;
    position: absolute;
    left: 15px;
}

.status--item .progress .bar {
    background: url("../img/stats_progress.png");
    height: 22px;
    position: relative;
    min-width: 10px;
}

.status--item .progress .bar:after {
    background: url("../img/stats_progress_after.png");
    content: "";
    width: 10px;
    height: 22px;
    display: block;
    position: absolute;
    right: -10px;
}

.status--item .progress .bar:before {
    background: url("../img/stats_progress_before.png");
    content: "";
    width: 10px;
    height: 22px;
    display: block;
    position: absolute;
    left: -10px;
}

.status--item .progress .bar.is--red {
    background: url("../img/stats_progress_red.png");
}

.status--item .progress .bar.is--red:after {
    background: url("../img/stats_progress_after_red.png");
}

.status--item .progress .bar.is--red:before {
    background: url("../img/stats_progress_before_red.png");
}

.status--item .progress .bar.is--blue {
    background: url("../img/stats_progress_blue.png");
}

.status--item .progress .bar.is--blue:after {
    background: url("../img/stats_progress_after_blue.png");
}

.status--item .progress .bar.is--blue:before {
    background: url("../img/stats_progress_before_blue.png");
}


.status--item .progress .bar.is--yellow {
    background: url("../img/stats_progress_yellow.png");
}

.status--item .progress .bar.is--yellow:after {
    background: url("../img/stats_progress_after_yellow.png");
}

.status--item .progress .bar.is--yellow:before {
    background: url("../img/stats_progress_before_yellow.png");
}



.player-count {
    background: url("../img/stats_online_bg.png") top right no-repeat;
    width: 100%;
    height: 113px;
    position: relative;
    z-index: -1;
    top: -25px;
    right: -10px;
    margin-bottom: -65px;
    display: flex;
    padding-top: 40px;
    padding-right: 30px;
    justify-content: flex-end;
    align-items: center;
}

.player-count .label {
    padding-right: 15px;
    font-size: 14px;
    color: #f2e7dc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.4);
}

.player-count .count {
        color: #faeb9e;
    font-size: 20px;
    padding: 0 4px;
    text-shadow: 0 1px 1px rgb(0 0 0 / 40%), 0 0 12px #8f420b, 0 0 8px #8f420b;
    }

.player-count .count .odometer-digit {
    padding: 0 6px;
    margin-left: -10px;
}

.player-count .count .odometer-formatting-mark {
    margin-left: -10px;
    padding: 0 6px;
}


.player-count .count .odometer-value {
    padding: 0 6px;
}

.sidebar-statistic {
    background: url("../img/stats_table_bg.png");
    width: 266px;
    height: 222px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 0;
}

.sidebar-statistic .statistic-row {
    padding: 12.5px 15px;
}

.sidebar-statistic .statistic-row .label {
    display: inline-block;
    width: 150px;
    padding-left: 10px;
    color: #bfb7ad;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.4);
}

.sidebar-statistic .statistic-row .count {
    width: calc(100% - 155px);
    display: inline-block;
    text-align: center;
    padding-right: 8px;
    color: #ffe1ad;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 0 12px #8f420b, 0 0 8px #8f420b;
}

.sidebar-ranking {
    background: url("../img/ranking_table_bg.png");
    width: 207px;
    height: 171px;
    margin: 0 auto;
    display: none;
}

.sidebar-ranking .ranking-row {
    height: 34px;
    line-height: 34px;
    display: flex;
    padding: 0 15px;
}

.sidebar-ranking .ranking-row span {
    display: inline-block;
    font-size: 14px;
}

.sidebar-ranking .ranking-row .rank {
    flex-basis: 15%;
    width: 15%;
    color: #3b3937;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.2);
}

.sidebar-ranking .ranking-row .rank.first {
    color: #ddbe76;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 0 6px #bb7f2b, 0 0 8px #bb7f2b, 0 0 10px #bb7f2b;
}

.sidebar-ranking .ranking-row .rank.second {
    color: #c1ced3;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 0 6px #559aba, 0 0 8px #559aba, 0 0 10px #559aba;
}

.sidebar-ranking .ranking-row .rank.third {
    color: #915935;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 0 6px #784727, 0 0 8px #784727, 0 0 10px #784727;
}

.sidebar-ranking .ranking-row .name {
    flex: 1;
    color: #3b3937;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.2);
}

.sidebar-ranking .ranking-row .level {
    flex-basis: 20%;
    width: 20%;
    text-align: right;
    color: #ede7e3;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.2);
}

.sidebar-ranking--actions {
    padding: 10px 10px 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #344f57;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.sidebar-ranking--actions i {
    cursor: pointer;
}

.sidebar-ranking--actions i:hover {
    opacity: 0.7;
}

.sidebar-trailer {
    background: url("../img/trailer_thumbnail.png");
    width: 222px;
    height: 138px;
    margin: 5px auto 10px auto;
    position: relative;
}

.sidebar-trailer a {
    background: url("../img/play_button.png");
    width: 68px;
    height: 68px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
}

.sidebar-trailer a:hover {
    opacity: 1;
}

.sidebar-social-media {
    position: relative;
    z-index: 1;
    padding-left: 10px;
}

.sidebar-social-media .social-media--item {
    position: relative;
    background: url("../img/social_media_bg.png") no-repeat;
    width: 100%;
    height: 55px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
}

.sidebar-social-media .social-media--item span {
    opacity: 0.7;
}

.sidebar-social-media .social-media--item .logo {
    min-width: 60px;
    flex-basis: 60px;
    width: 60px;
    padding-top: 10px;
}

.sidebar-social-media .social-media--item.blue {
    color: #5598f4;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 0 8px #2719e3, 0 0 18px #2719e3;
}

.sidebar-social-media .social-media--item.red {
    color: #fa3338;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 0 8px #ba0f0f, 0 0 18px #ba0f0f;
}

.sidebar-social-media .social-media--item.gold {
    color: #ddbc3a;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 0 8px #e38219, 0 0 18px #e38219;
}

.sidebar-social-media .social-media--item:hover span {
    opacity: 1;
}

/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    content: "";
    display: table;
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

[dir="rtl"] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.page-slider {
    width: 100%;
    max-width: 100%;
    height: 203px;
    overflow: hidden;
}

.page-slider .slider-item {
    max-width: 100%;
    position: relative;
}

.page-slider .slider-item .slider-item--body {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 30px 25px 30px;
}

.page-slider .slider-item .slider-item--body p {
    font-size: 20px;
    color: #64d2c1;
    text-shadow: 0 2px 2px #000000, 0 0 8px #000000, 0 0 10px rgba(0, 0, 0, 0.8);
    margin-bottom: 7px;
}

.page-slider .slider-item .slider-item--body span {
    color: #9d9994;
    font-size: 14px;
    text-shadow: 0 2px 2px #000000, 0 0 8px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.9);
}

.page-slider .slider-item .slider-item--body span a {
    color: #64d2c1;
}

.page-slider .slider-item .slider-item--body.golden p {
    color: #f7d26d;
}

.page-slider .slider-item .slider-item--body.golden span a {
    color: #f7d26d;
}

.page-slider .slick-dots {
    position: absolute;
    right: 25px;
    bottom: 30px;
}

.page-slider .slick-dots li {
    list-style: none;
}

.page-slider .slick-dots li button {
    border: 0;
    outline: 0;
    background: url("../img/slider_bullets.png");
    width: 24px;
    height: 26px;
    background-position: 0 0;
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    cursor: pointer;
}

.page-slider .slick-dots li.slick-active button {
    cursor: auto;
    background-position: 0 -26px;
}

.form-group .value {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-group p.error {
    color: #ff9185;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8), 0 0 8px #ba0f0f, 0 0 18px #ba0f0f, 0 0 18px rgba(0, 0, 0, 0.8);
    font-size: 12px;
    position: relative;
    top: -4px;
    margin-bottom: 7px;
}

.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, .3);
}

.sidebar-menu .menu-item {
    padding: 8px 12px;
    border-top: 1px solid;
    background: rgba(0, 0, 0, .2);
    background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 100%);
    border-image-source: linear-gradient(90deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    border-image-slice: 1;
    font-size: 14px;
    color: #cfbcb0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.44), 0 0 8px rgba(0, 0, 0, 0.9);
    text-decoration: none;
}

.sidebar-menu .menu-item:last-child {
    border-bottom: 1px solid;
}

.sidebar-menu .menu-item:hover {
    background: rgba(0, 0, 0, .4);
    background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    color: #ffdcae;
    text-shadow: 2px 0 2px rgba(0, 0, 0, 0.6), 0 0 8px rgba(190, 141, 23, 0.64), 0 0 12px rgba(203, 161, 29, 0.71);
}

.passtrengthMeter input {
    background: rgba(0, 0, 0, 0.2);
    outline: none;
    border: solid 1px rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 4px 10px 0px rgba(0, 0, 0, 0.5), inset 0 0 1px 1px rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px;
    height: auto;
    line-height: normal;
    padding: 10px;
    width: 100%;
    margin-bottom: 8px;
    color: #353028;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 15px;
}

.passtrengthMeter input:focus,
.passtrengthMeter input.focus,
.passtrengthMeter input.active {
    border: solid 1px rgba(252, 255, 84, 0.3);
    box-shadow: inset 0 4px 10px 0px rgba(0, 0, 0, 0.5), inset 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 8px 2px rgba(142, 84, 44, 0.44) !important;
    color: #e7cf7c;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 0px 2px 3px rgba(108, 71, 20, 0.6);
}

.passtrengthMeter input:focus::placeholder,
.passtrengthMeter input:active::placeholder,
.passtrengthMeter input.focus::placeholder,
.passtrengthMeter input.active::placeholder {
    color: #e7cf7c;
    opacity: 1;
}

.passtrengthMeter input.error {
    border: solid 1px rgba(255, 0, 0, 0.66);
    box-shadow: inset 0 4px 10px 0px rgba(0, 0, 0, 0.5), inset 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 8px 2px rgba(139, 6, 7, 0.62) !important;
    color: #ff7f7d;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 0px 2px 3px rgba(108, 21, 20, 0.6);
}

.passtrengthMeter::after {
    border-radius: 3px;
    left: 0px;
    bottom: 3px;
}

table.list-table {
    border: solid 1px rgba(255, 248, 221, .3);
    border-collapse: collapse;
    background: rgba(15, 6, 0, 0.15);
    width: 100%;
    max-width: 100%;
    text-align: left;
    box-shadow: 0 0 15px 0px rgba(6, 6, 6, 0.57), inset 0 0 22px 0px rgba(15, 6, 0, 0.5);
}

table.list-table td,
table.list-table th {
    padding: 8px 10px;
    font-size: 13px;
}

table.list-table td.highlight {
    color: #d5e3e9;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 0 6px #559aba, 0 0 8px #559aba, 0 0 10px #559aba;
}

table.list-table th {
    padding: 14px 10px;
    font-size: 14px;
    color: #d4b999;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 12px rgba(0, 0, 0, 0.9);
}

table.list-table tr {
    border-bottom: solid 1px rgba(255, 248, 221, .5);
}

table.list-table thead tr {
    background: rgba(15, 6, 0, 0.15);
}

table.list-table tbody tr:nth-child(even) {
    background: rgba(15, 6, 0, 0.1);
}

.chevron::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    left: 0.15em;
    position: relative;
    top: 0.15em;
    transform: rotate(-45deg);
    vertical-align: top;
    width: 0.45em;
}

.chevron.right:before {
    left: 0;
    transform: rotate(45deg);
}

.chevron.bottom:before {
    top: 0;
    transform: rotate(135deg);
}

.chevron.left:before {
    left: 0.25em;
    transform: rotate(-135deg);
}

.pagination {
    list-style: none;
    margin: 20px 0;
}

.pagination li {
    display: inline-block;
}

.pagination li > span,
.pagination li > a {
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border: solid 1px rgba(255, 255, 255, .5);
    background: rgba(0, 0, 0, .2);
}

.pagination li > a {
    color: #e3cfa7;
    /*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.44), 0 0 8px rgba(0, 0, 0, 0.9);*/
}

.pagination li > a:hover {
    color: #f2c974;
}

.pagination li .chevron {
    position: relative;
    top: 3px;
    left: -2px;
}

p.alert {
    background: rgba(63, 131, 0, 0.41);
    display: block;
    padding: 10px;
    color: rgb(191, 236, 121);
    text-shadow: 0 1px 4px #2c4028;
    margin-bottom: 10px;
}

p.alert.error {
    background: rgba(160, 0, 13, 0.41);
    display: block;
    padding: 10px;
    color: rgb(255, 163, 154);
    text-shadow: 0 1px 4px #401d21;
}


p.alert.info {
    background: rgba(0, 30, 160, 0.41);
    display: block;
    padding: 10px;
    color: rgb(173, 183, 255);
    text-shadow: 0 1px 4px #172240;
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-minimal {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    position: relative;
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-minimal {
    *display: inline;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit {
    *display: inline;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer {
    *display: inline;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {
    text-align: left;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon {
    display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner {
    display: block;
    -webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value {
    display: block;
    -webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value {
    position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner {
    -webkit-transition: -webkit-transform 2s;
    -moz-transition: -moz-transform 2s;
    -ms-transition: -ms-transform 2s;
    -o-transition: -o-transform 2s;
    transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
    -webkit-transition: -webkit-transform 2s;
    -moz-transition: -moz-transform 2s;
    -ms-transition: -ms-transform 2s;
    -o-transition: -o-transform 2s;
    transition: transform 2s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.sidebar-coins {
    font-size: 17px;
    text-transform: uppercase;
    color: #ecd0be;
    text-shadow: 0 1px 0
    rgba(0, 0, 0, 0.65), 0 0 8px rgb(0, 0, 0);
    margin-bottom: 5px;
}

.sidebar-coins a {
    display: inline-block;
    text-decoration: none;
    font-size: 17px;
    text-transform: uppercase;
    color: #ffdcae;
    text-shadow: 2px 0 2px rgba(0, 0, 0, 0.6), 0 0 4px rgba(190, 141, 23, 0.64), 0 0 8px rgba(203, 161, 29, 0.71);
}

.sidebar-coins a:hover {
    text-decoration: underline;
}

.coin-prices {
    overflow: hidden;
    border: solid 1px rgba(255, 239, 216, 0.39);
    box-shadow: 0px 8px 25px 0px rgba(64, 47, 35, 0.45), inset 0px 8px 25px 0px rgba(64, 47, 35, 0.45);
}

.coin-prices .coin-prices--item,
.coin-prices .coin-prices--headline {
    display: flex;
    align-items: center;
    border-bottom: solid 1px rgba(255, 239, 216, 0.39);
    box-shadow: 0px 8px 25px 0px rgba(64, 47, 35, 0.45);
}
.coin-prices .coin-prices--item span,
.coin-prices .coin-prices--headline span {
    font-size: 18px;
    text-align: center;
}
.coin-prices .coin-prices--headline {
    background: rgba(52, 39, 34, 0.25);
}
.coin-prices .coin-prices--headline span {
    padding: 10px 0;
}

.coin-prices .coin-prices--item span,
.coin-prices .coin-prices--headline span,
.coin-prices .coin-prices--item a {
    flex: 1;
}

.coin-prices .coin-prices--item span.coins {
    color: #ffdcae;
    text-shadow: 2px 0 2px rgba(0, 0, 0, 0.6), 0 0 4px rgba(190, 141, 23, 0.64), 0 0 8px rgba(203, 161, 29, 0.71);
}

.coin-prices .coin-prices--item:last-child {
    border: none;
}

.characters {
    overflow: hidden;
    border: solid 1px rgba(255, 239, 216, 0.39);
    box-shadow: 0px 8px 25px 0px rgba(64, 47, 35, 0.45), inset 0px 8px 25px 0px rgba(64, 47, 35, 0.45);
}

.characters .characters--item,
.characters .characters--headline {
    display: flex;
    align-items: center;
    border-bottom: solid 1px rgba(255, 239, 216, 0.39);
    box-shadow: 0px 8px 25px 0px rgba(64, 47, 35, 0.45);
}
.characters .characters--item span,
.characters .characters--headline span {
    font-size: 13px;
    text-align: left;
}
.characters .characters--headline {
    background: rgba(52, 39, 34, 0.25);
}
.characters .characters--headline span {
    padding: 10px 10px;
}

.characters .characters--item span {
    padding: 0 10px;
}


.characters .characters--item .name,
.characters .characters--headline .name {
    flex-basis: 27%;
    width: 27%;
    min-width: 27%;
}

.characters .characters--item .job,
.characters .characters--headline .job {
    flex-basis: 23%;
    width: 23%;
    min-width: 23%;
}
.characters .characters--item .lvl,
.characters .characters--headline .lvl {
    flex-basis: 12%;
    width: 12%;
    min-width: 12%;
}

.characters .characters--item .playtime,
.characters .characters--headline .playtime {
    flex-basis: 15%;
    width: 15%;
    min-width: 15%;
}

.characters .characters--item .empire,
.characters .characters--headline .empire {
    flex-basis: 15%;
    width: 15%;
    min-width: 15%;
}

.characters .characters--item .empire img {
    max-width: 100%;
    vertical-align: center;
}

.characters .characters--item:last-child {
    border: none;
}

.fullscreen-bg:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/video_overlay.png") bottom center no-repeat;
}

.video-options {
    position: absolute;
    right: 0;
    top: 0;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,.5) 42%, rgba(0,0,0,0) 100%);
    padding: 15px 20px;
}

.enable-video {
    position: relative;
    cursor: pointer;
    display: flex;
    color: #c9a982;
    text-shadow: 0 1px 2px rgba(0,0,0,1);
    font-size: 14px;
    align-items: center;
    text-decoration: none;
}

.enable-video .checkbox {
    margin-left: 15px;
    background: #c9a982;
    border-radius: 5px;
    width: 22px;
    height: 22px;
    box-shadow:2px -2px 0 0 #f7edb0,0 0 0 3px #e5b252, 0 0 8px 2px rgba(0,0,0,1), inset 0 0 1px 1px rgba(49, 36, 28, .3), inset 0 0 6px 2px rgba(49, 36, 28, 0.6);
    position: relative;

}
.enable-video:hover {
    color: #c9a982;
    text-decoration: underline;
}

.enable-video:hover .checkbox {
    box-shadow:2px -2px 0 0 #f7edb0,
    0 0 0 3px #e5b252,
    0 0 8px 2px #e5b252,
    inset 0 0 1px 1px rgba(49, 36, 28, .3),
    inset 0 0 6px 2px rgba(49, 36, 28, 0.6);
}

.enable-video .checkbox.is--active:after {
    content: "";
    width: 6px;
    height: 12px;
    position: absolute;
    border-right: solid 3px #e5b252;
    border-bottom: solid 3px #f7edb0;
    transform: rotate(35deg) translateX(-50%);
    left: 50%;
    top: 3px;
    box-shadow: 3px 3px 3px 0 rgba(0,0,0,.5);
}

#page {
    padding-bottom: 100px;
}

body {
    position: relative;
}

body::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url("../img/background_footer.png") bottom center no-repeat;
}