.titulo {
    font-size: 4em;
    display: block;
    color: #0080ff;
    text-shadow: 0px 0px 10px #FFEB3B;
    width: 90%;
    margin: 0 auto;
    border-top: solid 1px black;
    border-top-left-radius: 4em;
    border-top-right-radius: 4em;
    background: #cddcf3;
}

.titulo img {
    height: 1em;
    margin-left: 1em;
}

.frase span{
	background: white;
	width: 1em;
	display: inline-block;
	border: 1px solid black;
	margin: 1px;
	text-align: center;
	color: white;
	line-height: 1.2em;
}

.panel {
    width: 90%;
    display: block;
    text-align: center;
    font-size: 5em;
    font-family: arial;
    text-transform: uppercase;
    background: darkblue;
    margin: 0 auto;
	padding-bottom: 1em;
	box-shadow: 3px 3px 5px grey;
}

.panel .frase {
    text-align: left;
    padding-left: 1em;
    padding-right: 1em;
	user-select: none;
    cursor: pointer;
	font-weight: bold;
	font-size: 4vw;
}

span.espacio {
    width: 1em;
    display: inline-block;
    vertical-align: bottom;
    border: none;
}

span.simbolo {
    color: black;
}

.frase span.palabra {
    background: none;
    width: auto;
    border: none;
    padding-top: .5em;
}

.boton_jugar {
    background: #3F51B5;
    padding: 1em;
    width: 6em;
    text-align: center;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    box-shadow: 2px 2px 3px gray;
	margin: 0 auto;
	margin-top: 1em;
}

div#premio {
    /* border: solid 5px #4CAF50; */
    box-shadow: 3px 4px 6px grey;
    width: 90%;
    height: 7.5em;
    text-align: center;
    line-height: 3em;
    font-size: 2em;
    margin: 0 auto;
    background: #1f78d0;
    overflow: hidden;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
}

div#marcador {
    display: flex;
    width: 90%;
    margin: 0 auto;
    flex-direction: row;
	background: #cddcf3;
	height: 3.5em;
}

#marcador div {
    flex-grow: 1;
    text-align:center;
    border: solid 4px;
    font-size: 2em;
	background: lightgray;
	line-height: 1.5em;
	box-shadow: inset 2px 2px 4px grey;
    border-radius: 16px;
	margin-right: 2em;
    margin-left: 2em;
	min-width: 5.5em;
}

#marcador span.premios {
    float: right;
    display: block;
    margin-top: -1.4em;
    margin-right: .2em;
}

#marcador span.puntos {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    text-align: left;
    padding-left: .3em;
}

#marcador .premios img {
    height: 1em;
    padding: 0;
    margin: 0;
    padding-top: 0.2em;
    display: none;
    width: .4em;
    float: right;
}

div#equipo1 {
    border-color: green;
}

div#equipo2 {
    border-color: yellow;
}

div#equipo3 {
    border-color: red;
}
.turno_equipo1 {
	background: #dbf3db !important;
	font-weight: bold !important;
	border-width: 8px !important;
	color: black !important;
	line-height: 1.3em !important;
}

.turno_equipo2 {
	background: #d7de9f !important;
	font-weight: bold !important;
	border-width: 8px !important;
	color: black !important;
	line-height: 1.3em !important;
}

.turno_equipo3 {
	background: #ffcac6 !important;
	font-weight: bold !important;
	border-width: 8px !important;
	color: black !important;
	line-height: 1.3em !important;
}

body {
    background: #eeeeee;
}

.pista {
    display: flex;
    width: 90%;
    margin: 0 auto;
    /* box-shadow: 3px 3px 5px grey; */
    background: #1f78d0;
    font-size: 2em;
    color: white;
    border-top: solid 5px black;
    flex-direction: row;
    height: 1.7em;
}

.botonera {
    margin-top: calc(-3em - 5px);
    width: 100%;
}

.titulo_panel {
    color: white;
    font-size: .7em;
    font-family: verdana;
}

.pista span {
    display: block;
    padding: 0;
    padding-left: .5em;
    padding-top: .5em;
    flex-grow: 1;
}

img#ruleta {
    width: 25em;
    display: block;
    /* position: relative; */
    margin: 0 auto;
    margin-top: -.5em;
    transform: rotate(0deg);
    transition: transform 5s cubic-bezier(0.42, 0, 0.41, 1.03);
}

div#triangulo {
    display: block;
    height: 1em;
    width: .5em;
    position: relative;
    margin: 0 auto;
    z-index: 10;
}

svg {
    margin: 0 auto;
    display: block;
    width: 1em;
    filter: drop-shadow( 3px 5px 3px gray );
}
div#sombra_ruleta {
    display: block;
    height: 8em;
    width: 89vw;
    background: radial-gradient(ellipse at center, rgba(241,231,103,1) 0%, rgba(241,231,103,1) 51%, rgba(255,255,255,0) 65%, rgba(255,255,255,0) 100%);
	margin: 0 auto;
    margin-top: -26em;
    background-size: 100% 89vw;
    background-position-y: -2em;
    background-repeat: no-repeat;
}

div#botones {
    display: block;
    flex-grow: 1;
    text-align: right;
}

div#botones div{
	padding: 0.2em;
	border: 1px solid black;
	text-align: center;
	line-height: .7em;
    margin-top: .2em;
    float: right;
    margin-right: .2em;
    box-shadow: 1px 1px 3px gray;
    border-radius: 5px;
    background: forestgreen;
	cursor: pointer;
}


div#comprar_vocal {
    width: .7em;
    height: .7em;
}

div#resolver {
    
}


div#sombreado {
    display: block;
    position: fixed;
    background: rgba(255, 255, 255, 0.87);
    height: 100%;
    width: 100%;
    top: 0;
    z-index: 50;
	visibility: hidden;
}

div#capa_mensajes {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 60;
    top: 0;
	visibility:hidden;
}

span#mensaje {
    display: block;
    width: 70%;
    height: 4em;
    margin: 0 auto;
    margin-top: 20%;
    font-size: 4em;
    text-align: center;
    background: #0067a5;
    color: white;
    padding: .5em;
    line-height: 1.5em;
    border: solid 6px black;
    border-radius: 17px;
    box-shadow: 0px 0px 31px #0067a5;
}

#capa_mensajes .botones {
    width: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    margin-top: -6px;
}

#capa_mensajes .botones div {
	flex-grow: 1;text-align: center;
	padding-top: 1em;
	padding-bottom: 1.5em;
	background: #005182;
	border: solid 6px black;
	margin-left: 1em;
	margin-right: 1em;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	font-size: 1.5em;
	line-height: .1em;
	font-weight: bold;
	color: white;
	cursor: pointer;
	visibility: hidden;
}

#capa_mensajes .botones div:nth-child(1){
	background: #25753e;
}
#capa_mensajes .botones div:nth-child(1):hover{
	background: #1c9241;
}
#capa_mensajes .botones div:nth-child(2){
	background: #9c4a30;
}
#capa_mensajes .botones div:nth-child(2):hover{
	background: #ca5833;
}

#capa_recuento, #capa_recuento_final {
    position: fixed;
    top: 0;
    display: block;
    z-index: 55;
    width: 100%;
    height: 100%;
    padding-top: 10em;
	visibility: hidden;
}

.recuentos {
    width: 70%;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    background: #0067a5;
    padding: 1em;
    border: solid 6px black;
    border-top: none;
    padding-bottom: 5em;
    box-shadow: 0px 0px 2em #0067a5;
}

span.titulo_recuento {
    width: 70%;
    display: block;
    margin: 0 auto;
    text-align: center;
    background: #0067a5;
    padding: .5em;
    font-size: 2em;
    color: white;
    border: solid 6px black;
    border-bottom: none;
    box-shadow: 0px 0px 1em #0067a5;
}

.recuentos span {
    flex-grow: 1;
    text-align: center;
    font-size: 2em;
    color: white;
    padding-top: .5em;
}

span#recuento_equipo1, #recuentofinal_equipo1 {
    border-top: 6px solid #1c9241;
}

span#recuento_equipo2, #recuentofinal_equipo2 {
    border-top: 6px solid rgba(241,231,103,1);
}

span#recuento_equipo3, #recuentofinal_equipo3 {
    border-top: 6px solid red;
}

span#felicitacion {
    width: 70%;
    max-width: 70%;
    display: block;
    margin: 0 auto;
    text-align: center;
    background: #0067a5;
    padding: .5em;
    font-size: 2em;
    font-weight: bold;
    color: white;
    border: solid 6px black;
    border-top: none;
    border-bottom: none;
    box-shadow: 0px 0px 1em #0067a5;
    text-shadow: 0px 0px 13px #05c305;
}

#svg_ruleta {
    width: 100%;
    position: relative;
    filter: drop-shadow(0px 0px 58px yellow);
}

#todo{
    transform: translate(272px, 272px) rotate(-29deg);
	transition: transform 5s cubic-bezier(0.42, 0, 0.41, 1.03);
}

#ruletav{
    transform: translate(-272px, -272px);
}

#boton_todas_vocales, #boton_meloquedo, #boton_doble_letra{
	display: none;
}

div#capa_palabra_express {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    margin: 0 auto;
    margin-top: 9em;
	z-index:55;
}

.botones {
    width: 70%;
    display: block;
    margin: 0 auto;
    text-align: center;
    background: #0067a5;
    padding: .5em;
    font-size: 2em;
    color: white;
    border: solid 6px black;
    border-top: none;
    box-shadow: 0px 0px 1em #0067a5;
}

.botones div {
    display: inline-block;
    margin-right: 1em;
    margin-left: 1em;
    padding: .2em;
    cursor: pointer;
}

.boton_verde {
    border: solid 4px #135013;
    background: green;
    border-radius: 7px;
}

.boton_verde:hover {
    box-shadow: 0px 0px 20px #0edc0e;
}

.boton_amarillo {
    border: solid 4px #fbfb32;
    background: #cccc03;
    border-radius: 7px;
}

.boton_amarillo:hover {
    box-shadow: 0px 0px 20px #fdfd8d;
}

.boton_rojo {
    border: solid 4px #8e0101;
    background: red;
    border-radius: 7px;
}

.boton_rojo:hover {
    box-shadow: 0px 0px 20px #ff4343;
}

.boton_ninguno {
    display: block !important;
    margin: 0 auto !important;
    margin-top: 2em !important;
    border: solid 4px black;
    width: 5em;
    background: #5a5a5a;
    border-radius: 7px;
}

.boton_ninguno:hover{
    box-shadow: 0px 0px 20px black
}

div#capa_meloquedo {
    position: fixed;
    top: 0;
    display: block;
    z-index: 55;
    width: 100%;
    height: 100%;
    padding-top: 10em;
    visibility: hidden;
}
.marcador_meloquedo {
    width: 70%;
    margin: 0 auto;
    background: #0067a5;
    border: solid black 6px;
    border-top: none;
    padding: .5em;
    font-size: 2em;
}

.marcador_meloquedo #marcador div {
    min-width: 1em;
	cursor: pointer;
}

.marcador_meloquedo div#marcador {
    width: 100%;
    background: none;
    font-size: .5em;
}

div#meloquedo_equipo1 {
    border-color: green;
}

div#meloquedo_equipo2 {
    border-color: yellow;
}

div#meloquedo_equipo3 {
    border-color: red;
}

div#capa_comodin {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 60;
    top: 0;
    visibility: hidden;
}

.frase_comodin {
    display: block;
    width: 70%;
    height: 4em;
    margin: 0 auto;
    margin-top: 20%;
    font-size: 4em;
    text-align: center;
    background: #0067a5;
    color: white;
    padding: .5em;
    line-height: 1.5em;
    border: solid 6px black;
    border-radius: 17px;
    box-shadow: 0px 0px 31px #0067a5;
}

.botones_comodin {
    width: 55%;
    display: block;
    margin: 0 auto;
    margin-top: -.17em;
    text-align: center;
    background: #0067a5;
    padding: .5em;
    font-size: 2em;
    color: white;
    border: solid 6px black;
    border-top: none;
    box-shadow: 0px 0px 1em #0067a5;
}

.frase_comodin span:nth-child(2) {
    display: block;
}

.botones_comodin div {
    display: inline;
    margin-left: 1em;
    margin-right: 1em;
    border: solid 3px black;
    padding-left: .5em;
    padding-right: .5em;
    border-radius: 5px;
    cursor: pointer;
}

.botones_comodin div:first-child {
    background: green;
}

.botones_comodin div:nth-child(2) {
    background: red;
}

@media (max-width:900px){
	body{
		font-size: 0.3em;
	}
	.turno_equipo1, .turno_equipo2, .turno_equipo3{
		border-width: 4px !important;
	}
	#marcador div{
		border-width: 2px;
	}
	svg{
		transform: scale(.5);
		position: absolute;
		margin-top: -47px;
		margin-left: -7px;
		width: 3em;
	}
}