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

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

/*Modal Styles*/
#start_modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 219px;
  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;
}

/*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: 398px solid rgba(0,0,0,.8);
  border-left: 254px solid rgba(0,0,0,.8);
  z-index: 14;
  box-sizing: border-box;
}

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

#callout3a {
  width: 1024px;
  height: 447px;
  top: 0px;
  border-top: 144px solid rgba(0,0,0,.8);
  border-bottom: 234px solid rgba(0,0,0,.8);
  z-index: 12;
}

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

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

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

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

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

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

.section_overlay {
  position: absolute;
}

.cursor {
  position: absolute;
}

#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;
}

#callout15a {
  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;
}

#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;}
  
}

#cursor6a {
  animation-name: cursor6a;
  animation-delay: 1s;
  animation-duration: 8s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: cursor6a;
  -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: cursor6a;
  -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: cursor6a;
  -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: 369px;
  left: 355px;
  z-index: 201;
}

@keyframes cursor6a {
  0% {top: 369px; left: 355px;}
  33% {top: 562px; left: 768px;}
  66% {top: 562px; left: 768px;}
  100% {top: 369px; left: 355px; z-index: 1;}
  
}

@-webkit-keyframes cursor6a {
  0% {top: 369px; left: 355px;}
  33% {top: 562px; left: 768px;}
  66% {top: 562px; left: 768px;}
  100% {top: 369px; left: 355px; z-index: 1;}
  
}

@-moz-keyframes cursor6a {
  0% {top: 369px; left: 355px;}
  33% {top: 562px; left: 768px;}
  66% {top: 562px; left: 768px;}
  100% {top: 369px; left: 355px; z-index: 1;}
  
}

@-ms-keyframes cursor6a {
  0% {top: 369px; left: 355px;}
  33% {top: 562px; left: 768px;}
  66% {top: 562px; left: 768px;}
  100% {top: 369px; left: 355px; z-index: 1;}
  
}

#cursor7a {
  animation-name: cursor7a;
  animation-delay: 1s;
  animation-duration: 8s;
  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: 8s;
  -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: 8s;
  -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: 8s;
  -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 cursor7a {
  0% {top: 296px; left: 581px;}
  33% {top: 438px; left: 837px;}
  66% {top: 438px; left: 837px;}
  100% {top: 296px; left: 581px; z-index: 2;}
  
}

@-webkit-keyframes cursor7a {
  0% {top: 296px; left: 581px;}
  33% {top: 438px; left: 837px;}
  66% {top: 438px; left: 837px;}
  100% {top: 296px; left: 581px; z-index: 2;}
  
}

@-moz-keyframes cursor7a {
  0% {top: 296px; left: 581px;}
  33% {top: 438px; left: 837px;}
  66% {top: 438px; left: 837px;}
  100% {top: 296px; left: 581px; z-index: 2;}
  
}

@-ms-keyframes cursor7a {
  0% {top: 296px; left: 581px;}
  33% {top: 438px; left: 837px;}
  66% {top: 438px; left: 837px;}
  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: 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 cursor13a {
  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 cursor13a {
  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 cursor13a {
  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 cursor13a {
  0% {top: 417px; left: 377px;}
  33% {top: 279px; left: 77px;}
  66% {top: 279px; left: 77px;}
  100% {top: 417px; left: 377px; 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: 178px; left: 620px;}
  66% {top: 178px; left: 620px;}
  100% {top: 312px; left 225px; z-index: 2;}
  
}

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

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

@-ms-keyframes cursor14a {
  0% {top: 312px; left: 225px;}
  33% {top: 178px; left: 620px;}
  66% {top: 178px; left: 620px;}
  100% {top: 312px; left 225px; 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: 87px;
  left: 658px;
}

#step1 a {
  text-decoration: none;
}

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

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

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

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

#step4 {
  top: 335px;
  left: 662px;
}

#step4 a {
  text-decoration: none;
}

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

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

#step5 {
  top: 290px;
  left: 520px;
}

#step6 {
  top: 207px;
  left: 151px;
}

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

#step8 {
  top: 114px;
  left: 460px;
}

#step8 a {
  text-decoration: none;
}

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

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

#step9 {
  top: 190px;
  left: 460px;
}

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

#step11 {
  top: 131px;
  left: 678px;
}

#step12 {
  top: 59px;
  left: 671px;
}

#step12 a {
  text-decoration: none;
}

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

#step12 a:visited {
  color: #f1801a;
}
  
#step13 {
  top: 294px;
  left: 178px;
}

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

#step15 {
  top: 131px;
  left: 411px;
}

#step15 a {
  text-decoration: none;
}

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

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

#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: #f1801a;
}

#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;
}

#button6 {
  width: 37px;
  height: 35px;
  top: 335px;
  left: 599px;
}

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

#button7 {
  width: 117px;
  height: 30px;
  top: 285px;
  left: 395px;
}

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

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

#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: 417px;
  left: -252px;
}

#button12:hover {
  border: 3px solid #f1801a;
  border-radius: 8px;
  cursor: pointer;
}
  
#button13 {
  width: 101px;
  height: 30px;
  top: -35px;
  left: -166px;
}

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

#button14 {
  width: 81px;
  height: 27px;
  top: 15px;
  left: 561px;
}

#button14: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: right;
}

.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;
}