.intro {
  background:url('../img/gearup_intro_bg.png') 100% no-repeat;
  background-size: 100%;
}

.gear-up {
  background:url('../img/gearup_bg.png') 100% no-repeat;
  background-size: 100%;
}

.subtitle {
  font-family: "HandySans";
  font-size: 50px;
  color: #fff;
}

#home-btn{
  position: absolute;
  right: 70px;
  top: 30px;
  z-index: 1;
  display: none;
  width: 99px;
}

#home-btn img {
  height: 90px;
  display: block;
}

#home-btn:after {
  content: 'HOME';
  position: absolute;
  font-family: "Gotham Book";
  font-size: 2rem;
  color: #FFF;
}

#instructions, #instructions-categories, #game, #congratulations-screen {
  display: none;
}

#instructions .subtitle, #instructions-categories .subtitle {
  padding-top: 150px;
  padding-right: 120px;
}

#instructions p {
  margin-bottom: 65px;
}

#instructions .subtitle {
  padding-top: 250px;
  padding-right: 120px;
}

#congratulations-screen .content {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    color: #FFF;
    font-family: "Gotham Bold"
}

.backpack-image {
  max-height: 950px;
  padding-left: 120px;
  padding-top: 130px;
}

.backpack-image.sm {
    max-height: 750px;
    padding-left: 180px;
    padding-top: 100px;
    margin-bottom: 20px;
}

.goto-instructions-categories img, .next img, .play-again img {
  width: 130px;
}

.play-again p {
    margin-right: -50px;
}

div.next, div.play-again {
  position: absolute;
  right: 590px;
  top: 670px;
}

ol.categories-list {
  margin-top: 30px;
  margin-left: 350px;
  font-size: 35px;
}

ol.categories-list li {
  padding-left: 55px;
  padding-bottom: 5px;
}


/* Slider */

.slider-container .bx-wrapper {
  margin: 0 auto;
  margin-top: 100px;
  width: 950px;
}

.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 800px;
  outline: 0;
  width: 95px;
  height: 72px;
  text-indent: -9999px;
  z-index: 9999;
}

.bx-wrapper a.bx-prev {
  left: 350px;
}

.bx-wrapper a.bx-next {
  right: 350px;
}

.bx-wrapper .slide {
    /* font-size: 12px; */
}

.bx-viewport {
    height: auto !important;
}

.bx-wrapper .slide h1{
  font-family: "Gotham Bold";
  text-transform: uppercase;
  color: #FFF;
  font-size: 3rem;
  margin-top: 20px;
}

.bx-wrapper .slide h3{
  font-family: "Gotham Book";
  /* text-transform: inherit; */
  color: #FFF;
  margin-top: 30px;
  margin-bottom: 150px;
}

span.draggable {
    display: inline-block;
    font-family: 'Gotham Book';
    color: #FFF;
    text-transform: capitalize;
}

span.draggable img {
  margin-bottom: 10px;
}

.slots.slots-content {
  margin-left: 180px;
}

.slots .slot {
  background: url('../img/grid-box.png');
  width: 80px;
  height: 80px;
  margin: 3px;
  text-align: center;
  font-size: 11px
}

.slots .slot img {
    width: 100%;
    height: 100%;
    padding: 2px;
    object-fit: scale-down;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.slot-item {
  max-height: 70px;
  object-fit: scale-down;
}

.sidenote {
    color: #FFF;
    margin-top: 150px;
    font-size: 2.1rem;
    font-family: "HandySans";
}