@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);header nav ul li.active a {
		border-bottom: 2px solid #970877;
}

header nav svg {
		margin: 0;
		padding: 0;
}

header nav ul li + li {
		padding-left: 0.8rem;
}

header h1:hover span {
    opacity: 0;
}

.gallery img {
		height: 65vh;
		max-width: none;
}

.gallery figure {
    margin: 0;
}

.gallery section.cartel h2 {
    margin: 0;
}

.gallery section.cartel {
    width: 30rem;
}

.gallery section {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 auto;
		        flex: 0 0 auto;
		margin: 0 1rem;
		max-width: none;
}

figure.wide .marginnote {
    width: 100%;
    padding-right: 2rem;
    padding-top: 1rem;

    & p {
      width: 100%;
    }
}

body {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12.5%;

  background-color: #fffff8;
  color: #111;
  max-width: 1400px;

  counter-reset: sidenote-counter;
}

hr {
  display: block;
  height: 1px;
  width: 55%;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

p, footer, table { width: 55%; }

blockquote {
 font-size: 1.4rem; }

blockquote p {
 font-style: italic;
 width: 55%;
 margin-right: 40px;
}

blockquote footer {
 width: 55%;
 font-size: 1.1rem;
 text-align: right;
}

article {
}

article h2, article h3, article h4 {
   background-color: #fff200;
   display: inline-block;
}

.admonition {
   border-left: 0.5rem solid #fff200;
   padding-left: 1.5rem;
   margin-left: -2rem;
}

.wide { max-width: 90%;
         clear:both; }

img { max-width: 100%; }

.sidenote, .marginnote {
 font-family: "Open Sans", Georgia, serif;
}

.marginnote *, .sidenote * {
 font-size: 1.1rem;
 line-height: 1.4;
 margin: 0;
 padding: 0;
}

@media (max-width: 1280px) {
  body {
    padding-left: 8%;
    padding-right: 8%;
  }

  p, footer { width: 75%; }
}

@media (max-width: 760px) {
  body {
    width: 84%;
    padding-left: 8%;
    padding-right: 8%;
  }
  p, footer { width: 100%; }
  pre.code { width: 97%; }
  ul { width: 85%; }
  blockquote { margin-left: 1.5em;
              margin-right: 0em; }
  blockquote p, blockquote footer { width: 100%; }
  label.margin-toggle:not(.sidenote-number) { display: inline; }
  .sidenote, .marginnote { display: none; }
  .margin-toggle:checked + .sidenote,
  .margin-toggle:checked + .marginnote { display: block;
                                        float: left;
                                        left: 1rem;
                                        clear: both;
                                        width: 95%;
                                        margin: 1rem 2.5%;
                                        vertical-align: baseline;
                                        position: relative; }
  label { cursor: pointer; }
  div.table-wrapper, table { width: 85%; }
  img { width: 100%; }
}

html {
  font-size: calc(12px + 3 * ((100vw - 420px) / 860));
}

@media screen and (min-width: 1280px) {

		html {
				font-size: 15px;
		}
}

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

		html {
				font-size: 12px;
		}
}

body {
  font-family: "Libre Baskerville", serif;
}

h1, h2, h3, h4 {
  /*line-height: 1;*/
  font-weight: 400;
}

h2, h3, h4 {
  font-family: "Open Sans", Georgia, serif;
}

h1 {
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  font-size: 3.2rem;
}

h2 {
  margin-top: 2.1rem;
  margin-bottom: 0;
  font-size: 2.2rem;
}

h3 {
  font-size: 1.7rem;
  margin-top: 2rem;
  margin-bottom: 0;
}

p.subtitle {
  margin-bottom: 1rem;
  margin-top: 0;
  display: block;

  font-style: italic;
  font-size: 1.4rem;
  line-height: 1;
}

article {
  padding: 3rem 0rem;
}

section {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

p, ol, ul {
  font-size: 1.2rem;
  line-height: 2.2rem;
}

p {
   margin-top: 1.4rem;
   margin-bottom: 1.4rem;
   padding-right: 0;
   vertical-align: baseline;
}

p + ol, p + ul {
  margin-top: -1rem;
}

section>ol, section>ul { width: 45%;
                          -webkit-padding-start: 5%;
                          -webkit-padding-end: 5%; }

li { padding: 0.5rem 0; }

/* Links */

/* Links: replicate underline that clears descenders */

a:link, a:visited {
  color: inherit;
}

article a:link {
  text-decoration: none;
  background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(#333, #333);
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8;
  background-position: 0% 93%, 100% 93%, 0% 93%;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  article a:link { background-position-y: 87%, 87%, 87%; }
}

/* Text highlighting */

::-moz-selection {
  background: #970877;
  color: #fffff8;
}

::selection {
  background: #970877;
  color: #fffff8;
}

article a:link::-moz-selection {
  text-shadow: none;
  background: #fffff8;
}

article a:link::selection {
  text-shadow: none;
  background: #fffff8;
}

article h1 a:link, article h2 a:link, figure a:link {
  background: none;
}

/* Figures */

figure {
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  max-width: 100%;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;

  margin: 1rem 0 1em 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: columns;
          flex-direction: columns;
}

/*figcaption {
  float: right;
  clear: right;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  vertical-align: baseline;
  position: relative;
  max-width: 40%;
}*/

figure .marginnote {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  width: 40%;
  padding-left: 2rem;
}

figure > a, figure > img {
  width: 55%;
}

figure.wide {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column
}

figure.wide > a, figure.wide > img {
    width: 100%;
}

@media (max-width: 1280px) {
  figure > a, figure > img {
    width: 75%;
  }

  figure .marginnote {
    width: 25%;
    padding-left: 1rem;
  }
}

@media (max-width: 760px) {
  figure, figure.wide { max-width: 100%; }

  figure > a, figure > img {
    width: inherit;
    max-width: 100%;
  }

  figcaption, figure.wide figcaption { margin-right: 0%;
                                            max-width: none; }
}

.gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
  /*position: absolute;*/
}

.gallery p {
    width: 100%;
}

@media (max-width: 1280px) {

		.gallery img {
      height: auto;
      max-width: 100%;
		}

		.gallery figure > * {
      width: 100%;
		}
  .gallery {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column
  }
  .gallery section.cartel {
      width: inherit;
		}
}

// Header title

// \------------

header h1 {}

header h1 {
  display: inline;
  margin-top: 0.5rem;
  font-size: 2rem;

	& a, a:visited {
		color: inherit;
		text-decoration: none;
    background: none;
	}
}

header h1 span {
		color: #970877;
		transition: opacity 0.2s linear;
}

header nav {
	display: inline-block
}

header nav ul li {
		display: inline-block;
		text-transform: uppercase;
		font-family: "Open Sans", Georgia, serif;
}

header a {
  text-decoration: none
}

header a:hover {
    color: #970877;
}

@media (max-width: 760px) {
  header nav, header nav ul {
    display: inline;
  }
}