:root {
    --color-link: rgb(219,21,54);
    --gradient-color-1: rgba(248,63,68,1);
    --gradient-color-2: rgba(245,25,87,1);
}


@media only screen and (max-width:319px) {
    :root {
        --ratio_320-586: 0px;
    }
}
@media only screen and (min-width:320px) and (max-width:585px) {
    :root {
        --ratio_320-586: (100vw - 320px) / (586 - 320);
    }
}
@media only screen and (min-width:586px) {
    :root {
        --ratio_320-586: 1px;
    }
}

@media only screen and (max-width:585px) {
    :root {
        --ratio_586-1160: 0px;
    }
}
@media only screen and (min-width:586px) and (max-width:1159px) {
    :root {
        --ratio_586-1160: (100vw - 586px) / (1160 - 586);
    }
}
@media only screen and (min-width:1160px) {
    :root {
        --ratio_586-1160: 1px;
    }
}

@media only screen and (max-width:1159px) {
    :root {
        --ratio_1160-1400: 0px;
    }
}
@media only screen and (min-width:1160px) and (max-width:1399px) {
    :root {
        --ratio_1160-1400: (100vw - 1160px) / (1400 - 1160);
    }
}
@media only screen and (min-width:1400px) {
    :root {
        --ratio_1160-1400: 1px;
    }
}

@media only screen and (max-width:585px) {
    :root {
        --ratio_586-900: 0px;
    }
}
@media only screen and (min-width:586px) and (max-width:899px) {
    :root {
        --ratio_586-900: (100vw - 586px) / (900 - 586);
    }
}
@media only screen and (min-width:900px) {
    :root {
        --ratio_586-900: 1px;
    }
}

@media only screen and (max-width:859px) {
    :root {
        --ratio_860-1160: 0px;
    }
}
@media only screen and (min-width:860px) and (max-width:1159px) {
    :root {
        --ratio_860-1160: (100vw - 860px) / (1160 - 860);
    }
}
@media only screen and (min-width:1160px) {
    :root {
        --ratio_860-1160: 1px;
    }
}



* {
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', sans-serif;
    margin: 0;
    background-color: rgb(238,238,238);
}

table {
    border-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

h1, .h1 {
    margin: 0.8em 0 0.6em 0;
    color: rgb(14,14,14);
    font-weight: 500;
    line-height: 1;
}

@media only screen and (max-width:585px) {
    h1, .h1 {
        font-size: 30pt;
        font-size: min(7vw, 30pt);
    }
}
@media only screen and (min-width:586px) {
    h1, .h1 {
        font-size: 34pt;
        font-size: min(7vw, 34pt);
    }
}
@media only screen and (min-width:1160px) {
    h1, .h1 {
        font-size: 34pt;
    }
}

h3 {
    margin: 1em 0 0.4em 0;
    line-height: 1;
    font-weight: 500;
    font-size: 22pt;
    font-size: min(5.5vw, 22pt);
}

@media only screen and (min-width:586px) {
    h3 {
        font-size: 22pt;
        font-size: min(7vw, 22pt);
    }
}
@media only screen and (min-width:1160px) {
    h3 {
        font-size: 24pt;
    }
}

h4 {
    font-size: 16pt;
    margin: 20px 0 15px 0;
    line-height: 1;
}

@media only screen and (max-width:585px) {
    h4 {
        font-size: 12pt;
        font-size: max(4vw, 12pt);
    }
}
@media only screen and (min-width:586px) {
    h4 {
        font-size: 20pt;
        font-size: min(4vw, 20pt);
    }
}
@media only screen and (min-width:1160px) {
    h4 {
        font-size: 20pt;
    }
}

h5 {
    font-size: 12pt;
    margin: 10px 0 5px 0;
    line-height: 1;
}

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=file], select {
    background: rgb(238,238,238);
    border: none;
    font-weight: bold;
    width: 100%;
}

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], textarea {
    caret-color: var(--color-link);
}

input[type=text], input[type=email], input[type=password], input[type=submit], button, input[type=date], input[type=number], input[type=file], textarea, select {
    font-family: 'DM Sans', sans-serif;
    font-size: 12pt;
    border: none;
    padding: 10px 20px;
}

input[type=file] {
    display: block;
}

textarea {
    margin-top: 10px;
    width: 100%;
    min-height: 100px;
    max-height: 200px;
    background-color: rgb(240,240,240);
    border-radius: 25px;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(140,140,140);
    font-weight: normal;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(140,140,140);
    font-weight: normal;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: rgb(140,140,140);
    font-weight: normal;
}

@-webkit-keyframes autofill {
    0%,100% {
        color: inherit;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}


.smaller {
    font-size: calc(0.7 * 1em) !important;
}

@media only screen and (max-width:585px) {
    h1.smaller {
        font-size: 24pt !important;
        font-size: min(6vw, 24pt) !important;
    }
}
@media only screen and (min-width:586px) {
    h1.smaller {
        font-size: 28pt !important;
        font-size: min(6vw, 28pt) !important;
    }
}
@media only screen and (min-width:1160px) {
    h1.smaller {
        font-size: 28pt !important;
    }
}


.alert {
    position: relative;
    color: black !important;
}

.alert .message {
    border-radius: 5px;
    padding: 8px 35px;
    font-size: 10pt;
    font-weight: 500;
}

.alert .message pre {
    display: inline;
}

.alert-error .message {
    background-color: rgb(255,171,171);
}
.alert-success .message {
    background-color: rgb(140,244,206);
}
.alert-info .message {
    background-color: rgb(137,195,234);
}
.alert-warning .message {
    background-color: rgb(255,221,93);
}

.alert .arrow {
    position: relative;
    left: 10px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}

.alert-error .arrow {
    border-bottom: 9px solid rgb(255,171,171);
}
.alert-success .arrow {
    border-bottom: 9px solid rgb(140,244,206);
}
.alert-info .arrow {
    border-bottom: 9px solid rgb(137,195,234);
}
.alert-warning .arrow {
    border-bottom: 9px solid rgb(255,221,93);
}


.img {
    background: center center no-repeat rgba(0,0,0,0);
    background-size: cover;
}

.button-re {
    position: relative;
    display: inline-block;
    font-size: 10.5pt;
    font-size: min(4.5vw, 10.5pt);
    margin-top: 25px;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: bold;
}
.button-re:hover {
    text-decoration: none;
}

.button-re img {
    height: calc(0.5 * 1em);
    opacity: 0.4;
    margin-left: 0.5em;
}

.button-re.gradient img,
#mobile-menu-ul li img
{
    height: calc(0.6 * 1em);
    opacity: 1;
    margin-left: .5em;
}

.button-re.gradient:hover {
    animation-name: gradient-animation;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.button-re.centered {
    left: 50%;
    transform: translateX(-50%);
}

.button-re.alt {
    color: rgb(27,27,27);
    border: 1px solid rgb(127,127,127);
}

@keyframes button-alt-animation {
    from {background-color: transparent;}
    to {background-color: rgb(244,243,243);}
}

.button-re.alt:hover {
    animation-name: button-alt-animation;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}


.gradient {
    color: white;
    background: var(--gradient-color-1);
    background: linear-gradient(90deg, var(--gradient-color-1) 0%, var(--gradient-color-2) 100%);
}

@keyframes gradient-animation {
    from {background: linear-gradient(90deg, var(--gradient-color-1) 0%, var(--gradient-color-2) 100%);}
    to {background: linear-gradient(90deg, var(--gradient-color-2) 0%, var(--gradient-color-1) 100%);}
}

.container-main {
    margin: 0 auto;
}

@media only screen and (min-width:1160px) {
    .container-main, .box-centered {
        min-width: 1140px;
        max-width: 1400px;
    }

    .box-centered {
        margin: auto;
    }
}

.container-main > .alert {
    margin: 20px 0;
}
.container-main > .alert .message {
    font-size: 12pt;
}

.container-main > .alert .arrow {
    display: none;
}


header {
    background-color: rgb(37,22,55);
}

header .box-centered {
    position: relative;
}

@media only screen and (max-width:585px) {
    header .box-centered {
        height: 99px;
        background-image: url("../img/header320.png");
        background-position: 46.7% bottom;
    }
}
@media only screen and (min-width:586px) {
    header .box-centered {
        height: 143px;
        background-image: url("../img/header.png");
        background-position: 44.5% bottom;
    }

    header .box-centered > div:first-child {
        height: 9px;
        background-color: white;
        margin: 0 27px;
    }
}
@media only screen and (min-width:1160px) {
    header .box-centered > div:first-child {
        margin: 0 calc(35px + 65 * var(--ratio_1160-1400));
    }
}


#mobile-menu {
    position: absolute;
    z-index: 3;
}

#mobile-menu .button {
    background-color: rgb(219, 21, 54);
    border-radius: 50%;
    padding: 9px;
    display: inline-block;
}

@media only screen and (max-width:585px) {
    #mobile-menu .button {
        width: 50px;
        height: 50px;
        margin-top: 25px;
        margin-left: 15px;
    }
}

@media only screen and (min-width:586px) {
    #mobile-menu .button {
        width: 55px;
        height: 55px;
        margin-top: 35px;
        margin-left: 27px;
        cursor: pointer;
    }
}

@media only screen and (min-width:1160px) {
    #mobile-menu {
        display: none;
    }
}


#mobile-menu .button img {
    display: block;
}

#mobile-menu-back {
    float: right;
    top: 47px;
    position: relative;
    right: 25px;
    cursor: pointer;
    display: none;
    width: 30px;
}

#mobile-menu-menu {
    display: none;
    position: absolute;
    width: 30vw;
    width: min(100vw, max(290px, 30vw));
    background-color: rgb(86,0,53);
    top: 0;
    left: 0;
}

#mobile-menu-menu::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/img/liverbird.svg");
    background-size: 350px;
    background-position: 0px 100px;
    background-repeat: no-repeat;
    opacity: 0.2;
    pointer-events: none;
}

#mobile-menu-content {
    font-size: 11pt;
    color: white;
    font-weight: bold;
    margin-top: 10px;
}

#mobile-menu-content .user-panel {
    margin: 0 10px 0 28px;
}

#mobile-menu-ul {
    margin: 0;
    padding: 0;
    user-select: none;
    position: relative;
}

#mobile-menu-ul li {
    padding: 2px 20px;
}

#mobile-menu-menu .button {
    padding: 17px;
}


#mobile-menu-ul li span, #mobile-menu-ul li a {
    display: block;
    width: 100%;
    padding: 10px 20px;
}
#mobile-menu-ul li span:hover, #mobile-menu-ul li a:hover {
    background-color: var(--color-link);
    border-radius: 25px;
    cursor: pointer;
    text-decoration: none;
}

#mobile-menu-ul .submenu {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgb(86,0,53);
    min-height: 100%;
    margin-left: -20px;
}

#mobile-menu-ul .submenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 40px 0;
}

#mobile-menu-ul .submenu ul li {
    padding: 2px 20px;
}


#logo-player {
    position: absolute;
    object-fit: cover;
    object-position: center top;
}

@media only screen and (max-width:585px) {
    #logo-player {
        top: 0px;
        left: calc(44.5% + 10px);
        height: calc(100% );
    }
}
@media only screen and (min-width:586px) {
    #logo-player {
        left: calc(44.5% - 160px);
        height: 134px;
        top: 9px;
    }
}

#logo-site {
    position: absolute;
}

@media only screen and (max-width:585px) {
    #logo-site {
        height: 38px;
        top: 34px;
        left: 27%;
    }
}
@media only screen and (min-width:586px) {
    #logo-site {
        height: 49px;
        top: 53px;
        left: calc(44.5% + 22px);
    }
}


@media only screen and (min-width:860px) {
    #page-content {
        display: flex;
        flex-direction: row;
    }

    main {
        flex-grow: 1;
    }
}


#below-header {
    display: flex;
    background-color: white;
    justify-content: space-between;
    padding: 0 calc(27 * var(--ratio_320-586));
}

@media only screen and (max-width:585px) {
    #below-header {
        margin-bottom: 10px;
    }
}
@media only screen and (min-width:586px) {
    #below-header {
        margin-bottom: 14px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}
@media only screen and (min-width:1160px) {
    #below-header {
        margin-bottom: 20px;
        padding-left: 0;
        padding-right: 0;
    }
}

#next-game {
    width: 100%;
    max-width: 586px;
    padding: 8px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

@media only screen and (max-width:1159px) {
    #next-game {
        margin: auto;
    }

    #commercials, #online-and-social {
        display: none;
    }
}
@media only screen and (min-width:1160px) {
    #commercials, #online-and-social {
        width: 25%;
        display: flex;
        align-items: center;
    }

    #commercials {
        margin: 0 0 0 calc(25px + 65 * var(--ratio_1160-1400));
        list-style-type: none;
        padding: 0;
    }
    #online-and-social {
        justify-content: flex-end;
        margin-right: 25px;
    }

    #online-and-social .separator {
        width: 1px;
        margin: 0 30px;
        border-right: 1px solid rgb(238,238,238);
    }

    #commercials li a {
        text-transform: uppercase;
        font-size: 10pt;
        font-weight: bold;
        padding: 2px 10px;
        border-right: 1px solid rgb(238,238,238);
    }
    #commercials li:last-child a {
        border-right: none;
    }

    #online-label {
        text-transform: uppercase;
        display: block;
        font-size: 7.5pt;
        color: rgb(140,140,140);
    }

    #online-count {
        font-size: 12pt;
        font-weight: bold;
    }
}

#next-game > div:nth-child(2) {
    text-align: center;
}


#next-game .home, #next-game .away {
    width: 40%;
    display: flex;
    align-items: center;
}

#next-game .home {
    justify-content: flex-end;
}
#next-game .away {
    justify-content: flex-start;
}

@media only screen and (max-width:499px) {
    #next-game .home, #next-game .away {
        flex-direction: column;
    }
}
@media only screen and (min-width:500px) {
    #next-game .home, #next-game .away {
        flex-direction: row;
    }

    #next-game .away .game-team {
        margin-left: 18px;
    }
    #next-game .home .game-team {
        margin-right: 18px;
    }

    #next-game .home img {
        order: 2;
    }
}

@media only screen and (max-width:499px) {
    #next-game img {
        max-width: 40px;
        max-height: 40px;
    }
}
@media only screen and (min-width:500px) {
    #next-game img {
        max-width: 50px;
        max-height: 50px;
    }
}
@media only screen and (min-width:860px) {
    #next-game img {
        max-width: 55px;
        max-height: 55px;
    }
}

.game-team {
    color: rgb(14,14,14);
    font-weight: bold;
    text-align: center;
    font-size: 13pt;
    font-size: min(4.5vw, 13pt);
}

.game-datetime {
    color: rgb(140,140,140);
    text-transform: uppercase;
}

#next-game .game-datetime, #column-right .game-datetime {
    font-size: 7.5pt;
}


.game-result {
    display: inline-block;
    color: rgb(14,14,14);
    font-weight: 500;
    border-radius: 5px;
    background-color: rgb(234,234,234);
    text-align: center;
    padding: 6px 8px;
    margin-top: 8px;
}

#next-game .game-result, #column-right .game-result {
    font-size: 11pt;
}


.main-news {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(6px + 15 * var(--ratio_320-586));
}

@media only screen and (min-width:1160px) {
    .main-news {
        flex-direction: row;
        padding-bottom: 5px;
    }
}

#main-news, #news-and-aside_news, main#not-a-main-page {
    background-color: white;
    padding-left: calc(27 * var(--ratio_320-586));
    padding-right: calc(27 * var(--ratio_320-586));
    overflow: hidden;
}
@media only screen and (min-width:860px) {
    #main-news, #news-and-aside_news, main#not-a-main-page {
        flex-grow: 1;
        padding-left: calc(27px + 8 * var(--ratio_860-1160));
        padding-right: calc(27px + 8 * var(--ratio_860-1160));
    }
}
@media only screen and (min-width:1160px) {
    #news-and-aside_news {
        padding-left: 0;
        padding-right: 0;
    }

    #main-news, #news-and-aside, main#not-a-main-page {
        padding-left: calc(35px + 65 * var(--ratio_1160-1400));
        padding-right: calc(35px + 15 * var(--ratio_1160-1400));
    }
}


#main-news .img {
    position: relative;
    height: 30vw;
    height: max(173px, 30vw);
    width: 100%;
}

@media only screen and (min-width:1160px) {
    #main-news .img {
        height: calc(268px + 32 * var(--ratio_1160-1400));
        width: 60%;
        flex-shrink: 0;
    }
}

#main-news .arrow {
    width: 0;
    height: 0;
    position: absolute;
}

@media only screen and (max-width:1159px) {
    #main-news .arrow {
        left: 20px;
        bottom: 0px;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid white;
    }
}

@media only screen and (min-width:1160px) {
    #main-news .arrow {
        border-top: 20px solid transparent;
        border-right: 20px solid white;
        border-bottom: 20px solid transparent;
        right: 0px;
        top: 60px;
    }
}


#main-news .content {
    color: rgb(14,14,14);
}

@media only screen and (max-width:1159px) {
    #main-news .content {
        margin-left: calc(15px - 15 * var(--ratio_320-586));
        margin-right: calc(15px - 15 * var(--ratio_320-586));
        margin-top: 10px;
    }
}
@media only screen and (min-width:1160px) {
    #main-news .content {
        margin: 40px 0 0 40px;
    }
}

#main-news h3 {
    font-size: 24pt;
    font-size: min(6vw, 24pt);
    font-weight: 500;
}

@media only screen and (max-width:1159px) {
    #main-news h3 {
        margin: 5px 0 0 0;
    }
}
@media only screen and (min-width:1160px) {
    #main-news h3 {
        margin: 15px 0;
    }
}

#main-news .comments-count {
    color: rgb(140,140,140);
    font-size: 11pt;
    font-weight: normal;
}

#main-news .footer {
    color: rgb(140,140,140);
    font-size: 9pt;
}

@media only screen and (max-width:1159px) {
    #main-news .footer {
        margin-top: 10px;
    }
}

#breaking-news {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 9pt;
    padding: 2px 10px;
    border-radius: 4px;
}


#news-and-aside {
    display: flex;
}
@media only screen and (max-width:1159px) {
    #news-and-aside {
        flex-direction: column;
    }
}
@media only screen and (min-width:1160px) {
    #news-and-aside {
        flex-direction: row;
        margin-bottom: 0;
        background-color: white;
        padding-top: 35px;
    }
}

#news-and-aside_news {
    margin-bottom: 13px;
}
@media only screen and (max-width:585px) {
    #news-and-aside_news {
        padding-top: calc(10px + 5 * var(--ratio_320-586));
    }
}
@media only screen and (min-width:586px) {
    #news-and-aside_news {
        padding-top: 15px;
    }
}
@media only screen and (min-width:1160px) {
    #news-and-aside_news {
        padding-top: 0;
    }
}


#col-mid, #column-right, #col-right-x {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 13px;
}

@media only screen and (max-width:859px) {
    #col-mid, #column-right {
        margin: 0 13px;
    }

    #col-mid {
        margin-bottom: 13px;
    }
}
@media only screen and (min-width:860px) {
    #col-mid, #column-right {
        margin: 0 0 0 10px;
    }
}
@media only screen and (min-width:1160px) {
    #col-mid {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: start;
        flex-shrink: 0;
        margin: 0 0 0 30px;
        width: calc(230px + 50 * var(--ratio_1160-1400));
        background-color: white;
    }
}

@media only screen and (min-width:1160px) {
    #col-mid {
        row-gap: 20px;
    }
}

#col-mid .content {
    padding: 25px;
}


@media only screen and (max-width:499px) {
    .x-box {
        width: 100%;
    }
}
@media only screen and (min-width:500px) {
    .x-box {
        width: calc(50% - 5px);
    }
}
@media only screen and (min-width:1160px) {
    .x-box {
        width: 100%;
    }
}

#forum > div:first-of-type > span {
    color: rgb(14,14,14);
    display: inline-block;
    padding: 18px 0 15px 0;
    width: 50%;
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
    text-transform: uppercase;
}

@media only screen and (max-width:1159px) {
    #forum, #forum > div:first-of-type > span {
        background-color: white;
    }
    #forum > div:first-of-type {
        background-color: rgb(238,239,240);
    }
}
@media only screen and (min-width:1160px) {
    #forum, #forum > div:first-of-type > span {
        background-color: rgb(238,239,240);
    }
    #forum > div:first-of-type {
        background-color: white;
    }
}

#forum .content ul {
    color: rgb(24,24,24);
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 10.5pt;
}

#forum .content ul li a {
    border-bottom: 1px solid rgb(232,232,232);
    padding: 7px 5px;
    width: 100%;
    display: inline-block;
}
#forum .content ul li:last-child a {
    border-bottom: none;
}
#forum .content ul li a:hover {
    background-color: rgb(232,232,232);
}

#forum .content .button-re {
    color: rgb(27,27,27);
    border: 1px solid rgb(127,127,127);
}

@keyframes forum-button-animation {
    from {background-color: transparent;}
    to {background-color: rgb(232,232,232);}
}

#forum .content .button-re:hover {
    animation-name: forum-button-animation;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

#poll {
    position: relative;
    overflow: hidden;
}

#poll.active {
    background-color: rgb(248,234,80);
}
#poll.inactive {
    padding-bottom: 40px;
}
@media only screen and (max-width:1159px) {
    #poll.inactive {
        background-color: white;
    }
}
@media only screen and (min-width:1160px) {
    #poll.inactive {
        background-color: rgb(238,239,240);
    }
}

#poll .bar {
    top: 0;
    left: 28px;
    width: 40px;
    height: 4px;
    background-color: rgb(14,14,14);
    position: absolute;
}

#poll .title {
    font-size: 13.5pt;
    font-weight: bold;
    color: rgb(14,14,14);
    padding: 20px 25px 15px 28px;
}

#poll.active .title {
    border-bottom: 1px solid rgb(230,214,38);
}
#poll.inactive .title {
    border-bottom: 1px solid rgb(219,219,219);
}

#poll.inactive .answer-bar {
    height: 2px;
    background-color: rgb(226,226,226);
    margin-top: 3px;
}

#poll.inactive .answer-bar-result {
    height: 2px;
    background-color: rgb(246,33,83);
}

#poll.inactive > span:last-of-type {
    font-size: 8.5pt;
    color: rgb(140,140,140);
    margin: 0 25px 0 28px;
}

#poll ul {
    list-style-type: none;
    margin: 0;
    font-weight: bold;
    font-size: 10.5pt;
    color: rgb(31,25,14);
    position: relative; /* otherwise labels are rendered behind .circle */
}

#poll.active ul {
    padding: 15px 10px 0 10px;
}

#poll.inactive ul {
    padding: 0;
    margin: 10px 25px 10px 28px;
}

#poll.inactive ul li {
    padding: 10px 0 5px 0;
}

#poll.inactive ul li .answer-result {
    float: right;
}

#poll.active ul li input[type=radio] {
    position: relative;
    margin: 0 20px 0 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 10px;
    -webkit-appearance: none;
    cursor: pointer;
}
#poll.active ul li label {
    cursor: pointer;
    padding: 3px 10px 3px 18px;
    width: 100%;
    display: block;
    border-radius: 10px;
}
#poll.active ul li label:hover {
    background-color: rgb(243,228,58);
}

#poll.active ul li input[type=radio]:after {
    position: relative;
    border-radius: 10px;
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#poll.active ul li input[type=radio]:checked:after {
    background-color: rgb(13,36,251);
}

#poll.active .button-re {
    color: rgb(27,27,27);
    border: none;
    background-color: white;
    margin-bottom: 25px;
}

@keyframes poll-button-animation {
    from {background-color: white;}
    to {background-color: rgb(232,232,232);}
}

#poll.active .button-re:hover {
    animation-name: poll-button-animation;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

#poll.active .circle {
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: -150px;
    right: -150px;
    border-radius: 160px;
    background-color: rgb(243,228,58);
}


#normal-news-list {
    margin-bottom: calc(30px + 20 * var(--ratio_320-586));
}

@media only screen and (min-width:1160px) {
    #normal-news-list .news {
        display: block;
    }
}

.news {
    overflow: hidden;
    position: relative;
}

#normal-news-list .news:first-child {
    margin-top: 0;
}

@media only screen and (max-width:585px) {
    #normal-news-list .news {
        margin-top: 10px;
    }
}
@media only screen and (min-width:586px) {
    #normal-news-list .news {
        margin-top: 8px;
    }
}
@media only screen and (min-width:1160px) {
    #normal-news-list .news {
        margin-top: 16px;
    }
}

.news .img {
    position: relative;
    overflow: hidden;
    float: left;
}

@media only screen and (max-width:585px) {
    .news .img {
        height: 22.5vw;
        width: 48%; /* 256/532 */
    }
}
@media only screen and (min-width:586px) {
    .news .img {
        height: 132px;
        width: 256px;
    }
}

.news .content {
    float: right;
    padding-top: calc(21 * var(--ratio_320-586));
    padding-left: calc(15px + 20 * var(--ratio_320-586));
    width: 52%;
}

@media only screen and (min-width:586px) {
    .news .content {
        width: calc(100% - 256px);
    }
}

.news h5 {
    margin: 0;
}

#normal-news-list .news h5,
#post-other-news-list .news h5
{
    font-weight: bold;
    font-size: 14pt;
    font-size: min(4vw, 14pt);
}


.news > .triangle {
    display: none;
}
.news > .comments-count {
    display: none;
}

.news h5 .comments-count, .news > .comments-count {
    color: rgb(140,140,140);
    font-size: 9pt;
}

.news h5 .comments-count {
    font-weight: normal;
}

@media only screen and (max-width:499px) {
    .news > .triangle {
        display: block;
        position: absolute;
        bottom: 0;
        right: 52%;
        font-size: 9pt;
        z-index: 2;
        width: 0;
        height: 0;
        border-bottom: 2.5em solid white;
        border-left: 2.5em solid transparent;
    }
    .news > .comments-count {
        display: block;
        position: absolute;
        bottom: 0;
        right: 52%;
        z-index: 2;
    }

    #normal-news-list .news h5 .comments-count {
        display: none;
    }
}

#main-news .content .lead,
.news .content .lead
{
    font-size: 10.5pt;
    margin: 10px 0;
    color: rgb(54,54,54);
    overflow: hidden;
}

#main-news .content .lead {
    max-height: 55px;
}

.news .content .lead {
    max-height: 36px;
}

@media only screen and (max-width:649px) {
    #main-news .content .lead,
    .news .content .lead
    {
        display: none;
    }
}

.news .footer {
    color: rgb(140,140,140);
    font-size: 9pt;
}

.news div.footer {
    margin-top: 10px;
}

@media only screen and (max-width:399px) {
    .news .footer .author, #main-news .footer .author {
        display: none;
    }
}


#other-news-list {
    margin-bottom: 40px;
    margin-left: calc(15px - 15 * var(--ratio_320-586));
}

#other-news-list .news {
    border-left: 4px solid rgb(227,36,90);
    margin-top: 14px;
    padding-left: 30px;
}

@media only screen and (max-width:1159px) {
    #other-news-list .news:nth-of-type(n+8) {
        display: none;
    }
}

#other-news-list h3 {
    color: rgb(151,151,151);
    font-size: 18pt;
    font-size: min(5.5vw, 18pt);
    font-weight: 500;
    margin: 0;
    margin-bottom: calc(20px + 5 * var(--ratio_320-586));
}

@media only screen and (min-width:1160px) {
    #other-news-list h3 {
        font-size: 19pt;
    }
}

#other-news-list .news h5 {
    font-size: 13pt;
    font-size: min(4vw, 13pt);
}

@media only screen and (min-width:586px) {
    #other-news-list .button-re {
        left: 100%;
        transform: translateX(-100%);
    }
}
@media only screen and (min-width:1160px) {
    #other-news-list .button-re {
        font-size: 13pt;
        padding: 12px 40px;
    }
}


#last-game-schedule {
    background-color: white;
}

#last-game-schedule-menu {
    padding: 10px 35px;
    background-color: rgb(15,15,15);
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#last-game-schedule-menu .item {
    font-size: 10pt;
    color: rgb(130,129,129);
    padding: 6px 0;
    cursor: pointer;
}
#last-game-schedule-menu .separator {
    border-right: 1px solid rgb(43,43,43);
    margin: 0 10px;
    width: 1px;
}

#last-game-schedule-menu .selected {
    font-size: 11pt;
    color: white;
    cursor: unset;
}

#last-game-schedule table {
    width: 100%;
    font-size: 10pt;
    color: rgb(148,148,148);
}

#last-game, #schedule {
    display: none;
}


@media only screen and (min-width:860px) {
    #column-right {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: unset;
        flex-shrink: 0;
        width: 274px;
        overflow: hidden;
    }
}

#column-right .box {
    background-color: white;
}

#column-right .box .content {
    padding-bottom: 25px;
}

#column-right .content {
    margin: 25px 35px 0px 35px;
    padding-bottom: 40px;
}

#table-top-scorers .content {
    padding-bottom: 20px;
}

#last-game table {
    margin-top: 10px;
    font-weight: bold;
    font-size: 14pt;
}

#last-game table tr:nth-child(2) td {
    padding-top: 7px;
}

#last-game table td:nth-child(1) {
    color: rgb(14,14,14);
    padding-right: 10px;
}
#last-game table td:nth-child(2) {
    color: var(--color-link);
    width: 20%;
    text-align: center;
}
#last-game table td:nth-child(3) {
    padding-left: 10px;
    vertical-align: middle;
}

#last-game table img {
    display: block;
    height: 70px;
    max-width: 70px;
}

#last-game p {
    text-align: justify;
    color: rgb(95,95,95);
    font-size: 10pt;
    border-top: 1px solid rgb(232,232,232);
    padding-top: 20px;
}



#schedule table td {
    padding: 0 3px;
    height: 3em;
    border-bottom: 1px solid rgb(232,232,232);
}

#schedule table td:first-child {
    font-size: 8.5pt;
}

#schedule table td:nth-child(2) {
    width: 30px;
}

#schedule table td:nth-child(2) img {
    max-height: 24px;
    display: block;
    margin: auto;
}

#schedule table td:nth-child(3) {
    color: rgb(14,14,14);
    font-weight: bold;
}
#schedule table td:nth-child(4) {
    font-weight: normal;
    color: rgb(148,148,148);
    font-size: 8pt;
}
#schedule table td:nth-child(5) {
    text-align: right;
}

#schedule table a {
    color: var(--color-link);
}


#last-game-schedule, #table-top-scorers {
    background-color: white;
}


.last-game-team-name span:nth-child(1) {
    display: none;
}

@media only screen and (min-width:360px) {
    .last-game-team-name span:nth-child(1) {
        display: inline;
    }
    .last-game-team-name span:nth-child(2) {
        display: none;
    }
}

@media only screen and (min-width:500px) {
    .last-game-team-name span:nth-child(1) {
        display: none;
    }
    .last-game-team-name span:nth-child(2) {
        display: inline;
    }
}

@media only screen and (min-width:670px) {
    .last-game-team-name span:nth-child(1) {
        display: inline;
    }
    .last-game-team-name span:nth-child(2) {
        display: none;
    }
}

@media only screen and (min-width:860px) {
    .last-game-team-name span:nth-child(1) {
        display: none;
    }
    .last-game-team-name span:nth-child(2) {
        display: inline;
    }
}


#column-right .user-panel {
    display: none;
}

@media only screen and (min-width:860px) {
    #mobile-menu .user-panel {
        display: none;
    }

    #column-right .user-panel {
        display: block;
        background-color: white;
        padding-top: 25px;
    }

    #column-right .user-panel .button-re {
        background: none;
        margin: 7px 0 10px 0;
        left: 100%;
        transform: translateX(-100%);
    }

    #column-right .user-not-logged-in > form,
    #column-right .user-not-logged-in .title
    {
        margin: 0 35px;
    }
}

.user-panel:hover .user-menu {
    display: block;
}

#column-right .user-panel input[type=text],
#column-right .user-panel input[type=password]
{
    background: none;
}

#mobile-menu input[type=text],
#mobile-menu input[type=password]
{
    background: none;
    color: white;
}

.user-logged-in {
    position: relative;
    margin: 0 12px;
}
#column-right .user-logged-in-content {
    padding: 0 23px;
}

.user-not-logged-in .title {
    padding-bottom: 3px;
    font-size: 12pt;
    font-weight: bold;
}
#column-right .user-not-logged-in .title {
    color: rgb(14,14,14);
    text-transform: uppercase;
}

.user-not-logged-in .horizontal {
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.user-not-logged-in .alert {
    margin: 8px 0;
}

.user-not-logged-in .horizontal img {
    height: 18px;
    margin-right: 5px;
}
#column-right .user-not-logged-in .horizontal  {
    border-bottom: 1px solid rgb(238,238,238);
}

.user-not-logged-in ul {
    list-style-type: none;
    margin: 0;
}
#column-right .user-not-logged-in ul {
    padding: 14px 0;
    color: rgb(140,140,140);
    font-size: 9pt;
    text-align: center;
    border-top: 3px solid rgb(250,249,251);
}

#column-right .user-not-logged-in ul li {
    display: inline;
    border-right: 1px solid rgb(233,233,233);
    padding: 0px 10px;
}
#column-right .user-not-logged-in ul li:first-child {
    padding-left: 0px;
}
#column-right .user-not-logged-in ul li:last-child {
    border-right: none;
    padding-right: 0px;
}


.user-logged-in-content {
    align-items: center;
    flex-direction: row;
    display: flex;
    margin-bottom: 25px;
}

.user-logged-in-content img {
    max-width: 60px;
    max-height: 60px;
    border-radius: 50%;
    object-fit: cover;
    width: 100%;
    height: 100%;
    outline-offset: 5px;
    outline-width: 1px;
    outline-style: solid;
}

#column-right .user-logged-in-content img {
    outline-color: #f3f3f3;
}
#mobile-menu .user-logged-in-content img {
    outline-color: #68204d;
}

.user-logged-in-content img[src$="user.svg"] {
    width: 20px;
}

.user-logged-in-content > *:nth-child(2) {
    flex-grow: 1;
    padding: 0 15px 0 20px;
}

.user-menu-arrow {
    padding: 15px 5px;
    cursor: pointer;
}

.user-menu-arrow > div:first-child {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}

#column-right .user-menu-arrow > div:first-child {
    border-top: 4px solid black;
}
#mobile-menu .user-menu-arrow > div:first-child {
    border-top: 4px solid white;
}

.user-menu {
    display: none;
    position: absolute;
    width: 100%;
    top: 100%;
    z-index: 2;
}

#mobile-menu .user-menu {
    color: black;
}

.user-menu .arrow {
    position: relative;
    left: 83%;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid rgb(238,239,240);
}

.user-menu ul {
    width: 100%;
    list-style-type: none;
    background-color: rgb(238,239,240);
    margin: 0;
    padding: 15px 0 35px 0;
    font-weight: 500;
    font-size: 10.5pt;
}
.user-menu ul li {
    padding: 2px 20px;
}
.user-menu ul li a {
    padding: 8px 20px;
    display: block;
    border-radius: 25px;
}
.user-menu ul li a:hover {
    background-color: rgb(224,226,228);
    text-decoration: none;
}

.user-label {
    color: rgb(140,140,140);
    font-size: 7.5pt;
    text-transform: uppercase;
}

.user-nickname {
    font-size: 12pt;
    font-weight: bold;
}

@media only screen and (max-width:1159px) {
    .show-on-screen-desktop-wide {
        display: none !important;
    }
}
@media only screen and (max-width:859px) {
    .show-on-screen-desktop {
        display: none !important;
    }
}
@media only screen and (min-width:860px) {
    .show-on-screen-mobile {
        display: none !important;
    }
}


@media only screen and (max-width:499px) {
    #last-game-schedule, #table-top-scorers, #column-right .social {
        width: 100%;
    }
}
@media only screen and (min-width:500px) {
    #last-game-schedule, #table-top-scorers, #column-right .social {
        width: calc(50% - 5px);
    }
}
@media only screen and (min-width:860px) {
    #last-game-schedule, #table-top-scorers, .user-panel, #column-right .social {
        width: 100%;
    }
}


#table-top-scorers-menu {
    text-transform: uppercase;
    overflow: hidden;
    font-weight: bold;
    background-color: rgb(238,238,238);
}

#table-top-scorers-menu .item {
    width: 50%;
    font-size: 10pt;
    color: rgb(14,14,14);
    background-color: rgb(244,243,243);
    float: left;
    padding: 18px 0 15px 0;
    text-align: center;
    position: relative;
    top: 4px;
    cursor: pointer;
}

#table-top-scorers-menu .selected {
    font-size: 12pt;
    background-color: white;
    top: 0;
    cursor: unset;
}

#table-top-scorers table {
    width: 100%;
    font-size: 10pt;
    color: rgb(148,148,148);
}

#table-top-scorers table tr:hover {
    background-color: rgb(247,247,247);
}

#table-top-scorers table td {
    border-bottom: 1px solid rgb(232,232,232);
    padding: 0 3px;
    height: 3em;
}

#league-table[data-short="1"] table tr:nth-child(n+7) {
    display: none;
}

#league-table table td:nth-child(2) {
    width: 30px;
    text-align: center;
}

#league-table table td:nth-child(2) img {
    max-height: 24px;
    display: block;
    margin: auto;
}

#league-table table td:nth-child(3) {
    width: 50%;
}

#league-table table td:nth-child(3), #table-top-scorers table td:nth-child(5) {
    font-weight: bold;
    color: rgb(18,18,18);
}
#league-table table td:nth-child(5) {
    text-align: right;
}

#league-table .more {
    margin-top: 20px;
    padding: 10px 0 5px 0;
}

#league-table .more img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    opacity: 0.2;
}
#league-table[data-short="0"] .more img {
    transform: translateX(-50%) rotate(180deg);
}

@keyframes league-table-more-animation {
    from {background-color: transparent;}
    to {background-color: rgb(244,243,243);}
}

#league-table .more:hover {
    animation-name: league-table-more-animation;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

#top-scorers {
    display: none;
}

#top-scorers table td:nth-child(2) {
    color: rgb(18,18,18);
}

#top-scorers table td:nth-child(3) {
    text-align: right;
    font-weight: bold;
    color: rgb(18,18,18);
}

@media only screen and (max-width:1159px) {
    .container-main.gallery {
        display: block;
        margin-top: 13px;
    }
    #col-mid .gallery {
        display: none;
    }
}
@media only screen and (min-width:1160px) {
    .container-main.gallery {
        display: none;
    }
    #col-mid .gallery {
        display: block;
        border-bottom: 1px solid rgb(232,232,232);
    }
}


.gallery .header {
    font-size: 12pt;
    background-color: rgb(19,19,19);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.container-main.gallery .header {
    padding: 0 calc(15px + 65 * var(--ratio_320-586));
}

#col-mid .gallery .header {
    flex-wrap: wrap;
    padding: 0 25px;
}

.gallery .header .separator {
    width: 30px;
}

.gallery .content {
    background-color: rgb(19,19,19);
}

.gallery .footer {
    background-color: white;
    padding: 15px;
}

.container-main.gallery .footer {
    margin: 0 calc(80 * var(--ratio_320-586));
}
.container-main.gallery .content {
    padding: 0 calc(80 * var(--ratio_320-586));
}

#col-mid .gallery .footer {
    margin: 0;
    padding: 15px 25px;
}

.gallery .header span:first-child {
    color: white;
    text-transform: uppercase;
    border-top: 4px solid rgb(247,48,75);
    font-weight: bold;
}

@media only screen and (max-width:585px) {
    .container-main.gallery .header span:first-child {
        padding: 20px 0;
    }
}
@media only screen and (min-width:586px) {
    .container-main.gallery .header span:first-child {
        padding: 25px 0 30px 0;
    }
}

#col-mid .gallery .header span:first-child {
    padding: 20px 0 5px 0;
    border-top-width: 5px;
}

.gallery .header span:last-child {
    color: rgb(168,168,168);
}

#col-mid .gallery .header span:last-child {
    font-size: 10pt;
    margin-bottom: 20px;
}

.gallery .content .img {
    width: 100%;
    height: 50vw;
    height: min(50vw, 700px);
    position: relative;
    display: block;
}

#col-mid .gallery .content {
    padding: 0 !important;
}

#col-mid .gallery .content .img {
    height: 210px;
}

.gallery-camera {
    font-weight: 500;
    display: block;
    display: flex;
    align-items: center;
}
.gallery-camera img {
    width: 22px;
    margin-right: 8px;
}


#articles {
    background-color: rgb(47,2,43);
    overflow: hidden;
}

#articles .box-centered {
    padding-bottom: 40px;
    padding-left: calc(27 * var(--ratio_320-586));
    padding-right: calc(27 * var(--ratio_320-586));
    color: white;
    overflow: hidden;
}

@media only screen and (min-width:1160px) {
    #articles .box-centered {
        padding-top: 50px;
        padding-bottom: 20px;
        padding-left: calc(35px + 65 * var(--ratio_1160-1400));
        padding-right: calc(35px + 65 * var(--ratio_1160-1400));
    }
}

#articles .box-centered > span:first-child {
    margin: 20px 0;
    font-size: 21pt;
    font-size: min(6vw, 21pt);
    font-weight: 500;
    display: block;
}

@media only screen and (min-width:1160px) {
    #articles .box-centered > span:first-child {
        margin: 0 0 35px 0;
        font-size: 26pt;
    }
}

#articles .button-re {
    border: 1px solid rgb(105,81,103);
}

@media only screen and (min-width:586px) {
    #articles .button-re {
        left: 100%;
        transform: translateX(-100%);
    }
}
@media only screen and (min-width:1160px) {
    #articles .button-re {
        right: 150px;
        top: -10px;
        font-size: 13pt;
        padding: 12px 40px;
        margin-top: 0;
        float: right;
        left: unset;
        transform: unset;
    }
}

@keyframes articles-button-animation {
    from {background-color: transparent;}
    to {background-color: rgb(80,43,77);}
}

#articles .button-re:hover {
    animation-name: articles-button-animation;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.article {
    float: left;
    width: calc(50% - 10px);
}
.article:nth-child(1) {
    margin-right: 20px;
}
.article:nth-child(n+3) {
    display: none;
}

@media only screen and (min-width:1160px) {
    .article {
        float: left;
    }
    .article:nth-child(1) {
        width: 37%;
        margin-right: 34px;
        max-width: 430px;
    }
    .article:nth-child(n+2) {
        width: 25%;
        margin-right: 16px;
        max-width: 285px;
    }
    .article:nth-child(n+3) {
        display: unset;
    }
}

.article .img {
    width: 100%;
    height: calc(110px + 120 * var(--ratio_320-586));
    position: relative;
    display: inline-block;
    overflow: hidden;
}

@media only screen and (min-width:1160px) {
    .article:nth-child(1) .img {
        height: 230px;
    }

    .article:nth-child(n+2) .img {
        height: 160px;
    }
}

.article h5 {
    font-weight: bold;
    font-size: 13pt;
    font-size: max(14pt, min(4.5vw, 13pt));
    margin: 10px 0;
}

@media only screen and (min-width:1160px) {
    .article:first-child h5 {
        font-size: 19pt;
    }
}

.article .author {
    color: rgb(96,87,95);
    font-size: 9pt;
}

#articles .content {
    display: flex;
    overflow: hidden;
}

.rotate180 {
    transform: rotate(180deg);
}


#banners {
    background-color: white;
    overflow: hidden;
}

#banners > div {
    padding: 10px 15px;
    max-width: 960px;
    margin: auto;
}

@media only screen and (max-width:585px) {
    #banners {
        padding: 13px 0;
    }
}
@media only screen and (min-width:586px) {
    #banners {
        padding: 25px;
    }
}
@media only screen and (min-width:1160px) {
    #banners {
        padding: 40px 95px;
    }
}


#pre-footer {
    background-color: rgb(11,11,11);
}

@media only screen and (min-width:1160px) {
    #pre-footer {
        margin-top: 0;
    }
}

#pre-footer .box-centered {
    padding: 30px 20px;
    display: flex;
}

@media only screen and (max-width:585px) {
    #pre-footer .box-centered {
        padding: 30px 20px 40px 20px;
        flex-direction: column;
    }
}
@media only screen and (min-width:586px) {
    #pre-footer .box-centered {
        padding: 63px calc(35px + 65 * var(--ratio_1160-1400));
        flex-direction: row;
    }
}

@media only screen and (max-width:585px) {
    #pre-footer .links {
        margin: 10px 10px 10px 20px;
    }
}
@media only screen and (min-width:586px) {
    #pre-footer .links {
        display: flex;
        width: 500px;
        flex-direction: row;
        justify-content: space-between;
        margin: auto;
        padding: 0 20px;
    }
}

#pre-footer .links ul {
    color: rgb(151,156,161);
    font-weight: bold;
    list-style-type: none;
    font-size: 11pt;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width:585px) {
    #pre-footer .links ul li {
        padding: 10px 0;
    }
}
@media only screen and (min-width:586px) {
    #pre-footer .links ul li {
        padding: 10px;
    }
}

footer {
    background-color: black;
    padding-bottom: 70px;
}

@media only screen and (min-width:760px) {
    footer {
        padding: 20px 0 25px 0;
    }
}

footer .box-centered {
    display: flex;
    overflow: hidden;
}

@media only screen and (max-width:759px) {
    footer .box-centered {
        flex-direction: column;
    }
}
@media only screen and (min-width:760px) {
    footer .box-centered {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 20px calc(35px + 65 * var(--ratio_1160-1400));
    }
}

#designed-by {
    font-size: 9pt;
    font-weight: bold;
    color: rgb(149,149,149);
    text-transform: uppercase;
    text-align: center;
}

@media only screen and (max-width:585px) {
    #designed-by {
        display: flex;
        flex-direction: column;
    }
}
@media only screen and (min-width:586px) {
    #designed-by span:first-child {
        margin-right: 15px;
    }
}
@media only screen and (min-width:1160px) {
    #designed-by {
        margin-bottom: 0;
    }
}

#designed-by a {
    color: white;
    font-size: 14pt;
    text-transform: none;
}

@media only screen and (max-width:585px) {
    #designed-by a {
        margin-top: 10px;
    }
}

#copyright {
    font-size: 9pt;
    color: rgb(99,101,104);
    margin: 20px 0 40px 0;
    text-align: center;
}

@media only screen and (min-width:760px) {
    #copyright {
        margin: 0;
    }
}

#copyright .separator {
    border-right: 1px solid rgb(49,49,49);
}

@media only screen and (max-width:585px) {
    #copyright .separator {
        margin: 0 10px;
    }
}
@media only screen and (min-width:586px) {
    #copyright .separator {
        margin: 0 20px;
    }
}

#copyright img {
    top: 1px;
    position: relative;
    opacity: 0.25;
}

@media only screen and (max-width:585px) {
    #copyright img {
        margin-right: 6px;
    }

    #logo-site-footer {
        height: 38px;
    }
}
@media only screen and (min-width:586px) {
    #copyright img {
        margin-right: 15px;
    }

    #logo-site-footer {
        height: 49px;
    }
}


.social-media {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
}
@media only screen and (min-width:586px) {
    #pre-footer .social-media {
        padding-top: 10px;
    }
}
@media only screen and (min-width:586px) and (max-width:859px) {
    #pre-footer .social-media {
        flex-direction: column;
        row-gap: 10px;
    }
}

header .social-media {
    margin-top: 20px;
    padding: 30px 40px 40px 40px;
    background-color: #370123;
    width: 100%;
    justify-content: space-between;
}

.social-media img {
    width: 18px;
}


.fancy_bgr > img {
    display: none;
}

@media only screen and (min-width:860px) {
    .fancy_bgr {
        position: relative;
        overflow: hidden;
    }

    .fancy_bgr > img {
        display: block;
        position: absolute;
    }
    .fancy_bgr > img:nth-child(1) {
        left: -5%;
        bottom: -585px;
        opacity: 0.2;
        width: 595px;
        height: 812px;
    }
    .fancy_bgr > img:nth-child(2) {
        left: 50%;
        bottom: -160px;
        opacity: 0.05;
        width: 873px;
        height: 417px;
    }
    .fancy_bgr > img:nth-child(3) {
        left: 10%;
        bottom: -160px;
        opacity: 0.7;
        width: 863px;
        height: 467px;
    }
    .fancy_bgr > img:nth-child(4) {
        left: 53%;
        bottom: -160px;
        opacity: 0.15;
        width: 200px;
        height: 293px;
    }
}

@media only screen and (max-width:1159px) {
    #trophies {
        display: none;
    }
}
@media only screen and (min-width:1160px) {
    #trophies {
        padding: 40px 0;
        background-color: rgb(243,243,243);
    }

    #trophies > div:first-of-type {
        display: flex;
        flex-direction: row;
        margin: auto;
        position: relative;
        width: 1080px;
    }

    #trophies > div:first-of-type > div {
        padding: 20px 25px;
        text-align: center;
        vertical-align: bottom;
        width: 14.28%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    #trophies > div:first-of-type > div:hover {
        background-color: white;
        border-radius: 5px;
        -webkit-box-shadow: 20px 20px 58px 2px rgba(0,0,0,0.14);
        -moz-box-shadow: 20px 20px 58px 2px rgba(0,0,0,0.14);
        box-shadow: 20px 20px 58px 2px rgba(0,0,0,0.14);
    }
    #trophies > div:first-of-type > div.gold:hover {
        -webkit-box-shadow: 20px 20px 58px 2px rgba(232,185,35,0.4);
        -moz-box-shadow: 20px 20px 58px 2px rgba(232,185,35,0.4);
        box-shadow: 20px 20px 58px 2px rgba(232,185,35,0.4);
    }

    #trophies h4 {
        color: rgb(148,148,148);
        font-size: 10pt;
        font-weight: normal;
        margin: 30px 0 20px 0;
        height: 25px;
    }
    #trophies span {
        color: rgb(14,14,14);
        font-size: 22pt;
        font-weight: bold;
        border-radius: 50%;
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-align: center;
        display: inline-block;
    }
    #trophies div.gold span {
        color: #e8b923;
    }

    #trophies > div:first-of-type > div:hover span {
        color: white;
        background: var(--gradient-color-1);
        background: linear-gradient(90deg, var(--gradient-color-1) 0%, var(--gradient-color-2) 100%);
    }
    #trophies > div:first-of-type > div.gold:hover span {
        background: #e8b923;
        background: linear-gradient(90deg, #e8b923 0%, #c48326 100%);
    }


    #ynwa {
        position: relative;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 calc(35px + 65 * var(--ratio_1160-1400));
    }

    #ynwa div:nth-child(2) {
        color: rgb(196,131,38);
        font-size: 18pt;
        text-align: center;
        font-family: 'Playfair Display', serif;
        letter-spacing: 2px;
        padding: 0 30px;
    }

    #ynwa div:nth-child(1),
    #ynwa div:nth-child(3)
    {
        flex-grow: 1;
        border-bottom: 1px solid rgb(228,228,228);
    }
}


.header-menu {
    color: white;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline-block;
    position: absolute;
    z-index: 3;
    display: none;
    bottom: 30px;
}

.header-menu .submenu .arrow {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid rgb(86,0,53);
}

@media only screen and (min-width:1160px) {
    .header-menu  {
        display: block;
    }

    .header-menu:first-of-type {
        left: 25px;
    }
    .header-menu:last-of-type {
        right: 25px;
    }

    .header-menu > li {
        display: inline-block;
        position: relative;
    }
    .header-menu > li > a, .header-menu > li > span {
        padding: 12px 12px 6px 12px;
        color: white;
        display: block;
        font-size: 11pt;
        font-weight: bold;
        border-bottom: 2px solid transparent;
        text-decoration: none;
        cursor: pointer;
    }
    .header-menu > li > a:hover, .header-menu > li > span:hover {
        border-bottom: 2px solid var(--color-link);
    }
    .header-menu > li > span a:hover {
        text-decoration: none;
    }

    .header-menu > li .submenu {
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 3;
        cursor: auto;
        overflow: hidden;
        height: 0;
        transform: translateY(10px);
        opacity: 0;
        will-change: transform, opacity;
    }

    .header-menu > li > span:hover .submenu {
        height: auto;
        transform: translateY(0px);
        opacity: 1;
        transition: transform 0.3s 0.3s, opacity 0.3s 0.3s;
    }

    .header-menu > li .submenu .arrow {
        position: absolute;
        top: 8px;
        left: 20px;
    }

    .header-menu > li .submenu .content {
        margin-top: 20px;
        padding: 30px 0 20px 0;
        background-color: rgb(86,0,53);
        overflow: hidden;
    }

    .header-menu > li .submenu ul {
        position: relative;
    }

    .header-menu > li .submenu ul {
        padding: 0;
        list-style-type: none;
        font-size: 10pt;
        text-transform: none;
    }

    .header-menu > li .submenu a {
        color: inherit;
        white-space: nowrap;
        padding: 8px 32px;
        width: 100%;
        display: block;
        font-weight: normal;
    }
    .header-menu > li .submenu a:hover {
        background-color: rgba(0,0,0,0.2);
    }

    .header-menu > li .submenu th {
        font-weight: bold;
        padding: 0;
        padding-bottom: 25px !important;
        white-space: nowrap;
        text-transform: uppercase;
    }

    .header-menu > li .submenu td, .header-menu > li .submenu th {
        vertical-align: top;
        font-size: 9pt;
    }

    .header-menu > li .submenu th {
        padding: 0 32px;
    }

    .header-menu > li .submenu td,
    .header-menu > li .submenu th
    {
        border-right: 1px solid rgb(119,90,102);
    }
    .header-menu > li .submenu td:last-child,
    .header-menu > li .submenu th:last-child
    {
        border-right: none;
    }

    .header-menu > li .submenu td:first-child {
        padding-left: 0;
    }
    .header-menu > li .submenu td:last-child {
        padding-right: 0;
    }
}


#post-other-news-list {
    padding: 10px 13px;
    padding-bottom: calc(10px + 50 * var(--ratio_586-900)); /* not 70 on purpose */
    text-align: center;
}

@media only screen and (min-width:900px) {
    #post-other-news-list {
        padding-bottom: 120px;
    }
}

#post-other-news-list h2 {
    font-weight: 500;
    margin: 10px 0 20px 0;
    text-align: left;
}

@media only screen and (max-width:319px) {
    #post-other-news-list h2 {
        font-size: 16pt;
    }
}
@media only screen and (min-width:320px) {
    #post-other-news-list h2 {
        font-size: 16pt;
        font-size: max(5vw, 16pt);
    }
}
@media only screen and (min-width:586px) {
    #post-other-news-list h2 {
        font-size: 26pt;
        margin: 30px 0 20px 0;
    }
}
@media only screen and (min-width:900px) {
    #post-other-news-list h2 {
        margin: 60px 100px 40px 100px;
    }
}

#post-other-news-list .content {
    position: relative;
    z-index: 3;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#post-other-news-list .news {
    margin-right: 15px;
    margin-bottom: 20px;
    width: 300px;
    text-align: left;
}

#post-other-news-list .news:nth-of-type(n+5) {
    display: none;
}
@media only screen and (min-width:760px) {
    #post-other-news-list .content {
        max-width: 800px;
    }
    #post-other-news-list .news:nth-of-type(n) {
        display: block;
    }
    #post-other-news-list .news:nth-of-type(n+5) {
        display: none;
    }
}
@media only screen and (min-width:1040px) {
    #post-other-news-list .content {
        max-width: 960px;
    }
    #post-other-news-list .news:nth-of-type(n) {
        display: block;
    }
    #post-other-news-list .news:nth-of-type(n+7) {
        display: none;
    }
}
@media only screen and (min-width:1360px) {
    #post-other-news-list .content {
        max-width: unset;
    }
    #post-other-news-list .news:nth-of-type(n) {
        display: block;
    }
}

@media only screen and (max-width:585px) {
    #post-other-news-list .news h5 {
        margin: 12px 0 8px 0;
        font-size: 14pt;
        font-size: min(5vw, 14pt);
    }
}
@media only screen and (min-width:586px) {
    #post-other-news-list .news h5 {
        margin: 18px 0 10px 0;
    }
}

#post-other-news-list .news .img {
    height: 160px;
    width: 300px;
    float: none;
    display: inline-block;
}


#news {
    padding-bottom: 40px;
    margin-right: calc(90 * var(--ratio_1160-1400));
}

@media only screen and (min-width:1160px) {
    #news {
        padding-bottom: 70px;
    }
}


#news .img,
#page .img
{
    width: 100%;
    height: 440px;
}

@media only screen and (max-width:585px) {
    #news .img,
    #page .img
    {
        height: 60vw;
    }
}
@media only screen and (min-width:586px) {
    #news .img,
    #page .img
    {
        height: calc(330px + 110 * var(--ratio_586-1160));
    }
}

#news .img > div,
#page .img > div
{ /*white rect*/
    background-color: white;
    position: relative;
}

@media only screen and (max-width:585px) {
    #news .img > div,
    #page .img > div
    {
        height: 20px;
        top: calc(100% - 20px);
        margin-right: 15px;
    }
}
@media only screen and (min-width:586px) {
    #news .img > div,
    #page .img > div
    {
        height: 42px;
        top: calc(100% - 42px);
        margin-right: 28px;
    }
}
@media only screen and (min-width:1160px) {
    #news .img > div,
    #page .img > div
    {
        height: 65px;
        top: calc(100% - 65px);
        margin-right: 60px;
    }
}


#news hr {
    border: 0;
    height: 1px;
    background: rgb(245,245,245);
    margin-top: calc(5px + 25 * var(--ratio_586-1160));
    margin-bottom: calc(15px + 40 * var(--ratio_586-1160));
}

@media only screen and (min-width:586px) {
    #news hr {
        height: 2px;
    }
}

#news h1 {
    margin-top: 0;
}

@media only screen and (max-width:585px) {
    #news h1 {
        font-size: 16pt;
        font-size: max(5vw, 16pt);
        font-weight: bold;
    }
}
@media only screen and (min-width:586px) {
    #news h1 {
        font-size: 34pt;
        font-size: min(5vw, 34pt);
    }
}
@media only screen and (min-width:1160px) {
    #news h1 {
        font-size: 34pt;
    }
}

#news > .padded {
    padding: 0 calc(10px - 10 * var(--ratio_320-586));
    margin: 0 calc(60 * var(--ratio_586-1160));
}

@media only screen and (min-width:320px) {
    #news > .padded {
        font-size: 12pt;
    }
}
@media only screen and (min-width:586px) {
    #news > .padded {
        font-size: 13pt;
    }
}
@media only screen and (min-width:1160px) {
    #news > .padded {
        font-size: 13.5pt;
    }
}

#news > .content {
    color: rgb(54,54,54);
}

@media only screen and (max-width:585px) {
    #news > .content {
        line-height: 1.3;
    }
}
@media only screen and (min-width:586px) {
    #news > .content {
        line-height: 1.5;
    }
}

#news > .content > img {
    display: block;
    margin: auto;
}

#news > .footer {
    display: flex;
}

@media only screen and (max-width:585px) {
    #news > .footer {
        margin: 30px 0;
        flex-direction: column;
    }
}
@media only screen and (min-width:586px) {
    #news > .footer {
        margin: 40px 0;
        flex-direction: row;
    }
}

#news > .footer .item {
    display: flex;
    align-items: center;
    background-color: rgb(247,247,247);
    flex-grow: 1;
}

@media only screen and (max-width:585px) {
    #news > .footer .item {
        padding: 5px 20px;
        margin-top: 5px;
    }
}
@media only screen and (min-width:586px) {
    #news > .footer .item {
        padding: 10px 10px 10px 7%;
        margin-right: 8px;
    }

    #news > .footer .item:last-of-type {
        margin-right: 0;
    }
}

#news > .footer .item > div:first-of-type {
    width: 58px;
    margin-right: 15px;
}

@media only screen and (max-width:585px) {
    #news > .footer .item > div:first-of-type {
        display: flex;
        flex-direction: row;
        align-items: baseline;
    }
}

#news > .footer .item img {
    display: block;
    max-width: 58px;
    border-radius: 50%;
    outline-offset: 5px;
    outline-color: #e5e5e5;
    outline-width: 1px;
    outline-style: solid;
}

#news > .footer .item > div {
    margin: 10px 0;
}

#news > .footer .item > div > div:first-of-type {
    font-size: 9pt;
    color: rgb(145,145,145);
    text-transform: uppercase;
}
@media only screen and (max-width:585px) {
    #news > .footer .item > div > div:first-of-type {
        font-size: 7.5pt;
        flex-shrink: 0;
    }
}

#news > .footer .item > div > div:last-of-type {
    font-size: 13pt;
    color: rgb(14,14,14);
    font-weight: bold;
}
@media only screen and (max-width:585px) {
    #news > .footer .item > div > div:last-of-type {
        font-size: 11pt;
    }
}

.news-body {
    text-align: justify;
}

.news-body img {
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.news-body iframe {
    margin: auto;
    display: block;
    width: 100%;
}


#comments {
    margin: 30px 0;
    line-height: 1;
    display: inline-block;
    width: 100%;
}

#comments > h3:first-of-type {
    font-weight: bold;
    border-bottom: 1px solid rgb(206,11,40);
    display: inline-block;
    margin: 0 0 30px 0;
    color: rgb(14,14,14);
}

@media only screen and (max-width:585px) {
    #comments > h3:first-of-type {
        font-size: 13pt;
        padding: 0px 5px 5px 5px;
    }
}
@media only screen and (min-width:586px) {
    #comments > h3:first-of-type {
        font-size: 14pt;
        padding: 0px 15px 5px 15px;
    }
}

#comments-base {
    display: flex;
    flex-direction: column-reverse;
}

#comments-list {
    display: flex;
    flex-direction: column-reverse;
}

.subcomments {
    margin-left: 68px;
    display: none;
}

#uncollapse-all {
    font-size: 11pt;
    color: rgb(145,145,145);
    margin-left: 40px;
    display: inline-block;
}

.fake-link {
    cursor: pointer;
    user-select: none;
}
.fake-link:hover {
    text-decoration: underline;
}

.uncollapse-comments,
.comment-reply
{
    white-space: nowrap;
}

.uncollapse-comments > span:last-of-type,
#uncollapse-all > span:last-of-type
{
    display: none;
}
.uncollapse-comments[data-is-collapsed="0"] > span:first-of-type,
#uncollapse-all[data-is-collapsed="0"] > span:first-of-type
{
    display: none;
}
.uncollapse-comments[data-is-collapsed="0"] > span:last-of-type,
#uncollapse-all[data-is-collapsed="0"] > span:last-of-type
{
    display: block;
}

.uncollapse-comments img,
#uncollapse-all img
{
    margin-right: 0.7em;
    height: 0.7em;
    opacity: 0.5;
}
.uncollapse-comments[data-is-collapsed="0"] img,
#uncollapse-all[data-is-collapsed="0"] img
{
    transform: rotate(180deg);
}

.comment {
    display: flex;
    padding: 15px 0 13px 0;
    border-top: 1px solid rgb(243,243,243);
}

.comment > div:first-of-type {
    width: 48px;
    margin-right: 20px;
    flex-shrink: 0;
}

.comment > div:nth-of-type(2) {
    flex-grow: 1;
}

.comment > div:first-of-type > img {
    border-radius: 50%;
    max-width: 48px;
    max-height: 48px;
    outline-offset: 5px;
    outline-color: #f3f3f3;
    outline-width: 1px;
    outline-style: solid;
}
.comment > div:first-of-type > img[src$="user.svg"] {
    width: 20px;
    margin: auto;
    display: block;
}

.comment .header,
.comment .footer
{
    font-size: 9pt;
    color: rgb(145,145,145);
}

.comment .footer {
    display: flex;
    flex-wrap: wrap;
}

.comment .header > *,
.comment .footer > *
{
    padding: 3px 8px;
}

.comment .footer > * {
    border-right: 1px solid rgb(233,233,233);
}

.comment .header > *:first-child,
.comment .footer > *:first-child
{
    padding-left: 0;
}
.comment .header > *:last-child,
.comment .footer > *:last-child
{
    padding-right: 0;
}

.comment .footer > *:last-child {
    border-right: none;
}

.comment .footer img {
    border-right: none;
    padding-right: 0;
    opacity: 0.5;
}

.comment .footer img {
    filter: grayscale(1);
}

.comment .footer img.voted {
    opacity: 1;
    filter: none;
}

.comment .header .user {
    color: rgb(14,14,14);
    font-weight: 500;
    font-size: 12pt;
}

.comment .content {
    color: rgb(54,54,54);
    line-height: 1.4;
    margin: 8px 0 10px 0;
    word-break: break-word;
}

@media only screen and (max-width:585px) {
    .comment .content {
        font-size: 11pt;
    }
}
@media only screen and (min-width:586px) {
    .comment .content {
        font-size: 12pt;
    }
}

.comment-violation-message {
    font-style: italic;
}
.comment-violation-message.admin {
    font-style: normal;
    text-decoration: line-through;
}

.comment-link {
    color: rgb(220,220,220);
}
.comment-link:hover {
    color: rgb(200,200,200);
}


.form h3 {
    font-weight: bold;
    display: inline-block;
    margin: 0 0 10px 0;
    color: rgb(14,14,14);
}

@media only screen and (max-width:585px) {
    .form h3 {
        font-size: 13pt;
    }
}
@media only screen and (min-width:586px) {
    .form h3 {
        font-size: 14pt;
    }
}

.form .button-re {
    cursor: pointer;
}

@media only screen and (max-width:585px) {
    .form .button-re {
        font-size: 12pt;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media only screen and (min-width:586px) {
    .form .button-re {
        font-size: 13pt;
        left: 100%;
        transform: translateX(-100%);
    }
}

#comment-reply {
    padding-bottom: 0.5em;
    margin: 0 0 1.5em 0;
}

#add-comment {
    margin: 10px 0 15px 0;
}

#comments-list #add-comment {
    margin-left: 68px;
}
#comments-list .comment #add-comment,
#comments-list .subcomments #add-comment
{
    margin-left: 0;
    margin-top: 23px;
    margin-bottom: 2px;
}

#add-comment > h3:last-of-type,
#add-comment > .smaller > span:last-of-type,
#add-comment button:last-of-type
{
    display: none;
}
#add-comment[data-is-add="0"] > h3:first-of-type,
#add-comment[data-is-add="0"] > .smaller > span:first-of-type,
#add-comment[data-is-add="0"] button:first-of-type
{
    display: none;
}
#add-comment[data-is-add="0"] > h3:last-of-type,
#add-comment[data-is-add="0"] > .smaller > span:last-of-type,
#add-comment[data-is-add="0"] button:last-of-type
{
    display: block;
}


#page {
    padding-left: calc(5px - 5 * var(--ratio_320-586));
    padding-right: calc(5px - 5 * var(--ratio_320-586));
    color: rgb(54,54,54);
    line-height: 1.5;
    font-size: calc(11pt + 2 * var(--ratio_320-586));
    padding-bottom: 20px;
}

@media only screen and (min-width:586px) {
    #page {
        padding-bottom: 30px;
    }
}
@media only screen and (min-width:1160px) {
    #page {
        font-size: 13.5pt;
        margin: 50px 90px 0 60px;
        padding-bottom: 70px;
    }
}


#page h1, #page h2, #page h3, #page h4,
#news h1, #news h2, #news h3, #news h4
{
    font-weight: 500;
}

#news .content a,
#page a
{
    color: var(--color-link);
}

#page .footer a {
    color: inherit;
}

#page p {
    margin: 10px 0 25px 0;
}

#page form label {
    display: block;
    margin-top: min(5vw, 30px);
}

#page form .button-re {
    margin-top: min(5vw, 30px);
}


.table {
    line-height: 1;
    width: 100%;
}

@media only screen and (max-width:585px) {
    .table {
        margin-bottom: 30px;
    }
}
@media only screen and (min-width:586px) {
    .table {
        margin-bottom: 50px;
    }
}

.table tr th {
    text-transform: uppercase;
}

@media only screen and (max-width:585px) {
    .table tr th {
        border-bottom: 1px solid rgb(55,55,55);
        font-size: calc(9pt + 3 * var(--ratio_320-586));
    }
}
@media only screen and (min-width:586px) {
    .table tr th {
        border-bottom: 2px solid rgb(55,55,55);
    }
}

.table tr td,
.table tr th
{
    text-align: center;
    padding: 10px 0;
}

@media only screen and (max-width:585px) {
    .table tr td,
    .table tr th
    {
        padding: 10px 1px;
    }
}
@media only screen and (min-width:586px) {
    .table tr td,
    .table tr th
    {
        padding: 10px 5px;
    }
}
@media only screen and (min-width:960px) {
    .table tr td,
    .table tr th
    {
        padding: 10px;
    }
}

.table.col-1-align-left tr th:first-of-type,
.table.col-1-align-left tr td:first-of-type,
.table.col-2-align-left tr th:nth-of-type(2),
.table.col-2-align-left tr td:nth-of-type(2),
.table.col-3-align-left tr th:nth-of-type(3),
.table.col-3-align-left tr td:nth-of-type(3),
.table.col-4-align-left tr th:nth-of-type(4),
.table.col-4-align-left tr td:nth-of-type(4),
.table.col-5-align-left tr th:nth-of-type(5),
.table.col-5-align-left tr td:nth-of-type(5),
.table.col-6-align-left tr th:nth-of-type(6),
.table.col-6-align-left tr td:nth-of-type(6)
{
    text-align: left;
}

.table.col-1-align-right tr th:first-of-type,
.table.col-1-align-right tr td:first-of-type,
.table.col-2-align-right tr th:nth-of-type(2),
.table.col-2-align-right tr td:nth-of-type(2),
.table.col-3-align-right tr th:nth-of-type(3),
.table.col-3-align-right tr td:nth-of-type(3),
.table.col-4-align-right tr th:nth-of-type(4),
.table.col-4-align-right tr td:nth-of-type(4),
.table.col-5-align-right tr th:nth-of-type(5),
.table.col-5-align-right tr td:nth-of-type(5),
.table.col-6-align-right tr th:nth-of-type(6),
.table.col-6-align-right tr td:nth-of-type(6)
{
    text-align: right;
}

.table.col-1-smaller tr td:first-of-type,
.table.col-1-smaller tr th:first-of-type,
.table.col-2-smaller tr td:nth-of-type(2),
.table.col-2-smaller tr th:nth-of-type(2),
.table.col-3-smaller tr td:nth-of-type(3),
.table.col-3-smaller tr th:nth-of-type(3),
.table.col-4-smaller tr td:nth-of-type(4),
.table.col-4-smaller tr th:nth-of-type(4),
.table.col-5-smaller tr td:nth-of-type(5),
.table.col-5-smaller tr th:nth-of-type(5),
.table.col-6-smaller tr td:nth-of-type(6),
.table.col-6-smaller tr th:nth-of-type(6),
.table.col-last-smaller tr td:last-of-type,
.table.col-last-smaller tr th:last-of-type
{
    font-size: calc(0.8 * 1em);
}


.table.col-1-less-significant tr td:first-of-type,
.table.col-last-less-significant tr td:last-of-type
{
    color: rgb(148,148,148);
}

.table.last-col-bold tr td:last-of-type {
    font-weight: bold;
}

.table.col-2-team-logo tr th:nth-of-type(2) img,
.table.col-2-team-logo tr td:nth-of-type(2) img,
.table.col-3-team-logo tr th:nth-of-type(3) img,
.table.col-3-team-logo tr td:nth-of-type(3) img,
.table.col-5-team-logo tr th:nth-of-type(5) img,
.table.col-5-team-logo tr td:nth-of-type(5) img
{
    margin: auto;
    max-height: 18px;
    display: block;
}

@media only screen and (min-width:586px) {
    .table.col-2-team-logo tr th:nth-of-type(2) img,
    .table.col-2-team-logo tr td:nth-of-type(2) img,
    .table.col-3-team-logo tr th:nth-of-type(3) img,
    .table.col-3-team-logo tr td:nth-of-type(3) img,
    .table.col-5-team-logo tr th:nth-of-type(5) img,
    .table.col-5-team-logo tr td:nth-of-type(5) img
    {
        max-height: 24px;
        display: block;
    }

    .table.col-1-no-wrap tr td:first-of-type {
        white-space: nowrap;
    }
}

.table.first-col-num tr th:first-of-type {
    text-align: right;
}
.table.first-col-num tr td:first-of-type {
    text-align: right;
    color: rgb(148,148,148);
}

@media only screen and (min-width:960px) {
    .table.first-col-num tr th:first-of-type,
    .table.first-col-num tr td:first-of-type
    {
        padding-left: 10px;
        padding-right: 20px;
    }
}

.table tr:nth-of-type(2n) {
    background-color: rgb(245,245,245);
}


@media only screen and (max-width:785px) {
    .table-games tr td:last-of-type span {
        display: none;
    }
    .table-games tr td:last-of-type img {
        margin: auto;
        height: 18px;
        display: block;
    }
}
@media only screen and (min-width:786px) and (max-width:859px) {
    .table-games tr td:last-of-type span {
        display: block;
    }
    .table-games tr td:last-of-type img {
        display: none;
    }
}
@media only screen and (min-width:860px) and (max-width:1063px) {
    .table-games tr td:last-of-type span {
        display: none;
    }
    .table-games tr td:last-of-type img {
        margin: auto;
        height: 18px;
        display: block;
    }
}
@media only screen and (min-width:1064px) {
    .table-games tr td:last-of-type img {
        display: none;
    }
}


.editor-area .table {
    table-layout: fixed;
}

.editor-area .table td {
    overflow: hidden;
}

@media only screen and (max-width:859px) {
    .editor-area .table.col-2-priority-low tr th:nth-of-type(2),
    .editor-area .table.col-2-priority-low tr td:nth-of-type(2),
    .editor-area .table.col-3-priority-low tr th:nth-of-type(3),
    .editor-area .table.col-3-priority-low tr td:nth-of-type(3),
    .editor-area .table.col-4-priority-low tr th:nth-of-type(4),
    .editor-area .table.col-4-priority-low tr td:nth-of-type(4),
    .editor-area .table.col-5-priority-low tr th:nth-of-type(5),
    .editor-area .table.col-5-priority-low tr td:nth-of-type(5),
    .editor-area .table.col-6-priority-low tr th:nth-of-type(6),
    .editor-area .table.col-6-priority-low tr td:nth-of-type(6),
    .editor-area .table.col-7-priority-low tr th:nth-of-type(7),
    .editor-area .table.col-7-priority-low tr td:nth-of-type(7),
    .editor-area .table.col-8-priority-low tr th:nth-of-type(8),
    .editor-area .table.col-8-priority-low tr td:nth-of-type(8),
    .editor-area .table.col-9-priority-low tr th:nth-of-type(9),
    .editor-area .table.col-9-priority-low tr td:nth-of-type(9),
    .editor-area .table.col-10-priority-low tr th:nth-of-type(10),
    .editor-area .table.col-10-priority-low tr td:nth-of-type(10)
    {
        display: none;
    }
}
@media only screen and (max-width:585px) {
    .editor-area .table.col-2-priority-medium tr th:nth-of-type(2),
    .editor-area .table.col-2-priority-medium tr td:nth-of-type(2),
    .editor-area .table.col-3-priority-medium tr th:nth-of-type(3),
    .editor-area .table.col-3-priority-medium tr td:nth-of-type(3),
    .editor-area .table.col-4-priority-medium tr th:nth-of-type(4),
    .editor-area .table.col-4-priority-medium tr td:nth-of-type(4),
    .editor-area .table.col-5-priority-medium tr th:nth-of-type(5),
    .editor-area .table.col-5-priority-medium tr td:nth-of-type(5),
    .editor-area .table.col-6-priority-medium tr th:nth-of-type(6),
    .editor-area .table.col-6-priority-medium tr td:nth-of-type(6),
    .editor-area .table.col-7-priority-medium tr th:nth-of-type(7),
    .editor-area .table.col-7-priority-medium tr td:nth-of-type(7),
    .editor-area .table.col-8-priority-medium tr th:nth-of-type(8),
    .editor-area .table.col-8-priority-medium tr td:nth-of-type(8),
    .editor-area .table.col-9-priority-medium tr th:nth-of-type(9),
    .editor-area .table.col-9-priority-medium tr td:nth-of-type(9),
    .editor-area .table.col-10-priority-medium tr th:nth-of-type(10),
    .editor-area .table.col-10-priority-medium tr td:nth-of-type(10)
    {
        display: none;
    }
}


@media only screen and (max-width:585px) {
    #page .last-update {
        margin-top: 20px;
    }
}
@media only screen and (min-width:586px) {
    #page .last-update {
        margin-top: 60px;
    }
}

#page .last-update span {
    font-size: 11pt;
}

.list-vertical {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.list-horizontal {
    margin: 0;
    display: block;
    list-style-type: none;
    overflow: hidden;
    padding: 0;
}

.list-horizontal li {
    float: left;
    padding: 0 10px 0 0;
}
.list-horizontal li:last-child {
    padding-right: 0;
}

.list-vertical li > .list-vertical,
.list-vertical li > .list-horizontal
{
    margin-left: 50px;
    margin-bottom: 20px;
}


#player-profile-header {
    display: flex;
    align-items: center;
    line-height: 1;
}

#player-profile-header h1 {
    margin-right: 20px;
    flex-grow: 1;
}

#player-profile-header-right {
    border-left: 1px solid rgb(238,238,238);
    padding-left: 2.5vw;
}

#player-profile-header > div > div:first-of-type {
    font-size: 9pt;
    color: rgb(140,140,140);
    margin-bottom: 5px;
    text-align: center;
    text-transform: uppercase;
}

#player-profile-header-right-number, #player-profile-header-right-select {
    color: rgb(14,14,14);
}

#player-profile-header-right-number {
    font-weight: 500;
    text-align: center;
    margin: 0;
}

#player-profile-header select {
    background-color: transparent;
    padding: 5px 15px;
    border-bottom: 1px solid rgb(240, 57, 87);
    width: 8.5em;
    text-align-last: center;
}

#player-profile-content {
    display: flex;
    align-items: center;
}
#player-profile-content > img {
    max-width: 50%;
}

@media only screen and (max-width:585px) {
    #player-profile-content {
        flex-direction: column;
    }
    #player-profile-content > img {
        margin-bottom: 5px;
    }
}
@media only screen and (min-width:586px) {
    #player-profile-content {
        margin-bottom: 4vw;
    }
}

#player-profile-content > table {
    line-height: 1;
}

@media only screen and (min-width:586px) {
    #player-profile-content > table {
        margin-left: 2vw;
    }
}

#player-profile-content > table th,
#player-profile-content > table td
{
    padding: 7px 0;
}

@media only screen and (max-width:585px) {
    #player-profile-content > table th,
    #player-profile-content > table td
    {
        padding: 5px 0;
    }
}

#player-profile-content > table th {
    color: rgb(148,148,148);
    font-weight: normal;
    text-align: left;
    padding-right: 2vw;
}

@media only screen and (max-width:585px) {
    #player-profile-content > table th {
        text-align: right;
    }
}

.avatar {
    max-width: 200px;
    max-height: 200px;
}


#game-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 10px auto 50px auto;
}

#game-header .home, #game-header .away {
    display: flex;
    align-items: center;
    text-align: center;
    width: 40%;
}

#game-header .home {
    justify-content: flex-end;
}
#game-header .away {
    justify-content: flex-start;
}

#game-header .home img, #game-header .away img {
    max-height: 70px;
    max-width: 70px;
}


#game-header .game-team {
    color: rgb(14,14,14);
    font-weight: 500;
    line-height: 1;
}

@media only screen and (max-width:585px) {
    #game-header .game-team {
        font-size: 20pt;
        font-size: min(5vw, 20pt);
    }
}
@media only screen and (min-width:586px) {
    #game-header .game-team {
        font-size: 24pt;
        font-size: min(5vw, 24pt);
    }
}
@media only screen and (min-width:1160px) {
    #game-header .game-team {
        font-size: 28pt;
    }
}


@media only screen and (max-width:699px) {
    #game-header .home, #game-header .away {
        flex-direction: column;
    }
}
@media only screen and (min-width:700px) {
    #game-header .home, #game-header .away {
        flex-direction: row;
    }

    #game-header .home .game-team {
        margin-right: 18px;
    }
    #game-header .away .game-team {
        margin-left: 18px;
    }

    #game-header .away div {
        order: 1;
    }
}
@media only screen and (min-width:860px) {
    #game-header .home, #game-header .away {
        flex-direction: column;
    }

    #game-header .home .game-team {
        margin-right: 0;
    }
    #game-header .away .game-team {
        margin-left: 0;
    }

    #game-header .away div {
        order: 0;
    }
}
@media only screen and (min-width:1160px) {
    #game-header .home, #game-header .away {
        flex-direction: row;
    }

    #game-header .home .game-team {
        margin-right: 18px;
    }
    #game-header .away .game-team {
        margin-left: 18px;
    }

    #game-header .away div {
        order: 1;
    }
}

#game-header > div:nth-child(2) {
    text-align: center;
    margin: 0 30px;
}
#game-header .game-datetime {
    font-size: 10pt;
}
#game-header .game-result {
    padding: 10px 30px;
    border-radius: 15px;
}



#page blockquote {
    margin: 3em 0 0.5em 0;
    font-style: italic;
}
#page blockquote.song {
    text-align: center;
    margin: 2em 0;
}


#page .quote-author {
    text-align: right;
    font-weight: bold;
}


#page .article-categories {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#page .article-categories a {
    display: block;
    color: white;
    width: calc(50% - 4px);
    height: 15vw;
    margin-bottom: 8px;
    text-decoration: none;
    transition: 0.3s;
}
#page .article-categories a:hover {
    opacity: 0.92;
}

#page .article-categories h4 {
    font-size: 11pt;
    font-weight: 500;
    background-color: rgba(0,0,0,0.85);
    margin: 0;
    padding: 16px 0;
    text-align: center;
    text-transform: uppercase;
}


#page #editors {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#page #editors .editor {
    margin: 0px 5px 50px  5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
}

#page #editors .editor img {
    max-height: 120px;
    max-width: 120px;
}


pre, .pre {
    font-size: 11pt;
    font-family: 'Consolas';
    margin: 0;
}


#gallery {
    display: flex;
    flex-wrap: wrap;
}

#gallery .column {
    flex: 33.333%;
    max-width: 33.333%;
    padding: 0 4px;
}

@media screen and (max-width: 800px) {
    #gallery .column {
        flex: 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 400px) {
    #gallery .column {
        flex: 100%;
        max-width: 100%;
    }
}

#gallery .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    cursor: pointer;
    transition: 0.3s;
}

#gallery .column img:hover {
    opacity: 0.92;
}


.modal {
    display: none;
    position: fixed;
    z-index: 4;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
    padding: 20px 0;
}

#modal-gallery {
    padding-top: 100px;
}

#modal-gallery div.arrow {
    position: fixed;
    background-color: rgba(0,0,0,0.9);
    height: 100%;
    top: 0;
    width: 70px;
    width: min(8vw, 70px);
    cursor: pointer;
}

#modal-gallery div.arrow.right {
    right: 0;
}

#modal-gallery div.arrow:hover {
    background-color: rgba(0,0,0,0.6);
}

#modal-gallery div.arrow img {
    position: relative;
    top: 46%;
    opacity: 0.3;
}

#modal-gallery div.arrow img:hover {
    opacity: 0.5;
}

#modal-gallery > img {
    margin: auto;
    display: block;
    max-width: 80vw;
    max-height: 80vh;
    animation-name: modal-gallery-img-zoom;
    animation-duration: 0.6s;
}
@media only screen and (max-width: 800px) {
    #modal-gallery > img {
        max-width: 100%;
    }
}

@keyframes modal-gallery-img-zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}


.breadcrumbs {
    text-transform: uppercase;
    font-size: 8.5pt;
    color: rgb(140,140,140);
}

.breadcrumbs ol {
    display: inline-block;
    padding: 0;
}

@media only screen and (max-width:1159px) {
    .breadcrumbs ol {
        margin: 1.2em 0 0 0;
    }
}
@media only screen and (min-width:1160px) {
    .breadcrumbs ol {
        margin: 0 0 10px 0;
    }
}

.breadcrumbs li {
    display: inline-block;
    margin: 0 8px;
}
.breadcrumbs li:first-of-type {
    margin-left: 0;
}
.breadcrumbs li:last-of-type {
    margin-right: 0;
}

.editor-area h1 {
    font-size: 20pt;
}
.editor-area h3 {
    font-size: 16pt;
    margin-bottom: 1em;
}
.editor-area h4 {
    font-size: 15pt;
}

.editor-area .list-horizontal:first-of-type {
    margin-bottom: 1em;
}


.grecaptcha-badge { visibility: hidden; }

.user-panel .grecaptcha-tos {
    color: #8c8c8c;
    font-size: 7pt;
    text-align: justify;
    margin: 20px 0 10px 0;
}

#page .grecaptcha-tos {
    margin-top: min(5vw,30px);
    font-size: calc(0.7 * 1em) !important;
}



video {
    width: 100% !important;
    height: auto !important;
}


.edit-link {
    color: #949494 !important;
    font-size: 8pt;
}

th abbr {
    text-decoration: none;
}



#ad-below-main-news-mobile {}
#ad-below-news-mobile {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
#ad-below-user-panel-desktop {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
#ad-below-user-panel-desktop img,
#ad-below-last-game-desktop img,
#ad-below-news-mobile img {
    display: block;
    max-width: 100%;
}


.ad-pc {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ad-pc > .adsbygoogle {
    margin: 20px 0;
}

#ad-above-forum-mobile > .adsbygoogle,
#ad-above-forum-desktop > .adsbygoogle,
.ad-news-mobile > .adsbygoogle,
.ad-news-desktop > .adsbygoogle {
    margin: 0;
}

#ad-below-header-desktop > .adsbygoogle,
.ad-between-news-mobile > .adsbygoogle,
.ad-between-news-desktop > .adsbygoogle {
    margin-top: 0;
}

.ad-between-news-mobile > span,
.ad-between-news-desktop > span {
    font-size: 12px;
    color: #8c8c8c;
    display: block;
    margin-top: 20px;
}

#ad-below-archive-desktop {
    background-color: #fff;
    order: 2;
}