@font-face {
    font-family: "BalooTamma2";
    src: url("../fonts/BalooTamma2-Medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "BalooTamma2";
    src: url("../fonts/BalooTamma2-SemiBold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "BalooTamma2";
    src: url("../fonts/BalooTamma2-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

:root {
    --container-padding: 16px;
    --content-width: calc(1280px + (2 * var(--container-padding)));
    --grid-row-gap: 16px;
    --grid-column-gap: 16px
}

@media (min-width: 460px) {
    :root {
        --grid-row-gap: 16px;
        --grid-column-gap: 16px;
        --container-padding: 16px
    }
}

@media (min-width: 769px) {
    :root {
        --grid-row-gap: 16px;
        --grid-column-gap: 16px;
        --container-padding: 16px
    }
}

@media (min-width: 992px) {
    :root {
        --grid-row-gap: 16px;
        --grid-column-gap: 16px;
        --container-padding: 16px
    }
}

.container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: 100%;
    margin: 0 auto
}

.container:not(.container--fluid) {
    max-width: var(--content-width)
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: var(--grid-row-gap) var(--grid-column-gap)
}

.grid.no-gap {
    grid-gap: 0 0
}

.grid.no-row-gap {
    grid-row-gap: 0
}

.grid.no-column-gap {
    grid-column-gap: 0
}

.col-0 {
    grid-column-end: span 0
}

.offset-0 {
    grid-column-start: 1
}

.col-1 {
    grid-column-end: span 1
}

.offset-1 {
    grid-column-start: 2
}

.col-2 {
    grid-column-end: span 2
}

.offset-2 {
    grid-column-start: 3
}

.col-3 {
    grid-column-end: span 3
}

.offset-3 {
    grid-column-start: 4
}

.col-4 {
    grid-column-end: span 4
}

.offset-4 {
    grid-column-start: 5
}

.col-5 {
    grid-column-end: span 5
}

.offset-5 {
    grid-column-start: 6
}

.col-6 {
    grid-column-end: span 6
}

.offset-6 {
    grid-column-start: 7
}

.col-7 {
    grid-column-end: span 7
}

.offset-7 {
    grid-column-start: 8
}

.col-8 {
    grid-column-end: span 8
}

.offset-8 {
    grid-column-start: 9
}

.col-9 {
    grid-column-end: span 9
}

.offset-9 {
    grid-column-start: 10
}

.col-10 {
    grid-column-end: span 10
}

.offset-10 {
    grid-column-start: 11
}

.col-11 {
    grid-column-end: span 11
}

.offset-11 {
    grid-column-start: 12
}

.col-12 {
    grid-column-end: span 12
}

.offset-12 {
    grid-column-start: 13
}

@media (min-width: 460px) {
    .col-xs-0 {
        grid-column-end: span 0
    }

    .offset-xs-0 {
        grid-column-start: 1
    }

    .col-xs-1 {
        grid-column-end: span 1
    }

    .offset-xs-1 {
        grid-column-start: 2
    }

    .col-xs-2 {
        grid-column-end: span 2
    }

    .offset-xs-2 {
        grid-column-start: 3
    }

    .col-xs-3 {
        grid-column-end: span 3
    }

    .offset-xs-3 {
        grid-column-start: 4
    }

    .col-xs-4 {
        grid-column-end: span 4
    }

    .offset-xs-4 {
        grid-column-start: 5
    }

    .col-xs-5 {
        grid-column-end: span 5
    }

    .offset-xs-5 {
        grid-column-start: 6
    }

    .col-xs-6 {
        grid-column-end: span 6
    }

    .offset-xs-6 {
        grid-column-start: 7
    }

    .col-xs-7 {
        grid-column-end: span 7
    }

    .offset-xs-7 {
        grid-column-start: 8
    }

    .col-xs-8 {
        grid-column-end: span 8
    }

    .offset-xs-8 {
        grid-column-start: 9
    }

    .col-xs-9 {
        grid-column-end: span 9
    }

    .offset-xs-9 {
        grid-column-start: 10
    }

    .col-xs-10 {
        grid-column-end: span 10
    }

    .offset-xs-10 {
        grid-column-start: 11
    }

    .col-xs-11 {
        grid-column-end: span 11
    }

    .offset-xs-11 {
        grid-column-start: 12
    }

    .col-xs-12 {
        grid-column-end: span 12
    }

    .offset-xs-12 {
        grid-column-start: 13
    }

    .hide-xs-up {
        display: none
    }
}

@media (max-width: 459px) {
    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }

    .hide-xs-down {
        display: none
    }
}

@media (min-width: 576px) {
    .col-sm-0 {
        grid-column-end: span 0
    }

    .offset-sm-0 {
        grid-column-start: 1
    }

    .col-sm-1 {
        grid-column-end: span 1
    }

    .offset-sm-1 {
        grid-column-start: 2
    }

    .col-sm-2 {
        grid-column-end: span 2
    }

    .offset-sm-2 {
        grid-column-start: 3
    }

    .col-sm-3 {
        grid-column-end: span 3
    }

    .offset-sm-3 {
        grid-column-start: 4
    }

    .col-sm-4 {
        grid-column-end: span 4
    }

    .offset-sm-4 {
        grid-column-start: 5
    }

    .col-sm-5 {
        grid-column-end: span 5
    }

    .offset-sm-5 {
        grid-column-start: 6
    }

    .col-sm-6 {
        grid-column-end: span 6
    }

    .offset-sm-6 {
        grid-column-start: 7
    }

    .col-sm-7 {
        grid-column-end: span 7
    }

    .offset-sm-7 {
        grid-column-start: 8
    }

    .col-sm-8 {
        grid-column-end: span 8
    }

    .offset-sm-8 {
        grid-column-start: 9
    }

    .col-sm-9 {
        grid-column-end: span 9
    }

    .offset-sm-9 {
        grid-column-start: 10
    }

    .col-sm-10 {
        grid-column-end: span 10
    }

    .offset-sm-10 {
        grid-column-start: 11
    }

    .col-sm-11 {
        grid-column-end: span 11
    }

    .offset-sm-11 {
        grid-column-start: 12
    }

    .col-sm-12 {
        grid-column-end: span 12
    }

    .offset-sm-12 {
        grid-column-start: 13
    }

    .hide-sm-up {
        display: none
    }
}

@media (max-width: 575px) {
    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }

    .hide-sm-down {
        display: none
    }
}

@media (min-width: 769px) {
    .col-md-0 {
        grid-column-end: span 0
    }

    .offset-md-0 {
        grid-column-start: 1
    }

    .col-md-1 {
        grid-column-end: span 1
    }

    .offset-md-1 {
        grid-column-start: 2
    }

    .col-md-2 {
        grid-column-end: span 2
    }

    .offset-md-2 {
        grid-column-start: 3
    }

    .col-md-3 {
        grid-column-end: span 3
    }

    .offset-md-3 {
        grid-column-start: 4
    }

    .col-md-4 {
        grid-column-end: span 4
    }

    .offset-md-4 {
        grid-column-start: 5
    }

    .col-md-5 {
        grid-column-end: span 5
    }

    .offset-md-5 {
        grid-column-start: 6
    }

    .col-md-6 {
        grid-column-end: span 6
    }

    .offset-md-6 {
        grid-column-start: 7
    }

    .col-md-7 {
        grid-column-end: span 7
    }

    .offset-md-7 {
        grid-column-start: 8
    }

    .col-md-8 {
        grid-column-end: span 8
    }

    .offset-md-8 {
        grid-column-start: 9
    }

    .col-md-9 {
        grid-column-end: span 9
    }

    .offset-md-9 {
        grid-column-start: 10
    }

    .col-md-10 {
        grid-column-end: span 10
    }

    .offset-md-10 {
        grid-column-start: 11
    }

    .col-md-11 {
        grid-column-end: span 11
    }

    .offset-md-11 {
        grid-column-start: 12
    }

    .col-md-12 {
        grid-column-end: span 12
    }

    .offset-md-12 {
        grid-column-start: 13
    }

    .hide-md-up {
        display: none
    }
}

@media (max-width: 768px) {
    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }

    .hide-md-down {
        display: none
    }
}

@media (min-width: 992px) {
    .col-lg-0 {
        grid-column-end: span 0
    }

    .offset-lg-0 {
        grid-column-start: 1
    }

    .col-lg-1 {
        grid-column-end: span 1
    }

    .offset-lg-1 {
        grid-column-start: 2
    }

    .col-lg-2 {
        grid-column-end: span 2
    }

    .offset-lg-2 {
        grid-column-start: 3
    }

    .col-lg-3 {
        grid-column-end: span 3
    }

    .offset-lg-3 {
        grid-column-start: 4
    }

    .col-lg-4 {
        grid-column-end: span 4
    }

    .offset-lg-4 {
        grid-column-start: 5
    }

    .col-lg-5 {
        grid-column-end: span 5
    }

    .offset-lg-5 {
        grid-column-start: 6
    }

    .col-lg-6 {
        grid-column-end: span 6
    }

    .offset-lg-6 {
        grid-column-start: 7
    }

    .col-lg-7 {
        grid-column-end: span 7
    }

    .offset-lg-7 {
        grid-column-start: 8
    }

    .col-lg-8 {
        grid-column-end: span 8
    }

    .offset-lg-8 {
        grid-column-start: 9
    }

    .col-lg-9 {
        grid-column-end: span 9
    }

    .offset-lg-9 {
        grid-column-start: 10
    }

    .col-lg-10 {
        grid-column-end: span 10
    }

    .offset-lg-10 {
        grid-column-start: 11
    }

    .col-lg-11 {
        grid-column-end: span 11
    }

    .offset-lg-11 {
        grid-column-start: 12
    }

    .col-lg-12 {
        grid-column-end: span 12
    }

    .offset-lg-12 {
        grid-column-start: 13
    }

    .hide-lg-up {
        display: none
    }
}

@media (max-width: 991px) {
    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }

    .hide-lg-down {
        display: none
    }
}

*:focus,
*:focus-visible {
    outline: none
}

*::-moz-focus-inner {
    border: 0
}

*::-webkit-scrollbar {
    width: 12px;
    cursor: default
}

*::-webkit-scrollbar-thumb {
    background-color: #C2C2C2;
    border-color: #C2C2C2
}

*::-webkit-scrollbar-track {
    border-radius: 10px
}

*::-webkit-scrollbar-track-piece {
    background-color: #F1F1F1
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: "BalooTamma2", sans-serif;
    font-size: clamp(14px, 2.8vw, 16px);
    line-height: normal;
    font-weight: 400;
    background-color: #fafafa;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

a {
    text-decoration: none;
    color: #000
}

a:hover,
a:focus {
    outline: none !important;
    text-decoration: none
}

p {

    margin: 0 0 12px
}

@media (min-width: 769px) {
    p a:hover {
        position: relative
    }

    p a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px black dotted;
        content: ""
    }
}

.red {
    color: #db2f2d
}

.hide-text {
    display: inline-block;
    text-indent: -9999px
}

.hide-everything {
    display: none
}

.fixed {
    position: fixed;
    overflow: hidden
}

.relative {
    position: relative
}

.text-center {
    text-align: center
}

.no-bottom {
    margin-bottom: 0 !important
}

.no-top {
    margin-top: 0 !important
}

.inline__block {
    display: inline-block
}

.m-b_20 {
    margin-bottom: 20px
}

.m-t_20 {
    margin-top: 20px
}

@media (min-width: 576px) {
    .flex-right {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end
    }
}

.order__lg-1 {
    order: 1
}

@media (min-width: 992px) {
    .order__lg-1 {
        order: initial
    }
}

.order__lg-2 {
    order: 2
}

@media (min-width: 992px) {
    .order__lg-2 {
        order: initial
    }
}

*,
*:before,
*:after {
    box-sizing: border-box
}

:root {
    -moz-tab-size: 4;
    tab-size: 4
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

hr {
    height: 0;
    color: inherit
}

abbr[title] {
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp,
pre {
    font-family: "BalooTamma2", sans-serif;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

table {
    text-indent: 0;
    border-color: inherit
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
select {
    text-transform: none
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button
}

::-moz-focus-inner {
    border-style: none;
    padding: 0
}

:-moz-focusring {
    outline: none
}

:-moz-ui-invalid {
    box-shadow: none
}

legend {
    padding: 0
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type='search'] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

h1,
h2 {
    color: black;
    font-weight: 600;
    margin: 0
}

h1 {
    font-size: clamp(23px, 2vw, 30px);
    line-height: clamp(33px, 2vw, 40px)
}

h2 {
    font-size: clamp(15px, 2vw, 20px)
}

img {
    max-width: 100%
}

ul {
    padding: 0;
    margin: 0
}

strong,
b {
    font-weight: 600
}

.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    margin: clamp(15px, 2vw, 20px) 0;
    border-bottom: 2px #d9d9d9 dotted;
    position: relative
}

.title h1 {
    flex: 1
}

.subtitle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px
}

@media (min-width: 769px) {
    .subtitle {
        min-height: 51px
    }
}

.subtitle h1 {
    font-size: clamp(15px, 2vw, 24px);
    margin: 0
}

.no_result h3 {
    font-size: clamp(15px, 2vw, 22px);
    font-weight: 600;
}

.subtitle.--column {
    flex-direction: column
}

.subtitle.--column h2 {
    margin-bottom: 10px
}

@media (min-width: 769px) {
    .subtitle.--column {
        flex-direction: row
    }

    .subtitle.--column h2 {
        margin-bottom: 0
    }
}

.summary {
    font-size: clamp(11px, 2vw, 13px)
}

.summary img {
    float: left;
    width: 44px;
    margin-right: 10px
}

@media (min-width: 769px) {
    .summary img {
        width: 47px
    }
}

.input {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-direction: column;
    position: relative
}

.input .placeholder {
    position: absolute;
    left: 6px;
    top: -7px;
    font-size: 11px;
    line-height: 12px;
    color: #969696;
    background: #fff;
    padding: 0 5px 2px;
    border-radius: 3px
}

.input .placeholder__input {
    padding-left: 35px
}

.input .placeholder__input:focus {
    border-color: #535353
}

.input .placeholder__input:focus + .placeholder {
    color: #535353
}

.input .placeholder__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -11px
}

.input .placeholder__icon i {
    color: #3b3e3e
}

.input input.active {
    padding-top: 12px;
    font-size: 14px
}

@media (min-width: 769px) {
    .input {
        flex-direction: row
    }
}

.input label {
    font-size: 14px;
    padding-bottom: 10px;
    width: 100%;
    font-weight: 600
}

@media (min-width: 769px) {
    .input label {
        flex: 0 0 120px;
        max-width: 120px;
        padding: 0
    }
}

.input.--column label {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 5px
}

@media (min-width: 769px) {
    .input.--column {
        align-items: flex-start;
        flex-direction: column
    }
}

.input.--column-full {
    align-items: flex-start;
    flex-direction: column
}

.input.--column-full label {
    flex: initial;
    max-width: initial
}

.input.--small {
    flex-direction: column
}

.input.--small .input-label {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column
}

@media (min-width: 769px) {
    .input.--small .input-label {
        flex-direction: row
    }
}

.input.--small small {
    margin-top: 5px;
    width: 100%;
    font-size: 12px
}

@media (min-width: 769px) {
    .input.--small small {
        padding-left: 150px
    }
}

.input.--error {
    font-size: 14px;
    line-height: 20px;
    color: #db2f2d
}

.input.--error a {
    color: #db2f2d;
    border-bottom: 1px dotted transparent;
    font-weight: 600
}

.input.--error a:hover {
    border-bottom-color: red
}

.input__show--password {
    position: relative
}

.input__show--password input[type=password] {
    padding-right: 44px
}

.input__show--password .show__password {
    position: absolute;
    right: 10px;
    top: 11px;
    font-size: 20px;
    color: #adafae;
    cursor: pointer
}

.input__show--password .show__password.hidden {
    display: none
}

.checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.checkbox label {
    font-size: 14px;
    line-height: 14px
}

.checkbox input[type="checkbox"] {
    margin-right: 10px;
    position: relative;
    top: -1px
}

@media (min-width: 769px) {
    .checkbox input[type="checkbox"] {
        margin-right: 15px
    }
}

.radios {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 10px 0
}

.radio {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.radio label {
    font-size: 14px;
    line-height: 14px;
    padding-bottom: 0;
    cursor: pointer
}

.radio input[type="radio"] {
    margin-right: 10px;
    position: relative;
    top: -1px
}

input[type='file'] {
    width: 100%
}

input[type='text'],
input[type='password'],
input[type='email'],
select {
    width: 100%;
    height: 33px;
    border-radius: 3px;
    border: 1px #d9d9d9 solid;
    padding: 0 10px;
    color: #000;
    font: 14px/20px "Open Sans", Arial, Helvetica, sans-serif;
    background-color: #fafafa
}

input[type='text'].error,
input[type='password'].error,
input[type='email'].error,
select.error {
    border-color: #db2f2d;
    background-color: #fbeaea
}

input[type='text']::placeholder,
input[type='password']::placeholder,
input[type='email']::placeholder,
select::placeholder {
    color: #969696;
    opacity: 1
}

input[type='text']:-ms-input-placeholder,
input[type='password']:-ms-input-placeholder,
input[type='email']:-ms-input-placeholder,
select:-ms-input-placeholder {
    color: #969696
}

input[type='text']::-ms-input-placeholder,
input[type='password']::-ms-input-placeholder,
input[type='email']::-ms-input-placeholder,
select::-ms-input-placeholder {
    color: #969696
}

input[type='text']:-webkit-autofill,
input[type='password']:-webkit-autofill,
input[type='email']:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fafafa inset
}

input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
select:focus {
    outline: 0
}

input[type='text']:focus::placeholder,
input[type='password']:focus::placeholder,
input[type='email']:focus::placeholder,
select:focus::placeholder {
    opacity: 0
}

input[type='text']:focus:-ms-input-placeholder,
input[type='password']:focus:-ms-input-placeholder,
input[type='email']:focus:-ms-input-placeholder,
select:focus:-ms-input-placeholder {
    opacity: 0
}

input[type='text']:focus::-ms-input-placeholder,
input[type='password']:focus::-ms-input-placeholder,
input[type='email']:focus::-ms-input-placeholder,
select:focus::-ms-input-placeholder {
    opacity: 0
}

textarea {
    width: 100%;
    border: 1px #d9d9d9 solid;
    background-color: #fafafa
}

textarea:focus {
    outline: 0
}

.birth-date {
    margin: 30px 0
}

.birth-date label {
    display: block;
    font-size: 18px;
    color: #6e7273;
    margin-bottom: 10px
}

.birth-date .selects {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr
}

@media (min-width: 769px) {
    .birth-date .selects {
        grid-column-gap: 10px
    }
}

.birth-date .selects select {
    font-size: 14px;
    height: 40px;
    color: #6e7273
}

.birth-date .selects select:nth-child(2) {
    width: 100%
}

.gender {
    display: flex
}

.gender .checkbox {
    margin-right: 30px
}

.gender .checkbox label {
    color: #6e7273;
    font-size: 18px
}

.gender .checkbox input {
    margin-right: 10px
}

.captcha {
    display: flex;
    justify-content: center;
    margin-bottom: 30px
}

.contact__form input[type="text"],
.contact__form input[type="email"] {
    width: 100%
}

@media (min-width: 769px) {
    .contact__form input[type="text"],
    .contact__form input[type="email"] {
        max-width: 60%
    }
}

.contact__form textarea {
    max-height: 100px;
    margin-bottom: 0
}

input[disabled],
textarea[disabled],
select[disabled] {
    background-color: #e8e8e8;
    border-radius: 3px;
    opacity: .6;
    cursor: not-allowed;
    color: rgba(0, 0, 0, 0.5)
}

.parent-consent input {
    margin: 6px 10px 0 0;
    width: 20px;
    height: 20px
}

.parent-consent > div {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px
}

.parent-consent > div label {
    flex: 1;
    font-size: 14px
}

.parent-consent {
    color: #6e7273
}

.parent-consent.error label,
.checkbox.error label {
    color: #db2f2d
}

header {
    position: relative;
    z-index: 100;
    background-color: #ffffff;
    box-shadow: 0px 5px 14px rgb(0 0 0 / 8%);
}

header::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 53px;
    /*background-color: #2BACE2;*/
    content: "";
}

@media (min-width: 576px) {
    header::after {
        display: none
    }
}

header .container {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    flex-wrap: wrap
}

@media (min-width: 576px) {
    header .container {
        flex-wrap: initial;
    }
}

@media (min-width: 992px) {
    header .container {
    }
}

@media (min-width: 769px) {
    header .container {
        position: relative
    }

    /*header .container::after {
        position: absolute;
        right: 160px;
        top: 0;
        width: 196px;
        height: 57px;
        background: url(../images/header_circles.png) no-repeat;
        content: ""
    }*/
}

@media (min-width: 992px) {
    /* header .container::after {
         right: 190px
     }*/
}

@media (min-width: 1190px) {
    /*header .container::after {
        right: 320px
    }*/
}

header a {
    font-weight: 600;
    color: #000
}

header nav {
    min-height: 29px
}

header nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}

header nav ul li {
    list-style: none;
    margin: 0 3px;
    font-size: clamp(17px, 2vw, 19px);
    line-height: 24px;
    white-space: nowrap
}

header nav ul li:last-child {
    margin-right: 0
}

header nav ul li .icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: #6cf;
    border-radius: 50%
}

@media (min-width: 576px) {
    header nav ul li .icon-circle {
        background-color: #2BACE2;
        width: 33px;
        height: 33px
    }
}

header nav ul li .icon-circle i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    color: #fff;
    font-size: 16px
}

header nav ul li .icon-circle i.icon-messages-menu {
    position: relative;
    top: 1px;
    left: -1px
}

header nav ul li .icon-circle:hover {
    background-color: #fff
}

header nav ul li .icon-circle:hover i {
    color: #2BACE2
}

header nav ul li.notification {
    position: relative
}

header nav ul li.notification a .num__of-unread {
    position: absolute;
    top: -2px;
    right: -4px;
    color: #fff;
    background-color: #db2f2d;
    z-index: 1;
    padding: 2px 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 12px;
    border-radius: 10px;
    font-family: "BalooTamma2", sans-serif;
}

.nav__left_before {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.header-more-menu {
    position: relative;
    list-style: none;
    margin: 0 3px;
    font-size: clamp(17px, 2vw, 19px);
    line-height: 24px;
    white-space: nowrap;
}

.header-more-menu a.more {
    background: #fff;
    padding: 6px 16px;
    font-size: 16px;
    border: 1px solid #ccc;
    color: #000;
    border-radius: 36px;
    /* font-weight: 700; */
    font-weight: 500;
    text-transform: uppercase;
}


header nav.nav__left {
    order: 2;
    position: relative;
    top: 2px;
    z-index: 10;
    flex: 1;
}

header nav.nav__left li {
    margin: 0;
    padding: 0 6px;
}

header nav.nav__left li:last-child {
    margin-right: 0px
}

header nav.nav__left li a {
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all .2s linear;
    display: flex;
    align-items: center;
}

@media (min-width: 769px) {
    header nav.nav__left li a {
        padding: 6px 8px
    }

    header nav.nav__left li a:hover {
        border: 0;
        color: #535353;
    }
}

@media (min-width: 992px) {
    header nav.nav__left li a {
        padding: 6px 8px
    }
}

header nav.nav__left li.active > a {
    background: #2BACE2
}

header nav.nav__left li.active > a:hover {
    background: #1a759c
}

@media (min-width: 576px) {
    header nav.nav__left {
        width: 100%;
        order: initial;
        margin-right: 24px;
    }
}

header nav.nav__right {
    display: flex;
    width: 100%;
    order: 4;
    justify-content: center;
    position: relative;
    top: 10px;
    z-index: 10;
    margin-top: 18px
}

header nav.nav__right.user__menu {
    margin-top: 9px
}

@media (min-width: 576px) {
    header nav.nav__right {
        top: 0
    }
}

header nav.nav__right .login__link {
    position: relative;
    top: -2px;
    margin: 0 16px
}

@media (min-width: 576px) {
    header nav.nav__right .login__link {
        top: 0;
        margin: 2px 6px
    }
}

@media (min-width: 769px) {
    header nav.nav__right .login__link {
        margin: 2px 0 2px 34px
    }

    header nav.nav__right .login__link:first-child {
        margin-left: 0
    }
}

header nav.nav__right .login__link a {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700
}

header nav.nav__right .login__link a i {
    position: relative;
    top: 1px;
    margin-right: 9px
}

@media (min-width: 576px) {
    header nav.nav__right {
        width: auto;
        order: initial;
        justify-content: initial;
        margin-top: 0
    }
}

@media (min-width: 769px) {
    header nav.nav__right {
        margin-left: 15px
    }
}

@media (min-width: 992px) {
    header nav.nav__right {
        margin-left: 50px
    }
}

@media (min-width: 1190px) {
    header nav.nav__right {
        margin-left: 126px
    }
}

header nav.nav__right .user {
    display: flex;
    position: relative;
    min-width: 52px;
    position: absolute;
    left: 0;
    top: -14px
}

@media (min-width: 576px) {
    header nav.nav__right .user {
        min-width: 46px;
        position: relative;
        top: 0;
        left: 0;
        margin: 0 10px 0 0
    }
}

@media (min-width: 769px) {
    header nav.nav__right .user {
        margin: 0 20px
    }
}

header nav.nav__right .user .avatar {
    position: relative;
    width: 52px;
    height: 52px;
    left: 2px;
    border: 0
}

@media (min-width: 576px) {
    header nav.nav__right .user .avatar {
        position: absolute;
        width: 46px;
        height: 46px;
        top: -8px
    }
}

header nav.nav__right .user .avatar img {
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px #2BACE2 solid
}

@media (min-width: 576px) {
    header nav.nav__right .user .avatar img {
        height: 46px;
        border: 0
    }
}

.choices__inner {
    display: flex;
    align-items: center;
    position: relative
}

.choices__inner a:hover {
    border: none
}

.choices__inner a.icon-circle i {
    position: relative;
    top: 2px;
    font-size: 8px
}

.choices__inner--dropdown {
    position: relative;
    top: 1px;
    display: block;
    width: 1px;
    height: 1px;
    border-top: 8px solid #fff;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    transition: transform .3s ease-out
}

.choices__inner--list {
    position: absolute;
    top: 41px;
    right: -1px;
    width: 150px;
    max-height: 0;
    opacity: 0;
    transition: max-height .2s ease-out, opacity .2s ease-out;
    overflow: hidden;
    padding-top: 11px;
    z-index: 1
}

@media (min-width: 576px) {
    .choices__inner--list {
        top: 37px;
        right: -4px
    }
}

.choices__inner--list ul {
    background-color: #6cf;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    display: flex;
    position: relative;
    flex-direction: column;
    text-align: right;
    padding: 5px 0
}

.choices__inner--list ul li {
    list-style: none;
    margin: 0;
    padding: 5px 10px
}

@media (min-width: 769px) {
    .choices__inner--list ul li a:hover {
        position: relative
    }

    .choices__inner--list ul li a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #fff dotted;
        content: ""
    }
}

.choices__inner--list ul::after,
.choices__inner--list ul::before {
    bottom: 100%;
    left: 128px;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.choices__inner--list ul::after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #6cf;
    border-width: 10px;
    margin-left: -10px
}

.choices__inner--list ul::before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #fff;
    border-width: 11px;
    margin-left: -11px
}

.choices__inner.active a {
    border: 0
}

.choices__inner.active .icon-circle {
    transform: rotate(180deg)
}

.choices__inner.active .choices__inner--list {
    max-height: 200px;
    opacity: 1;
    transition: max-height .4s ease-out, opacity .2s ease-out
}

.tooltip {
    position: relative
}

.tooltip .tooltip__box {
    display: none
}

@media (min-width: 769px) {
    .tooltip .tooltip__box {
        position: absolute;
        top: 59px;
        left: 0;
        background-color: rgba(59, 62, 62, 0.8);
        padding: 10px 10px 11px;
        border-radius: 5px;
        font-size: 13px;
        line-height: 16px;
        font-weight: 400;
        font-family: "BalooTamma2", sans-serif;
        color: #fff;
        animation-duration: .5s;
        z-index: 10
    }
}

.tooltip.--cat {
    position: relative
}

.tooltip.--cat .tooltip__box {
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap
}

@media (min-width: 769px) {
    .tooltip:hover .tooltip__box {
        display: block;
        animation-name: fadeIn;
        white-space: nowrap;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.choices__inner.active.tooltip .tooltip__box {
    display: none !important
}

.mobile__search {
    display: flex;
    order: 3;
    flex-grow: 1;
    flex-basis: 0;
    justify-content: flex-end
}

@media (min-width: 576px) {
    .mobile__search {
        flex-grow: initial;
        flex-basis: initial
    }
}

@media (min-width: 769px) {
    .mobile__search {
        display: none
    }
}

.mobile__search--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #adafae;
    font-size: 22px
}

.mobile__search--icon.active .icon-search:before {
    content: ""
}

.logo {
    height: 42px;
    margin-right: 10px;
    order: 1;
    flex: 1;
}

@media (min-width: 576px) {
    .logo {
        order: initial;
        flex-grow: initial;
        flex-basis: initial;
        margin-right: 5px
    }
}

@media (min-width: 769px) {
    .logo {
        margin-right: 10px
    }
}

@media (min-width: 992px) {
    .logo {
        height: 42px
    }
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 576px) {

}

.search {
    display: none;
    position: absolute;
    bottom: -73px;
    left: 0;
    width: 100%;
    z-index: 1;
    padding: 15px;
    background-color: #ffffff;
    border-top: 1px solid #000
}

@media (min-width: 769px) {
    .search {
        position: relative;
        bottom: 0;
        padding: initial;
        width: 300px;
        display: flex;
        margin: 0 0 0 auto;
        background-color: transparent;
        border-top: 0
    }
}

.search.active {
    display: flex
}

.search input {
    border-radius: 8px;
    border-right: 0;
    padding: 0 40px 0 20px;
    height: 42px;
    font-weight: 500;
    border-color: #fff;
    color: #000;
    font-family: inherit;
    font-size: 14px;
    background-color: #fafafa;
    box-shadow: inset 0px 2px 0px #00000014, 2px 2px 6px #00000026, inset 0px -2px 12px #0000000a;
}

.search__submit {
    position: absolute;
    right: 18px;
    top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adafae;
    width: 42px;
    height: 42px;
    border: 0;
    font-size: 22px;
    background-color: transparent;
    cursor: pointer
}

.search__submit:hover i {
    color: #535353
}

@media (min-width: 769px) {
    .search__submit {
        top: 0;
        right: 5px
    }
}

.search__submit svg {
    position: relative;
    top: -2px
}

.autocomplete__items {
    position: absolute;
    top: 100%;
    left: 30px;
    right: 30px;
    margin-top: -10px
}

@media (min-width: 769px) {
    .autocomplete__items {
        margin-top: 5px;
        left: 17px;
        right: 17px
    }
}

.autocomplete__items li {
    list-style: none;
    background-color: #fff;
    border-left: 1px #d9d9d9 solid;
    border-right: 1px #d9d9d9 solid;
    border-bottom: 1px #d9d9d9 dotted
}

.autocomplete__items li.autocomplete-active a {
    background-color: #e1f0f6
}

.autocomplete__items li a {
    display: block;
    color: #535353;
    font-weight: normal;
    padding: 5px 10px;
    font-size: 14px
}

.autocomplete__items li a:hover {
    background-color: #e1f0f6
}

.autocomplete__items li:first-child {
    border-top: 1px #d9d9d9 solid
}

.autocomplete__items li:last-child {
    border-bottom: 1px #d9d9d9 solid
}

.autocomplete__items li:last-child a {
    border-bottom: 0
}

footer {
    background-color: transparent;
    margin-top: 20px;
    flex-shrink: 0
}

footer img {
    width: 110px;
    object-fit: contain;
}

@media (min-width: 769px) {
    footer img {
        width: 157px
    }
}

footer a {
    color: #535353
}

footer a:hover {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 4px;
}

footer p {
    color: #fff;
    margin: 0;
    text-align: center
}

@media (min-width: 769px) {
    footer p {
        text-align: left
    }
}

footer .footer__list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    justify-content: center
}

footer .footer__list li {
    position: relative;
    list-style: none;
    margin-left: 10px;
    padding-left: 14px
}

@media (min-width: 769px) {
    footer .footer__list li a:hover {
        position: relative
    }

    footer .footer__list li a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #fff dotted;
        content: ""
    }
}

footer .footer__list li:first-child {
    padding: 0;
    margin: 0
}

footer .footer__list li:first-child::after {
    display: none
}

footer .social {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #2BACE2;
    border-radius: 50%;
    width: 43px;
    height: 43px
}

@media (min-width: 769px) {
    footer .social {
        width: 53px;
        height: 53px
    }
}

footer .social span {
    display: none
}

footer .social [class^=icon-],
footer .social [class*=" icon-"] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff
}

footer .social:hover {
    background-color: #fff
}

footer .social:hover [class^=icon-],
footer .social:hover [class*=" icon-"] {
    color: #2BACE2
}

footer .social__list {
    display: flex;
    float: right;
    margin-right: 58px
}

@media (min-width: 769px) {
    footer .social__list {
        margin-right: 73px
    }
}

@media (min-width: 1465px) {
    footer .social__list {
        margin-right: 0
    }
}

footer .social__list li {
    list-style: none;
    margin: 0 5px
}

@media (min-width: 769px) {
    footer .social__list li {
        margin: 0 10px
    }
}

footer .social__list li:first-child {
    margin-left: 0
}

footer .footer .container {
    background-repeat: no-repeat;
    background-position: right top
}

@media (min-width: 769px) {
    footer .footer .container {
        background-position: 55px top
    }
}

footer .footer .container .grid {
    padding: 24px 0 27px
}

footer .footer .container .grid .foot__1 {
    order: 1
}

@media (min-width: 769px) {
    footer .footer .container .grid .foot__1 {
        order: 1
    }
}

footer .footer .container .grid .foot__2 {
    order: 3
}

@media (min-width: 769px) {
    footer .footer .container .grid .foot__2 {
        order: 2
    }
}

footer .footer .container .grid .foot__3 {
    order: 2
}

@media (min-width: 769px) {
    footer .footer .container .grid .foot__3 {
        order: 3
    }
}

footer .footer__nav--center {
    margin-top: 32px
}

@media (min-width: 769px) {
    footer .footer__nav--center {
        margin-top: 0
    }
}

footer .footer__nav--center li {
    font-weight: 600;
    font-size: 14px;
    margin-left: 10px;
    padding-left: 13px
}

@media (min-width: 769px) {
    footer .footer__nav--center li {
        margin-left: 20px;
        padding-left: 23px;
        font-size: 16px
    }
}

footer .footer__nav--center li::after {
    background-color: #2BACE2
}

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

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

.copy {
    background-color: #2BACE2;
    font-size: 14px;
    padding: 30px 0 20px
}

@media (min-width: 769px) {
    .copy {
        padding: 16px 0 15px
    }
}

.copy__left {
    order: 2
}

@media (min-width: 769px) {
    .copy__left {
        order: 1
    }
}

.copy__right {
    order: 1
}

.copy__right ul {
    border-bottom: 1px solid #6cf;
    padding-bottom: 18px
}

@media (min-width: 769px) {
    .copy__right {
        order: 2
    }

    .copy__right ul {
        float: right;
        border-bottom: 0;
        padding-bottom: 0
    }
}

.darktheme-teaser {
    position: fixed;
    left: 25px;
    bottom: 50px;
    z-index: 101;
    transition: all .3s ease-in-out
}

.darktheme-teaser__icon {
    display: inline-block;
    width: 53px;
    height: 53px;
    background-color: #2BACE2;
    border-radius: 50%;
    text-align: center;
    padding-top: 16px;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    position: relative;
    z-index: 1;
    transition: all .3s ease-in-out
}

.darktheme-teaser__icon:hover {
    background-color: #6cf;
    transition: all .3s ease-in-out
}

.darktheme-teaser__text {
    position: absolute;
    left: 0;
    top: 9px;
    padding: 5px 0 5px 64px;
    color: #6cf;
    font-size: 12px;
    font-weight: bold;
    width: 0px;
    overflow: hidden;
    visibility: hidden;
    background: #fff;
    border-radius: 36px;
    white-space: nowrap
}

.darktheme-teaser:hover .darktheme-teaser__text {
    width: 236px;
    visibility: visible;
    transition: all .3s ease-in-out
}

.btn {
    display: inline-block
}

.btn.--orange {
    color: #000;
    background-color: #fff;
    border: 1px solid #0000001a;
    padding: 5px 10px 6px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0px 5px 0px #0000001a;
    transition: all .3s linear;
    height: fit-content;
}

.btn.--orange:hover {
    transform: translateY(3px);
    background-color: #535353;
    box-shadow: 0px 0px 0px #00000033;
    color: #fff;
}

.btn.--red {
    color: white;
    background-color: #535353;
    border: 1px #535353 solid;
    padding: 5px 10px 6px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer
}

.btn.--red:hover {
    background-color: #dc751c;
    border-color: #535353;
    color: #535353;
}

.btn.--blue {
    color: #fff;
    background-color: #5ac6f4;
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    border: 1px #2bb5f0 solid;
    padding: 5px 10px 6px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer
}

.btn.--blue i {
    position: relative;
    top: 1px
}

.btn.--blue:hover {
    background-color: #30afe6;
    border: 1px #1da1f2 solid
}

.btn.--blue.--mail {
    position: relative;
    padding: 0 15px 0 35px
}

.btn.--blue.--mail i {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -9px
}

.btn__groups {
    display: flex;
    flex-direction: column
}

@media (min-width: 769px) {
    .btn__groups {
        flex-direction: row
    }
}

.btn__groups a,
.btn__groups .btn {
    margin-bottom: 10px
}

@media (min-width: 769px) {
    .btn__groups a,
    .btn__groups .btn {
        margin: 0 10px 0 0
    }
}

.btn__groups a:last-of-type,
.btn__groups .btn:last-of-type {
    margin: 0
}

.btn--single {
    display: flex;
    align-items: center;
    background-color: #30afe6;
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    border: 1px #1da1f2 solid;
    color: #fff;
    padding: 7px 34px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer
}

.btn--single:hover {
    background-color: #969696;
    border-color: #969696;
    color: #fff
}

.btn--single.--hollow {
    background: none;
    border: 2px #d9d9d9 solid;
    color: #969696;
    font-weight: 600
}

.btn--single.--hollow:hover {
    background-color: #969696;
    color: #fff;
    border-color: #969696
}

.btn--single.--link {
    background: none;
    color: #535353;
    padding: 0;
    border: 0;
    font-weight: 600
}

.scroll-to-top {
    position: fixed;
    width: 43px;
    height: 43px;
    background-color: #2BACE2;
    border-radius: 50%;
    right: 25px;
    bottom: 20px;
    text-align: center;
    padding-top: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s ease-out;
    z-index: 101
}

@media (min-width: 769px) {
    .scroll-to-top {
        width: 53px;
        height: 53px
    }
}

.scroll-to-top.none {
    display: none
}


@media (min-width: 769px) {
    .scroll-to-top:hover {
        background-color: #fff
    }

    .scroll-to-top:hover::after {
        color: #2BACE2
    }
}

.scroll-to-top.active {
    opacity: .85
}

.add {
    color: #fff;
    background-color: #6acf3e;
    border: 1px #6acf3e solid;
    padding: 5px 10px 6px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    margin: 7px 0 12px;
    width: 100%
}

.add:hover {
    background-color: #a6ce39;
    border: 1px #a6ce39 solid
}

.ignore,
.remove {
    display: inline-block;
    color: #fff;
    background-color: #6cf;
    font-size: 12px;
    line-height: 12px;
    padding: 3px 8px;
    border-radius: 2px
}

@media (min-width: 769px) {
    .ignore:hover,
    .remove:hover {
        background-color: #969696
    }
}

.ShareGameFacebook {
    display: inline-block;
    height: 31px;
    width: 100px;
    margin: 10px 5px 0 0
}

.ShareGameTwitter {
    display: inline-block;
    height: 31px;
    width: 88px;
    margin-top: 10px
}

@media (max-width: 1290px) {
    .categories__nav {
        position: absolute;
        left: var(--container-padding);
        right: var(--container-padding);
        z-index: 10;
        top: 57px;
        background-color: #2addde;
        border-radius: 5px;
        flex-direction: column;
        display: none;
    }

    .categories__nav .container {
        padding: 0;
        flex-direction: column
    }
}

@media (max-width: 1290px) and (min-width: 576px) {
    .categories__nav .container {
        flex-direction: row
    }
}

@media (min-width: 1291px) {
    .categories__nav {
        display: block;
        box-shadow: 0px 6px 30px rgba(0, 0, 0, .05);
        background: #ffffff;
    }
}

.categories__nav .container {
    display: flex;
    justify-content: space-between
}

@media (min-width: 1291px) {
    .categories__nav ul {
        display: flex
    }

    .categories__nav ul li {
        list-style: none
    }

    .categories__nav ul li span {
        position: relative;
        font-size: 23px
    }
}

.categories__nav a {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: black;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    padding: 15px 0 16px
}

.categories__nav--left {
    grid-template-columns: 1fr 1fr
}

@media (min-width: 576px) {
    .categories__nav--left {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (min-width: 769px) {
    .categories__nav--left {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        justify-content: space-between;
        width: calc(100% - 114px)
    }
}

@media (min-width: 769px) and (min-width: 769px) {
    .categories__nav--left li {
        flex-grow: 4
    }
}

@media (min-width: 769px) {
    .categories__nav--left li a:hover {
        background: #535353;
        color: #ffffff;
    }

    .categories__nav--left li.active a {
        color: #535353
    }
}

@media (max-width: 1290px) {
    .categories__nav--left {
        display: grid;
        flex: 1;
        column-gap: 10px;
        row-gap: 10px;
        padding: 20px
    }

    .categories__nav--left li {
        list-style: none
    }

    .categories__nav--left li a {
        display: block;
        text-align: center;
        border: 1px #0f8989 solid;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        padding: 6px 0;
        border-radius: 36px;
    }
}

@media (min-width: 1291px) {
    .categories__nav--left {
        flex: 1
    }

    .categories__nav--left li:last-child {
        max-width: 44px;
        border-right: 1px #ccc solid
    }

    .categories__nav--left li:last-child a {
        padding: 12px 0 11px
    }
}

.categories__nav--right {
    padding-left: 4px
}

.categories__nav--right li.active a {
    background-color: #fff
}

.categories__nav--right li.active a i {
    color: #80A90F
}

@media (max-width: 575px) {
    .categories__nav--right {
        border-top: 1px #80A90F solid
    }

    .categories__nav--right li {
        margin: 0 10px 0 0
    }
}

@media (min-width: 576px) and (max-width: 1290px) {
    .categories__nav--right {
        margin: 0 0 0 25px
    }

    .categories__nav--right li {
        margin: 0 0 0 10px
    }
}

@media (max-width: 1290px) {
    .categories__nav--right {
        display: flex;
        padding: 15px 20px
    }

    .categories__nav--right li {
        list-style: none
    }

    .categories__nav--right li a {
        color: #fff;
        font-size: 20px
    }
}

@media (min-width: 1291px) {
    .categories__nav--right li {
        display: flex;
        align-items: center;
        margin-left: 6px
    }

    .categories__nav--right li a {
        font-size: 16px
    }
}

.categories__nav--right .icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    background-color: #b6cfd7;
    border-radius: 50%
}

.categories__nav--right .icon-circle i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    color: #fff;
    font-size: 16px
}

.categories__nav--right .icon-circle i.f20 {
    font-size: 20px
}

.categories__nav--right .icon-circle:hover {
    background-color: #F58220
}

.categories__nav--right .icon-circle:hover i {
    color: #80A90F
}

.nav__section {
    position: relative
}

.nav__section.active .categories__nav {
    display: flex
}

.nav__section .tooltip .tooltip__box {
    top: 55px;
    white-space: nowrap
}

@media (max-width: 480px) {
    .nav__menu .span__game__title {
        max-width: 280px
    }
}

@media (max-width: 1290px) {
    .nav__menu {

    }

    .nav__menu .span__game__title,
    .nav__menu h1 {
        padding: 12px 20px;
        color: #000;
        font-size: 24px;
        text-align: center;
        line-height: 24px;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }
}

@media (min-width: 1291px) {
    .nav__menu {
        width: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
        margin: 0 0 12px;
        padding: 0 var(--container-padding);
    }

    .nav__menu h1 {
        padding: 10px 0;
        width: 100%;
        text-align: center;
    }

    .nav__menu .span__game__title {
        display: none
    }
}

.nav__menu {
    flex-direction: column;
}

.nav__menu .tag__list {
    margin: 0 !important;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0 10px;
    margin-bottom: 10px
}

@media (min-width: 769px) {
    .categories {
        display: grid;
        grid-gap: 0 var(--grid-column-gap)
    }
}

.categories h2 {
    position: absolute;
    left: 0;
    top: 0;
    padding: 13px 0 0 10px
}

@media (min-width: 769px) {
    .categories h2 {
        padding: 29px 0 0 10px
    }
}

.categories__list--nav {
    display: grid;
    grid-gap: 10px
}

@media (min-width: 769px) {
    .categories__list--nav {
        grid-gap: 15px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    }
}

.categories__box {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 10px 10px 50px;
    border-bottom: 1px #d9d9d9 dotted;
    grid-gap: 5px 10px
}

.categories__box.active {
    background: rgba(166, 206, 57, 0.1)
}

@media (min-width: 769px) {
    .categories__box {
        display: grid;
        grid-gap: 20px;
        padding: 20px 10px 20px 70px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    }
}

.games__list {
    margin-bottom: clamp(15px, 2vw, 25px)
}

.letter__index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    border-bottom: 1px #d9d9d9 dotted;
    padding-bottom: 20px;
    margin-top: 30px
}

.letter__index a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 36px;
    font-size: 20px;
    color: #101010;
    font-weight: 600
}

.letter__index a:hover {
    background: #a6ce39;
    border-radius: 3px;
    color: #fff
}

.exposed__1 {
    order: 2
}

@media (min-width: 769px) {
    .exposed__1 {
        order: 1
    }
}

.exposed__2 {
    order: 3
}

@media (min-width: 769px) {
    .exposed__2 {
        order: 2
    }
}

.exposed__3 {
    position: relative;
    margin-bottom: 30px;
    order: 1
}

@media (min-width: 769px) {
    .exposed__3 {
        order: 3;
        margin-bottom: 0
    }
}

.exposed__4 {
    order: 4
}

.exposed__5 {
    order: 5
}

.hamburger-box {
    float: right;
    width: 57px;
    height: 51px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px #ccc solid
}

@media (min-width: 1291px) {
    .hamburger-box {
        display: none
    }
}

.hamburger-box.active .hamburger span {
    transition: .25s ease-in-out
}

.hamburger-box.active .hamburger span:nth-child(1) {
    transform: rotate(45deg);
    top: 0;
    left: 3px
}

.hamburger-box.active .hamburger span:nth-child(2) {
    width: 0%;
    opacity: 0
}

.hamburger-box.active .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
    top: 16px;
    left: 3px
}

.hamburger {
    position: relative;
    width: 22px;
    height: 25px;
    transform: rotate(0deg);
    cursor: pointer
}

.hamburger span {
    display: block;
    position: absolute;
    opacity: 1;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: #fff;
    margin: 4px 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out
}

.hamburger span:nth-child(1) {
    top: 0px;
    left: 2px;
    transform-origin: left center
}

.hamburger span:nth-child(2) {
    top: 7px;
    left: 2px;
    transform-origin: left center
}

.hamburger span:nth-child(3) {
    top: 14px;
    left: 2px;
    transform-origin: left center
}

.hamburger::after {
    position: absolute;
    width: 28px;
    height: 28px;
    top: -10px;
    right: -14px;
    background-color: #ffd503;
    border-radius: 100%;
    content: "";
    animation: sk-pulse 1.2s infinite cubic-bezier(.455, .03, .515, .955)
}

@keyframes sk-pulse {
    0% {
        transform: scale(0)
    }
    100% {
        transform: scale(1);
        opacity: 0
    }
}

.title.active .category__menu {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    transition: max-height .8s cubic-bezier(.33, 1, .68, 1), opacity .2s ease-out, visibility 0s linear
}

.long__wide h2 {
    margin-bottom: 30px
}

.long__2column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px
}

.top__three {
    padding: 24px 20px 32px;
    background-color: #E7F2F7;
    border-radius: 4px;
    margin: 18px 0
}

@media (min-width: 769px) {
    .top__three {
        padding: 34px 40px 62px;
        margin: 32px 0
    }
}

.top__three h2 {
    font-size: 22px;
    font-weight: 700;
    padding-bottom: 16px;
    margin-bottom: 25px;
    border-bottom: 1px #D4D4D4 dotted
}

@media (min-width: 769px) {
    .top__three h2 {
        font-size: 26px;
        margin-bottom: 50px
    }
}

.top__three--games {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 0 14px
}

@media (min-width: 576px) {
    .top__three--games {
        flex-direction: row
    }
}

.top__three .game__number {
    padding-left: 60px;
    margin-bottom: 20px
}

@media (min-width: 576px) {
    .top__three .game__number {
        padding-left: clamp(30px, 5vw, 77px);
        margin-right: 20px;
        margin-bottom: 0
    }
}

.top__three .game__number:last-child {
    margin-right: 0
}

.top__three .game__number img {
    width: 300px;
    height: auto;
    border-radius: 3px
}

.top__three .game__number.--first {
    background-size: auto 90%
}

.top__three .game__number.--second {
    background-size: auto 90%
}

.top__three .game__number.--third {
    background-size: auto 90%
}

.game__card {
    display: inline-grid;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    align-content: start;
    border: 1px solid #0000001a;
    background: #fff;
    text-align: center;
    box-shadow: 0px 5px 0px #0000001a;
    color: #000;
    transition: all .3s linear;

}

.game__card img {
    width: 100%;
    border-radius: 3px 3px 0 0;
    object-fit: cover;
}

.game__card .h3,
.game__card h3 {
    display: inline-block;
    font-size: clamp(13px, 2vw, 15px);
    line-height: 18px;
    margin: 0;
    padding: 10px;
    font-weight: 600;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.game__card p {
    padding: 0 10px 10px;
    margin: 0;
    font-size: 12px;
    line-height: 18px
}


.game__card.--info::after {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 22px;
    text-align: center;
    font-size: 16px;
    line-height: 12px;
    color: #fff;
    background-color: #db2f2d;
    content: "!";
    border-radius: 0 3px 0 0
}

@media (min-width: 769px) {
    .game__card.--info::after {
        width: 30px;
        height: 28px;
        font-size: 18px
    }
}


.game__card.--blue {
    background-color: #6cf;
    color: #fff
}

.game__card.--blue:hover {
    background-color: #2BACE2
}

.game__card.--blue h3 {
    position: relative;
    padding-right: 37px
}

.game__card.--blue h3::before {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
    color: #fff;
    font-weight: normal;
    font-size: 20px;
}

.game__card.--exposed {
    background-color: #535353;
    color: #fff;
    height: initial
}

.game__card.--exposed:hover {
    background-color: #535353;
    color: #535353
}

.game__card.--exposed.--bookmark::before {
    color: #db2f2d
}

.game__card.--search-card {
    display: flex;
    flex-direction: row;
    background-color: #eaf4f8;
    padding: 15px
}

@media (min-width: 769px) {
    .game__card.--search-card {
        padding: 30px
    }
}

.game__card.--search-card img {
    max-width: clamp(150px, 15vw, 200px);
    border-radius: 3px 0 0 3px
}

@media (min-width: 992px) {
    .game__card.--search-card img {
        max-width: clamp(144px, 15vw, 200px)
    }
}

.game__card.--search-card .search-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.game__card.--search-card .search-card__body h3 {
    white-space: break-spaces;
    font-size: 15px
}

.game__card.--search-card .search-card__body p {
    display: none
}

@media (min-width: 769px) {
    .game__card.--search-card .search-card__body p {
        display: block;
        margin-bottom: 10px
    }
}

.game__card .remove {
    margin: 10px;
    width: min-content
}

.--category {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: #000;
    transition: all .3s linear;
    box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.18);
}

.--category:hover {
    transform: translateY(3px);
    box-shadow: 0px 0px 0px #00000033;
}

@media (min-width: 769px) {
    .--category {
        min-height: 44px;
        background-color: #fff;
        color: #000
    }

    .--category:hover {
        background-color: #535353;
        color: #fff;
    }
}

.--category .cat__img {
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 8px;
}

@media (min-width: 769px) {
    .--category .cat__img {
        display: flex
    }
}

.--category img {
    border-radius: 3px 0 0 3px
}

@media (min-width: 769px) {
    .--category img {
        display: block
    }
}

.--category .game__thumb--header {
    display: none
}

@media (min-width: 769px) {
    .--category .game__thumb--header {
        display: flex;
        flex: 0 0 63px;
        max-width: 63px
    }
}

.--category h3 {
    font-size: 14px;
    line-height: 18px;
    font-weight: normal;
    padding: 5px 10px;
    text-transform: lowercase
}

@media (min-width: 769px) {
    .--category h3 {
        font-weight: 600;
        padding: 10px;
        text-transform: none
    }
}

.game__card--medals {
    display: flex;
    flex-direction: column
}

.game__card--medals li {
    list-style: none
}

.game__card--medal {
    display: flex;
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 3px
}

@media (min-width: 769px) {
    .game__card--medal {
        flex-direction: column
    }
}

@media (min-width: 992px) {
    .game__card--medal {
        flex-direction: row
    }
}

.game__card--medal .game__card--medal-img::after {
    right: 0;
    left: initial
}

@media (min-width: 768px) and (max-width: 992px) {
    .game__card--medal.--disabled img {
        width: 100%;
        height: auto
    }
}

.game__card--medal.--disabled .game__card--medal-img::after {
    padding-bottom: 4px;
    background-color: #db2f2d;
    content: "!";
    border-radius: 0 0 0 4px
}

.game__card--medal-img {
    display: flex;
    position: relative;
    flex: 0 0 150px;
    max-width: 150px;
    overflow: hidden
}

@media (min-width: 769px) {
    .game__card--medal-img {
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 992px) {
    .game__card--medal-img {
        flex: 0 0 150px;
        max-width: 150px
    }
}


@media (min-width: 768px) and (max-width: 992px) {
    .game__card--medal-img::after {
        border-radius: 0 3px 0 0
    }
}

@media (min-width: 769px) {
    .game__card--medal-img::after {
        width: 30px;
        height: 28px;
        font-size: 18px
    }
}

.game__card--medal-img img {
    width: 150px;
    max-width: initial;
    border-radius: 3px 0 0 3px;
    object-fit: cover
}

@media (min-width: 769px) {
    .game__card--medal-img img {
        width: 100%;
        border-radius: 3px 3px 0 0
    }
}

@media (min-width: 992px) {
    .game__card--medal-img img {
        width: 150px;
        border-radius: 3px 0 0 3px
    }
}

.game__card--medal-body {
    flex: 1;
    padding: 8px 10px
}

.game__card--medal-body a {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 16px
}

@media (min-width: 769px) {
    .game__card--medal-body a {
        font-size: clamp(14px, 2vw, 16px)
    }
}

.game__card--medal.--badge p {
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600
}

.game__card--medal.--name {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 16px
}

.game__card--with-medal {
    display: flex;
    background-color: #fff;
    padding: 15px
}

.game__card--with-medal a {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px
}

.game__card--with-medal-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1
}

.game__card--with-medal-body .medal {
    position: relative;
    left: -10px
}

.game__card--with-medal-body .user {
    display: flex;
    align-items: center
}

.game__card--with-medal-body .user img {
    margin-right: 10px;
    border-radius: 50%
}

@media (min-width: 769px) {
    .game__card--with-medal-body .user a:hover {
        position: relative
    }

    .game__card--with-medal-body .user a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.game__card--with-medal-game {
    display: flex;
    width: 75px;
    flex-direction: column
}

.game__card--with-medal-game img {
    width: 100%;
    height: auto;
    margin-bottom: 5px
}

.game__score--login {
    background-color: #6cf;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 15px;
    padding: 12px 12px;
    margin-top: 15px
}

@media (max-width: 768px) {
    .game__score--login {
        max-width: 300px !important
    }
}

@media (min-width: 769px) {
    .game__score--login {
        margin-top: -6px;
        padding: 17px 18px;
        border-radius: 0 0 3px 3px;
        max-width: initial
    }
}

.game__score--login strong {
    font-size: 16px;
    font-weight: 700;
    margin-right: 20px
}

@media (min-width: 769px) {
    .game__score--login strong {
        font-size: 20px;
        margin-right: 40px
    }
}

.game__score--login p {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    color: #fff
}

.game__score--login p a {
    color: #fff;
    font-weight: 600
}

.game__score--login p a:hover::after {
    border-color: #fff
}

.--disabled {
    pointer-events: none;
    cursor: default;
    color: #000
}

.--disabled img {
    opacity: .5;
    filter: grayscale(100%)
}

.swf {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    background-color: #db2f2d;
    font-size: 11px;
    line-height: 12px;
    padding: 2px 4px
}

.medal {
    display: flex;
    overflow: hidden
}

.medal i {
    margin: 4px 10px 0 0;
    font-size: 45px
}

.medal small {
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 600
}

.medal p {
    font-size: 12px;
    margin: 0
}

.medal.--gold i {
    color: gold
}

.medal.--silver i {
    color: silver
}

.medal.--bronze i {
    color: #cd7f32
}

.deprecated__game {
    max-width: 200px;
    margin: 0 auto
}

.deprecated__game h2 {
    text-align: center;
    margin-bottom: 20px
}

.categories__list,
.categories__box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px
}

@media (min-width: 769px) {
    .categories__list,
    .categories__box {
        grid-gap: 15px
    }
}

.categories__list .--category,
.categories__box .--category {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 8px;
    color: black;
    background-color: #fff;
    box-shadow: 0px 5px 0px #0000001a;
    padding: 8px 10px;
    transition: all .3s linear;
    border: 1px solid #0000001a;
}

@media (min-width: 769px) {
    .categories__list .--category,
    .categories__box .--category {
        /*min-height: 68px*/
    }
}

.categories__list .--category:hover,
.categories__box .--category:hover {
    transform: translateY(3px);
    box-shadow: 0px 0px 0px #00000033;
}

.categories__list .--category .cat__img,
.categories__box .--category .cat__img {
    display: flex;
    justify-content: center;
    align-items: center
}

@media (min-width: 769px) {
    .categories__list .--category .cat__img,
    .categories__box .--category .cat__img {
    }
}

.categories__list .--category .cat__img img,
.categories__box .--category .cat__img img {
    display: block;
    object-fit: contain;
}

@media (min-width: 769px) {
    .categories__list .--category .cat__img img,
    .categories__box .--category .cat__img img {
    }
}

.categories__list .--category h3,
.categories__box .--category h3 {
    font-size: 14px;
    line-height: 18px;
    padding: 5px 10px;
    text-transform: uppercase;
    flex: 1;
    font-weight: 600;
    overflow: initial;
    white-space: initial;
    text-overflow: initial
}

.categories__list .--category h3::after,
.categories__box .--category h3::after {
    position: absolute;
    width: 7px;
    height: 6px;
    right: 10px;
    top: 50%;
    margin-top: -1px;
    translate: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' viewBox='0 0 7 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.11416 2.54757C6.25707 2.60711 6.25707 2.80956 6.11416 2.8691L0.241148 5.31619C0.126429 5.36399 0 5.2797 0 5.15542V0.261244C0 0.136965 0.12643 0.052679 0.241148 0.100478L6.11416 2.54757Z' fill='%230072BC'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    content: ""
}

@media (min-width: 769px) {
    .categories__list .--category h3,
    .categories__box .--category h3 {
        padding: 15px 24px 15px 10px;
        text-transform: none
    }
}

.comments {
    margin-bottom: clamp(20px, 4vw, 30px)
}

.comment {
    position: relative;
    display: flex;
    padding: 10px 0 10px 10px;
    background-color: #fff;
    border-bottom: 1px #d9d9d9 dotted;
    flex-direction: column
}

@media (min-width: 769px) {
    .comment {
        padding: 10px 30px 10px 10px
    }
}

.comment .delete {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 8px;
    line-height: 8px;
    background-color: #6cf;
    color: #fff;
    padding: 3px
}

.comment .delete:hover {
    background-color: #969696
}

@media (min-width: 769px) {
    .comment {
        flex-direction: row
    }
}

.comment:nth-child(2n+2) {
    background-color: #e1f0f6
}

.comment__user {
    display: flex;
    align-items: flex-start;
    flex: 1;
    max-width: 100%;
    font-size: 14px
}

@media (min-width: 769px) {
    .comment__user {
        flex: 0 0 150px;
        max-width: 150px
    }
}

@media (min-width: 992px) {
    .comment__user {
        flex: 0 0 180px;
        max-width: 180px
    }
}

.comment__user img {
    border-radius: 50%;
    margin-right: 15px
}

@media (min-width: 769px) {
    .comment__user a:nth-child(2):hover {
        position: relative
    }

    .comment__user a:nth-child(2):hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.comment__user--item {
    display: flex;
    align-items: center;
    color: #889BA5;
    font-weight: 600
}

.comment__content {
    width: 100%;
    padding-left: 47px
}

@media (min-width: 769px) {
    .comment__content {
        padding-left: 20px
    }
}

@media (min-width: 992px) {
    .comment__content {
        max-width: 70%
    }
}

.comment__content p {
    margin: 0;
    word-break: break-word
}

.comment__content p a {
    font-weight: 600
}

.comment__content time {
    font-size: 11px;
    opacity: .7
}

.comment__add {
    width: 100%;
    padding-bottom: 5px;
    padding-right: 15px
}

.comment__add.--footer {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.comment__add--elements {
    display: flex
}

.comment__add--elements a {
    display: flex;
    margin-left: 10px
}

.comment__add--elements a:first-child {
    margin-left: 0
}

.comment__add--elements i {
    font-size: 18px;
    line-height: 18px
}

.no-comment {
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px #d9d9d9 dotted;
    font-size: clamp(14px, 2vw, 16px)
}

@media (min-width: 769px) {
    .m-bottom {
        margin-bottom: 40px
    }
}

.exposed__slider {
    height: 100%
}

.exposed__slider--wrapper {
    position: relative;
    height: 100%
}

.exposed__slider--wrapper .arrow:hover {
    cursor: pointer;
}

.exposed__slider--wrapper ul {
    display: flex;
    height: 100%
}

.exposed__slider--wrapper ul li {
    display: none;
    list-style: none;
    width: 100%
}

.exposed__slider--wrapper ul li.active {
    display: block
}

.exposed__slider--wrapper .game__card {
    display: flex;
    position: relative;
    height: 100%;
    border-radius: 6px
}

.exposed__slider--wrapper .game__card img {
    object-fit: cover;
    border-radius: 3px
}

.exposed__slider--wrapper .game__card--cover {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 0 0 3px 3px
}

.exposed__slider--wrapper .game__card--cover .btn {
    margin-right: 10px
}

.exposed__slider--navigation {
    position: absolute;
    margin-top: 10px;
    width: 100%
}

.exposed__slider--navigation ul {
    display: flex;
    justify-content: center
}

.exposed__slider--navigation ul li {
    list-style: none;
    margin: 0 4px
}

.exposed__slider--navigation ul li a {
    position: relative;
    top: 8px;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    text-indent: -9999px;
    background-color: #535353;
    opacity: .5
}

.exposed__slider--navigation ul li.active a {
    opacity: 1
}

.exposed__slider--prev {
    position: absolute;
    left: 0;
    top: 44%;
    margin-top: -20px;
    width: 30px;
    height: 40px;
    color: #fff;
    font-size: 40px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1
}

@media (min-width: 992px) {
    .exposed__slider--prev {
        margin-top: -30px;
        width: 40px;
        height: 60px
    }
}

@media (min-width: 992px) {
    .exposed__slider--prev::after {
        font-size: 40px
    }
}

.exposed__slider--next {
    position: absolute;
    right: 0;
    top: 44%;
    margin-top: -20px;
    width: 30px;
    height: 40px;
    color: #fff;
    font-size: 40px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1
}

@media (min-width: 992px) {
    .exposed__slider--next {
        margin-top: -30px;
        width: 40px;
        height: 60px
    }
}


@media (min-width: 992px) {
    .exposed__slider--next::after {
        font-size: 40px
    }
}

.tab-login {
    padding: 10px 15px;
    background-color: #fff
}

.tab-login p {
    font-weight: 600;
    margin: 0
}

.tab-login p i {
    position: relative;
    top: 2px;
    font-size: 18px;
    margin-right: 5px
}

.pagination {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: bold
}

@media (min-width: 769px) {
    .pagination {
        font-size: 28px
    }
}

.pagination li {
    list-style: none;
}

.pagination li a {
    padding: 0 2px
}

@media (min-width: 769px) {
    .pagination li a:hover {
        position: relative
    }

    .pagination li a:hover::after {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: -2px;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.pagination li.active {
    position: relative
}

.pagination li.active::after {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -5px;
    border-bottom: 1px #535353 solid;
    content: ""
}

.aggregate__rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: clamp(30px, 4vw, 50px)
}

.aggregate__rating p {
    margin: 0;
    line-height: 18px;
    font-weight: 800;
    opacity: .4
}

.show__rating--box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 50px;
    background-color: #E7F2F7;
    padding: 12px 18px
}

.show__rating--box span {
    color: #F4771D;
    font-weight: 800;
    font-size: 15px
}

.show__rating {
    display: flex;
    margin-right: 20px
}

.show__rating li {
    list-style: none;
    margin: 0 3px;
    font-size: 22px
}

.show__rating li i {
    color: #F4771D
}

.cross__links {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px #d9d9d9 solid
}

.cross__links.no-border {
    border-top: 0
}

.cross__links ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.cross__links ul li {
    list-style: none;
    font-size: 13px;
    margin: 0 5px
}

.cross__links ul li a {
    font-weight: 600
}

@media (min-width: 769px) {
    .cross__links ul li a:hover {
        position: relative
    }

    .cross__links ul li a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.tabs__small {
    display: flex;
    align-self: flex-start
}

@media (min-width: 992px) {
    .tabs__small {
        align-self: flex-end
    }
}

.tabs__small li {
    list-style: none;
    font-size: clamp(12px, 2vw, 13px);
    font-weight: 600;
    margin-left: 2px;
    padding: 0 5px;
    max-height: 24px
}

.tabs__small li:first-child {
    margin-left: 0
}

@media (min-width: 769px) {
    .tabs__small li a:hover {
        position: relative
    }

    .tabs__small li a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.tabs__small li.active {
    background-color: #F58220;
    color: #fff;
    padding: 0 10px;
    border-radius: 60px
}

.tabs__small li.active a {
    color: #fff
}

.tabs__small li.active a:hover::after {
    display: none
}

.modal {
    width: 100%;
    max-width: 350px;
    margin: 15px;
    background-color: #fff
}

.modal .hidden {
    display: none
}

.modal .active {
    display: block
}

.modal__container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    display: none
}

.modal__container.active {
    display: flex
}

.modal__header {
    border-bottom: 1px #d9d9d9 dotted;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px
}

.modal__header h2 {
    font-size: 18px
}

.modal__header a {
    color: #000
}

.modal__body {
    padding: 15px
}

.modal__body label {
    display: block;
    font-size: 11px;
    margin-bottom: 5px
}

.modal__body input {
    margin-bottom: 10px
}

.modal__body textarea {
    height: 70px
}

.modal__body small {
    display: block;
    font-size: 11px;
    line-height: 20px;
    margin-bottom: 20px
}

.modal__body .thumbs li {
    margin-right: 0
}

.modal.no-title .modal__header {
    justify-content: flex-end;
    border-bottom: 0;
    padding-bottom: 0
}

.emojis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0;
    margin: 0
}

.emojis li {
    list-style: none;
    margin: 5px 0;
    text-align: center
}

@media (min-width: 769px) {
    .emojis li a:hover {
        position: relative
    }

    .emojis li a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.breadcrumbs {
    display: flex;
    padding: 2px 15px;
    background-color: #e1f0f6;
    border-radius: 3px;
}


@media (min-width: 1291px) {
    /*.breadcrumbs {*/
    /*    position: absolute;*/
    /*    right: 0;*/
    /*    top: 0;*/
    /*    margin-bottom: 0*/
    /*}*/
}

.breadcrumbs li {
    list-style: none;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    padding-left: 10px;
    position: relative
}

.breadcrumbs li::after {
    position: absolute;
    left: -2px;
    top: 0;
    font-size: 12px;
    font-weight: 600;
    content: "/"
}

.breadcrumbs li:first-child {
    padding-left: 0;
    margin-left: 0
}

.breadcrumbs li:first-child::after {
    display: none
}

@media (min-width: 769px) {
    .breadcrumbs li a:hover {
        position: relative
    }

    .breadcrumbs li a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.--bread {
    margin-bottom: 55px
}

@media (min-width: 769px) {
    .--bread {
        margin-bottom: clamp(15px, 2vw, 20px)
    }
}

.--bread .breadcrumbs {
    position: absolute;
    bottom: -45px
}

@media (min-width: 769px) {
    .--bread .breadcrumbs {
        position: initial;
        bottom: initial
    }
}

.bc_no-bottom .breadcrumbs {
    margin-bottom: 0
}

.popup__error {
    position: fixed;
    width: 300px;
    left: 50%;
    top: 66px;
    padding: 10px;
    margin-left: -150px;
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 600;
    background: rgba(219, 47, 45, 0.9);
    color: #fff;
    text-align: center;
    transition: opacity .3s ease-in-out;
    z-index: 10001;
    border-radius: 5px
}

@media (min-width: 769px) {
    .popup__error {
        width: 380px;
        margin-left: -190px
    }
}

.popup__error.fade-out {
    opacity: 0
}

.popup__ok {
    position: fixed;
    width: 300px;
    left: 50%;
    top: 66px;
    padding: 10px;
    margin-left: -150px;
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 600;
    background: rgba(106, 207, 62, 0.9);
    color: #fff;
    text-align: center;
    transition: opacity .3s ease-in-out;
    z-index: 10001;
    border-radius: 5px
}

.popup__ok.fade-out {
    opacity: 0
}

@media (min-width: 769px) {
    .popup__ok {
        width: 380px;
        margin-left: -190px
    }
}

.beeper {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10000;
    width: 230px
}

.beeper .BeeperItem {
    display: flex;
    width: 100%;
    padding: 5px;
    border: 1px solid #1da1f2;
    border-radius: 3px;
    background-color: #fff;
    text-decoration: none;
    font-weight: normal;
    color: #3b3e3e
}

.beeper img {
    width: 32px;
    height: 32px;
    float: left;
    border-radius: 2px;
    position: relative;
    margin: 0 12px 0 0
}

.beeper span {
    flex: 1;
    font-size: 14px
}

.emoji {
    position: relative;
    top: 10px;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.article__section {
    background: #fff;
    padding: 25px;
    margin: 0 0 30px 0
}

.article__section .m_bottom {
    margin-bottom: 30px
}

.article__section .article__gallery {
    margin-bottom: 25px
}

.article__section .article__gallery picture {
    width: 100%;
    margin: 0
}

@media (min-width: 992px) {
    .article__section .article__gallery {
        margin-bottom: 40px
    }
}

@media (min-width: 992px) {
    .article__section {
        padding: 40px;
        margin: 0 0 40px 0
    }
}

@media (min-width: 992px) {
    .article__section .pr-50 {
        padding-right: 50px
    }
}

.article__section.--single h2 {
    font-size: 26px;
    line-height: 36px;
    color: #101010;
    margin-bottom: 30px
}

.article__section.--single h3 {
    display: inline-block;
    width: 100%;
    font-size: 20px;
    line-height: 36px;
    color: #000;
    font-weight: bold;
    margin: 0 0 20px
}

.article__section.--single .faq h3 {
    padding: 15px 75px 20px 0;
}

.article__section.--single .faq .faq-box h4 {
    font-weight: bold;
    margin: 0 0 15px;
    font-size: 16px;
    color: #256782
}

.article__section.--single .tips h3 {
    padding: 15px 75px 20px 0;
}

.article__section.--single .tips .tip h4 {
    font-weight: bold;
    margin: 0 0 15px;
    font-size: 16px;
    color: #256782
}

.article__section article picture {
    position: relative;
    width: 100%;
    margin: 0 0 30px
}

.article__section article picture img {
    max-width: 100%;
    height: auto
}

.article__section article picture p {
    font-size: 15px;
    font-style: italic
}

.article__section article picture p .small {
    font-size: 13px
}

.article__section article picture.full {
    display: block;
    margin: 0 0 15px
}

@media (min-width: 992px) {
    .article__section article picture.full {
        margin: 0 0 25px
    }
}

@media (min-width: 992px) {
    .article__section article picture {
        width: 338px;
        float: left;
        margin: 7px 35px 15px 0
    }

    .article__section article picture.full {
        width: 100%
    }
}

.article__section article h1 {
    font-size: clamp(23px, 5vw, 26px);
    line-height: clamp(33px, 5vw, 35px);
    color: #101010;
    margin-bottom: 33px
}

.article__section article h2 {
    display: inline-block;
    width: 100%;
    font-size: 20px;
    line-height: 36px;
    color: #000;
    font-weight: bold;
    margin: 0 0 20px
}

.article__section article p {
    font-size: 15px;
    line-height: 26px;
    color: #000;
    margin-bottom: 25px
}

@media (min-width: 992px) {
    .article__section article p {
        margin-bottom: 40px
    }
}

.article__section article p.summary {
    font-size: 16px;
    line-height: 28px;
    color: #000;
    font-weight: normal;
    padding-bottom: 36px;
    margin-bottom: 40px;
    border-bottom: 2px #ececec solid
}

@media (min-width: 992px) {
    .article__section article p.summary {
        font-size: 18px;
        line-height: 30px
    }
}

.article__section article p.small__title {
    margin-bottom: 20px
}

.article__section article ul {
    margin-bottom: 40px
}

.article__section article ul li {
    font-size: 15px;
    line-height: 26px;
    color: #000;
    margin-bottom: 14px;
    list-style: none;
    padding-left: 16px;
    position: relative
}

.article__section article ul li:last-child {
    margin-bottom: 0
}

.article__section article ul li::after {
    position: absolute;
    left: 2px;
    top: 11px;
    width: 5px;
    height: 5px;
    background: #000;
    border-radius: 50%;
    content: ""
}

.article__section article .tips ul li,
.article__section article .faq ul li {
    margin-bottom: 0
}

.article__section article .tips ol,
.article__section article .faq ol {
    padding-left: 0;
    list-style: decimal inside
}

.article__section article .tips ol li,
.article__section article .faq ol li {
    font-size: 15px;
    line-height: 26px
}

@media (min-width: 769px) {
    .article__section article .tips ol li a:hover:hover,
    .article__section article .faq ol li a:hover:hover {
        position: relative
    }

    .article__section article .tips ol li a:hover:hover::after,
    .article__section article .faq ol li a:hover:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.article__section article .tips.snake li,
.article__section article .faq.snake li {
    padding-left: 0
}

.article__section article .tips.snake li:nth-child(2n+2),
.article__section article .faq.snake li:nth-child(2n+2) {
    padding-left: 26px
}

.article__section article .tips.snake li::after,
.article__section article .faq.snake li::after {
    display: none
}

.article__section article .how__its__done {
    border-top: 2px #ececec solid;
    border-bottom: 2px #ececec solid;
    padding: 40px 0 0;
    margin-bottom: 40px;
    color: #004D81
}

.article__section article .how__its__done h3,
.article__section article .how__its__done p {
    color: #004D81
}

.article__section article .how__its__done ul li {
    color: #004D81
}

.article__section article .how__its__done ul li::after {
    background-color: #004D81
}

.article__section article .article__game.--bottom {
    margin-bottom: 25px
}

@media (min-width: 992px) {
    .article__section article .article__game.--bottom {
        margin-bottom: 40px
    }
}

.article__section article .article__game iframe {
    width: 100%
}

@media (max-width: 680px) {
    .article__section article .article__game iframe {
        height: 360px
    }
}

.article__section article .article__game iframe.tetris {
    height: 642px
}

.article__section article .article__game iframe.mahjong {
    height: 510px
}

.article__section article .article__game iframe.tictactoe {
    height: 580px
}

@media (min-width: 992px) {
    .article__section article .article__game iframe.tictactoe {
        height: 610px
    }
}

.article__section article .article__game--bg {
    background-color: #F6F6F6;
    padding: 15px;
    text-align: center
}

@media (min-width: 992px) {
    .article__section article .article__game--bg {
        padding: 30px
    }
}

.article__section article .article__game--bg p {
    margin: 0
}

.article__section .author__info--user p {
    margin-bottom: 0
}

.article__section .author__info--boxes ul {
    margin: 0
}

.article__section .author__info--boxes ul li {
    padding: 0
}

.tips {
    background: #e1f0f6;
    padding: 30px 25px;
    border-radius: 3px;
    margin-bottom: 30px
}

.tips.--grey {
    background: #f6f6f6
}

@media (min-width: 992px) {
    .tips {
        padding: 30px 40px
    }
}

.tips h2 {
    padding: 15px 75px 20px 0;
}

.tips .tip h3 {
    font-weight: bold;
    margin: 0 0 15px;
    font-size: 16px;
    color: #256782
}

.tips .tip p {
    margin-bottom: 20px
}

.faq {
    background: #f6f6f6;
    padding: 30px 25px;
    border-radius: 3px;
    margin-bottom: 30px
}

@media (min-width: 992px) {
    .faq {
        padding: 30px 40px
    }
}

.faq h2 {
    padding: 15px 75px 20px 0;
}

.faq .faq-box h3 {
    font-weight: bold;
    margin: 0 0 15px;
    font-size: 16px;
    color: #256782
}

.faq .faq-box p {
    margin-bottom: 20px
}

.top__10 {
    border-radius: 3px;
    margin-top: 30px;
}

.top__10 h2 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 30px;
    background-size: 60px
}

@media (min-width: 769px) {
    .top__10 h2 {
        font-size: 26px;
        line-height: 36px;
        margin-bottom: 60px;
        background-size: 70px
    }
}

.top__10 ul li {
    margin-bottom: 0
}

.top__10 ol {
    padding-left: 0;
    list-style: decimal inside
}

@media (min-width: 769px) {
    .top__10 ol {
        column-count: 2;
        column-gap: 150px
    }
}

.top__10 ol li {
    font-weight: bold;
    font-size: 16px;
    line-height: 18px;
    color: #101010;
    margin-bottom: 20px
}

@media (min-width: 769px) {
    .top__10 ol li {
        font-size: 20px;
        line-height: 22px;
        margin-bottom: 30px
    }
}

@media (min-width: 769px) {
    .top__10 ol li a:hover:hover {
        position: relative
    }

    .top__10 ol li a:hover:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

@media (min-width: 769px) {
    .full-size__tip-faq .tips {
        margin-top: 40px;
        margin-right: 20px
    }

    .full-size__tip-faq .faq {
        margin-top: 40px;
        margin-left: 20px
    }
}

.done {
    background: #FFF0D3;
    padding: 30px 25px 20px;
    border-radius: 3px;
    margin-bottom: 30px
}

.done.--green {
    display: inline-block;
    width: 100%;
    background: #5a5
}

.done.--green picture {
    width: 100%;
    margin: 0
}

.done.--green h2,
.done.--green p {
    color: #fff
}

@media (min-width: 769px) {
    .done {
        padding: 30px 40px 20px
    }
}

.done.no-bottom {
    margin-bottom: 0
}

.done h2 {
    padding: 15px 95px 20px 0;
}

.author {
    display: grid;
    padding: 40px 30px;
    background: #F9FAFB
}

@media (min-width: 769px) {
    .author {
        display: flex
    }
}

.author__left--img {
    margin-right: 26px;
    flex: 0 0 56px;
    max-width: 56px;
    text-align: center
}

.author__left--img img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px #d9d9d9 solid
}

.author__left--img h4 {
    margin: 0;
    font-size: 12px;
    font-weight: normal;
    background: #e1f0f6;
    border-radius: 20px
}

.author__info {
    display: flex;
    flex: 1;
    grid-column: span 2
}

@media (min-width: 769px) {
    .author__info {
        grid-column: initial
    }
}

.author__info--user h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 5px
}

.author__info--user p {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    opacity: .5
}

.author__info--boxes {
    display: flex;
    justify-content: center;
    grid-column: span 3;
    margin: 20px 0 0
}

@media (min-width: 769px) {
    .author__info--boxes {
        grid-column: initial;
        margin: 29px 0 0;
        padding-left: 12px;
        justify-content: initial
    }
}

.author__info--boxes ul {
    display: flex;
    margin: 0;
    padding: 0
}

.author__info--boxes ul li {
    list-style: none;
    padding-left: 0;
    margin: 0 3px
}

@media (min-width: 769px) {
    .author__info--boxes ul li {
        margin: 0 0 0 12px
    }
}

.author__info--boxes ul li::after {
    display: none
}

.author__info--boxes ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2BACE2;
    font-size: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px #d9d9d9 solid;
    background-color: #fff
}

.author__info--boxes ul li a:hover {
    background: #2BACE2;
    color: #fff
}

.author.gamefooter {
    display: flex;
    padding: 10px 20px;
    align-items: center
}

.author.gamefooter .author__left h4 {
    margin: 0;
    font-size: 14px;
    font-weight: normal;
    color: #969696
}

.author.gamefooter .author__info--user h3 {
    margin: 0 0 0 10px;
    font-size: 14px
}

@media (min-width: 769px) {
    .author.gamefooter .author__info--user h3 a:hover {
        position: relative
    }

    .author.gamefooter .author__info--user h3 a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.h1__title {
    margin: 30px 0 20px
}

@media (min-width: 992px) {
    .h1__title {
        margin: 40px 0
    }
}

.h1__title h1 {
    font-size: clamp(23px, 3vw, 36px);
    line-height: clamp(33px, 3vw, 46px);
    color: #101010
}

.article__section.about-us {
    margin: 0
}

.article__section.about-us .logo__img {
    display: block;
    margin-bottom: 40px;
    height: 80px;
    width: 100%
}

.article__section.about-us .logo__img.igre123 {
    background-size: 100% 100%
}

.article__section.about-us .logo__img.play123 {
    background-size: 100% 100%
}

.article__section.about-us .logo__img.giochi123 {
    background-size: 100% 100%
}

.article__section.about-us .logo__img.igrice123 {
    background-size: 100% 100%
}

.article__section.about-us .logo__img.jeux123 {
    background-size: 100% 100%
}

.article__section.about-us .logo__img.jogos123 {
    background-size: 100% 100%
}

.article__section.about-us .logo__img.juegos123 {
    background-size: 100% 100%
}

.article__section.about-us .logo__img.spelletjes123 {
    background-size: 100% 100%
}

.article__section.about-us .logo__img.spiele123 {
    background-size: 100% 100%
}

.article__section.about-us hr {
    border: 0;
    border-bottom: 2px #e1f0f6 solid;
    margin: 0 0 30px
}

.article__section.about-us article h2 {
    font-size: 20px;
    line-height: 27px;
    font-weight: bold;
    margin-bottom: 20px
}

.article__section.about-us article p {
    margin-bottom: 30px
}

.article__section.about-us article .about-us__summary {
    border-bottom: 2px #ececec solid;
    margin-bottom: 50px
}

.article__section.about-us article .about-us__summary p {
    font-size: 16px;
    line-height: 28px;
    color: #000;
    font-weight: normal;
    padding-bottom: 0
}

@media (min-width: 992px) {
    .article__section.about-us article .about-us__summary p {
        font-size: 18px;
        line-height: 30px
    }
}

.article__section.about-us article .contact__box {
    position: relative;
    border-radius: 5px;
    padding: 30px;
    margin-bottom: 40px;
    overflow: hidden;
    background-size: initial;
    background-position: left -70%
}

@media (min-width: 576px) {
    .article__section.about-us article .contact__box {
        background-size: auto 100%;
        background-position: bottom right
    }
}

@media (min-width: 992px) {
    .article__section.about-us article .contact__box {
        background-position: bottom right -50%
    }
}

@media (min-width: 769px) {
    .article__section.about-us article .contact__box {
        padding: 40px
    }
}

.article__section.about-us article .contact__box--content {
    position: relative;
    z-index: 1;
    margin-top: 330px
}

@media (min-width: 576px) {
    .article__section.about-us article .contact__box--content {
        max-width: 45%;
        margin-top: 0
    }
}

@media (min-width: 769px) {
    .article__section.about-us article .contact__box--content {
        max-width: 50%
    }
}

.article__section.about-us article .contact__box::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 86%;
    margin-bottom: -252px;
    width: 505px;
    height: 505px;
    border-radius: 100%;
    box-shadow: 0px 200px 0px 700px #e1f0f6
}

@media (min-width: 576px) {
    .article__section.about-us article .contact__box::before {
        left: 296px;
        bottom: 50%
    }
}

.article__section.about-us article .contact__box p:last-of-type {
    margin: 0
}

.article__section.about-us article .contact__box img {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%
}

.category-reviews {
    margin-top: 30px
}

@media (min-width: 769px) {
    .category-reviews {
        margin-top: 40px
    }
}

.game-reviews {
    border-bottom: 1px solid #D8D7DC;
    margin-bottom: 40px
}

@media (min-width: 769px) {
    .game-reviews {
        margin-bottom: 70px
    }
}

.game-review {
    display: flex;
    margin: 40px 0
}

@media (min-width: 769px) {
    .game-review {
        margin: 30px 0
    }
}

.game-review-summary {
    font-size: 18px;
    line-height: 24px;
    margin-top: 0;
    margin-bottom: 16px
}

@media (min-width: 769px) {
    .game-review-summary {
        font-size: 20px;
        line-height: 28px
    }
}

.game-review-date {
    font-size: clamp(13px, 2vw, 14px);
    line-height: clamp(22px, 2vw, 24px);
    opacity: .7
}

.game-review-meta {
    display: flex;
    margin-bottom: 16px;
    align-items: center
}

@media (min-width: 769px) {
    .game-review-meta {
        margin-bottom: 24px
    }
}

.game-review-meta .aggregate__rating,
.game-review-meta .show__rating--box {
    margin: 0
}

.game-review-meta .show__rating--box {
    margin-right: 20px;
    padding: 6px 10px
}

.game-review-meta .show__rating--box span {
    font-size: 12px
}

.game-review-meta .show__rating {
    margin-right: 10px
}

.game-review-meta .show__rating li {
    font-size: 12px;
    margin: 0 1px
}

.game-review-body {
    display: flex;
    flex-direction: column
}

@media (min-width: 769px) {
    .game-review-body {
        flex-direction: row
    }
}

.game-review__left {
    margin-right: 16px;
    flex: 0 0 60px;
    max-width: 100%
}

@media (min-width: 769px) {
    .game-review__left {
        flex: 0 0 80px;
        max-width: 100%;
        margin-right: 26px
    }
}

.game-review__left img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px #d9d9d9 solid;
    margin-bottom: 10px
}

@media (min-width: 769px) {
    .game-review__left img {
        width: 80px;
        height: 80px;
        margin-bottom: 16px
    }
}

.game-review__left h4 {
    display: inline-block;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    background: #e1f0f6;
    border-radius: 20px;
    text-align: center;
    padding: 0 12px
}

.game-reviewer-name {
    font-size: 14px;
    margin: 0 0 8px
}

@media (min-width: 769px) {
    .game-reviewer-name {
        font-size: 18px
    }
}

.game-review-text {
    color: #3b3e3e;
    font-size: clamp(13px, 2vw, 14px);
    line-height: clamp(22px, 2vw, 24px)
}

.game-review-text .emoji {
    width: 20px;
    height: 17px;
    top: 3px
}

.game-review-image {
    text-align: center;
    padding: 20px;
    background-color: #e1f0f6;
    border-radius: 8px
}

@media (min-width: 769px) {
    .game-review-image {
        text-align: left;
        padding: 0;
        background-color: transparent;
        border-radius: 0
    }
}

.game-review-image img {
    width: auto;
    max-width: 100%;
    border-radius: 8px;
    max-height: 235px
}

@media (min-width: 769px) {
    .game-review-image img {
        margin-left: 30px;
        max-width: 300px
    }
}

.your__scores {
    display: flex;
    align-items: center;
    background-color: #E4EFF5;
    border-radius: 4px;
    margin-bottom: clamp(20px, 4vw, 30px);
    padding: 32px 20px;
    flex-direction: column
}

@media (min-width: 769px) {
    .your__scores {
        flex-direction: row;
        padding: 15px clamp(20px, 2vw, 30px)
    }
}

.your__scores--title {
    width: 100%
}

@media (min-width: 769px) {
    .your__scores--title {
        width: auto
    }
}

.your__scores h3 {
    font-size: clamp(20px, 2vw, 30px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 30px
}

@media (min-width: 769px) {
    .your__scores h3 {
        margin: 0;
        padding-right: 30px;
        max-width: 600px
    }
}

.your__scores h3 span {
    color: #E6883C;
    position: relative
}

.your__scores h3 span::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='9' viewBox='0 0 320 9' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M316.166 8.0066C214.692 3.42016 77.301 4.66033 4.73916 6.12725C2.74457 6.16757 0.997341 5.30418 0.836623 4.19881C0.675905 3.09344 2.16255 2.16467 4.15715 2.12435C76.7771 0.656256 214.519 -0.592203 316.44 4.01443C318.44 4.10481 319.999 5.07175 319.923 6.17416C319.848 7.27657 318.165 8.09698 316.166 8.0066Z' fill='%23E6883C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100%;
    left: 0;
    bottom: -1px;
    position: absolute;
    width: 100%;
    height: 9px;
    content: ""
}

.your__scores .img {
    width: 100%
}

@media (min-width: 769px) {
    .your__scores .img {
        width: auto
    }
}

.your__scores .img img {
    width: 100%
}

@media (min-width: 769px) {
    .your__scores .img img {
        max-width: 309px
    }
}

.your__scores .btns {
    display: flex;
    flex-direction: column;
    width: 100%
}

@media (min-width: 769px) {
    .your__scores .btns {
        flex-direction: row;
        width: auto
    }
}

.your__scores .btn {
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 800;
    color: #fff;
    background-color: #6cf;
    padding: 12px 24px;
    border-radius: 50px;
    white-space: nowrap;
    width: 100%;
    margin-top: 16px
}

.your__scores .btn:hover {
    background-color: #2BACE2
}

@media (min-width: 769px) {
    .your__scores .btn {
        margin-left: 25px;
        margin-top: 0;
        width: auto
    }
}

.your__scores .btn:first-child {
    margin-left: 0
}

.your__scores .btn i {
    margin-right: 10px
}

.page {
    margin: 15px 0;
    padding: 15px;
    background-color: #fff
}

.page h2 {
    margin-bottom: 10px
}

.page h3 {
    margin: 0 0 15px;
    color: #535353;
}

.page p a {
    font-weight: 600
}

.page p:last-child {
    margin-bottom: 0
}

.page ul {
    margin: 0 0 24px;
    padding: 0
}

.page ul li {
    list-style: none;
    font-size: 14px;
    margin-bottom: 5px
}

.page__aside {
    display: flex;
    margin: 15px 0;
    flex-direction: column
}

@media (min-width: 769px) {
    .page__aside {
        flex-direction: row
    }
}

.page__aside--wrap {
    flex: 1
}

.page__aside .pagination {
    margin-bottom: 20px
}

.banner {
    text-align: center;
    width: 100%;
    max-width: 100%;
    height: 280px;
    max-height: 280px;
    margin-bottom: 30px
}

@media (min-width: 769px) {
    .banner {
        height: 90px;
        max-height: 90px
    }
}

.login {
    margin: 0 auto;
    margin-top: clamp(15px, 3vw, 30px);
    margin-bottom: clamp(15px, 3vw, 30px)
}

@media (min-width: 769px) {
    .login {
        max-width: 310px
    }
}

.login h1,
.login h2 {
    text-align: center;
    margin-bottom: 30px
}

.login h2 {
    font-size: clamp(23px, 2vw, 30px);
    line-height: clamp(33px, 2vw, 40px)
}

.login p {
    text-align: center;
    font-size: clamp(14px, 2vw, 16px);
    line-height: clamp(26px, 2vw, 28px);
    margin-bottom: 20px
}

.login small {
    display: block;
    color: #969696;
    font-size: 14px;
    text-align: center;
    margin-top: 30px
}

.login small a {
    color: #535353;
    font-weight: 600
}

@media (min-width: 769px) {
    .login small a:hover {
        position: relative
    }

    .login small a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #969696 dotted;
        content: ""
    }
}

.login .btn {
    width: 300px;
    height: 42px;
    font-size: 18px;
    margin: 0 auto;
    display: flow-root
}

.login .input input {
    height: 42px;
    font-size: 18px
}

.login .input input.active {
    padding-top: 12px;
    font-size: 14px
}

.login .checkbox {
    margin-bottom: 30px
}

.login .or {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin: 15px 0
}

.your-mail {
    background-color: #F3F9FC;
    padding: 2px 10px;
    font-weight: 600;
    color: #535353
}

.member__counter {
    font-weight: 600
}

.fb-login-button.fb_iframe_widget {
    text-align: center;
    display: block;
    margin-bottom: 20px
}

.fb-signup__progress {
    margin-top: 15px;
    width: 100%;
    background-color: #fff
}

.fb-signup__progress .fb-signup__bar {
    width: 0%;
    height: 10px;
    background-color: #a6ce39;
    border-radius: 3px
}

.google-signin-button {
    width: 300px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    margin: 0 auto;
    position: relative
}

.google-signin-button span {
    font-size: 16px;
    margin-left: 24px;
    font-weight: 600
}

.google-signin-button .google-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.links {
    text-align: center;
    padding: 0
}

.links li {
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px
}

@media (min-width: 769px) {
    .links li a:hover {
        position: relative
    }

    /*.links li a:hover::after {*/
    /*    position: absolute;*/
    /*    left: 0;*/
    /*    bottom: -2px;*/
    /*    width: 100%;*/
    /*    border-bottom: 1px #535353 dotted;*/
    /*    content: ""*/
    /*}*/
}

.register__box {
    max-height: 615px;
    visibility: visible;
    overflow: hidden;
    transition: all .3s ease-out .6s;
    text-align: center
}

.register__box.--hidden {
    max-height: 0;
    visibility: hidden;
    transition: all .3s ease-out
}

.register__form {
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all .6s ease-out
}

.register__form.--active {
    max-height: 1000px;
    visibility: visible;
    transition: all .6s ease-out .3s
}

.main__register {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%
}

.page__register {
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    max-width: 468px
}

.page__register .login__logo {
    text-align: center;
    margin-bottom: 20px
}

.page__register .login__logo .logo {
    margin: 0
}

.page__register form {
    width: 100%;
    max-width: 300px;
    margin: 0 auto
}

.mailbox {
    border-top: 1px #D4D4D4 dotted;
    padding-top: 25px;
    margin-top: 22px
}

.mailbox-item {
    display: grid;
    align-items: center;
    justify-content: center;
    background-color: #F3F9FC;
    border-radius: 10px;
    text-align: center;
    height: 70px
}

.mailbox-item:hover {
    background-color: #e1f0f6
}

.value-proposition__box {
    font-size: clamp(23px, 2vw, 29px);
    line-height: clamp(33px, 3vw, 40px);
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px
}

.value-proposition__box span {
    display: block;
    font-weight: normal;
    text-align: center;
    font-size: clamp(14px, 2vw, 16px);
    line-height: clamp(26px, 2vw, 28px);
    margin: 20px 0
}

.value-proposition__box .my__points {
    font-size: 21px;
    font-weight: 600;
    color: #9CC732;
    margin-bottom: 30px
}

.value-proposition__box .my__points strong {
    font-size: 30px;
    font-weight: bold;
    position: relative;
    top: 3px
}

.value-proposition__box .my__points strong i {
    font-size: 25px;
    margin-right: 5px
}

.i__have__account {
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    max-width: 468px;
    background: #E4EFF5;
    padding: 15px;
    text-align: center;
    font-size: 14px;
    border-radius: 5px
}

.i__have__account a {
    font-weight: 600
}

.blocked__content {
    text-align: center
}

.blocked__content p {
    font-size: 20px;
    font-weight: 600
}

.pacman {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #F2D648;
    position: relative;
    margin: 20px 0
}

.pacman__eye {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 20px;
    right: 40px;
    background: #333
}

.pacman__mouth {
    background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 74%, 44% 48%, 100% 21%);
    animation-name: eat;
    animation-duration: .7s;
    animation-iteration-count: infinite
}

.pacman__food {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #6cf;
    border-radius: 50%;
    top: 40%;
    left: 120px;
    animation-name: food;
    animation-duration: .7s;
    animation-iteration-count: infinite
}

@keyframes eat {
    0% {
        clip-path: polygon(100% 74%, 44% 48%, 100% 21%)
    }
    25% {
        clip-path: polygon(100% 60%, 44% 48%, 100% 40%)
    }
    50% {
        clip-path: polygon(100% 50%, 44% 48%, 100% 50%)
    }
    75% {
        clip-path: polygon(100% 59%, 44% 48%, 100% 35%)
    }
    100% {
        clip-path: polygon(100% 74%, 44% 48%, 100% 21%)
    }
}

@keyframes food {
    0% {
        transform: translateX(0);
        opacity: 1
    }
    100% {
        transform: translateX(-50px);
        opacity: 0
    }
}

.sticky__header--fullsize {
    display: none
}

.sticky__header--fullsize img {
    width: 150px
}

.single__game {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}

.single__game noindex {
    width: 100%;
}

.single__game .tooltip__box {
    top: 55px
}

@media (min-width: 1520px) {
    .single__game .tooltip__box {
        white-space: nowrap
    }
}

.single__game .--shrink,
.single__game .--resize,
.single__game .--resize__unsiggned {
    display: none;
    width: 46px;
    height: 46px;
    background-color: #2BACE2
}

.single__game .--shrink i,
.single__game .--resize i,
.single__game .--resize__unsiggned i {
    color: #fff;
    font-size: 20px
}

@media (min-width: 769px) {
    .single__game .--shrink,
    .single__game .--resize,
    .single__game .--resize__unsiggned {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        border-radius: 50%
    }
}

.single__game .unsiggned {
    background-color: #cdcccc;
    cursor: pointer
}

@media (min-width: 769px) {
    .single__game.--active {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: 100;
        border-radius: 0;
        padding: 0;
        z-index: 10000
    }

    .single__game.--active .--resize {
        z-index: 1
    }

    .single__game.--active iframe {
        width: 100%;
        height: calc(100% - 77px);
        position: absolute;
        left: 0;
        top: 77px
    }

    .single__game.--active .col-6 {
        display: none
    }

    .single__game.--active .sticky__header--fullsize {
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        padding: 19px 26px 18px;
        background-color: #6cf
    }

    .single__game.--active .sticky__header--fullsize img {
        display: block
    }
}

.single__game .grid {
    grid-gap: 10px var(--grid-column-gap)
}

.single__game iframe {
    max-width: 100%;
    border-radius: 5px;
    width: 100%;
}

.single__game--desktop {
    display: none
}

@media (min-width: 769px) {
    .single__game--desktop {
        display: block
    }
}

.single__game--mobile {
    display: block;
    max-width: 300px
}

.single__game--mobile img {
    width: 100%;
    height: auto;
    border-radius: 3px
}

.single__game--mobile .btn {
    margin-top: 5px;
    width: 100%;
    padding: 10px 0 12px;
    font-size: 20px
}

@media (min-width: 769px) {
    .single__game--mobile {
        display: none
    }
}

.title__game {
    display: flex;
    align-items: center;
    padding: 10px 0;
    margin: clamp(10px, 2vw, 15px) 0 10px;
    border-bottom: 2px #d9d9d9 dotted;
    position: relative
}

@media (min-width: 1291px) {
    .title__game {
        padding: 0;
        margin: 0 0 30px;
        border-bottom: 0
    }
}

.title__game--menu {
    color: #3b3e3e;
    font-weight: 600;
    font-size: clamp(18px, 2vw, 30px);
    line-height: clamp(33px, 2vw, 40px)
}

@media (min-width: 1291px) {
    .title__game--menu {
        display: none
    }
}

.share {
    position: relative;
    top: 2px;
    margin-left: 10px;
    height: 20px;
    font-size: 20px
}

.share:hover {
    color: #dc751c
}

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

.add-to-favorites {
    float: left;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33px;
    height: 33px;
    color: #fff;
    background-color: #cdcccc;
    border-radius: 50%;
    font-size: 16px
}

@media (min-width: 769px) {
    .add-to-favorites {
        width: 46px;
        height: 46px;
        font-size: 20px
    }
}

.add-to-favorites.active {
    background-color: #F58220
}

@media (min-width: 769px) {
    .vote a {
        width: 46px;
        height: 46px;
        font-size: 20px
    }
}

.vote a.vote-up.active {
    background-color: #a6ce39
}

.vote a.vote-down.active {
    background-color: #db2f2d
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.achievements {
    position: relative
}

.achievements h2 {
    border: 0;
    margin-bottom: 0
}

.achievements .update__score {
    position: absolute;
    right: 0;
    top: 0;
    animation: rotating 2s linear infinite
}


.achievements__tab {
    background-color: #fff;
    border-radius: 4px
}

@media (min-width: 992px) {
    .achievements__tab {
        padding: 0 10px
    }
}

.achievements__tab.--single {
    border: 0;
    padding: 15px
}

.achievements__tab.--signed {
    display: grid;
    grid-template-columns: 1fr
}

@media (min-width: 992px) {
    .achievements__tab.--signed {
        grid-template-columns: 2fr 1fr
    }
}

@media (min-width: 992px) {
    .achievements__tab--left {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
}

.achievements__tab--box {
    padding: 25px 20px 20px
}

@media (min-width: 992px) {
    .achievements__tab--box {
        padding: 20px 20px 20px
    }
}

.achievements__tab--box h3 {
    margin: 0;
    padding: 0;
    font-size: clamp(18px, 3vw, 20px);
    font-weight: 600
}

.achievements__tab--title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

.achievements__tab--title .tabs__small {
    width: auto
}

.achievements__tab--body {
    display: none
}

.achievements__tab--body.active {
    display: block
}

.time-zone {
    display: flex;
    padding: 0 15px 25px;
    font-size: 14px;
    font-weight: 600
}

.time-zone i {
    font-size: 20px;
    margin-right: 5px;
    color: #535353
}

.best-players {
    border-top: 1px #d9d9d9 dotted
}

.best-players li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    position: relative;
    padding: 2px 5px;
    border-bottom: 1px #d9d9d9 dotted
}

.best-players li::before {
    position: absolute;
    left: -5px;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: #F3F3F3;
    content: "";
    border-radius: 3px 0 0 3px
}

.best-players li:nth-child(1)::before {
    background: #F8D848
}

.best-players li:nth-child(1).selected {
    background-color: #F8D848
}

.best-players li:nth-child(1).selected a {
    color: #3b3e3e
}

.best-players li:nth-child(1).selected::before {
    background-color: #F8D848
}

.best-players li:nth-child(1).selected::after {
    background-color: #F8D848
}

.best-players li:nth-child(1).selected .position {
    color: #000
}

.best-players li:nth-child(1).selected .scores {
    color: #000
}

.best-players li:nth-child(2)::before {
    background: silver
}

.best-players li:nth-child(2).selected {
    background-color: silver
}

.best-players li:nth-child(2).selected a {
    color: #3b3e3e
}

.best-players li:nth-child(2).selected::before {
    background-color: silver
}

.best-players li:nth-child(2).selected::after {
    background-color: silver
}

.best-players li:nth-child(3)::before {
    background: #C28242
}

.best-players li:nth-child(3).selected {
    background-color: #C28242
}

.best-players li:nth-child(3).selected a {
    color: #3b3e3e
}

.best-players li:nth-child(3).selected::before {
    background-color: #C28242
}

.best-players li:nth-child(3).selected::after {
    background-color: #C28242
}

@media (min-width: 769px) {
    .best-players li:hover {
        background-color: #e1f0f6
    }

    .best-players li:hover::before {
        background-color: #e1f0f6
    }

    .best-players li:hover::after {
        position: absolute;
        right: -5px;
        top: 0;
        width: 5px;
        height: 100%;
        background-color: #e1f0f6;
        content: "";
        border-radius: 0 3px 3px 0
    }
}

.best-players li .position {
    width: 40px;
    padding: 0 5px;
    margin-left: -5px
}

.best-players li.no-scores {
    padding: 10px 0;
    font-size: 16px;
    justify-content: center;
    margin-bottom: 15px
}

.best-players li.no-scores::before,
.best-players li.no-scores::after {
    display: none
}

.best-players li.no-scores:hover {
    background: initial
}

.best-players li.no-scores:hover::before,
.best-players li.no-scores:hover::after {
    display: none
}

.best-players li .user {
    flex: 1
}

.best-players li .user a {
    font-weight: 500
}

.best-players li .scores {
    padding: 0 5px
}

.best-players li.selected {
    background-color: #e1f0f6
}

.best-players li.selected::before {
    background-color: #e1f0f6
}

.best-players li.selected::after {
    position: absolute;
    right: -5px;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: #e1f0f6;
    content: "";
    border-radius: 0 3px 3px 0
}

.my-achievements {
    background-color: #e1f0f6;
    border-radius: 3px;
    padding: 15px
}

.my-achievements__user {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 100%;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px
}

.my-achievements__user img {
    margin-right: 15px;
    width: 45px;
    height: 45px;
    border-radius: 50%
}

@media (min-width: 769px) {
    .my-achievements__user a:nth-child(2):hover {
        position: relative
    }

    .my-achievements__user a:nth-child(2):hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.my-achievements__user--item {
    display: flex;
    align-items: center
}

.my-achievements__points h4 {
    font-size: 15px;
    margin-bottom: 15px
}

.score__card {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 5px;
    font-size: 20px;
    border-radius: 4px
}

.score__card i {
    color: #6cf;
    opacity: .7;
    margin-right: 20px
}

.score__card--body {
    display: flex;
    align-items: center
}

.score__card--body small {
    font-size: 12px;
    line-height: 12px;
    order: 1;
    text-transform: uppercase;
    font-size: 16px;
    margin-left: 10px
}

@media (min-width: 992px) {
    .score__card--body small {
        font-size: 19px
    }
}

.score__card--body p {
    font-size: 20px;
    margin: -2px 0 0 10px;
    font-weight: 800;
    font-size: 20px;
    line-height: 20px
}

@media (min-width: 992px) {
    .score__card--body p {
        margin: -2px 0 0 17px;
        font-size: 24px;
        line-height: 24px
    }
}

.score__card.--medal {
    overflow: hidden;
    padding: 12px 24px;
    border-radius: 60px;
    font-size: 30px;
    margin-bottom: 15px
}

.score__card.--medal:last-child {
    margin-bottom: 0
}

.score__card.--medal i {
    margin: 0 5px 0 0;
    opacity: 1;
    font-size: 32px;
    padding-right: 15px
}

.score__card.--medal.--gold {
    background-color: #FFF8DB
}

.score__card.--medal.--gold i {
    color: gold;
    border-right: 1px dotted gold
}

.score__card.--medal.--silver {
    background-color: #F3F3F3
}

.score__card.--medal.--silver i {
    color: silver;
    border-right: 1px dotted silver
}

.score__card.--medal.--bronze {
    background-color: #f5e0cb
}

.score__card.--medal.--bronze i {
    color: #cd7f32;
    border-right: 1px dotted #cd7f32
}

.game__subtitle {
    display: flex;
    justify-content: flex-start;
    gap: 18px;
    align-items: center;
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 800;
}

.game__subtitle.no-bottom {
    margin-bottom: 0
}

.game__section {
    margin-bottom: clamp(20px, 4vw, 50px)
}

.game__section .games__list {
    margin-top: 20px
}

.game__section.--text > div {
    position: relative;
    color: #3b3e3e;
    font-size: clamp(13px, 2vw, 14px);
    line-height: clamp(22px, 2vw, 24px);
    padding-left: 30px;
    font-weight: 600
}


.game__section.description {
    background-size: 45px;
    padding: 20px;
    border-radius: 4px
}

@media (min-width: 992px) {
    .game__section.description {
        padding: 40px;
        background-position: right 40px top 30px;
        background-size: 65px
    }
}

.game__section.description h2 {
    font-size: clamp(18px, 3vw, 20px);
    margin-bottom: 30px;
    font-weight: bold;
    color: #000
}

.game__section.description h1 {
    color: #535353;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px
}

@media (min-width: 992px) {
    .game__section.description h1 {
        font-size: 28px
    }
}

.game__section.description div {
    font-size: 14px;
    position: relative;
    padding-left: 46px;
    margin-top: 20px
}


@media (min-width: 769px) {
    .game__section.description div::after {
        width: 36px;
        height: 36px;
        font-size: 16px
    }
}

.game__section.description div span {
    font-weight: bold
}

.game__section.how-to-play {
    background-size: 45px;
    padding: 20px;
    border-radius: 4px
}

@media (min-width: 992px) {
    .game__section.how-to-play {
        padding: 40px;
        background-position: right 40px top 30px;
        background-size: 65px
    }
}

.game__section.how-to-play h2 {
    font-size: clamp(18px, 3vw, 20px);
    margin-bottom: 30px;
    font-weight: bold;
    color: #000
}

.game__section.how-to-play p {
    padding-right: 110px
}

.game__section.how-to-play ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    flex-direction: column
}

@media (min-width: 769px) {
    .game__section.how-to-play ul {
        flex-direction: row;
        border-bottom: 1px #D4D4D4 dotted
    }
}

.game__section.how-to-play ul li {
    list-style: none;
    position: relative;
    padding: 10px 0;
    margin-right: 20px;
    position: relative;
    border-bottom: 1px #D4D4D4 dotted
}

@media (min-width: 769px) {
    .game__section.how-to-play ul li {
        border-bottom: 0
    }
}

.game__section.how-to-play ul li .keys {
    display: flex;
    align-items: center;
    color: #256782;
    font-weight: 600;
    font-size: 15px
}

@media (min-width: 769px) {
    .game__section.how-to-play ul li .keys {
        border-right: 1px #D4D4D4 dotted;
        padding: 0 16px 0 0
    }
}

.game__section.how-to-play ul li .keys img {
    margin-right: 10px
}

.game__section.how-to-play ul li .keys span {
    margin-left: 10px
}

.game__section.how-to-play ul li:first-child .keys {
    padding-left: 0
}

.game__section.how-to-play ul li:last-child .keys {
    border-right: 0
}

.game__thumb {
    display: flex;
    align-items: center;
    border: 1px #d9d9d9 solid;
    border-radius: 3px;
    background-color: #fff;
    min-width: 200px;
    height: 42px;
    white-space: nowrap
}

.game__thumb--header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #a6ce39;
    color: #fff;
    font-size: 26px;
    width: 50px;
    height: 100%
}

@media (min-width: 769px) {
    .game__thumb--header {
        width: 56px
    }
}

.game__thumb--header.--blue {
    background-color: #1877f2
}

.game__thumb--header img {
    height: 40px
}

.game__thumb--body {
    flex: 1;
    padding: 0 10px;
    font-size: 13px;
    text-align: center;
    font-weight: 600
}

@media (min-width: 769px) {
    .game__thumb:hover {
        background-color: #e1f0f6
    }
}

.game__thumb.--more {
    justify-content: center;
    min-width: initial;
    padding: 10px;
    font-size: 13px;
    font-weight: 600
}

.game__thumb.--more i {
    font-size: 24px;
    margin-left: 8px
}

.game__thumb.--with-icon {
    border: 1px #e1f0f6 solid;
    background: linear-gradient(91deg, #E1F0F6 .37%, #fff 90%);
    color: #535353
}

@media (min-width: 769px) {
    .game__thumb.--with-icon:hover {
        background: #e1f0f6
    }
}

.game__thumb.--with-icon .game__thumb--header {
    background: none;
    flex: 0 0 44px;
    max-width: 44px;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (min-width: 769px) {
    .game__thumb.--with-icon .game__thumb--header {
        flex: 0 0 64px;
        max-width: 64px
    }
}

.game__thumb.--with-icon .game__thumb--header img {
    display: block;
    width: 32px
}

@media (min-width: 769px) {
    .game__thumb.--with-icon .game__thumb--header img {
        width: 42px
    }
}

.game__thumb.--with-icon .game__thumb--body {
    position: relative;
    font-size: 14px;
    line-height: 18px;
    padding: 5px 10px;
    text-transform: lowercase;
    flex: 1;
    font-weight: 600;
    overflow: initial;
    white-space: initial;
    text-overflow: initial
}

.game__thumb.--with-icon .game__thumb--body::after {
    position: absolute;
    width: 7px;
    height: 6px;
    right: 10px;
    top: 50%;
    margin-top: -1px;
    translate: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' viewBox='0 0 7 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.11416 2.54757C6.25707 2.60711 6.25707 2.80956 6.11416 2.8691L0.241148 5.31619C0.126429 5.36399 0 5.2797 0 5.15542V0.261244C0 0.136965 0.12643 0.052679 0.241148 0.100478L6.11416 2.54757Z' fill='%230072BC'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    content: ""
}

@media (min-width: 769px) {
    .game__thumb.--with-icon .game__thumb--body {
        padding: 15px 24px 15px 10px;
        text-transform: none
    }
}

.thumbs {
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: 1fr
}

@media (min-width: 576px) {
    .thumbs {
        display: flex;
        flex-wrap: wrap;
        grid-column-gap: initial;
        grid-template-columns: 1fr 1fr
    }
}

.thumbs li {
    list-style: none;
    margin-bottom: 10px
}

@media (min-width: 576px) {
    .thumbs li {
        margin-right: clamp(10px, 2vw, 20px)
    }
}

.thumbs li.last {
    margin-right: 0
}

@media (min-width: 576px) {
    .thumbs li.last {
        grid-column: 1/3;
        grid-column: initial
    }
}

.thumbs.--share li:nth-child(2) {
    margin-right: 0
}

.game__section.description ul li {
    list-style-position: inside;
    font-size: clamp(13px, 2vw, 14px)
}

.profil {
    margin: 30px 0
}

.profil__header {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    text-align: center;
    border-radius: 5px;
    overflow: hidden
}

.profil__header.--administrator {
    margin-bottom: 20px
}

.profil__header.--administrator .profil__header--user {
    background: none
}

.profil__header.--administrator .profil__header--user .d-top {
    background: none
}

.profil__header.--administrator .profil__header--img {
    background: none
}

.profil__header.--administrator .profil__social--links li a {
    background-color: #2BACE2;
    color: #fff
}

.profil__header.--administrator .profil__social--links li a:hover {
    background-color: #fff;
    color: #2BACE2
}

.profil__header.--administrator h1,
.profil__header.--administrator h2 {
    color: #fff
}

.profil__header.--administrator hr {
    border-top: 0;
    border: 1px #fff dotted
}

.profil__header.--administrator p {
    color: #fff
}

.profil__header.--administrator .btn {
    background-color: #2BACE2;
    color: #fff;
    margin-top: 20px
}

.profil__header.--administrator .btn:hover {
    background-color: #fff;
    color: #2BACE2
}

@media (min-width: 992px) {
    .profil__header {
        flex-direction: row;
        text-align: left;
        margin-bottom: 40px
    }
}

.profil__header--img {
    position: relative;
    width: 100%;
    height: 85px;
    background-size: 300px
}

.profil__header--img .avatar {
    position: absolute;
    left: 50%;
    margin-left: -70px;
    bottom: -70px;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (min-width: 992px) {
    .profil__header--img .avatar {
        position: relative;
        left: 0;
        margin-left: 0;
        bottom: 0;
        width: 220px;
        height: 220px
    }
}

@media (min-width: 769px) {
    .profil__header--img {
        height: 150px
    }
}

@media (min-width: 992px) {
    .profil__header--img {
        width: 300px;
        height: 400px;
        padding: 90px 40px;
        background-size: auto;
        bakcgkround-position: right top
    }
}

@media (min-width: 1180px) {
    .profil__header--img {
        width: 400px;
        height: 400px;
        padding: 90px
    }
}

.profil__header--img .status {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #F5E9EF;
    color: #A83874;
    font-size: 20px
}

@media (min-width: 992px) {
    .profil__header--img .status {
        right: 23px;
        bottom: 23px
    }
}

@media (min-width: 1180px) {
    .profil__header--img .status {
        right: 0;
        bottom: 0;
        width: 72px;
        height: 72px;
        font-size: 32px
    }
}

.profil__header img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 10px #fafafa solid;
    object-fit: cover
}

@media (min-width: 992px) {
    .profil__header img {
        border: 12px #fafafa solid;
        width: 170px;
        height: 170px
    }
}

@media (min-width: 1180px) {
    .profil__header img {
        width: 100%;
        height: 100%
    }
}

.profil__header .btn__groups {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-top: 30px
}

.profil__header .btn__groups--left {
    position: relative;
    max-width: 255px;
    padding-right: 10px
}

@media (min-width: 769px) {
    .profil__header .btn__groups--left {
        max-width: 275px
    }
}

@media (min-width: 769px) {
    .profil__header .btn__groups--left {
        max-width: initial;
        padding-right: 0
    }
}

@media (min-width: 992px) {
    .profil__header .btn__groups {
        justify-content: flex-start;
        align-items: flex-start
    }
}

.profil__header .btn {
    position: relative;
    padding: 13px 16px 13px 50px;
    border-radius: 50px;
    background-color: #E7F2F7;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-align: left;
    max-width: 237px;
    width: 100%;
    text-align: center
}

.profil__header .btn:hover {
    background-color: #DBEDF6
}

@media (min-width: 769px) {
    .profil__header .btn {
        max-width: initial;
        width: auto;
        text-align: left;
        padding: 13px 23px 13px 50px;
        font-size: 15px
    }
}

@media (min-width: 992px) {
    .profil__header .btn {
        margin-right: 20px
    }
}

.profil__header .btn i {
    position: absolute;
    left: 20px;
    top: 50%;
    font-size: 20px;
    margin-top: -10px
}

.profil__header .change__img,
.profil__header .edit {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background-color: #E7F2F7;
    width: 42px;
    height: 42px;
    border-radius: 50%
}

.profil__header .change__img:hover,
.profil__header .edit:hover {
    background-color: #DBEDF6
}

.profil__header .edit {
    top: 22px;
    right: 15px
}

@media (min-width: 769px) {
    .profil__header .edit {
        top: 55px;
        right: 15px
    }
}

@media (min-width: 992px) {
    .profil__header .edit {
        top: 48px;
        right: 48px
    }
}

.profil__header .change__img {
    bottom: 50%;
    transform: translateY(50%);
    left: 15px
}

@media (min-width: 992px) {
    .profil__header .change__img {
        bottom: 15px;
        transform: translateY(0);
        left: 15px
    }
}

.profil__header--user {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: transparent
}

@media (min-width: 992px) {
    .profil__header--user {
        background-color: #fff
    }
}

.profil__header--user > div {
    width: 100%
}

.profil__header--user .d-top {
    margin-bottom: 20px;
    padding: 73px 0 35px;
    background-color: #fff;
    border-radius: 0 0 5px 5px
}

@media (min-width: 992px) {
    .profil__header--user .d-top {
        background-color: transparent;
        margin-bottom: 0;
        padding: 0;
        border-radius: 0
    }
}

.profil__header--user .d-top p {
    margin-top: 20px;
    padding: 0 20px
}

@media (min-width: 992px) {
    .profil__header--user .d-top p {
        padding: 0
    }
}

@media (min-width: 769px) {
    .profil__header--user .d-top p a:hover {
        position: relative
    }

    .profil__header--user .d-top p a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.profil__header--user .d-bottom {
    background-color: #fff;
    border-radius: 5px 5px 0 0
}

@media (min-width: 1180px) {
    .profil__header--user .d-bottom {
        border-radius: 0
    }
}

@media (min-width: 992px) {
    .profil__header--user {
        padding: 60px 28px 0 30px;
        align-items: flex-start;
        justify-content: space-between
    }
}

@media (min-width: 1180px) {
    .profil__header--user {
        padding: 60px 48px 0 40px
    }
}

.profil__header--user small {
    margin-top: 7px
}

.profil__header--user small a {
    font-weight: 600
}

@media (min-width: 769px) {
    .profil__header--user small a:hover {
        position: relative
    }

    .profil__header--user small a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.profil__header--user .friend {
    font-size: 16px;
    color: #9CC732;
    border: 2px #9CC732 solid;
    border-radius: 50%;
    width: 42px;
    max-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-left: 15px;
    background: #fff
}

@media (min-width: 769px) {
    .profil__header--user .friend {
        right: 20px;
        margin-left: 20px
    }
}

@media (min-width: 992px) {
    .profil__header--user .friend {
        position: relative;
        right: initial;
        top: initial;
        background: transparent
    }
}

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

@media (min-width: 992px) {
    .profil__header--username {
        justify-content: flex-start
    }
}

.profil__header .--edit {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 11px
}

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

@media (min-width: 992px) {
    .profil__header .username__meta {
        justify-content: flex-start
    }
}

.profil__header h1 {
    font-size: 26px;
    margin-bottom: 9px
}

@media (min-width: 992px) {
    .profil__header h1 {
        font-size: 46px;
        line-height: 62px;
        margin-bottom: 6px;
        font-weight: 700;
        color: #101010
    }
}

.profil__header h2 {
    font-size: 18px;
    color: #0067B4
}

@media (min-width: 992px) {
    .profil__header h2 {
        font-size: 22px
    }
}

.profil__header .online {
    position: relative;
    top: 2px;
    display: inline-block;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    background-color: #a6ce39;
    margin-left: 10px
}

.profil__comment-title {
    padding-bottom: 10px;
    border-bottom: 1px #d9d9d9 dotted
}

.profil__wall {
    width: 100%;
    background-color: #fff;
    padding: 34px 20px;
    border-radius: 5px;
    font-size: clamp(14px, 2vw, 15px);
    line-height: clamp(24px, 2vw, 26px);
    order: 1;
    margin-bottom: 20px
}

@media (min-width: 992px) {
    .profil__wall {
        float: right;
        width: calc(100% - 340px);
        margin-bottom: 40px;
        padding: 34px 40px
    }
}

@media (min-width: 1180px) {
    .profil__wall {
        width: calc(100% - 440px)
    }
}

.profil__wall p {
    font-size: clamp(14px, 2vw, 15px);
    line-height: clamp(24px, 2vw, 26px);
    margin: 0 0 30px
}

.profil__wall img,
.profil__wall iframe {
    margin-bottom: 30px
}

.profil__wall .emoji {
    margin-bottom: 0
}

.profil__comments {
    background-color: #fff;
    padding: 34px 20px;
    border-radius: 5px;
    width: 100%
}

.profil__comments .add__comment .comment {
    background-color: #fff
}

@media (min-width: 992px) {
    .profil__comments {
        float: right;
        width: calc(100% - 340px);
        padding: 34px 40px
    }
}

@media (min-width: 1180px) {
    .profil__comments {
        width: calc(100% - 440px)
    }
}

.profil__comments.admin__comments {
    width: 100%
}

.profil__info--description {
    width: 100%
}

.profil__info--description .instagram-media-registered,
.profil__info--description iframe {
    min-width: 280px !important
}

.profil__info--image,
.profil__info--video {
    margin-bottom: 20px
}

.profil__info--image iframe,
.profil__info--video iframe {
    max-width: 100%
}

.profil__info--boxes {
    width: 100%;
    margin-bottom: 20px
}

@media (min-width: 992px) {
    .profil__info--boxes {
        float: left;
        max-width: 300px
    }
}

@media (min-width: 1180px) {
    .profil__info--boxes {
        max-width: 400px
    }
}

.profil__info--bg {
    background-color: #fff;
    padding: 40px 20px;
    border-radius: 5px
}

@media (min-width: 992px) {
    .profil__info--bg {
        padding: 40px 20px
    }
}

@media (min-width: 1180px) {
    .profil__info--bg {
        padding: 40px
    }
}

.profil__info--box {
    margin-bottom: 10px
}

.profil__info--box:last-of-type {
    margin-bottom: 0
}

.profil__info--box h2 {
    padding: 5px 15px;
    color: #000;
    font-size: 20px;
    line-height: 27px;
    border-radius: 3px;
    background-color: #E7F2F7
}

.profil__info--box ul {
    padding: 10px
}

.profil__info--box ul li {
    list-style: none;
    font-size: 12px;
    line-height: 26px;
    display: flex;
    align-items: center
}

.profil__info--box ul li a {
    font-size: 12px;
    font-weight: 700
}

.profil__info--box ul li a:hover {
    position: relative
}

.profil__info--box ul li a:hover::after {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -4px;
    border-bottom: 1px #535353 dotted;
    content: ""
}

.profil__info--box ul li small {
    font-size: 12px;
    line-height: 26px;
    font-weight: 700;
    flex: 0 0 90px;
    max-width: 90px
}

@media (min-width: 769px) {
    .profil__info--box ul li small {
        flex: 0 0 120px;
        max-width: 120px
    }
}

.profil__gallery--single {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    position: relative;
    padding: 0 15px
}

.profil__gallery--single.--box {
    width: 100%;
    max-width: 632px
}

.profil__gallery--arrow.--left {
    position: absolute;
    left: -15px
}

@media (min-width: 769px) {
    .profil__gallery--arrow.--left {
        left: -30px
    }
}

.profil__gallery--arrow.--right {
    position: absolute;
    right: -15px
}

@media (min-width: 769px) {
    .profil__gallery--arrow.--right {
        right: -30px
    }
}

.profil__gallery--arrow i {
    font-size: 60px
}

.profil__gallery--arrow i:hover {
    color: #F58220
}

.profil__content {
    margin-bottom: 30px
}

.profil__content .subtitle .icon {
    font-size: clamp(16px, 3vw, 20px);
    line-height: 20px;
    color: #000
}

.profil__content .subtitle .icon:hover {
    color: #F58220
}

.profil__content .grid {
    margin-bottom: 30px
}

.profil__content .grid.pager-items .empty {
    grid-column: 1/-1
}

.years__badge {
    position: absolute;
    right: 26px;
    top: 105px;
    display: inline-block;
    text-align: center;
    width: 43px;
    height: 43px;
    margin-left: 0;
    color: #0067B4;
    font-weight: 700;
    font-size: 18px;
    padding-top: 8px
}

@media (min-width: 992px) {
    .years__badge {
        position: relative;
        right: initial;
        left: 0;
        top: -2px;
        margin-left: 26px
    }
}

.years__badge .y {
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    font-size: 8px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    color: #0067B4;
    background-color: #DBEDF6;
    border-radius: 20px;
    border: 2px solid transparent;
    text-transform: uppercase;
    padding: 2px 0
}

@media (min-width: 992px) {
    .years__badge .y {
        border: 2px solid #fff
    }
}

.photo {
    display: flex;
    flex-direction: column
}

.photo p {
    background-color: #fff;
    padding: 5px 15px;
    font-size: clamp(18px, 3vw, 20px)
}

.photo p.empty-title {
    background-color: transparent
}

.photo .edit-title {
    float: right;
    font-size: 12px;
    font-weight: 600;
    margin-top: -10px;
    margin-bottom: 12px;
    display: flex;
    align-self: flex-end
}

@media (min-width: 769px) {
    .photo .edit-title:hover {
        position: relative
    }

    .photo .edit-title:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0;
    margin: 0 0 30px
}

@media (min-width: 769px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (min-width: 992px) {
    .gallery {
        grid-template-columns: repeat(5, 1fr)
    }
}

.gallery li {
    position: relative;
    list-style: none;
    overflow: hidden
}

@media (min-width: 769px) {
    .gallery li {
        height: 120px
    }
}

.gallery li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s
}

.gallery li img:hover {
    transform: scale(1.1);
    transition: transform .4s
}

.gallery li .remove {
    position: absolute;
    left: 10px;
    bottom: 10px
}

.friends {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 0 30px;
    padding: 0
}

@media (min-width: 576px) {
    .friends {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (min-width: 769px) {
    .friends {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (min-width: 992px) {
    .friends {
        grid-template-columns: repeat(6, 1fr)
    }
}

.friends li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style: none;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff
}

.friends li:hover {
    background-color: #e1f0f6
}

.friends li a {
    font-weight: 600;
    word-break: break-all
}

.friends li a img {
    border-radius: 50%;
    max-width: 45px
}

.friends li span {
    display: block
}

.friends li .remove {
    margin-top: 5px;
    white-space: nowrap
}

.add__image {
    background-color: #fff;
    padding: 15px
}

@media (min-width: 769px) {
    .add__image form {
        max-width: 60%
    }
}

.add__image--btn {
    display: inline-block;
    margin-bottom: 30px
}

@media (min-width: 769px) {
    .add__image--btn .btn {
        font-size: 20px;
        padding: 10px 25px
    }
}

.empty {
    background-color: #fff;
    padding: 15px
}

.nav__second {
    padding: 20px 0 0;
    border-radius: 5px 5px 0 0
}

@media (min-width: 992px) {
    .nav__second {
        padding: 33px 0 0;
        border-radius: 0;
        border-top: 1px #D4D4D4 dotted
    }
}

.nav__second ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px #D4D4D4 dotted
}

@media (min-width: 992px) {
    .nav__second ul {
        justify-content: flex-start;
        border-bottom: none
    }
}

.nav__second ul li {
    display: inline-block;
    list-style: none;
    flex: 1;
    margin-bottom: -1px
}

@media (min-width: 992px) {
    .nav__second ul li {
        border-right: none;
        margin-right: 5px;
        flex: initial;
        margin-bottom: 0
    }
}

.nav__second ul li a {
    display: inline-block;
    position: relative;
    padding: 7px 15px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    width: 100%;
    padding-bottom: 20px
}

@media (min-width: 992px) {
    .nav__second ul li a {
        padding: 7px
    }
}

@media (min-width: 1180px) {
    .nav__second ul li a {
        padding: 7px 15px
    }
}

.nav__second ul li a::after {
    position: absolute;
    right: 0;
    top: 0;
    border-right: 1px #D4D4D4 solid;
    height: 30px;
    content: ""
}

@media (min-width: 992px) {
    .nav__second ul li a::after {
        display: none
    }
}

@media (min-width: 992px) {
    .nav__second ul li a {
        width: initial
    }
}

.nav__second ul li a .nav__link span {
    display: none
}

@media (min-width: 992px) {
    .nav__second ul li a .nav__link span {
        display: inline-block
    }
}

.nav__second ul li a i {
    font-size: 20px
}

@media (min-width: 992px) {
    .nav__second ul li a i {
        font-size: 16px
    }
}

@media (min-width: 992px) {
    .nav__second ul li a i {
        position: relative;
        top: 1px;
        margin-right: 10px
    }
}

.nav__second ul li a:hover {
    color: #dc751c;
    border-bottom: 5px #dc751c solid
}

.nav__second ul li a .NumOfUnconfirmedFriends {
    color: #fff;
    display: inline;
    padding: 0 4px;
    font-weight: bold;
    border-radius: 3px;
    background-color: #a6ce39
}

@media (max-width: 991px) {
    .nav__second ul li a .NumOfUnconfirmedFriends {
        position: absolute;
        top: -2px;
        font-size: 12px;
        padding: 0 4px;
        min-width: 20px;
        line-height: 20px;
        z-index: 1
    }
}

.nav__second ul li:last-child a::after {
    display: none
}

.nav__second ul li.active a {
    color: #dc751c;
    border-bottom: 5px #dc751c solid
}

.nav__second ul li.active a:hover::after {
    display: none
}

.author__section .profil__header {
    margin-bottom: 0
}

.author__section .profil__header h2 {
    color: #838383
}

.author__section hr {
    border: 0;
    border-top: 1px #D4D4D4 dotted
}

.author__section .d-top .grid {
    grid-gap: 0
}

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

@media (min-width: 992px) {
    .flex__end {
        justify-content: flex-end
    }
}

.profil__social--links {
    margin-bottom: 15px;
    display: flex
}

@media (min-width: 992px) {
    .profil__social--links {
        margin-bottom: 0
    }
}

.profil__social--links li {
    list-style: none;
    margin-left: 10px
}

.profil__social--links li:first-child {
    margin-left: 0
}

.profil__social--links li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #E7F2F7;
    font-weight: 900;
    font-size: 19px;
    line-height: 19px
}

.profil__social--links li a:hover {
    background-color: #DBEDF6
}

.notification__articles .banner {
    margin-top: 30px
}

.notification__article {
    display: flex;
    background-color: #fff;
    border-bottom: 1px #d9d9d9 dotted;
    padding: 5px 5px 10px
}

@media (min-width: 769px) {
    .notification__article {
        padding: 15px
    }
}

.notification__article--user img {
    width: 32px;
    height: 32px;
    border-radius: 50%
}

@media (min-width: 769px) {
    .notification__article--user img {
        width: 45px;
        height: 45px
    }
}

.notification__article--body {
    padding-left: 15px;
    flex: 1
}

.notification__article--body p {
    font-size: clamp(13px, 2vw, 14px);
    line-height: clamp(22px, 2vw, 24px);
    margin-bottom: clamp(10px, 2vw, 15px)
}

.notification__article--body p:last-of-type {
    margin-bottom: 0
}

.notification__article--body p a {
    font-weight: 600;
    word-break: break-word
}

.notification__article--body .new {
    position: relative;
    top: -3px;
    background-color: #db2f2d;
    color: #fff;
    border-radius: 3px;
    padding: 0 10px 2px;
    font-size: 11px
}

.notification__article time {
    margin-left: 15px;
    font-size: 11px
}

.notification__article.unseen {
    background-color: #e1f0f6
}

.notification__game {
    max-width: 100%
}

.notification__game img {
    max-width: 150px;
    margin-bottom: 15px
}

.NotificationGalleryThumb,
.NotificationGameThumb {
    display: block;
    margin: 15px 0
}

span.NewLabelInNotifications {
    height: 15px;
    line-height: 14px;
    margin-left: 5px;
    display: inline-block;
    color: #fff;
    background: #db2f2d;
    border-radius: 3px;
    padding: 0px 5px 0px 5px;
    font-size: 11px
}

.rebrand {
    display: block;
    border-radius: 3px;
    padding: 0 40px 40px;
    background-size: 100%;
    font-size: 14px
}

.taken-down {
    background: #fff0a7;
    margin: 30px 0 0;
    padding: 15px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center
}

.note__points {
    padding: 10px 0 0 15px;
    overflow: hidden;
    position: relative
}

@media (min-width: 769px) {
    .note__points {
        padding: 30px 60px
    }
}

.note__points strong {
    font-size: 20px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px
}

.note__points p {
    display: block;
    font-size: 13px;
    padding: 10px 0
}

@media (min-width: 769px) {
    .note__points p {
        padding: 0 0 30px
    }
}

.note__points .count__plays {
    display: inline-block;
    background: #f1e5ef;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
    color: #8c3560;
    margin-bottom: 20px;
    font-size: 16px
}

.note__points .count__plays span {
    font-weight: 700;
    font-size: 20px
}

@media (min-width: 769px) {
    .note__points .count__plays span {
        margin-left: 15px;
        padding-left: 15px;
        border-left: 1px solid #c1a9b7
    }
}

.note__points .count__points {
    display: inline-block;
    background: #ebf9ea;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
    color: #9bbf39
}

.note__points .count__points span {
    font-weight: 700;
    font-size: 20px
}

@media (min-width: 769px) {
    .note__points .count__points span {
        margin-left: 15px;
        padding-left: 15px;
        border-left: 1px solid #a6b47a
    }
}

.confetti__animation {
    position: relative;
    overflow: hidden
}

.messages__subtitle {
    display: flex;
    align-items: center;
    margin-bottom: 30px
}

.messages__subtitle ul {
    display: flex;
    margin-left: clamp(15px, 2.8vw, 30px)
}

.messages__subtitle ul li {
    list-style: none;
    margin-left: 15px
}

.messages__subtitle ul li:first-child {
    margin-left: 0
}

.messages__subtitle ul li a {
    position: relative;
    font-size: clamp(13px, 1.8vw, 16px)
}

.messages__subtitle ul li.active a::after {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    border-bottom: 1px #535353 solid;
    content: ""
}

@media (min-width: 769px) {
    .messages__subtitle ul li a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.messages__header {
    display: flex;
    justify-content: space-between;
    align-self: center;
    padding-left: 10px;
    border-bottom: 1px #d9d9d9 dotted;
    padding-bottom: 5px
}

@media (min-width: 769px) {
    .messages__header {
        padding-left: 15px
    }
}

.messages__header .checkbox {
    margin-bottom: 0
}

.messages__inbox {
    margin-bottom: 20px
}

.messages__inbox--header {
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px #d9d9d9 dotted
}

.messages__inbox--header.red {
    position: relative;
    top: 4px
}

.messages__inbox--header h2 {
    margin-bottom: 5px
}

.messages__inbox--header p {
    margin: 0;
    font-size: 14px
}

.messages__nav {
    display: flex
}

.messages__nav .next {
    margin-left: 5px
}

.messages__nav .next.disabled {
    color: #969696
}

.messages__nav .prev.disabled {
    color: #969696
}

.message {
    display: flex;
    align-items: flex-start;
    background-color: #fff;
    border-bottom: 1px #d9d9d9 dotted;
    font-size: 14px;
    padding: 5px 10px;
    min-height: 53px
}

@media (min-width: 769px) {
    .message {
        justify-content: space-between;
        padding: 0 15px
    }
}

.message.--unread {
    background-color: #e1f0f6
}

.message__user {
    display: flex;
    align-items: center;
    padding: 0 10px 0 0
}

.message__user img {
    border-radius: 50%;
    position: relative;
    top: 3px;
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%
}

@media (min-width: 769px) {
    .message__user img {
        width: 45px;
        height: 45px
    }
}

.message input[type="checkbox"] {
    margin-right: 15px
}

@media (min-width: 769px) {
    .message input[type="checkbox"] {
        max-width: 90px
    }
}

.message a {
    font-weight: 600
}

.message a.username {
    color: #535353
}

.message .username {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 0 0 130px;
    max-width: 130px;
    font-size: 13px;
    font-weight: 600;
    color: #889BA5
}

@media (min-width: 769px) {
    .message .username {
        font-size: 14px;
        position: relative;
        top: 15px
    }
}

.message .username__box {
    margin-right: 15px;
    line-height: 16px;
    flex: 0 0 175px;
    max-width: 175px
}

.message .username__box a {
    color: #535353
}

.message__title {
    flex: 1
}

@media (min-width: 769px) {
    .message__title {
        display: flex;
        justify-content: space-between
    }
}

.message__title .icon-users {
    position: relative;
    top: -4px;
    font-size: 14px;
    color: #535353
}

@media (min-width: 769px) {
    .message__title .icon-users {
        font-size: 18px;
        top: 12px;
        left: 4px
    }
}

.message__title p {
    font-size: 14px;
    margin: 0;
    word-break: break-word
}

.message__title p .emoji {
    margin: -7px 2px;
    top: 0
}

.message__title p small {
    word-break: break-word
}

@media (min-width: 769px) {
    .message__title p {
        margin: 0
    }
}

.message__title a {
    position: relative;
    font-weight: 600;
    line-height: 20px
}

@media (min-width: 769px) {
    .message__title a:hover::after {
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.message__title--received {
    flex: 1;
    display: grid;
    align-items: center;
    min-height: 52px;
    padding: 10px 0
}

.message__title--received > div > div {
    display: flex;
    align-items: center;
    margin: 20px 0 0
}

.message__title--received > div > div span {
    margin-right: 20px;
    color: #535353;
    font-size: 20px
}

.message__title span,
.message__title small {
    margin-left: 10px;
    font-size: 14px
}

.message time {
    font-size: 11px;
    opacity: .7
}

@media (min-width: 769px) {
    .message time {
        margin-left: 15px;
        position: relative;
        top: 14px
    }
}

.message__reply {
    padding: 0 0 15px 0
}

@media (min-width: 769px) {
    .message__reply {
        padding: 15px 0;
        max-width: 80%
    }
}

.message__reply--btns {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.message__reply--btns i {
    font-size: 18px
}

.message__send {
    padding: 15px;
    border-top: 1px #d9d9d9 dotted;
    background-color: #fff
}

@media (min-width: 769px) {
    .message__send {
        padding: 20px 30px
    }
}

@media (min-width: 769px) {
    .message__send label {
        flex: 0 0 150px;
        max-width: 150px
    }
}

.message__send textarea {
    height: clamp(90px, 30vw, 120px)
}

@media (min-width: 769px) {
    .message__send .message__reply--btns {
        padding-left: 150px
    }
}

.pm__happybirthday > div,
.pm__welcome > div {
    display: flex;
    align-items: center;
    margin-top: 10px
}

.pm__happybirthday > div > a,
.pm__welcome > div > a {
    margin: 0 20px 0 10px
}

.pm__happybirthday > div > a span,
.pm__welcome > div > a span {
    margin: 0
}

.pm__happybirthday > div span,
.pm__welcome > div span {
    font-size: 24px;
    margin-right: 20px;
    color: #535353
}

.no-messages {
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px #d9d9d9 dotted
}

.leaderboard__aside {
    background-color: #fff
}

.leaderboard__aside .achievements__tab--title {
    padding-bottom: 0;
    border: 0
}

.medals__aside h2 {
    margin-bottom: clamp(15px, 2vw, 20px)
}

.medals__aside ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 15px
}

@media (min-width: 576px) {
    .medals__aside ul {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width: 992px) {
    .medals__aside ul {
        grid-template-columns: repeat(1, 1fr)
    }
}

.medals__aside ul li {
    list-style: none;
    margin-bottom: 10px
}

.settings .nav__second ul li a {
    border-bottom: 5px transparent solid
}

.settings .nav__second ul li.active a {
    border-bottom: 5px #dc751c solid
}

.settings__main {
    background-color: #fff;
    border-radius: 5px;
    padding: 15px
}

@media (min-width: 769px) {
    .settings__main {
        padding: 30px
    }
}

.settings__main h2 {
    margin-bottom: 30px
}

.settings__main p {
    margin-bottom: clamp(20px, 3vw, 30px)
}

@media (min-width: 769px) {
    .settings__main--form label {
        flex: 0 0 300px;
        max-width: 300px
    }
}

.settings__main--form input[type="checkbox"] {
    position: relative;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px
}

.settings__main--form textarea {
    height: clamp(160px, 20vw, 300px)
}

.settings__main--form .input-birthday {
    display: grid;
    flex: 1;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px
}

.settings__main--form-block {
    display: flex;
    flex: 100%;
    border-bottom: 1px #d9d9d9 dotted;
    margin: 0 0 20px
}

@media (min-width: 769px) {
    .settings__main--form-block {
        max-width: 400px
    }
}

.settings__main--form-block .checkbox {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 15px
}

.settings__main--form-block .checkbox label {
    font-weight: 600
}

.settings__main--form-block .checkbox input[type="checkbox"] {
    margin: 0
}

.settings__main .input-country,
.settings__main .input-birthday {
    width: 100%
}

.settings__main .settings__links {
    margin-top: 20px
}

.settings__main .settings__links li {
    list-style: none;
    font-size: 13px;
    margin-bottom: 5px
}

.settings__main .settings__links li:last-child {
    margin-bottom: 0
}

@media (min-width: 769px) {
    .settings__main .settings__links li a:hover {
        position: relative
    }

    .settings__main .settings__links li a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.settings__main--profil section {
    margin-bottom: 30px
}

.settings__main--profil h2 {
    background-color: #6cf;
    color: #fff;
    padding: 4px 10px;
    margin-bottom: 20px;
    border-radius: 3px;
    font-weight: normal
}

@media (min-width: 992px) {
    .settings__main--profil .input {
        max-width: 80%
    }
}

.settings__main--profil .input-gender {
    display: flex;
    width: 100%
}

.settings__main--profil .input-gender .radio {
    margin: 0 30px 0 0
}

.settings__main--profil .input-gender .radio input[type="radio"] {
    margin: 0 10px 0 0
}

@media (min-width: 769px) {
    .settings__main--profil .checkbox {
        margin-left: 300px
    }
}

.settings__main--profil .checkbox input[type="checkbox"] {
    margin: 0 10px 0 0
}

.settings__main--profil .desc__footer {
    display: flex;
    justify-content: space-between
}

.settings__main--profil .desc__footer p {
    margin: 0
}

.settings__main--profil .desc__footer i {
    font-size: 18px;
    margin-left: 5px
}

.settings__table {
    margin-bottom: 30px
}

.settings__table tr th,
.settings__table tr td {
    padding: 3px 5px 3px 0;
    border-bottom: 1px #d9d9d9 dotted;
    text-align: center;
    font-size: 14px;
    vertical-align: middle
}

@media (min-width: 576px) {
    .settings__table tr th,
    .settings__table tr td {
        padding: 3px 20px 3px 0
    }
}

.settings__table tr th:first-child,
.settings__table tr td:first-child {
    text-align: left
}

.avatar__preview {
    position: relative;
    margin-right: 30px
}

.avatar__preview img {
    border-radius: 3px;
    height: auto
}

.avatar__preview .remove {
    position: absolute;
    left: 15px;
    bottom: 15px
}

.blacklist {
    margin: 15px -15px 0;
    padding: 15px 15px 0;
    border-top: 1px #d9d9d9 dotted
}

.blacklist p {
    font-size: clamp(14px, 2vw, 16px);
    margin-bottom: 0
}

.search__window {
    background-color: #E7F2F7;
    overflow: hidden
}

.search__window .grid {
    position: relative
}

.search__window .grid::after {
    position: absolute;
    content: "";
    width: 200px;
    height: 100%;
    background-size: cover;
    right: -60px;
    top: 0
}

@media (min-width: 769px) {
    .search__window .grid::after {
        width: 279px;
        right: 260px
    }
}

.search__input--form {
    position: relative;
    z-index: 1;
    display: flex;
    padding: 30px 0
}

@media (min-width: 769px) {
    .search__input--form {
        padding: 44px 0
    }
}

.search__input--form .s__input {
    position: relative;
    max-width: 100%;
    flex: 1
}

.search__input--form .s__input .clear__button {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -14px;
    border: 0;
    background-color: transparent;
    color: #adafae;
    cursor: pointer
}

.search__input--form input[type=text] {
    height: 45px;
    border-radius: 50px;
    font-size: 18px;
    padding: 0 48px 0 24px;
    color: #2BACE2;
    font-weight: 600;
    border: 0
}

@media (min-width: 769px) {
    .search__input--form input[type=text] {
        height: 60px;
        font-size: 24px;
        padding: 0 48px 0 32px
    }
}

.search__input--form .btn {
    margin-left: 10px;
    border: 0;
    background-color: #2BACE2;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    min-width: 50px
}

@media (min-width: 769px) {
    .search__input--form .btn {
        margin-left: 14px;
        font-size: 24px;
        min-width: 166px
    }
}

.search__filters {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    flex-direction: column
}

@media (min-width: 769px) {
    .search__filters {
        margin-bottom: 15px
    }
}

@media (min-width: 992px) {
    .search__filters {
        flex-direction: row
    }
}

.search__filters ul {
    display: flex
}

.search__filters ul li {
    display: flex;
    align-items: center;
    list-style: none;
    font-size: clamp(13px, 2vw, 14px);
    font-weight: 600;
    margin-left: 5px;
    padding: 4px 11px
}

.search__filters ul li.active {
    border-radius: 50px
}

@media (min-width: 992px) {
    .search__filters ul li {
        margin-left: 10px
    }
}

.search__filters ul li:first-child {
    margin-left: 0
}

.search__filters .search__filter--left {
    padding-bottom: 10px
}

@media (min-width: 992px) {
    .search__filters .search__filter--left {
        padding: 0
    }
}

.search__filters .search__filter--left li span {
    display: inline-block;
    text-align: center;
    background-color: #F58220;
    color: #fff;
    margin-left: 5px;
    margin-right: -6px;
    border-radius: 50px;
    padding: 0 5px;
    font-weight: 600;
    font-size: 11px;
    min-width: 24px
}

.search__filters .search__filter--left li.active {
    background-color: #6cf
}

.search__filters .search__filter--left li.active a {
    color: #fff
}

@media (min-width: 769px) {
    .search__filters .search__filter--left li a:hover {
        position: relative
    }

    .search__filters .search__filter--left li a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.search__filters .search__filter--right {
    border-top: 1px #d9d9d9 dotted;
    padding-top: 10px
}

@media (min-width: 992px) {
    .search__filters .search__filter--right {
        border-top: 0;
        padding: 0
    }
}

.search__filters .search__filter--right li {
    padding: 0 5px
}

@media (min-width: 769px) {
    .search__filters .search__filter--right li {
        padding: 0 10px
    }
}

.search__filters .search__filter--right li.active {
    background-color: #F58220
}

.search__filters .search__filter--right li.active a {
    color: #fff
}

@media (min-width: 769px) {
    .search__filters .search__filter--right li a:hover {
        position: relative
    }

    .search__filters .search__filter--right li a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.search__no-results {
    background-color: #fff;
    padding: 10px 15px;
    border-bottom: 1px #d9d9d9 dotted
}

.search__no-results p {
    margin-bottom: 0
}

.user__cards li {
    list-style: none;
    background-color: #fff
}

.user__cards li:nth-child(2n) {
    background-color: #e1f0f6
}

.user__card {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 45px 1fr;
    grid-template-areas: "A B" "A C";
    border-bottom: 1px #d9d9d9 dotted;
    padding: 5px
}

@media (min-width: 769px) {
    .user__card {
        display: flex;
        align-items: center;
        padding: 10px
    }
}

.user__card--img {
    grid-area: A
}

.user__card--username {
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 600;
    flex: 0 0 210px;
    grid-area: B
}

@media (min-width: 769px) {
    .user__card--username {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding-right: 30px
    }
}

.user__card img {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    margin-right: 15px
}

@media (min-width: 769px) {
    .user__card img {
        width: 45px;
        height: 45px
    }
}

.user__card p {
    grid-area: C;
    margin: 0;
    font-size: clamp(12px, 2vw, 16px)
}

.error {
    text-align: center;
    padding-top: 50px
}

.error img {
    max-width: 80%;
    margin: 30px 0
}

@media (min-width: 769px) {
    .error img {
        max-width: 500px;
        margin: 50px 0
    }
}

.blog {
}

@media (min-width: 769px) {
    .blog {
        padding-bottom: 85px
    }
}

.blog__header {
    position: relative;
    text-align: center;
    padding: 76px 0 0
}

@media (min-width: 769px) {
    .blog__header {
        padding: 96px 0 0
    }
}

.blog__header h1 {
    font-size: clamp(36px, 5vw, 48px);
    line-height: clamp(42px, 5vw, 56px);
    margin-bottom: 24px;
    color: #101010
}

.blog .pagination {
    border-top: 1px #e1f0f6 solid;
    padding-top: 25px;
    margin-top: 25px
}

.blog__articles {
    position: relative;
    z-index: 10;
    background: #fff;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    margin-top: 70px;
    padding: 24px 24px 34px;
    border-radius: 5px
}

.blog__articles.--under-article {
    margin-top: 0;
    margin-bottom: 30px
}

.blog__articles.no-top {
    margin-top: 0
}

.blog__articles.included__articles {
    box-shadow: none;
    margin: 50px 0
}

.blog__articles.included__articles .blog__article--item .blog__article--img {
    flex: 0 0 200px;
    min-width: 200px
}

.blog__articles.included__articles .blog__article--item .blog__article--body h2 a {
    font-size: 24px
}

.blog__articles.included__articles .blog__article--item .blog__article--body h3 {
    margin: 0
}

.blog__articles.included__articles .blog__article--item .blog__article--body .author__item {
    font-size: 11px
}

.blog__article--item {
    border-bottom: 1px #e1f0f6 solid;
    padding-bottom: 25px;
    margin-bottom: 30px
}

@media (min-width: 576px) {
    .blog__article--item {
        display: flex
    }
}

.blog__article:last-of-type .blog__article--item {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0
}

.blog__article--img a {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 10px
}

@media (min-width: 576px) {
    .blog__article--img a {
        margin-bottom: 0
    }
}

.blog__article--img img {
    float: left;
    width: 100%;
    height: initial;
    transition: transform .4s
}

@media (min-width: 576px) {
    .blog__article--img img:hover {
        transform: scale(1.1);
        transition: transform .4s
    }
}

@media (min-width: 576px) {
    .blog__article--img {
        flex: 0 0 240px;
        min-width: 240px;
        margin-right: 24px
    }
}

@media (min-width: 769px) {
    .blog__article--img {
        flex: 0 0 300px;
        min-width: 300px
    }
}

.blog__article--body {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.blog__article--body .author__item {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #969696
}

@media (min-width: 769px) {
    .blog__article--body .author__item a:hover {
        position: relative
    }

    .blog__article--body .author__item a:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.blog__article--body h2 {
    margin-bottom: 6px
}

.blog__article--body h2 a {
    color: #101010;
    font-size: clamp(24px, 4vw, 32px)
}

.blog__article--body h2 a:hover {
    color: #535353
}

@media (min-width: 769px) {
    .blog__article--body h2 a:hover:hover {
        position: relative
    }

    .blog__article--body h2 a:hover:hover::after {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        border-bottom: 1px #535353 dotted;
        content: ""
    }
}

.blog__article--body h3 {
    font-size: 14px;
    margin: 0 0 4px;
    font-weight: 600
}

.blog__article--body .tags {
    display: flex
}

.blog__article--body .tags li {
    list-style: none;
    margin-right: 5px
}

.blog__article--body .tags li a {
    display: inline-block;
    padding: 5px 10px;
    font-size: 13px;
    line-height: 16px;
    border-radius: 16px;
    background: #F9F5FF;
    color: #6941C6
}

.input.--error {
    display: none
}

.forum-poll.hidden {
    display: none
}

#Chat-MoveRight,
#Chat-MoveLeft,
.hide-answer,
.update__score {
    display: none
}

.game-info {
    background: #ffffff;
    padding: 10px 12px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 24px;
    flex-flow: row wrap;
    box-shadow: 0px 6px 30px rgba(0, 0, 0, .05)
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hidden {
    display: none !important;
}

a:visited {
    text-decoration: none;
}

.single-title, .page-title {
    margin-bottom: 0;
    font-size: calc(1.3rem + .2vw);
    color: #502050;
    font-weight: 600;
    line-height: 1.3
}

.header-right {
    margin-left: auto;
    text-align: right;
}

.header-right .btn-capsule, .header-right .btn-share {
    margin-left: 10px;
}

a:link {
    text-decoration: none;
}

.btn-capsule {
    padding: 20px;
    color: #000;
    background: transparent;
    width: 53px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-wrap: nowrap;
    border: 1px solid #0000001a;
    outline: 0;
    transition: all .3s linear;
    box-shadow: 0px 5px 0px #0000001a;
    cursor: pointer;
}

.btn-capsule:hover, .btn-capsule:focus {
    background: #535353;
    color: #fff;
    transform: translateY(3px);
    box-shadow: 0px 0px 0px #00000033;
}

.main-svg-sprite {
    display: none
}

.svg-icon {
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    fill: currentColor;
    font-size: 0
}

.svg-icon__link {
    vertical-align: top;
    fill: inherit;
    width: inherit;
    height: inherit
}

.games_content--bottom {
    display: flex;
    margin: 24px auto;
    /*box-shadow: 0px 3px 16px #cccccc7a;*/
    border-radius: 12px;
}

.box-content-page h2, .game-content-page h2 {
    text-transform: uppercase;
    color: #000;
    font-size: 24px;
    text-align: start;
	line-height: 1.2;
    margin: 0 0 12px;
}

.box-content-page h2, .game-content-page h4 {
    margin: 0 0 12px;
    color: #000;
    font-size: 20px;
	line-height: 1.2;
    font-weight: 900;
    text-align: start;
}

.single-description {
    
}

.single-description h3 {
    color: #000;
    font-size: 24px;
    font-weight: 900;
    text-align: start;
	line-height:  1.2;
    margin: 0 0 12px;
}

.single-description p {
    line-height: 1.6;
}

.single-description a:not([class]), .privacy-content a:not([class]) {
    color: #000;
    text-decoration: underline;
	font-weight: 600;
}

.single-description h2 {
    font-size: 24px;
    margin: 0 0 12px;
	line-height: 1.2;
    text-transform: uppercase;
    color: #000;
}

.single-description ul, .single-description ol {
    margin: 0 0 12px;
    list-style: none;
	counter-reset: num;
    padding: 0
}

.single-description ul li, .single-description ol li {
    padding-left: 40px;
    display: list-item;
    position: relative;
    margin: 0 0 6px;
}

.single-description ul li:before, .single-description ol li:before {
    counter-increment: num;
    content: counter(num);
    background-color: #000;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    width: 24px;
    height: 30px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 6px;
    box-sizing: border-box;
}

.single-description ul li:after, .single-description ol li:after {
    content: '';
    border: 10px solid transparent;
    border-left-color: #000;
    position: absolute;
    left: 27px;
    top: 50%;
    transform: scale(0.66, 1.5) translateY(-50%);
    transform-origin: 0 0;
}


.single-description ul li {
    margin: 0 0 6px;
    list-style: none;
}

.show_content {
    position: absolute;
    max-width: 100%;
    width: 100%;
    bottom: 10px;
    justify-content: center;
    display: flex;
    align-items: flex-end;
}

.ShowMore_button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 2px solid #535353;
    font-weight: 400;
    background: #535353;
    color: #fff;
    font-size: 12px;
    width: fit-content;
    cursor: pointer;
    gap: 1px;
    padding: 5px 18px;
    border-radius: 50px;
    transition: all .2s;
    box-shadow: 0 3px 7px rgb(0 0 0/19%);
}

.game-content-page {
    margin-right: 0;
    padding: 20px;
    box-sizing: border-box;
    color: #535353;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 6px 30px rgba(0, 0, 0, .05);
}

.comments-container {
    margin-left: 0;
}

.line-text-2 {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    padding: 0;
    color: #0000007a;
}

.number-views {
    padding: 10px;
    font-size: 12px;
    color: black;
}

.game__card-bottom {
    margin: 12px 0 0 0;
    position: relative;
    padding-bottom: 6px;
}

.game__card-similar {
    background: white;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0px 6px 30px rgba(0, 0, 0, .05);
    transition: all .2s;
}
.game__card-similar .game__card{
    border:0;
}

.game__card-similar:hover {
    box-shadow: 0px 14px 16px rgba(166, 165, 165, 0.48);
}

.game__card-similar:hover .game__card {
    background: unset;
}

.game__card-similar a {
    background: #ffffff;
    box-shadow: unset;
}

.game__card-similar a img {
    box-shadow: 0px 6px 30px rgba(0, 0, 0, .05);
    border-radius: 10px;
}

.game__card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    font-size: 10px;
}

.game__card-cat a {
    display: flex;
    gap: 3px;
    align-items: center;
}

.game__card-cat a span {
    font-size: 14px;
    color: black;
}

.game_card-cat--title {
    margin: 0;
}

.game__card-play--title {
    margin: 0;
    padding-left: 5px;
}

.game__card-play a {
    display: flex;
    align-items: center;
}

.game__card-play a span {
    font-size: 14px;
    color: black;
}

.btn-cup {
    background: unset;
    border: 1px solid #fff;
    padding: 0;
}

.btn-play {
    background: #6B00D6;
    border: 1px solid #6B00D6;
    color: white;
    border-radius: 50%;
    padding: 6px;
}

.btn-play .svg-icon {
    width: 20px;
    height: 20px;
}

.btn-cup .svg-icon {
    width: 20px;
    height: 20px;
}

.card-cup {
    padding: 0;
}

.card-cup-mg button {
    margin-right: 3px;
}

.box-games-item .box-title h3 {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 33px;
}


.top-popular-slide {
    overflow: hidden;
}

.box-left {
    position: relative;
}


.box-category-item .box-category-item-left a {
    display: flex;
    align-items: center;
    gap: 14px;
}

.box-category-item-left a img {
    border-radius: 50%;
}

.box-category-description {
    display: flex;
    flex-wrap: wrap;
    max-width: 180px
}

.box-category-description div {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.category-slide .swiper-wrapper {
    transition-timing-function: linear;
}

/*body:after{*/
/*    content: '';*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    position: absolute;*/
/*}*/
.game__card-play .game__card-text {
    width: 100%;
    margin: 0;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: clamp(13px, 2vw, 15px);
    border-radius: 6px;
    color: #000;
    box-shadow: 0px 5px 0px #00000033;
    transition: all .3s;
    border: 1px solid #00000033;
    font-weight: 500;
}

.game__card-play .game__card-text:hover {
    transform: translateY(3px);
    background-color: #535353;
    box-shadow: 0px 0px 0px #00000033;
    color: #fff;
}

.game__card-date {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
    color: #535353;
    font-weight: 900;
    font-size: 13px;
}

.game__card-bottom .game__card-header {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 8px;
    padding: 5px 0 0 0;
    font-weight: 500;
    width: 100%;
}

.game__card .game__card-excerpt {
    padding: 0 10px;
    font-size: 12px;
    line-height: 18px;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
}

.games__hot-bottom .game__card {
    padding: 0 0 14px 0;
    background: #fff;
    box-shadow: 0px 6px 30px rgba(0, 0, 0, .05);
}

.games__hot-bottom h2 {
    font-weight: 800;
}

.tag__list {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-flow: row wrap;
    margin-top: 12px;
    flex-flow: row wrap;
}

.games-popular img {
    object-fit: scale-down;
    position: relative;
}

.game__card-img:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.games-popular .game__card h3 {
    padding: 10px 55px;
}

.games-popular .game__card p {
    padding: 0 55px 0px;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.games-popular .game__card {
    background: #fff;
    padding-bottom: 20px;
}

.popular-slider {
    overflow: hidden;
}

.summary img {
    object-fit: scale-down;
}

.popular-cat .game__card {
    background: white;
    padding: 0 0 10px 0;
}

.popular-cat p {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px 0;
}

.game__card:hover {
    background: #535353;
    color: #fff;
    transform: translateY(3px);
    box-shadow: 0px 0px 0px #00000033;
}

.views_eye {
    position: absolute;
    top: -7px;
    left: 44px;
    font-size: 14px;
    font-weight: 600;
    color: #2BACE2;
}

.b-action {
    display: flex;
}

.b-action a .svg-icon {
    width: 22px;
    height: 22px;
}

.btn-eye {
    position: relative;
}

.games_content--title {
    display: flex;
    gap: 12px;

}

.game-info-img {
    border-radius: 3px;
}

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

.swiper_header a .thumb img {
    border-radius: 5px 5px 0 0;
    /*box-shadow: 0 3px 9px -2px #5a5a5a;*/
    transition: all .3s;
    width: 100%;
    object-fit: cover;
}

.index_top_swiper .swiper_header .swiper-wrapper .swiper-slide {
    background: #fff;
    border-radius: 5px;
    color: #000;
    border: 1px solid #0000001a;
    transition: all .3s linear;
    box-shadow: 0px 5px 0px #0000001a;
}

.index_top_swiper .swiper_header .swiper-wrapper .swiper-slide:hover {
    background: #535353;
    color: #fff;
    transform: translateY(3px);
    box-shadow: 0px 0px 0px #00000033;
}

.index_top_swiper .swiper_header .swiper-wrapper .swiper-slide p {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #000;
    font-weight: 600;
    margin-bottom: 10px;
    padding: 0 12px;
}

.index_top_swiper .swiper_header .swiper-wrapper .swiper-slide:hover p {
    color: #fff;
}

.top-news h2 {
    margin-bottom: 16px;
}

.pd-lr-10 {
    padding: 0 10px;
}

.mb-16 {
    margin-bottom: 16px;
}


.pagination ul {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row wrap;
    margin: 30px 0 0 0;
    list-style: none;
    gap: 3px;
}

.pagination li {
    padding: 0;
}

.pagination a, .pagination span {
    font-weight: 500;
    position: relative;
    z-index: 0;
    display: block;
    padding: 0 5px;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    min-width: 42px;
    height: 42px;
    line-height: 42px;
    opacity: 1;
    margin: 0 3px;
    border-radius: 8px;
    overflow: hidden;
}

.pagination a {
    background: #fff;
    color: #000;
}

.pagination a::after, .pagination span::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    background: #000;
}

.pagination span.current, .pagination li a:hover {
    background: #535353;
    color: #fff;
}

.box-left {
    position: relative;
}

.box-games {
    position: relative;
}

.box-img {
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.box-img img {
    border-radius: 8px;
    filter: blur(8px);
    width: 100%;
    max-height: 370px;
    object-fit: cover;
}

.box-games-item {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    z-index: 999;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    padding: 48px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.box-games-item .box-name {
    font-size: 22px;
    margin-bottom: 14px;
}

.box-img:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top right, rgb(0 0 0 / 53%), rgb(0 0 0 / 36%));
    z-index: 99;
}

.box--game-play {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    padding: 8px 12px;
    /* background: #fff; */
    max-width: 200px;
    border-radius: 8px;
    /* color: white; */
    border: 1px solid #ccc;
    margin-top: 20px;
    background: #fff;
    transition: all .2s;
}

.box--game-play:hover {
    box-shadow: -1px 1px 10px #ccc;
    transform: translateY(-2px);
}


.btn--play-game {
    background: teal;
    border: 0;
    border-radius: 50%;
    padding: 8px;
}

.btn--play-game .svg-icon {
    color: #ffffffbf;
    width: 18px;
    height: 18px;
}

.box-right {
    border-radius: 8px;
    margin-left: 0;
    height: 374px;
    overflow: hidden;
    border: 1px solid #ccc6;
    position: relative;
    background: #000;
    color: #fff;
    padding: 20px 32px;
}

/*.box-right:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 70px;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: linear-gradient(to top, #000000a1, #75758d00);
    pointer-events: none;
}*/

.box-right:before {
    content: '';
    background-image: url("../images/partern.png");
    position: absolute;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    filter: blur(3px);
}

.box-category-title h3 {
    margin-top: 0;
    font-weight: 500;
}

.box-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
}

.box-category-item-right {
    padding: 1px 40px;
    background: black;
    border-radius: 100px;
    color: white;
    font-size: 12px;
}

.box-category-item .box-category-item-left a {
    display: flex;
    align-items: center;
    gap: 14px;
    max-height: 300px;
}

.box-category-item-left a img {
    border-radius: 50%;
}

.box-category-description {
    display: flex;
    flex-wrap: wrap;
    max-width: 180px;
}

.box-category-description div {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-slide {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    height: 100%;
}


.category-game-slide {
    overflow: hidden;
    max-width: 100%;
}

.category-game-slide .swiper-slide {
    width: 100%;
}

.game__list--news {
    margin-bottom: 40px;
}

.category_list--all .categories__list a.game__card {
    box-shadow: unset;
}

.box-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-height: 80px;
}

.box-category--item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.box-category--description {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.box-category--play {
    padding: 10px 28px;
    border: 1px solid #535353;
    border-radius: 100px;
    font-size: 14px;
    background: #535353;
    color: white;
}

.btn__games--category {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0;
}

.btn__item {
    padding: 8px 20px;
    border-radius: 4px;
    box-shadow: 0px 3px 9px #00000033;
    transition: all .1s;
    background: white;
}

.btn__item:hover {
    cursor: pointer;
    transform: translateY(-3px);
}

.btn__item:active {
    transform: translateY(-1px);
}

.btn__item--current {
    background: #535353;
    color: white;
    box-shadow: 0px 3px 9px #535353b3;
}

.box-description {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 100;
}

.mg-top-30 {
    margin-top: 30px;
}

.h-100vh {
    height: 100vh;
}

.mb-40 {
    margin-bottom: 40px;
}

.top_swiper--title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top_swiper--title h2 {
    font-size: clamp(23px, 2vw, 30px);
}

@media (max-width: 1291px) {
    .new-games.hidden, .game-area.hidden {
        display: block !important;
    }

    .top_swiper--title {
        margin-top: 0;
    }

    .top_swiper--title .relative {
        display: none;
    }
}

.privacy-title {
    color: #000;
    margin: 0 0 15px;
}

.privacy-content ul {
    padding-left: 24px
}

.privacy-content ul li,.privacy-content ol li {
    list-style: circle;
    margin: 0 0 6px;
    font-size: inherit;
}
.privacy-content h2,.privacy-content h3,.privacy-content h4{
    color: #000
}
.privacy-content h2{
    font-size: 24px;
    text-transform: uppercase;
}
.privacy-content h3{
    font-size: 20px;
}
.privacy-content h4 {
    margin-top: 0;
    font-size: 18px;
}

.tag__list-item a h3 {
    margin-bottom: 0;
}

.single__game {
    margin-top: 40px;
}

.box-shadow-none {
    box-shadow: unset;
}

.game__content--header {
    display: flex;
}

.game__area {
    flex: 1;
}

.game_hot_right {
    width: 364px;
    margin-left: 24px;
	    display: flex;
}

.categories__list {
    margin-bottom: 30px;
}

.btn-number-more {
    position: absolute;
    right: -8px;
    top: -14px;
    /* width: 16px; */
    /* height: 16px; */
    padding: 0px 8px;
    font-size: 15px;
    border-radius: 50%;
    background: red;
    color: white;
    border: unset;
    outline: unset;
}

.more_hidden {
    position: absolute;
    border-radius: 8px;
    background: #535353;
    padding: 20px 40px 20px 8px;
    left: -22px;
    top: 32px;

}

.header-more-menu .more_hidden li:not(:last-child) {
    margin-bottom: 16px;
}

.header-more-menu .more_hidden li a {
    color: white;
}

.links {
    width: 100%;
}

.grid-hot-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--grid-row-gap) var(--grid-column-gap);
}

.game_hot_right .games__list {
    margin-top: 40px;
}

.grid-hot-right .game__card {
    border: 1px solid #0000001a;
    background: #fff;
    text-align: center;
    box-shadow: 0px 5px 0px #0000001a;
    color: #000;
    transition: all .3s linear;
}

.grid-hot-right .game__card:hover {
    background: #535353;
    color: #fff;
    transform: translateY(3px);
    box-shadow: 0px 0px 0px #00000033;
}

.title_hot-games {
    margin-top: 16px;
    text-align: center;
}

.game_hot_right .title_hot-games a {
    padding: 10px 13px 10px;
    font-size: 15px;
    border-radius: 6px
}

.btn-award, .btn-new {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #1ec2e5;
    color: #fff;
    border-radius: 50%;
    border: 3px #f5fafc solid;
    margin-left: -10px;
}

.btn-new {
    background: #3eb752;
}

.btn-hot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    background-color: #ed1c24;
    color: #fff;
    border-radius: 50%;
    border: 3px #f5fafc solid;
}

.btn-hot .svg-icon, .btn-award .svg-icon, .btn-new .svg-icon {
    width: 18px;
    height: 18px;
}


@media (min-width: 1291px) {
    .nav__menu h2 {
        border-bottom: 2px #d9d9d9 dotted;
        padding: 10px 0;
        font-size: 26px;
    }
}

.game-about-us h1 {
    font-size: 26px;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.game-about-us h2, .game-about-us h3, .game-about-us h4 {
    font-size: 20px;
    margin: 0 0 12px;
}

.game-about-us ul {
    padding-left: 20px;
    margin: 0 0 12px
}

.game-about-us ul li {
    margin: 0 0 12px
}

.categories__nav--right li a.icon-circle .svg-icon {
    width: 20px;
    height: 20px
}

.categories__nav--right li a.icon-circle:hover {
    color: #fff;
}

@media (max-width: 1290px) {
    .nav__menu .span__game__title, .nav__menu h2 {
        padding: 12px 10px;
        color: #000;
        font-size: 22px;
        line-height: 22px;
        text-align: center;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
 
@media (max-width: 1200px) {
    .game__content--header {
        display: block
    }

    .grid-hot-right {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: var(--grid-row-gap) var(--grid-column-gap);
    }

    .game_hot_right {
        width: unset;
        margin-left: 0;
    }

}

@media (max-width: 800px) {

    .game__subtitle {
        padding-bottom: 0;
    }

    .game__section {
        margin-bottom: 0;
    }

    .footer {
        margin-top: 20px;
    }
	.grid-hot-right {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: var(--grid-row-gap) var(--grid-column-gap);
    }
}

@media (max-width: 500px) {

    .game-info {
        justify-content: center;
    }

    .header-right {
        margin: 10px 0 0;
    }
	.grid-hot-right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: var(--grid-row-gap) var(--grid-column-gap);
    }
}

.icon_search {
    width: 18px;
    height: 18px
}

.h-100 {
    height: 100%;
}

.mg-top-40 {
    margin-top: 40px;
}

.mg-40-0 {
    margin: 40px 0;
}

.pd-40-0 {
    padding: 40px 0;
}

.privacy-content {
    padding: 20px 30px;
}

.btn_arrow {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 0%);
    border: 0;
    color: white;
}

.btn_arrow:hover {
    cursor: pointer;
}

.categories__list a h3 {
    color: black
}

.tag_name {
    padding: 10px;
    font-weight: 600;
}

.cat_name {
    font-weight: 500;
    width: 100%;
    font-size: 14px;
    flex: 1;
    margin-left: 12px;
}

@media (max-width: 769px) {
    .tag__list--bottom .game__card {
        background: unset;
        color: #535353;
    }
}

.games__list-new a.game__card {
    padding: 0;
}


.games__list-new a.game__card h3 {
    color: white;
    text-align: center;
}

.games__list-new a.game__card .line-text-2 {
    color: #dededebf;
}

.games__list-new a.game__card:hover h3 {
    color: white;
}

.games_content {
    padding: 0 0 18px;
    background: #ffffff;
}

.cat_text {
    padding: 15px 24px 15px 10px;
    font-weight: 500;
}

.mg-0 {
    margin: 0;
}

.title_text {
    font-weight: 600;
    font-size: 24px;
}

.box-category--info {
    flex: 1;
}

.footer__list-title {
    padding: 18px 12px;
}

.stick_game {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -12px;
    top: -12px;
}

.btn_up {
    width: 40px;
    height: 40px;
    background: #fff;
    padding: 0;
    border-radius: 10px;
    position: fixed;
    border: 1px solid #0000001a;
    right: 15px;
    bottom: 15px;
    transition: transform .5s cubic-bezier(.51, .92, .24, 1.15);
    transform: translateX(120px);
    box-shadow: 0px 3px 0px #0000001a;
    z-index: 9999;
}

.btn_up.show {
    transform: translateX(0);
}

.view-more {
    color: #ed1c24;
    font-size: 14px;
    font-weight: bold;
    transition: all .2s linear;
}

.view-more:hover {
    transform: translateY(-3px) scale(1.15);
}

.dropbtn .svg-icon {
    width: 15px;
    height: 15px;
}

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    z-index: 999
}

.dropdown-content a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left
}

.dropdown-content a:hover {
    background-color: #8d8a8a;
    color: #fff !important;
}

.dropdown:hover .dropdown-content {
    display: block
}

.view_more {
    color: #ed1c24;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.top_picks_game {
    margin: 0 0 24px;
}

.top_picks_game .swiper_header, .index_top_swiper .swiper_header {
    padding: 16px 0;
}
.ads_side{
	width: 100%;
	height: 100%;
	padding: 5px;
	margin: 0 0 16px;
	background: #0000002e;
}
.banner-row { margin: 12px auto; display: block; max-width: 1200px; padding: 8px; background: #0000002e; }