body{margin: 0px; padding:0; font-size:12px; color:#fff; font-family:"Oswald",Verdana, Geneva, sans-serif;}
dl,dt,dd,ul,li,h1,h2,form,input,textarea,p,td,h4,h3{padding:0;margin:0;}
ul,dl{list-style:none;}
img{ vertical-align:top;border:0;}
.clear{clear:both}
.left{float:left}
.right{float:right;}
a {text-decoration:none;color:#fff;}
html {overflow-y: scroll;}
body { margin:0;padding:0;width:100%;height:100%;overflow:auto;background-color:#FCAA45;}
.blue-1 {
    background-color: #dff3ff;
}
.blue-2 {
    background-color: #009cff;
}
/***search layout***/
.search-layout {
    z-index: 1001;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #FCAA45;
    position: fixed;
    transform: translateZ(100px);
    text-align: center;
    font-family: 'PrettyFont';
}

.search-layout .header-panel {
    height: 52px;
    background-color: #F99312;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
    vertical-align: middle;
}
#close_search {
    float: right;
    height: 100%;
    text-align: center;
    background-color: #F99312;
}

.game-container {
    width: 100%;
    text-align: center;
    font-size: 0px;
    margin: 0 auto;
}

#search_input {
    margin: 0 auto;
    position: relative;
}

#search_input #search_game {
    background-color: #F99312;
    border: 1px solid #e4a30f;
    width: 93%;
    height: 35px;
    font-size: 16px;
    font-family: 'PrettyFont';
    color: white;
    border-radius: 4px;
    margin-bottom: 5px;
    text-transform: capitalize;
    text-indent: 30px;
}

.fa-search {
    position: absolute;
    top: 12px;
    color: #11a3de;
    margin-left: 10px;
    background: url(/assets/images/search.png) no-repeat;
    display: inline-block;
    width:20px;
    height:20px;
}


#search_btn {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 50;
}


/***header layout***/

#header {
    z-index: 2;
    width: 100vw;
    height: 52px;
    background: #F99312;
    top: 0;
    left: 0;
}

.header-container {
    height: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 15px;
    text-align:center;
}
.site-nav {
    margin-right: auto;
    margin-left: auto;
    padding: 0 5px;
    text-align:center;
    background-color: #004992;
}

.E {
    padding: 0;
    border: 0;
    background: 0;
}
.Dh {
    height: 52px;
    margin-left: -15px;
    padding: 0 15px;
}


.E svg {
    display: block;
    width: 30px;
    height: 30px;
    fill: #fff
}

.E rect {
    pointer-events: none;
    -webkit-transform-origin: 50%;
    -ms-transform-origin: 50%;
    transform-origin: 50%;
    transition: opacity .2s ease-out .2s,-webkit-transform .2s ease-in-out;
    transition: opacity .2s ease-out .2s,transform .2s ease-in-out;
    transition: opacity .2s ease-out .2s,transform .2s ease-in-out,-webkit-transform .2s ease-in-out
}

.E:focus {
    outline: 0
}

.E.F svg rect {
    transition: opacity .1s ease-out,-webkit-transform .2s ease-in-out .1s;
    transition: opacity .1s ease-out,transform .2s ease-in-out .1s;
    transition: opacity .1s ease-out,transform .2s ease-in-out .1s,-webkit-transform .2s ease-in-out .1s
}

.E.F svg :first-child,.E.F svg :nth-child(4) {
    opacity: 0
}

.E.F svg :nth-child(2) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.E.F svg :nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}
/**PLAY**/

.menu-panel {
    display: none;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 5;
    top: 0;
    left: 0;
    width: 190px;
    background: #dff3ff;
    position:fixed;
}
.menu-panel:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(90deg,transparent,rgba(0,0,0,.1));
}
.DX {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    border-radius: 0 5px 5px 0;
    background: #F99312;
}

.DY {
    display: block;
    height: 52px;
    padding: 0 15px;
}


.Dj {
    display: none;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 5;
    top: 0;
    left: 0;
    width: 60vw;
    height: 500px;
    background: #dff3ff;
    position:absolute;
}

.Dl {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    height: 52px;
    background: #F99312;
}
.Dn {
    width: 34px;
    height: 100%;
    padding: 0 15px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460.3 460.3' fill='%23fff'%3E%3Cpath d='M230 121L66 256.2v1c-.2.3-.2.6-.2.8v137c0 5 1.8 9.3 5.4 13 3.6 3.5 8 5.3 12.8 5.3h109.6V303.7h73v109.6h109.7c5 0 9.2-1.8 12.8-5.4 3.7-3.7 5.5-8 5.5-13V258c0-.8 0-1.3-.3-1.7L230.2 121zm227 104.4l-62.4-52V57c0-2.7-1-5-2.6-6.6-1.7-1.7-4-2.6-6.6-2.6h-54.8c-2.7 0-5 1-6.6 2.6-1.7 1.7-2.6 4-2.6 6.6v55.7l-69.7-58.2c-6-5-13.3-7.4-21.7-7.4-8.4 0-15.6 2.6-21.7 7.5l-205 171c-2 1.4-3 3.5-3.2 6 0 2.6.6 4.8 2 6.7l17.8 21c1.5 1.8 3.5 3 6 3.2 2.3.2 4.6-.5 7-2L230 95.8l197.7 164.7c1.5 1.3 3.5 2 6 2h1c2.4-.4 4.4-1.4 6-3l17.6-21.2c1.5-2 2.2-4 2-6.7-.2-2.6-1.3-4.6-3.2-6.2z'/%3E%3C/svg%3E") no-repeat 50%/34px auto;
    text-indent: -999em
}

.Dn,.Do {
    display: inline-block;
    vertical-align: middle
}

.Do {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='%23fff'%3E%3Cpath d='M55 46V18a1 1 0 0 0-1-1H10a1 1 0 0 0-1 1v28a1 1 0 0 0 1 1h44a1 1 0 0 0 1-1z'/%3E%3Cpath d='M2 27a1 1 0 0 0 1-1V11h15a1 1 0 1 0 0-2H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1zM62 9H46a1 1 0 1 0 0 2h15v15a1 1 0 1 0 2 0V10a1 1 0 0 0-1-1zM62 37a1 1 0 0 0-1 1v15H46a1 1 0 1 0 0 2h16a1 1 0 0 0 1-1V38a1 1 0 0 0-1-1zM2 55h16a1 1 0 1 0 0-2H3V38a1 1 0 1 0-2 0v16a1 1 0 0 0 1 1z'/%3E%3C/svg%3E");
    width: 40px;
    height: 40px
}


.Au {
    -webkit-transform: translateX(80vw);
    -ms-transform: translateX(80vw);
    transform: translateX(80vw);
    opacity: 1;
}


.btn_right {
    -webkit-transform: translateX(180px);
    -ms-transform: translateX(180px);
    transform: translateX(180px);
}

.pop-menu-section {
    padding:10px;
    overflow: auto;
}

.side-footer {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    height: 52px;
    background: #F99312;
}

.side-footer .logo {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 74px;
    height: 35px;
    margin: 0 0 0 -37px;
    background-image: url(http://img.poki.com/logo-poki.svg);
    text-indent: -999em;
}

.side-container {
    padding:10px;
    overflow: auto;
    height:408px;
}

/****index***/
#main-container {
    width: 100%;
    text-align: center;
    font-size: 0px;
    margin: 0 auto;
}

.game-img {
    background-color: #eee;
    display: block;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid #fff;
}

img {
    border: none;
    vertical-align: middle;
}

.game-item {
    display: inline-block;
    *zoom: 1;
    _overflow: hidden;
    position: relative;
    text-align:center;
}

.game-item {
    width: 12.5%;
    padding: 3px;
    box-sizing: border-box;
}

.game-item img {
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.game-list {
    margin-top: 5px;
    padding: 0 3px;
    box-sizing: border-box;
}

.game-info {
    margin: 10px 0;
    padding: 10px;
    overflow: hidden;
    background-color: #F99312 !important;
    color: #fff;
}

.game-thumb {
    float: left;
    width: 128px;
    height: 128px;
    background-color: #fff;
}

.game-thumb img {
    width: 128px;
    height: 128px;
}

.game-text {
    float: left;
    margin-left: 10px;
    width: calc(100% - 140px);
}

.game-text h1 {
    font-family: Roboto-Bold;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0px;
    text-align:left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.game-like {
    font-size:12px;
    line-height:18px;
    height:18px;
    margin-top:3px;
    width:170px;
    position: relative;
    text-align: left;
}


.play-btn{
    width: 160px;
    height: 40px;
    background-color: #57c511;
    border-radius: 4px;
    font-family: Roboto-Bold;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 40px;
    letter-spacing: 0px;
    color: #ffffff;
    display: block;
    text-align: center;
    margin-top: 14px;
}

.game-desc {
    margin-top:10px;
    float:left;
    height: 48px;
    font-family: Roboto-Bold;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    text-align:left;
    overflow: auto;
}

.adbox {
    width: 100%;
    min-height: 90px;
    margin: 20px 0;
}

.game-block h5{
    width: 100%;
    font-size: 12px;
    color: #fff;
    margin: 0;
    padding: 0;
    margin-left: 20px;
    text-align:left;
}

/*** Play ***/

#similargames_list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
}

#similargames_list .game-item{
    box-sizing: border-box;
    width: 50%
}

.game-name{
    font-family: sans-serif;
    font-size: 14px;
    line-height: 16px;
    color: #333333;
    overflow: hidden;
    height: 16px;
    text-align: center;
    word-break: break-all;
}

.game-name{
    position: absolute;
    transition: bottom .6s ease;
    font-size: 15px;
    font-weight: 700;
    /*letter-spacing: 1px;*/
    width: 100%;
    bottom: -125%;
    left: 0;
    height: auto;
    min-height: 18px;
    line-height: 20px;
    padding: 7px 0 4px;
    text-align: center;
    text-transform: uppercase;
    background-color: rgba(0,0,0,0.65);
    color: #fff;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}



.play_container{
    width: calc(100% - 324px);
    height: auto;
    background-color: #333;
    position: relative;
    margin: 0 0 0 324px;
    position: absolute;
    top: 0;
    bottom: 0px;
}

.game_bg{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}


.game_bg:before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    display: block;
}
.play_container>img{
    height: 100%;
    object-fit: contain;
}

.game_innerbox{
    position: absolute;
    left: 50%;
    top: 37%;
    transform: translate(-50%,-50%);
}

.play_button{
    text-align: center;
    width: 200px;
    z-index: 2;
    box-shadow: 0 0 3px rgba(0,0,0,.5);
    line-height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    border-radius: 2px;
    font-size: 20px;
    color: #fff !important;
    background: #99c506;
    background: -webkit-linear-gradient(#aed409, #77952b);
    background: -o-linear-gradient(#aed409, #77952b);
    background: -moz-linear-gradient(#aed409, #77952b);
    background: linear-gradient(#aed409, #77952b);
    padding: 10px 20px;
    border: 3px solid #fff;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    position: relative;
    bottom: 0;
    white-space: nowrap;
    margin-bottom: -30px;
    cursor: pointer;
    text-shadow: 1px 1px #505050;
    transition: all .2s;
    margin-top:30px;
    border-radius: 10px;
}


.game_thumb{
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
}

.cl:after {
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}

.game_innerbox .game_title{
    font-size: 23px;
    font-weight: 700;
    color: #fff;
    padding: 10px;
    margin-top: 30px !important;
    text-align: center;
    position: relative;
    text-shadow: 1px 1px #505050;
    background: -moz-linear-gradient(left, rgba(30, 87, 153, 0) 0, rgba(0, 0, 0, .3) 50%, rgba(125, 185, 232, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(30, 87, 153, 0) 0, rgba(0, 0, 0, .3) 50%, rgba(125, 185, 232, 0) 100%);
    background: linear-gradient(to right, rgba(30, 87, 153, 0) 0, rgba(0, 0, 0, .3) 50%, rgba(125, 185, 232, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#001e5799', endColorstr='#007db9e8', GradientType=1)
}

.icon_triangle2{
    width: 16px;
    height: 16px;
    fill: #fff;
    margin-left: 6px;
}

#left-menu{
    position: absolute;
    top: 0;
    /*left: -100%;*/
    left: 0;
    background: #222;
    width: 324px;
    height: 100%;
    z-index: 999;
    transition: left .6s ease;
    overflow-x: hidden;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
    /*padding-bottom: 10px*/
}

.site_logo{
    width: 180px;
    margin-left: 8px;
    margin-top: 7px;
    margin-bottom: 7px;
}
.left_title_logo{
    display: block;
    width: 100%;
    background: #050505;
}

.game_opt{
    background-color: #222;
    width: 100%;
    padding: 0 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 12px;
    border-bottom: 2px solid #333;
    margin-bottom: 6px;
}
.game_opt .iconlinears{
    width: 30px;
    height: 28px;
    fill: #fff;
    transform: translateY(2px);
}
.opt_share{
    margin-left: 22px;
    margin-right: 26px;
}
.game_opt .icon_home{
    margin-right: 26px;
    transform: translateY(1px);
    width: 26px;
}
.game_opt .icon_share{
    width: 22px;
    height: 25px;
}
.game_opt .fullscreen{
    display: block;
    transform: translateY(2px);
}
.game_opt .icon_full,.game_opt .icon_nimi{
    width: 25px;
    height: 25px;
}
.left_menu_close{
    position: absolute;
    right: 10px;
    top: 16px;
    display: none;
}
.left_menu_close .icon_close{
    width: 30px;
    height: 30px;
    fill: #fff;
}

.gameinfo img{
    width: 48px;
    height: 48px;
    border-radius: 5px;
    margin: 12px 10px 10px;
    float: left;
    object-fit: cover;
}

.bottom-game-name{
    float: left;
    width: calc(100% - 72px);
    color: #fff;
    margin: 20px 0 0;
    letter-spacing: .5px;
    font-family: Roboto-Bold;
    font-size: 22px;
    line-height: 30px;
}
.menu-homepage {
    position: absolute;
    left: 0;
    top: 0;
}
.menu-fullscreen {
    position: absolute;
    right: 0;
    top: 0;
}

.menu-icon{
    width: 40px;
    height: 40px;
    background-color: #e2791f;
    transition: left .2s ease-out;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.3);
    z-index: 100;
    border: 0px;
}

.showmbtn{
    display: block;
}
.icon_bread{
    width: 30px;
    height: 30px;
    fill: #fff;
    transform: translateX(-1px);
    margin-top: 4px;
}

.contact-us {

    float: left;
    clear: both;
    width: 96%;
    padding: 5px 2%;
    height: 30px;
    text-align:center;
    color: #fff;
    font-size: 14px;
    font-family: sans-serif;
}

.load-more-box {
    text-align: center;
    padding: 10px;
}

.load-more-btn {
    width: 70%;
    height: 40px;
    background-color: #57c511;
    border-radius: 4px;
    font-family: Roboto-Bold;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 40px;
    letter-spacing: 0px;
    color: #ffffff;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

.footer-content {
    padding: 10px;
}

#list1 {
    height: calc( ((100vw - 6px )/8 + 4px)*2 );
}

#preload{
    position:fixed;
    top:0;
    bottom: 0;
    right: 0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    text-align:center;
    background-color:#004060;
}

.ad_interval {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ad_interval p {
    width: 100%;
    margin: 5px 0;
    font-size: 18px;
    line-height: 20px;
    height: 20px;
    color: #ffffff;
    text-align: center;
    background-image: linear-gradient(45deg, transparent, rgba(17, 24, 88, 0.5), transparent);
}

#BackTop {

    background: #ffa200;
    width: 60px;
    height: 60px;
    border-radius: 40px;
    border-bottom: 4px solid #d07300;
    position: fixed;
    bottom: 40px;
    right: 366px;
    cursor: pointer;
    display: none;
    z-index: 99;
    transition: .1s
}

#BackTop:before {
    content: " ";
    position: absolute;
    transform: rotate(45deg);
    border-left: solid 6px #fff;
    border-top: solid 6px #fff;
    width: 30%;
    height: 30%;
    top: 35%;
    left: 30%;
    transition: .1s
}

@media only screen and (max-width:1024px) {
    .play_container, #ads_fix{
        width: 100%;
        margin-left: 0
    }

    #left-menu{
        left: -100%;
    }

    .game_act{
        width: 90%;
    }

    .left_menu_close{
        display: block;
    }
}


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

    .game-item{
        width: 16.66666%
    }


    #list1 {
        height: calc( ((100vw - 6px )/6 + 4px)*2 );
    }

    #list2 {
        height: calc( ((100vw - 6px )/6 + 4px) * 4 );
    }

}

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

    .game-item{
        width: 33.3333333%;
    }

    #left-menu{
        left: -100%;
        width: 100%;
    }

    #list1 {
        height: calc( ((100vw - 6px )/3 + 4px)*2 );
    }

    #list2 {
        height: calc( ((100vw - 6px )/3 + 4px) * 4 );
    }
}