.card {
    float: left;
    margin: 0px 0px 0px -44px;
    width: 110px;
    height: 156px;
    border-radius: 6px;
    background-size: 100%;
    font-size: 0;
    visibility: hidden;
    transition: filter 0.5s;
    z-index:3;
}

.playable:hover {
    transition: transform 0.15s;
    transform: translateY(-15px);
}

.playable:not(:hover) {
    transform: initial;
}

.card-top {
    margin-top: 0px;
}


#tableCard, #deck {
    width: 110px;
    height: 156px;
    border-radius: 7px;
    margin-top: 154px;
    font-size: 0;
    background-size: 100%;
    transition: bottom 0.1s;
    z-index:0;
}

#tableCard {
    float: left;
}

#deck {
    float: left;
    margin-left: 50px;
    background-image: url("cards/back.png");
    box-shadow: 2px 2px 1px #9e9e9e;
    cursor: -webkit-grab;
    visibility: hidden;
    transition: opacity 0.15s, transform 0.15s;
    z-index:1;
}



.card-left{
    transform: rotate(90deg);
    margin: 0;
    margin-left: 12px;
    margin-top: -118px;
    float: left;
}

.card-right{
    transform: rotate(-90deg);
    margin: 0;
    margin-left: 15px;
    margin-top: -118px;
}

#player2-slot19{
    margin-top: -12px;
}
#player4-slot19{
    margin-top: -13px;
}




@media screen and (max-width:1470px)
{   
	.card {margin: 0px 0px 0px -50px;}
	.card-left{margin: 0; margin-left: 12px; margin-top: -118px;}
	.card-right{margin: 0; margin-left: 15px; margin-top: -118px;}
}

@media screen and (max-width:1270px)
{   
	.card {margin: 0px 0px 0px -60px;}
	.card-left{margin: 0; margin-left: 12px; margin-top: -122px;}
	.card-right{margin: 0; margin-left: 15px; margin-top: -122px;}
}