.playersfield {
    position: relative;
    max-width: 1755px;
    margin: 70px auto 0px;
    height: 283px;
    background-image:url(../img/pitch.png);
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center top;

}

.playercaption {
    background: #FFF; 
    max-width: 100px;
    padding: 2px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    margin: 0 auto 5px;
    -webkit-box-shadow: 3px 1px 3px 1px rgba(0,0,0,0.2);
box-shadow: 3px 1px 3px 1px rgba(0,0,0,0.2);
}

/*.playercaption:before {
    content: "";
    position: absolute;
    top: 74px;
    border: 5px transparent solid;
    border-top-color: #ffffff;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    display: inline-block;
}*/

.playercaption p {
        text-transform: uppercase;
        font-size: 12px;
        text-align: center;
}


.player {
    background: url(/promos/step-up-2018/img/player.png) no-repeat;
    background-size: contain;
    width: 80px;
    height: 110px;
    margin: auto;
}

.player p {
        top: 19px;
        font-size: 25px;
        left: 40px;
        position: relative;
}

#player1 {
    top: -70px;
    position: absolute;
    z-index: 11;
}

#player2 {
    top: -40px;
    position: absolute;
    z-index: 12;
}

#player3 {
    top: 0px;
    position: absolute;
    z-index: 13;
}

#player4 {
    top: 20px;
    position: absolute;
    z-index: 14;
}

#player5 {
    top: 70px;
    position: absolute;
    z-index: 15;
}


@keyframes left90 {
    0%   {left:0px;}
    100% {left:90%;}
}

@keyframes left85 {
    0%   {left:0px;}
    100% {left:80%;}
}
@keyframes left80 {
    0%   {left:0px;}
    100% {left:80%;}
}
@keyframes left75 {
    0%   {left:0px;}
    100% {left:75%;}
}

@keyframes left70 {
    0%   {left:0px;}
    100% {left:70%;}
}

@keyframes left65 {
    0%   {left:0px;}
    100% {left:65%;}

}
@keyframes left60 {
    0%   {left:0px;}
    100% {left:60%;}
}
@keyframes left55 {
    0%   {left:0px;}
    100% {left:55%;}
}

@keyframes left50 {
    0%   {left:0px;}
    100% {left:50%;}
}

@keyframes left45 {
    0%   {left:0px;}
    100% {left:45%;}
}
@keyframes left40 {
    0%   {left:0px;}
    100% {left:40%;}
}
@keyframes left35 {
    0%   {left:0px;}
    100% {left:35%;}
}
@keyframes left30 {
    0%   {left:0px;}
    100% {left:30%;}
}
@keyframes left25 {
    0%   {left:0px;}
    100% {left:25%;}
}
@keyframes left20 {
    0%   {left:0px;}
    100% {left:20%;}
}
@keyframes left15 {
    0%   {left:0px;}
    100% {left:15%;}
}
@keyframes left10 {
    0%   {left:0px;}
    100% {left:10%;}
}
@keyframes left5 {
    0%   {left:0px;}
    100% {left:5%;}
}


/**Player1**/
#player1.day1,
#player1.day2, 
#player1.day3,
#player1.day4 {
    animation-name: left30;
    animation-duration: 4s;
    left:30%;
}

#player1.day5,
#player1.day6, 
#player1.day7,
#player1.day8{
    animation-name: left35;
    animation-duration: 4s;
    left:35%;

}

#player1.day9,
#player1.day10, 
#player1.day11,
#player1.day12{
    animation-name: left45;
    animation-duration: 4s;
    left:45%;
}

#player1.day13,
#player1.day14, 
#player1.day15,
#player1.day16,
#player1.day17 {
    animation-name: left50;
    animation-duration: 4s;
    left:50%;
}

#player1.day18, 
#player1.day19,
#player1.day20,
#player1.day21,
#player1.day22 {
    animation-name: left60;
    animation-duration: 4s;
    left:60%;
}


#player1.day23,
#player1.day24,
#player1.day25, 
#player1.day26,
#player1.day27 {
    animation-name: left70;
    animation-duration: 4s;
    left:70%;
}



#player1.day28,
#player1.day29,
#player1.day30,
#player1.day31 {
    animation-name: left70;
    animation-duration: 4s;
   left:70%;
}

/**Player2**/



/**Player2**/
#player2.day1,
#player2.day2, 
#player2.day3,
#player2.day4 {
    animation-name: left25;
    animation-duration: 4s;
    left:25%;
}


#player2.day5,
#player2.day6, 
#player2.day7,
#player2.day8 {
    animation-name: left30;
    animation-duration: 4s;
    left: 30%;
}



#player2.day9,
#player2.day10,
#player2.day11,
#player2.day12 {
    animation-name: left40;
    animation-duration: 4s;
    left:40%;
}


#player2.day13,
#player2.day14,
#player2.day15,
#player2.day16,
#player2.day17 {
    animation-name: left45;
    animation-duration: 4s;
    left:45%;
}


#player2.day18,
#player2.day19,
#player2.day20,
#player2.day21, 
#player2.day22 {
    animation-name: left55;
    animation-duration: 4s;
    left:53%;
}


#player2.day23,
#player2.day24, 
#player2.day25,
#player2.day26,
#player2.day27 {
    animation-name: left60;
    animation-duration: 4s;
    left:60%;
}


#player2.day28,
#player2.day29,
#player2.day30,
#player2.day31 {
    animation-name: left60;
    animation-duration: 4s;
   left:60%;
}

/*Player3*/


/**Player3**/
#player3.day1,
#player3.day2, 
#player3.day3,
#player3.day4 {
    animation-name: left20;
    animation-duration: 4s;
    left:20%;
}

#player3.day5,
#player3.day6, 
#player3.day7,
#player3.day8 {
    animation-name: left25;
    animation-duration: 4s;
    left:25%;

}

#player3.day9,
#player3.day10, 
#player3.day11,
#player3.day12 {
    animation-name: left35;
    animation-duration: 4s;
    left:35%;
}

#player3.day13,
#player3.day14, 
#player3.day15,
#player3.day16,
#player3.day17 {
    animation-name: left40;
    animation-duration: 4s;
    left:40%;
}


#player3.day18, 
#player3.day19,
#player3.day20,
#player3.day21,
#player3.day22 {
    animation-name: left50;
    animation-duration: 4s;
    left:47%;
}


#player3.day23,
#player3.day24,
#player3.day25,
#player3.day26,
#player3.day27 {
    animation-name: left50;
    animation-duration: 4s;
    left:50%;
}

 

#player3.day28,
#player3.day29,
#player3.day30,
#player3.day31 {
    animation-name: left50;
    animation-duration: 4s;
   left:50%;
}

/*Player4*/



#player4.day1,
#player4.day2, 
#player4.day3,
#player4.day4 {
    animation-name: left15;
    animation-duration: 4s;
    left: 15%;
}

#player4.day5,
#player4.day6, 
#player4.day7,
#player4.day8{
    animation-name: left20;
    animation-duration: 4s;
    left:20%;

}

#player4.day9,
#player4.day10, 
#player4.day11,
#player4.day12{
    animation-name: left30;
    animation-duration: 4s;
    left:30%;
}

#player4.day13,
#player4.day14, 
#player4.day15,
#player4.day16,
#player4.day17 {
    animation-name: left35;
    animation-duration: 4s;
    left:35%;
}


#player4.day18, 
#player4.day19,
#player4.day20,
#player4.day21,
#player4.day22
{
    animation-name: left45;
    animation-duration: 4s;
    left:41%;
}


#player4.day23,
#player4.day24,
#player4.day25,
#player4.day26,
#player4.day27
{
    animation-name: left40;
    animation-duration: 4s;
    left:40%;
}

 

#player4.day28,
#player4.day29,
#player4.day30,
#player4.day31 {
    animation-name: left40;
    animation-duration: 4s;
   left: 40%;
}

/*Player5*/


#player5.day1,
#player5.day2, 
#player5.day3,
#player5.day4 {
    animation-name: left10;
    animation-duration: 4s;
    left:10%;
}

#player5.day5,
#player5.day6, 
#player5.day7,
#player5.day8 {
    animation-name: left15;
    animation-duration: 4s;
    left:15%;

}

#player5.day9,
#player5.day10, 
#player5.day11,
#player5.day12{
    animation-name: left25;
    animation-duration: 4s;
    left:25%;
}

#player5.day13,
#player5.day14, 
#player5.day15,
#player5.day16,
#player5.day17 {
    animation-name: left30;
    animation-duration: 4s;
    left:30%;
}


#player5.day18, 
#player5.day19,
#player5.day20,
#player5.day21,
#player5.day22
{
    animation-name: left40;
    animation-duration: 4s;
    left:35%;
}


#player5.day23,
#player5.day24,
#player5.day25,
#player5.day26,
#player5.day27
{
    animation-name: left30;
    animation-duration: 4s;
    left:30%;
}

 

#player5.day28,
#player5.day29,
#player5.day30,
#player5.day31 {
    animation-name: left30;
    animation-duration: 4s;
   left: 30%;
}



/***********************************************/


@media only screen and (max-width: 399px) {

/**PLAYER POSITIONS**/ 

/*#player1 {
    top: 165px;
    left: 227px;
}

#player2 {
    top: 208px;
    left: 180px;
}

#player3 {
    top: 266px;
    left: 132px;
}

#player4 {
    top: 321px;
    left: 90px;
}


#player5 {
    top: 370px;
    left: 40px;
}

.playercaption {
       margin: 0 0 0 -21px;
}*/

}


/***********************************************/



@media only screen and (min-width: 400px) and (max-width: 639px) {

  /**PLAYER POSITIONS**/ 

/*#player1 {
    top: 165px;
    left: 227px;
}

#player2 {
    top: 208px;
    left: 180px;
}

#player3 {
    top: 266px;
    left: 132px;
}

#player4 {
    top: 321px;
    left: 90px;
}


#player5 {
    top: 370px;
    left: 40px;
}*/


}

/***********************************************/





@media only screen and (min-width: 640px) and (max-width: 805px) {


}




/***********************************************/

@media only screen and (min-width: 806px) and (max-width: 1000px) {

}