@font-face {
  font-family: LatoThin;
  src: url(/resources/fonts/Lato-Thin.ttf);
}
@font-face {
  font-family: LatoRegular;
  src: url(/resources/fonts/Lato-Regular.ttf);
}

.collapse.show {
  visibility: visible;
}

h1 {
  font-family: LatoThin;
  margin-top: 10px;
}
h2 {
  font-family: LatoThin;
}
h3 {
  font-family: LatoThin;
}
h4 {
  font-family: LatoThin;
}
h5 {
  font-family: LatoThin;
}
h6 {
  font-family: LatoThin;
}
a {
  font-family: LatoRegular;
}
p {
  font-family: LatoRegular;
}
.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
}
.intro-header {
  background-color: transparent;
}
.intro-header > .container {
  width: 100%;
  height: 100vh;
  margin: 0;
  text-align: center;
}
.intro-header > .container > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
footer {
  visibility: hidden;
}
.BaseButton {
  padding-top: .7em;
  padding-bottom: .7em;
  background-size: 100% 215%;
  background-position: 0 -1px;
  font-family: LatoRegular, Archivo Narrow, Metropolis, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.5;
  cursor: pointer;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: linear;
  background-image: linear-gradient(180deg, var(--gradient-color-stops));
  --gradient-from-color: transparent 50%;
  --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, hsla(0, 0%, 100%, 0));
}
.BaseButton.-secondary {
  padding-left: 3rem;
  padding-right: 3rem;
  background-color: transparent;
  --text-opacity: 1;
  color: #e31937;
  color: rgba(227, 25, 55, var(--text-opacity));
  border-width: 2px;
  --border-opacity: 1;
  border-color: #a31937;
  border-color: rgba(227, 25, 55, var(--border-opacity));
  --gradient-to-color: #c1152e 50%;
}
.BaseButton > .label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.middlesep {
  color: black;
  border-top-width: 1px;
  border-color: black;
  max-width: 120px;
}
.content-text {
  font-color: black;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 15px;
}
.content-block {
  background-color: #f2f2f2;
  width: 100%;
}

.content-text p {
  font-color: black;
}
.button-row {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 60px;
}
.button-row a {
  background-color: white;
  padding: 15px;
  border: 1px solid black;
  white-space: nowrap;
}
.speakers {
  padding: 20px 20px;
}
.speakers td {
  padding: 25px !important;
}
.speakers img {
  max-width: 100%;
}
.supporters {
  padding: 20px 20px;
}
.supporters td {
  padding: 25px !important;
}
.supporters img {
  margin: 25px;
  max-width: 100%;
}

#gold-sponsor-list ul {
  list-style: none;
}

#silver-sponsor-list ul {
  list-style: none;
}

/* Google map */
.map {
  margin-top: 20px;
  max-width:  80vw;
  max-height: 80vh;
}

/* 600 */
@media all and (max-width: 37.5em) {
.content-text {
  width: 90%;
  padding: 5px 5px;
}
}

/* Submission buttons should appear in one row in larger screens, and
 * vertically in smaller screens.
 */
@media all and (max-width: 43.75em) {
  .button-row a {
    display: table;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* We remove the margin on the right when buttons appear all
 * on the same row, so that they are centered.
 */
@media all and (min-width: 43.75em) {
  .button-row a:not(:last-child) {
    margin-right: 15px;
  }
  .button-row  {
    margin-bottom: 30px;
  }
}

/* We make the supporters table a bit smaller so that it doesn't overwhelm
 * visitors.
 */
@media all and (min-width: 43.75em) {
  .supporters {
    max-width:    80%;
    margin-left:  auto;
    margin-right: auto;
    text-align:   center;
  }

  .supporters h1 {
    margin-top: 60px;
    margin-bottom: 0px;
  }
  .supporters h2 {
    margin-top: 60px;
    margin-bottom: 0px;
  }
}

/* We make the top welcome message's background full screen on small devices by
 * modifying the height of the injected vimeo video to take the full screen.
 * Otherwise, we get undesirable margins and cropping effects.
 */
@media all and (max-width: calc(100vh * 16 / 9)) {
  .vimeo-wrapper > .embed-responsive {
    padding-bottom: 100vh;
  }
}

/* We completely eliminate the footer in smaller screens.
 *
 * On larger screens, it shows a portion of the background video, but the
 * effect is unnecessary and not showing up on smaller screens anyway).
 */
@media all and (max-width: 43.75em) {
  footer {
    display: none;
  }
}

/* We completely eliminate spacing around the speaker pictures on the front
 * page in smaller screens.
 */
@media all and (max-width: 43.75em) {
  .speakers {
    padding: 0px 0px !important;
  }
  .speakers td {
    padding: 0px !important;
    width: 100% !important;
    margin-top: 30px !important;
  }
  .speakers tr {
    display: inline-grid;
  }

  .supporters img {
    max-width: calc(70vw) !important;
  }

  #gold-sponsor-list ul {
    padding-left: 0;
    padding-right: 0;
  }

  #silver-sponsor-list ul {
    padding-left: 0;
    padding-right: 0;
  }

  #gold-sponsor-list li {
    padding-bottom: 25px !important;
  }
  #silver-sponsor-list li {
    padding-bottom: 25px !important;
  }
}

@media all and (min-width: 43.75em) {
  #gold-sponsor-list ul {
    column-count: 2;
    column-gap: 60px;
  }
  #gold-sponsor-list li {
    break-inside: avoid-column;
    margin-bottom: 60px;
  }
  #silver-sponsor-list ul {
    column-count: 2;
    column-gap: 60px;
  }
  #silver-sponsor-list li {
    break-inside: avoid-column;
    margin-bottom: 60px;
  }
}

/*************************
 * GRID SCHEDULE LAYOUT
 *************************/
@media screen and (min-width:700px) {
  .schedule {
    display: grid;
    grid-gap: 2px;
    grid-template-rows:
      [tracks] auto
      [time-0700] auto
      [time-0715] auto
      [time-0730] auto
      [time-0745] auto
      [time-0800] auto
      [time-0815] auto
      [time-0830] auto
      [time-0845] auto
      [time-0900] auto
      [time-0915] auto
      [time-0930] auto
      [time-0945] auto
      [time-1000] auto
      [time-1015] auto
      [time-1030] auto
      [time-1045] auto
      [time-1100] auto
      [time-1115] auto
      [time-1130] auto
      [time-1145] auto
      [time-1200] auto
      [time-1215] auto
      [time-1230] auto
      [time-1245] auto
      [time-1300] auto
      [time-1315] auto
      [time-1330] auto
      [time-1345] auto
      [time-1400] auto
      [time-1415] auto
      [time-1430] auto
      [time-1445] auto
      [time-1500] auto
      [time-1515] auto
      [time-1530] auto
      [time-1545] auto
      [time-1600] auto
      [time-1615] auto
      [time-1630] auto
      [time-1645] auto
      [time-1700] auto
      [time-1715] auto
      [time-1730] auto
      [time-1745] auto
      [time-1800] auto
      [time-1815] auto
      [time-1830] auto
      [time-1845] auto
      [time-1900] auto
      [time-1915] auto
      [time-1930] auto
      [time-1945] auto
      [time-2000] auto;
      /* Note 1:
      Use 24hr time for gridline names for simplicity

      Note 2: Use "auto" instead of "1fr" for a more compact schedule where height of a slot is not proportional to the session length. Implementing a "compact" shortcode attribute might make sense for this!
      Try 0.5fr for more compact equal rows. I don't quite understand how that works :)
      */

    grid-template-columns:
      [times] 4em
      [track-1-start] 1fr
      [track-1-end track-2-start] 1fr
      [track-2-end track-3-start] 1fr
      [track-3-end track-4-start] 1fr
      [track-4-end track-5-start] 1fr
      [track-5-end track-6-start] 1fr
      [track-6-end];
  }
}

.time-slot {
  grid-column: times;
}

.track-slot {
  display: none; /* hidden on small screens and browsers without grid support */
}

@supports( display:grid ) {
  @media screen and (min-width:700px) {
    .track-slot {
      display: block;
      padding: 0px 0px 0px;
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color: rgba(255,255,255,.9);
    }
  }
}

/* Small-screen & fallback styles */
.session {
  margin-bottom:  1em;
}

.session ul {
  padding-left: 20px;
}

@supports( display:grid ) {
  @media screen and (min-width: 700px) {
    .session {
      margin: 0;
    }
  }
}

.session {
  padding: .5em;
  border-radius: 2px;
  font-size: 14px;
}

.session-title,
.session-time,
.session-track,
.session-presenter {
  display: block;
}

.session-title,
.time-slot {
  margin: 0;
  font-size: 1em;
}

.session-title a {
  color:black;
  font-size:14.0pt;
  font-family:Arial, sans-serif;
  font-weight: bold;

  &:hover {
    font-style: italic;
  }

  &:focus {
    outline: 2px dotted rgba(255,255,255,.8);
  }
}

.track-slot,
.time-slot {
  color:black;
  font-size: 1em;
  font-family:Arial, sans-serif;
}

.track-1 {
  background-color: #fc9d9d;
  color: #000;
}

.track-2 {
  background-color: #48beff;
  color: #000;
}

.track-3 {
  background-color: #fe6d73;
  color: #000;
}

.track-4 {
  background-color: #bf8f00;
  color: #000;
}

.track-5 {
  background-color: #fabf8f;
  color: #000;
}

.track-6 {
  background-color: #ebfff4;
  color: #000;
}

.track-7 {
  background-color: #ebfff4;
  color: #000;
}

.track-all {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccc;
  color: #000;
  box-shadow: none;
}

.text {
  max-width: 750px;
  font-size: 18px;
  margin: 0 auto 50px;
}

.meta {
  color: #555;
  font-style: italic;
}

.meta a {
  color: #555;
}

hr {
  margin: 0px 0;
}