@charset "UTF-8";

@font-face {

    font-family: zwicon;

    src: url(../fonts/zwicon.eot);

    src: url(../fonts/zwicon.eot#iefix) format('embedded-opentype'), url(../fonts/zwicon.ttf) format('truetype'), url(../fonts/zwicon.woff) format('woff'), url(../fonts/zwicon.svg#zwicon) format('svg');

    font-weight: 400;

    font-style: normal;

    font-display: swap

}



i {

    font-family: zwicon;

    speak: none;

    font-style: normal;

    font-weight: 400;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale

}



.zwicon-diamond:before {

    content: "\e9f3"

}



.zwicon-arrow-left:before {

    content: "\e90f"

}



.zwicon-arrow-right:before {

    content: "\e910"

}



.zwicon-expand-left:before {

    content: "\e92e"

}



.zwicon-expand-right:before {

    content: "\e92f"

}



.zwicon-chevron-down:before {

    content: "\e91e"

}



.zwicon-chevron-up:before {

    content: "\e921"

}



.zwicon-expand-alt:before {

    content: "\e92a"

}



.zwicon-code:before {

    content: "\e983"

}



.zwicon-coin:before {

    content: "\e9f1"

}



.zwicon-flag:before {

    content: "\ea59"

}



.zwicon-hamburger-menu:before {

    content: "\ea5b"

}



.zwicon-heart:before {

    content: "\ea5c"

}



.zwicon-more-v:before {

    content: "\ea6a"

}



.zwicon-search:before {

    content: "\ea72"

}



.zwicon-share:before {

    content: "\ea74"

}



.zwicon-thumbs-down:before {

    content: "\ea78"

}



.zwicon-thumbs-up:before {

    content: "\ea79"

}



.zwicon-lego-serious-play:before {

    content: "\eb0f"

}



.zwicon-phone-holding:before {

    content: "\e9bc"

}



:root {

    --blue: #27a4fb;

    --indigo: #3F51B5;

    --purple: #ac66f5;

    --pink: #E91E63;

    --red: #E53935;

    --orange: #FF5722;

    --yellow: #ffe21f;

    --green: #2cc56f;

    --teal: #53ffc1;

    --cyan: #00f3e7;

    --white: #fff;

    --gray: #6c757d;

    --gray-dark: #343a40;

    --primary: #27a4fb;

    --secondary: #6c757d;

    --success: #2cc56f;

    --info: #27a4fb;

    --warning: #ffc021;

    --danger: #E53935;

    --light: #f0f6f9;

    --dark: #232134;

    --breakpoint-xs: 0;

    --breakpoint-sm: 576px;

    --breakpoint-md: 768px;

    --breakpoint-lg: 992px;

    --breakpoint-xl: 1200px;

    --font-family-sans-serif: Arial, sans-serif;

    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

}



*, ::after, ::before {

    -webkit-box-sizing: border-box;

    box-sizing: border-box

}



html {

    font-family: sans-serif;

    line-height: 1.15;

    -webkit-text-size-adjust: 100%;

    -webkit-tap-highlight-color: transparent

}



aside, footer, header, main, nav, section {

    display: block

}



body {

    font-family: Arial, sans-serif;

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.5;

    color: #9bbcd1;

    text-align: left;

    background-color: #27274a

}



[tabindex="-1"]:focus {

    outline: 0 !important

}



hr {

    -webkit-box-sizing: content-box;

    box-sizing: content-box;

    height: 0;

    overflow: visible;

    margin-top: 1rem;

    margin-bottom: 1rem;

    border: 0;

    border-top: 1px solid #27274a

}



h1, h2, h3, h4, h5, h6 {

    margin: 0

}



p {

    margin-top: 0;

    margin-bottom: 1rem

}



ol, ul {

    margin-top: 0;

    margin-bottom: 1rem

}



ol ol, ol ul, ul ol, ul ul {

    margin-bottom: 0

}



strong {

    font-weight: bolder

}



small {

    font-size: 80%

}



a {

    color: #27a4fb;

    text-decoration: none;

    background-color: transparent

}



a:hover {

    color: #047dd2;

    text-decoration: none

}



a:not([href]):not([tabindex]) {

    color: inherit;

    text-decoration: none

}



a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {

    color: inherit;

    text-decoration: none

}



a:not([href]):not([tabindex]):focus {

    outline: 0

}



img {

    vertical-align: middle;

    border-style: none

}



svg {

    overflow: hidden;

    vertical-align: middle

}



table {

    border-collapse: collapse

}



button {

    border-radius: 0

}



button:focus {

    outline: 1px dotted;

    outline: 5px auto -webkit-focus-ring-color

}



button, input, select, textarea {

    margin: 0;

    font-family: inherit;

    font-size: inherit;

    line-height: inherit

}



button, input {

    overflow: visible

}



button, select {

    text-transform: none

}



select {

    word-wrap: normal

}



[type=button], [type=reset], [type=submit], button {

    -webkit-appearance: button

}



[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {

    cursor: pointer

}



[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {

    padding: 0;

    border-style: none

}



input[type=checkbox], input[type=radio] {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    padding: 0

}



input[type=date], input[type=datetime-local], input[type=month], input[type=time] {

    -webkit-appearance: listbox

}



textarea {

    overflow: auto;

    resize: vertical

}



progress {

    vertical-align: baseline

}



[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {

    height: auto

}



[type=search] {

    outline-offset: -2px;

    -webkit-appearance: none

}



[type=search]::-webkit-search-decoration {

    -webkit-appearance: none

}



::-webkit-file-upload-button {

    font: inherit;

    -webkit-appearance: button

}



[hidden] {

    display: none !important

}



.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {

    font-weight: 400;

    line-height: 1.2;

    color: #dcf3ff

}



.h1, h1 {

    font-size: 1.1rem

}



.h2, h2 {

    font-size: 1.1rem

}



.h3, h3 {

    font-size: 1rem

}



.h4, h4 {

    font-size: 1rem

}



.h5, h5 {

    font-size: 1rem

}



.h6, h6 {

    font-size: .95rem

}



.small, small {

    font-size: 80%;

    font-weight: 400

}



.container-fluid {

    width: 100%;

    padding-right: 15px;

    padding-left: 15px;

    margin-right: auto;

    margin-left: auto

}



.row {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    margin-right: -5px;

    margin-left: -5px

}



.intro-game {

    width: 100%;

    height: 600px

}



.games.row {

    overflow: hidden;

    display: -ms-grid;

    display: grid;

    -ms-grid-columns: (minmax(174px, 1fr)) [ auto-fill ];

    grid-template-columns:repeat(auto-fill, minmax(174px, 1fr));

    -ms-grid-rows: minmax(120px, auto);

    grid-template-rows: minmax(120px, auto);

    -ms-grid-template-rows: minmax(120px, auto);

    grid-auto-flow: dense;

    -ms-grid-auto-flow: dense;

    text-align: center;

    margin-left: 0

}



.gamesmall.row {

    overflow: hidden;

    display: -ms-grid;

    display: grid;

    -ms-grid-columns: (minmax(150px, 1fr)) [ auto-fill ];

    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));

    -ms-grid-rows: minmax(100px, auto);

    grid-template-rows: minmax(100px, auto);

    -ms-grid-template-rows: minmax(100px, auto);

    grid-auto-flow: dense;

    -ms-grid-auto-flow: dense;

    text-align: center;

    margin-left: 0

}



.gameslg.row {

    overflow: hidden;

    display: -ms-grid;

    display: grid;

    -ms-grid-columns: (minmax(250px, 1fr)) [ auto-fill ];

    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));

    -ms-grid-rows: minmax(150px, auto);

    grid-template-rows: minmax(150px, auto);

    -ms-grid-template-rows: minmax(150px, auto);

    grid-auto-flow: dense;

    -ms-grid-auto-flow: dense;

    text-align: center;

    margin-left: 0

}



col, .col-6 {

    position: relative;

    width: 100%;

    padding-right: 5px;

    padding-left: 5px

}



.col {

    -ms-flex-preferred-size: 0;

    flex-basis: 0;

    -webkit-box-flex: 1;

    -ms-flex-positive: 1;

    flex-grow: 1;

    max-width: 100%

}



.col-6 {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 50%;

    flex: 0 0 50%

}



.col-145 {

    position: relative;

    padding-right: 3px;

    padding-left: 3px;

    -webkit-box-flex: 0;

    -ms-flex: 0 0 auto;

    flex: 0 0 auto;

    width: 151px;

    max-width: 151px

}



.col-190 {

    position: relative;

    margin-right: 5px;

    margin-bottom: 5px

}



.col-290 {

    position: relative;

    padding-right: 5px;

    padding-left: 5px;

    -webkit-box-flex: 0;

    -ms-flex: 0 0 auto;

    flex: 0 0 auto;

    width: 300px;

    max-width: 300px

}



.col-390 {

    grid-column-start: span 2

}



.table {

    width: 100%;

    margin-bottom: 1rem;

    color: #9bbcd1

}



.form-control {

    display: block;

    width: 100%;

    height: 40px;

    padding: .5rem 1rem;

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.5;

    color: #9bbcd1;

    background-color: transparent;

    background-clip: padding-box;

    border: 1px solid #415969;

    border-radius: .25rem;

    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;

    transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;

    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out

}



.wgamewrap {

    box-sizing: border-box;

    flex-flow: nowrap;

    width: 100%;

    -webkit-box-pack: left;

    justify-content: left

}



.gamewrap {

    box-sizing: border-box;

    flex-flow: nowrap;

    width: 100%;

    -webkit-box-pack: center;

    justify-content: center

}



.wt-container {

    width: 230px;

    height: 140px;

    background-position-y: center;

    background-repeat: no-repeat;

    background-size: cover;

    cursor: pointer;

    position: relative;

    object-fit: cover;

    display: block;

    margin: 1rem

}



.wt-title {

    position: absolute;

    top: 50px;

    left: 0;

    transform-origin: 29px 50px;

    transform: rotate(270deg)

}



.wt-play {

    position: absolute;

    top: calc(50% - 30px);

    left: calc(50% - 30px);

    width: 60px;

    height: 60px;

    display: block;

    border: 2px solid #fff;

    border-radius: 50%;

    padding: 0;

    margin: 0 auto;

    user-select: none;

    background-color: rgba(0, 0, 0, .6);

    transition: background-color .5s ease

}



.wt-play:after {

    position: absolute;

    top: calc(50% - 13px);

    left: calc(50% - 7px);

    display: block;

    content: '';

    box-sizing: border-box;

    border-color: transparent transparent transparent #fff;

    border-style: solid;

    border-width: 12px 0 12px 18px

}



.wt-overlay {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    transition: .5s ease;

    background-color: rgba(128, 0, 128, .7)

}



.wt-overlay:hover {

    background-color: rgba(128, 0, 128, 0)

}



.wt-overlay:hover .wt-play {

    background-color: rgba(128, 0, 128, .8)

}



.leftgcont {

    height: 640px;

    overflow: hidden;

    backdrop-filter: sepia(20%)

}



.bottomcont {

    width: 100%;

    height: 290px

}



.bottomcont-m {

    width: 100%;

    height: 630px

}



.bottomgames {

    min-height: 350px

}



.categorycont {

    min-height: 44.3px;

    margin-bottom: 8px

}



.rightgcont, .rightgcont_own {

    grid-column: span 2;

    grid-row: span 2;

    width: auto;

    height: 250px;

    overflow: hidden

}



@media (prefers-reduced-motion: reduce) {

    .form-control {

        -webkit-transition: none;

        transition: none

    }

}



.form-control::-ms-expand {

    background-color: transparent;

    border: 0

}



.form-control:focus {

    color: #9bbcd1;

    background-color: transparent;

    border-color: #6c8ea4;

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none

}



.form-control::-webkit-input-placeholder {

    color: #B4C8CF;

    opacity: 1

}



.form-control::-moz-placeholder {

    color: #B4C8CF;

    opacity: 1

}



.form-control:-ms-input-placeholder {

    color: #B4C8CF;

    opacity: 1

}



.form-control::-ms-input-placeholder {

    color: #B4C8CF;

    opacity: 1

}



.form-control::placeholder {

    color: #B4C8CF;

    opacity: 1

}



.form-control:disabled, .form-control[readonly] {

    background-color: transparent;

    opacity: 1

}



select.form-control:focus::-ms-value {

    color: #9bbcd1;

    background-color: transparent

}



select.form-control[multiple], select.form-control[size] {

    height: auto

}



textarea.form-control {

    height: auto

}



.form-group {

    margin-bottom: 2rem

}



.btn {

    display: inline-block;

    font-weight: 400;

    color: #9bbcd1;

    text-align: center;

    vertical-align: middle;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    background-color: transparent;

    border: 1px solid transparent;

    padding: .5rem .7rem;

    font-size: .95rem;

    line-height: 1.5;

    border-radius: 2px;

    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;

    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;

    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out

}



@media (prefers-reduced-motion: reduce) {

    .btn {

        -webkit-transition: none;

        transition: none

    }

}



.btn:hover {

    color: #9bbcd1;

    text-decoration: none

}



.btn:focus {

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none

}



.btn.disabled, .btn:disabled {

    opacity: .65

}



a.btn.disabled {

    pointer-events: none

}



.btn-outline-success {

    color: #2cc56f;

    border-color: #2cc56f

}



.btn-outline-success:hover {

    color: #fff;

    background-color: #2cc56f;

    border-color: #2cc56f

}



.btn-outline-success:focus {

    -webkit-box-shadow: 0 0 0 0 rgba(44, 197, 111, .5);

    box-shadow: 0 0 0 0 rgba(44, 197, 111, .5)

}



.btn-outline-success.disabled, .btn-outline-success:disabled {

    color: #2cc56f;

    background-color: transparent

}



.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active {

    color: #fff;

    background-color: #2cc56f;

    border-color: #2cc56f

}



.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus {

    -webkit-box-shadow: 0 0 0 0 rgba(44, 197, 111, .5);

    box-shadow: 0 0 0 0 rgba(44, 197, 111, .5)

}



.btn-link {

    font-weight: 400;

    color: #27a4fb;

    text-decoration: none

}



.btn-link:hover {

    color: #047dd2;

    text-decoration: none

}



.btn-link:focus {

    text-decoration: none;

    -webkit-box-shadow: none;

    box-shadow: none

}



.btn-link.disabled, .btn-link:disabled {

    color: #6c757d;

    pointer-events: none

}



.btn-sm {

    padding: .25rem .5rem;

    font-size: .875rem;

    line-height: 1.5;

    border-radius: .2rem

}



.btn-block {

    display: block;

    width: 100%

}



.btn-block + .btn-block {

    margin-top: .5rem

}



input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].btn-block {

    width: 100%

}



.fade {

    -webkit-transition: opacity .15s linear;

    transition: opacity .15s linear

}



@media (prefers-reduced-motion: reduce) {

    .fade {

        -webkit-transition: none;

        transition: none

    }

}



.fade:not(.show) {

    opacity: 0

}



.collapse:not(.show) {

    display: none

}



.collapsing {

    position: relative;

    height: 0;

    overflow: hidden;

    -webkit-transition: height .35s ease;

    transition: height .35s ease

}



@media (prefers-reduced-motion: reduce) {

    .collapsing {

        -webkit-transition: none;

        transition: none

    }

}



.dropdown {

    position: relative

}



.dropdown-content {

    display: none;

    position: absolute;

    left: -80px;

    z-index: 10000;

    min-width: 10rem;

    padding: .5rem 0;

    margin: 0;

    font-size: 1rem;

    color: #9bbcd1;

    text-align: left;

    list-style: none;

    background-color: #2e2f4d;

    background-clip: padding-box;

    border: 0 solid rgba(0, 0, 0, .15);

    border-radius: .25rem

}



.dropdown:hover .dropdown-content {

    display: block

}



/*.dropdown-menu{position:absolute;top:100%;left:0;z-index:10000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#9bbcd1;text-align:left;list-style:none;background-color:#2e2f4d;background-clip:padding-box;border:0 solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu-right{right:0;left:auto}.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top]{right:auto;bottom:auto}*/

.dropdown-item {

    display: block;

    width: 100%;

    padding: .5rem .75rem;

    clear: both;

    font-weight: 400;

    color: #9bbcd1;

    text-align: inherit;

    white-space: nowrap;

    background-color: transparent;

    border: 0

}



.dropdown-item:focus, .dropdown-item:hover {

    color: #dcf3ff;

    text-decoration: none

}



.dropdown-item.active, .dropdown-item:active {

    color: #dcf3ff;

    text-decoration: none;

    background-color: #2e2f4d

}



.dropdown-item.disabled, .dropdown-item:disabled {

    color: #9fbcce;

    pointer-events: none;

    background-color: transparent

}



/*.dropdown-menu.show{display:block}*/

.dropdown-header {

    display: block;

    padding: .5rem .75rem;

    margin-bottom: 0;

    font-size: .875rem;

    white-space: nowrap

}



.nav {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    padding-left: 0;

    margin-bottom: 0;

    list-style: none

}



.flex-sm {

    justify-content: space-between;

    display: flex;

    flex-wrap: nowrap

}



.screen-500 .game__about .flex-sm, .screen-640 .game__about .flex-sm {

    justify-content: center;

    flex-wrap: wrap;

    text-align: center

}



.alert {

    position: relative;

    padding: 1.5rem 2rem;

    margin-bottom: 1rem;

    border: 0 solid transparent;

    border-radius: .25rem

}



.alert-success {

    color: #d5f3e2;

    background-color: #27ad62;

    border-color: #c4efd7

}



.alert-success hr {

    border-top-color: #b0eac9

}



.alert-success .alert-link {

    color: #ade8c7

}



.alert-warning {

    color: #fff2d3;

    background-color: #e0a91d;

    border-color: #ffedc1

}



.alert-warning hr {

    border-top-color: #ffe6a8

}



.alert-warning .alert-link {

    color: #ffe3a0

}



.alert-dark {

    color: #d2d4d6;

    background-color: #232134;

    border-color: #c0c3c5

}



.alert-dark hr {

    border-top-color: #b3b6b9

}



.alert-dark .alert-link {

    color: #b7bbbe

}



.card {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    min-width: 0;

    word-wrap: break-word;

    background-color: #2e2f4d;

    background-clip: border-box;

    border: 0 solid rgba(0, 0, 0, .125);

    border-radius: .25rem

}



#category-subcategories .card {

    margin-bottom: .6rem

}



.card-body {

    -webkit-box-flex: 1;

    -ms-flex: 1 1 auto;

    flex: 1 1 auto;

    padding: 1rem

}



.card-body.mobile-body {

    padding: 1rem;

    flex-wrap: wrap;

    justify-content: center

}



.card-body__title {

    font-size: 1.1rem;

    color: #dcf3ff;

    margin-bottom: 1rem;

    font-weight: 400

}



.card-subtitle {

    margin-bottom: 0

}



.card-text:last-child {

    margin-bottom: 0

}



.card-header {

    padding: .8rem;

    margin-bottom: 0;

    color: #dcf3ff;

    background-color: #2f414c;

    border-bottom: 0 solid rgba(0, 0, 0, .125)

}



.card-header:first-child {

    border-radius: .25rem .25rem 0 0

}



.card-footer {

    padding: 2.1rem 2.2rem;

    background-color: #2f414c;

    border-top: 0 solid rgba(0, 0, 0, .125)

}



.card-footer:last-child {

    border-radius: 0 0 .25rem .25rem

}



.card-img-top {

    width: 100%;

    border-top-left-radius: .25rem;

    border-top-right-radius: .25rem

}



.breadcrumb {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    padding: 0;

    margin-bottom: 1rem;

    list-style: none;

    background-color: transparent;

    border-radius: .25rem

}



.breadcrumb-item + .breadcrumb-item {

    padding-left: .5rem

}



.breadcrumb-item + .breadcrumb-item::before {

    display: inline-block;

    padding-right: .5rem;

    color: #B4C8CF;

    content: "/"

}



.breadcrumb-item + .breadcrumb-item:hover::before {

    text-decoration: underline

}



.breadcrumb-item + .breadcrumb-item:hover::before {

    text-decoration: none

}



.breadcrumb-item.active {

    color: #dcf3ff

}



.pagination {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    padding-left: 0;

    list-style: none;

    border-radius: .25rem

}



.page-link {

    position: relative;

    display: block;

    padding: 0 0;

    margin-left: 0;

    line-height: 1.25;

    color: #9bbcd1;

    background-color: #27274a;

    border: 0 solid #dee2e6

}



.page-link:hover {

    z-index: 2;

    color: #dcf3ff;

    text-decoration: none;

    background-color: #232134;

    border-color: #dee2e6

}



.page-link:focus {

    z-index: 2;

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none

}



.page-item:first-child .page-link {

    margin-left: 0;

    border-top-left-radius: .25rem;

    border-bottom-left-radius: .25rem

}



.page-item:last-child .page-link {

    border-top-right-radius: .25rem;

    border-bottom-right-radius: .25rem

}



.page-item.active .page-link {

    z-index: 1;

    color: #f0f6f9;

    background-color: #2e2f4d;

    border-color: #f0f6f9

}



.page-item.disabled .page-link {

    color: #537082;

    pointer-events: none;

    cursor: auto;

    background-color: #27274a;

    border-color: #dee2e6

}



@-webkit-keyframes progress-bar-stripes {

    from {

        background-position: 3px 0

    }

    to {

        background-position: 0 0

    }

}



@keyframes progress-bar-stripes {

    from {

        background-position: 3px 0

    }

    to {

        background-position: 0 0

    }

}



.progress {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    height: 3px;

    overflow: hidden;

    font-size: .75rem;

    background-color: #232134;

    border-radius: .25rem

}



.progress-bar {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    background-color: #dcf3ff;

    -webkit-transition: width .6s ease;

    transition: width .6s ease

}



@media (prefers-reduced-motion: reduce) {

    .progress-bar {

        -webkit-transition: none;

        transition: none

    }

}



.modal-open, .overflow-hidden {

    overflow: hidden

}



.modal-open .modal {

    overflow-x: hidden;

    overflow-y: auto

}



.modal {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 10050;

    display: none;

    width: 100%;

    height: 100%;

    overflow: hidden;

    outline: 0

}



.modal-dialog {

    position: relative;

    width: auto;

    margin: .5rem;

    pointer-events: none

}



.modal.fade .modal-dialog {

    -webkit-transition: -webkit-transform .3s ease-out;

    transition: -webkit-transform .3s ease-out;

    transition: transform .3s ease-out;

    transition: transform .3s ease-out, -webkit-transform .3s ease-out;

    -webkit-transform: translate(0, -50px);

    transform: translate(0, -50px)

}



@media (prefers-reduced-motion: reduce) {

    .modal.fade .modal-dialog {

        -webkit-transition: none;

        transition: none

    }

}



.modal.show .modal-dialog {

    -webkit-transform: none;

    transform: none

}



.modal-dialog-scrollable {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    max-height: calc(100% - 1rem)

}



.modal-dialog-scrollable .modal-content {

    max-height: calc(100vh - 1rem);

    overflow: hidden

}



.modal-dialog-scrollable .modal-footer, .modal-dialog-scrollable .modal-header {

    -ms-flex-negative: 0;

    flex-shrink: 0

}



.modal-dialog-scrollable .modal-body {

    overflow-y: auto

}



.modal-dialog-centered {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    min-height: calc(100% - 1rem)

}



.modal-dialog-centered::before {

    display: block;

    height: calc(100vh - 1rem);

    content: ""

}



.modal-dialog-centered.modal-dialog-scrollable {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    height: 100%

}



.modal-dialog-centered.modal-dialog-scrollable .modal-content {

    max-height: none

}



.modal-dialog-centered.modal-dialog-scrollable::before {

    content: none

}



.modal-content {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    width: 100%;

    color: #436c84;

    pointer-events: auto;

    background-color: #f0f6f9;

    background-clip: padding-box;

    border: 0 solid rgba(0, 0, 0, .2);

    border-radius: .3rem;

    outline: 0

}



.modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 10040;

    width: 100vw;

    height: 100vh;

    background-color: #232134

}



.modal-backdrop.fade {

    opacity: 0

}



.modal-backdrop.show {

    opacity: .5

}



.modal-header {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    padding: 25px 30px 0;

    border-bottom: 0 solid #dee2e6;

    border-top-left-radius: .3rem;

    border-top-right-radius: .3rem

}



.modal-header .close {

    padding: 25px 30px 0;

    margin: -1rem -1rem -1rem auto

}



.modal-title {

    margin-bottom: 0;

    line-height: 1.5

}



.modal-body {

    position: relative;

    -webkit-box-flex: 1;

    -ms-flex: 1 1 auto;

    flex: 1 1 auto;

    padding: 25px 30px

}



.modal-footer {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

    padding: 25px 30px;

    border-top: 0 solid #dee2e6;

    border-bottom-right-radius: .3rem;

    border-bottom-left-radius: .3rem

}



.modal-footer > :not(:first-child) {

    margin-left: .25rem

}



.modal-footer > :not(:last-child) {

    margin-right: .25rem

}



.modal-scrollbar-measure {

    position: absolute;

    top: -9999px;

    width: 50px;

    height: 50px;

    overflow: scroll

}



@media (min-width: 576px) {

    .modal-dialog {

        max-width: 500px;

        margin: 1.75rem auto

    }



    .modal-dialog-scrollable {

        max-height: calc(100% - 3.5rem)

    }



    .modal-dialog-scrollable .modal-content {

        max-height: calc(100vh - 3.5rem)

    }



    .modal-dialog-centered {

        min-height: calc(100% - 3.5rem)

    }



    .modal-dialog-centered::before {

        height: calc(100vh - 3.5rem)

    }



    .modal-sm {

        max-width: 300px

    }

}



@media (min-width: 992px) {

    .modal-lg, .modal-xl {

        max-width: 800px

    }

}



@media (min-width: 1200px) {

    .modal-xl {

        max-width: 1140px

    }

}



.tooltip {

    position: absolute;

    z-index: 10070;

    display: block;

    margin: 0;

    font-family: Arial, sans-serif;

    font-style: normal;

    font-weight: 400;

    line-height: 1.5;

    text-align: left;

    text-align: start;

    text-decoration: none;

    text-shadow: none;

    text-transform: none;

    letter-spacing: normal;

    word-break: normal;

    word-spacing: normal;

    white-space: normal;

    line-break: auto;

    font-size: .95rem;

    word-wrap: break-word;

    opacity: 0

}



.tooltip.show {

    opacity: 1

}



.tooltip .arrow {

    position: absolute;

    display: block;

    width: .8rem;

    height: .4rem

}



.tooltip .arrow::before {

    position: absolute;

    content: "";

    border-color: transparent;

    border-style: solid

}



.bs-tooltip-auto[x-placement^=top], .bs-tooltip-top {

    padding: .4rem 0

}



.bs-tooltip-auto[x-placement^=top] .arrow, .bs-tooltip-top .arrow {

    bottom: 0

}



.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {

    top: 0;

    border-width: .4rem .4rem 0;

    border-top-color: #f0f6f9

}



.bs-tooltip-auto[x-placement^=right], .bs-tooltip-right {

    padding: 0 .4rem

}



.bs-tooltip-auto[x-placement^=right] .arrow, .bs-tooltip-right .arrow {

    left: 0;

    width: .4rem;

    height: .8rem

}



.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {

    right: 0;

    border-width: .4rem .4rem .4rem 0;

    border-right-color: #f0f6f9

}



.bs-tooltip-auto[x-placement^=bottom], .bs-tooltip-bottom {

    padding: .4rem 0

}



.bs-tooltip-auto[x-placement^=bottom] .arrow, .bs-tooltip-bottom .arrow {

    top: 0

}



.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {

    bottom: 0;

    border-width: 0 .4rem .4rem;

    border-bottom-color: #f0f6f9

}



.bs-tooltip-auto[x-placement^=left], .bs-tooltip-left {

    padding: 0 .4rem

}



.bs-tooltip-auto[x-placement^=left] .arrow, .bs-tooltip-left .arrow {

    right: 0;

    width: .4rem;

    height: .8rem

}



.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {

    left: 0;

    border-width: .4rem 0 .4rem .4rem;

    border-left-color: #f0f6f9

}



.tooltip-inner {

    max-width: 200px;

    padding: .7rem 1.1rem;

    color: #232134;

    text-align: center;

    background-color: #f0f6f9;

    border-radius: .25rem

}



@-webkit-keyframes spinner-border {

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@keyframes spinner-border {

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@keyframes spinner-grow {

    0% {

        -webkit-transform: scale(0);

        transform: scale(0)

    }

    50% {

        opacity: 1

    }

}



.d-none {

    display: none !important

}



.d-block {

    display: block !important

}



.d-flex {

    display: -webkit-box !important;

    display: -ms-flexbox !important;

    display: flex !important

}



.d-inline-flex {

    display: -webkit-inline-box !important;

    display: -ms-inline-flexbox !important;

    display: inline-flex !important

}



.flex-grow {

    flex-grow: 1

}



@media (min-width: 576px) {

    .d-sm-block {

        display: block !important

    }

}



@media (min-width: 768px) {

    .d-md-flex {

        display: -webkit-box !important;

        display: -ms-flexbox !important;

        display: flex !important

    }

}



@media (min-width: 992px) {

    .d-lg-block {

        display: block !important

    }

}



@media (min-width: 1200px) {

    .d-xl-none {

        display: none !important

    }



    .d-xl-block {

        display: block !important

    }

}



.flex-wrap {

    -ms-flex-wrap: wrap;

    flex-wrap: wrap

}



.position-relative {

    position: relative !important

}



.justify-content-center {

    -webkit-box-pack: center !important;

    -ms-flex-pack: center !important;

    justify-content: center !important

}



.pt-0 {

    padding-top: 0 !important

}



.pb-0 {

    padding-bottom: 0 !important

}



.mb-0 {

    margin-bottom: 0 !important

}



.mt-0 {

    margin-top: 0 !important

}



.mr-1 {

    margin-right: .25rem !important

}



.mt-2 {

    margin-top: .5rem !important

}



.mb-2 {

    margin-bottom: .5rem !important

}



.mb-15 {

    margin-bottom: 1.5rem !important

}



.hide {

    display: none !important

}



.show {

    display: block !important

}



.text-italic {

    font-style: italic !important

}



.text-left {

    text-align: left !important

}



.text-right {

    text-align: right !important

}



.text-center {

    text-align: center !important

}



.text-lowercase {

    text-transform: lowercase !important

}



.text-transform-none {

    text-transform: none !important

}



.text-success {

    color: #2cc56f !important

}



.height-auto {

    height: auto !important

}



a.text-success:focus, a.text-success:hover {

    color: #1e864c !important

}



.text-warning {

    color: #ffc021 !important

}



a.text-warning:focus, a.text-warning:hover {

    color: #d49700 !important

}



@media print {

    *, ::after, ::before {

        text-shadow: none !important;

        -webkit-box-shadow: none !important;

        box-shadow: none !important

    }



    a:not(.btn) {

        text-decoration: underline

    }



    img {

        page-break-inside: avoid

    }



    h2, h3, p {

        orphans: 3;

        widows: 3

    }



    h2, h3 {

        page-break-after: avoid

    }



    @page {

        size: a3

    }



    body {

        min-width: 992px !important

    }



    .table {

        border-collapse: collapse !important

    }

}



* {

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale

}



:active, :focus {

    outline: 0

}



html {

    font-size: 14px

}



.cursor-pointer, a {

    cursor: pointer

}



button, input, select, textarea {

    font-family: Arial, sans-serif

}



.main {

    position: relative

}



.content {

    margin-top: -90px

}



@media (min-width: 1200px) {

    .content {

        padding: 0 1rem 0 16rem

    }



    .contgame {

        padding: 1.2rem 1rem

    }

}



@media (max-width: 1199.98px) {

    .content.mobile-content {

        padding: 0 0 2rem

    }

}



.content__inner {

    margin: auto

}



.content__inner:not(.content__inner--sm) {

    max-width: 1250px

}



.content__inner--sm {

    max-width: 800px

}



.content__title {

    padding: 0 1.8rem;

    text-transform: uppercase;

    margin: .7rem 0 1.2rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: end;

    -ms-flex-align: end;

    align-items: flex-end

}



.content__title > h1 > small {

    font-size: 1rem;

    display: block;

    margin-top: .1rem;

    color: #9bbcd1;

    text-transform: none

}



.content__title > .actions {

    color: #B4C8CF;

    margin-left: auto

}



.content__title > .actions a {

    color: #2cc56f;

    -webkit-transition: color .3s;

    transition: color .3s;

    font-size: .95rem;

    padding-left: 1rem

}



.content__title > .actions a.active, .content__title > .actions a:hover {

    color: #dcf3ff

}



.subtitle {

    margin-top: 10px;

    margin-left: unset !important;

    justify-content: center;

    flex-basis: 100%

}



.bg-gradient-purple {

    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ac66f5), to(#cb9ff9)) !important;

    background: linear-gradient(90deg, #ac66f5 0, #cb9ff9 100%) !important

}



.text-purple {

    color: #ac66f5 !important

}



.bg-gradient-red {

    background: -webkit-gradient(linear, left top, right top, color-stop(0, #e53935), to(#ec6e6b)) !important;

    background: linear-gradient(90deg, #e53935 0, #ec6e6b 100%) !important

}



.text-red {

    color: #e53935 !important

}



.bg-gradient-amber {

    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ffc021), to(#ffd15e)) !important;

    background: linear-gradient(90deg, #ffc021 0, #ffd15e 100%) !important

}



.text-amber {

    color: #ffc021 !important

}



.bg-gradient-blue {

    background: -webkit-gradient(linear, left top, right top, color-stop(0, #27a4fb), to(#63bdfc)) !important;

    background: linear-gradient(90deg, #27a4fb 0, #63bdfc 100%) !important

}



.text-blue {

    color: #27a4fb !important

}



.bg-gradient-green {

    background: -webkit-gradient(linear, left top, right top, color-stop(0, #2cc56f), to(#55d98f)) !important;

    background: linear-gradient(90deg, #2cc56f 0, #55d98f 100%) !important

}



.text-green {

    color: #2cc56f !important

}



.text-cyan {

    color: #00f3e7 !important

}



.bg-gradient-lime {

    background: -webkit-gradient(linear, left top, right top, color-stop(0, #8bc34a), to(#a8d278)) !important;

    background: linear-gradient(90deg, #8bc34a 0, #a8d278 100%) !important

}



.text-lime {

    color: #8bc34a !important

}



.bg-gradient-orange {

    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ff5722), to(#ff865f)) !important;

    background: linear-gradient(90deg, #ff5722 0, #ff865f 100%) !important

}



.text-orange {

    color: #ff5722 !important

}



.bg-gradient-pink {

    background: -webkit-gradient(linear, left top, right top, color-stop(0, #e91e63), to(#ee568a)) !important;

    background: linear-gradient(90deg, #e91e63 0, #ee568a 100%) !important

}



.text-pink {

    color: #e91e63 !important

}



.header {

    height: 160px;

    -webkit-transition: top .3s;

    transition: top .3s;

    position: relative

}



.header__main {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex

}



@media (min-width: 1200px) {

    .header__main {

        padding: 1.2rem

    }

}



@media (min-width: 768px) and (max-width: 1199.98px) {

    .header__main {

        padding: 1.2rem

    }

}



@media (max-width: 767.98px) {

    .flex-sm {

        justify-content: center;

        flex-wrap: wrap;

        text-align: center

    }



    .header__main {

        padding: .9rem

    }

}



.logo {

    text-align: center;

    -ms-flex-negative: 0;

    flex-shrink: 0

}



@media (min-width: 1200px) {

    .logo {

        width: 16rem

    }

}



.logo a {

    height: 45px;

    color: #fff;

    font-weight: 400;

    font-size: 1.7rem;

    line-height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center

}



@media (max-width: 360px) {

    .logo a {

        font-size: 1.2rem

    }

}



.search {

    position: relative;

    -webkit-box-flex: 1;

    -ms-flex: 1 1 auto;

    flex: 1 1 auto;

    margin-right: 1.5rem;

    -webkit-transition: opacity .3s, -webkit-transform .3s;

    transition: opacity .3s, -webkit-transform .3s;

    transition: transform .3s, opacity .3s;

    transition: transform .3s, opacity .3s, -webkit-transform .3s

}



@media (max-width: 1199.98px) {

    .search {

        position: fixed;

        left: 2rem;

        top: 2rem;

        width: calc(100% - 4rem);

        z-index: 1;

        -webkit-transform: translate3d(0, -20%, 0);

        transform: translate3d(0, -20%, 0);

        opacity: 0;

        pointer-events: none

    }

}



.search__input {

    background-color: #2e2f4d;

    border: 0;

    height: 3.25rem;

    padding: 0 2rem 0 3.25rem;

    border-radius: .25rem;

    -webkit-transition: background-color .3s;

    transition: background-color .3s;

    color: #9bbcd1;

    width: 100%;

    height: 3.25rem

}



.search__input::-webkit-input-placeholder {

    color: #9bbcd1

}



.search__input:-moz-placeholder {

    color: #9bbcd1

}



.search__input::-moz-placeholder {

    color: #9bbcd1

}



.search__input:-ms-input-placeholder {

    color: #9bbcd1

}



.search__helper, .search__reset {

    position: absolute;

    left: 0;

    top: 0;

    -webkit-transition: opacity .3s;

    transition: opacity .3s;

    height: 3.25rem;

    cursor: pointer;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

    width: 2.5rem;

    height: 3.25rem

}



.search__helper {

    color: #dcf3ff;

    font-size: 1.25rem

}



.search__reset {

    opacity: 0;

    font-size: 1.75rem;

    color: #232134

}



@media (max-width: 1199.98px) {

    .search--focused {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

        opacity: 1;

        pointer-events: auto

    }

}



.search--focused .search__input {

    -webkit-box-shadow: none;

    box-shadow: none;

    outline: 0;

    background-color: #f0f6f9;

    color: #36576b

}



.search--focused .search__input::-webkit-input-placeholder {

    color: transparent

}



.search--focused .search__input:-moz-placeholder {

    color: transparent

}



.search--focused .search__input::-moz-placeholder {

    color: transparent

}



.search--focused .search__input:-ms-input-placeholder {

    color: transparent

}



.search--focused > .search__helper {

    opacity: 0

}



.search--focused > .search__reset {

    opacity: 1

}



.top-nav {

    padding-left: 0;

    list-style: none;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    margin-left: auto;

    margin-bottom: 0

}



.top-nav > li > a {

    margin-right: .75rem;

    min-width: 3.25rem;

    height: 3.25rem;

    padding: 0 5px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    border-radius: .25rem;

    border: 1px solid #2e2f4d;

    font-size: 1.5rem;

    color: #dcf3ff;

    -webkit-transition: background-color .3s, color .3s;

    transition: background-color .3s, color .3s

}



.top-nav > li > a:hover {

    background-color: #2e2f4d

}



.top-nav > li > a.text {

    font-size: .95rem

}



.top-nav > li.show > a {

    color: #232134;

    background-color: #2e2f4d

}



.zwicon-hamburger-menu:before {

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    position: absolute

}



.navigation-toggle {

    border-radius: .25rem;

    background-color: #2e2f4d;

    color: #dcf3ff;

    font-size: 1.75rem;

    margin-right: 1.2rem;

    position: relative;

    -ms-flex-negative: 0;

    flex-shrink: 0;

    width: 3.25rem;

    height: 3.25rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.navigation-toggle:hover {

    background-color: #354a56;

    cursor: pointer

}



.toggles {

    position: relative;

    margin-top: .3rem;

    width: 16rem;

    text-align: center;

    z-index: 1

}



.toggles > a {

    display: inline-block;

    margin-right: .75rem;

    position: relative

}



.toggles > a > i {

    width: 45px;

    height: 45px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    background-color: #2e2f4d;

    border-radius: 50%;

    font-size: 1.5rem;

    color: #dcf3ff;

    cursor: pointer

}



.toggles > a:hover > i {

    background-color: #354a56

}



.toggles__notify:after {

    content: '';

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background-color: #f0f6f9;

    position: absolute;

    left: 0;

    right: 0;

    margin-left: .2rem;

    -webkit-animation-name: flash;

    animation-name: flash;

    -webkit-animation-duration: 2s;

    animation-duration: 2s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite

}



.sidebar--active {

    opacity: 1 !important;

    -webkit-transform: translate3d(0, 0, 0) !important;

    transform: translate3d(0, 0, 0) !important;

    z-index: 10000 !important

}



.sidebar__header {

    padding: 1.75rem 2rem 1.5rem;

    background-color: #232134;

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center

}



.sidebar__header > h2 {

    text-transform: uppercase

}



.sidebar__header > h2 > small {

    font-size: .95rem;

    color: #B4C8CF;

    text-transform: none;

    display: block;

    margin-top: .25rem

}



.sidebar__header > .actions {

    position: absolute;

    top: 1.75rem;

    right: 1.5rem

}



.sidebar__close {

    width: 40px;

    height: 40px;

    font-size: 2rem;

    border: 1px solid #2e2f4d;

    border-radius: 50%;

    line-height: 100%;

    margin: 0 1rem 0 .25rem;

    cursor: pointer;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.sidebar__close:hover {

    background-color: #27274a

}



.sidebar-backdrop {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 9999;

    cursor: pointer;

    background-color: #000;

    opacity: .4

}



.navigation {

    width: 22rem;

    left: 0

}



@media (min-width: 1200px) {

    .navigation {

        position: absolute;

        width: 16rem;

        top: 10px

    }



    .navgame {

        width: 13rem;

        left: 0;

        top: 5px

    }

}



@media (max-width: 1199.98px) {

    .navigation {

        position: fixed;

        top: 0;

        height: 100%;

        background-color: #27274a;

        z-index: 10;

        -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .5);

        box-shadow: 0 0 30px rgba(0, 0, 0, .5);

        -webkit-transition: opacity .3s, -webkit-transform .3s;

        transition: opacity .3s, -webkit-transform .3s;

        transition: opacity .3s, transform .3s;

        transition: opacity .3s, transform .3s, -webkit-transform .3s;

        opacity: 0;

        -webkit-transform: translate3d(-20%, 0, 0);

        transform: translate3d(-20%, 0, 0)

    }



    .navigation:not(.sidebar--active) {

        pointer-events: none

    }

}



.navigation .noscrollbar, .navigation .scrollbar {

    padding: 1.2rem

}



@media (max-width: 1199.98px) {

    .navigation .noscrollbar, .navigation .scrollbar {

        height: 100%

    }

}



.lock-scroll {

    height: 100vh;

    overflow-y: hidden

}



.sprite {

    background-image: url(../images/categories.png);

    background-repeat: no-repeat;

    display: block

}



.sprite-3d-games {

    width: 20px;

    height: 20px;

    background-position: -2px -2px

}



.text-active-3d-games.active {

    color: #27a4fb !important

}



.sprite-action-games {

    width: 20px;

    height: 20px;

    background-position: -26px -2px

}



.text-active-action-games.active {

    color: #ffc021 !important

}



.sprite-adventure-games {

    width: 20px;

    height: 20px;

    background-position: -50px -2px

}



.text-active-adventure-games.active {

    color: #ac66f5 !important

}



.sprite-board-games {

    width: 20px;

    height: 20px;

    background-position: -74px -2px

}



.text-active-board-games.active {

    color: #2cc56f !important

}



.sprite-casual-games {

    width: 20px;

    height: 20px;

    background-position: -2px -26px

}



.text-active-casual-games.active {

    color: #ff5722 !important

}



.sprite-exclusive-games {

    width: 20px;

    height: 20px;

    background-position: -26px -26px

}



.text-active-exclusive-games.active {

    color: #b7f1ff !important

}



.sprite-girls-games {

    width: 20px;

    height: 20px;

    background-position: -50px -26px

}



.text-active-girls-games.active {

    color: #f79ce0 !important

}



.sprite-html5-games {

    width: 20px;

    height: 20px;

    background-position: -74px -26px

}



.text-active-html5-games.active {

    color: #f7aad0 !important

}



.sprite-movie-games {

    width: 20px;

    height: 20px;

    background-position: -2px -50px

}



.text-active-movie-games.active {

    color: #9ccf63 !important

}



.sprite-multiplayer-games {

    width: 20px;

    height: 20px;

    background-position: -26px -50px

}



.text-active-multiplayer-games.active {

    color: #2cc56f !important

}



.sprite-racing-games {

    width: 20px;

    height: 20px;

    background-position: -50px -50px

}



.text-active-racing-games.active {

    color: #f88c87 !important

}



.sprite-role-playing-games {

    width: 20px;

    height: 20px;

    background-position: -2px -74px

}



.text-active-role-playing-games.active {

    color: #ffbf1f !important

}



.sprite-simulation-games {

    width: 20px;

    height: 20px;

    background-position: -26px -74px

}



.text-active-simulation-games.active {

    color: #27a4fb !important

}



.sprite-skill-games {

    width: 20px;

    height: 20px;

    background-position: -50px -74px

}



.text-active-skill-games.active {

    color: #89c348 !important

}



.sprite-sports-games {

    width: 20px;

    height: 20px;

    background-position: -74px -74px

}



.text-active-sports-games.active {

    color: #00f3e7 !important

}



.sprite-thinking-games {

    width: 20px;

    height: 20px;

    background-position: -98px -2px

}



.sprite-educational-games {

    width: 20px;

    height: 20px;

    background-position: -98px -50px

}



.sprite-flying-games {

    width: 20px;

    height: 20px;

    background-position: -98px -74px

}



.sprite-mmo-games {

    width: 20px;

    height: 20px;

    background-position: -2px -98px

}



.sprite-unblocked-games-66 {

    width: 20px;

    height: 20px;

    background-position: -98px -26px

}



.text-active-thinking-games.active {

    color: #9979c0 !important

}



.navigation__menu > li > a.active {

    color: #dcf3ff;

    background-color: #232134

}



.navigation__menu > li > a.active > i {

    opacity: 1

}



.navigation__menu {

    list-style: none;

    margin: 0;

    padding: 0

}



.navigation__menu a {

    display: block;

    color: #B4C8CF;

    -webkit-transition: color .3s;

    transition: color .3s

}



.navigation__menu a:hover {

    color: #dcf3ff

}



.navigation__menu a:hover > i {

    opacity: 1

}



.navigation__menu > li > a {

    border-radius: .25rem;

    font-size: .95rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: .6rem

}



.navigation__menu > li > a > i {

    font-size: 1.5rem;

    margin-right: 1rem;

    position: relative;

    opacity: .65;

    -webkit-transition: opacity .3s;

    transition: opacity .3s;

    top: -1px

}



.navigation__close {

    background-color: #232134;

    display: block;

    padding: 1.25rem 2.5rem

}



.navigation__close > i {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: inline-block;

    background-color: #27274a

}



.navigation__card {

    margin-top: 2rem

}



.navigation__card h2.card-title, .navigation__card h6.card-subtitle {

    margin-bottom: 1rem

}



.navigation__card h6.card-subtitle {

    margin-top: -1.05rem

}



.navigation__card > ul {

    padding: 0;

    list-style: none

}



.navigation__card a {

    display: block;

    color: #B4C8CF;

    -webkit-transition: color .3s;

    transition: color .3s

}



.navigation__card a:hover {

    color: #dcf3ff

}



.navigation__card > ul > li {

    display: block;

    margin-bottom: .25rem

}



.navigation__card > ul > li > a:hover span {

    opacity: 1

}



.navigation__card > ul > li > a {

    font-size: .9rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    display: block

}



.navigation__card > ul > li > a > span {

    text-align: initial;

    margin-right: .2rem;

    width: 44px;

    padding: .2rem .3rem;

    position: relative;

    border: 1px solid #2e2f4d;

    font-size: 75%;

    background-color: #27274a

}



.navigation__card > ul > li > a > .btn--icon-text > i {

    font-size: 1rem;

    margin: 0 0 0 -.25rem;

    color: #2cc56f

}



.navigation__card > p {

    font-size: .95rem

}



.navigation__card .tags {

    padding: 0

}



.notifications {

    max-width: 25rem;

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    z-index: 10;

    background-color: #27274a;

    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .5);

    box-shadow: 0 0 30px rgba(0, 0, 0, .5);

    opacity: 0;

    -webkit-transition: opacity .3s, -webkit-transform .3s;

    transition: opacity .3s, -webkit-transform .3s;

    transition: opacity .3s, transform .3s;

    transition: opacity .3s, transform .3s, -webkit-transform .3s

}



.notifications:not(.sidebar--active) {

    pointer-events: none

}



@media (min-width: 1200px) {

    .notifications {

        left: 0;

        -webkit-transform: translate3d(-20%, 0, 0);

        transform: translate3d(-20%, 0, 0)

    }



    .navgame .scrollbar {

        padding: 1rem 10px 0

    }

}



@media (max-width: 1199.98px) {

    .notifications {

        right: 0;

        -webkit-transform: translate3d(20%, 0, 0);

        transform: translate3d(20%, 0, 0)

    }



    .notifications .sidebar__close {

        -webkit-transform: rotate(180deg);

        transform: rotate(180deg);

        padding-right: 2px

    }

}



.notifications__panel:not(.active) {

    display: none

}



.notifications__body {

    height: calc(100vh - 85px)

}



.notifications__body .scrollbar {

    padding: 1.5rem 0

}



.notifications__body .scrollbar.my-g {

    padding: 1.5rem

}



.top-game-btns {

    margin: 0 3rem .3rem;

    display: flex;

    justify-content: space-evenly

}



.avatar-char, .avatar-img {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-right: 1rem;

    -ms-flex-negative: 0;

    flex-shrink: 0

}



.avatar-char {

    line-height: 2.9rem;

    text-transform: uppercase;

    font-size: 1.2rem;

    text-align: center;

    color: #dcf3ff;

    background-color: #27274a;

    font-style: normal;

    text-shadow: 0 0 15px rgba(255, 255, 255, .55)

}



.avatar-char > i {

    line-height: 2.9rem;

    font-size: 1.5rem;

    text-shadow: 0 0 0 #fff

}



.actions {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center

}



.actions__item {

    font-size: 1.5rem;

    cursor: pointer;

    color: #9bbcd1;

    -webkit-transition: background-color .3s, color .3s;

    transition: background-color .3s, color .3s;

    width: 35px;

    height: 35px;

    border-radius: 50%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.actions__item > i {

    display: block;

    width: 100%;

    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.actions__item.show, .actions__item:hover {

    background-color: rgba(57, 78, 90, .35);

    color: #dcf3ff

}



.tags {

    padding: .5rem

}



.tags > a {

    display: inline-block;

    padding: .25rem 1rem;

    border: 1px solid #415969;

    color: #9bbcd1;

    margin: 0 .3rem .5rem 0;

    -webkit-transition: border-color .3s;

    transition: border-color .3s;

    border-radius: .25rem

}



.tags > a:hover {

    border-color: #4b6679;

    color: #dcf3ff

}



.footer {

    text-align: center;

    color: #b7d3e4

}



.footer p {

    font-size: .9rem

}



.footer small {

    color: #B4C8CF

}



.mobileul ul {

    list-style-position: inside;

    padding-inline-start: 0

}



.footer__menu, .list-links {

    font-size: .95rem

}



.footer__menu > a, .list-links > a {

    margin: 0 .75rem 0 0;

    color: #B4C8CF;

    display: inline-block;

    -webkit-transition: color .3s;

    transition: color .3s;

    position: relative

}



.footer__menu > a + a:before, .list-links > a + a:before {

    content: '';

    position: absolute;

    left: -7px;

    top: .55rem;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background-color: #B4C8CF

}



.footer__menu > a:hover, .list-links > a:hover {

    color: #dcf3ff

}



.list {

    list-style: none;

    padding-left: 0

}



.list > li:before {

    font-family: zwicon;

    margin-right: 1.1rem;

    font-size: 1.25rem

}



.listview__item {

    padding: 1.15rem 2.2rem;

    -webkit-transition: background-color .3s, border-color .3s;

    transition: background-color .3s, border-color .3s;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center

}



.listview__item .actions {

    -ms-flex-item-align: start;

    align-self: flex-start;

    margin: -.5rem -1rem 0 auto

}



.listview__item > .avatar-char, .listview__item > .avatar-img {

    position: relative;

    top: -2px

}



.listview__content {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    min-width: 0

}



.listview__content > h4 {

    color: #b7d3e4;

    position: relative

}



.listview__content > h4 > small {

    float: right;

    color: #B4C8CF;

    font-weight: 500;

    font-size: .85rem;

    margin-top: .1rem

}



.listview__content > h4 + p {

    color: #B4C8CF;

    margin-top: .4rem;

    font-size: .9rem

}



.listview__content > p {

    margin-bottom: 0

}



.listview--hover .listview__item:hover {

    border-color: transparent !important;

    background-color: rgba(57, 78, 90, .25)

}



.listview--truncate .listview__item .listview__content > h4, .listview--truncate .listview__item .listview__content > p {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap

}



.toolbar {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -ms-flex-direction: row;

    flex-direction: row;

    height: 4.5rem;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: .05rem 2.2rem 0;

    position: relative

}



.toolbar:not(.toolbar--inner) {

    background-color: #2e2f4d;

    border-radius: .25rem;

    margin-bottom: 30px;

    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .05);

    box-shadow: 0 3px 3px rgba(0, 0, 0, .05)

}



.toolbar .actions {

    margin: .05rem -.8rem 0 auto

}



.toolbar--inner {

    border-radius: .25rem .25rem 0 0;

    background-color: #30434e

}



.toolbar--alt {

    background-color: #27274a

}



.toolbar--small {

    height: 3.5rem

}



.toolbar__label {

    margin: 0;

    font-size: 1.1rem

}



@media (max-width: 1199.98px) {

    .games {

        align-items: center;

        justify-content: center

    }

}



.games-center {

    align-items: center;

    justify-content: center

}



.games > .col-145 > a.bw-cursor, .games > .col-190 > a.bw-cursor, .games > .col-290 > a.bw-cursor {

    cursor: default

}



/*.game__actions .dropdown-menu,.games .dropdown-menu{background-color:#232134;padding:0}*//*.game__actions .dropdown-menu textarea.form-control,.games .dropdown-menu textarea.form-control{font-size:90%;font-family:monospace}*/

.game__play {

    position: relative;

    overflow: hidden

}



.mobilev img {

    width: 100%;

    height: auto;

    filter: blur(2px) brightness(.7);

    margin-bottom: -25px;

    margin-top: -25px

}



.mobilev .btn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    background-color: #27274a;

    color: #dcf3ff;

    font-size: 1.25rem;

    padding: 12px 18px;

    border: none;

    border-radius: .25rem;

    text-align: center;

    box-shadow: 0 0 10px 1px #B4C8CF

}



.col-145 .games__item {

    width: 145px;

    height: 139.15px;

    background-color: #2e2f4d;

    border-radius: .25rem;

    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .05);

    box-shadow: 0 3px 3px rgba(0, 0, 0, .05);

    padding: 0;

    text-align: center;

    margin-bottom: 6px

}



.col-190 .games__item {

    background-color: #2e2f4d;

    border-radius: .25rem;

    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .05);

    box-shadow: 0 3px 3px rgba(0, 0, 0, .05);

    padding: 0;

    text-align: center

}



.col-290 .games__item {

    width: 290px;

    height: 253px;

    background-color: #2e2f4d;

    border-radius: .25rem;

    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .05);

    box-shadow: 0 3px 3px rgba(0, 0, 0, .05);

    padding: 0;

    text-align: center;

    margin-bottom: 10px

}



.col-145 .games__item:hover, .col-190 .games__item:hover, .col-290 .games__item:hover {

    background-color: #232134

}



.games__img picture::before {

    position: absolute;

    top: 0;

    left: -75%;

    z-index: 2;

    display: block;

    content: '';

    width: 50%;

    height: 100%;

    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 100%);

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 100%);

    -webkit-transform: skewX(-25deg);

    transform: skewX(-25deg)

}



.games__img picture:hover::before {

    -webkit-animation: shine .75s;

    animation: shine .75s

}



@-webkit-keyframes shine {

    100% {

        left: 125%

    }

}



@keyframes shine {

    100% {

        left: 125%

    }

}



.games__type {

    position: absolute;

    right: 0;

    bottom: 0

}



.games .games__type > img, .gameslg .games__type > img {

    aspect-ratio: auto

}



.col-145 .games__img {

    width: 145px;

    height: 108.75px;

    display: block;

    overflow: hidden;

    position: relative

}



.col-190 .games__img {

    display: block;

    overflow: hidden;

    position: relative

}



.col-290 .games__img {

    width: 290px;

    height: 218px;

    display: block;

    overflow: hidden;

    position: relative

}



.col-145 .games__img picture {

    max-width: 145px;

    max-height: 108.75px;

    width: 100%;

    border-top-right-radius: .25rem;

    border-top-left-radius: .25rem

}



.col-190 .games__img picture {

    width: 100%;

    border-top-right-radius: .25rem;

    border-top-left-radius: .25rem

}



.col-290 .games__img picture {

    max-width: 290px;

    max-height: 218px;

    width: 100%;

    border-top-right-radius: .25rem;

    border-top-left-radius: .25rem

}



img.bw-img {

    -webkit-filter: grayscale(100%) !important;

    filter: grayscale(100%) !important

}



.games__info strong {

    color: #9bbcd1;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    display: block;

    font-weight: 400;

    font-size: .95rem;

    padding: .4rem

}



.games img, .gameslg img {

    -webkit-filter: saturate(1.3);

    filter: saturate(1.3);

    width: 100%;

    height: auto;

    /* aspect-ratio: 1.33 */

}



.games .col-190.col-390 picture > img {

    aspect-ratio: 2.8;

    margin-top: 5px

}



.gvideo video {

    position: absolute;

    left: 0;

    top: 0;

    object-fit: fill

}



@media (max-width: 575.98px) {

    .groups {

        margin: 0 -5px

    }



    .groups [class*=col-] {

        padding: 0 5px

    }

}



@media print {

    @page {

        margin: 0;

        size: auto

    }



    body {

        margin: 0 !important;

        padding: 0 !important;

        color: #36576b

    }



    body * {

        visibility: hidden

    }

}



.error {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    height: 100vh;

    width: 100%

}



.error__inner {

    max-width: 800px;

    width: 100%;

    text-align: center;

    padding: 2rem;

    border-radius: .3rem;

    background-color: #2e2f4d;

    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .05);

    box-shadow: 0 3px 3px rgba(0, 0, 0, .05)

}



.error__inner > h1 {

    font-size: 2rem;

    font-weight: 300;

    line-height: 100%;

    margin: 0

}



.error__inner > h1 > span {

    -webkit-transform: scale(-1, 1);

    transform: scale(-1, 1);

    display: inline-block

}



.error__inner > h2 {

    margin: 1rem 0;

    font-size: 1.25rem

}



.error__inner > p {

    color: #B4C8CF

}



.error__inner iframe {

    margin-top: 1.5rem

}



.w-pictures__body {

    margin: 0;

    padding: 2px;

    text-align: center;

    margin-bottom: 1.5rem

}



.w-pictures__body::after {

    display: block;

    clear: both;

    content: ""

}



.w-pictures__body > .spacer, .w-pictures__body > a {

    position: relative;

    padding: 0;

    display: block;

    border: 3px solid #2e2f4d

}



.w-pictures__body > .spacer {

    width: 146px;

    height: 115.5px;

    text-align: center;

    line-height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center

}



.w-pictures__body > .spacer > .spacer-content {

    position: absolute;

    left: 35%

}



.w-pictures__body > .spacer i {

    font-size: 2rem

}



.w-pictures__body > a img {

    width: 100%;

    height: auto;

    aspect-ratio: 1.33;

    border-radius: .25rem

}



.w-pictures__body > .spacer:hover, .w-pictures__body > a:hover {

    opacity: .9

}



.new-contact__header {

    background-color: #2f414c;

    text-align: center;

    padding: 30px 0;

    border-radius: .25rem .25rem 0 0

}



.new-contact__img {

    position: relative;

    display: inline-block

}



.new-contact__img > img {

    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 5px #27274a;

    box-shadow: 0 0 0 5px #27274a;

    width: 150px;

    height: 150px

}



@media (max-width: 767.98px) {

    .new-contact__img > img {

        width: 100px;

        height: 100px

    }

}



.new-contact__upload {

    position: absolute;

    bottom: 10px;

    left: 0;

    right: 0;

    margin: auto;

    font-size: 1.25rem;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: rgba(30, 42, 49, .5);

    color: #fff;

    -webkit-transition: background-color .3s;

    transition: background-color .3s;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.new-contact__upload:hover {

    color: #fff;

    background-color: #232134

}



.time {

    font-size: 2rem;

    text-align: center;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.time > span {

    background-color: #27274a;

    border-radius: .25rem;

    display: inline-block;

    margin: 0 10px;

    position: relative;

    height: 60px;

    width: 60px;

    padding-top: 2px;

    font-weight: 300;

    color: #dcf3ff;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.time > span + span:before {

    content: ':';

    position: absolute;

    left: -13px;

    color: #B4C8CF

}



/*.dropdown-menu{padding:.5rem}*/

.dropdown-item {

    font-size: .95rem;

    border-radius: .25rem;

    -webkit-transition: background-color .3s, color .3s;

    transition: background-color .3s, color .3s

}



.dropdown-item > [class*=zwicon-] {

    font-size: 1.25rem;

    vertical-align: top;

    position: relative;

    margin: 0 .25rem 0 -.25rem;

    width: 1.5rem

}



.dropdown-header {

    border-bottom: 1px solid #cbd7df;

    margin-bottom: .5rem;

    padding-bottom: .75rem;

    font-weight: 500

}



.card {

    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .05);

    box-shadow: 0 3px 3px rgba(0, 0, 0, .05)

}



.card .card {

    background-color: #334753;

    -webkit-box-shadow: none;

    box-shadow: none

}



.card-title {

    text-transform: uppercase

}



.card-title:last-child {

    margin-bottom: 0

}



.card-subtitle {

    color: #B4C8CF;

    font-size: .95rem;

    font-weight: 400;

    line-height: 1.5

}



.card-subtitle:not(:last-child):not(.small) {

    margin-bottom: 2rem

}



.card-body .actions, .card > .actions {

    position: relative

}



[class*=card-img] {

    width: 100%;

    height: auto

}



.card-body .card-body {

    margin-bottom: 0

}



.card-footer {

    padding: 1.2rem 2.2rem

}



.form-control {

    resize: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -ms-overflow-style: none

}



.form-group {

    position: relative

}



select::-ms-expand {

    display: none

}



select.form-control {

    background: url(../images/select-caret.svg) no-repeat bottom 5px right 5px

}



.btn-outline-theme-contrast {

    background-color: transparent;

    border-color: #415969;

    color: #9bbcd1

}



.btn-outline-theme-contrast.active, .btn-outline-theme-contrast:not([disabled]):focus, .btn-outline-theme-contrast:not([disabled]):hover {

    color: inherit;

    background-color: #415969

}



.btn-outline-theme {

    background-color: transparent;

    border-color: #2e2f4d;

    color: #b7d3e4

}



.btn-outline-theme.active, .btn-outline-theme:not([disabled]):focus, .btn-outline-theme:not([disabled]):hover {

    color: inherit;

    background-color: #2e2f4d

}



.btn--icon {

    border-radius: 50%;

    width: 40px;

    height: 40px;

    padding: 0 0 1px 0;

    font-size: 1.25rem;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.btn--icon-text > [class*=zwicon-] {

    font-size: 1.25rem;

    margin: 0 .25rem 0 -.25rem

}



.modal-title {

    color: #36576b;

    font-size: 1rem;

    text-transform: uppercase

}



.modal-footer {

    padding-top: 0

}



.modal-footer > .btn-link {

    color: #436c84;

    cursor: pointer

}



.modal-footer > .btn-link:focus, .modal-footer > .btn-link:hover {

    background-color: #dce4e9;

    color: #36576b

}



.breadcrumb {

    border-radius: 0

}



.breadcrumb-item:not(.active) > a {

    color: #B4C8CF

}



.breadcrumb-item:not(.active) > a:hover {

    color: #fff

}



.page-link {

    border-radius: 50% !important;

    width: 37px;

    height: 37px;

    z-index: 1;

    cursor: pointer;

    -webkit-transition: background-color .3s, color .3s;

    transition: background-color .3s, color .3s;

    margin: 0 2px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center

}



.page-link > i {

    font-size: 1.5rem

}



.scrollbar {

    height: 100%

}



@media (max-width: 1499.98px) {

    .game__preload.game-right-container {

        display: none

    }

}



.game__preload > div:first-child {

    background-color: #000

}



.game__right120 {

    width: 120px;

    padding: 0;

    -ms-flex: 0 0 120px;

    flex: 0 0 120px;

    margin-top: 1.3rem;

    overflow: hidden

}



.game__right160 {

    width: 160px;

    padding: 0;

    -ms-flex: 0 0 160px;

    flex: 0 0 160px;

    margin-top: 1.3rem;

    overflow: hidden

}



.gameabout__actions {

    position: relative;

    padding: 0;

    justify-content: space-between;

    display: flex

}



.mobile-content .gameabout__actions {

    justify-content: center

}



.game__actions {

    position: relative;

    padding: .7rem !important

}



.game__actions .card-subtitle {

    margin-bottom: 0

}



.game__about {

    margin-bottom: 5px

}



.game__about .game-description div {

    padding-bottom: 1rem

}



.game__about .list-links {

    overflow: hidden

}



.discord-120, .discord-160, .discord-300 {

    height: 101.9px;

    margin-bottom: 0;

    background-color: #7289da;

    border-top-right-radius: 0;

    border-top-left-radius: 0

}



.discord-120 .card-body, .discord-160 .card-body {

    padding: 1.5rem;

    text-align: center;

    overflow: hidden

}



.discord-300 .card-body {

    padding: 1rem;

    text-align: center;

    overflow: hidden

}



.discord-120 .card-body a, .discord-160 .card-body a, .discord-300 .card-body a {

    color: #fff

}



.flag {

    line-height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center

}



.centered {

    width: 100%;

    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex-wrap: wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    justify-content: center;

    text-align: center

}



.game__about .game-description .keys-for-game div {

    padding-bottom: 0

}



.keyboard-key, .keys-for-game .keys-definition {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex

}



.keys-for-game ul {

    margin: 0;

    padding: 0

}



.keys-for-game li {

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    flex-wrap: wrap

}



.keys-for-game .keys-definition {

    font-size: 13px;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center

}



.key-comma, .key-divide, .key-dot, .key-ent, .key-mouse, .key-mouse1, .key-mouse2, .key-mouse3, .key-mouse4, [class*=key-] {

    width: 22px;

    height: 22px

}



.keys-for-game .keys-definition::after {

    content: '|';

    font-size: 20px;

    margin-right: 1rem;

    padding-left: 1rem;

    position: relative

}



.keys-for-game .keys-definition:last-child::after {

    content: '';

    margin: 0;

    padding: 0

}



.keyboard-key {

    margin: 0 .5rem

}



.key-mouse, .key-mouse1, .key-mouse2, .key-mouse3 {

    margin: 0

}



[class*=key-] {

    background: url(../images/control-icons.png) top left no-repeat;

    position: relative

}



.key-1 {

    background-position: 0 0

}



.key-2 {

    background-position: 0 -22px

}



.key-3 {

    background-position: 0 -44px

}



.key-32 {

    background-position: 0 -66px

}



.key-4 {

    background-position: 0 -88px

}



.key-5 {

    background-position: 0 -110px

}



.key-59 {

    background-position: 0 -132px

}



.key-6 {

    background-position: 0 -154px

}



.key-60 {

    background-position: 0 -176px

}



.key-62 {

    background-position: 0 -198px

}



.key-7 {

    background-position: 0 -220px

}



.key-8 {

    background-position: 0 -242px

}



.key-9 {

    background-position: 0 -264px

}



.key-92 {

    background-position: 0 -286px

}



.key-a {

    background-position: 0 -308px

}



.key-ad {

    background-position: 0 -330px

}



.key-al {

    background-position: 0 -352px

}



.key-ar {

    background-position: 0 -374px

}



.key-au {

    background-position: 0 -396px

}



.key-b {

    background-position: 0 -418px

}



.key-c {

    background-position: 0 -440px

}



.key-d {

    background-position: 0 -462px

}



.key-e {

    background-position: 0 -484px

}



.key-f {

    background-position: 0 -506px

}



.key-g {

    background-position: 0 -528px

}



.key-h {

    background-position: 0 -550px

}



.key-i {

    background-position: 0 -572px

}



.key-j {

    background-position: -22px 0

}



.key-k {

    background-position: -22px -22px

}



.key-l {

    background-position: -22px -44px

}



.key-m {

    background-position: -22px -66px

}



.key-mouse {

    background-position: -22px -88px

}



.key-mouse1 {

    background-position: -22px -132px

}



.key-mouse2 {

    background-position: -22px -110px

}



.key-mouse3 {

    background-position: -22px -154px

}



.key-mouse4 {

    background-position: -22px -176px

}



.key-n {

    background-position: -22px -198px

}



.key-o {

    background-position: -22px -220px

}



.key-p {

    background-position: -22px -242px

}



.key-q {

    background-position: -22px -264px

}



.key-r {

    background-position: -22px -286px

}



.key-s {

    background-position: -22px -308px

}



.key-t {

    background-position: -22px -330px

}



.key-u {

    background-position: -22px -352px

}



.key-v {

    background-position: -22px -374px

}



.key-w {

    background-position: -22px -396px

}



.key-x {

    background-position: -22px -418px

}



.key-y {

    background-position: -22px -440px

}



.key-z {

    background-position: -22px -462px

}



.key-0 {

    background-position: -22px -484px

}



.key-comma {

    background-position: -22px -506px

}



.key-dot {

    background-position: -22px -528px

}



.key-divide {

    background-position: -22px -550px

}



.key-ent {

    background-position: -22px -572px

}



.key-esc {

    background-position: 0 -594px;

    height: 22px;

    width: 44px

}



.key-ctrl {

    background-position: 0 -616px;

    height: 22px;

    width: 50px

}



.key-shift {

    background-position: 0 -638px;

    height: 22px;

    width: 56px

}



.key-pl1, .key-pl2 {

    width: 60px;

    height: 22px

}



.key-pl1 {

    background-position: 0 -660px

}



.key-pl2 {

    background-position: 0 -682px

}



.key-space {

    background-position: 0 -704px;

    height: 22px;

    width: 100px

}



.key-keyboard {

    background-position: 0 -726px;

    height: 23px;

    width: 48px

}



.key-arrow, .key-wasd {

    height: 24px;

    width: 35px

}



.key-arrow {

    background-position: 0 -749px

}



.key-wasd {

    background-position: 0 -773px

}



.key-f1 {

    background-position: -44px 0

}



.key-f2 {

    background-position: -44px -22px

}



.key-f3 {

    background-position: -44px -44px

}



.key-f10 {

    background-position: -44px -66px

}



.key-f4 {

    background-position: -44px -88px

}



.key-f5 {

    background-position: -44px -110px

}



.key-f11 {

    background-position: -44px -132px

}



.key-f6 {

    background-position: -44px -154px

}



.key-f12 {

    background-position: -44px -176px

}



.key-f121 {

    background-position: -44px -198px

}



.key-f7 {

    background-position: -44px -220px

}



.key-f8 {

    background-position: -44px -242px

}



.key-f9 {

    background-position: -44px -264px

}



.key-alt {

    background-position: -44px -594px;

    height: 22px;

    width: 44px

}



.video-container {

    overflow: hidden;

    position: relative;

    width: 100%

}



.video-container::after {

    padding-top: 56.25%;

    display: block;

    content: ''

}



.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%

}



.tab-content > .tab-pane {

    display: none

}



.tab-content > .active {

    display: block

}



.nav-link {

    display: block;

    padding: 1rem 1.5rem

}



.nav-link:focus, .nav-link:hover {

    text-decoration: none

}



.nav-link.disabled {

    color: #B4C8CF;

    pointer-events: none;

    cursor: default

}



.nav-tabs {

    border-bottom: 2px solid #27274a

}



.nav-tabs .nav-item {

    margin-bottom: -2px

}



.nav-tabs .nav-link {

    border: 2px solid transparent;

    border-top-left-radius: 0;

    border-top-right-radius: 0

}



.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {

    border-color: #e9ecef #e9ecef #27274a

}



.nav-tabs .nav-link.disabled {

    color: #B4C8CF;

    background-color: transparent;

    border-color: transparent

}



.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

    color: #dcf3ff;

    background-color: transparent;

    border-color: #dee2e6 #dee2e6 transparent

}



/*.nav-tabs .dropdown-menu{margin-top:-2px;border-top-left-radius:0;border-top-right-radius:0}*/

.nav-tabs .nav-link {

    border: 0;

    color: #B4C8CF;

    -webkit-transition: color .3s;

    transition: color .3s;

    position: relative

}



.nav-tabs .nav-link:before {

    content: "";

    height: 2px;

    position: absolute;

    width: 100%;

    left: 0;

    bottom: 0;

    background-color: #dcf3ff;

    -webkit-transition: opacity .3s, -webkit-transform .3s;

    transition: opacity .3s, -webkit-transform .3s;

    transition: transform .3s, opacity .3s;

    transition: transform .3s, opacity .3s, -webkit-transform .3s;

    -webkit-transform: scale(0);

    transform: scale(0);

    opacity: 0

}



.nav-tabs .nav-link.active:before {

    -webkit-transform: scale(1);

    transform: scale(1);

    opacity: 1

}



.tab-content {

    padding: 1.5rem 0

}



.sticky {

    position: -webkit-sticky;

    position: sticky;

    top: 0

}



.get-the-app {

    margin-left: 1rem;

    text-transform: initial

}



.get-the-app button {

    border-radius: 2px

}



#moreCtrl.card {

    margin-bottom: 0

}



,

#moreCtrl.card .card-title {

    margin-bottom: .5rem

}



.pb-100 {

    padding-bottom: 100px

}



.similargright {

    width: 520px;

    margin-left: 10px

}



.similargleft {

    width: 170px;

    margin-right: 10px

}



@media only screen and (max-width: 1756px) {

    .screen-1000 .similargright {

        width: 345px

    }



    .screen-1000 .similargright .col-190:nth-child(3), .screen-1000 .similargright .col-190:nth-child(4) {

        display: none

    }

}



@media only screen and (max-width: 1581px) {

    .screen-1000 .similargleft {

        display: none

    }

}



@media only screen and (max-width: 1401px) {

    .screen-1000 .similargright {

        width: 170px

    }



    .screen-1000 .similargright .rightgcont, .screen-1000 .similargright .rightgcont_own {

        grid-column: unset

    }



    .screen-1000 .similargright .col-190:nth-child(2) {

        display: none

    }

}



@media only screen and (max-width: 1227px) {

    .screen-1000 .similargleft + div {

        width: 100% !important;

        position: relative;

        overflow: hidden

    }

}



@media only screen and (max-width: 1718px) {

    .screen-960 .similargright {

        width: 345px

    }



    .screen-960 .similargright .col-190:nth-child(3), .screen-960 .similargright .col-190:nth-child(4) {

        display: none

    }

}



@media only screen and (max-width: 1542px) {

    .screen-960 .similargleft {

        display: none

    }

}



@media only screen and (max-width: 1361px) {

    .screen-960 .similargright {

        width: 170px

    }



    .screen-960 .similargright .rightgcont, .screen-960 .similargright .rightgcont_own {

        grid-column: unset

    }



    .screen-960 .similargright .col-190:nth-child(2) {

        display: none

    }

}



@media only screen and (max-width: 1190px) {

    .screen-960 .similargleft + div {

        width: 100% !important;

        position: relative;

        overflow: hidden

    }

}



@media only screen and (max-width: 1656px) {

    .screen-900 .similargright {

        width: 345px

    }



    .screen-900 .similargright .col-190:nth-child(3), .screen-900 .similargright .col-190:nth-child(4) {

        display: none

    }

}



@media only screen and (max-width: 1470px) {

    .screen-900 .similargleft {

        display: none

    }

}



@media only screen and (max-width: 1300px) {

    .screen-900 .similargright {

        width: 170px

    }



    .screen-900 .similargright .rightgcont, .screen-900 .similargright .rightgcont_own {

        grid-column: unset

    }



    .screen-900 .similargright .col-190:nth-child(2) {

        display: none

    }

}



@media only screen and (max-width: 1130px) {

    .screen-900 .similargleft + div {

        width: 100% !important;

        position: relative;

        overflow: hidden

    }

}



@media only screen and (max-width: 1561px) {

    .screen-800 .similargright {

        width: 345px

    }



    .screen-800 .similargright .col-190:nth-child(3), .screen-800 .similargright .col-190:nth-child(4) {

        display: none

    }

}



@media only screen and (max-width: 1379px) {

    .screen-800 .similargleft {

        display: none

    }

}



@media only screen and (max-width: 1200px) {

    .screen-800 .similargright {

        width: 170px

    }



    .screen-800 .similargright .rightgcont, .screen-800 .similargright .rightgcont_own {

        grid-column: unset;

        width: 170px

    }



    .screen-800 .similargright .col-190:nth-child(2) {

        display: none

    }

}



@media only screen and (max-width: 1034px) {

    .screen-800 .similargleft + div {

        width: 100% !important;

        position: relative;

        overflow: hidden

    }

}



@media only screen and (max-width: 1460px) {

    .screen-720 .similargright {

        width: 345px

    }



    .screen-720 .similargright .col-190:nth-child(3), .screen-720 .similargright .col-190:nth-child(4) {

        display: none

    }

}



@media only screen and (max-width: 1280px) {

    .screen-720 .similargleft {

        display: none

    }

}



@media only screen and (max-width: 1108px) {

    .screen-720 .similargright {

        width: 170px

    }



    .screen-720 .similargright .rightgcont, .screen-720 .similargright .rightgcont_own {

        grid-column: unset

    }



    .screen-720 .similargright .col-190:nth-child(2) {

        display: none

    }

}



@media only screen and (max-width: 930px) {

    .screen-720 .similargleft + div {

        width: 100% !important;

        position: relative;

        overflow: hidden

    }

}



@media only screen and (max-width: 1400px) {

    .screen-640 .similargright {

        width: 345px

    }



    .screen-640 .similargright .col-190:nth-child(3), .screen-640 .similargright .col-190:nth-child(4) {

        display: none

    }

}



@media only screen and (max-width: 1225px) {

    .screen-640 .similargleft {

        display: none

    }

}



@media only screen and (max-width: 1045px) {

    .screen-640 .similargright {

        width: 170px

    }



    .screen-640 .similargright .rightgcont, .screen-640 .similargright .rightgcont_own {

        grid-column: unset

    }



    .screen-640 .similargright .col-190:nth-child(2) {

        display: none

    }

}



@media only screen and (max-width: 870px) {

    .screen-640 .similargleft + div {

        width: 100% !important;

        position: relative;

        overflow: hidden

    }

}



@media only screen and (max-width: 1260px) {

    .screen-500 .similargright {

        width: 345px

    }



    .screen-500 .similargright .col-190:nth-child(3), .screen-500 .similargright .col-190:nth-child(4) {

        display: none

    }

}



@media only screen and (max-width: 1088px) {

    .screen-500 .similargleft {

        display: none

    }

}



@media only screen and (max-width: 903px) {

    .screen-500 .similargright {

        width: 170px

    }



    .screen-500 .similargright .rightgcont, .screen-500 .similargright .rightgcont_own {

        grid-column: unset

    }



    .screen-500 .similargright .col-190:nth-child(2) {

        display: none

    }

}



@media only screen and (max-width: 725px) {

    .screen-500 .similargleft + div {

        width: 100% !important;

        position: relative;

        overflow: hidden

    }

}



@media only screen and (max-width: 1779px) {

    .screen-w800 .similargright {

        width: 345px

    }



    .screen-w800 .similargright .col-190:nth-child(3), .screen-w800 .similargright .col-190:nth-child(4) {

        display: none

    }

}



@media only screen and (max-width: 1579px) {

    .screen-w800 .similargleft {

        display: none

    }

}



@media only screen and (max-width: 1410px) {

    .screen-w800 .similargright {

        width: 170px

    }



    .screen-w800 .similargright .rightgcont, .screen-w800 .similargright .rightgcont_own {

        grid-column: unset

    }



    .screen-w800 .similargright .col-190:nth-child(2) {

        display: none

    }

}



@media only screen and (max-width: 1049px) {

    .screen-w800 .similargleft + div {

        width: 100% !important;

        position: relative;

        overflow: hidden

    }

}



.ajax-loader > .games__item {

    display: flex;

    height: 100%;

    justify-content: center;

    flex-wrap: wrap;

    align-items: center

}



#ruffle-container {

    width: 100%;

    height: 100%;

    position: relative

}



.shake {

    transition: .6s;

    -webkit-animation: 4s ease-in-out 5s infinite shake;

    animation: 4s ease-in-out 5s infinite shake

}



@-webkit-keyframes shake {

    26%, 44% {

        transform: rotate(0) scale(1)

    }

    28% {

        transform: rotate(-2deg) scale(1.04)

    }

    32% {

        transform: rotate(1deg) scale(1.01)

    }

    34% {

        transform: rotate(-2deg) scale(1.02)

    }

    36% {

        transform: rotate(3deg) scale(1)

    }

    39% {

        transform: rotate(-1deg) scale(1)

    }

}



@keyframes shake {

    26%, 44% {

        transform: rotate(0) scale(1)

    }

    28% {

        transform: rotate(-2deg) scale(1.04)

    }

    32% {

        transform: rotate(1deg) scale(1.01)

    }

    34% {

        transform: rotate(-2deg) scale(1.02)

    }

    36% {

        transform: rotate(3deg) scale(1)

    }

    39% {

        transform: rotate(-1deg) scale(1)

    }

}



.shake:hover {

    -webkit-animation-play-state: paused;

    animation-play-state: paused

}



@media (hover: none) and (pointer: coarse) {

    .footer__menu > a {

        padding: 10px

    }



    .footer__menu > a + a:before {

        top: 1.3rem

    }



    .navigation__card > ul > li > a > span {

        padding: .5rem .7rem

    }

}