.error-404 .content-404 { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; gap: 20px 0 } .error-404 .content-404 h1 { margin: 0 } .error-404 .content-404 p { margin: 0; text-align: center } .error-404 .content-404 img { width: 100%; max-width: 640px } .error-404 .content-404 .button { text-transform: capitalize; cursor: pointer; padding: 10px 30px } .games-filter-bar { width: 100%; z-index: 200; position: fixed } .games-filter-bar.search-open .container { border-radius: 10px 10px 0 10px } .games-filter-bar .container { max-width: 1000px; margin: 0 auto; display: flex; position: relative; border-radius: 10px; background: #fff } .games-filter-bar .container .games-filter-list { list-style-type: none; margin: 0; padding: 0; height: 60px; width: 100%; overflow: hidden; display: flex; position: relative } .games-filter-bar .container .games-filter-list .slick-arrow { width: 60px; -webkit-appearance: none; background: none no-repeat center; cursor: pointer; font-size: 0; background-size: 20px } .games-filter-bar .container .games-filter-list .slick-list { width: calc(100% - 120px); overflow: hidden; padding: 0; box-shadow: inset 10px 0 10px 0 rgba(0, 0, 0, 0.1), inset -10px 0 10px 0 rgba(0, 0, 0, 0.1) } .games-filter-bar .container .games-filter-list .slick-list li { color: #000; height: 40px; width: auto; display: inline-block; padding: 10px 10px 10px 35px; font-size: 13px; text-transform: capitalize; line-height: 40px; text-align: center; position: relative; outline: none; vertical-align: middle; margin: 0 auto; cursor: pointer } .games-filter-bar .container .games-filter-list .slick-list li .new-games-counter { background: red; border-radius: 50%; width: 10px; height: 10px; font-size: 0; position: absolute; top: 10px; left: 30px } .games-filter-bar .container .games-filter-list .slick-list li .svg-wrapper { display: none } .games-filter-bar .container .games-filter-list .slick-list li:before { content: ""; display: block; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 25px; height: 25px; background-repeat: no-repeat; background-position: center; background-size: contain } .games-filter-bar .container #search .input-container { position: relative; height: 100% } .games-filter-bar .container #search .input-container form { margin: 0; height: 100% } .games-filter-bar .container #search .input-container form input { border: none; height: 100%; font-size: 14px; width: 100%; padding: 0 40px; margin-right: 65px; box-sizing: border-box; background: none } .games-filter-bar .container #search .input-container form input:focus-visible { outline: none } .games-filter-bar .container #search .input-container form input::placeholder { text-transform: capitalize; font-weight: normal } .games-filter-bar .container #search .input-container .close-icon { position: absolute; width: 20px; height: 20px; top: 50%; transform: translateY(-50%); right: 10px; border-radius: 50%; background: #eee; cursor: pointer; display: none } .games-filter-bar .container #search .input-container .close-icon:before, .games-filter-bar .container #search .input-container .close-icon:after { content: ""; width: 11px; display: block; position: absolute; left: 50%; top: 50%; height: 2px; border-radius: 10px; transform: translate(-50%, -50%) rotate(45deg); background: #9d9d9d } .games-filter-bar .container #search .input-container .close-icon:after { transform: translate(-50%, -50%) rotate(-45deg) } .games-filter-bar .container #search .input-container .close-icon:hover:before, .games-filter-bar .container #search .input-container .close-icon:hover:after { background: #000 } .games-filter-bar .container #search-icon { display: none } .games-filter-bar .container #games-search-box { position: absolute; top: 60px; right: 0; z-index: 99; background: #fff; width: 310px; max-height: 400px; padding: 15px; box-sizing: border-box; display: none; overflow-y: scroll; border-radius: 0 0 10px 10px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2) } .games-filter-bar .container #games-search-box .results-list { text-align: center; text-transform: capitalize; font-size: 10px; margin-bottom: 10px; color: #8e8e8e } .games-filter-bar .container #games-search-box .games-search-result { display: flex; gap: 15px; align-items: center; margin-top: 10px } .games-filter-bar .container #games-search-box .games-search-result:hover { background: #eee } .games-filter-bar .container #games-search-box .games-search-result img { width: 100px; display: block; border-radius: 10px } .games-filter-bar .container #games-search-box .games-search-result p { margin: 0; padding: 0 15px 0 0; color: #000; font-size: 14px; line-height: 18px } .games-filter-bar~.featured-slots { margin: 70px auto 0 auto } .games-filter-bar~.featured-slots .backtotop.active { pointer-events: auto; opacity: 100 } #search-header .container { background: none } #search-header .container>.wrapper { padding: 0 } #search-header .container>.wrapper h1 { display: none } main.choose-game .choose-game-desc .container, .main.choose-game .choose-game-desc .container { overflow: auto } main.choose-game .choose-game-desc+.featured-slots, .main.choose-game .choose-game-desc+.featured-slots { background: #fff; border-radius: 0 0 20px 20px; padding: 25px 0 } main.choose-game+.container, .main.choose-game+.container { max-width: 1000px; margin: 0 auto; width: 100%; border-radius: 0 0 20px 20px; padding: 20px 0 } main.choose-game+.container .inline-button, .main.choose-game+.container .inline-button { padding: 0; display: block; margin: 0 auto; width: max-content; font-size: 14px; background: none; color: #fff; text-decoration: underline } .game-read-more img { max-width: 100%; height: auto; display: block; margin: 0 auto } html:not(.site-region) .featured-slots .wrapper .icon-container.bingo-room .bingo-details p.empty { display: none } @media screen and (max-width: 1040px) { main.choose-game, .main.choose-game { margin: 40px 10px 0 10px } .games-filter-bar .container { border-radius: 0 } #search-header .container>.wrapper .back-all-games { border-radius: 0 } #search-header #mobile-results-search form input { border-radius: 0 } #search-header #games-search-box-mobile { border-radius: 0 } } @media screen and (max-width: 840px) { .games-filter-bar .container .games-filter-list .slick-list li { padding: 10px 15px; display: inline-flex; line-height: 11px; font-size: 11px; align-items: end; justify-content: center } .games-filter-bar .container .games-filter-list .slick-list li:before { left: 50%; transform: translateX(-50%); top: 10px } .games-filter-bar .container .games-filter-list .slick-list li .new-games-counter { left: 50%; transform: translateX(-50%); margin-left: 20px } .games-filter-bar~.featured-slots { padding: 0 10px } } @media screen and (max-width: 640px) { .games-filter-bar .container .games-filter-list .slick-list { width: calc(100% - 100px) } .games-filter-bar .container .games-filter-list .slick-list li { padding: 10px 5px } .games-filter-bar .container .games-filter-list .slick-arrow { width: 50px } .games-filter-bar .container #search { display: none } .games-filter-bar .container #search-icon { width: 50px; padding: 10px 6px; display: flex; line-height: 11px; font-size: 11px; align-items: end; justify-content: center; text-transform: capitalize; position: relative; cursor: pointer; box-shadow: inset 1px 0 0 #eee } .games-filter-bar .container #search-icon .svg-wrapper { display: none } .games-filter-bar .container #search-icon:before { content: ""; display: block; position: absolute; left: 50%; transform: translateX(-50%); top: 10px; width: 26px; height: 25px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.86 23.86'%3E%3Cpath d='M14.96 17.18c-4.26 3.03-10.17 2.03-13.2-2.23C-1.28 10.7-.28 4.78 3.98 1.75c4.26-3.03 10.17-2.03 13.2 2.23a9.464 9.464 0 0 1 0 10.98l6.22 6.22c.61.6.61 1.59 0 2.19l-.03.03c-.61.61-1.59.61-2.2 0l-6.22-6.22Zm-5.49-.47c4 0 7.24-3.24 7.24-7.24s-3.24-7.24-7.24-7.24-7.24 3.24-7.24 7.24 3.24 7.24 7.24 7.24' style='fill:%23080f19'/%3E%3C/svg%3E") } .games-filter-bar .container #search-icon:after { content: "search" } } @media screen and (max-width: 400px) { .games-filter-bar .container .games-filter-list .slick-list { width: calc(100% - 60px) } .games-filter-bar .container .games-filter-list .slick-list li { padding: 10px; white-space: nowrap; line-height: 10px; font-size: 10px } .games-filter-bar .container .games-filter-list .slick-arrow { width: 30px; background-size: 15px } .games-filter-bar .container #search-icon { width: 30px } } .lobby-error { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 400px; gap: 20px 0; padding: 15px; margin: 0 auto; box-sizing: border-box } .lobby-error h2 { margin: 0 } .lobby-error p { margin: 0 } .lobby-error .button { padding: 10px 15px; font-size: 18px; width: 100%; box-sizing: border-box } .lobby-error .error-icon { content: ""; display: block; width: 150px; height: 80px; background-size: auto 100%; background-repeat: no-repeat; background-position: center } #lobby-search { width: 100% } #lobby-search .search-input-wrapper { position: relative; width: calc(100% - 30px); margin: 0 15px } #lobby-search .search-input-wrapper input { border-radius: 10px; width: 100%; height: 40px; padding: 0 40px; box-sizing: border-box; outline: none } #lobby-search .search-input-wrapper input::placeholder { color: #fff } #lobby-search .search-input-wrapper input:placeholder-shown+.clear-input { display: none } #lobby-search .search-input-wrapper .clear-input { position: absolute; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; right: 5px; cursor: pointer } #lobby-search .search-input-wrapper .clear-input span { width: 15px; display: block; position: absolute; left: 50%; top: 50%; height: 2px; border-radius: 10px } #lobby-search .search-input-wrapper .clear-input span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) } #lobby-search .search-input-wrapper .clear-input span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) } .lobby-action-buttons { display: flex; width: calc(100% - 30px); margin: 0 15px } .lobby-action-buttons a { flex: 1; text-align: center; padding: 20px 0; font-weight: bold; text-decoration: underline } .lobby-action-buttons a:first-child { border-radius: 10px 0 0 10px } .lobby-action-buttons a:last-child { border-radius: 0 10px 10px 0 } .lobby-action-buttons a:first-child:last-child { border-radius: 10px } .lobby-action-buttons.az-bottom a { border-radius: 10px } .skeleton { border-radius: 10px; width: 100%; height: 100%; min-height: 20px; background: linear-gradient(90deg, rgba(227, 227, 227, 0.25) 25%, rgba(252, 252, 252, 0.4) 50%, rgba(227, 227, 227, 0.25) 75%); background-size: 200%, 100%; animation: swipe 2.5s linear infinite } #game-categories .skeleton { height: 62px } .top-bar .skeleton { height: 28px; width: 150px } #lobby-search .skeleton { height: 40px; margin: 0 15px; width: calc(100% - 30px) } .pagination-loader { margin: 0 15px; font-size: 12px } @media screen and (max-width: 840px) { .mobile-bottom-nav { display: block; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 199; backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); height: 70px } .mobile-bottom-nav ul { display: flex; list-style: none; margin: 0; padding: 0; height: 100% } .mobile-bottom-nav ul li { width: calc(100% / 5); height: 100%; display: flex; justify-content: center; align-items: center; position: relative } .mobile-bottom-nav ul li a { display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: center; gap: 5px } .mobile-bottom-nav ul li a svg { height: 100%; width: 100%; max-width: 35px; max-height: 35px; margin: 0 auto } .mobile-bottom-nav ul li a #inbox-notification { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 18px; margin-top: -23px; width: 10px; height: 10px; display: none; border-radius: 50% } .mobile-bottom-nav ul li a #inbox-notification.unread { display: block } .mobile-bottom-nav ul li a span { font-size: 12px; line-height: 14px; position: relative; display: block; text-transform: capitalize; font-weight: bold; text-align: center } .mobile-bottom-nav ul li.bottom-bar_cashier a div { margin: -36px auto 0 auto; min-height: 70px; width: 70px; height: 70px; display: flex; border-radius: 50%; align-items: center; z-index: 1 } } @media screen and (max-width: 640px) { .mobile-bottom-nav ul li a span { font-size: 10px; line-height: 12px; padding: 0 5px } .mobile-bottom-nav ul li a svg { max-width: 30px; max-height: 30px } } @media screen and (max-width: 400px) { .mobile-bottom-nav ul li a span { font-size: 9px; line-height: 11px } .mobile-bottom-nav ul li a svg #inbox-notification { margin-left: 16px; margin-top: -21px } .mobile-bottom-nav ul li.bottom-bar_cashier a div { margin: -20px auto 0 auto; width: 54px; height: 54px; min-height: 54px } } .site-background.cashier-header { padding-top: 20px } .site-background.cashier-header header { background: none; position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; display: flex; justify-content: center; box-shadow: none; border: none } .site-background.cashier-header header .logo { width: 100%; height: 100%; max-width: 150px; max-height: 75px; object-fit: contain } .site-background.cashier-header .main.cashier-pages { margin-top: 20px } .main.cashier-pages>.container>.wrapper { padding: 0 } .cashier { overflow: hidden } .cashier form#confirm_pass { max-width: 620px; margin: 0 auto; padding: 0 20px; box-sizing: border-box } .cashier form#confirm_pass input[type="password"] { width: 300px; max-width: 100%; line-height: 40px; padding: 0 10px; position: relative; margin: 10px 0 0 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc } .cashier form#confirm_pass #withdrawalSubmit { padding: 10px 25px; font-size: 20px; font-weight: bold; text-transform: uppercase; cursor: pointer; margin: 0; position: relative } .cashier #paysafeiframe { height: 100dvh !important; position: fixed; top: 0; left: 0; z-index: 99999999999; background: #fff } .cashier #cashier-dropdown { list-style: none; padding: 35px; margin: 0; display: flex; justify-content: flex-end; align-items: center; gap: 30px; border-bottom: 1px solid #eee; position: relative } .cashier #cashier-dropdown a li { text-decoration: underline; color: #000; font-size: 14px; text-transform: capitalize } .cashier #cashier-dropdown a.active { position: absolute; left: 35px; cursor: default; pointer-events: none } .cashier #cashier-dropdown a.active li { text-decoration: none; font-size: 18px; font-weight: bold; cursor: default; pointer-events: none } .cashier .make-deposit-container { max-width: 620px; margin: 0 auto; text-align: left !important } .cashier .make-deposit-container #cancelform { padding-bottom: 20px } .cashier .make-deposit-container button[type="button"][onclick^="doCancel("] { padding: 10px 25px; font-size: 20px; font-weight: bold; text-transform: uppercase; cursor: pointer; margin: 0; position: relative } .cashier .make-deposit-container #ptype { margin: 0 } .cashier .make-deposit-container#formtop { max-width: initial } .cashier .make-deposit-container#formtop .add-card-table { max-width: 620px; margin: 0 auto; position: relative } .cashier .make-deposit-container .desc p { margin: 0; text-transform: capitalize; font-weight: bold } .cashier .make-deposit-container .add-card-table .clearfix { display: none } .cashier .make-deposit-container .input-container { display: flex; gap: 5px } .cashier .make-deposit-container .input-container input[type="text"], .cashier .make-deposit-container .input-container input[type="number"], .cashier .make-deposit-container .input-container select { width: 100%; line-height: 40px; padding: 0 10px; position: relative; margin: 10px 0 0 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc } .cashier .make-deposit-container .input-container input[type="text"]~.error, .cashier .make-deposit-container .input-container input[type="number"]~.error, .cashier .make-deposit-container .input-container select~.error { display: none; margin: 0; padding: 3px 10px 5px 10px; position: relative; border-radius: 0 0 10px 10px; font-size: 12px } .payment-methods div { width: 150px; height: 90px; position: relative; border-radius: 15px; border: 3px solid #fff; box-sizing: border-box } .payment-methods div:before { content: ""; display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); background-size: contain; background-position: center; background-repeat: no-repeat; width: 72px; height: 70px; position: absolute } .payment-methods div:after { content: ""; right: -10px; top: -10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.28 12.9'%3E%3Cpath d='M16.55.73c-.97-.97-2.55-.97-3.52 0L6.87 6.89 4.25 4.27c-.97-.97-2.55-.97-3.52 0s-.97 2.55 0 3.52l4.37 4.37c.49.49 1.13.73 1.77.73.64 0 1.28-.24 1.76-.73l7.92-7.92c.97-.97.97-2.55 0-3.52Z' style='fill:%23fff'/%3E%3C/svg%3E") #1BB90D center no-repeat; background-size: 16px, auto; width: 30px; height: 30px; position: absolute; display: none; border-radius: 50%; z-index: 2 } .payment-methods div.reg-card { background: #1434cb } .contact-us>.container { backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px) } .contact-us>.container .contact-us-boxes-wrapper { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-bottom: 30px; margin: 0 10px } .contact-us>.container .contact-us-boxes-wrapper .contact-us-box { background: #eee; padding: 0 20px 30px 20px; border-radius: 20px; max-width: 300px; width: 100% } .contact-us>.container .contact-us-boxes-wrapper .contact-us-box h2 { padding: 20px; width: calc(100% + 40px); position: relative; left: -20px; box-sizing: border-box; margin: 0 0 20px 0; text-transform: capitalize } .contact-us>.container .contact-us-boxes-wrapper .contact-us-box h2::before { content: ""; position: absolute; display: block; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); height: 2px; background: #ccc } .contact-us>.container .contact-us-boxes-wrapper .contact-us-box p { color: #000; font-size: 14px; margin: 0 } .contact-us>.container .contact-us-boxes-wrapper .contact-us-box p a { color: #000; text-decoration: underline; overflow-wrap: break-word } .contact-us>.container .contact-us-boxes-wrapper .contact-us-box .contact-us-button { padding: 10px 20px; width: max-content; min-width: 150px; text-align: center; display: block; margin: 30px auto 0 auto; font-weight: bold; font-size: 20px; text-transform: capitalize } .contact-us>.container .contact-us-boxes-wrapper .contact-us-box #openZendeskWidget { cursor: pointer } .bingo-page #game-content h1.red { flex: 0 0 100% } .main.slingo { margin: 40px auto !important } .main.slingo .slingo-banner img { width: 100% } .main.slingo .slingo-banner img.slingo-banner-mobile { display: none } .main.slingo .slingo-strap { display: flex; justify-content: center; margin: 20px 0 0 0 } .main.slingo .slingo-strap div { display: block; padding: 10px 20px; cursor: pointer; font-size: 20px; text-align: center; text-transform: capitalize } .main.slingo .slingo-container { padding: 20px } .main.slingo .slingo-container .slingo-games { display: flex; gap: 20px; justify-content: center; max-width: 500px; margin: 0 auto } .main.slingo .slingo-container .slingo-games a { flex: 1 1 0 } .main.slingo .slingo-container .slingo-games img { width: 100%; border-radius: 15px } @media screen and (max-width: 1040px) { .main.slingo { margin: 40px 10px !important } } @media screen and (max-width: 640px) { .main.slingo { margin: 20px 10px !important } .main.slingo .slingo-banner img.slingo-banner-desktop { display: none } .main.slingo .slingo-banner img.slingo-banner-mobile { display: block } } .main .faqs-page .wrapper { padding: 20px 40px } .main .faqs-page .wrapper h1.red { font-size: 0 } .main .faqs-page .wrapper h1.red::before { content: "FAQs"; font-size: 34px; margin: .7em 0; display: block } .main .faqs-page .wrapper .faqs-list { display: flex; flex-direction: column; gap: 30px 0 } .main .faqs-page .wrapper .faqs-list .faq-group { margin: 0; padding: 0; list-style: none; gap: 10px 0; display: flex; flex-direction: column } .main .faqs-page .wrapper .faqs-list .faq-group h2 { margin: 0; color: #000 } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item { background: #eee; border-radius: 10px; padding: 20px 70px 20px 20px; cursor: pointer; position: relative } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-title-wrapper { position: relative } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-title-wrapper:before, .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-title-wrapper:after { content: ""; position: absolute; width: 15px; height: 3px; background: #000; top: 50%; transform: translateY(-50%) rotate(45deg); right: -35px; border-radius: 10px; transition: .1s linear } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-title-wrapper:after { transform: translate(-50%, -50%) rotate(-45deg); right: -52px } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-title-wrapper .faq-title { margin: 0 } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-content { height: 0; overflow: hidden } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-content p a { text-decoration: underline; color: blue } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item.active .faq-title-wrapper:before { transform: translateY(-50%) rotate(-45deg) } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item.active .faq-title-wrapper:after { transform: translate(-50%, -50%) rotate(45deg) } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item.active .faq-content { height: auto; margin-top: 20px } @media screen and (max-width: 1040px) { html .main>.faqs-page, html main>.faqs-page { margin: 0 10px } } @media screen and (max-width: 840px) { .main .faqs-page .wrapper h1.red { font-size: 0 } .main .faqs-page .wrapper h1.red::before { font-size: 25px } } @media screen and (max-width: 640px) { .main .faqs-page .wrapper { padding: 20px } } @media screen and (max-width: 500px) { .main .faqs-page .wrapper { padding: 20px 10px } .main .faqs-page .wrapper .faqs-list .faq-group { font-size: 18px } .main .faqs-page .wrapper .faqs-list .faq-group h2 { font-size: 18px } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item { padding: 10px 45px 10px 10px } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-title-wrapper .faq-title { font-size: 16px } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-title-wrapper:before { right: -25px } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-title-wrapper:after { right: -42px } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-content * { font-size: 14px } .main .faqs-page .wrapper .faqs-list .faq-group .faq-item .faq-content p { margin: 5px 0 } } footer { width: 100%; z-index: 100; position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 40px 0; padding: 40px 0; backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px) } footer .footer-links .container { max-width: 1000px; margin: 0 auto; box-sizing: border-box; display: flex; padding: 0 20px; list-style: none; gap: 10px 30px; font-size: 14px; flex-wrap: wrap } footer .footer-links .container a { text-decoration: underline } footer p { font-size: 12px; padding: 5px 0; margin: 0 } footer p a { text-decoration: underline } footer .footer-payment .container, footer .footer-logos .container, footer .footer-promotion .container, footer .footer-text .container { max-width: 1000px; margin: 0 auto; box-sizing: border-box; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 10px 5px } footer .footer-payment .container svg, footer .footer-logos .container svg, footer .footer-promotion .container svg, footer .footer-text .container svg { height: 50px } footer .footer-logos .container { gap: 20px } footer .footer-logos .container svg, footer .footer-logos .container img { height: 25px } footer .footer-logos .container #footer_igaming, footer .footer-logos .container #footer_connex { background: #fff; padding: 2px 5px; box-sizing: border-box; border-radius: 5px } footer .footer-promotion .container svg { height: 40px } footer .footer-promotion .container .company-logo { margin-left: auto } @media screen and (max-width: 1040px) { footer { gap: 25px 0 } footer .footer-payment .container svg { height: 45px } footer .footer-logos .container { gap: 10px } footer .footer-logos .container svg { height: 20px } footer .footer-promotion .container svg { height: 35px } } @media screen and (max-width: 840px) { footer { padding: 20px 0 } .logged-in footer { padding: 20px 0 100px 0 } } @media screen and (max-width: 640px) { footer { gap: 25px 0 } footer .footer-payment .container svg { height: 35px } footer .footer-promotion .container svg { height: 30px } footer .footer-links .container { gap: 5px 20px } } .site-background.logged-in header .header nav a[href="/myaccount/trophies"] { display: none } .site-background header { width: 100%; height: auto; display: block; top: 0; z-index: 300; margin: 0 auto; position: fixed; backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px) } .site-background header .header>.container { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 20px; height: 70px; position: relative } .site-background header .header>.container .deposit-button { margin-left: auto } .site-background header .header>.container .deposit-button .deposit-now, .site-background header .header>.container .deposit-button .reverse-now { padding: 0 40px; text-transform: capitalize; height: 50px; line-height: 50px; display: block } .site-background header .header>.container .deposit-button .deposit-now:before { content: "deposit" } .site-background header .header>.container .deposit-button .reverse-now:before { content: "reverse" } .site-background header .header>.container .banking-dropdown { height: 50px; border-radius: 25px; background: #fff; padding: 10px; position: absolute; top: 10px; right: 160px; overflow: hidden; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); box-sizing: border-box } .site-background header .header>.container .banking-dropdown .balance-header { display: flex; gap: 10px; cursor: pointer } .site-background header .header>.container .banking-dropdown .balance-header svg { height: 30px } .site-background header .header>.container .banking-dropdown .balance-header .balance { height: 30px; position: relative; width: 120px } .site-background header .header>.container .banking-dropdown .balance-header .balance p { margin: 0; text-align: center; text-transform: capitalize } .site-background header .header>.container .banking-dropdown .balance-header .balance p.balance-title { font-size: 10px; line-height: 10px } .site-background header .header>.container .banking-dropdown .balance-header .balance p.balance-amount { font-size: 20px; line-height: 20px; font-weight: bold } .site-background header .header>.container .banking-dropdown .balance-header .balance p.balance-open-title { visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; line-height: 20px; font-weight: bold; text-transform: capitalize } .site-background header .header>.container .banking-dropdown .balance-header .arrow { background: #eee; border-radius: 50%; width: 30px; height: 30px; position: relative } .site-background header .header>.container .banking-dropdown .balance-header .arrow:before, .site-background header .header>.container .banking-dropdown .balance-header .arrow:after { content: ""; display: block; width: 10px; height: 3px; background: #000; border-radius: 10px; position: absolute; left: 50%; top: 50%; transition: .1s linear; transform: translate(-50%, -50%) rotate(45deg); margin-left: -3px } .site-background header .header>.container .banking-dropdown .balance-header .arrow:after { transform: translate(-50%, -50%) rotate(-45deg); margin-left: 3px } .site-background header .header>.container .banking-dropdown .balance-section { display: block; text-align: center; margin-top: 20px } .site-background header .header>.container .banking-dropdown .balance-section p { text-transform: capitalize; margin: 0; font-size: 14px; line-height: 14px; font-weight: bold } .site-background header .header>.container .banking-dropdown .balance-section p:nth-of-type(2) { margin-top: 5px; font-size: 22px; line-height: 22px } .site-background header .header>.container .banking-dropdown .deposit-button { padding: 0; text-align: center; margin-top: 20px } .site-background header .header>.container .banking-dropdown .deposit-button .deposit-now:before { content: "deposit now" } .site-background header .header>.container .banking-dropdown.active { height: auto } .site-background header .header>.container .banking-dropdown.active .arrow:before { transform: translate(-50%, -50%) rotate(-45deg) } .site-background header .header>.container .banking-dropdown.active .arrow:after { transform: translate(-50%, -50%) rotate(45deg) } .site-background header .header>.container .banking-dropdown.active .balance p.balance-title { visibility: hidden } .site-background header .header>.container .banking-dropdown.active .balance p.balance-amount { visibility: hidden } .site-background header .header>.container .banking-dropdown.active .balance p.balance-open-title { visibility: visible } .site-background header .header .logo { display: block; max-height: 50px; cursor: pointer; box-sizing: border-box; max-width: 175px; aspect-ratio: auto; object-fit: contain; transition: all .1s linear } .site-background header .header .logo.mobile-logo { display: none } .site-background header .header nav #nav-icon, .site-background header .header nav #aff-nav-icon { display: none } .site-background header .header nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 20px } .site-background header .header nav ul a[href="/?signout=1"], .site-background header .header nav ul a[href="/myaccount"], .site-background header .header nav ul a .top-slots-menu { display: none } .site-background header .header nav ul a li { text-transform: capitalize } .site-background header .header nav ul a.jackpots-nav { display: none } .site-background header .header nav ul .mobile-nav-buttons { display: none; margin-top: auto; margin-bottom: 20px; flex-direction: column; gap: 10px 0; width: 100%; padding: 0 20px; box-sizing: border-box } .site-background header .header nav ul .mobile-nav-buttons button { padding: 10px 20px; cursor: pointer; font-size: 20px; width: 100% } .site-background header .header .nav-buttons { display: flex; align-items: center; gap: 15px; margin-left: auto } .site-background header .header .nav-buttons button { padding: 10px 20px; cursor: pointer; font-size: 20px } .site-background header .my-account-bar { border-bottom: 1px solid #fff } .site-background header .my-account-bar>.container { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 20px; height: 40px } .site-background header .my-account-bar p { margin: 0 } .site-background header .my-account-bar ul { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 15px } .site-background header .my-account-bar ul li { text-transform: capitalize; position: relative; padding: 0 5px; cursor: pointer } .site-background header .my-account-bar ul li#inbox-icon.unread:after { content: ""; display: block; position: absolute; background: red; border-radius: 50%; width: 5px; height: 5px; top: 0; right: 0 } @media screen and (max-width: 1040px) { .site-background header .header>.container { margin: 0 15px; gap: 15px } .site-background header .header>.container nav ul { gap: 15px } .site-background header .header>.container nav ul a li { font-size: 14px } .site-background header .header>.container .banking-dropdown .deposit-button .deposit-now { padding: 0 25px } .site-background header .header>.container .banking-dropdown .balance-header { gap: 5px } .site-background header .header>.container .banking-dropdown .balance-header .balance { width: 95px } .site-background header .header>.container .banking-dropdown .balance-header .balance p.balance-open-title { font-size: 18px } .site-background header .header .nav-buttons { gap: 10px } .site-background header .header .nav-buttons button { padding: 10px 15px; font-size: 18px } .site-background header .my-account-bar>.container { margin: 0 20px } } @media screen and (max-width: 940px) { .site-background header .my-account-bar>.container { margin: 0 15px } .site-background header .header>.container { margin: 0 10px } .site-background header .header>.container .banking-dropdown { right: 120px } .site-background header .header>.container .deposit-button .deposit-now { padding: 0 25px } } @media screen and (max-width: 840px) { .site-background header .header .container nav { order: 3 } .site-background header .header .container nav #nav-icon, .site-background header .header .container nav #aff-nav-icon { display: block; width: 50px; height: 40px; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; max-height: initial; position: relative } .site-background header .header .container nav #nav-icon div, .site-background header .header .container nav #aff-nav-icon div { display: block; position: absolute; height: 8px; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); transition: .25s ease-in-out; border-radius: 10px } .site-background header .header .container nav #nav-icon div:nth-child(1), .site-background header .header .container nav #aff-nav-icon div:nth-child(1) { margin-top: -16px } .site-background header .header .container nav #nav-icon div:nth-child(4), .site-background header .header .container nav #aff-nav-icon div:nth-child(4) { margin-top: 16px } .site-background header .header .container nav #nav-icon.open div:nth-child(1), .site-background header .header .container nav #nav-icon.open div:nth-child(4), .site-background header .header .container nav #aff-nav-icon.open div:nth-child(1), .site-background header .header .container nav #aff-nav-icon.open div:nth-child(4) { margin-top: 0; width: 0 } .site-background header .header .container nav #nav-icon.open div:nth-child(2), .site-background header .header .container nav #aff-nav-icon.open div:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg) } .site-background header .header .container nav #nav-icon.open div:nth-child(3), .site-background header .header .container nav #aff-nav-icon.open div:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg) } .site-background header .header .container nav #nav-icon.open~ul, .site-background header .header .container nav #aff-nav-icon.open~ul { height: calc(100vh - 70px) } .site-background header .header .container nav ul { position: fixed; top: 70px; left: 0; width: 100%; backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); flex-flow: column; gap: 0; height: 0; overflow: hidden; transition: height .25s } .site-background header .header .container nav ul a { width: 100%; text-align: center } .site-background header .header .container nav ul a[href="/?signout=1"], .site-background header .header .container nav ul a[href="/myaccount"], .site-background header .header .container nav ul a .top-slots-menu { display: block } .site-background header .header .container nav ul a[href="/myaccount/trophies"] { display: block } .site-background header .header .container nav ul a[href="/slots/rewards-reel"] { display: none } .site-background header .header .container nav ul a .top-slots-menu { font-size: 0; background-position: center; background-size: cover } .site-background header .header .container nav ul a li { height: 70px; line-height: 70px; font-size: 40px } .site-background header .header .container nav ul a.jackpots-nav { display: block } .site-background header .header .container nav ul .mobile-nav-buttons { display: flex } .site-background header .header .container .nav-buttons { order: 2 } .site-background header .header .container .nav-buttons .join-button { display: none } .site-background header .header .container .my-account-bar { display: none } .site-background.logged-in header .my-account-bar { display: none } .site-background.logged-in header .header .container>.deposit-button { display: none } .site-background.logged-in header .header .container nav { margin-left: auto } .site-background.logged-in header .header .container .banking-dropdown { left: 50%; transform: translateX(-50%); right: initial; max-width: 215px } } @media screen and (max-width: 640px) { .site-background header .header .container nav ul a li { height: 50px; line-height: 50px; font-size: 30px } } @media screen and (max-width: 500px) { .site-background header .header>.container { margin: 0 10px; gap: 10px } .site-background header .header>.container .banking-dropdown { width: calc(100% - 140px) } .site-background header .header>.container .banking-dropdown .balance-header { gap: 5px } .site-background header .header>.container .banking-dropdown .balance-header svg { margin-right: auto } .site-background header .header>.container .banking-dropdown .balance-header .balance { margin-right: auto; width: 94px } .site-background.logged-in header .header .logo { max-width: 50px; max-height: 50px; height: initial; object-fit: contain; display: none } .site-background.logged-in header .header .logo.mobile-logo { display: block } } .index-page .site-background, .index-page .logged-in.site-background { padding-top: 0; min-height: 100vh } .index-page .site-background.logged-in .main.homepage .main-promo, .index-page .site-background.logged-in main.homepage .main-promo { padding: 131px 10px 40px 10px } .index-page .site-background.logged-in .main#top .games-filter-bar, .index-page .site-background.logged-in main#top .games-filter-bar { margin: 111px auto 0 auto } .index-page .site-background.logged-in .main#top .games-filter-bar~.featured-slots, .index-page .site-background.logged-in main#top .games-filter-bar~.featured-slots { margin: 180px auto 0 auto } .main.homepage, main.homepage { margin: 0 } .main.homepage .main-promo, main.homepage .main-promo { padding: 90px 10px 40px 10px; background-repeat: no-repeat; background-position: center; background-size: auto 100%; overflow: hidden; width: 100%; margin: 0 auto; box-sizing: border-box; position: relative } .main.homepage .main-promo .promo-container, main.homepage .main-promo .promo-container { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 20px 0; position: relative; z-index: 10 } .main.homepage .main-promo .promo-container:before, .main.homepage .main-promo .promo-container:after, main.homepage .main-promo .promo-container:before, main.homepage .main-promo .promo-container:after { content: ""; display: block; position: absolute; top: 0; background-size: contain; background-position: center right; background-repeat: no-repeat; height: 100%; width: 240px; left: -240px } .main.homepage .main-promo .promo-container:after, main.homepage .main-promo .promo-container:after { left: initial; right: -240px; background-position: center left } .main.homepage .main-promo .promo-container .promo-text, main.homepage .main-promo .promo-container .promo-text { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; line-height: 1.1; text-align: center; position: relative; z-index: 1; cursor: pointer; order: 1 } .main.homepage .main-promo .promo-container .promo-text span, main.homepage .main-promo .promo-container .promo-text span { font-weight: bold } .main.homepage .main-promo .promo-container .promo-text span p, main.homepage .main-promo .promo-container .promo-text span p { margin: 0 } .main.homepage .main-promo .promo-container .promo-cta, main.homepage .main-promo .promo-container .promo-cta { font-size: 36px; padding: 20px 40px; font-weight: bold; text-transform: capitalize; cursor: pointer; position: relative; z-index: 1; transition: transform linear .1s; order: 2; overflow: hidden } @keyframes cta-shine { 0% { left: calc(0px - 60px) } 10%, 100% { left: calc(100% + 30px) } } .main.homepage .main-promo .promo-container .promo-cta::after, main.homepage .main-promo .promo-container .promo-cta::after { content: ""; display: block; position: absolute; background: rgba(255, 255, 255, 0.35); width: 30px; height: 100%; top: 0; left: calc(0px - 60px); filter: blur(5px); transform: skewX(-15deg); animation: cta-shine 5s 2s linear infinite } .main.homepage .main-promo .promo-container .promo-cta:hover, main.homepage .main-promo .promo-container .promo-cta:hover { transform: scale(1.1) } .main.homepage .main-promo .promo-container .promo-cta-order, main.homepage .main-promo .promo-container .promo-cta-order { order: 2 } .main.homepage .main-promo .promo-container.hide-icons:before, .main.homepage .main-promo .promo-container.hide-icons:after, main.homepage .main-promo .promo-container.hide-icons:before, main.homepage .main-promo .promo-container.hide-icons:after { display: none } .main.homepage .main-promo .hp-smallprint, main.homepage .main-promo .hp-smallprint { font-size: 10px; line-height: 12px; text-align: center; position: relative; z-index: 1; max-width: 600px; margin: 0 auto; order: 3 } .main.homepage .main-promo .hp-smallprint a, main.homepage .main-promo .hp-smallprint a { text-decoration: underline } .main.homepage .main-content, main.homepage .main-content { overflow: hidden; padding-bottom: 40px } .main.homepage .featured-games, main.homepage .featured-games { margin: 0 auto; max-width: 1000px; padding: 0 } .main.homepage .featured-games .top-bar, main.homepage .featured-games .top-bar { display: flex; align-items: center; margin: 30px 0 } .main.homepage .featured-games .top-bar p, main.homepage .featured-games .top-bar p { font-size: 26px; font-weight: bold; text-transform: capitalize; margin: 0 } .main.homepage .featured-games .top-bar a, main.homepage .featured-games .top-bar a { margin-left: auto; display: block; padding: 10px 30px; text-transform: capitalize; font-size: 18px } .main.homepage .featured-games .featured-slots:not(.custom) .wrapper .icon-container:nth-child(n+21), main.homepage .featured-games .featured-slots:not(.custom) .wrapper .icon-container:nth-child(n+21) { display: none } .main.homepage .welcome-text, main.homepage .welcome-text { max-width: 1000px; margin: 20px auto 0 auto; width: 100%; overflow: hidden } .main.homepage .welcome-text .wrapper, main.homepage .welcome-text .wrapper { box-sizing: border-box; padding: 0 } .main.homepage .welcome-text .wrapper *, main.homepage .welcome-text .wrapper * { text-align: left } .main.homepage .welcome-text .wrapper h1, main.homepage .welcome-text .wrapper h1 { font-size: 26px } .main.homepage .welcome-text .wrapper a, main.homepage .welcome-text .wrapper a { text-decoration: underline } @media screen and (max-width: 1040px) { .main.homepage .main-content, main.homepage .main-content { padding: 0 15px 15px 15px } } @media screen and (max-width: 840px) { .index-page .logged-in.site-background .main.homepage .main-promo, .index-page .logged-in.site-background main.homepage .main-promo { padding: 80px 10px 105px 10px } .index-page .logged-in.site-background .main#top .games-filter-bar, .index-page .logged-in.site-background main#top .games-filter-bar { margin: 70px auto 0 auto } .index-page .logged-in.site-background .main#top .games-filter-bar~.featured-slots, .index-page .logged-in.site-background main#top .games-filter-bar~.featured-slots { margin: 140px auto 0 auto } } @media screen and (max-width: 640px) { .main.homepage .main-promo, main.homepage .main-promo { height: 100dvh; background-size: cover; background-position: bottom center; padding: 80px 10px 105px 10px; display: flex; flex-direction: column; transition: padding .2s linear } .main.homepage .main-promo .promo-container, main.homepage .main-promo .promo-container { max-width: initial; height: 100%; justify-content: center } .main.homepage .main-promo .promo-container:before, .main.homepage .main-promo .promo-container:after, main.homepage .main-promo .promo-container:before, main.homepage .main-promo .promo-container:after { display: none } .main.homepage .main-promo .promo-container .promo-text span p, main.homepage .main-promo .promo-container .promo-text span p { font-size: .9em } .main.homepage .main-promo .promo-container .hp-smallprint, main.homepage .main-promo .promo-container .hp-smallprint { order: 2 } .main.homepage .main-promo .promo-container .promo-cta, main.homepage .main-promo .promo-container .promo-cta { order: 3 } .main.homepage .main-promo .promo-container .promo-cta-order, main.homepage .main-promo .promo-container .promo-cta-order { order: 3 } .main.homepage .featured-games .top-bar, main.homepage .featured-games .top-bar { margin: 15px 0 } .main.homepage .featured-games .top-bar p, main.homepage .featured-games .top-bar p { font-size: 20px } .main.homepage .featured-games .top-bar a, main.homepage .featured-games .top-bar a { padding: 10px 15px; font-size: 16px } .main.homepage .featured-games .wrapper .icon-container:nth-child(n+11), main.homepage .featured-games .wrapper .icon-container:nth-child(n+11) { display: none } .main.homepage .welcome-text h1, main.homepage .welcome-text h1 { font-size: 22px; margin: 0 } .cookies-accepted .main.homepage .main-promo, .cookies-accepted main.homepage .main-promo { height: 100dvh; padding: 105px 10px 55px 10px } } @media screen and (max-width: 500px) { .main.homepage .main-promo .promo-container .promo-text span p, main.homepage .main-promo .promo-container .promo-text span p { font-size: .7em } } @media screen and (max-width: 400px) { .main.homepage .main-promo .promo-container, main.homepage .main-promo .promo-container { gap: 5px 0 } .main.homepage .main-promo .promo-container .promo-text span p, main.homepage .main-promo .promo-container .promo-text span p { font-size: .6em } .main.homepage .main-promo .promo-container .promo-cta, main.homepage .main-promo .promo-container .promo-cta { padding: 10px 25px; font-size: 30px } } @media screen and (max-width: 350px) { .main.homepage .main-promo .promo-container .promo-text span p, main.homepage .main-promo .promo-container .promo-text span p { font-size: .5em } } #webpush-notification-center { background: #fff !important; width: 350px !important } #webpush-notification-center #webpush-notification-center-header { border: none; height: initial } #webpush-notification-center #webpush-notification-center-header #webpush-notification-center-icon { display: none } #webpush-notification-center #webpush-notification-center-header #webpush-notification-center-title { font-size: 0; text-align: left; letter-spacing: initial; height: 50px; line-height: 50px; color: #000; font-weight: bold; padding: 0 20px; border-bottom: 1px solid #eee; z-index: 1 } #webpush-notification-center #webpush-notification-center-header #webpush-notification-center-title:after { content: "Inbox"; font-size: 28px } #webpush-notification-center #webpush-notification-center-header #webpush-notification-center-close { width: 25px; height: 25px; top: 50%; transform: translateY(-50%); right: 20px } #webpush-notification-center #webpush-notification-center-header #webpush-notification-center-close:before, #webpush-notification-center #webpush-notification-center-header #webpush-notification-center-close:after { content: ""; background: #000; position: absolute; width: 25px; height: 4px; display: block; border-radius: 10px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg) } #webpush-notification-center #webpush-notification-center-header #webpush-notification-center-close:after { transform: translate(-50%, -50%) rotate(-45deg) } #webpush-notification-center #webpush-notification-center-list { position: relative; top: initial; height: calc(100% - 51px); overflow: auto } #webpush-notification-center #webpush-notification-center-list #webpush-notification-center-placeholder { color: #000 } #webpush-notification-center #webpush-notification-center-list .webpush-notification-center-item { padding: 20px; box-sizing: border-box; border-bottom: 1px solid #cfcfcf } #webpush-notification-center #webpush-notification-center-list .webpush-notification-center-item:hover { background: none } #webpush-notification-center #webpush-notification-center-list .webpush-notification-center-item .webpush-notification-center-item-image { background-color: #eee; border-radius: 1em; margin-bottom: 20px } #webpush-notification-center #webpush-notification-center-list .webpush-notification-center-item .webpush-notification-center-item-image[src="https://s3.xtremepush.com/campaign/1450_KmWp-RxS8po49G-LdO8D1471DoTJO-mo.png"] { display: none } #webpush-notification-center #webpush-notification-center-list .webpush-notification-center-item .webpush-notification-center-item-text-container { padding: 0 } #webpush-notification-center #webpush-notification-center-list .webpush-notification-center-item .webpush-notification-center-item-title { padding: 0 } #webpush-notification-center #webpush-notification-center-list .webpush-notification-center-item .webpush-notification-center-item-title p { font-size: 16px } #webpush-notification-center #webpush-notification-center-list .webpush-notification-center-item .webpush-notification-center-item-text { padding: 0 } #webpush-notification-center #webpush-notification-center-list .webpush-notification-center-item * { color: #000 } .main.in-game { margin-top: 0 } .main.in-game>.container { background: none; border-radius: 0; margin: 0 auto } .main.in-game>.container>.wrapper { display: flex; flex-wrap: wrap } .main.in-game>.container>.wrapper .back-all-games { order: 1; text-transform: capitalize; line-height: 60px; padding: 0 15px; font-weight: bold; font-size: 18px; border-radius: 10px 0 0 10px; display: flex; align-items: center; margin: 0 0 10px 0 } .main.in-game>.container>.wrapper .back-all-games:before { content: ""; background-position: center; background-repeat: no-repeat; background-size: auto 22px; width: 20px; height: 22px; margin-right: 5px } .main.in-game>.container>.wrapper h1 { order: 2; padding: 0 15px; font-size: 18px; line-height: 60px; flex: auto; background: #fff; margin: 0 0 10px 0; width: calc(100% - 250px); overflow: hidden; text-overflow: ellipsis; white-space: pre; text-align: left } .main.in-game>.container>.wrapper .game-container h1, .main.in-game>.container>.wrapper .game-container2 h1 { width: auto; margin: 0; font-weight: normal; font-size: 16px } .main.in-game>.container>.wrapper .fullscreen-open-button, .main.in-game>.container>.wrapper .fullscreen-close-button { order: 3; padding: 0 15px; display: flex; align-items: center; width: 40px; background: #fff; border-radius: 0 10px 10px 0; margin: 0 0 10px 0 } .main.in-game>.container>.wrapper .fullscreen-open-button .fullscreen-button, .main.in-game>.container>.wrapper .fullscreen-close-button .fullscreen-button { width: 40px; height: 40px; background-size: 100%; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38.89 38.89'%3E%3Cdefs%3E%3Cstyle%3E.fullscreenopen1%7Bfill:%23070f18%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='fullscreenopen1' d='M38.87 2.35c.08-.62-.11-1.27-.59-1.74s-1.12-.67-1.74-.59c-.08-.01-.17-.03-.25-.03H21.6c-1.15 0-2.09.93-2.09 2.09s.93 2.09 2.09 2.09h10.17L20.95 14.99c-.82.82-.82 2.14 0 2.95.82.82 2.14.82 2.95 0L34.72 7.12v10.17a2.09 2.09 0 1 0 4.18 0V2.6c0-.09-.02-.17-.03-.25ZM17.3 34.72H7.13L17.95 23.9c.82-.82.82-2.14 0-2.95s-2.14-.82-2.95 0L4.18 31.76V21.59c0-1.15-.93-2.09-2.09-2.09-1.16.01-2.09.94-2.09 2.1v14.69c0 .09.02.17.03.25-.08.62.11 1.27.59 1.74s1.12.67 1.74.59c.08.01.17.03.25.03H17.3c1.15 0 2.09-.93 2.09-2.09s-.93-2.09-2.09-2.09Z'/%3E%3C/g%3E%3C/svg%3E") } .main.in-game>.container>.wrapper .fullscreen-open-button .fullscreen-button svg, .main.in-game>.container>.wrapper .fullscreen-close-button .fullscreen-button svg { display: none } .main.in-game>.container>.wrapper .fullscreen-close-button { display: none } .main.in-game>.container>.wrapper .fullscreen-close-button .fullscreen-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38.89 38.89'%3E%3Cdefs%3E%3Cstyle%3E.fullscreenclose1%7Bfill:%23070f18%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='fullscreenclose1' d='M36.81 15.21H26.64l6.82-6.82c.82-.82.82-2.14 0-2.95-.82-.82-2.14-.82-2.95 0l-6.82 6.82V2.09a2.09 2.09 0 1 0-4.18 0v14.69c0 .09.02.17.03.25-.08.62.11 1.27.59 1.74s1.12.67 1.74.59c.08.01.17.03.25.03h14.69c1.15 0 2.09-.93 2.09-2.09s-.93-2.09-2.09-2.09ZM18.77 20.12c-.48-.48-1.12-.67-1.74-.59-.08-.01-.17-.03-.25-.03H2.09C.94 19.5 0 20.43 0 21.59s.93 2.09 2.09 2.09h10.17L5.44 30.5c-.82.82-.82 2.14 0 2.95.82.82 2.14.82 2.95 0l6.82-6.82V36.8a2.09 2.09 0 1 0 4.18 0V22.11c0-.09-.02-.17-.03-.25.08-.62-.11-1.27-.59-1.74Z'/%3E%3C/g%3E%3C/svg%3E") } .main.in-game>.container>.wrapper .just-like { order: 5; display: flex; flex-direction: column; flex: 0 0 100%; background: #fff; margin-top: 20px; padding: 20px; align-items: center; box-sizing: border-box } .main.in-game>.container>.wrapper .just-like h2 { margin: 0 0 20px 0; color: #000 } .main.in-game>.container>.wrapper .just-like h2:first-letter { text-transform: capitalize } .main.in-game>.container>.wrapper .just-like ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; width: 100% } .main.in-game>.container>.wrapper .just-like ul li { overflow: hidden; width: calc(25% - 8px) } .main.in-game>.container>.wrapper .just-like ul li a { display: block } .main.in-game>.container>.wrapper .just-like ul li a img { width: 100%; display: block } .main.in-game>.container>.wrapper .just-like ul p, .main.in-game>.container>.wrapper .just-like ul .clearfix { display: none } .main.in-game.full_screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 9999 } .main.in-game.full_screen>.container { max-width: initial } .main.in-game.full_screen>.container>.wrapper .back-all-games, .main.in-game.full_screen>.container>.wrapper .fullscreen-close-button, .main.in-game.full_screen>.container>.wrapper h1 { border-radius: 0; margin-bottom: 0 } .main.in-game.full_screen>.container>.wrapper .fullscreen-open-button { display: none } .main.in-game.full_screen>.container>.wrapper .fullscreen-close-button { display: flex } .main.in-game.full_screen .game-container, .main.in-game.full_screen .game-container2 { border-radius: 0; width: 100%; margin: 0; height: calc(100dvh - 60px) !important; flex: 0 0 100% } .main.in-game.full_screen .game-container iframe, .main.in-game.full_screen .game-container2 iframe { height: calc(100% - 35px) !important } .game-container, .game-container2 { order: 4; width: 100%; margin: 0 10px; border-radius: 10px; color: #fff; overflow: hidden; position: relative; display: flex; flex: 0 0 calc(100% - 20px); flex-direction: column; background: #000 url(/images/external/theme/loading.gif) center no-repeat; background-size: 50px; height: auto !important; z-index: 101 } .game-container .in-game-top-bar, .game-container2 .in-game-top-bar { display: flex; height: 45px; background: #232323; align-items: center; padding: 0 10px; display: none !important } .game-container .in-game-top-bar .back, .game-container2 .in-game-top-bar .back { color: #fff; display: flex; gap: 0 5px; font-size: 14px; line-height: 24px } .game-container .in-game-top-bar .back:before, .game-container2 .in-game-top-bar .back:before { content: ""; display: block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.57 24.95'%3E%3Cpath d='m5.04 12.48 8.91-8.91c.82-.82.82-2.14 0-2.95-.82-.82-2.14-.82-2.95 0L.61 11c-.82.82-.82 2.14 0 2.95L11 24.34c.82.82 2.14.82 2.95 0s.82-2.14 0-2.95l-8.91-8.91Z' style='fill:%23fff'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: auto 22px; width: 20px; height: 24px } .game-container .in-game-top-bar .deposit, .game-container2 .in-game-top-bar .deposit { color: #fff; margin-left: auto; display: flex; gap: 0 10px; font-size: 14px; line-height: 24px } .game-container .in-game-top-bar .deposit:after, .game-container2 .in-game-top-bar .deposit:after { content: ""; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.525 27.024'%3E%3Cpath d='M19.955 14.777a11.8 11.8 0 0 1-6.071 1.528 12.748 12.748 0 0 1-4.753-.869q.254.009.509.009a13.021 13.021 0 0 0 6.7-1.707c1.894-1.158 2.936-2.729 2.936-4.424V7.632c.233.115.458.238.673.369a3.613 3.613 0 0 1 0 6.774Zm.85 2.808a.2.2 0 1 1-.4 0v-2.032a.2.2 0 0 1 .4 0ZM18.533 18.7a.2.2 0 0 1-.4 0v-1.931a.2.2 0 1 1 .4 0Zm-2.677.709v-2.133a.203.203 0 0 1 .405 0v2.133a.203.203 0 1 1-.405 0Zm-2.272.1v-2.032a.2.2 0 1 1 .4 0v2.032a.2.2 0 0 1-.4 0Zm-2.272-.2v-1.932a.203.203 0 0 1 .405 0v1.931a.203.203 0 0 1-.405 0Zm5.427 1.8a12.82 12.82 0 0 1-12.141 0 4.185 4.185 0 0 1-2.355-3.387 3.979 3.979 0 0 1 2-3.155v.009c0 1.695 1.043 3.266 2.936 4.424a13.019 13.019 0 0 0 6.7 1.707 14.53 14.53 0 0 0 4.106-.574 6.484 6.484 0 0 1-1.251.977Zm.85 2.808a.2.2 0 0 1-.4 0v-1.74a.2.2 0 1 1 .4 0Zm-2.272 1.114a.203.203 0 0 1-.405 0V23.1a.203.203 0 0 1 .405 0Zm-2.272.709a.203.203 0 0 1-.405 0v-2.133a.203.203 0 0 1 .405 0Zm-2.272.1a.2.2 0 0 1-.4 0v-2.032a.2.2 0 0 1 .4 0Zm-2.272-.2a.2.2 0 1 1-.4 0v-1.931a.2.2 0 0 1 .4 0Zm-2.272-.666a.203.203 0 0 1-.405 0v-1.829a.203.203 0 0 1 .405 0Zm-2.272-1.259a.2.2 0 0 1-.4 0v-1.938a.2.2 0 0 1 .4 0Zm1.244-12.153v1.829a.2.2 0 1 1-.4 0v-1.829a.2.2 0 1 1 .4 0Zm1.972 4.807v1.008a.2.2 0 0 1-.4 0v-1.019a.2.2 0 1 1 .4 0Zm-.1-2.312v-1.931a.2.2 0 0 1 .4 0v1.931a.2.2 0 0 1-.4 0Zm2.174 2.557a.2.2 0 0 1 .2.2v1.829a.203.203 0 0 1-.405 0v-1.829a.2.2 0 0 1 .202-.208Zm.5-4.387v2.032a.2.2 0 0 1-.4 0v-2.032a.2.2 0 0 1 .4 0Zm2.272-.2v2.133a.2.2 0 1 1-.4 0v-2.133a.2.2 0 1 1 .4 0Zm2.272-.507v1.931a.2.2 0 0 1-.4 0V11.52a.2.2 0 0 1 .4 0Zm2.272-1.216v1.829a.2.2 0 1 1-.4 0v-1.829a.2.2 0 0 1 .4 0ZM1.217 6.141a4.185 4.185 0 0 1 2.355-3.387 12.82 12.82 0 0 1 12.141 0 3.613 3.613 0 0 1 0 6.774 12.82 12.82 0 0 1-12.141 0 4.185 4.185 0 0 1-2.357-3.397Zm1.716 5.992a.2.2 0 1 1-.4 0v-1.931a.2.2 0 1 1 .4 0Zm17.658-5.16a10.121 10.121 0 0 0-1.307-.669v-.163c0-1.7-1.043-3.266-2.936-4.424a14.019 14.019 0 0 0-13.409 0C1.045 2.875.003 4.446.003 6.141v3.18c0 1.7 1.043 3.266 2.936 4.424.068.042.139.081.209.122a4.976 4.976 0 0 0-2.116 3.756v3.282c0 1.695 1.043 3.266 2.936 4.423a14.019 14.019 0 0 0 13.409 0c1.894-1.157 2.936-2.729 2.936-4.423v-1.741c.094-.053.188-.107.279-.163 1.894-1.158 2.936-2.729 2.936-4.424v-3.181c0-1.695-1.043-3.266-2.936-4.423Z' fill='%23fff' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: auto 22px; width: 20px; height: 24px } .game-container #netEntUkgcPanel, .game-container2 #netEntUkgcPanel { position: relative; width: 100%; display: flex; background: #000; pointer-events: none; padding: 5px 10px; box-sizing: border-box; height: 35px } .game-container #netEntUkgcPanel p, .game-container2 #netEntUkgcPanel p { margin: 0; color: #fff } .game-container #netEntUkgcPanel p.timer, .game-container2 #netEntUkgcPanel p.timer { margin-left: auto } .game-container iframe, .game-container2 iframe { height: 735px !important } html.fullscreen footer { display: none } html.fullscreen .main.in-game>.container>.wrapper { padding: 0 } @media screen and (max-width: 1040px) { .main.in-game>.container>.wrapper .just-like { flex: 0 0 calc(100% - 20px); margin: 20px 10px 0 10px } .main.in-game>.container>.wrapper .back-all-games { border-radius: 0 } .main.in-game>.container>.wrapper .fullscreen-open-button { border-radius: 0 } } @media screen and (max-width: 840px) { .game-container, .game-container2 { border-radius: 0 } .game-container2 { height: 100% !important; position: fixed; z-index: 999; top: 0; left: 0; display: block; margin: 0 } .game-container2 iframe { height: calc(100dvh - 45px) !important; height: 100dvh !important; position: relative !important } .game-container2#netEntGame iframe { height: calc(100dvh - 35px) !important } } @media screen and (max-width: 640px) { .game-container iframe.splash, .game-container2 iframe.splash { height: calc(100vh - 170px) !important } .main.in-game.full_screen .game-container, .main.in-game.full_screen .game-container2 { border-radius: 0; width: 100%; margin: 0; height: calc(100dvh - 25px) !important } } @media screen and (max-width: 500px) { .game-container iframe.splash, .game-container2 iframe.splash { height: 100dvh !important } .main.in-game>.container>.wrapper .just-like ul li { width: calc(50% - 5px) } .main.in-game>.container>.wrapper h1 { font-size: 16px; width: calc(100% - 145px) } .main.in-game>.container>.wrapper .back-all-games { font-size: 0 } .main.in-game>.container>.wrapper .fullscreen-open-button, .main.in-game>.container>.wrapper .fullscreen-close-button { width: 30px } .main.in-game>.container>.wrapper .fullscreen-open-button .fullscreen-button, .main.in-game>.container>.wrapper .fullscreen-close-button .fullscreen-button { width: 30px; height: 30px } } @media screen and (min-width: 640px) { .game-container iframe.splash, .game-container2 iframe.splash { height: 980px !important } } .my-account .container { background: none; border-radius: initial } .my-account .container .wrapper { display: flex; flex-direction: column; gap: 40px 0 } .my-account .container .wrapper .cashdrop, .my-account .container .wrapper .rewards-reel { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 10px; padding: 40px; box-sizing: border-box; gap: 20px 0; position: relative; margin: 0 } .my-account .container .wrapper .cashdrop .inline-button, .my-account .container .wrapper .rewards-reel .inline-button { display: none } .my-account .container .wrapper .cashdrop.active, .my-account .container .wrapper .rewards-reel.active { background: #ffe382 } .my-account .container .wrapper .cashdrop.active h2, .my-account .container .wrapper .rewards-reel.active h2 { color: #080F19 } .my-account .container .wrapper .cashdrop.active .inline-button, .my-account .container .wrapper .rewards-reel.active .inline-button { display: block; background: #080F19; color: #fff; padding: 20px 40px; font-size: 0; text-transform: uppercase } .my-account .container .wrapper .cashdrop.active .inline-button:before, .my-account .container .wrapper .rewards-reel.active .inline-button:before { content: "play now"; font-size: 20px } .my-account .container .wrapper .cashdrop.active .link, .my-account .container .wrapper .rewards-reel.active .link { display: none } .my-account .container .wrapper .cashdrop:after, .my-account .container .wrapper .rewards-reel:after { content: ""; display: block; width: 300px; height: calc(100% + 60px); position: absolute; top: -30px; right: 20px; background: url("/images/theme/coins.png") center right no-repeat; background-size: contain; pointer-events: none } .my-account .container .wrapper .cashdrop h2, .my-account .container .wrapper .rewards-reel h2 { margin: 0 auto; max-width: 400px; text-align: center; font-size: 30px; line-height: 38px } .my-account .container .wrapper .cashdrop p, .my-account .container .wrapper .rewards-reel p { margin: 0; max-width: 400px; text-align: center } .my-account .container .wrapper .cashdrop>br, .my-account .container .wrapper .rewards-reel>br { display: none } .my-account .container .wrapper .cashdrop button, .my-account .container .wrapper .rewards-reel button { padding: 20px 40px; text-transform: uppercase; font-size: 20px; font-weight: bold; cursor: pointer } .my-account .container .wrapper .cashdrop .link, .my-account .container .wrapper .rewards-reel .link { color: #000; text-decoration: underline } .my-account .container .wrapper .cashdrop .link::first-letter, .my-account .container .wrapper .rewards-reel .link::first-letter { text-transform: capitalize } .my-account .container .wrapper .cashdrop .legacy-cashdrop, .my-account .container .wrapper .rewards-reel .legacy-cashdrop { display: none } .my-account .container .wrapper .cashdrop .legacy-cashdrop>h2, .my-account .container .wrapper .cashdrop .legacy-cashdrop>.inline-button, .my-account .container .wrapper .cashdrop .legacy-cashdrop>br, .my-account .container .wrapper .rewards-reel .legacy-cashdrop>h2, .my-account .container .wrapper .rewards-reel .legacy-cashdrop>.inline-button, .my-account .container .wrapper .rewards-reel .legacy-cashdrop>br { display: none } .my-account .container .wrapper .rewards-reel.active .link { display: block } .my-account .container .wrapper .links { list-style: none; padding: 30px 20px; margin: 0; display: flex; flex-wrap: wrap; background: #fff; border-radius: 10px; justify-content: center; gap: 15px 40px } .my-account .container .wrapper .links li { text-decoration: underline } .my-account .container .wrapper .links li.legacy-cashdrop-link { cursor: pointer } .my-account .container .wrapper .links li a { text-transform: capitalize; color: #000; text-decoration: underline } .my-account .container .wrapper .balance, .my-account .container .wrapper .trophies { display: flex; background: #fff; border-radius: 10px; padding: 30px; flex-direction: column } .my-account .container .wrapper .balance h2, .my-account .container .wrapper .trophies h2 { text-transform: capitalize; margin: 0; font-size: 20px } .my-account .container .wrapper .balance .deposit-now, .my-account .container .wrapper .trophies .deposit-now { text-transform: uppercase; padding: 20px 30px; font-weight: bold; font-size: 18px; width: max-content; margin-left: auto } .my-account .container .wrapper .balance .balance-breakdown, .my-account .container .wrapper .trophies .balance-breakdown { display: flex; box-sizing: border-box; gap: 0 30px; align-items: stretch; margin: 30px 0 20px 0 } .my-account .container .wrapper .balance .balance-breakdown .total, .my-account .container .wrapper .balance .balance-breakdown .real, .my-account .container .wrapper .balance .balance-breakdown .bonus, .my-account .container .wrapper .trophies .balance-breakdown .total, .my-account .container .wrapper .trophies .balance-breakdown .real, .my-account .container .wrapper .trophies .balance-breakdown .bonus { background: #eee; border-radius: 20px; width: 50%; padding: 30px; display: flex; align-items: center; gap: 0 30px; box-sizing: border-box } .my-account .container .wrapper .balance .balance-breakdown .total p, .my-account .container .wrapper .balance .balance-breakdown .real p, .my-account .container .wrapper .balance .balance-breakdown .bonus p, .my-account .container .wrapper .trophies .balance-breakdown .total p, .my-account .container .wrapper .trophies .balance-breakdown .real p, .my-account .container .wrapper .trophies .balance-breakdown .bonus p { margin: 0; font-size: 16px; text-transform: capitalize; font-weight: bold } .my-account .container .wrapper .balance .balance-breakdown .total p.amount, .my-account .container .wrapper .balance .balance-breakdown .real p.amount, .my-account .container .wrapper .balance .balance-breakdown .bonus p.amount, .my-account .container .wrapper .trophies .balance-breakdown .total p.amount, .my-account .container .wrapper .trophies .balance-breakdown .real p.amount, .my-account .container .wrapper .trophies .balance-breakdown .bonus p.amount { font-size: 60px } .my-account .container .wrapper .balance .balance-breakdown .real, .my-account .container .wrapper .balance .balance-breakdown .bonus, .my-account .container .wrapper .trophies .balance-breakdown .real, .my-account .container .wrapper .trophies .balance-breakdown .bonus { width: 25%; flex-direction: column; justify-content: center; align-items: start } .my-account .container .wrapper .balance .balance-breakdown .real p.amount, .my-account .container .wrapper .balance .balance-breakdown .bonus p.amount, .my-account .container .wrapper .trophies .balance-breakdown .real p.amount, .my-account .container .wrapper .trophies .balance-breakdown .bonus p.amount { font-size: 22px } .my-account .container .wrapper .balance .trophy-container, .my-account .container .wrapper .trophies .trophy-container { display: flex; flex-wrap: wrap; box-sizing: border-box; gap: 0 30px; align-items: stretch; margin: 30px 0 20px 0 } .my-account .container .wrapper .balance .trophy-container .trophy-level p.sub-title, .my-account .container .wrapper .balance .trophy-container .latest-trophy p.sub-title, .my-account .container .wrapper .balance .trophy-container .trophy-progress p.sub-title, .my-account .container .wrapper .trophies .trophy-container .trophy-level p.sub-title, .my-account .container .wrapper .trophies .trophy-container .latest-trophy p.sub-title, .my-account .container .wrapper .trophies .trophy-container .trophy-progress p.sub-title { display: block; text-transform: capitalize; text-align: center; margin: 0 0 10px 0 } .my-account .container .wrapper .balance .trophy-container .trophy-level .trophy-icon, .my-account .container .wrapper .balance .trophy-container .latest-trophy .trophy-icon, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-icon, .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-icon { width: 119px; position: relative; cursor: help; transition: .1s all } .my-account .container .wrapper .balance .trophy-container .trophy-level .trophy-icon>p, .my-account .container .wrapper .balance .trophy-container .latest-trophy .trophy-icon>p, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-icon>p, .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon>p, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon>p, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-icon>p { display: none } .my-account .container .wrapper .balance .trophy-container .trophy-level .trophy-icon img, .my-account .container .wrapper .balance .trophy-container .latest-trophy .trophy-icon img, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-icon img, .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon img, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon img, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-icon img { width: 100%; border-radius: 10px; transition: .1s all; box-shadow: 2px 2px 3px 0 transparent } .my-account .container .wrapper .balance .trophy-container .trophy-level .trophy-icon .trophy-desc, .my-account .container .wrapper .balance .trophy-container .latest-trophy .trophy-icon .trophy-desc, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-icon .trophy-desc, .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon .trophy-desc, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon .trophy-desc, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-icon .trophy-desc { display: none; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); position: absolute; top: 119px; left: 0; padding: 20px; border-radius: 10px; z-index: 3; width: 238px; height: 100px; box-sizing: border-box } .my-account .container .wrapper .balance .trophy-container .trophy-level .trophy-icon .trophy-desc h3, .my-account .container .wrapper .balance .trophy-container .latest-trophy .trophy-icon .trophy-desc h3, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-icon .trophy-desc h3, .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon .trophy-desc h3, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon .trophy-desc h3, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-icon .trophy-desc h3 { color: #fff; font-size: 18px; text-transform: initial; margin: 0 0 10px 0 } .my-account .container .wrapper .balance .trophy-container .trophy-level .trophy-icon .trophy-desc p, .my-account .container .wrapper .balance .trophy-container .latest-trophy .trophy-icon .trophy-desc p, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-icon .trophy-desc p, .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon .trophy-desc p, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon .trophy-desc p, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-icon .trophy-desc p { color: #fff; font-size: 14px; margin: 0; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } .my-account .container .wrapper .balance .trophy-container .trophy-level .trophy-icon .trophy-desc:hover, .my-account .container .wrapper .balance .trophy-container .latest-trophy .trophy-icon .trophy-desc:hover, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-icon .trophy-desc:hover, .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon .trophy-desc:hover, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon .trophy-desc:hover, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-icon .trophy-desc:hover { height: auto } .my-account .container .wrapper .balance .trophy-container .trophy-level .trophy-icon .trophy-desc:hover p, .my-account .container .wrapper .balance .trophy-container .latest-trophy .trophy-icon .trophy-desc:hover p, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-icon .trophy-desc:hover p, .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon .trophy-desc:hover p, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon .trophy-desc:hover p, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-icon .trophy-desc:hover p { text-overflow: initial; overflow: initial; display: initial; -webkit-line-clamp: initial; -webkit-box-orient: initial } .my-account .container .wrapper .balance .trophy-container .trophy-level .trophy-icon:hover img, .my-account .container .wrapper .balance .trophy-container .latest-trophy .trophy-icon:hover img, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-icon:hover img, .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon:hover img, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon:hover img, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-icon:hover img { box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25) } .my-account .container .wrapper .balance .trophy-container .trophy-level .trophy-icon:hover .trophy-desc, .my-account .container .wrapper .balance .trophy-container .latest-trophy .trophy-icon:hover .trophy-desc, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-icon:hover .trophy-desc, .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon:hover .trophy-desc, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon:hover .trophy-desc, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-icon:hover .trophy-desc { display: block } .my-account .container .wrapper .balance .trophy-container .trophy-level div, .my-account .container .wrapper .trophies .trophy-container .trophy-level div { width: 119px; height: 119px; display: flex; background: #080F19; border-radius: 10px; justify-content: center; align-items: center } .my-account .container .wrapper .balance .trophy-container .trophy-level div span, .my-account .container .wrapper .trophies .trophy-container .trophy-level div span { font-size: 60px; font-weight: bold; color: #fff } .my-account .container .wrapper .balance .trophy-container .trophy-progress, .my-account .container .wrapper .trophies .trophy-container .trophy-progress { width: calc(100% - 298px) } .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-prog-container, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-prog-container { background: #eee; border-radius: 10px; padding: 30px } .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-prog-container p, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-prog-container p { margin: 0 0 10px 0; text-align: center } .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-bar, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar { width: 100%; margin: 0 auto; text-align: center; text-transform: capitalize; font-size: 18px; position: relative } .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-bar:before, .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-bar:after, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar:before, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar:after { content: ""; display: block; position: relative; left: 0; top: 0; width: 100%; height: 30px; background: #000; border-radius: 50px; box-shadow: 0 0 0 2px #000 } .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-bar:after, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar:after { position: absolute; width: 0; z-index: 3; box-shadow: 0 0 0 2px transparent; transition: 1s linear } .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-bar.level0:after, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar.level0:after { width: 5% } .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-bar.level1:after, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar.level1:after { width: 20% } .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-bar.level2:after, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar.level2:after { width: 45% } .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-bar.level3:after, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar.level3:after { width: 60% } .my-account .container .wrapper .balance .trophy-container .trophy-progress .trophy-bar.level4:after, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar.level4:after { width: 80% } .my-account .container .wrapper .balance .trophy-buttons, .my-account .container .wrapper .trophies .trophy-buttons { display: flex; align-items: center } .my-account .container .wrapper .balance .trophy-buttons a[href="/myaccount/trophies"], .my-account .container .wrapper .balance .trophy-buttons .all-trophies-link, .my-account .container .wrapper .trophies .trophy-buttons a[href="/myaccount/trophies"], .my-account .container .wrapper .trophies .trophy-buttons .all-trophies-link { color: #000; text-transform: capitalize; text-decoration: underline } .my-account .container .wrapper .balance .trophy-buttons a[href="/myaccount/cashier?condensed"], .my-account .container .wrapper .balance .trophy-buttons .deposit-now-link, .my-account .container .wrapper .trophies .trophy-buttons a[href="/myaccount/cashier?condensed"], .my-account .container .wrapper .trophies .trophy-buttons .deposit-now-link { margin-left: auto } #details_password { padding: 20px; max-width: 400px; margin: 0 auto } #details_password #dt_pass .my-account-details .detail-column1 { position: relative } #details_password #dt_pass .my-account-details .detail-column1 p { margin: 15px 0 5px 0; font-size: 16px } #details_password #dt_pass .my-account-details .detail-column2 { position: relative } #details_password #dt_pass .my-account-details .detail-column2 input { line-height: 40px; padding: 0 40px 0 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc; box-sizing: border-box; width: 100%; font-size: 14px } #details_password #dt_pass .my-account-details .detail-column2 .error { margin: 10px 0; position: relative; border-radius: 10px; font-size: 14px; color: #e74c3c; align-items: center; gap: 0 5px; background: none; border: none; cursor: default; line-height: 20px; padding: 0; display: none } #details_password #dt_pass .my-account-details .detail-column2 .error:before { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.83 20.1'%3E%3Cpath d='M14.87.87a2.88 2.88 0 0 1 4.11-.01c1.14 1.14 1.14 3 .01 4.15l-4.97 5.04 4.97 5.05c1.12 1.14 1.11 2.99-.03 4.13s-2.98 1.14-4.1 0l-4.94-5.01-4.95 5.02a2.87 2.87 0 0 1-4.11 0c-1.14-1.14-1.14-3-.01-4.15l4.97-5.04L.84 5C-.28 3.86-.27 2.01.87.87 2.01-.27 3.85-.27 4.97.88l4.94 5.01L14.87.87Z' style='fill:%23fff;fill-rule:evenodd'/%3E%3C/svg%3E") #e74c3c center no-repeat; background-size: 10px, auto; border-radius: 50%; width: 20px; height: 20px; position: relative; display: inline-block } #details_password #dt_pass div.button { text-transform: capitalize; padding: 15px 30px; margin-top: 20px; display: inline-block; text-decoration: none } .detail-column2 .password-eye { position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; cursor: pointer; filter: none; transition: filter .1s linear; background-position: center; background-repeat: no-repeat; background-size: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' x='0' y='0' style='enable-background:new 0 0 444.5 444.3' version='1.1' viewBox='0 0 444.5 444.3'%3E%3Cstyle%3E.eye-hide1%7Bfill:%23ccc%7D%3C/style%3E%3Cg%3E%3Cpath d='M222.9 385.2c-36.8-1-70.6-11.7-101.3-32.2-4-2.7-6.2-2.5-9.6.9-28 28.3-56.2 56.3-84.3 84.4-6.9 6.9-15.5 7.8-21.9 2.5-7.4-6.2-7.9-16-.8-23.3 11.7-11.9 23.5-23.6 35.2-35.4C165.4 257.2 290.5 132.1 415.5 7c3.7-3.7 7.5-7 13.2-7 6.3 0 11 2.7 13.8 8.1 3 5.7 2.4 11.3-1.4 16.4-1.2 1.6-2.7 3-4.1 4.4-26.9 27-53.9 53.9-80.8 80.9-4.6 4.6-4.5 4.6.2 8.7 31.7 27.3 58.9 58.7 82.2 93.4 4.4 6.5 5 12.9.6 19.5-31 46.8-67.8 88-114.8 119.4-24.9 16.6-51.8 28.6-81.7 32.9-6.5.9-13.1 1.8-19.8 1.5zm85.6-164c0 36.5-21.8 69.2-55.6 82.7-26.8 10.7-53.1 8.6-78.3-5.4-3-1.7-5-2.2-7.7.6-8.3 8.7-16.8 17.1-25.4 25.5-2.7 2.6-2 3.8.8 5.5 6.7 4.1 13.5 7.9 20.7 11 25.2 10.7 51.2 16.4 78.8 11.7 25.8-4.4 48.7-15.7 69.9-30.4 37.7-26.1 67.8-59.7 94.5-96.6 2.3-3.1 1.4-5.3-.5-8-20.6-29-44.6-55-71.3-78.6-3.1-2.7-5-2.6-7.8.3-9.5 9.8-19.2 19.4-28.9 28.9-2.7 2.6-3.2 4.6-1.2 8.1 8 13.7 12 28.7 12 44.7zm-88.1 59.6c9.6-.3 18.8-2.5 27.5-7.1 26.6-14.2 38.2-47.3 26.1-74.6-.8-1.8-1.1-5.9-4.8-2.2-24.6 24.7-49.3 49.4-74.1 74-2.2 2.2-2 3.4.9 4.6 7.7 3.4 15.7 5 24.4 5.3zM218.7 58.9c25.5.2 47.5 5.2 68.7 14.4 7.6 3.3 11.1 9.5 10.1 17.1-.9 6.4-6.1 11.4-13 12.7-3.7.7-6.9-.6-10.1-2-17.1-7.4-35.1-11.6-53.8-11.5-24.1.1-46.5 7.4-67.6 18.8-33.6 18.1-61.2 43.5-86.2 71.8-10.7 12-20.7 24.8-30.2 37.8-2.2 3.1-2.3 5.1 0 8.2C51.1 246.4 67 265.4 84.5 283c4 4 6.6 8.4 5.7 14.2-.9 6-4.2 10.5-10.2 12.5-6.3 2.1-11.8.6-16.5-4.1-16.1-16.2-31-33.4-44.6-51.8-5.1-6.9-9.9-14.2-15-21.2-5-6.9-5-13.8-.3-20.9 21.2-32.3 46-61.5 74.6-87.5 18-16.4 37.5-30.9 59-42.4 26.3-13.9 53.9-22.7 81.5-22.9z' class='eye-hide1'/%3E%3Cpath d='M131.1 220.2c1-44.1 34-80.9 76.5-86.5 5-.6 9.9-.9 14.9-.9 9.3 0 16.1 6.6 16 15.4-.1 8.8-6.9 15.3-16.3 15.2-16.8-.3-31.4 5.2-43.3 17-11.8 11.7-17.4 26-17.3 42.7.1 7.8-4.1 13.6-10.7 15.6-6.3 1.9-14.2-1.1-18-6.7-2.8-4-2.2-8.4-1.8-11.8z' class='eye-hide1'/%3E%3C/g%3E%3C/svg%3E") } .detail-column2 .password-eye.show { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' x='0' y='0' style='enable-background:new 0 0 442.1 326.3' version='1.1' viewBox='0 0 442.1 326.3'%3E%3Cstyle%3E.eye-show1%7Bfill:%23ccc%7D%3C/style%3E%3Cg id='Layer_1-2'%3E%3Cpath d='M221.2.1c36.4.2 69 12.7 99.3 32 38.4 24.4 69.7 56.4 97.6 92 7.4 9.4 14.4 19.2 20.8 29.3 4.2 6.6 4.3 13.1 0 19.6-33.8 50.5-73.8 94.8-126.5 126.2-29.4 17.5-61 28-95.7 27-28.6-.8-54.9-9.4-79.8-23-39.5-21.5-71.7-51.6-100.4-85.7-11.9-14.1-23-28.9-33-44.4-4.2-6.6-4.6-13-.2-19.6 31.6-47.8 69.4-89.7 117.8-121.2C144.9 16.8 170.7 5.9 199 1.6c7.2-1 14.7-1.9 22.2-1.5zm-.2 30.6c-6.2-.2-12.3.6-18.4 1.5-27.1 4.2-51 16-73.1 31.5-36.5 25.7-65.9 58.4-92.2 94.1-3 4.1-2.8 6.9.2 10.9 13.1 17.7 26.8 34.8 42.1 50.6 25.2 26 52.6 49 86.1 63.8 24.1 10.6 49.1 15.3 75.4 10.8 24.6-4.2 46.6-14.5 67.1-28.3 39.5-26.6 70.8-61.3 98.4-99.6 1.8-2.5 1-4.1-.5-6.1-7.7-10.9-15.9-21.4-24.5-31.5-24.3-28.6-51-54.4-83.4-73.8-23.7-14.4-49.1-23.5-77.2-23.9z' class='eye-show1'/%3E%3Cpath d='M130.8 162.8c.1-49.2 40.1-88.9 89.5-88.8 49.2.1 88.9 40.1 88.8 89.5-.1 49.2-40.1 88.9-89.6 88.8-49.1 0-88.8-40-88.7-89.5zm89-58.2c-32.1 0-58.4 26.4-58.5 58.5 0 32.3 26.4 58.8 58.7 58.7 32 0 58.5-26.5 58.5-58.5.1-32.3-26.3-58.8-58.7-58.7z' class='eye-show1'/%3E%3C/g%3E%3C/svg%3E") } .detail-column2 .password-eye:hover { filter: brightness(0) } .main.account-details .account-details { padding-bottom: 20px } .main.account-details h1 { color: #000 } .main.account-details>.container { background: #fff; border-radius: 15px } .main.account-details>.container>.wrapper { padding: 20px; max-width: 640px; margin: 0 auto } .main.account-details>.container>.wrapper #dt_details { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0 } .main.account-details>.container>.wrapper #dt_details .my-account-details { display: none } .main.account-details>.container>.wrapper #dt_details h2 { width: 100%; margin: 0 } .main.account-details>.container>.wrapper #dt_details .left, .main.account-details>.container>.wrapper #dt_details .right { width: calc(50% - 10px) } .main.account-details>.container>.wrapper #dt_details .left .detail-column1, .main.account-details>.container>.wrapper #dt_details .right .detail-column1 { position: relative } .main.account-details>.container>.wrapper #dt_details .left .detail-column1 p, .main.account-details>.container>.wrapper #dt_details .right .detail-column1 p { margin: 15px 0 5px 0; font-size: 16px } .main.account-details>.container>.wrapper #dt_details .left .detail-column2, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 { position: relative } .main.account-details>.container>.wrapper #dt_details .left .detail-column2 input, .main.account-details>.container>.wrapper #dt_details .left .detail-column2 p, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 input, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 p { line-height: 40px; padding: 0 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc; box-sizing: border-box; width: 100%; font-size: 14px; min-height: 40px } .main.account-details>.container>.wrapper #dt_details .left .detail-column2 input::-webkit-outer-spin-button, .main.account-details>.container>.wrapper #dt_details .left .detail-column2 input::-webkit-inner-spin-button, .main.account-details>.container>.wrapper #dt_details .left .detail-column2 p::-webkit-outer-spin-button, .main.account-details>.container>.wrapper #dt_details .left .detail-column2 p::-webkit-inner-spin-button, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 input::-webkit-outer-spin-button, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 input::-webkit-inner-spin-button, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 p::-webkit-outer-spin-button, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 p::-webkit-inner-spin-button { -webkit-appearance: none } .main.account-details>.container>.wrapper #dt_details .left .detail-column2 p, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 p { background: #eee; border: 2px solid #eee; cursor: not-allowed } .main.account-details>.container>.wrapper #dt_details .left .detail-column2 .error, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 .error { display: none; margin: 10px 0; position: relative; border-radius: 10px; font-size: 14px; color: #e74c3c; align-items: center; gap: 0 5px; background: none; padding: 0; border: none; line-height: initial } .main.account-details>.container>.wrapper #dt_details .left .detail-column2 .error:before, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 .error:before { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.83 20.1'%3E%3Cpath d='M14.87.87a2.88 2.88 0 0 1 4.11-.01c1.14 1.14 1.14 3 .01 4.15l-4.97 5.04 4.97 5.05c1.12 1.14 1.11 2.99-.03 4.13s-2.98 1.14-4.1 0l-4.94-5.01-4.95 5.02a2.87 2.87 0 0 1-4.11 0c-1.14-1.14-1.14-3-.01-4.15l4.97-5.04L.84 5C-.28 3.86-.27 2.01.87.87 2.01-.27 3.85-.27 4.97.88l4.94 5.01L14.87.87Z' style='fill:%23fff;fill-rule:evenodd'/%3E%3C/svg%3E") #e74c3c center no-repeat; background-size: 10px, auto; border-radius: 50%; width: 20px; height: 20px; min-width: 20px; min-height: 20px; position: relative; display: inline-block } .main.account-details>.container>.wrapper #dt_details .left .detail-column2.error .error, .main.account-details>.container>.wrapper #dt_details .right .detail-column2.error .error { display: flex } .main.account-details>.container>.wrapper #dt_details .left .detail-column2.error input, .main.account-details>.container>.wrapper #dt_details .right .detail-column2.error input { border-color: #e74c3c } .main.account-details>.container>.wrapper #dt_details .left .detail-column1 .address-not-editable, .main.account-details>.container>.wrapper #dt_details .left .detail-column2 .address-not-editable, .main.account-details>.container>.wrapper #dt_details .right .detail-column1 .address-not-editable, .main.account-details>.container>.wrapper #dt_details .right .detail-column2 .address-not-editable { color: red; font-size: 10px; line-height: 12px; background: none; border: none; cursor: default; margin-top: 10px; padding: 0; min-height: initial } .main.account-details>.container>.wrapper #dt_details .button { text-transform: capitalize; padding: 15px 30px; margin-top: 20px; cursor: pointer } .main.account-details>.container>.wrapper #dt_details+.clearfix+h2 { margin: 60px 0 0 0 } .main.account-details>.container>.wrapper .two-factor-form h2 { display: none } .main.account-details>.container>.wrapper .two-factor-form p { margin: 15px 0 5px 0; font-size: 16px; text-transform: capitalize } .main.account-details>.container>.wrapper .two-factor-form span { display: flex; height: 35px; position: relative; width: 100px; background: #eee; box-shadow: inset 0 1px 4px 1px rgba(0, 0, 0, 0.15); border-radius: 5px; overflow: hidden } .main.account-details>.container>.wrapper .two-factor-form span label { position: relative; z-index: 2; width: 50%; text-align: center; cursor: pointer; line-height: 35px; text-transform: capitalize } .main.account-details>.container>.wrapper .two-factor-form span input { display: none } .main.account-details>.container>.wrapper .two-factor-form span input:first-of-type:checked~#pref-slider { background-color: #1BB90D; left: 0 } .main.account-details>.container>.wrapper .two-factor-form span input:first-of-type:checked+label { color: #fff } .main.account-details>.container>.wrapper .two-factor-form span input:last-of-type:checked~#pref-slider { background-color: #e74c3c; left: 50% } .main.account-details>.container>.wrapper .two-factor-form span input:last-of-type:checked+label { color: #fff } .main.account-details>.container>.wrapper .two-factor-form span #pref-slider { position: absolute; top: 0; padding: 0; z-index: 1; width: 50%; height: 100%; border-radius: 5px; transition: all .1s linear } .main.account-details>.container>.wrapper .two-factor-form button { text-transform: capitalize; padding: 15px 30px; margin-top: 20px; display: inline-block; cursor: pointer; font-size: 16px } .main.account-details>.container>.wrapper .two-factor-form a[href="/myaccount/details"] { margin-left: 20px } .main.account-details>.container>.wrapper .two-factor-form a[href="/myaccount/details"] .button { text-transform: capitalize; margin-top: 20px; display: inline-block; cursor: pointer; font-size: 16px; text-decoration: underline !important; background: none !important; color: #000 !important; padding: 5px !important } .main.account-details>.container>.wrapper #dt_comms { margin: 0 } .main.account-details>.container>.wrapper #dt_comms+.clearfix+h2 { margin: 60px 0 0 0 } .main.account-details>.container>.wrapper #dt_comms .my-account-options { display: flex; flex-wrap: wrap } .main.account-details>.container>.wrapper #dt_comms .my-account-options .detail-column1, .main.account-details>.container>.wrapper #dt_comms .my-account-options .detail-column2, .main.account-details>.container>.wrapper #dt_comms .my-account-options .clearfix { display: none } .main.account-details>.container>.wrapper #dt_comms .my-account-options .left, .main.account-details>.container>.wrapper #dt_comms .my-account-options .right { width: 50% } .main.account-details>.container>.wrapper #dt_comms .my-account-options .left p, .main.account-details>.container>.wrapper #dt_comms .my-account-options .right p { margin: 15px 0 5px 0; font-size: 16px; text-transform: capitalize } .main.account-details>.container>.wrapper #dt_comms .my-account-options .left span, .main.account-details>.container>.wrapper #dt_comms .my-account-options .right span { display: flex; height: 35px; position: relative; width: 100px; background: #eee; box-shadow: inset 0 1px 4px 1px rgba(0, 0, 0, 0.15); border-radius: 5px; overflow: hidden } .main.account-details>.container>.wrapper #dt_comms .my-account-options .left span label, .main.account-details>.container>.wrapper #dt_comms .my-account-options .right span label { position: relative; z-index: 2; width: 50%; text-align: center; cursor: pointer; line-height: 35px; text-transform: capitalize } .main.account-details>.container>.wrapper #dt_comms .my-account-options .left span input, .main.account-details>.container>.wrapper #dt_comms .my-account-options .right span input { display: none } .main.account-details>.container>.wrapper #dt_comms .my-account-options .left span input:first-of-type:checked~#pref-slider, .main.account-details>.container>.wrapper #dt_comms .my-account-options .right span input:first-of-type:checked~#pref-slider { background-color: #1BB90D; left: 0 } .main.account-details>.container>.wrapper #dt_comms .my-account-options .left span input:first-of-type:checked+label, .main.account-details>.container>.wrapper #dt_comms .my-account-options .right span input:first-of-type:checked+label { color: #fff } .main.account-details>.container>.wrapper #dt_comms .my-account-options .left span input:last-of-type:checked~#pref-slider, .main.account-details>.container>.wrapper #dt_comms .my-account-options .right span input:last-of-type:checked~#pref-slider { background-color: #e74c3c; left: 50% } .main.account-details>.container>.wrapper #dt_comms .my-account-options .left span input:last-of-type:checked+label, .main.account-details>.container>.wrapper #dt_comms .my-account-options .right span input:last-of-type:checked+label { color: #fff } .main.account-details>.container>.wrapper #dt_comms .my-account-options .left span #pref-slider, .main.account-details>.container>.wrapper #dt_comms .my-account-options .right span #pref-slider { position: absolute; top: 0; padding: 0; z-index: 1; width: 50%; height: 100%; border-radius: 5px; transition: all .1s linear } .main.account-details>.container>.wrapper #dt_comms .my-account-options .button { text-transform: capitalize; padding: 15px 30px; display: inline-block; margin: 20px 0 0 0 } .main.account-details>.container>.wrapper #dt_comms .my-account-options+.clearfix+h2 { margin: 60px 0 0 0 } .main.account-details>.container>.wrapper #verification-status+h2 { margin: 60px 0 0 0 } .main.account-details>.container>.wrapper #verification-status>div p { margin: 15px 0 5px 0; font-size: 16px } .main.account-details>.container>.wrapper #verification-status>div>div { border-radius: 10px; border: 2px solid #eee; padding: 5px; box-sizing: border-box; display: flex; gap: 0 10px; align-items: center; min-height: 44px } .main.account-details>.container>.wrapper #verification-status>div>div:before { content: ""; display: block; position: relative; width: 30px; height: 30px; background-size: 20px; background-repeat: no-repeat; background-position: center } .main.account-details>.container>.wrapper #verification-status>div>div p { margin: 0; text-transform: capitalize } .main.account-details>.container>.wrapper #verification-status>div>div .button { margin-left: auto; padding: 5px 15px; text-transform: capitalize; background: #e74c3c; color: #fff; border-radius: 5px } .main.account-details>.container>.wrapper #verification-status>div>div.verified { border-color: #1bb90d } .main.account-details>.container>.wrapper #verification-status>div>div.verified p { color: #1bb90d } .main.account-details>.container>.wrapper #verification-status>div>div.verified:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 153.21 111.43'%3E%3Cpath d='M129.53 4.18 55.71 78 23.68 45.97c-5.57-5.57-13.93-5.57-19.5 0s-5.57 13.93 0 19.5l41.79 41.79c5.57 5.57 13.93 5.57 19.5 0l83.57-83.58c5.57-5.57 5.57-13.93 0-19.5s-13.93-5.57-19.5 0Z' style='fill:%231bb90d'/%3E%3C/svg%3E") } .main.account-details>.container>.wrapper #verification-status>div>div.required { border-color: #e74c3c } .main.account-details>.container>.wrapper #verification-status>div>div.required p { color: #e74c3c } .main.account-details>.container>.wrapper #verification-status>div>div.required:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.57 122.57'%3E%3Cpath d='M118.39 4.18c-5.57-5.57-13.93-5.57-19.5 0L61.28 41.79 23.68 4.18c-5.57-5.57-13.93-5.57-19.5 0s-5.57 13.93 0 19.5l37.61 37.61L4.18 98.9c-5.57 5.57-5.57 13.93 0 19.5s13.93 5.57 19.5 0l37.61-37.61L98.9 118.4c5.57 5.57 13.93 5.57 19.5 0s5.57-13.93 0-19.5L80.79 61.29l37.61-37.61c5.57-5.57 5.57-13.93 0-19.5Z' style='fill:%23e74c3c'/%3E%3C/svg%3E") } .main.account-details>.container>.wrapper #verification-status>div>div.pending { border-color: #ffa411 } .main.account-details>.container>.wrapper #verification-status>div>div.pending p { color: #ffa411 } .main.account-details>.container>.wrapper #verification-status>div>div.pending:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill:%23ffa411' viewBox='0 0 37.44 41.5'%3E%3Cpath d='M37.44 18.72C37.44 8.4 29.04 0 18.72 0S0 8.4 0 18.72c0 2.89.64 5.67 1.92 8.26a2.502 2.502 0 0 0 4.49-2.21c-.93-1.89-1.4-3.93-1.4-6.05C5.01 11.16 11.16 5 18.73 5s13.72 6.15 13.72 13.72-5.66 13.19-12.79 13.67v-1.95c0-.87-.52-1.64-1.32-1.97a2.14 2.14 0 0 0-2.21.35l-5.3 4.31-.15.14c-.49.49-.76 1.17-.75 1.87.01.7.32 1.36.83 1.83l5.45 4.07a2.14 2.14 0 0 0 2.18.28c.78-.34 1.28-1.11 1.28-1.95v-1.98c9.89-.49 17.79-8.66 17.79-18.67Z'/%3E%3Cpath d='M18.74 8.69c-1.1 0-2 .9-2 2v8.86c0 .79.47 1.51 1.2 1.83l6.89 3.03c.26.12.54.17.8.17a2.005 2.005 0 0 0 .8-3.84l-5.69-2.5v-7.55c0-1.1-.9-2-2-2Z' /%3E%3C/svg%3E") } .main.account-details>.container>.wrapper #verification-status~.my-account-options .detail-column1 p { margin: 15px 0 5px 0; font-size: 16px } .main.account-details>.container>.wrapper #verification-status~.my-account-options .detail-column2 p { line-height: 40px; padding: 0 25px 0 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; box-sizing: border-box; width: 100%; font-size: 14px; background: #eee; border: 2px solid #eee } .main.account-details>.container>.wrapper #security-options p { margin: 15px 0 5px 0; font-size: 16px } .main.account-details>.container>.wrapper #security-options div { min-height: 44px; padding: 5px 5px 5px 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; box-sizing: border-box; width: 100%; font-size: 14px; background: #eee; border: 2px solid #eee; display: flex; align-items: center } .main.account-details>.container>.wrapper #security-options div p { margin: 0; font-size: 14px; max-width: calc(100% - 60px); overflow: auto; text-overflow: ellipsis } .main.account-details>.container>.wrapper #security-options div a { margin-left: auto; padding: 5px 15px; text-transform: capitalize; border-radius: 5px } .main.account-details>.container>.wrapper #details_email, .main.account-details>.container>.wrapper #details_password { margin: 0 } .main.account-details>.container>.wrapper #details_email .detail-column1 p, .main.account-details>.container>.wrapper #details_password .detail-column1 p { margin: 15px 0 5px 0; font-size: 16px } .main.account-details>.container>.wrapper #details_email .detail-column2 p, .main.account-details>.container>.wrapper #details_email .detail-column2 input, .main.account-details>.container>.wrapper #details_password .detail-column2 p, .main.account-details>.container>.wrapper #details_password .detail-column2 input { line-height: 40px; padding: 0 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc; box-sizing: border-box; width: 100%; font-size: 14px } .main.account-details>.container>.wrapper #details_email .detail-column2 p, .main.account-details>.container>.wrapper #details_password .detail-column2 p { background: #eee; border: 2px solid #eee; cursor: not-allowed; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .main.account-details>.container>.wrapper #details_email .detail-column2 .error, .main.account-details>.container>.wrapper #details_password .detail-column2 .error { margin: 10px 0; position: relative; border-radius: 10px; font-size: 14px; color: #e74c3c; align-items: center; gap: 0 5px; background: none; border: none; cursor: default; line-height: initial; padding: 0; display: none } .main.account-details>.container>.wrapper #details_email .detail-column2 .error#hint_pass1, .main.account-details>.container>.wrapper #details_password .detail-column2 .error#hint_pass1 { line-height: 20px } .main.account-details>.container>.wrapper #details_email .detail-column2 .error#hint_pass1:before, .main.account-details>.container>.wrapper #details_password .detail-column2 .error#hint_pass1:before { margin-right: 5px; vertical-align: top } .main.account-details>.container>.wrapper #details_email .detail-column2 .error:before, .main.account-details>.container>.wrapper #details_password .detail-column2 .error:before { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.83 20.1'%3E%3Cpath d='M14.87.87a2.88 2.88 0 0 1 4.11-.01c1.14 1.14 1.14 3 .01 4.15l-4.97 5.04 4.97 5.05c1.12 1.14 1.11 2.99-.03 4.13s-2.98 1.14-4.1 0l-4.94-5.01-4.95 5.02a2.87 2.87 0 0 1-4.11 0c-1.14-1.14-1.14-3-.01-4.15l4.97-5.04L.84 5C-.28 3.86-.27 2.01.87.87 2.01-.27 3.85-.27 4.97.88l4.94 5.01L14.87.87Z' style='fill:%23fff;fill-rule:evenodd'/%3E%3C/svg%3E") #e74c3c center no-repeat; background-size: 10px, auto; border-radius: 50%; width: 20px; height: 20px; min-width: 20px; min-height: 20px; position: relative; display: inline-block } .main.account-details>.container>.wrapper #details_email .detail-column2.error input, .main.account-details>.container>.wrapper #details_password .detail-column2.error input { border-color: #e74c3c } .main.account-details>.container>.wrapper #details_email .detail-column2.error .error, .main.account-details>.container>.wrapper #details_password .detail-column2.error .error { display: flex; white-space: normal } .main.account-details>.container>.wrapper #details_email .button, .main.account-details>.container>.wrapper #details_password .button { text-transform: capitalize; padding: 15px 30px; margin-top: 20px; display: inline-block; cursor: pointer } .main.account-details>.container>.wrapper #details_email a[href="/myaccount/details"], .main.account-details>.container>.wrapper #details_password a[href="/myaccount/details"] { margin-left: 20px } .main.account-details>.container>.wrapper #details_email a[href="/myaccount/details"] .button, .main.account-details>.container>.wrapper #details_password a[href="/myaccount/details"] .button { text-decoration: underline !important; background: none !important; color: #000 !important; padding: 5px !important } #cancelform .delete-card { display: block } .main.transaction-history>.container>.wrapper { padding: 20px 40px } .main.transaction-history>.container>.wrapper h1 { color: #000 } .main.transaction-history>.container>.wrapper .game-history { margin: 0 auto; max-width: 640px } .main.transaction-history>.container>.wrapper .game-history-mobile { display: none } .main.transaction-history>.container>.wrapper form { background: #eee; border-radius: 10px; margin: 0 0 20px 0; padding: 10px; display: flex; flex-wrap: wrap; gap: 10px 15px } .main.transaction-history>.container>.wrapper form p { margin: 0; display: flex; gap: 0 5px; font-size: 14px; align-items: center } .main.transaction-history>.container>.wrapper form p input, .main.transaction-history>.container>.wrapper form p select { line-height: 40px; padding: 0 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc; max-width: 110px } .main.transaction-history>.container>.wrapper form p select { padding: 0 25px 0 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 684.14 534.54'%3E%3Cpath d='M367.09 521.05 679.17 46.38C692.26 26.47 677.98 0 654.16 0H29.99C6.16 0-8.12 26.48 4.97 46.38l312.09 474.66c11.83 17.99 38.2 17.99 50.03 0Z' style='fill:%230'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center right 5px; background-size: 12px; max-width: initial } .main.transaction-history>.container>.wrapper form button { padding: 10px 20px; cursor: pointer } .main.transaction-history>.container>.wrapper form+table+p+table+p { text-align: center; margin-top: 30px } .main.transaction-history>.container>.wrapper form+table+p+table+p a { color: #000 } .main.transaction-history>.container>.wrapper table { margin: 0; width: 100% } .main.transaction-history>.container>.wrapper table td { text-transform: capitalize } .upload-documents .container .wrapper { max-width: 640px; margin: 0 auto; padding: 40px 10px } .upload-documents .container .wrapper .upload-docs-container .upload-docs-message { border-radius: 10px; border: 2px solid #eee; padding: 5px; box-sizing: border-box; display: flex; gap: 0 10px; align-items: center; min-height: 44px } .upload-documents .container .wrapper .upload-docs-container .upload-docs-message svg { width: 30px; height: 30px } .upload-documents .container .wrapper .upload-docs-container .upload-docs-message p { font-size: 16px; margin: 0 } .upload-documents .container .wrapper .upload-docs-container .upload-docs-message.success { border-color: #1bb90d } .upload-documents .container .wrapper .upload-docs-container .upload-docs-message.success p { color: #1bb90d } .upload-documents .container .wrapper .upload-docs-container .upload-docs-message.fail { border-color: red } .upload-documents .container .wrapper .upload-docs-container .upload-docs-message.fail p { color: red } .upload-documents .container .wrapper h1 { margin: 0 0 20px 0 } .upload-documents .container .wrapper .proof-of-id { display: flex } .upload-documents .container .wrapper .proof-of-id img { width: 20px } .upload-documents .container .wrapper select { line-height: 40px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc; padding: 0 25px 0 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 684.14 534.54'%3E%3Cpath d='M367.09 521.05 679.17 46.38C692.26 26.47 677.98 0 654.16 0H29.99C6.16 0-8.12 26.48 4.97 46.38l312.09 474.66c11.83 17.99 38.2 17.99 50.03 0Z' style='fill:%230'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center right 5px; background-size: 12px; max-width: initial } .upload-documents .container .wrapper .upload-docs-id { width: 100% } .upload-documents .container .wrapper .upload-docs-id p { margin: 15px 0 5px 0; font-size: 16px } .upload-documents .container .wrapper .upload-docs-id div { border-radius: 10px; border: 2px solid #eee; padding: 5px; box-sizing: border-box; display: flex; gap: 0 10px; align-items: center; min-height: 44px } .upload-documents .container .wrapper .upload-docs-id div:before { content: ""; display: block; position: relative; width: 30px; height: 30px; background-size: 20px; background-repeat: no-repeat; background-position: center } .upload-documents .container .wrapper .upload-docs-id div p { margin: 0; text-transform: capitalize } .upload-documents .container .wrapper .upload-docs-id div .button { margin-left: auto; padding: 5px 15px; text-transform: capitalize; background: #e74c3c; color: #fff; border-radius: 5px } .upload-documents .container .wrapper .upload-docs-id div.required { border-color: #e74c3c } .upload-documents .container .wrapper .upload-docs-id div.required p { color: #e74c3c } .upload-documents .container .wrapper .upload-docs-id div.required:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.57 122.57'%3E%3Cpath d='M118.39 4.18c-5.57-5.57-13.93-5.57-19.5 0L61.28 41.79 23.68 4.18c-5.57-5.57-13.93-5.57-19.5 0s-5.57 13.93 0 19.5l37.61 37.61L4.18 98.9c-5.57 5.57-5.57 13.93 0 19.5s13.93 5.57 19.5 0l37.61-37.61L98.9 118.4c5.57 5.57 13.93 5.57 19.5 0s5.57-13.93 0-19.5L80.79 61.29l37.61-37.61c5.57-5.57 5.57-13.93 0-19.5Z' style='fill:%23e74c3c'/%3E%3C/svg%3E") } .upload-documents .container .wrapper #submit-button { -webkit-appearance: none; border: none; padding: 0 40px; text-transform: capitalize; height: 50px; line-height: 50px; display: block; margin-top: 20px; font-size: 16px } #deposit-limits-page .content-wrapper, #session-length-limits-page .content-wrapper, #loss-limits .content-wrapper { padding: 0 40px 30px 40px } #deposit-limits-page .content-wrapper .set-dep-limits-table, #session-length-limits-page .content-wrapper .set-dep-limits-table, #loss-limits .content-wrapper .set-dep-limits-table { display: flex; flex-wrap: wrap; gap: 30px } #deposit-limits-page .content-wrapper .set-dep-limits-table form, #session-length-limits-page .content-wrapper .set-dep-limits-table form, #loss-limits .content-wrapper .set-dep-limits-table form { width: 280px } #deposit-limits-page .content-wrapper .set-dep-limits-table form .desc, #session-length-limits-page .content-wrapper .set-dep-limits-table form .desc, #loss-limits .content-wrapper .set-dep-limits-table form .desc { position: relative } #deposit-limits-page .content-wrapper .set-dep-limits-table form .desc p, #session-length-limits-page .content-wrapper .set-dep-limits-table form .desc p, #loss-limits .content-wrapper .set-dep-limits-table form .desc p { margin: 0; font-weight: bold; text-transform: capitalize; display: flex } #deposit-limits-page .content-wrapper .set-dep-limits-table form .desc p .info-svg, #session-length-limits-page .content-wrapper .set-dep-limits-table form .desc p .info-svg, #loss-limits .content-wrapper .set-dep-limits-table form .desc p .info-svg { display: inline-block; vertical-align: top; width: 14px; margin-left: 5px; cursor: pointer } #deposit-limits-page .content-wrapper .set-dep-limits-table form .desc .info-i, #session-length-limits-page .content-wrapper .set-dep-limits-table form .desc .info-i, #loss-limits .content-wrapper .set-dep-limits-table form .desc .info-i { display: none; position: absolute; background: #fff; color: #000; z-index: 1; box-sizing: border-box; padding: 10px; border-radius: 10px; font-size: 14px; font-weight: normal; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.5); width: 100%; top: 35px } #deposit-limits-page .content-wrapper .set-dep-limits-table form .desc .info-i p, #session-length-limits-page .content-wrapper .set-dep-limits-table form .desc .info-i p, #loss-limits .content-wrapper .set-dep-limits-table form .desc .info-i p { font-weight: normal } #deposit-limits-page .content-wrapper .set-dep-limits-table form .desc .info-i.show, #session-length-limits-page .content-wrapper .set-dep-limits-table form .desc .info-i.show, #loss-limits .content-wrapper .set-dep-limits-table form .desc .info-i.show { display: block } #deposit-limits-page .content-wrapper .set-dep-limits-table form select, #deposit-limits-page .content-wrapper .set-dep-limits-table form input, #session-length-limits-page .content-wrapper .set-dep-limits-table form select, #session-length-limits-page .content-wrapper .set-dep-limits-table form input, #loss-limits .content-wrapper .set-dep-limits-table form select, #loss-limits .content-wrapper .set-dep-limits-table form input { line-height: 40px; position: relative; margin: 10px 0 0 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc; box-sizing: border-box; width: 100%; font-size: 14px; padding: 0 25px 0 10px; max-width: initial } #deposit-limits-page .content-wrapper .set-dep-limits-table form select::-webkit-outer-spin-button, #deposit-limits-page .content-wrapper .set-dep-limits-table form select::-webkit-inner-spin-button, #deposit-limits-page .content-wrapper .set-dep-limits-table form input::-webkit-outer-spin-button, #deposit-limits-page .content-wrapper .set-dep-limits-table form input::-webkit-inner-spin-button, #session-length-limits-page .content-wrapper .set-dep-limits-table form select::-webkit-outer-spin-button, #session-length-limits-page .content-wrapper .set-dep-limits-table form select::-webkit-inner-spin-button, #session-length-limits-page .content-wrapper .set-dep-limits-table form input::-webkit-outer-spin-button, #session-length-limits-page .content-wrapper .set-dep-limits-table form input::-webkit-inner-spin-button, #loss-limits .content-wrapper .set-dep-limits-table form select::-webkit-outer-spin-button, #loss-limits .content-wrapper .set-dep-limits-table form select::-webkit-inner-spin-button, #loss-limits .content-wrapper .set-dep-limits-table form input::-webkit-outer-spin-button, #loss-limits .content-wrapper .set-dep-limits-table form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 } #deposit-limits-page .content-wrapper .set-dep-limits-table form select, #session-length-limits-page .content-wrapper .set-dep-limits-table form select, #loss-limits .content-wrapper .set-dep-limits-table form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 684.14 534.54'%3E%3Cpath d='M367.09 521.05 679.17 46.38C692.26 26.47 677.98 0 654.16 0H29.99C6.16 0-8.12 26.48 4.97 46.38l312.09 474.66c11.83 17.99 38.2 17.99 50.03 0Z' style='fill:%230'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center right 5px; background-size: 12px } #deposit-limits-page .content-wrapper .set-dep-limits-table form .btn-container .inline-button, #session-length-limits-page .content-wrapper .set-dep-limits-table form .btn-container .inline-button, #loss-limits .content-wrapper .set-dep-limits-table form .btn-container .inline-button { margin-top: 20px; padding: 10px 20px; font-weight: bold } .main.member-area-error .content-wrapper div .info-error { text-align: center } .main.member-area-error .content-wrapper div button { display: block; padding: 10px 20px; cursor: pointer; font-size: 20px; text-align: center; text-transform: capitalize; margin: 0 auto 30px auto } @media screen and (max-width: 1040px) { .my-account .container .wrapper { padding: 0 10px } } @media screen and (max-width: 840px) { .my-account .container .wrapper { gap: 20px 0 } .my-account .container .wrapper .cashdrop, .my-account .container .wrapper .rewards-reel { padding: 20px } .my-account .container .wrapper .cashdrop:after, .my-account .container .wrapper .rewards-reel:after { right: -85px } .my-account .container .wrapper .links { gap: 15px 35px; padding: 20px } .my-account .container .wrapper .balance { padding: 20px } .my-account .container .wrapper .balance .balance-breakdown { flex-wrap: wrap; gap: 10px } .my-account .container .wrapper .balance .balance-breakdown .total { width: 100%; padding: 20px } .my-account .container .wrapper .balance .balance-breakdown .real, .my-account .container .wrapper .balance .balance-breakdown .bonus { width: calc(50% - 10px); padding: 20px } .my-account .container .wrapper .trophies { padding: 20px } .my-account .container .wrapper .trophies .trophy-container { gap: 0 20px } .my-account .container .wrapper .trophies .trophy-container .trophy-level div { width: 78px; height: 78px } .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon { width: 78px } .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon .trophy-desc { top: 78px; padding: 15px; height: 90px; width: 220px } .my-account .container .wrapper .trophies .trophy-container .trophy-progress { width: calc(100% - 196px) } .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-prog-container { padding: 15px } .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-prog-container p { font-size: 14px } .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar:before, .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar:after { height: 20px } } @media screen and (max-width: 640px) { .main.account-details>.container>.wrapper { padding: 0 } .main.transaction-history>.container>.wrapper form p { font-size: 12px } .main.transaction-history>.container>.wrapper form p input { max-width: 100px; font-size: 12px } .main.transaction-history>.container>.wrapper table tbody td { font-size: 10px; padding: 2px } .my-account .container .wrapper .cashdrop, .my-account .container .wrapper .rewards-reel { margin-top: 0 } .my-account .container .wrapper .cashdrop:after, .my-account .container .wrapper .rewards-reel:after { display: none } .my-account .container .wrapper .cashdrop h2, .my-account .container .wrapper .rewards-reel h2 { font-size: 22px; line-height: 28px } .my-account .container .wrapper .cashdrop.active .inline-button, .my-account .container .wrapper .rewards-reel.active .inline-button { padding: 15px 35px } .my-account .container .wrapper .balance .balance-breakdown { margin: 15px 0 } .my-account .container .wrapper .balance .balance-breakdown .real, .my-account .container .wrapper .balance .balance-breakdown .bonus { width: calc(50% - 5px) } .my-account .container .wrapper .trophies .trophy-container { gap: 20px 10px; margin: 20px 0 20px 0 } .my-account .container .wrapper .trophies .trophy-container .trophy-level, .my-account .container .wrapper .trophies .trophy-container .latest-trophy { flex: 0 0 calc(50% - 5px); display: flex; flex-direction: column; align-items: center } .my-account .container .wrapper .trophies .trophy-container .trophy-level .trophy-icon .trophy-desc, .my-account .container .wrapper .trophies .trophy-container .latest-trophy .trophy-icon .trophy-desc { left: initial; right: 0 } .my-account .container .wrapper .trophies .trophy-container .trophy-progress { width: 100% } .my-account .container .wrapper .links { gap: 5px 20px } .main.transaction-history>.container>.wrapper { padding: 10px } #deposit-limits-page .content-wrapper { padding: 0 20px 30px 20px } #deposit-limits-page .content-wrapper a { word-break: break-all } } @media screen and (max-width: 500px) { .main.account-details>.container>.wrapper #dt_details h2 { font-size: 20px } .main.account-details>.container>.wrapper #dt_details .left, .main.account-details>.container>.wrapper #dt_details .right { width: 100% } .main.account-details>.container>.wrapper #dt_details+.clearfix+h2 { font-size: 20px; margin: 40px 0 0 0 } .main.account-details>.container>.wrapper #dt_comms+.clearfix+h2 { font-size: 20px; margin: 40px 0 0 0 } .main.account-details>.container>.wrapper #verification-status>div p { font-size: 14px } .main.account-details>.container>.wrapper #verification-status+h2 { font-size: 20px; margin: 40px 0 0 0 } .my-account .container .wrapper .trophies .trophy-container .trophy-progress .trophy-bar.level0:after { width: 8% } .my-account .container .wrapper .trophies .trophy-buttons { flex-direction: column } .my-account .container .wrapper .trophies .trophy-buttons a[href="/myaccount/cashier?condensed"] { margin: 10px 0 0 0 } .my-account .container .wrapper .balance .balance-breakdown .total { gap: 0 20px } .my-account .container .wrapper .balance .balance-breakdown .total p.amount { font-size: 38px } .my-account .container .wrapper .balance .deposit-now { margin: 0 auto } } #trophy-popup { position: fixed; bottom: 10px; right: 10px; width: 280px; z-index: 999; transition: all 1s ease-out; display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px 0 } #trophy-popup div { padding: 10px; min-height: 70px; margin: 0; cursor: pointer; display: flex; gap: 0 10px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); border-radius: 15px; align-items: center } #trophy-popup div img { width: 70px; border-radius: 15px } #trophy-popup div p { text-align: left; margin: 0; font-size: 14px; color: #fff } @media screen and (max-width: 400px) { #trophy-popup { left: 50%; transform: translateX(-50%); right: initial } } .which-bingo { display: none; width: 100px; position: fixed; top: 200px; right: -80px; z-index: 100; background: #fff; border-radius: 10px 0 0 10px; padding: 10px; box-shadow: 0 5px 0 0 #d6d6d6; cursor: pointer; transition: all .2s linear } .which-bingo img { width: 100%; height: auto } .which-bingo.show { right: 0 } .which-bingo:hover { right: 0; transition: all .2s linear } .index-page .which-bingo { display: block } @keyframes landscapeRotate { 0% { transform: rotate(0deg) } 100% { transform: rotate(-360deg) } } #landscape-error { display: none; position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background-color: #000; z-index: 9999 } #landscape-error:before { content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; -webkit-animation: rotate 3s linear infinite; animation: landscapeRotate 3s linear infinite; background: url(/images/theme/please-rotate_icon.png) center no-repeat; background-size: 200px 200px; opacity: .5 } #landscape-error:after { content: "please rotate your device"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 50px; color: #fff; font-family: "Poppins", Verdana, sans-serif; text-transform: uppercase; font-weight: 700; text-align: center; line-height: 25px; font-size: 18px } .responsive-wrapper { display: none !important; z-index: 100 !important } .responsive-wrapper.show { display: block !important } .popup { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 999; justify-content: center; align-items: flex-start; overflow-y: scroll } .popup#free-games-popup>.wrapper, .popup#bonus-cash-popup>.wrapper { max-width: 400px } .popup#free-games-popup .game-image, .popup#bonus-cash-popup .game-image { display: flex; flex-direction: column; box-sizing: border-box; position: relative; overflow: hidden; width: 100%; padding-top: 60% } .popup#free-games-popup .game-image:empty, .popup#bonus-cash-popup .game-image:empty { display: none } .popup#free-games-popup .game-image .game-name, .popup#bonus-cash-popup .game-image .game-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0 } .popup#free-games-popup .game-image .logo, .popup#bonus-cash-popup .game-image .logo { position: absolute; width: calc(100% - 50px); height: calc(100% - 50px); max-width: 300px; max-height: 250px; object-fit: contain; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2 } .popup#free-games-popup .game-image .background, .popup#bonus-cash-popup .game-image .background { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: cover } .popup#free-games-popup .wrapper .wrapper, .popup#bonus-cash-popup .wrapper .wrapper { padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 5px 0 } .popup#free-games-popup .wrapper .wrapper *, .popup#bonus-cash-popup .wrapper .wrapper * { margin: 0; padding: 0; color: #000 } .popup#free-games-popup .wrapper .wrapper h1, .popup#bonus-cash-popup .wrapper .wrapper h1 { font-size: 30px; line-height: 30px } .popup#free-games-popup .wrapper .wrapper p, .popup#bonus-cash-popup .wrapper .wrapper p { font-size: 20px; line-height: 20px } .popup#free-games-popup .wrapper .wrapper h2, .popup#bonus-cash-popup .wrapper .wrapper h2 { font-size: 40px; line-height: 40px; text-transform: uppercase } .popup#free-games-popup .wrapper .wrapper button, .popup#bonus-cash-popup .wrapper .wrapper button { background: #78c101; color: #fff; border-radius: 10px; border-bottom: 5px solid #5f9804; font-size: 24px; font-weight: bold; padding: 10px; margin-top: 10px } .popup#free-games-popup .wrapper .wrapper .terms, .popup#bonus-cash-popup .wrapper .wrapper .terms { color: #000; font-size: 10px; line-height: 12px; margin-top: 10px } .popup#bonus-cash-popup>.wrapper { margin: 70px auto 20px auto } .popup#bonus-cash-popup>.wrapper>.wrapper:before { content: ""; display: block; position: relative; width: 60%; padding-top: 50%; margin: -80px auto 15px auto; background: url(/assets/images/coins.png) center no-repeat; background-size: 100% auto } .popup#interac_mobile_number_update input[type="text"][name="mobile_number"] { margin-left: 10px } .popup#account-id-status-check .location-image, .popup#location-access-permission .location-image { max-width: 100px; max-height: 100px; width: 90%; margin: 20px auto; display: block } .popup#account-id-status-check br, .popup#location-access-permission br { display: none } .popup#optimove-popup .wrapper .container img { width: 100%; border-radius: 10px 10px 0 0; display: block } .popup#optimove-popup .wrapper .container #card-reg-popup-smallprint { text-align: center } .popup#optimove-popup .wrapper .container .wrapper { display: flex; flex-direction: column; align-items: center; gap: 20px 0; padding: 20px; text-align: center } .popup#optimove-popup .wrapper .container .wrapper p { margin: 0 } .popup#optimove-popup .wrapper .container .wrapper .button { min-width: 100px } .popup.hide-popup-bg>.wrapper>.container { background: none !important } .popup#apple-pay-confirm p.red-title, .popup#apple-pay-fail p.red-title { text-transform: capitalize; color: #000; text-align: left; font-size: 26px; display: block; margin: 0; border-bottom: 2px solid #eee; padding: 15px 50px 15px 20px; font-weight: bold; box-sizing: border-box; width: 100%; left: initial; position: relative } .popup#apple-pay-fail p.red-title~p { padding: 0 15px 15px 15px } .popup#reversals-disabled-withdrawal-review .wrapper .container .wrapper { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center } .popup#reversals-disabled-withdrawal-review .wrapper .container .wrapper .red-title { margin-bottom: 20px } .popup#reversals-disabled-withdrawal-review .wrapper .container .wrapper br, .popup#reversals-disabled-withdrawal-review .wrapper .container .wrapper .clearfix { display: none } .popup#reversals-disabled-withdrawal-review .wrapper .container .wrapper p { margin: 0; flex: 0 0 100% } .popup#reversals-disabled-withdrawal-review .wrapper .container .wrapper p.withdraw-confirm { display: flex; gap: 0 10px; align-items: center; margin: 15px 0 } .popup#reversals-disabled-withdrawal-review .wrapper .container .wrapper #reversals-disabled-confirm { order: 100; background: none; color: #000; text-decoration: underline; font-weight: normal; padding: 0; cursor: pointer } .popup#reversals-disabled-withdrawal-review .wrapper .container .wrapper #confirm-reversal-review { -webkit-appearance: none; margin: 0; width: 20px; height: 20px; min-width: 20px; min-height: 20px; border-radius: 50px; cursor: pointer; border: 2px solid #000 } .popup#reversals-disabled-withdrawal-review .wrapper .container .wrapper #confirm-reversal-review:checked { box-shadow: inset 0 0 0 2px #fff; background: #000 } .popup.active { display: flex } .popup>.container { position: relative } .popup .close { height: 35px; width: 35px; top: 10px; right: 10px; position: absolute; z-index: 999; cursor: pointer } .popup .close span { width: 25px; display: block; position: absolute; left: 50%; top: 50%; height: 3px; border-radius: 10px; background: #000 } .popup .close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) } .popup .close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) } .popup>.wrapper { max-width: 640px; width: 100%; background: #fff; box-sizing: border-box; position: relative; margin: 10px auto 20px auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); padding: 0 !important } .popup>.wrapper p a:not(.button) { color: blue; text-decoration: underline } .popup>.wrapper .button, .popup>.wrapper button[type="submit"], .popup>.wrapper .inline-button { padding: 10px 20px; width: max-content; text-transform: capitalize; font-weight: bold; margin: 5px 0 } .popup>.wrapper .button.deposit-paypal, .popup>.wrapper button[type="submit"].deposit-paypal, .popup>.wrapper .inline-button.deposit-paypal { width: 100%; border: none; height: 60px; padding: 0; cursor: pointer; background: url(/images/theme/header_deposit-paypal.png) center no-repeat; background-size: auto 100% } .popup>.wrapper>.container { position: relative } .popup>.wrapper>.container #card-reg-popup-smallprint, .popup>.wrapper>.container .add-card-terms { font-size: 10px; color: #999; text-align: left; position: relative; width: 100%; box-sizing: border-box; display: block; font-weight: normal; margin: 0; padding: 5px; background: #eee; line-height: 1.2 } .popup>.wrapper>.container>.wrapper { padding: 0 20px 20px 20px } .popup>.wrapper>.container>.wrapper p.red-title, .popup>.wrapper>.container>.wrapper h2 { text-transform: capitalize; color: #000; text-align: left; font-size: 26px; display: block; margin: 0; border-bottom: 2px solid #eee; padding: 15px 50px 15px 20px; font-weight: bold; box-sizing: border-box; width: calc(100% + 40px); left: -20px; position: relative } .popup>.wrapper>.container input[type="text"], .popup>.wrapper>.container input[type="email"], .popup>.wrapper>.container input[type="password"], .popup>.wrapper>.container input[type="number"], .popup>.wrapper>.container select { line-height: 40px; padding: 0 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc; background-color: #fff; color: #000; font-size: 16px } .popup>.wrapper>.container input[type="number"]::-webkit-outer-spin-button, .popup>.wrapper>.container input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 } .popup>.wrapper>.container select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 684.14 534.54'%3E%3Cpath d='M367.09 521.05 679.17 46.38C692.26 26.47 677.98 0 654.16 0H29.99C6.16 0-8.12 26.48 4.97 46.38l312.09 474.66c11.83 17.99 38.2 17.99 50.03 0Z' style='fill:%230'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center right 5px; background-size: 12px; padding: 0 25px 0 10px } .popup>.wrapper>.container .promo-code:not([name="cvv"]) { min-width: 200px } .popup#opt-in-popup img { width: 100%; margin-top: 20px } .popup#forgot-password label { min-width: 95px; display: inline-block; margin-right: 10px } .popup#reverse-withdrawal .wrapper .container .wrapper img { width: 100% } .popup#proof-of-id-service-popup { z-index: 9999 } .popup#proof-of-id-service-popup .wrapper { padding: 0; height: 100%; width: 100% } .popup#proof-of-id-service-popup .wrapper .close { top: 10px; right: 10px } .popup#proof-of-id-service-popup .wrapper iframe { height: 100%; width: 100%; border: none } .popup#log-in>.wrapper { max-width: 480px } .popup#log-in>.wrapper>.container .wrapper { display: flex; flex-direction: column } .popup#log-in>.wrapper>.container .wrapper p.red-title { text-transform: capitalize; color: #000; text-align: left; font-size: 26px; margin: 0; border-bottom: 2px solid #eee; padding: 15px 25px; font-weight: bold; flex: 0 0 100%; box-sizing: border-box } .popup#log-in>.wrapper>.container .wrapper p.red-title+p { margin: 0; padding: 25px 0 15px 0; display: flex; flex-wrap: wrap; gap: 5px; font-size: 12px } .popup#log-in>.wrapper>.container .wrapper p.red-title+p input[type="text"], .popup#log-in>.wrapper>.container .wrapper p.red-title+p input[type="password"] { width: 100%; line-height: 40px; padding: 0 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc; flex: 0 0 100%; box-sizing: border-box } .popup#log-in>.wrapper>.container .wrapper p.red-title+p br { display: none } .popup#log-in>.wrapper>.container .wrapper p.red-title+p .login_username { font-size: 22px } .popup#log-in>.wrapper>.container .wrapper p.red-title+p input[type="checkbox"] { -webkit-appearance: none; margin: 0 5px 0 0; width: 17px; height: 17px; border-radius: 50px; background: none; border: 2px solid #000; cursor: pointer } .popup#log-in>.wrapper>.container .wrapper p.red-title+p input[type="checkbox"]:checked { box-shadow: inset 0 0 0 2px #fff; background: #000 } .popup#log-in>.wrapper>.container .wrapper p.red-title+p+p { display: none } .popup#log-in>.wrapper>.container .wrapper .log-in { -webkit-appearance: none; border: none; display: block; width: 100%; font-size: 24px; padding: 10px 0; margin: 0; text-transform: uppercase; font-weight: bold } .popup#log-in>.wrapper>.container .wrapper button[onclick="window.location='/register'"], .popup#log-in>.wrapper>.container .wrapper button[onclick="window.checkin.signUp.open();"] { display: flex; height: auto; width: 100%; padding: 0; cursor: pointer; font-size: 0; border: none; color: #000; margin: 25px auto 0 auto; font-weight: normal; gap: 5px; justify-content: center; align-items: center; background: none } .popup#log-in>.wrapper>.container .wrapper button[onclick="window.location='/register'"]:before, .popup#log-in>.wrapper>.container .wrapper button[onclick="window.checkin.signUp.open();"]:before { font-size: 14px; cursor: default; max-width: calc(100% - 100px); text-align: left } .popup#log-in>.wrapper>.container .wrapper button[onclick="window.location='/register'"]:after, .popup#log-in>.wrapper>.container .wrapper button[onclick="window.checkin.signUp.open();"]:after { content: "Sign up Now"; font-size: 14px; text-decoration: underline; font-weight: bold } .popup#log-in>.wrapper>.container .wrapper .forgot-password { text-align: center; margin: 10px auto 25px auto; color: #000; text-decoration: underline; font-size: 14px } .popup#region-redirect .segment-container form p br { display: none } .popup.card-reg-popup { display: none } .popup.card-reg-popup.multi-offer-popup { background-image: none } .popup.card-reg-popup.multi-offer-popup>.wrapper>.container { background: none !important; padding: 0 } .popup.card-reg-popup.multi-offer-popup>.wrapper>.container .multi-offer-container { text-align: center; background-size: cover; background-position: center center; background-repeat: no-repeat; padding: 20px 0; line-height: 1.1 } .popup.card-reg-popup.multi-offer-popup>.wrapper>.container .multi-offer-container p { margin: 0; font-weight: bold; font-size: .6em } .popup.card-reg-popup.multi-offer-popup #promo-code { display: none !important } .popup.card-reg-popup.multi-offer-popup #deposit-amounts { margin-bottom: 0 } .popup.card-reg-popup.active { display: block } .popup.card-reg-popup>.wrapper { overflow: hidden } .popup.card-reg-popup>.wrapper .container { padding: 300px 0 0 0; background-size: 100% 300px; background-position: top center; background-repeat: no-repeat } .popup.card-reg-popup>.wrapper .container .wrapper { overflow: hidden; padding: 20px } .popup.card-reg-popup>.wrapper .container .wrapper .close { filter: drop-shadow(0px 0px 5px #000) drop-shadow(0px 0px 8px #000) } .popup.card-reg-popup>.wrapper .container .wrapper .close span { background: #fff } .popup.card-reg-popup>.wrapper .container .wrapper .input-container { display: flex; flex-direction: column; gap: 5px } .popup.card-reg-popup>.wrapper .container .wrapper .input-container input[type="text"], .popup.card-reg-popup>.wrapper .container .wrapper .input-container input[type="number"], .popup.card-reg-popup>.wrapper .container .wrapper .input-container select { width: 100%; line-height: 40px; padding: 0 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc; order: 2; background-color: #fff; color: #000; font-size: 16px; box-sizing: border-box } .popup.card-reg-popup>.wrapper .container .wrapper .input-container input[type="text"]::-webkit-inner-spin-button, .popup.card-reg-popup>.wrapper .container .wrapper .input-container input[type="text"]::-webkit-outer-spin-button, .popup.card-reg-popup>.wrapper .container .wrapper .input-container input[type="number"]::-webkit-inner-spin-button, .popup.card-reg-popup>.wrapper .container .wrapper .input-container input[type="number"]::-webkit-outer-spin-button, .popup.card-reg-popup>.wrapper .container .wrapper .input-container select::-webkit-inner-spin-button, .popup.card-reg-popup>.wrapper .container .wrapper .input-container select::-webkit-outer-spin-button { -webkit-appearance: none } .popup.card-reg-popup>.wrapper .container .wrapper .input-container select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 684.14 534.54'%3E%3Cpath d='M367.09 521.05 679.17 46.38C692.26 26.47 677.98 0 654.16 0H29.99C6.16 0-8.12 26.48 4.97 46.38l312.09 474.66c11.83 17.99 38.2 17.99 50.03 0Z' style='fill:%230'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center right 5px; background-size: 12px } .popup.card-reg-popup>.wrapper .container .wrapper .input-container label { order: 1; text-transform: capitalize } .popup.card-reg-popup>.wrapper .container .wrapper .error { display: none; margin: 10px 0; position: relative; border-radius: 10px; font-size: 14px; color: #e74c3c; align-items: center; gap: 0 5px } .popup.card-reg-popup>.wrapper .container .wrapper .error:before { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.83 20.1'%3E%3Cpath d='M14.87.87a2.88 2.88 0 0 1 4.11-.01c1.14 1.14 1.14 3 .01 4.15l-4.97 5.04 4.97 5.05c1.12 1.14 1.11 2.99-.03 4.13s-2.98 1.14-4.1 0l-4.94-5.01-4.95 5.02a2.87 2.87 0 0 1-4.11 0c-1.14-1.14-1.14-3-.01-4.15l4.97-5.04L.84 5C-.28 3.86-.27 2.01.87.87 2.01-.27 3.85-.27 4.97.88l4.94 5.01L14.87.87Z' style='fill:%23fff;fill-rule:evenodd'/%3E%3C/svg%3E") #e74c3c center no-repeat; background-size: 10px, auto; border-radius: 50%; min-width: 20px; height: 20px; position: relative; display: inline-block } .popup.card-reg-popup>.wrapper .container .wrapper .error.active { display: flex } .popup.card-reg-popup>.wrapper .container .wrapper label { font-size: 14px } .popup.card-reg-popup>.wrapper .container .wrapper #expiry-cvv { display: flex; margin-top: 10px } .popup.card-reg-popup>.wrapper .container .wrapper #expiry-cvv .add-card-column1 { width: 65% } .popup.card-reg-popup>.wrapper .container .wrapper #expiry-cvv .add-card-column1 label { text-transform: capitalize; display: block; margin-bottom: 5px } .popup.card-reg-popup>.wrapper .container .wrapper #expiry-cvv .add-card-column2 { width: 35% } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code { display: flex; flex-direction: column } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code .input-container { display: none } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code .input-container input { order: 2 } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code .input-container label { font-size: 0; order: 1 } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code .input-container label:before { content: "promo code"; font-size: 14px } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code p { order: 2; margin: 0; text-align: center } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code p label { font-size: 0; text-decoration: underline; cursor: pointer } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code p label:before { content: "I have a promo code"; font-size: 14px } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code p input { display: none } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code.show .input-container { display: flex } .popup.card-reg-popup>.wrapper .container .wrapper #promo-code.show p label { display: none } .popup.card-reg-popup>.wrapper .container .wrapper .deposit-now { margin: 20px auto; padding: 10px 30px; left: 50%; transform: translateX(-50%); position: relative; font-size: 24px; font-weight: bold; text-transform: uppercase } .popup.card-reg-popup>.wrapper .container #other-payment-options { border-top: 2px solid #eee; margin: 0; padding: 20px 0; text-align: center; text-transform: capitalize; font-weight: bold; font-size: 18px; color: #051B27 } .popup#set-deposit-limits table { background: none; width: auto; margin: 10px 0; border-spacing: 0 } .popup#set-deposit-limits table td { text-transform: capitalize; text-align: left; padding: 5px } .popup#set-deposit-limits table td select { min-width: 100px } .popup#quick-deposit button.deposit-now, .popup#ingamedeposit button.deposit-now { font-size: 22px; margin: 0; left: 50%; transform: translateX(-50%); position: relative } .popup#quick-deposit button.deposit-now:before, .popup#ingamedeposit button.deposit-now:before { content: "deposit now" } .popup .payment-methods { padding: 0; list-style: none; margin: 0 auto; gap: 0; display: flex; flex-wrap: wrap } .popup .payment-methods li { cursor: pointer } .popup .payment-methods li div { width: 100px; height: 80px; position: relative; border-radius: 15px; border: 3px solid #fff; box-sizing: border-box } .popup .payment-methods li div:before { content: ""; display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); background-size: contain; background-position: center; background-repeat: no-repeat; width: 50px; height: 35px; position: absolute } .popup .payment-methods li div.fonix:before { width: 75px } .popup .payment-methods li div.paypal:before { width: 80px } .popup .payment-methods li div.paysafe:before { width: 80px } .popup .payment-methods li div.interac { width: 90px } .popup .payment-methods li div.interac:before { width: 100%; height: 100% } .popup .payment-methods li div.neteller:before { width: 80px } .popup .payment-methods li label { display: none } .popup #deposit-amounts, .popup .amount-buttons, .popup .deposit-container, .popup .deposit-amount-container { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 5px; justify-content: space-between } .popup #deposit-amounts .amount-button, .popup .amount-buttons .amount-button, .popup .deposit-container .amount-button, .popup .deposit-amount-container .amount-button { background: #051B27; color: #fff; padding: 15px 25px; border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer; flex: 1; text-align: center } .popup #deposit-amounts .amount-button.active, .popup .amount-buttons .amount-button.active, .popup .deposit-container .amount-button.active, .popup .deposit-amount-container .amount-button.active { background: #1BB90D; color: #fff } .popup .deposit-container>p { flex: 0 0 100% } .popup .com-reqs { font-size: 10px; margin: 20px 0 0 0 } .popup .com-reqs .set-deposit-limits { font-size: 14px; text-decoration: underline; color: #000; left: 50%; transform: translateX(-50%); position: relative; margin: 20px 0; display: inline-block } .nav-buttons .log-in { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 999; display: none; justify-content: center } .nav-buttons .log-in.active { display: flex } .nav-buttons .log-in .login-wrapper { width: 100%; margin: 10px auto 0 auto; max-width: 480px; background: #fff; border-radius: 15px; display: flex; flex-direction: column; position: relative } .nav-buttons .log-in .login-wrapper .close { height: 35px; width: 35px; top: 10px; right: 10px; position: absolute; z-index: 999; cursor: pointer } .nav-buttons .log-in .login-wrapper .close span { width: 25px; display: block; position: absolute; left: 50%; top: 50%; height: 3px; border-radius: 10px; background: #000 } .nav-buttons .log-in .login-wrapper .close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) } .nav-buttons .log-in .login-wrapper .close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) } .nav-buttons .log-in .login-wrapper .login-title { text-transform: capitalize; color: #000; text-align: left; font-size: 26px; margin: 0; border-bottom: 2px solid #eee; padding: 15px 25px; font-weight: bold } .nav-buttons .log-in .login-wrapper form { margin: 0; padding: 25px; display: flex; flex-direction: column } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) { display: flex; flex-wrap: wrap } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) .login_first-name { margin: 0; text-align: left; display: block; width: 100%; font-size: 22px; line-height: 45px } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) .form-label { margin: 15px 0 5px 0; font-size: 16px; flex: 0 0 100%; text-transform: capitalize } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) input[type="text"], .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) input[type="password"] { width: 100%; line-height: 40px; padding: 0 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) input[type="text"]::placeholder, .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) input[type="password"]::placeholder { text-transform: capitalize } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) #remember-me { display: flex; margin: 20px 0; align-items: center; font-size: 12px } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) #remember-me input { -webkit-appearance: none; margin: 0 5px 0 0; width: 17px; height: 17px; border-radius: 50px; background: none; border: 2px solid #000; cursor: pointer } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) #remember-me input:checked { box-shadow: inset 0 0 0 2px #fff; background: #000 } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) #remember-me a { color: #000; text-decoration: underline; margin-left: 5px } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) .forgot-password-link { margin: 20px 0 20px auto } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) .forgot-password-link a { font-size: 12px; color: #000; text-decoration: underline } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) .login-arrow { display: none } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(2) button { display: block; width: 100%; font-size: 24px; padding: 10px 0; text-transform: uppercase; font-weight: bold } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(2) button:not(#fingerprint_login):before { content: "log in" } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(2) button#fingerprint_login { margin-top: 5px } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(3) .join { display: flex; height: auto; width: 100%; padding: 0; cursor: pointer; font-size: 0; border: none; color: #000; margin: 25px auto 0 auto; font-weight: normal; gap: 5px; justify-content: center; align-items: center } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(3) .join:before { font-size: 14px; cursor: default; max-width: calc(100% - 100px); text-align: left } .nav-buttons .log-in .login-wrapper form .container:nth-of-type(3) .join:after { content: "Sign up Now"; font-size: 14px; text-decoration: underline; font-weight: bold } #cookies-consent { position: fixed; bottom: 0; width: 100%; z-index: 290; display: flex; justify-content: center; padding: 0 15px; box-sizing: border-box; height: 50px; backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px) } #cookies-consent .container { display: flex; gap: 0 15px; align-items: center } #cookies-consent .container p { margin: 0; font-size: 13px; line-height: 15px } #cookies-consent .container p a { text-decoration: underline } #cookies-consent .container .cookie-x-button { cursor: pointer } #cookies-consent .container .cookie-x-button .close { position: relative; width: 40px; height: 40px } #cookies-consent .container .cookie-x-button .close span { width: 25px; height: 4px; transform: translate(-50%, -50%) rotate(45deg); display: block; background: #fff; left: 50%; top: 50%; position: absolute; border-radius: 5px } #cookies-consent .container .cookie-x-button .close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) } .bingoport-award { display: none; width: 100px; position: fixed; top: 200px; right: -80px; z-index: 100; background: #fff; border-radius: 10px 0 0 10px; padding: 10px; box-shadow: 0 5px 0 0 #d6d6d6; cursor: pointer; transition: all .2s linear } .bingoport-award.show { right: 0 } .bingoport-award img { width: 100%; height: auto } .bingoport-award:hover { right: 0; transition: all .2s linear } .index-page .bingoport-award { display: block } .location-services-wrapper { background: #000; top: 0; left: 0; right: 0; bottom: 0; position: fixed; z-index: 9999; padding: 20px; display: flex; align-items: start; justify-content: center; overflow-y: scroll } .location-services-wrapper .location-services { max-width: 1000px; background: #fff; border-radius: 15px; padding: 50px; display: flex; flex-direction: column; align-items: center; gap: 30px 0 } .location-services-wrapper .location-services h1 { font-size: 40px; margin: 0; color: #000 } .location-services-wrapper .location-services p { margin: 0 auto; text-align: center; font-size: 16px; color: #000 } .location-services-wrapper .location-services .steps { display: flex; flex-direction: column; align-items: center; gap: 10px 0 } .location-services-wrapper .location-services .steps .step { background: #eee; border-radius: 15px; overflow: hidden; width: 100% } .location-services-wrapper .location-services .steps .step input { display: none } .location-services-wrapper .location-services .steps .step input:checked~.step-content { height: auto; padding: 10px 30px 30px 30px } .location-services-wrapper .location-services .steps .step .step-title { color: #000; padding: 20px 80px 20px 30px; width: 100%; display: block; box-sizing: border-box; font-weight: bold; font-size: 22px; cursor: pointer; position: relative } .location-services-wrapper .location-services .steps .step .step-title::before, .location-services-wrapper .location-services .steps .step .step-title::after { content: ""; position: absolute; width: 20px; height: 4px; background: #000; top: 50%; transform: translateY(-50%) rotate(45deg); right: 42px; border-radius: 10px } .location-services-wrapper .location-services .steps .step .step-title::after { transform: translateY(-50%) rotate(-45deg); right: 30px } .location-services-wrapper .location-services .steps .step .step-content { height: 0; overflow: hidden; padding: 0; display: flex; flex-direction: column; gap: 20px 0 } .location-services-wrapper .location-services .steps .step .step-content * { margin: 0; text-align: left; font-size: 14px } .location-services-wrapper .location-services .steps.alt .step { background: #ccc } .location-services-wrapper .location-services .buttons { display: flex; flex-direction: column; gap: 10px } .location-services-wrapper .location-services .buttons .button { font-size: 20px; padding: 15px 20px; height: auto; line-height: initial; margin: 0 } @media (max-width: 840px) { .bingoport-award { width: 60px; right: -55px } .bingoport-award.hover { right: 0 } } .location-services-wrapper { padding: 10px } .location-services-wrapper .location-services { padding: 20px; gap: 20px 0 } .location-services-wrapper .location-services h1 { font-size: 28px } .location-services-wrapper .location-services p { font-size: 14px } .location-services-wrapper .location-services .steps .step input:checked~.step-content { padding: 0 20px 20px 20px } .location-services-wrapper .location-services .steps .step input:checked~.step-title::before { transform: translateY(-50%) rotate(-45deg) } .location-services-wrapper .location-services .steps .step input:checked~.step-title::after { transform: translateY(-50%) rotate(45deg) } .location-services-wrapper .location-services .steps .step .step-title { padding: 15px 65px 15px 20px; font-size: 20px } .location-services-wrapper .location-services .steps .step .step-title::before { width: 18px; right: 31px } .location-services-wrapper .location-services .steps .step .step-title::after { width: 18px; right: 20px } @media screen and (max-width: 640px) { .popup#apple-pay-confirm p.red-title, .popup#apple-pay-fail p.red-title { font-size: 18px; padding: 15px 50px 15px 15px } .popup#log-in>.wrapper>.container>.wrapper p.red-title, .popup#log-in>.wrapper>.container>.wrapper h2 { font-size: 18px; padding: 15px 50px 15px 15px } .popup>.wrapper { width: calc(100% - 10px); top: 5px } .popup>.wrapper>.container>.wrapper p.red-title, .popup>.wrapper>.container>.wrapper h2 { font-size: 18px; padding: 15px 50px 15px 15px; width: calc(100% + 30px); left: -15px } .popup>.wrapper>.container>.wrapper p { font-size: 14px } .popup>.wrapper>.container>.wrapper p.com-reqs { font-size: 10px } .nav-buttons .log-in { align-items: start } .nav-buttons .log-in .login-wrapper { width: calc(100% - 10px); top: 5px } .nav-buttons .log-in .login-wrapper form { padding: 15px } .location-services-wrapper .location-services { padding: 15px; gap: 15px 0 } .location-services-wrapper .location-services h1 { font-size: 24px } .location-services-wrapper .location-services .steps .step { border-radius: 10px } .location-services-wrapper .location-services .steps .step input:checked~.step-content { padding: 0 15px 15px 15px } .location-services-wrapper .location-services .steps .step .step-title { padding: 10px 55px 10px 15px; font-size: 18px } .location-services-wrapper .location-services .steps .step .step-title::before { width: 16px; right: 24px } .location-services-wrapper .location-services .steps .step .step-title::after { width: 16px; right: 14px } .location-services-wrapper .location-services .buttons .button { padding: 10px 15px } #cookies-consent .container p { font-size: 12px; line-height: 14px } } @media screen and (max-width: 500px) { .popup.card-reg-popup>.wrapper .container .wrapper { padding: 15px } .popup.card-reg-popup>.wrapper .container .wrapper .deposit-now { width: 100% } .popup>.wrapper>.container>.wrapper { padding: 0 15px 15px 15px } .popup>.wrapper>.container select { width: calc(100% - 135px) } .popup>.wrapper>.container input[name="cvv"] { width: 70px } .popup>.wrapper>.container .promo-code:not([name="cvv"]) { width: calc(100% - 24px) } .popup .payment-methods li div { width: 93px; height: 70px } .popup .payment-methods li div.paypal:before, .popup .payment-methods li div.paysafe:before, .popup .payment-methods li div.neteller:before { width: 70px } .popup #deposit-amounts, .popup .amount-buttons, .popup .deposit-container, .popup .deposit-amount-container { gap: 3px } .popup #deposit-amounts .amount-button, .popup .amount-buttons .amount-button, .popup .deposit-container .amount-button, .popup .deposit-amount-container .amount-button { padding: 8px 10px; font-size: 17px } .popup.card-reg-popup>.wrapper .container { background-size: 100% 190px; padding: 190px 0 0 0 } } @media screen and (max-width: 400px) { .popup.card-reg-popup>.wrapper .container .wrapper #expiry-cvv { flex-direction: column; gap: 10px 0 } .popup.card-reg-popup>.wrapper .container .wrapper #expiry-cvv .add-card-column1, .popup.card-reg-popup>.wrapper .container .wrapper #expiry-cvv .add-card-column2 { width: 100% } .location-services-wrapper { padding: 5px } .location-services-wrapper .location-services { padding: 10px; gap: 10px 0 } .location-services-wrapper .location-services p { font-size: 12px } .location-services-wrapper .location-services .steps .step input:checked~.step-content { padding: 0 10px 10px 10px } .location-services-wrapper .location-services .steps .step .step-title { padding: 10px 45px 10px 10px; font-size: 16px } .location-services-wrapper .location-services .steps .step .step-title::before { right: 19px } .location-services-wrapper .location-services .steps .step .step-title::after { right: 10px } .location-services-wrapper .location-services .buttons .button { font-size: 18px } } .region-united-kingdom .main.promotion-page>.container .promotions-general-tcs, .region-united-kingdom main.promotion-page>.container .promotions-general-tcs { display: block } .main.promotion-page>.container .promotions-general-tcs, main.promotion-page>.container .promotions-general-tcs { display: none; padding: 0 30px 10px 30px; font-size: 12px } .main.promotion-page>.container>.wrapper, main.promotion-page>.container>.wrapper { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; padding: 0 30px 30px 30px } .main.promotion-page>.container>.wrapper>*:not(.promo), main.promotion-page>.container>.wrapper>*:not(.promo) { display: none } .main.promotion-page>.container>.wrapper .promo, main.promotion-page>.container>.wrapper .promo { overflow: hidden; flex: 0 0 300px; background: #eee; border-radius: 15px; text-align: left } .main.promotion-page>.container>.wrapper .promo .wrapper, main.promotion-page>.container>.wrapper .promo .wrapper { padding: 0 20px 20px 20px; position: relative; display: flex; flex-wrap: nowrap; flex-direction: column; height: 100% } .main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(1), main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(1) { order: 1; width: calc(100% + 40px); position: relative; left: -20px } .main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(1) img, main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(1) img { width: 100%; display: block } .main.promotion-page>.container>.wrapper .promo .wrapper h2, main.promotion-page>.container>.wrapper .promo .wrapper h2 { order: 2; font-size: 20px; margin: 10px 0 } .main.promotion-page>.container>.wrapper .promo .wrapper p, main.promotion-page>.container>.wrapper .promo .wrapper p { order: 3; margin: 0; font-size: 14px } .main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(2), main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(2) { order: 5; width: max-content; margin: 0 auto } .main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(2) .read-more-button, main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(2) .read-more-button { text-decoration: underline; color: #000; text-transform: capitalize; font-size: 14px; margin: 10px auto; padding: 5px } .main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(3), main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(3) { order: 4; margin: auto 0 0 0 } .main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(3) .play-now-button, main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(3) .play-now-button { display: block; padding: 10px 20px; cursor: pointer; font-size: 20px; text-align: center; text-transform: capitalize } .main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs, main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs { order: 5; overflow-y: scroll; height: 75px; margin-bottom: 10px } .main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs::-webkit-scrollbar, main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs::-webkit-scrollbar { -webkit-appearance: none !important } .main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs::-webkit-scrollbar:vertical, main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs::-webkit-scrollbar:vertical { width: 8px !important } .main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs::-webkit-scrollbar-thumb, main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5) !important; border-radius: 10px !important; border: 1px solid #eee !important } .main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs::-webkit-scrollbar-track, main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs::-webkit-scrollbar-track { border-radius: 10px !important; background-color: transparent !important } .main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs:empty, main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs:empty { display: none } .main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs p, main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs p { font-size: 10px; line-height: 12px } .main.promo-more-page .promo-banner img, main.promo-more-page .promo-banner img { border-radius: 20px 20px 0 0; width: 100%; display: block } .main.promo-more-page .promo-banner #promotions-tcs, main.promo-more-page .promo-banner #promotions-tcs { background: #eee; overflow: auto; padding: 0 10px } .main.promo-more-page .promo-banner #promotions-tcs p, main.promo-more-page .promo-banner #promotions-tcs p { font-size: 10px } .main.promo-more-page .promo-banner~.container, main.promo-more-page .promo-banner~.container { background: #fff; border-radius: 0 0 20px 20px } .main.promo-more-page .container, main.promo-more-page .container { max-width: 1000px; margin: 0 auto } .main.promo-more-page .container .wrapper, main.promo-more-page .container .wrapper { padding: 20px } .main.promo-more-page .container .wrapper *, main.promo-more-page .container .wrapper * { padding: initial } .main.promo-more-page .container .wrapper h1, main.promo-more-page .container .wrapper h1 { margin: 0; color: #000; padding: 0 0 15px 0; border-bottom: 2px solid #eee } .main.promo-more-page .container .wrapper ul, main.promo-more-page .container .wrapper ul { margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px } .main.promo-more-page .container .wrapper .promotion-full-terms, main.promo-more-page .container .wrapper .promotion-full-terms { background: #eee; padding: 10px; font-size: 12px; position: relative; left: -20px; width: calc(100% + 40px); margin: 20px 0 -20px 0; box-sizing: border-box } .main.promo-more-page .container .wrapper .promotion-full-terms .terms-title, main.promo-more-page .container .wrapper .promotion-full-terms .terms-title { font-weight: bold } .main.promo-more-page .container .button, main.promo-more-page .container .button { padding: 10px 20px; text-transform: uppercase; font-size: 22px; font-weight: bold; text-align: center; display: block; width: max-content; max-width: max-content; margin: 0 auto } .promotions-text { padding: 0 30px 30px 30px } .promotions-text * { color: #000 } .promotions-text a { text-decoration: underline } .promotions-text:empty { display: none } @media screen and (max-width: 1040px) { .main.promotion-page>.container { padding: 0 20px } .main.promotion-page .promo-more-page { padding: 0 20px } .main.promo-more-page .promo-banner { margin: 0 10px } .main.promo-more-page>.container { margin: 0 10px } } @media screen and (max-width: 840px) { .main.promotion-page>.container { padding: 0 } .main.promotion-page>.container>.wrapper { text-align: left; overflow-x: scroll; display: flex; box-sizing: border-box; flex-wrap: nowrap; scroll-snap-type: x mandatory; justify-content: left; gap: 20px; padding: 0; margin: 20px; border-radius: 15px } .main.promotion-page>.container>.wrapper .promo { display: flex; align-items: start; justify-content: center; scroll-snap-align: start; flex: 0 0 280px } .main.promotion-page>.container>.wrapper .promo .wrapper .promotions-tcs { overflow: visible; height: inherit; margin: 0 } .main.promotion-page>.container>.wrapper .promo .wrapper a:nth-of-type(3) .play-now-button { margin-top: 10px } .promotions-text { padding: 0 20px 20px 20px } } @media screen and (max-width: 640px) { .main.promotion-page>.container h1, main.promotion-page>.container h1 { display: none } .main.promotion-page>.container>.wrapper .promo .wrapper h2, main.promotion-page>.container>.wrapper .promo .wrapper h2 { line-height: 24px } .main.promotion-page>.container>.wrapper .promo .wrapper p, main.promotion-page>.container>.wrapper .promo .wrapper p { font-size: 13px; line-height: 15px } } @keyframes reel-spin_start { 0% { bottom: 0 } 100% { bottom: -2000px } } @keyframes reel-spin_mid { 0% { bottom: 500px } 100% { bottom: -2000px } } @keyframes reel-spin_winprize1 { 0% { bottom: 500px } 100% { bottom: -900px } } @keyframes reel-spin_winprize2 { 0% { bottom: 500px } 100% { bottom: -1000px } } @keyframes reel-spin_winprize3 { 0% { bottom: 500px } 100% { bottom: -1100px } } @keyframes reel-spin_winprize4 { 0% { bottom: 500px } 100% { bottom: -1200px } } @keyframes reel-spin_winprize5 { 0% { bottom: 500px } 100% { bottom: -1300px } } @keyframes reel-spin_winprize6 { 0% { bottom: 500px } 100% { bottom: -1400px } } @keyframes reel-spin_winprize7 { 0% { bottom: 500px } 100% { bottom: -1500px } } @keyframes reel-spin_winprize8 { 0% { bottom: 500px } 100% { bottom: -1600px } } #megareel-popup .container { max-width: 640px; margin: 0 auto } #megareel-popup .container .close { backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); background: rgba(0, 0, 0, 0.4); border-radius: 50% } #megareel-popup .container .close span { background: #fff } #megareel-popup .container #layout-wrapper { height: 600px; width: 600px; position: relative; margin: 0 auto } #megareel-popup .container #layout-wrapper .winnings { left: 50%; top: 50%; position: absolute; z-index: 999; max-width: 500px; background: #000; border-radius: 20px; border: 3px solid #fff; text-align: center; transform: translate(-50%, -50%) scale(0, 0); opacity: 0 } #megareel-popup .container #layout-wrapper .winnings .wrapper { padding: 20px; color: #fff; line-height: 18px } #megareel-popup .container #layout-wrapper .winnings .wrapper a .button { background: #FFD02E; border-radius: 30px; border: none; display: block; padding: 10px 20px; margin: 20px auto 0 auto; color: #000; width: max-content; text-transform: uppercase; font-weight: bold; font-size: 18px } #megareel-popup .container #layout-wrapper .spin-value { position: absolute; bottom: 10px; z-index: 20; left: 50%; transform: translateX(-50%); text-transform: uppercase; font-size: 10px; color: #fff } #megareel-popup .container #layout-wrapper .play-now-arrow { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; padding: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.9); z-index: 20; opacity: 1; cursor: pointer } #megareel-popup .container #layout-wrapper .layout { position: relative; z-index: 14; width: 100% } #megareel-popup .container #layout-wrapper #prizes { position: absolute; left: 25px; top: 50px; width: 550px; height: 500px; overflow: hidden; border-radius: 40px } #megareel-popup .container #layout-wrapper #prizes .prize-list1, #megareel-popup .container #layout-wrapper #prizes .prize-list2, #megareel-popup .container #layout-wrapper #prizes .prize-list3 { position: absolute; bottom: 0; left: 0; z-index: 6 } #megareel-popup .container #layout-wrapper #prizes .prize-list2 { z-index: 7; bottom: 500px } #megareel-popup .container #layout-wrapper #prizes .prize-list3 { z-index: 5; bottom: 500px } #megareel-popup .container #layout-wrapper.winprize1 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize2 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize3 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize4 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize5 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize6 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize7 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize8 #prizes .prize-list1 { animation: reel-spin_start 1s ease-in 1; bottom: 500px } #megareel-popup .container #layout-wrapper.winprize1 #prizes .prize-list2, #megareel-popup .container #layout-wrapper.winprize2 #prizes .prize-list2, #megareel-popup .container #layout-wrapper.winprize3 #prizes .prize-list2, #megareel-popup .container #layout-wrapper.winprize4 #prizes .prize-list2, #megareel-popup .container #layout-wrapper.winprize5 #prizes .prize-list2, #megareel-popup .container #layout-wrapper.winprize6 #prizes .prize-list2, #megareel-popup .container #layout-wrapper.winprize7 #prizes .prize-list2, #megareel-popup .container #layout-wrapper.winprize8 #prizes .prize-list2 { animation: reel-spin_mid 1s linear .75s 1 } #megareel-popup .container #layout-wrapper.winprize1 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize2 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize3 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize4 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize5 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize6 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize7 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize8 #prizes .prize-list3 { transition-timing-function: cubic-bezier(.15, .5, .3, 1) } #megareel-popup .container #layout-wrapper.winprize1 #prizes .prize-list3 { animation: reel-spin_winprize1 3s 1s 1; bottom: -900px } #megareel-popup .container #layout-wrapper.winprize2 #prizes .prize-list3 { animation: reel-spin_winprize2 3s 1s 1; bottom: -1000px } #megareel-popup .container #layout-wrapper.winprize3 #prizes .prize-list3 { animation: reel-spin_winprize3 3s 1s 1; bottom: -1100px } #megareel-popup .container #layout-wrapper.winprize4 #prizes .prize-list3 { animation: reel-spin_winprize4 3s 1s 1; bottom: -1200px } #megareel-popup .container #layout-wrapper.winprize5 #prizes .prize-list3 { animation: reel-spin_winprize5 3s 1s 1; bottom: -1300px } #megareel-popup .container #layout-wrapper.winprize6 #prizes .prize-list3 { animation: reel-spin_winprize6 3s 1s 1; bottom: -1400px } #megareel-popup .container #layout-wrapper.winprize7 #prizes .prize-list3 { animation: reel-spin_winprize7 3s 1s 1; bottom: -1500px } #megareel-popup .container #layout-wrapper.winprize8 #prizes .prize-list3 { animation: reel-spin_winprize8 3s 1s 1; bottom: -1600px } #megareel-popup .container #layout-wrapper.winnings-active .winnings { transition: all .3s linear 4s; transform: translate(-50%, -50%) scale(1, 1); opacity: 1 } #megareel-popup .container #layout-wrapper.winnings-active .play-now-arrow { transition: opacity .3s linear; opacity: 0 } @keyframes dropzoneBounce { 0% { transform: translateY(5px) } 100% { transform: translateY(-5px) } } @keyframes showWin { 0% { opacity: 0; pointer-events: none } 100% { opacity: 1; pointer-events: initial } } @keyframes showWinMessage { 0% { transform: translate(-50%, -50%) scale(0) } 100% { transform: translate(-50%, -50%) scale(1) } } @keyframes drop1 { 0% { left: 220px; top: 30px; transform: translate(-50%, -50%); opacity: 1 } 99% { left: 220px; top: 120px; transform: translate(-50%, -50%); opacity: 1 } 100% { left: 220px; top: 120px; transform: translate(-50%, -50%); opacity: 0 } } @keyframes drop2 { 0% { left: 320px; top: 50px; opacity: 1 } 99% { left: 320px; top: 115px; opacity: 1 } 100% { left: 320px; top: 115px; opacity: 0 } } @keyframes drop3 { 0% { left: 420px; top: 50px; opacity: 1 } 99% { left: 420px; top: 115px; opacity: 1 } 100% { left: 420px; top: 115px; opacity: 0 } } @keyframes row1_peg2_left { 0% { left: 205px; top: 100px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 195px; top: 110px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 185px; top: 150px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 185px; top: 150px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row1_peg2_right { 0% { left: 235px; top: 100px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 245px; top: 110px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 255px; top: 150px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 255px; top: 150px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row1_peg3_left { 0% { left: 305px; top: 100px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 295px; top: 110px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 285px; top: 150px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 285px; top: 150px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row1_peg3_right { 0% { left: 335px; top: 100px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 345px; top: 110px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 355px; top: 150px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 355px; top: 150px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row1_peg4_left { 0% { left: 405px; top: 100px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 395px; top: 110px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 385px; top: 150px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 385px; top: 150px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row1_peg4_right { 0% { left: 435px; top: 100px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 445px; top: 110px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 455px; top: 150px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 455px; top: 150px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row2_peg1_left { 0% { left: 155px; top: 150px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 145px; top: 160px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 135px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 135px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row2_peg1_right { 0% { left: 185px; top: 150px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 195px; top: 160px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 205px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 205px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row2_peg2_left { 0% { left: 255px; top: 150px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 225px; top: 160px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 235px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 235px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row2_peg2_right { 0% { left: 285px; top: 150px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 295px; top: 160px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 305px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 305px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row2_peg3_left { 0% { left: 355px; top: 150px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 345px; top: 160px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 335px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 335px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row2_peg3_right { 0% { left: 385px; top: 150px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 395px; top: 160px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 405px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 405px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row2_peg4_left { 0% { left: 455px; top: 150px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 445px; top: 160px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 435px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 435px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row2_peg4_right { 0% { left: 485px; top: 150px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 495px; top: 160px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 505px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 505px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row3_peg1_right { 0% { left: 135px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 145px; top: 210px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 155px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 155px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row3_peg2_left { 0% { left: 205px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 195px; top: 210px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 185px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 185px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row3_peg2_right { 0% { left: 235px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 245px; top: 210px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 255px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 255px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row3_peg3_left { 0% { left: 305px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 295px; top: 210px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 285px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 285px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row3_peg3_right { 0% { left: 335px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 345px; top: 210px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 355px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 355px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row3_peg4_left { 0% { left: 405px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 395px; top: 210px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 385px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 385px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row3_peg4_right { 0% { left: 435px; top: 200px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 445px; top: 210px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 455px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 455px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row3_pegfiveleft { 0% { left: 505px; top: 200px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 495px; top: 210px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 485px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 485px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row4_peg1_left { 0% { left: 155px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 145px; top: 260px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 135px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 135px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row4_peg1_right { 0% { left: 185px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 195px; top: 260px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 205px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 205px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row4_peg2_left { 0% { left: 255px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 245px; top: 260px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 235px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 235px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row4_peg2_right { 0% { left: 285px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 295px; top: 260px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 305px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 305px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row4_peg3_left { 0% { left: 355px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 345px; top: 260px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 335px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 335px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row4_peg3_right { 0% { left: 385px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 395px; top: 260px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 405px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 405px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row4_peg4_left { 0% { left: 455px; top: 250px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 445px; top: 260px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 435px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 435px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row4_peg4_right { 0% { left: 485px; top: 250px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 495px; top: 260px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 505px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 505px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row5_peg1_right { 0% { left: 135px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 145px; top: 310px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 155px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 155px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row5_peg2_left { 0% { left: 205px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 195px; top: 310px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 185px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 185px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row5_peg2_right { 0% { left: 235px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 245px; top: 310px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 255px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 255px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row5_peg3_left { 0% { left: 305px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 295px; top: 310px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 285px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 285px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row5_peg3_right { 0% { left: 335px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 345px; top: 310px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 355px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 355px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row5_peg4_left { 0% { left: 405px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 395px; top: 310px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 385px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 385px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row5_peg4_right { 0% { left: 435px; top: 300px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 445px; top: 310px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 455px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 455px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row5_pegfiveleft { 0% { left: 505px; top: 300px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 495px; top: 310px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 485px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 485px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row6_peg1_left { 0% { left: 155px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 155px; top: 360px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 155px; top: 400px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 155px; top: 400px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row6_peg1_right { 0% { left: 185px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 185px; top: 360px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 185px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 185px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row6_peg2_left { 0% { left: 255px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 255px; top: 360px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 255px; top: 400px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 255px; top: 400px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row6_peg2_right { 0% { left: 285px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 285px; top: 360px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 285px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 285px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row6_peg3_left { 0% { left: 355px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 355px; top: 360px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 355px; top: 400px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 355px; top: 400px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row6_peg3_right { 0% { left: 385px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 385px; top: 360px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 385px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 385px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes row6_peg4_left { 0% { left: 455px; top: 350px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 455px; top: 360px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 455px; top: 400px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 100% { left: 455px; top: 400px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0 } } @keyframes row6_peg4_right { 0% { left: 485px; top: 350px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 485px; top: 360px; transform: translate(-50%, -50%) rotate(0deg); opacity: 1 } 99% { left: 485px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 485px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); opacity: 0 } } @keyframes prize1_left { 0% { left: 155px; top: 400px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 25% { left: 155px; top: 460px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 170px; top: 475px; transform: translate(-50%, -50%) rotate(-180deg); opacity: 1 } 75% { left: 185px; top: 460px; transform: translate(-50%, -50%) rotate(-235deg); opacity: 1 } 100% { left: 170px; top: 475px; transform: translate(-50%, -50%) rotate(-180deg); opacity: 1 } } @keyframes prize1_right { 0% { left: 185px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 25% { left: 185px; top: 460px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 170px; top: 475px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } 75% { left: 155px; top: 460px; transform: translate(-50%, -50%) rotate(235deg); opacity: 1 } 100% { left: 170px; top: 475px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } } @keyframes prize2_left { 0% { left: 340px; top: 385px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } 33% { left: 305px; top: 475px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } 66% { left: 335px; top: 460px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 320px; top: 475px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } } @keyframes prize2_right { 0% { left: 300px; top: 385px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } 33% { left: 305px; top: 475px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } 66% { left: 335px; top: 460px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 320px; top: 475px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } } @keyframes prize3_left { 0% { left: 455px; top: 400px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 25% { left: 455px; top: 460px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 1 } 50% { left: 470px; top: 475px; transform: translate(-50%, -50%) rotate(-180deg); opacity: 1 } 75% { left: 485px; top: 460px; transform: translate(-50%, -50%) rotate(-235deg); opacity: 1 } 100% { left: 470px; top: 475px; transform: translate(-50%, -50%) rotate(-180deg); opacity: 1 } } @keyframes prize3_right { 0% { left: 485px; top: 400px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 25% { left: 485px; top: 460px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 50% { left: 470px; top: 475px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } 75% { left: 455px; top: 460px; transform: translate(-50%, -50%) rotate(235deg); opacity: 1 } 100% { left: 470px; top: 475px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } } @keyframes prize4_right { 0% { left: 240px; top: 385px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } 33% { left: 240px; top: 575px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } 66% { left: 213px; top: 575px; transform: translate(-50%, -50%) rotate(270deg); opacity: 1 } 100% { left: 240px; top: 575px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } } @keyframes prize5_right { 0% { left: 400px; top: 385px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } 33% { left: 400px; top: 575px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } 66% { left: 429px; top: 575px; transform: translate(-50%, -50%) rotate(90deg); opacity: 1 } 100% { left: 400px; top: 575px; transform: translate(-50%, -50%) rotate(180deg); opacity: 1 } } .drop1win1 .cashdrop-token[data-token="start"] { animation-name: drop1; left: 220px; top: 30px } .drop1win1 .cashdrop-token[data-token="1"] { animation-name: row1_peg2_left; animation-delay: .3s; left: 205px; top: 100px } .drop1win1 .cashdrop-token[data-token="2"] { animation-name: row2_peg1_right; animation-delay: .6s; left: 185px; top: 150px } .drop1win1 .cashdrop-token[data-token="3"] { animation-name: row3_peg2_left; animation-delay: .9s; left: 205px; top: 200px } .drop1win1 .cashdrop-token[data-token="4"] { animation-name: row4_peg1_left; animation-delay: 1.2s; left: 155px; top: 250px } .drop1win1 .cashdrop-token[data-token="5"] { animation-name: row5_peg1_right; animation-delay: 1.5s; left: 135px; top: 300px } .drop1win1 .cashdrop-token[data-token="6"] { animation-name: row6_peg1_right; animation-delay: 1.8s; left: 185px; top: 350px } .drop1win1 .cashdrop-token[data-token="end"] { animation-name: prize1_right; animation-delay: 2.1s; left: 170px; top: 475px } .drop2win1 .cashdrop-token[data-token="start"] { animation-name: drop2; animation-delay: 0s; left: 220px; top: 30px } .drop2win1 .cashdrop-token[data-token="1"] { animation-name: row1_peg3_left; animation-delay: .3s; left: 205px; top: 100px } .drop2win1 .cashdrop-token[data-token="2"] { animation-name: row2_peg2_left; animation-delay: .6s; left: 185px; top: 150px } .drop2win1 .cashdrop-token[data-token="3"] { animation-name: row3_peg2_left; animation-delay: .9s; left: 205px; top: 200px } .drop2win1 .cashdrop-token[data-token="4"] { animation-name: row4_peg1_right; animation-delay: 1.2s; left: 155px; top: 250px } .drop2win1 .cashdrop-token[data-token="5"] { animation-name: row5_peg2_left; animation-delay: 1.5s; left: 135px; top: 300px } .drop2win1 .cashdrop-token[data-token="6"] { animation-name: row6_peg1_right; animation-delay: 1.8s; left: 185px; top: 350px } .drop2win1 .cashdrop-token[data-token="end"] { animation-name: prize1_right; animation-delay: 2.1s; left: 170px; top: 475px } .drop3win1 .cashdrop-token[data-token="start"] { animation-name: drop3; animation-delay: 0s; left: 220px; top: 30px } .drop3win1 .cashdrop-token[data-token="1"] { animation-name: row1_peg4_left; animation-delay: .3s; left: 205px; top: 100px } .drop3win1 .cashdrop-token[data-token="2"] { animation-name: row2_peg3_left; animation-delay: .6s; left: 185px; top: 150px } .drop3win1 .cashdrop-token[data-token="3"] { animation-name: row3_peg3_left; animation-delay: .9s; left: 205px; top: 200px } .drop3win1 .cashdrop-token[data-token="4"] { animation-name: row4_peg2_left; animation-delay: 1.2s; left: 155px; top: 250px } .drop3win1 .cashdrop-token[data-token="5"] { animation-name: row5_peg2_left; animation-delay: 1.5s; left: 135px; top: 300px } .drop3win1 .cashdrop-token[data-token="6"] { animation-name: row6_peg1_right; animation-delay: 1.8s; left: 185px; top: 350px } .drop3win1 .cashdrop-token[data-token="end"] { animation-name: prize1_right; animation-delay: 2.1s; left: 170px; top: 475px } .drop1win2 .cashdrop-token[data-token="start"] { animation-name: drop1; animation-delay: 0s; left: 220px; top: 30px } .drop1win2 .cashdrop-token[data-token="1"] { animation-name: row1_peg2_right; animation-delay: .3s; left: 205px; top: 100px } .drop1win2 .cashdrop-token[data-token="2"] { animation-name: row2_peg2_left; animation-delay: .6s; left: 185px; top: 150px } .drop1win2 .cashdrop-token[data-token="3"] { animation-name: row3_peg2_right; animation-delay: .9s; left: 205px; top: 200px } .drop1win2 .cashdrop-token[data-token="4"] { animation-name: row4_peg2_right; animation-delay: 1.2s; left: 155px; top: 250px } .drop1win2 .cashdrop-token[data-token="5"] { animation-name: row5_peg3_left; animation-delay: 1.5s; left: 135px; top: 300px } .drop1win2 .cashdrop-token[data-token="6"] { animation-name: row6_peg2_right; animation-delay: 1.8s; left: 185px; top: 350px } .drop1win2 .cashdrop-token[data-token="end"] { animation-name: prize2_right; animation-delay: 2.1s; left: 170px; top: 475px } .drop2win2 .cashdrop-token[data-token="start"] { animation-name: drop2; animation-delay: 0s; left: 220px; top: 30px } .drop2win2 .cashdrop-token[data-token="1"] { animation-name: row1_peg3_left; animation-delay: .3s; left: 205px; top: 100px } .drop2win2 .cashdrop-token[data-token="2"] { animation-name: row2_peg2_right; animation-delay: .6s; left: 185px; top: 150px } .drop2win2 .cashdrop-token[data-token="3"] { animation-name: row3_peg3_right; animation-delay: .9s; left: 205px; top: 200px } .drop2win2 .cashdrop-token[data-token="4"] { animation-name: row4_peg3_left; animation-delay: 1.2s; left: 155px; top: 250px } .drop2win2 .cashdrop-token[data-token="5"] { animation-name: row5_peg3_left; animation-delay: 1.5s; left: 135px; top: 300px } .drop2win2 .cashdrop-token[data-token="6"] { animation-name: row6_peg2_right; animation-delay: 1.8s; left: 185px; top: 350px } .drop2win2 .cashdrop-token[data-token="end"] { animation-name: prize2_right; animation-delay: 2.1s; left: 170px; top: 475px } .drop3win2 .cashdrop-token[data-token="start"] { animation-name: drop3; animation-delay: 0s; left: 220px; top: 30px } .drop3win2 .cashdrop-token[data-token="1"] { animation-name: row1_peg4_left; animation-delay: .3s; left: 205px; top: 100px } .drop3win2 .cashdrop-token[data-token="2"] { animation-name: row2_peg3_right; animation-delay: .6s; left: 185px; top: 150px } .drop3win2 .cashdrop-token[data-token="3"] { animation-name: row3_peg4_left; animation-delay: .9s; left: 205px; top: 200px } .drop3win2 .cashdrop-token[data-token="4"] { animation-name: row4_peg3_left; animation-delay: 1.2s; left: 155px; top: 250px } .drop3win2 .cashdrop-token[data-token="5"] { animation-name: row5_peg3_right; animation-delay: 1.5s; left: 135px; top: 300px } .drop3win2 .cashdrop-token[data-token="6"] { animation-name: row6_peg3_left; animation-delay: 1.8s; left: 185px; top: 350px } .drop3win2 .cashdrop-token[data-token="end"] { animation-name: prize2_left; animation-delay: 2.1s; left: 170px; top: 475px } .drop1win3 .cashdrop-token[data-token="start"] { animation-name: drop1; animation-delay: 0s; left: 220px; top: 30px } .drop1win3 .cashdrop-token[data-token="1"] { animation-name: row1_peg2_right; animation-delay: .3s; left: 205px; top: 100px } .drop1win3 .cashdrop-token[data-token="2"] { animation-name: row2_peg2_right; animation-delay: .6s; left: 185px; top: 150px } .drop1win3 .cashdrop-token[data-token="3"] { animation-name: row3_peg3_right; animation-delay: .9s; left: 205px; top: 200px } .drop1win3 .cashdrop-token[data-token="4"] { animation-name: row4_peg3_right; animation-delay: 1.2s; left: 155px; top: 250px } .drop1win3 .cashdrop-token[data-token="5"] { animation-name: row5_peg4_right; animation-delay: 1.5s; left: 135px; top: 300px } .drop1win3 .cashdrop-token[data-token="6"] { animation-name: row6_peg4_left; animation-delay: 1.8s; left: 185px; top: 350px } .drop1win3 .cashdrop-token[data-token="end"] { animation-name: prize3_left; animation-delay: 2.1s; left: 170px; top: 475px } .drop2win3 .cashdrop-token[data-token="start"] { animation-name: drop2; animation-delay: 0s; left: 220px; top: 30px } .drop2win3 .cashdrop-token[data-token="1"] { animation-name: row1_peg3_right; animation-delay: .3s; left: 205px; top: 100px } .drop2win3 .cashdrop-token[data-token="2"] { animation-name: row2_peg3_left; animation-delay: .6s; left: 185px; top: 150px } .drop2win3 .cashdrop-token[data-token="3"] { animation-name: row3_peg3_right; animation-delay: .9s; left: 205px; top: 200px } .drop2win3 .cashdrop-token[data-token="4"] { animation-name: row4_peg3_right; animation-delay: 1.2s; left: 155px; top: 250px } .drop2win3 .cashdrop-token[data-token="5"] { animation-name: row5_peg4_right; animation-delay: 1.5s; left: 135px; top: 300px } .drop2win3 .cashdrop-token[data-token="6"] { animation-name: row6_peg4_left; animation-delay: 1.8s; left: 185px; top: 350px } .drop2win3 .cashdrop-token[data-token="end"] { animation-name: prize3_left; animation-delay: 2.1s; left: 170px; top: 475px } .drop3win3 .cashdrop-token[data-token="start"] { animation-name: drop3; animation-delay: 0s; left: 220px; top: 30px } .drop3win3 .cashdrop-token[data-token="1"] { animation-name: row1_peg4_left; animation-delay: .3s; left: 205px; top: 100px } .drop3win3 .cashdrop-token[data-token="2"] { animation-name: row2_peg3_right; animation-delay: .6s; left: 185px; top: 150px } .drop3win3 .cashdrop-token[data-token="3"] { animation-name: row3_peg4_right; animation-delay: .9s; left: 205px; top: 200px } .drop3win3 .cashdrop-token[data-token="4"] { animation-name: row4_peg4_left; animation-delay: 1.2s; left: 155px; top: 250px } .drop3win3 .cashdrop-token[data-token="5"] { animation-name: row5_peg4_right; animation-delay: 1.5s; left: 135px; top: 300px } .drop3win3 .cashdrop-token[data-token="6"] { animation-name: row6_peg4_left; animation-delay: 1.8s; left: 185px; top: 350px } .drop3win3 .cashdrop-token[data-token="end"] { animation-name: prize3_left; animation-delay: 2.1s; left: 170px; top: 475px } .drop1win4 .cashdrop-token[data-token="start"] { animation-name: drop1; animation-delay: 0s; left: 220px; top: 30px } .drop1win4 .cashdrop-token[data-token="1"] { animation-name: row1_peg2_right; animation-delay: .3s; left: 205px; top: 100px } .drop1win4 .cashdrop-token[data-token="2"] { animation-name: row2_peg2_right; animation-delay: .6s; left: 185px; top: 150px } .drop1win4 .cashdrop-token[data-token="3"] { animation-name: row3_peg3_right; animation-delay: .9s; left: 205px; top: 200px } .drop1win4 .cashdrop-token[data-token="4"] { animation-name: row4_peg3_left; animation-delay: 1.2s; left: 155px; top: 250px } .drop1win4 .cashdrop-token[data-token="5"] { animation-name: row5_peg3_left; animation-delay: 1.5s; left: 135px; top: 300px } .drop1win4 .cashdrop-token[data-token="6"] { animation-name: row6_peg2_left; animation-delay: 1.8s; left: 185px; top: 350px } .drop1win4 .cashdrop-token[data-token="end"] { animation-name: prize4_right; animation-delay: 2.1s; left: 170px; top: 475px } .drop2win4 .cashdrop-token[data-token="start"] { animation-name: drop2; animation-delay: 0s; left: 220px; top: 30px } .drop2win4 .cashdrop-token[data-token="1"] { animation-name: row1_peg3_right; animation-delay: .3s; left: 205px; top: 100px } .drop2win4 .cashdrop-token[data-token="2"] { animation-name: row2_peg3_left; animation-delay: .6s; left: 185px; top: 150px } .drop2win4 .cashdrop-token[data-token="3"] { animation-name: row3_peg3_left; animation-delay: .9s; left: 205px; top: 200px } .drop2win4 .cashdrop-token[data-token="4"] { animation-name: row4_peg2_left; animation-delay: 1.2s; left: 155px; top: 250px } .drop2win4 .cashdrop-token[data-token="5"] { animation-name: row5_peg2_right; animation-delay: 1.5s; left: 135px; top: 300px } .drop2win4 .cashdrop-token[data-token="6"] { animation-name: row6_peg2_left; animation-delay: 1.8s; left: 185px; top: 350px } .drop2win4 .cashdrop-token[data-token="end"] { animation-name: prize4_right; animation-delay: 2.1s; left: 170px; top: 475px } .drop3win4 .cashdrop-token[data-token="start"] { animation-name: drop3; animation-delay: 0s; left: 220px; top: 30px } .drop3win4 .cashdrop-token[data-token="1"] { animation-name: row1_peg4_left; animation-delay: .3s; left: 205px; top: 100px } .drop3win4 .cashdrop-token[data-token="2"] { animation-name: row2_peg3_left; animation-delay: .6s; left: 185px; top: 150px } .drop3win4 .cashdrop-token[data-token="3"] { animation-name: row3_peg3_right; animation-delay: .9s; left: 205px; top: 200px } .drop3win4 .cashdrop-token[data-token="4"] { animation-name: row4_peg3_left; animation-delay: 1.2s; left: 155px; top: 250px } .drop3win4 .cashdrop-token[data-token="5"] { animation-name: row5_peg3_left; animation-delay: 1.5s; left: 135px; top: 300px } .drop3win4 .cashdrop-token[data-token="6"] { animation-name: row6_peg2_left; animation-delay: 1.8s; left: 185px; top: 350px } .drop3win4 .cashdrop-token[data-token="end"] { animation-name: prize4_right; animation-delay: 2.1s; left: 170px; top: 475px } .drop1win5 .cashdrop-token[data-token="start"] { animation-name: drop1; animation-delay: 0s; left: 220px; top: 30px } .drop1win5 .cashdrop-token[data-token="1"] { animation-name: row1_peg2_right; animation-delay: .3s; left: 205px; top: 100px } .drop1win5 .cashdrop-token[data-token="2"] { animation-name: row2_peg2_right; animation-delay: .6s; left: 185px; top: 150px } .drop1win5 .cashdrop-token[data-token="3"] { animation-name: row3_peg3_right; animation-delay: .9s; left: 205px; top: 200px } .drop1win5 .cashdrop-token[data-token="4"] { animation-name: row4_peg3_right; animation-delay: 1.2s; left: 155px; top: 250px } .drop1win5 .cashdrop-token[data-token="5"] { animation-name: row5_peg4_left; animation-delay: 1.5s; left: 135px; top: 300px } .drop1win5 .cashdrop-token[data-token="6"] { animation-name: row6_peg3_right; animation-delay: 1.8s; left: 185px; top: 350px } .drop1win5 .cashdrop-token[data-token="end"] { animation-name: prize5_right; animation-delay: 2.1s; left: 170px; top: 475px } .drop2win5 .cashdrop-token[data-token="start"] { animation-name: drop2; animation-delay: 0s; left: 220px; top: 30px } .drop2win5 .cashdrop-token[data-token="1"] { animation-name: row1_peg3_right; animation-delay: .3s; left: 205px; top: 100px } .drop2win5 .cashdrop-token[data-token="2"] { animation-name: row2_peg3_right; animation-delay: .6s; left: 185px; top: 150px } .drop2win5 .cashdrop-token[data-token="3"] { animation-name: row3_peg4_left; animation-delay: .9s; left: 205px; top: 200px } .drop2win5 .cashdrop-token[data-token="4"] { animation-name: row4_peg3_right; animation-delay: 1.2s; left: 155px; top: 250px } .drop2win5 .cashdrop-token[data-token="5"] { animation-name: row5_peg4_left; animation-delay: 1.5s; left: 135px; top: 300px } .drop2win5 .cashdrop-token[data-token="6"] { animation-name: row6_peg3_right; animation-delay: 1.8s; left: 185px; top: 350px } .drop2win5 .cashdrop-token[data-token="end"] { animation-name: prize5_right; animation-delay: 2.1s; left: 170px; top: 475px } .drop3win5 .cashdrop-token[data-token="start"] { animation-name: drop3; animation-delay: 0s; left: 220px; top: 30px } .drop3win5 .cashdrop-token[data-token="1"] { animation-name: row1_peg4_left; animation-delay: .3s; left: 205px; top: 100px } .drop3win5 .cashdrop-token[data-token="2"] { animation-name: row2_peg3_right; animation-delay: .6s; left: 185px; top: 150px } .drop3win5 .cashdrop-token[data-token="3"] { animation-name: row3_peg4_right; animation-delay: .9s; left: 205px; top: 200px } .drop3win5 .cashdrop-token[data-token="4"] { animation-name: row4_peg4_left; animation-delay: 1.2s; left: 155px; top: 250px } .drop3win5 .cashdrop-token[data-token="5"] { animation-name: row5_peg4_left; animation-delay: 1.5s; left: 135px; top: 300px } .drop3win5 .cashdrop-token[data-token="6"] { animation-name: row6_peg3_right; animation-delay: 1.8s; left: 185px; top: 350px } .drop3win5 .cashdrop-token[data-token="end"] { animation-name: prize5_right; animation-delay: 2.1s; left: 170px; top: 475px } .cashdrop-prize-1 { border: 3px solid #ff4646; color: #ff4646; text-shadow: 0 0 10px #ff4646; bottom: 20px } .cashdrop-prize-2 { border: 3px solid #62ff69; color: #62ff69; text-shadow: 0 0 10px #62ff69; bottom: 20px } .cashdrop-prize-3 { border: 3px solid #f0ff00; color: #f0ff00; text-shadow: 0 0 10px #f0ff00; bottom: 20px } .cashdrop-prize-4 { border: 3px solid #ff46eb; color: #ff46eb; text-shadow: 0 0 10px #ff46eb; bottom: 20px } .cashdrop-prize-unlucky { height: 90px; width: 90px; background-image: url(/images/external/theme/cashdrop_unlucky.png); background-repeat: no-repeat; background-position: center center; background-size: auto 100%; box-shadow: none } .cashdrop-prize-unlucky span { display: none } .cashdrop-prize-unlucky p { color: #000 } .popup#cashdrop .container { background-image: url(/images/theme/cashdrop_bg-spd.jpg); background-size: 100% 100%; background-position: center; border: none; border-radius: 0 } .popup#cashdrop .container .wrapper { padding: 0 } .popup#cashdrop .container .wrapper .close { background: rgba(0, 0, 0, 0.5); border-radius: 50% } .popup#cashdrop .container .wrapper .close span { background: #fff } .popup#cashdrop .container .wrapper .cashdrop-frame { background: url(/images/theme/cashdrop_frame-spd.png) top center no-repeat; width: 640px; height: 100%; max-height: 640px; min-height: 640px; position: relative } .popup#cashdrop .container .wrapper .cashdrop-frame::before { content: "The Cash Drop feature will be discontinued on 3rd January 2024. We invite you to try our exciting Rewards Reel game for more fun and opportunities. Thanks for playing with us!"; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 300px; font-size: 12px; background: #ff4646; color: #fff; border-radius: 10px; padding: 10px 20px } .popup#cashdrop .container .wrapper .cashdrop-frame.clicked::before { display: none } .popup#cashdrop .container .wrapper .cashdrop-frame.clicked .cashdrop-win .cashdrop-message { pointer-events: initial; animation-name: showWinMessage; animation-delay: 3s; animation-duration: .5s; animation-fill-mode: forwards } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-win { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 3; opacity: 0; pointer-events: none } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-win h3 { font-size: 24px; line-height: 24px; margin: 0; color: #313131 } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-win p { font-weight: 900; font-size: 18px; line-height: 22px; color: #313131; margin-top: 25px } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-win p span { font-size: 60px; line-height: 60px; color: #ff5418; display: block } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-win button { width: auto; appearance: none; background: #FFD02E; border-radius: 30px; display: block; margin: 10px auto 0 auto; position: relative; font-weight: 900; font-size: 24px; color: #000; padding: 10px 20px; text-transform: capitalize; cursor: pointer } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-win .cashdrop-message { width: 320px; padding: 20px 40px; background: #fff; border-radius: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-win .cashdrop-message p { font-weight: bold; font-size: 14px; line-height: 22px; margin: 0 auto; color: #000; max-width: 450px } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-win .cashdrop-message:after { content: ""; display: block; width: 380px; height: 72px; background-image: url(/images/theme/cashdrop_congratulations.png); background-position: bottom center; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); pointer-events: none } .popup#cashdrop .container .wrapper .cashdrop-frame .drop-zones { text-align: center; padding-top: 15px; position: relative } .popup#cashdrop .container .wrapper .cashdrop-frame .drop-zones>div { width: 86px; height: 70px; display: inline-block; vertical-align: top; position: relative; cursor: url(/images/theme/cashdrop_cursor-spd.png), auto } .popup#cashdrop .container .wrapper .cashdrop-frame .drop-zones>div:hover span { background-position: top center } .popup#cashdrop .container .wrapper .cashdrop-frame .drop-zones>div.hide, .popup#cashdrop .container .wrapper .cashdrop-frame .drop-zones>div.selected { opacity: 0 } .popup#cashdrop .container .wrapper .cashdrop-frame .drop-zones>div span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: url(/images/theme/cashdrop_dropzone-spd.png) no-repeat bottom center; animation: dropzoneBounce .5s ease infinite alternate } .popup#cashdrop .container .wrapper .cashdrop-frame .drop-zones:after { content: "Tap one of these 3 positions to drop the coin."; display: block; position: absolute; left: 50%; transform: translateX(-50%) translateY(100%); background: #fff; padding: 15px; color: #000; border-radius: 10px; font-weight: bold; bottom: -20px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.75) } .popup#cashdrop .container .wrapper .cashdrop-frame .drop-zones.dropped div { pointer-events: none; cursor: default } .popup#cashdrop .container .wrapper .cashdrop-frame .drop-zones.dropped div span { animation: none; background-position: top center } .popup#cashdrop .container .wrapper .cashdrop-frame .drop-zones.dropped:after { display: none } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-token { height: 60px; width: 60px; display: block; position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); opacity: 0; animation-fill-mode: forwards; animation-timing-function: linear; animation-delay: 0s; animation-duration: .3s; z-index: 2 } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-token:after { content: ""; display: block; position: absolute; height: 30px; width: 30px; left: 50%; top: 0; transform: translateX(-50%); background-image: url(/images/theme/cashdrop_token-spd.png); background-size: 100% 100%; background-position: center } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-prize { display: block; border-radius: 20px; height: 30px; width: 70px; padding: 5px; position: absolute; text-align: center; text-transform: uppercase; bottom: 0; left: 50%; transform: translateX(-50%); box-shadow: inset 0 0 10px, 0 0 10px } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-prize span { font-size: 20px; line-height: 20px } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-prize span:nth-of-type(2) { line-height: 10px; font-size: 10px } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-prize.cashdrop-prize-position-1 { margin-bottom: 150px; margin-left: -150px } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-prize.cashdrop-prize-position-2 { margin-bottom: 150px; margin-left: 0 } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-prize.cashdrop-prize-position-3 { margin-bottom: 150px; margin-left: 150px } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-prize.cashdrop-prize-position-4 { margin-bottom: 30px; margin-left: -75px; height: 70px; padding: 0; box-shadow: none } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-prize.cashdrop-prize-position-5 { margin-bottom: 40px; margin-left: 75px } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-cost { position: absolute; bottom: 0; width: 100%; text-align: center; max-width: initial; color: #317B00; margin: 0; font-size: 12px } .popup#cashdrop .container .wrapper .cashdrop-frame .cashdrop-unlucky .cashdrop-message:after { display: none } @keyframes winprize1 { 0% { transform: rotate(0deg) } 100% { transform: rotate(3600deg) } } @keyframes winprize2 { 0% { transform: rotate(0deg) } 100% { transform: rotate(3920deg) } } @keyframes winprize3 { 0% { transform: rotate(0deg) } 100% { transform: rotate(3880deg) } } @keyframes winprize4 { 0% { transform: rotate(0deg) } 100% { transform: rotate(3840deg) } } @keyframes winprize5 { 0% { transform: rotate(0deg) } 100% { transform: rotate(3800deg) } } @keyframes winprize6 { 0% { transform: rotate(0deg) } 100% { transform: rotate(3760deg) } } @keyframes winprize7 { 0% { transform: rotate(0deg) } 100% { transform: rotate(3720deg) } } @keyframes winprize8 { 0% { transform: rotate(0deg) } 100% { transform: rotate(3680deg) } } @keyframes winprize9 { 0% { transform: rotate(0deg) } 100% { transform: rotate(3640deg) } } #wheel-wrapper.winprize1 #inner { animation: 5s ease winprize1; transform: rotate(0deg) } #wheel-wrapper.winprize2 #inner { animation: 5s ease winprize2; transform: rotate(320deg) } #wheel-wrapper.winprize3 #inner { animation: 5s ease winprize3; transform: rotate(280deg) } #wheel-wrapper.winprize4 #inner { animation: 5s ease winprize4; transform: rotate(240deg) } #wheel-wrapper.winprize5 #inner { animation: 5s ease winprize5; transform: rotate(200deg) } #wheel-wrapper.winprize6 #inner { animation: 5s ease winprize6; transform: rotate(160deg) } #wheel-wrapper.winprize7 #inner { animation: 5s ease winprize7; transform: rotate(120deg) } #wheel-wrapper.winprize8 #inner { animation: 5s ease winprize8; transform: rotate(80deg) } #wheel-wrapper.winprize9 #inner { animation: 5s ease winprize9; transform: rotate(40deg) } #wheel-wrapper.winprize1 .win-caption#wincaption1, #wheel-wrapper.winprize2 .win-caption#wincaption2, #wheel-wrapper.winprize3 .win-caption#wincaption3, #wheel-wrapper.winprize4 .win-caption#wincaption4, #wheel-wrapper.winprize5 .win-caption#wincaption5, #wheel-wrapper.winprize6 .win-caption#wincaption6, #wheel-wrapper.winprize7 .win-caption#wincaption7, #wheel-wrapper.winprize8 .win-caption#wincaption8, #wheel-wrapper.winprize9 .win-caption#wincaption9 { transform: translate(-50%, -50%) scale(1, 1); opacity: 1; transition: all .3s linear 5s } #wheel-wrapper { display: block; max-width: 800px; position: relative; margin-top: 20px } #wheel-wrapper .spin-value { line-height: 10px; text-transform: uppercase; bottom: -10px; color: #fff; text-align: center; font-weight: 700; width: 100%; position: absolute; font-size: 10px; z-index: 4 } #wheel-wrapper .win-caption { position: absolute; z-index: 4; max-width: 500px; background: #000; border-radius: 20px; border: 3px solid #fff; font-weight: 700; color: #fff; text-align: center; transform: translate(-50%, -50%) scale(0, 0); opacity: 0; left: 50%; top: 50% } #wheel-wrapper .win-caption .wrapper { padding: 20px } #wheel-wrapper .win-caption .wrapper .button { width: auto; appearance: none; background: #FFD02E; border-radius: 30px; display: block; margin: 10px auto 0 auto; position: relative; font-weight: 900; font-size: 24px; color: #000; padding: 10px 20px; text-transform: capitalize; cursor: pointer } #wheel-wrapper .layout { position: relative; top: 0; left: 0; width: 100%; cursor: pointer; -webkit-user-drag: none; z-index: 3 } #wheel-wrapper #inner { top: 0; left: 0; width: 100%; position: absolute; z-index: 2 } @keyframes loot-chest-tap { 0% { background-position: bottom center, top 2% center } 50% { background-position: bottom center, top 10% center } 100% { background-position: bottom center, top 2% center } } @keyframes loot-chest-jump { 0% { transform: translate(0%, 0%) rotate(0deg); transform-origin: 78% 100% } 7% { transform: translate(0%, -2.5%) rotate(-2deg); transform-origin: 78% 100% } 14% { transform: translate(0%, -4%) rotate(1deg); transform-origin: 88% 100% } 21% { transform: translate(0%, 0%) rotate(2deg); transform-origin: 95% 100% } 27% { transform: translate(0%, 0%) rotate(0deg); transform-origin: 78% 100% } 100% { transform: translate(0%, 0%) rotate(0deg); transform-origin: 78% 100% } } @keyframes loot-chest-prize-reveal { 0% { transform: translate(-50%, -50%) scale(0) } 70% { transform: translate(-50%, -50%) scale(0) } 90% { transform: translate(-50%, -50%) scale(1) } 100% { transform: translate(-50%, -50%) scale(1) } } @keyframes loot-chest-rise { 0% { transform: translate(0%, 0%) rotate(0deg) } 10% { transform: translate(0%, -1.5%) rotate(-2deg) } 18% { transform: translate(0%, -3%) rotate(2deg) } 25% { transform: translate(0%, -4.5%) rotate(-2deg) } 31% { transform: translate(0%, -6%) rotate(2deg) } 35% { transform: translate(0%, -7.5%) rotate(-2deg) } 38% { transform: translate(0%, -9%) rotate(2deg) } 41% { transform: translate(0%, -10.5%) rotate(-2deg) } 44% { transform: translate(0%, -12%) rotate(2deg) } 47% { transform: translate(0%, -13.5%) rotate(-2deg) } 50% { transform: translate(0%, -15%) rotate(2deg) } 50.01% { transform: translate(0%, -15%) rotate(2deg) } 80% { transform: translate(0%, -15%) rotate(0deg) } 85% { transform: translate(0%, -6%) rotate(-2deg) } 90% { transform: translate(0%, -2%) rotate(2deg) } 99% { transform: translate(0%, 0%) rotate(0deg) } 100% { transform: translate(0%, 0%) rotate(0deg) } } @keyframes loot-chest-coins-reveal { 0% { top: 50%; opacity: 0 } 100% { top: 0; opacity: 1 } } @keyframes loot-chest-open { 0% { transform: translate(0%, 0%) } 19.01% { transform: translate(0%, 0%) } 20% { transform: translate(-20%, 0%) } 39.01% { transform: translate(-20%, 0%) } 40% { transform: translate(-40%, 0%) } 59.01% { transform: translate(-40%, 0%) } 60% { transform: translate(-60%, 0%) } 79.01% { transform: translate(-60%, 0%) } 80% { transform: translate(-80%, 0%) } 100% { transform: translate(-80%, 0%) } } #chestpopup .wrapper { background: none; box-shadow: none } #chestpopup .wrapper .close { backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); background: rgba(0, 0, 0, 0.4); border-radius: 50% } #chestpopup .wrapper .close span { background: #fff } #chestpopup .wrapper .loot-chest-bg { height: auto; overflow: visible } #chestpopup .wrapper .loot-chest-bg .loot-chest-content { padding: 55px 0 20px 0 } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .lootchest-header-bg1 { display: none } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-prize-container { position: fixed; display: flex; flex-direction: column; justify-content: center; z-index: 8; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); width: 100%; height: 100%; box-sizing: border-box; padding: 10px 5%; transition: .2s ease-in-out; background: rgba(0, 0, 0, 0.65); border-radius: 10px; text-align: center } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-prize-container.active { animation: loot-chest-prize-reveal 1.4s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-delay: .1s; animation-fill-mode: forwards } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-prize-container p { font-size: 36px; line-height: 48px; color: #fff; font-weight: bold; margin: 0 } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-prize-container p .loot-chest-win-amount { color: #FFD02E } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-prize-container .loot-chest-button { width: auto; appearance: none; background: #FFD02E; border-radius: 30px; display: block; margin: 10px auto 0 auto; position: relative; font-weight: 900; font-size: 24px; color: #000; padding: 10px 20px; text-transform: capitalize; cursor: pointer } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container { max-width: 500px; height: auto; margin: 0 auto; position: relative; display: block; overflow: hidden; padding-top: 22%; padding-bottom: 4.3%; background: url(/images/external/theme/loot-chest_shadow-network.png) no-repeat bottom center, url(/images/external/theme/loot-chest_taphold-network.png) no-repeat top center; background-size: 100% auto; animation: loot-chest-tap infinite 1.5s ease-in-out } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container.tap-hold { background-size: 100% auto, 0 } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container.tap-hold .loot-chest-animation-container { transform-origin: 58% 100%; animation: loot-chest-rise 2s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-delay: 0s } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container.tap-hold .loot-chest-animation-container .loot-box-loot-coins { animation: .08s loot-chest-coins-reveal ease-in-out; animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: forwards } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container.tap-hold .loot-chest-animation-container .loot-box-loot-lid { transform: translate(0%, 0%) rotate(0deg); animation: loot-chest-open .12s steps(4); animation-iteration-count: 1; animation-fill-mode: forwards; animation-delay: 1s } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container { max-width: 500px; height: auto; margin: 0 auto; position: relative; display: block; overflow: hidden; transform-origin: 58% 100%; transition: ease-in-out; animation: loot-chest-jump 2.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: 1s; user-select: none } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-lid { width: 500%; transform: translate(0%, 0%) rotate(0deg); -webkit-touch-callout: none } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-chest-open-sparkle { display: none !important } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-coins { position: absolute; height: 100%; top: 50%; left: 0; width: 800%; transform: translate(0%, 0%); opacity: 0; -webkit-touch-callout: none } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-coins.prize-1 { transform: translate(0%, 0%) } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-coins.prize-2 { transform: translate(-12.5%, 0%) } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-coins.prize-3 { transform: translate(-25%, 0%) } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-coins.prize-4 { transform: translate(-37.5%, 0%) } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-coins.prize-5 { transform: translate(-50%, 0%) } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-coins.prize-6 { transform: translate(-62.5%, 0%) } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-coins.prize-7 { transform: translate(-75%, 0%) } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-coins.prize-8 { transform: translate(-87.5%, 0%) } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-container .loot-chest-animation-container .loot-box-loot-box { position: absolute; height: 100%; width: 100%; top: 0; left: 0; -webkit-touch-callout: none } #chestpopup .wrapper .loot-chest-bg .loot-chest-content .loot-chest-spin-cost { font-size: 10px; text-transform: capitalize; text-align: center; margin: 0 auto; backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); background: rgba(0, 0, 0, 0.4); border-radius: 5px; color: #fff; width: max-content; padding: 5px 10px } @media screen and (max-width: 640px) { @keyframes reel-spin_start { 0% { bottom: 0 } 100% { bottom: -1000px } } @keyframes reel-spin_mid { 0% { bottom: 250px } 100% { bottom: -1000px } } @keyframes reel-spin_winprize1 { 0% { bottom: 250px } 100% { bottom: -450px } } @keyframes reel-spin_winprize2 { 0% { bottom: 250px } 100% { bottom: -500px } } @keyframes reel-spin_winprize3 { 0% { bottom: 250px } 100% { bottom: -550px } } @keyframes reel-spin_winprize4 { 0% { bottom: 250px } 100% { bottom: -600px } } @keyframes reel-spin_winprize5 { 0% { bottom: 250px } 100% { bottom: -650px } } @keyframes reel-spin_winprize6 { 0% { bottom: 250px } 100% { bottom: -700px } } @keyframes reel-spin_winprize7 { 0% { bottom: 250px } 100% { bottom: -750px } } @keyframes reel-spin_winprize8 { 0% { bottom: 250px } 100% { bottom: -800px } } .popup#cashdrop .container { max-height: 448px } .popup#cashdrop .container .wrapper { overflow: hidden } .popup#cashdrop .container .wrapper .cashdrop-frame { left: 50%; top: -96px; transform: translateX(-50%) scale(.7) } #megareel-popup .container { max-width: 300px; width: 100% } #megareel-popup .container .close { right: 0 } #megareel-popup .container #layout-wrapper { width: 300px; height: 300px } #megareel-popup .container #layout-wrapper .winnings .wrapper { padding: 15px; line-height: 16px; font-size: 14px } #megareel-popup .container #layout-wrapper #prizes { left: 12.5px; top: 25px; width: 275px; height: 250px } #megareel-popup .container #layout-wrapper #prizes .prize-list1, #megareel-popup .container #layout-wrapper #prizes .prize-list2, #megareel-popup .container #layout-wrapper #prizes .prize-list3 { width: 275px } #megareel-popup .container #layout-wrapper #prizes .prize-list2, #megareel-popup .container #layout-wrapper #prizes .prize-list3 { bottom: 250px } #megareel-popup .container #layout-wrapper.winprize1 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize2 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize3 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize4 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize5 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize6 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize7 #prizes .prize-list1, #megareel-popup .container #layout-wrapper.winprize8 #prizes .prize-list1 { bottom: 250px } #megareel-popup .container #layout-wrapper.winprize1 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize2 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize3 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize4 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize5 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize6 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize7 #prizes .prize-list3, #megareel-popup .container #layout-wrapper.winprize8 #prizes .prize-list3 { bottom: -750px } #chestpopup .wrapper { max-width: 300px } } .reg-bg { position: fixed; height: 100%; width: 100%; overflow: auto; display: none; z-index: 999; top: 0; left: 0 } .reg-bg.active { display: block } .reg-bg .reg-top-wrapper { padding: 120px 0 20px 0 } .reg-bg .reg-top-wrapper:before { content: ""; width: 250px; height: 80px; display: block; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-size: contain; background-position: center; background-repeat: no-repeat } .reg-bg .reg-wrapper { display: block; margin: 0 auto; max-width: 640px; position: relative } .reg-bg .reg-wrapper .reg-close { height: 35px; width: 35px; top: 10px; right: 10px; position: absolute; z-index: 999; cursor: pointer } .reg-bg .reg-wrapper .reg-close span { width: 25px; display: block; position: absolute; left: 50%; top: 50%; height: 3px; border-radius: 10px } .reg-bg .reg-wrapper .reg-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) } .reg-bg .reg-wrapper .reg-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) } .reg-bg .reg-wrapper .container { overflow-x: hidden } .reg-bg .reg-wrapper .container .reg-steps { height: auto; padding: 35px 0 15px 0; box-sizing: border-box; display: flex; position: relative } .reg-bg .reg-wrapper .container .reg-steps:before, .reg-bg .reg-wrapper .container .reg-steps:after { content: ""; display: block; position: absolute; width: calc(100% - 200px); height: 4px; left: 50%; top: 50%; transform: translate(-50%, -50%) } .reg-bg .reg-wrapper .container .reg-steps:after { width: 0; transition: width .4s linear; transform: translateY(-50%); left: calc(0px + 16%) } .reg-bg .reg-wrapper .container .reg-steps .reg-step1, .reg-bg .reg-wrapper .container .reg-steps .reg-step2, .reg-bg .reg-wrapper .container .reg-steps .reg-step3 { flex: 0 0 calc(100% / 3); display: flex; justify-content: center; z-index: 1 } .reg-bg .reg-wrapper .container .reg-steps .reg-step1 p, .reg-bg .reg-wrapper .container .reg-steps .reg-step2 p, .reg-bg .reg-wrapper .container .reg-steps .reg-step3 p { margin: 0; font-size: 14px } .reg-bg .reg-wrapper .container .reg-steps .reg-step1 p i, .reg-bg .reg-wrapper .container .reg-steps .reg-step2 p i, .reg-bg .reg-wrapper .container .reg-steps .reg-step3 p i { display: block; height: 30px; width: 30px; line-height: 30px; text-align: center; border-radius: 50%; margin: 0 auto 5px auto; font-weight: bold; font-style: normal; font-size: 16px } .reg-bg .reg-wrapper .container .reg-content-container { width: 300%; padding: 0 0 60px 0; transition: margin .5s; position: relative; display: flex; flex-direction: column-reverse } .reg-bg .reg-wrapper .container .reg-content-container>.clearfix { position: relative; width: calc(100% / 3); background-size: 100% 100%, auto 300px, auto 300px, 100%; background-position: center center, center left -70px, center right -70px, center center; background-repeat: no-repeat; margin-bottom: 15px; left: 0; transition: left .5s; display: none } .reg-bg .reg-wrapper .container .reg-content-container>.clearfix:before { color: #fff; text-align: center; font-weight: bold; font-size: 28px; display: block; padding: 30px 30px 20px 30px; box-sizing: border-box; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.5); white-space: pre-line } .reg-bg .reg-wrapper .container .reg-content-container>.clearfix:after { color: #ccc; font-size: 9px; text-align: center; display: block; padding: 0 10px 5px 10px } .reg-bg .reg-wrapper .container .reg-content-container form { margin: 0; display: flex; justify-content: left } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 { padding: 0 20px; flex: 0 0 calc(100% / 3); display: flex; flex-wrap: wrap; box-sizing: border-box; position: relative; align-content: flex-start } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-button, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-button, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-button { display: flex; justify-content: right; float: right; padding: 15px 30px; text-transform: capitalize; font-weight: bold; cursor: pointer; position: absolute; bottom: -40px; right: 20px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .container, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .container, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .container { overflow: initial; display: block; width: 100% } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .container .paypal_reg, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .container .paypal_reg, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .container .paypal_reg { text-align: center } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .container .paypal_reg img, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .container .paypal_reg img, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .container .paypal_reg img { width: 220px; display: none } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .container .paypal_reg a, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .container .paypal_reg a, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .container .paypal_reg a { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 474 83'%3E%3Cdefs%3E%3Cstyle%3E .cls-3%7Bstroke-width:0;fill:%23fff%7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Crect width='474' height='83' rx='41.5' ry='41.5' style='fill:%230070ba;stroke-width:0'/%3E%3Cpath d='M71.27 25.56c-.77 0-1.43.56-1.55 1.32l-2.57 16.29c.12-.76.78-1.32 1.55-1.32h7.53c7.57 0 14-5.53 15.18-13.01.09-.56.14-1.12.15-1.69-1.92-1.01-4.19-1.59-6.66-1.59H71.28Z' style='fill:%23e6f1f8;stroke-width:0'/%3E%3Cpath d='M91.55 27.15c-.01.57-.06 1.13-.15 1.69-1.17 7.49-7.6 13.01-15.18 13.01h-7.53c-.77 0-1.43.56-1.55 1.32l-2.36 14.97-1.48 9.39c-.11.69.36 1.34 1.05 1.45.07.01.13.02.2.02h8.17c.77 0 1.43-.56 1.55-1.32l2.15-13.65c.12-.76.78-1.32 1.55-1.32h4.81c7.57 0 14-5.53 15.18-13.01.83-5.31-1.84-10.15-6.42-12.55Z' style='stroke-width:0;fill:%23add1e9'/%3E%3Cpath d='M61.99 14.7c-.77 0-1.43.56-1.55 1.32l-6.41 40.65c-.12.77.47 1.47 1.26 1.47h9.51l2.36-14.97 2.57-16.29c.12-.76.78-1.32 1.55-1.32H84.9c2.48 0 4.74.58 6.66 1.59.13-6.82-5.49-12.45-13.23-12.45H62ZM120.18 52.88V30.27h3.75v19.7h11.86v2.91h-15.61ZM147.24 53.23c-2.45 0-4.51-.82-6.19-2.45-1.68-1.64-2.52-3.69-2.52-6.17s.84-4.56 2.52-6.2c1.68-1.64 3.74-2.45 6.19-2.45s4.55.82 6.23 2.45c1.68 1.64 2.52 3.7 2.52 6.2s-.84 4.53-2.52 6.17c-1.68 1.64-3.76 2.45-6.23 2.45Zm0-2.87c1.54 0 2.79-.53 3.74-1.6.96-1.07 1.44-2.45 1.44-4.15s-.48-3.12-1.44-4.18c-.96-1.07-2.2-1.6-3.74-1.6s-2.78.53-3.73 1.6c-.94 1.07-1.42 2.46-1.42 4.18s.47 3.08 1.42 4.15 2.19 1.6 3.73 1.6ZM175.44 54.68c0 1.77-.93 3.19-2.8 4.28-1.87 1.09-4.23 1.63-7.1 1.63-2.45 0-4.47-.44-6.05-1.32-1.59-.88-2.38-2.03-2.38-3.46 0-.97.42-1.83 1.26-2.58.84-.75 1.94-1.29 3.29-1.61-.26-.28-.46-.59-.61-.92-.15-.33-.23-.66-.23-.98 0-.54.19-1.05.58-1.53.39-.48.94-.91 1.66-1.28-1.4-.43-2.5-1.11-3.31-2.05-.81-.94-1.21-2.01-1.21-3.21 0-1.66.7-3.02 2.1-4.09 1.4-1.07 3.16-1.6 5.28-1.6.44 0 .88.03 1.31.1.43.06.85.15 1.24.26h7.35l-.42 2.29h-3.36c.35.45.62.93.81 1.44.19.51.28 1.04.28 1.6 0 1.68-.67 3.04-2.01 4.09-1.34 1.04-3.07 1.57-5.2 1.57h-.38c-.09 0-.18-.01-.25-.03-.51.26-.89.51-1.14.74-.25.24-.37.48-.37.74 0 .3.14.54.42.73.28.18.69.31 1.23.37l3.95.48c2.12.3 3.66.8 4.62 1.5s1.44 1.65 1.44 2.86Zm-14.9.71c0 .86.48 1.54 1.45 2.03.97.5 2.28.74 3.94.74s3.13-.27 4.27-.82c1.14-.55 1.72-1.26 1.72-2.15 0-.54-.22-.96-.67-1.26-.44-.3-1.25-.53-2.42-.68l-5.04-.74c-1.03.26-1.83.64-2.4 1.15s-.86 1.08-.86 1.73ZM165.93 45c1.12 0 2.05-.31 2.78-.94s1.1-1.43 1.1-2.42-.36-1.86-1.08-2.47c-.72-.61-1.66-.92-2.8-.92s-2.08.31-2.8.92c-.72.61-1.08 1.44-1.08 2.47s.37 1.8 1.1 2.42 1.66.94 2.78.94ZM189.55 32.27c-.65 0-1.2-.2-1.64-.61-.44-.41-.67-.9-.67-1.49s.22-1.08.67-1.49c.44-.41.99-.61 1.64-.61s1.2.2 1.65.61c.44.41.67.9.67 1.49s-.22 1.08-.67 1.49c-.44.41-.99.61-1.65.61Zm1.78 20.61h-3.6V36.64l3.6-.55v16.79ZM196.86 52.88V36.64l3.6-.55v1.84c.86-.6 1.83-1.08 2.89-1.44 1.06-.36 2.13-.53 3.2-.53 1.91 0 3.4.5 4.46 1.49s1.59 2.37 1.59 4.13v11.3h-3.64V42.42c0-1.23-.3-2.13-.89-2.7-.6-.57-1.51-.86-2.75-.86-.86 0-1.68.11-2.45.32-.77.22-1.57.57-2.41 1.07v12.63h-3.6ZM232.21 48.58l4.06-12.27h2.48l4.16 12.3 4.06-12.3h3.36l-6.12 16.66h-2.76l-4.09-12.05-4.06 12.05h-2.77l-6.12-16.66h3.67l4.13 12.27ZM255.2 32.27c-.65 0-1.2-.2-1.64-.61-.44-.41-.67-.9-.67-1.49s.22-1.08.67-1.49c.44-.41.99-.61 1.64-.61s1.2.2 1.65.61c.44.41.67.9.67 1.49s-.22 1.08-.67 1.49c-.44.41-.99.61-1.65.61Zm1.79 20.61h-3.6V36.64l3.6-.55v16.79ZM260.42 38.89v-2.58h2.62v-3.58l3.64-.52v4.1h6.23l-.49 2.58h-5.74v8.85c0 .82.25 1.45.75 1.91.5.45 1.2.68 2.08.68.84 0 1.57-.06 2.19-.18.62-.12 1.28-.31 1.98-.56v2.75c-.65.3-1.37.52-2.15.66-.78.14-1.62.21-2.5.21-1.84 0-3.3-.44-4.38-1.32s-1.61-2.13-1.61-3.75V38.9h-2.62ZM277.39 52.88V27.46l3.6-.48v10.95c.86-.6 1.83-1.08 2.89-1.44 1.06-.36 2.13-.53 3.2-.53 1.91 0 3.4.5 4.46 1.49s1.59 2.37 1.59 4.13v11.3h-3.64V42.42c0-1.23-.3-2.13-.89-2.7-.6-.57-1.51-.86-2.75-.86-.86 0-1.68.11-2.45.32-.77.22-1.57.57-2.41 1.07v12.63h-3.6ZM325.51 37.21c0 2.09-.81 3.77-2.43 5.04s-3.75 1.91-6.39 1.91h-5.11v8.72h-3.75V30.27h8.85c2.64 0 4.77.64 6.39 1.91s2.43 2.95 2.43 5.04Zm-3.88 0c0-1.25-.47-2.23-1.4-2.96-.93-.72-2.18-1.08-3.74-1.08h-4.9v8.07h4.9c1.56 0 2.81-.36 3.74-1.08.93-.72 1.4-1.71 1.4-2.96ZM342.8 52.88h-3.6l-.35-1.74c-.84.69-1.72 1.21-2.64 1.57-.92.36-1.87.53-2.85.53-1.52 0-2.76-.41-3.73-1.23-.97-.82-1.45-1.88-1.45-3.2 0-1.79.91-3.18 2.73-4.18s4.47-1.54 7.94-1.63v-.97c0-1.05-.31-1.85-.94-2.39-.63-.54-1.56-.81-2.8-.81-.96 0-1.93.13-2.92.4s-1.99.67-2.99 1.21V37.6c.82-.49 1.8-.89 2.96-1.19 1.15-.3 2.26-.45 3.31-.45 2.24 0 3.97.52 5.18 1.55 1.21 1.03 1.82 2.49 1.82 4.36v7.72c0 .69.02 1.26.07 1.71.05.45.14.98.28 1.58Zm-11.16-4.3c0 .67.25 1.19.75 1.58.5.39 1.17.58 2.01.58.75 0 1.47-.11 2.17-.34.7-.23 1.46-.6 2.27-1.11v-4.17c-2.43.09-4.23.42-5.42.99s-1.79 1.39-1.79 2.47ZM346.13 57.85c1.42 0 2.58-.43 3.48-1.29.9-.86 1.9-2.5 2.99-4.91l-7.38-15.34h3.88l5.39 11.88 5.32-11.88h3.53l-7.84 16.41c-1.45 2.99-2.83 5.05-4.17 6.18-1.33 1.13-3.01 1.7-5.04 1.7-.33 0-.65-.03-.98-.08s-.59-.12-.8-.21v-2.68c.23.06.5.12.79.16.29.04.57.06.82.06ZM384.48 37.21c0 2.09-.81 3.77-2.43 5.04s-3.75 1.91-6.39 1.91h-5.11v8.72h-3.75V30.27h8.85c2.64 0 4.77.64 6.39 1.91s2.43 2.95 2.43 5.04Zm-3.88 0c0-1.25-.47-2.23-1.4-2.96-.93-.72-2.18-1.08-3.74-1.08h-4.9v8.07h4.9c1.56 0 2.81-.36 3.74-1.08.93-.72 1.4-1.71 1.4-2.96ZM401.77 52.88h-3.6l-.35-1.74c-.84.69-1.72 1.21-2.64 1.57-.92.36-1.87.53-2.85.53-1.52 0-2.76-.41-3.73-1.23-.97-.82-1.45-1.88-1.45-3.2 0-1.79.91-3.18 2.73-4.18s4.47-1.54 7.94-1.63v-.97c0-1.05-.31-1.85-.94-2.39-.63-.54-1.56-.81-2.8-.81-.96 0-1.93.13-2.92.4s-1.99.67-2.99 1.21V37.6c.82-.49 1.8-.89 2.96-1.19 1.15-.3 2.26-.45 3.31-.45 2.24 0 3.97.52 5.18 1.55 1.21 1.03 1.82 2.49 1.82 4.36v7.72c0 .69.02 1.26.07 1.71.05.45.14.98.28 1.58Zm-11.16-4.3c0 .67.25 1.19.75 1.58.5.39 1.17.58 2.01.58.75 0 1.47-.11 2.17-.34.7-.23 1.46-.6 2.27-1.11v-4.17c-2.43.09-4.23.42-5.42.99s-1.79 1.39-1.79 2.47ZM410.28 52.88h-3.6V27.46l3.6-.48v25.9Z' class='cls-3'/%3E%3C/g%3E%3C/svg%3E%0A") center no-repeat; display: block; height: 35px; width: 200px; margin: 0 auto } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .container .paypal_reg p, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .container .paypal_reg p, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .container .paypal_reg p { font-size: 14px; margin: 5px 0 10px 0 } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container { flex: 0 0 50%; margin-bottom: 15px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container #honeypot-div, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container #honeypot-div, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container #honeypot-div { display: none } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container { padding: 0 10px; box-sizing: border-box } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container label, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container label, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container label { font-size: 16px; font-weight: bold } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container input[type="text"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container input[type="password"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container select, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container input[type="text"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container input[type="password"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container select, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container input[type="text"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container input[type="password"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container select { width: 100%; line-height: 40px; padding: 0 10px; position: relative; margin: 10px 0 0 0; -webkit-appearance: none; border-radius: 10px; outline: none; font-size: 16px; color: #000; background-color: #fff; box-sizing: border-box } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container input[type="text"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container input[type="password"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container select~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container input[type="text"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container input[type="password"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container select~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container input[type="text"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container input[type="password"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container select~.error { display: none; margin: 0; padding: 3px 10px 5px 10px; position: relative; border-radius: 0 0 10px 10px; font-size: 12px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container select, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container select, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container select { background-repeat: no-repeat; background-position: center right 5px; background-size: 12px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container.error input[type="text"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container.error input[type="password"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container.error select, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container.error input[type="text"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container.error input[type="password"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container.error select, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container.error input[type="text"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container.error input[type="password"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container.error select { border-radius: 10px 10px 0 0 } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container.error input[type="text"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container.error input[type="password"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container.error select~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container.error input[type="text"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container.error input[type="password"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container.error select~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container.error input[type="text"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container.error input[type="password"]~.error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container.error select~.error { display: block } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container.valid input[type="text"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container.valid input[type="password"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container.valid input[type="text"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container.valid input[type="password"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container.valid input[type="text"], .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container.valid input[type="password"] { border: 2px solid #1BB90D } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container#location-uk, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container#location-uk, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container#location-uk { font-size: 0; margin: 10px 0 0 0 } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container#location-uk #reg_postcode_uk, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container#location-uk #reg_postcode_uk, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container#location-uk #reg_postcode_uk { width: 70%; border-radius: 10px 0 0 10px; margin: 0; display: inline-block; vertical-align: top } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container#location-uk .find-it, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container#location-uk .find-it, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container#location-uk .find-it { margin: 0; width: 30%; border-radius: 0 10px 10px 0; height: 44px; display: inline-block; vertical-align: top } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container#location-uk.error #reg_postcode_uk, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container#location-uk.error #reg_postcode_uk, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container#location-uk.error #reg_postcode_uk { border-radius: 10px 0 0 0 } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container#location-uk.error .find-it, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container#location-uk.error .find-it, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container#location-uk.error .find-it { border-radius: 0 10px 0 0 } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container#location-uk.error .error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container#location-uk.error .error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container#location-uk.error .error { width: 100%; box-sizing: border-box } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_dob_div, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_dob_div, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_dob_div { gap: 0 5px; display: flex; flex-wrap: wrap } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_dob_div select, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_dob_div select, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_dob_div select { flex: 0 0 auto; border-radius: 10px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_dob_div select#reg_dobday, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_dob_div select#reg_dobday, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_dob_div select#reg_dobday { width: 70px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_dob_div select#reg_dobmonth, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_dob_div select#reg_dobmonth, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_dob_div select#reg_dobmonth { width: 124px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_dob_div select#reg_dobyear, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_dob_div select#reg_dobyear, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_dob_div select#reg_dobyear { width: 75px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_dob_div .error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_dob_div .error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_dob_div .error { flex: 0 0 100%; box-sizing: border-box; margin-top: 5px; border-radius: 10px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_dob_div.valid select, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_dob_div.valid select, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_dob_div.valid select { border: 2px solid #1BB90D } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_terms_div .agreed-terms, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_terms_div .agreed-terms, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_terms_div .agreed-terms { margin: 0; display: flex; gap: 0 10px; align-items: center } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_terms_div .agreed-terms label, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_terms_div .agreed-terms label, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_terms_div .agreed-terms label { font-size: 12px; font-weight: normal; color: #000 } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_terms_div .agreed-terms label a, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_terms_div .agreed-terms label a, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_terms_div .agreed-terms label a { text-decoration: underline; color: #000 } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_terms_div .agreed-terms input, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_terms_div .agreed-terms input, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_terms_div .agreed-terms input { -webkit-appearance: none; margin: 0; width: 20px; height: 20px; border-radius: 50px; cursor: pointer } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_terms_div .agreed-terms input:checked, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_terms_div .agreed-terms input:checked, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_terms_div .agreed-terms input:checked { box-shadow: inset 0 0 0 2px #fff } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_terms_div .error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_terms_div .error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_terms_div .error { display: none; margin-top: 5px; border-radius: 10px; padding: 3px 10px 5px 10px; position: relative; font-size: 12px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_terms_div.error .error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_terms_div.error .error, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_terms_div.error .error { display: block } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #opt-in, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #opt-in, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #opt-in { background: #eee; border-radius: 10px; padding: 10px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #opt-in .opt-options, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #opt-in .opt-options, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #opt-in .opt-options { margin: 0; display: flex; align-items: center; gap: 0 10px; font-size: 14px; line-height: 14px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #opt-in .opt-options input, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #opt-in .opt-options input, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #opt-in .opt-options input { -webkit-appearance: none; margin: 0; min-width: 17px; height: 17px; border-radius: 50px; cursor: pointer } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #opt-in .opt-options input:checked, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #opt-in .opt-options input:checked, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #opt-in .opt-options input:checked { box-shadow: inset 0 0 0 2px #fff } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #opt-in .opt-options span, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #opt-in .opt-options span, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #opt-in .opt-options span { display: flex; flex-flow: wrap } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #opt-in .opt-options span br, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #opt-in .opt-options span br, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #opt-in .opt-options span br { content: ""; display: inline-block } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #opt-in .opt-options span br:after, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #opt-in .opt-options span br:after, .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #opt-in .opt-options span br:after { content: " "; font-size: 8px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-button.go-back { right: initial; left: 20px; background: none; text-decoration: underline } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container:first-child { flex: 0 0 100%; align-self: flex-start } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-button.go-back { right: initial; left: 20px; background: none; text-decoration: underline } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-button.join-now { right: 20px; left: initial; font-size: 16px } .reg-bg .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container:nth-child(3) { flex: 0 0 100% } .reg-bg .reg-wrapper.step1-valid .reg-content-container { margin-left: -100% } .reg-bg .reg-wrapper.step1-valid .reg-content-container>.clearfix { left: calc(100% / 3) } .reg-bg .reg-wrapper.step1-valid .reg-steps:after { width: calc((100% - 200px) / 2) } .reg-bg .reg-wrapper.step1-valid .reg-steps .reg-step1 p i { font-size: 0 !important } .reg-bg .reg-wrapper.step1-valid .reg-steps .reg-step1 p i:after { content: "✓"; font-size: 16px } .reg-bg .reg-wrapper.step1-valid.step2-valid .reg-content-container { margin-left: -200% } .reg-bg .reg-wrapper.step1-valid.step2-valid .reg-content-container>.clearfix { left: calc(2 * (100% / 3)) } .reg-bg .reg-wrapper.step1-valid.step2-valid .reg-steps:after { width: calc(100% - 200px) } .reg-bg .reg-wrapper.step1-valid.step2-valid .reg-steps .reg-step2 p i { font-size: 0 !important } .reg-bg .reg-wrapper.step1-valid.step2-valid .reg-steps .reg-step2 p i:after { content: "✓"; font-size: 16px } #paypal-quick-reg-page .container .wrapper { padding: 20px 40px } #paypal-quick-reg-page .container .wrapper .make-deposit-container>div { display: flex; flex-wrap: wrap; gap: 5px } #paypal-quick-reg-page .container .wrapper .make-deposit-container>div .amount-button { background: #051B27; color: #fff; padding: 15px 25px; border-radius: 15px; font-size: 18px; font-weight: bold; cursor: pointer } #paypal-quick-reg-page .container .wrapper .make-deposit-container>div .amount-button.active { background: #1BB90D; color: #fff } #paypal-quick-reg-page .container .wrapper .cashier>p { max-width: 620px; margin: 0 auto; padding: 20px 0 } #paypal-quick-reg-page .container .wrapper .cashier #promocode { line-height: 40px; padding: 0 25px 0 10px; position: relative; margin: 0; -webkit-appearance: none; border-radius: 10px; outline: none; border: 2px solid #ccc } #paypal-quick-reg-page .container .wrapper .cashier #paypal-button { width: 100%; border: none; height: 60px; padding: 0; cursor: pointer; background: url(/images/theme/header_deposit-paypal.png) center no-repeat; background-size: auto 100% } @media screen and (max-width: 640px) { .reg-bg .reg-top-wrapper { padding: 70px 0 20px 0 } .reg-bg .reg-top-wrapper:before { width: 200px; height: 60px; top: 5px } .reg-bg .reg-top-wrapper .reg-wrapper { width: calc(100% - 10px); overflow: hidden } .reg-bg .reg-top-wrapper .reg-wrapper>.container { padding-bottom: 20px } .reg-bg .reg-top-wrapper .reg-wrapper .reg-close { top: 3px; right: 5px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-steps { padding: 5px 0; max-width: 200px; margin: 0 auto } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-steps:before { width: calc(100% - 75px) } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-steps .reg-step1 p, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-steps .reg-step2 p, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-steps .reg-step3 p { font-size: 0 } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-steps .reg-step1 p i, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-steps .reg-step2 p i, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-steps .reg-step3 p i { margin: 0 auto; height: 26px; width: 26px; line-height: 26px; font-size: 15px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container>.clearfix { background-size: 100% 100%, auto 200px, auto 200px, 100%; background-position: center center, center left -70px, center right -70px, center center; background-repeat: no-repeat; margin-bottom: 10px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container>.clearfix:before { padding: 10px 20px 10px 20px; white-space: normal; font-size: 20px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container>.clearfix:after { font-size: 8px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 { padding: 0 10px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-button, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-button, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-button { bottom: -60px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .container .paypal_reg p, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .container .paypal_reg p, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .container .paypal_reg p { font-size: 11px; margin: 5px 0 } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container { flex: 0 0 100%; margin-bottom: 10px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container { padding: 0 } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container label, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container label, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container label { font-size: 14px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_dob_div select#reg_dobmonth, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_dob_div select#reg_dobmonth, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_dob_div select#reg_dobmonth { width: 114px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container #reg_dob_div select#reg_dobyear, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container #reg_dob_div select#reg_dobyear, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container #reg_dob_div select#reg_dobyear { width: 85px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container input[type="text"], .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container input[type="password"], .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container select, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container input[type="text"], .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container input[type="password"], .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container select, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container input[type="text"], .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container input[type="password"], .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container select { margin: 5px 0 0 0; line-height: 35px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1 .reg-content-small-container .container .input-container#location-uk .find-it, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container .container .input-container#location-uk .find-it, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step3 .reg-content-small-container .container .input-container#location-uk .find-it { height: 39px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container { margin-bottom: 0 } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container .container { display: flex; flex-wrap: wrap; gap: 0 5px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container .container label { flex: 0 0 100% } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container .container .input-container { flex: 0 0 calc(50% - 3px) } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container .container .input-container input[type="text"], .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container .container .input-container input[type="password"], .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container .container .input-container select { line-height: 35px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container .container .input-container input[type="text"]~.error, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container .container .input-container input[type="password"]~.error, .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container .container .input-container select~.error { font-size: 11px; line-height: 14px } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step1>.container+.clearfix+.reg-content-small-container+.reg-content-small-container .container label { display: none } .reg-bg .reg-top-wrapper .reg-wrapper .container .reg-content-container form .reg-content-step2 .reg-content-small-container { margin-bottom: 0 } #paypal-quick-reg-page .container .wrapper { padding: 20px } } .trophies-logged .container .wrapper { padding: 20px 40px; gap: 0 } .trophies-logged .container .wrapper .trophy-level-progress { position: relative; width: 100%; max-width: 600px; margin: 0 auto 45px auto } .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar { order: 3; width: 100%; margin: 45px auto 0 auto; text-align: center; text-transform: capitalize; font-size: 18px } .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar:before, .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar:after { content: ""; display: block; position: absolute; left: 0; top: 75px; width: 100%; height: 30px; background: #000; border-radius: 50px; box-shadow: 0 0 0 2px #000 } .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar:after { width: 0; z-index: 3; box-shadow: 0 0 0 2px transparent; transition: 1s linear } .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar.level0:after { width: 5% } .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar.level1:after { width: 20% } .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar.level2:after { width: 45% } .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar.level3:after { width: 60% } .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar.level4:after { width: 80% } .trophies-logged .container .wrapper .trophy-level-progress .trophy-level { font-size: 0; position: absolute; top: 0; z-index: 2 } .trophies-logged .container .wrapper .trophy-level-progress .trophy-level span { font-size: 60px; font-weight: bold } .trophies-logged .container .wrapper .trophy-level-progress .trophy-level.current { left: 0 } .trophies-logged .container .wrapper .trophy-level-progress .trophy-level.next { right: 0 } .trophies-logged .container .wrapper .mega-reel-count { display: flex; justify-content: center; flex-direction: column; align-items: center } .trophies-logged .container .wrapper .mega-reel-count h3 { margin: 0; text-transform: capitalize } .trophies-logged .container .wrapper .mega-reel-count button { padding: 10px 15px; font-weight: bold; font-size: 18px; margin-top: 10px } .trophies-logged .container .wrapper .full-trophy-list, .trophies-logged .container .wrapper .trophy-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px } .trophies-logged .container .wrapper .full-trophy-list#t-new-games, .trophies-logged .container .wrapper .full-trophy-list#t-world-cup, .trophies-logged .container .wrapper .trophy-list#t-new-games, .trophies-logged .container .wrapper .trophy-list#t-world-cup { display: none } .trophies-logged .container .wrapper .full-trophy-list h3, .trophies-logged .container .wrapper .trophy-list h3 { flex: 1 0 100%; margin: 0 auto; text-transform: capitalize; font-size: 28px } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon, .trophies-logged .container .wrapper .trophy-list .trophy-icon { width: 74px; position: relative; cursor: help; transition: .1s all } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon.no-trophies, .trophies-logged .container .wrapper .trophy-list .trophy-icon.no-trophies { width: auto } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon img, .trophies-logged .container .wrapper .trophy-list .trophy-icon img { width: 100%; border-radius: 10px; transition: .1s all; box-shadow: 2px 2px 3px 0 transparent } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon img.all-gone, .trophies-logged .container .wrapper .trophy-list .trophy-icon img.all-gone { position: absolute; top: 0; left: 0; z-index: 2 } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon:nth-child(n+35), .trophies-logged .container .wrapper .trophy-list .trophy-icon:nth-child(n+35) { display: none } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon .trophy-desc, .trophies-logged .container .wrapper .trophy-list .trophy-icon .trophy-desc { display: none; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); position: absolute; top: 84px; left: 0; padding: 15px; border-radius: 10px; z-index: 3; width: 242px; min-height: 158px; box-sizing: border-box } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon .trophy-desc h3, .trophies-logged .container .wrapper .trophy-list .trophy-icon .trophy-desc h3 { color: #fff; font-size: 18px; line-height: 22px; text-transform: initial; margin-bottom: 10px } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon .trophy-desc p, .trophies-logged .container .wrapper .trophy-list .trophy-icon .trophy-desc p { color: #fff; font-size: 14px; margin: 0; line-height: 16px } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon:hover img, .trophies-logged .container .wrapper .trophy-list .trophy-icon:hover img { scale: 1.1; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25) } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon:hover .trophy-desc, .trophies-logged .container .wrapper .trophy-list .trophy-icon:hover .trophy-desc { display: block } .trophies-logged .container .wrapper .full-trophy-list .show-less-trophies, .trophies-logged .container .wrapper .trophy-list .show-less-trophies { display: none } .trophies-logged .container .wrapper .full-trophy-list.show .trophy-icon:nth-child(n+35), .trophies-logged .container .wrapper .trophy-list.show .trophy-icon:nth-child(n+35) { display: block } .trophies-logged .container .wrapper .full-trophy-list.show .show-less-trophies, .trophies-logged .container .wrapper .trophy-list.show .show-less-trophies { display: block } .trophies-logged .container .wrapper .full-trophy-list.show .show-more-trophies, .trophies-logged .container .wrapper .trophy-list.show .show-more-trophies { display: none } .trophies-logged .container .wrapper .full-trophy-list .button, .trophies-logged .container .wrapper .trophy-list .button { flex: 1 0 100%; color: #000; text-decoration: underline; cursor: pointer } .trophies-logged .container .wrapper .trophy-list { max-width: 600px; margin: 20px auto 40px auto; align-items: center } .trophies-logged .container .wrapper .trophy-list .total-trophies { margin-left: auto; display: flex; flex-direction: column; align-items: center } .trophies-logged .container .wrapper .trophy-list .total-trophies p { margin: 0; font-size: 16px; line-height: 16px; font-weight: bold; text-transform: capitalize } .trophies-logged .container .wrapper .trophy-list .total-trophies p.yellow-link { font-size: 58px; line-height: 58px } @keyframes trophies-bar { 0% { width: 0 } 15% { width: 0 } 20% { width: 20% } 35% { width: 20% } 40% { width: 40% } 55% { width: 40% } 60% { width: 60% } 75% { width: 60% } 80% { width: 80% } 95% { width: 80% } 100% { width: 100% } } @keyframes trophies-nolog { 0% { width: 0 } 3% { width: 0 } 4.6% { width: 79px } 5% { width: 74px } 51% { width: 74px } 53% { width: 0 } 100% { width: 0 } } @keyframes trophy-stay { 0% { width: 0 } 3% { width: 0 } 4.6% { width: 79px } 5% { width: 74px } 100% { width: 74px } } .trophies-nolog .wrapper { padding: 20px 40px; gap: 0 } .trophies-nolog .wrapper .trophy-level-progress-nolog { position: relative; width: 100%; max-width: 600px; margin: 0 auto 45px auto; display: flex } .trophies-nolog .wrapper .trophy-level-progress-nolog .trophy-bar { order: 3; width: 100%; margin: 45px auto 0 auto; text-align: center; text-transform: capitalize; font-size: 18px; padding: 0 !important } .trophies-nolog .wrapper .trophy-level-progress-nolog .trophy-bar:before, .trophies-nolog .wrapper .trophy-level-progress-nolog .trophy-bar:after { content: ""; display: block; position: absolute; left: 0; top: 75px; width: 100%; height: 30px; background: #000; border-radius: 50px; box-shadow: 0 0 0 2px #000 } .trophies-nolog .wrapper .trophy-level-progress-nolog .trophy-bar:after { width: 0; z-index: 3; box-shadow: 0 0 0 2px transparent; animation: trophies-bar 2 forwards 10s .3s linear } .trophies-nolog .wrapper .trophy-level-progress-nolog .trophy-level { font-size: 0; position: absolute; top: 0; z-index: 2 } .trophies-nolog .wrapper .trophy-level-progress-nolog .trophy-level span { font-size: 60px; font-weight: bold } .trophies-nolog .wrapper .trophy-level-progress-nolog .trophy-level.current { left: 0 } .trophies-nolog .wrapper .trophy-level-progress-nolog .trophy-level.next { right: 0 } .trophies-nolog .wrapper .latest-trophies-nolog { text-align: center; padding: 20px 0; display: flex; justify-content: center } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list { min-height: 79px } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog { padding: 0; display: inline-flex; vertical-align: top; width: 0; animation: trophies-nolog 20s 1 ease-in-out forwards; gap: 0 10px } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog1 { animation-delay: 1.5s } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog2 { animation-delay: 3.5s } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog3 { animation-delay: 5.5s } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog4 { animation-delay: 7.5s } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog5 { animation-delay: 9.5s } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog6 { animation-name: trophy-stay; animation-delay: 11.5s } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog7 { animation-name: trophy-stay; animation-delay: 13.5s } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog8 { animation-name: trophy-stay; animation-delay: 15.5s } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog9 { animation-name: trophy-stay; animation-delay: 17.5s } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog10 { animation-name: trophy-stay; animation-delay: 19.5s } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog .trophy-desc { display: none } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog img { width: 100%; border-radius: 10px } .trophies-nolog .wrapper .latest-trophies-nolog .total-trophies { width: 74px; display: flex; flex-wrap: wrap; flex-direction: column; align-self: center } .trophies-nolog .wrapper .latest-trophies-nolog .total-trophies p { margin: 0; font-size: 16px; line-height: 16px; font-weight: bold; text-transform: capitalize } .trophies-nolog .wrapper .latest-trophies-nolog .total-trophies p.yellow-link { font-size: 58px; line-height: 58px } .trophies-nolog .wrapper button { position: relative; left: 50%; transform: translateX(-50%); padding: 15px 30px; font-size: 20px; cursor: pointer } @media screen and (max-width: 640px) { @keyframes trophies-nolog { 0% { width: 0 } 3% { width: 0 } 4.6% { width: 57px } 5% { width: 55px } 31% { width: 55px } 33% { width: 0 } 100% { width: 0 } } @keyframes trophy-stay { 0% { width: 0 } 3% { width: 0 } 4.6% { width: 57px } 5% { width: 55px } 100% { width: 55px } } .trophies-nolog .wrapper { padding: 20px } .trophies-nolog .wrapper .latest-trophies-nolog .total-trophies { width: 55px } .trophies-nolog .wrapper .latest-trophies-nolog .total-trophies p { font-size: 14px } .trophies-nolog .wrapper .latest-trophies-nolog .total-trophies p.yellow-link { font-size: 42px; line-height: 42px } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list { min-height: 57px } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog6 { animation-name: trophies-nolog } .trophies-nolog .wrapper .latest-trophies-nolog .trophy-list .trophy-icon-nolog.nolog7 { animation-name: trophies-nolog } .trophies-logged .container .wrapper { padding: 20px } .trophies-logged .container .wrapper .trophy-level-progress { margin: 0 auto 35px auto } .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar:before, .trophies-logged .container .wrapper .trophy-level-progress .trophy-bar:after { height: 20px } .trophies-logged .container .wrapper .trophy-list { margin: 10px auto } .trophies-logged .container .wrapper .full-trophy-list { gap: 5px; margin-bottom: 20px } .trophies-logged .container .wrapper .full-trophy-list h2 { margin: 0 } .trophies-logged .container .wrapper .full-trophy-list h3 { font-size: 20px } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon { width: 60px } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon .trophy-desc { top: 65px; width: 190px; height: 125px; padding: 15px } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon .trophy-desc h3 { font-size: 16px } .trophies-logged .container .wrapper .full-trophy-list .trophy-icon .trophy-desc p { font-size: 12px } } #winter-giveaway { display: none; background: #000; width: 250px; height: auto; left: 10px; position: absolute; top: 150px; border-radius: 30px; overflow: hidden; z-index: 99; transition: left .2s ease-in-out } #winter-giveaway.hide { left: -250px } #winter-giveaway #close-button { position: absolute; top: 0; right: 0; cursor: pointer; height: 40px; width: 40px } #winter-giveaway #close-button:before { content: ""; width: 25px; height: 5px; display: block; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 10px; transform: translate(-50%, -50%) rotate(45deg) } #winter-giveaway #close-button:after { content: ""; width: 25px; height: 5px; display: block; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 10px; transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(-45deg) } #winter-giveaway img { display: block; width: 100% } #winter-giveaway p { box-sizing: border-box; padding: 15px; font-size: 9px; color: #fff; margin: 0; text-align: center } #winter-giveaway p a { box-sizing: border-box; padding: 15px; font-size: 9px; color: #fff; margin: 0; text-align: center; text-decoration: underline } #winter-giveaway-toggle { background: #000; border-radius: 0 20px 20px 0; width: 60px; height: 60px; position: absolute; left: 0; top: 150px; display: flex; cursor: pointer; justify-content: center; align-items: center; z-index: 99; display: none; transition: left .2s ease-in-out } #winter-giveaway-toggle.hide { left: -60px } #winter-giveaway-toggle svg { width: 35px; pointer-events: none; animation: winterWiggle 1.5s ease infinite; position: relative } @keyframes winterWiggle { 0% { transform: rotate(0deg); top: 0 } 40% { transform: rotate(0deg); top: 0 } 50% { transform: rotate(-5deg); top: -3px } 60% { transform: rotate(5deg); top: -3px } 70% { transform: rotate(-5deg); top: -3px } 80% { transform: rotate(5deg); top: -3px } 90% { transform: rotate(-5deg); top: -3px } 100% { transform: rotate(0deg); top: 0 } } .blog .container { backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px) } .blog .container>.wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px } .blog .container>.wrapper h1 { flex: 0 0 100% } .blog .container>.wrapper .preview-blog-box { flex: 0 0 300px; display: flex; flex-direction: column; background: #eee; border-radius: 20px; overflow: hidden } .blog .container>.wrapper .preview-blog-box .preview-blog-image { width: 100%; height: 180px; overflow: hidden } .blog .container>.wrapper .preview-blog-box .preview-blog-image img { width: 100%; height: 100%; object-fit: cover } .blog .container>.wrapper .preview-blog-box .preview-blog-info { padding: 10px 20px 20px 20px; flex: auto; display: flex } .blog .container>.wrapper .preview-blog-box .preview-blog-info.blog-no-image { padding-top: 190px; background-position: top center; background-size: auto 180px; background-repeat: no-repeat } .blog .container>.wrapper .preview-blog-box .preview-blog-info .wrapper { display: flex; flex-direction: column; padding: 0 } .blog .container>.wrapper .preview-blog-box .preview-blog-info .wrapper .preview-blog-title { margin: 0; font-size: 20px; color: #000; font-weight: bold } .blog .container>.wrapper .preview-blog-box .preview-blog-info .wrapper .preview-blog-title a { color: #000 } .blog .container>.wrapper .preview-blog-box .preview-blog-info .wrapper .preview-blog-timestamp { font-size: 10px; margin: 10px 0 } .blog .container>.wrapper .preview-blog-box .preview-blog-info .wrapper .preview-blog-text { margin: 0 0 10px 0; font-size: 14px } .blog .container>.wrapper .preview-blog-box .preview-blog-info .wrapper>a { display: block; padding: 10px 20px; cursor: pointer; font-size: 16px; text-align: center; text-transform: capitalize; margin-top: auto } .blog .container>.wrapper .blog-page-select { flex: 0 0 calc(100% - 20px); margin: 0 0 20px 0; display: flex; justify-content: center; gap: 5px; flex-wrap: wrap } .blog .container>.wrapper .blog-page-select a { border-width: 1px; border-style: solid; border-radius: 5px; padding: 10px; line-height: 14px; font-size: 14px; text-transform: capitalize; text-align: center; min-width: 14px; border-color: #000; color: #000 } .blog.blog-read-more-page .container { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none } .blog.blog-read-more-page .container .wrapper { gap: 0; position: relative } .blog.blog-read-more-page .container .wrapper .blog-button { position: absolute; top: 15px; left: 15px; width: 50px; height: 50px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.49 17.83'%3E%3Cpath d='M30.88 14.26 17.22.61C16.71.1 16-.09 15.34.04c-.4.08-.78.27-1.09.57L.61 14.26c-.82.82-.82 2.14 0 2.95s2.14.82 2.95 0L15.74 5.03l12.18 12.18c.82.82 2.14.82 2.95 0 .82-.82.82-2.14 0-2.95Z' style='fill:%23fff'/%3E%3C/svg%3E") rgba(0, 0, 0, 0.5) no-repeat center 15px; background-size: 30px, auto; border-radius: 50%; backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); font-size: 0; cursor: pointer; z-index: 5; transform: rotate(-90deg) } .blog.blog-read-more-page .container .wrapper .blog-post-banner { width: 100% } .blog.blog-read-more-page .container .wrapper .blog-post-banner img { width: 100% } .blog.blog-read-more-page .container .wrapper h1.red { color: #000; margin: 0; padding: 15px 80px; box-sizing: border-box; border-bottom: 2px solid #eee } .blog.blog-read-more-page .container .wrapper .blog-post-timestamp { margin: 10px 0 0 0; font-size: 14px } .blog.blog-read-more-page .container .wrapper .blog-post-content { padding: 20px; width: 100%; box-sizing: border-box } .blog.blog-read-more-page .container .wrapper .blog-post-content * { color: #000 } .blog.blog-read-more-page .container .wrapper .blog-post-content img { max-width: 100% } .blog.blog-read-more-page .container .wrapper .blog-post-content a { text-decoration: underline } @media screen and (max-width: 840px) { .blog.blog-read-more-page .container .wrapper h1.red { padding: 15px 65px } .blog.blog-read-more-page .container .wrapper .blog-button { width: 40px; height: 40px; background-size: 20px, auto; background-position: center 13px } } .has-account-lp .nav-buttons .log-in { display: flex } .has-account-lp .nav-buttons .log-in:before { content: ""; width: 250px; height: 80px; display: block; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background-size: contain; background-position: center; background-repeat: no-repeat } .has-account-lp .nav-buttons .log-in .login-wrapper .close { display: none } .has-account-lp .nav-buttons .log-in .login-wrapper .login-title { display: none } .has-account-lp .nav-buttons .log-in .login-wrapper form { padding: 30px 30px 60px 30px } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) .login_first-name { order: 1; font-weight: bold; position: relative; padding: 0 20px; line-height: initial } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) .login_first-name:before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 5px; background: #000 } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) #remember-me { order: 2; margin: 0; position: relative; padding: 0 20px } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) #remember-me:before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 5px; background: #000 } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) .form-label { order: 3; margin: 35px 0 5px 0 } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(1) input[type="password"] { order: 4 } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(2) { order: 5 } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(2) button[type="submit"] { text-align: left; padding: 10px 20px; margin-top: 40px; position: relative } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(2) button[type="submit"]:before { content: "continue" } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(2) button[type="submit"]:after { content: ""; display: block; right: 15px; top: 12px; width: 18px; height: 30px; transform: rotate(180deg); position: absolute } .has-account-lp .nav-buttons .log-in .login-wrapper form .container:nth-of-type(3) { display: none } .has-account-lp .nav-buttons .log-in .login-wrapper form .container .forgot-password-link { margin: 0; position: absolute; bottom: 30px } @media screen and (max-width: 640px) { .has-account-lp .nav-buttons .log-in:before { width: 200px; height: 60px; bottom: 15px } } html.landing-page .site-background header .header>.container { justify-content: center } html.landing-page .homepage .welcome-text .wrapper * { font-size: 18px; text-align: center } html.landing-page .homepage .welcome-text .wrapper a { text-decoration: underline } .closed-landing-page .site-background { align-items: center } .closed-landing-page .site-background .logo { max-width: 200px } .closed-landing-page .site-background .closure-content { max-width: 1000px; background: #fff; border-radius: 20px; overflow: hidden } .closed-landing-page .site-background .closure-content .offer { background: linear-gradient(to bottom, #fff 0%, #dbdbdb 100%); display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; line-height: 1.1; text-align: center; position: relative; z-index: 1; cursor: pointer; padding: 60px } .closed-landing-page .site-background .closure-content .offer span p { margin: 0 } .closed-landing-page .site-background .closure-content .message { padding: 60px; z-index: 1; position: relative } .closed-landing-page .site-background .closure-content .message p { font-size: 16px } .closed-landing-page .site-background .closure-content .message .content-button-primary { top: -32px; width: max-content; min-width: 250px; font-size: 30px; font-weight: bold; text-align: center; left: 50%; transform: translateX(-50%); position: absolute } .closed-landing-page .site-background .closure-content .message .smallprint { font-size: 10px } @media screen and (max-width: 1040px) { .closed-landing-page .site-background .closure-content { margin: 0 20px } } @media screen and (max-width: 640px) { html.landing-page .main.homepage .main-promo, html.landing-page main.homepage .main-promo { height: auto } .closed-landing-page .site-background .closure-content .offer span p { font-size: .7em } .closed-landing-page .site-background .closure-content .message p { font-size: 14px } .closed-landing-page .site-background .closure-content .message .content-button-primary { font-size: 25px; top: -28px } } @media screen and (max-width: 500px) { .closed-landing-page .site-background .closure-content .offer { padding: 40px 20px } .closed-landing-page .site-background .closure-content .offer span p { font-size: .5em } .closed-landing-page .site-background .closure-content .message { padding: 40px 20px } } @keyframes promotionGlow { 0% { filter: drop-shadow(0 0 1px #fff) } 50% { filter: drop-shadow(0 0 6px #fff) } 100% { filter: drop-shadow(0 0 1px #fff) } } #promotion-builder { display: none; flex-direction: column; width: 100%; max-width: 1000px; margin: 10px auto } #promotion-builder.active { display: flex } #promotion-builder.open .p-notification { display: none } #promotion-builder.open .p-banner { display: flex } #promotion-builder .p-notification { background: #fff; width: 100%; margin: 0 auto; padding: 15px; border-radius: 15px; align-items: center; display: flex; box-sizing: border-box; gap: 0 15px; position: relative; animation: promotionGlow 2s infinite linear } #promotion-builder .p-notification svg { width: 40px } #promotion-builder .p-notification h3 { padding: 0; margin: 0 } #promotion-builder .p-notification h3::first-letter { text-transform: uppercase } #promotion-builder .p-notification button { margin-left: auto; text-transform: capitalize; padding: 10px 30px; font-size: 18px } #promotion-builder .p-banner { display: none; flex-direction: column; border-radius: 15px; overflow: hidden; position: relative } #promotion-builder .p-banner #p-close { height: 35px; width: 35px; top: 10px; right: 10px; position: absolute; z-index: 2; cursor: pointer; background: rgba(0, 0, 0, 0.5); border-radius: 50% } #promotion-builder .p-banner #p-close::before, #promotion-builder .p-banner #p-close::after { content: ""; width: 25px; display: block; position: absolute; left: 50%; top: 50%; height: 3px; border-radius: 10px; background: #fff; transform-origin: left top; transform: translate(-50%, -50%); rotate: 45deg } #promotion-builder .p-banner #p-close::after { rotate: -45deg } #promotion-builder .p-banner img { width: 100%; display: block } #promotion-builder .p-banner .p-mobile { display: none } #promotion-builder .p-banner .p-terms { display: flex; background: #fff; padding: 10px; color: #000; font-size: 10px; line-height: 12px } @media screen and (max-width: 640px) { #promotion-builder { position: fixed; bottom: 55px; width: calc(100% - 30px); transition: all .2s linear; z-index: 101 } #promotion-builder.active { opacity: 0; pointer-events: none } #promotion-builder.active.show { opacity: 1; pointer-events: all } #promotion-builder.open { opacity: 1; pointer-events: all } #promotion-builder.accepted-cookies { bottom: 0 } #promotion-builder .p-notification { font-size: 12px; gap: 0 10px; padding: 10px } #promotion-builder .p-notification svg { width: 25px } #promotion-builder .p-notification h3 { font-size: 14px; line-height: 16px } #promotion-builder .p-notification button { padding: 8px 15px; font-size: 12px } #promotion-builder .p-banner .p-desktop { display: none } #promotion-builder .p-banner .p-mobile { display: block } footer.promo-banner-footer { padding-bottom: 130px } footer.promo-banner-footer.accepted-cookies { padding-bottom: 75px } } .affiliates header .header>.container nav ul a[href="/affiliates/register"], .affiliates header .header>.container nav ul a[href="/affiliates/?signout=1"] { display: none } .affiliates .button { display: block; padding: 10px 20px; cursor: pointer; font-size: 20px; text-align: center; text-transform: capitalize; width: 100%; box-sizing: border-box; max-width: 400px; margin-top: 20px } .affiliates .container>.wrapper>h2:first-of-type { color: #000; text-transform: capitalize; font-size: 34px; text-align: center; background: none; border-radius: 0 } .affiliates .detail-column1 { position: relative } .affiliates .detail-column1 p { margin: 15px 0 5px 0; font-size: 16px } .affiliates .detail-column2 { position: relative } .affiliates .detail-column2 input, .affiliates .detail-column2 select, .affiliates .detail-column2 textarea { line-height: 40px; padding: 0 10px; position: relative; margin: 0; border-radius: 10px; outline: none; border: 2px solid #ccc; box-sizing: border-box; width: 100%; font-size: 14px; max-width: 400px; background-color: #fff; height: 44px } .affiliates .detail-column2 input { -webkit-appearance: none } .affiliates .detail-column2 textarea { height: 88px; resize: vertical; min-height: 88px; max-height: 250px } .affiliates .detail-column2 .error { display: none; margin: 10px 0; position: relative; border-radius: 10px; font-size: 14px; color: #e74c3c; align-items: center } .affiliates .detail-column2 .error::before { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.83 20.1'%3E%3Cpath d='M14.87.87a2.88 2.88 0 0 1 4.11-.01c1.14 1.14 1.14 3 .01 4.15l-4.97 5.04 4.97 5.05c1.12 1.14 1.11 2.99-.03 4.13s-2.98 1.14-4.1 0l-4.94-5.01-4.95 5.02a2.87 2.87 0 0 1-4.11 0c-1.14-1.14-1.14-3-.01-4.15l4.97-5.04L.84 5C-.28 3.86-.27 2.01.87.87 2.01-.27 3.85-.27 4.97.88l4.94 5.01L14.87.87Z' style='fill:%23fff;fill-rule:evenodd'/%3E%3C/svg%3E") #e74c3c center no-repeat; background-size: 10px, auto; border-radius: 50%; width: 20px; height: 20px; position: relative; display: inline-block; vertical-align: middle; margin-right: 5px } .affiliates .aff_login form>.wrapper { display: flex; flex-direction: row; gap: 20px; padding: 0 } .affiliates .aff_login form>.wrapper .two-column { flex: 1; background: #eee; border-radius: 20px; padding: 20px } .affiliates .aff_login form>.wrapper .two-column>.wrapper { padding: 0; height: 100%; display: flex; flex-direction: column } .affiliates .aff_login form>.wrapper .two-column>.wrapper h2 { margin: 0 } .affiliates .aff_login form>.wrapper .two-column>.wrapper a[href="/affiliates/register"] { margin-top: auto } .affiliates .aff_login form>.wrapper .two-column:nth-of-type(2) p { overflow-wrap: anywhere } .affiliates .aff_login form>.wrapper .clearfix { display: none } .affiliates #joinform .container { flex: 1; background: #eee; border-radius: 20px; padding: 20px } .affiliates .account-details>.container>.wrapper>h2 { font-size: 24px; text-align: left } .affiliates .account-details>.container>.wrapper form[action="/affiliates/passwordForgot"] { flex: 1; background: #eee; border-radius: 20px; padding: 20px } table.aff_reports { margin-top: 20px } table.aff_reports th { writing-mode: vertical-lr; transform: scale(-1); padding: 10px 5px; height: initial; width: initial; min-width: initial } table.aff_reports th span { transform: none; position: initial; left: initial; top: initial; display: initial; width: initial; text-align: initial } table.aff_reports tr td:first-of-type { text-transform: capitalize } @media screen and (max-width: 840px) { .affiliates header .header>.container nav ul a[href="/affiliates/register"], .affiliates header .header>.container nav ul a[href="/affiliates/?signout=1"] { display: block } .affiliates header .header>.container nav ul .nav-buttons a[href="/affiliates/register"] { display: none } } @media screen and (max-width: 640px) { .affiliates .container>.wrapper>h2:first-of-type { font-size: 25px } .affiliates .aff_login form>.wrapper { flex-direction: column } } .main.test-suite>.container { background: none; border-radius: 0; max-width: initial; margin: 0 } .main.test-suite>.container>.wrapper { padding: 0 } .main.test-suite>.container>.wrapper h1 { backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); background: rgba(0, 0, 0, 0.4); width: max-content; max-width: 1000px; color: #fff; margin: 50px auto 20px auto; padding: 10px 30px; border-radius: 15px; font-size: 24px } .main.test-suite>.container>.wrapper .popup { overflow: hidden } @media screen and (max-width: 640px) { .main.test-suite>.container>.wrapper h1 { max-width: calc(100% - 70px) } } nav a[href="/xmas"] { display: block !important } @keyframes glow { 0% { box-shadow: 0 0 20px 3px #fff } 50% { box-shadow: 0 0 20px 10px #fff } 100% { box-shadow: 0 0 20px 3px #fff } } @keyframes glowFilter { 0% { filter: drop-shadow(0 0 5px #fff) } 50% { filter: drop-shadow(0 0 20px #fff) } 100% { filter: drop-shadow(0 0 5px #fff) } } @font-face { font-family: "Bubblegum"; src: url(/assets/fonts/bubblegum.ttf); font-weight: normal } html.xmas { scroll-behavior: smooth } html.xmas main { margin: 0 } #santas-journey { background: linear-gradient(to bottom, #002fab 0%, #002fab 50%, #d6efff 50%, #d6efff 100%); margin: 0 } #santas-journey .sj-background { background: url(/assets/images/xmas/background.jpg); background-size: auto 100%; background-repeat-x: repeat; background-position: center; position: relative; margin: 0 } #santas-journey.open .sj-container .houses, #santas-journey.open .sj-container .path, #santas-journey.open .sj-container .boule-boule-container { opacity: 0; transition: opacity .3s linear } #santas-journey.open .sj-container .prize { top: 100px; transition: top .3s linear .5s } #santas-journey.open .sj-container .prize .gift img { animation: glowFilter 2s .8s ease-in-out infinite } #santas-journey.open .sj-container .prize .close { opacity: 1; transition: opacity .3s linear .9s } #santas-journey.open .sj-container .prize p { opacity: 1; transition: opacity .3s linear .9s } #santas-journey.open .progress, #santas-journey.open .sj-logo, #santas-journey.open .sj-terms { opacity: 0; transition: opacity .3s linear } #santas-journey.hide .sj-container .houses, #santas-journey.hide .sj-container .path, #santas-journey.hide .sj-container .boule-boule-container { opacity: 1; transition: opacity .3s linear .5s } #santas-journey.hide .sj-container .prize { opacity: 0; transition: opacity .3s linear } #santas-journey.hide .progress, #santas-journey.hide .sj-logo, #santas-journey.hide .sj-terms { opacity: 1; transition: opacity .3s linear .5s } #santas-journey .sj-logo { width: 25vw; display: block; position: absolute; top: 90px; left: 50%; transform: translateX(-50%) } #santas-journey .progress { top: 90px; left: 20px; z-index: 7; position: sticky; background: #fff; width: auto; height: 60px; display: inline-flex; padding: 0 15px; border-radius: 30px; gap: 0 10px; align-items: center } #santas-journey .progress div { height: 50px; width: 50px; position: relative; background-image: url(/assets/images/xmas/future.svg); background-repeat: no-repeat; background-position: center; background-size: 100% 100% } #santas-journey .progress div::after { content: ""; position: absolute; top: 16%; left: 50%; transform: translateX(-50%); width: 70%; height: 50%; display: block; background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, transparent 75%); border-radius: 50% } #santas-journey .progress p { margin: 0; font-family: "Bubblegum", Poppins, serif; color: #353535; font-size: 40px; padding-top: 3px } #santas-journey .sj-terms { background: #d6efff; padding: 20px 0 } #santas-journey .sj-terms .terms-container { max-width: 1000px; width: auto; border-radius: 15px; padding: 20px; box-sizing: border-box; margin: 0 20px; background: rgba(255, 255, 255, 0.33); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.8px); -webkit-backdrop-filter: blur(8.8px); border: 1px solid rgba(255, 255, 255, 0.36); position: relative; z-index: 10 } #santas-journey .sj-terms .terms-container p { margin: 0; font-size: 10px; line-height: 12px; color: #353535 } #santas-journey .sj-terms .terms-container p a { color: #353535; text-decoration: underline } #santas-journey .sj-container { max-width: 1000px; width: 100%; position: relative; background: none; margin: 0 auto } #santas-journey .sj-container .prize { position: absolute; left: 50%; transform: translateX(-50%); z-index: 8; width: 90%; display: flex; flex-direction: column; gap: 20px 0; top: -100% } #santas-journey .sj-container .prize::after { content: ""; display: block; position: absolute; top: calc(-100% + 15px); left: 50%; transform: translateX(-50%); width: 15px; height: 100%; background-image: url(/assets/images/xmas/string.svg); background-repeat: repeat-y; background-position: bottom; background-size: 100% auto; border-radius: 3px } #santas-journey .sj-container .prize .close { height: 35px; width: 35px; top: 10px; right: 10px; position: absolute; z-index: 999; cursor: pointer; opacity: 0; background: #fff; border-radius: 50% } #santas-journey .sj-container .prize .close span { width: 25px; display: block; position: absolute; left: 50%; top: 50%; height: 3px; border-radius: 10px; background: #353535 } #santas-journey .sj-container .prize .close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) } #santas-journey .sj-container .prize .close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) } #santas-journey .sj-container .prize .gift { position: relative; display: block } #santas-journey .sj-container .prize .gift img { display: block; width: 100%; position: relative; filter: drop-shadow(0px 0px 5px #fff) } #santas-journey .sj-container .prize .gift img.prize-image { width: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 5% } #santas-journey .sj-container .prize p { opacity: 0; margin: 0; font-size: 10px; line-height: 12px; text-align: center } #santas-journey .sj-container .houses { display: block; width: 100%; margin: 0 auto; position: relative; z-index: 2 } #santas-journey .sj-container .path { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; z-index: 1 } #santas-journey .sj-container .boule-boule-container { position: absolute; z-index: 3; width: 14%; padding-top: 14%; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; margin-top: -100%; margin-left: -100%; transition: transform .1s linear } #santas-journey .sj-container .boule-boule-container .boule-boule { width: 100%; height: 100%; position: absolute; display: block; top: 0; left: 0 } #santas-journey .sj-container .boule-boule-container .boule-boule::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/assets/images/xmas/future.svg); background-repeat: no-repeat; background-position: center; background-size: 100% 100% } #santas-journey .sj-container .boule-boule-container .boule-boule::after { content: ""; position: absolute; top: 16%; left: 50%; transform: translateX(-50%); width: 70%; height: 50%; display: block; background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, transparent 75%); border-radius: 50% } #santas-journey .sj-container .boule-boule-container .boule-boule p { color: #fff; font-weight: bold; padding: 0; margin: 0; position: absolute; display: flex; top: 0; left: 0; height: 100%; width: 100%; flex-direction: column; align-items: center; justify-content: center; font-size: 3.5vw; line-height: 3.5vw; z-index: 4; font-family: "Bubblegum", Poppins, serif } #santas-journey .sj-container .boule-boule-container .boule-boule p span { font-size: 4.5vw; line-height: 4.5vw; font-family: "Bubblegum", Poppins, serif } #santas-journey .sj-container .boule-boule-container.past { cursor: default } #santas-journey .sj-container .boule-boule-container.past .boule-boule::before { background-image: url(/assets/images/xmas/past.svg) } #santas-journey .sj-container .boule-boule-container.past .boule-boule p { color: #353535 } #santas-journey .sj-container .boule-boule-container.present { cursor: pointer } #santas-journey .sj-container .boule-boule-container.present .boule-boule::before { background-image: url(/assets/images/xmas/present.svg) } #santas-journey .sj-container .boule-boule-container.present::before { content: ""; display: block; width: 100%; height: 100%; box-shadow: 0 0 20px 3px #fff; border-radius: 50%; position: absolute; top: 0; left: 0; animation: glow 2s ease-in-out infinite } #santas-journey .sj-container .boule-boule-container.present:hover { transform: translate(-50%, -50%) scale(1.2) !important } #santas-journey .sj-container .boule-boule-container.future { cursor: not-allowed } #santas-journey .sj-container .boule-boule-container[data-day="2"] { margin-top: -29%; margin-left: -12% } #santas-journey .sj-container .boule-boule-container[data-day="2"] .boule-boule::before { rotate: 340deg } #santas-journey .sj-container .boule-boule-container[data-day="6"] { margin-top: -25%; margin-left: 23% } #santas-journey .sj-container .boule-boule-container[data-day="6"] .boule-boule::before { rotate: 20deg } #santas-journey .sj-container .boule-boule-container[data-day="9"] { margin-top: -2%; margin-left: 13% } #santas-journey .sj-container .boule-boule-container[data-day="13"] { margin-top: -14%; margin-left: -16% } #santas-journey .sj-container .boule-boule-container[data-day="13"] .boule-boule::before { rotate: 270deg } #santas-journey .sj-container .boule-boule-container[data-day="16"] { margin-top: 15%; margin-left: -25% } #santas-journey .sj-container .boule-boule-container[data-day="20"] { margin-top: 24%; margin-left: -11% } #santas-journey .sj-container .boule-boule-container[data-day="20"] .boule-boule::before { rotate: 310deg } #santas-journey .sj-container .boule-boule-container[data-day="23"] { margin-top: 23%; margin-left: 21% } #santas-journey .sj-container .boule-boule-container[data-day="23"] .boule-boule::before { rotate: 180deg } #santas-journey .sj-container .boule-boule-container[data-day="24"] { margin-top: 44%; margin-left: 10% } #santas-journey .sj-container .boule-boule-container[data-day="24"] .boule-boule::before { rotate: 20deg } #santas-journey .sj-container .boule-boule-container[data-day="25"] { margin-top: 43%; margin-left: -26% } #santas-journey .sj-container .boule-boule-container[data-day="25"] .boule-boule::before { rotate: 245deg } #santas-journey .sj-container .boule-boule-container[data-day="26"] { margin-top: 63%; margin-left: -10% } #santas-journey .sj-container .boule-boule-container[data-day="26"] .boule-boule::before { rotate: 90deg } #santas-journey #snow { position: absolute; z-index: 5; pointer-events: none; height: 100%; overflow: hidden; width: 100% } #santas-journey #snow .snowflake { --size: 1vw; width: var(--size); height: var(--size); background: #e7f8ff; border-radius: 50%; position: absolute; top: -5vh } #santas-journey #snow .snowflake:nth-child(1) { --size: .2vw; --left-ini: 0vw; --left-end: 9vw; left: 35vw; animation: snowfall 10s linear infinite; animation-delay: -3s } #santas-journey #snow .snowflake:nth-child(1):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(2) { --size: .4vw; --left-ini: -1vw; --left-end: -2vw; left: 86vw; animation: snowfall 13s linear infinite; animation-delay: -9s } #santas-journey #snow .snowflake:nth-child(2):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(3) { --size: .4vw; --left-ini: -9vw; --left-end: -3vw; left: 80vw; animation: snowfall 6s linear infinite; animation-delay: -6s } #santas-journey #snow .snowflake:nth-child(3):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(4) { --size: .6vw; --left-ini: -2vw; --left-end: -3vw; left: 73vw; animation: snowfall 13s linear infinite; animation-delay: -7s } #santas-journey #snow .snowflake:nth-child(4):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(5) { --size: .6vw; --left-ini: 2vw; --left-end: -4vw; left: 77vw; animation: snowfall 10s linear infinite; animation-delay: -8s } #santas-journey #snow .snowflake:nth-child(5):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(6) { --size: 1vw; --left-ini: -3vw; --left-end: 7vw; left: 3vw; animation: snowfall 7s linear infinite; animation-delay: -7s } #santas-journey #snow .snowflake:nth-child(6):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(7) { --size: .2vw; --left-ini: 8vw; --left-end: -4vw; left: 74vw; animation: snowfall 10s linear infinite; animation-delay: -6s } #santas-journey #snow .snowflake:nth-child(7):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(8) { --size: 1vw; --left-ini: -9vw; --left-end: -4vw; left: 8vw; animation: snowfall 10s linear infinite; animation-delay: -4s } #santas-journey #snow .snowflake:nth-child(8):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(9) { --size: 1vw; --left-ini: 8vw; --left-end: 0vw; left: 12vw; animation: snowfall 9s linear infinite; animation-delay: -9s } #santas-journey #snow .snowflake:nth-child(9):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(10) { --size: .8vw; --left-ini: -8vw; --left-end: -4vw; left: 83vw; animation: snowfall 12s linear infinite; animation-delay: -4s } #santas-journey #snow .snowflake:nth-child(10):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(11) { --size: 1vw; --left-ini: -4vw; --left-end: -7vw; left: 20vw; animation: snowfall 7s linear infinite; animation-delay: -3s } #santas-journey #snow .snowflake:nth-child(11):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(12) { --size: .6vw; --left-ini: -9vw; --left-end: 0vw; left: 87vw; animation: snowfall 6s linear infinite; animation-delay: -5s } #santas-journey #snow .snowflake:nth-child(12):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(13) { --size: 1vw; --left-ini: -5vw; --left-end: -1vw; left: 90vw; animation: snowfall 11s linear infinite; animation-delay: -8s } #santas-journey #snow .snowflake:nth-child(13):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(14) { --size: 1vw; --left-ini: 6vw; --left-end: 3vw; left: 69vw; animation: snowfall 9s linear infinite; animation-delay: -8s } #santas-journey #snow .snowflake:nth-child(14):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(15) { --size: .6vw; --left-ini: -1vw; --left-end: -2vw; left: 55vw; animation: snowfall 6s linear infinite; animation-delay: -10s } #santas-journey #snow .snowflake:nth-child(15):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(16) { --size: .2vw; --left-ini: 7vw; --left-end: 3vw; left: 76vw; animation: snowfall 12s linear infinite; animation-delay: -5s } #santas-journey #snow .snowflake:nth-child(16):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(17) { --size: .2vw; --left-ini: 2vw; --left-end: 3vw; left: 9vw; animation: snowfall 13s linear infinite; animation-delay: -4s } #santas-journey #snow .snowflake:nth-child(17):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(18) { --size: .2vw; --left-ini: 6vw; --left-end: -7vw; left: 3vw; animation: snowfall 10s linear infinite; animation-delay: -7s } #santas-journey #snow .snowflake:nth-child(18):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(19) { --size: .2vw; --left-ini: -8vw; --left-end: 2vw; left: 87vw; animation: snowfall 14s linear infinite; animation-delay: -8s } #santas-journey #snow .snowflake:nth-child(19):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(20) { --size: .4vw; --left-ini: -3vw; --left-end: 10vw; left: 29vw; animation: snowfall 9s linear infinite; animation-delay: -7s } #santas-journey #snow .snowflake:nth-child(20):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(21) { --size: .4vw; --left-ini: 7vw; --left-end: -3vw; left: 60vw; animation: snowfall 8s linear infinite; animation-delay: -2s } #santas-journey #snow .snowflake:nth-child(21):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(22) { --size: .6vw; --left-ini: 4vw; --left-end: -1vw; left: 52vw; animation: snowfall 14s linear infinite; animation-delay: -4s } #santas-journey #snow .snowflake:nth-child(22):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(23) { --size: .4vw; --left-ini: -5vw; --left-end: -5vw; left: 46vw; animation: snowfall 12s linear infinite; animation-delay: -8s } #santas-journey #snow .snowflake:nth-child(23):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(24) { --size: .4vw; --left-ini: 5vw; --left-end: 0vw; left: 21vw; animation: snowfall 6s linear infinite; animation-delay: -8s } #santas-journey #snow .snowflake:nth-child(24):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(25) { --size: 1vw; --left-ini: 9vw; --left-end: -1vw; left: 17vw; animation: snowfall 11s linear infinite; animation-delay: -5s } #santas-journey #snow .snowflake:nth-child(25):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(26) { --size: 1vw; --left-ini: -3vw; --left-end: 6vw; left: 76vw; animation: snowfall 13s linear infinite; animation-delay: -2s } #santas-journey #snow .snowflake:nth-child(26):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(27) { --size: .2vw; --left-ini: -4vw; --left-end: 0vw; left: 9vw; animation: snowfall 6s linear infinite; animation-delay: -9s } #santas-journey #snow .snowflake:nth-child(27):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(28) { --size: 1vw; --left-ini: 5vw; --left-end: -1vw; left: 71vw; animation: snowfall 14s linear infinite; animation-delay: -3s } #santas-journey #snow .snowflake:nth-child(28):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(29) { --size: .4vw; --left-ini: 6vw; --left-end: -9vw; left: 45vw; animation: snowfall 14s linear infinite; animation-delay: -2s } #santas-journey #snow .snowflake:nth-child(29):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(30) { --size: .6vw; --left-ini: 8vw; --left-end: 8vw; left: 73vw; animation: snowfall 9s linear infinite; animation-delay: -9s } #santas-journey #snow .snowflake:nth-child(30):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(31) { --size: .8vw; --left-ini: -2vw; --left-end: 7vw; left: 18vw; animation: snowfall 8s linear infinite; animation-delay: -8s } #santas-journey #snow .snowflake:nth-child(31):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(32) { --size: .2vw; --left-ini: 9vw; --left-end: -5vw; left: 74vw; animation: snowfall 15s linear infinite; animation-delay: -8s } #santas-journey #snow .snowflake:nth-child(32):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(33) { --size: .6vw; --left-ini: 2vw; --left-end: 9vw; left: 29vw; animation: snowfall 14s linear infinite; animation-delay: -7s } #santas-journey #snow .snowflake:nth-child(33):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(34) { --size: .8vw; --left-ini: 1vw; --left-end: 0vw; left: 9vw; animation: snowfall 12s linear infinite; animation-delay: -3s } #santas-journey #snow .snowflake:nth-child(34):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(35) { --size: .6vw; --left-ini: 1vw; --left-end: -7vw; left: 94vw; animation: snowfall 12s linear infinite; animation-delay: -2s } #santas-journey #snow .snowflake:nth-child(35):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(36) { --size: .2vw; --left-ini: 3vw; --left-end: 1vw; left: 38vw; animation: snowfall 9s linear infinite; animation-delay: -8s } #santas-journey #snow .snowflake:nth-child(36):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(37) { --size: .8vw; --left-ini: -5vw; --left-end: 8vw; left: 69vw; animation: snowfall 13s linear infinite; animation-delay: -3s } #santas-journey #snow .snowflake:nth-child(37):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(38) { --size: .2vw; --left-ini: -8vw; --left-end: 4vw; left: 37vw; animation: snowfall 8s linear infinite; animation-delay: -1s } #santas-journey #snow .snowflake:nth-child(38):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(39) { --size: .6vw; --left-ini: 5vw; --left-end: -8vw; left: 81vw; animation: snowfall 9s linear infinite; animation-delay: -7s } #santas-journey #snow .snowflake:nth-child(39):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(40) { --size: .6vw; --left-ini: -3vw; --left-end: 6vw; left: 45vw; animation: snowfall 14s linear infinite; animation-delay: -7s } #santas-journey #snow .snowflake:nth-child(40):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(41) { --size: 1vw; --left-ini: -8vw; --left-end: -3vw; left: 77vw; animation: snowfall 14s linear infinite; animation-delay: -7s } #santas-journey #snow .snowflake:nth-child(41):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(42) { --size: .2vw; --left-ini: 0vw; --left-end: -3vw; left: 74vw; animation: snowfall 7s linear infinite; animation-delay: -4s } #santas-journey #snow .snowflake:nth-child(42):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(43) { --size: 1vw; --left-ini: 4vw; --left-end: -3vw; left: 20vw; animation: snowfall 8s linear infinite; animation-delay: -6s } #santas-journey #snow .snowflake:nth-child(43):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(44) { --size: .8vw; --left-ini: 7vw; --left-end: -2vw; left: 14vw; animation: snowfall 14s linear infinite; animation-delay: -7s } #santas-journey #snow .snowflake:nth-child(44):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(45) { --size: .2vw; --left-ini: 9vw; --left-end: -4vw; left: 11vw; animation: snowfall 13s linear infinite; animation-delay: -4s } #santas-journey #snow .snowflake:nth-child(45):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(46) { --size: .6vw; --left-ini: 9vw; --left-end: -6vw; left: 71vw; animation: snowfall 13s linear infinite; animation-delay: -2s } #santas-journey #snow .snowflake:nth-child(46):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(47) { --size: .2vw; --left-ini: 4vw; --left-end: 2vw; left: 12vw; animation: snowfall 10s linear infinite; animation-delay: -3s } #santas-journey #snow .snowflake:nth-child(47):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(48) { --size: .6vw; --left-ini: 2vw; --left-end: -2vw; left: 20vw; animation: snowfall 14s linear infinite; animation-delay: -4s } #santas-journey #snow .snowflake:nth-child(48):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(49) { --size: 1vw; --left-ini: 9vw; --left-end: -1vw; left: 61vw; animation: snowfall 15s linear infinite; animation-delay: -6s } #santas-journey #snow .snowflake:nth-child(49):nth-child(6n) { filter: blur(1px) } #santas-journey #snow .snowflake:nth-child(50) { --size: .8vw; --left-ini: -3vw; --left-end: -9vw; left: 72vw; animation: snowfall 14s linear infinite; animation-delay: -2s } #santas-journey #snow .snowflake:nth-child(50):nth-child(6n) { filter: blur(1px) } @keyframes snowfall { 0% { transform: translate3d(var(--left-ini), 0, 0) } 100% { transform: translate3d(var(--left-end), 150vh, 0) } } @media screen and (min-width: 1000px) { #santas-journey .sj-logo { width: 320px } #santas-journey .sj-container .boule-boule-container { width: 10%; padding-top: 10% } #santas-journey .sj-container .boule-boule-container .boule-boule p { font-size: 20px; line-height: 20px } #santas-journey .sj-container .boule-boule-container .boule-boule p span { font-size: 25px; line-height: 25px } #santas-journey .sj-container .prize { width: 600px } #santas-journey .sj-terms .terms-container { margin: 0 auto } } @media screen and (max-width: 640px) { #santas-journey.open .sj-container .prize { top: 0 } #santas-journey .sj-background { margin: 70px 0 0 0 } #santas-journey .progress { top: 80px; left: 10px; height: 30px; padding: 0 5px; gap: 0 5px } #santas-journey .progress p { font-size: 16px } #santas-journey .progress div { height: 25px; width: 25px } #santas-journey .sj-logo { top: 25px; width: 35vw } #santas-journey .sj-terms .terms-container { padding: 10px; border-radius: 10px } } html:not(.app-view) .app-content, html:not(.app-view) .bottom-bar_app-content { display: none } .app-view .main-promo, .app-view #promotion-builder, .app-view #winners-feed, .app-view .welcome-text, .app-view .featured-games, .app-view .bottom-bar_fluffy, .app-view .bottom-bar_blitz { display: none !important } .app-view .main-promo.app-content, .app-view .featured-games.app-content, .app-view .bottom-bar_app-content { display: block !important } @keyframes rotateSplash { 0% { transform: translate(-50%, -50%) rotate(0deg) } 100% { transform: translate(-50%, -50%) rotate(360deg) } } #betway-self-exclude { background: #fff; height: 100vh; width: 100vw; display: flex; flex-direction: column; justify-content: flex-start } #betway-self-exclude .container { max-width: 750px; width: 100%; margin: 0 auto } #betway-self-exclude .container .wrapper { padding: 30px 20px; display: flex; flex-direction: column } #betway-self-exclude .container .wrapper button { width: 100%; text-align: left } #betway-self-exclude .container .wrapper button svg { width: 24px; right: 20px; margin: 0; position: absolute } #betway-self-exclude .container .wrapper p { color: #000; font-weight: normal; font-size: 14px } #betway-self-exclude .container .wrapper p a { color: blue; text-decoration: none } #betway-self-exclude .container .wrapper p a:hover { text-decoration: underline } #betway-self-exclude button, #betway-self-exclude .generic-button { padding: 15px 20px; border: none; text-transform: uppercase; border-radius: 10px; cursor: pointer; position: relative; font-size: 20px; font-weight: 900 } #betway-self-exclude button.disabled, #betway-self-exclude .generic-button.disabled { filter: grayscale(1) } #betway-self-exclude .spiral { width: 100%; height: auto; position: relative; box-sizing: border-box; background-image: radial-gradient(ellipse at center, #ffbd14 0%, #ff7805 100%); top: 0; left: 0; overflow: hidden; display: flex; align-items: center; justify-content: center } #betway-self-exclude .spiral:before, #betway-self-exclude .spiral:after { display: block; content: ""; background-image: repeating-conic-gradient(transparent 0 9deg, rgba(255, 255, 255, 0.06) 9deg 18deg); width: 1000%; height: 1000%; animation: rotateSplash 60s linear infinite; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 1 } #betway-self-exclude .spiral:after { width: 100%; height: 100%; z-index: 2; background: -webkit-radial-gradient(center, ellipse cover, #ffbd14 0%, rgba(85, 218, 113, 0) 100%); animation: none } #betway-self-exclude .spiral img { position: relative; z-index: 3; padding: 5% 0; height: 55%; max-height: 230px; box-sizing: content-box } @font-face { font-family: "Poppins"; src: url(/assets/fonts/poppins-regular.ttf); font-weight: normal } @font-face { font-family: "Poppins"; src: url(/assets/fonts/poppins-bold.ttf); font-weight: bold } #winners-feed { display: none !important } * { font-family: "Poppins", Verdana, sans-serif } html { margin: 0 auto; overflow-x: hidden; -webkit-tap-highlight-color: transparent } form { margin: 0 } body { margin: 0 } a { text-decoration: none; color: blue } .timestamp { font-size: 10px; margin: 10px 0 } button { -webkit-appearance: none; border: none; text-transform: capitalize; cursor: pointer } .content-button-primary, .content-button-secondary { -webkit-appearance: none; border: none; text-transform: capitalize; cursor: pointer; padding: 10px } .center { display: block; margin: 0 auto } .auto-width { width: max-content } #webpush-notification-center-open { display: none !important } #regulation-logo { position: fixed; bottom: 0; left: 5px; pointer-events: none; opacity: 1; z-index: 101; height: 30px; transition: all .2s linear; display: none; gap: 0 10px; margin-bottom: 5px; padding: 5px 10px; backdrop-filter: blur(6.5px); -webkit-backdrop-filter: blur(6.5px); border-radius: 50px; align-items: center } #regulation-logo svg { display: block; height: 24px } #regulation-logo svg:nth-child(2) { margin-top: -4px } #regulation-logo.hide { opacity: 0 } .region-ontario #regulation-logo { background: #fff; border-radius: 5px } .img-responsive { max-width: 100% } .index-page #regulation-logo { display: flex } .site-background { display: flex; min-height: calc(100vh - 70px); flex-direction: column; padding-top: 70px } .site-background.logged-in { padding-top: 111px; min-height: calc(100vh - 111px) } .site-background.logged-in.in-game { padding-top: 70px; min-height: calc(100vh - 70px) } .gamesBuilder { position: relative; min-height: 111px; width: 100% } .gamesBuilder:before { content: ""; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='32' fill='none' stroke='%23ffffff' stroke-dasharray='50.26548245743669 50.26548245743669' stroke-linecap='round' stroke-width='8'%3E%3CanimateTransform attributeName='transform' dur='1s' keyTimes='0;1' repeatCount='indefinite' type='rotate' values='0 50 50;360 50 50'/%3E%3C/circle%3E%3C/svg%3E"); background-size: 100% auto; background-repeat: no-repeat; background-position: center; width: 55px; height: 55px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .gamesBuilder.loaded:before { display: none } .gamesBuilder.cms { font-size: 0 } .gamesBuilder.cms:before { filter: brightness(.8) } .game-read-more .play-now-button, .game-read-more .main-btn { display: block; padding: 10px 20px; cursor: pointer; font-size: 20px; text-align: center; text-transform: capitalize; margin: 0 auto } .game-read-more .play-now-button { margin: 0 auto 10px auto } .game-read-more .play-now-button:before { content: "play now" } .responsible-gambling-measures .content-wrapper { padding: 0 20px } .responsible-gambling-measures .content-wrapper button { display: block; padding: 10px 20px; cursor: pointer; font-size: 14px; text-align: center; text-transform: capitalize } #self-exclusion-page p button { display: block; margin: 0 auto; padding: 10px 20px; cursor: pointer; font-size: 14px; text-align: center; text-transform: capitalize } #self-exclusion-page p button[type="button"] { margin-top: 10px } main, .main { margin: 40px 0 } main>.container, main>.faqs-page, main.slingo, .main>.container, .main>.faqs-page, .main.slingo { max-width: 1000px; margin: 0 auto; background: #fff; overflow: auto } main>.container .wrapper, main>.faqs-page .wrapper, main.slingo .wrapper, .main>.container .wrapper, .main>.faqs-page .wrapper, .main.slingo .wrapper { padding: 20px } main>.container .wrapper img, main>.faqs-page .wrapper img, main.slingo .wrapper img, .main>.container .wrapper img, .main>.faqs-page .wrapper img, .main.slingo .wrapper img { max-width: 100% } main.bingo-page .container, .main.bingo-page .container { max-width: 1000px; margin: 0 auto; background: #fff; overflow: auto; padding: 0 } main.bingo-page .container .wrapper, .main.bingo-page .container .wrapper { padding: 20px } main.bingo-page .container .wrapper h1, .main.bingo-page .container .wrapper h1 { flex: 0 0 100% } main.bingo-page .container .wrapper .icon-container.bingo-room>span, .main.bingo-page .container .wrapper .icon-container.bingo-room>span { display: none } main.sitemap ul li a, .main.sitemap ul li a { text-transform: capitalize } p u{ font-size: 20px !important; font-weight: 600 !important; } main h1, .main h1 { color: #000; text-transform: capitalize; font-size: 34px; text-align: center; margin: .7em 0 } main#top, .main#top { margin: 0 0 40px 0 } .featured-slots { max-width: 1000px; margin: 0 auto } .featured-slots .wrapper { padding: 0; display: flex; flex-wrap: wrap } .featured-slots .wrapper .clearfix { display: none } .featured-slots .wrapper .icon-container { overflow: hidden; position: relative; display: flex; flex-direction: column } .featured-slots .wrapper .icon-container span { width: 100%; box-sizing: border-box; font-size: 13px; line-height: 15px; padding: 10px; align-items: center; height: 100%; text-align: left } .featured-slots .wrapper .icon-container span.show { display: flex } .featured-slots .wrapper .icon-container.topslots-gold .container:after, .featured-slots .wrapper .icon-container.topslots-silver .container:after { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-image: url(/images/theme/topslots-gold-frame.png); background-size: 100%; pointer-events: none; background-repeat: no-repeat } .featured-slots .wrapper .icon-container.topslots-silver .container:after { background-image: url(/images/theme/topslots-silver-frame.png) } .featured-slots .wrapper .icon-container img { width: 100%; height: auto; display: block; aspect-ratio: 3/1.8 } .featured-slots .wrapper .icon-container .container .ribbon { position: absolute; top: 5px; right: 5px; border-radius: 3px; font-size: 10px; line-height: 10px; padding: 5px; background: red; color: #fff } .featured-slots .wrapper .icon-container .game-icon-buttons { display: none; position: absolute; background-color: rgba(0, 0, 0, 0.7); height: 100%; width: 100%; z-index: 3 } .featured-slots .wrapper .icon-container .game-icon-buttons .icon_play-now, .featured-slots .wrapper .icon-container .game-icon-buttons .icon_play-now-only, .featured-slots .wrapper .icon-container .game-icon-buttons .icon_read-more { height: 40px; width: max-content; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 0 10px; cursor: pointer; font-size: 14px; line-height: 40px; min-width: 100px } .featured-slots .wrapper .icon-container .game-icon-buttons .icon_play-now { margin: -25px auto 0 auto } .featured-slots .wrapper .icon-container .game-icon-buttons .icon_play-now:after { content: "play now" } .featured-slots .wrapper .icon-container .game-icon-buttons .icon_play-now-only:after { content: "play now" } .featured-slots .wrapper .icon-container .game-icon-buttons .icon_read-more { margin: 25px auto 0 auto } .featured-slots .wrapper .icon-container .game-icon-buttons .icon_read-more:after { content: "read more" } .featured-slots .wrapper .icon-container:hover .game-icon-buttons { display: block } .featured-slots .wrapper .icon-container.bingo-room { background: #fff } .featured-slots .wrapper .icon-container.bingo-room>span { display: flex; color: #000; font-weight: bold; background: none } .featured-slots .wrapper .icon-container.bingo-room .bingo-details { padding: 0 10px 10px 10px; box-sizing: border-box } .featured-slots .wrapper .icon-container.bingo-room .bingo-details p { color: #000; margin: 0 auto; font-size: 12px } .featured-slots .wrapper .icon-container.bingo-room .bingo-details p span { display: inline-block; font-weight: bold; width: initial; height: initial; background: none; color: #000; font-size: inherit; line-height: inherit; padding: 0 } table { background: #ccc; border-radius: 10px; overflow: hidden; border-spacing: 2px; margin: 0 auto; width: 100%; table-layout: fixed; overflow-wrap: break-word } table thead { background: #eee } table thead th { padding: 10px; text-transform: capitalize; font-size: 14px } table thead th:first-child { border-radius: 8px 0 0 0 } table thead th:last-child { border-radius: 0 8px 0 0 } table tbody { background: #fff } table tbody td { padding: 10px; font-size: 13px; color: #000 } table tbody td button, table tbody td .button { text-decoration: underline; text-transform: capitalize; cursor: pointer } table tbody td .delete-card { text-decoration: underline; text-transform: capitalize; cursor: pointer } table tbody tr:last-child td:first-child { border-radius: 0 0 0 8px } table tbody tr:last-child td:last-child { border-radius: 0 0 8px 0 } table input[type="radio"] { -webkit-appearance: none; margin: 0; width: 20px; height: 20px; border-radius: 50px; background: none; border: 2px solid #000; cursor: pointer } table input[type="radio"]:checked { box-shadow: inset 0 0 0 2px #fff; background: #000 } .homepage .welcome-text .wrapper table { background: #ccc } .homepage .welcome-text .wrapper table thead { background: #eee } .homepage .welcome-text .wrapper table tbody { background: #fff } .homepage .welcome-text .wrapper table tbody td { color: #000 } .homepage .welcome-text .wrapper table tbody td * { color: #000 } .homepage .welcome-text .wrapper table tbody td img { width: 100% } table td img { width: 100% } @media screen and (max-width: 1040px) { .main>.container { margin: 0 10px } } @media screen and (max-width: 840px) { .site-background.logged-in { padding-top: 70px; min-height: calc(100vh - 70px) } .featured-slots .wrapper .icon-container:hover .game-icon-buttons { display: none } table thead th, table thead td, table tbody th, table tbody td { font-size: 12px } main h1, .main h1 { font-size: 25px } .logged-in~div>#launcher { bottom: 76px !important } } @media screen and (max-width: 640px) { .main, main { margin: 20px 0 } .main .featured-slots .wrapper .icon-container, main .featured-slots .wrapper .icon-container { width: calc(50% - 5px) } table { margin: 0 10px; width: calc(100% - 20px) } table thead th, table thead td, table tbody th, table tbody td { padding: 5px; font-size: 12px } .site-background { padding-top: 70px } }