@font-face{
	font-family: 'cabin-regular'; /*a name to be used later*/
    src: url('../fonts/Cabin-Regular.ttf'); /*URL to font*/
}

@font-face{
	font-family: 'cabin-italic'; /*a name to be used later*/
    src: url('../fonts/Cabin-Italic.ttf'); /*URL to font*/
}

@font-face{
	font-family: 'cabin-bold-italic'; /*a name to be used later*/
    src: url('../fonts/Cabin-BoldItalic.ttf'); /*URL to font*/
}

@font-face{
	font-family: 'big-noodle'; /*a name to be used later*/
    src: url('../fonts/big_noodle_titling.ttf'); /*URL to font*/
}

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

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

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

.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);}
}

.ggb_contenidoInterno{
    background:none;
}

.tab{
    position:absolute;
    width:97%;
    height:83%;
    border-radius:15px;
}

#tab_1{
    background:url('../img/bg_1_1.png');
    background-size:cover;
    overflow:hidden;
}


.popup{
	position:absolute;
	z-index:40;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.85);
	border-radius:15px;
	background-size: 74% !important;
	background-repeat:no-repeat !important;
	background-position:50% 50% !important;
	background-image:url('../img/popup_1.png');
	display:none;
}


.btn_close{
	width:5%;
	position:absolute;
	right:2%;
	top:1%;
}

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

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

/* Drag CSS */

.grabbing{
	cursor: -webkit-grabbing; 
	cursor: -moz-grabbing;
}

.dragging{
	pointer-events:none;
}

.animation{
	transition:all 0.7s ease;
}

.highlight{
	-webkit-box-shadow: 0px 0px 10px 10px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 10px 10px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 10px 10px rgba(50, 50, 50, 0.75);
	background:yellow;
}

.drag:nth-of-type(1):hover{
	cursor:pointer;
	transform:scale(1.05);
}

.drag:nth-of-type(1):active{
	transform:scale(0.95);
}

.drags{
	position:absolute;
	width:8%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	left:4%;
	top:20%;
	z-index:10;
}

.drag{
	padding:10px 0;
	width:100%;
	left:0px;
	top:0px;
}

.drag:first-of-type:not(.dragging){
	animation-name:shine;
	animation-duration:3s;
	animation-iteration-count:infinite;
}

.slot_handler{	
	position:absolute;
	width:2.6%;
	left:72%;
	bottom:34%;
	height:21%;
}

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

.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);
}

.drop{
	position:absolute;
	width:0.8%;
	height:8.5%;
	left:63.8%;
	top:90%;
	border-radius:10px;
	z-index:100;
}

.slot{
	position:absolute;
	width:5%;
	height: 63px;
	overflow:hidden;
	top: 61.5%;
}

#slot_1{
	left: 35.8%;
}

#slot_2{
	left:40.9%;
}

#slot_3{
	left:46.0%;
}

#slot_4{
	left:51.2%;
}

#slot_5{
	left:56.4%;
}

#slot_6{
	left:61.5%;
}

.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%;
}