@font-face {
  font-family: "Junicode-Condensed";
  src: url("fonts/junicode/Junicode-RegularCondensed.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Junicode-Condensed";
  src: url("fonts/junicode/Junicode-BoldItalicCondensed.ttf");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Junicode-Condensed";
  src: url("fonts/junicode/Junicode-BoldCondensed.ttf");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Caveat-Outline";
  src: url("fonts/Caveat.woff");
  font-weight: regular;
  font-style: normal;
}

@font-face {
  font-family: "U001";
  src: url("fonts/u001-font-univers/webfonts/U001-Reg.woff");
  font-weight: regular;
  font-style: normal;
}

@font-face {
  font-family: "U001";
  src: url("fonts/u001-font-univers/webfonts/U001-Bol.woff");
  font-weight: Bold;
  font-style: normal;
}

@font-face {
  font-family: "U001";
  src: url("fonts/u001-font-univers/webfonts/U001-BolIta.woff");
  font-weight: Bold;
  font-style: italic;
}

@font-face {
  font-family: "U001";
  src: url("fonts/u001-font-univers/webfonts/U001-Ita.woff");
  font-weight: regular;
  font-style: italic;
}


/* ==========================================================================
   Custom medias definitions
   ========================================================================== */
/* @custom-media --mobile only screen and (max-width: 767px); */
/* @custom-media --mobile-landscape only screen and (max-width: 767px) and (orientation: landscape); */

/* ==========================================================================
  Variables
  ========================================================================== */
:root {
  --bleu-bille: #112B92;
  --vert-karel: #00B788;
  --orange-karel: #ff5900;
  --rose-karel: #FCBFC4;
  --rose-pale: #ffe1e4;
  --red-question: #ff3f00;
  --color-emptor: #496153;

  --font-size: 15pt;
  --font-size-small: 80%;
  --font-size-extra-small: 70%;
  --line-height: 18.5pt;
}

body {
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: "U001";
  padding: 0px;
  margin: 0px;
}

/* ==========================================================================
  Typography
  ========================================================================== */

p {
  margin: 0;
}

ul, ol {
  margin: 0 0 0 1em;
}

ul {
  list-style-type: none;
}

main ul > li::before {
  content: "─ ";
  margin-left: -1em;
}


a {
  text-decoration: underline;
  color: inherit;
  border: 0px solid currentColor;
  font-size: 1em;
  /* border-bottom: 2px solid; */
}
a:hover {
  color: var(--orange-karel);
}
.produser {
  text-decoration: none;
  padding: 1px .25em;
  color: currentColor;
  vertical-align: baseline;
  position: relative;
  border-bottom: none;
  display: inline-block;
}

.produser:before {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid currentColor;
  border-top: 0px;
}

h1.produser {
  font-size: 165%;
  display: inline-block;
  line-height: 100%;
  font-family: "U001";
  font-weight: bold;
  -webkit-text-stroke-width: 0px;
  margin-top: 1em;
  padding: 0;
}

h1.produser:before {
  border-width: 0px;
}

/* h1 {
  font-family: "Junicode-Condensed";
  line-height: calc(var(--line-height) * .8);
  font-size: 1.7em;
  margin: 0;
  margin-bottom: 3px;
} */
h1 {
  font-family: "Junicode-Condensed";
  line-height: .8em;
  font-size: 3em;
  margin-bottom: 3px;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: var(--bleu-bille);
  color: white;
  margin: 0;
  margin-bottom: 0.15em;
  /* display: none; */
}
.breadcrumbs + h1 {
    -webkit-text-stroke-width: 0px;
      color: var(--bleu-bille);
}
[data-chapter="emptor"] h1 {
  -webkit-text-stroke-color: var(--color-emptor);
}
[data-chapter="emptor"] .breadcrumbs + h1 {
  color: var(--color-emptor);
}
h2, h4 {
  font-family: "U001";
  text-transform: uppercase;
  font-size: var(--font-size-small);
  margin-top: calc(2 * var(--line-height));
/*  margin-bottom: calc(1.3 * var(--line-height));
*/  font-size: 0.8em;
  letter-spacing: 0.05em;
  margin-top: calc(2 * var(--line-height));
  margin-bottom: calc(0.6 * var(--line-height));
}

h4 {
  margin-top: calc(1 * var(--line-height));
  margin-bottom: 0;
}

h2.produser {
  padding: 0 7px;
  margin: 0;
  text-transform: initial;
  font-size: inherit;
  letter-spacing: 0.01em;
  display: inline;
  float: left;
  margin-right: 7px;
/*  margin-bottom: 0.5em;
*/  font-weight: bold;
  margin-left: -1.9em;
}
.produsers + p {
  margin-bottom: calc(0.8 * var(--line-height));
}

h3 {
  font-size: 0.8em;
  line-height: 1.3em;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.025em;
  font-family: "U001";
  margin: 0;
  margin-bottom: var(--line-height);
  margin-top: calc(2.5 * var(--line-height));
}


.produser a {
  border: none;
  text-decoration: none;
}

.produser--item {
  margin-left: 1.9em;
}


main, aside {
  color: var(--bleu-bille);
}

[data-chapter="emptor"] main,
[data-chapter="emptor"] aside {
  color: var(--color-emptor);
}

aside.programme-items {
  scroll-padding-top: 3em;
}

.info {
  font-family: "Junicode-condensed";
  font-weight: bold;
  font-size: 1em;
  line-height: 1.1em;
  margin-bottom: calc(2 * var(--line-height));
}

main p {
  max-width: 47.5em;
}

p {
  margin-bottom: calc( 0 * var(--line-height));
}

p.page-intro {
  font-family: "Junicode-Condensed";
  font-size: 1.7em;
  line-height: 1em;
  margin-bottom: calc(1.5 * var(--line-height));
}

.event-title {
	font-size: .8em;
	line-height: 1.25em;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.025em;
	font-family: "U001";
	margin: 0;
}

.date-header {
	font-size: 1.6em;
	font-weight: bold;
	font-family: "Junicode-Condensed";
	line-height: 1.2em;
}

.event-title + p {
  margin-top: calc(.5 * var(--line-height));
}
/*section.event-summary a::before {
  content: '';
  background: url(images/jump-arrow.svg) no-repeat;
  display: block;
  height: 10px;
  width: 55px;
  padding-bottom: 20px;
  float: left;
}*/

.info .produser {
  font-family: "u001";
  font-weight: normal;
}
/* ==========================================================================
  tags
  ========================================================================== */
code {
    font-family: "U001";
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.65em;
    color: black;
    letter-spacing: 0.015em;
    line-height: calc(0.3px * var(--line-height));
}
/* ==========================================================================
  Page structure
  ========================================================================== */

body {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  left: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: [left sidebar-start] minmax(200px, 1fr) [sidebar-end content-start] 1fr [content-middle] 1fr [content-end right];
  grid-template-rows: [top navbar] min-content [map] min-content [header-content] 1fr [footer] min-content [bottom]; /* possible add 'main' and 'aside' as names for top line. But might be more confusing than adding clarity */
  border-left: 2px solid black;
  border-right: 2px solid black;
}

main {
  padding: 1em;
}

footer {
  padding: .5em 1em;
  font-size: var(--font-size-small);
}

#nav--main {
  grid-column: sidebar-start;
  grid-row: navbar;
  flex: 0 0 auto;
  border-bottom: 2px solid black;
  display: flex;
  padding: 1em;
  column-gap: 1.5em;
}

#nav--main a {
  text-decoration: none;
  border: none;
}

#nav--main a:hover {
  color: var(--bleu-bille);
}

#nav--main #site-logo {
  flex: 0 0 150px;
}

#nav--main #site-logo img {
  max-width: 150px;
}

#nav--main ul {
  flex: 1 0;
  margin: 0;
  padding: 0;
}

#toggle--menu {
  display: none;
}

#map {
  grid-row: map;
  grid-column: sidebar-start;
  background: var(--rose-pale);
  border-bottom: 2px solid black;
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
  height: 40vh;
}

#header-content {
  grid-row: header-content;
  grid-column: sidebar-start;
  overflow-y: auto;
  padding: 1em;
}

#header-content p {
  font-family: "Junicode-Condensed";
  font-size: 1.7em;
  line-height: 1em;
}

main {
  grid-row: top / footer;
  grid-column: content-start /  content-end;
  overflow-y: auto;
  max-height: 100vh;
  scroll-padding-top: 5em;
  border-left: 2px solid black;
}


.two-columns main {
  grid-column: content-start / content-middle;
  border-right: 2px solid black;
}

.two-columns aside {
  grid-row: top / footer;
  grid-column: content-middle / content-end;
  overflow-y: auto;
}

footer {
  border-top: 2px solid;
  grid-column: left / right;
  grid-row: footer;
  background: var(--rose-karel);
}

.breadcrumbs {
  border-bottom: 2px solid black;
  margin: -1em -1em var(--line-height) -1em;
  position: -webkit-sticky;
  position: sticky;
  top: -1em;
  background:white;
  z-index: 1;
  margin-bottom: 15px;
}

.item-reference {
  border-bottom: 2px solid black;
  margin: 0 -1em 0 -1em;
  padding: .5em 1em;
}

.breadcrumbs ul {
  list-style-type: none;
  margin: 0;
  padding: .25em .5em;
  font-size: var(--font-size-small);
}

.breadcrumbs li {
  display: inline;
}

.breadcrumbs ul > li:before {
  content: none;
}

.breadcrumbs ul > li:nth-child(n+2):before {
/*  content: " → ";*/  
content: '';
background: url(images/jump-arrow-blue.svg) no-repeat;
display: inline-block;
height: 10px;
width: 45px;
padding-bottom: 12px;
}

[data-chapter="emptor"] .breadcrumbs ul > li:nth-child(n+2):before {
  background: url(images/jump-arrow-emptor.svg) no-repeat;
}

.breadcrumbs ul > li:nth-child(n+2) {
  margin-left: 1em;
}

.breadcrumbs a {
  border-bottom: none;
}

footer .logo-partners {
  float: right;
}

footer p {
  margin-bottom: 0;
}

.item--metadata {
  margin-bottom: var(--line-height);
}

.item--metadata .inlinelist {
  font-size: 90%;
}
ul.simplelist, ul.simplelist > li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  border-bottom: none;
}
.simplelist li {
  margin-bottom: calc(0.6 * var(--line-height));
}
ul.simplelist > li:before {
  content: "";
  margin: 0;
  content: '';
  background: url(images/jump-arrow-blue.svg) no-repeat;
  float: left;
  height: 10px;
  width: 45px;
  padding-bottom: 12px;
}

[data-chapter="emptor"] ul.simplelist > li:before {
  background: url(images/jump-arrow-emptor.svg) no-repeat;
}

ul.inlinelist, ul.inlinelist > li {
  margin: 0;
  padding: 0;
}

ul.inlinelist > li {
  display: inline-block;
}

ul.inlinelist > li:before {
  content: "";
  margin: 0;
}

ul.inlinelist > li:after {
  content: ',';
  display: inline-block;
}

ul.inlinelist > li:last-child:after {
  content: '';
  display: none;
}

img.content-image, figure.content-image {
  width: 33%;
  float: left;
  margin-right: .5em;
  margin-top: .5em;
  margin-bottom: .5em;
  cursor: zoom-in;
  clear: left;
}

figure.content-image {
  margin-left: 0;
}

img.content-image.full, figure.content-image.full img {
  cursor: zoom-out;
}

img.full,
audio,
video,
figure.full {
  max-width: 47.5em;
  width: 100%;
  margin-top: calc(0.25 * var(--line-height));
  /* margin-bottom: .5em; */
}

figure.content-image.full figcaption {
  width: 80%;
}

figure.content-image img {
	width: 100%;
	float: none;
	margin-top: 0;
	margin-bottom: 0;
}

figcaption {
  font-size: 80%;
}

/* 
a.tag {
	font-size: 85%;
	text-transform: uppercase;
	border-bottom: none;
	letter-spacing: 0px;
} */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: .5em;
	margin: 1em 0;
	align-items: center;
}

.gallery img {
	float: initial;
	/* width: 25%; */
	vertical-align: middle;
	max-width: 100%;
	margin: 0;
}

.trajectory-list {
  margin-bottom: 1.5em;
  /*! margin-left: -1em; */
  /*! margin-right: -1em; */
}

.trajectory-list--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /*! grid-gap: 1em; */
  /*! border: 1px solid; */
/*  border-top: 2px solid;
  border-bottom: 2px solid;*/
  margin-left: -1em;
  margin-right: -1em;
  z-index: -1;
  margin-top: 1em;
}

.trajectory-list section.trajectory--item {
  background: var(--rose-pale); 
  padding: 1em;
  outline: 2px solid;
  outline-offset: 0px;
  padding: 1em;
  position: relative;
  padding-bottom: 2em;
}
.trajectory-list section.trajectory--item img:nth-child(n+2) {
  display: none;
}
.trajectory-list section.trajectory--item:hover {
  background: white;
}

.trajectory-list section.trajectory--item h2,
.trajectory-list section.trajectory--item h2.produser {
    margin-top: 0;
    text-align: left;
    margin-bottom: auto;
    display: block;
    font-size: 1.1em;
    letter-spacing: 0;
    margin-bottom: 0.5em;
    text-transform: none;
    padding-bottom: .25em;
    left: 0;
    margin-left: 0;
    float: none;
    display: inline-block;
}

.programme-item-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.programme-item-list h2 {
  margin-top: .5em;
}

.programme-item-list :target h2 {
  color: var(--orange-karel);
}

.programme-item-list > li {
  border-bottom: 2px solid black;
  padding: 1em;
}

.timecode {
	font-size: 75%;
	border: 1px solid;
	padding: .1em .25em;
	/* margin-right: .5em; */
	/* margin-left: -.5em; */
	letter-spacing: 1px;
  vertical-align: baseline;
  cursor: pointer;
}

.timecode:hover {
  color: var(--red-question);
}

.list-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.programme-item-list .list-header h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.question {
	font-family: "Junicode-Condensed";
	font-size: 180%;
	font-weight: bolder;
	line-height: 1em;
  -webkit-text-stroke: 0.9px var(--red-question);
  color: white;
  margin: calc(0.5 * var(--line-height));
  display: block;
}

section.audio {
  border-top: 2 solid black;
  border-bottom: 2 solid black;
}

.programme-item-list li {
  padding-top: 0;
}

.programme-item-list li.list-header {
  padding-top: 1em;
}

/* .programme-item-list :target:before {
	margin: -3em 0 0;
	height: 3em;
	content: '';
	display: block;
} */
.produser a,
.taglist li a,
a.tag {
  text-decoration: none;
}
.taglist li a,
.tag {
  border-width: 0px 1px 1px 0px;
	border-style: dotted;
	border-radius: .25em;
	padding: 0 .15em;
	border-left: 0px;
	border-top: 0px;
  background: var(--rose-pale);

}

.tag:target {
  color: var(--orange-karel);
}

.tag:target:before {
	margin: -6em 0 0;
	height: 6em;
	content: '';
	display: inline-block;
}

.inline-navigation ul li {
  display: inline-block;
  margin-left: 25px;
}
.inline-navigation ul li::before {
	content: '';
  background: url(images/jump-arrow-blue.svg) no-repeat;
  display: block;
  height: 10px;
  width: 45px;
  padding-bottom: 12px;
  float: left;
}

[data-chapter="emptor"] .inline-navigation ul li::before {
  background: url(images/jump-arrow-emptor.svg) no-repeat;
}

.inline-navigation ul {
  margin: 0;
  padding: 0;
}

.inline-navigation {
	margin: -2em -1.25em 1em -1.25em;
	padding: .75em 1.25em .5em 1.25em;
  position: -webkit-sticky;
	position: sticky;
	top: -1.25em;
	background: white;
	z-index: 1;
  border-bottom: 2px solid;
  font-size: var(--font-size-small);
}

.inline-navigation ul:before {
	content: "Jump to:";
}

.produser-list:target:before,
.trajectory-list:target:before {
  margin: -5.5em 0 0;
	height: 5.5em;
	content: '';
	display: block;
}

.taglist {
	column-width: 12.5em;
	column-gap: 1.5em;
  line-height: 140%;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.taglist :first-child h3 {
	margin-top: 0;
}
.taglist li {
  padding-left: .5em;
  position: relative;
}
.taglist li:before {
  content: '-';
  position: absolute;
  left: 0em;
  margin-left: 0;
}
.taglist li.letter {
  padding-left: 0;
}
.taglist li.letter:before {
  content: '';
}
.read-further:after {
  content: '';
  background: url(images/jump-arrow-blue.svg) no-repeat;
  display: inline-block;
  height: -7px;
  width: 41px;
  padding-bottom: 20px;
  margin-left: 7px;
}

[data-chapter="emptor"] .read-further:after {
  background: url(images/jump-arrow-emptor.svg) no-repeat;
}

.read-further {
	margin-top: calc(0.5 * var(--line-height));
	display: inline-block;
	/*! float: right; */
}

.trajectory-list .read-further {
  position: absolute;
	right: .5em;
	bottom: .5em;
}

.long-text p + p {
  margin-top: var(--line-height);
}

main > :last-child,
aside.event-detail > :last-child {
	margin-bottom: calc(3 * var(--line-height));
}

div.footnote hr {
  display: none;
}

div.footnote > ol > li {
  padding: calc(0.5 * var(--line-height));
  margin-left: calc(-.5 * var(--line-height));
}

sup:target {
  color: var(--orange-karel);
}

.footnote li:target {
  background: var(--rose-pale);
}

sup {
  border: 1px solid currentColor;
	padding: .07em .2em .05em .2em;
	background: transparent;
	font-size: 70%;
  line-height: 60%;
	position: relative;
	margin: 0 .25em;
	vertical-align: middle;
	top: -.2em;
}

sup:hover {
  color: var(--orange-karel);
}

sup a {
	text-decoration: none;
	border-bottom: 0;
}

/**
  Homepage
*/

main.event-list {
  padding: 0;
}

.event-list .event {
	border-bottom: 2px solid black; /* currentColor */
	padding: calc(.5 * var(--line-height)) 1em var(--line-height) 1em;
	cursor: pointer;
}

aside.event-detail {
	background: var(--bleu-bille);
	color: white;
	padding: calc(.5 * var(--line-height)) 1em var(--line-height) 1em;
}

aside.event-detail[data-chapter="emptor"] {
  background: var(--color-emptor);
}

.home h2 a,
.home time a {
  border-bottom: none;
}


aside.event-detail .question {
  -webkit-text-stroke: 1.1px white;
  color: transparent;
}

/** Change color on events, where there is a dark background. */
aside.event-detail .tag {
	color: var(--rose-pale);
	background: transparent;
	border-width: 0 2px 2px 0;
	border-radius: .4em;
}

/** Hide event image in details. Meant to show on mobile. */
aside.event-detail .event-image {
  display: none;
}

/**
* Header for activities listing
*/
.sticky-section-header {
  display: block;
  padding: .25em .5em;
  font-size: var(--font-size-small);
  border-bottom: 2px solid black;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: 0;
  background: white;
  color: black;
}

.chrome {
  position: -webkit-sticky;
	position: sticky;
	top: 0;
	margin-right: -.25em;
	float: right;
  z-index: 1;
	/* background: white; */
}

/* .chrome button {
  color: inherit;
  font-family: inherit;
  border: none;
  background: none;
  font-size: inherit;
} */

.chrome button {
	color: black;
	font-family: inherit;
	border: none;
	background: white;
	font-size: inherit;
  border: 2px solid black;
  font-size: var(--font-size-small);
}

.event-list .event[data-chapter="emptor"] {
  position: relative;
	padding-left: 2em;
  color: var(--color-emptor);
}

.event-list .event[data-chapter="emptor"]::before {
	content: "EMPTOR";
	font-weight: bold;
	letter-spacing: .25em;
	font-style: italic;
	display: block;
	text-align: center;
	background: white;
	color: black;
	writing-mode: tb;
	transform: rotate(180deg);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-left: 2px solid black;
	font-size: 80%;
}

@media screen and (min-width: 768px) {
  .event-list .event[data-active],
  .event-list .event:hover {
    background-color: var(--bleu-bille);
    color: white;
  }

  .event-list .event[data-active][data-chapter="emptor"],
  .event-list .event[data-chapter="emptor"]:hover {
    background-color: var(--color-emptor);
  }

  .event[data-active] .read-further:after,
  .event:hover .read-further:after {
    background: url(images/jump-arrow-white.svg) no-repeat;
  }


  .read-further:hover:after,
  .event:hover .read-further:hover:after,
  .event[data-active] .read-further:hover:after{
    background: url(images/jump-arrow-orange.svg) no-repeat;
  }

  .chrome {
    display: none;
  }

  #map {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }

  .map--expanded nav, 
  .map--expanded main, 
  .map--expanded aside,
  .map--expanded section {
    display: none;
  }  

  .map--expanded #map {
    display: block;
    background-position: center center;
    background-size: contain;
    background-color: #ffdbdb;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
    grid-column: left / right;
    grid-row: top / footer;
    height: initial;
  }
}

@media screen and (max-width: 767px) {

  :root {
    --font-size: 13pt;
    --line-height: 16pt;
  }

  body {
    position: relative;
    top: initial;
    right: initial;
    bottom: initial;
    left: initial;
    overflow: initial;
    /* Redefining the grid. */
    grid-template-columns: [left content-start] 1fr [content-end right];
    grid-template-rows: [top navbar] calc(2.5 * var(--line-height)) [map] min-content [header-content] min-content [main] min-content [aside] min-content [footer] min-content [bottom];
    margin-left: .25em;
    margin-right: .25em;
  }

  #nav--main {
   grid-row: top;
   grid-column: left / right;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   background: white;
   z-index: 2;
   padding: .5em;
   justify-content: space-between;
  }

  #map {
    height: 35vh;
    background-size: contain;
  }

  #header-content, #map {
    border-bottom: 2px solid black;
    grid-column: left / right;
    display: none;
  }

  .home #header-content,
  .home #map {
    display: initial;
  }

  main {
    grid-row: main;
    grid-column: left / right;
    overflow-y: initial;
    max-height: initial;
    border-left: initial;
    border-right: initial;
  }


  .two-columns main {
    grid-row: main;
    grid-column: left / right;
    border-left: initial;
    border-right: initial;
  }

  .two-columns aside {
    grid-row: aside;
    grid-column: left / right;
    overflow-y: initial;
    border-left: initial;
    border-right: initial;
  }

  footer {
    border-top: 2px solid;
    grid-column: left / right;
    grid-row: footer;
    background: var(--rose-karel);
  }

  #nav--main #site-logo {
    flex: 0 0 50px;
  }

  #nav--main #site-logo img {
    /* width: 46px; */
    height: 2em;
  }

  #nav--main ul {
    display: none;
  }

  #nav--main #toggle--menu {
    display: initial;
    align-self: center;
    background: none;
    border: none;
    color: black;
    font-family: inherit;
    font-size: var(--font-size-small);
  }
  
  .menu--expanded #nav--main #toggle--menu:before {
    content: "CLOSE "
  }

  .menu--expanded #nav--main ul {
    display: block;
    position: fixed;
    top: calc(2.5 * var(--line-height));
    background: var(--bleu-bille);
    color: white;
    left: calc(.25em + 2px);
    right: calc(.25em + 2px);
    bottom: 0;
    padding-top: var(--line-height);
    padding-left: 1em;
    z-index: 2;
  }

  .menu--expanded #nav--main ul li:nth-of-type(n+2) {
    margin-top: calc(.5 * var(--line-height));
  }

  .inline-navigation {
    top: calc(2.5 * var(--line-height));
  }
  
  .breadcrumbs {
    border-bottom: 2px solid black;
    position: -webkit-sticky;
    position: sticky;
    top: calc(2.5 * var(--line-height));
    padding: 0;
  }

  /**
  * Header for activities listing
  */
  .sticky-section-header {
    top: calc(2.5 * var(--line-height));
  }

  .home aside {
    display: none;
  }

  .home.aside-active-through-click {
    overflow: hidden;
  }

  .home.aside-active-through-click aside {
    display: block;
    position: fixed;
    top: calc(2.5 * var(--line-height));
    left: calc(0.25em + 2px);
    right: calc(0.25em + 2px);
    z-index: 1;
    bottom: 0;
    overflow: auto;
  }
  aside.event-detail .event-image {
    display: block;
    margin: calc(-.5 * var(--line-height)) -1em var(--line-height) -1em;
    box-sizing: border-box;
    padding: 0;
  }
  
  aside.event-detail .event-image img {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid black;
    background-color: var(--rose-pale);
  }

  .chrome {
    float: right;
  }
  
  .trajectory-list--grid {
    display: grid;
    grid-auto-columns: minmax(300px, 1fr);
    grid-template-columns: initial;
  }

  .breadcrumbs ul {
    display: flex;
    width: calc(100vw - 2em);
  }

  .breadcrumbs li {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  div.footnote > ol {
    margin: 0;
    padding-left: 2em;
  }

  div.footnote > ol > li {
    padding: calc(0.5 * var(--line-height)) 0;
    margin-left: calc(-.5 * var(--line-height));
  }
}

[data-loading="true"]:before {
  display: block;
  content: "Loading...";
  text-align: center;
  padding-top: calc(3 * var(--line-height));
}

#map[data-hidden="true"] {
  display: none;
}

.autolink {
	word-break: break-all;
}

.mc-field-group {
	margin-bottom: calc(.5 * var(--line-height));
}

input {
	font-size: inherit;
	font-family: inherit;
	padding: calc(.1 * var(--line-height));
}

label {
	width: 8em;
	display: inline-block;
}

input[type="text"], input[type="email"] {
	width: 17em;
}

fieldset {
	border: none;
}