*, *::before, *::after {
  box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img {
  max-height: 100%;
}

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: black;
  font-family: 'VT323', monospace;
}

.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.wmobile {
  max-width: 100%;
  margin: 0 auto;
}

.view-reel .hover {
  display: none;
}

.view-reel:hover .no-hover {
  display: none;
  
}

.view-reel:hover .hover {
  display: block;
  margin-top: 25px;
}


/* ----- background ----- */

.background-top {

  background: linear-gradient(to bottom, #000817 0%, #001B4B 100% );
}


.star-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
background: linear-gradient(
  to bottom,

  rgba(0, 27, 75, 0) 75%,
  rgba(66, 154, 233, 1) 100%
);
z-index: 3;
}

.background-middle {
  background: #429AE9 ;
  background-size: 100% auto;
}

.background-bottom {
  background: #429AE9 
}

.city {
  background: url('./img/background/city.png') repeat-x bottom center;
  height: 400px;
  position: relative;
  z-index: 4;
}

/* hamburger */

.hamburger {
  height: 100%;
  width: 8%;
}

.line {
  background: #fff
}

 /* ------ red beam ------ */

.red-beam {
  flex-direction: column;
  max-width: 100%;
}

.red-beam .top, .red-beam .middle, .red-beam .bottom {
  display: flex;
  align-items: stretch;
  width: 100%;
  
}



.red-beam .top .left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/red-beam/lu_corner.png') no-repeat center center;
  background-size: cover;
}

.red-beam .top .right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/red-beam/ru_corner.png') no-repeat center center;
  background-size: cover;
}

.red-beam .top .center {
  width: 100%;
  height: 27px;
  background: url('./img/red-beam/u_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.red-beam .bottom .left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/red-beam/ld_corner.png') no-repeat center center;
  background-size: cover;
}

.red-beam .bottom .right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/red-beam/rd_corner.png') no-repeat center center;
  background-size: cover;
}

.red-beam .bottom .center {
  width: 100%;
  height: 27px;
  background: url('./img/red-beam/b_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.red-beam .middle .left {
  width: 27px;
  height: auto;
  background: url('./img/red-beam/l_border.png') repeat-y center center;
  background-size: 100% auto;
}

.red-beam .middle .center {
  width: 100%;
  height: 100%;
  background: #BB232E;
  padding: 0.75rem 1.25rem;
  white-space: nowrap;  
}

.red-beam .middle .right {
  width: 27px;
  height: auto;
  background: url('./img/red-beam/r_border.png') repeat-y center center;
  background-size: 100% auto;
}


/* x1 */
.red-beam.x1 .top .left-corner, .red-beam.x1 .top .right-corner, .red-beam.x1 .bottom .left-corner, .red-beam.x1 .bottom .right-corner {
  width: 3px;
  height: 3px;
}

.red-beam.x1 .middle .left, .red-beam.x1 .middle .right {
  width: 3px;
}

.red-beam.x1 .bottom .center, .red-beam.x1 .top .center {
  height: 3px;
}

/* x2 */
.red-beam.x2 .top .left-corner, .red-beam.x2 .top .right-corner, .red-beam.x2 .bottom .left-corner, .red-beam.x2 .bottom .right-corner {
  width: 9px;
  height: 9px;
}

.red-beam.x2 .middle .left, .red-beam.x2 .middle .right {
  width: 9px;
}

.red-beam.x2 .bottom .center, .red-beam.x2 .top .center {
  height: 9px;
}

/* x3 */
.red-beam.x3 .top .left-corner, .red-beam.x3 .top .right-corner, .red-beam.x3 .bottom .left-corner, .red-beam.x3 .bottom .right-corner {
  width: 15px;
  height: 15px;
}

.red-beam.x3 .middle .left, .red-beam.x3 .middle .right {
  width: 15px;
}

.red-beam.x3 .bottom .center, .red-beam.x3 .top .center {
  height: 15px;
}



/* ------ blue beam ------ */

.blue-beam {
  flex-direction: column;
  max-width: 100%;
}

.blue-beam .top, .blue-beam .middle, .blue-beam .bottom {
  display: flex;
  align-items: stretch;
  width: 100%;
  
}



.blue-beam .top .left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/blue-beam/lu_corner.png') no-repeat center center;
  background-size: cover;
}

.blue-beam .top .right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/blue-beam/ru_corner.png') no-repeat center center;
  background-size: cover;
}

.blue-beam .top .center {
  width: 100%;
  height: 27px;
  background: url('./img/blue-beam/t_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.blue-beam .bottom .left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/blue-beam/ld_corner.png') no-repeat center center;
  background-size: cover;
}

.blue-beam .bottom .right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/blue-beam/rd_corner.png') no-repeat center center;
  background-size: cover;
}

.blue-beam .bottom .center {
  width: 100%;
  height: 27px;
  background: url('./img/blue-beam/d_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.blue-beam .middle .left {
  width: 27px;
  height: auto;
  background: url('./img/blue-beam/l_border.png') repeat-y center center;
  background-size: 100% auto;
}

.blue-beam .middle .center {
  width: 100%;
  height: 100%;
  background: #000427;
  padding: 0.75rem 1.25rem;
  
}

.blue-beam .middle .right {
  width: 27px;
  height: auto;
  background: url('./img/blue-beam/r_border.png') repeat-y center center;
  background-size: 100% auto;
}


/* x1 */
.blue-beam.x1 .top .left-corner, .blue-beam.x1 .top .right-corner, .blue-beam.x1 .bottom .left-corner, .blue-beam.x1 .bottom .right-corner {
  width: 3px;
  height: 3px;
}

.blue-beam.x1 .middle .left, .blue-beam.x1 .middle .right {
  width: 3px;
}

.blue-beam.x1 .bottom .center, .blue-beam.x1 .top .center {
  height: 3px;
}

/* x2 */
.blue-beam.x2 .top .left-corner, .blue-beam.x2 .top .right-corner, .blue-beam.x2 .bottom .left-corner, .blue-beam.x2 .bottom .right-corner {
  width: 9px;
  height: 9px;
}

.blue-beam.x2 .middle .left, .blue-beam.x2 .middle .right {
  width: 9px;
}

.blue-beam.x2 .bottom .center, .blue-beam.x2 .top .center {
  height: 9px;
}

/* x3 */
.blue-beam.x3 .top .left-corner, .blue-beam.x3 .top .right-corner, .blue-beam.x3 .bottom .left-corner, .blue-beam.x3 .bottom .right-corner {
  width: 15px;
  height: 15px;
}

.blue-beam.x3 .middle .left, .blue-beam.x3 .middle .right {
  width: 15px;
}

.blue-beam.x3 .bottom .center, .blue-beam.x3 .top .center {
  height: 15px;
}


/* ------ yellow beam ------ */

.yellow-beam {
  flex-direction: column;
  max-width: 100%;
}

.yellow-beam .top, .yellow-beam .middle, .yellow-beam .bottom {
  display: flex;
  align-items: stretch;
  width: 100%;
  
}



.yellow-beam .top .left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/yellow-beam/lu_corner.png') no-repeat center center;
  background-size: cover;
}

.yellow-beam .top .right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/yellow-beam/ru_corner.png') no-repeat center center;
  background-size: cover;
}

.yellow-beam .top .center {
  width: 100%;
  height: 27px;
  background: url('./img/yellow-beam/u_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.yellow-beam .bottom .left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/yellow-beam/ld_corner.png') no-repeat center center;
  background-size: cover;
}

.yellow-beam .bottom .right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/yellow-beam/rd_corner.png') no-repeat center center;
  background-size: cover;
}

.yellow-beam .bottom .center {
  width: 100%;
  height: 27px;
  background: url('./img/yellow-beam/d_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.yellow-beam .middle .left {
  width: 27px;
  height: auto;
  background: url('./img/yellow-beam/l_border.png') repeat-y center center;
  background-size: 100% auto;
}

.yellow-beam .middle .center {
  width: 100%;
  height: 100%;
  background: #000427;
  
}

.yellow-beam .middle .right {
  width: 27px;
  height: auto;
  background: url('./img/yellow-beam/r_border.png') repeat-y center center;
  background-size: 100% auto;
}


/* x1 */
.yellow-beam.x1 .top .left-corner, .yellow-beam.x1 .top .right-corner, .yellow-beam.x1 .bottom .left-corner, .yellow-beam.x1 .bottom .right-corner {
  width: 3px;
  height: 3px;
}

.yellow-beam.x1 .middle .left, .yellow-beam.x1 .middle .right {
  width: 3px;
}

.yellow-beam.x1 .bottom .center, .yellow-beam.x1 .top .center {
  height: 3px;
}

/* x2 */
.yellow-beam.x2 .top .left-corner, .yellow-beam.x2 .top .right-corner, .yellow-beam.x2 .bottom .left-corner, .yellow-beam.x2 .bottom .right-corner {
  width: 9px;
  height: 9px;
}

.yellow-beam.x2 .middle .left, .yellow-beam.x2 .middle .right {
  width: 9px;
}

.yellow-beam.x2 .bottom .center, .yellow-beam.x2 .top .center {
  height: 9px;
}

/* x3 */
.yellow-beam.x3 .top .left-corner, .yellow-beam.x3 .top .right-corner, .yellow-beam.x3 .bottom .left-corner, .yellow-beam.x3 .bottom .right-corner {
  width: 15px;
  height: 15px;
}

.yellow-beam.x3 .middle .left, .yellow-beam.x3 .middle .right {
  width: 15px;
}

.yellow-beam.x3 .bottom .center, .yellow-beam.x3 .top .center {
  height: 15px;
}


 /* ------ black beam ------ */

.black-beam {
  flex-direction: column;
  max-width: 100%;
}

.black-beam>.top, .black-beam>.middle, .black-beam>.bottom {
  display: flex;
  align-items: stretch;
  width: 100%;
  
}

.black-beam>.top>.left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/black-beam/lu_corner.png') no-repeat center center;
  background-size: cover;
}

.black-beam>.top>.right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/black-beam/ru_corner.png') no-repeat center center;
  background-size: cover;
}

.black-beam>.top>.center {
  width: 100%;
  height: 27px;
  background: url('./img/black-beam/u_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.black-beam>.bottom>.left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/black-beam/ld_corner.png') no-repeat center center;
  background-size: cover;
}

.black-beam>.bottom>.right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/black-beam/rd_corner.png') no-repeat center center;
  background-size: cover;
}

.black-beam>.bottom>.center {
  width: 100%;
  height: 27px;
  background: url('./img/black-beam/d_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.black-beam>.middle>.left {
  width: 27px;
  height: auto;
  background: url('./img/black-beam/l_border.png') repeat-y center center;
  background-size: 100% auto;
}

.black-beam>.middle>.center {
  width: 100%;
  height: 100%;
  background: #0F0F0D;
  padding: 0.25rem 0.25rem 0 0 ;
  white-space: nowrap;  
}

.black-beam>.middle>.right {
  width: 27px;
  height: auto;
  background: url('./img/black-beam/r_border.png') repeat-y center center;
  background-size: 100% auto;
}


/* x1 */
.black-beam.x1>.top>.left-corner, .black-beam.x1>.top>.right-corner, .black-beam.x1>.bottom>.left-corner, .black-beam.x1>.bottom>.right-corner {
  width: 3px;
  height: 3px;
}

.black-beam.x1>.middle>.left, .black-beam.x1>.middle>.right {
  width: 3px;
}

.black-beam.x1>.bottom>.center, .black-beam.x1>.top>.center {
  height: 3px;
}

/* x2 */
.black-beam.x2>.top>.left-corner, .black-beam.x2>.top>.right-corner, .black-beam.x2>.bottom>.left-corner, .black-beam.x2>.bottom>.right-corner {
  width: 9px;
  height: 9px;
}

.black-beam.x2>.middle>.left, .black-beam.x2>.middle>.right {
  width: 9px;
}

.black-beam.x2>.bottom>.center, .black-beam.x2>.top>.center {
  height: 9px;
}

/* x3 */
.black-beam.x3>.top>.left-corner, .black-beam.x3>.top>.right-corner, .black-beam.x3>.bottom>.left-corner, .black-beam.x3>.bottom>.right-corner {
  width: 15px;
  height: 15px;
}

.black-beam.x3>.middle>.left, .black-beam.x3>.middle>.right {
  width: 15px;
}

.black-beam.x3>.bottom>.center, .black-beam.x3>.top>.center {
  height: 15px;
}

/* ------ orange beam ------ */

.orange-beam {
  flex-direction: column;
  max-width: 100%;
}

.orange-beam .top, .orange-beam .middle, .orange-beam .bottom {
  display: flex;
  align-items: stretch;
  width: 100%;
  
}

.orange-beam .top .left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/orange-beam/lu_corner.png') no-repeat center center;
  background-size: cover;
}

.orange-beam .top .right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/orange-beam/ru_corner.png') no-repeat center center;
  background-size: cover;
}

.orange-beam .top .center {
  width: 100%;
  height: 27px;
  background: url('./img/orange-beam/u_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.orange-beam .bottom .left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/orange-beam/ld_corner.png') no-repeat center center;
  background-size: cover;
}

.orange-beam .bottom .right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/orange-beam/rd_corner.png') no-repeat center center;
  background-size: cover;
}

.orange-beam .bottom .center {
  width: 100%;
  height: 27px;
  background: url('./img/orange-beam/d_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.orange-beam .middle .left {
  width: 27px;
  height: auto;
  background: url('./img/orange-beam/l_border.png') repeat-y center center;
  background-size: 100% auto;
}

.orange-beam .middle .center {
  width: 100%;
  height: 100%;
  background: #D6614C;
  padding: 0.5rem;
  white-space: nowrap;  
}

.orange-beam .middle .right {
  width: 27px;
  height: auto;
  background: url('./img/orange-beam/r_border.png') repeat-y center center;
  background-size: 100% auto;
}

/* hover */

.orange-beam:hover .top .left-corner {
  background-image: url('./img/orange-beam/lu_corner_hover.png');
}

.orange-beam:hover .top .right-corner {
  background-image: url('./img/orange-beam/ru_corner_hover.png');
}

.orange-beam:hover .top .center {
  background-image: url('./img/orange-beam/u_border_hover.png');
}

.orange-beam:hover .bottom .left-corner {
  background-image: url('./img/orange-beam/ld_corner_hover.png');
}

.orange-beam:hover .bottom .right-corner {
  background-image: url('./img/orange-beam/rd_corner_hover.png');
}

.orange-beam:hover .bottom .center {
  background-image: url('./img/orange-beam/d_border_hover.png');
}

.orange-beam:hover .middle .left {
  background-image: url('./img/orange-beam/l_border_hover.png');
}

.orange-beam:hover .middle .right {
  background-image: url('./img/orange-beam/r_border_hover.png');
}

.orange-beam:hover .middle .center {
  background: #FFFA57;
  color: #000;  
}

/* x1 */
.orange-beam.x1 .top .left-corner, .orange-beam.x1 .top .right-corner, .orange-beam.x1 .bottom .left-corner, .orange-beam.x1 .bottom .right-corner {
  width: 3px;
  height: 3px;
}

.orange-beam.x1 .middle .left, .orange-beam.x1 .middle .right {
  width: 3px;
}

.orange-beam.x1 .bottom .center, .orange-beam.x1 .top .center {
  height: 3px;
}

/* x2 */
.orange-beam.x2 .top .left-corner, .orange-beam.x2 .top .right-corner, .orange-beam.x2 .bottom .left-corner, .orange-beam.x2 .bottom .right-corner {
  width: 9px;
  height: 9px;
}

.orange-beam.x2 .middle .left, .orange-beam.x2 .middle .right {
  width: 9px;
}

.orange-beam.x2 .bottom .center, .orange-beam.x2 .top .center {
  height: 9px;
}

/* x3 */
.orange-beam.x3 .top .left-corner, .orange-beam.x3 .top .right-corner, .orange-beam.x3 .bottom .left-corner, .orange-beam.x3 .bottom .right-corner {
  width: 15px;
  height: 15px;
}

.orange-beam.x3 .middle .left, .orange-beam.x3 .middle .right {
  width: 15px;
}

.orange-beam.x3 .bottom .center, .orange-beam.x3 .top .center {
  height: 15px;
}


/* ------ switch bg ------ */

.switch-beam {
  flex-direction: column;
  max-width: 100%;
}

.switch-beam .top, .switch-beam .middle, .switch-beam .bottom {
  display: flex;
  align-items: stretch;
  width: 100%;
  
}

.switch-beam .top .left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/switch/lu_corner.png') no-repeat center center;
  background-size: cover;
}

.switch-beam .top .right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/switch/ru_corner.png') no-repeat center center;
  background-size: cover;
}

.switch-beam .top .center {
  width: 100%;
  height: 27px;
  background: url('./img/switch/u_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.switch-beam .bottom .left-corner {
  width: 27px;
  height: 27px;
  background: url('./img/switch/ld_corner.png') no-repeat center center;
  background-size: cover;
}

.switch-beam .bottom .right-corner {
  width: 27px;
  height: 27px;
  background: url('./img/switch/rd_corner.png') no-repeat center center;
  background-size: cover;
}

.switch-beam .bottom .center {
  width: 100%;
  height: 27px;
  background: url('./img/switch/d_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.switch-beam .middle .left {
  width: 27px;
  height: auto;
  background: url('./img/switch/l_border.png') repeat-y center center;
  background-size: 100% auto;
}

.switch-beam .middle .center {
  width: 100%;
  height: 100%;
  background: #B2B2B2;
  padding: 0.5rem 1.25rem;
  white-space: nowrap;  
}

.switch-beam .middle .right {
  width: 27px;
  height: auto;
  background: url('./img/switch/r_border.png') repeat-y center center;
  background-size: 100% auto;
}


/* x1 */
.switch-beam.x1 .top .left-corner, .switch-beam.x1 .top .right-corner, .switch-beam.x1 .bottom .left-corner, .switch-beam.x1 .bottom .right-corner {
  width: 3px;
  height: 3px;
}

.switch-beam.x1 .middle .left, .switch-beam.x1 .middle .right {
  width: 3px;
}

.switch-beam.x1 .bottom .center, .switch-beam.x1 .top .center {
  height: 3px;
}

/* x2 */
.switch-beam.x2 .top .left-corner, .switch-beam.x2 .top .right-corner, .switch-beam.x2 .bottom .left-corner, .switch-beam.x2 .bottom .right-corner {
  width: 9px;
  height: 9px;
}

.switch-beam.x2 .middle .left, .switch-beam.x2 .middle .right {
  width: 9px;
}

.switch-beam.x2 .bottom .center, .switch-beam.x2 .top .center {
  height: 9px;
}

/* x3 */
.switch-beam.x3 .top .left-corner, .switch-beam.x3 .top .right-corner, .switch-beam.x3 .bottom .left-corner, .switch-beam.x3 .bottom .right-corner {
  width: 15px;
  height: 15px;
}

.switch-beam.x3 .middle .left, .switch-beam.x3 .middle .right {
  width: 15px;
}

.switch-beam.x3 .bottom .center, .switch-beam.x3 .top .center {
  height: 15px;
}

/* switch */

  .switch {
    position: relative;
    width: 100%;
    height: 15px;
    background: #101325;
    border: 3px solid #20467A;
    border-radius: 6px;
    user-select: none;
    margin: 0 auto;
  }

  .switch-fill {
    position: absolute;
    left: 2px;
    top: 2px;
    height: 5px;
    background: #D2E7E3;
    width: 0%;
  }

  .switch-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 16px;
    height: 24px;
    background: #101325;
    border: 3px solid #20467A;
    transform: translate(-50%, -50%);
    cursor: pointer;
    touch-action: none;
    padding: 3px 2px;
  }

  .switch-thumb div {
    width: 100%;
    height: 100%;
    background: #D2E7E3;
  }

  .switch-beam.x3 .switch {
    border: 5px solid #20467A;
    height: 25px;
  }


  .switch-beam.x3 .switch-fill {
    position: absolute;
    left: 3px;
    top: 3px;
    height: 9px;
    background: #D2E7E3;
    width: 0%;
  }

  .switch-beam.x3 .switch-thumb {
    width: 24px;
    height: 36px;
    border: 5px solid #20467A;
    padding: 4px 3px;
  }

/* ---- diamond ---- */

.diamond {
  background: url('img/diamond.png') no-repeat top left;
  background-size: 18px;
}

.diamond.x1 {
  background-size: 16px;
  padding-left: 28px;
  background-position:  left 8px
}

.diamond.x2 {
  background-size: 20px;
  padding-left: 34px;
  background-position:  left 11px
}



.diamond-before {
  background: url('img/diamond.png') no-repeat center center;
  background-size: 18px;
  width: 18px;
  height: 18px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 0;
}

.diamond-before.x1 {
  background-size: 16px;
  width: 16px;
  height: 16px;
}

.diamond-before.x2 {
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.diamond-after {
  background: url('img/diamond.png') no-repeat center center;
  background-size: 18px;
  width: 18px;
  height: 18px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  right: 0;
}

.diamond-after.x1 {
  background-size: 16px;
  width: 16px;
  height: 16px;
}

.diamond-after.x2 {
  background-size: 20px;
  width: 20px;
  height: 20px;
}

/* carousel */

  .carousel {
    width: 100%;
    margin: 2rem auto;
  }

  .carousel-cell {
    width: 60%;
    margin-right: 10px;
    border-radius: 10px;
    overflow: visible;
  }

  .carousel-item {
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: scale(0.9);
    opacity: 0.9;
  }

  .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
  }

  .carousel-cell.is-selected .carousel-item {
    transform: scale(1);
    opacity: 1;
  }


  /* brands */ 
  .brand-row {
    display: flex;
    justify-content: center;
    gap: .4rem;
  }

  .tile {
    width: 120px;
    aspect-ratio: 113/100;
    background: #36B7E7;
    border: 0.25rem black solid;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    padding: 0.25rem
  }

  .brand {
    width: 100%;
    height: 100%;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .tile.player1 {
    background: #FF4831;
    position: relative;
  }

  .tile.player1 .player {
    color: #FF4831;
  }

  .tile.player2 {
    background: #00FF8B;
    position:relative;
  }

  .tile.player2 .player {
    color: #00FF8B;
  }

  .tile.player1 .player, .tile.player2 .player {
    position: absolute;
    font-size: 36px;
    top: -32px;
    line-height: 100%;
    margin: 0 auto;
  }

  .tile.player2 .brand,  .tile.player1 .brand {
    position: relative;
    z-index: 3
  }

  .line1 {
    width: 100%;
    height: 0.25rem;
    background: black;
    position: absolute;
    z-index:1;
    top: 35%;
    left: 0;
  }

  .line2 {
    width: 100%;
    height: 0.25rem;
    background: black;
    position: absolute;
    z-index:1;
    top: 65%;
    left: 0;
  }

  .line3 {
    width: 0.25rem;
    height: 100%;
    background: black;
    position: absolute;
    z-index:1;
    top: 0;
    left: 35%;
  }

  .line4 {
    width: 0.25rem;
    height: 100%;
    background: black;
    position: absolute;
    z-index:1;
    top: 0;
    left: 65%;
  }



  /* ------ contact beam ------ */

.contact-beam {
  flex-direction: column;
  max-width: 100%;
}

.contact-beam>.top, .contact-beam>.middle, .contact-beam>.bottom {
  display: flex;
  align-items: stretch;
  width: 100%;
  
}



.contact-beam>.top>.left-corner {
  width: 25.5px;
  height: 27.5px;
  background: url('./img/contact/lu_corner.png') no-repeat center center;
  background-size: cover;
}

.contact-beam>.top>.right-corner {
  width: 25.5px;
  height: 27.5px;
  background: url('./img/contact/ru_corner.png') no-repeat center center;
  background-size: cover;
}

.contact-beam>.top>.center {
  width: 100%;
  height: 27.5px;
  background: url('./img/contact/t_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.contact-beam>.bottom>.left-corner {
  width: 25.5px;
  height: 25.5px;
  background: url('./img/contact/ld_corner.png') no-repeat center center;
  background-size: cover;
}

.contact-beam>.bottom>.right-corner {
  width: 25.5px;
  height: 25.5px;
  background: url('./img/contact/rd_corner.png') no-repeat center center;
  background-size: cover;
}

.contact-beam>.bottom>.center {
  width: 100%;
  height: 25.5px;
  background: url('./img/contact/d_border.png') repeat-x center center;
  background-size: auto 100%;
  flex: 1;
}

.contact-beam>.middle>.left {
  width: 25.5px;
  height: auto;
  background: url('./img/contact/l_border.png') repeat-y center center;
  background-size: 100% auto;
}

.contact-beam>.middle>.center {
  width: 100%;
  height: 100%;
  background: #0D111A;
  padding: 0.50rem;
  
}

.contact-beam>.middle>.right {
  width: 25.5px;
  height: auto;
  background: url('./img/contact/r_border.png') repeat-y center center;
  background-size: 100% auto;
}


/* x1 */
.contact-beam.x1>.top>.left-corner, .contact-beam.x1>.top>.right-corner, .contact-beam.x1>.bottom>.left-corner, .contact-beam.x1>.bottom>.right-corner {
  width: 3px;
  height: 3px;
}

.contact-beam.x1>.middle>.left, .contact-beam.x1>.middle>.right {
  width: 3px;
}

.contact-beam.x1>.bottom>.center, .contact-beam.x1>.top>.center {
  height: 3px;
}

/* x2 */
.contact-beam.x2>.top>.left-corner, .contact-beam.x2>.top>.right-corner, .contact-beam.x2>.bottom>.left-corner, .contact-beam.x2>.bottom>.right-corner {
  width: 9px;
  height: 9px;
}

.contact-beam.x2>.middle>.left, .contact-beam.x2>.middle>.right {
  width: 9px;
}

.contact-beam.x2>.bottom>.center, .contact-beam.x2>.top>.center {
  height: 9px;
}

/* x3 */

.contact-beam.x3>.top>.left-corner, .contact-beam.x3>.top>.right-corner {
  width: 15px;
  height: 16px
}

.contact-beam.x3>.bottom>.left-corner, .contact-beam.x3>.bottom>.right-corner {
  width: 15px;
  height: 15px;
}

.contact-beam.x3>.middle>.left, .contact-beam.x3>.middle>.right {
  width: 15px;
}

.contact-beam.x3>.bottom>.center {
  height: 15px;
}

.contact-beam.x3>.top>.center {
  height: 16px;
}



/* --- rwd ---- */

@media (min-width: 768px) {
  body {
    font-size: 38px
  }



  .background-middle {
    background: #429AE9;

  }

  .background-bottom {
    background: #429AE9 

  }

  .tile {
    width: 240px;

  }

    .carousel-cell {
    width: 33%;
    margin-right: 10px;
    border-radius: 10px;
    overflow: visible;
  }

  .carousel.cc .carousel-cell {
    width: 50%;
  }

}

@media (max-width: 768px) {
  .city{
    background-size: auto 200px;
  }


}


/* --- menu ---- */

.retro-frame {
  position: relative;
  border: 4px solid white;
  background: black;
  box-sizing: border-box;

}

.retro-frame > .corner {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white
}

.retro-frame > .corner:before {
  content: '';
  display: block;
  position: absolute;
  width: 4px;
  height: 4px;
  background: black;
}

.retro-frame > .corner.tl {
  top: -4px;
  left: -4px;
}

.retro-frame > .corner.tl:before {
  top: 0px;
  left: 0px;
}

.retro-frame > .corner.tr {
  top: -4px;
  right: -4px;
}

.retro-frame > .corner.tr:before {
  top: 0px;
  right: 0px;
}

.retro-frame > .corner.bl {
  bottom: -4px;
  left: -4px;
}

.retro-frame > .corner.bl:before {
  bottom: 0px;
  left: 0px;
}

.retro-frame > .corner.br {
  bottom: -4px;
  right: -4px;
}

.retro-frame > .corner.br:before {
  bottom: 0px;
  right: 0px;
}

.text-animation::after {
  content: '_';
  animation: blink 1s steps(1) infinite;
  display: inline-block;
  margin-left: 4px;
}

.text-animation-second::after {
  content: '_';
  animation: blink 1s steps(1) infinite;
  display: inline-block;
  margin-left: 4px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}


/* ---- video modal ---- */

#video-modal {
  --target-w: 95vw;
  --target-h: calc(95vw * 9 / 16);
}

#video-modal.open { display: flex; }
#video-modal #video-modal-box { position: relative; max-width:95vw; max-height:95vh; }

#video-modal.expanded #video-expander {
  width: var(--target-w);
  height: var(--target-h);
}

#video-expander{
  position: absolute;          
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 0;                     
  height: 0;                    
  overflow: hidden;             
  border: 3px solid #fff;      
  background: #000;
}

#video-content iframe,
#video-content video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

@keyframes expandFrame {
  0%   { width: 0;                height: 0; }
  50%  { width: var(--target-w);  height: 0; }
  100% { width: var(--target-w);  height: var(--target-h); }
}

#video-modal.animating-open #video-expander {
  animation: expandFrame 800ms ease forwards;
}

#video-modal.animating-close #video-expander {
  animation: expandFrame 600ms ease reverse forwards;
}



/*------ CRT -----------*/

.switch_crt + .switch-label {
  background: #444;
  background-image: radial-gradient(circle at left top, #5e5e5e, #2b2b2b);
  box-shadow: -0.1rem -0.1rem 0 #5e5e5e, 0.1rem 0.1rem 0 #2b2b2b, 0 0 0 0.2rem #111111, 0.1rem 0.1rem 0 0.2rem #444;
}
.switch_crt + .switch-label:after {
  background: #003300;
}

.switch_crt:checked + .switch-label,
.switch_crt:active + .switch-label {
  box-shadow: -0.1rem -0.1rem 0 #2b2b2b, 0.1rem 0.1rem 0 #5e5e5e, 0 0 0 0.2rem #111111, 0.1rem 0.1rem 0 0.2rem #444;
}
.switch_crt:checked + .switch-label:after,
.switch_crt:active + .switch-label:after {
  background: #66ff66;
  box-shadow: 0 0 1.2rem 0 lime;
}

.scanlines {
  position: relative;
  overflow: hidden;
}
.scanlines:before, .scanlines:after {
  display: block;
  pointer-events: none;
  content: "";
  position: absolute;
}
.scanlines:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.2rem;
  z-index: 2147483649;
  opacity: 0.75;
}
.scanlines:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483648;
}

.switch_crt ~ .screen {
  background: #111;
}
.switch_crt ~ .screen.scanlines:before, .switch_crt ~ .screen.scanlines:after {
  -webkit-animation: none;
          animation: none;
}
.switch_crt ~ .screen > .crt_contents {
  -webkit-animation: crt-power-off 0.55s forwards ease-in-out;
          animation: crt-power-off 0.55s forwards ease-in-out;
}

.switch_crt:checked ~ .screen.scanlines:before {
  background: rgba(0, 0, 0, 0.25);
  -webkit-animation: scan-moving 6s linear infinite;
          animation: scan-moving 6s linear infinite;
}
.switch_crt:checked ~ .screen.scanlines:after {
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.25) 51%);
  background-size: 100% 0.4rem;
  -webkit-animation: scan-crt 1s steps(60) infinite;
          animation: scan-crt 1s steps(60) infinite;
}
.switch_crt:checked ~ .screen > .crt_contents {
  -webkit-animation: crt-power-on 4s forwards linear;
          animation: crt-power-on 4s forwards linear;
}

@-webkit-keyframes scan-moving {
  0% {
    transform: translate3d(0, 100vh, 0);
  }
}

@keyframes scan-moving {
  0% {
    transform: translate3d(0, 100vh, 0);
  }
}
@-webkit-keyframes scan-crt {
  0% {
    background-position: 0 50%;
  }
}
@keyframes scan-crt {
  0% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes blink {
  to {
    visibility: hidden;
  }
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes crt-power-on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(30);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
}
@keyframes crt-power-on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    filter: brightness(30);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
}
@-webkit-keyframes crt-power-off {
  0% {
    transform: scale(1, 1.3) translate3d(0, 0, 0);
    filter: brightness(1);
    opacity: 1;
  }
  60% {
    transform: scale(1.3, 0.001) translate3d(0, 0, 0);
    filter: brightness(10);
  }
  100% {
    transform: scale(0, 0.0001) translate3d(0, 0, 0);
    filter: brightness(50);
  }
}
@keyframes crt-power-off {
  0% {
    transform: scale(1, 1.3) translate3d(0, 0, 0);
    filter: brightness(1);
    opacity: 1;
  }
  60% {
    transform: scale(1.3, 0.001) translate3d(0, 0, 0);
    filter: brightness(10);
  }
  100% {
    transform: scale(0, 0.0001) translate3d(0, 0, 0);
    filter: brightness(50);
  }
}


.crt {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.screen {
  position: relative;
  padding-top: 75%;
  background-color: #333;
  width: 100%;
  height: 0;
  box-sizing: content-box;
  -webkit-clip-path: url('#crtPath');
          clip-path: url('#crtPath');
  text-transform: uppercase;
}
.screen .crt_contents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: #333;
  box-sizing: border-box;
}
.screen h1 {
  margin: 0;
  font-size: 1em;
  font-weight: normal;
}
.screen h1 span {
  -webkit-animation: blink 1s steps(5, start) infinite;
          animation: blink 1s steps(5, start) infinite;
}
.screen a {
  color: #fff;
  text-decoration: none;
}
.screen nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.screen nav ul li:before {
  content: "- ";
}
.screen nav ul li:hover:after {
  content: ">";
}
.screen footer {
  padding-top: 1em;
}
@media (min-width: 30rem) {
  .screen .crt_contents {
    padding: 0;
    font-size: 3rem;
  }
  .screen footer {
    padding-top: 2em;
  }
}
@media (min-width: 45rem) {
  .screen .crt_contents {
    padding: 0;
    font-size: 3.6rem;
  }
  .screen footer {
    padding-top: 4em;
  }
}

.switch_crt {
  display: none;
}

.switch-label {
  align-self: flex-end;
  position: relative;
  display: inline-block;
  margin: 2rem 2rem 0 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1;
  text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.4);
  color: #444;
  cursor: pointer;
}
.switch-label:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-5rem, -50%);
  content: "";
  display: block;
  border-radius: 50%;
  height: 0.5rem;
  width: 0.5rem;
}
.switch-label span {
  position: absolute;
  top: 5rem;
  left: 0;
  width: 100%;
  text-align: center;
}


.crt_thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
}

.crt_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/*---- logo ---- */

.type-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 12%;
}

#text-img {
    width: auto;
    height: 100%;
    opacity: 1;
}

.cursor {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    animation: blink 1s infinite;
    opacity: 1;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.red-beam {
  opacity: 0;
}

.red-beam-position.red .red-beam {
  color: #BB232E;
}

.red-beam-position.white  .red-beam {
  color: #fff;
}

.red-beam-position .red-beam {
  opacity: 1;
}

.red-beam-sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 8;
  padding-top: 0 !important;
  color: #fff;
}

.red-beam-position.red.red-beam-sticky .red-beam{
  color: #fff;
}


form input, form textarea {
	color: #000000;
	padding: 0 8px;
}

.stars {
  background:  url('img/background/stars.png') no-repeat top center;
  background-size: 100% auto;
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, calc(var(--starsY, 0) * 1px), 0);
  z-index: 1
}

.stars-small {
  background:  url('img/background/stars-small.png') no-repeat top center;
  background-size: 100% auto;
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, calc(var(--starswY, 0) * 1px), 0);
  z-index: 1
}

.clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cloud {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;   
}

.cloud__img {
  display: block;
  will-change: transform;
  animation: floatLR 180s ease-in-out infinite;
  transform: translateX(0) scale(var(--s, 0.35));
  transform-origin: left center;
}

@keyframes floatLR {
  0%   { transform: translateX(0) scale(var(--s, 0.35)); }
  50%  { transform: translateX(80vw) scale(var(--s, 0.35)); }
  100% { transform: translateX(0) scale(var(--s, 0.35)); }
}

.cloud-slow   { top: 0%; }
.cloud-medium { top: 15%; }
.cloud-fast   { top: 30%; }

.cloud-slow2   { top: 10%; }
.cloud-medium2 { top: 25%; }
.cloud-fast2   { top: 5%; }


.cloud-slow   .cloud__img { animation-duration: 180s;  animation-delay: -36s; }
.cloud-medium .cloud__img { animation-duration: 180s; animation-delay: -72s; }
.cloud-fast   .cloud__img { animation-duration: 180s; animation-delay: 0s; }

.cloud-slow2   .cloud__img { animation-duration: 180s; animation-delay: -100s; }
.cloud-medium2 .cloud__img { animation-duration: 180s; animation-delay: -120s; }
.cloud-fast2   .cloud__img { animation-duration: 180s; animation-delay: -150s; }

.cloud-slow3   { top: 50%; }
.cloud-medium3 { top: 58%; }
.cloud-fast3   { top: 66%; }

.cloud-slow4   { top: 74%; }
.cloud-medium4 { top: 84%; }
.cloud-fast4   { top: 90%; }


.cloud-slow3   .cloud__img { animation-duration: 180s;  animation-delay: -36s; }
.cloud-medium3 .cloud__img { animation-duration: 180s; animation-delay: -72s; }
.cloud-fast3  .cloud__img { animation-duration: 180s; animation-delay: 0s; }

.cloud-slow4   .cloud__img { animation-duration: 180s; animation-delay: -100s; }
.cloud-medium4 .cloud__img { animation-duration: 180s; animation-delay: -120s; }
.cloud-fast4   .cloud__img { animation-duration: 180s; animation-delay: -150s; }