#Tirada {
    width:100%;
    height:100%;
    text-align:center;
}

#fondoTirada {
    height:200px;
    text-align:center;
}

#centradoTirada {
    position:relative;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    text-align:center;
}

#btBarajarCartas {
    margin-top:200px;
}

.contenedorTirada {
    width:100%;
    height:100%;
    position:absolute;
}

.contenedorTirada a {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);
    -moz-opacity: 0.85;
    opacity: 0.85;
}
.contenedorTirada a:hover {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1.0);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1.0);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,1.0);
}

.TituloBaraja {
    font-weight:bold;
}

.carta {
    float:left;
    width:90px;
    height:160px;
    overflow:hidden;
}

.carta1 {
    position:absolute;
    top:0px;
    left:0px;
    z-index:0;
    transform: rotate(2deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(2deg) translate(10px) rotate(-0deg);
}

.carta2 {
    position:absolute;
    top:0px;
    left:20px;
    z-index:0;
    transform: rotate(-3deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-3deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-3deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-3deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-3deg) translate(10px) rotate(-0deg);
}

.carta3 {
    position:absolute;
    top:0px;
    left:40px;
    z-index:0;
    transform: rotate(3deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(3deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(3deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(3deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(3deg) translate(10px) rotate(-0deg);
}

.carta4 {
    position:absolute;
    top:0px;
    left:60px;
    z-index:0;
    transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-4deg) translate(10px) rotate(-0deg);
}

.carta5 {
    position:absolute;
    top:0px;
    left:80px;
    z-index:0;
    transform: rotate(1deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(1deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(1deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(1deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(1deg) translate(10px) rotate(-0deg);
}

.carta6 {
    position:absolute;
    top:0px;
    left:100px;
    z-index:0;
    transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-4deg) translate(10px) rotate(-0deg);
}

.carta7 {
    position:absolute;
    top:0px;
    left:120px;
    z-index:0;
    transform: rotate(3deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(3deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(3deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(3deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(3deg) translate(10px) rotate(-0deg);
}

.carta8 {
    position:absolute;
    top:0px;
    left:140px;
    z-index:0;
    transform: rotate(-2deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-2deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-2deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-2deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-2deg) translate(10px) rotate(-0deg);
}

.carta9 {
    position:absolute;
    top:0px;
    left:160px;
    z-index:0;
    transform: rotate(2deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(2deg) translate(10px) rotate(-0deg);
}

.carta10 {
    position:absolute;
    top:0px;
    left:180px;
    z-index:0;
    transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-1deg) translate(10px) rotate(-0deg);
}

.carta11 {
    position:absolute;
    top:0px;
    left:200px;
    z-index:0;
    transform: rotate(2deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(2deg) translate(10px) rotate(-0deg);
}

.carta12 {
    position:absolute;
    top:0px;
    left:220px;
    z-index:0;
    transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-1deg) translate(10px) rotate(-0deg);
}

.carta13 {
    position:absolute;
    top:0px;
    left:240px;
    z-index:0;
    transform: rotate(2deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(2deg) translate(10px) rotate(-0deg);
}

.carta14 {
    position:absolute;
    top:0px;
    left:260px;
    z-index:0;
    transform: rotate(-5deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-5deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-5deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-5deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-5deg) translate(10px) rotate(-0deg);
}

.carta15 {
    position:absolute;
    top:0px;
    left:280px;
    z-index:0;
    transform: rotate(2deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(2deg) translate(10px) rotate(-0deg);
}

.carta16 {
    position:absolute;
    top:0px;
    left:300px;
    z-index:0;
    transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-4deg) translate(10px) rotate(-0deg);
}

.carta17 {
    position:absolute;
    top:0px;
    left:320px;
    z-index:0;
    transform: rotate(2deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(2deg) translate(10px) rotate(-0deg);
}

.carta18 {
    position:absolute;
    top:0px;
    left:340px;
    z-index:0;
    transform: rotate(-3deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-3deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-3deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-3deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-3deg) translate(10px) rotate(-0deg);
}

.carta19 {
    position:absolute;
    top:0px;
    left:360px;
    z-index:0;
    transform: rotate(3deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(3deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(3deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(3deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(3deg) translate(10px) rotate(-0deg);
}

.carta20 {
    position:absolute;
    top:0px;
    left:380px;
    z-index:0;
    transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-4deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-4deg) translate(10px) rotate(-0deg);
}

.carta21 {
    position:absolute;
    top:0px;
    left:400px;
    z-index:0;
    transform: rotate(2deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(2deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(2deg) translate(10px) rotate(-0deg);
}

.carta22 {
    position:absolute;
    top:0px;
    left:420px;
    z-index:0;
    transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -ms-transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -webkit-transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -o-transform: rotate(-1deg) translate(10px) rotate(-0deg);
    -moz-transform: rotate(-1deg) translate(10px) rotate(-0deg);
}

@keyframes carta1 {
    100% {
        transform: rotateY(180deg) rotateY(180deg);
        left:20%;
        top:-60px;
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
        z-index:9999;
    }
}

@-webkit-keyframes carta1 {
    100% {
        transform: rotateY(180deg) rotateY(180deg);
        left:20%;
        top:-60px;
        -moz-opacity: 1.0;
        opacity: 1.0;
        z-index:9999;
    }
}

.animacionCarta1 {
    -webkit-animation-name: carta1;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation: carta1 1s;
    animation-fill-mode: forwards;
}

@keyframes carta2 {
    100% {
        transform: rotateY(180deg) rotateY(180deg);
        left:45%;
        top:-60px;
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
        z-index:9999;
    }
}

@-webkit-keyframes carta2 {
    100% {
        transform: rotateY(180deg) rotateY(180deg);
        left:45%;
        top:-60px;
        -moz-opacity: 1.0;
        opacity: 1.0;
        z-index:9999;
    }
}

.animacionCarta2 {
    -webkit-animation-name: carta2;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation: carta2 1s;
    animation-fill-mode: forwards;
}

@keyframes carta3 {
    100% {
        transform: rotateY(180deg) rotateY(180deg);
        left:70%;
        top:-60px;
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
        z-index:9999;
    }
}

@-webkit-keyframes carta3 {
    100% {
        transform: rotateY(180deg) rotateY(180deg);
        left:70%;
        top:-60px;
        -moz-opacity: 1.0;
        opacity: 1.0;
        z-index:9999;
    }
}

.animacionCarta3 {
    -webkit-animation-name: carta3;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation: carta3 1s;
    animation-fill-mode: forwards;
}


/*SmartPhone tamaño extra pequeño (XSME)*/
@media only screen and (max-width:479px) {

    .carta {
        float:left;
        width:64px;
        height:114px;
        overflow:hidden;
    }

    #fondoTirada {
        height:140px;
        text-align:center;
    }

    #btBarajarCartas {
        margin-top:140px;
    }
}

/*SmartPhone tamaño pequeño (SME)*/
@media only screen and (min-width:480px) and (max-width:639px) {

    .carta {
        float:left;
        width:90px;
        height:160px;
        overflow:hidden;
    }

    #fondoTirada {
        height:180px;
        text-align:center;
    }

    #btBarajarCartas {
        margin-top:180px;
    }
}

/*SmartPhone tamaño pequeño (SME2) Corte especial*/
@media only screen and (min-width:640px) and (max-width:803px) {

    .carta {
        float:left;
        width:90px;
        height:160px;
        overflow:hidden;
    }

    #fondoTirada {
        height:180px;
        text-align:center;
    }

    #btBarajarCartas {
        margin-top:180px;
    }

    @keyframes carta1 {
        100% {
            transform: rotateY(180deg) rotateY(180deg);
            left:20%;
            top:-80px;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
            -moz-opacity: 1.0;
            opacity: 1.0;
            z-index:9999;
        }
    }

    @-webkit-keyframes carta1 {
        100% {
            transform: rotateY(180deg) rotateY(180deg);
            left:20%;
            top:-80px;
            -moz-opacity: 1.0;
            opacity: 1.0;
            z-index:9999;
        }
    }

    .animacionCarta1 {
        -webkit-animation-name: carta1;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;
        -webkit-animation-fill-mode: forwards;
        animation: carta1 1s;
        animation-fill-mode: forwards;
    }

    @keyframes carta2 {
        100% {
            transform: rotateY(180deg) rotateY(180deg);
            left:45%;
            top:-80px;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
            -moz-opacity: 1.0;
            opacity: 1.0;
            z-index:9999;
        }
    }

    @-webkit-keyframes carta2 {
        100% {
            transform: rotateY(180deg) rotateY(180deg);
            left:45%;
            top:-80px;
            -moz-opacity: 1.0;
            opacity: 1.0;
            z-index:9999;
        }
    }

    .animacionCarta2 {
        -webkit-animation-name: carta2;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;
        -webkit-animation-fill-mode: forwards;
        animation: carta2 1s;
        animation-fill-mode: forwards;
    }

    @keyframes carta3 {
        100% {
            transform: rotateY(180deg) rotateY(180deg);
            left:70%;
            top:-80px;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
            -moz-opacity: 1.0;
            opacity: 1.0;
            z-index:9999;
        }
    }

    @-webkit-keyframes carta3 {
        100% {
            transform: rotateY(180deg) rotateY(180deg);
            left:70%;
            top:-80px;
            -moz-opacity: 1.0;
            opacity: 1.0;
            z-index:9999;
        }
    }

    .animacionCarta3 {
        -webkit-animation-name: carta3;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;
        -webkit-animation-fill-mode: forwards;
        animation: carta3 1s;
        animation-fill-mode: forwards;
    }
}

/*Tablet tamaño pequeño (SM)*/
@media only screen and (min-width:804px) and (max-width:939px) {

    .carta {
        float:left;
        width:112px;
        height:200px;
        overflow:hidden;
    }

    #fondoTirada {
        height:220px;
        text-align:center;
    }

    #btBarajarCartas {
        margin-top:220px;
    }
}

/*PC tamaño normal (MD)*/
@media only screen and (min-width:940px) and (max-width:1220px) {

    .carta {
        float:left;
        width:118px;
        height:210px;
        overflow:hidden;
    }

    #fondoTirada {
        height:230px;
        text-align:center;
    }

    #btBarajarCartas {
        margin-top:230px;
    }
}

/*PC tamaño grande (LG)*/
@media only screen and (min-width:1221px) {

    .carta {
        float:left;
        width:123px;
        height:220px;
        overflow:hidden;
    }

    #fondoTirada {
        height:240px;
        text-align:center;
    }

    #btBarajarCartas {
        margin-top:240px;
    }
}