@charset "UTF-8"; /**** MAIN STYLESHEET for [* Site Name Here *] --------------------------------------------------------- BUILT WITH SKYLINE: EVOLVING CSS ARCHITECTURE See README.md for info and credits TABLE OF CONTENTS @toc - Base ............ foundations, mixins, functions, vars - Elements ........ single elements - Layout .......... layout objects like grids, containers - Modules ......... objects created by combining elements --------------------------------------------------------- */ /*** @base --------------------------------------------------------- Your CSS begins with some global variables, a reset which is basically Normalize, some mixins, and a print stylesheet. ----------------------------------------------------- */ /** @variables --------------------------------------------------------- base/_vars.scss -------------------------------------------------------- Global variables are defined here. Define your colors, spacing and grid settings. ----------------------------------------------------- */ /* @colors -------------------------------------------------------- All color variables are defined here. We use real color names here. Although naming something like 'brand' is in fact more generic and reusable, we've found that you end up creating variables like $brand-2, $brand-alt, $brand-complimentary etc. While coding, it's too easy to forget what those mean. If the design changes drastically and the brand changes from, let's say, blue to green, just do a global find/replace - that's what text editors are for. ------------------------------------------------------ */ /* @breakpoints --------------------------------------------------------- Define global breakpoints as xs, sm, md, lg, xl, xxl --------------------------------------------------------- */ /* @global spacing unit --------------------------------------------------------- Define an em value for $unit. $unit is a helpful little variable that serves to keep your spacing consistent. Most often, 1 $unit is equal to your baseline height. So if your baseline height is 1.125ems (which is 18px), that's the value of 1 $unit. --------------------------------------------------------- */ /* @root font size --------------------------------------------------------- The font-size of `` element. --------------------------------------------------------- */ /** @reset --------------------------------------------------------- base/_reset.scss -------------------------------------------------------- This reset institutes the border-box box model and then block and margin/padding resets. Throughout Skyline, each partial has it's own resets. This allows you to only use what you need. Credit goes to Normalize http://normalize.css v2.1.0 http://git.io/normalize --------------------------------------------------------- */ *, *:before, *:after { box-sizing: border-box; padding: 0; margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, audio, canvas, video { display: block; } /** @helpers mixins and functions -------------------------------------------------------- base/mixins/_helpers.scss -------------------------------------------------------- mixins and functions be used globally. ------------------------------------------------------ */ /** @breakpoints mixin ----------------------------------------------------- base/_mixin-breakpoints.scss ----------------------------------------------------- This mixin makes using inline media queries easy. Options include bp-at-least for min-width, bp-until for max-width, and bp-between for min and max widths. You can use your breakpoint vars, or any other value. Usage: styles at medium breakpoint .some-element { @include bp-at-least($breakpoint__md){ your-styles: go-here; } } Usage: styles at custom breakpoint .another-element { @include bp-until(83.45em){ your-styles: go-here; } } ----------------------------------------------------- */ /** @clearfix mixin --------------------------------------------------------- base/_clearfix.scss -------------------------------------------------------- Use @include clearfix(); in your CSS Usage: clearfix mixin .element-to-clearfix { @include cleafix(); } --------------------------------------------------------- */ /** @font-face importer mixin ----------------------------------------------------------- _base/_mixin-font-face-importer.scss ----------------------------------------------------------- Use this mixin to embed a font $font-name is used in your css in font-family declarations $font-filepath-and-name is the location of your font file and the filename WITHOUT the file extension. The extensions are added here in the mixin Usage: @include embed-font($font-name, $font-filepath-and-name); --------------------------------------------------------- */ /** @gradual media queries mixin -------------------------------------------------------- base/mixins/_mixin-gradual-media-queries.scss -------------------------------------------------------- The mixin takes arguments of start-width, start-fontsize, end-width, and end-fontsize and then creates media queries between those start and end points at another argument value, increment-width. Usage: Gradually increase the font size of the html html { @include gradual-queries(20em, 80%, 70em, 100%, 10em) } In the above usage, the html fontsize will start out at 80% at 20em and end up at 100% at 70em - and the gradual changes in the fontsize percentage will be calculated at 10em intervals. See http://codepen.io/jeffschram/pen/IixqA ------------------------------------------------------ */ /** @fonts -------------------------------------------------------- base/_fonts.scss -------------------------------------------------------- Define the fonts used in this app and declare silent classes to be used in your CSS. If you are using a webfont that you're hosting, add the @embed-font() mixin from base/_mixin-font-face-importer.scs before you declare your fonts. Usage: Create a font-family named "interstate-light" using a font at /fonts/interstate_light-webfont.woff (and other extensions) @include embed-font("interstate-light", "/fonts/interstate_light-webfont"); If you are using Google Fonts, you can add the import code before you declare your fonts. @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700); -------------------------------------------------------- */ @font-face { font-family: "tod"; src: url("../fonts/tod.eot"); /* IE9 Compat Modes */ src: url("../fonts/tod.eot?#iefix") format("embedded-opentype"), url("../fonts/tod.woff") format("woff"), url("../fonts/tod.ttf") format("truetype"), url("../fonts/tod.svg#svgFontName") format("svg"); /* Legacy iOS */ font-weight: "bold"; font-style: normal; } @font-face { font-family: "iconfont"; src: url("../fonts/iconfont.eot"); /* IE9 Compat Modes */ src: url("../fonts/iconfont.eot?#iefix") format("embedded-opentype"), url("../fonts/iconfont.woff") format("woff"), url("../fonts/iconfont.ttf") format("truetype"), url("../fonts/iconfont.svg#svgFontName") format("svg"); /* Legacy iOS */ font-weight: "bold"; font-style: normal; } /* @sans -------------------------------------------------------- This is your basic sans font. Usage: use sans regular on a p p { @extend %sans--regular; } ------------------------------------------------------ */ body, .button { font-family: -apple-system, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; font-weight: 400; font-style: normal; } /* @serif -------------------------------------------------------- This is your basic serif font. Usage: use serif regular on a p p { @extend %serif--regular; } -------------------------------------------------------- */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder, input:-moz-placeholder, textarea:-moz-placeholder, select:-moz-placeholder { font-family: georgia, times, serif; font-weight: 300; font-style: normal; } .site-header .__h1 { font-family: georgia, times, serif; font-weight: 600; } .pt0 { padding-top: 0rem !important; } .pb0 { padding-bottom: 0rem !important; } .ptb0 { padding-top: 0rem !important; padding-bottom: 0rem !important; } .pl0 { padding-left: 0rem !important; } .pr0 { padding-right: 0rem !important; } .plr0 { padding-left: 0rem !important; padding-right: 0rem !important; } .p0 { padding: 0rem !important; } .mt0 { margin-top: 0rem !important; } .mb0 { margin-bottom: 0rem !important; } .mtb0 { margin-top: 0rem !important; margin-bottom: 0rem !important; } .ml0 { margin-left: 0rem !important; } .mr0 { margin-right: 0rem !important; } .mlr0 { margin-left: 0rem !important; margin-right: 0rem !important; } .m0 { padding: 0rem !important; } .pt5 { padding-top: 0.3125rem !important; } .pb5 { padding-bottom: 0.3125rem !important; } .ptb5 { padding-top: 0.3125rem !important; padding-bottom: 0.3125rem !important; } .pl5 { padding-left: 0.3125rem !important; } .pr5 { padding-right: 0.3125rem !important; } .plr5 { padding-left: 0.3125rem !important; padding-right: 0.3125rem !important; } .p5 { padding: 0.3125rem !important; } .mt5 { margin-top: 0.3125rem !important; } .mb5 { margin-bottom: 0.3125rem !important; } .mtb5 { margin-top: 0.3125rem !important; margin-bottom: 0.3125rem !important; } .ml5 { margin-left: 0.3125rem !important; } .mr5 { margin-right: 0.3125rem !important; } .mlr5 { margin-left: 0.3125rem !important; margin-right: 0.3125rem !important; } .m5 { padding: 0.3125rem !important; } .pt10 { padding-top: 0.625rem !important; } .pb10 { padding-bottom: 0.625rem !important; } .ptb10 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } .pl10 { padding-left: 0.625rem !important; } .pr10 { padding-right: 0.625rem !important; } .plr10 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; } .p10 { padding: 0.625rem !important; } .mt10 { margin-top: 0.625rem !important; } .mb10 { margin-bottom: 0.625rem !important; } .mtb10 { margin-top: 0.625rem !important; margin-bottom: 0.625rem !important; } .ml10 { margin-left: 0.625rem !important; } .mr10 { margin-right: 0.625rem !important; } .mlr10 { margin-left: 0.625rem !important; margin-right: 0.625rem !important; } .m10 { padding: 0.625rem !important; } .pt15 { padding-top: 0.9375rem !important; } .pb15 { padding-bottom: 0.9375rem !important; } .ptb15 { padding-top: 0.9375rem !important; padding-bottom: 0.9375rem !important; } .pl15 { padding-left: 0.9375rem !important; } .pr15 { padding-right: 0.9375rem !important; } .plr15 { padding-left: 0.9375rem !important; padding-right: 0.9375rem !important; } .p15 { padding: 0.9375rem !important; } .mt15 { margin-top: 0.9375rem !important; } .mb15 { margin-bottom: 0.9375rem !important; } .mtb15 { margin-top: 0.9375rem !important; margin-bottom: 0.9375rem !important; } .ml15 { margin-left: 0.9375rem !important; } .mr15 { margin-right: 0.9375rem !important; } .mlr15 { margin-left: 0.9375rem !important; margin-right: 0.9375rem !important; } .m15 { padding: 0.9375rem !important; } .pt20 { padding-top: 1.25rem !important; } .pb20 { padding-bottom: 1.25rem !important; } .ptb20 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .pl20 { padding-left: 1.25rem !important; } .pr20 { padding-right: 1.25rem !important; } .plr20 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .p20 { padding: 1.25rem !important; } .mt20 { margin-top: 1.25rem !important; } .mb20 { margin-bottom: 1.25rem !important; } .mtb20 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; } .ml20 { margin-left: 1.25rem !important; } .mr20 { margin-right: 1.25rem !important; } .mlr20 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } .m20 { padding: 1.25rem !important; } .pt25 { padding-top: 1.5625rem !important; } .pb25 { padding-bottom: 1.5625rem !important; } .ptb25 { padding-top: 1.5625rem !important; padding-bottom: 1.5625rem !important; } .pl25 { padding-left: 1.5625rem !important; } .pr25 { padding-right: 1.5625rem !important; } .plr25 { padding-left: 1.5625rem !important; padding-right: 1.5625rem !important; } .p25 { padding: 1.5625rem !important; } .mt25 { margin-top: 1.5625rem !important; } .mb25 { margin-bottom: 1.5625rem !important; } .mtb25 { margin-top: 1.5625rem !important; margin-bottom: 1.5625rem !important; } .ml25 { margin-left: 1.5625rem !important; } .mr25 { margin-right: 1.5625rem !important; } .mlr25 { margin-left: 1.5625rem !important; margin-right: 1.5625rem !important; } .m25 { padding: 1.5625rem !important; } .pt30 { padding-top: 1.875rem !important; } .pb30 { padding-bottom: 1.875rem !important; } .ptb30 { padding-top: 1.875rem !important; padding-bottom: 1.875rem !important; } .pl30 { padding-left: 1.875rem !important; } .pr30 { padding-right: 1.875rem !important; } .plr30 { padding-left: 1.875rem !important; padding-right: 1.875rem !important; } .p30 { padding: 1.875rem !important; } .mt30 { margin-top: 1.875rem !important; } .mb30 { margin-bottom: 1.875rem !important; } .mtb30 { margin-top: 1.875rem !important; margin-bottom: 1.875rem !important; } .ml30 { margin-left: 1.875rem !important; } .mr30 { margin-right: 1.875rem !important; } .mlr30 { margin-left: 1.875rem !important; margin-right: 1.875rem !important; } .m30 { padding: 1.875rem !important; } .pt35 { padding-top: 2.1875rem !important; } .pb35 { padding-bottom: 2.1875rem !important; } .ptb35 { padding-top: 2.1875rem !important; padding-bottom: 2.1875rem !important; } .pl35 { padding-left: 2.1875rem !important; } .pr35 { padding-right: 2.1875rem !important; } .plr35 { padding-left: 2.1875rem !important; padding-right: 2.1875rem !important; } .p35 { padding: 2.1875rem !important; } .mt35 { margin-top: 2.1875rem !important; } .mb35 { margin-bottom: 2.1875rem !important; } .mtb35 { margin-top: 2.1875rem !important; margin-bottom: 2.1875rem !important; } .ml35 { margin-left: 2.1875rem !important; } .mr35 { margin-right: 2.1875rem !important; } .mlr35 { margin-left: 2.1875rem !important; margin-right: 2.1875rem !important; } .m35 { padding: 2.1875rem !important; } .pt40 { padding-top: 2.5rem !important; } .pb40 { padding-bottom: 2.5rem !important; } .ptb40 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .pl40 { padding-left: 2.5rem !important; } .pr40 { padding-right: 2.5rem !important; } .plr40 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .p40 { padding: 2.5rem !important; } .mt40 { margin-top: 2.5rem !important; } .mb40 { margin-bottom: 2.5rem !important; } .mtb40 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } .ml40 { margin-left: 2.5rem !important; } .mr40 { margin-right: 2.5rem !important; } .mlr40 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; } .m40 { padding: 2.5rem !important; } .pt45 { padding-top: 2.8125rem !important; } .pb45 { padding-bottom: 2.8125rem !important; } .ptb45 { padding-top: 2.8125rem !important; padding-bottom: 2.8125rem !important; } .pl45 { padding-left: 2.8125rem !important; } .pr45 { padding-right: 2.8125rem !important; } .plr45 { padding-left: 2.8125rem !important; padding-right: 2.8125rem !important; } .p45 { padding: 2.8125rem !important; } .mt45 { margin-top: 2.8125rem !important; } .mb45 { margin-bottom: 2.8125rem !important; } .mtb45 { margin-top: 2.8125rem !important; margin-bottom: 2.8125rem !important; } .ml45 { margin-left: 2.8125rem !important; } .mr45 { margin-right: 2.8125rem !important; } .mlr45 { margin-left: 2.8125rem !important; margin-right: 2.8125rem !important; } .m45 { padding: 2.8125rem !important; } .pt50 { padding-top: 3.125rem !important; } .pb50 { padding-bottom: 3.125rem !important; } .ptb50 { padding-top: 3.125rem !important; padding-bottom: 3.125rem !important; } .pl50 { padding-left: 3.125rem !important; } .pr50 { padding-right: 3.125rem !important; } .plr50 { padding-left: 3.125rem !important; padding-right: 3.125rem !important; } .p50 { padding: 3.125rem !important; } .mt50 { margin-top: 3.125rem !important; } .mb50 { margin-bottom: 3.125rem !important; } .mtb50 { margin-top: 3.125rem !important; margin-bottom: 3.125rem !important; } .ml50 { margin-left: 3.125rem !important; } .mr50 { margin-right: 3.125rem !important; } .mlr50 { margin-left: 3.125rem !important; margin-right: 3.125rem !important; } .m50 { padding: 3.125rem !important; } .pt55 { padding-top: 3.4375rem !important; } .pb55 { padding-bottom: 3.4375rem !important; } .ptb55 { padding-top: 3.4375rem !important; padding-bottom: 3.4375rem !important; } .pl55 { padding-left: 3.4375rem !important; } .pr55 { padding-right: 3.4375rem !important; } .plr55 { padding-left: 3.4375rem !important; padding-right: 3.4375rem !important; } .p55 { padding: 3.4375rem !important; } .mt55 { margin-top: 3.4375rem !important; } .mb55 { margin-bottom: 3.4375rem !important; } .mtb55 { margin-top: 3.4375rem !important; margin-bottom: 3.4375rem !important; } .ml55 { margin-left: 3.4375rem !important; } .mr55 { margin-right: 3.4375rem !important; } .mlr55 { margin-left: 3.4375rem !important; margin-right: 3.4375rem !important; } .m55 { padding: 3.4375rem !important; } .pt60 { padding-top: 3.75rem !important; } .pb60 { padding-bottom: 3.75rem !important; } .ptb60 { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; } .pl60 { padding-left: 3.75rem !important; } .pr60 { padding-right: 3.75rem !important; } .plr60 { padding-left: 3.75rem !important; padding-right: 3.75rem !important; } .p60 { padding: 3.75rem !important; } .mt60 { margin-top: 3.75rem !important; } .mb60 { margin-bottom: 3.75rem !important; } .mtb60 { margin-top: 3.75rem !important; margin-bottom: 3.75rem !important; } .ml60 { margin-left: 3.75rem !important; } .mr60 { margin-right: 3.75rem !important; } .mlr60 { margin-left: 3.75rem !important; margin-right: 3.75rem !important; } .m60 { padding: 3.75rem !important; } .pt65 { padding-top: 4.0625rem !important; } .pb65 { padding-bottom: 4.0625rem !important; } .ptb65 { padding-top: 4.0625rem !important; padding-bottom: 4.0625rem !important; } .pl65 { padding-left: 4.0625rem !important; } .pr65 { padding-right: 4.0625rem !important; } .plr65 { padding-left: 4.0625rem !important; padding-right: 4.0625rem !important; } .p65 { padding: 4.0625rem !important; } .mt65 { margin-top: 4.0625rem !important; } .mb65 { margin-bottom: 4.0625rem !important; } .mtb65 { margin-top: 4.0625rem !important; margin-bottom: 4.0625rem !important; } .ml65 { margin-left: 4.0625rem !important; } .mr65 { margin-right: 4.0625rem !important; } .mlr65 { margin-left: 4.0625rem !important; margin-right: 4.0625rem !important; } .m65 { padding: 4.0625rem !important; } .pt70 { padding-top: 4.375rem !important; } .pb70 { padding-bottom: 4.375rem !important; } .ptb70 { padding-top: 4.375rem !important; padding-bottom: 4.375rem !important; } .pl70 { padding-left: 4.375rem !important; } .pr70 { padding-right: 4.375rem !important; } .plr70 { padding-left: 4.375rem !important; padding-right: 4.375rem !important; } .p70 { padding: 4.375rem !important; } .mt70 { margin-top: 4.375rem !important; } .mb70 { margin-bottom: 4.375rem !important; } .mtb70 { margin-top: 4.375rem !important; margin-bottom: 4.375rem !important; } .ml70 { margin-left: 4.375rem !important; } .mr70 { margin-right: 4.375rem !important; } .mlr70 { margin-left: 4.375rem !important; margin-right: 4.375rem !important; } .m70 { padding: 4.375rem !important; } .pt75 { padding-top: 4.6875rem !important; } .pb75 { padding-bottom: 4.6875rem !important; } .ptb75 { padding-top: 4.6875rem !important; padding-bottom: 4.6875rem !important; } .pl75 { padding-left: 4.6875rem !important; } .pr75 { padding-right: 4.6875rem !important; } .plr75 { padding-left: 4.6875rem !important; padding-right: 4.6875rem !important; } .p75 { padding: 4.6875rem !important; } .mt75 { margin-top: 4.6875rem !important; } .mb75 { margin-bottom: 4.6875rem !important; } .mtb75 { margin-top: 4.6875rem !important; margin-bottom: 4.6875rem !important; } .ml75 { margin-left: 4.6875rem !important; } .mr75 { margin-right: 4.6875rem !important; } .mlr75 { margin-left: 4.6875rem !important; margin-right: 4.6875rem !important; } .m75 { padding: 4.6875rem !important; } .pt80 { padding-top: 5rem !important; } .pb80 { padding-bottom: 5rem !important; } .ptb80 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .pl80 { padding-left: 5rem !important; } .pr80 { padding-right: 5rem !important; } .plr80 { padding-left: 5rem !important; padding-right: 5rem !important; } .p80 { padding: 5rem !important; } .mt80 { margin-top: 5rem !important; } .mb80 { margin-bottom: 5rem !important; } .mtb80 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .ml80 { margin-left: 5rem !important; } .mr80 { margin-right: 5rem !important; } .mlr80 { margin-left: 5rem !important; margin-right: 5rem !important; } .m80 { padding: 5rem !important; } .pt85 { padding-top: 5.3125rem !important; } .pb85 { padding-bottom: 5.3125rem !important; } .ptb85 { padding-top: 5.3125rem !important; padding-bottom: 5.3125rem !important; } .pl85 { padding-left: 5.3125rem !important; } .pr85 { padding-right: 5.3125rem !important; } .plr85 { padding-left: 5.3125rem !important; padding-right: 5.3125rem !important; } .p85 { padding: 5.3125rem !important; } .mt85 { margin-top: 5.3125rem !important; } .mb85 { margin-bottom: 5.3125rem !important; } .mtb85 { margin-top: 5.3125rem !important; margin-bottom: 5.3125rem !important; } .ml85 { margin-left: 5.3125rem !important; } .mr85 { margin-right: 5.3125rem !important; } .mlr85 { margin-left: 5.3125rem !important; margin-right: 5.3125rem !important; } .m85 { padding: 5.3125rem !important; } .pt90 { padding-top: 5.625rem !important; } .pb90 { padding-bottom: 5.625rem !important; } .ptb90 { padding-top: 5.625rem !important; padding-bottom: 5.625rem !important; } .pl90 { padding-left: 5.625rem !important; } .pr90 { padding-right: 5.625rem !important; } .plr90 { padding-left: 5.625rem !important; padding-right: 5.625rem !important; } .p90 { padding: 5.625rem !important; } .mt90 { margin-top: 5.625rem !important; } .mb90 { margin-bottom: 5.625rem !important; } .mtb90 { margin-top: 5.625rem !important; margin-bottom: 5.625rem !important; } .ml90 { margin-left: 5.625rem !important; } .mr90 { margin-right: 5.625rem !important; } .mlr90 { margin-left: 5.625rem !important; margin-right: 5.625rem !important; } .m90 { padding: 5.625rem !important; } .pt95 { padding-top: 5.9375rem !important; } .pb95 { padding-bottom: 5.9375rem !important; } .ptb95 { padding-top: 5.9375rem !important; padding-bottom: 5.9375rem !important; } .pl95 { padding-left: 5.9375rem !important; } .pr95 { padding-right: 5.9375rem !important; } .plr95 { padding-left: 5.9375rem !important; padding-right: 5.9375rem !important; } .p95 { padding: 5.9375rem !important; } .mt95 { margin-top: 5.9375rem !important; } .mb95 { margin-bottom: 5.9375rem !important; } .mtb95 { margin-top: 5.9375rem !important; margin-bottom: 5.9375rem !important; } .ml95 { margin-left: 5.9375rem !important; } .mr95 { margin-right: 5.9375rem !important; } .mlr95 { margin-left: 5.9375rem !important; margin-right: 5.9375rem !important; } .m95 { padding: 5.9375rem !important; } .pt100 { padding-top: 6.25rem !important; } .pb100 { padding-bottom: 6.25rem !important; } .ptb100 { padding-top: 6.25rem !important; padding-bottom: 6.25rem !important; } .pl100 { padding-left: 6.25rem !important; } .pr100 { padding-right: 6.25rem !important; } .plr100 { padding-left: 6.25rem !important; padding-right: 6.25rem !important; } .p100 { padding: 6.25rem !important; } .mt100 { margin-top: 6.25rem !important; } .mb100 { margin-bottom: 6.25rem !important; } .mtb100 { margin-top: 6.25rem !important; margin-bottom: 6.25rem !important; } .ml100 { margin-left: 6.25rem !important; } .mr100 { margin-right: 6.25rem !important; } .mlr100 { margin-left: 6.25rem !important; margin-right: 6.25rem !important; } .m100 { padding: 6.25rem !important; } .float--l { float: left; } .float--r { float: right; } .fwb { font-weight: bold; } .tar { text-align: right; } .tal { text-align: left; } .tac { text-align: center; } .ttu { text-transform: uppercase; } .d--block { display: block; } .d--inline-block { display: inline-block; } .w--100p { width: 100%; } .clear { clear: both; } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /** @print -------------------------------------------------------- base/_print.scss -------------------------------------------------------- Print Stylesheet from http://h5bp.com/r ----------------------------------------------------- */ /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r CREDIT: HTML5 Boilerplate ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /*** @elements --------------------------------------------------------- Global styling of elements. --------------------------------------------------------- */ /** @body -------------------------------------------------------- elements/_body.scss -------------------------------------------------------- Body should contain the document's default font and background color for the content, if that background color is different than the html. ------------------------------------------------------ */ body { line-height: 1.5; color: #515554; background: #fff; } /** @buttons -------------------------------------------------------- elements/_buttons.scss -------------------------------------------------------- Base settings for buttons. ------------------------------------------------------ */ button:focus, button:active { outline: none; box-shadow: none; border: none; } .button { -webkit-appearance: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; background: #ED9639; color: white; border: none; text-transform: uppercase; text-decoration: none; letter-spacing: .2em; padding: 1em 1.5em; border-radius: 0.5em; font-weight: bold; max-width: 100%; text-shadow: 0 0 5px rgba(189, 102, 9, 0.62); } .button:after { margin-left: 0.2em; } .button:hover, .button:focus, .button:active { outline: none; opacity: .85; } .button.m--mid { font-size: 1.25rem; padding: 1em 5em; } @media screen and (max-width: 34.365em) { .button.m--mid { padding: 1em 0; display: block; } } /** @code -------------------------------------------------------- elements/_code.scss -------------------------------------------------------- Code elements like

 and 
-----------------------------------------------------  */
code {
  vertical-align: middle;
  padding: .25em .5em;
  background: rgba(193, 199, 208, 0.3); }

/**

  @forms
---------------------------------------------------------
  elements/_forms.scss
--------------------------------------------------------

  Base styles for all forms and form related elements

  Below you'll set styles for all forms, and if you have
  any specific kinds of forms, like a search form that you
  create a classname of form--search, put that at the
  bottom of this partial.

  This scss partial is pretty big.  Here's how it is
  organized.

  * Base styling on form elements

  * Styles for form & form modules


--------------------------------------------------------- */
input, textarea, select {
  -webkit-appearance: none;
  font-size: 1rem;
  padding: 1em 1.5em;
  border-radius: 0;
  width: 100%;
  border: 1px solid #515554;
  color: #515554;
  background-color: white;
  transition: background-color 0.2s ease-out; }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder {
    color: #8e8e8e; }
  input:-moz-placeholder, textarea:-moz-placeholder, select:-moz-placeholder {
    color: #8e8e8e; }
  input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
    color: #8e8e8e; }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder {
    color: #8e8e8e; }
  input:focus, textarea:focus, select:focus {
    outline: none; }
    input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder, select:focus::-webkit-input-placeholder {
      opacity: .3; }
    input:focus:-moz-placeholder, textarea:focus:-moz-placeholder, select:focus:-moz-placeholder {
      opacity: .3; }
    input:focus::-moz-placeholder, textarea:focus::-moz-placeholder, select:focus::-moz-placeholder {
      opacity: .3; }
    input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder, select:focus:-ms-input-placeholder {
      opacity: .3; }
  input.m--error, textarea.m--error, select.m--error {
    background-color: #F8D2D2; }

textarea {
  min-height: 10em; }

input[type=radio] {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #444;
  background: transparent; }
  input[type=radio]:checked {
    background: #222; }

/**

  @headings
--------------------------------------------------------
  elements/_headings.scss
--------------------------------------------------------

  Base setting for headings.

------------------------------------------------------ */
.section-h1 {
  font-size: 1.875rem;
  line-height: 1.2em;
  text-align: center;
  color: white;
  padding: 2.25rem 1.125rem;
  background: #000;
  font-family: tod, serif; }
  .section-h1 .__sub-title {
    display: block;
    line-height: 1.2;
    padding-top: 1em;
    font-size: 0.9375rem; }
    .section-h1 .__sub-title br {
      display: none; }
      @media screen and (max-width: 34.365em) {
        .section-h1 .__sub-title br {
          display: block; } }
  .section-h1 .__title {
    display: block; }
  @media screen and (max-width: 34.365em) {
    .section-h1 {
      font-size: 1.375rem; } }

.__section-h1-sub-no {
  font-size: 1.25rem;
  color: #6ba5e5; }

.__section-h1-sub {
  font-size: 1.25rem; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  font-weight: normal; }

/**

   @hr
--------------------------------------------------------
  elements/_hr.scss
--------------------------------------------------------

  Horizontal Rule

-------------------------------------------------------- */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/**

   @html
--------------------------------------------------------
  elements/_html.scss
--------------------------------------------------------

  HTML should contain the site's default background color
  and font-size

------------------------------------------------------ */
html {
  font-size: 80%; }
  @media (min-width: 20em) {
    html {
      font-size: 80%; } }
  @media (min-width: 30em) {
    html {
      font-size: 83.3333333333%; } }
  @media (min-width: 40em) {
    html {
      font-size: 86.6666666667%; } }
  @media (min-width: 50em) {
    html {
      font-size: 90%; } }
  @media (min-width: 60em) {
    html {
      font-size: 93.3333333333%; } }
  @media (min-width: 70em) {
    html {
      font-size: 96.6666666667%; } }
  @media (min-width: 80em) {
    html {
      font-size: 100%; } }

* {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

/**

  @images
---------------------------------------------------------
  elements/_images.scss
--------------------------------------------------------

  Base styling for images, plus some helpful utility
  classes that modify images.

  Note: You won't add any styling to these image classes,
  these are just utility classes

--------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: none; }

/* @img--natural
--------------------------------------------------------

  Natural Images are 100% max-width, but their natural width by default

------------------------------------------------------ */
.img--natural {
  width: auto; }

/* @image placement
--------------------------------------------------------

  Here are a few helper classes to position images, particularly
  helpful inside paragraphs.

  Example: Image Right
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Example: Image, Natural Width
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  Example: Image, Center
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

------------------------------------------------------ */
.img--right {
  width: auto;
  float: right;
  margin-bottom: 1.125rem;
  margin-left: 1.125rem; }

.img--left {
  width: auto;
  float: left;
  margin-right: 1.125rem;
  margin-bottom: 1.125rem; }

.img--center {
  width: auto;
  display: block;
  margin-right: auto;
  margin-bottom: 1.125rem;
  margin-left: auto; }

.img--right img,
.img--left img,
.img--center img {
  width: auto; }

/* @img--circle
--------------------------------------------------------

  Popular circle image for bios etc.

  Example: Circle image
  

------------------------------------------------------ */
.img--circle {
  border-radius: 50%; }

/**

  @icons
---------------------------------------------------------
  elements/_icons.scss
--------------------------------------------------------

  Your icon set may vary. In this partial, you may wish
  to load in a font icon set and add all the associated
  css that goes with it. This would be the case if you
  were using something like Symbolset or IcoMoon for
  example.

--------------------------------------------------------- */
/* @icon
--------------------------------------------------------

  This is a basic icon element. We set some basic
  structural styles and display styles to get the ball
  rolling.

  Example: Open Icon
  +

  Example: Close Icon
  ×

------------------------------------------------------ */
.icon {
  color: inherit;
  display: inline-block;
  font-style: normal;
  vertical-align: middle;
  font-size: 1em; }

/**

  @links
--------------------------------------------------------
  elements/_links.scss
--------------------------------------------------------

  Base settings for links

-------------------------------------------------------- */
/* @anchors
--------------------------------------------------------

  Anchors will have this base styling

------------------------------------------------------ */
a {
  color: inherit;
  text-decoration: none; }
  a:hover, a:focus {
    opacity: .75; }

/* @webkit-tap-highlight
--------------------------------------------------------

  Declare the webkit tap highlight style

------------------------------------------------------ */
body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35); }

/**

  @lists
--------------------------------------------------------
  elements/_lists.scss
--------------------------------------------------------

  Base settings for lists.

-------------------------------------------------------- */
ul li,
ol li {
  line-height: 2em;
  list-style: none; }

/**

  @quotes
--------------------------------------------------------
  elements/_quotes.scss
--------------------------------------------------------

  Base settings for Blockquotes and pull quotes

-----------------------------------------------------  */
/**

  @text
--------------------------------------------------------
  elements/_text.scss
--------------------------------------------------------

  Some basic styles to paragraphs and
  inline styles

-----------------------------------------------------  */
p {
  margin-bottom: 1em;
  line-height: 1.40625rem; }
  p:last-child {
    margin-bottom: 0; }

b,
strong {
  font-weight: bold; }

i,
em {
  font-style: italic; }

.paragraph {
  line-height: 1.8; }

/**

  @tables
---------------------------------------------------------
  elements/_tables.scss
--------------------------------------------------------

  Base styling for tables

--------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  border: none; }

.table--striped tbody tr:nth-of-type(odd) {
  background-color: #eee; }

.table--about {
  background: #fff;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
  padding: 15px; }
  .table--about tr {
    height: 4em;
    border-bottom: solid 1px #ebebeb;
    padding: 0 5px 0 5px; }
    .table--about tr:last-child {
      border-bottom: none; }
  .table--about td {
    padding: 10px 0 10px 30px; }

/***

  @layout
---------------------------------------------------------

  A large portion of CSS is structural layout. You will use
  these helpers to create the scaffolding that will support
  the elements and modules that make up your site.

---------------------------------------------------------  */
/**

  @container
--------------------------------------------------------
  layout/_container.scss
--------------------------------------------------------

  The .container class is applied to restrict the
  max-width of an element, usually a bit of content.

  Often, you will place a .container div within another
  element that has a background color. This gives you
  a full-bleed background, but the content is contained
  within the max-width.

  Example: Container within a section
  
    
      Your content goes here... 
    
  

------------------------------------------------------ */
.container {
  zoom: 1;
  margin-left: auto;
  margin-right: auto;
  max-width: 70em;
  padding: 0 1.6875rem; }
  .container:before, .container:after {
    content: " ";
    display: table; }
  .container:after {
    clear: both; }
  @media screen and (min-width: 34.375em) {
    .container {
      padding: 0 3.375rem; } }

.container--v-center, .profile-section .__profile {
  position: relative;
  display: table;
  height: 100%; }
  .container--v-center > *, .profile-section .__profile > * {
    display: table-cell;
    vertical-align: middle; }

.container--ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.container--site {
  position: relative;
  margin: 0 auto;
  width: 58.75rem;
  max-width: 100%; }
  @media screen and (max-width: 889.99px) {
    .container--site {
      padding-left: 2.25rem;
      padding-right: 2.25rem; } }

.container--mid, .premium-salon-section .__summary, .become-member-section .__steps, .qa-section .__questions {
  width: 78%;
  margin: 0 auto; }
  @media screen and (max-width: 34.365em) {
    .container--mid, .premium-salon-section .__summary, .become-member-section .__steps, .qa-section .__questions {
      width: 100%; } }

/**

  @grids
---------------------------------------------------------
  layout/_grids.scss
--------------------------------------------------------

  Skyline uses a simple grid system.  It starts with
  a wrapper div that can have a classname of .grid-wrap
  or .gw for short.  Inside of that div, you'll nest
  your grid units.  These are divs with classname of
  either .grid or .g for short.

  To specify the responsive behavior of the grid,
  add width classes from layout/_widths.scss.

  Example: Grid with responsive width classes
  
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
  

  For a grid wrap containing equally-sized grid units, like
  a gallery of thumbnails for instance, use the responsive ups
  classes from layout/_widths.scss. With these classes
  applied to the .grid-wrap/.gw, you won't need to specify
  widths on the individual grid units, just on the wrapper.

  Example: Grid with responsive ups classes
  
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
  
  
  NOTE: see some test styles at the bottom of this partial
  Remove them if you don't need them.

------------------------------------------------------ */
.grid-wrap,
.gw {
  zoom: 1;
  display: block;
  list-style-type: none;
  margin-bottom: -1.125rem; }
  .grid-wrap:before, .grid-wrap:after,
  .gw:before,
  .gw:after {
    content: " ";
    display: table; }
  .grid-wrap:after,
  .gw:after {
    clear: both; }
  @media screen and (min-width: 20em) {
    .grid-wrap,
    .gw {
      margin: 0 0 -1.125rem -1.125rem; } }

.grid,
.g {
  zoom: 1;
  min-height: 1px;
  position: relative;
  padding-bottom: 1.125rem;
  display: block;
  width: 100%; }
  .grid:before, .grid:after,
  .g:before,
  .g:after {
    content: " ";
    display: table; }
  .grid:after,
  .g:after {
    clear: both; }
  @media screen and (min-width: 20em) {
    .grid,
    .g {
      padding: 0 0 1.125rem 1.125rem;
      float: left; } }

/**

  @hide
---------------------------------------------------------
  layout/_hide.scss
--------------------------------------------------------

  Utility state classes to hide things in different ways

--------------------------------------------------------- */
.is-hidden {
  display: none !important;
  visibility: hidden !important; }

.is-visually-hidden {
  visibility: hidden; }

/**

  @media
--------------------------------------------------------
  layout/_media.scss
--------------------------------------------------------

  The 'media' object is a common pattern in OOCSS.
  It consists of a wrapper element with a classname of
  .media and then two child elements, one that contains
  an image or video that is floated, and the other
  contains text.

  This used commonly in bios, or comments where you
  have an avatar to one site, and the comment next to it.

  Source: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

-----------------------------------------------------  */
/* @media objects
---------------------------------------------------------

  Example: Media object, left
  
    
      
    
    
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    
  

  Example: Media object, right
  
    
      
    
    
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    
  

---------------------------------------------------------  */
.media {
  display: block;
  zoom: 1;
  margin-bottom: 1em; }
  .media:before, .media:after {
    content: " ";
    display: table; }
  .media:after {
    clear: both; }

.media__left {
  float: left;
  margin-right: 1em; }

.media__right {
  float: right;
  margin-left: 1em; }

.media__left img,
.media__right img {
  display: block; }

.media__body {
  overflow: hidden; }

.media__body,
.media__body > :last-child {
  margin-bottom: 0; }

/**

  @ups
--------------------------------------------------------
  layout/_ups.scss
--------------------------------------------------------

  UPS?

  Yep, ups.  These are global classes that will set
  their direct children to a specific width.  You will
  mainly use these in grids, and maybe with tabs or
  navigations.

  For instance: four-up will set each child to 25%

  Set the ups configuration variables below in this partial
  to specify how many or how few classes you want available
  in your project.

  Example: Ups and grids
  
    
    
  

  
    
    
    
  


  Ups work like widths in that they have responsive behavior.  If
  you prepend an up class with a responsive prefix, like (s for small
  or m for medium) the behaviour will only kick in at those
  viewports.

  For example, if you want your gallery to be two-up at the smallest
  viewport, four-up at medium, six-up at large, and eight-up on the largest then use
  this.

  Example: Responsive Ups
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  

  
  

-----------------------------------------------------  */
/*

              Widths at default Viewport

            ---------------------------------------------------- */
.one-up > * {
  width: 100%; }

.two-up > * {
  width: 50%; }

.three-up > * {
  width: 33.3333333333%; }

.four-up > * {
  width: 25%; }

.five-up > * {
  width: 20%; }

.six-up > * {
  width: 16.6666666667%; }

.seven-up > * {
  width: 14.2857142857%; }

.eight-up > * {
  width: 12.5%; }

.nine-up > * {
  width: 11.1111111111%; }

.ten-up > * {
  width: 10%; }

.eleven-up > * {
  width: 9.0909090909%; }

.twelve-up > * {
  width: 8.3333333333%; }

/*

              Responsive ups at $breakpoint__xs

            ---------------------------------------------------- */
@media screen and (min-width: 20em) {
  .xs-one-up > * {
    width: 100%; }
  .xs-two-up > * {
    width: 50%; }
  .xs-three-up > * {
    width: 33.3333333333%; }
  .xs-four-up > * {
    width: 25%; }
  .xs-five-up > * {
    width: 20%; }
  .xs-six-up > * {
    width: 16.6666666667%; }
  .xs-seven-up > * {
    width: 14.2857142857%; }
  .xs-eight-up > * {
    width: 12.5%; }
  .xs-nine-up > * {
    width: 11.1111111111%; }
  .xs-ten-up > * {
    width: 10%; }
  .xs-eleven-up > * {
    width: 9.0909090909%; }
  .xs-twelve-up > * {
    width: 8.3333333333%; } }

/*

              Responsive ups at $breakpoint__sm

            ---------------------------------------------------- */
@media screen and (min-width: 34.375em) {
  .sm-one-up > * {
    width: 100%; }
  .sm-two-up > * {
    width: 50%; }
  .sm-three-up > * {
    width: 33.3333333333%; }
  .sm-four-up > * {
    width: 25%; }
  .sm-five-up > * {
    width: 20%; }
  .sm-six-up > * {
    width: 16.6666666667%; }
  .sm-seven-up > * {
    width: 14.2857142857%; }
  .sm-eight-up > * {
    width: 12.5%; }
  .sm-nine-up > * {
    width: 11.1111111111%; }
  .sm-ten-up > * {
    width: 10%; }
  .sm-eleven-up > * {
    width: 9.0909090909%; }
  .sm-twelve-up > * {
    width: 8.3333333333%; } }

/*

              Responsive ups at $breakpoint__md

            ---------------------------------------------------- */
@media screen and (min-width: 48em) {
  .md-one-up > * {
    width: 100%; }
  .md-two-up > * {
    width: 50%; }
  .md-three-up > * {
    width: 33.3333333333%; }
  .md-four-up > * {
    width: 25%; }
  .md-five-up > * {
    width: 20%; }
  .md-six-up > * {
    width: 16.6666666667%; }
  .md-seven-up > * {
    width: 14.2857142857%; }
  .md-eight-up > * {
    width: 12.5%; }
  .md-nine-up > * {
    width: 11.1111111111%; }
  .md-ten-up > * {
    width: 10%; }
  .md-eleven-up > * {
    width: 9.0909090909%; }
  .md-twelve-up > * {
    width: 8.3333333333%; } }

/*

              Responsive ups at $breakpoint__lg

            ---------------------------------------------------- */
@media screen and (min-width: 64em) {
  .lg-one-up > * {
    width: 100%; }
  .lg-two-up > * {
    width: 50%; }
  .lg-three-up > * {
    width: 33.3333333333%; }
  .lg-four-up > * {
    width: 25%; }
  .lg-five-up > * {
    width: 20%; }
  .lg-six-up > * {
    width: 16.6666666667%; }
  .lg-seven-up > * {
    width: 14.2857142857%; }
  .lg-eight-up > * {
    width: 12.5%; }
  .lg-nine-up > * {
    width: 11.1111111111%; }
  .lg-ten-up > * {
    width: 10%; }
  .lg-eleven-up > * {
    width: 9.0909090909%; }
  .lg-twelve-up > * {
    width: 8.3333333333%; } }

/*

              Responsive ups at $breakpoint__xl

            ---------------------------------------------------- */
@media screen and (min-width: 78.5em) {
  .xl-one-up > * {
    width: 100%; }
  .xl-two-up > * {
    width: 50%; }
  .xl-three-up > * {
    width: 33.3333333333%; }
  .xl-four-up > * {
    width: 25%; }
  .xl-five-up > * {
    width: 20%; }
  .xl-six-up > * {
    width: 16.6666666667%; }
  .xl-seven-up > * {
    width: 14.2857142857%; }
  .xl-eight-up > * {
    width: 12.5%; }
  .xl-nine-up > * {
    width: 11.1111111111%; }
  .xl-ten-up > * {
    width: 10%; }
  .xl-eleven-up > * {
    width: 9.0909090909%; }
  .xl-twelve-up > * {
    width: 8.3333333333%; } }

/*

              Responsive ups at $breakpoint__xxl

            ---------------------------------------------------- */
@media screen and (min-width: 100em) {
  .xxl-one-up > * {
    width: 100%; }
  .xxl-two-up > * {
    width: 50%; }
  .xxl-three-up > * {
    width: 33.3333333333%; }
  .xxl-four-up > * {
    width: 25%; }
  .xxl-five-up > * {
    width: 20%; }
  .xxl-six-up > * {
    width: 16.6666666667%; }
  .xxl-seven-up > * {
    width: 14.2857142857%; }
  .xxl-eight-up > * {
    width: 12.5%; }
  .xxl-nine-up > * {
    width: 11.1111111111%; }
  .xxl-ten-up > * {
    width: 10%; }
  .xxl-eleven-up > * {
    width: 9.0909090909%; }
  .xxl-twelve-up > * {
    width: 8.3333333333%; } }

/**

  @widths
---------------------------------------------------------
  layout/_widths.scss
--------------------------------------------------------

  Global Width Classes like .one-third or .seven-twelfths
  and responsive widths like .sm-one-third or .xl-one-half

  If you append the width class with a size indicator, the
  size will only be applied if the viewport is at least
  at that breakpoint size.

  Set the widths configuration variables below in this partial
  to specify how many or how few classes you want available
  in your project.

  Requires:
  * base/_vars.scss and the breakpoint mixin from
  * base/_mixin-breakpoints.scss

---------------------------------------------------------  */
/*

              Widths at default Viewport

            ---------------------------------------------------- */
.one-whole {
  width: 100%; }

.one-half {
  width: 50%; }

.two-halves {
  width: 100%; }

.one-third {
  width: 33.3333333333%; }

.two-thirds {
  width: 66.6666666667%; }

.three-thirds {
  width: 100%; }

.one-fourth {
  width: 25%; }

.two-fourths {
  width: 50%; }

.three-fourths {
  width: 75%; }

.four-fourths {
  width: 100%; }

.one-fifth {
  width: 20%; }

.two-fifths {
  width: 40%; }

.three-fifths {
  width: 60%; }

.four-fifths {
  width: 80%; }

.five-fifths {
  width: 100%; }

.one-sixth {
  width: 16.6666666667%; }

.two-sixths {
  width: 33.3333333333%; }

.three-sixths {
  width: 50%; }

.four-sixths {
  width: 66.6666666667%; }

.five-sixths {
  width: 83.3333333333%; }

.six-sixths {
  width: 100%; }

.one-seventh {
  width: 14.2857142857%; }

.two-sevenths {
  width: 28.5714285714%; }

.three-sevenths {
  width: 42.8571428571%; }

.four-sevenths {
  width: 57.1428571429%; }

.five-sevenths {
  width: 71.4285714286%; }

.six-sevenths {
  width: 85.7142857143%; }

.seven-sevenths {
  width: 100%; }

.one-eighth {
  width: 12.5%; }

.two-eighths {
  width: 25%; }

.three-eighths {
  width: 37.5%; }

.four-eighths {
  width: 50%; }

.five-eighths {
  width: 62.5%; }

.six-eighths {
  width: 75%; }

.seven-eighths {
  width: 87.5%; }

.eight-eighths {
  width: 100%; }

.one-ninth {
  width: 11.1111111111%; }

.two-ninths {
  width: 22.2222222222%; }

.three-ninths {
  width: 33.3333333333%; }

.four-ninths {
  width: 44.4444444444%; }

.five-ninths {
  width: 55.5555555556%; }

.six-ninths {
  width: 66.6666666667%; }

.seven-ninths {
  width: 77.7777777778%; }

.eight-ninths {
  width: 88.8888888889%; }

.nine-ninths {
  width: 100%; }

.one-tenth {
  width: 10%; }

.two-tenths {
  width: 20%; }

.three-tenths {
  width: 30%; }

.four-tenths {
  width: 40%; }

.five-tenths {
  width: 50%; }

.six-tenths {
  width: 60%; }

.seven-tenths {
  width: 70%; }

.eight-tenths {
  width: 80%; }

.nine-tenths {
  width: 90%; }

.ten-tenths {
  width: 100%; }

.one-eleventh {
  width: 9.0909090909%; }

.two-elevenths {
  width: 18.1818181818%; }

.three-elevenths {
  width: 27.2727272727%; }

.four-elevenths {
  width: 36.3636363636%; }

.five-elevenths {
  width: 45.4545454545%; }

.six-elevenths {
  width: 54.5454545455%; }

.seven-elevenths {
  width: 63.6363636364%; }

.eight-elevenths {
  width: 72.7272727273%; }

.nine-elevenths {
  width: 81.8181818182%; }

.ten-elevenths {
  width: 90.9090909091%; }

.eleven-elevenths {
  width: 100%; }

.one-twelfth {
  width: 8.3333333333%; }

.two-twelfths {
  width: 16.6666666667%; }

.three-twelfths {
  width: 25%; }

.four-twelfths {
  width: 33.3333333333%; }

.five-twelfths {
  width: 41.6666666667%; }

.six-twelfths {
  width: 50%; }

.seven-twelfths {
  width: 58.3333333333%; }

.eight-twelfths {
  width: 66.6666666667%; }

.nine-twelfths {
  width: 75%; }

.ten-twelfths {
  width: 83.3333333333%; }

.eleven-twelfths {
  width: 91.6666666667%; }

.twelve-twelfths {
  width: 100%; }

/*

              Responsive widths at $breakpoint__sm

            ---------------------------------------------------- */
@media screen and (min-width: 34.375em) {
  .sm-one-whole {
    width: 100%; }
  .sm-one-half {
    width: 50%; }
  .sm-two-halves {
    width: 100%; }
  .sm-one-third {
    width: 33.3333333333%; }
  .sm-two-thirds {
    width: 66.6666666667%; }
  .sm-three-thirds {
    width: 100%; }
  .sm-one-fourth {
    width: 25%; }
  .sm-two-fourths {
    width: 50%; }
  .sm-three-fourths {
    width: 75%; }
  .sm-four-fourths {
    width: 100%; }
  .sm-one-fifth {
    width: 20%; }
  .sm-two-fifths {
    width: 40%; }
  .sm-three-fifths {
    width: 60%; }
  .sm-four-fifths {
    width: 80%; }
  .sm-five-fifths {
    width: 100%; }
  .sm-one-sixth {
    width: 16.6666666667%; }
  .sm-two-sixths {
    width: 33.3333333333%; }
  .sm-three-sixths {
    width: 50%; }
  .sm-four-sixths {
    width: 66.6666666667%; }
  .sm-five-sixths {
    width: 83.3333333333%; }
  .sm-six-sixths {
    width: 100%; }
  .sm-one-seventh {
    width: 14.2857142857%; }
  .sm-two-sevenths {
    width: 28.5714285714%; }
  .sm-three-sevenths {
    width: 42.8571428571%; }
  .sm-four-sevenths {
    width: 57.1428571429%; }
  .sm-five-sevenths {
    width: 71.4285714286%; }
  .sm-six-sevenths {
    width: 85.7142857143%; }
  .sm-seven-sevenths {
    width: 100%; }
  .sm-one-eighth {
    width: 12.5%; }
  .sm-two-eighths {
    width: 25%; }
  .sm-three-eighths {
    width: 37.5%; }
  .sm-four-eighths {
    width: 50%; }
  .sm-five-eighths {
    width: 62.5%; }
  .sm-six-eighths {
    width: 75%; }
  .sm-seven-eighths {
    width: 87.5%; }
  .sm-eight-eighths {
    width: 100%; }
  .sm-one-ninth {
    width: 11.1111111111%; }
  .sm-two-ninths {
    width: 22.2222222222%; }
  .sm-three-ninths {
    width: 33.3333333333%; }
  .sm-four-ninths {
    width: 44.4444444444%; }
  .sm-five-ninths {
    width: 55.5555555556%; }
  .sm-six-ninths {
    width: 66.6666666667%; }
  .sm-seven-ninths {
    width: 77.7777777778%; }
  .sm-eight-ninths {
    width: 88.8888888889%; }
  .sm-nine-ninths {
    width: 100%; }
  .sm-one-tenth {
    width: 10%; }
  .sm-two-tenths {
    width: 20%; }
  .sm-three-tenths {
    width: 30%; }
  .sm-four-tenths {
    width: 40%; }
  .sm-five-tenths {
    width: 50%; }
  .sm-six-tenths {
    width: 60%; }
  .sm-seven-tenths {
    width: 70%; }
  .sm-eight-tenths {
    width: 80%; }
  .sm-nine-tenths {
    width: 90%; }
  .sm-ten-tenths {
    width: 100%; }
  .sm-one-eleventh {
    width: 9.0909090909%; }
  .sm-two-elevenths {
    width: 18.1818181818%; }
  .sm-three-elevenths {
    width: 27.2727272727%; }
  .sm-four-elevenths {
    width: 36.3636363636%; }
  .sm-five-elevenths {
    width: 45.4545454545%; }
  .sm-six-elevenths {
    width: 54.5454545455%; }
  .sm-seven-elevenths {
    width: 63.6363636364%; }
  .sm-eight-elevenths {
    width: 72.7272727273%; }
  .sm-nine-elevenths {
    width: 81.8181818182%; }
  .sm-ten-elevenths {
    width: 90.9090909091%; }
  .sm-eleven-elevenths {
    width: 100%; }
  .sm-one-twelfth {
    width: 8.3333333333%; }
  .sm-two-twelfths {
    width: 16.6666666667%; }
  .sm-three-twelfths {
    width: 25%; }
  .sm-four-twelfths {
    width: 33.3333333333%; }
  .sm-five-twelfths {
    width: 41.6666666667%; }
  .sm-six-twelfths {
    width: 50%; }
  .sm-seven-twelfths {
    width: 58.3333333333%; }
  .sm-eight-twelfths {
    width: 66.6666666667%; }
  .sm-nine-twelfths {
    width: 75%; }
  .sm-ten-twelfths {
    width: 83.3333333333%; }
  .sm-eleven-twelfths {
    width: 91.6666666667%; }
  .sm-twelve-twelfths {
    width: 100%; } }

/*

              Responsive widths at $breakpoint__md

            ---------------------------------------------------- */
@media screen and (min-width: 48em) {
  .md-one-whole {
    width: 100%; }
  .md-one-half {
    width: 50%; }
  .md-two-halves {
    width: 100%; }
  .md-one-third {
    width: 33.3333333333%; }
  .md-two-thirds {
    width: 66.6666666667%; }
  .md-three-thirds {
    width: 100%; }
  .md-one-fourth {
    width: 25%; }
  .md-two-fourths {
    width: 50%; }
  .md-three-fourths {
    width: 75%; }
  .md-four-fourths {
    width: 100%; }
  .md-one-fifth {
    width: 20%; }
  .md-two-fifths {
    width: 40%; }
  .md-three-fifths {
    width: 60%; }
  .md-four-fifths {
    width: 80%; }
  .md-five-fifths {
    width: 100%; }
  .md-one-sixth {
    width: 16.6666666667%; }
  .md-two-sixths {
    width: 33.3333333333%; }
  .md-three-sixths {
    width: 50%; }
  .md-four-sixths {
    width: 66.6666666667%; }
  .md-five-sixths {
    width: 83.3333333333%; }
  .md-six-sixths {
    width: 100%; }
  .md-one-seventh {
    width: 14.2857142857%; }
  .md-two-sevenths {
    width: 28.5714285714%; }
  .md-three-sevenths {
    width: 42.8571428571%; }
  .md-four-sevenths {
    width: 57.1428571429%; }
  .md-five-sevenths {
    width: 71.4285714286%; }
  .md-six-sevenths {
    width: 85.7142857143%; }
  .md-seven-sevenths {
    width: 100%; }
  .md-one-eighth {
    width: 12.5%; }
  .md-two-eighths {
    width: 25%; }
  .md-three-eighths {
    width: 37.5%; }
  .md-four-eighths {
    width: 50%; }
  .md-five-eighths {
    width: 62.5%; }
  .md-six-eighths {
    width: 75%; }
  .md-seven-eighths {
    width: 87.5%; }
  .md-eight-eighths {
    width: 100%; }
  .md-one-ninth {
    width: 11.1111111111%; }
  .md-two-ninths {
    width: 22.2222222222%; }
  .md-three-ninths {
    width: 33.3333333333%; }
  .md-four-ninths {
    width: 44.4444444444%; }
  .md-five-ninths {
    width: 55.5555555556%; }
  .md-six-ninths {
    width: 66.6666666667%; }
  .md-seven-ninths {
    width: 77.7777777778%; }
  .md-eight-ninths {
    width: 88.8888888889%; }
  .md-nine-ninths {
    width: 100%; }
  .md-one-tenth {
    width: 10%; }
  .md-two-tenths {
    width: 20%; }
  .md-three-tenths {
    width: 30%; }
  .md-four-tenths {
    width: 40%; }
  .md-five-tenths {
    width: 50%; }
  .md-six-tenths {
    width: 60%; }
  .md-seven-tenths {
    width: 70%; }
  .md-eight-tenths {
    width: 80%; }
  .md-nine-tenths {
    width: 90%; }
  .md-ten-tenths {
    width: 100%; }
  .md-one-eleventh {
    width: 9.0909090909%; }
  .md-two-elevenths {
    width: 18.1818181818%; }
  .md-three-elevenths {
    width: 27.2727272727%; }
  .md-four-elevenths {
    width: 36.3636363636%; }
  .md-five-elevenths {
    width: 45.4545454545%; }
  .md-six-elevenths {
    width: 54.5454545455%; }
  .md-seven-elevenths {
    width: 63.6363636364%; }
  .md-eight-elevenths {
    width: 72.7272727273%; }
  .md-nine-elevenths {
    width: 81.8181818182%; }
  .md-ten-elevenths {
    width: 90.9090909091%; }
  .md-eleven-elevenths {
    width: 100%; }
  .md-one-twelfth {
    width: 8.3333333333%; }
  .md-two-twelfths {
    width: 16.6666666667%; }
  .md-three-twelfths {
    width: 25%; }
  .md-four-twelfths {
    width: 33.3333333333%; }
  .md-five-twelfths {
    width: 41.6666666667%; }
  .md-six-twelfths {
    width: 50%; }
  .md-seven-twelfths {
    width: 58.3333333333%; }
  .md-eight-twelfths {
    width: 66.6666666667%; }
  .md-nine-twelfths {
    width: 75%; }
  .md-ten-twelfths {
    width: 83.3333333333%; }
  .md-eleven-twelfths {
    width: 91.6666666667%; }
  .md-twelve-twelfths {
    width: 100%; } }

/*

              Responsive widths at $breakpoint__lg

            ---------------------------------------------------- */
@media screen and (min-width: 64em) {
  .lg-one-whole {
    width: 100%; }
  .lg-one-half {
    width: 50%; }
  .lg-two-halves {
    width: 100%; }
  .lg-one-third {
    width: 33.3333333333%; }
  .lg-two-thirds {
    width: 66.6666666667%; }
  .lg-three-thirds {
    width: 100%; }
  .lg-one-fourth {
    width: 25%; }
  .lg-two-fourths {
    width: 50%; }
  .lg-three-fourths {
    width: 75%; }
  .lg-four-fourths {
    width: 100%; }
  .lg-one-fifth {
    width: 20%; }
  .lg-two-fifths {
    width: 40%; }
  .lg-three-fifths {
    width: 60%; }
  .lg-four-fifths {
    width: 80%; }
  .lg-five-fifths {
    width: 100%; }
  .lg-one-sixth {
    width: 16.6666666667%; }
  .lg-two-sixths {
    width: 33.3333333333%; }
  .lg-three-sixths {
    width: 50%; }
  .lg-four-sixths {
    width: 66.6666666667%; }
  .lg-five-sixths {
    width: 83.3333333333%; }
  .lg-six-sixths {
    width: 100%; }
  .lg-one-seventh {
    width: 14.2857142857%; }
  .lg-two-sevenths {
    width: 28.5714285714%; }
  .lg-three-sevenths {
    width: 42.8571428571%; }
  .lg-four-sevenths {
    width: 57.1428571429%; }
  .lg-five-sevenths {
    width: 71.4285714286%; }
  .lg-six-sevenths {
    width: 85.7142857143%; }
  .lg-seven-sevenths {
    width: 100%; }
  .lg-one-eighth {
    width: 12.5%; }
  .lg-two-eighths {
    width: 25%; }
  .lg-three-eighths {
    width: 37.5%; }
  .lg-four-eighths {
    width: 50%; }
  .lg-five-eighths {
    width: 62.5%; }
  .lg-six-eighths {
    width: 75%; }
  .lg-seven-eighths {
    width: 87.5%; }
  .lg-eight-eighths {
    width: 100%; }
  .lg-one-ninth {
    width: 11.1111111111%; }
  .lg-two-ninths {
    width: 22.2222222222%; }
  .lg-three-ninths {
    width: 33.3333333333%; }
  .lg-four-ninths {
    width: 44.4444444444%; }
  .lg-five-ninths {
    width: 55.5555555556%; }
  .lg-six-ninths {
    width: 66.6666666667%; }
  .lg-seven-ninths {
    width: 77.7777777778%; }
  .lg-eight-ninths {
    width: 88.8888888889%; }
  .lg-nine-ninths {
    width: 100%; }
  .lg-one-tenth {
    width: 10%; }
  .lg-two-tenths {
    width: 20%; }
  .lg-three-tenths {
    width: 30%; }
  .lg-four-tenths {
    width: 40%; }
  .lg-five-tenths {
    width: 50%; }
  .lg-six-tenths {
    width: 60%; }
  .lg-seven-tenths {
    width: 70%; }
  .lg-eight-tenths {
    width: 80%; }
  .lg-nine-tenths {
    width: 90%; }
  .lg-ten-tenths {
    width: 100%; }
  .lg-one-eleventh {
    width: 9.0909090909%; }
  .lg-two-elevenths {
    width: 18.1818181818%; }
  .lg-three-elevenths {
    width: 27.2727272727%; }
  .lg-four-elevenths {
    width: 36.3636363636%; }
  .lg-five-elevenths {
    width: 45.4545454545%; }
  .lg-six-elevenths {
    width: 54.5454545455%; }
  .lg-seven-elevenths {
    width: 63.6363636364%; }
  .lg-eight-elevenths {
    width: 72.7272727273%; }
  .lg-nine-elevenths {
    width: 81.8181818182%; }
  .lg-ten-elevenths {
    width: 90.9090909091%; }
  .lg-eleven-elevenths {
    width: 100%; }
  .lg-one-twelfth {
    width: 8.3333333333%; }
  .lg-two-twelfths {
    width: 16.6666666667%; }
  .lg-three-twelfths {
    width: 25%; }
  .lg-four-twelfths {
    width: 33.3333333333%; }
  .lg-five-twelfths {
    width: 41.6666666667%; }
  .lg-six-twelfths {
    width: 50%; }
  .lg-seven-twelfths {
    width: 58.3333333333%; }
  .lg-eight-twelfths {
    width: 66.6666666667%; }
  .lg-nine-twelfths {
    width: 75%; }
  .lg-ten-twelfths {
    width: 83.3333333333%; }
  .lg-eleven-twelfths {
    width: 91.6666666667%; }
  .lg-twelve-twelfths {
    width: 100%; } }

/*

              Responsive widths at $breakpoint__xl

            ---------------------------------------------------- */
@media screen and (min-width: 78.5em) {
  .xl-one-whole {
    width: 100%; }
  .xl-one-half {
    width: 50%; }
  .xl-two-halves {
    width: 100%; }
  .xl-one-third {
    width: 33.3333333333%; }
  .xl-two-thirds {
    width: 66.6666666667%; }
  .xl-three-thirds {
    width: 100%; }
  .xl-one-fourth {
    width: 25%; }
  .xl-two-fourths {
    width: 50%; }
  .xl-three-fourths {
    width: 75%; }
  .xl-four-fourths {
    width: 100%; }
  .xl-one-fifth {
    width: 20%; }
  .xl-two-fifths {
    width: 40%; }
  .xl-three-fifths {
    width: 60%; }
  .xl-four-fifths {
    width: 80%; }
  .xl-five-fifths {
    width: 100%; }
  .xl-one-sixth {
    width: 16.6666666667%; }
  .xl-two-sixths {
    width: 33.3333333333%; }
  .xl-three-sixths {
    width: 50%; }
  .xl-four-sixths {
    width: 66.6666666667%; }
  .xl-five-sixths {
    width: 83.3333333333%; }
  .xl-six-sixths {
    width: 100%; }
  .xl-one-seventh {
    width: 14.2857142857%; }
  .xl-two-sevenths {
    width: 28.5714285714%; }
  .xl-three-sevenths {
    width: 42.8571428571%; }
  .xl-four-sevenths {
    width: 57.1428571429%; }
  .xl-five-sevenths {
    width: 71.4285714286%; }
  .xl-six-sevenths {
    width: 85.7142857143%; }
  .xl-seven-sevenths {
    width: 100%; }
  .xl-one-eighth {
    width: 12.5%; }
  .xl-two-eighths {
    width: 25%; }
  .xl-three-eighths {
    width: 37.5%; }
  .xl-four-eighths {
    width: 50%; }
  .xl-five-eighths {
    width: 62.5%; }
  .xl-six-eighths {
    width: 75%; }
  .xl-seven-eighths {
    width: 87.5%; }
  .xl-eight-eighths {
    width: 100%; }
  .xl-one-ninth {
    width: 11.1111111111%; }
  .xl-two-ninths {
    width: 22.2222222222%; }
  .xl-three-ninths {
    width: 33.3333333333%; }
  .xl-four-ninths {
    width: 44.4444444444%; }
  .xl-five-ninths {
    width: 55.5555555556%; }
  .xl-six-ninths {
    width: 66.6666666667%; }
  .xl-seven-ninths {
    width: 77.7777777778%; }
  .xl-eight-ninths {
    width: 88.8888888889%; }
  .xl-nine-ninths {
    width: 100%; }
  .xl-one-tenth {
    width: 10%; }
  .xl-two-tenths {
    width: 20%; }
  .xl-three-tenths {
    width: 30%; }
  .xl-four-tenths {
    width: 40%; }
  .xl-five-tenths {
    width: 50%; }
  .xl-six-tenths {
    width: 60%; }
  .xl-seven-tenths {
    width: 70%; }
  .xl-eight-tenths {
    width: 80%; }
  .xl-nine-tenths {
    width: 90%; }
  .xl-ten-tenths {
    width: 100%; }
  .xl-one-eleventh {
    width: 9.0909090909%; }
  .xl-two-elevenths {
    width: 18.1818181818%; }
  .xl-three-elevenths {
    width: 27.2727272727%; }
  .xl-four-elevenths {
    width: 36.3636363636%; }
  .xl-five-elevenths {
    width: 45.4545454545%; }
  .xl-six-elevenths {
    width: 54.5454545455%; }
  .xl-seven-elevenths {
    width: 63.6363636364%; }
  .xl-eight-elevenths {
    width: 72.7272727273%; }
  .xl-nine-elevenths {
    width: 81.8181818182%; }
  .xl-ten-elevenths {
    width: 90.9090909091%; }
  .xl-eleven-elevenths {
    width: 100%; }
  .xl-one-twelfth {
    width: 8.3333333333%; }
  .xl-two-twelfths {
    width: 16.6666666667%; }
  .xl-three-twelfths {
    width: 25%; }
  .xl-four-twelfths {
    width: 33.3333333333%; }
  .xl-five-twelfths {
    width: 41.6666666667%; }
  .xl-six-twelfths {
    width: 50%; }
  .xl-seven-twelfths {
    width: 58.3333333333%; }
  .xl-eight-twelfths {
    width: 66.6666666667%; }
  .xl-nine-twelfths {
    width: 75%; }
  .xl-ten-twelfths {
    width: 83.3333333333%; }
  .xl-eleven-twelfths {
    width: 91.6666666667%; }
  .xl-twelve-twelfths {
    width: 100%; } }

/*

              Responsive widths at $breakpoint__xxl

            ---------------------------------------------------- */
@media screen and (min-width: 100em) {
  .xxl-one-whole {
    width: 100%; }
  .xxl-one-half {
    width: 50%; }
  .xxl-two-halves {
    width: 100%; }
  .xxl-one-third {
    width: 33.3333333333%; }
  .xxl-two-thirds {
    width: 66.6666666667%; }
  .xxl-three-thirds {
    width: 100%; }
  .xxl-one-fourth {
    width: 25%; }
  .xxl-two-fourths {
    width: 50%; }
  .xxl-three-fourths {
    width: 75%; }
  .xxl-four-fourths {
    width: 100%; }
  .xxl-one-fifth {
    width: 20%; }
  .xxl-two-fifths {
    width: 40%; }
  .xxl-three-fifths {
    width: 60%; }
  .xxl-four-fifths {
    width: 80%; }
  .xxl-five-fifths {
    width: 100%; }
  .xxl-one-sixth {
    width: 16.6666666667%; }
  .xxl-two-sixths {
    width: 33.3333333333%; }
  .xxl-three-sixths {
    width: 50%; }
  .xxl-four-sixths {
    width: 66.6666666667%; }
  .xxl-five-sixths {
    width: 83.3333333333%; }
  .xxl-six-sixths {
    width: 100%; }
  .xxl-one-seventh {
    width: 14.2857142857%; }
  .xxl-two-sevenths {
    width: 28.5714285714%; }
  .xxl-three-sevenths {
    width: 42.8571428571%; }
  .xxl-four-sevenths {
    width: 57.1428571429%; }
  .xxl-five-sevenths {
    width: 71.4285714286%; }
  .xxl-six-sevenths {
    width: 85.7142857143%; }
  .xxl-seven-sevenths {
    width: 100%; }
  .xxl-one-eighth {
    width: 12.5%; }
  .xxl-two-eighths {
    width: 25%; }
  .xxl-three-eighths {
    width: 37.5%; }
  .xxl-four-eighths {
    width: 50%; }
  .xxl-five-eighths {
    width: 62.5%; }
  .xxl-six-eighths {
    width: 75%; }
  .xxl-seven-eighths {
    width: 87.5%; }
  .xxl-eight-eighths {
    width: 100%; }
  .xxl-one-ninth {
    width: 11.1111111111%; }
  .xxl-two-ninths {
    width: 22.2222222222%; }
  .xxl-three-ninths {
    width: 33.3333333333%; }
  .xxl-four-ninths {
    width: 44.4444444444%; }
  .xxl-five-ninths {
    width: 55.5555555556%; }
  .xxl-six-ninths {
    width: 66.6666666667%; }
  .xxl-seven-ninths {
    width: 77.7777777778%; }
  .xxl-eight-ninths {
    width: 88.8888888889%; }
  .xxl-nine-ninths {
    width: 100%; }
  .xxl-one-tenth {
    width: 10%; }
  .xxl-two-tenths {
    width: 20%; }
  .xxl-three-tenths {
    width: 30%; }
  .xxl-four-tenths {
    width: 40%; }
  .xxl-five-tenths {
    width: 50%; }
  .xxl-six-tenths {
    width: 60%; }
  .xxl-seven-tenths {
    width: 70%; }
  .xxl-eight-tenths {
    width: 80%; }
  .xxl-nine-tenths {
    width: 90%; }
  .xxl-ten-tenths {
    width: 100%; }
  .xxl-one-eleventh {
    width: 9.0909090909%; }
  .xxl-two-elevenths {
    width: 18.1818181818%; }
  .xxl-three-elevenths {
    width: 27.2727272727%; }
  .xxl-four-elevenths {
    width: 36.3636363636%; }
  .xxl-five-elevenths {
    width: 45.4545454545%; }
  .xxl-six-elevenths {
    width: 54.5454545455%; }
  .xxl-seven-elevenths {
    width: 63.6363636364%; }
  .xxl-eight-elevenths {
    width: 72.7272727273%; }
  .xxl-nine-elevenths {
    width: 81.8181818182%; }
  .xxl-ten-elevenths {
    width: 90.9090909091%; }
  .xxl-eleven-elevenths {
    width: 100%; }
  .xxl-one-twelfth {
    width: 8.3333333333%; }
  .xxl-two-twelfths {
    width: 16.6666666667%; }
  .xxl-three-twelfths {
    width: 25%; }
  .xxl-four-twelfths {
    width: 33.3333333333%; }
  .xxl-five-twelfths {
    width: 41.6666666667%; }
  .xxl-six-twelfths {
    width: 50%; }
  .xxl-seven-twelfths {
    width: 58.3333333333%; }
  .xxl-eight-twelfths {
    width: 66.6666666667%; }
  .xxl-nine-twelfths {
    width: 75%; }
  .xxl-ten-twelfths {
    width: 83.3333333333%; }
  .xxl-eleven-twelfths {
    width: 91.6666666667%; }
  .xxl-twelve-twelfths {
    width: 100%; } }

/***

  @modules
---------------------------------------------------------

  Reusable objects that are combinations
  of elements and other modules.

  When you create a new module, make sure the partial is
  in the modules directory, and you import it below.

  Comment out any partial you don't need for this app.

---------------------------------------------------------  */
/**

   @site
--------------------------------------------------------
  modules/_site.scss
--------------------------------------------------------

  We use the naming convention of .site-* for global
  modules like the header, main, and footer.

  Sometimes it's beneficial to have a wrapping element
  around the site, directly following the . In
  this case, we call that .site.

------------------------------------------------------ */
/**

  @site-header
--------------------------------------------------------
  modules/_site-header.scss
--------------------------------------------------------

  Site-wide header

------------------------------------------------------ */
.site-header {
  zoom: 1;
  background-image: url(../images/header__image.jpg);
  background-size: cover;
  background-position: center 10%;
  background-repeat: no-repeat;
  padding-top: 5.625rem; }
  .site-header:before, .site-header:after {
    content: " ";
    display: table; }
  .site-header:after {
    clear: both; }
  @media screen and (max-width: 34.365em) {
    .site-header {
      background-size: cover; } }
  .site-header .__h1 {
    font-size: 2.8125rem;
    color: white;
    text-align: center;
    width: 37.5rem;
    margin: 3em auto;
    padding: 2.5rem 0;
    line-height: 1.1em;
    text-shadow: 0 0 38px #d6b689, 0 0 38px #d6b689, 0 0 38px #d6b689, 0 0 6px #b8854e;
    font-family: tod, serif; }
    @media screen and (max-width: 34.365em) {
      .site-header .__h1 {
        width: 100%;
        font-size: 1.875rem;
        line-height: 1.2em;
        margin: 1em auto; } }
  .site-header .__h1_sub {
    font-size: 1.625rem; }
    @media screen and (max-width: 34.365em) {
      .site-header .__h1_sub {
        font-size: 1.125rem; } }

/*

  @site-nav
--------------------------------------------------------

  The main site navigation.

-----------------------------------------------------  */
.site-nav {
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.95);
  width: 100%;
  text-align: center;
  padding: 1.125rem 0;
  position: fixed;
  top: 0;
  z-index: 1;
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.2); }
  @media screen and (max-width: 769.99px) {
    .site-nav {
      padding: 1em; } }
  .site-nav .__nav-container {
    display: inline-block;
    vertical-align: middle; }
    @media screen and (max-width: 769.99px) {
      .site-nav .__nav-container {
        display: block;
        text-align: right; } }
    .site-nav .__nav-container .__inner {
      display: table;
      width: 100%;
      position: relative; }
      .site-nav .__nav-container .__inner .burger {
        height: 100%;
        width: 3.125rem;
        background-color: black;
        top: 0;
        left: 0;
        position: absolute;
        z-index: 3;
        display: none;
        padding: 1em;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: distribute;
        align-content: space-around;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 5px; }
        @media screen and (max-width: 769.99px) {
          .site-nav .__nav-container .__inner .burger {
            display: -ms-flexbox;
            display: flex; } }
        .site-nav .__nav-container .__inner .burger .__patty {
          height: 2px;
          width: 100%;
          background-color: #fff; }
        .site-nav .__nav-container .__inner .burger .__close {
          display: none;
          width: 100%;
          font-size: 1.5em;
          color: white;
          text-align: center; }
        .site-nav .__nav-container .__inner .burger.is-close .__close {
          display: block; }
        .site-nav .__nav-container .__inner .burger.is-close .__patty {
          display: none; }
      .site-nav .__nav-container .__inner .__menus {
        display: table-cell;
        vertical-align: middle;
        font-family: tod, serif; }
        @media screen and (max-width: 769.99px) {
          .site-nav .__nav-container .__inner .__menus {
            position: fixed;
            padding: 2em;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.95);
            z-index: 2;
            display: none; } }
        .site-nav .__nav-container .__inner .__menus.is-close {
          display: block;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-direction: column;
          flex-direction: column;
          -ms-flex-pack: center;
          justify-content: center; }
        .site-nav .__nav-container .__inner .__menus .__menu {
          float: left; }
          @media screen and (max-width: 769.99px) {
            .site-nav .__nav-container .__inner .__menus .__menu {
              float: none;
              text-align: center;
              font-size: 1.125rem;
              padding: 1em;
              border-bottom: 1px solid #dedede; }
              .site-nav .__nav-container .__inner .__menus .__menu:last-child {
                border-bottom: none; } }
          .site-nav .__nav-container .__inner .__menus .__menu:after {
            content: '|';
            margin: 0 2em; }
            @media screen and (max-width: 769.99px) {
              .site-nav .__nav-container .__inner .__menus .__menu:after {
                display: none; } }
          .site-nav .__nav-container .__inner .__menus .__menu:last-child:after {
            display: none; }
      .site-nav .__nav-container .__inner .button {
        background-color: #ED9639;
        margin-left: 3em; }

/* @branding
--------------------------------------------------------

  The logo & (optional) wordmark

  Example: Branding logo
  
    
    My Company
  

------------------------------------------------------ */
.branding {
  margin: 0 auto 1.125rem;
  text-decoration: none;
  display: block;
  text-align: center; }
  @media screen and (min-width: 48em) {
    .branding {
      margin: 0;
      float: left;
      text-align: left; } }

.branding__logo {
  height: 3.375rem;
  width: 3.375rem; }
  @media screen and (min-width: 48em) {
    .branding__logo {
      float: left;
      margin-right: 1.125rem; } }

.branding__wordmark {
  font-size: 1.6875rem;
  white-space: nowrap;
  line-height: 2.25rem;
  margin: 0; }

/**

  @site-main
--------------------------------------------------------
  modules/_site-main.scss
--------------------------------------------------------

  The site's main content

------------------------------------------------------ */
.site-main {
  display: block;
  background-color: #ffffff; }

.premium-salon-section .__summary {
  margin: 0 auto;
  padding: 3.375rem 0; }
  @media screen and (max-width: 34.365em) {
    .premium-salon-section .__summary {
      padding: 2.5rem 0; } }

.premium-salon-section .__problem-section-container {
  background-image: url("../images/problem-bg.jpg");
  background-size: cover;
  background-position: 50% 50%; }
  .premium-salon-section .__problem-section-container .__problem-section {
    margin: 0 auto;
    font-family: serif; }
    .premium-salon-section .__problem-section-container .__problem-section .__problem-container {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-left: -2.25rem;
      margin-right: -2.25rem; }
      html.no-flexbox .premium-salon-section .__problem-section-container .__problem-section .__problem-container {
        display: block !important; }
      .premium-salon-section .__problem-section-container .__problem-section .__problem-container .__problem {
        padding: 2.25rem;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        font-family: tod, serif; }
        @media screen and (max-width: 34.365em) {
          .premium-salon-section .__problem-section-container .__problem-section .__problem-container .__problem {
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%; } }
        .premium-salon-section .__problem-section-container .__problem-section .__problem-container .__problem h2 {
          font-size: 1.75rem;
          margin-bottom: 1em; }
        .premium-salon-section .__problem-section-container .__problem-section .__problem-container .__problem p {
          font-size: 1.125rem; }

.voice-section .__voice-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -0.5625rem;
  margin-right: -0.5625rem;
  margin-top: -0.5625rem;
  margin-bottom: -0.5625rem; }
  html.no-flexbox .voice-section .__voice-list {
    display: block !important; }
  .voice-section .__voice-list li {
    padding: 0.5625rem;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    position: relative; }
    @media screen and (max-width: 34.365em) {
      .voice-section .__voice-list li {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%; } }
    .voice-section .__voice-list li .__voice {
      padding: 2.25rem;
      background-color: #EBEBEB;
      border-radius: 10px;
      height: 100%; }
      .voice-section .__voice-list li .__voice h2 {
        font-size: 1.25rem;
        font-weight: bold;
        margin-bottom: 1em; }

.become-member-section .__steps {
  margin: 0 auto; }
  .become-member-section .__steps .__step {
    background-color: #F1EFEB;
    border-radius: 5px;
    margin-bottom: 1.125rem;
    padding: 2.25rem; }
    .become-member-section .__steps .__step h2 {
      font-size: 1.25rem;
      margin-bottom: 1em;
      color: #ED9639;
      font-weight: bold; }
    .become-member-section .__steps .__step .__notice {
      font-size: 0.9em; }

.become-member-section .__form {
  display: inline-block; }
  @media screen and (max-width: 34.365em) {
    .become-member-section .__form {
      display: block; } }

.qa-section .__questions {
  margin: 0 auto; }

.qa-section .__question {
  margin-bottom: 2.25rem; }
  .qa-section .__question:last-child {
    margin-bottom: 0; }
  .qa-section .__question h2 {
    font-size: 1rem;
    margin-bottom: 0.6em;
    font-weight: bold; }
    .qa-section .__question h2 span {
      color: #ED9639; }

.profile-section .__profile {
  margin-bottom: 2.25rem; }
  @media screen and (max-width: 34.365em) {
    .profile-section .__profile {
      display: block; }
      .profile-section .__profile > * {
        display: block; } }
  .profile-section .__profile > * {
    vertical-align: top; }
  .profile-section .__profile .__left {
    width: 18.75rem;
    padding-right: 2em; }
    @media screen and (max-width: 34.365em) {
      .profile-section .__profile .__left {
        width: 100%;
        padding-right: 0;
        text-align: center;
        margin-bottom: 1.125rem; } }

.profile-section .__books-container h2 {
  margin-bottom: 1.125rem; }
  .profile-section .__books-container h2 span {
    background-color: black;
    color: white;
    font-size: 1rem;
    display: inline-block;
    padding: 0.5em 2em; }

.profile-section .__books-container .__books {
  overflow: hidden;
  margin-left: -1.125rem; }
  .profile-section .__books-container .__books .__book {
    float: left;
    width: 14.2857143%;
    padding-left: 1.125rem;
    padding-bottom: 0.5rem; }
    .profile-section .__books-container .__books .__book img {
      border: solid 1px #cecdcd; }
    @media screen and (max-width: 34.365em) {
      .profile-section .__books-container .__books .__book {
        width: 50%;
        margin-bottom: 1.125rem; } }

/**

  @site-footer
--------------------------------------------------------
  modules/_site-footer.scss
--------------------------------------------------------

  The site's global footer

------------------------------------------------------ */
.site-footer {
  padding: 2.25rem 0;
  border-top: 1px solid #EBEBEB;
  background: #252525;
  text-align: center;
  color: #fff;
  font-size: 0.9em; }
  .site-footer .__links {
    display: inline-block;
    list-style: none;
    zoom: 1; }
    .site-footer .__links:before, .site-footer .__links:after {
      content: " ";
      display: table; }
    .site-footer .__links:after {
      clear: both; }
    .site-footer .__links > li {
      float: left;
      margin-right: 1em; }
      .site-footer .__links > li.last, .site-footer .__links > li:last-child {
        margin-right: 0; }
    @media screen and (max-width: 34.365em) {
      .site-footer .__links .__link {
        width: 100%;
        margin-right: 0; } }

/**

  @pages
--------------------------------------------------------
  modules/_pages.scss
--------------------------------------------------------

  Pages contain content and can have styled headers
  and footers if you choose.

-----------------------------------------------------  */
.page__header {
  padding: 1.125rem 0;
  margin-bottom: 1.125rem;
  background: rgba(0, 0, 0, 0.025);
  border-bottom: 1px solid #EBEBEB; }

/**

  @alerts
---------------------------------------------------------
  modules/_alerts.scss
--------------------------------------------------------

  Alerts are UI elements that give important info

  Example: Error
  
    ×
    Uh oh - something went wrong
  

  Example: Warning
  
    ×
    Shake it fast, but watch yourself.
  

  Example: Success
  
    ×
    The secret to my success is that I learn, 25 hours a day!
  

  Example: Info
  
    ×
    Did you ever know that you're my hero?
  

  NOTE: The code below uses declared color units, if you'd
        prefer, declare those as variables in _vars.scss

------------------------------------------------------ */
.alert {
  position: relative;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 2.25rem;
  padding: .5rem 4rem .5rem .5rem;
  line-height: 1.25; }
  .alert p {
    margin: 0; }
  .alert .btn__close {
    position: absolute;
    top: 50%;
    margin-top: -.75em;
    right: 1em;
    opacity: .5;
    transition: all .3s;
    text-decoration: none; }
    .alert .btn__close:hover {
      opacity: 1; }

.alert--error {
  color: #e04646;
  border-color: #e04646;
  background: #ffe6e6; }
  .alert--error .btn__close {
    color: #e04646; }
  .alert--error:after {
    border-color: #e04646; }

.alert--warning {
  color: #b29804;
  border-color: #b29804;
  background: #fcf7d8; }
  .alert--warning .btn__close {
    color: #b29804; }
  .alert--warning:after {
    border-color: #b29804; }

.alert--info {
  color: #537df6;
  border-color: #537df6;
  background: #e8f3ff; }
  .alert--info .btn__close {
    color: #537df6; }
  .alert--info:after {
    border-color: #537df6; }

.alert--success {
  color: #0ca129;
  border-color: #0ca129;
  background: #dafce1; }
  .alert--success .btn__close {
    color: #0ca129; }
  .alert--success:after {
    border-color: #0ca129; }

/**

  @blocks
--------------------------------------------------------
  modules/_blocks.scss
--------------------------------------------------------

  Blocks contain sections of content.  Blocks can have
  different visual styling, but usually have the same
  structure; one spacing unit margin at the bottom,
  and some have borders, and padding, etc.

-----------------------------------------------------  */
.block {
  margin-bottom: 2.25rem; }

.block--ends {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem; }

.section-inner {
  padding-top: 3.375rem;
  padding-bottom: 3.375rem;
  overflow: hidden; }
  @media screen and (max-width: 34.365em) {
    .section-inner {
      padding-top: 2.25rem;
      padding-bottom: 2.25rem; } }

/**

  @callouts
--------------------------------------------------------
  modules/_callouts.scss
--------------------------------------------------------

  Callouts, are sections of featured content that usually 
  contain an icon, a title, and some text. These are 
  usually in a row, and call attention to highlighted features.

  Example: Callout
  
    
    Feature
    This callout is very impressive, and should command your attention
  

-----------------------------------------------------  */
.callout {
  text-align: center; }

.callout__media {
  display: block;
  margin: 0 auto 1.125rem;
  max-height: 3em;
  width: auto; }

.callout__title {
  font-size: 1.5em; }

/**

  @heroes
--------------------------------------------------------
  modules/_heroes.scss
--------------------------------------------------------

  Just your everyday, normal hero.  Contains a div that has
  the media (video or image) in the background, and a div
  for the main content.

  Example: Hero
  
    
      This is the leadin
      Name Here
    
  
------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 2.25rem; }

.hero__media {
  position: relative;
  z-index: 200; }

.hero__main {
  position: absolute;
  z-index: 210;
  width: 100%;
  top: 50%;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
  font-size: .75em; }
  @media screen and (min-width: 34.375em) {
    .hero__main {
      font-size: 1em; } }
  @media screen and (min-width: 64em) {
    .hero__main {
      font-size: 1.25em; } }

/**

  @modals
---------------------------------------------------------
  modules/_modals.scss
--------------------------------------------------------

  These are very basic modals, which simply cover the entire
  viewport from top to bottom, left to right.  Feel free
  to edit the styles of modals to suit your needs.

--------------------------------------------------------- */
.modal {
  position: fixed;
  z-index: 200;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.96);
  display: none; }

.modal__container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: table;
  height: 100%;
  padding: 1.125rem; }

.modal__close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0.37125rem 0.37125rem 0 0;
  font-size: 3em;
  border: none;
  background: none;
  display: block; }
  .modal__close:hover, .modal__close:focus {
    outline: none;
    border: none;
    opacity: .85; }
  .modal__close:active {
    opacity: .6; }

.modal__body {
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle; }
  .modal__body p {
    margin-bottom: 1em;
    font-size: 1.5em; }

/**

  @thumbnails
--------------------------------------------------------
  modules/_thumbnails.scss
--------------------------------------------------------

  Thumbnails are usually found within a grid or gallery,
  as a teaser or preview of more content. The common
  use is to have an image on top of a title and text
  below, while the entire thumbnail is an anchor link.

  Example: Thumbnail
  
    
    
      A caption title here
      Some more text follows to tease the rest of
      the content
    
  

-----------------------------------------------------  */
.thumbnail {
  display: block;
  padding: 0.5625rem;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.15);
  text-decoration: none; }

.thumbnail__media {
  margin-bottom: 0.5625rem; }

.thumbnail__caption {
  font-size: 85%; }
  .thumbnail__caption h1, .thumbnail__caption h2, .thumbnail__caption h3, .thumbnail__caption h4, .thumbnail__caption h5, .thumbnail__caption h5 {
    margin-bottom: 0.28125rem; }

/**

  @video
--------------------------------------------------------
  modules/_video-embeds.scss
--------------------------------------------------------

  Video Embeds

-----------------------------------------------------  */
.video-embed {
  display: block;
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 66.666%; }
  .video-embed iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100% !important;
    width: 100% !important; }

.iconfont, .icon-right-circle:after, .button:after, .icon-cancel:after {
  font-family: iconfont; }

.icon-right-circle:after, .button:after {
  content: '\e800'; }

.icon-cancel:after {
  content: '\e801'; }

/*# sourceMappingURL=app.css.map */