html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  width: 1375px;
  height: 100%;
}

section {
  float: left;
  width: 275px;
  height: 100%;
}

.tracks {
  height: 100%;
}

.track {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  float: left;
  height: 100%;
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 50px;
}

.track:nth-child(2) {
  margin-left: 47.5px;
}

.header {
  position: absolute;
  top: 0;
  background: url("../img/headers.png") no-repeat;
  background-repeat: no-repeat;
  width: 275px;
  height: 50px;
}

.normal .header {
  background-position: 0 0;
}

.items .header {
  background-position: 0 -50px;
}

.backward .header {
  background-position: 0 -100px;
}

.swimming .header {
  background-position: 0 -150px;
}

.crouching .header {
  background-position: 0 -200px;
}

.icon {
  position: relative;
  top: 100%;
  display: inline-block;
  width: 20px;
  height: 24px;
  background: url("../img/classes.png") no-repeat;
  background-size: 120px 80px;
  -webkit-animation: move linear;
     -moz-animation: move linear;
          animation: move linear;
}

.items .icon:after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: -24px;
  background-image: url("../img/items.png");
  background-size: 91px 69px;
}

.scout {
  background-position: 0 0;
  -webkit-animation-duration: 7.51879699248s;
     -moz-animation-duration: 7.51879699248s;
          animation-duration: 7.51879699248s;
}

.items .scout {
  -webkit-animation-duration: 5.9880239521s;
     -moz-animation-duration: 5.9880239521s;
          animation-duration: 5.9880239521s;
}

.items .scout:after {
  background-position: -20px 0;
}

.items .scout.bfb {
  -webkit-animation-duration: 5.78034682081s;
     -moz-animation-duration: 5.78034682081s;
          animation-duration: 5.78034682081s;
}

.items .scout.bfb:after {
  background-position: 0 0;
}

.crouching .scout {
  -webkit-animation-duration: 22.7272727273s;
     -moz-animation-duration: 22.7272727273s;
          animation-duration: 22.7272727273s;
}

.backward .scout {
  -webkit-animation-duration: 8.33333333333s;
     -moz-animation-duration: 8.33333333333s;
          animation-duration: 8.33333333333s;
}

.swimming .scout {
  -webkit-animation-duration: 9.34579439252s;
     -moz-animation-duration: 9.34579439252s;
          animation-duration: 9.34579439252s;
}

.medic {
  background-position: -20px 0;
  -webkit-animation-duration: 9.34579439252s;
     -moz-animation-duration: 9.34579439252s;
          animation-duration: 9.34579439252s;
}

.items .medic {
  -webkit-animation-duration: 8.54700854701s;
     -moz-animation-duration: 8.54700854701s;
          animation-duration: 8.54700854701s;
}

.items .medic:after {
  background-position: -40px 0;
}

.crouching .medic {
  -webkit-animation-duration: 27.7777777778s;
     -moz-animation-duration: 27.7777777778s;
          animation-duration: 27.7777777778s;
}

.backward .medic {
  -webkit-animation-duration: 10.4166666667s;
     -moz-animation-duration: 10.4166666667s;
          animation-duration: 10.4166666667s;
}

.swimming .medic {
  -webkit-animation-duration: 11.7647058824s;
     -moz-animation-duration: 11.7647058824s;
          animation-duration: 11.7647058824s;
}

.sniper {
  background-position: -40px 0;
  -webkit-animation-duration: 10s;
     -moz-animation-duration: 10s;
          animation-duration: 10s;
}

.items .sniper {
  -webkit-animation-duration: 18.8679245283s;
     -moz-animation-duration: 18.8679245283s;
          animation-duration: 18.8679245283s;
}

.items .sniper:after {
  background-position: 0 -20px;
}

.crouching .sniper {
  -webkit-animation-duration: 30.303030303s;
     -moz-animation-duration: 30.303030303s;
          animation-duration: 30.303030303s;
}

.backward .sniper {
  -webkit-animation-duration: 11.1111111111s;
     -moz-animation-duration: 11.1111111111s;
          animation-duration: 11.1111111111s;
}

.swimming .sniper {
  -webkit-animation-duration: 12.5s;
     -moz-animation-duration: 12.5s;
          animation-duration: 12.5s;
}

.spy {
  background-position: 0 -24px;
  -webkit-animation-duration: 10s;
     -moz-animation-duration: 10s;
          animation-duration: 10s;
}

.crouching .spy {
  -webkit-animation-duration: 30.303030303s;
     -moz-animation-duration: 30.303030303s;
          animation-duration: 30.303030303s;
}

.backward .spy {
  -webkit-animation-duration: 11.1111111111s;
     -moz-animation-duration: 11.1111111111s;
          animation-duration: 11.1111111111s;
}

.swimming .spy {
  -webkit-animation-duration: 12.5s;
     -moz-animation-duration: 12.5s;
          animation-duration: 12.5s;
}

.pyro {
  background-position: -20px -24px;
  -webkit-animation-duration: 10s;
     -moz-animation-duration: 10s;
          animation-duration: 10s;
}

.items .pyro {
  -webkit-animation-duration: 8.69565217391s;
     -moz-animation-duration: 8.69565217391s;
          animation-duration: 8.69565217391s;
}

.items .pyro:after {
  background-position: -20px -20px;
}

.crouching .pyro {
  -webkit-animation-duration: 30.303030303s;
     -moz-animation-duration: 30.303030303s;
          animation-duration: 30.303030303s;
}

.backward .pyro {
  -webkit-animation-duration: 11.1111111111s;
     -moz-animation-duration: 11.1111111111s;
          animation-duration: 11.1111111111s;
}

.swimming .pyro {
  -webkit-animation-duration: 12.5s;
     -moz-animation-duration: 12.5s;
          animation-duration: 12.5s;
}

.engineer {
  background-position: -40px -24px;
  -webkit-animation-duration: 10s;
     -moz-animation-duration: 10s;
          animation-duration: 10s;
}

.items .engineer {
  -webkit-animation-duration: 13.3333333333s;
     -moz-animation-duration: 13.3333333333s;
          animation-duration: 13.3333333333s;
}

.items .engineer:after {
  background-position: -40px -20px;
}

.crouching .engineer {
  -webkit-animation-duration: 30.303030303s;
     -moz-animation-duration: 30.303030303s;
          animation-duration: 30.303030303s;
}

.backward .engineer {
  -webkit-animation-duration: 11.1111111111s;
     -moz-animation-duration: 11.1111111111s;
          animation-duration: 11.1111111111s;
}

.swimming .engineer {
  -webkit-animation-duration: 12.5s;
     -moz-animation-duration: 12.5s;
          animation-duration: 12.5s;
}

.demo {
  background-position: 0 -48px;
  -webkit-animation-duration: 10.752688172s;
     -moz-animation-duration: 10.752688172s;
          animation-duration: 10.752688172s;
}

.items .demo {
  -webkit-animation: charge 1.536s linear, finish 6.62365591395s 1.536s linear;
     -moz-animation: charge 1.536s linear, finish 6.62365591395s 1.536s linear;
          animation: charge 1.536s linear, finish 6.62365591395s 1.536s linear;
}

.items .demo:after {
  background-position: 0 -40px;
}

.crouching .demo {
  -webkit-animation-duration: 32.2580645161s;
     -moz-animation-duration: 32.2580645161s;
          animation-duration: 32.2580645161s;
}

.backward .demo {
  -webkit-animation-duration: 11.9047619048s;
     -moz-animation-duration: 11.9047619048s;
          animation-duration: 11.9047619048s;
}

.swimming .demo {
  -webkit-animation-duration: 13.3333333333s;
     -moz-animation-duration: 13.3333333333s;
          animation-duration: 13.3333333333s;
}

.soldier {
  background-position: -20px -48px;
  -webkit-animation-duration: 12.5s;
     -moz-animation-duration: 12.5s;
          animation-duration: 12.5s;
}

.items .soldier {
  -webkit-animation-duration: 8.92857142857s;
     -moz-animation-duration: 8.92857142857s;
          animation-duration: 8.92857142857s;
}

.items .soldier:after {
  background-position: -20px -40px;
}

.crouching .soldier {
  -webkit-animation-duration: 37.037037037s;
     -moz-animation-duration: 37.037037037s;
          animation-duration: 37.037037037s;
}

.backward .soldier {
  -webkit-animation-duration: 13.8888888889s;
     -moz-animation-duration: 13.8888888889s;
          animation-duration: 13.8888888889s;
}

.swimming .soldier {
  -webkit-animation-duration: 15.625s;
     -moz-animation-duration: 15.625s;
          animation-duration: 15.625s;
}

.heavy {
  background-position: -40px -48px;
  -webkit-animation-duration: 12.987012987s;
     -moz-animation-duration: 12.987012987s;
          animation-duration: 12.987012987s;
}

.items .heavy {
  -webkit-animation-duration: 10s;
     -moz-animation-duration: 10s;
          animation-duration: 10s;
}

.items .heavy:after {
  background-position: -40px -40px;
}

.crouching .heavy {
  -webkit-animation-duration: 38.4615384615s;
     -moz-animation-duration: 38.4615384615s;
          animation-duration: 38.4615384615s;
}

.backward .heavy {
  -webkit-animation-duration: 14.4927536232s;
     -moz-animation-duration: 14.4927536232s;
          animation-duration: 14.4927536232s;
}

.swimming .heavy {
  -webkit-animation-duration: 16.393442623s;
     -moz-animation-duration: 16.393442623s;
          animation-duration: 16.393442623s;
}

@-webkit-keyframes move {
  from {top: 0;}
  to {top: 100%;}
}

@-moz-keyframes move {
  from {top: 0;}
  to {top: 100%;}
}

@keyframes move {
  from {top: 0;}
  to {top: 100%;}
}

@-webkit-keyframes charge {
  from {top: 0;}
  to {top: 38.4%;}
}

@-moz-keyframes charge {
  from {top: 0;}
  to {top: 38.4%;}
}

@keyframes charge {
  from {top: 0;}
  to {top: 38.4%;}
}

@-webkit-keyframes finish {
  from {top: 38.4%;}
  to {top: 100%;}
}

@-moz-keyframes finish {
  from {top: 38.4%;}
  to {top: 100%;}
}

@keyframes finish {
  from {top: 38.4%;}
  to {top: 100%;}
}