.header {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: flex-start;

    align-content: flex-start;

    align-items: stretch;

    width: 100%;

    z-index: 3;

    background-color: rgba(42, 42, 42, 1);

    height: 3em;

    color: #fff;

    position: fixed

}



.header-spacer {

    height: 48px;

    width: 100%

}



.nav_ico {

    flex: 0 0 auto;

    cursor: pointer;

    margin: 0 .188em;

    order: 1;

    padding: .5em 0 0 .2em;

    align-self: flex-start;

    min-width: 2em;

    min-height: 2em

}



.logo {

    order: 2;

    flex: 0 0 auto;

    align-self: flex-start;

    width: 218px;

    padding: .1em 0 0 .4em;

    text-transform: uppercase;

    font-size: 1.8em

}



.logo a {

    color: #fff

}



.logo a:hover {

    color: #e50914

}



.menu {
    position: relative;
    z-index: 999999;
    font-family: 'Dosis', 'Arial-Fallback', Arial, sans-serif;

    order: 5;

    flex: 1 0 auto;

    align-self: flex-start;

    flex-direction: column;

    align-items: stretch;

    text-transform: uppercase;

    font-size: 1.1em;

    width: 100%;

    min-height: 48px;

    background-color: rgba(42, 42, 42, 1)

}



.menu div {

    padding: .4em .5em .4em .5em;

    white-space: nowrap

}



.menu div:hover, .menu a:hover {

    background-color: #b81921

}



.menu .active {

    background-color: #b81921

}



.dots {

    order: 4;

    height: 48px;

    flex: 2 2 auto;

    align-self: flex-start

}



.search {

    order: 5;

    flex: 1 1 auto;

    background-color: rgba(42, 42, 42, 1);

    padding: .2em .4em 0 .4em;

    display: none

}



.search-field {

    display: flex;

    flex: 1 1 auto;

    align-self: auto;

    flex-direction: row;

    background-color: #484848;

    border-radius: .25em;

    width: 100%;

    height: 1.8em;

    min-width: 160px;

    margin: .313em .75em .313em .313em

}



.lupe {

    min-width: 24px;

    display: flex;

    order: 2;

    flex: 0 0 auto

}



.lupesvg {

    width: 20px;

    height: 20px;

    order: 2;

    margin: 4px 4px 0 0;

    cursor: pointer

}



.lupesvg path {

    stroke: #fff;

    stroke-width: 1;

    fill: #fff

}



.search-field input {

    font-size: 1em;

    background-color: transparent;

    flex: 1 1 auto;

    order: 1;

    color: #c0c0c0;

    border: 0;

    width: 100%;

    height: 100%;

    padding: 0 5px 0 5px;

    margin-left: 5px

}



.search-field img {

    width: 1.25em;

    height: 1.25em

}



.search-field:hover, .search-field input:hover {

    background-color: #b81921;

    color: #fff

}



.bar1, .bar2, .bar3 {

    transition: .6s

}



.nav_ico div {

    width: 1.6em;

    height: .25em;

    margin: .25em 0;

    background-color: #fff;

    border-radius: 2px

}



.change .bar1 {

    transform: rotate(-45deg) translate(-8px, 4px)

}



.change .bar2 {

    opacity: 0

}



.change .bar3 {

    transform: rotate(45deg) translate(-8px, -3px)

}



@media all and (max-width: 1199px) {

    .menu {

        display: none

    }

}



@media all and (min-width: 530px) {

    .search {

        display: block;

        min-width: 200px;

        max-width: 320px

    }

}



@media all and (min-width: 1200px) {

    .header {

        flex-wrap: nowrap

    }



    .nav_ico {

        display: none

    }



    .menu {

        order: 3;

        flex: 0 1 auto;

        display: flex;

        flex-direction: row;

        min-width: 800px

    }



    .menu div {

        padding: .6em .5em .6em .5em

    }



    .logo {

        padding-right: .6em

    }



    .menu_hide {

        display: none

    }

}



@font-face {

    font-family: Dosis;

    src: url('https://a.silvergames.com/css/sg.ttf'), url('https://www.silvergames.com/css/sg.ttf');

    font-weight: bold;

    font-display: block

}



* {

    margin: 0;

    padding: 0;

    border: 0;

    box-sizing: content-box

}



a {

    text-decoration: none;

    color: #fff

}



h1, h2, h3 {

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

    text-transform: uppercase;

    color: #fff

}



h1, h2 {

    margin: .4em .4em .2em .3em;

    font-size: 1.4em

}



h2 a:hover {

    color: #e50914

}



html, body {

    padding: 0;

    height: 100%;

    background-color: #2a2a2a;

    font-family: 'Dosis', sans-serif;

    color: #fff

}



input:focus {

    outline-width: 0

}



p {

    margin-bottom: 1em

}



.slider {

    max-height: 400px;

    padding-top: 2.4em

}



.banner {

    color: #404040;

    min-height: calc(100vw * 400 / 1500)

}



.footer {

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

    font-size: 1em;

    color: #c0c0c0;

    text-align: center

}



.footer a {

    color: #c0c0c0

}



.footer a:hover {

    color: #fff;

    text-decoration: underline

}



.tag {

    padding: .25em;

    list-style-type: none;

    text-align: center

}



.tag li {

    display: inline-block;

    margin: 2px 4px

}



.tag a {

    font-size: 1em;

    color: #fff;

    background-color: #505050;

    padding: .4em .5em;

    text-transform: uppercase;

    line-height: 2.25em;

    border-radius: .25em

}



.tag a:hover {

    background-color: #b81921

}



.greya {

    background-color: #404040

}



.page {

    max-width: 900px;

    margin: auto

}



.spammy {

    display: none

}



.faq {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap

}



.faq div {

    min-width: 300px;

    margin: 4px 0 10px 20px;

    flex: 0 1 360px

}



.faq h3 {

    font-size: 14px;

    font-weight: bold

}



.ol-list-of-games {

    margin-left: 0 !important

}



.ol-list-of-games a:hover {

    text-decoration: underline

}



.rmb {

    padding: 3px 5px 3px 5px;

    color: #fff !important;

    background-color: #606060 !important;

    user-select: none;

    border: 0;

    cursor: pointer;

    font-size: 1.2em

}



.rmb:hover {

    background-color: #808080 !important

}



.rmtxt {

    display: none

}



@media all and (max-width: 1500px) {

    .slider {

        width: 100%

    }



    .slider img {

        width: 100%

    }

}



.svg-icon {

    width: 2em;

    height: 2em

}



.svg-icon path, .svg-icon polygon, .svg-icon rect {

    fill: #fff

}



.svg-icon circle {

    stroke: #fff;

    stroke-width: 1

}



@media all and (min-width: 1400px) {

    .rmb {

        display: none

    }



    .rmtxt {

        display: block

    }

}



.category-teaser {

    height: 180px;

    overflow: hidden;

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: flex-start;

    align-content: flex-start;

    align-items: flex-start;

    width: 100%

}



.category-link {

    order: 1;

    flex: 0 0 auto;

    align-self: flex-start;

    display: none

}



.teaser-image {

    order: 1;

    flex: 0 0 auto;

    align-self: flex-start;

    display: none

}



.scrollable-div {

    order: 2;

    flex: 1 1 auto;

    white-space: nowrap;

    overflow-x: hidden;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    scroll-behavior: smooth

}



.scroll {

    height: 180px;

    order: 3;

    flex: 0 0 auto;

    align-self: flex-start;

    cursor: pointer;

    line-height: 180px;

    font-size: 2em;

    opacity: .7;

    user-select: none;

    width: 30px;

    color: #fff;

    padding-left: 10px;

    position: absolute;

    right: 0;

    background-color: #202020

}



.scroll:hover {

    opacity: .9;

    color: #fff;

    background-color: #404040

}



.game-teaser {

    width: 100px;

    height: 150px;

    padding: 4px;

    margin: 8px 0 0 8px;

    border-radius: 6px 6px 0 0;

    display: inline-block;

    vertical-align: top

}



.game-teaser img {

    width: 100%;

    height: 100%;

    border-radius: 3px 3px 0 0;

    transition: transform .2s

}



.game-teaser img:hover {

    transform: scale(1.05)

}



.game-teaser-txt {

    font-family: 'Dosis', sans-serif;

    font-size: 1em;

    text-align: center;

    height: 100px;

    overflow: hidden;

    white-space: normal

}



.desktop-games-list, .games-list, #endless-games-list {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: flex-start

}



.desk {

    filter: grayscale(100%)

}



.flash {

    filter: grayscale(50%)

}



.game-teaser-flex {

    flex: 0 0 auto;

    width: calc(33.3% - 18px);

    height: 50vw;

    padding: 4px;

    border-radius: 4px 4px 0 0;

    background-color: #404040;

    margin: 6px 5px

}



.game-teaser-flex img {

    width: 100%;

    border-radius: 3px 3px 0 0;

    transition: transform .2s

}



.game-teaser-flex img:hover {

    transform: scale(1.06)

}



.game-teaser-flex .txt {

    font-family: 'Dosis', sans-serif;

    font-size: 1em;

    text-align: center;

    overflow: hidden;

    white-space: normal

}



.float-end {

    clear: both

}



.category-description {

    padding: .5em;

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

    color: #f0f0f0

}



.category-description ol {

    list-style: decimal;

    padding: 0 2px 15px 36px

}



.category-description li {

    padding: 3px 0 3px 0

}



.pager {

    text-align: center;

    font-family: Verdana, Arial, Helvetica, sans-serif

}



.pager a {

    color: #fff;

    font-size: 1.2em;

    padding: 1px 4px 1px 4px

}



.pager a:hover {

    background-color: #b81921

}



.pager .active {

    background-color: #b81921

}



@media all and (min-width: 480px) {

    .game-teaser-flex {

        width: calc(25% - 18px);

        height: 35vw

    }

}



@media all and (min-width: 641px) {

    .game-teaser-flex {

        width: 120px;

        height: 200px

    }



    .teaser-image {

        height: 180px;

        width: 277px;

        display: block

    }



    .category-link {

        height: 180px;

        width: 277px;

        display: block

    }

}



@media all and (min-width: 1116px) {

    .category-teaser {

        height: 260px

    }



    .category-link, .teaser-image {

        height: 260px;

        width: 400px

    }



    .game-teaser {

        width: 140px;

        height: 224px;

        margin: 12px 0 0 14px;

        border-radius: 6px 6px 0 0

    }



    .scroll {

        line-height: 240px;

        width: 40px;

        height: 260px

    }

}



.color-1 {

    background-color: #403d40

}



.color-2 {

    background-color: #504d54

}