@media screen and (min-width:700px) {
	.schedule-fri {
		display: grid;
		grid-gap: 1em;
		grid-template-rows:
			[tracks] auto
			[time-0930] 0.125fr
			[time-0945] 0.125fr
			[time-1000] 0.5fr
			[time-1015] 0.125fr
			[time-1030] 0.5fr
			[time-1045] 0.5fr
			[time-1100] 0.5fr
			[time-1115] 0.5fr
			[time-1130] 0.125fr
			[time-1145] 0.125fr
			[time-1200] 0.5fr
			[time-1215] 0.5fr
			[time-1230] 0.5fr
			[time-1245] 0.5fr
			[time-1300] 0.5fr
			[time-1315] 0.5fr
			[time-1330] 0.5fr
			[time-1345] 0.5fr
			[time-1400] 0.125fr
			[time-1545] 0.125fr
			[time-1600] 0.5fr
			[time-1615] 0.5fr
			[time-1630] 0.5fr
			[time-1645] 0.5fr
			[time-1700] 0.5fr
			[time-1715] 0.5fr
			[time-1730] 0.5fr
			[time-1745] 0.5fr
			[time-1800] 0.125fr
			[time-1815] 0.125fr
			[time-1830] 0.5fr
			[time-1845] 0.5fr
			[time-1900] 0.5fr
			[time-1915] 0.5fr
			[time-1930] 0.5fr
			[time-1945] 0.5fr
			[time-2000] 0.5fr
			[time-2015] 0.5fr
			[time-2030] 0.5fr;

		grid-template-columns:
			[times] 4em
			[track-1-start] 1fr
			[track-1-end track-2-start] 1fr
			[track-2-end track-3-start] 1fr
			[track-3-end track-4-start] 1fr
			[track-4-end];
	}
}

@media screen and (min-width:700px) {
	.schedule-sat {
		display: grid;
		grid-gap: 1em;
		grid-template-rows:
			[tracks] auto
			[time-0930] 0.125fr
			[time-0945] 0.125fr
			[time-1000] 0.5fr
			[time-1015] 0.5fr
			[time-1030] 0.5fr
			[time-1045] 0.5fr
			[time-1100] 0.5fr
			[time-1115] 0.5fr
			[time-1130] 0.125fr
			[time-1145] 0.125fr
			[time-1200] 0.125fr
			[time-1215] 0.125fr
			[time-1230] 0.5fr
			[time-1245] 0.5fr
			[time-1300] 0.5fr
			[time-1315] 0.5fr
			[time-1330] 0.5fr
			[time-1345] 0.5fr
			[time-1400] 0.5fr
			[time-1415] 0.5fr
			[time-1430] 0.125fr
			[time-1445] 0.125fr
			[time-1600] 0.5fr
			[time-1615] 0.5fr
			[time-1630] 0.5fr
			[time-1645] 0.5fr
			[time-1700] 0.5fr
			[time-1715] 0.5fr
			[time-1730] 0.5fr
			[time-1745] 0.5fr
			[time-1800] 0.125fr
			[time-1815] 0.35fr
			[time-1830] 0.5fr
			[time-1845] 0.5fr
			[time-1930] 0.5fr;

		grid-template-columns:
			[times] 4em
			[track-1-start] 1fr
			[track-1-end track-2-start] 1fr
			[track-2-end track-3-start] 1fr
			[track-3-end track-4-start] 1fr
			[track-4-end];
	}
}

.time-slot {
	grid-column: times;
}

.track-slot {
	display: none;
	font-weight: bold;
	font-size:1em;
  text-align: center !important;
  font-family: "Lato", Calibri, Arial, sans-serif !important;
}


@supports( display:grid ) {
	@media screen and (min-width:700px) {
		.track-slot {
			display: block;
			padding: 10px 5px 5px;
			position: sticky;
			top: 0;
			z-index: 1000;
			background-color: rgba(255,255,255,.9);
		}
	}
}

.session {
	margin-bottom:  1em;
}


@supports( display:grid ) {
	@media screen and (min-width: 700px) {
		.session {
			margin: 0;
		}
	}
}

.session {
	padding: .5em;
	border-radius: 2px;
	font-size: 14px;
	box-shadow:
		rgba(255,255,255,.6) 1px 1px 0,
		rgba(0,0,0,.3) 4px 4px 0;
}

.session-title,
.session-break,
.session-time,
.session-track,
.session-presenter {
	display: block;
}

.session-title,
.session-break,
.time-slot {
	margin: 0;
	font-size: 1em;
}

.session-title{
  padding-bottom: 0.2em;
  font-weight: bold;
}

.session-title a {
	color: #fff;
	text-decoration-style: dotted;

	&:hover {
		font-style: italic;
	}

	&:focus {
		outline: 2px dotted rgba(0,102,204,.8);
	}
}

.session-break a {
	color: #fff;
	text-decoration-style: dotted;

	&:hover {
		font-style: italic;
	}

	&:focus {
		outline: 2px dotted rgba(255,255,255,.8);
	}
}

.time-slot {
	font-weight: bold;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
}

.track-1 {
	background-color: #b79801;
	color: #fff;
}

.track-2 {
	background-color: #687f00;
	color: #fff;
}

.track-3 {
	background-color: #544D69;
	color: #fff;
}

.track-4 {
	background-color: #c35500;
	color: #fff;
}

.track-all,
.track-all-break {
	display: flex;
	justify-content: center;
	align-items: center;
  font-weight: bold;
	box-shadow: none;
  color: #ffffff;
}

.track-all {
  background-color: #0066CC;
}

.track-all-break {
background-color: #cb3234;
  font-weight: bold !important;
}

.text {
	max-width: 750px;
	font-size: 18px;
	margin: 0 auto 50px;
}

.meta {
	color: #555;
	font-style: italic;
}

.meta a {
	color: #555;
}

hr {
	margin: 40px 0;
}