html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family : Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;} body { overflow: hidden; background-color: #000; position: fixed;} #game-container { width: 100%; height: 100%; position: fixed;} canvas { position: absolute; overflow: visible; transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);} #bg { position: fixed; z-index: 0; visibility: hidden; background-repeat: no-repeat; background-position: center center; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: contain;} #bgOverlay { position: fixed; margin: 0; padding: 0; width: 100%; height: 100%; opacity: 0.5} #bg img { width: 100%; height: 100%; visibility: hidden;} #fps { position: fixed; top: 0; left: 0; color: #060; color: #D3D3D3; background-color: #333; padding: 2px; font-size: 0.9em;} .clockLandscape { position: fixed; margin: 0; color: #FFF; z-index: 9; font-size: 0.72em; text-shadow: 0.1vw 0.1vw #000000; pointer-events: auto; padding-left: 5px; float: left; text-align: left; padding-top: 8px; width: calc (100% - 5px); text-shadow: 2px 1px 0px rgba(0, 0, 0, 1);} .clockPortrait { position: fixed; margin: 0; color: #FFF; z-index: 9; font-size: 0.72em; text-shadow: 0.1vw 0.1vw #000000; pointer-events: auto; padding-left: 5px; float: left; text-align: left; padding-top: 8px; width: calc (100% - 5px); text-shadow: 2px 1px 0px rgba(0, 0, 0, 1);} .clockPaytable {padding-right: 0;text-align: left;padding-left: 8px;left: 0;} @keyframes soundLoad { 0% {background-color: rgba(0, 0, 0, 0.7); color: #fff} 50% {background-color: rgba(255, 255, 255, 0.5); color: #222} 100% {background-color: rgba(0, 0, 0, 0.5); color: #fff}} #sound-loading-info { position: fixed; top: 0; background: rgba(0, 0, 0, 0.75); opacity: 0.6; color: #fff; right: 0; /* -- for centering if needed -- left: 0; margin-left: auto; margin-right: auto; width: 20%; ----------------- */ padding: 4px; text-align: center; font-size: 0.8em; font-weight: bold; animation-name: soundLoad; animation-duration: 4s; animation-iteration-count: infinite;} /* Mini Game Handling */ /* Small Devices */@media only screen and (max-width: 370px) { html, body { font-size: 12px; }} #mpBottomBar { height: 10%; max-height: 35px; width: calc(100% - 10px); background: rgba(0, 0, 0, 0.78); bottom: 0; color: #fff; position: absolute; padding: 5px; font-size: 0.7em; display: flex; align-items: center; justify-content: center; overflow: hidden; } #mpBottomBar > div { float: left; padding-left: 4px; padding-right: 4px;} #mpBottomBar > div > span { padding-left: 1px; padding-right: 1px;} #mpBottomBar > .betPerLineField { float: left; text-align: center; width: calc(33% - 8px); border-right: 2px solid rgba(51, 51, 51, 0.25); } #mpBottomBar > .totalBetField { text-align: center; border-right: 2px solid rgba(51, 51, 51, 0.25); width: calc(33% - 8px); } #mpBottomBar > .winningsField { text-align: center; width: calc(34% - 8px);} #mpBottomBar > .winningsFieldNoBalance { text-align: center; width: calc(56% - 8px);} #mpBottomBar > .balanceField { float: right; text-align: center; width: calc(33% - 8px); border-left: 2px solid rgba(51, 51, 51, 0.25); } .clockMinigame { padding-right: 0; text-align: left; padding-left: 8px; left: 0;}.ukgc-autoplay { font-family: Helvetica, Arial, sans-serif, Tahoma; height: calc(100% - 8px); width: calc(100% - 8px); padding: 4px; color: #fff; position: absolute; background: rgba(0, 0, 0, 0.75); z-index: 9; display: flex; justify-content: center; align-items: center; font-size: 12px;} .ap-container { width: calc(90% - 4px); max-width: 400px; background: rgb(35, 35, 35); display: inline-block; padding: 8px; padding-bottom: 12px; border-top: 4px solid rgb(29, 28, 28); border-bottom: 4px solid rgb(29, 28, 28); position: relative;} .ap-section { padding-left: 4px; padding-right: 4px; width: calc(100% - 8px); display: flex; align-items: center;} .ap-optionButton { margin-left: 3px; cursor: pointer; padding-top: 8px; padding-bottom: 8px; /* background: rgb(131, 32, 29); */ background: rgb(52, 52, 52); display: inline-block; min-width: 16px; text-align: center; width: calc(20% - 3px); min-width: 16px; font-weight: bold;} .ap-optionButton:first-child { margin-left: 0; width: 20%; ;} .ap-optionButton:not(.no-hover):hover { background: rgb(192, 192, 192); color: #222;} .ap-optionButton-selected { background: #f9f9f9; color: #000;} .ap-title { font-size: 1.3em; font-weight: bold; padding: 6px; padding-top: 4px; padding-bottom: 10px; width: calc(100% - 12px); text-align: center;} .ap-label { float: left; padding: 4px; width: calc(30% - 8px);} .ap-selectionPanel { display: inline-block; padding: 4px; width: calc(70% - 8px);} .ap-selectionPanel>div { display: inline-block;} .ap-selectionPanel>.ap-arrowButtonActive { padding: 8px 4px 8px 12px; cursor: pointer; /* background: rgb(131, 32, 29); */ background: rgb(52, 52, 52); pointer-events: auto; color: #fff; width: 16px;} .ap-selectionPanel>.ap-arrowButtonActive:not(.no-hover):hover { background: rgb(192, 192, 192); color: #222;} .ap-selectionPanel>.ap-displayValue { background: none; border: none; padding: 6px; color: #fff; font-weight: bold; text-align: center; width: calc(100% - 76px); -moz-appearance: textfield;} .ap-selectionPanel>.ap-displayValue::-webkit-outer-spin-button,.ap-selectionPanel>.ap-displayValue::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} .ap-selectionPanel>.ap-arrowButtonDisabled { padding: 8px 4px 8px 12px; background: rgb(42, 42, 42); pointer-events: none; color: rgb(82, 82, 82); width: 16px;} .ap-centralise { display: inline-block; text-align: center; padding-top: 8px;} .ap-cancelButton { color: #fff; cursor: pointer; font-weight: bold; text-align: center; z-index: 4; opacity: 0.85; z-index: 4; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(151, 7, 7, 0.8); padding: 7px;} .ap-cancelButton>span { display: none;} .close-button-mini { right: 0; left: 18px;} .ap-cancelButton:before,.ap-cancelButton:after { position: absolute; left: 12px; content: ' '; height: 18px; width: 7px; background-color: #fff;} .ap-cancelButton:before { transform: rotate(45deg);} .ap-cancelButton:after { transform: rotate(-45deg);} .ap-cancelButton:hover { opacity: 1; background: linear-gradient(#dd2f07, #b82706);} .ap-resetButton { background: rgb(52, 52, 52); color: #fff; opacity: 1;} .ap-resetButton:hover { background: rgb(192, 192, 192); color: #222; opacity: 1;} .ap-okButtonActive { background: linear-gradient(#79c415, #5a970a); color: #fff; opacity: 1;} .ap-okButtonActive:hover { background: linear-gradient(#68ab0f, #558d0b); opacity: 1;} .ap-okButtonDisabled { background: rgb(42, 42, 42); pointer-events: none; color: rgb(90, 90, 90);} .btn { cursor: pointer; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 16px; font-weight: bold; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; margin-left: 10px;} .btn:first-child { margin-left: 0;} .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px;} .btn-circle.btn-md { width: 35px; height: 35px; padding: 5px 8px; font-size: 14px; line-height: 1.33; border-radius: 17.5px;} .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px;}.paytable-container { z-index: 2; width: 100%; position: absolute; display: none; overflow-x: hidden; overflow-y: auto; top: 140px; bottom: 0px;} #paytable-dom { z-index: 2; width: 100%; border: 0; position: relative; background: rgba(0, 0, 0, 0.9); font-family : Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif; color: #fff; font-size: 14px; overflow-x: hidden; overflow-y: auto; padding-bottom: 140px; padding-top: 8px;} /* iPhone Plus tabbed view crop fix */@media (orientation : landscape) and (max-width: 736px) and (min-width: 736px) { #paytable-dom { padding-bottom: 160px }} .loading-info { z-index: 3; position: fixed; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9); } .logo-container { z-index: 3; position: fixed; left: 0; top: 80px; width: 100%; height: 60px; text-align: center; cursor: default; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9);} .top { top: 0px;} .top-offset { top: 140px;} .tab-button-container { z-index: 3; position: fixed; left: 0; top: 0; width: 100%; padding-top: 10px; height: 66px; background: rgba(0, 0, 0, 0.9); text-align: center; cursor: default; display: flex; align-items: center; justify-content: center; border-bottom: 4px solid rgba(210, 31, 39, 0.8);} .paytableTab, .rulesTab { text-align: left; font-size: 0.9em; padding-left: 3%; padding-right: 3%;} .paytable-button, .rules-button { z-index: 5; height: calc(100% - 8px); opacity: 0.75; border-radius: 8px 8px 0 0; background: rgba(148, 22, 28, 0.8); text-align: center; color: white; font-weight: bold; font-size: 0.9em; padding: 4px; display: inline-grid; margin-right: 4px; margin-top: 8px; width: 25%; max-width: 350px; display: flex; align-items: center; justify-content: center; cursor: pointer;} .paytable-selected-button, .rules-selected-button { z-index: 5; height: calc(100% - 8px); opacity: 1; border-radius: 8px 8px 0 0; background: linear-gradient(rgba(210, 31, 39, 0.8), rgba(148, 22, 28, 0.8)) ; text-align: center; color: white; font-weight: bold; font-size: 0.9em; padding: 4px; display: inline-grid; margin-right: 4px; margin-top: 8px; width: 25%; max-width: 350px; display: flex; align-items: center; justify-content: center; cursor: pointer;} .close-button { z-index: 4; position: fixed; left: 16px; top: 24px; width: 32px; height: 32px; opacity: 0.75; border-radius: 50%; background: rgba(210, 31, 39, 0.8); padding: 7px; } .close-button-mini { right: 0; left: 18px;} .close-button:hover, .paytable-button:hover, .rules-button:hover { opacity: 1;} .close-button:before, .close-button:after { position: absolute; left: 18px; content: ' '; height: 33px; width: 10px; background-color: #fff;}.close-button:before { transform: rotate(45deg);}.close-button:after { transform: rotate(-45deg);} /** Loading animation css **/ @keyframes lds-blocks { 0% { background: #be2020; } 12.5% { background: #a21c1c; } 12.625% { background: #891717; } 100% { background: #6b1111; }} @-webkit-keyframes lds-blocks { 0% { background: #be2020; } 12.5% { background: #a21c1c; } 12.625% { background: #891717; } 100% { background: #6b1111; }} .lds-blocks { width:100%; height:100%; display: inline-block; vertical-align: middle; } .lds-blocks div { position: absolute; width: 40px; height: 40px; background: #6b1111; -webkit-animation: lds-blocks 1s linear infinite; animation: lds-blocks 1s linear infinite;} .lds-blocks { width: 200px !important; height: 200px !important; -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px); transform: translate(-100px, -100px) scale(1) translate(100px, 100px);} .paytableSection { padding: 1%; width: 98%; text-align: center; float: left} .paytableheader { background-color: rgba(210, 31, 39, 0.8); text-align: center; color: white; font-weight: bold; padding-top: 2%;padding-bottom: 2%; width: 100%; font-size: 1.2em;} .paytableSectionContent { padding: 1%; width: 98%;} .specialSectionContent { padding: 2%; width: 96%; float: left;} #paytableSymbolContainer { width: 100%; text-align: center; float: left;} .paytablegamelogo { padding-top: 6px; padding-bottom: 6px; max-width: 320px; display: inline-block;} .paytablegamelogo img { width: 100%;} .paytableBox { width: 20%; min-width: 100px; overflow: "hidden"; margin: 0 auto; display: inline-block; padding: 1%;} .paytableBox img { width: 100%; max-width: 180px;} .specialBox { min-width: 150px; background-color: rgba(210, 31, 39, 0.2); display: inline-block; vertical-align:middle;} .specialSymbolBox { padding: 1%; width: 48%; float: left; text-align: left;} .specialSymbolBoxImage { padding: 1%; width: 48%; float: left; text-align: center;} .specialSymbolBoxImage img { width: 100%; max-width: 160px;} .paytablesubheader { text-align: center; font-weight: bold; padding: 2%; width: 96%;} .paytablepayline { width: 10%; min-width: 100px; margin: 1% 1% 1% 1%; display: inline-block; text-align: center;} .paytablepayline img { width: 100%;} .featuresBox { background-color: rgba(210, 31, 39, 0.2); margin-bottom: 1%; font-size: 0.9em; float: left;} .subtitleText { margin-top: 2%; text-align: left; font-weight: bold;} .copyrightInfo { margin-bottom: 1%; font-size: 0.9em;} .multiplierText { text-align: center; color: white; font-weight: bold; padding-top: 2%;padding-bottom: 2%; width: 100%; font-size: 1.1em;} .bonusImages { width: 100%; text-align: center;} .featuresImage { width: 50%; padding: 1%; display: inline-block; max-width: 550px; } .featuresScreenshot { width: 65%; padding: 1%; display: inline-block; max-width: 550px;} .paylinesDirectionImage { width: 50%; padding: 1%; display: inline-block; max-width: 550px;} #generalRulesContent { font-size: 1.1em;} #paylinesSection { align-items: center; display: flex; flex-wrap: wrap; justify-content: center;} .paylineContainer { align-items: center; display: flex; height: 100%; justify-content: center; margin: 1% 1% 1% 1%; min-width: 142px; padding-left: 0; position: relative; text-align: center; width: 12%;}.paylineNumber { box-sizing: border-box; color: white; float: left; font-weight: bold; height: 100%; padding-right: 3px; min-width: 26px; width: 20%;}.paylineBox { background: rgb(227, 30, 37); border-radius: 8px; box-sizing: border-box; float: left; height: 100%; min-width: 116px; padding: 8px; width: 80%;}.paylineIconBox { background: white; box-sizing: border-box; border: 1px solid rgba(227, 30, 37, 1); float: left; height: 20px; min-width: 20px; width: 20%;} .paylineIconBoxFill { background: rgb(76, 175, 69);} /** Basic class props **/ .centerText { text-align: center;} .leftText { text-align: left} .rightText { text-align: right;} .boldText { font-weight: bold;} .fullWidth { width: 90%; padding: 1%; padding-left: 5%; padding-right: 5%;} .halfWidth { width: 47%; padding: 1%; } .oneThirdWidth { width: 30%; padding: 1%; } .quarterWidth { width: 23%; padding: 1%; } .highlight { color: #fff; padding: 3px;} .spacer { margin-bottom: 6%;} .subtitleText { margin-top: 3px; text-align: left; font-weight: bold; font-size: 1.2em;} /** Media queries handlers **/ @media only screen and (max-width: 900px) { html, body { font-size: 12px; }} @media only screen and (max-width: 700px) { html, body { font-size: 14px; } .specialSymbolBox { /* max-height: 110px; */ width: 66%; } .specialSymbolBoxImage { padding: 1%; width: 30%; float: left; text-align: center; } .specialSymbolBoxImage img { max-width: 110px; display: inline-block; } .paytablegamelogo { width: 250px; } .flexible { width: 98%; padding: 1%; float: left; margin: 0.5%; }} @media only screen and (max-width: 400px) { html, body { font-size: 12px; }} .no-tab-button { top: 80px;} @media only screen and (max-height: 250px) { html, body { font-size: 11px; } .paytable-container { top: 70px; } #paytable-dom { padding-bottom: 70px } .tab-button-container { height: 40px; padding-top: 0; } .paytable-button, .rules-button { height: 25px; } .paytable-selected-button, .rules-selected-button { height: 25px; } .logo-container { top: 42px; height: 30px; } .paytablegamelogo { max-width: 210px; padding-top: 3px; padding-bottom: 3px; } .paytablegamelogo img { width: 100%; } .no-tab-button { padding-top: 4px; top: 40px; } /* iPhone Plus tabbed view crop fix */ @media (orientation: landscape) and (max-width: 736px) and (min-width: 736px) { #paytable-dom { padding-bottom: 80px } }} .mini-paytable-container { top: 76px;} .mini-tab-button-container { height: 43px; padding-top: 0;} .close-button-mini { left: 23px;} .mini-logo-container { top: 46px; height: 30px;} .mini-paytablegamelogo { max-width: 200px;} .mini-no-tab-button { padding-top: 4px; top: 40px;}