#start, #games, #settings, #game_mex, #rules, #game_6cups, #rules_6cups, #game_roulette, #rules_roulette, 
#game_focus, #rules_focus, #game_freedice, #rules_freedice {
    display:none
}
#start:target, #games:target, #settings:target, #game_mex:target, #rules:target, #game_6cups:target, 
#rules_6cups:target, #game_roulette:target, #rules_roulette:target, #game_focus:target, #rules_focus:target, #game_freedice:target, #rules_freedice:target {
    display:block
}
#start {display: block}

@font-face {
    font-family: COMICSANSMS;
    src: url(../fonts/comici.ttf);
  }
@font-face {
font-family: COMICSANSMS2;
src: url(../fonts/comicz.ttf);
}

* {
    position: relative;
    box-sizing: border-box;
    font-family: COMICSANSMS, 'Comic Sans MS', cursive, sans-serif;
    color: black;
    overscroll-behavior: none;
}

h1, h2, h3, h4 {
    font-family: COMICSANSMS2;
    text-align: center;
    margin: 0;
    color: rgba(245,127,23,1);
}
h1 {
    font-size: 3vh;
    text-shadow: 0 0 2vmin black;
}
h2 {
    font-size: 3vh;
}
h3 {
    font-size: 2vh;
    margin-top: 0;
}
h4 {
    font-size: 2vh;
    margin-top: 0;
    text-align: left;
}
h5, h6 {
    font-family: COMICSANSMS2;
    text-align: center;
    margin: 0;
}
h5 {
    font-size: 2vh;
    color: white;
}
h6 {
    font-size: 1.5vh;
}
p {
    margin: 0;
    font-size: 2vh;
    text-align: center;
    color: white;
}
.link_symbol {
    font-family: COMICSANSMS2;
    text-align: center;
    margin: 0;
    margin-top: 3%;
    color: white;
    font-size: 3vh;
    text-decoration: none;
}
.text_header_wide, .button_settings_wide {display: none}
#text_intro {
    animation: blink 1s ease-in-out infinite;
    -webkit-animation: blink 1s ease-in-out infinite;
    -ms-animation: blink 1s ease-in-out infinite;
    -moz-animation: blink 1s ease-in-out infinite;
    -o-animation: blink 1s ease-in-out infinite;
}
@keyframes blink{
    0%{opacity: 0}
    100%{opacity: 1}
}
.text_skiplogin {
    text-decoration: underline;
    color: white;
}
#text_button_deal_mex, #text_button_roll_mex, #text_rolls, #text_button_focus, #text_turns, #text_button_roll_freedice, #text_rolls_freedice {
    font-size: 2vh;
    color: white;
}
#text_button_deal_mex, #text_button_roll_mex, #text_button_focus, #text_button_roll_freedice {
    bottom: 1vh;
}

#text_button_deal_mex {
    color: rgba(245,127,23,1);
}
#text_slider, #text_slider_freedice {
    color: white;
    font-size: 3vh;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: rgba(26,35,126 ,1);
}
.container_page, .container_page2, .container_page3 {
    position: absolute;
    width: 95vw;
    height: 95vh;
    margin: 2.5vh 2.5vw 2.5vh 2.5vw;
    padding: 1%;
    border-radius: 5vmin;
    overflow: auto; /* Enable scroll if needed */
}
.container_page {background-image: linear-gradient(rgba(33,150,243 ,1), rgba(13,71,161 ,1))}
.container_page2 {background-image: linear-gradient(rgba(103,58,183 ,1), rgba(49,27,146 ,1))}
.container_page3 {background-image: linear-gradient(rgba(76,175,80 ,1), rgba(27,94,32 ,1))}

.container, .container_5, .container_10, .container_15, .container_20, .container_30, .container_35, .container_45, .container_70, .container_75, .container_80,
.container_90 {
    float: left;
    width: 100%;
    padding: 1%;
}
.container_5 {height: 5%}
.container_10 {height: 10%}
.container_15 {height: 15%}
.container_20 {height: 20%}
.container_30 {height: 30%}
.container_35 {height: 35%}
.container_45 {height: 45%}
.container_70 {height: 70%}
.container_75 {height: 75%}
.container_80 {height: 80%}
.container_90 {height: 90%}


.container_menu_1, .container_menu_2{
    float: left;
    width: 60%;
    height: 50%;
}
.container_menu_2{width: 100%}

#container_button_focus {
    margin: 5%;
    height: 80%;
    width: 90%;
    background-color: rgba(13,71,161 ,1);
    border-radius: 5vmin;
    border-style: inset;
}
#container_game_roulette {
    background-image: url(../images/cup_full.png);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 25%;
}

#container_freedice {
    width: 90%;
    margin-left: 5%;
    padding: 5%;
    background-color: rgba(13,71,161 ,1);
    border-radius: 5vmin;
    border-style: inset;
}

hr {
    position: absolute;
    bottom: 0;
    width: 100%;
    border: none;
    height: 0.5vmin;
    color: rgba(245,127,23,1);
    background-image: linear-gradient(to right, rgba(245,127,23,0), rgba(245,127,23,1), rgba(245,127,23,0));
}


input[type=range] {
    appearance: none;  /* Override default CSS styles */
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    width: 100%;
    height: 8vmin;
    border-radius: 4vmin;
    border-style: inset;
    background-color: rgba(13,71,161 ,1);
    outline: none;
    z-index: 4;
}
.slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    width: 8vmin;
    height: 8vmin;
    border-radius: 4vmin;
    background-image: linear-gradient(rgba(255,235,59,1), rgba(245,127,23,1));
    border: 0.5vmin solid black;
    box-shadow: 0 0 4vmin 0 rgba(255,235,59,1);
}
#slider_playercount{
    transform: rotate(89.9deg);
    transform-origin: left;
    left: 50%;
    width: 55vh;
}
#slider_rolltime{
    width: 80%;
}


/* Toggle button */
input[type=checkbox] {
    appearance: none;  /* Override default CSS styles */
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    width: 80%;
    height: 8vmin;
    display: inline-block;
    border-radius: 4vmin;
    border-style: inset;
    outline: none;
    background-color: rgba(13,71,161 ,1);
}
input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    left: 50%;
    width: 7vmin;
    height: 7vmin;
    border-radius: 50%;
    background-image: linear-gradient(rgba(255,235,59,1), rgba(245,127,23,1));
    border: 0.5vmin solid black;
    box-shadow: 0 0 4vmin 0 rgba(255,235,59,1);
    }
input[type=checkbox]:checked {
    background-color: rgba(13,71,161 ,1);
}
input[type=checkbox]:checked:before {
    left: 0%;
}

.table_row {
    height: 8.5%;
}
.table_cell1, .table_cell2, .table_cell3 {
    float: left;
    padding: 0%; 
    border-bottom: 0.5vmin solid rgba(245,127,23,1);
    font-size: 2vh;
}
.table_cell2, .table_cell3 {
    text-align: center;
}
.table_cell1 {width: 50%; height: 100%}
.table_cell2 {width: 25%; height: 100%}
.table_cell3 {width: 50%; height: 100%}
#cell_top1, #cell_top2, #cell_top3, #cell_top4, #cell_top5, #cell_top6, #cell_top7, #cell_top8, #cell_top9, #cell_top10 { 
    color: rgba(245,127,23,1);
}

.table_cell4, .table_cell5, .table_cell6, .table_cell7 ,.table_cell8 {
    float:left;
    height: 100%;
} 
.table_cell4 {width: 100%; height: 20%}
.table_cell5 {width: 75%}
.table_cell6 {width: 50%; height: 10%}
.table_cell7 {width: 25%; height: 10%}
.table_cell8 {width: 33%}
#container_slider_playercount {height: 100%; overflow: hidden}

input[type='text'], input[type='email'], input[type='password'] {
    float: left;
    width: 100%;
    height: 8%;
    margin-top: 2%;
    margin-left: 0;
    font-size: 2.5vh;
    text-align: center;
    color: white;
    background-color: rgba(13,71,161 ,1);
    border: 0.5vmin solid white;
    border-style: inset;
    border-radius: 2vmin;
}
input[type='text']:focus, input[type='email']:focus, input[type='password']:focus {
    border-color: rgba(245,127,23,1);
    outline: none;
 }
input[type='text']:disabled {
    color: grey;
    border-color: rgba(204,51,51,1);
    outline: none;
 }
::placeholder {color: grey}
#input_player3, #input_player4, #input_player5, #input_player6, #input_player7, #input_player8, #input_player9, #input_player10 {
    visibility: hidden;
} 

.image_6cups {
    float:left;
    width: 10.66%;
    margin-left: 3%;
    margin-right: 3%;
    height: 30%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../images/cup_empty.png);
    border: none;
}
.text_image_6cups {
    font-family: COMICSANSMS2;
    text-align: center;
    margin-top: 80%;
    color: white;
    font-size: 3vh;
}

button, input[type='submit'] {
    font-family: COMICSANSMS2;
    float: left;
    width: 100%;
    padding: 0;
    font-size: 3.5vh;
    font-weight: bolder;
    background-color: transparent;
    background-image: linear-gradient(rgba(33,150,243 ,1), rgba(13,71,161 ,1));
    z-index: 2;
    border: 0.5vmin solid black;
    border-radius: 4vmin;
    border-style: outset;
}
.button_modal {
    padding: 2%;
    margin: 1%;
}
.button_skiplogin {
    width: 22.5%;
    margin-top: 4%;
}
#button_login, #button_signup, .button_games, .button_orange, .button_roulette, .button_roulette2 {
    background-image: linear-gradient(rgba(255,235,59,1), rgba(245,127,23,1));
    box-shadow: 0 0 4vmin 0 rgba(255,235,59,1);
}
#button_login, #button_signup, .button_games {
    height: 16%;
    margin-top: 4%;
}
#button_login, #button_signup {
    width: 72.5%;
    margin-right: 5%;
}
.button_menu {
    width: 20%;
    background-color: transparent;
    border-radius: 2vmin;
    font-size: 2.5vh;
    color: white;
}
.button_roulette {
    width: 20%;
    height: 15%;
    margin: 2.5%;
    font-size: 2.5vh;
}
#r5, #r7, #r9 {
    margin-right: 52.5%;
}
#button_start, #button_freedice {
    width: 72.5%;
    margin-right: 5%;
    height: 100%;
}
#button_reload, #button_reload_freedice {
    width: 22.5%;
    height: 100%;
}
#button_roll, #button_deal, #button_6cups, #button_focus, #button_freedice, #button_reload_freedice {
    height: 100%;
    border-radius: 4vmin;
    border-width: 1vmin;
    border-color: white;
    background-color: rgba(255,255,255,0.3);
    background-image: none;
    color: white;
}
#button_deal {
    width: 30%;
    border-radius: 4vmin 0 0 4vmin;
    border-right-width: 0.1vmin;
    border-color: rgba(245,127,23,1);
    background-color: rgba(245,127,23,0.3);
    color: rgba(245,127,23,1);
}
#button_roll {
    width: 70%;
    border-radius: 0 4vmin 4vmin 0;
    border-left-width: 0.1vmin;
}
#button_focus {
    width: 100%;
    height: 100%;
    padding: 0;
}
#button_restart_yes, #button_restart_no {
    display: none;
}
button:disabled {
    opacity: 38%;
    box-shadow: none;
}

#image_roulette {
    float:left;
    height: 98%;
    width: 98%;
    margin: auto;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-image: url(../images/cup_full.png);
}
#image_loser {
    width: 100%;
}
#button_focusclicked {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmin;
    height: 10vmin;
    border-radius: 50%;
    border: 0.5vmin solid black;
    background-image: linear-gradient(rgba(255,235,59,1), rgba(245,127,23,1));
    box-shadow: 0 0 4vmin 0 rgba(255,235,59,1);
    z-index: 7;
}
#button_introclicked, #button_shootoutclicked, #button_loser, #button_warningclicked {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 7;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    padding-top: 30%; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    z-index: 5;
}
.modal-content {
    background-image: linear-gradient(rgba(33,150,243 ,1), rgba(13,71,161 ,1));
    padding: 1%;
    border: 0.5vmin solid #121212;
    border-radius: 5vmin;
    width: 95vw;
    margin: 2.5vh 2.5vw 2.5vh 2.5vw;
    overflow: auto;
    z-index: 6;
}
#window_loser {
    padding: 0;
    background-color: rgba(0,0,0,0.8);
}
#text_loser {
    top: 50%;
    margin-top: -7.5vh;
    font-size: 5vh;
}


.cubespinner_intro {
    float: left;
    animation-timing-function: linear; -webkit-animation-timing-function: linear; -ms-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear;
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d;
    transform-origin: 10vmax 10vmax 0; -webkit-transform-origin: 10vmax 10vmax 0; -ms-transform-origin: 10vmax 10vmax 0; -moz-transform-origin: 10vmax 10vmax 0; -o-transform-origin: 10vmax 10vmax 0;
    animation: spincube_intro 6s infinite; -webkit-animation: spincube_intro 6s infinite; -ms-animation: spincube_intro 6s infinite; -moz-animation: spincube_intro 6s infinite; -o-animation: spincube_intro 6s infinite;
    margin-top: 20vh;
    bottom: 10vmax;
    margin-left: 50%;
    right: 10vmax;
    margin-right: 50%;
    padding-bottom: 20vh;
}
@keyframes spincube_intro {
    0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {transform: rotateY(-89.9deg)}
    33% {transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    50% {transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {transform: rotateY(-269.9deg) rotateX(89.9deg)}
    83% {transform: rotateX(89.9deg)}
    100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-webkit-keyframes spincube_intro {
    0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-webkit-transform: rotateY(-89.9deg)}
    33% {-webkit-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    50% {-webkit-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-webkit-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    83% {-webkit-transform: rotateX(89.9deg)}
    100% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-ms-keyframes spincube_intro {
    0% {-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-ms-transform: rotateY(-89.9deg)}
    33% {-ms-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    50% {-ms-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-ms-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    83% {-ms-transform: rotateX(89.9deg)}
    100% {-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-moz-keyframes spincube_intro {
    0% {-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-moz-transform: rotateY(-89.9deg)}
    33% {-moz-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    50% {-moz-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-moz-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    83% {-moz-transform: rotateX(89.9deg)}
    100% {-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-o-keyframes spincube_intro {
    0% {-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-o-transform: rotateY(-89.9deg)}
    33% {-o-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    50% {-o-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-o-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    83% {-o-transform: rotateX(89.9deg)}
    100% {-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
.face1_intro, .face2_intro, .face3_intro, .face4_intro, .face5_intro, .face6_intro {
    position: absolute;
    width: 20vmax;
    height: 20vmax;
    border: 0.5vmin solid grey;
    background: grey;
    text-align: center;
    background-size: contain;
    background-repeat: repeat;
}
.face1_intro {
    transform: translateZ(10vmax);
    -webkit-transform: translateZ(10vmax);
    -ms-transform: translateZ(10vmax);
    -moz-transform: translateZ(10vmax);
    -o-transform: translateZ(10vmax);
    background-image: url(../icons/icon.png);
}
.face2_intro {
    transform: rotateX(-89.9deg) translateZ(10vmax);
    -webkit-transform: rotateX(-89.9deg) translateZ(10vmax);
    -ms-transform: rotateX(-89.9deg) translateZ(10vmax);
    -moz-transform: rotateX(-89.9deg) translateZ(10vmax);
    -o-transform: rotateX(-89.9deg) translateZ(10vmax);
    background-image: url(../images/mex.png);
}
.face3_intro {
    transform: rotateY(89.9deg) translateZ(10vmax);
    -webkit-transform: rotateY(89.9deg) translateZ(10vmax);
    -ms-transform: rotateY(89.9deg) translateZ(10vmax);
    -moz-transform: rotateY(89.9deg) translateZ(10vmax);
    -o-transform: rotateY(89.9deg) translateZ(10vmax);
    background-image: url(../images/6cups.png);
}
.face4_intro {
    transform: rotateY(-89.9deg) rotateZ(89.9deg) translateZ(10vmax); 
    -webkit-transform: rotateY(-89.9deg) rotateZ(89.9deg) translateZ(10vmax);
    -ms-transform: rotateY(-89.9deg) rotateZ(89.9deg) translateZ(10vmax);
    -moz-transform: rotateY(-89.9deg) rotateZ(89.9deg) translateZ(10vmax);
    -o-transform: rotateY(-89.9deg) rotateZ(89.9deg) translateZ(10vmax);
    background-image: url(../images/6cups.png);
}
.face5_intro {
    transform: rotateY(89.9deg) rotateX(89.9deg) translateZ(10vmax);
    -webkit-transform: rotateY(89.9deg) rotateX(89.9deg) translateZ(10vmax);
    -ms-transform: rotateY(89.9deg) rotateX(89.9deg) translateZ(10vmax);
    -moz-transform: rotateY(89.9deg) rotateX(89.9deg) translateZ(10vmax);
    -o-transform: rotateY(89.9deg) rotateX(89.9deg) translateZ(10vmax);
    background-image: url(../images/mex.png);
}
.face6_intro {
    transform: rotateY(180deg) rotateZ(89.9deg) translateZ(10vmax);
    -webkit-transform: rotateY(180deg) rotateZ(89.9deg) translateZ(10vmax);
    -ms-transform: rotateY(180deg) rotateZ(89.9deg) translateZ(10vmax);
    -moz-transform: rotateY(180deg) rotateZ(89.9deg) translateZ(10vmax);
    -o-transform: rotateY(180deg) rotateZ(89.9deg) translateZ(10vmax);
    background-image: url(../icons/icon.png);
}



.cubespinner, .cubespinner_roll1, .cubespinner_roll2, .cubespinner_roll3, .cubespinner_roll4, .cubespinner_roll5,.cubespinner_roll6, 
.cubespinner_1, .cubespinner_2, .cubespinner_3, .cubespinner_4, .cubespinner_5, .cubespinner_6 {
    float: left;
    animation-timing-function: linear; -webkit-animation-timing-function: linear; -ms-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear;
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d;
    transform-origin: 10vw 10vw 0; -webkit-transform-origin: 10vw 10vw 0; -ms-transform-origin: 10vw 10vw 0; -moz-transform-origin: 10vw 10vw 0; -o-transform-origin: 10vw 10vw 0;
}
#dice_mex1 {
    margin-top: 10%;
    margin-left: 15%;
    pointer-events: none;
}
#dice_mex2 {
    float: right;
    margin-top: 10%;
    right: 20vw;
    margin-right: 15%;
    pointer-events: none;
}
#dice_6cups {
    margin-top: 10%;
    bottom: 0;
    margin-left: 50%;
    right: 10vw;
}
#dice_free1, #dice_free3, #dice_free5 {
    margin-left: 50%;
    right: 30%;
}
#dice_free2, #dice_free4, #dice_free6 {
    margin-left: 50%;
    left: 10%;
}
.cubespinner_roll1, .cubespinner_roll4 {animation: spincube_roll1 2s 3; -webkit-animation: spincube_roll1 2s 3; -ms-animation: spincube_roll1 2s 3; -moz-animation: spincube_roll1 2s 3; -o-animation: spincube_roll1 2s 3}
@keyframes spincube_roll1 {
    0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {transform: rotateY(-89.9deg)}
    33% {transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    50% {transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {transform: rotateY(-269.9deg) rotateX(89.9deg)}
    83% {transform: rotateX(89.9deg)}
    100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-webkit-keyframes spincube_roll1 {
    0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-webkit-transform: rotateY(-89.9deg)}
    33% {-webkit-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    50% {-webkit-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-webkit-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    83% {-webkit-transform: rotateX(89.9deg)}
    100% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-ms-keyframes spincube_roll1 {
    0% {-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-ms-transform: rotateY(-89.9deg)}
    33% {-ms-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    50% {-ms-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-ms-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    83% {-ms-transform: rotateX(89.9deg)}
    100% {-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-moz-keyframes spincube_roll1 {
    0% {-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-moz-transform: rotateY(-89.9deg)}
    33% {-moz-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    50% {-moz-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-moz-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    83% {-moz-transform: rotateX(89.9deg)}
    100% {-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-o-keyframes spincube_roll1 {
    0% {-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-o-transform: rotateY(-89.9deg)}
    33% {-o-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    50% {-o-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-o-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    83% {-o-transform: rotateX(89.9deg)}
    100% {-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
.cubespinner_roll2, .cubespinner_roll5 {animation: spincube_roll2 2s 3; -webkit-animation: spincube_roll2 2s 3; -ms-animation: spincube_roll2 2s 3; -moz-animation: spincube_roll2 2s 3; -o-animation: spincube_roll2 2s 3}
@keyframes spincube_roll2 {
    0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {transform: rotateX(89.9deg)}
    33% {transform: rotateY(-269.9deg) rotateX(89.9deg)}
    50% {transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    83% {transform: rotateY(-89.9deg)}
    100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-webkit-keyframes spincube_roll2 {
    0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-webkit-transform: rotateX(89.9deg)}
    33% {-webkit-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    50% {-webkit-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-webkit-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    83% {-webkit-transform: rotateY(-89.9deg)}
    100% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-ms-keyframes spincube_roll2 {
    0% {-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-ms-transform: rotateX(89.9deg)}
    33% {-ms-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    50% {-ms-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-ms-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    83% {-ms-transform: rotateY(-89.9deg)}
    100% {-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-moz-keyframes spincube_roll2 {
    0% {-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-moz-transform: rotateX(89.9deg)}
    33% {-moz-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    50% {-moz-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-moz-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    83% {-moz-transform: rotateY(-89.9deg)}
    100% {-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-o-keyframes spincube_roll2 {
    0% {-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    16% {-o-transform: rotateX(89.9deg)}
    33% {-o-transform: rotateY(-269.9deg) rotateX(89.9deg)}
    50% {-o-transform: rotateY(-180deg) rotateZ(89.9deg)}
    66% {-o-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
    83% {-o-transform: rotateY(-89.9deg)}
    100% {-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
.cubespinner_roll3, .cubespinner_roll6 {
    animation: spincube_roll3 2s 3; -webkit-animation: spincube_roll3 2s 3; -ms-animation: spincube_roll3 2s 3; -moz-animation: spincube_roll3 2s 3; -o-animation: spincube_roll3 2s 3}
@keyframes spincube_roll3 {
    0% {transform: rotateY(0) rotateX(0)}
    100% {transform: rotateY(-360deg) rotateX(360deg)}
}
@-webkit-keyframes spincube_roll3 {
    0% {-webkit-transform: rotateY(0) rotateX(0)}
    100% {-webkit-transform: rotateY(-360deg) rotateX(360deg)}
}
@-ms-keyframes spincube_roll3 {
    0% {-ms-transform: rotateY(0) rotateX(0)}
    100% {-ms-transform: rotateY(-360deg) rotateX(360deg)}
}
@-moz-keyframes spincube_roll3 {
    0% {-moz-transform: rotateY(0) rotateX(0)}
    100% {-moz-transform: rotateY(-360deg) rotateX(360deg)}
}
@-o-keyframes spincube_roll3 {
    0% {-o-transform: rotateY(0) rotateX(0)}
    100% {-o-transform: rotateY(-360deg) rotateX(360deg)}
}

.cubespinner_1 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    animation: spincube_1 0.5s 1; -webkit-animation: spincube_1 0.5s 1;
}
@keyframes spincube_1 {
    0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
@-webkit-keyframes spincube_1 {
    0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
}
.cubespinner_2 {
    transform: rotateX(89.9deg); -webkit-transform: rotateX(89.9deg); -ms-transform: rotateX(89.9deg); -moz-transform: rotateX(89.9deg); -o-transform: rotateX(89.9deg);
    animation: spincube_2 0.5s 1; -webkit-animation: spincube_2 0.5s 1; -ms-animation: spincube_2 0.5s 1; -moz-animation: spincube_2 0.5s 1; -o-animation: spincube_2 0.5s 1;
}
@keyframes spincube_2 {
    0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {transform: rotateX(89.9deg)}
}
@-webkit-keyframes spincube_2 {
    0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {-webkit-transform: rotateX(89.9deg)}
}
@-ms-keyframes spincube_2 {
    0% {-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {-ms-transform: rotateX(89.9deg)}
}
@-moz-keyframes spincube_2 {
    0% {-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {-moz-transform: rotateX(89.9deg)}
}
@-o-keyframes spincube_2 {
    0% {-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {-o-transform: rotateX(89.9deg)}
}
.cubespinner_3 {
    transform: rotateY(-89.9deg); -webkit-transform: rotateY(-89.9deg);
    animation: spincube_3 0.5s 1; -webkit-animation: spincube_3 0.5s 1;
}
@keyframes spincube_3 {
    0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {transform: rotateY(-89.9deg)}
}
@-webkit-keyframes spincube_3 {
    0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {-webkit-transform: rotateY(-89.9deg)}
}
.cubespinner_4 {
    transform: rotateY(-269.9deg) rotateX(89.9deg); -webkit-transform: rotateY(-269.9deg) rotateX(89.9deg);
    animation: spincube_4 0.5s 1; -webkit-animation: spincube_4 0.5s 1;
}
@keyframes spincube_4 {
    0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {transform: rotateY(-269.9deg) rotateX(89.9deg)}
}
@-webkit-keyframes spincube_4 {
    0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {-webkit-transform: rotateY(-269.9deg) rotateX(89.9deg)}
}
.cubespinner_5 {
    transform: rotateY(-89.9deg) rotateZ(89.9deg); -webkit-transform: rotateY(-89.9deg) rotateZ(89.9deg);
    animation: spincube_5 0.5s 1; -webkit-animation: spincube_5 0.5s 1;
}
@keyframes spincube_5 {
    0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {transform: rotateY(-89.9deg) rotateZ(89.9deg)}
}
@-webkit-keyframes spincube_5 {
    0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {-webkit-transform: rotateY(-89.9deg) rotateZ(89.9deg)}
}
.cubespinner_6 {
    transform: rotateY(-180deg) rotateZ(89.9deg); -webkit-transform: rotateY(-180deg) rotateZ(89.9deg);
    animation: spincube_6 0.5s 1; -webkit-animation: spincube_6 0.5s 1;
}
@keyframes spincube_6 {
    0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {transform: rotateY(-180deg) rotateZ(89.9deg)}
}
@-webkit-keyframes spincube_6 {
    0% {-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
    100% {-webkit-transform: rotateY(-180deg) rotateZ(89.9deg)}
}

.face1, .face2, .face3, .face4, .face5, .face6 {
    position: absolute;
    width: 20vw;
    height: 20vw;
    border: 0.5vmin solid grey;
    background: grey;
    text-align: center;
    background-size: contain;
    background-repeat: repeat;
}
.face1 {transform: translateZ(10vw); -webkit-transform: translateZ(10vw); background-image: url(../images/1.png)}
.face2 {transform: rotateX(-89.9deg) translateZ(10vw); -webkit-transform: rotateX(-89.9deg) translateZ(10vw); -ms-transform: rotateX(-89.9deg) translateZ(10vw); -moz-transform: rotateX(-89.9deg) translateZ(10vw); -o-transform: rotateX(-89.9deg) translateZ(10vw); background-image: url(../images/2.png)}
.face3 {transform: rotateY(89.9deg) translateZ(10vw); -webkit-transform: rotateY(89.9deg) translateZ(10vw); background-image: url(../images/3.png)}
.face4 {transform: rotateY(-89.9deg) rotateZ(89.9deg) translateZ(10vw); -webkit-transform: rotateY(-89.9deg) rotateZ(89.9deg) translateZ(10vw); background-image: url(../images/4.png)}
.face5 {transform: rotateY(89.9deg) rotateX(89.9deg) translateZ(10vw); -webkit-transform: rotateY(89.9deg) rotateX(89.9deg) translateZ(10vw); background-image: url(../images/5.png)}
.face6 {transform: rotateY(180deg) rotateZ(89.9deg) translateZ(10vw); -webkit-transform: rotateY(180deg) rotateZ(89.9deg) translateZ(10vw); background-image: url(../images/6.png)}

#dice_mex1_face1,#dice_mex2_face1 {
    background-image: url(../images/mex.png);
}
#dice_6cups_face1, #dice_6cups_face2, #dice_6cups_face3, #dice_6cups_face4, #dice_6cups_face5, #dice_6cups_face6 {
    background-image: url(../images/6cups.png);
}
#dice_free1_face1 {
    background-image: url(../icons/icon.png);
}

@media screen and (min-width: 1025px), (orientation:landscape) {
    /* FONTS */
    h5 {font-size: 2.5vh}
    p {margin-top: 1vh}
    /* LOGIN */
    #loginpassword {margin-left: 5%}
    /* INTRO */
    .text_header_small, .button_settings_small {display: none}
    .text_header_wide, .button_settings_wide {display: block}
    /* LOGIN */
    #window_login, #window_signup {padding-top: 0;}
    #window_login-content, #window_signup-content {top: 0;}
    /* START */
    input[type='text'], input[type='password'] {width: 47.5%; height: 13%; margin-top: 2%; font-size:3vh}
    #input_player2 {margin-left: 5%}
    #input_player4 {margin-left: 5%}
    #input_player6 {margin-left: 5%}
    #input_player8 {margin-left: 5%}
    #input_player10 {margin-left: 5%}
    #slider_playercount{width: 50vh}
    #text_slider {font-size:4vh}
    /* MENU */
    .container_menu_1, .container_menu_2{width: 35%}
    .button_menu {width: 15%}
        /* GAMES */
    .button_games {width: 47.5%}
    #button_start_6cups {margin-left: 5%}
    #button_start_focus {margin-left: 5%}
    /* MEX */
    #container_scoreboard_mex {width: 50%; height: 75%}
    #container_game_mex {width: 50%; height: 75%}
    /* 6CUPS */
    #container_scoreboard_6cups {width: 50%; height: 75%}
    #container_game_6cups {width: 50%; height: 75%}
    /* ROULETTE */
    #container_scoreboard_roulette {width: 50%; height: 90%}
    #container_game_roulette {width: 50%; height: 90%}
    /* FOCUS */
    #container_scoreboard_focus {width: 50%; height: 90%}
    #container_game_focus {width: 50%; height: 90%}
    /* MODAL */
    .modal-content {top: 0; left: 50%; width: 45vw}
    #text_shot1, #text_shot2 {width: 50%; float: left}
    /* DICE SIZE */
    .cubespinner, .cubespinner_roll1, .cubespinner_roll2, .cubespinner_roll3, .cubespinner_roll4, .cubespinner_roll5,.cubespinner_roll6, 
    .cubespinner_1, .cubespinner_2, .cubespinner_3, .cubespinner_4, .cubespinner_5, .cubespinner_6 {
        transform-origin: 10vh 10vh 0; -webkit-transform-origin: 10vh 10vh 0; -ms-transform-origin: 10vh 10vh 0; -moz-transform-origin: 10vh 10vh 0; -o-transform-origin: 10vh 10vh 0;
    }
    .face1, .face2, .face3, .face4, .face5, .face6 {
        width: 20vh;
        height: 20vh;
    }
    .face1 {transform: translateZ(10vh); -webkit-transform: translateZ(10vh)}
    .face2 {transform: rotateX(-89.9deg) translateZ(10vh); -webkit-transform: rotateX(-89.9deg) translateZ(10vh); -ms-transform: rotateX(-89.9deg) translateZ(10vh); -moz-transform: rotateX(-89.9deg) translateZ(10vh); -o-transform: rotateX(-89.9deg) translateZ(10vh)}
    .face3 {transform: rotateY(89.9deg) translateZ(10vh); -webkit-transform: rotateY(89.9deg) translateZ(10vh)}
    .face4 {transform: rotateY(-89.9deg) rotateZ(89.9deg) translateZ(10vh); -webkit-transform: rotateY(-89.9deg) rotateZ(89.9deg) translateZ(10vh)}
    .face5 {transform: rotateY(89.9deg) rotateX(89.9deg) translateZ(10vh); -webkit-transform: rotateY(89.9deg) rotateX(89.9deg) translateZ(10vh)}
    .face6 {transform: rotateY(180deg) rotateZ(89.9deg) translateZ(10vh); -webkit-transform: rotateY(180deg) rotateZ(89.9deg) translateZ(10vh)}
    #dice_mex1 {
        margin-left: 50%;
        right: 10vh;
    }
    #dice_mex2 {
        margin-top: 0;
        top: 35vh;
        margin-right: 50%;
        right: 10vh;
    }
    #dice_6cups {
        margin-top: 0;
        bottom: 0;
        margin-left: 50%;
        right: 10vh;
    }
    #container_dice_free1, #container_dice_free2, #container_dice_free3 {
        height: 60%;
        width: 33.33%;
    }
    #dice_free1, #dice_free3, #dice_free5 {
        margin-left: 50%;
        right: 10vh;
        margin-top: 0%;
        bottom: 0%;
    }
    #dice_free2, #dice_free4, #dice_free6 {
        margin-left: 50%;
        right: 10vh;
        margin-top: 0%;
        top: 55%;
        left: -10vh;
    }   
}