.form-body {
    /*height: 70%;*/
}

/*.container {
     padding-right: 5px; 
     padding-left: 5px; 
}*/
.headerCardsHorizontalLeft,
.headerCardsHorizontalRight {
    position: absolute;
    min-width: 100px;
    height: 50px;
    /*border: 2px solid red;*/
    
    width: 70%;
}
.headerCardsHorizontalLeft {
    left: 0px;
}
.headerCardsHorizontalRight {
    right: 0px;
}
.headerCardsHorizontalRight div {
    right: 0;
}
.headerCardsHorizontalFront {
    position: absolute;
    min-width: 100px;
    height: 50px;
    /*border: 2px solid red;*/
    width: 90%;
}
.headerCards {
    max-height: 1200px;
    height: 100vh;
    margin-top: 75px;
    min-height: 300px;
}
.cardMadjarice {
    width: 68px;
}
.cardFrancuske {
    height: 170px;
    width: 113px;
}
/*.cardFrancuske150
{
    height:150px;
    width:100px;
}
.cardFrancuske120
{
    height:120px;
    width:80px;
}
.cardFrancuske100
{
    height:100px;
    width:67px;
}
.cardFrancuske90
{
    height:90px;
    width:60px;
}
.cardFrancuske80
{
    height:80px;
    width:53px;
}*/

.card {
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    position: absolute !important;
}
.headerCardsHorizontalLeft .caF0,
.headerCardsHorizontalLeft .caF1,
.headerCardsHorizontalLeft .caF2,
.headerCardsHorizontalLeft .caF3,
.headerCardsHorizontalLeft .caF4,
.headerCardsHorizontalLeft .caF5,
.headerCardsHorizontalLeft .caF6,
.headerCardsHorizontalLeft .caF7,
.headerCardsHorizontalLeft .caF8,
.headerCardsHorizontalLeft .caF9,
.headerCardsHorizontalLeft .caF10,
.headerCardsHorizontalLeft .caF11,
.headerCardsHorizontalLeft .caF12,
.headerCardsHorizontalLeft .caF13,
.headerCardsHorizontalLeft .caF14,
.headerCardsHorizontalLeft .caF15,
.headerCardsHorizontalLeft .caF16,
.headerCardsHorizontalLeft .caF17,
.headerCardsHorizontalLeft .caF18,
.headerCardsHorizontalLeft .caF19,
.headerCardsHorizontalLeft .caF20,
.headerCardsHorizontalLeft .caF21,
.headerCardsHorizontalLeft .caF22,
.headerCardsHorizontalLeft .caF23,
.headerCardsHorizontalLeft .caF24,
.headerCardsHorizontalLeft .caF25,
.headerCardsHorizontalLeft .caF26,
.headerCardsHorizontalLeft .caF27,
.headerCardsHorizontalLeft .caF28,
.headerCardsHorizontalLeft .caF29,
.headerCardsHorizontalLeft .caF30,
.headerCardsHorizontalLeft .caF31 {
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(3px 0px 3px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(3px 0px 3px rgba(0, 0, 0, 0.7));
}
.caF0,
.caF1,
.caF2,
.caF3,
.caF4,
.caF5,
.caF6,
.caF7,
.caF8,
.caF9,
.caF10,
.caF11,
.caF12,
.caF13,
.caF14,
.caF15,
.caF16,
.caF17,
.caF18,
.caF19,
.caF20,
.caF21,
.caF22,
.caF23,
.caF24,
.caF25,
.caF26,
.caF27,
.caF28,
.caF29,
.caF30,
.caF31 {
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(-3px 0px 3px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(-3px 0px 3px rgba(0, 0, 0, 0.7));
}
.caF0 {
    background: url("../cards/F/0.gif");
}
.caF1 {
    background: url("../cards/F/1.gif");
}
.caF2 {
    background: url("../cards/F/2.gif");
}
.caF3 {
    background: url("../cards/F/3.gif");
}
.caF4 {
    background: url("../cards/F/4.gif");
}
.caF5 {
    background: url("../cards/F/5.gif");
}
.caF6 {
    background: url("../cards/F/6.gif");
}
.caF7 {
    background: url("../cards/F/7.gif");
}
.caF8 {
    background: url("../cards/F/8.gif");
}
.caF9 {
    background: url("../cards/F/9.gif");
}
.caF10 {
    background: url("../cards/F/10.gif");
}
.caF11 {
    background: url("../cards/F/11.gif");
}
.caF12 {
    background: url("../cards/F/12.gif");
}
.caF13 {
    background: url("../cards/F/13.gif");
}
.caF14 {
    background: url("../cards/F/14.gif");
}
.caF15 {
    background: url("../cards/F/15.gif");
}
.caF16 {
    background: url("../cards/F/16.gif");
}
.caF17 {
    background: url("../cards/F/17.gif");
}
.caF18 {
    background: url("../cards/F/18.gif");
}
.caF19 {
    background: url("../cards/F/19.gif");
}
.caF20 {
    background: url("../cards/F/20.gif");
}
.caF21 {
    background: url("../cards/F/21.gif");
}
.caF22 {
    background: url("../cards/F/22.gif");
}
.caF23 {
    background: url("../cards/F/23.gif");
}
.caF24 {
    background: url("../cards/F/24.gif");
}
.caF25 {
    background: url("../cards/F/25.gif");
}
.caF26 {
    background: url("../cards/F/26.gif");
}
.caF27 {
    background: url("../cards/F/27.gif");
}
.caF28 {
    background: url("../cards/F/28.gif");
}
.caF29 {
    background: url("../cards/F/29.gif");
}
.caF30 {
    background: url("../cards/F/30.gif");
}
.caF31 {
    background: url("../cards/F/31.gif");
}


/* *** madjarice *** */

.headerCardsHorizontalLeft .caM0,
.headerCardsHorizontalLeft .caM1,
.headerCardsHorizontalLeft .caM2,
.headerCardsHorizontalLeft .caM3,
.headerCardsHorizontalLeft .caM4,
.headerCardsHorizontalLeft .caM5,
.headerCardsHorizontalLeft .caM6,
.headerCardsHorizontalLeft .caM7,
.headerCardsHorizontalLeft .caM8,
.headerCardsHorizontalLeft .caM9,
.headerCardsHorizontalLeft .caM10,
.headerCardsHorizontalLeft .caM11,
.headerCardsHorizontalLeft .caM12,
.headerCardsHorizontalLeft .caM13,
.headerCardsHorizontalLeft .caM14,
.headerCardsHorizontalLeft .caM15,
.headerCardsHorizontalLeft .caM16,
.headerCardsHorizontalLeft .caM17,
.headerCardsHorizontalLeft .caM18,
.headerCardsHorizontalLeft .caM19,
.headerCardsHorizontalLeft .caM20,
.headerCardsHorizontalLeft .caM21,
.headerCardsHorizontalLeft .caM22,
.headerCardsHorizontalLeft .caM23,
.headerCardsHorizontalLeft .caM24,
.headerCardsHorizontalLeft .caM25,
.headerCardsHorizontalLeft .caM26,
.headerCardsHorizontalLeft .caM27,
.headerCardsHorizontalLeft .caM28,
.headerCardsHorizontalLeft .caM29,
.headerCardsHorizontalLeft .caM30,
.headerCardsHorizontalLeft .caM31 {
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(3px 0px 3px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(3px 0px 3px rgba(0, 0, 0, 0.7));
}
.caM0,
.caM1,
.caM2,
.caM3,
.caM4,
.caM5,
.caM6,
.caM7,
.caM8,
.caM9,
.caM10,
.caM11,
.caM12,
.caM13,
.caM14,
.caM15,
.caM16,
.caM17,
.caM18,
.caM19,
.caM20,
.caM21,
.caM22,
.caM23,
.caM24,
.caM25,
.caM26,
.caM27,
.caM28,
.caM29,
.caM30,
.caM31 {
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(-3px 0px 3px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(-3px 0px 3px rgba(0, 0, 0, 0.7));
}
.caM0 {
    background: url("../cards/M/0.png");
}
.caM1 {
    background: url("../cards/M/1.png");
}
.caM2 {
    background: url("../cards/M/2.png");
}
.caM3 {
    background: url("../cards/M/3.png");
}
.caM4 {
    background: url("../cards/M/4.png");
}
.caM5 {
    background: url("../cards/M/5.png");
}
.caM6 {
    background: url("../cards/M/6.png");
}
.caM7 {
    background: url("../cards/M/7.png");
}
.caM8 {
    background: url("../cards/M/8.png");
}
.caM9 {
    background: url("../cards/M/9.png");
}
.caM10 {
    background: url("../cards/M/10.png");
}
.caM11 {
    background: url("../cards/M/11.png");
}
.caM12 {
    background: url("../cards/M/12.png");
}
.caM13 {
    background: url("../cards/M/13.png");
}
.caM14 {
    background: url("../cards/M/14.png");
}
.caM15 {
    background: url("../cards/M/15.png");
}
.caM16 {
    background: url("../cards/M/16.png");
}
.caM17 {
    background: url("../cards/M/17.png");
}
.caM18 {
    background: url("../cards/M/18.png");
}
.caM19 {
    background: url("../cards/M/19.png");
}
.caM20 {
    background: url("../cards/M/20.png");
}
.caM21 {
    background: url("../cards/M/21.png");
}
.caM22 {
    background: url("../cards/M/22.png");
}
.caM23 {
    background: url("../cards/M/23.png");
}
.caM24 {
    background: url("../cards/M/24.png");
}
.caM25 {
    background: url("../cards/M/25.png");
}
.caM26 {
    background: url("../cards/M/26.png");
}
.caM27 {
    background: url("../cards/M/27.png");
}
.caM28 {
    background: url("../cards/M/28.png");
}
.caM29 {
    background: url("../cards/M/29.png");
}
.caM30 {
    background: url("../cards/M/30.png");
}
.caM31 {
    background: url("../cards/M/31.png");
}


.senka {
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.6));
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.6));
}

/*#00ff00*/
.senkatalon
{
    -webkit-filter: drop-shadow(4px -1px 4px #00ff00)
                  drop-shadow(-4px 0px 4px 	#00ff00)!important;
  filter: drop-shadow(4px -1px 4px	#00ff00) 
          drop-shadow(-4px 0px 4px	#00ff00)!important;
}

/*vertical distance*/

.vd1st,
.vd2nd,
.vd3rd,
.vd4th,
.vd5th,
.vd5th,
.vd6th {
    margin-left: 40px;
    margin-right: 45px;
}
.vd1st {
    margin-top: 0px;
    z-index: 60;
}
.vd2nd {
    margin-top: 17vh;
    z-index: 70;
}
.vd3rd {
    margin-top: 34vh;
    z-index: 80;
}
.vd4th {
    margin-top: 50vh;
    z-index: 90;
}
.vd5th {
    margin-top: 66vh;
    z-index: 100;
}
.vd6th {
    margin-top: 82vh;
    z-index: 110;
}
/*horizontal distance - left*/

.hdca1l {
    margin-left: 0%;
    margin-left: 0px;
    z-index: 55;
}
.hdca2l {
    margin-left: 12%;
    z-index: 54;
    margin-left: 0px;
}
.hdca3l {
    margin-left: 24%;
    z-index: 53;
    margin-left: 100px;
}
.hdca4l {
    margin-left: 36%;
    z-index: 52;
    margin-left: 111px;
}
.hdca5l {
    margin-left: 48%;
    z-index: 51;
    margin-left: 112px;
}
.hdca6l {
    margin-left: 60%;
    z-index: 50;
    margin-left: 122px;
}
.hdca7l {
    margin-left: 72%;
    z-index: 49;
    margin-left: 133px;
}
.hdca8l {
    margin-left: 84%;
    z-index: 48;
    margin-left: 144px;
}
/*horizontal distance - right*/

.hdca-1r {
    margin-right: 108%;
    right: -10%!important;
}
.hdca0r {
    margin-right: 96%;
    right: -10%!important;
}
.hdca1r {
    margin-right: 84%;
    right: -10%!important;
}
.hdca2r {
    margin-right: 72%;
    right: -10%!important;
}
.hdca3r {
    margin-right: 60%;
    right: -10%!important;
}
.hdca4r {
    margin-right: 48%;
    right: -10%!important;
}
.hdca5r {
    margin-right: 36%;
    right: -10%!important;
}
.hdca6r {
    margin-right: 24%;
    right: -10%!important;
}
.hdca7r {
    margin-right: 12%;
    right: -10%!important;
}
.hdca8r {
    margin-right: 0%;
    right: 0%!important;
}
/*vertikalno*/

@media all and (orientation: portrait) {
    .headerCardsHorizontalRight {
        right: 0px;
    }
}
@media all and (orientation: portrait) and (min-width: 100px) and (max-width: 360px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid red;*/
    }
    .FrontPlayer{
        margin-right:10px;
    }
    .ForwardDeal,
    .BackDeal {
        display: none!important;
    }
    .cardMadjarice {
        height: 80px;
        width: 50px;
    }
    .cardFrancuske {
        height: 80px;
        width: 54px;
    }
    .dropbtn {
        padding: 2px 10px 2px 10px;
        font-size: 14px;
    }
    .hdca1l {
        background-size: 200% 100%!important;
        width: 27px;
        height: 78px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 0px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 27px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 54px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 81px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 108px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 135px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 162px;
        z-index: 48;
    }
    .hdca8r {
        background-size: 200% 100%!important;
        width: 27px;
        height: 78px;
        margin-right: 0;
    }
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 40px;
    }
    .vd3rd {
        margin-top: 80px;
    }
    .vd4th {
        margin-top: 120px;
    }
    .vd5th {
        margin-top: 230px;
    }
    .vd6th {
        margin-top: 320px;
    }
    .FrontPlayer {
        margin-top: 390px;
    }
    .vd1st,
    .vd2nd,
    .vd3rd,
    .vd4th,
    .vd5th,
    .vd6th {
        margin-left: 7px!important;
        margin-right: 7px!important;
    }
}
@media all and (orientation: portrait) and (min-width: 360px) and (max-width: 490px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid yellow;*/
    }
    .FrontPlayer{
        margin-right:10px;
    }
    .dropbtn {
        padding: 2px 10px 2px 10px;
        font-size: 14px;
    }
    .cardFrancuske {
        height: 90px;
        width: 60px;
    }
    .cardMadjarice {
        height: 90px;
        width: 55px;
    }
    .hdca1l {
        background-size: 200% 100%!important;
        width: 30px;
        height: 88px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 0px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 30px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 60px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 90px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 120px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 150px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 180px;
        z-index: 48;
    }
    .hdca-1r {
        margin-right: 270px!important;
    }
    .hdca0r {
        margin-right: 240px!important;
    }
    .hdca1r {
        margin-right: 210px!important;
    }
    .hdca2r {
        margin-right: 180px!important;
    }
    .hdca3r {
        margin-right: 150px!important;
    }
    .hdca4r {
        margin-right: 120px!important;
    }
    .hdca5r {
        margin-right: 90px!important;
    }
    .hdca6r {
        margin-right: 60px!important;
    }
    .hdca7r {
        margin-right: 30px!important;
    }
    .hdca8r {
        margin-right: 0px!important;
    }
    .hdca8r {
        background-size: 200% 100%!important;
        width: 30px;
        height: 88px;
    }
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 45px;
    }
    .vd3rd {
        margin-top: 90px;
    }
    .vd4th {
        margin-top: 135px;
    }
    .vd5th {
        margin-top: 250px;
    }
    .vd6th {
        margin-top: 350px;
    }
    .FrontPlayer {
        margin-top: 420px;
    }
    .vd1st,
    .vd2nd,
    .vd3rd,
    .vd4th,
    .vd5th,
    .vd6th {
        margin-left: 7px!important;
        margin-right: 7px!important;
    }
    .ForwardDeal,
    .BackDeal {
        display: none!important;
    }
}
@media all and (orientation: portrait) and (min-width: 490px) and (max-width: 810px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid green;*/
    }
    .FrontPlayer{
        margin-right:20%;
    }
    .cardFrancuske {
        height: 150px;
        width: 100px;
    }
    .cardMadjarice {
        height: 150px;
        width: 92px;
    }
    .hdca1l {
        background-size: 200% 100%!important;
        width: 50px;
        height: 148px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 0px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 50px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 100px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 150px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 200px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 250px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 300px;
        z-index: 48;
    }
    .hdca-1r {
        margin-right: 450px!important;
    }
    .hdca0r {
        margin-right: 400px!important;
    }
    .hdca1r {
        margin-right: 350px!important;
    }
    .hdca2r {
        margin-right: 300px!important;
    }
    .hdca3r {
        margin-right: 250px!important;
    }
    .hdca4r {
        margin-right: 200px!important;
    }
    .hdca5r {
        margin-right: 150px!important;
    }
    .hdca6r {
        margin-right: 100px!important;
    }
    .hdca7r {
        margin-right: 50px!important;
    }
    .hdca8r {
        margin-right: 0px!important;
    }
    .hdca8r {
        background-size: 200% 100%!important;
        width: 50px;
        height: 148px;
        right: -5px!important;
    }
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 75px;
    }
    .vd3rd {
        margin-top: 150px;
    }
    .vd4th {
        margin-top: 225px;
    }
    .vd5th {
        margin-top: 400px;
    }
    .vd6th {
        margin-top: 570px;
    }
    .FrontPlayer {
        margin-top: 640px;
    }
    .BackDeal,
    .ForwardDeal {
        padding-top: 30vh!important;
    }
}
@media all and (orientation: portrait) and (min-width: 810px) and (max-width: 960px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid white;*/
    }
    .FrontPlayer{
        margin-right:30%;
    }
    .cardFrancuske {
        height: 170px;
        width: 112px;
    }
    .cardMadjarice {
        height: 170px;
        width: 100px;
    }
    .hdca1l {
        background-size: 200% 100%!important;
        width: 56px;
        height: 168px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 0px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 56px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 112px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 168px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 224px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 280px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 336px;
        z-index: 48;
    }
    .hdca-1r {
        margin-right: 504px!important;
    }
    .hdca0r {
        margin-right: 448px!important;
    }
    .hdca1r {
        margin-right: 392px!important;
    }
    .hdca2r {
        margin-right: 336px!important;
    }
    .hdca3r {
        margin-right: 280px!important;
    }
    .hdca4r {
        margin-right: 224px!important;
    }
    .hdca5r {
        margin-right: 168px!important;
    }
    .hdca6r {
        margin-right: 112px!important;
    }
    .hdca7r {
        margin-right: 56px!important;
    }
    .hdca8r {
        margin-right: 0px!important;
    }
    .hdca8r {
        background-size: 200% 100%!important;
        width: 56px;
        height: 168px;
    }
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 85px;
    }
    .vd3rd {
        margin-top: 170px;
    }
    .vd4th {
        margin-top: 225px;
    }
    .vd5th {
        margin-top: 450px;
    }
    .vd6th {
        margin-top: 500px;
    }
    .FrontPlayer {
        margin-top: 700px;
    }
    .BackDeal,
    .ForwardDeal {
        padding-top: 30vh!important;
    }
}

/*horizontalno*/

@media all and (orientation: landscape) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid white;*/
    }
}
@media all and (orientation: landscape) and (min-height: 100px) and (max-height: 340px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid red;*/
    }
    .FrontPlayer{
        margin-right:10px;
    }
    .dropbtn {
        padding: 2px 10px 2px 10px;
        font-size: 14px;
    }
    .ForwardDeal,
    .BackDeal {
        display: block!important;
    }
    .cardMadjarice {
        height: 80px;
        width: 50px;
    }
    .cardFrancuske {
        height: 80px;
        width: 54px;
    }
    .hdca1l {
        background-size: 200% 100%!important;
        width: 27px;
        height: 78px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 0px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 27px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 54px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 81px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 108px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 135px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 162px;
        z-index: 48;
    }

    .hdca-1r {
        margin-right: 285px!important;
    }
    .hdca0r {
        margin-right: 255px!important;
    }
    .hdca1r {
        margin-right: 225px!important;
    }
    .hdca2r {
        margin-right: 195px!important;
    }
    .hdca3r {
        margin-right: 165px!important;
    }
    .hdca4r {
        margin-right: 135px!important;
    }
    .hdca5r {
        margin-right: 105px!important;
    }
    .hdca6r {
        margin-right: 75px!important;
    }
    .hdca7r {
        right: 5px!important;
        margin-right: 0px!important;
    }
    .hdca8r {
        margin-right: 0px!important;
        right:0px!important;
    }
    .hdca8r {
        background-size: 200% 100%!important;
        width: 27px;
        height: 79px;
    }
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 30px;
    }
    .vd3rd {
        margin-top: 60px;
    }
    .vd4th {
        margin-top: 90px;
    }
    .vd5th {
        margin-top: 180px;
    }
    .vd6th {
        margin-top: 180px;
    }
    .FrontPlayer {
        margin-top: 345px;
    }
    /*.vd1st,
    .vd2nd,
    .vd3rd,
    .vd4th,
    .vd5th,
    .vd6th {
        margin-left: 35px!important;
        margin-right: 38px!important;
    }*/
    .BackDeal,
    .ForwardDeal {
        padding-top: 30vh!important;
    }

}
@media all and (orientation: landscape) and (min-height: 340px) and (max-height: 460px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid yellow;*/
    }
    .FrontPlayer{
        margin-right:10px;
    }
    .dropbtn {
        padding: 2px 10px 2px 10px;
        font-size: 16px;
    }
    .ForwardDeal,
    .BackDeal {
        display: block!important;
    }
    .cardMadjarice {
        height: 90px;
        width: 55px;
    }
    .cardFrancuske {
        height: 90px;
        width: 60px;
    }
    .hdca1l {
        background-size: 200% 100%!important;
        width: 30px;
        height: 89px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 0px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 40px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 80px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 120px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 160px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 200px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 240px;
        z-index: 48;
    }

    .hdca-1r {
        margin-right: 360px!important;
    }
    .hdca0r {
        margin-right: 320px!important;
    }
    .hdca1r {
        margin-right: 280px!important;
    }
    .hdca2r {
        margin-right: 240px!important;
    }
    .hdca3r {
        margin-right: 200px!important;
    }
    .hdca4r {
        margin-right: 160px!important;
    }
    .hdca5r {
        margin-right: 120px!important;
    }
    .hdca6r {
        margin-right: 80px!important;
    }
    .hdca7r {
        right: 0px!important;
        margin-right: 0px!important;
    }
    .hdca8r {
        margin-right: 0px!important;
        right:0px!important;
    }
    .hdca8r {
        background-size: 200% 100%!important;
        width: 30px;
        height: 89px;
    }
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 30px;
    }
    .vd3rd {
        margin-top: 60px;
    }
    .vd4th {
        margin-top: 90px;
    }
    .vd5th {
        margin-top: 200px;
    }
    .vd6th {
        margin-top: 200px;
    }
    .FrontPlayer {
        margin-top: 365px;
    }
    /*.vd1st,
    .vd2nd,
    .vd3rd,
    .vd4th,
    .vd5th,
    .vd6th {
        margin-left: 35px!important;
        margin-right: 38px!important;
    }*/
    .BackDeal,
    .ForwardDeal {
        padding-top: 30vh!important;
    }

}
@media all and (orientation: landscape) and (min-height: 460px) and (max-height: 560px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid green;*/
    }
    .FrontPlayer{
        margin-right:20%;
    }
    .cardMadjarice {
        height: 100px;
        width: 64px;
    }
    .dropbtn {
        padding: 2px 10px 2px 10px;
        font-size: 16px;
    }

    .cardFrancuske {
        height: 100px;
        width: 68px;
    }
    .hdca1l {
        background-size: 200% 100%!important;
        width: 34px;
        height: 98px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 0px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 40px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 80px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 120px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 160px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 200px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 240px;
        z-index: 48;
    }
    .hdca-1r {
        margin-right: 390px!important;
    }
    .hdca0r {
        margin-right: 350px!important;
    }
    .hdca1r {
        margin-right: 310px!important;
    }
    .hdca2r {
        margin-right: 270px!important;
    }
    .hdca3r {
        margin-right: 230px!important;
    }
    .hdca4r {
        margin-right: 190px!important;
    }
    .hdca5r {
        margin-right: 150px!important;
    }
    .hdca6r {
        margin-right: 110px!important;
    }
    .hdca7r {
        margin-right: 70px!important;
    }
    .hdca8r {
        margin-right: 0px!important;
        right:0px!important;
    }
    .hdca8r {
        background-size: 200% 100%!important;
        width: 34px;
        height: 99px;
    }
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 35px;
    }
    .vd3rd {
        margin-top: 70px;
    }
    .vd4th {
        margin-top: 105px;
    }
    .vd5th {
        margin-top: 225px;
    }
    .vd6th {
        margin-top: 225px;
    }
    .FrontPlayer {
        margin-top: 400px;
    }
    .BackDeal,
    .ForwardDeal {
        padding-top: 30vh!important;
    }
}
@media all and (orientation: landscape) and (min-height: 560px) and (max-height: 640px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid black;*/
    }
    .dropbtn {
        padding: 1px 10px 1px 10px;
        font-size: 14px;
    }
    .Nav-bar-title {
        font-size: 18px!important;
    }
    .navbar-header
    {
        padding:3px!important;
    }
    .navbar
    {
        height: 30px;
    }
    .cardMadjarice {
        height: 120px;
        width:  75px;
    }
    .cardFrancuske {
        height: 120px;
        width: 80px;
    }
    .hdca1l {
        /*background-size: 200% 100%!important;
        width: 40px;
        height: 118px;*/
        margin-top: -2px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 50px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 100px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 150px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 200px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 250px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 300px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 350px;
        z-index: 48;
    }
    .hdca-1r {
        margin-right: 450px!important;right: 0px!important;
    }
    .hdca0r {
        margin-right: 400px!important;right: 0px!important;
    }
    .hdca1r {
        margin-right: 350px!important;right: 0px!important;
    }
    .hdca2r {
        margin-right: 300px!important;right: 0px!important;
    }
    .hdca3r {
        margin-right: 250px!important;right: 0px!important;
    }
    .hdca4r {
        margin-right: 200px!important;right: 0px!important;
    }
    .hdca5r {
        margin-right: 150px!important;right: 0px!important;
    }
    .hdca6r {
        margin-right: 100px!important;right: 0px!important;
    }
    .hdca7r {
        margin-right: 50px!important;
        right: 0px!important;
    }
    .hdca8r {
        margin-right: 0px!important;
       
    }
    .hdca8r {
        /*background-size: 200% 100%!important;
        width: 56px;
        height: 168px;*/
    }
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 50px;
    }
    .vd3rd {
        margin-top: 100px;
    }
    .vd4th {
        margin-top: 150px;
    }
    .vd5th {
        margin-top: 280px;
    }
    .vd6th {
        margin-top: 310px;
    }
    .FrontPlayer {
        margin-top: 475px;
    }
    .BackDeal,
    .ForwardDeal {
        padding-top: 30vh!important;
    }
}
@media all and (orientation: landscape) and (min-height: 640px) and (max-height: 760px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid white;*/
    }
    .dropbtn {
        padding: 2px 10px 2px 10px;
        font-size: 16px;
    }
    .Nav-bar-title {
        font-size: 20px!important;
    }
    .navbar-header
    {
        padding:3px!important;
    }
    .navbar
    {
        height: 34px;
    }
    .cardFrancuske {
        height: 140px;
        width: 90px;
    }
    .cardMadjarice {
        height: 140px;
        width: 85px;
    }
    .hdca1l {
        /*background-size: 200% 100%!important;
        width: 56px;
        height: 168px;*/
        margin-top:-2px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 60px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 120px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 180px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 240px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 300px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 360px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 420px;
        z-index: 48;
    }
    .hdca-1r {
        margin-right: 540px!important;right:0px!important;
    }
    .hdca0r {
        margin-right: 480px!important;right:0px!important;
    }
    .hdca1r {
        margin-right: 420px!important;right:0px!important;
    }
    .hdca2r {
        margin-right: 360px!important;right:0px!important;
    }
    .hdca3r {
        margin-right: 300px!important;right:0px!important;
    }
    .hdca4r {
        margin-right: 240px!important;right:0px!important;
    }
    .hdca5r {
        margin-right: 180px!important;right:0px!important;
    }
    .hdca6r {
        margin-right: 120px!important;right:0px!important;
    }
    .hdca7r {
        margin-right: 60px!important;right:0px!important;
    }
    .hdca8r {
        margin-right: 0px!important;right:0px!important;
    }
    .hdca8r {
        /*background-size: 200% 100%!important;
        width: 56px;
        height: 168px;*/
    }
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 50px;
    }
    .vd3rd {
        margin-top: 100px;
    }
    .vd4th {
        margin-top: 150px;
    }
    .vd5th {
        margin-top: 300px;
    }
    .vd6th {
        margin-top: 350px;
    }
    .FrontPlayer {
        margin-top: 515px;
    }
    .BackDeal,
    .ForwardDeal {
        padding-top: 40vh!important;
    }
}
@media all and (orientation: landscape) and (min-height: 760px) and (max-height: 860px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid purple;*/
    }
    .cardFrancuske {
        height: 150px;
        width: 100px;
    }
    .cardMadjarice {
        height: 150px;
        width: 92px;
    }
    .dropbtn {
        padding: 2px 10px 2px 10px;
        font-size: 16px;
    }
    .hdca1l {
        /*background-size: 200% 100%!important;
        width: 56px;
        height: 168px;*/
                margin-top:-4px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 60px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 120px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 180px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 240px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 300px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 360px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 400px;
        z-index: 48;
    }
    .hdca-1r {
        margin-right: 540px!important;right:0px!important;
    }
    .hdca0r {
        margin-right: 480px!important;right:0px!important;
    }
    .hdca1r {
        margin-right: 420px!important;right:0px!important;
    }
    .hdca2r {
        margin-right: 360px!important;right:0px!important;
    }
    .hdca3r {
        margin-right: 300px!important;right:0px!important;
    }
    .hdca4r {
        margin-right: 240px!important;right:0px!important;
    }
    .hdca5r {
        margin-right: 180px!important;right:0px!important;
    }
    .hdca6r {
        margin-right: 120px!important;right:0px!important;
    }
    .hdca7r {
        margin-right: 60px!important;right:0px!important;
    }
    .hdca8r {
        margin-right: 0px!important;right:0px!important;
    }
    /*.hdca8r {
        background-size: 200% 100%!important;
        width: 56px;
        height: 168px;
    }*/
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 65px;
    }
    .vd3rd {
        margin-top: 130px;
    }
    .vd4th {
        margin-top: 200px;
    }
    .vd5th {
        margin-top: 370px;
    }
    .vd6th {
        margin-top: 400px;
    }
    .FrontPlayer {
        margin-top: 600px;
    }
    .BackDeal,
    .ForwardDeal {
        padding-top: 30vh!important;
    }
}
@media all and (orientation: landscape) and (min-height: 860px) {
    .headerCardsHorizontalLeft,
    .headerCardsHorizontalRight {
        /*border: 2px solid red;*/
    }
    .dropbtn {
        padding: 2px 10px 2px 10px;
        font-size: 16px;
    }
    .cardMadjarice {
        height: 170px;
        width: 100px;
    }
    .cardFrancuske {
        height: 170px;
        width: 112px;
    }
    .hdca1l {
        /*background-size: 200% 100%!important;
        width: 56px;
        height: 168px;*/
        margin-top:-4px;
        margin-left: 0px!important;
        background-position: right;
        z-index: 55;
    }
    .hdca2l {
        margin-left: 60px;
        z-index: 54;
    }
    .hdca3l {
        margin-left: 120px;
        z-index: 53;
    }
    .hdca4l {
        margin-left: 180px;
        z-index: 52;
    }
    .hdca5l {
        margin-left: 240px;
        z-index: 51;
    }
    .hdca6l {
        margin-left: 300px;
        z-index: 50;
    }
    .hdca7l {
        margin-left: 360px;
        z-index: 49;
    }
    .hdca8l {
        margin-left: 400px;
        z-index: 48;
    }
    .hdca-1r {
        margin-right: 540px!important;right:0px!important;
    }
    .hdca0r {
        margin-right: 480px!important;right:0px!important;
    }
    .hdca1r {
        margin-right: 420px!important;right:0px!important;
    }
    .hdca2r {
        margin-right: 360px!important;right:0px!important;
    }
    .hdca3r {
        margin-right: 300px!important;right:0px!important;
    }
    .hdca4r {
        margin-right: 240px!important;right:0px!important;
    }
    .hdca5r {
        margin-right: 180px!important;right:0px!important;
    }
    .hdca6r {
        margin-right: 120px!important;right:0px!important;
    }
    .hdca7r {
        margin-right: 60px!important;right:0px!important;
    }
    .hdca8r {
        margin-right: 0px!important;right:0px!important;
    }
    /*.hdca8r {
        background-size: 200% 100%!important;
        width: 56px;
        height: 168px;
    }*/
    .vd1st {
        margin-top: 0px;
    }
    .vd2nd {
        margin-top: 75px;
    }
    .vd3rd {
        margin-top: 150px;
    }
    .vd4th {
        margin-top: 225px;
    }
    .vd5th {
        margin-top: 430px;
    }
    .vd6th {
        margin-top: 450px;
    }
    .FrontPlayer {
        margin-top: 690px;
    }
    .BackDeal,
    .ForwardDeal {
        padding-top: 30vh!important;
    }
}


/*.cardFrancuske150
{
    height:150px;
    width:100px;
}
.cardFrancuske120
{
    height:120px;
    width:80px;
}
.cardFrancuske100
{
    height:100px;
    width:67px;
}
.cardFrancuske90
{
    height:90px;
    width:60px;
}
.cardFrancuske80
{
    height:80px;
    width:53px;
}*/


/* male karte */

.caSF0 {
    background: url("../cards/SF/0.png");
}
.caSF1 {
    background: url("../cards/SF/1.png");
}
.caSF2 {
    background: url("../cards/SF/2.png");
}
.caSF3 {
    background: url("../cards/SF/3.png");
}
.caSF4 {
    background: url("../cards/SF/4.png");
}
.caSF5 {
    background: url("../cards/SF/5.png");
}
.caSF6 {
    background: url("../cards/SF/6.png");
}
.caSF7 {
    background: url("../cards/SF/7.png");
}
.caSF8 {
    background: url("../cards/SF/8.png");
}
.caSF9 {
    background: url("../cards/SF/9.png");
}
.caSF10 {
    background: url("../cards/SF/10.png");
}
.caSF11 {
    background: url("../cards/SF/11.png");
}
.caSF12 {
    background: url("../cards/SF/12.png");
}
.caSF13 {
    background: url("../cards/SF/13.png");
}
.caSF14 {
    background: url("../cards/SF/14.png");
}
.caSF15 {
    background: url("../cards/SF/15.png");
}
.caSF16 {
    background: url("../cards/SF/16.png");
}
.caSF17 {
    background: url("../cards/SF/17.png");
}
.caSF18 {
    background: url("../cards/SF/18.png");
}
.caSF19 {
    background: url("../cards/SF/19.png");
}
.caSF20 {
    background: url("../cards/SF/20.png");
}
.caSF21 {
    background: url("../cards/SF/21.png");
}
.caSF22 {
    background: url("../cards/SF/22.png");
}
.caSF23 {
    background: url("../cards/SF/23.png");
}
.caSF24 {
    background: url("../cards/SF/24.png");
}
.caSF25 {
    background: url("../cards/SF/25.png");
}
.caSF26 {
    background: url("../cards/SF/26.png");
}
.caSF27 {
    background: url("../cards/SF/27.png");
}
.caSF28 {
    background: url("../cards/SF/28.png");
}
.caSF29 {
    background: url("../cards/SF/29.png");
}
.caSF30 {
    background: url("../cards/SF/30.png");
}
.caSF31 {
    background: url("../cards/SF/31.png");
}


.caSM0 {
    background: url("../cards/SM/0.png");
}
.caSM1 {
    background: url("../cards/SM/1.png");
}
.caSM2 {
    background: url("../cards/SM/2.png");
}
.caSM3 {
    background: url("../cards/SM/3.png");
}
.caSM4 {
    background: url("../cards/SM/4.png");
}
.caSM5 {
    background: url("../cards/SM/5.png");
}
.caSM6 {
    background: url("../cards/SM/6.png");
}
.caSM7 {
    background: url("../cards/SM/7.png");
}
.caSM8 {
    background: url("../cards/SM/8.png");
}
.caSM9 {
    background: url("../cards/SM/9.png");
}
.caSM10 {
    background: url("../cards/SM/10.png");
}
.caSM11 {
    background: url("../cards/SM/11.png");
}
.caSM12 {
    background: url("../cards/SM/12.png");
}
.caSM13 {
    background: url("../cards/SM/13.png");
}
.caSM14 {
    background: url("../cards/SM/14.png");
}
.caSM15 {
    background: url("../cards/SM/15.png");
}
.caSM16 {
    background: url("../cards/SM/16.png");
}
.caSM17 {
    background: url("../cards/SM/17.png");
}
.caSM18 {
    background: url("../cards/SM/18.png");
}
.caSM19 {
    background: url("../cards/SM/19.png");
}
.caSM20 {
    background: url("../cards/SM/20.png");
}
.caSM21 {
    background: url("../cards/SM/21.png");
}
.caSM22 {
    background: url("../cards/SM/22.png");
}
.caSM23 {
    background: url("../cards/SM/23.png");
}
.caSM24 {
    background: url("../cards/SM/24.png");
}
.caSM25 {
    background: url("../cards/SM/25.png");
}
.caSM26 {
    background: url("../cards/SM/26.png");
}
.caSM27 {
    background: url("../cards/SM/27.png");
}
.caSM28 {
    background: url("../cards/SM/28.png");
}
.caSM29 {
    background: url("../cards/SM/29.png");
}
.caSM30 {
    background: url("../cards/SM/30.png");
}
.caSM31 {
    background: url("../cards/SM/31.png");
}

.caSF0,
.caSF1,
.caSF2,
.caSF3,
.caSF4,
.caSF5,
.caSF6,
.caSF7,
.caSF8,
.caSF9,
.caSF10,
.caSF11,
.caSF12,
.caSF13,
.caSF14,
.caSF15,
.caSF16,
.caSF17,
.caSF18,
.caSF19,
.caSF20,
.caSF21,
.caSF22,
.caSF23,
.caSF24,
.caSF25,
.caSF26,
.caSF27,
.caSF28,
.caSF29,
.caSF30,
.caSF31,
.caSM0,
.caSM1,
.caSM2,
.caSM3,
.caSM4,
.caSM5,
.caSM6,
.caSM7,
.caSM8,
.caSM9,
.caSM10,
.caSM11,
.caSM12,
.caSM13,
.caSM14,
.caSM15,
.caSM16,
.caSM17,
.caSM18,
.caSM19,
.caSM20,
.caSM21,
.caSM22,
.caSM23,
.caSM24,
.caSM25,
.caSM26,
.caSM27,
.caSM28,
.caSM29,
.caSM30,
.caSM31 {
    height:60px;
    width:40px;
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color='#444')";
    filter: url(#drop-shadow);
    -webkit-filter: drop-shadow(-3px 0px 3px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(-3px 0px 3px rgba(0, 0, 0, 0.7));
}