/* Northernlands-specific styles */
.glory .holder {
	display: block;
	text-align:center;
	position: relative;
	height: 100%;
	padding-top: 1em;
	padding: 1em 0;
}
a, p a, h2 a, h3 a, h4 a { color: #FF6700; }
footer a, footer p a { color: white; }
a:visited { color: inherit; }
h1 { text-align: center; line-height: 1em; }
h4 { font-size: 1.2em; margin-bottom: 0.5em; }
#main ul.sponsors { margin-bottom: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#main ul.sponsors li > a { min-height: auto; }
#main ul.sponsors li > a:hover,#main ul.sponsors li > a:focus { background: black; }
#main .right-column ul.grid { margin-bottom: 0; }
div.youtube-embed, div.external-embed { height: auto; }
.promo img { width: 690px; max-width: 100%; margin: auto; display: block; }
.page .promo img { height: 120px; }
#main > div > .holder { padding: 2em 0; }
#main .promo { font-size:1.6em;line-height:1.25em;text-align:center; }
.padded > h2 { margin: 0; text-align:center;}
ul.speakers { grid-template-columns: repeat(1, 1fr); }
ul.speakers li .person { min-height: auto; height: auto; margin-bottom: 0px; }
ul.speakers li figure { width: 200px; float: left; margin-right: 1em; text-align: center; }
ul.speakers li figure img, .headshot { width: 100%; filter: grayscale(100%); transition: filter 0.2s ease-in; }
ul.speakers li figure img:hover, .headshot:hover { filter: none!important; }
ul.speakers li p:last-child:after { content: ""; display: block; clear: both; }
#main .right-column ul.speakers figure { width: 30%; font-size: 0.8em; }
ul.grid > li > a, ul.grid > li > div {
	height: auto;
}
div.external-embed > .inner a {
	color: inherit;
}
#talk > div {
	display: grid;
	grid-template-columns: 1fr 400px;
	grid-template-rows: 1fr auto;
	grid-gap: 0.25em;
	width: 100%;
	padding: 2em 2em!important;
}
#mezzanine > a { display: block; width: 100%; height: 100%; text-align:center; text-decoration: none; }
#mezzanine > a:hover, #mezzanine > a:focus { background-color: black; color: white; }
#player { position: relative; padding-top: 56.25%; max-height: 100vh; }
#player .inner { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
#player iframe { height: 100%; width: 100%; }
#player.youtube-embed { height: auto; }
#comments { max-height: 360px; }
#comments > div { height: 100%; }
#comments #patchat form { padding: 1em 1em 0.5em 1em; }
#comments ol.thread { margin-left: 0px; margin-bottom: 0px; }
#comments .message { grid-gap: 0.25em; }
#comments .message .name { color: #FF6700; }
#comments .message.reply { background-image: url('indent.svg'); }
#comments .message.question { background-color: rgba(255, 103, 0, 0.1); border-left: 4px solid #ff6700; padding-left: 0.5em; }
#comments .message.reply.question { padding-left: 2em; }
#comments #patchat #displayname { padding: 0 0.5em; }
div.youtube-embed { margin-bottom: 0; }

#talk.recorded > div { grid-template-columns: 100%; max-width: 1080px; padding: 2em 1em!important; font-size: 1.2em; }
section { margin-bottom: 2em; }
section:last-child { margin-bottom: 0; }
#transcript time { color: #efefef; margin-right: 0.5em; font-weight: bold; border-right: 2px solid #dfdfdf; padding: 0.25em 0.5em; min-width: 4em; text-align:center; display: inline-block; }
#transcript time.r { color: #afafaf; }
#transcript p { margin-bottom: 1em; }
#transcript p.l { margin: 0; display: block; }
#transcript p.l:hover,#transcript p.l:focus { background-color: #efefef; }
#transcript p.l:hover time,#transcript p.l:focus time { color: #ff6700; border-color: #ff6700; background-color: white; }

.columns { grid-template-columns: 66.66% auto; }
.columns {
	display: grid;
	grid-gap: 1em;
}

table { border-collapse: collapse; width: 100%; }
table th { background: #FF6700; color: black; }
table.timetable td, table.timetable th { border: 1px solid #FF6700; }
table.timetable th:first-child, table.timetable td:first-child { width: 3em; }

.main-content, #player {
	background-repeat: no-repeat;
	background-size: 10%, 10%, 15%, 25%;
	background-position: top left, bottom right, top left, right -6%;
}
#player { background-size: 20%, 20%, 30%; text-align: left; }

#attendees { grid-template-columns: repeat(4, 1fr); }
.postit { position: relative; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)); }
.postit > div { position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2em), calc(100% - 2em) 100%, 0% 100%); height: 100%; }
.postit > div:after { content: ""; position: absolute; bottom: 0px; right: 0px; width: 2em; height: 2em; background: rgba(0,0,0,0.2); box-shadow: -2px -1px 3px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.1); }
.postit:nth-child(8n+1) > div { transform: rotate(-1deg); }
.postit:nth-child(3n+1) > div { transform: rotate(2deg); }
.postit:nth-child(8n+2) > div { transform: rotate(0.5deg); }
.postit:nth-child(6n+2) > div { transform: rotate(-1.5deg); }
.postit:nth-child(6n+4) > div { transform: rotate(2.5deg); }
.postit:nth-child(8n+6) > div { transform: rotate(-2deg); }
.postit:nth-child(12n+4) > div { transform: rotate(-0.5deg); }

.postit:nth-child(8n+1) > div:after { transform: rotate(-5deg); }
.postit:nth-child(7n+2) > div:after { transform: rotate(5deg); }
.postit:nth-child(9n+3) > div:after { transform: rotate(2deg); }

table td, table th { border: 1px solid #efefef; padding: 4px 8px; }
table { margin-bottom: 16px; width: 100%; }
table td:first-child { width: 15%; }
.banner { font-size: 1em; font-weight: 500; text-align: center; line-height: 1.5em; }
.bold { font-weight: 700; }

#welcome { text-align: center; overflow: hidden; display: block; transition: height 2s ease-in; }
.live #welcome { border-bottom: 1px solid #FF6700; }



/* Collapsible */
.collapsible { position: relative; }
input[type='checkbox'].toggle { opacity: 0.01; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; z-index: -1; }
.lbl-toggle { display: block; text-align: center; padding: 0.5em; transition: all 0.25s ease-out; cursor: pointer; }
.lbl-toggle:hover { opacity: 0.9; }
.lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; }
.toggle:checked + .lbl-toggle::before { transform: rotate(90deg) translateX(-3px); }
.collapsible-content { max-height: 0px; overflow: hidden; transition: max-height 0.3s ease-in-out; }
.toggle:checked + .lbl-toggle + .collapsible-content { max-height: 100vh; }
.collapsible-content .content-inner { padding: 1em; }
#main .holder.collapsible-content { padding: 0; }




@media only screen and (max-width: 1080px) {
	#talk > div, .columns { grid-template-columns: auto; }
	#broadcast, .live #now-and-next { grid-column: auto; }
	#attendees { grid-template-columns: repeat(3, 1fr); }
	#talk > div { padding: 1em!important; }
}
@media only screen and (max-width: 700px) {
	#comments { max-height: 100vh; height: 80vh; }
	#main ul.headshots { grid-template-columns: repeat(3, 1fr); }
	#attendees { grid-template-columns: repeat(2, 1fr); }
}