@charset "utf-8";
body{ 
    text-align: center;    
    background-size: 100%;
    background-color: black;
    /*background-image: url('../img/fondoEspacio.jpg');*/
    color: white;
}
/* el div donde se muestra la carta y los botones de play*/
#areaJuego{
    border-color: #000052;    
    /*background-color: #aeb4fe;*/
    border-radius: 5px;
    margin:1% 0% 0% 1%;/*top x y left*/
    width: 77%;
}

#areaVerificacion{/* div donde se muestran las planillas para verificar ganador */
    color: rgb(235, 14, 14);   
    font-family: "Homer Simpson", cursive;
    font-style: oblique;
    box-sizing: border-box;
    position: relative;    
    font-size: 100%;
    text-align: center;
    width: 18%; 
    height: 75%;
    margin:1% 0% 0% 80%;/*top x y left*/
    /*background-color: #267e77;*/
    /*opacity: .5;*/
    cursor: pointer;     
}

/*CARTA QUE SE ESTA CANTANDO*/
img.carta{    
    height:90%;
    margin: 0%;
    cursor: pointer;
    border-radius: 3%;
    border: 3px solid #ffce01 ;
    box-sizing: border-box;       
}

#tablaPlanilla img{  
    width: 100%;
    box-sizing: border-box; 
}

#tablaCartones {  
    width: 100%;
    font-size: 100%;
    box-sizing: border-box; 
    background-color: black;       
}

#tablaCartones td{  
    width: 20%;
    font-size: 100%;
    box-sizing: border-box; 
    cursor: pointer;
}

#tablaCartones td:hover{
    cursor: pointer;
    background-color:#aeb4fe; 
}

.cartaMarcada{      
    filter: grayscale(100%);
}

.cartaDesmarcada{  
    filter:grayscale(0%);
}





/*/cada DIV, uno donde esta la carta, y el otro donde
se muestran los cartones
*/

div.secciones {
    float: left;
    padding: 1px;    
    box-sizing: border-box;
    height:75%;
    position: absolute;
    margin:1% 0% 0% 0%;
}

/*EL PARRAFO DONDE SE ENCUENTRA LA CARTA QUE PASA ACTUALMENTE*/
#p_centro{
    padding: 0%;
    margin: 1%;
    box-sizing: border-box;
    position: relative;
    /*background-color: black;*/
    height: 90%;
}

table{        
    text-align: center;
    box-sizing: border-box;
    overflow-x:auto;
    z-index: -1;
}
td,tr{       
    text-align: center;
    box-sizing: border-box;  
    border: 1px solid black;
    border-color: white;
    color: white;
    font-size: 100%;
}

#contenedorPie{
    margin:40% 0% 0% 0%;/*top x y left*/    
    width: 99%;
    height: 10%;           
    background-color: #4B4A4B;
    border-radius: 5px;
    position:fixed; 
    bottom:0;    
    opacity: 0.9;
    color:white;
}

/* Efecto de zoom sobre una imagen al pasar el mouse sobre ella*/
#contenedorPie img {
    -webkit-transition:all .9s ease; /* Safari y Chrome */
    -moz-transition:all .9s ease; /* Firefox */
    -o-transition:all .9s ease; /* IE 9 */
    -ms-transition:all .9s ease; /* Opera */
    width:100%;    
    
}
/* Efecto de zoom sobre una imagen al pasar el mouse sobre ella*/
#contenedorPie img:hover {
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform:scale(1.25);    
}

#contenedorPie img{
    width: 2%;    
    overflow:hidden;
}

img.boton{
    background-color: transparent;
    opacity: 0.9;
    width: 5%;
}

img.boton:hover{  
    background-color: transparent; 
    cursor: pointer;
    opacity: 1;
}