body {

  font-family: 'Montserrat', sans-serif;

  font-size: 18px;

  box-sizing: border-box;

  margin: 0; padding: 0;

}

*, *:before, *:after {

  box-sizing: inherit;

}

a {

  color: #212078;

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

.icon {

  vertical-align: bottom;

}

p.lead {

  margin: 0 0 40px 0;

  font-size: 30px;

font-weight: 200;

}

.header {

  background-color: #12011f;

  color: white;

  padding: 10px 0;

}

.leftright {

  display: grid;

  grid-template-columns: 80px 1fr;

  align-items: center;

}

@media (max-width: 600px) { .leftright { grid-template-columns: 1fr; } }

.right {

  text-align: right;

}

.right a {

  color: white;

}

.right a + a {

  padding-left: 10px;

}

.banner {

  background-color: #12011f;

  color: white;

}

.banner > .container {

  padding: 240px 0 0 0;

  background-image: url("banner.jpg");

  background-size: auto 100%;

  background-repeat: no-repeat;

  background-position: right;

  height: 600px;

}

.banner-connect {

  font-size: 80px;

  font-weight: 700;

  margin: 0 0 0 60px;

}

.banner-info {

  font-size: 28px;

  font-weight: 400;

  margin: 40px 0 0 60px;

}

.banner-desc {

  font-size: 20px;

  font-weight: 200;

  margin: 10px 0 0 60px;

  max-width: 560px;

}

@media (max-width: 1200px) {

  .banner > .container {

    padding: 180px 0 0 0;

    background-position: center right -120px;

    height: 450px;

  }

}

@media (max-width: 900px) {

  .banner > .container {

    padding: 120px 0 0 0;

    background-position: center right -120px;

    height: 350px;

  }

  .banner-connect {

    font-size: 60px;

    margin: 0 0 0 40px;

  }

  .banner-info {

    font-size: 24px;

    margin: 20px 0 0 40px;

  }

  .banner-desc {

    font-size: 18px;

    margin: 10px 0 0 40px;

    max-width: 500px;

  }

}

@media (max-width: 720px) {

  .banner > .container {

    padding: 60px 0 0 0;

  }

  span.banner-when, span.banner-where {

    display: block;

  }

  span.banner-dash {

    display: none;

  }

  .banner-desc {

    max-width: 300px;

  }

}

@media (max-width: 520px) {

  .banner > .container {

    background-position: center right 100%;

  }

}

.container {

  margin: 0 auto;

  max-width: 1200px;

  padding: 0 20px;

}

article {

  padding: 40px 0;

}

.grid {

  max-width: 900px;

  margin: 0 auto 40px auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  row-gap: 20px;

  column-gap: 20px;

}

@media (max-width: 1200px) { .grid { grid-template-columns: 1fr 1fr; } }

@media (max-width:  800px) { .grid { grid-template-columns: 1fr; } }

.tile {

  display: grid;

  row-gap: 20px;

  grid-template-columns: 60px 1fr;

}

.icon span {

  font-size: 48px;

  color: #951c7a;

}

.tile h3 {

  font-weight: 200;

  font-size: 30px;

  margin: 0 0 8px 0;

}

.tile p {

  margin: 0 0 8px 0;

}

section {

  margin: 40px 0;

}

h2 {

  font-weight: 200;

  font-size: 40px;

  margin: 0;

}

table {

  border-collapse: collapse;

}

th {

  background-color: #f0f0f0;

  padding: 10px 20px;

  text-align: left;

  font-weight: 400;

}

td {

  vertical-align: top;

  padding: 10px 20px;

  border-bottom: solid 1px #f0f0f0;

}

tr.break td {

  background-color: #f9f9f9;

}

.speaker {

  display: grid;

  grid-template-columns: 200px 1fr;

  column-gap: 40px;

  margin-top: 20px;

}

.speakerimg {

  width: 200px;

  height: 200px;

  background-color: #f0f0f0;

  border-radius: 20px;

}

.speakerimg img {

  width: 200px;

  height: 200px;

  border-radius: 20px;

}

@media (max-width: 600px) {

  .speaker {

    grid-template-columns: 100px 1fr;

    column-gap: 20px;

  }

  .speakerimg {

    width: 100px;

    height: 100px;

  }

  .speakerimg img {

    width: 100px;

    height: 100px;

  }

}

h3 {

  font-weight: 200;

  font-size: 30px;

  margin: 0;

}

.speakerlinks {

  font-size: 24px;

}

.speakerlinks a {

  margin: 0 10px;

}

.session {

  margin-top: 20px;

}

.sessionvid {

  margin-left: 10px;

}