/*======Universal Styles======*/

body {
  background-color: rgba(103,106,108,.5);
}

/*Modal Styles*/
#start_modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 175px;
  margin-left: -150px;
  margin-top: -100px;
  background-color: #676a6c;
  text-align: center;
  z-index: 10;
  outline: 9999px solid rgba(0,0,0,.8);
  border: 5px solid #676a6c;
}

#start_modal h2 {
  font-family: 'Oswald';
  margin: 27px;
  color: #ffffff;
  
}

#start_modal div {
  border-radius: 8px;
  font-family: 'Open Sans';
  font-size: 1em;
  font-weight: bold;
  background-color: #f1801a;
  color: #dddddd;
  width: 80px;
  margin: 0 auto;
  padding: 5px;
}

#start_modal div:hover {
  cursor: pointer;
  background-color: #904c0f;
  box-shadow: 2px 2px 2px #000000;
}

#end_modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 200px;
  margin-left: -150px;
  margin-top: -100px;
  background-color: #676a6c;
  text-align: center;
  z-index: 10;
  outline: 9999px solid rgba(0,0,0,.8);
  border: 5px solid #676a6c;
  display: none;
}

#end_modal p {
  font-family: 'Open Sans';
  margin-top: 10px;
  padding: 5px;
  color: #ffffff;
}

#end_modal a {
  text-decoration: none;
}

#end_modal a:link {
  color: #f1801a;
}

#end_modal a:visited {
  color: #f1801a;
}

#end_modal a:hover {
  color: #904c0f;
} 

#end_modal a:active {
  color: #f1801a;
}

#restart {
  border-radius: 8px;
  font-family: 'Open Sans';
  font-size: 1em;
  font-weight: bold;
  background-color: #f1801a;
  color: #dddddd;
  width: 80px;
  margin: 0 auto;
  padding: 5px;
  margin-bottom: 10px;
}

#restart:hover {
  cursor: pointer;
  background-color: #904c0f;
  box-shadow: 2px 2px 2px #000000;
}

/*======Desktop Styles======*/

 
/*Body and Panel Styles*/
body {
  position: relative;
  margin: 0 auto;
  width: 1024px;
  font-family: 'Open Sans';
}

#panel {
  position: absolute;
}
  
.mobile { 
  display: none;
}
  
/*Image Styles*/
.screenshot {
  position: absolute;
}

}
  
/*Screenshot Styles*/
  
.screenshot {
  position: absolute;
}

/*Callout Styles*/
.callout {
  display: none;
}

#callout1a {
  width: 1024px;
  height: 768px;
  top: 0px;
  position: absolute;
  border-top: 115px solid rgba(0,0,0,.8);
  border-right: 867px solid rgba(0,0,0,.8);
  z-index: 14;
  box-sizing: border-box;
}

#callout2a {
  width: 1024px;
  height: 425px;
  top: 0px;
  border-top: 141px solid rgba(0,0,0,.8);
  border-bottom: 214px solid rgba(0,0,0,.8);
  z-index: 12;
}

#callout3a {
  width: 1024px;
  height: 225px;
  top: 0px;
  border-top: 287px solid rgba(0,0,0,.8);
  border-bottom: 257px solid rgba(0,0,0,.8);
  z-index: 13;
}

#callout4 {
  width: 1024px;
  height: 768px;
  top: 0px;
  position: absolute;
}

#callout4a {
  width: 1024px;
  height: 768px;
  top: 0px;
  position: absolute;
  border-top: 211px solid rgba(0,0,0,.8);
  border-left: 743px solid rgba(0,0,0,.8);
  z-index: 14;
  box-sizing: border-box;
}

#callout5a {
  width: 1024px;
  height: 768px;
  top: 0px;
  border-top: 287px solid rgba(0,0,0,.8);
  border-left: 229px solid rgba(0,0,0,.8);
  z-index: 15;
  box-sizing: border-box;
}

#callout6a {
  width: 1024px;
  height: 38px;
  top: 0px;
  border-top: 0px solid rgba(0,0,0,.8);
  border-bottom: 0px solid rgba(0,0,0,.8);
  z-index: 16;

}


#callout7a {
  border: 4px solid #f1801a;
  width: 32px;
  border-radius: 8px;
  height: 31px;
  position: absolute;
  z-index: 150;
  left: 755px;
  top: 407px;
}

#callout11a {
  width: 1024px;
  height: 768px;
  top: 0px;
  border-top: 258px solid rgba(0,0,0,.8);
  border-left: 817px solid rgba(0,0,0,.8);
  z-index: 16;
  box-sizing: border-box;
}

#callout12a {
  width: 1024px;
  height: 768px;
  top: 0px;
  border-top: 400px solid rgba(0,0,0,.8);
  border-right: 3px solid rgba(0,0,0,.8);
  border-left: 236px solid rgba(0,0,0,.8);
  z-index: 14;
  box-sizing: border-box;
}

#callout14a {
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 35px solid #676a6c;
  z-index: 151;
  top: 257px;
  left: 341px;
}
  
#callout16a {
  border-top: 15px solid #676a6c;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  z-index: 151;
  top: 635px;
  left: 745px;
}

#callout17a {
  border-top: 15px solid #676a6c;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  z-index: 151;
  top: 635px;
  left: 745px;
}

#callout18a {
  border-top: 15px solid transparent;
  border-right: 40px solid #676a6c;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  z-index: 151;
  top: 221px;
  left: 623px;
}

#callout19a {
  border-top: 40px solid #676a6c;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  z-index: 151;
  top: 424px;
  left: 811px;
}

.arrow {
  width: 0;
  height: 0;
  position: absolute;
}

.section_overlay {
  position: absolute;
}

.cursor {
  position: absolute;
}

#cursor3a {
  animation-name: cursor3a;
  animation-delay: 1s;
  animation-duration: 8s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor3a;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor3a;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 8s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor3a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 8s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
  top: 500px;
  left: 932px;
  z-index: 201;
}

@keyframes cursor3a {
  0% {top: 500px; left: 932px;}
  33% {top: 437px; left: 451px;}
  66% {top: 437px; left: 451px;}
  100% {top: 500px; left: 932px; z-index: 1;}
  
}

@-webkit-keyframes cursor3a {
  0% {top: 500px; left: 932px;}
  33% {top: 437px; left: 451px;}
  66% {top: 437px; left: 451px;}
  100% {top: 500px; left: 932px; z-index: 1;}
  
}

@-moz-keyframes cursor3a {
  0% {top: 500px; left: 932px;}
  33% {top: 437px; left: 451px;}
  66% {top: 437px; left: 451px;}
  100% {top: 500px; left: 932px; z-index: 1;}
  
}

@-ms-keyframes cursor3a {
 0% {top: 500px; left: 932px;}
  33% {top: 437px; left: 451px;}
  66% {top: 437px; left: 451px;}
  100% {top: 500px; left: 932px; z-index: 1;}
  
}
#cursor4a {
  animation-name: cursor4a;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor4a;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor4a;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor4a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
  top: 283px;
  left: 209px;
  z-index: 201;
}

@keyframes cursor4a {
  0% {top: 283px; left: 209px;}
  33% {top: 204px; left: 368px;}
  66% {top: 204px; left: 368px;}
  100% {top: 283px; left: 209px; z-index: 1;}
  
}

@-webkit-keyframes cursor4a {
  0% {top: 283px; left: 209px;}
  33% {top: 204px; left: 368px;}
  66% {top: 204px; left: 368px;}
  100% {top: 283px; left: 209px; z-index: 1;}
  
}

@-moz-keyframes cursor4a {
  0% {top: 283px; left: 209px;}
  33% {top: 204px; left: 368px;}
  66% {top: 204px; left: 368px;}
  100% {top: 283px; left: 209px; z-index: 1;}
  
}

@-ms-keyframes cursor4a {
 0% {top: 283px; left: 209px;}
  33% {top: 204px; left: 368px;}
  66% {top: 204px; left: 368px;}
  100% {top: 283px; left: 209px; z-index: 1;}
  
}

#cursor7a {
  animation-name: cursor7a;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor7a;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor7a;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor7a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
  top: 294px;
  left: 2498px;
  z-index: 201;
}

@keyframes cursor7a {
  0% {top: 294px; left: 498px;}
  33% {top: 424px; left: 768px;}
  66% {top: 424px; left: 768px;}
  100% {top: 294px; left: 498px; z-index: 1;}
  
}

@-webkit-keyframes cursor7a {
  0% {top: 294px; left: 498px;}
  33% {top: 424px; left: 768px;}
  66% {top: 424px; left: 768px;}
  100% {top: 294px; left: 498px; z-index: 1;}
  
}

@-moz-keyframes cursor7a {
  0% {top: 294px; left: 498px;}
  33% {top: 424px; left: 768px;}
  66% {top: 424px; left: 768px;}
  100% {top: 294px; left: 498px; z-index: 1;}
  
}

@-ms-keyframes cursor7a {
 0% {top: 294px; left: 498px;}
  33% {top: 424px; left: 768px;}
  66% {top: 424px; left: 768px;}
  100% {top: 294px; left: 498px; z-index: 1;}
  
}

#cursor8a {
  animation-name: cursor8a;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor8a;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor8a;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor8a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
  top: 296px;
  left: 581px;
  z-index: 202;
}

@keyframes cursor8a {
  0% {top: 296px; left: 581px;}
  33% {top: 568px; left: 795px;}
  66% {top: 568px; left: 795px;}
  100% {top: 296px; left: 581px; z-index: 2;}
  
}

@-webkit-keyframes cursor8a {
  0% {top: 296px; left: 581px;}
  33% {top: 568px; left: 795px;}
  66% {top: 568px; left: 795px;}
  100% {top: 296px; left: 581px; z-index: 2;}
  
}

@-moz-keyframes cursor8a {
  0% {top: 296px; left: 581px;}
  33% {top: 568px; left: 795px;}
  66% {top: 568px; left: 795px;}
  100% {top: 296px; left: 581px; z-index: 2;}
  
}

@-ms-keyframes cursor8a {
  0% {top: 296px; left: 581px;}
  33% {top: 568px; left: 795px;}
  66% {top: 568px; left: 795px;}
  100% {top: 296px; left: 581px; z-index: 2;}
  
}

#cursor9a {
  animation-name: cursor9a;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor9a;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor9a;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor9a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
  top: 102px;
  left: 714px;
  z-index: 202;
}

@keyframes cursor9a {
  0% {top: 102px; left: 714px;}
  33% {top: 340px; left: 237px;}
  66% {top: 340px; left: 237px;}
  100% {top: 102px; left 714px; z-index: 2;}
  
}

@-webkit-keyframes cursor9a {
  0% {top: 102px; left: 714px;}
  33% {top: 340px; left: 237px;}
  66% {top: 340px; left: 237px;}
  100% {top: 102px; left 714px; z-index: 2;}
  
}

@-moz-keyframes cursor9a {
  0% {top: 102px; left: 714px;}
  33% {top: 340px; left: 237px;}
  66% {top: 340px; left: 237px;}
  100% {top: 102px; left 714px; z-index: 2;}
  
}

@-ms-keyframes cursor9a {
  0% {top: 102px; left: 714px;}
  33% {top: 340px; left: 237px;}
  66% {top: 340px; left: 237px;}
  100% {top: 102px; left 714px; z-index: 2;}
  
}

#cursor10a {
  animation-name: cursor10a;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor10a;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor10a;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor10a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
  top: 465px;
  left: 241px;
  z-index: 203;
}

@keyframes cursor10a {
  0% {top: 465px; left: 241px;}
  33% {top: 609px; left: 277px;}
  66% {top: 609px; left: 277px;}
  100% {top: 465px; left 241px; z-index: 2;}
  
}

@-webkit-keyframes cursor10a {
  0% {top: 465px; left: 241px;}
  33% {top: 609px; left: 277px;}
  66% {top: 609px; left: 277px;}
  100% {top: 465px; left 241px; z-index: 2;}
  
}

@-moz-keyframes cursor10a {
  0% {top: 465px; left: 241px;}
  33% {top: 609px; left: 277px;}
  66% {top: 609px; left: 277px;}
  100% {top: 465px; left 241px; z-index: 2;}
  
}

@-ms-keyframes cursor10a {
  0% {top: 465px; left: 241px;}
  33% {top: 609px; left: 277px;}
  66% {top: 609px; left: 277px;}
  100% {top: 465px; left 241px; z-index: 2;}
  
}

#cursor12 {
  animation-name: cursor12;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor12;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor12;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor8a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
  top: 467px;
  left: 722px;
  z-index: 202;
}

@keyframes cursor12 {
  0% {top: 467px; left: 722px;}
  33% {top: 739px; left: 376px;}
  66% {top: 739px; left: 376px;}
  100% {top: 467px; left: 722px; z-index: 2;}
  
}

@-webkit-keyframes cursor12 {
  0% {top: 467px; left: 722px;}
  33% {top: 739px; left: 376px;}
  66% {top: 739px; left: 376px;}
  100% {top: 467px; left: 722px; z-index: 2;}
  
}

@-moz-keyframes cursor12 {
  0% {top: 467px; left: 722px;}
  33% {top: 739px; left: 376px;}
  66% {top: 739px; left: 376px;}
  100% {top: 467px; left: 722px; z-index: 2;}
  
}

@-ms-keyframes cursor12 {
  0% {top: 467px; left: 722px;}
  33% {top: 739px; left: 376px;}
  66% {top: 739px; left: 376px;}
  100% {top: 467px; left: 722px; z-index: 2;}
  
}

#cursor13a {
  animation-name: cursor13a;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor13a;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor13a;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor13a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards; 
  top: 150px;
  left: 230px;
  z-index: 203;
}

@keyframes cursor13a {
  0% {top: 150px; left: 230px;}
  33% {top: 385px; left: 35px;}
  66% {top: 385px; left: 35px;}
  100% {top: 150px; left 230px; z-index: 2;}
  
}

@-webkit-keyframes cursor13a {
  0% {top: 150px; left: 230px;}
  33% {top: 385px; left: 35px;}
  66% {top: 385px; left: 35px;}
  100% {top: 150px; left 230px; z-index: 2;}
  
}

@-moz-keyframes cursor13a {
  0% {top: 150px; left: 230px;}
  33% {top: 385px; left: 35px;}
  66% {top: 385px; left: 35px;}
  100% {top: 150px; left 230px; z-index: 2;}
  
}

@-ms-keyframes cursor13a {
  0% {top: 150px; left: 230px;}
  33% {top: 385px; left: 35px;}
  66% {top: 385px; left: 35px;}
  100% {top: 150px; left 230px; z-index: 2;}
  
}

#cursor14a {
  animation-name: cursor14a;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor14a;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor14a;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor14a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards; 
  top: 312px;
  left: 225px;
  z-index: 203;
}

@keyframes cursor14a {
  0% {top: 312px; left: 225px;}
  33% {top: 315px; left: 376px;}
  66% {top: 315px; left: 376px;}
  100% {top: 312px; left 225px; z-index: 2;}
  
}

@-webkit-keyframes cursor14a {
  0% {top: 312px; left: 225px;}
  33% {top: 315px; left: 376px;}
  66% {top: 315px; left: 376px;}
  100% {top: 312px; left 225px; z-index: 2;}
  
}

@-moz-keyframes cursor14a {
  0% {top: 312px; left: 225px;}
  33% {top: 315px; left: 376px;}
  66% {top: 315px; left: 376px;}
  100% {top: 312px; left 225px; z-index: 2;}
  
}

@-ms-keyframes cursor14a {
  0% {top: 312px; left: 225px;}
  33% {top: 315px; left: 376px;}
  66% {top: 315px; left: 376px;}
  100% {top: 312px; left 225px; z-index: 2;}
  
}

#cursor15a {
  animation-name: cursor15a;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor15a;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor15a;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor15a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards; 
  top: 128px;
  left: 863px;
  z-index: 203;
}

@keyframes cursor15a {
  0% {top: 128px; left: 863px;}
  33% {top: 405px; left: 249px;}
  66% {top: 405px; left: 249px;}
  100% {top: 128px; left 863px; z-index: 2;}
  
}

@-webkit-keyframes cursor15a {
  0% {top: 128px; left: 863px;}
  33% {top: 405px; left: 249px;}
  66% {top: 405px; left: 249px;}
  100% {top: 128px; left 863px; z-index: 2;}
  
}

@-moz-keyframes cursor15a {
  0% {top: 128px; left: 863px;}
  33% {top: 405px; left: 249px;}
  66% {top: 405px; left: 249px;}
  100% {top: 128px; left 863px; z-index: 2;}
  
}

@-ms-keyframes cursor15a {
  0% {top: 128px; left: 863px;}
  33% {top: 405px; left: 249px;}
  66% {top: 405px; left: 249px;}
  100% {top: 128px; left 863px; z-index: 2;}
  
}

#cursor20a {
  animation-name: cursor20a;
  animation-delay: 1s;
  animation-duration: 6s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor20a;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: cursor20a;
  -moz-animation-delay: 1s;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -ms-animation-name: cursor20a;
  -ms-animation-delay: 1s;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards; 
  top: 417px;
  left: 377px;
  z-index: 203;
}

@keyframes cursor20a {
  0% {top: 417px; left: 377px;}
  33% {top: 279px; left: 77px;}
  66% {top: 279px; left: 77px;}
  100% {top: 417px; left: 377px; z-index: 2;}
  
}

@-webkit-keyframes cursor20a {
  0% {top: 417px; left: 377px;}
  33% {top: 279px; left: 77px;}
  66% {top: 279px; left: 77px;}
  100% {top: 417px; left: 377px; z-index: 2;}
  
}

@-moz-keyframes cursor20a {
  0% {top: 417px; left: 377px;}
  33% {top: 279px; left: 77px;}
  66% {top: 279px; left: 77px;}
  100% {top: 417px; left: 377px; z-index: 2;}
  
}

@-ms-keyframes cursor20a {
  0% {top: 417px; left: 377px;}
  33% {top: 279px; left: 77px;}
  66% {top: 279px; left: 77px;}
  100% {top: 417px; left: 377px; z-index: 2;}
  
}  

/*Step Styles*/

.step {
  display: none; 
  position: absolute;
  background-color: #676a6c;
  border: 5px solid #676a6c;
  border-radius: 8px;
  font-family: "Open Sans";
  font-size: 1em;
  width: 300px;
  padding: 5px;
  color: #ffffff;
  z-index: 100;
}

.actionstep {
	color:#f1801a;
}

#step1 {
  top: 112px;
  left: 300px;
}

#step2 {
  top: 259px;
  left: 654px;
}

#step3 {
  top: 253px;
  left: 700px;
}

#step4 {
  top: 119px;
  left: 4px;
}

#step5 {
  top: 402px;
  left: 676px;
}

#step6 {
  top: 128px;
  left: 597px;
}

#step7 {
  top: 60px;
  left: 676px;
}

#step8 {
  top: 134px;
  left: 383px;
}

#step9 {
  top: 134px;
  left: 604px;
}

#step19 a {
  text-decoration: none;
}

#step9 a:link {
  color: #f1801a;
}

#step9 a:visited {
  color: #f1801a;
}

#step9 a:hover {
  color: #904c0f;
} 

#step9 a:active {
  color: #549031;
}

#step10 {
  top: 174px;
  left: 42px;
}

#step11 {
  top: 499px;
  left: 578px;
}

#step12 {
  top: 302px;
  left: 532px;
}
  
#step13 {
  top: 151px;
  left: 21px;
}

#step14 {
  top: 150px;
  left: 22px;
}

#step15 {
  top: 233px;
  left: 610px;
}

#step16 {
  top: 138px;
  left: 397px;
}

#step17 {
  top: 111px;
  left: 678px;
}

#step18 {
  top: 124px;
  left: 678px;
}

#step19 {
  top: 110px;
  left: 671px;
}

#step19 a {
  text-decoration: none;
}

#step19 a:link {
  color: #f1801a;
}

#step19 a:visited {
  color: #f1801a;
}

#step19 a:hover {
  color: #904c0f;
} 

#step19 a:active {
  color: #549031;
}

#step20 {
  top: 294px;
  left: 178px;
}

#step21 {
  top: 300px;
  left: 411px;
}

/*Nav Styles*/
.nav > li {
  display: inline-block;
  list-style: none;
  color: #ffffff;
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
  background-color: #f1801a;
  border-radius: 8px;
  width: 80px;
  text-align: center;
}

.nav > li:hover {
  background-color: #904c0f;
}

#step1 .next {
  margin-left: 53px;
}

.button {
  position: absolute;
  background: rgba(255,255,255,0);
}

.button:hover {
  background: rgba(255,255,255,0);
}

#button3 {
 width: 200px;
  height: 20px;
  top: 171px;
  left: -347px;
}

#button3:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}
#button4 {
 width: 120px;
  height: 20px;
  top: 75px;
  left: 310px;
}

#button4:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}

#button5 {
  width: 98px;
  height: 32px;
  top: 512px;
  left: 404px;
}

#button5:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}

#button7 {
  width: 37px;
  height: 35px;
  top: 275px;
  left: 457px;
}

#button7:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}
  
}
#button8 {
  width: 60px;
  height: 30px;
  top: 416px;
  left: 395px;
}

#button8:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}

#button9 {
  width: 91px;
  height: 18px;
  top: 323px;
  left: -265px;
}

#button9:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}

#button10 {
  width: 113px;
  height: 32px;
  top: 172px;
  left: 210px;
}

#button10:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}

#button12 {
  width: 191px;
  height: 33px;
  top: 410px;
  left: -245px;
}

#button12:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}
  
#button13 {
  width: 24px;
  height: 24px;
  top: 359px;
  left: 16px;
}

#button13:hover {
  border: 3px solid #f1801a;
  border-radius: 100px;
  cursor: pointer;
}

#button14 {
  width: 81px;
  height: 20px;
  top: 142px;
  left: 333px;
}

#button14:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}

#button15 {
  width: 54px;
  height: 32px;
  top: 353px;
  left: -423px;
}

#button15:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}

#button20 {
  width: 101px;
  height: 30px;
  top: -35px;
  left: -166px;
}

#button20:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}

.resetGIF {
  width: 20px;
  display: inline-block;
  float: left;
}

.resetGIF:hover {
  cursor: pointer;
}

.counts {
  display: inline-block;
  float: right;
  background-color: #f1801a;
  font-family: 'Open Sans';
  color: white;
  border-radius: 8px
}

label {
  float: right;
  padding: 1px;
  margin-right: 3px;
  font-size: .85em;
}