/* 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%;
    height: 100%;
    overflow: hidden;
    font-family: 'NotoSans-CondensedMedium';
    -webkit-text-size-adjust: none;
}

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

.scoreboard,
.scoreboard-currency { 
    font-weight: normal; 
}

#casimiOverlayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 10000;
}

#casimiOverlayer .game-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 50%;
    max-height: 50%;
}

#casimiOverlayer .logo {
    position: absolute;
    bottom: 10%;
    left: 50%;
    margin-left: -33px;
    width: 66px;
    height: 16px;
}

#history {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99998;
    background-color: black;
    border: none;
}

#history-close {
    position: absolute;
    bottom: 2vw;
    left: 50vw;
    margin-left: -5vw;
    width: 10vw;
    height: 10vw;
    z-index: 99999;
    background-color: transparent;
    cursor: pointer;
    opacity: 0.80;
}

.background {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.container {
    position: absolute;
    -webkit-box-shadow: 0px 0px 30px 15px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 30px 15px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 30px 15px rgba(0, 0, 0, 1);    
}

.container .canvas {
    width: 100%;
    height: 100%;
}

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

.scoreboard img, 
.scoreboard-currency .none {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.halfleft {
	float: left;
	width: 50%;
	height: 100%;
	text-align: left;	
}

.halfright {
	float: left;
	width: 50%;
	height: 100%;
	text-align: right;
}

.tacenter { text-align: center; }
.taleft { text-align: left; }
.taright { text-align: right; }

.video {
    display: block;
}

.betId {
    color: #cfcfcf;        
}

/* HTML & ALERTS */
.page {
    position: absolute;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 9000;
}

.page .overlayer {
	width: 100%;
	height: 100%;
}

.page .container {
	position: relative;
	display: block;
	margin: 0;
	top: -50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

img.lobby {
    width: 100%;
    height: 100%;	
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;  
    /*
	-webkit-transform: scale(1);
	transform: scale(1);
    */
	-webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

img.lobby:hover {
    /*
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
    */
    -webkit-filter: brightness(0.5);
    filter: brightness(0.5);
}

.center12 {
	top: 50%; 
	left: 50%; 
}

.center22 {
	top: 50%; 
	left: 50%; 	
}

.button5, 
.button20 {
	position: absolute;		
}

.button20
{
	text-align: center;
    vertical-align: middle;
	padding: 0;
}

@media only screen and (max-aspect-ratio: 16/9) {
	.page .container {
		width: 100%;
		height: calc((100vw / 16) * 9);
	}
	
	.page .container .block {
		position: absolute;
		width: 80%;
        height: 80%;		
        top: 10%;
        left: 10%;
    }	
    
	.page .container .menu {
        position: absolute;
        width: 6%;
        height: 80%;
        top: 10%;
        left: 0;
		padding-left: 2%;
		padding-right: 2%;
		float: left;
    }

    .page .container .menu-paginator {
        position: absolute;
        width: 6%;
        height: 80%;
        top: 10%;
        right: 0;
		padding-left: 2%;
		padding-right: 2%;
		float: left;
    }

	.page .container .block .main {
		padding: 0;
        margin: 0;	
        width: 100%;	
        height: 100%;
		float: left;
    }
    
	.page .container .block .main h1,
	.page .container .block .main h2,
	.page .container .block .main p {
		padding: 0;
		margin: 0;
		font-family: NotoSans-CondensedMedium;				
    }
    
	.page .container .block .main h1 { 
		margin-bottom: calc((1.2vw / 16) * 9);
		font-size: calc((4vw / 16) * 9); 
		text-transform: uppercase;
    }
    
	.page .container .block .main h2 { 
		margin-bottom: calc((0.8vw / 16) * 9); 
		font-size: calc((3vw / 16) * 9); 
		text-transform: uppercase;
    }
    
	.page .container .block .main p { 
		margin-bottom: calc((2vw / 16) * 9); 
		font-size: calc((3vw / 16) * 9); 
	}
	
	.page .container .prev,
	.page .container .next	{
		position: absolute;	
		top: 0;
		width: 5%;
		height: 100%;
		text-align: center;
    }
    
	.page .container .prev { 
		left: 0;
    }
    
	.page .container .next { 
		right: 0;
	}
	
	.page .container .prev span,
	.page .container .next span {
		position: relative;
		top: calc(50% - 6vw);
		font-size: 10vw;
	}
	
	.center12 {
		margin-top: -12vw; 
		margin-left: -26vw;
	}

	.center22 {
		margin-top: -12vw; 
		margin-left: 5vw;
	}

	.button5 {
		width: 5vw;
		height: 5vw;
		font-size: 5vw;
	}	
	
	.button20 {
		width: 20vw;
		height: 20vw;	
	}
}	

@media only screen and (min-aspect-ratio: 16/9) {
	.page .container {
		width: calc((100vh / 9) * 16);
		height: 100%;
	}
	
	.page .container .block {
		position: absolute;
		width: 80%;
        height: 80%;		
        top: 10%;
        left: 10%;
    }    

	.page .container .menu {
        position: absolute;
        width: 6%;
        height: 80%;
        top: 10%;
        left: 0;
		padding-left: 2%;
		padding-right: 2%;
		float: left;
    }

    .page .container .menu-paginator {
        position: absolute;
        width: 6%;
        height: 80%;
        top: 10%;
        right: 0;
		padding-left: 2%;
		padding-right: 2%;
		float: left;
    }
    
	.page .container .block .main {
		padding: 0;
        margin: 0;
        width: 100%;
		height: 100%;
		float: left;
    }
    
	.page .container .block .main h1,
	.page .container .block .main h2, 
	.page .container .block .main p {
		padding: 0;
		margin: 0;
		font-family: NotoSans-CondensedMedium;				
    }
    
	.page .container .block .main h1 { 
		margin-bottom: 1.2vh;
		font-size: 4vh; 
		text-transform: uppercase;
    }
    
	.page .container .block .main h2 { 
		margin-bottom: 0.8vh;
		font-size: 3vh; 
		text-transform: uppercase;
    }
    
	.page .container .block .main p { 
        font-size: 3vh; 
		margin-bottom: 2vh;		
	}
		
	.page .container .prev,
	.page .container .next	{
		position: absolute;
		top: 0;
		width: 5%;
		height: 100%;
		text-align: center;
    }
    
	.page .container .prev { 
		left: 0;
    }
    
	.page .container .next { 
		right: 0;
	}
	
	.page .container .prev span,
	.page .container .next span {
		position: relative;
		top: calc(50% - 6vw);
		font-size: 10vw;
	}
	
	.center12 {
		margin-top: calc((-12vh / 9) * 16); 
		margin-left: calc((-26vh / 9) * 16);
	}

	.center22 {
		margin-top: calc((-12vh / 9) * 16); 
		margin-left: calc((5vh / 9) * 16);;
	}

	.button5 {
		width: calc((5vh / 9) * 16);
		height: calc((5vh / 9) * 16);
		font-size: calc((5vh / 9) * 16);
	}
	
	.button20 {
		width: calc((20vh / 9) * 16);
		height: calc((20vh / 9) * 16);
	}
}

canvas {
	width: 100%;
	height: 100%;
}

/* Portrait */
@media only screen and (orientation:portrait) {
    .alert {
        border-radius: 2vw;
        position: absolute;
        width: 60%;
        top: 50%;
        left: 50%;    
        transform: translate(-50%, -50%);
        color: #ffffff;
        font-family: 'NotoSans-CondensedMedium';
    }
    
    .alert-error {
        border: solid 0.25vw #b53c4f;
        background-color: #781e2c;
    }
    
    .alert-info {
        border: solid 0.25vw #575893;
        background-color: #3b2857;
    }
    
    .alert-info-btn-ok {
        border: solid 0.25vw #575893;
        background-color: #3b2857;
    }
    
    .alert-ok {
        height: 40%;
        top: 30%;
        border: solid 0.25vw #00c81c;
        background-color: #00760c;
    }

    .alert-error div.typcn-delete-outline,
    .alert-info div.typcn-delete-outline,
    .alert-info-btn-ok div.typcn-delete-outline,
    .alert-ok div.typcn-delete-outline {
        position: absolute;
        color: #9f9f9f;
        font-size: 3vw;
        cursor: pointer;
        right: 2%;
        margin-top: -0.5vh;
    }
    
    .alert-error div.typcn-info-outline,
    .alert-info div.typcn-info-outline,
    .alert-info-btn-ok div.typcn-star-full-outline,
    .alert-ok div.typcn-star-full-outline {
        display: inline;
        margin-right: 2.5%;
        font-size: 3vw;
    }

    .alert-error div.typcn-info-outline { color: #b53c4f; }
    .alert-info div.typcn-info-outline { color: #575893; }
    .alert-info-btn-ok div.typcn-info-outline { color: #575893; }
    .alert-ok div.typcn-star-full-outline { color: #009f15; }

    .alert .header {
        font-size: 2vw;
        width: 100%;
        display: block;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
    }

    .alert span {	
        margin-top: 3%;
        margin-left: 10%;
        width: 80%;
        text-align: center;
        display: block;
        font-size: 2vw;
        font-weight: 100;
        margin-bottom: 5%;
    }

    .alert .row { font-size: 1.5vw; height: 2.25vw; margin-top: 0.375vw; margin-bottom: 0.375vw; }

    .alert .small-text {
        margin-top: 0.5vw;
        font-size: 1.2vw;
    }

    .alert .smallest-text {
        font-size: 0.75vw;
    }

    .background {
        opacity: 0;
    }

    img.lobby {
        border: solid 1.5vw #323232;  
    }

	.page .container {
		position: absolute;
		top: 0;
        left: 4%;
        width: 92%;
		height: 100%;
        overflow: hidden;
		transform: none;
	}

    .page .container .block {
		position: absolute;
		width: 100%;
        height: 100%;		
        top: 0;
        left: 0;
    }

    .page .container .menu {
		position: fixed;
		top: 0;
        left: 0;
        width: 100%;
		height: 12%;
		transform: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }
    
    .page .container .block .main {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 88%;
    }

    .page .container .block .main p {
        margin-bottom: 1vh;
        font-size: 2vh;
    }

	.button5 {
		width: 40px;
		height: 40px;
	}

	.overlay-1st {
		position: absolute;
		top: calc((100vw / 16) * 9 + 7.5%);
		left: 0;
		width: 100%;
		height: calc((100vw / 16) * 9);
		background-color: black;
		opacity: 0.9;
		display: none;
	}
	
	.overlay-2nd {
		position: absolute;
		top: calc((100vw / 16) * 9 * 2 + 7.5%);
		left: 0;
		width: 100%;
		height: calc(100vh - (100vw / 16) * 9 * 2);
		background-color: black;
		opacity: 0.9;
		display: none;
	}
		
    .scoreboard {
        position: absolute;
        left: 0px;
        top: calc((100vw / 16) * 9);
        width: 100%; 
        height: calc(100vh - (100vw / 16) * 9);
        background-color: black;
    }

    .scoreboard img,
    .scoreboard-currency .none {
        display: none;
    }

    .scoreboard-currency {    
        position: absolute;
        left: 0px;
        top: 0;
        width: 100%;  
    }

    .scoreboard-currency .time-container 
    {
        position: fixed;
        top: 1.5vh;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 1.5vh;
    }

    #creditTitle, #betTitle, #winTitle {  
        position: absolute;   
        top: 0;
        font-size: calc(3.5vw);
        z-index: 10;
        text-align: center;   
    }

    #creditTitle {
        left: 0;
        width: 34%;        
    }

    #winTitle {    
        left: 34%;
        width: 33%;
    }

    #betTitle {
        left: 67%;
        width: 33%;
    }
    

    #creditValue, #betValue, #winValue {  
        position: absolute;   
        top: calc(4vw);
        font-size: calc(4.5vw);
        z-index: 10;
        text-align: center;   
    }

    #creditValue {
        left: 0;
        width: 34%;        
    }

    #winValue {    
        left: 34%;
        width: 33%;
    }
    
    #betValue {
        left: 67%;
        width: 33%;
        direction: rtl;
    }
    
    #creditCurrency, #betCurrency, #winCurrency {
        position: absolute;
        top: calc((100vw / 16) * 9 + 10vw);
        font-size: calc(2.5vw);
        z-index: 10;
        text-align: center;
    }

    #creditCurrency {
        left: 0;
        width: 34%;        
    }

    #winCurrency {    
        left: 34%;
        width: 33%;
    }

    #betCurrency {
        left: 67%;
        width: 33%;
    }    
    
    .btext5 {
        position: absolute;
        width: 100%;
        text-align: center;
        margin-top: 0.25vh;
        font-size: 3vh;
    }

	.btext10 {
        position: absolute;
        width: 100%;
        text-align: center;
        margin-top: 2vh;
        font-size: 4vh;
    }
    
    #fgr {
        position: absolute;
        top: calc(40px + (100vw / 16) * 9 + (100vh - (80px + (100vw / 16) * 9) + 10.5vw) / 2 - 20vh);
        left: 20%;
        width: 60%;
        height: calc((100vw / 16 * 9) * 0.10);
        background-image: url('../assets/images/fgr.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        font-family: 'NotoSans-CondensedBold';
        display: none;
    }

    #fgr .count {
        float: left;
        color: white;
        margin-right: 2%;
        text-align: center;
        width: 36%;
        text-align: right;
    }

    #fgr .title {
        float: left;
        color: black; 
        width: 62%;
        text-align: left;
    }
}

/* Landscape */
@media only screen and (orientation:landscape) {
    .alert {
        border-radius: 2vw;
        position: absolute;
        width: 60%;
        top: 50%;
        left: 50%;    
        transform: translate(-50%, -50%);
        color: #ffffff;
        font-family: 'NotoSans-CondensedMedium';
    }
    
    .alert-error {
        border: solid 0.25vw #b53c4f;
        background-color: #781e2c;
    }
    
    .alert-info {
        border: solid 0.25vw #575893;
        background-color: #3b2857;
    }
    
    .alert-info-btn-ok {
        border: solid 0.25vw #575893;
        background-color: #3b2857;
    }
    
    .alert-ok {
        height: 40%;
        top: 30%;
        border: solid 0.25vw #00c81c;
        background-color: #00760c;
    }

    .alert-error div.typcn-delete-outline,
    .alert-info div.typcn-delete-outline,
    .alert-ok div.typcn-delete-outline,
    .alert-info-btn-ok div.typcn-delete-outline {
        position: absolute;
        color: #9f9f9f;
        font-size: 3vw;
        cursor: pointer;
        right: 2%;
        margin-top: -0.5vh;
    }

    .alert-error div.typcn-info-outline,
    .alert-info div.typcn-info-outline,
    .alert-ok div.typcn-star-full-outline,
    .alert-info-btn-ok div.typcn-star-full-outline {
        display: inline;
        margin-right: 2.5%;
        font-size: 3vw;        
    }

    .alert-error div.typcn-info-outline { color: #b53c4f; }
    .alert-info div.typcn-info-outline { color: #575893; }
    .alert-info-btn-ok div.typcn-info-outline { color: #575893; }
    .alert-ok div.typcn-star-full-outline { color: #009f15; }

    .alert .header {
        font-size: 2vw;
        width: 100%;
        display: block;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
    }

    .alert span {	
        margin-top: 3%;
        margin-left: 10%;
        width: 80%;
        text-align: center;
        display: block;
        font-size: 2vw;
        font-weight: 100;
        margin-bottom: 5%;
    }

    .alert .row { font-size: 1.5vw; height: 2.25vw; margin-top: 0.375vw; margin-bottom: 0.375vw; }

    .alert .small-text {
        margin-top: 0.5vw;
        font-size: 1.2vw;
    }

    .alert .smallest-text {
        font-size: 0.75vw;
    }

    .background {
        opacity: 1;
    }

    img.lobby {
        border: solid 1vh #323232;  
    }

	.overlay-1st {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc((100vh - (100vw / 16) * 9) / 2);
		background-color: black;
		opacity: 0.9;
		display: none;
	}
	
	.overlay-2nd {
		position: absolute;
		top: calc((100vh - (100vw / 16) * 9) / 2 + (100vw / 16) * 9);
		left: 0;
		width: 100%;
		height: calc((100vh - (100vw / 16) * 9) / 2);
		background-color: black;
		opacity: 0.9;
		display: none;
	}
	
	.scoreboard {
		position: absolute;
		bottom: calc(((100vw / 16) * 9) / 30);
		left: 0;
		width: 100%;
        height: calc(((100vw / 16) * 9) / 15);        
	}
    
    .scoreboard-jackpot {
        height: calc(((90vw / 16) * 9) / 15);        
	}

    .scoreboard .block {
        position: absolute;
        top: 0;
        left: 10%;
		width: 80%;
        height: 100%;
        font-family: 'NotoSans-CondensedMedium';
    }		

    .scoreboard .block .blocked {
        float: left;
        height: 100%;
        white-space: nowrap;
        direction: rtl;
    }

	.scoreboard .normal {
        width: 16.66%;
		font-size: calc(((100vw / 16) * 9) / 21);
	}
	
    .scoreboard .normal-jackpot {
		font-size: calc(((90vw / 16) * 9) / 21);
	}

	.scoreboard .small {
        margin-top: calc(((100vw / 16) * 9) / 66);
        width: 15%;
		font-size: calc(((100vw / 16) * 9) / 30);
        margin-right: 1.66%;
	}
    
    .scoreboard .small-jackpot {
        margin-top: calc(((90vw / 16) * 9) / 66);
		font-size: calc(((90vw / 16) * 9) / 30);        
	}

    .scoreboard-currency {
        position: absolute;
		bottom: 0;		
		left: 0;
		width: 100%;
		height: calc(((100vw / 16) * 9) / 30);
        font-family: 'NotoSans-CondensedMedium';
        font-size: calc(((100vw / 16) * 9) / 45);
    }

    .scoreboard-currency .block {        
        float: left;        
        width: 20%;
        margin-top: calc(((100vw / 16) * 9) / 540);
    }

    .scoreboard-currency .block .casimi {        
        margin-right: 10%;
        width: 50%;
    }

    .scoreboard-currency .time-container 
    {
        display: block;
    }

    .scoreboard-currency .block .time {        
        margin-left: 4%;
    }

    .btext5 {
        position: absolute;
        width: 100%;
        text-align: center;
        margin-top: 1%;
        font-size: calc(((100vw / 16) * 9) / 30);
    }

    .btext10 {
        position: absolute;
        width: 100%;
        text-align: center;
    }

    #fgr {
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        height: 5.5%;
        background-image: url('../assets/images/fgr.png');
        background-repeat: no-repeat;
        background-size: 65% 100%;     
        background-position-x: -32.5%;
        font-family: 'NotoSans-CondensedBold';
        display: none;
    }

    #fgr .count {
        float: left;
        color: white;
        width: 12.5%;
        margin-right: 2%;
        text-align: right;
    }

    #fgr .title {
        float: left;
        color: black; 
    }
}

@media only screen and (orientation:landscape) and (min-aspect-ratio: 16/9)
{    
    .alert {
        border-radius: 4vh;
        position: absolute;
        width: 60%;
        top: 50%;
        left: 50%;    
        transform: translate(-50%, -50%);
        color: #ffffff;
        font-family: 'NotoSans-CondensedMedium';
    }
    
    .alert-error {
        border: solid 0.5vh #b53c4f;
        background-color: #781e2c;
    }
    
    .alert-info {
        border: solid 0.5vh #575893;
        background-color: #3b2857;
    }
    
    .alert-info-btn-ok {
        border: solid 0.5vh #575893;
        background-color: #3b2857;
    }
    
    .alert-ok {
        height: 40%;
        top: 30%;
        border: solid 0.5vh #00c81c;
        background-color: #00760c;
    }

    .alert-info div.typcn-delete-outline,
    .alert-error div.typcn-delete-outline,
    .alert-ok div.typcn-delete-outline,
    .alert-info-btn-ok div.typcn-delete-outline {
        position: absolute;
        color: #9f9f9f;
        font-size: 6vh;
        cursor: pointer;
        right: 2%;
        margin-top: -1vh;
    }

    .alert-error div.typcn-info-outline,
    .alert-info div.typcn-info-outline,
    .alert-ok div.typcn-star-full-outline,
    .alert-info-btn-ok div.typcn-star-full-outline {
        display: inline;
        margin-right: 2.5%;
        font-size: 6vh;        
    }

    .alert-error div.typcn-info-outline { color: #b53c4f; }
    .alert-info div.typcn-info-outline { color: #575893; }
    .alert-info-btn-ok div.typcn-star-full-outline { color: #575893; }
    .alert-ok div.typcn-star-full-outline { color: #009f15; }

    .alert .header {
        font-size: 4vh;
        width: 100%;
        display: block;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
    }

    .alert span {
        margin-top: 3%;
        margin-left: 10%;
        width: 80%;
        text-align: center;
        display: block;
        font-size: 4vh;
        font-weight: 100;
        margin-bottom: 5%;
    }

    .alert .row { font-size: 3vh; height: 4.5vh; margin-top: 0.75vh; margin-bottom: 0.75vh; }

    .alert .small-text {
        margin-top: 1vh;
        font-size: 2.4vh;
    }

    .alert .smallest-text {
        font-size: 1.5vh;
    }

    .scoreboard
    {
        bottom: 4.5vh;
        left: 0;
        width: 100%;
        height: 5.5vh;
    }

    .scoreboard-jackpot
    {
        height: 4.95vh;
    }

    .scoreboard .small
    {
        margin-top: 1.25vh;
        font-size: 2.8vh;
    }

    .scoreboard .small-jackpot
    {
        margin-top: 1.125vh;
        font-size: 2.52vh;
    }

    .scoreboard .normal
    {
        margin-top: -0.5vh;
        font-size: 4.5vh;
    } 

    .scoreboard .normal-jackpot
    {
        margin-top: -0.45vh;
        font-size: 4.05vh;
    } 

    .scoreboard-currency
    {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4.5vh;
        font-size: 3.25vh;
    }

    .btext10 {
        position: absolute;
        width: 100%;
        text-align: center;
    }    
}

#jackpotContainer {
    position: absolute;       
    margin: 0; 
    padding: 0;    
    text-align: center;
    font-family: 'NotoSans-CondensedMedium';      
}

.jackpotDisplay {    
    width: 20%;
    height: 100%;    
    margin-left: 1%;
    float: left;    
}

.jackpotDisplay .icon {
    width: 27.5%;
    height: 100%;
    float: left;    
}

.jackpotDisplay .counter {
    width: 65%;
    height: 100%;
    float: left;
    text-align: right;    
}

#jackpotContainer .btnJackpotInfo {
    position: absolute;
    width: 2.5%;
    height: 85%;
    right: 1%;  
    cursor: pointer;
    border: none;
}
.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%;
    }
}
/*!
 * jQuery Box roll slider
 * http://completebaltics.com/blog/jquery-roll-slider/
 * 
 * Copyright (c) 2014 Complete Baltics ltd. Kasparas Skripkauskas
 * Dual licensed under the MIT and GPL licenses.
 */

/*!
 * Slider wrapper style
 */
.boxroll-slider {
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
          
  -webkit-transform-origin: 50% 0%;
     -moz-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
       -o-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
          
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
   
   position: relative;
}

/*!
 * Slide style
 */
.boxroll-slider-item { 
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 1;
  z-index: -1;
  visibility: hidden;
  
  transition: transform 1.0s ease-in-out, opacity 1.0s cubic-bezier(1,-1,0.3,1);
  -webkit-transition: -webkit-transform 1.0s ease-in-out, opacity 10s cubic-bezier(1,-1,0.3,1);
      -moz-transition: -moz-transform 1.0s ease-in-out, opacity 10.0s cubic-bezier(1,-1,0.3,1);
         -ms-transition: -ms-transform 1.0s ease-in-out, opacity 1.0s cubic-bezier(1,-1,0.3,1);
              -o-transition: transform 1.0s ease-in-out, opacity 10.0s cubic-bezier(1,-1,0.3,1);
  
  -webkit-transform: rotateX(-90deg) translate3d( 0px, 50%, 50% );
     -moz-transform: rotateX(-90deg) translate3d( 0px, 50%, 50% );
      -ms-transform: rotateX(-90deg) translate3d( 0px, 50%, 50% );
       -o-transform: rotateX(-90deg) translate3d( 0px, 50%, 50% );
          transform: rotateX(-90deg) translate3d( 0px, 50%, 50% );
}

.animation-jackpot-display {
    animation: blinking 0.4s infinite;
}

@keyframes blinking {
    0% {
        filter: invert(0%);
    }
    50% {
        filter: invert(100%);
    }
    100% {
        filter: invert(0%);
    }
}
#uiLandscape, #uiPortrait {
    display: none;
}

/* BUTTONS */
.ui-button { 
    opacity: 0.65; 
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.ui-button:hover { opacity: 1; }

#btnSpin img, #btnStop img, #btnFF img,
#btnBet img, #btnGamble img,
#btnAutospin img, #btnAutostop img, #btnCollect img {
    width: 100%;
    height: 100%;
}

@media screen and (orientation:landscape) {
    #uiLandscape {
        display: none;
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
    }

    #btnSpin, #btnStop, #btnFF {
        position: absolute;
        width: 9vw;
        height: 9vw;
        top: 50%;
        margin-top: -4.5vw;
        cursor: pointer;
        z-index: 1000;
    }  

    #btnSpin.left, #btnStop.left, #btnFF.left
    {
        left: 1vw;
    }

    #btnSpin.right, #btnStop.right, #btnFF.right
    {
        right: 1vw;
    }

    #btnBet, #btnGamble,
    #btnAutospin, #btnAutostop, #btnCollect,
    #btnMenu, 
    #btnVolume {
        position: absolute;
        width: 6vw;
        height: 6vw;
        cursor: pointer;
        z-index: 1000;
    }
    
    #displayAutostop {   
        position: absolute;
        top: 50%;
        margin-top: 6.1vw;  
        width: 10vw;
        z-index: 1001;
        text-align: center; 
        font-size: 1.2vw;   
        color: white;
        opacity: 0.7;
        pointer-events: none;
    }
    
    #displayAutostop.left { left: 0.5vw; }
    #displayAutostop.right { right: 0.5vw; }

    #btnBet, #btnGamble {
        top: 50%;
        margin-top: -10vw;        
    }    

    #btnAutospin, #btnAutostop, #btnCollect {
        top: 50%;
        margin-top: 4vw;  
    }

    #btnBet.left, #btnGamble.left,
    #btnAutospin.left, #btnCollect.left {
        left: 2.5vw;
    }

    #btnAutostop.left { left: 2.5vw; }

    #btnBet.right, #btnGamble.right,
    #btnAutospin.right, #btnCollect.right {
        right: 2.5vw;
    }

    #btnAutostop.right { right: 2.5vw; }
    
    #btnMenu {
        top: 18%;
        margin-top: -8vw;  
    }

    #btnVolume {
        top: 82%;
        margin-top: 0vw; 
    }

    #btnMenu.right {
        right: 2.5vw;
    }
    
    #btnMenu.left {
        left: 2.5vw;
    }

    #btnVolume.right {
        right: 2.5vw;
    }

    #btnVolume.left {
        left: 2.5vw;
    }
}

@media screen and (orientation:portrait) {
    #uiPortrait {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
    }

    #uiPortrait .casimi {
        position: absolute;
        left: 50%;
        bottom: 2.5%;
        width: 30%;
        margin-left: -15%;        
    }
    
    #btnSpin, #btnStop, #btnFF {
        position: absolute;
        width: 12vh;
        height: 12vh;
        top: calc(40px + (100vw / 16) * 9 + (100vh - (80px + (100vw / 16) * 9) + 10.5vw) / 2 - 6vh);
        left: calc(50% - 6vh);
        cursor: pointer;
        z-index: 1000;
    }  

    #btnBet, #btnGamble,
    #btnAutospin, #btnAutostop, #btnCollect,
    #btnMenu,
    #btnVolume {
        position: absolute;
        width: 8vh;
        height: 8vh;
        cursor: pointer;
        z-index: 1000;
    } 

    #displayAutostop {   
        position: absolute;
        top: calc(40px + (100vw / 16) * 9 + (100vh - (80px + (100vw / 16) * 9) + 10.5vw) / 2 - 1.2vh);;
        width: 10vh;
        z-index: 1001;
        text-align: center; 
        font-size: 1.6vh;   
        color: white;
        opacity: 0.7;
        pointer-events: none;
    }
    
    #displayAutostop.left { left: calc(50% + 4.5vh); }
    #displayAutostop.right { left: calc(50% - 14.5vh); }

    #btnBet, #btnGamble
    {
        top: calc(40px + (100vw / 16) * 9 + (100vh - (80px + (100vw / 16) * 9) + 10.5vw) / 2 - 4vh);        
    } 

    #btnBet.left, #btnGamble.left
    {
        left: calc(50% - 13.5vh);
    }

    #btnBet.right, #btnGamble.right
    {
        left: calc(50% + 5.5vh);
    }

    #btnAutospin, #btnAutostop, #btnCollect {
        top: calc(40px + (100vw / 16) * 9 + (100vh - (80px + (100vw / 16) * 9) + 10.5vw) / 2 - 4vh);
    }

    #btnAutospin.left, #btnCollect.left {
        left: calc(50% + 5.5vh);
    }
    #btnAutostop.left { left: calc(50% + 5.5vh); }

    #btnAutospin.right, #btnCollect.right {
        left: calc(50% - 13.5vh);
    }
    #btnAutostop.right { left: calc(50% - 13.5vh); }

    #btnMenu {
        top: calc(40px + (100vw / 16) * 9 + (100vh - (80px + (100vw / 16) * 9) + 10.5vw) / 2 - 4vh); 
    }

    #btnMenu.right {
        left: 1vh;
    }

    #btnMenu.left {
        right: 1vh;
    }

    #btnVolume {
        top: calc(40px + (100vw / 16) * 9 + (100vh - (80px + (100vw / 16) * 9) + 10.5vw) / 2 - 4vh); 
    }

    #btnVolume.left {
        left: 1vh;
    }

    #btnVolume.right {
        right: 1vh;
    }
}