/**
 * @version 2.6.1
 *
 * @todo 	add offsets to is-phone, is-laptop, ... media queries
 *
 * 2015-01-21
 * - added font-bold() and font-italic()
 * - plenty of new responsive mixins
 * 2015-01-29
 * - fixed the mobile() mixin
 * 2015-02-01
 * - fix a bug in font()
 * - new background-image() mixin with HD support
 * - added arrow() mixin
 * 2015-02-03
 * - added the flag $responsive for responsive function
 * - added defaut values to background-image
 * 2015-02-06
 * - added param clear-gutters in columns
 * - changed the background-image parameters name
 * 2015-02-18
 * - added !important attribute to fixed/absolute mixins
 * 2015-02-21
 * - fixed font() to dela with line-height and letter-spacing without the size being specified
 * 2015-02-23
 * - fixed box-shadow() bug
 * 2015-03-05
 * - added @content in center-children()
 * 2015-03-12
 * - added triangle()
 * 2015-03-13
 * - new generate-grid(), col() and row();
 * 2015-03-15
 * - added classname to generate-grid()
 * - added around-circle()
 * - added desktop() mixin, fixes to some responsive mixins
 * - more fixes to the responsive mixins
 * 2015-04-16
 * - added clear-grid()
 * 2015-04-23
 * - added $force attribute to the resonsive mixins
 * 2015-05-08
 * - added generate-keyframes() mixin, keyframe-value() and is-keyframes() functions
 * 2015-06-23
 * - added a parent selector for grids (eg. [data-row][data-col="3"] > *)
 * 2015-07-25
 * - added conditional sections
 * 2015-09-11
 * - added base-scales for fonts
 * 2015-10-01
 * - added align-children()
 * 2016-02-01
 * - added new transform mixins
 * 2016-06-21
 * - restructured all the functions
 * - created a new mixins.deprecated.scss
 */
/*
html{
	background:gray;
}
body{
	width:320px;
}
*/
@media screen and (min-width: 769px) {
  .section-text.-count2, .section-graphics.-half {
    margin-left: -20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: left; }
    .section-text.-count2 > *, .section-graphics.-half > * {
      margin-left: 20px;
      width: 100%; }
    .section-text.-count2 > *, .section-graphics.-half > * {
      width: calc(50% - 20px); } }

@media screen and (min-width: 769px) {
  .section-text.-count3, .section-graphics.-third {
    margin-left: -60px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: left; }
    .section-text.-count3 > *, .section-graphics.-third > * {
      margin-left: 60px;
      width: 100%; }
    .section-text.-count3 > *, .section-graphics.-third > * {
      width: calc(33.3333333333% - 60px); } }

body {
  color: #505d69;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*
	@include is-maximum-tablet{
		@include font-size(12,17);

		p, a, address, span, ul, ol, li, dl, dd, dt{
			@include font-size(12,17);
		}
	};
	*/ }
  body span {
    font: inherit; }

.stem-header {
  background-size: cover;
  background-position: top center;
  max-width: none;
  margin-bottom: 21px; }
  .stem-header .inside {
    max-width: 120rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 0 auto; }
  .stem-header.-background {
    margin-top: -10.6rem;
    padding-top: calc(10.6rem + 44px);
    height: 638px; }
  .stem-header .prefix {
    font-family: CircularPro-Bold, sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.08rem;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase; }
  .stem-header h1 {
    line-height: 0;
    margin-top: 0;
    padding: 6px 0 0 0; }
    .stem-header h1 span, .stem-header h1 em {
      box-shadow: 10px 0 0 white;
      background: white;
      display: inline;
      padding: 0;
      line-height: calc(1em + 3px);
      -webkit-box-decoration-break: clone;
      -ms-box-decoration-break: clone;
      -o-box-decoration-break: clone;
      box-decoration-break: clone;
      line-height: 1.1em;
      display: inline; }
    .stem-header h1 em {
      font-style: normal;
      font-size: 4.4rem; }
  @media screen and (max-width: 768px) {
    .stem-header.-background {
      height: auto;
      background: none !important; }
    .stem-header .prefix {
      display: none; }
    .stem-header h1 {
      font-size: 4rem; }
      .stem-header h1 em {
        font-size: 1.6rem; } }

body .site-content .section-sidebar {
  float: left;
  padding: 22px 0 0 42px;
  width: calc(100% - 80rem) !important; }
  body .site-content .section-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none; }
  body .site-content .section-sidebar li {
    padding-left: 0;
    line-height: 1em; }
  body .site-content .section-sidebar a {
    font-family: CircularPro-Bold, sans-serif;
    font-size: 1.3rem;
    line-height: 1.3rem;
    font-weight: 600;
    color: #505d69 !important; }
  body .site-content .section-sidebar > ul > li {
    padding-bottom: 6px; }
  body .site-content .section-sidebar ul ul a {
    font-family: CircularPro-Book, sans-serif;
    font-weight: 300; }

body .site-content .main-content-wrapper {
  width: 780px; }

@media screen and (max-width: 1080px) {
  body .site-content .section-sidebar {
    display: none; }
  body .site-content .main-content-wrapper {
    float: none;
    width: auto; } }

@media screen and (max-width: 768px) {
  #content {
    padding-left: 2rem;
    padding-right: 2rem; } }

.section-title hr {
  background-color: #eaeded;
  margin-top: 107px;
  margin-bottom: 10px; }

.section-title .prefix {
  font-family: CircularPro-Bold, sans-serif;
  font-size: 2rem;
  display: block;
  margin-bottom: 2rem; }

.section-title h2 {
  font-size: 4.8rem;
  margin-bottom: 3.2rem; }

.section-title h3 {
  font-size: 2rem;
  margin-top: 24px;
  margin-bottom: 2.2rem; }

@media screen and (max-width: 768px) {
  .section-title hr {
    margin-top: 70px;
    margin-bottom: 3px; }
  .section-title .prefix {
    font-size: 1.3rem;
    line-height: 1.6rem; }
  .section-title h2 {
    font-size: 2.6rem;
    line-height: 3.5rem;
    margin-bottom: 5px; }
  .section-title h3 {
    font-size: 1.3rem;
    line-height: 3.5rem; } }

.graphic {
  margin: 41px 0 50px; }

.graphic .label span {
  font-family: CircularPro-Bold, sans-serif; }

.graphic .label.-title .inside strong {
  display: block; }

.graphic .label.-barStart .inside {
  font-family: CircularPro-Book, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 300; }

.graphic .label.-barEnd .inside {
  font-family: CircularPro-Medium, sans-serif;
  font-size: 2rem;
  line-height: 1.6rem; }

.graphic .label.-axisRow {
  padding-right: 30px; }
  .graphic .label.-axisRow .inside {
    font-size: 1.5rem;
    line-height: 1.6rem;
    text-align: right; }

@media screen and (min-width: 769px) {
  .graphic .label.-title.-big .inside {
    font-size: 2rem;
    line-height: 2.1rem; }
    .graphic .label.-title.-big .inside strong {
      font-size: 3.6rem;
      line-height: 2.1rem;
      margin-bottom: 5px; }
  .graphic .label.-title.-medium .inside {
    font-size: 1.4rem;
    line-height: 1.6rem; }
    .graphic .label.-title.-medium .inside strong {
      font-size: 2.8rem;
      line-height: 1.6rem;
      margin-bottom: 5px; }
  .graphic .label.-title.-small .inside {
    font-size: 1.4rem;
    line-height: 1.8rem; }
    .graphic .label.-title.-small .inside strong {
      font-size: 2rem;
      line-height: 1.8rem; }
  .graphic .label.-barValue .inside {
    font-size: 2rem;
    line-height: 1.6rem; }
  .graphic .label.-barValue.-small .inside {
    font-size: 1.4rem;
    line-height: 1.6rem; } }

@media screen and (max-width: 768px) {
  .graphic .label.-title .inside {
    font-size: 1.3rem;
    line-height: 1.5rem; }
    .graphic .label.-title .inside strong {
      font-size: 1.7rem;
      line-height: 1.5rem; }
  .graphic .label.-barValue .inside {
    font-size: 1.1rem;
    line-height: 1.1rem; }
  .graphic .label.-barEnd .inside {
    font-size: 1.1rem;
    line-height: 1.1rem; }
  .graphic .label.-axisRow {
    padding-right: 10px; }
    .graphic .label.-axisRow .inside {
      font-size: 0.65rem;
      line-height: 0.65rem; } }

.legend span {
  font-family: CircularPro-Bold, sans-serif;
  font-size: 2rem;
  line-height: 2.2rem; }

.legend .title {
  font-family: CircularPro-Bold, sans-serif;
  font-size: 2rem;
  line-height: 6.5rem;
  color: #505d69;
  text-transform: none; }

.legend li {
  line-height: 2.2rem; }

.legend .box.-left {
  margin-right: 7px; }

.legend .box.-right {
  margin-left: 7px; }

@media screen and (min-width: 769px) {
  .legend.-small span, .legend.-small li {
    font-size: 1.4rem;
    line-height: 1.8rem; } }

@media screen and (max-width: 768px) {
  .legend li, .legend span {
    font-size: 1.3rem;
    line-height: 1.4rem; } }

.graphic.-donutChart .legend.-small .title {
  line-height: 2rem;
  margin-bottom: 5px; }

.graphic.-barChart.-vertical {
  margin-bottom: 34px;
  margin-top: 63px; }
  .graphic.-barChart.-vertical .label.-barStart {
    padding-top: 18px; }
  .graphic.-barChart.-vertical .label.-barEnd {
    padding-bottom: 18px; }
  .graphic.-barChart.-vertical .label.-barValue .inside {
    padding-bottom: 18px; }
  .graphic.-barChart.-vertical .label.-barValue.-small .inside {
    padding-bottom: 5px; }
  @media screen and (max-width: 768px) {
    .graphic.-barChart.-vertical .label.-barStart {
      padding-top: 0px; }
    .graphic.-barChart.-vertical .legend li {
      line-height: 1.8rem; } }

.graphic.-barChart.-horizontal .label.-barStart {
  padding-left: 10px; }
  .graphic.-barChart.-horizontal .label.-barStart .inside {
    color: white; }

.graphic.-barChart.-horizontal .label.-barEnd {
  padding-left: 10px; }

.graphic.-barChart.-horizontal .label.-barValue .inside {
  padding-left: 18px; }

.graphic.-barChart.-horizontal .label.-barValue.-small .inside {
  padding-left: 5px; }

@media screen and (max-width: 768px) {
  .graphic.-barChart.-horizontal .label.-barStart {
    padding-left: 8px; }
  .graphic.-barChart.-horizontal .label.-barEnd {
    padding-left: 5px; } }