/* Custom css goes here */
:root {
  --bgLight: #FDA526;
  --bgDark: #A00612;
  --bgGutter: #FFF;
  --gutterSize: 8px;
}

html, body {
  background-color: var(--bgLight);
}

.gutter {
  background-color: var(--bgGutter);
  padding: var(--gutterSize);
  width: 100%;
  height: 100%;
}

.cell {
  background-color: var(--bgDark);
  color: #fff;
  width: 100%;
  height: 100%;
}

.content {
  max-width: 1680px;
  max-height: 1044px;
  width: 100%;
  height: 100%;
}

.content-ratio {
  padding-bottom: 62.1429%;
}

.grid-1-top {
  flex: 764;
}

.grid-1-bottom {
  flex: 264;
}

.grid-2-left {
  flex: 316;
}

.grid-2-right {
  flex: 1348;
}

.grid-3-top {
  flex: 264;
}

.grid-3-bottom {
  flex: 500;
}

.grid-3t-left {
  flex: 516;
}

.grid-3t-right {
  flex: 832;
}

.grid-3b-left {
  flex: 1032;
}

.grid-3b-right {
  flex: 316;
}

#play-cell {
  background-image: url("/assets/welcome/play-bg-2da0040f664e8186a9b860254d187e9e148fa6c98983d9f189bb1072b2a9aab0.png");
  background-size: 100%;
}

.play-filler {
  flex: 235;
}

.play-button {
  flex: 160;
}

.play-row-logo {
  flex: 204;
}

.play-row-buttons {
  flex: 120;
}

.play-row-primary {
  flex: 160;
}

.play-ratio {
  padding-bottom: 6.95%;
}

.corner-wrapper {
  xwidth: 11.25%;
  width: 189px;
  overflow: hidden;
}

.corner--active {
  left: 50%;
  top: 50%;
  transition: left 0.35s ease-out, top 0.35s ease-out;
}

.corner--inactive {
  left: 0%;
  top: 0%;
  transition: left 0.35s ease-out, top 0.35s ease-out;
}

.corner:hover .corner--active {
  left: 0%;
  top: 0%;
}

.corner:hover .corner--inactive {
  left: 100%;
  top: 100%;
}

/* mobile layout styles */
.mobile-block {
  border: 5px solid #fff;
}

.mobile-block img { display: block; }

.mobile-bg-red {
  background-color: #A00612;
}

.mobile-bg-yellow {
  background-color: #FDA526;
}

.mobile-bg-green {
  background-color: #1BA639;
}