/* CSS reset / normalize */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
    list-style: none;
}
    *::before,
    *::after {
        box-sizing: inherit;
    }

/* quoting elements */
blockquote,
q {
    quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
    content: '';
    content: none;
}


/* tables */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

th,
td {
    text-align: inherit
}

img,
fieldset {
    border: none
}

b,
strong {
    font-weight: bold;
}

i,
em {
    font-style: italic;
}


/* form elements */
fieldset,
legend,
input,
select,
textarea,
button {
    white-space: normal;
}

textarea {
    white-space: pre-wrap; /* needed for ie */
}


/* date - remove special appearance for webkit */
input[type="date"],
input[type="search"] {
    -webkit-appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

input[type="date"]::-webkit-clear-button {
    margin-right: 1.5em;
}

textarea {
    resize: vertical;
    overflow: auto;
}

button {
    display: inline-block;
    cursor: pointer;
}


/* Form controls - focus state */
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* Form controls - invalid state */
input:required:invalid,
input:focus:invalid,
select:required:invalid,
select:focus:invalid,
textarea:required:invalid,
textarea:focus:invalid {
    box-shadow: none;
}


/* Template & hidden elements - make sure they're not displayed */
template,
[hidden] {
    display: none;
}
@font-face {
    font-family: 'Fontin Smallcaps';
    src: url('../fonts/fontin-smallcaps-webfont.woff2') format('woff2'),
         url('../fonts/fontin-smallcaps-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
a.underline:hover {
    border-bottom-color: transparent;
}
.register-description {
    max-width: 210px;
}
.pagecontent-main .terms-and-conditions p {
    max-width: none;
}
.terms-and-conditions p,
.terms-and-conditions a {
    opacity: 0.6;
    color: #DCD5C0;
    font-family: 'Fontin Smallcaps';
    font-size: 0.8rem;
}
.terms-and-conditions p a {
    opacity: 1;
}
.yellow {
    color: #DCD5C0;
}
/* @group Base */
.chosen-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: var(--formcontrol-color);
    background: var(--formcontrol-background);
    border: var(--formcontrol-border);
    border-radius: 0.25em;
}

form .chosen-container {
    display: block;
    width: auto!important;
}

.chosen-container ul > * {
    padding-left: 0;
}
    .chosen-container ul > *::before {
        content: normal;
    }


.chosen-container * {
    box-sizing: border-box;
}
    .chosen-container * + * {
        margin-top: 0;
    }

.chosen-container .chosen-drop {
    position: absolute;
    top: 100%;
    z-index: 1010;
    display: none;
    width: 100%;
}
    .chosen-container.chosen-with-drop .chosen-drop {
        display: block;
    }

.chosen-container a {
    color: inherit;
    cursor: pointer;
    border: none;
}

.chosen-container .search-choice .group-name,
.chosen-container .chosen-single .group-name {
    margin-right: 0.25em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: normal;
}
    .chosen-container .search-choice .group-name:after,
    .chosen-container .chosen-single .group-name:after {
        content: ':';
        padding-left: 0.25em;
        vertical-align: top;
    }
/* @end */

/* @group Single Chosen */
.chosen-container-multi .chosen-choices,
.chosen-container-single .chosen-single {
    position: relative;
    display: block;
    padding: var(--formcontrol-padding--vertical) var(--formcontrol-padding--horizontal);
    text-decoration: none;
    white-space: nowrap;
}
    .chosen-container-multi .chosen-choices {
        padding: calc(var(--formcontrol-padding--vertical) / 2) var(--formcontrol-padding--horizontal);
        white-space: normal;
    }

.chosen-container-single .chosen-single input[type="text"] {
    position: absolute;
    width: 0;
    cursor: pointer;
    opacity: 0;
}

.chosen-container-single .chosen-single span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The arrow */
.chosen-container-single .chosen-single div {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 100%;
}
    .chosen-container-single .chosen-single div::after {
        content: '^';
        transform: scaleY(-1) scaleX(1.5);
    }
    .chosen-with-drop .chosen-single div::after {
        transform: scaleX(1.5);
    }

.chosen-container-single .chosen-search-input {
    margin: 0.5em;
    width: calc(100% - 1em);
    padding: 0.5em 1em;
    outline: 0;
    line-height: normal;
    border-radius: 0;
}

.chosen-container .chosen-drop {
    margin-left: -1px;
    margin-right: -1px;
    width: calc(100% + 2px);
    border-radius: 0.25em;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: url(../images/background-content.jpg) repeat-y center top;
    border: var(--formcontrol-border);
}

.chosen-container-single.chosen-container-single-nosearch .chosen-search {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* @end */

/* @group Results */
.chosen-container .chosen-results {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    max-height: 10em;
    -webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results li {
    display: none;
    margin: 0;
    padding: 0.75em 1em;
    list-style: none;
    word-wrap: break-word;
    -webkit-touch-callout: none;
}

    .chosen-container .chosen-results li.active-result {
        display: list-item;
        cursor: pointer;
    }

    .chosen-container .chosen-results li.disabled-result {
        display: list-item;
        opacity: 0.5;
        cursor: default;
    }

    .chosen-container .chosen-results li.highlighted {
        background: rgba(255, 255, 255, 0.05);
    }

    .chosen-container .chosen-results li.no-results {
        display: list-item;
    }

    .chosen-container .chosen-results li.group-result {
        display: list-item;
        font-weight: bold;
        cursor: default;
    }

    .chosen-container .chosen-results li.group-option {
    }

.chosen-container .chosen-results li em {
    font-style: normal;
    text-decoration: underline;
}
/* @end */

/* @group Multi Chosen */
.chosen-container-multi .chosen-choices li {
    display: inline-block;
    list-style: none;
}
    .chosen-container-multi .chosen-choices li.search-field {
        padding-top: calc(var(--formcontrol-padding--vertical) / 2.25);
        padding-bottom: calc(var(--formcontrol-padding--vertical) / 2.25);
        white-space: nowrap;
    }

    .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
        margin: 0;
        padding: 0;
        width: 2em;
        max-width: none;
        background: none;
        border: none;
        outline: 0;
    }

.chosen-container-multi .chosen-choices li.search-choice {
    position: relative;
    margin: 0.25em 0.25em;
    padding: 0.05em 0.5em;
    border: var(--formcontrol-border);
    max-width: 100%;
    border-radius: 0.25em;
    background-color: rgba(255, 255, 255, 0.05);
    cursor: default;
}

.chosen-container-multi .chosen-choices li.search-choice span {
    word-wrap: break-word;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    display: none;
}

.chosen-container-multi .chosen-results {
    margin: 0;
    padding: 0;
}

.chosen-container-multi .chosen-drop .result-selected {
    display: list-item;
    cursor: default;
    opacity: 0.5;
}
/* @end */

/* @group Disabled Support */
.chosen-disabled {
    opacity: 0.5;
    cursor: default;
}

.chosen-disabled .chosen-single,
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
    cursor: default;
}
/* @end */
.flex {
    display: flex;
}

.flex-center-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-left-center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-left-top {
    display: flex;
    justify-content: left;
    align-items: flex-start;
}

.flex-right-top {
    display: flex;
    margin-left: auto;
    align-items: flex-start;
}

.flex-left-bottom {
    display: flex;
    justify-content: left;
    align-items: flex-end;
}

.flex-center-top {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.flex-center-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-center-bottom {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.flex-right-center {
    display: flex;
    margin-left: auto;
    align-items: center;
}

.flex-top-center {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.flex-bottom-center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-right-bottom {
    display: flex;
    margin-left: auto;
    align-items: flex-end;
}

.flex-basis-100 {
    flex-basis: 100%;
}
.flex-row {
    flex-direction: row;
}
.flex-column {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-no-wrap {
    flex-wrap: nowrap;
}
.flex-stretch {
    align-items: stretch;
}
.flex-self-flex-start {
    align-self: flex-start;
}
.flex-self-flex-end {
    align-self: flex-end;
}
.flex-self-self-start {
    align-self: self-start;
}
.flex-self-self-end {
    align-self: self-end;
}
.flex-align-center {
    align-items: center;
}
.flex-align-left {
    align-items: left;
}
.flex-align-right {
    align-items: right;
}
.flex-align-flex-start {
    align-items: flex-start;
}
.flex-align-flex-end {
    align-items: flex-end;
}
.flex-content-center {
    align-content: center;
}
.flex-content-left {
    align-content: left;
}
.flex-content-right {
    align-content: right;
}
.flex-content-flex-start {
    align-content: flex-start;
}
.flex-content-flex-end {
    align-content: flex-end;
}
.flex-content-space-around {
    align-content: space-around;
}
.flex-content-space-between {
    align-content: space-between;
}
.flex-content-space-evenly {
    align-content: space-evenly;
}
.flex-direction-row {
    flex-direction: row;
}
.flex-direction-column {
    flex-direction: column;
}
.flex-justify-center {
    justify-content: center;
}
.flex-justify-left {
    justify-content: left;
}
.flex-justify-right {
    justify-content: right;
}
.flex-justify-flex-start {
    justify-content: flex-start;
}
.flex-justify-flex-end {
    justify-content: flex-end;
}
.flex-justify-space-around {
    justify-content: space-around;
}
.flex-justify-space-between {
    justify-content: space-between;
}
.flex-justify-space-evenly {
    justify-content: space-evenly;
}
.flex-basis-100 {
    flex-basis: 100%;
}
.flex-basis-50 {
    flex-basis: 50%;
}

.switch {
    position: relative;
    display: inline-block;
    height: 12px;
    width: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    bottom: 0;
    width: 34px;
    height:12px;
    margin-top: 0px;
    background-color: rgba(204,204,204, 0.4);
    transition: .4s;
    border: 1px solid rgba(255,255,255, 0.1);
    opacity: 0.7;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    /*-webkit-box-shadow: 0px 0px 0px 5px rgba(123, 213, 245, 0.1);*/
    /*-moz-box-shadow: 0px 0px 0px 5px rgba(123, 213, 245, 0.1);*/
    /*box-shadow: 0px 0px 0px 5px rgba(123, 213, 245, 0.1);*/
    left: -6px;
    top: -2px;
    background-color: #94B0C4;
    transition: .4s;
}
.switch .slider:after {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    box-shadow: 0px 0px 7px 7px rgba(252, 160, 65, 0.3);
    left: -6px;
    top: -2px;
    background-color: transparent;
    transition: .4s;
}

.switch input:checked + .slider {
    /*background-color: rgba(252, 160, 65, 0.9);*/
    opacity: 1;
}
.switch input:not(:checked) + .slider:after {
    box-shadow: none;
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.switch input:checked + .slider:before,
.switch input:checked + .slider:after {
    transform: translateX(26px);
}
.switch input:checked + .slider:before {
    background-color: #fca041;
}

/* Rounded sliders */
.switch .slider.round {
    border-radius: 34px;
}

.switch .slider.round:before,
.switch .slider.round:after {
    border-radius: 50%;
}
:root {
    --formcontrol-background: rgba(0, 0, 0, 0.2);
    --formcontrol-border: 1px solid rgba(255, 255, 255, 0.075);
    --formcontrol-color: var(--textcolor--secondary);
    --formcontrol-padding--vertical: 0.75em;
    --formcontrol-padding--horizontal: 1em;
}

/* @group Forms */
form {
}

form p {
    position: relative;
}

form p + p {
    margin-top: calc(var(--section-verticalspacing) / 1.75);
}

/* @group Legend */
form legend {
    display: block;
    width: 100%;
    font-size: 1.2em;
}
    /* The legend should always be the first child of the fieldset, so ignore any other elements before it */
    form * + legend {
        margin-top: 0;
    }
/* @end Legend */

button,
button::before,
button::after {
    transition: all 0.2s ease-in-out;
}



form label {
    display: block;
    font-family: var(--fontfamily--titles);
    font-weight: bold;
    letter-spacing: 0.05em;
    color: var(--textcolor);
    cursor: default;
}


form input,
form select,
form textarea {
    display: block;
    width: 100%;
    max-width: 30em;
    padding: var(--formcontrol-padding--vertical) var(--formcontrol-padding--horizontal);
    font-size: 1.1rem;
    font-family: var(--fontfamily--titles);
    font-weight: bold;
    letter-spacing: 0.05em;
    color: var(--formcontrol-color);
    background: var(--formcontrol-background);
    border: var(--formcontrol-border);
    border-radius: 0.2em;
    transition: all 0.2s ease-in-out;
}

    form input[type="checkbox"],
    form input[type="radio"] {
        display: inline-block;
        margin-right: 0.5em;
        width: auto;
    }

    form textarea {
        min-height: 4em;
        max-width: 35em;
    }
    form select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    option {
        background: #000;
    }

    form label input,
    form label select,
    form label textarea {
        margin-top: 0.5em;
    }



/* @group Placeholder */
::-webkit-input-placeholder {
    font-weight: normal;
    opacity: 0.7;
    letter-spacing: 0.05em;
    font-size: 0.85em;
}
::-moz-placeholder {
    font-weight: normal;
    opacity: 0.7;
    letter-spacing: 0.05em;
    font-size: 0.85em;
    opacity: 1;
}
:-moz-placeholder {
    font-weight: normal;
    opacity: 0.7;
    letter-spacing: 0.05em;
    font-size: 0.85em;
    opacity: 1;
}
:-ms-input-placeholder {
    font-weight: normal;
    opacity: 0.7;
    letter-spacing: 0.05em;
    font-size: 0.85em;
}
/* @end Placeholder */

.invisibleinput {
    position: absolute;
    opacity: 0;
}
.invisibleinput + * {
    margin-top: 0;
}

/* @group Validation message */
.validationmessage {
    position: absolute;
    z-index: 10;
    padding: 0.5em 0.75em;
    font-size: 0.9em;
    font-family: var(--fontfamily);
    font-weight: normal;
    text-align: left;
    color: #fff;
    background: #d42323;
    border-radius: .25em;
}
    * + .validationmessage {
        margin-top: 0.25em;
    }
    .validationmessage::before {
        content: '';
        width: 0.5em;
        height: 0.5em;
        position: absolute;
        left: 0.5em;
        top: -0.25em;
        transform: rotate(45deg);
        background: inherit;
    }
/* @end Validation message */



/* @group Form actions */
.formactions {
    display: flex;
    justify-content: center;
    align-items: center;
}
    .pagecontent-main .formactions {
        max-width: none;
    }

.formactions > * {
    padding-left: 0;
}
    .formactions > *::before {
        content: normal;
    }
    .formactions > :nth-child(3):last-child {
        margin-left: auto;
        margin-right: 0;
    }
    .formactions > * + * {
        margin-top: 0;
        margin-left: var(--layoutsection-horizontalspacing);
    }
/* @end Form actions */


/* @group Form that represents the main content of a page */
.formmain {
    --formmain-verticalspacing: var(--section-verticalspacing);

    margin-bottom: calc(var(--formmain-verticalspacing) * -1);
}

.formmain > * {
    margin-top: 0;
    margin-bottom: var(--formmain-verticalspacing);
    width: 100%;
    max-width: none;
}


.formmain input,
.formmain select,
.formmain textarea {
    max-width: none;
}
.formmain textarea {
    height: 10em;
}

@media screen and (min-width:650px) and (max-width:1000px) {
    .pagecontent-main:nth-child(2) .formmain {
        display: flex;
        flex-wrap: wrap;
        padding-left: 10vw;
        padding-right: 10vw;
    }

    .pagecontent-main:nth-child(2) .formmain-secondary {
        width: calc(50% - var(--layoutsection-horizontalspacing) / 2);
    }
    .pagecontent-main:nth-child(2) .formmain-secondary + .formmain-secondary {
        margin-left: var(--layoutsection-horizontalspacing);
    }
}
@media screen and (min-width: 800px) {
    .pagecontent-main:only-child .formmain {
        display: flex;
        flex-wrap: wrap;
        padding-left: 10vw;
        padding-right: 10vw;
    }

    .pagecontent-main:only-child .formmain-secondary {
        width: calc(50% - var(--layoutsection-horizontalspacing) / 2);
    }
    .pagecontent-main:only-child .formmain-secondary + .formmain-secondary {
        margin-left: var(--layoutsection-horizontalspacing);
    }
}
/* @end Form that represents the main content of a page */


/* @group Autosizing form elements */
.autosizingfield-measurementfield.autosizingfield-measurementfield {
    position: absolute;
    z-index: -2;
    width: auto;
    min-width: 0;
    opacity: 0;
}
    .autosizingfield-measurementfield + * {
        margin: 0;
    }

input.autosizingfield,
select.autosizingfield {
    white-space: nowrap;
}

textarea.autosizingfield {
    overflow: hidden;
    resize: none;
}
/* @end Autosizing form elements */
@font-face {
	font-family: "icons";
	src: url('../fonts/icons.woff2') format('woff2'),
         url('../fonts/icons.woff') format('woff');
}

.icon {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
}
    .icon--exclusive {
        box-sizing: content-box;
    	white-space: nowrap;
        width: 1em;
        overflow: hidden;
        text-align: left;
    }

.iconsvg {
    --icon-size: 3em;
    width: var(--icon-size);
    height: var(--icon-size);
}

.icon::before {
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: middle;
	font-family: "icons";
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	speak: none;
	text-decoration: none;
	text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
    .icon--exclusive::before {
        margin-right: 1000em;
    }

    .icon--soft::before {
        margin-right: 0.5em;
        font-size: 0.75em;
        opacity: 0.25;
    }

/* --- end of the manual entered declarations (the following template must be at the end of the file)  --- */
/* @startIconsListTemplate
{{#glyphs}}
.icon-{{name}}::before {
	content: "\{{unicode}}";
}
{{/glyphs}}
@endIconsListTemplate */


.icon-twitter::before {
	content: "\EA01";
}
.icon-twitch::before {
	content: "\EA02";
}
.icon-search::before {
	content: "\EA03";
}
.icon-facebook::before {
	content: "\EA04";
}
.icon-share::before {
	content: "\EA05";
}
.icon-report::before {
	content: "\EA06";
}
.icon-downvote::before {
	content: "\EA07";
}
.icon-upvote::before {
	content: "\EA08";
}
.icon-unorderedlist::before {
	content: "\EA09";
}
.icon-preview::before {
	content: "\EA0A";
}
.icon-orderedlist::before {
	content: "\EA0B";
}
.icon-link::before {
	content: "\EA0C";
}
.icon-image::before {
	content: "\EA0D";
}
.icon-edit::before {
	content: "\EA0E";
}
.icon-settings::before {
	content: "\EA0F";
}
.icon-notification::before {
	content: "\EA10";
}
.icon-message::before {
	content: "\EA11";
}
.icon-google::before {
	content: "\EA12";
}
.icon-discord::before {
	content: "\EA13";
}
.icon-rss::before {
	content: "\EA14";
}
.icon-pin::before {
	content: "\EA15";
}
.icon-visibility::before {
	content: "\EA16";
}
.icon-lock::before {
	content: "\EA17";
}
.icon-flag::before {
	content: "\EA18";
}
.icon-armour::before {
	content: "\EA19";
}

.button {
    --button-background: hsl(17, 27%, 33%);
    --button-highlight: #BB836B;
    --button-shadow: #1b120e;

    position: relative;
    display: inline-block;
    padding: 0.7em 1.5em 1.15em 1.7em;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    font-family: var(--fontfamily--titles);
    text-align: center;
    color: var(--textcolor);
    text-shadow: -1.5px -1.5px 0 var(--button-shadow);
    border: none;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
}
    .button--register {
        --button-background: #3F546E;
        --button-highlight: #779dec8a;
        --button-shadow: #10244b;
    }
    .button--remove-ads {
        --button-background: #E55420;
        --button-highlight: #FCA041;
        --button-shadow: #260c08;
    }
    .button--facebook,
    .button--google {
        max-width: 100%;
        padding-right: 1.15em;
        padding-left: 1.25em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .button--facebook {
        --button-background: #4267B2;
        --button-highlight: #779dec;
        --button-shadow: #10244b;
    }
    .button--google {
        --button-background: #4c90f6;
        --button-highlight: #73a8f7;
        --button-shadow: #0d254b;
    }
    .button--important {
        --button-background: #802716;
        --button-highlight: #b52f15;
        --button-shadow: #1b0602;
    }

    /* The cracks / grunge details */
    .button::after {
        content: '';
        position: absolute;
        left: 1px;
        top: 1px;
        z-index: -1;
        width: calc(100% - 2px);
        height: calc(100% - 0.4em);
        background: url(../images/sprite.png) no-repeat left -4506px;
        mix-blend-mode: hard-light;
        opacity: 0.4;
        -webkit-clip-path: url('#svg-buttonshape-clip');
                clip-path: url('#svg-buttonshape-clip');
    }

        .pageheader .button::after {
            mix-blend-mode: overlay;
            opacity: 0.7;
        }

    .button:disabled {
        opacity: 0.5;
        cursor: default;
    }
        .button:disabled:hover {
            opacity: 0.5;
        }

.button svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
}
    .button:hover {
        opacity: 0.95;
    }


/* @group Svg elements for the main buttons */
.svg-button-shadow {
    fill: var(--button-shadow);
}
.svg-button-shadow-highlight {
    opacity: 0.2;
    fill: var(--button-background);
}

.svg-button-background {
    fill: var(--button-background);
}

.svg-button-highlight {
    fill: var(--button-highlight);
}
/* @end Svg elements for the main buttons */


/* @group Simple button */
.buttonsimple {
    position: relative;
    display: inline-block;
    font-family: var(--fontfamily--titles);
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--textcolor--anchor);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
/* @end Simple button */


/* @group Button secondary */
.buttonsecondary {
    display: inline-block;
    padding: 0.5em 0.75em;
    font-size: 0.9rem;
    color: var(--textcolor--quartenary--transparent50);
    background: var(--button-background-secondary);
    border-radius: 0.25em;
}
    .buttonsecondary:hover {
        color: var(--textcolor--quartenary);
        background: var(--button-background-secondary--hover);
    }
/* @end Button secondary */

/* @group Button guide */
:root {
    --buttonguide-padding: 0.75em;
    --buttonguide-fontsize: 0.9rem;
    --buttonguide-color: #7ED9E7;
    --buttonguide-background: rgba(126, 217, 231, 0.1);
    --buttonguide-color--hover: #b9eef6;
}
.buttonguide {
    position: relative;
    display: inline-block;
    padding: var(--buttonguide-padding);
    font-size: var(--buttonguide-fontsize);
    font-family: var(--fontfamily--titles);
    color: var(--buttonguide-color);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 1);
    background: var(--buttonguide-background);
    border: 1px solid;
    border-radius: 0.25em;
    transition: all 0.2s ease-in-out;
}
    .buttonguide--back {
        --buttonguide-fontsize: 1.1rem;
        --buttonguide-padding: 1.25em;
        --buttonguide-color: #BAAA6A;
        --buttonguide-background: rgba(48, 38, 28, 0.5);
        --buttonguide-color--hover: #dacc94;
    }
    .buttonguide:hover {
        color: var(--buttonguide-color--hover);
        box-shadow: 0 0 1em 0 rgba(185, 238, 246, 0.3);
    }

    .buttonguide--pantheon::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background: url(../images/sprite.png) no-repeat -950px -6250px;
        opacity: 0.2;
    }

.buttonguide img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.15em;
    width: auto;
    max-width: 2.25em;
    height: 1.5em;
    opacity: 0.9;
    transition: inherit;
}
    .buttonguide:hover img {
        opacity: 1;
        transform: scale(1.2) rotate(360deg);
    }

    .buttonguide--gem img {
        height: 1.45em;
    }

    .buttonguide--pantheon img {
        height: 1.35em;
    }

    .buttonguide--back img {
        height: 1.15em;
    }

/* @end Button guide */


/* @group Button guide group */
.buttonguidegroup {
    --buttonguidegroup-spacing: 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.buttonguidegroup > * + * {
    margin-top: var(--buttonguidegroup-spacing);
}

.buttonguidegroup .buttonguide {
    width: 100%;
}

@media screen and (min-width: 600px) {
    .buttonguidegroup {
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: calc(var(--buttonguidegroup-spacing) * -1);
    }
        .buttonguidegroup--secondary {
            justify-content: center;
        }

    .buttonguidegroup > * {
        margin: 0;
        margin-right: var(--buttonguidegroup-spacing);
        margin-bottom: var(--buttonguidegroup-spacing);
    }
    .buttonguidegroup .buttonguide {
        width: auto;
    }
}
/* @end Button guide group */

/* Messages */
.messages {
    --message-background-main: #1268D2;
    --message-background-shadow: #114e98;
    --message-bordercolor: #2784f6;

    position: fixed;
    left: 1em;
    bottom: 1em;
    z-index: 101;
    margin: 0;
    transform: translateZ(0);
}

@-webkit-keyframes message-appear {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100vw);
    }
}

@keyframes message-appear {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100vw);
    }
}
@-webkit-keyframes message-dissapear {
    0% {
        transform: translateX(100vw);
    }
    50% {
        transform: translateX(0);
    }
    99% {
        max-height: 0;
    }
    100% {
        position: absolute;
        visibility: hidden;
        opacity: 0;
    }
}
@keyframes message-dissapear {
    0% {
        transform: translateX(100vw);
    }
    50% {
        transform: translateX(0);
    }
    99% {
        max-height: 0;
    }
    100% {
        position: absolute;
        visibility: hidden;
        opacity: 0;
    }
}

.message {
    position: relative;
    box-sizing: border-box;
    margin-left: -100vw;
    width: 50em;
    max-width: calc(100vw - 2em);
    max-height: 30em;
    padding: 1em 3.5em 1em 2em;
    font-size: 1.1em;
    font-family: Arial, sans-serif;
    color: #fff;
    background:
        var(--widget-background-grungeeffect),

        /* the stripes */
        linear-gradient(-45deg, var(--widget-background-stripes) 25%, transparent 25%, transparent 50%, var(--widget-background-stripes) 50%, var(--widget-background-stripes) 75%, transparent 75%, transparent),

        /* simulates the mesh gradient */
        radial-gradient(farthest-corner at center, var(--message-background-main) 0%, var(--message-background-main) 30%, var(--message-background-shadow) 100%);

    background-size: var(--widget-background-size);
    background-blend-mode: var(--widget-background-blendmode);

    border: 1px solid var(--message-bordercolor);
    border-radius: 0.2em;
    opacity: 0.93;
    transition: all 0.3s;
    text-shadow: none;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-animation: message-appear 0.3s ease-in-out forwards;
            animation: message-appear 0.3s ease-in-out forwards;
}
    .message-closecontroller:checked + .message {
        -webkit-animation: message-dissapear 1s ease-in-out forwards;
                animation: message-dissapear 1s ease-in-out forwards;
    }

    .message + input + .message {
        margin-top: 1em;
    }

    .message--error {
        --message-background-main: #FA4E4E;
        --message-background-shadow: #c62f2f;
        --message-bordercolor: #f96565;
    }
        .message--error a {
            text-decoration: underline;
        }

    .message--warning {
        --message-background-main: #FFED15;
        --message-background-shadow: #b5a914;
        --message-bordercolor: #f5eb78;

        color: #000;
    }
    .message--success {
        --message-background-main: #A7F942;
        --message-background-shadow: #72b51f;
        --message-bordercolor: #b7f66a;

        color: #000;
    }

.message-closebutton {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    font-size: 1.5em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
    .message-closebutton:hover {
        transform: scale(1.5) rotate(-180deg);
    }

.message-closecontroller {
    position: absolute;
    visibility: hidden;
    opacity: 0;
}
/* [end] Messages */

/* @group Tooltip */
.tooltip {
    --tooltip-padding--horizontal: 2em;
    --tooltip-padding--vertical: 1.5em;
    --tooltip-background: hsla(0, 0%, 0%, 0.92);
    --tooltip-tip-size: 1em;

    position: absolute;
    left: 0;
    top: 0;
    z-index: var(--tooltip-zindex);
    width: auto;
    max-width: 28em;
    padding: var(--tooltip-padding--vertical) var(--tooltip-padding--horizontal);
    visibility: hidden;
    font-size: 0.95rem;
    color: var(--color--secondary);
    text-align: left;
    white-space: normal;
    text-transform: none;
    background: var(--tooltip-background);
    border-radius: 0.25em;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(-1em);
    transition: opacity 0.4s ease-in-out;
}
    .tooltip--visible {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }
    .tooltip::before {
        content: '';
        position: absolute;
        left: 50%;
        top: calc(100% - var(--tooltip-tip-size) / 2);
        width: var(--tooltip-tip-size);
        height: var(--tooltip-tip-size);
        transform: translateX(-50%) rotate(-45deg);
        background: inherit;
    }
        .tooltip--left::before {
            left: 2em;
        }
        .tooltip--right::before {
            left: auto;
            right: 2em;
        }

    .tooltip--component {
        background: transparent;
        box-shadow: none;
    }
        .tooltip--component::before {
            content: normal;
        }
/* @end Tooltip */
.top-ribbon, .top-ribbon-mobile {
    position: relative;
    display: block;
    width: 100%;
    z-index: 10000;
}

.top-ribbon {
    height: 30px;
}

.top-ribbon-mobile {
    height: 50px;
}

.top-ribbon img, .top-ribbon-mobile img {
    margin: 0 auto;
    display: block;
}

@media screen and (max-width: 500px) {
    .top-ribbon {
        display: none;
    }

    .top-ribbon-mobile {
        display: block;
    }
}

@media screen and (min-width: 500px) {
    .top-ribbon {
        display: block;
    }

    .top-ribbon-mobile {
        display: none;
    }
}@custom-media --paginationsortfilters-showononeline screen and (min-width: 1100px);

/* @group Pagination / sort / filters group */
.paginationsortfilters {
    --paginationsortfilters-padding--vertical: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: calc(var(--wrapper-padding) * -1);
    margin-right: calc(var(--wrapper-padding) * -1);
    padding: var(--paginationsortfilters-padding--vertical) 0;
    font-size: 1.1em;
    font-weight: bold;
    font-family: var(--fontfamily--titles);
    text-transform: lowercase;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-right: none;
    border-left: none;
    box-shadow:
        0 -1px 0 0 rgba(0, 0, 0, 0.5),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.5);
}
    .pagecontent-main:first-child:not(:last-child) .paginationsortfilters {
        font-size: 1em;
    }

    .paginationsortfilters + table + .paginationsortfilters,
    .paginationsortfilters + .forumitems + .paginationsortfilters,
    .paginationsortfilters + table,
    .paginationsortfilters + .forumitems {
        margin-top: 0;
    }
        .paginationsortfilters + table + .paginationsortfilters,
        .paginationsortfilters + .forumitems + .paginationsortfilters {
            border-top: none;
            box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.5);
        }
        .paginationsortfilters + table,
        .paginationsortfilters + .forumitems {
            margin-top: -1px;
        }

.paginationsortfilters > * {
    width: 100%;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
}
    .pagecontent-main .paginationsortfilters > * {
        max-width: none;
    }
    .paginationsortfilters > * + * {
        margin-top: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow:
            0 -1px 0 0 rgba(0, 0, 0, 0.5),
            inset 0 -1px 0 0 rgba(0, 0, 0, 0.5);
    }
/* @end Pagination / sort / filters group */

/* @group Sort / Filters */
.sort,
.filters {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-weight: bold;
    font-family: var(--fontfamily--titles);
}

.sort > * + *,
.filters > * + * {
    margin-top: 0;
    margin-left: 0.5em;
}

.filters select,
.sort select {
    position: relative;
    width: auto;
    padding: 0;
    min-width: 1em;
    padding-right: 1em;
    font-size: 1em;
    white-space: nowrap;
    color: var(--textcolor);
    background: none;
    border: none;
}

.filters label,
.sort label,
.filters legend,
.sort legend {
    opacity: 0.5;
}
    .filters legend,
    .sort legend {
        width: auto;
        font-size: inherit;
        cursor: inherit;
    }
    /* The down arrow for the select element */
    .filters label::after,
    .sort label::after {
        content: '\2303';
        position: absolute;
        right: 0;
        transform: rotate(180deg);
        font-size: 0.8em;
        font-family: var(--fontfamily);
    }

        .paginationsortfilters > .filters > label::after,
        .paginationsortfilters > .sort > label::after {
            right: var(--wrapper-padding);
        }

/* @end Sort / Filters */



/* @group Pagination */
.pagination {
    display: flex;
    align-items: center;
    margin-left: calc(var(--wrapper-padding) * -1);
    margin-right: calc(var(--wrapper-padding) * -1);
    margin-top: calc(var(--paginationsortfilters-padding--vertical) * -1);
    padding-left: var(--wrapper-padding);
    padding-right: var(--wrapper-padding);
    font-weight: bold;
    font-family: var(--fontfamily--titles);
    text-transform: lowercase;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-right: none;
    border-left: none;
    box-shadow:
        0 -1px 0 0 rgba(0, 0, 0, 0.5),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.5);
}
    .paginationsortfilters .pagination {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        background: rgba(255, 255, 255, 0.025);
    }

.pagination * + * {
    margin-top: 0;
}
    .pagination > * + * {
        margin-left: 1rem;
    }

    .pagination > ol > * {
        position: relative;
    }

    .pagination > p:first-child {
        margin-left: 0;
        margin-right: auto;
    }
    .pagination > p:last-child {
        margin-left: auto;
        margin-right: 0;
    }

.pagination a {
    display: inline-block;
    color: var(--textcolor);
    border: none;
}
    /* Inactive prev / next */
    .pagination > p > a:not([href]) {
        cursor: default;
        opacity: 0.25;
    }
    .pagination > p:first-child > a::before,
    .pagination > p:last-child > a::after {
        content: '\2303';
        display: inline-block;
        font-size: 0.75em;
        transform: rotate(-90deg);
        font-family: var(--fontfamily);
    }
        .pagination > p:last-child > a::after {
            transform: rotate(90deg);
        }

    .pagination a {
        position: relative;
        padding: 1em 0.75em;
    }

.pagecontent-main .pagination ol {
    max-width: none;

}

.pagination ol a svg {
    position: absolute;
    left: 0;
    bottom: -2px;
    z-index: 2;
    width: 100%;
    height: 3px;
    transform: translateX(-1em);
    fill: currentColor;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    filter: drop-shadow(0 0 1em currentColor);
}
    .pagination ol a svg:first-of-type {
        top: -2px;
    }

    .pagination ol a.pagination-current svg  {
        fill: #f00;
    }

    .pagination ol a:hover svg,
    .pagination ol a.pagination-current svg {
        opacity: 1;
        transform: none;
    }

.pagination > ol {
    display: none;
}


.pagination-shortened {
    --paginationshortened-width: 17em;

    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: var(--paginationshortened-width);
    max-width: 90vw;
    padding: 1em 2em;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.9);
    transition: all 0.2s ease-in-out;
    transform: translateX(-50%);
}
    :hover > .pagination-shortened {
        visibility: visible;
        opacity: 1;
    }

.pagination-shortened h3 {
    width: 100%;
    font-size: var(--title-5-size)
}
.pagination-shortened h3 ~ * {
    margin-top: calc(var(--title-verticalspacing) / 2);
}
.pagination-shortened p {
    display: flex;
    align-items: stretch;
    width: 50%;
}
.pagination-shortened p > * {
    width: 100%;
}

/* Intended specificity */
.paginationsortfilters.paginationsortfilters p {
    max-width: none;
}

.paginationsortfilters > p:not([class]),
.paginationsortfilters > section:not([class]) {
    text-align: center;
}

@media screen and (min-width: 500px) {
    .pagination > ol {
        display: flex;
    }
}


@media screen and (min-width:1100px) {
    .pagecontent-main:only-child .paginationsortfilters {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        padding-left: var(--wrapper-padding);
        padding-right: var(--wrapper-padding);
    }

    .pagecontent-main:only-child .paginationsortfilters > * {
        width: auto;
    }
        .pagecontent-main:only-child .paginationsortfilters > :not(.sort),
        .pagecontent-main:only-child .paginationsortfilters > :not(.filters) {
            padding-top: 0;
            padding-bottom: 0;
        }
        .pagecontent-main:only-child .paginationsortfilters > * + *,
        .pagecontent-main:only-child .paginationsortfilters .sort + .sort,
        .pagecontent-main:only-child .paginationsortfilters .filters + .filters,
        .pagecontent-main:only-child .paginationsortfilters [role="group"] + [role="group"] {
            margin-left: 1em;
            border: none;
            box-shadow: none;
        }

    .pagecontent-main:only-child .filters label::after,
    .pagecontent-main:only-child .sort label::after {
        right: 0;
    }

    .pagecontent-main:only-child .pagination > p:first-child {
        margin-right: 0;
    }
    .pagecontent-main:only-child .pagination > p:last-child {
        margin-left: 0;
    }

    .pagecontent-main:only-child .paginationsortfilters .pagination {
        align-self: flex-start;
        margin-left: 0;
        margin-right: auto;
        margin-bottom: calc(var(--paginationsortfilters-padding--vertical) * -1);
        padding: 0;
        width: auto;
        background: none;
        border: none;
        box-shadow: none;
    }
}

/* Only when there is a sidebar */
@media screen and (min-width:850px) and (max-width:1000px),
screen and (min-width:1250px) {
    .pagecontent-main:nth-last-child(2) .paginationsortfilters {
        display: flex;
        flex-direction: row;
        padding-left: var(--wrapper-padding);
        padding-right: var(--wrapper-padding);
    }
    .pagecontent-main:nth-last-child(2) .paginationsortfilters > * {
        width: auto;
    }
        .pagecontent-main:nth-last-child(2) .paginationsortfilters > *:not(.sort),
        .pagecontent-main:nth-last-child(2) .paginationsortfilters > *:not(.filters) {
            padding-top: 0;
            padding-bottom: 0;
        }

        .pagecontent-main:nth-last-child(2) .paginationsortfilters > * + * {
            margin-left: 1em;
            border: none;
            box-shadow: none;
        }


    .pagecontent-main:nth-last-child(2) .filters label::after,
    .pagecontent-main:nth-last-child(2) .sort label::after {
        right: 0;
    }

    .pagecontent-main:nth-last-child(2) .pagination > p:first-child {
        margin-right: 0;
    }
    .pagecontent-main:nth-last-child(2) .pagination > p:last-child {
        margin-left: 0;
    }

    .pagecontent-main:nth-last-child(2) .paginationsortfilters .pagination {
        margin-left: 0;
        margin-right: auto;
        padding: 0;
        width: auto;
        background: none;
        border: none;
        box-shadow: none;
    }
}


/* @end Pagination */
@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style: normal;
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0");
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"),
    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"),
    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"),
    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"),
    url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
}

/* @group Editor */
.markItUpHeader > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    background: var(--toolbar-background);
    border: 1px solid var(--textcolor--quartenary--transparent2);
    border-radius: 0.25em 0.25em 0 0;
}
    .pagecontent-main .markItUpHeader > ul {
        max-width: none;
    }

.markItUpHeader > ul > * {
    padding: 0;
}
    .markItUpHeader > ul > *::before {
        content: normal;
    }
    .markItUpHeader > ul > * + * {
        margin-top: 0;
    }

.markItUpSeparator {
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 10em;
    border-left: 1px solid var(--textcolor--quartenary--transparent2);
}

.markItUpButton a {
    position: relative;
    display: block;
    width: 2.5em;
    height: 3em;
    overflow: hidden;
    text-indent: 100em;
    color: inherit;
    white-space: nowrap;
}

.markItUpButton a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-indent: 0;
    font-family: Courier, monospace;
}

/* buttons that are using custom icons from the icons font */
.markItUpButton8 a::before,
.markItUpButton9 a::before,
.markItUpButton10 a::before,
.markItUpButton11 a::before {
    font-family: icons;
    font-size: 0.8em;
}

.markItUpButton1 a::before {
    content: 'H2';
}

.markItUpButton2 a::before {
    content: 'H3';
}

.markItUpButton3 a::before {
    content: 'H4';
}

.markItUpButton4 a::before {
    content: 'B';
}

.markItUpButton5 a::before {
    content: 'I';
}

.markItUpButton6 a::before {
    content: '\B6';
}

.markItUpButton7 a::before {
    content: 'S\336';
}

.markItUpButton8 a::before {
    content: '\EA09';
}

.markItUpButton9 a::before {
    content: '\EA0B';
}

.markItUpButton10 a::before {
    content: '\EA0D';
}

.markItUpButton11 a::before {
    content: '\EA0C';
}

.markItUpButton12 a::before {
    content: '\201C';
    font-size: 1.7em;
    font-family: Georgia, serif;
}

.markItUpButton13 a::before {
    font-family: 'FontAwesome';
    content: "\F11B";
    font-size: 1.2em;
}

.markItUpContainer textarea {
    margin-top: 0;
    max-width: none!important;
    width: 100%;
    border-top: none;
    border-radius: 0 0 0.25em 0.25em;
}

.markItUpFooter {
    display: none;
}

.markItUpPreviewFrame {
    display: block;
    margin-top: 0;
    width: 100%;
    /* Must be changed to a fixed value if an iframe will be used by the editor */
    height: auto;
    padding: 1em 2em;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, .075);
    border-top: none;
    border-radius: 0 0 0.25em 0.25em;
}

/* @end Editor */
.pagecontent-main .comments {
    max-width: none;
}

/* @group Comment */
.comment {
    display: flex;
    justify-content: space-between;
}

.comment > * + * {
    margin-top: 0;
    margin-left: calc(var(--layoutsection-horizontalspacing) / 3);
}

.comment-details {
    width: 100%;
}

.comment-header {
    position: relative;
    padding: 1em 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .75)
}

.comment-header > * + * {
    margin-top: 0.5em;
}
.comment-patch {
    display: inline-block;
    padding: 0.5em 0.75em;
    font-size: 0.75rem;
    text-transform: uppercase;
    background: #252c30;
    border-radius: 0.25em;
    opacity: 0.7;
}

.comment .comment .comment-content {
    font-size: 0.95em;
    opacity: 0.8;
}
/* @end Comment */


/* @group Comment footer */
.comment-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.95rem;
}
.comment-footer > * + * {
    margin-top: 0;
    margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
}

.comment-footer > :not([class]) > a:not([class]),
.comment-footer > :not([class]) > button:not([class]) {
    color: var(--textcolor--quartenary--transparent50);
    border-bottom: 1px solid currentColor;
}
    .comment-footer > :not([class]) > a:not([class]):hover,
    .comment-footer > :not([class]) > button:not([class]):hover {
        color: var(--textcolor--quartenary);
    }

.comment-footer .managementactions {
    width: 100%;
}
    .comment-footer > * + .managementactions {
        margin-top: calc(var(--section-verticalspacing) / 1.5);
        margin-left: 0;
    }

@media screen and (min-width:650px) and (max-width:1000px) {
    .comment-footer .managementactions {
        width: auto;
    }
        .comment-footer > * + .managementactions {
            margin-top: 0;
            margin-left: auto;
            margin-right: 0;
        }
}
/* @end Comment footer */



@media screen and (min-width: 700px) {
    .comment-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }

    .comment-header > * + * {
        margin-top: 0;
        margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
    }
        .comment-header > .comment-patch {
            margin-left: auto;
            margin-right: 0;
        }
        .comment-header > :last-child {
            margin-top: 0.25em;
            margin-left: 0;
            width: 100%;
        }
}



@media screen and (min-width: 900px) {
    .comment-header > .comment-patch {
        margin-left: auto;
        margin-right: 0;
    }
    .comment-header > :last-child {
        margin-left: auto;
        margin-right: 0;
        width: auto;
        text-align: right;
    }
        .comment-header > .comment-patch + :last-child {
            margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
        }
}

/* @group Mega menu */
.megamenu {
    --megamenu-padding--vertical: 2em;
    --megamenu-padding--horizontal: 3em;
    --megamenu-item-spacing--horizontal: 3em;
    --megamenu-item-spacing--vertical: 2.5em;
    --widget-background:
        var(--widget-background-grungeeffect),

        /* the stripes */
        linear-gradient(-45deg, var(--widget-background-stripes) 25%, transparent 25%, transparent 50%, var(--widget-background-stripes) 50%, var(--widget-background-stripes) 75%, transparent 75%, transparent),

        /* simulates the mesh gradient */
        radial-gradient(farthest-corner at center, var(--widget-background-main) 0%, var(--widget-background-main) 30%, var(--widget-background-shadow) 100%);
    position: absolute;
    left: 0;
    top: calc(100% + 1px);
    z-index: 2;
    margin: 0;
    width: 100%;
    padding: var(--megamenu-padding--vertical) var(--megamenu-padding--horizontal);
    visibility: hidden;
    line-height: 1.2;
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--fontfamily--titles);
    color: var(--textcolor--secondary);
    background: var(--widget-background);
    background-size: var(--widget-background-size);
    background-position: var(--widget-background-position);
    background-blend-mode: var(--widget-background-blendmode);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 2em 2em 0 rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all 0.15s ease 0s;
}
    @media screen and (min-width: 700px) {
        :hover > .megamenu {
            z-index: 3;
            transform: translateY(0);
            visibility: visible;
            opacity: 1;
        }
    }


    @media screen and (min-width: 800px) {
        .megamenu {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
    }

    .megamenu--columns {
        padding: 0;
    }

    /* Top border */
    .megamenu::before {
        content: '';
        position: absolute;
        left: 0;
        top: -0.2em;
        width: 100%;
        height: 37px;
        background: url(../images/sprite.png) repeat-x left -4360px;
    }

    /* Bottom border */
    .megamenu::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        width: 100%;
        height: 37px;
        background: url(../images/sprite.png) repeat-x left -4360px;
        transform: scaleY(-1);
    }

/* The main sections of a mega-menu */
.megamenu--columns > div {
    position: static;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    padding: var(--megamenu-item-spacing--vertical) var(--megamenu-item-spacing--horizontal);
}
    @media screen and (min-width: 800px) {
        .megamenu--columns > li:not(:only-of-type),
        .megamenu--columns > div:not(:only-of-type) {
            width: 50%;
        }

        /* Border between the columns */
        .megamenu--columns > li:nth-child(2)::before,
        .megamenu--columns > div + div::before {
            content: '';
            position: absolute;
            top: 0;
            z-index: -1;
            width: 3px;
            height: 100%;
            background:
                linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 100%),
                linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0) 100%);
            background-position: 0 0, 1px 0;
            background-repeat: no-repeat;
            background-size: 1px 100%;
        }

        /* The gradient between the columns */
        .megamenu--columns > li:nth-child(2)::after,
        .megamenu--columns > div + div::after {
            content: '';
            position: absolute;
            top: 0;
            z-index: -1;
            width: 50%;
            height: 100%;
            background: radial-gradient(farthest-side at -10% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
        }
    }

    @media screen and (min-width: 1100px) {
        .megamenu--columns > li:not(:only-of-type),
        .megamenu--columns > div:not(:only-of-type) {
            width: 33.3%;
        }

        .megamenu--columns > :first-child:nth-last-child(2),
        .megamenu--columns > :first-child:nth-last-child(2) ~ * {
            width: 50%;
        }

        .megamenu--columns > :first-child:nth-last-child(3),
        .megamenu--columns > :first-child:nth-last-child(3) ~ * {
            width: 33.3%;
        }
        .megamenu--columns > :first-child:nth-last-child(4),
        .megamenu--columns > :first-child:nth-last-child(4) ~ * {
            width: 25%;
        }

        /* Border between the columns */
        .megamenu--columns > li:nth-child(3)::before {
            content: '';
            position: absolute;
            top: 0;
            z-index: -1;
            width: 3px;
            height: 100%;
            background:
                linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 100%),
                linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0) 100%);
            background-position: 0 0, 1px 0;
            background-repeat: no-repeat;
            background-size: 1px 100%;
        }

        /* The gradient between the columns */
        .megamenu--columns > li:nth-child(3)::after {
            content: '';
            position: absolute;
            top: 0;
            z-index: -1;
            width: 50%;
            height: 100%;
            background: radial-gradient(farthest-side at -10% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
        }
    }

.megamenu--columns > li > a {
    padding: 1em 1.75em;
}
    .megamenu--columns > li > a:hover {
        text-decoration: underline;
    }



.megamenu--columns > * * + section {
    margin-top: var(--megamenu-item-spacing--vertical);
}

.megamenu-title {
    margin-top: 0;
    font-weight: 700;
    line-height: 1.1;
    font-size: 1.25em;
    font-family: var(--fontfamily--titles);
    letter-spacing: .025em;
    color: var(--textcolor);
}

.megamenu-content {
    margin-top: calc(var(--megamenu-item-spacing--vertical) / 1.5);
}
    .megamenu-content--withlabels {
        margin-top: calc(var(--megamenu-item-spacing--vertical) / 2);
    }

.megamenu-content > * + * {
    margin-top: calc(var(--megamenu-item-spacing--vertical) / 3);
}
    .megamenu-content--withlabels > * + * {
        margin-top: calc(var(--megamenu-item-spacing--vertical) / 2);
    }


.megamenu-content > li > a:not([class]) {
    color: #e6c6a1;
    opacity: 0.7;
    border-bottom: 1px solid rgba(228, 196, 159, 0.2);
}
    .megamenu-content > li > a:not([class]):hover {
        opacity: 1;
    }
/* @end Mega menu */

/* @group Label list */
.labellist {
    --labelslist-spacing: 0.35em;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 1em;
    margin-left: calc(var(--labelslist-spacing) * -1);
    margin-bottom: calc(var(--labelslist-spacing) * -1);
    font-size: 0.7rem;
    line-height: 1;
}
    a + .labellist {
        margin-top: 0.75em;
    }

.labellist > * {
    margin-top: 0;
    margin-left: var(--labelslist-spacing);
    margin-bottom: var(--labelslist-spacing);
    max-width: 100%;
    padding-left: 0;
}
    .labellist > *::before {
        content: normal;
    }
/* @end Label list */



/* @group Label */
/* Specificity intended */
.label.label {
    --label-anglesize: 1.37em;
    --label-background: #5B5447;
    --label-color: rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    padding: 0.35em;
    padding-left: calc(var(--label-anglesize) / 2);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.65rem;
    line-height: 1;
    color: var(--label-color);
    font-family: var(--fontfamily);
    font-weight: 600;
    text-transform: uppercase;
}
    .label.label[style*="--label-background"] {
        --label-background: #5B5447;
        --label-color: #fff;
        text-shadow: 0 0 0.25em rgba(0, 0, 0, 0.75);
    }
    a.label.label {
        border-bottom: none;
    }

    .label.label::before,
    .label.label::after {
        content: '';
        position: absolute;
        background: var(--label-background);
    }
        /* The simulated background */
        .label.label::before {
            left: calc(var(--label-anglesize) / 2);
            top: 0;
            z-index: -1;
            width: calc(100% - var(--label-anglesize) / 2);
            height: 100%;
            border-radius: 0.25em;
            border-left: none;
        }
        /* The angle of the label (pointing part) */
        .label.label::after {
            left: 1px;
            top: 50%;
            z-index: -1;
            width: var(--label-anglesize);
            height: var(--label-anglesize);
            border-radius: 0.45em;
            transform: translateY(-50%) rotate(45deg);
        }
/* @end Label */


/* @group Added by a previous dev */
/* Probably used on the premium pages */
.label-grey {
    background-color: #424B58;
}
.label-green {
    background-color: #436A47;
}
.label-red {
    background-color: #6A4343;
}
.label-gold {
    background-color: #775D3D;
}
/* @end Added by a previous dev */
@custom-media --pagenav-alwaysvisible screen and (min-width: 700px); /* done */
@custom-media --before-pagenav-alwaysvisible screen and (max-width: 700px);

@custom-media --pagecontentsidebar-showascolumn screen and (min-width: 1000px);
@custom-media --pagecontentsidebar-columnlayout screen and (min-width: 650px) and (max-width: 1000px);

@custom-media --pagecontentmain-desktopspace screen and (min-width: 850px) and (max-width: 1000px), screen and (min-width: 1250px);

@custom-media --pagecontentmaincomplex-showascolumn screen and (min-width: 1220px);
@custom-media --pagesearch-fullyvisible screen and (min-width: 1000px);


/* @group Vertical spacing rules */
* + * {
    margin-top: calc(var(--section-verticalspacing) / 1.5);
}
    .pagecontent-main > * + *,
    .pagecontent-sidebar > * + * {
        margin-top: var(--section-verticalspacing);
    }
        :root > *,
        .pagecontent > * + *,
        .pagecontent svg + *,
        .pagecontent * + svg,
        [type="hidden"] + *,
        [hidden] + * {
            margin-top: 0;
        }

    p + p {
        margin-top: calc(var(--section-verticalspacing) / 3);
    }

    * + br,
    br + * {
        margin: 0;
    }
/* @end Vertical spacing rules */




/* @group Page content */
.pagecontent-wrap {
    position: relative;
    z-index: 1;
    margin: calc(var(--section-verticalspacing) / 2) auto 0;
    max-width: var(--wrapper-width);
    padding: var(--pagecontent-verticalpadding) var(--wrapper-padding) 15em;
    background: url(../images/background-content.jpg) repeat-y left top;
    background-size: 100%;
}
    .pagecontent-wrap::before {
        content: '';
        position: absolute;
        left: 0;
        top: -1em;
        width: 100%;
        height: 34px;
        background: url(../images/sprite.png) no-repeat left top;
    }

@media screen and (min-width:700px) {
    .pagecontent-wrap {
        margin-top: 0;
    }

    :not(.banner) + .pagecontent-wrap::before {
        content: normal;
    }
}

.pagecontent-wrap > .banner:first-child + *,
.pagecontent-wrap > .pagecontent-nav:first-child + * {
    margin-top: var(--pagecontent-verticalpadding);
}

.pagecontent {}
    /* The lava cracks */
    .pagecontent::before,
    .pagecontent::after {
        content: '';
        position: absolute;
        top: 0;
        z-index: -1;
        width: 556px;
        height: 584px;
        max-width: 100%;
        background: url(../images/sprite.png) no-repeat left -340px;
    }
        .pagecontent::before {
            left: 0;
            background-position: -20px -360px;
        }
        .pagecontent::after {
            right: 0;
            transform: scaleX(-1);
            background-position: -30px -380px;
        }

    * + .pagecontent {
        margin-top: var(--section-verticalspacing);
    }

.pagecontent > * + *,
.pagecontent-main-columnlayout > * + * {
    margin-top: var(--section-verticalspacing);
}


@media screen and (min-width: 1000px) {
    .pagecontent,
    .pagecontent-main-columnlayout {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }

    .pagecontent > * + *,
    .pagecontent-main-columnlayout > * + * {
        margin-top: 0;
    }

        .pagecontent > :first-child:last-child,
        .pagecontent-main-columnlayout > :first-child:last-child {
            width: 100%;
        }

        .pagecontent > :first-child:not(:last-child):not(.full),
        .pagecontent-main-columnlayout > :first-child:not(:last-child):not(.full) {
            width: calc(100% - var(--pagecontent-sidebar-adwidth) - var(--layoutsection-horizontalspacing));
        }

        .pagecontent > .pagecontent-sidebar,
        .pagecontent-main-columnlayout > .pagecontent-sidebar {
            width: var(--pagecontent-sidebar-adwidth);
        }
}

/* @end Page content */


/* @group Page content main */
.pagecontent-main {
    --pagecontent-main-minheight: 513px;
    min-height: var(--pagecontent-main-minheight);
    color: var(--textcolor--secondary);
}
    /* The throne background that overlaps both the content and the footer
     * - only the top part (the bottom part is added to the footer so the footer
     * won't need a z-index -> needed to be able to use the messaging component) */
    .pagecontent-main::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -0.5em;
        z-index: -1;
        width: 100%;
        height: var(--pagecontent-main-minheight);
        background: url(../images/sprite.png) no-repeat center -2420px;
    }

    /* The bottom border (needed to be here, so the throne background stays on
    top of it without affecting the content) */
    .pagecontent-main::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1em;
        z-index: -2;
        width: 100%;
        height: 34px;
        background: url(../images/sprite.png) no-repeat left top;
        transform: scaleY(-1);
    }


/* In the case of guides / news and other user-generated data,
   the backend has its limitations, as the vote component is positioned right
   after the article element, so the positioning must be done by adding a special
   class on the pagecontent-main. */
.pagecontent-main--withvotewidget {
    --pagecontentmainvotewidget-width: 2em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pagecontent-main--withvotewidget > .vote {
    margin: 0;
    width: var(--pagecontentmainvotewidget-width);
}

.pagecontent-main p,
.pagecontent-main ul,
.pagecontent-main ol {
    max-width: var(--textcontent-maxwidth);
}
    .news-comments p:empty,
    .pagecontent-main p:empty,
    .pagecontent-main ul:empty,
    .pagecontent-main ol:empty {
        display: none;
    }
    .pagecontent-main > :not(.pagecontent-main-columnlayout):last-child:not(:first-child) p:not(.has-max-width),
    .formmain p {
        max-width: none;
    }

/* @end Page content main */

/* @group Page content - main header */
.pagecontent-main-header + *:not(.paginationsortfilters):not(.pagination) {
    position: relative;
    padding-top: var(--section-verticalspacing);
}
    .pagecontent-main-header + *:not(.paginationsortfilters):not(.pagination)::before {
        content: '';
        position: absolute;
        left: calc(var(--wrapper-padding) * -1);
        top: 0;
        width: calc(100% + var(--wrapper-padding) * 2);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow:
            0 -1px 0 0 rgba(0, 0, 0, 0.5),
            inset 0 -1px 0 0 rgba(0, 0, 0, 0.5);
    }


.pagecontent-main-header > * + * {
    margin-top: calc(var(--section-verticalspacing) / 2);
}
.pagecontent-main-header p {
    opacity: 0.6;
}
    .pagecontent-main-header > p {
        opacity: 1;
    }


@media screen and (min-width: 600px) {
    .pagecontent-main-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-left: calc(var(--layoutsection-horizontalspacing) / 2 * -1);
        margin-bottom: calc(var(--section-verticalspacing) / 2 * -1);
    }
    .pagecontent-main-header > * {
        margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
        margin-bottom: calc(var(--section-verticalspacing) / 2);
    }
        .pagecontent-main-header > .statistics {
            margin-left: auto;
        }
    .pagecontent-main-header > * + * {
        margin-top: 0;
    }
}
/* @end Page content - main header */


/* @group Page content sidebar */
.pagecontent-sidebar {
    --pagecontentsidebar-padding--horizontal: 2.25rem;
    --title-verticalspacing: 2rem;
}

@media screen and (min-width: 650px) and (max-width: 1000px) {
    .pagecontent-sidebar {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-left: calc(var(--layoutsection-horizontalspacing) / 2 * -1);
    }
    .pagecontent-sidebar > * {
        margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
        width: calc(50% - var(--layoutsection-horizontalspacing) / 2);
    }
    .pagecontent-sidebar > .banner {
        width: 100%;
    }
}

/* if a direct child of the sidebar doesn't have a class, add the horizontal padding to it */
.pagecontent-sidebar > *:not([class]) {
    padding-left: var(--pagecontentsidebar-padding--horizontal);
    padding-right: var(--pagecontentsidebar-padding--horizontal);
}

.pagecontent-sidebar > *:not([class]) .title {
    color: var(--textcolor--tertiary);
}
/* @end Page content sidebar */





/* @group Banners */
.banner {
    position: relative;
    text-align: center;
    width: 100%;
    overflow: hidden;
}
    body > .banner {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    * + .banner {
        margin-top: calc(var(--section-verticalspacing) * 2);
    }
        .pagecontent-sidebar * + .banner {
            margin-top: var(--section-verticalspacing);
        }

    .pagecontent-wrap > .banner:last-child {
        margin-bottom: -5em;
    }

    .article > .banner:first-child {
        display: none;
    }

@media screen and (min-width: 900px) {
    .article > .banner:first-child {
        display: block;
        float: right;
        margin-left: var(--layoutsection-horizontalspacing);
        margin-bottom: var(--section-verticalspacing);
    }
}

/* TODO: The custom media postcss plugin seems to have been removed. Find a solution for using some kind of variables for the most used media queries  */
@media screen and (min-width: 1000px) {
    /* Added container constraint, just to make sure the result will be fine (container must be compatible with the sticky position) */
    .pagecontent-sidebar .banner--sticky {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        top: 1.25em;
        z-index: 10;
    }
}
/* @end Banners */



/* @group Content header */
.contentheadergroup > * + * {
    margin-top: calc(var(--section-verticalspacing) / 2);
}
.contentheadergroup ~ .paginationsortfilters {
    margin-top: 0.5em;
}

.contentheadergroup ul > *,
.contentheadergroup ol > * {
    padding-left: 0;
}
    .contentheadergroup ul > *::before,
    .contentheadergroup ol > *::before {
        content: normal;
    }

.contentheader {
    --contentheader-spacing: 1em;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: var(--contentheader-spacing);
    padding-bottom: var(--contentheader-spacing);
    border-bottom: 1px solid var(--content-bordercolor);
}



/* @group Contentheader - breadcrumb (for external posts - eg. devtracker) */
.contentheader-breadcrumb {
    color: var(--textcolor--quartenary)
}
.contentheader-breadcrumb > * {
    margin-top: 0;
    color: inherit;
}

.contentheader-breadcrumb h3 {
    font-size: inherit;
    line-height: inherit;
    font-weight: normal;
    font-family: var(--fontfamily);
    opacity: 0.5;
}

.contentheader-breadcrumb a {
    opacity: 0.7;
    border-bottom-color: currentColor;
}

.contentheader-breadcrumb .breadcrumb > * {
    opacity: 1;
}
    .contentheader-breadcrumb .breadcrumb > * + * {
        margin-left: 0.5em;
    }

.contentheader-breadcrumb .breadcrumb > ::before {
    margin-right: 0.5em;
}

/* @end Contentheader - breadcrumb (for external posts - eg. devtracker) */

.contentheader-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contentheader-details > * + * {
    margin-top: 0;
    margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
}

.contentheader-details .numberofcomments {
    font-size: 1em;
}

.contentheader .managementactions a,
.contentheader .managementactions button {
    padding: 1.5em 1.5em;
}

@media screen and (min-width:700px) {
    .contentheader-breadcrumb {
        display: flex;
        justify-content: flex-start;
    }

    .contentheader-breadcrumb > * + * {
        margin-left: 0.25em;
    }
}

@media screen and (min-width: 1000px) {
    .contentheadergroup {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
    .contentheadergroup > * + * {
        margin-top: 0;
        margin-left: var(--layoutsection-horizontalspacing);
    }
    .contentheadergroup > .contentheader {
        width: calc(100% - var(--banner-width--vertical) - var(--layoutsection-horizontalspacing));
    }
}

/* @end Content header */

:root {
    --pageheader-nav-mobilebackground-height: 5rem;
    --pageheader-nav-mobilebackground-offset: 0.5rem;
    --pageheader-nav-controller-width: 3rem;
}

@media screen and (min-width: 500px) {
    :root {
        --pageheader-nav-controller-width: 4rem;
    }
}

/* @group Page header */

* + .pageheader {
    position: relative;
    margin-top: 0;
}
    /* grunge background for the mobile view of the navbar */
    .pageheader::before {
        content: '';
        position: absolute;
        left: 0;
        top: var(--pageheader-nav-mobilebackground-offset);
        z-index: 1;
        width: 100%;
        height: 72px;
        background: url(../images/sprite.png) no-repeat left -4570px;
    }

@media screen (min-width: 900px) {
    .pageheader::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        z-index: -1;
        width: 900px;
        height: 500px;
        transform: translateX(-50%);
        background: url(../images/sprite.png) no-repeat left -6250px;
    }
}

@media (max-width: 699px) {
    .pageheader {
        margin-bottom: calc(var(--section-verticalspacing) / 2 * -1);
    }
}

.pageheader a {
    color: inherit;
}
    .pageheader a:hover {
        border-color: transparent;
    }

/* Reset lists */
.pageheader ul:not([class]) > *,
.pageheader ol:not([class]) > * {
    position: static;
    padding-left: 0;
}
    .pageheader ul:not([class]) > *::before,
    .pageheader ol:not([class]) > *::before {
        content: normal;
    }

.pageheader * + *,
.pagefooter * + * {
    margin-top: 0;
}


@media screen and (min-width:700px) {
    .pageheader::before {
        content: normal;
        display: none;
    }
}

/* @group Page header secondary nav */
:root {
    --pageheader-secondarynav-padding--horizontal: 1.25em;
}
@media screen and (min-width: 800px) {
    :root {
        --pageheader-secondarynav-padding--horizontal: 0;
    }
}
.pageheader-secondarynav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    height: var(--pageheader-nav-mobilebackground-height);
    max-width: var(--wrapper-width);
    padding-left: var(--pageheader-secondarynav-padding--horizontal);
    padding-right: var(--pageheader-secondarynav-padding--horizontal);
    font-size: 0.85em;
    font-family: var(--fontfamily--titles);
    font-weight: bold;
}

.pageheader-secondarynav > * + * {
    margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
}
.pageheader-secondarynav > ul {
    display: flex;
    align-items: center;
    align-content: center;
}
/* default - not displayed on mobile */
.pageheader-secondarynav > .pageheader-secondarynav-social {
    display: none;
}


/* @group Secondary Nav - account */
.pageheader-secondarynav-account {
    position: relative;
    z-index: 3;
    margin-left: auto;
}

.pageheader-secondarynav-account > * + * {
    margin-left: 0.75em;
}

@media screen and (max-width: 800px) {
    .pageheader-secondarynav-account > * + * {
        margin-left: calc(var(--layoutsection-horizontalspacing) / 4);
    }
}

/* User image */
.pageheader-secondarynav-account img {
    width: var(--userimage-size--medium);
    vertical-align: middle;
}
/* The user name */
.pageheader-secondarynav-account img + * {
    position: relative;
    display: none;
}
.pageheader-secondarynav-account img + *::after {
    content: '\2303';
    position: absolute;
    left: calc(100% + 0.5em);
    top: 50%;
    transform: translateY(-50%) scaleY(-1);
    font-size: 0.75em;
    color: var(--textcolor--quartenary);
    font-family: Arial, sans-serif;
}

/* Account icons */
.pageheader-secondarynav-account .icon--exclusive {
    font-size: 1.65em;
    color: var(--textcolor--quartenary);
}

.pageheader-secondarynav-account .notificationcount {
    margin-left: -1.25em;
}

/* The changes are too complex to make them mobile-first */
@media screen and (max-width: 700px) {
    .pageheader-secondarynav-account .button {
        padding: 0.85em 0;
        box-shadow: none;
    }
        .pageheader-secondarynav-account .button::after {
            content: normal;
        }

    .pageheader-secondarynav-account svg {
        display: none;
    }
}
@media screen and (max-width: 960px) {
    .pageheader-secondarynav-account .button--remove-ads {
        display: none;
    }
}
@media screen and (min-width: 701px) and (max-width: 900px) {
    .pageheader-secondarynav-account .button {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

@media screen and (max-width: 500px) {
    .pageheader-secondarynav-account > li + li {
        margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
    }
}


@media screen and (min-width: 700px) {
    .pageheader-secondarynav-account {
        margin-left: auto;
    }

    /* The user name */
    .pageheader-secondarynav-account img + * {
        display: inline-block;
        margin-left: 0.25em;
        max-width: 10em;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* @end Secondary Nav - account */


/* @group Page header - secondary nav - social */
.pageheader-secondarynav-social > * + * {
    margin-left: calc(var(--layoutsection-horizontalspacing) / 3);
}

.pageheader-secondarynav-social .icon {
    box-sizing: content-box;
    white-space: nowrap;
    width: 1.5em;
    font-size: 1.4em;
    overflow: hidden;
    color: var(--textcolor--quartenary);
    opacity: 0.6;
}
    .pageheader-secondarynav-social .icon::before {
        margin-right: 1000em;
    }

    .pageheader-secondarynav-social .icon:hover {
        opacity: 1;
    }

@media screen and (min-width: 700px) {
    .pageheader-secondarynav > .pageheader-secondarynav-social {
        display: flex;
    }
}
/* @end Page header - secondary nav - social */





@media screen and (min-width: 1100px) {
    .pageheader-secondarynav {
        justify-content: space-between;
    }
}
/* @end Page header secondary nav */

/* @group Triggerable item controller input */
.pageheader-triggerableitem-controllerinput {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
}
/* @end Triggerable item controller input */


/* @group Page header - search */
:root {
    --pageheader-search-controller-width: 4em;
    --pageheader-search-button-width: 1.5em;
}

.pageheader-search-controller {
    position: absolute;
    left: var(--pageheader-nav-controller-width);
    z-index: 1;
    margin: 0;
    width: var(--pageheader-search-controller-width);
    height: calc(var(--pageheader-nav-mobilebackground-height) - var(--pageheader-nav-mobilebackground-offset));
    text-align: center;
    text-indent: -1000vw;
    white-space: nowrap;
    border-right: 1px solid hsla(0, 0%, 100%, 0.2);
    box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 30%);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .pageheader-search-controller--close,
    .pageheader-triggerableitem-controllerinput[value="search"]:checked ~ * .pageheader-search-controller--open {
        display: none;
    }
        .pageheader-triggerableitem-controllerinput[value="search"]:checked ~ * .pageheader-search-controller--close {
            display: block;
        }

    .pageheader-search-controller:hover {
        background: rgba(255, 255, 255, 0.025);
    }

    .pageheader-search-controller::before,
    .pageheader-search button::before {
        content: '\26B2';
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-family: Arial, sans-serif;
        font-size: 1.15rem;
        line-height: 1;
        text-indent: 0;
        transform: rotate(45deg);
        transition: none;
    }
        .pageheader-search-controller--close::before {
            content: '\D7';
            transform: none;
        }

@media screen and (min-width: 700px) {
    .pageheader-search-controller {
        position: relative;
        left: auto;
        margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
        width: auto;
        height: auto;
        border: none;
        box-shadow: none;
    }
}

.pageheader-search {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    width: 100%;
    padding: 0 1em;
    visibility: hidden;
    font-family: var(--fontfamily--titles);
    opacity: 0;
    transform: translateY(-100%);
    background: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
    .pageheader-triggerableitem-controllerinput[value="search"]:checked ~ * .pageheader-search {
        z-index: calc(var(--z-index-pageheader-nav-wrapper) + 2);
        visibility: visible;
        opacity: 1;
        transform: translateY(calc(var(--pageheader-nav-mobilebackground-height) - var(--pageheader-nav-mobilebackground-offset)));
    }

.pageheader-search input {
    width: 100%;
    padding: 2em 0;
    letter-spacing: 0.075em;
    color: var(--textcolor);
    background: transparent;
    border-radius: 0;
    border: none;
}
    .pageheader-search input:-webkit-autofill,
    .pageheader-search input:-webkit-autofill:hover,
    .pageheader-search input:-webkit-autofill:focus {
        border: none;
        -webkit-text-fill-color: var(--textcolor);
        -webkit-transition: background-color 5000s ease-in-out 0s;
        transition: background-color 5000s ease-in-out 0s;
    }
.pageheader-search button {
    position: relative;
    white-space: nowrap;
    width: var(--pageheader-search-button-width);
    height: var(--pageheader-search-button-width);
    text-indent: -1000vw;
}


@media screen and (min-width: 1100px) {
    /* Intended specificity */
    .pageheader-search,
    .pageheader-triggerableitem-controllerinput[value="search"]:checked ~ * .pageheader-search {
        position: relative;
        z-index: calc(var(--z-index-pageheader-nav-wrapper) + 2);
        visibility: visible;
        width: 17em;
        padding: 0;
        opacity: 1;
        transform: none;
        background: transparent;
    }
        .pageheader-secondarynav-social ~ .pageheader-search {
            margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
        }

    .pageheader-search input {
        padding: 0.5em 0;
        padding-right: calc(var(--pageheader-search-button-width) * 1.5);
        border-bottom: inherit;
    }

    .pageheader-search button {
        position: absolute;
        z-index: 2;
        right: 0;
        top: 50%;
        width: var(--pageheader-search-button-width);
        transform: translateY(-50%);
    }

    /* Intended specificity */
    .pageheader-search-controller,
    .pageheader-triggerableitem-controllerinput[value="search"]:checked ~ * .pageheader-search-controller--close {
        display: none;
    }

}

/* @end Page header - search */

/* @group Page header logo */
.pageheader-logo {
    position: relative;
    z-index: calc(var(--z-index-pageheader-nav-wrapper) + 1);
    margin: -1em auto;
    width: 13em;
    height: calc(var(--pageheader-nav-mobilebackground-height));
    overflow: hidden;
    text-align: center;
    font-family: var(--fontfamily--titles);
    font-weight: bold;
    color: #9CAAB3;
}
@media screen and (min-width: 700px) {
    .pageheader-logo {
        position: absolute;
        left: 50%;
        top: 0.5em;
        margin-top: 0;
        margin-bottom: 0;
        height: calc(var(--pageheader-nav-mobilebackground-height) + 1em);
        transform: translateX(-50%);
    }
}

.pageheader-logo a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -100em;
    background: url(../images/logo.png) no-repeat center top;
    background-size: contain;
}

/* @end Page header logo */




/* @group Page header - mobile background */
.pageheader-mobilebackground {
    position: absolute;
    left: calc(var(--pageheader-nav-mobilebackground-offset) * -1);
    top: calc(var(--pageheader-nav-mobilebackground-offset) * -1);
    display: block;
    width: calc(100% + var(--pageheader-nav-mobilebackground-offset));
    height: calc(var(--pageheader-nav-mobilebackground-height) + var(--pageheader-nav-mobilebackground-offset) * 2);
}


@media screen and (min-width:700px) {
    .pageheader-mobilebackground {
        display: none;
    }
}
/* @end Page header - mobile background */
/* @end Page header */

/* @group Pageheader - nav */
.pageheader-nav-wrapper {
    --pageheader-nav-lastitem-width: 16em;
    --pageheader-nav-padding--vertical: 2.25em;
    --pageheader-nav-padding--horizontal: 0.5em;
    position: absolute;
    left: 0;
    top: 0;
    z-index: var(--z-index-pageheader-nav-wrapper);
    width: 100%;
    font-size: 0.75em;
    font-family: var(--fontfamily--titles);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
@media screen and (min-width: 800px) {
    .pageheader-nav-wrapper {
        --pageheader-nav-padding--horizontal: 0.75em;
    }
}
@media screen and (min-width: 900px) {
    .pageheader-nav-wrapper {
        --pageheader-nav-padding--horizontal: 0.9em;
    }
}
@media screen and (min-width: 1100px) {
    .pageheader-nav-wrapper {
        --pageheader-nav-padding--horizontal: 1.1em;
    }
}
@media screen and (min-width: 1400px) {
    .pageheader-nav-wrapper {
        --pageheader-nav-padding--horizontal: 1.35em;
    }
}
.pageheader-nav-wrapper + * {
    margin-top: 1.25rem;
}

/* The nav contains the background to allow the decorative swords to stay below */
.pageheader-nav {
    position: absolute;
    right: 0;
    top: var(--pageheader-nav-mobilebackground-height);
    /* Allow the submenu to be visible */
    z-index: 2;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.85), transparent 35%, transparent 65%, rgba(0, 0, 0, 0.85) 100%),
        linear-gradient(to bottom, #303b41, #1d272b),
        url(../images/background-content.jpg);
    background-repeat: no-repeat;
    background-position:
        left top,
        left top,
        left center;
    background-size:
        auto,
        auto,
        cover;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: none;
    border-bottom-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.15);
}
    .pageheader-triggerableitem-controllerinput[value="nav"]:checked ~ * .pageheader-nav {
        opacity: 1;
        visibility: visible;
    }

@media screen and (min-width: 700px) {
    .pageheader-nav {
        position: relative;
        top: auto;
        width: auto;
        padding-left: var(--pageheader-nav-padding--horizontal);
        opacity: 1;
        visibility: visible;
    }
    /* The centered decorative background */
    .pageheader-nav::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        z-index: -1;
        width: 666px;
        max-width: 75%;
        height: 100%;
        background: url(../images/sprite.png) no-repeat left -50px;
        transform: translateX(-50%);
    }
}
    /* The top background border */
    .pageheader-nav::before {
        content: '';
        position: absolute;
        left: 0;
        top: -1em;
        width: 100%;
        height: 34px;
        background: url(../images/sprite.png) no-repeat left top;
    }



.pageheader-nav > li {
    position: static;
}
    .pageheader-nav > li + li {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.2);
    }

/* The nav elements */
@media screen and (min-width: 700px) {
    .pageheader-nav > li + li {
        border-top: none;
        box-shadow: none;
    }
}

@media screen and (min-width: 1100px) {
    .pageheader-nav {
        padding-left: var(--pageheader-nav-lastitem-width);
        padding-right: var(--pageheader-nav-lastitem-width);
    }
}

.pageheader-nav > li > a {
    position: relative;
    display: block;
    padding: var(--pageheader-nav-padding--vertical) var(--pageheader-nav-padding--horizontal);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Intended specificity */
.pageheader-nav > li > .pageheader-nav-anchor--affix {
    --pageheader-nav-itemaffix-imagewidth: 59px;
    display: block;
    padding-left: var(--pageheader-nav-itemaffix-imagewidth);
}
    .pageheader-nav-anchor--affix::before,
    .pageheader-nav-anchor--affix::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
    }
        .pageheader-nav-anchor--affix::before {
            width: var(--pageheader-nav-itemaffix-imagewidth);
            height: 28px;
            background: url(../images/sprite.png) no-repeat -100px -5190px;
            transform: translateY(-50%) scale(0.7);
        }

        @media screen and (min-width: 700px) {
            .pageheader-nav-anchor--affix::after {
                width: 100%;
                height: 65%;
                border: 1px solid var(--textcolor--important);
                border-radius: 0.35em;
                opacity: 0.4;
                transform: translateY(-50%);
            }
        }


.pageheader-nav > li > .pageheader-nav-anchor--kalandra {
    --pageheader-nav-itemaffix-imagewidth: 13px;
    display: block;
    padding-left: var(--pageheader-nav-itemaffix-imagewidth);
}
.pageheader-nav-anchor--kalandra::before,
.pageheader-nav-anchor--kalandra::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
}
@media screen and (min-width: 700px) {
    .pageheader-nav-anchor--kalandra::after {
        width: 100%;
        height: 65%;
        border: 3px solid var(--reputationcolor--bad);
        border-radius: 0.35em;
        opacity: 0.4;
        transform: translateY(-50%);
    }
}


.pageheader-nav a > img {
    display: none;
    margin: calc(var(--pageheader-nav-padding--vertical) * -1) 0;
    margin-right: 0.5em;
    width: auto;
    max-height: calc(var(--lineheight) * 1em + var(--pageheader-nav-padding--vertical));
}

@media screen and (min-width: 900px) {
    .pageheader-nav a > img {
        display: inline-block;
    }
}

.pageheader-nav a > svg {
    position: absolute;
    left: 0;
    bottom: -2px;
    z-index: 2;
    width: 100%;
    height: 3px;
    transform: translateX(-10em);
    color: #f00;
    transition: all 0.2s ease;
    opacity: 0;
    filter: drop-shadow(0 0 1em currentColor);
}

    .pageheader-nav-item--current > a > svg,
    .pageheader-nav > li:hover > a > svg {
        transform: none;
        opacity: 1;
    }


@media screen and (min-width: 700px) {
    .pageheader-nav-wrapper {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        opacity: 1;
        visibility: visible;
        max-width: var(--wrapper-width);
    }
        * + .pageheader-nav-wrapper,
        .pageheader-nav-wrapper + * {
            margin-top: 0;
        }

    .pageheader-nav {
        display: flex;
        justify-content: center;
    }
}


/* Decorative elements for the main nav */
@media screen and (min-width: 800px) {
    /* The decorative swords */
    .pageheader-nav-wrapper::before,
    .pageheader-nav-wrapper::after {
        content: '';
        position: absolute;
    }
    /* The left sword */
    .pageheader-nav-wrapper::before {
        left: -2em;
        top: -1.65em;
        width: 74px;
        height: 72px;
        background: url(../images/sprite.png) no-repeat 0 -3420px;
    }
    /* The right sword */
    .pageheader-nav-wrapper::after {
        right: -1.25em;
        top: -1.25em;
        width: 264px;
        height: 97px;
        max-height: 100%;
        background: url(../images/sprite.png) no-repeat 0 -3540px;
    }
}
/* @end Pageheader - nav */


/* @group Page header - nav - mobile nav controller */
.pageheader-nav-controller {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--pageheader-nav-controller-width);
    height: calc(var(--pageheader-nav-mobilebackground-height) - var(--pageheader-nav-mobilebackground-offset));
    text-indent: -100000em;
    font-family: Arial, sans-serif;
    font-weight: normal;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}
    .pageheader-nav-controller:hover {
        background: rgba(255, 255, 255, 0.025);
    }

    .pageheader-nav-controller::before {
        content: '\2630';
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 1.25em;
        text-indent: 0;
    }
        .pageheader-nav-controller--close::before {
            content: '\D7';
        }
        .pageheader-triggerableitem-controllerinput[value="nav"] ~ * .pageheader-nav-controller--close,
        .pageheader-triggerableitem-controllerinput[value="nav"]:checked ~ * .pageheader-nav-controller--open {
            display: none;
        }
            .pageheader-triggerableitem-controllerinput[value="nav"]:checked ~ * .pageheader-nav-controller--close {
                display: block;
            }

@media screen and (min-width: 700px) {
    .pageheader-nav-controller {
        display: none;
    }
}
/* @end Page header - nav - mobile nav controller */
/* @group Page header - classes nav */
.pageheader-classesnav-container {
    --pageheaderclassesnav-item-width: 33.3%;
    --pageheaderclassesnav-item-imagetransform: scale(1.3);
    --pageheaderclassesnav-item-imagetransform-origin: 60% top;
    position: relative;
}

@media screen and (min-width: 450px) {
    .pageheader-classesnav-container {
        --pageheaderclassesnav-item-imagetransform: scale(1.5);
    }
}
@media screen and (min-width: 600px) {
    .pageheader-classesnav-container {
        --pageheaderclassesnav-item-width: 25%;
        --pageheaderclassesnav-item-imagetransform: scale(1.75);
    }
}

@media screen and (min-width: 900px) {
    .pageheader-classesnav-container {
        --pageheaderclassesnav-item-width: 20%;
        --pageheaderclassesnav-item-imagetransform: scale(1.7);
        --pageheaderclassesnav-item-imagetransform-origin: 70% top;
    }
}
@media screen and (min-width: 1100px) {
    .pageheader-classesnav-container {
        --pageheaderclassesnav-item-width: 14.28%;
        --pageheaderclassesnav-item-imagetransform: scale(1.4);
    }
}

.pageheader-classesnav {
    position: relative;
    justify-content: flex-start;
    display: flex;
    overflow-x: hidden;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--wrapper-width);
    font-family: var(--fontfamily--titles);
    font-size: 0.9em;
    letter-spacing: 0.025em;
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.055) 100%),
        url(../images/background-content.jpg);
    background-repeat: no-repeat;
    background-position: left top, left center;
    background-size: auto, cover;
    box-shadow: inset 0 -1px 0 0 #000;
}


    .pageheader-classesnav::before,
    .pageheader-classesnav::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        color: #fff;
        opacity: 0.1;
    }

        .pageheader-classesnav::before {
            top: 0;
            border-top: 1px solid;
        }

        .pageheader-classesnav::after {
            bottom: 1px;
            border-bottom: 1px solid;
        }


@media screen and (min-width: 700px) {
    .pageheader-classesnav-container {
        margin-top: 0;
    }
    .pageheader-classesnav {
        justify-content: space-between;
    }
}


.pageheader-classesnav-item {
    position: relative;
    z-index: 2;
    flex-basis: var(--pageheaderclassesnav-item-width);
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--pageheaderclassesnav-item-width);
    padding: 0.85em 1.5em;
    overflow: hidden;
}
    /* Intended specificity */
    .pageheader .pageheader-classesnav-item {
        position: relative;
        padding: 0.85em 1.5em;
        padding-right: 0.5em;
    }
    .pageheader-classesnav > li + li {
        border-left: 1px solid hsla(0, 0%, 100%, 0.15);
        box-shadow: -1px 0 0 #000;
    }

    .pageheader-classesnav-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .pageheader-classesnav-item::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        background-image: linear-gradient(to right, rgba(11, 11, 11, 0.7), rgba(11, 11, 11, 0.2));
        z-index: -1;
    }
    .pageheader-classesnav-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 170px;
        height: 90px;
        opacity: 0.4;
        background-image: url(../images/sprite.png);
        background-repeat: no-repeat;
        transform-origin: var(--pageheaderclassesnav-item-imagetransform-origin);
        transform: var(--pageheaderclassesnav-item-imagetransform);
        transition: all .15s ease;
    }
        .pageheader-classesnav-item--duelist::before {
            background-position: -100px -5050px;
        }
        .pageheader-classesnav-item--shadow::before {
            background-position: -270px -5050px;
        }
        .pageheader-classesnav-item--marauder::before {
            background-position: -440px -5050px;
        }
        .pageheader-classesnav-item--witch::before {
            background-position: -610px -5050px;
        }
        .pageheader-classesnav-item--ranger::before {
            background-position: -780px -5050px;
        }
        .pageheader-classesnav-item--templar::before {
            background-position: -950px -5050px;
        }
        .pageheader-classesnav-item--scion::before {
            background-position: -1120px -5050px;
        }

        .pageheader-classesnav-item:hover::before {
            opacity: 0.5;
        }
@media (max-width: 1099px) {
    .pageheader-classesnav {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        min-width: 100%;
    }

    .pageheader-classesnav-arrow {
        display: flex;
    }
}



.pageheader-classesnav-item > a {
    display: block;
    font-size: 1.05em;
    line-height: 1;
    color: var(--textcolor--important);
}


.pageheader-classesnav-item ul {
    display: block;
    font-size: 0.75em;
}
    .pageheader-classesnav-item > a + ul {
        margin-top: 0.5em;
    }

.pageheader-classesnav-item ul > * + * {
    margin-top: 0;
}

.pageheader-classesnav-item ul a {
    font-size: 1.15em;
    font-weight: bold;
}

.pageheader-classesnav-item > a i,
.pageheader-classesnav-item ul a {
    color: #B9B191;
}


.pageheader-classesnav-item abbr {
    text-decoration: none;
}
.pageheader-classesnav-item ul > *::after,
.pageheader-classesnav-item ol > *::after {
    content: '>';
    display: inline-block;
    font-size: 0.95em;
    font-weight: normal;
    transform: scaleX(1.2);
}

.pageheader-classesnav-item a:hover {
    text-decoration: underline;
}


.pageheader-classesnav-arrow {
    cursor: pointer;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 9;
    width: var(--pageheaderclassesnav-item-width);
    padding-right: 10px;
    justify-content: flex-end;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.56) 40%,  rgba(0,0,0,0.83) 60%, rgba(0,0,0,1) 100%);
}

    .pageheader-classesnav-arrow:hover {
        opacity: 0.8;
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 40%,  rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.8) 100%);
    }

    .pageheader-classesnav-arrow.hide {
        display: none;
    }

    .pageheader-classesnav-arrow.prev {
        left: 0;
        transform: rotate(180deg);
    }

    .pageheader-classesnav-arrow.next {
        right: 0;
    }

.pageheader-classesnav-arrow img {
    width: 12px;
}


@media screen and (min-width: 1100px) {
    .pageheader-classesnav-arrow {
        display: none;
    }
}


.pageheader-classesnav i {
    display: block;
    font-style: normal;
    opacity: 1;
}

@media screen and (min-width: 1200px) {
    .pageheader-classesnav i {
        display: inline;
    }
}


/* @end Page header - classes nav */

/* @group Page footer */
.pagefooter {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 auto calc(var(--section-verticalspacing) / 1.5 * -1);
    max-width: var(--wrapper-width);
    padding: 6em 0;
    font-size: 0.9em;
    color: #B8A18C;
}
    /* The throne background that overlaps both the content and the footer - only the bottom part */
    .pagefooter::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 390px;
        background: url(../images/sprite.png) no-repeat center -2933px;
    }

.pagefooter > *  {
    margin-bottom: calc(var(--section-verticalspacing) / 1.5);
    margin-left: var(--layoutsection-horizontalspacing);
}
@media screen and (min-width: 800px) {
    .pagefooter {
        justify-content: space-between;
    }
}
.pagefooter > section > * + * {
    margin-top: 1.25em;
}

.pagefooter h2 {
    margin-top: 0;
    font-size: 1.4em;
    font-family: var(--fontfamily--titles);
    letter-spacing: 0.05em;
    font-weight: bold;
}

.pagefooter li {
    padding-left: 0;
}
    .pagefooter li::before {
        content: normal;
    }
    .pagefooter li + li {
        margin-top: 0.5em;
    }

.pagefooter a {
    color: #998675;
}
    .pagefooter ul a {
        opacity: 0.7;
    }
    .pagefooter ul a:hover {
        opacity: 1;
    }
/* @end Page footer */

/* @group Breadcrumb */
/* Uses display inline-block on the children, so that we can make use of the
 * text-overflow: ellipsis on the parent (display: flex doesn't work as needed) */
.breadcrumbwrapper {
    flex-basis: 100%;
    font-size: 0.9em;
}
/* Considering the fact that the breadcrumb wrapper can be found in many containers, a bottom margin approach works better */
.breadcrumbwrapper {
    margin-bottom: 0.5em;
}
.breadcrumbwrapper + *,
.breadcrumbwrapper + .title {
    margin-top: 0;
}

.breadcrumb {
    --breadcrumb-spacing: 0.25em;
    max-width: 100%;
    color: var(--textcolor--secondary);
}

.breadcrumb a {
    color: inherit;
}

.breadcrumb > * {
    display: inline-block;
    padding-left: 0;
    vertical-align: middle;
    opacity: 0.6;
}
    .breadcrumb > *::before {
        content: normal;
    }

    .breadcrumb > :last-child {
        opacity: 1;
        max-width: 85%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .breadcrumb * + * {
        margin-top: 0;
    }

        .breadcrumb > * + * {
            margin-left: var(--breadcrumb-spacing);
        }

            .breadcrumb > * + *::before {
                content: '/';
                position: static;
                margin-right: var(--breadcrumb-spacing);
                opacity: 0.3;
            }
/* @end Breadcrumb */
.pagenav {
    --pagenav-padding--vertical: 1.25em;
    --pagenav-padding--horizontal: 0.75em;
    position: relative;
    z-index: 3;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: var(--wrapper-width);
    font-size: 0.95em;
    font-family: var(--fontfamily--titles);
    color: var(--textcolor--secondary);
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url(../images/background-content.jpg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 -1px 0 0 #000;
    transition: all 0.2s ease 0s;
}
.pageheader-nav-wrapper + nav > .pagenav {
    border-top: none;
}
@media screen and (max-width: 700px) {
    /* The top background border */
    .pagenav::before {
        content: '';
        position: absolute;
        left: 0;
        top: -1em;
        width: 100%;
        height: 34px;
        background: url(../images/sprite.png) no-repeat left top;
    }
}

.pagenav > li {
    position: static;
}

.pagenav a {
    position: relative;
    display: block;
    padding: var(--pagenav-padding--vertical) var(--pagenav-padding--horizontal);
}

.pagenav a > svg {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 3px;
    transform: translateX(-10em);
    color: #70787d;
    transition: all 0.2s ease;
    opacity: 0;
    filter: drop-shadow(0 0 1em currentColor);
}

    .pagenav > li:hover > a > svg,
    .pagenav-item--current > a > svg {
        background: rgba(255, 255, 255, 0.015);
        transform: none;
        opacity: 1;
    }

@media screen and (min-width: 500px) {
    .pagenav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
        .pagecontent > .pagenav:first-child {
            margin-top: calc(var(--pagecontent-verticalpadding) * -1);
            margin-right: calc(var(--wrapper-padding) * -1);
            margin-left: calc(var(--wrapper-padding) * -1);
            width: calc(100% + var(--wrapper-padding) * 2)''
        }


}
:root {
    --title-1-size: 1.8rem;
    --title-2-size: 1.6rem;
    --title-3-size: 1.4rem;
    --title-4-size: 1.25rem;
    --title-5-size: 1.1rem;
    --title-6-size: 1rem;

    --title-verticalspacing: 1.75rem;
}

/* Titles */
/* Titles have a special treatment for the vertical space they create. */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.titlegroup {
    position: relative;
    max-width: 26em;
    font-size: var(--title-6-size);
    line-height: 1.1;
    letter-spacing: 0.025em;
    font-family: var(--fontfamily--titles);
    font-weight: bold;
    font-style: normal;
    color: var(--textcolor);
}
    h1,
    .title-1,
    h1.title:not([class*="title-"]) {
        font-size: var(--title-1-size);
    }
    h2,
    .title-2,
    h2.title:not([class*="title-"]) {
        font-size: var(--title-2-size);
    }
    h3,
    .title-3,
    h3.title:not([class*="title-"]) {
        font-size: var(--title-3-size);
    }
    h4,
    .title-4,
    h4.title:not([class*="title-"]) {
        font-size: var(--title-4-size);
    }
    h5,
    .title-5,
    h5.title:not([class*="title-"]) {
        font-size: var(--title-5-size);
    }

.title + *,
.titlegroup + * {
    margin-top: calc(var(--title-verticalspacing) / 2);
}

    h1 + *,
    .title-1 + *,
    h1.title:not([class*="title-"]) + * {
        margin-top: calc(var(--title-verticalspacing) / 1.75);
    }
    h2 + *,
    .title-2 + *,
    h2.title:not([class*="title-"]) + * {
        margin-top: calc(var(--title-verticalspacing) / 2);
    }
    h3 + *,
    .title-3 + *,
    h3.title:not([class*="title-"]) + * {
        margin-top: calc(var(--title-verticalspacing) / 2.25);
    }
    h4 + *,
    .title-4 + *,
    h4.title:not([class*="title-"]) + * {
        margin-top: calc(var(--title-verticalspacing) / 2.5);
    }
    h5 + *,
    .title-5 + *,
    h5.title:not([class*="title-"]) + * {
        margin-top: calc(var(--title-verticalspacing) / 3);
    }
    h6 + *,
    .title-6 + *,
    h6.title:not([class*="title-"]) + * {
        margin-top: calc(var(--title-verticalspacing) / 3.25);
    }


    * + h1,
    * + .title-1,
    * + h1.title:not([class*="title-"]),
    * + section > h1,
    * + section > .title-1,
    * + section > h1.title:not([class*="title-"]) {
        margin-top: calc(var(--title-verticalspacing) * 2);
    }

    * + h2,
    * + .title-2,
    * + h2.title:not([class*="title-"]),
    * + section > h2,
    * + section > .title-2,
    * + section > h2.title:not([class*="title-"]) {
        margin-top: calc(var(--title-verticalspacing) * 1.75);
    }

    * + h3,
    * + .title-3,
    * + h3.title:not([class*="title-"]),
    * + section > h3,
    * + section > .title-3,
    * + section > h3.title:not([class*="title-"]) {
        margin-top: calc(var(--title-verticalspacing) * 1.25);
    }

    * + h4,
    * + .title-4,
    * + h4.title:not([class*="title-"]),
    * + section > h4,
    * + section > .title-4,
    * + section > h4.title:not([class*="title-"]) {
        margin-top: calc(var(--title-verticalspacing) * 0.9);
    }

    * + h5,
    * + .title-5,
    * + h5.title:not([class*="title-"]),
    * + section > h5,
    * + section > .title-5,
    * + section > h5.title:not([class*="title-"]) {
        margin-top: calc(var(--title-verticalspacing) * 0.8);
    }
    * + h6,
    * + .title-6,
    * + h6.title:not([class*="title-"]),
    * + section > h6,
    * + section > .title-6,
    * + section > h6.title:not([class*="title-"]) {
        margin-top: var(--title-verticalspacing);
    }

.title--secondary {
    color: var(--textcolor--secondary--transparent50);
}

.titlegroup small {
    display: block;
    font-size: 0.75em;
    opacity: 0.5;
}

.titlegroup {
    max-width: 35em;
}
.titlegroup > * + * {
    margin-top: 0.25em;
}

.text-center {
    text-align: center;
}
.uppercase {
    text-transform: uppercase;
}
.underline {
    text-decoration: underline;
}
.relative {
    position: relative;
}

/* @group Slider */
.slider-wrap {
    overflow: hidden;
}

.slider-wrap ul,
.slider-wrap ol {
    max-width: none;
}


.slider-wrap .slider-radio {
    position: absolute;
    z-index: -1;
    visibility: hidden;
}

/* @group Slider - nav */
.slider-nav {
    display: flex;
    justify-content: center;
    width: 100%;
    /* allow the scale of the inner elements to be fully visible */
    padding: 0.5em 0;
    transition: all 0.2s ease-in-out;
    opacity: 0.5;
}
    .slider-wrap:hover .slider-nav {
        opacity: 1;
    }


.slider-nav > * + * {
    margin-top: 0;
    margin-left: 1em;
}

.slider-nav label {
    display: block;
    width: 0.75em;
    height: 0.75em;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 1em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
    .slider-nav label:hover {
        background: rgba(255, 255, 255, 0.7);
        transform: scale(1.6);
    }

    .slider-radio:checked:nth-child(1) ~ .slider-nav > :nth-child(1) label,
    .slider-radio:checked:nth-child(2) ~ .slider-nav > :nth-child(2) label,
    .slider-radio:checked:nth-child(3) ~ .slider-nav > :nth-child(3) label,
    .slider-radio:checked:nth-child(4) ~ .slider-nav > :nth-child(4) label,
    .slider-radio:checked:nth-child(5) ~ .slider-nav > :nth-child(5) label,
    .slider-radio:checked:nth-child(6) ~ .slider-nav > :nth-child(6) label,
    .slider-radio:checked:nth-child(7) ~ .slider-nav > :nth-child(7) label,
    .slider-radio:checked:nth-child(8) ~ .slider-nav > :nth-child(8) label,
    .slider-radio:checked:nth-child(9) ~ .slider-nav > :nth-child(9) label,
    .slider-radio:checked:nth-child(10) ~ .slider-nav > :nth-child(10) label {
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid #fff;
        transform: scale(1.3);
    }

/* @end Slider - nav */


.slider {
    position: relative;
    display: flex;
    justify-content: flex-start;
    transition: all 0.3s ease-in-out;
}
    /* Mximum support for ten featured slides */
    .slider-radio:nth-child(2):checked ~ .slider {
        transform: translateX(-100%);
    }
    .slider-radio:nth-child(3):checked ~ .slider {
        transform: translateX(-200%);
    }
    .slider-radio:nth-child(4):checked ~ .slider {
        transform: translateX(-300%);
    }
    .slider-radio:nth-child(5):checked ~ .slider {
        transform: translateX(-400%);
    }
    .slider-radio:nth-child(6):checked ~ .slider {
        transform: translateX(-500%);
    }
    .slider-radio:nth-child(7):checked ~ .slider {
        transform: translateX(-600%);
    }
    .slider-radio:nth-child(8):checked ~ .slider {
        transform: translateX(-700%);
    }
    .slider-radio:nth-child(9):checked ~ .slider {
        transform: translateX(-800%);
    }
    .slider-radio:nth-child(10):checked ~ .slider {
        transform: translateX(-900%);
    }

.slider > * {
    position: relative;
    width: 100%;
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
}
    .slider > * + * {
        margin-top: 0;
    }

.slider-radio ~ * {
    margin-top: 0;
}
/* @end Slider */

/* @group Expandable */
.expandable {
}
    .expandable + .expandable {
        margin-top: 0;
    }

.expandable ul,
.expandable ol {
    max-width: none;
}
.expandable ul > *,
.expandable ol > * {
    padding-left: 0;
}
    .expandable ul > *::before,
    .expandable ol > *::before {
        content: normal;
    }

.expandable-controller {
    position: absolute;
    visibility: hidden;
    opacity: 0;
}


.expandable-title {
    position: relative;
    margin-top: 0;
    max-width: none;
}
    .expandable--section > .expandable-title {
        padding: 2rem 0;
    }
        .expandable--section > .expandable-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgba(255, 255, 255, 0.075);
            box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.6);
        }

    .expandable--section .expandable--section .expandable-title {
        opacity: 0.8;
    }

.expandable-title > * {
    display: inline-block;
    vertical-align: middle;
}

    .expandable-title label {
        margin: 0 0.25em;
        padding: 0;
        cursor: pointer;
    }

        .expandable-controllerlabel::after,
        .expandable-title label::after {
            content: '+';
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-left: 0.25em;
            width: 1.2em;
            height: 1.2em;
            font-size: 1.1rem;
            line-height: 1;
            background: rgba(37, 44, 48, 0.8);
            border: 1px solid rgba(49, 66, 87, 0.8);
            border-radius: 50%;
        }
            .expandable-title label::after {
                font-size: 1.2rem;
            }

            .expandable-controller:checked ~ .expandable-controllerlabel::after,
            .expandable-controller:checked ~ .expandable-title label::after {
                content: '-';
            }
            .expandable-controllerlabel:hover::after,
            .expandable-title label:hover::after {
                opacity: 0.7;
            }

.expandable-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.1s ease-in-out;
}
    .expandable-controller:not(:checked) ~ .expandable-content {
        margin-top: 0;
    }

    .expandable-controller:checked ~ .expandable-content {
        max-height: 250em;
        opacity: 1;
    }

    .expandable-content > :first-child .expandable-title {
        margin-top: calc(var(--title-verticalspacing) / 2 * -1);
    }
/* @end Expandable */
:root {
    --widget-background-main: #201b1a;
    --widget-background-shadow: #040303;
    --widget-separator-color: #393128;
    --widget-background-stripes: rgba(0, 0, 0, 0.25);

    --widget-background-grungeeffect:
        /* the grunge effect */
        radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1.5px),
        radial-gradient(rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0.075) 1px, transparent 1px),
        radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 1px, transparent 1px),
        radial-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px),

        radial-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 2px),
        radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 2px),
        radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) 1px, transparent 2px),
        radial-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 3px, transparent 4px),
        radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 4px, transparent 6px),
        radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 4px, transparent 6px),
        radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 3px),
        radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 2px, transparent 6px),
        radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 2px);

    --widget-background-size:
        0.75em 0.75em,
        0.5em 0.5em,
        2em 0.75em,
        3em 3em,

        3em 5em,
        3em 5em,
        4em 7em,
        9em 6em,
        7em 9em,
        10em 17em,
        5em 7em,
        8em 5em,
        2em 3em,

        5px 5px,
        auto;

    --widget-background-position:
        left top,
        0.3em 1em,
        -1em 1em,
        -0.25em 0.5em,

        -2em -1em,
        left 2em,
        -1.25em -3em,
        -2em -1em,
        -0.5em 1em,
        0 0,
        0 2em,
        -1em 0,
        0.35em 0,

        5em 2em,
        left top;

    --widget-background-blendmode:
        overlay,
        overlay,
        overlay,
        overlay,

        overlay,
        overlay,
        overlay,
        overlay,
        overlay,
        overlay,
        overlay,
        overlay,
        overlay,

        overlay,
        normal;
}
/* @group Widget */
.widget {
    --widget-padding--horizontal: 1rem;
    --widget-padding--top: 2.25rem;
    --widget-padding--bottom: 2.75rem;

    --widget-color: var(--textcolor--secondary);
    --widget-title-color: var(--textcolor--tertiary);

    --widget-background:
        var(--widget-background-grungeeffect),

        /* the stripes */
        linear-gradient(-45deg, var(--widget-background-stripes) 25%, transparent 25%, transparent 50%, var(--widget-background-stripes) 50%, var(--widget-background-stripes) 75%, transparent 75%, transparent),

        /* simulates the mesh gradient */
        radial-gradient(farthest-corner at center, var(--widget-background-main) 0%, var(--widget-background-main) 30%, var(--widget-background-shadow) 100%);

    position: relative;
    z-index: 1;
    line-height: 1.2;

    overflow-wrap: break-word;
    color: var(--widget-color);

    background: var(--widget-background);
    background-size: var(--widget-background-size);
    background-position: var(--widget-background-position);
    background-blend-mode: var(--widget-background-blendmode);

    border: 1px solid rgba(0, 0, 0, 0.5);
    border-top: none;
    border-bottom: none;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
}

    .widget--secondary,
    .overlay-content > .widget {
        --widget-color: var(--textcolor);
        --widget-title-color: #9a9a9a;

        --widget-separator-color: #36393b;
        --widget-background-main: #1F2529;
        --widget-background-shadow: #080a0b;
        --widget-background-grunge: rgba(0, 0, 0, 0.2);
    }
        .overlay-content > .widget {
            --widget-padding--horizontal: 1.75rem;
            --widget-padding--top: 1.75rem;
            --widget-padding--bottom: 3.5rem;
        }


    @media screen and (min-width: 600px) {
        .widget {
            --widget-padding--horizontal: 2.25rem;
            --widget-padding--top: 2.5rem;
            --widget-padding--bottom: 2.5rem;
        }
            .overlay-content > .widget {
                --widget-padding--horizontal: 4.5rem;
                --widget-padding--top: 4.5rem;
                --widget-padding--bottom: 4.5rem;
            }
            .overlay-content--secondary > .widget {
                --widget-padding--horizontal: 3rem;
                --widget-padding--top: 3rem;
                --widget-padding--bottom: 3rem;
            }
    }

    .widget--main {
        /* remove the border, background and shadow from the main element and use the .widget-content for this type of widget (needed to allow clip-path and the use of decorative eleents that surpass the margins of the clip-path element)*/
        background: none;
        border: none;
        box-shadow: none;

        --widget-color: var(--textcolor--contrast);
        --widget-title-color: var(--widget-color);

        --widget-background-main: #E9CDA1;
        --widget-background-shadow: #947039;
        --widget-highlightcolor: rgba(250, 221, 176, 0.7);

        --widget-background-stripes: rgba(255, 255, 255, 0.1);
        --widget-background-grunge: rgba(148, 112, 57, 0.25);
    }

    .widget--tertiary {
        --widget-padding--bottom: 1.5rem;
        --widget-color: var(--textcolor);
        --widget-title-color: var(--textcolor);

        --widget-separator-color: #4e3e38;
        --widget-background-main: #2E1A14;
        --widget-background-shadow: #0f0705;
        --widget-background-grunge: rgba(0, 0, 0, 0.2);
    }
        .widget--tertiary--secondary {
            --widget-separator-color: #36393b;
            --widget-background-main: #1F2529;
            --widget-background-shadow: #080a0b;
            --widget-background-grunge: rgba(0, 0, 0, 0.2);
        }

    .pagecontent-sidebar > .widget {
        --widget-padding--horizontal: var(--pagecontentsidebar-padding--horizontal);
    }


    /* Top border */
    .widget::before {
        content: '';
        position: absolute;
        left: 0;
        top: -0.2em;
        width: 100%;
        height: 37px;
        background: url(../images/sprite.png) repeat-x left -4360px;
    }
        .widget--secondary::before,
        .overlay-content > .widget::before,
        .widget--main::before,
        .widget--tertiary::before {
            top: -0.3em;
            height: 20px;
            background-position: left -4210px;
        }

    /* Bottom border / texture */
    .widget::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        width: 100%;
        height: 74px;
        background: url(../images/sprite.png) repeat-x left -4400px;
        filter: hue-rotate(-60deg);
    }
        .widget--secondary::after,
        .overlay-content > .widget::after,
        .widget--main::after,
        .widget--tertiary::after {
            filter: none;
        }
            .widget--main::after {
                left: -0.25em;
                width: calc(100% + 0.5em);
                height: 20px;
                background-position: left -4227px;
            }
            .widget--tertiary::after {
                width: 100%;
                height: 37px;
                background: url(../images/sprite.png) repeat-x left -4360px;
                transform: scaleY(-1);
            }

* + .widget,
.widget + * {
    margin-top: calc(var(--title-verticalspacing) * 1.75);
}

.widget--main .widget-content a {
    color: inherit;
}

.pagecontent-main .widget-content,
.widget-content p {
    max-width: none;
}

.widget ul > *,
.widget ol > * {
    padding: 0;
    list-style: none;
}
    .widget ul > *::before,
    .widget ol > *::before {
        content: normal;
    }

/* @group Widget header */
.widget-header {
    position: relative;
    z-index: 2;
    max-width: none;
    padding: 1em var(--widget-padding--horizontal);
    font-size: 1.15em;
    font-family: var(--fontfamily--titles);
    font-weight: bold;
    color: var(--widget-title-color);
    letter-spacing: 0.03em;
    text-shadow: -1px -1px 0 var(--widget-background-shadow);
    background: rgba(0, 0, 0, 0.1);
}
    .widget-header:first-child {
        margin-top: 0;
        border-bottom: 1px solid var(--widget-background-shadow);
        box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05);
    }

    .widget-header--secondary {
        padding: 0;
        font-size: 0.85em;
        opacity: 0.5;
        background: none;
    }
        .widget-header--secondary:first-child {
            margin: 0;
            border: none;
            box-shadow: none;
        }

    .widget--main .widget-header {
        text-shadow: 1px 1px 0 var(--widget-background-main);
    }
    .widget--tertiary .widget-header {
        text-align: left;
    }

    /* The top sides decorative elements */
    .widget-header::before,
    .widget-header::after,
    [data-widget-decorativesides]::before,
    [data-widget-decorativesides]::after,
    /* the decorative elements are added on the .widget-button if there is no .widget-header (offers support for two different markup structures) */
    .widget-content:first-child ~ .widget-button::before,
    .widget-content:first-child ~ .widget-button::after,
    .widget-content:first-child .widget-button::before,
    .widget-content:first-child .widget-button::after,
    .widget.popwindow > :first-child::before,
    .widget.popwindow > :first-child::after {
        content: '';
        position: absolute;
        top: -0.25rem;
        width: 25px;
        height: 15px;
        background: url(../images/sprite.png) no-repeat left -4274px;
    }
        [data-widget-decorativesides] {
            position: static;
        }
        [data-widget-decorativesides]::before {
            right: 100%;
        }
        [data-widget-decorativesides]::after {
            left: 100%;
        }
        .widget-content:first-child ~ .widget-button::before,
        .widget-content:first-child ~ .widget-button::after,
        .widget-content:first-child .widget-button::before,
        .widget-content:first-child .widget-button::after {
            top: -0.3rem;
        }
        .widget.popwindow > :first-child::before,
        .widget.popwindow > :first-child::after {
            top: -0.2rem;
        }

        .widget-header--secondary::before,
        .widget-header--secondary::after {
            top: calc(var(--widget-padding--top) * -1 - 0.3rem);
        }

        .widget-header::before {
            left: -0.5rem;
        }
            .widget-content:first-child ~ .widget-button::before,
            .widget-content:first-child .widget-button::before,
            .widget.popwindow > :first-child::before {
                left: -0.7rem;
            }
                .widget-header--secondary::before {
                    left: calc(var(--widget-padding--horizontal) * -1 - 1rem);
                }

        [data-widget-decorativesides]::after,
        .widget-header::after,
        .widget-content:first-child ~ .widget-button::after,
        .widget-content:first-child .widget-button::after,
        .widget.popwindow > :first-child::after {
            right: -0.5rem;
            transform: scaleX(-1);
        }
            .widget-content:first-child ~ .widget-button::after,
            .widget-content:first-child .widget-button::after,
            .widget.popwindow > :first-child::after {
                right: -0.65rem;
            }
            .widget-header--secondary::after {
                right: calc(var(--widget-padding--horizontal) * -1 - 1rem);
            }

        .widget--secondary .widget-header::before,
        .widget--secondary .widget-header::after,
        .widget--secondary [data-widget-decorativesides]::before,
        .widget--secondary [data-widget-decorativesides]::after,
        .widget--secondary .widget-content:first-child ~ .widget-button::before,
        .widget--secondary .widget-content:first-child ~ .widget-button::after,
        .widget--secondary .widget-content:first-child .widget-button::before,
        .widget--secondary .widget-content:first-child .widget-button::after,
        .overlay-content > .widget .widget-header::before,
        .overlay-content > .widget .widget-header::after,
        .overlay-content > .widget .widget-content:first-child ~ .widget-button::before,
        .overlay-content > .widget .widget-content:first-child ~ .widget-button::after,
        .overlay-content > .widget .widget-content:first-child .widget-button::before,
        .overlay-content > .widget .widget-content:first-child .widget-button::after,
        .widget--main .widget-header::before,
        .widget--main .widget-header::after,
        .widget--main .widget-content:first-child ~ .widget-button::before,
        .widget--main .widget-content:first-child ~ .widget-button::after,
        .widget--main .widget-content:first-child .widget-button::before,
        .widget--main .widget-content:first-child .widget-button::after,
        .widget--tertiary .widget-header::before,
        .widget--tertiary .widget-header::after,
        .widget--tertiary .widget-content:first-child ~ .widget-button::before,
        .widget--tertiary .widget-content:first-child ~ .widget-button::after,
        .widget--tertiary .widget-content:first-child .widget-button::before,
        .widget--tertiary .widget-content:first-child .widget-button::after {
            width: 20px;
            height: 14px;
            background-position: left -4190px;
        }

.widget-header svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* @end Widget header */

.widget-content {
    padding: var(--widget-padding--top) var(--widget-padding--horizontal) var(--widget-padding--bottom);
}
    .widget-header + .widget-content {
        padding-top: 0;
    }

    * + .widget-content {
        margin-top: var(--widget-padding--top);
    }
        * + .widget-content--complementary {
            margin-top: 0;
        }

    .widget--main .widget-content {
        border-top: none;
        border-radius: 0.25em;
    }
        .widget--main * + .widget-content {
            margin-top: 0;
        }

    /* Borders for the whole widget */
    .widget-content::before {
        content: '';
        position: absolute;
        left: 1px;
        top: 1px;
        z-index: -1;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        border: 1px solid #fff;
        mix-blend-mode: overlay;
    }
        /* On widget--main, use the pseudo element to add the background using clip-path */
        .widget--main .widget-content::before {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: none;
            mix-blend-mode: normal;
            background: var(--widget-background);
            background-size: var(--widget-background-size);
            background-position: var(--widget-background-position);
            background-blend-mode: var(--widget-background-blendmode);
            -webkit-clip-path: url('#svg-widgetmainshape-clip');
                    clip-path: url('#svg-widgetmainshape-clip');
        }

        /* For widget--main, add the border using the two svg elements present in the markup at the end of the element */
        .widget--main-border {
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            width: calc(100% - 2px);
            height: 100%;
            stroke: var(--widget-highlightcolor);
            /* to be able to use the same path for the clip-path, it has percentage units (1 is 100%), so the stroke-width must take this in account */
            stroke-width: 0.005px;
            fill: none;
        }
            .widget--main-border:nth-last-child(2) {
                left: 1.5px;
                top: 0;
                width: calc(100% - 4px);
                height: calc(100% - 3px);
                stroke: rgba(150, 113, 57, 0.8);
            }

    /* Top centered decorative element */
    .widget-content::after {
        content: '';
        position: absolute;
        left: calc(50% - 12px);
        top: -9px;
        width: 23px;
        height: 23px;
        background: #040303 url(../images/sprite.png) no-repeat left -4290px;
        border-radius: 50%;
    }
        .widget--secondary .widget-content::after,
        .overlay-content > .widget .widget-content::after,
        .widget--main .widget-content::after,
        .widget--tertiary .widget-content::after {
            left: calc(50% - 35px);
            top: -13px;
            width: 69px;
            height: 27px;
            background-position: left -4150px;
            background-color: transparent;
            border-radius: 0;
        }

/* Widget content - complex layout */
.widget-content--complex {
    padding: 0;
}

.widget-content--complex > * {
    padding: var(--widget-padding--top) var(--widget-padding--horizontal) var(--widget-padding--bottom);
}

    .widget-content--complex > * + * {
        margin-top: 0;
    }
    .widget-content--complex > :first-child {
        padding-bottom: 3em;
        background: rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.075);
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    }
    .widget-content--complex > :last-child {
        padding-top: 3em;
    }

.widget-content--complex.no-borders header {
    background: transparent;
}

@media screen and (min-width: 800px) {
    .widget-content--complex {
        display: flex;
        justify-content: space-between;
    }
    .widget-content--complex.no-borders > :first-child {
        border: 0px;
        box-shadow: none;
    }
        .widget-content--complex > :first-child {
            width: 46%;
            flex-grow: 1;
            flex-shrink: 0;
            max-width: none;
            padding-bottom: var(--widget-padding--top);
            padding-right: var(--widget-padding--horizontal);
            border: none;
            border-right: 1px solid rgba(255, 255, 255, 0.075);
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.5);
        }
        .widget-content--complex > :last-child {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 54%;
            max-width: none;
            padding-top: var(--widget-padding--bottom);
            padding-left: var(--widget-padding--horizontal);
        }

    /* Center the widget button on the child it belongs to  */
    .widget-content--complex > :first-child .widget-button .button {
        left: calc(46% / 2);
    }
    .widget-content--complex > :last-child .widget-button .button {
        left: calc(46% + 54% / 2);
    }

    /* Add some distinctive decorative elements */
    .widget-content--complex > :first-child::before,
    .widget-content--complex > :last-child::before {
        content: '';
        position: absolute;
        z-index: -3;
        background: url(../images/sprite.png) no-repeat;
    }
    .widget-content--complex > :first-child::before {
        bottom: 15%;
        right: 100%;
        width: 20px;
        height: 231px;
        background-position: left -3820px;
    }
    .widget-content--complex > :last-child::before {
        top: 15%;
        left: 100%;
        width: 73px;
        height: 148px;
        background-position: -35px -3670px;
    }
}


/* @end Widget */

/* @group Widget button */
/* Intended specificity to overwrite the forum p general style */
.widget .widget-button {
    position: static;
}
* + .widget-button {
    margin-top: 0.5em;
}
    ul.widget-content + .widget-button,
    ol.widget-content + .widget-button {
        margin-top: calc(var(--section-verticalspacing) / 2);
    }

.widget-button .button {
    position: absolute;
    left: 50%;
    bottom: -1em;
    transform: translateX(-50%);
}
    .overlay-content > .widget .widget-button .button {
        position: relative;
        left: auto;
        bottom: auto;
        font-size: 1.2em;
        transform: none;
    }

    @media screen and (min-width: 800px) {
        .overlay-content > .widget .widget-button .button {
            position: absolute;
            left: 50%;
            bottom: -1em;
            transform: translateX(-50%);
        }
    }

    /* Add the bottom disc decoration (only if there is a header - otherwise the before and after on the widget-button are used for the top sides decoration) */
    .widget--main .widget-header ~ .widget-button::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -1.75em;
        z-index: -2;
        margin-left: -114px;
        width: 228px;
        height: 231px;
        background: url(../images/sprite.png) no-repeat left -3820px;
    }

@media screen and (min-width:1000px) {
        /* Add the right sword decoration */
        .widget--main .widget-header ~ .widget-button::before {
            content: '';
            position: absolute;
            right: -2em;
            top: 1em;
            z-index: -2;
            width: 73px;
            height: 148px;
            background: url(../images/sprite.png) no-repeat left -3670px;
        }
    }
/* @end Widget button */


.widget-footer {
    position: relative;
    padding: var(--widget-padding--bottom) var(--widget-padding--horizontal);
    color: var(--textcolor--quartenary);
}
    .widget-content .widget-footer {
        margin-left: calc(var(--widget-padding--horizontal) * -1);
        margin-right: calc(var(--widget-padding--horizontal) * -1);
        padding-bottom: 0;
    }
    .widget-footer--grouped {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        text-align: center;
    }
    * + .widget-footer {
        margin-top: var(--widget-padding--bottom);
    }
        .widget-content + .widget-footer {
            margin-top: 0;
        }

    /* The top border */
    .widget-footer::before {
        content: '';
        position: absolute;
        left: 0;
        top: -0.2em;
        width: 100%;
        height: 37px;
        background: url(../images/sprite.png) repeat-x left -4360px;
        box-shadow: 0 0.5em 0.75em 0 rgba(0, 0, 0, 0.7);
    }
        .widget--secondary .widget-footer::before,
        .overlay-content .widget-footer::before,
        .widget--main .widget-footer::before,
        .widget--tertiary .widget-footer::before {
            top: -0.3em;
            height: 12px;
            background-position: left -4210px;
        }

    .widget-footer--simple::before {
        content: normal;
    }

.widget-footer > * > * + * {
    margin-top: 0.5em;
}
@media screen and (min-width: 800px) {
    .widget-footer--grouped {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
    .widget-footer--grouped > * + * {
        margin-top: 0;
    }
    .widget-footer--grouped > * + * {
        margin-left: 1em;
    }
}
:root {
    --widgetsimple-padding--horizontal: 2rem;
    --widgetsimple-padding--vertical: 2rem;
    --widgetsimple-header-padding--vertical: 1rem;
    --widgetsimple-header-padding--horizontal: 1rem;
    /* This is also used by the header (the alpha stacks on top of each other and creates a more proeminent bg) */
    --widgetsimple-background: rgba(37, 44, 48, 0.2);
     /* We have cases where a header element might be attached to the widget
      * similar to a clothing tag (outside of the element), so we must make
      * sure the background looks similar to the normal header  */
    --widgetsimple-background-headeroutside: rgba(37, 44, 48, 0.4);
    --widgetsimple-border: rgba(255, 255, 255, 0.1);
}

.widgetsimple {
    position: relative;
    padding: var(--widgetsimple-padding--vertical) var(--widgetsimple-padding--horizontal);
    background: var(--widgetsimple-background);
    border: 1px solid var(--widgetsimple-border);
    border-radius: 0.2em;
}

.widgetsimple-header {
    margin: calc(var(--widgetsimple-padding--vertical) * -1) calc(var(--widgetsimple-padding--horizontal) * -1) 0;
    padding: var(--widgetsimple-header-padding--vertical) var(--widgetsimple-header-padding--horizontal);
    background: var(--widgetsimple-background);
    border-bottom: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
:root {
    --popwindow-width: 100vw;
    --popwindow-width--secondary: 100vw;
    --popwindow-padding--vertical: 1.5em;
    --popwindow-padding--horizontal: 2em;
    --popwindowtrigger-arrow-spacing: 1rem;
    --popwindow-background--hover: rgba(23, 38, 47, 0.3);
    --popwindow-bordercolor: rgba(35, 48, 56, 1);
    --popwindow-bordercolor--separated: rgba(104, 132, 147, 1);

    --widget-separator-color: #36393b;
    --popwindow-backround-main: #1F2529;
    --popwindow-background-shadow: #080a0b;

    --popwindow-background: var(--widget-background-grungeeffect),
        /* the stripes */
        linear-gradient(-45deg, var(--widget-background-stripes) 25%, transparent 25%, transparent 50%, var(--widget-background-stripes) 50%, var(--widget-background-stripes) 75%, transparent 75%, transparent),

        /* simulates the mesh gradient */
        radial-gradient(farthest-corner at center, var(--popwindow-backround-main) 0%, var(--popwindow-backround-main) 30%, var(--popwindow-background-shadow) 100%);
}
@media screen and (min-width: 500px) {
    :root {
        --popwindow-width: 23em;
        --popwindow-width--secondary: 12em;
    }
}

[data-popwindow] {
    cursor: default;
}
[data-popwindow]::after {
    content: '^';
    display: inline-block;
    font-size: 0.6em;
    vertical-align: middle;
    line-height: 1;
    transform: scaleY(-1) scaleX(1.65);
}
[data-popwindow-placeholder] {
    position: static;
    margin: 0;
}

.popwindow {
    position: absolute;
    top: 0;
    left: 2.5vw;
    z-index: -1;
    display: none!important;
    margin: 0;
    width: var(--popwindow-width);
    max-width: 95vw;
    max-height: 35em;
    padding: var(--popwindow-padding--vertical) var(--popwindow-padding--horizontal);
    visibility: hidden;
    font-size: 1rem;
    color: var(--textcolor);
    text-align: left!important;
    text-shadow: none;
    text-transform: none;
    font-weight: normal;
    opacity: 0;
    overflow: auto;
    transition: opacity 0.2s ease-in-out;

    background: var(--popwindow-background);
    background-size: var(--widget-background-size);
    background-position: var(--widget-background-position);
    background-blend-mode: var(--widget-background-blendmode);
}

    .popwindow--secondary {
        width: var(--popwindow-width--secondary);
    }

    /* Top border */
    .popwindow::before {
        content: '';
        position: absolute;
        left: 0;
        top: -0.3em;
        width: 100%;
        height: 20px;
        background: url(../images/sprite.png) repeat-x left -4210px;
    }


    /* Bottom border / texture */
    .popwindow::after {
        content: normal;
        /* content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        width: 100%;
        height: 74px;
        background: url(../images/sprite.png) repeat-x left -4400px;
        filter: none; */
    }

@media screen and (min-width: 500px) {
    .popwindow {
        left: 0;
    }
}
    /* Opened state */
    .popwindow--opened {
        display: block!important;
        z-index: calc(var(--tooltip-zindex) - 1);
        visibility: visible;
        opacity: 1;
    }

    .popwindow--right {
        text-align: right;
    }

.popwindow > * {
    position: relative;
    margin-left: calc(var(--popwindow-padding--horizontal) * -1);
    margin-right: calc(var(--popwindow-padding--horizontal) * -1);
}
    ul.popwindow > *,
    ol.popwindow > *,
    .popwindow ul > *,
    .popwindow ol > * {
        padding-left: 0;
    }
        ul.popwindow > *::before,
        ol.popwindow > *::before,
        .popwindow ul > *::before,
        .popwindow ol > *::before {
            content: normal;
        }
    .popwindow > * + *,
    .popwindow ul > *,
    .popwindow ol > * {
        margin-top: 0;
        border-top: 1px solid var(--popwindow-bordercolor);
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
        .popwindow > * + .popwindow-item--separated::before {
            content: '';
            position: absolute;
            top: 0;
            z-index: -1;
            width: 100%;
            height: 37px;
            background: url(../images/sprite.png) repeat-x left -4360px;
            filter: hue-rotate(20deg);
        }
    .popwindow > :first-child {
        margin-top: calc(var(--popwindow-padding--vertical) * -1);
    }
    .popwindow > :last-child {
        margin-bottom: calc(var(--popwindow-padding--vertical) * -1);
    }

    .popwindow > * > * + * {
        margin-top: 0;
    }


.popwindow a,
.popwindow button,
.popwindow label {
    display: block;
    width: 100%;
    padding: 1.35em 2em;
    color: inherit;
    text-align: inherit;
}
    ul.popwindow ul a::before,
    ul.popwindow ul button::before,
    ul.popwindow ul label::before {
        content: '\2514\2500   ';
        opacity: 0.25;
    }
    .popwindow a:hover,
    .popwindow button:hover,
    .popwindow label:hover {
        background-color: var(--popwindow-background--hover);
        border-color: transparent;
    }

/* @group Vote */
:root {
    --vote-fontsize: 1.5em;
}
.vote {
    width: var(--vote-fontsize);
    font-size: var(--vote-fontsize);
    text-align: center;
    font-family: var(--fontfamily--titles);
    font-weight: bold;
}
    .vote ~ * .vote {
        --vote-fontsize: calc(var(--vote-fontsize) / 1.5);
    }

.vote > * + * {
    margin-top: 0;
}

.vote button {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 1em;
    height: 1em;
    overflow: hidden;
    font-size: 1em;
    line-height: 1;
    text-indent: 10em;
    font-family: Georgia;
    font-weight: normal;
    white-space: nowrap;
    transform: scaleX(1.25);
}
    .vote button::before {
        content: '^';
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        line-height: 1.25em;
        text-indent: 0;
        opacity: 0.5;
    }
    .vote button:last-child::before {
        transform: scaleY(-1);
    }

    .vote button:hover::before {
        opacity: 1;
    }

    .vote .vote-button--voted::before {
        opacity: 1;
    }

@media screen and (min-width: 700px) {
    .vote {
        width: 2em;
        font-size: 2em;
    }
        .vote ~ * .vote {
            font-size: 1.5em;
        }
}
/* @end Vote */
:root {
    --overlay-zindex: 10001;
}
/* @group Overlay */
.overlay-isopened {
    overflow: hidden;
}
/* The overlay content styling is given by a widget style */
.overlay {
    --overlay-maxwidth: 53em;

    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--overlay-zindex);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    /* 100% instead of 100vw, as the vw include the scrollbar width */
    /* The dissadvantage is that the overlay element must be contained by the body's stacking context */
    width: 100%;
    height: 100%;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.9);
    transition: all 0.2s ease-in-out;
    opacity: 0;
}

#overlay-login .widget-content::after {
    display: none;
}
.overlay.overlay--message {
    z-index: 9999;
}
    .overlay--opened {
        visibility: visible;
        opacity: 1;
    }


.overlay-content {
    max-width: 95vw;
    max-height: 95vh;
}
    .overlay-content--mini {
        --overlay-maxwidth: 25em;
    }
    .overlay-content--secondary {
        --overlay-maxwidth: 47em;
        font-size: 0.9em;
    }



@media screen and (min-width: 900px) {
    #overlay-login .overlay-content {
        width: 800px;
    }
    #overlay-login .signinoptions a {
        width: 100%;
    }
    #overlay-login .widget-content header {
        padding-right: 60px;
        padding-left: 20px;
    }
    #overlay-login .widget-content button[type="submit"] {
        font-size: 1.2rem;
        padding: 0.7em 1.9em 1.15em 2.1em;
    }
    #overlay-login .widget-content .login-form {
        padding-left: 60px;
        padding-right: 20px;
    }
}

@media screen and (min-width: 700px) {
    .overlay-content {
        max-width: var(--overlay-maxwidth);
    }
}

.overlay-content .widget-content {
    max-height: calc(95vh - 3.75rem);
    overflow-y: auto;
    overflow-x: hidden;
}

@supports (-webkit-overflow-scrolling: touch) {
    .overlay-content .widget-content {
        max-height: 80vh;
    }
}

.overlay-close {
    position: absolute;
    right: 0.75em;
    top: 0.75em;
    margin: 0;
    width: 1em;
    height: 1em;
    overflow: hidden;
    font-size: 1.5em;
    color: var(--textcolor);
    opacity: 0.7;
}
    .overlay-close:hover {
        transform: scale(1.5);
        opacity: 1;
        border-bottom-color: transparent;
    }

    .overlay-close::before {
        content: '\2715';
        margin-right: 1em;
    }

.overlay-close.overlay-close + * {
    margin-top: 0;
}

@media screen and (min-width: 1000px) {
    .overlay-close {
        right: 1em;
        top: 1em;
    }
}
/* @end Overlay */
/* @group Photoviewer */
.photoviewer-wrapper {
    min-height: 10vh;
    width: auto;
    max-width: 90vw;
    max-height: 90vh;
    padding: 0.25em;
    overflow: auto;
    transition: all 0.3s ease-in-out;
}
    .photoviewer--loading .photoviewer-wrapper {
        max-width: 30vw;
        max-height: 30vh;
        min-width: 30vw;
        min-height: 30vh;
        overflow: hidden;
    }
        .photoviewer--loading .photoviewer-wrapper::before {
            content: 'Loading...';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

.photoviewer img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: all 0.3s ease-in-out;
    opacity: 1;
}
    .photoviewer--loading img {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
.photoviewer .overlay-close {
    color: #fff;
}
/* @end Photoviewer */
.photoviewer-willopen-wrapper {
    position: relative;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

    .photoviewer-willopen-wrapper::before,
    .photoviewer-willopen-wrapper::after {
        position: absolute;
        left: 50%;
        top: 50%;
        opacity: 0;
        transition: inherit;
    }
        .photoviewer-willopen-wrapper:hover::before,
        .photoviewer-willopen-wrapper:hover::after {
            opacity: 1;
        }

    .photoviewer-willopen-wrapper::before {
        content: '';
        z-index: 2;
        width: 7em;
        height: 7em;
        background: rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
        .photoviewer-willopen-wrapper:hover::before {
            transform: translateX(-50%) translateY(-50%) scale(2);
        }

    .photoviewer-willopen-wrapper::after {
        content: '\26B2';
        z-index: 3;
        color: var(--textcolor--secondary);
        transform: translateX(-50%) translateY(-50%) rotateZ(45deg);
        transition-delay: 0.2s;
    }
        .photoviewer-willopen-wrapper:hover::after {
            transform: translateX(-50%) translateY(-50%) rotateZ(45deg) scale(3.5);
        }
@custom-media --table-hiderowsubtitle screen and (min-width: 900px);
@custom-media --table-showastable screen and (min-width: 700px);
@custom-media --table-showbreadcrumbasblock screen and (min-width: 700px) and (max-width: 1000px);

.pagecontent-main table {
    --table-cell-padding--vertical: 0.75rem;
    --table-cell-padding--horizontal: 0.5rem;
    --table-cell-image-size: 3rem;
    --table-backgroundcolor: linear-gradient(to right, rgba(37, 44, 48, 0.1) 60%, transparent 100%);
    --table-bordercolor: rgba(132, 188, 219, 0.1);

    position: relative;
    display: block;
    line-height: 1.1;
    border-left: 1px solid var(--table-bordercolor);
    border-right: 1px solid var(--table-bordercolor);
}
    .pagecontent-main > table {
        --table-cell-padding--vertical: 1rem;
        --table-cell-padding--horizontal: var(--wrapper-padding);
        width: calc(100% + var(--wrapper-padding) * 2);
        margin-left: calc(var(--wrapper-padding) * -1);
        margin-right: calc(var(--wrapper-padding) * -1);
        border-left: none;
        border-right: none;
    }

.pagecontent-main table > * {
    display: block;
}
    .pagecontent-main table > * + * {
        margin-top: 0;
    }

.pagecontent-main table tr {
    padding: var(--table-cell-padding--vertical) var(--table-cell-padding--horizontal);
    /* remove the left padding -> the elements are already spaced out by margin-left in the mobile-first approach */
    padding-left: 0;
    border-bottom: 1px solid var(--table-bordercolor);
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.5);
}

    .pagecontent-main table tr + tr {
        margin-top: 1px;
    }

    .pagecontent-main table tbody:first-child tr:first-child {
        border-top: 1px solid var(--table-bordercolor);
        border-bottom: 1px solid var(--table-bordercolor);
        box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.5);
    }

.pagecontent-main table th,
.pagecontent-main table td,
.pagecontent-main table img {
    vertical-align: middle;
}
    .pagecontent-main table th,
    .pagecontent-main table td {
        text-align: left;
    }

/* The content editor doesn't allow thead, so most of the time tbody:first-child > tr:first-child > th will be considered the thead */
.pagecontent-main table thead {
    display: none;
    font-family: var(--fontfamily--titles);
    color: var(--textcolor--secondary);
    opacity: 0.7;
    font-weight: bold;
}
.pagecontent-main table thead th,
.pagecontent-main table thead td {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}



.pagecontent-main table tbody {
    background: var(--table-backgroundcolor);
}

.pagecontent-main table tbody tr {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    transition: all 0.25s ease-in-out;
}
    .pagecontent-main table tbody tr[hidden] {
        display: none;
    }
    .pagecontent-main table:not(.filter-isactive) tbody tr:nth-child(even),
    .pagecontent-main table.filter-isactive tbody tr.filter-filtered--even {
        background: rgba(255, 255, 255, 0.02);
    }
        .pagecontent-main:nth-last-child(2) table:not(.filter-isactive) tbody tr:nth-child(even),
        .pagecontent-main:nth-last-child(2) table.filter-isactive tbody tr.filter-filtered--even {
            background: linear-gradient(to right, rgba(255, 255, 255, 0.02) 60%, transparent 100%);
        }

    /* Intended specificity */
    .pagecontent-main table tbody tr:hover,
    .pagecontent-main table:not(.filter-isactive) tbody tr:nth-child(even):hover,
    .pagecontent-main table.filter-isactive tbody tr.filter-filtered--even:hover {
        background: rgba(0, 0, 0, 0.15);
    }
        .pagecontent-main:nth-last-child(2) table:not(.filter-isactive) tbody tr:nth-child(even):hover,
        .pagecontent-main:nth-last-child(2) table.filter-isactive tbody tr.filter-filtered--even:hover {
            background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 60%, transparent 100%);
        }

.pagecontent-main table tr > * {
    position: relative;
    margin-left: calc(var(--layoutsection-horizontalspacing) / 1.5);
}
    .article table tr > * {
        flex-basis: 100%;
    }

    .pagecontent-main table tr > * + * {
        margin-top: calc(var(--section-verticalspacing) / 2);
    }

.pagecontent-main table tr > th {
    align-self: center;
    width: 100%;
}
    .pagecontent-main tbody th {
        font-weight: bold;
        font-family: var(--fontfamily--titles);
    }
    .pagecontent-main tbody:first-child > :first-child th:not(:only-of-type) {
        background: rgba(64, 74, 80, 0.3);
    }

.pagecontent-main table tr > .tablecontent--image {
    align-self: center;
}
.pagecontent-main table tr > .tablecontent--image + th {
    margin-top: 0;
    margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
    width: calc(100% - var(--table-cell-image-size) - calc(var(--layoutsection-horizontalspacing) * 1.5));
}

.pagecontent-main table tr > [title]::before {
    content: attr(title);
    display: block;
    margin-bottom: 0.5em;
    font-family: var(--fontfamily);
    font-size: 0.75rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    opacity: 0.5;
}


.pagecontent-main .pagecontent-main table a {
    display: inline-block;
    color: inherit;
    opacity: 1;
}
    .pagecontent-main .pagecontent-main table a:hover {
        border-color: transparent;
        opacity: 0.7;
    }

.pagecontent-main .pagecontent-main table .breadcrumb {
    color: var(--textcolor--secondary--transparent50);
}

/* The subtitle of a table row will be displayed below the title in responsive mode */
.tablecontent--subtitle,
.tableheader--subtitle {
    display: none;
}
[data-tablerow-subtitle]::after {
    content: attr(data-tablerow-subtitle);
    display: block;
    font-size: 1rem;
    font-family: var(--fontfamily);
    font-weight: normal;
    color: var(--textcolor--secondary--transparent50);
}

@media screen and (min-width: 900px) {
    .tablecontent--subtitle,
    .tableheader--subtitle {
        display: table-cell;
    }
    [data-tablerow-subtitle]::after {
        content: normal;
    }
}

.tablecontent--image {
    width: var(--table-cell-image-size);
}
.tableheader--statistic {
    text-align: right;
}
.tablecontent--breadcrumb {
    display: none;
}

.tablecontent--secondary {
    font-size: 1rem;
    font-weight: normal;
    color: var(--textcolor--secondary--transparent50);
}
.tablecontent--statistic {
    font-size: 1.35rem;
    font-family: var(--fontfamily--titles);
    text-align: left;
}

.tablecontent--notavailable {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--textcolor--secondary--transparent50);
}


/* Exit responsive mode (show as normal table) */
@media screen and (min-width: 700px) {
    .pagecontent-main table {
        display: table;
    }
    .pagecontent-main table > * {
        display: table-row-group;
    }
        .pagecontent-main table > thead {
            display: table-header-group;
        }
        .pagecontent-main table > tfoot {
            display: table-footer-group;
        }

    .pagecontent-main table tr {
        padding: 0;
    }
        .pagecontent-main:nth-last-child(2) table tr {
            border: none;
            box-shadow: none;
        }

        .pagecontent-main:nth-last-child(2) table tr::after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, var(--table-bordercolor) 60%, transparent 100%);
            box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.5);
        }

    .pagecontent-main table th,
    .pagecontent-main table td {
        padding: var(--table-cell-padding--vertical) var(--table-cell-padding--horizontal);
    }

    .pagecontent-main table thead {
        display: table-header-group;
    }
    .pagecontent-main table tbody tr {
        display: table-row;
    }
        .pagecontent-main table tbody tr[hidden] {
            display: none;
        }

    .pagecontent-main table tr > * {
        margin-left: 0;
    }

        .pagecontent-main table tr > * + * {
            margin-top: 0;
        }
        .pagecontent-main table tr > th,
        .pagecontent-main table tr > .tablecontent--image + th {
            margin: 0;
            width: auto;
        }

    .tablecontent--image img {
        margin-top: calc(var(--table-cell-padding--vertical) / 1.5 * -1);
        margin-bottom: calc(var(--table-cell-padding--vertical) / 1.5 * -1);
        min-width: 2em;
    }
    .tablecontent--statistic {
        text-align: right;
    }

    .tablecontent--breadcrumb {
        display: table-cell;
    }

    .pagecontent-main table p {
        max-width: 70vw;
        word-break: break-all;
    }
}

@media screen and (min-width: 700px) and (max-width: 1000px) {
    table .breadcrumb {
        display: block;
    }
    table .breadcrumb > * + * {
        margin-left: 0;
    }
    table .breadcrumb > * + *::before {
        content: normal;
    }

}


/* @group Table row button */
/* Only for small content buttons, as it will go out of the row with 50% of its width */
.tablerow-button {
    padding-left: 0.75em;
    padding-right: 0.75em;
}
@media screen and (min-width: 700px) {
    .tablerow-button {
        position: absolute;
        left: 0;
        top: 50%;
        visibility: hidden;
        transform: translateY(-50%);
        opacity: 0;
    }
        tr:hover .tablerow-button {
            transform: translateX(-50%) translateY(-50%);
            visibility: visible;
            opacity: 1;
        }

    .tablerow-button + * {
        margin-top: 0;
    }
        tr:hover .tablerow-button + * {
            transform: translateX(1em);
        }
}
/* @end Table row button */

/* @group Tabs */
.tabs {
    --tabs-nav-spacing: calc(var(--layoutsection-horizontalspacing) / 2);
    max-width: none;
    width: 100%;
}

.tabs-controller {
    position: absolute;
    visibility: hidden;
}

.tabs-nav {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: calc(var(--tabs-nav-spacing) * -1);
    padding-bottom: 1.25em;
    font-family: var(--fontfamily--titles);
    font-weight: bold;
    letter-spacing: 0.025em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 0 0 rgba(132, 188, 219, 0.1);
}
    * + .tabs-nav {
        margin-top: 0;
    }
    .pagecontent-main .tabs-nav {
        max-width: none;
    }

.tabs-nav > * {
    padding: 0;
    margin-left: var(--tabs-nav-spacing);
}
    .tabs-nav > *::before {
        content: normal;
    }
    .tabs-nav > * + * {
        margin-top: 0;
    }

.tabs-nav label {
    position: relative;
    display: block;
    margin-bottom: calc((1.25em + 1px) * -1);
    padding-bottom: 1.25em;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease-in-out;
}
    .tabs-nav label:hover {
        opacity: 1;
    }
    .tabs-nav label::before {
        position: absolute;
        left: 0;
        bottom: -1px;
        z-index: -1;
        width: 100%;
        height: 2px;
        background: #f00;
        border-radius: 50% / 90%;
        box-shadow: 0 0 0.75em #f00;

    }

    .tabs-controller:first-child:checked ~ .tabs-nav > :first-child label,
    .tabs-controller:nth-child(2):checked ~ .tabs-nav > :nth-child(2) label,
    .tabs-controller:nth-child(3):checked ~ .tabs-nav > :nth-child(3) label,
    .tabs-controller:nth-child(4):checked ~ .tabs-nav > :nth-child(4) label,
    .tabs-controller:nth-child(5):checked ~ .tabs-nav > :nth-child(5) label,
    .tabs-controller:nth-child(6):checked ~ .tabs-nav > :nth-child(6) label,
    .tabs-controller:nth-child(7):checked ~ .tabs-nav > :nth-child(7) label,
    .tabs-controller:nth-child(8):checked ~ .tabs-nav > :nth-child(8) label,
    .tabs-controller:nth-child(9):checked ~ .tabs-nav > :nth-child(9) label {
        opacity: 1;
    }
        .tabs-controller:first-child:checked ~ .tabs-nav > :first-child label::before,
        .tabs-controller:nth-child(2):checked ~ .tabs-nav > :nth-child(2) label::before,
        .tabs-controller:nth-child(3):checked ~ .tabs-nav > :nth-child(3) label::before,
        .tabs-controller:nth-child(4):checked ~ .tabs-nav > :nth-child(4) label::before,
        .tabs-controller:nth-child(5):checked ~ .tabs-nav > :nth-child(5) label::before,
        .tabs-controller:nth-child(6):checked ~ .tabs-nav > :nth-child(6) label::before,
        .tabs-controller:nth-child(7):checked ~ .tabs-nav > :nth-child(7) label::before,
        .tabs-controller:nth-child(8):checked ~ .tabs-nav > :nth-child(8) label::before,
        .tabs-controller:nth-child(9):checked ~ .tabs-nav > :nth-child(9) label::before {
            content: '';
        }

.tabs-content {
    display: flex;
    justify-content: space-between;
    transition: all 0.2s ease-in-out;
}

.tabs-content > * {
    width: 0;
    max-height: 1em;
    overflow: hidden;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
    .tabs-content > * + * {
        margin-top: 0;
    }

    .tabs-controller:first-child:checked ~ .tabs-content > :first-child,
    .tabs-controller:nth-child(2):checked ~ .tabs-content > :nth-child(2),
    .tabs-controller:nth-child(3):checked ~ .tabs-content > :nth-child(3),
    .tabs-controller:nth-child(4):checked ~ .tabs-content > :nth-child(4),
    .tabs-controller:nth-child(5):checked ~ .tabs-content > :nth-child(5),
    .tabs-controller:nth-child(6):checked ~ .tabs-content > :nth-child(6),
    .tabs-controller:nth-child(7):checked ~ .tabs-content > :nth-child(7),
    .tabs-controller:nth-child(8):checked ~ .tabs-content > :nth-child(8),
    .tabs-controller:nth-child(9):checked ~ .tabs-content > :nth-child(9)  {
        -webkit-animation: tabshow 0.3s forwards ease-in-out;
                animation: tabshow 0.3s forwards ease-in-out;
    }

@-webkit-keyframes tabshow {
    0% {
        max-height: 1em;
        opacity: 0;
        overflow: hidden;
    }
    5% {
        width: 100%;
        max-height: 30%;
        overflow: visible;
    }
    95% {
        width: 100%;
        max-height: 30em;
        overflow: visible;
        opacity: 1;
    }
    100% {
        width: 100%;
        max-height: none;
        overflow: visible;
        opacity: 1;
    }
}

@keyframes tabshow {
    0% {
        max-height: 1em;
        opacity: 0;
        overflow: hidden;
    }
    5% {
        width: 100%;
        max-height: 30%;
        overflow: visible;
    }
    95% {
        width: 100%;
        max-height: 30em;
        overflow: visible;
        opacity: 1;
    }
    100% {
        width: 100%;
        max-height: none;
        overflow: visible;
        opacity: 1;
    }
}

.tabs-content > * h1:first-child,
.tabs-content > * h2:first-child,
.tabs-content > * h3:first-child,
.tabs-content > * h4:first-child,
.tabs-content > * h5:first-child,
.tabs-content > * h6:first-child {
    margin-top: 0;
}
/* @end Tabs */

/* @group Filter */

.filterlist > * {
    padding: 0;
    font-size: 1rem;
}
    .filterlist > *::before {
        content: normal;
    }


/* intended specificity */
.filter * + * {
    margin-top: 0.25em;
}
    .filter > h3 + *  {
        margin-top: 1em;
    }

.filter > h3 {
    font-size: 1em;
}
.filter label {
    display: block;
    padding: 1em 2em;
    background: #16191C;
    border: 1px solid #252C30;
    border-radius: 0.25em;
    opacity: 0.8;
    cursor: pointer;
}
    .filter :checked + label {
        color: var(--textcolor);
        background: #314257;
        border-color: #6592A8;
        opacity: 1;
    }

.filter input {
    position: absolute;
    z-index: -1;
    visibility: hidden;
}

.filter-options > * {
    padding: 0;
}
    .filter-options > *::before {
        content: normal;
    }

@media screen and (min-width: 500px) {
    .filter-options {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-left: -0.25em;
        margin-bottom: -0.25em;
    }

    .filter * + *  {
        margin-top: 0;
    }

    .filter-options > * {
        margin-bottom: 0.25em;
        margin-left: 0.25em;
    }
}

@media screen and (min-width:1000px) {
    .filter {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* intended specificity */
    .filter > h3 + *  {
        margin-top: 0;
    }

    .filter > h3 {
        width: 7em;
    }
    .filter-options {
        width: calc(100% - 7em);
    }
}


/* @end Filter */
@custom-media --forumitem-onelinelayout screen and (min-width: 550px);
@custom-media --forumitempost-onelinelayout screen and (min-width: 900px);


@custom-media --forumitem-latestpost-semilayout screen and (min-width: 700px);
@custom-media --forumitem-latestpost-fulllayout screen and (min-width: 1100px);

:root {
    --forumitem-background: linear-gradient(to right, rgba(37, 44, 48, 0.2), rgba(37, 44, 48, 0.2) 70%, transparent);
    --forumitem-background--alternate: linear-gradient(to right, transparent, rgba(37, 44, 48, 0.1) 20%, rgba(37, 44, 48, 0.1) 70%, transparent);
    --forumitem-separatorline:
        linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent) left top no-repeat,
        linear-gradient(to right, rgba(255, 255, 255, 0.6), transparent) left bottom no-repeat;
}
.pagecontent-main .forumlist,
.pagecontent-main .forumitems {
    max-width: none;
}

.forumlist > * {
    padding: 0;
}
    .forumlist > *::before {
        content: normal;
    }

    .forumlist > * + * {
        margin-top: calc(var(--section-verticalspacing) / 1.5);
    }

.forum h2 {
    font-size: 1.4em;
}
.forum h2 a {
    color: inherit;
}

.forumitems > * + * {
    margin-top: 0;
}
    .contentheadergroup + .forumitems {
        margin-top: 0;
    }

    .forumitems > :nth-child(odd) {
        background: var(--forumitem-background--alternate);
    }

.forumitem {
    --forumitem-numberofposts-width: 5em;
    --forumitem-secondaryinfo-width: 3em;
    --forumitem-latestpost-width: var(--userimage-size--normal);
    --forumitem-horizontalspacing: calc(var(--layoutsection-horizontalspacing) / 2);
    --forumitem-padding--vertical: calc(var(--wrapper-padding) / 1.2);
    --forumitem-padding--horizontal: var(--wrapper-padding);

    position: relative;

    margin-left: calc(var(--wrapper-padding) * -1);
    margin-right: calc(var(--wrapper-padding) * -1);

    padding: var(--forumitem-padding--vertical) var(--forumitem-padding--horizontal);

    background: var(--forumitem-background);
}
    .pagecontent-main:only-child .forumitem {
        --forumitem-numberofposts-width: 6em;
    }
    .forumitem--pinned {
        --forumitem-background: linear-gradient(to right, rgba(44, 74, 92, 0.2), rgba(50, 83, 102, 0.2) 70%, transparent);
    }

    .forumitem::before,
    .forumitem::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 2px;
        background: var(--forumitem-separatorline);
        background-size: 100% 1px;
        opacity: 0.15;
    }
        .forumitem::after {
            top: auto;
            bottom: 0;
        }

        * + .forumitem::before,
        * + * > .forumitem:only-child::before {
            content: normal;
        }



    .forumitem--banner {
        display: block;
        background: none;
    }

    .forumitem--category,
    .forumitem--thread {
        /* allow the latest post element to fit on the right */
        padding-right: calc(var(--userimage-size--normal) + calc(var(--layoutsection-horizontalspacing) / 2));
    }

    .forumitem--thread--devtracker {
        --forumitem-secondaryinfo-width: 5em;
    }

.forumitem > * + * {
    margin-top: calc(var(--section-verticalspacing) / 3);
}

/* @group Forum item header */
.forumitem-header {
    width: calc(100% - var(--forumitem-latestpost-width));
}

a.forumitem-header,
.forumitem-header a {
    color: inherit;
    border: none;
}
    a.forumitem-header:hover,
    .forumitem-header a:hover {
        color: var(--textcolor);
    }


@media screen and (min-width:700px) {
    .forumitem {
        --forumitem-latestpost-width: 6em;
    }
}

@media screen and (min-width:1100px) {
    .forumitem {
        --forumitem-latestpost-width: 10em;
        --forumitem-horizontalspacing: var(--layoutsection-horizontalspacing);
    }
        .forumitem--category {
            --forumitem-latestpost-width: 14em;
        }
    .pagecontent-main:only-child .forumitem {
        --forumitem-latestpost-width: 10em;
    }
}

@media screen and (min-width:550px) {
    .forumitem-header {
        width: calc(100% - var(--forumitem-secondaryinfo-width) - var(--forumitem-numberofposts-width) - var(--forumitem-latestpost-width) - (var(--forumitem-horizontalspacing) * 3));
    }
        .forumitem-header:nth-last-child(5) {
            width: calc(100% - var(--forumitem-secondaryinfo-width) - var(--forumitem-numberofposts-width) - var(--forumitem-latestpost-width) - (var(--forumitem-horizontalspacing) * 4));
        }

        .forumitem--category .forumitem-header {
            width: calc(100% - var(--forumitem-numberofposts-width) - var(--forumitem-latestpost-width) - (var(--forumitem-horizontalspacing) * 2));
        }
}

/* @end Forum item header */


.forumitem-title {
    max-width: 100%;
    overflow: hidden;
    font-size: 1.2em;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--textcolor--secondary)
}
    .forumitem--thread .forumitem-title {
        font-size: 1em;
        font-family: var(--fontfamily);
        font-weight: normal;
    }


.forumitem-title + * {
    margin-top: 0.25em;
}
.forumitem-description {
    font-size: 0.95em;
    opacity: 0.5;
}
a.forumitem-description,
.forumitem-description a {
    color: inherit;
}


.forumitem-usertime {
    font-size: 0.9em;
    color: var(--textcolor--quartenary);
    white-space: nowrap;
}

.forumitem-usertime > * {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    .forumitem-usertime > * + * {
        margin-top: 0.25em;
    }

.forumitem-usertime .forumitem-user > * + * {
    margin-top: 0;
}

.forumitem-usertime .forumitem-user a:only-child,
.forumitem-usertime .forumitem-user a span {
    border-bottom: 1px solid;
}

.forumitem-user > small {
    opacity: 0.5;
}

.forumitem-usertime .forumitem-time {
    opacity: 0.7;
}


.forumitem--thread .forumitem-user img {
    display: none;
    width: var(--userimage-size--normal);
    height: var(--userimage-size--normal);
}


@media screen and (min-width: 700px) {
    .forumitem-usertime {
        display: flex;
        justify-content: flex-start;
    }
    .forumitem-usertime > * + * {
        margin-top: 0;
        margin-left: calc(var(--forumitem-horizontalspacing) / 2);
    }


    .forumitem--thread .forumitem-header {
        padding-left: calc(var(--userimage-size--normal) + 1rem);
    }
        .forumitem--thread--devtracker .forumitem-header {
            padding-left: 0;
        }


    .forumitem--thread .forumitem-user img {
        display: block;
        position: absolute;
        left: var(--forumitem-padding--horizontal);
        top: var(--forumitem-padding--vertical);
    }
}


.forumitem .numberofcomments {
    font-size: inherit;
}


/* @group Forum - latest post */
.forumitem-latestpost {
    position: absolute;
    right: var(--wrapper-padding);
    top: 0;
    flex-shrink: 0;
    flex-grow: 0;
    width: var(--forumitem-latestpost-width);
    line-height: 1.2;
}

.forumitem-latestpost * + * {
    margin-top: 0;
}

.forumitem-latestpost-user {
    font-size: 0.8rem;
}
    /* when the user is the first child of the latestpost parent, we need to have a bigger font, since there is no topic */
    .forumitem-latestpost-user:first-child {
        font-size: 1em;
    }

.forumitem-latestpost-user a {
    display: flex;
    align-items: center;
    color: var(--textcolor--secondary);
    border: none;
}
    .forumitem-latestpost-user:first-child a,
    .forumitem-latestpost-user a span {
        color: var(--textcolor--anchor);
    }


/* When there is a span, it represents the user name */
.forumitem-latestpost-user a span {
    display: none;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid transparent;
    opacity: 0.5;
}
    .forumitem-latestpost-user:first-child a span {
        opacity: 1;
    }
    .forumitem-latestpost-user a:hover span {
        border-color: currentColor;
    }
    .forumitem-latestpost-user a span small {
        color: var(--textcolor--secondary);
    }

.forumitem-latestpost-user a > * {
    display: none;
}

.forumitem-latestpost-user img {
    display: block;
    width: var(--userimage-size--normal);
    height: var(--userimage-size--normal);
    max-width: none;
    max-height: none;
    border: none;
}
.forumitem-latestpost-user a > :nth-child(2) + * {
    margin-left: 0.5em;
}


.forumitem-latestpost-time {
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--textcolor--secondary--transparent50);
    text-align: right;
}
@media (max-width: 700px) {
    .forumitem-latestpost-time.message-latestpost-time {
        white-space: normal;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }
}
.forumitem-latestpost-time span:nth-child(3):last-child {
    display: none;
}

.forumitem-latestpost-thread {
    display: none;
    width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
    font-size: 0.95em;
    text-overflow: ellipsis;
}


@media screen and (min-width:700px) {
    .forumitem-latestpost {
        padding-left: calc(var(--userimage-size--normal) + 0.75em);
    }

    .forumitem-latestpost-user img {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .forumitem-latestpost-time {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        text-align: left;
    }

    .forumitem-latestpost-time span:first-child {
        display: block;
        margin-top: -0.2em;
        font-size: 1.25em;
        font-family: var(--fontfamily--titles);
        font-weight: bold;
    }
    .forumitem-latestpost-time span:nth-child(3):last-child {
        display: inline-block;
    }
}
@media screen and (min-width:1100px) {
    /* intended specificity */
    .pagecontent-main:last-child .forumitem--thread--devtracker .forumitem-latestpost,
    .forumitem--thread--devtracker .forumitem-latestpost {
        width: 12em;
    }

    .forumitem-latestpost-user > a > * {
        display: block;
    }
        .forumitem-latestpost-user a span {
            display: inline-block;
        }

    .forumitem-latestpost-time {
        font-size: 0.85rem;
        line-height: inherit;
        text-align: left;
    }

    .forumitem-latestpost-time span:first-child {
        display: inline;
        font-size: inherit;
        font-family: inherit;
        font-weight: inherit;
    }

    .forumitem-latestpost-thread {
        display: block;
    }
        * + .forumitem-latestpost-thread {
            margin-top: 0.25em;
        }
}
/* @end Forum - latest post */


/* @group Forum item - location */
.forumitem-location {
    font-size: 0.9rem;
    line-height: 1.1;
    text-align: right;
    color: var(--textcolor--quartenary--transparent75);
}
.forumitem-location small {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.5;
}

/* @end Forum item - location */

.forumitem-numberofposts {
    flex-shrink: 0;
    flex-grow: 0;
    width: var(----forumitem-numberofposts-width);
    font-size: 0.9em;
}
    .forumitem--thread .forumitem-numberofposts {
        display: none;
    }

/* Intended specificity */
.forumitem .forumitem-secondaryinfo {
    display: none;
    width: var(--forumitem-secondaryinfo-width);
}
@media screen and (min-width:550px) {
    .forumitem--thread .forumitem-numberofposts,
    .forumitem-secondaryinfo {
        display: block;
    }

    .forumitem-numberofposts {
        font-size: 1em;
    }
}

/* @group Forum - number of views */
.forumitem .numberofviews {
    flex-shrink: 0;
    flex-grow: 0;
    text-align: right;
}
/* @end Forum - number of views */


@media screen and (min-width:550px) {
    .forumitem {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        padding-right: var(--wrapper-padding);
    }

        .forumitem--thread,
        .forumitem--category {
            padding-right: var(--wrapper-padding);
        }

    .forumitem > * + * {
        margin-top: 0;
        margin-left: var(--forumitem-horizontalspacing);
    }
        .forumitem > *:first-child {
            margin-left: 0;
            margin-right: 0;
        }
        .forumitem > .forumitem-header {
            margin-right: auto;
        }



    .forumitem-numberofposts {
        text-align: right;
    }
    .forumitem-latestpost {
        position: relative;
        left: 0;
        right: 0;
    }

}


/* @group Forum post */
.forumitem--post {
    display: block;
    padding: calc(var(--wrapper-padding) / 1.2) var(--wrapper-padding);

}
	@media screen and (min-width:900px) {
    .forumitem--post {
        display: grid;
        grid-column-gap: var(--layoutsection-horizontalspacing);
        grid-template-columns: 13em 1fr;
        padding: var(--wrapper-padding);
    }

    .forumitem--post > * + * {
        margin-top: 0;
    }
}
/* @end Forum post */


/* @group Forum post header */
.forumpost-header {
    position: relative;
}


@media screen and (min-width: 600px) {
    .forumpost-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .forumpost-header .statistics {
        margin-top: 0;
    }
}


	@media screen and (min-width:900px) {
    .forumpost-header {
        display: block;
        grid-row: 1 / 3;
        height: 100%;
        padding-right: var(--layoutsection-horizontalspacing);
    }

        .forumpost-header:not(:last-child)::before {
            content: '';
            position: absolute;
            right: 0;
            top: calc(var(--wrapper-padding) * -1);
            width: 1px;
            height: calc(100% + var(--wrapper-padding) * 2);
            border-right: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.75);
            opacity: 0.125;
        }


    .forumpost-header .statistics {
        display: grid;
        grid-column-gap: 0.5em;
        align-items: end;
        grid-template-columns: -webkit-max-content 1fr;
        grid-template-columns: max-content 1fr;

        margin-top: var(--section-verticalspacing);
    }

    .forumpost-header .statistics dt {
        grid-column: 2;
    }
    .forumpost-header .statistics dd {
        grid-column: 1;
        text-align: right;
    }
        .forumpost-header .statistics dd:first-of-type {
            grid-row: 1;
        }
        .forumpost-header .statistics dd:nth-of-type(2) {
            grid-row: 2;
        }
        .forumpost-header .statistics dd:nth-of-type(3) {
            grid-row: 3;
        }
        .forumpost-header .statistics dd:nth-of-type(4) {
            grid-row: 4;
        }
        .forumpost-header .statistics dd:nth-of-type(5) {
            grid-row: 5;
        }

}
/* @end Forum post header */


/* @group Forum post footer */
.forumpost-footer {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: calc(var(--wrapper-padding) * -1);
    margin-right: calc(var(--wrapper-padding) * -1);
    padding: calc(var(--wrapper-padding) / 1.5) var(--wrapper-padding);
}
    * + .forumpost-footer {
        margin-top: calc(var(--section-verticalspacing) / 1.5);
    }
    .forumpost-footer::before,
    .forumpost-footer::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
    }
        .forumpost-footer::before {
            z-index: -1;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid #fff;
            box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 1);
            opacity: 0.1;
        }
        .forumpost-footer::after {
            width: 100%;
            height: 1px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.75);
            opacity: 0.125;
        }


	@media screen and (min-width:900px) {
    .forumpost-footer {
        margin-top: calc(var(--wrapper-padding) * -1);
        margin-left: calc(var(--layoutsection-horizontalspacing) * -1);
    }
        .forumpost-footer::after {
            content: normal;
        }
}


.forumpost-footer > * {
    width: 100%;
}
    .forumpost-footer * + * {
        margin-top: 0;
    }

.forumpost-footer + * {
    margin-top: calc(var(--section-verticalspacing) / 1.5);
}

.forumpost-actions {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-left: calc(var(--wrapper-padding) * -1);
    margin-right: calc(var(--wrapper-padding) * -1);
    margin-bottom: calc(var(--wrapper-padding) / 1.5 * -1);
    width: calc(100% + var(--wrapper-padding) * 2);
    font-size: 0.75rem;
    text-transform: uppercase;
}
    * + .forumpost-actions {
        margin-top: calc(var(--section-verticalspacing) / 2);
    }
        * + .forumpost-actions::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: left 1px 0 0 rgba(0, 0, 0, 1);
            opacity: 0.1;
        }

.forumpost-actions > * {
    padding: 0;
}
    .forumpost-actions > * + * {
        margin: 0;
    }

.forumpost-actions > *,
.forumpost-actions > * > form {
    position: relative;
    display: flex;
}
    .forumpost-actions > *::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 100%;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: -1px 0 0 0 rgba(0, 0, 0, 1);
        opacity: 0.1;
    }

.forumpost-actions a,
.forumpost-actions button,
.forumpost-actions label {
    display: flex;
    align-items: center;
    padding: 1em 1.5em;
    color: var(--textcolor--quartenary--transparent75);
    border: none;
}
    .forumpost-actions a:hover,
    .forumpost-actions button:hover,
    .forumpost-actions label:hover {
        color: var(--textcolor--quartenary);
        background: rgba(255, 255, 255, 0.025);
    }
    .forumpost-actions .icon {
        font-size: 1.25em;
    }

.forumpost-actions .managementaction {
    background: var(--toolbar-background--secondary);
}

@media screen and (min-width: 600px) {
    .forumpost-footer {
        flex-wrap: nowrap;
    }

    .forumpost-footer > * {
        width: auto;
    }

    .forumpost-actions {
        justify-content: flex-end;
        margin-left: auto;
    }
        * + .forumpost-actions {
            margin-top: calc(var(--wrapper-padding) / 1.5 * -1);
        }
            * + .forumpost-actions::before {
                content: normal;
            }
}
/* @end Forum post footer */


/* @group Forum post content */
.forumpost-content {
    margin-left: 0;
    padding-right: 1em;
    font-size: 1.1em;
    /* It seems to make the grid allow overflow-wrap in the container */
    overflow: hidden;
}
.comment-content-html ul,
.comment-content-html ol {
    padding-left: 20px;
}
.comment-content-html ul,
.comment-content-html ul > li {
    list-style-type: disc;
}
.comment-content-html ol,
.comment-content-html ol > li {
    list-style-type: decimal;
}
.forumpost-content .image {
    margin-left: 0;
    margin-right: 0;
}
.forumpost-content p {
    max-width: none;
}

.forumpost-content > * + * {
    margin-top: calc(var(--section-verticalspacing) / 2);
}

.forumpost-edit {
    font-size: 0.9em;
    color: var(--textcolor--quartenary--transparent50);
}
.forumpost-edit a {
    color: inherit;
    border-color: currentColor;
}
    .forumpost-edit a:hover {
        color: var(--textcolor--quartenary);
    }
/* @end Forum post content */


.forumitem-status {
    position: relative;
    display: inline-block;
    margin: 0;
    width: 2em;
    overflow: hidden;
    padding: 0.25em 0.4em;
    font-size: 0.65rem;
    text-indent: 2em;
    text-overflow: clip;
    font-weight: bold;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    background: #4a4a73;
    border-radius: 0.2em;
}
    .forumitem-status--hidden {
        background: #734a73;
    }

    .forumitem-status + .forumitem-status {
        margin-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
        .forumitem-status:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    .forumitem-status--locked::before,
    .forumitem-status--hidden::before {
        content: '\EA17';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        text-indent: 0;
        font-family: icons;
    }
        .forumitem-status--hidden::before {
            content: '\EA16';
        }

@media screen and (min-width: 800px) {
    .forumitem-status {
        width: auto;
        overflow: visible;
        text-indent: 0;
        text-overflow: ellipsis;
    }
        .forumitem-status--locked::before,
        .forumitem-status--hidden::before {
            content: '\EA17';
            position: static;
            display: inline-block;
            margin-right: 0.5em;
            transform: none;
        }
        * + .forumitem-status {
            margin-left: auto;
        }
}

/* @group News list */
.newslist {
    --newslist-item-image-width: 7rem;
    color: var(--textcolor--secondary);
    font-size: 1.075em;
    line-height: 1.3;
}
    .newslist > * {
        padding-left: 0;
    }
        .newslist > *::before {
            content: normal;
        }
        .newslist > * + * {
            margin-top: var(--section-verticalspacing);
        }

.newslist-item {
    position: relative;
}

.newslist-item * + * {
    margin-top: 0;
}

.newslist-item > p:first-of-type {
    position: relative;
    height: 9em;
    overflow: hidden;
}

@media screen and (min-width: 520px) {
    .newslist-item > p:first-of-type {
        height: 11em;
    }
}
.newslist-item > p:first-of-type + * {
    margin-top: calc(var(--section-verticalspacing) / 3);
}

.newslist-item > p:first-of-type img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    max-height: none;
}
    .newslist--secondary .newslist-item > p:first-of-type img {
        left: 50%;
        width: auto;
        transform: translateX(-50%);
    }

@media screen and (min-width: 600px) {
    .newslist-item {
        padding-left: calc(var(--newslist-item-image-width) + var(--layoutsection-horizontalspacing) / 1.5);
    }

    .newslist-item > p:first-of-type {
        position: absolute;
        left: 0;
        top: 0;
        width: var(--newslist-item-image-width);
        height: 100%;
    }
}

.newslist-item header + * {
    margin-top: calc(var(--section-verticalspacing) / 2);
}

.newslist-item header a {
    color: inherit;
    border: none;
}

/* Date */
.newslist-item time {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--newslist-item-image-width);
    padding: 2em 1em;
    line-height: 1;
    font-size: 0.55em;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    text-transform: uppercase;
}
    @media screen and (min-width: 600px) {
        .newslist-item time::before {
            content: '';
            position: absolute;
            left: 1.5em;
            bottom: 0;
            width: calc(100% - 3em);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
    }

    .newslist-item time::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: calc(100% + 3em);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0) 100%);
    }

.newslist-item time span:first-child {
    font-size: 3em;
    font-family: var(--fontfamily--titles);
    font-weight: bold;
}
.newslist-item time span:last-child {
    margin-left: 0.5em;
    text-align: left;
    letter-spacing: 0.2em;
    font-family: unset;
}

.newslist-item-commentsauthor {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.newslist-item-commentsauthor > * + *,
.newslist-item-commentsauthor > p + p {
    margin-top: 0;
    margin-left: 1em;
}


/* Author */
.newslist-item-author {
    font-size: 0.9em;
    font-family: var(--fontfamily--titles);
    letter-spacing: 0.05em;
}
.newslist-item-author a {
    text-decoration: underline;
}


.newslist-item h2 {
    font-size: 1.4rem;
}
    .newslist-item h2::after {
        content: normal;
    }

.newslist-item h2 + * {
    margin-top: calc(var(--section-verticalspacing) / 5);
}
/* @end News list */

/* @group Item */
:root {
    --item-type0color: #c8c8c8;
    --item-type1color: #8686fe;
    --item-type2color: #fefe76;
    --item-type3color: #b15e1c;
    --item-type4color: #0da29c;
    --item-type5color: #aa9f7f;
    --item-type8color: #a154e0;
}

/* Damien asked to have the classes modifiers be in sync with the game, so
 * instead of item--unique, we now have item--frametype3
 *
 * frametype0 - normal item (no need to add a class)
 * frametype1 - magic
 * frametype3 - unique
 * frametype4 - gem
 * frametype5 - currency
 * frametype6 - divination card
 * frametype8 - prophecy */
.item {
    --item-padding--vertical: 2em;
    --item-padding--horizontal: 1em;
    --item-content-spacing: 1.25em;
    --item-image-height: 18em;
    --item-textcolor-secondary: var(--item-type0color);
    --item-titlecolor: var(--item-type0color);
    --item-background-numberofcomments: #62686c;
    --item-poem-color: #af6025;
    --item-background: rgba(0, 0, 0, 0.92);

    --item-propertynamecolor: #7f7f7f;

    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    max-width: 37em;
    line-height: 1.1;
    color: var(--item-propertynamecolor);
    font-family: 'Fontin Smallcaps', var(--fontfamily--titles), Georgia, Serif;
    background: var(--item-background);
}
    /* Border */
    .item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        border: 1px solid var(--item-titlecolor);
        opacity: 0.3;
        border-radius: inherit;
    }
    /* Divination card - special case: the left/right border */
    .item--frametype6 {
        --itemdivinationcard-borderleft-width: 24px;
        --itemdivinationcard-borderright-width: 18px;
        --itemdivinationcard-borderbottom-height: 29px;
    }
    .item--frametype6::before,
    .item--frametype6::after {
        content: '';
        position: absolute;
        left: -2px;
        top: 2em;
        z-index: -1;
        width: var(--itemdivinationcard-borderleft-width);
        height: calc(100% - 3em);
        background: url(../images/sprite.png) no-repeat left -4700px;
        border: none;
        mix-blend-mode: normal;
    }
        .item--frametype6::after {
            left: auto;
            right: 0;
            width: var(--itemdivinationcard-borderright-width);
            background-position: -40px -4700px;
        }

    /* Unique */
    .item--frametype3 {
        --item-titlecolor: var(--item-type3color);
        --item-textcolor-secondary: var(--item-type3color);
        --item-background-numberofcomments: #60321e;
    }

    /* Gem */
    .item--frametype4 {
        --item-titlecolor: var(--item-type4color);
        --item-textcolor-secondary: var(--item-type4color);
        --item-background-numberofcomments: #405b55;
    }

    /* Currency */
    .item--frametype5 {
        --item-titlecolor: var(--item-type5color);
        --item-textcolor-secondary: var(--item-type5color);
        --item-background-numberofcomments: #676246;
    }

    /* Divination card */
    .item--frametype6 {
        --item-padding--vertical: 0;
        --item-padding--horizontal: 0.5em;
        --item-textcolor-secondary: #869a92;
        --item-titlecolor: #151617;
        --item-background-numberofcomments: #80786e;
        /* Divination card - fixed version required by the client */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 300px;
        height: 455px;
        font-size: 1em;
        line-height: 1.1;
        border-radius: 0.5em;
        box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.75);
        background-image: url('../images/background-item--frametype6.jpg');
    }

    /* Prophecy */
    .item--frametype8 {
        --item-titlecolor: var(--item-type8color);
        --item-textcolor-secondary: var(--item-type8color);
        --item-background-numberofcomments: #64328e;
    }


@media screen and (min-width: 700px) {
    .item {
        --item-image-height: 24em;
    }
}

@media screen and (min-width: 450px) {
    .item--frametype6 {
        width: 420px;
        height: 653px;
        font-size: 1.55em;
    }
}

.item ul > *,
.item ol > * {
    padding-left: 0;
}
    .item ul > *::before,
    .item ol > *::before {
        content: normal;
    }

.item-header {
    position: relative;
    z-index: 2;
    padding: calc(var(--item-padding--vertical) / 2.5) var(--item-padding--horizontal);
    text-align: center;
}
    /* Divination card - special case - make the bottom padding a little bigger to compensate for the backgorund graphic */
    /* Special case - fixed height */
    .item--frametype6 .item-header {
        --itemdivinationcard-header-height: 65px;
        --itemdivinationcard-header-paddingbottom: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: calc(var(--itemdivinationcard-header-height) + var(--itemdivinationcard-header-paddingbottom));
        margin-bottom: calc(var(--itemdivinationcard-header-paddingbottom) * 1.3 * -1);
        padding: 0 calc(var(--item-padding--horizontal) * 1.1);
        padding-bottom: var(--itemdivinationcard-header-paddingbottom);
    }
        .item--frametype6 .item-header + * {
            margin-top: 0;
        }

    .item-header::before,
    .item-header::after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        height: 100%;
        background-image: url(../images/frametype-0.jpg);
        background-position: 0 center;
        background-repeat: no-repeat;
        background-size: auto 100%;
        opacity: 0.75;
    }
        .item-header::before {
            left: 0;
            width: calc(100% - 7em);
        }
        .item-header::after {
            right: 0;
            width: 7em;
            background-position: right center;
        }


    .item--frametype3 .item-header::before,
    .item--frametype3 .item-header::after {
        background-image: url(../images/frametype-3.jpg);
    }
    .item--frametype4 .item-header::before,
    .item--frametype4 .item-header::after {
        background-image: url(../images/frametype-4.jpg);
    }
    .item--frametype5 .item-header::before,
    .item--frametype5 .item-header::after {
        background-image: url(../images/frametype-5.jpg);
    }
    .item--frametype6 .item-header::before,
    .item--frametype6 .item-header::after {
        opacity: 1;
        background-image: url(../images/frametype-6.png);
    }
        .item--frametype6 .item-header::before {
            width: calc(100% - 2em);
        }
        .item--frametype6 .item-header::after {
            width: 8em;
        }
    .item--frametype8 .item-header::before,
    .item--frametype8 .item-header::after {
        background-image: url(../images/frametype-8.jpg);
    }

.item-header > * {
    position: relative;
    z-index: 2;
}
    .item-header > * + * {
        margin-top: 0;
    }

.item-header > p {
    max-width: none;
}

/* @group Item header title */
.item-header-title {
    position: relative;
    z-index: 2;
    max-width: none;
    font-size: 1.3em;
    color: var(--item-titlecolor);
}
    .item--frametype6 .item-header-title {
        font-size: 0.9em;
    }

.item-header-title h1,
.item-header-title h2,
.item-header-title h3,
.item-header-title h4,
.item-header-title h5,
h1.item-header-title,
h2.item-header-title,
h3.item-header-title,
h4.item-header-title,
h5.item-header-title  {
    color: var(--item-titlecolor);
    font-family: inherit;
}
    .item-header-title h1,
    .item-header-title h2,
    .item-header-title h3,
    .item-header-title h4,
    .item-header-title h5  {
        font-size: inherit;
    }

    h1.item-header-title,
    h2.item-header-title,
    h3.item-header-title,
    h4.item-header-title,
    h5.item-header-title  {
        margin-top: 0;
    }

/* @end Item header title */


/* @group Item content wrap */
.item-contentwrap {
    position: relative;
    padding:
        var(--item-padding--vertical)
        var(--item-padding--horizontal);
}
    /* Special case - divination card - fixed */
    .item--frametype6 .item-contentwrap {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
        height: 100%;
        padding:
            0
            var(--itemdivinationcard-borderright-width)
            calc(var(--itemdivinationcard-borderbottom-height) / 1.25)
            var(--itemdivinationcard-borderleft-width);
    }

* + .item-contentwrap {
    margin-top: 1px;
}
    /* Divination card - special case: the bottom border */
    .item--frametype6 .item-contentwrap::before {
        content: '';
        position: absolute;
        left: -3px;
        bottom: 0;
        z-index: -1;
        width: calc(100% - 2em);
        height: var(--itemdivinationcard-borderbottom-height);
        background: url(../images/sprite.png) no-repeat left -4660px;
    }
    /* Divination card - special case: the right bottom corner */
    .item--frametype6 .item-contentwrap::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 97px;
        height: 29px;
        background: url(../images/sprite.png) no-repeat -90px -4700px;
    }

.item-contentwrap > * + * {
    margin-top: 0;
}

/* @end Item content wrap */


/* @group Item content */
.item-content {
    position: relative;
    font-size: 1.05em;
    text-align: center;
    letter-spacing: 0.05em;
    font-weight: bold;
}
    .item--frametype6 .item-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    * + .item-content {
        border-top: 1px solid rgba(0, 0, 0, 0.5);
    }
        .item--frametype6 * + .item-content {
            margin: 0;
            flex-basis: 100%;
            border-top: none;
        }
            .item--frametype6 * + .item-content::after {
                content: normal;
            }


.item-content > *,
.item-content + * {
    position: relative;
}
    .item:not(.item--frametype6) .item-content > * + *,
    .item-content + * {
        margin-top: var(--item-content-spacing);
        padding-top: var(--item-content-spacing);
    }
        /* @group Border between specification/mods/requirements */
        .item:not(.item--frametype6) .item-content > * + *::before,
        .item-content + *::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 2px;
            background-image:
                linear-gradient(to right, transparent, #000 50%, transparent),
                linear-gradient(to right, transparent, var(--item-titlecolor) 50%, transparent);
            background-size:
                100% 1px,
                100% 1px;
            background-position:
                left top,
                left bottom;
            background-repeat: no-repeat;
        }
        /* @end Border between specification/mods/requirements */
/* @end Item content */

/* @group Item image */
.item-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
    max-width: none;
    background: rgba(0, 0, 0, 0.1);
}
    .pagecontent-main .item-image {
        max-width: none;
    }

    .tooltip .item-image {
        display: none;
    }

    /* Divination card - special case */
    .item--frametype6 .item-image {
        display: block;
        z-index: -2;
        width: 100%;
        padding: 0;
        background: none;
    }
        .item--frametype6 .item-image::before,
        .item--frametype6 .item-image::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 7px;
            background: url('../images/sprite.png') no-repeat left -4690px;
        }
            .item--frametype6 .item-image::after {
                left: auto;
                right: 0;
                width: 107px;
                height: 47px;
                background-position: -90px -4740px;
                transform-origin: right top;
                transform: scale(0.5) translateY(-50%);
            }

.item-image img {
    display: block;
}
    .item--frametype6 .item-image img {
        width: 100%;
        height: auto;
    }

/* @end Item image */



/* @group Amount - Divination card */
.item-amount {
    position: relative;
    margin-left: 0;
    margin-bottom: -1.5em;
    margin-right: auto;
    width: 3em;
    padding: 0.25em 0;
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
    background-image: url('../images/background-item--frametype6.jpg');
    border-radius: 0.5em;
    transform: translateY(-50%);
}
    /* The left and right borders */
    .item-amount::before,
    .item-amount::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 16px;
        height: 51px;
        background: url(../images/sprite.png) no-repeat -230px -4740px;
        transform: translateX(-50%) translateY(-50%);
    }
        .item-amount::after {
            left: calc(100% - 0.25em);
            width: 69px;
            transform-origin: left top;
            transform: scale(0.5) translateY(-47%);
            background-position: -260px -4740px;
        }

    /* The top and bottom borders */
    .item-amount span::before,
    .item-amount span::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        width: 100%;
        height: 17px;
        background: url(../images/sprite.png) no-repeat center -4740px;
        transform: translateX(-50%) translateY(-80%);
    }
        .item-amount span::after {
            top: auto;
            bottom: 0;
            transform: translateX(-50%) translateY(100%) scaleY(-1);
        }
/* @end Amount - Divination card */


@media screen and (min-width: 700px) {
    .item--frametype6 .item-image::after {
        transform: translateY(-50%);
    }
    .item-amount::after {
        transform: translateY(-47%);
    }
}


.item-valuetype0 {
    color: #fff;
}
.item-valuetype1 {
    color: #8888ff;
}
.item-valuetype4 {
    color: #8f0000;
}
.item-valuetype5 {
    color: #326496;
}
.item-valuetype6 {
    color: #fed700;
}
.item-valuetype7 {
    color: #d01690;
}

.item-corrupted,
a.item-corrupted,
.item-corrupted a {
    color: #d30000;
}

.item-veiledmods,
a.item-veiledmods,
.item-veiledmods a {
    color: #b8daf1;
}

/* @group Items flavours - needed mainly for the divination cards items */
.item-currencyflavour,
a.item-currencyflavour,
.item-currencyflavour a {
    color: var(--item-type5color);
}
.item-uniqueflavour,
a.item-uniqueflavour,
.item-uniqueflavour a {
    color: var(--item-type3color);
}
.item-prophecyflavour,
a.item-prophecyflavour,
.item-prophecyflavour a {
    color: var(--item-type8color);
}
.item-magicflavour,
a.item-magicflavour,
.item-magicflavour a {
    color: var(--item-type1color);
}
.item-defaultflavour,
a.item-defaultflavour,
.item-defaultflavour a {
    color: #7d7d7d;
}
.item-normalflavour,
a.item-normalflavour,
.item-normalflavour a {
    color: var(--item-type0color);
}
.item-augmentedflavour,
a.item-augmentedflavour,
.item-augmentedflavour a {
    color: var(--item-type1color);
}
.item-whiteflavour,
a.item-whiteflavour,
.item-whiteflavour a {
    color: var(--item-type0color);
}
.item-rareflavour,
a.item-rareflavour,
.item-rareflavour a {
    color: var(--item-type2color);
}
.item-gemflavour,
a.item-gemflavour,
.item-gemflavour a {
    color: var(--item-type4color);
}
.item-divinationflavour,
a.item-divinationflavour,
.item-divinationflavour a {
    color: #02aff1;
}
.item-corruptedflavour,
a.item-corruptedflavour,
.item-corruptedflavour a {
    color: #d30000;
}
.item-enchantedflavour,
a.item-enchantedflavour,
.item-enchantedflavour a {
    color: #b4b4ff;
}

/* @end Items flavours - needed mainly for the divination cards items */


/* @group Item specification */
.item-specification {
    position: relative;
}
    /* Special case - Divination Cards - fixed */
    .item--frametype6 .item-specification {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 5.25em;
    }
        .item--frametype6 .item-specification::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 100%;
            width: 257px;
            height: 3px;
            background: url(../images/sprite.png) no-repeat -400px -4745px;
            transform: translateX(-50%);
        }

ul.item-specification > * {
    display: block;
}
    ul.item-specification > * + * {
        margin-top: 0.4em;
    }

.item-specification dfn::after {
    content: ':';
}

.item-specification em {
    font-weight: bold;
}
    .item-specification em:not([class]) {
        color: #fff;
    }

/* The specification can also be a simple section or a p */
.item-specification > p + p {
    margin-top: 0;
}

/* @end Item specification */


/* @group Item mods */
.item-mods {
    color: #8888FF;
}
    .pagecontent-main .item-mods {
        max-width: none;
    }

.item-mods > * + *,
.item-mods > * ul > * + *,
.item-mods * + ul {
    margin-top: 0.4em;
}
    .item-mods > * ul > * + *::before {
        content: '';
        position: absolute;
        left: 50%;
        top: -0.2em;
        width: 5em;
        height: 1px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        transform: translateX(-50%);
    }
/* @end Item mods */

/* @group Item flavour text */
.item-flavourtext {
    color: #ac6d38;
    font-style: italic;
}
.item-flavourtext img {
    margin-top: 0;
    vertical-align: middle;
}
/* @end Item flavour text */


/* Item detail text */
.item-detailtext {
    color: var(--item-titlecolor);
}
/* @group Item detail text */


/* Item prophecy text */
.item-prophecytext {
    color: #fff;
}
/* @group Item prophecy text */


/* Description text */
.item-description {
    color: #7d7d7d;
    font-style: italic;
}
    .item-description {
        color: #7d7d7d;
    }
/* @group Description text */


/* @group Item poem */
.item-poem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto 0;
    font-style: italic;
    color: var(--item-poem-color);
}
/* @end Item poem */
/* @end Item description */

/* @end Item */


/* @group Required by the backend team (they have the corrupted keyword appear in multiple places and levels and only the first one that appears must be visible) */
.item-mods + .item-mods .item-veiledmods,
.item-content > .item-corrupted:not(:first-of-type),
.item-content > .item-corrupted + .item-mods > .item-corrupted {
    display: none;
}
/* @end Required by the backend team */


/* @group Item links - links that point to an item and must have the item's specific colour */
a.itemlink {
    color: var(--item-type0color);
    text-decoration: none;
}
a.itemlink--type3 {
    color: var(--item-type3color);
}
a.itemlink--type4 {
    color: var(--item-type4color);
}
a.itemlink--type5 {
    color: var(--item-type5color);
}
a.itemlink--type8 {
    color: var(--item-type8color);
}
/* @end Item links - links that point to an item and must have the item's specific colour */


/* @group Item link */
/* Class added by the backend */
.item-link img {
    max-width: 1.5em;
    max-height: 1.5em;
    vertical-align: middle;
}

/* @end Item link */


/* @group Item icon */


/* Equipment subnav */
:root {
    --itemicon-placeholdersize: 3.5rem;
}
.itemicon {
    display: inline-block;
    position: relative;
    padding-left: var(--itemicon-placeholdersize);
}
    .itemicon::before {
        content: '';
        position: absolute;
        left: 1em;
        width: 30px;
        height: 49px;
        background: url(../images/sprite.png) no-repeat -100px -4850px;
        transform: translateX(-50%);
    }
        .itemicon--armour::before {
            width: 26px;
            background-position: -150px -4850px;
        }
        .itemicon--weapon::before {
            width: 28px;
            background-position: -200px -4850px;
        }
        .itemicon--accessory::before {
            width: 31px;
            background-position: -250px -4850px;
        }
        .itemicon--jewel::before {
            width: 26px;
            background-position: -300px -4850px;
        }
        .itemicon--flask::before {
            width: 16px;
            background-position: -350px -4850px;
        }
        .itemicon--currency::before {
            width: 31px;
            background-position: -400px -4850px;
        }
        .itemicon--skillgem::before {
            width: 35px;
            background-position: -450px -4850px;
        }
        .itemicon--divinationcard::before {
            width: 38px;
            background-position: -500px -4850px;
        }
        .itemicon--questitem::before {
            width: 40px;
            background-position: -550px -4850px;
        }
        .itemicon--prophecy::before {
            width: 37px;
            background-position: -600px -4850px;
        }

        .itemicon--armourunique::before {
            width: 34px;
            height: 38px;
            background-position: -100px -4900px;
        }
        .itemicon--armourbody::before {
            width: 29px;
            height: 38px;
            background-position: -150px -4900px;
        }
        .itemicon--armourbodyunique::before {
            width: 28px;
            height: 39px;
            background-position: -200px -4900px;
        }
        .itemicon--boot::before {
            width: 30px;
            height: 36px;
            background-position: -250px -4900px;
        }
        .itemicon--bootunique::before {
            width: 32px;
            height: 38px;
            background-position: -300px -4900px;
        }
        .itemicon--glove::before {
            width: 42px;
            height: 36px;
            background-position: -350px -4900px;
        }
        .itemicon--gloveunique::before {
            width: 36px;
            height: 36px;
            background-position: -400px -4900px;
        }
        .itemicon--helmet::before {
            width: 25px;
            width: 37px;
            background-position: -450px -4900px;
        }
        .itemicon--helmetunique::before {
            width: 22px;
            height: 34px;
            background-position: -500px -4900px;
        }
        .itemicon--shield::before {
            width: 19px;
            height: 35px;
            background-position: -550px -4900px;
        }
        .itemicon--shieldunique::before {
            width: 23px;
            height: 37px;
            background-position: -600px -4900px;
        }
        .itemicon--weaponunique::before {
            width: 24px;
            height: 35px;
            background-position: -650px -4900px;
        }
        .itemicon--bow::before {
            width: 24px;
            height: 40px;
            background-position: -700px -4900px;
        }
        .itemicon--bowunique::before {
            width: 20px;
            height: 40px;
            background-position: -750px -4900px;
        }
        .itemicon--claw::before {
            width: 41px;
            height: 28px;
            background-position: -800px -4900px;
        }
        .itemicon--clawunique::before {
            width: 41px;
            height: 32px;
            background-position: -850px -4900px;
        }
        .itemicon--dagger::before {
            width: 32px;
            height: 38px;
            background-position: -900px -4900px;
        }
        .itemicon--daggerunique::before {
            width: 35px;
            height: 44px;
            background-position: -950px -4900px;
        }
        .itemicon--axe::before {
            width: 28px;
            height: 42px;
            background-position: -1000px -4900px;
        }
        .itemicon--axeunique::before {
            width: 29px;
            height: 44px;
            background-position: -1050px -4900px;
        }
        .itemicon--axeonehand::before {
            width: 23px;
            height: 45px;
            background-position: -1100px -4900px;
        }
        .itemicon--axeonehandunique::before {
            width: 22px;
            height: 45px;
            background-position: -1150px -4900px;
        }
        .itemicon--axetwohand::before {
            width: 26px;
            height: 44px;
            background-position: -1200px -4900px;
        }
        .itemicon--axetwohandunique::before {
            width: 21px;
            height: 42px;
            background-position: -1250px -4900px;
        }
        .itemicon--macesceptre::before {
            width: 29px;
            height: 42px;
            background-position: -1300px -4900px;
        }
        .itemicon--macesceptreunique::before {
            width: 43px;
            height: 46px;
            background-position: -1350px -4900px;
        }
        .itemicon--sceptre::before {
            width: 28px;
            height: 42px;
            background-position: -1400px -4900px;
        }
        .itemicon--sceptreunique::before {
            width: 32px;
            height: 48px;
            background-position: -1450px -4900px;
        }
        .itemicon--mace::before {
            width: 24px;
            height: 44px;
            background-position: -1500px -4900px;
        }
        .itemicon--maceunique::before {
            width: 25px;
            height: 48px;
            background-position: -1550px -4900px;
        }
        .itemicon--maceonehand::before {
            width: 28px;
            height: 48px;
            background-position: -1600px -4900px;
        }
        .itemicon--maceonehandunique::before {
            width: 32px;
            height: 48px;
            background-position: -100px -4950px;
        }
        .itemicon--macetwohand::before {
            width: 23px;
            height: 46px;
            background-position: -150px -4950px;
        }
        .itemicon--macetwohandunique::before {
            width: 22px;
            height: 46px;
            background-position: -200px -4950px;
        }
        .itemicon--sword::before {
            width: 20px;
            height: 47px;
            background-position: -250px -4950px;
        }
        .itemicon--swordonehand::before {
            width: 19px;
            height: 47px;
            background-position: -300px -4950px;
        }
        .itemicon--swordonehandunique::before {
            width: 16px;
            height: 49px;
            background-position: -350px -4950px;
        }
        .itemicon--swordonehandthrusting::before {
            width: 18px;
            height: 49px;
            background-position: -400px -4950px;
        }
        .itemicon--swordonehandthrustingunique::before {
            width: 19px;
            height: 50px;
            background-position: -450px -4950px;
        }
        .itemicon--swordtwohand::before {
            width: 22px;
            height: 49px;
            background-position: -500px -4950px;
        }
        .itemicon--swordtwohandunique::before {
            width: 24px;
            height: 48px;
            background-position: -550px -4950px;
        }
        .itemicon--stave::before {
            width: 24px;
            height: 48px;
            background-position: -600px -4950px;
        }
        .itemicon--staveunique::before {
            width: 24px;
            height: 48px;
            background-position: -650px -4950px;
        }
        .itemicon--wand::before {
            width: 16px;
            height: 48px;
            background-position: -700px -4950px;
        }
        .itemicon--wandunique::before {
            width: 16px;
            height: 46px;
            background-position: -750px -4950px;
        }

        .itemicon--accessoryunique::before {
            width: 42px;
            height: 42px;
            background-position: -800px -4950px;
        }
        .itemicon--amulet::before {
            width: 43px;
            height: 43px;
            background-position: -850px -4950px;
        }
        .itemicon--amuletunique::before {
            width: 41px;
            height: 45px;
            background-position: -900px -4950px;
        }
        .itemicon--belt::before {
            width: 45px;
            height: 27px;
            background-position: -950px -4950px;
        }
        .itemicon--beltunique::before {
            width: 45px;
            height: 23px;
            background-position: -1000px -4950px;
        }
        .itemicon--quiver::before {
            width: 34px;
            height: 50px;
            background-position: -1050px -4950px;
        }
        .itemicon--quiverunique::before {
            width: 34px;
            height: 50px;
            background-position: -1100px -4950px;
        }
        .itemicon--ring::before {
            width: 30px;
            height: 28px;
            background-position: -1150px -4950px;
        }
        .itemicon--ringunique::before {
            width: 29px;
            height: 29px;
            background-position: -1200px -4950px;
        }
        .itemicon--jewelunique::before {
            width: 36px;
            height: 36px;
            background-position: -1250px -4950px;
        }
        .itemicon--flaskunique::before {
            width: 21px;
            height: 42px;
            background-position: -1300px -4950px;
        }
        .itemicon--skillgemactive::before {
            width: 41px;
            height: 37px;
            background-position: -1350px -4950px;
        }
        .itemicon--skillgemvaal::before {
            width: 37px;
            height: 36px;
            background-position: -1400px -4950px;
        }
        .itemicon--skillgemsupport::before {
            width: 36px;
            height: 36px;
            background-position: -1450px -4950px;
        }

/* @end Item icon */


/* @group Item list */
:root {
    --itemlist-item-spacing--vertical: 1.35em;

}
.itemlist {
    --itemlist-title-width: 20em;
    display: block;
    font-family: var(--fontfamily--titles);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}
    .itemlist.megamenu,
    .itemlist-categorylist.pagenav-subnav {
        width: 100%;
        padding-left: var(--layoutsection-horizontalspacing);
        padding-right: var(--layoutsection-horizontalspacing);
    }
        .itemlist-categorylist.pagenav-subnav {
            padding-top: var(--section-verticalspacing);
            padding-bottom: var(--section-verticalspacing);
        }

    .itemlist--simple {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        letter-spacing: .025em;
    }


/* @group The items categories */
.itemlist > * {
    padding-left: 0;
    padding-top: var(--section-verticalspacing);
    padding-bottom: var(--section-verticalspacing);
}
    .itemlist.megamenu > * {
        width: 100%;
    }
    .itemlist > *::before {
        content: normal;
    }

    .itemlist--simple > * {
        width: 33.3%;
        padding: 0;
    }

    .itemlist > * + * {
        margin-top: 0;
        border-top: 1px solid rgba(255, 255, 255, .05);
        box-shadow: inset 0 -1px 0 0 #000;
    }
        .itemlist--simple > * {
            border-top: none;
            border-left: 1px solid rgba(255, 255, 255, .05);
            box-shadow: inset -1px 0 0 0 #000;
        }
            .itemlist--simple > *:last-child {
                border-right: 1px solid rgba(255, 255, 255, .05);
                box-shadow: inset 1px 0 0 0 #000;
            }

@media screen and (min-width: 500px) {
    .itemlist--simple > * {
        width: 25%;
    }
}

@media screen and (min-width: 700px) {
    .itemlist--simple > * {
        width: 20%;
    }
}

@media screen and (min-width: 800px) {
    .itemlist--simple > * {
        width: 16.6%;
    }
}

@media screen and (min-width: 900px) {
    .itemlist--simple > * {
        width: 12.5%;
    }
}

@media screen and (min-width: 1000px) {
    .itemlist--simple > :nth-last-child(11):first-child,
    .itemlist--simple > :nth-last-child(11):first-child ~ * {
        width: 9%;
    }
    .itemlist--simple > :nth-last-child(10):first-child,
    .itemlist--simple > :nth-last-child(10):first-child ~ * {
        width: 10%;
    }
    .itemlist--simple > :nth-last-child(9):first-child,
    .itemlist--simple > :nth-last-child(9):first-child ~ * {
        width: 11.1%;
    }
    .itemlist--simple > :nth-last-child(8):first-child,
    .itemlist--simple > :nth-last-child(8):first-child ~ * {
        width: 12.5%;
    }
    .itemlist--simple > :nth-last-child(7):first-child,
    .itemlist--simple > :nth-last-child(7):first-child ~ * {
        width: 14.2%;
    }
    .itemlist--simple > :nth-last-child(6):first-child,
    .itemlist--simple > :nth-last-child(6):first-child ~ * {
        width: 16.6%;
    }
    .itemlist--simple > :nth-last-child(5):first-child,
    .itemlist--simple > :nth-last-child(5):first-child ~ * {
        width: 20%;
    }
}

/* @end The items categories */

.itemlist .itemicon {
    display: inline-block;
    padding: 0 0 0 var(--itemicon-placeholdersize);
    text-decoration: none;
    border: none;
    color: var(--textcolor--secondary)
}
    .itemlist--simple > li > .itemicon {
        width: 100%;
    }
    .itemlist .itemicon:hover {
        background: none;
    }
        .itemlist--simple .itemicon:hover,
        .itemlist--simple .pagenav-item--current .itemicon {
            background: rgba(255, 255, 255, 0.015);
        }

    .itemlist-categorylist .itemicon {
        border-bottom: none;
    }
    .itemlist-categorylist > li > .itemicon {
        max-width: calc(100% - 2.25em);
        overflow: hidden;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

/* @group The first level anchor - the title */
.itemlist > * > .itemicon {
    display: flex;
    justify-content: space-between;
    font-size: 1.2em;
}
    .itemlist--simple > * > .itemicon {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 1.5em 2em;
        font-size: 0.7em;
    }
/* @end The first level anchor - the title */



/* @group The main item list for a category */
.itemlist-categorylist {
    margin-top: var(--section-verticalspacing);
    width: 100%;
    text-align: left;
    font-family: var(--fontfamily--titles);
    letter-spacing: 0.05em;
    font-weight: 600;
}
    .pagecontent-wrap .itemlist-categorylist {
        max-width: none;
    }
    .itemlist-categorylist.pagenav-subnav {
        margin-top: 0;
        padding-top: var(--itemlist-item-spacing--vertical);
        padding-bottom: calc(var(--itemlist-item-spacing--vertical) * 2);
    }

    .pagecontent-main-header * + .itemlist-categorylist {
        margin-top: var(--itemlist-item-spacing--vertical);
        margin-left: calc(var(--wrapper-padding) * -1);
        margin-right: calc(var(--wrapper-padding) * -1);
        width: calc(100% + var(--wrapper-padding) * 2);
        padding: 0 var(--wrapper-padding) var(--itemlist-item-spacing--vertical);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 -1px 0 0 #000;
        /* background: rgba(62, 44, 44, 0.1); */
    }

        .pagecontent-main-header * + .itemlist-categorylist:last-child {
            margin-bottom: 0;
        }


.itemlist-categorylist li {
    padding-left: 0;
}
    .itemlist-categorylist li::before {
        content: normal;
    }

    .itemlist-categorylist > li,
    /* Intended specificity needed to rewrite the general case needed by the client (ul and ol need to be styled even without a class) */
    .itemlist-categorylist.itemlist-categorylist > li {
        margin-top: var(--itemlist-item-spacing--vertical);
        padding-left: 0;
    }
        .itemlist-categorylist > li + li {
            border: none;
        }

        .itemlist-categorylist ul > li + li {
            margin-top: calc(var(--itemlist-item-spacing--vertical) / 3);
        }

.itemlist-categorylist a ~ ul {
    margin-top: calc(var(--itemlist-item-spacing--vertical) / 2);
}

@media screen and (min-width: 450px) {
    .itemlist-categorylist {
        padding-left: var(--itemicon-placeholdersize);
    }
}
@media screen and (min-width: 700px) {
    .itemlist-categorylist {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-left: 0;
    }
    .itemlist-categorylist > li {
        width: 50%;
    }
        .itemlist--simple .itemlist-categorylist > li,
        .pagecontent-main-header .itemlist-categorylist > li {
            width: 33.3%;
        }
}

@media screen and (min-width: 950px) {
    .itemlist-categorylist > li {
        width: 33.3%;
    }
        .itemlist--simple .itemlist-categorylist > li,
        .pagecontent-main-header .itemlist-categorylist > li {
            width: 25%;
        }
}

@media screen and (min-width: 1200px) {
    .itemlist--simple .itemlist-categorylist > li,
    .pagecontent-main-header .itemlist-categorylist > li {
        width: 20%;
    }
}
/* @end The main item list for a category */



/* The expandable-controllerlabel */
.itemlist-categorylist ul .expandable-controllerlabel::after {
    transform: scale(0.8);
}

.itemlist-categorylist ul {
    margin-left: calc(var(--layoutsection-horizontalspacing) / 2.5);
    font-size: 0.9rem;
    font-family: var(--fontfamily);
    text-transform: none;
    font-weight: normal;
    letter-spacing: normal;
    color: var(--textcolor--secondary--transparent75);
}
    .itemlist-categorylist ul ul {
        margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
        color: var(--textcolor--secondary--transparent50);
    }
    .itemlist-categorylist ul ul ul {
        margin-left: calc(var(--layoutsection-horizontalspacing) / 1.5);
    }




@media screen and (min-width: 1200px) {
    .itemlist > * {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
        .itemlist--simple > * {
            justify-content: center;
            align-items: center;
            text-align: center;
        }

    .itemlist > * > a {
        flex-direction: column;
        width: var(--itemlist-title-width);
    }
        .itemlist--simple > * > a {
            width: auto;
        }

    .itemlist > * > a span {
        align-self: flex-start;
    }

    .itemlist .itemlist-categorylist {
        margin-top: calc(var(--itemlist-item-spacing--vertical) * -1);
        width: calc(100% - var(--itemlist-title-width));
    }
        .itemlist--simple .itemlist-categorylist {
            margin-top: 0;
            width: 100%;
        }
}

/* @group The item icons */
.itemlist .itemicon::before,
.itemlist-categorylist .itemicon::before {
    transform-origin: left -25%;
}
    .itemlist--simple > * > .itemicon::before {
        position: static;
        display: block;
        margin-left: auto;
        margin-right: auto;
        transform: none;
    }

.itemlist-categorylist ul .itemicon {
    --itemicon-placeholdersize: 2.75rem;
}
.itemlist-categorylist ul ul .itemicon {
    --itemicon-placeholdersize: 2.35rem;
}
.itemlist-categorylist .itemicon::before {
    transform: scale(0.6);
}
.itemlist-categorylist ul .itemicon::before {
    transform: scale(0.5);
}
.itemlist-categorylist ul ul .itemicon::before {
    transform: scale(0.4);
}
/* @end The item icons */


/* @end Item list */




/* @group Item text sizes (needed by the client) */
.item-text-24 {
    font-size: 70.59%;
}
.item-text-25 {
    font-size: 73.53%;
}
.item-text-26 {
    font-size: 76.47%;
}
.item-text-27 {
    font-size: 79.41%;
}
.item-text-28 {
    font-size: 82.35%;
}
.item-text-29 {
    font-size: 85.29%;
}
.item-text-30 {
    font-size: 88.24%;
}
.item-text-31 {
    font-size: 91.18%;
}
.item-text-32 {
    font-size: 94.12%;
}
.item-text-33 {
    font-size: 97.06%;
}
/* @end Item text sizes (needed by the client) */

/* @group Table of contents */
.tableofcontents {
    font-size: 1.05em;
    background: var(--widgetsimple-background);
    border: 1px solid var(--widgetsimple-border);
    border-radius: 0.2em;
}
    .tableofcontents--main {
        font-size: 1em;
    }

.tableofcontents-title {
    margin: 0;
    max-width: none;
    padding: 1em var(--widgetsimple-padding--horizontal);
    font-size: 0.95rem;
    font-family: var(--fontfamily--titles);
    background: var(--widgetsimple-background);
    border-bottom: 1px solid var(--widgetsimple-border);
}


/* Intended specificity */
.tableofcontents-content,
ol.tableofcontents-content {
    counter-reset: tableofcontents;
    margin-top: 0;
    padding: 0;
    opacity: 0.8;
    list-style: none;
    line-height: 1;
}
    .tableofcontents--main .tableofcontents-content,
    .tableofcontents--main ol.tableofcontents-content {
        font-family: var(--fontfamily--titles);
    }

.tableofcontents-content li {
    counter-increment: tableofcontents;
    position: relative;
    margin-top: 0;
    padding: 0;
    border-bottom: 1px solid var(--widgetsimple-border);
}
    .tableofcontents-content li:last-child {
        border-bottom: none;
    }

    .tabelofcontents-content-item--current::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background: rgba(255, 206, 18, 0.2);
        border: 1px solid rgba(255, 206, 18, 1);
        opacity: 0.5;
    }


@media screen and (min-width: 600px) {
    .tableofcontents-content,
    ol.tableofcontents-content {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .tableofcontents-content li {
        flex-basis: 50%;
        flex-grow: 0;
        flex-shrink: 0;
        width: 50%;
    }
        .tableofcontents-content li:nth-child(2n + 1) {
            border-right: 1px solid var(--widgetsimple-border);
        }
        .tableofcontents-content li:nth-last-child(2):nth-child(odd) {
            border-bottom: none;
        }
}
@media screen and (min-width: 1200px) {
    .tableofcontents li:nth-last-child(n + 9):first-child,
    .tableofcontents li:nth-last-child(n + 9):first-child ~ * {
        flex-basis: 33.3%;
        width: 33.3%;
    }
        /* Reset previous setup */
        .tableofcontents li:nth-last-child(n + 9):nth-child(2n + 1),
        .tableofcontents li:nth-last-child(n + 9) ~ :nth-child(2n + 1) {
            border-right: none;
        }
        .tableofcontents li:nth-last-child(n + 9):first-child,
        .tableofcontents li:nth-last-child(n + 9) ~ :nth-child(3n + 1),
        .tableofcontents li:nth-last-child(n + 9) ~ :nth-child(3n + 2) {
            border-right: 1px solid var(--widgetsimple-border);
        }

        /* Reset previous setup */
        .tableofcontents li:nth-last-child(n + 9):nth-last-child(2):nth-child(odd),
        .tableofcontents li:nth-last-child(n + 9) ~ :nth-last-child(2):nth-child(odd) {
            border-bottom: 1px solid var(--widgetsimple-border);
        }

        .tableofcontents li:nth-last-child(n + 9) ~ :nth-child(3n + 1):nth-last-child(3),
        .tableofcontents li:nth-last-child(n + 9) ~ :nth-child(3n + 1):nth-last-child(2),
        .tableofcontents li:nth-last-child(n + 9) ~ :nth-child(3n + 2):nth-last-child(2) {
            border-bottom: none;
        }

}


.tableofcontents-content a {
    --tableofcontents-number-size: 0.5em;
    position: relative;
    display: block;
    margin: 0;
    max-width: 100%;
    padding: 0.75em var(--widgetsimple-padding--horizontal);
    padding-left: calc(var(--widgetsimple-padding--horizontal) + var(--tableofcontents-number-size) + 0.5em);
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline;
    white-space: nowrap;
    color: var(--textcolor--secondary);
}
    .tableofcontents--main .tableofcontents-content a {
        --tableofcontents-number-size: 1.2rem;
        text-decoration: none;
    }

    .tableofcontents-content a::before {
        content: counter(tableofcontents) '.';
        position: absolute;
        right: calc(100% - var(--widgetsimple-padding--horizontal) * 1.25);
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.6;
    }
        .tableofcontents--main .tableofcontents-content a::before {
            content: counter(tableofcontents);
            right: auto;
            left: var(--widgetsimple-padding--horizontal);
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--tableofcontents-number-size);
            height: var(--tableofcontents-number-size);
            font-size: 0.8em;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid;
            border-radius: 50%;
        }

    .tableofcontents a[href]:hover {
        background: rgba(255, 255, 255, 0.1);
    }
/* @end Table of contents */
/* @group Bulk actions  */
:root {
    --bulkactions-checkbox-size: 1.25em;
    --bulkactions-checkbox-padding: 0.25em;
    --bulkactions-checkbox-background: #c6bfab;
    --bulkactions-checkbox-border: 1px solid var(--bulkactions-checkbox-background);
    --bulkactions-checkbox-borderradius: 0.25em;
    --bulkactions-checkbox-unselectedopacity: 0.2;

    --bulkactions-border--dark: #140a05;
    --bulkactions-border--light: #a6705d;
}
.bulkactions {
    display: none;
    align-items: stretch;
    position: -webkit-sticky;
    position: sticky;
    bottom: 3em;
    z-index: var(--tooltip-zindex);
    width: 37em;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-shadow: -1px -1px 0 var(--bulkactions-border--dark);
    background: linear-gradient(to bottom, #6e4d3f 0%, #583c30);
    border-radius: 0.25em;
    border: 1px solid var(--bulkactions-border--dark);
    box-shadow:
        inset 0 0 0 1px var(--bulkactions-border--light),
        0 0.35em 0 var(--bulkactions-border--dark);
}
    .bulkactions--visible {
        display: flex;
        flex-direction: column;
    }

    .bulkactions::before,
    .bulkactions::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 0;
        width: 100%;
        height: 72px;
        background: url(../images/sprite.png) no-repeat left -4570px;
        mix-blend-mode: soft-light;
    }
        .bulkactions::after {
            top: 0;
            background-position: -90px -4570px;
            transform: scaleY(-1);
        }

@media screen and (min-width: 650px) {
    .bulkactions--visible {
        flex-direction: row;
    }
}


.bulkactions-count {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 2em;
    font-size: 1.2em;
    font-family: var(--fontfamily--titles);
    color: #fff;
    background: rgba(0, 0, 0, 0.085);
}

.bulkactions > * {
    position: relative;
    z-index: 1;
}
.bulkactions > ul {
    display: flex;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--bulkactions-border--light);
    box-shadow: 0 -1px 0 var(--bulkactions-border--dark);
}
.bulkactions > ul > li {
    position: static;
    margin: 0;
    padding: 0;
    width: 100%;
    border-left: 1px solid var(--bulkactions-border--light);
    box-shadow: -1px 0 0 var(--bulkactions-border--dark);
}
    .bulkactions > ul > li::before {
        content: normal;
    }

@media screen and (min-width: 650px) {
    .bulkactions-count {
        order: 0;
    }
    .bulkactions > ul {
        border-bottom: none;
        box-shadow: none;
    }
}


.bulkaction {
    position: relative;
    display: block;
    width: 100%;
    height: 5em;
    overflow: hidden;
    text-indent: -100vw;
    color: inherit;
    text-shadow: inherit;
    line-height: 1;
    border-bottom: none;
}
    @media screen and (min-width: 650px) {
        .bulkaction {
            width: 5em;
        }
    }
    .bulkaction:hover {
        background: rgba(213, 176, 163, 0.1);
    }
    .bulkaction--delete {
        background: rgba(106, 20, 20, 0.15);
    }

    .bulkaction::before {
        position: absolute;
        left: 50%;
        top: 50%;
        text-indent: 0;
        font-family: icons;
        line-height: 1;
        transform: translateX(-50%) translateY(-50%);
    }
    .bulkaction--pin::before {
        content: '\EA15';
    }
    .bulkaction--visibility::before {
        content: '\EA16';
    }
    .bulkaction--lock::before {
        content: '\EA17';
    }
    .bulkaction--move::before {
        content: '\2912';
        font-size: 1.2em;
        transform: translateX(-50%) translateY(-50%) rotate(90deg);
    }
    .bulkaction--delete::before {
        content: '\D7';
        transform: scale(1.5) translateX(-50%) translateY(-50%);
    }

.bulkactions-count [data-bulkactions-checkedelementscount] {
    margin-right: 0.5em;
}
/* @end Bulk actions  */


/* @group Bulkaction action radios */
.bulkactions input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.bulkactions input[type="radio"] + * {
    margin-top: 0;
}
/* @end Bulkaction action radios */


.bulkaction-options.popwindow {
    left: 0;
    bottom: 100%;
    top: auto;
    width: 100%;
    max-width: 100%;
}

@media screen and (min-width: 600px) {
    .bulkactions > ul > li {
        position: relative;
    }

    .bulkaction-options.popwindow {
        left: 50%;
        transform: translateX(-50%);
        width: 15em;
        max-width: none;
    }
}
.bulkaction-options button {
    text-align: left;
}

.bulkaction-checkbox {
    align-self: center;
    flex-shrink: 0;
    flex-grow: 0;
    -webkit-appearance: none;
    appeareance: none;
    width: var(--bulkactions-checkbox-size);
    height: var(--bulkactions-checkbox-size);
    padding: var(--bulkactions-checkbox-padding);
    background: var(--bulkactions-checkbox-background);
    border: var(--bulkactions-checkbox-border);
    border-radius: var(--bulkactions-checkbox-borderradius);
    opacity: var(--bulkactions-checkbox-unselectedopacity);
}
    .bulkaction-checkbox:checked {
        opacity: 1;
        background-clip: content-box;
    }


/* @group Bulkaction shortcuts */
.bulkactionshortcuts {
    margin: 0;
}


@media screen and (min-width:1100px) {
    .bulkactionshortcuts-label {
        position: relative;
        width: var(--bulkactions-checkbox-size);
        height: var(--bulkactions-checkbox-size);
        padding: var(--bulkactions-checkbox-padding);
        overflow: hidden;
        text-indent: calc(var(--bulkactions-checkbox-size) * 2);
        background: var(--bulkactions-checkbox-background);
        border: var(--bulkactions-checkbox-border);
        border-radius: var(--bulkactions-checkbox-borderradius);
        opacity: var(--bulkactions-checkbox-unselectedopacity);
    }
        .bulkactionshortcuts-label--selectedcomplete,
        .bulkactionshortcuts-label--selectedpartial {
            opacity: 1;
        }
            .bulkactionshortcuts-label--selectedpartial::before {
                content: '-';
                position: absolute;
                left: 0;
                top: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                text-indent: 0;
                color: #000;
            }
            .bulkactionshortcuts-label--selectedcomplete {
                background-clip: content-box;
            }
}
/* @end Bulkaction shortcuts */

/* @group Article special styling */
.article {
    margin-right: auto;
    width: 100%;
    max-width: var(--textcontent-maxwidth--absolute);
    font-size: 1em;
}
.article > * {
    max-width: none;
}
    .article > table {
        width: 100%;
        max-width: 100%;
    }

.article p,
.article ol,
.article ul {
    max-width: none;
}

.article iframe {
    max-width: 100%;
}

/* @end Article special styling */


/* @group Article - subsections indentations / title numbers */
/* The current markup doesn't allow this kind of use for counter(). Commented out until a solution is found. */
.article {
    counter-reset: chaptertitle;
}

.article section:not([class]) {
    counter-reset: chaptertitle-inner;
}

.article h1::before,
.article h2::before,
.article h3::before,
.article h4::before,
.article h5::before,
.article h6::before {
    color: var(--textcolor--secondary);
}
    .article > h1::before,
    .article > h2::before,
    .article > h3::before,
    .article > h4::before,
    .article > h5::before,
    .article > h6::before {
        counter-increment: chaptertitle;
        content: counter(chaptertitle) '. ';
    }

    .article section:not([class]) > h1::before,
    .article section:not([class]) > h2::before,
    .article section:not([class]) > h3::before,
    .article section:not([class]) > h4::before,
    .article section:not([class]) > h5::before,
    .article section:not([class]) > h6::before {
        counter-increment: chaptertitle-inner;
        content: counter(chaptertitle) '.' counters(chaptertitle-inner, '.') '. ';
    }

.article > h2::before,
.article > h3::before,
.article > h4::before,
.article > h5::before,
.article > h6::before {
    content: var(--heading-number) '. ';
    color: var(--textcolor--secondary);
}

/* @end Article - subsections indentations / title numbers */


/* @group Author details - uses .widgetsimple for the main layout */
.authordetails {
    --authordetails-image-size: 5em;
    --authordetails-headertitle-height: 2.5em;
}

.authordetails-header {
    position: relative;
    min-height: calc(var(--widgetsimple-header-padding--vertical) * 2 + var(--authordetails-image-size));
    padding-left: calc(var(--widgetsimple-header-padding--horizontal) + var(--authordetails-image-size) + 1em);
    font-family: var(--fontfamily--titles);
    line-height: 1.2;
}

.authordetails-header > * + * {
    margin-top: 0.25em;
}

.authordetails-header-image {
    position: absolute;
    left: var(--widgetsimple-header-padding--horizontal);
    top: 50%;
    transform: translateY(-50%);
    width: var(--authordetails-image-size);
    height: var(--authordetails-image-size);
}
.authordetails-header-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.authordetails-header-title {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--authordetails-headertitle-height);
    padding: 1em;
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--textcolor--quartenary--transparent50);
    background: var(--widgetsimple-background-headeroutside);
    border: 1px solid var(--widgetsimple-border);
    border-bottom: none;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.authordetails-header-title:first-child + * {
    margin-top: 0;
}

@media screen and (min-width: 700px) {
    .authordetails-header-title {
        --authordetails-headertitle-height: 2.1em;
        right: 100%;
        left: auto;
        top: 0;
        bottom: auto;
        margin-right: var(--authordetails-headertitle-height);
        transform: rotate(-90deg);
        transform-origin: right top;
    }
}


.authordetails-header-name {
    font-size: 1.2em;
}

.authordetails-header-role {
    font-size: 0.85em;
    color: var(--textcolor--quartenary);
}

.authordetails-header-badge {
    padding: 0.25em 0.35em;
    font-size: 0.75rem;
    text-transform: uppercase;
    background: #424b58;
    border-radius: 0.25em;
}


.authordetails-content {
    font-size: 0.85em;
    color: var(--textcolor--secondary);
    opacity: 0.7;
}
.subscriptions-page {
    z-index: 9;
}
.subscriptions-title {
    background: url('../images/subscriptions/background-pink-shadow.png') no-repeat center right;
    max-width: none;
    width: auto;
    display: inline-flex;
    padding-right:50px;
}
.subscriptions-title.no-background {
    background: none;
}
.subscriptions-content {
    position: relative;
}
.go-premium-form .pageheader-secondarynav-account > * + * {
    margin-top: 0px;
}
.subscriptions-content .go-premium-form {
    border: 1px solid rgba(255,255,255,0.1);
    border-bottom-color: rgba(0,0,0,0.1);
    margin: 0px;
}
.subscriptions-content .premium .tabs {
    border-bottom: 0px;
    padding-bottom: 40px;
}
.subscriptions-content .premium .select-payment-wrapper {
    border-top: 0px;
    padding-top: 60px;
    padding-bottom: 57px;
}
.subscriptions-content::before {
    content: '';
    position: absolute;
    left: 0px;
    right:0px;
    bottom:0px;
    top:0px;
    opacity: 0.3;
    z-index: 0;
    background: url('../images/subscriptions/background-wrapper.png') 0% 0% repeat-y padding-box;
    background-color: rgba(0,0,0,0.2);
    background-size: 100% auto;
}
.subscriptions-content.small-shadow::after {
    height:55px;
}
.subscriptions-content::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left:0px;
    right:0px;
    height: 120px;
    z-index: 0;
    background: url('../images/subscriptions/background-shadow-bottom.png') no-repeat center center;
    background-size: cover;
}
.subscriptions-content a.underline {
    text-decoration: underline;
    border-bottom: 0px;
}
.subscriptions-content a.underline:focus,
.subscriptions-content a.underline:hover {
    border-bottom: 0px;
}
.subscriptions-content-wrapper {
    padding: 2px;
    background: url('../images/subscriptions/background-content.png') repeat-y center center;
    background-size: 100% auto;
}
.subscriptions-content-wrapper.summary {
    margin-top: 0px;
}
.subscriptions-content > .flex:last-of-type {
    padding-bottom: 100px;
}
.subscriptions-top-heading-border {
    position: absolute;
    top: -20px;
    left:0px;
    right:0px;
    height: 26px;
    background: url('../images/subscriptions/subscriptions-top-border.png') repeat-x bottom center;
}
.subscriptions-top-heading-border::before, .subscriptions-top-heading-border::after {
    content: '';
    position: absolute;
    bottom: 0px;
    width: 40px;
    height: 26px;
}
.subscriptions-top-heading-border::before {
    left: 0px;
    background: url('../images/subscriptions/subscriptions-top-border-left.png') no-repeat bottom center;
}
.subscriptions-top-heading-border::after {
    right: 0px;
    background: url('../images/subscriptions/subscriptions-top-border-right.png') no-repeat bottom center;
}
.subscriptions-option-title {
    color: #DCD5C0;
    text-shadow: -1px -1px 0px #02000066;
}
.subscriptions-option-subtitle {
    color: #C9C09D;
    margin-top: 7px;
}
.subscriptions-links {
    margin-left: 3px;
    margin-bottom: 5px;
}
.subscriptions-links,
.subscriptions-links ul {
    width: 100%;
    max-width: none;
}
.subscriptions-links a {
    line-height: 52px;
    font-family: 'Fontin Smallcaps';
    color: #DCD5C0;
    text-transform: uppercase;
    margin-top: 0px;
    display: flex;
}
.subscriptions-links a:hover {
    text-decoration: none;
    border-bottom-color: transparent;
}
.subscriptions-links a:last-child {
    margin-right: 0px;
}
.subscriptions-links li {
    border-top: 1px solid transparent;
    margin-top: 0px;
}
.subscriptions-links li:hover,
.subscriptions-links li.active {
    border-top-color: #C9C09D;
}
.subscriptions-content .go-premium-form.subscriptions-summary {
    z-index: 9;
}
.subscriptions-summary .subscriptions-summary-item {
    margin-top: 0px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    justify-content: space-between;
    align-items: flex-start;
    height: auto;
}
.subscriptions-summary .subscriptions-summary-item .left-side {
    align-items: flex-start;
}
.subscriptions-summary .subscriptions-summary-item .left-side .subtitle > * {
    margin-right:15px;
}
.subscriptions-summary .subscriptions-summary-item .left-side .subtitle > *:last-child {
    margin-right:0px;
}
.subscriptions-summary .subscriptions-summary-item .right-side {
    align-items: center;
}
.subscriptions-summary-item .title-subscription-summary,
.subscriptions-summary-item h3.title-subscription-summary{
    font-family: Fontin Smallcaps, serif;
    font-size: 0.8em;
    color: #DCD5C0;
    text-shadow: -1px -1px 0px #020000;
}
.subscriptions-summary-item .subtitle {
    margin-top: 0px;
}
.subscriptions-summary-item .subtitle.with-mt {
    margin-top: 7px;
}
.subscriptions-summary-item .subtitle p {
    font-size: 1em;
    font-family: Fontin Smallcaps, serif;
    text-shadow: -1px -1px 0px #020000;
    margin-top: 0px;
}
.summary-button {
    font-family: Fontin Smallcaps, serif;
    font-size: 0.85em;
    color: #C9C09D;
    border-bottom-color: #C9C09D;
}
.summary-button.red {
    color: #9B534A;
    border-bottom-color: #9B534A;
}
.pricing label {
    flex-basis: 100%;
    border-radius:2px;
    border: 1px solid rgba(255,255,255,0.05);
    background-color: rgba(255,225,255,0.05);
    height: 210px;
    transition: all 0.15s ease-in;
}
.pricing label:nth-of-type(1) {
    margin-left: 0px;
}
.pricing label:nth-of-type(4) {
    margin-right: 0px;
}
.pricing input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.pricing label.price-box {
    cursor: pointer;
}
label.price-box:not(.active):after,
.pricing input[name="plan_id"] + label.price-box:not(.active):after {
    content: '';
    width: 24px;
    height:24px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255, 0.2);
    position: absolute;
    bottom: -12px;
    left: calc(50% - 12px);
    transition: background-color 0.25s ease;
}
label.price-box.active:after,
.pricing input[name="plan_id"]:checked + label.price-box.active:after {
    content: '\F00C';
    font-family: FontAwesome;
    width: 40px;
    height:40px;
    color: #000;
    text-align:center;
    line-height: 40px;
    background-color: #C5DFE0;
    border-radius: 50%;
    border: 1px solid #000;
    position: absolute;
    bottom: -20px;
    left: calc(50% - 20px);
    transition: background-color 0.25s ease;
}
.cancellation-form input[type='radio'] {
    position: absolute;
    opacity: 0;
}
.cancellation-form label {
    transition: all 0.15s ease-in;
    line-height:40px;
    cursor: pointer;
}
.cancellation-form input[type='radio'] + label {
    position: relative;
    padding-left: 50px;
}
.cancellation-form input[type='radio'] + label:after {
    content: '';
    width: 24px;
    height:24px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255, 0.2);
    position: absolute;
    left: 8px;
    top:8px;
    transition: background-color 0.25s ease;
}
.cancellation-form input[type='radio']:checked + label:after {
    content: '\F00C';
    font-family: FontAwesome;
    width: 40px;
    height:40px;
    left: 0px;
    top: 0px;
    bottom: -20px;
    color: #000;
    text-align:center;
    line-height: 40px;
    background-color: #C5DFE0;
    border: 1px solid #000;
}
.subscriptions-option-label span {
    color: #C9C09D;
    padding: 0px 8px;
    border-radius: 2px;
    font-size: 0.75em;
    font-family: 'Fontin Smallcaps';
}
.subscriptions-option-label .fs-10 {
    font-size: 10px;
}
.subscriptions-option-rating span {
    margin-top: 0px;
    margin-left: 3px;
    margin-right:3px;
    background: url('../images/subscriptions/star.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 19px;
    height: 19px;
}
label.price-box.active .subscriptions-option-rating span,
.pricing input[name="plan_id"]:checked + label.price-box .subscriptions-option-rating span {
    background: url('../images/subscriptions/star-blue.png');
}
.subscriptions-option-wrapper * + * {
    margin-top: 0px;
}
label.price-box.active,
.pricing input[name="plan_id"]:checked + label.price-box {
    height: 230px;
    border: 1px solid rgba(255,255,255,0.1);
    background-color: rgba(255,225,255,0.1);
    color: #C5DFE0;
    cursor: auto;
}
.pricing label.price-box {
    position: relative;
    font-family: 'Fontin Smallcaps';
}
.subscriptions-option-price span:first-child {
    margin-right: 3px;
}
.subscriptions-option-price .currency {
    font-size: 1.25em;
}
.subscriptions-option-price input {
    width: auto;
    max-width: none;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: none;
    transition: none;
}
.subscriptions-option-price input[type="number"]::-moz-placeholder
{
    font-size: 3.75rem;
    line-height:5rem;
}
.subscriptions-option-price input[type="number"]:-ms-input-placeholder
{
    font-size: 3.75rem;
    line-height:5rem;
}
.subscriptions-option-price .price,
.subscriptions-option-price input[type="number"],
.subscriptions-option-price input[type="number"]::placeholder
{
    font-size: 3.75rem;
    line-height:5rem;
}
.subscriptions-option-price input[type="number"] {
    width: 90px;
    -moz-appearance: textfield;
}
.subscriptions-option-price input[type="number"]::-webkit-outer-spin-button,
.subscriptions-option-price input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.subscriptions-option-period {
    font-size: 0.75em;
    margin-bottom: 6px;
    text-transform: uppercase;
    opacity: 0.5;
}
.subscriptions-wrapper {
    border: 1px solid rgba(255,255,255,0.1);
    padding-top: 2px;
    border-radius: 2px;
    background-color: rgba(255,255,255,0.04);
}
.subscriptions-wrapper > div {
    align-self: stretch;
    margin-top: 0px;
}
.braintree-container {
    position: relative;
}
.braintree-form {
    height: 56px;
}
.braintree-container {
    margin-top: 10px;
}
.pay-with-paypal {
    position: relative;
}
.pay-with-paypal #paypal-container .paypal-button.paypal-button-context-iframe {
    height: auto!important;
}
.pay-with-paypal #paypal-container .zoid-outlet {
    margin-top: 0px;
}
.braintree-container::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right:0px;
    bottom:0px;
    z-index:0;
    border: 1px solid rgba(255,255,255,0.1);
    background-color: rgba(0,0,0,0.2);
    pointer-events: none;
    touch-action:none;
    padding: 0px 25px;
}
.braintree-form, .braintree-form iframe {
    z-index: 999;
    margin-top:0px;
}
.braintree-form iframe {
    height: 46px;
}
.subscriptions-wrapper .subscriptions-card-input input {
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.1);
    background-color: rgba(0,0,0,0.2);
    line-height:46px;
    padding: 0px 25px;
    margin-top: 10px;
    width:100%;
}
.subscriptions-wrapper input::-moz-placeholder {
    font-family: 'Fontin Smallcaps';
    font-size: 0.95em;
    opacity: 0.3;
    color: #F0E8CD;
}
.subscriptions-wrapper input:-ms-input-placeholder {
    font-family: 'Fontin Smallcaps';
    font-size: 0.95em;
    opacity: 0.3;
    color: #F0E8CD;
}
.subscriptions-wrapper input::placeholder {
    font-family: 'Fontin Smallcaps';
    font-size: 0.95em;
    opacity: 0.3;
    color: #F0E8CD;
}
.subscriptions-card-input label {
    font-family: 'Fontin Smallcaps';
    font-size: 0.95em;
}
.subscriptions-card-input-left,
.subscriptions-card-input-right {
    margin-top: 0px;
}
.subscriptions-card-input-left {
    flex-basis: calc(65% - 15px);
}
.subscriptions-card-input-right {
    flex-basis: calc(35% - 15px);
}
.subscriptions-card-details {
    align-items: flex-start;
}
.subscriptions-card-details > * {
    max-width: 215px;
}
.subscriptions-card-details img {
    margin-right: 17px;
}
.subscriptions-card-details .underline {
    text-shadow: -2px -2px 0px #000;
}
.subscriptions-premium-faq {
    position: absolute;
    bottom: -7px;
    left: 0px;
    right:0px;
    text-align: center;
    z-index: 9;
}
.subscriptions-premium-faq .underline {
    text-shadow: -2px -2px 0px #000;
    height: 20px;
    color: #E8C09B;
    font-family: 'Fontin Smallcaps';
    font-size: 0.95em;
}
.subscriptions-premium-faq:before,
.subscriptions-premium-faq:after {
    content: '';
    position: absolute;
    top: calc(100% - 6px);
    width: calc(50% - 90px);
    height: 2px;
    border: 1px solid rgba(255,255,255,0.1);
    border-top-color: rgba(0,0,0,0.1);
}
.subscriptions-premium-faq:before {
    left: 0px;
}
.subscriptions-premium-faq:after {
    right: 0px;
}
.subscriptions-premium-faq .underline:hover {
    border-bottom: 0px;
}
.subscriptions-register-alternatives .signinoptions-wrapper {
    margin-top: 40px;
}
.subscriptions-register-alternatives .signinoptions .button {
    padding: 0.7em 0.3em 1.15em 0.5em;
    font-family: 'Fontin Smallcaps';
    font-size: 0.75em;
}
.pay-with-paypal {
    font-size: 0.95em;
    font-family: 'Fontin Smallcaps';
    color: #E8C09B;
}
.pay-with-paypal .underline {
    color: #E8C09B;
}
.subscriptions-card-wrapper {
    margin-bottom: 17px;
}
.subscriptions-content-wrapper .signinoptions .button {
    padding: 0.7em 1em 1.15em 1.2em;
}
.subscriptions-content-wrapper .signinoptions a {
    z-index: 9;
    width:100%;
}
.subscriptions-register-alternatives .buttonsimple {
    color: #F0E8CD;
    text-transform: none;
    margin-top: 25px;
}
.subscriptions-register-wrapper {
    margin-bottom: calc(var(--section-verticalspacing) / 1.5)
}
.subscriptions-content .get-premium {
    position: absolute;
    bottom:0px;
    left: 0px;
    right:0px;
    text-align: center;
    max-width: none;
    z-index: 9;
}
.subscriptions-content .get-premium .button {
    padding: 0.5em 1.8em 0.95em 2em;
    font-size: 1.25em;
    font-family: 'Fontin Smallcaps';
}
.premium .switch {
    margin-right: 17px;
}
.premium .toggle-wrapper .checkbox-title {
    font-size: 0.8rem;
    margin-right: 30px;
}
.currencies-toggle-wrapper [type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.currencies-toggle-wrapper [type=radio] + label {
    cursor: pointer;
    color: #C9C09D;
    font-size: 1.3rem;
    font-family: 'Fontin Smallcaps';
}

.currencies-toggle-wrapper label {
    border: 1px solid rgba(255,255,255,0.1);
    opacity: 0.6;
    background-color: rgba(255,255,255,0.2);
    width: 40px;
    line-height:40px;
    text-align: center;
    text-shadow: -1px -1px 1px #000;
}
.currencies-toggle-wrapper label:nth-of-type(1) {
    border-top-left-radius: 3px;
    border-bottom-left-radius:3px;
}
.currencies-toggle-wrapper label:nth-of-type(2) {
    border-top-right-radius: 3px;
    border-bottom-right-radius:3px;
}

.currencies-toggle-wrapper [type=radio]:checked + label {
    opacity: 1;
    color: #C5DFE0;
}
.subscriptions-login-popup {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 9;
    margin-top: 0px;
    background-color: rgba(0,0,0,0.9);
}
.subscriptions-step {
    position: absolute;
    right: 100%;
    top: 0px;
    letter-spacing: 0;
    font-weight: normal;
    color: #DCD5C0;
    opacity: 0.3;
}
.subscriptions-login-popup .subscriptions-login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    width:100%;
    max-width: 800px;
}
.subscriptions-login-popup .widget {
    margin-top: 0px;
    background: url('../images/subscriptions/background-content.png') repeat-y center center;
    background-size: 100% auto;
    padding: 40px 36px 44px;
}
.subscriptions-login-popup .widget h2 {
    font-weight: normal;
}
.subscriptions-login-popup .widget header {
    background: transparent;
    padding: 60px 60px 120px 75px;
}
.subscriptions-login-popup .widget form {
    padding: 60px 65px 120px 75px;
}
.subscriptions-login-popup .widget::before,
.subscriptions-login-popup .widget-content::after{
    display: none;
}
.subscriptions-login-popup .login-form .button {
    padding: 0.7em 2.2em 1.15em 2.4em;
    font-size: 1.3em;
}
.premium .tabs-nav-wrapper {
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 0 0 rgba(132, 188, 219, 0.1);
}
.premium .tabs-nav-wrapper .tabs-nav {
    border-bottom: 0px;
    box-shadow: none;
}
.premium .tabs-nav-wrapper * + * {
    margin-top: 0px;
}
.premium .tabs-nav,
.premium .tabs-nav li:first-child {
    margin-left: 0px;
}
.premium .tabs-nav label {
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    opacity: 0.4;
    text-shadow: -1px -1px 4px #000000;
}
.premium  .tabs-controller:first-child:hover ~ .tabs-nav-wrapper  .tabs-nav > :first-child label,
.premium  .tabs-controller:nth-child(2):hover ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(2) label,
.premium  .tabs-controller:nth-child(3):hover ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(3) label,
.premium  .tabs-controller:nth-child(4):hover ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(4) label,
.premium  .tabs-controller:nth-child(5):hover ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(5) label,
.premium  .tabs-controller:nth-child(6):hover ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(6) label,
.premium  .tabs-controller:nth-child(7):hover ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(7) label,
.premium  .tabs-controller:nth-child(8):hover ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(8) label,
.premium  .tabs-controller:nth-child(9):hover ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(9) label {
    opacity: 1;
    text-shadow: 0px 0px 10px rgba(220,213,192,0.45);
}
.premium  .tabs-controller:first-child:checked ~ .tabs-nav-wrapper  .tabs-nav > :first-child label,
.premium  .tabs-controller:nth-child(2):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(2) label,
.premium  .tabs-controller:nth-child(3):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(3) label,
.premium  .tabs-controller:nth-child(4):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(4) label,
.premium  .tabs-controller:nth-child(5):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(5) label,
.premium  .tabs-controller:nth-child(6):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(6) label,
.premium  .tabs-controller:nth-child(7):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(7) label,
.premium  .tabs-controller:nth-child(8):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(8) label,
.premium  .tabs-controller:nth-child(9):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(9) label {
    border-bottom: 1px solid #C9C09D;
    opacity: 1;
    text-shadow: 0px 0px 10px rgba(220,213,192,0.45);
}
.premium  .tabs-controller:first-child:checked ~ .tabs-nav-wrapper  .tabs-nav > :first-child label::before,
.premium  .tabs-controller:nth-child(2):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(2) label::before,
.premium  .tabs-controller:nth-child(3):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(3) label::before,
.premium  .tabs-controller:nth-child(4):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(4) label::before,
.premium  .tabs-controller:nth-child(5):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(5) label::before,
.premium  .tabs-controller:nth-child(6):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(6) label::before,
.premium  .tabs-controller:nth-child(7):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(7) label::before,
.premium  .tabs-controller:nth-child(8):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(8) label::before,
.premium  .tabs-controller:nth-child(9):checked ~ .tabs-nav-wrapper  .tabs-nav > :nth-child(9) label::before {
    content: '';
}
.premium .tabs-nav label::before {
    border-radius: 0;
    width: 50%;
    left: 25%;
    right: 25%;
    bottom: auto;
    top: -1px;
    z-index: 1;
    box-shadow: none;
    background: #C9C09D;
}
.premium .tabs-nav label:hover {
    text-shadow: -1px -1px 0px #02000066;
    border-bottom: 1px solid #C9C09D;
}
.premium .tabs-nav label:hover::before {
    content: '';
}

@media screen and (min-width:1100px) {
    .subscriptions-card-details {
        padding-left: 70px;
    }
    .subscriptions-wrapper > div:first-child {
        flex-basis: 60%;
        padding: 30px 50px 50px;
        border-right: 1px solid rgba(0,0,0,0.1);
    }
    .subscriptions-wrapper > div:last-child {
        flex-basis: 40%;
        border-left: 1px solid rgba(255,255,255,0.1);
    }
    .pricing {
        flex: 1 1 0px;
        justify-content: space-between;
        height: 250px;
    }
    label.price-box.active,
    .pricing input[name="plan_id"]:checked + label.price-box {
        padding: 0px 15px;
    }
    .pricing label {
        margin: 0px 5px;
    }
}

.remove-ads-text {
    font-size: 1.2em;
    background: url(../images/subscriptions/background-pink-shadow.png) no-repeat center right;
}

.subscriptions-content .my-subscriptions-wrapper {
    margin-top: 0px;
    width:100%;
}
.subscriptions-content .go-premium-form.subscriptions-summary {
    padding-top: 25px;
}

@media (max-width: 1099px) {
    .subscriptions-wrapper > div:first-child {
        padding: 30px 20px 50px;
    }
    .subscriptions-wrapper {
        flex-direction: column;
    }
    .premium .tabs-nav-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .premium .tabs-nav {
        margin-bottom: 15px;
    }
    .subscriptions-wrapper > div:last-child {
        align-items: center;
        padding: 30px 20px 50px;
    }
    .subscriptions-card-details > * {
        max-width: 50%;
    }
    .subscriptions-wrapper > div:first-child,
    .subscriptions-wrapper > div:last-child {
        flex-basis: 100%;
    }
    .subscriptions-wrapper > div:first-child {
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .subscriptions-wrapper > div:last-child {
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .subscriptions-card-details a.underline {
        margin-right: 17px;
    }
    .pricing {
        flex-direction: column;
    }
    .pricing label.price-box:first-of-type {
        margin-top: 0px;
    }
    .pricing label.price-box {
        width:100%;
        margin-top: 30px;
        padding-top: 30px;
        padding-bottom: 40px;
    }
}
@media screen and (min-width: 700px) {
    .go-premium-form .pageheader-secondarynav-account {
        margin-left: 0px;
    }
    .subscriptions-content .flex.with-pad {
        padding: 0px 75px 120px;
    }
    .subscriptions-content .go-premium-form {
        padding: 60px 75px 50px;
    }
    .subscriptions-content .my-subscriptions-wrapper {
        padding: 60px 75px;
    }
    .subscriptions-step {
        font-size: 2em;
        margin-right: 20px;
    }
    .subscriptions-content > .flex:nth-of-type(1)::before,
    .subscriptions-content > .flex:nth-of-type(1)::after {
        content: '';
        position: absolute;
    }
    .subscriptions-content > .flex:nth-of-type(1)::before {
        bottom:0px;
        left: -31px;
        width:31px;
        height: 230px;
        background: url('../images/subscriptions/background-image-left.png') no-repeat left center;
        background-size: auto 100%;
    }
    .subscriptions-content > .flex:nth-of-type(1)::after {
        top:50px;
        right:-35px;
        width:35px;
        height: 140px;
        background: url('../images/subscriptions/background-image-right.png') no-repeat right center;
        background-size: auto 100%;
    }
    .pay-with-paypal .underline {
        width: 150px;
    }
    .subscriptions-summary .subscriptions-summary-item > * {
        min-height: 100px;
        margin-top: 0px;
    }
    .subscriptions-summary .subscriptions-summary-item .right-side a {
        margin-top: 50%;
    }
    .subscriptions-summary .subscriptions-summary-item {
        min-height: 100px;
    }
    .subscriptions-links li {
        margin-right:27px;
    }
}
@media (max-width: 699px) {
    .subscriptions-content .flex.with-pad,
    .subscriptions-content .go-premium-form {
        padding: 30px;
    }
    .subscriptions-content .my-subscriptions-wrapper {
        padding: 30px;
    }
    .premium .tabs-nav > * {
        width: calc(33% - calc(0.67 * var(--tabs-nav-spacing)));
        text-align: center;
    }
    .premium .tabs-nav {
        align-items: center;
    }
    .remove-ads-text {
        background-position-y: 10%;
    }
    .pay-with-paypal .underline {
        width: 100px;
    }
    .subscriptions-summary .subscriptions-summary-item .subtitle,
    .subscriptions-summary .subscriptions-summary-item {
        flex-direction: column;
    }
    .subscriptions-summary .subscriptions-summary-item > *  {
        margin: 15px 0px;
    }
    .subscriptions-summary .subscriptions-summary-item > *:last-child {
        margin-top: 0px;
    }
    .subscriptions-summary-item .subtitle {
        align-items: flex-start;
    }
    .subscriptions-links ul {
        flex-direction: column;
    }
    .subscriptions-links li:not(.active) {
        display: none;
    }

}


@media screen and (max-width: 500px) {

    .subscriptions-option-label span {
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
        line-height: 0.8rem;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}
ol.faqs-listings {
    flex-wrap: wrap;
}
ol.faqs-listings {
    counter-reset: counter-list;
}
ol.faqs-listings li {
    counter-increment: counter-list;
}
ol.faqs-listings li::before {
    content: counter(counter-list, upper-roman);

}
.faqs-details {
    counter-reset: counter-details;
    margin-top:0px;
}
.faqs-details-item .faqs-details-title {
    counter-increment: counter-details;
}
.faqs-details-item .faqs-details-title::before {
    content: counter(counter-details, upper-roman);
}
ol.faqs-listings li::before,
.faqs-details-item .faqs-details-title::before {
    font-family: 'Fontin Smallcaps';
    color: rgba(220, 213, 192, 0.3);
    text-shadow: -1px -1px 0px rgba(2, 0, 0, 0.4);
}
ol.faqs-listings li {
    padding: 15px 0px 15px 60px;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin: 0px;
}
ol.faqs-listings li::before {
    font-size: 0.7em;
    position: absolute;
    left: 15px;
}
.faqs-listing {
    flex-basis: 100%;
}
.faqs-listing .faq-title {
    flex-grow: 1;
    text-decoration: underline;
    font-family: 'Fontin Smallcaps';
    font-size: 0.7em;
    text-shadow: -1px -1px 0px rgba(2, 0, 0, 0.4);
}
.faqs-block .faq-button {
    color: #70787D;
    font-size: 0.55em;
    text-align: right;
    margin-right:8px;
    margin-top: 0px;
    padding-left: 2px;
    cursor: pointer;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(112, 120, 125, 0.5);
    font-family: 'Fontin Smallcaps';
    white-space: nowrap;
}
.faqs-details-item .faqs-details-title {
    position: static;
}
.faqs-details-item .faqs-details-title::before {
    position: absolute;
    left:-40px;
    margin-top:-14px;
    width: 75px;
    text-align: right;
    font-size: 1.8em;
}
.faqs-details-item {
    padding: 50px 10px 15px 50px;
}
.faqs-details-content ul {
    list-style:none;
}
.faqs-details-content ul li {
    position: relative;
}
.faqs-details-content ul li::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 3px;
    background-image: url('../images/faq/icon-bullet.png');
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 14px;
    height:14px;
    border-radius: 50%;
    overflow: hidden;
}

.faqs-block {
    max-width: 600px;
    width:100%;
}

.guidelist {
    --guidelist-spacing: 1em;
    --guidelist-columns: 100%;
    display: grid;
    grid-template-columns: var(--guidelist-columns);
    gap: var(--guidelist-spacing);
    max-width: none;
}
    .guidelist + * {
        margin-top: calc(var(--section-verticalspacing) * 1.5);
    }
    /* Intended */
    .pagecontent-main .guidelist {
        max-width: none;
    }

@media screen and (min-width: 500px) {
    .guidelist {
        --guidelist-columns: repeat(2, calc(50% - var(--guidelist-spacing) / 2));
    }
}
@media screen and (min-width: 1100px) {
    .guidelist {
        --guidelist-columns: repeat(3, calc(33.3% - var(--guidelist-spacing) / 1.5));
    }
}

.guidelist > * {
    --guidelist-item-padding--horizontal: 1.25em;
    --guidelist-item-padding--vertical: 1.5em;
    margin: 0;
}
.guidelist-item {
    display: contents;
}

.guidelist-item > a:only-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: var(--guidelist-item-padding--vertical) var(--guidelist-item-padding--horizontal);
    background-color: #120e0d;
    border-radius: 0.25em;
    border: none;
    transition: all 0.1s ease-in-out;
}
    .guidelist-item > a:only-child:hover {
        border: none;
        filter: brightness(150%);
    }

    /* The border */
    .guidelist-item > a:only-child::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(255, 212, 102, 0.17);
        border-radius: inherit;
    }

.guidelist-item-title {
    font-size: 1.1em;
    color: var(--textcolor--secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.guidelist-item-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: calc(var(--guidelist-item-padding--horizontal) * -1);
    margin-right: calc(var(--guidelist-item-padding--horizontal) * -1);
    margin-bottom: calc(var(--guidelist-item-padding--vertical) * -1);
    padding: 0.75em var(--guidelist-item-padding--horizontal);
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid #261E1C;
}
    * + .guidelist-item-footer {
        margin-top: var(--guidelist-item-padding--vertical);
    }

.guidelist-item-footer > * + * {
    margin-top: 0;
    margin-left: 1em;
}

.guidelist .numberofcomments {
    --numberofcomments-fontsize: 0.85em;
}

.guidelist .labellist {
    margin-bottom: auto;
}
.guidelist .labellist .label {
    font-size: 0.6rem;
}
.featurelist {
    --featurelist-spacing: calc(var(--section-verticalspacing) / 2);
    --featurelist-icon-size: 3em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: calc(var(--featurelist-spacing) * -1);
    transform: translateX(calc(var(--featurelist-spacing) * -1));
}

.featurelist > * {
    margin-bottom: var(--featurelist-spacing);
    margin-left: var(--featurelist-spacing);
}
    .featurelist--simple > * {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: calc(50% - var(--featurelist-spacing));
    }
    .featurelist > * + * {
        margin-top: 0;
    }

.featurelist-item-title {
    color: var(--textcolor);
    text-align: center;
    font-family: var(--fontfamily--titles);
}
    .featurelist-item-icon + .featurelist-item-title,
    .featurelist-item-title + .featurelist-item-icon {
        margin-top: 0.5em;
    }

.featurelist-item-icon {
    max-width: var(--featurelist-icon-size);
    max-height: var(--featurelist-icon-size);
}

@media screen and (min-width: 600px) {
    .featurelist > * {
        width: calc(25% - var(--featurelist-spacing));
    }
}
@media screen and (min-width: 700px) {
    .featurelist {
        --featurelist-icon-size: 5em;
    }
}
.changeloglist {
    font-size: 0.9rem;
    color: var(--textcolor--secondary--transparent50);
}

.changeloglist > li > * + * {
    margin-top: 0.5em;
}

.changeloglist-item-date {
    font-size: 0.75rem;
    line-height: 1.2;
    opacity: 0.7;
}
    .changeloglist .changeloglist-item-date + * {
        margin-top: 0;
    }

.changeloglist-item-title {
    font-size: 1rem;
    font-family: var(--fontfamily--titles);
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--textcolor--secondary);
}

.changeloglist-item-title a {
    color: inherit;
}

.changeloglist-item-content ul,
.changeloglist-item-content ol {
    margin-left: 1em;
}
.changeloglist-item-content > * + * {
    margin-top: 0.75em;
}
.changeloglist-item-content li + li {
    margin-top: 0.25em;
}
.changeloglist-item-content li::before {
    content: '\2022';
    margin-right: 0.35em;
    opacity: 0.35;

}
.chapternumber {
    counter-reset: titleLevel2;
}
.chapternumber > h2 {
    counter-reset: titleLevel3;
}
.chapternumber > h3 {
    counter-reset: titleLevel4;
}
.chapternumber > h4 {
    counter-reset: titleLevel5;
}
.chapternumber > h5 {
    counter-reset: titleLevel6;
}

    .chapternumber > h2::before {
        content: counter(titleLevel2, decimal) '. ';
        counter-increment: titleLevel2;
    }
    .chapternumber > h3::before {
        content: counter(titleLevel2, decimal) '.' counter(titleLevel3, decimal) '. ';
        counter-increment: titleLevel3;
    }
    .chapternumber > h4::before {
        content: counter(titleLevel2, decimal) '.' counter(titleLevel3, decimal) '.' counter(titleLevel4, decimal) '. ';
        counter-increment: titleLevel4;
    }
    .chapternumber > h5::before {
        content: counter(titleLevel2, decimal) '.' counter(titleLevel3, decimal) '.' counter(titleLevel4, decimal) '.' counter(titleLevel5, decimal) '. ';
        counter-increment: titleLevel5;
    }
    .chapternumber > h6::before {
        content: counter(titleLevel2, decimal) '.' counter(titleLevel3, decimal) '.' counter(titleLevel4, decimal) '.' counter(titleLevel5, decimal) '.' counter(titleLevel6, decimal) '. ';
        counter-increment: titleLevel6;
    }

:root {
    /* calc needs a unit in some cases */
    --body-padding--horizontal: 0em;

    --lineheight: 1.4;
    --textcontent-maxwidth: 35em;
    --textcontent-maxwidth--absolute: 44rem;

    /* Wrapper */
    /* the client needs a fixed width */
    --wrapper-width: 1200px;
    --wrapper-padding: 1.2rem;

    --fontfamily: Arial, sans-serif;
    --fontfamily--titles: 'Fontin Smallcaps', Georgia, serif;

    /* Font Color */
    --textcolor: #E8E0C7;
    --textcolor--secondary: #C9C09D;
    --textcolor--secondary--transparent75: rgba(201, 192, 157, 0.75);
    --textcolor--secondary--transparent50: rgba(201, 192, 157, 0.5);
    --textcolor--secondary--transparent25: rgba(201, 192, 157, 0.25);
    --textcolor--tertiary: #AD9379;
    --textcolor--quartenary: #869E9D;
    --textcolor--important: #BC9D64;
    --textcolor--quartenary--transparent2: rgba(134, 158, 157, 0.2);
    --textcolor--quartenary--transparent50: rgba(134, 158, 157, 0.5);
    --textcolor--quartenary--transparent75: rgba(134, 158, 157, 0.75);
    --textcolor--contrast: #2E140A;

    --textcolor--anchor: #F19974;

    --pagecontent-verticalpadding: 1.5em;

    --section-verticalspacing: 2rem;


    --layoutsection-horizontalspacing: 2rem;

    --pagecontent-sidebar-adwidth: 300px;

    --reputationcolor--good: #39B54A;
    --reputationcolor--medium: #FF931E;
    --reputationcolor--bad: #ff401f;

    --userimage-size--small: 1.5rem;
    --userimage-size--medium: 2rem;
    --userimage-size--normal: 2.75rem;
    --userimage-size--big: 3.5rem;
    --userimage-size--important: 7rem;

    --button-background-secondary: hsl(201, 12%, 16%);
    --button-background-secondary--hover: hsl(201, 13%, 18%);

    --toolbar-background: rgba(37, 44, 48, 0.4);
    --toolbar-background--secondary: rgba(37, 44, 48, 0.25);
    --toolbar-background--hover: rgba(37, 44, 48, 0.75);

    --notificationcount-color: #910b01;
    --notificationcount-color--read: hsl(205, 11%, 23%);

    --tooltip-zindex: 100;

    --banner-width--vertical: 300px;

    --z-index-pageheader-nav-wrapper: 10;

    --content-bordercolor: rgba(132, 188, 219, 0.1);



}

@media screen and (min-width: 500px) {
    :root {
        --wrapper-padding: 1.5rem;
    }
}
@media screen and (min-width: 700px) {
    :root {
        --wrapper-padding: 2rem;
    }
}
@media screen and (min-width: 800px) {
    :root {
        --body-padding--horizontal: 1.5rem;
        --section-verticalspacing: 2.5rem;
    }
}
@media screen and (min-width: 1400px) {
    :root {
        --layoutsection-horizontalspacing: 3rem;
    }
}

html {
    min-height: 100%;
    font-size: 16px;
    line-height: var(--lineheight);
    font-family: var(--fontfamily);
    color: var(--textcolor);
    background: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}
    /* The left and right images */
    html::before,
    html::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }
        html::before {
            width: 100%;
            height: 715px;
            background: url(../images/sprite.png)  no-repeat left -1050px;
        }
        html::after {
            top: -5.5em;
            right: 0;
            width: 100%;
            height: 601px;
            background: url(../images/sprite.png)  no-repeat right -1800px;
        }

        ::-webkit-scrollbar {
            width: 0.5em;
            height: 0.5em;
            background:
                var(--widget-background-grungeeffect),
                linear-gradient(-45deg, var(--widget-background-stripes) 25%, transparent 25%, transparent 50%, var(--widget-background-stripes) 50%, var(--widget-background-stripes) 75%, transparent 75%, transparent),
                radial-gradient(farthest-corner at center, var(--widget-background-main) 0%, var(--widget-background-main) 30%, var(--widget-background-shadow) 100%);
            background-size: var(--widget-background-size);
            background-position: var(--widget-background-position);
            background-blend-mode: var(--widget-background-blendmode);
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 0.5em;
            cursor: default;
        }


body {
    position: relative;
    min-height: 100%;
    padding: 0 var(--body-padding--horizontal);
    overflow-wrap: break-word;
    max-width: 100%;
}

    /* The bottom image */
    body::before {
        content: '';
        position: absolute;
        z-index: -1;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 35px;
        background: url(../images/sprite.png) repeat-x right -4100px;
    }
    /* The second left image (shield fliped) */
    body::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: calc(50% - 342px);
        top: 1em;
        width: 684px;
        max-width: 100%;
        height: 601px;
        background: url(../images/sprite.png) no-repeat right -1800px;
        transform: scaleY(-1);
    }

    @media screen and (max-width: 800px) {
        body::after {
            left: 0;
        }
    }

a {
    text-decoration: none;
    color: var(--textcolor--anchor);
    border-bottom: 1px solid transparent;
}
    a:hover {
        border-bottom-color: currentColor;
        opacity: 1;
    }
    a:not([href]) {
        cursor: default;
    }

img {
    --image-error-size: 1.7rem;
    position: relative;
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}
    .item-link img {
        position: relative;
    }

    img::before {
        content: '';
        display: block;
        width: 100%;
    }
    .item-link img::before {
        width: var(--image-error-size);
        height: var(--image-error-size);
    }
    img::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #0f1112;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }



sup {
    vertical-align: super;
}
sub {
    vertical-align: sub;
}


.svgs {
    height: 0;
}


@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.loading {
    pointer-events: none;
    opacity: 0.75;
}
    .loading::before {
        content: 'Please wait while we load the content...';
        position: absolute;
        z-index: calc(var(--tooltip-zindex) + 2);
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        padding: 2em;
        font-size: 1.2em;
        background: rgba(0, 0, 0, 0.8);
    }

/* @group Separator */
.separator {
    max-width: 10em;
}
    .widget-header .separator {
        margin-top: calc(var(--widget-padding--top) / 2);
        fill: var(--widget-separator-color);
        filter: drop-shadow(-1px -1px 0 var(--widget-background-shadow));
    }
    .widget--main .widget-header .separator {
        fill: var(--widget-background-shadow);
        filter: drop-shadow(1px 1px 0 var(--widget-background-main));
    }

/* @end Separator */

/* @group Datedlist */
.datedlist {}

.datedlist > * {
    padding: 0;
}
    .datedlist > *::before {
        content: normal;
    }

    .datedlist > * + * {
        margin-top: calc(var(--section-verticalspacing) / 1.5);
    }

.datedlist a {
    color: inherit;
}
.datedlist h3 {
    font-size: 1.075em;
    font: inherit;
    letter-spacing: normal;
}

.datedlist li,
.datedlist li > section,
.datedlist li > a {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.datedlist li > * + *,
.datedlist li section > * + *,
.datedlist li a > * + * {
    margin-top: 0;
    margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
}

.datedlist time,
.datedlist section footer {
    width: 3em;
    font-size: 0.65em;
    line-height: 1.1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--textcolor--secondary);
    opacity: 0.8;
}
.datedlist footer > time + p {
    margin-top: 1em;
}

.datedlist time span {
    font-family: var(--fontfamily--titles);
    font-weight: bold;
    font-size: 2.75em;
    letter-spacing: 0;
    line-height: 0.5;
}

/* Extended */
.datedlist--extended time {
    display: flex;
    width: 5.5em;
}
.datedlist--extended time + * {
    margin-left: calc(var(--layoutsection-horizontalspacing) / 1.5);
}

.datedlist--extended time span {
    margin-right: 0.25rem;
    font-size: 2.95em;
    font-weight: normal;
}

/* Simple */
.datedlist--secondary li,
.datedlist--secondary li section,
.datedlist--secondary li a {
    display: block;
}

.datedlist--secondary li > * + *,
.datedlist--secondary li section > * + *,
.datedlist--secondary li a > * + * {
    margin-left: 0;
    margin-top: calc(var(--section-verticalspacing) / 2.5);
}
/* @end Datedlist */



/* @group Dated list simple */
.datedlistsimple {
    font-size: 0.9em;
    font-family: var(--fontfamily--titles);
}

.datedlistsimple > * + * {
    margin-top: 0.9em;
}

.datedlistsimple a {
    color: var(--textcolor);
}
.datedlistsimple time {
    display: block;
    font-size: 0.8em;
    font-family: var(--fontfamily);
    color: var(--textcolor--secondary)
}
.datedlistsimple span {
    display: block;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* @end Dated list simple */


/* @group Number of comments */
.numberofcomments {
    --numberofcomments-minwidth: 2em;
    --numberofcomments-height: 1.85em;
    --numberofcomments-padding--horizontal: 0.5em;
    --numberofcomments-fontsize: 0.95rem;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    min-width: var(--numberofcomments-minwidth);
    height: var(--numberofcomments-height);
    padding: 0 var(--numberofcomments-padding--horizontal);
    font-size: var(--numberofcomments-fontsize);
    line-height: 1;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    font-family: var(--fontfamily--titles);
    color: var(--textcolor);
    background: #252C30;
    border-radius: 0.25em;
}
    /* TODO: change arrow style to the one in the design */
    .numberofcomments::before {
        content: '';
        position: absolute;
        left: 0.75em;
        top: 100%;
        width: 0.5em;
        height: 0.5em;
        background: inherit;
        transform: translateY(-75%) rotate(-45deg);
    }

    .numberofcomments:hover {
        border-bottom-color: transparent;
    }
/* @end Number of comments */


/* @group Number of views */
.numberofviews {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.3em;
    line-height: 1.2;
    font-weight: bold;
    font-family: var(--fontfamily--titles);
    color: var(--textcolor--quartenary--transparent75);
}
.numberofviews small {
    display: block;
    font-family: var(--fontfamily);
    font-size: 0.75rem;
    font-weight: normal;
    text-transform: uppercase;
    opacity: 0.5;
}
/* @end Number of views */


/* @group List */
.article ul:not([class]),
.article ol:not([class]) {
    --list-beforespacing: 1.25em;
    line-height: 1.3;
}
    .article ol:not([class]) {
        padding-left: var(--list-beforespacing);
    }

.article ol:not([class]),
.article ol:not([class]) li {
    list-style: decimal;
}

.article ul:not([class]) li {
    position: relative;
    padding-left: var(--list-beforespacing);
    list-style: none;
}
    .article ul:not([class]) li::before {
        content: '\2022';
        position: absolute;
        left: 0;
        color: var(--textcolor);
        font-weight: bold;
    }

.article ul:not([class]) li + li,
.article ol:not([class]) li + li {
    margin-top: calc(var(--section-verticalspacing) / 4);
}
/* @end List */



/* @group Featured news */
.featured-wrap {
    --featured-padding--horizontal: 2.5em;
    --featured-padding--vertical: 2em;
    --featured-padding--vertical-top: 10em;
    position: relative;
    /* leave space for the separator decoration at the bottom */
    padding-bottom: 0.5em;
    color: var(--textcolor);
}
.featured-wrap + * {
    margin-top: var(--section-verticalspacing);
}

/* Create the border using 4 pseudo elements (one for each side) to allow the content to be accessible for clickable elements
(stacking contexts created problems with making the .featured content accessible because of the border which was created using a single psuedo element)
*/
    .featured-wrap::before,
    .featured-wrap::after,
    .featured > *::before,
    .featured > *::after {
        content: '';
        position: absolute;
        z-index: 1;
        background: rgba(255, 255, 255, 0.1);
        opacity: 0;
    }
        .featured-wrap::before,
        .featured-wrap::after {
            top: 0;
            width: 1px;
            height: calc(100% - 0.5em);
        }
            .featured-wrap::before {
                left: 0;
            }
            .featured-wrap::after {
                right: 0;
            }
        .featured > *::before,
        .featured > *::after {
            left: 0;
            width: 100%;
            height: 1px;
        }
            .featured > *::before {
                top: 0;
            }
            .featured > *::after {
                bottom: 0;
            }



.featured-wrap .separator {
    position: absolute;
    left: 50%;
    top: calc(100% - 1em);
    z-index: 1;
    width: 10em;
    transform: translateX(-50%);
    fill: #435655;
}


.featured-wrap .slider-nav {
    position: absolute;
    left: 0;
    top: 1em;
    z-index: 2;
    margin: 0;
    transform: translateY(-3em);
}
    .featured-wrap:hover .slider-nav {
        transform: none;
        opacity: 1;
    }


.featured {}

.featured a {
    color: inherit;
}
.featured p {
    max-width: none;
}

.featured img {
    min-width: 100%;
}

.featured > * {
    padding: var(--featured-padding--vertical-top) var(--featured-padding--horizontal) var(--featured-padding--vertical);
}
    /* Intended specificity to overwrite the general ul/ol styles needed by the client */
    ul.featured > *,
    ol.featured > * {
        padding: var(--featured-padding--vertical-top) var(--featured-padding--horizontal) var(--featured-padding--vertical);
    }


.featured > * > * + * {
    margin-top: 1em;
}

/* Image (based on the markup structure / position) */
.featured > * > p:first-of-type {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
    * + .featured > * > p:first-of-type {
        margin-top: 0;
    }

    /* The image overlay */
    .featured > * > p:first-of-type::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 80%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 100%);
    }
.featured > * > p:first-of-type img {
    max-width: none;
    max-height: none;
}

.featured header {
    font-family: var(--fontfamily--titles);
    font-weight: 300;
    text-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
}
.featured header h2 {
    margin-top: 0;
    font-size: 1.75em;
    font-weight: bold;
}

.featured .buttonsimple {
    color: #869E9D;
}

/* @end Featured news */



/* @group Character list */
.characterslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.characterslist * + * {
    margin-top: 0;
}


.pagecontent-sidebar .characterslist > * {
    width: 25%;
}
@media screen and (min-width: 500px) and (max-width: 1220px) {
    .pagecontent-sidebar .characterslist > * {
        width: 12.5%;
    }
}

.characterslist img {
    width: 100%;
    height: auto;
}
/* @end Character list */


/* @group Equipment list */
/* Styling based on markup */
.equipmentlist {
    --equipmentlist-image-width: 3em;
    line-height: 1.2;
    color: var(--textcolor);
}

/* Intended specificity */
.equipmentlist * + *,
.equipmentlist * + .titlegroup {
    margin-top: 0;
}

.equipmentlist a {
    color: inherit;
    border: none;
}

.equipmentlist > * {
    position: relative;
    padding-left: calc(var(--equipmentlist-image-width) + calc(var(--layoutsection-horizontalspacing) / 2));
}
    .equipmentlist > * + * {
        margin-top: calc(var(--section-verticalspacing) / 1.5);
    }

    .equipmentlist > *::before {
        content: normal;
    }

.equipmentlist .titlegroup + * {
    margin-top: 0.5em;
}

.equipmentlist p {
    opacity: 0.6;
}
    /* The image wrapper */
    .equipmentlist p:first-of-type {
        opacity: 1;
        position: absolute;
        left: 0;
        top: 0;
        width: var(--equipmentlist-image-width);
        height: 100%;
    }
/* @end Equipment list */




/* @group Figure */
figure {
    --figure-padding: 2em;

    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--figure-padding) 0;
}
    figure::before,
    figure::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
    figure::after {
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }


figcaption {
    padding-left: var(--figure-padding);
    padding-right: var(--figure-padding);
    font-size: 1.1em;
    font-style: italic;
    color: var(--textcolor--secondary)
}

figcaption > h2,
figcaption > h3,
figcaption > h4,
figcaption > h5,
figcaption > h6 {
    font-size: 1.3em;
}

/* Intended specificity */
.pagecontent figcaption > h2 + *,
.pagecontent figcaption > h3 + *,
.pagecontent figcaption > h4 + *,
.pagecontent figcaption > h5 + *,
.pagecontent figcaption > h6 + * {
    margin-top: 0.25em;
}

figure > :not(figcaption):last-child {
    margin-bottom: calc(var(--figure-padding) * -1);
}
figure > :not(figcaption):first-child {
    margin-top: calc(var(--figure-padding) * -1);
}

figure a img {
    display: block;
}
/* @end Figure */

/* @group Image list */
:root {
    --imagelist-spacing: 0.25em;
    --imagelist-image-width: 100%;
}

@media screen and (min-width: 400px) {
    :root {
        --imagelist-image-width: 50%;
    }
}
@media screen and (min-width: 600px) {
    :root {
        --imagelist-image-width: 33.3%;
    }
}
@media screen and (min-width: 800px) {
    :root {
        --imagelist-image-width: 25%;
    }
}

@media screen and (min-width:1000px) {
    :root {
        --imagelist-image-width: 33.3%;
    }
}

@media screen and (min-width: 1100px) {
    :root {
        --imagelist-image-width: 25%;
    }
}
@media screen and (min-width: 1200px) {
    :root {
        --imagelist-image-width: 20%;
    }
}

.imagelist > * {
    padding: 0;
}
    .imagelist > *::before {
        content: normal;
    }
    .imagelist > * + * {
        margin-top: var(--imagelist-spacing);
    }

.imagelist a,
.imagelist img {
    display: block;
}
    .imagelist a {
        border: none;
    }
        .imagelist a:hover {
            opacity: 0.8;
        }


.imagelist img {
    width: 100%;
    max-width: 100%;
    height: auto;
}


@media screen and (min-width: 400px) {
    .imagelist {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-left: calc(var(--imagelist-spacing) * -1);
        margin-bottom: calc(var(--imagelist-spacing) * -1);
    }
    .tabs-content > .imagelist + * {
        margin-left: var(--imagelist-spacing);
    }
    .imagelist > * {
        margin-bottom: var(--imagelist-spacing);
        margin-left: var(--imagelist-spacing);
        width: calc(var(--imagelist-image-width) - var(--imagelist-spacing));
    }
        .imagelist > * + * {
            margin-top: 0;
        }
        .imagelist > :last-child {
            margin-right: auto;
        }
}

/* @end Image list */


.smallprint {
    font-size: 0.9em;
    font-style: italic;
    opacity: 0.7;
}


.grungeline {
    fill: currentColor;
}

/* @group Statistics */
.statistics {
    display: grid;
    grid-column-gap: var(--layoutsection-horizontalspacing);
    grid-row-gap: 0.15rem;
    font-size: 1.8em;
    font-weight: bold;
    font-family: var(--fontfamily--titles);
}
    .statistics--simple {
        font-size: 1.4em;
    }
    .statistics--secondary {
        display: flex;
        align-items: baseline;
        font-size: 1.3em;
    }

.statistics > * + * {
    margin-top: 0;
}

    .statistics--secondary > dt {
        margin-left: 0.5em;
        margin-right: calc(var(--layoutsection-horizontalspacing) / 2);
    }

.statistics dt {
    font-size: 0.7rem;
    font-family: var(--fontfamily);
    text-transform: uppercase;
    opacity: 0.6;
}
.statistics dd {
    grid-row: 1;
    line-height: 1;
}
    .statistics--simple dd {
        grid-row: 2;
    }

    .statistics-reputation {
        position: relative;
    }
        .statistics-reputation::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0.2em;
            height: 0.2em;
            background: var(--reputationcolor--good);
            border-radius: 50%;
        }
        .statistics-reputation--medium::before {
            background: var(--reputationcolor--medium);
        }
        .statistics-reputation--bad::before {
            background: var(--reputationcolor--bad);
        }

    .statistics--secondary > dd:first-of-type {
        order: 0;
    }
    .statistics--secondary > dt:first-of-type {
        order: 1;
    }
    .statistics--secondary > dd:nth-of-type(2) {
        order: 2;
    }
    .statistics--secondary > dt:nth-of-type(2) {
        order: 3;
    }
    .statistics--secondary > dd:nth-of-type(3) {
        order: 4;
    }
    .statistics--secondary > dt:nth-of-type(3) {
        order: 5;
    }


/* @end Statistics */


/* @group Definition list */
.definitionlist {
    --definitionlist-term-width: 13rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 1.1em;
    line-height: 1.1;
    font-weight: bold;
    font-family: var(--fontfamily--titles);
}

.definitionlist > * {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 1em 0;
}
    .definitionlist > * + * {
        margin-top: 0;
    }

.definitionlist dt {
    width: var(--definitionlist-term-width);
    font-size: 1.1em;
    text-align: right;
    color: var(--textcolor);
}

.definitionlist dt small {
    display: block;
    font-size: 0.8em;
    opacity: 0.5;
}

.definitionlist dd {
    position: relative;
    margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
    width: calc(100% - var(--definitionlist-term-width) - var(--layoutsection-horizontalspacing) / 2);
    color: var(--textcolor--secondary);
}
    .definitionlist dd::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: calc(100% + var(--definitionlist-term-width));
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        box-shadow:  0 -1px 0 0 rgba(0, 0, 0, 1);
    }

.definitionlist dd small {
    opacity: 0.5;
}
/* @end Definition list */


/* @group Rating (1 to 5 - step 0.5) */
.rating {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
}

    .rating::before,
    .rating::after {
        font-family: 'Arial', sans-serif;
        font-size: 0.9rem;
        letter-spacing: 0.2em;
    }
        .rating::before {
            content: '\2605\2605\2605\2605\2605';
            color: rgba(255, 255, 255, 0.15);
        }

        .rating::after {
            position: absolute;
            left: 0;
            top: 0;
            color: #F9B042;
        }

            .rating[data-rating="0.5"]::after,
            .rating[data-rating="1.5"]::after,
            .rating[data-rating="2.5"]::after,
            .rating[data-rating="3.5"]::after,
            .rating[data-rating="4.5"]::after {
                overflow: hidden;
            }

            .rating[data-rating="1"]::after,
            .rating[data-rating="0.5"]::after {
                content: '\2605';
            }
                .rating[data-rating="0.5"]::after {
                    width: calc(10% - 0.05em);
                }

            .rating[data-rating="2"]::after,
            .rating[data-rating="1.5"]::after {
                content: '\2605\2605';
            }
                .rating[data-rating="1.5"]::after {
                    width: calc(30% - 0.05em);
                }

            .rating[data-rating="3"]::after,
            .rating[data-rating="2.5"]::after {
                content: '\2605\2605\2605';
            }
                .rating[data-rating="2.5"]::after {
                    width: calc(50% - 0.05em);
                }

            .rating[data-rating="4"]::after,
            .rating[data-rating="3.5"]::after {
                content: '\2605\2605\2605\2605';
            }
                .rating[data-rating="3.5"]::after {
                    width: calc(70% - 0.05em);
                }

            .rating[data-rating="5"]::after,
            .rating[data-rating="4.5"]::after {
                content: '\2605\2605\2605\2605\2605';
            }
                .rating[data-rating="4.5"]::after {
                    width: calc(90% - 0.05em);
                }

.rating meter {
    position: absolute;
    height: 0;
    visibility: hidden;
}
    .rating meter::-webkit-meter-bar,
    .rating meter::-webkit-meter-optimum-value,
    .rating meter::-webkit-meter-suboptimum-value,
    .rating meter::-webkit-meter-even-less-good-value {
        background: none;
    }

    .rating meter::-moz-meter-bar {
        background: none;
    }
/* @end Rating */



/* @group Author */
.author {
    display: flex;
    align-items: center;
    font-size: 1.1em;
    font-family: var(--fontfamily--titles);
    color: inherit;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.author > * + * {
    margin-top: 0;
    margin-left: calc(var(--layoutsection-horizontalspacing) / 3);
}
.author img {
    width: var(--userimage-size--normal);
    height: var(--userimage-size--normal);
}
    .author--secondary img {
        width: var(--userimage-size--small);
        height: var(--userimage-size--small);
    }

.author a,
a.author {
    border-bottom: none;
}
    .author a:hover,
    a.author:hover {
        color: var(--textcolor);
    }
/* @end Author */


/* @group Author / time group */
.authortimegroup {
    position: relative;
    padding-left: calc(var(--userimage-size--normal) + 0.5em);
}
    .authortimegroup--secondary {
        padding-left: calc(var(--userimage-size--small) + 0.5em);
    }
.authortimegroup img {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--userimage-size--normal);
    height: var(--userimage-size--normal);
}
    .authortimegroup--secondary img {
        width: var(--userimage-size--small);
        height: var(--userimage-size--small);
    }
@media screen and (min-width: 700px) {
    .authortimegroup {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 0;
    }
    .authortimegroup img {
        position: relative;
    }
}

.authortimegroup * + * {
    margin-top: 0;
    margin-left: calc(var(--layoutsection-horizontalspacing) / 3);
}
/* @end Author / time group */


/* @group Time (datetime) */
.time {
    font-size: 0.9em;
    color: var(--textcolor--quartenary--transparent50);
}
/* @end Time (datetime) */


/* @group Social share */
.sharelink {
    display: inline-block;
    max-width: 100%;
    padding: 0.5em;
    overflow: hidden;
    font-family: monospace;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-user-select: all;
       -moz-user-select: all;
        -ms-user-select: all;
            user-select: all;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.25em;
}
    * + .sharelink {
        margin-top: 0.25em;
    }

.shareoptions {
    display: flex;
}
.shareoptions > * {
    padding: 0;
}
    .shareoptions > *::before {
        content: normal;
    }

    .shareoptions > * + * {
        margin-top: 0;
        margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
    }

.shareoptions .icon {
    width: 3em;
    height: 3em;
    border-radius: 50%;
    color: inherit;
    background: rgba(255, 255, 255, 0.05);
}
    .shareoptions .icon::before {
        width: 3em;
        line-height: 3em;
        text-align: center;
    }
    .shareoptions .icon:hover {
        border-color: transparent;
        background: rgba(255, 255, 255, 0.1);
    }
/* @end Social share */


#baguetteBox-overlay {
    margin-top: 0;
}


/* @group Management actions */
.managementactions {
    font-size: 0.75rem;
}
    .pagecontent-main .managementactions {
        max-width: 100%;
    }

.managementactions > *,
.managementactions > * > form {
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding-left: 0;
}
    .managementactions > *::before {
        content: normal;
    }

    .managementactions > * + * {
        margin-top: 0.25em;
    }

.managementaction,
.managementactions a,
.managementactions button {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: stretch;
    padding: 0.75em 1em;
    color: var(--textcolor--quartenary--transparent50);
    text-transform: uppercase;
    border: 1px solid var(--textcolor--quartenary--transparent2);
    border-radius: 0.25em;
    background: var(--toolbar-background);
}
    .managementaction:hover,
    .managementactions a:hover,
    .managementactions button:hover {
        background: var(--toolbar-background--hover);
    }

    .managementaction--negative::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(128, 5, 2, 0.15);
    }

@media screen and (min-width: 500px) {
    .managementactions {
        margin-left: 1px;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
    }
    .managementactions > * + * {
        margin-top: 0;
    }

    .managementactions a,
    .managementactions button {
        margin-left: -1px;
        margin-top: -1px;
        border-radius: 0;
        box-shadow: -2px 0 0 0 rgba(0, 0, 0, 0.2);
    }
        .managementactions > :first-child > * {
            border-radius: 0.25em 0 0 0.25em;
        }
        .managementactions > :last-child > * {
            border-radius: 0 0.25em 0.25em 0;
        }

    /* In dropdown */
    .popwindow .managementactions {
        display: block;
        margin: calc(var(--popwindow-padding--vertical) * -1) calc(var(--popwindow-padding--horizontal) * -1);
    }
    .popwindow .managementactions > *,
    .popwindow .managementactions > * > form {
        width: 100%;
    }
    .popwindow .managementactions > * + * {
        margin: 0;
    }
    .popwindow .managementactions a,
    .popwindow .managementactions button {
        display: block;
        width: 100%;
        padding-top: 1.25em;
        padding-bottom: 1.25em;
        text-align: left;
        border: 1px solid var(--textcolor--quartenary--transparent2);
        box-shadow: none;
        border-radius: 0;
    }
        .popwindow .managementactions > * + * a,
        .popwindow .managementactions > * + * button {
            border-top: none;
        }
}
/* @end Management actions */


/* @group Tag */
.tag {
    display: inline-block;
    padding: 0.25em 0.5em;
    vertical-align: middle;
    font-size: 0.65rem;
    font-family: var(--fontfamily);
    font-weight: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    border-radius: 0.25em;
    background: #252c30;
    border: none;
}
    * + .tag {
        margin-top: 0;
    }
    .tag--dev {
        color: #fff;
        background: #3fa9f5;
    }
/* @end Tag */


/* @group Notification count */
.notificationcount {
    --notificationcount-size: 2.25em;

    position: relative;
    z-index: 2;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: -0.5em;
    margin-left: -0.5em;
    min-width: var(--notificationcount-size);
    height: var(--notificationcount-size);
    padding-left: 0.5em;
    padding-right: 0.5em;
    vertical-align: top;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: normal;
    font-family: var(--fontfamily);
    background: var(--notificationcount-color);
    border: 1px solid #000;
    border-radius: calc(var(--notificationcount-size) / 2);
}
    .numberofcomments + .notificationcount {
        margin-left: -0.75em;
    }
    .notificationcount--read {
        background: var(--notificationcount-color--read);
    }

/* @end Notification count */


/* @group Negative / Positive Stat */
.positivestat {
    color: #79b172;
}
.negativestat {
    color: #f28b84;
}
/* @end Negative / Positive Stat */


/* @group User profile */
.userprofile * + * {
    margin-top: 0.2em;
}
.userprofile a {
    border: none;
}
.userprofile img {
    width: var(--userimage-size--big);
    height: var(--userimage-size--big);
}

.userprofile-name {
    font-size: 1.3em;
    font-weight: bold;
    font-family: var(--fontfamily--titles);
    letter-spacing: 0.05em;
    color: var(--textcolor);
}
.userprofile-title {
    font-size: 0.9em;
    color: var(--textcolor--quartenary--transparent50);
}
.userprofile-role {
    font-family: var(--fontfamily);
    font-size: 0.75em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* @group User profile header */
.userprofileheader {
    --userprofileheader-imageheight: 8em;
    position: relative;
    margin-left: calc(var(--wrapper-padding) * -1);
    margin-right: calc(var(--wrapper-padding) * -1);
    padding: 0 var(--wrapper-padding);
    padding-top: calc(var(--userprofileheader-imageheight) + var(--section-verticalspacing));
    padding-bottom: var(--section-verticalspacing);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255,255,255,.05);
    box-shadow:
        0 -1px 0 0 rgba(0, 0, 0, .5),
        inset 0 -1px 0 0 rgba(0, 0, 0, .5);
}



@media screen and (min-width: 500px) {
    .userprofileheader {
        --userprofileheader-imageheight: 10em;

        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .userprofileheader > * + * {
        margin-top: 0;
        margin-left: var(--layoutsection-horizontalspacing);
    }
        .userprofileheader-image + * {
            margin-left: 0;
        }


    .userprofileheader-membersince {
        margin-left: auto;
        margin-right: 0;
    }
    .userprofileheader-statistics {
        justify-content: flex-start;
        margin-left: 0;
        width: calc(70% - var(--layoutsection-horizontalspacing));
    }
    .userprofileheader > :last-child {
        margin-right: 0;
        width: 30%;
        text-align: right;
    }
}

@media screen and (min-width: 800px) {
    .userprofileheader {
        --userprofileheader-imageheight: 13em;
    }
    .userprofileheader-identification {
        position: relative;
        padding-left: calc(var(--userimage-size--important) + var(--layoutsection-horizontalspacing) / 2);
    }
    .userprofileheader-identification > * + * {
        margin-top: 0;
    }

    .userprofileheader-identification img {
        position: absolute;
        left: 0;
        top: calc(var(--section-verticalspacing) * 1.5 * -1);
        width: var(--userimage-size--important);
        height: var(--userimage-size--important);
        max-height: none;
    }
}

@media screen and (min-width: 1100px) {
    .userprofileheader {
        --userprofileheader-imageheight: 15em;
    }
    .userprofileheader-membersince,
    .userprofileheader-statistics,
    .userprofileheader > :last-child {
        margin-left: var(--layoutsection-horizontalspacing);
        width: auto;
    }
}


.userprofileheader-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    height: var(--userprofileheader-imageheight);
    -o-object-position: center top;
       object-position: center top;
    overflow: hidden;
}
    /* intended specificity */
    .pagecontent-main p.userprofileheader-image {
        max-width: none;
    }
.userprofileheader-image img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: none;
    max-width: none;
}

.userprofileheader-image + * {
    margin-top: 0;
}

/* @group User profile header - identification */

.userprofileheader-identification h2 {
    font-size: var(--title-3-size);
}


/* @end User profile header - identification */

/* @end User profile */



/* @group Blockquote general style */
blockquote {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--textcolor--quartenary--transparent75);
}
blockquote > * + * {
    margin-top: calc(var(--section-verticalspacing) / 3);
}
    blockquote > p:first-of-type::before {
        content: '\201C';
        margin-right: 0.5em;
    }

blockquote footer {
    font-size: 0.9em;
    font-family: var(--fontfamily);
    color: var(--textcolor--quartenary--transparent50);
}
blockquote a {
    color: inherit;
    border-color: currentColor;
}
    blockquote a:hover {
        color: var(--textcolor--quartenary);
    }
/* @end Blockquote general style */

/* @group Image (for comment / post) */
.image {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
    .image + * {
        margin-top: calc(var(--section-verticalspacing) / 1.5);
    }

    .image::before {
        content: '';
        position: absolute;
        left: -4px;
        top: -4px;
        z-index: -1;
        width: calc(100% + 4px * 2);
        height: calc(100% + 4px * 2);
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.7);
        opacity: 0.2;
    }

.image img {
    display: block;
}

/* @end Image (for comment / post) */



/* @group Edited flag */
.edited {
    position: relative;
    width: 2em;
    height: 2em;
    white-space: nowrap;
    text-indent: -110vw;
    font-size: 0.9em;
    color: var(--textcolor--quartenary)
}
    .edited::before {
        content: '\EA0E';
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-family: icons;
        text-indent: 0;
    }
/* @end Edited flag */

/* @group Timeline */
.timeline {
    --timeline-paddinghorizontal: 1.5rem;
}
.timeline,
.timeline > li {
    list-style: none;
}

.timeline > * {
    padding-left: var(--timeline-paddinghorizontal);
}
    .timeline > *::before {
        content: normal;
    }
    .timeline > * + * {
        margin-top: calc(var(--section-verticalspacing) * 2);
    }
.timeline h2,
.timeline h3 {
    position: relative;
    margin-left: calc(var(--timeline-paddinghorizontal) * -1);
}
    .timeline h2::after,
    .timeline h3::after {
        content: '';
        position: absolute;
        left: calc((var(--wrapper-padding) + 9px) * -1);
        top: 0.25em;
        width: 23px;
        height: 23px;
        background: rgba(0, 0, 0, 0.5) url(../images/sprite.png) no-repeat left -4290px;
        border-radius: 50%;
    }
/* @end Timeline */


/* @group Activity list */
.activitylist {
    padding-left: 0;
}
.activitylist,
.activitylist > li {
    list-style: none;
}
.activitylist > * {
    padding-left: 0;
}
    .activitylist > *::before {
        content: normal;
    }
    .activitylist > * + * {
        margin-top: calc(var(--section-verticalspacing) * 1.5);
    }
/* @end Activity list */

/* @group Activity */
.activity a {
    color: var(--textcolor--quartenary--transparent75);
    border-color: currentColor;
}
.activity header {
    color: var(--textcolor--quartenary);
}
.activity header > * + * {
    margin-top: 0.5em;
}
    .activity header > * + .activity-statistics {
        margin-top: calc(var(--section-verticalspacing) / 2);
    }
.activity header h2,
.activity header h3,
.activity header h4 {
    max-width: none;
}
.activity header h2 a,
.activity header h3 a,
.activity header h4 a {
    border-color: transparent;
    color: inherit;
}
    .activity header h2 a:hover,
    .activity header h3 a:hover,
    .activity header h4 a:hover {
        border-color: currentColor;
    }

.activity-statistics {
    display: flex;
}
.activity-statistics > * {
    padding: 0;
}
    .activity-statistics > *::before {
        content: normal;
    }
    .activity-statistics > * + * {
        margin-top: 0;
        margin-left: calc(var(--layoutsection-horizontalspacing) / 2);
    }

.activity .numberofcomments {
    font-size: 1.25em;
}

/* @end Activity */

/* @group Notifications */
:root {
    --notifications-clearbutton-background: rgba(48, 31, 31, 0.99);
    --notifications-clearbutton-background-stripes: rgba(29, 18, 18, 0.99);
    --notifications-clearbutton-background-shadow: rgba(33, 17, 17, 0.99);

    --notifications-clearbutton-bordercolor: rgba(64, 38, 38, 0.99);
}
.notifications {}

.notifications-clear {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 0 -1px -1px;
    font-family: var(--fontfamily--titles);
    text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}
.notifications-clear > * {
    display: flex;
    margin: 0;
    width: 50%;
}

.notifications-clear a,
.notifications-clear button {
    display: flex;
    background: var(--widget-background-grungeeffect),
        linear-gradient(-45deg, var(--notifications-clearbutton-background-stripes) 25%, transparent 25%, transparent 50%, var(--notifications-clearbutton-background-stripes) 50%, var(--notifications-clearbutton-background-stripes) 75%, transparent 75%, transparent),
        radial-gradient(farthest-corner at center, var(--notifications-clearbutton-background) 0%, var(--notifications-clearbutton-background) 30%, var(--notifications-clearbutton-background-shadow) 100%);
    background-size: var(--widget-background-size);
    background-position: var(--widget-background-position);
    background-blend-mode: var(--widget-background-blendmode);
    border: 1px solid var(--notifications-clearbutton-bordercolor);
}
    .notifications-clear a:hover,
    .notifications-clear button:hover {
        --notifications-clearbutton-background: rgba(59, 38, 38, 0.99);
        --notifications-clearbutton-background-stripes: rgba(38, 23, 23, 0.99);
        --notifications-clearbutton-background-shadow: rgba(41, 21, 21, 0.99);
        border-color: var(--notifications-clearbutton-bordercolor);
    }

.notifications-list {
    max-height: 90vh;
    overflow: auto;
}

    .notifications-list > * + * {
        margin-top: 0;
        border-top: 1px solid var(--popwindow-bordercolor);
    }

.notification,
.notification > a {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
    .notification {
        position: relative;
    }
    .notification--read {
        color: var(--textcolor--quartenary--transparent50);
        background: rgba(255, 255, 255, 0.025);
    }

.notification img {
    margin-right: calc(var(--layoutsection-horizontalspacing) / 3);
    width: var(--userimage-size--small);
    vertical-align: middle;
}

.notification > button {
    position: absolute;
    right: 0.5em;
    top: 0.75em;
    margin: 0;
    width: 1em;
    height: 1em;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
}
    .notification > button::before {
        content: '\D7';
        margin-right: 1em;
    }

@media screen and (min-width: 1000px) {
    .notifications-list {
        max-height: 27em;
    }
}
/* @end Notifications */


/* @group Infinite scroll */
.infinitescroll--loading {
    position: relative;
}
    .infinitescroll--loading::after {
        content: '...';
        display: block;
        width: 100%;
        padding: 1em 0;
        text-align: center;
        background: rgba(0, 0, 0, 0.2);
    }
/* @end Infinite scroll */


/* @group Sign in options */
.signinoptions {

}
    * + .signinoptions {
        margin-top: var(--section-verticalspacing);
    }

.signinoptions > * {
    padding: 0;
}
    .signinoptions > *::before {
        content: normal;
    }
    .signinoptions > * + * {
        margin-top: calc(var(--section-verticalspacing) / 3);
    }
/* @end Sign in options */


/* @group Sortable */
.sortable {
    white-space: nowrap;
    opacity: 0.7;
}
    .sortable--active {
        opacity: 1;
    }
    .sortable::after {
        content: '^';
        display: inline-block;
        margin-left: 0.5em;
        vertical-align: baseline;
        font-size: 0.7rem;
        line-height: 0.25;
        font-weight: normal;
        font-family: Arial, sans-serif;
        color: var(--textcolor);
        opacity: 0.5;
        transform: scaleY(-1) scaleX(1.9);
    }
        .sortable--descending::after {
            transform: scaleX(1.9);
        }
        .sortable--active::after {
            opacity: 1;
        }
/* @end Sortable */



/* @group Privacy window exceptions */
.qc-cmp-ui {
    color: #000;
}
.qc-cmp-purposes-page-content::-webkit-scrollbar {
    background: #fff;
}
.qc-cmp-purposes-page-content::-webkit-scrollbar-thumb {
    background: #ccc;
}
.qc-cmp-ui h1,
.qc-cmp-ui h2,
.qc-cmp-ui h3,
.qc-cmp-ui h4,
.qc-cmp-ui h5 {
    color: inherit;
}
/* @end Privacy window exceptions */


/* @group Ascendancy section */
.ascendancysection {
    position: relative;
    overflow: hidden;
}
    .megamenu > .ascendancysection {
        border-left: 1px solid hsla(0, 0%, 100%, 0.15);
        box-shadow: -1px 0 0 #000;
    }
    .ascendancysection::before {
        content: '';
        position: absolute;
        left: auto;
        right: 0;
        top: 0;
        z-index: -1;
        width: 800px;
        height: 100%;
        background: url(../images/sprite-ascendancysection.jpg) no-repeat left top;
        opacity: 0.5;
    }

    .ascendancysection--gladiator::before {
        background-position: -800px top;
    }
    .ascendancysection--champion::before {
        background-position: -1600px top;
    }
    .ascendancysection--assassin::before {
        background-position: -2400px top;
    }
    .ascendancysection--saboteur::before {
        background-position: -3200px top;
    }
    .ascendancysection--trickster::before {
        background-position: -4000px top;
    }
    .ascendancysection--juggernaut::before {
        background-position: -4800px top;
    }
    .ascendancysection--berserker::before {
        background-position: -5600px top;
    }
    .ascendancysection--chieftain::before {
        background-position: -6400px top;
    }
    .ascendancysection--necromancer::before {
        background-position: -7200px top;
    }
    .ascendancysection--occultist::before {
        background-position: -8000px top;
    }
    .ascendancysection--elementalist::before {
        background-position: -8800px top;
    }
    .ascendancysection--deadeye::before {
        background-position: -9600px top;
    }
    .ascendancysection--warden::before {
        background-position: -10400px top;
    }
    .ascendancysection--pathfinder::before {
        background-position: -11200px top;
    }
    .ascendancysection--inquisitor::before {
        background-position: -12000px top;
    }
    .ascendancysection--hierophant::before {
        background-position: -12800px top;
    }
    .ascendancysection--guardian::before {
        background-position: -13600px top;
    }
    .ascendancysection--scion::before {
        background-position: -14400px top;
    }


/* @end Ascendancy section */


/* @group Optiongroup select */
.optiongroupselect-label {
    position: relative;
    padding-right: 1em;
}
    .optiongroupselect-label::after {
        content: '\2303';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) scaleY(-1);
        font-size: 0.85em;
        line-height: 1;
        font-family: var(--fontfamily);
        opacity: 0.5;
    }

.optiongroupselect-options input {
    position: absolute;
    opacity: 0;
}

.optiongroupselect-options input[type='checkbox'] + label {
    position: relative;
}
.optiongroupselect-options input[type='checkbox'] + label::before{
    content: "";
    display: inline-block;
    position: absolute;
    height: 12px;
    width: 12px;
    top: 27px;
    left: 10px;
    border: 1px solid #E8E0C7;
    opacity: 0.5;
}
.optiongroupselect-options input[type='checkbox'] + label::after {
    content: none;
    border-color: #C9C09D;
    display: inline-block;
    height: 5px;
    width: 8px;
    border-left: 2px solid;
    border-bottom: 2px solid;
    position: absolute;
    transform: rotate(-45deg);
    left: 12px;
    top: 29px;
}

/*Unhide the checkmark on the checked state*/
.optiongroupselect-options input[type="checkbox"]:checked + label::after {
    content: "";
    background: none !important;
}
.optiongroupselect-options input[type="checkbox"]:checked + label {
    background: none !important;
}
.optiongroupselect-options input + * {
    margin-top: 0;
}
.optiongroupselect-options input:checked + * {
    background: #f00
}
/* @end Optiongroup select */

.filter-message {
    text-align: left;
    font: normal normal normal 13px/15px Fontin;
    letter-spacing: 0px;
    color: #A747C9;
    opacity: 1;
    margin-left: 68%;
}
@media only screen and (min-width:600px) and  (max-width:1099px) {
.filter-message {
    margin-left: 0;
}
}
@media only screen and (max-width:600px) {
    .filter-message {
    margin-left: 0;
    }
}
/* @group List group */
.listgroup {
    --listgroup-spacing: 2.25rem;
    margin-bottom: calc(var(--listgroup-spacing) * -1);
}
    main .listgroup {
        max-width: none;
    }

.listgroup + * {
    margin-top: var(--section-verticalspacing);
}

.listgroup > * {
    margin-top: 0;
    margin-bottom: var(--listgroup-spacing);
}

@media screen and (min-width: 700px) {
    .listgroup {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: stretch;
    }

    .listgroup > :nth-child(2n + 1) {
        width: 60%;
    }

    .listgroup > :nth-child(2n + 2) {
        width: calc(40% - var(--listgroup-spacing));
    }

}
/* @end List group */


/* @group Build list */
.buildlistwidget {
    --buildlistwidget-item-padding--vertical: 0.9em;
    --buildlistwidget-item-padding--horizontal: var(--widget-padding--horizontal);
    --buildlistwidget-secondaryinfo-width: 7em;
    font-size: 0.9em;
    font-family: var(--fontfamily--titles);
}
    .buildlistwidget--secondary {
        --buildlistwidget-item-padding--vertical: 0.65em;
    }
    /* occupy the full width of the widget */
    .widget-content.buildlistwidget {
        padding: 0;
    }
    .widget-header + .buildlistwidget {
        margin-top: 0;
    }

.buildlistwidget * {
    margin: 0;
}
    .buildlistwidget > * {
        border-bottom: 1px solid var(--widget-background-shadow);
        box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
    }
.buildlistwidget a {
    position: relative;
    display: block;
    padding: var(--buildlistwidget-item-padding--vertical) var(--buildlistwidget-item-padding--horizontal);
    padding-right: calc(var(--buildlistwidget-secondaryinfo-width) + 0.5em);
    color: var(--textcolor);
    border: none;
}
    .buildlistwidget a:hover {
        background: rgba(255, 255, 255, 0.05);
    }

.buildlistwidget-buildname {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.buildlistwidget-builddate {
    font-size: 0.9em;
    font-family: var(--fontfamily);
    color: var(--textcolor--tertiary);
}

.buildlistwidget-item-secondaryinfo {
    position: absolute;
    top: 50%;
    right: var(--buildlistwidget-item-padding--horizontal);
    max-width: var(--buildlistwidget-secondaryinfo-width);
    font-size: 0.85em;
    color: var(--textcolor--tertiary);
    text-align: right;
    transform: translateY(-50%);
}
/* @end Build list */



.secondarysection-title {
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1.1;
    font-family: var(--fontfamily--titles);
    letter-spacing: .025em;
    color: var(--textcolor);
}
    /* intended specificy */
    .secondarysection-title,
    .pagecontent-main .secondarysection-title {
        max-width: 10em;
    }
.secondarysection-title + *  {
    margin-top: calc(var(--section-verticalspacing) / 2);
}

.nowrap {
    white-space: nowrap;
}

.fs-10 {
    font-size: 10px;
}


.back-to-top {
    position: fixed;
    bottom: 30px;
    color: rgba(255,255,255, 0.6);
    z-index: 9;
    font-size: 10px;
    text-transform: uppercase;
    background: url('../images/back-to-top.png') no-repeat center center;
    background-size:contain;
    width: 85px;
    height: 87px;
}
@media (min-width: 1249px) {
    .back-to-top {
        right: calc(50% - 665px);
    }
}
@media (min-width: 1001px) and (max-width: 1248px) {
    .back-to-top {
        right: 360px;
    }
}
@media (max-width: 1000px) {
    .back-to-top {
        right: 0px;
        transform: scale(0.75);
    }
}
.back-to-top,
.back-to-top:not([href]) {
    cursor: pointer;
}
.back-to-top:hover {
    text-decoration: none;
    border-bottom-color: transparent;
}
.back-to-top span {
    text-shadow: -1px -1px 0px #000;
    background: #000;
    position: absolute;
    bottom: 0px;
}


/* Quantcast element */
* + .qc-cmp2-container {
    margin-top: 0;
}
* + .qc-cmp2-main:empty {
    margin-top: 0;
}


/* @group Number of votes */
.numberofvotes {
    --numberofvotes-color: #91844C;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--numberofvotes-color);
}
.numberofvotes > * + * {
    margin-left: 0.5em;
}
.numberofvotes > svg {
    --icon-size: 1.5em;
    stroke: var(--numberofvotes-color);
    opacity: 0.75;
}
.numberofvotes span {
    font-size: 0.8rem;
    padding: 0.25em 0.5em;
    background: rgba(145, 132, 76, 0.1);
    border-radius: 0.15em;
    border: 1px solid var(--numberofvotes-color);
}
/* @end Number of votes */

#Brid_85254141 {
  display: none;
}

label.has-success span.validationmessage {
  display: none !important;
}

.hidden {
  display: none;
}

a[href*="/items/"] img {
  vertical-align: middle;
}

.markItUpContainer textarea.textileInput {
  min-height: 150px;
}

.select2-content {
  min-width: 254px;
}

.select2-container.select2-selection--single {
  margin-top: 10px;
}

.select2-container.select2-container--bootstrap .select2-selection,
.select2-container.select2-container--bootstrap.select2-container--open .select2-selection {
  font-size: 1.1rem;
  font-family: "Fontin Smallcaps", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #c9c09d;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0.2em;
}
.select2-container.select2-container--bootstrap .select2-selection .select2-selection__rendered,
.select2-container.select2-container--bootstrap.select2-container--open .select2-selection .select2-selection__rendered {
  font-size: 1.1rem;
  font-family: "Fontin Smallcaps", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #c9c09d;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0.2em;
}
.select2-container.select2-container--bootstrap .select2-selection--single .select2-selection__arrow,
.select2-container.select2-container--bootstrap.select2-container--open .select2-selection--single .select2-selection__arrow {
  margin-top: 0;
}
.select2-container.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b.presentation,
.select2-container.select2-container--bootstrap.select2-container--open .select2-selection--single .select2-selection__arrow b.presentation {
  border-color: #fff transparent transparent;
}
.select2-container.select2-container--bootstrap .select2-dropdown,
.select2-container.select2-container--bootstrap.select2-container--open .select2-dropdown {
  z-index: calc(var(--overlay-zindex) + 1);
  box-shadow: none;
  border-color: #ccc;
  background: rgba(30, 34, 39, 0.9);
}
.select2-container.select2-container--bootstrap .select2-dropdown .select2-results,
.select2-container.select2-container--bootstrap.select2-container--open .select2-dropdown .select2-results {
  margin-top: 0;
}
.select2-container.select2-container--bootstrap .select2-dropdown .select2-results .select2-results__option,
.select2-container.select2-container--bootstrap.select2-container--open .select2-dropdown .select2-results .select2-results__option {
  margin-top: 0;
}
.select2-container.select2-container--bootstrap .select2-dropdown .select2-results .select2-results__option.select2-results__option--highlighted,
.select2-container.select2-container--bootstrap.select2-container--open .select2-dropdown .select2-results .select2-results__option.select2-results__option--highlighted {
  background: #572804;
}

.property-with-separator {
  position: relative;
  padding: 1.25em 0;
}
.property-with-separator::before, .property-with-separator::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background-image: linear-gradient(to right, transparent, #000 50%, transparent), linear-gradient(to right, transparent, #fff 50%, transparent);
  background-size: 100% 1px, 100% 1px;
  background-position: left top, left bottom;
  background-repeat: no-repeat;
  mix-blend-mode: overlay;
}
.property-with-separator::after {
  top: auto;
  bottom: 0;
}
.property-with-separator.no-bottom-separator::after {
  display: none;
  padding-bottom: 0;
}
.property-with-separator.no-top-separator::before {
  display: none;
  padding-top: 0;
}

/* ul indented */
.textile-content ul * {
  /*list-style: disc;*/
}

.textile-content ul > li {
  /*margin-left: 15px;
  margin-top: 0;*/
}

ul.datedlist * {
  list-style: none;
}

ul.datedlist > li {
  margin-top: 15px;
}

/* editor font */
.markItUpContainer textarea.textileInput {
  font-family: var(--fontfamily);
  font-size: 1em;
  font-weight: 300;
}

select#bc-subcategory {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojYzljMDlkO308L3N0eWxlPgoKIDx0aXRsZT5hcnJvd3M8L3RpdGxlPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSIyMiIgd2lkdGg9IjEzIiB5PSItMSIgeD0iLTEiLz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBzdHJva2U9Im51bGwiIGlkPSJzdmdfMyI+CiAgIDxwb2x5Z29uIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z18xIiBwb2ludHM9IjEuMzk5OTk5OTc2MTU4MTQyLDguODIwODc4MjA4MzM4NTcgNS41MjE5NzgwMzg0ODM5MjI1LDMuMjAwMDAwMDQ3NjgzNzE2IDkuMjY5MjMwNzQxMTk2OTM1LDguODIwODc4MjA4MzM4NTcgIiBjbGFzcz0ic3QwIi8+CiAgIDxwb2x5Z29uIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z18yIiBwb2ludHM9IjkuMjY5MjMwNzQxMTk2OTM1LDExLjA2OTIzMTI1OTQyOTg0MSA1LjUyMTk3ODAzODQ4MzkyMjUsMTYuNjkwMTEwMzEzNDk5MzYgMS4zOTk5OTk5NzYxNTgxNDIsMTEuMDY5MjMxMjU5NDI5ODQxICIgY2xhc3M9InN0MCIvPgogIDwvZz4KIDwvZz4KPC9zdmc+);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-position: 95% 50%;
  padding-right: 22px;
}

.pageheader {
  margin-top: 0;
}

.pagefooter span {
  margin-top: 0;
  font-size: 1.4em;
  font-family: var(--fontfamily--titles);
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #E8E0C7;
}

/*.pagecontent-main p {
    max-width: none;
}*/
.textile .markItUpButton14 a:before {
  font-family: FontAwesome;
  font-size: 1.2em;
  content: "\F0C1";
}

/**
* Forum
*/
[v-cloak].forumpost-reply-text {
  display: block;
}

#quote-selection-btn {
  display: none;
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
}

/**
* Utilities
*/
.mt-1 {
  margin-top: 1rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.p-1 {
  padding: 1rem;
}

.pl-0 {
  padding-left: 0;
}

.border-1 {
  border: 1px solid;
}

/*
fix for sharing widget
 */
#overlay-share .widget-content {
  width: auto;
}
#overlay-share .widget-content .sharelink {
  white-space: initial;
}

/*
Fix social login buttons' width
*/
.button--facebook, .button--google {
  max-width: none;
}

blockquote h1, blockquote h2, blockquote h3, blockquote h4, blockquote h5, blockquote h6, blockquote ul li::before {
  color: var(--textcolor--quartenary--transparent75);
}

.forumitem-user a {
  border-bottom: 0 !important;
}

.forumitem-latestpost-thread {
  margin-top: 0;
}

.invisible {
  visibility: hidden;
}

@media screen and (min-width: 800px) {
  .widget-content--complex > :last-child .widget-button .button {
    left: 72%;
  }
}
.tablecontent--image a {
  border-bottom: none;
}

.tablecontent--image a:hover {
  border-bottom: none;
}

.article iframe {
  max-width: 100% !important;
}

#baguetteBox-overlay {
  display: none;
}

.profile-tooltip {
  display: none;
  position: absolute;
  left: 0;
  z-index: 9999;
  padding: 0.5em;
  width: 400px;
  margin: 0 !important;
}
.profile-tooltip * + * {
  margin: 0;
}
.profile-tooltip-cover {
  position: relative;
  margin-bottom: 2.25em;
}
.profile-tooltip-cover > img {
  width: 100% !important;
  height: auto !important;
}
.profile-tooltip img {
  position: relative;
  transform: none;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
}
.profile-tooltip-header {
  display: flex;
  position: absolute;
  left: 1em;
  bottom: -1.5em;
}
.profile-tooltip-avatar {
  height: 80px !important;
  width: 80px !important;
  margin: 0 1em 0 0 !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.profile-tooltip-name, .profile-tooltip-role {
  background: black;
  padding: 1px 5px;
  display: inline-block;
  float: left;
  margin: 0;
  clear: both;
}
.profile-tooltip-name {
  font-size: 1.4em !important;
}
.profile-tooltip-role {
  margin-top: 3px;
  font-size: 1em !important;
}
.profile-tooltip-buttons {
  display: flex;
  justify-content: flex-start;
}
.profile-tooltip-buttons > * + .button {
  margin-left: 0.5em;
}
.profile-tooltip-statistics {
  margin: 1em 0 0;
  display: flex;
  justify-content: flex-start;
}
.profile-tooltip-statistics div {
  margin: 0 2em 0 0;
}
.profile-tooltip-statistics div:last-child {
  margin: 0;
}
.profile-tooltip-statistics p {
  font-size: 1.2em;
  font-weight: 700;
  font-family: var(--fontfamily--titles);
  line-height: 1;
  margin: 0.2em 0 0;
}
.profile-tooltip-statistics p small {
  display: block;
  margin: 0.2em 0 0;
  font-size: 0.7rem;
  font-family: var(--fontfamily);
  text-transform: uppercase;
  opacity: 0.6;
}
.profile-tooltip .userprofileheader-membersince, .profile-tooltip .userprofileheader-statistics, .profile-tooltip .userprofileheader > :last-child {
  margin-left: 0 !important;
}
.profile-tooltip .userprofileheader-membersince {
  margin-bottom: 1em;
}
.profile-tooltip .userprofileheader-statistics {
  justify-content: space-between;
}
.profile-tooltip .widget-content {
  padding: 0 1em;
  margin: 0 0 1em;
}

a[data-profile-tooltip]:hover + .profile-tooltip,
.profile-tooltip:hover {
  display: block;
}

.itemlink {
  cursor: pointer !important;
}

.banner-floating {
  min-height: 225px;
  position: fixed;
  bottom: 30px;
  right: 50%;
  transform: translateX(565px);
  width: 400px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease !important;
}
.banner-floating.visible {
  opacity: 1;
  visibility: visible;
}

.pagecontent.sticky-banner {
  position: relative;
}
.pagecontent.sticky-banner .banner-floating {
  position: absolute;
  right: 3px;
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}
.pagecontent.sticky-banner .pagecontent-sidebar {
  margin-bottom: 310px;
}
.pagecontent.sticky-banner .pagecontent-main:before, .pagecontent.sticky-banner .pagecontent-main:after {
  content: unset;
}

@media screen and (max-width: 1000px) {
  .banner-floating,
.pagecontent.sticky-banner .banner-floating {
    position: static;
    transform: none;
    visibility: visible;
    opacity: 1;
    width: auto;
    max-width: 100%;
  }
}
main.pagecontent-main div[style*=white-space]:before {
  max-width: 100% !important;
}

@media only screen and (max-width: 359px) {
  .pagecontent-wrap {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .paginationsortfilters {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .pagecontent-main table {
    width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .pagecontent-main table tr {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .pagecontent-main-header + div:before {
    max-width: 100% !important;
  }

  .pagecontent-main--withvotewidget {
    display: block !important;
  }
}
.mv-ad-box, .mv-rail-frame {
  background-color: transparent !important;
}

#sidebar_atf_wrapper {
  margin-top: 20px !important;
}

@media only screen and (min-width: 700px) {
  tr + .mv-ad-box {
    left: 220px !important;
  }
}