@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes slide-in-top {
  0% {
    transform: translateY(-150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-bottom {
  0% {
    transform: translateY(150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@font-face {
  font-family: 'eurostile';
  font-weight: normal;
  font-style: normal;
  src: url("/static/fonts/eurostile/eurostile.eot");
  src: url("/static/fonts/eurostile/eurostile.eot?#iefix") format("embedded-opentype"), url("/static/fonts/eurostile/eurostile.woff2") format("woff2"), url("/static/fonts/eurostile/eurostile.woff") format("woff"), url("/static/fonts/eurostile/eurostile.ttf") format("truetype"), url("/static/fonts/eurostile/eurostile.svg#eurostile_extdmedium") format("svg"); }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes slide-in-top {
  0% {
    transform: translateY(-150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-bottom {
  0% {
    transform: translateY(150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.Header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; }
  .Header .topbar {
    position: relative;
    z-index: 1;
    display: flex;
    margin-top: 0px;
    animation: 1s 0.1s 1 slide-in-top both;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-delay: 0.25s; }
    .Header .topbar .fill {
      background-image: url("/static/images/components/Header/topbar-fill.png");
      background-size: 100% 100%;
      height: 48px;
      width: 100%; }
    .Header .topbar .edge-left {
      position: relative;
      left: 0;
      height: 48px;
      margin-left: 2px; }
    .Header .topbar .edge-right {
      position: relative;
      right: 0;
      height: 48px;
      margin-right: 2px;
      transform: scaleX(-1); }
  .Header .logo {
    position: absolute;
    top: -2px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    animation: 1s 0.1s 1 slide-in-top both;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-delay: 0.75s; }
    .Header .logo .sprite {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -200px;
      width: 400px; }
      .Header .logo .sprite .glow {
        position: absolute;
        box-shadow: #0a97ff 0px 9px 26px;
        bottom: 36%;
        left: 0;
        margin-top: 0px;
        margin-left: 0px;
        width: 100%;
        height: 100%; }
      .Header .logo .sprite .image {
        position: relative;
        width: 100%; }
    .Header .logo .warp {
      right: 50%;
      margin-right: 33px;
      position: absolute;
      top: 13px;
      font-size: 21px;
      text-transform: uppercase;
      font-weight: bold;
      color: #cae5ff; }
    .Header .logo .prism {
      left: 50%;
      margin-left: 25px;
      position: absolute;
      top: 13px;
      font-size: 21px;
      text-transform: uppercase;
      font-weight: bold;
      color: #cae5ff; }
    .Header .logo .icon {
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      top: -6px;
      height: 66px; }
    .Header .logo .tagline {
      position: absolute;
      top: 50px;
      width: 100%;
      text-align: center;
      font-size: 8px;
      color: #88c6ff;
      text-transform: uppercase;
      font-weight: bold; }
  .Header .infobar {
    position: relative;
    top: -6px;
    height: 76px;
    background-image: url("/static/images/components/Header/infobar-background.png");
    background-size: 100% 100%;
    margin: 0 2px;
    animation: 1s 0.1s 1 fade-in both;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-delay: 1.25s; }

.wrapper {
  display: flex;
  position: fixed;
  top: 62px;
  left: 3px;
  right: 3px;
  bottom: 6px; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes slide-in-top {
  0% {
    transform: translateY(-150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-bottom {
  0% {
    transform: translateY(150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.Panel {
  position: relative;
  height: 100%; }
  .Panel .background {
    pointer-events: none; }
  .Panel .frame {
    pointer-events: none; }

.SidePanel {
  width: 25%;
  max-width: 320px;
  min-width: 280px; }
  .SidePanel .hose {
    position: absolute;
    top: 1.055px;
    left: -26.5px;
    width: 98px;
    height: 18.2px; }
  .SidePanel .frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .SidePanel.left {
    left: 0;
    right: auto; }
    .SidePanel.left .content, .SidePanel.left .glow {
      left: 9.1px;
      right: 15.4px; }
    .SidePanel.left .frame {
      transform: scaleX(-1); }
  .SidePanel.MainPanel .top-right {
    transform: scaleX(-1); }
  .SidePanel.MainPanel .right-stretch {
    transform: scaleX(-1); }
  .SidePanel.MainPanel .bottom-right {
    transform: scaleX(-1); }
  .SidePanel .content {
    background-color: black;
    position: absolute;
    top: 25.95px;
    left: 14.4px;
    right: 8.1px;
    bottom: 10.2px; }
  .SidePanel .glow {
    box-shadow: #0093ff 0 0 50px;
    position: absolute;
    top: 25.95px;
    left: 14.4px;
    right: 8.1px;
    bottom: 10.2px; }
  .SidePanel .top-left {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 67.55px;
    height: 114.1px; }
  .SidePanel .top-stretch {
    position: absolute;
    top: 18.2px;
    left: 67.55px;
    width: calc(100% - 67.55px - 10.15px - 0px - 0px);
    height: 8.75px; }
  .SidePanel .top-right {
    position: absolute;
    top: 18.55px;
    right: 0px;
    width: 10.15px;
    height: 196.35px; }
  .SidePanel .left-stretch {
    position: absolute;
    top: 114.1px;
    left: 10.15px;
    width: 5.25px;
    height: calc(100% - 114.1px - 219.8px - 0px); }
  .SidePanel .right-stretch {
    position: absolute;
    top: 214.9px;
    right: 3.85px;
    width: 5.25px;
    height: calc(100% - 196.35px - 16.1px - 18.55px); }
  .SidePanel .bottom-left {
    position: absolute;
    bottom: 0px;
    left: 10.15px;
    width: 81.2px;
    height: 219.8px; }
  .SidePanel .bottom-stretch {
    position: absolute;
    bottom: 0px;
    left: 87.5px;
    width: calc(100% - 81.2px - 94.5px - 10.15px);
    height: 11.2px; }
  .SidePanel .bottom-right {
    position: absolute;
    bottom: 0px;
    right: 4.2px;
    width: 94.5px;
    height: 16.1px; }

.MainPanel {
  width: 50%;
  margin-top: -9px;
  padding-bottom: 11px;
  z-index: 1;
  flex-grow: 1; }
  .MainPanel .frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .MainPanel.left {
    left: 0;
    right: auto; }
    .MainPanel.left .content, .MainPanel.left .glow {
      left: 15.6px;
      right: 15.6px; }
    .MainPanel.left .frame {
      transform: scaleX(-1); }
  .MainPanel.MainPanel .top-right {
    transform: scaleX(-1); }
  .MainPanel.MainPanel .right-stretch {
    transform: scaleX(-1); }
  .MainPanel.MainPanel .bottom-right {
    transform: scaleX(-1); }
  .MainPanel .content {
    background-color: black;
    position: absolute;
    top: 36.44px;
    left: 14.6px;
    right: 14.6px;
    bottom: 10.96px; }
  .MainPanel .glow {
    box-shadow: #0093ff 0 0 50px;
    position: absolute;
    top: 36.44px;
    left: 14.6px;
    right: 14.6px;
    bottom: 10.96px; }
  .MainPanel .top-left {
    position: absolute;
    top: 24.96px;
    left: 0px;
    width: 265.72px;
    height: 144.56px; }
  .MainPanel .top-stretch {
    position: absolute;
    top: 24.96px;
    left: 265.2px;
    width: calc(100% - 265.72px - 265.72px - 0px - 0px);
    height: 12.48px; }
  .MainPanel .top-right {
    position: absolute;
    top: 24.96px;
    right: 0px;
    width: 265.72px;
    height: 144.56px; }
  .MainPanel .left-stretch {
    position: absolute;
    top: 169px;
    left: 0px;
    width: 15.6px;
    height: calc(100% - 144.56px - 120.64px - 24.96px); }
  .MainPanel .right-stretch {
    position: absolute;
    top: 169px;
    right: 0px;
    width: 15.6px;
    height: calc(100% - 144.56px - 120.64px - 24.96px); }
  .MainPanel .bottom-left {
    position: absolute;
    bottom: 2.6px;
    left: 0px;
    width: 144.04px;
    height: 120.64px; }
  .MainPanel .bottom-stretch {
    position: absolute;
    bottom: 2.6px;
    left: 144.04px;
    width: calc(100% - 144.04px - 144.04px - 0px);
    height: 9.36px; }
  .MainPanel .bottom-right {
    position: absolute;
    bottom: 2.6px;
    right: 0px;
    width: 144.04px;
    height: 120.64px; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes slide-in-top {
  0% {
    transform: translateY(-150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-bottom {
  0% {
    transform: translateY(150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.MainPanel {
  animation: 0.6s 0.1s 1 slide-in-bottom both;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 0.3s; }
  .MainPanel .content {
    background: linear-gradient(to bottom, #000924 30%, #01030A 100%); }
    .MainPanel .content .background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("/static/images/components/SidePanel/optimized/content-background.gif");
      background-repeat: no-repeat;
      background-size: 120%;
      opacity: 0.7; }
    .MainPanel .content .header {
      position: relative;
      color: #c1feff;
      font-size: 21px;
      text-transform: uppercase;
      font-weight: bold; }
    .MainPanel .content .player {
      position: relative;
      height: 100%; }
      .MainPanel .content .player iframe {
        width: 100%;
        height: 100%; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes slide-in-top {
  0% {
    transform: translateY(-150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-bottom {
  0% {
    transform: translateY(150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.SidePanel.left {
  animation: 1s 0.1s 1 slide-in-right both;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 0.75s; }

.SidePanel.right {
  animation: 1s 0.1s 1 slide-in-left both;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 0.75s; }

.SidePanel .content {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #000924 0%, #01030A 100%); }
  .SidePanel .content .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-image: url("/static/images/components/SidePanel/optimized/content-background.gif");
    background-repeat: no-repeat;
    background-position: 50% 30px;
    background-size: 100% 46px; }

.SidePanel .menu {
  position: relative;
  display: flex;
  padding: 2px 2px 2px 0;
  height: 50px; }
  .SidePanel .menu .button {
    display: flex;
    flex-grow: 1;
    position: relative;
    cursor: pointer;
    height: 40px; }
    .SidePanel .menu .button .base {
      display: flex;
      width: 100%; }
    .SidePanel .menu .button .hover {
      display: none;
      position: absolute;
      top: 0;
      left: 0; }
    .SidePanel .menu .button:hover .hover {
      display: flex;
      width: 100%; }
    .SidePanel .menu .button:hover .caption, .SidePanel .menu .button.active .caption {
      color: white;
      text-shadow: white 0px 0px 10px; }
    .SidePanel .menu .button .active {
      display: none;
      position: absolute;
      top: 0;
      left: 0; }
    .SidePanel .menu .button:active .active, .SidePanel .menu .button.active .active {
      display: flex;
      width: 100%; }
    .SidePanel .menu .button .item {
      height: 40px; }
    .SidePanel .menu .button .head {
      margin-left: 3px; }
    .SidePanel .menu .button .stretch {
      flex-grow: 1; }
    .SidePanel .menu .button .caption {
      position: absolute;
      bottom: 12px;
      left: 12px;
      color: #c1feff;
      font-size: 9px;
      font-weight: bold; }
    .SidePanel .menu .button .target {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      z-index: 1; }
    .SidePanel .menu .button.start .target {
      right: 12px; }
    .SidePanel .menu .button.center .caption {
      left: -1px; }
    .SidePanel .menu .button.center .bridge-start {
      position: absolute;
      top: 0;
      left: -22px; }
    .SidePanel .menu .button.center .bridge-end {
      position: absolute;
      top: 0;
      right: -22px; }
    .SidePanel .menu .button.center .gap {
      width: 11px; }
    .SidePanel .menu .button.center .target {
      left: -12px;
      right: -12px; }
    .SidePanel .menu .button.end .caption {
      left: 21px; }
    .SidePanel .menu .button.end .target {
      left: 12px; }

.SidePanel.left .menu {
  transform: scaleX(-1); }
  .SidePanel.left .menu .caption {
    transform: scaleX(-1);
    left: auto;
    right: 21px; }
  .SidePanel.left .menu .button.center .caption {
    right: 0; }
  .SidePanel.left .menu .button.end .caption {
    right: 11px; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes slide-in-top {
  0% {
    transform: translateY(-150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-bottom {
  0% {
    transform: translateY(150%); }
  100% {
    transform: translateY(0); } }

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(150%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.RedditFrame {
  position: relative;
  height: 100%;
  overflow: hidden; }
  .RedditFrame .tabs {
    display: flex;
    justify-content: center;
    padding-bottom: 9px;
    flex-shrink: 0;
    box-shadow: #000924 0px 0px 30px;
    z-index: 1;
    position: relative;
    margin: 0 14px; }
    .RedditFrame .tabs .tab {
      color: #88c6ff;
      font-size: 9px;
      font-weight: bold;
      cursor: pointer;
      display: inline-block;
      padding: 10px 22px;
      flex-grow: 1;
      text-align: center;
      border-radius: 3px;
      margin: 0 2px;
      text-transform: uppercase; }
      .RedditFrame .tabs .tab:hover {
        color: #cae5ff;
        background-color: rgba(65, 168, 255, 0.18);
        text-shadow: rgba(202, 229, 255, 0.5) 0px 0px 5px; }
      .RedditFrame .tabs .tab.selected {
        color: #c1feff;
        background-color: rgba(0, 0, 0, 0.4);
        text-shadow: rgba(202, 229, 255, 0.5) 0px 0px 5px; }
      .RedditFrame .tabs .tab:first-child {
        margin-left: 0; }
      .RedditFrame .tabs .tab:last-child {
        margin-right: 0; }
  .RedditFrame .stories {
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 39px;
    left: 0;
    bottom: 0;
    right: -16px;
    padding-bottom: 10px; }
  .RedditFrame .story {
    display: flex;
    cursor: pointer;
    padding: 7px 27px 7px 14px; }
    .RedditFrame .story:hover {
      background-color: rgba(65, 168, 255, 0.09); }
    .RedditFrame .story:first-child {
      position: relative;
      padding-top: 5px;
      z-index: 2; }
    .RedditFrame .story .thumbnail {
      width: 40px;
      min-width: 40px;
      height: 31px;
      border: 1px solid #41a8ff;
      background-position: 0% 50%;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: 2px;
      margin-right: 7px;
      border-radius: 1px; }
    .RedditFrame .story .description {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      min-height: 37px; }
    .RedditFrame .story .title {
      color: #cae5ff;
      font-size: 10px;
      max-height: 24px;
      overflow: hidden; }
    .RedditFrame .story .domain {
      margin-top: 2px;
      color: #41a8ff;
      font-size: 9px; }

.Button {
  background-color: red; }

::selection {
  background-color: rgba(0, 0, 0, 0.5); }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'eurostile', 'Verdana', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, h5, h6 {
  margin: 0; }

a {
  color: inherit;
  text-decoration: inherit; }

hr {
  width: 100%;
  border: 1px dashed rgba(255, 255, 255, 0.2); }

#root {
  height: 100%;
  background: #0b0d1a;
  background: linear-gradient(to bottom, #0b0d1a 0%, #0a1126 9%, #0a183c 19%, #0a2b70 39%, #0a3d8e 53%, #185aac 56%, #2d7ec9 59%, #3a95da 62%, #43a2e4 64%, #47a9ea 66%, #47a8ea 66%, #44a4ea 66%, #398fdf 67%, #2465c2 67%, #2160bd 67%, #1950a9 70%, #0f3a84 73%, #082963 77%, #082357 80%, #081e49 84%, #0c1c3d 100%); }