* { box-sizing: border-box; }
html, body { padding: 0; margin: 0; height: 100%; }
header, footer { margin:0; display: block; position: relative; min-height: 60px;}
body { background: #fff; color: #333; line-height: 1.2; font-size: 2vw; font-family:HelveticaNeue,Helvetica,sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  transition: color 300ms, background-color 300ms;
}
a { text-decoration: none; color:inherit; opacity:.8;}
p a:hover { opacity:1;}
button, input[type=submit]{appearance:none; border:none; box-shadow:none; background:#1D1D43; color:#fff; font:inherit; padding:8px 16px; font-size:18px; margin:0; opacity:.8; cursor:pointer;}
button:hover{opacity:1; background-color:red;}
form {margin:40px 0 0;font-size:1.5vw; }
form input,select,textarea {appearance:none; -webkit-appearance:none; border:none; box-shadow: none; font:inherit; outline:none;padding:3px;}
form p {font-size:1.5vw;}
h1 {margin:0; font-size:24px; font-weight:normal;}
h2 {font-size:3.5vw;font-weight:600;margin:20px 0 0;line-height:1.1; }
h2 + h2 {margin-top:0;}
p, .para {margin:0 0 .9vw; max-width:960px;}
h2 + p { margin-top: .9vw; }
h3 {margin-top:30px;font-weight:normal;}
.date {opacity:.6;}
header {position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0 10px 20px;z-index:3;}
header button {padding-right:25px;}
header nav {padding:0;font-size:16px;display:flex;flex-direction:column;justify-content:flex-end;}
header nav a {display:inline-block;margin:0 10px;padding:5px 2px;}
header nav a:hover{color:red;border-color:red;}
main {max-width:100vw;}
section {position:relative; padding:120px 20px 20px;margin:0;background-position:center center;background-size:cover;background-repeat:no-repeat;}
.snappy {height:100vh;overflow-y:scroll;z-index:1;}
.snappy section {width:100vw;min-height:100vh;overflow:hidden;}
@media(min-width:500px) {
	header {padding-top:10px;}
	header nav {padding:0;flex-direction:row;align-items:center;font-size:20px;}
	header nav a.active {border-bottom:1px solid #333;}
	header nav button { margin-left:20px; }
	section {padding-top:60px;}
	.snappy {scroll-snap-type:y mandatory;}
	.snappy section {height:100vh;scroll-snap-align:start;}
}
a.down {position: absolute;display: block;width: 20px;height: 20px;bottom: 30px;left: 35px;transform-origin: center;transform: rotate(45deg);border-bottom: 4px solid black;border-right: 4px solid black;transition: transform 400ms;}
.topics a.down, .pitch a.down, .video a.down {border-color:#fff;}
.about a.down {border-color:#fff; transform:rotate(-135deg);}
button.signed-up {pointer-events:none;background:#879e42;opacity:1;border:1px solid rgba(255,255,255,2);}
button.greeting {pointer-events:none;background:transparent!important;color:#333;font-weight:500;}

button.tool { width:28px; height:28px; margin:0 20px; background-color:transparent; background-size:cover; background-repeat:no-repeat; background-position: center center;background-size:24px 24px;}
button.labelled { width:auto; padding-left:32px; padding-top:4px; white-space:nowrap; font-size:16px; background-position:left center;}

.tickers {display:flex;flex-wrap:wrap;margin-bottom:2px;white-space:nowrap;}
.tickers > * { display:block; height:2.5vw; line-height:1.2; margin:0; padding:0; margin-right:10px;}
.ticker { width:240px; overflow:hidden;position:relative;}
.ticker ul{ position:absolute; transition:top 100ms;}
.ticker ul, .ticker li {list-style:none;margin:0;padding:0;font:inherit;}
.ticker li {white-space: nowrap; height:2.5vw;}

.gallery {display:flex;width:100%;max-width:1000px;flex-wrap:wrap;justify-content:center;}
.gallery figure {width:33%;max-width:240px;padding: 0;margin:-20px;text-align:center;mix-blend-mode:difference;transition: transform 300ms;z-index:1;}
.gallery figure:nth-child(2) {margin-top:40px;}
.gallery figcaption {opacity:0;font-size:2.5vmin;}
.gallery figure:hover {transform:scale(1.2);z-index:2;}
.gallery figure:hover figcaption{opacity:1;}
.gallery img {width:100%;border-radius:50%;}
.byte-logo{float:right;}

#home { overflow: hidden; }

#backdrop {position: absolute;top: 0;left: 0;height:100vh;width:100vw;z-index: -1;pointer-events:none;}
.dot {position:absolute;top:0;left:0;border-radius:50%;transition:transform 500ms, width 500ms, height 500ms, top 500ms, left 500ms, opacity 200ms,background-image 200ms;width:10vmax;height:10vmax; mix-blend-mode: difference; transform-origin:center;background-size:cover;background-repeat:no-repeat;pointer-events:none;}
#dot-1 {background-color:#e4572e;left:80vw;top:53vh;}
#dot-2 {background-color:#6b2737;left:70vw;top:72vh;}
#dot-3 {background-color:#17bebb;left:65vw;top:66vh;}
#dot-4 {background-color:#9AAE2D;left:50vw;top:61vh;}

/* Hero */
@keyframes hero {
  from { left: -20vw; top: 60vh; transform: scale(1);opacity:1;}
  40% { left: 60vw; top:60vh; transform: scale(1); opacity:1;}
  90% { left: 60vw; top:60vh; transform: scale(4); opacity:1;}
  to { left: 60vw; top:60vh; transform: scale(4); opacity: 0;}
}
.hero .dot {animation-name: hero; animation-duration: 5s; animation-iteration-count: infinite; animation-fill-mode: both;}
.hero #dot-1 {animation-delay: 0;}
.hero #dot-2 {animation-delay: 1s;}
.hero #dot-3 {animation-delay: 2s;}
.hero #dot-4 {animation-delay: 3s;}

/* Topics */
@keyframes drop {
	from { transform: translateY(-100vh); }
	80% { transform: translateY(5vh); }
	to { transform: translateY(0); }
}
@keyframes undrop {
	from { transform: translateY(100vh); }
	80% { transform: translateY(-5vh); }
	to { transform: translateY(0); }
}
@keyframes back-and-forth {
	from { transform: translateX(-20vw); }
	to { transform: translateX(120vw); }
}
@keyframes rotate-pics {
	from { background-image: url(/img/2021/steve-clayton.jpg); }
	5% { background-image: url(/img/2021/steve-clayton.jpg); }
	10% { background-image: url(/img/2021/jenny-kleeman.jpg); }
	15% { background-image: url(/img/2021/toby-litt.jpg); }
	20% { background-image: url(/img/2021/pippa-evans.jpg); }
	25% { background-image: url(/img/2021/david-baddiel.jpg); }
	30% { background-image: url(/img/2021/kate-hardie.jpg); }
	35% { background-image: url(/img/2021/lawrence-kao.jpg); }
	40% { background-image: url(/img/2021/miri-rodriguez.jpg); }
	50% { background-image: url(/img/2021/vinay-gupta.jpg); }
	55% { background-image: url(/img/2021/claire-armitstead.jpg); }
	60% { background-image: url(/img/2021/john-higgs.jpg); }
	65% { background-image: url(/img/2021/cathy-rentzenbrink.jpg); }
	70% { background-image: url(/img/2021/brian-lynch.jpg); }
	75% { background-image: url(/img/2021/sabrina-ricci.jpg); }
	80% { background-image: url(/img/2021/david-merleau.jpg); }
	85% { background-image: url(/img/2021/romilly-morgan.jpg); }
	90% { background-image: url(/img/2021/julia-tyrrell.jpg); }
	95% { background-image: url(/img/2021/matt-locke.jpg); }
	100% { background-image: url(/img/2021/matt-locke.jpg); }
}
.topics{background-color:#e4572e; color:#fff;}
.topics .dot {opacity:0;}
.topics #dot-1x {opacity:1;width:20vw; height:20vw; top:auto; left:auto; right:10vw; bottom:10vw; animation: 60s infinite alternate rotate-pics both;background-color:rgba(0,0,0,.4);}
/*.topics .dot {width:20vw; height:20vw; max-width:180px; max-height:180px; top:auto!important; bottom:50px;}
.topics #dot-1 {left:5vw;background-image:url(/img/2021/steve-clayton.jpg);}
.topics #dot-2 {left:25vw;background-image:url(/img/2021/jenny-kleeman.jpg);}
.topics #dot-3 {left:45vw;background-image:url(/img/2021/david-baddiel.jpg);}
.topics #dot-4 {left:65vw;background-image:url(/img/2021/claire-armitstead.jpg);}*/
/*.topics .dot:nth-child(odd) { animation: 1s drop 300ms both ease-out; }
.topics .dot:nth-child(even) { animation: 1s undrop 300ms both ease-out; }
.topics #dot-1 {top:auto;bottom:20vh;left:20vw;background-image:url(/img/byte-2020-383.jpg);}
.topics #dot-2 {top:auto;bottom:20vh;left:35vw;background-image:url(/img/MME_1507.jpg);}
.topics #dot-3 {top:auto;bottom:20vh;left:50vw;background-image:url(/img/MME_1699.jpg);}
.topics #dot-4 {top:auto;bottom:20vh;left:65vw;background-image:url(/img/byte-2020-403.jpg);}*/
.speakers div {margin-top:20px;display:flex;flex-wrap:wrap;}
.speakers figure {width: 140px;height: 140px;border-radius: 50%;overflow: hidden;padding:0;margin:0;background-color:#fff;}
.speakers figure img {width:140px;height:140px;border-radius:50%;overflow:hidden;}
.speakers figcaption {background:#fff;color:#000; font-size:16px;padding:25px 15px 10px 25px;}
.speakers figcaption em {display:block;font-style:normal;color:#e4572e;}
.speakers .flipper:hover > *:last-child{transform: rotateY(0turn);}
.speakers .flipper:hover > *:first-child {transform:rotateY(-0.5turn);}

.speaker-list a { display: inline-block; font-size: 5vmin; padding-right: 10px; border-bottom: 1px solid transparent;}
.speaker-list a:nth-child(even) {opacity: 1;}
.speaker-list a:hover { border-bottom: 1px solid white; }

@keyframes slide {
	from { transform: translateX(0); }
	to { transform: translateX(-2400px); }
}
/*@media (max-width:500px) {
	.speakers {height:160px;}
	.speakers div {flex-wrap:nowrap;width:2400px; transition:transform 300ms;animation: 30s steps(15, jump-end) slide infinite alternate-reverse;}
	.speakers.paused div {animation-play-state: paused;}
}*/

/* People */
.people {background-color:#17bebb;}
@keyframes rotate {
  from { transform:rotate(0) scale(2); }
  50% { transform:rotate(180deg) scale(2.1); }
  to { transform:rotate(360deg) scale(2);}
}
.people .dot {animation:3s linear infinite rotate;}
.people #dot-1 {left:49vw; top:50vh; transform-origin: 55% 50%;}
.people #dot-2 {left:55vw;top:68vh; transform-origin: 55% 55%;}
.people #dot-4 {left:61vw;top:50vh; transform-origin: 50% 55%;}
.people #dot-3 {opacity:0;}

/* Video */
#video{min-height:400px;}
.video {background-color:#000;color:#fff;height:auto;min-height:300px;}
@media(min-width:500px) {#video, .video {height:100vh;}}
.video #backdrop {z-index:2;}
.video .dot {opacity:0;}
.video #dot-1 { opacity:1; pointer-events:auto; background-image:url(/icons/volume-off.svg); background-size:40px 40px; background-position:center; left:auto; top:auto; bottom:40px; right:40px;width:60px;height:60px;}
.video.noisy #dot-1 {background-image:url(/icons/volume-on.svg);}
.video #dot-1:hover{transform:scale(1.2);}
#video {padding:0;}
#video video {width:100%;height:100%;}
.video .video-stopped #dot-1 {background-image:url(/icons/replay.svg);}

/* Pitch */
.pitch {background-color:#9AAE2D; color:#fff;}
.pitch #dot-1 {left:44vw; top:auto; bottom:10vh; opacity:0;width:35vw;height:35vw;}
.pitch #dot-2 {opacity:0;}
.pitch #dot-3 {opacity:0;}
.pitch #dot-4 {opacity:0;}
#pitch form {position:absolute;left:50%;margin-left:-15vmin;bottom:5vmin;width:60vmin;height:60vmin;background:#fff;border-radius:50%;}
#pitch form > * {padding:7.5vmin 3vmin 0 12vmin;}
#pitch form p {font-size:4vmin;line-height:1;color:#9AAE2D;}
#pitch textarea {width:100%;height:33vmin;resize:none;background:transparent;font-size:20px;padding:0;}
#pitch input[type=submit] {height:90px;width:90px;border-radius:50%;position:absolute;right:10px;bottom:10px;transition:transform 200ms;}
#pitch input:hover{opacity:1;transform:scale(1.2);}
#pitch textarea.empty + input {display:none;}
#pitch .thx {color:#9AAE2D;font-size:4vw;padding-top:8vw;}

.flipper {perspective:1000px;}
.flipper > * {transition: transform 1s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%;}
.flipper > *:last-child {transform:rotateY(0.5turn);}
.flipper.flipped > *:last-child{transform: rotateY(0turn);}
.flipper.flipped > *:first-child {transform:rotateY(-0.5turn);}

/* Partners */
.partners {background-color:#fff; /*eac435;*/}
@keyframes bob {
  from { transform:translateY(0) }
  to { transform:translateY(4vw);}
}
.partners .dot { opacity: 0; /*animation: 2.3s infinite alternate bob;*/}
/*.partners #dot-2 {
	animation-duration: 2.8s;
	animation-direction: alternate-reverse;
}
.partners #dot-3 {
	animation-duration: 3.2s;
	animation-delay:300ms;
}
.partners #dot-4 {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
}*/
#partners .req {
	border-bottom: 6px solid #ee1111;
}
.partner-wall {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
}
.partner-wall img {
	height: 100px;
	margin: 10px;
}
.request-pack {position: absolute; right:30px; bottom:30px; display:flex; width: 140px; height: 140px; font-size: 18px; font-weight: 600; border: 1px solid #000; border-radius:50%; align-items: center; justify-content: center; text-align: center; padding: 20px;background:#eac435;opacity:1;transition: transform 200ms;}
.request-pack:hover {background: #111;color: #eac435;transform: scale(1.2);}

/* Previously */
.previously {background-color:#6b2737;color:#fff;}
#previously .grid {display:flex;flex-wrap: wrap;align-content:flex-start;}
#previously figure, #previously .blob {border-radius:50%; width:22vmin; height:22vmin;overflow:hidden;position:relative;margin:3vmin;}
#previously figcaption {font-size:2.5vmin;padding:1vmin;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fff;color:#222;}
#previously figure:hover figcaption {transform: rotateY(0turn);}
#previously figure:hover img {transform:rotateY(-0.5turn);}
#previously .blob-1 {background-color:#e4572e;}
#previously .blob-2 {background-color:#17bebb;}
#previously .blob-3 {background-color:#9AAE2D;}
.previously .dot {opacity:0;}

/* About */
.about {background-color:#1D1D43; color:#fff;}
.about button {background-color:#e4572e;}
.byte-logo {margin: 30px 0;width: 90px;}

.about .dot {width:18vw;height:18vw; min-width:100px; min-height:100px; animation:12s linear infinite alternate bob both;}
.about #dot-2 {	animation-direction: alternate-reverse;animation-delay: 4s;}
.about #dot-3 {	animation-delay: 8s; }
.about #dot-4 {animation:none;min-width:40px;min-height:40px;}

.about .dot::after {position:absolute;top:100%;left:0;width:100%;text-align:center;margin-top:4px;opacity:.8;}
.about #dot-1 {background-image:url(/img/justine_solomons.jpg);left:20vw;top:43vh;}
.about #dot-1::after{content:"Justine Solomons";}
.about #dot-2 {background-image:url(/img/michael-kowalski.jpg);left:35vw;top:55vh;transform:scale(.96);}
.about #dot-2::after{content:"Michael Kowalski";}
.about #dot-3 {background-image:url(/img/lisa_gee.jpg);left:50vw;top:47vh;transform:scale(.92);}
.about #dot-3::after{content:"Dr Lisa Gee";}
.about #dot-4 {width:8vw;height:8vw;background-color:transparent;background-image:url(/img/byte-the-book-120.png);left:auto;top:auto;right:30px;bottom:30px;}

footer {position: absolute; bottom:0; left:100px;right:12vw;text-align:right;font-size:14px;opacity:.5;}

.shaped::before {content: "";float: left;height: 100%;width: 50%;shape-outside: polygon(0 0, 98% 0, 50% 6%, 23.4% 17.3%, 6% 32.6%, 0 50%, 6% 65.6%, 23.4% 82.7%, 50% 94%, 98% 100%, 0 100%);shape-margin: 7%;}
.shaped::after {content: ""; float: right; height: 100%; width: 50%; shape-outside: polygon(2% 0%, 100% 0%, 100% 100%, 2% 100%, 50% 94%, 76.6% 82.7%, 94% 65.6%, 100% 50%, 94% 32.6%, 76.6% 17.3%, 50% 6%);shape-margin: 7%;}

.session {
	overflow-y: auto;
}
.session header {
	background:rgba(255,255,255,.8);
}
article h1, article h2 {
	font-size: 48px;
	margin: 0;
	font-weight: bold;
	line-height: 1;
}
article h2 {
	opacity: .5;
	margin-bottom: 10px;
}
article h4 {
	margin: 20px 0 2px;
	font-size: 18px;
}
article time {
	display:block;
	font-size:24px;
	font-weight: bold;
	margin-bottom: 30px;
	color: #aaa;
}
.strand {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
}
.strand.practice {
	color: #e4572e;
}
.strand.projects {
	color: #6b2737;
}
.strand.business, .strand.perspectives {
	color: #17bebb;
}
.strand.workshops {
	color: #879e42;
}
article p {
	font-size: 20px;
	line-height: 1.3;
}
.bios {
	background: #222;
	color: #fff;
	padding: 30px 20px 50px;
}
.bios h3 {
	font-weight: bold;
	margin: 20px 0 10px;
}
.bios h3 em {
	font-style: normal;
	opacity: .5;
}
.bios h4 {
	text-transform: uppercase;
	font-size: 18px;
	margin: 30px 0 8px;
	opacity: .8;
}
.bios a {
	opacity: 1;
}
.bios.practice {
	background-color: #e4572e;
}
.bios.projects {
	background-color: #6b2737;
}
.bios.business, .bios.perspectives {
	background-color: #17bebb;
}
.bios.workshops {
	background-color: #879e42;
}
.details, .bios > div, .speaker-splash {
	margin: 0 auto;
	max-width: 900px;
	padding: 30px 20px 50px;
}
.speaker-splash {
	padding-top: 70px;
}
.speaker-splash img {
	border-radius: 50%;
	margin-left: -30px;
}
article label, p.fineprint {
	display: block;
	margin-top: 8px;
	font-size: 16px;
}
article form input, article select {
	width: 400px;
	max-width: 90%;
}
article form input, article textarea, article select {
	border: 1px solid #ccc;
	font-size: 20px;
}
article textarea {
	width: 100%;
	height: 100px;
}
article form p {
	margin-top: 10px;
}
input.error, textarea.error, select.error {
	border-color: red;
}
p.error {
	color: red;
}
article iframe {
	margin: 0;
	outline: 1px solid rgba(255,255,255,.3);
	max-width: 90vw;
}
.books a {
	margin-right:20px;
}
#partner main {
	width: 100vw;
}
#partner section {
	width: 100%;
	padding-bottom: 60px;
}
#partner section.splash {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px 0 0;
}
#partner section > * {
	width: 800px;
	max-width: 100vw;
	margin: 0 auto;
}
#partner p {
	margin-bottom: 12px;
	line-height:1.3;
	font-size: 24px;
}
#partner .offer {
	padding-bottom: 80px;
}
#partner .offer h2 {
	font-size: 32px;
}

#chat .compose { display:none; padding:10px 20px 10px 0; text-align:right;}
.chatting #chat .compose, #chat.open .compose { display:block; }
#chat textarea { width:100%; height:60px; resize:none; background:transparent; border:none; color:#fff;}
#chat textarea:focus {background:#fff;color:#000;}
.messages { padding:0 20px 20px 0; overflow-y:auto;}
.message { position:relative; background:rgba(255,255,255,.8); color:#222; margin:10px 0; padding:5px 10px; border-radius:10px; border-bottom-right-radius:0;}
.message.speaker {background:#fff;border-bottom-right-radius:10px;border-bottom-left-radius:0;}
.message span {display:block; font-size:13px; opacity:.7;}
.message button {position:absolute;right:0;top:0;padding:3px 8px;font-weight:bold;color:#e4572e;background:transparent;opacity:0;transition:opacity 200ms;}
.message:hover button {opacity:1;}
.message a {color:#3659e3;}
button[name=moremessages] {font-size:16px;background:#fff;color:#222;border-radius:3px;position:absolute;right:10px;margin-top:-34px;box-shadow:rgba(0,0,0,.6) 2px 2px 5px;padding:5px 16px 5px 30px;transition:transform 300ms;transform:translateX(300px);opacity:1;}
button[name=moremessages]::before {content:"↓";position:absolute;left:10px;top:5px;}
button[name=moremessages].show {transform:none;}
button[name=send] {font-size:16px; padding:5px 15px; font-weight:bold;}
button[name=latest] {background:transparent;}

button[name=camera] {background-image:url(/icons/camera-off.svg);}
button[name=mic] {background-image:url(/icons/mic-off.svg);}
button[name=present] {background-image:url(/icons/present.svg);}
button[name=camera].on {background-image:url(/icons/camera-on.svg);}
button[name=mic].on {background-image:url(/icons/mic-on.svg);}

button[disabled] {opacity:.5;cursor:default;}

.menu {
  appearance: none;
  background:#fff;
  margin: 0;
  padding: 0 0 10px;
  position:absolute;
  box-shadow: rgba(0,0,0,.8) 5px 5px 12px;
  transition: opacity 200ms;
  border-radius: 3px;
  z-index:80;
  opacity:0;
  pointer-events: none;
  transform: translateY(-100vh);
}
.menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.menu li {
  display: block;
  margin:0;
  padding:0;
}
.menu h3 {
  font-size: 12px;
  color: #899;
  text-transform: uppercase;
  padding: 18px 16px 0 32px;
  font-weight: bold;
}
.menu button {
  text-align:left;
  background-color:transparent;
  color:#000;
  margin:0;
  padding: 8px 16px 8px 32px;
  width: 100%;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  position: relative;
}
.menu button:hover {background-color:#e0eeee;}
.menu button.selected::before{content:"✓";position:absolute;left:8px;top:8px;}

.tile {background:transparent;}

button.toggle { font-size:16px; color:#fff; padding:4px 50px 4px 6px; margin:0; background:transparent; position:relative;}
.toggle::before { content:" ";position:absolute; right:0; top:3px; background:rgba(0,0,0,.5);font-size:12px;font-weight:bold;border-radius:16px;display:block;width:40px;height:22px;}
.toggle::after {content:"";width:16px;height:16px;background:#fff;border-radius:8px;position:absolute;right:4px;top:6px;}
.open button.toggle::before, button.toggle.on::before { background:green; }
.open button.toggle::after, button.toggle.on::after { right: 20px; }

button[name=camera] {background-image:url(/icons/camera-off.svg);}
button[name=mic] {background-image:url(/icons/mic-off.svg);}
button[name=present] {background-image:url(/icons/queue-add.svg);position:relative;}
button[name=present]:hover::after {content:"Add a screen share to the queue";position:absolute; top:4px;left:40px;white-space:nowrap; font-size:16px;}
button[name=devices] {background-image:url(/icons/more.svg);margin:0;}
button[name=mute] {background-image:url(/icons/volume-on.svg);}
.muted button[name=mute] {background-image:url(/icons/volume-off.svg);}
button[name=pause] {background-image:url(/icons/pause.svg);}
button[name=play], .paused button[name=pause] {background-image:url(/icons/play.svg);}
button[name=restart] {background-image:url(/icons/restart.svg);}
button[name=focus] {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;}
.tiles { background:rgba(0,0,0,.25); width:100%; height:100%;display:flex; justify-content:center; align-items:center; flex-wrap:nowrap; color:#fff;}
.tiles button{background-color:transparent;background-repeat:no-repeat;background-size:contain;z-index:3;}
.tiles h2 {margin:0;font-size:24px;}
.tile {position:relative;}
.tile span {color:#fff;position:absolute;bottom:0;left:0;right:0;z-index:3;padding:15px;font-size:14px;text-align:left;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.3));}
.tile button:hover {background-color:transparent;}
.tile button[name=mute] {position:absolute; top:12px; left:12px; height:24px;}
.tile button[name=remove] {position:absolute; top:3px; right:3px;font-size:18px;font-weight:bold;color:#fff;opacity:0;pointer-events:none;}
.tile:hover button[name=remove] {opacity:1;pointer-events:auto;}
#videos .tile {width:100%;height:100%;flex:1;padding:0;}
#videos .tile span {font-size:24px;}
#videos .tiles button[name=camera] {background:transparent;}
#videos .tile.screen:hover button[name=focus] {opacity:1;background:linear-gradient(to bottom,rgba(0,0,0,.3),transparent 30%, transparent);}
#videos.sharing .tiles {align-items:flex-start;}
#videos.sharing .camera {max-width:140px;height:120px;flex:auto;padding:10px;}
#videos.sharing .tile span {opacity:0;}

#queue {align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;}
#queue .tile { width:140px; height:130px; padding:10px; background-color:transparent;}
#queue .tile:hover { background-color:rgba(0,0,0,.3); }
#queue .tile span {left:10px;bottom:10px;right:10px;padding:5px;}
#device-picker { min-width: 200px; max-width: 360px; }
.tile.hasAudio button[name=mute] {background-image:url(/icons/volume-on.svg);}

#queue .tile.prerec {width:160px;height:100px;}
.tile.prerec video {max-width:100%;width:100%;margin:0;pointer-events:none;}

#queue button[name=focus] {pointer-events:auto;}
#queue button[name=mute] {opacity:0;pointer-events:none;}

.tile span button {width:32px; height:32px; margin-right:20px;}

#topics {
	display: flex;
	flex-direction: column;
}
.footnote {
	margin-top: auto;
	margin-bottom: 20px;
	margin-right: 20px;
	font-size: 16px;
	align-self: flex-end;
}

@media (max-width: 600px) {
	body { font-size: 22px; }
	h1 {font-size:20px;}
	h2 {font-size:24px;}
	p {margin-bottom:10px;}
	.tickers > *, .tickers li {height:26px;}
	.about .dot::after {font-size:14px;}
}
@media (max-width: 400px) {
	.date {display:block;}
	#pitch form {bottom:10vh;width:80vw;height:80vw;margin-left:-40vw;}
	#pitch form > *{padding-top:12vw;}
	#pitch input[type=submit]{width:60px;height:60px;padding:4px;}
 .small {font-size: 18px;}
}