@font-face {
  font-family: My Neon Light;
  src: url(NeonLight-Regular.otf) format('opentype');
}

h1, h2 {
text-align: left; padding:0}

#sponsors h2 {text-align:center; color: hsl(199, 100%, 21%)}

.sponsors > :last-child img {margin: 0.7em 0.7em 0.35em; vertical-align: middle}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-Black.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-Black.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-Black.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-Black.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-BlackItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-BlackItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-BlackItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 900;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-Bold.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-Bold.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-BoldItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-BoldItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-BoldItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 700;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-Hairline.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-Hairline.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-Hairline.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-Hairline.ttf') format('truetype');
  font-style: normal;
  font-weight: 200;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-HairlineItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-HairlineItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-HairlineItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-HairlineItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-HairlineItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 200;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-Heavy.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-Heavy.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-Heavy.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-Heavy.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-HeavyItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-HeavyItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-HeavyItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-HeavyItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-HeavyItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 800;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-Italic.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-Italic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-Italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-Light.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-Light.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-Light.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-Light.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-LightItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-LightItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-LightItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-LightItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 300;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-Medium.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-Medium.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-Medium.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-MediumItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-MediumItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-MediumItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-MediumItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 500;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-Semibold.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-Semibold.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-Semibold.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-Semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-SemiboldItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-SemiboldItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 600;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-Thin.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-Thin.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-Thin.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-Thin.ttf') format('truetype');
  font-style: normal;
  font-weight: 200;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: My LatoLatin;
  src: url('fonts/LatoLatin-ThinItalic.eot'); /* IE9 Compat Modes */
  src: url('fonts/LatoLatin-ThinItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/LatoLatin-ThinItalic.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/LatoLatin-ThinItalic.woff') format('woff'), /* Modern Browsers */
       url('fonts/LatoLatin-ThinItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 200;
  text-rendering: optimizeLegibility;
}

/* Prefer Lato to Gill Sans, because Lato has a "ō" (latin small
   letter o with macron) */
body {font: 300 1.3em/1.3 My LatoLatin, Lato, Gill Sans MT, Gill Sans,
    My Gill Sans, Open Sans, Liberation Sans, Helvetica Neue, Arial, Helvetica,
    sans-serif; font-size-adjust: 0.506}

/* Different background and font for header and "Need help" line. */
header {background: top right / auto 100% border-box
    url(images/skyline-long.jpg) no-repeat #16406d;
  background-size: auto calc(100% - 2rem); border: none}

/* Different font for banner. Use the banner font also for section
   titles, but smaller than in tpac.css. The date/place and navigation
   menu are in Lato, a more neutral font than Gill Sans and with a
   better "1". */
header h1, h1, h2, .marie-dom {
  font-family: My Neon Light, cursive; /*font-size-adjust: 0.488*/}
header h1 {font-size: 2.5em; color: white;
  /* background: hsla(296, 46%, 23%,0.2); */
  text-shadow: 0 0 2px hsl(296, 46%, 15%);
  color: hsl(199, 100%, 86%);
  padding: 0.25em 0.25em 0.5em; hyphens: manual; font-weight: normal}
h1, h2 {font-size: 2em; color: hsl(199, 100%, 86%)}
section:nth-child(2n+2) h1, section:nth-child(2n+2) h2 {
  color: hsl(199, 100%, 21%)}
h1 span, h1 span + span {font: 800 40%/1.25 My LatoLatin, Lato, sans-serif;
  font-size-adjust: 0.506; text-transform: uppercase; margin: 0}
h1 span:first-child {margin-top: 0.5em}
h1 small {display: block; font-size: 70%; margin-top: 0.5em}
header nav {color: white; background: #16406d; margin: 0; position: relative;
  font-weight: 800; font-family: My LatoLatin, Lato, sans-serif;
  font-size-adjust: 0.506;
  font-size: 90%; line-height: 1.7}

/* The link to self in the navigation menu is not marked with "▶...◀",
   but is instead drawn in color. */
header [href=""] {color: hsl(296, 60%, 80%)}
[href=""]::before {content: "["}
[href=""]::after {content: "]"}

/* The link to the W3C home page is a vertical banner that reads "W3C
   developers". On small windows, if the browser supports it, the alt
   text is shown instead. On bigger windows the banner is sized to be
   as high as the H1 (see @media below). */
header a[href="/"] {top: 100%; left: 0; width: auto; height: auto;
  border-radius: 0; background: none; margin: 0; position: absolute}
header a[href="/"] img {position: static; width: auto; height: 8rem;
  color: inherit}

/* Twitter logo */
header nav img {height: 0.85em; vertical-align: baseline}

/* The "W3C developers" banner and the Twitter logo cannot show an
   underline on hover, so show an outline instead. */
header a:focus img, header a:hover img {outline: thin solid yellow}

/* If the window isn't very small, adjust the rules above: The H1 in
   the banner is shown to the left of the image in the background. The
   navigation menu is in small-caps. The link to the W3C home page is
   displayed as an image (rather than the alt text). And the the is
   more space between the menu items than in tpac.css. */
@media (min-width: 29em) {
  header h1 {width: 5.5em; margin-left: 8rem}
  header nav {font-size: 1em;
    text-transform: lowercase; font-variant: small-caps}
  [href=""]::before, [href=""]::after {content: none}
  header a[href="/"] {left: 4rem}
  header a[href="/"] img {height: 17.875rem}
  header nav a {margin: 0 1em}
}

/* If the window is wide, make the header taller, so the background
   image fills more space. The "W3C developers" banner is sized to
   match the height of the H1. */
@media (min-width: 76em) {
  header h1 {font-size: 4em; font-size: 4vw; margin-left: calc(4rem + 5.4vw)}
  header a[href="/"] img {height: 28.6rem; height: 24.2vw}
}

/* Rounded corners for generic images */
section > .gener img {border-radius: 15%;}

/* Remove color from most images. */
.left img, .right img, section > figure.small img:not(:hover) {
  /*mix-blend-mode: luminosity; filter: /*invert(1) brightness(0.9) invert(1);*/
  filter: grayscale(100%)}

/* ... except when the container also has a class of notgray */
.left.notgray img, .right.notgray img, section > figure.notgray img:not(:hover) {
  filter: none}

section, section:not(.wide), footer {border-bottom-width: 3rem;
  border-top-width: 3rem}
.skip {top: -3rem}
body:not(.main) header .skip {top: 0}

.skip {color: #16406d}

/* Override the color of the alternating horizontal bands: the even
   sections are white on W3C blue. */
section:nth-of-type(2n+2) {color: white; background: hsl(211, 66%, 26%)}

/* Use the colors of the banner instead of green in the focus outline. */
:focus {
  box-shadow: 0 0 0 5px hsl(0,0%,98%), 0 0 0 8px hsl(296,46%,30%)}
section:nth-of-type(2n+2) :focus, header :focus {
  box-shadow: 0 0 0 5px hsl(211, 66%, 26%), 0 0 0 8px hsl(296,56%,93%)}

/* The "Register!" button is an element with class button and an A
   element inside. */
.button {text-align: center}
.button a {display: inline-block; padding: 0.5em 1em 0.5em 1em;
  font-weight: 800; text-transform: lowercase; font-variant: small-caps;
  color: white; background: #16406d; text-decoration: none;
  border: medium outset #5d2529; border-radius: 0.2em;
  box-shadow: 0.1em 0.1em 0.2em white inset, -0.1em -0.1em 0.2em black inset}
.button a:active {box-shadow: -0.1em -0.1em 0.2em white inset,
    0.1em 0.1em 0.2em black inset}
@supports (box-shadow: 0.1em 0.1em 0.2em white inset) {
  .button a {border: none}
}

/*
@media (min-width: 29em) {
  /* The background image has ratio 340:150, the height of the button is
     one line (1.3em) + padding (2 * 0.5em), so the image is 340 *
     (1.3 + 0.5 + 0.5) / 150 = 5.21 em wide. To stop the animation,
     use "visu_prune_eyes" without "_anim" */
  .button a {padding: 0.5em 1em 0.5em 6.21em; font-size: 1.5em;
    background: left / auto 100% url(images/skyline-button.png) no-repeat
    #16406d}
}
*/


code {
    hyphens: none;
}