{"version":3,"sources":["../../node_modules/uswds/src/stylesheets/lib/grid/_box-sizing.scss","profile.css","../base/_accessibility.scss","../base/_utilities.scss","profile.scss","../../node_modules/uswds/src/stylesheets/lib/mixins/_clearfix.scss","../../node_modules/uswds/src/stylesheets/lib/grid/_media.scss","_account.scss","../../node_modules/uswds/src/stylesheets/lib/addons/_font-stacks.scss","../base/var/_typography.scss","../../node_modules/uswds/src/stylesheets/lib/functions/_px-to-rem.scss","../base/var/_spacing.scss"],"names":[],"mappings":"AAGE,KACE,6BAAsB,CAAtB,qBCiBJ,CDdE,iBAII,0BAAmB,CAAnB,kBCcN,CCrBA,wBCiDE,2BAA6B,CAC7B,qBAAuB,CACvB,kBAAoB,CACpB,mBAAqB,CACrB,mBAAqB,CACrB,oBAAsB,CACtB,yBAA2B,CAC3B,4BFxBF,CG7BA,uBCaI,UAAW,CACX,UAAW,CACX,aJoBJ,CK4CI,mCF/EJ,iBGGI,eNqCF,CACF,CMjCE,uBAEE,qBNmCJ,CIjCE,6BACE,UAAW,CACX,UAAW,CACX,aJoCJ,CK4BI,mCCvEF,uBAKI,iBAAkB,CAClB,UAAW,CAET,wBAAyD,CAI3D,gBNuCJ,CACF,CKmBI,mCCvEF,uBAiBM,wBNwCN,CACF,CKaI,mCC/CF,wBAEI,eNqCJ,CACF,CGnEG,gCAEG,UAAW,CACX,oBHqEN,CGxEG,uCDRD,4EKQsE,CLPtE,eMsBa,CNrBb,eMcuB,CNKvB,gBMXmB,CLKb,QH2ER,CGtEE,gCACE,eHyEJ,CG1EG,mDD2bD,oBAAqB,CACrB,yBOvc+B,CPwc/B,WOxc+B,CPyc/B,UOzc+B,CP6c7B,qDAAmB,CCxbjB,uBHyEN,CGrEE,mCACE,WAAY,CACZ,kBOnCyB,CPoCzB,gBKjCoB,CLkCpB,aHwEJ","file":"usajobs-design-system-profile.css","sourcesContent":["@charset \"UTF-8\";\n\n@if $border-box-sizing == true {\n  html { // http://bit.ly/1qk2tVR\n    box-sizing: border-box;\n  }\n\n  * {\n    &,\n    &::after,\n    &::before {\n      box-sizing: inherit;\n    }\n  }\n}\n","html {\n  box-sizing: border-box;\n}\n\n*, *::after, *::before {\n  box-sizing: inherit;\n}\n\n.usajobs-assistive-text {\n  position: absolute !important;\n  margin: -1px !important;\n  border: 0 !important;\n  padding: 0 !important;\n  width: 1px !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  clip: rect(0 0 0 0) !important;\n}\n\nhtml {\n  box-sizing: border-box;\n}\n\n*, *::after, *::before {\n  box-sizing: inherit;\n}\n\n.usajobs-assistive-text {\n  position: absolute !important;\n  margin: -1px !important;\n  border: 0 !important;\n  padding: 0 !important;\n  width: 1px !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  clip: rect(0 0 0 0) !important;\n}\n\n.usajobs-profile::after {\n  clear: both;\n  content: \"\";\n  display: block;\n}\n\n@media screen and (min-width: 48em) {\n  .usajobs-profile {\n    margin-bottom: 0;\n  }\n}\n\n.usajobs-profile__body {\n  background-color: #ffffff;\n}\n\n.usajobs-profile__body::after {\n  clear: both;\n  content: \"\";\n  display: block;\n}\n\n@media screen and (min-width: 48em) {\n  .usajobs-profile__body {\n    position: relative;\n    float: left;\n    width: calc(100% - 27rem);\n    min-height: 60rem;\n  }\n}\n\n@media screen and (min-width: 62em) {\n  .usajobs-profile__body {\n    width: calc(100% - 34rem);\n  }\n}\n\n@media screen and (min-width: 48em) {\n  .usajobs-profile__title {\n    margin: 4.5rem 0;\n  }\n}\n\n.usajobs-profile__body fieldset {\n  width: 100%;\n  margin-bottom: 4.5rem;\n}\n\n.usajobs-profile__body fieldset legend {\n  font-family: \"Source Sans Pro\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n  font-weight: 700;\n  line-height: 1.3;\n  margin-bottom: 0.5rem;\n  margin-top: 1.5rem;\n  font-size: 2.4rem;\n  margin: 0;\n}\n\n.usajobs-profile__section-title {\n  max-width: 46rem;\n}\n\n.usajobs-profile__section-title.is-complete::before {\n  display: inline-block;\n  background-size: 3rem 3rem;\n  height: 3rem;\n  width: 3rem;\n  content: url(\"../../img/icons/profile/check-circle.svg\");\n  vertical-align: text-top;\n}\n\n.usajobs-profile__required-section {\n  float: right;\n  padding-top: 1.5rem;\n  font-size: 1.4rem;\n  color: #e31c3d;\n}\n","// Accessibility\n\n@import \"utilities\";\n\n.usajobs-assistive-text {\n  @include hide();\n}\n","// USAJOBS Utilities\n\n// Typography helpers\n@mixin header {\n  font-family: $font-sans;\n  font-weight: $font-bold;\n  line-height: $heading-line-height;\n  margin-bottom: $size-base;\n  margin-top: $size-default;\n}\n\n@mixin h1 {\n  @include header();\n  font-size: $h1-font-size;\n  color: $color-primary-darkest;\n}\n\n@mixin h2 {\n  @include header();\n  font-size: $h2-font-size;\n  color: $color-primary-darkest;\n}\n\n@mixin h3 {\n  @include header();\n  font-size: $h3-font-size;\n}\n\n@mixin h4 {\n  @include header();\n  font-size: $h4-font-size;\n}\n\n@mixin h5 {\n  @include header();\n  font-size: $h5-font-size;\n}\n\n@mixin h6 {\n  @include header();\n  font-size: $h6-font-size;\n  font-weight: $font-normal;\n  text-transform: uppercase;\n}\n\n@mixin default-text {\n  font-size: $base-font-size;\n  font-weight: $font-normal;\n  line-height: 1.5;\n  margin: $size-S 0;\n}\n\n@mixin hide() {\n  position: absolute !important;\n  margin: -1px !important;\n  border: 0 !important;\n  padding: 0 !important;\n  width: 1px !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  clip: rect(0 0 0 0) !important;\n}\n\n@mixin makeCircle(\n  $size,\n  $border: none,\n  $bg-color: inherit,\n  $color: $color-white\n) {\n  display: inline-block;\n  width: $size;\n  height: $size;\n  line-height: $size;\n  border-radius: 50%;\n  color: $color;\n  background-color: $bg-color;\n  box-shadow: 0 0 0 2px $border inset;\n}\n\n@mixin makeSemiCircle($size, $bg-color: inherit, $color: $color-white) {\n  display: inline-block;\n  width: $size;\n  height: $size / 2;\n  line-height: $size;\n  -moz-border-radius: $size $size 0 0;\n  -webkit-border-radius: $size $size 0 0;\n  border-radius: $size $size 0 0;\n  color: $color;\n  background-color: $bg-color;\n}\n\n@mixin makeCloseButton($size: 35px) {\n  position: absolute;\n  top: -#{$size-default};\n  right: -#{$size-default};\n  margin: 0;\n  padding: 0;\n  @include makeCircle($size);\n  background-color: $color-gray-light;\n  text-decoration: none;\n\n  &:after {\n    position: relative;\n    display: inline-block;\n    width: rem(12px);\n    height: rem(12px);\n    background-size: 12px 12px;\n    content: url(\"../img/icons/close/times.svg\");\n    color: $color-white;\n    // Safari puts the icon slightly too low, Chrome slightly too high\n    // line-height corrects the issue in Chrome but makes it way too low in Safari\n    // line-height: $size;\n  }\n\n  &:hover {\n    background-color: $color-gray-dark;\n  }\n}\n\n@mixin makeButton(\n  $bg-color,\n  $hover-color,\n  $active-color,\n  $big: false,\n  $color: $color-white\n) {\n  display: inline-block;\n  appearance: none;\n  background-color: $bg-color;\n  border: 0;\n  color: $color;\n  cursor: pointer;\n  font-family: $font-sans;\n  font-size: $base-font-size;\n  font-weight: $font-bold;\n  line-height: 1;\n  outline: none;\n  @include margin(0.5em 0.5em 0.5em null);\n  text-align: center;\n  text-decoration: none;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n\n  .main-content & {\n    text-decoration: none;\n  }\n\n  @if ($big) {\n    padding: $size-default $size-M;\n    border-radius: 8px;\n    font-size: 2.4rem;\n  } @else {\n    padding: 1rem 2rem;\n    border-radius: $border-radius;\n  }\n\n  @include media($SM) {\n    width: auto;\n  }\n\n  &:visited {\n    color: $color;\n  }\n\n  &:hover,\n  &.usa-button-hover {\n    background-color: $hover-color;\n    color: $color;\n    border-bottom: 0;\n    text-decoration: none;\n  }\n\n  &:active,\n  &.usa-button-active {\n    background-color: $active-color;\n  }\n\n  &:focus {\n    box-shadow: $focus-shadow;\n  }\n}\n\n@mixin makePrimaryButton() {\n  @include makeButton(\n    $color-primary,\n    $color-primary-darker,\n    $color-primary-darkest,\n    \"big\"\n  );\n}\n\n@mixin bulletList() {\n  list-style: none;\n  padding-left: 0;\n  display: table;\n\n  > li {\n    display: table-row;\n\n    &:before {\n      content: \"•\";\n      display: table-cell;\n      padding-right: 0.4em;\n    }\n\n    &:after {\n      content: \"\";\n      display: block;\n      margin-bottom: 0.5em;\n    }\n  }\n}\n\n@mixin unstyledList() {\n  display: block;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n\n  > li {\n    display: list-item;\n    margin: 0;\n\n    &:before {\n      display: none;\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n}\n\n// BACKWARD COMPATIBLE SUPPORT FOR BOOTSTRAP\n// From https://gist.github.com/johnkoht/6405117\n// Converted from sass to scss\n// Create the grid for a given size\n// This will loop over the number of columns and create a css class\n// for each. If it's the last gride size, then let's not add a float\n@mixin grid-core($size) {\n  @for $i from 1 through $grid-columns {\n    .col-#{$size}-#{$i} {\n      // Ignore float for the largest grid size\n      @if $i < $grid-columns {\n        float: left;\n      }\n      @include span-columns($i);\n    }\n    // If it's not the screen-xs, then let's add push and pull helper classes\n    @if $size != \"xs\" {\n      .col-#{$size}-push-#{$i} {\n        left: flex-grid($i, $grid-columns) + flex-gutter($grid-columns);\n      }\n      .col-#{$size}-pull-#{$i} {\n        right: flex-grid($i, $grid-columns) + flex-gutter($grid-columns);\n      }\n    }\n  }\n}\n\n// OMEGA RESET\n// From http://www.ryanscherler.com/notes/entry/omega-reset-for-bourbon-neat/\n@mixin omega-reset($nth, $context: null) {\n  @if $context == null {\n    &:nth-child(#{$nth}) {\n      margin-right: flex-gutter();\n    }\n  } @else {\n    &:nth-child(#{$nth}) {\n      margin-right: flex-gutter($context);\n    }\n  }\n  &:nth-child(#{$nth} + 1) {\n    clear: none;\n  }\n}\n\n@mixin contentGutter() {\n  padding: 0 $size-default;\n\n  @include media($ML) {\n    padding-left: $size-M;\n    padding-right: $size-M;\n  }\n}\n\n// A variation on a mixin created to reproduce Google's Material Design Card shadows\n// https://gist.github.com/paulmelnikow/7fcfbe4f68e5df7fe326\n@mixin boxShadow($level, $inset: false) {\n  @if $level == 1 {\n    @if ($inset) {\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) inset,\n        0 1px 2px rgba(0, 0, 0, 0.24) inset;\n    } @else if {\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n    }\n  } @else if $level == 2 {\n    @if ($inset) {\n      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) inset,\n        0 3px 6px rgba(0, 0, 0, 0.23) inset;\n    }\n    @elseif {\n      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n    }\n  } @else if $level == 3 {\n    @if ($inset) {\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19) inset,\n        0 6px 6px rgba(0, 0, 0, 0.23) inset;\n    }\n    @elseif {\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n    }\n  } @else if $level == 4 {\n    @if ($inset) {\n      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25) inset,\n        0 10px 10px rgba(0, 0, 0, 0.22) inset;\n    }\n    @elseif {\n      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),\n        0 10px 10px rgba(0, 0, 0, 0.22);\n    }\n  } @else if $level == 5 {\n    @if ($inset) {\n      box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3) inset,\n        0 15px 12px rgba(0, 0, 0, 0.22) inset;\n    }\n    @elseif {\n      box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3),\n        0 15px 12px rgba(0, 0, 0, 0.22);\n    }\n  }\n}\n\n@mixin permaLink() {\n  color: $color-primary;\n\n  &:visited {\n    color: $color-primary;\n  }\n}\n\n// Allows us to use an HTML button and not get the default styling\n@mixin removeButton() {\n  margin: 0;\n  background-color: inherit;\n  border-radius: inherit;\n  color: $color-base;\n  font-weight: normal;\n\n  &:hover {\n    color: $color-base;\n    background-color: inherit;\n  }\n}\n\n@mixin UHPIcons($size: 31px) {\n  @include makeCircle($size, none, $color-secondary);\n  display: inline-block;\n  padding-bottom: $size-default;\n  font-size: $base-font-size;\n  text-align: center;\n  margin-right: $size-base;\n\n  &.public,\n  &.interchange {\n    @include makeCircle($size, none, $color-primary-alt);\n  }\n\n  &.federal-employees,\n  &.internal,\n  &.ses {\n    @include makeCircle($size, none, $color-primary-darkest);\n  }\n\n  &.federal-employees .fa::before {\n    margin-top: rem(-3px);\n    margin-right: rem(-2px);\n  }\n\n  &.internal .fa {\n    padding-top: rem(5px);\n\n    &::before {\n      margin-left: rem(1px);\n    }\n  }\n\n  &.veterans,\n  &.military-spouses {\n    @include makeCircle($size, none, $color-green);\n  }\n\n  // New variation with stacked circle icons\n  &.military-spouses {\n    .fa.is-first {\n      text-indent: 0;\n      top: -2px;\n      left: -4px;\n      opacity: 0.8;\n    }\n    .fa.is-second {\n      text-indent: 0;\n      left: 3px;\n    }\n  }\n\n  &.students {\n    @include makeCircle($size, none, $color-gold);\n  }\n\n  &.disability,\n  &.individuals-with-disabilities {\n    @include makeCircle($size, none, $color-primary-darker);\n  }\n\n  &.peace-corps {\n    @include makeCircle($size, none, $color-visited);\n  }\n\n  &.former-overseas-employees,\n  &.family-of-overseas-employees {\n    @include makeCircle($size, none, $color-primary-alt-darkest);\n  }\n\n  &.native-americans {\n    @include makeCircle($size, none, $color-gray);\n  }\n\n  &.land-mgmt,\n  &.land-management {\n    @include makeCircle($size, none, $color-gray-warm-dark);\n  }\n}\n\n@mixin applicationStatusColors() {\n  background-color: $color-gray-dark;\n  color: $color-white;\n  border: 1px solid $color-gray-dark;\n\n  &.status-received,\n  &.status-referred,\n  &.status-selected {\n    background-color: $color-green-dark;\n    color: $color-white;\n    border-color: $color-green-dark;\n  }\n\n  // Paused\n  &.status-incomplete,\n  &.status-in-progress {\n    background-color: $color-gold;\n    color: $color-base;\n    border-color: $color-gold;\n  }\n\n  // Stopped\n  &.status-canceled,\n  &.status-not-referred,\n  &.status-not-selected {\n    background-color: $color-secondary;\n    color: $color-white;\n    border-color: $color-secondary;\n  }\n}\n\n// Mixin to replace the use of font awesome\n@mixin icon-content($file, $height, $width, $path: null) {\n  display: inline-block;\n  background-size: $height $width;\n  height: $height;\n  width: $width;\n  @if $path == null {\n    content: url(\"../img/icons/#{$file}.svg\");\n  } @else {\n    content: url($path);\n  }\n}\n\n@mixin iconCenter($size: 1em) {\n  display: inline-flex;\n  align-self: center;\n  position: relative;\n  height: $size;\n  width: $size;\n\n  svg {\n    position: absolute;\n    left: 0;\n    right: 0;\n    margin: 0 auto;\n    height: 1em;\n    width: 1em;\n  }\n}\n","// Profile (including layouts or Documents and Username & Password)\n\n@import \"../base-shared\";\n\n@import \"account\";\n@import \"../home-variables\";\n\n.usajobs-profile {\n  @include accountLayout(true);\n}\n\n.usajobs-profile {\n  &__body {\n    fieldset {\n      width: 100%;\n      margin-bottom: $size-L;\n\n      legend {\n        @include h3();\n        margin: 0;\n      }\n    }\n  }\n\n  &__section-title {\n    max-width: $input-max-width;\n\n    &.is-complete::before {\n      @include icon-content(\n        \"\",\n        rem(30px),\n        rem(30px),\n        \"../../img/icons/profile/check-circle.svg\"\n      );\n      vertical-align: text-top;\n    }\n  }\n\n  &__required-section {\n    float: right;\n    padding-top: $size-default;\n    font-size: $small-font-size;\n    color: $color-secondary;\n  }\n}\n","@charset \"UTF-8\";\n\n/// Provides an easy way to include a clearfix for containing floats.\n///\n/// @link http://goo.gl/yP5hiZ\n///\n/// @example scss\n///   .element {\n///     @include clearfix;\n///   }\n///\n/// @example css\n///   .element::after {\n///     clear: both;\n///     content: \"\";\n///     display: block;\n///   }\n\n@mixin clearfix {\n  &::after {\n    clear: both;\n    content: \"\";\n    display: block;\n  }\n}\n","@charset \"UTF-8\";\n\n/// Outputs a media-query block with an optional grid context (the total number of columns used in the grid).\n///\n/// @param {List} $query\n///   A list of media query features and values, where each `$feature` should have a corresponding `$value`.\n///   For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).\n///\n///   If there is only a single `$value` in `$query`, `$default-feature` is going to be used.\n///\n///   The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`).\n///\n///\n/// @param {Number (unitless)} $total-columns [$grid-columns]\n///   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.\n///\n/// @example scss - Usage\n///   .responsive-element {\n///      @include media(769px) {\n///        @include span-columns(6);\n///      }\n///   }\n///\n///  .new-context-element {\n///    @include media(min-width 320px max-width 480px, 6) {\n///      @include span-columns(6);\n///    }\n///  }\n///\n/// @example css - CSS Output\n///  @media screen and (min-width: 769px) {\n///    .responsive-element {\n///      display: block;\n///      float: left;\n///      margin-right: 2.35765%;\n///      width: 48.82117%;\n///    }\n///\n///    .responsive-element:last-child {\n///      margin-right: 0;\n///    }\n///  }\n///\n///  @media screen and (min-width: 320px) and (max-width: 480px) {\n///    .new-context-element {\n///      display: block;\n///      float: left;\n///      margin-right: 4.82916%;\n///      width: 100%;\n///    }\n///\n///    .new-context-element:last-child {\n///      margin-right: 0;\n///    }\n///  }\n\n@mixin media($query: $feature $value $columns, $total-columns: $grid-columns) {\n  @if length($query) == 1 {\n    @media screen and ($default-feature: nth($query, 1)) {\n      $default-grid-columns: $grid-columns;\n      $grid-columns: $total-columns !global;\n      @content;\n      $grid-columns: $default-grid-columns !global;\n    }\n  } @else {\n    $loop-to: length($query);\n    $media-query: \"screen and \";\n    $default-grid-columns: $grid-columns;\n    $grid-columns: $total-columns !global;\n\n    @if is-not(is-even(length($query))) {\n      $grid-columns: nth($query, $loop-to) !global;\n      $loop-to: $loop-to - 1;\n    }\n\n    $i: 1;\n    @while $i <= $loop-to {\n      $media-query: $media-query + \"(\" + nth($query, $i) + \": \" + nth($query, $i + 1) + \") \";\n\n      @if ($i + 1) != $loop-to {\n        $media-query: $media-query + \"and \";\n      }\n\n      $i: $i + 2;\n    }\n\n    @media #{$media-query} {\n      @content;\n      $grid-columns: $default-grid-columns !global;\n    }\n  }\n}\n","// Shared Account Layout\n\n@import \"../base-shared\";\n\n@import \"../home-variables\";\n\n@mixin accountLayout($hasChildren: false) {\n  @include clearfix();\n\n  @include media($home-switch-to-tabs) {\n    margin-bottom: 0;\n    // this is to get the sidenav stripe to run to the bottom of the page\n    // background-color: $color-gray-dark;\n  }\n\n  &__body {\n    @include clearfix();\n    background-color: $color-white;\n\n    @include media($home-switch-to-tabs) {\n      position: relative;\n      float: left;\n      @if $hasChildren == true {\n        width: calc(100% - #{$home-sidenav-width-combined-small});\n      } @else {\n        width: calc(100% - #{$home-sidenav-width-small});\n      }\n      min-height: rem(600px);\n    }\n\n    @include media($L) {\n      @if $hasChildren == true {\n        width: calc(100% - #{$home-sidenav-width-combined-large});\n      } @else {\n        width: calc(100% - #{$home-sidenav-width-large});\n      }\n    }\n  }\n\n  &__title {\n    @include media($home-switch-to-tabs) {\n      margin: $size-L 0;\n    }\n  }\n}\n","@charset \"UTF-8\";\n\n/// Georgia font stack.\n///\n/// @type List\n\n$georgia: \"Georgia\", \"Cambria\", \"Times New Roman\", \"Times\", serif;\n\n/// Helvetica font stack.\n///\n/// @type List\n\n$helvetica: \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n\n/// Lucida Grande font stack.\n///\n/// @type List\n\n$lucida-grande: \"Lucida Grande\", \"Tahoma\", \"Verdana\", \"Arial\", sans-serif;\n\n/// Monospace font stack.\n///\n/// @type List\n\n$monospace: \"Bitstream Vera Sans Mono\", \"Consolas\", \"Courier\", monospace;\n\n/// Verdana font stack.\n///\n/// @type List\n\n$verdana: \"Verdana\", \"Geneva\", sans-serif;\n","// Typography\n\n@import \"lib/addons/_font-stacks\";\n\n$em-base: 10px;\n$base-font-size-px: 17px;\n$base-font-size: 1.7rem;\n$xsmall-font-size: 1.2rem;\n$small-font-size: 1.4rem;\n$lead-font-size: 1.9rem;\n$title-font-size: 5.2rem;\n\n$h1-font-size: 4.4rem;\n$h2-font-size: 3.4rem;\n$h3-font-size: 2.4rem;\n$h4-font-size: 1.9rem;\n$h5-font-size: 1.6rem;\n$h6-font-size: 1.3rem;\n\n$base-line-height: 1.5;\n$heading-line-height: 1.3;\n$lead-line-height: 1.7;\n\n$font-sans: \"Source Sans Pro\", $helvetica;\n$font-serif: \"Merriweather\", $georgia;\n\n$font-normal: 400;\n$font-bold: 700;\n","// Convert pixels to rems\n// eg. for a relational value of 12px write rem(12)\n// Assumes $em-base is the font-size of <html>\n\n@function rem($pxval) {\n  @if not unitless($pxval) {\n    $pxval: strip-units($pxval);\n  }\n\n  $base: $em-base;\n  @if not unitless($base) {\n    $base: strip-units($base);\n  }\n  @return ($pxval / $base) * 1rem;\n}\n","// Spacing\n\n$size-XS: 0.25rem; // 2.5px\n$size-base: 0.5rem; // 5px\n$size-S: $size-base * 2; // 10px\n$size-default: $size-base * 3; // 15px\n$size-SM: $size-base * 4; // 20px - Use this sparingly\n$size-M: $size-base * 6; // 30px\n$size-L: $size-base * 9; // 45px\n$size-XL: $size-M * 2; // 60px\n$size-XXL: $size-default * 5; // 75px\n$size-XXXL: $size-default * 6; // 100px\n\n$space-inset-default: $size-default $size-default $size-default $size-default;\n$space-inset-XS: $size-XS $size-XS $size-XS $size-XS;\n$space-inset-base: $size-base $size-base $size-base $size-base;\n$space-inset-M: $size-M $size-M $size-M $size-M;\n$space-inset-L: $size-L $size-L $size-L $size-L;\n\n$space-stack-default: 0 0 $size-default 0;\n$space-stack-XS: 0 0 $size-XS 0;\n$space-stack-S: 0 0 $size-S 0;\n$space-stack-M: 0 0 $size-M 0;\n$space-stack-L: 0 0 $size-L 0;\n$space-stack-XL: 0 0 $size-XL 0;\n$space-stack-XXL: 0 0 $size-XXL 0;\n"]}