/* ===================================================================
resume.crgdbs.com styles

Author: Craig DuBois

Media Query Levels:
@media (min-width: 18.75em) [smallest] = 300px
@media (min-width: 40.625em) [medium] = 642px
@media (max-height: ) [Custom]

Base font size: x-large ≅ 24px; .f-class-names {Diatonic Scale of Type}
 3 px =  .125 rem;
 6 px =  .250 rem;
 9 px =  .375 rem;
12 px =  .500 rem;
15 px =  .625 rem; .f-pica {}
18 px =  .750 rem; .f-english {}
21 px =  .875 rem; .f-columbian {}
24 px = 1.000 rem; .f-great-primer {}
27 px = 1.125 rem; .f-double-small-pica {}
30 px = 1.250 rem;
33 px = 1.375 rem; .f-double-pica {}
36 px = 1.500 rem;
39 px = 1.625 rem;
42 px = 1.750 rem;
45 px = 1.875 rem;
48 px = 2.000 rem; .f-double-great-primer {}
63 px = 2.625 rem; .f-canon {}
81 px = 3.375 rem; .f-five-line-pica {}
96 px = 4.000 rem; .f-inch {}
[...]

Font weights equivalents:
100 = Thin (Hairline)
200 = Extra Light (Ultra Light)
300 = Light
400 = Normal
500 = Medium
600 = Semi Bold (Demi Bold)
700 = Bold
800 = Extra Bold (Ultra Bold)
900 = Black (Heavy)

Font families:
- Serif: Georgia, "Bitstream Charter", Times, "Times New Roman", serif;
  + (cut) Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
- Sans-Serif: Verdana, "Bitstream Vera Sans", Tahoma, sans-serif;
  + (cut) Futura, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  + (cut) "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

Color Library (hue degree: 223):
- Blue (default): hsla(223,100%,50%,1); #0048ff;
  + Blue (desaturated): hsla(223,37%,37%,1); #3b4f81;
    - #fff;
    - #edeff4; * (text: footer > "craig@crgdbs.com")
    - #dbdfe8;
    - #cacfdd; * (text: footer > "crgdbs.com")
    - #b8bfd1;
    - #a6afc6; * (text: footer > "Back to Top")
    - #949fba;
    - #828faf;
    - #707fa3;
    - #5f6f98;
    - #4d5f8c;
    - #3b4f81; (middle)
    - #364875;
    - #30416a;
    - #2b395e;
    - #263252;
    - #202b46;
    - #1b243b;
    - #151d2f; * (background gradient bottom: footer)
    - #101623;
    - #0b0e17;
    - #05070c; * (background gradient top: footer)
    - #000; * (background: footer > "Back to Top")
  + Blue (darker1): hsla(223,100%,37%,1); #0035bd;
  + Blue (darker1, semitransparent): hsla(223,100%,37%,.2); #0035bd;
  + Blue (darker2): hsla(223,37%,19%,1); #1e2841;
  + Blue (lighter1): hsla(223,100%,61%,1); #3870ff;
  + Blue (lighter1, semitransparent): hsla(223,100%,61%,.2); #3870ff;
  + Blue (lighter2): hsla(223,100%,79%,1); #94b2ff;
  + Blue (lighter2): hsla(223,100%,79%,.2); #94b2ff;
- Gray (default): hsla(223,0%,50%,1); #808080;
  + Gray (darker): hsla(223,0%,37%,1); #5e5e5e;
  + Gray (lighter): hsla(223,0%,61%,1); #9c9c9c;
- White (default): hsla(223,0%,100%,1); #fff;
  + White (semitransparent): hsla(223,0%,100%,.9); #fff;
- Black (default): hsla(223,0%,0%,1); #000;
  + Black (semitransparent): hsla(223,0%,0%,.2); #000;

Images (original sizes):
-

Footnotes:
[1] Prevent iOS and IE text size adjust after device orientation change, without disabling user zoom. (℅ normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css)
[2] https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
[3] Remove the gray background color from active links in IE 10. (℅ normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css)
[4] Improve readability of focused elements when they are also in an active/hover state. (℅ normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css)
[5] http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
[6] https://www.drupal.org/node/897638
[] https://css-tricks.com/full-browser-width-bars/
[] http://nicolasgallagher.com/css-drop-shadows-without-images/
=================================================================== */
html {
  background-color: #fff;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  font-family: serif;
  /*-webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;*/
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; /* ... [1] ... */
      -ms-text-size-adjust: 100%; /* ... [1] ... */
  /*word-wrap: break-word;*/
}
/* ... [2] ... */
*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
     -moz-box-sizing: inherit;
          box-sizing: inherit;
/*  -webkit-hyphens: inherit;
     -moz-hyphens: inherit;
      -ms-hyphens: inherit;
          hyphens: inherit;*/
  /*-webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transition-duration: .11s;
          transition-duration: .11s;
  -webkit-transition-property: background-color, border-color, box-shadow, color, font-size, line-height, text-decoration;
          transition-property: background-color, border-color, box-shadow, color, font-size, line-height, text-decoration;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;*/
  /*word-wrap: inherit;*/
}

::-moz-selection {
  background-color: hsla(223,100%,61%,.2);
  background-blend-mode: multiply;
  color: #000;
}
::selection {
  background-color: hsla(223,100%,61%,.2);
  background-blend-mode: multiply;
  color: #000;
}

#footer ::-moz-selection {
  background-color: hsla(223,100%,61%,.4);
  background-blend-mode: multiply;
  color: #94b2ff;
}
#footer ::selection {
  background-color: hsla(223,100%,61%,.4);
  background-blend-mode: multiply;
  color: #94b2ff;
}

body {
  background-color: #fff;
  color: #000;
  font: normal small/1.4 serif;
  -webkit-font-feature-settings: "kern", "liga", "clig", "dlig", "calt";
     -moz-font-feature-settings: "kern", "liga", "clig", "dlig", "calt";
          font-feature-settings: "kern", "liga", "clig", "dlig", "calt";
  -webkit-font-kerning: normal;
     -moz-font-kerning: normal;
          font-kerning: normal;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  margin: 0 auto;
  min-height: 100%;
  overflow-x: hidden;
  padding: 0;
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Typefaces & Treatments
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@font-face {
  font-family: "ClearSans-Regular";
  src: url("../_fonts/ClearSans-Regular.eot");
  src: url("../_fonts/ClearSans-Regular.eot?#iefix") format("embedded-opentype"),
       url("../_fonts/ClearSans-Regular.woff") format("woff"),
       url("../_fonts/ClearSans-Regular.ttf") format("truetype"),
       url("../_fonts/ClearSans-Regular.svg#ClearSans-Regular") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "ClearSans-Bold";
  src: url("../_fonts/ClearSans-Bold.eot");
  src: url("../_fonts/ClearSans-Bold.eot?#iefix") format("embedded-opentype"),
       url("../_fonts/ClearSans-Bold.woff") format("woff"),
       url("../_fonts/ClearSans-Bold.ttf") format("truetype"),
       url("../_fonts/ClearSans-Bold.svg#ClearSans-Bold") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "CooperHewitt-Book";
  src: url("../_fonts/CooperHewitt-Book.eot");
  src: url("../_fonts/CooperHewitt-Book.eot?#iefix") format("embedded-opentype"),
       url("../_fonts/CooperHewitt-Book.woff") format("woff"),
       url("../_fonts/CooperHewitt-Book.svg#CooperHewitt-Book") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "CooperHewitt-Medium";
  src: url("../_fonts/CooperHewitt-Medium.eot");
  src: url("../_fonts/CooperHewitt-Medium.eot?#iefix") format("embedded-opentype"),
       url("../_fonts/CooperHewitt-Medium.woff") format("woff"),
       url("../_fonts/CooperHewitt-Medium.svg#CooperHewitt-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "CooperHewitt-Semibold";
  src: url("../_fonts/CooperHewitt-Semibold.eot");
  src: url("../_fonts/CooperHewitt-Semibold.eot?#iefix") format("embedded-opentype"),
       url("../_fonts/CooperHewitt-Semibold.woff") format("woff"),
       url("../_fonts/CooperHewitt-Semibold.svg#CooperHewitt-Semibold") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "CooperHewitt-SemiboldItalic";
  src: url("../_fonts/CooperHewitt-SemiboldItalic.eot");
  src: url("../_fonts/CooperHewitt-SemiboldItalic.eot?#iefix") format("embedded-opentype"),
       url("../_fonts/CooperHewitt-SemiboldItalic.woff") format("woff"),
       url("../_fonts/CooperHewitt-SemiboldItalic.svg#CooperHewitt-SemiboldItalic") format("svg");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "CooperHewitt-Heavy";
  src: url("../_fonts/CooperHewitt-Heavy.eot");
  src: url("../_fonts/CooperHewitt-Heavy.eot?#iefix") format("embedded-opentype"),
       url("../_fonts/CooperHewitt-Heavy.woff") format("woff"),
       url("../_fonts/CooperHewitt-Heavy.svg#CooperHewitt-Heavy") format("svg");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "CooperHewitt-HeavyItalic";
  src: url("../_fonts/CooperHewitt-HeavyItalic.eot");
  src: url("../_fonts/CooperHewitt-HeavyItalic.eot?#iefix") format("embedded-opentype"),
       url("../_fonts/CooperHewitt-HeavyItalic.woff") format("woff"),
       url("../_fonts/CooperHewitt-HeavyItalic.svg#CooperHewitt-HeavyItalic") format("svg");
  font-weight: 900;
  font-style: italic;
}

h2,
h3,
#footer a[href] {
  font-size: small;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

h2 {
  font-family: "CooperHewitt-Heavy", Verdana, "Bitstream Vera Sans", Tahoma, sans-serif;
  font-weight: 900;
}

#contact .title,
h3 {
  font-family: "CooperHewitt-Semibold", Verdana, "Bitstream Vera Sans", Tahoma, sans-serif;
  font-weight: 600;
}

.author {
  font-family: "CooperHewitt-Medium", Verdana, "Bitstream Vera Sans", Tahoma, sans-serif;
  font-weight: 500;
}

#footer a[href],
#footer .title {
  font-family: "CooperHewitt-Book", Verdana, "Bitstream Vera Sans", Tahoma, sans-serif;
  font-weight: 400;
}

#footer .title {
  letter-spacing: .11em;
}

h4,
h5,
h6,
.h-resume,
.degree {
  font-family: "ClearSans-Regular", Verdana, "Bitstream Vera Sans", Tahoma, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.strength {
  font-family: "ClearSans-Bold", Verdana, "Bitstream Vera Sans", Tahoma, sans-serif;
  font-weight: 700;
}

.role {
  font-family: "CooperHewitt-SemiboldItalic", Georgia, "Bitstream Charter", Times, "Times New Roman", serif;
}
.role > .p-job-title {
  font-family: "CooperHewitt-SemiboldItalic", Georgia, "Bitstream Charter", Times, "Times New Roman", serif;
}

abbr[title="and"] {
  font-family: Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", Georgia, "Bitstream Charter", Times, "Times New Roman", serif;
  font-style: italic;
  font-weight: normal;
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Global
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

b,
strong {
  font-weight: bold;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

a {
  background-color: transparent; /* ... [3] ... */
}

a,
a:link,
a:visited {
  /*box-shadow: 0 -.15em 0 hsla(223,100%,37%,.2) inset;*/
  border-bottom: .17em solid hsla(223,100%,37%,.23);
  color: hsla(223,100%,37%,1);
  text-decoration: none;
}

/*a:visited {
  color: hsla(223,23%,37%,1);
  text-decoration: none;
}*/

a:hover,
a:active {
  outline: 0; /* ... [4] ... */
}
a:hover,
a:active,
a:focus {
  /*box-shadow: 0 -.15em 0 hsla(223,100%,61%,.2) inset;*/
  border-bottom: .17em solid hsla(223,100%,61%,.23);
  color: hsla(223,100%,61%,1);
  text-decoration: none;
}

abbr[title] {
  /*border-bottom: 1px dotted hsla(223,0%,0%,.19);*/
  cursor: help;
/*  -webkit-font-feature-settings: "smcp" 1;
     -moz-font-feature-settings: "smcp" 1;
          font-feature-settings: "smcp" 1;*/
  font-size: 100%;
  /*font-variant: small-caps;*/
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
}
abbr[title="and"] {
  font-size: 110%;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: abbr[title]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (hover:none) {
  abbr[title] {
    border-bottom: none;
    cursor: text;
  }
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Utilities
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.clear-right {
  clear: right;
}
.clear-left {
  clear: left;
}



/* ===================================================================
Header & Footer
=================================================================== */
#contact,
main,
#footer {
  padding-right: 1.7em;
  padding-left: 1.7em;
}

#contact {
  /*background-color: hsla(223,100%,61%,.23);*/
  display: block;
  padding-top: 1.7em;
  padding-bottom: 1.35em;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: #contact
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*@media (min-width: 18.75em) {
  #contact {}
}*/


.p-contact {
  line-height: 2;
  text-align: center;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: .p-contact
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 40.625em) {
  .p-contact {
    max-width: 50em;
    margin-right: auto;
    margin-left: auto;
  }
}



.author {
  margin: 0;
}

#contact .author {
  font-size: 187%;
}

address {
  clear: both;
  font-style: normal;
  overflow: hidden;
  padding-bottom: .35em;
  width: 100%;
}
#contact address {
  min-height: 2em;
}

dl {
  margin: 0;
}
/* ... [5] ... */
h1,
dt,
.punctuation {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* ... [6] ... */
h1:active,
dt:active,
h1:focus,
dt:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

dd {
  display: inline;
  margin: 0;
  white-space: nowrap;
}

.p-street-address {
  display: block;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: .p-contact > *
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 18.75em) {
  .p-contact {
    line-height: 1.5;
  }
  .author {
    text-align: left;
  }
  .email-address {
    clear: left;
    float: left;
    text-align: left;
    width: 50%;
  }
  #contact .title,
  #footer .title {
    text-align: left;
  }
  .website {
    float: right;
    text-align: right;
    width: 50%;
  }
  .p-adr,
  .phone-number {
    clear: both;
    text-align: left;
  }
}
/*@media (min-width: 40.625em) {*/
@media (min-width: 33.75em) {
  #contact .author,
  #contact .title {
    /*display: inline-block;*/
    display: block;
    float: none;
    width: auto;
  }
  #contact .author {
    /*padding-right: 1em;
    position: relative;
    text-align: right;*/
    text-align: center;
  }
  #contact .title {
    /*padding-left: 1em;
    text-align: left;*/
    text-align: center;
  }
  #contact .p-adr,
  #contact .p-adr dd,
  #contact .phone-number,
  #contact .phone-number dd,
  #contact .email-address,
  #contact .website {
    display: inline-block;
    float: none;
    text-align: center;
    width: auto;
  }
  #contact .p-adr,
  #contact .phone-number,
  #contact .email-address {
    padding-right: 1em;
    position: relative;
  }
  #contact .phone-number,
  #contact .email-address,
  #contact .website {
    padding-left: .6em;
  }
  /*#contact .author::after,*/
  #contact .p-adr::after,
  #contact .phone-number::after,
  #contact .email-address::after {
    content: "\2022";
    position: absolute;
    right: -.1em;
    top: 0;
  }
  #contact .author::after {
    right: -.5em;
  }

}


.p-street-address::after,
.p-locality::after {
  content: ",";
}

#tel-head,
#tel-head:hover,
#tel-head:active,
#tel-head:focus,
#tel-foot,
#tel-foot:hover,
#tel-foot:active,
#tel-foot:focus {
  box-shadow: none;
  border-bottom: none;
  color: #000;
  letter-spacing: .02em;
}

#footer {
  background-color: #000;
/*  background-color: #05070c;
  background-image: -webkit-linear-gradient(bottom, #05070c 0%, #151d2f 100%);
  background-image:    -moz-linear-gradient(bottom, #05070c 0%, #151d2f 100%);
  background-image:      -o-linear-gradient(bottom, #05070c 0%, #151d2f 100%);
  background-image:      linear-gradient(to bottom, #05070c 0%, #151d2f 100%);*/
  color: #fff;
  display: block;
  padding: 1.7em;
}

#footer .author {
  font-weight: normal;
  letter-spacing: 0.17em;
  word-spacing: .13em;
}

#footer #tel-foot,
#footer #tel-foot:hover,
#footer #tel-foot:active,
#footer #tel-foot:focus
 {
  color: #fff;
}

#footer .p-adr {
  letter-spacing: .03em;
}

#footer .title {
  text-transform: uppercase;
}

#footer .email-address,
#footer .website {
  clear: left;
  float: none;
  width: 100%;
}

#footer a[href] {
  background-clip: padding-box;
  background-color: #000;
  border: .2em solid;
  /*box-shadow: 0 .6em 0 -.4em hsla(223,2%,97%,.1);*/
  color: #fff;
  display: block;
  font-weight: normal;
  line-height: 2;
  margin-bottom: 1.7em;
  overflow: hidden;
  padding-right: .5em;
  padding-left: 2em;
  position: relative;
  text-align: right;
  text-indent: 1em;
  text-overflow: ellipsis;
  text-transform: lowercase;
  -webkit-transition: background-color .17s cubic-bezier(0,.89,0,.97);
          transition: background-color .17s cubic-bezier(0,.89,0,.97);
  white-space: nowrap;
  width: 100%;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: #footer a[href]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 40.625em) {
  #footer .author,
  #footer .title {
    margin: 0 auto;
    width: 23.07692308em;
  }
  #footer a[href] {
    margin-right: auto;
    margin-left: auto;
    max-width: 23.07692308em;
    width: 50%;
  }
}

#footer .p-tel > a[href] {
  border: none;
  box-shadow: none;
  font-family: inherit;
  line-height: inherit;
  padding: inherit;
  margin-top: 1.1em;
  text-align: inherit;
  text-indent: inherit;
}

#footer .u-email > a[href] {
  margin-top: 1.7em;
}

#footer .linkedin > a[href] {
  text-transform: none;
}

#footer > a[href] {
  background-color: transparent;
  border: none;
  border-bottom: .2em solid;
  margin-bottom: 0;
  padding: 0;
  text-indent: 0;
  text-transform: uppercase;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: #footer > a[href]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 27.5em) {
  #footer > a[href] {
    margin-right: auto;
    margin-left: auto;
    max-width: 23.07692308em;
    width: 50%;
  }
}





/*#footer .u-email > a[href] {
  background-color: #000;
  color: #edeff4;
  margin-top: 1.7em;
  margin-bottom: 1.7em;
  text-transform: lowercase;
}
#footer .u-url > a[href] {
  background-color: #1b243b;
  color: #cacfdd;
  text-transform: lowercase;
}
#footer > a[href] {
  background-color: #000;
  border-color: hsla(223,22%,71%,.3);
  color: #a6afc6;
  text-transform: uppercase;
}*/
/*#footer > a[href]:hover {
  color: hsla(223,100%,61%,1);
}*/
#footer .u-email > a[href] > .svg,
#footer .u-url > a[href] > .svg,
#footer > a[href] > .svg {
  left: 0;
  /*left: -13.5em;*/
  position: absolute;
  /*right: 0;*/
  top: .2em;
}
/*#footer > a[href] > .svg {
  left: 0;
  left: -10em;
  position: absolute;
  right: 0;
  top: .3em;
}*/
#footer .email-address a[href]:hover,
#footer .website a[href]:hover,
#footer .social a[href]:hover {
  background-color: hsla(223,37%,37%,1);
}
/*#footer a[href]:hover,
#footer a[href]:hover > .svg > svg > path {
  background-color: #000;
  color: #fff;
  fill: #fff;
}*/
#footer a[href]:active {
  /*box-shadow: none;*/
  top: .2em;
}


/* ===================================================================
Main Content & Sections
=================================================================== */
main {
  display: block;
}
.container {
  padding-top: .7em;
}

section {
  border-top: .23em solid #000;
  display: block;
  margin-top: 1.7em;
  margin-bottom: 1.7em;
  padding-top: .3em;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: section
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 40.625em) {
  section {
    max-width: 50em;
    margin-right: auto;
    margin-left: auto;
  }
}



section > h2 {
  border-bottom: .23em solid #000;
  margin-bottom: .7em;
}

section > ol {
  list-style: none;
}

section h3 {
  border-bottom: .08em solid;
  font-weight: normal;
  letter-spacing: .08em;
  margin-bottom: .7em;
  padding-top: .7em;
  padding-bottom: .1em;
}

#experience {
  margin-top: 0;
}

.employer {
  text-align: center;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: .employer
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 18.75em) {
  .employer {
    overflow: hidden;
    text-align: right;
  }
}



#experience .p-name {
  display: block;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: #experience .p-name
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 18.75em) {
  #experience .p-name {
    float: left;
    text-align: left;
    width: 50%;
  }
}



#experience .p-location {
  white-space: nowrap;
}

.p-job-title > abbr[title],
.p-region > abbr[title],
.p-location > abbr[title] {
  cursor: text;
  font-variant: normal;
  text-transform: none;
}

.role {
  font-weight: bold;
  margin-bottom: .3em;
  overflow: hidden;
  text-align: left;
}
.role > .p-job-title {
  display: block;
  font-style: italic;
}
.role > .dt-duration {
  display: block;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: .role > *
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 18.75em) {
  .role > .p-job-title {
    float: left;
    font-style: italic;
    width: 50%;
  }
  .role > .dt-duration {
    float: right;
    text-align: right;
    width: 50%;
  }
}

.summary {
  list-style: none;
  margin-bottom: 1em;
}
.summary > li {
  margin-bottom: .3em;
  position: relative;
}
.summary > li::before {
  color: #000;
  content: "•";
  /*content: "";*/
  left: -.85em;
  position: absolute;
  /*text-shadow: 1px 1px 0 hsla(223,100%,61%,.23);*/
  top: 0;
}

#skills {
  overflow: hidden;
}

.skill-type {
  clear: both;
  margin-bottom: .3em;
  padding-top: 1em;
  text-align: center;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: .skill-type
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 18.75em) {
  .skill-type {
    text-align: left;
  }
}



.skill-set {
  list-style: none;
}
.skill-set:last-of-type {
  margin-bottom: 1em;
}

.strength {
  clear: left;
}

.strength,
.p-skill {
  float: left;
  margin-right: .33em;
}

.p-skill:not(:last-of-type)::after {
  /*content: "\200A,\200A";*/
  content: ",";
}

#education {
  clear: left;
}

#education h3 {
  border-bottom: none;
}

.degree {
  padding-top: 0;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: body
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*@media (min-width: 43.75em) {
  body {
    max-width: 43.75em;
  }
  body,
  h2,
  h3,
  #footer a[href],
  abbr[title] {
    font-size: 105%;
  }
  abbr[title="and"] {
    font-size: 115%;
  }
}*/




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Media Queries: print
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    text-shadow: none !important;
  }
  body {
    background-image: none;
    color: #000;
    font-size: 9pt !important;
  }
  h1,
  #footer {
    display: none;
  }
  li,
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  section {
    border-top: 3pt solid #000;
  }
  section > h2 {
    border-bottom: 3pt solid #000;
  }
  section h3 {
    border-bottom: 1pt solid #000;
  }
  h2,
  h3,
  h4 {
    page-break-after: avoid;
  }
  /*.p-experience {
    page-break-inside: avoid;
  }*/
  a,
  a:link,
  a:visited {
    border-bottom: none;
    box-shadow: none;
    color: #000;
    text-decoration: none;
  }
  abbr[title] {
    border-bottom: none;
  }
  #contact {
    margin: 0;
  }
  section {
    margin-right: 0;
  }
  .degree > a {
    border-bottom: none;
  }
}

@page {
  margin-top: .5in;
  margin-right: 1in;
  margin-bottom: .25in;
  margin-left: 1in;
}