body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 20px;
}

p {
  position: relative;
  margin-bottom: 6px;
}

a {
  color: #ff4048;
  text-decoration: underline;
}

.window {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 768px;
  height: 480px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 8px;
  background-image: url('../images/Metal-Window-Texture-128x128.png'), -webkit-gradient(linear, right top, left top, from(#bbb), color-stop(50%, #e6e6e6), to(#bbb));
  background-image: url('../images/Metal-Window-Texture-128x128.png'), linear-gradient(270deg, #bbb, #e6e6e6 50%, #bbb);
  background-position: 50% 0%, 0px 0px;
  background-size: auto, auto;
  background-repeat: repeat, repeat;
  -webkit-box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.35), 0 2px 2px 0 rgba(0, 0, 0, 0.28), 0 12px 24px -6px rgba(0, 0, 0, 0.62), 0 28px 48px -18px rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.35), 0 2px 2px 0 rgba(0, 0, 0, 0.28), 0 12px 24px -6px rgba(0, 0, 0, 0.62), 0 28px 48px -18px rgba(0, 0, 0, 0.55);
  opacity: 1;
}

.window.videos-window {
  position: absolute;
  z-index: 10;
  width: auto;
  height: 576px;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}

.window.videos-window.window-closed {
  display: none;
}

.window.store-window {
  position: absolute;
  z-index: 10;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}

.window.store-window.window-closed {
  display: none;
}

.window.tumblr-window {
  position: absolute;
  z-index: 10;
  width: 480px;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}

.window.tumblr-window.window-closed {
  display: none;
}

.window.photos-window {
  position: absolute;
  z-index: 10;
  width: 720px;
  height: 480px;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}

.window.photos-window.window-closed {
  display: none;
}

.window.game-window {
  position: absolute;
  top: 33px;
  z-index: 10;
  width: 582px;
  height: auto;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}

.window.game-window.window-closed {
  display: none;
}

.body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #000;
  background-image: none;
  font-family: 'Lucida Grande', sans-serif;
  color: #000;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.02px;
}

.computer {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 1088px;
  height: 832px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 20px;
}

.traffic-light-button:active {
  -webkit-filter: brightness(75%);
  filter: brightness(75%);
}

.traffic-lights {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 57px;
  margin-top: 5px;
  margin-left: 7px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.traffic-lights.traffic-lights-hovered {
  z-index: 1;
  opacity: 0;
}

.traffic-lights.traffic-lights-hovered:hover {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}

.title-bar {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 24px;
  min-height: 24px;
}

.window-title-area {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.window-title {
  margin-top: 3px;
  font-size: 13px;
  line-height: 13px;
  cursor: default;
}

.awning {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-perspective: 300px;
  perspective: 300px;
}

.screen {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 1024px;
  height: 768px;
  min-width: 1024px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 4px;
  background-image: url('../images/Desktop.jpg');
  background-position: 50% 50%;
  background-size: 1024px;
  box-shadow: 0 0 4px 0 #000;
}

.crt-overlay {
  position: absolute;
  z-index: 9999;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.5);
  -webkit-transform: translate3d(0px, 0px, 300px);
  transform: translate3d(0px, 0px, 300px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.monitor {
  position: absolute;
  z-index: -1;
  width: 1088px;
  height: 832px;
  border-radius: 30px;
  background-color: #ddd;
  box-shadow: 0 2px 4px 0 #fff, inset 0 -1px 4px 0 #fff, 0 0 2px 0 rgba(0, 0, 0, 0.5), 0 60px 120px -60px #000, 0 30px 30px -30px #000, inset 0 0 12px -4px #000;
  -webkit-transform: perspective(300px);
  transform: perspective(300px);
}

.pinstripes {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  box-shadow: inset 0 -4px 24px 3px #fff, inset 0 4px 2px 0 #fff;
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

.awning-top {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 103%;
  height: 48px;
  background-color: #ffd317;
  box-shadow: 0 -1px 4px 0 #000;
  -webkit-transform: rotateX(24deg) rotateY(0deg) rotateZ(0deg);
  transform: rotateX(24deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.awning-strip {
  width: 100%;
  background-image: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0.25)), color-stop(50%, hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(0deg, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 100%, 0) 50%);
}

.awning-strip.awning-strip-red {
  background-image: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0.35)), color-stop(50%, hsla(0, 0%, 100%, 0))), -webkit-gradient(linear, left top, left bottom, from(#f3000b), to(#f3000b));
  background-image: linear-gradient(0deg, hsla(0, 0%, 100%, 0.35), hsla(0, 0%, 100%, 0) 50%), linear-gradient(180deg, #f3000b, #f3000b);
  box-shadow: 0 0 1px 0 #000;
}

.awning-strip.last-awning {
  box-shadow: none;
}

.awning-bottom {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 106.5%;
  height: 24px;
  margin-top: -2px;
}

.awning-strip-bottom {
  width: auto;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  background-color: #ffd317;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.25)), color-stop(0%, hsla(0, 0%, 100%, 0.44)), color-stop(50%, hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 100%, 0.44) 0%, hsla(0, 0%, 100%, 0) 50%);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.awning-strip-bottom.awning-strip-bottom-red {
  background-color: #f3000b;
}

.promo-area {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  min-height: 180px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: radial-gradient(circle farthest-corner at 50% 0%, hsla(0, 0%, 100%, 0.11), hsla(0, 0%, 100%, 0) 50%), url('../images/Store-Texture-256.jpg');
  background-position: 0px 0px, 0px 0px;
  background-size: auto, 128px;
  box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.5);
}

.store-content-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: scroll;
  max-height: 100%;
  margin-top: -67px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 8px;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.store-buy-wrapper {
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  grid-auto-columns: 1fr;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

.window-inner-shadows {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: inset 0 2px 2px -1px #f3f3f3, inset 0 0 1px 0 #000, inset 0 -2px 2px -1px rgba(0, 0, 0, 0.5);
}

.promo {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: 15px;
  margin-left: 15px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all 240ms cubic-bezier(.39, .575, .565, 1);
  transition: all 240ms cubic-bezier(.39, .575, .565, 1);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.promo:hover {
  -webkit-transform: perspective(300px) rotateX(-8deg) rotateY(0deg) rotateZ(0deg);
  transform: perspective(300px) rotateX(-8deg) rotateY(0deg) rotateZ(0deg);
}

.store-signboard {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 112px;
  margin-top: 24px;
  border-radius: 4px;
  background-color: #e6e6e6;
  background-image: radial-gradient(circle farthest-corner at 50% 0%, #fff, hsla(0, 0%, 100%, 0) 50%);
  box-shadow: inset 0 2px 2px -1px #f3f3f3, 0 2px 16px -4px #000;
}

.promo-wire {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.punch-hole {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: #343434;
  box-shadow: inset 0 4px 4px -4px #fff, 0 2px 0 0 #fff;
}

.promo-wire-wrapper {
  position: absolute;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 6px;
  padding-right: 12px;
  padding-left: 12px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.wire {
  position: absolute;
  width: 2px;
  height: 64px;
  margin-top: -62px;
  background-color: #343434;
  box-shadow: 0 0 1px 0 hsla(0, 0%, 100%, 0.5);
}

.product {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.product-image {
  display: block;
  width: 180px;
  height: 180px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
}

.product-info-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin-left: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.product-name {
  margin-bottom: 6px;
  padding: 4px 12px 3px;
  border-radius: 100px;
  background-color: rgba(52, 52, 52, 0.75);
  box-shadow: inset 0 0 4px 0 #000, 0 0 2px 0 #fff;
  color: #fff;
  font-weight: 700;
}

.buy-button {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 12px;
  padding: 5px 12px 3px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 100px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), color-stop(90%, #fff));
  background-image: linear-gradient(180deg, #ccc, #fff 90%);
  box-shadow: inset 0 0 2px -1px #fff, 0 0 1px 0 #000, 0 6px 4px -6px rgba(0, 0, 0, 0.5), 0 1px 4px -1px #000;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  color: #000;
  cursor: pointer;
}

.buy-button:hover {
  background-color: #4c90d6;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, hsla(0, 0%, 80%, 0)), to(hsla(0, 0%, 100%, 0.9)));
  background-image: linear-gradient(180deg, hsla(0, 0%, 80%, 0) 10%, hsla(0, 0%, 100%, 0.9));
  opacity: 1;
}

.button-shine {
  position: absolute;
  top: 1px;
  width: 95%;
  height: 50%;
  border-radius: 100px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #fff), to(hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(180deg, #fff 25%, hsla(0, 0%, 100%, 0));
  opacity: 0.94;
}

.buy-button-text {
  position: relative;
}

.product-price {
  margin-bottom: 6px;
  padding: 5px 12px 3px;
  border-radius: 100px;
  background-color: rgba(52, 52, 52, 0.75);
  box-shadow: inset 0 0 4px 0 #000, 0 0 2px 0 #fff;
  color: #fff;
  font-size: 11px;
  line-height: 12px;
  font-weight: 700;
}

.store-buy-products {
  display: -ms-grid;
  display: grid;
  width: 100%;
  grid-auto-columns: 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

.product-select {
  height: 20px;
  margin-bottom: 6px;
  padding: 5px 24px 3px 12px;
  border-radius: 100px;
  background-color: rgba(52, 52, 52, 0.75);
  box-shadow: inset 0 0 4px 0 #000, 0 0 2px 0 #fff;
  color: #fff;
  font-size: 11px;
  line-height: 12px;
  font-weight: 700;
}

.promo-area-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 45px;
  margin-top: 0px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.empty-state {
  display: none;
}

.signboard-overlays {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-image: radial-gradient(circle farthest-corner at 50% 0%, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 100%, 0) 50%);
  box-shadow: inset 0 2px 2px -1px #f3f3f3, 0 2px 16px -4px #000;
}

.signboard-image {
  position: relative;
  height: 100%;
  border-radius: 4px;
}

.store-scrollable-area {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 227px;
  margin-top: 45px;
  padding: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  grid-auto-columns: 1fr;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-image: url('../images/Metal-Window-Texture-128x128.png'), -webkit-gradient(linear, right top, left top, from(#bbb), color-stop(50%, #e6e6e6), to(#bbb));
  background-image: url('../images/Metal-Window-Texture-128x128.png'), linear-gradient(270deg, #bbb, #e6e6e6 50%, #bbb);
  background-position: 50% 0%, 0px 0px;
  background-size: auto, auto;
  background-repeat: repeat, repeat;
  box-shadow: 0 -4px 16px 8px rgba(0, 0, 0, 0.75), inset 0 2px 2px -1px #f3f3f3;
}

.button {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 0px;
  padding: 3px 12px 2px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 100px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), color-stop(90%, #fff));
  background-image: linear-gradient(180deg, #ccc, #fff 90%);
  box-shadow: inset 0 0 2px -1px #fff, 0 0 1px 0 #000, 0 6px 4px -6px rgba(0, 0, 0, 0.5), 0 1px 4px -1px #000;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  color: #000;
  font-size: 11px;
  line-height: 15px;
  cursor: pointer;
}

.button:hover {
  background-color: #4c90d6;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, hsla(0, 0%, 80%, 0)), to(hsla(0, 0%, 100%, 0.9)));
  background-image: linear-gradient(180deg, hsla(0, 0%, 80%, 0) 10%, hsla(0, 0%, 100%, 0.9));
  opacity: 1;
}

.store-footer {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.popover {
  position: absolute;
  bottom: 33px;
  z-index: 4;
  width: 256px;
  padding: 8px 12px 0px;
  border-radius: 8px;
  background-color: rgba(52, 52, 52, 0.75);
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.75), 0 2px 15px -4px #000;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-transition: all 240ms cubic-bezier(.39, .575, .565, 1);
  transition: all 240ms cubic-bezier(.39, .575, .565, 1);
  color: #fff;
  font-weight: 700;
}

.popover.hidden {
  bottom: 0px;
  opacity: 0;
}

.popover.hidden.display-none {
  display: none;
}

.popover-text {
  font-size: 11px;
  line-height: 15px;
  font-weight: 400;
  text-align: center;
}

.popover-empty-state {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 8px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: transparent;
}

.product-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.menubar-wrapper {
  position: absolute;
  top: 0px;
  z-index: 50;
  overflow: hidden;
  width: 100%;
  height: 44px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.menubar {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 22px;
  padding-right: 19px;
  padding-left: 22px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 6px 6px 0px 0px;
  background-image: url('../images/Menubar.jpg');
  background-position: 50% 0%;
  background-size: auto;
  background-repeat: repeat-x;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.5);
}

.menubar-area {
  height: 22px;
  background-color: #000;
}

.menubar-icon {
  cursor: pointer;
}

.menubar-left {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.menubar-title {
  margin-top: 2px;
  margin-left: 20px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  cursor: default;
}

.menubar-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.menubar-day {
  margin-top: 2px;
  margin-right: 5px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  cursor: default;
}

.menubar-time {
  margin-top: 2px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  cursor: default;
}

.player-widget-right {
  position: relative;
  width: 256px;
  height: 169px;
}

.dock {
  position: absolute;
  bottom: 0px;
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 60px;
  padding-right: 12px;
  padding-left: 12px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: hsla(0, 0%, 100%, 0.4);
  box-shadow: inset -1px 0 1px 0 hsla(0, 0%, 100%, 0.4), inset 1px 0 1px 0 hsla(0, 0%, 100%, 0.4), inset 0 1px 1px 0 hsla(0, 0%, 100%, 0.4), -2px 0 1px 0 rgba(0, 0, 0, 0.1), 2px 0 1px 0 rgba(0, 0, 0, 0.1), 0 -2px 1px 0 rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.dock-icon {
  position: static;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: 6px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.dock-icon.first {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 0px;
  margin-right: 7px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.dock-icon.first.game-icon {
  margin-right: 1px;
  margin-left: -3px;
}

.dock-icon.tiktok {
  margin-right: 7px;
  margin-left: -3px;
}

.dock-icon.last {
  margin-right: -2px;
  margin-left: -4px;
}

.dock-icon.discord {
  margin-right: 9px;
  margin-left: -1px;
}

.dock-icon-image {
  width: auto;
  height: auto;
}

.dock-icon-image.twitter-dock-icon-image {
  width: 46px;
}

.dock-icon-image.discord-dock-icon {
  width: 52px;
  margin-left: 0px;
}

.dock-icon-image.youtube-dock-icon {
  position: relative;
  top: -1px;
  width: 47px;
  height: auto;
}

.dock-icon-image.tiktok-dock-icon {
  width: 37px;
  margin-left: 0px;
}

.dock-icon-image.soundcloud-dock-icon {
  width: 50px;
  height: auto;
}

.dock-icon-image.instagram-dock-icon {
  width: 45px;
  height: 45px;
}

.dock-icon-image.store-dock-icon {
  position: relative;
  top: 0px;
  width: 56px;
}

.dock-icon-image.tumblr-dock-icon {
  position: relative;
  width: 43px;
  height: auto;
  margin-left: 3px;
}

.dock-icon-image.game-icon {
  position: relative;
  top: 1px;
  width: 57px;
}

.dock-icon-text {
  position: absolute;
  top: 0px;
  margin-top: -18px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  opacity: 0;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 3px #000, 0 2px 4px #000;
  white-space: pre;
}

.dock-icon-link {
  -webkit-transition: all 120ms ease-in-out;
  transition: all 120ms ease-in-out;
}

.dock-icon-link:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.player-widget-pill {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 256px;
  height: 98px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 64px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #edeeed), to(#8f8f8e));
  background-image: linear-gradient(180deg, #edeeed 15%, #8f8f8e);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 10px 0 rgba(0, 0, 0, 0.25);
}

.player-pill-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.controls-circle {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 75px;
  height: 75px;
  margin-right: 12px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 75px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#edeeed), to(#edeeed));
  background-image: linear-gradient(180deg, #edeeed, #edeeed);
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 0 hsla(0, 0%, 100%, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 2px 2px -2px #000;
}

.player-play-button {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 32px;
  height: 32px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 32px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #f0eff0), to(#d9d9d9));
  background-image: linear-gradient(180deg, #f0eff0 40%, #d9d9d9);
  box-shadow: 0 1px 2px 0 #fff, 0 0 32px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.player-play-button:hover {
  -webkit-filter: brightness(95%);
  filter: brightness(95%);
}

.player-play-button:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0eff0), to(#d9d9d9));
  background-image: linear-gradient(180deg, #f0eff0, #d9d9d9);
}

.info-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 75px;
  height: 75px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 75px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.25)), color-stop(52%, hsla(0, 0%, 100%, 0.25)), color-stop(0, hsla(0, 0%, 100%, 0)), to(hsla(0, 0%, 100%, 0))), radial-gradient(circle farthest-corner at 50% 0%, hsla(0, 0%, 100%, 0.75) 15%, hsla(0, 0%, 100%, 0) 75%), -webkit-gradient(linear, left top, left bottom, from(#bac53f), to(#bac53f));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 100%, 0.25) 52%, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0)), radial-gradient(circle farthest-corner at 50% 0%, hsla(0, 0%, 100%, 0.75) 15%, hsla(0, 0%, 100%, 0) 75%), linear-gradient(180deg, #bac53f, #bac53f);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1), 0 -1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 0 hsla(0, 0%, 100%, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 2px 2px -2px rgba(0, 0, 0, 0.75);
}

.track-info-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 50%;
  padding-bottom: 5px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.track-title {
  margin-bottom: 2px;
  color: #4d503f;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.02px;
}

.track-artist {
  color: #4d503f;
  font-size: 9px;
  line-height: 9px;
  text-align: center;
  letter-spacing: -0.02px;
}

.track-transport-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 50%;
  padding-top: 6px;
  padding-right: 10px;
  padding-left: 10px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.track-timing {
  color: #4d503f;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  letter-spacing: -0.02px;
}

.playlist-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 256px;
  height: 120px;
  margin-top: -49px;
  padding: 6px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 8px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #edeeed), to(#8f8f8e));
  background-image: linear-gradient(180deg, #edeeed 15%, #8f8f8e);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 10px 0 rgba(0, 0, 0, 0.25);
}

.playlist-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: scroll;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 0px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 8px;
  background-color: #d7dac1;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1), 0 -1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 0 hsla(0, 0%, 100%, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 2px 2px -2px rgba(0, 0, 0, 0.75);
}

.playlist-track {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 97%;
  padding: 3px 6px 0px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  opacity: 1;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.playlist-track:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.playlist-track.track-playing {
  background-color: rgba(0, 0, 0, 0.1);
}

.playlist-track-number {
  margin-right: 3px;
  margin-bottom: 0px;
  color: #4d503f;
  font-size: 11px;
  line-height: 11px;
  text-align: left;
  letter-spacing: -0.02px;
}

.playlist-track-title {
  display: inline;
  margin-bottom: 0px;
  color: #4d503f;
  font-size: 11px;
  line-height: 11px;
  text-align: left;
  letter-spacing: -0.02px;
}

.playlist-track-dash {
  display: inline;
  margin-right: 3px;
  margin-bottom: 0px;
  margin-left: 3px;
  color: #4d503f;
  font-size: 11px;
  line-height: 11px;
  text-align: left;
  letter-spacing: -0.02px;
}

.playlist-track-info {
  display: block;
  margin-right: 6px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 0px;
  line-height: 10px;
}

.playlist-track-artist {
  display: inline;
  margin-bottom: 0px;
  color: #4d503f;
  font-size: 11px;
  line-height: 11px;
  text-align: left;
  letter-spacing: -0.02px;
}

.playlist-track-timing {
  margin-bottom: 0px;
  margin-left: 3px;
  color: #4d503f;
  font-size: 11px;
  line-height: 11px;
  text-align: left;
  letter-spacing: -0.02px;
}

.player-widget-artwork {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: scroll;
  width: 169px;
  height: 169px;
  margin-right: 12px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  border-radius: 8px;
  box-shadow: 0 -1px 10px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 2px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.player-widget {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.player-widget-artwork-shadows {
  position: absolute;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 169px;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.player-artwork-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.player-volume-up {
  position: absolute;
  top: 2px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 20px;
  height: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.player-volume-down {
  position: absolute;
  bottom: 2px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 20px;
  height: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.player-next {
  position: absolute;
  right: 2px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 20px;
  height: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.player-prev {
  position: absolute;
  left: 2px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 20px;
  height: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.player-previous-icon {
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.player-play-icon {
  margin-left: 2px;
}

.player-pause-button {
  position: absolute;
  display: none;
  width: 32px;
  height: 32px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 32px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #f0eff0), to(#d9d9d9));
  background-image: linear-gradient(180deg, #f0eff0 40%, #d9d9d9);
  box-shadow: 0 1px 2px 0 #fff, 0 0 32px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.player-pause-button:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0eff0), to(#d9d9d9));
  background-image: linear-gradient(180deg, #f0eff0, #d9d9d9);
}

.track-volume-area {
  position: relative;
  display: none;
  width: 100%;
  height: 50%;
  padding-right: 24px;
  padding-left: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.track-current-volume {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 15px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.12);
}

.track-volume {
  position: relative;
  width: 100%;
}

.track-volume-bar {
  position: relative;
  width: 100%;
  height: 15px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.12);
}

.player-controls-icon.player-play-icon {
  cursor: pointer;
}

.player-seeker-embed {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 10px;
  margin-bottom: 4px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.product-image-wrapper {
  position: relative;
  width: 180px;
  height: 180px;
}

.carousel-buttons-wrapper {
  position: absolute;
  top: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  padding-right: 0px;
  padding-left: 0px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

.carousel-buttons-wrapper:hover {
  opacity: 1;
}

.carousel-actual-button {
  position: relative;
  z-index: 4;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 20px;
  height: 20px;
  padding-left: 0px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 20px;
  background-color: rgba(52, 52, 52, 0.75);
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.75), 0 2px 15px -4px #000;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-transition: all 240ms cubic-bezier(.39, .575, .565, 1);
  transition: all 240ms cubic-bezier(.39, .575, .565, 1);
  color: #fff;
  cursor: pointer;
}

.carousel-arrow {
  width: 8px;
  height: 8px;
}

.carousel-arrow.carousel-arrow-back {
  margin-left: -1px;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.carousel-button {
  position: relative;
  z-index: 4;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  height: 100%;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
}

.carousel-button.carousel-button--next {
  padding-right: 6px;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.carousel-button.carousel-button--previous {
  padding-left: 6px;
}

.playlist-content {
  display: block;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.dock-seperator {
  position: relative;
  width: 1px;
  height: 60px;
  margin-right: 12px;
  margin-left: 6px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: -1px 0 1px 0 hsla(0, 0%, 100%, 0.4), 1px 0 1px 0 hsla(0, 0%, 100%, 0.4);
}

.social-media-icons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.window-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: 8px;
  margin-bottom: 8px;
  margin-left: 8px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 4px;
}

.window-area-inner {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0 0 2px 0 #fff, inset 0 0 2px 1px #5b5b5b;
}

.window-content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  min-height: 100%;
  margin-top: 0px;
  padding-bottom: 12px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 2px;
}

.window-content.window-content-videos {
  background-image: url('../images/Charred-Timber-none-3430x2791mm-Architextures-2.jpg');
  background-position: 50% 0%;
  background-size: 256px;
  box-shadow: inset 0 48px 96px -12px #000;
}

.window-content.window-content-tumblr {
  padding-bottom: 0px;
  background-color: #fff;
}

.window-content.window-content-photos {
  overflow: scroll;
  height: 448px;
  padding: 48px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  background-color: #fff;
}

.video-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 480px;
  height: 270px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: #000;
}

.videos-top-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 96px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.videos-main-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-right: 12px;
  padding-left: 12px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.video-side-area {
  position: relative;
  overflow: scroll;
  width: 287px;
  height: 436px;
  padding-right: 12px;
  padding-left: 12px;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  border-radius: 4px 4px 4px 0px;
  background-color: #8d1d59;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}

.video-left-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: scroll;
  width: 480px;
  height: 436px;
  margin-right: 6px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.video-player-controls {
  height: 30px;
  margin-top: -1px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#cdcdca));
  background-image: linear-gradient(180deg, #f7f7f7, #cdcdca);
}

.video-description-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  height: 131px;
  margin-top: 6px;
  padding: 15px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  border-radius: 4px;
  background-color: #8d1d59;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}

.window-manager-area {
  position: relative;
  z-index: 50;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-top: 22px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.video-logo {
  position: relative;
}

.video-title {
  margin-right: 6px;
  color: #fff;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
}

.video-wrapper {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}

.video-info {
  margin-top: 3px;
  margin-right: 5px;
  color: #fff;
  font-size: 11px;
  line-height: 11px;
  font-weight: 400;
}

.video-description-bold {
  font-weight: 700;
}

.video-description {
  overflow: scroll;
  margin-top: 12px;
  padding-bottom: 12px;
  color: #fff;
  font-size: 11px;
  line-height: 12px;
  font-weight: 400;
}

.video-description-fade {
  position: absolute;
  left: 0px;
  bottom: 12px;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: inset 0 -12px 12px 0 #8d1d59;
}

.video-thumbnail {
  width: 96px;
  height: 54px;
  margin-right: 12px;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 50% 50%;
  background-size: cover;
}

.video-thumbnail-entry {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-right: 12px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 4px;
  background-color: transparent;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}

.video-thumbnail-entry:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.video-thumbnail-entry.video-selected {
  background-color: rgba(0, 0, 0, 0.4);
}

.video-thumbnail-title {
  color: #fff;
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
}

.video-thumbnail-info-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.video-thumbnail-info {
  color: #fff;
  font-size: 11px;
  line-height: 13px;
  font-weight: 400;
}

.video-description-image {
  position: absolute;
  top: 6px;
  right: 12px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.dock-icons {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.video-thumbnails-list {
  display: -ms-grid;
  display: grid;
  padding-top: 12px;
  padding-bottom: 12px;
  grid-auto-columns: 1fr;
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

.video-item {
  position: relative;
}

.video-title-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
}

.video-info-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.video-list {
  position: relative;
}

.video-list-wrapper {
  position: relative;
}

.html-embed {
  position: relative;
  width: 100%;
}

.calendar-widget {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 169px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 8px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c73c34), to(#a21701));
  background-image: linear-gradient(180deg, #c73c34, #a21701);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.5), 0 -1px 10px 0 rgba(0, 0, 0, 0.25), inset 0 3px 2px -2px hsla(0, 0%, 100%, 0.6), inset 0 -2px 2px 0 rgba(0, 0, 0, 0.25), inset 2px 0 2px 0 rgba(0, 0, 0, 0.25), inset -2px 0 2px 0 rgba(0, 0, 0, 0.25);
}

.calendar-top {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 9px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: inset 0 -3px 3px 0 #ac1500;
}

.calendar-month-paper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 80px;
  margin-right: 3px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 8px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(75%, #f2f1f2));
  background-image: linear-gradient(180deg, #fff, #f2f1f2 75%);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25), 0 3px 6px 0 rgba(0, 0, 0, 0.26);
}

.calendar-staple {
  position: absolute;
  width: 30px;
  height: 6px;
  margin-top: 6px;
  border-radius: 6px 6px 8px 8px;
  background-color: #ac1604;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), inset 0 4px 2px -3px hsla(0, 0%, 100%, 0.5);
}

.calendar-month-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  padding-bottom: 9px;
  padding-left: 6px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.calendar-day {
  color: #f30b05;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: -1px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5), 0 0 1px #f30b05;
}

.calendar-month {
  color: #f30b05;
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5), 0 0 1px #f30b05;
}

.calendar-date-paper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 80px;
  height: 80px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  border-radius: 8px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(75%, #f2f1f2));
  background-image: linear-gradient(180deg, #fff, #f2f1f2 75%);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25), 0 3px 6px 0 rgba(0, 0, 0, 0.26);
}

.calendar-date {
  padding-right: 9px;
  padding-left: 0px;
  color: #f30b05;
  font-size: 60px;
  line-height: 40px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -9px;
  text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.5), 0 0 1px #f30b05;
}

.calendar-date-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  padding-bottom: 12px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.calendar-seperator {
  position: absolute;
  height: 2px;
  background-color: #ac1500;
}

.calendar-schedule-wrapper {
  position: relative;
  display: block;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 0px 0px 8px 8px;
}

.schedule-entry {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 30px;
  padding: 9px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  box-shadow: inset 0 3px 3px -3px hsla(0, 0%, 100%, 0.25), inset 0 -2px 0 0 #ac1500;
}

.schedule-month {
  color: #fff;
  font-size: 7px;
  line-height: 7px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5), 0 0 1px #f30b05;
}

.schedule-date {
  margin-bottom: 1px;
  color: #fff;
  font-size: 10px;
  line-height: 10px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5), 0 0 1px #f30b05;
}

.schedule-date-wrapper {
  position: absolute;
  width: 21px;
  margin-right: 9px;
}

.schedule-event-name {
  position: relative;
  margin-left: 30px;
  color: #fff;
  font-size: 10px;
  line-height: 10px;
  font-weight: 700;
  text-align: left;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5), 0 0 1px #f30b05;
}

.schedule-date-link {
  position: absolute;
  left: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.calendar-schedule-list {
  position: relative;
  display: block;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.stylesheets {
  display: none;
}

.sticky-note {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 180px;
  height: 157px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition: all 240ms ease-in-out;
  transition: all 240ms ease-in-out;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.sticky-note:hover {
  -webkit-transform: perspective(240px) rotateX(-6deg) rotateY(0deg) rotateZ(0deg);
  transform: perspective(240px) rotateX(-6deg) rotateY(0deg) rotateZ(0deg);
}

.sticky-note-svg {
  position: absolute;
  top: 0px;
  width: 180px;
}

.sticky-note-text {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 12px;
  padding-right: 15px;
  padding-left: 15px;
  font-family: 'Marker Felt', sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0px;
}

.sticky-notes-list {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  justify-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-auto-columns: 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.dashboard-wrapper {
  position: absolute;
  top: 0px;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  padding-top: 24px;
  padding-left: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.calendar-widget-wrapper {
  margin-right: 50px;
}

.dashboard-first-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 24px;
}

.dashboard-second-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.stick-notes-widget-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.assistant-wrapper {
  position: absolute;
  top: 0px;
  right: 24px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 80px;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  -webkit-transition: all 240ms ease-in-out;
  transition: all 240ms ease-in-out;
}

.assistant-wrapper:hover {
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.image {
  position: absolute;
  bottom: 12px;
  z-index: 1;
  margin-left: -30px;
}

.assistant-bubble {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 240px;
  padding: 9px 12px;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  border-radius: 8px;
  background-color: #f7e8a9;
  box-shadow: 0 0 3px 3px #f7e8a9, inset 0 3px 12px 0 hsla(0, 0%, 100%, 0.75), 0 3px 12px 0 rgba(0, 0, 0, 0.5);
}

.assistant-text {
  width: 191px;
  font-size: 12px;
  line-height: 15px;
}

.tumblr-embed {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

.folders-wrapper {
  position: absolute;
  right: 96px;
  bottom: 96px;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.folder {
  position: relative;
  padding: 12px;
  border-radius: 8px;
  -webkit-transition: all 240ms ease-in-out;
  transition: all 240ms ease-in-out;
  text-align: center;
  cursor: pointer;
}

.folder:hover {
  background-color: rgba(52, 52, 52, 0.5);
}

.folder-name {
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  text-shadow: 0 2px 4px #000;
}

.folder-image {
  margin-bottom: 6px;
}

.photo-list {
  position: relative;
  display: -ms-grid;
  display: grid;
  justify-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-auto-columns: 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

.photo-list-wrapper {
  position: relative;
}

.photo-item {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.photos-folder-photo {
  position: relative;
  display: block;
}

.dock-wrapper {
  position: relative;
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 60px;
  padding-right: 12px;
  padding-left: 12px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.dock-background-mobile {
  position: absolute;
  bottom: 0px;
  z-index: 100;
  display: none;
  height: 60px;
  padding-right: 12px;
  padding-left: 12px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: hsla(0, 0%, 100%, 0.4);
  box-shadow: inset -1px 0 1px 0 hsla(0, 0%, 100%, 0.4), inset 1px 0 1px 0 hsla(0, 0%, 100%, 0.4), inset 0 1px 1px 0 hsla(0, 0%, 100%, 0.4), -2px 0 1px 0 rgba(0, 0, 0, 0.1), 2px 0 1px 0 rgba(0, 0, 0, 0.1), 0 -2px 1px 0 rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.dock-shadow {
  display: none;
}

.game-stage-inner-wrapper {
  position: absolute;
  top: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  border-radius: 8px;
  box-shadow: inset 0 -4px 9px 0 #000;
}

.game-stage-inner {
  position: absolute;
  top: 0px;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 -1px 3px 0 hsla(0, 0%, 100%, 0.72), 0 -2px 1px 0 rgba(0, 0, 0, 0.24), inset 0 1px 3px 0 rgba(0, 0, 0, 0.24), 0 1px 3px 0 #fff, inset 0 0 24px 2px rgba(0, 0, 0, 0.25), inset 0 0 3px 0 #5b5b5b;
}

.game-stage-area {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: auto;
  margin-top: 1px;
  padding-top: 41.1660777385%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 8px;
}

.game-controls-area {
  position: relative;
  z-index: 1;
  width: 100%;
}

.game-controls-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 8px;
  padding-right: 0px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-radius: 0px 0px 8px 8px;
}

.buttons-grid {
  display: -ms-grid;
  display: grid;
  height: 312px;
  padding: 6px;
  grid-auto-columns: 1fr;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto auto auto;
  grid-template-rows: auto auto auto;
  border-radius: 8px;
  background-color: #3d3d3d;
  box-shadow: 0 1px 3px 0 #fff, inset 0 0 3px 0 #000;
}

.button-pad {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 96px;
  height: 96px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 8px;
  background-color: #77777a;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.24)), color-stop(49%, hsla(0, 0%, 100%, 0.12)), color-stop(51%, hsla(0, 0%, 100%, 0))), -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, 0.12)));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.24), hsla(0, 0%, 100%, 0.12) 49%, hsla(0, 0%, 100%, 0) 51%), linear-gradient(180deg, transparent, hsla(0, 0%, 100%, 0.12));
  box-shadow: inset 0 -3px 1px 0 rgba(0, 0, 0, 0.36), inset 0 0 2px 0 hsla(0, 0%, 100%, 0.5), inset 0 5px 1px -3px hsla(0, 0%, 100%, 0.5), 3px 0 3px 0 rgba(0, 0, 0, 0.48);
  cursor: pointer;
}

.button-pad.smaller-button-pad {
  width: 45px;
  background-color: #00525c;
  -webkit-transition: all 300ms cubic-bezier(.19, 1, .22, 1);
  transition: all 300ms cubic-bezier(.19, 1, .22, 1);
}

.button-pad.smaller-button-pad:hover {
  opacity: 0.72;
}

.button-pad.smaller-button {
  overflow: hidden;
  width: 100%;
  height: 24px;
  background-color: #252e3d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.24)), color-stop(49%, hsla(0, 0%, 100%, 0.12)), color-stop(51%, hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.24), hsla(0, 0%, 100%, 0.12) 49%, hsla(0, 0%, 100%, 0) 51%);
  box-shadow: inset 0 3px 3px -3px #fff, 0 3px 3px 0 rgba(0, 0, 0, 0.24);
  -webkit-transition: all 300ms cubic-bezier(.19, 1, .22, 1);
  transition: all 300ms cubic-bezier(.19, 1, .22, 1);
}

.button-pad.smaller-button:hover {
  background-color: #13171f;
}

.button-pad.smaller-button:active {
  background-color: #3f6610;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.24)), color-stop(49%, hsla(0, 0%, 100%, 0.12)), color-stop(51%, hsla(0, 0%, 100%, 0))), radial-gradient(circle farthest-corner at 50% 50%, #67a51a, hsla(0, 0%, 100%, 0));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.24), hsla(0, 0%, 100%, 0.12) 49%, hsla(0, 0%, 100%, 0) 51%), radial-gradient(circle farthest-corner at 50% 50%, #67a51a, hsla(0, 0%, 100%, 0));
  box-shadow: inset 0 3px 3px -3px #fff, 0 0 3px 0 #67a51a, 0 3px 3px 0 rgba(0, 0, 0, 0.24);
}

.button-pad.smaller-button.game-play-button {
  width: 72px;
  height: 24px;
  border-radius: 8px 0px 0px 8px;
  box-shadow: inset 0 0 2px 0 #000, inset 0 3px 3px -3px #fff, 0 3px 3px 0 rgba(0, 0, 0, 0.24);
}

.button-pad.smaller-button.game-stop-button {
  width: 72px;
  height: 24px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  box-shadow: inset 0 0 1px 0 #000, inset 0 3px 3px -3px #fff, 0 3px 3px 0 rgba(0, 0, 0, 0.24);
}

.button-pad.smaller-button.smaller-button-pressed {
  background-color: #3f6610;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.24)), color-stop(49%, hsla(0, 0%, 100%, 0.12)), color-stop(51%, hsla(0, 0%, 100%, 0))), radial-gradient(circle farthest-corner at 50% 50%, #67a51a, transparent);
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.24), hsla(0, 0%, 100%, 0.12) 49%, hsla(0, 0%, 100%, 0) 51%), radial-gradient(circle farthest-corner at 50% 50%, #67a51a, transparent);
  box-shadow: 0 0 3px 0 #67a51a, inset 0 3px 3px -3px #fff, 0 3px 3px 0 rgba(0, 0, 0, 0.24);
}

.button-pad.smaller-button.external-button {
  width: auto;
  padding-right: 3px;
  padding-left: 3px;
  text-decoration: none;
}

.button-pad.kick-pad {
  background-color: #25337a;
  -webkit-transition: all 300ms cubic-bezier(.19, 1, .22, 1);
  transition: all 300ms cubic-bezier(.19, 1, .22, 1);
}

.button-pad.kick-pad:hover {
  opacity: 0.72;
}

.button-pad.snare-pad {
  background-color: #404a80;
  -webkit-transition: all 300ms cubic-bezier(.19, 1, .22, 1);
  transition: all 300ms cubic-bezier(.19, 1, .22, 1);
}

.button-pad.snare-pad:hover {
  opacity: 0.72;
}

.button-pad.guitar-pad {
  background-color: #664033;
  -webkit-transition: all 300ms cubic-bezier(.19, 1, .22, 1);
  transition: all 300ms cubic-bezier(.19, 1, .22, 1);
}

.button-pad.guitar-pad:hover {
  opacity: 0.72;
}

.button-pad.bass-pad {
  background-color: #b33243;
  -webkit-transition: all 300ms cubic-bezier(.19, 1, .22, 1);
  transition: all 300ms cubic-bezier(.19, 1, .22, 1);
}

.button-pad.bass-pad:hover {
  opacity: 0.72;
}

.button-pad.percussion-pad {
  background-color: #7a3f5f;
  -webkit-transition: all 300ms cubic-bezier(.19, 1, .22, 1);
  transition: all 300ms cubic-bezier(.19, 1, .22, 1);
}

.button-pad.percussion-pad:hover {
  opacity: 0.72;
}

.one-shot-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.side-controls-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 8px;
  padding-top: 6px;
  padding-bottom: 6px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  opacity: 1;
}

.game-transport-buttons {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-top: 6px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  grid-auto-columns: 1fr;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.pad-progress-area {
  position: absolute;
  bottom: 0px;
  display: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  opacity: 1;
}

.pad-progress-bar {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  border-radius: 8px;
  background-image: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(72%, #fff), to(hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(90deg, #fff, #fff 72%, hsla(0, 0%, 100%, 0));
  opacity: 0.15;
  -webkit-transform: scale3d(1.4, 1, 1);
  transform: scale3d(1.4, 1, 1);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.game-beat-repeat-buttons {
  display: -ms-grid;
  display: grid;
  width: 100%;
  margin-top: 6px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  grid-auto-columns: 1fr;
  grid-column-gap: 6px;
  grid-row-gap: 3px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.game-effects-buttons {
  display: -ms-grid;
  display: grid;
  width: 100%;
  margin-top: 6px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  grid-auto-columns: 1fr;
  grid-column-gap: 6px;
  grid-row-gap: 3px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.pad-label {
  position: relative;
  margin-left: 3px;
  font-family: 'Bulky Pixels', sans-serif;
  color: #fff;
  font-size: 12px;
  line-height: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.05em;
  text-shadow: 0 0 6px hsla(0, 0%, 100%, 0.24), 0 -2px 0 #000;
}

.pad-label.small-pad-label {
  font-size: 9px;
  line-height: 9px;
}

.pad-label.control-pad-label {
  z-index: 2;
  font-size: 9px;
  line-height: 9px;
}

.pad-label.control-pad-label {
  text-decoration: none;
}

.pad-label.help-label-text {
  z-index: 2;
  font-size: 10px;
  line-height: 12px;
}

.buttons-wrapper {
  position: relative;
}

.prent-o-matic-stylesheet {
  display: block;
}

.pad-info-area {
  position: relative;
  z-index: 9;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  padding-bottom: 12px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.pad-info-area.small-pad {
  padding-bottom: 15px;
}

.pad-icon {
  position: absolute;
  z-index: 3;
  width: 100%;
}

.pad-icon.pad-icon-shadow {
  z-index: 2;
  margin-top: -1.5px;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.pad-icon.pad-icon-glow {
  z-index: 1;
  margin-top: -1.5px;
  opacity: 0.24;
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

.pad-icon-area {
  position: absolute;
  top: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.pad-icon-area.snare-icon {
  width: 44px;
  padding-top: 15px;
}

.pad-icon-area.kick-icon {
  width: 37px;
}

.pad-icon-area.guitar-icon {
  width: 45px;
  padding-top: 12px;
}

.pad-icon-area.bass-icon {
  width: 48px;
  padding-top: 12px;
}

.pad-icon-area.sticks-icon {
  width: 26px;
  padding-top: 15px;
}

.pad-icon-area.shaker-icon {
  width: 40px;
  padding-top: 15px;
}

.pad-icon-area.ride-icon {
  width: 30px;
  padding-top: 36px;
}

.pad-icon-area.trill-icon {
  width: 30px;
  padding-top: 24px;
}

.pad-icon-area.clap-icon {
  width: 30px;
  padding-top: 27px;
}

.pad-icon-area.hihat-icon {
  width: 30px;
  padding-top: 30px;
}

.button-impact {
  position: absolute;
  top: 0px;
  z-index: 1;
  width: 100%;
  height: 200%;
  border-radius: 96px;
  background-image: radial-gradient(circle closest-side at 50% 50%, #67a51a, rgba(103, 165, 26, 0));
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: opacity 150ms cubic-bezier(.175, .885, .32, 1.275), -webkit-transform 150ms cubic-bezier(.175, .885, .32, 1.275);
  transition: opacity 150ms cubic-bezier(.175, .885, .32, 1.275), -webkit-transform 150ms cubic-bezier(.175, .885, .32, 1.275);
  transition: opacity 150ms cubic-bezier(.175, .885, .32, 1.275), transform 150ms cubic-bezier(.175, .885, .32, 1.275);
  transition: opacity 150ms cubic-bezier(.175, .885, .32, 1.275), transform 150ms cubic-bezier(.175, .885, .32, 1.275), -webkit-transform 150ms cubic-bezier(.175, .885, .32, 1.275);
}

.pad-progress-playhead {
  position: absolute;
  left: -12px;
  width: 24px;
  height: 100%;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  background-image: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), color-stop(48%, #fff), color-stop(52%, #fff), to(hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 48%, #fff 52%, hsla(0, 0%, 100%, 0));
  opacity: 0.24;
  -webkit-transform: translate(0%, 0px);
  -ms-transform: translate(0%, 0px);
  transform: translate(0%, 0px);
}

.button-particles {
  position: absolute;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0.24;
}

.buttons-area-inner {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 -1px 3px 0 hsla(0, 0%, 100%, 0.72), 0 -1px 1px 0 rgba(0, 0, 0, 0.24), inset 0 1px 3px 0 rgba(0, 0, 0, 0.24), inset 0 0 24px 0 rgba(0, 0, 0, 0.25), inset 0 0 3px 0 #5b5b5b;
}

.mpc-screen {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 96px;
  padding-right: 0px;
  padding-bottom: 6px;
  padding-left: 0px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-auto-columns: 1fr;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto auto auto;
  grid-template-rows: auto auto auto;
  border-radius: 8px;
  background-color: #3d3d3d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.24)), color-stop(49%, hsla(0, 0%, 100%, 0.12)), color-stop(51%, hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.24), hsla(0, 0%, 100%, 0.12) 49%, hsla(0, 0%, 100%, 0) 51%);
  box-shadow: 0 1px 3px 0 #fff, inset 0 0 6px 0 rgba(0, 0, 0, 0.72);
}

.mpc-logo {
  position: relative;
  z-index: 2;
  height: 48px;
}

.mpc-logo.mpc-logo-glow {
  position: absolute;
  z-index: 1;
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

.screen-text {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  margin-left: 3px;
  font-family: 'Bulky Pixels', sans-serif;
  color: #fff;
  font-size: 6px;
  line-height: 6px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.075em;
  text-shadow: 0 0 6px hsla(0, 0%, 100%, 0.48), 0 -2px 0 #000;
}

.screen-title {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  margin-left: 3px;
  font-family: 'Bulky Pixels', sans-serif;
  color: #fff;
  font-size: 9px;
  line-height: 9px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.075em;
  text-shadow: 0 0 6px hsla(0, 0%, 100%, 0.48), 0 -2px 0 #000;
}

.mpc-logo-wrapper {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.game-play-icon-wrapper {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 1;
}

.game-play-icon {
  position: relative;
  z-index: 2;
  height: 12px;
}

.game-play-icon-shadow {
  position: absolute;
  z-index: 1;
  height: 12px;
  margin-top: -2px;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.game-pause-icon-wrapper {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
}

.game-pause-icon {
  position: relative;
  z-index: 2;
  height: 12px;
}

.game-pause-icon-shadow {
  position: absolute;
  z-index: 1;
  height: 12px;
  margin-top: -2px;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.game-stop-icon {
  position: relative;
  z-index: 2;
  width: 12px;
  height: 12px;
  background-color: #fff;
  box-shadow: 0 -2px 0 0 #000;
}

.game-effects-area {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.game-label {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: 'Bulky Pixels', sans-serif;
  color: #fff;
  font-size: 6px;
  line-height: 6px;
  text-align: center;
  text-shadow: 0 0 1px hsla(0, 0%, 100%, 0.24), 0 -2px 0 #000;
}

.game-label-wrapper {
  position: relative;
  height: 12px;
  padding-top: 4px;
  padding-right: 3px;
  padding-left: 6px;
  border-radius: 8px;
  background-color: #252e3d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.24)), color-stop(49%, hsla(0, 0%, 100%, 0.12)), color-stop(51%, hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.24), hsla(0, 0%, 100%, 0.12) 49%, hsla(0, 0%, 100%, 0) 51%);
  box-shadow: inset 0 3px 3px -3px #fff, 0 3px 3px 0 rgba(0, 0, 0, 0.24);
  -webkit-transition: all 120ms ease-out;
  transition: all 120ms ease-out;
}

.sticker-2 {
  position: absolute;
  right: -2px;
  bottom: -78px;
  z-index: 0;
  width: 36%;
  opacity: 1;
}

.sticker-1 {
  position: absolute;
  left: 0px;
  top: 6px;
  width: 120px;
  -webkit-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}

.stickers {
  position: relative;
  width: 100%;
  margin-top: 6px;
}

.game-screen-link {
  position: absolute;
  top: 0px;
  z-index: 11;
  width: 100%;
  height: 100%;
}

.screen-glow {
  position: absolute;
  top: 0px;
  z-index: 9;
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: inset 0 0 24px 0 #fff;
  opacity: 0;
}

.bedroom-background {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.guitar-stem-wrapper {
  position: absolute;
  left: 0.5300353357%;
  bottom: 7%;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 18.5512367491%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  cursor: pointer;
}

.drum-stem-image {
  position: relative;
}

.drum-stem-wrapper {
  position: absolute;
  left: 15.371024735%;
  bottom: 8%;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 28.3568904594%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  cursor: pointer;
}

.guitar-stem-image {
  position: relative;
}

.vocal-stem-wrapper {
  position: absolute;
  left: 44.4346289753%;
  bottom: 6%;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 14.48763251%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  cursor: pointer;
}

.vocal-stem-image {
  position: relative;
}

.snare-stem-image {
  position: relative;
}

.snare-stem-wrapper {
  position: absolute;
  left: 61.3074204947%;
  bottom: 21%;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 19.0812720848%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
}

.bass-stem-wrapper {
  position: absolute;
  left: 81.0954063604%;
  bottom: 8%;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 18.3745583039%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  cursor: pointer;
}

.bass-stem-image {
  position: relative;
}

.stem-label-wrapper {
  position: absolute;
  height: 15px;
  margin-top: -25%;
  padding-top: 4px;
  padding-right: 3px;
  padding-left: 3px;
  border-radius: 8px;
  background-color: #252e3d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.24)), color-stop(49%, hsla(0, 0%, 100%, 0.12)), color-stop(51%, hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.24), hsla(0, 0%, 100%, 0.12) 49%, hsla(0, 0%, 100%, 0) 51%);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.36);
  opacity: 0;
  -webkit-transition: all 120ms ease-out;
  transition: all 120ms ease-out;
}

.help-overlay {
  position: absolute;
  z-index: 3;
  display: none;
  width: 100%;
  height: 100%;
  padding-right: 9px;
  padding-left: 9px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.47);
  opacity: 1;
  cursor: pointer;
}

.help-label {
  position: absolute;
  height: 15px;
  padding-top: 4px;
  padding-right: 3px;
  padding-left: 3px;
  border-radius: 8px;
  background-color: #252e3d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.24)), color-stop(49%, hsla(0, 0%, 100%, 0.12)), color-stop(51%, hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.24), hsla(0, 0%, 100%, 0.12) 49%, hsla(0, 0%, 100%, 0) 51%);
  box-shadow: 1px 1px 12px 0 hsla(0, 0%, 100%, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36);
  opacity: 1;
  -webkit-transition: all 120ms ease-out;
  transition: all 120ms ease-out;
}

.help-label.help-label-kick {
  margin-top: 5px;
  margin-left: 122px;
}

.help-label.help-label-vocals {
  margin-top: 2px;
  margin-left: 237px;
}

.help-label.snare {
  margin-left: 252px;
}

.help-label.help-label-snare {
  margin-top: 32px;
  margin-left: 351px;
}

.help-label.help-label-bass {
  margin-left: 463px;
}

.help-label.large-help-label {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  padding: 6px 6px 4px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 0 0 24px 12px hsla(0, 0%, 100%, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36);
}

.help-label.large-help-label.game-stage-help-label {
  margin-top: 212px;
  box-shadow: 0 0 24px 6px hsla(0, 0%, 100%, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36);
}

.help-label.large-help-label.stage-help-label {
  bottom: 12px;
  width: 293px;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.24)), color-stop(49%, hsla(0, 0%, 100%, 0.12)), color-stop(51%, hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.24), hsla(0, 0%, 100%, 0.12) 49%, hsla(0, 0%, 100%, 0) 51%);
  box-shadow: 0 0 24px 6px hsla(0, 0%, 100%, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36);
}

.help-label.large-help-label.transport-help-label {
  position: absolute;
  width: 140.5625px;
  margin-top: 154px;
  margin-left: -1px;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  box-shadow: 0 0 24px 6px hsla(0, 0%, 100%, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36);
}

.help-label.large-help-label.pad-help-label {
  position: absolute;
  width: 235px;
  margin-top: 148px;
  margin-left: 97px;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  box-shadow: 0 0 24px 6px hsla(0, 0%, 100%, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36);
}

.help-label.large-help-label.effects-help-label {
  position: absolute;
  bottom: 14px;
  width: 146px;
  margin-left: 260px;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  border-bottom-right-radius: 0px;
  box-shadow: 0 0 24px 6px hsla(0, 0%, 100%, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36);
}

.help-track-labels {
  position: absolute;
  left: 0px;
  width: 100%;
  margin-top: 26px;
  padding-left: 27px;
}

.div-block {
  position: absolute;
  width: 0px;
  height: 0px;
  margin-top: -102px;
  border-right: 5px solid transparent;
  border-bottom: 20px solid #535a63;
  border-left: 5px solid transparent;
  background-color: #535a63;
}

.up-arrow {
  position: absolute;
  top: -11px;
  width: 0px;
  height: 0px;
  border-right: 9px solid transparent;
  border-bottom: 12px solid #59606b;
  border-left: 9px solid transparent;
}

.up-arrow.effects-arrow-up {
  display: none;
}

.right-arrow {
  position: absolute;
  left: 146px;
  top: auto;
  bottom: 0px;
  width: 0px;
  height: 10px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 12px solid #252e3d;
}

.stage-area-help-wrapper {
  position: relative;
  width: 100%;
  margin-top: 25px;
  padding-top: 41.1660777385%;
}

.stage-area-help {
  position: absolute;
  top: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.game-controls-help-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.external-buttons {
  position: absolute;
  bottom: -36px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 24px;
  padding-right: 6px;
  padding-left: 6px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media screen and (max-width: 991px) {
  .window {
    width: 100%;
    height: 100%;
    margin-bottom: 60px;
  }

  .window.videos-window {
    position: relative;
    width: auto;
    height: auto;
  }

  .window.store-window {
    position: relative;
  }

  .window.tumblr-window {
    position: relative;
    height: 100vh;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
  }

  .window.photos-window {
    position: relative;
    height: auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
  }

  .window.game-window {
    position: relative;
    top: auto;
    height: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
  }

  .body {
    height: auto;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    background-color: #000;
  }

  .computer {
    width: 100%;
    height: auto;
    min-height: 100vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    border-radius: 0px;
  }

  .traffic-lights.traffic-lights-hovered {
    display: none;
  }

  .screen {
    overflow: visible;
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-width: auto;
    padding-top: 46px;
    padding-right: 48px;
    padding-left: 48px;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    border-radius: 0px;
    background-size: cover;
  }

  .crt-overlay {
    top: 0px;
  }

  .monitor {
    display: none;
  }

  .awning-strip-bottom {
    width: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .product-image {
    width: 100%;
    height: auto;
  }

  .product-info-wrapper {
    width: 50%;
    margin-left: 24px;
  }

  .store-scrollable-area {
    min-height: 0px;
  }

  .product-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .menubar-wrapper {
    position: fixed;
    z-index: 999999;
  }

  .dock {
    position: fixed;
    bottom: 0px;
    background-color: hsla(0, 0%, 100%, 0.6);
  }

  .product-image-wrapper {
    width: 50%;
    height: auto;
  }

  .carousel-buttons-wrapper {
    width: 100%;
  }

  .window-area {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .window-content.window-content-tumblr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .window-content.window-content-photos {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .videos-main-area {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .video-side-area {
    z-index: 0;
    width: 100%;
    height: auto;
    justify-items: start;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }

  .video-left-wrapper {
    height: auto;
    margin-right: 0px;
    margin-bottom: 6px;
  }

  .video-description-wrapper {
    height: auto;
  }

  .window-manager-area {
    margin-top: 0px;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .video-description {
    overflow: visible;
    padding-bottom: 0px;
  }

  .video-description-fade {
    display: none;
  }

  .video-thumbnail-entry {
    width: 222px;
  }

  .video-thumbnails-list {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-wrapper {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0px;
    margin-bottom: 60px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
  }

  .dashboard-second-row {
    width: 437px;
  }

  .assistant-wrapper {
    position: relative;
    margin-top: 60px;
    margin-bottom: 24px;
    margin-left: 48px;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }

  .tumblr-embed {
    position: absolute;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .folders-wrapper {
    position: relative;
    right: auto;
    bottom: auto;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
  }

  .dock-wrapper {
    position: fixed;
    bottom: 0px;
  }

  .dock-background-mobile {
    position: fixed;
    bottom: 0px;
    background-color: hsla(0, 0%, 100%, 0.6);
  }
}

@media screen and (max-width: 767px) {
  .window.tumblr-window {
    width: 100%;
  }

  .window.photos-window {
    width: 100%;
  }

  .window.game-window {
    width: 432px;
  }

  .screen {
    padding-right: 24px;
    padding-bottom: 0px;
    padding-left: 24px;
  }

  .promo-area {
    min-height: auto;
  }

  .promo {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .store-signboard {
    height: auto;
  }

  .product-info-wrapper {
    margin-left: 48px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .store-buy-products {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .signboard-overlays {
    height: auto;
  }

  .signboard-image {
    width: 100%;
  }

  .button {
    padding-top: 5px;
    padding-bottom: 3px;
    font-size: 13px;
  }

  .store-footer {
    margin-top: 48px;
  }

  .dock {
    position: relative;
    z-index: 101;
    overflow: scroll;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .dock-icon-link {
    overflow: hidden;
  }

  .playlist-track {
    width: 100%;
  }

  .window-content.window-content-photos {
    padding: 24px;
  }

  .video-area {
    width: 100%;
    height: auto;
  }

  .video-left-wrapper {
    width: 100%;
  }

  .video-thumbnail-entry {
    width: auto;
  }

  .video-thumbnail-title {
    font-size: 11px;
    line-height: 12px;
  }

  .video-thumbnail-info {
    font-size: 10px;
    line-height: 12px;
  }

  .dock-wrapper {
    width: 100%;
    height: auto;
    padding-right: 0px;
    padding-left: 0px;
    background-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .dock-background-mobile {
    position: fixed;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }

  .dock-shadow {
    position: fixed;
    z-index: 102;
    display: none;
    width: 100%;
    height: 60px;
    padding-right: 0px;
    padding-bottom: 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), color-stop(12%, transparent));
    background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.5), transparent 12%);
  }

  .game-controls-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .button-pad.smaller-button {
    width: auto;
    height: 36px;
    padding-right: 3px;
    padding-left: 3px;
  }

  .button-pad.smaller-button.game-play-button {
    width: 50%;
    height: 48px;
  }

  .button-pad.smaller-button.game-stop-button {
    width: 50%;
    height: 48px;
  }

  .button-pad.smaller-button.external-button {
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .side-controls-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-bottom: 8px;
    padding-top: 0px;
    padding-bottom: 0px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
    grid-auto-columns: 1fr;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }

  .game-transport-buttons {
    margin-top: 0px;
    margin-left: 8px;
  }

  .game-beat-repeat-buttons {
    position: relative;
    width: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    grid-column-gap: 8px;
  }

  .game-effects-buttons {
    position: relative;
    display: -ms-grid;
    display: grid;
    width: auto;
    margin-left: 8px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    grid-auto-columns: 1fr;
    grid-column-gap: 8px;
    grid-row-gap: 3px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }

  .mpc-screen {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    height: 48px;
    padding-right: 12px;
    padding-bottom: 0px;
    padding-left: 12px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .mpc-logo {
    height: 36px;
  }

  .screen-text {
    margin-left: 2px;
    text-align: left;
  }

  .mpc-logo-wrapper {
    width: auto;
    margin-top: -1px;
    margin-right: 6px;
    padding-left: 0px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .game-effects-area {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 3px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .game-controls-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .game-label-wrapper {
    position: absolute;
    top: 0px;
    z-index: 11;
  }

  .stickers {
    display: none;
  }

  .game-screen-link {
    left: 0px;
  }

  .screen-text-wrapper {
    position: relative;
    margin-top: -3px;
    text-align: left;
  }

  .screen-glow {
    left: 0px;
  }

  .stem-label-wrapper {
    position: absolute;
    top: 0px;
    z-index: 11;
    display: none;
  }

  .help-overlay {
    display: none;
    opacity: 1;
  }

  .help-label {
    position: absolute;
    top: 0px;
    z-index: 11;
    display: block;
  }

  .help-label.help-label-kick {
    margin-top: 6px;
    margin-left: 87px;
  }

  .help-label.help-label-vocals {
    margin-top: 3px;
    margin-left: 171px;
  }

  .help-label.help-label-snare {
    margin-top: 26px;
    margin-left: 256px;
  }

  .help-label.help-label-bass {
    margin-left: 343px;
  }

  .help-label.large-help-label.stage-help-label {
    top: auto;
    margin-top: 0px;
  }

  .help-label.large-help-label.transport-help-label {
    width: 257px;
    margin-top: 0px;
    margin-left: 12px;
  }

  .help-label.large-help-label.pad-help-label {
    top: auto;
    bottom: auto;
    margin-top: 249px;
    margin-left: 0px;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
  }

  .help-label.large-help-label.effects-help-label {
    bottom: auto;
    width: 250px;
    margin-top: 105px;
    margin-left: 12px;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    border-bottom-right-radius: 8px;
  }

  .help-track-labels {
    margin-top: 15px;
    padding-left: 15px;
  }

  .up-arrow {
    display: block;
  }

  .up-arrow.transport-arrow {
    display: none;
  }

  .up-arrow.effects-arrow-up {
    display: block;
  }

  .right-arrow {
    display: none;
  }

  .game-controls-help-wrapper {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .external-buttons {
    bottom: -32px;
  }
}

@media screen and (max-width: 479px) {
  .window.videos-window {
    width: 100%;
  }

  .window.game-window {
    width: 100%;
  }

  .screen {
    padding-top: 34px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .crt-overlay {
    box-shadow: none;
  }

  .promo-area {
    display: -ms-grid;
    display: grid;
    padding-right: 12px;
    padding-bottom: 24px;
    padding-left: 12px;
    grid-auto-columns: 1fr;
    grid-column-gap: 12px;
    grid-row-gap: 0px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
  }

  .promo {
    z-index: 1;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .promo.large-promo {
    z-index: 0;
    overflow: hidden;
    margin-top: -6px;
  }

  .promo.large-promo:hover {
    -webkit-transform: rotate(2deg) perspective(300px);
    transform: rotate(2deg) perspective(300px);
  }

  .store-signboard {
    width: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .wire {
    height: 100px;
    margin-top: -94px;
  }

  .product {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .product-image {
    width: 100%;
  }

  .product-info-wrapper {
    width: 100%;
    margin-left: 0px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .product-name {
    font-size: 15px;
    line-height: 18px;
  }

  .buy-button {
    font-size: 15px;
    line-height: 18px;
  }

  .product-price {
    font-size: 13px;
    line-height: 15px;
  }

  .product-select {
    font-size: 13px;
    line-height: 15px;
  }

  .signboard-overlays {
    width: 100%;
  }

  .signboard-image {
    width: 100%;
    height: 112px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .product-info {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .player-widget-right {
    height: auto;
    margin-top: 12px;
  }

  .dock {
    height: 48px;
  }

  .dock-icon {
    margin-right: 5px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .dock-icon-image.twitter-dock-icon-image {
    width: 39px;
  }

  .dock-icon-image.discord-dock-icon {
    width: 46px;
  }

  .dock-icon-image.youtube-dock-icon {
    width: 39px;
  }

  .dock-icon-image.tiktok-dock-icon {
    width: 30px;
  }

  .dock-icon-image.instagram-dock-icon {
    width: 38px;
    height: 38px;
  }

  .dock-icon-image.store-dock-icon {
    width: 45px;
  }

  .dock-icon-image.tumblr-dock-icon {
    width: 37px;
    margin-left: 1px;
  }

  .dock-icon-image.game-icon {
    width: 45px;
  }

  .playlist-wrapper {
    height: auto;
  }

  .player-widget-artwork {
    width: 256px;
    height: 256px;
    margin-right: 0px;
  }

  .player-widget {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .player-widget-artwork-shadows {
    width: 256px;
  }

  .player-artwork-image {
    width: 100%;
    height: 100%;
  }

  .product-image-wrapper {
    width: 100%;
    height: auto;
  }

  .carousel-button.carousel-button--previous {
    width: 50%;
    height: 100%;
  }

  .dock-seperator {
    height: 48px;
    margin-right: 11px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .social-media-icons {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .window-content.window-content-photos {
    padding: 12px;
  }

  .videos-main-area {
    position: relative;
  }

  .video-side-area {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .video-left-wrapper {
    position: relative;
  }

  .video-title.video-title-artist {
    display: none;
  }

  .video-info {
    display: inline;
  }

  .video-description {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .video-description-image {
    display: none;
  }

  .video-thumbnails-list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .video-item {
    position: relative;
  }

  .video-info-wrapper {
    display: block;
  }

  .video-list {
    position: relative;
  }

  .video-list-wrapper {
    position: relative;
  }

  .dashboard-wrapper {
    padding-left: 0px;
  }

  .calendar-widget-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-right: 0px;
    margin-bottom: 24px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .dashboard-second-row {
    width: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .folders-wrapper {
    margin-bottom: 60px;
  }

  .photo-list {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .dock-wrapper {
    z-index: 999999;
  }

  .dock-background-mobile {
    height: 48px;
  }

  .dock-shadow {
    z-index: 101;
    display: block;
    height: 48px;
    padding-right: 0px;
    padding-bottom: 0px;
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.75)), color-stop(12%, transparent));
    background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.75), transparent 12%);
  }

  .buttons-grid {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto auto auto;
    grid-template-rows: auto auto auto;
  }

  .button-pad {
    width: auto;
    height: auto;
  }

  .button-pad.smaller-button-pad {
    width: auto;
    height: 100%;
  }

  .button-pad.smaller-button {
    height: 24px;
  }

  .button-pad.smaller-button.external-button {
    padding-right: 6px;
    padding-left: 6px;
  }

  .one-shot-wrapper {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    grid-column-gap: 6px;
    grid-row-gap: 0px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }

  .side-controls-wrapper {
    display: block;
    margin-left: 0px;
  }

  .game-transport-buttons {
    width: auto;
    margin-left: 8px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .game-beat-repeat-buttons {
    margin-top: 9px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .game-effects-buttons {
    margin-top: 3px;
    margin-left: 0px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .pad-label {
    font-size: 9px;
    line-height: 9px;
  }

  .pad-label.small-pad-label {
    position: absolute;
    display: none;
  }

  .pad-label.control-pad-label {
    position: relative;
    display: block;
  }

  .pad-label.help-label-text {
    position: relative;
    display: block;
    font-size: 9px;
    line-height: 10px;
  }

  .buttons-wrapper {
    position: relative;
    width: 100%;
    padding-top: 75.36231884057972%;
  }

  .pad-info-area {
    position: absolute;
    height: auto;
    padding-bottom: 0px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .pad-icon-area.snare-icon {
    position: relative;
    width: 36px;
    height: 32px;
    margin-bottom: 9px;
    padding-top: 0px;
  }

  .pad-icon-area.kick-icon {
    position: relative;
    top: -1px;
    width: 30px;
    height: 35px;
    margin-bottom: 6px;
    padding-top: 0px;
  }

  .pad-icon-area.guitar-icon {
    position: relative;
    top: -1px;
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
    padding-top: 0px;
  }

  .pad-icon-area.bass-icon {
    position: relative;
    top: -1px;
    width: 40px;
    height: 38px;
    margin-bottom: 6px;
    padding-top: 0px;
  }

  .pad-icon-area.sticks-icon {
    position: relative;
    top: 3px;
    width: 18px;
    height: 30px;
    margin-bottom: 12px;
    padding-top: 0px;
  }

  .pad-icon-area.shaker-icon {
    position: relative;
    top: 3px;
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    padding-top: 0px;
  }

  .pad-icon-area.ride-icon {
    position: relative;
    top: 4px;
    width: 24px;
    padding-top: 0px;
  }

  .pad-icon-area.trill-icon {
    position: relative;
    top: -4px;
    width: 24px;
    padding-top: 0px;
  }

  .pad-icon-area.clap-icon {
    position: relative;
    top: -2px;
    width: 24px;
    padding-top: 0px;
  }

  .pad-icon-area.hihat-icon {
    position: relative;
    width: 24px;
    padding-top: 0px;
  }

  .mpc-screen {
    padding-right: 6px;
    padding-left: 6px;
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto auto auto;
    grid-template-rows: auto auto auto;
  }

  .screen-title {
    font-size: 9px;
    line-height: 9px;
  }

  .mpc-logo-wrapper {
    margin-right: 0px;
  }

  .game-effects-area {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .help-label {
    position: relative;
    padding-left: 5px;
  }

  .help-label.help-label-kick {
    margin-top: 0px;
    margin-left: 0px;
  }

  .help-label.help-label-vocals {
    margin-top: 0px;
    margin-left: 0px;
  }

  .help-label.help-label-snare {
    margin-top: 0px;
    margin-left: 0px;
  }

  .help-label.help-label-bass {
    margin-left: 0px;
  }

  .help-label.large-help-label {
    margin-top: 120px;
  }

  .help-label.large-help-label.stage-help-label {
    position: absolute;
    bottom: 6px;
    width: 270px;
    margin-top: 33vw;
  }

  .help-label.large-help-label.transport-help-label {
    width: 236px;
  }

  .help-label.large-help-label.pad-help-label {
    width: 233px;
    margin-top: 230px;
  }

  .help-label.large-help-label.effects-help-label {
    width: 233px;
    margin-top: 134px;
  }

  .help-track-labels {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 12px;
    padding-right: 12px;
    padding-left: 12px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_77facf66-634d-e360-b342-8bbdc4c4430f-ffeb6b67 {
    -webkit-box-ordinal-group: 10000;
    -webkit-order: 9999;
    -ms-flex-order: 9999;
    order: 9999;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
    -ms-grid-row: span 1;
    grid-row-start: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
  }

  #w-node-b71f734a-2f76-fc7b-e1ca-e3bf987010a9-e9544036 {
    -webkit-box-ordinal-group: 10000;
    -webkit-order: 9999;
    -ms-flex-order: 9999;
    order: 9999;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
    -ms-grid-row: span 1;
    grid-row-start: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
  }
}

@font-face {
  font-family: 'Lucida Grande';
  src: url('../fonts/Lucida-Grande-Bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lucida Grande';
  src: url('../fonts/Lucida-Grande-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Marker Felt';
  src: url('../fonts/MarkerFelt-Wide.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bulky Pixels';
  src: url('../fonts/BulkyPixels.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}