Last active
November 28, 2015 17:39
-
-
Save OleVik/f885e51ba3fe8a6d07e7 to your computer and use it in GitHub Desktop.
Foundation 6 Flex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset"UTF-8"; | |
/*! 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 { | |
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"] { | |
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 */ | |
/* 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; | |
} | |
body.is-reveal-open { | |
overflow: hidden; | |
} | |
.foundation-mq { | |
font-family:"small=0em&medium=32em&large=64em&xlarge=75em&xxlarge=90em"; | |
} | |
.slide-in-down.mui-enter, .slide-in-left.mui-enter, .slide-in-up.mui-enter, .slide-in-right.mui-enter, .slide-out-down.mui-leave, .slide-out-right.mui-leave, .slide-out-up.mui-leave, .slide-out-left.mui-leave, .fade-in.mui-enter, .fade-out.mui-leave, .hinge-in-from-top.mui-enter, .hinge-in-from-right.mui-enter, .hinge-in-from-bottom.mui-enter, .hinge-in-from-left.mui-enter, .hinge-in-from-middle-x.mui-enter, .hinge-in-from-middle-y.mui-enter, .hinge-out-from-top.mui-leave, .hinge-out-from-right.mui-leave, .hinge-out-from-bottom.mui-leave, .hinge-out-from-left.mui-leave, .hinge-out-from-middle-x.mui-leave, .hinge-out-from-middle-y.mui-leave, .scale-in-up.mui-enter, .scale-in-down.mui-enter, .scale-out-up.mui-leave, .scale-out-down.mui-leave, .spin-in.mui-enter, .spin-out.mui-leave, .spin-in-ccw.mui-enter, .spin-out-ccw.mui-leave { | |
transition-duration: 500ms; | |
transition-timing-function: linear; | |
} | |
html, body { | |
font-size: 100%; | |
box-sizing: border-box; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
body { | |
padding: 0; | |
margin: 0; | |
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; | |
font-weight: normal; | |
line-height: 1.5; | |
color: #0a0a0a; | |
background: #fefefe; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
img { | |
max-width: 100%; | |
height: auto; | |
-ms-interpolation-mode: bicubic; | |
display: inline-block; | |
vertical-align: middle; | |
} | |
textarea { | |
height: auto; | |
min-height: 50px; | |
border-radius: 0; | |
} | |
select { | |
width: 100%; | |
border-radius: 0; | |
} | |
#map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object, .mqa-display img, .mqa-display embed, .mqa-display object { | |
max-width: none !important; | |
} | |
button { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
background: transparent; | |
padding: 0; | |
border: 0; | |
border-radius: 0; | |
line-height: 1; | |
} | |
.row { | |
max-width: 75rem; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-flex-flow: row wrap; | |
-ms-flex-flow: row wrap; | |
flex-flow: row wrap; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.row .row, .column-row .row { | |
margin-left: -0.9375rem; | |
margin-right: -0.9375rem; | |
} | |
.column, .columns { | |
-webkit-flex: 1 1 0px; | |
-ms-flex: 1 1 0px; | |
flex: 1 1 0px; | |
padding-left: 0.9375rem; | |
padding-right: 0.9375rem; | |
} | |
.small-1 { | |
-webkit-flex: 0 0 8.33333%; | |
-ms-flex: 0 0 8.33333%; | |
flex: 0 0 8.33333%; | |
max-width: 8.33333%; | |
} | |
.small-2 { | |
-webkit-flex: 0 0 16.66667%; | |
-ms-flex: 0 0 16.66667%; | |
flex: 0 0 16.66667%; | |
max-width: 16.66667%; | |
} | |
.small-3 { | |
-webkit-flex: 0 0 25%; | |
-ms-flex: 0 0 25%; | |
flex: 0 0 25%; | |
max-width: 25%; | |
} | |
.small-4 { | |
-webkit-flex: 0 0 33.33333%; | |
-ms-flex: 0 0 33.33333%; | |
flex: 0 0 33.33333%; | |
max-width: 33.33333%; | |
} | |
.small-5 { | |
-webkit-flex: 0 0 41.66667%; | |
-ms-flex: 0 0 41.66667%; | |
flex: 0 0 41.66667%; | |
max-width: 41.66667%; | |
} | |
.small-6 { | |
-webkit-flex: 0 0 50%; | |
-ms-flex: 0 0 50%; | |
flex: 0 0 50%; | |
max-width: 50%; | |
} | |
.small-7 { | |
-webkit-flex: 0 0 58.33333%; | |
-ms-flex: 0 0 58.33333%; | |
flex: 0 0 58.33333%; | |
max-width: 58.33333%; | |
} | |
.small-8 { | |
-webkit-flex: 0 0 66.66667%; | |
-ms-flex: 0 0 66.66667%; | |
flex: 0 0 66.66667%; | |
max-width: 66.66667%; | |
} | |
.small-9 { | |
-webkit-flex: 0 0 75%; | |
-ms-flex: 0 0 75%; | |
flex: 0 0 75%; | |
max-width: 75%; | |
} | |
.small-10 { | |
-webkit-flex: 0 0 83.33333%; | |
-ms-flex: 0 0 83.33333%; | |
flex: 0 0 83.33333%; | |
max-width: 83.33333%; | |
} | |
.small-11 { | |
-webkit-flex: 0 0 91.66667%; | |
-ms-flex: 0 0 91.66667%; | |
flex: 0 0 91.66667%; | |
max-width: 91.66667%; | |
} | |
.small-12 { | |
-webkit-flex: 0 0 100%; | |
-ms-flex: 0 0 100%; | |
flex: 0 0 100%; | |
max-width: 100%; | |
} | |
@media screen and (min-width: 32em) { | |
.medium-1 { | |
-webkit-flex: 0 0 8.33333%; | |
-ms-flex: 0 0 8.33333%; | |
flex: 0 0 8.33333%; | |
max-width: 8.33333%; | |
} | |
.medium-2 { | |
-webkit-flex: 0 0 16.66667%; | |
-ms-flex: 0 0 16.66667%; | |
flex: 0 0 16.66667%; | |
max-width: 16.66667%; | |
} | |
.medium-3 { | |
-webkit-flex: 0 0 25%; | |
-ms-flex: 0 0 25%; | |
flex: 0 0 25%; | |
max-width: 25%; | |
} | |
.medium-4 { | |
-webkit-flex: 0 0 33.33333%; | |
-ms-flex: 0 0 33.33333%; | |
flex: 0 0 33.33333%; | |
max-width: 33.33333%; | |
} | |
.medium-5 { | |
-webkit-flex: 0 0 41.66667%; | |
-ms-flex: 0 0 41.66667%; | |
flex: 0 0 41.66667%; | |
max-width: 41.66667%; | |
} | |
.medium-6 { | |
-webkit-flex: 0 0 50%; | |
-ms-flex: 0 0 50%; | |
flex: 0 0 50%; | |
max-width: 50%; | |
} | |
.medium-7 { | |
-webkit-flex: 0 0 58.33333%; | |
-ms-flex: 0 0 58.33333%; | |
flex: 0 0 58.33333%; | |
max-width: 58.33333%; | |
} | |
.medium-8 { | |
-webkit-flex: 0 0 66.66667%; | |
-ms-flex: 0 0 66.66667%; | |
flex: 0 0 66.66667%; | |
max-width: 66.66667%; | |
} | |
.medium-9 { | |
-webkit-flex: 0 0 75%; | |
-ms-flex: 0 0 75%; | |
flex: 0 0 75%; | |
max-width: 75%; | |
} | |
.medium-10 { | |
-webkit-flex: 0 0 83.33333%; | |
-ms-flex: 0 0 83.33333%; | |
flex: 0 0 83.33333%; | |
max-width: 83.33333%; | |
} | |
.medium-11 { | |
-webkit-flex: 0 0 91.66667%; | |
-ms-flex: 0 0 91.66667%; | |
flex: 0 0 91.66667%; | |
max-width: 91.66667%; | |
} | |
.medium-12 { | |
-webkit-flex: 0 0 100%; | |
-ms-flex: 0 0 100%; | |
flex: 0 0 100%; | |
max-width: 100%; | |
} | |
} | |
@media screen and (min-width: 64em) { | |
.large-1 { | |
-webkit-flex: 0 0 8.33333%; | |
-ms-flex: 0 0 8.33333%; | |
flex: 0 0 8.33333%; | |
max-width: 8.33333%; | |
} | |
.large-2 { | |
-webkit-flex: 0 0 16.66667%; | |
-ms-flex: 0 0 16.66667%; | |
flex: 0 0 16.66667%; | |
max-width: 16.66667%; | |
} | |
.large-3 { | |
-webkit-flex: 0 0 25%; | |
-ms-flex: 0 0 25%; | |
flex: 0 0 25%; | |
max-width: 25%; | |
} | |
.large-4 { | |
-webkit-flex: 0 0 33.33333%; | |
-ms-flex: 0 0 33.33333%; | |
flex: 0 0 33.33333%; | |
max-width: 33.33333%; | |
} | |
.large-5 { | |
-webkit-flex: 0 0 41.66667%; | |
-ms-flex: 0 0 41.66667%; | |
flex: 0 0 41.66667%; | |
max-width: 41.66667%; | |
} | |
.large-6 { | |
-webkit-flex: 0 0 50%; | |
-ms-flex: 0 0 50%; | |
flex: 0 0 50%; | |
max-width: 50%; | |
} | |
.large-7 { | |
-webkit-flex: 0 0 58.33333%; | |
-ms-flex: 0 0 58.33333%; | |
flex: 0 0 58.33333%; | |
max-width: 58.33333%; | |
} | |
.large-8 { | |
-webkit-flex: 0 0 66.66667%; | |
-ms-flex: 0 0 66.66667%; | |
flex: 0 0 66.66667%; | |
max-width: 66.66667%; | |
} | |
.large-9 { | |
-webkit-flex: 0 0 75%; | |
-ms-flex: 0 0 75%; | |
flex: 0 0 75%; | |
max-width: 75%; | |
} | |
.large-10 { | |
-webkit-flex: 0 0 83.33333%; | |
-ms-flex: 0 0 83.33333%; | |
flex: 0 0 83.33333%; | |
max-width: 83.33333%; | |
} | |
.large-11 { | |
-webkit-flex: 0 0 91.66667%; | |
-ms-flex: 0 0 91.66667%; | |
flex: 0 0 91.66667%; | |
max-width: 91.66667%; | |
} | |
.large-12 { | |
-webkit-flex: 0 0 100%; | |
-ms-flex: 0 0 100%; | |
flex: 0 0 100%; | |
max-width: 100%; | |
} | |
} | |
@media screen and (min-width: 32em) { | |
.medium-expand { | |
-webkit-flex: 1 1 0px; | |
-ms-flex: 1 1 0px; | |
flex: 1 1 0px; | |
} | |
} | |
@media screen and (min-width: 64em) { | |
.large-expand { | |
-webkit-flex: 1 1 0px; | |
-ms-flex: 1 1 0px; | |
flex: 1 1 0px; | |
} | |
} | |
.shrink { | |
-webkit-flex: 0 0 auto; | |
-ms-flex: 0 0 auto; | |
flex: 0 0 auto; | |
} | |
.row.medium-unstack .column { | |
-webkit-flex: 0 0 100%; | |
-ms-flex: 0 0 100%; | |
flex: 0 0 100%; | |
} | |
@media screen and (min-width: 32em) { | |
.row.medium-unstack .column { | |
-webkit-flex: 1 1 0px; | |
-ms-flex: 1 1 0px; | |
flex: 1 1 0px; | |
} | |
} | |
.row.large-unstack .column { | |
-webkit-flex: 0 0 100%; | |
-ms-flex: 0 0 100%; | |
flex: 0 0 100%; | |
} | |
@media screen and (min-width: 64em) { | |
.row.large-unstack .column { | |
-webkit-flex: 1 1 0px; | |
-ms-flex: 1 1 0px; | |
flex: 1 1 0px; | |
} | |
} | |
.small-order-1 { | |
-webkit-order: 1; | |
-ms-flex-order: 1; | |
order: 1; | |
} | |
.small-order-2 { | |
-webkit-order: 2; | |
-ms-flex-order: 2; | |
order: 2; | |
} | |
.small-order-3 { | |
-webkit-order: 3; | |
-ms-flex-order: 3; | |
order: 3; | |
} | |
.small-order-4 { | |
-webkit-order: 4; | |
-ms-flex-order: 4; | |
order: 4; | |
} | |
.small-order-5 { | |
-webkit-order: 5; | |
-ms-flex-order: 5; | |
order: 5; | |
} | |
.small-order-6 { | |
-webkit-order: 6; | |
-ms-flex-order: 6; | |
order: 6; | |
} | |
@media screen and (min-width: 32em) { | |
.medium-order-1 { | |
-webkit-order: 1; | |
-ms-flex-order: 1; | |
order: 1; | |
} | |
.medium-order-2 { | |
-webkit-order: 2; | |
-ms-flex-order: 2; | |
order: 2; | |
} | |
.medium-order-3 { | |
-webkit-order: 3; | |
-ms-flex-order: 3; | |
order: 3; | |
} | |
.medium-order-4 { | |
-webkit-order: 4; | |
-ms-flex-order: 4; | |
order: 4; | |
} | |
.medium-order-5 { | |
-webkit-order: 5; | |
-ms-flex-order: 5; | |
order: 5; | |
} | |
.medium-order-6 { | |
-webkit-order: 6; | |
-ms-flex-order: 6; | |
order: 6; | |
} | |
} | |
@media screen and (min-width: 64em) { | |
.large-order-1 { | |
-webkit-order: 1; | |
-ms-flex-order: 1; | |
order: 1; | |
} | |
.large-order-2 { | |
-webkit-order: 2; | |
-ms-flex-order: 2; | |
order: 2; | |
} | |
.large-order-3 { | |
-webkit-order: 3; | |
-ms-flex-order: 3; | |
order: 3; | |
} | |
.large-order-4 { | |
-webkit-order: 4; | |
-ms-flex-order: 4; | |
order: 4; | |
} | |
.large-order-5 { | |
-webkit-order: 5; | |
-ms-flex-order: 5; | |
order: 5; | |
} | |
.large-order-6 { | |
-webkit-order: 6; | |
-ms-flex-order: 6; | |
order: 6; | |
} | |
} | |
.row.align-right { | |
-webkit-justify-content: flex-end; | |
-ms-flex-pack: end; | |
justify-content: flex-end; | |
} | |
.row.align-center { | |
-webkit-justify-content: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
.row.align-justify { | |
-webkit-justify-content: space-between; | |
-ms-flex-pack: justify; | |
justify-content: space-between; | |
} | |
.row.align-spaced { | |
-webkit-justify-content: space-around; | |
-ms-flex-pack: distribute; | |
justify-content: space-around; | |
} | |
.row.align-top { | |
-webkit-align-items: flex-start; | |
-ms-flex-align: start; | |
align-items: flex-start; | |
} | |
.column.align-top { | |
-webkit-align-self: flex-start; | |
-ms-flex-item-align: start; | |
align-self: flex-start; | |
} | |
.row.align-bottom { | |
-webkit-align-items: flex-end; | |
-ms-flex-align: end; | |
align-items: flex-end; | |
} | |
.column.align-bottom { | |
-webkit-align-self: flex-end; | |
-ms-flex-item-align: end; | |
align-self: flex-end; | |
} | |
.row.align-middle { | |
-webkit-align-items: center; | |
-ms-flex-align: center; | |
align-items: center; | |
} | |
.column.align-middle { | |
-webkit-align-self: center; | |
-ms-flex-item-align: center; | |
align-self: center; | |
} | |
.row.align-stretch { | |
-webkit-align-items: stretch; | |
-ms-flex-align: stretch; | |
align-items: stretch; | |
} | |
.column.align-stretch { | |
-webkit-align-self: stretch; | |
-ms-flex-item-align: stretch; | |
align-self: stretch; | |
} | |
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { | |
margin: 0; | |
padding: 0; | |
} | |
p { | |
font-size: inherit; | |
line-height: 1.6; | |
margin-bottom: 1rem; | |
text-rendering: optimizeLegibility; | |
} | |
em, i { | |
font-style: italic; | |
line-height: inherit; | |
} | |
strong, b { | |
font-weight: bold; | |
line-height: inherit; | |
} | |
small { | |
font-size: 80%; | |
line-height: inherit; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; | |
font-weight: normal; | |
font-style: normal; | |
color: inherit; | |
text-rendering: optimizeLegibility; | |
margin-top: 0; | |
margin-bottom: 0.5rem; | |
line-height: 1.4; | |
} | |
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { | |
color: #cacaca; | |
line-height: 0; | |
} | |
h1 { | |
font-size: 1.5rem; | |
} | |
h2 { | |
font-size: 1.25rem; | |
} | |
h3 { | |
font-size: 1.1875rem; | |
} | |
h4 { | |
font-size: 1.125rem; | |
} | |
h5 { | |
font-size: 1.0625rem; | |
} | |
h6 { | |
font-size: 1rem; | |
} | |
@media screen and (min-width: 32em) { | |
h1 { | |
font-size: 3rem; | |
} | |
h2 { | |
font-size: 2.5rem; | |
} | |
h3 { | |
font-size: 1.9375rem; | |
} | |
h4 { | |
font-size: 1.5625rem; | |
} | |
h5 { | |
font-size: 1.25rem; | |
} | |
h6 { | |
font-size: 1rem; | |
} | |
} | |
a { | |
color: #2199e8; | |
text-decoration: none; | |
line-height: inherit; | |
cursor: pointer; | |
} | |
a:hover, a:focus { | |
color: #1585cf; | |
} | |
a img { | |
border: 0; | |
} | |
hr { | |
max-width: 75rem; | |
height: 0; | |
border-top: 0; | |
border-bottom: 1px solid #cacaca; | |
margin: 1.25rem auto; | |
clear: both; | |
} | |
ul, ol, dl { | |
line-height: 1.6; | |
margin-bottom: 1rem; | |
list-style-position: outside; | |
} | |
li { | |
font-size: inherit; | |
} | |
ul { | |
list-style-type: disc; | |
margin-left: 1.25rem; | |
} | |
ol { | |
margin-left: 1.25rem; | |
} | |
ul ul, ol ul, ul ol, ol ol { | |
margin-left: 1.25rem; | |
margin-bottom: 0; | |
list-style-type: inherit; | |
} | |
dl { | |
margin-bottom: 1rem; | |
} | |
dl dt { | |
margin-bottom: 0.3rem; | |
font-weight: bold; | |
} | |
blockquote { | |
margin: 0 0 1rem; | |
padding: 0.5625rem 1.25rem 0 1.1875rem; | |
border-left: 1px solid #cacaca; | |
} | |
blockquote, blockquote p { | |
line-height: 1.6; | |
color: #8a8a8a; | |
} | |
cite { | |
display: block; | |
font-size: 0.8125rem; | |
color: #8a8a8a; | |
} | |
cite:before { | |
content:'\2014 \0020'; | |
} | |
abbr { | |
color: #0a0a0a; | |
cursor: help; | |
border-bottom: 1px dotted #0a0a0a; | |
} | |
code { | |
font-family: Consolas, "Liberation Mono", Courier, monospace; | |
font-weight: normal; | |
color: #0a0a0a; | |
background-color: #e6e6e6; | |
border: 1px solid #cacaca; | |
padding: 0.125rem 0.3125rem 0.0625rem; | |
} | |
kbd { | |
padding: 0.125rem 0.25rem 0; | |
margin: 0; | |
background-color: #e6e6e6; | |
color: #0a0a0a; | |
font-family: Consolas, "Liberation Mono", Courier, monospace; | |
} | |
.subheader { | |
margin-top: 0.2rem; | |
margin-bottom: 0.5rem; | |
font-weight: normal; | |
line-height: 1.4; | |
color: #8a8a8a; | |
} | |
.lead { | |
font-size: 125%; | |
line-height: 1.6; | |
} | |
.stat { | |
font-size: 2.5rem; | |
line-height: 1; | |
} | |
p + .stat { | |
margin-top: -1rem; | |
} | |
.no-bullet { | |
margin-left: 0; | |
list-style: none; | |
} | |
.text-left { | |
text-align: left; | |
} | |
@media screen and (min-width: 32em) { | |
.medium-text-left { | |
text-align: left; | |
} | |
} | |
@media screen and (min-width: 64em) { | |
.large-text-left { | |
text-align: left; | |
} | |
} | |
.text-right { | |
text-align: right; | |
} | |
@media screen and (min-width: 32em) { | |
.medium-text-right { | |
text-align: right; | |
} | |
} | |
@media screen and (min-width: 64em) { | |
.large-text-right { | |
text-align: right; | |
} | |
} | |
.text-center { | |
text-align: center; | |
} | |
@media screen and (min-width: 32em) { | |
.medium-text-center { | |
text-align: center; | |
} | |
} | |
@media screen and (min-width: 64em) { | |
.large-text-center { | |
text-align: center; | |
} | |
} | |
.text-justify { | |
text-align: justify; | |
} | |
@media screen and (min-width: 32em) { | |
.medium-text-justify { | |
text-align: justify; | |
} | |
} | |
@media screen and (min-width: 64em) { | |
.large-text-justify { | |
text-align: justify; | |
} | |
} | |
.show-for-print { | |
display: none !important; | |
} | |
@media print { | |
* { | |
background: transparent !important; | |
color: black !important; | |
box-shadow: none !important; | |
text-shadow: none !important; | |
} | |
.show-for-print { | |
display: block !important; | |
} | |
.hide-for-print { | |
display: none !important; | |
} | |
table.show-for-print { | |
display: table !important; | |
} | |
thead.show-for-print { | |
display: table-header-group !important; | |
} | |
tbody.show-for-print { | |
display: table-row-group !important; | |
} | |
tr.show-for-print { | |
display: table-row !important; | |
} | |
td.show-for-print { | |
display: table-cell !important; | |
} | |
th.show-for-print { | |
display: table-cell !important; | |
} | |
a, a:visited { | |
text-decoration: underline; | |
} | |
a[href]:after { | |
content:" (" attr(href)")"; | |
} | |
.ir a:after, a[href^='javascript:']:after, a[href^='#']:after { | |
content:''; | |
} | |
abbr[title]:after { | |
content:" (" attr(title)")"; | |
} | |
pre, blockquote { | |
border: 1px solid #999; | |
page-break-inside: avoid; | |
} | |
thead { | |
display: table-header-group; | |
} | |
tr, img { | |
page-break-inside: avoid; | |
} | |
img { | |
max-width: 100% !important; | |
} | |
@page { | |
margin: 0.5cm; | |
} | |
p, h2, h3 { | |
orphans: 3; | |
widows: 3; | |
} | |
h2, h3 { | |
page-break-after: avoid; | |
} | |
} | |
.button { | |
display: inline-block; | |
text-align: center; | |
line-height: 1; | |
cursor: pointer; | |
-webkit-appearance: none; | |
transition: all 0.25s ease-out; | |
vertical-align: middle; | |
border: 1px solid transparent; | |
border-radius: 0; | |
padding: 0.85em 1em; | |
margin: 0 1rem 1rem 0; | |
font-size: 0.9rem; | |
background: #2199e8; | |
color: #fff; | |
} | |
[data-whatinput="mouse"] .button { | |
outline: 0; | |
} | |
.button:hover, .button:focus { | |
background: #1583cc; | |
color: #fff; | |
} | |
.button.tiny { | |
font-size: 0.6rem; | |
} | |
.button.small { | |
font-size: 0.75rem; | |
} | |
.button.large { | |
font-size: 1.25rem; | |
} | |
.button.expanded { | |
display: block; | |
width: 100%; | |
margin-left: 0; | |
margin-right: 0; | |
} | |
.button.primary { | |
background: #2199e8; | |
color: #fff; | |
} | |
.button.primary:hover, .button.primary:focus { | |
background: #147cc0; | |
color: #fff; | |
} | |
.button.secondary { | |
background: #777; | |
color: #fff; | |
} | |
.button.secondary:hover, .button.secondary:focus { | |
background: #5f5f5f; | |
color: #fff; | |
} | |
.button.success { | |
background: #3adb76; | |
color: #fff; | |
} | |
.button.success:hover, .button.success:focus { | |
background: #22bb5b; | |
color: #fff; | |
} | |
.button.alert { | |
background: #ec5840; | |
color: #fff; | |
} | |
.button.alert:hover, .button.alert:focus { | |
background: #da3116; | |
color: #fff; | |
} | |
.button.warning { | |
background: #ffae00; | |
color: #fff; | |
} | |
.button.warning:hover, .button.warning:focus { | |
background: #cc8b00; | |
color: #fff; | |
} | |
.button.hollow { | |
border: 1px solid #2199e8; | |
color: #2199e8; | |
} | |
.button.hollow, .button.hollow:hover, .button.hollow:focus { | |
background: transparent; | |
} | |
.button.hollow:hover, .button.hollow:focus { | |
border-color: #0c4d78; | |
color: #0c4d78; | |
} | |
.button.hollow.primary { | |
border: 1px solid #2199e8; | |
color: #2199e8; | |
} | |
.button.hollow.primary:hover, .button.hollow.primary:focus { | |
border-color: #0c4d78; | |
color: #0c4d78; | |
} | |
.button.hollow.secondary { | |
border: 1px solid #777; | |
color: #777; | |
} | |
.button.hollow.secondary:hover, .button.hollow.secondary:focus { | |
border-color: #3c3c3c; | |
color: #3c3c3c; | |
} | |
.button.hollow.success { | |
border: 1px solid #3adb76; | |
color: #3adb76; | |
} | |
.button.hollow.success:hover, .button.hollow.success:focus { | |
border-color: #157539; | |
color: #157539; | |
} | |
.button.hollow.alert { | |
border: 1px solid #ec5840; | |
color: #ec5840; | |
} | |
.button.hollow.alert:hover, .button.hollow.alert:focus { | |
border-color: #881f0e; | |
color: #881f0e; | |
} | |
.button.hollow.warning { | |
border: 1px solid #ffae00; | |
color: #ffae00; | |
} | |
.button.hollow.warning:hover, .button.hollow.warning:focus { | |
border-color: #805700; | |
color: #805700; | |
} | |
.button.disabled { | |
opacity: 0.25; | |
cursor: not-allowed; | |
pointer-events: none; | |
} | |
.button.dropdown::after { | |
content:''; | |
display: block; | |
width: 0; | |
height: 0; | |
border: inset 0.4em; | |
border-color: #fefefe transparent transparent; | |
border-top-style: solid; | |
position: relative; | |
top: 0.4em; | |
float: right; | |
margin-left: 1em; | |
display: inline-block; | |
} | |
.button.arrow-only::after { | |
margin-left: 0; | |
float: none; | |
top: 0.2em; | |
} | |
[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], textarea { | |
display: block; | |
box-sizing: border-box; | |
width: 100%; | |
height: 2.4375rem; | |
padding: 0.5rem; | |
border: 1px solid #cacaca; | |
margin: 0 0 1rem; | |
font-family: inherit; | |
font-size: 1rem; | |
color: #8a8a8a; | |
background-color: #fefefe; | |
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); | |
border-radius: 0; | |
transition: box-shadow 0.5s, border-color 0.25s ease-in-out; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
} | |
[type="text"]:focus, [type="password"]:focus, [type="date"]:focus, [type="datetime"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="week"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="url"]:focus, [type="color"]:focus, textarea:focus { | |
border: 1px solid #8a8a8a; | |
background: #fefefe; | |
outline: none; | |
box-shadow: 0 0 5px #cacaca; | |
transition: box-shadow 0.5s, border-color 0.25s ease-in-out; | |
} | |
textarea { | |
max-width: 100%; | |
} | |
textarea[rows] { | |
height: auto; | |
} | |
input:disabled, input[readonly], textarea:disabled, textarea[readonly] { | |
background-color: #e6e6e6; | |
cursor: default; | |
} | |
[type="submit"], [type="button"] { | |
border-radius: 0; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
} | |
input[type="search"] { | |
box-sizing: border-box; | |
} | |
[type="file"], [type="checkbox"], [type="radio"] { | |
margin: 0 0 1rem; | |
} | |
[type="checkbox"] + label, [type="radio"] + label { | |
display: inline-block; | |
margin-left: 0.5rem; | |
margin-right: 1rem; | |
margin-bottom: 0; | |
vertical-align: baseline; | |
} | |
label >[type="checkbox"], label >[type="label"] { | |
margin-right: 0.5rem; | |
} | |
[type="file"] { | |
width: 100%; | |
} | |
label { | |
display: block; | |
margin: 0; | |
font-size: 0.875rem; | |
font-weight: normal; | |
line-height: 1.8; | |
color: #0a0a0a; | |
} | |
label.middle { | |
margin: 0 0 1rem; | |
padding: 0.5625rem 0; | |
} | |
.help-text { | |
margin-top: -0.5rem; | |
font-size: 0.8125rem; | |
font-style: italic; | |
color: #333; | |
} | |
.input-group { | |
display: table; | |
width: 100%; | |
margin-bottom: 1rem; | |
} | |
.input-group-label, .input-group-field, .input-group-button { | |
display: table-cell; | |
margin: 0; | |
vertical-align: middle; | |
} | |
.input-group-label { | |
text-align: center; | |
width: 1%; | |
height: 100%; | |
padding: 0 1rem; | |
background: #e6e6e6; | |
color: #0a0a0a; | |
border: 1px solid #cacaca; | |
} | |
.input-group-label:first-child { | |
border-right: 0; | |
} | |
.input-group-label:last-child { | |
border-left: 0; | |
} | |
.input-group-button { | |
height: 100%; | |
padding-top: 0; | |
padding-bottom: 0; | |
text-align: center; | |
width: 1%; | |
} | |
fieldset { | |
border: 0; | |
padding: 0; | |
margin: 0; | |
} | |
legend { | |
margin-bottom: 0.5rem; | |
} | |
.fieldset { | |
border: 1px solid #cacaca; | |
padding: 1.25rem; | |
margin: 1.125rem 0; | |
} | |
.fieldset legend { | |
background: #fefefe; | |
padding: 0 0.1875rem; | |
margin: 0; | |
margin-left: -0.1875rem; | |
} | |
select { | |
height: 2.4375rem; | |
padding: 0.5rem; | |
border: 1px solid #cacaca; | |
border-radius: 0; | |
margin: 0 0 1rem; | |
font-size: 1rem; | |
font-family: inherit; | |
line-height: normal; | |
color: #8a8a8a; | |
background-color: #fafafa; | |
border-radius: 0; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb(51, 51, 51)"></polygon></svg>'); | |
background-size: 9px 6px; | |
background-position: right 0.5rem center; | |
background-repeat: no-repeat; | |
} | |
@media screen and (min-width: 0\0) { | |
select { | |
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); | |
} | |
} | |
select:disabled { | |
background-color: #e6e6e6; | |
cursor: default; | |
} | |
select::-ms-expand { | |
display: none; | |
} | |
select[multiple] { | |
height: auto; | |
} | |
.is-invalid-input:not(:focus) { | |
background-color: rgba(236, 88, 64, 0.1); | |
border-color: #ec5840; | |
} | |
.is-invalid-label { | |
color: #ec5840; | |
} | |
.form-error { | |
display: none; | |
margin-top: -0.5rem; | |
margin-bottom: 1rem; | |
font-size: 0.75rem; | |
font-weight: bold; | |
color: #ec5840; | |
} | |
.form-error.is-visible { | |
display: block; | |
} | |
.hide { | |
display: none !important; | |
} | |
.invisible { | |
visibility: hidden; | |
} | |
@media screen and (min-width: 0em) and (max-width: 31.9375em) { | |
.hide-for-small-only { | |
display: none !important; | |
} | |
} | |
@media screen and (max-width: -0.0625em), screen and (min-width: 32em) { | |
.show-for-small-only { | |
display: none !important; | |
} | |
} | |
@media screen and (min-width: 32em) { | |
.hide-for-medium { | |
display: none !important; | |
} | |
} | |
@media screen and (max-width: 31.9375em) { | |
.show-for-medium { | |
display: none !important; | |
} | |
} | |
@media screen and (min-width: 32em) and (max-width: 63.9375em) { | |
.hide-for-medium-only { | |
display: none !important; | |
} | |
} | |
@media screen and (max-width: 31.9375em), screen and (min-width: 64em) { | |
.show-for-medium-only { | |
display: none !important; | |
} | |
} | |
@media screen and (min-width: 64em) { | |
.hide-for-large { | |
display: none !important; | |
} | |
} | |
@media screen and (max-width: 63.9375em) { | |
.show-for-large { | |
display: none !important; | |
} | |
} | |
@media screen and (min-width: 64em) and (max-width: 74.9375em) { | |
.hide-for-large-only { | |
display: none !important; | |
} | |
} | |
@media screen and (max-width: 63.9375em), screen and (min-width: 75em) { | |
.show-for-large-only { | |
display: none !important; | |
} | |
} | |
.show-for-sr, .show-on-focus { | |
position: absolute !important; | |
width: 1px; | |
height: 1px; | |
overflow: hidden; | |
clip: rect(0, 0, 0, 0); | |
} | |
.show-on-focus:active, .show-on-focus:focus { | |
position: static !important; | |
height: auto; | |
width: auto; | |
overflow: visible; | |
clip: auto; | |
} | |
.show-for-landscape, .hide-for-portrait { | |
display: block !important; | |
} | |
@media screen and (orientation: landscape) { | |
.show-for-landscape, .hide-for-portrait { | |
display: block !important; | |
} | |
} | |
@media screen and (orientation: portrait) { | |
.show-for-landscape, .hide-for-portrait { | |
display: none !important; | |
} | |
} | |
.hide-for-landscape, .show-for-portrait { | |
display: none !important; | |
} | |
@media screen and (orientation: landscape) { | |
.hide-for-landscape, .show-for-portrait { | |
display: none !important; | |
} | |
} | |
@media screen and (orientation: portrait) { | |
.hide-for-landscape, .show-for-portrait { | |
display: block !important; | |
} | |
} | |
.float-left { | |
float: left !important; | |
} | |
.float-right { | |
float: right !important; | |
} | |
.float-center { | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.clearfix::before, .clearfix::after { | |
content:' '; | |
display: table; | |
} | |
.clearfix::after { | |
clear: both; | |
} | |
.accordion { | |
list-style-type: none; | |
background: #fefefe; | |
border: 1px solid #e6e6e6; | |
border-radius: 0; | |
margin-left: 0; | |
} | |
.accordion-title { | |
display: block; | |
padding: 1.25rem 1rem; | |
line-height: 1; | |
font-size: 0.75rem; | |
color: #2199e8; | |
position: relative; | |
border-bottom: 1px solid #e6e6e6; | |
} | |
.accordion-title:hover, .accordion-title:focus { | |
background-color: #e6e6e6; | |
} | |
:last-child > .accordion-title { | |
border-bottom-width: 0; | |
} | |
.accordion-title::before { | |
content:'+'; | |
position: absolute; | |
right: 1rem; | |
top: 50%; | |
margin-top: -0.5rem; | |
} | |
.is-active > .accordion-title::before { | |
content:'–'; | |
} | |
.accordion-content { | |
padding: 1.25rem 1rem; | |
display: none; | |
border-bottom: 1px solid #e6e6e6; | |
} | |
.badge { | |
display: inline-block; | |
padding: 0.3em; | |
min-width: 2.1em; | |
font-size: 0.6rem; | |
text-align: center; | |
border-radius: 50%; | |
background: #2199e8; | |
color: #fefefe; | |
} | |
.badge.secondary { | |
background: #777; | |
color: #fefefe; | |
} | |
.badge.success { | |
background: #3adb76; | |
color: #fefefe; | |
} | |
.badge.alert { | |
background: #ec5840; | |
color: #fefefe; | |
} | |
.badge.warning { | |
background: #ffae00; | |
color: #fefefe; | |
} | |
.breadcrumbs { | |
list-style: none; | |
margin: 0 0 1rem 0; | |
} | |
.breadcrumbs::before, .breadcrumbs::after { | |
content:' '; | |
display: table; | |
} | |
.breadcrumbs::after { | |
clear: both; | |
} | |
.breadcrumbs li { | |
float: left; | |
color: #0a0a0a; | |
font-size: 0.6875rem; | |
cursor: default; | |
text-transform: uppercase; | |
} | |
.breadcrumbs li:not(:last-child)::after { | |
color: #cacaca; | |
content:"/"; | |
margin: 0 0.75rem; | |
position: relative; | |
top: 1px; | |
opacity: 1; | |
} | |
.breadcrumbs a { | |
color: #2199e8; | |
} | |
.breadcrumbs a:hover { | |
text-decoration: underline; | |
} | |
.breadcrumbs .disabled { | |
color: #cacaca; | |
} | |
.button-group { | |
margin-bottom: 1rem; | |
font-size: 0.9rem; | |
} | |
.button-group::before, .button-group::after { | |
content:' '; | |
display: table; | |
} | |
.button-group::after { | |
clear: both; | |
} | |
.button-group .button { | |
float: left; | |
margin: 0; | |
font-size: inherit; | |
} | |
.button-group .button:not(:last-child) { | |
border-right: 1px solid #fefefe; | |
} | |
.button-group.tiny { | |
font-size: 0.6rem; | |
} | |
.button-group.small { | |
font-size: 0.75rem; | |
} | |
.button-group.large { | |
font-size: 1.25rem; | |
} | |
.button-group.expanded .button:nth-last-child(2):first-child, .button-group.expanded .button:nth-last-child(2):first-child ~ .button { | |
width: 50%; | |
} | |
.button-group.expanded .button:nth-last-child(3):first-child, .button-group.expanded .button:nth-last-child(3):first-child ~ .button { | |
width: 33.33333%; | |
} | |
.button-group.expanded .button:nth-last-child(4):first-child, .button-group.expanded .button:nth-last-child(4):first-child ~ .button { | |
width: 25%; | |
} | |
.button-group.expanded .button:nth-last-child(5):first-child, .button-group.expanded .button:nth-last-child(5):first-child ~ .button { | |
width: 20%; | |
} | |
.button-group.expanded .button:nth-last-child(6):first-child, .button-group.expanded .button:nth-last-child(6):first-child ~ .button { | |
width: 16.66667%; | |
} | |
.button-group.primary .button { | |
background: #2199e8; | |
color: #fff; | |
} | |
.button-group.primary .button:hover, .button-group.primary .button:focus { | |
background: #147cc0; | |
color: #fff; | |
} | |
.button-group.secondary .button { | |
background: #777; | |
color: #fff; | |
} | |
.button-group.secondary .button:hover, .button-group.secondary .button:focus { | |
background: #5f5f5f; | |
color: #fff; | |
} | |
.button-group.success .button { | |
background: #3adb76; | |
color: #fff; | |
} | |
.button-group.success .button:hover, .button-group.success .button:focus { | |
background: #22bb5b; | |
color: #fff; | |
} | |
.button-group.alert .button { | |
background: #ec5840; | |
color: #fff; | |
} | |
.button-group.alert .button:hover, .button-group.alert .button:focus { | |
background: #da3116; | |
color: #fff; | |
} | |
.button-group.warning .button { | |
background: #ffae00; | |
color: #fff; | |
} | |
.button-group.warning .button:hover, .button-group.warning .button:focus { | |
background: #cc8b00; | |
color: #fff; | |
} | |
.button-group.stacked .button, .button-group.stacked-for-small .button { | |
width: 100%; | |
border-right: 0; | |
} | |
@media screen and (min-width: 32em) { | |
.button-group.stacked-for-small .button { | |
width: auto; | |
} | |
.button-group.stacked-for-small .button:not(:last-child) { | |
border-right: 1px solid #fefefe; | |
} | |
} | |
.callout { | |
margin: 0 0 1rem 0; | |
padding: 1rem; | |
border: 1px solid rgba(10, 10, 10, 0.25); | |
border-radius: 0; | |
position: relative; | |
background-color: white; | |
} | |
.callout > :first-child { | |
margin-top: 0; | |
} | |
.callout > :last-child { | |
margin-bottom: 0; | |
} | |
.callout.primary { | |
background-color: #def0fc; | |
} | |
.callout.primary a { | |
color: #116ca8; | |
} | |
.callout.primary a:hover { | |
color: #0a4063; | |
} | |
.callout.secondary { | |
background-color: #ebebeb; | |
} | |
.callout.success { | |
background-color: #e1faea; | |
} | |
.callout.success a { | |
color: #1ea450; | |
} | |
.callout.success a:hover { | |
color: #126330; | |
} | |
.callout.alert { | |
background-color: #fce6e2; | |
} | |
.callout.alert a { | |
color: #bf2b13; | |
} | |
.callout.alert a:hover { | |
color: #791b0c; | |
} | |
.callout.warning { | |
background-color: #fff3d9; | |
} | |
.callout.warning a { | |
color: #b37a00; | |
} | |
.callout.warning a:hover { | |
color: #664600; | |
} | |
.callout.small { | |
padding-top: 0.5rem; | |
padding-right: 0.5rem; | |
padding-bottom: 0.5rem; | |
padding-left: 0.5rem; | |
} | |
.callout.large { | |
padding-top: 3rem; | |
padding-right: 3rem; | |
padding-bottom: 3rem; | |
padding-left: 3rem; | |
} | |
.close-button { | |
position: absolute; | |
color: #8a8a8a; | |
right: 1rem; | |
top: 0.5rem; | |
font-size: 2em; | |
line-height: 1; | |
cursor: pointer; | |
} | |
[data-whatinput="mouse"] .close-button { | |
outline: 0; | |
} | |
.close-button:hover, .close-button:focus { | |
color: #0a0a0a; | |
} | |
.is-drilldown { | |
position: relative; | |
overflow: hidden; | |
} | |
.is-drilldown-sub { | |
position: absolute; | |
top: 0; | |
left: 100%; | |
z-index: -1; | |
height: 100%; | |
width: 100%; | |
background: #fefefe; | |
transition: -webkit-transform 0.15s linear; | |
transition: transform 0.15s linear; | |
} | |
.is-drilldown-sub.is-active { | |
z-index: 1; | |
display: block; | |
-webkit-transform: translateX(-100%); | |
-ms-transform: translateX(-100%); | |
transform: translateX(-100%); | |
} | |
.is-drilldown-sub.is-closing { | |
-webkit-transform: translateX(100%); | |
-ms-transform: translateX(100%); | |
transform: translateX(100%); | |
} | |
.is-drilldown-submenu-parent > a { | |
position: relative; | |
} | |
.is-drilldown-submenu-parent > a::after { | |
content:''; | |
display: block; | |
width: 0; | |
height: 0; | |
border: inset 6px; | |
border-color: transparent transparent transparent #2199e8; | |
border-left-style: solid; | |
position: absolute; | |
top: 50%; | |
margin-top: -6px; | |
right: 1rem; | |
} | |
.js-drilldown-back::before { | |
content:''; | |
display: block; | |
width: 0; | |
height: 0; | |
border: inset 6px; | |
border-color: transparent #2199e8 transparent transparent; | |
border-right-style: solid; | |
float: left; | |
margin-right: 0.75rem; | |
margin-left: 0.6rem; | |
margin-top: 14px; | |
} | |
.dropdown-pane { | |
background-color: #fefefe; | |
border: 1px solid #cacaca; | |
display: block; | |
padding: 1rem; | |
position: absolute; | |
visibility: hidden; | |
width: 300px; | |
z-index: 10; | |
border-radius: 0; | |
} | |
.dropdown-pane.is-open { | |
visibility: visible; | |
} | |
.dropdown-pane.tiny { | |
width: 100px; | |
} | |
.dropdown-pane.small { | |
width: 200px; | |
} | |
.dropdown-pane.large { | |
width: 400px; | |
} | |
.dropdown.menu .has-submenu { | |
position: relative; | |
} | |
.dropdown.menu .has-submenu a::after { | |
float: right; | |
margin-top: 3px; | |
margin-left: 10px; | |
} | |
.dropdown.menu .has-submenu.is-down-arrow > a::after { | |
content:''; | |
display: block; | |
width: 0; | |
height: 0; | |
border: inset 5px; | |
border-color: #2199e8 transparent transparent; | |
border-top-style: solid; | |
} | |
.dropdown.menu .has-submenu.is-left-arrow > a::after { | |
content:''; | |
display: block; | |
width: 0; | |
height: 0; | |
border: inset 5px; | |
border-color: transparent #2199e8 transparent transparent; | |
border-right-style: solid; | |
float: left; | |
margin-left: 0; | |
margin-right: 10px; | |
} | |
.dropdown.menu .has-submenu.is-right-arrow > a::after { | |
content:''; | |
display: block; | |
width: 0; | |
height: 0; | |
border: inset 5px; | |
border-color: transparent transparent transparent #2199e8; | |
border-left-style: solid; | |
} | |
.dropdown.menu .has-submenu.is-left-arrow.opens-inner .submenu { | |
right: 0; | |
left: auto; | |
} | |
.dropdown.menu .has-submenu.is-right-arrow.opens-inner .submenu { | |
left: 0; | |
right: auto; | |
} | |
.dropdown.menu .has-submenu.opens-inner .submenu { | |
top: 100%; | |
} | |
.dropdown.menu .submenu { | |
display: none; | |
position: absolute; | |
top: 0; | |
left: 100%; | |
min-width: 200px; | |
z-index: 1; | |
background: #fefefe; | |
border: 1px solid #cacaca; | |
} | |
.dropdown.menu .submenu > li { | |
width: 100%; | |
} | |
.dropdown.menu .submenu.first-sub { | |
top: 100%; | |
left: 0; | |
right: auto; | |
} | |
.dropdown.menu .submenu:not(.js-dropdown-nohover) > .has-submenu:hover > .dropdown.menu .submenu, .dropdown.menu .submenu.js-dropdown-active { | |
display: block; | |
} | |
.dropdown.menu .has-submenu.opens-left .submenu { | |
left: auto; | |
right: 100%; | |
} | |
.dropdown.menu.align-right .submenu.first-sub { | |
top: 100%; | |
left: auto; | |
right: 0; | |
} | |
.dropdown.menu.vertical { | |
width: 100px; | |
} | |
.dropdown.menu.vertical.align-right { | |
float: right; | |
} | |
.dropdown.menu.vertical > li .submenu { | |
top: 0; | |
left: 100%; | |
} | |
.flex-video { | |
position: relative; | |
height: 0; | |
padding-top: 1.5625rem; | |
padding-bottom: 75%; | |
margin-bottom: 1rem; | |
overflow: hidden; | |
} | |
.flex-video iframe, .flex-video object, .flex-video embed, .flex-video video { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
.flex-video.widescreen { | |
padding-bottom: 56.25%; | |
} | |
.flex-video.vimeo { | |
padding-top: 0; | |
} | |
.label { | |
display: inline-block; | |
padding: 0.33333rem 0.5rem; | |
font-size: 0.8rem; | |
line-height: 1; | |
white-space: nowrap; | |
cursor: default; | |
border-radius: 0; | |
background: #2199e8; | |
color: #fefefe; | |
} | |
.label.secondary { | |
background: #777; | |
color: #fefefe; | |
} | |
.label.success { | |
background: #3adb76; | |
color: #fefefe; | |
} | |
.label.alert { | |
background: #ec5840; | |
color: #fefefe; | |
} | |
.label.warning { | |
background: #ffae00; | |
color: #fefefe; | |
} | |
.media-object { | |
margin-bottom: 1rem; | |
display: block; | |
} | |
.media-object img { | |
max-width: none; | |
} | |
@media screen and (min-width: 0em) and (max-width: 31.9375em) { | |
.media-object.stack-for-small .media-object-section { | |
display: block; | |
padding: 0; | |
padding-bottom: 1rem; | |
} | |
.media-object.stack-for-small .media-object-section img { | |
width: 100%; | |
} | |
} | |
.media-object-section { | |
display: table-cell; | |
vertical-align: top; | |
} | |
.media-object-section:first-child { | |
padding-right: 1rem; | |
} | |
.media-object-section:last-child:not(+ &:first-child) { | |
padding-left: 1rem; | |
} | |
.media-object-section.middle { | |
vertical-align: middle; | |
} | |
.media-object-section.bottom { | |
vertical-align: bottom; | |
} | |
.menu { | |
margin: 0; | |
list-style-type: none; | |
} | |
.menu > li { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
[data-whatinput="mouse"] .menu > li { | |
outline: 0; | |
} | |
.menu > li > a { | |
display: block; | |
padding: 0.7rem 1rem; | |
line-height: 1; | |
} | |
.menu input, .menu a, .menu button { | |
margin-bottom: 0; | |
} | |
.menu > li > a > img, .menu > li > a > i { | |
vertical-align: middle; | |
} | |
.menu > li > a > span { | |
vertical-align: middle; | |
} | |
.menu > li > a > img, .menu > li > a > i { | |
display: inline-block; | |
margin-right: 0.25rem; | |
} | |
.menu > li { | |
display: table-cell; | |
} | |
.menu.vertical > li { | |
display: block; | |
} | |
@media screen and (min-width: 32em) { | |
.menu.medium-horizontal > li { | |
display: table-cell; | |
} | |
.menu.medium-vertical > li { | |
display: block; | |
} | |
} | |
@media screen and (min-width: 64em) { | |
.menu.large-horizontal > li { | |
display: table-cell; | |
} | |
.menu.large-vertical > li { | |
display: block; | |
} | |
} | |
.menu.simple a { | |
padding: 0; | |
margin-right: 1rem; | |
} | |
.menu.align-right > li { | |
float: right; | |
} | |
.menu.expanded { | |
display: table; | |
width: 100%; | |
} | |
.menu.expanded > li:nth-last-child(2):first-child, .menu.expanded > li:nth-last-child(2):first-child ~ li { | |
width: 50%; | |
} | |
.menu.expanded > li:nth-last-child(3):first-child, .menu.expanded > li:nth-last-child(3):first-child ~ li { | |
width: 33.33333%; | |
} | |
.menu.expanded > li:nth-last-child(4):first-child, .menu.expanded > li:nth-last-child(4):first-child ~ li { | |
width: 25%; | |
} | |
.menu.expanded > li:nth-last-child(5):first-child, .menu.expanded > li:nth-last-child(5):first-child ~ li { | |
width: 20%; | |
} | |
.menu.expanded > li:nth-last-child(6):first-child, .menu.expanded > li:nth-last-child(6):first-child ~ li { | |
width: 16.66667%; | |
} | |
.menu.expanded > li:first-child:last-child { | |
width: 100%; | |
} | |
.menu.icon-top > li > a { | |
text-align: center; | |
} | |
.menu.icon-top > li > a > img, .menu.icon-top > li > a > i { | |
display: block; | |
margin: 0 auto 0.25rem; | |
} | |
.menu.nested { | |
margin-left: 1rem; | |
} | |
.menu-text { | |
font-weight: bold; | |
color: inherit; | |
line-height: 1; | |
padding-top: 0; | |
padding-bottom: 0; | |
padding: 0.7rem 1rem; | |
} | |
html, body { | |
height: 100%; | |
} | |
.off-canvas-wrapper { | |
width: 100%; | |
overflow-x: hidden; | |
position: relative; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-overflow-scrolling: touch; | |
} | |
.off-canvas-wrapper-inner { | |
position: relative; | |
width: 100%; | |
transition: -webkit-transform 0.5s ease; | |
transition: transform 0.5s ease; | |
} | |
.off-canvas-wrapper-inner::before, .off-canvas-wrapper-inner::after { | |
content:' '; | |
display: table; | |
} | |
.off-canvas-wrapper-inner::after { | |
clear: both; | |
} | |
.off-canvas-content { | |
min-height: 100%; | |
background: #fefefe; | |
transition: -webkit-transform 0.5s ease; | |
transition: transform 0.5s ease; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
z-index: 1; | |
box-shadow: 0 0 10px rgba(10, 10, 10, 0.5); | |
} | |
.js-off-canvas-exit { | |
display: none; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: rgba(254, 254, 254, 0.25); | |
cursor: pointer; | |
transition: background 0.5s ease; | |
} | |
.is-off-canvas-open .js-off-canvas-exit { | |
display: block; | |
} | |
.off-canvas { | |
position: absolute; | |
background: #e6e6e6; | |
z-index: -1; | |
min-height: 100%; | |
-webkit-transform: translateX(0px); | |
-ms-transform: translateX(0px); | |
transform: translateX(0px); | |
} | |
[data-whatinput="mouse"] .off-canvas { | |
outline: 0; | |
} | |
.off-canvas.position-left { | |
left: -250px; | |
top: 0; | |
width: 250px; | |
} | |
.is-open-left { | |
-webkit-transform: translateX(250px); | |
-ms-transform: translateX(250px); | |
transform: translateX(250px); | |
} | |
.off-canvas.position-right { | |
right: -250px; | |
top: 0; | |
width: 250px; | |
} | |
.is-open-right { | |
-webkit-transform: translateX(-250px); | |
-ms-transform: translateX(-250px); | |
transform: translateX(-250px); | |
} | |
@media screen and (min-width: 32em) { | |
.position-left.reveal-for-medium { | |
left: 0; | |
} | |
.position-left.reveal-for-medium ~ .off-canvas-content { | |
margin-left: 250px; | |
} | |
.position-right.reveal-for-medium { | |
right: 0; | |
} | |
.position-right.reveal-for-medium ~ .off-canvas-content { | |
margin-right: 250px; | |
} | |
} | |
@media screen and (min-width: 64em) { | |
.position-left.reveal-for-large { | |
left: 0; | |
} | |
.position-left.reveal-for-large ~ .off-canvas-content { | |
margin-left: 250px; | |
} | |
.position-right.reveal-for-large { | |
right: 0; | |
} | |
.position-right.reveal-for-large ~ .off-canvas-content { | |
margin-right: 250px; | |
} | |
} | |
.orbit { | |
position: relative; | |
} | |
.orbit-container { | |
position: relative; | |
margin: 0; | |
overflow: hidden; | |
list-style: none; | |
} | |
.orbit-slide { | |
width: 100%; | |
max-height: 100%; | |
} | |
.orbit-figure { | |
margin: 0; | |
} | |
.orbit-image { | |
margin: 0; | |
width: 100%; | |
max-width: 100%; | |
} | |
.orbit-caption { | |
position: absolute; | |
bottom: 0; | |
width: 100%; | |
padding: 1rem; | |
margin-bottom: 0; | |
color: #fefefe; | |
background-color: rgba(10, 10, 10, 0.5); | |
} | |
.orbit-previous, .orbit-next { | |
position: absolute; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
z-index: 10; | |
padding: 1rem; | |
color: #fefefe; | |
} | |
[data-whatinput="mouse"] .orbit-previous, [data-whatinput="mouse"] .orbit-next { | |
outline: 0; | |
} | |
.orbit-previous:hover, .orbit-next:hover, .orbit-previous:active, .orbit-next:active, .orbit-previous:focus, .orbit-next:focus { | |
background-color: rgba(10, 10, 10, 0.5); | |
} | |
.orbit-previous { | |
left: 0; | |
} | |
.orbit-next { | |
left: auto; | |
right: 0; | |
} | |
.orbit-bullets { | |
position: relative; | |
margin-top: 0.8rem; | |
margin-bottom: 0.8rem; | |
text-align: center; | |
} | |
[data-whatinput="mouse"] .orbit-bullets { | |
outline: 0; | |
} | |
.orbit-bullets button { | |
width: 1.2rem; | |
height: 1.2rem; | |
margin: 0.1rem; | |
background-color: #cacaca; | |
border-radius: 50%; | |
} | |
.orbit-bullets button:hover { | |
background-color: #8a8a8a; | |
} | |
.orbit-bullets button.is-active { | |
background-color: #8a8a8a; | |
} | |
.pagination { | |
margin-left: 0; | |
margin-bottom: 1rem; | |
} | |
.pagination::before, .pagination::after { | |
content:' '; | |
display: table; | |
} | |
.pagination::after { | |
clear: both; | |
} | |
.pagination li { | |
font-size: 0.875rem; | |
margin-right: 0.0625rem; | |
display: none; | |
border-radius: 0; | |
} | |
.pagination li:last-child, .pagination li:first-child { | |
display: inline-block; | |
} | |
@media screen and (min-width: 32em) { | |
.pagination li { | |
display: inline-block; | |
} | |
} | |
.pagination a, .pagination button { | |
color: #0a0a0a; | |
display: block; | |
padding: 0.1875rem 0.625rem; | |
border-radius: 0; | |
} | |
.pagination a:hover, .pagination button:hover { | |
background: #e6e6e6; | |
} | |
.pagination[aria-label="previous"]::before { | |
content:'«'; | |
display: inline-block; | |
margin-right: 0.75rem; | |
} | |
.pagination[aria-label="next"]::after { | |
content:'»'; | |
display: inline-block; | |
margin-left: 0.75rem; | |
} | |
.pagination .current { | |
padding: 0.1875rem 0.625rem; | |
background: #2199e8; | |
color: #fefefe; | |
cursor: default; | |
} | |
.pagination .disabled { | |
padding: 0.1875rem 0.625rem; | |
color: #cacaca; | |
cursor: default; | |
} | |
.pagination .disabled:hover { | |
background: transparent; | |
} | |
.pagination .ellipsis::after { | |
content:'…'; | |
padding: 0.1875rem 0.625rem; | |
color: #0a0a0a; | |
} | |
.progress { | |
background-color: #cacaca; | |
height: 1rem; | |
margin-bottom: 1rem; | |
border-radius: 0; | |
} | |
.progress.primary .progress-meter { | |
background-color: #2199e8; | |
} | |
.progress.secondary .progress-meter { | |
background-color: #777; | |
} | |
.progress.success .progress-meter { | |
background-color: #3adb76; | |
} | |
.progress.alert .progress-meter { | |
background-color: #ec5840; | |
} | |
.progress.warning .progress-meter { | |
background-color: #ffae00; | |
} | |
.progress-meter { | |
position: relative; | |
display: block; | |
width: 0%; | |
height: 100%; | |
background-color: #2199e8; | |
border-radius: 0; | |
} | |
.progress-meter .progress-meter-text { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
-webkit-transform: translate(-50%, -50%); | |
-ms-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
margin: 0; | |
font-size: 0.75rem; | |
font-weight: bold; | |
color: #fefefe; | |
white-space: nowrap; | |
} | |
.slider { | |
position: relative; | |
height: 0.5rem; | |
margin-top: 1.25rem; | |
margin-bottom: 2.25rem; | |
background-color: #e6e6e6; | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
.slider-fill { | |
position: absolute; | |
top: 0; | |
left: 0; | |
display: inline-block; | |
max-width: 100%; | |
height: 0.5rem; | |
background-color: #cacaca; | |
transition: all 0.2s ease-in-out; | |
} | |
.slider-fill.is-dragging { | |
transition: all 0s linear; | |
} | |
.slider-handle { | |
position: absolute; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
position: absolute; | |
left: 0; | |
z-index: 1; | |
display: inline-block; | |
width: 1.4rem; | |
height: 1.4rem; | |
background-color: #2199e8; | |
transition: all 0.2s ease-in-out; | |
-ms-touch-action: manipulation; | |
touch-action: manipulation; | |
border-radius: 0; | |
} | |
[data-whatinput="mouse"] .slider-handle { | |
outline: 0; | |
} | |
.slider-handle:hover { | |
background-color: #1583cc; | |
} | |
.slider-handle.is-dragging { | |
transition: all 0s linear; | |
} | |
.slider.disabled, .slider[disabled] { | |
opacity: 0.25; | |
cursor: not-allowed; | |
} | |
.slider.vertical { | |
display: inline-block; | |
width: 0.5rem; | |
height: 12.5rem; | |
margin: 0 1.25rem; | |
-webkit-transform: scale(1, -1); | |
-ms-transform: scale(1, -1); | |
transform: scale(1, -1); | |
} | |
.slider.vertical .slider-fill { | |
top: 0; | |
width: 0.5rem; | |
max-height: 100%; | |
} | |
.slider.vertical .slider-handle { | |
position: absolute; | |
top: 0; | |
left: 50%; | |
width: 1.4rem; | |
height: 1.4rem; | |
-webkit-transform: translateX(-50%); | |
-ms-transform: translateX(-50%); | |
transform: translateX(-50%); | |
} | |
.sticky-container { | |
position: relative; | |
} | |
.sticky { | |
position: absolute; | |
z-index: 0; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
.sticky.is-stuck { | |
position: fixed; | |
z-index: 5; | |
} | |
.sticky.is-stuck.is-at-top { | |
top: 0; | |
} | |
.sticky.is-stuck.is-at-bottom { | |
bottom: 0; | |
} | |
.sticky.is-anchored { | |
position: absolute; | |
left: auto; | |
right: auto; | |
} | |
.sticky.is-anchored.is-at-bottom { | |
bottom: 0; | |
} | |
.reveal-overlay { | |
display: none; | |
position: fixed; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
z-index: 1005; | |
background-color: rgba(10, 10, 10, 0.45); | |
overflow-y: scroll; | |
} | |
.reveal { | |
display: none; | |
z-index: 1006; | |
padding: 1rem; | |
border: 1px solid #cacaca; | |
margin: 100px auto 0 auto; | |
background-color: #fefefe; | |
border-radius: 0; | |
position: absolute; | |
overflow-y: auto; | |
} | |
[data-whatinput="mouse"] .reveal { | |
outline: 0; | |
} | |
@media screen and (min-width: 32em) { | |
.reveal { | |
min-height: 0; | |
} | |
} | |
.reveal .column, .reveal .columns { | |
min-width: 0; | |
} | |
.reveal > :last-child { | |
margin-bottom: 0; | |
} | |
@media screen and (min-width: 32em) { | |
.reveal { | |
width: 600px; | |
max-width: 75rem; | |
} | |
} | |
.reveal.collapse { | |
padding: 0; | |
} | |
@media screen and (min-width: 32em) { | |
.reveal .reveal { | |
left: auto; | |
right: auto; | |
margin: 0 auto; | |
} | |
} | |
@media screen and (min-width: 32em) { | |
.reveal.tiny { | |
width: 30%; | |
max-width: 75rem; | |
} | |
} | |
@media screen and (min-width: 32em) { | |
.reveal.small { | |
width: 50%; | |
max-width: 75rem; | |
} | |
} | |
@media screen and (min-width: 32em) { | |
.reveal.large { | |
width: 90%; | |
max-width: 75rem; | |
} | |
} | |
.reveal.full { | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
height: 100vh; | |
min-height: 100vh; | |
max-width: none; | |
margin-left: 0; | |
} | |
.switch { | |
margin-bottom: 1rem; | |
outline: 0; | |
position: relative; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
color: #fefefe; | |
font-weight: bold; | |
font-size: 0.875rem; | |
} | |
.switch-input { | |
opacity: 0; | |
position: absolute; | |
} | |
.switch-paddle { | |
background: #cacaca; | |
cursor: pointer; | |
display: block; | |
position: relative; | |
width: 4rem; | |
height: 2rem; | |
transition: all 0.25s ease-out; | |
border-radius: 0; | |
color: inherit; | |
font-weight: inherit; | |
} | |
input + .switch-paddle { | |
margin: 0; | |
} | |
.switch-paddle::after { | |
background: #fefefe; | |
content:''; | |
display: block; | |
position: absolute; | |
height: 1.5rem; | |
left: 0.25rem; | |
top: 0.25rem; | |
width: 1.5rem; | |
transition: all 0.25s ease-out; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
input:checked ~ .switch-paddle { | |
background: #2199e8; | |
} | |
input:checked ~ .switch-paddle::after { | |
left: 2.25rem; | |
} | |
[data-whatinput="mouse"] input:focus ~ .switch-paddle { | |
outline: 0; | |
} | |
.switch-active, .switch-inactive { | |
position: absolute; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.switch-active { | |
left: 8%; | |
display: none; | |
} | |
input:checked + label > .switch-active { | |
display: block; | |
} | |
.switch-inactive { | |
right: 15%; | |
} | |
input:checked + label > .switch-inactive { | |
display: none; | |
} | |
.switch.tiny .switch-paddle { | |
width: 3rem; | |
height: 1.5rem; | |
font-size: 0.625rem; | |
} | |
.switch.tiny .switch-paddle::after { | |
width: 1rem; | |
height: 1rem; | |
} | |
.switch.tiny input:checked ~ .switch-paddle:after { | |
left: 1.75rem; | |
} | |
.switch.small .switch-paddle { | |
width: 3.5rem; | |
height: 1.75rem; | |
font-size: 0.75rem; | |
} | |
.switch.small .switch-paddle::after { | |
width: 1.25rem; | |
height: 1.25rem; | |
} | |
.switch.small input:checked ~ .switch-paddle:after { | |
left: 2rem; | |
} | |
.switch.large .switch-paddle { | |
width: 5rem; | |
height: 2.5rem; | |
font-size: 1rem; | |
} | |
.switch.large .switch-paddle::after { | |
width: 2rem; | |
height: 2rem; | |
} | |
.switch.large input:checked ~ .switch-paddle:after { | |
left: 2.75rem; | |
} | |
table { | |
margin-bottom: 1rem; | |
border-radius: 0; | |
} | |
thead, tbody, tfoot { | |
border: 1px solid #f1f1f1; | |
background-color: #fefefe; | |
} | |
caption { | |
font-weight: bold; | |
padding: 0.5rem 0.625rem 0.625rem; | |
} | |
thead, tfoot { | |
background: #f8f8f8; | |
color: #0a0a0a; | |
} | |
thead tr, tfoot tr { | |
background: transparent; | |
} | |
thead th, thead td, tfoot th, tfoot td { | |
padding: 0.5rem 0.625rem 0.625rem; | |
font-weight: bold; | |
text-align: left; | |
} | |
tbody tr:nth-child(even) { | |
background-color: #f1f1f1; | |
} | |
tbody th, tbody td { | |
padding: 0.5rem 0.625rem 0.625rem; | |
} | |
@media screen and (max-width: 63.9375em) { | |
table.stack thead { | |
display: none; | |
} | |
table.stack tfoot { | |
display: none; | |
} | |
table.stack tr, table.stack th, table.stack td { | |
display: block; | |
} | |
table.stack td { | |
border-top: 0; | |
} | |
} | |
table.scroll { | |
display: block; | |
width: 100%; | |
overflow-y: scroll; | |
} | |
table.hover tr:hover { | |
background-color: #f9f9f9; | |
} | |
table.hover tr:nth-of-type(even):hover { | |
background-color: #ececec; | |
} | |
.tabs { | |
margin: 0; | |
list-style-type: none; | |
background: #fefefe; | |
border: 1px solid #e6e6e6; | |
} | |
.tabs::before, .tabs::after { | |
content:' '; | |
display: table; | |
} | |
.tabs::after { | |
clear: both; | |
} | |
.tabs.simple > li > a { | |
padding: 0; | |
} | |
.tabs.simple > li > a:hover { | |
background: transparent; | |
} | |
.tabs.vertical > li { | |
width: auto; | |
float: none; | |
display: block; | |
} | |
.tabs.primary { | |
background: #2199e8; | |
} | |
.tabs.primary > li > a { | |
color: #fefefe; | |
} | |
.tabs.primary > li > a:hover, .tabs.primary > li > a:focus { | |
background: #1893e4; | |
} | |
.tabs-title { | |
float: left; | |
} | |
.tabs-title > a { | |
display: block; | |
padding: 1.25rem 1.5rem; | |
line-height: 1; | |
font-size: 12px; | |
color: #2199e8; | |
} | |
.tabs-title > a:hover, .tabs-title > a:focus, .tabs-title > a[aria-selected="true"] { | |
background: #e6e6e6; | |
} | |
.tabs-content { | |
background: #fefefe; | |
transition: all 0.5s ease; | |
border: 1px solid #e6e6e6; | |
border-top: 0; | |
} | |
.tabs-content.vertical { | |
border: 1px solid #e6e6e6; | |
border-left: 0; | |
} | |
.tabs-panel { | |
display: none; | |
padding: 1rem; | |
} | |
.tabs-panel.is-active { | |
display: block; | |
} | |
.thumbnail { | |
border: solid 4px #fefefe; | |
box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2); | |
display: inline-block; | |
line-height: 0; | |
max-width: 100%; | |
transition: box-shadow 200ms ease-out; | |
border-radius: 0; | |
margin-bottom: 1rem; | |
} | |
.thumbnail:hover, .thumbnail:focus { | |
box-shadow: 0 0 6px 1px rgba(33, 153, 232, 0.5); | |
} | |
.title-bar { | |
background: #0a0a0a; | |
color: #fefefe; | |
padding: 0.5rem; | |
} | |
.title-bar::before, .title-bar::after { | |
content:' '; | |
display: table; | |
} | |
.title-bar::after { | |
clear: both; | |
} | |
.title-bar .menu-icon { | |
margin-left: 0.25rem; | |
margin-right: 0.5rem; | |
} | |
.title-bar-left { | |
float: left; | |
} | |
.title-bar-right { | |
float: right; | |
text-align: right; | |
} | |
.title-bar-title { | |
font-weight: bold; | |
vertical-align: middle; | |
display: inline-block; | |
} | |
.menu-icon { | |
position: relative; | |
display: inline-block; | |
vertical-align: middle; | |
cursor: pointer; | |
width: 20px; | |
height: 16px; | |
} | |
.menu-icon::after { | |
content:''; | |
position: absolute; | |
display: block; | |
width: 100%; | |
height: 2px; | |
background: white; | |
top: 0; | |
left: 0; | |
box-shadow: 0 7px 0 white, 0 14px 0 white; | |
} | |
.menu-icon:hover::after { | |
background: #cacaca; | |
box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; | |
} | |
.menu-icon.dark { | |
position: relative; | |
display: inline-block; | |
vertical-align: middle; | |
cursor: pointer; | |
width: 20px; | |
height: 16px; | |
} | |
.menu-icon.dark::after { | |
content:''; | |
position: absolute; | |
display: block; | |
width: 100%; | |
height: 2px; | |
background: black; | |
top: 0; | |
left: 0; | |
box-shadow: 0 7px 0 black, 0 14px 0 black; | |
} | |
.menu-icon.dark:hover::after { | |
background: #666; | |
box-shadow: 0 7px 0 #666, 0 14px 0 #666; | |
} | |
.has-tip { | |
border-bottom: dotted 1px #8a8a8a; | |
font-weight: bold; | |
position: relative; | |
display: inline-block; | |
} | |
.has-tip:hover { | |
cursor: help; | |
} | |
.tooltip { | |
background-color: #0a0a0a; | |
color: #fefefe; | |
font-size: 80%; | |
padding: 0.75rem; | |
position: absolute; | |
z-index: 10; | |
top: calc(100% + 0.6495rem); | |
max-width: 10rem !important; | |
border-radius: 0; | |
} | |
.tooltip::before { | |
content:''; | |
display: block; | |
width: 0; | |
height: 0; | |
border: inset 0.75rem; | |
border-color: transparent transparent #0a0a0a; | |
border-bottom-style: solid; | |
bottom: 100%; | |
position: absolute; | |
left: 50%; | |
-webkit-transform: translateX(-50%); | |
-ms-transform: translateX(-50%); | |
transform: translateX(-50%); | |
} | |
.tooltip.top::before { | |
content:''; | |
display: block; | |
width: 0; | |
height: 0; | |
border: inset 0.75rem; | |
border-color: #0a0a0a transparent transparent; | |
border-top-style: solid; | |
top: 100%; | |
bottom: auto; | |
} | |
.tooltip.left::before { | |
content:''; | |
display: block; | |
width: 0; | |
height: 0; | |
border: inset 0.75rem; | |
border-color: transparent transparent transparent #0a0a0a; | |
border-left-style: solid; | |
bottom: auto; | |
left: 100%; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.tooltip.right::before { | |
content:''; | |
display: block; | |
width: 0; | |
height: 0; | |
border: inset 0.75rem; | |
border-color: transparent #0a0a0a transparent transparent; | |
border-right-style: solid; | |
bottom: auto; | |
left: auto; | |
right: 100%; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.top-bar { | |
padding: 0.5rem; | |
} | |
.top-bar::before, .top-bar::after { | |
content:' '; | |
display: table; | |
} | |
.top-bar::after { | |
clear: both; | |
} | |
.top-bar, .top-bar ul { | |
background-color: #eee; | |
} | |
.top-bar input { | |
width: 200px; | |
margin-right: 1rem; | |
} | |
@media screen and (min-width: 32em) { | |
.top-bar-left { | |
float: left; | |
} | |
.top-bar-right { | |
float: right; | |
} | |
} | |
.slide-in-down.mui-enter { | |
-webkit-transform: translateY(-100%); | |
-ms-transform: translateY(-100%); | |
transform: translateY(-100%); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.slide-in-down.mui-enter.mui-enter-active { | |
-webkit-transform: translateY(0); | |
-ms-transform: translateY(0); | |
transform: translateY(0); | |
} | |
.slide-in-left.mui-enter { | |
-webkit-transform: translateX(-100%); | |
-ms-transform: translateX(-100%); | |
transform: translateX(-100%); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.slide-in-left.mui-enter.mui-enter-active { | |
-webkit-transform: translateX(0); | |
-ms-transform: translateX(0); | |
transform: translateX(0); | |
} | |
.slide-in-up.mui-enter { | |
-webkit-transform: translateY(100%); | |
-ms-transform: translateY(100%); | |
transform: translateY(100%); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.slide-in-up.mui-enter.mui-enter-active { | |
-webkit-transform: translateY(0); | |
-ms-transform: translateY(0); | |
transform: translateY(0); | |
} | |
.slide-in-right.mui-enter { | |
-webkit-transform: translateX(100%); | |
-ms-transform: translateX(100%); | |
transform: translateX(100%); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.slide-in-right.mui-enter.mui-enter-active { | |
-webkit-transform: translateX(0); | |
-ms-transform: translateX(0); | |
transform: translateX(0); | |
} | |
.slide-out-down.mui-leave { | |
-webkit-transform: translateY(0); | |
-ms-transform: translateY(0); | |
transform: translateY(0); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.slide-out-down.mui-leave.mui-leave-active { | |
-webkit-transform: translateY(-100%); | |
-ms-transform: translateY(-100%); | |
transform: translateY(-100%); | |
} | |
.slide-out-right.mui-leave { | |
-webkit-transform: translateX(0); | |
-ms-transform: translateX(0); | |
transform: translateX(0); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.slide-out-right.mui-leave.mui-leave-active { | |
-webkit-transform: translateX(100%); | |
-ms-transform: translateX(100%); | |
transform: translateX(100%); | |
} | |
.slide-out-up.mui-leave { | |
-webkit-transform: translateY(0); | |
-ms-transform: translateY(0); | |
transform: translateY(0); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.slide-out-up.mui-leave.mui-leave-active { | |
-webkit-transform: translateY(-100%); | |
-ms-transform: translateY(-100%); | |
transform: translateY(-100%); | |
} | |
.slide-out-left.mui-leave { | |
-webkit-transform: translateX(0); | |
-ms-transform: translateX(0); | |
transform: translateX(0); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.slide-out-left.mui-leave.mui-leave-active { | |
-webkit-transform: translateX(-100%); | |
-ms-transform: translateX(-100%); | |
transform: translateX(-100%); | |
} | |
.fade-in.mui-enter { | |
opacity: 0; | |
transition-property: opacity; | |
} | |
.fade-in.mui-enter.mui-enter-active { | |
opacity: 1; | |
} | |
.fade-out.mui-leave { | |
opacity: 1; | |
transition-property: opacity; | |
} | |
.fade-out.mui-leave.mui-leave-active { | |
opacity: 0; | |
} | |
.hinge-in-from-top.mui-enter { | |
-webkit-transform: perspective(2000px) rotateX(-90deg); | |
transform: perspective(2000px) rotateX(-90deg); | |
-webkit-transform-origin: top; | |
-ms-transform-origin: top; | |
transform-origin: top; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 0; | |
} | |
.hinge-in-from-top.mui-enter.mui-enter-active { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
opacity: 1; | |
} | |
.hinge-in-from-right.mui-enter { | |
-webkit-transform: perspective(2000px) rotateY(-90deg); | |
transform: perspective(2000px) rotateY(-90deg); | |
-webkit-transform-origin: right; | |
-ms-transform-origin: right; | |
transform-origin: right; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 0; | |
} | |
.hinge-in-from-right.mui-enter.mui-enter-active { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
opacity: 1; | |
} | |
.hinge-in-from-bottom.mui-enter { | |
-webkit-transform: perspective(2000px) rotateX(90deg); | |
transform: perspective(2000px) rotateX(90deg); | |
-webkit-transform-origin: bottom; | |
-ms-transform-origin: bottom; | |
transform-origin: bottom; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 0; | |
} | |
.hinge-in-from-bottom.mui-enter.mui-enter-active { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
opacity: 1; | |
} | |
.hinge-in-from-left.mui-enter { | |
-webkit-transform: perspective(2000px) rotateY(90deg); | |
transform: perspective(2000px) rotateY(90deg); | |
-webkit-transform-origin: left; | |
-ms-transform-origin: left; | |
transform-origin: left; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 0; | |
} | |
.hinge-in-from-left.mui-enter.mui-enter-active { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
opacity: 1; | |
} | |
.hinge-in-from-middle-x.mui-enter { | |
-webkit-transform: perspective(2000px) rotateX(-90deg); | |
transform: perspective(2000px) rotateX(-90deg); | |
-webkit-transform-origin: center; | |
-ms-transform-origin: center; | |
transform-origin: center; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 0; | |
} | |
.hinge-in-from-middle-x.mui-enter.mui-enter-active { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
opacity: 1; | |
} | |
.hinge-in-from-middle-y.mui-enter { | |
-webkit-transform: perspective(2000px) rotateY(-90deg); | |
transform: perspective(2000px) rotateY(-90deg); | |
-webkit-transform-origin: center; | |
-ms-transform-origin: center; | |
transform-origin: center; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 0; | |
} | |
.hinge-in-from-middle-y.mui-enter.mui-enter-active { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
opacity: 1; | |
} | |
.hinge-out-from-top.mui-leave { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
-webkit-transform-origin: top; | |
-ms-transform-origin: top; | |
transform-origin: top; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 1; | |
} | |
.hinge-out-from-top.mui-leave.mui-leave-active { | |
-webkit-transform: perspective(2000px) rotateX(-90deg); | |
transform: perspective(2000px) rotateX(-90deg); | |
opacity: 0; | |
} | |
.hinge-out-from-right.mui-leave { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
-webkit-transform-origin: right; | |
-ms-transform-origin: right; | |
transform-origin: right; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 1; | |
} | |
.hinge-out-from-right.mui-leave.mui-leave-active { | |
-webkit-transform: perspective(2000px) rotateY(-90deg); | |
transform: perspective(2000px) rotateY(-90deg); | |
opacity: 0; | |
} | |
.hinge-out-from-bottom.mui-leave { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
-webkit-transform-origin: bottom; | |
-ms-transform-origin: bottom; | |
transform-origin: bottom; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 1; | |
} | |
.hinge-out-from-bottom.mui-leave.mui-leave-active { | |
-webkit-transform: perspective(2000px) rotateX(90deg); | |
transform: perspective(2000px) rotateX(90deg); | |
opacity: 0; | |
} | |
.hinge-out-from-left.mui-leave { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
-webkit-transform-origin: left; | |
-ms-transform-origin: left; | |
transform-origin: left; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 1; | |
} | |
.hinge-out-from-left.mui-leave.mui-leave-active { | |
-webkit-transform: perspective(2000px) rotateY(90deg); | |
transform: perspective(2000px) rotateY(90deg); | |
opacity: 0; | |
} | |
.hinge-out-from-middle-x.mui-leave { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
-webkit-transform-origin: center; | |
-ms-transform-origin: center; | |
transform-origin: center; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 1; | |
} | |
.hinge-out-from-middle-x.mui-leave.mui-leave-active { | |
-webkit-transform: perspective(2000px) rotateX(-90deg); | |
transform: perspective(2000px) rotateX(-90deg); | |
opacity: 0; | |
} | |
.hinge-out-from-middle-y.mui-leave { | |
-webkit-transform: perspective(2000px) rotate(0deg); | |
transform: perspective(2000px) rotate(0deg); | |
-webkit-transform-origin: center; | |
-ms-transform-origin: center; | |
transform-origin: center; | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 1; | |
} | |
.hinge-out-from-middle-y.mui-leave.mui-leave-active { | |
-webkit-transform: perspective(2000px) rotateY(-90deg); | |
transform: perspective(2000px) rotateY(-90deg); | |
opacity: 0; | |
} | |
.scale-in-up.mui-enter { | |
-webkit-transform: scale(0.5); | |
-ms-transform: scale(0.5); | |
transform: scale(0.5); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 0; | |
} | |
.scale-in-up.mui-enter.mui-enter-active { | |
-webkit-transform: scale(1); | |
-ms-transform: scale(1); | |
transform: scale(1); | |
opacity: 1; | |
} | |
.scale-in-down.mui-enter { | |
-webkit-transform: scale(1.5); | |
-ms-transform: scale(1.5); | |
transform: scale(1.5); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 0; | |
} | |
.scale-in-down.mui-enter.mui-enter-active { | |
-webkit-transform: scale(1); | |
-ms-transform: scale(1); | |
transform: scale(1); | |
opacity: 1; | |
} | |
.scale-out-up.mui-leave { | |
-webkit-transform: scale(1); | |
-ms-transform: scale(1); | |
transform: scale(1); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 1; | |
} | |
.scale-out-up.mui-leave.mui-leave-active { | |
-webkit-transform: scale(1.5); | |
-ms-transform: scale(1.5); | |
transform: scale(1.5); | |
opacity: 0; | |
} | |
.scale-out-down.mui-leave { | |
-webkit-transform: scale(1); | |
-ms-transform: scale(1); | |
transform: scale(1); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 1; | |
} | |
.scale-out-down.mui-leave.mui-leave-active { | |
-webkit-transform: scale(0.5); | |
-ms-transform: scale(0.5); | |
transform: scale(0.5); | |
opacity: 0; | |
} | |
.spin-in.mui-enter { | |
-webkit-transform: rotate(-0.75turn); | |
-ms-transform: rotate(-0.75turn); | |
transform: rotate(-0.75turn); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 0; | |
} | |
.spin-in.mui-enter.mui-enter-active { | |
-webkit-transform: rotate(0); | |
-ms-transform: rotate(0); | |
transform: rotate(0); | |
opacity: 1; | |
} | |
.spin-out.mui-leave { | |
-webkit-transform: rotate(0); | |
-ms-transform: rotate(0); | |
transform: rotate(0); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 1; | |
} | |
.spin-out.mui-leave.mui-leave-active { | |
-webkit-transform: rotate(0.75turn); | |
-ms-transform: rotate(0.75turn); | |
transform: rotate(0.75turn); | |
opacity: 0; | |
} | |
.spin-in-ccw.mui-enter { | |
-webkit-transform: rotate(0.75turn); | |
-ms-transform: rotate(0.75turn); | |
transform: rotate(0.75turn); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 0; | |
} | |
.spin-in-ccw.mui-enter.mui-enter-active { | |
-webkit-transform: rotate(0); | |
-ms-transform: rotate(0); | |
transform: rotate(0); | |
opacity: 1; | |
} | |
.spin-out-ccw.mui-leave { | |
-webkit-transform: rotate(0); | |
-ms-transform: rotate(0); | |
transform: rotate(0); | |
transition-property: -webkit-transform, opacity; | |
transition-property: transform, opacity; | |
opacity: 1; | |
} | |
.spin-out-ccw.mui-leave.mui-leave-active { | |
-webkit-transform: rotate(-0.75turn); | |
-ms-transform: rotate(-0.75turn); | |
transform: rotate(-0.75turn); | |
opacity: 0; | |
} | |
.slow { | |
transition-duration: 750ms !important; | |
} | |
.fast { | |
transition-duration: 250ms !important; | |
} | |
.linear { | |
transition-timing-function: linear !important; | |
} | |
.ease { | |
transition-timing-function: ease !important; | |
} | |
.ease-in { | |
transition-timing-function: ease-in !important; | |
} | |
.ease-out { | |
transition-timing-function: ease-out !important; | |
} | |
.ease-in-out { | |
transition-timing-function: ease-in-out !important; | |
} | |
.bounce-in { | |
transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; | |
} | |
.bounce-out { | |
transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; | |
} | |
.bounce-in-out { | |
transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; | |
} | |
.short-delay { | |
transition-delay: 300ms !important; | |
} | |
.long-delay { | |
transition-delay: 700ms !important; | |
} | |
.shake { | |
-webkit-animation-name: shake-7; | |
animation-name: shake-7; | |
} | |
@-webkit-keyframes shake-7 { | |
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { | |
-webkit-transform: translateX(7%); | |
transform: translateX(7%); | |
} | |
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { | |
-webkit-transform: translateX(-7%); | |
transform: translateX(-7%); | |
} | |
} | |
@keyframes shake-7 { | |
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { | |
-webkit-transform: translateX(7%); | |
transform: translateX(7%); | |
} | |
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { | |
-webkit-transform: translateX(-7%); | |
transform: translateX(-7%); | |
} | |
} | |
.spin-cw { | |
-webkit-animation-name: spin-cw-1turn; | |
animation-name: spin-cw-1turn; | |
} | |
@-webkit-keyframes spin-cw-1turn { | |
0% { | |
-webkit-transform: rotate(-1turn); | |
transform: rotate(-1turn); | |
} | |
100% { | |
-webkit-transform: rotate(0); | |
transform: rotate(0); | |
} | |
} | |
@keyframes spin-cw-1turn { | |
0% { | |
-webkit-transform: rotate(-1turn); | |
transform: rotate(-1turn); | |
} | |
100% { | |
-webkit-transform: rotate(0); | |
transform: rotate(0); | |
} | |
} | |
.spin-ccw { | |
-webkit-animation-name: spin-cw-1turn; | |
animation-name: spin-cw-1turn; | |
} | |
@keyframes spin-cw-1turn { | |
0% { | |
-webkit-transform: rotate(0); | |
transform: rotate(0); | |
} | |
100% { | |
-webkit-transform: rotate(1turn); | |
transform: rotate(1turn); | |
} | |
} | |
.wiggle { | |
-webkit-animation-name: wiggle-7deg; | |
animation-name: wiggle-7deg; | |
} | |
@-webkit-keyframes wiggle-7deg { | |
40%, 50%, 60% { | |
-webkit-transform: rotate(7deg); | |
transform: rotate(7deg); | |
} | |
35%, 45%, 55%, 65% { | |
-webkit-transform: rotate(-7deg); | |
transform: rotate(-7deg); | |
} | |
0%, 30%, 70%, 100% { | |
-webkit-transform: rotate(0); | |
transform: rotate(0); | |
} | |
} | |
@keyframes wiggle-7deg { | |
40%, 50%, 60% { | |
-webkit-transform: rotate(7deg); | |
transform: rotate(7deg); | |
} | |
35%, 45%, 55%, 65% { | |
-webkit-transform: rotate(-7deg); | |
transform: rotate(-7deg); | |
} | |
0%, 30%, 70%, 100% { | |
-webkit-transform: rotate(0); | |
transform: rotate(0); | |
} | |
} | |
.infinite { | |
-webkit-animation-iteration-count: infinite; | |
animation-iteration-count: infinite; | |
} | |
.slow { | |
-webkit-animation-duration: 750ms !important; | |
animation-duration: 750ms !important; | |
} | |
.fast { | |
-webkit-animation-duration: 250ms !important; | |
animation-duration: 250ms !important; | |
} | |
.linear { | |
-webkit-animation-timing-function: linear !important; | |
animation-timing-function: linear !important; | |
} | |
.ease { | |
-webkit-animation-timing-function: ease !important; | |
animation-timing-function: ease !important; | |
} | |
.ease-in { | |
-webkit-animation-timing-function: ease-in !important; | |
animation-timing-function: ease-in !important; | |
} | |
.ease-out { | |
-webkit-animation-timing-function: ease-out !important; | |
animation-timing-function: ease-out !important; | |
} | |
.ease-in-out { | |
-webkit-animation-timing-function: ease-in-out !important; | |
animation-timing-function: ease-in-out !important; | |
} | |
.bounce-in { | |
-webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; | |
animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; | |
} | |
.bounce-out { | |
-webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; | |
animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; | |
} | |
.bounce-in-out { | |
-webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; | |
animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; | |
} | |
.short-delay { | |
-webkit-animation-delay: 300ms !important; | |
animation-delay: 300ms !important; | |
} | |
.long-delay { | |
-webkit-animation-delay: 700ms !important; | |
animation-delay: 700ms !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment