li:last-child:after {
display: none; }
/*------------------------------------*\
$MEDIA
\*------------------------------------*/
/**
* Place any image- and text-like content side-by-side, as per:
* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
* E.g.:
*
*
* Demo: jsfiddle.net/inuitcss/cf4Qs
*
*/
.media {
display: block; }
.media__img {
float: left;
margin-right: 20px; }
/**
* Reversed image location (right instead of left).
*/
.media__img--rev {
float: right;
margin-left: 20px; }
.media__img img,
.media__img--rev img {
display: block; }
.media__body {
overflow: hidden; }
.media__body,
.media__body > :last-child {
margin-bottom: 0; }
/**
* `.img`s in `.islet`s need an appropriately sized margin.
*/
.islet .media__img {
margin-right: 10px; }
.islet .media__img--rev {
margin-left: 10px; }
/*------------------------------------*\
$ISLAND
\*------------------------------------*/
/**
* Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
* E.g.:
*
I am boxed off.
*
* Demo: jsfiddle.net/inuitcss/u8pV3
*
*/
.island,
.islet {
display: block; }
.island {
padding: 20px; }
.island > :last-child,
.islet > :last-child {
margin-bottom: 0; }
/**
* Just like `.island`, only smaller.
*/
.islet {
padding: 10px; }
/*------------------------------------*\
$BLOCK-LIST
\*------------------------------------*/
/**
* Create big blocky lists of content, e.g.:
*
*
* Extend this object in your theme stylesheet.
*
* Demo: jsfiddle.net/inuitcss/hR57q
*
*/
.block-list, .matrix,
.block-list > li,
.matrix > li {
border: 0 solid #E8E8E8; }
.block-list, .matrix {
list-style: none;
margin-left: 0;
border-top-width: 1px; }
.block-list > li, .matrix > li {
border-bottom-width: 1px;
padding: 10px; }
.block-list__link, .matrix__link {
display: block;
padding: 10px;
margin: -10px; }
/*------------------------------------*\
$MATRIX
\*------------------------------------*/
/**
* Create a grid of items out of a single list, e.g.:
*
*
* Extend this object in your theme stylesheet.
*
* Demo: jsfiddle.net/inuitcss/Y2zrU
*
*/
.matrix {
border-left-width: 1px; }
.matrix > li {
float: left;
border-right-width: 1px; }
/**
* The `.multi-list` object is a lot like the `.matrix` object only without the
* blocky borders and padding.
*
*
* Demo: jsfiddle.net/inuitcss/Y2zrU
*
*/
.multi-list {
list-style: none;
margin-left: 0; }
.multi-list > li {
float: left; }
/**
* Apply these classes alongside the `.matrix` or `.multi-list` classes on
* lists to determine how wide their columns are.
*/
.two-cols > li {
width: 50%; }
.three-cols > li {
width: 33.333%; }
.four-cols > li {
width: 25%; }
.five-cols > li {
width: 20%; }
/**
* Unfortunately we have to qualify this selector in order to bring its
* specificity above the `.[number]-cols > li` selectors above.
*/
.matrix > .all-cols,
.multi-list > .all-cols {
width: 100%; }
/*------------------------------------*\
$FLYOUT
\*------------------------------------*/
/**
* Flyouts are pieces of content that fly out of a parent when said parent is
* hovered. They typically appear bottom-left of the parent.
*
*
* Extend these objects in your theme stylesheet.
*
* Demo: jsfiddle.net/inuitcss/B52HG
*
*/
.flyout,
.flyout--alt {
position: relative;
overflow: hidden; }
.flyout__content {
/**
* Position the flyouts off-screen. This is typically better than
* `display:none;`.
*/
position: absolute;
top: 100%;
left: -99999px; }
/**
* Bring the flyouts into view when you hover their parents.
* Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
* (`.flyout--alt`).
*/
.flyout:hover,
.flyout--alt:hover {
overflow: visible; }
/**
* Regular flyouts sit all the way from the top, flush left.
*/
.flyout:hover > .flyout__content {
left: 0; }
/**
* Alternative flyouts sit all the way from the left, flush top.
*/
.flyout--alt:hover > .flyout__content {
top: 0;
left: 100%; }
/*------------------------------------*\
$SPRITE
\*------------------------------------*/
/**
* Giving an element a class of `.sprite` will throw it into ‘sprite’ mode and apply
* a background image e.g.:
*
More info…
*
* or
*
Help and FAQ
*
* Giving an element a class of `.icon` will throw it into ‘icon’ mode and will
* not add a background, but should be used for icon fonts and is populated
* through a `data-icon` attribute and the `:after` pseudo-element, e.g.:
*
View your favourites
*
* Where ‘’ might map to a star in your particular icon font.
*
* These all require extension in your theme stylesheet, e.g. in your own CSS:
*
.sprite{
background-image:url(path/to/your/sprite.png);
}
.sprite--link{ background-position:0 0 ; }
.sprite--star{ background-position:0 -16px; }
*
* Demo: jsfiddle.net/inuitcss/6TKuS
*
*/
.sprite,
.icon,
.sprite--generated {
display: inline-block;
line-height: 1;
position: relative;
vertical-align: middle;
zoom: 1;
/**
* So using `.icon` on certain elements doesn’t make a visual difference.
*/
font-style: normal;
font-weight: normal;
/**
* So icons added using `.icon` sit in the centre of the element.
*/
text-align: center; }
.sprite {
/**
* The typical size of most icons. Override in your theme stylesheet.
*/
width: 16px;
height: 16px;
top: -1px;
/*
* H5BP method image replacement:
* github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
*/
overflow: hidden;
*text-indent: -9999px; }
.sprite:before, .sprite--generated:before {
content: "";
display: block;
width: 0;
height: 100%; }
/**
* Set up icon font
*/
.icon, .sprite--generated {
font-size: 16px;
/**
* Place the icon in a box the exact same dimensions as the icon itself.
*/
width: 1em;
height: 1em; }
.icon:before, .sprite--generated:before {
content: attr(data-icon); }
/**
* Icon size modifiers.
*/
.icon--large {
font-size: 32px; }
.icon--huge {
font-size: 64px; }
.icon--natural {
font-size: inherit; }
/*------------------------------------*\
$BEAUTONS.CSS
\*------------------------------------*/
/**
* beautons is a beautifully simple button toolkit.
*
* LICENSE
*
* Copyright 2013 Harry Roberts
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
/*!*
*
* @csswizardry -- csswizardry.com/beautons
*
*/
/*------------------------------------*\
$BASE
\*------------------------------------*/
/**
* Base button styles.
*
* 1. Allow us to better style box model properties.
* 2. Line different sized buttons up a little nicer.
* 3. Stop buttons wrapping and looking broken.
* 4. Make buttons inherit font styles.
* 5. Force all elements using beautons to appear clickable.
* 6. Normalise box model styles.
* 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
* there is 1em of space above and below that text. We therefore apply 1em
* of space to the left and right, as padding, to keep consistent spacing.
* 8. Basic cosmetics for default buttons. Change or override at will.
* 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
*/
.btn {
display: inline-block;
/* [1] */
vertical-align: middle;
/* [2] */
white-space: nowrap;
/* [3] */
font-family: inherit;
/* [4] */
font-size: 100%;
/* [4] */
cursor: pointer;
/* [5] */
border: none;
/* [6] */
margin: 0;
/* [6] */
padding-top: 0;
/* [6] */
padding-bottom: 0;
/* [6] */
line-height: 3;
/* [7] */
padding-right: 1em;
/* [7] */
padding-left: 1em;
/* [7] */
border-radius: 4px;
/* [8] */ }
.btn, .btn:hover {
text-decoration: none;
/* [9] */ }
.btn:active, .btn:focus {
outline: none; }
/*------------------------------------*\
$SIZES
\*------------------------------------*/
/**
* Button size modifiers.
*
* These all follow the same sizing rules as above; text is 1em, space around it
* remains uniform.
*/
.btn--small {
padding-right: 0.5em;
padding-left: 0.5em;
line-height: 2; }
.btn--large {
padding-right: 1.5em;
padding-left: 1.5em;
line-height: 4; }
.btn--huge {
padding-right: 2em;
padding-left: 2em;
line-height: 5; }
/**
* These buttons will fill the entirety of their container.
*
* 1. Remove padding so that widths and paddings don’t conflict.
*/
.btn--full {
width: 100%;
padding-right: 0;
/* [1] */
padding-left: 0;
/* [1] */
text-align: center; }
/*------------------------------------*\
$FONT-SIZES
\*------------------------------------*/
/**
* Button font-size modifiers.
*/
.btn--alpha {
font-size: 3rem; }
.btn--beta {
font-size: 2rem; }
.btn--gamma {
font-size: 1rem; }
/**
* Make the button inherit sizing from its parent.
*/
.btn--natural {
vertical-align: baseline;
font-size: inherit;
line-height: inherit;
padding-right: 0.5em;
padding-left: 0.5em; }
/*------------------------------------*\
$FUNCTIONS
\*------------------------------------*/
/**
* Button function modifiers.
*/
/**
* Positive actions; e.g. sign in, purchase, submit, etc.
*/
.btn--positive {
background-color: #4A993E;
color: #fff; }
/**
* Negative actions; e.g. close account, delete photo, remove friend, etc.
*/
.btn--negative {
background-color: #b33630;
color: #fff; }
/**
* Inactive, disabled buttons.
*
* 1. Make the button look like normal text when hovered.
*/
.btn--inactive,
.btn--inactive:hover,
.btn--inactive:active,
.btn--inactive:focus {
background-color: #ddd;
color: #777;
cursor: text;
/* [1] */ }
/*------------------------------------*\
$STYLES
\*------------------------------------*/
/**
* Button style modifiers.
*
* 1. Use an overly-large number to ensure completely rounded, pill-like ends.
*/
.btn--soft {
border-radius: 200px;
/* [1] */ }
.btn--hard {
border-radius: 0; }
/*------------------------------------*\
$RULES
\*------------------------------------*/
/**
* Horizontal rules, extend `hr`.
*
* Demo: jsfiddle.net/inuitcss/L6GuZ
*
*/
.rule, .lined-content hr {
color: #E8E8E8;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
margin-bottom: 19px;
margin-bottom: 1.26667rem; }
/**
* Dotted rules
*/
.rule--dotted {
border-bottom-style: dotted; }
/**
* Dashed rules
*/
.rule--dashed {
border-bottom-style: dashed; }
/**
* Ornamental rules. Places a § over the rule.
*/
.rule--ornament {
position: relative;
/**
* Pass in an arbitrary ornament though a data attribute, e.g.:
*
*
*/ }
.rule--ornament:after {
content: "\00A7";
position: absolute;
top: 0;
right: 0;
left: 0;
line-height: 0;
text-align: center; }
.rule--ornament[data-ornament]:after {
content: attr(data-ornament); }
/**
* Style trumps; helper and brand classes
*/
/*------------------------------------*\
$WIDTHS
\*------------------------------------*/
/**
* Sizes in human readable format. These are used in conjunction with other
* objects and abstractions found in inuit.css, most commonly the grid system
* and faux flexbox.
*
* We have a mixin to generate our widths and their breakpoint-specific
* variations.
*/
/**
* Whole
*/
.one-whole {
width: 100%; }
/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
width: 50%; }
/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths {
width: 33.333%; }
.two-thirds, .four-sixths, .eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths {
width: 25%; }
.three-quarters, .six-eighths, .nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.one-fifth, .two-tenths {
width: 20%; }
.two-fifths, .four-tenths {
width: 40%; }
.three-fifths, .six-tenths {
width: 60%; }
.four-fifths, .eight-tenths {
width: 80%; }
/**
* Sixths
*/
.one-sixth, .two-twelfths {
width: 16.666%; }
.five-sixths, .ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.one-eighth {
width: 12.5%; }
.three-eighths {
width: 37.5%; }
.five-eighths {
width: 62.5%; }
.seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.one-tenth {
width: 10%; }
.three-tenths {
width: 30%; }
.seven-tenths {
width: 70%; }
.nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.one-twelfth {
width: 8.333%; }
.five-twelfths {
width: 41.666%; }
.seven-twelfths {
width: 58.333%; }
.eleven-twelfths {
width: 91.666%; }
/**
* If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
* access to these classes. You can define at which breakpoint you’d like an
* element to be a certain size, e.g.:
*
* ` ...
`
*
* This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
* horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
* at ‘mobile’ sizes.
*
* Demo: jsfiddle.net/inuitcss/WS4Ge
*
*/
/* endif */
/*------------------------------------*\
$PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$PULL
\*------------------------------------*/
/**
* Pull classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$BRAND
\*------------------------------------*/
/**
* `.brand` is a quick and simple way to apply your brand face and/or color to
* any element using a handy helper class.
*/
.brand {
font-family: Helvetica Neue, sans-serif!important;
color: #4a8ec2!important; }
.brand-face {
font-family: Helvetica Neue, sans-serif!important; }
.brand-color,
.brand-colour {
color: #4a8ec2!important; }
/*------------------------------------*\
$HELPER
\*------------------------------------*/
/**
* A series of helper classes to use arbitrarily. Only use a helper class if an
* element/component doesn’t already have a class to which you could apply this
* styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
* that ruleset as opposed to adding the `.float--left` class to the markup.
*
* A lot of these classes carry `!important` as you will always want them to win
* out over other selectors.
*/
/**
* Add/remove floats
*/
.float--right {
float: right !important; }
.float--left {
float: left !important; }
.float--none {
float: none !important; }
/**
* Text alignment
*/
.text--left {
text-align: left !important; }
.text--center {
text-align: center !important; }
.text--right {
text-align: right !important; }
/**
* Add/remove margins
*/
.push {
margin: 20px !important; }
.push--top {
margin-top: 20px !important; }
.push--right {
margin-right: 20px !important; }
.push--bottom {
margin-bottom: 20px !important; }
.push--left {
margin-left: 20px !important; }
.push--ends {
margin-top: 20px !important;
margin-bottom: 20px !important; }
.push--sides {
margin-right: 20px !important;
margin-left: 20px !important; }
.push-half {
margin: 10px !important; }
.push-half--top {
margin-top: 10px !important; }
.push-half--right {
margin-right: 10px !important; }
.push-half--bottom {
margin-bottom: 10px !important; }
.push-half--left {
margin-left: 10px !important; }
.push-half--ends {
margin-top: 10px !important;
margin-bottom: 10px !important; }
.push-half--sides {
margin-right: 10px !important;
margin-left: 10px !important; }
.flush {
margin: 0 !important; }
.flush--top {
margin-top: 0 !important; }
.flush--right {
margin-right: 0 !important; }
.flush--bottom {
margin-bottom: 0 !important; }
.flush--left {
margin-left: 0 !important; }
.flush--ends {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.flush--sides {
margin-right: 0 !important;
margin-left: 0 !important; }
/**
* Add/remove paddings
*/
.soft {
padding: 20px !important; }
.soft--top {
padding-top: 20px !important; }
.soft--right {
padding-right: 20px !important; }
.soft--bottom {
padding-bottom: 20px !important; }
.soft--left {
padding-left: 20px !important; }
.soft--ends {
padding-top: 20px !important;
padding-bottom: 20px !important; }
.soft--sides {
padding-right: 20px !important;
padding-left: 20px !important; }
.soft-half {
padding: 10px !important; }
.soft-half--top {
padding-top: 10px !important; }
.soft-half--right {
padding-right: 10px !important; }
.soft-half--bottom {
padding-bottom: 10px !important; }
.soft-half--left {
padding-left: 10px !important; }
.soft-half--ends {
padding-top: 10px !important;
padding-bottom: 10px !important; }
.soft-half--sides {
padding-right: 10px !important;
padding-left: 10px !important; }
.hard {
padding: 0 !important; }
.hard--top {
padding-top: 0 !important; }
.hard--right {
padding-right: 0 !important; }
.hard--bottom {
padding-bottom: 0 !important; }
.hard--left {
padding-left: 0 !important; }
.hard--ends {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.hard--sides {
padding-right: 0 !important;
padding-left: 0 !important; }
/**
* Pull items full width of `.island` parents.
*/
.full-bleed {
margin-right: -20px !important;
margin-left: -20px !important; }
.islet .full-bleed {
margin-right: -10px !important;
margin-left: -10px !important; }
/**
* Add a help cursor to any element that gives the user extra information on
* `:hover`.
*/
.informative {
cursor: help !important; }
/**
* Mute an object by reducing its opacity.
*/
.muted {
opacity: 0.5 !important;
filter: alpha(opacity=50) !important; }
/**
* Align items to the right where they imply progression/movement forward, e.g.:
*
Read more...
*
*/
.proceed {
text-align: right !important; }
/**
* Add a right-angled quote to links that imply movement, e.g.:
*
Read more
*
*/
.go:after {
content: " " "»" !important; }
/**
* Apply capital case to an element (usually a `strong`).
*/
.caps {
text-transform: uppercase !important; }
/**
* Hide content off-screen without resorting to `display:none;`, also provide
* breakpoint specific hidden elements.
*/
.accessibility,
.visuallyhidden {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }
/* endif */
/**
* She’s all yours, cap’n... Begin importing your stuff here.
*/
/* -- ui/standard-theme.scss contains @includes for all the basic lemoncake ui components -- */
/*------------------------------------*\
$STANDARD-THEME
\*------------------------------------*/
/**
* This is the standard parallax theme
*
* It contains all the UI componets used to extend the inuit framework and compiles them when called by style.scss
**/
/*------------------------------------*\
$FRAMEWORK
\*------------------------------------*/
h1, .alpha {
color: #444444;
font-weight: normal;
line-height: 120%; }
h1 a:hover, .alpha a:hover {
color: #666666; }
h2, .beta {
color: #444444;
font-weight: normal;
line-height: 130%; }
h2 a:hover, .beta a:hover {
color: #666666; }
h3, .gamma {
color: #444444;
line-height: 150%; }
h3 a:hover, .gamma a:hover {
color: #666666; }
h4, .delta {
color: #444444; }
h4 a:hover, .delta a:hover {
color: #666666; }
h5, .epsilon {
color: #444444; }
h5 a:hover, .epsilon a:hover {
color: #666666; }
h6, .zeta {
color: #444444; }
h6 a:hover, .zeta a:hover {
color: #666666; }
html {
color: #666666; }
/* Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.site-logo {
width: 157px;
height: 26px;
background: transparent url(../img/logo@2x.png) no-repeat center center;
background-size: 100% 100%; }
.site-logo img {
display: none; } }
.header__blur {
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
z-index: 98;
height: 70px;
text-align: center;
background: white; }
.header__blur__image {
width: 100%;
height: 100%;
overflow: hidden; }
.header__blur__image img {
max-width: none;
position: relative;
top: 100%;
z-index: 9999; }
.header__blur__bg {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.header__blur__bg__cover {
position: absolute;
left: 0;
width: 100%;
height: 15px;
z-index: 99999; }
.header__blur__bg.blurred {
-webkit-filter: blur(3px);
filter: blur(3px); }
.main-header {
background-color: white;
background-color: rgba(255, 255, 255, 0.95);
border-bottom: solid 1px #E4E4E4; }
.main-header--blurred {
background: rgba(255, 255, 255, 0.7) !important; }
.generic-page {
padding-right: 20px;
padding-left: 20px; }
.generic-page .generic-page__nav {
width: 100%; }
.generic-page .generic-page__main {
width: 100%; }
.site-section {
width: 100%;
float: left; }
.site-section--f6f6f6 {
background-color: #F6F6F6; }
.site-footer {
padding-top: 30px; }
.nav--footer li {
width: 33.33333%;
float: left;
display: inline-block;
text-align: center; }
.nav--footer .separator {
display: none; }
.back-to-top {
position: absolute;
top: 0;
right: 0;
display: none; }
.email-updates__input {
width: 100%;
float: none;
text-align: center;
margin-bottom: 10px; }
.email-updates__input input {
width: 80%;
max-width: 310px;
margin-right: auto;
margin-left: auto;
position: relative;
color: white;
font-style: normal;
float: none; }
.email-updates__submit {
width: 100%;
float: none;
text-align: center;
margin-bottom: 10px; }
.email-updates__submit input {
float: left;
margin-left: 5px; }
.site-footer-social {
width: 100%;
text-align: center;
margin-bottom: 10px; }
.site-copyright {
font-size: 0.8666666667em; }
::selection {
background: #00EBBE;
color: white; }
::-moz-selection {
background: #00EBBE;
color: white; }
/*------------------------------------*\
$VIDEOS
\*------------------------------------*/
/**
*
* For