/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format("woff2"); }

.material-icons {
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  direction: ltr;
  display: inline-block;
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal; }

h1, h2, h3, h4, h5, h6 {
  color: #202124;
  font-family: "Google Sans", arial, sans-serif;
  margin: 0; }

h1,
.h1 {
  font-size: 36px;
  line-height: 44px;
  font-weight: 400; }

h2,
.h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400; }
  @media screen and (min-width: 600px) {
    h2,
    .h2 {
      font-size: 32px;
      line-height: 40px;
      font-weight: 400; } }

h3,
.h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400; }
  @media screen and (min-width: 600px) {
    h3,
    .h3 {
      font-size: 28px;
      line-height: 36px;
      font-weight: 400; } }

h4,
.h4 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400; }
  @media screen and (min-width: 600px) {
    h4,
    .h4 {
      font-size: 24px;
      line-height: 32px;
      font-weight: 400; } }

h5,
.h5 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400; }
  @media screen and (min-width: 600px) {
    h5,
    .h5 {
      font-size: 22px;
      line-height: 28px;
      font-weight: 400; } }

h6,
.h6 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400; }

.d1, .d2, .d3 {
  color: #202124;
  font-family: "Google Sans Display", arial, sans-serif; }

.d1 {
  font-size: 64px;
  line-height: 76px;
  font-weight: 400; }

.d2 {
  font-size: 56px;
  line-height: 64px;
  font-weight: 400; }

.d3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 400; }
  @media screen and (min-width: 600px) {
    .d3 {
      font-size: 44px;
      line-height: 52px;
      font-weight: 400; } }

.subhead-1, .subhead-2 {
  color: #3C4043;
  font-family: "Google Sans", arial, sans-serif;
  font-weight: 500; }

.subhead-1 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.1px; }

.subhead-2 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.25px; }

.subtitle-1 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.2px; }

.subtitle-2 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.25px; }
  @media screen and (min-width: 600px) {
    .subtitle-2 {
      font-size: 16px;
      line-height: 22px;
      font-weight: 400;
      letter-spacing: 0.1px; } }

.overline {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  font-family: "Roboto", arial, sans-serif;
  color: #3C4043;
  letter-spacing: 0.8px;
  text-transform: uppercase; }

.caption {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #202124;
  font-family: "Roboto", arial, sans-serif;
  letter-spacing: 0.3px; }

a,
.link {
  font-size: inherit;
  line-height: 16px;
  font-weight: 500;
  color: #1A73E8;
  cursor: pointer;
  letter-spacing: .25px;
  text-decoration: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 16px;
  max-width: 100%; }
  @media screen and (min-width: 600px) {
    .grid {
      grid-column-gap: 40px; } }
  @media screen and (min-width: 1024px) {
    .grid {
      grid-template-columns: repeat(12, 1fr);
      grid-column-gap: 20px; } }
  @media screen and (min-width: 1280px) {
    .grid {
      grid-column-gap: 28px; } }
  .grid > * {
    grid-column: span 4; }
    @media screen and (min-width: 1024px) {
      .grid > * {
        grid-column: span 12; } }

.col-offset-0.col-1 {
  grid-column: 1 / span 1; }
  @media screen and (min-width: 1024px) {
    .col-offset-0.col-1 {
      grid-column: 3 / span 3; } }

.col-offset-1.col-1 {
  grid-column: 2 / span 1; }
  @media screen and (min-width: 1024px) {
    .col-offset-1.col-1 {
      grid-column: 6 / span 3; } }

.col-offset-2.col-1 {
  grid-column: 3 / span 1; }
  @media screen and (min-width: 1024px) {
    .col-offset-2.col-1 {
      grid-column: 9 / span 3; } }

.col-offset-3.col-1 {
  grid-column: 4 / span 1; }
  @media screen and (min-width: 1024px) {
    .col-offset-3.col-1 {
      grid-column: 12 / span 3; } }

.col-1 {
  grid-column-start: span 1; }
  @media screen and (min-width: 1024px) {
    .col-1 {
      grid-column-start: span 3; } }

.col-offset-0.col-2 {
  grid-column: 1 / span 2; }
  @media screen and (min-width: 1024px) {
    .col-offset-0.col-2 {
      grid-column: 3 / span 6; } }

.col-offset-1.col-2 {
  grid-column: 2 / span 2; }
  @media screen and (min-width: 1024px) {
    .col-offset-1.col-2 {
      grid-column: 6 / span 6; } }

.col-offset-2.col-2 {
  grid-column: 3 / span 2; }
  @media screen and (min-width: 1024px) {
    .col-offset-2.col-2 {
      grid-column: 9 / span 6; } }

.col-offset-3.col-2 {
  grid-column: 4 / span 2; }
  @media screen and (min-width: 1024px) {
    .col-offset-3.col-2 {
      grid-column: 12 / span 6; } }

.col-2 {
  grid-column-start: span 2; }
  @media screen and (min-width: 1024px) {
    .col-2 {
      grid-column-start: span 6; } }

.col-offset-0.col-3 {
  grid-column: 1 / span 3; }
  @media screen and (min-width: 1024px) {
    .col-offset-0.col-3 {
      grid-column: 3 / span 9; } }

.col-offset-1.col-3 {
  grid-column: 2 / span 3; }
  @media screen and (min-width: 1024px) {
    .col-offset-1.col-3 {
      grid-column: 6 / span 9; } }

.col-offset-2.col-3 {
  grid-column: 3 / span 3; }
  @media screen and (min-width: 1024px) {
    .col-offset-2.col-3 {
      grid-column: 9 / span 9; } }

.col-offset-3.col-3 {
  grid-column: 4 / span 3; }
  @media screen and (min-width: 1024px) {
    .col-offset-3.col-3 {
      grid-column: 12 / span 9; } }

.col-3 {
  grid-column-start: span 3; }
  @media screen and (min-width: 1024px) {
    .col-3 {
      grid-column-start: span 9; } }

.col-offset-0.col-4 {
  grid-column: 1 / span 4; }
  @media screen and (min-width: 1024px) {
    .col-offset-0.col-4 {
      grid-column: 3 / span 12; } }

.col-offset-1.col-4 {
  grid-column: 2 / span 4; }
  @media screen and (min-width: 1024px) {
    .col-offset-1.col-4 {
      grid-column: 6 / span 12; } }

.col-offset-2.col-4 {
  grid-column: 3 / span 4; }
  @media screen and (min-width: 1024px) {
    .col-offset-2.col-4 {
      grid-column: 9 / span 12; } }

.col-offset-3.col-4 {
  grid-column: 4 / span 4; }
  @media screen and (min-width: 1024px) {
    .col-offset-3.col-4 {
      grid-column: 12 / span 12; } }

.col-4 {
  grid-column-start: span 4; }
  @media screen and (min-width: 1024px) {
    .col-4 {
      grid-column-start: span 12; } }

@media screen and (min-width: 600px) {
  .col-offset-0-md.col-1-md {
    grid-column: 1 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-md.col-1-md {
    grid-column: 3 / span 3; } }

@media screen and (min-width: 600px) {
  .col-offset-1-md.col-1-md {
    grid-column: 2 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-md.col-1-md {
    grid-column: 6 / span 3; } }

@media screen and (min-width: 600px) {
  .col-offset-2-md.col-1-md {
    grid-column: 3 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-md.col-1-md {
    grid-column: 9 / span 3; } }

@media screen and (min-width: 600px) {
  .col-offset-3-md.col-1-md {
    grid-column: 4 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-md.col-1-md {
    grid-column: 12 / span 3; } }

@media screen and (min-width: 600px) {
  .col-1-md {
    grid-column-start: span 1; } }

@media screen and (min-width: 1024px) {
  .col-1-md {
    grid-column-start: span 3; } }

@media screen and (min-width: 600px) {
  .col-offset-0-md.col-2-md {
    grid-column: 1 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-md.col-2-md {
    grid-column: 3 / span 6; } }

@media screen and (min-width: 600px) {
  .col-offset-1-md.col-2-md {
    grid-column: 2 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-md.col-2-md {
    grid-column: 6 / span 6; } }

@media screen and (min-width: 600px) {
  .col-offset-2-md.col-2-md {
    grid-column: 3 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-md.col-2-md {
    grid-column: 9 / span 6; } }

@media screen and (min-width: 600px) {
  .col-offset-3-md.col-2-md {
    grid-column: 4 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-md.col-2-md {
    grid-column: 12 / span 6; } }

@media screen and (min-width: 600px) {
  .col-2-md {
    grid-column-start: span 2; } }

@media screen and (min-width: 1024px) {
  .col-2-md {
    grid-column-start: span 6; } }

@media screen and (min-width: 600px) {
  .col-offset-0-md.col-3-md {
    grid-column: 1 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-md.col-3-md {
    grid-column: 3 / span 9; } }

@media screen and (min-width: 600px) {
  .col-offset-1-md.col-3-md {
    grid-column: 2 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-md.col-3-md {
    grid-column: 6 / span 9; } }

@media screen and (min-width: 600px) {
  .col-offset-2-md.col-3-md {
    grid-column: 3 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-md.col-3-md {
    grid-column: 9 / span 9; } }

@media screen and (min-width: 600px) {
  .col-offset-3-md.col-3-md {
    grid-column: 4 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-md.col-3-md {
    grid-column: 12 / span 9; } }

@media screen and (min-width: 600px) {
  .col-3-md {
    grid-column-start: span 3; } }

@media screen and (min-width: 1024px) {
  .col-3-md {
    grid-column-start: span 9; } }

@media screen and (min-width: 600px) {
  .col-offset-0-md.col-4-md {
    grid-column: 1 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-md.col-4-md {
    grid-column: 3 / span 12; } }

@media screen and (min-width: 600px) {
  .col-offset-1-md.col-4-md {
    grid-column: 2 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-md.col-4-md {
    grid-column: 6 / span 12; } }

@media screen and (min-width: 600px) {
  .col-offset-2-md.col-4-md {
    grid-column: 3 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-md.col-4-md {
    grid-column: 9 / span 12; } }

@media screen and (min-width: 600px) {
  .col-offset-3-md.col-4-md {
    grid-column: 4 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-md.col-4-md {
    grid-column: 12 / span 12; } }

@media screen and (min-width: 600px) {
  .col-4-md {
    grid-column-start: span 4; } }

@media screen and (min-width: 1024px) {
  .col-4-md {
    grid-column-start: span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-1-lg {
    grid-column: 1 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-1-lg {
    grid-column: 2 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-1-lg {
    grid-column: 3 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-1-lg {
    grid-column: 4 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-1-lg {
    grid-column: 5 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-1-lg {
    grid-column: 6 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-1-lg {
    grid-column: 7 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-1-lg {
    grid-column: 8 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-1-lg {
    grid-column: 9 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-1-lg {
    grid-column: 10 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-1-lg {
    grid-column: 11 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-1-lg {
    grid-column: 12 / span 1; } }

@media screen and (min-width: 1024px) {
  .col-1-lg {
    grid-column-start: span 1; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-2-lg {
    grid-column: 1 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-2-lg {
    grid-column: 2 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-2-lg {
    grid-column: 3 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-2-lg {
    grid-column: 4 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-2-lg {
    grid-column: 5 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-2-lg {
    grid-column: 6 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-2-lg {
    grid-column: 7 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-2-lg {
    grid-column: 8 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-2-lg {
    grid-column: 9 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-2-lg {
    grid-column: 10 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-2-lg {
    grid-column: 11 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-2-lg {
    grid-column: 12 / span 2; } }

@media screen and (min-width: 1024px) {
  .col-2-lg {
    grid-column-start: span 2; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-3-lg {
    grid-column: 1 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-3-lg {
    grid-column: 2 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-3-lg {
    grid-column: 3 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-3-lg {
    grid-column: 4 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-3-lg {
    grid-column: 5 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-3-lg {
    grid-column: 6 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-3-lg {
    grid-column: 7 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-3-lg {
    grid-column: 8 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-3-lg {
    grid-column: 9 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-3-lg {
    grid-column: 10 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-3-lg {
    grid-column: 11 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-3-lg {
    grid-column: 12 / span 3; } }

@media screen and (min-width: 1024px) {
  .col-3-lg {
    grid-column-start: span 3; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-4-lg {
    grid-column: 1 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-4-lg {
    grid-column: 2 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-4-lg {
    grid-column: 3 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-4-lg {
    grid-column: 4 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-4-lg {
    grid-column: 5 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-4-lg {
    grid-column: 6 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-4-lg {
    grid-column: 7 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-4-lg {
    grid-column: 8 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-4-lg {
    grid-column: 9 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-4-lg {
    grid-column: 10 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-4-lg {
    grid-column: 11 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-4-lg {
    grid-column: 12 / span 4; } }

@media screen and (min-width: 1024px) {
  .col-4-lg {
    grid-column-start: span 4; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-5-lg {
    grid-column: 1 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-5-lg {
    grid-column: 2 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-5-lg {
    grid-column: 3 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-5-lg {
    grid-column: 4 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-5-lg {
    grid-column: 5 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-5-lg {
    grid-column: 6 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-5-lg {
    grid-column: 7 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-5-lg {
    grid-column: 8 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-5-lg {
    grid-column: 9 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-5-lg {
    grid-column: 10 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-5-lg {
    grid-column: 11 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-5-lg {
    grid-column: 12 / span 5; } }

@media screen and (min-width: 1024px) {
  .col-5-lg {
    grid-column-start: span 5; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-6-lg {
    grid-column: 1 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-6-lg {
    grid-column: 2 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-6-lg {
    grid-column: 3 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-6-lg {
    grid-column: 4 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-6-lg {
    grid-column: 5 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-6-lg {
    grid-column: 6 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-6-lg {
    grid-column: 7 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-6-lg {
    grid-column: 8 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-6-lg {
    grid-column: 9 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-6-lg {
    grid-column: 10 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-6-lg {
    grid-column: 11 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-6-lg {
    grid-column: 12 / span 6; } }

@media screen and (min-width: 1024px) {
  .col-6-lg {
    grid-column-start: span 6; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-7-lg {
    grid-column: 1 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-7-lg {
    grid-column: 2 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-7-lg {
    grid-column: 3 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-7-lg {
    grid-column: 4 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-7-lg {
    grid-column: 5 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-7-lg {
    grid-column: 6 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-7-lg {
    grid-column: 7 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-7-lg {
    grid-column: 8 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-7-lg {
    grid-column: 9 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-7-lg {
    grid-column: 10 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-7-lg {
    grid-column: 11 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-7-lg {
    grid-column: 12 / span 7; } }

@media screen and (min-width: 1024px) {
  .col-7-lg {
    grid-column-start: span 7; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-8-lg {
    grid-column: 1 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-8-lg {
    grid-column: 2 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-8-lg {
    grid-column: 3 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-8-lg {
    grid-column: 4 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-8-lg {
    grid-column: 5 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-8-lg {
    grid-column: 6 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-8-lg {
    grid-column: 7 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-8-lg {
    grid-column: 8 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-8-lg {
    grid-column: 9 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-8-lg {
    grid-column: 10 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-8-lg {
    grid-column: 11 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-8-lg {
    grid-column: 12 / span 8; } }

@media screen and (min-width: 1024px) {
  .col-8-lg {
    grid-column-start: span 8; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-9-lg {
    grid-column: 1 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-9-lg {
    grid-column: 2 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-9-lg {
    grid-column: 3 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-9-lg {
    grid-column: 4 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-9-lg {
    grid-column: 5 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-9-lg {
    grid-column: 6 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-9-lg {
    grid-column: 7 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-9-lg {
    grid-column: 8 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-9-lg {
    grid-column: 9 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-9-lg {
    grid-column: 10 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-9-lg {
    grid-column: 11 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-9-lg {
    grid-column: 12 / span 9; } }

@media screen and (min-width: 1024px) {
  .col-9-lg {
    grid-column-start: span 9; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-10-lg {
    grid-column: 1 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-10-lg {
    grid-column: 2 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-10-lg {
    grid-column: 3 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-10-lg {
    grid-column: 4 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-10-lg {
    grid-column: 5 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-10-lg {
    grid-column: 6 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-10-lg {
    grid-column: 7 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-10-lg {
    grid-column: 8 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-10-lg {
    grid-column: 9 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-10-lg {
    grid-column: 10 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-10-lg {
    grid-column: 11 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-10-lg {
    grid-column: 12 / span 10; } }

@media screen and (min-width: 1024px) {
  .col-10-lg {
    grid-column-start: span 10; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-11-lg {
    grid-column: 1 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-11-lg {
    grid-column: 2 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-11-lg {
    grid-column: 3 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-11-lg {
    grid-column: 4 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-11-lg {
    grid-column: 5 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-11-lg {
    grid-column: 6 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-11-lg {
    grid-column: 7 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-11-lg {
    grid-column: 8 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-11-lg {
    grid-column: 9 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-11-lg {
    grid-column: 10 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-11-lg {
    grid-column: 11 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-11-lg {
    grid-column: 12 / span 11; } }

@media screen and (min-width: 1024px) {
  .col-11-lg {
    grid-column-start: span 11; } }

@media screen and (min-width: 1024px) {
  .col-offset-0-lg.col-12-lg {
    grid-column: 1 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-1-lg.col-12-lg {
    grid-column: 2 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-2-lg.col-12-lg {
    grid-column: 3 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-3-lg.col-12-lg {
    grid-column: 4 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-4-lg.col-12-lg {
    grid-column: 5 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-5-lg.col-12-lg {
    grid-column: 6 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-6-lg.col-12-lg {
    grid-column: 7 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-7-lg.col-12-lg {
    grid-column: 8 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-8-lg.col-12-lg {
    grid-column: 9 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-9-lg.col-12-lg {
    grid-column: 10 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-10-lg.col-12-lg {
    grid-column: 11 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-offset-11-lg.col-12-lg {
    grid-column: 12 / span 12; } }

@media screen and (min-width: 1024px) {
  .col-12-lg {
    grid-column-start: span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-1-xl {
    grid-column: 1 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-1-xl {
    grid-column: 2 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-1-xl {
    grid-column: 3 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-1-xl {
    grid-column: 4 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-1-xl {
    grid-column: 5 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-1-xl {
    grid-column: 6 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-1-xl {
    grid-column: 7 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-1-xl {
    grid-column: 8 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-1-xl {
    grid-column: 9 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-1-xl {
    grid-column: 10 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-1-xl {
    grid-column: 11 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-1-xl {
    grid-column: 12 / span 1; } }

@media screen and (min-width: 1280px) {
  .col-1-xl {
    grid-column-start: span 1; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-2-xl {
    grid-column: 1 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-2-xl {
    grid-column: 2 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-2-xl {
    grid-column: 3 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-2-xl {
    grid-column: 4 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-2-xl {
    grid-column: 5 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-2-xl {
    grid-column: 6 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-2-xl {
    grid-column: 7 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-2-xl {
    grid-column: 8 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-2-xl {
    grid-column: 9 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-2-xl {
    grid-column: 10 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-2-xl {
    grid-column: 11 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-2-xl {
    grid-column: 12 / span 2; } }

@media screen and (min-width: 1280px) {
  .col-2-xl {
    grid-column-start: span 2; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-3-xl {
    grid-column: 1 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-3-xl {
    grid-column: 2 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-3-xl {
    grid-column: 3 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-3-xl {
    grid-column: 4 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-3-xl {
    grid-column: 5 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-3-xl {
    grid-column: 6 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-3-xl {
    grid-column: 7 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-3-xl {
    grid-column: 8 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-3-xl {
    grid-column: 9 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-3-xl {
    grid-column: 10 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-3-xl {
    grid-column: 11 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-3-xl {
    grid-column: 12 / span 3; } }

@media screen and (min-width: 1280px) {
  .col-3-xl {
    grid-column-start: span 3; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-4-xl {
    grid-column: 1 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-4-xl {
    grid-column: 2 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-4-xl {
    grid-column: 3 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-4-xl {
    grid-column: 4 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-4-xl {
    grid-column: 5 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-4-xl {
    grid-column: 6 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-4-xl {
    grid-column: 7 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-4-xl {
    grid-column: 8 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-4-xl {
    grid-column: 9 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-4-xl {
    grid-column: 10 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-4-xl {
    grid-column: 11 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-4-xl {
    grid-column: 12 / span 4; } }

@media screen and (min-width: 1280px) {
  .col-4-xl {
    grid-column-start: span 4; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-5-xl {
    grid-column: 1 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-5-xl {
    grid-column: 2 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-5-xl {
    grid-column: 3 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-5-xl {
    grid-column: 4 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-5-xl {
    grid-column: 5 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-5-xl {
    grid-column: 6 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-5-xl {
    grid-column: 7 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-5-xl {
    grid-column: 8 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-5-xl {
    grid-column: 9 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-5-xl {
    grid-column: 10 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-5-xl {
    grid-column: 11 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-5-xl {
    grid-column: 12 / span 5; } }

@media screen and (min-width: 1280px) {
  .col-5-xl {
    grid-column-start: span 5; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-6-xl {
    grid-column: 1 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-6-xl {
    grid-column: 2 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-6-xl {
    grid-column: 3 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-6-xl {
    grid-column: 4 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-6-xl {
    grid-column: 5 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-6-xl {
    grid-column: 6 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-6-xl {
    grid-column: 7 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-6-xl {
    grid-column: 8 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-6-xl {
    grid-column: 9 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-6-xl {
    grid-column: 10 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-6-xl {
    grid-column: 11 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-6-xl {
    grid-column: 12 / span 6; } }

@media screen and (min-width: 1280px) {
  .col-6-xl {
    grid-column-start: span 6; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-7-xl {
    grid-column: 1 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-7-xl {
    grid-column: 2 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-7-xl {
    grid-column: 3 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-7-xl {
    grid-column: 4 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-7-xl {
    grid-column: 5 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-7-xl {
    grid-column: 6 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-7-xl {
    grid-column: 7 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-7-xl {
    grid-column: 8 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-7-xl {
    grid-column: 9 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-7-xl {
    grid-column: 10 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-7-xl {
    grid-column: 11 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-7-xl {
    grid-column: 12 / span 7; } }

@media screen and (min-width: 1280px) {
  .col-7-xl {
    grid-column-start: span 7; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-8-xl {
    grid-column: 1 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-8-xl {
    grid-column: 2 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-8-xl {
    grid-column: 3 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-8-xl {
    grid-column: 4 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-8-xl {
    grid-column: 5 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-8-xl {
    grid-column: 6 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-8-xl {
    grid-column: 7 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-8-xl {
    grid-column: 8 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-8-xl {
    grid-column: 9 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-8-xl {
    grid-column: 10 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-8-xl {
    grid-column: 11 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-8-xl {
    grid-column: 12 / span 8; } }

@media screen and (min-width: 1280px) {
  .col-8-xl {
    grid-column-start: span 8; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-9-xl {
    grid-column: 1 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-9-xl {
    grid-column: 2 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-9-xl {
    grid-column: 3 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-9-xl {
    grid-column: 4 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-9-xl {
    grid-column: 5 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-9-xl {
    grid-column: 6 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-9-xl {
    grid-column: 7 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-9-xl {
    grid-column: 8 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-9-xl {
    grid-column: 9 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-9-xl {
    grid-column: 10 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-9-xl {
    grid-column: 11 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-9-xl {
    grid-column: 12 / span 9; } }

@media screen and (min-width: 1280px) {
  .col-9-xl {
    grid-column-start: span 9; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-10-xl {
    grid-column: 1 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-10-xl {
    grid-column: 2 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-10-xl {
    grid-column: 3 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-10-xl {
    grid-column: 4 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-10-xl {
    grid-column: 5 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-10-xl {
    grid-column: 6 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-10-xl {
    grid-column: 7 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-10-xl {
    grid-column: 8 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-10-xl {
    grid-column: 9 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-10-xl {
    grid-column: 10 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-10-xl {
    grid-column: 11 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-10-xl {
    grid-column: 12 / span 10; } }

@media screen and (min-width: 1280px) {
  .col-10-xl {
    grid-column-start: span 10; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-11-xl {
    grid-column: 1 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-11-xl {
    grid-column: 2 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-11-xl {
    grid-column: 3 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-11-xl {
    grid-column: 4 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-11-xl {
    grid-column: 5 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-11-xl {
    grid-column: 6 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-11-xl {
    grid-column: 7 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-11-xl {
    grid-column: 8 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-11-xl {
    grid-column: 9 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-11-xl {
    grid-column: 10 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-11-xl {
    grid-column: 11 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-11-xl {
    grid-column: 12 / span 11; } }

@media screen and (min-width: 1280px) {
  .col-11-xl {
    grid-column-start: span 11; } }

@media screen and (min-width: 1280px) {
  .col-offset-0-xl.col-12-xl {
    grid-column: 1 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-1-xl.col-12-xl {
    grid-column: 2 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-2-xl.col-12-xl {
    grid-column: 3 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-3-xl.col-12-xl {
    grid-column: 4 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-4-xl.col-12-xl {
    grid-column: 5 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-5-xl.col-12-xl {
    grid-column: 6 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-6-xl.col-12-xl {
    grid-column: 7 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-7-xl.col-12-xl {
    grid-column: 8 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-8-xl.col-12-xl {
    grid-column: 9 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-9-xl.col-12-xl {
    grid-column: 10 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-10-xl.col-12-xl {
    grid-column: 11 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-offset-11-xl.col-12-xl {
    grid-column: 12 / span 12; } }

@media screen and (min-width: 1280px) {
  .col-12-xl {
    grid-column-start: span 12; } }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%; }

body {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background: #FFFFFF;
  color: #3C4043;
  font-family: "Google Sans", arial, sans-serif;
  letter-spacing: 0.1px;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch; }

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

#app {
  background: #FFFFFF; }

.appWrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px; }
  @media screen and (min-width: 600px) {
    .appWrapper {
      padding: 0 60px; } }
  @media screen and (min-width: 1024px) {
    .appWrapper {
      padding: 0 40px; } }
  @media screen and (min-width: 1280px) {
    .appWrapper {
      padding: 0 80px; } }

.appWrapperLive {
  padding: 0 16px; }
  @media screen and (min-width: 600px) {
    .appWrapperLive {
      padding: 0 60px; } }
  @media screen and (min-width: 1024px) {
    .appWrapperLive {
      padding: 0 40px; } }
  @media screen and (min-width: 1280px) {
    .appWrapperLive {
      padding: 0 80px; } }

.page {
  padding-top: 100px; }
  @media screen and (min-width: 600px) {
    .page {
      padding-top: 212px; } }

.liveExperiencePage {
  padding-top: 64px;
  min-height: 100vh; }
  @media screen and (min-width: 800px) {
    .liveExperiencePage {
      padding-top: 0; } }

button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer; }

a {
  cursor: pointer; }
  a:active {
    color: #3C4043; }

ul.reset,
ol.reset {
  list-style: none;
  margin: 0;
  padding: 0; }

p.reset {
  margin: 0; }

img,
svg {
  height: auto;
  max-width: 100%; }

svg {
  vector-effect: non-scaling-stroke; }

.hiddenLtTablet {
  display: none !important; }
  @media screen and (min-width: 600px) {
    .hiddenLtTablet {
      display: inherit !important; } }

@media screen and (min-width: 600px) {
  .hiddenGtTablet {
    display: none !important; } }

.hiddenLtDesktop {
  display: none !important; }
  @media screen and (min-width: 1024px) {
    .hiddenLtDesktop {
      display: inherit !important; } }

@media screen and (min-width: 1024px) {
  .hiddenGtDesktop {
    display: none !important; } }

.hiddenLtDesktopLarge {
  display: none !important; }
  @media screen and (min-width: 1280px) {
    .hiddenLtDesktopLarge {
      display: inherit !important; } }

@media screen and (min-width: 1280px) {
  .hiddenGtDesktopLarge {
    display: none !important; } }

.svg-hidden-defs {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0; }

ul.default-whitespace {
  margin: 0;
  white-space: initial; }

.full-bleed {
  margin-left: -200%;
  margin-right: -200%;
  padding-left: 200%;
  padding-right: 200%; }

@media screen and (min-width: 1024px) {
  .full-bleed-desktop {
    margin-left: -200%;
    margin-right: -200%;
    padding-left: 200%;
    padding-right: 200%; } }

.full-bleed-exact {
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + (2 * 16px)); }
  @media screen and (min-width: 600px) {
    .full-bleed-exact {
      margin-left: -60px;
      margin-right: -60px;
      width: calc(100% + (2 * 60px)); } }
  @media screen and (min-width: 1024px) {
    .full-bleed-exact {
      margin-left: -40px;
      margin-right: -40px;
      width: calc(100% + (2 * 40px)); } }
  @media screen and (min-width: 1280px) {
    .full-bleed-exact {
      margin-left: -80px;
      margin-right: -80px;
      width: calc(100% + (2 * 80px)); } }

.full-bleed-grey {
  margin-left: -200%;
  margin-right: -200%;
  padding-left: 200%;
  padding-right: 200%;
  background-color: #F8F9FA;
  position: relative; }
  .full-bleed-grey > * {
    position: relative; }
  .full-bleed-grey::before {
    background-color: #F8F9FA;
    bottom: 0;
    content: '';
    left: -50vw;
    position: absolute;
    right: -50vw;
    top: 0; }

.max-width {
  margin: 0 auto;
  max-width: 1440px;
  position: relative; }

@media screen and (min-width: 400px) {
  br.mobile-break {
    display: none; } }

.attendingInfoAirports > div {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 16px; }
  .attendingInfoAirports > div h4 {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%; }
  .attendingInfoAirports > div h6 {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%; }
  .attendingInfoAirports > div a {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    font-size: 14px;
    margin-left: 24px; }

.attendingInfoTransport > div {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 8px; }

.attendingInfoTransport a {
  font-size: 14px;
  margin-right: 12px; }

.attendingInfoRidesharing {
  margin-top: 32px; }
  .attendingInfoRidesharing b[role=heading] {
    display: block;
    margin-bottom: 6px; }
  .attendingInfoRidesharing > div {
    margin-bottom: 24px; }
    @media screen and (min-width: 600px) {
      .attendingInfoRidesharing > div {
        max-width: 441px; } }
    .attendingInfoRidesharing > div:not(:last-child) {
      margin-bottom: 24px; }
  .attendingInfoRidesharing b {
    color: #3C4043;
    font-weight: 500;
    letter-spacing: 0.1px;
    margin-bottom: 8px; }

.googlemap__infowindow {
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  font-family: "Google Sans", arial, sans-serif;
  max-width: 230px; }
  @media screen and (min-width: 600px) {
    .googlemap__infowindow {
      font-size: 18px;
      line-height: 30px;
      font-weight: 500;
      padding: 12px;
      max-width: none; } }
  .googlemap__infowindow a:empty {
    display: none; }
  .googlemap__infowindow .googlemap__infowindow-title {
    margin-bottom: 8px; }
  .googlemap__infowindow .googlemap__infowindow-link {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    margin-bottom: 8px; }
    @media screen and (min-width: 600px) {
      .googlemap__infowindow .googlemap__infowindow-link {
        font-size: 14px;
        line-height: 16px;
        font-weight: 400; } }

.sessionItemCard {
  background: #FFFFFF;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 24px;
  min-height: 220px;
  padding: 20px;
  width: 390px; }

.ioMapTagMarker {
  background: #4285F4;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: "Roboto Mono", arial, sans-serif;
  font-size: 13px;
  letter-spacing: -.8px;
  padding: 6px 8px;
  text-align: center;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  -webkit-transition: font-size 250ms linear;
  transition: font-size 250ms linear; }
  .ioMapTagMarker:hover {
    z-index: 1000; }
  .ioMapTagMarker.hidden {
    opacity: 0;
    pointer-events: none; }

.ioMapInfoWindow {
  background: #FFFFFF;
  padding: 4px 16px 0 0;
  max-width: 382px;
  border-radius: 8px;
  font-family: "Google Sans", arial, sans-serif; }
  .ioMapInfoWindow p {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400; }

.gm-style .gm-ui-hover-effect {
  top: 0 !important;
  right: 0 !important; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.button__KMwXw {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-family: "Google Sans", arial, sans-serif;
  height: auto;
  padding: 10px 24px;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  width: auto; }
  .button__KMwXw:focus {
    outline: none; }
  .button__KMwXw.disabled__2A-3W {
    color: rgba(60, 64, 67, 0.38);
    cursor: default; }

.buttonWithIcon__32y_i {
  padding-left: 12px;
  padding-right: 16px; }

.buttonIcon__3nJrK {
  font-size: 18px;
  margin-right: 8px;
  position: relative;
  vertical-align: middle; }

.buttonFill__8D3XL {
  background-color: #1A73E8;
  color: #FFFFFF; }
  .buttonFill__8D3XL:not(.disabled__2A-3W):visited {
    color: #FFFFFF; }
  .buttonFill__8D3XL:not(.disabled__2A-3W):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
            box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
    background-color: #247AEC; }
  .buttonFill__8D3XL:not(.disabled__2A-3W):focus {
    -webkit-box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
            box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
    background-color: #4C92F0; }
  .buttonFill__8D3XL:not(.disabled__2A-3W):hover:focus {
    -webkit-box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
            box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
    background-color: #609EF2; }
  .buttonFill__8D3XL:not(.disabled__2A-3W):active, .buttonFill__8D3XL:not(.disabled__2A-3W):active:hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 2px 6px 2px rgba(66, 133, 244, 0.15);
            box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 2px 6px 2px rgba(66, 133, 244, 0.15);
    background-color: #609EF2;
    color: #FFFFFF; }
  .buttonFill__8D3XL.disabled__2A-3W {
    background-color: rgba(241, 243, 244, 0.38); }

.buttonHairline__1ALC8 {
  border: 1px solid #DADCE0;
  background-color: transparent;
  color: #1A73E8;
  padding-bottom: calc(10px - 1px);
  padding-top: calc(10px - 1px); }
  .buttonHairline__1ALC8:not(.disabled__2A-3W):visited {
    color: #1A73E8; }
  .buttonHairline__1ALC8:not(.disabled__2A-3W):hover {
    border-color: #D2E3FC;
    background-color: #FCFDFF; }
  .buttonHairline__1ALC8:not(.disabled__2A-3W):focus, .buttonHairline__1ALC8:not(.disabled__2A-3W):hover:focus {
    background-color: #F4F8FF; }
  .buttonHairline__1ALC8:not(.disabled__2A-3W):active, .buttonHairline__1ALC8:not(.disabled__2A-3W):active:hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    border-color: #ECF3FE;
    background-color: #ECF3FE;
    color: #1A73E8; }
  .buttonHairline__1ALC8:not(.disabled__2A-3W).toggled__1f6sO {
    border-color: #ECF3FE;
    background-color: #ECF3FE;
    color: #1A73E8; }
  .buttonHairline__1ALC8.disabled__2A-3W {
    border-color: #F1F3F4; }

.buttonProtected__1p7ud {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
          box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  background-color: #FFFFFF;
  color: #1A73E8; }
  .buttonProtected__1p7ud:not(.disabled__2A-3W):visited {
    color: #1A73E8; }
  .buttonProtected__1p7ud:not(.disabled__2A-3W):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    background-color: #FCFDFF; }
  .buttonProtected__1p7ud:not(.disabled__2A-3W):focus, .buttonProtected__1p7ud:not(.disabled__2A-3W):hover:focus {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    background-color: #F4F8FF; }
  .buttonProtected__1p7ud:not(.disabled__2A-3W):active, .buttonProtected__1p7ud:not(.disabled__2A-3W):active:hover {
    -webkit-box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    background-color: #ECF3FE;
    color: #1A73E8; }
  .buttonProtected__1p7ud:not(.disabled__2A-3W).toggled__1f6sO {
    background-color: #ECF3FE;
    color: #1A73E8; }
  .buttonProtected__1p7ud.disabled__2A-3W {
    -webkit-box-shadow: none;
            box-shadow: none;
    background-color: rgba(241, 243, 244, 0.38); }

.buttonText__mJa1Q {
  background-color: transparent;
  color: #1A73E8;
  padding-left: 8px;
  padding-right: 8px; }
  .buttonText__mJa1Q:not(.disabled__2A-3W):visited {
    color: #1A73E8; }
  .buttonText__mJa1Q:not(.disabled__2A-3W):hover {
    background-color: #FCFDFF; }
  .buttonText__mJa1Q:not(.disabled__2A-3W):focus, .buttonText__mJa1Q:not(.disabled__2A-3W):hover:focus {
    background-color: #F4F8FF; }
  .buttonText__mJa1Q:not(.disabled__2A-3W):active, .buttonText__mJa1Q:not(.disabled__2A-3W):active:hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    background-color: #ECF3FE;
    color: #1A73E8; }
  .buttonText__mJa1Q:not(.disabled__2A-3W).toggled__1f6sO {
    background-color: #ECF3FE;
    color: #1A73E8; }
  .buttonText__mJa1Q .ButtonWithIcon__XBUN- {
    padding: 8px; }

.buttonTextWhite__1dr3b > span {
  color: #FFFFFF; }

.buttonTextWhite__1dr3b .buttonIcon__3nJrK {
  color: #FFFFFF; }

.buttonTextWhite__1dr3b:not(.disabled__2A-3W):hover, .buttonTextWhite__1dr3b:not(.disabled__2A-3W):focus {
  background-color: rgba(241, 243, 244, 0.2); }


/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.dialog__3JpOz {
  margin: calc(40px - 16px) calc(24px - 16px) calc(24px - 16px); }
  @media screen and (min-width: 1024px) {
    .dialog__3JpOz {
      margin: calc(112px - 16px); } }

@media screen and (max-width: 600px) {
  .withinSheet__399kJ {
    margin: 0; }
    .withinSheet__399kJ h5 {
      margin-bottom: 16px; }
    .withinSheet__399kJ h5 + div {
      margin-bottom: 24px; } }

.heading__2rNUm {
  margin-bottom: 32px; }
  @media screen and (min-width: 1024px) {
    .heading__2rNUm {
      margin-bottom: 24px; } }

.body__1u6Li {
  margin-bottom: 32px; }
  .body__1u6Li > div {
    white-space: normal; }

.actionButtons__28NKM {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

@media screen and (min-width: 1024px) {
  .actionButtonsDouble__D5odH {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; } }

.actionButtonsDouble__D5odH button:first-child {
  margin-right: 24px; }
  @media screen and (min-width: 1024px) {
    .actionButtonsDouble__D5odH button:first-child {
      margin-right: 0;
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; } }

.actionButtonsDouble__D5odH button:nth-child(2) {
  margin-right: 0; }
  @media screen and (min-width: 1024px) {
    .actionButtonsDouble__D5odH button:nth-child(2) {
      margin-right: 24px;
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1; } }

.actionButtonsSingle__1DG2V {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

@media screen and (min-width: 1024px) {
  .actionButtonsMultiple__IDl40 {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; } }

.actionButtonsMultiple__IDl40 button:not(:last-child) {
  margin-right: 24px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.tooltip__1s5Jp {
  font-size: 10px;
  line-height: 1.5;
  font-weight: 500;
  background: #5F6368;
  border-radius: 2px;
  color: #FFFFFF;
  font-family: "Roboto", arial, sans-serif;
  opacity: 0;
  padding: 6px 8px;
  position: fixed;
  text-align: center;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
  visibility: hidden;
  z-index: 10; }

.tooltipActive__1EV8X {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  visibility: visible; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.fab__3aFFB {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-family: "Google Sans", arial, sans-serif;
  height: auto;
  line-height: 0;
  max-width: 60px;
  padding: 16px;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  width: auto; }
  .fab__3aFFB:hover {
    background-color: #FCFDFF; }
  .fab__3aFFB:focus, .fab__3aFFB:hover:focus {
    background-color: #F4F8FF;
    outline: none; }
  .fab__3aFFB:active, .fab__3aFFB:active:hover {
    background-color: #ECF3FE; }

.fabLowered__2rXPw {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
          box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }

.fabRaised__3rXIi {
  -webkit-box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
          box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15); }

.fabDefault__3qTEY {
  color: #757575; }

.fabHighlighted__26z5l {
  color: #1A73E8; }

.fabColored__zedPE {
  -webkit-box-shadow: 0 1px 3px 0 rgba(66, 133, 244, 0.3), 0 4px 8px 3px rgba(66, 133, 244, 0.15);
          box-shadow: 0 1px 3px 0 rgba(66, 133, 244, 0.3), 0 4px 8px 3px rgba(66, 133, 244, 0.15);
  background-color: #1A73E8;
  color: #FFFFFF; }
  .fabColored__zedPE:hover {
    background-color: #247AEC; }
  .fabColored__zedPE:focus, .fabColored__zedPE:hover:focus {
    background-color: #4C92F0;
    outline: none; }
  .fabColored__zedPE:active, .fabColored__zedPE:active:hover {
    background-color: #609EF2; }

.fabCompact__3gktb {
  padding: 8px; }

.fabIcon__38Zs_ {
  position: relative;
  top: -1px;
  vertical-align: middle; }

.fabNotRaised__mnfN_,
.fabFlat__2nhyh {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 8px; }

.disabled__oo__R {
  color: #F1F3F4;
  pointer-events: none; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.userAvatar__3OBE- {
  -ms-flex-line-pack: center;
      align-content: center;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 48px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  width: 48px; }

.userAvatarDesktop__30JJd {
  border: 2px solid #34A853;
  margin-bottom: 16px; }

.signInHeading__PsM_3 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0.1px;
  margin-bottom: 12px;
  max-width: 185px; }

.signInBody__2rEwZ {
  max-width: 300px; }

.signInButtonRow__1m8JN {
  margin-top: 32px; }
  .signInButtonRow__1m8JN button:not(:last-child) {
    margin-right: 16px; }

.userName__1cKa8 {
  margin-bottom: 6px; }

.userEmail__1mSJL {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #80868B;
  font-family: "Roboto", arial, sans-serif; }

.signOutButtonRow__1dR6_ {
  margin-top: 48px; }

.closeButtonRight__30KLA {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 14px; }

.userAvatarMobile__2gBle {
  margin-right: 16px; }

.userInfo__3oEaX {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.signOutButtonRowMobile__qgMF9 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.signOutButtonRowMobile__qgMF9 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.userNameMobile__2KM2- {
  margin-bottom: 0; }

.userEmailMobile__3ew0k {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #80868B;
  font-family: "Roboto", arial, sans-serif; }

.loggedInMessage__oLGnE {
  margin: 32px 0; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.darkUnderlay__17Khf {
  background-color: #000000;
  bottom: 0;
  height: 100vh;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out; }

.darkUnderlayVisible__1qVfJ {
  pointer-events: auto;
  opacity: 0.5; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.modal__16aMA {
  -webkit-overflow-scrolling: touch;
  bottom: 0;
  display: none;
  left: 0;
  overflow-x: hidden;
  overflow-y: visible;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 299; }

.modalDialog__35TUW {
  z-index: 309; }

.modalOpen__2ut82 {
  display: block; }

@media screen and (min-width: 800px) {
  .modalMain__3U5Dg {
    padding: 140px 0 120px; } }

.modalContent__Ln9fE {
  background-color: #FFFFFF;
  padding: 16px;
  position: relative;
  z-index: 301; }
  @media screen and (min-width: 800px) {
    .modalContent__Ln9fE {
      border-radius: 12px;
      height: auto;
      margin: 0 auto;
      max-width: 800px;
      width: 90%; }
      .modalContent__Ln9fE:focus {
        outline: none; } }

.modalContentFullscreen__iomxx {
  background-color: #FFFFFF; }
  @media screen and (min-width: 800px) {
    .modalContentFullscreen__iomxx {
      background-color: initial; } }
  .modalContentFullscreen__iomxx .modalContent__Ln9fE {
    height: 100%;
    min-height: 100vh;
    width: 100%; }
    @media screen and (min-width: 800px) {
      .modalContentFullscreen__iomxx .modalContent__Ln9fE {
        min-height: 0; } }

.modalContentCentered__1UbZk .modalMain__3U5Dg {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.modalContentCentered__1UbZk .modalContent__Ln9fE {
  border-radius: 12px;
  margin: auto 20px;
  width: 100%; }

@media screen and (min-width: 800px) {
  .modalContentCentered__1UbZk {
    max-width: 600px; } }

.modalContentSheet__1L1WS .modalMain__3U5Dg {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.modalContentSheet__1L1WS .modalContent__Ln9fE {
  border-radius: 12px 12px 0 0;
  margin: 0;
  padding: 24px;
  width: 100%; }

.closeButton__14rms,
.backButton__3Ahj7 {
  color: #3C4043;
  padding: 16px;
  position: absolute;
  top: 0; }

.closeButton__14rms {
  right: 0; }

.backButton__3Ahj7 {
  left: 0; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.popup__3ZZg9 {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
          box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  background-color: #FFFFFF;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: calc(100vw - (28px + 16px));
  opacity: 0;
  position: absolute;
  right: -44px;
  text-align: left;
  top: 32px;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
  -webkit-transition: opacity 200ms ease, visibility 200ms ease, -webkit-transform 200ms ease;
  transition: opacity 200ms ease, visibility 200ms ease, -webkit-transform 200ms ease;
  transition: transform 200ms ease, opacity 200ms ease, visibility 200ms ease;
  transition: transform 200ms ease, opacity 200ms ease, visibility 200ms ease, -webkit-transform 200ms ease;
  visibility: hidden;
  width: 390px;
  z-index: 499; }

.popupVisible__k3EUE {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  visibility: visible; }

.arrow__ikO0f {
  background-color: #FFFFFF;
  -webkit-box-shadow: -7px -2px 12px -7px rgba(112, 111, 111, 0.3);
          box-shadow: -7px -2px 12px -7px rgba(112, 111, 111, 0.3);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: ' ';
  display: inline-block;
  height: 32px;
  position: absolute;
  right: 36px;
  top: -11px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 32px;
  z-index: -100; }

.closeButton__1gXyC {
  position: absolute;
  right: -4px;
  top: -4px;
  font-size: 14px; }

.popupContent__vDTd- {
  margin: 48px 36px;
  position: relative; }

.popupParent__esllH {
  cursor: pointer; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.container__3r9b0 {
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; }

.containerDrawerOpen__ILfAL {
  -webkit-transform: translateX(-445px);
          transform: translateX(-445px); }

.authPopupVisible__UBlKu {
  z-index: 309 !important; }

.userAuthButton__Q8fII {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 16px; }
  @media screen and (min-width: 600px) {
    .userAuthButton__Q8fII {
      margin-right: 24px; } }

.userAuthButtonOnDarkBg__1ITZS {
  border-radius: 50%;
  padding: 2px; }

.userImage__3J8A_ {
  border-radius: 50%;
  line-height: 0;
  height: 32px;
  max-width: none;
  vertical-align: middle;
  width: 32px; }

.signInButton__JC_rW {
  white-space: nowrap; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.footer__35eRw {
  font-size: 14px;
  line-height: 30px;
  font-weight: 400;
  padding: 40px 16px 16px;
  position: relative; }
  @media screen and (min-width: 600px) {
    .footer__35eRw {
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      padding: 36px 40px 26px; } }
  @media screen and (min-width: 800px) {
    .footer__35eRw {
      padding-left: 80px;
      padding-right: 80px; } }
  @media screen and (min-width: 1024px) {
    .footer__35eRw {
      padding-left: 160px;
      padding-right: 160px; } }

.footerLogo__1-3E_ {
  line-height: 0;
  margin-bottom: 18px; }
  @media screen and (min-width: 600px) {
    .footerLogo__1-3E_ {
      margin-bottom: 80px; } }
  .footerLogo__1-3E_ svg {
    fill: #5F6368;
    height: 26px;
    width: 81px; }

.footerLinks__1KAMJ {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (min-width: 600px) {
    .footerLinks__1KAMJ {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

@media screen and (min-width: 600px) {
  .footerLink__1E229 {
    margin-right: 32px; } }

.footerLink__1E229 a {
  color: #5F6368;
  text-decoration: none; }

.footerSocial__2H3sc {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 16px; }
  @media screen and (min-width: 600px) {
    .footerSocial__2H3sc {
      margin: 0; } }
  .footerSocial__2H3sc svg {
    fill: #5F6368; }

.footerSocialLink__1VdGs:not(:first-child) {
  margin-left: 20px; }

.footerRow__7rz1V {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  @media screen and (min-width: 600px) {
    .footerRow__7rz1V {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.footerFab__HXjsR {
  position: absolute;
  margin: 0;
  top: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 16px; }
  @media screen and (min-width: 600px) {
    .footerFab__HXjsR {
      right: 40px; } }
  @media screen and (min-width: 1024px) {
    .footerFab__HXjsR {
      right: 160px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.navContent__1cn90 {
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  z-index: 99; }

.navContentOpened__30xqt {
  -webkit-transform: translateX(0) !important;
          transform: translateX(0) !important; }

.navContentCompact__1TvLt {
  background-color: #FFFFFF;
  bottom: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  left: 0;
  height: 100vh;
  position: fixed;
  top: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  width: calc(100% - 56px); }
  .navContentCompact__1TvLt .navLogo__5ARf7 {
    border-bottom: 1px solid #DADCE0;
    padding: 15px; }
    .navContentCompact__1TvLt .navLogo__5ARf7 > a,
    .navContentCompact__1TvLt .navLogo__5ARf7 > span a {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
  .navContentCompact__1TvLt .navContentLeft__3NsVq {
    height: 100%; }
  .navContentCompact__1TvLt .navList__3hlfa {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 24px 0 0 0;
    padding: 0; }
  .navContentCompact__1TvLt .navListItem__1FzrY {
    list-style-type: none;
    position: relative;
    width: 100%; }
    .navContentCompact__1TvLt .navListItem__1FzrY > a,
    .navContentCompact__1TvLt .navListItem__1FzrY > span a {
      font-size: 14px;
      line-height: 16px;
      font-weight: 400;
      border-radius: 0 36px 36px 0;
      color: #3C4043;
      cursor: pointer;
      display: block;
      letter-spacing: 0.25px;
      padding: 16px 0 16px 20px;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    .navContentCompact__1TvLt .navListItem__1FzrY[selected="true"] > a,
    .navContentCompact__1TvLt .navListItem__1FzrY[selected="true"] > span a {
      color: #1A73E8;
      font-weight: 500;
      background-color: rgba(26, 115, 232, 0.12); }
    @media (hover: hover) {
      .navContentCompact__1TvLt .navListItem__1FzrY:hover > a,
      .navContentCompact__1TvLt .navListItem__1FzrY:hover > span a {
        color: #1A73E8; }
      .navContentCompact__1TvLt .navListItem__1FzrY:hover:after {
        width: 100%; } }

.navContentDefault__1U3AK {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  width: 100%; }
  .navContentDefault__1U3AK .navLogo__5ARf7 {
    padding: 0 44px 0 24px; }
    .navContentDefault__1U3AK .navLogo__5ARf7 > a,
    .navContentDefault__1U3AK .navLogo__5ARf7 > span a {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
  .navContentDefault__1U3AK .navContentLeft__3NsVq,
  .navContentDefault__1U3AK .navContentRight__2AigV {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .navContentDefault__1U3AK .navContentLeft__3NsVq {
    height: auto; }
  .navContentDefault__1U3AK .navContentRight__2AigV {
    padding: 0 40px; }
  .navContentDefault__1U3AK .navList__3hlfa {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0;
    padding: 0; }
  .navContentDefault__1U3AK .navListItem__1FzrY {
    list-style-type: none;
    position: relative;
    margin-right: 40px; }
    .navContentDefault__1U3AK .navListItem__1FzrY > a,
    .navContentDefault__1U3AK .navListItem__1FzrY > span a {
      font-size: 14px;
      line-height: 16px;
      font-weight: 500;
      border-radius: 0 36px 36px 0;
      cursor: pointer;
      display: block;
      letter-spacing: 0.25px;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      border-radius: 0;
      color: #5F6368;
      padding: 24px 0 24px 0; }
      .navContentDefault__1U3AK .navListItem__1FzrY > a:after,
      .navContentDefault__1U3AK .navListItem__1FzrY > span a:after {
        background-color: #1A73E8;
        border-radius: 3px 3px 0 0;
        bottom: 0px;
        content: '';
        height: 3px;
        left: 0;
        position: absolute;
        -webkit-transition: all 0.08s ease-in-out;
        transition: all 0.08s ease-in-out;
        width: 0; }
    .navContentDefault__1U3AK .navListItem__1FzrY[selected="true"] > a,
    .navContentDefault__1U3AK .navListItem__1FzrY[selected="true"] > span a {
      color: #1A73E8;
      font-weight: 500; }
      .navContentDefault__1U3AK .navListItem__1FzrY[selected="true"] > a:after,
      .navContentDefault__1U3AK .navListItem__1FzrY[selected="true"] > span a:after {
        width: 100%; }
    @media (hover: hover) {
      .navContentDefault__1U3AK .navListItem__1FzrY:hover > a,
      .navContentDefault__1U3AK .navListItem__1FzrY:hover > span a {
        color: #1A73E8; }
      .navContentDefault__1U3AK .navListItem__1FzrY:hover:after {
        width: 100%; } }

.navEventInfo__2MsI- {
  padding: 36px 20px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.header__2zieC {
  background-color: #FFFFFF;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: -webkit-box-shadow 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  transition: -webkit-box-shadow 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  transition: box-shadow 250ms ease-in-out, transform 250ms ease-in-out;
  transition: box-shadow 250ms ease-in-out, transform 250ms ease-in-out, -webkit-box-shadow 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  width: 100%;
  z-index: 99; }

.headerContent__2cwGd {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 64px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%; }

.headerPopupVisible__PqhmE {
  z-index: 309; }

.hamburgerButton__2YXdz {
  border-radius: 50%;
  display: block;
  padding: 16px;
  -webkit-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out; }
  .hamburgerButton__2YXdz:focus {
    background-color: #F1F3F4; }

.headerShadow__25Oah {
  -webkit-box-shadow: 0 4px 2px -3px rgba(60, 64, 67, 0.3), 0 5px 6px -3px rgba(60, 64, 67, 0.15);
          box-shadow: 0 4px 2px -3px rgba(60, 64, 67, 0.3), 0 5px 6px -3px rgba(60, 64, 67, 0.15); }

.headerHidden__1vR4A:not(:focus-within) {
  -webkit-transform: translateY(-120%);
          transform: translateY(-120%); }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.liveHeader__1TBbI {
  background-color: #1A73E8;
  bottom: 0;
  height: 60px;
  left: 0;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 98; }
  @media screen and (min-width: 800px) {
    .liveHeader__1TBbI {
      height: 100%;
      width: 72px; } }

.navList__3aLdo {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  @media screen and (min-width: 800px) {
    .navList__3aLdo {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      height: calc(100% - 120px); } }

.navListItem__1wn54 {
  position: relative;
  width: 100%; }
  .navListItem__1wn54 > a,
  .navListItem__1wn54 > span a {
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #FFFFFF;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 60px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out, opacity 0.2s ease-in-out; }
    .navListItem__1wn54 > a > i,
    .navListItem__1wn54 > span a > i {
      opacity: 0.7; }
    @media screen and (min-width: 800px) {
      .navListItem__1wn54 > a,
      .navListItem__1wn54 > span a {
        border-right: 3px solid rgba(255, 255, 255, 0);
        height: 100px; } }
  .navListItem__1wn54[selected="true"] > a,
  .navListItem__1wn54[selected="true"] > span a {
    background-color: rgba(26, 115, 232, 0.12);
    color: #FFFFFF;
    font-weight: 500; }
    @media screen and (min-width: 800px) {
      .navListItem__1wn54[selected="true"] > a,
      .navListItem__1wn54[selected="true"] > span a {
        border-right: 3px solid white; } }
    .navListItem__1wn54[selected="true"] > a > i,
    .navListItem__1wn54[selected="true"] > span a > i {
      opacity: 1; }
  @media screen and (min-width: 800px) {
    .navListItem__1wn54:hover > a,
    .navListItem__1wn54:hover > span a {
      border-right: 3px solid rgba(255, 255, 255, 0.6); } }

.navListItemLabel__3cag1 {
  font-size: 14px;
  margin-top: 6px; }
  @media screen and (min-width: 600px) {
    .navListItemLabel__3cag1 {
      margin-top: 16px; } }

.hamburgerButton__1Gy6h {
  border-radius: 50%;
  color: #FFFFFF;
  display: block;
  margin: 16px;
  padding: 8px;
  -webkit-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out; }
  .hamburgerButton__1Gy6h:focus {
    background-color: #F1F3F4; }

.compactNav__L2ovw {
  max-width: 300px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.container__31bZb {
  background: #669DF6;
  border-radius: 50%;
  color: #f6f6f6;
  height: 16px;
  overflow: hidden;
  padding: 12px;
  position: fixed;
  right: 0;
  top: 0;
  width: 16px;
  z-index: 9999; }
  .container__31bZb:hover {
    background: rgba(0, 0, 0, 0.74);
    border-radius: 0;
    height: auto;
    overflow: auto;
    width: auto; }

.display__3SczL {
  font-family: "Roboto", arial, sans-serif;
  font-size: 12px;
  margin: 0 0 8px 0; }

.bodyScrollFixed__3qjir {
  overflow: hidden; }

.bodyScrollFixedIOS__1Fo3j {
  -webkit-overflow-scrolling: auto;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.circular__1G-b- {
  -webkit-animation: rotate__3-XL9 2s linear infinite;
          animation: rotate__3-XL9 2s linear infinite;
  height: 24px;
  margin: auto;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  width: 24px; }

.path__XzftR {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke: #4285F4;
  -webkit-animation: dash__3VlCl 1.5s ease-in-out infinite;
          animation: dash__3VlCl 1.5s ease-in-out infinite;
  stroke-linecap: round; }

@-webkit-keyframes rotate__3-XL9 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes rotate__3-XL9 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@-webkit-keyframes dash__3VlCl {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

@keyframes dash__3VlCl {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.wrapper__2IwGi {
  display: inline-block; }

.bookmark__1E90F {
  color: #757575; }

.hovered__2sFAf,
.bookmarkAdded__3N17s {
  color: #1A73E8; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.wrapper__3rpWh {
  display: inline-block; }

.reserve__21knr {
  color: #757575; }

.reserveBackground__2I2yW {
  fill: transparent; }

.reserveFull__2dtoA {
  color: #3C4043; }

.reserveWaitlisted__32fCj {
  color: #1A73E8; }

.reserveNone__3cxdL .reserveBackground__2I2yW {
  stroke: #757575; }

.reserveNone__3cxdL .reserveStroke__lAfDQ {
  fill: #747474; }

.reserveNone__3cxdL:hover,
.hovered__2p9X5 .reserveNone__3cxdL {
  color: #1A73E8; }
  .reserveNone__3cxdL:hover .reserveBackground__2I2yW,
  .hovered__2p9X5 .reserveNone__3cxdL .reserveBackground__2I2yW {
    stroke: #1A73E8; }
  .reserveNone__3cxdL:hover .reserveStroke__lAfDQ,
  .hovered__2p9X5 .reserveNone__3cxdL .reserveStroke__lAfDQ {
    fill: #1A73E8; }

.reserveReserved__3OP8- .reserveBackground__2I2yW {
  fill: #1A73E8;
  stroke: #1A73E8; }

.reserveReserved__3OP8- .reserveStroke__lAfDQ {
  fill: #FFFFFF; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
@media screen and (min-width: 600px) {
  .customize__3AlVl .actionButtons__2DXLB {
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important; } }

.customizeList__sFg_3 {
  list-style-type: none;
  margin: 0;
  padding: 0; }
  .customizeList__sFg_3 > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .customizeList__sFg_3 > li:not(:last-child) {
      margin-bottom: 16px; }

.customizeListIcon__1uyTU {
  margin-right: 24px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50px;
          flex: 0 0 50px;
  text-align: right; }
  .customizeListIcon__1uyTU svg {
    overflow: visible; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.wrapper__11Cy_ {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  height: 100%; }

.sessionLiveIndicator__Y11C7 {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  -ms-flex-item-align: end;
      align-self: flex-end;
  background: #5BB974;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: "Roboto Mono", arial, sans-serif;
  letter-spacing: 0.37px;
  margin-right: 8px;
  margin-top: 4px;
  padding: 4px 6px;
  text-transform: uppercase; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.tag__1_rA1 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  border-radius: 4px;
  color: #202124;
  display: inline-block;
  font-family: "Roboto", arial, sans-serif;
  padding: 4px 0;
  -webkit-transition: all ease 250ms;
  transition: all ease 250ms; }

.bullet__3MOn9 {
  font-family: "Roboto Mono", arial, sans-serif;
  letter-spacing: -0.2px; }

.bulletMarker__qG22w {
  background-color: #999999;
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: 12px;
  margin-right: 6px;
  position: relative;
  top: 2px;
  -webkit-transition: all ease 250ms;
  transition: all ease 250ms;
  width: 12px; }
  .toggled__hQDAo .bulletMarker__qG22w {
    height: 0;
    margin-right: 0;
    top: -4px;
    width: 0; }

.iconClose__1sgnR {
  color: inherit;
  font-size: 0;
  position: relative;
  margin-left: 0;
  top: -4px;
  -webkit-transition: all ease 250ms;
  transition: all ease 250ms; }
  .toggled__hQDAo .iconClose__1sgnR {
    font-size: 12px;
    margin-left: 6px;
    top: 2px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.card__2hG2b {
  border: 1px solid #DADCE0;
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  position: relative; }
  .card__2hG2b button,
  .card__2hG2b a {
    z-index: 1; }

.backgroundImage__WE7uh > img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0; }

.cardBanner__17Jwl {
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
  position: relative; }

.cardRatio__1KWsA {
  padding-top: 56.25%; }

.cardBannerImage__1NZSt {
  height: 100%;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%; }

.cardChips__Jyvl4 {
  bottom: 16px;
  left: 16px;
  position: absolute; }

.cardTitle__1jt4T {
  margin-bottom: 18px; }

.cardContent__1bhLS {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  padding: 24px;
  position: relative;
  z-index: 1; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.star__DIzMw {
  color: #1A73E8; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.question__3cI9x {
  margin-bottom: 12px; }
  @media screen and (min-width: 800px) {
    .question__3cI9x {
      margin-bottom: 32px; } }

.stars__1sh4T {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.starDescriptions__3pLkV {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 8px 16px 0; }
  .starDescriptions__3pLkV > span {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #80868B; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.container__35I_n {
  width: 100%; }
  @media screen and (min-width: 1024px) {
    .container__35I_n {
      max-width: 384px; } }

.title__PSJpf {
  margin-bottom: 24px; }
  @media screen and (min-width: 1024px) {
    .title__PSJpf {
      margin-bottom: 32px; } }

.buttons__29iQA {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 32px; }
  .buttons__29iQA button:not(:last-child) {
    margin-right: 16px; }

.submitButton__1MI7w span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.submitButton__1MI7w svg {
  margin-left: 10px;
  max-height: 15px; }

.question__50-l-:not(:last-child) {
  margin-bottom: 8px; }
  @media screen and (min-width: 800px) {
    .question__50-l-:not(:last-child) {
      margin-bottom: 16px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.dateHeading__1_lZg {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  padding: 24px 0; }
  @media screen and (min-width: 1024px) {
    .dateHeading__1_lZg {
      font-size: 24px;
      line-height: 32px;
      font-weight: 400;
      padding: 40px 0; } }

.timeHeading__SG55H {
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: #5F6368;
  padding: 0;
  text-align: center; }
  @media screen and (min-width: 1024px) {
    .timeHeading__SG55H {
      padding: 32px 0 0;
      font-size: 24px;
      line-height: 32px;
      font-weight: 400; } }

.timePeriod__1oZBb {
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  display: block;
  text-transform: uppercase; }
  @media screen and (min-width: 1024px) {
    .timePeriod__1oZBb {
      font-size: 14px;
      line-height: 30px;
      font-weight: 400; } }

.sessionContainer__1izyC {
  width: 100%; }

.noSessionsMessage__9JNc_ {
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  color: #9AA0A6;
  margin: 0 0 16px; }
  @media screen and (min-width: 1024px) {
    .noSessionsMessage__9JNc_ {
      font-size: 16px;
      line-height: 26px;
      font-weight: 400; } }

.sessionListDefault__3NOpV .sessionsGroup__1JkGb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid #E8EAED;
  padding-top: 12px;
  position: relative; }
  @media screen and (min-width: 1024px) {
    .sessionListDefault__3NOpV .sessionsGroup__1JkGb {
      display: inherit;
      padding-top: 0; } }
  .sessionListDefault__3NOpV .sessionsGroup__1JkGb:last-of-type {
    border-bottom: 1px solid #E8EAED; }
  .sessionListDefault__3NOpV .sessionsGroup__1JkGb::before {
    border-bottom: 1px solid #E8EAED;
    border-top: 1px solid #E8EAED;
    content: '';
    display: block;
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: -1px;
    width: 50vw; }
  .sessionListDefault__3NOpV .sessionsGroup__1JkGb::after {
    background: #E8EAED;
    content: '';
    display: block;
    height: 1px;
    left: 100%;
    position: absolute;
    top: -1px;
    width: 50vw; }

.sessionListDefault__3NOpV .timeHeading__SG55H {
  margin-right: 8px;
  width: 48px; }
  @media screen and (min-width: 1024px) {
    .sessionListDefault__3NOpV .timeHeading__SG55H {
      margin-right: 0;
      width: auto; } }

.sessionListCompact__3UTJ3 > section:first-child .dateHeading__1_lZg {
  padding-top: 24px; }

.sessionListCompact__3UTJ3 .dateHeading__1_lZg {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #202124; }
  @media screen and (min-width: 1024px) {
    .sessionListCompact__3UTJ3 .dateHeading__1_lZg {
      padding: 24px 0 0; } }

.sessionListCompact__3UTJ3 .sessionsGroup__1JkGb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (min-width: 1024px) {
    .sessionListCompact__3UTJ3 .sessionsGroup__1JkGb {
      border-bottom: 1px solid #E8EAED;
      display: inherit; }
      .sessionListCompact__3UTJ3 .sessionsGroup__1JkGb:last-of-type {
        border-bottom: 0; } }

.sessionListCompact__3UTJ3 .timeHeading__SG55H {
  margin-right: 8px;
  width: 48px; }

@media screen and (min-width: 1024px) {
  .sessionListCompact__3UTJ3 .timeHeading__SG55H {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    padding-top: 27px; }
    .sessionListCompact__3UTJ3 .timeHeading__SG55H .timePeriod__1oZBb {
      font-size: 11px;
      line-height: 16px;
      font-weight: 500; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.main__VkZxT {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  max-width: 332px;
  min-height: 100vh;
  padding: 0 40px;
  text-align: center; }

.errorMessage__12Ey5 {
  margin: 40px auto 0;
  max-width: 240px; }
  @media screen and (min-width: 600px) {
    .errorMessage__12Ey5 {
      margin-top: 50px;
      max-width: 280px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.contentFooter__zs3g0 {
  border-top: 1px solid #F1F3F4;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  padding-bottom: 80px;
  padding-top: 96px; }
  @media screen and (min-width: 1024px) {
    .contentFooter__zs3g0 {
      padding-bottom: 132px;
      padding-top: 112px; } }

.contentFooterLeft__3j8sJ {
  margin-bottom: 80px; }
  @media screen and (min-width: 1024px) {
    .contentFooterLeft__3j8sJ {
      margin-bottom: 0; } }
  .contentFooterLeft__3j8sJ > h6 {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    margin-bottom: 18px; }
    @media screen and (min-width: 600px) {
      .contentFooterLeft__3j8sJ > h6 {
        font-size: 18px;
        line-height: 30px;
        font-weight: 400; } }
    @media screen and (min-width: 1024px) {
      .contentFooterLeft__3j8sJ > h6 {
        margin-bottom: 24px; } }

.contentFooterLink__2XOyx {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #1A73E8;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 40px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 12px;
  width: 40px; }

.contentFooterSocial__gfw-r {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .contentFooterSocial__gfw-r svg {
    fill: #FFFFFF;
    max-width: 26px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.imageTop__8q7z7 {
  border-radius: 12px 12px 0 0;
  height: 80px;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0; }
  @media screen and (min-width: 600px) {
    .imageTop__8q7z7 {
      height: 160px; } }
  .imageTop__8q7z7 > img {
    width: 100%; }

.content__1CDVx {
  margin-top: 80px;
  padding: 32px 16px; }
  @media screen and (min-width: 600px) {
    .content__1CDVx {
      margin-top: 160px;
      padding: 48px 100px 60px; } }

.heading__NrkBa {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 32px; }

.speakerImage__2vS15 {
  border-radius: 50%;
  height: 69px;
  margin-right: 16px;
  overflow: hidden;
  text-align: center;
  width: 69px; }
  @media screen and (min-width: 600px) {
    .speakerImage__2vS15 {
      height: 78px;
      margin-right: 24px;
      width: 78px; } }
  .speakerImage__2vS15 img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%; }

.speakerPlaceholderImage__3Rc_L {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 2px solid #34A853;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.speakerName___ZAbq > h4 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 400; }
  @media screen and (min-width: 600px) {
    .speakerName___ZAbq > h4 {
      font-size: 28px;
      line-height: 36px;
      font-weight: 400; } }

.speakerName___ZAbq > p {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0.1px;
  margin: 4px 0 0; }

.socialLinks__2_oJO {
  margin-bottom: 24px; }
  @media screen and (min-width: 600px) {
    .socialLinks__2_oJO {
      margin-bottom: 16px; } }

.socialLink__3U0dW:not(:last-of-type):after {
  color: #1A73E8;
  content: ' / ';
  font-weight: 500; }

.bio__2zivH > p {
  margin: 0; }

.summary__13QjM {
  border-bottom: 1px solid #F1F3F4;
  margin-bottom: 32px;
  padding-bottom: 32px; }
  @media screen and (min-width: 600px) {
    .summary__13QjM {
      border: 0;
      margin-bottom: 48px;
      padding-bottom: 0; } }

.sessions__3AOaP > h6 {
  padding-bottom: 32px; }
  @media screen and (min-width: 600px) {
    .sessions__3AOaP > h6 {
      border-bottom: 1px solid #F1F3F4;
      padding-bottom: 18px;
      margin-bottom: 24px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.speaker__3X7H_ {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 24px 0 0; }

.imageWrapper__3TOjR {
  margin-right: 24px; }

.image__hQgS- {
  border-radius: 48px;
  border: 2px solid #34A853;
  height: 48px;
  overflow: hidden;
  text-align: center;
  width: 48px; }
  .image__hQgS- > img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%; }
  .image__hQgS- svg {
    height: 28px;
    width: 28px; }

.imagePlaceholder__3R0MD {
  line-height: 57px; }

.info__2raBu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .info__2raBu strong {
    font-size: 18px;
    line-height: 30px;
    font-weight: 500;
    color: #1A73E8;
    margin-bottom: -5px; }
  .info__2raBu span {
    font-size: 15px;
    line-height: 28px;
    font-weight: 400;
    color: #3C4043;
    font-family: "Roboto", arial, sans-serif; }

.speakerInfoWrapper__3LzJR {
  cursor: pointer; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.tabs__3Y8CU {
  padding: 60px 0; }
  @media screen and (min-width: 600px) {
    .tabs__3Y8CU {
      padding: 160px 0; } }

.tabList__3nSec {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 12px;
  padding-left: 12px;
  position: relative;
  list-style-type: none; }
  .tabList__3nSec:after {
    background-color: #DADCE0;
    bottom: 0px;
    content: '';
    height: 1px;
    left: -50vw;
    position: absolute;
    -webkit-transition: all 0.08s ease-in-out;
    transition: all 0.08s ease-in-out;
    width: 200vw; }

.flushLeft__1ZeHW {
  padding-left: 0; }

.tab__2ZQ38 {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: #5F6368;
  letter-spacing: 0.25px;
  list-style-type: none;
  margin-right: 40px;
  padding-bottom: 12px;
  position: relative;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  z-index: 1; }
  .tab__2ZQ38:after {
    background-color: #1A73E8;
    bottom: -4px;
    content: '';
    height: 1px;
    left: 0;
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 100%; }
  .tab__2ZQ38.activeTab__11u8B {
    color: #202124; }
    .tab__2ZQ38.activeTab__11u8B:after {
      opacity: 1; }
  .tab__2ZQ38.disabledTab__2HFn9 {
    opacity: 0.5;
    pointer-events: none; }
    .tab__2ZQ38.disabledTab__2HFn9:hover {
      opacity: 0.5; }
  @media screen and (min-width: 800px) {
    .tab__2ZQ38:hover {
      color: #202124; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.sessionItem__15Y45 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 0 24px; }
  @media screen and (min-width: 1024px) {
    .sessionItem__15Y45 {
      padding: 24px 0;
      position: relative; } }

.sessionItemRow__36S6E {
  display: block;
  position: relative;
  width: 100%; }

@media screen and (min-width: 1024px) {
  .sessionItemRowDefault__2_4ED {
    border-left: 1px solid #E8EAED;
    padding: 32px calc(calc(calc(calc(100% - 180px) / 10) * 1) + calc(0px) + 20px); }
    .sessionItemRowDefault__2_4ED:not(:last-child) {
      border-bottom: 1px solid #E8EAED; }
    .sessionItemRowDefault__2_4ED:hover, .sessionItemRowDefault__2_4ED:focus {
      background-color: #F8F9FA; }
      .sessionItemRowDefault__2_4ED:hover::after, .sessionItemRowDefault__2_4ED:focus::after {
        background-color: #F8F9FA; }
    .sessionItemRowDefault__2_4ED::after {
      border-bottom: 1px solid #E8EAED;
      content: '';
      display: block;
      height: 100%;
      left: 100%;
      position: absolute;
      top: 0;
      width: 50vw; }
    .sessionItemRowDefault__2_4ED + .reserveControls__1rSnD {
      margin-right: 100px; } }

.sessionItemCard__2N3aN {
  height: 100%;
  padding: 0;
  position: relative; }
  @media screen and (max-width: 400px) {
    .sessionItemCard__2N3aN {
      overflow: hidden; }
      .sessionItemCard__2N3aN > div {
        max-width: 100%; } }
  @media screen and (max-width: 400px) {
    .sessionItemCard__2N3aN .sessionInfoOverline__z5wZ8 {
      margin-top: 6px; } }
  .sessionItemCard__2N3aN .title__18xB4 {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    padding-right: 90px; }
    @media screen and (max-width: 400px) {
      .sessionItemCard__2N3aN .title__18xB4 {
        font-size: 13px;
        line-height: 18px;
        font-weight: 400;
        text-overflow: ellipsis; } }
    @supports (display: -webkit-box) {
      .sessionItemCard__2N3aN .title__18xB4 {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        overflow: hidden; } }
  .sessionItemCard__2N3aN .sessionItemActions__1imgd {
    width: 88px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end; }
  .sessionItemCard__2N3aN .sessionInfo__2v7BZ {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  @media screen and (max-width: 600px) {
    .sessionItemCard__2N3aN .sessionSpeakers__2I0oc {
      max-width: calc(100% - 40px); } }
  @media screen and (max-width: 600px) {
    .sessionItemCard__2N3aN .sessionItemMeta__2AFSB {
      max-width: calc(100% - 40px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; } }
  .sessionItemCard__2N3aN .reserveControls__1rSnD {
    position: absolute;
    right: 0;
    top: 0; }
    @media screen and (max-width: 400px) {
      .sessionItemCard__2N3aN .reserveControls__1rSnD button {
        padding: 4px; }
        .sessionItemCard__2N3aN .reserveControls__1rSnD button svg {
          width: 22px; }
        .sessionItemCard__2N3aN .reserveControls__1rSnD button i {
          font-size: 22px; } }
    .sessionItemCard__2N3aN .reserveControls__1rSnD button:not(:last-of-type) {
      margin-right: 4px; }
      @media screen and (min-width: 600px) {
        .sessionItemCard__2N3aN .reserveControls__1rSnD button:not(:last-of-type) {
          margin-right: 8px; } }
  .sessionItemCard__2N3aN[class*="placeholderCard"] .title__18xB4 {
    padding-right: 0; }

.sessionItemFeedCard__KwmeG {
  border-radius: 12px;
  border: 1px solid #F1F3F4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 370px;
          flex: 1 0 370px;
  height: 220px;
  padding: 24px;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  width: 370px; }
  .sessionItemFeedCard__KwmeG > div {
    width: 100%; }
  .sessionItemFeedCard__KwmeG .reserveControls__1rSnD {
    top: 16px;
    right: 24px; }
  .sessionItemFeedCard__KwmeG:focus, .sessionItemFeedCard__KwmeG:hover {
    background-color: #F8F9FA;
    outline: none; }
  .sessionItemFeedCard__KwmeG .title__18xB4 {
    text-overflow: ellipsis; }
    @media screen and (max-width: 600px) {
      .sessionItemFeedCard__KwmeG .title__18xB4 {
        font-size: 14px;
        line-height: 20px;
        font-weight: 500; } }
  @media screen and (max-width: 400px) {
    .sessionItemFeedCard__KwmeG .sessionItemActions__1imgd {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      width: 60px; }
      .sessionItemFeedCard__KwmeG .sessionItemActions__1imgd button:not(:last-of-type) {
        margin-right: 0; } }
  @media screen and (max-width: 400px) {
    .sessionItemFeedCard__KwmeG .sessionMeta__ZeSSn > span {
      font-size: 10px;
      line-height: 14px;
      font-weight: 400; } }

.truncatedTagLabel__1gtRx {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #202124;
  font-family: "Roboto Mono", arial, sans-serif;
  letter-spacing: -.2px; }

.sessionLiveIndicator__uoVaD {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  -ms-flex-item-align: end;
      align-self: flex-end;
  background: #5BB974;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: "Roboto Mono", arial, sans-serif;
  letter-spacing: 0.37px;
  margin-right: 8px;
  margin-top: 8px;
  padding: 6px;
  text-transform: uppercase; }

.sessionItem__15Y45 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  @media screen and (min-width: 1024px) {
    .sessionItem__15Y45 {
      position: relative; } }

.sessionSpeakers__2I0oc {
  font-size: 13px;
  line-height: 24px;
  font-weight: 400;
  color: #5F6368;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: 8px;
  max-width: 265px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.sessionInfo__2v7BZ {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }

.sessionInfoOverline__z5wZ8 {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  color: #3C4043;
  letter-spacing: .8px;
  margin-bottom: 16px;
  text-transform: uppercase; }

.sessionItemLive__Mx4IF {
  color: #5F6368;
  font-size: 18px;
  position: relative;
  top: 4px;
  margin-left: 4px; }

.sessionMeta__ZeSSn {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }
  @media screen and (min-width: 1024px) {
    .sessionMeta__ZeSSn {
      margin-top: 2px; } }
  .sessionMeta__ZeSSn > span {
    margin-right: 16px; }
    .sessionMeta__ZeSSn > span:empty {
      display: none; }

.sessionRoom__3QpNk {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #5F6368;
  font-family: "Roboto", arial, sans-serif;
  margin-right: 16px; }
  @media screen and (min-width: 1024px) {
    .sessionRoom__3QpNk {
      color: #202124;
      font-size: 15px;
      line-height: 28px;
      font-weight: 400; } }

.title__18xB4 {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500; }
  @media screen and (min-width: 1024px) {
    .title__18xB4 {
      font-size: 18px;
      line-height: 30px;
      font-weight: 500; } }

.sessionItemRowDefault__2_4ED .reserveControls__1rSnD,
.sessionItemRowCompact__3kRpN .reserveControls__1rSnD {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: 8px;
  z-index: 1; }
  @media screen and (min-width: 600px) {
    .sessionItemRowDefault__2_4ED .reserveControls__1rSnD button:not(:last-of-type),
    .sessionItemRowCompact__3kRpN .reserveControls__1rSnD button:not(:last-of-type) {
      margin-right: 16px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.archivedCard__3a-lw {
  background-repeat: no-repeat;
  background-size: cover;
  border: 0;
  overflow: hidden;
  position: relative; }

.darkOverlay__2vPqq {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(60, 64, 67, 0.2)), color-stop(60%, rgba(60, 64, 67, 0.2)), color-stop(160%, black));
  background-image: linear-gradient(to bottom, rgba(60, 64, 67, 0.2), rgba(60, 64, 67, 0.2) 60%, black 160%);
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

.watchButton__1n_Nq {
  position: absolute;
  left: 10px;
  bottom: 8px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.signedInNoSessions__3ReiN {
  padding-top: 60px; }
  .signedInNoSessions__3ReiN h5 {
    margin-bottom: 24px; }
  .signedInNoSessions__3ReiN a {
    margin-left: -8px; }

.placeholderCard__1qoWt {
  position: relative; }
  .placeholderCard__1qoWt .sessionInfo__3Xp-1 {
    z-index: 1; }
  .placeholderCard__1qoWt h6 {
    font-weight: 400;
    max-width: 200px !important; }
  .placeholderCard__1qoWt img {
    bottom: 0;
    position: absolute;
    right: 0; }

.button__3Mmzm {
  margin-top: auto; }

.dayComplete__tz-fQ,
.meal__2gmuu {
  pointer-events: none;
  cursor: none; }

.dayComplete__tz-fQ {
  background-color: #F8F9FA; }
  .dayComplete__tz-fQ img {
    left: 0;
    width: 100%; }

.day3Complete__1dg52 h6 {
  max-width: 170px !important; }

.meal__2gmuu img {
  top: 0;
  left: 0;
  height: 100%;
  width: auto; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.cards__1_G_U {
  -webkit-overflow-scrolling: touch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-bottom: 20px;
  padding-left: 16px;
  scroll-behavior: smooth; }
  @media screen and (min-width: 600px) {
    .cards__1_G_U {
      padding-left: 60px; } }
  @media screen and (min-width: 1024px) {
    .cards__1_G_U {
      padding-left: 40px; } }
  @media screen and (min-width: 1280px) {
    .cards__1_G_U {
      padding-left: 80px; } }

.card__mVcBk {
  border-radius: 8px; }
  @media screen and (max-width: 600px) {
    .card__mVcBk > div {
      max-width: calc(100vw - 50px); } }
  .card__mVcBk:not(:last-child) {
    padding-right: 22px; }
  .card__mVcBk:last-child {
    padding-right: 16px; }
    @media screen and (min-width: 600px) {
      .card__mVcBk:last-child {
        padding-right: 60px; } }
    @media screen and (min-width: 1024px) {
      .card__mVcBk:last-child {
        padding-right: 40px; } }
    @media screen and (min-width: 1280px) {
      .card__mVcBk:last-child {
        padding-right: 80px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.cards__1Tldz {
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth; }
  .cards__1Tldz > section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 16px;
    padding-bottom: 20px; }
    @media screen and (min-width: 600px) {
      .cards__1Tldz > section {
        padding-left: 60px; } }
    @media screen and (min-width: 1024px) {
      .cards__1Tldz > section {
        padding-left: 40px; } }
    @media screen and (min-width: 1280px) {
      .cards__1Tldz > section {
        padding-left: 80px; } }

.hideScrollbar__G1ASv {
  height: 220px;
  overflow: hidden; }
  @media screen and (max-width: 400px) {
    .hideScrollbar__G1ASv.isArchived__A_fjJ {
      height: 151px; }
      .hideScrollbar__G1ASv.isArchived__A_fjJ [class*="archivedCard"] {
        background-size: 100%;
        height: 151px; } }

.heading__36huO {
  margin: 52px 0 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.carouselControlsWrapper__3VzYr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.tabs__Nd5Rc {
  padding: 32px 0; }
  @media screen and (min-width: 800px) {
    .tabs__Nd5Rc {
      padding: 44px 0 0; } }

@media screen and (min-width: 1440px) {
  .recap__3n7D7 [class*="hideScrollbar"] {
    -webkit-clip-path: inset(0 0 0 0 round 8px);
            clip-path: inset(0 0 0 0 round 8px); } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.backgroundEmbed__vYcF3 {
  border: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.videoTop__2vPr9 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  display: block;
  font-family: "Google Sans", arial, sans-serif;
  height: 330px;
  margin: -16px -16px 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
  width: calc(100% + 32px); }
  .videoTop__2vPr9:after {
    background: rgba(0, 0, 0, 0.7);
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; }
  @media screen and (min-width: 1024px) {
    .videoTop__2vPr9 {
      border-radius: 12px 12px 0 0; } }

.videoTopPlayIcon__1nall {
  color: #FFFFFF;
  font-size: 42px;
  left: 50%;
  opacity: .8;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1; }

.videoPlayer__wyoR2 {
  height: 100%;
  width: 100%; }

.videoLabel__28XhN {
  bottom: 24px;
  left: 24px;
  color: #FFFFFF;
  line-height: 22px;
  position: absolute;
  z-index: 1; }
  @media screen and (min-width: 1024px) {
    .videoLabel__28XhN {
      bottom: 40px;
      left: 32px;
      max-width: 180px; } }

.imageTop__6L9vU {
  border-radius: 12px 12px 0 0;
  height: 80px;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0; }
  @media screen and (min-width: 600px) {
    .imageTop__6L9vU {
      height: 160px; } }
  .imageTop__6L9vU > img {
    width: 100%; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.content__1Mpg- {
  margin-top: 80px;
  padding: 32px 20px 72px; }
  @media screen and (min-width: 600px) {
    .content__1Mpg- {
      margin-top: 160px;
      padding: 56px 100px 60px;
      position: relative; } }

.contentWithVideo__13SVQ {
  margin-top: 16px; }

.title__2lywV {
  margin-bottom: 16px; }
  @media screen and (min-width: 600px) {
    .title__2lywV {
      margin-bottom: 24px;
      max-width: 450px; } }

.time__2FhRi {
  font-size: 16px;
  line-height: 26px;
  font-weight: 500; }
  @media screen and (min-width: 600px) {
    .time__2FhRi {
      font-size: 18px;
      line-height: 30px;
      font-weight: 500; } }

.roomName__3sPAc {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  margin: 0; }
  @media screen and (min-width: 600px) {
    .roomName__3sPAc {
      font-size: 18px;
      line-height: 30px;
      font-weight: 400; } }

.livestreamIcon__3ZLQu {
  color: #5F6368;
  font-size: 18px;
  position: relative;
  top: 4px;
  margin-left: 4px; }

.ctas__2oizh {
  margin-top: 8px; }

.description__2hkXJ > p {
  margin: 32px 0 0; }
  @media screen and (min-width: 600px) {
    .description__2hkXJ > p {
      margin: 24px 0; } }

.summary__1zQdN {
  margin-bottom: 32px; }
  @media screen and (min-width: 600px) {
    .summary__1zQdN {
      margin-bottom: 48px; } }

.speakers__2S0Zr {
  border-top: 1px solid #F1F3F4;
  margin-bottom: 32px;
  padding-top: 32px; }
  @media screen and (min-width: 600px) {
    .speakers__2S0Zr {
      padding-top: 48px; } }
  .speakers__2S0Zr > h6 {
    margin: 0 0 24px; }
    @media screen and (min-width: 600px) {
      .speakers__2S0Zr > h6 {
        margin: 0 0 32px; } }

.relatedEvents__1TF2G {
  border-top: 1px solid #F1F3F4;
  margin-top: 32px; }
  @media screen and (min-width: 600px) {
    .relatedEvents__1TF2G {
      border-top: 0;
      margin-top: 48px; } }
  .relatedEvents__1TF2G > h6 {
    padding: 32px 0 8px; }
    @media screen and (min-width: 600px) {
      .relatedEvents__1TF2G > h6 {
        border-bottom: 1px solid #F1F3F4;
        padding: 0 0 18px; } }

.tags__2zsEK > span {
  margin-right: 16px; }

@media screen and (max-width: 800px) {
  .fabsMobile__2e_aq {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #FFFFFF;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 56px;
    left: 0;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 300; } }

@media screen and (max-width: 800px) {
  .reserveMobile__2aOb- {
    bottom: 30px;
    position: absolute;
    right: 28px;
    z-index: 300; } }

@media screen and (min-width: 800px) {
  .fabsDesktop__3YRtg {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: absolute;
    right: 100px;
    top: -44px; } }

@media screen and (min-width: 800px) {
  .reserveDesktop__2fVF8 {
    margin-bottom: 20px; } }

.rateSession__1ebFx {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.rateSessionButton__3s4lP {
  margin: 24px 0; }

.rateSessionButtonDisabled__22nzC {
  background-color: #E8F0FE !important;
  color: #3C4043; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.root__2DbUt {
  position: relative;
  z-index: 300; }

.toolbar__2fj-o {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 5; }

.header__1nb5P {
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: opacity .5s linear;
  transition: opacity .5s linear; }

.headerVisible__24LKt {
  opacity: 1; }

.videoPlayer__2hatx {
  background: rgba(0, 0, 0, 0.75);
  bottom: 0;
  display: block;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transform: scale(1, 1) translateZ(0);
          transform: scale(1, 1) translateZ(0);
  -webkit-transition: margin 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform-origin 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  transition: margin 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform-origin 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), transform-origin 0.75s cubic-bezier(0.19, 1, 0.22, 1), margin 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), transform-origin 0.75s cubic-bezier(0.19, 1, 0.22, 1), margin 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform-origin 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: margin, transform;
  z-index: 300; }

.fullSize__2qWHO {
  opacity: 1; }

.closed__1_qIq {
  display: none;
  pointer-events: none; }

.videoContainer__1Pxxi {
  height: 100%;
  position: relative;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 100%;
  z-index: 1; }

.minimizedControlsWrapper__2XHzj {
  display: contents; }

.minimizedControls__35jCr {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2; }
  .minimizedControls__35jCr button:first-child {
    margin-right: 8px; }

.pipRestoreButton__7Cpm_ {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 32px);
  z-index: 1; }

.video__3JVI- {
  height: 100%;
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
  width: 100%; }

.videoDisabled__289UZ {
  pointer-events: none; }

.card__1gvhJ {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.hoverZone__3WssX {
  position: absolute;
  -webkit-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  z-index: 5;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), color-stop(50%, rgba(0, 0, 0, 0)));
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 50%);
  top: 0;
  width: 100%; }

.hovered__1E97R {
  opacity: 1; }

.default__wE6cM {
  opacity: 0; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.toolbar__BPzS8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }
  .toolbar__BPzS8 button {
    color: #FFFFFF; }
    .toolbar__BPzS8 button:not(:last-child) {
      margin-right: 18px; }

.pipIcon__3DIwI {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1); }

.toolbarButton__3M0Db:hover {
  color: #000000; }

.maskedImageContainer__1mdkO {
  position: relative; }
  .maskedImageContainer__1mdkO img {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%; }

.maskedImageStairs__3iilP {
  -webkit-clip-path: url(#stairClip);
          clip-path: url(#stairClip); }
  .maskedImageStairs__3iilP .maskedImageContainerRatio__2eY1e {
    padding-bottom: 123.59%; }

.maskedImageSawtooth__2ms_S {
  -webkit-clip-path: url(#sawtoothClip);
          clip-path: url(#sawtoothClip); }
  .maskedImageSawtooth__2ms_S .maskedImageContainerRatio__2eY1e {
    padding-bottom: 120.63%; }

.maskedImageCircle__1mhSa {
  border-radius: 100%;
  overflow: hidden; }

.maskedImageSquare__32rRi .maskedImageContainerRatio__2eY1e,
.maskedImageCircle__1mhSa .maskedImageContainerRatio__2eY1e {
  padding-bottom: 100%; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.tabTitle__MGeWe {
  margin: 0 0 40px 0; }
  @media screen and (min-width: 1024px) {
    .tabTitle__MGeWe {
      margin: 0; } }

.eventShapes__261O1 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  position: relative; }
  @media screen and (min-width: 1024px) {
    .eventShapes__261O1 {
      display: grid;
      height: 400px;
      margin: 120px 0 0; } }
  .eventShapes__261O1 > div:nth-child(2n + 1) {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
            flex: 0 0 60%; }
  .eventShapes__261O1 > div:nth-child(2n) {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
            flex: 0 0 30%; }
    .eventShapes__261O1 > div:nth-child(2n) svg {
      height: 150%;
      max-width: none;
      width: 150%; }
      @media screen and (min-width: 1024px) {
        .eventShapes__261O1 > div:nth-child(2n) svg {
          width: inherit;
          height: inherit; } }
  .eventShapes__261O1 .eventTriangle__1Ap7- svg {
    margin-left: 60px; }
    @media screen and (min-width: 1024px) {
      .eventShapes__261O1 .eventTriangle__1Ap7- svg {
        margin: 0; } }
  @media screen and (min-width: 1024px) {
    .eventShapes__261O1 img {
      width: 400px; } }
  .eventShapes__261O1 .eventAudience__2K5qP {
    margin-left: 10%;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2; }
    @media screen and (min-width: 1024px) {
      .eventShapes__261O1 .eventAudience__2K5qP {
        margin-left: 0;
        margin-top: -300px;
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1; } }
  .eventShapes__261O1 .eventCodelabs__3eFg9,
  .eventShapes__261O1 .eventTriangle__1Ap7- {
    margin-bottom: 40px; }
    @media screen and (min-width: 1024px) {
      .eventShapes__261O1 .eventCodelabs__3eFg9,
      .eventShapes__261O1 .eventTriangle__1Ap7- {
        margin-bottom: 0; } }
  .eventShapes__261O1 .eventRedLines__18QN5 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1; }
    @media screen and (min-width: 1024px) {
      .eventShapes__261O1 .eventRedLines__18QN5 {
        margin-top: -240px;
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2; } }
    .eventShapes__261O1 .eventRedLines__18QN5 svg {
      margin-left: -66px; }
      @media screen and (min-width: 1024px) {
        .eventShapes__261O1 .eventRedLines__18QN5 svg {
          margin-left: 0; } }
  @media screen and (min-width: 1024px) {
    .eventShapes__261O1 .eventAudienceMask__1rEMw,
    .eventShapes__261O1 .eventCodelabsMask__1_EXl {
      width: 400px; } }

.exploreHeader__32EOc {
  margin: 60px 0; }
  @media screen and (min-width: 1024px) {
    .exploreHeader__32EOc {
      margin: 120px 0; } }
  .exploreHeader__32EOc h2 {
    margin-bottom: 16px; }
    @media screen and (min-width: 1024px) {
      .exploreHeader__32EOc h2 {
        margin-bottom: 28px; } }

.exploreGrid__20YHk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (min-width: 1024px) {
    .exploreGrid__20YHk {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }

.exploreQuadrant__2LXVa {
  margin: 0 0 40px 0; }
  .exploreQuadrant__2LXVa:last-child {
    margin-bottom: 0; }
  @media screen and (min-width: 1024px) {
    .exploreQuadrant__2LXVa {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1 0 calc(50% - 70px);
              flex: 1 0 calc(50% - 70px);
      margin-bottom: 0; }
      .exploreQuadrant__2LXVa:nth-child(2n) {
        margin-left: 70px; }
      .exploreQuadrant__2LXVa:nth-child(2n + 1) {
        margin-right: 70px; }
      .exploreQuadrant__2LXVa:nth-child(-n + 2) {
        margin-bottom: 80px; } }
  .exploreQuadrant__2LXVa h5 {
    margin: 0 0 16px; }
  .exploreQuadrant__2LXVa p {
    margin: 0; }
  @media screen and (min-width: 1024px) {
    .exploreQuadrant__2LXVa svg {
      max-width: none; } }

.exploreIcon__3On9g {
  margin-right: 28px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.infoRaw__2ICvn {
  white-space: normal; }
  @media screen and (min-width: 1024px) {
    .infoRaw__2ICvn {
      padding-bottom: 0; } }

.tabs__2zron ul {
  margin: 0 0 48px 0; }
  @media screen and (min-width: 800px) {
    .tabs__2zron ul {
      margin-bottom: 132px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.rawContent__3uy6o {
  white-space: pre-line; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.infoRaw__2jPoi {
  white-space: normal; }
  @media screen and (min-width: 1024px) {
    .infoRaw__2jPoi {
      padding-bottom: 0; } }

.tabTitle__3FYyU {
  margin: 0 0 40px 0; }
  @media screen and (min-width: 1024px) {
    .tabTitle__3FYyU {
      margin: 0; } }

.travelSemicircle__3Quvn {
  -ms-flex-item-align: end;
      align-self: end; }

.travelShapes__36rJB {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end; }

.travelImageLeftWrapper__eJL2A,
.travelImageRightWrapper__ubQ1P {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (min-width: 1024px) {
    .travelImageLeftWrapper__eJL2A,
    .travelImageRightWrapper__ubQ1P {
      display: block; } }
  .travelImageLeftWrapper__eJL2A img,
  .travelImageRightWrapper__ubQ1P img {
    width: 100%;
    height: auto; }
  .travelImageLeftWrapper__eJL2A > div,
  .travelImageRightWrapper__ubQ1P > div {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
            flex: 1 1 50%; }

.travelImageLeftWrapper__eJL2A {
  width: 100%;
  padding-bottom: 40px; }
  @media screen and (min-width: 1024px) {
    .travelImageLeftWrapper__eJL2A {
      height: auto;
      padding-bottom: 0; } }
  .travelImageLeftWrapper__eJL2A .travelCircleMobile__2aC6V {
    margin-right: -50%; }

.travelImageRightWrapper__ubQ1P {
  width: 100%;
  height: calc(100% - 10px); }
  @media screen and (min-width: 1024px) {
    .travelImageRightWrapper__ubQ1P {
      height: auto; } }
  .travelImageRightWrapper__ubQ1P .travelSquareMobile__3VAmc {
    margin-left: -50%;
    border: 10px solid #5BB974; }

.travelImageRight__LkcIc {
  padding-left: 50px; }
  @media screen and (min-width: 1024px) {
    .travelImageRight__LkcIc {
      padding-left: 0;
      margin-top: 84px; } }

.travelImageLeft__7Oi80 {
  padding-right: 50px; }
  @media screen and (min-width: 1024px) {
    .travelImageLeft__7Oi80 {
      padding-right: 0; } }

@media screen and (min-width: 1024px) {
  .travelCircle__fbW0i {
    margin-top: -24px; } }

@media screen and (min-width: 1024px) {
  .travelSquare__3ry5I {
    margin-top: 24%; } }

@media screen and (min-width: 1024px) {
  .travelInfoShapes__qL6oL {
    display: grid;
    grid-template-columns: repeat(4, 76px);
    grid-column-gap: 28px;
    grid-row-gap: 120px; } }

.travelInfoShapes__qL6oL svg {
  width: 75%; }
  @media screen and (min-width: 1280px) {
    .travelInfoShapes__qL6oL svg {
      width: 100%; } }

.travelInfo__QZ_tZ {
  margin-top: 60px; }
  @media screen and (min-width: 1024px) {
    .travelInfo__QZ_tZ {
      margin-top: 120px; } }

.travelInfoHeading___dfbE {
  margin-bottom: 16px; }

.travelAccordionHeading__1W9Od {
  margin-bottom: 16px; }

.travelAccordionBlock__6BvlP {
  margin-top: 40px; }
  @media screen and (min-width: 1024px) {
    .travelAccordionBlock__6BvlP {
      margin-top: 60px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.codelabsTitle__3EzOx {
  margin-bottom: 20px; }
  @media screen and (min-width: 600px) {
    .codelabsTitle__3EzOx {
      margin-bottom: 60px; } }

.codelabsSubtitle__3I_1P {
  line-height: 30px; }

.codelabsCta__LXSaG {
  margin-bottom: 80px;
  margin-top: 20px; }
  @media screen and (min-width: 600px) {
    .codelabsCta__LXSaG {
      margin-bottom: 120px; } }

.codelabsCards__ckzFb {
  grid-row-gap: 24px;
  padding: 0 0 80px; }

.cardLink__2fDRZ {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .cardLink__2fDRZ > * {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%; }

.card__gwsz5 {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: #3C4043; }

.cardIcon__O6HJM {
  margin-bottom: 8px;
  max-height: 40px; }

.cardMeta__22gR5 {
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: #202124;
  margin-bottom: 18px; }

.cardTitle__22vSM {
  margin-bottom: 4px; }

.cardMetaTags__5ywVX > * {
  margin-left: 12px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.devPage__3xchs {
  padding-top: 80px; }
  @media screen and (min-width: 1024px) {
    .devPage__3xchs {
      padding-top: 160px; } }

.devHero__L9rAz {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 32px; }
  @media screen and (min-width: 600px) {
    .devHero__L9rAz {
      margin-bottom: 60px; } }
  @media screen and (min-width: 1024px) {
    .devHero__L9rAz {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      margin-bottom: 80px; } }

.devHeroDescription__3Vtkp {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto; }
  @media screen and (min-width: 1024px) {
    .devHeroDescription__3Vtkp {
      padding-right: 32px; }
      .devHeroDescription__3Vtkp h1 {
        font-size: 52px;
        line-height: 64px;
        font-weight: 400;
        max-width: 800px; } }

.devHeroImage__1Yhwo {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 32px;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1; }
  @media screen and (min-width: 1024px) {
    .devHeroImage__1Yhwo {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 60%;
              flex: 1 0 60%;
      margin-bottom: 0;
      -webkit-box-ordinal-group: 1;
          -ms-flex-order: 0;
              order: 0; } }
  .devHeroImage__1Yhwo img {
    width: 100%; }

.devGet__2HDS2 {
  border-top: 1px solid #E8EAED;
  padding-top: 32px; }
  @media screen and (min-width: 600px) {
    .devGet__2HDS2 {
      margin: 60px 0;
      padding-top: 60px; } }
  @media screen and (min-width: 1024px) {
    .devGet__2HDS2 {
      margin: 80px 0;
      padding-top: 80px; } }

.devGetHeading__1UqOC {
  margin: auto auto 32px;
  text-align: center; }
  @media screen and (min-width: 1024px) {
    .devGetHeading__1UqOC {
      margin-bottom: 64px;
      max-width: 600px; } }

.devGetPartners__YjFSa {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (min-width: 600px) {
    .devGetPartners__YjFSa {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }
  @media screen and (min-width: 1024px) {
    .devGetPartners__YjFSa {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; } }

.devGetPartner__jvZb6 {
  border: 1px solid #E8EAED;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  margin-bottom: 24px;
  -webkit-transition: background-color 150ms ease-in-out;
  transition: background-color 150ms ease-in-out; }
  .devGetPartner__jvZb6:hover {
    background-color: #F8F9FA; }
  .devGetPartner__jvZb6 p {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: initial;
    font-weight: initial;
    margin-bottom: 32px; }
  .devGetPartner__jvZb6 img {
    max-height: 35px;
    max-width: 80%; }
  @media screen and (min-width: 600px) {
    .devGetPartner__jvZb6 {
      -ms-flex-preferred-size: calc(50% - 24px);
          flex-basis: calc(50% - 24px); }
      .devGetPartner__jvZb6:nth-child(odd) {
        margin-right: 24px; } }
  @media screen and (min-width: 1024px) {
    .devGetPartner__jvZb6 {
      -webkit-box-flex: 0;
          -ms-flex: 0 1 350px;
              flex: 0 1 350px; }
      .devGetPartner__jvZb6:not(:last-child) {
        margin-right: 24px; } }

.devGetPartnerDetails__1nWXr {
  padding: 24px; }
  .devGetPartnerDetails__1nWXr h6 {
    font-weight: 500; }

.devGetPartnerHeader__3P2pi {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 120px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center; }

.devGetPartnerDetails__1nWXr {
  border-top: 1px solid #E8EAED;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.map__2aaBw {
  position: relative; }

.mapElement__DVftG {
  height: 100%;
  width: 100%; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.wrapper__2Yjdx {
  overflow: auto;
  position: relative;
  margin: 32px 0 60px; }
  @media screen and (min-width: 1024px) {
    .wrapper__2Yjdx {
      margin: 120px 0 0; } }

.control__1zL_T {
  display: none; }
  @media screen and (min-width: 800px) {
    .control__1zL_T {
      display: initial;
      overflow: hidden;
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      -webkit-transition: opacity 150ms ease-in-out;
      transition: opacity 150ms ease-in-out;
      z-index: 1; }
      .control__1zL_T:last-of-type {
        right: 0; } }

.carouselWrapper__295Se {
  margin-bottom: -18px;
  overflow: hidden; }

.carousel__29rOz {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  height: 400px;
  margin: 32px 0 48px;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory; }
  @media screen and (min-width: 800px) {
    .carousel__29rOz {
      height: auto;
      overflow: hidden;
      -ms-scroll-snap-type: none;
          scroll-snap-type: none; } }
  @media screen and (min-width: 1024px) {
    .carousel__29rOz {
      height: 550px; } }

.slide__2OH4y {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 calc(100% - 40px);
          flex: 1 0 calc(100% - 40px);
  height: 400px;
  max-width: 100%;
  scroll-snap-align: center;
  text-align: center; }
  .slide__2OH4y:not(:last-child) {
    margin-right: 8px; }
  @media screen and (min-width: 600px) {
    .slide__2OH4y {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-width: none; }
      .slide__2OH4y:not(:last-child) {
        margin-right: 32px; } }
  @media screen and (min-width: 1024px) {
    .slide__2OH4y {
      height: auto;
      -ms-flex-preferred-size: auto;
          flex-basis: auto;
      max-height: none; } }
  .slide__2OH4y img {
    max-height: 100%; }

.hidden__3nhh2 {
  opacity: 0;
  pointer-events: none; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.hero__3Kew1 {
  padding-bottom: 60px; }
  @media screen and (min-width: 1024px) {
    .hero__3Kew1 {
      padding-bottom: 120px; } }

.centerBlockAside__1VBr- {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1; }
  @media screen and (min-width: 1024px) {
    .centerBlockAside__1VBr- {
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: end;
      grid-row-gap: 90px;
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; } }
  .centerBlockAside__1VBr- > h2 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    padding: 0 0 40px; }
    @media screen and (min-width: 1024px) {
      .centerBlockAside__1VBr- > h2 {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        padding: 0; } }
  .centerBlockAside__1VBr- .centerBlockAsideShape__12aHJ {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1; }
    @media screen and (min-width: 1024px) {
      .centerBlockAside__1VBr- .centerBlockAsideShape__12aHJ {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2; } }

.mainShapes__2n5B5 {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3; }
  @media screen and (min-width: 1024px) {
    .mainShapes__2n5B5 {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1; } }
  .mainShapes__2n5B5 svg {
    height: 100%;
    width: 100%; }

.leftShapes__YFH4P {
  margin-left: -60px;
  margin-right: 24px; }
  @media screen and (min-width: 1024px) {
    .leftShapes__YFH4P {
      margin: 0; } }

.rightShapes__1glo1 {
  margin-left: 24px;
  margin-right: -60px; }
  @media screen and (min-width: 1024px) {
    .rightShapes__1glo1 {
      margin: 0; } }
  .rightShapes__1glo1 .blueSemicircle__3oxdQ {
    height: 60%;
    padding-bottom: 30px; }
    @media screen and (min-width: 1024px) {
      .rightShapes__1glo1 .blueSemicircle__3oxdQ {
        height: auto;
        padding-bottom: 0; } }

.greenTrapezoid__1FEbg {
  height: 100%; }
  @media screen and (min-width: 1024px) {
    .greenTrapezoid__1FEbg {
      height: auto;
      padding-bottom: 120px; } }

.host__2ddpA {
  padding: 60px 0; }
  @media screen and (min-width: 1024px) {
    .host__2ddpA {
      padding: 90px 0 160px; } }

.button__3UNst:not(:last-child) {
  margin-bottom: 12px;
  margin-right: 16px; }
  @media screen and (min-width: 600px) {
    .button__3UNst:not(:last-child) {
      margin-bottom: 0; } }

.find__1e7mz {
  margin-top: 40px; }
  @media screen and (min-width: 600px) {
    .find__1e7mz {
      margin-top: 80px; } }
  @media screen and (min-width: 1024px) {
    .find__1e7mz {
      margin-top: 160px; } }

.photoSection__1v2G6 {
  margin: 32px 0; }
  @media screen and (min-width: 1024px) {
    .photoSection__1v2G6 {
      margin: 120px 0 0; } }
  .photoSection__1v2G6 [class^=button] {
    margin-top: 24px; }

.wrapper__2SqQI {
  height: 400px;
  margin: 24px 0 32px; }
  @media screen and (min-width: 600px) {
    .wrapper__2SqQI {
      height: 675px;
      margin: 80px 0 32px; } }

.formInput___3hZC {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #FFFFFF;
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 16px;
  margin-bottom: 8px;
  max-width: 384px;
  padding-right: 8px;
  position: absolute;
  top: 24px;
  width: calc(100% - 36px);
  z-index: 1; }
  @media screen and (min-width: 600px) {
    .formInput___3hZC {
      -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
              box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
      left: 24px;
      margin-bottom: 0;
      margin-right: 32px;
      padding: 8px 12px; } }
  .formInput___3hZC input {
    font-size: 15px;
    line-height: 28px;
    font-weight: 400;
    border-radius: 4px;
    border: 0;
    padding: 5px 10px;
    width: 100%; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
@media screen and (min-width: 1024px) {
  .extendedFormPage__90ECF {
    margin-top: 160px; } }

.formContent__2q36W {
  padding-bottom: 80px; }
  @media screen and (min-width: 600px) {
    .formContent__2q36W {
      -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
              box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
      margin-bottom: 120px; } }
  @media screen and (min-width: 1024px) {
    .formContent__2q36W {
      padding-bottom: 120px; } }

.section__3MKW8 {
  border-bottom: 1px solid #F1F3F4;
  padding: 40px 0; }
  @media screen and (max-width: 600px) {
    .section__3MKW8:last-child {
      border: 0;
      padding-bottom: 0; } }

.header__2ocQW {
  background: #1A73E8;
  color: #FFFFFF;
  margin: 64px -32px 0;
  padding: 50px 56px 24px; }
  @media screen and (min-width: 600px) {
    .header__2ocQW {
      padding: 127px 32px 52px 80px;
      margin: 0; } }
  .header__2ocQW h2 {
    color: inherit; }

.intro__24z0r {
  padding: 40px 0 0; }
  .intro__24z0r p {
    margin-bottom: 0; }

.mapSection__2RJ8e {
  margin-top: 40px; }

.mapWrapper__2qzj2 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

.steps__3NiMY ol {
  margin-bottom: 0; }

.flex__2oVaW > section {
  padding: 0 24px; }
  @media screen and (min-width: 600px) {
    .flex__2oVaW > section {
      padding: 0 80px; } }

.flex__2oVaW {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.googleMapWrapper__1WAvv {
  height: 275px; }
  @media screen and (min-width: 600px) {
    .googleMapWrapper__1WAvv {
      height: 230px; } }

.buttonWrapper__3PE_f {
  margin-top: 32px; }
  @media screen and (min-width: 600px) {
    .buttonWrapper__3PE_f {
      margin-top: 40px; } }

.form__2OlC9 input {
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  border: 0;
  border-bottom: 1px solid #E8EAED;
  margin: 24px 0;
  max-width: 100%;
  padding: 8px 0;
  width: 400px; }
  @media screen and (min-width: 600px) {
    .form__2OlC9 input {
      margin-bottom: 42px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.faqPage__2-WzM {
  padding-bottom: 80px; }
  @media screen and (min-width: 600px) {
    .faqPage__2-WzM {
      padding-bottom: 132px; } }

.faqList__teEUR {
  padding: 60px 0; }
  @media screen and (min-width: 600px) {
    .faqList__teEUR {
      padding: 160px 0; } }

/* FAQ */
.faqSection__1sByk {
  margin-top: 60px; }
  @media screen and (min-width: 800px) {
    .faqSection__1sByk {
      margin-top: 120px; } }

.faqGroup__280DR {
  margin-top: 48px; }
  .faqGroup__280DR h2 {
    margin-bottom: 0px; }
    @media screen and (min-width: 800px) {
      .faqGroup__280DR h2 {
        margin-bottom: 24px; } }

.faqRaw__3R9fM {
  padding-bottom: 24px; }
  @media screen and (min-width: 800px) {
    .faqRaw__3R9fM {
      padding-bottom: 32px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.accordion__26igH {
  border-bottom: 2px solid #E8EAED; }

.accordionHeader__2hDlf {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 32px 0; }
  .accordionHeader__2hDlf h5 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #1A73E8;
    font-family: "Google Sans", arial, sans-serif; }
  .accordionHeader__2hDlf i {
    -webkit-transition: -webkit-transform 150ms ease-in-out;
    transition: -webkit-transform 150ms ease-in-out;
    transition: transform 150ms ease-in-out;
    transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
    margin-left: 24px; }

.accordionHeaderIsOpen__1oeR3 i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

.accordionBody__3GgTP {
  overflow: hidden;
  -webkit-transition: height 150ms ease-in-out, visibility step-end 150ms;
  transition: height 150ms ease-in-out, visibility step-end 150ms;
  visibility: hidden;
  height: 0px; }
  @media screen and (min-width: 600px) {
    .accordionBody__3GgTP {
      padding-right: 120px; } }
  .accordionBody__3GgTP p:first-of-type {
    margin-top: 0; }

.accordionBodyIsOpen__209uX {
  -webkit-transition: height 150ms ease-in-out;
  transition: height 150ms ease-in-out;
  visibility: visible; }

.accordionBodyText__eeytD {
  margin: 0 0 32px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.countdownParent__msyyF {
  position: relative;
  -webkit-transition: height 0.5s ease, margin 0.5s ease, padding 0.5s ease;
  transition: height 0.5s ease, margin 0.5s ease, padding 0.5s ease; }

.countdownParentAsRow__5ZW27 {
  margin-bottom: 100px;
  padding-top: 100px; }

.hiddenCountdownParent__11i77 {
  margin-bottom: 0;
  overflow: hidden;
  padding-top: 0; }

.countdown__18LcE {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: calc(100% - 16px);
  position: relative; }
  @media screen and (min-width: 600px) {
    .countdown__18LcE {
      max-width: calc(100% - 40px); } }
  @media screen and (min-width: 1024px) {
    .countdown__18LcE {
      max-width: 100%; } }

.unitWrapper__13Wqe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: calc(50% - calc(calc(calc(calc(100% - 120px) / 7) * 1) + calc(0px) + 0px)/2); }

.unitWrapper__13Wqe:nth-child(1),
.unitWrapper__13Wqe:nth-child(2) {
  margin-bottom: 64px; }

.unitWrapper__13Wqe:nth-child(2n) {
  margin-left: calc(calc(calc(calc(100% - 120px) / 7) * 1) + calc(0px) + 0px); }

@media screen and (min-width: 600px) {
  .countdownAsRow__1aWrv {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap; }
    .countdownAsRow__1aWrv .unitWrapper__13Wqe {
      margin: 0 0 0 calc(calc(calc(calc(100% - 220px) / 12) * 1) + calc(0px) + 0px); }
    .countdownAsRow__1aWrv .unitWrapper__13Wqe:nth-child(1) {
      margin-left: 0; } }

.digit__1D_P6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%; }

.digit__1D_P6:nth-child(2n) {
  margin-left: 8px; }

.unitLabel__3Dg6U {
  bottom: 0;
  font-size: 14px;
  font-weight: 500;
  position: absolute;
  right: -8px;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease; }

.hiddenUnitLabel__4qOWj {
  opacity: 0;
  pointer-events: none; }

.digit__1D_P6 svg path {
  stroke-linecap: square; }

.blue__pcWbZ.darkfill__7xD7Y path {
  fill: #3d82f8; }

.blue__pcWbZ.lightfill__3H25a path {
  fill: #d1e3fd; }

.blue__pcWbZ.darkstroke__21N80 path {
  stroke: #adcaf9; }

.blue__pcWbZ.lightstroke__3hpbj path {
  stroke: #d1e3fd; }

.red__3FOMK.darkfill__7xD7Y path {
  fill: #e5443f; }

.red__3FOMK.lightfill__3H25a path {
  fill: #fce8e6; }

.red__3FOMK.darkstroke__21N80 path {
  stroke: #fad2cf; }

.red__3FOMK.lightstroke__3hpbj path {
  stroke: #fce8e6; }

.yellow__3lFL-.darkfill__7xD7Y path {
  fill: #f9b923; }

.yellow__3lFL-.lightfill__3H25a path {
  fill: #feeec3; }

.yellow__3lFL-.darkstroke__21N80 path {
  stroke: #fce198; }

.yellow__3lFL-.lightstroke__3hpbj path {
  stroke: #feeec3; }

.green__34n68.darkfill__7xD7Y path {
  fill: #2ea94f; }

.green__34n68.lightfill__3H25a path {
  fill: #cdead5; }

.green__34n68.darkstroke__21N80 path {
  stroke: #a7dbb4; }

.green__34n68.lightstroke__3hpbj path {
  stroke: #cdead5; }

.countdownHashtag__uYEAX {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -33%);
          transform: translate(-50%, -33%); }
  @media screen and (min-width: 600px) {
    .countdownHashtag__uYEAX {
      width: 50%; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.twitterTabs__Y_E7B {
  padding: 0; }

.feedContainer__OkUV4 {
  margin-top: 60px; }
  @media screen and (min-width: 1024px) {
    .feedContainer__OkUV4 {
      margin-top: 100px; } }

.tweetWrapper__3LHPQ {
  padding-top: 24px; }
  @media screen and (min-width: 1024px) {
    .tweetWrapper__3LHPQ {
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      overflow-y: hidden;
      padding-top: 32px;
      position: relative; }
      .tweetWrapper__3LHPQ:after {
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(90%, white));
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 90%);
        bottom: 0;
        content: "";
        height: 250px;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: 1; } }

@media screen and (min-width: 1024px) {
  .tweetWrapperNoTweetsLeft__1GgH4:after {
    display: none; } }

.tweetColumn__1DuA4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 calc(50% - 12px);
          flex: 0 1 calc(50% - 12px); }
  .tweetColumn__1DuA4 .tweet__3amYw:not(:last-child) {
    margin-bottom: 24px; }

@media screen and (min-width: 600px) {
  .feedInTabs__3Nsgx {
    padding-bottom: 40px; } }

.feedInTabs__3Nsgx .feedHeading__DJasB h4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400; }
  @media screen and (min-width: 600px) {
    .feedInTabs__3Nsgx .feedHeading__DJasB h4 {
      font-size: 32px;
      line-height: 40px;
      font-weight: 400; } }

.feedHeading__DJasB {
  position: relative; }
  .feedHeading__DJasB h4 {
    padding-bottom: 24px; }
  .feedHeading__DJasB:not(.feedInTabs__3Nsgx):after {
    border-bottom: 1px solid #E8EAED;
    content: '';
    left: -500px;
    position: absolute;
    right: -500px;
    width: 10000px; }

.showMoreFooter__18xlQ {
  margin: 24px 0 48px;
  text-align: center; }
  @media screen and (min-width: 1024px) {
    .showMoreFooter__18xlQ {
      margin-top: 48px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.tweet__7gmmk {
  border-radius: 8px;
  border: 1px solid #E8EAED; }
  .tweet__7gmmk:not(:last-child) {
    margin-bottom: 24px; }

.header__1EdY0 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 16px 24px; }
  .header__1EdY0 h6 {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500; }
  .header__1EdY0 .tweetIcon__1bhsg {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 24px;
            flex: 0 0 24px;
    margin-right: 12px;
    overflow: hidden; }

.headerByGoogle__S5-HA {
  background: #F1F3F4; }

.body__it-Dg {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  margin: 0;
  padding: 12px 24px 16px; }
  .body__it-Dg a {
    color: #1A73E8 !important; }

.inlineImage__3SaBh {
  margin-top: 24px; }

.footer__d3NJM {
  font-size: 13px;
  line-height: 24px;
  font-weight: 400;
  color: #5F6368;
  font-family: "Roboto", arial, sans-serif;
  padding: 0 24px 12px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.feedHero__14fuh {
  overflow: hidden;
  position: relative;
  -webkit-transition: height 0.25s ease-in-out;
  transition: height 0.25s ease-in-out; }
  @media screen and (min-width: 800px) {
    .feedHero__14fuh {
      margin-right: -72px; } }

.tagline__2uRzy {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #FFFFFF; }
  @media screen and (min-width: 800px) {
    .tagline__2uRzy {
      font-size: 22px;
      line-height: 28px;
      font-weight: 400; } }
  @media screen and (min-width: 1024px) {
    .tagline__2uRzy {
      font-size: 32px;
      line-height: 40px;
      font-weight: 400; } }

.copy__1pYmn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-top: 24px;
  position: relative;
  z-index: 1; }
  @media screen and (min-width: 800px) {
    .copy__1pYmn {
      padding-top: 60px; } }

.hasDarkBg__TeHF- .copy__1pYmn {
  background-color: rgba(0, 0, 0, 0.7); }

.infoBottom__rNEf7 {
  bottom: 8px;
  left: 8px;
  position: absolute;
  text-align: left;
  width: 100%;
  z-index: 6; }
  @media screen and (min-width: 600px) {
    .infoBottom__rNEf7 {
      left: 60px; } }
  @media screen and (min-width: 1024px) {
    .infoBottom__rNEf7 {
      bottom: 24px;
      left: unset;
      margin-left: 0;
      right: 40px;
      text-align: right; } }
  .infoBottom__rNEf7 .watchButton__2fnd1 i {
    font-size: 24px; }

.hasImageBg__3wCGb {
  background-color: #000000; }
  .hasImageBg__3wCGb .imageBg__2LvIx {
    background-position: center 60%;
    opacity: 0.4; }

.height1__q9_AR {
  height: auto; }
  @media screen and (min-width: 800px) {
    .height1__q9_AR {
      height: 260px; } }

.height2__1r6pn {
  height: 330px; }

.height3__MoJ5F {
  height: 330px; }
  @media screen and (min-width: 800px) {
    .height3__MoJ5F {
      height: 500px; } }

.imageBg__2LvIx {
  background-clip: border-box;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%; }

.preEvent__2TqMF .header__3oLNM {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-right: 60px; }
  @media screen and (min-width: 800px) {
    .preEvent__2TqMF .header__3oLNM {
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; } }

.preEvent__2TqMF .tagline__2uRzy {
  color: #3C4043; }
  .preEvent__2TqMF .tagline__2uRzy > div {
    white-space: nowrap; }

.preEvent__2TqMF .logoColor__151Yv {
  margin-right: 100px; }
  @media screen and (min-width: 800px) {
    .preEvent__2TqMF .logoColor__151Yv {
      margin: 0 0 24px; } }

.logoWhite__4UGsf {
  margin-bottom: 24px; }
  @media screen and (max-width: 600px) {
    .logoWhite__4UGsf {
      margin-bottom: 8px; } }
  @media screen and (min-width: 800px) {
    .logoWhite__4UGsf {
      margin-bottom: 16px; } }

.logoWhite__4UGsf svg,
.logoColor__151Yv svg {
  max-height: 50px;
  min-width: 50px;
  width: auto; }
  @media screen and (min-width: 800px) {
    .logoWhite__4UGsf svg,
    .logoColor__151Yv svg {
      max-height: 88px; } }

.videoFullWidth__1CK-b {
  height: 0;
  left: 50%;
  padding-bottom: 100%;
  position: absolute;
  top: 20%;
  -webkit-transform: translate(-50%, -20%);
          transform: translate(-50%, -20%);
  width: 177.777%; }

.playButtonWrapper__CdKD_ {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2; }

.playButton__1aEOb {
  opacity: 0.5;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out; }
  .playButton__1aEOb:hover, .playButton__1aEOb:focus {
    opacity: 1; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.snackbar__36g5h {
  bottom: 16px;
  left: 16px;
  max-width: calc(100% - 32px);
  pointer-events: none;
  position: fixed;
  width: 100%;
  z-index: 399; }
  @media screen and (min-width: 600px) {
    .snackbar__36g5h {
      max-width: 344px; } }

.snackbarWithFab__3sfnf {
  bottom: 84px; }

.snack__3oCS4 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background: #202124;
  border-radius: 4px;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  left: 0;
  opacity: 0;
  padding: 16px;
  position: absolute;
  -webkit-transform: translateY(8px);
          transform: translateY(8px);
  -webkit-transition: opacity 200ms cubic-bezier(0.33, 0, 0.49, 0.99), -webkit-transform 200ms cubic-bezier(0.33, 0, 0.49, 0.99);
  transition: opacity 200ms cubic-bezier(0.33, 0, 0.49, 0.99), -webkit-transform 200ms cubic-bezier(0.33, 0, 0.49, 0.99);
  transition: transform 200ms cubic-bezier(0.33, 0, 0.49, 0.99), opacity 200ms cubic-bezier(0.33, 0, 0.49, 0.99);
  transition: transform 200ms cubic-bezier(0.33, 0, 0.49, 0.99), opacity 200ms cubic-bezier(0.33, 0, 0.49, 0.99), -webkit-transform 200ms cubic-bezier(0.33, 0, 0.49, 0.99);
  width: 100%; }
  @media screen and (min-width: 600px) {
    .snack__3oCS4 {
      -webkit-transform: translateY(calc(100% + 24px));
              transform: translateY(calc(100% + 24px)); } }

.snackEntering__1R81h {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0);
          transform: translateY(0); }

.snackLeaving__1Kdis {
  opacity: 0;
  -webkit-transform: translateY(8px);
          transform: translateY(8px); }
  @media screen and (min-width: 600px) {
    .snackLeaving__1Kdis {
      -webkit-transform: translateY(calc(100% + 24px));
              transform: translateY(calc(100% + 24px)); } }

.text__19Q2D {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #DADCE0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-family: "Roboto", arial, sans-serif;
  margin: 0 16px 0 0; }

.button__3_bcI {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #8AB4F8;
  font-family: "Google Sans", arial, sans-serif; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.container__1EXBB {
  margin: 60px 0 0; }
  @media screen and (min-width: 1024px) {
    .container__1EXBB {
      margin: 100px 0 0; } }

.title__3SxI8 {
  margin-bottom: 24px; }
  @media screen and (min-width: 1024px) {
    .title__3SxI8 {
      margin-bottom: 32px; } }

.cards__CS5vK {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; }

.card__3wzdQ,
.banner__2L77c,
.cards__CS5vK > span {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%; }
  @media screen and (min-width: 1024px) {
    .card__3wzdQ,
    .banner__2L77c,
    .cards__CS5vK > span {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 calc(50% - 16px);
              flex: 1 0 calc(50% - 16px); }
      .card__3wzdQ:nth-child(2n + 1):not(:last-child),
      .banner__2L77c:nth-child(2n + 1):not(:last-child),
      .cards__CS5vK > span:nth-child(2n + 1):not(:last-child) {
        margin-right: 32px; }
      .card__3wzdQ:not(:last-child),
      .banner__2L77c:not(:last-child),
      .cards__CS5vK > span:not(:last-child) {
        margin-bottom: 32px; } }

.card__3wzdQ,
.banner__2L77c,
.cards__CS5vK > span > .card__3wzdQ {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 230px;
  margin-bottom: 32px;
  overflow: hidden;
  position: relative;
  -webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
  transition: -webkit-box-shadow 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out; }
  @media screen and (min-width: 600px) {
    .card__3wzdQ,
    .banner__2L77c,
    .cards__CS5vK > span > .card__3wzdQ {
      height: 290px; } }
  .card__3wzdQ:focus, .card__3wzdQ:hover,
  .banner__2L77c:focus,
  .banner__2L77c:hover,
  .cards__CS5vK > span > .card__3wzdQ:focus,
  .cards__CS5vK > span > .card__3wzdQ:hover {
    -webkit-box-shadow: 0 2px 3px 0 rgba(60, 64, 67, 0.3), 0 6px 10px 4px rgba(60, 64, 67, 0.15);
            box-shadow: 0 2px 3px 0 rgba(60, 64, 67, 0.3), 0 6px 10px 4px rgba(60, 64, 67, 0.15);
    outline: none; }
  .card__3wzdQ h4,
  .banner__2L77c h4,
  .cards__CS5vK > span > .card__3wzdQ h4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    max-width: 230px; }
    @media screen and (min-width: 1024px) {
      .card__3wzdQ h4,
      .banner__2L77c h4,
      .cards__CS5vK > span > .card__3wzdQ h4 {
        font-size: 22px;
        line-height: 28px;
        font-weight: 400;
        max-width: 280px; } }
    @media screen and (min-width: 2400px) {
      .card__3wzdQ h4,
      .banner__2L77c h4,
      .cards__CS5vK > span > .card__3wzdQ h4 {
        max-width: 500px; } }
  .card__3wzdQ [class^=cardContent],
  .banner__2L77c [class^=cardContent],
  .cards__CS5vK > span > .card__3wzdQ [class^=cardContent] {
    padding: 30px 20px; }
  .card__3wzdQ a,
  .card__3wzdQ button,
  .banner__2L77c a,
  .banner__2L77c button,
  .cards__CS5vK > span > .card__3wzdQ a,
  .cards__CS5vK > span > .card__3wzdQ button {
    bottom: 30px;
    left: 20px;
    position: absolute; }

@media screen and (min-width: 1024px) {
  .banner__2L77c {
    height: auto;
    width: 100%; }
    .banner__2L77c a,
    .banner__2L77c button {
      left: 60px; } }

@media screen and (min-width: 1280px) {
  .banner__2L77c a,
  .banner__2L77c button {
    left: 100px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.concertCard__1AZLn {
  background-color: #252729; }
  .concertCard__1AZLn h4 {
    color: #FFFFFF;
    margin-bottom: 8px;
    max-width: 290px; }
  .concertCard__1AZLn a,
  .concertCard__1AZLn button {
    position: relative;
    margin-left: -8px;
    bottom: unset;
    left: unset; }

.beforeConcert__27WY7 img {
  -o-object-fit: contain;
     object-fit: contain; }
  @media screen and (min-width: 600px) {
    .beforeConcert__27WY7 img {
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: 0 20px;
         object-position: 0 20px; } }
  @media screen and (min-width: 1280px) {
    .beforeConcert__27WY7 img {
      -o-object-position: 0 -20px;
         object-position: 0 -20px; } }
  @media screen and (min-width: 2400px) {
    .beforeConcert__27WY7 img {
      -o-object-position: 0 -200px;
         object-position: 0 -200px; } }

.duringConcert__1KsmQ [class^='cardContent'] {
  position: absolute;
  bottom: 0; }

.duringConcert__1KsmQ img {
  -o-object-fit: contain;
     object-fit: contain; }
  @media screen and (min-width: 600px) {
    .duringConcert__1KsmQ img {
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: -20px -20px;
         object-position: -20px -20px; } }
  @media screen and (min-width: 1024px) {
    .duringConcert__1KsmQ img {
      -o-object-fit: contain;
         object-fit: contain;
      -o-object-position: center;
         object-position: center; } }
  @media screen and (min-width: 2400px) {
    .duringConcert__1KsmQ img {
      -o-object-fit: contain;
         object-fit: contain;
      -o-object-position: center;
         object-position: center; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.guides__2QR8B img {
  -o-object-position: left;
     object-position: left; }
  @media screen and (min-width: 1024px) {
    .guides__2QR8B img {
      -o-object-position: center;
         object-position: center; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.banner__qUvv_ {
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  height: 400px; }

.mapCard__2SUOq {
  position: relative; }

.banner__qUvv_:focus, .banner__qUvv_:hover,
.mapCard__2SUOq:focus,
.mapCard__2SUOq:hover {
  -webkit-box-shadow: 0 4px 4px 0 rgba(60, 64, 67, 0.3), 0 8px 12px 6px rgba(60, 64, 67, 0.15);
          box-shadow: 0 4px 4px 0 rgba(60, 64, 67, 0.3), 0 8px 12px 6px rgba(60, 64, 67, 0.15); }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.container__2fvDi {
  position: relative; }

.image__3tL7H {
  margin-left: -200%;
  margin-right: -200%;
  padding-left: 200%;
  padding-right: 200%;
  background: url("/2019/assets/images/live-experience/feed/explore/MapDayBanner@2x.png");
  background-position: center center;
  background-repeat: no-repeat;
  height: 384px; }
  @media screen and (min-width: 600px) {
    .image__3tL7H {
      background-image: url("/2019/assets/images/live-experience/feed/explore/MapDayBanner@3x.png");
      height: 512px; } }
  @media screen and (min-width: 1280px) {
    .image__3tL7H {
      background-position: 50% 33%;
      height: 710px; } }

.card__3LvVH {
  margin-bottom: 32px;
  /* reset _only_ for mobile */ }
  @media screen and (max-width: 1024px) {
    .card__3LvVH {
      border: none;
      padding: 0; }
      .card__3LvVH [class^=cardContent] {
        padding: 0; } }
  .card__3LvVH h5 {
    margin-bottom: 16px; }
    @media screen and (min-width: 1024px) {
      .card__3LvVH h5 {
        margin-bottom: 32px; } }
  @media screen and (min-width: 1024px) {
    .card__3LvVH {
      background: #FFFFFF;
      bottom: 80px;
      margin: 0;
      position: absolute;
      right: 80px;
      width: 375px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.home__108pG {
  min-height: 100%;
  width: 100%; }

.hero__3FjgL {
  margin-bottom: 56px; }
  @media screen and (min-width: 600px) {
    .hero__3FjgL {
      margin-bottom: 120px; } }

.heroContent__2O_wD {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  @media screen and (min-width: 1024px) {
    .heroContent__2O_wD {
      display: block; } }

.heroLogo__KffVt {
  width: 50%; }
  @media screen and (min-width: 1024px) {
    .heroLogo__KffVt {
      margin-top: 8%; } }

.heroTitle__2LfeZ {
  margin-top: 20px; }
  @media screen and (min-width: 1024px) {
    .heroTitle__2LfeZ {
      margin-bottom: 28px;
      margin-top: 40px; } }

.heroQuarterCircles__2c0H9 svg,
.heroSemiCircle__jmfX7 svg {
  width: 100%; }

.heroSemiCircle__jmfX7 {
  margin-top: auto; }

.intro__Q3B9d {
  margin-bottom: 60px; }
  @media screen and (min-width: 600px) {
    .intro__Q3B9d {
      margin-bottom: 160px; } }

.introHeadline__1P8Es {
  margin-bottom: 60px; }
  @media screen and (min-width: 600px) {
    .introHeadline__1P8Es {
      margin-bottom: 40px; } }
  @media screen and (min-width: 1024px) {
    .introHeadline__1P8Es {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1;
      margin-bottom: 0;
      position: relative; } }
  @media screen and (min-width: 1280px) {
    .introHeadline__1P8Es {
      padding-top: 80px; } }

.introIllustrations__1Dj-A {
  padding-top: 60px;
  position: relative; }
  @media screen and (min-width: 600px) {
    .introIllustrations__1Dj-A {
      padding-top: 140px; } }
  @media screen and (min-width: 1024px) {
    .introIllustrations__1Dj-A {
      padding-top: 100px; } }
  @media screen and (min-width: 1280px) {
    .introIllustrations__1Dj-A {
      padding-top: 0; } }

.introIllustrationsCircle__3mVNb {
  line-height: 0;
  position: absolute;
  right: 0;
  width: calc(calc(calc(calc(calc(100% - 60px) / 4) * 2) + calc(20px) + 0px) - 16px); }
  @media screen and (min-width: 1024px) {
    .introIllustrationsCircle__3mVNb {
      bottom: 0;
      left: 0;
      position: absolute;
      width: calc(calc(calc(calc(100% - 80px) / 5) * 2) + calc(20px) + 0px); } }
  .introIllustrationsCircle__3mVNb svg {
    width: 100%; }

.introIllustrationsTriangle__1yEz4 {
  bottom: 0;
  left: calc(calc(calc(calc(100% - 60px) / 4) * 3) + calc(40px) + 20px);
  line-height: 0;
  position: absolute;
  width: calc(calc(calc(calc(100% - 60px) / 4) * 2) + calc(20px) + 0px); }
  @media screen and (min-width: 1024px) {
    .introIllustrationsTriangle__1yEz4 {
      bottom: 0;
      left: calc(calc(calc(calc(100% - 80px) / 5) * 3) + calc(40px) + 20px);
      position: absolute;
      width: calc(calc(calc(calc(100% - 80px) / 5) * 3) + calc(40px) + 0px); } }
  .introIllustrationsTriangle__1yEz4 svg {
    width: 100%; }

.themes__1aG-h {
  margin-bottom: 80px; }

.themesTitle__1N6Ja {
  margin-bottom: 32px; }

@media screen and (min-width: 1024px) {
  .themesList__1T2K2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .themesList__1T2K2 > * {
      width: calc(calc(calc(calc(100% - 100px) / 6) * 3) + calc(40px) + 0px); } }
    @media screen and (min-width: 1024px) and (min-width: 1280px) {
      .themesList__1T2K2 > * {
        width: calc(calc(calc(calc(100% - 140px) / 6) * 3) + calc(56px) + 0px); } }

.themesListItem__zF7R2 {
  margin-bottom: 32px; }
  @media screen and (min-width: 1024px) {
    .themesListItem__zF7R2 {
      margin-bottom: 60px; } }

.themeChip__35UB- {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  border-radius: 8px;
  display: inline-block;
  font-family: "Roboto Mono", arial, sans-serif;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  padding: 8px 12px; }
  @media screen and (min-width: 1024px) {
    .themeChip__35UB- {
      font-size: 20px;
      line-height: 24px;
      font-weight: 400;
      margin-bottom: 16px; } }

.themeChipPlatforms__19CcM {
  background-color: #D2E3FC;
  color: #174EA6; }

.themeChipGrow__3dxeK {
  background-color: #FEF7E0;
  color: #B06000; }

.themeChipBuildingMobile__3Tj3u {
  background-color: #FCE8E6;
  color: #B31412; }

.themeChipBeyondMobile__2_yiK {
  background-color: #CEEAD6;
  color: #0D652D; }

.codelabs__1aUpQ {
  margin-bottom: 40px; }
  @media screen and (min-width: 600px) {
    .codelabs__1aUpQ {
      margin-bottom: 80px; } }
  @media screen and (min-width: 1280px) {
    .codelabs__1aUpQ {
      margin-bottom: 120px; } }

.codelabsHeader__15r1B {
  margin-bottom: 24px; }
  @media screen and (min-width: 600px) {
    .codelabsHeader__15r1B {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-bottom: 32px; } }

@media screen and (min-width: 800px) {
  .codelabsCards__22Nm9 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

.codelabsCardLink__2etfY {
  display: block;
  margin-bottom: 24px; }
  @media screen and (min-width: 800px) {
    .codelabsCardLink__2etfY {
      -webkit-box-flex: 0;
          -ms-flex: 0 1 33.33%;
              flex: 0 1 33.33%; } }
  @media screen and (min-width: 800px) {
    .codelabsCardLink__2etfY:not(:nth-child(3n)) {
      margin-right: 32px; } }
  @media screen and (min-width: 1024px) {
    .codelabsCardLink__2etfY:not(:nth-child(3n)) {
      margin-right: 48px; } }
  @media screen and (min-width: 1280px) {
    .codelabsCardLink__2etfY:not(:nth-child(3n)) {
      margin-right: 64px; } }

.codelabsCard__2A70g {
  height: 100%; }
  .codelabsCard__2A70g > div {
    height: 100%; }
    .codelabsCard__2A70g > div > div {
      height: 100%; }

.codelabsCardContent__8_bDc {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%; }

.codelabsCardIcon__3RfuJ {
  margin-bottom: 24px;
  max-height: 40px; }

.codelabsCardTitle__1UY0F {
  margin-bottom: 20px; }

.codelabsCardMeta__3XbfM {
  margin-top: auto; }

.codelabsCardDuration__1xD3V {
  color: #3C4043;
  font-weight: 400;
  margin-right: 8px; }

.recap__2oeAd {
  margin-bottom: 60px; }
  @media screen and (min-width: 600px) {
    .recap__2oeAd {
      margin-bottom: 160px; } }

.recapVideoRatio__32MwU {
  margin-bottom: 40px;
  position: relative;
  padding-top: 56.25%; }
  @media screen and (min-width: 600px) {
    .recapVideoRatio__32MwU {
      margin-bottom: 120px; } }
  @media screen and (min-width: 1024px) {
    .recapVideoRatio__32MwU {
      margin-bottom: 80px; } }
  @media screen and (min-width: 1280px) {
    .recapVideoRatio__32MwU {
      margin-bottom: 120px; } }

.recapVideoFrame__2qcdb {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

@media screen and (min-width: 600px) {
  .recapText__1olDW {
    margin-bottom: 16px; } }

@media screen and (min-width: 1024px) {
  .recapText__1olDW {
    margin-bottom: -100%; } }

.recapTitle__2lEc9 {
  margin-bottom: 16px;
  z-index: 1; }
  @media screen and (min-width: 600px) {
    .recapTitle__2lEc9 {
      margin-bottom: 32px; } }
  @media screen and (min-width: 1024px) {
    .recapTitle__2lEc9 {
      margin-bottom: 32px; } }

.recapIllustration__2XzUB {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  pointer-events: none; }
  @media screen and (min-width: 1024px) {
    .recapIllustration__2XzUB {
      padding-top: 100px; } }
  @media screen and (min-width: 1280px) {
    .recapIllustration__2XzUB {
      padding-top: 0; } }

.recapTriangle__1XKRX {
  width: 30%; }
  @media screen and (min-width: 1024px) {
    .recapTriangle__1XKRX {
      width: 40%; } }

.recapImage__RXP-F {
  width: 60%; }
  @media screen and (min-width: 1024px) {
    .recapImage__RXP-F {
      width: 50%; } }

.countdown__3tgbz {
  margin-top: 60px; }
  @media screen and (min-width: 600px) {
    .countdown__3tgbz {
      margin-top: 120px; } }
  @media screen and (min-width: 1024px) {
    .countdown__3tgbz {
      margin-top: 0; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.drawer__bzxLk {
  -webkit-box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
          box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  -webkit-overflow-scrolling: touch;
  background-color: #FFFFFF;
  border-radius: 24px 24px 0 0;
  bottom: 0;
  display: block;
  max-height: calc(100% - 35px);
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  right: 0;
  top: 35px;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: visibility 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  transition: visibility 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  width: 100%;
  visibility: hidden;
  z-index: 199; }
  @media screen and (min-width: 600px) {
    .drawer__bzxLk {
      border-radius: 24px 0 0 0;
      min-height: 100vh;
      top: 0;
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
      width: 445px; } }

.drawerOpened__3gl4g .drawer__bzxLk {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  visibility: visible; }

.drawerInner__1bfy8 {
  overflow: auto; }

.drawerCloseButton__E0foV {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 1; }
  @media screen and (min-width: 1024px) {
    .drawerCloseButton__E0foV {
      right: 24px;
      top: 24px; } }

.darkUnderlay__1RBQ5 {
  z-index: 198; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.eventFilters__3iR7N {
  padding: 24px; }
  @media screen and (min-width: 1024px) {
    .eventFilters__3iR7N {
      padding: 32px; } }

.filtersSection__2359t:not(:last-child) {
  margin-bottom: 24px; }
  @media screen and (min-width: 1024px) {
    .filtersSection__2359t:not(:last-child) {
      margin-bottom: 32px; } }

.filtersSection__2359t h5 {
  margin-bottom: 20px; }

.filtersSectionGrey__1TgLI {
  background-color: #F8F9FA;
  padding: 18px 24px;
  margin-left: -24px;
  width: calc(100% + (24px * 2)); }
  @media screen and (min-width: 1024px) {
    .filtersSectionGrey__1TgLI {
      padding: 18px 32px;
      margin-left: -32px;
      width: calc(100% + (32px * 2)); } }
  .filtersSectionGrey__1TgLI h5 {
    margin-bottom: 0; }

.filterSwitches__1CR_8 {
  margin-bottom: 24px; }

.filtersSwitch__2PJgr {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.header__2veg0 {
  position: relative; }

.headerTitle__2g_Nu {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase; }

.resetButton__3EqFO {
  left: -8px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }

.twoCols__1hst8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .twoCols__1hst8 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 4px);
            flex: 0 0 calc(50% - 4px); }

.tagButton__XuqVF {
  border-radius: 6px;
  padding: 0;
  margin-bottom: 12px; }

.tag__79Ld4 {
  padding-left: 8px !important;
  padding-right: 8px !important; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.switch__mJ7eY {
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  padding: 4px 0;
  position: relative; }

.icon__1eyT1 {
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  background: #FFFFFF;
  border-radius: 50%;
  color: #1A73E8;
  font-size: 16px;
  left: 0;
  padding: 4px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all ease 300ms;
  transition: all ease 300ms; }
  .on__29P0k .icon__1eyT1 {
    background: #1A73E8;
    color: #FFFFFF;
    left: calc(100% - 24px); }

.track__3TS1d {
  background-color: #1A73E8;
  border-radius: 8px;
  height: 16px;
  opacity: 0.3;
  width: 40px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.block__36Ty- {
  border: 1px solid transparent;
  background: top/contain no-repeat;
  height: 1720px;
  margin-left: -1px;
  position: relative;
  width: 370px; }

.blockWithBorders__2emjz {
  border-left: 1px solid #E8EAED;
  border-right: 1px solid #E8EAED;
  border-top: 1px solid #E8EAED; }

.image__xu803 {
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  right: 0;
  top: 0; }

.title__2iEVk {
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  margin: 32px;
  position: relative;
  z-index: 1; }
  .darkMode__3lxXE .title__2iEVk {
    color: #FFFFFF; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.block__1AMCW {
  background: top/contain no-repeat url("/2019/assets/images/live-experience/live/Livestream-Pre-Conference_1x.png");
  border-right: 1px solid #E8EAED;
  border-top: 1px solid #E8EAED;
  height: 1720px;
  margin-left: -1px;
  width: 1110px; }

.content__3CpuX {
  margin: 70px;
  max-width: 410px; }

.title__1JFbc {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400; }

.keynotesHolder__10g0A {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 24px; }
  .keynotesHolder__10g0A > * {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto; }

.keynoteTitle__SVqym {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400; }

.keynoteTime__1MLio {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase; }

.timeLabel__3yZWD {
  text-transform: uppercase; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.timeIndicator__1U_Se {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  bottom: 0;
  display: none;
  font-family: "Roboto Mono", arial, sans-serif;
  letter-spacing: -0.2px;
  pointer-events: none;
  position: absolute;
  top: 16px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 10; }
  .timeIndicator__1U_Se span {
    background: #A8DAB5;
    border-radius: 6px;
    padding: 2px 4px;
    position: relative;
    z-index: 1; }
  .timeIndicator__1U_Se:after {
    background: #A8DAB5;
    content: '';
    display: block;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    width: 1px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.liveGrid__3PQPZ {
  position: relative; }

.heading__2xhnn {
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  color: #3C4043;
  font-family: "Roboto", arial, sans-serif;
  letter-spacing: 0.8px;
  text-transform: uppercase; }

.controls__GnW4Y {
  background: #FFFFFF;
  margin-top: -5px;
  padding-bottom: 5px;
  padding-right: 80px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20; }

.channelsGutter__1xeWZ {
  background: #FFFFFF;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 100px;
  z-index: 20; }
  .channelsGutter__1xeWZ .column__MXGzy {
    margin-left: 0; }

.channelHeading__2a8Rp {
  padding-left: 8px; }

.channelCell__1nasF {
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-right: 10px solid #E8EAED;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 172px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100px; }
  .channelCell__1nasF:not(:first-of-type) {
    border-top: 1px solid #E8EAED; }

.columns__3IJJH {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 100px;
  overflow: auto;
  position: relative; }

.columnHeader__2-2YP {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-bottom: 12px;
  min-height: 32px; }

.column__MXGzy {
  background: #F8F9FA;
  border-top: 1px solid #E8EAED;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: -1px; }

.cell__1McNO {
  height: 172px;
  position: relative; }
  .cell__1McNO:not(:first-of-type) {
    border-top: 1px solid #E8EAED; }

.sessionHolder__IvR_s {
  border-left: 1px solid #E8EAED;
  border-right: 1px solid #E8EAED;
  height: 100%;
  position: absolute; }

.sessionItem__2IXuX {
  background: white;
  padding: 20px;
  position: relative; }
  .sessionItem__2IXuX:focus {
    outline: none; }
  .sessionItem__2IXuX::after {
    -webkit-box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
            box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    width: 100%; }
  .sessionItem__2IXuX:hover:after, .sessionItem__2IXuX:focus:after {
    opacity: 1; }
  .sessionItem__2IXuX:hover {
    z-index: 10; }
  .pastBlock__re0CZ .sessionItem__2IXuX {
    background: transparent; }
  .sessionItem__2IXuX > * {
    -webkit-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out; }
  .sessionItem__2IXuX.sessionItemFiltered__3PfMW > * {
    opacity: .3; }

.sessionItem__2IXuX [class^=reserveControls] {
  top: 14px;
  right: 20px; }

.fillerBlock__1fFSU {
  z-index: 1; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.tabList__2rq2j {
  -webkit-animation: fadeIn__10hh8 2s;
          animation: fadeIn__10hh8 2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
  margin: 16px 0;
  padding: 0; }
  @media screen and (min-width: 800px) {
    .tabList__2rq2j {
      margin: 32px 0; } }

.activeTab__2ftbo {
  background-color: #1A73E8;
  color: #FFFFFF; }
  .activeTab__2ftbo:focus {
    background-color: #1A73E8 !important; }

.disabledTab__wF4ap {
  color: #BDC1C6; }

.tabListItem__3t0lj:not(:last-child) .tab__3-tlr {
  margin-right: 10px; }

.tab__3-tlr {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  border-radius: 18px;
  letter-spacing: 0.25px;
  padding: 6px 18px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear; }
  .tab__3-tlr:focus {
    background-color: #F8F9FA; }
  @media screen and (max-width: 400px) {
    .tab__3-tlr {
      padding-left: 10px;
      padding-right: 10px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.tab__3ESuv:hover {
  background-color: transparent; }

.activeTab__1zExf:hover {
  background-color: #669DF6 !important; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.header__jnGer {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-top: 44px; }
  @media screen and (max-width: 800px) {
    .header__jnGer {
      margin-left: -200%;
      margin-right: -200%;
      padding-left: 200%;
      padding-right: 200%;
      border-bottom: 1px solid #F1F3F4;
      padding-bottom: 32px; } }
  @media screen and (min-width: 400px) {
    .header__jnGer {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      padding-top: 0; } }
  @media screen and (min-width: 800px) {
    .header__jnGer {
      padding-top: 80px; } }

.stickyNav__tKb9R {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.grid__FkR9N {
  margin: 80px -16px 0; }
  @media screen and (min-width: 600px) {
    .grid__FkR9N {
      margin: 80px -60px 0; } }
  @media screen and (min-width: 1024px) {
    .grid__FkR9N {
      margin: 80px -40px 0; } }
  @media screen and (min-width: 1280px) {
    .grid__FkR9N {
      margin: 80px -80px 0; } }

.filterFab__2-csh {
  bottom: 72px;
  position: fixed;
  right: 12px;
  z-index: 20; }
  @media screen and (min-width: 800px) {
    .filterFab__2-csh {
      bottom: 24px;
      right: 32px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.stickyEnabled__2vcq5 {
  position: fixed;
  top: 0;
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  width: 100%;
  z-index: 10; }

.stickyWithNav__17BCP {
  -webkit-transform: translateY(64px);
          transform: translateY(64px); }

.proxy__9A7kq {
  display: none; }

.banner__2RhUV {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
          box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  background: #fff;
  bottom: 0;
  height: calc(100% + 100px);
  left: -100%;
  position: absolute;
  right: -100%;
  top: -100px;
  z-index: -1; }

.isHidden__CIji6 {
  display: none; }

.isVisible__1cddB {
  display: block; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.mapControls__2b-Zn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  position: fixed;
  right: 10px;
  z-index: 2; }
  @media screen and (min-width: 800px) {
    .mapControls__2b-Zn {
      bottom: 16px; } }
  .mapControls__2b-Zn button:not(:last-child) {
    margin-top: 10px; }
  @media screen and (min-width: 1024px) {
    .mapControls__2b-Zn {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      right: 24px;
      top: 72px; }
      .mapControls__2b-Zn button:not(:last-child) {
        margin-top: 0;
        margin-bottom: 10px; }
      .mapControls__2b-Zn button:first-child {
        margin-bottom: 24px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.mapWrapper__2Pf0m {
  background: #FFFFFF;
  height: 100vh;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 333ms ease-in, width .2s ease-in-out;
  transition: background-color 333ms ease-in, width .2s ease-in-out;
  z-index: 1; }

.mapWrapperWithDrawer__3aeJ1 {
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0; }
  @media screen and (min-width: 600px) {
    .mapWrapperWithDrawer__3aeJ1 {
      width: calc(100vw - 400px); } }

.mapControls__3ipVb {
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; }

@media screen and (min-width: 600px) {
  .mapControlsWithDrawer__32SzG {
    -webkit-transform: translateX(-445px);
            transform: translateX(-445px); } }

.mapWrapperNight__1XR0o {
  background: #465b63; }

.ioMap__2F4Lp {
  height: 100%;
  width: 100%; }

.content__1cXvV {
  padding: 0 20px;
  margin-top: 20px; }
  .content__1cXvV p:first-child {
    margin-top: 0; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.header__3Rra1 {
  padding: 30px 20px;
  background: #F8F9FA; }

.container__3t64w {
  overflow: hidden; }
  .container__3t64w .content__2C2-K {
    padding: 0 20px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.title__35r2A {
  padding: 0 20px;
  margin: 18px 0; }

.image__3Tcc4,
.image__3Tcc4 svg {
  overflow: hidden;
  height: 180px; }
  @media screen and (min-width: 600px) {
    .image__3Tcc4,
    .image__3Tcc4 svg {
      height: 180px; } }

.image__3Tcc4 img {
  max-width: none;
  max-height: 180px; }
  @media screen and (min-width: 600px) {
    .image__3Tcc4 img {
      max-height: 200px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
ul.appGrid__PXZWo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-top: 24px;
  text-align: center; }
  ul.appGrid__PXZWo li {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 calc(50% - 8px);
            flex: 0 1 calc(50% - 8px);
    margin-bottom: 16px; }
    @media screen and (max-width: 600px) {
      ul.appGrid__PXZWo li:nth-child(odd) {
        margin-right: 16px; } }
    @media screen and (min-width: 600px) {
      ul.appGrid__PXZWo li {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 calc(33% - 4px);
                flex: 0 1 calc(33% - 4px);
        margin-bottom: 8px; }
        ul.appGrid__PXZWo li:nth-child(3n - 1) {
          margin: 0 4px; } }
  ul.appGrid__PXZWo span {
    display: inline-block;
    font-size: 12px;
    margin-top: 8px;
    overflow: hidden;
    text-overflow: ellipsis; }

.appIcon__2W62z {
  background: #F8F9FA; }

.sandbox__3JvkY .title__NXOEl {
  padding: 22px 20px; }

.content__3nKy- {
  margin-top: 0;
  padding: 0 20px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.liveSnackbar__1px_C {
  bottom: 96px; }
  @media screen and (min-width: 600px) {
    .liveSnackbar__1px_C {
      bottom: 40px; } }
  @media screen and (min-width: 800px) {
    .liveSnackbar__1px_C {
      bottom: 16px;
      left: 48px; } }
  @media screen and (min-width: 1024px) {
    .liveSnackbar__1px_C {
      bottom: 16px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.hero__5N3o2 {
  margin-bottom: 52px; }
  @media screen and (min-width: 1024px) {
    .hero__5N3o2 {
      margin-bottom: 160px; } }

.heroTitle__1BMQE {
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  font-family: "Google Sans Display", arial, sans-serif;
  margin-bottom: 60px;
  padding-right: 40px; }
  @media screen and (max-width: 1280px) {
    .heroTitle__1BMQE br {
      display: none; } }
  @media screen and (min-width: 600px) {
    .heroTitle__1BMQE {
      font-size: 32px;
      line-height: 40px;
      font-weight: 400; } }
  @media screen and (min-width: 1280px) {
    .heroTitle__1BMQE {
      margin-bottom: 120px;
      padding-right: 0; } }
  @media screen and (min-width: 1340px) {
    .heroTitle__1BMQE {
      font-size: 44px;
      line-height: 52px;
      font-weight: 400; } }

@media screen and (min-width: 1280px) {
  .heroMiddleRow__2t1Rm {
    margin-bottom: 190px;
    margin-top: -190px; } }

.heroBottomRow__1SUEq {
  margin-top: 60px; }
  @media screen and (min-width: 1280px) {
    .heroBottomRow__1SUEq {
      margin-top: -40px;
      -webkit-box-align: baseline;
          -ms-flex-align: baseline;
              align-items: baseline; } }

@media screen and (max-width: 1280px) {
  .maskShape__1_4WL {
    margin-left: -16px;
    width: calc(100% + 16px); } }
  @media screen and (max-width: 1280px) and (min-width: 600px) {
    .maskShape__1_4WL {
      margin-left: -60px;
      width: calc(100% + 60px); } }
  @media screen and (max-width: 1280px) and (min-width: 1024px) {
    .maskShape__1_4WL {
      margin-left: -40px;
      width: calc(100% + 40px); } }
  @media screen and (max-width: 1280px) and (min-width: 1280px) {
    .maskShape__1_4WL {
      margin-left: -80px;
      width: calc(100% + 80px); } }

@media screen and (max-width: 1280px) {
  .yellowPurpleShapes__6Bst8 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: relative; } }

.purpleSquare__30xGc {
  background-color: #E9D2FD;
  height: 50%;
  margin-bottom: 70px;
  width: 150%; }
  @media screen and (min-width: 1280px) {
    .purpleSquare__30xGc {
      height: 190px;
      margin-bottom: 0;
      width: 100%;
      max-width: 190px; } }

.yellowSemicircle___yP_W svg {
  bottom: 0;
  left: 0;
  max-width: 300%;
  position: absolute;
  margin-left: -8px; }
  @media screen and (min-width: 1024px) {
    .yellowSemicircle___yP_W svg {
      right: -50%;
      width: 600px; } }
  @media screen and (min-width: 1280px) {
    .yellowSemicircle___yP_W svg {
      max-width: 300px;
      position: relative; } }
  .yellowSemicircle___yP_W svg > path {
    stroke-width: 16px; }

.heroVideoWrapper__3hg_1 {
  height: 0;
  padding-bottom: 56.25%;
  position: relative; }
  @media screen and (max-width: 1280px) {
    .heroVideoWrapper__3hg_1 {
      margin-left: -16px;
      margin-right: -16px;
      width: calc(100% + (2 * 16px)); } }
  @media screen and (max-width: 1280px) and (min-width: 600px) {
    .heroVideoWrapper__3hg_1 {
      margin-left: -60px;
      margin-right: -60px;
      width: calc(100% + (2 * 60px)); } }
  @media screen and (max-width: 1280px) and (min-width: 1024px) {
    .heroVideoWrapper__3hg_1 {
      margin-left: -40px;
      margin-right: -40px;
      width: calc(100% + (2 * 40px)); } }
  @media screen and (max-width: 1280px) and (min-width: 1280px) {
    .heroVideoWrapper__3hg_1 {
      margin-left: -80px;
      margin-right: -80px;
      width: calc(100% + (2 * 80px)); } }
  @media screen and (min-width: 1280px) {
    .heroVideoWrapper__3hg_1 {
      margin-top: -265px; } }

.heroVideo__3lkVJ {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%; }

.upcomingSessions__kelL8 {
  padding-top: 0; }

.banner__3AA7m {
  margin-top: 60px; }
  @media screen and (min-width: 600px) {
    .banner__3AA7m {
      margin-top: 120px; } }
  .banner__3AA7m h2 {
    margin-bottom: 24px; }
    @media screen and (min-width: 600px) {
      .banner__3AA7m h2 {
        font-size: 24px;
        line-height: 32px;
        font-weight: 400; } }
    @media screen and (min-width: 1024px) {
      .banner__3AA7m h2 {
        font-size: 32px;
        line-height: 40px;
        font-weight: 400;
        padding-top: 132px; } }

.bannerImageBottom__2xZfz {
  margin-top: 60px; }

.bannerImageTop__2iua_ {
  margin-bottom: 60px; }

@media screen and (min-width: 600px) {
  .bannerImage__kadfk {
    margin-top: 0; } }

@media screen and (min-width: 1024px) {
  .bannerImage__kadfk {
    -ms-flex-item-align: end;
        align-self: end; } }

.tweets__3FMXi h4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400; }
  @media screen and (min-width: 600px) {
    .tweets__3FMXi h4 {
      font-size: 24px;
      line-height: 32px;
      font-weight: 400; } }
  @media screen and (min-width: 1024px) {
    .tweets__3FMXi h4 {
      font-size: 32px;
      line-height: 40px;
      font-weight: 400; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.registration__1QztV a {
  margin-left: 0 !important; }

.faqRaw__3f_nS {
  padding-bottom: 24px; }
  @media screen and (min-width: 800px) {
    .faqRaw__3f_nS {
      padding-bottom: 32px; } }

.contentWrapper__2ubaN {
  position: relative; }

.header__3M41G {
  position: relative;
  z-index: 1; }

.heroText__HRHeI {
  margin-bottom: 16px; }
  .heroText__HRHeI div span {
    color: #1A73E8;
    display: block; }
  @media screen and (min-width: 1280px) {
    .heroText__HRHeI {
      margin-bottom: 24px;
      max-width: 33%; } }

.heroContent__22lCw {
  white-space: normal; }

.heroCta__KCzwo {
  margin-top: 24px; }

/* Shapes */
@media screen and (min-width: 1280px) {
  .shape__14I_e {
    position: absolute;
    right: 0;
    top: 0; } }

.shapeContainer__3jxPf {
  pointer-events: none;
  display: grid;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-columns: 1fr 1.5fr 1fr 1fr;
  grid-template-rows: 140px 100px; }
  @media screen and (min-width: 600px) {
    .shapeContainer__3jxPf {
      grid-template-columns: 1fr 1fr 1fr; } }
  @media screen and (min-width: 1280px) {
    .shapeContainer__3jxPf {
      display: block;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 0; } }
  .shapeContainer__3jxPf svg {
    height: 100%;
    width: 100%; }

@media screen and (max-width: 1279px) {
  .pinkTriangle__282we {
    grid-column: 1/3;
    grid-row: 1;
    margin-left: auto; } }

@media screen and (min-width: 1280px) {
  .pinkTriangle__282we {
    right: 340px; } }

@media screen and (min-width: 2400px) {
  .pinkTriangle__282we {
    right: 318px; } }

@media screen and (max-width: 1279px) {
  .greenSawtooth__2JCLC {
    grid-column: 3/5;
    grid-row: 1 / 3;
    position: relative; }
    .greenSawtooth__2JCLC svg {
      height: 100%;
      left: 0;
      position: absolute;
      top: 10px;
      width: 100%; } }

@media screen and (min-width: 1280px) {
  .greenSawtooth__2JCLC {
    height: 377px;
    width: 300px; } }

.yellowRectangleMobile__16uGS {
  grid-column: 1/3;
  grid-row: 2;
  margin-left: auto;
  top: -20px; }
  @media screen and (min-width: 1280px) {
    .yellowRectangleMobile__16uGS {
      display: none; } }

.yellowRectangleDesktop__3sLbK {
  grid-column: 2/3;
  grid-row: 1;
  text-align: right; }
  @media screen and (max-width: 1279px) {
    .yellowRectangleDesktop__3sLbK {
      display: none; } }
  @media screen and (min-width: 1280px) {
    .yellowRectangleDesktop__3sLbK {
      display: block;
      right: 340px;
      top: 274px;
      width: 250px; } }
  @media screen and (min-width: 2400px) {
    .yellowRectangleDesktop__3sLbK {
      right: 318px; } }

.callout__3mWuY {
  margin: 50px 0 60px;
  position: relative;
  z-index: 1; }
  @media screen and (min-width: 1024px) {
    .callout__3mWuY {
      margin: 160px 0 120px; } }

/* Grey belt */
.twoColBelt__3JHq4 {
  background-color: #F8F9FA;
  margin-top: 60px;
  padding-bottom: 32px;
  padding-top: 32px; }
  @media screen and (min-width: 800px) {
    .twoColBelt__3JHq4 {
      margin-top: 120px; } }

.twoColBeltGroup__8uBiO {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .twoColBeltGroup__8uBiO p {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto; }
  .twoColBeltGroup__8uBiO a {
    -ms-flex-item-align: start;
        align-self: flex-start; }
  .twoColBeltGroup__8uBiO:not(:last-child) {
    margin-bottom: 40px; }

/* Ticket Types */
.ticketTypesWrapper__38y_B {
  margin-top: 48px; }
  @media screen and (min-width: 800px) {
    .ticketTypesWrapper__38y_B {
      margin-top: 120px; } }
  .ticketTypesWrapper__38y_B h2 {
    margin: 60px 0 24px; }

.ticketTypesContainer__lobeY {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (min-width: 800px) {
    .ticketTypesContainer__lobeY {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }

.ticketType__2hGr- {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  border-radius: 12px;
  border: 1px solid #E8EAED;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 336px;
  padding: 40px 32px; }
  .ticketType__2hGr-:not(:last-child) {
    margin-bottom: 24px; }
  @media screen and (min-width: 1024px) {
    .ticketType__2hGr- {
      -webkit-box-flex: 0;
          -ms-flex: 0 1 355px;
              flex: 0 1 355px; }
      .ticketType__2hGr-:not(:last-child) {
        margin: 0 28px 24px 0; } }
  @media screen and (min-width: 1280px) {
    .ticketType__2hGr- {
      -webkit-box-flex: 1;
          -ms-flex: 1 1;
              flex: 1 1;
      -ms-flex-preferred-size: calc(100% / 3 - 28px);
          flex-basis: calc(100% / 3 - 28px); }
      .ticketType__2hGr-:not(:last-child) {
        margin-bottom: 0; } }
  .ticketType__2hGr- p {
    margin-bottom: 0; }
  .ticketType__2hGr- .subhead-1__2hse8 {
    margin: 0; }

.ticketTypeDesc__xiGCl {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

/* FAQ */
.faqSection__2NIQ1 {
  margin-top: 60px; }
  @media screen and (min-width: 800px) {
    .faqSection__2NIQ1 {
      margin-top: 120px; } }

.faqGroup__TqUbf {
  margin-top: 48px; }
  .faqGroup__TqUbf h2 {
    margin-bottom: 0px; }
    @media screen and (min-width: 800px) {
      .faqGroup__TqUbf h2 {
        margin-bottom: 24px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.filterBelt__zR15A {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.filters__2sOYS {
  position: relative;
  top: 6px; }

.filtersTitle__3D0Rl {
  margin-right: 16px;
  display: none; }
  @media screen and (min-width: 800px) {
    .filtersTitle__3D0Rl {
      display: inline-block; } }

.tagButton__LO4NC:not(:last-of-type) {
  margin-right: 12px; }

.clearButton__1ThpN {
  display: none;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }
  @media screen and (min-width: 800px) {
    .clearButton__1ThpN {
      display: inline-block; } }

.clearButtonMobile__2KUp2 {
  color: #80868B; }
  @media screen and (min-width: 800px) {
    .clearButtonMobile__2KUp2 {
      display: none; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.stickyNav__n0B9M {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.scheduleCards__2Qkxb {
  grid-row-gap: 60px;
  padding: 60px 0 80px; }

.scheduleSubtitle__3uENo {
  line-height: 30px; }

.overviewSubtitle__27rbw {
  margin: 32px 0 48px; }
  @media screen and (min-width: 1024px) {
    .overviewSubtitle__27rbw {
      margin: 56px 0 90px; } }

.eventsSubtitle__10Mm5 {
  margin: 32px 0; }
  @media screen and (min-width: 1024px) {
    .eventsSubtitle__10Mm5 {
      margin: 56px 0 24px; } }

.filterMobileFab__6RxDj {
  bottom: 10px;
  position: fixed;
  right: 10px;
  z-index: 1; }

.filterBelt__1He2t {
  padding-bottom: 12px;
  padding-top: 12px; }
  @media screen and (min-width: 1024px) {
    .filterBelt__1He2t {
      padding-bottom: 32px;
      padding-top: 32px; } }

.toolbarFabs__2wOHC {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.toolbarMyIO__3rKJk {
  display: none; }
  @media screen and (min-width: 600px) {
    .toolbarMyIO__3rKJk {
      display: block;
      margin-right: 40px; } }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.agenda__2Cuil {
  width: 100%; }

.calendar__3ASh5 {
  margin: 0 auto;
  max-width: 1056px;
  position: relative; }
  @media screen and (min-width: 1024px) {
    .calendar__3ASh5 {
      padding: 38px 0 76px 60px; }
      .calendar__3ASh5:after {
        content: '';
        height: 50px;
        left: -500px;
        position: absolute;
        right: -500px;
        width: 10000px;
        border-bottom: 1px solid #F1F3F4; } }

.timeBar__b9M84 {
  display: none; }
  @media screen and (min-width: 1024px) {
    .timeBar__b9M84 {
      display: grid;
      grid-template-columns: repeat(68, 1fr);
      height: 100%;
      padding-bottom: 20px;
      position: absolute;
      top: 0;
      width: 100%; }
      .timeBar__b9M84 > div {
        position: relative;
        grid-column: span 4; }
        .timeBar__b9M84 > div:after {
          background-color: #F1F3F4;
          content: '';
          height: calc(100% - 37px);
          left: 0;
          position: absolute;
          top: 30px;
          width: 1px; }
      .timeBar__b9M84 span {
        font-size: 12px;
        line-height: 1;
        font-weight: 400;
        font-family: "Roboto", arial, sans-serif;
        margin-left: 4px; } }

.timeWithSuffix__2uPth {
  margin-left: -18px; }
  .timeWithSuffix__2uPth:after {
    margin-left: 18px; }

.timeWithoutSuffix__3FB5s {
  margin-left: -6px; }
  .timeWithoutSuffix__3FB5s:after {
    margin-left: 6px; }

.day__2Fs_v {
  position: relative; }
  @media screen and (min-width: 1024px) {
    .day__2Fs_v:before {
      border-top: 1px solid #F1F3F4;
      content: '';
      height: 50px;
      left: -500px;
      position: absolute;
      right: -500px;
      width: 10000px; } }

.date__HrqQp {
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 16px 0; }
  @media screen and (min-width: 1024px) {
    .date__HrqQp {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      left: -60px;
      padding: 0;
      position: absolute;
      top: 8px; } }

@media screen and (max-width: 1024px) {
  .dateWeekday__c6J_B:after {
    content: '. ';
    white-space: pre; } }

@media screen and (min-width: 1024px) {
  .dateWeekday__c6J_B {
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    font-family: "Roboto", arial, sans-serif;
    margin-bottom: -4px;
    text-transform: uppercase; } }

@media screen and (min-width: 1024px) {
  .dateDayNumber__KJVBf {
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    text-align: center; } }

@media screen and (min-width: 1024px) {
  .row__WRVvc {
    display: grid;
    grid-template-columns: repeat(64, 1fr);
    height: 50px; } }

.eventIcon__3jIwU {
  padding-right: 20px; }
  @media screen and (min-width: 1024px) {
    .eventIcon__3jIwU {
      padding-right: 8px; } }
  .eventIcon__3jIwU svg {
    max-height: 18px;
    width: 18px; }

.eventLabel__1xNJF {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.eventTitle__2IhWF {
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  font-family: "Roboto", arial, sans-serif;
  margin-bottom: 2px; }
  @media screen and (min-width: 1024px) {
    .eventTitle__2IhWF {
      font-size: 14px;
      line-height: 18px;
      font-weight: 400;
      font-family: "Google Sans", arial, sans-serif;
      margin-bottom: 0; } }

.formattedEventTime__1x2iy {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  font-family: "Roboto", arial, sans-serif; }

.event__YGTKe {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 48px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 8px 0;
  padding: 16px;
  width: 100%; }
  @media screen and (min-width: 1024px) {
    .event__YGTKe {
      font-size: 14px;
      line-height: 18px;
      font-weight: 400;
      border-bottom: 1px solid #FFFFFF;
      height: 50px;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      letter-spacing: 0.2px;
      margin: 0;
      padding: 0; } }

.eventGrey__JYwoo {
  background-color: #F1F3F4; }

.eventRed__2g88B {
  background-color: #FAD2CF; }

.eventBlue__3pTyG {
  background-color: #4285F4;
  color: #FFFFFF; }

.eventYellow__1FduS {
  background-color: #FBBC04; }

.eventGreen__2A2MQ {
  background-color: #5BB974;
  color: #FFFFFF; }

.eventRedBorder__237a4 {
  border: 2px solid #D93025;
  background-color: #FFFFFF; }

.eventDarkBlue__3iEqq {
  background-color: #174EA6;
  color: #FFFFFF; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.shuttleRouteTable__3Bjbp {
  border: 1px solid #E8EAED;
  border-spacing: 0;
  table-layout: fixed;
  margin-top: 28px;
  width: 100%; }
  .shuttleRouteTable__3Bjbp td, .shuttleRouteTable__3Bjbp th {
    padding: 4px 8px; }
  .shuttleRouteTable__3Bjbp tbody tr:not(.scheduleHeaderRow__3Lwdz) {
    border-left: 1px solid #E8EAED;
    border-right: 1px solid #E8EAED; }
    .shuttleRouteTable__3Bjbp tbody tr:not(.scheduleHeaderRow__3Lwdz):nth-child(even) {
      background-color: #F8F9FA; }

.tableHeader__34Spa tr {
  text-align: left; }

.tableHeader__34Spa th {
  font-size: 18px;
  line-height: 32px;
  font-weight: 500;
  padding: 12px 8px; }

.scheduleBaseHeaderRow__3HWQA th {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  padding: 8px; }

.scheduleHeaderRow__3Lwdz {
  background-color: #E8EAED; }
  .scheduleHeaderRow__3Lwdz th {
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
    text-align: left; }

.heading__Ars3I {
  margin-top: 68px; }
  .heading__Ars3I:first-of-type {
    margin-top: 40px; }

/*
 * Utility function to calculate the width of a desired column span (1 or more columns)
 *
 * Example usage:
 * getSpanWidth(2) // returns the width of 2 columns in the default breakpoint (mobile)
 * getSpanWidth(2, 6, $bp-desktop) // returns the width of 2 columns when inside a 6 column container in desktop
 *
 * Given the complexity of the grid system, it's impossible for the function to
 * determine the width without knowing if it should be calculating a column
 * width inside a container that spans all columns, or just some columns.
 * It's also impossible to determine the correct column gap to use in the
 * calculation, so the function requests the breakpoint, but will the mobile
 * gap as default. Finally, it's possible to ask the function to include an
 * extra gap at the end of the calculation, this can be useful if you are
 * trying to offset an element 3 columns to the right, where you need that
 * extra gap to offset it properly (e.g. left: getSpanWidth(3, 4, 6, $bp-desktop, true))
 *
 * @param $column-span: the number of columns you wish to calculate the width for
 * @param $columns: the number of columns the parent container spans in the grid
 *   defaults to all columns in the current breakpoint
 * @param $bp: the breakpoint to use for the column gap calculation
 * @param $include-last-gap: if you wish to add the width of 1 column gap to
 *   the calculation
 */
.marketingLayout__qGN2c {
  overflow-x: hidden; }

.liveLayout__3BirU {
  padding-bottom: 60px; }
  @media screen and (min-width: 800px) {
    .liveLayout__3BirU {
      margin-top: 0;
      min-height: 100%;
      position: relative;
      padding-bottom: 0;
      padding-left: 72px; } }
  .liveLayout__3BirU .homepageLayout__1i8pL {
    overflow-x: hidden; }

.liveAuth__2oudV {
  position: absolute;
  right: 12px;
  top: 74px;
  z-index: 99; }
  @media screen and (min-width: 800px) {
    .liveAuth__2oudV {
      top: 12px; } }

.mobileOverflowHidden__11dgt {
  overflow-x: hidden; }
  @media screen and (min-width: 800px) {
    .mobileOverflowHidden__11dgt {
      overflow-x: unset; } }