/*
 * Breakpoint any
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/*
 * Breakpoint all
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/**
 * _Breakpoint
 * @param {List} ids - List of breakpoints
 * @param {String} glue - Glue to join together multiple breakpoints
 * @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
 * @content - Styles will be applied to breakpoint
 */
@media only screen and (max-width: 640px) {
  #viewport {
    background: url(../static/homepage/mobile-bg.jpg) no-repeat center top;
    background-size: 100% auto; } }

@media only screen and (max-width: 640px) {
  #nav {
    display: none; } }

main {
  /**
	 * Available
	 */
  /**
	 * Content
	 */
  /**
	 * Promo
	 */
  /**
	 * Menu
	 */ }
  main ul, main li {
    margin: 0;
    padding: 0;
    list-style: none; }
  main canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block; }
  @media only screen and (max-width: 640px) {
    main canvas {
      display: none; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    main .available {
      pointer-events: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      opacity: 0;
      -webkit-transition: opacity 300ms ease-out;
      transition: opacity 300ms ease-out; }
      .visible main .available {
        opacity: 1; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    main .content {
      max-width: 1104px;
      padding: 0.9375em 40px 0.9375em 40px;
      width: 100%;
      margin: 0 auto;
      font-size: 32px;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    main .promos {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 13.65625em; }
      main .promos .promo {
        width: 11.1875em;
        height: 7em;
        display: block;
        pointer-events: auto; }
        main .promos .promo:nth-child(1) {
          -ms-flex-item-align: end;
              align-self: flex-end; }
        main .promos .promo:nth-child(2) {
          margin-top: 0.1875em; } }
  @media only screen and (max-width: 640px) {
    main .promos {
      display: none; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    main .menu {
      display: none; } }
  @media only screen and (max-width: 640px) {
    main .menu {
      padding: 0 20px; }
      main .menu ul {
        padding-bottom: 10px; }
      main .menu li {
        margin: 3.125vw 0; }
        main .menu li:last-child {
          margin-bottom: 6.25vw; } }