.button {
        display:inline;
        position:absolute;
        right:50px;
        top:6px;
        z-index:999;
        font-size:30px;
    }
    .button a {
        text-decoration:none;
    }
    .btn-open:after {
        color:#333;
        content:"\f0c9";
        font-family:"FontAwesome";
        transition-property:all .2s linear 0s;
        -moz-transition:all .2s linear 0s;
        -webkit-transition:all .2s linear 0s;
        -o-transition:all .2s linear 0s;
    }
    .btn-open:hover:after {
        color:#34B484;
    }
    .btn-close:after {
        color:#fff;
        content:"\f00d";
        font-family:"FontAwesome";
        transition-property:all .2s linear 0s;
        -moz-transition:all .2s linear 0s;
        -webkit-transition:all .2s linear 0s;
        -o-transition:all .2s linear 0s;
    }
    .btn-close:hover:after {
        color: #34B484;
    }
    /*overlay*/
    .overlay_wrap{
        display:none;
        position:fixed;
        top:0;
        left:0;
        height:100%;
        width:100%;
        overflow:auto;
        /*#333*/
        background-color: rgba(51, 51, 51, 0.6);
        z-index:99;
    }
    .overlay_wrap_trans{
        display:none;
        position:fixed;
        top:0;
        left:0;
        height:100%;
        width:100%;
        overflow:auto;
        /*#333*/
        background-color: rgba(51, 51, 51, 0.6);
        z-index:99;
    }
    .overlay {
        position:fixed;
        top:0;
        right:-68%;
        height:100%;
        width:68%;
        max-width: 330px;
        min-width: 200px;
        background:#333;
        overflow:auto;
        transition:all 0.2s ease-out;
    }
    .overlay.on {
        right: 0;
        transition:all 0.2s ease-out;
    }
    .coin_text_style{
        color: #e9e9e9;
        font-size:1.4em;
        display: inline-block;
        text-align: center;
        /*width: 49%;*/
        width: 100%;


    }

    .wrap {
        color:#e9e9e9;
        text-align:center;
        max-width:100%;
        margin:0 auto;
    }
    .wrap ul.wrap-nav {
        /*border-bottom:1px solid #575757;*/
        text-transform:capitalize;
    } 
    .wrap .wrapper .side_img img {
        border-radius: 50%;
        visibility: visible;
        width: 100%;
        margin-bottom: 10px;
        /*border: 2px solid #8e8e8e;*/
        /*min-width: 85px;*/
    }
    .wrap ul.wrap-nav li {
        font-size:1.2em;
        display:inline-block;
        vertical-align:top;
        width:24%;
        position:relative;
    }

    .wrap ul.wrap-nav li.upload_btn {
        width: 83%;
        border-radius: 8px;
    }

    .wrap ul.wrap-nav li.rec_btn a {

    }


    .wrap ul.wrap-nav li a {

        font-size:0.95em;
        color:#ddd;
        display:block;
        padding:7px 0;
        text-decoration:none;
        transition-property:all .2s linear 0s;
        -moz-transition:all .2s linear 0s;
        -webkit-transition:all .2s linear 0s;
        -o-transition:all .2s linear 0s;
    }

    .wrap ul.wrap-nav ul {
        padding:10px 0px 15px 0;
        line-height: 30px;
    }
    .wrap ul.wrap-nav ul li img{
        padding-right: 6px;
        padding-top: 2px;
    }
    .wrap ul.wrap-nav ul li {
        display:block;
        font-size:0.8em;
        width:100%;
        color:#e9e9e9;
    }
    .wrap ul.wrap-nav ul li a {
        color:#f0f0f0;
    }
    .wrap ul.wrap-nav ul li a:hover {
        color:#34B484;
    }

/*}*/
/*@media screen and (max-width:48em) {*/
    .wrap ul.wrap-nav>li {
        width: 100%;
        text-align: left;
        padding-top:6px;
        padding-bottom:6px;
    }
    .wrap ul.wrap-nav>li .img {
        margin-right:5px;
        display: inline-block;
        width: 17px;
        height: 17px;
    }
    .wrap ul.wrap-nav>li .img img{
        width: 100%;
        height: 100%;
    }
    .wrap ul.wrap-nav>li .data {
        float: right;
        line-height: 30px;
        margin-top: -30px;
    }
    .wrap ul.wrap-nav>li:hover, .wrap ul.wrap-nav>li:active {
        background-color: #2b2b2b;
        /*border:2px dotted #ff9d00;*/
        /*color:#f0f0f0;*/
    }
    .wrap ul.wrap-nav>li:hover > a, .wrap ul.wrap-nav>li:active > a{
        /*color:#ff9d00;*/
    }


    .wrap ul.wrap-nav>li i{
        display:block;
        padding-bottom: 5px;
        color:#ddd;
        font-size: 1.7em;
    }
    .wrap ul.wrap-nav {
        /*padding:30px 0px 150px 0px;*/
    }

    nav ul {
        opacity:0;
        visibility:hidden;
    }
    .btn_logout{
        /*background-color: #333;*/
        /*border: 1px solid #9a9a9a;*/
        /*margin-top: 10px;*/
        /*width: 95%;*/
        /*color: #fff;*/
        /*font-size: 0.7em;*/
    }

    .btn_logout:hover, .btn_logout:active{
        /*color:#ddd;*/
        /*border: 1px solid #f49800;*/
        /*background-color: #2d2a2a;*/
    }

    .btn_charge{
        margin-top: 10px;
        width: 100%;
        color: #111;
        background: #fff;
        border-radius: 4px;
        font-weight: bold;
        border-bottom: 2px solid #bbb;
        padding: 3px 0 5px 0;
    }
    .btn_charge:hover, .btn_charge:active{
        color:#fff;
        /*border: 3px solid #f49800;*/
        background-color: #F9800B;
        border-bottom: 2px solid #d26700;
    }


    .side_my_nic {
        color: #f49800;
        font-size: 18px;
        line-height: 26px;
        padding-top: 6px;
        text-align:left;
    }
    .side_my_nic .side_img {
        float:left;
        width:30%;
        margin-right: 4%;
    }
    .side_nic, .side_email, .side_btn{
        margin-left:34%;
    }
    .side_nic{
        color: #fff;
        font-size: 18px;
        height: 30px;
        line-height: 24px;
        padding-top: 6px;
        overflow: hidden;
    }
    .side_email{
        font-size: 11px;
        line-height: 18px;
        color: #8b8b8b;
        overflow: hidden;
    }
    .side_btn{
        font-size: 11px;
        padding-top: 8px;
        text-align: center;
        padding-bottom:10px;
    }
    .side_btn:after{
        content:"";
        display:block;
        clear:both;
    }
    .side_btn li{
        float: left;
        border: 1px solid #666;
        width: 48%;
        height: 28px;
        line-height: 28px;
    }
    .side_btn li a:hover, .side_btn li a:active{
        color:#fa8100;
    }
    .side_btn li.first{
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }
    .side_btn li.second{
        border-left:none;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }
    .side_btn a{
        color: #fff;
        display: block;
    }
    .side_coin_style .data strong{
        color:#fa8100;
        font-size: 18px;
    }
    .side_adult .data{
        width:51px;
        height:30px;
        background:url("../../../../../assets/image/sidemenu_adult_off.png") no-repeat center center;
    }
    .side_adult.on .data{
        width:51px;
        height:30px;
        background:url("../../../../../assets/image/sidemenu_adult_on.png") no-repeat center center;
    }
    .side_wrap{
        width: 84%;
        margin: 5px 8%;
        background:none;
        padding: 10px 0;
        box-shadow: none;
        border-top: 0;
        border-bottom: 1px solid #484848;
    }
    .side_wrap:after{
        content:"";
        display:block;
        clear:both;
    }


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

    .comic_control_btn{
/*display: none !important;*/
    }
}

@media screen and (max-width: 767px) {
    .overlay{
        /*width: 65%;*/
        width: 68%;
    }
    .wrap ul.wrap-nav img{
        margin-bottom: 0px;
    }
    .wrap ul.wrap-nav ul{
        padding: 0;
    }

}


@media (max-width: 600px) and (min-width: 0px) {

    .side_wrap {
        width: 90%;
        margin: 5px 5%;
    }
    /*.coin_text_style{*/
        /*font-size:1.2em;*/
    /*}*/
    /*.side_my_nic {*/
    /*line-height: 3em;*/
    /*font-size:1.3em;*/
    /*} */
    /*.wrap ul.wrap-nav>li {*/
        /*width:26.5%;*/
    /*}*/
    /*.wrap ul.wrap-nav li.rec_btn a{*/
    /*font-size: 0.8em;*/
    /*}*/
}