/* IMPORT CSS */
@import "typicons.css";

/* FONTS */
@font-face {
	font-family: 'NotoSans-CondensedMedium';
	src: url(../assets/fonts/NotoSans-CondensedMedium.eot) format('embedded-opentype'),
		 url(../assets/fonts/NotoSans-CondensedMedium.otf) format('opentype');
}

@font-face {
	font-family: 'NotoSans-CondensedBold';
	src: url(../assets/fonts/NotoSans-CondensedBold.eot) format('embedded-opentype'),
		 url(../assets/fonts/NotoSans-CondensedBold.otf) format('opentype');
}

@font-face {
	font-family: 'typicons';
	src: url(../assets/fonts/typicons.eot) format('embedded-opentype'),
		 url(../assets/fonts/typicons.otf) format('opentype');
}

/* BASE ELEMENTS */
* { 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {     
    background-color: black;    
    width: 100%;
    height: 100%;
}

body {	
    position: relative;
	-webkit-user-select: 			none;
	-khtml-user-select: 			none;
	-moz-user-select: 				none;
	-ms-user-select: 				none;
	user-select: 					none;
	padding: 0;
	margin: 0;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: none;
    font-family: 'NotoSans-CondensedMedium';
}

::-webkit-scrollbar {
    width: 0.5em;
}
  
::-webkit-scrollbar-track {
    border-radius: 0.5em;
    background-color: #101010;    
}
  
::-webkit-scrollbar-thumb {
    background-color: rgba(136, 220, 255, 0.75);
    border-radius: 0.5em;
}

canvas, .canvas-ui {
    width: 100%;
    height: 100%;
}
.canvas-ui { position: absolute; }

/* CANVAS ANIMATIONS */
.canvas, .scoreboardContainer {
    transition: transform 0.2s;
}

/*
#btnAutospin, #btnBet, #btnSpin, #btnMenu, #btnVolume, .animation-autospin-rotate {
    animation: animation-rotate 4s infinite linear;
}

@keyframes animation-rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
*/

#overlayer,
#overlayer-bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;    
    background-color: rgba(0, 0, 0, 0.95);
    display: none;
}

#page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
}

img {
    -webkit-user-select: none;
    -webkit-touch-callout: none;    
}

.background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.55;
}

:-webkit-full-screen {
    background-color: black;
}

.taLeft { text-align: left; }
.taRight { text-align: right; }

/* BUTTONS ANIMATIONS */
.ui-button, .btnJackpotInfo {
    transition: opacity 0.4s;
}

.infinity {
    position: relative;
    width: 1.85em;
    height: 1em;
    left: 0.6em;
}

.infinity:before,
.infinity:after {
    content: "";
    position: absolute;
    top: 1.75em;
    width: 0.25em;
    height: 0.25em;
    border: 0.115em solid white;
    border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
    transform: rotate(45deg);
 }

.infinity:after {
    left: auto;
    right: 0;
    transform: rotate(-135deg);
}

.jackpotMessage {
    font-size: 1.4vw;
    margin: 0;
    text-align: left;
    padding-top: 0.3vw;
}

/* Portrait */
@media only screen and (orientation:portrait) {
    .layout {
        width: 100vw;
        height: 100%;
    }

    .jackpotMessage {
        font-size: 4vw;
        text-align: center;
        padding-top: 0;
    }

    .jackpotContainer {
        position: absolute;       
        top: 0;
        left: 0;
        text-align: center;
        font-family: 'NotoSans-CondensedMedium';      
        width: 100vw;
        height: 12vw;
        background-color: rgba(0, 0, 0, 0.75);
    }
    
    .jackpotContainer .container {
        position: relative; 
        width: 76%;    
        height: 100%;
        margin-left: 12%;
        float: left;
    }
    
    .jackpotContainer .levels {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;    
        height: 100%;     
    }
    
    .jackpotContainer .info {
        position: relative;
        width: 12%;
        height: 100%;
        float: left;
        cursor: pointer;
        z-index: 1;
        display: none;
    }
    
    .btnJackpotInfo {
        width: 48%; 
        height: 48%; 
        margin-top: 39%; 
        opacity: 0.60;
    }

    .btnJackpotInfo:hover {
        opacity: 1;
    }

    .jackpotContainer .logo {
        width: 100%;
        height: 40%;
    }
    
    .jackpotContainer .displays {
        position: relative;
        width: 100%;
        height: 60%;
    }
    
    .jackpotContainer .displays .part {    
        width: 50%;
        height: 100%;
        float: left;
    }
    
    .jackpotDisplay { 
        position: relative;   
        width: 100%;
        height: 100%;    
        float: left;    
        background-size: 100% 80%; 
    }
    
    .jackpotDisplay .icon {
        width: 27.5%;
        height: 84%;
        float: left;    
    }
    
    .jackpotDisplay .counter {
        width: 65%;
        height: 100%;
        float: left;
        text-align: right; 
        font-size: 4vw;   
    }
    
    .jackpotDisplay .progress {
        position: absolute;
        top: 0;
        left: 4%;
        width: 0;
        height: 5%;
        transform: skew(-25deg);        
    }

    .canvas {
        position: absolute;
        left: 0;
        top: 12vw;
        width: 100vw;
        height: 56.25vw;
        box-shadow: 0 7em 7em 3em rgba(0, 0, 0, 0.75);
        -webkit-box-shadow: 0 7em 7em 3em rgba(0, 0, 0, 0.75);
    }
    
    .scoreboardContainer {
        position: absolute;       
        top: 68.25vw;
        left: 0;
        text-align: center;
        font-family: 'NotoSans-CondensedMedium';      
        width: 100vw;
        height: 14vw;
    }
    
    .scoreboardContainer .titles {
        width: 100%;
        height: 30%;
        font-size: 3.5vw;
    }
    
    .scoreboardContainer .values {
        width: 100%;
        height: 50%;
        font-size: 5vw;
    }
    
    .scoreboardContainer .currency {
        width: 100%;
        height: 20%;
        font-size: 2.5vw;
    }
    
    .scoreboardContainer .block {
        float: left;
        width: 33.33%;
        height: 100%;     
        text-align: center;   
    }
    
    .ui {
        position: absolute;
        left: 0;
        bottom: 12vw;
        width: 100vw;
    }    
    
    #page .sound {
        position: relative;
        top: 50%;
        left: 0;    
        width: 100%;
        height: 40vw;
        margin-top: -20vw;
    }

    #page .toolbar {
        position: fixed;
        bottom: 0; 
        left: 0;
        width: 100%;
        height: 10vw;
        padding-top: 1vw;
        text-align: center;
        background-color: #101010;
        border-bottom: dotted 1px #202020;
    }
    
    #page .toolbar img {
        border: none; 
        width: 10vw;
        margin-left: 0.5vw;
        margin-right: 0.5vw;
        cursor: pointer;
    }    

    #page .content {
        position: relative;
        top: 0; 
        left: 0;
        width: calc(100% - 0.3em);            
        text-align: center;    
        color: #cfcfcf;
        font-size: 2.9vw;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: calc(100% - 14vw);
    }

    #page .content .fixed {
        position: fixed;
        bottom: 10vw; 
        left: 0;
        width: 100%;
        height: 10vw;
        text-align: center;  
        color: #ffffff;
        font-size: 4vw;
    }

    #fgr {
        position: absolute;
        left: 1vw;
        top: 13vw;
        width: 15vw;
        height: 15vw;
        background-color: rgba(0, 200, 0, 0.80);
        border-radius: 3vw;
        border: solid 0.5vw #00ff00;
        font-size: 5vw;
        font-weight: bold;
        text-align: center;
    }

    #fgr .title {
        font-size: 2.5vw;
        margin-top: 1vw;
        word-spacing: 15vw;
    }

    #betId {
        position: absolute;     
        left: 5vw;
        bottom: 1vw;
        color: #cfcfcf;
        font-size: 2.5vw;    
    }
    
    #time {
        position: absolute;     
        right: 5vw;
        bottom: 1vw;
        color: #cfcfcf;
        font-size: 2.5vw;    
    }

    #casimiLogo {    
        display: none;
        position: absolute;     
        left: 50%;
        margin-left: -12.5vw;
        bottom: 1vw;
        width: 25vw;    
    } 

    .infinity {
        left: 0.3em;
    }

    .infinity:before,
    .infinity:after {
        top: 0.5em;
    }
}

/* Landscape */
@media only screen and (orientation:landscape) {
    #page .sound {
        position: relative;
        top: 50%;
        left: 0;    
        width: 100%;
        height: 40vh;
        margin-top: -20vh;    
    }

    #page .toolbar {
        position: fixed;
        bottom: 0; 
        left: 0;
        width: 100%;
        height: 10vh;
        padding-top: 1vh;
        text-align: center;
        background-color: #101010;
        border-bottom: dotted 1px #202020;
    }
    
    #page .toolbar img {
        border: none; 
        width: 10vh;
        margin-left: 0.5vh;
        margin-right: 0.5vh;
        cursor: pointer;
    }

    #page .content {
        position: relative;
        top: 0; 
        left: 0;
        width: calc(60% - 0.3em);;            
        padding-left: 20%;
        padding-right: 20%;
        text-align: center;    
        color: #cfcfcf;
        font-size: 1.75vw;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: calc(100% - 14vh);        
    }   

    #page .content .fixed {
        position: fixed;
        bottom: 11vh; 
        left: 0;
        width: 100%;
        height: 10vh;
        text-align: center;                
        color: #ffffff;
        font-size: 4vh;
    }

    .ui {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    
    #fgr {
        position: absolute;
        left: 1vh;
        top: 1vh;    
        width: 15vh;
        height: 15vh;
        background-color: rgba(0, 200, 0, 0.80);
        border-radius: 3vh;
        border: 0.5vh solid #00ff00;
        font-size: 5vh;
        font-weight: bold;
        text-align: center;
    }    

    #fgr .title {
        font-size: 2.5vh;
        margin-top: 1vh;
        word-spacing: 15vh;
    }
}

@media only screen and (orientation:landscape) and (max-aspect-ratio: 160/95) {
    .layout {
        position: absolute;
        top: 0;
        left: 0;
    }

    .jackpotContainer {
        text-align: center;
        font-family: 'NotoSans-CondensedMedium';      
        width: 100%;
        height: 5%;
        background-color: rgba(0, 0, 0, 0.75);
    }
    
    .jackpotContainer .container {
        position: relative; 
        width: 94%;    
        height: 100%;
        margin-left: 0%;
        float: left;
    }
    
    .jackpotContainer .levels {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;    
        height: 100%; 
    }
    
    .jackpotContainer .info {
        position: relative;
        width: 6%;
        height: 100%;
        float: left;
        cursor: pointer;
        z-index: 1;
        display: none;
        line-height: 0;
    }
    
    .btnJackpotInfo {
        width: 48%; 
        height: 96%; 
        opacity: 0.60;
    }

    .btnJackpotInfo:hover {
        opacity: 1;
    }

    .jackpotContainer .logo {
        width: 20%;
        height: 100%;
        float: left;
    }
    
    .jackpotContainer .displays {
        width: 80%;
        height: 100%;
        float: left;
    }
    
    .jackpotContainer .displays .part {    
        width: 25%;
        height: 100%;
        float: left;
    }
    
    .jackpotDisplay {    
        position: relative;
        width: 100%;
        height: 100%;    
        float: left;    
        background-size: 100% 100%; 
    }
    
    .jackpotDisplay .icon {
        width: 27.5%;
        height: 100%;
        float: left;    
        line-height: 0;
    }
    
    .jackpotDisplay .counter {
        width: 65%;
        height: 100%;
        float: left;
        text-align: right; 
        font-size: 2vw;   
    }
    
    .jackpotDisplay .progress {
        position: absolute;
        top: 0;
        left: 4%;
        width: 0;
        height: 5%;
        transform: skew(-25deg);    
    }

    .canvas {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 1em 1em 0 rgba(0, 0, 0, 0.95);
        -webkit-box-shadow: 0 1em 1em 0 rgba(0, 0, 0, 0.95);
    }
    
    .jackpotContainer + .canvas {
        position: relative;      
        height: 95%;
    }

    .scoreboardContainer {
        position: relative;           
        text-align: center;
        font-family: 'NotoSans-CondensedMedium';      
        width: 100%;
        height: 7.1%;
        margin-top: -4%;
        background-color: rgba(0, 0, 0, 0.75);
    }

    .jackpotContainer ~ .scoreboardContainer {
        margin-top: -4%;
    }

    .scoreboardContainer .block {
        float: left;
        width: 33.33%;
        height: 100%; 
        text-align: center;   
    }        

    .scoreboardContainer .titles {
        position: absolute;
        top: 0;
        left: 0;
        width: 80%;
        height: 100%;
        font-size: 1.6vw;
        padding-top: 0.5%;
        text-align: left;
    }
    
    .scoreboardContainer .values {
        position: absolute;
        top: -3%;
        left: 0;
        width: 80%;
        height: 100%;    
        margin-left: 10%;
        font-size: 2.25vw;
    }
    
    .scoreboardContainer .currency {
        position: absolute;
        top: 55%;
        left: 0;
        width: 80%;
        margin-left: 10%;
        height: 40%;        
        font-size: 1.30vw;        
    }            

    #betId {
        position: absolute;     
        left: 0.75vw;
        bottom: 2vw;
        color: #cfcfcf;
        font-size: 1.5vw;    
    }
    
    #time {
        position: absolute;     
        left: 0.75vw;
        bottom: 0.25vw;
        color: #cfcfcf;
        font-size: 1.5vw;    
    }

    #casimiLogo {    
        display: none;
        position: absolute;     
        right: 0.75vw;
        bottom: 0.75vw;
        height: 2.5vw;    
    } 
}

@media only screen and (orientation:landscape) and (min-aspect-ratio: 160/95) { 
    .layout {
        position: absolute;
        top: 0;
        left: 0;       
    }

    .jackpotContainer {
        text-align: center;
        font-family: 'NotoSans-CondensedMedium';      
        width: 100%;
        height: 5%;
        background-color: rgba(0, 0, 0, 0.75);
    }
    
    .jackpotContainer .container {
        position: relative; 
        width: 94%;    
        height: 100%;
        margin-left: 0%;
        float: left;
    }
    
    .jackpotContainer .levels {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;    
        height: 100%;
    }
    
    .jackpotContainer .info {
        position: relative;
        width: 6%;
        height: 100%;
        float: left;
        cursor: pointer;
        z-index: 1;
        display: none;
        line-height: 0;
    }
    
    .btnJackpotInfo {
        width: 48%; 
        height: 96%;         
        opacity: 0.60;
    }

    .btnJackpotInfo:hover {
        opacity: 1;
    }

    .jackpotContainer .logo {
        width: 20%;
        height: 100%;
        float: left;
    }
    
    .jackpotContainer .displays {    
        width: 80%;
        height: 100%;
        float: left;
    }
    
    .jackpotContainer .displays .part {    
        width: 25%;
        height: 100%;
        float: left;
    }
    
    .jackpotDisplay {  
        position: relative;  
        width: 100%;
        height: 100%;    
        float: left;    
        background-size: 100% 100%; 
    }
    
    .jackpotDisplay .icon {
        width: 27.5%;
        height: 100%;
        float: left;  
        line-height: 0;  
    }
    
    .jackpotDisplay .counter {
        width: 65%;
        height: 100%;
        float: left;
        text-align: right; 
        font-size: 3.4vh;   
    }
    
    .jackpotDisplay .progress {
        position: absolute;
        top: 0;
        left: 4%;
        width: 0;
        height: 5%;
        transform: skew(-25deg);
    }

    .canvas {
        left: 0;
        top: 0%;
        width: 100%;
        height: 100%;
        box-shadow: 0 1em 1em 0 rgba(0, 0, 0, 0.95);
        -webkit-box-shadow: 0 1em 1em 0 rgba(0, 0, 0, 0.95);
    }
    
    .jackpotContainer + .canvas
    {    
        position: relative;
        height: 95%;
    }

    .scoreboardContainer {
        position: relative;           
        text-align: center;
        font-family: 'NotoSans-CondensedMedium';      
        width: 100%;
        height: 7.1%;
        margin-top: -4%;
        background-color: rgba(0, 0, 0, 0.75);
    }

    .jackpotContainer ~ .scoreboardContainer {
        margin-top: -4%;
    }

    .scoreboardContainer .block {
        float: left;
        width: 33.33%;
        height: 100%; 
        text-align: center;   
        line-height: 0;
    }        

    .scoreboardContainer .titles {
        position: absolute;
        top: 11%;
        left: 0;
        width: 80%;
        height: 100%;
        font-size: 2.5vh;
        padding-top: 1%;
        text-align: left;
    }
    
    .scoreboardContainer .values {
        position: absolute;
        top: 30%;
        left: 0;
        width: 80%;
        height: 100%;    
        margin-left: 10%;
        font-size: 3.5vh;
    }
    
    .scoreboardContainer .currency {
        position: absolute;
        top: 75%;
        left: 0;
        width: 80%;
        margin-left: 10%;
        height: 40%;        
        font-size: 2vh;        
    }    
 
    #betId {
        position: absolute;     
        left: 0.75vh;
        bottom: 2.75vh;
        color: #cfcfcf;
        font-size: 2.5vh;    
        padding-left: calc(49vw - 80.89vh);
    }
    
    #time {
        position: absolute;     
        left: 0.75vh;
        bottom: 0.25vh;
        color: #cfcfcf;
        font-size: 2.5vh;  
        padding-left: calc(49vw - 80.89vh);  
    }

    #casimiLogo {    
        display: none;
        position: absolute;     
        right: 1vh;
        bottom: 1vh;
        height: 4vh;    
    } 
}

#page .sound .on,
#page .sound .off {
    float: left;
    width: 45%;
    height: 100%;
    text-align: center;
    padding-left: 2.5%;
    padding-right: 2.5%;
}

#page .sound .on { text-align: right; }

#page .sound .off { text-align: left; }

#page .sound .on img,
#page .sound .off img {
    height: 100%;
    border: none;
}

#page .content h2 {
    width: 100%;
    display: inline-block;
}

#page .content p
{
    margin-inline-start: 1em;    
    margin-inline-end: 1em;
}

#page .content p.language
{
    float: left;
    width: calc(20% - 0.5em);
    height: 6.6em;
    margin-block-start: 0.25em;    
    margin-block-end: 0.25em;
    margin-inline-start: 0.25em;    
    margin-inline-end: 0.25em;
    text-align: center;
}

#page .content p.language img {
    width: 5em;
    height: 5em;
    border: solid 0.25em #404040;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.40;
}

#page .content p.language img.active {
    opacity: 1;
    border: solid 0.30em #cfcfcf;
}

#page .content p.language h3
{
    margin-block-start: -0.35em;    
    margin-block-end: 0px;
}

#page .content p.radio
{
    float: left;
    width: calc(50% - 1.5em);
    height: 2.6em;
    padding-top: 0.4em;
    margin-block-start: 0.25em;    
    margin-block-end: 0.25em;
    margin-inline-start: 0.25em;    
    margin-inline-end: 0.25em;
    text-align: center;
    border: solid 0.25em #404040;
    border-radius: 2em;
    background-color: rgba(93, 173, 232, 0.20);
    cursor: pointer;
}

#page .content p.radio.active {
    border: solid 0.25em #cfcfcf;    
    background-color: rgba(93, 173, 232, 0.50);
}

#page .content p.radio span {    
    font-size: 1.5em;
}

#page .content p.history
{
    position: relative;
    width: calc(100% - 0.5em);
    height: 3em;
    margin-block-start: 0.25em;    
    margin-block-end: 0.25em;
    margin-inline-start: 0.25em;    
    margin-inline-end: 0.25em;
    text-align: center;
    background-color: #171717;
    border-radius: 1em;
}

#page .content p.history div.time {
    position: absolute;
    display: inline-block;
    left: 0;
    width: 3em;
    height: 100%;
    line-height: 3em;
}

#page .content p.history div.amounts {
    position: absolute;
    display: inline-block;
    left: 3em;
    width: calc(100% - 6em);
    height: 100%;
}

#page .content p.history div.amount {
    float: left;    
    width: 25%;
    height: 100%;
    line-height: 3em;
}

#page .content p.history div.detail {
    position: absolute;
    display: inline-block;
    right: 0;
    width: 3em;
    height: 100%;
}

#page .content p.paytable
{
    position: relative;
    width: calc(100% - 0.5em);
    height: 4em;
    margin-block-start: 0.25em;    
    margin-block-end: 0.25em;
    margin-inline-start: 0.25em;    
    margin-inline-end: 0.25em;
    text-align: center;
    background-color: #070707;
    border-radius: 1em;
}

#page .content p.paytable div
{
    position: relative;
    float: left;
    height: 100%;
    font-size: 2em;
}

.loader {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 999999;
}

.loader .progress-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 75%;
}

.loader .logo {
    position: absolute;
    top: 47.5%;
    left: 50%;
}

.loader .transformways {
    margin-top: 1.5%;
    width: 12.5%;
}

.loader .features {
    position: absolute;
    width: 100%;
    top: 52.5%;
    left: 0;
    text-align: center;
    color: #cfcfcf;
    font-size: 2vh;
}

.loader .casimi {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 75%;
    max-height: 75%;
}

@media only screen and (orientation:landscape) {
    .loader .features {
        font-size: 2vw;
    }
}

@media only screen and (orientation:portrait) {
    .loader .transformways {
        margin-top: 1.5%;
        width: 40%;
    }
}
/* BUTTONS */
.ui-button { 
    opacity: 0.50; 
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.ui-button:hover {
    opacity: 0.85;
    cursor: pointer;
}
.ui-button.ui-button-disabled:hover {
    opacity: 0.50;
    cursor: auto;
}

/* opacity .75*/
.ui-button.o75 { 
    opacity: 0.75; 
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.ui-button.o75:hover {
    opacity: 1;
    cursor: pointer;
}
.ui-button.o75.ui-button-disabled:hover {
    opacity: 0.75;
    cursor: auto;
}

#btnSpin img, #btnStop img, #btnFF img,
#btnBet img, #btnGamble img,
#btnAutospin img, #btnAutostop img, #btnCollect img {
    width: 100%;
    height: 100%;    
    pointer-events: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#btnVolume img, #btnMenu img {
    pointer-events: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

@media screen and (orientation:landscape)  {
    #btnSpin, #btnStop, #btnFF {
        position: absolute;
        height: 31%;
        width: 17.4%;
        top: 48.5%;
        margin-top: -8%;
    } 

    .jackpotContainer + .canvas + .scoreboardContainer + .ui > #btnSpin,
    .jackpotContainer + .canvas + .scoreboardContainer + .ui > #btnStop,
    .jackpotContainer + .canvas + .scoreboardContainer + .ui > #btnFF {
        height: 29.3%;
        width: 17.4%;
        top: 48.25%; 
    }

    #btnBet, #btnGamble,
    #btnAutospin, #btnAutostop, #btnCollect,
    #btnMenu, 
    #btnVolume {
        position: absolute;
        width: 8%;
    }
    
    #displayAutostop {   
        position: absolute;
        width: 8%;       
        top: 59.5%;        
        color: white;
        opacity: 0.90;
        text-align: center;
        pointer-events: none;
    }
    
    #displayAutostop.left { left: 6.7%; }
    #displayAutostop.right { right: 6.7%; }

    #btnBet, #btnGamble {
        top: 26%;    
    }    

    #btnAutospin, #btnAutostop, #btnCollect {
        top: 59.5%;
    }

    #btnBet.left, #btnGamble.left,
    #btnAutospin.left, #btnCollect.left {
        left: 6.7%;
    }

    #btnAutostop.left { left: 6.7%; }

    #btnBet.right, #btnGamble.right,
    #btnAutospin.right, #btnCollect.right {
        right: 6.7%;
    }

    #btnAutostop.right { right: 6.7%; }

    #btnSpin.left, #btnStop.left, #btnFF.left
    {
        left: 2%;
    }
    
    #btnSpin.right, #btnStop.right, #btnFF.right
    {
        right: 2%;
    }
    
    #btnMenu.defaultRight {
        top: 11%;
    }
    
    #btnVolume.defaultRight {
        top: 74.5%;
    }
    
    #btnMenu.defaultLeft {
        top: 26%;
    }
    
    #btnVolume.defaultLeft {
        top: 59.5%;
    }
    
    #btnMenu.defaultRight.left, #btnVolume.defaultRight.left,
    #btnMenu.defaultLeft.right, #btnVolume.defaultLeft.right
    {
        left: 2%;
    }
    
    #btnMenu.defaultRight.right, #btnVolume.defaultRight.right,
    #btnMenu.defaultLeft.left, #btnVolume.defaultLeft.left
    {
        right: 2%;
    }
}

@media screen and (orientation:portrait) {
    #btnSpin, #btnStop, #btnFF {
        position: absolute;
        width: 30vw;
        height: 30vw;
        top: 50%;        
        left: 50%;
        margin-top: -24vw;
        margin-left: -15vw;
    }

    #btnBet, #btnGamble,
    #btnAutospin, #btnAutostop, #btnCollect,
    #btnMenu,
    #btnVolume {
        position: absolute;
        width: 15vw;
        height: 15vw;
        top: 50%;
    } 

    #displayAutostop {
        position: absolute;
        top: 50%;
        margin-top: -11.5vw;
        width: 12vw;
        height: 12vw;
        text-align: center;
        font-size: 3.5vw;
        color: rgba(255, 255, 255, 0.75);
        opacity: 0.90;
        pointer-events: none;
    }
    #displayAutostop:hover {
        cursor: pointer;
    }
	
    #btnBet, #btnGamble, #btnAutospin, #btnAutostop, #btnCollect,
    #btnMenu, #btnVolume
    {
        margin-top: -16.5vw;       
    } 

    #btnBet.left, #btnGamble.left,
    #btnAutospin.right, #btnCollect.right , #btnAutostop.right,
    #displayAutostop.right
    {
        left: 50%;
        margin-left: -26vw;
    }

    #displayAutostop.right {
        margin-left: -24.5vw;
    }

    #btnBet.right, #btnGamble.right,
    #btnAutospin.left, #btnCollect.left, #btnAutostop.left,
    #displayAutostop.left
    {
        left: 50%;
        margin-left: 11vw;
    }

    #displayAutostop.left {
        margin-left: 12vw;
    }


    #btnMenu.right {
        left: 3vw;
    }

    #btnMenu.left {
        right: 3vw;
    }

    #btnVolume.left {
        left: 3vw;
    }

    #btnVolume.right {
        right: 3vw;
    }
}

@media screen and (orientation:portrait) and (max-aspect-ratio: 10/16) {
    .ui {
        bottom: 36vw;
    }
}