:root {
    --primary: #003263;
    --secondary: #003263c9;
  }

.primary-bg
  {
    background-color: var(--primary) !important;
    color: #fff;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 20px;
    font-size: 20pt;
  }
  
  .event-item a.bt,
  .btn,
  .btn-primary
  {
   background-color: #113960 !important;
  }
  
  
  .event-item-assoc {
      background: none;
  }
  
  .text-team-rank, .text-date {
      color: #d4ae6c;
  }
  
  .vs {
      color: #646466;
  }
  
  body
  {
      background-color: transparent;
      color: #404040;
      width: auto;
      max-width: 980px;
      margin: 0 auto;
      padding: 0;
      font-family: 'Open Sans', Arial, Helvetica, sans-serif;
      font-size: 11pt;
      overflow-x: hidden;
      overflow-y: auto;
  }
  
  #public_event_wrapper.piaa-basketball {
      padding: 0 !important;
  }
  
  .public-event
  {
      padding-top: 18px;
      padding-bottom: 0;
      margin-bottom: 0;
      background-color: #d6dee9;
  }
  
  .public-event-flyer
  {
      max-width: 275px;
      padding-bottom: 0.5em;
  }
  
  body.noiframe #public_event_wrapper, body.noiframe #checkout_wrapper {
      padding: 10pt 0px 40px;
  }
  
  #checkout_wrapper {
      padding: 10px;
  }
  
  .event-header {
      padding-left: 0;
      line-height: 1.41;
  }
  
  .showtime-box
  {
      display: flex;
      align-items: center;
      background: white;
      margin: 10px 20px;
  }
  
  .showtime-date
  {
      flex-grow: 0;
      padding: 5px;
      border-right: 2px solid #f2f2f2;
      text-align: center;
      width: 15%;
  }
  
  .showtime-description
  {
      font-size: 11pt;
      flex-grow: 2;
      width: 65%;
      padding: 5px;
      padding-left: 22px;
      color: #a3a4a6;
  }
  
  .showtime-button
  {
      flex-grow: 0;
      width: 20%;
      padding: 5px;
  }
  
  /* Colors */
  
  .text-highlight
  {
      color: #eb1f2c;
      font-weight: 600;
  }
  
  .bg-color-primary
  {
      background-color: var(--primary);
  }
  
  .text-color-primary
  {
      color: var(--primary);
  }
  
  .checkout-divider-top
  {
      border-top: 2px solid var(--primary);
  }
  
  a, a:active
  {
      color: var(--primary);
  }
  
  a:hover
  {
      color: #dc5526;
  }
  
  p.big-month
  {
      font-size: 10pt;
      margin-bottom: 0px;
      color: white;
      background-color:  var(--primary);
      margin-left: 20px;
      margin-right: 20px;
  }
  
  p.big-day
  {
      font-size: 40pt;
      font-weight: 700;
      color: #595a5c;
      background-color: #f2f2f2;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
      padding-right: 6px;
  }
  
  p.free-event
  {
      color:  var(--primary);
  }
  
  .center-button
  {
      display: block;
      margin: 0;
  }
  
  h2.public-embed-title
  {
      color: var(--primary);
      text-align: center;
      margin-bottom: 0;
      font-size: 26pt;
      font-weight: bold;
  }
  
  h2.public-embed-banner
  {
      color: white;
      background-color: var(--primary);
      text-align: center;
      padding-top: 4px;
      padding-bottom: 4px;
      margin-bottom: 10px;
      font-size: 20pt;
  }
  
  h2.public-embed-class
  {
      color: white;
      background-color: var(--primary);
      text-align: center;
      padding-top: 4px;
      padding-bottom: 4px;
      margin-bottom: 20px;
      font-size: 20pt;
  }
  
  h2.public-embed-class + h2.public-embed-banner {
    margin-top: 10px;
  }
  
  h2.public-event-venue
  {
      margin: 0;
      color: #444444;
      font-size: 11pt;
      font-weight: 700;
      text-transform: uppercase;
  }
  
  h2.public-event-address
  {
      margin: 0;
      font-size: 11pt;
      font-weight: 700;
      color: #8f9194;
  }
  
  h2.public-event-title
  {
      margin: 0 0 0.3em;
      color: #454545;
      font-size: 21pt;
      font-weight: 700;
      letter-spacing: -0.02em;
  }
  
  h2.public-show-event-title
  {
      margin: 0 0 0.3em;
      color: #454545;
      font-size: 16pt;
      font-weight: 700;
      letter-spacing: -0.02em;
  }
  
  .showtime-box h2.public-event-title {
      margin: 0;
      font-size: 12pt;
      text-transform: uppercase;
      letter-spacing: 0;
  }
  
  .showtime-box h2.public-event-title .vs {
      display: inline-block;
      text-transform: none;
      padding-left: 0.32em;
      padding-right: 0.32em;
  }
  
  p.public-embed-description
  {
      color: #888;
      text-align: center;
  }
  
  p.public-event-date-showtime, p.public-event-date-showtime-mobile
  {
      line-height: 1.0;
      font-size: 11pt;
      color: #777;
      font-weight: 600;
      margin: 0;
  }
  
  .public-event-date-showtime-mobile
  {
      display: none;
  }
  
  p.public-event-date-showtime .text-date {
      font-size: 20pt;
      text-transform: uppercase;
      color: #013063;
  }
  
  h3.public-showtime-name
  {
      color: #666;
      font-size: 15pt;
  }
  
  h3.public-event-venue
  {
      font-size: 14pt;
      color: #444;
      font-weight: 400;
  }
  
  h3.public-event-date
  {
      color: #444444;
      font-weight: 700;
  }
  
  h3.public-event-title-with-team
  {
      color: var(--primary);
      font-size: 15pt;
      font-weight: bold;
  }
  
  p.public-event-date
  {
      line-height: 1.0;
      font-size: 13pt;
      font-weight: 700;
      color: #d4ae6c;
      margin: 0 0 0.3em;
  }
  
  p.public-event-description
  {
      font-size: 12pt;
  }
  
  div.venue-box
  {
      border-top: solid lightgrey 2px;
      border-bottom: solid lightgrey 2px;
      padding-top: 5px;
      padding-bottom: 5px;
      margin-bottom: 0.9em;
      margin-top: 0.9em;
      padding-left: 0;
      padding-right: 0;
  }
  
  p.age-description
  {
      color: white;
  }
  
  
  .table-showtimes
  {
      margin-top: 20px;
      margin-bottom: 0;
  }
  
  .mobile-show
  {
      display: none !important;
  }
  
  /* Help section */
  .help-contact
  {
      display: flex;
      align-items: center;
      margin-bottom: 50px;
      padding-top: 8px;
      padding-bottom: 8px;
      justify-content: center;
      flex-wrap: wrap;
      background-color: #f1f3f7;
  }
  
  .help-contact h2
  {
      font-size: 18pt;
      margin-top: 0;
      padding-right: 0.5em;
  }
  
  .help-contact .action
  {
      font-size: 15pt;
      text-align: center;
  }
  
  @media screen and (max-width: 767px)
  {
    .help-contact .action
    {
          font-size: 12pt;
      }
  }
  
  /* Media queries for responsive modifications */
  
  @media screen and (max-width: 767px) {
      .mobile-hide
      {
          display: none !important;
      }
  
      .mobile-show
      {
          display: block !important;
      }
  
      .msg-soldout
      {
          font-size: 9pt;
      }
  
      .mobile-100
      {
          width: 100% !important;
      }
      .preview-tag
      {
          float: none !important;
          text-align: center;
      }
  
      .hometown-tag
      {
          font-size: 9pt;
      }
  
      .msg-soldout
      {
          text-align: center;
      }
  
      .no-top-mobile
      {
          border-top-width: 0 !important;
      }
  
      h2.public-event-venue
      {
          font-size: 10pt;
      }
  
      h2.public-event-address
      {
          font-size: 10pt;
      }
  
      .public-event-flyer
      {
          padding-bottom: 15px;
          max-width: 100%;
      }
  
      .center-button
      {
          display: block;
      }
  
      #countdown {
          margin: 20px 0;
      }
  
      #countdown .col-xs-3 {
          border-right-width: 2px;
      }
  
      #countdown .value-label {
          font-size: 11pt;
      }
  
      #countdown .count {
          font-size: 26pt;
      }
  
      .countdown-box h2.public-event-title
      {
          font-size: 20pt;
      }
  
      .event-header
      {
          margin-top: 0;
      }
  
      .event-header h2.public-event-title
      {
          font-size: 25pt;
      }
  
      h3.public-event-title-with-team
      {
          text-align: center;
      }
  
      h2.public-event-title
      {
          text-align: center;
      }
  
      h2.public-show-event-title
      {
          text-align: center;
      }
  
      h2.public-event-venue
      {
          text-align: center;
      }
  
      h2.public-event-address
      {
          font-size: 11pt;
          text-align: center;
      }
  
      .event-header h3.public-event-venue
      {
          font-size: 16pt;
          text-align: center;
      }
  
      p.public-event-date
      {
          display: none;
      }
  
      p.public-event-date-showtime
      {
          display: none !important;
      }
  
      p.public-event-date-showtime-mobile
      {
          display: block;
          color: #d4ae6c;
      }
  
      .row-padded > h3.public-event-date
      {
          font-size: 16px;
      }
  
      p.public-event-date-mobile
      {
          display: block;
          text-align: center;
          font-weight: 600;
          font-size: 12pt;
          color: #d4ae6c;
          margin-bottom: 0;
      }
  
      p.public-event-date-showtime
      {
          display: block;
          text-align: center;
          font-weight: 600;
          font-size: 12pt;
      }
  
      p.public-event-description
      {
          text-align: center;
          display: block;
          margin-bottom: 0;
      }
  
      p.age-description
      {
          display: none;
      }
  
      h2.public-event-title {
          font-size: 14pt !important;
      }
  
      .showtime-box
      {
          display: block;
          padding: 10px;
          margin-left: 0;
          margin-right: 0;
      }
  
      p.public-event-date-showtime br {
          display: none;
      }
  
      .showtime-date
      {
          width: 100%;
          font-size: 10pt;
          padding: 0;
          border-right-width: 0;
      }
  
      .showtime-description
      {
          width: 100%;
          font-size: 11pt;
          text-align: center;
          padding-left: 0;
          padding-right: 0;
          padding-bottom: 0;
          padding-top: 0;
      }
  
      .showtime-button
      {
          width: 100%;
          padding: 0;
      }
  
      .showtime-box h2.public-event-title
      {
          font-size: 12pt !important;
          margin: 0.5em 0 0.3em;
      }
  
      p.public-event-date-showtime {
          color: #d4ae6c;
      }
  
      p.public-event-date-showtime .text-date {
          font-family: inherit;
          font-size: inherit;
          color: inherit;
      }
  
      .showtime-box a.btn {
          margin-bottom: 0;
      }
  
      .center-mobile
      {
          text-align: center;
    }
  
  
    .header__plain {
      display: block;
      background: #0055a2;
      width: 100%;
      height: 150px;
    }
  
    .tile_plain
    {
      display: block;
      background: #0055a2;
    }
  }
  
  /*Multi Button/tile layout------------------------------------------------------*/
  
  .multi_sports
  {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: center;
    width: 100%;
  }
  
  .multi_sports--link
  {
    margin: 10px auto;
    width: 100%;
  }
  
  .multi_sports--link img
  {
    width: 100%;
  }
  
  .multi_sports--link:hover img
  {
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    opacity: .8;
  }
  
  
  .multi_button
  {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: center;
    width: 100%;
  }
  
  .multi_button--link
  {
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 4px;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    margin: 10px auto;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    width: 90%;
  }
  
  .multi_button--link:hover,
  .btn-buynow:hover {
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    background: var(--secondary);
    color: #fff;
    text-decoration: none;
  }
  
  
  .mobile-bottom {
    margin-bottom: 20px;
  }
  
  @media screen and (min-width: 768px) {
  
    .multi_sports--link
    {
      margin: 10px auto;
      width: 48%;
    }
  
    .multi_button--link
    {
      margin: 10px auto;
      width: 48%;
    }
  
    .multi_button--null
    {
      display: flex;
      flex: 1;
    }
  
    .mobile-bottom
    {
      margin-bottom: 0;
    }
  
  }
  
  
  /* Dropdown menu ---------------------------------------------------------------*/
  .open>.dropdown-menu {
    width: 100%;
  }
  
  .dropdown-menu {
    color: #fff;
    background: var(--primary);
  }
  
  .dropdown-menu li {
    padding: 4px 1px;
    color: var(--secondary);
    text-align: center;
  }
  
  .dropdown-menu a {
    color: #fff;
    display: block;
    text-align: center;
    text-decoration: none;
    width: 100%;
  }
  
  .dropdown-menu a:hover {
    background: #fff;
    color: var(--primary);
  }
  
  .dropdown-item{
    color: #fff;
  }
  
  /* Header without image --------------------------------------------------------*/
  .header__plain
  {
    align-items: center;
    background: var(--primary);
    color: #fff;
    display: flex;
    justify-content: center;
    min-height: 150px;
    text-align: center;
    text-transform: uppercase;
  }
  
  @media screen and (min-width: 768px) {
    .header__plain
    {
      min-height: 200px;
    }
  }
  
  /* New Stuff after update ------------------------------------------------------*/
  
  .input-group-addon {
    padding: 10px 12px 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  
  .desktop
  {
    display: none;
  }
  
  @media screen and (min-width: 768px) {
    .mobile{
      display: none;
      width: 20%;
    }
    .desktop
    {
      display: block;
    }
  
    .public-event-date-mobile
    {
      display: none;
    }
  }
  
  
  .public-event
  {
    padding-bottom: 20px;
  }
  
  .event-item
  {
    width: 100%;
  }
  
  
  .public-event
  {
    border-top: 0;
  }
  
  .single-event
  {
    padding: 10px;
  }
  
  .flex
  {
    align-items: center;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
  }
  
  .col-xs-12
  {
    width: 100%;
  }
  
  /* Back button -----------------------------------------------------------------*/
  .back_button {
    color: #fff;
    font-weight: bold;
    position: relative;
    padding-right: 30px;
    margin-right: 5px;
  }
  
  .back_button:hover {
    color: #fff;
    background: var(--secondary);
  }
  
  .back_button span {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 11px;
  }