@font-face {
  font-family: JDSans;
  src: url(JohnDeereSans-Book.ttf);
}
.full {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.center {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
html,
body {
  font-family: JDSans, sans-serif;
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
}
main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  box-sizing: content-box;
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
}
main.info {
  background-image: url(../assets/info.jpg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1200;
}
main.howto {
  z-index: 1100;
}
main.loading {
  z-index: 1000;
}
main > .block {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
main > .block > .dashboard {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 50%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
main > .block > .tractor {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
main > .joystick {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
main button {
  background-color: #367c2b;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: JDSans, sans-serif;
  font-size: 2em;
  outline: none;
  padding: 0.25em 1.5em;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 2;
}
main button.close,
main button.info {
  height: 54px;
  text-transform: none;
  padding: 0.25em 0.5em;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 54px;
}
main button.start,
main button.howto {
  padding: 20px 35px;
  position: absolute;
  bottom: 15%;
}
main button.start {
  right: 50.2%;
}
main button.howto {
  background-color: #ffde00;
  color: #000;
  left: 50.2%;
  text-transform: none;
}
main video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  height: 100%;
  width: 100%;
  z-index: 1;
}
main .ieclip {
  display: none;
}
.ie main .ieclip {
  display: block;
  background-color: #fff;
  position: absolute;
  z-index: 2;
}
.dashboard,
.tractor,
.joystick {
  position: relative;
  overflow: hidden;
}
.dashboard h1,
.tractor h1,
.joystick h1 {
  display: none;
}
/*

########     ###     ######  ##     ## ########   #######     ###    ########  ########
##     ##   ## ##   ##    ## ##     ## ##     ## ##     ##   ## ##   ##     ## ##     ##
##     ##  ##   ##  ##       ##     ## ##     ## ##     ##  ##   ##  ##     ## ##     ##
##     ## ##     ##  ######  ######### ########  ##     ## ##     ## ########  ##     ##
##     ## #########       ## ##     ## ##     ## ##     ## ######### ##   ##   ##     ##
##     ## ##     ## ##    ## ##     ## ##     ## ##     ## ##     ## ##    ##  ##     ##
########  ##     ##  ######  ##     ## ########   #######  ##     ## ##     ## ########

*/
.dashboard {
  zoom: 2;
}
.dashboard .graphic {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 900px;
  pointer-events: none;
  width: 1400px;
}
.dashboard .graphic .background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(../assets/dashboard.png);
  background-size: 70%;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
.dashboard .graphic .meter {
  display: block;
  width: 120px;
  height: 10px;
  -webkit-transform-origin: 0px 50%;
          transform-origin: 0px 50%;
  will-change: transform;
  z-index: 3;
}
.dashboard .graphic .meter::before {
  background-image: url(../assets/cap.png);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  position: relative;
  top: 50%;
  left: 0px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 50px;
  width: 50px;
  z-index: 2;
}
.dashboard .graphic .meter::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 65%, 100% 35%);
          clip-path: polygon(0% 0%, 0% 100%, 100% 65%, 100% 35%);
  content: "";
  display: block;
  z-index: 1;
}
.dashboard .graphic .meter span {
  display: none;
}
.dashboard .graphic .meter.rpm {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  position: absolute;
  top: 402px;
  left: 564px;
}
.dashboard .graphic .meter.speed {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
  position: absolute;
  top: 400px;
  left: 838px;
}
.dashboard .graphic .indicators {
  border: solid 1px turquoise;
  height: 308px;
  position: absolute;
  top: 245px;
  left: 673px;
  width: 328px;
}
.dashboard .graphic .indicators .indicator {
  background-color: #111215;
  display: block;
  height: 10px;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 10px;
}
.dashboard .graphic .indicators .indicator.on {
  background-color: #f4880f;
}
.dashboard .graphic .indicators .indicator label {
  display: none;
}
.dashboard .graphic .indicators .indicator label .unit {
  display: none;
}
.dashboard .graphic .indicators .indicator.i0 {
  left: 95px;
  top: 273px;
}
.dashboard .graphic .indicators .indicator.i1 {
  left: 82px;
  top: 264px;
}
.dashboard .graphic .indicators .indicator.i2 {
  left: 69px;
  top: 252px;
}
.dashboard .graphic .indicators .indicator.i3 {
  left: 58px;
  top: 240px;
}
.dashboard .graphic .indicators .indicator.i4 {
  left: 49px;
  top: 226px;
}
.dashboard .graphic .indicators .indicator.i5 {
  left: 41px;
  top: 211px;
}
.dashboard .graphic .indicators .indicator.i6 {
  left: 35px;
  top: 196px;
}
.dashboard .graphic .indicators .indicator.i7 {
  left: 32px;
  top: 180px;
}
.dashboard .graphic .indicators .indicator.i8 {
  left: 30px;
  top: 164px;
}
.dashboard .graphic .indicators .indicator.i9 {
  left: 30px;
  top: 148px;
}
.dashboard .graphic .indicators .indicator.i10 {
  left: 32px;
  top: 132px;
}
.dashboard .graphic .indicators .indicator.i11 {
  left: 36px;
  top: 116px;
}
.dashboard .graphic .indicators .indicator.i12 {
  left: 42px;
  top: 102px;
}
.dashboard .graphic .indicators .indicator.i13 {
  left: 50px;
  top: 88px;
}
.dashboard .graphic .indicators .indicator.i14 {
  left: 60px;
  top: 75px;
}
.dashboard .graphic .indicators .indicator.i15 {
  left: 71px;
  top: 63px;
}
.dashboard .graphic .indicators .indicator.i16 {
  left: 83px;
  top: 53px;
}
.dashboard .graphic .indicators .indicator.i17 {
  left: 97px;
  top: 44px;
}
.dashboard .graphic .indicators .indicator.i18 {
  left: 111px;
  top: 37px;
}
.dashboard .graphic .indicators .indicator.i19 {
  left: 126px;
  top: 32px;
}
.dashboard .graphic .indicators .indicator.i20 {
  left: 142px;
  top: 29px;
}
.dashboard .graphic .indicators .indicator.i21 {
  left: 162px;
  top: 27px;
}
.dashboard .graphic .indicators .indicator.i22 {
  left: 182px;
  top: 29px;
}
.dashboard .graphic .indicators .indicator.i23 {
  left: 202px;
  top: 33px;
}
.dashboard .graphic .indicators .indicator.i24 {
  left: 221px;
  top: 40px;
}
.dashboard .graphic .indicators .indicator.i25 {
  left: 239px;
  top: 51px;
}
.dashboard .graphic .indicators .indicator.i26 {
  left: 255px;
  top: 63px;
}
.dashboard .graphic .indicators .indicator.i27 {
  left: 269px;
  top: 78px;
}
.dashboard .graphic .indicators .indicator.i28 {
  left: 280px;
  top: 95px;
}
.dashboard .graphic .indicators .indicator.i29 {
  left: 289px;
  top: 113px;
}
.dashboard .graphic .indicators .indicator.i30 {
  left: 295px;
  top: 132px;
}
.dashboard .graphic .indicators .indicator.i31 {
  left: 298px;
  top: 152px;
}
.dashboard .graphic .indicators .indicator.i32 {
  left: 298px;
  top: 172px;
}
.dashboard .graphic .indicators .indicator.i33 {
  left: 295px;
  top: 192px;
}
.dashboard .graphic .indicators .indicator.i34 {
  left: 288px;
  top: 212px;
}
.dashboard .graphic .indicators .indicator.i35 {
  left: 279px;
  top: 230px;
}
.dashboard .graphic .indicators .indicator.i36 {
  left: 267px;
  top: 246px;
}
.dashboard .graphic .indicators .indicator.i37 {
  left: 252px;
  top: 261px;
}
.dashboard .graphic .indicators .indicator.i38 {
  left: 236px;
  top: 273px;
}
.dashboard .graphic .toggle {
  background-color: #111216;
  position: absolute;
  z-index: 1;
}
.dashboard .graphic .toggle.on {
  background-color: #f57a01;
}
.dashboard .graphic .toggle.on.blinking {
  -webkit-animation: blinking-toggle 1s infinite;
          animation: blinking-toggle 1s infinite;
}
@-webkit-keyframes blinking-toggle {
  0% {
    background-color: #f57a01;
  }
  60% {
    background-color: #f57a01;
  }
  70% {
    background-color: #111216;
  }
  90% {
    background-color: #111216;
  }
  100% {
    background-color: #f57a01;
  }
}
@keyframes blinking-toggle {
  0% {
    background-color: #f57a01;
  }
  60% {
    background-color: #f57a01;
  }
  70% {
    background-color: #111216;
  }
  90% {
    background-color: #111216;
  }
  100% {
    background-color: #f57a01;
  }
}
.dashboard .graphic .toggle span {
  display: none;
}
.dashboard .graphic .toggle.parking {
  height: 66px;
  position: absolute;
  top: 666px;
  left: 549px;
  width: 52px;
}
.dashboard .graphic .toggle.forward {
  height: 66px;
  position: absolute;
  top: 666px;
  left: 606px;
  width: 52px;
}
.dashboard .graphic .toggle.backward {
  height: 66px;
  position: absolute;
  top: 666px;
  left: 717px;
  width: 52px;
}
.dashboard .graphic .toggle.cruise {
  background-color: #111216;
  height: 36px;
  position: absolute;
  top: 639px;
  left: 930px;
  width: 30px;
}
.dashboard .graphic .toggle.cruise::before,
.dashboard .graphic .toggle.cruise::after {
  content: "";
  background-color: #111216;
  height: 15px;
  width: 13px;
}
.dashboard .graphic .toggle.cruise::before {
  position: absolute;
  top: -20px;
  left: 6px;
}
.dashboard .graphic .toggle.cruise::after {
  position: absolute;
  top: -20px;
  left: 22px;
}
.dashboard .graphic .toggle.cruise.on {
  background-color: #f57a01;
}
.dashboard .graphic .toggle.cruise.state1::before {
  background-color: inherit;
}
.dashboard .graphic .toggle.cruise.state2::after {
  background-color: inherit;
}
.dashboard .graphic .toggle.kickdown {
  height: 35px;
  position: absolute;
  top: 580px;
  left: 966px;
  width: 40px;
}
.ie .dashboard,
.firefox .dashboard {
  zoom: 1;
}
.ie .dashboard .graphic .meter,
.firefox .dashboard .graphic .meter {
  height: 7px;
}
/*

######## ########     ###     ######  ########  #######  ########
   ##    ##     ##   ## ##   ##    ##    ##    ##     ## ##     ##
   ##    ##     ##  ##   ##  ##          ##    ##     ## ##     ##
   ##    ########  ##     ## ##          ##    ##     ## ########
   ##    ##   ##   ######### ##          ##    ##     ## ##   ##
   ##    ##    ##  ##     ## ##    ##    ##    ##     ## ##    ##
   ##    ##     ## ##     ##  ######     ##     #######  ##     ##

*/
.tractor .background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  bottom: 20%;
  background-color: gray;
  background-image: url(../assets/bg.jpg);
  background-position: 0px 0px;
  background-size: auto 100%;
  opacity: 1.0;
  -webkit-perspective: 333px;
          perspective: 333px;
  -webkit-transition: opacity 0.333s linear;
          transition: opacity 0.333s linear;
  will-change: background-position;
  z-index: 0;
}
.tractor .background::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-image: inherit;
  background-position: inherit;
  background-size: inherit;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  will-change: background-position;
}
.tractor .fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, #fff 100%), -webkit-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 85%, #fff 100%);
  background-image: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, #fff 100%), linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 85%, #fff 100%);
  background-size: 100% 100%;
  opacity: 1;
  -webkit-transition: opacity 0.333s linear;
          transition: opacity 0.333s linear;
  z-index: 1;
}
.tractor .graphic {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  background-image: url(../assets/tractor/traktor.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 882px;
  opacity: 1;
  -webkit-transition: opacity 0.333s linear;
          transition: opacity 0.333s linear;
  width: 1169px;
  z-index: 2;
}
.tractor .graphic .wheel {
  background-color: transparent;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  will-change: transform;
}
.tractor .graphic .wheel.front {
  height: 412px;
  width: 412px;
  position: absolute;
  left: 16px;
  bottom: 0;
}
.tractor .graphic .wheel.front.rubber {
  background-image: url("../assets/tractor/vorne_rotierend.png");
  z-index: 1;
}
.tractor .graphic .wheel.front.cap {
  background-image: url("../assets/tractor/vorne_statisch.png");
  z-index: 0;
}
.tractor .graphic .wheel.front.light {
  background-image: url("../assets/tractor/vorne_licht.png");
  z-index: 2;
}
.tractor .graphic .wheel.rear {
  height: 512px;
  width: 512px;
  position: absolute;
  bottom: 7px;
  right: 0;
}
.tractor .graphic .wheel.rear.rubber {
  background-image: url("../assets/tractor/hinten_rotierend.png");
  z-index: 1;
}
.tractor .graphic .wheel.rear.cap {
  background-image: url("../assets/tractor/hinten_statisch.png");
  z-index: 0;
}
.tractor .graphic .wheel.rear.light {
  background-image: url("../assets/tractor/hinten_licht.png");
  z-index: 2;
}
.tractor .graphic .wheel.light {
  background-blend-mode: soft-light;
}
.tractor .graphic .shadow {
  background-image: url(../assets/tractor/kontaktschatten.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100% 100%;
  height: 161px;
  position: absolute;
  right: -200px;
  bottom: -77px;
  left: -210px;
}
.tractor .detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  overflow: hidden;
  -webkit-transition: opacity 0.333s linear;
          transition: opacity 0.333s linear;
  z-index: 3;
}
.tractor .detail::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  right: -3px;
  background-image: -webkit-linear-gradient(left, #fff 2%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, #fff 98%);
  background-image: linear-gradient(to right, #fff 2%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, #fff 98%);
  background-size: 100% 100%;
  content: " ";
  z-index: 5;
}
.tractor .detail:not(.show) {
  opacity: 0;
}
.tractor .detail.rear {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1250px;
  overflow: visible;
  width: 2000px;
}
.tractor .detail.rear .left,
.tractor .detail.rear .right {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
.tractor .detail.rear .left {
  left: 24.5%;
  right: 0;
  height: 540px;
  width: 657px;
}
.tractor .detail.rear .left.over {
  background-image: url(../assets/tractor/hinten_detail_links_over.png);
  z-index: 3;
}
.tractor .detail.rear .left.under {
  background-image: url(../assets/tractor/hinten_detail_links_under.png);
  z-index: 1;
}
.tractor .detail.rear .right {
  background-image: url(../assets/tractor/hinten_detail_rechts.png);
  top: 52%;
  left: 90%;
  height: 540px;
  width: 849px;
  z-index: 2;
}
.tractor .detail.rear .sides {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.tractor .detail.rear .sides::before,
.tractor .detail.rear .sides::after {
  content: " ";
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20000px;
}
.tractor .detail.rear .sides::before {
  right: 100%;
}
.tractor .detail.rear .sides::after {
  left: 100%;
}
.tractor .detail.result {
  border: solid 100px #fff;
  z-index: 4;
}
.tractor .detail.result::after {
  background-image: none;
  display: none;
}
.tractor .detail.result.correct {
  background-color: #367c2b;
}
.tractor .detail.result.correct::before {
  content: "✓";
}
.tractor .detail.result.error {
  background-color: #f4880f;
}
.tractor .detail.result.error::before {
  content: "✗";
}
.tractor .detail.result::before {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  border: none;
  color: #fff;
  font-size: 16vh;
  text-align: center;
  text-transform: uppercase;
  width: 80%;
}
.tractor .detail.show ~ .graphic,
.tractor .detail.show ~ .fade {
  opacity: 0;
}
.tractor .detail.show ~ .background {
  opacity: 0.666;
}
/*

      ##  #######  ##    ##  ######  ######## ####  ######  ##    ##
      ## ##     ##  ##  ##  ##    ##    ##     ##  ##    ## ##   ##
      ## ##     ##   ####   ##          ##     ##  ##       ##  ##
      ## ##     ##    ##     ######     ##     ##  ##       #####
##    ## ##     ##    ##          ##    ##     ##  ##       ##  ##
##    ## ##     ##    ##    ##    ##    ##     ##  ##    ## ##   ##
 ######   #######     ##     ######     ##    ####  ######  ##    ##

*/
.joystick {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}
.joystick * {
  pointer-events: none;
}
.joystick .graphic {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  background-image: url(../assets/joystick_v05b.jpg);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  height: 664px;
  width: 600px;
  will-change: background-position;
  /*.spritesheet(@preset, @row, @col) {
			@rowOffset: -(@preset - 1) * @SpriteNumRows;
			&[data-preset="@{preset}"][data-row="@{row}"][data-col="@{col}"] {
				background-position: -@row * @SpriteWidth (@rowOffset - @col) * @SpriteHeight;
			}
		}*/
 /*
.spritesheet(2, 0, 0); .spritesheet(2, 0, 1); .spritesheet(2, 0, 2); .spritesheet(2, 0, 3); .spritesheet(2, 0, 4); .spritesheet(2, 0, 5); .spritesheet(2, 0, 6); .spritesheet(2, 0, 7); .spritesheet(2, 0, 8); .spritesheet(2, 0, 9);
		.spritesheet(2, 1, 0); .spritesheet(2, 1, 1); .spritesheet(2, 1, 2); .spritesheet(2, 1, 3); .spritesheet(2, 1, 4); .spritesheet(2, 1, 5); .spritesheet(2, 1, 6); .spritesheet(2, 1, 7); .spritesheet(2, 1, 8); .spritesheet(2, 1, 9);
		.spritesheet(2, 2, 0); .spritesheet(2, 2, 1); .spritesheet(2, 2, 2); .spritesheet(2, 2, 3); .spritesheet(2, 2, 4); .spritesheet(2, 2, 5); .spritesheet(2, 2, 6); .spritesheet(2, 2, 7); .spritesheet(2, 2, 8); .spritesheet(2, 2, 9);
		.spritesheet(2, 3, 0); .spritesheet(2, 3, 1); .spritesheet(2, 3, 2); .spritesheet(2, 3, 3); .spritesheet(2, 3, 4); .spritesheet(2, 3, 5); .spritesheet(2, 3, 6); .spritesheet(2, 3, 7); .spritesheet(2, 3, 8); .spritesheet(2, 3, 9);
		.spritesheet(2, 4, 0); .spritesheet(2, 4, 1); .spritesheet(2, 4, 2); .spritesheet(2, 4, 3); .spritesheet(2, 4, 4); .spritesheet(2, 4, 5); .spritesheet(2, 4, 6); .spritesheet(2, 4, 7); .spritesheet(2, 4, 8); .spritesheet(2, 4, 9);
		.spritesheet(2, 5, 0); .spritesheet(2, 5, 1); .spritesheet(2, 5, 2); .spritesheet(2, 5, 3); .spritesheet(2, 5, 4); .spritesheet(2, 5, 5); .spritesheet(2, 5, 6); .spritesheet(2, 5, 7); .spritesheet(2, 5, 8); .spritesheet(2, 5, 9);*/
}
.joystick .graphic[data-preset="1"] {
 background-image: url(https://www.deere.co.uk/assets/campaigns/commandpro/assets/joystick_v05a.jpg);
}
.joystick .graphic[data-preset="2"] {
  background-image: url(../assets/joystick_v05b.jpg);
}
.joystick .graphic[data-row="0"][data-col="0"] {
  background-position: 0px 0px;
}
.joystick .graphic[data-row="1"][data-col="0"] {
  background-position: -600px 0px;
}
.joystick .graphic[data-row="2"][data-col="0"] {
  background-position: -1200px 0px;
}
.joystick .graphic[data-row="3"][data-col="0"] {
  background-position: -1800px 0px;
}
.joystick .graphic[data-row="4"][data-col="0"] {
  background-position: -2400px 0px;
}
.joystick .graphic[data-row="5"][data-col="0"] {
  background-position: -3000px 0px;
}
.joystick .graphic[data-row="6"][data-col="0"] {
  background-position: -3600px 0px;
}
.joystick .graphic[data-row="7"][data-col="0"] {
  background-position: -4200px 0px;
}
.joystick .graphic[data-row="8"][data-col="0"] {
  background-position: -4800px 0px;
}
.joystick .graphic[data-row="9"][data-col="0"] {
  background-position: -5400px 0px;
}
.joystick .graphic[data-row="0"][data-col="1"] {
  background-position: 0px -664px;
}
.joystick .graphic[data-row="1"][data-col="1"] {
  background-position: -600px -664px;
}
.joystick .graphic[data-row="2"][data-col="1"] {
  background-position: -1200px -664px;
}
.joystick .graphic[data-row="3"][data-col="1"] {
  background-position: -1800px -664px;
}
.joystick .graphic[data-row="4"][data-col="1"] {
  background-position: -2400px -664px;
}
.joystick .graphic[data-row="5"][data-col="1"] {
  background-position: -3000px -664px;
}
.joystick .graphic[data-row="6"][data-col="1"] {
  background-position: -3600px -664px;
}
.joystick .graphic[data-row="7"][data-col="1"] {
  background-position: -4200px -664px;
}
.joystick .graphic[data-row="8"][data-col="1"] {
  background-position: -4800px -664px;
}
.joystick .graphic[data-row="9"][data-col="1"] {
  background-position: -5400px -664px;
}
.joystick .graphic[data-row="0"][data-col="2"] {
  background-position: 0px -1328px;
}
.joystick .graphic[data-row="1"][data-col="2"] {
  background-position: -600px -1328px;
}
.joystick .graphic[data-row="2"][data-col="2"] {
  background-position: -1200px -1328px;
}
.joystick .graphic[data-row="3"][data-col="2"] {
  background-position: -1800px -1328px;
}
.joystick .graphic[data-row="4"][data-col="2"] {
  background-position: -2400px -1328px;
}
.joystick .graphic[data-row="5"][data-col="2"] {
  background-position: -3000px -1328px;
}
.joystick .graphic[data-row="6"][data-col="2"] {
  background-position: -3600px -1328px;
}
.joystick .graphic[data-row="7"][data-col="2"] {
  background-position: -4200px -1328px;
}
.joystick .graphic[data-row="8"][data-col="2"] {
  background-position: -4800px -1328px;
}
.joystick .graphic[data-row="9"][data-col="2"] {
  background-position: -5400px -1328px;
}
.joystick .graphic[data-row="0"][data-col="3"] {
  background-position: 0px -1992px;
}
.joystick .graphic[data-row="1"][data-col="3"] {
  background-position: -600px -1992px;
}
.joystick .graphic[data-row="2"][data-col="3"] {
  background-position: -1200px -1992px;
}
.joystick .graphic[data-row="3"][data-col="3"] {
  background-position: -1800px -1992px;
}
.joystick .graphic[data-row="4"][data-col="3"] {
  background-position: -2400px -1992px;
}
.joystick .graphic[data-row="5"][data-col="3"] {
  background-position: -3000px -1992px;
}
.joystick .graphic[data-row="6"][data-col="3"] {
  background-position: -3600px -1992px;
}
.joystick .graphic[data-row="7"][data-col="3"] {
  background-position: -4200px -1992px;
}
.joystick .graphic[data-row="8"][data-col="3"] {
  background-position: -4800px -1992px;
}
.joystick .graphic[data-row="9"][data-col="3"] {
  background-position: -5400px -1992px;
}
.joystick .graphic[data-row="0"][data-col="4"] {
  background-position: 0px -2656px;
}
.joystick .graphic[data-row="1"][data-col="4"] {
  background-position: -600px -2656px;
}
.joystick .graphic[data-row="2"][data-col="4"] {
  background-position: -1200px -2656px;
}
.joystick .graphic[data-row="3"][data-col="4"] {
  background-position: -1800px -2656px;
}
.joystick .graphic[data-row="4"][data-col="4"] {
  background-position: -2400px -2656px;
}
.joystick .graphic[data-row="5"][data-col="4"] {
  background-position: -3000px -2656px;
}
.joystick .graphic[data-row="6"][data-col="4"] {
  background-position: -3600px -2656px;
}
.joystick .graphic[data-row="7"][data-col="4"] {
  background-position: -4200px -2656px;
}
.joystick .graphic[data-row="8"][data-col="4"] {
  background-position: -4800px -2656px;
}
.joystick .graphic[data-row="9"][data-col="4"] {
  background-position: -5400px -2656px;
}
.joystick .graphic[data-row="0"][data-col="5"] {
  background-position: 0px -3320px;
}
.joystick .graphic[data-row="1"][data-col="5"] {
  background-position: -600px -3320px;
}
.joystick .graphic[data-row="2"][data-col="5"] {
  background-position: -1200px -3320px;
}
.joystick .graphic[data-row="3"][data-col="5"] {
  background-position: -1800px -3320px;
}
.joystick .graphic[data-row="4"][data-col="5"] {
  background-position: -2400px -3320px;
}
.joystick .graphic[data-row="5"][data-col="5"] {
  background-position: -3000px -3320px;
}
.joystick .graphic[data-row="6"][data-col="5"] {
  background-position: -3600px -3320px;
}
.joystick .graphic[data-row="7"][data-col="5"] {
  background-position: -4200px -3320px;
}
.joystick .graphic[data-row="8"][data-col="5"] {
  background-position: -4800px -3320px;
}
.joystick .graphic[data-row="9"][data-col="5"] {
  background-position: -5400px -3320px;
}
.joystick .graphic button[data-preset] {
  border: none;
  background: rgba(64, 224, 208, 0.3);
  background: transparent;
  height: 30px;
  outline: none;
  pointer-events: auto;
  -webkit-transform: translate(-50%, -50%) rotate(80deg);
          transform: translate(-50%, -50%) rotate(80deg);
  width: 50px;
}
.joystick .graphic button[data-preset][data-preset="1"] {
  position: absolute;
  top: 308px;
  left: 413px;
}
.joystick .graphic button[data-preset][data-preset="2"] {
  position: absolute;
  top: 255px;
  left: 400px;
}
.joystick .graphic .cross {
  position: absolute;
  left: 19%;
  bottom: 19.4%;
  height: 33%;
  width: 22%;
}
.joystick .graphic .cross .dot {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #f4880f;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
  height: 25px;
  width: 25px;
}
/*

########  ######## ########  ##     ##  ######
##     ## ##       ##     ## ##     ## ##    ##
##     ## ##       ##     ## ##     ## ##
##     ## ######   ########  ##     ## ##   ####
##     ## ##       ##     ## ##     ## ##    ##
##     ## ##       ##     ## ##     ## ##    ##
########  ######## ########   #######   ######

*/
.controls {
  display: none;
  background-color: white;
  border: solid gray 1px;
  font-size: 10px;
  line-height: 22px;
  padding: 10px;
  padding-top: 26px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.controls input[readonly] {
  border: none;
  background-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.controls title {
  background-color: gray;
  color: white;
  display: block;
  font-weight: bold;
  padding: 2px 8px;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.controls button {
  background-color: gray;
  border: solid 1px gray;
  color: white;
  margin: 2px 2px;
  padding: 2px 4px;
  -webkit-transition: all 0.2s linear;
          transition: all 0.2s linear;
}
.controls button:hover,
.controls button:focus {
  border-color: #367c2b;
  background-color: #367c2b;
  color: #ffde00;
  outline: none;
}