* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Roboto, Arial, sans-serif;
    height: 100%;
    height: -webkit-fill-available;
    margin: 0;
    color: #FFF;
    background-color: transparent;
    touch-action: manipulation;
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    background-size: contain;
    /* background-position: center;*/
    background-color: #000; 
    overflow: hidden;
}

a {
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.hidden {
    display: none !important;
}

#btnSpinButton-autospinCountText
{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:black; font-size: 34px;
}

/* LOADER ------------------------------------------------------- */
#vlt,
#loading-hint {
    visibility: hidden;
}

.outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    text-align: center;
}

.inner .logo {
    position: relative;
    width: 230px;
    margin: 0px auto;
}

.inner .logo img {
    width: 230px;
}

.inner .logo .default {
    top: 0;
    left: 0;
}

.inner .logo .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    overflow: hidden;
}

.inner img.loader {
    width: 90px;
    height: 90px;
    margin-top: 20px;
}

/* Loading text */
.glow2 {
    padding-bottom: 0px;
    letter-spacing: 5px;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: .8em;
    color: #fff;
}



/* T A P  T O  F U L L S C R E E N ----------------- */
.fs-overlay {
    visibility: hidden;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fs-overlay span {
    font-size: 30px;
    color: #FFF;
    text-align: center;
    padding: 0 20px;
}

.fs-overlay .btn.snd {
    margin-left: 5px;
    margin-right: 5px;
}

.fs-overlay .sound {
    display: flex;
    justify-content: center;
}


/* C O N T R O L S------------------------------------------------------- */

.controls {
     visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

.controls ul.left {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 40%;
    left: 2rem;
    transform: translate(0, -50%);
    list-style-type: none;  
}

.controls ul.right {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 40%;/*40vh;*/
   /* right: 10px;*/
    right: 2rem;
    transform: translate(0, -50%);
    list-style-type: none;
}

/* autostart posun od start*/
.liSpace
{
    height:5vh;/*50px;*/
}
/* Posun Plus Minus */
.liSpace2
{
    height:5vh;/*50px;*/
}

/*
.controls ul.right li {
    padding-top: 1rem;
}
*/
.controls ul li {
    display: flex;

}

a.btn {
    color: #FFF;
    text-align: center;
    text-decoration: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.8s;
    transform: scale(0.93);
}
a.btn:active {
    transform: scale(0.83);
    opacity: 0.8;
}
a.btn.btn-disabled {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
    /* invert(13%) sepia(94%) saturate(7466%) hue-rotate(0deg) brightness(94%) contrast(115%);*/
}
a.btn.btn-hidden {
    pointer-events: none;
    opacity: 0.5;
    display: none;
}

.controls #btnSound>#sndDisabledIcon {
    display: none;
}
#menu {
    list-style: none;
}

/* hranate */
  a.btn-wd {
    scale:60%;
}  

/* L A N D S C A P E -------------------------------------------------------------------------- */
@media (orientation: landscape) {   
    a.btn {
        width:  10vw;
        height: 10vw;
    }
    
    a img {
        width: 10vw;
        height: 10vw;
        
    
        position: absolute;
        left: 0%;
        right: 0%;
    }

    .controls .more a.btn
    {
        width:  7vw;
       
    }
    .controls .more2 a.btn
    {
        width:  7vw;
       
    }

    /* Plus,minus,autostart*/
    a.btn_circle_small
    {
        scale:70%;
    }
     /* a.btn-wd {
        width:  10vw;
        height: 10vw;
        scale:70%;
    }  */

    /* btnMore */
    #menu {
        position: absolute;
         bottom: -2rem;
        margin: 2rem;
        list-style: none;
    }

    /* div more */
    .controls .more {
        visibility: hidden;
        position: absolute;       
        list-style: none;        
    }
    /*more*/
    .controls .more ul.list {
        display: flex;
        position: fixed;     
        justify-content: left;       
        z-index: 10; 
        bottom: -2rem;
        margin: 2rem;      
         left:7.5vw;      
        transform: none;
       
    }  
      /* Autospin count */
      .controls .more2 {
        /* visibility: hidden; */
        position: absolute;       
        list-style: none;        
    }
    .more2  li {           
        width:7vw;
     }     
    .controls .more2 ul.list {
        display: flex;
        position: fixed;     
        justify-content: left;       
        z-index: 10; 
        /* top: -2rem;
        margin: 2rem;       */
         right:8.0vw;       
        /* transform: none; */
        transform: translate(-5%, 0%);              
    }      
    /* .menu2 {
        position: absolute;
         bottom: -2rem;
        margin: 2rem;
        list-style: none;
    } */
    /* .controls .more ul.list li {         
    }    */
}
/* P O R T R A I T -------------------------------------------------------------------------- */
@media (orientation: portrait) {
    #vlt {
        height: auto !important;
    }   
    .controls {
        display: flex;
        flex-direction: column;     
        justify-content: center;
        align-items: center;
        top:30%;
    }  
    /* autostart posun od start*/
    .liSpace 
    {
        height:0px;
    }     
    #btnAutostart
    {
        scale:70%;
        /* position: fixed;
        top:100%;
        left:40vw; */
    }    
    #btnSpinButton
    {
        scale:120%;
    }

    a.btn_circle_small
    {
        /* scale:70%; */
    }
    /*plus posun od minus */
    .liSpace2 
    {
      width:calc(28vh);/*22vh*/
        
    }
    .controls ul.left {        
         flex-direction: row-reverse;
        position: relative;       
        top:calc(140vh - 135%);
        left: 0;
        justify-content:center;
        transform: translate(0%, 0%); 
        scale:60%;
    }
    a.btn {
        width: 10vh;
        height:10vh;
    }    
    a img {
        width: 10vh;
        height: 10vh;/*100px;*/            
        position: absolute;
        left: 0%;
        right: 0%;
    }
    /* more menu tl. */
    a.btn-wd {
        width:  7.5vh;
        height: 7.5vh;
    } 


    /* spin + autostart */
    .controls ul.right {
        flex-direction: column;
        position: relative;       
        top:calc(120vh - 135%);         
        right: 0;
        justify-content: center;
        transform: translate(0%, 0%);
    }

    /* btnMore */
    #menu {
        display: flex;
        flex-direction: row-reverse;
        position: relative;              
         top:calc(120vh - 135%);  
        left: 0;
        justify-content:center;
        transform: translate(0%, 0%);         
    }

    /* div more */
    .controls .more {
        visibility: hidden;
        position: absolute;
        list-style: none;               
        top:calc(120vh - 82%);  
        left: 0;
        justify-content:center;
        transform: translate(0%, -60%);       
    }


    /*
    .controls .more2 {      
        position: absolute;       
        list-style: none;        
    } 
    .controls .more2 ul.list {      
        flex-direction: row-reverse;
        position: fixed;     
        justify-content:left;       
        z-index: 10; 
         top: -2rem; 
        margin: 2rem;            
         transform: translate(200%, -60%);                
    }  
         */
        /*AutoSpin count*/
         .controls .more2 {      
            position: absolute;       
            list-style: none;        
        }    
        .more2  li {           
           margin:-.3rem;
        }  
        .controls .more2 ul.list {
            
            display: flex;
            position: fixed;     
            justify-content: center;       
            z-index: 10;          
              left:0;        
              transform: translate(-36%, -90%);       
           
        }  
    
   
    @media (min-aspect-ratio: 7/12)
    {      
         #btnAutostart
        {     
        position: relative;
        top: 100%;
        left: 40vW;
        }    
        
        .controls .more2 {      
            position: relative;       
            list-style: none;  
            top:80%;      
        } 
        .controls .more2 ul.list {      
            flex-direction: column;
            position: fixed;     
            justify-content:left;       
            z-index: 10; 
            left:40vW;          
              transform: translate(20%, -91%);  
        }  
    }
         /* CSS specific to iOS devices */ 
         @supports (-webkit-touch-callout: none) { 
            .controls ul.left {top:14%}
            .controls ul.right {top:-8%}            
            .controls .more {top:25%} 
            .controls .more2 {top:25%} 
            #menu {             
              top:-20%; 
              left:-41vW;
            }
		 #btnAutostart
		        {     
		        position: relative;
		        top: 95%;
		        left: 40vW;
		        }     
           } 

    /* @media (min-aspect-ratio: 7/11)
    {      
        .svgColor
        {     
        opacity: 50%;       
        }         
    } */
}




/* SVG ----------------------------------------------------------------- 8/
/* stin svg img */
.svg_shadow {
    filter:
        drop-shadow(-1px -1px 1px #00000055) drop-shadow(1px -1px 1px #00000055) drop-shadow(1px 1px 1px #00000055) drop-shadow(-1px 1px 1px #00000055)
}

/* svg img frame */
.svgColorTop {
    filter:        
        drop-shadow(-1px -1px 1px #000000FF) drop-shadow(1px -1px 1px #000000FF) drop-shadow(1px 1px 1px #000000FF) drop-shadow(-1px 1px 1px #000000FF)
}

/* svg img background */
.svgColor {
    filter: invert(12%) sepia(63%) saturate(234%) hue-rotate(146deg) brightness(87%) contrast(156%);
}

/* NEW_GUI - color pro tlacitka ve hre v canvas odpovidajici barve nastavene v svgColor,svgColorTop hra(statefullTextButton2) si to zde precte */
/* pouziti v statefullTextButton2 - potrebuje v index2.html fake button pro nacteni CSS s id gameBtnColor a gameBtnColorTop */
/* tlacitka jsou seda v Phaser2.png klic (btnRectBck,btnRectBckTop,btnSqBck,btnSqTop)*/
.gameBtnColor {
    color:#9FFCFA;
}
.gameBtnColorTop {
    color:#FFFFFF;
}






























/*
    .controls ul.rightAutoSpinCount {
        bottom: 0;
        right: auto;
        top: auto;
        left: 50%;
        transform: translate(-50%, -80%);
    }

    .controls ul.rightAutoSpin {
        bottom: 0;
        right: auto;
        top: auto;
        left: 50%;
        transform: translate(-50%, -300%);
    }
  */  
/*
            @supports (-webkit-touch-callout: none) {
                .controls ul.left {              
                        bottom: 5%;
                    }	   
            }

*/

/* Text pro zobrazeni info MAX SAZKA */
/*
.spanStakeMax {
    padding-bottom: 0px;
    letter-spacing: 2px;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: .9em;
    color: #fff;
    text-align: center;
}
*/


/*
.glow4 {
    padding-bottom: 5px;
    letter-spacing: 5px;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: .9em;
    color: #fff;
    text-shadow:
        -0.2rem -0.2rem 1rem #009DE0,
        0.2rem 0.2rem 1rem #009DE0,
        0 0 2rem #009DE0,
        0 0 4rem #009DE0,
        0 0 6rem #009DE0,
        0 0 8rem #009DE0,
        0 0 10rem #009DE0;
}
*/
/*
.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
*/
/*
.spinner,
.spinner:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}
*/
/*
.spinner {
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: spinner8 1.1s infinite linear;
    animation: spinner8 1.1s infinite linear;
}

@-webkit-keyframes spinner8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
*/
/*
a.btn {
    /* Zruseno - vse bude SVG */
/*
    border: .2rem solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    -webkit-box-shadow: 0px 8px 8px 0px rgb(255, 255, 255, .7) inset;
    -moz-box-shadow: 0px 8px 8px 0px rgb(255, 255, 255, .7) inset;
    box-shadow: 1px 1px 7px 0px rgb(255, 255, 255, .7) inset, -1px -1px 5px 0px #00000055, 1px -1px 5px 0px #00000055, 1px 1px 5px 0px #00000055, -1px 1px 5px 0px #00000055;

    text-shadow: -1px -1px 2px #00000055,
        1px -1px 2px #00000055,
        -1px 1px 2px #00000055,
        1px 1px 2px #00000055;

    margin-top: 5px;
    margin-bottom: 5px;
    background: rgba(0, 0, 0, 0.3);
    */

/*
a.btn svg {
    padding: 20px;
}
*/
/*
.controls a.btn-lg span#btnSpinButton-centerText {
    display: none;
}

.controls a.btn-lg span#btnSpinButton-autospinText {
    font-size: 12px;
    width: 100px;
    color: #ffffffa8;
    margin-top: 10px;
    margin-bottom: -10px;
}
*/
/* #wtf1 {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px red solid;
}

.wtf2 {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px red solid;
} */

/* Volba poctu autospinu - prozatim zakazano */
.controls ul.rightAutoSpinCount {
    /* position: fixed;
    display: flex;
    flex-direction: column;
    top: 50%;
    right: 10px;
    transform: translate(-252%, -56%);
    list-style-type: none; */
}

.controls ul.rightAutoSpin {
    /* position: fixed;
    display: flex;
    flex-direction: column;
    top: 50%;
    right: 10px;
    transform: translate(-150%, -80%);
    list-style-type: none; */
}

/* ------------------------------------------------------- */

/*
a.btn {
    width: calc(10vh);
    height: calc(10vh);
}

a img {
    width: calc(10vh);
    height: calc(10vh);
    

    position: absolute;
    left: 0%;
    right: 0%;
}
*/

#controls {
    pointer-events: none;
}
#controls a.btn {
    pointer-events: all;
}