/* Hey nerd, thanks for looking at the CSS! You are our kind of people. */

/* Fonts */

@font-face {
  font-family: 'Grep_XYZ';
  src: url('/interface_fonts/standard/Grep-Regular_XYZ.eot');
  src: url('/interface_fonts/standard/Grep-Regular_XYZ.eot?#iefix') format('embedded-opentype'),
       url('/interface_fonts/standard/Grep-Regular_XYZ.woff2') format('woff2'),
       url('/interface_fonts/standard/Grep-Regular_XYZ.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'Grep_XYZ';
  src: url('/interface_fonts/standard/Grep-Semibold_XYZ.eot');
  src: url('/interface_fonts/standard/Grep-Semibold_XYZ.eot?#iefix') format('embedded-opentype'),
       url('/interface_fonts/standard/Grep-Semibold_XYZ.woff2') format('woff2'),
       url('/interface_fonts/standard/Grep-Semibold_XYZ.woff') format('woff');
  font-weight: 600;
}
@font-face {
  font-family: 'Aglet_Sans';
  src: url('/interface_fonts/standard/Aglet_Sans_Bold.eot');
  src: url('/interface_fonts/standard/Aglet_Sans_Bold.eot?#iefix') format('embedded-opentype'),
       url('/interface_fonts/standard/Aglet_Sans_Bold.woff2') format('woff2'),
       url('/interface_fonts/standard/Aglet_Sans_Bold.woff') format('woff');
  font-weight: 700;
}
@font-face {
  font-family: 'Aglet Slab';
  src: url('/interface_fonts/standard/Aglet_Slab_Light.eot');
  src: url('/interface_fonts/standard/Aglet_Slab_Light.eot?#iefix') format('embedded-opentype'),
       url('/interface_fonts/standard/Aglet_Slab_Light.woff2') format('woff2'),
       url('/interface_fonts/standard/Aglet_Slab_Light.woff') format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('glyphicons/glyphicons-halflings-regular.eot');
  src: url('glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('glyphicons/glyphicons-halflings-regular.woff') format('woff');
}
/* Basic styling */

html {
  font-size:0.8em;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  margin:0;
  padding:0;
  font-family: 'Grep_XYZ', sans-serif;
  font-feature-settings: "kern" 1;
  font-weight: 400;
}
h1,h2 {
  font-size: 1.7rem;
  margin: 0.4em 0;
  font-family: 'Aglet_Sans', sans-serif;
  color:#AA8872;
}
a {
  background-color: transparent;
  text-decoration: none;
  border-bottom:1px solid #a6a6a6;
  padding-bottom:0.05rem;
  color: #000;
}
a:hover {
  border-bottom-color:#000;
}
a.logo {
  border-style:none;
}
b, strong {
  font-weight: bolder;
}
img {
  border-style: none;
  display:block;
}
p {
  margin:0;
  padding:0 3rem 0.75rem 0;
}
ul {
  padding:0 0 0 1rem;
  margin:0;
}
ol {
  list-style-type:none;
  padding-left:0;
}
li {
  padding-bottom:0.2rem;
}

/* Element styling */

 header {
  margin:0 0 1rem 3rem;
}
header img {
  display:inline-block;
  white-space:normal;
  width:7.5rem;
}
header h1 {
  display:inline-block;
  white-space:normal;
  font-size: 2.3rem;
  padding-left:.25rem;
  font-family:"Aglet Slab", serif;
  font-weight:300;
  color:#AA8872;
}
header .branding {
  white-space: nowrap;
}
article {
  margin:0;
  padding:0;
}
article.intro {
  margin: 0 0 1rem 3rem;
}
article.intro aside {
  line-height: 1.4;
}
article.intro p {
  padding-bottom:1.5rem;
}
article.intro aside p {
  padding-bottom:0;
}
article.font {
  color: #fff;
  margin-bottom: 0;
  padding: 1rem 0 1rem 1rem;
}
article.font a {
  color: #fff;
  border-bottom:1px solid #fff;
}
article.font a:hover {
  border-bottom:none;
}
.font aside ul {
  padding:1rem 2rem 0 2rem;
}
article h1 {
  margin-top:0;
}
article.intro h4 {
  margin:0;
  padding:0;
}
article.services {
  margin-top: 1.5rem;
}
article.escalator {
  background-color: #2B5EA6;
}
article.elevator {
  background-color: #392b6f;
}
article.grep {
  background-color: #AA8872;
}
article.egyptienne {
  background-color: #504C60;
}
article.egyptienne_sans {
  background-color: #5C604C;
}
article.alabaster {
  background-color: #7a7586;
}
article.benefactor {
  background-color: #99939f;
}
article.cedar {
  background-color: #beb0a6;
}
article.geometric {
  background-color: #605a4c;
}
article.reputation {
  background-color: #5b4d61;
}
article.aglet_mono {
  background-color: #6e7f7d;
}
.intro aside li {
  padding-top: 0.1rem;
}
.font img   {
  object-fit:cover;
  width:100%;
  max-height:100%;
}
/* File Icon */
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-file:before {
  content: "\e022";
}
.glyphicon-link:before {
  content: "\e164";
}
/* Grid and responsive */

.header            { grid-area:header; }
.upcoming          { grid-area:upcoming; }
.fonts             { grid-area:fonts; }
.services          { grid-area:services; }
.header .branding  { grid-area: XYZ; }
.header > p        { grid-area: about; }
.services .listing { grid-area: listing-primary; }
.services aside    { grid-area: listing-secondary; }
.services > h1     { grid-area: heading; }
.font aside        { grid-area: type-description; }
.font img          { grid-area: type-image; }

@media only screen and (min-width: 460px) {
  html {
    font-size:0.9em;
    line-height: 1.4;
  }
  p {
    padding:0 4rem 0.75rem 0;
  }
  header {
    margin:0 0 1rem 3rem;
  }
  article.font {
    margin-bottom: 0.25rem;
    padding: 2rem 0 1.25rem 0;
  }
  .font aside ul {
    padding:0 12rem 0 3rem;
  }
  .wrapper {
    display: grid;
    margin:2rem 0 0 0;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "upcoming"
      "fonts"
      "services";
  }
  .header {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "XYZ"
      "about";
  }
  .services {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "heading"
      "listing-primary"
      "listing-secondary";
  }
  .font {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "type-image"
      "type-description";
  }
  .font img {
    padding:0 0 1rem 2rem;
  }
}

@media only screen and (min-width: 700px) {
  html {
    font-size:1em;
    line-height: 1.5;
  }
  p {
    padding:0 15rem 0.75rem 1rem;
  }
  ol {
    padding-left:1rem;
  }
  header {
    margin:0 0 2rem 3rem;
  }
  article.services {
    margin-top: 2rem;
  }
  article.font {
    margin-bottom: 0.5rem;
    padding: 2rem 0;
  }
  aside {
    font-size:.9rem;
  }
  .font aside ul {
    padding:0 20rem 0 3rem;
  }
  .services aside {
    margin:3rem 12rem 0 0;
  }
  .wrapper {
    display: grid;
    margin:2rem 0 0 0;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "upcoming"
      "fonts"
      "services";
  }
  .header {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "XYZ"
      "about";
  }
  .services {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "heading"
      "listing-primary"
      "listing-secondary";
  }
  .font {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "type-image"
      "type-description";
  }
  .font img {
    padding:0 0 1rem 2rem;
  }
}

@media only screen and (min-width: 980px) {
  html {
    font-size:1.1em;
    line-height: 1.5;
  }
  p {
    padding:0 2rem 0.75rem 1rem;
  }
  header {
    margin:0 0 3rem 3rem;
  }
  article.services {
    margin-top: 3rem;
  }
  article.font {
    margin-bottom: 0.5rem;
    padding: 2rem 0;
  }
  aside {
    font-size:.8rem;
  }
  .font aside ul {
    padding:0 0 0.75rem 1rem;
  }
  .services aside {
    margin:0;
  }
  .wrapper {
    display: grid;
    margin:2rem 0 0 0;
    grid-template-columns: 5fr 1rem 3fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header header header"
      "upcoming upcoming ."
      "fonts fonts fonts"
      "services services services";
  }
  .header {
    display: grid;
    grid-template-columns: 5fr 1rem 3fr;
    grid-template-rows: auto;
    grid-template-areas:
      "XYZ XYZ XYZ"
      "about about .";
  }
  .services {
    display: grid;
    padding-right:1rem;
    grid-template-columns: 5fr .5rem 3fr;
    grid-template-rows: auto;
    grid-template-areas:
      "heading . ."
      "listing-primary . listing-secondary";
  }
  .font {
    display: grid;
    grid-template-columns: 3rem 2fr 2rem 9fr;
    grid-template-rows: auto;
    grid-template-areas: ". type-description . type-image";
  }
}

@media only screen and (min-width: 1200px) {
    .wrapper {
    display: grid;
    margin:2rem 0 0 0;
    grid-template-columns: 4fr 1rem 4fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header header header"
      "upcoming upcoming ."
      "fonts fonts fonts"
      "services services services";
  }
  .header {
    display: grid;
    grid-template-columns: 4fr 1rem 4fr;
    grid-template-rows: auto;
    grid-template-areas:
      "XYZ XYZ XYZ"
      "about about .";
  }
  .services {
    display: grid;
    padding-right:1rem;
    grid-template-columns: 4fr .5rem 3fr .5rem 3fr;
    grid-template-rows: auto;
    grid-template-areas:
      "heading . . . ."
      "listing-primary . listing-secondary . .";
  }
  .font {
    display: grid;
    grid-template-columns: 3rem 2fr 2rem 10fr;
    grid-template-rows: auto;
    grid-template-areas: ". type-description . type-image";
  }
}

@media only screen and (min-width: 1500px) {
    .wrapper {
    display: grid;
    margin:2rem 0 0 0;
    grid-template-columns: 3fr 1rem 5fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header header header"
      "upcoming upcoming ."
      "fonts fonts fonts"
      "services services services";
  }
  .header {
    display: grid;
    grid-template-columns: 3fr 1rem 5fr;
    grid-template-rows: auto;
    grid-template-areas:
      "XYZ XYZ XYZ"
      "about about .";
  }
}