/* Animations */
@-webkit-keyframes wheelspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@-moz-keyframes wheelspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@-ms-keyframes wheelspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes wheelspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@-webkit-keyframes floor {
  to { background-position-x: 100%; }
}
@-moz-keyframes floor {
  to { background-position-x: 100%; }
}
@-ms-keyframes floor {
  to { background-position-x: 100%; }
}
@keyframes floor {
  to { background-position-x: 100%; }
}

@-webkit-keyframes pedalstem-front {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@-moz-keyframes pedalstem-front {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@-ms-keyframes pedalstem-front {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pedalstem-front {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@-webkit-keyframes pedalstem-back {
  from { transform: rotate(-180deg); }
  to { transform: rotate(180deg); }
}
@-moz-keyframes pedalstem-back {
  from { transform: rotate(-180deg); }
  to { transform: rotate(180deg); }
}
@-ms-keyframes pedalstem-back {
  from { transform: rotate(-180deg); }
  to { transform: rotate(180deg); }
}
@keyframes pedalstem-back {
  from { transform: rotate(-180deg); }
  to { transform: rotate(180deg); }
}

@-webkit-keyframes pedalbase-front {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@-moz-keyframes pedalbase-front {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@-ms-keyframes pedalbase-front {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes pedalbase-front {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@-webkit-keyframes pedalbase-back {
  from { transform: rotate(180deg); }
  to { transform: rotate(-180deg); }
}
@-moz-keyframes pedalbase-back {
  from { transform: rotate(180deg); }
  to { transform: rotate(-180deg); }
}
@-ms-keyframes pedalbase-back {
  from { transform: rotate(180deg); }
  to { transform: rotate(-180deg); }
}
@keyframes pedalbase-back {
  from { transform: rotate(180deg); }
  to { transform: rotate(-180deg); }
}

@-webkit-keyframes riding {
  from { transform: translateX(-250%); }
  to { transform: translateX(250%); }
}
@-moz-keyframes riding {
  from { transform: translateX(-250%); }
  to { transform: translateX(250%); }
}
@-ms-keyframes riding {
  from { transform: translateX(-250%); }
  to { transform: translateX(250%); }
}
@keyframes riding {
  from { transform: translateX(-250%); }
  to { transform: translateX(250%); }
}

/* Base styles */
/* html,
body {
  max-width: 100%;
  overflow: hidden;
  background: #fff;
} */

/* The bike */
.bike {
  width: 150px;
  height: 150px;
  margin: auto;
  position: absolute;
  /* bottom: 0; */
  left: 0;
  right: 0;
  /* top: 50%; */
  top: auto;
  -webkit-animation-name: riding;
  -webkit-animation-duration: 12s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: riding;
  -moz-animation-duration: 12s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: riding;
  -o-animation-duration: 12s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: riding;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bike .part {
  position: absolute;
}

/* Frame */
.frame .bar {
  width: 3.6px;
  position: absolute;
  background: #F6A03D;
}

.frame .bar.left-top {
  width: 3px;
  height: 55.8px;
  margin-left: 38.4px;
  margin-top: 33px;
  -moz-transform: rotate(37deg);
  -o-transform: rotate(37deg);
  -ms-transform: rotate(37deg);
  -webkit-transform: rotate(37deg);
  transform: rotate(37deg);
}

.frame .bar.left-bottom {
  width: 2.4px;
  margin-left: 44.7px;
  margin-top: 60.9px;
  height: 51px;
  -moz-transform: rotate(-82deg);
  -o-transform: rotate(-82deg);
  -ms-transform: rotate(-82deg);
  -webkit-transform: rotate(-82deg);
  transform: rotate(-82deg);
}

.frame .bar.left {
  height: 69px;
  margin-left: 60px;
  margin-top: 24px;
  -moz-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

.frame .bar.top {
  height: 67.2px;
  margin-left: 84.6px;
  margin-top: -3px;
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.frame .bar.bottom {
  margin-left: 95.1px;
  margin-top: 26.1px;
  height: 75px;
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.frame .bar.right {
  height: 69px;
  margin-left: 126.3px;
  margin-top: 18px;
  -moz-transform: rotate(-19deg);
  -o-transform: rotate(-19deg);
  -ms-transform: rotate(-19deg);
  -webkit-transform: rotate(-19deg);
  transform: rotate(-19deg);
}

/* Saddle */
.sadle {
  margin-left: 55.2px;
}

.sadle .sit-here {
  height: 0;
  width: 3px;
  position: absolute;
  border-bottom: 33px solid #000;
  border-left: 0px solid transparent;
  border-right: 6.6px solid transparent;
  border-radius: 3px 0 3px 0;
  margin-top: -6px;
  margin-left: -10.5px;
  -moz-transform: rotate(98deg);
  -o-transform: rotate(98deg);
  -ms-transform: rotate(98deg);
  -webkit-transform: rotate(98deg);
  transform: rotate(98deg);
}

.sadle .sadlepen {
  width: 3px;
  height: 60px;
  margin-top: 9px;
  position: absolute;
  background: #dadada;
  -moz-transform: rotate(-16deg);
  -o-transform: rotate(-16deg);
  -ms-transform: rotate(-16deg);
  -webkit-transform: rotate(-16deg);
  transform: rotate(-16deg);
}

/* Wheels */
.wheel {
  width: 60px;
  height: 60px;
  /* margin-top: 48px; */
  margin-top: 52px;
  border-radius: 100%;
  border: 4.5px solid #dadada;
  box-shadow: 0 0 0 3px #333;
  -webkit-animation-name: wheelspin;
  -webkit-animation-duration: 6s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: wheelspin;
  -moz-animation-duration: 6s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: wheelspin;
  -o-animation-duration: 6s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: wheelspin;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.wheel.left {
  /* margin-left: -10.5px; */
  margin-left: -7.5px;
}

.wheel.right {
  /* margin-left: 104.4px; */
  margin-left: 109.4px;
}

.wheel .spoke {
    width: 0.6px;
    height: 49px;
    margin-left: 26px;
    position: absolute;
    background: #dadada;
    margin-top: 1px;
}

.wheel .spoke:nth-child(2) {
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.wheel .spoke:nth-child(3) {
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.wheel .spoke:nth-child(4) {
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.wheel .spoke:nth-child(5) {
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}

.wheel .spoke:nth-child(6) {
  -moz-transform: rotate(150deg);
  -o-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
}

.wheel .spoke:nth-child(7) {
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.wheel .spoke:nth-child(8) {
  -moz-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
  transform: rotate(210deg);
}

/* Axis */
.axis {
  width: 7.5px;
  height: 7.5px;
  margin-top: 79.5px;
  position: absolute;
  background: #333;
  border-radius: 100%;
}

.axis.left {
  margin-left: 20.1px;
}

.axis.right {
  margin-left: 135.3px;
}

/* Handlebar */
.handlebar .stem {
  width: 3px;
  height: 60px;
  margin-top: 13.5px;
  margin-left: 123.6px;
  position: absolute;
  background: #dadada;
  -moz-transform: rotate(-19deg);
  -o-transform: rotate(-19deg);
  -ms-transform: rotate(-19deg);
  -webkit-transform: rotate(-19deg);
  transform: rotate(-19deg);
}

.handlebar .connector {
  width: 6px;
  height: 6px;
  margin-left: 112.2px;
  margin-top: 12px;
  -moz-transform: rotate(-19deg);
  -o-transform: rotate(-19deg);
  -ms-transform: rotate(-19deg);
  -webkit-transform: rotate(-19deg);
  transform: rotate(-19deg);
  background: #dadada;
}

.handlebar .prehandle {
  width: 4.5px;
  height: 12px;
  margin-left: 118.2px;
  margin-top: -13.5px;
  -moz-transform: rotate(42deg);
  -o-transform: rotate(42deg);
  -ms-transform: rotate(42deg);
  -webkit-transform: rotate(42deg);
  transform: rotate(42deg);
  background: #dadada;
}

.handlebar .handle {
  width: 7.5px;
  height: 7.5px;
  margin-left: 120px;
  margin-top: -13.5px;
  position: absolute;
  background: #000;
  border-radius: 100%;
}

/* Pedals */
.pedals {
  margin-left: 68.1px;
  margin-top: 88.5px;
}

.pedals * {
  position: absolute;
}

.pedals .inside {
  width: 2.7px;
  height: 2.7px;
  background: #333;
  border-radius: 100%;
  margin-left: 1.05px;
  margin-top: 0.72px;
}

.pedals .outside {
  width: 24px;
  height: 24px;
  margin-top: -11.7px;
  margin-left: -11.1px;
  border: 1.5px solid #000;
  border-radius: 100%;
}

.pedals .pedalstem {
  width: 3.6px;
  height: 24px;
  margin-left: 0.6px;
  background: #dadada;
  border-radius: 3px 3px 0 0;
  transform-origin: 1.8px 2.1px;
}

.pedals .pedalstem.front {
  -webkit-animation-name: pedalstem-front;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pedalstem-front;
  -moz-animation-duration: 3s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: pedalstem-front;
  -o-animation-duration: 3s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: pedalstem-front;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pedals .pedalstem.back {
  -webkit-animation-name: pedalstem-back;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pedalstem-back;
  -moz-animation-duration: 3s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: pedalstem-back;
  -o-animation-duration: 3s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: pedalstem-back;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.pedals .pedalbase {
  width: 12px;
  height: 4.5px;
  margin-top: 21px;
  margin-left: -3.6px;
  background: #000;
}

.pedals .pedalbase.front {
  -webkit-animation-name: pedalbase-front;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pedalbase-front;
  -moz-animation-duration: 3s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: pedalbase-front;
  -o-animation-duration: 3s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: pedalbase-front;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pedals .pedalbase.back {
  -webkit-animation-name: pedalbase-back;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pedalbase-back;
  -moz-animation-duration: 3s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: pedalbase-back;
  -o-animation-duration: 3s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: pedalbase-back;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Pause button *
.pause {
  width: 6px;
  height: 16.5px;
  margin: 10% auto;
  background: #fff;
  cursor: pointer;
  border-right: 3.6px solid #F6A03D;
  border-left: 3.6px solid #F6A03D;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
*/
.pause.active {
  width: 0;
  height: 0;
  border-top: 7.65px solid transparent;
  border-left: 13.2px solid #e8bf56;
  border-bottom: 7.65px solid transparent;
  border-right: none;
}

.paused,
.paused * {
  -webkit-animation-play-state: paused !important;
  -moz-animation-play-state: paused !important;
  -o-animation-play-state: paused !important;
  animation-play-state: paused !important;
}

/* 2nd bike */
.bike-two {
  -webkit-animation-name: riding;
  -webkit-animation-duration: 16s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: riding;
  -moz-animation-duration: 16s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: riding;
  -o-animation-duration: 16s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: riding;
  animation-duration: 16s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  bottom: -155px;
}

.bike-two .pedalstem.front {
  -webkit-animation-name: pedalstem-front;
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pedalstem-front;
  -moz-animation-duration: 4s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: pedalstem-front;
  -o-animation-duration: 4s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: pedalstem-front;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bike-two .pedalstem.back {
  -webkit-animation-name: pedalstem-back;
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pedalstem-back;
  -moz-animation-duration: 4s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: pedalstem-back;
  -o-animation-duration: 4s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: pedalstem-back;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.bike-two .pedalbase.front {
  -webkit-animation-name: pedalbase-front;
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pedalbase-front;
  -moz-animation-duration: 4s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: pedalbase-front;
  -o-animation-duration: 4s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: pedalbase-front;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bike-two .pedalbase.back {
  -webkit-animation-name: pedalbase-back;
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pedalbase-back;
  -moz-animation-duration: 4s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: pedalbase-back;
  -o-animation-duration: 4s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: pedalbase-back;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bike-two .wheel {
  -webkit-animation-name: wheelspin;
  -webkit-animation-duration: 8s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: wheelspin;
  -moz-animation-duration: 8s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: wheelspin;
  -o-animation-duration: 8s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: wheelspin;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bike-two .sit-here {
  border-bottom: 33px solid #522917;
}

.bike-two .handle {
  background: #522917;
}

.bike-two .frame .bar {
  /* background: #16699F; */
  background: #AEB4AF;
  /* background: #F68535; */
}

/* Z-indexes */
.inside { z-index: 6; }
.axis { z-index: 5; }
.pedalstem.front { z-index: 5; }
.frame { z-index: 4; }
.outside { z-index: 4; }
.handlebar { z-index: 3; }
.sit-here { z-index: 2; }
.wheel { z-index: 1; }
.pedalstem.back { z-index: -1; }