/* Generic transform */
/* Rotation */
/* Translation */
/* Generic animation */
.box {
  position: relative;
  margin: auto;
  margin-top: 5%;
  width: 890px;
  height: 588px;
  border: solid 4px none;
  transform: scale(0.7);
  transform-origin: top left;
}

.bike {
  position: absolute;
}

/* Wheels */
.front-wheel, .back-wheel {
  position: absolute;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: none;
  border: 12px solid #424242;
  box-shadow: inset 0px 0px 0px 5px #fff;
  top: 350px;
  z-index: 2;
}

/* Back wheel */
.back-wheel {
  left: 20px;
}

/* Front wheel*/
.front-wheel {
  left: 440px;
}

/*ROTATION ANIMATION for CASSETTE & SPOKES ~ CW*/
@keyframes rotation {
  from {
    transform: rotate(-359deg);
  }
  to {
    transform: rotate(0deg);
  }
}
/* Cassette for both front and back wheel */
.cassette {
  position: absolute;
  background: white;
  border-radius: 50%;
  border: 4px solid black;
  width: 20px;
  height: 20px;
  top: 88px;
  left: 86px;
  z-index: 2;
  animation: rotation 1s infinite linear;
}

/* Spokes */
._5-11, ._4-10, ._3-9, ._2-8, ._1-7, ._12-6 {
  position: absolute;
  background: grey;
  width: 2px;
  height: 190px;
  top: -87px;
  left: 9px;
  z-index: 1;
}

/* 360deg/12 hrs = 30deg between each hour number change */
._1-7 {
  transform: rotate(30deg);
}

._2-8 {
  transform: rotate(60deg);
}

._3-9 {
  transform: rotate(90deg);
}

._4-10 {
  transform: rotate(120deg);
}

._5-11 {
  transform: rotate(150deg);
}

/*Bike Body Frame ~6 parts */
.handlebar-frame, .seat-frame, .fr-upper, .fr-lower, .bk-upper, .bk-lower {
  position: absolute;
  background: #ed9a18;
  height: 14px;
  z-index: 3;
  border-radius: 20px;
}

.bk-lower {
  top: 465px;
  left: 125px;
  transform: rotate(3deg);
  width: 185px;
}

.bk-upper {
  transform: rotate(-50deg);
  width: 200px;
  top: 385px;
  left: 90px;
}

.fr-lower {
  width: 260px;
  transform: rotate(-40deg);
  top: 390px;
  left: 272px;
}

.fr-upper {
  width: 250px;
  top: 295px;
  left: 244px;
  transform: rotate(-10deg);
}

.seat-frame {
  width: 235px;
  top: 365px;
  left: 148px;
  transform: rotate(-111deg);
}

.handlebar-frame {
  width: 270px;
  top: 340px;
  left: 375px;
  transform: rotate(-110deg);
}

/*seatpost ~ tipped white */
.seatpost {
  position: absolute;
  width: 40px;
  height: 14px;
  background: #d6d6d6;
  z-index: 5;
  left: 190px;
}

/* Seat */
.seat {
  position: absolute;
  background: #424242;
  width: 90px;
  height: 40px;
  border-bottom-left-radius: 70px;
  border-bottom-right-radius: 120px;
  border-top-left-radius: 40px;
  border-top-right-radius: 20px;
  top: 245px;
  left: 185px;
  z-index: 4;
}

/* HEADSET and HANDLEBAR section, in order from bottom to top*/
.bar {
  position: absolute;
  z-index: 4;
  border-radius: 10px;
  width: 15px;
}

.headset {
  background: #d6d6d6;
  height: 65px;
  top: 213px;
  left: 466px;
  transform: rotate(-20deg);
}

.stem {
  background: #424242;
  height: 35px;
  top: 190px;
  left: 460px;
  transform: rotate(25deg);
}

.hb1 {
  background: #424242;
  height: 75px;
  top: 160px;
  left: 435px;
  transform: rotate(90deg);
}

.hb2 {
  background: #0073b5;
  height: 50px;
  top: 172.75px;
  left: 415px;
  transform: rotate(90deg);
}

/* Crankset & crank */
.crankset {
  position: absolute;
  border: 5px solid #dedede;
  background: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  left: 275px;
  top: 445px;
  z-index: 5;
}

/*ROTATION ANIMATION for CRANK ~ CW*/
@keyframes crank-rot {
  from {
    transform: rotate(-359deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.crank {
  position: absolute;
  background: #dedede;
  width: 5px;
  height: 45px;
  left: 305px;
  top: 425px;
  z-index: 5;
  transform-origin: bottom left;
  transform: rotate(25deg);
  animation: crank-rot 1s infinite linear;
}

/* Hub */
.hub {
  position: absolute;
  background: none;
  border: 4px solid #d6d6d6; /* grey-tinged white */
  border-radius: 50%;
  width: 15px;
  height: 15px;
  top: 452px;
  left: 120px;
  z-index: 5;
}

/*Chains*/
.chain-lo, .chain-upp {
  position: absolute;
  background: #353535;
  width: 180px;
  height: 3px;
  z-index: 4;
}

.chain-upp {
  top: 448px;
  left: 130px;
  z-index: 4;
  transform: rotate(-1deg);
}

.chain-lo {
  top: 486px;
  left: 125px;
  z-index: 4;
  transform: rotate(7deg);
}

/* Bike Shadow */
.bike-shadow {
  position: absolute;
  background: #f5cc1b;
  border-radius: 20px;
  width: 800px;
  height: 28px;
  top: 555px;
  left: -60px;
  z-index: 1;
}

/* Streaks of light on the ground */
.streak4, .streak3, .streak2, .streak1 {
  position: absolute;
  background: white;
  border-radius: 20px;
  height: 5px;
  opacity: 0.8;
}
@keyframes moveStreak {
  from {
    transform: translate(-320px, 0px);
  }
  to {
    transform: translate(-800px, 0px);
  }
}
.streak1 {
  width: 50px;
  top: 500px;
  left: 200px;
  animation: moveStreak 0.55s infinite ease-in;
}

.streak2 {
  width: 80px;
  top: 520px;
  left: 300px;
  animation: moveStreak 0.8s infinite ease-in;
}

.streak3 {
  width: 30px;
  top: 500px;
  left: 380px;
  animation: moveStreak 0.45s infinite ease-in;
}

.streak4 {
  width: 120px;
  top: 530px;
  left: 280px;
  animation: moveStreak 0.3s infinite ease-in;
}

/*------------- START OF STYLING FOR GIRL ------------------------*/
.girl {
  position: absolute;
}

/*TORSO */
.chest {
  position: absolute;
  background: #ffbd29;
  width: 80px;
  height: 85px;
  border-radius: 35px;
  left: 235px;
  top: 75px;
  z-index: 4;
  transform: rotate(20deg);
  animation: movechest 1s infinite linear;
  box-shadow: inset 4px 5px 0px 0px #ecb634;
}
@keyframes movechest {
  0% {
    transform: translate(-4px, 0px);
  }
  20% {
    transform: translate(3px, -2px);
  }
  40% {
    transform: translate(8px, -6px);
  }
  80% {
    transform: translate(3px, -2px);
  }
  100% {
    transform: translate(-4px, 0px);
  }
}
@keyframes movebelly {
  0%, 100% {
    transform: translate(-4px, 0px) rotate(20deg);
    -webkit-transform: translate(-4px, 0px) rotate(20deg);
    -moz-transform: translate(-4px, 0px) rotate(20deg);
    -ms-transform: translate(-4px, 0px) rotate(20deg);
  }
  20%, 80% {
    transform: translate(3px, -2px) rotate(20deg);
    -webkit-transform: translate(3px, -2px) rotate(20deg);
    -moz-transform: translate(3px, -2px) rotate(20deg);
    -ms-transform: translate(3px, -2px) rotate(20deg);
  }
  40% {
    transform: translate(8px, -6px) rotate(20deg);
    -webkit-transform: translate(8px, -6px) rotate(20deg);
    -moz-transform: translate(8px, -6px) rotate(20deg);
    -ms-transform: translate(8px, -6px) rotate(20deg);
  }
}
.belly {
  position: absolute;
  background: #ffbd29;
  width: 70px;
  height: 68px;
  border-radius: 10px;
  left: 220px;
  top: 133px;
  z-index: 5;
  animation: movebelly 1s infinite linear;
}

.back-shadow {
  position: absolute;
  background: #ecb634;
  height: 100%;
  width: 10%;
}

/* Right Arm */
.r-arm {
  position: absolute;
  background: #bd5239;
  width: 25px;
  height: 210px;
  border-radius: 20px;
  left: 89px;
  top: -32px;
  transform: rotate(-60deg);
}

.r-sleeve {
  position: absolute;
  background: #ed9a18;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 40px;
  height: 55px;
  left: -8px;
}

.r-a-shadow {
  position: absolute;
  background: #8a3828;
  height: 5%;
  width: 100%;
  top: 26%;
}

/* LEFT ARM */
@keyframes moveleftarm {
  0%, 100% {
    transform: translate(-4px, 0px) rotate(-55deg);
    -webkit-transform: translate(-4px, 0px) rotate(-55deg);
    -moz-transform: translate(-4px, 0px) rotate(-55deg);
  }
  20%, 80% {
    transform: translate(3px, -2px) rotate(-55deg);
    -webkit-transform: translate(3px, -2px) rotate(-55deg);
    -moz-transform: translate(3px, -2px) rotate(-55deg);
  }
  40% {
    transform: translate(8px, -1px) rotate(-55deg);
    -webkit-transform: translate(8px, -1px) rotate(-55deg);
    -moz-transform: translate(8px, -1px) rotate(-55deg);
  }
}
.l-arm {
  position: absolute;
  background: #9c4231;
  width: 25px;
  height: 190px;
  border-radius: 20px;
  left: 360px;
  top: 51px;
  z-index: 1;
  animation: moveleftarm 1s infinite linear;
}

.l-sleeve {
  position: absolute;
  background: #ed9a18;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 30px;
  height: 50px;
}

.l-a-shadow {
  position: absolute;
  background: #8a3828;
  width: 100%;
  height: 5%;
  top: 25%;
}

.pelvic-reg {
  position: absolute;
  background: #0073b5;
  border-radius: 40px;
  width: 95px;
  height: 80px;
  top: 185px;
  left: 185px;
  z-index: 4;
  animation: movechest 1s infinite linear;
}

/* RIGHT LEG */
/*ROTATION ANIMATION for Right THIGH~ CW*/
@keyframes thigh-rot {
  0%, 100% {
    transform: rotate(-78deg);
  }
  50% {
    transform: rotate(-35deg);
  }
}
.r-thigh {
  position: absolute;
  background: #bd5239;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 20px;
  width: 33px;
  height: 190px;
  top: 230px;
  left: 194px;
  transform: rotate(-75deg);
  z-index: 6;
  transform-origin: left top;
  animation: thigh-rot 1s infinite linear;
}

.r-pants {
  position: absolute;
  background: #0073b5;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 58px;
  height: 125px;
  left: -10px;
}

.r-shadow {
  position: absolute;
  background: #8a3828;
  width: 100%;
  height: 7%;
  top: 65%;
}

/*ROTATION ANIMATION for Right CALF ~ CW*/
@keyframes right-calf-rot {
  0%, 100% {
    transform: rotate(80deg);
  }
  20% {
    transform: rotate(60deg);
  }
  40% {
    transform: rotate(50deg);
  }
  80% {
    transform: rotate(110deg);
  }
  90% {
    transform: rotate(100deg);
  }
  95% {
    transform: rotate(90deg);
  }
}
.r-calf {
  position: absolute;
  background: #bd5239;
  border-radius: 40px;
  width: 34px;
  height: 170px;
  top: 157.5px;
  left: 21px;
  transform: rotate(95deg);
  animation: right-calf-rot 1s infinite linear;
  transform-origin: left top;
}

/* LEFT LEG */
/*ROTATION ANIMATION for LEFT THIGH~ CW*/
@keyframes left-thigh-rot {
  0%, 100% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(-70deg);
  }
}
.l-thigh {
  position: absolute;
  background: #9c4231;
  border-radius: 40px;
  width: 34px;
  height: 185px;
  top: 218px;
  left: 215px;
  transform: rotate(-22deg);
  z-index: 1;
  transform-origin: left top;
  animation: left-thigh-rot 1s infinite linear;
}

.l-pants {
  position: absolute;
  background: #066da2;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 55px;
  height: 124px;
  left: -10px;
}

.l-shadow {
  position: absolute;
  background: #8a3828;
  width: 100%;
  height: 7%;
  top: 65%;
}

/*ROTATION ANIMATION for Left CALF ~ CW*/
@keyframes left-calf-rot {
  0%, 100% {
    transform: rotate(45deg);
  }
  38% {
    transform: rotate(110deg);
  }
  70% {
    transform: rotate(55deg);
  }
}
.l-calf {
  position: absolute;
  background: #9c4231;
  border-radius: 40px;
  width: 34px;
  height: 170px;
  top: 153px;
  left: 21px;
  transform: rotate(30deg);
  animation: left-calf-rot 1s infinite linear;
  transform-origin: left top;
}

/* Socks & shoes */
.sock {
  position: absolute;
  background: white;
  border-radius: 10px;
  width: 100%;
  height: 140px;
  top: 40px;
}

/* darker colored sock on left leg ~ shadow */
.darker {
  background: #dedede;
}

/*blue stripe on sock*/
.blue-top {
  position: absolute;
  background: #0073b5;
  width: 100%;
  height: 30px;
}

#dark-blue {
  background: #006aad;
}

.shoe-base {
  position: absolute;
  background: #0073b5;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 10px;
  width: 215%;
  height: 22px;
  top: 115px;
  left: -8px;
}

.shoe-lining {
  position: absolute;
  width: 100%;
  height: 25%;
  background: white;
  top: 90%;
}

.toecap {
  position: absolute;
  background: #006aad;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  width: 40%;
  height: 85%;
  top: 8%;
  right: 1px;
}

.heelcap {
  position: absolute;
  height: 50%;
  width: 30%;
  background: #0073b5;
  top: -40%;
}

.shoetongue {
  position: absolute;
  height: 90%;
  width: 30%;
  background: #0073b5;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  top: -85%;
  left: 28%;
}

.lace2, .lace1 {
  position: absolute;
  height: 12%;
  width: 40%;
  background: white;
}

.lace1 {
  left: 25%;
  top: -35%;
}

.lace2 {
  left: 25%;
  top: -20%;
}

.pedal {
  position: absolute;
  background: #424242;
  border-radius: 40px;
  width: 50%;
  height: 40%;
  top: 133%;
  left: 20%;
  transform-origin: left top;
  transform: rotate(-5deg);
}

/* HEAD & NECK */
@keyframes movehead {
  0%, 100% {
    transform: translate(-4px, 0px);
  }
  40% {
    transform: translate(8px, -3px);
  }
}
@keyframes moveneck {
  0%, 100% {
    transform: translate(-4px, 0px) rotate(20deg);
    -webkit-transform: translate(-4px, 0px) rotate(20deg);
    -moz-transform: translate(-4px, 0px) rotate(20deg);
    -ms-transform: translate(-4px, 0px) rotate(20deg);
  }
  20%, 80% {
    transform: translate(3px, -2px) rotate(20deg);
    -webkit-transform: translate(3px, -2px) rotate(20deg);
    -moz-transform: translate(3px, -2px) rotate(20deg);
    -ms-transform: translate(3px, -2px) rotate(20deg);
  }
  40% {
    transform: translate(8px, -6px) rotate(20deg);
    -webkit-transform: translate(8px, -6px) rotate(20deg);
    -moz-transform: translate(8px, -6px) rotate(20deg);
    -ms-transform: translate(8px, -6px) rotate(20deg);
  }
}
.neck {
  position: absolute;
  background: #a5422b;
  border-radius: 20px;
  width: 26px;
  height: 40px;
  left: 280px;
  top: 50px;
  z-index: 5;
  animation: moveneck 1s infinite ease-in;
}

.face {
  position: absolute;
  background: #bd5239;
  width: 95px;
  height: 100px;
  border-radius: 50%;
  left: 266px;
  top: -35px;
  z-index: 6;
  animation: movehead 1s infinite ease-in;
}

.r-eye, .l-eye {
  position: absolute;
  background: none;
  width: 20px;
  height: 15px;
  border-radius: 50%;
}

.l-eye {
  box-shadow: inset 0.5px 3px 0px 0px #390000;
  left: 42px;
  top: 39px;
}

.r-eye {
  box-shadow: inset 0.3px 3px 0px 0px #390000;
  left: 74px;
  top: 40px;
}

.l-cheek {
  position: absolute;
  background: #d36a69;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  top: 52px;
  left: 21px;
}

.mouth {
  position: absolute;
  width: 20px;
  height: 8%;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border: 2px solid #e299a4;
  background: white;
  top: 65px;
  left: 56px;
}

.nose {
  position: absolute;
  background: #a5422b;
  width: 10px;
  height: 6px;
  border-radius: 20px;
  top: 53px;
  left: 64px;
}

.ear {
  position: absolute;
  background: #bd5239;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 39px;
  left: -4px;
}

.r-hair {
  position: absolute;
  background: #390000;
  width: 40px;
  height: 30px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  left: 50px;
}

.l-hair {
  position: absolute;
  background: #390000;
  width: 40px;
  height: 58px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 40px;
  transform: rotate(20deg);
  left: 10px;
  top: -7px;
}
@keyframes rotate-ponytail {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(15deg);
  }
  90% {
    transform: rotate(-5deg);
  }
}
.ponytail {
  position: absolute;
  background: #390000;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  width: 150px;
  height: 40px;
  left: 140px;
  top: 1px;
  z-index: 2;
  transform-origin: right top;
  transform: rotate(-8deg);
  animation: rotate-ponytail 1s infinite linear;
}

.neck-shadow {
  position: absolute;
  background: #8a3828;
  opacity: 0.75;
  border-radius: 40px;
  width: 8px;
  height: 87%;
}

.jaw-shadow {
  position: absolute;
  background: none;
  box-shadow: 5px 5px 0px 0px #9c4231;
  border-radius: 50%;
  width: 10px;
  height: 40px;
  top: 57px;
  left: 16px;
  transform: rotate(-212deg);
}

.ear-shadow {
  position: absolute;
  background: none;
  box-shadow: -3px 0px 0px 0px #9c4231;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

/* Wind */
@keyframes movewind1 {
  0% {
    transform: translate(0px, 100px);
  }
  60% {
    transform: translate(-600px, 200px);
  }
  100% {
    transform: translate(-2000px, 100px);
  }
}
@keyframes movewind2 {
  0% {
    transform: translate(-10px, 0px);
  }
  100% {
    transform: translate(-2000px, 0px);
  }
}
@keyframes movewind3 {
  0% {
    transform: translate(-10px, 0px);
  }
  50% {
    transform: translate(-500px, -50px);
  }
  100% {
    transform: translate(-2000px, 0px);
  }
}
.w3, .w2, .w1 {
  position: absolute;
  background: white;
  opacity: 0.5;
  width: 200px;
  height: 4px;
  right: 10px;
}

.w1 {
  top: 50px;
  animation: movewind1 0.6s infinite linear;
}

.w2 {
  top: 400px;
  animation: movewind2 1.2s infinite linear;
  z-index: 7;
}

.w3 {
  top: 600px;
  animation: movewind3 0.8s infinite linear;
  z-index: 7;
}/*# sourceMappingURL=footer.css.map */