body { background-position: center; background-size: auto; background-attachment: scroll; margin: 0; line-height: normal; font-family: "Open Sans", sans-serif, "Microsoft JhengHei"; font-family: "Poppins-Regular", "Microsoft JhengHei"; color: #000; font-size: 16px; font-size: 14px; background: #efefef; } /*==============mobile telegram button=============*/ .btn-telegram-mobile-frame { width: 100%; margin-top: -7px; padding: 0px 2px; } .btn-telegram-mobile-frame .glass-flash-button { margin-left: 0px; font-size: 12px; width: 95%; position: relative; display: inline-block; padding: 9px; color: white; background: linear-gradient(#1976d2 0%, #29B6F6 100%); text-decoration: none; border: none; border-radius: 5px; overflow: hidden; z-index: 1; animation: zoomInOut 2s ease-in-out infinite; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); } /* ============Header telegram button ===============*/ .btn-tel a:hover {color:#fff !important;} .btn-tel:hover .glass-flash-button {background:linear-gradient(to bottom, #888, #666);} .glass-flash-button { margin-top: 3px; margin-left:10px; position: relative; display: inline-block; padding: 12px; color: white; background: linear-gradient(#1976d2 0%, #29B6F6 100%); text-decoration: none; border: none; border-radius: 5px; overflow: hidden; z-index: 1; animation: zoomInOut 2s ease-in-out infinite; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* subtle inner shadow */ } /* Sheen animation */ .glass-flash-button::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-20deg); animation: shine 2.5s infinite; z-index: 2; } /* Text with inner shadow */ .glass-flash-button span { position: relative; z-index: 3; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* inner shadow style */ } /* Zoom effect */ @keyframes zoomInOut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* Sheen animation keyframes */ @keyframes shine { 0% { left: -75%; } 100% { left: 125%; } } * { padding: 0; margin: 0; box-sizing: border-box; } .underline { text-decoration: underline; } img { vertical-align: middle; } table { width: 100%; } button { outline: 0; border: 0; } input { outline: 0; border: 0; } iframe { width: 100%; /*height: 850px;*/ border: 0; } .wrapper { margin: 0 auto; } a, a:hover, a:active, a:focus { text-decoration: none; } ul, ol { margin-left: 20px; margin-bottom: 20px; } li { list-style-type: disc; } ul.step1 { margin-left: 56px; } ul.step1 > li:nth-child(1)::marker { content: "1.1 "; } ul.step1 > li:nth-child(2)::marker { content: "1.2 "; } ul.step1 > li:nth-child(3)::marker { content: "1.3 "; } ul.step1 > li:nth-child(4)::marker { content: "1.4 "; } ul.step1 > li:nth-child(5)::marker { content: "1.5 "; } ul.step1 > li { margin-bottom: 8px; } ul.step2 { margin-left: 56px; } ul.step2 > li:nth-child(1)::marker { content: "a. "; } ul.step2 > li:nth-child(2)::marker { content: "b. "; } ul.step2 > li:nth-child(3)::marker { content: "c. "; } ul.step2 > li:nth-child(4)::marker { content: "d. "; } ul.step2 > li:nth-child(5)::marker { content: "e. "; } ul.step2 > li { margin-bottom: 8px; } ul.step3 { margin-left: 56px; } ul.step3 > li:nth-child(1)::marker { content: "2.1 "; } ul.step3 > li:nth-child(2)::marker { content: "2.2 "; } ul.step3 > li:nth-child(3)::marker { content: "2.3 "; } ul.step3 > li:nth-child(4)::marker { content: "2.4 "; } ul.step3 > li:nth-child(5)::marker { content: "2.5 "; } ul.step3 > li { margin-bottom: 8px; } ul.step4 { margin-left: 56px; } ul.step4 > li:nth-child(1)::marker { content: "3.1 "; } ul.step4 > li:nth-child(2)::marker { content: "3.2 "; } ul.step4 > li:nth-child(3)::marker { content: "3.3 "; } ul.step4 > li:nth-child(4)::marker { content: "3.4 "; } ul.step4 > li:nth-child(5)::marker { content: "3.5 "; } ul.step4 > li { margin-bottom: 8px; } ul.step5 { margin-left: 56px; } ul.step5 > li:nth-child(1)::marker { content: "4.1 "; } ul.step5 > li:nth-child(2)::marker { content: "4.2 "; } ul.step5 > li:nth-child(3)::marker { content: "4.3 "; } ul.step5 > li:nth-child(4)::marker { content: "4.4 "; } ul.step5 > li:nth-child(5)::marker { content: "4.5 "; } ul.step5 > li { margin-bottom: 8px; } ul.step6 { margin-left: 56px; } ul.step6 > li:nth-child(1)::marker { content: "5.1 "; } ul.step6 > li:nth-child(2)::marker { content: "5.2 "; } ul.step6 > li:nth-child(3)::marker { content: "5.3 "; } ul.step6 > li:nth-child(4)::marker { content: "5.4 "; } ul.step6 > li:nth-child(5)::marker { content: "5.5 "; } ul.step6 > li:nth-child(6)::marker { content: "5.6 "; } ul.step6 > li:nth-child(7)::marker { content: "5.7 "; } ul.step6 > li:nth-child(8)::marker { content: "5.8 "; } ul.step6 > li:nth-child(9)::marker { content: "5.9 "; } ul.step6 > li:nth-child(10)::marker { content: "5.10 "; } ul.step6 > li:nth-child(11)::marker { content: "5.11 "; } ul.step6 > li:nth-child(12)::marker { content: "5.12 "; } ul.step6 > li:nth-child(13)::marker { content: "5.13 "; } ul.step6 > li:nth-child(14)::marker { content: "5.14 "; } ul.step6 > li:nth-child(15)::marker { content: "5.15 "; } ul.step6 > li:nth-child(16)::marker { content: "5.16 "; } ul.step6 > li:nth-child(17)::marker { content: "5.17 "; } ul.step6 > li:nth-child(18)::marker { content: "5.18 "; } ul.step6 > li:nth-child(19)::marker { content: "5.19 "; } ul.step6 > li:nth-child(20)::marker { content: "5.20 "; } ul.step6 > li { margin-bottom: 8px; } ul.step7 { margin-left: 56px; } ul.step7 > li:nth-child(1)::marker { content: "6.1 "; } ul.step7 > li:nth-child(2)::marker { content: "6.2 "; } ul.step7 > li:nth-child(3)::marker { content: "6.3 "; } ul.step7 > li:nth-child(4)::marker { content: "6.4 "; } ul.step7 > li:nth-child(5)::marker { content: "6.5 "; } ul.step7 > li:nth-child(6)::marker { content: "6.6 "; } ul.step7 > li:nth-child(7)::marker { content: "6.7 "; } ul.step7 > li { margin-bottom: 8px; } ul.step8 { margin-left: 56px; } ul.step8 > li:nth-child(1)::marker { content: "7.1 "; } ul.step8 > li:nth-child(2)::marker { content: "7.2 "; } ul.step8 > li:nth-child(3)::marker { content: "7.3 "; } ul.step8 > li:nth-child(4)::marker { content: "6.4 "; } ul.step8 > li:nth-child(5)::marker { content: "7.5 "; } ul.step8 > li:nth-child(6)::marker { content: "7.6 "; } ul.step8 > li:nth-child(7)::marker { content: "7.7 "; } ul.step8 > li:nth-child(8)::marker { content: "7.8 "; } ul.step8 > li:nth-child(9)::marker { content: "7.9 "; } ul.step8 > li:nth-child(10)::marker { content: "7.10 "; } ul.step8 > li:nth-child(11)::marker { content: "7.11 "; } ul.step8 > li:nth-child(12)::marker { content: "7.12 "; } ul.step8 > li:nth-child(13)::marker { content: "7.13 "; } ul.step8 > li { margin-bottom: 8px; } #provider-box > p { margin-left: 32px; } .headerMenu { box-shadow: 0px 0px 10px #403c39; } .txtcolor1 { color: #ffbd42; font-size: 16px; font-weight: bold; margin-top: 20px; margin-bottom: 10px; } .txtcolor2 { color: red; } .icnSocial1 { border-radius: 40px; width: 35px; height:35px; } .center { text-align: center; } @media screen and (max-width:767px) { iframe { height: 70vh; } } @media screen and (min-height:767px) { #divBody { min-height: 500px; } } /***************************************************************************** style */ .w1440 { max-width: 1440px; margin: auto; width: 100%; } a { color: #000; cursor: pointer; } a:hover { color: #ffbd42; } b, strong { color: #000; } h1 { color: #000; font-weight: bold; } h3 { color: #000; font-weight: bold; } h3.info-text { margin-bottom: 50px; font-weight: bold; position: relative; text-align: center; } h3.info-text:after { content: ''; position: absolute; bottom: -25px; left: 0; right: 0; margin: auto; width: 150px; height: 1px; border-top: 3px dotted #ccc; } h4 { color: #000; font-weight: bold; margin-top: 30px; margin-bottom: 15px; } h5 { color: #eb2e42; text-align: center; } button.close { transition: transform 0.2s ease-in-out; font-size: 40px; opacity: 1; text-shadow: none; font-weight: normal; } button.close:hover { transform: rotate(180deg); } .pd-5 { padding: 5px; } .modal-backdrop { /*background-color: #fff; */ } .modal-backdrop.in { opacity: 0.8; } @media screen and (max-width:767px) { .box-container { margin: 25px auto; } } @media screen and (max-width:1023px) { .windowOnly { display: none !important; } } @media screen and (min-width:1024px) { .mobileOnly { display: none !important; } } /**** bootstrap */ .d-flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .align-items-center { align-items: center; } .text-center { text-align: center; color: #000; } /**** scroll bar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #888; border: 0px none #ffffff; border-radius: 50px; } ::-webkit-scrollbar-thumb:hover { background: #888; } ::-webkit-scrollbar-thumb:active { background: #888; } ::-webkit-scrollbar-track { background: #F5F5F5; border: 0px none #ffffff; border-radius: 50px; } ::-webkit-scrollbar-track:hover { background: #F5F5F5; } /*::-webkit-scrollbar-track:active { background: #F5F5F5; }*/ ::-webkit-scrollbar-corner { background: transparent; } /**** input */ 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; } /*************************************************************** lottery **/ #drawresult ul { width: 100%; padding: 0; text-align: center; } #drawresult ul > li { border: 0px solid !important; } #drawresult ul > li table caption { border-radius: unset !important; border-top-left-radius: 7px !important; border-top-right-radius: 7px !important; } #drawresult ul > li { width: 100% !important; } #drawresult ul > li#M table { border: 1px solid #f2bc00 !important; } #drawresult ul > li#M table caption { background-color: #f2bc00 !important; color: #000 !important; background-image: url('/data/2076/uploads/lotto-magnum.png'); } #drawresult ul > li#P table { border: 1px solid #148ea4 !important; } #drawresult ul > li#P table caption { background-color: #148ea4 !important; background-image: url('/data/2076/uploads/lotto-pmp.png'); } #drawresult ul > li#T table { border: 1px solid #dd0000 !important; } #drawresult ul > li#T table caption { background-color: #dd0000 !important; background-image: url('/data/2076/uploads/lotto-toto.png'); color: #ffc7c7; } #drawresult ul > li#S table { border: 1px solid #12689a !important; } #drawresult ul > li#S table caption { background-color: #12689a !important; background-image: url('/data/2076/uploads/lotto-singapore.png'); color: #8dd5ff; } #drawresult ul > li#B table { border: 1px solid #da002c !important; } #drawresult ul > li#B table caption { background-color: #da002c !important; background-image: url('/data/2076/uploads/lotto-sabah.png'); color: #ffc7c7; } #drawresult ul > li#K table { border: 1px solid #4e9803 !important; } #drawresult ul > li#K table caption { background-color: #4e9803 !important; background-image: url('/data/2076/uploads/lotto-sandakan.png'); } #drawresult ul > li#W table { border: 1px solid #094405 !important; } #drawresult ul > li#W table caption { background-color: #094405 !important; background-image: url('/data/2076/uploads/lotto-sarawak.png'); color: #9bff94; } #drawresult ul > li#H table { border: 1px solid #95650a !important; } #drawresult ul > li#H table caption { background-color: #95650a !important; background-image: url('/data/2076/uploads/lotto-gd.png'); color: #fff0d4; } #drawresult ul > li#N table { border: 1px solid #777 !important; } #drawresult ul > li#N table caption { background-color: #777 !important; background-image: url('/data/2076/uploads/lotto-perdana.png'); color: #f9f9f9; } #drawresult ul > li#R table { border: 1px solid #00aced !important; } #drawresult ul > li#R table caption { background-color: #00aced !important; background-image: url('/data/2076/uploads/lotto-lucky.png'); } #drawresult ul > li ol.p li { width: 31.3333% !important; display: block; float: left; background: rgba(0,0,0,0.1); margin: 1%; border: rgba(0,0,0,0.2) 1px solid; } #drawresult ul > li ol.c li { width: 31.3333% !important; display: block; float: left; background: rgba(0,0,0,0.1); margin: 1%; border: rgba(0,0,0,0.2) 1px solid; } #drawresult ul > li ol.abc li { width: 33.3333%; display: block; float: left; } #drawresult ul > li ol.abc li::before { content: ""; font-size: 12px; font-weight: bold; } /*************************************************************** theme color setting **/ /**** black */ /**** red */ body.color-red .header-top { background: #7B0B07; } body.color-red .headertop-wrapper { border-color: #7B0B07; } body.color-red #header-login:hover { background: rgba(0,0,0,0.3); } body.color-red .i-count:after { background: #ffbd42; color: #000; } body.color-red #togglesettings.open .settingboxwrapper { background-color: rgba(0,0,0,0.2); } body.color-red #btn-settingsbox:hover { box-shadow: inset 0 0 50px rgba(0,0,0,0.2); } body.color-red #btn-settingsbox.btn-setting__open { background: rgba(0,0,0,0.2); } body.color-red .modal-settings .modal-dialog .popup-wrapper { background: #550303; } body.color-red .btn-lr:hover, body.color-red #header-register:hover { background: linear-gradient(to bottom, #550303, #410606); } body.color-red .dropdown.language > a:hover, body.color-red .dropdown.language > a:active, body.color-red .dropdown.language > a:focus { background: rgba(0,0,0,0.3); } body.color-red #cssmenu > ul > li > a { color: #dbba9c; font-weight: bold; } body.color-red #cssmenu > ul > li > a > img { filter: none; opacity: 1; } body.color-red #cssmenu > ul > li.active > a { border-bottom-color: #dbba9c; } body.color-red #cssmenu > ul > li:hover > a { background: #390505; } body.color-red .divfooter { background: #550303; } body.color-red .footer-copyright { background: #430101; } body.color-red #divHome-announce { background: #550303; } body.color-red .modal-backdrop { background: rgba(0,0,0,0.8); } @media screen and (min-width:1024px) { body.color-red #cssmenu > ul > li > ul:before { background-color: rgba(38,7,7,0.8); } body.color-red #divMenu { background: #550303; } } @media screen and (max-width:1023px) { body.color-red #menuContainer #menuHead { background: #7b0707; } body.color-red #cssmenu > ul > li.active > a { background: #eee; } body.color-red #cssmenu > ul > li > a { color: #000; } } /**** grey */ body.color-grey { background: #fff; } body.color-grey .header-top { background: #eee; } body.color-grey .headertop-wrapper { border-color: #ccc; } body.color-grey .btn-menu span { /*background: #888;*/ } /*body.color-grey img.logo { filter: grayscale(1) brightness(0.3); }*/ body.color-grey .header-icon { filter: brightness(0.3); } body.color-grey .currency { color: #222; border-right-color: #888; } body.color-grey .currency img { filter: grayscale(1) brightness(0.3); } body.color-grey #togglesettings img { filter: grayscale(1) brightness(0.6); } body.color-grey #togglesettings .btn-settings:hover img, body.color-grey #togglesettings .btn-settings.active img, body.color-grey #togglesettings #btn-settingsbox:hover img { filter: grayscale(0) brightness(0); } body.color-grey #togglesettings #btn-settingsbox.btn-setting__open img, body.color-grey #togglesettings #btn-settingsbox.btn-setting__open:hover img { filter: grayscale(1) brightness(2); } body.color-grey .settingsList .dropdown-toggle { background: rgba(0,0,0,0.1); } body.color-grey #togglesettings.open .settingboxwrapper { background-color: rgba(0,0,0,0.1); } body.color-grey #btn-settingsbox:hover { box-shadow: inset 0 0 50px rgba(0,0,0,0.2); } body.color-grey #btn-settingsbox.btn-setting__open { background: rgba(0,0,0,0.3); } body.color-grey .modal-settings .modal-dialog .popup-wrapper { background: #fff; color: #000; } body.color-grey .settings-head .close, body.color-grey .modal-settings h4 { color: #000; } body.color-grey .settings-head { border-color: rgba(0,0,0,0.5); } body.color-grey #header-login { color: #222; } body.color-grey #header-login:hover { background: rgba(0,0,0,0.1); } body.color-grey .dropdown.language > a { color: #222; } body.color-grey .dropdown.language > a:hover, body.color-grey .dropdown.language > a:active, body.color-grey .dropdown.language > a:focus { background: rgba(0,0,0,0.1); } body.color-grey #divHome-announce { background: #ccc; color: #000; } body.color-grey .divfooter { background: #eee; } body.color-grey .footer-copyright { background: #888; } body.color-grey .fcontent-title { color: #444; } body.color-grey .fcontent-mini { color: #444; } body.color-grey .fcontent-detail { color: #aaa; } body.color-grey .fcc-box { border-color: #444; } body.color-grey #divFooter-info h3 { color: #444; } #divFooter center { display: none; } body.color-grey #divFooter-info { color: #888; } body.color-grey #divFooter-info a { color: #888; } body.color-grey .footer-contact img { filter: invert(0.5); } body.color-grey .count-jackpot { color: #fff; } body.color-grey .jackpotfoot { color: #ccc; } body.color-grey .modal-backdrop { background: rgba(0,0,0,0.8); } body.color-grey .noti-item { color: #000 !important; } body.color-grey .noti-item[data-status="read"] { background: rgba(173,173,173,0.2); } body.color-grey .noti-item[data-status="unread"] { background: rgba(133,133,94,0.2); } body.color-grey .i-fav { filter: brightness(0); } body.color-grey .i-fav.active { filter: none; } body.color-grey .game-item { border-color: rgba(0,0,0,0.2); } body.color-grey .game-item-hover { background: rgba(255,255,255,0.6); } body.color-grey .game-title { color: #222; } body.color-grey .btn-pn { box-shadow: 0 0 3px rgba(0,0,0,0.6); } @media screen and (min-width:1024px) { body.color-grey #divMenu { background: #ccc; } body.color-grey #togglesettings:after { background-color: rgba(0,0,0,0.5); } body.color-grey .tops-container { background: #eee; border-color: #eee; } body.color-grey .gl-next, .gl-prev { } body.color-grey .game-item { background: #fff; } body.color-grey .btn-gl { color: #888; } body.color-grey .btn-gl:hover { color: #666; } body.color-grey .btn-gl:active { color: #222; } body.color-grey .btn-gl.active { color: #ffbd42; border-color: #ffbd42; } } @media screen and (max-width:1023px) { body.color-grey #menuContainer #menuHead { background: #eee; } body.color-grey #cssmenu > ul > li.active > a { background: #eee; } body.color-grey #cssmenu > ul > li > a { color: #000; } body.color-grey .fcontent-detail { background: #fff; } } /***************************************************************************** TERMS */ .collapse-box { border: 1px solid #888; border-radius: 6px; margin: 10px 0; } .btn-collapse { width: 100%; border-radius: 0; margin: 0; text-align: left; border: 0; position: relative; padding: 7px 15px; background-color: #af0013; border-top-left-radius: 6px; border-top-right-radius: 6px; } .btn-collaps:hover { border-color: #eb2e42; color: #fff;; } .btn-collapse.collapsed:after { content: '+'; position: absolute; top: 0; bottom: 0; right: 10px; display: flex; justify-content: center; align-items: center; color: #eb2e42; font-weight: bold; font-size: 21px; } .btn-collapse.collapsed { background-color: transparent; } .btn-collapse:not(collapsed):after { content: '-'; position: absolute; top: 0; bottom: 0; right: 10px; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: normal; font-size: 21px; } .content.collapse { padding-left: 10px; padding-right: 10px; } .content.collapsing { padding-left: 10px; padding-right: 10px; } /***************************************************************************** ADMIN */ #theme-contain-adminloginx { padding: 20px 15px; } #theme-contain-adminloginx input { padding: 5px 7px; border: 1px solid #666; margin: 5px auto; background-color: #fff; color: #000; } #theme-contain-adminloginx > p + table { max-width: 350px; margin: 0 auto; width: 90%; } #theme-contain-adminloginx > p + table > tbody > tr > td:nth-child(2) { padding-left: 10px; } #theme-contain-adminloginx table { border: 0 !important; } #theme-contain-adminloginx table td { border: 0 !important; } /***************************************************************************** MENU */ .icnMenu1 { background-image: url("/data/2076/uploads/icn-menu-12.png"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } .icnMenu2 { background-image: url("/data/2076/uploads/icn-menu-13.png"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } .icnMenu3 { background-image: url("/data/2076/uploads/icn-menu-16.png"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } .icnMenu4 { height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; } .icnMenu5 { height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; } .icnMenu6 { height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; } .icnMenu7 { height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; } .icnMenu8 { background-image: url("/data/2076/uploads/icn-menu-11.png"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } .icnMenu9 { background-image: url("/data/2076/uploads/icn-menu-15.png"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } .icnMenu10 { background-image: url("/data/2076/uploads/icn-menu-30.png"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } .icnMenu11 { background-image: url("/data/2076/uploads/icn-menu-38.webp"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } .icnMenu12 { background-image: url("/data/2076/uploads/icn-menu-17.png"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } .icnMenu13 { background-image: url("/data/2076/uploads/icn-menu-18.png"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } .icnMenu14 { height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; } .icnMenu15 { height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; } .icnMenu16 { background-image: url("/data/2076/uploads/icn-menu-referral.png"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } .icnMenu17 { background-image: url("/data/2076/uploads/icn-menu-19.png"); height: 20px; background-repeat: no-repeat; background-size: contain; float: left; margin: 0 6px 0 0; padding: 4px 0 0 30px; filter: brightness(0); } #cssmenu > ul > li:hover > a .icnMenu1, #cssmenu > ul > li:hover > a .icnMenu2, #cssmenu > ul > li:hover > a .icnMenu3, #cssmenu > ul > li:hover > a .icnMenu8, #cssmenu > ul > li:hover > a .icnMenu9, #cssmenu > ul > li:hover > a .icnMenu10, #cssmenu > ul > li:hover > a .icnMenu11, #cssmenu > ul > li:hover > a .icnMenu12, #cssmenu > ul > li:hover > a .icnMenu13, #cssmenu > ul > li:hover > a .icnMenu16, #cssmenu > ul > li:hover > a .icnMenu17 { filter: brightness(2); } .menulabel { display: none; } #menuContainer { border-right: #808080 1px solid; } #cssmenu { } #divMenu { } #divMenu.fade { } #cssmenu { position: static; } #cssmenu > ul { display: flex; white-space: nowrap; position: static; } #cssmenu > ul > li { float: none; position: static; } #cssmenu > ul > li > a { border: 0; border-bottom: 2px solid transparent; border-top: 2px solid transparent; position: static; text-align: center; font-size: 14px; padding: 10px 15px; color: #4c3814; text-transform: uppercase; transition: none; font-weight: bold; overflow: hidden; } #cssmenu > ul > li > a > img { height: 20px; filter: brightness(0); opacity: 0.7; } #cssmenu > ul > li.active > a { color: #000; background: transparent; } #cssmenu > ul > li.active > a > img { filter: brightness(0); opacity: 1; } #cssmenu > ul > li:hover > a > img { filter: brightness(0) invert(1); opacity: 1; } #cssmenu > ul > li:hover > a { color: #fff; background: #080808; background: linear-gradient(180deg,#222222 0%,#000000 100%); } #cssmenu > ul > li:hover > a > div { color: #fff; } #cssmenu > ul > li.has-sub > a::after { display: none; } #cssmenu li:nth-child(11) { display: block; } #cssmenu li:nth-child(12) { display: block; } #cssmenu li:nth-child(13) { display: none; } #cssmenu li:nth-child(14) { display: none; } #cssmenu li:nth-child(15) { display: none; } #cssmenu li:nth-child(16) { display: none; } #btn-fav { display: none; } #btn-setting { display: block; } #cssmenu ul ul { left: 0 !important; right: 0; position: absolute; z-index: 99; max-width: 1820px; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; opacity: 0; visibility: hidden; z-index: 999; } #cssmenu > ul > li:hover > ul, #cssmenu > ul > li > ul:hover { opacity: 1; visibility: visible; } #cssmenu ul ul:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100vw; background-color: rgba(0,0,0,.5); margin: auto; margin-left: 50%; transform: translateX(-50%); backdrop-filter: blur(5px); } #cssmenu ul li:hover > ul > li { height: auto; } #cssmenu ul ul li { height: auto; margin-bottom: 10px; width: 12.5%; } #cssmenu ul ul li:hover { height: auto; } #cssmenu ul ul li a { width: auto; background-color: transparent; } #cssmenu ul ul li a:hover { background-color: transparent; } #cssmenu ul ul li:hover > a { background-color: transparent; } @media screen and (min-width: 1024px) { #divMenu { display: block !important; background: linear-gradient(0deg, rgb(183 126 24) 7%, rgba(245,215,105,1) 46%, rgba(255,223,163,1) 63%, rgba(236,205,94,1) 100%); } #menuContainer { padding-left: 15px; padding-right: 15px; } #btnMenu { display: none; } #cssmenu > ul { background-image: none !important; padding-top: 0 !important; } #cssmenu > ul > li > a > img { margin-right: 5px; } #cssmenu > ul > li > ul { padding-bottom: 20px; max-width: 1400px; } #cssmenu > ul > li > ul:before { background-color: rgba(0,0,0,.8); } #cssmenu > ul > li > ul > li a { text-align: center; font-weight: 700; padding: 10px; } #cssmenu > ul > li > ul > li img { max-width: 160px; width: 100%; display: block; margin: auto; margin-bottom: 5px; } #cssmenu > ul > li > ul:hover a { color: #888; } #cssmenu > ul > li > ul a:hover { color: #fff; } #cssmenu > ul > li.active > a { border-bottom: 2px solid #080808; } #divMenu { display: block; position: static; opacity: 1; overflow: hidden !important; } #divMenu .modal-dialog { width: 100%; margin: 0; transition: none; transform: none; position: static; } .menuHeader { display: none !important; } #cssmenu > ul > li > ul:hover li { opacity: 0.6; } #cssmenu > ul > li > ul li:hover { opacity: 1; } } @media screen and (min-width: 1250px) { #menuContainer { padding-left: 50px; padding-right: 50px; } } @media screen and (max-width: 1500px) and (min-width:1249px) { #cssmenu > ul > li > a { font-size: 12px; } } @media screen and (max-width: 1250px) and (min-width:1024px) { #cssmenu > ul > li > a { padding-left: 6px !important; padding-right: 6px !important; font-size: 10px; } .btn-login, .btn-register { font-size: 12px; } } @media screen and (max-width: 1023px) { #divMenu { padding-left: 0 !important; overflow: hidden; } #divMenu ul { margin: 5px 5px; padding: 0; } #divMenu ul li { float: none; display: flex; flex-direction: column; list-style: none; } #divMenu ul li a { border: 0; color: #444; text-transform: capitalize; padding: 15px 20px; margin: 2px 0; font-size: 14px; line-height: normal; border-radius: 40px; } #divMenu ul li.active a { color: #000; background: linear-gradient(to bottom, #fef769, #e1b334); } #divMenu ul li a:hover { background-color: #eee; color: #000; transition: 0.2s; } #divMenu ul li a > img { margin-right: 10px; width: 18px; } #menuContainer { width: 100%; margin: 0; position: fixed; top: 0; left: 0; bottom: 0; margin: 0; z-index: 1050; max-width: 280px; background-color: #fff; overflow-y: auto; } #cssmenu { margin-bottom: auto; } #cssmenu, #menuadd { } #cssmenu > ul { } #cssmenu > ul { display: flex; flex-wrap: wrap; padding: 5px; margin: 0; white-space: normal; } #menuadd > ul { margin-top: -10px; } #cssmenu > ul > li { list-style-type: none; padding: 0; flex: 1 calc(33.33% - 4px); max-width: calc(33.33% - 4px); margin: 1px 2px; } #cssmenu > ul > li > a { text-transform: capitalize; border-radius: 0px; text-align: left; color: #fff; display: block; color: #000; display: flex; flex-direction: column; justify-content: space-between; height: 100%; font-size: 11px; padding: 7px; background: #eee; text-transform: none; border: 1px solid #eee; } #cssmenu > ul > li > a img, #menuadd > ul > li > a img { height: auto; width: 20px; margin-right: 10px; } #cssmenu > ul > li > a img { filter: brightness(0); margin-bottom: 0px; opacity: 1; } #cssmenu > ul > li:hover > a img { filter: brightness(2) invert(1); opacity: 1; } #cssmenu > ul > li:hover > a { background: #eee; border-color: #ffbd42; } #cssmenu > ul > li:active > a { background: #aaa; } #cssmenu > ul > li:active > a img { opacity: 1; } #cssmenu > ul > li > ul, #menuadd > ul > li > ul { display: none !important; } #cssmenu > ul > li:hover, #menuadd > ul > li:hover { } #cssmenu > ul > li:hover a, #menuadd > ul > li:hover a { } #divMenu .modal-dialog { transform: translate(-100%,0); transition: .15s; } #divMenu.in .modal-dialog { transform: translate(0,0); } .modal-menu.fade .modal-dialog { -webkit-transform: translate3d(0,-25%,0); transform: translate3d(0,-25%,0); } .modal-menu.fade:not(.in) .modal-dialog { -webkit-transform: translate3d(-25%,0,0); transform: translate3d(-25%,0,0); } #divMenu .modal-dialog { transition: transform .15s,opacity 0s; } #menuContainer { display: flex; flex-direction: column; justify-content: space-between; } #menuContainer #menuHead { order: -1; background: #333; padding: 20px 10px; text-align: center; } .menuhead-auth { display: flex; margin-top: 20px; } .menuhead-auth .auth-box { flex: 1; margin: 2px; } .menuhead-auth .auth-box .btn-login { width: 100%; } #menuadd > ul { display: block; padding: 5px; margin: 0; } #menuadd > ul > li { list-style-type: none; padding: 0; flex: 1 calc(33.33% - 4px); max-width: calc(33.33% - 4px); margin: 1px 2px; } #menuadd > ul > li > a { text-transform: capitalize; border-radius: 50px; padding-top: 15px !important; padding-bottom: 15px !important; margin-top: 3px; margin-bottom: 3px; text-align: left; padding-left: 20px !important; color: #fff; display: block; color: #000; } .add-menu > div { border-top: 1px solid #dbdbdb; } #divMenu p { line-height: normal; padding-top: 20px; padding-left: 20px; color: #888; font-size: 12px; } .nav-language { margin-left: 10px; margin-right: 10px; } .nav-language p { color: #aaa; } #divMenu .nav-language li { padding: 0; } #divMenu .nav-language li.active a, .nav-language .dropdown-menu .country a.active { background-color: #efefef !important; background-repeat: no-repeat; background-image: url('/data/1806/uploads/icn-checked.png'); background-position: right 15px center; background-size: 18px; pointer-events: none; cursor: default; } .nav-language .country { font-size: 10px; color: #aaa; padding-left: 15px; padding-top: 10px; } .nav-language .flag { width: 20px; margin-right: 5px; border-radius: 50%; border: 1px solid #aaa; } .nav-footer { line-height: normal; text-align: center; border-top: 1px solid #dbdbdb; padding: 20px 0 40px; background-color: #222; color: #fff; margin-top: 25px; font-size: 12px; } .nav-language .dropdownLanguage{ display:none !important;} .nav-language .dropdown-menu{position:static; display:block; border:0; box-shadow:none; float:none;} .nav-language .dropdown-menu .country{padding:0;} .nav-language .dropdown-menu .country .lang{padding-left:0 !important; display:block !important;} .nav-language .dropdown-menu .country a{display:block; padding:15px 20px !important;border-radius:40px; font-size:14px; color:#000 !important;} .nav-language .dropdown-menu .country a.active{color:#000;} .nav-language .dropdown-menu .country a:after{display:none;} } @media (min-width:1024px) { #cssmenu li:last-child.has-sub > ul a { font-size: 0; } } @media (max-width:1023px) { #cssmenu li:nth-child(10) { display: block; } #cssmenu li:last-child.has-sub { flex: 100%; max-width: 100%; margin: 0; } #cssmenu li:last-child.has-sub > a { display: none; } #cssmenu li:last-child.has-sub > ul { display: flex !important; !I; !; position: static; opacity: 1; visibility: visible; flex-wrap: wrap; justify-content: start; } #cssmenu li:last-child.has-sub > ul > li { width: 100%; margin-bottom: 0; flex: 1 1 calc(33.33% - 4px); ); ); ); ); ); max-width: calc(33.33% - 4px); margin: 1px 2px; } #cssmenu li:last-child.has-sub > ul:before { display: none; } #cssmenu li:last-child.has-sub > ul > li > a { color: #000; display: flex; flex-direction: column; justify-content: space-between; height: 100%; text-align: center; font-size: 11px; padding: 7px; background: #eee; text-transform: none; border: 1px solid #eee; border-radius: 0; /* margin: 2px; */ font-weight: bold; } #cssmenu li:last-child.has-sub > ul img { width: 35px; } #cssmenu li:last-child img { width: 35px; display: block; margin: auto; margin-bottom: 5px; } } /***************************************************************************** HEADER TOP */ .header-logo { position: relative; } .header-logo:after { background: linear-gradient(90deg,#b00022,#ff0031); content: ''; position: absolute; top: -15px; bottom: -15px; right: -35px; left: -85px; z-index: 1; transform: skewX(-20deg); border-bottom-right-radius: 30px; background: linear-gradient(to bottom,#980000,#4c0000); } .header-top { background: linear-gradient(180deg,#222222 0%,#000000 100%); } .headertop-wrapper { padding: 15px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #333; } img.logo { height: 75px; position: relative; z-index: 2; } @media screen and (min-width: 1250px) { .headertop-wrapper { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width:768px) { .header-top { position: relative; } .header-top.ontop { z-index: 9999; } } @media screen and (max-width:1023px) { .header-top { position: relative; } .headertop-wrapper { border-bottom: 1px solid #888; padding: 5px 5px; } img.logo { height: 50px; } } @media screen and (max-width:350px) { img.logo { height: 40px; } } .header-left { display: flex; align-items: center; } .header-left .header-icon { margin-left: 50px; display: flex; align-items: center; } .header-left .header-icon a { padding: 5px; margin: 5px; transition: transform 0.2s ease-in-out; display: block; } .header-left .header-icon a img { transition: transform 0.2s ease-in-out; width: 30px; height: 30px; } .header-left .header-icon a:hover img { transform: scale(1.2); } @keyframes mycart { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.15); } } .header-right { display: flex; align-items: center; } .div-auth { display: flex; align-items: center; } .btn-lr { display: block; padding: 12px 12px; border-radius: 6px; background: linear-gradient(to bottom, #fef769, #e1b334); line-height: normal; background: linear-gradient(#f8e153 0%,#db7c23 100%); } #header-login { background: none; text-decoration: underline; margin-right: 4px; color: #fff; } #header-login:hover { background: linear-gradient(to bottom, #888, #666); color: #fff; } #header-register { font-weight: bold; } #header-register:hover { background: linear-gradient(to bottom, #888, #666); color: #fff; } @media screen and (min-width:768px) { .header-left .header-icon { margin-left: 50px; } } @media screen and (max-width:1100px) and (min-width:769px) { .header-left { padding-left: 20px; } } @media screen and (max-width:1023px) { .btn-lr { font-size: 12px; padding: 10px 10px; } } @media screen and (max-width:600px) { .header-logo { margin-right: auto; } .headertop-wrapper { } .header-left { } .header-left .header-icon { } .header-left .header-icon a { margin: 0; } .header-left .header-icon a img { width: 20px; height: 20px; } .header-icon { max-width: 300px; overflow: hidden; margin-left: 0; } .header-icon.active { margin-left: 50px; } .header-right { } .div-auth .auth-login, .div-auth .auth-register, .div-auth .auth-language { display: none; } } @media screen and (max-width:320px) { .header-icon.active { max-width: 0px; } } /*** currency ***/ .auth-currency { } .currency { display: flex; align-items: center; margin-right: 5px; border-right: 1px solid rgba(255,255,255,0.5); padding-right: 15px; color: #ddd; font-size: 14px; } .currency img { width: 20px; filter: brightness(0.8); } .currency p { margin: 0; } @media screen and (max-width:1023px) { .currency { display: none; } } @media screen and (max-width:600px) { .currency { font-size: 10px; border-right: 0; } .currency img { width: 18px; } } /*** settings ***/ .settingboxwrapper { display: flex; align-items: center; border-radius: 50px; margin: 0 5px; } #togglesettings.open .settingboxwrapper { background-color: rgba(255,255,255,0.1); } #togglesettings img { width: 20px; height: 20px; filter: grayscale(1) brightness(2); transition: filter 0.2s ease-in-out; } #togglesettings .btn-settings:hover img, #togglesettings .btn-settings.active img, #togglesettings #btn-settingsbox:hover img { filter: grayscale(0) brightness(1); } .settingbox.open { } .settingbox .settingsbox { max-width: 0; transition: max-width 0.3s ease-in-out; } .settingbox.open .settingsbox { max-width: 250px; } .settingbox .settingsbox > div { margin: 0 10px; display: flex; overflow: hidden; } .settingbox .settingsbox .btn-settings { padding: 5px; margin: 0 2px; position: relative; } .i-count { } .i-count:after { content: attr(data-badge); position: absolute; top: 0px; right: 0px; background: #ff0000; border-radius: 50%; width: 14px; height: 14px; font-size: 9px; display: flex; justify-content: center; /*align-items: center;*/ font-style: normal; font-weight: bold; color: #fff; opacity: 0; } [data-badge]:not([data-badge=""]):after { opacity: 1; } #totalCount.i-count { display: none; } #btn-settingsbox { background: transparent; padding: 10px; border-radius: 50%; position: relative; background: transparent; } #btn-settingsbox:hover { box-shadow: inset 0 0 50px rgba(255,255,255,0.2); } #btn-settingsbox:active { box-shadow: inset 0 0 50px rgba(0,0,0,0.5); } #btn-settingsbox.btn-setting__open { background: rgba(255,255,255,0.1); } #btn-settingsbox img { transition: transform 0.3s ease-in-out; transform: rotate(0deg); } #btn-settingsbox.btn-setting__open img { transform: rotate(90deg); } @media screen and (min-width:1024px) { #togglesettings { padding-right: 5px; margin-right: 5px; position: relative; } #togglesettings:after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; height: 20px; width: 1px; background-color: rgba(255,255,255,0.5); margin: auto; pointer-events: none; } } @media screen and (max-width:600px) { .settingbox .settingsbox { transition: none; } .settingbox.open .settingsbox { transition: max-width 0.3s ease-in-out; } .settingbox .settingsbox .btn-settings { padding: 2px; } .modal-settings .modal-dialog { padding: 0 !important; } } .modal-settings .modal-dialog { } .div-login, .register { border-radius: 20px; background: #faf7f2 !important; box-shadow: 5px 5px 10px rgba(0,0,0,0.3); padding: 10px; } .modal .div-login, .modal .register { box-shadow: none; margin-top: 0; padding: 0; } /***************************************************************************** LOGIN */ .modal-login { } .modal-login button.close { opacity: 1; } .modal-login .modal-dialog, .modal-register .modal-dialog { background-color: #fff; border-radius: 20px; padding: 15px; } .modal-lr .login-title { display: none; } .mlr-top { text-align: center; } .modal-filter { display: flex; margin: auto; margin-bottom: 30px; max-width: 300px; border: 1px solid rgba(0,0,0,0.4); border-radius: 50px; background: #fff; text-align: center; align-items: center; overflow: hidden; } .btn-mlr { flex: 1; text-align: center; color: #000; padding: 10px 0px; background: transparent; } .btn-mlr.active { background: linear-gradient(to bottom, #fef769, #e1b334); } .login-logo { width: 120px; margin-bottom: 20px; } .modal-login .div-login { padding: 0; } .modal-login .popup-wrapper { background-color: transparent; padding: 0; } .mlr-bottom { padding: 15px 10px 20px; font-size: 12px; text-align: center; max-width: 600px; margin: auto; } #loginModal .mlr-bottom p { color: #ddd; } #registerModal .mlr-bottom p { color: #333; } .modal .mlr-bottom { border-top: 1px solid rgba(0,0,0,0.2); margin: 30px auto 15px; max-width: 1000px; } .modal .mlr-bottom > * { max-width: 600px; margin: auto; } #loginModal > div.modal-dialog { background: linear-gradient(90deg,#b00022,#ff0031); border: 2px solid #55586c; border-bottom-color: #fe284a; box-shadow: 0 8px 10px #000; background: linear-gradient(to bottom,#980000,#4c0000); } #loginModal > div.modal-dialog .close span { color: #fff; } #registerModal > div.modal-dialog { background: linear-gradient(90deg,#b00022,#ff0031); border: 2px solid #55586c; border-bottom-color: #fe284a; box-shadow: 0 8px 10px #000; background: linear-gradient(to bottom,#980000,#4c0000); } #registerModal > div.modal-dialog .close span { color: #fff; } @media screen and (max-width:550px) { #loginModal, #registerModal { padding-left: 0 !important; background: #fff; } #loginModal .modal-dialog, #registerModal .modal-dialog { padding: 0; border-radius: 0; margin: 0; height: 100%; } .modal-login button.close, .modal-register button.close { padding: 20px; position: absolute; top: 0; right: 0; } #loginModal .div-login, #registerModal .div-login { border-radius: 0; } #loginModal .popup-wrapper, #registerModal .popup-wrapper { height: 100%; } .mlr-container { height: 100%; padding-top: 20px; } .mlr-container #subcontent { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .customform { margin-bottom: auto; } .modal-filter { max-width: 200px; } .btn-mlr { font-size: 0.8em; } } .customform { padding: 20px 20px 0; max-width: 450px; margin: 30px auto 0; } .customform dd { text-align: center; display: flex; align-items: center; border: 1px solid rgba(0,0,0,0.2); border-radius: 6px;} .customform i { padding-left: 15px; padding-right: 15px; position: relative; } .customform i:after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; height: 90%; width: 1px; background: rgba(0,0,0,0.2); } .customform i img { width: 22px; } .customform input { width: 100%; text-align: left; padding: 10px 15px; margin: 5px 0; color: #000;} #customform_UserName { } #customform_Password { } #customform_UserName, #customform_Password { } #customform_submit { color: #fff; font-weight: bold; transition: background 0.3s ease-in-out, color 0.3s ease-in-out; border-radius: 6px; text-align: center; font-size: 18px; background: rgba(0,0,0,0.4); margin: 0; } #customform_submit:hover { background: linear-gradient(to bottom, #fef769, #e1b334); color: #000; } #customform_submit:active { box-shadow: 0 0 50px rgba(255,255,255,0.4); } #customform_submit, #loginformsubmit{padding-top:10px; padding-bottom:10px;} .form-title { margin: 5px; font-weight: bold; color: #fff; text-align: left; } .login-title { text-align: center; } .login-bottom { padding: 50px 0 50px; border-top: 1px solid #888; margin-left: 25px; margin-right: 25px; text-align: center; color: #888; } .login-bottom a { border-radius: 6px; background-color: #e5ba5d; color: #000; border: 2px solid #e5ba5d; display: inline-block; padding: 12px 40px; font-weight: bold; margin: 20px 0; } .login-bottom a:hover { background-color: #000; color: #e5ba5d; } #theme-contain-login, #theme-contain-registration { padding: 0 15px 25px; margin-top: 25px; } .div-login { max-width: 600px; margin: 0 auto; width: 100%; background-color: transparent; border-radius: 20px; padding: 0; padding-bottom:20px;} .login-title { padding-top: 25px; } @media screen and (max-width:550px) { #theme-contain-login, #theme-contain-registration { background: #fff; } #theme-contain-login .div-login, #theme-contain-registration .register { box-shadow: none; padding: 0px; padding-top: 25px; margin-top: 0px; } } /***************************************************************************** REGISTER */ .modal-register .modal-dialog { max-width: 800px; width: 100%; } .register { max-width: 1000px; margin: auto; } .register-form { } #registerform { width: 100%; padding: 0px 40px; 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: #000; font-size: 12px; margin-bottom: 5px; font-weight: normal; } #registerform dd { position: relative; } #registerform textarea, #registerform input[type=text], #registerform input[type=password], #registerform input[type=email], #registerform select, #registerform #registerform_DOB { width: 100%; color: #000; font-size: 14px; padding: 10px 10px; background-color: #fff; padding-left: 20px; border: 1px solid #aaa; border-radius: 6px; } #registerform textarea:focus, #registerform input[type=text]:focus, #registerform input[type=password]:focus { border-color: #e5ba5d; } #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%; color: #e5ba5d; } #groupUsername .icnR { top: 5px; } #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; margin-left: 10px; } #registerform #registerform_varifycode { width: calc(100% - 115px); float: left; } #registerform .btnCheckUser, #registerform_btnSubmit { color: #000; font-weight: bold; padding: 8px 12px; font-size: 14px; text-transform: uppercase; margin: 6px 0; background: linear-gradient(to bottom, #fef769, #e1b334); } #registerform .btnCheckUser:hover, #registerform_btnSubmit:hover { } #registerform .btnCheckUser:active, #registerform_btnSubmit:active { } #groupSubmit { text-align: center; } #registerform_btnSubmit { padding: 15px 75px; cursor: pointer; border-radius: 15px; } #registerform:after { font-size: 10px; color: #fff; } #groupVerifyCode dd:last-child { position: static; } #groupVerifyCode img { margin-left: 15px; } .small { font-size: 12px; } .w3-text-red { color: #ff5858; } .divRegister-box { background-color: #fff; } .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; } .affiliate-content { background-image: linear-gradient(218deg,#ff7134 11.82%,#f73b00 90.79%); -webkit-box-shadow: -4px 4px 12px rgba(0,0,0,.25), 4px -4px 12px rgba(255,255,255,.16), 0 2px 0 #bc2200, inset -2px 2px 4px #ff7e36, inset 2px -2px 4px #e21b00; box-shadow: -4px 4px 12px rgba(0,0,0,.25), 4px -4px 12px rgba(255,255,255,.16), 0 2px 0 #bc2200, inset -2px 2px 4px #ff7e36, inset 2px -2px 4px #e21b00; padding: 20px; margin: 20px 0; } #registerform_FullNameDescription { color: #ff5858; padding-top: 5px; } @media screen and (max-width: 1024px) { #registerform { padding: 0 25px 25px; } } @media screen and (min-width: 768px) { #groupPassword, #groupComfirmPassword, #groupMobileNumber, #groupCurrency, #groupAffiliate, #groupReferralCode, #groupEmail { flex: 1 1 50%; max-width: 50%; } #groupPassword, #groupEmail { padding-right: 15px; } #groupComfirmPassword, #groupMobileNumber, #groupReferralCode, #groupAffiliate { padding-left: 15px; } } @media screen and (min-width: 767px) { .imgRegister-window { margin-left: 50%; transform: translateX(-50%); } .note { font-size: 11px; width: 550px; } .small { font-size: 11px; } } @media screen and (max-width: 766px) { .modal-register .modal-content { border: 0; border-radius: 0; } .registration-wrapper { padding: 0; } .divRegister-box { padding: 0; } .register-box-wrapper { border-radius: 0; } .register-logo { top: auto; left: 10px; right: auto; } .register-logo img { height: 50px; } .div-register { border-radius: 0; margin: 0; } } @media screen and (max-width: 768px) and (min-width:608px) { #registerform { flex-wrap: wrap; flex-direction: row; } #registerform_btnSubmit { padding: 15px 35px; } .note { position: absolute; width: 535px; font-size: 11px; } .small { font-size: 11px; } } @media screen and (max-width: 766px) { #registerform { } #registerform .btnCheckUser { font-size: 3vw; } #registerform_btnSubmit { margin: 25px auto 0; width: 100%; padding-left: 0; padding-right: 0; } #groupUsername dd #registerform_UserName { width: 100%; } #groupPassword { position: relative; } #registerform_Password:focus { margin-bottom: 37px; } #registerform_Password:focus + .note { display: block; margin-top: -37px; } #registerform input.btnCheckUser { font-size: 10px; } .register-logo { display: none; } } /****** modal settings */ .modal-settings { } .modal-settings .modal-dialog { transform: translate(100%, 0); transition: transform 0.3s ease-in-out; } .modal-settings.in .modal-dialog { transform: translate(0, 0); } .modal-settings .modal-dialog { margin: 0; margin-left: auto; height: 100%; } .modal-settings .modal-dialog .popup-wrapper { background: #333; min-height: 100%; color: #fff; } .modal-settings .close { float: none; } .settings-head { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 10px; position: relative; } .settings-head .close { font-size: 1.6em; margin-right: 5px; transform: none !important; color: #fff; } .settings-head h4 { margin: 0; } .modal-settings h4 { color: #fff; } .settings-body { padding: 15px; } .fav-filter { display: flex; } .btn-ffav { border-radius: 0; flex: 1; text-align: center; padding: 8px 10px; color: #fff; background: rgba(0,0,0,0.4); border-bottom: 2px solid rgba(0,0,0,0.4); font-size: 0.9em; display: flex; justify-content: center; align-items: center; } .btn-ffav:hover { box-shadow: inset 0 0 50px rgba(255,255,255,0.2); } .btn-ffav:active { box-shadow: inset 0 0 50px rgba(0,0,0,0.2); } .btn-ffav.active { background: #f3de55; border-color: #ffbd42; box-shadow: none; color: #000; } .btn-ffav:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .btn-ffav:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .btn-ffav:not(:first-child) { margin-left: 2px; } .ffav-count { font-style: normal; margin-left: 2px; font-size: 12px; } .modal-settings .dropdown-menu { left: 0; } .settingsList { } .settingsList ul { margin: 0; display: flex; flex-wrap: wrap; } .settingsList ul > li { list-style-type: none; padding: 5px; flex: 1; max-width: 50%; } .settingsList .dropdown-toggle { background: rgba(0,0,0,0.2); margin-left: 0 !important; } .settingsList .dropdownLanguage p { display: block; font-size: 10px; } @media screen and (max-width:768px) { } @media screen and (max-width:767px) { .settingsList ul > li { max-width: 100%; } .settings-head .close:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } } /*** noti ***/ .noti-top { display: flex; justify-content: space-between; } #btn-clearnoti { color: #fff; background: transparent; font-size: 0.8em; padding: 10px; margin-left: auto; } #btn-clearnoti:hover { background: rgba(255,255,255,0.1); } #noti-list { margin: 0; } #noti-list > li { list-style-type: none; } .noti-item { display: block; border-radius: 6px; position: relative; padding: 10px 15px; margin: 8px 0; color: #fff !important; font-size: 0.8em; cursor: pointer; } .noti-item[data-status="unread"] { background: rgba(255,255,240,0.2); } .noti-item[data-status="unread"]:hover { box-shadow: inset 0 0 50px rgba(255,255,240,0.2); } .noti-item[data-status="unread"]:active { box-shadow: inset 0 0 50px rgba(0,0,0,0.1); } .noti-item[data-status="unread"]:after { content: ''; position: absolute; top: -2px; right: -2px; border-radius: 50px; width: 10px; height: 10px; background: #ff0000; } .noti-item[data-status="read"] { background: rgba(0,0,0,0.2); } /*** language ***/ .dropdown.language > a { padding: 12px 10px; display: block; color: #fff; cursor: pointer; border-radius: 5px; margin-left: 5px; } .dropdown.language > a:hover, .dropdown.language > a:active, .dropdown.language > a:focus { box-shadow: inset 0 0 50px rgba(255,255,255,0.2); } .dropdown.language > a img { max-height: 18px; } .dropdownLanguage p { display: none; } .dropdown-menu { min-width: 250px; padding-left: 5px; padding-top: 10px; z-index: 9999999; } .dropdown-menu .country { margin-bottom: 15px; } .dropdown-menu .country img.flag { height: 20px !important; max-height: 30px !important; margin: 5px 5px 5px 10px; border-radius: 50%; border: 1px solid #aaa; } .dropdown-menu .country a { padding: 5px 20px; position: relative; color:#000;} .lang-main { display: flex; align-items: center; justify-content: space-between; } .lang-main img { margin-right: 5px; } .lang-main span { margin-right: 5px; } .lang-main i { margin-left: auto; margin-right: 0; } .dropdown-menu .country a:after { content: ''; position: absolute; top: 0; bottom: 0; height: 14px; left: 0; width: 1px; background-color: #aaa; margin: auto; } .dropdown-menu .country a:first-child:after { display: none; } .dropdown-menu .country a.active { color: #fc0002; } .dropdown-menu .country a:hover { text-decoration: underline; } .dropdown-menu .country .name { font-size: 10px; color: #aaa; } .dropdown-menu .country .lang { display: flex; padding-left: 20px; } /*** theme choose ***/ .themechoosewrapper { display: flex; justify-content: center; align-items: center; } .btn-theme { flex: 1 calc(50% - 20px); max-width: calc(50% - 20px); margin: 10px; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,0.3); } .btn-theme img { width: 100%; } .btn-theme.active img { filter: blur(5px); } .btn-theme.active:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 2; background-image: url('/data/2076/uploads/icn-check.png?1'); background-repeat: no-repeat; background-position: center; background-color: rgba(0,0,0,0.3); } /*** btn menu ***/ .btn-menu { background-color: transparent; border: 0; outline: 0; padding: 8px; position: relative; z-index: 2; } .text-menu { color: #fff; text-transform: uppercase; } .btn-menu { position: relative; padding: 12px 6px; } .btn-menu span { width: 25px; height: 3px; display: block; margin-top: 4px; margin-left: 0; margin-bottom: 4px; margin-right: 0; background-color: #f6e5a5; border-radius: 4px; transition: transform 0.3s linear; transition: 0.3s linear, 0.3s linear; } .btn-menu span:nth-child(1) { } .btn-menu span:nth-child(2) { width: 20px; } .btn-menu span:nth-child(3) { width: 15px; } .btn-menu.active span:nth-child(1) { -webkit-transform: translate(0px, 8px) rotate(45deg); transform: translate(0px, 8px) rotate(45deg); } .btn-menu.active span:nth-child(2) { width: 25px; -webkit-transform: translateX(10px); transform: translateX(10px); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .btn-menu.active span:nth-child(3) { width: 25px; -webkit-transform: translate(0px, -8px) rotate(-45deg); transform: translate(0px, -8px) rotate(-45deg); } /**************************************************************************************************************************** HEADER DOWNLOADS */ .sectiondownload { background-color: #000; border-bottom: 1px solid #444; color: #fff; } .close-sd { padding: 0; background-color: transparent; margin-left: 5px; border-radius: 5px; } .close-sd:hover { background-color: rgba(0,0,0,0.1); } .close-sd:active { background-color: rgba(0,0,0,0.5); } .close-sd:active span { background-color: #fff; } .close-sd > div { padding: 10px 5px; } .close-sd span { width: 15px; height: 3px; border-radius: 5px; background: #aaa; display: block; } .close-sd:hover span { background: #fff; } .close-sd span:first-child { transform: translateX(-1px) rotate(-45deg) translateY(2px); } .close-sd span:last-child { transform: translateX(-1px) rotate(45deg) translateY(-2px); } .sd-main { display: flex; justify-content: space-between; align-items: center; } .sdm-left { font-size: 10px; display: flex; justify-content: flex-start; align-items: center; } .sdm-logo { height: 50px; margin: 0 10px; } .sdm-show { background: #ffbd42; display: flex; border-radius: 6px; padding: 5px 10px; margin-right: 10px; font-size: 11px; color: #000 !important; } .sd-download { } .sd-download ul { margin: 0; display: flex; } .btn-sd { list-style-type: none; padding: 0; } .btn-sd a { background: #ffbd42; display: flex; border-radius: 6px; justify-content: center; align-items: center; padding: 3px 10px; margin: 0 2px; text-align: center; } .btn-sd a img { width: 20px; filter: invert(0.8); } .btn-sd .btnsf-content { display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; margin-left: 5px; } .btn-sd p { margin: 0; font-weight: bold; font-size: 13px; } .btn-sd span { font-size: 8px; } .btn-sd a:hover { background: #444; } .btn-sd a:hover img { filter: invert(0); } @media screen and (min-width:768px) { .sectiondownload { display: flex; justify-content: space-between; align-items: center; padding-right: 10px; } .sdm-right { display: none; } } @media screen and (max-width:1023px) and (max-width:768px) { .sdm-logo { height: 35px; } .btn-sd a img { width: 18px; } } @media screen and (max-width:767px) { .btn-sd { flex: 1; } .sd-download { transition: max-height 0.2s ease-in-out; max-height: 0; overflow: hidden; } .sd-download.show { max-height: 100px; } .sd-download ul { padding: 10px; } .btn-sd a { padding: 8px 0; } } @media screen and (max-width:410px) { .btn-sd a { display: block; height: 100%; } .btn-sd a img { margin-bottom: 4px; } .btn-sd p { font-size: 11px; } .btn-sd a img { width: 25px; } .btn-sd span { display: none; } } /**************************************************************************************************************************** FOOTER */ } .divfooter { background-color: #303030; padding-bottom: 10px; } #divFooter-logo { padding: 10px 0; } #divFooter-logo > div { border-top: 1px solid #636363; padding-top: 20px; } #divFooter-info { color: #cccacb; font-size: 12px; padding: 10px 0 25px; } #divFooter-info a { color: #cccacb; } #divFooter-info .section { display: flex; border-top: 1px solid #636363; } #divFooter-info .section:not(:last-child) { padding-bottom: 25px; } #divFooter-info .section > div { flex: 1; } #divFooter-info h3 { color: #ffbd42; font-size: 16px; font-weight: bold; margin-top: 20px; margin-bottom: 10px; } .footer-link { } .footer-link > ul { margin: 0; flex-direction: column; column-count: 2; } .footer-link > ul > li { list-style-type: none; padding: 5px 0; } .footer-link > ul > li > a { border-left: 1px solid #808490; padding: 2px 10px; } .footer-link > ul > li > a:hover { color: #fff !important; border-color: #fff; } .footer-contact { } .footer-contact > div { padding: 5px; } .footer-contact img {width:20px; height: 20px; margin-right: 5px; } .footer-contact a { } .footer-contact a:hover { text-decoration: underline; } .footer-copyright { background-color: #1e181d; text-align: center; padding: 5px 0; color: #fff; font-size: 12px; padding-top: 5px; padding-bottom: 5px; display: block !important; } .f-sm { width: 33.3333%; float: left; } .f-sm a { margin: 0 2px; } .f-sm img { border-radius: 50%; } .f-pm { width: 33.3333%; float: left; } .f-pm img { height: 100px; margin: 0 5px; } .f-gl { width: 33.3333%; float: left; } .float-right{top:15%;} } @media screen and (max-width: 1023px) { #divFooter-info .section { display: block; padding-left: 20px; padding-right: 20px; } .footer-link > ul { column-count: 4; } .f-sm, .f-pm, .f-gl { text-align: left; padding-top: 10px; } } @media screen and (max-width: 400px) { .footer-link > ul { column-count: 3; } } @media screen and (max-width: 600px) { #divFooter-info .section{display:block; padding:10px;} } .divfootertcontent-wrapper { } .fc-box { padding: 10px; flex: 1; } .fcc-box { border-top: 1px solid #ffbd42; } .fcontent-ul { margin: 0; } .fcontent-title { color: #ffbd42; font-size: 14px; margin-bottom: 20px; } .fcontent-detail { list-style-type: none; padding: 5px; color: #ddd; } .fcontent-mini { color: #ffbd42; text-align: left; font-weight: bold; margin-top: 15px; font-size: 12px; } .fcontent-details { font-size: 11px; text-align: justify; } .fcc-box::-webkit-scrollbar { width: 0px; height: 0px; } .logo-paggor{width:158px; height:50px;} @media screen and (min-width:1024px) { .divfootertcontent-wrapper { display: flex; } } @media screen and (max-width:767px) { .fcc-box { overflow-x: auto; } .fcontent-ul { display: flex; } .fcontent-detail { background-color: rgba(255,255,255,0.1); border-radius: 6px; margin-top: 10px; margin-bottom: 0px; margin-right: 10px; padding: 5px 10px; } .fcontent-detail p { width: 65vw; } } /**************************************************************************************************************************** BODY */ .flexslider { margin: 0; border: 0; } .divBanner { height: 37.2vw !important overflow-x:hidden;} .flexslider .slides img{ height: 37.2vw !important; /*aspect-ratio: 320 / 119;*/ } .flex-direction-nav { height: 0; } .divHome-download { background: #f6f8fe url(/data/2076/uploads/bg-live-casino.webp) no-repeat top; background-size: 100% 100%; } #divHome-announce { background: linear-gradient(180deg,#222222 0%,#000000 100%); padding: 10px 10px; color: #fff; } #horizontal-scrolling-msg { } #horizontal-scrolling-msg ul { margin-bottom: 0; margin-top: 0; } #horizontal-scrolling-msg li { list-style-type: none; } /*--- home highlight video ---* .video-container { background-color: #000; } .video-container .html5gallery-container-0 { width: 100% !important; height: 432px !important; } .video-container .html5gallery-box-0 { left: 0 !important; top: 0 !important; right: 0; bottom: 0; margin: auto; width: 100% !important; height: 100% !important; } .video-container .html5gallery-elem-0 { background: #000; padding: 0 !important; width: 100% !important; height: 100% !important; } .video-container iframe { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .video-container #html5gallery-elem-video-0 { top: 0 !important; left: 0 !important; right: 0; bottom: 0; margin: auto; width: 100% !important; height: 100% !important; } @media screen and (max-width:767px) { .video-container { padding: 10px; } } */ /*--- home highlight video ---*/ .home-promo { padding-top: 25px; padding-bottom: 20px; } .video-container { background-color: #000; } .video-container .html5gallery-container-0, .video-container .html5gallery-container-1 { width: 100% !important; height: auto !important; } .video-container .html5gallery-elem-0, .video-container .html5gallery-elem-1 { border: 0 !important; box-shadow: none !important; } .video-container .html5gallery-car-1 { display: none !important; } .video-container iframe { height: 100%; } @media screen and (max-width:767px) { .video-container { padding: 10px; } } @media screen and (max-width:600px) { .video-container { padding: 0px; } } @media (max-width: 1023px) { .hpromo-right { /* display: block !important; */ } .video-container{max-width: 480px; margin: auto;padding-top: 20px;max-height: 290px;width: 100%;height: 100%;}} @media (min-width: 1024px) { .video-container .html5gallery { height: auto !important; } .home-promo{padding-left:20px; padding-right:20px;} } /******/ .jackpot { text-align: center; } .jackpothead { font-weight: bold; color: #444; background: #111; background: linear-gradient(to bottom, #111 0%, #666 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 5rem; font-family: Bebas; margin-bottom: 5px; margin-top: 20px; } .count-jackpot { text-align: center; background-size: 100% 100%; padding: 30px 20px 40px; color: #fdda96; font-weight: bold; background-repeat: no-repeat; } .count { font-size: 2em; } .count #foo { font-size: 2em; } .jackpotfoot { background: linear-gradient(to bottom, #545454, #111); padding: 10px 40px; display: table; margin: auto; margin-top: -20px; border-radius: 10px 10px 30px 30px; color: #fdda96; font-weight: bold; position: relative; z-index: 2; } .steps { margin-top: 20px; } .steps ul { margin: 0; padding-left: 15px; padding-right: 15px;; display: flex; align-items: center; justify-content: space-evenly; } .steps li { list-style-type: none; flex: 1; text-align: center; } .steps li.steps-next img { width: 20px; } .steps li p { font-size: 12px; color: #888; } .steps li img { width: 50px; } .steps li h4 { margin: 0; margin-top: 10px; font-size: 16px; } @media screen and (min-width:1024px) { .hometops-wrapper { display: flex; justify-content: center; /* align-items: center; */ } .hometops-wrapper > div:first-child { /*margin-right: 10px;*/ } .hometops-wrapper > div:last-child { margin-left: 10px; } .hometops-wrapper > div { flex: 1; max-width: 95%; } } @media screen and (max-width:1023px) { .hometops-left { padding: 15px; } } @media screen and (max-width:767px) { .count { font-size: 1em; } .steps li p { font-size: 8px; } .steps li h4 { font-size: 10px; } .jackpotfoot { font-size: 0.6em; } } /*--- HOME TOP Games ---*/ .hometops-games { } .topsgames-filter-container { position: relative; display: flex; background: linear-gradient(180deg,#222222 0%,#000000 100%); box-shadow: 0 2px 6px 0 rgb(0 0 0 / 50%); border-bottom: 1px solid #373d4a; } .topsgames-filter { flex: 12; } .gl-next, .gl-prev { background-size: 12px auto; width: 40px; position: static; margin-top: 15px; flex: 1; } .gl-next { } .gl-next { } .btn-gl { padding: 15px 20px; border-bottom: 1px solid transparent; background-color: transparent; } .btn-gl:hover { } .btn-gl:active { } .btn-gl.active { } .gl-item .game-title { margin-top: 10px; margin-bottom: 0; font-weight: normal; font-size: 0.8em; min-height: 25px; } .topsgames-wrapper { display: flex; flex-wrap: wrap; } @media screen and (min-width:1024px) { .hometops-games { display: flex; flex-direction: column; } .tops-container { height: 100%; border: 1px solid rgba(0,0,0,0.2); background: #222; border-radius: 10px; padding: 10px 0 0 0; box-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d; } .topsgames-filter { } .btn-gl { color: #888; } .btn-gl:hover { color: #eee; } .btn-gl:active { color: #aaa; } .btn-gl.active { color: #ffbd42; border-color: #ffbd42; } .topsgames-box { overflow-y: auto; height: 550px; border-top: 2px solid rgba(255,255,255,0.1); } .gl-item { flex: 1 calc(12.5% - 10px); max-width: calc(12.5% - 10px); margin: 5px; } .gl-item .game-item { padding: 10px; background: rgba(255,255,255,0.1); } .gl-item .game-item-hover { position: static; opacity: 1; visibility: visible; background: transparent; } .gl-item .game-item .i-fav { } .gl-item .btn-pn { position: absolute; top: 40%; margin: auto; transform: none !important; opacity: 0; transition: opacity 0.2s ease-in-out; } .gl-item:hover .btn-pn { opacity: 1; } .gl-item .game-item img { transition: filter 0.2s ease-in-out; /*aspect-ratio: 133 / 191;*/ height:13.28vw;} .gl-item .game-item:hover img { opacity: 0.6; } } @media screen and (max-width:1023px) { .topsgames-box::-webkit-scrollbar { width: 0px; /*height: 0px;*/ } .topsgames-filter-container { padding: 0 10px; border-bottom: 1px solid #aaa; } .gl-next, .gl-prev { filter: invert(1); } .btn-gl { padding: 7px 10px; background: transparent; color: #aaa; font-size: 0.8em; border-top-left-radius: 10px; border-top-right-radius: 10px; } .btn-gl:hover { box-shadow: rgba(0,0,0,0.1); } .btn-gl:active { box-shadow: rgba(0,0,0,0.2); } .btn-gl.active { background: #222; color: #fff; } .topsgames-box { overflow-x: auto; } .topsgames-wrapper { flex-direction: column; } .game-item { } .gl-item { margin: 0 5px; margin-right: 20px; width: 80%; } .gl-item .game-item { padding: 5px; border-bottom: 1px dashed #ccc; } .gl-item .game-item img { } .gl-item .game-item-hover { position: static; opacity: 1; visibility: visible; background: transparent; } .gl-item .game-item-hover h3 { color: #000; text-align: left; } .gl-item .game-item .i-fav { opacity: 1; } .gl-item .btn-pn { } } @media screen and (min-width :768px) and (max-width: 1024px) { .gl-item { width: 40%; } } @media (max-width:480px) { .game-item img { height: 40.4vw; /*aspect-ratio: 30 / 43;*/ } } /*--- HOME TOP Games ---*/ .homecat-container { width: 100%; } .homecat-swiper ul { margin: 0; } .homecat-swiper li { list-style-type: none; padding: 0; } .cat-box { position: relative; background-size: cover; background-repeat: no-repeat; margin-top: 20px; border: 1px solid #888; border-radius: 20px; display: block; } .catbox-detail { width: 60%; color: #fff; text-shadow: 2px 2px 2px #000; position: absolute; top: 0px; bottom: 0; left: 0; padding-left: 15px; } .catbox-detail h4 { color: #fff; } .catbox-detail p { font-size: 12px; } .catbox-img { margin-top: -20px; text-align: right; } .catbox-img img { width: 60%; } @media screen and (max-width:1023px) { .homecat-container { padding-left: 10px; } } /*--- Home HOT Games ---*/ .games-container .swiper-slide { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; color: #fff; border-radius: 10px; } /*.games-container .swiper-slide img { width: 100%; }*/ .games-container .swiper-slide:hover img { } .games-container .swiper-slide p { margin-bottom: 20px; color: #000; font-size: 14px; } .game-item { position: relative; overflow: hidden; border-radius: 10px; color: #fff; border: 1px solid rgba(0,0,0,0.6); text-align: center; } .game-item img { transition: filter 0.2s ease-in-out; width: 100%; } .game-item:hover img { filter: blur(2px); } .game-title { color: #fff; font-size: 1em; text-align: center; } .game-item:hover { } .game-item-hover { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); transition: 0.2s ease-in-out; opacity: 0; visibility: hidden; } .game-item:hover .game-item-hover { opacity: 1; visibility: visible; } .i-fav { position: absolute; top: 10px; left: 10px; width: 25px; height: 25px; background-image: url('/data/2076/uploads/icn-unstar.png'); background-repeat: no-repeat; background-position: center; background-size: 80% 80%; z-index: 3; opacity: 0; transition: 0.2s ease-in-out; cursor: pointer; } .game-item:hover .i-fav { opacity: 1; } .i-fav:hover { transform: scale(1.2); } .i-fav:active { transform: scale(1); } .i-fav.active { background-image: url('/data/2076/uploads/icn-starred.png'); opacity: 1; } .btn-pn { position: relative; display: block; margin: 20px auto 0; font-size: 0.8em; color: #000; background: linear-gradient(180deg,#f1b521 0%,#b86e16 100%); border-radius: 5px; padding: 10px; transition: transform 0.2s ease-in-out; transform: translateY(-20px); z-index: 4; } .btn-pn:after { content: attr(data-content); pointer-events: none; } .game-item:hover .game-item-hover .btn-pn { transform: translateY(0); } #fav-body { display: flex; flex-wrap: wrap; margin-top: 10px; } #fav-body .game-item { flex: 1 1 calc(33.33% - 10px); max-width: calc(33.33% - 10px); margin: 5px; } .titlebox { display: flex; justify-content: space-between; align-items: center; margin: 0px 10px 0; } .titlebox h3 { font-size: 16px; margin:0; } .titlebox h4 { font-size: 16px; margin:0;} .titlebox a { padding: 6px 10px; color: #222; display: block; border-radius: 6px; position: relative; z-index: 9; } .titlebox a:hover { background: #ffbd42; } @media screen and (max-width:1023px) { .games-wrapper { padding: 0 10px; } .game-item { display: flex; border: 0; padding: 5px; border-radius: 0; } .home-games .game-item-hover h3 { color: #000; text-align: left; } .game-item-hover h3 { margin: 0; } .game-item-hover { position: static; opacity: 1; visibility: visible; background: transparent; justify-content: space-evenly; align-items: initial; width: 100%; } .game-item img { width: 40%; filter: none !important; border-radius: 10px; margin-right: 10px; } .btn-pn { margin-left: 0; } .i-fav { left: auto; right: 5px; top: 5px; opacity: 1; } .games-container .swiper-slide .game-item { background: #fff; border-radius: 10px; } #fav-body .game-item { flex: auto; max-width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 0 0 10px; } #fav-body .game-item img { width: 30%; } #fav-body .game-item-hover h3 { text-align: left; } .btn-pn { transform: none; width: auto; } } @media screen and (max-width:599px) { .hpromo-pagination { bottom: -10px; } .games-container .swiper-slide p { font-size: 10px; } } /*--- Home promo ---*/ #faq_modal { margin: 0; } #faq_modal li { list-style-type: none; } #faq_modal li .promot img { width: 100%; } .home-promo { margin-bottom: 20px; } .home-promo ol#faq_modal { display: flex; flex-wrap: nowrap; padding: 0; } .hpromo-left #faq_modal li { padding: 0px; border: 0 !important; max-width: 100%; flex: none; } .hpromo-left .promot { padding: 0; border-radius: 0; box-shadow: none; background: transparent; } .hpromo-left .promot > a { max-width: 100%; } .hpromo-left .promo-i { max-width: 100%; } .hpromo-left .promo-i div { display: none; } .hpromo-left .promo-d { display: none !important; } .hpromo-left .divdate { display: none !important; } .hpromo-left .filterDiv { display: block; } .hpromo-right { position: relative; margin-left: 10px; /*border-radius: 10px; */ /*box-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;*/ } .hpromo-tag { position: absolute; top: -9px; right: 15px; } .hpromo-img { display: flex; border-radius: 20px; background-size: cover; } .hpromo-img img { margin-top: -25px; width: 100%; } .hpromo-container { } .hpromo-left { position: relative; } .hpromo-pagination { bottom: -5px; right: 10px; position: absolute; z-index: 9; } .hpromo-pagination .swiper-pagination-bullet { border: 1px solid #b1b1b1; margin: 1px; background: #b1b1b1; opacity: 1; } .hpromo-pagination .swiper-pagination-bullet-active { background: #000 !important; border-color: #000 !important; } .hpromo-container #cms5faq_modal_template_list{ height: 28.9vw;} .hpromo-container #faq_modal li .promot img { border-radius: 20px; border: 1px solid #f0b90b; height: 28.9vw;/*aspect-ratio: 452 / 137;*/ border-radius:8px;} @media screen and (min-width:1024px) { .hpromo-container { display: flex; } .hpromo-left { width: 60%; } .hpromo-right { width: 40%; } .hpromo-container #cms5faq_modal_template_list{ height: 18.18vw;} .hpromo-container #faq_modal li .promot img { height: 18.18vw;/*aspect-ratio: 431 / 130;*/ } } @media screen and (max-width:1299px) and (min-width:1024px) { .hpromo-img img { margin-top: -15px; } } @media screen and (max-width:1023px) { .hpromo-container .titlebox{padding-top:20px; } .hpromo-right { /*display: none !important; */ } .hpromo-left { padding-bottom: 30px; padding-left: 10px; padding-right: 10px; width:100vw; overflow:hidden; } #faq_modal li .promot img { border-radius: 8px; } .hpromo-pagination { bottom: 20px; } .hpromo-pagination .swiper-pagination-bullet { background: #bdbdbd; border-color: #bdbdbd; } } @media (max-width:600px) { } /**************************************************************************************************************************** PROMOTIONS */ #faq_modal li { padding: 20px 0; } #faq_modal li:not(:first-child) { border-top: 1px solid #ccc; } .promo-d { font-size: 16px; padding: 10px 20px; } .promo-d h3 { display: flex; color: #fbbd36; white-space: nowrap; font-size: 1em; text-align: center; } .promo-d h3:before, .promo-d h3:after { content: ''; width: 100%; height: 1px; background: #fbbd36; margin: auto 0; } .promo-d h3:before { margin-right: 20px; } .promo-d h3:after { margin-left: 20px; } .promo-d h2 { font-weight: bold; font-size: 2em; text-align: center; color: #000; } .promo-d p { text-align: center; font-size: 0.9em; color: #888; } .promo-b { margin-top: 25px; display: flex; justify-content: center; align-items: center; } .promo-d .btn-claim { font-size: 1em; border-radius: 6px; background: #fbbd36; padding: 0.7em 2em; cursor: pointer; text-transform: uppercase; color: #fff; font-weight: bold; text-align: center; margin-right: 5px; } .promo-d .btn-claim:hover { box-shadow: 0px 0px 15px #ffbd42; } .promo-d .btn-claim:active { box-shadow: 0px 0px 15px #a8781e; background: #a8781e; } .promo-d .promo-b .btn-claim { margin-top: 0 !important; } .promo-d .btn-more { font-size: 1em; border-radius: 6px; background: #970000; padding: 0.7em 2em; cursor: pointer; text-transform: uppercase; color: #fff; font-weight: bold; text-align: center; margin-left: 5px; } .promo-d .btn-more:hover { box-shadow: 0px 0px 15px #6f0000; } .promo-d .btn-more:active { box-shadow: 0px 0px 15px #661710; background: #6f0000; } .dateCountdown { display: flex; justify-content: center; align-items: center; font-size: 0.8em; } .promot.expired .promo-d .btn-claim { background: #444; color: #fff; cursor: no-drop; } .promot.expired .promo-d .btn-claim:hover { box-shadow: none; } .promo-i img { width: 100%; border-radius: 10px; border: 1px solid #f0b90b; } @media screen and (min-width:1024px) { .promot { display: flex; align-items: stretch; } .promot > a { flex: 1; max-width: 70%; } .promo-i { } .promo-i img { width: 100%; } .promo-d { flex: 1; max-width: 30%; display: flex; flex-direction: column; justify-content: space-between; } } @media screen and (max-width:1023px) { .promo-i { padding-left: 10px; padding-right: 10px; } .promo-d { font-size: 12px; padding: 10px; margin-bottom: 10px; } .promo-d h3 { margin-top: 5px; } .promo-d h2 { margin-top: 10px; } .promo-d .btn-claim { margin-top: 2em; } } .fancybox-inner p.question + h4 { display: flex; } .fancybox-inner .promot { margin-left: auto; margin-right: auto; box-shadow: none; } @media (max-width:767px) { .promo-d h3:before, .promo-d h3:after { flex-basis: 20%; } .promo-d h3 { white-space: normal; } } /*** new promotions style */ ol#faq_modal { padding: 0 0 20px 0; } #faq_modal li { padding: 10px 10px; } .promot { border-radius: 10px; padding: 10px; box-shadow: 0 0 10px #ccc; background: #fff; } #faq_modal li:not(:first-child) { border-top: 0; } .promo-i { padding: 0; } @media screen and (min-width:1024px) { ol#faq_modal { display: flex; flex-wrap: wrap; } #faq_modal li { max-width: 50%; flex: 1 50%; } .promot { /* display: block; */ } .promo-d { max-width: 100%; } .promot { height: 100%; flex-direction: column; } #faq_modal li:not(:first-child) { border: 0; } .promot > a { max-width: 100%; margin-bottom: 0; } .promo-d .btn-claim { margin-bottom: 0; margin-top: auto; } } /**************************************************************************************************************************** Download */ .hd-wrapper { display: flex; } .hd-boxed.hdownload-container { flex: 2; } .hd-boxed.di-ad { flex: 1; } .download-title { padding: 0 15px; } .download-title .titlebox { margin: 0; } .download-title .app-logo { } .download-title .app-logo img { max-width: 70px; width: 100%; margin-left: 10px; } .download-main { padding-bottom: 30px; } .download-main p { margin-left: 15px; margin-top: 25px; color: #777; } .download-list { margin-top: 20px; margin-left: 5px; } .download-list ul { margin: 0; display: flex; } .li-app { position: relative; list-style-type: none; display: flex; flex-direction: column; align-items: center; margin: 10px; } .li-app .img-qr { border: 1px solid #666; width:150px; height:150px; } .btn-app { border-radius: 6px; background: #aaa; color: #fff; display: block; padding: 5px 10px; margin: 10px 0; display:flex; align-items:center; justify-content:center;} .btn-app:hover { color: #fff; box-shadow: inset 0 0 50px rgba(0,0,0,0.3); } .btn-app.app-ios { background: linear-gradient(to bottom, #a6a6a6, #666); } .btn-app.app-android { background: linear-gradient(to bottom, #9dce59, #59b23e); } .btn-app img { width: 18px; height:18px; margin-right: 5px; } .btn-download { font-size: 12px; text-decoration: underline; } @media screen and (min-width:1024px) { .hd-boxed.hdownload-container { flex: 2; } .hd-boxed.di-ad { flex: 2; } .dad-left img { padding-top: 200px; padding-bottom: 20px; width: 300px; height: 677px; /*aspect-ratio: 250 / 381;*/} } @media screen and (max-width:600px) { .hd-wrapper { flex-direction: column; } .download-title .titlebox h2 { font-size: 1em; } .download-title .app-logo img { max-width: 50px; } .li-app .img-qr { display: none; } } @media screen and (max-width:1023px) { .hd-wrapper { align-items: center; } .dad-left img { width: 100%; } } @media (max-width:600px) { .dad-left { max-width: 250px; padding-top: 10px; padding-bottom: 40px; } .dad-left img { max-height: 381px; height: 381px; } } .dad-wrapper { display: flex; } .dad-right { display: flex; justify-content: center; align-items: center; } .dad-right ul { margin: 0; display: flex; flex-wrap: wrap; } .dad-right li { list-style-type: none; padding: 7px; } .dad-right li:nth-child(1), .dad-right li:nth-child(3) { transform: translateY(3%); } .dad-right li:nth-child(2), .dad-right li:nth-child(4) { transform: translateY(25%); } .dad-ad { border-radius: 12px; overflow: hidden; width: 150px; height: 215px; transition: 0.2s ease-in-out; box-shadow: 2px 2px 5px rgba(0,0,0,0.0); } .dad-ad:hover { transform: translateY(-10px); box-shadow: 2px 2px 5px rgba(0,0,0,0.1); } .dad-ad img { width: 100%; height: 154px; width: 150px; } .dad-ad h4 { font-size: 16px; font-weight: bold; margin-bottom: 10px; margin-top: -25px; padding-left: 10px; padding-right: 10px; } .dad-ad p { font-size: 12px; font-weight: bold; padding-left: 10px; padding-right: 10px; padding-bottom: 25px; margin: 0; } .modal-instruction { display: block !important; opacity: 0; visibility: hidden; transition: 0.2s ease-in-out; transform: translateY(-25px); } .modal-instruction.in { opacity: 1; visibility: visible; transform: translateY(0); } .modal-instruction .modal-dialog { background: #fff; border-radius: 20px; } .modal-instruction button.close { position: absolute; top: 20px; right: 20px; z-index: 5; } .modal-instruction ul { margin: 0; } .modal-instruction li { padding: 0; list-style-type: none; padding: 15px; } .instruction-head { padding-left: 15px; max-width: 400px; } .instruction-box { } .isntruction-img { } .instruction-steps { } .instruction-steps p { margin-top: 10px; } .instruction-prev, .instruction-next { background-color: rgba(0,0,0,0.6); width: 30px; height: 30px; background-size: auto 60%; border-radius: 50px; } .instruction-prev { } .instruction-next { } .mobileview { display: none !important; } @media (max-width:1200px){ .dad-right{display:none !important;} } /**************************************************************************************************************************** HIGHLIGHT */ .w1400 { max-width: 1400px; margin: auto; width: 100%; padding-left: 15px; padding-right: 15px; } .title-box { margin-top: 15px; } #titleMain { font-size: 32px; color: #7B0B07; outline: 0; border: 0; cursor: pointer; padding-right: 15px; font-weight: bold; background-color: #fff; } #titleMain option { font-size: 13px; color: #000; cursor: pointer; } .news-box { display: none; } .news-box.active { display: block; } .close-box { position: relative; z-index: 2; } .closeHighlight { -webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0; } button.xclose { float: none; margin-left: auto; margin-right: 0; opacity: 0; visibility: hidden; padding: 10px 10px; position: absolute; right: 25px; top: 25px; opacity: 0.5; } button.closeHighlight.show:hover { opacity: 1; } button.closeHighlight.show { opacity: 0.5; visibility: visible; transition: 0.5s; } .highlight-container-box.active > div.waist { display: block; } .waist { display: none; } .waist { min-width: 100px; } .wwraper { display: flex; flex-direction: column; position: relative; align-items: center; justify-content: space-between; height: 100%; } .wwraper > div { flex: 0 0 auto; position: relative; } .wwraper > div > div { transform: rotate(270deg) translateX(-35%); white-space: nowrap; } .wwraper > div.wbutton { position: static; } .wclose { padding-bottom: 15px; } .wclose:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .wtitle { height: 70%; opacity: 0; transition: 0.5s; } .waist .title { font-size: 32px; letter-spacing: 5px; color: #aaa; text-transform: uppercase; } .wstitle { height: 20%; } .waist .stitle { font-size: 16px; color: #ccc; text-transform: uppercase; letter-spacing: 2px; } .highlight-container-box { max-width: 1920px; width: 100%; margin-left: auto; margin-right: auto; } .highlight-container-box.active .waist .wtitle { opacity: 1; transition-delay: 0.5s; } .container-box { position: relative; padding-bottom: 25px; padding-top: 25px; max-width: 1180px; margin-left: auto; margin-right: auto; } .container-box.active { max-width: 1920px; } .container-box .swiper-button { } .swiper-button { max-width: calc(1400px - 100px - 15px); margin: auto; width: 100%; padding-right: 15px; position: relative; margin-top: 60px; } .sb-wrapper { position: absolute; top: -50px; right: 0; } .swiper-button .swiper-button-prev, .swiper-button .swiper-button-next { position: relative; background-image: none; width: auto; height: auto; left: auto; right: auto; margin: auto; top: auto; bottom: auto; padding: 10px 15px; display: inline-block; border-radius: 6px; } .swiper-button .swiper-button-prev { } .swiper-button .swiper-button-next { } .swiper-button .swiper-button-prev:hover, .swiper-button .swiper-button-next:hover { background-color: #eee; } .highlight-container .highlight-wrapper { align-items: flex-end; } .highlight-container.active .highlight-wrapper { align-items: flex-start; } .highlight-container .swiper-slide { cursor: pointer; } .post { display: block; position: relative; } .post:after { content: ''; position: absolute; top: 25%; bottom: 0; left: 0; right: 0; background: linear-gradient(to right, #efefef, #ddd); z-index: -1; transition: 0.2s; border-radius: 50px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; } .post .img { transform-origin: center bottom; transition: 0.2s; pointer-events: none; transition-timing-function: ease-in-out; } .post .img img { } .post img { width: 100%; transition: 0.2s ease-in-out; } .post .detail { padding-bottom: 15px; padding-left: 25px; padding-right: 25px; } .post .description { display: none; } .post .description .imgs { overflow: hidden; margin-bottom: 10px; margin-top: 0; } .post .description .imgs img { margin-right: 10px; width: calc(33.33% - 10px); float: left; margin-bottom: 10px; margin-top: 0; } .post .description img { margin-top: 10px; margin-bottom: 10px; width: 100%; cursor: pointer; } .highlight-container .swiper-slide.swiper-slide-active:last-child:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: translateX(100%); display: flex; justify-content: center; align-items: center; color: #aaa; pointer-events: none; } .highlight-container.active .swiper-slide { overflow: hidden; } .highlight-container.active .swiper-slide-active { height: 100%; } .highlight-container.active .swiper-slide-active { cursor: auto; display: block; } .highlight-container.active .swiper-slide-active .post { } .highlight-container.active .swiper-slide-active .post:after { top: 100px; } .highlight-container.active .swiper-slide .post .description { display: none; } .highlight-container.active .swiper-slide-active .post .description { display: block; } .highlight-container.active .swiper-slide-active .post .detail { } .highlight-container.active .swiper-slide .post { margin-right: 0; width: 100%; } .highlight-container.active .swiper-slide .post:after { border-radius: 0; transition: border-radius 0.5s; } .highlight-container.active .swiper-slide .post .img { /*opacity: 0;*/ } .highlight-container.active .swiper-slide-active .post .img { opacity: 1; padding-left: 25px; padding-top: 25px; padding-top: 0; } .highlight-container.active .post .img img { width: auto; max-width: 100%; } [data-news] { display: none; } [data-news].active { display: block; } @media screen and (min-width:1024px) { .highlight-container.active .highlight-wrapper { align-items: stretch; } .highlight-container .swiper-slide:hover .post .img { transform: translateY(-15px); } .highlight-container .swiper-slide-prev .post .img { width: 100%; transition-delay: 0.1s; } .highlight-container .swiper-slide-prev .post:after { top: 20%; } .highlight-container .swiper-slide-next .post .img { width: 100%; transition-delay: 0.2s; } .highlight-container .swiper-slide-next .post:after { top: 20%; } .highlight-container .swiper-slide-active .post .img { width: 100%; } .highlight-container .swiper-slide-active .post:after { top: 15%; } } @media screen and (min-width:768px) { .wwraper { padding-top: 100px; } .highlight-container-box.active .sb-wrapper { right: 60px; } .highlight-container-box.active { display: flex; } .highlight-container-box > div { } .post .img { width: 100%; margin: 0 auto; text-align: center; } .highlight-container.active .highlight-wrapper { } .container-box.active { padding-bottom: 0; } .container-box.active .swiper-button { } .highlight-container.active { width: calc(100vw - 80px); } .highlight-container.active .swiper-slide { width: calc(100vw - 80px) !important; } .highlight-container.active .swiper-slide-active { height: 100%; } .highlight-container.active .swiper-slide .post { display: flex; width: 100%; } .highlight-container.active .swiper-slide .post:after { top: 60px; } .highlight-container.active .swiper-slide-active .post:after { border-top-left-radius: 200px; opacity: 1; } .highlight-container.active .swiper-slide .post .img { transform: scale(1); max-width: 40%; } .highlight-container.active .swiper-slide .post .detail { margin-top: 50px; padding-top: 35px; padding-right: 50px; max-width: 60%; } } @media screen and (min-width:1200px) { .waist { min-width: 120px; } .highlight-container.active { width: calc(100vw - 120px - 17px); } .highlight-container.active .swiper-slide { width: calc(100vw - 120px - 17px) !important; } } @media screen and (min-width:1900px) { .highlight-container .highlight-wrapper { /*min-height: 480px;*/ } } @media screen and (max-width:1900px) and (min-width:1200px) { .highlight-container-box { min-height: 35vw; } } @media screen and (max-width:1024px) and (min-width:768px) { .waist { max-width: 80px; min-width: 80px; } .waist .title { font-size: 20px; } .highlight-container.active { width: calc(100vw - 80px); } .highlight-container.active .swiper-slide .post:after { border-top-left-radius: 25px; } .highlight-container.active .swiper-slide .post { display: block; min-width: calc(100vw - 80px); } .highlight-container.active .swiper-slide .post .detail { margin-top: 0; padding-top: 0; max-width: 100%; padding-right: 25px; } .post .img { width: 80%; } .post .description .imgs img { height: auto; width: calc(33.33% - 10px); } .post .detail .title h2 { font-size: 24px; } .post .detail .title { font-size: 12px; } .post:after { border-radius: 20px; } } @media screen and (max-width:1023px) { .post { padding-top: 15px; } } @media screen and (max-width:767px) { .highlight-container-box { padding-bottom: 50px; } button.xclose { position: absolute; right: 0; top: -50px; } .highlight-container-box.active { display: flex; } .wwraper > div > div { } .waist { max-width: 25px; min-width: 25px; } .waist .title { font-size: 12px; transform: rotate(270deg) translateX(-90%); letter-spacing: 2px; } .waist .stitle { font-size: 10px; } .wclose img { width: 20px; } .news-box { position: relative; } .swiper-button { max-width: 100vw; position: absolute; bottom: -45px; left: 0; } .sb-wrapper { position: static; float: right; margin-right: 15px; } .container-box { padding-top: 15px; padding-bottom: 0; } .post { padding-top: 0; } .highlight-container.active .swiper-slide { overflow: visible; } .highlight-container.active { width: calc(100vw - 25px); } .highlight-container.active .swiper-slide { width: calc(100vw - 25px) !important; } .highlight-container.active .swiper-slide-active .post { } .highlight-container.active .swiper-slide .post:after { border-top-left-radius: 10px; } .highlight-container.active .swiper-slide-active .post .img { padding-right: 20px; padding-left: 20px; } .highlight-container.active .swiper-slide .post .detail { margin-top: 0; padding-top: 0; max-width: 100%; padding-right: 20px; padding-left: 20px; } .post .description .imgs img { height: auto; width: calc(33.33% - 10px); } .post .detail .title h2 { font-size: 24px; } .post .detail .title { font-size: 12px; } .post .detail { font-size: 12px; text-align: justify; } .post:after { border-radius: 20px; } .post .description .imgs { margin-bottom: 5px; } .post .description .imgs img { margin-right: 5px; width: calc(33.33% - 5px); } } /* ----------- YOUTUBE LIST ----------- */ .btn-vf { color: #888; background-color: #eee; border: 0; padding: 15px 15px; display: block; width: 100%; margin: 5px 0; text-align: left; font-weight: bold; } .btn-vf.active { color: #222; background-color: #dbba9c; } .vf-list ul { margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; } .vf-list ul > li { list-style-type: none; border: 0; } .vf-list h3 { font-size: 15px; } .vf-list iframe { width: 100% !important; height: 300px !important; } ol.f li { list-style-type: decimal; } @media screen and (min-width:1200px) { .vf-list ul { padding: 0 5px; } .vf-list ul > li { flex: 1 1 33.33%; margin: 10px 0; padding: 0 5px; max-width: 33.33%; } } @media screen and (max-width:1199px) and (min-width:600px) { .vf-list ul { padding: 0 5px; } .vf-list ul > li { flex: 1 1 50%; margin: 10px 0; padding: 0 5px; max-width: 50%; } } @media screen and (min-width:768px) { .vf-wrapper { display: flex; } .vf-tabs { flex: 2; padding-top: 5px; } .vf-list { flex: 10; } } @media screen and (max-width:767px) { .vf-tabs { background-color: #fff; display: flex; border-bottom: 1px solid #aaa; } .btn-vf { margin: 0; flex: 1; text-align: center; background: #fff; border-bottom: 5px solid #fff; } .btn-vf.active { border-color: #fcd14e; background-color: #fff; } .vf-list ul > li { width: 100%; padding-bottom: 25px; } } .css-yandx8 { background-image: url(/data/1806/uploads/wechat_20221130175012.jpg) !important; } @media (max-width:600px) { .video-container { height: 53.6vw; } } /* ----------- POPUP IMAGE ----------- */ #popup-image { display: block; } #popup-image.active { background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); overflow-y: auto; opacity: 1; visibility: visible; } #popup-image .modal-content { max-width: 800px; margin: 25px auto; display: block; width: 85%; } #popup-image .close { float: none; position: absolute; top: 15px; right: 15px; font-size: 40px; color: #fff; opacity: 1; z-index: 9; } #popup-image .close:hover { color: #bbb; } #popup-image .close:focus, #popup-image .close:active { color: #666; } @media screen and (min-width:767px) { } @media screen and (min-width:1024px) { .instruction-head { position: absolute; top: 20px; left: 20px; z-index: 2; } .instruction-box { display: flex; align-items: center; padding-left: 50px; padding-right: 50px; justify-content: space-between; } .isntruction-img { order: 2; padding-top: 50px; } } @media screen and (max-width:1023px) { .instruction-container { padding-bottom: 20px; } .instruction-head { padding-top: 15px; } .instruction-box { text-align: center; } .isntruction-img img { max-width: 350px; width: 100%; max-height: 430px;height: 100vw;width: 81.2vw;} .instruction-steps { padding-bottom: 20px; } } @media screen and (max-width:767px) { .instruction-head { font-size: 1.4em; padding-right: 50px; } } .video-container .html5gallery-elem-0 { border-radius: 10px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 50%); border-bottom: 1px solid #373d4a; } @media only screen and (max-width: 479px) { .topsgames-filter .swiper-slide { width: 33.333% !important; } .home-promo { padding-top: 0; } .hpromo-right { width: 95%; } .game-item-hover { display: none; } #btn-fav { display: none; } #btn-setting { display: none; } #cssmenu li:nth-child(10) { display: block; } #cssmenu li:nth-child(11) { display: block; } #cssmenu li:nth-child(12) { display: block; } #cssmenu li:nth-child(13) { display: block; } #cssmenu li:nth-child(14) { display: block; } #cssmenu li:nth-child(15) { display: block; } #cssmenu li:nth-child(16) { display: block; } .icnMenu1 { background-image: url(/data/2076/uploads/icn-mobile-05.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu2 { background-image: url(/data/2076/uploads/icn-mobile-06.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu3 { background-image: url(/data/2076/uploads/icn-mobile-07.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu4 { background-image: url(/data/2076/uploads/icn-mobile-03.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu5 { background-image: url(/data/2076/uploads/icn-mobile-02.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu6 { background-image: url(/data/2076/uploads/icn-mobile-01.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu7 { background-image: url(/data/2076/uploads/icn-mobile-04.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu8 { background-image: url(/data/2076/uploads/icn-mobile-08.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu9 { background-image: url(/data/2076/uploads/icn-mobile-11.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu10 { background-image: url(/data/2076/uploads/icn-mobile-10.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu11 { background-image: url(/data/2076/uploads/icn-mobile-12.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu12 { background-image: url(/data/2076/uploads/icn-mobile-13.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu13 { background-image: url(/data/2076/uploads/icn-mobile-14.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu14 { background-image: url(/data/2076/uploads/icn-mobile-15.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu15 { background-image: url(/data/2076/uploads/icn-mobile-16.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu16 { background-image: url(/data/2076/uploads/icn-mobile-15.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } .icnMenu17 { background-image: url(/data/2076/uploads/icn-mobile-16.png); background-size: 35px; float: none; margin: 0; padding: 0; background-position: center 0; line-height: 9; text-align: center; height: 54px; filter: brightness(1); } #noti-badgecount { display: none !important; } #fav-badgecount { display: none !important; } #totalCount { display: none !important; } .menulabel { position: absolute; margin-left: 46px !important; margin-top: -12px !important; display: block; } .topsgames-box { height: auto; } .hometops-left { padding-top: 0; } .desktopview { display: none; } .mobileview { display: block !important; } h3.title-page { margin-left: 0; text-align: center; } #provider-box > p { margin-left: 0; text-align: center; } .btn-menu { padding: 0 10px 0 0; } .download-title { text-align: center; } .download-title .titlebox { display: block; } #btn-settingsbox { padding: 5px 5px; } .download-main p { margin: 25px auto 0 auto; text-align: center; } .download-list ul { display: block; } .download-list ul li.li-app { display: block; flex-direction: unset; align-items: center; margin: 1%; width: 48%; float: left; text-align: center; } .widget-visible { display: none !important; } .html5gallery { /*height: 218px !important;*/ } .html5gallery a img { width: 100%; } .video-container .html5gallery-container-0 { /*height: 210px !important; */ } #cssmenu > ul > li > a { text-align: center; } #cssmenu > ul > li > a img:nth-child(2) { margin: 0 auto; width: 36px; margin-bottom: 0px; filter: none; opacity: 1; } #header-login { background: linear-gradient(180deg,#222222 0%,#000000 100%); text-transform: uppercase; text-decoration: none; } #cssmenu > ul > li.has-sub > a { padding-right: 0 !important; } .tops-container { margin: 5px; box-shadow: 0 0 16px rgba(132,168,243,.3); border-radius: 8px; border: rgba(0,0,0,0.2) 1px solid; } .divHome-download { background: none; background-color: #f6f8fe; } .gl-item { margin-right: 0; } .gl-item .game-item { border: 1px dashed #cdcdcd; } .gl-item .btn-pn { box-shadow: 0 0.04rem 0.16rem rgba(121,129,164,.1); border: 1px solid #fff; } .topsgames-wrapper { height: 267px !important; } .header-logo:after { right: -20px; bottom: -6px; } img.logo { max-height: 40px; } .f-sm a { margin: 0 15px 0 2px; } .f-pm img { height: auto; width: 80%; } .footer-copyright { padding-bottom: 0; } .jackpothead { margin-top: 0px; font-size: 20px; } .count-jackpot { padding: 20px 10px 30px; } .btn-gl { padding: 7px 2px; } } .conhightlight iframe { height: 50vw; max-height: 620px; } @media (max-width:1023px) { .conhightlight iframe { height: 65vw; } } #sys_msg { text-align: center; color: tomato; font-size: 24px; font-weight: bold; padding: 20px; max-width: 450px; margin: auto; } #sys_msg img { display: block; margin: auto; max-width: 250px; width: 100%; } #sys_msg p { color: #000; font-size: 14px; font-weight: normal; margin-top: 10px; } #sys_msg a { font-size: 14px; color: #000; display: table; margin: 30px auto 10px; } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .red-dot { width: 10px; height: 10px; background-color: red; border-radius: 50%; animation: blink 1s infinite; } .panel-group h2{font-weight:bold;}