/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }
  
  /* HTML5 display-role reset for older browsers */
  button {
    -webkit-appearance: none;
    border: none;
    background-color: transparent;
    font-size: inherit;
    padding: 0;
    text-align: left;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit; }
  
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block; }
  
  body {
    line-height: 1;
    background-color: #f9fdf4; }
  
  ol, ul {
    list-style: none; }
  
  blockquote, q {
    quotes: none; }
  
  blockquote:before, blockquote:after {
    content: '';
    content: none; }
  
  q:before, q:after {
    content: '';
    content: none; }
  
  table {
    border-collapse: collapse;
    border-spacing: 0; }
  
  .fa {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-weight: 900; }
  
  button {
    cursor: pointer;
    outline: none; }
  
  body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
    body,
    body input {
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 400;
      line-height: 1.25;
      color: #2f322c;
      font-size: calc(14px + .3vw); }
      @media print {
        body,
        body input {
          font-size: calc(12px + .3vw); } }
    body textarea,
    body input {
      outline: none;
      -moz-appearance: none;
      -webkit-appearance: none; }
      body textarea::-webkit-input-placeholder,
      body input::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #3E3E3E;
        font-weight: 400;
        opacity: .55; }
      body textarea::-moz-placeholder,
      body input::-moz-placeholder {
        /* Firefox 19+ */
        opacity: .55;
        color: #3E3E3E;
        font-weight: 400; }
      body textarea:-ms-input-placeholder,
      body input:-ms-input-placeholder {
        /* IE 10+ */
        color: #3E3E3E;
        font-weight: 400;
        opacity: .55; }
      body textarea:-moz-placeholder,
      body input:-moz-placeholder {
        /* Firefox 18- */
        color: #3E3E3E;
        font-weight: 400;
        opacity: .55; }
    @media (min-width: 1180px) {
      body {
        font-size: 17px; } }
    body h1, body h2, body h3, body h4, body h5 {
      margin-top: 1.5em;
      margin-bottom: .5em;
      line-height: 1.25;
      font-family: 'PT Serif', serif; }
    body .color-grey-light {
      color: #A6A8AB; }
    body p {
      line-height: 1.5;
      margin-top: .5em;
      margin-bottom: .5em; }
      body p a {
        text-decoration: none;
        color: inherit;
        color: #5A849A; }
        body p a:hover {
          opacity: .75; }
      body p i {
        font-style: italic; }
      body p b {
        font-weight: 600; }
      body p.large {
        font-size: 1.2em; }
    body .year {
      color: #A6A8AB;
      font-size: .8em;
      font-weight: 700; }
    body b {
      font-weight: 600; }
    body h1 {
      margin-top: .5em;
      margin-bottom: 1em;
      font-size: 2.7em; }
      @media (max-width: 850px) {
        body h1 br {
          display: none; } }
    body h2 {
      margin-top: 3em;
      margin-bottom: 1em;
      font-size: 1.5em;
      border-bottom: 1px solid rgba(62, 62, 62, 0.2);
      padding-bottom: .5em; }
    body h3 {
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 600;
      line-height: 1.25;
      font-size: 1.15em;
      font-weight: 600; }
    body h4 {
      margin-top: 0.25em;
      margin-bottom: .25em;
      font-size: 1em;
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 600;
      line-height: 1.25; }
    body ul {
      margin: .75em 0;
      font-size: .85em; }
      body ul li {
        margin: .45em 0; }

    div > p:first-of-type:first-letter {
        float: left;        
        font-size: 1.5em;
        line-height: .7em;        
        display: block;     
        font-family: 'PT Serif', serif;   
    }        

  .sidemap {
    border:0; 
    width: 100%; 
    height: 500px;
  }

  .ui--rounded {
    border-radius: 0.4rem; }
  
  .page-container {
    display: block;
    text-align: left;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    margin-top: 4rem;
    overflow: auto; }
    @media (min-width: 850px) {
      .page-container {
        margin-top: 5rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 4rem;
        text-align: left; } }
    .page-container__inner {
      margin: auto;
      max-width: 70rem; }
      @media (min-width: 850px) {
        .page-container__inner {
          text-align: left; } }
    .page-container__content {
      position: relative; }
      @media print {
        .page-container__content {
          padding-right: 12.5rem; } }
      @media (min-width: 850px) {
        .page-container__content {
          padding-right: 25rem; } }
    .page-container__desktop-back {
      margin-top: 3rem;
      margin-left: -.2rem; }
      @media (max-width: 850px) {
        .page-container__desktop-back {
          display: none !important; } }
    .page-container--left {
      text-align: left; }
  
  .side-panel {
    position: relative; }
    @media (min-width: 850px) {
      .side-panel {
        position: absolute;
        top: 0;
        right: 0; } }
    @media print {
      .side-panel {
        position: absolute;
        top: 0;
        right: 0; }
        .side-panel__jump {
          display: none; } }
    .side-panel p {
      font-size: .85em;
      line-height: 1.75; }
    .side-panel__jump {
      margin-top: 2em; }
      @media (max-width: 850px) {
        .side-panel__jump p {
          display: flex;
          flex-direction: row;
          justify-content: flex-start; }
          .side-panel__jump p a {
            margin-right: 1em; } }
      @media print {
        .side-panel__jump p {
          display: block; } }
    @media (max-width: 850px) {
      .side-panel {
        margin-top: 2rem; }
        .side-panel__contact {
          display: flex;
          flex-direction: row; }
        .side-panel__body {
          width: 80%;
          padding-left: 1.5rem; } }
    @media print {
      .side-panel__contact {
        display: block; }
      .side-panel__body {
        padding-left: 0; } }
    .side-panel__image {
      -webkit-print-color-adjust: exact;
      display: none;
      background-size: cover;
      background-position: center;
      width: 7rem;
      height: 7rem;
      border-radius: 3.5rem; }
      @media (min-width: 850px) {
        .side-panel__image {
          position: absolute;
          left: -8.5rem;
          top: 0; 
          display: none;} }
      @media print {
        .side-panel__image {
          margin-bottom: 2rem;
          margin-top: -2rem; } }
  
  .skills-grid {
    margin-top: 1em;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%; }
    @media (max-width: 850px) {
      .skills-grid {
        grid-template-columns: 50% 50%; } }
    @media print {
      .skills-grid {
        grid-template-columns: 25% 25% 25% 25%; } }
    .skills-grid__column {
      margin-top: .5em; }
  
  @media (min-width: 850px) {
    .hide-desktop {
      display: none; } }
  
  @media print {
    .hide-desktop {
      display: none; } }
  
      img {
        border: solid 2px;
        border-bottom-color: #ffe;
        border-left-color: #eed;
        border-right-color: #eed;
        border-top-color: #ccb;
        max-height: 100%;
        max-width: 100%;
      }
      
      .frame {
        background-color: #d4e1c6;
        border: solid 5vmin #eee;
        border-bottom-color: #fff;
        border-left-color: #eee;
        border-radius: 2px;
        border-right-color: #eee;
        border-top-color: #ddd;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25) inset, 0 5px 10px 5px rgba(0, 0, 0, 0.25);
        box-sizing: border-box;
        display: inline-block;
        padding: 4.5vmin;
        position: relative;
        text-align: center;
      }
      .frame:before {
        border-radius: 2px;
        bottom: -2vmin;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25) inset;
        content: "";
        left: -2vmin;
        position: absolute;
        right: -2vmin;
        top: -2vmin;
      }
      .frame:after {
        border-radius: 2px;
        bottom: -2.5vmin;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
        content: "";
        left: -2.5vmin;
        position: absolute;
        right: -2.5vmin;
        top: -2.5vmin;
      }