body {

    color: #ededed;

    background-color: #000;

    border: none;

    margin: 0;

    font-family: Roboto, sans-serif;

}



h1 {

    font-size: 1.8em;

    font-family: Roboto, sans-serif;

    line-height: 1.167em

}



h1, h1 a, h1 a:visited {

    color: #f4f4f4;

}



h2 {

    color: #f4f4f4;

    line-height: 1em;

}



header {

    height: 60px;

}



p {

    line-height: 1.8em;

}



.boxInner2, .boxInner3 {

    height: 208px;

    width: 180px;

    background: #2a2a2a;

    color: #fff;

}



.boxInner2 a, .boxInner3 a {

    color: #626262

}



.boxInner, .boxInner2, .boxInner3 {

    margin: 4px 8px 12px;

    position: relative;

}



.boxInner3 img {

    border-radius: 5px;

}



.titleBox {

    bottom: 0;

    width: 170px;

    background-color: #3d3d3d;

    border-radius: 0 0 6px 6px;

    font: 15px 'Lucida Sans', sans-serif;

    padding: 5px;

    overflow: hidden;

    position: absolute;

    color: #eee;

}



a {

    text-decoration: none;

    color: #ededed;

}



.morelinks a {

    font-weight: 600;

    font-size: 15px !important;

}



#items li, .navlink, .navlink a, ul.tabs li {

    display: inline-block

}



.logo {

    padding: 15px;

}



.logo a {

    font-size: 20px;

    color: #ffc600;

    font-weight: 700;

}



::placeholder {

    color: #cbcbcb;

}



#content {

    text-align: center;

    background: #000;

}



ol, ul {

    padding: 0;

}



.favorite {

    font-size: 30px;

    padding-right: 10px;

}



select#order-select {

    font-size: large;

    background: #2a2a2a;

    border: 1px solid #666;

    width: px;

    width: 200px;

    color: #fff;

}



#items {

    padding-bottom: 15px;

    margin: 10px;

}



.page-title {

    clear: both;

    display: inline;

    padding-right: 40px

}



#sortby {

    display: inline-flex;

    padding: 10px;

    border-radius: 10px;

    background: #181818;

    color: #ffffff;

    font-size: 20px;

}



div#taginfo {

    display: flex;

    flex-flow: row wrap;

    justify-content: space-between;

    border-radius: 5px;

    margin-top: 10px;

}



.filter, #taginfo p, div#taginfo h1 {

    margin: 0px;

    color: #c8c8c8;

}



ul.filter {

    display: -webkit-inline-box;

    list-style: none

}



ul.filter li.active {

    border: 1px solid #03A9F4;

}



ul.filter li a {

    color: white;

}



.sb h3 {

    text-align: left;

    color: #fff;

}



ul.filter li {

    margin-left: 10px;

    padding: 5px;

    border-radius: 5px;

}



.tagwrap {

    display: grid;

    grid-column-gap: 15px;

    grid-row-gap: 25px;

    padding: 15px;

    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr) );

    grid-template-rows: auto [last];

    color: #444;

    grid-auto-flow: dense;

}



.topa {

    grid-column: 1/-1;

}



.sb a {

    color: #fff;

}



.sb ul {

    text-align: left;

}



.sb li {

    padding: 5px 0px;

}



.sb {

    grid-column: 1;

    grid-row: 4/ span 7;

    padding: 0 5px;

}



.s {

    grid-column: -3 / span 2;

    grid-row: 3/span 2;

    width: 360px;

    margin: auto;

}



.s2 {

    grid-column: -2;

    grid-row: 7/span 3;

    width: 185px;

    margin: auto;

}



.s3 {

    grid-column: -3 / span 2;

    grid-row: 4/span 2;

    width: 360px;

    margin: auto;

}



.box a {

    color: #626262;

    text-decoration: none;

}



.box {

    background-color: #393939;

    width: 180px;

    height: 205px;

    color: #eee;

    position: relative;

    margin: auto;

}



.tbar {

    grid-column: 1/-1;

}



.tbar2 {

    grid-column: 2/-2;

    grid-row: 4;

}



.tb {

    bottom: 0;

    width: 170px;

    color: #eee;

    background-color: #2d2d2d;

    font: 15px 'Lucida Sans', sans-serif;

    padding: 5px;

    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}



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

    .tagwrap {

        grid-column-gap: 2px;

        grid-row-gap: 15px;

    }

}



.align-right {

    float: right;

}



#mySidebar {

    height: 100%;

    width: 180px;

    background: #000;

    position: fixed !important;

    overflow: hidden;

    z-index: 999999;

}



#mySidebar:hover {

    overflow: auto;

}



a.sidebar-bar-item {

    display: block;

    padding: 5px;

    color: #ddd !important;

    text-decoration: none;

}



a.sidebar-bar-item:hover {

    background: #19273b;

    text-decoration: none;

}



#mySidebar::-webkit-scrollbar {

    width: 7px;

}



#mySidebar::-webkit-scrollbar-thumb {

    background: rgba(168, 168, 168, 0.8);

}



#searchform input[type="text"] {

    border-radius: 2px;

    width: 50%;

    font-size: 18px;

    height: 10px;

    color: #ededed;

    background-color: #000;

    border: 1px solid #4b4b4b;

    padding: 10px;

}



.navlink button {

    margin: 0 10px;

    color: #ededed;

    background-color: #575757;

    border: none;

    border-radius: 5px;

    padding: 5px;

    font-size: x-large;

    width: 55px;

    display: none

}



.navlink button:focus {

    outline: 0;

}



button.btn.btn-primary {

    border-radius: 0px;

    font-size: 16px;

    height: 33px;

    border: 0px solid #000;

    background-color: #181818;

    padding: 0 15px 0 15px;

}



.searchbutton {

    color: #fff;

    border: 1px solid #645b5b;

    background-color: #181818;

    font-size: 30px;

    margin-top: 10px;

    padding: 20px;

}



#info-box h3 {

    padding: 20px 0 0;

    margin: 0 0 20px;

}



.searchbar {

    width: 70%;

}



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

    #back-to-top, .login {

        display: none;

    }



    #how-to p, #description p {

        max-width: 100%;

    }



    #searchform input[type="text"] {

        width: 155px;

    }



    .searchbar {

        width: 0%;

        padding: 0px

    }



    #info-box .align-right {

        float: none;

    }



    #how-to, #description {

        max-width: 100%;

    }



    body {

        overflow: hidden;

    }



    #extra-desc {

        padding: 15px !important;

    }



    #topnav {

        height: 60px;

        padding: 10px;

    }



    #mySidebar {

        overflow-y: auto;

    }



    .tagwrap {

        padding: 1px

    }



    .s2, .s, .as, .as2, .rr {

        display: none;

    }

}



.rr {

    margin: auto;

    float: right;

    padding: 10px;

}



@media (max-width: 850px) and (min-width: 481px) {

    #searchform input[type="text"] {

        width: 77%;

    }



    .searchbar {

        width: 70%;

        padding: 15px 0 0 7%;

    }



    #extra-desc {

        padding: 20px;

    }



    #mySidebar {

        overflow-y: auto;

    }

}



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

    #mySidebar {

        display: none;

    }



    #topnav {

        margin-left: 0

    }



    #content {

        margin-left: 0

    }



    .navlink button {

        display: block;

    }

}



@media screen and (min-width: 1125px) {

    .icon-search {

        display: none;

    }

}



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

    .searchbar {

        display: none;

    }



    .sub-menu ul li {

        margin: 0px;

    }



    .favorite {

        position: absolute;

        padding-top: 5px;

        right: 125px;

    }



    button.openBtn {

        width: 50px;

        margin: -1px;

        position: absolute;

        margin: 10px;

        right: 50px;

        border: 0px;

        background: #181818;

    }

}



.overlay {

    height: 100%;

    width: 100%;

    display: none;

    position: fixed;

    z-index: 999;

    top: 0;

    left: 0;

    background-color: rgb(0, 0, 0);

    background-color: rgba(0, 0, 0, 0.9); /* Black with a little bit see-through */

}



.overlay-content {

    position: relative;

    top: 46%;

    width: 80%;

    text-align: center;

    margin-top: 30px;

    margin: auto;

}



.overlay .closebtn {

    position: absolute;

    top: 50px;

    right: 45px;

    font-size: 60px;

    cursor: pointer;

    color: white;

}



.overlay .closebtn:hover {

    color: #ccc;

}



.overlay input[type=text] {

    padding: 15px;

    font-size: 17px;

    border: none;

    float: left;

    width: 70%;

    background: white;

}



.overlay input[type=text]:hover {

    background: #f1f1f1;

}



.overlay button {

    float: left;

    padding: 12px;
    margin-left: 2px;

    background: #f60;

    font-size: 17px;

    border: none;

    cursor: pointer;

}



.overlay button:hover {

    background: #bbb;

}



.icon-search {

    color: #fff;

    font-size: 24px;

}



@font-face {

    font-family: 'icomoon';

    src: url('/static/game49/fonts/comoon.eot?38kjjm');

    src: url('/static/game49/fonts/icomoon.eot?38kjjm#iefix') format('embedded-opentype'), url('/static/game49/fonts/icomoon.ttf?38kjjm') format('truetype'), url('/static/game49/fonts/icomoon.woff?38kjjm') format('woff'), url('/static/game49/fonts/icomoon.svg?38kjjm#icomoon') format('svg');

    font-weight: normal;

    font-style: normal;

    font-display: block;

}



[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */

    font-family: 'icomoon' !important;

    speak: never;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1; /* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



.icon-bars:before {

    content: "\e900";

}



.icon-search:before {

    content: "\e986";

}



.icon-heart:before {

    content: "\e9da";

}



.navbar {

    background: #181818;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    max-height: 100vh;

    display: flex;

    flex-direction: column;

    z-index: 9995;

}



.brand-and-icon {

    display: flex;

    justify-content: space-between;

    padding-bottom: 10px;

    border-bottom: 1px solid #4c4c4c

}



.navbar-brand {

    color: #fbb12b;

    font-size: 1.3rem;

    width: 173px;

    padding: 10px 0 0 10px;

    letter-spacing: 3px;

    font-weight: 700;

}



.navbar-toggler {

    background: transparent;

    font-size: 1.8rem;

    cursor: pointer;

    color: #FFF;

    padding: 0.2rem 0.5rem;

    transition: all 0.4s ease;

    border: 2px solid #ababab;

    border-radius: 4px;

}



.navbar-toggler:hover {

    opacity: 0.7;

}



.navbar-collapse {

    overflow-y: scroll;

    display: none;

}



.navbar-nav > li > a {

    text-transform: uppercase;

    font-size: 1.1rem;

    font-weight: 700;

    display: block;

    padding: 0.6rem 0 0 0.6rem;

    margin: 0.2rem 0;

    border-bottom: 1px solid #2c2c2c;

    border-radius: 1px;

    position: relative;

    transition: all 0.4s ease;

}



.drop-icon {

    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

}



.navbar-nav > li > a:hover {

    opacity: 0.7;

}



.sub-menu h4 {

    text-transform: capitalize;

    font-size: 1rem;

    padding: 0.5rem 0;

}



.sub-menu ul li {

    text-transform: capitalize;

    list-style: none;

    width: 200px;

    font-size: 0.95rem;

}



.sub-menu ul li a:hover {

    opacity: 0.9;

}



.sub-menu {

    display: none;

}



@media screen and (min-width: 992px) {

    .navbar {

        flex-direction: row;

        align-items: center;

        position: fixed;

        border: 1px solid;

        border-color: #525252;

    }



    .navbar-toggler {

        display: none;

    }



    .brand-and-icon {

        border-bottom: none;

        padding: 0;

    }



    .navbar-collapse {

        display: block !important;

        overflow-y: hidden;

        flex: 1 0 auto;

    }



    .navbar-nav {

        display: flex;

        margin: 0px;

    }



    .navbar-nav > li > a {

        border-bottom: none;

        margin: 0 0.4rem;

        padding: 1.7rem 0.5rem 1rem 0.5rem;

        font-size: 0.8rem;

    }



    .sub-menu {

        position: absolute;

        left: 0;

        width: 100%;

        top: 100%;

        background: #323232;

    }



    .navbar-nav > li:hover .sub-menu {

        display: grid !important;

        grid-template-columns: repeat(4, 1fr);

        padding: 10px 0 10px 0px;

    }



    .navbar-nav > li {

        list-style-type: none;

    }



    .navbar-nav > li:hover {

        border-bottom-color: #000;

    }



    .sub-menu-item {

        padding-left: 15%;

    }



    .openBtn {

        background: #181818;

        border: 0;

    }

}