.color-primary {
color: var(--color-brand, #0096fa);
}
.color-primary-dark {
color: var(--color-brand, #0096fa);
}
.white {
color: var(--color-surface-1, #f6f6f6);
}
.gray-1 {
color: var(--color-surface-2, #e0e0e0);
}
.gray-2 {
color: var(--color-surface-3, #cfcfcf);
}
.gray-3 {
color: var(--color-content-disable, #636363);
}
/*
CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
.ss-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left;
}
.ss-content {
height: 100%;
width: calc(100% + 18px);
padding: 0 0 0 0;
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ss-content.rtl {
width: calc(100% + 18px);
right: auto;
}
.ss-scroll {
position: relative;
background: rgba(0, 0, 0, 0.3);
width: 9px;
border-radius: 4px;
top: 0;
z-index: 2;
cursor: pointer;
-webkit-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
.ss-hidden {
display: none;
}
.ss-grabbed {
-o-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.color-primary {
color: var(--color-brand, #0096fa);
}
.color-primary-dark {
color: var(--color-brand, #0096fa);
}
.white {
color: var(--color-surface-1, #f6f6f6);
}
.gray-1 {
color: var(--color-surface-2, #e0e0e0);
}
.gray-2 {
color: var(--color-surface-3, #cfcfcf);
}
.gray-3 {
color: var(--color-content-disable, #636363);
}
body {
background: var(--color-surface-2, #e0e0e0);
}
button:focus {
outline: 0;
}
.fade-enter-active, .fade-leave-active {
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
/*
CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
/*
ASPECT RATIOS
*/
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
* Make sure there are no height and width attributes on the embedded media.
* Adapted from: https://github.com/suitcss/components-flex-embed
*
* Example:
*
*
*
*
*
* */
.aspect-ratio {
height: 0;
position: relative;
}
.aspect-ratio--16x9 {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16 {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3 {
padding-bottom: 75%;
}
.aspect-ratio--3x4 {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4 {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6 {
padding-bottom: 150%;
}
.aspect-ratio--8x5 {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8 {
padding-bottom: 160%;
}
.aspect-ratio--7x5 {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7 {
padding-bottom: 140%;
}
.aspect-ratio--1x1 {
padding-bottom: 100%;
}
.aspect-ratio--object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
@media screen and (min-width: 30em) {
.aspect-ratio-ns {
height: 0;
position: relative;
}
.aspect-ratio--16x9-ns {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-ns {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-ns {
padding-bottom: 75%;
}
.aspect-ratio--3x4-ns {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-ns {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-ns {
padding-bottom: 150%;
}
.aspect-ratio--8x5-ns {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-ns {
padding-bottom: 160%;
}
.aspect-ratio--7x5-ns {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-ns {
padding-bottom: 140%;
}
.aspect-ratio--1x1-ns {
padding-bottom: 100%;
}
.aspect-ratio--object-ns {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.aspect-ratio-m {
height: 0;
position: relative;
}
.aspect-ratio--16x9-m {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-m {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-m {
padding-bottom: 75%;
}
.aspect-ratio--3x4-m {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-m {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-m {
padding-bottom: 150%;
}
.aspect-ratio--8x5-m {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-m {
padding-bottom: 160%;
}
.aspect-ratio--7x5-m {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-m {
padding-bottom: 140%;
}
.aspect-ratio--1x1-m {
padding-bottom: 100%;
}
.aspect-ratio--object-m {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
@media screen and (min-width: 60em) {
.aspect-ratio-l {
height: 0;
position: relative;
}
.aspect-ratio--16x9-l {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-l {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-l {
padding-bottom: 75%;
}
.aspect-ratio--3x4-l {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-l {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-l {
padding-bottom: 150%;
}
.aspect-ratio--8x5-l {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-l {
padding-bottom: 160%;
}
.aspect-ratio--7x5-l {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-l {
padding-bottom: 140%;
}
.aspect-ratio--1x1-l {
padding-bottom: 100%;
}
.aspect-ratio--object-l {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
/*
IMAGES
Docs: http://tachyons.io/docs/elements/images/
*/
/* Responsive images! */
img {
max-width: 100%;
}
/*
BACKGROUND SIZE
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
Often used in combination with background image set as an inline style
on an html element.
*/
.cover {
background-size: cover !important;
}
.contain {
background-size: contain !important;
}
@media screen and (min-width: 30em) {
.cover-ns {
background-size: cover !important;
}
.contain-ns {
background-size: contain !important;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.cover-m {
background-size: cover !important;
}
.contain-m {
background-size: contain !important;
}
}
@media screen and (min-width: 60em) {
.cover-l {
background-size: cover !important;
}
.contain-l {
background-size: contain !important;
}
}
/*
BACKGROUND POSITION
Base:
bg = background
Modifiers:
-center = center center
-top = top center
-right = center right
-bottom = bottom center
-left = center left
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bg-center {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left {
background-repeat: no-repeat;
background-position: center left;
}
@media screen and (min-width: 30em) {
.bg-center-ns {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-ns {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-ns {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-ns {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-ns {
background-repeat: no-repeat;
background-position: center left;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.bg-center-m {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-m {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-m {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-m {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-m {
background-repeat: no-repeat;
background-position: center left;
}
}
@media screen and (min-width: 60em) {
.bg-center-l {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-l {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-l {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-l {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-l {
background-repeat: no-repeat;
background-position: center left;
}
}
/*
OUTLINES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.outline {
outline: 1px solid;
}
.outline-transparent {
outline: 1px solid transparent;
}
.outline-0 {
outline: 0;
}
@media screen and (min-width: 30em) {
.outline-ns {
outline: 1px solid;
}
.outline-transparent-ns {
outline: 1px solid transparent;
}
.outline-0-ns {
outline: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.outline-m {
outline: 1px solid;
}
.outline-transparent-m {
outline: 1px solid transparent;
}
.outline-0-m {
outline: 0;
}
}
@media screen and (min-width: 60em) {
.outline-l {
outline: 1px solid;
}
.outline-transparent-l {
outline: 1px solid transparent;
}
.outline-0-l {
outline: 0;
}
}
/*
BORDERS
Docs: http://tachyons.io/docs/themes/borders/
Base:
b = border
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ba {
border-style: solid;
border-width: 1px;
}
.bt {
border-top-style: solid;
border-top-width: 1px;
}
.br {
border-right-style: solid;
border-right-width: 1px;
}
.bb {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl {
border-left-style: solid;
border-left-width: 1px;
}
.bn {
border-style: none;
border-width: 0;
}
@media screen and (min-width: 30em) {
.ba-ns {
border-style: solid;
border-width: 1px;
}
.bt-ns {
border-top-style: solid;
border-top-width: 1px;
}
.br-ns {
border-right-style: solid;
border-right-width: 1px;
}
.bb-ns {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-ns {
border-left-style: solid;
border-left-width: 1px;
}
.bn-ns {
border-style: none;
border-width: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ba-m {
border-style: solid;
border-width: 1px;
}
.bt-m {
border-top-style: solid;
border-top-width: 1px;
}
.br-m {
border-right-style: solid;
border-right-width: 1px;
}
.bb-m {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-m {
border-left-style: solid;
border-left-width: 1px;
}
.bn-m {
border-style: none;
border-width: 0;
}
}
@media screen and (min-width: 60em) {
.ba-l {
border-style: solid;
border-width: 1px;
}
.bt-l {
border-top-style: solid;
border-top-width: 1px;
}
.br-l {
border-right-style: solid;
border-right-width: 1px;
}
.bb-l {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-l {
border-left-style: solid;
border-left-width: 1px;
}
.bn-l {
border-style: none;
border-width: 0;
}
}
/*
BORDER RADIUS
Docs: http://tachyons.io/docs/themes/border-radius/
Base:
br = border-radius
Modifiers:
0 = 0/none
1 = 1st step in scale
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
Literal values:
-100 = 100%
-pill = 9999px
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.br0 {
border-radius: 0;
}
.br1 {
border-radius: .125rem;
}
.br2 {
border-radius: .25rem;
}
.br3 {
border-radius: .5rem;
}
.br4 {
border-radius: 1rem;
}
.br-100 {
border-radius: 100%;
}
.br-pill {
border-radius: 9999px;
}
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@media screen and (min-width: 30em) {
.br0-ns {
border-radius: 0;
}
.br1-ns {
border-radius: .125rem;
}
.br2-ns {
border-radius: .25rem;
}
.br3-ns {
border-radius: .5rem;
}
.br4-ns {
border-radius: 1rem;
}
.br-100-ns {
border-radius: 100%;
}
.br-pill-ns {
border-radius: 9999px;
}
.br--bottom-ns {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-ns {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.br0-m {
border-radius: 0;
}
.br1-m {
border-radius: .125rem;
}
.br2-m {
border-radius: .25rem;
}
.br3-m {
border-radius: .5rem;
}
.br4-m {
border-radius: 1rem;
}
.br-100-m {
border-radius: 100%;
}
.br-pill-m {
border-radius: 9999px;
}
.br--bottom-m {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-m {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-m {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-m {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 60em) {
.br0-l {
border-radius: 0;
}
.br1-l {
border-radius: .125rem;
}
.br2-l {
border-radius: .25rem;
}
.br3-l {
border-radius: .5rem;
}
.br4-l {
border-radius: 1rem;
}
.br-100-l {
border-radius: 100%;
}
.br-pill-l {
border-radius: 9999px;
}
.br--bottom-l {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-l {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-l {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
/*
BORDER STYLES
Docs: http://tachyons.io/docs/themes/borders/
Depends on base border module in _borders.css
Base:
b = border-style
Modifiers:
--none = none
--dotted = dotted
--dashed = dashed
--solid = solid
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.b--dotted {
border-style: dotted;
}
.b--dashed {
border-style: dashed;
}
.b--solid {
border-style: solid;
}
.b--none {
border-style: none;
}
@media screen and (min-width: 30em) {
.b--dotted-ns {
border-style: dotted;
}
.b--dashed-ns {
border-style: dashed;
}
.b--solid-ns {
border-style: solid;
}
.b--none-ns {
border-style: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.b--dotted-m {
border-style: dotted;
}
.b--dashed-m {
border-style: dashed;
}
.b--solid-m {
border-style: solid;
}
.b--none-m {
border-style: none;
}
}
@media screen and (min-width: 60em) {
.b--dotted-l {
border-style: dotted;
}
.b--dashed-l {
border-style: dashed;
}
.b--solid-l {
border-style: solid;
}
.b--none-l {
border-style: none;
}
}
/*
BORDER WIDTHS
Docs: http://tachyons.io/docs/themes/borders/
Base:
bw = border-width
Modifiers:
0 = 0 width border
1 = 1st step in border-width scale
2 = 2nd step in border-width scale
3 = 3rd step in border-width scale
4 = 4th step in border-width scale
5 = 5th step in border-width scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bw0 {
border-width: 0;
}
.bw1 {
border-width: .125rem;
}
.bw2 {
border-width: .25rem;
}
.bw3 {
border-width: .5rem;
}
.bw4 {
border-width: 1rem;
}
.bw5 {
border-width: 2rem;
}
.bw-0 {
border-width: 0px;
}
.bw-1 {
border-width: 1px;
}
.bw-2 {
border-width: 2px;
}
.bw-3 {
border-width: 3px;
}
.bw-4 {
border-width: 4px;
}
.bw-5 {
border-width: 5px;
}
/* Resets */
.bt-0 {
border-top-width: 0;
}
.br-0 {
border-right-width: 0;
}
.bb-0 {
border-bottom-width: 0;
}
.bl-0 {
border-left-width: 0;
}
@media screen and (min-width: 30em) {
.bw0-ns {
border-width: 0;
}
.bw1-ns {
border-width: .125rem;
}
.bw2-ns {
border-width: .25rem;
}
.bw3-ns {
border-width: .5rem;
}
.bw4-ns {
border-width: 1rem;
}
.bw5-ns {
border-width: 2rem;
}
.bt-0-ns {
border-top-width: 0;
}
.br-0-ns {
border-right-width: 0;
}
.bb-0-ns {
border-bottom-width: 0;
}
.bl-0-ns {
border-left-width: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.bw0-m {
border-width: 0;
}
.bw1-m {
border-width: .125rem;
}
.bw2-m {
border-width: .25rem;
}
.bw3-m {
border-width: .5rem;
}
.bw4-m {
border-width: 1rem;
}
.bw5-m {
border-width: 2rem;
}
.bt-0-m {
border-top-width: 0;
}
.br-0-m {
border-right-width: 0;
}
.bb-0-m {
border-bottom-width: 0;
}
.bl-0-m {
border-left-width: 0;
}
}
@media screen and (min-width: 60em) {
.bw0-l {
border-width: 0;
}
.bw1-l {
border-width: .125rem;
}
.bw2-l {
border-width: .25rem;
}
.bw3-l {
border-width: .5rem;
}
.bw4-l {
border-width: 1rem;
}
.bw5-l {
border-width: 2rem;
}
.bt-0-l {
border-top-width: 0;
}
.br-0-l {
border-right-width: 0;
}
.bb-0-l {
border-bottom-width: 0;
}
.bl-0-l {
border-left-width: 0;
}
}
/*
BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.shadow-1 {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2 {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3 {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4 {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5 {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-6 {
-webkit-box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
}
@media screen and (min-width: 30em) {
.shadow-1-ns {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-ns {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-ns {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-ns {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-ns {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.shadow-1-m {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-m {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-m {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-m {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-m {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 60em) {
.shadow-1-l {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-l {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-l {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-l {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-l {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
/*
CODE
*/
.pre {
overflow-x: auto;
overflow-y: hidden;
overflow: scroll;
}
/*
COORDINATES
Docs: http://tachyons.io/docs/layout/position/
Use in combination with the position module.
Base:
top
bottom
right
left
Modifiers:
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
--1 = literal value -1
--2 = literal value -2
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.top-0 {
top: 0;
}
.right-0 {
right: 0;
}
.bottom-0 {
bottom: 0;
}
.left-0 {
left: 0;
}
.top-1 {
top: 1rem;
}
.right-1 {
right: 1rem;
}
.bottom-1 {
bottom: 1rem;
}
.left-1 {
left: 1rem;
}
.top-2 {
top: 2rem;
}
.right-2 {
right: 2rem;
}
.bottom-2 {
bottom: 2rem;
}
.left-2 {
left: 2rem;
}
.top--1 {
top: -1rem;
}
.right--1 {
right: -1rem;
}
.bottom--1 {
bottom: -1rem;
}
.left--1 {
left: -1rem;
}
.top--2 {
top: -2rem;
}
.right--2 {
right: -2rem;
}
.bottom--2 {
bottom: -2rem;
}
.left--2 {
left: -2rem;
}
.absolute--fill {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@media screen and (min-width: 30em) {
.top-0-ns {
top: 0;
}
.left-0-ns {
left: 0;
}
.right-0-ns {
right: 0;
}
.bottom-0-ns {
bottom: 0;
}
.top-1-ns {
top: 1rem;
}
.left-1-ns {
left: 1rem;
}
.right-1-ns {
right: 1rem;
}
.bottom-1-ns {
bottom: 1rem;
}
.top-2-ns {
top: 2rem;
}
.left-2-ns {
left: 2rem;
}
.right-2-ns {
right: 2rem;
}
.bottom-2-ns {
bottom: 2rem;
}
.top--1-ns {
top: -1rem;
}
.right--1-ns {
right: -1rem;
}
.bottom--1-ns {
bottom: -1rem;
}
.left--1-ns {
left: -1rem;
}
.top--2-ns {
top: -2rem;
}
.right--2-ns {
right: -2rem;
}
.bottom--2-ns {
bottom: -2rem;
}
.left--2-ns {
left: -2rem;
}
.absolute--fill-ns {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.top-0-m {
top: 0;
}
.left-0-m {
left: 0;
}
.right-0-m {
right: 0;
}
.bottom-0-m {
bottom: 0;
}
.top-1-m {
top: 1rem;
}
.left-1-m {
left: 1rem;
}
.right-1-m {
right: 1rem;
}
.bottom-1-m {
bottom: 1rem;
}
.top-2-m {
top: 2rem;
}
.left-2-m {
left: 2rem;
}
.right-2-m {
right: 2rem;
}
.bottom-2-m {
bottom: 2rem;
}
.top--1-m {
top: -1rem;
}
.right--1-m {
right: -1rem;
}
.bottom--1-m {
bottom: -1rem;
}
.left--1-m {
left: -1rem;
}
.top--2-m {
top: -2rem;
}
.right--2-m {
right: -2rem;
}
.bottom--2-m {
bottom: -2rem;
}
.left--2-m {
left: -2rem;
}
.absolute--fill-m {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 60em) {
.top-0-l {
top: 0;
}
.left-0-l {
left: 0;
}
.right-0-l {
right: 0;
}
.bottom-0-l {
bottom: 0;
}
.top-1-l {
top: 1rem;
}
.left-1-l {
left: 1rem;
}
.right-1-l {
right: 1rem;
}
.bottom-1-l {
bottom: 1rem;
}
.top-2-l {
top: 2rem;
}
.left-2-l {
left: 2rem;
}
.right-2-l {
right: 2rem;
}
.bottom-2-l {
bottom: 2rem;
}
.top--1-l {
top: -1rem;
}
.right--1-l {
right: -1rem;
}
.bottom--1-l {
bottom: -1rem;
}
.left--1-l {
left: -1rem;
}
.top--2-l {
top: -2rem;
}
.right--2-l {
right: -2rem;
}
.bottom--2-l {
bottom: -2rem;
}
.left--2-l {
left: -2rem;
}
.absolute--fill-l {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
/*
CLEARFIX
http://tachyons.io/docs/layout/clearfix/
*/
/* Nicolas Gallaghers Clearfix solution
Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.cl {
clear: left;
}
.cr {
clear: right;
}
.cb {
clear: both;
}
.cn {
clear: none;
}
@media screen and (min-width: 30em) {
.cl-ns {
clear: left;
}
.cr-ns {
clear: right;
}
.cb-ns {
clear: both;
}
.cn-ns {
clear: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.cl-m {
clear: left;
}
.cr-m {
clear: right;
}
.cb-m {
clear: both;
}
.cn-m {
clear: none;
}
}
@media screen and (min-width: 60em) {
.cl-l {
clear: left;
}
.cr-l {
clear: right;
}
.cb-l {
clear: both;
}
.cn-l {
clear: none;
}
}
/*
DISPLAY
Docs: http://tachyons.io/docs/layout/display
Base:
d = display
Modifiers:
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
t-row = table-row
t-columm = table-column
t-column-group = table-column-group
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.dn {
display: none;
}
.di {
display: inline;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.dit {
display: inline-table;
}
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.dt-row {
display: table-row;
}
.dt-row-group {
display: table-row-group;
}
.dt-column {
display: table-column;
}
.dt-column-group {
display: table-column-group;
}
/*
This will set table to full width and then
all cells will be equal width
*/
.dt--fixed {
table-layout: fixed;
width: 100%;
}
@media screen and (min-width: 30em) {
.dn-ns {
display: none;
}
.di-ns {
display: inline;
}
.db-ns {
display: block;
}
.dib-ns {
display: inline-block;
}
.dit-ns {
display: inline-table;
}
.dt-ns {
display: table;
}
.dtc-ns {
display: table-cell;
}
.dt-row-ns {
display: table-row;
}
.dt-row-group-ns {
display: table-row-group;
}
.dt-column-ns {
display: table-column;
}
.dt-column-group-ns {
display: table-column-group;
}
.dt--fixed-ns {
table-layout: fixed;
width: 100%;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.dn-m {
display: none;
}
.di-m {
display: inline;
}
.db-m {
display: block;
}
.dib-m {
display: inline-block;
}
.dit-m {
display: inline-table;
}
.dt-m {
display: table;
}
.dtc-m {
display: table-cell;
}
.dt-row-m {
display: table-row;
}
.dt-row-group-m {
display: table-row-group;
}
.dt-column-m {
display: table-column;
}
.dt-column-group-m {
display: table-column-group;
}
.dt--fixed-m {
table-layout: fixed;
width: 100%;
}
}
@media screen and (min-width: 60em) {
.dn-l {
display: none;
}
.di-l {
display: inline;
}
.db-l {
display: block;
}
.dib-l {
display: inline-block;
}
.dit-l {
display: inline-table;
}
.dt-l {
display: table;
}
.dtc-l {
display: table-cell;
}
.dt-row-l {
display: table-row;
}
.dt-row-group-l {
display: table-row-group;
}
.dt-column-l {
display: table-column;
}
.dt-column-group-l {
display: table-column-group;
}
.dt--fixed-l {
table-layout: fixed;
width: 100%;
}
}
/*
FLEXBOX
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.flex {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0 {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7 {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8 {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
@media screen and (min-width: 30em) {
.flex-ns {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-ns {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-ns {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-ns {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-ns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-ns {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-ns {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-ns {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-ns {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-ns {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-ns {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-ns {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-ns {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-ns {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-ns {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-ns {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-ns {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-ns {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-ns {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-ns {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-ns {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-ns {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-ns {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-ns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-ns {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-ns {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-ns {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-ns {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-ns {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-ns {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-ns {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-ns {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-ns {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-ns {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-ns {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-ns {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-ns {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-ns {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-ns {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-ns {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-ns {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-ns {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.flex-m {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-m {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-m {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-m {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-m {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-m {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-m {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-m {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-m {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-m {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-m {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-m {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-m {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-m {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-m {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-m {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-m {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-m {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-m {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-m {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-m {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-m {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-m {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-m {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-m {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-m {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-m {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-m {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-m {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-m {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-m {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-m {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-m {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-m {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-m {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-m {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-m {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-m {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-m {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-m {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-m {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-m {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
@media screen and (min-width: 60em) {
.flex-l {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-l {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-l {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-l {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-l {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-l {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-l {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-l {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-l {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-l {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-l {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-l {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-l {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-l {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-l {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-l {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-l {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-l {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-l {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-l {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-l {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-l {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-l {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-l {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-l {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-l {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-l {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-l {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-l {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-l {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-l {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-l {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-l {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-l {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-l {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-l {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-l {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-l {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-l {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-l {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-l {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-l {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
/*
FLOATS
http://tachyons.io/docs/layout/floats/
1. Floated elements are automatically rendered as block level elements.
Setting floats to display inline will fix the double margin bug in
ie6. You know... just in case.
2. Don't forget to clearfix your floats with .cf
Base:
f = float
Modifiers:
l = left
r = right
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.fl {
float: left;
_display: inline;
}
.fr {
float: right;
_display: inline;
}
.fn {
float: none;
}
@media screen and (min-width: 30em) {
.fl-ns {
float: left;
_display: inline;
}
.fr-ns {
float: right;
_display: inline;
}
.fn-ns {
float: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.fl-m {
float: left;
_display: inline;
}
.fr-m {
float: right;
_display: inline;
}
.fn-m {
float: none;
}
}
@media screen and (min-width: 60em) {
.fl-l {
float: left;
_display: inline;
}
.fr-l {
float: right;
_display: inline;
}
.fn-l {
float: none;
}
}
/*
FONT STYLE
Docs: http://tachyons.io/docs/typography/font-style/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.i {
font-style: italic;
}
.fs-normal {
font-style: normal;
}
@media screen and (min-width: 30em) {
.i-ns {
font-style: italic;
}
.fs-normal-ns {
font-style: normal;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.i-m {
font-style: italic;
}
.fs-normal-m {
font-style: normal;
}
}
@media screen and (min-width: 60em) {
.i-l {
font-style: italic;
}
.fs-normal-l {
font-style: normal;
}
}
/*
FONT WEIGHT
Docs: http://tachyons.io/docs/typography/font-weight/
Base
fw = font-weight
Modifiers:
1 = literal value 100
2 = literal value 200
3 = literal value 300
4 = literal value 400
5 = literal value 500
6 = literal value 600
7 = literal value 700
8 = literal value 800
9 = literal value 900
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.normal {
font-weight: normal;
}
.b {
font-weight: bold;
}
.fw1 {
font-weight: 100;
}
.fw2 {
font-weight: 200;
}
.fw3 {
font-weight: 300;
}
.fw4 {
font-weight: 400;
}
.fw5 {
font-weight: 500;
}
.fw6 {
font-weight: 600;
}
.fw7 {
font-weight: 700;
}
.fw8 {
font-weight: 800;
}
.fw9 {
font-weight: 900;
}
@media screen and (min-width: 30em) {
.normal-ns {
font-weight: normal;
}
.b-ns {
font-weight: bold;
}
.fw1-ns {
font-weight: 100;
}
.fw2-ns {
font-weight: 200;
}
.fw3-ns {
font-weight: 300;
}
.fw4-ns {
font-weight: 400;
}
.fw5-ns {
font-weight: 500;
}
.fw6-ns {
font-weight: 600;
}
.fw7-ns {
font-weight: 700;
}
.fw8-ns {
font-weight: 800;
}
.fw9-ns {
font-weight: 900;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.normal-m {
font-weight: normal;
}
.b-m {
font-weight: bold;
}
.fw1-m {
font-weight: 100;
}
.fw2-m {
font-weight: 200;
}
.fw3-m {
font-weight: 300;
}
.fw4-m {
font-weight: 400;
}
.fw5-m {
font-weight: 500;
}
.fw6-m {
font-weight: 600;
}
.fw7-m {
font-weight: 700;
}
.fw8-m {
font-weight: 800;
}
.fw9-m {
font-weight: 900;
}
}
@media screen and (min-width: 60em) {
.normal-l {
font-weight: normal;
}
.b-l {
font-weight: bold;
}
.fw1-l {
font-weight: 100;
}
.fw2-l {
font-weight: 200;
}
.fw3-l {
font-weight: 300;
}
.fw4-l {
font-weight: 400;
}
.fw5-l {
font-weight: 500;
}
.fw6-l {
font-weight: 600;
}
.fw7-l {
font-weight: 700;
}
.fw8-l {
font-weight: 800;
}
.fw9-l {
font-weight: 900;
}
}
/*
HEIGHTS
Docs: http://tachyons.io/docs/layout/heights/
Base:
h = height
min-h = min-height
min-vh = min-height vertical screen height
vh = vertical screen height
Modifiers
1 = 1st step in height scale
2 = 2nd step in height scale
3 = 3rd step in height scale
4 = 4th step in height scale
5 = 5th step in height scale
-25 = literal value 25%
-50 = literal value 50%
-75 = literal value 75%
-100 = literal value 100%
-auto = string value of auto
-inherit = string value of inherit
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Height Scale */
.h1 {
height: 1rem;
}
.h2 {
height: 2rem;
}
.h3 {
height: 4rem;
}
.h4 {
height: 8rem;
}
.h5 {
height: 16rem;
}
/* Height Percentages - Based off of height of parent */
.h-25 {
height: 25%;
}
.h-50 {
height: 50%;
}
.h-75 {
height: 75%;
}
.h-100 {
height: 100%;
}
.min-h-100 {
min-height: 100%;
}
/* Screen Height Percentage */
.vh-25 {
height: 25vh;
}
.vh-50 {
height: 50vh;
}
.vh-75 {
height: 75vh;
}
.vh-100 {
height: 100vh;
}
.min-vh-100 {
min-height: 100vh;
}
.min-vh-flex {
min-height: calc(100vh - 140px) !important;
}
/* String Properties */
.h-auto {
height: auto;
}
.h-inherit {
height: inherit;
}
@media screen and (min-width: 30em) {
.h1-ns {
height: 1rem;
}
.h2-ns {
height: 2rem;
}
.h3-ns {
height: 4rem;
}
.h4-ns {
height: 8rem;
}
.h5-ns {
height: 16rem;
}
.h-25-ns {
height: 25%;
}
.h-50-ns {
height: 50%;
}
.h-75-ns {
height: 75%;
}
.h-100-ns {
height: 100%;
}
.min-h-100-ns {
min-height: 100%;
}
.vh-25-ns {
height: 25vh;
}
.vh-50-ns {
height: 50vh;
}
.vh-75-ns {
height: 75vh;
}
.vh-100-ns {
height: 100vh;
}
.min-vh-100-ns {
min-height: 100vh;
}
.h-auto-ns {
height: auto;
}
.h-inherit-ns {
height: inherit;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.h1-m {
height: 1rem;
}
.h2-m {
height: 2rem;
}
.h3-m {
height: 4rem;
}
.h4-m {
height: 8rem;
}
.h5-m {
height: 16rem;
}
.h-25-m {
height: 25%;
}
.h-50-m {
height: 50%;
}
.h-75-m {
height: 75%;
}
.h-100-m {
height: 100%;
}
.min-h-100-m {
min-height: 100%;
}
.vh-25-m {
height: 25vh;
}
.vh-50-m {
height: 50vh;
}
.vh-75-m {
height: 75vh;
}
.vh-100-m {
height: 100vh;
}
.min-vh-100-m {
min-height: 100vh;
}
.h-auto-m {
height: auto;
}
.h-inherit-m {
height: inherit;
}
}
@media screen and (min-width: 60em) {
.h1-l {
height: 1rem;
}
.h2-l {
height: 2rem;
}
.h3-l {
height: 4rem;
}
.h4-l {
height: 8rem;
}
.h5-l {
height: 16rem;
}
.h-25-l {
height: 25%;
}
.h-50-l {
height: 50%;
}
.h-75-l {
height: 75%;
}
.h-100-l {
height: 100%;
}
.min-h-100-l {
min-height: 100%;
}
.vh-25-l {
height: 25vh;
}
.vh-50-l {
height: 50vh;
}
.vh-75-l {
height: 75vh;
}
.vh-100-l {
height: 100vh;
}
.min-vh-100-l {
min-height: 100vh;
}
.h-auto-l {
height: auto;
}
.h-inherit-l {
height: inherit;
}
}
/*
LETTER SPACING
Docs: http://tachyons.io/docs/typography/tracking/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tracked {
letter-spacing: .1em;
}
.tracked-tight {
letter-spacing: -.05em;
}
.tracked-mega {
letter-spacing: .25em;
}
@media screen and (min-width: 30em) {
.tracked-ns {
letter-spacing: .1em;
}
.tracked-tight-ns {
letter-spacing: -.05em;
}
.tracked-mega-ns {
letter-spacing: .25em;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.tracked-m {
letter-spacing: .1em;
}
.tracked-tight-m {
letter-spacing: -.05em;
}
.tracked-mega-m {
letter-spacing: .25em;
}
}
@media screen and (min-width: 60em) {
.tracked-l {
letter-spacing: .1em;
}
.tracked-tight-l {
letter-spacing: -.05em;
}
.tracked-mega-l {
letter-spacing: .25em;
}
}
/*
LINE HEIGHT / LEADING
Docs: http://tachyons.io/docs/typography/line-height
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.lh-solid {
line-height: 1;
}
.lh-title {
line-height: 1.25;
}
.lh-copy {
line-height: 1.5;
}
@media screen and (min-width: 30em) {
.lh-solid-ns {
line-height: 1;
}
.lh-title-ns {
line-height: 1.25;
}
.lh-copy-ns {
line-height: 1.5;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.lh-solid-m {
line-height: 1;
}
.lh-title-m {
line-height: 1.25;
}
.lh-copy-m {
line-height: 1.5;
}
}
@media screen and (min-width: 60em) {
.lh-solid-l {
line-height: 1;
}
.lh-title-l {
line-height: 1.25;
}
.lh-copy-l {
line-height: 1.5;
}
}
/*
LISTS
http://tachyons.io/docs/elements/lists/
*/
.list {
list-style-type: none;
}
/*
MAX WIDTHS
Docs: http://tachyons.io/docs/layout/max-widths/
Base:
mw = max-width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
6 = 6st step in width scale
7 = 7nd step in width scale
8 = 8rd step in width scale
9 = 9th step in width scale
-100 = literal value 100%
-none = string value none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Max Width Percentages */
.mw-100 {
max-width: 100%;
}
/* Max Width Scale */
.mw1 {
max-width: 1rem;
}
.mw2 {
max-width: 2rem;
}
.mw3 {
max-width: 4rem;
}
.mw4 {
max-width: 8rem;
}
.mw5 {
max-width: 16rem;
}
.mw6 {
max-width: 32rem;
}
.mw7 {
max-width: 48rem;
}
.mw8 {
max-width: 64rem;
}
.mw9 {
max-width: 96rem;
}
/* Max Width String Properties */
.mw-none {
max-width: none;
}
@media screen and (min-width: 30em) {
.mw-100-ns {
max-width: 100%;
}
.mw1-ns {
max-width: 1rem;
}
.mw2-ns {
max-width: 2rem;
}
.mw3-ns {
max-width: 4rem;
}
.mw4-ns {
max-width: 8rem;
}
.mw5-ns {
max-width: 16rem;
}
.mw6-ns {
max-width: 32rem;
}
.mw7-ns {
max-width: 48rem;
}
.mw8-ns {
max-width: 64rem;
}
.mw9-ns {
max-width: 96rem;
}
.mw-none-ns {
max-width: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.mw-100-m {
max-width: 100%;
}
.mw1-m {
max-width: 1rem;
}
.mw2-m {
max-width: 2rem;
}
.mw3-m {
max-width: 4rem;
}
.mw4-m {
max-width: 8rem;
}
.mw5-m {
max-width: 16rem;
}
.mw6-m {
max-width: 32rem;
}
.mw7-m {
max-width: 48rem;
}
.mw8-m {
max-width: 64rem;
}
.mw9-m {
max-width: 96rem;
}
.mw-none-m {
max-width: none;
}
}
@media screen and (min-width: 60em) {
.mw-100-l {
max-width: 100%;
}
.mw1-l {
max-width: 1rem;
}
.mw2-l {
max-width: 2rem;
}
.mw3-l {
max-width: 4rem;
}
.mw4-l {
max-width: 8rem;
}
.mw5-l {
max-width: 16rem;
}
.mw6-l {
max-width: 32rem;
}
.mw7-l {
max-width: 48rem;
}
.mw8-l {
max-width: 64rem;
}
.mw9-l {
max-width: 96rem;
}
.mw-none-l {
max-width: none;
}
}
/*
WIDTHS
Docs: http://tachyons.io/docs/layout/widths/
Base:
w = width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
-10 = literal value 10%
-20 = literal value 20%
-25 = literal value 25%
-30 = literal value 30%
-33 = literal value 33%
-34 = literal value 34%
-40 = literal value 40%
-50 = literal value 50%
-60 = literal value 60%
-70 = literal value 70%
-75 = literal value 75%
-80 = literal value 80%
-90 = literal value 90%
-100 = literal value 100%
-third = 100% / 3 (Not supported in opera mini or IE8)
-two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
-auto = string value auto
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Width Scale */
.w1 {
width: 1rem;
}
.w2 {
width: 2rem;
}
.w3 {
width: 4rem;
}
.w4 {
width: 8rem;
}
.w5 {
width: 16rem;
}
.w-10 {
width: 10%;
}
.w-20 {
width: 20%;
}
.w-25 {
width: 25%;
}
.w-30 {
width: 30%;
}
.w-33 {
width: 33%;
}
.w-34 {
width: 34%;
}
.w-40 {
width: 40%;
}
.w-50 {
width: 50%;
}
.w-55 {
width: 55%;
}
.w-60 {
width: 60%;
}
.w-70 {
width: 70%;
}
.w-75 {
width: 75%;
}
.w-80 {
width: 80%;
}
.w-90 {
width: 90%;
}
.w-100 {
width: 100%;
}
.w-third {
width: 33.33333%;
}
.w-two-thirds {
width: 66.66667%;
}
.w-auto {
width: auto;
}
@media screen and (min-width: 30em) {
.w1-ns {
width: 1rem;
}
.w2-ns {
width: 2rem;
}
.w3-ns {
width: 4rem;
}
.w4-ns {
width: 8rem;
}
.w5-ns {
width: 16rem;
}
.w-10-ns {
width: 10%;
}
.w-20-ns {
width: 20%;
}
.w-25-ns {
width: 25%;
}
.w-30-ns {
width: 30%;
}
.w-33-ns {
width: 33%;
}
.w-34-ns {
width: 34%;
}
.w-40-ns {
width: 40%;
}
.w-50-ns {
width: 50%;
}
.w-60-ns {
width: 60%;
}
.w-70-ns {
width: 70%;
}
.w-75-ns {
width: 75%;
}
.w-80-ns {
width: 80%;
}
.w-90-ns {
width: 90%;
}
.w-100-ns {
width: 100%;
}
.w-third-ns {
width: 33.33333%;
}
.w-two-thirds-ns {
width: 66.66667%;
}
.w-auto-ns {
width: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.w1-m {
width: 1rem;
}
.w2-m {
width: 2rem;
}
.w3-m {
width: 4rem;
}
.w4-m {
width: 8rem;
}
.w5-m {
width: 16rem;
}
.w-10-m {
width: 10%;
}
.w-20-m {
width: 20%;
}
.w-25-m {
width: 25%;
}
.w-30-m {
width: 30%;
}
.w-33-m {
width: 33%;
}
.w-34-m {
width: 34%;
}
.w-40-m {
width: 40%;
}
.w-50-m {
width: 50%;
}
.w-60-m {
width: 60%;
}
.w-70-m {
width: 70%;
}
.w-75-m {
width: 75%;
}
.w-80-m {
width: 80%;
}
.w-90-m {
width: 90%;
}
.w-100-m {
width: 100%;
}
.w-third-m {
width: 33.33333%;
}
.w-two-thirds-m {
width: 66.66667%;
}
.w-auto-m {
width: auto;
}
}
@media screen and (min-width: 60em) {
.w1-l {
width: 1rem;
}
.w2-l {
width: 2rem;
}
.w3-l {
width: 4rem;
}
.w4-l {
width: 8rem;
}
.w5-l {
width: 16rem;
}
.w-10-l {
width: 10%;
}
.w-20-l {
width: 20%;
}
.w-25-l {
width: 25%;
}
.w-30-l {
width: 30%;
}
.w-33-l {
width: 33%;
}
.w-34-l {
width: 34%;
}
.w-40-l {
width: 40%;
}
.w-50-l {
width: 50%;
}
.w-60-l {
width: 60%;
}
.w-70-l {
width: 70%;
}
.w-75-l {
width: 75%;
}
.w-80-l {
width: 80%;
}
.w-90-l {
width: 90%;
}
.w-100-l {
width: 100%;
}
.w-third-l {
width: 33.33333%;
}
.w-two-thirds-l {
width: 66.66667%;
}
.w-auto-l {
width: auto;
}
}
/*
OVERFLOW
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.overflow-visible {
overflow: visible;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-auto {
overflow: auto;
}
.overflow-x-visible {
overflow-x: visible;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-visible {
overflow-y: visible;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.overflow-y-auto {
overflow-y: auto;
}
@media screen and (min-width: 30em) {
.overflow-visible-ns {
overflow: visible;
}
.overflow-hidden-ns {
overflow: hidden;
}
.overflow-scroll-ns {
overflow: scroll;
}
.overflow-auto-ns {
overflow: auto;
}
.overflow-x-visible-ns {
overflow-x: visible;
}
.overflow-x-hidden-ns {
overflow-x: hidden;
}
.overflow-x-scroll-ns {
overflow-x: scroll;
}
.overflow-x-auto-ns {
overflow-x: auto;
}
.overflow-y-visible-ns {
overflow-y: visible;
}
.overflow-y-hidden-ns {
overflow-y: hidden;
}
.overflow-y-scroll-ns {
overflow-y: scroll;
}
.overflow-y-auto-ns {
overflow-y: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.overflow-visible-m {
overflow: visible;
}
.overflow-hidden-m {
overflow: hidden;
}
.overflow-scroll-m {
overflow: scroll;
}
.overflow-auto-m {
overflow: auto;
}
.overflow-x-visible-m {
overflow-x: visible;
}
.overflow-x-hidden-m {
overflow-x: hidden;
}
.overflow-x-scroll-m {
overflow-x: scroll;
}
.overflow-x-auto-m {
overflow-x: auto;
}
.overflow-y-visible-m {
overflow-y: visible;
}
.overflow-y-hidden-m {
overflow-y: hidden;
}
.overflow-y-scroll-m {
overflow-y: scroll;
}
.overflow-y-auto-m {
overflow-y: auto;
}
}
@media screen and (min-width: 60em) {
.overflow-visible-l {
overflow: visible;
}
.overflow-hidden-l {
overflow: hidden;
}
.overflow-scroll-l {
overflow: scroll;
}
.overflow-auto-l {
overflow: auto;
}
.overflow-x-visible-l {
overflow-x: visible;
}
.overflow-x-hidden-l {
overflow-x: hidden;
}
.overflow-x-scroll-l {
overflow-x: scroll;
}
.overflow-x-auto-l {
overflow-x: auto;
}
.overflow-y-visible-l {
overflow-y: visible;
}
.overflow-y-hidden-l {
overflow-y: hidden;
}
.overflow-y-scroll-l {
overflow-y: scroll;
}
.overflow-y-auto-l {
overflow-y: auto;
}
}
/*
POSITIONING
Docs: http://tachyons.io/docs/layout/position/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.static {
position: static;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
@media screen and (min-width: 30em) {
.static-ns {
position: static;
}
.relative-ns {
position: relative;
}
.absolute-ns {
position: absolute;
}
.fixed-ns {
position: fixed;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.static-m {
position: static;
}
.relative-m {
position: relative;
}
.absolute-m {
position: absolute;
}
.fixed-m {
position: fixed;
}
}
@media screen and (min-width: 60em) {
.static-l {
position: static;
}
.relative-l {
position: relative;
}
.absolute-l {
position: absolute;
}
.fixed-l {
position: fixed;
}
}
/*
OPACITY
Docs: http://tachyons.io/docs/themes/opacity/
*/
.o-100 {
opacity: 1;
}
.o-90 {
opacity: .9;
}
.o-80 {
opacity: .8;
}
.o-70 {
opacity: .7;
}
.o-60 {
opacity: .6;
}
.o-50 {
opacity: .5;
}
.o-40 {
opacity: .4;
}
.o-30 {
opacity: .3;
}
.o-20 {
opacity: .2;
}
.o-10 {
opacity: .1;
}
.o-05 {
opacity: .05;
}
.o-025 {
opacity: .025;
}
.o-0 {
opacity: 0;
}
/*
ROTATIONS
*/
.rotate-45 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135 {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225 {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270 {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315 {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
@media screen and (min-width: 30em) {
.rotate-45-ns {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-ns {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-ns {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-ns {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-ns {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-ns {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-ns {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.rotate-45-m {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-m {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-m {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-m {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-m {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-m {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-m {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
@media screen and (min-width: 60em) {
.rotate-45-l {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-l {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-l {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-l {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-l {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-l {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-l {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
/* Variables */
/*
SPACING
Docs: http://tachyons.io/docs/layout/spacing/
An eight step powers of two scale ranging from 0 to 16rem.
Base:
p = padding
m = margin
Modifiers:
a = all
h = horizontal
v = vertical
t = top
r = right
b = bottom
l = left
0 = none
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.pa0 {
padding: 0;
}
.pa1 {
padding: 0.25rem;
}
.pa2 {
padding: 0.5rem;
}
.pa3 {
padding: 1rem;
}
.pa4 {
padding: 2rem;
}
.pa5 {
padding: 4rem;
}
.pa6 {
padding: 8rem;
}
.pa7 {
padding: 16rem;
}
.pl0 {
padding-left: 0;
}
.pl1 {
padding-left: 0.25rem;
}
.pl2 {
padding-left: 0.5rem;
}
.pl3 {
padding-left: 1rem;
}
.pl4 {
padding-left: 2rem;
}
.pl5 {
padding-left: 4rem;
}
.pl6 {
padding-left: 8rem;
}
.pl7 {
padding-left: 16rem;
}
.pr0 {
padding-right: 0;
}
.pr1 {
padding-right: 0.25rem;
}
.pr2 {
padding-right: 0.5rem;
}
.pr3 {
padding-right: 1rem;
}
.pr4 {
padding-right: 2rem;
}
.pr5 {
padding-right: 4rem;
}
.pr6 {
padding-right: 8rem;
}
.pr7 {
padding-right: 16rem;
}
.pb0 {
padding-bottom: 0;
}
.pb1 {
padding-bottom: 0.25rem;
}
.pb2 {
padding-bottom: 0.5rem;
}
.pb3 {
padding-bottom: 1rem;
}
.pb4 {
padding-bottom: 2rem;
}
.pb5 {
padding-bottom: 4rem;
}
.pb6 {
padding-bottom: 8rem;
}
.pb7 {
padding-bottom: 16rem;
}
.pt0 {
padding-top: 0;
}
.pt1 {
padding-top: 0.25rem;
}
.pt2 {
padding-top: 0.5rem;
}
.pt3 {
padding-top: 1rem;
}
.pt4 {
padding-top: 2rem;
}
.pt5 {
padding-top: 4rem;
}
.pt6 {
padding-top: 8rem;
}
.pt7 {
padding-top: 16rem;
}
.pv0 {
padding-top: 0;
padding-bottom: 0;
}
.pv1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7 {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0 {
padding-left: 0;
padding-right: 0;
}
.ph1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3 {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4 {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5 {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6 {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7 {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0 {
margin: 0;
}
.ma1 {
margin: 0.25rem;
}
.ma2 {
margin: 0.5rem;
}
.ma3 {
margin: 1rem;
}
.ma4 {
margin: 2rem;
}
.ma5 {
margin: 4rem;
}
.ma6 {
margin: 8rem;
}
.ma7 {
margin: 16rem;
}
.ml0 {
margin-left: 0;
}
.ml1 {
margin-left: 0.25rem;
}
.ml2 {
margin-left: 0.5rem;
}
.ml3 {
margin-left: 1rem;
}
.ml4 {
margin-left: 2rem;
}
.ml5 {
margin-left: 4rem;
}
.ml6 {
margin-left: 8rem;
}
.ml7 {
margin-left: 16rem;
}
.mr0 {
margin-right: 0;
}
.mr1 {
margin-right: 0.25rem;
}
.mr2 {
margin-right: 0.5rem;
}
.mr3 {
margin-right: 1rem;
}
.mr4 {
margin-right: 2rem;
}
.mr5 {
margin-right: 4rem;
}
.mr6 {
margin-right: 8rem;
}
.mr7 {
margin-right: 16rem;
}
.mb0 {
margin-bottom: 0;
}
.mb1 {
margin-bottom: 0.25rem;
}
.mb2 {
margin-bottom: 0.5rem;
}
.mb3 {
margin-bottom: 1rem;
}
.mb4 {
margin-bottom: 2rem;
}
.mb4-1 {
margin-bottom: 3rem;
}
.mb5 {
margin-bottom: 4rem;
}
.mb6 {
margin-bottom: 8rem;
}
.mb7 {
margin-bottom: 16rem;
}
.mt0 {
margin-top: 0;
}
.mt1 {
margin-top: 0.25rem;
}
.mt2 {
margin-top: 0.5rem;
}
.mt3 {
margin-top: 1rem;
}
.mt4 {
margin-top: 2rem;
}
.mt4-1 {
margin-top: 3rem;
}
.mt5 {
margin-top: 4rem;
}
.mt6 {
margin-top: 8rem;
}
.mt7 {
margin-top: 16rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.mv1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6 {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7 {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0 {
margin-left: 0;
margin-right: 0;
}
.mh1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3 {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4 {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5 {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6 {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7 {
margin-left: 16rem;
margin-right: 16rem;
}
@media screen and (min-width: 30em) {
.pa0-ns {
padding: 0;
}
.pa1-ns {
padding: 0.25rem;
}
.pa2-ns {
padding: 0.5rem;
}
.pa3-ns {
padding: 1rem;
}
.pa4-ns {
padding: 2rem;
}
.pa5-ns {
padding: 4rem;
}
.pa6-ns {
padding: 8rem;
}
.pa7-ns {
padding: 16rem;
}
.pl0-ns {
padding-left: 0;
}
.pl1-ns {
padding-left: 0.25rem;
}
.pl2-ns {
padding-left: 0.5rem;
}
.pl3-ns {
padding-left: 1rem;
}
.pl4-ns {
padding-left: 2rem;
}
.pl5-ns {
padding-left: 4rem;
}
.pl6-ns {
padding-left: 8rem;
}
.pl7-ns {
padding-left: 16rem;
}
.pr0-ns {
padding-right: 0;
}
.pr1-ns {
padding-right: 0.25rem;
}
.pr2-ns {
padding-right: 0.5rem;
}
.pr3-ns {
padding-right: 1rem;
}
.pr4-ns {
padding-right: 2rem;
}
.pr5-ns {
padding-right: 4rem;
}
.pr6-ns {
padding-right: 8rem;
}
.pr7-ns {
padding-right: 16rem;
}
.pb0-ns {
padding-bottom: 0;
}
.pb1-ns {
padding-bottom: 0.25rem;
}
.pb2-ns {
padding-bottom: 0.5rem;
}
.pb3-ns {
padding-bottom: 1rem;
}
.pb4-ns {
padding-bottom: 2rem;
}
.pb5-ns {
padding-bottom: 4rem;
}
.pb6-ns {
padding-bottom: 8rem;
}
.pb7-ns {
padding-bottom: 16rem;
}
.pt0-ns {
padding-top: 0;
}
.pt1-ns {
padding-top: 0.25rem;
}
.pt2-ns {
padding-top: 0.5rem;
}
.pt3-ns {
padding-top: 1rem;
}
.pt4-ns {
padding-top: 2rem;
}
.pt5-ns {
padding-top: 4rem;
}
.pt6-ns {
padding-top: 8rem;
}
.pt7-ns {
padding-top: 16rem;
}
.pv0-ns {
padding-top: 0;
padding-bottom: 0;
}
.pv1-ns {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-ns {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-ns {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-ns {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-ns {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-ns {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-ns {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-ns {
padding-left: 0;
padding-right: 0;
}
.ph1-ns {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-ns {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-ns {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-ns {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-ns {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-ns {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-ns {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-ns {
margin: 0;
}
.ma1-ns {
margin: 0.25rem;
}
.ma2-ns {
margin: 0.5rem;
}
.ma3-ns {
margin: 1rem;
}
.ma4-ns {
margin: 2rem;
}
.ma5-ns {
margin: 4rem;
}
.ma6-ns {
margin: 8rem;
}
.ma7-ns {
margin: 16rem;
}
.ml0-ns {
margin-left: 0;
}
.ml1-ns {
margin-left: 0.25rem;
}
.ml2-ns {
margin-left: 0.5rem;
}
.ml3-ns {
margin-left: 1rem;
}
.ml4-ns {
margin-left: 2rem;
}
.ml5-ns {
margin-left: 4rem;
}
.ml6-ns {
margin-left: 8rem;
}
.ml7-ns {
margin-left: 16rem;
}
.mr0-ns {
margin-right: 0;
}
.mr1-ns {
margin-right: 0.25rem;
}
.mr2-ns {
margin-right: 0.5rem;
}
.mr3-ns {
margin-right: 1rem;
}
.mr4-ns {
margin-right: 2rem;
}
.mr5-ns {
margin-right: 4rem;
}
.mr6-ns {
margin-right: 8rem;
}
.mr7-ns {
margin-right: 16rem;
}
.mb0-ns {
margin-bottom: 0;
}
.mb1-ns {
margin-bottom: 0.25rem;
}
.mb2-ns {
margin-bottom: 0.5rem;
}
.mb3-ns {
margin-bottom: 1rem;
}
.mb4-ns {
margin-bottom: 2rem;
}
.mb5-ns {
margin-bottom: 4rem;
}
.mb6-ns {
margin-bottom: 8rem;
}
.mb7-ns {
margin-bottom: 16rem;
}
.mt0-ns {
margin-top: 0;
}
.mt1-ns {
margin-top: 0.25rem;
}
.mt2-ns {
margin-top: 0.5rem;
}
.mt3-ns {
margin-top: 1rem;
}
.mt4-ns {
margin-top: 2rem;
}
.mt5-ns {
margin-top: 4rem;
}
.mt6-ns {
margin-top: 8rem;
}
.mt7-ns {
margin-top: 16rem;
}
.mv0-ns {
margin-top: 0;
margin-bottom: 0;
}
.mv1-ns {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-ns {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-ns {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-ns {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-ns {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-ns {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-ns {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-ns {
margin-left: 0;
margin-right: 0;
}
.mh1-ns {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-ns {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-ns {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-ns {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-ns {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-ns {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-ns {
margin-left: 16rem;
margin-right: 16rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.pa0-m {
padding: 0;
}
.pa1-m {
padding: 0.25rem;
}
.pa2-m {
padding: 0.5rem;
}
.pa3-m {
padding: 1rem;
}
.pa4-m {
padding: 2rem;
}
.pa5-m {
padding: 4rem;
}
.pa6-m {
padding: 8rem;
}
.pa7-m {
padding: 16rem;
}
.pl0-m {
padding-left: 0;
}
.pl1-m {
padding-left: 0.25rem;
}
.pl2-m {
padding-left: 0.5rem;
}
.pl3-m {
padding-left: 1rem;
}
.pl4-m {
padding-left: 2rem;
}
.pl5-m {
padding-left: 4rem;
}
.pl6-m {
padding-left: 8rem;
}
.pl7-m {
padding-left: 16rem;
}
.pr0-m {
padding-right: 0;
}
.pr1-m {
padding-right: 0.25rem;
}
.pr2-m {
padding-right: 0.5rem;
}
.pr3-m {
padding-right: 1rem;
}
.pr4-m {
padding-right: 2rem;
}
.pr5-m {
padding-right: 4rem;
}
.pr6-m {
padding-right: 8rem;
}
.pr7-m {
padding-right: 16rem;
}
.pb0-m {
padding-bottom: 0;
}
.pb1-m {
padding-bottom: 0.25rem;
}
.pb2-m {
padding-bottom: 0.5rem;
}
.pb3-m {
padding-bottom: 1rem;
}
.pb4-m {
padding-bottom: 2rem;
}
.pb5-m {
padding-bottom: 4rem;
}
.pb6-m {
padding-bottom: 8rem;
}
.pb7-m {
padding-bottom: 16rem;
}
.pt0-m {
padding-top: 0;
}
.pt1-m {
padding-top: 0.25rem;
}
.pt2-m {
padding-top: 0.5rem;
}
.pt3-m {
padding-top: 1rem;
}
.pt4-m {
padding-top: 2rem;
}
.pt5-m {
padding-top: 4rem;
}
.pt6-m {
padding-top: 8rem;
}
.pt7-m {
padding-top: 16rem;
}
.pv0-m {
padding-top: 0;
padding-bottom: 0;
}
.pv1-m {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-m {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-m {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-m {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-m {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-m {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-m {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-m {
padding-left: 0;
padding-right: 0;
}
.ph1-m {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-m {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-m {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-m {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-m {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-m {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-m {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-m {
margin: 0;
}
.ma1-m {
margin: 0.25rem;
}
.ma2-m {
margin: 0.5rem;
}
.ma3-m {
margin: 1rem;
}
.ma4-m {
margin: 2rem;
}
.ma5-m {
margin: 4rem;
}
.ma6-m {
margin: 8rem;
}
.ma7-m {
margin: 16rem;
}
.ml0-m {
margin-left: 0;
}
.ml1-m {
margin-left: 0.25rem;
}
.ml2-m {
margin-left: 0.5rem;
}
.ml3-m {
margin-left: 1rem;
}
.ml4-m {
margin-left: 2rem;
}
.ml5-m {
margin-left: 4rem;
}
.ml6-m {
margin-left: 8rem;
}
.ml7-m {
margin-left: 16rem;
}
.mr0-m {
margin-right: 0;
}
.mr1-m {
margin-right: 0.25rem;
}
.mr2-m {
margin-right: 0.5rem;
}
.mr3-m {
margin-right: 1rem;
}
.mr4-m {
margin-right: 2rem;
}
.mr5-m {
margin-right: 4rem;
}
.mr6-m {
margin-right: 8rem;
}
.mr7-m {
margin-right: 16rem;
}
.mb0-m {
margin-bottom: 0;
}
.mb1-m {
margin-bottom: 0.25rem;
}
.mb2-m {
margin-bottom: 0.5rem;
}
.mb3-m {
margin-bottom: 1rem;
}
.mb4-m {
margin-bottom: 2rem;
}
.mb5-m {
margin-bottom: 4rem;
}
.mb6-m {
margin-bottom: 8rem;
}
.mb7-m {
margin-bottom: 16rem;
}
.mt0-m {
margin-top: 0;
}
.mt1-m {
margin-top: 0.25rem;
}
.mt2-m {
margin-top: 0.5rem;
}
.mt3-m {
margin-top: 1rem;
}
.mt4-m {
margin-top: 2rem;
}
.mt5-m {
margin-top: 4rem;
}
.mt6-m {
margin-top: 8rem;
}
.mt7-m {
margin-top: 16rem;
}
.mv0-m {
margin-top: 0;
margin-bottom: 0;
}
.mv1-m {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-m {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-m {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-m {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-m {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-m {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-m {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-m {
margin-left: 0;
margin-right: 0;
}
.mh1-m {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-m {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-m {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-m {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-m {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-m {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-m {
margin-left: 16rem;
margin-right: 16rem;
}
}
@media screen and (min-width: 60em) {
.pa0-l {
padding: 0;
}
.pa1-l {
padding: 0.25rem;
}
.pa2-l {
padding: 0.5rem;
}
.pa3-l {
padding: 1rem;
}
.pa4-l {
padding: 2rem;
}
.pa5-l {
padding: 4rem;
}
.pa6-l {
padding: 8rem;
}
.pa7-l {
padding: 16rem;
}
.pl0-l {
padding-left: 0;
}
.pl1-l {
padding-left: 0.25rem;
}
.pl2-l {
padding-left: 0.5rem;
}
.pl3-l {
padding-left: 1rem;
}
.pl4-l {
padding-left: 2rem;
}
.pl5-l {
padding-left: 4rem;
}
.pl6-l {
padding-left: 8rem;
}
.pl7-l {
padding-left: 16rem;
}
.pr0-l {
padding-right: 0;
}
.pr1-l {
padding-right: 0.25rem;
}
.pr2-l {
padding-right: 0.5rem;
}
.pr3-l {
padding-right: 1rem;
}
.pr4-l {
padding-right: 2rem;
}
.pr5-l {
padding-right: 4rem;
}
.pr6-l {
padding-right: 8rem;
}
.pr7-l {
padding-right: 16rem;
}
.pb0-l {
padding-bottom: 0;
}
.pb1-l {
padding-bottom: 0.25rem;
}
.pb2-l {
padding-bottom: 0.5rem;
}
.pb3-l {
padding-bottom: 1rem;
}
.pb4-l {
padding-bottom: 2rem;
}
.pb5-l {
padding-bottom: 4rem;
}
.pb6-l {
padding-bottom: 8rem;
}
.pb7-l {
padding-bottom: 16rem;
}
.pt0-l {
padding-top: 0;
}
.pt1-l {
padding-top: 0.25rem;
}
.pt2-l {
padding-top: 0.5rem;
}
.pt3-l {
padding-top: 1rem;
}
.pt4-l {
padding-top: 2rem;
}
.pt5-l {
padding-top: 4rem;
}
.pt6-l {
padding-top: 8rem;
}
.pt7-l {
padding-top: 16rem;
}
.pv0-l {
padding-top: 0;
padding-bottom: 0;
}
.pv1-l {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-l {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-l {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-l {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-l {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-l {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-l {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-l {
padding-left: 0;
padding-right: 0;
}
.ph1-l {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-l {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-l {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-l {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-l {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-l {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-l {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-l {
margin: 0;
}
.ma1-l {
margin: 0.25rem;
}
.ma2-l {
margin: 0.5rem;
}
.ma3-l {
margin: 1rem;
}
.ma4-l {
margin: 2rem;
}
.ma5-l {
margin: 4rem;
}
.ma6-l {
margin: 8rem;
}
.ma7-l {
margin: 16rem;
}
.ml0-l {
margin-left: 0;
}
.ml1-l {
margin-left: 0.25rem;
}
.ml2-l {
margin-left: 0.5rem;
}
.ml3-l {
margin-left: 1rem;
}
.ml4-l {
margin-left: 2rem;
}
.ml5-l {
margin-left: 4rem;
}
.ml6-l {
margin-left: 8rem;
}
.ml7-l {
margin-left: 16rem;
}
.mr0-l {
margin-right: 0;
}
.mr1-l {
margin-right: 0.25rem;
}
.mr2-l {
margin-right: 0.5rem;
}
.mr3-l {
margin-right: 1rem;
}
.mr4-l {
margin-right: 2rem;
}
.mr5-l {
margin-right: 4rem;
}
.mr6-l {
margin-right: 8rem;
}
.mr7-l {
margin-right: 16rem;
}
.mb0-l {
margin-bottom: 0;
}
.mb1-l {
margin-bottom: 0.25rem;
}
.mb2-l {
margin-bottom: 0.5rem;
}
.mb3-l {
margin-bottom: 1rem;
}
.mb4-l {
margin-bottom: 2rem;
}
.mb5-l {
margin-bottom: 4rem;
}
.mb6-l {
margin-bottom: 8rem;
}
.mb7-l {
margin-bottom: 16rem;
}
.mt0-l {
margin-top: 0;
}
.mt1-l {
margin-top: 0.25rem;
}
.mt2-l {
margin-top: 0.5rem;
}
.mt3-l {
margin-top: 1rem;
}
.mt4-l {
margin-top: 2rem;
}
.mt5-l {
margin-top: 4rem;
}
.mt6-l {
margin-top: 8rem;
}
.mt7-l {
margin-top: 16rem;
}
.mv0-l {
margin-top: 0;
margin-bottom: 0;
}
.mv1-l {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-l {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-l {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-l {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-l {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-l {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-l {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-l {
margin-left: 0;
margin-right: 0;
}
.mh1-l {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-l {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-l {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-l {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-l {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-l {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-l {
margin-left: 16rem;
margin-right: 16rem;
}
}
/*
NEGATIVE MARGINS
Base:
n = negative
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.na1 {
margin: -0.25rem;
}
.na2 {
margin: -0.5rem;
}
.na3 {
margin: -1rem;
}
.na4 {
margin: -2rem;
}
.na5 {
margin: -4rem;
}
.na6 {
margin: -8rem;
}
.na7 {
margin: -16rem;
}
.nl1 {
margin-left: -0.25rem;
}
.nl2 {
margin-left: -0.5rem;
}
.nl3 {
margin-left: -1rem;
}
.nl4 {
margin-left: -2rem;
}
.nl5 {
margin-left: -4rem;
}
.nl6 {
margin-left: -8rem;
}
.nl7 {
margin-left: -16rem;
}
.nr1 {
margin-right: -0.25rem;
}
.nr2 {
margin-right: -0.5rem;
}
.nr3 {
margin-right: -1rem;
}
.nr4 {
margin-right: -2rem;
}
.nr5 {
margin-right: -4rem;
}
.nr6 {
margin-right: -8rem;
}
.nr7 {
margin-right: -16rem;
}
.nb1 {
margin-bottom: -0.25rem;
}
.nb2 {
margin-bottom: -0.5rem;
}
.nb3 {
margin-bottom: -1rem;
}
.nb4 {
margin-bottom: -2rem;
}
.nb5 {
margin-bottom: -4rem;
}
.nb6 {
margin-bottom: -8rem;
}
.nb7 {
margin-bottom: -16rem;
}
.nt1 {
margin-top: -0.25rem;
}
.nt2 {
margin-top: -0.5rem;
}
.nt3 {
margin-top: -1rem;
}
.nt4 {
margin-top: -2rem;
}
.nt5 {
margin-top: -4rem;
}
.nt6 {
margin-top: -8rem;
}
.nt7 {
margin-top: -16rem;
}
@media screen and (min-width: 30em) {
.na1-ns {
margin: -0.25rem;
}
.na2-ns {
margin: -0.5rem;
}
.na3-ns {
margin: -1rem;
}
.na4-ns {
margin: -2rem;
}
.na5-ns {
margin: -4rem;
}
.na6-ns {
margin: -8rem;
}
.na7-ns {
margin: -16rem;
}
.nl1-ns {
margin-left: -0.25rem;
}
.nl2-ns {
margin-left: -0.5rem;
}
.nl3-ns {
margin-left: -1rem;
}
.nl4-ns {
margin-left: -2rem;
}
.nl5-ns {
margin-left: -4rem;
}
.nl6-ns {
margin-left: -8rem;
}
.nl7-ns {
margin-left: -16rem;
}
.nr1-ns {
margin-right: -0.25rem;
}
.nr2-ns {
margin-right: -0.5rem;
}
.nr3-ns {
margin-right: -1rem;
}
.nr4-ns {
margin-right: -2rem;
}
.nr5-ns {
margin-right: -4rem;
}
.nr6-ns {
margin-right: -8rem;
}
.nr7-ns {
margin-right: -16rem;
}
.nb1-ns {
margin-bottom: -0.25rem;
}
.nb2-ns {
margin-bottom: -0.5rem;
}
.nb3-ns {
margin-bottom: -1rem;
}
.nb4-ns {
margin-bottom: -2rem;
}
.nb5-ns {
margin-bottom: -4rem;
}
.nb6-ns {
margin-bottom: -8rem;
}
.nb7-ns {
margin-bottom: -16rem;
}
.nt1-ns {
margin-top: -0.25rem;
}
.nt2-ns {
margin-top: -0.5rem;
}
.nt3-ns {
margin-top: -1rem;
}
.nt4-ns {
margin-top: -2rem;
}
.nt5-ns {
margin-top: -4rem;
}
.nt6-ns {
margin-top: -8rem;
}
.nt7-ns {
margin-top: -16rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.na1-m {
margin: -0.25rem;
}
.na2-m {
margin: -0.5rem;
}
.na3-m {
margin: -1rem;
}
.na4-m {
margin: -2rem;
}
.na5-m {
margin: -4rem;
}
.na6-m {
margin: -8rem;
}
.na7-m {
margin: -16rem;
}
.nl1-m {
margin-left: -0.25rem;
}
.nl2-m {
margin-left: -0.5rem;
}
.nl3-m {
margin-left: -1rem;
}
.nl4-m {
margin-left: -2rem;
}
.nl5-m {
margin-left: -4rem;
}
.nl6-m {
margin-left: -8rem;
}
.nl7-m {
margin-left: -16rem;
}
.nr1-m {
margin-right: -0.25rem;
}
.nr2-m {
margin-right: -0.5rem;
}
.nr3-m {
margin-right: -1rem;
}
.nr4-m {
margin-right: -2rem;
}
.nr5-m {
margin-right: -4rem;
}
.nr6-m {
margin-right: -8rem;
}
.nr7-m {
margin-right: -16rem;
}
.nb1-m {
margin-bottom: -0.25rem;
}
.nb2-m {
margin-bottom: -0.5rem;
}
.nb3-m {
margin-bottom: -1rem;
}
.nb4-m {
margin-bottom: -2rem;
}
.nb5-m {
margin-bottom: -4rem;
}
.nb6-m {
margin-bottom: -8rem;
}
.nb7-m {
margin-bottom: -16rem;
}
.nt1-m {
margin-top: -0.25rem;
}
.nt2-m {
margin-top: -0.5rem;
}
.nt3-m {
margin-top: -1rem;
}
.nt4-m {
margin-top: -2rem;
}
.nt5-m {
margin-top: -4rem;
}
.nt6-m {
margin-top: -8rem;
}
.nt7-m {
margin-top: -16rem;
}
}
@media screen and (min-width: 60em) {
.na1-l {
margin: -0.25rem;
}
.na2-l {
margin: -0.5rem;
}
.na3-l {
margin: -1rem;
}
.na4-l {
margin: -2rem;
}
.na5-l {
margin: -4rem;
}
.na6-l {
margin: -8rem;
}
.na7-l {
margin: -16rem;
}
.nl1-l {
margin-left: -0.25rem;
}
.nl2-l {
margin-left: -0.5rem;
}
.nl3-l {
margin-left: -1rem;
}
.nl4-l {
margin-left: -2rem;
}
.nl5-l {
margin-left: -4rem;
}
.nl6-l {
margin-left: -8rem;
}
.nl7-l {
margin-left: -16rem;
}
.nr1-l {
margin-right: -0.25rem;
}
.nr2-l {
margin-right: -0.5rem;
}
.nr3-l {
margin-right: -1rem;
}
.nr4-l {
margin-right: -2rem;
}
.nr5-l {
margin-right: -4rem;
}
.nr6-l {
margin-right: -8rem;
}
.nr7-l {
margin-right: -16rem;
}
.nb1-l {
margin-bottom: -0.25rem;
}
.nb2-l {
margin-bottom: -0.5rem;
}
.nb3-l {
margin-bottom: -1rem;
}
.nb4-l {
margin-bottom: -2rem;
}
.nb5-l {
margin-bottom: -4rem;
}
.nb6-l {
margin-bottom: -8rem;
}
.nb7-l {
margin-bottom: -16rem;
}
.nt1-l {
margin-top: -0.25rem;
}
.nt2-l {
margin-top: -0.5rem;
}
.nt3-l {
margin-top: -1rem;
}
.nt4-l {
margin-top: -2rem;
}
.nt5-l {
margin-top: -4rem;
}
.nt6-l {
margin-top: -8rem;
}
.nt7-l {
margin-top: -16rem;
}
}
/*
TEXT DECORATION
Docs: http://tachyons.io/docs/typography/text-decoration/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.strike {
text-decoration: line-through;
}
.underline {
text-decoration: underline;
}
.no-underline {
text-decoration: none;
}
@media screen and (min-width: 30em) {
.strike-ns {
text-decoration: line-through;
}
.underline-ns {
text-decoration: underline;
}
.no-underline-ns {
text-decoration: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.strike-m {
text-decoration: line-through;
}
.underline-m {
text-decoration: underline;
}
.no-underline-m {
text-decoration: none;
}
}
@media screen and (min-width: 60em) {
.strike-l {
text-decoration: line-through;
}
.underline-l {
text-decoration: underline;
}
.no-underline-l {
text-decoration: none;
}
}
/*
TEXT ALIGN
Docs: http://tachyons.io/docs/typography/text-align/
Base
t = text-align
Modifiers
l = left
r = right
c = center
j = justify
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tl {
text-align: left;
}
.tr {
text-align: right;
}
.tc {
text-align: center;
}
.tj {
text-align: justify;
}
@media screen and (min-width: 30em) {
.tl-ns {
text-align: left;
}
.tr-ns {
text-align: right;
}
.tc-ns {
text-align: center;
}
.tj-ns {
text-align: justify;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.tl-m {
text-align: left;
}
.tr-m {
text-align: right;
}
.tc-m {
text-align: center;
}
.tj-m {
text-align: justify;
}
}
@media screen and (min-width: 60em) {
.tl-l {
text-align: left;
}
.tr-l {
text-align: right;
}
.tc-l {
text-align: center;
}
.tj-l {
text-align: justify;
}
}
/*
TEXT TRANSFORM
Docs: http://tachyons.io/docs/typography/text-transform/
Base:
tt = text-transform
Modifiers
c = capitalize
l = lowercase
u = uppercase
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ttc {
text-transform: capitalize;
}
.ttl {
text-transform: lowercase;
}
.ttu {
text-transform: uppercase;
}
.ttn {
text-transform: none;
}
@media screen and (min-width: 30em) {
.ttc-ns {
text-transform: capitalize;
}
.ttl-ns {
text-transform: lowercase;
}
.ttu-ns {
text-transform: uppercase;
}
.ttn-ns {
text-transform: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ttc-m {
text-transform: capitalize;
}
.ttl-m {
text-transform: lowercase;
}
.ttu-m {
text-transform: uppercase;
}
.ttn-m {
text-transform: none;
}
}
@media screen and (min-width: 60em) {
.ttc-l {
text-transform: capitalize;
}
.ttl-l {
text-transform: lowercase;
}
.ttu-l {
text-transform: uppercase;
}
.ttn-l {
text-transform: none;
}
}
/*
TYPE SCALE
Docs: http://tachyons.io/docs/typography/scale/
Base:
f = font-size
Modifiers
1 = 1st step in size scale
2 = 2nd step in size scale
3 = 3rd step in size scale
4 = 4th step in size scale
5 = 5th step in size scale
6 = 6th step in size scale
7 = 7th step in size scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
* For Hero/Marketing Titles
*
* These generally are too large for mobile
* so be careful using them on smaller screens.
* */
.f-6,
.f-headline {
font-size: 6rem;
}
.f-5,
.f-subheadline {
font-size: 5rem;
}
/* Type Scale */
.f1 {
font-size: 3rem;
}
.f2 {
font-size: 2.25rem;
}
.f3 {
font-size: 1.5rem;
}
.f4 {
font-size: 1.25rem;
}
.f5 {
font-size: 1rem;
}
.f6 {
font-size: .875rem;
}
.f7 {
font-size: .75rem;
}
/* Small and hard to read for many people so use with extreme caution */
@media screen and (min-width: 30em) {
.f-6-ns,
.f-headline-ns {
font-size: 6rem;
}
.f-5-ns,
.f-subheadline-ns {
font-size: 5rem;
}
.f1-ns {
font-size: 3rem;
}
.f2-ns {
font-size: 2.25rem;
}
.f3-ns {
font-size: 1.5rem;
}
.f4-ns {
font-size: 1.25rem;
}
.f5-ns {
font-size: 1rem;
}
.f6-ns {
font-size: .875rem;
}
.f7-ns {
font-size: .75rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.f-6-m,
.f-headline-m {
font-size: 6rem;
}
.f-5-m,
.f-subheadline-m {
font-size: 5rem;
}
.f1-m {
font-size: 3rem;
}
.f2-m {
font-size: 2.25rem;
}
.f3-m {
font-size: 1.5rem;
}
.f4-m {
font-size: 1.25rem;
}
.f5-m {
font-size: 1rem;
}
.f6-m {
font-size: .875rem;
}
.f7-m {
font-size: .75rem;
}
}
@media screen and (min-width: 60em) {
.f-6-l,
.f-headline-l {
font-size: 6rem;
}
.f-5-l,
.f-subheadline-l {
font-size: 5rem;
}
.f1-l {
font-size: 3rem;
}
.f2-l {
font-size: 2.25rem;
}
.f3-l {
font-size: 1.5rem;
}
.f4-l {
font-size: 1.25rem;
}
.f5-l {
font-size: 1rem;
}
.f6-l {
font-size: .875rem;
}
.f7-l {
font-size: .75rem;
}
}
/*
UTILITIES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Equivalent to .overflow-y-scroll */
.overflow-container {
overflow-y: scroll;
}
.center {
margin-right: auto;
margin-left: auto;
}
.mr-auto {
margin-right: auto;
}
.ml-auto {
margin-left: auto;
}
@media screen and (min-width: 30em) {
.center-ns {
margin-right: auto;
margin-left: auto;
}
.mr-auto-ns {
margin-right: auto;
}
.ml-auto-ns {
margin-left: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.center-m {
margin-right: auto;
margin-left: auto;
}
.mr-auto-m {
margin-right: auto;
}
.ml-auto-m {
margin-left: auto;
}
}
@media screen and (min-width: 60em) {
.center-l {
margin-right: auto;
margin-left: auto;
}
.mr-auto-l {
margin-right: auto;
}
.ml-auto-l {
margin-left: auto;
}
}
.button-no-style {
border: 0;
}
/*
WHITE SPACE
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ws-normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
@media screen and (min-width: 30em) {
.ws-normal-ns {
white-space: normal;
}
.nowrap-ns {
white-space: nowrap;
}
.pre-ns {
white-space: pre;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ws-normal-m {
white-space: normal;
}
.nowrap-m {
white-space: nowrap;
}
.pre-m {
white-space: pre;
}
}
@media screen and (min-width: 60em) {
.ws-normal-l {
white-space: normal;
}
.nowrap-l {
white-space: nowrap;
}
.pre-l {
white-space: pre;
}
}
/*
VERTICAL ALIGN
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.v-base {
vertical-align: baseline;
}
.v-mid {
vertical-align: middle;
}
.v-top {
vertical-align: top;
}
.v-btm {
vertical-align: bottom;
}
@media screen and (min-width: 30em) {
.v-base-ns {
vertical-align: baseline;
}
.v-mid-ns {
vertical-align: middle;
}
.v-top-ns {
vertical-align: top;
}
.v-btm-ns {
vertical-align: bottom;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.v-base-m {
vertical-align: baseline;
}
.v-mid-m {
vertical-align: middle;
}
.v-top-m {
vertical-align: top;
}
.v-btm-m {
vertical-align: bottom;
}
}
@media screen and (min-width: 60em) {
.v-base-l {
vertical-align: baseline;
}
.v-mid-l {
vertical-align: middle;
}
.v-top-l {
vertical-align: top;
}
.v-btm-l {
vertical-align: bottom;
}
}
/*
Z-INDEX
Base
z = z-index
Modifiers
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
-3 = literal value 3
-4 = literal value 4
-5 = literal value 5
-999 = literal value 999
-9999 = literal value 9999
-max = largest accepted z-index value as integer
-inherit = string value inherit
-initial = string value initial
-unset = string value unset
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z-0 {
z-index: 0;
}
.z-1 {
z-index: 1;
}
.z-2 {
z-index: 2;
}
.z-3 {
z-index: 3;
}
.z-4 {
z-index: 4;
}
.z-5 {
z-index: 5;
}
.z-999 {
z-index: 999;
}
.z-9999 {
z-index: 9999;
}
.z-max {
z-index: 2147483647;
}
.z-inherit {
z-index: inherit;
}
.z-initial {
z-index: initial;
}
.z-unset {
z-index: unset;
}
html,
body {
height: 100%;
width: 100vw;
position: relative;
font-family: 'Nunito', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#app {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: calc(100% - 52px);
min-width: 320px;
padding-top: 52px;
}
#blip-chat-header {
background: var(--color-brand, #0096fa);
color: var(--color-surface-1, #f6f6f6);
fill: var(--color-surface-1, #f6f6f6);
width: 100%;
position: fixed;
z-index: 9;
top: 0;
height: 53px;
-webkit-box-shadow: 0 -1px 12px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 12px 0 rgba(0, 0, 0, 0.4);
}
#blip-chat-header img {
width: 35px;
height: 35px;
}
#blip-chat-header .icon-close {
width: 48px;
height: 53px;
cursor: pointer;
}
#blip-chat-header .blip-chat-titles {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
#blip-chat-header .blip-chat-bot-name {
font-size: 18px;
font-weight: 500;
margin: 0;
}
@media screen and (max-width: 400px) {
#blip-chat-header .blip-chat-bot-name {
font-size: 17px;
}
}
@media screen and (max-width: 380px) {
#blip-chat-header .blip-chat-bot-name {
font-size: 16px;
}
}
@media screen and (max-width: 360px) {
#blip-chat-header .blip-chat-bot-name {
font-size: 15px;
line-height: 18px;
}
}
#blip-chat-header .blip-chat-bot-status {
font-size: 11px;
font-weight: 300;
}
.blip-application-loading-header .icon-close {
width: 48px;
height: 53px;
cursor: pointer;
background-color: var(--color-surface-1, #f6f6f6);
}
/**
* blip-cards v3.22.0
* https://github.com/takenet/blip-cards-vue-components
* Released under the MIT License.
*/
.menu-list-padding[data-v-794f6560]{padding:10px 16px;padding-top:0;padding-bottom:0}
.menu-list .bubble[data-v-794f6560]{padding:10px 16px;padding-left:0;padding-right:0;min-width:206px;text-align:left}
.menu-list .fixed-options li[data-v-794f6560]:last-child{padding-bottom:0}
.remove-option-error[data-v-794f6560]{color:#f76556;size:5px;font-size:12px;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:15px;margin-top:-10px}
.section-title[data-v-794f6560]{border-top:none;border-bottom:1px solid var(--color-content-ghost,#8c8c8c)!important;padding-top:0;padding-bottom:0}
.section-title div[data-v-794f6560]{text-align:left!important}
.blip-card .fixed-options li[data-v-794f6560]{padding-right:0;padding-left:0;margin:0}
.blip-card .fixed-options ul[data-v-794f6560]{margin-top:0!important;margin-left:0;margin-right:0}
.blip-card .left .fixed-options li[data-v-794f6560],.middle .fixed-options li[data-v-794f6560],.right .fixed-options li[data-v-794f6560]{color:#0cc8cc;border-top:none!important;border-bottom:1px solid var(--color-content-ghost,#8c8c8c)!important}
.blip-card .left .fixed-options li li[data-v-794f6560]:first,.middle .fixed-options li[data-v-794f6560]:first,.right .fixed-options li[data-v-794f6560]:first{border-top:none!important;border-bottom:none!important;padding-top:0;padding-bottom:0}
.blip-card .left .fixed-options li[data-v-794f6560]:last-child,.middle .fixed-options li[data-v-794f6560]:last-child,.right .fixed-options li[data-v-794f6560]:last-child{border-top:none!important;border-bottom:none!important}
.menu-list-prompt .bubble[data-v-14c3a676]{padding:10px 16px;padding-left:0;padding-right:0;min-width:206px;text-align:left}
.header-text[data-v-14c3a676]{padding-top:0!important;padding-bottom:0!important;padding:10px 16px}
.body-text[data-v-14c3a676]{padding-top:0!important;padding-bottom:10px!important;padding:10px 16px}
.button-text[data-v-14c3a676]{padding-top:0!important;padding-bottom:0!important;padding:10px 16px;border-top:.5px solid var(--color-content-ghost,#8c8c8c)}
.button-text div[data-v-14c3a676]:first-child{text-align:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}
.menu-list-options-button-icon .lmenu-list-options-button-text[data-v-14c3a676]{float:left}
.menu-list-options-button-icon[data-v-14c3a676]{margin-top:12px}
.bubble.right .disable-selection .button-text .menu-list-options-button-icon[data-v-14c3a676]{color:var(--color-surface-1,#f6f6f6)}
.bubble.left .disable-selection .button-text .menu-list-options-button-icon[data-v-14c3a676]{color:var(--color-content-default,#454545)}
.blip-card .form-group .help[data-v-14c3a676]{padding:0}
.call-to-action .bubble[data-v-3dca957c]{padding:10px 16px;padding-left:0;padding-right:0;min-width:206px;text-align:left}
.header-text[data-v-3dca957c]{padding-top:0!important;padding-bottom:0!important;padding:10px 16px}
.body-text[data-v-3dca957c],.footer-text[data-v-3dca957c]{padding-top:0!important;padding-bottom:10px!important;padding:10px 16px}
.button-text[data-v-3dca957c]{padding-top:0!important;padding-bottom:0!important;padding:10px 16px;border-top:.5px solid var(--color-content-ghost,#8c8c8c)}
.button-text div[data-v-3dca957c]:first-child{text-align:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}
.menu-list-options-button-icon .lmenu-list-options-button-text[data-v-3dca957c]{float:left}
.menu-list-options-button-icon[data-v-3dca957c]{margin-top:12px}
.bubble.right .disable-selection .button-text .menu-list-options-button-icon[data-v-3dca957c]{color:var(--color-surface-1,#f6f6f6)}
.bubble.left .disable-selection .button-text .menu-list-options-button-icon[data-v-3dca957c]{color:var(--color-content-default,#454545)}
.blip-card .form-group .help[data-v-3dca957c]{padding:0}
.fixed-options ul[data-v-3dca957c]{margin:0}
.editing .fixed-options ul[data-v-3dca957c]{margin:0 -10px}
.fixed-options ul .align-center[data-v-3dca957c]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 auto}
.fixed-options ul .align-center>bds-icon[data-v-3dca957c]{margin-right:10px;color:var(--color-primary,#1e6bf1)!important}
.fixed-options ul .align-center>bds-typo[data-v-3dca957c]{color:var(--color-primary,#1e6bf1)}
.blip-card .fixed-options li div[data-v-3dca957c],.blip-card .fixed-options li span[data-v-3dca957c]{width:auto}
.call-to-action .bubble.bubble-padding-top-10[data-v-3dca957c]{padding:10px 0 0}
.border-top-none li[data-v-3dca957c]{border-top:none!important}
.blip-card .fixed-options ul[data-v-3dca957c]{margin-left:0!important;margin-right:0!important}
.json-text .bubble[data-v-37b7d6c2]{padding:10px 16px;padding-left:0;padding-right:0;min-width:206px;text-align:left}
.header-text[data-v-37b7d6c2]{padding-top:0!important;padding-bottom:0!important;padding:10px 16px}
.body-text[data-v-37b7d6c2],.footer-text[data-v-37b7d6c2]{padding-top:0!important;padding-bottom:10px!important;padding:10px 16px}
.button-text[data-v-37b7d6c2]{padding-top:0!important;padding-bottom:0!important;padding:10px 16px;border-top:.5px solid var(--color-content-ghost,#8c8c8c)}
.button-text div[data-v-37b7d6c2]:first-child{text-align:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}
.menu-list-options-button-icon .lmenu-list-options-button-text[data-v-37b7d6c2]{float:left}
.menu-list-options-button-icon[data-v-37b7d6c2]{margin-top:12px}
.bubble.right .disable-selection .button-text .menu-list-options-button-icon[data-v-37b7d6c2]{color:var(--color-surface-1,#f6f6f6)}
.bubble.left .disable-selection .button-text .menu-list-options-button-icon[data-v-37b7d6c2]{color:var(--color-content-default,#454545)}
.blip-card .form-group .help[data-v-37b7d6c2]{padding:0}
.button-container[data-v-37b7d6c2]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-top:.5px solid var(--color-content-ghost,#8c8c8c);cursor:pointer}
.button-container>div[data-v-37b7d6c2]{margin:8px 0}
.button-container bds-typo[data-v-37b7d6c2]{color:var(--color-primary,#1e6bf1)}
.fixed-options ul[data-v-37b7d6c2]{margin:0}
.editing .fixed-options ul[data-v-37b7d6c2]{margin:0 -10px}
.fixed-options ul .align-center[data-v-37b7d6c2]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 auto}
.fixed-options ul .align-center>bds-icon[data-v-37b7d6c2]{margin-right:10px;color:var(--color-primary,#1e6bf1)!important}
.fixed-options ul .align-center>bds-typo[data-v-37b7d6c2]{color:var(--color-primary,#1e6bf1)}
.blip-card .fixed-options li div[data-v-37b7d6c2],.blip-card .fixed-options li span[data-v-37b7d6c2]{width:auto}
.json-text .bubble.bubble-padding-top-10[data-v-37b7d6c2]{padding:10px 0 0}
.border-top-none li[data-v-37b7d6c2]{border-top:none!important}
.blip-card .fixed-options ul[data-v-37b7d6c2]{margin-left:0!important;margin-right:0!important}
.calls[data-v-d366c6a4]{color:var(--color-content-disable,#636363);text-align:center;overflow:hidden;padding-top:5px;width:auto}
.blip-message-group .blip-card-group .calls-card div.notification{display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}
.calls-card .bubble{padding:12px;word-wrap:break-word;text-align:left}
.calls-card .bubble .btn-download{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex}
.calls-card .bubble .content{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:flex-center;-ms-flex-align:flex-center;align-items:flex-center;gap:var(--space-1,.5rem);width:auto}
.calls-card .bubble .content,.calls-card .bubble .content__details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}
.calls-card .bubble .content__details{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:10px;min-height:60px}
.calls-card .bubble .content__details,.calls-card .bubble .content__details__icon{-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--space-1,.5rem)}
.calls-card .bubble .content__details__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:var(--space-1,.5rem);background-color:var(--color-error,#f99f9f)}
.calls-card .bubble .content__details__icon.answer,.calls-card .bubble .content__details__icon.completed{background-color:var(--color-success,#84ebbc)}
.calls-card .bubble .content__details__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}
.calls-card .bubble .content__details__text__title{gap:32px}
.calls-card .bubble .content__details__text__subtitle,.calls-card .bubble .content__details__text__title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex:1;flex:1}
.calls-card .bubble .content__details__text__subtitle{gap:16px}
.calls-card .bubble .content__record{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:start;gap:var(--space-05,.25rem);-ms-flex-item-align:stretch;align-self:stretch;padding:var(--space-05,.25rem) 12px;background-color:var(--color-content-disabled,#636363);border-radius:6px 6px var(--space-0,0) 6px;overflow:hidden;min-height:60px}
.calls-card .bubble .content__record.video.has-media{padding:0;background-color:transparent}
.calls-card .bubble .content__record.video>div,.calls-card .bubble .content__record.video>div>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-item-align:stretch;align-self:stretch}
.calls-card .bubble .content__record.video>div>div div.video-player-wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1}
.calls-card .bubble .content__record.video>div>div div.video-player-wrapper #blipVideo{border-radius:var(--space-1,.5rem)!important}
.calls-card .bubble .content__record.video>div>div div.video-player-wrapper .video-player-controls{margin-top:var(--space-2,1rem);padding:var(--space-05,.25rem) var(--space-2,1rem)}
.calls-card .bubble .content__record.voice>div{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch}
.calls-card .bubble .content__record.voice>div div.audio-player-wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1}
.calls-card .bubble .content__record.voice>div div.audio-player-wrapper .audio-play-pause{margin-top:3px}
.calls-card .bubble .content__record .loading-media-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;gap:var(--space-1,.5rem)}
.calls-card .bubble .content__record .loading-media-content bds-loading-spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition:var(--default-transition,all .25s ease-in);transition:var(--default-transition,all .25s ease-in);overflow:hidden;opacity:0;-webkit-transform:translateX(-200%);transform:translateX(-200%)}
.calls-card .bubble .content__record .loading-media-content bds-typo{-webkit-box-flex:1;-ms-flex:1;flex:1;color:var(--color-surface-1,#f6f6f6);-webkit-transition:var(--default-transition,all .25s ease-in);transition:var(--default-transition,all .25s ease-in);-webkit-transform:translateX(-40px);transform:translateX(-40px)}
.calls-card .bubble .content__record .loading-media-content button.btn-refresh{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;padding:var(--space-05,.25rem) var(--space-1,.5rem);background-color:transparent;border-radius:var(--space-1,.5rem);border:1px solid var(--color-border-1,#c9c9c9);cursor:pointer;-webkit-transition:var(--default-transition,all .25s ease-in);transition:var(--default-transition,all .25s ease-in);opacity:1}
.calls-card .bubble .content__record .loading-media-content button.btn-refresh:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:0;border-radius:var(--space-1,.5rem)}
.calls-card .bubble .content__record .loading-media-content button.btn-refresh:hover:before{background-color:var(--color-hover,rgba(0,0,0,.08))}
.calls-card .bubble .content__record .loading-media-content button.btn-refresh:active:before{background-color:var(--color-pressed,rgba(0,0,0,.16))}
.calls-card .bubble .content__record .loading-media-content button.btn-refresh:disabled{cursor:default;border:1px solid var(--color-content-ghost,#8c8c8c)}
.calls-card .bubble .content__record .loading-media-content button.btn-refresh:disabled:before{background-color:transparent}
.calls-card .bubble .content__record .loading-media-content.refreshing-media bds-loading-spinner{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
.calls-card .bubble .content__record .loading-media-content.refreshing-media bds-typo{-webkit-transform:translateX(0);transform:translateX(0)}
.calls-card .bubble .content__record .loading-media-content.refreshing-media button.btn-refresh{-webkit-transform:translateX(200%);transform:translateX(200%);opacity:0}
.calls-card .bubble.left .content__record,.calls-card .bubble.middle .content__record{border-radius:6px 6px 6px var(--space-0,0)}
.calls-card .bubble.left .content__record .audio-player-wrapper .slider,.calls-card .bubble.middle .content__record .audio-player-wrapper .slider{background-color:var(--color-content-ghost,#8c8c8c)}
.calls-card .bubble.left .content__record .audio-player-wrapper .progress .pin,.calls-card .bubble.middle .content__record .audio-player-wrapper .progress .pin{background-color:var(--color-surface-1,#f6f6f6)}
.calls-card .bubble.left .content__record .audio-player-wrapper .audio-player-button,.calls-card .bubble.middle .content__record .audio-player-wrapper .audio-player-button{fill:var(--color-surface-1,#f6f6f6)}
.calls-card .bubble.left .content__record .audio-player-wrapper .audio-player-time,.calls-card .bubble.middle .content__record .audio-player-wrapper .audio-player-time{color:var(--color-surface-1,#f6f6f6)}
.calls-card .bubble.left .content__record .audio-player-wrapper .blip-change-playback-rate,.calls-card .bubble.middle .content__record .audio-player-wrapper .blip-change-playback-rate{border-color:var(--color-content-ghost,#8c8c8c);color:var(--color-surface-1,#f6f6f6)}
.calls-card .bubble.middle .content__record{border-radius:6px}
.blip-plain-text-metadata{margin-top:-20px;padding:0 10px 10px 0}
.media-link.audio .bubble,.media-link.voice .bubble{padding:0;width:500px}
.media-link.audio .bubble .audio-player-wrapper,.media-link.voice .bubble .audio-player-wrapper{padding:10px 16px}
.calls-card .left .slider,.calls-card .middle .slider,.media-link.audio .left .slider,.media-link.audio .middle .slider,.media-link.voice .left .slider,.media-link.voice .middle .slider{background-color:var(--color-surface-3,#cfcfcf)}
.calls-card .left .progress .pin,.calls-card .middle .progress .pin,.media-link.audio .left .progress .pin,.media-link.audio .middle .progress .pin,.media-link.voice .left .progress .pin,.media-link.voice .middle .progress .pin{background-color:var(--color-content-default,#454545)}
.calls-card .left .audio-player-button,.calls-card .middle .audio-player-button,.media-link.audio .left .audio-player-button,.media-link.audio .middle .audio-player-button,.media-link.voice .left .audio-player-button,.media-link.voice .middle .audio-player-button{fill:var(--color-content-default,#454545)}
.calls-card .left .blip-change-playback-rate,.calls-card .middle .blip-change-playback-rate,.media-link.audio .left .blip-change-playback-rate,.media-link.audio .middle .blip-change-playback-rate,.media-link.voice .left .blip-change-playback-rate,.media-link.voice .middle .blip-change-playback-rate{border-color:var(--color-content-ghost,#8c8c8c);color:var(--color-content-default,#454545)}
.calls-card .left .video-player-time,.calls-card .middle .video-player-time,.media-link.audio .left .video-player-time,.media-link.audio .middle .video-player-time,.media-link.voice .left .video-player-time,.media-link.voice .middle .video-player-time{color:var(--color-content-default,#454545)}
.calls-card .right .slider,.media-link.audio .right .slider,.media-link.voice .right .slider{background-color:var(--color-content-ghost,#8c8c8c)}
.calls-card .right .progress .pin,.media-link.audio .right .progress .pin,.media-link.voice .right .progress .pin{background-color:var(--color-surface-1,#f6f6f6)}
.calls-card .right .audio-player-button,.media-link.audio .right .audio-player-button,.media-link.voice .right .audio-player-button{fill:var(--color-surface-1,#f6f6f6)}
.calls-card .right .video-player-time,.media-link.audio .right .video-player-time,.media-link.voice .right .video-player-time{color:var(--color-surface-1,#f6f6f6)}
.calls-card .right .blip-change-playback-rate,.media-link.audio .right .blip-change-playback-rate,.media-link.voice .right .blip-change-playback-rate{border-color:var(--color-content-ghost,#8c8c8c);color:var(--color-surface-1,#f6f6f6)}
.calls-card .notification,.media-link.audio .notification,.media-link.voice .notification{color:var(--color-content-disable,#636363)}
.calls-card .form form,.media-link.audio .form form,.media-link.voice .form form{width:auto}
.calls-card .audio-player-wrapper .audio-player-controls,.media-link.audio .audio-player-wrapper .audio-player-controls,.media-link.voice .audio-player-wrapper .audio-player-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;margin-top:5px}
.calls-card .audio-player-wrapper .audio-player-button,.media-link.audio .audio-player-wrapper .audio-player-button,.media-link.voice .audio-player-wrapper .audio-player-button{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;width:14px;margin-right:15px;color:inherit;cursor:pointer}
.calls-card .audio-player-wrapper .blip-change-playback-rate,.media-link.audio .audio-player-wrapper .blip-change-playback-rate,.media-link.voice .audio-player-wrapper .blip-change-playback-rate{display:inline-block;cursor:pointer;margin:0;padding:0;overflow:hidden;text-align:center;white-space:nowrap;font-weight:600;background-color:transparent;border-width:1px;border-style:solid;border-radius:8px;outline:none;text-decoration:none;width:2.75rem;height:2rem}
.calls-card .audio-player-wrapper .audio-play-pause,.media-link.audio .audio-player-wrapper .audio-play-pause,.media-link.voice .audio-player-wrapper .audio-play-pause{margin-top:6px}
.calls-card .audio-player-wrapper .audio-player-bar,.media-link.audio .audio-player-wrapper .audio-player-bar,.media-link.voice .audio-player-wrapper .audio-player-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-top:13px;margin-right:16px}
.calls-card .audio-player-wrapper .audio-player-time,.media-link.audio .audio-player-wrapper .audio-player-time,.media-link.voice .audio-player-wrapper .audio-player-time{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:x-small;line-height:10px;color:inherit}
.calls-card .audio-player-wrapper .audio-player-range,.media-link.audio .audio-player-wrapper .audio-player-range,.media-link.voice .audio-player-wrapper .audio-player-range{position:relative;bottom:10px;opacity:0;margin:0 0 -9px;width:100%;padding:0;height:16px;cursor:pointer}
.calls-card .audio-player-wrapper .audio-loading,.media-link.audio .audio-player-wrapper .audio-loading,.media-link.voice .audio-player-wrapper .audio-loading{padding-right:12px}
.calls-card .audio-player-wrapper .audio-player-loading,.media-link.audio .audio-player-wrapper .audio-player-loading,.media-link.voice .audio-player-wrapper .audio-player-loading{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;width:20px;height:20px;margin-right:12px}
.calls-card .audio-player-wrapper .slider,.media-link.audio .audio-player-wrapper .slider,.media-link.voice .audio-player-wrapper .slider{border-radius:1.5px;height:3px;position:relative}
.calls-card .audio-player-wrapper .slider .progress,.media-link.audio .audio-player-wrapper .slider .progress,.media-link.voice .audio-player-wrapper .slider .progress{width:0;height:100%;background-color:var(--color-primary,#1e6bf1);border-radius:inherit;position:absolute;pointer-events:none}
.calls-card .audio-player-wrapper .slider .progress .pin,.media-link.audio .audio-player-wrapper .slider .progress .pin,.media-link.voice .audio-player-wrapper .slider .progress .pin{right:-8px;top:-6px;height:14px;width:14px;border-radius:8px;position:absolute;pointer-events:all;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.32);box-shadow:0 1px 1px 0 rgba(0,0,0,.32)}
.calls-card .audio-player-wrapper .audio-player-transcription,.media-link.audio .audio-player-wrapper .audio-player-transcription,.media-link.voice .audio-player-wrapper .audio-player-transcription{width:100%;margin-top:8px}
.calls-card .audio-player-wrapper .audio-player-transcription .pointer,.media-link.audio .audio-player-wrapper .audio-player-transcription .pointer,.media-link.voice .audio-player-wrapper .audio-player-transcription .pointer{cursor:pointer}
.calls-card .audio-player-wrapper .audio-player-transcription .transcription,.media-link.audio .audio-player-wrapper .audio-player-transcription .transcription,.media-link.voice .audio-player-wrapper .audio-player-transcription .transcription{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:16px;text-align:left;white-space:normal;margin:16px 0}
.calls-card .audio-player-wrapper .audio-player-transcription .transcription a,.media-link.audio .audio-player-wrapper .audio-player-transcription .transcription a,.media-link.voice .audio-player-wrapper .audio-player-transcription .transcription a{text-decoration:none}
.calls-card .audio-player-wrapper .audio-player-transcription .action,.media-link.audio .audio-player-wrapper .audio-player-transcription .action,.media-link.voice .audio-player-wrapper .audio-player-transcription .action{border-top:1px solid var(--color-content-disable,#636363);padding:16px 0}
.calls-card .audio-player-wrapper .audio-player-transcription .action .full-transcription,.media-link.audio .audio-player-wrapper .audio-player-transcription .action .full-transcription,.media-link.voice .audio-player-wrapper .audio-player-transcription .action .full-transcription{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:8px}
.calls-card .audio-player-wrapper .audio-player-transcription .action .loading,.media-link.audio .audio-player-wrapper .audio-player-transcription .action .loading,.media-link.voice .audio-player-wrapper .audio-player-transcription .action .loading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:8px}
.calls-card .blip-media-link-metadata,.media-link.audio .blip-media-link-metadata,.media-link.voice .blip-media-link-metadata{margin-top:-10px;padding:0 10px 5px 0}
.sk-circle{width:40px;height:40px}
.sk-circle .sk-child{width:100%;height:100%;position:absolute;left:0;top:0}
.sk-circle .sk-child:before{content:"";display:block;margin:0 auto;width:15%;height:15%;background-color:#fff;border-radius:100%;-webkit-animation:sk-circleBounceDelay 1.2s infinite ease-in-out both;animation:sk-circleBounceDelay 1.2s infinite ease-in-out both}
.sk-circle .sk-circle2{-webkit-transform:rotate(30deg);transform:rotate(30deg)}
.sk-circle .sk-circle3{-webkit-transform:rotate(60deg);transform:rotate(60deg)}
.sk-circle .sk-circle4{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.sk-circle .sk-circle5{-webkit-transform:rotate(120deg);transform:rotate(120deg)}
.sk-circle .sk-circle6{-webkit-transform:rotate(150deg);transform:rotate(150deg)}
.sk-circle .sk-circle7{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.sk-circle .sk-circle8{-webkit-transform:rotate(210deg);transform:rotate(210deg)}
.sk-circle .sk-circle9{-webkit-transform:rotate(240deg);transform:rotate(240deg)}
.sk-circle .sk-circle10{-webkit-transform:rotate(270deg);transform:rotate(270deg)}
.sk-circle .sk-circle11{-webkit-transform:rotate(300deg);transform:rotate(300deg)}
.sk-circle .sk-circle12{-webkit-transform:rotate(330deg);transform:rotate(330deg)}
.sk-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.sk-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}
.sk-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}
.sk-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}
.sk-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}
.sk-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}
.sk-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}
.sk-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}
.sk-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}
.sk-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}
.sk-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}
@-webkit-keyframes sk-circleBounceDelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes sk-circleBounceDelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}
#simplifiedVideo{-o-object-fit:fill;object-fit:fill;border-radius:0!important}
#simplifiedVideo,.video-preview-container{background-color:var(--color-surface-1,#f6f6f6)}
.video-preview-container{width:56px;height:56px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.preview-loading{padding-left:20px;padding-top:20px}
#blipVideo{max-height:300px}
.media-link.video .bubble{max-width:500px;padding:0}
.media-link.video .bubble .video-player-wrapper .video-player-controls{padding:10px 16px}
.media-video video{border-radius:0!important}
.calls-card .left .slider,.calls-card .middle .slider,.media-link.media-video .left .slider,.media-link.media-video .middle .slider,.media-link.video .left .slider,.media-link.video .middle .slider{background-color:var(--color-surface-3,#cfcfcf)}
.calls-card .left .progress .pin,.calls-card .middle .progress .pin,.media-link.media-video .left .progress .pin,.media-link.media-video .middle .progress .pin,.media-link.video .left .progress .pin,.media-link.video .middle .progress .pin{background-color:var(--color-content-default,#454545)}
.calls-card .left .video-player-button,.calls-card .middle .video-player-button,.media-link.media-video .left .video-player-button,.media-link.media-video .middle .video-player-button,.media-link.video .left .video-player-button,.media-link.video .middle .video-player-button{fill:var(--color-content-default,#454545)}
.calls-card .left .video-player-time,.calls-card .middle .video-player-time,.media-link.media-video .left .video-player-time,.media-link.media-video .middle .video-player-time,.media-link.video .left .video-player-time,.media-link.video .middle .video-player-time{color:var(--color-content-default,#454545)}
.calls-card .right .slider,.media-link.media-video .right .slider,.media-link.video .right .slider{background-color:var(--color-content-ghost,#8c8c8c)}
.calls-card .right .progress .pin,.media-link.media-video .right .progress .pin,.media-link.video .right .progress .pin{background-color:var(--color-surface-1,#f6f6f6)}
.calls-card .right .video-player-button,.media-link.media-video .right .video-player-button,.media-link.video .right .video-player-button{fill:var(--color-surface-1,#f6f6f6)}
.calls-card .right .video-player-time,.media-link.media-video .right .video-player-time,.media-link.video .right .video-player-time{color:var(--color-surface-1,#f6f6f6)}
.calls-card .form form,.media-link.media-video .form form,.media-link.video .form form{width:auto}
.calls-card .form .form-group .form-control.text,.media-link.media-video .form .form-group .form-control.text,.media-link.video .form .form-group .form-control.text{margin-top:10px}
.calls-card .notification,.media-link.media-video .notification,.media-link.video .notification{color:var(--color-content-disable,#636363)}
.calls-card .video-player-wrapper,.media-link.media-video .video-player-wrapper,.media-link.video .video-player-wrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.calls-card .video-player-wrapper .sk-circle-wrapper,.media-link.media-video .video-player-wrapper .sk-circle-wrapper,.media-link.video .video-player-wrapper .sk-circle-wrapper{position:absolute;left:50%;padding:5px;border-radius:100%;margin-left:-25px}
.calls-card .video-player-wrapper .sk-circle-wrapper .sk-circle,.media-link.media-video .video-player-wrapper .sk-circle-wrapper .sk-circle,.media-link.video .video-player-wrapper .sk-circle-wrapper .sk-circle{position:relative;color:#fff}
.calls-card .video-player-wrapper .video-player,.media-link.media-video .video-player-wrapper .video-player,.media-link.video .video-player-wrapper .video-player{height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:top;align-self:top;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:13px 13px 13px 2px!important}
.calls-card .video-player-wrapper video,.media-link.media-video .video-player-wrapper video,.media-link.video .video-player-wrapper video{height:100%;width:100%}
.calls-card .video-player-wrapper .video-player-controls,.media-link.media-video .video-player-wrapper .video-player-controls,.media-link.video .video-player-wrapper .video-player-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:5px}
.calls-card .video-player-wrapper .volume-control,.media-link.media-video .video-player-wrapper .volume-control,.media-link.video .video-player-wrapper .volume-control{height:100%;position:relative}
.calls-card .video-player-wrapper .volume-slider-wrapper,.media-link.media-video .video-player-wrapper .volume-slider-wrapper,.media-link.video .video-player-wrapper .volume-slider-wrapper{background-color:rgba(0,0,0,.7);padding:15px;bottom:90px;left:-40px;position:absolute;border-radius:10px;-webkit-transform:rotate(90deg);transform:rotate(-90deg);-webkit-transition:all .15s linear;transition:all .15s linear}
.calls-card .video-player-wrapper .volume-slider,.media-link.media-video .video-player-wrapper .volume-slider,.media-link.video .video-player-wrapper .volume-slider{width:100px;position:relative;margin:0}
.calls-card .video-player-wrapper .hide,.media-link.media-video .video-player-wrapper .hide,.media-link.video .video-player-wrapper .hide{opacity:0;visibility:hidden}
.calls-card .video-player-wrapper .video-player-volume,.media-link.media-video .video-player-wrapper .video-player-volume,.media-link.video .video-player-wrapper .video-player-volume{position:absolute;width:100%;bottom:-11px;opacity:0;cursor:pointer}
.calls-card .video-player-wrapper video::-webkit-media-controls-enclosure,.media-link.media-video .video-player-wrapper video::-webkit-media-controls-enclosure,.media-link.video .video-player-wrapper video::-webkit-media-controls-enclosure{display:none}
.calls-card .video-player-wrapper .video-player-button,.media-link.media-video .video-player-wrapper .video-player-button,.media-link.video .video-player-wrapper .video-player-button{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}
.calls-card .video-player-wrapper .player-button,.media-link.media-video .video-player-wrapper .player-button,.media-link.video .video-player-wrapper .player-button{cursor:pointer}
.calls-card .video-player-wrapper .player-button-left,.media-link.media-video .video-player-wrapper .player-button-left,.media-link.video .video-player-wrapper .player-button-left{margin-right:15px;width:14px}
.calls-card .video-player-wrapper .player-button-right,.media-link.media-video .video-player-wrapper .player-button-right,.media-link.video .video-player-wrapper .player-button-right{margin-left:15px}
.calls-card .video-player-wrapper .video-player-bar,.media-link.media-video .video-player-wrapper .video-player-bar,.media-link.video .video-player-wrapper .video-player-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin-top:10px}
.calls-card .video-player-wrapper .video-player-time,.media-link.media-video .video-player-wrapper .video-player-time,.media-link.video .video-player-wrapper .video-player-time{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-family:Nunito Sans,sans-serif;font-size:x-small;line-height:10px}
.calls-card .video-player-wrapper .video-player-range,.media-link.media-video .video-player-wrapper .video-player-range,.media-link.video .video-player-wrapper .video-player-range{position:relative;bottom:10px;opacity:0;margin:0 0 -9px;width:100%;padding:0;height:16px;cursor:pointer}
.calls-card .video-player-wrapper .slider,.media-link.media-video .video-player-wrapper .slider,.media-link.video .video-player-wrapper .slider{border-radius:1.5px;height:3px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative}
.calls-card .video-player-wrapper .slider .progress,.media-link.media-video .video-player-wrapper .slider .progress,.media-link.video .video-player-wrapper .slider .progress{width:0;height:100%;background-color:var(--color-primary,#1e6bf1);border-radius:inherit;position:absolute;pointer-events:none}
.calls-card .video-player-wrapper .slider .progress .pin,.media-link.media-video .video-player-wrapper .slider .progress .pin,.media-link.video .video-player-wrapper .slider .progress .pin{right:-8px;top:-6px;height:14px;width:14px;border-radius:8px;position:absolute;pointer-events:all;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.32);box-shadow:0 1px 1px 0 rgba(0,0,0,.32)}
.calls-card .video-player-wrapper .video-description,.media-link.media-video .video-player-wrapper .video-description,.media-link.video .video-player-wrapper .video-description{text-align:left;padding:.5rem 1rem}
.calls-card .video-full-screen,.media-link.media-video .video-full-screen,.media-link.video .video-full-screen{background-color:#000;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%}
.calls-card .video-full-screen #blipVideo,.media-link.media-video .video-full-screen #blipVideo,.media-link.video .video-full-screen #blipVideo{max-height:100%;border-radius:0!important}
.calls-card .video-full-screen .video-player-controls.hide-player,.media-link.media-video .video-full-screen .video-player-controls.hide-player,.media-link.video .video-full-screen .video-player-controls.hide-player{bottom:-50px;visibility:hidden;opacity:0}
.calls-card .video-full-screen .video-player-controls,.media-link.media-video .video-full-screen .video-player-controls,.media-link.video .video-full-screen .video-player-controls{background-color:rgba(0,0,0,.7);margin:0;position:absolute;width:100%;bottom:0;left:0;-webkit-transition:all .5s linear;transition:all .5s linear}
.calls-card .video-full-screen .video-player-controls .player-button,.media-link.media-video .video-full-screen .video-player-controls .player-button,.media-link.video .video-full-screen .video-player-controls .player-button{fill:#a7bec3!important}
.calls-card .video-full-screen .video-player-controls .video-player-time,.media-link.media-video .video-full-screen .video-player-controls .video-player-time,.media-link.video .video-full-screen .video-player-controls .video-player-time{color:#a7bec3!important}
.calls-card .video-full-screen .video-player-controls .pin,.media-link.media-video .video-full-screen .video-player-controls .pin,.media-link.video .video-full-screen .video-player-controls .pin{background-color:#0cc8cc!important}
.calls-card .blip-media-link-metadata,.media-link.media-video .blip-media-link-metadata,.media-link.video .blip-media-link-metadata{margin-top:-20px;padding:0 10px 10px 0}
.blip-container.calls-voice-request .bubble[data-v-07cd004e]{text-align:start;padding:8px 16px;max-width:368px!important}
.blip-container.calls-voice-request .divider[data-v-07cd004e]{border-top:1px solid var(--color-content-ghost,#8c8c8c);margin-top:8px;margin-bottom:8px;width:100%}
.blip-container.calls-voice-request .action[data-v-07cd004e]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:8px;margin-bottom:8px}
.blip-container.calls-voice-request .action .title-action[data-v-07cd004e]{margin-left:8px}
.blip-container.calls-permission-request .bubble[data-v-49116c8b]{text-align:start;overflow:hidden;padding:8px 16px;max-width:368px!important}
.blip-container.calls-permission-request .divider[data-v-49116c8b]{border-top:1px solid var(--color-content-ghost,#8c8c8c);margin-top:8px;margin-bottom:8px;width:100%}
.blip-container.calls-permission-request .action[data-v-49116c8b]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;padding-top:8px;margin-bottom:8px}
.blip-container.calls-permission-request .action .radio[data-v-49116c8b]{display:-webkit-box;display:-ms-flexbox;display:flex}
.blip-container.calls-permission-request .action .radio .circle[data-v-49116c8b]{height:24px;width:24px;border-radius:50%;border:2px solid var(--color-content-default,#454545)}
.blip-container.calls-permission-request .action .radio .circle.right[data-v-49116c8b]{border-color:var(--color-surface-1,#f6f6f6)}
.blip-container.calls-permission-request .action .radio .label[data-v-49116c8b]{margin-left:8px}
.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .5s;transition:opacity .5s}
.fade-enter,.fade-leave-to{opacity:0}
.slide-fade-enter-active{-webkit-transition:all .8s ease;transition:all .8s ease}
.slide-fade-leave-active{-webkit-transition:all .8s cubic-bezier(1,.5,.8,1);transition:all .8s cubic-bezier(1,.5,.8,1)}
.slide-fade-enter,.slide-fade-leave-to{-webkit-transform:translateX(10px);transform:translateX(10px);opacity:0}
.flip-container{-webkit-perspective:1000px;perspective:1000px}
.flip-container.hover .flipper,.flip-container:hover .flipper{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.flipper{-webkit-transition:.6s;transition:.6s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:relative}
.back,.front{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;top:0;left:0}
.front{z-index:2;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
.back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.skeleton{-webkit-animation:skeleton-loading 1s linear infinite alternate;animation:skeleton-loading 1s linear infinite alternate;width:100%}
@-webkit-keyframes skeleton-loading{0%{background-color:#c2cfd6}to{background-color:#f0f3f5}}
@keyframes skeleton-loading{0%{background-color:#c2cfd6}to{background-color:#f0f3f5}}
.blip-clearfix{clear:both}
.blip-flex{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex}
.blip-relative{position:relative}
.ss-wrapper{overflow:hidden;width:100%;z-index:1;float:left}
.ss-content,.ss-wrapper{height:100%;position:relative}
.ss-content{width:calc(100% + 18px);padding:0;overflow-y:scroll;-webkit-box-sizing:border-box;box-sizing:border-box}
.ss-content.rtl{width:calc(100% + 18px);right:auto}
.ss-scroll{position:relative;background:rgba(0,0,0,.3);width:9px;border-radius:4px;top:0;z-index:2;cursor:pointer;opacity:1;-webkit-transition:opacity .25s linear;transition:opacity .25s linear}
.ss-hidden{display:none}
.ss-container:active .ss-scroll,.ss-container:hover .ss-scroll{opacity:1}
.ss-grabbed{-o-user-select:none;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}
*{font-family:Nunito Sans,sans-serif}
.flex{display:-webkit-box;display:-ms-flexbox;display:flex}
.failure{color:var(--color-extended-red,#e60f0f);font-size:10px;margin-right:5px}
.failure img{margin:0;height:13px}
.blip-container{margin-bottom:10px;width:100%;position:relative}
.blip-container,.blip-container>div:not(.bubble){text-align:center}
.blip-card-container{width:100%;font-size:16px}
.blip-card{width:100%}
.blip-card *,.blip-card :after,.blip-card :before{-webkit-box-sizing:border-box;box-sizing:border-box}
.blip-card .bubble{position:relative;margin-bottom:5px;width:auto;height:100%;max-width:90%;min-width:160px;font-size:16px;font-weight:400;line-height:20px;white-space:pre-line;border:1px solid var(--color-content-ghost,#8c8c8c)}
.blip-card .bubble.left{border-radius:13px 13px 13px 2px;background-color:var(--color-surface-1,#f6f6f6);float:left}
.blip-card .bubble.left,.blip-card .bubble.left .typo{color:var(--color-content-default,#454545)}
.blip-card .bubble.left .typo-light{color:var(--color-content-ghost,#8c8c8c)}
.blip-card .bubble.middle{border-radius:13px 13px 13px 13px;background-color:var(--color-surface-1,#f6f6f6);color:var(--color-content-default,#454545);margin-left:auto;margin-right:auto;display:inline-block}
.blip-card .ratio{border-radius:0}
.blip-card .bubble.right{border-radius:13px 2px 13px 13px;background-color:var(--color-content-default,#454545);float:right}
.blip-card .bubble.right,.blip-card .bubble.right .typo{color:var(--color-surface-1,#f6f6f6)}
.blip-card .bubble.right .failed-message>bds-icon,.blip-card .bubble.right .typo-light{color:var(--color-surface-2,#e0e0e0)}
.blip-card .bubble.right .in-reaction-to-message-container,.blip-card .bubble.right .in-reply-to-message-container{background-color:var(--color-content-disable,#636363)}
.blip-card .notification{font-size:10px;color:var(--color-content-disable,#636363);line-height:14px;clear:both}
.blip-card .notification.left{float:left}
.blip-card .notification.right{float:right}
.blip-card a{cursor:pointer;text-decoration:underline}
.blip-card .left a,.blip-card .middle a,.blip-card .right a{color:var(--color-primary,#1e6bf1)}
.blip-card .right a{font-weight:700}
.blip-card form .fixed-options li span{margin-left:17px}
.blip-card .fixed-options a{text-decoration:none}
.blip-card .fixed-options ul{list-style-type:none;clear:both;margin:0;margin-top:15px;padding:0}
.blip-card .fixed-options li{cursor:pointer;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;margin:2px;font-size:16px;font-weight:500;word-break:break-word;display:-webkit-box;display:-ms-flexbox;display:flex}
.blip-card .fixed-options li div,.blip-card .fixed-options li span{width:100%;text-align:center}
.blip-card .fixed-options li .remove-option{color:var(--color-primary,#1e6bf1);width:17px;text-align:right;margin-left:0;visibility:hidden}
.blip-card .fixed-options li:hover .remove-option{visibility:visible}
.blip-card .fixed-options ul{margin-left:-16px;margin-right:-16px}
.blip-card .left .fixed-options li,.blip-card .middle .fixed-options li{color:var(--color-content-default,#454545);border-top:.5px solid var(--color-content-ghost,#8c8c8c)}
.blip-card .right .fixed-options li{color:var(--color-surface-2,#e0e0e0);border-top:.5px solid var(--color-content-ghost,#8c8c8c)}
.blip-card .header{overflow:hidden;border-radius:inherit}
.blip-card .header .ratio{background-size:cover;background-position:50%}
.blip-card .header .ratio1-1{overflow:hidden}
.blip-card .header .ratio1-1:before{content:"";display:block;padding-top:100%}
.blip-card .header .ratio2-1{overflow:hidden}
.blip-card .header .ratio2-1:before{content:"";display:block;padding-top:50%}
.blip-card .header img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;top:0;left:0;bottom:0;right:0}
.blip-card .header .title{text-align:left;margin:0;padding:10px 20px}
.blip-card .header .title strong{display:block}
.blip-card .editIco,.blip-card .saveIco{cursor:pointer}
.blip-card .editIco{padding:3px;display:none;top:-24px;right:-65px}
.blip-card .editIco,.blip-card .saveIco{border-radius:50%;width:30px;height:30px;text-align:center;position:absolute;z-index:1}
.blip-card .saveIco{padding:5px;top:-25px;right:-57px}
.blip-card .editIco img,.blip-card .saveIco img{display:inline-block;vertical-align:middle}
.blip-card .closeIco{right:-10px}
.blip-card .trashIco{right:-17px}
.blip-card .form-group{margin-bottom:.3rem;padding:10px 16px;color:var(--color-content-default,#454545)}
.blip-card .form-group .input-error{color:var(--color-error,#f99f9f)}
.blip-card .form-group .help{padding:5px;font-size:11px}
.blip-card .form-control{display:block;width:100%;padding:.375rem .75rem;color:var(--color-content-default,#454545);background-color:var(--color-surface-1,#f6f6f6);background-image:none;background-clip:padding-box;border:1px solid var(--color-content-ghost,#8c8c8c);border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}
.blip-card form{display:block;margin-top:0;padding:10px;width:300px}
.blip-card .form-check{color:var(--color-content-default,#454545);position:relative;display:block;margin-bottom:.5rem}
.blip-card .form-check-input{position:absolute;margin-top:.25rem;margin-left:-1.25rem}
.blip-card .form-check-label{padding-left:1.25rem;margin-bottom:0;display:inline-block}
.blip-card .input-error{border-color:var(--color-error,#f99f9f)}
.blip-card input:focus,.blip-card textarea:focus{outline:none!important}
.blip-card .input-error:invalid{border-color:var(--color-error,#f99f9f)}
.blip-card .help.input-error{color:var(--color-error,#f99f9f)}
.blip-card .is-disabled{opacity:.5;pointer-events:none}
.blip-card .text-center{text-align:center}
.blip-card .text-left{text-align:left}
.blip-card .dashed-border{border:1px dashed var(--color-content-ghost,#8c8c8c)}
.blip-card .primary-color{color:var(--color-primary,#1e6bf1)}
.blip-card .delete-color{color:var(--color-delete,#e60f0f)}
.blip-card .color-gray{color:var(--color-content-ghost,#8c8c8c)}
.blip-card .btn{padding:5px;border:0;cursor:pointer}
.blip-card .btn-white{padding:10px;border-radius:6px;background-color:var(--color-surface-1,#f6f6f6);border:1px solid var(--color-primary,#1e6bf1)}
.blip-card .btn-dashed{padding:10px;border-radius:6px;border:1px dashed var(--color-primary,#1e6bf1)}
.blip-card .w-49{width:49%}
.blip-card .modal{-webkit-transition:all .5s ease;transition:all .5s ease;position:absolute;display:block;z-index:2}
.blip-card .tabs{color:var(--color-content-default,#454545);font-weight:700;margin:10px;margin-bottom:20px}
.blip-card .tabs span{padding:5px;cursor:pointer}
.blip-card .tabs .active{border-bottom:4px solid var(--color-primary,#1e6bf1)}
.blip-card .line{background-color:var(--color-content-disable,#636363);width:100%;height:1px;margin:10px 0}
.blip-card video{border-radius:13px 13px 13px 2px!important}
.blip-card .form-group{padding:10px;color:#a7bec3}
.blip-card .form-group .textarea{margin-top:10px}
.blip-card .form-group .input-error{color:#fb7a6d}
.blip-card .form-group .upload-intructions{color:var(--color-content-disable,#636363);padding:5px;padding-bottom:0;font-size:12px}
.blip-card .form-group ::-webkit-input-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .form-group ::-moz-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .form-group :-ms-input-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .form-group :-moz-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .blip-card-flex{padding:0;margin:0;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}
.blip-card .flex-item{padding:5px;text-align:center;-webkit-box-flex:1;-ms-flex:1;flex:1}
.blip-card .flex-item button{width:100%}
.blip-container:hover .editIco{display:block}
.blip-container:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.blip-bubble .blip-card:first-child .bubble.left{background-color:#000}
.pointer{cursor:pointer}
.define-metadata{color:#2cc3d5;font-size:12px;margin:0;float:right;padding:0;border:none;background:none;cursor:pointer}
.define-metadata:hover{color:#15afb2}
.define-metadata:focus{outline:0}
.disable-selection{-webkit-user-select:none}
.icon-button-margin{margin-right:10%}
.icon-button-top{top:-30px!important}
.bold-color{color:var(--color-surface-1,#f6f6f6)}
.single-line-text-overflow-ellipsis{overflow:hidden;position:relative;text-overflow:ellipsis}
.multiline-text-overflow-ellipsis{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.blip-container--with-photo.left{margin-left:35px}
.blip-container--with-photo.right{margin-right:55px}
.blip-card-photo{position:absolute;border-radius:50%;background-size:100%}
.blip-card-photo.left{margin-right:10px}
.blip-card-photo.right{margin-right:20px}
.blip-card .notification.left[data-v-73969287],.blip-message-group .blip-card-group .group-notification.left[data-v-73969287],.group-notification.right[data-v-73969287],.notification.right[data-v-73969287]{float:none!important}
.blip-card .notification.left[data-v-73969287],.blip-message-group .blip-card-group .group-notification.left[data-v-73969287]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
.blip-card .notification.right[data-v-73969287],.blip-message-group .blip-card-group .group-notification.right[data-v-73969287]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
.blip-card .blip-card-reply-button[data-v-c2c02df0]{display:none;margin-bottom:5px}
.blip-card:hover .blip-card-reply-button[data-v-c2c02df0]{display:block}
.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .5s;transition:opacity .5s}
.fade-enter,.fade-leave-to{opacity:0}
.slide-fade-enter-active{-webkit-transition:all .8s ease;transition:all .8s ease}
.slide-fade-leave-active{-webkit-transition:all .8s cubic-bezier(1,.5,.8,1);transition:all .8s cubic-bezier(1,.5,.8,1)}
.slide-fade-enter,.slide-fade-leave-to{-webkit-transform:translateX(10px);transform:translateX(10px);opacity:0}
.flip-container{-webkit-perspective:1000px;perspective:1000px}
.flip-container.hover .flipper,.flip-container:hover .flipper{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.flipper{-webkit-transition:.6s;transition:.6s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:relative}
.back,.front{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;top:0;left:0}
.front{z-index:2;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
.back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.skeleton{-webkit-animation:skeleton-loading 1s linear infinite alternate;animation:skeleton-loading 1s linear infinite alternate;width:100%}
@-webkit-keyframes skeleton-loading{0%{background-color:#c2cfd6}to{background-color:#f0f3f5}}
@keyframes skeleton-loading{0%{background-color:#c2cfd6}to{background-color:#f0f3f5}}
.blip-clearfix{clear:both}
.blip-flex{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex}
.blip-relative{position:relative}
.ss-wrapper{overflow:hidden;width:100%;z-index:1;float:left}
.ss-content,.ss-wrapper{height:100%;position:relative}
.ss-content{width:calc(100% + 18px);padding:0;overflow-y:scroll;-webkit-box-sizing:border-box;box-sizing:border-box}
.ss-content.rtl{width:calc(100% + 18px);right:auto}
.ss-scroll{position:relative;background:rgba(0,0,0,.3);width:9px;border-radius:4px;top:0;z-index:2;cursor:pointer;opacity:1;-webkit-transition:opacity .25s linear;transition:opacity .25s linear}
.ss-hidden{display:none}
.ss-container:active .ss-scroll,.ss-container:hover .ss-scroll{opacity:1}
.ss-grabbed{-o-user-select:none;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}
*{font-family:Nunito Sans,sans-serif}
.flex{display:-webkit-box;display:-ms-flexbox;display:flex}
.failure{color:var(--color-extended-red,#e60f0f);font-size:10px;margin-right:5px}
.failure img{margin:0;height:13px}
.blip-container{margin-bottom:10px;width:100%;position:relative}
.blip-container,.blip-container>div:not(.bubble){text-align:center}
.blip-card-container{width:100%;font-size:16px}
.blip-card{width:100%}
.blip-card *,.blip-card :after,.blip-card :before{-webkit-box-sizing:border-box;box-sizing:border-box}
.blip-card .bubble{position:relative;margin-bottom:5px;width:auto;height:100%;max-width:90%;min-width:160px;font-size:16px;font-weight:400;line-height:20px;white-space:pre-line;border:1px solid var(--color-content-ghost,#8c8c8c)}
.blip-card .bubble.left{border-radius:13px 13px 13px 2px;background-color:var(--color-surface-1,#f6f6f6);float:left}
.blip-card .bubble.left,.blip-card .bubble.left .typo{color:var(--color-content-default,#454545)}
.blip-card .bubble.left .typo-light{color:var(--color-content-ghost,#8c8c8c)}
.blip-card .bubble.middle{border-radius:13px 13px 13px 13px;background-color:var(--color-surface-1,#f6f6f6);color:var(--color-content-default,#454545);margin-left:auto;margin-right:auto;display:inline-block}
.blip-card .ratio{border-radius:0}
.blip-card .bubble.right{border-radius:13px 2px 13px 13px;background-color:var(--color-content-default,#454545);float:right}
.blip-card .bubble.right,.blip-card .bubble.right .typo{color:var(--color-surface-1,#f6f6f6)}
.blip-card .bubble.right .failed-message>bds-icon,.blip-card .bubble.right .typo-light{color:var(--color-surface-2,#e0e0e0)}
.blip-card .bubble.right .in-reaction-to-message-container,.blip-card .bubble.right .in-reply-to-message-container{background-color:var(--color-content-disable,#636363)}
.blip-card .notification{font-size:10px;color:var(--color-content-disable,#636363);line-height:14px;clear:both}
.blip-card .notification.left{float:left}
.blip-card .notification.right{float:right}
.blip-card a{cursor:pointer;text-decoration:underline}
.blip-card .left a,.blip-card .middle a,.blip-card .right a{color:var(--color-primary,#1e6bf1)}
.blip-card .right a{font-weight:700}
.blip-card form .fixed-options li span{margin-left:17px}
.blip-card .fixed-options a{text-decoration:none}
.blip-card .fixed-options ul{list-style-type:none;clear:both;margin:0;margin-top:15px;padding:0}
.blip-card .fixed-options li{cursor:pointer;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;margin:2px;font-size:16px;font-weight:500;word-break:break-word;display:-webkit-box;display:-ms-flexbox;display:flex}
.blip-card .fixed-options li div,.blip-card .fixed-options li span{width:100%;text-align:center}
.blip-card .fixed-options li .remove-option{color:var(--color-primary,#1e6bf1);width:17px;text-align:right;margin-left:0;visibility:hidden}
.blip-card .fixed-options li:hover .remove-option{visibility:visible}
.blip-card .fixed-options ul{margin-left:-16px;margin-right:-16px}
.blip-card .left .fixed-options li,.blip-card .middle .fixed-options li{color:var(--color-content-default,#454545);border-top:.5px solid var(--color-content-ghost,#8c8c8c)}
.blip-card .right .fixed-options li{color:var(--color-surface-2,#e0e0e0);border-top:.5px solid var(--color-content-ghost,#8c8c8c)}
.blip-card .header{overflow:hidden;border-radius:inherit}
.blip-card .header .ratio{background-size:cover;background-position:50%}
.blip-card .header .ratio1-1{overflow:hidden}
.blip-card .header .ratio1-1:before{content:"";display:block;padding-top:100%}
.blip-card .header .ratio2-1{overflow:hidden}
.blip-card .header .ratio2-1:before{content:"";display:block;padding-top:50%}
.blip-card .header img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;top:0;left:0;bottom:0;right:0}
.blip-card .header .title{text-align:left;margin:0;padding:10px 20px}
.blip-card .header .title strong{display:block}
.blip-card .editIco,.blip-card .saveIco{cursor:pointer}
.blip-card .editIco{padding:3px;display:none;top:-24px;right:-65px}
.blip-card .editIco,.blip-card .saveIco{border-radius:50%;width:30px;height:30px;text-align:center;position:absolute;z-index:1}
.blip-card .saveIco{padding:5px;top:-25px;right:-57px}
.blip-card .editIco img,.blip-card .saveIco img{display:inline-block;vertical-align:middle}
.blip-card .closeIco{right:-10px}
.blip-card .trashIco{right:-17px}
.blip-card .form-group{margin-bottom:.3rem;padding:10px 16px;color:var(--color-content-default,#454545)}
.blip-card .form-group .input-error{color:var(--color-error,#f99f9f)}
.blip-card .form-group .help{padding:5px;font-size:11px}
.blip-card .form-control{display:block;width:100%;padding:.375rem .75rem;color:var(--color-content-default,#454545);background-color:var(--color-surface-1,#f6f6f6);background-image:none;background-clip:padding-box;border:1px solid var(--color-content-ghost,#8c8c8c);border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}
.blip-card form{display:block;margin-top:0;padding:10px;width:300px}
.blip-card .form-check{color:var(--color-content-default,#454545);position:relative;display:block;margin-bottom:.5rem}
.blip-card .form-check-input{position:absolute;margin-top:.25rem;margin-left:-1.25rem}
.blip-card .form-check-label{padding-left:1.25rem;margin-bottom:0;display:inline-block}
.blip-card .input-error{border-color:var(--color-error,#f99f9f)}
.blip-card input:focus,.blip-card textarea:focus{outline:none!important}
.blip-card .input-error:invalid{border-color:var(--color-error,#f99f9f)}
.blip-card .help.input-error{color:var(--color-error,#f99f9f)}
.blip-card .is-disabled{opacity:.5;pointer-events:none}
.blip-card .text-center{text-align:center}
.blip-card .text-left{text-align:left}
.blip-card .dashed-border{border:1px dashed var(--color-content-ghost,#8c8c8c)}
.blip-card .primary-color{color:var(--color-primary,#1e6bf1)}
.blip-card .delete-color{color:var(--color-delete,#e60f0f)}
.blip-card .color-gray{color:var(--color-content-ghost,#8c8c8c)}
.blip-card .btn{padding:5px;border:0;cursor:pointer}
.blip-card .btn-white{padding:10px;border-radius:6px;background-color:var(--color-surface-1,#f6f6f6);border:1px solid var(--color-primary,#1e6bf1)}
.blip-card .btn-dashed{padding:10px;border-radius:6px;border:1px dashed var(--color-primary,#1e6bf1)}
.blip-card .w-49{width:49%}
.blip-card .modal{-webkit-transition:all .5s ease;transition:all .5s ease;position:absolute;display:block;z-index:2}
.blip-card .tabs{color:var(--color-content-default,#454545);font-weight:700;margin:10px;margin-bottom:20px}
.blip-card .tabs span{padding:5px;cursor:pointer}
.blip-card .tabs .active{border-bottom:4px solid var(--color-primary,#1e6bf1)}
.blip-card .line{background-color:var(--color-content-disable,#636363);width:100%;height:1px;margin:10px 0}
.blip-card video{border-radius:13px 13px 13px 2px!important}
.blip-card .form-group{padding:10px;color:#a7bec3}
.blip-card .form-group .textarea{margin-top:10px}
.blip-card .form-group .input-error{color:#fb7a6d}
.blip-card .form-group .upload-intructions{color:var(--color-content-disable,#636363);padding:5px;padding-bottom:0;font-size:12px}
.blip-card .form-group ::-webkit-input-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .form-group ::-moz-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .form-group :-ms-input-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .form-group :-moz-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .blip-card-flex{padding:0;margin:0;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}
.blip-card .flex-item{padding:5px;text-align:center;-webkit-box-flex:1;-ms-flex:1;flex:1}
.blip-card .flex-item button{width:100%}
.blip-container:hover .editIco{display:block}
.blip-container:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.blip-bubble .blip-card:first-child .bubble.left{background-color:#000}
.pointer{cursor:pointer}
.define-metadata{color:#2cc3d5;font-size:12px;margin:0;float:right;padding:0;border:none;background:none;cursor:pointer}
.define-metadata:hover{color:#15afb2}
.define-metadata:focus{outline:0}
.disable-selection{-webkit-user-select:none}
.icon-button-margin{margin-right:10%}
.icon-button-top{top:-30px!important}
.bold-color{color:var(--color-surface-1,#f6f6f6)}
.single-line-text-overflow-ellipsis{overflow:hidden;position:relative;text-overflow:ellipsis}
.multiline-text-overflow-ellipsis{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.blip-message-group{position:relative}
.blip-message-group .icon-message-failed{bottom:10px;right:0;width:25px;height:25px;color:var(--color-extended-red,#e60f0f);cursor:pointer;position:absolute}
.blip-message-group .blip-card-photo,.blip-message-group .icon-message-failed{background-position:50%;background-repeat:no-repeat;background-size:cover}
.blip-message-group .blip-card-group{margin-bottom:20px}
.blip-message-group .blip-card-group .blip-container:not(.document-select){margin-bottom:0}
.blip-message-group .blip-card-group .blip-container:not(.document-select)>.bubble{margin-bottom:3px}
.blip-message-group .blip-card-group>:first-child :not(.unsuported-content)>.bubble.right{border-radius:13px 13px 2px 13px}
.blip-message-group .blip-card-group>:first-child :not(.unsuported-content)>.bubble.right .description-wrapper{border-radius:0 13px 2px 0}
.blip-message-group .blip-card-group>:not(:first-child) :not(.unsuported-content)>.bubble.right{border-radius:13px 2px 2px 13px}
.blip-message-group .blip-card-group>:first-child :not(.unsuported-content)>.bubble.left{border-radius:13px 13px 13px 2px}
.blip-message-group .blip-card-group>:not(:first-child) :not(.unsuported-content)>.bubble.left{border-radius:2px 13px 13px 2px}
.blip-message-group .blip-card-group>:first-child .bubble.middle{border-radius:13px 13px 2px 2px}
.blip-message-group .blip-card-group>:not(:first-child) .bubble.middle{border-radius:2px 2px 2px 2px}
.blip-message-group .blip-card-group .notification{display:none!important}
.blip-message-group .blip-card-group .group-notification{font-size:10px;color:var(--color-content-disable,#636363);line-height:14px;clear:both}
.blip-message-group .blip-card-group .group-notification.left{float:left}
.blip-message-group .blip-card-group .group-notification.right{float:right}
.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .5s;transition:opacity .5s}
.fade-enter,.fade-leave-to{opacity:0}
.slide-fade-enter-active{-webkit-transition:all .8s ease;transition:all .8s ease}
.slide-fade-leave-active{-webkit-transition:all .8s cubic-bezier(1,.5,.8,1);transition:all .8s cubic-bezier(1,.5,.8,1)}
.slide-fade-enter,.slide-fade-leave-to{-webkit-transform:translateX(10px);transform:translateX(10px);opacity:0}
.flip-container{-webkit-perspective:1000px;perspective:1000px}
.flip-container.hover .flipper,.flip-container:hover .flipper{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.flipper{-webkit-transition:.6s;transition:.6s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:relative}
.back,.front{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;top:0;left:0}
.front{z-index:2;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
.back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.skeleton{-webkit-animation:skeleton-loading 1s linear infinite alternate;animation:skeleton-loading 1s linear infinite alternate;width:100%}
@-webkit-keyframes skeleton-loading{0%{background-color:#c2cfd6}to{background-color:#f0f3f5}}
@keyframes skeleton-loading{0%{background-color:#c2cfd6}to{background-color:#f0f3f5}}
.blip-clearfix{clear:both}
.blip-flex{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex}
.blip-relative{position:relative}
.ss-wrapper{overflow:hidden;width:100%;z-index:1;float:left}
.ss-content,.ss-wrapper{height:100%;position:relative}
.ss-content{width:calc(100% + 18px);padding:0;overflow-y:scroll;-webkit-box-sizing:border-box;box-sizing:border-box}
.ss-content.rtl{width:calc(100% + 18px);right:auto}
.ss-scroll{position:relative;background:rgba(0,0,0,.3);width:9px;border-radius:4px;top:0;z-index:2;cursor:pointer;opacity:1;-webkit-transition:opacity .25s linear;transition:opacity .25s linear}
.ss-hidden{display:none}
.ss-container:active .ss-scroll,.ss-container:hover .ss-scroll{opacity:1}
.ss-grabbed{-o-user-select:none;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}
*{font-family:Nunito Sans,sans-serif}
.flex{display:-webkit-box;display:-ms-flexbox;display:flex}
.failure{color:var(--color-extended-red,#e60f0f);font-size:10px;margin-right:5px}
.failure img{margin:0;height:13px}
.blip-container{margin-bottom:10px;width:100%;position:relative}
.blip-container,.blip-container>div:not(.bubble){text-align:center}
.blip-card-container{width:100%;font-size:16px}
.blip-card{width:100%}
.blip-card *,.blip-card :after,.blip-card :before{-webkit-box-sizing:border-box;box-sizing:border-box}
.blip-card .bubble{position:relative;margin-bottom:5px;width:auto;height:100%;max-width:90%;min-width:160px;font-size:16px;font-weight:400;line-height:20px;white-space:pre-line;border:1px solid var(--color-content-ghost,#8c8c8c)}
.blip-card .bubble.left{border-radius:13px 13px 13px 2px;background-color:var(--color-surface-1,#f6f6f6);float:left}
.blip-card .bubble.left,.blip-card .bubble.left .typo{color:var(--color-content-default,#454545)}
.blip-card .bubble.left .typo-light{color:var(--color-content-ghost,#8c8c8c)}
.blip-card .bubble.middle{border-radius:13px 13px 13px 13px;background-color:var(--color-surface-1,#f6f6f6);color:var(--color-content-default,#454545);margin-left:auto;margin-right:auto;display:inline-block}
.blip-card .ratio{border-radius:0}
.blip-card .bubble.right{border-radius:13px 2px 13px 13px;background-color:var(--color-content-default,#454545);float:right}
.blip-card .bubble.right,.blip-card .bubble.right .typo{color:var(--color-surface-1,#f6f6f6)}
.blip-card .bubble.right .failed-message>bds-icon,.blip-card .bubble.right .typo-light{color:var(--color-surface-2,#e0e0e0)}
.blip-card .bubble.right .in-reaction-to-message-container,.blip-card .bubble.right .in-reply-to-message-container{background-color:var(--color-content-disable,#636363)}
.blip-card .notification{font-size:10px;color:var(--color-content-disable,#636363);line-height:14px;clear:both}
.blip-card .notification.left{float:left}
.blip-card .notification.right{float:right}
.blip-card a{cursor:pointer;text-decoration:underline}
.blip-card .left a,.blip-card .middle a,.blip-card .right a{color:var(--color-primary,#1e6bf1)}
.blip-card .right a{font-weight:700}
.blip-card form .fixed-options li span{margin-left:17px}
.blip-card .fixed-options a{text-decoration:none}
.blip-card .fixed-options ul{list-style-type:none;clear:both;margin:0;margin-top:15px;padding:0}
.blip-card .fixed-options li{cursor:pointer;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;margin:2px;font-size:16px;font-weight:500;word-break:break-word;display:-webkit-box;display:-ms-flexbox;display:flex}
.blip-card .fixed-options li div,.blip-card .fixed-options li span{width:100%;text-align:center}
.blip-card .fixed-options li .remove-option{color:var(--color-primary,#1e6bf1);width:17px;text-align:right;margin-left:0;visibility:hidden}
.blip-card .fixed-options li:hover .remove-option{visibility:visible}
.blip-card .fixed-options ul{margin-left:-16px;margin-right:-16px}
.blip-card .left .fixed-options li,.blip-card .middle .fixed-options li{color:var(--color-content-default,#454545);border-top:.5px solid var(--color-content-ghost,#8c8c8c)}
.blip-card .right .fixed-options li{color:var(--color-surface-2,#e0e0e0);border-top:.5px solid var(--color-content-ghost,#8c8c8c)}
.blip-card .header{overflow:hidden;border-radius:inherit}
.blip-card .header .ratio{background-size:cover;background-position:50%}
.blip-card .header .ratio1-1{overflow:hidden}
.blip-card .header .ratio1-1:before{content:"";display:block;padding-top:100%}
.blip-card .header .ratio2-1{overflow:hidden}
.blip-card .header .ratio2-1:before{content:"";display:block;padding-top:50%}
.blip-card .header img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;top:0;left:0;bottom:0;right:0}
.blip-card .header .title{text-align:left;margin:0;padding:10px 20px}
.blip-card .header .title strong{display:block}
.blip-card .editIco,.blip-card .saveIco{cursor:pointer}
.blip-card .editIco{padding:3px;display:none;top:-24px;right:-65px}
.blip-card .editIco,.blip-card .saveIco{border-radius:50%;width:30px;height:30px;text-align:center;position:absolute;z-index:1}
.blip-card .saveIco{padding:5px;top:-25px;right:-57px}
.blip-card .editIco img,.blip-card .saveIco img{display:inline-block;vertical-align:middle}
.blip-card .closeIco{right:-10px}
.blip-card .trashIco{right:-17px}
.blip-card .form-group{margin-bottom:.3rem;padding:10px 16px;color:var(--color-content-default,#454545)}
.blip-card .form-group .input-error{color:var(--color-error,#f99f9f)}
.blip-card .form-group .help{padding:5px;font-size:11px}
.blip-card .form-control{display:block;width:100%;padding:.375rem .75rem;color:var(--color-content-default,#454545);background-color:var(--color-surface-1,#f6f6f6);background-image:none;background-clip:padding-box;border:1px solid var(--color-content-ghost,#8c8c8c);border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}
.blip-card form{display:block;margin-top:0;padding:10px;width:300px}
.blip-card .form-check{color:var(--color-content-default,#454545);position:relative;display:block;margin-bottom:.5rem}
.blip-card .form-check-input{position:absolute;margin-top:.25rem;margin-left:-1.25rem}
.blip-card .form-check-label{padding-left:1.25rem;margin-bottom:0;display:inline-block}
.blip-card .input-error{border-color:var(--color-error,#f99f9f)}
.blip-card input:focus,.blip-card textarea:focus{outline:none!important}
.blip-card .input-error:invalid{border-color:var(--color-error,#f99f9f)}
.blip-card .help.input-error{color:var(--color-error,#f99f9f)}
.blip-card .is-disabled{opacity:.5;pointer-events:none}
.blip-card .text-center{text-align:center}
.blip-card .text-left{text-align:left}
.blip-card .dashed-border{border:1px dashed var(--color-content-ghost,#8c8c8c)}
.blip-card .primary-color{color:var(--color-primary,#1e6bf1)}
.blip-card .delete-color{color:var(--color-delete,#e60f0f)}
.blip-card .color-gray{color:var(--color-content-ghost,#8c8c8c)}
.blip-card .btn{padding:5px;border:0;cursor:pointer}
.blip-card .btn-white{padding:10px;border-radius:6px;background-color:var(--color-surface-1,#f6f6f6);border:1px solid var(--color-primary,#1e6bf1)}
.blip-card .btn-dashed{padding:10px;border-radius:6px;border:1px dashed var(--color-primary,#1e6bf1)}
.blip-card .w-49{width:49%}
.blip-card .modal{-webkit-transition:all .5s ease;transition:all .5s ease;position:absolute;display:block;z-index:2}
.blip-card .tabs{color:var(--color-content-default,#454545);font-weight:700;margin:10px;margin-bottom:20px}
.blip-card .tabs span{padding:5px;cursor:pointer}
.blip-card .tabs .active{border-bottom:4px solid var(--color-primary,#1e6bf1)}
.blip-card .line{background-color:var(--color-content-disable,#636363);width:100%;height:1px;margin:10px 0}
.blip-card video{border-radius:13px 13px 13px 2px!important}
.blip-card .form-group{padding:10px;color:#a7bec3}
.blip-card .form-group .textarea{margin-top:10px}
.blip-card .form-group .input-error{color:#fb7a6d}
.blip-card .form-group .upload-intructions{color:var(--color-content-disable,#636363);padding:5px;padding-bottom:0;font-size:12px}
.blip-card .form-group ::-webkit-input-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .form-group ::-moz-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .form-group :-ms-input-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .form-group :-moz-placeholder{color:var(--color-content-ghost,#8c8c8c);font-size:12px}
.blip-card .blip-card-flex{padding:0;margin:0;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}
.blip-card .flex-item{padding:5px;text-align:center;-webkit-box-flex:1;-ms-flex:1;flex:1}
.blip-card .flex-item button{width:100%}
.blip-container:hover .editIco{display:block}
.blip-container:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.blip-bubble .blip-card:first-child .bubble.left{background-color:#000}
.pointer{cursor:pointer}
.define-metadata{color:#2cc3d5;font-size:12px;margin:0;float:right;padding:0;border:none;background:none;cursor:pointer}
.define-metadata:hover{color:#15afb2}
.define-metadata:focus{outline:0}
.disable-selection{-webkit-user-select:none}
.icon-button-margin{margin-right:10%}
.icon-button-top{top:-30px!important}
.bold-color{color:var(--color-surface-1,#f6f6f6)}
.single-line-text-overflow-ellipsis{overflow:hidden;position:relative;text-overflow:ellipsis}
.multiline-text-overflow-ellipsis{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.column-flex{display:-webkit-box;display:-ms-flexbox;display:flex;margin:auto}
.column-flex img{width:18.02px;height:20px}
.text-flex{padding:0 24px;-webkit-box-flex:1;-ms-flex:1;width:0;display:-webkit-box;display:-ms-flexbox;display:flex;flex:1}
.text-flex .ellipsis-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.blip-container-flex{margin:0}
.blip-container-flex,.blip-container-flex .blip-container-list-card{width:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.blip-container-flex .blip-container-list-card{overflow-y:auto;max-width:592px;max-height:318px}
.blip-container-flex .blip-container-list-card .blip-list-card{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:8px}
.blip-container-flex .blip-container-list-card .blip-list-card .file-icon-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;width:32.5px;height:38.37px;margin:auto}
.blip-container-flex .blip-container-list-card .blip-list-card .file-icon-wrapper-image{display:-webkit-box;display:-ms-flexbox;display:flex;width:124px;height:124px;border-radius:8px}
.blip-container-flex .wrap{border-bottom:2px solid #f3f6fa}
.blip-container-flex ::-webkit-scrollbar{width:5px}
.blip-container-flex ::-webkit-scrollbar-track{background:#f1f1f1}
.blip-container-flex ::-webkit-scrollbar-thumb{background:#888}
.blip-container-flex ::-webkit-scrollbar-thumb:hover{background:#555;padding:8px}
.pointer-default{cursor:default!important}
.unselected-option{opacity:.33}
.select .bubble{padding:10px 16px;min-width:auto;text-align:left}
.select .options ul{list-style-type:none;clear:both;margin:0;padding:10px}
.select a{text-decoration:none}
.select .slideshow-container{margin:auto;clear:both}
.select .slideshow-container .slideshow-list{overflow:hidden;margin:0;padding:0}
.select .slideshow-container .slideshow-track{-webkit-transition:all .8s ease;transition:all .8s ease;opacity:1;width:30000px;-webkit-transform:translateZ(0);transform:translateZ(0);display:-webkit-box;display:-ms-flexbox;display:flex;top:0;left:0}
.select .slideshow-container .slide-item{float:left;min-height:1px;margin-right:10px;height:calc(100% - 35px)}
.select .next,.select .prev{cursor:pointer;position:absolute;bottom:15px;width:auto;padding:8px 16px;opacity:.8;color:var(--color-primary,#1e6bf1);font-weight:700;font-size:18px;-webkit-transition:.6s ease;transition:.6s ease;border-radius:5px 0 0 5px;background-color:var(--color-surface-1,#f6f6f6)}
.select .prev{left:0;border-radius:0 5px 5px 0}
.select .next{right:0;border-radius:3px 0 0 3px}
@media screen and (max-width:480px){.select .next{right:0}}
.select .slideshow-container:hover .next,.select .slideshow-container:hover .prev{opacity:1}
.select .fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
.select .blip-select-metadata{padding:10px 0 0}
.select .options li{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:40px;background-color:var(--color-system,#b2dffd);border:1px solid var(--color-content-ghost,#8c8c8c);border-radius:19px;padding:10px 16px;margin:4px;color:var(--color-content-default,#454545);font-size:16px;font-weight:500}
.select .options li span{line-height:1}
.select .options li .remove-option{margin-left:8px}
.select .options li .remove-option img{width:12px;height:14px}
.select .options li.readonly{cursor:default}
.select .fixed-options li:last-child{padding-bottom:0}
.remove-option-error{color:#f76556;size:5px;font-size:12px;text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:15px;margin-top:-10px}
.summary .chat-state .bubble[data-v-6c4c21a2]{background-color:var(--color-warning,#fde99b)!important}
.chat-state .bubble[data-v-6c4c21a2]{padding:10px 16px;word-wrap:break-word;min-width:auto}
.chat-state .bubble .typing[data-v-6c4c21a2]{display:inline-block}
.chat-state .bubble .typing .typing-dot[data-v-6c4c21a2]{float:left;width:6px;height:6px;border-radius:50%;margin:2px;background:var(--color-content-default,#454545);-webkit-animation-name:bounce-data-v-6c4c21a2;animation-name:bounce-data-v-6c4c21a2;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.chat-state .bubble .typing .typing-dot[data-v-6c4c21a2]:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}
.chat-state .bubble .typing .typing-dot[data-v-6c4c21a2]:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}
@-webkit-keyframes bounce-data-v-6c4c21a2{0%{-webkit-transform:translateY(0);transform:translateY(0)}30%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes bounce-data-v-6c4c21a2{0%{-webkit-transform:translateY(0);transform:translateY(0)}30%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
.blip-chat-state-metadata[data-v-6c4c21a2]{margin-top:-20px;padding:0 10px 10px 0}
.collection-editable{height:100%;border:1px dashed #a8bfc4;position:relative;cursor:pointer}
.collection .slideshow-container{margin:auto}
.collection .slideshow-container .slideshow-list{overflow:hidden;margin:0;padding:0 30px}
.collection .slideshow-container .slideshow-track{-webkit-transition:all .8s ease;transition:all .8s ease;opacity:1;width:30000px;transform:translate(0);-webkit-transform:translate(0);display:-webkit-box;display:-ms-flexbox;display:flex;top:0;left:0}
.collection .slideshow-container .bubble{width:100%;height:100%;max-width:100%;border-radius:13px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.collection .slideshow-container .bubble .header{width:100%;height:100%}
.collection .slideshow-container .bubble .fixed-options{width:100%;-ms-flex-item-align:end;align-self:flex-end}
.collection .slideshow-container .slide-item{float:left;min-height:1px;margin-right:10px;height:calc(100% - 35px)}
.collection .slideshow-container a{text-decoration:none}
.collection .next,.collection .prev{cursor:pointer;position:absolute;top:50%;width:auto;margin-top:-22px;padding:8px 16px;opacity:.8;color:var(--color-primary,#1e6bf1);font-weight:700;font-size:18px;-webkit-transition:.6s ease;transition:.6s ease;border-radius:5px 0 0 5px;background-color:var(--color-surface-1,#f6f6f6)}
.collection .prev{left:0;border-radius:0 5px 5px 0}
.collection .next{right:0;border-radius:3px 0 0 3px}
.collection .next:hover,.collection .prev:hover{opacity:1}
.collection .fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
@-webkit-keyframes fade{0%{opacity:.4}to{opacity:1}}
@keyframes fade{0%{opacity:.4}to{opacity:1}}
.contact .bubble{padding:10px 16px;word-wrap:break-word;min-width:auto!important;text-align:left}
.blip-contact-metadata{margin-top:-20px;padding:0 10px 10px 0}
.mb-name{margin-bottom:16px}
.mb-infos{margin-bottom:4px}
.ml-infos{margin-left:8px}
.copy-and-paste-horizontal-divider[data-v-a9c150e6]{width:100%;margin:0;color:var(--color-content-ghost,#8c8c8c)}
.button-container[data-v-a9c150e6]{width:100%;padding:8px 16px;cursor:pointer}
.button-container-text-primary[data-v-a9c150e6]{color:var(--color-primary,#1e6bf1)}
.button-container-text-white[data-v-a9c150e6]{color:var(--color-surface-1,#f6f6f6)}
.in-edit-button[data-v-a9c150e6]{display:grid}
.copy-and-paste-info-text[data-v-a9c150e6]{word-wrap:break-word;min-width:auto!important;text-align:left;word-break:break-word}
.edit-copy-and-paste-button[data-v-a9c150e6]{width:200px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr}
.pointer-default{cursor:default!important}
.disabled-options{opacity:.33}
.clicked-option{opacity:1!important}
.document-select .bubble{width:500px}
.document-select .header .title{margin:0;padding:10px 20px}
.document-select .header .title,.document-select .hide-overflow{text-overflow:ellipsis;overflow:hidden}
.document-select .fixed-options ul{margin:0}
.document-select .editing{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.document-select .editing .fixed-options ul{margin:0 -10px}
.document-select .add-button{cursor:pointer;text-align:center;padding:5px;margin:2px;font-size:16px;font-weight:500;color:#0cc8cc;background-color:#fff!important;border:1px dashed #a7bec3!important}
.document-select .form-check{padding:0 10px;margin:0}
.document-select .form-check input[type=radio]{position:absolute;width:100%;height:100%;top:0;left:0;visibility:hidden}
.document-select .form-check .form-check-container{margin-left:5px;margin-top:8px;position:relative;width:40px;height:20px;display:inline-block}
.document-select .form-check label{position:relative;z-index:1;cursor:pointer}
.document-select .form-check .check{display:block;position:absolute;border:1px solid var(--color-content-default,#454545);border-radius:100%;height:16px;width:16px;top:0;left:0;transition:border .25s linear;-webkit-transition:border .25s linear;-moz-transition:border .25s linear;-ms-transition:border .25s linear}
.document-select .form-check .check:before{display:block;position:absolute;content:"";border-radius:100%;height:8px;width:8px;top:3px;left:3px;margin:auto;transition:background .25s linear;-webkit-transition:background .25s linear;-moz-transition:background .25s linear;-ms-transition:background .25s linear}
.document-select .form-check input[type=radio]:checked~.check{border:1px solid var(--color-content-default,#454545)}
.document-select .form-check input[type=radio]:checked~.check:before{background:var(--color-primary,#1e6bf1)}
.document-select .blip-document-select-metadata{padding:10px 5px 0 0;text-align:right}
.document-select .icon-margin{margin-right:30%}
.bubble.left .interactive-button-container .interactive-header .interactive-file .file-icon-wrapper[data-v-e898f71e],.bubble.midlle .interactive-button-container .interactive-header .interactive-file .file-icon-wrapper[data-v-e898f71e]{background-color:var(--color-surface-2,#e0e0e0)}
.bubble.left .interactive-button-container .interactive-header .interactive-file .description-wrapper[data-v-e898f71e],.bubble.midlle .interactive-button-container .interactive-header .interactive-file .description-wrapper[data-v-e898f71e]{background-color:var(--color-surface-1,#f6f6f6)}
.bubble.left .interactive-button-container .interactive-btn-list[data-v-e898f71e],.bubble.midlle .interactive-button-container .interactive-btn-list[data-v-e898f71e]{border-bottom-right-radius:13px;background:var(--color-surface-3,#cfcfcf)}
.bubble.right .interactive-button-container .interactive-header .interactive-file .file-icon-wrapper[data-v-e898f71e]{background-color:var(--color-surface-3,#cfcfcf)}
.bubble.right .interactive-button-container .interactive-header .interactive-file .description-wrapper[data-v-e898f71e]{background-color:var(--color-surface-2,#e0e0e0)}
.bubble.right .interactive-btn-list[data-v-e898f71e]{border-bottom-left-radius:13px;background:var(--color-content-disable,#636363)}
.interactive-button-container[data-v-e898f71e]{max-width:316px;min-width:256px;border-radius:inherit;text-align:left}
.interactive-header-text[data-v-e898f71e]{padding:0 8px}
.align-text[data-v-e898f71e]{padding:4px 16px}
.interactive-btn-list[data-v-e898f71e]{list-style:none;padding:0;margin:0;text-align:center}
.interactive-btn-list li[data-v-e898f71e]{padding:.5rem;margin:0}
.interactive-btn-list li[data-v-e898f71e]:not(:last-child){border-bottom:1px solid var(--color-content-ghost,#8c8c8c)}
.interactive-header[data-v-e898f71e]{padding:.5rem}
.border-radius[data-v-e898f71e]{border-radius:13px 13px 0 0}
.interactive-header-img[data-v-e898f71e]{width:100%}
.header-img-container[data-v-e898f71e]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;border-radius:13px 13px 0 0;cursor:pointer}
.interactive-header-video[data-v-e898f71e]{border-radius:13px 13px 0 0!important}
.interactive-file[data-v-e898f71e]{background-color:var(--color-surface-1,#f6f6f6);padding:0;height:80px;text-decoration:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;border-radius:13px 13px 0 0;cursor:pointer}
.interactive-file .file-icon-wrapper[data-v-e898f71e]{display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;padding-right:10px;border-top-left-radius:13px}
.interactive-file .file-icon-wrapper .file-icon[data-v-e898f71e]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:horizontal;flex-direction:horizontal;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:40px;max-width:40px;-o-object-fit:contain;object-fit:contain}
.interactive-file .description-wrapper[data-v-e898f71e]{overflow:hidden;padding:20px;padding-left:10px;color:var(--color-content-default,#454545)}
.interactive-file .description-wrapper .link-description[data-v-e898f71e],.interactive-file .description-wrapper[data-v-e898f71e]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.interactive-file .description-wrapper .link-description[data-v-e898f71e]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}
.interactive-file .description-wrapper .link-description .truncate[data-v-e898f71e]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.location .header{display:block;overflow:hidden;border-radius:inherit;width:100%}
.location .blip-location-metadata{margin-top:-10px;padding:0 10px 0 0}
.select .bubble{padding:10px 16px;min-width:auto}
.select .options ul{list-style-type:none;clear:both;margin:0;padding:10px}
.select .options li{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:40px;background-color:var(--color-system,#b2dffd);border:1px solid var(--color-content-ghost,#8c8c8c);border-radius:19px;padding:10px 16px;margin:4px;color:var(--color-content-default,#454545);font-size:16px;font-weight:500}
.select .fixed-options li:last-child{padding-bottom:0}
#simplifiedLocation{-o-object-fit:fill;object-fit:fill;border-radius:0!important}
.location-preview-container{background-color:var(--color-surface-1,#f6f6f6);width:70px;height:70px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.container-reply-item{max-height:110px}
.location-simplified-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;margin:0;text-align:left;-webkit-line-clamp:1;max-width:150px}
.container-reply-item{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
#simplifiedImage{-o-object-fit:fill;object-fit:fill;border-radius:0!important}
.image-preview-container{background-color:var(--color-surface-1,#f6f6f6);width:56px;height:56px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.preview-loading{padding-left:20px;padding-top:20px}
.image-simplified-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;margin:0;text-align:left;-webkit-line-clamp:1;max-width:150px}
.media-link .bubble{padding:0;max-width:350px}
.media-link .image-container{border-radius:inherit}
.media-link .header img{width:100%;display:block}
.media-link .header .background{background-position:50%;background-repeat:no-repeat}
.media-link .form form{width:auto}
.media-link .form .form-group .form-control.text{margin-top:10px}
.media-link .form-check{padding:0 10px;margin:0}
.media-link .form-check input[type=radio]{position:absolute;visibility:hidden}
.media-link .form-check .form-check-container{margin-left:5px;margin-top:8px;position:relative;width:40px;height:20px;display:inline-block}
.media-link .form-check label{position:relative;z-index:1;cursor:pointer}
.media-link .form-check .check{display:block;position:absolute;border:1px solid var(--color-content-default,#454545);border-radius:100%;height:16px;width:16px;top:0;left:0;transition:border .25s linear;-webkit-transition:border .25s linear;-moz-transition:border .25s linear;-ms-transition:border .25s linear}
.media-link .form-check .check:before{display:block;position:absolute;content:"";border-radius:100%;height:8px;width:8px;top:3px;left:3px;margin:auto;transition:background .25s linear;-webkit-transition:background .25s linear;-moz-transition:background .25s linear;-ms-transition:background .25s linear}
.media-link .form-check input[type=radio]:checked~.check{border:1px solid var(--color-content-default,#454545)}
.media-link .form-check input[type=radio]:checked~.check:before{background:var(--color-primary,#1e6bf1)}
.media-link .blip-media-link-metadata{margin-top:-5px;padding:0 10px 10px 0}
.media-link .bubble.left .description-wrapper,.media-link .bubble.middle .description-wrapper{color:var(--color-content-default,#454545)}
.media-link .bubble.right .file-icon-wrapper{background-color:var(--color-surface-3,#cfcfcf);padding-right:20px!important;border-radius:13px 0 0 13px}
.media-link .bubble.right .description-wrapper{padding-left:20px!important;border-radius:0 2px 2px 0}
.media-link .bubble.left .file-icon-wrapper{background-color:var(--color-surface-2,#e0e0e0);padding-right:20px!important;border-radius:13px 0 0 2px}
.media-link .bubble.left .description-wrapper{background-color:var(--color-surface-1,#f6f6f6);color:var(--color-content-default,#454545);padding-left:20px!important;border-radius:0 13px 13px 0}
.media-link .bubble .file-wrapper{padding:0;height:80px;text-decoration:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
.media-link .bubble .file-wrapper .file-icon-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;padding-right:10px}
.media-link .bubble .file-wrapper .file-icon-wrapper .file-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:horizontal;flex-direction:horizontal;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:40px;max-width:40px;-o-object-fit:contain;object-fit:contain}
.media-link .bubble .file-wrapper .description-wrapper{overflow:hidden;padding:20px;padding-left:10px}
.media-link .bubble .file-wrapper .description-wrapper,.media-link .bubble .file-wrapper .description-wrapper .link-description{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.media-link .bubble .file-wrapper .description-wrapper .link-description{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}
.media-link .bubble .file-wrapper .description-wrapper .link-description .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-link .bubble .file-wrapper .description-wrapper .small-text{font-size:10px;font-weight:100;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
.media-link .bubble .file-text{text-align:left;margin:0;padding:10px 20px}
.media-link .bubble .file-text strong{color:var(--color-content-default,#454545);display:block}
.media-link .replied .file-wrapper{padding:0;height:80px;text-decoration:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;background:var(--color-surface-3,#cfcfcf)}
.media-link .replied .file-wrapper .file-icon-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;background:var(--color-surface-2,#e0e0e0)}
.media-link .replied .file-wrapper .file-icon-wrapper .file-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:horizontal;flex-direction:horizontal;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-height:40px;max-width:40px;-o-object-fit:contain;object-fit:contain}
.media-link .replied .file-wrapper .description-wrapper{overflow:hidden;padding:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:206px;width:100%}
.media-link .replied .file-wrapper .description-wrapper,.media-link .replied .file-wrapper .description-wrapper .link-description{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.media-link .replied .file-wrapper .description-wrapper .link-description{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.media-link .replied .file-wrapper .description-wrapper .link-description .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-content-default,#454545)}
.media-link .replied .file-wrapper .description-wrapper .small-text{font-size:10px;font-weight:100;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--color-content-default,#454545)}
.media-link .form-group{min-width:auto}
.media-link .form-group .form-control.title{margin-top:10px}
.media-link .blip-media-link-metadata{margin-top:-20px;padding:0 10px 10px 0}
#simplifiedSticker{-o-object-fit:fill;object-fit:fill;border-radius:0!important}
.sticker-preview-container{background-color:var(--color-surface-1,#f6f6f6);width:56px;height:56px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.media-link .bubble{padding:0;max-width:350px}
.media-link .sticker-container{border-radius:inherit}
.media-link .header img{width:100%;display:block}
.media-link .header .background{background-position:50%;background-repeat:no-repeat}
.media-link .form form{width:auto}
.media-link .form .form-group .form-control.text{margin-top:10px}
.media-link .blip-media-link-metadata{margin-top:-5px;padding:0 10px 10px 0}
.plain-text .bubble{padding:10px 16px;word-wrap:break-word;min-width:auto!important;text-align:left}
.blip-plain-text-metadata{margin-top:-20px;padding:0 10px 10px 0}
.deleted-content-container .bubble{padding:16px;word-wrap:break-word;min-width:auto!important;text-align:left}
.blip-deleted-content-metadata{margin-top:-20px;padding:0 10px 10px 0}
.deleted-content{font-style:italic;background-color:var(--color-surface-3,#cfcfcf)!important;border:1px solid var(--color-border-1,#c9c9c9)!important;color:var(--color-content-disable,#636363)!important}
.request-location .bubble{padding:10px 16px;text-align:left}
.request-location .options ul{list-style-type:none;clear:both;margin:0;padding:10px}
.request-location .options li{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:end;-ms-flex-align:end;align-items:end;background-color:var(--color-system,#b2dffd);border:1px solid var(--color-content-ghost,#8c8c8c);border-radius:20px;padding:7px 10px;margin:2px;color:var(--color-content-default,#454545);font-size:16px;font-weight:500;min-width:70px}
.request-location .options li .wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.request-location .options li .wrapper .locationIcon{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;width:25px;height:25px}
.request-location .options li .wrapper .text{margin:0 10px}
.request-location #pinIcon{fill:#0cc8cc}
.blip-request-location-metadata{margin-top:-20px;padding:0 12px 10px 0}
.survey .bubble{line-height:normal}
.survey .bubble.right .text-wrapper:after{background:#0cc8cc!important}
.survey .bubble.text-link{padding:10px 16px;height:auto}
.survey .bubble .form-group{min-width:auto}
.survey .bubble .form-group .form-control.title{margin-top:10px}
.survey .bubble .form-group .form-control.text{margin-top:0}
.survey .bubble .container-title{margin:10px 0 0;color:#738192;font-size:1.1rem;text-align:center}
.survey .bubble .container-survey{margin-bottom:10px;font-size:.7rem;text-align:left}
.survey .bubble .survey-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-radius:inherit;overflow:hidden}
.survey .bubble .survey-wrapper.link{cursor:pointer}
.survey .bubble .survey-wrapper .preview{height:100px;width:100px;min-width:100px;background-position:50%;background-size:cover}
.survey .bubble .survey-wrapper .link-description-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:10px 16px;overflow:hidden;min-height:100px}
.survey .bubble .survey-wrapper .link-description-wrapper .text{overflow:hidden;position:relative;text-overflow:ellipsis}
.survey .bubble .survey-wrapper .link-description-wrapper .big-text{white-space:nowrap}
.survey .bubble .survey-wrapper .link-description-wrapper .text-wrapper{overflow:hidden;position:relative;line-height:1.2em;max-height:2.4em;text-align:justify;margin-right:3px;padding-right:13px}
.survey .bubble .survey-wrapper .link-description-wrapper .text-wrapper span{line-height:1.2em}
.survey .bubble .survey-wrapper .link-description-wrapper .light-text{font-size:12px;font-weight:100;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}
.survey .bubble .survey-wrapper .link-description-wrapper .text-wrapper:before{content:" ...";position:absolute;right:0;bottom:0}
.survey .bubble .survey-wrapper .link-description-wrapper .text-wrapper:after{content:"";position:absolute;right:0;width:1em;height:1em;margin-top:.2em;background:#fff}
.survey .bubble .survey-wrapper .link-description-wrapper .small-text{font-size:10px;font-weight:100;white-space:nowrap}
.survey .bubble .survey-wrapper .link-description-wrapper .space-between-text{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}
.survey .bubble .blip-weblink-metadata{margin-top:-8px;padding:0 10px 0 0}
.survey-row{display:-webkit-box;display:-ms-flexbox;display:flex}
.survey-cell{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:.7rem;text-align:center}
.survey-score{margin-top:15px;text-align:center}
.survey-item{margin:0 10px;cursor:pointer}
.survey-item-number{padding:5px 8px;background-color:#a7bec3;border-radius:5px;color:#fff;text-align:center}
.survey-item-number.active,.survey-item-number:hover{background-color:#3f7de8}
.survey-item-star{display:inline-block;height:24px;width:24px;background-repeat:no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIGZpbGw9IiNDNEM0QzQiLz4KPHBhdGggZD0iTTE5LjY2NjYgMTAuMjk2QzE5LjU4NSAxMC4wNTA4IDE5LjQzMzcgOS44MzQ2NSAxOS4yMzEzIDkuNjc0MDNDMTkuMDI4OCA5LjUxMzQyIDE4Ljc4NCA5LjQxNTI3IDE4LjUyNjYgOS4zOTE1N0wxNC44MDI2IDkuMDc5OTdMMTMuMzM1OCA1LjYwNjc3QzEzLjIzNCA1LjM2ODU5IDEzLjA2NDUgNS4xNjU1NCAxMi44NDgzIDUuMDIyODRDMTIuNjMyMiA0Ljg4MDE0IDEyLjM3ODggNC44MDQwNyAxMi4xMTk4IDQuODA0MDdDMTEuODYwOCA0LjgwNDA3IDExLjYwNzUgNC44ODAxNCAxMS4zOTEzIDUuMDIyODRDMTEuMTc1MSA1LjE2NTU0IDExLjAwNTYgNS4zNjg1OSAxMC45MDM4IDUuNjA2NzdMOS40MzcwMiA5LjA3OTk3TDUuNzEzMDIgOS40MjE5N0M1LjQ1OTc5IDkuNDQ2MzkgNS4yMTkwOCA5LjU0Mzc1IDUuMDIwMDggOS43MDIyNUM0LjgyMTA4IDkuODYwNzUgNC42NzIzNCAxMC4wNzM2IDQuNTkxODkgMTAuMzE0OUM0LjUxMTQzIDEwLjU1NjMgNC41MDI3MyAxMC44MTU4IDQuNTY2ODMgMTEuMDYyQzQuNjMwOTQgMTEuMzA4MiA0Ljc2NTA5IDExLjUzMDUgNC45NTMwMiAxMS43MDJMNy43NzI2MiAxNC4xNzJMNi45MzY2MiAxNy44MzUyQzYuODc4ODMgMTguMDg2NSA2Ljg5NzExIDE4LjM0OTMgNi45ODkxNCAxOC41OTAyQzcuMDgxMTYgMTguODMxMSA3LjI0Mjc4IDE5LjAzOTIgNy40NTM0MiAxOS4xODhDNy42NjE4OSAxOS4zMzc0IDcuOTA5MTIgMTkuNDIzNCA4LjE2NTMyIDE5LjQzNTVDOC40MjE1MiAxOS40NDc2IDguNjc1NzcgMTkuMzg1NCA4Ljg5NzQyIDE5LjI1NjRMMTIuMTE5OCAxNy4zMjZMMTUuMzM0NiAxOS4yNDg4QzE1LjUzOTcgMTkuMzY4OSAxNS43NzMzIDE5LjQzMTkgMTYuMDExIDE5LjQzMTJDMTYuMjgzIDE5LjQyODQgMTYuNTQ3OSAxOS4zNDM2IDE2Ljc3MSAxOS4xODhDMTYuOTgwNyAxOS4wMzQ3IDE3LjE0MTIgMTguODIzOCAxNy4yMzI5IDE4LjU4MDhDMTcuMzI0NyAxOC4zMzc5IDE3LjM0MzggMTguMDczNSAxNy4yODc4IDE3LjgyTDE2LjQ1MTggMTQuMTY0NEwxOS4yNzE0IDExLjY5NDRDMTkuNDY1OCAxMS41MjQ3IDE5LjYwNjcgMTEuMzAyMiAxOS42NzY5IDExLjA1MzlDMTkuNzQ3MSAxMC44MDU2IDE5Ljc0MzUgMTAuNTQyMyAxOS42NjY2IDEwLjI5NloiIGZpbGw9IiM1MDVGNzkiLz4KPC9zdmc+Cg==)}
.survey-item-star.active,.survey-item-star:hover{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIGZpbGw9IiMzRjdERTgiLz4KPHBhdGggZD0iTTE5LjY2NjYgMTAuMjk2QzE5LjU4NSAxMC4wNTA4IDE5LjQzMzcgOS44MzQ2NSAxOS4yMzEzIDkuNjc0MDNDMTkuMDI4OCA5LjUxMzQyIDE4Ljc4NCA5LjQxNTI3IDE4LjUyNjYgOS4zOTE1N0wxNC44MDI2IDkuMDc5OTdMMTMuMzM1OCA1LjYwNjc3QzEzLjIzNCA1LjM2ODU5IDEzLjA2NDUgNS4xNjU1NCAxMi44NDgzIDUuMDIyODRDMTIuNjMyMiA0Ljg4MDE0IDEyLjM3ODggNC44MDQwNyAxMi4xMTk4IDQuODA0MDdDMTEuODYwOCA0LjgwNDA3IDExLjYwNzUgNC44ODAxNCAxMS4zOTEzIDUuMDIyODRDMTEuMTc1MSA1LjE2NTU0IDExLjAwNTYgNS4zNjg1OSAxMC45MDM4IDUuNjA2NzdMOS40MzcwMiA5LjA3OTk3TDUuNzEzMDIgOS40MjE5N0M1LjQ1OTc5IDkuNDQ2MzkgNS4yMTkwOCA5LjU0Mzc1IDUuMDIwMDggOS43MDIyNUM0LjgyMTA4IDkuODYwNzUgNC42NzIzNCAxMC4wNzM2IDQuNTkxODkgMTAuMzE0OUM0LjUxMTQzIDEwLjU1NjMgNC41MDI3MyAxMC44MTU4IDQuNTY2ODMgMTEuMDYyQzQuNjMwOTQgMTEuMzA4MiA0Ljc2NTA5IDExLjUzMDUgNC45NTMwMiAxMS43MDJMNy43NzI2MiAxNC4xNzJMNi45MzY2MiAxNy44MzUyQzYuODc4ODMgMTguMDg2NSA2Ljg5NzExIDE4LjM0OTMgNi45ODkxNCAxOC41OTAyQzcuMDgxMTYgMTguODMxMSA3LjI0Mjc4IDE5LjAzOTIgNy40NTM0MiAxOS4xODhDNy42NjE4OSAxOS4zMzc0IDcuOTA5MTIgMTkuNDIzNCA4LjE2NTMyIDE5LjQzNTVDOC40MjE1MiAxOS40NDc2IDguNjc1NzcgMTkuMzg1NCA4Ljg5NzQyIDE5LjI1NjRMMTIuMTE5OCAxNy4zMjZMMTUuMzM0NiAxOS4yNDg4QzE1LjUzOTcgMTkuMzY4OSAxNS43NzMzIDE5LjQzMTkgMTYuMDExIDE5LjQzMTJDMTYuMjgzIDE5LjQyODQgMTYuNTQ3OSAxOS4zNDM2IDE2Ljc3MSAxOS4xODhDMTYuOTgwNyAxOS4wMzQ3IDE3LjE0MTIgMTguODIzOCAxNy4yMzI5IDE4LjU4MDhDMTcuMzI0NyAxOC4zMzc5IDE3LjM0MzggMTguMDczNSAxNy4yODc4IDE3LjgyTDE2LjQ1MTggMTQuMTY0NEwxOS4yNzE0IDExLjY5NDRDMTkuNDY1OCAxMS41MjQ3IDE5LjYwNjcgMTEuMzAyMiAxOS42NzY5IDExLjA1MzlDMTkuNzQ3MSAxMC44MDU2IDE5Ljc0MzUgMTAuNTQyMyAxOS42NjY2IDEwLjI5NloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=)}
.survey .button{width:100%;margin-top:10px;padding:5px 16px;background-color:#3f7de8;border:1px solid #3f7de8;border-radius:5px;color:#fff;cursor:pointer;font-size:.9rem}
.survey .button:focus{outline:0;border:1px solid #e8f2ff}
.survey .icon-margin{margin-right:7%}
.summary .bubble[data-v-79199f10]{padding:10px 16px;word-wrap:break-word;min-width:auto!important;text-align:left;background-color:var(--color-warning,#fde99b)!important;color:var(--color-content-default,#454545)!important}
.summary .bubble .itens-summary[data-v-79199f10]{padding-top:8px}
.summary .bubble .itens-summary ul[data-v-79199f10]{font-size:24px;margin-block:0;padding-left:35px}
.summary .bubble .title-summary .title-icon[data-v-79199f10],.summary .bubble .title-summary[data-v-79199f10]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0}
.summary .bubble .title-summary .title-icon[data-v-79199f10]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:8px}
.summary .bubble .title-summary .title-text[data-v-79199f10]{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.ticket[data-v-16ab022e]{color:var(--color-content-disable,#636363);text-align:center;overflow:hidden;padding-top:5px}
.ticket .subtitle[data-v-16ab022e]{margin:0}
.ticket .fancy[data-v-16ab022e]{line-height:1;text-align:center}
.ticket .fancy span[data-v-16ab022e]{display:inline-block;position:relative}
.ticket .fancy span[data-v-16ab022e]:after,.ticket .fancy span[data-v-16ab022e]:before{content:"";position:absolute;height:5px;border-bottom:1px solid var(--color-surface-3,#cfcfcf);top:0;width:600px}
.ticket .fancy span[data-v-16ab022e]:before{right:100%;margin-right:15px}
.ticket .fancy span[data-v-16ab022e]:after{left:100%;margin-left:15px}
h3[data-v-16ab022e]{font-size:1.25rem;font-weight:500;margin:10px}
.icon-active-message-failed{position:relative;margin-left:5px;margin-right:-1px;margin-top:-5px;color:var(--color-extended-red,#e60f0f);cursor:pointer}
.unsuported-content .bubble{padding:10px 16px;word-wrap:break-word;min-width:auto!important;text-align:left}
.blip-container.unsuported-content .bubble.left{background-color:var(--color-surface-1,#f6f6f6);color:var(--color-content-default,#454545)}
.blip-container.unsuported-content .bubble.right{background-color:var(--color-surface-3,#cfcfcf);color:var(--color-content-default,#454545)}
.blip-container.unsuported-content.blip-card .bubble{padding:4px 16px;word-wrap:break-word;border-radius:15px;white-space:normal}
.web-link .bubble.right .text-wrapper:after{background:#0cc8cc!important}
.web-link .bubble.text-link{padding:10px 16px;height:auto}
.web-link .bubble .form-group{min-width:auto}
.web-link .bubble .form-group .form-control.text,.web-link .bubble .form-group .form-control.title{margin-top:10px}
.web-link .bubble .web-link-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-radius:inherit;overflow:hidden}
.web-link .bubble .web-link-wrapper.link{cursor:pointer}
.web-link .bubble .web-link-wrapper .preview{height:100px;width:100px;min-width:100px;background-position:50%;background-size:cover}
.web-link .bubble .web-link-wrapper .link-description-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:10px 16px;overflow:hidden;min-height:100px}
.web-link .bubble .web-link-wrapper .link-description-wrapper .text{overflow:hidden;position:relative;text-overflow:ellipsis}
.web-link .bubble .web-link-wrapper .link-description-wrapper .big-text{white-space:nowrap}
.web-link .bubble .web-link-wrapper .link-description-wrapper .text-wrapper{overflow:hidden;position:relative;line-height:1.2em;max-height:2.4em;text-align:justify;margin-right:3px;padding-right:13px}
.web-link .bubble .web-link-wrapper .link-description-wrapper .text-wrapper span{line-height:1.2em}
.web-link .bubble .web-link-wrapper .link-description-wrapper .light-text{font-size:12px;font-weight:100;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}
.web-link .bubble .web-link-wrapper .link-description-wrapper .text-wrapper:before{content:" ...";position:absolute;right:0;bottom:0}
.web-link .bubble .web-link-wrapper .link-description-wrapper .text-wrapper:after{content:"";position:absolute;right:0;width:1em;height:1em;margin-top:.2em;background:#fff}
.web-link .bubble .web-link-wrapper .link-description-wrapper .small-text{font-size:10px;font-weight:100;white-space:nowrap}
.web-link .bubble .web-link-wrapper .link-description-wrapper .space-between-text{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}
.web-link .bubble .blip-weblink-metadata{margin-top:-8px;padding:0 10px 0 0}
.web-link-reacted-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;margin:0;text-align:left;-webkit-line-clamp:1}
.in-reply-to-message-bar[data-v-5672bd7b]{-webkit-box-flex:0;-ms-flex:none;flex:none;width:4px;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:var(--color-primary,#1e6bf1)}
.in-reply-to-message-bar.own-message[data-v-5672bd7b]{background-color:var(--color-content-ghost,#8c8c8c)}
.in-reply-to-message-container[data-v-5672bd7b]{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;background-color:var(--color-surface-3,#cfcfcf);border:1px solid var(--color-content-ghost,#8c8c8c);border-radius:.5rem}
.in-reply-to-message-container .skeleton[data-v-5672bd7b]{height:2.5rem}
.container-reply-item[data-v-5672bd7b]{max-height:110px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.in-reply-to-message-container-margin[data-v-5672bd7b]{margin-bottom:1rem}
.failed-message[data-v-5672bd7b]{display:-webkit-box;display:-ms-flexbox;display:flex;gap:.5rem;padding:.5rem}
.cursor-pointer[data-v-5672bd7b]{cursor:pointer}
.message-replied-container[data-v-3954394d]{padding:.5rem}
.message-replied-text[data-v-3954394d]{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;margin:0;text-align:left}
.message-replied-text.single[data-v-3954394d]{-webkit-line-clamp:3}
.message-replied-text.title[data-v-3954394d]{-webkit-line-clamp:1}
.message-replied-text.description[data-v-3954394d]{-webkit-line-clamp:2}
.image-replied[data-v-0feb6595]{max-height:110px}
.image-replied-simplified[data-v-0feb6595]{max-height:80px}
.video-replied[data-v-d5e0f420]{margin-right:-4px;border-radius:0!important}
.simplified[data-v-d5e0f420]{max-height:95px}
.full-height[data-v-d5e0f420]{max-height:110px}
.image-replied[data-v-3adb9f9c]{min-height:40px;max-width:40px;width:40px}
.container-location[data-v-2c5fe7c6]{padding-left:10px;width:100%}
.replied[data-v-1abba9e2]{border-radius:13px}
.reply-container[data-v-626f3e75]{text-align:left;padding:1rem}
.image-replied[data-v-22080422]{max-height:110px}
.video-replied[data-v-22080422]{max-height:110px;margin-right:-4px;border-radius:0!important}
.message-replied-deleted-container[data-v-a818ed4c]{padding:.5rem}
.message-replied-deleted[data-v-a818ed4c]{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;margin:0;text-align:left}
.message-replied-deleted.single[data-v-a818ed4c]{-webkit-line-clamp:3}
.message-replied-deleted.title[data-v-a818ed4c]{-webkit-line-clamp:1}
.message-replied-deleted.description[data-v-a818ed4c]{-webkit-line-clamp:2}
.in-reaction-to-message-bar[data-v-96cbc586]{-webkit-box-flex:0;-ms-flex:none;flex:none;width:4px;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:var(--color-primary,#1e6bf1)}
.in-reaction-to-message-bar.own-message[data-v-96cbc586]{background-color:var(--color-content-ghost,#8c8c8c)}
.in-reaction-to-message-container[data-v-96cbc586]{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;background-color:var(--color-surface-3,#cfcfcf);border:1px solid var(--color-content-ghost,#8c8c8c);border-radius:.5rem}
.in-reaction-to-message-container .skeleton[data-v-96cbc586]{height:2.5rem}
.failed-message[data-v-96cbc586]{display:-webkit-box;display:-ms-flexbox;display:flex;gap:.5rem;padding:.5rem}
.in-reaction-to-location[data-v-96cbc586]{padding-left:.5rem}
.in-reaction-to-padding[data-v-96cbc586]{padding:1rem .5rem}
#inReactionTo[data-v-23db21f8]{border-radius:13px}
.in-reaction-to-audio[data-v-23db21f8]{padding:1rem .5rem}
.in-reaction-to-with-preview[data-v-23db21f8]{padding-left:.5rem}
.reaction-text-container[data-v-3dd71b02]{padding:1rem .5rem}
.message-reacted-text[data-v-3dd71b02]{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;margin:0;text-align:left}
.message-reacted-text.single[data-v-3dd71b02]{-webkit-line-clamp:3}
.message-reacted-text.title[data-v-3dd71b02]{-webkit-line-clamp:1}
.message-reacted-text.description[data-v-3dd71b02]{-webkit-line-clamp:2}
.emoji-container[data-v-54ec4d20]{border-radius:50%;position:absolute;border:1px solid var(--color-content-ghost,#8c8c8c);width:28px;height:28px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.emoji-container.left[data-v-54ec4d20],.emoji-container.middle[data-v-54ec4d20]{bottom:12px;left:24px;background-color:var(--color-surface-1,#f6f6f6)}
.emoji-container.right[data-v-54ec4d20]{bottom:12px;right:24px;background-color:var(--color-content-default,#454545)}
.reaction-container[data-v-fb7c1826]{text-align:left;padding:1rem}
.reaction-bottom-padding[data-v-fb7c1826]{padding-bottom:1.5rem}
.phone-number[data-v-6ef829f1]{width:100%;border-top:1px solid var(--color-content-disable,#636363);cursor:pointer}
.website[data-v-8e86d7ba]{width:100%;border-top:1px solid var(--color-content-disable,#636363);cursor:pointer}
.media-content{white-space:normal}
.padding-control{padding:10px 16px}
.media-image{width:100%;min-height:207px;max-height:460px;-o-object-fit:none;object-fit:none}
.default-image-div{height:160px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--color-surface-2,#e0e0e0);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.default-image{margin-bottom:8px}
.file-container.left .description-wrapper,.file-container.middle .description-wrapper{color:var(--color-content-default,#454545)}
.file-container.right .file-icon-wrapper{background-color:var(--color-surface-3,#cfcfcf);padding-right:20px!important}
.file-container.right .description-wrapper{padding-left:20px!important;background-color:#636363}
.file-container .file-wrapper{padding:0;height:80px;text-decoration:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;cursor:pointer}
.file-container .file-wrapper .file-icon-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px;padding-right:10px}
.file-container .file-wrapper .file-icon-wrapper .file-icon{-ms-flex-direction:horizontal;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:horizontal;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;max-height:40px;max-width:40px;-o-object-fit:contain;object-fit:contain}
.file-container .file-wrapper .description-wrapper,.file-container .file-wrapper .file-icon-wrapper .file-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-flex:1}
.file-container .file-wrapper .description-wrapper{-ms-flex:1;-webkit-box-flex:1;flex:1;overflow:hidden;padding:20px;padding-left:10px;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.file-container .file-wrapper .description-wrapper .link-description{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:2.5rem}
.file-container .file-wrapper .description-wrapper .link-description .text{position:relative;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.file-container .file-wrapper .description-wrapper .small-text{font-size:10px;font-weight:100;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
.default-document-div{height:160px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--color-surface-2,#e0e0e0);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.default-document{margin-bottom:8px}
.left .slider,.middle .slider{background-color:var(--color-surface-3,#cfcfcf)}
.left .progress .pin,.middle .progress .pin{background-color:var(--color-content-default,#454545)}
.left .audio-player-button,.middle .audio-player-button{fill:var(--color-content-default,#454545)}
.left .blip-change-playback-rate,.middle .blip-change-playback-rate{border-color:var(--color-content-ghost,#8c8c8c);color:var(--color-content-default,#454545)}
.left .video-player-time,.middle .video-player-time{color:var(--color-content-default,#454545)}
.right .slider{background-color:var(--color-content-ghost,#8c8c8c)}
.right .progress .pin{background-color:var(--color-surface-1,#f6f6f6)}
.right .audio-player-button{fill:var(--color-surface-1,#f6f6f6)}
.right .blip-change-playback-rate,.right .video-player-time{color:var(--color-surface-1,#f6f6f6)}
.right .blip-change-playback-rate{border-color:var(--color-content-ghost,#8c8c8c)}
.left .slider,.middle .slider{background-color:var(--color-surface-3,#cfcfcf)}
.left .progress .pin,.middle .progress .pin{background-color:var(--color-content-default,#454545)}
.left .blip-change-playback-rate,.middle .blip-change-playback-rate{border-color:var(--color-content-ghost,#8c8c8c);color:var(--color-content-default,#454545)}
.left .video-player-button,.middle .video-player-button{fill:var(--color-content-default,#454545)}
.left .video-player-time,.middle .video-player-time{color:var(--color-content-default,#454545)}
.left .video-player-controls,.middle .video-player-controls{padding:10px 16px!important}
.right .slider{background-color:var(--color-content-ghost,#8c8c8c)}
.right .progress .pin{background-color:var(--color-surface-1,#f6f6f6)}
.right .video-player-button{fill:var(--color-surface-1,#f6f6f6)}
.right .video-player-time{color:var(--color-surface-1,#f6f6f6)}
.right .video-player-controls{padding:10px 16px!important}
.right .blip-change-playback-rate{border-color:var(--color-content-ghost,#8c8c8c);color:var(--color-surface-1,#f6f6f6)}
.default-video-div{height:160px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--color-surface-2,#e0e0e0);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.default-video{margin-bottom:8px}
.icon-active-message-failed[data-v-87aab08e]{position:relative;margin-left:5px;margin-right:-1px;margin-top:-5px;color:var(--color-extended-red,#e60f0f);cursor:pointer}
.title-template[data-v-87aab08e]{margin-left:8px}
.bubble[data-v-87aab08e]{text-align:left}
.bubble.template-width[data-v-87aab08e]{width:368px}
.bubble>.wrap[data-v-87aab08e]{overflow-wrap:anywhere}
.quick-reply-buttons[data-v-87aab08e]{width:368px;max-width:90%;min-width:160px;margin-top:3px;margin-bottom:5px}
.quick-reply-buttons>div[data-v-87aab08e]{-webkit-box-flex:1;-ms-flex:1 0 50%;flex:1 0 50%}
.quick-reply-buttons>div[data-v-87aab08e]:not(:only-child):first-child{padding-right:4px}
.quick-reply-buttons>div[data-v-87aab08e]:nth-child(2){padding-left:4px}
.quick-reply-buttons>div[data-v-87aab08e]:nth-child(3){padding-top:8px}
.quick-reply-buttons>div>span[data-v-87aab08e]{width:100%;height:48px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid var(--color-content-ghost,#8c8c8c);border-radius:13px;background-color:var(--color-surface-1,#f6f6f6);color:var(--color-content-default,#454545);cursor:pointer}
.quick-reply-buttons>div>span.right[data-v-87aab08e]{background-color:var(--color-content-default,#454545);color:var(--color-surface-1,#f6f6f6)}/*
CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
.blip-message {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.blip-message .blip-container.collection {
width: calc(100% + 35px);
}
.blip-message .collection .slideshow-container .slideshow-list {
padding: 0;
}
.blip-message .blip-card-container {
width: 100%;
}
.blip-message.received .blip-card-container {
margin-left: 35px;
width: calc(100% - 35px);
}
.blip-message.received .blip-container--with-photo .blip-card-container {
width: 100%;
margin-left: 0;
}
.blip-message.received .blip-card-container .blip-card-container {
width: 100%;
margin-left: 0;
}
#thread {
position: relative;
width: 100%;
height: calc(100% - 57px);
overflow: hidden;
}
#thread .bubble {
max-width: 100%;
word-wrap: break-word;
}
.infinite-status-prompt {
display: none;
}
.blip-cards-items-list {
padding: 0 50px 0px 30px;
overflow: hidden;
}
.blip-cards-items-list div.blip-message:nth-child(2) {
margin-top: 14px;
}
#messages-list .select .next {
right: -32px;
}
#messages-list .select .prev {
left: -45px;
}
#messages-list .select .slideshow-container .slideshow-list {
margin-left: -15px;
}
.color-primary {
color: var(--color-brand, #0096fa);
}
.color-primary-dark {
color: var(--color-brand, #0096fa);
}
.white {
color: var(--color-surface-1, #f6f6f6);
}
.gray-1 {
color: var(--color-surface-2, #e0e0e0);
}
.gray-2 {
color: var(--color-surface-3, #cfcfcf);
}
.gray-3 {
color: var(--color-content-disable, #636363);
}
/*
CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
.blip-offline-area {
background: var(--color-content-disable, #636363);
color: var(--color-surface-1, #f6f6f6);
width: 100%;
padding: 0 50px;
font-weight: 300;
font-size: 14px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: stretch;
align-self: stretch;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#message-input {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: absolute;
bottom: 0;
left: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 64px;
min-height: 64px;
max-height: 64px;
width: 100%;
background-color: var(--color-surface-1, #f6f6f6);
-webkit-box-shadow: 0 -1px 12px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 -1px 12px 0 rgba(0, 0, 0, 0.2);
border-radius: 0 0 3px 3px;
z-index: 2;
overflow-y: hidden;
}
#message-input .send-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 48px;
height: 48px;
background-color: var(--color-brand, #0096fa);
border-radius: 50%;
-webkit-box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.1);
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media all and (max-width: 768px) {
#message-input #blip-send-message {
display: none;
}
}
#message-input .hideElement {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media all and (max-width: 768px) {
#message-input .hideElement {
display: none !important;
}
}
#message-input .showElement {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
#message-input .send-icon {
color: var(--color-surface-1, #f6f6f6);
}
#message-input .file-attach {
position: relative;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
#message-input .file-attach .input-file {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
cursor: pointer;
}
#message-input .file-attach .input-file + label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%;
z-index: 10;
cursor: pointer;
outline: 0;
}
#message-input .file-attach .input-file + label div {
position: relative;
width: 24px;
height: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: center;
align-self: center;
margin-bottom: 1px;
color: var(--color-surface-3, #cfcfcf);
cursor: pointer;
}
#message-input .file-attach .input-file + label .clip-icon {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzFweCIgaGVpZ2h0PSI0MXB4IiB2aWV3Qm94PSIwIDAgMzEgNDEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5ICg1MTAwMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+Q2xpcDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJDbGlwIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMTAuMzUzMjIwNCwzNyBDNy40OTI5Mjc5MywzNyA0LjQ5MDcxNTkxLDM1Ljk2NTc1ODUgMi41NTI5MDA2MiwzMy42OTA0MjcyIEMtMC40NjMzMjgxNDIsMzAuMTQ2NTQwNyAtMC44MjQyNTkzNzksMjUuODk2MjgwMiAxLjU2Mjk2Nzg2LDIyLjAyODgxNzggQzIuNjAyODM1MjksMjAuMzQzOTkxMiA5LjUzODQ5Njk2LDEzLjYwNjQwMTMgMTYuMTg1MDYzMiw3LjIzODczNTE2IEMxNy4wMDc2NzExLDYuNDUwODIzMzcgMTcuNTY4MzQxLDUuOTEzNTMyNzcgMTcuNzI3NzgxNSw1Ljc1NDc0ODggQzE5LjIzODk2Miw0LjIzODE0NzM2IDIzLjgyMDY4NjIsMi42NTcxNzQwNCAyNy41NTg3Nzc0LDUuODc5MjAxMSBDMzAuOTEzMTYwMiw5LjA5Nzc5NDk5IDMwLjM1Nzc0NjYsMTMuMTkxODQ2NCAyOC4xMDEwNTAzLDE1LjU5Njc3OTggQzI3LjQ2NTkxNjUsMTYuMjczOTcxOSAyMS41MDAwMzg1LDIyLjIxMDc3NTYgMTUuNzQ3OTE1OSwyNy45Mjk1NzMzIEwxNC4xOTIwNTcsMjkuNDc3MDczMiBDMTMuNDg1MDg3MywzMC4xODM0NDczIDEyLjA5MzkyNTIsMzAuOTczOTMzOSAxMC41ODQ0OTY3LDMwLjk2NjIwOTMgQzkuNDQ3Mzg4MSwzMC45NDM4OTM3IDguNDEwMTQ4ODIsMzAuNDU5ODE3MiA3LjU4NDAzNjc5LDI5LjU2NjMzNTUgQzUuMzYwNjMwMjgsMjcuMDk4NzQ2OSA3LjAwMDU4OTY5LDI0LjM4NTY4NjggOC4xNzYyNDQzNSwyMy4yOTM5Mzk4IEwyMC45NTQyNjE0LDExLjI4NTU4MDUgQzIxLjQ3NzI2MTMsMTAuNzkzNzc5NCAyMi4zMTEyNTc4LDEwLjgxMDA4NjkgMjIuODExNDgwNCwxMS4zMjMzNDU0IEMyMy4zMTUyMDczLDExLjgzNjYwMzggMjMuMjk2ODEwMywxMi42NTExMjI2IDIyLjc3MjkzNDQsMTMuMTQyOTIzOCBMOS45ODk2NjEwMSwyNS4xNTcyOTExIEM5LjczMjEwMzI4LDI1LjQwNDQ3OTEgOC40OTc3NTM0OSwyNi42OTAyIDkuNTQyODc3MTksMjcuODUwNjEwNCBDOS44NzQwMjI4NCwyOC4yMDc2NTk4IDEwLjIyNTMxNzYsMjguMzgzNjA5NiAxMC42MzcwNTk1LDI4LjM5MTMzNDIgQzEwLjY0NjY5NiwyOC4zOTIxOTI1IDEwLjY1NzIwODYsMjguMzkyMTkyNSAxMC42Njc3MjExLDI4LjM5MjE5MjUgQzExLjM0NDAyOTIsMjguMzkyMTkyNSAxMi4wMzUyMywyNy45NTM2MDU0IDEyLjMxNjQ0MSwyNy42NzI5NDQxIEwxMy44NzY2ODAyLDI2LjEyMTE1MjYgQzE3LjA0ODg0NTMsMjIuOTY3Nzg4OSAyNS40NzY0MTQ1LDE0LjU4OTE0NTMgMjYuMTY2NzM5MiwxMy44NTM1ODkzIEMyNy4xNDA5MDMyLDEyLjgxNTkxNDcgMjguMzEzMDUzNiwxMC4yMDU4NDk2IDI1Ljc3MDc2NjEsNy43NjU3MjYyNiBDMjMuMDMzOTk2Myw1LjQwNzE0MDY2IDE5Ljk0ODU1OTgsNy4yMTEyNjk4MiAxOS42MDc3Nzc3LDcuNTUzNzI4MjEgQzE5LjQ0NDgzMyw3LjcxNjgwMzY0IDE4Ljg2NzUxODIsOC4yNzA0MDE3OCAxOC4wMjMwMDkyLDkuMDc5NzcwODYgQzE0Ljc1NzEwNzEsMTIuMjA4MjQ0MSA0LjgxODM1NzM3LDIxLjcyODQxNTcgMy44MTE3Nzk3MiwyMy4zNjE3NDQ4IEMyLjAxNTAwNzk1LDI2LjI3MjIxMiAyLjI4NDgzMDM0LDI5LjM1NDMzNzUgNC41NzEzMTIyMSwzMi4wNDA3OTA1IEM2Ljk1MTUzMTA3LDM0LjgzNzEwNDkgMTEuOTkzMTc5OCwzNS4wNjQ1NTIyIDE0LjQ1MjI0MjksMzMuMjg4NzQ2NyBDMTQuNDc5NDAwMywzMy4yNjkwMDYgMTQuNTA3NDMzOCwzMy4yNTAxMjM1IDE0LjUzNzIxOTQsMzMuMjMyOTU3NyBDMTYuNDg2NDIzMywzMi4wNDE2NDg4IDI0LjA4NDM3NjMsMjQuMjI1MTg2MyAyOC43MTYwMzUxLDE5LjI2MzQwMTkgQzI5LjIwNTc0NTIsMTguNzM4MTI3NCAzMC4wMzg4NjU2LDE4LjcwMjkzNzQgMzAuNTcyMzc4MSwxOS4xODE4NjQyIEMzMS4xMDg1MTg2LDE5LjY2MTY0OTMgMzEuMTQ1MzEyNiwyMC40NzUzMDk4IDMwLjY1NTYwMjUsMjEuMDAwNTg0MyBDMjkuNDU3MTcwNiwyMi4yODQ1ODg3IDE4LjkxNTcwMDgsMzMuNTQxOTQyNyAxNS45NzIxODM5LDM1LjM4ODk4NjUgQzE0LjUwMjE3NzUsMzYuNDM1MjQ0MSAxMi40NjYyNDUsMzcgMTAuMzUzMjIwNCwzNyIgaWQ9IjZFLUNvcHktMiIgZmlsbD0iI0JEQzhEMSI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
#message-input .file-attach .input-file + label .loading-icon {
background: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwaW5uZXIiIHdpZHRoPSIyMDBweCIgIGhlaWdodD0iMjAwcHgiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiIHN0eWxlPSJiYWNrZ3JvdW5kOiBub25lOyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiM4RUFEQjMiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC45MTY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiM4RUFEQjMiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC44MzMzMzMzMzMzMzMzMzM0cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg2MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiM4RUFEQjMiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC43NXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoOTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSI5LjQiIHJ5PSI0LjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjOEVBREIzIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiB0aW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNjY2NjY2NjY2NjY2NjY2NnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iOS40IiByeT0iNC44IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzhFQURCMyI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIgdGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjU4MzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE1MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiM4RUFEQjMiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC41cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSI5LjQiIHJ5PSI0LjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjOEVBREIzIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiB0aW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNDE2NjY2NjY2NjY2NjY2N3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjEwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iOS40IiByeT0iNC44IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzhFQURCMyI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIgdGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjMzMzMzMzMzMzMzMzMzMzNzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI0MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiM4RUFEQjMiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4yNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjcwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iOS40IiByeT0iNC44IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzhFQURCMyI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIgdGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjE2NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMDAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSI5LjQiIHJ5PSI0LjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjOEVBREIzIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiB0aW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMDgzMzMzMzMzMzMzMzMzMzNzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMzMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiM4RUFEQjMiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSIwcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48L3N2Zz4=);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
#message-input .file-attach .inputfile + label * {
pointer-events: none;
}
#message-input .record-audio {
overflow: hidden;
-webkit-box-shadow: none;
box-shadow: none;
cursor: pointer;
}
#message-input .record-audio + label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%;
z-index: 10;
cursor: pointer;
outline: 0;
}
#message-input .recordAudio + label * {
pointer-events: none;
}
#message-input .message-options {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
right: 0;
top: 0;
height: 100%;
overflow: hidden;
}
#message-input .clickable-option {
cursor: pointer;
}
#message-input .cancel-recording-icon {
color: var(--color-delete, #e60f0f);
}
#message-input .recording-audio-container {
border: var(--color-content-default, #454545);
border-style: solid;
border-width: thin;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
}
#message-input textarea {
width: 100%;
position: relative;
outline: none;
resize: none;
padding: 0px 10px 0px 2px;
max-height: 57px;
font-size: 14px;
font-weight: 500;
line-height: 19px;
border: none;
background-color: var(--color-surface-1, #f6f6f6);
}
#message-input textarea::placehoder {
color: var(--color-content-ghost, #8c8c8c);
font-weight: 300;
}
#message-input textarea::-webkit-input-placeholder {
color: var(--color-content-ghost, #8c8c8c);
font-weight: 300;
}
#message-input textarea:-moz-placeholder {
color: var(--color-content-ghost, #8c8c8c);
font-weight: 300;
}
#message-input textarea::-moz-placeholder {
color: var(--color-content-ghost, #8c8c8c);
font-weight: 300;
opacity: 1;
}
#message-input textarea:-ms-input-placeholder {
color: var(--color-content-ghost, #8c8c8c);
font-weight: 300;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select,
textarea,
input {
font-size: 16px;
}
}
.color-primary {
color: var(--color-brand, #0096fa);
}
.color-primary-dark {
color: var(--color-brand, #0096fa);
}
.white {
color: var(--color-surface-1, #f6f6f6);
}
.gray-1 {
color: var(--color-surface-2, #e0e0e0);
}
.gray-2 {
color: var(--color-surface-3, #cfcfcf);
}
.gray-3 {
color: var(--color-content-disable, #636363);
}
.blip-application-loading-container {
width: 100%;
height: 100%;
background: var(--color-surface-1, #f6f6f6);
z-index: 9;
position: absolute;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: var(--color-surface-3, #cfcfcf);
}
.blip-application-loading-container img {
height: 53px;
}
.blip-application-loading-container span {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background-color: var(--color-surface-1, #f6f6f6);
}
.loading-animation {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background-image: -webkit-gradient(linear, right top, left top, from(var(--color-surface-3, #cfcfcf)), color-stop(20%, var(--color-surface-1, #f6f6f6)), color-stop(40%, var(--color-surface-3, #cfcfcf)), to(var(--color-surface-3, #cfcfcf)));
background-image: linear-gradient(to left, var(--color-surface-3, #cfcfcf) 0%, var(--color-surface-1, #f6f6f6) 20%, var(--color-surface-3, #cfcfcf) 40%, var(--color-surface-3, #cfcfcf) 100%);
background-size: 980px 898px;
}
@-webkit-keyframes placeHolderShimmer {
0% {
background-position: -490px 0;
}
100% {
background-position: 490px 0;
}
}
@keyframes placeHolderShimmer {
0% {
background-position: -490px 0;
}
100% {
background-position: 490px 0;
}
}
.blip-application-loading-header {
height: 53px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.blip-application-loading-body {
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.blip-application-loading-footer {
height: 53px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
.ss-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left;
}
.ss-content {
height: 100%;
width: calc(100% + 18px);
padding: 0 0 0 0;
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ss-content.rtl {
width: calc(100% + 18px);
right: auto;
}
.ss-scroll {
position: relative;
background: rgba(0, 0, 0, 0.3);
width: 9px;
border-radius: 4px;
top: 0;
z-index: 2;
cursor: pointer;
-webkit-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
.ss-hidden {
display: none;
}
.ss-grabbed {
-o-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.color-primary {
color: var(--color-brand, #0096fa);
}
.color-primary-dark {
color: var(--color-brand, #0096fa);
}
.white {
color: var(--color-surface-1, #f6f6f6);
}
.gray-1 {
color: var(--color-surface-2, #e0e0e0);
}
.gray-2 {
color: var(--color-surface-3, #cfcfcf);
}
.gray-3 {
color: var(--color-content-disable, #636363);
}
body {
background: var(--color-surface-2, #e0e0e0);
}
button:focus {
outline: 0;
}
.fade-enter-active, .fade-leave-active {
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
/*
CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
/*
ASPECT RATIOS
*/
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
* Make sure there are no height and width attributes on the embedded media.
* Adapted from: https://github.com/suitcss/components-flex-embed
*
* Example:
*
*
*
*
*
* */
.aspect-ratio {
height: 0;
position: relative;
}
.aspect-ratio--16x9 {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16 {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3 {
padding-bottom: 75%;
}
.aspect-ratio--3x4 {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4 {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6 {
padding-bottom: 150%;
}
.aspect-ratio--8x5 {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8 {
padding-bottom: 160%;
}
.aspect-ratio--7x5 {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7 {
padding-bottom: 140%;
}
.aspect-ratio--1x1 {
padding-bottom: 100%;
}
.aspect-ratio--object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
@media screen and (min-width: 30em) {
.aspect-ratio-ns {
height: 0;
position: relative;
}
.aspect-ratio--16x9-ns {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-ns {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-ns {
padding-bottom: 75%;
}
.aspect-ratio--3x4-ns {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-ns {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-ns {
padding-bottom: 150%;
}
.aspect-ratio--8x5-ns {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-ns {
padding-bottom: 160%;
}
.aspect-ratio--7x5-ns {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-ns {
padding-bottom: 140%;
}
.aspect-ratio--1x1-ns {
padding-bottom: 100%;
}
.aspect-ratio--object-ns {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.aspect-ratio-m {
height: 0;
position: relative;
}
.aspect-ratio--16x9-m {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-m {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-m {
padding-bottom: 75%;
}
.aspect-ratio--3x4-m {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-m {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-m {
padding-bottom: 150%;
}
.aspect-ratio--8x5-m {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-m {
padding-bottom: 160%;
}
.aspect-ratio--7x5-m {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-m {
padding-bottom: 140%;
}
.aspect-ratio--1x1-m {
padding-bottom: 100%;
}
.aspect-ratio--object-m {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
@media screen and (min-width: 60em) {
.aspect-ratio-l {
height: 0;
position: relative;
}
.aspect-ratio--16x9-l {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-l {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-l {
padding-bottom: 75%;
}
.aspect-ratio--3x4-l {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-l {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-l {
padding-bottom: 150%;
}
.aspect-ratio--8x5-l {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-l {
padding-bottom: 160%;
}
.aspect-ratio--7x5-l {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-l {
padding-bottom: 140%;
}
.aspect-ratio--1x1-l {
padding-bottom: 100%;
}
.aspect-ratio--object-l {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
/*
IMAGES
Docs: http://tachyons.io/docs/elements/images/
*/
/* Responsive images! */
img {
max-width: 100%;
}
/*
BACKGROUND SIZE
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
Often used in combination with background image set as an inline style
on an html element.
*/
.cover {
background-size: cover !important;
}
.contain {
background-size: contain !important;
}
@media screen and (min-width: 30em) {
.cover-ns {
background-size: cover !important;
}
.contain-ns {
background-size: contain !important;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.cover-m {
background-size: cover !important;
}
.contain-m {
background-size: contain !important;
}
}
@media screen and (min-width: 60em) {
.cover-l {
background-size: cover !important;
}
.contain-l {
background-size: contain !important;
}
}
/*
BACKGROUND POSITION
Base:
bg = background
Modifiers:
-center = center center
-top = top center
-right = center right
-bottom = bottom center
-left = center left
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bg-center {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left {
background-repeat: no-repeat;
background-position: center left;
}
@media screen and (min-width: 30em) {
.bg-center-ns {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-ns {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-ns {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-ns {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-ns {
background-repeat: no-repeat;
background-position: center left;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.bg-center-m {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-m {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-m {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-m {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-m {
background-repeat: no-repeat;
background-position: center left;
}
}
@media screen and (min-width: 60em) {
.bg-center-l {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-l {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-l {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-l {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-l {
background-repeat: no-repeat;
background-position: center left;
}
}
/*
OUTLINES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.outline {
outline: 1px solid;
}
.outline-transparent {
outline: 1px solid transparent;
}
.outline-0 {
outline: 0;
}
@media screen and (min-width: 30em) {
.outline-ns {
outline: 1px solid;
}
.outline-transparent-ns {
outline: 1px solid transparent;
}
.outline-0-ns {
outline: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.outline-m {
outline: 1px solid;
}
.outline-transparent-m {
outline: 1px solid transparent;
}
.outline-0-m {
outline: 0;
}
}
@media screen and (min-width: 60em) {
.outline-l {
outline: 1px solid;
}
.outline-transparent-l {
outline: 1px solid transparent;
}
.outline-0-l {
outline: 0;
}
}
/*
BORDERS
Docs: http://tachyons.io/docs/themes/borders/
Base:
b = border
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ba {
border-style: solid;
border-width: 1px;
}
.bt {
border-top-style: solid;
border-top-width: 1px;
}
.br {
border-right-style: solid;
border-right-width: 1px;
}
.bb {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl {
border-left-style: solid;
border-left-width: 1px;
}
.bn {
border-style: none;
border-width: 0;
}
@media screen and (min-width: 30em) {
.ba-ns {
border-style: solid;
border-width: 1px;
}
.bt-ns {
border-top-style: solid;
border-top-width: 1px;
}
.br-ns {
border-right-style: solid;
border-right-width: 1px;
}
.bb-ns {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-ns {
border-left-style: solid;
border-left-width: 1px;
}
.bn-ns {
border-style: none;
border-width: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ba-m {
border-style: solid;
border-width: 1px;
}
.bt-m {
border-top-style: solid;
border-top-width: 1px;
}
.br-m {
border-right-style: solid;
border-right-width: 1px;
}
.bb-m {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-m {
border-left-style: solid;
border-left-width: 1px;
}
.bn-m {
border-style: none;
border-width: 0;
}
}
@media screen and (min-width: 60em) {
.ba-l {
border-style: solid;
border-width: 1px;
}
.bt-l {
border-top-style: solid;
border-top-width: 1px;
}
.br-l {
border-right-style: solid;
border-right-width: 1px;
}
.bb-l {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-l {
border-left-style: solid;
border-left-width: 1px;
}
.bn-l {
border-style: none;
border-width: 0;
}
}
/*
BORDER RADIUS
Docs: http://tachyons.io/docs/themes/border-radius/
Base:
br = border-radius
Modifiers:
0 = 0/none
1 = 1st step in scale
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
Literal values:
-100 = 100%
-pill = 9999px
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.br0 {
border-radius: 0;
}
.br1 {
border-radius: .125rem;
}
.br2 {
border-radius: .25rem;
}
.br3 {
border-radius: .5rem;
}
.br4 {
border-radius: 1rem;
}
.br-100 {
border-radius: 100%;
}
.br-pill {
border-radius: 9999px;
}
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@media screen and (min-width: 30em) {
.br0-ns {
border-radius: 0;
}
.br1-ns {
border-radius: .125rem;
}
.br2-ns {
border-radius: .25rem;
}
.br3-ns {
border-radius: .5rem;
}
.br4-ns {
border-radius: 1rem;
}
.br-100-ns {
border-radius: 100%;
}
.br-pill-ns {
border-radius: 9999px;
}
.br--bottom-ns {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-ns {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.br0-m {
border-radius: 0;
}
.br1-m {
border-radius: .125rem;
}
.br2-m {
border-radius: .25rem;
}
.br3-m {
border-radius: .5rem;
}
.br4-m {
border-radius: 1rem;
}
.br-100-m {
border-radius: 100%;
}
.br-pill-m {
border-radius: 9999px;
}
.br--bottom-m {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-m {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-m {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-m {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 60em) {
.br0-l {
border-radius: 0;
}
.br1-l {
border-radius: .125rem;
}
.br2-l {
border-radius: .25rem;
}
.br3-l {
border-radius: .5rem;
}
.br4-l {
border-radius: 1rem;
}
.br-100-l {
border-radius: 100%;
}
.br-pill-l {
border-radius: 9999px;
}
.br--bottom-l {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-l {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-l {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
/*
BORDER STYLES
Docs: http://tachyons.io/docs/themes/borders/
Depends on base border module in _borders.css
Base:
b = border-style
Modifiers:
--none = none
--dotted = dotted
--dashed = dashed
--solid = solid
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.b--dotted {
border-style: dotted;
}
.b--dashed {
border-style: dashed;
}
.b--solid {
border-style: solid;
}
.b--none {
border-style: none;
}
@media screen and (min-width: 30em) {
.b--dotted-ns {
border-style: dotted;
}
.b--dashed-ns {
border-style: dashed;
}
.b--solid-ns {
border-style: solid;
}
.b--none-ns {
border-style: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.b--dotted-m {
border-style: dotted;
}
.b--dashed-m {
border-style: dashed;
}
.b--solid-m {
border-style: solid;
}
.b--none-m {
border-style: none;
}
}
@media screen and (min-width: 60em) {
.b--dotted-l {
border-style: dotted;
}
.b--dashed-l {
border-style: dashed;
}
.b--solid-l {
border-style: solid;
}
.b--none-l {
border-style: none;
}
}
/*
BORDER WIDTHS
Docs: http://tachyons.io/docs/themes/borders/
Base:
bw = border-width
Modifiers:
0 = 0 width border
1 = 1st step in border-width scale
2 = 2nd step in border-width scale
3 = 3rd step in border-width scale
4 = 4th step in border-width scale
5 = 5th step in border-width scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bw0 {
border-width: 0;
}
.bw1 {
border-width: .125rem;
}
.bw2 {
border-width: .25rem;
}
.bw3 {
border-width: .5rem;
}
.bw4 {
border-width: 1rem;
}
.bw5 {
border-width: 2rem;
}
.bw-0 {
border-width: 0px;
}
.bw-1 {
border-width: 1px;
}
.bw-2 {
border-width: 2px;
}
.bw-3 {
border-width: 3px;
}
.bw-4 {
border-width: 4px;
}
.bw-5 {
border-width: 5px;
}
/* Resets */
.bt-0 {
border-top-width: 0;
}
.br-0 {
border-right-width: 0;
}
.bb-0 {
border-bottom-width: 0;
}
.bl-0 {
border-left-width: 0;
}
@media screen and (min-width: 30em) {
.bw0-ns {
border-width: 0;
}
.bw1-ns {
border-width: .125rem;
}
.bw2-ns {
border-width: .25rem;
}
.bw3-ns {
border-width: .5rem;
}
.bw4-ns {
border-width: 1rem;
}
.bw5-ns {
border-width: 2rem;
}
.bt-0-ns {
border-top-width: 0;
}
.br-0-ns {
border-right-width: 0;
}
.bb-0-ns {
border-bottom-width: 0;
}
.bl-0-ns {
border-left-width: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.bw0-m {
border-width: 0;
}
.bw1-m {
border-width: .125rem;
}
.bw2-m {
border-width: .25rem;
}
.bw3-m {
border-width: .5rem;
}
.bw4-m {
border-width: 1rem;
}
.bw5-m {
border-width: 2rem;
}
.bt-0-m {
border-top-width: 0;
}
.br-0-m {
border-right-width: 0;
}
.bb-0-m {
border-bottom-width: 0;
}
.bl-0-m {
border-left-width: 0;
}
}
@media screen and (min-width: 60em) {
.bw0-l {
border-width: 0;
}
.bw1-l {
border-width: .125rem;
}
.bw2-l {
border-width: .25rem;
}
.bw3-l {
border-width: .5rem;
}
.bw4-l {
border-width: 1rem;
}
.bw5-l {
border-width: 2rem;
}
.bt-0-l {
border-top-width: 0;
}
.br-0-l {
border-right-width: 0;
}
.bb-0-l {
border-bottom-width: 0;
}
.bl-0-l {
border-left-width: 0;
}
}
/*
BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.shadow-1 {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2 {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3 {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4 {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5 {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-6 {
-webkit-box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
}
@media screen and (min-width: 30em) {
.shadow-1-ns {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-ns {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-ns {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-ns {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-ns {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.shadow-1-m {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-m {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-m {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-m {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-m {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 60em) {
.shadow-1-l {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-l {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-l {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-l {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-l {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
/*
CODE
*/
.pre {
overflow-x: auto;
overflow-y: hidden;
overflow: scroll;
}
/*
COORDINATES
Docs: http://tachyons.io/docs/layout/position/
Use in combination with the position module.
Base:
top
bottom
right
left
Modifiers:
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
--1 = literal value -1
--2 = literal value -2
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.top-0 {
top: 0;
}
.right-0 {
right: 0;
}
.bottom-0 {
bottom: 0;
}
.left-0 {
left: 0;
}
.top-1 {
top: 1rem;
}
.right-1 {
right: 1rem;
}
.bottom-1 {
bottom: 1rem;
}
.left-1 {
left: 1rem;
}
.top-2 {
top: 2rem;
}
.right-2 {
right: 2rem;
}
.bottom-2 {
bottom: 2rem;
}
.left-2 {
left: 2rem;
}
.top--1 {
top: -1rem;
}
.right--1 {
right: -1rem;
}
.bottom--1 {
bottom: -1rem;
}
.left--1 {
left: -1rem;
}
.top--2 {
top: -2rem;
}
.right--2 {
right: -2rem;
}
.bottom--2 {
bottom: -2rem;
}
.left--2 {
left: -2rem;
}
.absolute--fill {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@media screen and (min-width: 30em) {
.top-0-ns {
top: 0;
}
.left-0-ns {
left: 0;
}
.right-0-ns {
right: 0;
}
.bottom-0-ns {
bottom: 0;
}
.top-1-ns {
top: 1rem;
}
.left-1-ns {
left: 1rem;
}
.right-1-ns {
right: 1rem;
}
.bottom-1-ns {
bottom: 1rem;
}
.top-2-ns {
top: 2rem;
}
.left-2-ns {
left: 2rem;
}
.right-2-ns {
right: 2rem;
}
.bottom-2-ns {
bottom: 2rem;
}
.top--1-ns {
top: -1rem;
}
.right--1-ns {
right: -1rem;
}
.bottom--1-ns {
bottom: -1rem;
}
.left--1-ns {
left: -1rem;
}
.top--2-ns {
top: -2rem;
}
.right--2-ns {
right: -2rem;
}
.bottom--2-ns {
bottom: -2rem;
}
.left--2-ns {
left: -2rem;
}
.absolute--fill-ns {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.top-0-m {
top: 0;
}
.left-0-m {
left: 0;
}
.right-0-m {
right: 0;
}
.bottom-0-m {
bottom: 0;
}
.top-1-m {
top: 1rem;
}
.left-1-m {
left: 1rem;
}
.right-1-m {
right: 1rem;
}
.bottom-1-m {
bottom: 1rem;
}
.top-2-m {
top: 2rem;
}
.left-2-m {
left: 2rem;
}
.right-2-m {
right: 2rem;
}
.bottom-2-m {
bottom: 2rem;
}
.top--1-m {
top: -1rem;
}
.right--1-m {
right: -1rem;
}
.bottom--1-m {
bottom: -1rem;
}
.left--1-m {
left: -1rem;
}
.top--2-m {
top: -2rem;
}
.right--2-m {
right: -2rem;
}
.bottom--2-m {
bottom: -2rem;
}
.left--2-m {
left: -2rem;
}
.absolute--fill-m {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 60em) {
.top-0-l {
top: 0;
}
.left-0-l {
left: 0;
}
.right-0-l {
right: 0;
}
.bottom-0-l {
bottom: 0;
}
.top-1-l {
top: 1rem;
}
.left-1-l {
left: 1rem;
}
.right-1-l {
right: 1rem;
}
.bottom-1-l {
bottom: 1rem;
}
.top-2-l {
top: 2rem;
}
.left-2-l {
left: 2rem;
}
.right-2-l {
right: 2rem;
}
.bottom-2-l {
bottom: 2rem;
}
.top--1-l {
top: -1rem;
}
.right--1-l {
right: -1rem;
}
.bottom--1-l {
bottom: -1rem;
}
.left--1-l {
left: -1rem;
}
.top--2-l {
top: -2rem;
}
.right--2-l {
right: -2rem;
}
.bottom--2-l {
bottom: -2rem;
}
.left--2-l {
left: -2rem;
}
.absolute--fill-l {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
/*
CLEARFIX
http://tachyons.io/docs/layout/clearfix/
*/
/* Nicolas Gallaghers Clearfix solution
Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.cl {
clear: left;
}
.cr {
clear: right;
}
.cb {
clear: both;
}
.cn {
clear: none;
}
@media screen and (min-width: 30em) {
.cl-ns {
clear: left;
}
.cr-ns {
clear: right;
}
.cb-ns {
clear: both;
}
.cn-ns {
clear: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.cl-m {
clear: left;
}
.cr-m {
clear: right;
}
.cb-m {
clear: both;
}
.cn-m {
clear: none;
}
}
@media screen and (min-width: 60em) {
.cl-l {
clear: left;
}
.cr-l {
clear: right;
}
.cb-l {
clear: both;
}
.cn-l {
clear: none;
}
}
/*
DISPLAY
Docs: http://tachyons.io/docs/layout/display
Base:
d = display
Modifiers:
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
t-row = table-row
t-columm = table-column
t-column-group = table-column-group
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.dn {
display: none;
}
.di {
display: inline;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.dit {
display: inline-table;
}
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.dt-row {
display: table-row;
}
.dt-row-group {
display: table-row-group;
}
.dt-column {
display: table-column;
}
.dt-column-group {
display: table-column-group;
}
/*
This will set table to full width and then
all cells will be equal width
*/
.dt--fixed {
table-layout: fixed;
width: 100%;
}
@media screen and (min-width: 30em) {
.dn-ns {
display: none;
}
.di-ns {
display: inline;
}
.db-ns {
display: block;
}
.dib-ns {
display: inline-block;
}
.dit-ns {
display: inline-table;
}
.dt-ns {
display: table;
}
.dtc-ns {
display: table-cell;
}
.dt-row-ns {
display: table-row;
}
.dt-row-group-ns {
display: table-row-group;
}
.dt-column-ns {
display: table-column;
}
.dt-column-group-ns {
display: table-column-group;
}
.dt--fixed-ns {
table-layout: fixed;
width: 100%;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.dn-m {
display: none;
}
.di-m {
display: inline;
}
.db-m {
display: block;
}
.dib-m {
display: inline-block;
}
.dit-m {
display: inline-table;
}
.dt-m {
display: table;
}
.dtc-m {
display: table-cell;
}
.dt-row-m {
display: table-row;
}
.dt-row-group-m {
display: table-row-group;
}
.dt-column-m {
display: table-column;
}
.dt-column-group-m {
display: table-column-group;
}
.dt--fixed-m {
table-layout: fixed;
width: 100%;
}
}
@media screen and (min-width: 60em) {
.dn-l {
display: none;
}
.di-l {
display: inline;
}
.db-l {
display: block;
}
.dib-l {
display: inline-block;
}
.dit-l {
display: inline-table;
}
.dt-l {
display: table;
}
.dtc-l {
display: table-cell;
}
.dt-row-l {
display: table-row;
}
.dt-row-group-l {
display: table-row-group;
}
.dt-column-l {
display: table-column;
}
.dt-column-group-l {
display: table-column-group;
}
.dt--fixed-l {
table-layout: fixed;
width: 100%;
}
}
/*
FLEXBOX
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.flex {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0 {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7 {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8 {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
@media screen and (min-width: 30em) {
.flex-ns {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-ns {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-ns {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-ns {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-ns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-ns {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-ns {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-ns {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-ns {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-ns {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-ns {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-ns {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-ns {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-ns {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-ns {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-ns {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-ns {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-ns {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-ns {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-ns {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-ns {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-ns {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-ns {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-ns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-ns {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-ns {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-ns {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-ns {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-ns {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-ns {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-ns {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-ns {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-ns {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-ns {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-ns {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-ns {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-ns {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-ns {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-ns {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-ns {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-ns {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-ns {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.flex-m {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-m {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-m {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-m {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-m {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-m {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-m {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-m {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-m {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-m {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-m {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-m {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-m {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-m {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-m {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-m {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-m {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-m {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-m {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-m {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-m {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-m {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-m {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-m {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-m {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-m {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-m {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-m {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-m {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-m {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-m {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-m {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-m {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-m {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-m {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-m {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-m {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-m {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-m {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-m {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-m {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-m {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
@media screen and (min-width: 60em) {
.flex-l {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-l {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-l {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-l {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-l {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-l {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-l {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-l {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-l {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-l {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-l {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-l {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-l {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-l {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-l {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-l {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-l {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-l {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-l {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-l {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-l {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-l {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-l {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-l {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-l {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-l {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-l {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-l {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-l {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-l {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-l {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-l {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-l {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-l {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-l {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-l {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-l {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-l {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-l {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-l {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-l {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-l {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
/*
FLOATS
http://tachyons.io/docs/layout/floats/
1. Floated elements are automatically rendered as block level elements.
Setting floats to display inline will fix the double margin bug in
ie6. You know... just in case.
2. Don't forget to clearfix your floats with .cf
Base:
f = float
Modifiers:
l = left
r = right
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.fl {
float: left;
_display: inline;
}
.fr {
float: right;
_display: inline;
}
.fn {
float: none;
}
@media screen and (min-width: 30em) {
.fl-ns {
float: left;
_display: inline;
}
.fr-ns {
float: right;
_display: inline;
}
.fn-ns {
float: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.fl-m {
float: left;
_display: inline;
}
.fr-m {
float: right;
_display: inline;
}
.fn-m {
float: none;
}
}
@media screen and (min-width: 60em) {
.fl-l {
float: left;
_display: inline;
}
.fr-l {
float: right;
_display: inline;
}
.fn-l {
float: none;
}
}
/*
FONT STYLE
Docs: http://tachyons.io/docs/typography/font-style/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.i {
font-style: italic;
}
.fs-normal {
font-style: normal;
}
@media screen and (min-width: 30em) {
.i-ns {
font-style: italic;
}
.fs-normal-ns {
font-style: normal;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.i-m {
font-style: italic;
}
.fs-normal-m {
font-style: normal;
}
}
@media screen and (min-width: 60em) {
.i-l {
font-style: italic;
}
.fs-normal-l {
font-style: normal;
}
}
/*
FONT WEIGHT
Docs: http://tachyons.io/docs/typography/font-weight/
Base
fw = font-weight
Modifiers:
1 = literal value 100
2 = literal value 200
3 = literal value 300
4 = literal value 400
5 = literal value 500
6 = literal value 600
7 = literal value 700
8 = literal value 800
9 = literal value 900
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.normal {
font-weight: normal;
}
.b {
font-weight: bold;
}
.fw1 {
font-weight: 100;
}
.fw2 {
font-weight: 200;
}
.fw3 {
font-weight: 300;
}
.fw4 {
font-weight: 400;
}
.fw5 {
font-weight: 500;
}
.fw6 {
font-weight: 600;
}
.fw7 {
font-weight: 700;
}
.fw8 {
font-weight: 800;
}
.fw9 {
font-weight: 900;
}
@media screen and (min-width: 30em) {
.normal-ns {
font-weight: normal;
}
.b-ns {
font-weight: bold;
}
.fw1-ns {
font-weight: 100;
}
.fw2-ns {
font-weight: 200;
}
.fw3-ns {
font-weight: 300;
}
.fw4-ns {
font-weight: 400;
}
.fw5-ns {
font-weight: 500;
}
.fw6-ns {
font-weight: 600;
}
.fw7-ns {
font-weight: 700;
}
.fw8-ns {
font-weight: 800;
}
.fw9-ns {
font-weight: 900;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.normal-m {
font-weight: normal;
}
.b-m {
font-weight: bold;
}
.fw1-m {
font-weight: 100;
}
.fw2-m {
font-weight: 200;
}
.fw3-m {
font-weight: 300;
}
.fw4-m {
font-weight: 400;
}
.fw5-m {
font-weight: 500;
}
.fw6-m {
font-weight: 600;
}
.fw7-m {
font-weight: 700;
}
.fw8-m {
font-weight: 800;
}
.fw9-m {
font-weight: 900;
}
}
@media screen and (min-width: 60em) {
.normal-l {
font-weight: normal;
}
.b-l {
font-weight: bold;
}
.fw1-l {
font-weight: 100;
}
.fw2-l {
font-weight: 200;
}
.fw3-l {
font-weight: 300;
}
.fw4-l {
font-weight: 400;
}
.fw5-l {
font-weight: 500;
}
.fw6-l {
font-weight: 600;
}
.fw7-l {
font-weight: 700;
}
.fw8-l {
font-weight: 800;
}
.fw9-l {
font-weight: 900;
}
}
/*
HEIGHTS
Docs: http://tachyons.io/docs/layout/heights/
Base:
h = height
min-h = min-height
min-vh = min-height vertical screen height
vh = vertical screen height
Modifiers
1 = 1st step in height scale
2 = 2nd step in height scale
3 = 3rd step in height scale
4 = 4th step in height scale
5 = 5th step in height scale
-25 = literal value 25%
-50 = literal value 50%
-75 = literal value 75%
-100 = literal value 100%
-auto = string value of auto
-inherit = string value of inherit
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Height Scale */
.h1 {
height: 1rem;
}
.h2 {
height: 2rem;
}
.h3 {
height: 4rem;
}
.h4 {
height: 8rem;
}
.h5 {
height: 16rem;
}
/* Height Percentages - Based off of height of parent */
.h-25 {
height: 25%;
}
.h-50 {
height: 50%;
}
.h-75 {
height: 75%;
}
.h-100 {
height: 100%;
}
.min-h-100 {
min-height: 100%;
}
/* Screen Height Percentage */
.vh-25 {
height: 25vh;
}
.vh-50 {
height: 50vh;
}
.vh-75 {
height: 75vh;
}
.vh-100 {
height: 100vh;
}
.min-vh-100 {
min-height: 100vh;
}
.min-vh-flex {
min-height: calc(100vh - 140px) !important;
}
/* String Properties */
.h-auto {
height: auto;
}
.h-inherit {
height: inherit;
}
@media screen and (min-width: 30em) {
.h1-ns {
height: 1rem;
}
.h2-ns {
height: 2rem;
}
.h3-ns {
height: 4rem;
}
.h4-ns {
height: 8rem;
}
.h5-ns {
height: 16rem;
}
.h-25-ns {
height: 25%;
}
.h-50-ns {
height: 50%;
}
.h-75-ns {
height: 75%;
}
.h-100-ns {
height: 100%;
}
.min-h-100-ns {
min-height: 100%;
}
.vh-25-ns {
height: 25vh;
}
.vh-50-ns {
height: 50vh;
}
.vh-75-ns {
height: 75vh;
}
.vh-100-ns {
height: 100vh;
}
.min-vh-100-ns {
min-height: 100vh;
}
.h-auto-ns {
height: auto;
}
.h-inherit-ns {
height: inherit;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.h1-m {
height: 1rem;
}
.h2-m {
height: 2rem;
}
.h3-m {
height: 4rem;
}
.h4-m {
height: 8rem;
}
.h5-m {
height: 16rem;
}
.h-25-m {
height: 25%;
}
.h-50-m {
height: 50%;
}
.h-75-m {
height: 75%;
}
.h-100-m {
height: 100%;
}
.min-h-100-m {
min-height: 100%;
}
.vh-25-m {
height: 25vh;
}
.vh-50-m {
height: 50vh;
}
.vh-75-m {
height: 75vh;
}
.vh-100-m {
height: 100vh;
}
.min-vh-100-m {
min-height: 100vh;
}
.h-auto-m {
height: auto;
}
.h-inherit-m {
height: inherit;
}
}
@media screen and (min-width: 60em) {
.h1-l {
height: 1rem;
}
.h2-l {
height: 2rem;
}
.h3-l {
height: 4rem;
}
.h4-l {
height: 8rem;
}
.h5-l {
height: 16rem;
}
.h-25-l {
height: 25%;
}
.h-50-l {
height: 50%;
}
.h-75-l {
height: 75%;
}
.h-100-l {
height: 100%;
}
.min-h-100-l {
min-height: 100%;
}
.vh-25-l {
height: 25vh;
}
.vh-50-l {
height: 50vh;
}
.vh-75-l {
height: 75vh;
}
.vh-100-l {
height: 100vh;
}
.min-vh-100-l {
min-height: 100vh;
}
.h-auto-l {
height: auto;
}
.h-inherit-l {
height: inherit;
}
}
/*
LETTER SPACING
Docs: http://tachyons.io/docs/typography/tracking/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tracked {
letter-spacing: .1em;
}
.tracked-tight {
letter-spacing: -.05em;
}
.tracked-mega {
letter-spacing: .25em;
}
@media screen and (min-width: 30em) {
.tracked-ns {
letter-spacing: .1em;
}
.tracked-tight-ns {
letter-spacing: -.05em;
}
.tracked-mega-ns {
letter-spacing: .25em;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.tracked-m {
letter-spacing: .1em;
}
.tracked-tight-m {
letter-spacing: -.05em;
}
.tracked-mega-m {
letter-spacing: .25em;
}
}
@media screen and (min-width: 60em) {
.tracked-l {
letter-spacing: .1em;
}
.tracked-tight-l {
letter-spacing: -.05em;
}
.tracked-mega-l {
letter-spacing: .25em;
}
}
/*
LINE HEIGHT / LEADING
Docs: http://tachyons.io/docs/typography/line-height
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.lh-solid {
line-height: 1;
}
.lh-title {
line-height: 1.25;
}
.lh-copy {
line-height: 1.5;
}
@media screen and (min-width: 30em) {
.lh-solid-ns {
line-height: 1;
}
.lh-title-ns {
line-height: 1.25;
}
.lh-copy-ns {
line-height: 1.5;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.lh-solid-m {
line-height: 1;
}
.lh-title-m {
line-height: 1.25;
}
.lh-copy-m {
line-height: 1.5;
}
}
@media screen and (min-width: 60em) {
.lh-solid-l {
line-height: 1;
}
.lh-title-l {
line-height: 1.25;
}
.lh-copy-l {
line-height: 1.5;
}
}
/*
LISTS
http://tachyons.io/docs/elements/lists/
*/
.list {
list-style-type: none;
}
/*
MAX WIDTHS
Docs: http://tachyons.io/docs/layout/max-widths/
Base:
mw = max-width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
6 = 6st step in width scale
7 = 7nd step in width scale
8 = 8rd step in width scale
9 = 9th step in width scale
-100 = literal value 100%
-none = string value none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Max Width Percentages */
.mw-100 {
max-width: 100%;
}
/* Max Width Scale */
.mw1 {
max-width: 1rem;
}
.mw2 {
max-width: 2rem;
}
.mw3 {
max-width: 4rem;
}
.mw4 {
max-width: 8rem;
}
.mw5 {
max-width: 16rem;
}
.mw6 {
max-width: 32rem;
}
.mw7 {
max-width: 48rem;
}
.mw8 {
max-width: 64rem;
}
.mw9 {
max-width: 96rem;
}
/* Max Width String Properties */
.mw-none {
max-width: none;
}
@media screen and (min-width: 30em) {
.mw-100-ns {
max-width: 100%;
}
.mw1-ns {
max-width: 1rem;
}
.mw2-ns {
max-width: 2rem;
}
.mw3-ns {
max-width: 4rem;
}
.mw4-ns {
max-width: 8rem;
}
.mw5-ns {
max-width: 16rem;
}
.mw6-ns {
max-width: 32rem;
}
.mw7-ns {
max-width: 48rem;
}
.mw8-ns {
max-width: 64rem;
}
.mw9-ns {
max-width: 96rem;
}
.mw-none-ns {
max-width: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.mw-100-m {
max-width: 100%;
}
.mw1-m {
max-width: 1rem;
}
.mw2-m {
max-width: 2rem;
}
.mw3-m {
max-width: 4rem;
}
.mw4-m {
max-width: 8rem;
}
.mw5-m {
max-width: 16rem;
}
.mw6-m {
max-width: 32rem;
}
.mw7-m {
max-width: 48rem;
}
.mw8-m {
max-width: 64rem;
}
.mw9-m {
max-width: 96rem;
}
.mw-none-m {
max-width: none;
}
}
@media screen and (min-width: 60em) {
.mw-100-l {
max-width: 100%;
}
.mw1-l {
max-width: 1rem;
}
.mw2-l {
max-width: 2rem;
}
.mw3-l {
max-width: 4rem;
}
.mw4-l {
max-width: 8rem;
}
.mw5-l {
max-width: 16rem;
}
.mw6-l {
max-width: 32rem;
}
.mw7-l {
max-width: 48rem;
}
.mw8-l {
max-width: 64rem;
}
.mw9-l {
max-width: 96rem;
}
.mw-none-l {
max-width: none;
}
}
/*
WIDTHS
Docs: http://tachyons.io/docs/layout/widths/
Base:
w = width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
-10 = literal value 10%
-20 = literal value 20%
-25 = literal value 25%
-30 = literal value 30%
-33 = literal value 33%
-34 = literal value 34%
-40 = literal value 40%
-50 = literal value 50%
-60 = literal value 60%
-70 = literal value 70%
-75 = literal value 75%
-80 = literal value 80%
-90 = literal value 90%
-100 = literal value 100%
-third = 100% / 3 (Not supported in opera mini or IE8)
-two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
-auto = string value auto
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Width Scale */
.w1 {
width: 1rem;
}
.w2 {
width: 2rem;
}
.w3 {
width: 4rem;
}
.w4 {
width: 8rem;
}
.w5 {
width: 16rem;
}
.w-10 {
width: 10%;
}
.w-20 {
width: 20%;
}
.w-25 {
width: 25%;
}
.w-30 {
width: 30%;
}
.w-33 {
width: 33%;
}
.w-34 {
width: 34%;
}
.w-40 {
width: 40%;
}
.w-50 {
width: 50%;
}
.w-55 {
width: 55%;
}
.w-60 {
width: 60%;
}
.w-70 {
width: 70%;
}
.w-75 {
width: 75%;
}
.w-80 {
width: 80%;
}
.w-90 {
width: 90%;
}
.w-100 {
width: 100%;
}
.w-third {
width: 33.33333%;
}
.w-two-thirds {
width: 66.66667%;
}
.w-auto {
width: auto;
}
@media screen and (min-width: 30em) {
.w1-ns {
width: 1rem;
}
.w2-ns {
width: 2rem;
}
.w3-ns {
width: 4rem;
}
.w4-ns {
width: 8rem;
}
.w5-ns {
width: 16rem;
}
.w-10-ns {
width: 10%;
}
.w-20-ns {
width: 20%;
}
.w-25-ns {
width: 25%;
}
.w-30-ns {
width: 30%;
}
.w-33-ns {
width: 33%;
}
.w-34-ns {
width: 34%;
}
.w-40-ns {
width: 40%;
}
.w-50-ns {
width: 50%;
}
.w-60-ns {
width: 60%;
}
.w-70-ns {
width: 70%;
}
.w-75-ns {
width: 75%;
}
.w-80-ns {
width: 80%;
}
.w-90-ns {
width: 90%;
}
.w-100-ns {
width: 100%;
}
.w-third-ns {
width: 33.33333%;
}
.w-two-thirds-ns {
width: 66.66667%;
}
.w-auto-ns {
width: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.w1-m {
width: 1rem;
}
.w2-m {
width: 2rem;
}
.w3-m {
width: 4rem;
}
.w4-m {
width: 8rem;
}
.w5-m {
width: 16rem;
}
.w-10-m {
width: 10%;
}
.w-20-m {
width: 20%;
}
.w-25-m {
width: 25%;
}
.w-30-m {
width: 30%;
}
.w-33-m {
width: 33%;
}
.w-34-m {
width: 34%;
}
.w-40-m {
width: 40%;
}
.w-50-m {
width: 50%;
}
.w-60-m {
width: 60%;
}
.w-70-m {
width: 70%;
}
.w-75-m {
width: 75%;
}
.w-80-m {
width: 80%;
}
.w-90-m {
width: 90%;
}
.w-100-m {
width: 100%;
}
.w-third-m {
width: 33.33333%;
}
.w-two-thirds-m {
width: 66.66667%;
}
.w-auto-m {
width: auto;
}
}
@media screen and (min-width: 60em) {
.w1-l {
width: 1rem;
}
.w2-l {
width: 2rem;
}
.w3-l {
width: 4rem;
}
.w4-l {
width: 8rem;
}
.w5-l {
width: 16rem;
}
.w-10-l {
width: 10%;
}
.w-20-l {
width: 20%;
}
.w-25-l {
width: 25%;
}
.w-30-l {
width: 30%;
}
.w-33-l {
width: 33%;
}
.w-34-l {
width: 34%;
}
.w-40-l {
width: 40%;
}
.w-50-l {
width: 50%;
}
.w-60-l {
width: 60%;
}
.w-70-l {
width: 70%;
}
.w-75-l {
width: 75%;
}
.w-80-l {
width: 80%;
}
.w-90-l {
width: 90%;
}
.w-100-l {
width: 100%;
}
.w-third-l {
width: 33.33333%;
}
.w-two-thirds-l {
width: 66.66667%;
}
.w-auto-l {
width: auto;
}
}
/*
OVERFLOW
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.overflow-visible {
overflow: visible;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-auto {
overflow: auto;
}
.overflow-x-visible {
overflow-x: visible;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-visible {
overflow-y: visible;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.overflow-y-auto {
overflow-y: auto;
}
@media screen and (min-width: 30em) {
.overflow-visible-ns {
overflow: visible;
}
.overflow-hidden-ns {
overflow: hidden;
}
.overflow-scroll-ns {
overflow: scroll;
}
.overflow-auto-ns {
overflow: auto;
}
.overflow-x-visible-ns {
overflow-x: visible;
}
.overflow-x-hidden-ns {
overflow-x: hidden;
}
.overflow-x-scroll-ns {
overflow-x: scroll;
}
.overflow-x-auto-ns {
overflow-x: auto;
}
.overflow-y-visible-ns {
overflow-y: visible;
}
.overflow-y-hidden-ns {
overflow-y: hidden;
}
.overflow-y-scroll-ns {
overflow-y: scroll;
}
.overflow-y-auto-ns {
overflow-y: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.overflow-visible-m {
overflow: visible;
}
.overflow-hidden-m {
overflow: hidden;
}
.overflow-scroll-m {
overflow: scroll;
}
.overflow-auto-m {
overflow: auto;
}
.overflow-x-visible-m {
overflow-x: visible;
}
.overflow-x-hidden-m {
overflow-x: hidden;
}
.overflow-x-scroll-m {
overflow-x: scroll;
}
.overflow-x-auto-m {
overflow-x: auto;
}
.overflow-y-visible-m {
overflow-y: visible;
}
.overflow-y-hidden-m {
overflow-y: hidden;
}
.overflow-y-scroll-m {
overflow-y: scroll;
}
.overflow-y-auto-m {
overflow-y: auto;
}
}
@media screen and (min-width: 60em) {
.overflow-visible-l {
overflow: visible;
}
.overflow-hidden-l {
overflow: hidden;
}
.overflow-scroll-l {
overflow: scroll;
}
.overflow-auto-l {
overflow: auto;
}
.overflow-x-visible-l {
overflow-x: visible;
}
.overflow-x-hidden-l {
overflow-x: hidden;
}
.overflow-x-scroll-l {
overflow-x: scroll;
}
.overflow-x-auto-l {
overflow-x: auto;
}
.overflow-y-visible-l {
overflow-y: visible;
}
.overflow-y-hidden-l {
overflow-y: hidden;
}
.overflow-y-scroll-l {
overflow-y: scroll;
}
.overflow-y-auto-l {
overflow-y: auto;
}
}
/*
POSITIONING
Docs: http://tachyons.io/docs/layout/position/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.static {
position: static;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
@media screen and (min-width: 30em) {
.static-ns {
position: static;
}
.relative-ns {
position: relative;
}
.absolute-ns {
position: absolute;
}
.fixed-ns {
position: fixed;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.static-m {
position: static;
}
.relative-m {
position: relative;
}
.absolute-m {
position: absolute;
}
.fixed-m {
position: fixed;
}
}
@media screen and (min-width: 60em) {
.static-l {
position: static;
}
.relative-l {
position: relative;
}
.absolute-l {
position: absolute;
}
.fixed-l {
position: fixed;
}
}
/*
OPACITY
Docs: http://tachyons.io/docs/themes/opacity/
*/
.o-100 {
opacity: 1;
}
.o-90 {
opacity: .9;
}
.o-80 {
opacity: .8;
}
.o-70 {
opacity: .7;
}
.o-60 {
opacity: .6;
}
.o-50 {
opacity: .5;
}
.o-40 {
opacity: .4;
}
.o-30 {
opacity: .3;
}
.o-20 {
opacity: .2;
}
.o-10 {
opacity: .1;
}
.o-05 {
opacity: .05;
}
.o-025 {
opacity: .025;
}
.o-0 {
opacity: 0;
}
/*
ROTATIONS
*/
.rotate-45 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135 {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225 {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270 {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315 {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
@media screen and (min-width: 30em) {
.rotate-45-ns {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-ns {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-ns {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-ns {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-ns {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-ns {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-ns {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.rotate-45-m {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-m {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-m {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-m {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-m {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-m {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-m {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
@media screen and (min-width: 60em) {
.rotate-45-l {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-l {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-l {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-l {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-l {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-l {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-l {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
/* Variables */
/*
SPACING
Docs: http://tachyons.io/docs/layout/spacing/
An eight step powers of two scale ranging from 0 to 16rem.
Base:
p = padding
m = margin
Modifiers:
a = all
h = horizontal
v = vertical
t = top
r = right
b = bottom
l = left
0 = none
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.pa0 {
padding: 0;
}
.pa1 {
padding: 0.25rem;
}
.pa2 {
padding: 0.5rem;
}
.pa3 {
padding: 1rem;
}
.pa4 {
padding: 2rem;
}
.pa5 {
padding: 4rem;
}
.pa6 {
padding: 8rem;
}
.pa7 {
padding: 16rem;
}
.pl0 {
padding-left: 0;
}
.pl1 {
padding-left: 0.25rem;
}
.pl2 {
padding-left: 0.5rem;
}
.pl3 {
padding-left: 1rem;
}
.pl4 {
padding-left: 2rem;
}
.pl5 {
padding-left: 4rem;
}
.pl6 {
padding-left: 8rem;
}
.pl7 {
padding-left: 16rem;
}
.pr0 {
padding-right: 0;
}
.pr1 {
padding-right: 0.25rem;
}
.pr2 {
padding-right: 0.5rem;
}
.pr3 {
padding-right: 1rem;
}
.pr4 {
padding-right: 2rem;
}
.pr5 {
padding-right: 4rem;
}
.pr6 {
padding-right: 8rem;
}
.pr7 {
padding-right: 16rem;
}
.pb0 {
padding-bottom: 0;
}
.pb1 {
padding-bottom: 0.25rem;
}
.pb2 {
padding-bottom: 0.5rem;
}
.pb3 {
padding-bottom: 1rem;
}
.pb4 {
padding-bottom: 2rem;
}
.pb5 {
padding-bottom: 4rem;
}
.pb6 {
padding-bottom: 8rem;
}
.pb7 {
padding-bottom: 16rem;
}
.pt0 {
padding-top: 0;
}
.pt1 {
padding-top: 0.25rem;
}
.pt2 {
padding-top: 0.5rem;
}
.pt3 {
padding-top: 1rem;
}
.pt4 {
padding-top: 2rem;
}
.pt5 {
padding-top: 4rem;
}
.pt6 {
padding-top: 8rem;
}
.pt7 {
padding-top: 16rem;
}
.pv0 {
padding-top: 0;
padding-bottom: 0;
}
.pv1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7 {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0 {
padding-left: 0;
padding-right: 0;
}
.ph1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3 {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4 {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5 {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6 {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7 {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0 {
margin: 0;
}
.ma1 {
margin: 0.25rem;
}
.ma2 {
margin: 0.5rem;
}
.ma3 {
margin: 1rem;
}
.ma4 {
margin: 2rem;
}
.ma5 {
margin: 4rem;
}
.ma6 {
margin: 8rem;
}
.ma7 {
margin: 16rem;
}
.ml0 {
margin-left: 0;
}
.ml1 {
margin-left: 0.25rem;
}
.ml2 {
margin-left: 0.5rem;
}
.ml3 {
margin-left: 1rem;
}
.ml4 {
margin-left: 2rem;
}
.ml5 {
margin-left: 4rem;
}
.ml6 {
margin-left: 8rem;
}
.ml7 {
margin-left: 16rem;
}
.mr0 {
margin-right: 0;
}
.mr1 {
margin-right: 0.25rem;
}
.mr2 {
margin-right: 0.5rem;
}
.mr3 {
margin-right: 1rem;
}
.mr4 {
margin-right: 2rem;
}
.mr5 {
margin-right: 4rem;
}
.mr6 {
margin-right: 8rem;
}
.mr7 {
margin-right: 16rem;
}
.mb0 {
margin-bottom: 0;
}
.mb1 {
margin-bottom: 0.25rem;
}
.mb2 {
margin-bottom: 0.5rem;
}
.mb3 {
margin-bottom: 1rem;
}
.mb4 {
margin-bottom: 2rem;
}
.mb4-1 {
margin-bottom: 3rem;
}
.mb5 {
margin-bottom: 4rem;
}
.mb6 {
margin-bottom: 8rem;
}
.mb7 {
margin-bottom: 16rem;
}
.mt0 {
margin-top: 0;
}
.mt1 {
margin-top: 0.25rem;
}
.mt2 {
margin-top: 0.5rem;
}
.mt3 {
margin-top: 1rem;
}
.mt4 {
margin-top: 2rem;
}
.mt4-1 {
margin-top: 3rem;
}
.mt5 {
margin-top: 4rem;
}
.mt6 {
margin-top: 8rem;
}
.mt7 {
margin-top: 16rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.mv1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6 {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7 {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0 {
margin-left: 0;
margin-right: 0;
}
.mh1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3 {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4 {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5 {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6 {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7 {
margin-left: 16rem;
margin-right: 16rem;
}
@media screen and (min-width: 30em) {
.pa0-ns {
padding: 0;
}
.pa1-ns {
padding: 0.25rem;
}
.pa2-ns {
padding: 0.5rem;
}
.pa3-ns {
padding: 1rem;
}
.pa4-ns {
padding: 2rem;
}
.pa5-ns {
padding: 4rem;
}
.pa6-ns {
padding: 8rem;
}
.pa7-ns {
padding: 16rem;
}
.pl0-ns {
padding-left: 0;
}
.pl1-ns {
padding-left: 0.25rem;
}
.pl2-ns {
padding-left: 0.5rem;
}
.pl3-ns {
padding-left: 1rem;
}
.pl4-ns {
padding-left: 2rem;
}
.pl5-ns {
padding-left: 4rem;
}
.pl6-ns {
padding-left: 8rem;
}
.pl7-ns {
padding-left: 16rem;
}
.pr0-ns {
padding-right: 0;
}
.pr1-ns {
padding-right: 0.25rem;
}
.pr2-ns {
padding-right: 0.5rem;
}
.pr3-ns {
padding-right: 1rem;
}
.pr4-ns {
padding-right: 2rem;
}
.pr5-ns {
padding-right: 4rem;
}
.pr6-ns {
padding-right: 8rem;
}
.pr7-ns {
padding-right: 16rem;
}
.pb0-ns {
padding-bottom: 0;
}
.pb1-ns {
padding-bottom: 0.25rem;
}
.pb2-ns {
padding-bottom: 0.5rem;
}
.pb3-ns {
padding-bottom: 1rem;
}
.pb4-ns {
padding-bottom: 2rem;
}
.pb5-ns {
padding-bottom: 4rem;
}
.pb6-ns {
padding-bottom: 8rem;
}
.pb7-ns {
padding-bottom: 16rem;
}
.pt0-ns {
padding-top: 0;
}
.pt1-ns {
padding-top: 0.25rem;
}
.pt2-ns {
padding-top: 0.5rem;
}
.pt3-ns {
padding-top: 1rem;
}
.pt4-ns {
padding-top: 2rem;
}
.pt5-ns {
padding-top: 4rem;
}
.pt6-ns {
padding-top: 8rem;
}
.pt7-ns {
padding-top: 16rem;
}
.pv0-ns {
padding-top: 0;
padding-bottom: 0;
}
.pv1-ns {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-ns {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-ns {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-ns {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-ns {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-ns {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-ns {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-ns {
padding-left: 0;
padding-right: 0;
}
.ph1-ns {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-ns {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-ns {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-ns {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-ns {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-ns {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-ns {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-ns {
margin: 0;
}
.ma1-ns {
margin: 0.25rem;
}
.ma2-ns {
margin: 0.5rem;
}
.ma3-ns {
margin: 1rem;
}
.ma4-ns {
margin: 2rem;
}
.ma5-ns {
margin: 4rem;
}
.ma6-ns {
margin: 8rem;
}
.ma7-ns {
margin: 16rem;
}
.ml0-ns {
margin-left: 0;
}
.ml1-ns {
margin-left: 0.25rem;
}
.ml2-ns {
margin-left: 0.5rem;
}
.ml3-ns {
margin-left: 1rem;
}
.ml4-ns {
margin-left: 2rem;
}
.ml5-ns {
margin-left: 4rem;
}
.ml6-ns {
margin-left: 8rem;
}
.ml7-ns {
margin-left: 16rem;
}
.mr0-ns {
margin-right: 0;
}
.mr1-ns {
margin-right: 0.25rem;
}
.mr2-ns {
margin-right: 0.5rem;
}
.mr3-ns {
margin-right: 1rem;
}
.mr4-ns {
margin-right: 2rem;
}
.mr5-ns {
margin-right: 4rem;
}
.mr6-ns {
margin-right: 8rem;
}
.mr7-ns {
margin-right: 16rem;
}
.mb0-ns {
margin-bottom: 0;
}
.mb1-ns {
margin-bottom: 0.25rem;
}
.mb2-ns {
margin-bottom: 0.5rem;
}
.mb3-ns {
margin-bottom: 1rem;
}
.mb4-ns {
margin-bottom: 2rem;
}
.mb5-ns {
margin-bottom: 4rem;
}
.mb6-ns {
margin-bottom: 8rem;
}
.mb7-ns {
margin-bottom: 16rem;
}
.mt0-ns {
margin-top: 0;
}
.mt1-ns {
margin-top: 0.25rem;
}
.mt2-ns {
margin-top: 0.5rem;
}
.mt3-ns {
margin-top: 1rem;
}
.mt4-ns {
margin-top: 2rem;
}
.mt5-ns {
margin-top: 4rem;
}
.mt6-ns {
margin-top: 8rem;
}
.mt7-ns {
margin-top: 16rem;
}
.mv0-ns {
margin-top: 0;
margin-bottom: 0;
}
.mv1-ns {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-ns {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-ns {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-ns {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-ns {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-ns {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-ns {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-ns {
margin-left: 0;
margin-right: 0;
}
.mh1-ns {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-ns {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-ns {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-ns {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-ns {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-ns {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-ns {
margin-left: 16rem;
margin-right: 16rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.pa0-m {
padding: 0;
}
.pa1-m {
padding: 0.25rem;
}
.pa2-m {
padding: 0.5rem;
}
.pa3-m {
padding: 1rem;
}
.pa4-m {
padding: 2rem;
}
.pa5-m {
padding: 4rem;
}
.pa6-m {
padding: 8rem;
}
.pa7-m {
padding: 16rem;
}
.pl0-m {
padding-left: 0;
}
.pl1-m {
padding-left: 0.25rem;
}
.pl2-m {
padding-left: 0.5rem;
}
.pl3-m {
padding-left: 1rem;
}
.pl4-m {
padding-left: 2rem;
}
.pl5-m {
padding-left: 4rem;
}
.pl6-m {
padding-left: 8rem;
}
.pl7-m {
padding-left: 16rem;
}
.pr0-m {
padding-right: 0;
}
.pr1-m {
padding-right: 0.25rem;
}
.pr2-m {
padding-right: 0.5rem;
}
.pr3-m {
padding-right: 1rem;
}
.pr4-m {
padding-right: 2rem;
}
.pr5-m {
padding-right: 4rem;
}
.pr6-m {
padding-right: 8rem;
}
.pr7-m {
padding-right: 16rem;
}
.pb0-m {
padding-bottom: 0;
}
.pb1-m {
padding-bottom: 0.25rem;
}
.pb2-m {
padding-bottom: 0.5rem;
}
.pb3-m {
padding-bottom: 1rem;
}
.pb4-m {
padding-bottom: 2rem;
}
.pb5-m {
padding-bottom: 4rem;
}
.pb6-m {
padding-bottom: 8rem;
}
.pb7-m {
padding-bottom: 16rem;
}
.pt0-m {
padding-top: 0;
}
.pt1-m {
padding-top: 0.25rem;
}
.pt2-m {
padding-top: 0.5rem;
}
.pt3-m {
padding-top: 1rem;
}
.pt4-m {
padding-top: 2rem;
}
.pt5-m {
padding-top: 4rem;
}
.pt6-m {
padding-top: 8rem;
}
.pt7-m {
padding-top: 16rem;
}
.pv0-m {
padding-top: 0;
padding-bottom: 0;
}
.pv1-m {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-m {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-m {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-m {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-m {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-m {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-m {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-m {
padding-left: 0;
padding-right: 0;
}
.ph1-m {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-m {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-m {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-m {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-m {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-m {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-m {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-m {
margin: 0;
}
.ma1-m {
margin: 0.25rem;
}
.ma2-m {
margin: 0.5rem;
}
.ma3-m {
margin: 1rem;
}
.ma4-m {
margin: 2rem;
}
.ma5-m {
margin: 4rem;
}
.ma6-m {
margin: 8rem;
}
.ma7-m {
margin: 16rem;
}
.ml0-m {
margin-left: 0;
}
.ml1-m {
margin-left: 0.25rem;
}
.ml2-m {
margin-left: 0.5rem;
}
.ml3-m {
margin-left: 1rem;
}
.ml4-m {
margin-left: 2rem;
}
.ml5-m {
margin-left: 4rem;
}
.ml6-m {
margin-left: 8rem;
}
.ml7-m {
margin-left: 16rem;
}
.mr0-m {
margin-right: 0;
}
.mr1-m {
margin-right: 0.25rem;
}
.mr2-m {
margin-right: 0.5rem;
}
.mr3-m {
margin-right: 1rem;
}
.mr4-m {
margin-right: 2rem;
}
.mr5-m {
margin-right: 4rem;
}
.mr6-m {
margin-right: 8rem;
}
.mr7-m {
margin-right: 16rem;
}
.mb0-m {
margin-bottom: 0;
}
.mb1-m {
margin-bottom: 0.25rem;
}
.mb2-m {
margin-bottom: 0.5rem;
}
.mb3-m {
margin-bottom: 1rem;
}
.mb4-m {
margin-bottom: 2rem;
}
.mb5-m {
margin-bottom: 4rem;
}
.mb6-m {
margin-bottom: 8rem;
}
.mb7-m {
margin-bottom: 16rem;
}
.mt0-m {
margin-top: 0;
}
.mt1-m {
margin-top: 0.25rem;
}
.mt2-m {
margin-top: 0.5rem;
}
.mt3-m {
margin-top: 1rem;
}
.mt4-m {
margin-top: 2rem;
}
.mt5-m {
margin-top: 4rem;
}
.mt6-m {
margin-top: 8rem;
}
.mt7-m {
margin-top: 16rem;
}
.mv0-m {
margin-top: 0;
margin-bottom: 0;
}
.mv1-m {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-m {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-m {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-m {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-m {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-m {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-m {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-m {
margin-left: 0;
margin-right: 0;
}
.mh1-m {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-m {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-m {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-m {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-m {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-m {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-m {
margin-left: 16rem;
margin-right: 16rem;
}
}
@media screen and (min-width: 60em) {
.pa0-l {
padding: 0;
}
.pa1-l {
padding: 0.25rem;
}
.pa2-l {
padding: 0.5rem;
}
.pa3-l {
padding: 1rem;
}
.pa4-l {
padding: 2rem;
}
.pa5-l {
padding: 4rem;
}
.pa6-l {
padding: 8rem;
}
.pa7-l {
padding: 16rem;
}
.pl0-l {
padding-left: 0;
}
.pl1-l {
padding-left: 0.25rem;
}
.pl2-l {
padding-left: 0.5rem;
}
.pl3-l {
padding-left: 1rem;
}
.pl4-l {
padding-left: 2rem;
}
.pl5-l {
padding-left: 4rem;
}
.pl6-l {
padding-left: 8rem;
}
.pl7-l {
padding-left: 16rem;
}
.pr0-l {
padding-right: 0;
}
.pr1-l {
padding-right: 0.25rem;
}
.pr2-l {
padding-right: 0.5rem;
}
.pr3-l {
padding-right: 1rem;
}
.pr4-l {
padding-right: 2rem;
}
.pr5-l {
padding-right: 4rem;
}
.pr6-l {
padding-right: 8rem;
}
.pr7-l {
padding-right: 16rem;
}
.pb0-l {
padding-bottom: 0;
}
.pb1-l {
padding-bottom: 0.25rem;
}
.pb2-l {
padding-bottom: 0.5rem;
}
.pb3-l {
padding-bottom: 1rem;
}
.pb4-l {
padding-bottom: 2rem;
}
.pb5-l {
padding-bottom: 4rem;
}
.pb6-l {
padding-bottom: 8rem;
}
.pb7-l {
padding-bottom: 16rem;
}
.pt0-l {
padding-top: 0;
}
.pt1-l {
padding-top: 0.25rem;
}
.pt2-l {
padding-top: 0.5rem;
}
.pt3-l {
padding-top: 1rem;
}
.pt4-l {
padding-top: 2rem;
}
.pt5-l {
padding-top: 4rem;
}
.pt6-l {
padding-top: 8rem;
}
.pt7-l {
padding-top: 16rem;
}
.pv0-l {
padding-top: 0;
padding-bottom: 0;
}
.pv1-l {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-l {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-l {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-l {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-l {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-l {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-l {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-l {
padding-left: 0;
padding-right: 0;
}
.ph1-l {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-l {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-l {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-l {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-l {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-l {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-l {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-l {
margin: 0;
}
.ma1-l {
margin: 0.25rem;
}
.ma2-l {
margin: 0.5rem;
}
.ma3-l {
margin: 1rem;
}
.ma4-l {
margin: 2rem;
}
.ma5-l {
margin: 4rem;
}
.ma6-l {
margin: 8rem;
}
.ma7-l {
margin: 16rem;
}
.ml0-l {
margin-left: 0;
}
.ml1-l {
margin-left: 0.25rem;
}
.ml2-l {
margin-left: 0.5rem;
}
.ml3-l {
margin-left: 1rem;
}
.ml4-l {
margin-left: 2rem;
}
.ml5-l {
margin-left: 4rem;
}
.ml6-l {
margin-left: 8rem;
}
.ml7-l {
margin-left: 16rem;
}
.mr0-l {
margin-right: 0;
}
.mr1-l {
margin-right: 0.25rem;
}
.mr2-l {
margin-right: 0.5rem;
}
.mr3-l {
margin-right: 1rem;
}
.mr4-l {
margin-right: 2rem;
}
.mr5-l {
margin-right: 4rem;
}
.mr6-l {
margin-right: 8rem;
}
.mr7-l {
margin-right: 16rem;
}
.mb0-l {
margin-bottom: 0;
}
.mb1-l {
margin-bottom: 0.25rem;
}
.mb2-l {
margin-bottom: 0.5rem;
}
.mb3-l {
margin-bottom: 1rem;
}
.mb4-l {
margin-bottom: 2rem;
}
.mb5-l {
margin-bottom: 4rem;
}
.mb6-l {
margin-bottom: 8rem;
}
.mb7-l {
margin-bottom: 16rem;
}
.mt0-l {
margin-top: 0;
}
.mt1-l {
margin-top: 0.25rem;
}
.mt2-l {
margin-top: 0.5rem;
}
.mt3-l {
margin-top: 1rem;
}
.mt4-l {
margin-top: 2rem;
}
.mt5-l {
margin-top: 4rem;
}
.mt6-l {
margin-top: 8rem;
}
.mt7-l {
margin-top: 16rem;
}
.mv0-l {
margin-top: 0;
margin-bottom: 0;
}
.mv1-l {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-l {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-l {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-l {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-l {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-l {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-l {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-l {
margin-left: 0;
margin-right: 0;
}
.mh1-l {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-l {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-l {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-l {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-l {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-l {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-l {
margin-left: 16rem;
margin-right: 16rem;
}
}
/*
NEGATIVE MARGINS
Base:
n = negative
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.na1 {
margin: -0.25rem;
}
.na2 {
margin: -0.5rem;
}
.na3 {
margin: -1rem;
}
.na4 {
margin: -2rem;
}
.na5 {
margin: -4rem;
}
.na6 {
margin: -8rem;
}
.na7 {
margin: -16rem;
}
.nl1 {
margin-left: -0.25rem;
}
.nl2 {
margin-left: -0.5rem;
}
.nl3 {
margin-left: -1rem;
}
.nl4 {
margin-left: -2rem;
}
.nl5 {
margin-left: -4rem;
}
.nl6 {
margin-left: -8rem;
}
.nl7 {
margin-left: -16rem;
}
.nr1 {
margin-right: -0.25rem;
}
.nr2 {
margin-right: -0.5rem;
}
.nr3 {
margin-right: -1rem;
}
.nr4 {
margin-right: -2rem;
}
.nr5 {
margin-right: -4rem;
}
.nr6 {
margin-right: -8rem;
}
.nr7 {
margin-right: -16rem;
}
.nb1 {
margin-bottom: -0.25rem;
}
.nb2 {
margin-bottom: -0.5rem;
}
.nb3 {
margin-bottom: -1rem;
}
.nb4 {
margin-bottom: -2rem;
}
.nb5 {
margin-bottom: -4rem;
}
.nb6 {
margin-bottom: -8rem;
}
.nb7 {
margin-bottom: -16rem;
}
.nt1 {
margin-top: -0.25rem;
}
.nt2 {
margin-top: -0.5rem;
}
.nt3 {
margin-top: -1rem;
}
.nt4 {
margin-top: -2rem;
}
.nt5 {
margin-top: -4rem;
}
.nt6 {
margin-top: -8rem;
}
.nt7 {
margin-top: -16rem;
}
@media screen and (min-width: 30em) {
.na1-ns {
margin: -0.25rem;
}
.na2-ns {
margin: -0.5rem;
}
.na3-ns {
margin: -1rem;
}
.na4-ns {
margin: -2rem;
}
.na5-ns {
margin: -4rem;
}
.na6-ns {
margin: -8rem;
}
.na7-ns {
margin: -16rem;
}
.nl1-ns {
margin-left: -0.25rem;
}
.nl2-ns {
margin-left: -0.5rem;
}
.nl3-ns {
margin-left: -1rem;
}
.nl4-ns {
margin-left: -2rem;
}
.nl5-ns {
margin-left: -4rem;
}
.nl6-ns {
margin-left: -8rem;
}
.nl7-ns {
margin-left: -16rem;
}
.nr1-ns {
margin-right: -0.25rem;
}
.nr2-ns {
margin-right: -0.5rem;
}
.nr3-ns {
margin-right: -1rem;
}
.nr4-ns {
margin-right: -2rem;
}
.nr5-ns {
margin-right: -4rem;
}
.nr6-ns {
margin-right: -8rem;
}
.nr7-ns {
margin-right: -16rem;
}
.nb1-ns {
margin-bottom: -0.25rem;
}
.nb2-ns {
margin-bottom: -0.5rem;
}
.nb3-ns {
margin-bottom: -1rem;
}
.nb4-ns {
margin-bottom: -2rem;
}
.nb5-ns {
margin-bottom: -4rem;
}
.nb6-ns {
margin-bottom: -8rem;
}
.nb7-ns {
margin-bottom: -16rem;
}
.nt1-ns {
margin-top: -0.25rem;
}
.nt2-ns {
margin-top: -0.5rem;
}
.nt3-ns {
margin-top: -1rem;
}
.nt4-ns {
margin-top: -2rem;
}
.nt5-ns {
margin-top: -4rem;
}
.nt6-ns {
margin-top: -8rem;
}
.nt7-ns {
margin-top: -16rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.na1-m {
margin: -0.25rem;
}
.na2-m {
margin: -0.5rem;
}
.na3-m {
margin: -1rem;
}
.na4-m {
margin: -2rem;
}
.na5-m {
margin: -4rem;
}
.na6-m {
margin: -8rem;
}
.na7-m {
margin: -16rem;
}
.nl1-m {
margin-left: -0.25rem;
}
.nl2-m {
margin-left: -0.5rem;
}
.nl3-m {
margin-left: -1rem;
}
.nl4-m {
margin-left: -2rem;
}
.nl5-m {
margin-left: -4rem;
}
.nl6-m {
margin-left: -8rem;
}
.nl7-m {
margin-left: -16rem;
}
.nr1-m {
margin-right: -0.25rem;
}
.nr2-m {
margin-right: -0.5rem;
}
.nr3-m {
margin-right: -1rem;
}
.nr4-m {
margin-right: -2rem;
}
.nr5-m {
margin-right: -4rem;
}
.nr6-m {
margin-right: -8rem;
}
.nr7-m {
margin-right: -16rem;
}
.nb1-m {
margin-bottom: -0.25rem;
}
.nb2-m {
margin-bottom: -0.5rem;
}
.nb3-m {
margin-bottom: -1rem;
}
.nb4-m {
margin-bottom: -2rem;
}
.nb5-m {
margin-bottom: -4rem;
}
.nb6-m {
margin-bottom: -8rem;
}
.nb7-m {
margin-bottom: -16rem;
}
.nt1-m {
margin-top: -0.25rem;
}
.nt2-m {
margin-top: -0.5rem;
}
.nt3-m {
margin-top: -1rem;
}
.nt4-m {
margin-top: -2rem;
}
.nt5-m {
margin-top: -4rem;
}
.nt6-m {
margin-top: -8rem;
}
.nt7-m {
margin-top: -16rem;
}
}
@media screen and (min-width: 60em) {
.na1-l {
margin: -0.25rem;
}
.na2-l {
margin: -0.5rem;
}
.na3-l {
margin: -1rem;
}
.na4-l {
margin: -2rem;
}
.na5-l {
margin: -4rem;
}
.na6-l {
margin: -8rem;
}
.na7-l {
margin: -16rem;
}
.nl1-l {
margin-left: -0.25rem;
}
.nl2-l {
margin-left: -0.5rem;
}
.nl3-l {
margin-left: -1rem;
}
.nl4-l {
margin-left: -2rem;
}
.nl5-l {
margin-left: -4rem;
}
.nl6-l {
margin-left: -8rem;
}
.nl7-l {
margin-left: -16rem;
}
.nr1-l {
margin-right: -0.25rem;
}
.nr2-l {
margin-right: -0.5rem;
}
.nr3-l {
margin-right: -1rem;
}
.nr4-l {
margin-right: -2rem;
}
.nr5-l {
margin-right: -4rem;
}
.nr6-l {
margin-right: -8rem;
}
.nr7-l {
margin-right: -16rem;
}
.nb1-l {
margin-bottom: -0.25rem;
}
.nb2-l {
margin-bottom: -0.5rem;
}
.nb3-l {
margin-bottom: -1rem;
}
.nb4-l {
margin-bottom: -2rem;
}
.nb5-l {
margin-bottom: -4rem;
}
.nb6-l {
margin-bottom: -8rem;
}
.nb7-l {
margin-bottom: -16rem;
}
.nt1-l {
margin-top: -0.25rem;
}
.nt2-l {
margin-top: -0.5rem;
}
.nt3-l {
margin-top: -1rem;
}
.nt4-l {
margin-top: -2rem;
}
.nt5-l {
margin-top: -4rem;
}
.nt6-l {
margin-top: -8rem;
}
.nt7-l {
margin-top: -16rem;
}
}
/*
TEXT DECORATION
Docs: http://tachyons.io/docs/typography/text-decoration/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.strike {
text-decoration: line-through;
}
.underline {
text-decoration: underline;
}
.no-underline {
text-decoration: none;
}
@media screen and (min-width: 30em) {
.strike-ns {
text-decoration: line-through;
}
.underline-ns {
text-decoration: underline;
}
.no-underline-ns {
text-decoration: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.strike-m {
text-decoration: line-through;
}
.underline-m {
text-decoration: underline;
}
.no-underline-m {
text-decoration: none;
}
}
@media screen and (min-width: 60em) {
.strike-l {
text-decoration: line-through;
}
.underline-l {
text-decoration: underline;
}
.no-underline-l {
text-decoration: none;
}
}
/*
TEXT ALIGN
Docs: http://tachyons.io/docs/typography/text-align/
Base
t = text-align
Modifiers
l = left
r = right
c = center
j = justify
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tl {
text-align: left;
}
.tr {
text-align: right;
}
.tc {
text-align: center;
}
.tj {
text-align: justify;
}
@media screen and (min-width: 30em) {
.tl-ns {
text-align: left;
}
.tr-ns {
text-align: right;
}
.tc-ns {
text-align: center;
}
.tj-ns {
text-align: justify;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.tl-m {
text-align: left;
}
.tr-m {
text-align: right;
}
.tc-m {
text-align: center;
}
.tj-m {
text-align: justify;
}
}
@media screen and (min-width: 60em) {
.tl-l {
text-align: left;
}
.tr-l {
text-align: right;
}
.tc-l {
text-align: center;
}
.tj-l {
text-align: justify;
}
}
/*
TEXT TRANSFORM
Docs: http://tachyons.io/docs/typography/text-transform/
Base:
tt = text-transform
Modifiers
c = capitalize
l = lowercase
u = uppercase
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ttc {
text-transform: capitalize;
}
.ttl {
text-transform: lowercase;
}
.ttu {
text-transform: uppercase;
}
.ttn {
text-transform: none;
}
@media screen and (min-width: 30em) {
.ttc-ns {
text-transform: capitalize;
}
.ttl-ns {
text-transform: lowercase;
}
.ttu-ns {
text-transform: uppercase;
}
.ttn-ns {
text-transform: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ttc-m {
text-transform: capitalize;
}
.ttl-m {
text-transform: lowercase;
}
.ttu-m {
text-transform: uppercase;
}
.ttn-m {
text-transform: none;
}
}
@media screen and (min-width: 60em) {
.ttc-l {
text-transform: capitalize;
}
.ttl-l {
text-transform: lowercase;
}
.ttu-l {
text-transform: uppercase;
}
.ttn-l {
text-transform: none;
}
}
/*
TYPE SCALE
Docs: http://tachyons.io/docs/typography/scale/
Base:
f = font-size
Modifiers
1 = 1st step in size scale
2 = 2nd step in size scale
3 = 3rd step in size scale
4 = 4th step in size scale
5 = 5th step in size scale
6 = 6th step in size scale
7 = 7th step in size scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
* For Hero/Marketing Titles
*
* These generally are too large for mobile
* so be careful using them on smaller screens.
* */
.f-6,
.f-headline {
font-size: 6rem;
}
.f-5,
.f-subheadline {
font-size: 5rem;
}
/* Type Scale */
.f1 {
font-size: 3rem;
}
.f2 {
font-size: 2.25rem;
}
.f3 {
font-size: 1.5rem;
}
.f4 {
font-size: 1.25rem;
}
.f5 {
font-size: 1rem;
}
.f6 {
font-size: .875rem;
}
.f7 {
font-size: .75rem;
}
/* Small and hard to read for many people so use with extreme caution */
@media screen and (min-width: 30em) {
.f-6-ns,
.f-headline-ns {
font-size: 6rem;
}
.f-5-ns,
.f-subheadline-ns {
font-size: 5rem;
}
.f1-ns {
font-size: 3rem;
}
.f2-ns {
font-size: 2.25rem;
}
.f3-ns {
font-size: 1.5rem;
}
.f4-ns {
font-size: 1.25rem;
}
.f5-ns {
font-size: 1rem;
}
.f6-ns {
font-size: .875rem;
}
.f7-ns {
font-size: .75rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.f-6-m,
.f-headline-m {
font-size: 6rem;
}
.f-5-m,
.f-subheadline-m {
font-size: 5rem;
}
.f1-m {
font-size: 3rem;
}
.f2-m {
font-size: 2.25rem;
}
.f3-m {
font-size: 1.5rem;
}
.f4-m {
font-size: 1.25rem;
}
.f5-m {
font-size: 1rem;
}
.f6-m {
font-size: .875rem;
}
.f7-m {
font-size: .75rem;
}
}
@media screen and (min-width: 60em) {
.f-6-l,
.f-headline-l {
font-size: 6rem;
}
.f-5-l,
.f-subheadline-l {
font-size: 5rem;
}
.f1-l {
font-size: 3rem;
}
.f2-l {
font-size: 2.25rem;
}
.f3-l {
font-size: 1.5rem;
}
.f4-l {
font-size: 1.25rem;
}
.f5-l {
font-size: 1rem;
}
.f6-l {
font-size: .875rem;
}
.f7-l {
font-size: .75rem;
}
}
/*
UTILITIES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Equivalent to .overflow-y-scroll */
.overflow-container {
overflow-y: scroll;
}
.center {
margin-right: auto;
margin-left: auto;
}
.mr-auto {
margin-right: auto;
}
.ml-auto {
margin-left: auto;
}
@media screen and (min-width: 30em) {
.center-ns {
margin-right: auto;
margin-left: auto;
}
.mr-auto-ns {
margin-right: auto;
}
.ml-auto-ns {
margin-left: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.center-m {
margin-right: auto;
margin-left: auto;
}
.mr-auto-m {
margin-right: auto;
}
.ml-auto-m {
margin-left: auto;
}
}
@media screen and (min-width: 60em) {
.center-l {
margin-right: auto;
margin-left: auto;
}
.mr-auto-l {
margin-right: auto;
}
.ml-auto-l {
margin-left: auto;
}
}
.button-no-style {
border: 0;
}
/*
WHITE SPACE
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ws-normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
@media screen and (min-width: 30em) {
.ws-normal-ns {
white-space: normal;
}
.nowrap-ns {
white-space: nowrap;
}
.pre-ns {
white-space: pre;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ws-normal-m {
white-space: normal;
}
.nowrap-m {
white-space: nowrap;
}
.pre-m {
white-space: pre;
}
}
@media screen and (min-width: 60em) {
.ws-normal-l {
white-space: normal;
}
.nowrap-l {
white-space: nowrap;
}
.pre-l {
white-space: pre;
}
}
/*
VERTICAL ALIGN
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.v-base {
vertical-align: baseline;
}
.v-mid {
vertical-align: middle;
}
.v-top {
vertical-align: top;
}
.v-btm {
vertical-align: bottom;
}
@media screen and (min-width: 30em) {
.v-base-ns {
vertical-align: baseline;
}
.v-mid-ns {
vertical-align: middle;
}
.v-top-ns {
vertical-align: top;
}
.v-btm-ns {
vertical-align: bottom;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.v-base-m {
vertical-align: baseline;
}
.v-mid-m {
vertical-align: middle;
}
.v-top-m {
vertical-align: top;
}
.v-btm-m {
vertical-align: bottom;
}
}
@media screen and (min-width: 60em) {
.v-base-l {
vertical-align: baseline;
}
.v-mid-l {
vertical-align: middle;
}
.v-top-l {
vertical-align: top;
}
.v-btm-l {
vertical-align: bottom;
}
}
/*
Z-INDEX
Base
z = z-index
Modifiers
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
-3 = literal value 3
-4 = literal value 4
-5 = literal value 5
-999 = literal value 999
-9999 = literal value 9999
-max = largest accepted z-index value as integer
-inherit = string value inherit
-initial = string value initial
-unset = string value unset
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z-0 {
z-index: 0;
}
.z-1 {
z-index: 1;
}
.z-2 {
z-index: 2;
}
.z-3 {
z-index: 3;
}
.z-4 {
z-index: 4;
}
.z-5 {
z-index: 5;
}
.z-999 {
z-index: 999;
}
.z-9999 {
z-index: 9999;
}
.z-max {
z-index: 2147483647;
}
.z-inherit {
z-index: inherit;
}
.z-initial {
z-index: initial;
}
.z-unset {
z-index: unset;
}
#blip-chat-welcome-container {
z-index: 10;
position: fixed;
top: 0px;
left: 0px;
background-color: var(--color-surface-1, #f6f6f6);
}
#blip-chat-welcome-container .blip-chat-welcome {
margin: auto;
}
#blip-chat-welcome-container img {
width: 128px;
height: 128px;
}
#blip-chat-welcome-container .welcome-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#blip-chat-welcome-container .blip-chat-bot-name {
color: var(--color-content-default, #454545);
}
#blip-chat-welcome-container .blip-chat-bot-status {
color: var(--color-surface-3, #cfcfcf);
}
#blip-chat-welcome-container .blip-chat-bot-description {
color: var(--color-content-default, #454545);
line-height: 1.2rem;
word-break: break-word;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
#blip-chat-welcome-container .blip-chat-start {
color: var(--color-surface-1, #f6f6f6);
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
#blip-chat-welcome-container .blip-chat-powered {
color: var(--color-surface-3, #cfcfcf);
}
#blip-chat-welcome-container .hidden {
visibility: hidden;
}
#blip-chat-welcome-container .icon-close {
position: absolute;
top: 0px;
right: 0px;
width: 48px;
height: 53px;
cursor: pointer;
fill: var(--color-content-default, #454545);
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
.ss-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left;
}
.ss-content {
height: 100%;
width: calc(100% + 18px);
padding: 0 0 0 0;
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ss-content.rtl {
width: calc(100% + 18px);
right: auto;
}
.ss-scroll {
position: relative;
background: rgba(0, 0, 0, 0.3);
width: 9px;
border-radius: 4px;
top: 0;
z-index: 2;
cursor: pointer;
-webkit-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
.ss-hidden {
display: none;
}
.ss-grabbed {
-o-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.color-primary {
color: var(--color-brand, #0096fa);
}
.color-primary-dark {
color: var(--color-brand, #0096fa);
}
.white {
color: var(--color-surface-1, #f6f6f6);
}
.gray-1 {
color: var(--color-surface-2, #e0e0e0);
}
.gray-2 {
color: var(--color-surface-3, #cfcfcf);
}
.gray-3 {
color: var(--color-content-disable, #636363);
}
body {
background: var(--color-surface-2, #e0e0e0);
}
button:focus {
outline: 0;
}
.fade-enter-active, .fade-leave-active {
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
/*
CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
/*
ASPECT RATIOS
*/
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
* Make sure there are no height and width attributes on the embedded media.
* Adapted from: https://github.com/suitcss/components-flex-embed
*
* Example:
*
*
*
*
*
* */
.aspect-ratio {
height: 0;
position: relative;
}
.aspect-ratio--16x9 {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16 {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3 {
padding-bottom: 75%;
}
.aspect-ratio--3x4 {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4 {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6 {
padding-bottom: 150%;
}
.aspect-ratio--8x5 {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8 {
padding-bottom: 160%;
}
.aspect-ratio--7x5 {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7 {
padding-bottom: 140%;
}
.aspect-ratio--1x1 {
padding-bottom: 100%;
}
.aspect-ratio--object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
@media screen and (min-width: 30em) {
.aspect-ratio-ns {
height: 0;
position: relative;
}
.aspect-ratio--16x9-ns {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-ns {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-ns {
padding-bottom: 75%;
}
.aspect-ratio--3x4-ns {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-ns {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-ns {
padding-bottom: 150%;
}
.aspect-ratio--8x5-ns {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-ns {
padding-bottom: 160%;
}
.aspect-ratio--7x5-ns {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-ns {
padding-bottom: 140%;
}
.aspect-ratio--1x1-ns {
padding-bottom: 100%;
}
.aspect-ratio--object-ns {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.aspect-ratio-m {
height: 0;
position: relative;
}
.aspect-ratio--16x9-m {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-m {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-m {
padding-bottom: 75%;
}
.aspect-ratio--3x4-m {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-m {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-m {
padding-bottom: 150%;
}
.aspect-ratio--8x5-m {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-m {
padding-bottom: 160%;
}
.aspect-ratio--7x5-m {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-m {
padding-bottom: 140%;
}
.aspect-ratio--1x1-m {
padding-bottom: 100%;
}
.aspect-ratio--object-m {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
@media screen and (min-width: 60em) {
.aspect-ratio-l {
height: 0;
position: relative;
}
.aspect-ratio--16x9-l {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-l {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-l {
padding-bottom: 75%;
}
.aspect-ratio--3x4-l {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-l {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-l {
padding-bottom: 150%;
}
.aspect-ratio--8x5-l {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-l {
padding-bottom: 160%;
}
.aspect-ratio--7x5-l {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-l {
padding-bottom: 140%;
}
.aspect-ratio--1x1-l {
padding-bottom: 100%;
}
.aspect-ratio--object-l {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
/*
IMAGES
Docs: http://tachyons.io/docs/elements/images/
*/
/* Responsive images! */
img {
max-width: 100%;
}
/*
BACKGROUND SIZE
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
Often used in combination with background image set as an inline style
on an html element.
*/
.cover {
background-size: cover !important;
}
.contain {
background-size: contain !important;
}
@media screen and (min-width: 30em) {
.cover-ns {
background-size: cover !important;
}
.contain-ns {
background-size: contain !important;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.cover-m {
background-size: cover !important;
}
.contain-m {
background-size: contain !important;
}
}
@media screen and (min-width: 60em) {
.cover-l {
background-size: cover !important;
}
.contain-l {
background-size: contain !important;
}
}
/*
BACKGROUND POSITION
Base:
bg = background
Modifiers:
-center = center center
-top = top center
-right = center right
-bottom = bottom center
-left = center left
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bg-center {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left {
background-repeat: no-repeat;
background-position: center left;
}
@media screen and (min-width: 30em) {
.bg-center-ns {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-ns {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-ns {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-ns {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-ns {
background-repeat: no-repeat;
background-position: center left;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.bg-center-m {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-m {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-m {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-m {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-m {
background-repeat: no-repeat;
background-position: center left;
}
}
@media screen and (min-width: 60em) {
.bg-center-l {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-l {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-l {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-l {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-l {
background-repeat: no-repeat;
background-position: center left;
}
}
/*
OUTLINES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.outline {
outline: 1px solid;
}
.outline-transparent {
outline: 1px solid transparent;
}
.outline-0 {
outline: 0;
}
@media screen and (min-width: 30em) {
.outline-ns {
outline: 1px solid;
}
.outline-transparent-ns {
outline: 1px solid transparent;
}
.outline-0-ns {
outline: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.outline-m {
outline: 1px solid;
}
.outline-transparent-m {
outline: 1px solid transparent;
}
.outline-0-m {
outline: 0;
}
}
@media screen and (min-width: 60em) {
.outline-l {
outline: 1px solid;
}
.outline-transparent-l {
outline: 1px solid transparent;
}
.outline-0-l {
outline: 0;
}
}
/*
BORDERS
Docs: http://tachyons.io/docs/themes/borders/
Base:
b = border
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ba {
border-style: solid;
border-width: 1px;
}
.bt {
border-top-style: solid;
border-top-width: 1px;
}
.br {
border-right-style: solid;
border-right-width: 1px;
}
.bb {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl {
border-left-style: solid;
border-left-width: 1px;
}
.bn {
border-style: none;
border-width: 0;
}
@media screen and (min-width: 30em) {
.ba-ns {
border-style: solid;
border-width: 1px;
}
.bt-ns {
border-top-style: solid;
border-top-width: 1px;
}
.br-ns {
border-right-style: solid;
border-right-width: 1px;
}
.bb-ns {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-ns {
border-left-style: solid;
border-left-width: 1px;
}
.bn-ns {
border-style: none;
border-width: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ba-m {
border-style: solid;
border-width: 1px;
}
.bt-m {
border-top-style: solid;
border-top-width: 1px;
}
.br-m {
border-right-style: solid;
border-right-width: 1px;
}
.bb-m {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-m {
border-left-style: solid;
border-left-width: 1px;
}
.bn-m {
border-style: none;
border-width: 0;
}
}
@media screen and (min-width: 60em) {
.ba-l {
border-style: solid;
border-width: 1px;
}
.bt-l {
border-top-style: solid;
border-top-width: 1px;
}
.br-l {
border-right-style: solid;
border-right-width: 1px;
}
.bb-l {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-l {
border-left-style: solid;
border-left-width: 1px;
}
.bn-l {
border-style: none;
border-width: 0;
}
}
/*
BORDER RADIUS
Docs: http://tachyons.io/docs/themes/border-radius/
Base:
br = border-radius
Modifiers:
0 = 0/none
1 = 1st step in scale
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
Literal values:
-100 = 100%
-pill = 9999px
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.br0 {
border-radius: 0;
}
.br1 {
border-radius: .125rem;
}
.br2 {
border-radius: .25rem;
}
.br3 {
border-radius: .5rem;
}
.br4 {
border-radius: 1rem;
}
.br-100 {
border-radius: 100%;
}
.br-pill {
border-radius: 9999px;
}
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@media screen and (min-width: 30em) {
.br0-ns {
border-radius: 0;
}
.br1-ns {
border-radius: .125rem;
}
.br2-ns {
border-radius: .25rem;
}
.br3-ns {
border-radius: .5rem;
}
.br4-ns {
border-radius: 1rem;
}
.br-100-ns {
border-radius: 100%;
}
.br-pill-ns {
border-radius: 9999px;
}
.br--bottom-ns {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-ns {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.br0-m {
border-radius: 0;
}
.br1-m {
border-radius: .125rem;
}
.br2-m {
border-radius: .25rem;
}
.br3-m {
border-radius: .5rem;
}
.br4-m {
border-radius: 1rem;
}
.br-100-m {
border-radius: 100%;
}
.br-pill-m {
border-radius: 9999px;
}
.br--bottom-m {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-m {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-m {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-m {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 60em) {
.br0-l {
border-radius: 0;
}
.br1-l {
border-radius: .125rem;
}
.br2-l {
border-radius: .25rem;
}
.br3-l {
border-radius: .5rem;
}
.br4-l {
border-radius: 1rem;
}
.br-100-l {
border-radius: 100%;
}
.br-pill-l {
border-radius: 9999px;
}
.br--bottom-l {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-l {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-l {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
/*
BORDER STYLES
Docs: http://tachyons.io/docs/themes/borders/
Depends on base border module in _borders.css
Base:
b = border-style
Modifiers:
--none = none
--dotted = dotted
--dashed = dashed
--solid = solid
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.b--dotted {
border-style: dotted;
}
.b--dashed {
border-style: dashed;
}
.b--solid {
border-style: solid;
}
.b--none {
border-style: none;
}
@media screen and (min-width: 30em) {
.b--dotted-ns {
border-style: dotted;
}
.b--dashed-ns {
border-style: dashed;
}
.b--solid-ns {
border-style: solid;
}
.b--none-ns {
border-style: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.b--dotted-m {
border-style: dotted;
}
.b--dashed-m {
border-style: dashed;
}
.b--solid-m {
border-style: solid;
}
.b--none-m {
border-style: none;
}
}
@media screen and (min-width: 60em) {
.b--dotted-l {
border-style: dotted;
}
.b--dashed-l {
border-style: dashed;
}
.b--solid-l {
border-style: solid;
}
.b--none-l {
border-style: none;
}
}
/*
BORDER WIDTHS
Docs: http://tachyons.io/docs/themes/borders/
Base:
bw = border-width
Modifiers:
0 = 0 width border
1 = 1st step in border-width scale
2 = 2nd step in border-width scale
3 = 3rd step in border-width scale
4 = 4th step in border-width scale
5 = 5th step in border-width scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bw0 {
border-width: 0;
}
.bw1 {
border-width: .125rem;
}
.bw2 {
border-width: .25rem;
}
.bw3 {
border-width: .5rem;
}
.bw4 {
border-width: 1rem;
}
.bw5 {
border-width: 2rem;
}
.bw-0 {
border-width: 0px;
}
.bw-1 {
border-width: 1px;
}
.bw-2 {
border-width: 2px;
}
.bw-3 {
border-width: 3px;
}
.bw-4 {
border-width: 4px;
}
.bw-5 {
border-width: 5px;
}
/* Resets */
.bt-0 {
border-top-width: 0;
}
.br-0 {
border-right-width: 0;
}
.bb-0 {
border-bottom-width: 0;
}
.bl-0 {
border-left-width: 0;
}
@media screen and (min-width: 30em) {
.bw0-ns {
border-width: 0;
}
.bw1-ns {
border-width: .125rem;
}
.bw2-ns {
border-width: .25rem;
}
.bw3-ns {
border-width: .5rem;
}
.bw4-ns {
border-width: 1rem;
}
.bw5-ns {
border-width: 2rem;
}
.bt-0-ns {
border-top-width: 0;
}
.br-0-ns {
border-right-width: 0;
}
.bb-0-ns {
border-bottom-width: 0;
}
.bl-0-ns {
border-left-width: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.bw0-m {
border-width: 0;
}
.bw1-m {
border-width: .125rem;
}
.bw2-m {
border-width: .25rem;
}
.bw3-m {
border-width: .5rem;
}
.bw4-m {
border-width: 1rem;
}
.bw5-m {
border-width: 2rem;
}
.bt-0-m {
border-top-width: 0;
}
.br-0-m {
border-right-width: 0;
}
.bb-0-m {
border-bottom-width: 0;
}
.bl-0-m {
border-left-width: 0;
}
}
@media screen and (min-width: 60em) {
.bw0-l {
border-width: 0;
}
.bw1-l {
border-width: .125rem;
}
.bw2-l {
border-width: .25rem;
}
.bw3-l {
border-width: .5rem;
}
.bw4-l {
border-width: 1rem;
}
.bw5-l {
border-width: 2rem;
}
.bt-0-l {
border-top-width: 0;
}
.br-0-l {
border-right-width: 0;
}
.bb-0-l {
border-bottom-width: 0;
}
.bl-0-l {
border-left-width: 0;
}
}
/*
BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.shadow-1 {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2 {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3 {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4 {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5 {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-6 {
-webkit-box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
}
@media screen and (min-width: 30em) {
.shadow-1-ns {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-ns {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-ns {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-ns {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-ns {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.shadow-1-m {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-m {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-m {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-m {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-m {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 60em) {
.shadow-1-l {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-l {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-l {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-l {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-l {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
/*
CODE
*/
.pre {
overflow-x: auto;
overflow-y: hidden;
overflow: scroll;
}
/*
COORDINATES
Docs: http://tachyons.io/docs/layout/position/
Use in combination with the position module.
Base:
top
bottom
right
left
Modifiers:
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
--1 = literal value -1
--2 = literal value -2
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.top-0 {
top: 0;
}
.right-0 {
right: 0;
}
.bottom-0 {
bottom: 0;
}
.left-0 {
left: 0;
}
.top-1 {
top: 1rem;
}
.right-1 {
right: 1rem;
}
.bottom-1 {
bottom: 1rem;
}
.left-1 {
left: 1rem;
}
.top-2 {
top: 2rem;
}
.right-2 {
right: 2rem;
}
.bottom-2 {
bottom: 2rem;
}
.left-2 {
left: 2rem;
}
.top--1 {
top: -1rem;
}
.right--1 {
right: -1rem;
}
.bottom--1 {
bottom: -1rem;
}
.left--1 {
left: -1rem;
}
.top--2 {
top: -2rem;
}
.right--2 {
right: -2rem;
}
.bottom--2 {
bottom: -2rem;
}
.left--2 {
left: -2rem;
}
.absolute--fill {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@media screen and (min-width: 30em) {
.top-0-ns {
top: 0;
}
.left-0-ns {
left: 0;
}
.right-0-ns {
right: 0;
}
.bottom-0-ns {
bottom: 0;
}
.top-1-ns {
top: 1rem;
}
.left-1-ns {
left: 1rem;
}
.right-1-ns {
right: 1rem;
}
.bottom-1-ns {
bottom: 1rem;
}
.top-2-ns {
top: 2rem;
}
.left-2-ns {
left: 2rem;
}
.right-2-ns {
right: 2rem;
}
.bottom-2-ns {
bottom: 2rem;
}
.top--1-ns {
top: -1rem;
}
.right--1-ns {
right: -1rem;
}
.bottom--1-ns {
bottom: -1rem;
}
.left--1-ns {
left: -1rem;
}
.top--2-ns {
top: -2rem;
}
.right--2-ns {
right: -2rem;
}
.bottom--2-ns {
bottom: -2rem;
}
.left--2-ns {
left: -2rem;
}
.absolute--fill-ns {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.top-0-m {
top: 0;
}
.left-0-m {
left: 0;
}
.right-0-m {
right: 0;
}
.bottom-0-m {
bottom: 0;
}
.top-1-m {
top: 1rem;
}
.left-1-m {
left: 1rem;
}
.right-1-m {
right: 1rem;
}
.bottom-1-m {
bottom: 1rem;
}
.top-2-m {
top: 2rem;
}
.left-2-m {
left: 2rem;
}
.right-2-m {
right: 2rem;
}
.bottom-2-m {
bottom: 2rem;
}
.top--1-m {
top: -1rem;
}
.right--1-m {
right: -1rem;
}
.bottom--1-m {
bottom: -1rem;
}
.left--1-m {
left: -1rem;
}
.top--2-m {
top: -2rem;
}
.right--2-m {
right: -2rem;
}
.bottom--2-m {
bottom: -2rem;
}
.left--2-m {
left: -2rem;
}
.absolute--fill-m {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 60em) {
.top-0-l {
top: 0;
}
.left-0-l {
left: 0;
}
.right-0-l {
right: 0;
}
.bottom-0-l {
bottom: 0;
}
.top-1-l {
top: 1rem;
}
.left-1-l {
left: 1rem;
}
.right-1-l {
right: 1rem;
}
.bottom-1-l {
bottom: 1rem;
}
.top-2-l {
top: 2rem;
}
.left-2-l {
left: 2rem;
}
.right-2-l {
right: 2rem;
}
.bottom-2-l {
bottom: 2rem;
}
.top--1-l {
top: -1rem;
}
.right--1-l {
right: -1rem;
}
.bottom--1-l {
bottom: -1rem;
}
.left--1-l {
left: -1rem;
}
.top--2-l {
top: -2rem;
}
.right--2-l {
right: -2rem;
}
.bottom--2-l {
bottom: -2rem;
}
.left--2-l {
left: -2rem;
}
.absolute--fill-l {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
/*
CLEARFIX
http://tachyons.io/docs/layout/clearfix/
*/
/* Nicolas Gallaghers Clearfix solution
Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.cl {
clear: left;
}
.cr {
clear: right;
}
.cb {
clear: both;
}
.cn {
clear: none;
}
@media screen and (min-width: 30em) {
.cl-ns {
clear: left;
}
.cr-ns {
clear: right;
}
.cb-ns {
clear: both;
}
.cn-ns {
clear: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.cl-m {
clear: left;
}
.cr-m {
clear: right;
}
.cb-m {
clear: both;
}
.cn-m {
clear: none;
}
}
@media screen and (min-width: 60em) {
.cl-l {
clear: left;
}
.cr-l {
clear: right;
}
.cb-l {
clear: both;
}
.cn-l {
clear: none;
}
}
/*
DISPLAY
Docs: http://tachyons.io/docs/layout/display
Base:
d = display
Modifiers:
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
t-row = table-row
t-columm = table-column
t-column-group = table-column-group
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.dn {
display: none;
}
.di {
display: inline;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.dit {
display: inline-table;
}
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.dt-row {
display: table-row;
}
.dt-row-group {
display: table-row-group;
}
.dt-column {
display: table-column;
}
.dt-column-group {
display: table-column-group;
}
/*
This will set table to full width and then
all cells will be equal width
*/
.dt--fixed {
table-layout: fixed;
width: 100%;
}
@media screen and (min-width: 30em) {
.dn-ns {
display: none;
}
.di-ns {
display: inline;
}
.db-ns {
display: block;
}
.dib-ns {
display: inline-block;
}
.dit-ns {
display: inline-table;
}
.dt-ns {
display: table;
}
.dtc-ns {
display: table-cell;
}
.dt-row-ns {
display: table-row;
}
.dt-row-group-ns {
display: table-row-group;
}
.dt-column-ns {
display: table-column;
}
.dt-column-group-ns {
display: table-column-group;
}
.dt--fixed-ns {
table-layout: fixed;
width: 100%;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.dn-m {
display: none;
}
.di-m {
display: inline;
}
.db-m {
display: block;
}
.dib-m {
display: inline-block;
}
.dit-m {
display: inline-table;
}
.dt-m {
display: table;
}
.dtc-m {
display: table-cell;
}
.dt-row-m {
display: table-row;
}
.dt-row-group-m {
display: table-row-group;
}
.dt-column-m {
display: table-column;
}
.dt-column-group-m {
display: table-column-group;
}
.dt--fixed-m {
table-layout: fixed;
width: 100%;
}
}
@media screen and (min-width: 60em) {
.dn-l {
display: none;
}
.di-l {
display: inline;
}
.db-l {
display: block;
}
.dib-l {
display: inline-block;
}
.dit-l {
display: inline-table;
}
.dt-l {
display: table;
}
.dtc-l {
display: table-cell;
}
.dt-row-l {
display: table-row;
}
.dt-row-group-l {
display: table-row-group;
}
.dt-column-l {
display: table-column;
}
.dt-column-group-l {
display: table-column-group;
}
.dt--fixed-l {
table-layout: fixed;
width: 100%;
}
}
/*
FLEXBOX
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.flex {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0 {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7 {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8 {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
@media screen and (min-width: 30em) {
.flex-ns {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-ns {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-ns {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-ns {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-ns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-ns {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-ns {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-ns {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-ns {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-ns {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-ns {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-ns {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-ns {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-ns {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-ns {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-ns {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-ns {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-ns {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-ns {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-ns {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-ns {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-ns {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-ns {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-ns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-ns {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-ns {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-ns {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-ns {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-ns {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-ns {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-ns {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-ns {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-ns {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-ns {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-ns {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-ns {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-ns {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-ns {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-ns {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-ns {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-ns {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-ns {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.flex-m {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-m {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-m {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-m {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-m {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-m {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-m {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-m {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-m {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-m {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-m {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-m {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-m {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-m {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-m {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-m {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-m {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-m {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-m {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-m {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-m {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-m {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-m {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-m {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-m {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-m {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-m {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-m {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-m {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-m {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-m {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-m {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-m {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-m {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-m {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-m {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-m {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-m {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-m {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-m {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-m {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-m {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
@media screen and (min-width: 60em) {
.flex-l {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-l {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-l {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-l {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-l {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-l {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-l {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-l {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-l {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-l {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-l {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-l {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-l {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-l {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-l {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-l {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-l {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-l {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-l {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-l {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-l {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-l {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-l {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-l {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-l {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-l {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-l {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-l {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-l {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-l {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-l {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-l {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-l {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-l {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-l {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-l {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-l {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-l {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-l {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-l {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-l {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-l {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
/*
FLOATS
http://tachyons.io/docs/layout/floats/
1. Floated elements are automatically rendered as block level elements.
Setting floats to display inline will fix the double margin bug in
ie6. You know... just in case.
2. Don't forget to clearfix your floats with .cf
Base:
f = float
Modifiers:
l = left
r = right
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.fl {
float: left;
_display: inline;
}
.fr {
float: right;
_display: inline;
}
.fn {
float: none;
}
@media screen and (min-width: 30em) {
.fl-ns {
float: left;
_display: inline;
}
.fr-ns {
float: right;
_display: inline;
}
.fn-ns {
float: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.fl-m {
float: left;
_display: inline;
}
.fr-m {
float: right;
_display: inline;
}
.fn-m {
float: none;
}
}
@media screen and (min-width: 60em) {
.fl-l {
float: left;
_display: inline;
}
.fr-l {
float: right;
_display: inline;
}
.fn-l {
float: none;
}
}
/*
FONT STYLE
Docs: http://tachyons.io/docs/typography/font-style/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.i {
font-style: italic;
}
.fs-normal {
font-style: normal;
}
@media screen and (min-width: 30em) {
.i-ns {
font-style: italic;
}
.fs-normal-ns {
font-style: normal;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.i-m {
font-style: italic;
}
.fs-normal-m {
font-style: normal;
}
}
@media screen and (min-width: 60em) {
.i-l {
font-style: italic;
}
.fs-normal-l {
font-style: normal;
}
}
/*
FONT WEIGHT
Docs: http://tachyons.io/docs/typography/font-weight/
Base
fw = font-weight
Modifiers:
1 = literal value 100
2 = literal value 200
3 = literal value 300
4 = literal value 400
5 = literal value 500
6 = literal value 600
7 = literal value 700
8 = literal value 800
9 = literal value 900
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.normal {
font-weight: normal;
}
.b {
font-weight: bold;
}
.fw1 {
font-weight: 100;
}
.fw2 {
font-weight: 200;
}
.fw3 {
font-weight: 300;
}
.fw4 {
font-weight: 400;
}
.fw5 {
font-weight: 500;
}
.fw6 {
font-weight: 600;
}
.fw7 {
font-weight: 700;
}
.fw8 {
font-weight: 800;
}
.fw9 {
font-weight: 900;
}
@media screen and (min-width: 30em) {
.normal-ns {
font-weight: normal;
}
.b-ns {
font-weight: bold;
}
.fw1-ns {
font-weight: 100;
}
.fw2-ns {
font-weight: 200;
}
.fw3-ns {
font-weight: 300;
}
.fw4-ns {
font-weight: 400;
}
.fw5-ns {
font-weight: 500;
}
.fw6-ns {
font-weight: 600;
}
.fw7-ns {
font-weight: 700;
}
.fw8-ns {
font-weight: 800;
}
.fw9-ns {
font-weight: 900;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.normal-m {
font-weight: normal;
}
.b-m {
font-weight: bold;
}
.fw1-m {
font-weight: 100;
}
.fw2-m {
font-weight: 200;
}
.fw3-m {
font-weight: 300;
}
.fw4-m {
font-weight: 400;
}
.fw5-m {
font-weight: 500;
}
.fw6-m {
font-weight: 600;
}
.fw7-m {
font-weight: 700;
}
.fw8-m {
font-weight: 800;
}
.fw9-m {
font-weight: 900;
}
}
@media screen and (min-width: 60em) {
.normal-l {
font-weight: normal;
}
.b-l {
font-weight: bold;
}
.fw1-l {
font-weight: 100;
}
.fw2-l {
font-weight: 200;
}
.fw3-l {
font-weight: 300;
}
.fw4-l {
font-weight: 400;
}
.fw5-l {
font-weight: 500;
}
.fw6-l {
font-weight: 600;
}
.fw7-l {
font-weight: 700;
}
.fw8-l {
font-weight: 800;
}
.fw9-l {
font-weight: 900;
}
}
/*
HEIGHTS
Docs: http://tachyons.io/docs/layout/heights/
Base:
h = height
min-h = min-height
min-vh = min-height vertical screen height
vh = vertical screen height
Modifiers
1 = 1st step in height scale
2 = 2nd step in height scale
3 = 3rd step in height scale
4 = 4th step in height scale
5 = 5th step in height scale
-25 = literal value 25%
-50 = literal value 50%
-75 = literal value 75%
-100 = literal value 100%
-auto = string value of auto
-inherit = string value of inherit
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Height Scale */
.h1 {
height: 1rem;
}
.h2 {
height: 2rem;
}
.h3 {
height: 4rem;
}
.h4 {
height: 8rem;
}
.h5 {
height: 16rem;
}
/* Height Percentages - Based off of height of parent */
.h-25 {
height: 25%;
}
.h-50 {
height: 50%;
}
.h-75 {
height: 75%;
}
.h-100 {
height: 100%;
}
.min-h-100 {
min-height: 100%;
}
/* Screen Height Percentage */
.vh-25 {
height: 25vh;
}
.vh-50 {
height: 50vh;
}
.vh-75 {
height: 75vh;
}
.vh-100 {
height: 100vh;
}
.min-vh-100 {
min-height: 100vh;
}
.min-vh-flex {
min-height: calc(100vh - 140px) !important;
}
/* String Properties */
.h-auto {
height: auto;
}
.h-inherit {
height: inherit;
}
@media screen and (min-width: 30em) {
.h1-ns {
height: 1rem;
}
.h2-ns {
height: 2rem;
}
.h3-ns {
height: 4rem;
}
.h4-ns {
height: 8rem;
}
.h5-ns {
height: 16rem;
}
.h-25-ns {
height: 25%;
}
.h-50-ns {
height: 50%;
}
.h-75-ns {
height: 75%;
}
.h-100-ns {
height: 100%;
}
.min-h-100-ns {
min-height: 100%;
}
.vh-25-ns {
height: 25vh;
}
.vh-50-ns {
height: 50vh;
}
.vh-75-ns {
height: 75vh;
}
.vh-100-ns {
height: 100vh;
}
.min-vh-100-ns {
min-height: 100vh;
}
.h-auto-ns {
height: auto;
}
.h-inherit-ns {
height: inherit;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.h1-m {
height: 1rem;
}
.h2-m {
height: 2rem;
}
.h3-m {
height: 4rem;
}
.h4-m {
height: 8rem;
}
.h5-m {
height: 16rem;
}
.h-25-m {
height: 25%;
}
.h-50-m {
height: 50%;
}
.h-75-m {
height: 75%;
}
.h-100-m {
height: 100%;
}
.min-h-100-m {
min-height: 100%;
}
.vh-25-m {
height: 25vh;
}
.vh-50-m {
height: 50vh;
}
.vh-75-m {
height: 75vh;
}
.vh-100-m {
height: 100vh;
}
.min-vh-100-m {
min-height: 100vh;
}
.h-auto-m {
height: auto;
}
.h-inherit-m {
height: inherit;
}
}
@media screen and (min-width: 60em) {
.h1-l {
height: 1rem;
}
.h2-l {
height: 2rem;
}
.h3-l {
height: 4rem;
}
.h4-l {
height: 8rem;
}
.h5-l {
height: 16rem;
}
.h-25-l {
height: 25%;
}
.h-50-l {
height: 50%;
}
.h-75-l {
height: 75%;
}
.h-100-l {
height: 100%;
}
.min-h-100-l {
min-height: 100%;
}
.vh-25-l {
height: 25vh;
}
.vh-50-l {
height: 50vh;
}
.vh-75-l {
height: 75vh;
}
.vh-100-l {
height: 100vh;
}
.min-vh-100-l {
min-height: 100vh;
}
.h-auto-l {
height: auto;
}
.h-inherit-l {
height: inherit;
}
}
/*
LETTER SPACING
Docs: http://tachyons.io/docs/typography/tracking/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tracked {
letter-spacing: .1em;
}
.tracked-tight {
letter-spacing: -.05em;
}
.tracked-mega {
letter-spacing: .25em;
}
@media screen and (min-width: 30em) {
.tracked-ns {
letter-spacing: .1em;
}
.tracked-tight-ns {
letter-spacing: -.05em;
}
.tracked-mega-ns {
letter-spacing: .25em;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.tracked-m {
letter-spacing: .1em;
}
.tracked-tight-m {
letter-spacing: -.05em;
}
.tracked-mega-m {
letter-spacing: .25em;
}
}
@media screen and (min-width: 60em) {
.tracked-l {
letter-spacing: .1em;
}
.tracked-tight-l {
letter-spacing: -.05em;
}
.tracked-mega-l {
letter-spacing: .25em;
}
}
/*
LINE HEIGHT / LEADING
Docs: http://tachyons.io/docs/typography/line-height
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.lh-solid {
line-height: 1;
}
.lh-title {
line-height: 1.25;
}
.lh-copy {
line-height: 1.5;
}
@media screen and (min-width: 30em) {
.lh-solid-ns {
line-height: 1;
}
.lh-title-ns {
line-height: 1.25;
}
.lh-copy-ns {
line-height: 1.5;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.lh-solid-m {
line-height: 1;
}
.lh-title-m {
line-height: 1.25;
}
.lh-copy-m {
line-height: 1.5;
}
}
@media screen and (min-width: 60em) {
.lh-solid-l {
line-height: 1;
}
.lh-title-l {
line-height: 1.25;
}
.lh-copy-l {
line-height: 1.5;
}
}
/*
LISTS
http://tachyons.io/docs/elements/lists/
*/
.list {
list-style-type: none;
}
/*
MAX WIDTHS
Docs: http://tachyons.io/docs/layout/max-widths/
Base:
mw = max-width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
6 = 6st step in width scale
7 = 7nd step in width scale
8 = 8rd step in width scale
9 = 9th step in width scale
-100 = literal value 100%
-none = string value none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Max Width Percentages */
.mw-100 {
max-width: 100%;
}
/* Max Width Scale */
.mw1 {
max-width: 1rem;
}
.mw2 {
max-width: 2rem;
}
.mw3 {
max-width: 4rem;
}
.mw4 {
max-width: 8rem;
}
.mw5 {
max-width: 16rem;
}
.mw6 {
max-width: 32rem;
}
.mw7 {
max-width: 48rem;
}
.mw8 {
max-width: 64rem;
}
.mw9 {
max-width: 96rem;
}
/* Max Width String Properties */
.mw-none {
max-width: none;
}
@media screen and (min-width: 30em) {
.mw-100-ns {
max-width: 100%;
}
.mw1-ns {
max-width: 1rem;
}
.mw2-ns {
max-width: 2rem;
}
.mw3-ns {
max-width: 4rem;
}
.mw4-ns {
max-width: 8rem;
}
.mw5-ns {
max-width: 16rem;
}
.mw6-ns {
max-width: 32rem;
}
.mw7-ns {
max-width: 48rem;
}
.mw8-ns {
max-width: 64rem;
}
.mw9-ns {
max-width: 96rem;
}
.mw-none-ns {
max-width: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.mw-100-m {
max-width: 100%;
}
.mw1-m {
max-width: 1rem;
}
.mw2-m {
max-width: 2rem;
}
.mw3-m {
max-width: 4rem;
}
.mw4-m {
max-width: 8rem;
}
.mw5-m {
max-width: 16rem;
}
.mw6-m {
max-width: 32rem;
}
.mw7-m {
max-width: 48rem;
}
.mw8-m {
max-width: 64rem;
}
.mw9-m {
max-width: 96rem;
}
.mw-none-m {
max-width: none;
}
}
@media screen and (min-width: 60em) {
.mw-100-l {
max-width: 100%;
}
.mw1-l {
max-width: 1rem;
}
.mw2-l {
max-width: 2rem;
}
.mw3-l {
max-width: 4rem;
}
.mw4-l {
max-width: 8rem;
}
.mw5-l {
max-width: 16rem;
}
.mw6-l {
max-width: 32rem;
}
.mw7-l {
max-width: 48rem;
}
.mw8-l {
max-width: 64rem;
}
.mw9-l {
max-width: 96rem;
}
.mw-none-l {
max-width: none;
}
}
/*
WIDTHS
Docs: http://tachyons.io/docs/layout/widths/
Base:
w = width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
-10 = literal value 10%
-20 = literal value 20%
-25 = literal value 25%
-30 = literal value 30%
-33 = literal value 33%
-34 = literal value 34%
-40 = literal value 40%
-50 = literal value 50%
-60 = literal value 60%
-70 = literal value 70%
-75 = literal value 75%
-80 = literal value 80%
-90 = literal value 90%
-100 = literal value 100%
-third = 100% / 3 (Not supported in opera mini or IE8)
-two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
-auto = string value auto
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Width Scale */
.w1 {
width: 1rem;
}
.w2 {
width: 2rem;
}
.w3 {
width: 4rem;
}
.w4 {
width: 8rem;
}
.w5 {
width: 16rem;
}
.w-10 {
width: 10%;
}
.w-20 {
width: 20%;
}
.w-25 {
width: 25%;
}
.w-30 {
width: 30%;
}
.w-33 {
width: 33%;
}
.w-34 {
width: 34%;
}
.w-40 {
width: 40%;
}
.w-50 {
width: 50%;
}
.w-55 {
width: 55%;
}
.w-60 {
width: 60%;
}
.w-70 {
width: 70%;
}
.w-75 {
width: 75%;
}
.w-80 {
width: 80%;
}
.w-90 {
width: 90%;
}
.w-100 {
width: 100%;
}
.w-third {
width: 33.33333%;
}
.w-two-thirds {
width: 66.66667%;
}
.w-auto {
width: auto;
}
@media screen and (min-width: 30em) {
.w1-ns {
width: 1rem;
}
.w2-ns {
width: 2rem;
}
.w3-ns {
width: 4rem;
}
.w4-ns {
width: 8rem;
}
.w5-ns {
width: 16rem;
}
.w-10-ns {
width: 10%;
}
.w-20-ns {
width: 20%;
}
.w-25-ns {
width: 25%;
}
.w-30-ns {
width: 30%;
}
.w-33-ns {
width: 33%;
}
.w-34-ns {
width: 34%;
}
.w-40-ns {
width: 40%;
}
.w-50-ns {
width: 50%;
}
.w-60-ns {
width: 60%;
}
.w-70-ns {
width: 70%;
}
.w-75-ns {
width: 75%;
}
.w-80-ns {
width: 80%;
}
.w-90-ns {
width: 90%;
}
.w-100-ns {
width: 100%;
}
.w-third-ns {
width: 33.33333%;
}
.w-two-thirds-ns {
width: 66.66667%;
}
.w-auto-ns {
width: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.w1-m {
width: 1rem;
}
.w2-m {
width: 2rem;
}
.w3-m {
width: 4rem;
}
.w4-m {
width: 8rem;
}
.w5-m {
width: 16rem;
}
.w-10-m {
width: 10%;
}
.w-20-m {
width: 20%;
}
.w-25-m {
width: 25%;
}
.w-30-m {
width: 30%;
}
.w-33-m {
width: 33%;
}
.w-34-m {
width: 34%;
}
.w-40-m {
width: 40%;
}
.w-50-m {
width: 50%;
}
.w-60-m {
width: 60%;
}
.w-70-m {
width: 70%;
}
.w-75-m {
width: 75%;
}
.w-80-m {
width: 80%;
}
.w-90-m {
width: 90%;
}
.w-100-m {
width: 100%;
}
.w-third-m {
width: 33.33333%;
}
.w-two-thirds-m {
width: 66.66667%;
}
.w-auto-m {
width: auto;
}
}
@media screen and (min-width: 60em) {
.w1-l {
width: 1rem;
}
.w2-l {
width: 2rem;
}
.w3-l {
width: 4rem;
}
.w4-l {
width: 8rem;
}
.w5-l {
width: 16rem;
}
.w-10-l {
width: 10%;
}
.w-20-l {
width: 20%;
}
.w-25-l {
width: 25%;
}
.w-30-l {
width: 30%;
}
.w-33-l {
width: 33%;
}
.w-34-l {
width: 34%;
}
.w-40-l {
width: 40%;
}
.w-50-l {
width: 50%;
}
.w-60-l {
width: 60%;
}
.w-70-l {
width: 70%;
}
.w-75-l {
width: 75%;
}
.w-80-l {
width: 80%;
}
.w-90-l {
width: 90%;
}
.w-100-l {
width: 100%;
}
.w-third-l {
width: 33.33333%;
}
.w-two-thirds-l {
width: 66.66667%;
}
.w-auto-l {
width: auto;
}
}
/*
OVERFLOW
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.overflow-visible {
overflow: visible;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-auto {
overflow: auto;
}
.overflow-x-visible {
overflow-x: visible;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-visible {
overflow-y: visible;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.overflow-y-auto {
overflow-y: auto;
}
@media screen and (min-width: 30em) {
.overflow-visible-ns {
overflow: visible;
}
.overflow-hidden-ns {
overflow: hidden;
}
.overflow-scroll-ns {
overflow: scroll;
}
.overflow-auto-ns {
overflow: auto;
}
.overflow-x-visible-ns {
overflow-x: visible;
}
.overflow-x-hidden-ns {
overflow-x: hidden;
}
.overflow-x-scroll-ns {
overflow-x: scroll;
}
.overflow-x-auto-ns {
overflow-x: auto;
}
.overflow-y-visible-ns {
overflow-y: visible;
}
.overflow-y-hidden-ns {
overflow-y: hidden;
}
.overflow-y-scroll-ns {
overflow-y: scroll;
}
.overflow-y-auto-ns {
overflow-y: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.overflow-visible-m {
overflow: visible;
}
.overflow-hidden-m {
overflow: hidden;
}
.overflow-scroll-m {
overflow: scroll;
}
.overflow-auto-m {
overflow: auto;
}
.overflow-x-visible-m {
overflow-x: visible;
}
.overflow-x-hidden-m {
overflow-x: hidden;
}
.overflow-x-scroll-m {
overflow-x: scroll;
}
.overflow-x-auto-m {
overflow-x: auto;
}
.overflow-y-visible-m {
overflow-y: visible;
}
.overflow-y-hidden-m {
overflow-y: hidden;
}
.overflow-y-scroll-m {
overflow-y: scroll;
}
.overflow-y-auto-m {
overflow-y: auto;
}
}
@media screen and (min-width: 60em) {
.overflow-visible-l {
overflow: visible;
}
.overflow-hidden-l {
overflow: hidden;
}
.overflow-scroll-l {
overflow: scroll;
}
.overflow-auto-l {
overflow: auto;
}
.overflow-x-visible-l {
overflow-x: visible;
}
.overflow-x-hidden-l {
overflow-x: hidden;
}
.overflow-x-scroll-l {
overflow-x: scroll;
}
.overflow-x-auto-l {
overflow-x: auto;
}
.overflow-y-visible-l {
overflow-y: visible;
}
.overflow-y-hidden-l {
overflow-y: hidden;
}
.overflow-y-scroll-l {
overflow-y: scroll;
}
.overflow-y-auto-l {
overflow-y: auto;
}
}
/*
POSITIONING
Docs: http://tachyons.io/docs/layout/position/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.static {
position: static;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
@media screen and (min-width: 30em) {
.static-ns {
position: static;
}
.relative-ns {
position: relative;
}
.absolute-ns {
position: absolute;
}
.fixed-ns {
position: fixed;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.static-m {
position: static;
}
.relative-m {
position: relative;
}
.absolute-m {
position: absolute;
}
.fixed-m {
position: fixed;
}
}
@media screen and (min-width: 60em) {
.static-l {
position: static;
}
.relative-l {
position: relative;
}
.absolute-l {
position: absolute;
}
.fixed-l {
position: fixed;
}
}
/*
OPACITY
Docs: http://tachyons.io/docs/themes/opacity/
*/
.o-100 {
opacity: 1;
}
.o-90 {
opacity: .9;
}
.o-80 {
opacity: .8;
}
.o-70 {
opacity: .7;
}
.o-60 {
opacity: .6;
}
.o-50 {
opacity: .5;
}
.o-40 {
opacity: .4;
}
.o-30 {
opacity: .3;
}
.o-20 {
opacity: .2;
}
.o-10 {
opacity: .1;
}
.o-05 {
opacity: .05;
}
.o-025 {
opacity: .025;
}
.o-0 {
opacity: 0;
}
/*
ROTATIONS
*/
.rotate-45 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135 {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225 {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270 {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315 {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
@media screen and (min-width: 30em) {
.rotate-45-ns {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-ns {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-ns {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-ns {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-ns {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-ns {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-ns {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.rotate-45-m {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-m {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-m {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-m {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-m {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-m {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-m {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
@media screen and (min-width: 60em) {
.rotate-45-l {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-l {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-l {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-l {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-l {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-l {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-l {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
/* Variables */
/*
SPACING
Docs: http://tachyons.io/docs/layout/spacing/
An eight step powers of two scale ranging from 0 to 16rem.
Base:
p = padding
m = margin
Modifiers:
a = all
h = horizontal
v = vertical
t = top
r = right
b = bottom
l = left
0 = none
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.pa0 {
padding: 0;
}
.pa1 {
padding: 0.25rem;
}
.pa2 {
padding: 0.5rem;
}
.pa3 {
padding: 1rem;
}
.pa4 {
padding: 2rem;
}
.pa5 {
padding: 4rem;
}
.pa6 {
padding: 8rem;
}
.pa7 {
padding: 16rem;
}
.pl0 {
padding-left: 0;
}
.pl1 {
padding-left: 0.25rem;
}
.pl2 {
padding-left: 0.5rem;
}
.pl3 {
padding-left: 1rem;
}
.pl4 {
padding-left: 2rem;
}
.pl5 {
padding-left: 4rem;
}
.pl6 {
padding-left: 8rem;
}
.pl7 {
padding-left: 16rem;
}
.pr0 {
padding-right: 0;
}
.pr1 {
padding-right: 0.25rem;
}
.pr2 {
padding-right: 0.5rem;
}
.pr3 {
padding-right: 1rem;
}
.pr4 {
padding-right: 2rem;
}
.pr5 {
padding-right: 4rem;
}
.pr6 {
padding-right: 8rem;
}
.pr7 {
padding-right: 16rem;
}
.pb0 {
padding-bottom: 0;
}
.pb1 {
padding-bottom: 0.25rem;
}
.pb2 {
padding-bottom: 0.5rem;
}
.pb3 {
padding-bottom: 1rem;
}
.pb4 {
padding-bottom: 2rem;
}
.pb5 {
padding-bottom: 4rem;
}
.pb6 {
padding-bottom: 8rem;
}
.pb7 {
padding-bottom: 16rem;
}
.pt0 {
padding-top: 0;
}
.pt1 {
padding-top: 0.25rem;
}
.pt2 {
padding-top: 0.5rem;
}
.pt3 {
padding-top: 1rem;
}
.pt4 {
padding-top: 2rem;
}
.pt5 {
padding-top: 4rem;
}
.pt6 {
padding-top: 8rem;
}
.pt7 {
padding-top: 16rem;
}
.pv0 {
padding-top: 0;
padding-bottom: 0;
}
.pv1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7 {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0 {
padding-left: 0;
padding-right: 0;
}
.ph1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3 {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4 {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5 {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6 {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7 {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0 {
margin: 0;
}
.ma1 {
margin: 0.25rem;
}
.ma2 {
margin: 0.5rem;
}
.ma3 {
margin: 1rem;
}
.ma4 {
margin: 2rem;
}
.ma5 {
margin: 4rem;
}
.ma6 {
margin: 8rem;
}
.ma7 {
margin: 16rem;
}
.ml0 {
margin-left: 0;
}
.ml1 {
margin-left: 0.25rem;
}
.ml2 {
margin-left: 0.5rem;
}
.ml3 {
margin-left: 1rem;
}
.ml4 {
margin-left: 2rem;
}
.ml5 {
margin-left: 4rem;
}
.ml6 {
margin-left: 8rem;
}
.ml7 {
margin-left: 16rem;
}
.mr0 {
margin-right: 0;
}
.mr1 {
margin-right: 0.25rem;
}
.mr2 {
margin-right: 0.5rem;
}
.mr3 {
margin-right: 1rem;
}
.mr4 {
margin-right: 2rem;
}
.mr5 {
margin-right: 4rem;
}
.mr6 {
margin-right: 8rem;
}
.mr7 {
margin-right: 16rem;
}
.mb0 {
margin-bottom: 0;
}
.mb1 {
margin-bottom: 0.25rem;
}
.mb2 {
margin-bottom: 0.5rem;
}
.mb3 {
margin-bottom: 1rem;
}
.mb4 {
margin-bottom: 2rem;
}
.mb4-1 {
margin-bottom: 3rem;
}
.mb5 {
margin-bottom: 4rem;
}
.mb6 {
margin-bottom: 8rem;
}
.mb7 {
margin-bottom: 16rem;
}
.mt0 {
margin-top: 0;
}
.mt1 {
margin-top: 0.25rem;
}
.mt2 {
margin-top: 0.5rem;
}
.mt3 {
margin-top: 1rem;
}
.mt4 {
margin-top: 2rem;
}
.mt4-1 {
margin-top: 3rem;
}
.mt5 {
margin-top: 4rem;
}
.mt6 {
margin-top: 8rem;
}
.mt7 {
margin-top: 16rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.mv1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6 {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7 {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0 {
margin-left: 0;
margin-right: 0;
}
.mh1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3 {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4 {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5 {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6 {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7 {
margin-left: 16rem;
margin-right: 16rem;
}
@media screen and (min-width: 30em) {
.pa0-ns {
padding: 0;
}
.pa1-ns {
padding: 0.25rem;
}
.pa2-ns {
padding: 0.5rem;
}
.pa3-ns {
padding: 1rem;
}
.pa4-ns {
padding: 2rem;
}
.pa5-ns {
padding: 4rem;
}
.pa6-ns {
padding: 8rem;
}
.pa7-ns {
padding: 16rem;
}
.pl0-ns {
padding-left: 0;
}
.pl1-ns {
padding-left: 0.25rem;
}
.pl2-ns {
padding-left: 0.5rem;
}
.pl3-ns {
padding-left: 1rem;
}
.pl4-ns {
padding-left: 2rem;
}
.pl5-ns {
padding-left: 4rem;
}
.pl6-ns {
padding-left: 8rem;
}
.pl7-ns {
padding-left: 16rem;
}
.pr0-ns {
padding-right: 0;
}
.pr1-ns {
padding-right: 0.25rem;
}
.pr2-ns {
padding-right: 0.5rem;
}
.pr3-ns {
padding-right: 1rem;
}
.pr4-ns {
padding-right: 2rem;
}
.pr5-ns {
padding-right: 4rem;
}
.pr6-ns {
padding-right: 8rem;
}
.pr7-ns {
padding-right: 16rem;
}
.pb0-ns {
padding-bottom: 0;
}
.pb1-ns {
padding-bottom: 0.25rem;
}
.pb2-ns {
padding-bottom: 0.5rem;
}
.pb3-ns {
padding-bottom: 1rem;
}
.pb4-ns {
padding-bottom: 2rem;
}
.pb5-ns {
padding-bottom: 4rem;
}
.pb6-ns {
padding-bottom: 8rem;
}
.pb7-ns {
padding-bottom: 16rem;
}
.pt0-ns {
padding-top: 0;
}
.pt1-ns {
padding-top: 0.25rem;
}
.pt2-ns {
padding-top: 0.5rem;
}
.pt3-ns {
padding-top: 1rem;
}
.pt4-ns {
padding-top: 2rem;
}
.pt5-ns {
padding-top: 4rem;
}
.pt6-ns {
padding-top: 8rem;
}
.pt7-ns {
padding-top: 16rem;
}
.pv0-ns {
padding-top: 0;
padding-bottom: 0;
}
.pv1-ns {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-ns {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-ns {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-ns {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-ns {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-ns {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-ns {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-ns {
padding-left: 0;
padding-right: 0;
}
.ph1-ns {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-ns {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-ns {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-ns {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-ns {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-ns {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-ns {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-ns {
margin: 0;
}
.ma1-ns {
margin: 0.25rem;
}
.ma2-ns {
margin: 0.5rem;
}
.ma3-ns {
margin: 1rem;
}
.ma4-ns {
margin: 2rem;
}
.ma5-ns {
margin: 4rem;
}
.ma6-ns {
margin: 8rem;
}
.ma7-ns {
margin: 16rem;
}
.ml0-ns {
margin-left: 0;
}
.ml1-ns {
margin-left: 0.25rem;
}
.ml2-ns {
margin-left: 0.5rem;
}
.ml3-ns {
margin-left: 1rem;
}
.ml4-ns {
margin-left: 2rem;
}
.ml5-ns {
margin-left: 4rem;
}
.ml6-ns {
margin-left: 8rem;
}
.ml7-ns {
margin-left: 16rem;
}
.mr0-ns {
margin-right: 0;
}
.mr1-ns {
margin-right: 0.25rem;
}
.mr2-ns {
margin-right: 0.5rem;
}
.mr3-ns {
margin-right: 1rem;
}
.mr4-ns {
margin-right: 2rem;
}
.mr5-ns {
margin-right: 4rem;
}
.mr6-ns {
margin-right: 8rem;
}
.mr7-ns {
margin-right: 16rem;
}
.mb0-ns {
margin-bottom: 0;
}
.mb1-ns {
margin-bottom: 0.25rem;
}
.mb2-ns {
margin-bottom: 0.5rem;
}
.mb3-ns {
margin-bottom: 1rem;
}
.mb4-ns {
margin-bottom: 2rem;
}
.mb5-ns {
margin-bottom: 4rem;
}
.mb6-ns {
margin-bottom: 8rem;
}
.mb7-ns {
margin-bottom: 16rem;
}
.mt0-ns {
margin-top: 0;
}
.mt1-ns {
margin-top: 0.25rem;
}
.mt2-ns {
margin-top: 0.5rem;
}
.mt3-ns {
margin-top: 1rem;
}
.mt4-ns {
margin-top: 2rem;
}
.mt5-ns {
margin-top: 4rem;
}
.mt6-ns {
margin-top: 8rem;
}
.mt7-ns {
margin-top: 16rem;
}
.mv0-ns {
margin-top: 0;
margin-bottom: 0;
}
.mv1-ns {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-ns {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-ns {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-ns {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-ns {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-ns {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-ns {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-ns {
margin-left: 0;
margin-right: 0;
}
.mh1-ns {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-ns {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-ns {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-ns {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-ns {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-ns {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-ns {
margin-left: 16rem;
margin-right: 16rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.pa0-m {
padding: 0;
}
.pa1-m {
padding: 0.25rem;
}
.pa2-m {
padding: 0.5rem;
}
.pa3-m {
padding: 1rem;
}
.pa4-m {
padding: 2rem;
}
.pa5-m {
padding: 4rem;
}
.pa6-m {
padding: 8rem;
}
.pa7-m {
padding: 16rem;
}
.pl0-m {
padding-left: 0;
}
.pl1-m {
padding-left: 0.25rem;
}
.pl2-m {
padding-left: 0.5rem;
}
.pl3-m {
padding-left: 1rem;
}
.pl4-m {
padding-left: 2rem;
}
.pl5-m {
padding-left: 4rem;
}
.pl6-m {
padding-left: 8rem;
}
.pl7-m {
padding-left: 16rem;
}
.pr0-m {
padding-right: 0;
}
.pr1-m {
padding-right: 0.25rem;
}
.pr2-m {
padding-right: 0.5rem;
}
.pr3-m {
padding-right: 1rem;
}
.pr4-m {
padding-right: 2rem;
}
.pr5-m {
padding-right: 4rem;
}
.pr6-m {
padding-right: 8rem;
}
.pr7-m {
padding-right: 16rem;
}
.pb0-m {
padding-bottom: 0;
}
.pb1-m {
padding-bottom: 0.25rem;
}
.pb2-m {
padding-bottom: 0.5rem;
}
.pb3-m {
padding-bottom: 1rem;
}
.pb4-m {
padding-bottom: 2rem;
}
.pb5-m {
padding-bottom: 4rem;
}
.pb6-m {
padding-bottom: 8rem;
}
.pb7-m {
padding-bottom: 16rem;
}
.pt0-m {
padding-top: 0;
}
.pt1-m {
padding-top: 0.25rem;
}
.pt2-m {
padding-top: 0.5rem;
}
.pt3-m {
padding-top: 1rem;
}
.pt4-m {
padding-top: 2rem;
}
.pt5-m {
padding-top: 4rem;
}
.pt6-m {
padding-top: 8rem;
}
.pt7-m {
padding-top: 16rem;
}
.pv0-m {
padding-top: 0;
padding-bottom: 0;
}
.pv1-m {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-m {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-m {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-m {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-m {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-m {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-m {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-m {
padding-left: 0;
padding-right: 0;
}
.ph1-m {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-m {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-m {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-m {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-m {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-m {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-m {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-m {
margin: 0;
}
.ma1-m {
margin: 0.25rem;
}
.ma2-m {
margin: 0.5rem;
}
.ma3-m {
margin: 1rem;
}
.ma4-m {
margin: 2rem;
}
.ma5-m {
margin: 4rem;
}
.ma6-m {
margin: 8rem;
}
.ma7-m {
margin: 16rem;
}
.ml0-m {
margin-left: 0;
}
.ml1-m {
margin-left: 0.25rem;
}
.ml2-m {
margin-left: 0.5rem;
}
.ml3-m {
margin-left: 1rem;
}
.ml4-m {
margin-left: 2rem;
}
.ml5-m {
margin-left: 4rem;
}
.ml6-m {
margin-left: 8rem;
}
.ml7-m {
margin-left: 16rem;
}
.mr0-m {
margin-right: 0;
}
.mr1-m {
margin-right: 0.25rem;
}
.mr2-m {
margin-right: 0.5rem;
}
.mr3-m {
margin-right: 1rem;
}
.mr4-m {
margin-right: 2rem;
}
.mr5-m {
margin-right: 4rem;
}
.mr6-m {
margin-right: 8rem;
}
.mr7-m {
margin-right: 16rem;
}
.mb0-m {
margin-bottom: 0;
}
.mb1-m {
margin-bottom: 0.25rem;
}
.mb2-m {
margin-bottom: 0.5rem;
}
.mb3-m {
margin-bottom: 1rem;
}
.mb4-m {
margin-bottom: 2rem;
}
.mb5-m {
margin-bottom: 4rem;
}
.mb6-m {
margin-bottom: 8rem;
}
.mb7-m {
margin-bottom: 16rem;
}
.mt0-m {
margin-top: 0;
}
.mt1-m {
margin-top: 0.25rem;
}
.mt2-m {
margin-top: 0.5rem;
}
.mt3-m {
margin-top: 1rem;
}
.mt4-m {
margin-top: 2rem;
}
.mt5-m {
margin-top: 4rem;
}
.mt6-m {
margin-top: 8rem;
}
.mt7-m {
margin-top: 16rem;
}
.mv0-m {
margin-top: 0;
margin-bottom: 0;
}
.mv1-m {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-m {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-m {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-m {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-m {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-m {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-m {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-m {
margin-left: 0;
margin-right: 0;
}
.mh1-m {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-m {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-m {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-m {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-m {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-m {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-m {
margin-left: 16rem;
margin-right: 16rem;
}
}
@media screen and (min-width: 60em) {
.pa0-l {
padding: 0;
}
.pa1-l {
padding: 0.25rem;
}
.pa2-l {
padding: 0.5rem;
}
.pa3-l {
padding: 1rem;
}
.pa4-l {
padding: 2rem;
}
.pa5-l {
padding: 4rem;
}
.pa6-l {
padding: 8rem;
}
.pa7-l {
padding: 16rem;
}
.pl0-l {
padding-left: 0;
}
.pl1-l {
padding-left: 0.25rem;
}
.pl2-l {
padding-left: 0.5rem;
}
.pl3-l {
padding-left: 1rem;
}
.pl4-l {
padding-left: 2rem;
}
.pl5-l {
padding-left: 4rem;
}
.pl6-l {
padding-left: 8rem;
}
.pl7-l {
padding-left: 16rem;
}
.pr0-l {
padding-right: 0;
}
.pr1-l {
padding-right: 0.25rem;
}
.pr2-l {
padding-right: 0.5rem;
}
.pr3-l {
padding-right: 1rem;
}
.pr4-l {
padding-right: 2rem;
}
.pr5-l {
padding-right: 4rem;
}
.pr6-l {
padding-right: 8rem;
}
.pr7-l {
padding-right: 16rem;
}
.pb0-l {
padding-bottom: 0;
}
.pb1-l {
padding-bottom: 0.25rem;
}
.pb2-l {
padding-bottom: 0.5rem;
}
.pb3-l {
padding-bottom: 1rem;
}
.pb4-l {
padding-bottom: 2rem;
}
.pb5-l {
padding-bottom: 4rem;
}
.pb6-l {
padding-bottom: 8rem;
}
.pb7-l {
padding-bottom: 16rem;
}
.pt0-l {
padding-top: 0;
}
.pt1-l {
padding-top: 0.25rem;
}
.pt2-l {
padding-top: 0.5rem;
}
.pt3-l {
padding-top: 1rem;
}
.pt4-l {
padding-top: 2rem;
}
.pt5-l {
padding-top: 4rem;
}
.pt6-l {
padding-top: 8rem;
}
.pt7-l {
padding-top: 16rem;
}
.pv0-l {
padding-top: 0;
padding-bottom: 0;
}
.pv1-l {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-l {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-l {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-l {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-l {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-l {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-l {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-l {
padding-left: 0;
padding-right: 0;
}
.ph1-l {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-l {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-l {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-l {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-l {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-l {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-l {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-l {
margin: 0;
}
.ma1-l {
margin: 0.25rem;
}
.ma2-l {
margin: 0.5rem;
}
.ma3-l {
margin: 1rem;
}
.ma4-l {
margin: 2rem;
}
.ma5-l {
margin: 4rem;
}
.ma6-l {
margin: 8rem;
}
.ma7-l {
margin: 16rem;
}
.ml0-l {
margin-left: 0;
}
.ml1-l {
margin-left: 0.25rem;
}
.ml2-l {
margin-left: 0.5rem;
}
.ml3-l {
margin-left: 1rem;
}
.ml4-l {
margin-left: 2rem;
}
.ml5-l {
margin-left: 4rem;
}
.ml6-l {
margin-left: 8rem;
}
.ml7-l {
margin-left: 16rem;
}
.mr0-l {
margin-right: 0;
}
.mr1-l {
margin-right: 0.25rem;
}
.mr2-l {
margin-right: 0.5rem;
}
.mr3-l {
margin-right: 1rem;
}
.mr4-l {
margin-right: 2rem;
}
.mr5-l {
margin-right: 4rem;
}
.mr6-l {
margin-right: 8rem;
}
.mr7-l {
margin-right: 16rem;
}
.mb0-l {
margin-bottom: 0;
}
.mb1-l {
margin-bottom: 0.25rem;
}
.mb2-l {
margin-bottom: 0.5rem;
}
.mb3-l {
margin-bottom: 1rem;
}
.mb4-l {
margin-bottom: 2rem;
}
.mb5-l {
margin-bottom: 4rem;
}
.mb6-l {
margin-bottom: 8rem;
}
.mb7-l {
margin-bottom: 16rem;
}
.mt0-l {
margin-top: 0;
}
.mt1-l {
margin-top: 0.25rem;
}
.mt2-l {
margin-top: 0.5rem;
}
.mt3-l {
margin-top: 1rem;
}
.mt4-l {
margin-top: 2rem;
}
.mt5-l {
margin-top: 4rem;
}
.mt6-l {
margin-top: 8rem;
}
.mt7-l {
margin-top: 16rem;
}
.mv0-l {
margin-top: 0;
margin-bottom: 0;
}
.mv1-l {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-l {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-l {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-l {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-l {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-l {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-l {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-l {
margin-left: 0;
margin-right: 0;
}
.mh1-l {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-l {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-l {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-l {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-l {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-l {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-l {
margin-left: 16rem;
margin-right: 16rem;
}
}
/*
NEGATIVE MARGINS
Base:
n = negative
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.na1 {
margin: -0.25rem;
}
.na2 {
margin: -0.5rem;
}
.na3 {
margin: -1rem;
}
.na4 {
margin: -2rem;
}
.na5 {
margin: -4rem;
}
.na6 {
margin: -8rem;
}
.na7 {
margin: -16rem;
}
.nl1 {
margin-left: -0.25rem;
}
.nl2 {
margin-left: -0.5rem;
}
.nl3 {
margin-left: -1rem;
}
.nl4 {
margin-left: -2rem;
}
.nl5 {
margin-left: -4rem;
}
.nl6 {
margin-left: -8rem;
}
.nl7 {
margin-left: -16rem;
}
.nr1 {
margin-right: -0.25rem;
}
.nr2 {
margin-right: -0.5rem;
}
.nr3 {
margin-right: -1rem;
}
.nr4 {
margin-right: -2rem;
}
.nr5 {
margin-right: -4rem;
}
.nr6 {
margin-right: -8rem;
}
.nr7 {
margin-right: -16rem;
}
.nb1 {
margin-bottom: -0.25rem;
}
.nb2 {
margin-bottom: -0.5rem;
}
.nb3 {
margin-bottom: -1rem;
}
.nb4 {
margin-bottom: -2rem;
}
.nb5 {
margin-bottom: -4rem;
}
.nb6 {
margin-bottom: -8rem;
}
.nb7 {
margin-bottom: -16rem;
}
.nt1 {
margin-top: -0.25rem;
}
.nt2 {
margin-top: -0.5rem;
}
.nt3 {
margin-top: -1rem;
}
.nt4 {
margin-top: -2rem;
}
.nt5 {
margin-top: -4rem;
}
.nt6 {
margin-top: -8rem;
}
.nt7 {
margin-top: -16rem;
}
@media screen and (min-width: 30em) {
.na1-ns {
margin: -0.25rem;
}
.na2-ns {
margin: -0.5rem;
}
.na3-ns {
margin: -1rem;
}
.na4-ns {
margin: -2rem;
}
.na5-ns {
margin: -4rem;
}
.na6-ns {
margin: -8rem;
}
.na7-ns {
margin: -16rem;
}
.nl1-ns {
margin-left: -0.25rem;
}
.nl2-ns {
margin-left: -0.5rem;
}
.nl3-ns {
margin-left: -1rem;
}
.nl4-ns {
margin-left: -2rem;
}
.nl5-ns {
margin-left: -4rem;
}
.nl6-ns {
margin-left: -8rem;
}
.nl7-ns {
margin-left: -16rem;
}
.nr1-ns {
margin-right: -0.25rem;
}
.nr2-ns {
margin-right: -0.5rem;
}
.nr3-ns {
margin-right: -1rem;
}
.nr4-ns {
margin-right: -2rem;
}
.nr5-ns {
margin-right: -4rem;
}
.nr6-ns {
margin-right: -8rem;
}
.nr7-ns {
margin-right: -16rem;
}
.nb1-ns {
margin-bottom: -0.25rem;
}
.nb2-ns {
margin-bottom: -0.5rem;
}
.nb3-ns {
margin-bottom: -1rem;
}
.nb4-ns {
margin-bottom: -2rem;
}
.nb5-ns {
margin-bottom: -4rem;
}
.nb6-ns {
margin-bottom: -8rem;
}
.nb7-ns {
margin-bottom: -16rem;
}
.nt1-ns {
margin-top: -0.25rem;
}
.nt2-ns {
margin-top: -0.5rem;
}
.nt3-ns {
margin-top: -1rem;
}
.nt4-ns {
margin-top: -2rem;
}
.nt5-ns {
margin-top: -4rem;
}
.nt6-ns {
margin-top: -8rem;
}
.nt7-ns {
margin-top: -16rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.na1-m {
margin: -0.25rem;
}
.na2-m {
margin: -0.5rem;
}
.na3-m {
margin: -1rem;
}
.na4-m {
margin: -2rem;
}
.na5-m {
margin: -4rem;
}
.na6-m {
margin: -8rem;
}
.na7-m {
margin: -16rem;
}
.nl1-m {
margin-left: -0.25rem;
}
.nl2-m {
margin-left: -0.5rem;
}
.nl3-m {
margin-left: -1rem;
}
.nl4-m {
margin-left: -2rem;
}
.nl5-m {
margin-left: -4rem;
}
.nl6-m {
margin-left: -8rem;
}
.nl7-m {
margin-left: -16rem;
}
.nr1-m {
margin-right: -0.25rem;
}
.nr2-m {
margin-right: -0.5rem;
}
.nr3-m {
margin-right: -1rem;
}
.nr4-m {
margin-right: -2rem;
}
.nr5-m {
margin-right: -4rem;
}
.nr6-m {
margin-right: -8rem;
}
.nr7-m {
margin-right: -16rem;
}
.nb1-m {
margin-bottom: -0.25rem;
}
.nb2-m {
margin-bottom: -0.5rem;
}
.nb3-m {
margin-bottom: -1rem;
}
.nb4-m {
margin-bottom: -2rem;
}
.nb5-m {
margin-bottom: -4rem;
}
.nb6-m {
margin-bottom: -8rem;
}
.nb7-m {
margin-bottom: -16rem;
}
.nt1-m {
margin-top: -0.25rem;
}
.nt2-m {
margin-top: -0.5rem;
}
.nt3-m {
margin-top: -1rem;
}
.nt4-m {
margin-top: -2rem;
}
.nt5-m {
margin-top: -4rem;
}
.nt6-m {
margin-top: -8rem;
}
.nt7-m {
margin-top: -16rem;
}
}
@media screen and (min-width: 60em) {
.na1-l {
margin: -0.25rem;
}
.na2-l {
margin: -0.5rem;
}
.na3-l {
margin: -1rem;
}
.na4-l {
margin: -2rem;
}
.na5-l {
margin: -4rem;
}
.na6-l {
margin: -8rem;
}
.na7-l {
margin: -16rem;
}
.nl1-l {
margin-left: -0.25rem;
}
.nl2-l {
margin-left: -0.5rem;
}
.nl3-l {
margin-left: -1rem;
}
.nl4-l {
margin-left: -2rem;
}
.nl5-l {
margin-left: -4rem;
}
.nl6-l {
margin-left: -8rem;
}
.nl7-l {
margin-left: -16rem;
}
.nr1-l {
margin-right: -0.25rem;
}
.nr2-l {
margin-right: -0.5rem;
}
.nr3-l {
margin-right: -1rem;
}
.nr4-l {
margin-right: -2rem;
}
.nr5-l {
margin-right: -4rem;
}
.nr6-l {
margin-right: -8rem;
}
.nr7-l {
margin-right: -16rem;
}
.nb1-l {
margin-bottom: -0.25rem;
}
.nb2-l {
margin-bottom: -0.5rem;
}
.nb3-l {
margin-bottom: -1rem;
}
.nb4-l {
margin-bottom: -2rem;
}
.nb5-l {
margin-bottom: -4rem;
}
.nb6-l {
margin-bottom: -8rem;
}
.nb7-l {
margin-bottom: -16rem;
}
.nt1-l {
margin-top: -0.25rem;
}
.nt2-l {
margin-top: -0.5rem;
}
.nt3-l {
margin-top: -1rem;
}
.nt4-l {
margin-top: -2rem;
}
.nt5-l {
margin-top: -4rem;
}
.nt6-l {
margin-top: -8rem;
}
.nt7-l {
margin-top: -16rem;
}
}
/*
TEXT DECORATION
Docs: http://tachyons.io/docs/typography/text-decoration/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.strike {
text-decoration: line-through;
}
.underline {
text-decoration: underline;
}
.no-underline {
text-decoration: none;
}
@media screen and (min-width: 30em) {
.strike-ns {
text-decoration: line-through;
}
.underline-ns {
text-decoration: underline;
}
.no-underline-ns {
text-decoration: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.strike-m {
text-decoration: line-through;
}
.underline-m {
text-decoration: underline;
}
.no-underline-m {
text-decoration: none;
}
}
@media screen and (min-width: 60em) {
.strike-l {
text-decoration: line-through;
}
.underline-l {
text-decoration: underline;
}
.no-underline-l {
text-decoration: none;
}
}
/*
TEXT ALIGN
Docs: http://tachyons.io/docs/typography/text-align/
Base
t = text-align
Modifiers
l = left
r = right
c = center
j = justify
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tl {
text-align: left;
}
.tr {
text-align: right;
}
.tc {
text-align: center;
}
.tj {
text-align: justify;
}
@media screen and (min-width: 30em) {
.tl-ns {
text-align: left;
}
.tr-ns {
text-align: right;
}
.tc-ns {
text-align: center;
}
.tj-ns {
text-align: justify;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.tl-m {
text-align: left;
}
.tr-m {
text-align: right;
}
.tc-m {
text-align: center;
}
.tj-m {
text-align: justify;
}
}
@media screen and (min-width: 60em) {
.tl-l {
text-align: left;
}
.tr-l {
text-align: right;
}
.tc-l {
text-align: center;
}
.tj-l {
text-align: justify;
}
}
/*
TEXT TRANSFORM
Docs: http://tachyons.io/docs/typography/text-transform/
Base:
tt = text-transform
Modifiers
c = capitalize
l = lowercase
u = uppercase
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ttc {
text-transform: capitalize;
}
.ttl {
text-transform: lowercase;
}
.ttu {
text-transform: uppercase;
}
.ttn {
text-transform: none;
}
@media screen and (min-width: 30em) {
.ttc-ns {
text-transform: capitalize;
}
.ttl-ns {
text-transform: lowercase;
}
.ttu-ns {
text-transform: uppercase;
}
.ttn-ns {
text-transform: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ttc-m {
text-transform: capitalize;
}
.ttl-m {
text-transform: lowercase;
}
.ttu-m {
text-transform: uppercase;
}
.ttn-m {
text-transform: none;
}
}
@media screen and (min-width: 60em) {
.ttc-l {
text-transform: capitalize;
}
.ttl-l {
text-transform: lowercase;
}
.ttu-l {
text-transform: uppercase;
}
.ttn-l {
text-transform: none;
}
}
/*
TYPE SCALE
Docs: http://tachyons.io/docs/typography/scale/
Base:
f = font-size
Modifiers
1 = 1st step in size scale
2 = 2nd step in size scale
3 = 3rd step in size scale
4 = 4th step in size scale
5 = 5th step in size scale
6 = 6th step in size scale
7 = 7th step in size scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
* For Hero/Marketing Titles
*
* These generally are too large for mobile
* so be careful using them on smaller screens.
* */
.f-6,
.f-headline {
font-size: 6rem;
}
.f-5,
.f-subheadline {
font-size: 5rem;
}
/* Type Scale */
.f1 {
font-size: 3rem;
}
.f2 {
font-size: 2.25rem;
}
.f3 {
font-size: 1.5rem;
}
.f4 {
font-size: 1.25rem;
}
.f5 {
font-size: 1rem;
}
.f6 {
font-size: .875rem;
}
.f7 {
font-size: .75rem;
}
/* Small and hard to read for many people so use with extreme caution */
@media screen and (min-width: 30em) {
.f-6-ns,
.f-headline-ns {
font-size: 6rem;
}
.f-5-ns,
.f-subheadline-ns {
font-size: 5rem;
}
.f1-ns {
font-size: 3rem;
}
.f2-ns {
font-size: 2.25rem;
}
.f3-ns {
font-size: 1.5rem;
}
.f4-ns {
font-size: 1.25rem;
}
.f5-ns {
font-size: 1rem;
}
.f6-ns {
font-size: .875rem;
}
.f7-ns {
font-size: .75rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.f-6-m,
.f-headline-m {
font-size: 6rem;
}
.f-5-m,
.f-subheadline-m {
font-size: 5rem;
}
.f1-m {
font-size: 3rem;
}
.f2-m {
font-size: 2.25rem;
}
.f3-m {
font-size: 1.5rem;
}
.f4-m {
font-size: 1.25rem;
}
.f5-m {
font-size: 1rem;
}
.f6-m {
font-size: .875rem;
}
.f7-m {
font-size: .75rem;
}
}
@media screen and (min-width: 60em) {
.f-6-l,
.f-headline-l {
font-size: 6rem;
}
.f-5-l,
.f-subheadline-l {
font-size: 5rem;
}
.f1-l {
font-size: 3rem;
}
.f2-l {
font-size: 2.25rem;
}
.f3-l {
font-size: 1.5rem;
}
.f4-l {
font-size: 1.25rem;
}
.f5-l {
font-size: 1rem;
}
.f6-l {
font-size: .875rem;
}
.f7-l {
font-size: .75rem;
}
}
/*
UTILITIES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Equivalent to .overflow-y-scroll */
.overflow-container {
overflow-y: scroll;
}
.center {
margin-right: auto;
margin-left: auto;
}
.mr-auto {
margin-right: auto;
}
.ml-auto {
margin-left: auto;
}
@media screen and (min-width: 30em) {
.center-ns {
margin-right: auto;
margin-left: auto;
}
.mr-auto-ns {
margin-right: auto;
}
.ml-auto-ns {
margin-left: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.center-m {
margin-right: auto;
margin-left: auto;
}
.mr-auto-m {
margin-right: auto;
}
.ml-auto-m {
margin-left: auto;
}
}
@media screen and (min-width: 60em) {
.center-l {
margin-right: auto;
margin-left: auto;
}
.mr-auto-l {
margin-right: auto;
}
.ml-auto-l {
margin-left: auto;
}
}
.button-no-style {
border: 0;
}
/*
WHITE SPACE
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ws-normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
@media screen and (min-width: 30em) {
.ws-normal-ns {
white-space: normal;
}
.nowrap-ns {
white-space: nowrap;
}
.pre-ns {
white-space: pre;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ws-normal-m {
white-space: normal;
}
.nowrap-m {
white-space: nowrap;
}
.pre-m {
white-space: pre;
}
}
@media screen and (min-width: 60em) {
.ws-normal-l {
white-space: normal;
}
.nowrap-l {
white-space: nowrap;
}
.pre-l {
white-space: pre;
}
}
/*
VERTICAL ALIGN
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.v-base {
vertical-align: baseline;
}
.v-mid {
vertical-align: middle;
}
.v-top {
vertical-align: top;
}
.v-btm {
vertical-align: bottom;
}
@media screen and (min-width: 30em) {
.v-base-ns {
vertical-align: baseline;
}
.v-mid-ns {
vertical-align: middle;
}
.v-top-ns {
vertical-align: top;
}
.v-btm-ns {
vertical-align: bottom;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.v-base-m {
vertical-align: baseline;
}
.v-mid-m {
vertical-align: middle;
}
.v-top-m {
vertical-align: top;
}
.v-btm-m {
vertical-align: bottom;
}
}
@media screen and (min-width: 60em) {
.v-base-l {
vertical-align: baseline;
}
.v-mid-l {
vertical-align: middle;
}
.v-top-l {
vertical-align: top;
}
.v-btm-l {
vertical-align: bottom;
}
}
/*
Z-INDEX
Base
z = z-index
Modifiers
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
-3 = literal value 3
-4 = literal value 4
-5 = literal value 5
-999 = literal value 999
-9999 = literal value 9999
-max = largest accepted z-index value as integer
-inherit = string value inherit
-initial = string value initial
-unset = string value unset
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z-0 {
z-index: 0;
}
.z-1 {
z-index: 1;
}
.z-2 {
z-index: 2;
}
.z-3 {
z-index: 3;
}
.z-4 {
z-index: 4;
}
.z-5 {
z-index: 5;
}
.z-999 {
z-index: 999;
}
.z-9999 {
z-index: 9999;
}
.z-max {
z-index: 2147483647;
}
.z-inherit {
z-index: inherit;
}
.z-initial {
z-index: initial;
}
.z-unset {
z-index: unset;
}
.errorLabel {
position: fixed;
padding: 5px;
left: 0;
background-color: var(--color-error, #f99f9f);
color: var(--color-surface-1, #f6f6f6);
z-index: 10;
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
.ss-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left;
}
.ss-content {
height: 100%;
width: calc(100% + 18px);
padding: 0 0 0 0;
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ss-content.rtl {
width: calc(100% + 18px);
right: auto;
}
.ss-scroll {
position: relative;
background: rgba(0, 0, 0, 0.3);
width: 9px;
border-radius: 4px;
top: 0;
z-index: 2;
cursor: pointer;
-webkit-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
.ss-hidden {
display: none;
}
.ss-grabbed {
-o-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.color-primary {
color: var(--color-brand, #0096fa);
}
.color-primary-dark {
color: var(--color-brand, #0096fa);
}
.white {
color: var(--color-surface-1, #f6f6f6);
}
.gray-1 {
color: var(--color-surface-2, #e0e0e0);
}
.gray-2 {
color: var(--color-surface-3, #cfcfcf);
}
.gray-3 {
color: var(--color-content-disable, #636363);
}
body {
background: var(--color-surface-2, #e0e0e0);
}
button:focus {
outline: 0;
}
.fade-enter-active, .fade-leave-active {
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
/*
CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
/*
ASPECT RATIOS
*/
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
* Make sure there are no height and width attributes on the embedded media.
* Adapted from: https://github.com/suitcss/components-flex-embed
*
* Example:
*
*
*
*
*
* */
.aspect-ratio {
height: 0;
position: relative;
}
.aspect-ratio--16x9 {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16 {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3 {
padding-bottom: 75%;
}
.aspect-ratio--3x4 {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4 {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6 {
padding-bottom: 150%;
}
.aspect-ratio--8x5 {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8 {
padding-bottom: 160%;
}
.aspect-ratio--7x5 {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7 {
padding-bottom: 140%;
}
.aspect-ratio--1x1 {
padding-bottom: 100%;
}
.aspect-ratio--object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
@media screen and (min-width: 30em) {
.aspect-ratio-ns {
height: 0;
position: relative;
}
.aspect-ratio--16x9-ns {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-ns {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-ns {
padding-bottom: 75%;
}
.aspect-ratio--3x4-ns {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-ns {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-ns {
padding-bottom: 150%;
}
.aspect-ratio--8x5-ns {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-ns {
padding-bottom: 160%;
}
.aspect-ratio--7x5-ns {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-ns {
padding-bottom: 140%;
}
.aspect-ratio--1x1-ns {
padding-bottom: 100%;
}
.aspect-ratio--object-ns {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.aspect-ratio-m {
height: 0;
position: relative;
}
.aspect-ratio--16x9-m {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-m {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-m {
padding-bottom: 75%;
}
.aspect-ratio--3x4-m {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-m {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-m {
padding-bottom: 150%;
}
.aspect-ratio--8x5-m {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-m {
padding-bottom: 160%;
}
.aspect-ratio--7x5-m {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-m {
padding-bottom: 140%;
}
.aspect-ratio--1x1-m {
padding-bottom: 100%;
}
.aspect-ratio--object-m {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
@media screen and (min-width: 60em) {
.aspect-ratio-l {
height: 0;
position: relative;
}
.aspect-ratio--16x9-l {
padding-bottom: 56.25%;
}
.aspect-ratio--9x16-l {
padding-bottom: 177.77%;
}
.aspect-ratio--4x3-l {
padding-bottom: 75%;
}
.aspect-ratio--3x4-l {
padding-bottom: 133.33%;
}
.aspect-ratio--6x4-l {
padding-bottom: 66.6%;
}
.aspect-ratio--4x6-l {
padding-bottom: 150%;
}
.aspect-ratio--8x5-l {
padding-bottom: 62.5%;
}
.aspect-ratio--5x8-l {
padding-bottom: 160%;
}
.aspect-ratio--7x5-l {
padding-bottom: 71.42%;
}
.aspect-ratio--5x7-l {
padding-bottom: 140%;
}
.aspect-ratio--1x1-l {
padding-bottom: 100%;
}
.aspect-ratio--object-l {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
}
/*
IMAGES
Docs: http://tachyons.io/docs/elements/images/
*/
/* Responsive images! */
img {
max-width: 100%;
}
/*
BACKGROUND SIZE
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
Often used in combination with background image set as an inline style
on an html element.
*/
.cover {
background-size: cover !important;
}
.contain {
background-size: contain !important;
}
@media screen and (min-width: 30em) {
.cover-ns {
background-size: cover !important;
}
.contain-ns {
background-size: contain !important;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.cover-m {
background-size: cover !important;
}
.contain-m {
background-size: contain !important;
}
}
@media screen and (min-width: 60em) {
.cover-l {
background-size: cover !important;
}
.contain-l {
background-size: contain !important;
}
}
/*
BACKGROUND POSITION
Base:
bg = background
Modifiers:
-center = center center
-top = top center
-right = center right
-bottom = bottom center
-left = center left
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bg-center {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left {
background-repeat: no-repeat;
background-position: center left;
}
@media screen and (min-width: 30em) {
.bg-center-ns {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-ns {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-ns {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-ns {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-ns {
background-repeat: no-repeat;
background-position: center left;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.bg-center-m {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-m {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-m {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-m {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-m {
background-repeat: no-repeat;
background-position: center left;
}
}
@media screen and (min-width: 60em) {
.bg-center-l {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-l {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-l {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-l {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-l {
background-repeat: no-repeat;
background-position: center left;
}
}
/*
OUTLINES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.outline {
outline: 1px solid;
}
.outline-transparent {
outline: 1px solid transparent;
}
.outline-0 {
outline: 0;
}
@media screen and (min-width: 30em) {
.outline-ns {
outline: 1px solid;
}
.outline-transparent-ns {
outline: 1px solid transparent;
}
.outline-0-ns {
outline: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.outline-m {
outline: 1px solid;
}
.outline-transparent-m {
outline: 1px solid transparent;
}
.outline-0-m {
outline: 0;
}
}
@media screen and (min-width: 60em) {
.outline-l {
outline: 1px solid;
}
.outline-transparent-l {
outline: 1px solid transparent;
}
.outline-0-l {
outline: 0;
}
}
/*
BORDERS
Docs: http://tachyons.io/docs/themes/borders/
Base:
b = border
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ba {
border-style: solid;
border-width: 1px;
}
.bt {
border-top-style: solid;
border-top-width: 1px;
}
.br {
border-right-style: solid;
border-right-width: 1px;
}
.bb {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl {
border-left-style: solid;
border-left-width: 1px;
}
.bn {
border-style: none;
border-width: 0;
}
@media screen and (min-width: 30em) {
.ba-ns {
border-style: solid;
border-width: 1px;
}
.bt-ns {
border-top-style: solid;
border-top-width: 1px;
}
.br-ns {
border-right-style: solid;
border-right-width: 1px;
}
.bb-ns {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-ns {
border-left-style: solid;
border-left-width: 1px;
}
.bn-ns {
border-style: none;
border-width: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ba-m {
border-style: solid;
border-width: 1px;
}
.bt-m {
border-top-style: solid;
border-top-width: 1px;
}
.br-m {
border-right-style: solid;
border-right-width: 1px;
}
.bb-m {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-m {
border-left-style: solid;
border-left-width: 1px;
}
.bn-m {
border-style: none;
border-width: 0;
}
}
@media screen and (min-width: 60em) {
.ba-l {
border-style: solid;
border-width: 1px;
}
.bt-l {
border-top-style: solid;
border-top-width: 1px;
}
.br-l {
border-right-style: solid;
border-right-width: 1px;
}
.bb-l {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-l {
border-left-style: solid;
border-left-width: 1px;
}
.bn-l {
border-style: none;
border-width: 0;
}
}
/*
BORDER RADIUS
Docs: http://tachyons.io/docs/themes/border-radius/
Base:
br = border-radius
Modifiers:
0 = 0/none
1 = 1st step in scale
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
Literal values:
-100 = 100%
-pill = 9999px
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.br0 {
border-radius: 0;
}
.br1 {
border-radius: .125rem;
}
.br2 {
border-radius: .25rem;
}
.br3 {
border-radius: .5rem;
}
.br4 {
border-radius: 1rem;
}
.br-100 {
border-radius: 100%;
}
.br-pill {
border-radius: 9999px;
}
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@media screen and (min-width: 30em) {
.br0-ns {
border-radius: 0;
}
.br1-ns {
border-radius: .125rem;
}
.br2-ns {
border-radius: .25rem;
}
.br3-ns {
border-radius: .5rem;
}
.br4-ns {
border-radius: 1rem;
}
.br-100-ns {
border-radius: 100%;
}
.br-pill-ns {
border-radius: 9999px;
}
.br--bottom-ns {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-ns {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.br0-m {
border-radius: 0;
}
.br1-m {
border-radius: .125rem;
}
.br2-m {
border-radius: .25rem;
}
.br3-m {
border-radius: .5rem;
}
.br4-m {
border-radius: 1rem;
}
.br-100-m {
border-radius: 100%;
}
.br-pill-m {
border-radius: 9999px;
}
.br--bottom-m {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-m {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-m {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-m {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 60em) {
.br0-l {
border-radius: 0;
}
.br1-l {
border-radius: .125rem;
}
.br2-l {
border-radius: .25rem;
}
.br3-l {
border-radius: .5rem;
}
.br4-l {
border-radius: 1rem;
}
.br-100-l {
border-radius: 100%;
}
.br-pill-l {
border-radius: 9999px;
}
.br--bottom-l {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-l {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-l {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
/*
BORDER STYLES
Docs: http://tachyons.io/docs/themes/borders/
Depends on base border module in _borders.css
Base:
b = border-style
Modifiers:
--none = none
--dotted = dotted
--dashed = dashed
--solid = solid
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.b--dotted {
border-style: dotted;
}
.b--dashed {
border-style: dashed;
}
.b--solid {
border-style: solid;
}
.b--none {
border-style: none;
}
@media screen and (min-width: 30em) {
.b--dotted-ns {
border-style: dotted;
}
.b--dashed-ns {
border-style: dashed;
}
.b--solid-ns {
border-style: solid;
}
.b--none-ns {
border-style: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.b--dotted-m {
border-style: dotted;
}
.b--dashed-m {
border-style: dashed;
}
.b--solid-m {
border-style: solid;
}
.b--none-m {
border-style: none;
}
}
@media screen and (min-width: 60em) {
.b--dotted-l {
border-style: dotted;
}
.b--dashed-l {
border-style: dashed;
}
.b--solid-l {
border-style: solid;
}
.b--none-l {
border-style: none;
}
}
/*
BORDER WIDTHS
Docs: http://tachyons.io/docs/themes/borders/
Base:
bw = border-width
Modifiers:
0 = 0 width border
1 = 1st step in border-width scale
2 = 2nd step in border-width scale
3 = 3rd step in border-width scale
4 = 4th step in border-width scale
5 = 5th step in border-width scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bw0 {
border-width: 0;
}
.bw1 {
border-width: .125rem;
}
.bw2 {
border-width: .25rem;
}
.bw3 {
border-width: .5rem;
}
.bw4 {
border-width: 1rem;
}
.bw5 {
border-width: 2rem;
}
.bw-0 {
border-width: 0px;
}
.bw-1 {
border-width: 1px;
}
.bw-2 {
border-width: 2px;
}
.bw-3 {
border-width: 3px;
}
.bw-4 {
border-width: 4px;
}
.bw-5 {
border-width: 5px;
}
/* Resets */
.bt-0 {
border-top-width: 0;
}
.br-0 {
border-right-width: 0;
}
.bb-0 {
border-bottom-width: 0;
}
.bl-0 {
border-left-width: 0;
}
@media screen and (min-width: 30em) {
.bw0-ns {
border-width: 0;
}
.bw1-ns {
border-width: .125rem;
}
.bw2-ns {
border-width: .25rem;
}
.bw3-ns {
border-width: .5rem;
}
.bw4-ns {
border-width: 1rem;
}
.bw5-ns {
border-width: 2rem;
}
.bt-0-ns {
border-top-width: 0;
}
.br-0-ns {
border-right-width: 0;
}
.bb-0-ns {
border-bottom-width: 0;
}
.bl-0-ns {
border-left-width: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.bw0-m {
border-width: 0;
}
.bw1-m {
border-width: .125rem;
}
.bw2-m {
border-width: .25rem;
}
.bw3-m {
border-width: .5rem;
}
.bw4-m {
border-width: 1rem;
}
.bw5-m {
border-width: 2rem;
}
.bt-0-m {
border-top-width: 0;
}
.br-0-m {
border-right-width: 0;
}
.bb-0-m {
border-bottom-width: 0;
}
.bl-0-m {
border-left-width: 0;
}
}
@media screen and (min-width: 60em) {
.bw0-l {
border-width: 0;
}
.bw1-l {
border-width: .125rem;
}
.bw2-l {
border-width: .25rem;
}
.bw3-l {
border-width: .5rem;
}
.bw4-l {
border-width: 1rem;
}
.bw5-l {
border-width: 2rem;
}
.bt-0-l {
border-top-width: 0;
}
.br-0-l {
border-right-width: 0;
}
.bb-0-l {
border-bottom-width: 0;
}
.bl-0-l {
border-left-width: 0;
}
}
/*
BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.shadow-1 {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2 {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3 {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4 {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5 {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-6 {
-webkit-box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
}
@media screen and (min-width: 30em) {
.shadow-1-ns {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-ns {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-ns {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-ns {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-ns {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.shadow-1-m {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-m {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-m {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-m {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-m {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 60em) {
.shadow-1-l {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-2-l {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
}
.shadow-3-l {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.shadow-4-l {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.shadow-5-l {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
}
/*
CODE
*/
.pre {
overflow-x: auto;
overflow-y: hidden;
overflow: scroll;
}
/*
COORDINATES
Docs: http://tachyons.io/docs/layout/position/
Use in combination with the position module.
Base:
top
bottom
right
left
Modifiers:
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
--1 = literal value -1
--2 = literal value -2
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.top-0 {
top: 0;
}
.right-0 {
right: 0;
}
.bottom-0 {
bottom: 0;
}
.left-0 {
left: 0;
}
.top-1 {
top: 1rem;
}
.right-1 {
right: 1rem;
}
.bottom-1 {
bottom: 1rem;
}
.left-1 {
left: 1rem;
}
.top-2 {
top: 2rem;
}
.right-2 {
right: 2rem;
}
.bottom-2 {
bottom: 2rem;
}
.left-2 {
left: 2rem;
}
.top--1 {
top: -1rem;
}
.right--1 {
right: -1rem;
}
.bottom--1 {
bottom: -1rem;
}
.left--1 {
left: -1rem;
}
.top--2 {
top: -2rem;
}
.right--2 {
right: -2rem;
}
.bottom--2 {
bottom: -2rem;
}
.left--2 {
left: -2rem;
}
.absolute--fill {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@media screen and (min-width: 30em) {
.top-0-ns {
top: 0;
}
.left-0-ns {
left: 0;
}
.right-0-ns {
right: 0;
}
.bottom-0-ns {
bottom: 0;
}
.top-1-ns {
top: 1rem;
}
.left-1-ns {
left: 1rem;
}
.right-1-ns {
right: 1rem;
}
.bottom-1-ns {
bottom: 1rem;
}
.top-2-ns {
top: 2rem;
}
.left-2-ns {
left: 2rem;
}
.right-2-ns {
right: 2rem;
}
.bottom-2-ns {
bottom: 2rem;
}
.top--1-ns {
top: -1rem;
}
.right--1-ns {
right: -1rem;
}
.bottom--1-ns {
bottom: -1rem;
}
.left--1-ns {
left: -1rem;
}
.top--2-ns {
top: -2rem;
}
.right--2-ns {
right: -2rem;
}
.bottom--2-ns {
bottom: -2rem;
}
.left--2-ns {
left: -2rem;
}
.absolute--fill-ns {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.top-0-m {
top: 0;
}
.left-0-m {
left: 0;
}
.right-0-m {
right: 0;
}
.bottom-0-m {
bottom: 0;
}
.top-1-m {
top: 1rem;
}
.left-1-m {
left: 1rem;
}
.right-1-m {
right: 1rem;
}
.bottom-1-m {
bottom: 1rem;
}
.top-2-m {
top: 2rem;
}
.left-2-m {
left: 2rem;
}
.right-2-m {
right: 2rem;
}
.bottom-2-m {
bottom: 2rem;
}
.top--1-m {
top: -1rem;
}
.right--1-m {
right: -1rem;
}
.bottom--1-m {
bottom: -1rem;
}
.left--1-m {
left: -1rem;
}
.top--2-m {
top: -2rem;
}
.right--2-m {
right: -2rem;
}
.bottom--2-m {
bottom: -2rem;
}
.left--2-m {
left: -2rem;
}
.absolute--fill-m {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media screen and (min-width: 60em) {
.top-0-l {
top: 0;
}
.left-0-l {
left: 0;
}
.right-0-l {
right: 0;
}
.bottom-0-l {
bottom: 0;
}
.top-1-l {
top: 1rem;
}
.left-1-l {
left: 1rem;
}
.right-1-l {
right: 1rem;
}
.bottom-1-l {
bottom: 1rem;
}
.top-2-l {
top: 2rem;
}
.left-2-l {
left: 2rem;
}
.right-2-l {
right: 2rem;
}
.bottom-2-l {
bottom: 2rem;
}
.top--1-l {
top: -1rem;
}
.right--1-l {
right: -1rem;
}
.bottom--1-l {
bottom: -1rem;
}
.left--1-l {
left: -1rem;
}
.top--2-l {
top: -2rem;
}
.right--2-l {
right: -2rem;
}
.bottom--2-l {
bottom: -2rem;
}
.left--2-l {
left: -2rem;
}
.absolute--fill-l {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
/*
CLEARFIX
http://tachyons.io/docs/layout/clearfix/
*/
/* Nicolas Gallaghers Clearfix solution
Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.cl {
clear: left;
}
.cr {
clear: right;
}
.cb {
clear: both;
}
.cn {
clear: none;
}
@media screen and (min-width: 30em) {
.cl-ns {
clear: left;
}
.cr-ns {
clear: right;
}
.cb-ns {
clear: both;
}
.cn-ns {
clear: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.cl-m {
clear: left;
}
.cr-m {
clear: right;
}
.cb-m {
clear: both;
}
.cn-m {
clear: none;
}
}
@media screen and (min-width: 60em) {
.cl-l {
clear: left;
}
.cr-l {
clear: right;
}
.cb-l {
clear: both;
}
.cn-l {
clear: none;
}
}
/*
DISPLAY
Docs: http://tachyons.io/docs/layout/display
Base:
d = display
Modifiers:
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
t-row = table-row
t-columm = table-column
t-column-group = table-column-group
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.dn {
display: none;
}
.di {
display: inline;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.dit {
display: inline-table;
}
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.dt-row {
display: table-row;
}
.dt-row-group {
display: table-row-group;
}
.dt-column {
display: table-column;
}
.dt-column-group {
display: table-column-group;
}
/*
This will set table to full width and then
all cells will be equal width
*/
.dt--fixed {
table-layout: fixed;
width: 100%;
}
@media screen and (min-width: 30em) {
.dn-ns {
display: none;
}
.di-ns {
display: inline;
}
.db-ns {
display: block;
}
.dib-ns {
display: inline-block;
}
.dit-ns {
display: inline-table;
}
.dt-ns {
display: table;
}
.dtc-ns {
display: table-cell;
}
.dt-row-ns {
display: table-row;
}
.dt-row-group-ns {
display: table-row-group;
}
.dt-column-ns {
display: table-column;
}
.dt-column-group-ns {
display: table-column-group;
}
.dt--fixed-ns {
table-layout: fixed;
width: 100%;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.dn-m {
display: none;
}
.di-m {
display: inline;
}
.db-m {
display: block;
}
.dib-m {
display: inline-block;
}
.dit-m {
display: inline-table;
}
.dt-m {
display: table;
}
.dtc-m {
display: table-cell;
}
.dt-row-m {
display: table-row;
}
.dt-row-group-m {
display: table-row-group;
}
.dt-column-m {
display: table-column;
}
.dt-column-group-m {
display: table-column-group;
}
.dt--fixed-m {
table-layout: fixed;
width: 100%;
}
}
@media screen and (min-width: 60em) {
.dn-l {
display: none;
}
.di-l {
display: inline;
}
.db-l {
display: block;
}
.dib-l {
display: inline-block;
}
.dit-l {
display: inline-table;
}
.dt-l {
display: table;
}
.dtc-l {
display: table-cell;
}
.dt-row-l {
display: table-row;
}
.dt-row-group-l {
display: table-row-group;
}
.dt-column-l {
display: table-column;
}
.dt-column-group-l {
display: table-column-group;
}
.dt--fixed-l {
table-layout: fixed;
width: 100%;
}
}
/*
FLEXBOX
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.flex {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0 {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7 {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8 {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
@media screen and (min-width: 30em) {
.flex-ns {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-ns {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-ns {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-ns {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-ns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-ns {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-ns {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-ns {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-ns {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-ns {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-ns {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-ns {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-ns {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-ns {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-ns {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-ns {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-ns {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-ns {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-ns {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-ns {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-ns {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-ns {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-ns {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-ns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-ns {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-ns {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-ns {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-ns {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-ns {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-ns {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-ns {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-ns {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-ns {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-ns {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-ns {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-ns {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-ns {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-ns {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-ns {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-ns {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-ns {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-ns {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.flex-m {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-m {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-m {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-m {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-m {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-m {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-m {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-m {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-m {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-m {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-m {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-m {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-m {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-m {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-m {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-m {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-m {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-m {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-m {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-m {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-m {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-m {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-m {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-m {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-m {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-m {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-m {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-m {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-m {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-m {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-m {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-m {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-m {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-m {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-m {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-m {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-m {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-m {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-m {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-m {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-m {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-m {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
@media screen and (min-width: 60em) {
.flex-l {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
}
.inline-flex-l {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-auto-l {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */
}
.flex-none-l {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.flex-column-l {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-l {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap-l {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap-l {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse-l {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-column-reverse-l {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-row-reverse-l {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.items-start-l {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.items-end-l {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.items-center-l {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.items-baseline-l {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.items-stretch-l {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.self-start-l {
-ms-flex-item-align: start;
align-self: flex-start;
}
.self-end-l {
-ms-flex-item-align: end;
align-self: flex-end;
}
.self-center-l {
-ms-flex-item-align: center;
align-self: center;
}
.self-baseline-l {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.self-stretch-l {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.justify-start-l {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-end-l {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-center-l {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-between-l {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-around-l {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.content-start-l {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.content-end-l {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.content-center-l {
-ms-flex-line-pack: center;
align-content: center;
}
.content-between-l {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.content-around-l {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.content-stretch-l {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.order-0-l {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.order-1-l {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.order-2-l {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.order-3-l {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.order-4-l {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.order-5-l {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.order-6-l {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.order-7-l {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
}
.order-8-l {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.order-last-l {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999;
}
}
/*
FLOATS
http://tachyons.io/docs/layout/floats/
1. Floated elements are automatically rendered as block level elements.
Setting floats to display inline will fix the double margin bug in
ie6. You know... just in case.
2. Don't forget to clearfix your floats with .cf
Base:
f = float
Modifiers:
l = left
r = right
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.fl {
float: left;
_display: inline;
}
.fr {
float: right;
_display: inline;
}
.fn {
float: none;
}
@media screen and (min-width: 30em) {
.fl-ns {
float: left;
_display: inline;
}
.fr-ns {
float: right;
_display: inline;
}
.fn-ns {
float: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.fl-m {
float: left;
_display: inline;
}
.fr-m {
float: right;
_display: inline;
}
.fn-m {
float: none;
}
}
@media screen and (min-width: 60em) {
.fl-l {
float: left;
_display: inline;
}
.fr-l {
float: right;
_display: inline;
}
.fn-l {
float: none;
}
}
/*
FONT STYLE
Docs: http://tachyons.io/docs/typography/font-style/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.i {
font-style: italic;
}
.fs-normal {
font-style: normal;
}
@media screen and (min-width: 30em) {
.i-ns {
font-style: italic;
}
.fs-normal-ns {
font-style: normal;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.i-m {
font-style: italic;
}
.fs-normal-m {
font-style: normal;
}
}
@media screen and (min-width: 60em) {
.i-l {
font-style: italic;
}
.fs-normal-l {
font-style: normal;
}
}
/*
FONT WEIGHT
Docs: http://tachyons.io/docs/typography/font-weight/
Base
fw = font-weight
Modifiers:
1 = literal value 100
2 = literal value 200
3 = literal value 300
4 = literal value 400
5 = literal value 500
6 = literal value 600
7 = literal value 700
8 = literal value 800
9 = literal value 900
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.normal {
font-weight: normal;
}
.b {
font-weight: bold;
}
.fw1 {
font-weight: 100;
}
.fw2 {
font-weight: 200;
}
.fw3 {
font-weight: 300;
}
.fw4 {
font-weight: 400;
}
.fw5 {
font-weight: 500;
}
.fw6 {
font-weight: 600;
}
.fw7 {
font-weight: 700;
}
.fw8 {
font-weight: 800;
}
.fw9 {
font-weight: 900;
}
@media screen and (min-width: 30em) {
.normal-ns {
font-weight: normal;
}
.b-ns {
font-weight: bold;
}
.fw1-ns {
font-weight: 100;
}
.fw2-ns {
font-weight: 200;
}
.fw3-ns {
font-weight: 300;
}
.fw4-ns {
font-weight: 400;
}
.fw5-ns {
font-weight: 500;
}
.fw6-ns {
font-weight: 600;
}
.fw7-ns {
font-weight: 700;
}
.fw8-ns {
font-weight: 800;
}
.fw9-ns {
font-weight: 900;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.normal-m {
font-weight: normal;
}
.b-m {
font-weight: bold;
}
.fw1-m {
font-weight: 100;
}
.fw2-m {
font-weight: 200;
}
.fw3-m {
font-weight: 300;
}
.fw4-m {
font-weight: 400;
}
.fw5-m {
font-weight: 500;
}
.fw6-m {
font-weight: 600;
}
.fw7-m {
font-weight: 700;
}
.fw8-m {
font-weight: 800;
}
.fw9-m {
font-weight: 900;
}
}
@media screen and (min-width: 60em) {
.normal-l {
font-weight: normal;
}
.b-l {
font-weight: bold;
}
.fw1-l {
font-weight: 100;
}
.fw2-l {
font-weight: 200;
}
.fw3-l {
font-weight: 300;
}
.fw4-l {
font-weight: 400;
}
.fw5-l {
font-weight: 500;
}
.fw6-l {
font-weight: 600;
}
.fw7-l {
font-weight: 700;
}
.fw8-l {
font-weight: 800;
}
.fw9-l {
font-weight: 900;
}
}
/*
HEIGHTS
Docs: http://tachyons.io/docs/layout/heights/
Base:
h = height
min-h = min-height
min-vh = min-height vertical screen height
vh = vertical screen height
Modifiers
1 = 1st step in height scale
2 = 2nd step in height scale
3 = 3rd step in height scale
4 = 4th step in height scale
5 = 5th step in height scale
-25 = literal value 25%
-50 = literal value 50%
-75 = literal value 75%
-100 = literal value 100%
-auto = string value of auto
-inherit = string value of inherit
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Height Scale */
.h1 {
height: 1rem;
}
.h2 {
height: 2rem;
}
.h3 {
height: 4rem;
}
.h4 {
height: 8rem;
}
.h5 {
height: 16rem;
}
/* Height Percentages - Based off of height of parent */
.h-25 {
height: 25%;
}
.h-50 {
height: 50%;
}
.h-75 {
height: 75%;
}
.h-100 {
height: 100%;
}
.min-h-100 {
min-height: 100%;
}
/* Screen Height Percentage */
.vh-25 {
height: 25vh;
}
.vh-50 {
height: 50vh;
}
.vh-75 {
height: 75vh;
}
.vh-100 {
height: 100vh;
}
.min-vh-100 {
min-height: 100vh;
}
.min-vh-flex {
min-height: calc(100vh - 140px) !important;
}
/* String Properties */
.h-auto {
height: auto;
}
.h-inherit {
height: inherit;
}
@media screen and (min-width: 30em) {
.h1-ns {
height: 1rem;
}
.h2-ns {
height: 2rem;
}
.h3-ns {
height: 4rem;
}
.h4-ns {
height: 8rem;
}
.h5-ns {
height: 16rem;
}
.h-25-ns {
height: 25%;
}
.h-50-ns {
height: 50%;
}
.h-75-ns {
height: 75%;
}
.h-100-ns {
height: 100%;
}
.min-h-100-ns {
min-height: 100%;
}
.vh-25-ns {
height: 25vh;
}
.vh-50-ns {
height: 50vh;
}
.vh-75-ns {
height: 75vh;
}
.vh-100-ns {
height: 100vh;
}
.min-vh-100-ns {
min-height: 100vh;
}
.h-auto-ns {
height: auto;
}
.h-inherit-ns {
height: inherit;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.h1-m {
height: 1rem;
}
.h2-m {
height: 2rem;
}
.h3-m {
height: 4rem;
}
.h4-m {
height: 8rem;
}
.h5-m {
height: 16rem;
}
.h-25-m {
height: 25%;
}
.h-50-m {
height: 50%;
}
.h-75-m {
height: 75%;
}
.h-100-m {
height: 100%;
}
.min-h-100-m {
min-height: 100%;
}
.vh-25-m {
height: 25vh;
}
.vh-50-m {
height: 50vh;
}
.vh-75-m {
height: 75vh;
}
.vh-100-m {
height: 100vh;
}
.min-vh-100-m {
min-height: 100vh;
}
.h-auto-m {
height: auto;
}
.h-inherit-m {
height: inherit;
}
}
@media screen and (min-width: 60em) {
.h1-l {
height: 1rem;
}
.h2-l {
height: 2rem;
}
.h3-l {
height: 4rem;
}
.h4-l {
height: 8rem;
}
.h5-l {
height: 16rem;
}
.h-25-l {
height: 25%;
}
.h-50-l {
height: 50%;
}
.h-75-l {
height: 75%;
}
.h-100-l {
height: 100%;
}
.min-h-100-l {
min-height: 100%;
}
.vh-25-l {
height: 25vh;
}
.vh-50-l {
height: 50vh;
}
.vh-75-l {
height: 75vh;
}
.vh-100-l {
height: 100vh;
}
.min-vh-100-l {
min-height: 100vh;
}
.h-auto-l {
height: auto;
}
.h-inherit-l {
height: inherit;
}
}
/*
LETTER SPACING
Docs: http://tachyons.io/docs/typography/tracking/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tracked {
letter-spacing: .1em;
}
.tracked-tight {
letter-spacing: -.05em;
}
.tracked-mega {
letter-spacing: .25em;
}
@media screen and (min-width: 30em) {
.tracked-ns {
letter-spacing: .1em;
}
.tracked-tight-ns {
letter-spacing: -.05em;
}
.tracked-mega-ns {
letter-spacing: .25em;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.tracked-m {
letter-spacing: .1em;
}
.tracked-tight-m {
letter-spacing: -.05em;
}
.tracked-mega-m {
letter-spacing: .25em;
}
}
@media screen and (min-width: 60em) {
.tracked-l {
letter-spacing: .1em;
}
.tracked-tight-l {
letter-spacing: -.05em;
}
.tracked-mega-l {
letter-spacing: .25em;
}
}
/*
LINE HEIGHT / LEADING
Docs: http://tachyons.io/docs/typography/line-height
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.lh-solid {
line-height: 1;
}
.lh-title {
line-height: 1.25;
}
.lh-copy {
line-height: 1.5;
}
@media screen and (min-width: 30em) {
.lh-solid-ns {
line-height: 1;
}
.lh-title-ns {
line-height: 1.25;
}
.lh-copy-ns {
line-height: 1.5;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.lh-solid-m {
line-height: 1;
}
.lh-title-m {
line-height: 1.25;
}
.lh-copy-m {
line-height: 1.5;
}
}
@media screen and (min-width: 60em) {
.lh-solid-l {
line-height: 1;
}
.lh-title-l {
line-height: 1.25;
}
.lh-copy-l {
line-height: 1.5;
}
}
/*
LISTS
http://tachyons.io/docs/elements/lists/
*/
.list {
list-style-type: none;
}
/*
MAX WIDTHS
Docs: http://tachyons.io/docs/layout/max-widths/
Base:
mw = max-width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
6 = 6st step in width scale
7 = 7nd step in width scale
8 = 8rd step in width scale
9 = 9th step in width scale
-100 = literal value 100%
-none = string value none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Max Width Percentages */
.mw-100 {
max-width: 100%;
}
/* Max Width Scale */
.mw1 {
max-width: 1rem;
}
.mw2 {
max-width: 2rem;
}
.mw3 {
max-width: 4rem;
}
.mw4 {
max-width: 8rem;
}
.mw5 {
max-width: 16rem;
}
.mw6 {
max-width: 32rem;
}
.mw7 {
max-width: 48rem;
}
.mw8 {
max-width: 64rem;
}
.mw9 {
max-width: 96rem;
}
/* Max Width String Properties */
.mw-none {
max-width: none;
}
@media screen and (min-width: 30em) {
.mw-100-ns {
max-width: 100%;
}
.mw1-ns {
max-width: 1rem;
}
.mw2-ns {
max-width: 2rem;
}
.mw3-ns {
max-width: 4rem;
}
.mw4-ns {
max-width: 8rem;
}
.mw5-ns {
max-width: 16rem;
}
.mw6-ns {
max-width: 32rem;
}
.mw7-ns {
max-width: 48rem;
}
.mw8-ns {
max-width: 64rem;
}
.mw9-ns {
max-width: 96rem;
}
.mw-none-ns {
max-width: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.mw-100-m {
max-width: 100%;
}
.mw1-m {
max-width: 1rem;
}
.mw2-m {
max-width: 2rem;
}
.mw3-m {
max-width: 4rem;
}
.mw4-m {
max-width: 8rem;
}
.mw5-m {
max-width: 16rem;
}
.mw6-m {
max-width: 32rem;
}
.mw7-m {
max-width: 48rem;
}
.mw8-m {
max-width: 64rem;
}
.mw9-m {
max-width: 96rem;
}
.mw-none-m {
max-width: none;
}
}
@media screen and (min-width: 60em) {
.mw-100-l {
max-width: 100%;
}
.mw1-l {
max-width: 1rem;
}
.mw2-l {
max-width: 2rem;
}
.mw3-l {
max-width: 4rem;
}
.mw4-l {
max-width: 8rem;
}
.mw5-l {
max-width: 16rem;
}
.mw6-l {
max-width: 32rem;
}
.mw7-l {
max-width: 48rem;
}
.mw8-l {
max-width: 64rem;
}
.mw9-l {
max-width: 96rem;
}
.mw-none-l {
max-width: none;
}
}
/*
WIDTHS
Docs: http://tachyons.io/docs/layout/widths/
Base:
w = width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
-10 = literal value 10%
-20 = literal value 20%
-25 = literal value 25%
-30 = literal value 30%
-33 = literal value 33%
-34 = literal value 34%
-40 = literal value 40%
-50 = literal value 50%
-60 = literal value 60%
-70 = literal value 70%
-75 = literal value 75%
-80 = literal value 80%
-90 = literal value 90%
-100 = literal value 100%
-third = 100% / 3 (Not supported in opera mini or IE8)
-two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
-auto = string value auto
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Width Scale */
.w1 {
width: 1rem;
}
.w2 {
width: 2rem;
}
.w3 {
width: 4rem;
}
.w4 {
width: 8rem;
}
.w5 {
width: 16rem;
}
.w-10 {
width: 10%;
}
.w-20 {
width: 20%;
}
.w-25 {
width: 25%;
}
.w-30 {
width: 30%;
}
.w-33 {
width: 33%;
}
.w-34 {
width: 34%;
}
.w-40 {
width: 40%;
}
.w-50 {
width: 50%;
}
.w-55 {
width: 55%;
}
.w-60 {
width: 60%;
}
.w-70 {
width: 70%;
}
.w-75 {
width: 75%;
}
.w-80 {
width: 80%;
}
.w-90 {
width: 90%;
}
.w-100 {
width: 100%;
}
.w-third {
width: 33.33333%;
}
.w-two-thirds {
width: 66.66667%;
}
.w-auto {
width: auto;
}
@media screen and (min-width: 30em) {
.w1-ns {
width: 1rem;
}
.w2-ns {
width: 2rem;
}
.w3-ns {
width: 4rem;
}
.w4-ns {
width: 8rem;
}
.w5-ns {
width: 16rem;
}
.w-10-ns {
width: 10%;
}
.w-20-ns {
width: 20%;
}
.w-25-ns {
width: 25%;
}
.w-30-ns {
width: 30%;
}
.w-33-ns {
width: 33%;
}
.w-34-ns {
width: 34%;
}
.w-40-ns {
width: 40%;
}
.w-50-ns {
width: 50%;
}
.w-60-ns {
width: 60%;
}
.w-70-ns {
width: 70%;
}
.w-75-ns {
width: 75%;
}
.w-80-ns {
width: 80%;
}
.w-90-ns {
width: 90%;
}
.w-100-ns {
width: 100%;
}
.w-third-ns {
width: 33.33333%;
}
.w-two-thirds-ns {
width: 66.66667%;
}
.w-auto-ns {
width: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.w1-m {
width: 1rem;
}
.w2-m {
width: 2rem;
}
.w3-m {
width: 4rem;
}
.w4-m {
width: 8rem;
}
.w5-m {
width: 16rem;
}
.w-10-m {
width: 10%;
}
.w-20-m {
width: 20%;
}
.w-25-m {
width: 25%;
}
.w-30-m {
width: 30%;
}
.w-33-m {
width: 33%;
}
.w-34-m {
width: 34%;
}
.w-40-m {
width: 40%;
}
.w-50-m {
width: 50%;
}
.w-60-m {
width: 60%;
}
.w-70-m {
width: 70%;
}
.w-75-m {
width: 75%;
}
.w-80-m {
width: 80%;
}
.w-90-m {
width: 90%;
}
.w-100-m {
width: 100%;
}
.w-third-m {
width: 33.33333%;
}
.w-two-thirds-m {
width: 66.66667%;
}
.w-auto-m {
width: auto;
}
}
@media screen and (min-width: 60em) {
.w1-l {
width: 1rem;
}
.w2-l {
width: 2rem;
}
.w3-l {
width: 4rem;
}
.w4-l {
width: 8rem;
}
.w5-l {
width: 16rem;
}
.w-10-l {
width: 10%;
}
.w-20-l {
width: 20%;
}
.w-25-l {
width: 25%;
}
.w-30-l {
width: 30%;
}
.w-33-l {
width: 33%;
}
.w-34-l {
width: 34%;
}
.w-40-l {
width: 40%;
}
.w-50-l {
width: 50%;
}
.w-60-l {
width: 60%;
}
.w-70-l {
width: 70%;
}
.w-75-l {
width: 75%;
}
.w-80-l {
width: 80%;
}
.w-90-l {
width: 90%;
}
.w-100-l {
width: 100%;
}
.w-third-l {
width: 33.33333%;
}
.w-two-thirds-l {
width: 66.66667%;
}
.w-auto-l {
width: auto;
}
}
/*
OVERFLOW
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.overflow-visible {
overflow: visible;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-auto {
overflow: auto;
}
.overflow-x-visible {
overflow-x: visible;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-visible {
overflow-y: visible;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.overflow-y-auto {
overflow-y: auto;
}
@media screen and (min-width: 30em) {
.overflow-visible-ns {
overflow: visible;
}
.overflow-hidden-ns {
overflow: hidden;
}
.overflow-scroll-ns {
overflow: scroll;
}
.overflow-auto-ns {
overflow: auto;
}
.overflow-x-visible-ns {
overflow-x: visible;
}
.overflow-x-hidden-ns {
overflow-x: hidden;
}
.overflow-x-scroll-ns {
overflow-x: scroll;
}
.overflow-x-auto-ns {
overflow-x: auto;
}
.overflow-y-visible-ns {
overflow-y: visible;
}
.overflow-y-hidden-ns {
overflow-y: hidden;
}
.overflow-y-scroll-ns {
overflow-y: scroll;
}
.overflow-y-auto-ns {
overflow-y: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.overflow-visible-m {
overflow: visible;
}
.overflow-hidden-m {
overflow: hidden;
}
.overflow-scroll-m {
overflow: scroll;
}
.overflow-auto-m {
overflow: auto;
}
.overflow-x-visible-m {
overflow-x: visible;
}
.overflow-x-hidden-m {
overflow-x: hidden;
}
.overflow-x-scroll-m {
overflow-x: scroll;
}
.overflow-x-auto-m {
overflow-x: auto;
}
.overflow-y-visible-m {
overflow-y: visible;
}
.overflow-y-hidden-m {
overflow-y: hidden;
}
.overflow-y-scroll-m {
overflow-y: scroll;
}
.overflow-y-auto-m {
overflow-y: auto;
}
}
@media screen and (min-width: 60em) {
.overflow-visible-l {
overflow: visible;
}
.overflow-hidden-l {
overflow: hidden;
}
.overflow-scroll-l {
overflow: scroll;
}
.overflow-auto-l {
overflow: auto;
}
.overflow-x-visible-l {
overflow-x: visible;
}
.overflow-x-hidden-l {
overflow-x: hidden;
}
.overflow-x-scroll-l {
overflow-x: scroll;
}
.overflow-x-auto-l {
overflow-x: auto;
}
.overflow-y-visible-l {
overflow-y: visible;
}
.overflow-y-hidden-l {
overflow-y: hidden;
}
.overflow-y-scroll-l {
overflow-y: scroll;
}
.overflow-y-auto-l {
overflow-y: auto;
}
}
/*
POSITIONING
Docs: http://tachyons.io/docs/layout/position/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.static {
position: static;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
@media screen and (min-width: 30em) {
.static-ns {
position: static;
}
.relative-ns {
position: relative;
}
.absolute-ns {
position: absolute;
}
.fixed-ns {
position: fixed;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.static-m {
position: static;
}
.relative-m {
position: relative;
}
.absolute-m {
position: absolute;
}
.fixed-m {
position: fixed;
}
}
@media screen and (min-width: 60em) {
.static-l {
position: static;
}
.relative-l {
position: relative;
}
.absolute-l {
position: absolute;
}
.fixed-l {
position: fixed;
}
}
/*
OPACITY
Docs: http://tachyons.io/docs/themes/opacity/
*/
.o-100 {
opacity: 1;
}
.o-90 {
opacity: .9;
}
.o-80 {
opacity: .8;
}
.o-70 {
opacity: .7;
}
.o-60 {
opacity: .6;
}
.o-50 {
opacity: .5;
}
.o-40 {
opacity: .4;
}
.o-30 {
opacity: .3;
}
.o-20 {
opacity: .2;
}
.o-10 {
opacity: .1;
}
.o-05 {
opacity: .05;
}
.o-025 {
opacity: .025;
}
.o-0 {
opacity: 0;
}
/*
ROTATIONS
*/
.rotate-45 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135 {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225 {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270 {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315 {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
@media screen and (min-width: 30em) {
.rotate-45-ns {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-ns {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-ns {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-ns {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-ns {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-ns {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-ns {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.rotate-45-m {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-m {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-m {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-m {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-m {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-m {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-m {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
@media screen and (min-width: 60em) {
.rotate-45-l {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90-l {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-135-l {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.rotate-180-l {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-225-l {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.rotate-270-l {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-315-l {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
/* Variables */
/*
SPACING
Docs: http://tachyons.io/docs/layout/spacing/
An eight step powers of two scale ranging from 0 to 16rem.
Base:
p = padding
m = margin
Modifiers:
a = all
h = horizontal
v = vertical
t = top
r = right
b = bottom
l = left
0 = none
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.pa0 {
padding: 0;
}
.pa1 {
padding: 0.25rem;
}
.pa2 {
padding: 0.5rem;
}
.pa3 {
padding: 1rem;
}
.pa4 {
padding: 2rem;
}
.pa5 {
padding: 4rem;
}
.pa6 {
padding: 8rem;
}
.pa7 {
padding: 16rem;
}
.pl0 {
padding-left: 0;
}
.pl1 {
padding-left: 0.25rem;
}
.pl2 {
padding-left: 0.5rem;
}
.pl3 {
padding-left: 1rem;
}
.pl4 {
padding-left: 2rem;
}
.pl5 {
padding-left: 4rem;
}
.pl6 {
padding-left: 8rem;
}
.pl7 {
padding-left: 16rem;
}
.pr0 {
padding-right: 0;
}
.pr1 {
padding-right: 0.25rem;
}
.pr2 {
padding-right: 0.5rem;
}
.pr3 {
padding-right: 1rem;
}
.pr4 {
padding-right: 2rem;
}
.pr5 {
padding-right: 4rem;
}
.pr6 {
padding-right: 8rem;
}
.pr7 {
padding-right: 16rem;
}
.pb0 {
padding-bottom: 0;
}
.pb1 {
padding-bottom: 0.25rem;
}
.pb2 {
padding-bottom: 0.5rem;
}
.pb3 {
padding-bottom: 1rem;
}
.pb4 {
padding-bottom: 2rem;
}
.pb5 {
padding-bottom: 4rem;
}
.pb6 {
padding-bottom: 8rem;
}
.pb7 {
padding-bottom: 16rem;
}
.pt0 {
padding-top: 0;
}
.pt1 {
padding-top: 0.25rem;
}
.pt2 {
padding-top: 0.5rem;
}
.pt3 {
padding-top: 1rem;
}
.pt4 {
padding-top: 2rem;
}
.pt5 {
padding-top: 4rem;
}
.pt6 {
padding-top: 8rem;
}
.pt7 {
padding-top: 16rem;
}
.pv0 {
padding-top: 0;
padding-bottom: 0;
}
.pv1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7 {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0 {
padding-left: 0;
padding-right: 0;
}
.ph1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3 {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4 {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5 {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6 {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7 {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0 {
margin: 0;
}
.ma1 {
margin: 0.25rem;
}
.ma2 {
margin: 0.5rem;
}
.ma3 {
margin: 1rem;
}
.ma4 {
margin: 2rem;
}
.ma5 {
margin: 4rem;
}
.ma6 {
margin: 8rem;
}
.ma7 {
margin: 16rem;
}
.ml0 {
margin-left: 0;
}
.ml1 {
margin-left: 0.25rem;
}
.ml2 {
margin-left: 0.5rem;
}
.ml3 {
margin-left: 1rem;
}
.ml4 {
margin-left: 2rem;
}
.ml5 {
margin-left: 4rem;
}
.ml6 {
margin-left: 8rem;
}
.ml7 {
margin-left: 16rem;
}
.mr0 {
margin-right: 0;
}
.mr1 {
margin-right: 0.25rem;
}
.mr2 {
margin-right: 0.5rem;
}
.mr3 {
margin-right: 1rem;
}
.mr4 {
margin-right: 2rem;
}
.mr5 {
margin-right: 4rem;
}
.mr6 {
margin-right: 8rem;
}
.mr7 {
margin-right: 16rem;
}
.mb0 {
margin-bottom: 0;
}
.mb1 {
margin-bottom: 0.25rem;
}
.mb2 {
margin-bottom: 0.5rem;
}
.mb3 {
margin-bottom: 1rem;
}
.mb4 {
margin-bottom: 2rem;
}
.mb4-1 {
margin-bottom: 3rem;
}
.mb5 {
margin-bottom: 4rem;
}
.mb6 {
margin-bottom: 8rem;
}
.mb7 {
margin-bottom: 16rem;
}
.mt0 {
margin-top: 0;
}
.mt1 {
margin-top: 0.25rem;
}
.mt2 {
margin-top: 0.5rem;
}
.mt3 {
margin-top: 1rem;
}
.mt4 {
margin-top: 2rem;
}
.mt4-1 {
margin-top: 3rem;
}
.mt5 {
margin-top: 4rem;
}
.mt6 {
margin-top: 8rem;
}
.mt7 {
margin-top: 16rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.mv1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6 {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7 {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0 {
margin-left: 0;
margin-right: 0;
}
.mh1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3 {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4 {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5 {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6 {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7 {
margin-left: 16rem;
margin-right: 16rem;
}
@media screen and (min-width: 30em) {
.pa0-ns {
padding: 0;
}
.pa1-ns {
padding: 0.25rem;
}
.pa2-ns {
padding: 0.5rem;
}
.pa3-ns {
padding: 1rem;
}
.pa4-ns {
padding: 2rem;
}
.pa5-ns {
padding: 4rem;
}
.pa6-ns {
padding: 8rem;
}
.pa7-ns {
padding: 16rem;
}
.pl0-ns {
padding-left: 0;
}
.pl1-ns {
padding-left: 0.25rem;
}
.pl2-ns {
padding-left: 0.5rem;
}
.pl3-ns {
padding-left: 1rem;
}
.pl4-ns {
padding-left: 2rem;
}
.pl5-ns {
padding-left: 4rem;
}
.pl6-ns {
padding-left: 8rem;
}
.pl7-ns {
padding-left: 16rem;
}
.pr0-ns {
padding-right: 0;
}
.pr1-ns {
padding-right: 0.25rem;
}
.pr2-ns {
padding-right: 0.5rem;
}
.pr3-ns {
padding-right: 1rem;
}
.pr4-ns {
padding-right: 2rem;
}
.pr5-ns {
padding-right: 4rem;
}
.pr6-ns {
padding-right: 8rem;
}
.pr7-ns {
padding-right: 16rem;
}
.pb0-ns {
padding-bottom: 0;
}
.pb1-ns {
padding-bottom: 0.25rem;
}
.pb2-ns {
padding-bottom: 0.5rem;
}
.pb3-ns {
padding-bottom: 1rem;
}
.pb4-ns {
padding-bottom: 2rem;
}
.pb5-ns {
padding-bottom: 4rem;
}
.pb6-ns {
padding-bottom: 8rem;
}
.pb7-ns {
padding-bottom: 16rem;
}
.pt0-ns {
padding-top: 0;
}
.pt1-ns {
padding-top: 0.25rem;
}
.pt2-ns {
padding-top: 0.5rem;
}
.pt3-ns {
padding-top: 1rem;
}
.pt4-ns {
padding-top: 2rem;
}
.pt5-ns {
padding-top: 4rem;
}
.pt6-ns {
padding-top: 8rem;
}
.pt7-ns {
padding-top: 16rem;
}
.pv0-ns {
padding-top: 0;
padding-bottom: 0;
}
.pv1-ns {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-ns {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-ns {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-ns {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-ns {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-ns {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-ns {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-ns {
padding-left: 0;
padding-right: 0;
}
.ph1-ns {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-ns {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-ns {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-ns {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-ns {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-ns {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-ns {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-ns {
margin: 0;
}
.ma1-ns {
margin: 0.25rem;
}
.ma2-ns {
margin: 0.5rem;
}
.ma3-ns {
margin: 1rem;
}
.ma4-ns {
margin: 2rem;
}
.ma5-ns {
margin: 4rem;
}
.ma6-ns {
margin: 8rem;
}
.ma7-ns {
margin: 16rem;
}
.ml0-ns {
margin-left: 0;
}
.ml1-ns {
margin-left: 0.25rem;
}
.ml2-ns {
margin-left: 0.5rem;
}
.ml3-ns {
margin-left: 1rem;
}
.ml4-ns {
margin-left: 2rem;
}
.ml5-ns {
margin-left: 4rem;
}
.ml6-ns {
margin-left: 8rem;
}
.ml7-ns {
margin-left: 16rem;
}
.mr0-ns {
margin-right: 0;
}
.mr1-ns {
margin-right: 0.25rem;
}
.mr2-ns {
margin-right: 0.5rem;
}
.mr3-ns {
margin-right: 1rem;
}
.mr4-ns {
margin-right: 2rem;
}
.mr5-ns {
margin-right: 4rem;
}
.mr6-ns {
margin-right: 8rem;
}
.mr7-ns {
margin-right: 16rem;
}
.mb0-ns {
margin-bottom: 0;
}
.mb1-ns {
margin-bottom: 0.25rem;
}
.mb2-ns {
margin-bottom: 0.5rem;
}
.mb3-ns {
margin-bottom: 1rem;
}
.mb4-ns {
margin-bottom: 2rem;
}
.mb5-ns {
margin-bottom: 4rem;
}
.mb6-ns {
margin-bottom: 8rem;
}
.mb7-ns {
margin-bottom: 16rem;
}
.mt0-ns {
margin-top: 0;
}
.mt1-ns {
margin-top: 0.25rem;
}
.mt2-ns {
margin-top: 0.5rem;
}
.mt3-ns {
margin-top: 1rem;
}
.mt4-ns {
margin-top: 2rem;
}
.mt5-ns {
margin-top: 4rem;
}
.mt6-ns {
margin-top: 8rem;
}
.mt7-ns {
margin-top: 16rem;
}
.mv0-ns {
margin-top: 0;
margin-bottom: 0;
}
.mv1-ns {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-ns {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-ns {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-ns {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-ns {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-ns {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-ns {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-ns {
margin-left: 0;
margin-right: 0;
}
.mh1-ns {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-ns {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-ns {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-ns {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-ns {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-ns {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-ns {
margin-left: 16rem;
margin-right: 16rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.pa0-m {
padding: 0;
}
.pa1-m {
padding: 0.25rem;
}
.pa2-m {
padding: 0.5rem;
}
.pa3-m {
padding: 1rem;
}
.pa4-m {
padding: 2rem;
}
.pa5-m {
padding: 4rem;
}
.pa6-m {
padding: 8rem;
}
.pa7-m {
padding: 16rem;
}
.pl0-m {
padding-left: 0;
}
.pl1-m {
padding-left: 0.25rem;
}
.pl2-m {
padding-left: 0.5rem;
}
.pl3-m {
padding-left: 1rem;
}
.pl4-m {
padding-left: 2rem;
}
.pl5-m {
padding-left: 4rem;
}
.pl6-m {
padding-left: 8rem;
}
.pl7-m {
padding-left: 16rem;
}
.pr0-m {
padding-right: 0;
}
.pr1-m {
padding-right: 0.25rem;
}
.pr2-m {
padding-right: 0.5rem;
}
.pr3-m {
padding-right: 1rem;
}
.pr4-m {
padding-right: 2rem;
}
.pr5-m {
padding-right: 4rem;
}
.pr6-m {
padding-right: 8rem;
}
.pr7-m {
padding-right: 16rem;
}
.pb0-m {
padding-bottom: 0;
}
.pb1-m {
padding-bottom: 0.25rem;
}
.pb2-m {
padding-bottom: 0.5rem;
}
.pb3-m {
padding-bottom: 1rem;
}
.pb4-m {
padding-bottom: 2rem;
}
.pb5-m {
padding-bottom: 4rem;
}
.pb6-m {
padding-bottom: 8rem;
}
.pb7-m {
padding-bottom: 16rem;
}
.pt0-m {
padding-top: 0;
}
.pt1-m {
padding-top: 0.25rem;
}
.pt2-m {
padding-top: 0.5rem;
}
.pt3-m {
padding-top: 1rem;
}
.pt4-m {
padding-top: 2rem;
}
.pt5-m {
padding-top: 4rem;
}
.pt6-m {
padding-top: 8rem;
}
.pt7-m {
padding-top: 16rem;
}
.pv0-m {
padding-top: 0;
padding-bottom: 0;
}
.pv1-m {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-m {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-m {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-m {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-m {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-m {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-m {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-m {
padding-left: 0;
padding-right: 0;
}
.ph1-m {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-m {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-m {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-m {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-m {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-m {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-m {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-m {
margin: 0;
}
.ma1-m {
margin: 0.25rem;
}
.ma2-m {
margin: 0.5rem;
}
.ma3-m {
margin: 1rem;
}
.ma4-m {
margin: 2rem;
}
.ma5-m {
margin: 4rem;
}
.ma6-m {
margin: 8rem;
}
.ma7-m {
margin: 16rem;
}
.ml0-m {
margin-left: 0;
}
.ml1-m {
margin-left: 0.25rem;
}
.ml2-m {
margin-left: 0.5rem;
}
.ml3-m {
margin-left: 1rem;
}
.ml4-m {
margin-left: 2rem;
}
.ml5-m {
margin-left: 4rem;
}
.ml6-m {
margin-left: 8rem;
}
.ml7-m {
margin-left: 16rem;
}
.mr0-m {
margin-right: 0;
}
.mr1-m {
margin-right: 0.25rem;
}
.mr2-m {
margin-right: 0.5rem;
}
.mr3-m {
margin-right: 1rem;
}
.mr4-m {
margin-right: 2rem;
}
.mr5-m {
margin-right: 4rem;
}
.mr6-m {
margin-right: 8rem;
}
.mr7-m {
margin-right: 16rem;
}
.mb0-m {
margin-bottom: 0;
}
.mb1-m {
margin-bottom: 0.25rem;
}
.mb2-m {
margin-bottom: 0.5rem;
}
.mb3-m {
margin-bottom: 1rem;
}
.mb4-m {
margin-bottom: 2rem;
}
.mb5-m {
margin-bottom: 4rem;
}
.mb6-m {
margin-bottom: 8rem;
}
.mb7-m {
margin-bottom: 16rem;
}
.mt0-m {
margin-top: 0;
}
.mt1-m {
margin-top: 0.25rem;
}
.mt2-m {
margin-top: 0.5rem;
}
.mt3-m {
margin-top: 1rem;
}
.mt4-m {
margin-top: 2rem;
}
.mt5-m {
margin-top: 4rem;
}
.mt6-m {
margin-top: 8rem;
}
.mt7-m {
margin-top: 16rem;
}
.mv0-m {
margin-top: 0;
margin-bottom: 0;
}
.mv1-m {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-m {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-m {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-m {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-m {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-m {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-m {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-m {
margin-left: 0;
margin-right: 0;
}
.mh1-m {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-m {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-m {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-m {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-m {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-m {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-m {
margin-left: 16rem;
margin-right: 16rem;
}
}
@media screen and (min-width: 60em) {
.pa0-l {
padding: 0;
}
.pa1-l {
padding: 0.25rem;
}
.pa2-l {
padding: 0.5rem;
}
.pa3-l {
padding: 1rem;
}
.pa4-l {
padding: 2rem;
}
.pa5-l {
padding: 4rem;
}
.pa6-l {
padding: 8rem;
}
.pa7-l {
padding: 16rem;
}
.pl0-l {
padding-left: 0;
}
.pl1-l {
padding-left: 0.25rem;
}
.pl2-l {
padding-left: 0.5rem;
}
.pl3-l {
padding-left: 1rem;
}
.pl4-l {
padding-left: 2rem;
}
.pl5-l {
padding-left: 4rem;
}
.pl6-l {
padding-left: 8rem;
}
.pl7-l {
padding-left: 16rem;
}
.pr0-l {
padding-right: 0;
}
.pr1-l {
padding-right: 0.25rem;
}
.pr2-l {
padding-right: 0.5rem;
}
.pr3-l {
padding-right: 1rem;
}
.pr4-l {
padding-right: 2rem;
}
.pr5-l {
padding-right: 4rem;
}
.pr6-l {
padding-right: 8rem;
}
.pr7-l {
padding-right: 16rem;
}
.pb0-l {
padding-bottom: 0;
}
.pb1-l {
padding-bottom: 0.25rem;
}
.pb2-l {
padding-bottom: 0.5rem;
}
.pb3-l {
padding-bottom: 1rem;
}
.pb4-l {
padding-bottom: 2rem;
}
.pb5-l {
padding-bottom: 4rem;
}
.pb6-l {
padding-bottom: 8rem;
}
.pb7-l {
padding-bottom: 16rem;
}
.pt0-l {
padding-top: 0;
}
.pt1-l {
padding-top: 0.25rem;
}
.pt2-l {
padding-top: 0.5rem;
}
.pt3-l {
padding-top: 1rem;
}
.pt4-l {
padding-top: 2rem;
}
.pt5-l {
padding-top: 4rem;
}
.pt6-l {
padding-top: 8rem;
}
.pt7-l {
padding-top: 16rem;
}
.pv0-l {
padding-top: 0;
padding-bottom: 0;
}
.pv1-l {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pv2-l {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pv3-l {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pv4-l {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pv5-l {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pv6-l {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pv7-l {
padding-top: 16rem;
padding-bottom: 16rem;
}
.ph0-l {
padding-left: 0;
padding-right: 0;
}
.ph1-l {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.ph2-l {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ph3-l {
padding-left: 1rem;
padding-right: 1rem;
}
.ph4-l {
padding-left: 2rem;
padding-right: 2rem;
}
.ph5-l {
padding-left: 4rem;
padding-right: 4rem;
}
.ph6-l {
padding-left: 8rem;
padding-right: 8rem;
}
.ph7-l {
padding-left: 16rem;
padding-right: 16rem;
}
.ma0-l {
margin: 0;
}
.ma1-l {
margin: 0.25rem;
}
.ma2-l {
margin: 0.5rem;
}
.ma3-l {
margin: 1rem;
}
.ma4-l {
margin: 2rem;
}
.ma5-l {
margin: 4rem;
}
.ma6-l {
margin: 8rem;
}
.ma7-l {
margin: 16rem;
}
.ml0-l {
margin-left: 0;
}
.ml1-l {
margin-left: 0.25rem;
}
.ml2-l {
margin-left: 0.5rem;
}
.ml3-l {
margin-left: 1rem;
}
.ml4-l {
margin-left: 2rem;
}
.ml5-l {
margin-left: 4rem;
}
.ml6-l {
margin-left: 8rem;
}
.ml7-l {
margin-left: 16rem;
}
.mr0-l {
margin-right: 0;
}
.mr1-l {
margin-right: 0.25rem;
}
.mr2-l {
margin-right: 0.5rem;
}
.mr3-l {
margin-right: 1rem;
}
.mr4-l {
margin-right: 2rem;
}
.mr5-l {
margin-right: 4rem;
}
.mr6-l {
margin-right: 8rem;
}
.mr7-l {
margin-right: 16rem;
}
.mb0-l {
margin-bottom: 0;
}
.mb1-l {
margin-bottom: 0.25rem;
}
.mb2-l {
margin-bottom: 0.5rem;
}
.mb3-l {
margin-bottom: 1rem;
}
.mb4-l {
margin-bottom: 2rem;
}
.mb5-l {
margin-bottom: 4rem;
}
.mb6-l {
margin-bottom: 8rem;
}
.mb7-l {
margin-bottom: 16rem;
}
.mt0-l {
margin-top: 0;
}
.mt1-l {
margin-top: 0.25rem;
}
.mt2-l {
margin-top: 0.5rem;
}
.mt3-l {
margin-top: 1rem;
}
.mt4-l {
margin-top: 2rem;
}
.mt5-l {
margin-top: 4rem;
}
.mt6-l {
margin-top: 8rem;
}
.mt7-l {
margin-top: 16rem;
}
.mv0-l {
margin-top: 0;
margin-bottom: 0;
}
.mv1-l {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mv2-l {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mv3-l {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mv4-l {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mv5-l {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mv6-l {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mv7-l {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mh0-l {
margin-left: 0;
margin-right: 0;
}
.mh1-l {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mh2-l {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mh3-l {
margin-left: 1rem;
margin-right: 1rem;
}
.mh4-l {
margin-left: 2rem;
margin-right: 2rem;
}
.mh5-l {
margin-left: 4rem;
margin-right: 4rem;
}
.mh6-l {
margin-left: 8rem;
margin-right: 8rem;
}
.mh7-l {
margin-left: 16rem;
margin-right: 16rem;
}
}
/*
NEGATIVE MARGINS
Base:
n = negative
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.na1 {
margin: -0.25rem;
}
.na2 {
margin: -0.5rem;
}
.na3 {
margin: -1rem;
}
.na4 {
margin: -2rem;
}
.na5 {
margin: -4rem;
}
.na6 {
margin: -8rem;
}
.na7 {
margin: -16rem;
}
.nl1 {
margin-left: -0.25rem;
}
.nl2 {
margin-left: -0.5rem;
}
.nl3 {
margin-left: -1rem;
}
.nl4 {
margin-left: -2rem;
}
.nl5 {
margin-left: -4rem;
}
.nl6 {
margin-left: -8rem;
}
.nl7 {
margin-left: -16rem;
}
.nr1 {
margin-right: -0.25rem;
}
.nr2 {
margin-right: -0.5rem;
}
.nr3 {
margin-right: -1rem;
}
.nr4 {
margin-right: -2rem;
}
.nr5 {
margin-right: -4rem;
}
.nr6 {
margin-right: -8rem;
}
.nr7 {
margin-right: -16rem;
}
.nb1 {
margin-bottom: -0.25rem;
}
.nb2 {
margin-bottom: -0.5rem;
}
.nb3 {
margin-bottom: -1rem;
}
.nb4 {
margin-bottom: -2rem;
}
.nb5 {
margin-bottom: -4rem;
}
.nb6 {
margin-bottom: -8rem;
}
.nb7 {
margin-bottom: -16rem;
}
.nt1 {
margin-top: -0.25rem;
}
.nt2 {
margin-top: -0.5rem;
}
.nt3 {
margin-top: -1rem;
}
.nt4 {
margin-top: -2rem;
}
.nt5 {
margin-top: -4rem;
}
.nt6 {
margin-top: -8rem;
}
.nt7 {
margin-top: -16rem;
}
@media screen and (min-width: 30em) {
.na1-ns {
margin: -0.25rem;
}
.na2-ns {
margin: -0.5rem;
}
.na3-ns {
margin: -1rem;
}
.na4-ns {
margin: -2rem;
}
.na5-ns {
margin: -4rem;
}
.na6-ns {
margin: -8rem;
}
.na7-ns {
margin: -16rem;
}
.nl1-ns {
margin-left: -0.25rem;
}
.nl2-ns {
margin-left: -0.5rem;
}
.nl3-ns {
margin-left: -1rem;
}
.nl4-ns {
margin-left: -2rem;
}
.nl5-ns {
margin-left: -4rem;
}
.nl6-ns {
margin-left: -8rem;
}
.nl7-ns {
margin-left: -16rem;
}
.nr1-ns {
margin-right: -0.25rem;
}
.nr2-ns {
margin-right: -0.5rem;
}
.nr3-ns {
margin-right: -1rem;
}
.nr4-ns {
margin-right: -2rem;
}
.nr5-ns {
margin-right: -4rem;
}
.nr6-ns {
margin-right: -8rem;
}
.nr7-ns {
margin-right: -16rem;
}
.nb1-ns {
margin-bottom: -0.25rem;
}
.nb2-ns {
margin-bottom: -0.5rem;
}
.nb3-ns {
margin-bottom: -1rem;
}
.nb4-ns {
margin-bottom: -2rem;
}
.nb5-ns {
margin-bottom: -4rem;
}
.nb6-ns {
margin-bottom: -8rem;
}
.nb7-ns {
margin-bottom: -16rem;
}
.nt1-ns {
margin-top: -0.25rem;
}
.nt2-ns {
margin-top: -0.5rem;
}
.nt3-ns {
margin-top: -1rem;
}
.nt4-ns {
margin-top: -2rem;
}
.nt5-ns {
margin-top: -4rem;
}
.nt6-ns {
margin-top: -8rem;
}
.nt7-ns {
margin-top: -16rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.na1-m {
margin: -0.25rem;
}
.na2-m {
margin: -0.5rem;
}
.na3-m {
margin: -1rem;
}
.na4-m {
margin: -2rem;
}
.na5-m {
margin: -4rem;
}
.na6-m {
margin: -8rem;
}
.na7-m {
margin: -16rem;
}
.nl1-m {
margin-left: -0.25rem;
}
.nl2-m {
margin-left: -0.5rem;
}
.nl3-m {
margin-left: -1rem;
}
.nl4-m {
margin-left: -2rem;
}
.nl5-m {
margin-left: -4rem;
}
.nl6-m {
margin-left: -8rem;
}
.nl7-m {
margin-left: -16rem;
}
.nr1-m {
margin-right: -0.25rem;
}
.nr2-m {
margin-right: -0.5rem;
}
.nr3-m {
margin-right: -1rem;
}
.nr4-m {
margin-right: -2rem;
}
.nr5-m {
margin-right: -4rem;
}
.nr6-m {
margin-right: -8rem;
}
.nr7-m {
margin-right: -16rem;
}
.nb1-m {
margin-bottom: -0.25rem;
}
.nb2-m {
margin-bottom: -0.5rem;
}
.nb3-m {
margin-bottom: -1rem;
}
.nb4-m {
margin-bottom: -2rem;
}
.nb5-m {
margin-bottom: -4rem;
}
.nb6-m {
margin-bottom: -8rem;
}
.nb7-m {
margin-bottom: -16rem;
}
.nt1-m {
margin-top: -0.25rem;
}
.nt2-m {
margin-top: -0.5rem;
}
.nt3-m {
margin-top: -1rem;
}
.nt4-m {
margin-top: -2rem;
}
.nt5-m {
margin-top: -4rem;
}
.nt6-m {
margin-top: -8rem;
}
.nt7-m {
margin-top: -16rem;
}
}
@media screen and (min-width: 60em) {
.na1-l {
margin: -0.25rem;
}
.na2-l {
margin: -0.5rem;
}
.na3-l {
margin: -1rem;
}
.na4-l {
margin: -2rem;
}
.na5-l {
margin: -4rem;
}
.na6-l {
margin: -8rem;
}
.na7-l {
margin: -16rem;
}
.nl1-l {
margin-left: -0.25rem;
}
.nl2-l {
margin-left: -0.5rem;
}
.nl3-l {
margin-left: -1rem;
}
.nl4-l {
margin-left: -2rem;
}
.nl5-l {
margin-left: -4rem;
}
.nl6-l {
margin-left: -8rem;
}
.nl7-l {
margin-left: -16rem;
}
.nr1-l {
margin-right: -0.25rem;
}
.nr2-l {
margin-right: -0.5rem;
}
.nr3-l {
margin-right: -1rem;
}
.nr4-l {
margin-right: -2rem;
}
.nr5-l {
margin-right: -4rem;
}
.nr6-l {
margin-right: -8rem;
}
.nr7-l {
margin-right: -16rem;
}
.nb1-l {
margin-bottom: -0.25rem;
}
.nb2-l {
margin-bottom: -0.5rem;
}
.nb3-l {
margin-bottom: -1rem;
}
.nb4-l {
margin-bottom: -2rem;
}
.nb5-l {
margin-bottom: -4rem;
}
.nb6-l {
margin-bottom: -8rem;
}
.nb7-l {
margin-bottom: -16rem;
}
.nt1-l {
margin-top: -0.25rem;
}
.nt2-l {
margin-top: -0.5rem;
}
.nt3-l {
margin-top: -1rem;
}
.nt4-l {
margin-top: -2rem;
}
.nt5-l {
margin-top: -4rem;
}
.nt6-l {
margin-top: -8rem;
}
.nt7-l {
margin-top: -16rem;
}
}
/*
TEXT DECORATION
Docs: http://tachyons.io/docs/typography/text-decoration/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.strike {
text-decoration: line-through;
}
.underline {
text-decoration: underline;
}
.no-underline {
text-decoration: none;
}
@media screen and (min-width: 30em) {
.strike-ns {
text-decoration: line-through;
}
.underline-ns {
text-decoration: underline;
}
.no-underline-ns {
text-decoration: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.strike-m {
text-decoration: line-through;
}
.underline-m {
text-decoration: underline;
}
.no-underline-m {
text-decoration: none;
}
}
@media screen and (min-width: 60em) {
.strike-l {
text-decoration: line-through;
}
.underline-l {
text-decoration: underline;
}
.no-underline-l {
text-decoration: none;
}
}
/*
TEXT ALIGN
Docs: http://tachyons.io/docs/typography/text-align/
Base
t = text-align
Modifiers
l = left
r = right
c = center
j = justify
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tl {
text-align: left;
}
.tr {
text-align: right;
}
.tc {
text-align: center;
}
.tj {
text-align: justify;
}
@media screen and (min-width: 30em) {
.tl-ns {
text-align: left;
}
.tr-ns {
text-align: right;
}
.tc-ns {
text-align: center;
}
.tj-ns {
text-align: justify;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.tl-m {
text-align: left;
}
.tr-m {
text-align: right;
}
.tc-m {
text-align: center;
}
.tj-m {
text-align: justify;
}
}
@media screen and (min-width: 60em) {
.tl-l {
text-align: left;
}
.tr-l {
text-align: right;
}
.tc-l {
text-align: center;
}
.tj-l {
text-align: justify;
}
}
/*
TEXT TRANSFORM
Docs: http://tachyons.io/docs/typography/text-transform/
Base:
tt = text-transform
Modifiers
c = capitalize
l = lowercase
u = uppercase
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ttc {
text-transform: capitalize;
}
.ttl {
text-transform: lowercase;
}
.ttu {
text-transform: uppercase;
}
.ttn {
text-transform: none;
}
@media screen and (min-width: 30em) {
.ttc-ns {
text-transform: capitalize;
}
.ttl-ns {
text-transform: lowercase;
}
.ttu-ns {
text-transform: uppercase;
}
.ttn-ns {
text-transform: none;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ttc-m {
text-transform: capitalize;
}
.ttl-m {
text-transform: lowercase;
}
.ttu-m {
text-transform: uppercase;
}
.ttn-m {
text-transform: none;
}
}
@media screen and (min-width: 60em) {
.ttc-l {
text-transform: capitalize;
}
.ttl-l {
text-transform: lowercase;
}
.ttu-l {
text-transform: uppercase;
}
.ttn-l {
text-transform: none;
}
}
/*
TYPE SCALE
Docs: http://tachyons.io/docs/typography/scale/
Base:
f = font-size
Modifiers
1 = 1st step in size scale
2 = 2nd step in size scale
3 = 3rd step in size scale
4 = 4th step in size scale
5 = 5th step in size scale
6 = 6th step in size scale
7 = 7th step in size scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
* For Hero/Marketing Titles
*
* These generally are too large for mobile
* so be careful using them on smaller screens.
* */
.f-6,
.f-headline {
font-size: 6rem;
}
.f-5,
.f-subheadline {
font-size: 5rem;
}
/* Type Scale */
.f1 {
font-size: 3rem;
}
.f2 {
font-size: 2.25rem;
}
.f3 {
font-size: 1.5rem;
}
.f4 {
font-size: 1.25rem;
}
.f5 {
font-size: 1rem;
}
.f6 {
font-size: .875rem;
}
.f7 {
font-size: .75rem;
}
/* Small and hard to read for many people so use with extreme caution */
@media screen and (min-width: 30em) {
.f-6-ns,
.f-headline-ns {
font-size: 6rem;
}
.f-5-ns,
.f-subheadline-ns {
font-size: 5rem;
}
.f1-ns {
font-size: 3rem;
}
.f2-ns {
font-size: 2.25rem;
}
.f3-ns {
font-size: 1.5rem;
}
.f4-ns {
font-size: 1.25rem;
}
.f5-ns {
font-size: 1rem;
}
.f6-ns {
font-size: .875rem;
}
.f7-ns {
font-size: .75rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.f-6-m,
.f-headline-m {
font-size: 6rem;
}
.f-5-m,
.f-subheadline-m {
font-size: 5rem;
}
.f1-m {
font-size: 3rem;
}
.f2-m {
font-size: 2.25rem;
}
.f3-m {
font-size: 1.5rem;
}
.f4-m {
font-size: 1.25rem;
}
.f5-m {
font-size: 1rem;
}
.f6-m {
font-size: .875rem;
}
.f7-m {
font-size: .75rem;
}
}
@media screen and (min-width: 60em) {
.f-6-l,
.f-headline-l {
font-size: 6rem;
}
.f-5-l,
.f-subheadline-l {
font-size: 5rem;
}
.f1-l {
font-size: 3rem;
}
.f2-l {
font-size: 2.25rem;
}
.f3-l {
font-size: 1.5rem;
}
.f4-l {
font-size: 1.25rem;
}
.f5-l {
font-size: 1rem;
}
.f6-l {
font-size: .875rem;
}
.f7-l {
font-size: .75rem;
}
}
/*
UTILITIES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Equivalent to .overflow-y-scroll */
.overflow-container {
overflow-y: scroll;
}
.center {
margin-right: auto;
margin-left: auto;
}
.mr-auto {
margin-right: auto;
}
.ml-auto {
margin-left: auto;
}
@media screen and (min-width: 30em) {
.center-ns {
margin-right: auto;
margin-left: auto;
}
.mr-auto-ns {
margin-right: auto;
}
.ml-auto-ns {
margin-left: auto;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.center-m {
margin-right: auto;
margin-left: auto;
}
.mr-auto-m {
margin-right: auto;
}
.ml-auto-m {
margin-left: auto;
}
}
@media screen and (min-width: 60em) {
.center-l {
margin-right: auto;
margin-left: auto;
}
.mr-auto-l {
margin-right: auto;
}
.ml-auto-l {
margin-left: auto;
}
}
.button-no-style {
border: 0;
}
/*
WHITE SPACE
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ws-normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
@media screen and (min-width: 30em) {
.ws-normal-ns {
white-space: normal;
}
.nowrap-ns {
white-space: nowrap;
}
.pre-ns {
white-space: pre;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ws-normal-m {
white-space: normal;
}
.nowrap-m {
white-space: nowrap;
}
.pre-m {
white-space: pre;
}
}
@media screen and (min-width: 60em) {
.ws-normal-l {
white-space: normal;
}
.nowrap-l {
white-space: nowrap;
}
.pre-l {
white-space: pre;
}
}
/*
VERTICAL ALIGN
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.v-base {
vertical-align: baseline;
}
.v-mid {
vertical-align: middle;
}
.v-top {
vertical-align: top;
}
.v-btm {
vertical-align: bottom;
}
@media screen and (min-width: 30em) {
.v-base-ns {
vertical-align: baseline;
}
.v-mid-ns {
vertical-align: middle;
}
.v-top-ns {
vertical-align: top;
}
.v-btm-ns {
vertical-align: bottom;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.v-base-m {
vertical-align: baseline;
}
.v-mid-m {
vertical-align: middle;
}
.v-top-m {
vertical-align: top;
}
.v-btm-m {
vertical-align: bottom;
}
}
@media screen and (min-width: 60em) {
.v-base-l {
vertical-align: baseline;
}
.v-mid-l {
vertical-align: middle;
}
.v-top-l {
vertical-align: top;
}
.v-btm-l {
vertical-align: bottom;
}
}
/*
Z-INDEX
Base
z = z-index
Modifiers
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
-3 = literal value 3
-4 = literal value 4
-5 = literal value 5
-999 = literal value 999
-9999 = literal value 9999
-max = largest accepted z-index value as integer
-inherit = string value inherit
-initial = string value initial
-unset = string value unset
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z-0 {
z-index: 0;
}
.z-1 {
z-index: 1;
}
.z-2 {
z-index: 2;
}
.z-3 {
z-index: 3;
}
.z-4 {
z-index: 4;
}
.z-5 {
z-index: 5;
}
.z-999 {
z-index: 999;
}
.z-9999 {
z-index: 9999;
}
.z-max {
z-index: 2147483647;
}
.z-inherit {
z-index: inherit;
}
.z-initial {
z-index: initial;
}
.z-unset {
z-index: unset;
}
.webview-wrapper {
position: fixed;
width: 100%;
height: 100%;
z-index: 10;
top: 0px;
}
.webview-wrapper #webview {
border: none;
width: 100%;
height: 70%;
border-radius: 7px 7px 0 0;
position: absolute;
bottom: 0%;
background-color: var(--color-surface-1, #f6f6f6);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.webview-wrapper #webview .webview-header {
width: 100%;
min-height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.8);
box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.8);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.webview-wrapper #webview .webview-header img.preview {
width: 35px;
height: 35px;
}
.webview-wrapper #webview .webview-header img.icon-close {
width: 16px;
height: 16px;
cursor: pointer;
}
.webview-wrapper #webview .webview-header .weblinkTitle {
text-align: center;
color: #52636C;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.webview-wrapper #webview .webview-header i {
cursor: pointer;
color: #A8BFC4;
}
.webview-wrapper #webview .iframe-wrapper {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.webview-wrapper .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
visibility: visible;
background-color: rgba(30, 30, 30, 0.75);
}
.webview-wrapper .blip-application-loading-container {
border-radius: 7px 7px 0 0;
}
.webview-wrapper .blip-application-loading-container .loading-header, .webview-wrapper .blip-application-loading-container img {
height: 40px;
}
.webview-wrapper #webview-iframe {
border: 0px;
width: 100%;
height: 100%;
}
@charset "UTF-8";
/*!
* animate.css -https://daneden.github.io/animate.css/
* Version - 3.7.2
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2019 Daniel Eden
*/
@-webkit-keyframes bounce {
from,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
@keyframes bounce {
from,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.heartBeat {
-webkit-animation-name: heartBeat;
animation-name: heartBeat;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
.bounceOut {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: hinge;
animation-name: hinge;
}
@-webkit-keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.jackInTheBox {
-webkit-animation-name: jackInTheBox;
animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@media (print), (prefers-reduced-motion: reduce) {
.animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
* Remove default margin.
*/
body {
margin: 0; }
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block; }
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none; }
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold; }
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic; }
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000; }
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0; }
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden; }
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px; }
/**
* Address differences between Firefox and other browsers.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0; }
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto; }
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em; }
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */ }
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal; }
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto; }
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold; }
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
td,
th {
padding: 0; }
.ss-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left; }
.ss-content {
height: 100%;
width: calc(100% + 18px);
padding: 0 0 0 0;
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.ss-content.rtl {
width: calc(100% + 18px);
right: auto; }
.ss-scroll {
position: relative;
background: rgba(0, 0, 0, 0.3);
width: 9px;
border-radius: 4px;
top: 0;
z-index: 2;
cursor: pointer;
-webkit-transition: opacity 0.25s linear;
transition: opacity 0.25s linear; }
.ss-hidden {
display: none; }
.ss-grabbed {
-o-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none; }
.color-primary {
color: var(--color-brand, #0096fa); }
.color-primary-dark {
color: var(--color-brand, #0096fa); }
.white {
color: var(--color-surface-1, #f6f6f6); }
.gray-1 {
color: var(--color-surface-2, #e0e0e0); }
.gray-2 {
color: var(--color-surface-3, #cfcfcf); }
.gray-3 {
color: var(--color-content-disable, #636363); }
body {
background: var(--color-surface-2, #e0e0e0); }
button:focus {
outline: 0; }
.fade-enter-active, .fade-leave-active {
-webkit-transition: opacity .5s;
transition: opacity .5s; }
.fade-enter, .fade-leave-to {
opacity: 0; }
/*
CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
/*
ASPECT RATIOS
*/
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
* Make sure there are no height and width attributes on the embedded media.
* Adapted from: https://github.com/suitcss/components-flex-embed
*
* Example:
*
*
*
*
*
* */
.aspect-ratio {
height: 0;
position: relative; }
.aspect-ratio--16x9 {
padding-bottom: 56.25%; }
.aspect-ratio--9x16 {
padding-bottom: 177.77%; }
.aspect-ratio--4x3 {
padding-bottom: 75%; }
.aspect-ratio--3x4 {
padding-bottom: 133.33%; }
.aspect-ratio--6x4 {
padding-bottom: 66.6%; }
.aspect-ratio--4x6 {
padding-bottom: 150%; }
.aspect-ratio--8x5 {
padding-bottom: 62.5%; }
.aspect-ratio--5x8 {
padding-bottom: 160%; }
.aspect-ratio--7x5 {
padding-bottom: 71.42%; }
.aspect-ratio--5x7 {
padding-bottom: 140%; }
.aspect-ratio--1x1 {
padding-bottom: 100%; }
.aspect-ratio--object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; }
@media screen and (min-width: 30em) {
.aspect-ratio-ns {
height: 0;
position: relative; }
.aspect-ratio--16x9-ns {
padding-bottom: 56.25%; }
.aspect-ratio--9x16-ns {
padding-bottom: 177.77%; }
.aspect-ratio--4x3-ns {
padding-bottom: 75%; }
.aspect-ratio--3x4-ns {
padding-bottom: 133.33%; }
.aspect-ratio--6x4-ns {
padding-bottom: 66.6%; }
.aspect-ratio--4x6-ns {
padding-bottom: 150%; }
.aspect-ratio--8x5-ns {
padding-bottom: 62.5%; }
.aspect-ratio--5x8-ns {
padding-bottom: 160%; }
.aspect-ratio--7x5-ns {
padding-bottom: 71.42%; }
.aspect-ratio--5x7-ns {
padding-bottom: 140%; }
.aspect-ratio--1x1-ns {
padding-bottom: 100%; }
.aspect-ratio--object-ns {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.aspect-ratio-m {
height: 0;
position: relative; }
.aspect-ratio--16x9-m {
padding-bottom: 56.25%; }
.aspect-ratio--9x16-m {
padding-bottom: 177.77%; }
.aspect-ratio--4x3-m {
padding-bottom: 75%; }
.aspect-ratio--3x4-m {
padding-bottom: 133.33%; }
.aspect-ratio--6x4-m {
padding-bottom: 66.6%; }
.aspect-ratio--4x6-m {
padding-bottom: 150%; }
.aspect-ratio--8x5-m {
padding-bottom: 62.5%; }
.aspect-ratio--5x8-m {
padding-bottom: 160%; }
.aspect-ratio--7x5-m {
padding-bottom: 71.42%; }
.aspect-ratio--5x7-m {
padding-bottom: 140%; }
.aspect-ratio--1x1-m {
padding-bottom: 100%; }
.aspect-ratio--object-m {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; } }
@media screen and (min-width: 60em) {
.aspect-ratio-l {
height: 0;
position: relative; }
.aspect-ratio--16x9-l {
padding-bottom: 56.25%; }
.aspect-ratio--9x16-l {
padding-bottom: 177.77%; }
.aspect-ratio--4x3-l {
padding-bottom: 75%; }
.aspect-ratio--3x4-l {
padding-bottom: 133.33%; }
.aspect-ratio--6x4-l {
padding-bottom: 66.6%; }
.aspect-ratio--4x6-l {
padding-bottom: 150%; }
.aspect-ratio--8x5-l {
padding-bottom: 62.5%; }
.aspect-ratio--5x8-l {
padding-bottom: 160%; }
.aspect-ratio--7x5-l {
padding-bottom: 71.42%; }
.aspect-ratio--5x7-l {
padding-bottom: 140%; }
.aspect-ratio--1x1-l {
padding-bottom: 100%; }
.aspect-ratio--object-l {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; } }
/*
IMAGES
Docs: http://tachyons.io/docs/elements/images/
*/
/* Responsive images! */
img {
max-width: 100%; }
/*
BACKGROUND SIZE
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
Often used in combination with background image set as an inline style
on an html element.
*/
.cover {
background-size: cover !important; }
.contain {
background-size: contain !important; }
@media screen and (min-width: 30em) {
.cover-ns {
background-size: cover !important; }
.contain-ns {
background-size: contain !important; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.cover-m {
background-size: cover !important; }
.contain-m {
background-size: contain !important; } }
@media screen and (min-width: 60em) {
.cover-l {
background-size: cover !important; }
.contain-l {
background-size: contain !important; } }
/*
BACKGROUND POSITION
Base:
bg = background
Modifiers:
-center = center center
-top = top center
-right = center right
-bottom = bottom center
-left = center left
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bg-center {
background-repeat: no-repeat;
background-position: center center; }
.bg-top {
background-repeat: no-repeat;
background-position: top center; }
.bg-right {
background-repeat: no-repeat;
background-position: center right; }
.bg-bottom {
background-repeat: no-repeat;
background-position: bottom center; }
.bg-left {
background-repeat: no-repeat;
background-position: center left; }
@media screen and (min-width: 30em) {
.bg-center-ns {
background-repeat: no-repeat;
background-position: center center; }
.bg-top-ns {
background-repeat: no-repeat;
background-position: top center; }
.bg-right-ns {
background-repeat: no-repeat;
background-position: center right; }
.bg-bottom-ns {
background-repeat: no-repeat;
background-position: bottom center; }
.bg-left-ns {
background-repeat: no-repeat;
background-position: center left; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.bg-center-m {
background-repeat: no-repeat;
background-position: center center; }
.bg-top-m {
background-repeat: no-repeat;
background-position: top center; }
.bg-right-m {
background-repeat: no-repeat;
background-position: center right; }
.bg-bottom-m {
background-repeat: no-repeat;
background-position: bottom center; }
.bg-left-m {
background-repeat: no-repeat;
background-position: center left; } }
@media screen and (min-width: 60em) {
.bg-center-l {
background-repeat: no-repeat;
background-position: center center; }
.bg-top-l {
background-repeat: no-repeat;
background-position: top center; }
.bg-right-l {
background-repeat: no-repeat;
background-position: center right; }
.bg-bottom-l {
background-repeat: no-repeat;
background-position: bottom center; }
.bg-left-l {
background-repeat: no-repeat;
background-position: center left; } }
/*
OUTLINES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.outline {
outline: 1px solid; }
.outline-transparent {
outline: 1px solid transparent; }
.outline-0 {
outline: 0; }
@media screen and (min-width: 30em) {
.outline-ns {
outline: 1px solid; }
.outline-transparent-ns {
outline: 1px solid transparent; }
.outline-0-ns {
outline: 0; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.outline-m {
outline: 1px solid; }
.outline-transparent-m {
outline: 1px solid transparent; }
.outline-0-m {
outline: 0; } }
@media screen and (min-width: 60em) {
.outline-l {
outline: 1px solid; }
.outline-transparent-l {
outline: 1px solid transparent; }
.outline-0-l {
outline: 0; } }
/*
BORDERS
Docs: http://tachyons.io/docs/themes/borders/
Base:
b = border
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ba {
border-style: solid;
border-width: 1px; }
.bt {
border-top-style: solid;
border-top-width: 1px; }
.br {
border-right-style: solid;
border-right-width: 1px; }
.bb {
border-bottom-style: solid;
border-bottom-width: 1px; }
.bl {
border-left-style: solid;
border-left-width: 1px; }
.bn {
border-style: none;
border-width: 0; }
@media screen and (min-width: 30em) {
.ba-ns {
border-style: solid;
border-width: 1px; }
.bt-ns {
border-top-style: solid;
border-top-width: 1px; }
.br-ns {
border-right-style: solid;
border-right-width: 1px; }
.bb-ns {
border-bottom-style: solid;
border-bottom-width: 1px; }
.bl-ns {
border-left-style: solid;
border-left-width: 1px; }
.bn-ns {
border-style: none;
border-width: 0; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.ba-m {
border-style: solid;
border-width: 1px; }
.bt-m {
border-top-style: solid;
border-top-width: 1px; }
.br-m {
border-right-style: solid;
border-right-width: 1px; }
.bb-m {
border-bottom-style: solid;
border-bottom-width: 1px; }
.bl-m {
border-left-style: solid;
border-left-width: 1px; }
.bn-m {
border-style: none;
border-width: 0; } }
@media screen and (min-width: 60em) {
.ba-l {
border-style: solid;
border-width: 1px; }
.bt-l {
border-top-style: solid;
border-top-width: 1px; }
.br-l {
border-right-style: solid;
border-right-width: 1px; }
.bb-l {
border-bottom-style: solid;
border-bottom-width: 1px; }
.bl-l {
border-left-style: solid;
border-left-width: 1px; }
.bn-l {
border-style: none;
border-width: 0; } }
/*
BORDER RADIUS
Docs: http://tachyons.io/docs/themes/border-radius/
Base:
br = border-radius
Modifiers:
0 = 0/none
1 = 1st step in scale
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
Literal values:
-100 = 100%
-pill = 9999px
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.br0 {
border-radius: 0; }
.br1 {
border-radius: .125rem; }
.br2 {
border-radius: .25rem; }
.br3 {
border-radius: .5rem; }
.br4 {
border-radius: 1rem; }
.br-100 {
border-radius: 100%; }
.br-pill {
border-radius: 9999px; }
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.br--right {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.br--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
@media screen and (min-width: 30em) {
.br0-ns {
border-radius: 0; }
.br1-ns {
border-radius: .125rem; }
.br2-ns {
border-radius: .25rem; }
.br3-ns {
border-radius: .5rem; }
.br4-ns {
border-radius: 1rem; }
.br-100-ns {
border-radius: 100%; }
.br-pill-ns {
border-radius: 9999px; }
.br--bottom-ns {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.br--top-ns {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.br0-m {
border-radius: 0; }
.br1-m {
border-radius: .125rem; }
.br2-m {
border-radius: .25rem; }
.br3-m {
border-radius: .5rem; }
.br4-m {
border-radius: 1rem; }
.br-100-m {
border-radius: 100%; }
.br-pill-m {
border-radius: 9999px; }
.br--bottom-m {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.br--top-m {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.br--right-m {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.br--left-m {
border-top-right-radius: 0;
border-bottom-right-radius: 0; } }
@media screen and (min-width: 60em) {
.br0-l {
border-radius: 0; }
.br1-l {
border-radius: .125rem; }
.br2-l {
border-radius: .25rem; }
.br3-l {
border-radius: .5rem; }
.br4-l {
border-radius: 1rem; }
.br-100-l {
border-radius: 100%; }
.br-pill-l {
border-radius: 9999px; }
.br--bottom-l {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.br--top-l {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.br--right-l {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.br--left-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0; } }
/*
BORDER STYLES
Docs: http://tachyons.io/docs/themes/borders/
Depends on base border module in _borders.css
Base:
b = border-style
Modifiers:
--none = none
--dotted = dotted
--dashed = dashed
--solid = solid
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.b--dotted {
border-style: dotted; }
.b--dashed {
border-style: dashed; }
.b--solid {
border-style: solid; }
.b--none {
border-style: none; }
@media screen and (min-width: 30em) {
.b--dotted-ns {
border-style: dotted; }
.b--dashed-ns {
border-style: dashed; }
.b--solid-ns {
border-style: solid; }
.b--none-ns {
border-style: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.b--dotted-m {
border-style: dotted; }
.b--dashed-m {
border-style: dashed; }
.b--solid-m {
border-style: solid; }
.b--none-m {
border-style: none; } }
@media screen and (min-width: 60em) {
.b--dotted-l {
border-style: dotted; }
.b--dashed-l {
border-style: dashed; }
.b--solid-l {
border-style: solid; }
.b--none-l {
border-style: none; } }
/*
BORDER WIDTHS
Docs: http://tachyons.io/docs/themes/borders/
Base:
bw = border-width
Modifiers:
0 = 0 width border
1 = 1st step in border-width scale
2 = 2nd step in border-width scale
3 = 3rd step in border-width scale
4 = 4th step in border-width scale
5 = 5th step in border-width scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bw0 {
border-width: 0; }
.bw1 {
border-width: .125rem; }
.bw2 {
border-width: .25rem; }
.bw3 {
border-width: .5rem; }
.bw4 {
border-width: 1rem; }
.bw5 {
border-width: 2rem; }
.bw-0 {
border-width: 0px; }
.bw-1 {
border-width: 1px; }
.bw-2 {
border-width: 2px; }
.bw-3 {
border-width: 3px; }
.bw-4 {
border-width: 4px; }
.bw-5 {
border-width: 5px; }
/* Resets */
.bt-0 {
border-top-width: 0; }
.br-0 {
border-right-width: 0; }
.bb-0 {
border-bottom-width: 0; }
.bl-0 {
border-left-width: 0; }
@media screen and (min-width: 30em) {
.bw0-ns {
border-width: 0; }
.bw1-ns {
border-width: .125rem; }
.bw2-ns {
border-width: .25rem; }
.bw3-ns {
border-width: .5rem; }
.bw4-ns {
border-width: 1rem; }
.bw5-ns {
border-width: 2rem; }
.bt-0-ns {
border-top-width: 0; }
.br-0-ns {
border-right-width: 0; }
.bb-0-ns {
border-bottom-width: 0; }
.bl-0-ns {
border-left-width: 0; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.bw0-m {
border-width: 0; }
.bw1-m {
border-width: .125rem; }
.bw2-m {
border-width: .25rem; }
.bw3-m {
border-width: .5rem; }
.bw4-m {
border-width: 1rem; }
.bw5-m {
border-width: 2rem; }
.bt-0-m {
border-top-width: 0; }
.br-0-m {
border-right-width: 0; }
.bb-0-m {
border-bottom-width: 0; }
.bl-0-m {
border-left-width: 0; } }
@media screen and (min-width: 60em) {
.bw0-l {
border-width: 0; }
.bw1-l {
border-width: .125rem; }
.bw2-l {
border-width: .25rem; }
.bw3-l {
border-width: .5rem; }
.bw4-l {
border-width: 1rem; }
.bw5-l {
border-width: 2rem; }
.bt-0-l {
border-top-width: 0; }
.br-0-l {
border-right-width: 0; }
.bb-0-l {
border-bottom-width: 0; }
.bl-0-l {
border-left-width: 0; } }
/*
BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.shadow-1 {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-2 {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); }
.shadow-3 {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-4 {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); }
.shadow-5 {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); }
.shadow-6 {
-webkit-box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05); }
@media screen and (min-width: 30em) {
.shadow-1-ns {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-2-ns {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); }
.shadow-3-ns {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-4-ns {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); }
.shadow-5-ns {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.shadow-1-m {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-2-m {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); }
.shadow-3-m {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-4-m {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); }
.shadow-5-m {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } }
@media screen and (min-width: 60em) {
.shadow-1-l {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-2-l {
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2); }
.shadow-3-l {
-webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); }
.shadow-4-l {
-webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); }
.shadow-5-l {
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } }
/*
CODE
*/
.pre {
overflow-x: auto;
overflow-y: hidden;
overflow: scroll; }
/*
COORDINATES
Docs: http://tachyons.io/docs/layout/position/
Use in combination with the position module.
Base:
top
bottom
right
left
Modifiers:
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
--1 = literal value -1
--2 = literal value -2
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.top-0 {
top: 0; }
.right-0 {
right: 0; }
.bottom-0 {
bottom: 0; }
.left-0 {
left: 0; }
.top-1 {
top: 1rem; }
.right-1 {
right: 1rem; }
.bottom-1 {
bottom: 1rem; }
.left-1 {
left: 1rem; }
.top-2 {
top: 2rem; }
.right-2 {
right: 2rem; }
.bottom-2 {
bottom: 2rem; }
.left-2 {
left: 2rem; }
.top--1 {
top: -1rem; }
.right--1 {
right: -1rem; }
.bottom--1 {
bottom: -1rem; }
.left--1 {
left: -1rem; }
.top--2 {
top: -2rem; }
.right--2 {
right: -2rem; }
.bottom--2 {
bottom: -2rem; }
.left--2 {
left: -2rem; }
.absolute--fill {
top: 0;
right: 0;
bottom: 0;
left: 0; }
@media screen and (min-width: 30em) {
.top-0-ns {
top: 0; }
.left-0-ns {
left: 0; }
.right-0-ns {
right: 0; }
.bottom-0-ns {
bottom: 0; }
.top-1-ns {
top: 1rem; }
.left-1-ns {
left: 1rem; }
.right-1-ns {
right: 1rem; }
.bottom-1-ns {
bottom: 1rem; }
.top-2-ns {
top: 2rem; }
.left-2-ns {
left: 2rem; }
.right-2-ns {
right: 2rem; }
.bottom-2-ns {
bottom: 2rem; }
.top--1-ns {
top: -1rem; }
.right--1-ns {
right: -1rem; }
.bottom--1-ns {
bottom: -1rem; }
.left--1-ns {
left: -1rem; }
.top--2-ns {
top: -2rem; }
.right--2-ns {
right: -2rem; }
.bottom--2-ns {
bottom: -2rem; }
.left--2-ns {
left: -2rem; }
.absolute--fill-ns {
top: 0;
right: 0;
bottom: 0;
left: 0; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.top-0-m {
top: 0; }
.left-0-m {
left: 0; }
.right-0-m {
right: 0; }
.bottom-0-m {
bottom: 0; }
.top-1-m {
top: 1rem; }
.left-1-m {
left: 1rem; }
.right-1-m {
right: 1rem; }
.bottom-1-m {
bottom: 1rem; }
.top-2-m {
top: 2rem; }
.left-2-m {
left: 2rem; }
.right-2-m {
right: 2rem; }
.bottom-2-m {
bottom: 2rem; }
.top--1-m {
top: -1rem; }
.right--1-m {
right: -1rem; }
.bottom--1-m {
bottom: -1rem; }
.left--1-m {
left: -1rem; }
.top--2-m {
top: -2rem; }
.right--2-m {
right: -2rem; }
.bottom--2-m {
bottom: -2rem; }
.left--2-m {
left: -2rem; }
.absolute--fill-m {
top: 0;
right: 0;
bottom: 0;
left: 0; } }
@media screen and (min-width: 60em) {
.top-0-l {
top: 0; }
.left-0-l {
left: 0; }
.right-0-l {
right: 0; }
.bottom-0-l {
bottom: 0; }
.top-1-l {
top: 1rem; }
.left-1-l {
left: 1rem; }
.right-1-l {
right: 1rem; }
.bottom-1-l {
bottom: 1rem; }
.top-2-l {
top: 2rem; }
.left-2-l {
left: 2rem; }
.right-2-l {
right: 2rem; }
.bottom-2-l {
bottom: 2rem; }
.top--1-l {
top: -1rem; }
.right--1-l {
right: -1rem; }
.bottom--1-l {
bottom: -1rem; }
.left--1-l {
left: -1rem; }
.top--2-l {
top: -2rem; }
.right--2-l {
right: -2rem; }
.bottom--2-l {
bottom: -2rem; }
.left--2-l {
left: -2rem; }
.absolute--fill-l {
top: 0;
right: 0;
bottom: 0;
left: 0; } }
/*
CLEARFIX
http://tachyons.io/docs/layout/clearfix/
*/
/* Nicolas Gallaghers Clearfix solution
Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table; }
.cf:after {
clear: both; }
.cf {
*zoom: 1; }
.cl {
clear: left; }
.cr {
clear: right; }
.cb {
clear: both; }
.cn {
clear: none; }
@media screen and (min-width: 30em) {
.cl-ns {
clear: left; }
.cr-ns {
clear: right; }
.cb-ns {
clear: both; }
.cn-ns {
clear: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.cl-m {
clear: left; }
.cr-m {
clear: right; }
.cb-m {
clear: both; }
.cn-m {
clear: none; } }
@media screen and (min-width: 60em) {
.cl-l {
clear: left; }
.cr-l {
clear: right; }
.cb-l {
clear: both; }
.cn-l {
clear: none; } }
/*
DISPLAY
Docs: http://tachyons.io/docs/layout/display
Base:
d = display
Modifiers:
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
t-row = table-row
t-columm = table-column
t-column-group = table-column-group
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.dn {
display: none; }
.di {
display: inline; }
.db {
display: block; }
.dib {
display: inline-block; }
.dit {
display: inline-table; }
.dt {
display: table; }
.dtc {
display: table-cell; }
.dt-row {
display: table-row; }
.dt-row-group {
display: table-row-group; }
.dt-column {
display: table-column; }
.dt-column-group {
display: table-column-group; }
/*
This will set table to full width and then
all cells will be equal width
*/
.dt--fixed {
table-layout: fixed;
width: 100%; }
@media screen and (min-width: 30em) {
.dn-ns {
display: none; }
.di-ns {
display: inline; }
.db-ns {
display: block; }
.dib-ns {
display: inline-block; }
.dit-ns {
display: inline-table; }
.dt-ns {
display: table; }
.dtc-ns {
display: table-cell; }
.dt-row-ns {
display: table-row; }
.dt-row-group-ns {
display: table-row-group; }
.dt-column-ns {
display: table-column; }
.dt-column-group-ns {
display: table-column-group; }
.dt--fixed-ns {
table-layout: fixed;
width: 100%; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.dn-m {
display: none; }
.di-m {
display: inline; }
.db-m {
display: block; }
.dib-m {
display: inline-block; }
.dit-m {
display: inline-table; }
.dt-m {
display: table; }
.dtc-m {
display: table-cell; }
.dt-row-m {
display: table-row; }
.dt-row-group-m {
display: table-row-group; }
.dt-column-m {
display: table-column; }
.dt-column-group-m {
display: table-column-group; }
.dt--fixed-m {
table-layout: fixed;
width: 100%; } }
@media screen and (min-width: 60em) {
.dn-l {
display: none; }
.di-l {
display: inline; }
.db-l {
display: block; }
.dib-l {
display: inline-block; }
.dit-l {
display: inline-table; }
.dt-l {
display: table; }
.dtc-l {
display: table-cell; }
.dt-row-l {
display: table-row; }
.dt-row-group-l {
display: table-row-group; }
.dt-column-l {
display: table-column; }
.dt-column-group-l {
display: table-column-group; }
.dt--fixed-l {
table-layout: fixed;
width: 100%; } }
/*
FLEXBOX
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.flex {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; }
.inline-flex {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; }
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */ }
.flex-none {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none; }
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.flex-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse; }
.flex-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; }
.flex-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.items-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; }
.items-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end; }
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.items-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline; }
.items-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch; }
.self-start {
-ms-flex-item-align: start;
align-self: flex-start; }
.self-end {
-ms-flex-item-align: end;
align-self: flex-end; }
.self-center {
-ms-flex-item-align: center;
align-self: center; }
.self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline; }
.self-stretch {
-ms-flex-item-align: stretch;
align-self: stretch; }
.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; }
.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.justify-around {
-ms-flex-pack: distribute;
justify-content: space-around; }
.content-start {
-ms-flex-line-pack: start;
align-content: flex-start; }
.content-end {
-ms-flex-line-pack: end;
align-content: flex-end; }
.content-center {
-ms-flex-line-pack: center;
align-content: center; }
.content-between {
-ms-flex-line-pack: justify;
align-content: space-between; }
.content-around {
-ms-flex-line-pack: distribute;
align-content: space-around; }
.content-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch; }
.order-0 {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0; }
.order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1; }
.order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2; }
.order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3; }
.order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4; }
.order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5; }
.order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6; }
.order-7 {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7; }
.order-8 {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8; }
.order-last {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999; }
@media screen and (min-width: 30em) {
.flex-ns {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; }
.inline-flex-ns {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; }
.flex-auto-ns {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */ }
.flex-none-ns {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none; }
.flex-column-ns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.flex-row-ns {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
.flex-wrap-ns {
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.flex-nowrap-ns {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
.flex-wrap-reverse-ns {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse; }
.flex-column-reverse-ns {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; }
.flex-row-reverse-ns {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.items-start-ns {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; }
.items-end-ns {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end; }
.items-center-ns {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.items-baseline-ns {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline; }
.items-stretch-ns {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch; }
.self-start-ns {
-ms-flex-item-align: start;
align-self: flex-start; }
.self-end-ns {
-ms-flex-item-align: end;
align-self: flex-end; }
.self-center-ns {
-ms-flex-item-align: center;
align-self: center; }
.self-baseline-ns {
-ms-flex-item-align: baseline;
align-self: baseline; }
.self-stretch-ns {
-ms-flex-item-align: stretch;
align-self: stretch; }
.justify-start-ns {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.justify-end-ns {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; }
.justify-center-ns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.justify-between-ns {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.justify-around-ns {
-ms-flex-pack: distribute;
justify-content: space-around; }
.content-start-ns {
-ms-flex-line-pack: start;
align-content: flex-start; }
.content-end-ns {
-ms-flex-line-pack: end;
align-content: flex-end; }
.content-center-ns {
-ms-flex-line-pack: center;
align-content: center; }
.content-between-ns {
-ms-flex-line-pack: justify;
align-content: space-between; }
.content-around-ns {
-ms-flex-line-pack: distribute;
align-content: space-around; }
.content-stretch-ns {
-ms-flex-line-pack: stretch;
align-content: stretch; }
.order-0-ns {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0; }
.order-1-ns {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1; }
.order-2-ns {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2; }
.order-3-ns {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3; }
.order-4-ns {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4; }
.order-5-ns {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5; }
.order-6-ns {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6; }
.order-7-ns {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7; }
.order-8-ns {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8; }
.order-last-ns {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.flex-m {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; }
.inline-flex-m {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; }
.flex-auto-m {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */ }
.flex-none-m {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none; }
.flex-column-m {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.flex-row-m {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
.flex-wrap-m {
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.flex-nowrap-m {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
.flex-wrap-reverse-m {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse; }
.flex-column-reverse-m {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; }
.flex-row-reverse-m {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.items-start-m {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; }
.items-end-m {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end; }
.items-center-m {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.items-baseline-m {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline; }
.items-stretch-m {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch; }
.self-start-m {
-ms-flex-item-align: start;
align-self: flex-start; }
.self-end-m {
-ms-flex-item-align: end;
align-self: flex-end; }
.self-center-m {
-ms-flex-item-align: center;
align-self: center; }
.self-baseline-m {
-ms-flex-item-align: baseline;
align-self: baseline; }
.self-stretch-m {
-ms-flex-item-align: stretch;
align-self: stretch; }
.justify-start-m {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.justify-end-m {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; }
.justify-center-m {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.justify-between-m {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.justify-around-m {
-ms-flex-pack: distribute;
justify-content: space-around; }
.content-start-m {
-ms-flex-line-pack: start;
align-content: flex-start; }
.content-end-m {
-ms-flex-line-pack: end;
align-content: flex-end; }
.content-center-m {
-ms-flex-line-pack: center;
align-content: center; }
.content-between-m {
-ms-flex-line-pack: justify;
align-content: space-between; }
.content-around-m {
-ms-flex-line-pack: distribute;
align-content: space-around; }
.content-stretch-m {
-ms-flex-line-pack: stretch;
align-content: stretch; }
.order-0-m {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0; }
.order-1-m {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1; }
.order-2-m {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2; }
.order-3-m {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3; }
.order-4-m {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4; }
.order-5-m {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5; }
.order-6-m {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6; }
.order-7-m {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7; }
.order-8-m {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8; }
.order-last-m {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999; } }
@media screen and (min-width: 60em) {
.flex-l {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; }
.inline-flex-l {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; }
.flex-auto-l {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
/* 1 */
min-height: 0;
/* 1 */ }
.flex-none-l {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none; }
.flex-column-l {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.flex-row-l {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
.flex-wrap-l {
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.flex-nowrap-l {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
.flex-wrap-reverse-l {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse; }
.flex-column-reverse-l {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; }
.flex-row-reverse-l {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.items-start-l {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; }
.items-end-l {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end; }
.items-center-l {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.items-baseline-l {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline; }
.items-stretch-l {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch; }
.self-start-l {
-ms-flex-item-align: start;
align-self: flex-start; }
.self-end-l {
-ms-flex-item-align: end;
align-self: flex-end; }
.self-center-l {
-ms-flex-item-align: center;
align-self: center; }
.self-baseline-l {
-ms-flex-item-align: baseline;
align-self: baseline; }
.self-stretch-l {
-ms-flex-item-align: stretch;
align-self: stretch; }
.justify-start-l {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
.justify-end-l {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; }
.justify-center-l {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.justify-between-l {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.justify-around-l {
-ms-flex-pack: distribute;
justify-content: space-around; }
.content-start-l {
-ms-flex-line-pack: start;
align-content: flex-start; }
.content-end-l {
-ms-flex-line-pack: end;
align-content: flex-end; }
.content-center-l {
-ms-flex-line-pack: center;
align-content: center; }
.content-between-l {
-ms-flex-line-pack: justify;
align-content: space-between; }
.content-around-l {
-ms-flex-line-pack: distribute;
align-content: space-around; }
.content-stretch-l {
-ms-flex-line-pack: stretch;
align-content: stretch; }
.order-0-l {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0; }
.order-1-l {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1; }
.order-2-l {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2; }
.order-3-l {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3; }
.order-4-l {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4; }
.order-5-l {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5; }
.order-6-l {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6; }
.order-7-l {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7; }
.order-8-l {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8; }
.order-last-l {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999; } }
/*
FLOATS
http://tachyons.io/docs/layout/floats/
1. Floated elements are automatically rendered as block level elements.
Setting floats to display inline will fix the double margin bug in
ie6. You know... just in case.
2. Don't forget to clearfix your floats with .cf
Base:
f = float
Modifiers:
l = left
r = right
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.fl {
float: left;
_display: inline; }
.fr {
float: right;
_display: inline; }
.fn {
float: none; }
@media screen and (min-width: 30em) {
.fl-ns {
float: left;
_display: inline; }
.fr-ns {
float: right;
_display: inline; }
.fn-ns {
float: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.fl-m {
float: left;
_display: inline; }
.fr-m {
float: right;
_display: inline; }
.fn-m {
float: none; } }
@media screen and (min-width: 60em) {
.fl-l {
float: left;
_display: inline; }
.fr-l {
float: right;
_display: inline; }
.fn-l {
float: none; } }
/*
FONT STYLE
Docs: http://tachyons.io/docs/typography/font-style/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.i {
font-style: italic; }
.fs-normal {
font-style: normal; }
@media screen and (min-width: 30em) {
.i-ns {
font-style: italic; }
.fs-normal-ns {
font-style: normal; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.i-m {
font-style: italic; }
.fs-normal-m {
font-style: normal; } }
@media screen and (min-width: 60em) {
.i-l {
font-style: italic; }
.fs-normal-l {
font-style: normal; } }
/*
FONT WEIGHT
Docs: http://tachyons.io/docs/typography/font-weight/
Base
fw = font-weight
Modifiers:
1 = literal value 100
2 = literal value 200
3 = literal value 300
4 = literal value 400
5 = literal value 500
6 = literal value 600
7 = literal value 700
8 = literal value 800
9 = literal value 900
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.normal {
font-weight: normal; }
.b {
font-weight: bold; }
.fw1 {
font-weight: 100; }
.fw2 {
font-weight: 200; }
.fw3 {
font-weight: 300; }
.fw4 {
font-weight: 400; }
.fw5 {
font-weight: 500; }
.fw6 {
font-weight: 600; }
.fw7 {
font-weight: 700; }
.fw8 {
font-weight: 800; }
.fw9 {
font-weight: 900; }
@media screen and (min-width: 30em) {
.normal-ns {
font-weight: normal; }
.b-ns {
font-weight: bold; }
.fw1-ns {
font-weight: 100; }
.fw2-ns {
font-weight: 200; }
.fw3-ns {
font-weight: 300; }
.fw4-ns {
font-weight: 400; }
.fw5-ns {
font-weight: 500; }
.fw6-ns {
font-weight: 600; }
.fw7-ns {
font-weight: 700; }
.fw8-ns {
font-weight: 800; }
.fw9-ns {
font-weight: 900; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.normal-m {
font-weight: normal; }
.b-m {
font-weight: bold; }
.fw1-m {
font-weight: 100; }
.fw2-m {
font-weight: 200; }
.fw3-m {
font-weight: 300; }
.fw4-m {
font-weight: 400; }
.fw5-m {
font-weight: 500; }
.fw6-m {
font-weight: 600; }
.fw7-m {
font-weight: 700; }
.fw8-m {
font-weight: 800; }
.fw9-m {
font-weight: 900; } }
@media screen and (min-width: 60em) {
.normal-l {
font-weight: normal; }
.b-l {
font-weight: bold; }
.fw1-l {
font-weight: 100; }
.fw2-l {
font-weight: 200; }
.fw3-l {
font-weight: 300; }
.fw4-l {
font-weight: 400; }
.fw5-l {
font-weight: 500; }
.fw6-l {
font-weight: 600; }
.fw7-l {
font-weight: 700; }
.fw8-l {
font-weight: 800; }
.fw9-l {
font-weight: 900; } }
/*
HEIGHTS
Docs: http://tachyons.io/docs/layout/heights/
Base:
h = height
min-h = min-height
min-vh = min-height vertical screen height
vh = vertical screen height
Modifiers
1 = 1st step in height scale
2 = 2nd step in height scale
3 = 3rd step in height scale
4 = 4th step in height scale
5 = 5th step in height scale
-25 = literal value 25%
-50 = literal value 50%
-75 = literal value 75%
-100 = literal value 100%
-auto = string value of auto
-inherit = string value of inherit
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Height Scale */
.h1 {
height: 1rem; }
.h2 {
height: 2rem; }
.h3 {
height: 4rem; }
.h4 {
height: 8rem; }
.h5 {
height: 16rem; }
/* Height Percentages - Based off of height of parent */
.h-25 {
height: 25%; }
.h-50 {
height: 50%; }
.h-75 {
height: 75%; }
.h-100 {
height: 100%; }
.min-h-100 {
min-height: 100%; }
/* Screen Height Percentage */
.vh-25 {
height: 25vh; }
.vh-50 {
height: 50vh; }
.vh-75 {
height: 75vh; }
.vh-100 {
height: 100vh; }
.min-vh-100 {
min-height: 100vh; }
.min-vh-flex {
min-height: calc(100vh - 140px) !important; }
/* String Properties */
.h-auto {
height: auto; }
.h-inherit {
height: inherit; }
@media screen and (min-width: 30em) {
.h1-ns {
height: 1rem; }
.h2-ns {
height: 2rem; }
.h3-ns {
height: 4rem; }
.h4-ns {
height: 8rem; }
.h5-ns {
height: 16rem; }
.h-25-ns {
height: 25%; }
.h-50-ns {
height: 50%; }
.h-75-ns {
height: 75%; }
.h-100-ns {
height: 100%; }
.min-h-100-ns {
min-height: 100%; }
.vh-25-ns {
height: 25vh; }
.vh-50-ns {
height: 50vh; }
.vh-75-ns {
height: 75vh; }
.vh-100-ns {
height: 100vh; }
.min-vh-100-ns {
min-height: 100vh; }
.h-auto-ns {
height: auto; }
.h-inherit-ns {
height: inherit; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.h1-m {
height: 1rem; }
.h2-m {
height: 2rem; }
.h3-m {
height: 4rem; }
.h4-m {
height: 8rem; }
.h5-m {
height: 16rem; }
.h-25-m {
height: 25%; }
.h-50-m {
height: 50%; }
.h-75-m {
height: 75%; }
.h-100-m {
height: 100%; }
.min-h-100-m {
min-height: 100%; }
.vh-25-m {
height: 25vh; }
.vh-50-m {
height: 50vh; }
.vh-75-m {
height: 75vh; }
.vh-100-m {
height: 100vh; }
.min-vh-100-m {
min-height: 100vh; }
.h-auto-m {
height: auto; }
.h-inherit-m {
height: inherit; } }
@media screen and (min-width: 60em) {
.h1-l {
height: 1rem; }
.h2-l {
height: 2rem; }
.h3-l {
height: 4rem; }
.h4-l {
height: 8rem; }
.h5-l {
height: 16rem; }
.h-25-l {
height: 25%; }
.h-50-l {
height: 50%; }
.h-75-l {
height: 75%; }
.h-100-l {
height: 100%; }
.min-h-100-l {
min-height: 100%; }
.vh-25-l {
height: 25vh; }
.vh-50-l {
height: 50vh; }
.vh-75-l {
height: 75vh; }
.vh-100-l {
height: 100vh; }
.min-vh-100-l {
min-height: 100vh; }
.h-auto-l {
height: auto; }
.h-inherit-l {
height: inherit; } }
/*
LETTER SPACING
Docs: http://tachyons.io/docs/typography/tracking/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tracked {
letter-spacing: .1em; }
.tracked-tight {
letter-spacing: -.05em; }
.tracked-mega {
letter-spacing: .25em; }
@media screen and (min-width: 30em) {
.tracked-ns {
letter-spacing: .1em; }
.tracked-tight-ns {
letter-spacing: -.05em; }
.tracked-mega-ns {
letter-spacing: .25em; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.tracked-m {
letter-spacing: .1em; }
.tracked-tight-m {
letter-spacing: -.05em; }
.tracked-mega-m {
letter-spacing: .25em; } }
@media screen and (min-width: 60em) {
.tracked-l {
letter-spacing: .1em; }
.tracked-tight-l {
letter-spacing: -.05em; }
.tracked-mega-l {
letter-spacing: .25em; } }
/*
LINE HEIGHT / LEADING
Docs: http://tachyons.io/docs/typography/line-height
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.lh-solid {
line-height: 1; }
.lh-title {
line-height: 1.25; }
.lh-copy {
line-height: 1.5; }
@media screen and (min-width: 30em) {
.lh-solid-ns {
line-height: 1; }
.lh-title-ns {
line-height: 1.25; }
.lh-copy-ns {
line-height: 1.5; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.lh-solid-m {
line-height: 1; }
.lh-title-m {
line-height: 1.25; }
.lh-copy-m {
line-height: 1.5; } }
@media screen and (min-width: 60em) {
.lh-solid-l {
line-height: 1; }
.lh-title-l {
line-height: 1.25; }
.lh-copy-l {
line-height: 1.5; } }
/*
LISTS
http://tachyons.io/docs/elements/lists/
*/
.list {
list-style-type: none; }
/*
MAX WIDTHS
Docs: http://tachyons.io/docs/layout/max-widths/
Base:
mw = max-width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
6 = 6st step in width scale
7 = 7nd step in width scale
8 = 8rd step in width scale
9 = 9th step in width scale
-100 = literal value 100%
-none = string value none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Max Width Percentages */
.mw-100 {
max-width: 100%; }
/* Max Width Scale */
.mw1 {
max-width: 1rem; }
.mw2 {
max-width: 2rem; }
.mw3 {
max-width: 4rem; }
.mw4 {
max-width: 8rem; }
.mw5 {
max-width: 16rem; }
.mw6 {
max-width: 32rem; }
.mw7 {
max-width: 48rem; }
.mw8 {
max-width: 64rem; }
.mw9 {
max-width: 96rem; }
/* Max Width String Properties */
.mw-none {
max-width: none; }
@media screen and (min-width: 30em) {
.mw-100-ns {
max-width: 100%; }
.mw1-ns {
max-width: 1rem; }
.mw2-ns {
max-width: 2rem; }
.mw3-ns {
max-width: 4rem; }
.mw4-ns {
max-width: 8rem; }
.mw5-ns {
max-width: 16rem; }
.mw6-ns {
max-width: 32rem; }
.mw7-ns {
max-width: 48rem; }
.mw8-ns {
max-width: 64rem; }
.mw9-ns {
max-width: 96rem; }
.mw-none-ns {
max-width: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.mw-100-m {
max-width: 100%; }
.mw1-m {
max-width: 1rem; }
.mw2-m {
max-width: 2rem; }
.mw3-m {
max-width: 4rem; }
.mw4-m {
max-width: 8rem; }
.mw5-m {
max-width: 16rem; }
.mw6-m {
max-width: 32rem; }
.mw7-m {
max-width: 48rem; }
.mw8-m {
max-width: 64rem; }
.mw9-m {
max-width: 96rem; }
.mw-none-m {
max-width: none; } }
@media screen and (min-width: 60em) {
.mw-100-l {
max-width: 100%; }
.mw1-l {
max-width: 1rem; }
.mw2-l {
max-width: 2rem; }
.mw3-l {
max-width: 4rem; }
.mw4-l {
max-width: 8rem; }
.mw5-l {
max-width: 16rem; }
.mw6-l {
max-width: 32rem; }
.mw7-l {
max-width: 48rem; }
.mw8-l {
max-width: 64rem; }
.mw9-l {
max-width: 96rem; }
.mw-none-l {
max-width: none; } }
/*
WIDTHS
Docs: http://tachyons.io/docs/layout/widths/
Base:
w = width
Modifiers
1 = 1st step in width scale
2 = 2nd step in width scale
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
-10 = literal value 10%
-20 = literal value 20%
-25 = literal value 25%
-30 = literal value 30%
-33 = literal value 33%
-34 = literal value 34%
-40 = literal value 40%
-50 = literal value 50%
-60 = literal value 60%
-70 = literal value 70%
-75 = literal value 75%
-80 = literal value 80%
-90 = literal value 90%
-100 = literal value 100%
-third = 100% / 3 (Not supported in opera mini or IE8)
-two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
-auto = string value auto
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Width Scale */
.w1 {
width: 1rem; }
.w2 {
width: 2rem; }
.w3 {
width: 4rem; }
.w4 {
width: 8rem; }
.w5 {
width: 16rem; }
.w-10 {
width: 10%; }
.w-20 {
width: 20%; }
.w-25 {
width: 25%; }
.w-30 {
width: 30%; }
.w-33 {
width: 33%; }
.w-34 {
width: 34%; }
.w-40 {
width: 40%; }
.w-50 {
width: 50%; }
.w-55 {
width: 55%; }
.w-60 {
width: 60%; }
.w-70 {
width: 70%; }
.w-75 {
width: 75%; }
.w-80 {
width: 80%; }
.w-90 {
width: 90%; }
.w-100 {
width: 100%; }
.w-third {
width: 33.33333%; }
.w-two-thirds {
width: 66.66667%; }
.w-auto {
width: auto; }
@media screen and (min-width: 30em) {
.w1-ns {
width: 1rem; }
.w2-ns {
width: 2rem; }
.w3-ns {
width: 4rem; }
.w4-ns {
width: 8rem; }
.w5-ns {
width: 16rem; }
.w-10-ns {
width: 10%; }
.w-20-ns {
width: 20%; }
.w-25-ns {
width: 25%; }
.w-30-ns {
width: 30%; }
.w-33-ns {
width: 33%; }
.w-34-ns {
width: 34%; }
.w-40-ns {
width: 40%; }
.w-50-ns {
width: 50%; }
.w-60-ns {
width: 60%; }
.w-70-ns {
width: 70%; }
.w-75-ns {
width: 75%; }
.w-80-ns {
width: 80%; }
.w-90-ns {
width: 90%; }
.w-100-ns {
width: 100%; }
.w-third-ns {
width: 33.33333%; }
.w-two-thirds-ns {
width: 66.66667%; }
.w-auto-ns {
width: auto; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.w1-m {
width: 1rem; }
.w2-m {
width: 2rem; }
.w3-m {
width: 4rem; }
.w4-m {
width: 8rem; }
.w5-m {
width: 16rem; }
.w-10-m {
width: 10%; }
.w-20-m {
width: 20%; }
.w-25-m {
width: 25%; }
.w-30-m {
width: 30%; }
.w-33-m {
width: 33%; }
.w-34-m {
width: 34%; }
.w-40-m {
width: 40%; }
.w-50-m {
width: 50%; }
.w-60-m {
width: 60%; }
.w-70-m {
width: 70%; }
.w-75-m {
width: 75%; }
.w-80-m {
width: 80%; }
.w-90-m {
width: 90%; }
.w-100-m {
width: 100%; }
.w-third-m {
width: 33.33333%; }
.w-two-thirds-m {
width: 66.66667%; }
.w-auto-m {
width: auto; } }
@media screen and (min-width: 60em) {
.w1-l {
width: 1rem; }
.w2-l {
width: 2rem; }
.w3-l {
width: 4rem; }
.w4-l {
width: 8rem; }
.w5-l {
width: 16rem; }
.w-10-l {
width: 10%; }
.w-20-l {
width: 20%; }
.w-25-l {
width: 25%; }
.w-30-l {
width: 30%; }
.w-33-l {
width: 33%; }
.w-34-l {
width: 34%; }
.w-40-l {
width: 40%; }
.w-50-l {
width: 50%; }
.w-60-l {
width: 60%; }
.w-70-l {
width: 70%; }
.w-75-l {
width: 75%; }
.w-80-l {
width: 80%; }
.w-90-l {
width: 90%; }
.w-100-l {
width: 100%; }
.w-third-l {
width: 33.33333%; }
.w-two-thirds-l {
width: 66.66667%; }
.w-auto-l {
width: auto; } }
/*
OVERFLOW
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.overflow-visible {
overflow: visible; }
.overflow-hidden {
overflow: hidden; }
.overflow-scroll {
overflow: scroll; }
.overflow-auto {
overflow: auto; }
.overflow-x-visible {
overflow-x: visible; }
.overflow-x-hidden {
overflow-x: hidden; }
.overflow-x-scroll {
overflow-x: scroll; }
.overflow-x-auto {
overflow-x: auto; }
.overflow-y-visible {
overflow-y: visible; }
.overflow-y-hidden {
overflow-y: hidden; }
.overflow-y-scroll {
overflow-y: scroll; }
.overflow-y-auto {
overflow-y: auto; }
@media screen and (min-width: 30em) {
.overflow-visible-ns {
overflow: visible; }
.overflow-hidden-ns {
overflow: hidden; }
.overflow-scroll-ns {
overflow: scroll; }
.overflow-auto-ns {
overflow: auto; }
.overflow-x-visible-ns {
overflow-x: visible; }
.overflow-x-hidden-ns {
overflow-x: hidden; }
.overflow-x-scroll-ns {
overflow-x: scroll; }
.overflow-x-auto-ns {
overflow-x: auto; }
.overflow-y-visible-ns {
overflow-y: visible; }
.overflow-y-hidden-ns {
overflow-y: hidden; }
.overflow-y-scroll-ns {
overflow-y: scroll; }
.overflow-y-auto-ns {
overflow-y: auto; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.overflow-visible-m {
overflow: visible; }
.overflow-hidden-m {
overflow: hidden; }
.overflow-scroll-m {
overflow: scroll; }
.overflow-auto-m {
overflow: auto; }
.overflow-x-visible-m {
overflow-x: visible; }
.overflow-x-hidden-m {
overflow-x: hidden; }
.overflow-x-scroll-m {
overflow-x: scroll; }
.overflow-x-auto-m {
overflow-x: auto; }
.overflow-y-visible-m {
overflow-y: visible; }
.overflow-y-hidden-m {
overflow-y: hidden; }
.overflow-y-scroll-m {
overflow-y: scroll; }
.overflow-y-auto-m {
overflow-y: auto; } }
@media screen and (min-width: 60em) {
.overflow-visible-l {
overflow: visible; }
.overflow-hidden-l {
overflow: hidden; }
.overflow-scroll-l {
overflow: scroll; }
.overflow-auto-l {
overflow: auto; }
.overflow-x-visible-l {
overflow-x: visible; }
.overflow-x-hidden-l {
overflow-x: hidden; }
.overflow-x-scroll-l {
overflow-x: scroll; }
.overflow-x-auto-l {
overflow-x: auto; }
.overflow-y-visible-l {
overflow-y: visible; }
.overflow-y-hidden-l {
overflow-y: hidden; }
.overflow-y-scroll-l {
overflow-y: scroll; }
.overflow-y-auto-l {
overflow-y: auto; } }
/*
POSITIONING
Docs: http://tachyons.io/docs/layout/position/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.static {
position: static; }
.relative {
position: relative; }
.absolute {
position: absolute; }
.fixed {
position: fixed; }
@media screen and (min-width: 30em) {
.static-ns {
position: static; }
.relative-ns {
position: relative; }
.absolute-ns {
position: absolute; }
.fixed-ns {
position: fixed; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.static-m {
position: static; }
.relative-m {
position: relative; }
.absolute-m {
position: absolute; }
.fixed-m {
position: fixed; } }
@media screen and (min-width: 60em) {
.static-l {
position: static; }
.relative-l {
position: relative; }
.absolute-l {
position: absolute; }
.fixed-l {
position: fixed; } }
/*
OPACITY
Docs: http://tachyons.io/docs/themes/opacity/
*/
.o-100 {
opacity: 1; }
.o-90 {
opacity: .9; }
.o-80 {
opacity: .8; }
.o-70 {
opacity: .7; }
.o-60 {
opacity: .6; }
.o-50 {
opacity: .5; }
.o-40 {
opacity: .4; }
.o-30 {
opacity: .3; }
.o-20 {
opacity: .2; }
.o-10 {
opacity: .1; }
.o-05 {
opacity: .05; }
.o-025 {
opacity: .025; }
.o-0 {
opacity: 0; }
/*
ROTATIONS
*/
.rotate-45 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.rotate-90 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.rotate-135 {
-webkit-transform: rotate(135deg);
transform: rotate(135deg); }
.rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.rotate-225 {
-webkit-transform: rotate(225deg);
transform: rotate(225deg); }
.rotate-270 {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
.rotate-315 {
-webkit-transform: rotate(315deg);
transform: rotate(315deg); }
@media screen and (min-width: 30em) {
.rotate-45-ns {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.rotate-90-ns {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.rotate-135-ns {
-webkit-transform: rotate(135deg);
transform: rotate(135deg); }
.rotate-180-ns {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.rotate-225-ns {
-webkit-transform: rotate(225deg);
transform: rotate(225deg); }
.rotate-270-ns {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
.rotate-315-ns {
-webkit-transform: rotate(315deg);
transform: rotate(315deg); } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.rotate-45-m {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.rotate-90-m {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.rotate-135-m {
-webkit-transform: rotate(135deg);
transform: rotate(135deg); }
.rotate-180-m {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.rotate-225-m {
-webkit-transform: rotate(225deg);
transform: rotate(225deg); }
.rotate-270-m {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
.rotate-315-m {
-webkit-transform: rotate(315deg);
transform: rotate(315deg); } }
@media screen and (min-width: 60em) {
.rotate-45-l {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.rotate-90-l {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.rotate-135-l {
-webkit-transform: rotate(135deg);
transform: rotate(135deg); }
.rotate-180-l {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.rotate-225-l {
-webkit-transform: rotate(225deg);
transform: rotate(225deg); }
.rotate-270-l {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
.rotate-315-l {
-webkit-transform: rotate(315deg);
transform: rotate(315deg); } }
/* Variables */
/*
SPACING
Docs: http://tachyons.io/docs/layout/spacing/
An eight step powers of two scale ranging from 0 to 16rem.
Base:
p = padding
m = margin
Modifiers:
a = all
h = horizontal
v = vertical
t = top
r = right
b = bottom
l = left
0 = none
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.pa0 {
padding: 0; }
.pa1 {
padding: 0.25rem; }
.pa2 {
padding: 0.5rem; }
.pa3 {
padding: 1rem; }
.pa4 {
padding: 2rem; }
.pa5 {
padding: 4rem; }
.pa6 {
padding: 8rem; }
.pa7 {
padding: 16rem; }
.pl0 {
padding-left: 0; }
.pl1 {
padding-left: 0.25rem; }
.pl2 {
padding-left: 0.5rem; }
.pl3 {
padding-left: 1rem; }
.pl4 {
padding-left: 2rem; }
.pl5 {
padding-left: 4rem; }
.pl6 {
padding-left: 8rem; }
.pl7 {
padding-left: 16rem; }
.pr0 {
padding-right: 0; }
.pr1 {
padding-right: 0.25rem; }
.pr2 {
padding-right: 0.5rem; }
.pr3 {
padding-right: 1rem; }
.pr4 {
padding-right: 2rem; }
.pr5 {
padding-right: 4rem; }
.pr6 {
padding-right: 8rem; }
.pr7 {
padding-right: 16rem; }
.pb0 {
padding-bottom: 0; }
.pb1 {
padding-bottom: 0.25rem; }
.pb2 {
padding-bottom: 0.5rem; }
.pb3 {
padding-bottom: 1rem; }
.pb4 {
padding-bottom: 2rem; }
.pb5 {
padding-bottom: 4rem; }
.pb6 {
padding-bottom: 8rem; }
.pb7 {
padding-bottom: 16rem; }
.pt0 {
padding-top: 0; }
.pt1 {
padding-top: 0.25rem; }
.pt2 {
padding-top: 0.5rem; }
.pt3 {
padding-top: 1rem; }
.pt4 {
padding-top: 2rem; }
.pt5 {
padding-top: 4rem; }
.pt6 {
padding-top: 8rem; }
.pt7 {
padding-top: 16rem; }
.pv0 {
padding-top: 0;
padding-bottom: 0; }
.pv1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem; }
.pv2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem; }
.pv4 {
padding-top: 2rem;
padding-bottom: 2rem; }
.pv5 {
padding-top: 4rem;
padding-bottom: 4rem; }
.pv6 {
padding-top: 8rem;
padding-bottom: 8rem; }
.pv7 {
padding-top: 16rem;
padding-bottom: 16rem; }
.ph0 {
padding-left: 0;
padding-right: 0; }
.ph1 {
padding-left: 0.25rem;
padding-right: 0.25rem; }
.ph2 {
padding-left: 0.5rem;
padding-right: 0.5rem; }
.ph3 {
padding-left: 1rem;
padding-right: 1rem; }
.ph4 {
padding-left: 2rem;
padding-right: 2rem; }
.ph5 {
padding-left: 4rem;
padding-right: 4rem; }
.ph6 {
padding-left: 8rem;
padding-right: 8rem; }
.ph7 {
padding-left: 16rem;
padding-right: 16rem; }
.ma0 {
margin: 0; }
.ma1 {
margin: 0.25rem; }
.ma2 {
margin: 0.5rem; }
.ma3 {
margin: 1rem; }
.ma4 {
margin: 2rem; }
.ma5 {
margin: 4rem; }
.ma6 {
margin: 8rem; }
.ma7 {
margin: 16rem; }
.ml0 {
margin-left: 0; }
.ml1 {
margin-left: 0.25rem; }
.ml2 {
margin-left: 0.5rem; }
.ml3 {
margin-left: 1rem; }
.ml4 {
margin-left: 2rem; }
.ml5 {
margin-left: 4rem; }
.ml6 {
margin-left: 8rem; }
.ml7 {
margin-left: 16rem; }
.mr0 {
margin-right: 0; }
.mr1 {
margin-right: 0.25rem; }
.mr2 {
margin-right: 0.5rem; }
.mr3 {
margin-right: 1rem; }
.mr4 {
margin-right: 2rem; }
.mr5 {
margin-right: 4rem; }
.mr6 {
margin-right: 8rem; }
.mr7 {
margin-right: 16rem; }
.mb0 {
margin-bottom: 0; }
.mb1 {
margin-bottom: 0.25rem; }
.mb2 {
margin-bottom: 0.5rem; }
.mb3 {
margin-bottom: 1rem; }
.mb4 {
margin-bottom: 2rem; }
.mb4-1 {
margin-bottom: 3rem; }
.mb5 {
margin-bottom: 4rem; }
.mb6 {
margin-bottom: 8rem; }
.mb7 {
margin-bottom: 16rem; }
.mt0 {
margin-top: 0; }
.mt1 {
margin-top: 0.25rem; }
.mt2 {
margin-top: 0.5rem; }
.mt3 {
margin-top: 1rem; }
.mt4 {
margin-top: 2rem; }
.mt4-1 {
margin-top: 3rem; }
.mt5 {
margin-top: 4rem; }
.mt6 {
margin-top: 8rem; }
.mt7 {
margin-top: 16rem; }
.mv0 {
margin-top: 0;
margin-bottom: 0; }
.mv1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem; }
.mv2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
.mv3 {
margin-top: 1rem;
margin-bottom: 1rem; }
.mv4 {
margin-top: 2rem;
margin-bottom: 2rem; }
.mv5 {
margin-top: 4rem;
margin-bottom: 4rem; }
.mv6 {
margin-top: 8rem;
margin-bottom: 8rem; }
.mv7 {
margin-top: 16rem;
margin-bottom: 16rem; }
.mh0 {
margin-left: 0;
margin-right: 0; }
.mh1 {
margin-left: 0.25rem;
margin-right: 0.25rem; }
.mh2 {
margin-left: 0.5rem;
margin-right: 0.5rem; }
.mh3 {
margin-left: 1rem;
margin-right: 1rem; }
.mh4 {
margin-left: 2rem;
margin-right: 2rem; }
.mh5 {
margin-left: 4rem;
margin-right: 4rem; }
.mh6 {
margin-left: 8rem;
margin-right: 8rem; }
.mh7 {
margin-left: 16rem;
margin-right: 16rem; }
@media screen and (min-width: 30em) {
.pa0-ns {
padding: 0; }
.pa1-ns {
padding: 0.25rem; }
.pa2-ns {
padding: 0.5rem; }
.pa3-ns {
padding: 1rem; }
.pa4-ns {
padding: 2rem; }
.pa5-ns {
padding: 4rem; }
.pa6-ns {
padding: 8rem; }
.pa7-ns {
padding: 16rem; }
.pl0-ns {
padding-left: 0; }
.pl1-ns {
padding-left: 0.25rem; }
.pl2-ns {
padding-left: 0.5rem; }
.pl3-ns {
padding-left: 1rem; }
.pl4-ns {
padding-left: 2rem; }
.pl5-ns {
padding-left: 4rem; }
.pl6-ns {
padding-left: 8rem; }
.pl7-ns {
padding-left: 16rem; }
.pr0-ns {
padding-right: 0; }
.pr1-ns {
padding-right: 0.25rem; }
.pr2-ns {
padding-right: 0.5rem; }
.pr3-ns {
padding-right: 1rem; }
.pr4-ns {
padding-right: 2rem; }
.pr5-ns {
padding-right: 4rem; }
.pr6-ns {
padding-right: 8rem; }
.pr7-ns {
padding-right: 16rem; }
.pb0-ns {
padding-bottom: 0; }
.pb1-ns {
padding-bottom: 0.25rem; }
.pb2-ns {
padding-bottom: 0.5rem; }
.pb3-ns {
padding-bottom: 1rem; }
.pb4-ns {
padding-bottom: 2rem; }
.pb5-ns {
padding-bottom: 4rem; }
.pb6-ns {
padding-bottom: 8rem; }
.pb7-ns {
padding-bottom: 16rem; }
.pt0-ns {
padding-top: 0; }
.pt1-ns {
padding-top: 0.25rem; }
.pt2-ns {
padding-top: 0.5rem; }
.pt3-ns {
padding-top: 1rem; }
.pt4-ns {
padding-top: 2rem; }
.pt5-ns {
padding-top: 4rem; }
.pt6-ns {
padding-top: 8rem; }
.pt7-ns {
padding-top: 16rem; }
.pv0-ns {
padding-top: 0;
padding-bottom: 0; }
.pv1-ns {
padding-top: 0.25rem;
padding-bottom: 0.25rem; }
.pv2-ns {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.pv3-ns {
padding-top: 1rem;
padding-bottom: 1rem; }
.pv4-ns {
padding-top: 2rem;
padding-bottom: 2rem; }
.pv5-ns {
padding-top: 4rem;
padding-bottom: 4rem; }
.pv6-ns {
padding-top: 8rem;
padding-bottom: 8rem; }
.pv7-ns {
padding-top: 16rem;
padding-bottom: 16rem; }
.ph0-ns {
padding-left: 0;
padding-right: 0; }
.ph1-ns {
padding-left: 0.25rem;
padding-right: 0.25rem; }
.ph2-ns {
padding-left: 0.5rem;
padding-right: 0.5rem; }
.ph3-ns {
padding-left: 1rem;
padding-right: 1rem; }
.ph4-ns {
padding-left: 2rem;
padding-right: 2rem; }
.ph5-ns {
padding-left: 4rem;
padding-right: 4rem; }
.ph6-ns {
padding-left: 8rem;
padding-right: 8rem; }
.ph7-ns {
padding-left: 16rem;
padding-right: 16rem; }
.ma0-ns {
margin: 0; }
.ma1-ns {
margin: 0.25rem; }
.ma2-ns {
margin: 0.5rem; }
.ma3-ns {
margin: 1rem; }
.ma4-ns {
margin: 2rem; }
.ma5-ns {
margin: 4rem; }
.ma6-ns {
margin: 8rem; }
.ma7-ns {
margin: 16rem; }
.ml0-ns {
margin-left: 0; }
.ml1-ns {
margin-left: 0.25rem; }
.ml2-ns {
margin-left: 0.5rem; }
.ml3-ns {
margin-left: 1rem; }
.ml4-ns {
margin-left: 2rem; }
.ml5-ns {
margin-left: 4rem; }
.ml6-ns {
margin-left: 8rem; }
.ml7-ns {
margin-left: 16rem; }
.mr0-ns {
margin-right: 0; }
.mr1-ns {
margin-right: 0.25rem; }
.mr2-ns {
margin-right: 0.5rem; }
.mr3-ns {
margin-right: 1rem; }
.mr4-ns {
margin-right: 2rem; }
.mr5-ns {
margin-right: 4rem; }
.mr6-ns {
margin-right: 8rem; }
.mr7-ns {
margin-right: 16rem; }
.mb0-ns {
margin-bottom: 0; }
.mb1-ns {
margin-bottom: 0.25rem; }
.mb2-ns {
margin-bottom: 0.5rem; }
.mb3-ns {
margin-bottom: 1rem; }
.mb4-ns {
margin-bottom: 2rem; }
.mb5-ns {
margin-bottom: 4rem; }
.mb6-ns {
margin-bottom: 8rem; }
.mb7-ns {
margin-bottom: 16rem; }
.mt0-ns {
margin-top: 0; }
.mt1-ns {
margin-top: 0.25rem; }
.mt2-ns {
margin-top: 0.5rem; }
.mt3-ns {
margin-top: 1rem; }
.mt4-ns {
margin-top: 2rem; }
.mt5-ns {
margin-top: 4rem; }
.mt6-ns {
margin-top: 8rem; }
.mt7-ns {
margin-top: 16rem; }
.mv0-ns {
margin-top: 0;
margin-bottom: 0; }
.mv1-ns {
margin-top: 0.25rem;
margin-bottom: 0.25rem; }
.mv2-ns {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
.mv3-ns {
margin-top: 1rem;
margin-bottom: 1rem; }
.mv4-ns {
margin-top: 2rem;
margin-bottom: 2rem; }
.mv5-ns {
margin-top: 4rem;
margin-bottom: 4rem; }
.mv6-ns {
margin-top: 8rem;
margin-bottom: 8rem; }
.mv7-ns {
margin-top: 16rem;
margin-bottom: 16rem; }
.mh0-ns {
margin-left: 0;
margin-right: 0; }
.mh1-ns {
margin-left: 0.25rem;
margin-right: 0.25rem; }
.mh2-ns {
margin-left: 0.5rem;
margin-right: 0.5rem; }
.mh3-ns {
margin-left: 1rem;
margin-right: 1rem; }
.mh4-ns {
margin-left: 2rem;
margin-right: 2rem; }
.mh5-ns {
margin-left: 4rem;
margin-right: 4rem; }
.mh6-ns {
margin-left: 8rem;
margin-right: 8rem; }
.mh7-ns {
margin-left: 16rem;
margin-right: 16rem; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.pa0-m {
padding: 0; }
.pa1-m {
padding: 0.25rem; }
.pa2-m {
padding: 0.5rem; }
.pa3-m {
padding: 1rem; }
.pa4-m {
padding: 2rem; }
.pa5-m {
padding: 4rem; }
.pa6-m {
padding: 8rem; }
.pa7-m {
padding: 16rem; }
.pl0-m {
padding-left: 0; }
.pl1-m {
padding-left: 0.25rem; }
.pl2-m {
padding-left: 0.5rem; }
.pl3-m {
padding-left: 1rem; }
.pl4-m {
padding-left: 2rem; }
.pl5-m {
padding-left: 4rem; }
.pl6-m {
padding-left: 8rem; }
.pl7-m {
padding-left: 16rem; }
.pr0-m {
padding-right: 0; }
.pr1-m {
padding-right: 0.25rem; }
.pr2-m {
padding-right: 0.5rem; }
.pr3-m {
padding-right: 1rem; }
.pr4-m {
padding-right: 2rem; }
.pr5-m {
padding-right: 4rem; }
.pr6-m {
padding-right: 8rem; }
.pr7-m {
padding-right: 16rem; }
.pb0-m {
padding-bottom: 0; }
.pb1-m {
padding-bottom: 0.25rem; }
.pb2-m {
padding-bottom: 0.5rem; }
.pb3-m {
padding-bottom: 1rem; }
.pb4-m {
padding-bottom: 2rem; }
.pb5-m {
padding-bottom: 4rem; }
.pb6-m {
padding-bottom: 8rem; }
.pb7-m {
padding-bottom: 16rem; }
.pt0-m {
padding-top: 0; }
.pt1-m {
padding-top: 0.25rem; }
.pt2-m {
padding-top: 0.5rem; }
.pt3-m {
padding-top: 1rem; }
.pt4-m {
padding-top: 2rem; }
.pt5-m {
padding-top: 4rem; }
.pt6-m {
padding-top: 8rem; }
.pt7-m {
padding-top: 16rem; }
.pv0-m {
padding-top: 0;
padding-bottom: 0; }
.pv1-m {
padding-top: 0.25rem;
padding-bottom: 0.25rem; }
.pv2-m {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.pv3-m {
padding-top: 1rem;
padding-bottom: 1rem; }
.pv4-m {
padding-top: 2rem;
padding-bottom: 2rem; }
.pv5-m {
padding-top: 4rem;
padding-bottom: 4rem; }
.pv6-m {
padding-top: 8rem;
padding-bottom: 8rem; }
.pv7-m {
padding-top: 16rem;
padding-bottom: 16rem; }
.ph0-m {
padding-left: 0;
padding-right: 0; }
.ph1-m {
padding-left: 0.25rem;
padding-right: 0.25rem; }
.ph2-m {
padding-left: 0.5rem;
padding-right: 0.5rem; }
.ph3-m {
padding-left: 1rem;
padding-right: 1rem; }
.ph4-m {
padding-left: 2rem;
padding-right: 2rem; }
.ph5-m {
padding-left: 4rem;
padding-right: 4rem; }
.ph6-m {
padding-left: 8rem;
padding-right: 8rem; }
.ph7-m {
padding-left: 16rem;
padding-right: 16rem; }
.ma0-m {
margin: 0; }
.ma1-m {
margin: 0.25rem; }
.ma2-m {
margin: 0.5rem; }
.ma3-m {
margin: 1rem; }
.ma4-m {
margin: 2rem; }
.ma5-m {
margin: 4rem; }
.ma6-m {
margin: 8rem; }
.ma7-m {
margin: 16rem; }
.ml0-m {
margin-left: 0; }
.ml1-m {
margin-left: 0.25rem; }
.ml2-m {
margin-left: 0.5rem; }
.ml3-m {
margin-left: 1rem; }
.ml4-m {
margin-left: 2rem; }
.ml5-m {
margin-left: 4rem; }
.ml6-m {
margin-left: 8rem; }
.ml7-m {
margin-left: 16rem; }
.mr0-m {
margin-right: 0; }
.mr1-m {
margin-right: 0.25rem; }
.mr2-m {
margin-right: 0.5rem; }
.mr3-m {
margin-right: 1rem; }
.mr4-m {
margin-right: 2rem; }
.mr5-m {
margin-right: 4rem; }
.mr6-m {
margin-right: 8rem; }
.mr7-m {
margin-right: 16rem; }
.mb0-m {
margin-bottom: 0; }
.mb1-m {
margin-bottom: 0.25rem; }
.mb2-m {
margin-bottom: 0.5rem; }
.mb3-m {
margin-bottom: 1rem; }
.mb4-m {
margin-bottom: 2rem; }
.mb5-m {
margin-bottom: 4rem; }
.mb6-m {
margin-bottom: 8rem; }
.mb7-m {
margin-bottom: 16rem; }
.mt0-m {
margin-top: 0; }
.mt1-m {
margin-top: 0.25rem; }
.mt2-m {
margin-top: 0.5rem; }
.mt3-m {
margin-top: 1rem; }
.mt4-m {
margin-top: 2rem; }
.mt5-m {
margin-top: 4rem; }
.mt6-m {
margin-top: 8rem; }
.mt7-m {
margin-top: 16rem; }
.mv0-m {
margin-top: 0;
margin-bottom: 0; }
.mv1-m {
margin-top: 0.25rem;
margin-bottom: 0.25rem; }
.mv2-m {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
.mv3-m {
margin-top: 1rem;
margin-bottom: 1rem; }
.mv4-m {
margin-top: 2rem;
margin-bottom: 2rem; }
.mv5-m {
margin-top: 4rem;
margin-bottom: 4rem; }
.mv6-m {
margin-top: 8rem;
margin-bottom: 8rem; }
.mv7-m {
margin-top: 16rem;
margin-bottom: 16rem; }
.mh0-m {
margin-left: 0;
margin-right: 0; }
.mh1-m {
margin-left: 0.25rem;
margin-right: 0.25rem; }
.mh2-m {
margin-left: 0.5rem;
margin-right: 0.5rem; }
.mh3-m {
margin-left: 1rem;
margin-right: 1rem; }
.mh4-m {
margin-left: 2rem;
margin-right: 2rem; }
.mh5-m {
margin-left: 4rem;
margin-right: 4rem; }
.mh6-m {
margin-left: 8rem;
margin-right: 8rem; }
.mh7-m {
margin-left: 16rem;
margin-right: 16rem; } }
@media screen and (min-width: 60em) {
.pa0-l {
padding: 0; }
.pa1-l {
padding: 0.25rem; }
.pa2-l {
padding: 0.5rem; }
.pa3-l {
padding: 1rem; }
.pa4-l {
padding: 2rem; }
.pa5-l {
padding: 4rem; }
.pa6-l {
padding: 8rem; }
.pa7-l {
padding: 16rem; }
.pl0-l {
padding-left: 0; }
.pl1-l {
padding-left: 0.25rem; }
.pl2-l {
padding-left: 0.5rem; }
.pl3-l {
padding-left: 1rem; }
.pl4-l {
padding-left: 2rem; }
.pl5-l {
padding-left: 4rem; }
.pl6-l {
padding-left: 8rem; }
.pl7-l {
padding-left: 16rem; }
.pr0-l {
padding-right: 0; }
.pr1-l {
padding-right: 0.25rem; }
.pr2-l {
padding-right: 0.5rem; }
.pr3-l {
padding-right: 1rem; }
.pr4-l {
padding-right: 2rem; }
.pr5-l {
padding-right: 4rem; }
.pr6-l {
padding-right: 8rem; }
.pr7-l {
padding-right: 16rem; }
.pb0-l {
padding-bottom: 0; }
.pb1-l {
padding-bottom: 0.25rem; }
.pb2-l {
padding-bottom: 0.5rem; }
.pb3-l {
padding-bottom: 1rem; }
.pb4-l {
padding-bottom: 2rem; }
.pb5-l {
padding-bottom: 4rem; }
.pb6-l {
padding-bottom: 8rem; }
.pb7-l {
padding-bottom: 16rem; }
.pt0-l {
padding-top: 0; }
.pt1-l {
padding-top: 0.25rem; }
.pt2-l {
padding-top: 0.5rem; }
.pt3-l {
padding-top: 1rem; }
.pt4-l {
padding-top: 2rem; }
.pt5-l {
padding-top: 4rem; }
.pt6-l {
padding-top: 8rem; }
.pt7-l {
padding-top: 16rem; }
.pv0-l {
padding-top: 0;
padding-bottom: 0; }
.pv1-l {
padding-top: 0.25rem;
padding-bottom: 0.25rem; }
.pv2-l {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
.pv3-l {
padding-top: 1rem;
padding-bottom: 1rem; }
.pv4-l {
padding-top: 2rem;
padding-bottom: 2rem; }
.pv5-l {
padding-top: 4rem;
padding-bottom: 4rem; }
.pv6-l {
padding-top: 8rem;
padding-bottom: 8rem; }
.pv7-l {
padding-top: 16rem;
padding-bottom: 16rem; }
.ph0-l {
padding-left: 0;
padding-right: 0; }
.ph1-l {
padding-left: 0.25rem;
padding-right: 0.25rem; }
.ph2-l {
padding-left: 0.5rem;
padding-right: 0.5rem; }
.ph3-l {
padding-left: 1rem;
padding-right: 1rem; }
.ph4-l {
padding-left: 2rem;
padding-right: 2rem; }
.ph5-l {
padding-left: 4rem;
padding-right: 4rem; }
.ph6-l {
padding-left: 8rem;
padding-right: 8rem; }
.ph7-l {
padding-left: 16rem;
padding-right: 16rem; }
.ma0-l {
margin: 0; }
.ma1-l {
margin: 0.25rem; }
.ma2-l {
margin: 0.5rem; }
.ma3-l {
margin: 1rem; }
.ma4-l {
margin: 2rem; }
.ma5-l {
margin: 4rem; }
.ma6-l {
margin: 8rem; }
.ma7-l {
margin: 16rem; }
.ml0-l {
margin-left: 0; }
.ml1-l {
margin-left: 0.25rem; }
.ml2-l {
margin-left: 0.5rem; }
.ml3-l {
margin-left: 1rem; }
.ml4-l {
margin-left: 2rem; }
.ml5-l {
margin-left: 4rem; }
.ml6-l {
margin-left: 8rem; }
.ml7-l {
margin-left: 16rem; }
.mr0-l {
margin-right: 0; }
.mr1-l {
margin-right: 0.25rem; }
.mr2-l {
margin-right: 0.5rem; }
.mr3-l {
margin-right: 1rem; }
.mr4-l {
margin-right: 2rem; }
.mr5-l {
margin-right: 4rem; }
.mr6-l {
margin-right: 8rem; }
.mr7-l {
margin-right: 16rem; }
.mb0-l {
margin-bottom: 0; }
.mb1-l {
margin-bottom: 0.25rem; }
.mb2-l {
margin-bottom: 0.5rem; }
.mb3-l {
margin-bottom: 1rem; }
.mb4-l {
margin-bottom: 2rem; }
.mb5-l {
margin-bottom: 4rem; }
.mb6-l {
margin-bottom: 8rem; }
.mb7-l {
margin-bottom: 16rem; }
.mt0-l {
margin-top: 0; }
.mt1-l {
margin-top: 0.25rem; }
.mt2-l {
margin-top: 0.5rem; }
.mt3-l {
margin-top: 1rem; }
.mt4-l {
margin-top: 2rem; }
.mt5-l {
margin-top: 4rem; }
.mt6-l {
margin-top: 8rem; }
.mt7-l {
margin-top: 16rem; }
.mv0-l {
margin-top: 0;
margin-bottom: 0; }
.mv1-l {
margin-top: 0.25rem;
margin-bottom: 0.25rem; }
.mv2-l {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
.mv3-l {
margin-top: 1rem;
margin-bottom: 1rem; }
.mv4-l {
margin-top: 2rem;
margin-bottom: 2rem; }
.mv5-l {
margin-top: 4rem;
margin-bottom: 4rem; }
.mv6-l {
margin-top: 8rem;
margin-bottom: 8rem; }
.mv7-l {
margin-top: 16rem;
margin-bottom: 16rem; }
.mh0-l {
margin-left: 0;
margin-right: 0; }
.mh1-l {
margin-left: 0.25rem;
margin-right: 0.25rem; }
.mh2-l {
margin-left: 0.5rem;
margin-right: 0.5rem; }
.mh3-l {
margin-left: 1rem;
margin-right: 1rem; }
.mh4-l {
margin-left: 2rem;
margin-right: 2rem; }
.mh5-l {
margin-left: 4rem;
margin-right: 4rem; }
.mh6-l {
margin-left: 8rem;
margin-right: 8rem; }
.mh7-l {
margin-left: 16rem;
margin-right: 16rem; } }
/*
NEGATIVE MARGINS
Base:
n = negative
Modifiers:
a = all
t = top
r = right
b = bottom
l = left
1 = 1st step in spacing scale
2 = 2nd step in spacing scale
3 = 3rd step in spacing scale
4 = 4th step in spacing scale
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.na1 {
margin: -0.25rem; }
.na2 {
margin: -0.5rem; }
.na3 {
margin: -1rem; }
.na4 {
margin: -2rem; }
.na5 {
margin: -4rem; }
.na6 {
margin: -8rem; }
.na7 {
margin: -16rem; }
.nl1 {
margin-left: -0.25rem; }
.nl2 {
margin-left: -0.5rem; }
.nl3 {
margin-left: -1rem; }
.nl4 {
margin-left: -2rem; }
.nl5 {
margin-left: -4rem; }
.nl6 {
margin-left: -8rem; }
.nl7 {
margin-left: -16rem; }
.nr1 {
margin-right: -0.25rem; }
.nr2 {
margin-right: -0.5rem; }
.nr3 {
margin-right: -1rem; }
.nr4 {
margin-right: -2rem; }
.nr5 {
margin-right: -4rem; }
.nr6 {
margin-right: -8rem; }
.nr7 {
margin-right: -16rem; }
.nb1 {
margin-bottom: -0.25rem; }
.nb2 {
margin-bottom: -0.5rem; }
.nb3 {
margin-bottom: -1rem; }
.nb4 {
margin-bottom: -2rem; }
.nb5 {
margin-bottom: -4rem; }
.nb6 {
margin-bottom: -8rem; }
.nb7 {
margin-bottom: -16rem; }
.nt1 {
margin-top: -0.25rem; }
.nt2 {
margin-top: -0.5rem; }
.nt3 {
margin-top: -1rem; }
.nt4 {
margin-top: -2rem; }
.nt5 {
margin-top: -4rem; }
.nt6 {
margin-top: -8rem; }
.nt7 {
margin-top: -16rem; }
@media screen and (min-width: 30em) {
.na1-ns {
margin: -0.25rem; }
.na2-ns {
margin: -0.5rem; }
.na3-ns {
margin: -1rem; }
.na4-ns {
margin: -2rem; }
.na5-ns {
margin: -4rem; }
.na6-ns {
margin: -8rem; }
.na7-ns {
margin: -16rem; }
.nl1-ns {
margin-left: -0.25rem; }
.nl2-ns {
margin-left: -0.5rem; }
.nl3-ns {
margin-left: -1rem; }
.nl4-ns {
margin-left: -2rem; }
.nl5-ns {
margin-left: -4rem; }
.nl6-ns {
margin-left: -8rem; }
.nl7-ns {
margin-left: -16rem; }
.nr1-ns {
margin-right: -0.25rem; }
.nr2-ns {
margin-right: -0.5rem; }
.nr3-ns {
margin-right: -1rem; }
.nr4-ns {
margin-right: -2rem; }
.nr5-ns {
margin-right: -4rem; }
.nr6-ns {
margin-right: -8rem; }
.nr7-ns {
margin-right: -16rem; }
.nb1-ns {
margin-bottom: -0.25rem; }
.nb2-ns {
margin-bottom: -0.5rem; }
.nb3-ns {
margin-bottom: -1rem; }
.nb4-ns {
margin-bottom: -2rem; }
.nb5-ns {
margin-bottom: -4rem; }
.nb6-ns {
margin-bottom: -8rem; }
.nb7-ns {
margin-bottom: -16rem; }
.nt1-ns {
margin-top: -0.25rem; }
.nt2-ns {
margin-top: -0.5rem; }
.nt3-ns {
margin-top: -1rem; }
.nt4-ns {
margin-top: -2rem; }
.nt5-ns {
margin-top: -4rem; }
.nt6-ns {
margin-top: -8rem; }
.nt7-ns {
margin-top: -16rem; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.na1-m {
margin: -0.25rem; }
.na2-m {
margin: -0.5rem; }
.na3-m {
margin: -1rem; }
.na4-m {
margin: -2rem; }
.na5-m {
margin: -4rem; }
.na6-m {
margin: -8rem; }
.na7-m {
margin: -16rem; }
.nl1-m {
margin-left: -0.25rem; }
.nl2-m {
margin-left: -0.5rem; }
.nl3-m {
margin-left: -1rem; }
.nl4-m {
margin-left: -2rem; }
.nl5-m {
margin-left: -4rem; }
.nl6-m {
margin-left: -8rem; }
.nl7-m {
margin-left: -16rem; }
.nr1-m {
margin-right: -0.25rem; }
.nr2-m {
margin-right: -0.5rem; }
.nr3-m {
margin-right: -1rem; }
.nr4-m {
margin-right: -2rem; }
.nr5-m {
margin-right: -4rem; }
.nr6-m {
margin-right: -8rem; }
.nr7-m {
margin-right: -16rem; }
.nb1-m {
margin-bottom: -0.25rem; }
.nb2-m {
margin-bottom: -0.5rem; }
.nb3-m {
margin-bottom: -1rem; }
.nb4-m {
margin-bottom: -2rem; }
.nb5-m {
margin-bottom: -4rem; }
.nb6-m {
margin-bottom: -8rem; }
.nb7-m {
margin-bottom: -16rem; }
.nt1-m {
margin-top: -0.25rem; }
.nt2-m {
margin-top: -0.5rem; }
.nt3-m {
margin-top: -1rem; }
.nt4-m {
margin-top: -2rem; }
.nt5-m {
margin-top: -4rem; }
.nt6-m {
margin-top: -8rem; }
.nt7-m {
margin-top: -16rem; } }
@media screen and (min-width: 60em) {
.na1-l {
margin: -0.25rem; }
.na2-l {
margin: -0.5rem; }
.na3-l {
margin: -1rem; }
.na4-l {
margin: -2rem; }
.na5-l {
margin: -4rem; }
.na6-l {
margin: -8rem; }
.na7-l {
margin: -16rem; }
.nl1-l {
margin-left: -0.25rem; }
.nl2-l {
margin-left: -0.5rem; }
.nl3-l {
margin-left: -1rem; }
.nl4-l {
margin-left: -2rem; }
.nl5-l {
margin-left: -4rem; }
.nl6-l {
margin-left: -8rem; }
.nl7-l {
margin-left: -16rem; }
.nr1-l {
margin-right: -0.25rem; }
.nr2-l {
margin-right: -0.5rem; }
.nr3-l {
margin-right: -1rem; }
.nr4-l {
margin-right: -2rem; }
.nr5-l {
margin-right: -4rem; }
.nr6-l {
margin-right: -8rem; }
.nr7-l {
margin-right: -16rem; }
.nb1-l {
margin-bottom: -0.25rem; }
.nb2-l {
margin-bottom: -0.5rem; }
.nb3-l {
margin-bottom: -1rem; }
.nb4-l {
margin-bottom: -2rem; }
.nb5-l {
margin-bottom: -4rem; }
.nb6-l {
margin-bottom: -8rem; }
.nb7-l {
margin-bottom: -16rem; }
.nt1-l {
margin-top: -0.25rem; }
.nt2-l {
margin-top: -0.5rem; }
.nt3-l {
margin-top: -1rem; }
.nt4-l {
margin-top: -2rem; }
.nt5-l {
margin-top: -4rem; }
.nt6-l {
margin-top: -8rem; }
.nt7-l {
margin-top: -16rem; } }
/*
TEXT DECORATION
Docs: http://tachyons.io/docs/typography/text-decoration/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.strike {
text-decoration: line-through; }
.underline {
text-decoration: underline; }
.no-underline {
text-decoration: none; }
@media screen and (min-width: 30em) {
.strike-ns {
text-decoration: line-through; }
.underline-ns {
text-decoration: underline; }
.no-underline-ns {
text-decoration: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.strike-m {
text-decoration: line-through; }
.underline-m {
text-decoration: underline; }
.no-underline-m {
text-decoration: none; } }
@media screen and (min-width: 60em) {
.strike-l {
text-decoration: line-through; }
.underline-l {
text-decoration: underline; }
.no-underline-l {
text-decoration: none; } }
/*
TEXT ALIGN
Docs: http://tachyons.io/docs/typography/text-align/
Base
t = text-align
Modifiers
l = left
r = right
c = center
j = justify
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.tl {
text-align: left; }
.tr {
text-align: right; }
.tc {
text-align: center; }
.tj {
text-align: justify; }
@media screen and (min-width: 30em) {
.tl-ns {
text-align: left; }
.tr-ns {
text-align: right; }
.tc-ns {
text-align: center; }
.tj-ns {
text-align: justify; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.tl-m {
text-align: left; }
.tr-m {
text-align: right; }
.tc-m {
text-align: center; }
.tj-m {
text-align: justify; } }
@media screen and (min-width: 60em) {
.tl-l {
text-align: left; }
.tr-l {
text-align: right; }
.tc-l {
text-align: center; }
.tj-l {
text-align: justify; } }
/*
TEXT TRANSFORM
Docs: http://tachyons.io/docs/typography/text-transform/
Base:
tt = text-transform
Modifiers
c = capitalize
l = lowercase
u = uppercase
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ttc {
text-transform: capitalize; }
.ttl {
text-transform: lowercase; }
.ttu {
text-transform: uppercase; }
.ttn {
text-transform: none; }
@media screen and (min-width: 30em) {
.ttc-ns {
text-transform: capitalize; }
.ttl-ns {
text-transform: lowercase; }
.ttu-ns {
text-transform: uppercase; }
.ttn-ns {
text-transform: none; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.ttc-m {
text-transform: capitalize; }
.ttl-m {
text-transform: lowercase; }
.ttu-m {
text-transform: uppercase; }
.ttn-m {
text-transform: none; } }
@media screen and (min-width: 60em) {
.ttc-l {
text-transform: capitalize; }
.ttl-l {
text-transform: lowercase; }
.ttu-l {
text-transform: uppercase; }
.ttn-l {
text-transform: none; } }
/*
TYPE SCALE
Docs: http://tachyons.io/docs/typography/scale/
Base:
f = font-size
Modifiers
1 = 1st step in size scale
2 = 2nd step in size scale
3 = 3rd step in size scale
4 = 4th step in size scale
5 = 5th step in size scale
6 = 6th step in size scale
7 = 7th step in size scale
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
* For Hero/Marketing Titles
*
* These generally are too large for mobile
* so be careful using them on smaller screens.
* */
.f-6,
.f-headline {
font-size: 6rem; }
.f-5,
.f-subheadline {
font-size: 5rem; }
/* Type Scale */
.f1 {
font-size: 3rem; }
.f2 {
font-size: 2.25rem; }
.f3 {
font-size: 1.5rem; }
.f4 {
font-size: 1.25rem; }
.f5 {
font-size: 1rem; }
.f6 {
font-size: .875rem; }
.f7 {
font-size: .75rem; }
/* Small and hard to read for many people so use with extreme caution */
@media screen and (min-width: 30em) {
.f-6-ns,
.f-headline-ns {
font-size: 6rem; }
.f-5-ns,
.f-subheadline-ns {
font-size: 5rem; }
.f1-ns {
font-size: 3rem; }
.f2-ns {
font-size: 2.25rem; }
.f3-ns {
font-size: 1.5rem; }
.f4-ns {
font-size: 1.25rem; }
.f5-ns {
font-size: 1rem; }
.f6-ns {
font-size: .875rem; }
.f7-ns {
font-size: .75rem; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.f-6-m,
.f-headline-m {
font-size: 6rem; }
.f-5-m,
.f-subheadline-m {
font-size: 5rem; }
.f1-m {
font-size: 3rem; }
.f2-m {
font-size: 2.25rem; }
.f3-m {
font-size: 1.5rem; }
.f4-m {
font-size: 1.25rem; }
.f5-m {
font-size: 1rem; }
.f6-m {
font-size: .875rem; }
.f7-m {
font-size: .75rem; } }
@media screen and (min-width: 60em) {
.f-6-l,
.f-headline-l {
font-size: 6rem; }
.f-5-l,
.f-subheadline-l {
font-size: 5rem; }
.f1-l {
font-size: 3rem; }
.f2-l {
font-size: 2.25rem; }
.f3-l {
font-size: 1.5rem; }
.f4-l {
font-size: 1.25rem; }
.f5-l {
font-size: 1rem; }
.f6-l {
font-size: .875rem; }
.f7-l {
font-size: .75rem; } }
/*
UTILITIES
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* Equivalent to .overflow-y-scroll */
.overflow-container {
overflow-y: scroll; }
.center {
margin-right: auto;
margin-left: auto; }
.mr-auto {
margin-right: auto; }
.ml-auto {
margin-left: auto; }
@media screen and (min-width: 30em) {
.center-ns {
margin-right: auto;
margin-left: auto; }
.mr-auto-ns {
margin-right: auto; }
.ml-auto-ns {
margin-left: auto; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.center-m {
margin-right: auto;
margin-left: auto; }
.mr-auto-m {
margin-right: auto; }
.ml-auto-m {
margin-left: auto; } }
@media screen and (min-width: 60em) {
.center-l {
margin-right: auto;
margin-left: auto; }
.mr-auto-l {
margin-right: auto; }
.ml-auto-l {
margin-left: auto; } }
.button-no-style {
border: 0; }
/*
WHITE SPACE
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ws-normal {
white-space: normal; }
.nowrap {
white-space: nowrap; }
.pre {
white-space: pre; }
@media screen and (min-width: 30em) {
.ws-normal-ns {
white-space: normal; }
.nowrap-ns {
white-space: nowrap; }
.pre-ns {
white-space: pre; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.ws-normal-m {
white-space: normal; }
.nowrap-m {
white-space: nowrap; }
.pre-m {
white-space: pre; } }
@media screen and (min-width: 60em) {
.ws-normal-l {
white-space: normal; }
.nowrap-l {
white-space: nowrap; }
.pre-l {
white-space: pre; } }
/*
VERTICAL ALIGN
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.v-base {
vertical-align: baseline; }
.v-mid {
vertical-align: middle; }
.v-top {
vertical-align: top; }
.v-btm {
vertical-align: bottom; }
@media screen and (min-width: 30em) {
.v-base-ns {
vertical-align: baseline; }
.v-mid-ns {
vertical-align: middle; }
.v-top-ns {
vertical-align: top; }
.v-btm-ns {
vertical-align: bottom; } }
@media screen and (min-width: 30em) and (max-width: 60em) {
.v-base-m {
vertical-align: baseline; }
.v-mid-m {
vertical-align: middle; }
.v-top-m {
vertical-align: top; }
.v-btm-m {
vertical-align: bottom; } }
@media screen and (min-width: 60em) {
.v-base-l {
vertical-align: baseline; }
.v-mid-l {
vertical-align: middle; }
.v-top-l {
vertical-align: top; }
.v-btm-l {
vertical-align: bottom; } }
/*
Z-INDEX
Base
z = z-index
Modifiers
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
-3 = literal value 3
-4 = literal value 4
-5 = literal value 5
-999 = literal value 999
-9999 = literal value 9999
-max = largest accepted z-index value as integer
-inherit = string value inherit
-initial = string value initial
-unset = string value unset
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z-0 {
z-index: 0; }
.z-1 {
z-index: 1; }
.z-2 {
z-index: 2; }
.z-3 {
z-index: 3; }
.z-4 {
z-index: 4; }
.z-5 {
z-index: 5; }
.z-999 {
z-index: 999; }
.z-9999 {
z-index: 9999; }
.z-max {
z-index: 2147483647; }
.z-inherit {
z-index: inherit; }
.z-initial {
z-index: initial; }
.z-unset {
z-index: unset; }
/*# sourceMappingURL=app.css.map?v=2579646f1e134e21bd288f0d68a0f90e*/