* { box-sizing: border-box; }

body { background-color: #537ABD; font-family: 'Fira Sans', sans-serif; margin: 45px; color: white; }

@media (max-width: 400px) { body { margin: 20px; } }
table { color: white; width: 100%; }

th { font-weight: 500; }

a { color: white; transition: .25s color; }

a:hover { color: #ffb5b5; }

a:active { color: #ff9191; }

h1, h2, h3 { color: white; }

p { color: white; font-weight: 300; font-size: 20px; }

table td, table th { border: 1px solid white; padding: 10px; text-align: left; border-width: 5px; margin: auto; font-size: 20px; }

td { font-weight: 300; }

@media (max-width: 400px) { table td, table th { font-size: 16px; } }
caption { caption-side: bottom; text-align: right; }

table { border-collapse: collapse; border-style: hidden; }

.link, .link a { background-color: white; color: #537ABD; text-decoration: none; font-weight: 500; }

.bold { font-weight: 500; }

.button { color: #537ABD; background-color: #fff; transition: .25s background; padding: 1em 2em; display: inline-block; }
.button:hover { background-color: #ffb5b5; color: #537ABD; }
.button:active { background-color: #ff9191; }

.title { font-weight: bold; }

/** Header */
.header { padding: 0 0 10px; border-bottom: 5px solid white; }
.header h1 { margin: 0; display: inline-block; font-size: 54px; }
.header h1 a { text-decoration: none; }
.header .menu { display: inline-block; list-style: none; float: right; margin: 0; padding: 0; }
.header .menu li { display: inline-block; }
.header .menu li a { text-decoration: none; }

@media (max-width: 500px) { .header .menu { float: none; width: 100%; }
  .header .menu li { display: block; width: 100%; margin-bottom: 1px; }
  .header .menu li a { width: 100%; } }
/** Index */
table.locations, table.keynotes, table.speaker-list { margin-bottom: 4rem; border-top: 3px solid white; }

table.speaker-list { margin-top: 2rem; }

.sixty { width: 100%; }

@media (min-width: 1024px) { .sixty { width: 60%; } }
.date { width: 25%; }

.speaker { width: 25%; }

.keynotes td { border-right: none; }

.keynote { text-align: center; width: 25%; padding-right: .5em; float: left; vertical-align: top; transition: .5s padding; }

@media (max-width: 600px) { .keynote { width: 50%; } }
.keynote .image { width: 100%; height: 200px; background-position: 0; background-size: cover; background-color: #6289cc; color: #fff; font-size: 60px; display: block; padding-top: 0.6em; font-size: 4em; transition: all .5s; cursor: pointer; margin: 0 auto; }

.keynote .image:hover { opacity: .6; }

@media (min-width: 1024px) { .keynote .image { height: 200px; width: 200px; } }
.keynote h3 { display: block; text-align: center; font-size: 18px; font-weight: 300; margin: 1em 0; }

.keynote .bio { display: none; font-size: 16px; text-align: left; }

.keynote-selector { display: none; }

.keynote-selector:checked + .keynote .bio { display: block; }

.keynote-selector:checked + .keynote { background: #799dda; padding: .5em; }

.location { width: 30%; padding: 10px 10px 10px 25px; }

.tagline { padding: 13px 10px 7px 0px; }

.second-tagline { padding: 17px 10px 4rem 0px; }

.second-tagline .buy-tickets { margin-left: 1em; }

@media (max-width: 1024px) { .second-tagline .buy-tickets { margin-left: 0; margin-top: 1em; } }
.second-tagline--info { width: 100%; margin-top: 1em; vertical-align: top; display: inline-block; padding: .5%; }

@media (min-width: 1024px) { .second-tagline--info { width: 30%; } }
.slack-link { margin-top: 2em; }

.transparent td { border: 1px transparent; }

/** speakers */
.speakers-intro { max-width: 640px; }

.speakers .about { text-align: right; width: 160px; }
.speakers .image { width: 150px; height: 150px; background-position: center; background-size: cover; display: block; text-align: right; float: right; }
.speakers .name { float: right; clear: both; }
.speakers .title { max-width: 640px; }

.talk-name { display: block; margin-bottom: 1em; }

@media (max-width: 500px) { .speakers .image { display: none; } }
/* Locations */
.locations { max-width: 640px; }

/** Footer */
footer { color: white; font-size: 14px; font-weight: 200; }
footer p { font-size: 14px; }