@font-face {
    font-family: star;
    src: url(Starjedi.ttf);
}

@font-face {
    font-family: neo;
    src: url(NEOTERIC.ttf);
}

@font-face {
    font-family: telegrama;
    src: url(telegrama.otf);
}

/*GENERAL*/
*{margin:0; padding:0; box-sizing:border-box; text-decoration:none;z-index: 1}

body{background-color:#000000;}
input, input[placeholder], input:focus{border:0;background-color:#000000;font-weight:bold;color:#00FFFF;text-align:center;outline: none;text-transform: uppercase;}


[class*=item]{cursor:pointer;user-select: none;}
[class*=player]{ color:#FFFFFF; font-family: star; font-size:1.5em; border:2px solid #AAAAAA; border-radius: 2px; width:100px;height:100px;min-width: 100px; margin:2px;}
[class*=player-selected]{ color:#FFFFFF; font-family: star; font-size:1.5em; border-width:3px; border-style:solid; border-color:#FF0000; border-radius: 2px; width:100px;height:100px;min-width: 100px; margin:2px;}
.player-selected[data-personaje="one"]{border-color:#FF0000; background-color: #110000;}
.player-selected[data-personaje="two"]{border-color:#00FF00; background-color: #001100;}
.player-selected[data-personaje="three"]{border-color:#0000FF; background-color: #000011;}
.player-selected[data-personaje="four"]{border-color:#FFFF00; background-color: #111100;}
[class*=container]{width:100%;display:flex;justify-content:center;align-items: center;}
.padd{padding:50px 20px;}


 .flex-column{	flex-direction: column;}
 .flex-row{	flex-direction: row}
 .container-home{height:100vh;}
 .container-stage-1{ height:100vh; padding:30px;position:relative; justify-content:space-between;}
 .inside{ padding:0;}
 .marco{border-width:10px; border-style:solid; border-color:#00FFFF; border-radius:4px; width:100%;height:100%; overflow:hidden;}
 .ocultar{display:none;}

[class*=question], .p-r, .p, .answers, .score-points, .loading, .countdown, .insert-coin, .inname, .top-data { font-family:telegrama; } 

/*HOME*/
.item-title{ font-family: star; color: #FFFF00; font-size:4.5em; line-height: 0.5;margin-bottom:15px;}
.item-subtitle{ font-family: neo; color: #FFFFFF; font-size:1.6em;}
.item-start{ padding:40px; font-family: neo; color: #00EEEE; font-size:1.6em;}
.logo{font-size:0.7em; margin-bottom:4px;}
.logot{font-size:0.7em; margin:0 0 4px 4px;}
.logi{font-size:0.26em; margin:0 0 3px -5px;}
.starlogo{text-align: center;}
.go{display:none;}
.backmickx{font-family: neo; color: #00FFFF; position:absolute; top:20px; right:20px;}

/*PLAYER SELECT*/

.select-player{ width:300px; text-align: center;}
.info-text{margin-bottom:20px; width:410px;font-family:star; font-size:2em; color:#AAAAAA; text-align:center;}
.info-bio{margin-bottom:20px; width:100%; max-width:410px;  font-family:arial; color:#AAAAAA; text-align:justify;}
.info-img{width:100%; max-width:220px; max-height:220px;}

/*QUIZ - Stage 1*/
.loading{color:#AAAAAA;text-align: center;}
.vader{display:none; width: 260px; position: absolute;bottom: 15px; right: 0;}
.ok{display:none; width: 260px; position: absolute;bottom: 15px; right: 0;}
.p-r-pre{display:flex; align-items:center;  min-height:200px; position: absolute; top: 0; bottom: 0; left: 50%; transform: translate(-50%);}
.comenzar{display:none; width:150px; margin:0 auto; z-index: 1; background:#001111; font-family:'neo'; font-weight: 900; text-align: center; color:#00FFFF; border: 3px solid #00FFFF ; border-radius: 3px; padding:20px;cursor:pointer;user-select:none;}
.comenzar:hover{border-color: #FFFFFF; color:#FFFFFF;}
.quiz-score{display:flex; align-items:center; justify-content:space-between; width:100%; height:100px; min-height: 100px; border-bottom-width: 10px; border-bottom-style:solid; border-bottom-color: red; font-family: star; font-size:2.0em;color:#AAAAAA;z-index: 9;}
.quiz-title{font-family: star; font-size:3em; color:#DDDDDD;}
.slogan{font-family: neo;font-size:0.34em; color:#00DDDD; text-align: center; margin-bottom:20px;}
.score-title{padding-leeft:5px;}
.lightsaber{margin-left:-270px ; display:flex; align-items: center;  height:100px; font-family: star; font-size:2.0em;color:#AAAAAA;}
.saber{;width:100px;min-width: 100px; margin-top:-13px;position:relative;z-index: 5}
.light{position:relative;height:100%; z-index: 4; }
.luz{border:1px solid white;height:20px;position:absolute;width:300px;top:39.3%;left:-12px;background-color:#000; font-size: 0.3em;line-height: 0.8;}
.energy{background:red; width:0%;height:18px;transition:2s;}
.force{position: absolute; padding-left:30px;letter-spacing: 40px; color:#222222;}
.score-character{width:100px;height:100px; padding:10px;border-left:10px; border-right-width:10px; border-right-style:solid; border-right-color:#FF0000;} 
#score-img{padding-top: 5px;}
.p-r{font-family:Arial; width:600px; min-height:392px; border-top:2px solid #555555; border-bottom:2px solid #555555; padding:50px; position:relative;}
.p{display:flex; justify-content:center; align-items:center;min-height:00px;margin-bottom: 30px; z-index: 1}
.picture{width: 100px;float:left;margin-right:20px;z-index: 1}
[class*=question]{ width:100%; max-width:600px;   font-size:1.6em; color:#AAAAAA;z-index: 1}
.question-name{font-family:star;text-align: center; font-size: 2em;z-index: 1;}
.answers{width:100%; max-width:410px;  font-size:1.0em; color:#AAAAAA; line-height: 1.5; z-index: 99; padding-left: }
.respi{margin-bottom: 10px;}

[class*=option]{ color:#FFFFFF; font-family: star; font-size:2em; border:2px solid #AAAAAA; border-radius: 100px; width:50px;height:50px;min-width: 50px; margin:20px; position:relative;}
.letter{position:absolute;left:27%;bottom:1%;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.option-selected{border-color:#55FFFF;border-width: 3px; background-color: #111100;background-color: #333333;}
.letter-selected{color:#55FFFF;}
.iconitos{opacity:0; transition:1s;}
.countdown{text-align: center;  color: #00FFFF; font-size: 5em;}
.insert-coin{font-family: telegrama; font-size: 2.5em; color: #00FFFF; text-align:center;}
.info-players{width:100%;}

.botonceting { pointer-events: auto; } 
.botonceting.btn-inactivo { pointer-events: none; }

/*GAME - Stage 2*/
iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;opacity: 0;transition: all 1s;border:0;}
canvas{border:0; margin:0 auto;}
.caja-juego{ position:absolute;height:100%; width:100%;margin-top:170px;text-align: center}
.juego{ width:800px; margin:0 auto;}

/*GAME - OVER // WIN -GAME*/
.sidious{position:absolute; bottom:0; left:0; z-index: -99; width:100%; text-align:center;}
.caja-sidious{ width:300px;  margin:0 auto; }
.caja-sidious img{display:block; margin:0 auto;width:100%; opacity:0;transition:12s;}

/*ENTER NAME*/
.enter-name-character{width:40%; height:auto; margin: 0 auto;  border:10px solid #AAAAAA; border-radius: 2px;}
[class*=input-name]{ display:inline; color:#FFFFFF; font-family: star; font-size:2em; height:50px;min-width: 50px; margin:-100px 20px 20px 20px; position:relative;text-align:center;}
.inname{width:100px; color:black; font-size: 3em;  }

/*TOP PLAYERS*/
.titulito{font-family: star; font-size: 4em;color:#FFFF00; margin-bottom:20px;text-align: center;padding:20px;}
.grid{width: 800px;padding-left: 50px;}
[class*=restion]{ width:100%; max-width:600px;   font-family:arial; font-size:2em; color:#AAAAAA;}
.restion-name{font-family:star;text-align: center; font-size: 2em;min-height: 400px;margin-top:40px;}
.data-row{padding-top: 60px;}
.top-data{color:#AAAAAA;font-family: telegrama; bottom:0; font-size: 2em;}
.top-grid{ width:25%;float:left;position:relative;}
.top-title{font-family:star; color:#FFF;font-size: 2em;}
.top-char{width:40px;height: 40px; border:2px solid #FFF;}
.top-rank{}
.top-name{}
.top-score{vertical-align: baseline;}