@font-face {
    font-family: LE_SILENCE_DES_CAFARDS;
    src: url('../fonts/LE_SILENCE_DES_CAFARDS.ttf');
}

@font-face {
    font-family: cabin-regular;
    src: url('../fonts/Cabin-Regular.ttf');
}

@font-face {
    font-family: cabin-italic;
    src: url('../fonts/Cabin-Italic.ttf');
}

@font-face {
    font-family: cabin-bold;
    src: url('../fonts/Cabin-Bold.ttf');
}

@font-face {
    font-family: cabin-bold-italic;
    src: url('../fonts/Cabin-BoldItalic.ttf');
}

@keyframes colorFade {
    from {background-color: #06364B;}
    to {background-color: #0E7DAD;}
}

@keyframes colorOriginal {
    from {background-color: #0E7DAD;}
    to {background-color: #06364B;}    
}

/* The animation code */
@keyframes move_slot_sphere {
    0%   {top: 37%;}
    50%  {top: 60%;}
    100% {top: 37%;}
}

.animate_slot_sphere{
	animation-name: move_slot_sphere;
    animation-duration: 1s;
    animation-timing-function: ease;
}

/* The animation code */
@keyframes move_slot_handler {
    0%   {height: 20%;}
    50%  {height: 0%;}
    100% {height: 20%;}
}

.animate_slot_handler{
	animation-name: move_slot_handler;
    animation-duration: 1s;
    animation-timing-function: ease;
}

/* The animation code */
@keyframes shine {
    0%   {-webkit-filter: drop-shadow(0px 0px 20px yellow);}
    50%  {-webkit-filter: drop-shadow(0px 0px 1px yellow);}
    100% {-webkit-filter: drop-shadow(0px 0px 20px yellow);}
}

/* The animation code */
@keyframes animate_hand {
    0%   {top: 10%;}
    50%  {top: 33%;}
    60%   {left: 16%;}
    70%   {left: 15%;}
    85%   {left: 16%;}
    95%   {left: 15%;}
    100% {left: 15%; top: 10%;}
}

.animate_hand{
	animation-name: animate_hand;
    animation-duration: 1.5s;
    animation-timing-function: linear;
}

/* The animation code */
@keyframes animate_ball {
    0%   {top: 70%;}
    50%  {top: 65%;}
    60%   {left: 16%;}
    70%   {left: 15%;}
    85%   {left: 16%;}
    95%   {left: 15%;}
    100% {left: 15%; top: 45%;}
}

.animate_ball{
	animation-name: animate_ball;
    animation-duration: 0.95s;
    animation-timing-function: linear;
     -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}



*{
	margin:0;
	padding:0;
}

.tab{
    position:absolute;
    width:97%;
    height:83%;
    border-radius:15px;
    display:none;
    overflow:hidden;
    background-size:cover !important;
}

#tab_1{
	display:block;
	background:url("../img/bg_5_1.png");
}

#tab_2{
	background:url("../img/bg_5_2.png");
}

#tab_3{
	background:url("../img/bg_5_3.png");
}

#tab_4{
	background:url("../img/bg_5_4.png");
}

#tab_5{
	background:url("../img/bg_5_5.png");
}

#tab_6{
	background:url("../img/bg_5_6.png");
}

#tab_7{
	background:url("../img/bg_5_7.png");
}

#tab_8{
	background:url("../img/bg_5_8.png");
}

#tab_9{
	background:url("../img/bg_5_9.png");
}

#tab_10{
	background:url("../img/bg_5_10.png");
}
#tab_11{
	background:url("../img/bg_5_11.png");
}

.tab_nav{
	position:absolute;
	bottom:0;
	width:16%;
	height:9.5%;
	left: 42%;
	z-index:1;
}

.tab_nav div{
	display:inline-block;
	float:left;
	height:100%;
}

.btn_next:first-of-type{
	border-radius:10px 10px 0 0;
}

.btn_home:last-of-type{
	border-radius:0 10px 0 0;
}

.btn_home:first-of-type{
	border-radius:10px 10px 0 0;
}



.custom_btn{
	width: 33.3%;
	height:100%;
	background: #EB7F26;
	color:#FFF;
	font-size:3em;
	text-align:center;
	border-bottom:solid 6px #89380F;
	bottom:0;
	position:absolute;
}

.custom_btn:hover{
	cursor:pointer;
	background:#EA9D63;
}

.custom_btn:active{
	transform:scaleY(0.8);
	background:#89380F;
}

.popup{
	width: 100%;
	height: 100%;
	border-radius:15px;
	position:absolute;
	background-color:rgba(0, 0, 0, 0.8);
	z-index:200;
	display:none;
}

.btn_close{
	position:absolute;
	width:6%;
	z-index:7;
}

#tab_8 .popup .btn_close{
	width:4%;
	top:24%;
	right: 23%;
	z-index:300;
}

.btn_close:hover{
	cursor:pointer;
	transform:scale(1.1);
	opacity:0.85;
}

.btn_close:active{
	transform:scale(0.95);
	opacity:1;
}

.btn_previous{
	border-radius:10px 0 0 0;
	left:1%;
}

.btn_home{
	border-radius:0;
	right:33%;
}

#tab_2 .btn_home, #tab_3 .btn_home{
	display:none;
}

.btn_next{
	border-radius:0px 10px 0 0;
	right:0;
}

.video video{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
    border:none;
}

.video{
    position:absolute;
    background:#35311E;
}

#tab_1 .video{
    width:59.3%;
    height: 61.3%;
    left:20.7%;
    top: 24.2%;
}

.btn_play{
    position:absolute;
    z-index:1;
    height: 20%;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}

.btn_play:hover{
    cursor:pointer;
    opacity:0.85;
    transform:translateX(-50%) translateY(-50%) scale(1.1);
}

.btn_play:active{
    transform:translateX(-50%) translateY(-50%) scale(0.95);
}


.table{
    position:absolute;
    width:40%;
    display:flex;
    flex-direction:row;
    box-sizing:border-box;
    border:solid 1px #000000;
    z-index:10;
	left:58%;
	top:30%;
}

#tab_2 .table{
	left: 43%;
	width: 44%;
}

.column:nth-of-type(1){
    width:20%;
}

.column:nth-of-type(2){
    width:80%;
}

.column > div{
    background: #0DB690;
    box-sizing:border-box;
    border:solid 1px #000000;
}

.column h3{
    text-align:center;
    color:#FFFFFF;
}

.column p{
    padding-top:8px;
    padding-bottom:8px;
    text-align:center;
    color:#FFFFFF;
    font-size:1.5em;
    line-height:0.8em;
}

.column select{
    border:none;
    width:100%;
    padding-left:9px;
    outline:none;
    box-sizing:border-box;
    background:transparent;
    padding-top:5px;
    padding-bottom:5px;
    color:#FFFFFF;
    font-size:1.2em;
}

select:not([disabled="disabled"]){
	cursor:pointer;
}

#tab_2 .table:nth-of-type(4) .column select, #tab_4 .table:nth-of-type(1) .column select{
	width:32%;
}

.column select option{
	color:#000000;
}

.column > div:first-of-type{
    background: #B6380D;
}


.incorrect{
	background:red !important;
	color:white !important;
}

.correct{
	background:green !important;
	color:white !important;
}

#show_tables{
	position:absolute;
	width:20%;
	border-radius:10px;
	box-sizing:border-box;
	border:solid 2px #000000;
	background:orange;
	top:85%;
	left: 43%;
}

#show_tables p{
	padding:10px 0;
	text-align:center;
}

#show_tables:not(.disabled):hover, #game_1:hover, #game_2:hover{
	cursor:pointer;
	transform:scale(1.05);
}

#show_tables:not(.disabled):active, #game_1:active, #game_2:active{
	transform:scale(0.95);
}

#example p, #ready p{
	text-align:center;
	color:#FFFFFF;
	padding-top:10px;
	padding-bottom:10px;
	font-size:1.5em;
}

#ready{
	left:62%;
	top:78%;
}

#tab_10 .popup{
	background-size:75% !important;
	background-position:50% 50% !important;
	background-repeat:no-repeat !important;
	background-image:url('../img/popup_2.png');
}

#tab_10 .popup .btn_close{
	right:10%;
	top:4%;
}


/* new styles */

#game_1{
	position:Absolute;
	width: 32%;
	left:5%;
	top: 20%;
}

#game_2{
	position:Absolute;
	width: 18%;
	right: 5%;
	top: 28%;
}

.slot_handler{
	position:absolute;
	height: 20%;
	width:2.7%;
	left: 35%;
	bottom: 37%;
	overflow:hidden;
}

.slot_sphere{
	position:absolute;
	width:5%;
	left: 33.9%;
	top: 37%;
	z-index:10;
}

.slot_sphere:not(.disabled):hover{
	cursor:pointer;
	transform:scale(1.05);
}

.slot_sphere:not(.disabled):active{
	cursor:pointer;
	transform:scale(0.95);
}

#hand{
	position:absolute;
	width:8%;
	left:15%;
	top:10%;
	z-index:10;
}

#hand:not(.disabled){
	animation-name: shine;
    animation-duration: 5s;  
    animation-iteration-count:infinite;  
}

#hand:not(.disabled):hover{
	cursor:pointer;
	transform:scale(1.05);
}

#hand:not(.disabled):active{
	cursor:pointer;
	transform:scale(0.95);
}

#bag{
	position:absolute;
	width:16%;
	left:11%;
	top:60%;
	z-index:20;
}

.ball{
	position:absolute;
	width:5%;
	left:15%;
	top:70%;
}

#tab_4 .table:first-of-type{
	left:3%;
	top:35%;
}

#tab_4 .table:nth-of-type(2){
	left:57%;
	top:35%;
}

.slot{
	position:absolute;
	width: 3.6%;
	height: 63px;
	/* background:red; */
	overflow:hidden;
}

#slot_1{
	left: 13%;
	top: 57.1%;
}

#slot_2{
	left: 17%;
	top: 57.1%;
}

#slot_3{
	left: 21%;
	top: 57.1%;
}

.slot_option_container{
	width: 86%;
	position:relative;
	left:7%;
	top: 0px;
	display:flex;
	flex-direction:column;
	transition:all 2s ease;
}

#slot_2 .slot_option_container{
	top: -1008px;
}

#slot_3 .slot_option_container{
	top: -315px;
}

#slot_4 .slot_option_container{
	top: -1008px;
}

#slot_5 .slot_option_container{
	top: -567px;
}

#slot_6 .slot_option_container{
	top: -504px;
}

.slot_option{
	/* float:left; */
	height: 51px;
	position:relative;
	left:50%;
	transform:translateX(-50%);
	margin:6px 0;
}

.slot_option_2{
	width: 72%;
}

.slot_sphere:not(.disabled){
	animation-name: shine;
    animation-duration: 5s;  
    animation-iteration-count:infinite;  
}


.slot_sphere:not(.disabled):hover{
	cursor:pointer;
	transform:scale(1.05);
}

.slot_sphere:not(.disabled):active{
	cursor:pointer;
	transform:scale(0.95);
}

#tab_2 .table:not(.disabled) .column > div:not(:first-of-type), #tab_3 .table:not(.disabled) .column > div:not(:first-of-type){
	display:none;
}