@font-face {
    font-family:SCDream1;
    src:  url(../fonts/SCDream1.otf)
}
@font-face {
    font-family:SCDream4;
    src:  url(../fonts/SCDream4.otf)
}
@font-face {
    font-family:SCDream6;
    src:  url(../fonts/SCDream6.otf)
}
@font-face {
    font-family:SCDream8;
    src:  url(../fonts/SCDream8.otf)
}
@font-face {
    font-family:SCDream9;
    src:  url(../fonts/SCDream9.otf)
}
@font-face {
    font-family:Cafe24Ohsquare;
    src:  url(../fonts/Cafe24Ohsquare.ttf)
}
html{
    height:100%;
    overflow-x:hidden;
    overflow-y:scroll !important;
}
body{
    height:100%;
    padding-right: 0 !important; 
    text-align:center;
    background-color:#0c0c0c;
    background-image:url(main-bg.png);
    background-repeat:no-repeat;
    background-position:center top;
    background-size:contain;
}
body.active{
    overflow:hidden;
}
body.mld-active{
    overflow:hidden;
}
input, button, select, a, p, th, td, span{
}
button{
    cursor:pointer;
    padding:0;
}
.wrapper{
    width:100%;
    float:left;
    position:relative;
    overflow-x:hidden;
    z-index:1;
    min-height:100%;
}

@keyframes bannerGlowAnim{
    0%{opacity:1;}
    50%{opacity:0.5;}
    100%{opacity:1;}
}
.wrapper.affix{
    padding-top:70px;
}
.bs-ul{
    list-style:none;
    margin-bottom:0;
    width:auto;
    display:table;
    height:auto;
    padding:0;
}
.bs-ul li{
    list-style:none;
    width:auto;
    height:auto;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position:relative;
}

/* -- HEADER MAIN -- */

.header-main .container-main{
    width:100%;
    max-width:1606px;
    height:170px;
    background-image:url(header-bg.png);
    background-position:top center;
    margin:0 auto;
    padding:0 0 33px 0;
    position:relative;
}
.header-main .container-main:before{
    content:'';
    width:100%;
    max-width:1344px;
    height:9px;
    position:absolute;
    left:0;
    right:0;
    bottom:10px;
    margin:0 auto;
    background-image:url(header-border.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:1344px 9px;
    animation:headerBorderAnim 18s linear infinite;
}
@keyframes headerBorderAnim{
    0%{opacity:0;width:0;}
    15%{opacity:1;width:0;}
    25%{opacity:1;width:100%;}
    95%{opacity:1;width:100%;}
    99%{opacity:0;width:100%;}
    100%{opacity:0;width:100%;}
}
.link-main{
    margin-left:50px; 
    margin-top:15px;
}
.link-main li{
    padding:0 0;
}
.link-main li a{
    width:auto;
    height:35px;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    padding:0 14px 0 10px;
    white-space:nowrap;
}
.link-main li a:before{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:0;
    height:100%;
    transform:skew(-10deg);
    background-image: linear-gradient(#121419,#1f212b);
    border: solid 1px rgba(87,87,87,0.50);
    box-shadow:inset 0 0 5px #000,0 1px 1px #000;
    opacity:0;
    transition:0.3s;
}
.link-main li a:hover:before{
    width:100%;
    opacity:1;
}
.link-main li a.active:before{
    width:100%;
    opacity:1;
}
.link-main li a .icon-cont{
    display:inline-block;
    vertical-align:middle;
    position:relative;
    z-index:1;
}
.link-main li a .text{
    color:#fefefe;
    font-size:17px;
    display:inline-block;
    vertical-align:middle;
    text-shadow:0 0 5px rgba(255,255,255,0.50);
    position:relative;
    z-index:1;
    transition:0.3s;
    cursor: pointer;
}

/* Mr Play Logo */

.mp-logo{
    width:220px;
    display:inline-block;
    position:absolute;
    left:0;
    right:0;
    top:8%;
    margin:0 auto;
    animation:mpLogoAnim 18s ease infinite;
    z-index:96;
}
@keyframes mpLogoAnim{
    0%{transform:scale(1);}
    6%{transform:scale(1);}
    7%{transform:scale(0.9);}
    8%{transform:scale(1);}
    9%{transform:scale(1);}
    10%{transform:scale(0.9);}
    11%{transform:scale(1);}
    12%{transform:scale(1);}
    13%{transform:scale(0.9);}
    14%{transform:scale(1);}
    95%{transform:scale(1);}
    100%{transform:scale(1);}
}
.mp-logo .pattern{
    width:100%;
    opacity:0;
}
.mp-logo .wing-blade{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    animation:wingBladeAnim 18s ease infinite;
}
@keyframes wingBladeAnim{
    0%{opacity:0;transform:translateY(-50%);}
    3%{opacity:1;transform:translateY(0%);}
    95%{opacity:1;transform:translateY(0%);}
    100%{opacity:0;transform:translateY(0%);}
}
.mp-logo .wing-blade .blade-l{
    width:25.46%;
    position:absolute;
    top:4%;
    left:4.50%;
    transform-origin:bottom left;
    animation:bladeLeftAnim 18s ease infinite;
}
@keyframes bladeLeftAnim{
    0%{transform:rotate(40deg);}
    4%{transform:rotate(40deg);}
    5%{transform:rotate(0deg);}
    28%{transform:rotate(0deg);}
    29%{transform:rotate(10deg);}
    34%{transform:rotate(10deg);}
    35%{transform:rotate(0deg);}
    50%{transform:rotate(0deg);}
    51%{transform:rotate(10deg);}
    56%{transform:rotate(10deg);}
    57%{transform:rotate(0deg);}
    80%{transform:rotate(0deg);}
    81%{transform:rotate(10deg);}
    86%{transform:rotate(10deg);}
    87%{transform:rotate(0deg);}
    95%{transform:rotate(0deg);}
    100%{transform:rotate(0deg);}
}
.mp-logo .wing-blade .blade-r{
    width:25.46%;
    position:absolute;
    top:3%;
    right:5.25%;
    transform-origin:bottom right;
    animation:bladeRightAnim 18s ease infinite;
}
@keyframes bladeRightAnim{
    0%{transform:rotate(-40deg);}
    4%{transform:rotate(-40deg);}
    5%{transform:rotate(0deg);}
    28%{transform:rotate(0deg);}
    29%{transform:rotate(-10deg);}
    34%{transform:rotate(-10deg);}
    35%{transform:rotate(0deg);}
    50%{transform:rotate(0deg);}
    51%{transform:rotate(-10deg);}
    56%{transform:rotate(-10deg);}
    57%{transform:rotate(0deg);}
    80%{transform:rotate(0deg);}
    81%{transform:rotate(-10deg);}
    86%{transform:rotate(-10deg);}
    87%{transform:rotate(0deg);}
    95%{transform:rotate(0deg);}
    100%{transform:rotate(0deg);}
}
.mp-logo .wing-blade .wings{
    width:99.55%;
    position:absolute;
    bottom:1%;
    left:0;
}
.mp-logo .thorns{
    width:74.55%;
    position:absolute;
    bottom:0;
    left:0;
    right:1%;
    margin:0 auto;
    opacity:0;
    animation:thornsAnim 18s ease infinite;
}
@keyframes thornsAnim{
    0%{opacity:0;transform:translateY(-10%);}
    15%{opacity:0;transform:translateY(-10%);}
    16%{opacity:1;transform:translateY(0);}
    28%{opacity:1;transform:translateY(0);}
    29%{opacity:1;transform:translateY(-50%);}
    34%{opacity:1;transform:translateY(-50%);}
    35%{opacity:1;transform:translateY(0);}
    50%{opacity:1;transform:translateY(0);}
    51%{opacity:1;transform:translateY(-50%);}
    56%{opacity:1;transform:translateY(-50%);}
    57%{opacity:1;transform:translateY(0);}
    80%{opacity:1;transform:translateY(0);}
    81%{opacity:1;transform:translateY(-50%);}
    86%{opacity:1;transform:translateY(-50%);}
    87%{opacity:1;transform:translateY(0);}
    95%{opacity:1;transform:translateY(0);}
    100%{opacity:0;transform:translateY(0);}
}
.mp-logo .half-circle{
    width:86.37%;
    position:absolute;
    top:2.50%;
    left:0;
    right:1%;
    margin:0 auto;
    opacity:0;
    animation:halfCircleAnim 18s ease infinite;
}
@keyframes halfCircleAnim{
    0%{opacity:0;transform:scale(1.5);}
    6%{opacity:0;transform:scale(1.5);}
    7%{opacity:1;transform:scale(1);}
    95%{opacity:1;transform:scale(1);}
    100%{opacity:0;transform:scale(1);}
}
.mp-logo .diamond{
    width:69.55%;
    position:absolute;
    top:3.50%;
    left:0;
    right:1%;
    margin:0 auto;
    opacity:0;
    animation:diamondAnim 18s ease infinite;
}
@keyframes diamondAnim{
    0%{opacity:0;transform:scale(1.5);}
    9%{opacity:0;transform:scale(1.5);}
    10%{opacity:1;transform:scale(1);}
    95%{opacity:1;transform:scale(1);}
    100%{opacity:0;transform:scale(1);}
}
.mp-logo .main-circle{
    width:69.55%;
    position:absolute;
    top:3.50%;
    left:0;
    right:1%;
    margin:0 auto;
    opacity:0;
    animation:mainCircleAnim 18s ease infinite;
}
@keyframes mainCircleAnim{
    0%{opacity:0;transform:scale(1.5) rotate(0deg);}
    12%{opacity:0;transform:scale(1.5) rotate(0deg);}
    13%{opacity:1;transform:scale(1) rotate(0deg);}
    17%{opacity:1;transform:scale(1) rotate(0deg);}
    20%{opacity:1;transform:scale(1) rotate(360deg);}
    95%{opacity:1;transform:scale(1) rotate(360deg);}
    100%{opacity:0;transform:scale(1) rotate(360deg);}
}
.mp-logo .mrplay{
    width:64.10%;
    position:absolute;
    top:9.25%;
    left:0;
    right:4%;
    margin:0 auto;
    opacity:0;
    animation:mrplayAnim 18s ease infinite;
}
@keyframes mrplayAnim{
    0%{opacity:0;transform:scale(0);}
    21%{opacity:1;transform:scale(0);}
    25%{opacity:1;transform:scale(1.1);}
    29%{opacity:1;transform:scale(1);}
    95%{opacity:1;transform:scale(1);}
    100%{opacity:0;transform:scale(1);}
}
.mp-logo .fruits{
    width:96.37%;
    position:absolute;
    top:0;
    left:4%;
    right:0;
    margin:0 auto;
    opacity:0;
    animation:fruitsAnim 18s ease infinite;
}
@keyframes fruitsAnim{
    0%{opacity:0;transform:scale(0) rotate(0deg);}
    17%{opacity:1;transform:scale(0) rotate(0deg);}
    20%{opacity:1;transform:scale(1.2) rotate(360deg);}
    23%{opacity:1;transform:scale(1) rotate(360deg);}
    30%{opacity:1;transform:scale(1.1) rotate(360deg);}
    37%{opacity:1;transform:scale(1) rotate(360deg);}
    44%{opacity:1;transform:scale(1.1) rotate(360deg);}
    51%{opacity:1;transform:scale(1) rotate(360deg);}
    58%{opacity:1;transform:scale(1.1) rotate(360deg);}
    65%{opacity:1;transform:scale(1) rotate(360deg);}
    72%{opacity:1;transform:scale(1.1) rotate(360deg);}
    79%{opacity:1;transform:scale(1) rotate(360deg);}
    86%{opacity:1;transform:scale(1.1) rotate(360deg);}
    95%{opacity:1;transform:scale(1) rotate(360deg);}
    100%{opacity:0;transform:scale(1) rotate(360deg);}
}

/* Right Pane */

.header-main .right-pane{
    margin-right:115px;
}
.header-main .right-pane .btn-grp{
    float:right;
    clear:both;
    margin-right:24px;
}
.header-main .right-pane .btn-grp a{
    width:108px;
    height:38px;
    float:left;
    padding:0;
    position:relative;
    z-index:1;
    background-color:transparent;
    border:none;
    white-space:nowrap;
    color:#66ff33;
    font-size:14px;
    text-shadow:0 2px 0 #000;
    margin-left:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}
.header-main .right-pane .btn-grp a:before,
.header-main .right-pane .btn-grp a:after{
    content:'';
    width:100%;
    height:100%;
    left:0;
    right:0;
    top:0;
    margin:0 auto;
    position:absolute;
    z-index:-1;
    border-radius:20px;
    transition:0.3s;
}
.header-main .right-pane .btn-grp a:before{
    background-image:url(nav-btn.png);
    background-repeat:repeat-x;
    background-size:100% 100%;
}
.header-main .right-pane .btn-grp a:after{
    background-image: linear-gradient(#121419,#1f212b);
    border: solid 1px rgba(87,87,87,0.50);
    box-shadow: inset 0 0 5px #000,0 1px 1px #000;
    opacity:0;
    width:0;
}
.header-main .right-pane .btn-grp a:hover:after{
    opacity:1;
    width:100%;
}
.header-main .right-pane .btn-grp a.lg{
    width:158px;
    color:#eee71f;
}
.header-main .right-pane .btn-grp a.lg:before{
    background-image:url(nav-btn-lg.png);
}
.header-main .right-pane .btn-grp a i{
    margin-right:5px;
    position:relative;
    top:-1px;
    display:inline-block;
    vertical-align:middle;
}

/* Before Login */

.bal-container{
    float:right;
    clear:both;
}
.before-login{
    float:left;
    padding:4px 7px;
    position:relative;
    margin:17px 0 20px;
    /*display:none;*/
}
.before-login.active{
    /*display:block;*/
}
.before-login .dekstop{
    display:block;
}
.before-login .mobile{
    display:none;
}
.before-login:before{
    content:'';
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    transform:skew(-35deg);
    border:solid 1px #000000;
    background-color:#111315;
}
.before-login .input-cont{
    width:142px;
    height:40px;
    float:left;
    position:relative;
    z-index:1;
    margin-right:5px;
}
.before-login .input-cont:before{
    content:'';
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    transform:skew(-35deg);
    border:solid 1px rgba(87,87,87,0.50);
    background-color:#000000;
    z-index:-1;
}
.before-login .input-cont input{
    width:100%;
    height:100%;
    float:left;
    border:none;
    background-color:transparent;
    color:#fff;
    font-size:14px;
    font-family:SCDream4;
    padding:0 20px;
}
.before-login .input-cont input::placeholder{
    color:#999999;
    font-family:Cafe24Ohsquare;
}
.before-login button{
    width:90px;
    height:40px;
    float:left;
    position:relative;
    z-index:1;
    margin-right:5px;
    background-color:transparent;
    border:none;
    color:#dbdcd6;
    font-size:15px;
    text-shadow:0 1px 1px rgba(0,0,0,0);
    transition:0.3s;
}
.before-login button:last-child{
    margin-right:1px;
}
.before-login button:before,
.before-login button:after{
    content:'';
    width:100%;
    height:100%;
    left:0;
    right:0;
    top:0;
    margin:0 auto;
    position:absolute;
    transform:skew(-35deg);
    border:solid 1px #1d424e;
    transition:0.3s;
    z-index:-1;
}
.before-login button:before{
    background-color:#1c3b5e;
    background-image:linear-gradient(#304b74,#062845);
}
.before-login button:after{
    width:0;
    background-color:#507cbf;
    background-image: linear-gradient(#507cbf,#093a63);
    opacity:0;
}
.before-login button.green{
    width:125px;
}
.before-login button:hover{
    text-shadow:0 1px 1px rgba(0,0,0,1);
}
.before-login button.green:before{
    border:solid 1px #254d1a;
    background-color:#35770d;
    background-image:linear-gradient(#4ea40e,#153c0b);
}
.before-login button.green:after{
    border:solid 1px #254d1a;
    background-color:#35770d;
    background-image: linear-gradient(#64d213,#215613);
}
.before-login button.green i{
    color:#99ff66;
    text-shadow:0 1px 1px rgba(0,0,0,0.76);
    margin-right:3px;
}
.before-login button:hover:after{
    width:100%;
    opacity:1;
}

/* After Login */

.after-login{
    float:left;
    margin:4px 0;
    /*display:none;*/
}
/*.after-login.active{*/
/*    display:block;*/
/*}*/
.after-login .desktop{
    display:block;
    width:440px;
}
.after-login p{
    margin:0;
}
.after-login .al-inner{
    width:100%;
    float:left;
}
.after-login .al-row{
    width:100%;
    height:auto;
    float:left;
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content:center;
    margin:2px 0;
    position:relative;
    z-index:1;
    padding:0 5px;
}
.after-login .al-row:first-child:before{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    background-color: #b5dbff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(255,255,255,0.8);
    opacity:0.5;
}
.after-login .al-row:last-child{
    padding-top:2px;
}
.after-login .al-cont{
    width:auto;
    height:34px;
    float:left;
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content:flex-start;
    position:relative;
    margin-right:25px;
}
.after-login .al-cont:first-child{
    margin-left:0;
}
.after-login .al-cont:last-child{
    margin-right:0;
}
.after-login .al-cont.link-grp{
    border-bottom:none;
}
.after-login .al-cont .labels{
    width:auto;
    height:100%;
    float:left;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.after-login .al-cont .labels span{
    color:#a7bed7;
    font-size:12px;
    font-family:SCDream4;
}
.after-login .al-cont .labels i{
    color:#8eff81;
    font-size:18px;
}
.after-login .al-cont .labels .arrow-icon{
    color:#8eff81;
    font-size:18px;
    text-shadow:0 0 1px #000;
    margin-right:5px;
}
.after-login .al-cont .labels a{
    color:#a7bed7;
    font-size:12px;
    font-family:SCDream4;
    text-decoration:none;
    transition:0.3s;
}
.after-login .al-cont .labels a:hover{
    color:#e12649;
}
.after-login .al-cont .labels img{
    width:20px;
}
.after-login .al-cont .info{
    width:auto;
    height:100%;
    float:left;
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content:flex-start;
    padding-left:5px;
}
.after-login .al-cont .info p{
    color:#fff;
    font-size:12px;
    font-family:SCDream6;
    white-space:nowrap;
}
.after-login .al-cont .info .symbol{
    color:#ccc;
    font-family:SCDream4;
}

/* Progressbar */

.after-login .al-cont.prog-b{
    width:49.5%;
    border-radius:3px;
    padding: 0 5px 0 60px;
    margin-right:0;
}
.after-login .al-cont.prog-b .labels{
    width:60px;
    position:absolute;
    left:0;
    top:0;
}
.after-login .al-cont.prog-b .info{
    width:100%;
}
.progressbar{
    width:100%;
    height:28px;
    overflow:hidden;
    position:relative;
    background-image: linear-gradient(#121419,#1f212b);
    border: solid 1px rgb(97, 116, 135);
    overflow:hidden;
    box-shadow:0 1px 1px #000;
}
.progressbar:before{
    content:'';
    width:100%;
    height:100%;
    box-shadow: inset 0 0 5px #000;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}
.progressbar .percent{
    /*width:80%;*/
    height:100%;
    float:left;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:0;
    overflow:hidden;
}
.progressbar .percent:before{
    content:'';
    width:400%;
    height:100%;
    background-image: linear-gradient(to right,#9ff37a,#25f72a,#9ff37a,#25f72a,#9ff37a,#25f72a);
    position:absolute;
    left:0;
    top:0;
    display:block;
    z-index:1;
    animation:progressbarAnim 1s linear infinite;
}
@keyframes progressbarAnim{
    0%{left:0;}
    100%{left:-300%;}
}
.after-login .al-cont .progressbar .percent p{
    color:#000;
    font-size:12px;
    position:relative;
    z-index:1;
    text-shadow:0 0 4px #fff;
}
.after-login .al-cont.link-grp{
    width:49.5%;
    padding-left:0;
}
.after-login .al-cont.link-grp a{
    width:49%;
    height:28px;
    float:left;
    margin:0 1%;
    border:none;
    transition:0.3s;
    position:relative;
    white-space:nowrap;
    border:none;
    color:#fff;
    font-size:12px;
    font-family:SCDream4;
    background-color:#49b9b2;
    text-shadow: 0 1px 1px rgba(0,0,0,0.14);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}
.after-login .al-cont.link-grp a:hover{
    background-color:#67a8ab;
}
.after-login .al-cont.link-grp a:first-child{
    margin-left:0;
}
.after-login .al-cont.link-grp a:last-child{
    margin-right:0;
}
.after-login .al-cont.link-grp a.message{
    width:28%;
}
.after-login .al-cont.link-grp a.blue{
    background-color:#01a8c1;
}
.after-login .al-cont.link-grp a.gray{
    background-color: #5a6268;
}
.after-login .al-cont.link-grp a.blue:hover{
    background-color: #6e93b8;
}
.after-login .al-cont.link-grp a.gray:hover{
    background-color:#ccc;
    color:#000;
    text-shadow:0 0 0 rgba(0,0,0,0);
}
.after-login .al-cont.link-grp a.message i{
    color:#013038;
    font-size:12px;
    z-index:1;
    animation:letter_anim 1s linear infinite;
}
@keyframes letter_anim{
    0% {transform:rotate(0deg);}
    25% {transform:rotate(10deg);}
    50% {transform:rotate(-10deg);}
    75% {transform:rotate(10deg);}
    100% {transform:rotate(0deg);}
}

/* After Login Mobile */

.after-login .mobile{
    width:100%;
    float:left;
    display:none;
    position:relative;
    z-index:1;
    padding: 4px 7px;
}
.after-login .mobile:before{
    content:'';
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    transform:skew(-20deg);
    border:solid 1px #000000;
    background-color:#111315;
    z-index:-1;
}
.after-login .mobile button{
    width:auto;
    height:35px;
    float:left;
    position:relative;
    z-index:1;
    background-color:transparent;
    border:none;
    color:#000;
    text-shadow:0 1px 1px rgba(255,255,255,0.5);
    transition:0.3s;
}
.after-login .mobile button:last-child{
    margin-right:1px;
}
.after-login .mobile button:before{
    content:'';
    width:100%;
    height:100%;
    left:0;
    right:0;
    top:0;
    margin:0 auto;
    position:absolute;
    transform:skew(-20deg);
    border:solid 1px #0a9a8d;
    transition:0.3s;
    z-index:-1;
    background-color:#49b9b2;
    background-image: linear-gradient(#49b9b2,#01827a);
}
.after-login .mobile button.gray{
    color:#fff;
    text-shadow:0 1px 1px rgba(0,0,0,1);
}
.after-login .mobile button.gray:before{
    border:solid 1px #333;
    background-color:#8e8e8e;
    background-image: linear-gradient(#8e8e8e,#5f5f5f);
}
.after-login .mobile button:hover:after{
    width:100%;
    opacity:1;
}

/* Deco Cut */

.decoration-side{
    width:360px;
    height:146px;
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    margin:0 auto;
    pointer-events:none;
}
.decoration-side .center{
    width:1606px;
    height:146px;
    position:absolute;
    left:-623px;
    bottom:0;
}
.deco-cut{
    width:131px;
    height:146px;
    position:absolute;
    left:5px;
    bottom:0;
    pointer-events:none;
}
.deco-cut.right{
    right:5px;
    left:auto;
    transform:rotateY(180deg);
}
.deco-cut .cut-l-t{
    position:absolute;
    top:53px;
    left:0;
    z-index:2;
    opacity:0;
    transform-origin:bottom right;
    animation:cutLTAnim 18s ease infinite;
}
@keyframes cutLTAnim{
    0%{opacity:0;transform:rotate(10deg) translate(20px,20px);;}
    26%{opacity:0;transform:rotate(10deg) translate(20px,20px);;}
    27%{opacity:1;transform:rotate(10deg) translate(0,0);}
    28%{opacity:1;transform:rotate(10deg) translate(0,0);}
    29%{opacity:1;transform:rotate(0deg) translate(0,0);}
    34%{opacity:1;transform:rotate(0deg) translate(0,0);}
    36%{opacity:1;transform:rotate(10deg) translate(0,0);}
    38%{opacity:1;transform:rotate(0deg) translate(0,0);}
    40%{opacity:1;transform:rotate(0deg) translate(0,0);}
    42%{opacity:1;transform:rotate(10deg) translate(0,0);}
    44%{opacity:1;transform:rotate(0deg) translate(0,0);}
    50%{opacity:1;transform:rotate(0deg) translate(0,0);}
    52%{opacity:1;transform:rotate(10deg) translate(0,0);}
    54%{opacity:1;transform:rotate(0deg) translate(0,0);}
    80%{opacity:1;transform:rotate(0deg) translate(0,0);}
    82%{opacity:1;transform:rotate(10deg) translate(0,0);}
    84%{opacity:1;transform:rotate(0deg) translate(0,0);}
    89%{opacity:1;transform:rotate(0deg) translate(0,0);}
    91%{opacity:1;transform:rotate(10deg) translate(0,0);}
    93%{opacity:0;transform:rotate(10deg) translate(20px,20px);}
    95%{opacity:0;transform:rotate(0deg) translate(0,0);}
    100%{opacity:0;transform:rotate(0deg) translate(0,0);}
}
.deco-cut .cut-r-t{
    position:absolute;
    top:1px;
    left:2px;
    z-index:2;
    opacity:0;
    transform-origin:bottom right;
    animation:cutRTAnim 18s ease infinite;
}
@keyframes cutRTAnim{
    0%{opacity:0;transform:rotate(0deg) translate(20px,20px);;}
    26%{opacity:0;transform:rotate(0deg) translate(20px,20px);;}
    27%{opacity:1;transform:rotate(0deg) translate(0,0);}
    89%{opacity:1;transform:rotate(0deg) translate(0,0);}
    91%{opacity:1;transform:rotate(0deg) translate(0,0);}
    93%{opacity:0;transform:rotate(0deg) translate(20px,20px);}
    95%{opacity:0;transform:rotate(0deg) translate(0,0);}
    100%{opacity:0;transform:rotate(0deg) translate(0,0);}
}
.deco-cut .cut-l-b{
    position:absolute;
    bottom:0;
    right:0;
    z-index:1;
    opacity:0;
    transform-origin:bottom right;
    animation:cutLBAnim 18s ease infinite;
}
@keyframes cutLBAnim{
    0%{opacity:0;transform:rotate(10deg);}
    24%{opacity:0;transform:rotate(10deg);}
    25%{opacity:1;transform:rotate(0deg);}
    34%{opacity:1;transform:rotate(0deg);}
    36%{opacity:1;transform:rotate(10deg);}
    38%{opacity:1;transform:rotate(0deg);}
    40%{opacity:1;transform:rotate(0deg);}
    42%{opacity:1;transform:rotate(10deg);}
    44%{opacity:1;transform:rotate(0deg);}
    54%{opacity:1;transform:rotate(0deg);}
    56%{opacity:1;transform:rotate(10deg);}
    58%{opacity:1;transform:rotate(0deg);}
    80%{opacity:1;transform:rotate(0deg);}
    82%{opacity:1;transform:rotate(10deg);}
    84%{opacity:1;transform:rotate(0deg);}
    93%{opacity:1;transform:rotate(0deg);}
    95%{opacity:1;transform:rotate(10deg);}
    100%{opacity:0;transform:rotate(10deg);}
}
.deco-cut .cut-r-b{
    position:absolute;
    bottom:14px;
    right:0;
    transform-origin:bottom right;
    animation:cutRBAnim 18s ease infinite;
}
@keyframes cutRBAnim{
    0%{opacity:0;transform:rotate(-10deg);}
    24%{opacity:0;transform:rotate(-10deg);}
    25%{opacity:1;transform:rotate(0deg);}
    93%{opacity:1;transform:rotate(0deg);}
    95%{opacity:1;transform:rotate(-10deg);}
    100%{opacity:0;transform:rotate(-10deg);}
}

/* -- BANNER MAIN -- */

.top-container{
    position:relative;
    z-index:2;
    margin-top:5px;
}
.sub-page .top-container{
    padding:25px 0 25px;
}
.banner-main .container-main{
    width:100%;
    max-width:1420px;
    height:322px;
    margin:0 auto;
    position:relative;
}
.banner-main .container-main:before{
    content:'';
    width:100%;
    height:100%;
    background-image:url(banner-bg.png);
    background-size:cover;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}
.banner-carousel{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:3;
    padding-bottom:25px;
}
.banner-carousel .carousel-inner{
    height:100%;
}
.banner-carousel .carousel-inner .carousel-item{
    height:100%;
}
.banner-carousel .text-cont{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:bannerTextAnim 5s ease 1 forwards;
}
@keyframes bannerTextAnim{
    0%{opacity:0;transform:scale(0) translateY(0);}
    20%{opacity:1;transform:scale(1) translateY(0);}
    80%{opacity:1;transform:scale(1) translateY(0);}
    100%{opacity:0;transform:scale(1) translateY(50%);}
}
.banner-carousel .text-cont .center{
    width:auto;
    text-align:center;
    display:inline-block;
    position:relative;
    left:1%;
}
.banner-carousel .text-cont p{
    margin:0;
    position:relative;
}
.banner-carousel .text-cont .txt-lg{
    color:#51c9f3;
    background:-webkit-linear-gradient(#82d3ec,#17befc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:53px;
    margin-bottom:-10px;
}
.banner-carousel .text-cont .txt-md{
    color:#ee89b1;
    background:-webkit-linear-gradient(#f29dbf,#e45287);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:42px;
    margin-top:-5px;
}
.banner-carousel .text-cont .txt-sm{
    color:#fff;
    background:-webkit-linear-gradient(#d8d8d8,#fff,#d4d4d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:28px;
}
.banner-carousel .text-cont p:after{
    content:attr(data-text);
    background:none;
    left:0;
    right:0;
    top:0;
    margin:0 auto;
    position: absolute;
    z-index:-1;
    text-shadow:0 5px 1px #000;
}
.banner-carousel .text-cont .txt-sm:after{
    display:none;
}
.banner-carousel .carousel-indicators{
    margin-bottom:0;
    bottom:25px;
}
.banner-carousel .carousel-indicators li{
    width:20px;
    height:20px;
    margin:0 3px;
    background-color:#999999;
    border-radius:50%;
}
.banner-carousel .carousel-indicators .active{
    background-color:#ff0000;
}
.banner-main .banner-bg{
    width:100%;
    display:none;
}
.banner-deco{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    pointer-events:none;
}
.banner-deco img{
    position:absolute;
    z-index:2;
    opacity:0;
}
.banner-deco .robots{
    width:32.46%;
    left:3.25%;
    bottom:1%;
    animation:robotAnim 20s ease infinite;
}
@keyframes robotAnim{
    0%{opacity:0;transform:scale(0) translateY(-100%);}
    10%{opacity:1;transform:scale(1) translateY(2%);}
    15%{opacity:1;transform:scale(1) translateY(2%);}
    20%{opacity:1;transform:scale(1) translateY(0);}
    25%{opacity:1;transform:scale(1) translateY(2%);}
    30%{opacity:1;transform:scale(1) translateY(0);}
    35%{opacity:1;transform:scale(1) translateY(2%);}
    40%{opacity:1;transform:scale(1) translateY(0);}
    45%{opacity:1;transform:scale(1) translateY(2%);}
    50%{opacity:1;transform:scale(1) translateY(0);}
    55%{opacity:1;transform:scale(1) translateY(2%);}
    60%{opacity:1;transform:scale(1) translateY(0);}
    65%{opacity:1;transform:scale(1) translateY(2%);}
    70%{opacity:1;transform:scale(1) translateY(0);}
    75%{opacity:1;transform:scale(1) translateY(2%);}
    80%{opacity:1;transform:scale(1) translateY(0);}
    85%{opacity:1;transform:scale(1) translateY(2%);}
    95%{opacity:1;transform:scale(1) translateY(0);}
    100%{opacity:0;transform:scale(1) translateY(0);}
}
.banner-deco .chest{
    width:39.44%;
    left:-0.75%;
    bottom:-13.75%;
    animation:chestAnim 20s ease infinite;
}
@keyframes chestAnim{
    0%{opacity:0;transform:translateX(-10%);}
    6%{opacity:0;transform:translateX(-10%);}
    11%{opacity:1;transform:translateX(0);}
    95%{opacity:1;transform:translateX(0);}
    100%{opacity:0;transform:translateX(0);}
}
.banner-deco .slot-item{
    width:14.30%;
    right:16.30%;
    bottom:0;
    animation:slotItemAnim 20s ease infinite;
}
@keyframes slotItemAnim{
    0%{opacity:0;transform:translateY(10%);}
    10%{opacity:0;transform:translateY(0);}
    50%{opacity:0.8;transform:translateY(-10%);}
    95%{opacity:0.8;transform:translateY(0);}
    100%{opacity:0;transform:translateY(0);}
}
.banner-deco .girl{
    width:20.85%;
    right:2%;
    bottom:0.50%;
    z-index:3;
    animation:girlAnim 20s ease infinite;
}
@keyframes girlAnim{
    0%{opacity:0;transform:translateX(50%);}
    10%{opacity:1;transform:translateX(0);}
    95%{opacity:1;transform:translateX(0);}
    100%{opacity:0;transform:translateX(0);}
}
.banner-deco .glow{
    width:22.32%;
    right:-1.50%;
    bottom:-12%;
    animation:bGlowAnim 20s ease infinite;
}
@keyframes bGlowAnim{
    0%{opacity:0;}
    6%{opacity:0;}
    11%{opacity:1;}
    21%{opacity:0.5;}
    31%{opacity:1;}
    41%{opacity:0.5;}
    51%{opacity:1;}
    61%{opacity:0.5;}
    71%{opacity:1;}
    81%{opacity:0.5;}
    95%{opacity:1;}
    100%{opacity:0;}
}

/* -- JACKPOT MAIN -- */

.jackpot-main{
    margin-top:-25px;
}
.jackpot-main .container-main{
    width:100%;
    max-width:1745px;
    height:164px;
    margin:0 auto;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.jackpot-main .container-main:before,
.jackpot-main .container-main:after{
    content:'';
    width:1745px;
    height:100%;
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto 0;
    background-image:url(jackpot-bg.png);
    background-position:center left;
    background-repeat:no-repeat;
    left:50%;
}
.jackpot-main .container-main:before{
    animation:jackpotLeftAnim 1s ease infinite;
}
@keyframes jackpotLeftAnim{
    0%{opacity:0.3;transform:translateX(-50%);}
    50%{opacity:1;transform:translateX(-49%);}
    100%{opacity:0.3;transform:translateX(-50%);}
}
.jackpot-main .container-main:after{
    transform:rotateY(180deg) translateX(-50%);
    animation:jackpotRightAnim 1s ease infinite;
}
@keyframes jackpotRightAnim{
    0%{opacity:0.3;transform:translateX(-50%) rotateY(-180deg);}
    50%{opacity:1;transform:translateX(-51%) rotateY(-180deg);}
    100%{opacity:0.3;transform:translateX(-50%) rotateY(-180deg);}
}
.jackpot-main .container-main .labels{
    color:#fffc00;
    font-size:60px;
    margin:0 80px 0 0;
    text-shadow:0 0 9px rgba(247,246,128,0.50);
    position:relative;
    top:3px;
}
.jackpot-main .container-main .amount{
    color:#fff;
    font-size:60px;
    font-family:SCDream9;
    margin:0;
    text-shadow:0 0 9px rgba(255,255,255,0.50);
}

/* -- WITHDRAW MAIN -- */

.withdraw-main{
    margin-top:-35px;
}
.withdraw-main .container-main{
    width:100%;
    max-width:1060px;
    height:40px;
    margin:0 auto;
    background-color:#26766e;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.withdraw-main .container-main:before,
.withdraw-main .container-main:after{
    content:'';
    width:200px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto 0;
    z-index:2;
}
.withdraw-main .container-main:before{
    left:0;
    background-image:linear-gradient(to right, rgba(12,12,12,1), rgba(12,12,12,0.5),rgba(12,12,12,0));
}
.withdraw-main .container-main:after{
    right:0;
    background-image:linear-gradient(to left, rgba(12,12,12,1), rgba(12,12,12,0.5),rgba(12,12,12,0));
}
.withdraw-main .container-main .bs-ul{
    width:auto;
    padding:0;
    display:block;
    display:flex;
    align-items:center;
    justify-content:center;
}
.withdraw-main .container-main .bs-ul li{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    float:left;
    padding:0 15px;
}
.withdraw-main .container-main .bs-ul li:before{
    content:'';
    width:1px;
    height:11px;
    right:0;
    top:0;
    bottom:0;
    position:absolute;
    margin:auto 0;
    background-color:#49c7ba;
    box-shadow:0 2px 2px rgba(0,0,0,0.50);
}
.withdraw-main .container-main .bs-ul li:last-child:before{
    display:none;
}
.withdraw-main .container-main .owl-item:last-child .bs-ul li:before{
    display:none;
}
.withdraw-main .container-main .bs-ul .count-icon{
    width:16px;
    height:16px;
    display:inline-block;
    background-color:#cc3333;
    border-radius:50%;
    color:#fff;
    font-size:9px;
    font-family:SCDream4;
    padding:2px 0;
    margin-right:5px;
}
.withdraw-main .container-main .bs-ul .user{
    color:#ffffff;
    font-size:14px;
    font-family:SCDream6;
    text-shadow:0 2px 2px rgba(0,0,0,0.50);
}
.withdraw-main .container-main .bs-ul .amount{
    color:#ffff33;
    font-size:16px;
    font-family:SCDream8;
    text-shadow:0 2px 2px rgba(0,0,0,0.50);
    margin:0 10px 0 13px;
}
.withdraw-main .container-main .bs-ul .date{
    color:#020202;
    font-size:14px;
    font-family:SCDream4;
    text-shadow:0 2px 2px rgba(0,0,0,0.50);
}

/* -- NEWS MAIN -- */

.news-main{
    margin-top:15px;
}
.news-carousel span{
    color:#e18f24;
    font-size:12px;
    font-family:SCDream4;
    display:inline-block;
    animation:newsCarAnim 3s ease 1 forwards;
}
@keyframes newsCarAnim{
    0%{transform:translateY(-100%);}
    10%{transform:translateY(0);}
    90%{transform:translateY(0);}
    100%{transform:translateY(100%);}
}

/* -- PAGE CONTENT -- */

.page-content{
    /*margin-top:15px;*/
    position:relative;
    z-index:1;
}
.page-content:before,
.page-content:after{
    content:'';
    width:100%;
    position:absolute;
    left:0;
    z-index:-1;
    background-position:center bottom;
    background-repeat:no-repeat;
    pointer-events:none;
}
.page-content:before{
    top:-44px;
    height:100px;
    background-image:url(page-glow.png);
}
.sub-page .page-content:before{
    background-image:none;
}
.page-content:after{
    top:-65px;
    height:121px;
    background-image:url(page-bg.png);
    opacity:0.15;
}
.sub-page .page-content:after{
    background-image:none;
}
.section-head{
    position:relative;
    z-index:2;
    margin-bottom:-1px;
}
.section-head .title-container{
    width:100%;
    max-width:380px;
    height:56px;
    margin:0 auto;
    position:relative;
    z-index:1;
}
.section-head .title-container:before,
.section-head .title-container:after{
    content:'';
    width:58px;
    height:41px;
    background-image:url(section-head-deco.png);
    background-size:cover;
    position:absolute;
    left:-34px;
    bottom:0;
    z-index:-1;
}
.section-head .title-container:before{
    animation:secHeadLeftAnim 2s ease infinite;
}
@keyframes secHeadLeftAnim{
    0%{transform:translateX(0);}
    40%{transform:translateX(0);}
    50%{transform:translateX(100%);}
    60%{transform:translateX(0);}
    100%{transform:translateX(0);}
}
.section-head .title-container:after{
    transform:rotateY(180deg);
    right:-34px;
    left:auto;
    animation:secHeadRightAnim 2s ease infinite;
}
@keyframes secHeadRightAnim{
    0%{transform:translateX(0) rotateY(180deg);}
    40%{transform:translateX(0) rotateY(180deg);}
    50%{transform:translateX(-100%) rotateY(180deg);}
    60%{transform:translateX(0) rotateY(180deg);}
    100%{transform:translateX(0) rotateY(180deg);}
}
.section-head .title-container .inner{
    width:100%;
    height:100%;
    background-image:url(section-head.png);
    background-size:100% 56px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.section-head .title-container img{
    margin-right:2px;
}
.section-head .title-container .en-text{
    color:#ffffff;
    font-size:25px;
    font-family:SCDream8;
    margin-right:8px;
    text-shadow:0 0 9px rgba(84,118,141,0.75),
                0 3px 0 rgba(0,0,0,0.48);
}
.section-head .title-container .kr-text{
    color:#ffffff;
    font-size:26px;
    position:relative;
    top:3px;
    text-shadow:0 0 9px rgba(84,118,141,0.75),
                0 3px 0 rgba(0,0,0,0.48);
}
.section-head .title-container .kr-text.sm{
    font-size:22px;
}

/* Recomended Games */

.recommend-section{
    position:relative;
    z-index:2;
}
.recommend-games{
    position:relative;
    background-color:#000;
    border-top:solid 1px #263b4e;
    border-bottom:solid 1px #263b4e;
    z-index:1;
}
.recommend-games:before,
.recommend-games:after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:504px;
    height:100%;
    background-image:url(recommend-bg.png);
    background-size:100% 100%;
    z-index:-1;
}
.recommend-games:after{
    left:auto;
    right:0;
    transform:rotateY(180deg);
}
.recommend-games .container-main{
    width:100%;
    max-width:1828px;
    margin:0 auto;
    position:relative;
    padding:0 60px;
}
.owl-games .item{
    padding:27px 7px;
}
.cl-owl-nav{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.rg-btn{
    width:100%;
    display:inline-block;
    border-radius:10px;
    overflow:hidden;
    background-image:linear-gradient(#8fd6ff,#465567);
    padding:1px;
    position:relative;
    overflow:hidden;
    z-index: 1;
    box-shadow:0 0 13px rgba(151,198,231,0.60),
               0 6px 3px rgba(0,0,0,0.86);
}
.rg-btn.blur{
    box-shadow:0 0 0 rgba(151,198,231,0),
               0 0 0 rgba(0,0,0,0);
}
.rg-btn:before{
    content:'';
    width:100%;
    width:calc(100% - 2px);
    height:60%;
    position:absolute;
    left:0;
    right:0;
    bottom:1px;
    margin:0 auto;
    background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
    border-radius:0 0 10px 10px;
    opacity:1;
    z-index:1;
    transition:0.35s all ease;
}
.rg-btn:hover:before{
    opacity:0;
}
.rg-btn .main-cont{
    width:100%;
    border-radius:10px;
    overflow:hidden;
    position:relative;
}
.rg-btn .main-cont:before,
.rg-btn .main-cont:after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    background-color:rgba(0, 0, 0, 0.5);
    transition:0.5s all ease;
}
.rg-btn .main-cont:before{
    left:-100%;
}
.rg-btn .main-cont:after{
    right:-100%;
}
.rg-btn:hover .main-cont:before{
    left:0;
}
.rg-btn:hover .main-cont:after{
    right:0;
}
.rg-btn .foot{
    width:100%;
    height:30px;
    background-image:url(game-footer.png);
    background-position:bottom center;
    background-size:168px 100%;
    background-repeat:no-repeat;
    position:absolute;
    bottom:1px;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    transition:0.35s all ease;
}
.rg-btn:hover .foot{
    bottom:-100%;
}
.rg-btn .foot span{
    color:#add3e9;
    font-size:13px;
    font-family:SCDream4;
}
.rg-btn .hover{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    transition:0.3s all ease;
    transform:scale(0);
}
.rg-btn:hover .hover{
    transform:scale(1);
    transition-delay:0.3s;
}
.rg-btn .hover .play-btn{
    width:120px;
    height:35px;
    border:none;
    position:relative;
    background-color:transparent;
    color: #000;
    font-size: 13px;
    font-family: SCDream6;
    text-shadow:0 1px 1px rgba(255,255,255,0.5);
    transition:0.2s all ease;
    z-index:1;
}
.rg-btn .hover .play-btn:before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    transform:skew(-10deg);
    transition:0.3s;
    background-image:linear-gradient(#8fd6ff,#698db9);
    box-shadow:0 0 5px #000;
}
.rg-btn .hover .play-btn:hover:before{
    box-shadow:0 0 5px rgba(255,255,255,0.5);
}
.rg-btn .hover p{
    color:#fff;
    font-size:16px;
    margin:10px 0 0;
    text-shadow: 0 0 5px rgba(255,255,255,0.50),0 2px 0 rgba(0,0,0,0.50);
}
.cl-owl-nav button{
    width:35px;
    height:35px;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto 0;
    border:none;
    background-color:transparent;
    color:#1c88f6;
    font-size:28px;
    text-shadow:0 4px 5px rgba(0,0,0,0.75);
    transition:0.3s;
}
.cl-owl-nav button:hover{
    color:#86e8df;
}
.cl-owl-nav button.con-left{
    left:0;
}
.cl-owl-nav button.con-left i{
    transform:rotate(-180deg);
}
.cl-owl-nav button.con-right{
    right:0;
}

/* -- SLOT CONTAINER -- */
.slot {
    line-height: 99px;
}

@media (max-width: 414px) {
    .slot {
        line-height: 70px;
    }

    .slot img {
        height: 55px;
    }
}

@media (max-width: 411px) {
    .slot {
        line-height: 70px;
    }

    .slot img {
        height: 55px;
    }
}

@media (max-width: 375px) {
    .banner-main {
        height: 220px;
    }

    .slot {
        line-height: 63px;
    }

    .slot img {
        height: 50px;
    }
}

@media (max-width: 360px) {
    .slot {
        line-height: 61px;
    }

    .slot img {
        height: 48px;
    }
}

@media (max-width: 320px) {
    .slot {
        line-height: 53px;
    }

    .slot img {
        height: 45px;
    }
}

.slot-section{
    position:relative;
    padding:20px 0 50px;
    overflow:hidden;
}
.slot-section .section-head:before{
    content:'';
    width:100%;
    max-width:1420px;
    height:1px;
    position:absolute;
    left:0;
    right:0;
    bottom:16px;
    margin:0 auto;
    background-image:linear-gradient(to right,rgba(41,84,126,0),rgba(41,84,126,1),rgba(41,84,126,1),rgba(41,84,126,0));
}
.slot-section .section-head .title-container{
    max-width:286px;
    height:88px;
}
.slot-section .section-head .title-container:before,
.slot-section .section-head .title-container:after{
    width:214px;
    height:73px;
    background-image:url(slot-header-deco.png);
    background-position:bottom left;
    background-size:214px 100%;
    animation:slotHeaderLeftAnim 5s ease infinite;
}
.slot-section .section-head .title-container:after{
    animation:slotHeaderRightAnim 5s ease infinite;
}
.slot-section .section-head .title-container .inner{
    background-image:url(slot-header.png);
    background-size:100% 88px;
}
@keyframes slotHeaderLeftAnim{
    0%{transform:translateX(0);}
    50%{transform:translateX(140px);}
    100%{transform:translateX(0);}
}
@keyframes slotHeaderRightAnim{
    0%{transform:translateX(0);}
    50%{transform:translateX(-140px);}
    100%{transform:translateX(0);}
}
.slot-container{
    width:100%;
    max-width:1420px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
}
.slot-btn{
    width:215px;
    display:inline-block;
    padding:10px;
    position:relative;
    margin:1px 2px;
    overflow:hidden;
}
.slot-btn:before,
.slot-btn:after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background-image:url(slot-deco.png);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    transition:0.3s;
    opacity:1;
    pointer-events:none;
}
.slot-btn:after{
    width:97.21%;
    height:96.85%;
    background-image:url(slot-hover.png);
    opacity:0;
}
.slot-btn:hover:before{
    opacity:0;
}
.slot-btn:hover:after{
    animation:slotBtnHover 0.3s ease 1 forwards;
}
@keyframes slotBtnHover{
    0%{opacity:0;}
    50%{opacity:1;}
    75%{opacity:0;}
    100%{opacity:1;}
}
.slot-btn .main-cont{
    width:100%;
    border:solid 2px #000;
    box-shadow:0 0 6px #3b5465;
    position:relative;
    transition:0.3s;
}
.slot-btn:hover .main-cont{
    box-shadow:0 0 6px #999999;
}
.slot-btn .main-cont:after{
    content:'';
    width:100%;
    width:calc(100% + 4px);
    height:100%;
    height:calc(100% + 4px);
    position:absolute;
    left:-2px;
    top:-2px;
    border:solid 3px #fff;
    transition:0.3s;
    opacity:0;
    pointer-events:none;
}
.slot-btn .main-cont:before{
    content:'';
    width:100%;
    height:50%;
    position:absolute;
    left:0;
    bottom:0;
    background-image:linear-gradient(rgba(10,10,10,0) 10%,rgba(10,10,10,0.88),rgba(10,10,10,0.88));
    transition:0.3s;
    z-index:1;
    pointer-events:none;
}
.slot-btn:hover .main-cont:after{
    opacity:1;
}
.slot-btn .hover{
    width:100%;
    position:relative;
    transition:0.3s;
    transform:scale(0.5);
    opacity:0;
}
.slot-btn:hover .hover{
    animation:slotBtnHoverAnim 0.5s ease 0.3s 1 forwards;
}
@keyframes slotBtnHoverAnim{
    0%{opacity:0;transform:scale(0);}
    100%{opacity:1;transform:scale(1);}
}
.slot-btn .hover .hover-img{
    width:100%;
    opacity:0.5;
}
.slot-btn .hover .show-btn{
    position:absolute;
    width:100px;
    height:30px;
    top:0;
    bottom:15%;
    left:0;
    right:0;
    margin:auto;
    border:none;
    border-radius:3px;
    color: #000;
    font-size: 13px;
    font-family: SCDream6;
    transition:0.2s all ease;
    background-color:rgba(255,255,255,1);
    box-shadow:0 0 5px #000;
    z-index:3;
}
.slot-btn .hover .show-btn:hover{
    background-color:#86e8df;
}
.slot-btn .main-img{
    width:100%;
    position:absolute;
    left:0;
    top:0;
    pointer-events:none;
}
.slot-btn:hover .main-img{
    animation:slotBtnMainImgAnim 0.5s ease 1 forwards;
}
@keyframes slotBtnMainImgAnim{
    0%{opacity:1;transform:scale(1) translateY(0);}
    50%{opacity:1;transform:scale(0.8) translateY(0);}
    100%{opacity:0;transform:scale(0.8) translateY(20%);}
}
.slot-btn .foot{
    width:100%;
    position:absolute;
    left:0;
    bottom:0;
    padding-bottom:2px;
    z-index:2;
}
.slot-btn .foot img{
    margin-bottom:5px;
}
.slot-btn .foot p{
    color:#cccccc;
    font-size:13px;
    font-family:SCDream4;
    text-shadow:0 2px 0 #000;
    margin:0;
}

/* Slot Tags*/

.special-icon{
    width:50px;
    height:30px;
    position:absolute;
    right:10px;
    top:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1;
    color:#fff;
    font-size:12px;
    font-family:SCDream4;
    white-space:nowrap;
}
.special-icon span{
    position:relative;
    z-index:2;
}
.special-icon:before,
.special-icon:after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-color:#8c2929;
    transform:skew(25deg);
    border-left:solid 1px #f98080;
    border-bottom:solid 1px #f98080;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
}
.special-icon:before{
    animation:specialIconAnim 3s ease infinite;
}
@keyframes specialIconAnim{
    0%{transform:skew(25deg) rotate(0deg);}
    25%{transform:skew(25deg) rotate(180deg);}
    50%{transform:skew(25deg) rotate(180deg);}
    75%{transform:skew(25deg) rotate(360deg);}
    100%{transform:skew(25deg) rotate(360deg);}
}
.special-icon:after{
    transform:skew(-25deg);
    border-top:solid 1px #f98080;
    border-bottom:none;
    background-color:#e42e2e;
    background-image: linear-gradient(#e42e2e,#a21010);
    z-index:1;
}
/* Event */
.special-icon.event:before{
    background-color:#135a06;
    border-left:solid 1px #6cf751;
    border-bottom:solid 1px #6cf751;
}
.special-icon.event:after{
    border-top: solid 1px #6cf751;
    border-left:solid 1px #6cf751;
    background-color: #28b110;
    background-image: linear-gradient(#28b110,#297114);
}
/* New */
.special-icon.new:before{
    background-color:#02499a;
    border-left:solid 1px #6bc2ff;
    border-bottom:solid 1px #6bc2ff;
}
.special-icon.new:after{
    border-top: solid 1px #6bc2ff;
    border-left:solid 1px #6bc2ff;
    background-color: #0077ff;
    background-image:linear-gradient(#0077ff,#0250a9);
}

/* Slot Section Deco */

.slot-section-deco{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    pointer-events:none;
}
.slot-section-deco .slot-blg{
    width:18.29%;
    max-width:348px;
    position:absolute;
    left:0;
    top:-13.25%;
    transform:translateX(-100%);
}
.slot-section-deco .slot-blg.hide{
    animation:slotBlgAnim 1s ease 1 forwards;
}
@keyframes slotBlgAnim{
    0%{transform:translateX(0);}
    100%{transform:translateX(-100%);}
}
.slot-section-deco .slot-blg.active{
    animation:slotBlgActiveAnim 0.8s ease 1 forwards;
}
@keyframes slotBlgActiveAnim{
    0%{transform:translateX(-100%);}
    100%{transform:translateX(0);}
}
.slot-section-deco .pedro{
    width:17.14%;
    max-width:326px;
    position:absolute;
    left:0;
    top:22.40%;
    transform:translateX(-100%);
}
.slot-section-deco .pedro.hide{
    animation:pedroAnim 1s ease 1 forwards;
}
@keyframes pedroAnim{
    0%{transform:translateX(0);}
    100%{transform:translateX(-100%);}
}
.slot-section-deco .pedro.active{
    animation:pedroActiveAnim 1s ease 0.3s 1 forwards;
}
@keyframes pedroActiveAnim{
    0%{transform:translateX(-100%);}
    100%{transform:translateX(0);}
}
.slot-section-deco .slot-house{
    width:23.81%;
    max-width:453px;
    position:absolute;
    right:0;
    top:9.50%;
}
.slot-section-deco .slot-house.hide{
    animation:slotHouseAnim 1s ease 1 forwards;
}
@keyframes slotHouseAnim{
    0%{transform:translateX(0);}
    100%{transform:translateX(100%);}
}
.slot-section-deco .slot-house.active{
    animation:slotHouseActiveAnim 0.8s ease 1 forwards;
}
@keyframes slotHouseActiveAnim{
    0%{transform:translateX(100%);}
    100%{transform:translateX(0);}
}
.slot-section-deco .bird{
    width:16.51%;
    max-width:314px;
    position:absolute;
    right:-0.25%;
    bottom:-3.25%;
    z-index:3;
    transform-origin:bottom right;
}
.slot-section-deco .bird.hide{
    animation:birdAnim 1s ease 1 forwards;
}
@keyframes birdAnim{
    0%{transform:translateX(0);}
    100%{transform:translateX(100%);}
}
.slot-section-deco .bird.active{
    animation:birdActiveAnim 2s ease 0.3s infinite ;
}
@keyframes birdActiveAnim{
    0%{transform:rotate(0deg);}
    25%{transform:rotate(5deg);}
    50%{transform:rotate(5deg);}
    75%{transform:rotate(0deg);}
    100%{transform:rotate(0deg);}
}

/* -- BOARD SECTION -- */

.board-section{
    height:305px;
    background-image:url(board-bg.png);
    background-repeat:repeat-x;
    background-color:#101821;
    position:relative;
    margin-top:10px;
    border-top:solid 1px #2a3f49;
    border-bottom:solid 1px #0c0c0c;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}
.board-section:before{
    content:'';
    width:100%;
    height:9px;
    position:absolute;
    left:0;
    top:-10px;
    background-color:#09090a;
    box-shadow:inset 0 0 2px rgba(0,0,0,1);
}
.board-section .division{
    width:430px;
    height:100%;
    border-left:solid 1px #2a3f49;
    padding:19px 15px;
}
.board-section .division:last-child{
    border-right:solid 1px #2a3f49;
}
.board-table{
    width:100%;
    display:inline-block;
    vertical-align:top;
}
.board-table .header{
    width:100%;
    height:40px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#000;
    border:solid 1px #26262e;
    padding:0 19px;
    margin-bottom:15px;
}
.board-table .header .title{
    color:#368dc4;
    font-size:18px;
    font-family:SCDream6;
    margin-right:auto;
}
.board-table .header i{
    color:#368dc4;
    font-size:16px;
    margin-right:auto;
    display:inline-block;
}
.board-table .header .more-link{
    color:#99ccff;
    font-size:12px;
    font-family:SCDream4;
}
.board-table .bullet{
    width:4px;
    height:4px;
    background-color:#7e7e7e;
    display:inline-block;
    vertical-align:middle;
    margin-right:8px;
}
.board-table .wit-table {
    width:100%;
    float:left;
}
.board-table .wit-table ul{
    width:100%;
    display:table;
    float:left;
    padding:0;
}
.board-table .wit-table ul li {
    display:table-row;
    height:34px;
    cursor:pointer;
    transition:0.3s;
    background-color:rgba(0,0,0,0);
}
.board-table .wit-table ul li:hover{
    background-color:rgba(0,0,0,0.3);
}
.board-table .wit-table ul li div {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    color:#ffffff;
    font-size:12px;
    font-family:SCDream4;
}
.board-table .wit-table ul li div:first-child{
    border-radius:10px 0 0 10px;
}
.board-table .wit-table ul li div:last-child{
    border-radius:0 10px 10px 0;
}
.board-table .wit-table ul li div span{
    font-family:SCDream4;
}
.board-table .wit-table ul li div.user{
    width:30%;
    text-align:left;
    padding-left:19px;
}
.board-table .wit-table ul li div.amount{
    color:#ffcc33;
    font-size:14px;
    width:40%;
    text-align:right;
    padding-right:5%;
}
.board-table .wit-table ul li div.amount span{
    font-family:SCDream6;
}
.board-table .wit-table ul li div.date{
    width:30%;
    text-align:right;
    padding-right:19px;
}
.board-table table{
    width:100%;
}
.board-table table tr{
    height:34px;
}
.board-table table tr td{
    color:#ffffff;
    font-size:13px;
    font-family:SCDream4;
    text-align:left;
}
.board-table table tr td.about{
    padding-left:20px;
}
.board-table table tr td a{
    color:#ffffff;
    font-size:13px;
    font-family:SCDream4;
    transition:0.3s;
}
.board-table table tr td a:hover{
    color:#ffcc33;
}
.board-banner{
    width:auto;
    display:inline-block;
    vertical-align:top;
}
.board-banner .attendance-banner{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    overflow:hidden;
    border:solid 2px #36546d;
    position:relative;
    background-color:#000;
    transition:0.3s;
}
.board-banner .attendance-banner:before{
    content:'';
    width:100%;
    height:100%;
    border-radius:10px;
    box-shadow:inset 0 1px 0 rgba(0,0,0,0.50);
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}
.board-banner .attendance-banner img{
    width:100%;
    transition:0.3s;
}
.board-banner .attendance-banner:hover img{
    opacity:0.5;
}
.board-banner .attendance-banner i{
    color:#99ccff;
    font-size:38px;
    position:absolute;
    transform:scale(0);
    opacity:0;
    text-shadow:0 1px 2px #000;
    transition:0.3s;
}
.board-banner .attendance-banner:hover i{
    transform:scale(1);
    opacity:1;
}
.board-banner .telegram-account{
    width:100%;
    display:inline-block;
    position:relative;
    border-radius:10px;
    background-color:#132029;
    border:solid 2px #36546d;
    margin-top:8px;
    padding:0 60px 0 70px;
}
.board-banner .telegram-account .icon-container{
    width:70px;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.board-banner .telegram-account .text-container{
    width:100%;
    height:100%;
    min-height:103px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.board-banner .telegram-account .text-container .inner{
    width:100%;
    float:left;
    text-align:left;
}
.board-banner .telegram-account .text-container .inner p{
    color:#ffffff;
    font-size:16px;
    margin:0;
}
.board-banner .telegram-account .text-container .inner p.text-lg{
    font-size:26px;
}
.board-banner .telegram-account .text-container .inner .user{
    color:#fff;
}

/* -- FOOTER MAIN -- */

.footer-section{
    position:relative;
    z-index:2;
	background-color: black;
}
.copyright-container{
    background-image:linear-gradient(#171b1e,#101111);
    padding:30px 0;
}
.copyright-container span{
    color:#666666;
    font-size:10px;
    font-family:SCDream4;
    text-align:center;
}
.company-logo .container-main{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:15px 0 30px;
}
.company-logo .container-main img{
    display:inline-block;
    vertical-align:middle;
    margin:5px 5px;
}

/* -- SUB PAGE SECTION -- */

.subpage-section{
    overflow:hidden;
    position:relative;
}
.subpg-container{
    width:100%;
    max-width:1530px;
    margin:0 auto;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    position:relative;
    z-index:4;
    padding:0 15px 30px;
}
.subpg-container .left-container{
    width:240px;
    min-width:240px;
    margin-top:116px;
    position:relative;
    padding:18px 15px;
}
.subpg-container .left-container .deco-post{
    width:100%;
    height:20px;
    position:absolute;
    left:0;
    top:0;
    background-color:#1b1c21;
    border-radius:3px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.8),
                inset 0 -1px 2px rgba(0,0,0,0.8),
                inset -2px 0 2px rgba(255,255,255,0.1),
                inset 2px 0 2px rgba(255,255,255,0.1);
    z-index:2;
}
.subpg-container .left-container .deco-post.bottom{
    top:auto;
    bottom:0;
}
.subpg-container .left-container .deco-post .light-bulb{
    width:90%;
    top:0;
    bottom:0;
    margin:auto;
}
.subpg-container .left-container .deco-pole{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.subpg-container .left-container .deco-pole{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.subpg-container .left-container .deco-pole:before,
.subpg-container .left-container .deco-pole:after{
    content:'';
    width:3px;
    height:100%;
    top:0;
    position:absolute;
    background-image:linear-gradient(to left, #121419,#323544);
    border-top:solid 1px #000;
}
.subpg-container .left-container .deco-pole:before{
    left:3px;
}
.subpg-container .left-container .deco-pole:after{
    right:3px;
}
.subpg-container .left-container .menu-container{
    width:100%;
    position:relative;
    float:left;
    z-index:1;
}
.subpg-container .left-container .menu-container:before,
.subpg-container .left-container .menu-container:after{
    content:'';
    width:4px;
    height:100%;
    top:0;
    position:absolute;
    background-image: linear-gradient(to left,#333333,#22252d);
    z-index:-1;
}
.subpg-container .left-container .menu-container:before{
    left:-3px;
}
.subpg-container .left-container .menu-container:after{
    right:-3px;
}
.subpg-container .left-container .menu-container ul{
    width:100%;
    padding:0;
    margin:0;
    display: block;
    float:left;
}
.subpg-container .left-container .menu-container ul li{
    width:100%;
    display: block;
    float:left;
}
.subpg-container .left-container .menu-container ul li a{
    width:100%;
    height:43px;
    display:inline-block;
    float:left;
    background-color:#13151a;
    position:relative;
    padding-bottom:3px;
    padding-left:100px;
    z-index:1;
    overflow:hidden;
    transition:0.3s;
    box-shadow:inset 3px 0 3px rgba(0,0,0,0.5),
               inset -3px 0 3px rgba(0,0,0,0.5);
}
.subpg-container .left-container .menu-container ul li .big-menu{
    height:60px;
    background-color:#13151a;
    background-image:linear-gradient(#2c6287,#314d6a);
    box-shadow:inset 0 0 39px rgba(0,0,0,0.75);
}
.subpg-container .left-container .menu-container ul li a .special-icon{
    width:30px;
    height:25px;
    top:0;
    bottom:0;
    margin:auto 0;
    font-size:8px;
    right:8px;
}
.subpg-container .left-container .menu-container ul li a .special-icon:before,
.subpg-container .left-container .menu-container ul li a .special-icon:after{
    box-shadow:none;
}
.subpg-container .left-container .menu-container ul li a.active{
    background-color: #49b9b2;
    background-image: linear-gradient(#49b9b2,#17847d);
    box-shadow:inset 3px 0 3px rgba(0,0,0,0),
               inset -3px 0 3px rgba(0,0,0,0);
}
.subpg-container .left-container .menu-container ul li .big-menu.active{
    background-color: #49b9b2;
    background-image: linear-gradient(#49b9b2,#17847d);
}
.subpg-container .left-container .menu-container ul li a:before{
    content:'';
    width:calc(100% + 60px);
    height:50%;
    border-radius: 50% / 100%;
    position:absolute;
    left:0;
    right:0;
    bottom: -49px;
    margin:0 auto;
    box-shadow: 0 0 0 0 rgba(73,185,178,0);
    z-index:-1;
    transition:0.3s;
}
.subpg-container .left-container .menu-container ul li a:hover:before{
    box-shadow: 0px -30px 35px 2px rgba(73,185,178,0.5);
}
.subpg-container .left-container .menu-container ul li a:after{
    content:'';
    width:100%;
    height:2px;
    position:absolute;
    bottom:0;
    left:0;
    background-color:#1f212b;
    background-image:linear-gradient(#323544,#1f212b);
    z-index:-1;
}
.subpg-container .left-container .menu-container ul li a.active:after{
    background-color:#86e8df;
    background-image:linear-gradient(#86e8df,#86e8df);
}
.subpg-container .left-container .menu-container ul li a .divider{
    height:100%;
    float:left;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.subpg-container .left-container .menu-container ul li a .divider:first-child{
    width:90px;
    position:absolute;
    left:0;
    top:0;
}
.subpg-container .left-container .menu-container.subpg-menu ul li a .divider:first-child{
    justify-content:center;
}
.subpg-container .left-container .menu-container ul li a .divider:last-child{
    width:100%;
}
.subpg-container .left-container .menu-container ul li a .icon{
    color:#fff;
    font-size:20px;
    transition:0.3s;
}
.subpg-container .left-container .menu-container ul li a:hover .icon{
    color:#86e8df;
}
.subpg-container .left-container .menu-container ul li a.active .icon{
    color:#000;
}
.subpg-container .left-container .menu-container ul li a .game-logo{
    margin-left:10px;
    max-width:70px;
}
.subpg-container .left-container .menu-container ul li a .game-name{
    color:#e6e6e6;
    font-size:13px;
    font-family:SCDream4;
    white-space:nowrap;
    transition:0.3s;
}
.subpg-container .left-container .menu-container ul li .big-menu .game-name{
    color:#fff;
    font-size:20px;
    font-family:Cafe24Ohsquare;
    top:3px;
    position:relative;
    text-shadow:0 0 6px rgba(84,118,141,0.80),
                0 0 6px rgba(84,118,141,0.80),
                0 3px 0 rgba(0,0,0,0.48);
}
.subpg-container .left-container .menu-container ul li a:hover .game-name{
    color:#86e8df;
}
.subpg-container .left-container .menu-container ul li a.active .game-name{
    color:#000;
}
.subpg-container .left-container .menu-container ul li .big-menu.active .game-name{
    color:#000;
    text-shadow:0 1px 1px rgba(255,255,255,0.5);
}

/*Depth*/

.subpg-container .left-container .menu-container ul li a.depth{
    background-color:#22252d;
}
.subpg-container .left-container .menu-container ul li a.depth:hover{
    background-color:#3d4456;
    box-shadow:inset 3px 0 3px rgba(0,0,0,0),
               inset -3px 0 3px rgba(0,0,0,0);
}
.subpg-container .left-container .menu-container ul li a.depth:hover:after{
    background-color:#3d4456;
    background-image:linear-gradient(#323544,#3d4456);
}
.subpg-container .left-container .menu-container ul li a.depth.active:after{
    background-color:#080808;
    background-image: linear-gradient(#13151a,#080808);
}
.subpg-container .left-container .menu-container ul li a.depth.active{
    background-color:#07080a;
    box-shadow:inset 3px 0 3px rgba(0,0,0,0),
               inset -3px 0 3px rgba(0,0,0,0);
}
.subpg-container .left-container .menu-container ul li a.depth:hover:before{
    box-shadow:inset 0 -5px 5px rgba(73,185,178,0);
}
.subpg-container .left-container .menu-container ul li a .fa-caret-right{
    color:#50586b;
    margin-left:15px;
    transition:0.3s;
}
.subpg-container .left-container .menu-container ul li a:hover .fa-caret-right{
    color:#000;
    margin-left:25px;
}
.subpg-container .left-container .menu-container ul li a.depth:hover .game-name{
    color:#000;
}
.subpg-container .left-container .menu-container ul li a.active .fa-caret-right{
    color:#86e8df;
}
.subpg-container .left-container .menu-container ul li a.depth.active .game-name{
    color:#86e8df;
}

/* Sub Page Main Container */

.subpg-container .main-container{
    width:100%;
    margin:0 10px;
}
.subpg-header{
    width:100%;
    height:100px;
    position:relative;
    z-index:2;
    padding:5px 0 5px 260px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.subpg-header:before{
    content:'';
    width:2px;
    height:100%;
    position:absolute;
    left:4px;
    top:0;
    background-color:#17191f;
    z-index:-1;
}
.subpg-header .left-pane{
    width:260px;
    height:100%;
    background-color:#17191f;
    position:absolute;
    left:10px;
    top:0;
    z-index:1;
    padding:15px 10px 5px 5px;
}
.subpg-header .left-pane:before{
    content:'';
    width:10px;
    height:100%;
    position:absolute;
    left:-10px;
    top:0;
    border-top:solid 15px #17191f;
    border-bottom:solid 5px #17191f;
    z-index:-1;
}
.subpg-header .left-pane:after{
    content:'';
    width:50%;
    height:100%;
    position:absolute;
    right:-20px;
    top:0;
    background-color:#17191f;
    transform:skew(20deg);
    z-index:-1;
    box-shadow:3px 0 3px rgba(0,0,0,0.30);
}
.subpg-header .left-pane .inner{
    width:100%;
    height:100%;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
}
.subpg-header .left-pane .inner:before{
    content:'';
    width:calc(50% + 20px);
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-image:linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,0.5));
    z-index:-1;
    border-bottom:solid 1px #0c0d10;
}
.subpg-header .left-pane .inner:after{
    content:'';
    width:calc(50% + 20px);
    height:100%;
    position:absolute;
    right:-20px;
    top:0;
    background-image:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.5));
    transform:skew(20deg);
    z-index:-1;
    border-bottom:solid 1px #0c0d10;
}
.subpg-header .left-pane .icon{
    color:#80f771;
    font-size:24px;
    margin-right:10px;
    text-shadow:0 0 9px rgba(255,255,255,0.25);
}
.subpg-header .left-pane .title{
    color:#d0f500;
    font-size:26px;
    font-family:SCDream8;
    position:relative;
    text-shadow:0 0 9px rgba(255,255,255,0.25);
}
.light-bulb{
    width:99%;
    height:6px;
    position:absolute;
    background-image:linear-gradient(rgba(255,255,255,0.05),rgba(0,0,0,0.5));
    top:3px;
    left:0;
    right:0;
    margin:0 auto;
    border-radius:5px;
    z-index:2;
}
.subpg-header .left-pane .light-bulb{
    width:98%;
    top:4px;
}
.light-bulb:before,
.light-bulb:after{
    content:'';
    width:8px;
    height:100%;
    position:absolute;
    top:0;
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,1));
    z-index:1;
}
.light-bulb:before{
    left:0;
}
.light-bulb:after{
    right:0;
}
.light-bulb .light{
    width:100%;
    height:40%;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto 0;
    background-color:#b5dbff;
    border-radius:5px;
    box-shadow:0 0 5px rgba(255,255,255,0.8);
    animation:lightBulbAnim ease 0.5s infinite;
}
@keyframes lightBulbAnim{
    0%{box-shadow:0 0 5px rgba(255,255,255,0.8);}
    50%{box-shadow:0 0 5px rgba(255,255,255,0);}
    100%{box-shadow:0 0 5px rgba(255,255,255,0.8);}
}
.light-bulb .light:before,
.light-bulb .light:after{
    content:'';
    width:30%;
    height:calc(100% + 4px);
    position:absolute;
    top:-2px;
    bottom:0;
}
.light-bulb .light:before{
    left:0;
    border-right:solid 2px #000;
}
.light-bulb .light:after{
    right:0;
    border-left:solid 2px #000;
}
.subpg-header .right-pane{
    width:100%;
    height:100%;
    clip-path: polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,40px 100%,0 calc(100% - 40px));
    background-color:#121419;
    background-image: linear-gradient(#121419,#1f212b);
    border:solid 3px #26282f;
    border-bottom:solid 6px #26282f;
    box-shadow:inset 1px 0 0 1px #0c0d10;
    pointer-events:none;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.subpg-header .right-pane:before{
    content: "";
    position: absolute;
    background-color:#26282f;
    width:58px;
    height:4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top:17px;
    right:-13px;
    z-index:1;
}
.subpg-header .right-pane:after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-image:url(subpg-head.png);
    background-repeat:repeat-x;
    background-size:74px 100%;
    opacity:0.3;
    box-shadow:inset 10px -20px 20px rgba(255,255,255,0.05);
}
.subpg-header .right-pane .light-bulb{
    width:100%;
    height:1px;
    position:absolute;
    background-color:#b5dbff;
    border-radius:5px;
    box-shadow:0 0 5px rgba(255,255,255,0.8);
    top:auto;
    bottom:0;
    left:auto;
    right:0;
    margin:0 auto;
    border-radius:5px;
    z-index:2;
}
.subpg-header .right-pane .title-container{
    width:auto;
    display:inline-block;
    text-align:left;
    position:relative;
    z-index:3;
    padding:0 0 0 70px;
}
.subpg-header .right-pane .title-container p{
    margin:0;
    display:inline-block;
    vertical-align:baseline;
}
.subpg-header .right-pane .title-container .title{
    color:#49b9b2;
    font-size:30px;
    margin-bottom:-5px;
    margin-right:5px;
}
.subpg-header .right-pane .title-container .sub{
    color:#fff;
    font-size:14px;
    font-family:SCDream6;
    position:relative;
    top:3px;
}

/* Sub Page Body */

.subpg-body{
    width:100%;
    float:left;
    position:relative;
    padding:30px 15px;
    z-index:1;
    margin:15px auto 0;
}
.subpg-body:before,
.subpg-body:after{
    content:'';
    width:5px;
    height:20px;
    top:-20px;
    position:absolute;
    background-image:linear-gradient(to left, #121419,#323544);
    border-top:solid 1px #000;
}
.subpg-body:before{
    left:10px;
    top:-15px;
    height:15px;
}
.subpg-body:after{
    right:10px;
}
.subpg-body .deco-post{
    width:100%;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    background-color:#1b1c21;
    border-radius:3px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.8),
                inset 0 -1px 2px rgba(0,0,0,0.8),
                inset -2px 0 2px rgba(255,255,255,0.1),
                inset 2px 0 2px rgba(255,255,255,0.1);
    z-index:1;
}
.subpg-body .deco-post.bottom{
    top:auto;
    bottom:0;
}
.subpg-body .deco-post:before,
.subpg-body .deco-post:after{
    content:'';
    width:100%;
    height:50%;
    left:0;
    top:0;
    position:absolute;
}
.subpg-body .deco-post:after{
    top:40%;
    box-shadow:inset 0 2px 2px rgba(255,255,255,0.03);
}
.subpg-body .deco-pole{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.subpg-body .deco-pole{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    pointer-events:none;
}
.subpg-body .deco-pole:before,
.subpg-body .deco-pole:after{
    content:'';
    width:3px;
    height:100%;
    top:0;
    position:absolute;
    background-image:linear-gradient(to left, #121419,#323544);
    border-top:solid 1px #000;
}
.subpg-body .deco-pole:before{
    left:5px;
}
.subpg-body .deco-pole:after{
    right:5px;
}
.subpg-body .subpg-body-inner{
    width:100%;
    min-height:622px;
    float:left;
    background-color:#22252d;
    position:relative;
    padding:10px;
}

/* Gamelist */

.gamelist-container{
    width:100%;
    max-height:800px;
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:center;
    overflow-y:scroll;
}
.gamelist-container::-webkit-scrollbar{
    width:10px;
    background:#2f313e;
}
.gamelist-container::-webkit-scrollbar-thumb{
    background:#101216;
    border:solid 2px #2f313e;
}
.game-btn{
    width:170px;
    display:inline-block;
    border-radius:6px;
    overflow:hidden;
    border:solid 1px #000;
    position:relative;
    overflow:hidden;
    margin:10px 8px;
    z-index: 1;
}
.game-btn:before{
    content:'';
    width:100%;
    height:50%;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin:0 auto;
    background-image:linear-gradient(rgba(22,21,21,0),rgba(22,21,21,0.9),rgba(22,21,21,1));
    opacity:1;
    z-index:1;
    transition:0.35s all ease;
}
.game-btn:hover:before{
    opacity:0;
}
.game-btn .main-img{
    width:100%;
}
.game-btn .main-cont{
    width:100%;
    border-radius:10px;
    overflow:hidden;
    position:relative;
}
.game-btn .main-cont:before,
.game-btn .main-cont:after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    background-color:rgba(0, 0, 0, 0.5);
    transition:0.5s all ease;
}
.game-btn .main-cont:before{
    left:-100%;
}
.game-btn .main-cont:after{
    right:-100%;
}
.game-btn:hover .main-cont:before{
    left:0;
}
.game-btn:hover .main-cont:after{
    right:0;
}
.game-btn .foot{
    width:100%;
    height:30px;
    position:absolute;
    bottom:1px;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    transition:0.35s all ease;
}
.game-btn:hover .foot{
    bottom:-100%;
}
.game-btn .foot span{
    color:#fff;
    font-size:13px;
    font-family:SCDream4;
}
.game-btn .hover{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    transition:0.3s all ease;
    transform:scale(0);
}
.game-btn:hover .hover{
    transform:scale(1);
    transition-delay:0.3s;
}
.game-btn .hover .play-btn{
    width:110px;
    height:30px;
    border:none;
    position:relative;
    background-color:transparent;
    color: #000;
    font-size: 13px;
    font-family: SCDream6;
    text-shadow:0 1px 1px rgba(255,255,255,0.5);
    transition:0.2s all ease;
    z-index:1;
}
.game-btn .hover .play-btn:before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    transform:skew(-10deg);
    transition:0.3s;
    background-image:linear-gradient(#8fd6ff,#698db9);
    box-shadow:0 0 5px #000;
}
.game-btn .hover p{
    color:#fff;
    font-size:14px;
    margin:10px 0 0;
}
.loading{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#222324;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
}
.loading .buff{
    width:60px;
    height:60px;
    position:relative;
}
.loading .buff:before,
.loading .buff:after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    border-radius:50%;
    border-left:solid 2px #fff;
    border-top:solid 2px #fff;
    animation:loadingAnim 1s ease infinite;
}
@keyframes loadingAnim{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
.loading .buff:after{
    width:70%;
    height:70%;
    border-left:none;
    border-top:none;
    border-right:solid 2px #fff;
    border-bottom:solid 2px #fff;
    animation:loadingSmAnim 1s ease infinite;
}
@keyframes loadingSmAnim{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(-360deg);}
}

/* Sub Page Right Container */

.subpg-container .right-container{
    width:232px;
    min-width:232px;
    margin-top:116px;
}
.subpg-container .right-container .banner-link{
    width:100%;
    display:inline-block;
    overflow:hidden;
    border:solid 2px #36546d;
    border-radius:10px;
    background-color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:6px;
}
.subpg-container .right-container .banner-link img{
    width:100%;
    opacity:1;
    transition:0.3s;
}
.subpg-container .right-container .banner-link:hover img{
    opacity:0.5;
}
.subpg-container .right-container .banner-link i{
    color:#99ccff;
    font-size:38px;
    position:absolute;
    transform:scale(0);
    opacity:0;
    text-shadow:0 1px 2px #000;
    transition:0.3s;
}
.subpg-container .right-container .banner-link:hover i{
    transform:scale(1);
    opacity:1;
}
.subpg-container .telegram-account {
    width: 100%;
    display: inline-block;
    position: relative;
    border-radius: 10px;
    background-color: #151819;
    border: solid 2px #36546d;
    padding:13px 0 16px 60px;
    text-decoration:none;
    overflow:hidden;
}
.subpg-container .telegram-account .icon-container{
    width:58px;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.subpg-container .telegram-account .text-container{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.subpg-container .telegram-account .text-container .inner{
    width:auto;
    display:inline-block;
    text-align:center;
}
.subpg-container .telegram-account .text-container .inner p{
    color:#fff;
    font-size:20px;
    margin:0;
}
.subpg-container .telegram-account .text-container .inner p.text-lg{
    font-size:28px;
    margin:-4px 0;
    text-shadow:0 3px 3px #005da6;
}

/* -- FORM CONTAINER -- */

.form-container{
    width:100%;
    max-width:767px;
    padding:20px 0;
    border-radius:5px;
    margin:10px auto 0;
}
.form-container .form-group {
    width: 100%;
    position:relative;
    padding-left:120px;
    margin-bottom:25px;
    display:inline-block;
    vertical-align:top;
}
.no-padding{
    padding:0 !important;
}
.form-container .form-group.w-rem{
    margin-bottom:35px;
}
.form-container .form-group p {
    margin: 0;
}
.form-container .form-group .labels {
    width:120px;
    height:40px;
    position:absolute;
    left:0;
    top:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.form-container .form-group .labels p{
    font-size:14px;
    font-family: SCDream4;
    color: #ffffff;
    text-shadow:0 1px 1px #000;
}
.form-container .form-group .infos {
    width: 100%;
    float:left;
    text-align: center;
    position:relative;
}
.form-container .form-group.w-btn .infos{
    padding-right:85px;
}
.transfer .form-container .form-group.w-btn .infos{
    padding-right:135px;
}
.form-container .form-group input {
    width:100%;
    height:42px;
    float:left;
    background-color:#0b0c0e;
    border:none;
    color: #fff;
    font-size:14px;
    font-family:SCDream4;
    padding:0 15px;
    border-radius:1px;
}
.form-container .form-group .read-on input{
    color:#5ae8df;
    font-size:16px;
}
.form-container .form-group input::placeholder {
    color:#e6e6e6;
}
.form-container .form-group .select-container{
    width:100%;
    height:42px;
    float:left;
    background-color:#0b0c0e;
    border:none;
    padding:0 15px;
    border-radius:1px;
    position:relative;
    margin:0;
}
.form-container .form-group .select-container select{
    width:100%;
    height:100%;
    background-color:transparent;
    border:none;
    color: #e6e6e6;
    font-size: 14px;
    font-family:SCDream4;
}
.form-container .form-group .select-container select option{
    color:#000;
}
.form-container .form-group .select-container i{
    position:absolute;
    right:16px;
    top:9px;
    color:#fff;
    font-size:24px;
}
.form-container .form-group textarea{
    width:100%;
    height:200px;
    float:left;
    background-color:#0b0c0e;
    border:none;
    color: #000;
    font-size: 14px;
    padding:20px 15px;
    border-radius:1px;
    outline:none;
    resize:none;
}
.form-container .form-group textarea::placeholder {
    color:#e6e6e6;
}
.form-container .form-group.w-btn button {
    width:80px;
    height: 42px;
    border: none;
    padding: 0;
    white-space: nowrap;
    margin-left: 1%;
    border-radius:1px;
    color: #fff;
    font-family:SCDream4;
    background-color:#294e6b;
    font-size:14px;
    transition: 0.3s;
    position:absolute;
    right:0;
    bottom:0;
}
.transfer .form-container .form-group.w-btn button {
    width:130px;
}
.form-container .form-group.w-btn button:hover{
    background-color: #437ca9;
}
.form-container .form-group .infos .btn-grp {
    width:100%;
    float:left;
}
.form-container .form-group .infos .btn-grp button {
    width:16.66%;
    width:calc(16.66% - 4px);
    height:30px;
    float: left;
    margin: 0 2px;
    background-color:#5c6d7f;
    border:none;
    color: #fff;
    font-size: 12px;
    font-family:SCDream4;
    transition: 0.3s;
    padding: 0;
    border-radius:1px;
}
.form-container .form-group .infos .btn-grp button:hover {
    background-color: #b5c1ce;
    color:#000;
}
.form-container .form-group .infos .btn-grp button:first-child {
    margin-left:0;
    width:calc(16.66% - 2px);
}
.form-container .form-group .infos .btn-grp button:last-child {
    width:calc(16.66% - 2px);
    margin-right:0;
    background-color:#d46464;
}
.form-container .form-group .infos .btn-grp button:last-child:hover {
    background-color:#ff4242;
    color:#fff;
}
.deposit-ask{
    width:100%;
    float:left;
    margin-bottom:30px;
    padding:10px 15px;
    background-color: rgb(55, 60, 74);
    border:solid 1px #434752;
    border-radius:1px;
}
.deposit-ask button{
    width:140px;
    height:35px;
    border-radius:1px;
    border:none;
    background-color:#cc3333;
    color:#fff;
    font-size:12px;
    font-family:SCDream4;
    float:left;
    transition:0.3s;
}
.deposit-ask button:hover{
    background-color:#f94343;
}
.deposit-ask span{
    color:#fff;
    font-size:12px;
    font-family:SCDream4;
    float:left;
    margin-left:10px;
    margin-top:8px;
}

/* Form Footer */

.form-container .form-footer{
    width: 100%;
    margin:20px 0 30px;
    padding-left:120px;
    text-align:center;
}
.form-container .form-footer button{
    width:140px;
    height:45px;
    margin:0 2px;
    border:none;
    background-color:#49b9b2;
    color:#fff;
    font-size:14px;
    font-family:SCDream6;
    text-shadow:0 1px 1px rgba(0,0,0,0.14);
    letter-spacing:1px;
    border-radius:1px;
    box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.2);
    transition:0.3s;
}
.form-container .form-footer button:hover{
    background-color:#0f8078;
}
.form-container .form-footer button.dark{
    background-color:#01a8c1;
}
.form-container .form-footer button.dark:hover{
    background-color:#0f5b67;
}
.form-container .form-footer button.gray{
    background-color:#5a6268;
}
.form-container .form-footer button.gray:hover{
    background-color:#3a3a3a;
}

/* Bs Table */

.bs-table{
    width:100%;
}
.bs-table th{
    height:40px;
    background-color:#111111;
    color:#fff;
    font-size:12px;
    font-family:SCDream4;
    text-align:center;
    white-space:nowrap;
}
.wrap-normal th{
    white-space:normal;
}
.bs-table th.about{
    padding:0 15px;
}
.bs-table td{
    height:40px;
    color:#fff;
    font-size:12px;
    font-family:SCDream4;
    border-bottom:solid 1px #191b21;
    transition:0.3s;
    text-align:center;
}
.bs-table td.highlight{
    color:#86e8df;
}
.bs-table td.count{
    width:50px;
}
.bs-table td.about{
    text-align:left;
    padding:0 10px;
}
.bs-table td.date{
    width:120px;
}
.bs-table td.nav-td{
    width:40px;
}
.bs-table td .level-txt {
    display: inline-block;
    width: 45px;
    text-align: left;
}
.bs-table tr.depth-click{
    cursor:pointer;
}
.bs-table tr.depth-click:hover td{
    background-color:#3d4456;
}
.bs-table .nav-td button{
    width:30px;
    height:30px;
    background-color:rgba(0,0,0,0);
    border:solid 1px #17191f;
    border-radius:50%;
    transition:0.3s;
    color:#49b9b2;
    font-size:12px;
    padding:4px 0 0;
    display:inline-block;
    vertical-align:middle;
    position:relative;
}
.bs-table .nav-td .open-btn span{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
}
.bs-table .nav-td .open-btn span:before,
.bs-table .nav-td .open-btn span:after{
    content:'';
    width:1px;
    height:50%;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    position:absolute;
    background-color:#49b9b2;
    transition:0.3s;
}
.bs-table .nav-td .open-btn span:after{
    transform:rotate(90deg);
}
.bs-table .nav-td .open-btn.active span:before,
.bs-table .nav-td .open-btn.active span:after{
    background-color:#ea5d5d;
}
.bs-table .nav-td .open-btn.active span:before{
    transform:rotate(45deg);
}
.bs-table .nav-td .open-btn.active span:after{
    transform:rotate(135deg);
}
.bs-table .nav-td button:hover{
    background-color:rgba(0,0,0,0.5);
}
.bs-table tr.dropdown td{
    height:auto;
    border:none;
    padding:0;
}
.bs-table tr.dropdown .mess-cont{
    width:100%;
    float:left;
    display:none;
    background-color:#17191f;
    border-bottom:solid 1px #2d313e;
    text-align:left;
    padding:10px 15px;
    color:#fff;
    font-size:12px;
    position:relative;
}
.bs-table tr.dropdown .mess-cont *{
    /*font-family:SCDream4;*/
}
.bs-table tr.dropdown .mess-cont .scroll{
    width:100%;
    height:150px;
    float:left;
    overflow-y:scroll;
}
.bs-table tr.dropdown .mess-cont .scroll::-webkit-scrollbar{
    width:10px;
    background:#2f313e;
}
.bs-table tr.dropdown .mess-cont .scroll::-webkit-scrollbar-thumb{
    background:#101216;
    border:solid 2px #2f313e;
}
.bs-table tr.dropdown .mess-cont .title{
    color:yellow;
    font-size:18px;
    margin-bottom:10px;
}
.new-icon {
    width: 30px;
    height: 15px;
    border-radius: 2px;
    border: none;
    color: #000;
    font-size: 8px;
    background-color: #49b9b2;
    display: inline-block;
    vertical-align: middle;
    margin-left:5px;
}

/* Pagination */

.pagination-container{
    width:100%;
    margin:30px 0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.pagination{
    margin-bottom:0;
}
.pagination li{
    float:left;
}
.pagination>li>a{
    width:25px;
    height:26px;
    color:#fff;
    font-size:14px;
    font-family:SCDream4;
    text-decoration:none;
    background-color:#3d4456;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 2px;
    border-radius:1px;
    text-shadow:0 1px 1px #000;
    position:relative;
    z-index:1;
}
.pagination .turn-pg a{
    color:#fff;
    background-color:#3d4456;
    width:40px;
    font-size:12px;
}
.pagination .turn-pg:first-child a{
    padding-right:8px;
}
.pagination .turn-pg:last-child a{
    padding-left:8px;
}
.pagination .turn-pg a:before{
    content:'';
    position:absolute;
    width:50%;
    height:100%;
    background-color:#3d4456;
    transform:skew(-30deg);
    top:0;
    z-index:-1;
}
.pagination .turn-pg:first-child a:before{
    left:-10px;
}
.pagination .turn-pg:last-child a:before{
    right:-10px;
}
.pagination>li>a:hover{
    color:#86e8df;
}
.pagination .active{
    color:#000;
    background-color:#49b9b2;
    text-shadow:none;
}
.pagination .active:hover{
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.50);
}

/* Atttendance */

.attendance-head {
    width: 100%;
    height: 60px;
    float: left;
    border-radius:1px;
    background-color:#13151a;
    overflow:hidden;
    padding:0 15px;
}
.attendance-head td {
    color:#e6e6e6;
    font-size:24px;
    font-family:SCDream6;
}
.attendance-head td span{
    color:#e6e6e6;
    font-size:24px;
    font-family:SCDream6;
}
.attendance-head td .fa-calendar-alt {
    font-size: 18px;
    position: relative;
    top: -2px;
    margin-right: 3px;
}
.attendance-head .nav-btn {
    width:auto;
    height:auto;
    background-color:transparent;
    border:none;
    color:#49b9b2;
    font-size:16px;
    position:relative;
    top:-3px;
    padding:0;
}
.attendance-head .nav-btn:hover {
    color: #fdea5e;
}
.attendance-info {
    width: 100%;
    height: auto;
    float: left;
    background-color: rgb(55, 60, 74);
    border:solid 1px #434752;
    padding: 15px;
    margin:5px 0;
}
.attendance-info table {
    width: auto;
    height: auto;
    float: left;
}
.attendance-info table td {
    color: #e6e6e6;
    font-size: 14px;
    font-family:SCDream4;
    padding-left: 15px;
}
.attendance-info table td:first-child {
    padding-left: 0;
}
.attendance-info table td i{
    color: #80f771;
    font-size: 12px;
    position: relative;
    top: -1px;
    text-shadow: 0 0 9px rgba(255,255,255,0.25);
}
.attendance-info table td .yellow {
    color: #ffff33;
}
.attendance-info table td .orange {
    color: #e18f24;
}
.attendance-info table td span{
    font-family:SCDream4;
}
.attendance-calendar {
    width: 100%;
    height: auto;
    float: left;
}
.attendance-calendar th {
    height: 35px;
    color: #fff;
    font-size: 14px;
    font-family:SCDream4;
    background-color: #1b1c21;
    text-align: center;
    border: solid 1px #101219;
}
.attendance-calendar th span{
    font-family:SCDream4;
}
.attendance-calendar th.sunday {
    background-color: #3e3e3e;
}
.attendance-calendar th.saturday {
    background-color: #3e3e3e;
}
.attendance-calendar td {
    width: 14.28%;
    height: 116px;
    text-align: center;
    border: solid 1px #101219;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}
.attendance-calendar td:hover {
    background-color: #13151a;
}
.attendance-calendar td.empty{
    pointer-events:none;
}
.attendance-calendar td.today {
    background-color: #3d4456;
}
.attendance-calendar td .pin-icon {
    color:#86e8df;
    font-size:20px;
    text-shadow: 0 1px 1px #000;
    position: absolute;
    left:8px;
    top:5px;
    margin: auto;
    transform: rotate(-30deg);
}
.attendance-calendar td .date {
    color: #e6e6e6;
    font-size:12px;
    font-family:SCDream4;
    position: absolute;
    right:10px;
    top:6px;
}
.attendance-calendar td .attendance-stamp {
    width: 55.08%;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom:20%;
    margin: auto;
}
.attendance-calendar td .title {
    color: #ccc;
    font-size: 12px;
    font-family:SCDream4;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    padding: 0 5px;
    position: absolute;
    left: 0;
    bottom: 6px;
}

.attendance-calendar td .title img {
    position: relative;
    top: 3px;
    margin-right: 5px;
}

@media(max-width:500px){
    .attendance-head td {
        font-size: 20px;
    }
    .attendance-info {
        padding: 10px 5px;
    }
    .attendance-info table td {
        font-size: 12px;
        padding-left: 5px;
    }
    .attendance-calendar th .day {
        display: none;
    }
    .attendance-calendar td .title img {
        top: 0;
        margin-right: 0;
    }
}

/* mMy Page */

.level-info{
    width:100%;
    height:80px;
    float:left;
    background-color:rgba(204,204,204,.20);
    border: solid 1px #616161;
    border-radius:1px;
    margin-bottom:10px;
}
.level-info *{
    font-family:SCDream4;
}
.level-info .container{ 
    width:auto; 
    height:100%;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    padding:0 20px;
}
.level-info .container .inner{ 
    width:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}
.level-info .container span{ 
    color:#fff;
    font-size:14px;
    white-space:nowrap;
}
.level-info .container .labels{ 
    margin-right:10px;
}
.level-info .container .amount{
    color: #ffd400;
    font-size:18px;
    display:inline-block;
    position:relative;
    margin:0;
    vertical-align:middle;
}
.level-info .point-form{
    width:310px;
    height:100%;
    float:right;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 125px 0 5px;
    position:relative;
}
.level-info .point-form input{
    width:100%;
    height:35px;
    border:none;
    border-radius:1px;
    padding:0 5px;
    color:#fff;
    font-size:12px;
    background-color:rgba(0,0,0,0.5);
}
.level-info .point-form input::-webkit-input-placeholder{
    color:#ccc;
}
.level-info .points-btn{
    width:110px;
    height:35px;
    color:#000;
    font-size:12px;
    border:none;
    border-radius:1px;
    background-color: #49b9b2;
    transition:0.3s;
    white-space:nowrap;
    position:absolute;
    right:10px;
}
.level-info .points-btn:hover{ 
    background-color:#86e8df;
}

/*=========================================================== M O D A L ===============================================================*/

.modal{
    padding-right:0 !important;
    overflow-y:auto;
}
.modal::-webkit-scrollbar {
    width:0;
    background-color:transparent;
}
.modal::-webkit-scrollbar-thumb{
    background-color:transparent;
}
.modal-dialog{
    max-width:700px;
}
.lj-modal .modal-dialog{
    max-width:600px;
}
.modal-content{
    background-color:#22252d;
    box-shadow:0 -5px 10px rgba(0,0,0,0.75);
}

/* -- LOGIN JOIN MODAL -- */

.lj-modal .form-container{
    max-width:500px;
    padding-bottom:0; 
}
.modal-header{
    background-color:#13151a;
    border-bottom:solid 1px #2c313e;
    position:relative;
}
.modal-header .title-container{
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.modal-header .title-container i{
    color:#86e8df;
    font-size:24px;
    margin-right:10px;
    text-shadow:0 0 9px rgba(255,255,255,0.25);
}
.modal-header .title-container .title{
    color:#fff;
    font-size:20px;
    font-family:SCDream6;
    text-shadow:0 0 9px rgba(255,255,255,0.25);
}
.modal-close{
    width:30px;
    height:30px;
    right:10px;
    top:0;
    bottom:0;
    margin:auto 0;
    position:absolute;
    font-size:26px;
    background-color:transparent;
    border:none;
    color:#555d71;
    text-shadow:0 1px 1px #000;
    transition:0.3s;
}
.modal-close:hover{
    color:#fff;
    text-shadow:0 0 9px rgba(255,255,255,0.25);
}
.modal-menu{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.modal-menu button{
    width:calc(50% - 24px);
    height:40px;
    margin:0 2px;
    padding:2px 0 0;
    border:none;
    position:relative;
    z-index:1;
    background-color:#3d4456;
    border-top:solid 1px #60677b;
    color:#fff;
    transition:0.3s;
}
.modal-menu button:before{
    content:'';
    position:absolute;
    width:50%;
    height:calc(100% + 1px);
    background-color:#3d4456;
    transform:skew(-30deg);
    border-top:solid 1px #60677b;
    bottom:0;
    z-index:-1;
    transition:0.3s;
}
.modal-menu button:hover{
    color:#8892af;
    background-color:#2d3240;
    border-top:solid 1px #60677b;
}
.modal-menu button:hover:before{
    background-color:#2d3240;
    border-top:solid 1px #60677b;
}
.modal-menu button.active{
    color:#fff;
    border-top:solid 1px #8fd6ff;
    background-color:#294e6b;
    background-image:linear-gradient(#294e6b,#173448);
}
.modal-menu button.active:before{
    background-color:#294e6b;
    background-image:linear-gradient(#294e6b,#173448);
    border-top:solid 1px #8fd6ff;
}
.modal-menu button:first-child:before{
    left:-12px;
}
.modal-menu button:last-child:before{
    right:-12px;
}

/* -- COUPON MODAL -- */

.jackpotModal .modal-dialog{
    max-width: 800px;
}
.jackpot-modal {
    border: solid 1px #3d2053;
    background-image: url(jackpot.png);
    background-position: top center;
    background-color: #11001b;
    background-repeat: no-repeat;
}
.coupon-close-btn{
    width: 54px;
    height: 54px;
    background-image: url(close-gl.png);
    background-color: transparent;
    border: none;
    position: absolute;
    right:20px;
    top:20px;
    z-index: 2;
    transition: 0.5s;
    transform: rotate(0deg);
}
.coupon-close-btn span {
    color: #40fb0e;
    font-size: 12px;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    opacity: 0;
    transition: 0.3s;
}
.coupon-close-btn:hover span {
    opacity: 1;
    top: 105%;
}
.coupon-close-btn:hover {
    animation:cbmAnim 0.5s ease 1 forwards;
}
@keyframes cbmAnim{
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.jpm-panel {
    width: 508px;
    height: auto;
    display: inline-block;
    position: relative;
    margin-top: 15%;
    margin-bottom: 33px;
    margin:15% auto 33px;
}
.jpm-panel .panel-bg {
    width: 100%;
    float: left;
}
.jpm-panel .panel-lights {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: jpHeadOnAnim 1s ease infinite;
}
.jpm-header {
    width: 83.10%;
    height: auto;
    position: absolute;
    top: -12%;
    left: 0;
    right: 0;
    margin: auto;
    animation: jpHeadAnim 3s ease infinite;
}
@keyframes jpHeadAnim {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3%);
    }
    100% {
        transform: translateY(0);
    }
}
.jpm-header img {
    width: 100%;
    float: left;
}
.jpm-header img.on {
    position: absolute;
    left: 0;
    top: 0;
    animation: jpHeadOnAnim 1s ease infinite;
}
@keyframes jpHeadOnAnim {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}
.jpm-inner {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
}
.jpm-title {
    width: 100%;
    margin-top: 17%;
    float: left;
}
.jpm-title img {
    width: 73.63%;
}
.jpm-slotmachine {
    width: 100%;
    margin-top: 5%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
}
.jpm-slotmachine .sm-spin {
    width: 55.50%;
    position: relative;
}
.jpm-slotmachine .sm-spin .img-bg {
    width: 100%;
}
.jpm-slotmachine .sm-spin .inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 2.50% 4%;
}
.jpm-slotmachine .sm-spin .inner:before {
    content: '';
    width: 94%;
    height: 2px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #000;
    z-index: 1;
}
.jpm-slotmachine .sm-spin .inner .cont {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    text-align: center;
}
.jpm-numbers {
    width: 58.21%;
    position: relative;
    top: 16%;
    z-index: 0;
}
.jpm-numbers.play {
    animation: smNumberAnim 2s ease 1 forwards;
}
@keyframes smNumberAnim {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-94.20%);
    }
}
.jpm-slotmachine .sm-pull {
    width: 15.40%;
    position: relative;
    background-color: transparent;
    border: none;
}
.jpm-slotmachine .sm-pull .img-bg {
    width: 100%;
}
.jpm-slotmachine .sm-pull .pull {
    position: absolute;
    left: 1%;
    right: 0;
    margin: auto;
    opacity: 0;
    width: 83.45%;
}
.jpm-slotmachine .sm-pull .pull.up {
    bottom: 9%;
    opacity: 1;
}
.jpm-slotmachine .sm-pull .pull.down {
    top: 13%;
}
.jpm-slotmachine.active .sm-pull .pull.up {
    opacity: 0;
}
.jpm-slotmachine.active .sm-pull .pull.down {
    opacity: 1;
}
.jpm-form {
    width: 100%;
    float: left;
    margin-top: 1%;
}
.jpm-form .jf-row {
    width: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.jpm-form .cont {
    width: 32%;
    float: left;
    text-align: center;
    margin-top: 2%;
}
.jpm-form .cont.amount {
    width: 50%;
}
.jpm-form .cont.point {
    width: 40%;
    margin-left: 2.50%;
}
.jpm-form .cont p {
    color: #cccccc;
    font-size: 14px;
    font-family: SCDream6;
    margin:0;
}
.jpm-form .cont p img {
    position: relative;
    top: -2px;
}
.jpm-form .cont input {
    width: 100%;
    height: 40px;
    border: solid 2px #abafaf;
    border-radius: 10px;
    box-shadow: 0 2px 2px rgba(1, 0, 0, 0.82);
    background-color: #000000;
    color: #949494;
    font-size: 14px;
    margin-top: 2%;
    text-align: center;
}
.jpm-form .cont.amount input {
    color: #ffa800;
    font-size: 34px;
    font-family: SCDream6;
    text-shadow: 0 0 7px rgba(236, 173, 51, 0.35);
    height: 52px;
    /*background-image: url(../images/bg/jp-amount.png);*/
}
.jpm-form .cont.retention input {
    color: #30ff00;
    font-size: 24px;
    font-family: SCDream6;
    text-shadow: 0 0 7px rgba(144, 242, 121, 0.50);
}
.jpm-form .cont.point input {
    color: #30ff00;
    font-size: 24px;
    font-family: SCDream6;
    text-shadow: 0 0 7px rgba(144, 242, 121, 0.50);
    float: left;
    width: 60%;
}
.jpm-form .cont .point-btn {
    width: 18%;
    height: 40px;
    float: left;
    margin-top: 2%;
    border: solid 2px #abafaf;
    border-radius: 10px;
    box-shadow: 0 2px 2px rgba(1, 0, 0, 0.82);
    background-color: #000000;
    font-family: SCDream6;
    color: #30ff00;
    transition: 0.3s;
    padding: 0;
    line-height: 0;
}
.jpm-form .cont .point-btn.minus {
    font-size: 36px;
    margin-right: 2%;
}
.jpm-form .cont .point-btn.plus {
    font-size: 28px;
    margin-left: 2%;
}
.jpm-form .cont .point-btn:hover {
    border: solid 2px #ffffff;
    background-color: #cc6600;
    color: #ffffff;
}
.jpm-guide {
    width: 100%;
    height: 190px;
    float: left;
    padding: 0 10%;
    text-align: left;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.jpm-guide .inner {
    width: 100%;
    float: left;
}
.jpm-guide .title {
    color: #cccccc;
    font-size: 14px;
    font-family: SCDream6;
    margin:0;
}
.jpm-guide .content {
    width: 100%;
    color: #cccccc;
    font-size: 12px;
    font-family:SCDream4;
    margin-top: 2%;
    line-height: 20px;
}
.jpm-guide .content p{
    white-space:nowrap;
    font-family:SCDream4;
    margin:0;
}
@media(max-width:840px) {
    .jackpot-modal {
        width: 100%;
        min-height: 100%;
        margin: 0 !important;
        top: 0;
    }
}
@media(max-width:640px) {
    .coupon-close-btn{
        width: 34px;
        height: 34px;
        background-size: cover;
        top: 10px;
        right: 10px;
    }
    .coupon-close-btn span {
        font-size: 10px;
    }
}
@media(max-width:560px) {
    .jpm-panel {
        width: 90%;
    }
    .jpm-form .cont p {
        font-size: 2.7vw;
    }
    .jpm-form .cont input {
        height: 7vw;
        font-size: 4vw;
    }
    .jpm-form .cont .point-btn {
        height: 7vw;
    }
    .jpm-form .cont.amount input {
        font-size: 6.4vw;
    }
    .jpm-form .cont.retention input {
        font-size: 4vw;
    }
    .jpm-form .cont.point input {
        font-size: 4vw;
    }
    .jpm-form .cont .point-btn.minus {
        font-size: 6vw;
    }
    .jpm-form .cont .point-btn.plus {
        font-size: 5vw;
    }
    .jpm-board table td {
        height: 5.4vw;
    }
    .jpm-guide {
        height: 34vw;
    }
    .jpm-guide .title {
        font-size: 2.6vw;
    }
    .jpm-guide .content {
        font-size: 2vw;
        line-height: 3.2vw;
    }
}

/************************************ M O B I L E ****************************************/

.right-menu-btn .norm-icon{
    opacity:1;
    transform:scale(1);
    transition:0.3s;
}
.right-menu-btn.opened .norm-icon{
    opacity:0;
    transform:scale(0);
}
.right-menu-btn .over-icon{
    transition:0.3s;
    opacity:0;
    position:absolute;
    left:0;
    right:0;
    top:8px;
    bottom:0;
    margin:auto;
    transform:scale(1.5);
}
.right-menu-btn.opened .over-icon{
    opacity:1;
    transform:scale(1);
}
.sn-overlay{
    width:100%;
    height:100%;
    position:fixed;
    z-index:96;
    background-color:rgba(0,0,0,0.6);
    top:60px;
    left:0;
    pointer-events:none;
    opacity:0;
    transition:0.3s;
}
.sn-overlay.active{
    opacity:1;
    pointer-events:auto;
}

@media(max-width:1560px){
    .link-main {
        margin-left:60px;
    }
    .header-main .right-pane {
        margin-right:80px;
    }
}
@media(max-width:1460px){
    .link-main {
        margin-left:15px;
    }
    .header-main .right-pane {
        margin-right:15px;
    }
    .mp-logo{
        left:-60px;
    }
}
@media(max-width:1280px){
    .mp-logo {
        width:150px;
    }
}
@media(max-width:1200px){
    body{
        background-image:none;
    }
    .wrapper:before{
        top:69px;
    }
    .header-main{
        position:relative;
        z-index:98;
        margin-bottom:59px;
    }
    .header-main .container-main{
        height:60px;
        padding:0 0 0 0;
    }
    .header-main .container-main:before {
        content: '';
        width: 100%;
        max-width: 1344px;
        height: 9px;
        position: absolute;
        left: 0;
        right: 0;
        bottom:-9px;
    }
    .mp-logo {
        width:115px;
        left:15px;
        top:10%;
    }
    .link-main{
        position:absolute;
        width:100%;
        height:50px;
        margin-left:0; 
        margin-top:0;
        left:0;
        bottom:-59px;
        background-color:#0c0c0c;
        display:block;
    }
    .link-main li{
        display:block;
        width:20%;
        padding:0 0;
        height:100%;
        float:left;
    }
    .link-main li:nth-child(2){
        margin-right:20%;
    }
    .link-main li a{
        width:100%;
        height:100%;
        padding:0 5px;
        float:left;
    }
    .link-main li a .text{
        font-size:14px;
    }
    .link-main li a .icon-cont img{
        max-width:30px;
    }
    .top-container{
        margin-top:0;
    }
    .header-main .right-pane{
        margin-right:0;
        width:100%;
        height:100%;
        float:left;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 20px 0 5px;
    }
    .header-main .right-pane .btn-grp{
        float:left;
        position:relative;
        z-index:1;
        padding:0 20px 0 0;
    }
    .header-main .right-pane  .btn-grp:before{
        content: '';
        width:calc(100% + 35px);
        height: 100%;
        left: -35px;
        top: 0;
        position: absolute;
        transform: skew(-35deg);
        border: solid 1px #000000;
        background-color: #111315;
        background-image:linear-gradient(to right,#111315,#191919,#111315,#2b2b2b,#111315); 
        z-index:-1;
    }
    .header-main .right-pane .btn-grp a{
        width:auto;
        font-size:12px;
        padding:0 5px;
    }
    .header-main .right-pane .btn-grp a.lg {
        width:auto;
    }
    .header-main .right-pane .btn-grp a:before,
    .header-main .right-pane .btn-grp a:after{
        display:none;
    }
    .before-login{
        margin:0;
    }
    .before-login:before{
        transform: skew(-20deg);
    }
    .before-login .desktop{
        display:none;
    }
    .before-login .mobile{
        display:block;
    }
    .before-login .mobile button{
        width:auto;
        height:35px;
    }
    .before-login button:before, 
    .before-login button:after{
        transform: skew(-20deg);
    }
    .after-login .desktop{
        width:280px;
        height:100%;
        position:fixed;
        top:119px;
        right:-100%;
        background-color:#22252d;
        padding:10px 15px 150px 15px;
        margin-top:0;
        overflow-y:auto;
        transition:0.3s;
        border-left:solid 1px #464646;
    }
    .after-login .desktop::-webkit-scrollbar {
        width:0px;
        background:transparent;
    }
    .after-login .desktop::-webkit-scrollbar-thumb {
        background:transparent;
    }
    .after-login .desktop.active{
        right:0;
    }
    .after-login .al-row{
        margin:0;
    }
    .after-login .al-row:first-child:before {
        display:none;
    }
    .after-login .al-cont {
        width:100%;
        height:50px;
        margin-right:0;
        position:relative;
    }
    .after-login .al-cont:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #b5dbff;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(255,255,255,0.8);
        opacity: 0.5;
    }
    .after-login .al-row:last-child .al-cont:last-child:before {
        display:none;
    }
    .after-login .al-cont.prog-b {
        width:100%;
        padding: 0 5px 0 60px;
    }
    .after-login .al-cont.link-grp {
        width:100%;
    }
    .after-login .mobile{
        display:block;
    }
    .bal-container .mob-btn{
        font-size:20px;
        padding:5px 15px 0;
    }
    .banner-main{
        display:none;
    }
    .jackpot-main {
        margin-top:0;
        padding:10px 0;
    }
    .jackpot-main .container-main{
        height:auto;
        flex-wrap:wrap;
    }
    .jackpot-main .container-main:before, 
    .jackpot-main .container-main:after {
        content: '';
        width:calc(100% + 360px);
    }
    .jackpot-main .container-main p{
        width:100%;
        text-align:center;
        margin:0;
        position:relative;
        z-index:1;
    }
    .jackpot-main .container-main .labels{
        margin:0 0 -25px;
        top:0;
    }
    .withdraw-main {
        margin-top:0;
    }
    .news-main{
        display:none;
    }
    .page-content:before, .page-content:after{
        display:none;
    }
}
@media(max-width:1024px){
    .recommend-games{
        background-color:transparent;
        border:none;
    }
    .recommend-games:before, 
    .recommend-games:after {
        background-image:none;
    }
    .recommend-games .container-main{
        padding:0 5px;
    }
    .cl-owl-nav {
        display:none;
    }
    .owl-games .item {
        padding:15px 7px;
    }
    .rg-btn{
        box-shadow: 0 0 5px rgba(151,198,231,0.50), 0 6px 3px rgba(0,0,0,0.86);
    }
    .section-head{
        height:50px;
        border-top:solid 1px #48687a;
        background-image:linear-gradient(#2c6287,#314d6a);
        box-shadow:inset 0 0 38px #000;
    }
    .section-head .title-container{
        height:100%;
    }
    .section-head .title-container:before, 
    .section-head .title-container:after {
        display:none;
    }
    .section-head .title-container .inner{
        background-image:none;
    }
    .slot-section{
        padding:0 0 30px;
    }
    .slot-section .section-head:before {
        display:none;
    }
    .slot-section .section-head .title-container{
        height:100%;
    }
    .slot-section .section-head .title-container .inner {
        background-image:none;
    }
    .slot-container{
        margin-top:10px;
    }
}
@media(max-width:700px){
    .jackpot-main .container-main .labels{
        font-size:8.2vw;
        margin-bottom:-3.50%;
    }
    .jackpot-main .container-main .amount{
        font-size:8.2vw;
    }
    .slot-container{
        padding:0 15px;
    }
    .slot-btn {
        width:calc(33.33% - 4px);
    }
}
@media(max-width:500px){
    .header-main .right-pane{
        padding:0 5px;
    }
    .header-main .right-pane .btn-grp{
        padding: 0 10px 0 0;
    }
    .header-main .right-pane .btn-grp a{
        padding: 0 3px;
    }
    .slot-btn {
        width:calc(50% - 4px);
    }
    .bal-container .mob-btn{
        font-size:20px;
        padding:5px 8px 0;
        margin-right:3px;
    }
    .bal-container .mob-btn:last-child{
        margin-right:0;
    }
    .header-main .right-pane .btn-grp{
        padding:5px 12px 5px 0;
    }
    .header-main .right-pane .btn-grp:before {
        display:none;    }
    .header-main .right-pane .btn-grp a {
        width:auto;
        height:auto;
        float:left;
        clear:both;
        margin:2px 0;
        font-size:13px;
    }
    .link-main li a{
        flex-wrap:wrap;
    }
    .link-main li a .icon-cont {
        width:100%;
        margin-bottom:-5px;
    }
    .link-main li a .text {
        font-size: 12px;
    }
    .withdraw-main .container-main:before, 
    .withdraw-main .container-main:after{
        width:10%;
    }
}

/************* Sub Pages ******************/

.subpg-container .left-container .menu-btn{
    width:100%;
    height:40px;
    background-color:#373c4a;
    border:solid 2px #434752;
    color:#fff;
    font-size:14px;
    font-family:SCDream4;
    text-align:left;
    padding:0 15px;
    position:relative;
    display:none;
}
.subpg-container .left-container .menu-btn .menu-icon{
    width:35px;
    height:19px;
    display:inline-block;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    margin:auto 0;
}
.subpg-container .left-container .menu-btn .menu-icon span {
    display: block;
    width:22px;
    height:3px;
    background:#c1c1c1;
    font-size:24px;
    margin:0 auto 5px;
}
.subpg-container .left-container .menu-btn .menu-icon span:first-child {
    position: relative;
    margin-top:0;
    top: 0;
    transition: top .3s .3s,transform .3s 0s;
}
.subpg-container .left-container .menu-btn .menu-icon span:nth-child(2) {
    opacity: 1;
    transition: opacity .3s;
}
.subpg-container .left-container .menu-btn .menu-icon span:last-child {
    margin-bottom: 0;
    position: relative;
    top: 0;
    transition: top .3s .3s,transform .3s 0s;
}
.subpg-container .left-container .menu-btn .menu-icon.opened span:first-child {
    top:8px;
    transform: rotate(-45deg);
    transition: top .3s 0s,transform .3s .3s,color .3s .3s;
}
.subpg-container .left-container .menu-btn .menu-icon.opened span:nth-child(2) {
    opacity: 0;
}
.subpg-container .left-container .menu-btn .menu-icon.opened span:last-child {
    top: -8px;
    transform: rotate(45deg);
    transition: top .3s 0s,transform .3s .3s;
}
@media(max-width:1200px){
    .subpg-container{
        padding: 0 5px 30px 15px;
    }
    .subpg-container .right-container{
        display:none;
    }
}
@media(max-width:1024px){
    .sub-page .top-container {
        padding:0px 0 0;
    }
    .subpg-container{
        padding:45px 0px 30px;
    }
    .subpg-container .left-container{
        max-width:240px;
        margin-top:0;
        padding:0 0;
        position:absolute;
        top:0;
        right:10px;
        z-index:9;
    }
    .subpg-container .left-container .deco-post{
        display:none;
    }
    .subpg-container .left-container .deco-pole {
        display:none;
    }
    .subpg-container .left-container .menu-btn{
        display:block;
    }
    .subpg-container .left-container .menu-container{
        border:solid 3px #333333;
        display:none;
        margin-top:5px;
        box-shadow:0 5px 10px #000;
    }
    .subpg-container .left-container .menu-container:before, 
    .subpg-container .left-container .menu-container:after {
        display:none;
    }
    .subpg-container .right-container{
        display:none;
    }
    .subpg-header {
        width: 100%;
        height:70px;
        padding:2px 0 2px 140px;
    }
    .subpg-header .left-pane {
        width:140px;
        padding: 15px 5px 5px 5px;
    }
    .subpg-header .left-pane .inner{
        white-space:nowrap;
    }
    .subpg-header .left-pane .icon{
        font-size:18px;
        margin-right:5px;
    }
    .subpg-header .left-pane .title{
        font-size:20px;
    }
    .subpg-header .right-pane{
        clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
    }
    .subpg-header .right-pane:before{
        width:50px;
        top:4px;
        right:-14px;
        z-index: 1;
    }
    .subpg-header .right-pane .title-container{
        padding: 0 0 0 45px;
    }
    .subpg-body{
        margin:5px auto 0;
    }
    .subpg-body .subpg-body-inner{
        min-height:initial;
    }
    .subpg-container{
        transition:0.3s;
    }
    .subpg-container.active{
        min-height:710px;
    }
    .gamelist-container{
        max-height:initial;
        overflow-y:auto;
    }
}
@media(max-width:900px){
    .form-container .form-group{
        padding-left:0;
        margin-bottom:20px;
    }
    .form-container .form-group .labels {
        width:100%;
        height:auto;
        position:relative;
        margin-bottom:10px;
        padding-left:10px;
    }
    .form-container .form-footer{
        padding-left:0;    
    }
}

@media(max-width:720px){
    .level-info .container{ 
        width:25%; 
    }
    .level-info .container:first-child{ 
        width:20%; 
    }
    .level-info .container span{
        font-size:12px;
    }
    .level-info .container .labels{ 
        margin-right:0;
    }
    .level-info .container .amount{
        font-size:14px;
    }
    .level-info .point-form{
        width:55%;
        padding:0 5px;
    }
    .level-info .point-form input{
        width:58%;
        /*margin-right:%;*/
    }
    .level-info .points-btn{
        width:40%;
        position:relative;
        right:0;
        font-size:8px;
    }
    .level-info .points-btn:hover{ 
        background-color:#86e8df;
    }
}
@media(max-width:640px){
    .game-btn {
        width:calc(33.33% - 16px);
        margin: 10px 8px;
    }
}
@media(max-width:600px){
    .subpg-header .right-pane .title-container .title{
        font-size:20px;
    }
    .subpg-header .right-pane .title-container .sub{
        font-size:12px;
    }
}
@media(max-width:500px){
    .subpg-header .right-pane .title-container .title{
        width:100%;
        float:left;
        margin:-3px 0 -8px;
    }
    .subpg-header .right-pane .title-container .sub{
        width:100%;
        float:left;
    }
    .subpg-container .left-container{
        width:calc(100% - 20px);
        max-width:100%;
    }
    .bs-table td{
        width:initial !important;
    }
    .bs-table td.about {
        max-width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .attendance-calendar td .attendance-stamp{
        bottom:30%;
    }
    .form-container .form-footer{
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .form-container .form-footer button{
        width:calc(50% - 3px);
        margin:0 3px;
    }
    .form-container .form-footer.three button{
        width:calc(33.33% - 3px);
        margin:0 3px;
    }
    .form-container .form-footer.one button{
        width:200px;
        margin:0 3px;
    }
    .form-container .form-footer button:first-child{
        margin-left:0;
    }
    .form-container .form-footer button:last-child{
        margin-right:0;
    }
    .game-btn {
        width:calc(33.33% - 8px);
        margin:5px 4px;
    }
    .game-btn .foot span {
        font-size:10px;
        max-width:100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .game-btn .hover{
        display:none;
    }
    .game-btn .main-cont:before, 
    .game-btn .main-cont:after {
        display: none;
    }
    .game-btn .foot:hover{
        bottom: 1px;
    }
    .game-btn:hover:before{
        opacity:1;
    }
}