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;

}



#description ul, #description ol {

    line-height: 1.8em;

    padding: 5px 30px;

}



div#howto ul {

    padding-left: 30px;

}



.tag-carousel {

    width: 90%;

    margin: auto auto;

    padding: 15px;

    position: relative;

}



.tag-carousel2 {

    width: 85%;

}



.score {

    display: none;

}



.slider, .slider2 {

    display: flex;

    width: 100%;

    overflow: hidden;

}



span.sf.alignleft {

    font-weight: 700;

    font-size: 1.5em;

    padding: 10px;

}



.alignleft {

    float: left;

}



ul.tags {

    list-style: none;

}



.boxInner2 img {

    border-radius: 6px 6px 0 0;

}



a.moreless.more {

    display: flex;

    margin: 10px 0;

}



#playgame {

    justify-content: center;

    display: grid;

    margin: 20px 0;

}



#how-to p, #description p {

    max-width: 75%;

    color: #e4e4e4;

    line-height: 1.8em;

}



.as, .as2 {

    max-height: 93px;

    text-align: center;

}



ul#breadcrumb {

    display: inline-flex;

    list-style: none;

    padding-left: 10px;

    font-size: 15px;

    display: flex;

    flex-flow: wrap;

}



ul#breadcrumb li + li:before {

    padding: 5px;

    color: #13aeff;

    content: "/\00a0";

}



.playbutton {

    align-items: center;

    padding: 0 240px;

    height: 48vh;

    display: flex;

    flex-wrap: wrap;

    background: #181818;

    border: 1px solid #383b3e;

    border-radius: 5px;

}



.ptb img {

    border-radius: 100px;

    margin-top: 20px;

}



#info {

    padding: 0 7%;

    min-height: 400px;

}



ul.tabs {

    padding: 15px;

    text-align: center;

    margin: auto;

    background: #16181a;

}



.tags li {

    margin: 5px;

}



.tags {

    display: flex;

    padding: 25px 0;

    flex-wrap: wrap;

}



.tags a, .tags a:visited {

    border: 1px solid #24617b;

    font-size: .917em !important;

    font-weight: 600;

    padding: 8px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 10px;

}



.playnowtext {

    font-size: 50px;

    color: white;

    display: contents;

    cursor: pointer;

    padding: 30px 10px;

    font-weight: 700;

}



#info-box {

    padding: 5px 0 30px;

}



#info-box a {

    color: #abd4fd;

}



#info-box ul {

    line-height: 1.8em;

}



.midbox {

    font-size: 17px;

    letter-spacing: 2px;

    background-color: #242424;

    text-align: left;

    max-width: 100%;

    min-height: 425px;

}



.midbox h1 {

    color: #e4e4e4;

    padding-bottom: 13px;

}



.tab-content {

    padding: 10px

}



ul.tabs li {

    color: #fafafa;

    padding: 3px;

    cursor: pointer;

    width: 230px;

    font-weight: 600;

}



ul.tabs li.current {

    color: #EEE;

    border-radius: 3px;

    border: 1px solid #a0a0a0;

}



.tab-content.current {

    display: inherit;

}



.tab-content {

    display: none;

}



@media (hover: none) {

    .nomobile {

        display: none;

    }

}



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

    #info {

        padding: 0 10px;

    }



    #extra-desc {

        padding: 7px;

    }



    .playbutton {

        margin: 10px;

        padding: 25px;

        justify-content: center;

    }



    ul.tabs {

        display: none;

    }



    ul.tabs li {

        width: 20%;

    }

}



#how-to button {

    font-weight: 600;

}



p#extra-desc {

    padding: 0 7%;

    text-align: left;

}



.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;

    }

}