@font-face {
  font-family: 'WF-AvantGarde';
  font-weight: normal;
  font-style: normal;
  src: url("Fonts/TeX_Gyre_Adventor-Regular.eot");
  src: url("Fonts/TeX_Gyre_Adventor-Regular.eot?iefix") format("eot"), url("Fonts/TeX_Gyre_Adventor-Regular.woff") format("woff"), url("Fonts/TeX_Gyre_Adventor-Regular.ttf") format("truetype"), url("Fonts/TeX_Gyre_Adventor-Regular.svg#webfont") format("svg"); }

@font-face {
  font-family: 'WF-AvantGarde';
  font-weight: bold;
  font-style: normal;
  src: url("Fonts/TeX_Gyre_Adventor-Bold.eot");
  src: url("Fonts/TeX_Gyre_Adventor-Bold.eot?iefix") format("eot"), url("Fonts/TeX_Gyre_Adventor-Bold.woff") format("woff"), url("Fonts/TeX_Gyre_Adventor-Bold.ttf") format("truetype"), url("Fonts/TeX_Gyre_Adventor-Bold.svg#webfont") format("svg"); }

@font-face {
  font-family: 'WF-AvantGarde';
  font-weight: normal;
  font-style: italic;
  src: url("Fonts/TeX_Gyre_Adventor-Italic.eot");
  src: url("Fonts/TeX_Gyre_Adventor-Italic.eot?iefix") format("eot"), url("Fonts/TeX_Gyre_Adventor-Italic.woff") format("woff"), url("Fonts/TeX_Gyre_Adventor-Italic.ttf") format("truetype"), url("Fonts/TeX_Gyre_Adventor-Italic.svg#webfont") format("svg"); }

@font-face {
  font-family: 'WF-AvantGarde';
  font-weight: bold;
  font-style: italic;
  src: url("Fonts/TeX_Gyre_Adventor-BoldItalic.eot");
  src: url("Fonts/TeX_Gyre_Adventor-BoldItalic.eot?iefix") format("eot"), url("Fonts/TeX_Gyre_Adventor-BoldItalic.woff") format("woff"), url("Fonts/TeX_Gyre_Adventor-BoldItalic.ttf") format("truetype"), url("Fonts/TeX_Gyre_Adventor-BoldItalic.svg#webfont") format("svg"); }

html {
  font-family: WF-AvantGarde, Arial, Helvetica, sans-serif;
  color: #eee;
  background-color: #000;
  background-image: url(Images/background-02.jpg);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  html body {
    max-width: 1000px;
    margin: 0 auto; }
    @media screen and (max-width: 949px) {
      html body {
        padding: 0 1ex; } }
    @media screen and (min-width: 950px) {
      html body {
        padding: 0 2em; } }
    html body > header {
      text-transform: uppercase;
      line-height: 1.25em;
      margin-top: 1em; }
      @media screen and (max-width: 949px) {
        html body > header {
          font-size: 250%; } }
      @media screen and (min-width: 950px) {
        html body > header {
          font-size: 300%; } }
      html body > header aside {
        width: 5em;
        height: 5em;
        float: left; }
    html body > footer {
      border-top: 3px solid #eee;
      font-size: 70%;
      padding: 1ex;
      text-align: right;
      letter-spacing: .5ex;
      text-transform: uppercase;
      position: sticky;
      bottom: 0;
      background: #000; }
      @media screen and (max-width: 949px) {
        html body > footer {
          margin: 0 -1ex; } }
      html body > footer aside {
        width: 3em;
        height: 3em;
        float: left; }

a {
  text-decoration: none; }
  a:link, a:visited {
    color: #fd0; }
  a:hover {
    color: #ffeb66;
    text-decoration: underline; }

nav {
  font-size: 125%;
  margin-top: 1ex;
  display: block;
  clear: both;
  background-color: rgba(255, 221, 0, 0.75);
  padding: 1ex;
  position: sticky;
  top: 0;
  border-bottom: 3px solid #eee;
  font-weight: bold; }
  @media screen and (max-width: 949px) {
    nav {
      margin: 0 -1ex; } }
  nav a {
    text-decoration: none; }
    nav a:link, nav a:visited {
      color: #000; }
    nav a:hover {
      color: #eee;
      text-decoration: underline; }
  nav ul {
    list-style-type: none;
    display: inline;
    margin: 0;
    padding: 0; }
    nav ul li {
      display: inline;
      margin: 0 2ex 0 0;
      padding: 0; }
      nav ul li:before {
        content: '#\202f'; }

article {
  text-align: justify; }
  article header {
    padding-top: 1.5em; }
  article footer {
    font-size: 125%;
    text-align: right; }
    @media screen and (min-width: 950px) {
      article footer {
        display: none; } }

h1 {
  text-transform: uppercase;
  text-align: left; }
  @media screen and (max-width: 949px) {
    h1 {
      font-size: 180%; } }
  @media screen and (min-width: 950px) {
    h1 {
      font-size: 225%; } }
  h1:before {
    content: '#\2009';
    color: #fd0; }

h2 {
  text-transform: uppercase;
  font-size: 140%;
  font-weight: normal;
  color: rgba(238, 238, 238, 0.6);
  text-align: left; }
  h2:before {
    content: '#\202f';
    color: rgba(255, 221, 0, 0.6); }

ul.contactlist {
  font-size: 125%;
  margin: 0;
  padding: 1ex;
  list-style-type: none;
  background-color: rgba(255, 221, 0, 0.25);
  border: 1px solid rgba(255, 221, 0, 0.5);
  border-radius: 1ex; }
  @media screen and (min-width: 950px) {
    ul.contactlist {
      column-count: 2; } }

.fr {
  float: right;
  margin-left: 1ex; }