.game{
    padding: 60px 0;
    background: url('../images/background-area.png');
}

.game-area{
    position: relative;
    /*background: url('../images/area.png') no-repeat;*/
    width: 100%;
    height: 600px;
    margin: 9px auto;
    padding: 20px;
    border: solid 1px rgba(5,111,165,0.7);
    overflow: hidden;
    background-size: cover;
}


.game-area .cards-game-inner{
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;-o-transition: transform 0.8s;-webkit-transition: transform 0.8s;-moz-transition: transform 0.8s;
    transform-style: preserve-3d;
}

.game-area .flip-cards-front,
.game-area .flip-cards-back{
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.game-area .flip-cards-back{
    transform: rotateY(180deg);
}

/* BEGIN score screen */
.score-tab{
    /*width: 100%;*/
    background: rgba(0,0,0,0.3);
    margin-top: 10px;
    border: solid 1px #f0c300;
    height: auto;
}

.header-tab{
    border-bottom: solid 1px #f0c300;
    padding-bottom: 7px;
}

.header-tab h1{
    text-transform: uppercase;
    color: #f0c300;
    font-size: 15px;
    margin-bottom: 0;
    padding-top: 13px;
}

.body-tab{
    padding: 12px 0;
    border-bottom: solid 1px #f0c300;
    color: #e7e7e7;
}

.point-player{
    justify-content: end;
    display: flex;
}

.name-player,
.point-player,
.score-point,
.title-tokens{
    font-size: 13px;
}

.selected{
    color: #f4d655;
}

.score-point{
    color: #f0c300;
    margin-bottom: 0;
    margin-top: 10px;
    font-weight: bold;
}

.tokens{
    width: 100%;
    max-width: 30px;
    float:right;
    padding-top:6px;
}
/* END score screen */

/* BEGIN of the game settings */
.settings{
    position: absolute;
    bottom: 20px;
    right: 0;
}

.setico{
    background-size:20px !important;
    padding:20px;
    background-color: rgba(0,0,0,0.7) !important;
} 

.modify{
    background: url(../images/set.png) 50% no-repeat;
}

.doback{
    background: url(../images/home.png) 50% no-repeat;
    margin-bottom: 10px;
}

.setico:hover{
    cursor: pointer;
    background-color: rgba(5,111,165,0.5) !important;
}
/* END of the game settings */

.game-area .players img,
.game-area .opponent-1 img,
.game-area .opponent-2 img,
.game-area .opponent-3 img,
.game-area .opponent-4 img{
    border-radius: 50%;
    /* width: 80px; */
    border: solid 3px #d4caca;
    z-index: 20;
}

.game-area .cards{
    width: 65px;
}

.game-area .cards-game{
    width: 65px;
}

.game-area .cards-game{
    perspective: 1000px;
    /* width: 65px; */
    height: 180px;
    position: absolute;
}

.name-opponent{
    background: rgba(0,0,0,0.7);
    color: #fff;
    height: 28px;
    padding: 1px 40px;
    position: absolute;
    margin: 0;
}

 /* BEGIN of the player */
 .name-ofplayer{
    background: #056fa5;
    color: #fff;
    height: 28px;
    padding: 1px 40px;
    position: absolute;
    left: 110%;
    top: 40%;
    margin: 0;
}

.game-area .players{
    left: 44%;
    bottom: 20px;
    z-index:20;
}

.game-area .player-card{
    position: absolute;
}

.game-area .player-card:hover{
    cursor: pointer;
    border-radius: 15px;
    box-shadow: 0 0 30px 3px #056fa5;
} 

.game-area .card-in-front-1,
.game-area .card-in-front-2,
.game-area .card-in-front-3,
.game-area .card-in-front-4,
.game-area .card-in-front-5{
    transform: rotate(0deg);
    bottom: 85px;
    transition: transform 0.8s;
    -o-transition: transform 0.8s;
    -webkit-transition: transform 0.8s;
    -moz-transition: transform 0.8s;
}

.game-area .card-in-front-1{
    left: 35%;
    z-index:1;
}

.game-area .card-in-front-2{
    left: 39%;
    z-index:2;
}

.game-area .card-in-front-3{
    left: 44%;
    z-index:3;
}

.game-area .card-in-front-4{
    left: 49%;
    z-index:4;
}

.game-area .card-in-front-5{
    left: 53%;
    z-index:5;
}
/* END of the player */

.game-area .opponent-1,
.game-area .opponent-2,
.game-area .opponent-3,
.game-area .opponent-4,
.game-area .players{
    position: absolute;
}

.game-area .cards-opponent1-1,
.game-area .cards-opponent1-2,
.game-area .cards-opponent1-3,
.game-area .cards-opponent1-4,
.game-area .cards-opponent1-5{
    transform: rotate(90deg);
}

.game-area .cards-opponent2-1,
.game-area .cards-opponent2-2,
.game-area .cards-opponent2-3,
.game-area .cards-opponent2-4,
.game-area .cards-opponent2-5{
    transform: rotateZ(180deg);
}

.game-area .cards-opponent3-1,
.game-area .cards-opponent3-2,
.game-area .cards-opponent3-3,
.game-area .cards-opponent3-4,
.game-area .cards-opponent3-5{
    transform: rotateZ(180deg);
}

.game-area .cards-opponent4-1,
.game-area .cards-opponent4-2,
.game-area .cards-opponent4-3,
.game-area .cards-opponent4-4,
.game-area .cards-opponent4-5{
    transform: rotateZ(270deg);
}

/* Global Desktop view */
@media only screen and (min-width: 1025px){ 
    .players img,
    .opponents img{
        width: 80px;
    }
    /* .game-area{
        height: 600px;
    }
    
    .game-area .cards{
        width: 65px;
    }
    
    .game-area .cards-game{
        width: 65px;
    } */
    .name-opponent-2,
    .name-opponent-3{
        left: 100%;
        top: 40%;
    }
    
    .name-opponent-1,
    .name-opponent-4{
        left: -25%;
        top: 110%;
    }
    
    /* BEGIN the opponent in the middle left - 1st */
    .game-area .opponent-1{
        left: 1%;
        top: 45%;
        z-index: 6;
    }
    
    .game-area .cards-opponent1-1,
    .game-area .cards-opponent1-2,
    .game-area .cards-opponent1-3,
    .game-area .cards-opponent1-4,
    .game-area .cards-opponent1-5{
        left: 2%;
    }
    
    .game-area .cards-opponent1-1{
        z-index: 1;
        bottom: 22%;
    }
    
    .game-area .cards-opponent1-2{
        z-index: 2;
        bottom: 28%;
    }
    
    .game-area .cards-opponent1-3{
        z-index: 3;
        bottom: 34%;
    }
    
    .game-area .cards-opponent1-4{
        z-index: 4;
        bottom: 40%;
    }
    
    .game-area .cards-opponent1-5{
        z-index: 5;
        bottom: 46%; 
    }
    /* END the opponent in the middle left - 1st */
    
    /* BEGIN the opponent top left -2nd */
    .game-area .opponent-2{
        left: 27%;
        z-index: 6;
    }
    
    .game-area .cards-opponent2-1,
    .game-area .cards-opponent2-2,
    .game-area .cards-opponent2-3,
    .game-area .cards-opponent2-4,
    .game-area .cards-opponent2-5{
        top: -1%;
    }
    
    .game-area .cards-opponent2-1{
        left: 20%;
        z-index: 1;
    }
    
    .game-area .cards-opponent2-2{
        left: 24%;
        z-index: 2;
    }
    
    .game-area .cards-opponent2-3{
        left: 28%;
        z-index: 3;
    }
    
    .game-area .cards-opponent2-4{
        left: 32%;
        z-index: 4;
    }
    
    .game-area .cards-opponent2-5{
        left: 36%;
        z-index: 5;
    }
    /* END the opponent top left - 2nd */
    
    /* BEGIN the opponent top right - 3rd */
    .game-area .opponent-3{
        right: 27%;
        z-index: 6;
    }
    
    .game-area .cards-opponent3-1,
    .game-area .cards-opponent3-2,
    .game-area .cards-opponent3-3,
    .game-area .cards-opponent3-4,
    .game-area .cards-opponent3-5{
        top: -1%;
    }
    
    .game-area .cards-opponent3-1{
        left: 58%;
        z-index: 1;
    }
    
    .game-area .cards-opponent3-2{
        left: 62%;
        z-index: 2;
    }
    
    .game-area .cards-opponent3-3{
        left: 66%;
        z-index: 3;
    }
    
    .game-area .cards-opponent3-4{
        left: 70%;
        z-index: 4;
    }
    
    .game-area .cards-opponent3-5{
        left: 74%;
        z-index: 5;
    }
    /* END the opponent top right 6 - 3rd */

    /* BEGIN the opponent in the middle right - 4th */
    .game-area .opponent-4{
        right: 1%;
        top:45%;
        z-index: 6;
    }
    
    .game-area .cards-opponent4-1,
    .game-area .cards-opponent4-2,
    .game-area .cards-opponent4-3,
    .game-area .cards-opponent4-4,
    .game-area .cards-opponent4-5{
        right: 1%;
    }
    
    .game-area .cards-opponent4-1{
        bottom: 22%;
        z-index: 1;
    }
    
    .game-area .cards-opponent4-2{
        bottom: 28%;
        z-index: 2;
    }
    
    .game-area .cards-opponent4-3{
        bottom: 34%;
        z-index: 3;
    }
    
    .game-area .cards-opponent4-4{
        bottom: 40%;
        z-index: 4;
    }
    
    .game-area .cards-opponent4-5{
        bottom: 46%;
        z-index: 5;
    }
    /* END the opponent in the middle right - 4th */
}
/* Global Desktop view */


/* Tablet view */
@media only screen and (min-width: 768px) and (max-width: 1024px){ 
    .players img,
    .opponents img{
        width: 80px;
    }

    .name-opponent-2,
    .name-opponent-3{
        left: 100%;
        top: 40%;
    }
    
    .name-opponent-1,
    .name-opponent-4{
        left: -25%;
        top: 110%;
    }
    
    /* BEGIN the opponent in the middle left - 1st */
    .game-area .opponent-1{
        left: 4%;
        top: 46%;
        z-index: 20;
    }
    
    .game-area .cards-opponent1-1,
    .game-area .cards-opponent1-2,
    .game-area .cards-opponent1-3,
    .game-area .cards-opponent1-4,
    .game-area .cards-opponent1-5{
        left: 4%;
    }
    
    .game-area .cards-opponent1-1{
        z-index: 1;
        bottom: 19%;
    }
    
    .game-area .cards-opponent1-2{
        z-index: 2;
        bottom: 25%;
    }
    
    .game-area .cards-opponent1-3{
        z-index: 3;
        bottom: 31%;
    }
    
    .game-area .cards-opponent1-4{
        z-index: 4;
        bottom: 37%;
    }
    
    .game-area .cards-opponent1-5{
        z-index: 5;
        bottom: 43%; 
    }
    /* END the opponent in the middle left - 1st*/

    /* BEGIN the opponent top left - 2nd*/
    .game-area .opponent-2{
        left: 27%;
        z-index: 5;
    }
    
    .game-area .cards-opponent2-1,
    .game-area .cards-opponent2-2,
    .game-area .cards-opponent2-3,
    .game-area .cards-opponent2-4,
    .game-area .cards-opponent2-5{
        top: 0;
    }
    
    .game-area .cards-opponent2-1{
        left: 18%;
        z-index: 1;
    }
    
    .game-area .cards-opponent2-2{
        left: 23%;
        z-index: 2;
    }
    
    .game-area .cards-opponent2-3{
        left: 28%;
        z-index: 3;
    }
    
    .game-area .cards-opponent2-4{
        left: 33%;
        z-index: 4;
    }
    
    .game-area .cards-opponent2-5{
        left: 38%;
        z-index: 5;
    }
    /* END the opponent top left - 2nd*/
    
    /* BEGIN the opponent top right - 3rd */
    .game-area .opponent-3{
        right: 26%;
        z-index: 10;
    }
    
    .game-area .cards-opponent3-1,
    .game-area .cards-opponent3-2,
    .game-area .cards-opponent3-3,
    .game-area .cards-opponent3-4,
    .game-area .cards-opponent3-5{
        top: 0;
    }
    
    .game-area .cards-opponent3-1{
        left: 55%;
        z-index: 1;
    }
    
    .game-area .cards-opponent3-2{
        left: 60%;
        z-index: 2;
    }
    
    .game-area .cards-opponent3-3{
        left: 65%;
        z-index: 3;
    }
    
    .game-area .cards-opponent3-4{
        left: 70%;
        z-index: 4;
    }
    
    .game-area .cards-opponent3-5{
        left: 75%;
        z-index: 5;
    }
    /* END the opponent top right - 3rd */
    
    /* BEGIN the opponent in the middle right - 4th*/
    .game-area .opponent-4{
        right: 2%;
        top:46%;
        z-index: 20;
    }
    
    .game-area .cards-opponent4-1,
    .game-area .cards-opponent4-2,
    .game-area .cards-opponent4-3,
    .game-area .cards-opponent4-4,
    .game-area .cards-opponent4-5{
        right:2%;
    }
    
    .game-area .cards-opponent4-1{
        bottom: 19%;
        z-index: 1;
    }
    
    .game-area .cards-opponent4-2{
        bottom: 25%;
        z-index: 2;
    }
    
    .game-area .cards-opponent4-3{
        bottom: 31%;
        z-index: 3;
    }
    
    .game-area .cards-opponent4-4{
        bottom: 37%;
        z-index: 4;
    }
    
    .game-area .cards-opponent4-5{
        bottom: 43%;
        z-index: 5;
    }
    /* END the opponent in the middle right - 4th */
}
/* Tablet view */

@media only screen and (min-width:481px) and (max-width: 767px){
    .game-area{
        padding: 0;
        width: 100%;
    }

    .game-area .cards-game{
        width: 50px;
    }

    .cards-game-inner .cards{
        width: 50px;
    }

    .player-card .cards{
        width: 65px;
        transition : width 1s;
        -webkit-transition: width 1s;
        -moz-transition : width 1s;
        -o-transition: width 1s;
    }

    .opponent-1,
    .opponent-2,
    .opponent-3,
    .opponent-4,
    .opponent-5{
        z-index: 6;
    }

    .players img{
        width: 80px;
    }

    .opponents img{
        width: 65px;
    }

    /* BEGIN players */ 
    .players{
        bottom: 1%;
    }

    .card-in-front-1,
    .card-in-front-2,
    .card-in-front-3,
    .card-in-front-4,
    .card-in-front-5{
        bottom: 10%;
    }

    .card-in-front-5{
        left: 57%;
    }

    .card-in-front-4{
        left: 51%;
    }

    .card-in-front-3{
        left: 45%;
    }

    .card-in-front-2{
        left: 39%;
    }

    .card-in-front-1{
        left: 33%;
    }
    /* END players */ 

    /* BEGIN opponent in the left - 1st*/
    .opponent-1{
        left: 1%;
        top: 44%;
    }

    .cards-opponent1-1,
    .cards-opponent1-2,
    .cards-opponent1-3,
    .cards-opponent1-4,
    .cards-opponent1-5{
        left: 1%
    }

    .cards-opponent1-1{
        bottom: 27%;
        z-index: 5;
    }

    .cards-opponent1-2{
        bottom: 32%;
        z-index: 4;
    }

    .cards-opponent1-3{
        bottom: 37%;
        z-index: 3;
    }

    .cards-opponent1-4{
        bottom: 42%;
        z-index: 2;
    }

    .cards-opponent1-5{
        bottom: 47%;
        z-index: 1;
    }
    /* END opponent in the left - 1st */

    /* BEGIN opponent in the top left - 2nd*/
    .opponent-2{
        left: 22%;
        top: 2%;
        transform: translate(18%,1%);
        -o-transform: translate(18%,1%);
        -moz-transform: translate(18%,1%);
        -webkit-transform: translate(18%,1%);
    }

    .cards-opponent2-1{
        left: 16%;
    }

    .cards-opponent2-2{
        left: 21%;

    }

    .cards-opponent2-3{
        left: 26%;
    }

    .cards-opponent2-4{
        left: 31%;
    }

    .cards-opponent2-5{
        left: 36%;
    }
    /* eto */
    /* END opponent in the top left - 2nd  */

    /* BEGIN opponent in the top right - 3rd */    
    .opponent-3{
        right: 26%;
        top: 2%;
        transform: translate(26%,1%);
        -moz-transform: translate(26%,1%);
        -o-transform: translate(26%,1%);
        -webkit-transform: translate(26%,1%);
    }

    .cards-opponent3-1{
        left:57%;
    }

    .cards-opponent3-2{
        left:62%;
    }

    .cards-opponent3-3{
        left:67%;
    }

    .cards-opponent3-4{
        left:72%;
    }

    .cards-opponent3-5{
        left:77%;
    }
    /* END opponent in the top right - 3rd */ 
 
    /* BEGIN opponent in the right - 4th */
    .opponent-4{
        right: 1%;
        top: 44%;
    }

    .opponent-4 .name-opponent-4{
        left: -65%;
    }

    .cards-opponent4-1,
    .cards-opponent4-2,
    .cards-opponent4-3,
    .cards-opponent4-4,
    .cards-opponent4-5{
        right: 1%;
    }

    .cards-opponent4-1{
        bottom: 27%;
    }

    .cards-opponent4-2{
        bottom: 32%;
    }

    .cards-opponent4-3{
        bottom: 37%;
    }

    .cards-opponent4-4{
        bottom: 42%;
    }

    .cards-opponent4-5{
        bottom: 47%;
    }
    /* END opponent in the right */
    /* union position  */
    .cards-opponent2-1,
    .cards-opponent2-2,
    .cards-opponent2-3,
    .cards-opponent2-4,
    .cards-opponent2-5,
    .cards-opponent3-1,
    .cards-opponent3-2,
    .cards-opponent3-3,
    .cards-opponent3-4,
    .cards-opponent3-5{
        top: -5%;
    }


}



/* mobile view  */
/* @media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape){
    .game-area{
        width: 100%;
        height: 480px;
    }

    .game-area .opponent-1 img,
    .game-area .opponent-2 img,
    .game-area .opponent-3 img,
    .game-area .opponent-4 img{
        width: 65px;
    }

    .game-area .opponent-1{
        left: 1%;
    }

    .cards-game .cards{
        width:50px;
    }

    .player-card .cards{
        width: 65px;
    }
} */
/* mobile view  */


@media only screen and (max-width: 1200px){
    .container{
        max-width: 1200px;
        padding-right: 0;
        padding-left: 0;
    }
}