/** Place mixins in this file that are independent of speicifc site styles  */
/** Vertical Rhythm Mixin This mixin is to help create a typograhpical baseline grid but also to allow for specifying different line heights or bottom margins if you need to. Modified from - http://goo.gl/LYxTAZ
 In this mixin you can specifiy the font size in px and it will calculate the rem based on your $base-font-size & $base-line-height variables - @include font-size(24);
 It can also create a bottom margin based on the $base-font-size & $base-line-height variables - @include font-size(24, $margin: yes);
 Or if you want to specify a different bottom margin to be generated, if you did not parse in a line-height arguement, make sure you parse in the arguement name for margin - @include font-size(24, $margin: 32);
 This mixin also generates a pixel-less line height by default unless you specify that you either don't want one where I'd suggest declaring 1 within the mixin - @include font-size(24, 1);
 There's also the option to specify a different line-height for it to generate to, where you would specify the line-height in (effectively) it's pixel value - @include font-size(24, 40);
*/
/** Create a fully formed type style (sizing and vertical rhythm) by passing in a single value, e.g.: */
/** Force overly long spans of text to truncate, e.g.:  `@include truncate(100%);`  Where `$truncation-boundary` is a united measurement. */
/** Force long lines of text to truncate, e.g.: adapted from https://gist.github.com/kaelig/7528069  `@include line-clamp(2, 1.4);`  Where `$lines` is the number of lines to truncate, and line-height is the unitless line-height of the element. */
.dl--horizontal dt { float: left; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.bullet-list, .numbered-list { margin: 0 0 1em 1.2em; }
.bullet-list li, .numbered-list li { margin-bottom: 0.375em; }

/* Bullet List */
.bullet-list { list-style: disc; }

/* Numbered List
* Using counter and :before gives us greater flexibility for styling
*/
.numbered-list { position: relative; counter-reset: num-list-counter; }
.numbered-list li:before { position: absolute; left: -1.2em; counter-increment: num-list-counter; content: counter(num-list-counter,decimal) "."; }

.inline-list li { display: inline-block; margin-right: 0.75em; }
.inline-list li:last-child { margin: 0; }

.social li { display: inline-block; margin-right: 0.75em; }
.social li:last-child { margin: 0; }

.social { background-color: #000; display: block; position: relative; overflow: hidden; text-align: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-padding-start: 0; -moz-padding-start: 0; margin-top: 0; margin-bottom: 0; padding-top: 8px; }
.social li { margin-right: 8px; }
.social li [class^="icon--"] { display: block; }
.social li.social--more { float: right; margin-right: 0.5em; margin-left: auto; }
.social li a { display: block; position: relative; border-radius: 100%; }
.social li a span { position: absolute; left: 0; z-index: 1; width: 100%; text-align: center; color: inherit; font-weight: bold; }
.social li a[class*="icon--before"].icon--small span { top: 8px; font-size: 10px !important; }
.social li a[class*="icon--before"].icon--large span { top: 13px; font-size: 14px !important; }
.social.social--left { margin-right: 2px; }
.social.social--left li:first-child { margin-left: 0; }
.social.social--left li:last-child { margin-right: 0; }
.social.social--right { display: none; opacity: 0; display: block; margin-right: -6.375em; margin-left: -3em; padding-left: 0; }
.social .social__list { position: relative; margin: auto; padding-left: 8px; text-align: left; width: 224px; }
@media only screen and (min-width: 304px) and (max-width: 359px) { .social .social__list { width: 280px; } }
@media only screen and (min-width: 360px) and (max-width: 415px) { .social .social__list { width: 336px; } }
@media only screen and (min-width: 416px) { .social .social__list { width: 392px; text-align: center; } }
@media only screen and (min-width: 500px) { .social { float: right; text-align: right; padding-top: 0; }
  .social li, .social li:last-child { margin-right: 0; margin-left: 1em; } }

.social-container-mobile { display: block; font-size: 16px; line-height: 26px; }
@media only screen and (min-width: 416px) { .social-container-mobile .social--more { display: none; }
  .social-container-mobile .social__list { padding-left: 0; } }

.social-mobile { height: 56px; z-index:200}

@media only screen and (min-width: 500px) { .social-container-mobile { display: none; } }
.social-container-desktop { display: none; }

@media only screen and (min-width: 500px) { .social-container-desktop { display: block; padding-top: 12px; margin-right: 10px; }
  .social-desktop { height: 36px; } }
[layout][vertical] { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }

[layout][horizontal] { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: auto; width: 940px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; }

[fit] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

[flex] { -ms-flex: 1 1 .000000001px; -webkit-flex: 1; -webkit-box-flex: 1; flex: 1; -webkit-flex-basis: .000000001px; -ms-flex-preferred-size: .000000001px; flex-basis: .000000001px; }

.structure__top { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-bottom: 48px; margin-bottom: 0; }

.structure__content-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; }

.structure__header-container { position: absolute; top: 0; right: 0; left: 0; }

.structure__header-content { background-color: #fff; }

.structure__left { margin-right: 20px; width: 600px; }

.structure__right { width: 320px; }

.structure__body[layout][horizontal] { margin-top: 51px; }

.structure__bottom { position: relative; }