﻿
.field-wrap {
    position: relative;
    display: inline-block;
    /* float: left; */
    max-width: 1200px;
    margin: 0 auto;
    height: inherit;
}

.track-wrap {
    padding:0;
    margin:0 0 10px 0;
    width:100%;
    height:inherit;
}

.lb-info {
    padding:0;
    width:100%;
    height:inherit;
    color:#ffd800;
    font-size:14px;
    /*background-color:#000;*/
}

.lb-info span {
    position:relative;
    float:left;
    padding:5px 10px 5px 5px;
    text-transform:uppercase;
    background-color:#000;
}

.lb-info b {
    color:#FFF;
}

.position {
    background-color: #00632d;
    color: #FFF;
    font-weight: bold;
    padding: 15px;
    /*max-width: 50px;*/
    height: 50px;
}

.track {
    background-image:url(../img/track.jpg);
    height:50px
}

.col1-adj {
    padding: 0;
}


#horse1, #horse2, #horse3, #horse4, #horse5  {
    position:relative;
    float:left;
    background: url(../img/player.png) no-repeat;
    background-size: contain;
    width: 73px;
    height: 50px;
    margin: auto;
}

@keyframes left100 {
    0%   {left:0px;}
    100% {left:100%;}
}

@keyframes left95 {
    0%   {left:0px;}
    100% {left:95%;}
}

@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%;}
}


/**horse1**/
#horse1.day9,
#horse1.day10, 
#horse1.day11 {
    animation-name: left20;
    animation-duration: 4s;
    left:20%;
}

#horse1.day12,
#horse1.day13, 
#horse1.day14,
#horse1.day15 {
    animation-name: left45;
    animation-duration: 4s;
    left:45%;

}

#horse1.day16,
#horse1.day17, 
#horse1.day18,
#horse1.day19 {
    animation-name: left65;
    animation-duration: 4s;
    left:65%;
}

#horse1.day20,
#horse1.day21, 
#horse1.day22,
#horse1.day23 {
    animation-name: left70;
    animation-duration: 4s;
    left:70%;
}

#horse1.day24, 
#horse1.day25,
#horse1.day26 {
    animation-name: left80;
    animation-duration: 4s;
    left:80%;
}


/**horse2**/
#horse2.day9,
#horse2.day10, 
#horse2.day11 {
    animation-name: left15;
    animation-duration: 4s;
    left:15%;
}

#horse2.day12,
#horse2.day13, 
#horse2.day14,
#horse2.day15 {
    animation-name: left35;
    animation-duration: 4s;
    left:35%;

}

#horse2.day16,
#horse2.day17, 
#horse2.day18,
#horse2.day19 {
    animation-name: left55;
    animation-duration: 4s;
    left:55%;
}

#horse2.day20,
#horse2.day21, 
#horse2.day22,
#horse2.day23 {
    animation-name: left60;
    animation-duration: 4s;
    left:60%;
}

#horse2.day24, 
#horse2.day25,
#horse2.day26 {
    animation-name: left70;
    animation-duration: 4s;
    left:70%;
}


/**horse3**/
#horse3.day9,
#horse3.day10, 
#horse3.day11 {
    animation-name: left10;
    animation-duration: 4s;
    left:10%;
}

#horse3.day12,
#horse3.day13, 
#horse3.day14,
#horse3.day15 {
    animation-name: left25;
    animation-duration: 4s;
    left:25%;

}

#horse3.day16,
#horse3.day17, 
#horse3.day18,
#horse3.day19 {
    animation-name: left45;
    animation-duration: 4s;
    left:45%;
}

#horse3.day20,
#horse3.day21, 
#horse3.day22,
#horse3.day23 {
    animation-name: left50;
    animation-duration: 4s;
    left:50%;
}

#horse3.day24, 
#horse3.day25,
#horse3.day26 {
    animation-name: left60;
    animation-duration: 4s;
    left:60%;
}


/*horser4*/
#horse4.day9,
#horse4.day10, 
#horse4.day11 {
    animation-name: left5;
    animation-duration: 4s;
    left:5%;
}

#horse4.day12,
#horse4.day13, 
#horse4.day14,
#horse4.day15 {
    animation-name: left15;
    animation-duration: 4s;
    left:15%;

}

#horse4.day16,
#horse4.day17, 
#horse4.day18,
#horse4.day19 {
    animation-name: left35;
    animation-duration: 4s;
    left:35%;
}

#horse4.day20,
#horse4.day21, 
#horse4.day22,
#horse4.day23 {
    animation-name: left40;
    animation-duration: 4s;
    left:40%;
}

#horse4.day24, 
#horse4.day25,
#horse4.day26 {
    animation-name: left50;
    animation-duration: 4s;
    left:50%;
}



/*horse5*/
#horse5.day9,
#horse5.day10, 
#horse5.day11 {
    animation-name: left0;
    animation-duration: 4s;
    left:0%;
}

#horse5.day12,
#horse5.day13, 
#horse5.day14,
#horse5.day15 {
    animation-name: left10;
    animation-duration: 4s;
    left:10%;

}

#horse5.day16,
#horse5.day17, 
#horse5.day18,
#horse5.day19 {
    animation-name: left25;
    animation-duration: 4s;
    left:25%;
}

#horse5.day20,
#horse5.day21, 
#horse5.day22,
#horse5.day23 {
    animation-name: left30;
    animation-duration: 4s;
    left:30%;
}

#horse5.day24, 
#horse5.day25,
#horse5.day26 {
    animation-name: left40;
    animation-duration: 4s;
    left:40%;
}



/***********************************************/


@media only screen and (max-width: 399px) {


}


/***********************************************/



@media only screen and (min-width: 400px) and (max-width: 639px) {



}

/***********************************************/





@media only screen and (min-width: 640px) and (max-width: 805px) {


}




/***********************************************/

@media only screen and (min-width: 806px) and (max-width: 1000px) {

}
