/* Colors */
/* Colors */
@font-face {
  font-family: 'Times Square';
  src: url("../../fonts/TimesSquare.woff2") format("woff2"), url("../../fonts/TimesSquare.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

body {
  padding: 1em 1em;
  color: orange;
  font-family: 'TRS Million';
  font-family: 'Times Square';
  background: #2e2e2e;
  text-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.2); }

* {
  box-sizing: border-box; }

.main {
  max-width: 100%;
  width: 800px;
  margin: 0 auto;
  font-size: 2em; }

@media screen and (max-width: 600px) {
  .main {
    font-size: 1.5em; }
  .station-name {
    text-align: left; } }

.time {
  text-align: right; }

.station-name {
  color: white;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1; }

.sign {
  width: 20em;
  max-width: 100%;
  margin: 0 auto;
  /*border: 1px solid #ccc;*/ }

.sign-header {
  color: #ff270f;
  margin-bottom: .4em; }

.sign-header .line {
  padding-left: .9em; }

.item {
  display: flex; }

.line-color {
  width: 1.5em; }

.line {
  width: 2.5em; }

.cars {
  width: 2.5em;
  text-align: center; }

.dest {
  width: 20em; }

.time {
  width: 3em; }

.item {
  /*display: flex;*/ }

.routes {
  text-align: center;
  margin: 0 0 1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: white;
  font-weight: bold; }
  .routes .route-text {
    font-size: .8em; }

.route {
  white-space: nowrap; }

[line="RD"] {
  color: #ff270f; }

[line="GR"] {
  color: #98ca02; }

[line="YL"] {
  color: #ffee00; }

[line="BL"] {
  color: #0fafff; }

[line="OR"] {
  color: orange; }

[line="SV"] {
  color: #ccc; }

.line-icon-wrapper {
  display: inline-block;
  position: relative;
  width: 1em;
  min-width: 1em;
  height: 1em; }

[line-icon] {
  font-weight: bold;
  color: white;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 1em;
  min-width: 1em;
  height: 1em;
  border-radius: 100%;
  margin-left: .2em;
  position: absolute; }

.line-abbrev {
  display: block;
  text-transform: uppercase;
  font-size: .55em;
  line-height: 1.8em;
  text-align: center; }

.line-icons {
  position: relative; }

[line-icon="red"] {
  background: #ff270f; }

[line-icon="green"] {
  background: #98ca02; }

[line-icon="yellow"] {
  background: #ffee00; }

[line-icon="blue"] {
  background: #0fafff; }

[line-icon="orange"] {
  background: orange; }

[line-icon="silver"] {
  background: #ccc; }

[blink] {
  opacity: 1;
  animation: blink-animation .9s infinite; }

@keyframes blink-animation {
  to {
    opacity: .5; } }

[pulse] {
  /* Standard Syntax */
  animation: PULSE 1s infinite; }

/* Standard Syntax */
@keyframes PULSE {
  0% {
    text-shadow: 0 0 1px red;
    opacity: .5; }
  110% {
    text-shadow: 0 0 0.4em red, 5x 5x 0.4em red -5x -5x 0.4em red 5x -5x 0.4em red -5x 2px 0.4em red; } }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

h1 {
  text-align: center;
  font-size: 2em;
  margin-bottom: .5em;
  margin: .5em 0;
  font-family: 'TRS Million';
  font-family: 'Times Square';
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 100;
  color: white;
  font-size: 1em; }

h5 {
  font-size: .8em;
  color: white;
  text-align: center;
  opacity: .5;
  /*font-family: 'Harriet Text';*/
  /*font-style: italic;*/ }

.logo {
  color: white;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  display: inline-block;
  background: #111;
  padding: .2em .06em .1em;
  border-radius: .3em;
  border: .08em solid white;
  font-size: 80%;
  margin: 0 auto;
  display: block;
  width: 3.22em; }

.logo-top {
  font-weight: bold;
  font-size: 3.5em;
  display: block;
  line-height: .72;
  /*margin-left: -.05em;*/
  text-align: center; }

.logo-text {
  font-weight: bold;
  font-size: 1em;
  display: block;
  line-height: 1;
  text-align: center; }

/** Pure CSS select from CodePen */
/* Reset Select */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  background: #2c3e50;
  background-image: none; }

/* Remove IE arrow */
select::-ms-expand {
  display: none; }

/* Custom Select */
.select {
  font-size: 1rem;
  margin: 0 auto;
  position: relative;
  display: flex;
  width: 20em;
  height: 3em;
  line-height: 3;
  background: #2c3e50;
  overflow: hidden;
  border-radius: .25em; }

select {
  font-size: 1.5rem;
  flex: 1;
  padding: 0 .5em;
  color: #fff;
  cursor: pointer; }

/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1em;
  background: #34495e;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease; }

/* Transition */
.select:hover::after {
  color: #f39c12; }