#divHeader-top { padding: 0; }
#divHeader-menu { background-image: none; }

* { padding: 0; margin: 0; box-sizing: border-box; }
html { overflow-x: hidden; }
body { background-color: #000; background-size: 100% auto; background-attachment: scroll; background-repeat: repeat; background-position: top center; vertical-align: middle; box-sizing: border-box; font-family: "Poppins-Regular", "Microsoft JhengHei"; font-size: 14px; line-height: normal; color: #fff; }
#body-contain { display: flex; flex-direction: column; min-height: 100vh; justify-content: space-between; }
#divBody { height: 100%; }

img { vertical-align: middle; }
table { width: 100%; }
button { outline: 0; border: 0; }
input { outline: 0; border: 0; }
iframe { width: 100%; border: 0; }
a, a:hover, a:active, a:focus { color: #444; text-decoration: none; }
ul, ol { margin-left: 20px; }
li { list-style-type: disc; }

p { }

.w1000 { width: 100%; max-width: 1030px; margin: auto; padding-left: 15px; padding-right: 15px; }
.wrapper, .w1200 { width: 100%; max-width: 1200px; margin: auto; padding-left: 15px; padding-right: 15px; }

h1 { font-weight: bold; }

.d-flex { display: flex; }
.bg { background-size: cover; background-position: center; }

@media screen and (max-width: 768px) {
    #body-contain { padding-top: 55px; }
}

@media screen and (max-width: 767px) {
    #body-contain { padding-bottom: 71px; }
}


/**************************************************************************************************************************** HEADER */
#divHeader { display: flex; justify-content: space-between; align-items: stretch; background-image: url('/data/1871/uploads/bg-header_2e0330.png'); background-size: auto 200%; background-position: top 100% left; background-repeat: repeat-x; position: fixed; left: 0; right: 0; width: 100%; top: 0; z-index: 11; }
    #divHeader > div { flex: 1; }

@media screen and (min-width: 769px) {
    #divHeader.sticky { background-position: top 0% left; /*transition: background-position 0.5s ease-in-out;*/ box-shadow: 0 5px 5px rgba(255,255,255,0.2); }
}

@media screen and (max-width: 768px) {
    #divHeader { background-position: top 0% left; box-shadow: 0 5px 5px rgba(255,255,255,0.2); }
}

/************************ LEFT ************************/
#divHeader > .left { display: flex; justify-content: flex-start; }
/** button Menu **/
.btn-menu { cursor: pointer; }
    .btn-menu > div { padding: 10px 15px; }
    .btn-menu span { width: 30px; height: 2px; border-radius: 10px; background-color: #fff; margin: 6px auto; display: block; }

#divMenu { position: relative; }
#divMenu-cat { background-color: #5c0660; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; }
#btnMenu-category { padding: 5px 20px; text-transform: uppercase; background-color: transparent; font-weight: bold; color: #fff; font-family: "Poppins-Regular"; font-size: 18px; font-size: 15px; letter-spacing: 1px; display: flex; align-items: center; }
    #btnMenu-category i { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; order: 2; margin-left: 10px; }

#cssmenu { position: absolute; max-height: 0px; transition-duration: 0.0s; transition-property: max-height; transition-timing-function: ease-in-out; overflow: hidden; box-shadow: 3px 3px 5px rgba(0,0,0,0.5); }
    #cssmenu > ul > li { display: block; float: none; min-width: 250px; }
        #cssmenu > ul > li > a { background: #5c0660; border: 0; padding: 15px 20px; padding-right: 50px; /*color: #222;*/ transition: none; text-transform: capitalize; }
            #cssmenu > ul > li > a i { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: 10px; }
        #cssmenu > ul > li:hover > a { background: linear-gradient(to right, #5c0660, #000) !important; color: #fff; }
        #cssmenu > ul > li.active { /*display:none;*/ }
            #cssmenu > ul > li.active > a { /*color: #222;*/ background: linear-gradient(to right, #5c0660, #000); }
                #cssmenu > ul > li.active > a:after { /*content:''; border-color: transparent transparent transparent #222; opacity:0.5; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 10px; position:absolute; top:0; bottom:0; left:20px; margin:auto;*/ }
            #cssmenu > ul > li.active:hover > a { color: #fff; }
                #cssmenu > ul > li.active:hover > a:after { border-color: transparent transparent transparent #fff; }

#divMenu:hover #cssmenu { max-height: 500px; transition-duration: 0.2s; }
#divMenu:hover #divMenu-cat { background-color: #5c0660; }
#divMenu:hover #btnMenu-category { /*color: #222;*/ }


@media screen and (max-width: 768px) {
    .btn-menu span { width: 30px; height: 3px; border-radius: 10px; background-color: #fff; margin: 5px auto; display: block; }
}

@media screen and (max-width: 767px) {
    #divMenu { display: none; }
}


/************************ LOGO ************************/
#divHeader > .center { justify-content: center; text-align: center; }
#logo { display: block; }
#imgLogo { height: 75px; transition: height 0.2s ease-in-out; position: relative; z-index: 3; }

@media screen and (min-width: 769px) {
    #logo { position: relative; }
        #logo a { position: absolute; left: 0; right: 0; margin: auto; }
    #imgLogo { margin-top: 5px; margin-right: 5px; }
    #divHeader.sticky #logo a:before { content: ''; position: absolute; pointer-events: none; width: 100%; height: 50px; background-color: #2e0330; z-index: 2; left: 0; top: 0; }
    #divHeader.sticky #logo a:after { content: ''; position: absolute; pointer-events: none; width: 255px; height: 80px; top: 0; background-color: #2e0330; left: 0; right: 0; margin: auto; border-radius: 0% 0% 50% 50%/0% 0% 100% 100%; box-shadow: 0 5px 5px rgba(255,255,255,0.2); }

    #divHeader.sticky #imgLogo { height: 60px; }
}

@media screen and (max-width: 768px) {
    #imgLogo { height: 55px; margin-right: 5px; }

    #logo a:before { content: ''; position: absolute; pointer-events: none; width: 216px; height: 54px; background-color: #2e0330; z-index: 2; left: 0; top: 0; right: 0; margin: auto; }
    #logo a:after { content: ''; position: absolute; pointer-events: none; width: 210px; height: 72px; background-color: #2e0330; left: 0; right: 0; top: 0; margin: auto; border-radius: 0% 0% 50% 50%/0% 0% 100% 100%; box-shadow: 0 5px 5px rgba(255,255,255,0.2); }

    #divHeader .left, #divHeader .right { position: relative; z-index: 3; }
}


/************************ RIGHT ************************/
#divHeader > .right { display: flex; align-items: center; padding-right: 5px; justify-content: flex-end; }
    #divHeader > .right > .lr-inner { display: flex; justify-content: center; }
    #divHeader > .right .btn-login, #divHeader > .right .btn-register { margin: auto 3px; }
    #divHeader > .right .btn-login { }
    #divHeader > .right .btn-register { background-color: rgba(0,0,0,0.5); color: #fff; }

.btn-login { border: 1px solid #c78d2a; background-color: #c78d2a; background-image: url('/data/1871/uploads/btn-gradient.png'); background-size: 200% auto; background-repeat: repeat-y; background-position: left 150% center; transition: background-position 0.2s ease-in-out; }
    .btn-login:hover { background-position: left 75% center; }
.btn-register { border: 1px solid #c78d2a; color: #fff; background-image: url('/data/1871/uploads/btn-gradient.png'); background-size: 400% auto; background-repeat: repeat-y; background-position: left 75% center; transition: background-position 0.2s ease-in-out; }
    .btn-register:hover { background-position: left 100% center; border: 1px solid #c78d2a; color: #fff; }
.btn-login, .btn-register { padding: 6px 20px; border-radius: 30px; display: block; cursor: pointer; font-weight: bold; text-transform: uppercase; margin: auto; }

#divLanguage a { display: flex; justify-content: center; align-items: center; margin: auto 5px; }
#divLanguage img { height: 35px; }

@media screen and (max-width: 767px) {
    #divHeader > .right > .lr-inner { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background-color: #000; padding: 15px 0; box-shadow: 0px -1px 3px rgba(255,255,255,0.2); }
    .btn-login { background-size: 300% auto; background-position: left 100% center; }
    #divHeader > .right .btn-login, #divHeader > .right .btn-register { border-radius: 5px; margin: 0 5px; text-align: center; padding: 10px; width: 33%; background-color: #c78d2a; color: #fff; border: 0; }
}


/**************************************************************************************************************************** MAIN MENU */
.btn-close { background-color: transparent; position: absolute; top: 0; left: 0; cursor: pointer; }
    .btn-close > div { padding: 15px; }
    .btn-close span { width: 30px; height: 2px; border-radius: 10px; background-color: #fff; margin: 6px auto; display: block; }
        .btn-close span:first-child { transform: translate(0px, 8px) rotate(45deg); }
        .btn-close span:last-child { transform: rotate(-45deg); }
#btn-mmClose { top: -10px; left: -10px; }

#mainMenu { overflow: hidden; transition: opacity 0.2s ease-in-out; opacity: 0; visibility: hidden; z-index: 12; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.8); }
    #mainMenu.active { opacity: 1; visibility: visible; }
        #mainMenu.active .mm-wrapper { transform: translateX(0); }

.mm-wrapper { padding: 10px; margin: 0; max-width: 300px; width: 100%; height: 100%; box-shadow: 0px 0px 10px rgba(0,0,0,0.8); background: linear-gradient(to top right, #000, #222); transition: transform 0.5s ease-in-out; transform: translateX(-300px); }
.mm-inner { padding: 0; overflow-x: auto; height: 100%; position: relative; }
    .mm-inner::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #333; }
    .mm-inner::-webkit-scrollbar { width: 8px; background-color: #F5F5F5; }
    .mm-inner::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #666; background-clip: padding-box; }

.mm-logo { text-align: center; margin: 50px auto 30px; }
.mm-register .btn-register { margin: 25px auto; max-width: 150px; text-align: center; background-color: #fff; }

.mm-menu { }
    .mm-menu > ul { margin: 0; padding: 0; }
        .mm-menu > ul > li { list-style-type: none; }
            .mm-menu > ul > li > a { font-size: 16px; color: #fff; display: block; padding: 15px 40px; }
                .mm-menu > ul > li > a:hover { background-color: rgba(255,255,255,0.1); }
            .mm-menu > ul > li ul { display: none; }
            .mm-menu > ul > li > a i, .mm-menu > ul > li > a img { display: none; }


@media screen and (min-width: 767px) {
    #mm-cat { display: none; }
}

@media screen and (max-width: 768px) {
    .btn-close span { width: 30px; height: 3px; }
        .btn-close span:first-child { transform: translate(0px, 9px) rotate(45deg); }
    .mm-contain { padding-bottom: 75px; }
}

@media screen and (max-width: 767px) {
    .m-hide { display: none; }
    #mm-cat > ul { display: block; }
}

/**************************************************************************************************************************** LOGIN */
.modal { background-color: rgba(0,0,0,0.7); display: block !important; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility: hidden; -webkit-transition: 0.2s; transition: 0.2s; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 12; }
    .modal.active { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; -webkit-transition: 0.5s; transition: 0.5s; }
    .modal > div { -webkit-transition: 0.5s; transition: 0.5s; -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; box-shadow: 0px 0px 10px rgba(255,255,255,0.1); }
    .modal.active > div { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: 0.2s; transition: 0.2s; }

.modal-body { padding: 0; }
.modal > .modal-dialog-centered { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; margin: auto; }
.modal .modal-content { width: 100%; background-color: #222; margin: auto; position: relative; }

@media screen and (max-width: 767px) {
    .modal-dialog { margin-top: 50px; }
}
/************************ LOGIN POPUP ************************/
#modalLogin .modal-dialog { max-width: 500px; margin: auto; width: 90%; }
#modalLogin.modal .modal-content { background-color: #fff; }

#closeLogin { left: auto; right: 0; }
    #closeLogin span { background-color: #888; }
    #closeLogin:hover span { /*background-color: #fff;*/ }

.div-login { padding: 15px; margin-bottom: 50px; }
.login-title { text-align: center; color: #ffcf7e; font-size: 26px; letter-spacing: 1px; }
    .login-title img { max-width: 358px; width: 100%; }

#remoteloginform, #customform { width: 100%; margin: 25px auto 0; text-align: center; padding: 0 25px 5px; }
    #remoteloginform dl, #customform dl { margin-bottom: 0; }
    #remoteloginform dd, #customform dd { position: relative; }
    #remoteloginform .icnR, #customform .icnR { top: 20px; left: 10px; z-index: 2; }
    #remoteloginform input, #customform input { padding: 12px 15px; border: 0px solid #ccc; border-bottom: 1px solid #666; margin: 10px auto; width: 100%; color: #222; font-size: 14px; position: relative; background-color: transparent; }
        #remoteloginform input[name="user"], #remoteloginform input[name="pwd"], #customform_UserName, #customform_Password { padding-left: 50px !important; }
            #remoteloginform input[name="user"]:focus, #remoteloginform input[name="pwd"]:focus { border-color: #888; }
            #remoteloginform input[name="user"]::placeholder, #remoteloginform input[name="pwd"]::placeholder, #customform_UserName::placeholder, #customform_Password::placeholder { color: #aaa; opacity: 1; }
        #remoteloginform input#remoteloginformsubmit, #customform input#customform_submit { margin-top: 25px; color: #000; font-size: 18px; text-transform: uppercase; border-radius: 25px; cursor: pointer; font-weight: bold; width: 50%; margin-right: 0; }
        #remoteloginform input#remoteloginformsubmit, #customform input#customform_submit { color: #fff; border: 1px solid #715627; background-image: url('/data/1871/uploads/btn-gradient.png'); background-position: top 0px left 0px; background-repeat: repeat-y; background-size: 200% auto; transition: background-position 0.2s ease-in-out; }
            #remoteloginform input#remoteloginformsubmit:hover,
            #customform input#customform_submit:hover,
            #remoteloginform input#remoteloginformsubmit:active,
            #customform input#customform_submit:active { background-position: top 0px left 100%; border-color: #c78d2a; }
.a-register { text-align: center; color: #222; display: table; padding: 10px; font-size: 14px; margin: auto; }
    .a-register:hover { text-decoration: underline; color: #ef3038; }

@media screen and (max-width: 767px) {
    #modalLogin { opacity: 1; visibility: visible; -webkit-transform: translateY(110%); transform: translateY(110%); }
        #modalLogin.active { -webkit-transform: translateY(0px); transform: translateY(0px); }
        #modalLogin .modal-dialog { margin: 0; width: 100%; height: 100%; }
        #modalLogin .modal-content { height: 100%; width: 100%; border: 0; border-radius: 0; }
        #modalLogin .modal-body { height: 100%; }
    .modal > div { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
    .modal.active > div { -webkit-transform: translateY(0px); transform: translateY(0px); }
    .div-login { height: 100%; }
}

/**************************************************************************************************************************** LOGIN */
#theme-contain-login { background-image: url('/data/1871/uploads/bg-02.jpg'); background-size: cover; overflow: hidden; }
    #theme-contain-login .login-inner { max-width: 500px; margin-top: 100px; margin-bottom: 40px; margin-left: auto; margin-right: auto; padding: 15px; padding-bottom: 50px; border-radius: 10px; background-color: #fff; }

@media screen and (max-width: 768px) {
    #theme-contain-login .login-inner { margin-top: 40px; }
}

@media screen and (max-width: 767px) {
    #theme-contain-login .login-inner { margin: 15px; padding-bottom: 65px; }
}
/**************************************************************************************************************************** Footer */
#divFooter { margin-top: auto; }
.footer-main { border-top: 1px solid #333; background-color: #000; }
.footer-container { }
    .footer-container > .wrapper { }
.footer-box { padding: 10px 0; position: relative; }

.footer-title { margin-bottom: 20px; text-align: left; margin-top: 0; color: #fff; font-size: 18px; }

.list-contact { }
    .list-contact div { display: flex; align-items: center; margin: 5px auto; }
    .list-contact i { color: #ffc72d; font-size: 26px; margin-right: 10px; }

.logo-payment { display: flex; flex-wrap: wrap; align-items: center; }
    .logo-payment img { width: calc(20% - 10px); margin: 5px; }

.footer-sm { background-color: #222; text-align: center; padding: 6px 0; }
    .footer-sm .wrapper { display: flex; justify-content: center; align-items: center; }
    .footer-sm a { display: flex; justify-content: center; align-items: center; max-width: 40px; max-height: 40px; width: 40px; height: 40px; margin: 6px; border-radius: 50%; transition: transform 0.2s ease-in-out; }
    .footer-sm i { font-size: 26px; color: #fff; }
    .footer-sm a:hover { transform: scale(1.20); }

.footer-license { text-align: center; color: #888; padding: 25px 10px; }
    .footer-license h2 { margin-bottom: 20px; color: #ccc; }
    .footer-license a { text-decoration: underline; color: #fff; }
    .footer-license p { margin-bottom: 20px; }

.footer-qlink { background-color: #000; }
    .footer-qlink .wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 10px 0; }
    .footer-qlink a { display: block; position: relative; margin: 0 5px; color: #fff; padding: 5px; }
        .footer-qlink a:not(:first-child):after { content: ''; position: absolute; top: 5px; bottom: 5px; left: -5px; width: 1px; background-color: #666; }
        .footer-qlink a:hover { text-decoration: underline; }

.footer-copyright { text-align: center; font-weight: bold; padding-bottom: 15px; }

@media screen and (min-width: 767px) {
    .footer-container > .wrapper { display: flex; }
    .footer-box { flex: 1; margin: 15px; }
        .footer-box:not(:first-child):after { content: ''; position: absolute; top: -15px; bottom: -15px; left: -15px; margin: auto; width: 1px; height: 100%; background-color: #333; pointer-events: none; }
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
    .logo-payment img { width: calc(33% - 10px); }
}

@media screen and (max-width: 1023px) {
    .footer-qlink a { font-size: 12px; margin: 0 2px; }
        .footer-qlink a:not(:first-child):after { left: -2px; }

    .footer-license { font-size: 12px; }
        .footer-license h2 { font-size: 18px; }
}

@media screen and (max-width: 767px) {
    .footer-title { margin-bottom: 10px; margin-top: 15px; }
    .footer-box { padding-bottom: 25px; }
        .footer-box:not(:first-child):after { content: ''; position: absolute; top: 0px; left: 0px; right: 0px; margin: auto; width: 100%; height: 1px; background-color: #333; pointer-events: none; }
    .footer-about p { font-size: 10px; }
}
/**************************************************************************************************************************** BANNER */
.divBanner { min-height: 38vw; }
    .divBanner img { width: 100%; }

@media screen and (min-width: 769px) {
    .subBanner-mobile { display: none; }
    .div-subBanner { min-height: 29vw; }
}

@media screen and (max-width: 768px) {
    .subBanner-window { display: none; }
    .div-subBanner { min-height: 59vw; }
}

@media screen and (min-width: 496px) {
    .divBanner-mobile { display: none; }
}

@media screen and (max-width: 495px) {
    .divBanner-window { display: none; }
    .divBanner-mobile { max-height: 166vw; overflow: hidden; }
    .bm_inner { overflow: hidden; max-height: calc(100vh - 55px - 71px - 114px); min-height: 60vh; }

        .bm_inner .flex-direction-nav a { top: 35%; }
}

@media screen and (max-height: 666px) and (max-width:375px) {
    .bm_inner { max-height: calc(100vh - 55px - 71px); }
}
/**************************************************************************************************************************** BODY */
#divBody { margin-bottom: auto; }
.standalone-page { }
.flex-direction-nav { height: 0px; overflow: hidden; }
.flexslider { border: 0; margin: 0; border-radius: 0; }
    .flexslider img { width: 100%; }

@media screen and (min-width: 769px) {
    .standalone-page { padding-top: 91px; }
}

/************************ HOME STEP ************************/
#divhome-step { background-size: auto 100%; background-image: url('/data/1871/uploads/bg-step.jpg'); background-position: center; }
    #divhome-step > .wrapper { display: flex; align-items: center; }
.divStep { position: relative; }
    .divStep:not(:first-child):after { content: ''; position: absolute; top: 0; bottom: 0; left: -5px; margin: auto; width: 15px; height: 15px; border-right: 5px solid #fff; border-top: 5px solid #fff; transform: rotate(45deg); pointer-events: none; }
.step-head { color: #fff; margin-top: 0; margin-bottom: 0; }
.step-title { color: #fbd453; margin: 0; }
.step-detail { color: #ccc; margin: 0; }

@media screen and (min-width: 1920px) {
    #divhome-step { background-size: auto 100%; }
}

@media screen and (min-width: 768px) {
    .divStep { display: flex; align-items: center; padding: 20px 0; flex: 1; justify-content: center; }
    .step-head { margin-right: 10px; font-size: 32px; }
    .step-title { font-size: 16px; }
    .step-detail { font-size: 12px; }
}

@media screen and (max-width: 768px) {
    .step-detail { font-size: 10px; }
    .divStep:not(:first-child):after { width: 10px; height: 10px; border-top: 3px solid #fff; border-right: 3px solid #fff; left: -10px; }
}

@media screen and (max-width: 767px) {
    #divhome-step > .wrapper { align-items: flex-start; }
    .divStep { display: flex; flex-direction: column; align-items: center; padding: 10px 5px; flex: 1; justify-content: center; text-align: center; }
        .divStep:not(:first-child):after { left: -5px; top: 23px; bottom: auto; }
    .step-title { font-size: 11px; margin-bottom: 5px; margin-top: 5px; }
    .step-head { font-size: 24px; }
}

@media screen and (max-width: 375px) {
    .step-head { font-size: 7vw; }
}

/************************ HOME GAMES LIST ************************/
#divhome-games { background-size: auto 350px; background-repeat: no-repeat; background-image: url('/data/1871/uploads/bg-testimonials.jpg'); background-position: center bottom; background-color: #000; }

.gl-tabgames { position: relative; background-color: #222; background: linear-gradient(to bottom, #444, #222); }

.btn-gl { text-align: center; color: #888; padding: 10px 0 15px; background-color: transparent; cursor: pointer; font-size: 12px; position: relative; }
    .btn-gl.active { background-color: #000; color: #fff; }
        .btn-gl.active:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; pointer-events: none; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #000 transparent; }
    .btn-gl img { display: block; margin: auto; margin-bottom: 5px; height: 40px; }
.icn-gl { width: 30px; height: 30px; display: block; margin: auto; margin-bottom: 5px; background-size: 100% auto; background-position: top center; background-repeat: no-repeat; }
.btn-gl.active .icn-gl { background-position: bottom center; }

.gl-box-wrapper { display: flex; flex-wrap: wrap; padding: 5px; }
.gl-item { position: relative; flex: 1 1 calc(20% - 10px); text-align: center; margin: 5px; max-width: calc(20% - 10px); }
    .gl-item img { vertical-align: middle; width: 100%; }
.gl-hover { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.1s ease-in-out; display: flex; }
.gl-item:hover .gl-hover { opacity: 1; }
.gl-detail { transform: translateY(20px); transition: transform 0.2s ease-in-out; color: #fff; margin: auto; }
.gl-item:hover .gl-detail { transform: translateY(0px); }
.gl-item h1 { font-size: 20px; }
.gl-item .btn-login { background-color: #000; color: #fff; background-image: url(/data/1871/uploads/btn-gradient.png); background-position: left 0px center; background-size: 200% auto; transition: background-position 0.2s ease-in-out; text-shadow: 1px 1px 3px #222; margin-top: 10px; }
    .gl-item .btn-login:hover { background-position: left 95% center; }


.gl-next, .gl-prev { top: 0; bottom: 0; margin: auto; background-size: 27px 27px; width: 35px; background-image: none !important; height: auto; }
    .gl-next:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 7.5px 0px 7.5px 10px; border-color: transparent transparent transparent #aaaaaa; }
    .gl-prev:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 7.5px 10px 7.5px 0px; border-color: transparent #aaaaaa transparent transparent; }

.gl-btnShow { display: flex; justify-content: center; padding-bottom: 15px; }
.btn-show { margin: 10px 5px; display: table; padding: 8px 20px; border-radius: 30px; background-color: #222; border: 1px solid #c78d2a; font-size: 16px; color: #fff; cursor: pointer; }
    .btn-show:hover { background-color: #c78d2a; }

@media screen and (min-width: 1024px) {
    .gl-prev, .gl-next { /*display: none;*/ }
    .gl-tab { max-width: 93%; }
}

@media screen and (max-width: 1024px) {
    .gl-item { flex: 1 1 calc(25% - 10px); max-width: calc(25% - 10px); }
}

@media screen and (max-width: 1023px) {
    .gl-tab { max-width: 85%; }
    .gl-item h1 { font-size: 16px; margin-top: 0px; }
}

@media screen and (max-width: 768px) {
    .gl-item { flex: 1 1 calc(33.33% - 10px); max-width: calc(33.33% - 10px); }
}

@media screen and (max-width: 767px) {
    .gl-item { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); }
    .gl-tab { max-width: calc(100% - 70px); }
    .btn-gl { font-size: 2.5vw; }
    .gl-prev { left: 0; }
    .gl-next { right: 0; }
}

/*-- testimonials --*/
#testimonials { }
    #testimonials h1 { text-align: center; margin: 40px auto 20px; }

.elementor-contain { max-width: 1000px; margin: auto; position: relative; padding: 0 50px; margin-bottom: 25px; }
.elementor-container { }
.elementor-box { padding: 10px 20px; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); height: 100%; }

.elementor-quote { font-style: italic; text-align: center; max-width: 600px; width: 100%; padding-top: 10px; padding-bottom: 20px; margin: auto; color: #ccc; }
.elementor-img { border-radius: 50px; width: 55px; height: 55px; overflow: hidden; margin-right: 10px; display: flex; justify-content: center; align-items: flex-start; border: 1px solid #222; background-color: #222; }
    .elementor-img img { width: 125%; }
.elementor-detail { display: flex; justify-content: center; align-items: center; padding-bottom: 40px; margin-top: auto; }
.elementor-name { font-size: 16px; color: #aaa; font-weight: bold; }
.elementor-title { font-size: 12px; color: #75c4e5; }

.ele-next, .ele-prev { opacity: 0.5; }
.ele-pagination > .swiper-pagination-bullet { background-color: #fff; }
.ele-pagination > .swiper-pagination-bullet-active { background-color: #fff; }

@media screen and (max-width: 767px) {
    .elementor-contain { padding: 0 40px; }
    .elementor-box { display: flex; flex-direction: column; justify-content: space-between; }
    .elementor-quote { font-size: 12px; }
    .elementor-name { }
    #testimonials h1 { font-size: 22px; }
}

/************************ HOME ABOUT ************************/
#divhome-about { line-height: 25px; padding: 25px 25px; text-align: justify; color: #aaa; background-image: url('/data/1871/uploads/bg-02.jpg'); background-position: top center; }
    #divhome-about h1 { text-align: center; margin: 30px auto; line-height: normal; color: #fff; }
    #divhome-about h5 { font-size: 18px; font-weight: bold; margin-top: 30px; margin-bottom: 5px; color: #fff; }
    #divhome-about p { margin: 15px 0; line-height: 25px; }

#btn-toggle { display: table; margin: 25px auto; padding: 10px 20px; background: transparent; color: #aaa; }
    #btn-toggle:hover { text-decoration: underline; }

@media screen and (max-width: 767px) {
    #divhome-about { padding: 15px 5px; text-align: left; }

        #divhome-about h1 { font-size: 22px; }
}

/************************ HOME ABOUT ************************/
#divhome-faq { padding: 25px 25px 50px; background-color: #000; }
    #divhome-faq h1 { text-align: center; margin: 30px auto; }

    #divhome-faq #faq { list-style-type: none; margin: 15px auto; }
        #divhome-faq #faq #question a { color: #fff; display: block !important; padding: 10px 15px; padding-right: 35px; border: 1px solid #444; background-color: #000; position: relative; border-radius: 10px; cursor: pointer; }
            #divhome-faq #faq #question a:after { content: ''; position: absolute; top: 0; bottom: 0; right: 15px; margin: auto; width: 0; height: 0; border-style: solid; border-width: 10px 5px 0 5px; border-color: #888 transparent transparent transparent; pointer-events: none; }
            #divhome-faq #faq #question a:hover { background-color: #222; }
                #divhome-faq #faq #question a:hover:after { border-color: #fff transparent transparent transparent; }
        #divhome-faq #faq #answer { padding: 15px; background-color: #111 !important; border: 1px solid #333 !important; border-top: 0px !important; }
            #divhome-faq #faq #answer a { color: #fff; }

@media screen and (max-width: 767px) {
    #divhome-faq { padding: 15px 0px 25px; }
        #divhome-faq h1 { font-size: 22px; }
}
/************************ HOME GAME PROVIDERS ************************/
#divhome-providers { padding: 25px 25px 50px; background-image: url('/data/1871/uploads/bg-02.jpg'); background-position: center; }
    #divhome-providers h1 { text-align: center; margin: 30px auto; }

@media screen and (max-width: 767px) {
    #divhome-providers { padding: 15px 0px 25px; }
        #divhome-providers h1 { font-size: 22px; }
}

/**************************************************************************************************************************** PAGE */
.divBody-video { padding: 10px 0; }
    .divBody-video .wrapper { display: flex; }
.flex1 { flex: 1; }
.div-iframe { border: 1px solid #666; margin: 10px; }

.slot-container { padding: 10px 0 10px; }
    .slot-container > div { display: flex; flex-wrap: wrap; align-items: stretch; }
.slot-shortcut { flex: 1 1 33.33%; max-width: 33.33%; cursor: pointer; position: relative; }
    .slot-shortcut:after { content: ''; box-sizing: border-box; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; background-color: transparent; pointer-events: none; border-width: 1px; border-color: #444; border-style: solid; z-index: 2; }
.slot-shortcut-bg img { width: 100%; transition: transform 0.2s; transform-origin: center bottom; position: relative; z-index: 3; }
.slot-shortcut-bg { background-size: 100% 100%; background-position: center; position: relative; }
.slot-shortcut-title { padding: 10px 15px; background-color: #000; color: #fff; border-top: 1px solid #444; font-size: 18px; font-weight: bold; text-align: left; }
    .slot-shortcut-title > img { width: auto; margin-right: 5px; }
.sub-slot .logo { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 150px; height: 75px; pointer-events: none; }

.sub-slot .slot-shortcut-bg:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); pointer-events: none; }
.sub-slot:hover .slot-shortcut-bg:after { display: none; }
.slot-shortcut:hover:after { z-index: 4; animation: myShortcutShine 2s linear infinite; border-image: linear-gradient(#fcf883, #c78d2a) 1; box-shadow: 7px 0px 7px rgba(199,141,42,0.7), 0px 7px 7px rgba(199,141,42,0.7), -7px 0px 7px rgba(252,248,131,0.7), 0px -7px 7px rgba(252,248,131,0.7), inset -7px -7px 7px rgba(199,141,42,0.7), inset 7px 7px 7px rgba(252,248,131,0.7); }
.slot-shortcut:hover .slot-shortcut-bg img { transform: scale(1.2); z-index: 5; }

.sport-slot .slot-shortcut-bg { background-image: url('/data/1871/uploads/img-soccer-home.jpg'); }
.casino-slot .slot-shortcut-bg { background-image: url('/data/1871/uploads/img-casino-home.jpg'); }
.games-slot .slot-shortcut-bg { background-image: url('/data/1871/uploads/img-game-home.jpg'); }

@keyframes myShortcutShine {
    0%, 100% { box-shadow: 7px 0px 7px rgba(199,141,42,0.7), 0px 7px 7px rgba(199,141,42,0.7), -7px 0px 7px rgba(252,248,131,0.7), 0px -7px 7px rgba(252,248,131,0.7), inset -7px -7px 7px rgba(199,141,42,0.7), inset 7px 7px 7px rgba(252,248,131,0.7); }

    50% { box-shadow: 4px 0px 4px rgba(199,141,42,0.7), 0px 4px 4px rgba(199,141,42,0.7), -4px 0px 4px rgba(252,248,131,0.7), 0px -4px 4px rgba(252,248,131,0.7), inset -4px -4px 4px rgba(199,141,42,0.7), inset 4px 4px 4px rgba(252,248,131,0.7); }
}

@media screen and (max-width: 1023px) {
    .slot-shortcut-title { font-size: 16px; }
    .sub-slot .logo { width: auto; height: 50px; }
}

@media screen and (max-width: 650px) {
    .divBody-video .wrapper { flex-direction: column; }

    .slot-shortcut { max-width: 50%; flex: 1 1 50%; }
    .slot-shortcut-title { font-size: 12px; }
    .sub-slot .logo { height: 10vw; width: auto; }

    .div-iframe iframe { height: 180px !important; }
}

/**************************************************************************************************************************** PROMOTIONS */
#cms5faq_modal_template_list { padding: 5px 0; }
    #cms5faq_modal_template_list #faq_modal { margin: 0; padding: 0; }
    #cms5faq_modal_template_list .question { list-style-type: none; }

.promo { display: flex; background-color: rgba(0,0,0,0.8); padding: 10px; border-radius: 10px; border: 1px solid #888; position: relative; }
    .promo .img { }
        .promo .img img { width: 180px; }
    .promo .detail { padding-left: 10px; }
        .promo .detail h2 { font-size: 22px; color: #fff; margin-bottom: 20px; position: relative; display: table; margin-top: 10px; }
        .promo .detail p { color: #ccc; }
        .promo .detail .btn-more { color: #fff; display: block; position: absolute; right: 10px; bottom: 10px; padding: 5px 15px; border: 1px solid #c78d2a; border-radius: 30px; background: #222; font-size: 11px; }
            .promo .detail .btn-more:hover { color: #fff; background: linear-gradient(to right, #222,#c78d2a); }

.fancybox-outer .promo { display: none !important; }

@media screen and (min-width: 769px) {
    .promo .detail h2:after { content: ''; position: absolute; bottom: -6px; height: 1px; width: 100%; background-color: #c78d2a; margin: auto; left: 0; }
}

@media screen and (min-width: 767px) {
    #cms5faq_modal_template_list #faq_modal { display: flex; flex-wrap: wrap; }
    #cms5faq_modal_template_list .question { flex: 1 1 50%; max-width: 50%; }
    .promo { margin: 5px; }
}

@media screen and (max-width: 1023px) {
    .promo { padding-top: 45px; }
        .promo .detail h2 { position: absolute; top: 10px; left: 15px; font-size: 18px; margin-top: 5px; }
        .promo .img img { width: 130px; }
        .promo .detail p { font-size: 12px; }
}

@media screen and (max-width: 767px) {
    .promo { margin: 10px 0; }
        .promo .detail h2 { font-size: 16px; }
        .promo .detail p { font-size: 11px; }
}


/**************************************************************************************************************************** STANDALONE */
.box { margin-bottom: 25px; padding: 25px 0; }
    .box h2 { margin: 30px 0; color: #fff; }
    .box h3 { margin-top: 30px; margin-bottom: 10px; color: #fff; }
    .box p { margin: 10px 0; color: #c6c6c6; }
    .box a { color: #fff; }

@media screen and (min-width: 767px) {
    .box { border: 1px solid #6d490c; margin-top: 25px; padding: 25px; padding-top: 5px; background-color: rgba(0,0,0,0.8); }
}

@media screen and (max-width: 766px) {
    .box { margin-top: 25px; padding: 0; }
        .box h2 { font-size: 20px; }
        .box h3 { font-size: 20px; }
        .box p { font-size: 10px; }
}

/*---------- sportsbook --*/
.divSport-title { text-align: center; font-weight: bold; }
.iframe-sport { width: 1100px; margin: auto; }
    .iframe-sport iframe { height: 650px; border: 1px solid #444; margin: 25px auto 10px; background-color: rgba(0,0,0,0.8); }

.btnR { background-color: #c78d2a; border: 1px solid #c78d2a; padding: 5px 25px; display: table; margin: 25px auto 50px; border-radius: 30px; font-size: 16px; cursor: pointer; }

@media screen and (max-width: 1100px) {
    .iframe-sport { width: 100%; }
}

/**************************************************************************************************************************** adminloginx */
#theme-contain-adminloginx { padding: 20px 0; }
    #theme-contain-adminloginx input { padding: 5px; margin: 5px; }
    #theme-contain-adminloginx a { color: #fff; }
    #theme-contain-adminloginx input[type=submit] { padding: 5px 15px; border-radius: 20px; width: auto; }

@media screen and (min-width: 500px) {
    #theme-contain-adminloginx { max-width: 500px; margin: auto; }
}

@media screen and (min-width: 769px) {
    #theme-contain-adminloginx { margin-top: 91px; }
}
/**************************************************************************************************************************** payment menthods */
#btnPayment-box { display: flex; margin-top: 25px; }
.btn-payment { flex: 1; padding: 15px 0; cursor: pointer; color: #888; background-color: transparent; font-weight: bold; font-size: 16px; text-transform: uppercase; text-align: center; border-bottom: 2px solid #888; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
    .btn-payment.active { color: #fff; border-color: #fff; }

.payment-container { background-color: rgba(0,0,0,0.8); }
.payment-thead { display: flex; text-align: center; align-items: center; color: #888; /*border-bottom:1px solid #666;*/ }
    .payment-thead > div { flex: 1; padding: 10px 0; }

.meths-wrapper { /*overflow-y:scroll;*/ }
    .meths-wrapper::-webkit-scrollbar-track { /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/ /*background-color: #333;*/ }
    .meths-wrapper::-webkit-scrollbar { /*width: 8px;*/ /*background-color: #F5F5F5;*/ }
    .meths-wrapper::-webkit-scrollbar-thumb { /*border-radius: 10px;*/ /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/ /*background-color: #666;*/ /*background-clip: padding-box;*/ }

.meths-items:nth-last-child(odd) { background-color: rgba(150,150,150,0.2); }

.meths-info { display: flex; text-align: center; align-items: center; cursor: pointer; position: relative; }
    .meths-info:after { content: ''; position: absolute; top: 0; bottom: 0; right: 15px; width: 7px; height: 7px; margin: auto; border-top: 2px solid #555; border-right: 2px solid #555; transform: rotate(45deg); }
    .meths-info > div { padding: 15px 0; }
.meths-table_inner { display: flex; }
    .meths-table_inner > div { flex: 1; }
.meths-details { color: #972e9c; }

.meths-img { }
    .meths-img img { height: 30px; }

.meths-infos { font-size: 12px; text-align: left; max-height: 0; overflow: hidden; }
    .meths-infos p { padding: 5px 15px 15px; }
    .meths-infos a { text-decoration: underline; color: #972e9c; }

.meths-items.active { }
    .meths-items.active .meths-infos { max-height: 350px; }
    .meths-items.active .meths-info:after { transform: rotate(135deg); top: -5px; }

.meths-note h3 { font-size: 20px; }
.meths-note { font-size: 12px; }

@media screen and (min-width: 768px) {
    .w-hide { display: none; }
    .meths-wrapper { /*max-height:500px;*/ }
    .meths-info > div { flex: 1 1 14.28%; }
        .meths-info > div.meths-table { flex: 1 1 71.4%; }
}

@media screen and (max-width: 1023px) {
    .payment-thead { font-size: 11px; }
    .meths-info { font-size: 11px; }
}

@media screen and (max-width: 767px) {
    .payment-title { font-size: 20px; padding-top: 15px; }

    .meths-wrapper { /*max-height:400px;*/ }
    .meths-info { flex-wrap: wrap; }
        .meths-info > div { flex: 1 1 50%; }
    .meths-details { display: none !important; }
    .meths-table { display: none; cursor: default; padding: 0px 15px 15px !important; }
    .meths-table_inner { border-right: 1px solid #444; border-bottom: 1px solid #444; flex-direction: column; }
        .meths-table_inner > div { display: flex; justify-content: center; align-items: center; }
            .meths-table_inner > div > span { flex: 1; border-top: 1px solid #444; border-left: 1px solid #444; display: block; padding: 7px 0; }
                .meths-table_inner > div > span.w-hide { font-weight: bold; color: #888; }
    .meths-items.active .meths-table { display: block; }
    .meths-infos { font-size: 10px; }

    .meths-note { font-size: 10px; text-align: justify; }
        .meths-note h3 { font-size: 16px; }

    #divWithdrwal .meths-fee_container { display: none; }

    .meths-info:after { bottom: auto; top: 27px; }
    .meths-items.active .meths-info:after { top: 25px; }
}

/**************************************************************************************************************************** register */
.icnR { position: absolute; left: 5px; top: 5px; }
    .icnR img { height: 25px; margin: 0 !important; }

.register-box-wrapper { box-shadow: 5px 5px 10px rgba(0,0,0,0.6); }

#registerform { width: 100%; padding: 25px 50px; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; }
    #registerform dl { margin: 15px auto; width: 100%; flex: 1 1 100%; }
    #registerform dt { width: 100%; color: #eee; font-size: 12px; margin-bottom: 5px; }
    #registerform dd { position: relative; }
    #registerform textarea, #registerform input[type=text], #registerform input[type=password] { width: 100%; color: #fff; font-size: 14px; padding: 10px; background-color: transparent; border-bottom: 2px solid #666; padding-left: 40px; }
        #registerform textarea:focus, #registerform input[type=text]:focus, #registerform input[type=password]:focus { border-color: #c78d2a; }
#groupUsername dd { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
    #groupUsername dd #registerform_UserName { width: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
    #groupUsername dd #registerform_UserNameMsg { width: 100%; }
#registerform input.btnCheckUser { margin-top: 0; margin-bottom: 0; /*margin-left: 15px;*/ padding: 10px 20px; max-width: calc(40% - 15px); font-size: 12px; cursor: pointer; }
#registerform #registerform_Currency { background-color: #fff; border: 0; border-bottom: 2px solid #666; border-radius: 0px; padding: 10px; font-size: 15px; color: #000; width: 100%; outline: 0; }
    #registerform #registerform_Currency:focus { border-color: #c78d2a; }
#registerform #registerform_varifycode { width: 135px; float: left; }
#registerform .btnCheckUser, #registerform_btnSubmit { border-radius: 30px; color: #fff; font-weight: bold; border: 0px; padding: 8px 12px; font-size: 14px; text-transform: uppercase; margin: 6px 0; border: 0; background-color: #c78d2a; background: linear-gradient(to right, #805f27, #c78d2a); }
    #registerform .btnCheckUser:hover, #registerform_btnSubmit:hover { box-shadow: inset 0 0 10px rgba(0,0,0,0.8); }
#registerform_btnSubmit { padding: 10px 35px; cursor: pointer; }
#groupCurrency { display: none; }
#groupAffiliate { display: none; }
#registerform:after { font-size: 10px; color: #fff; }
#groupVerifyCode dd:last-child { position: static; }
#groupVerifyCode img { margin-left: 15px; }

input::-webkit-input-placeholder { -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition: .4s; transition: .4s; }
input::-moz-placeholder { transform: translateX(0px); -webkit-transition: .4s; transition: .4s; }
input:-ms-input-placeholder { transform: translateX(0px); -webkit-transition: .4s; transition: .4s; }
input::placeholder { -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition: .4s; transition: .4s; }
input:focus::-webkit-input-placeholder { -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition: .4s; transition: .4s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; }
input:focus::-moz-placeholder { transform: translateX(200px); -webkit-transition: .4s; transition: .4s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-timing-function: ease-in; }
input:focus:-ms-input-placeholder { transform: translateX(200px); -webkit-transition: .4s; transition: .4s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition-timing-function: ease-in; }
input:focus::placeholder { -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition: .4s; transition: .4s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; }

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px #fcffd3 inset; }

.small { font-size: 12px; }
.w3-text-red { color: #ff5858; }

.divRegister-box { padding: 25px 0 50px; }
.register-container { height: 100%; background: linear-gradient(45deg, #2a032c, #000000); }
.register-box-wrapper { display: flex; background-color: #000; border-radius: 15px; overflow: hidden; }
    .register-box-wrapper > .left { background-color: #000; position: relative; }
        .register-box-wrapper > .left:after { content: ''; position: absolute; bottom: 0; right: 0; margin: auto; pointer-events: none; }
.img-register { overflow: hidden; }
.register-box-wrapper > .right { }

.register-logo { position: absolute; bottom: 15px; left: 0; right: 0; margin: auto; z-index: 9; }
    .register-logo img { height: 100px; display: block; margin: auto; }

#registerform_FullNameDescription { color: #ff5858; padding-top: 5px; }

.note { display: none; font-size: 10px; color: #fff; padding-top: 5px; position: absolute; }
#registerform_Password:focus { margin-bottom: 25px; }
    #registerform_Password:focus + .note { display: block; margin-top: -25px; }
#registerform_Mobile:focus { margin-bottom: 25px; }
    #registerform_Mobile:focus + .note { display: block; margin-top: -25px; }

@media screen and (max-width: 1024px) {
    #registerform { padding: 25px; }
}

@media screen and (min-width: 1023px) {
    #groupPassword, #groupComfirmPassword { flex: 1 1 50%; max-width: 50%; }
}

@media screen and (min-width: 767px) {
    .register-box-wrapper > .left { width: 40%; }
    .imgRegister-mobile { display: none; }
    .imgRegister-window { margin-left: 50%; transform: translateX(-50%); }

    .register-box-wrapper > .left:after { top: 0; width: 10px; background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.3)); }
    .register-box-wrapper > .right { width: 60%; }
    #groupPassword { padding-right: 10px; }
    #groupComfirmPassword { padding-left: 10px; }

    .note { font-size: 11px; width: 550px; }
    .small { font-size: 11px; }
}

@media screen and (max-width: 766px) {
    .imgRegister-window { display: none; }
    .imgRegister-mobile { margin-left: 50%; transform: translateX(-50%); }
    .registration-wrapper { padding: 0; }
    .divRegister-box { padding: 0; }
    .register-box-wrapper { border-radius: 0; flex-direction: column; }
        .register-box-wrapper > .left { min-height: 200px; }
            .register-box-wrapper > .left:after { left: 0; height: 10px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3)); }
        .register-box-wrapper > .right { }

    .register-logo { top: auto; left: 10px; right: auto; }
        .register-logo img { height: 50px; }
}

@media screen and (max-width: 766px) and (min-width:608px) {
    #registerform { flex-wrap: wrap; flex-direction: row; }
        #registerform dl { flex: 1 1 50%; max-width: 50%; padding: 0 10px; }
            #registerform dl#groupUsername, #registerform dl#groupFullName { flex: 1 1 100%; max-width: 100%; }
    #registerform_btnSubmit { width: 100%; padding: 15px; }
    .note { position: absolute; width: 535px; font-size: 11px; }
    .small { font-size: 11px; }
}

@media screen and (max-width: 766px) {
    #registerform { padding: 25px 25px; }
        #registerform .btnCheckUser { font-size: 3vw; }
    #registerform_btnSubmit { margin: 25px auto 0; display: table; }

    #groupUsername dd #registerform_UserName { width: 100%; }

    #groupPassword { position: relative; }
    #registerform_Password:focus { margin-bottom: 37px; }
        #registerform_Password:focus + .note { display: block; margin-top: -37px; }

    .register-logo { display: none; }
}

/************************ MODAL REGISRATION ************************/
#modalRegister { }
    #modalRegister .modal-dialog { max-width: 1200px; width: 100%; margin: auto; }
    #modalRegister .modal-content { background-color: transparent; }
#closeRegister { left: auto; right: 0; z-index: 2; }
#modalRegister #divRegisterBox { padding: 0; }

@media screen and (max-width: 1023px) {
    #modalRegister { overflow-y:scroll;}
}

/**************************************************************************************************************************** DOWNLOAD */
.divDownload { padding: 25px 0px 50px; text-align: center; }
.download-wrapper { display: flex; justify-content: center; margin-top: 10px; }
.download-box { display: flex; flex-direction: column; padding: 10px; }
    .download-box a { display: block; margin-top: 10px; transform: scale(0.9); transition: transform 0.2s ease-in-out; }
        .download-box a:hover { transform: scale(1.0); }
    .download-box img { width: 100%; }